diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index be13a81..aa75abd 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -40,5 +40,23 @@ jobs:
             dist/
           key: ${{ runner.os }}-cargo-${{ hashFiles('Cargo.lock') }}
 
-      - name: Check using Perseus
-        run: perseus check
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Cache node modules
+        id: bun-cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            node_modules/
+          key: ${{ runner.os }}-node-${{ hashFiles('bun.lockb') }}
+
+      - name: Install bun dependencies
+        if: steps.bun-cache.outputs.cache-hit != 'true'
+        run: bun install --frozen-lockfile
+
+      - name: Check build sass
+        run: bun sass
+
+      - name: Check build static
+        run: bun check
diff --git a/.github/workflows/gh-page.yml b/.github/workflows/gh-page.yml
index eed9873..b7ee047 100644
--- a/.github/workflows/gh-page.yml
+++ b/.github/workflows/gh-page.yml
@@ -52,11 +52,26 @@ jobs:
             dist/
           key: ${{ runner.os }}-cargo-build-${{ hashFiles('Cargo.lock') }}
 
-      - name: Build using Perseus
-        run: perseus export --release
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Cache node modules
+        id: bun-cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            node_modules/
+          key: ${{ runner.os }}-node-${{ hashFiles('bun.lockb') }}
+
+      - name: Install bun dependencies
+        if: steps.bun-cache.outputs.cache-hit != 'true'
+        run: bun install --frozen-lockfile
 
-      - name: Setup Not Found Page
-        run: perseus export-error-page -c 404 -o dist/exported/404.html
+      - name: Generate css from scss
+        run: bun sass
+
+      - name: Build using Perseus
+        run: bun build
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
diff --git a/.gitignore b/.gitignore
index a1d60b1..541a44a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,47 @@
-dist/
-target/
-pkg/
+# Build
+/dist
+/lib
+/lib-types
+/server
+/target
+/pkg
+
+# Development
+node_modules
+*.local
+
+# Cache
+.cache
+.mf
+.rollup.cache
+tsconfig.tsbuildinfo
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor
+.vscode/*
+!.vscode/launch.json
+!.vscode/*.code-snippets
+
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Yarn
+.yarn/*
+!.yarn/releases
+
+# Static css
+/static/styles/*.css
+/static/styles/*.css.map
diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 0000000..05ca2c8
Binary files /dev/null and b/bun.lockb differ
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..c9f8e93
--- /dev/null
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "binhtran432k.github.io",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "perseus serve -w",
+    "preview": "perseus export -w",
+    "check": "perseus check",
+    "sass": "sass src/sass:static/styles",
+    "build": "perseus export --release && perseus export-error-page -c 404 -o dist/exported/404.html",
+    "sass:watch": "sass --watch src/sass:static/styles"
+  },
+  "devDependencies": {
+    "sass": "^1.72.0"
+  }
+}
diff --git a/src/error_views.rs b/src/error_views.rs
index c32ad22..1064f88 100644
--- a/src/error_views.rs
+++ b/src/error_views.rs
@@ -8,7 +8,7 @@ fn get_error_page<G: Html>(cx: Scope, title: String, message: String) -> (View<S
         },
         view! { cx,
             // Don't worry, there are much better ways of styling in Perseus!
-            div(style = "display: flex; flex-direction: column; justify-content: center; align-items: center; height: 95vh;") {
+            div(class="test") {
                 h1 { (title) }
                 p { (message) }
             }
diff --git a/src/main.rs b/src/main.rs
index bccc788..0611a3b 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -17,6 +17,12 @@ pub fn main<G: Html>() -> PerseusApp<G> {
                         meta(charset = "UTF-8")
                         meta(name = "viewport", content = "width=device-width, initial-scale=1.0")
                         crate::components::seo::Seo()
+                        // fonts
+                        link (rel="preconnect", href="https://fonts.googleapis.com")
+                        link (rel="preconnect", href="https://fonts.gstatic.com", crossorigin="crossorigin")
+                        link (href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap", rel="stylesheet")
+                        // style
+                        link(rel="stylesheet", href=".perseus/static/styles/base.css")
                     }
                     body {
                         // Quirk: this creates a wrapper `<div>` around the root `<div>` by necessity
diff --git a/src/sass/base.scss b/src/sass/base.scss
new file mode 100644
index 0000000..de32c8e
--- /dev/null
+++ b/src/sass/base.scss
@@ -0,0 +1,17 @@
+* {
+  margin: 0;
+
+  &,
+  &::before,
+  &::after {
+    box-sizing: border-box;
+  }
+}
+
+.test {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 95vh;
+}
diff --git a/src/templates/index.rs b/src/templates/index.rs
index 9e71cdd..ac567d8 100644
--- a/src/templates/index.rs
+++ b/src/templates/index.rs
@@ -4,7 +4,7 @@ use sycamore::prelude::*;
 fn index_page<G: Html>(cx: Scope) -> View<G> {
     view! { cx,
         // Don't worry, there are much better ways of styling in Perseus!
-        div(style = "display: flex; flex-direction: column; justify-content: center; align-items: center; height: 95vh;") {
+        div(class="test") {
             h1 { "Welcome to Perseus!" }
             p {
                 "This is just an example app. Try changing some code inside "