diff --git a/qlfile b/qlfile
index 2bf9557..b64cfa2 100644
--- a/qlfile
+++ b/qlfile
@@ -7,3 +7,4 @@ ql cl-ppcre
 ql log4cl
 ql function-cache
 ql trivial-backtrace
+ql cl-interpol
diff --git a/qlfile.lock b/qlfile.lock
index b018d2a..10871ee 100644
--- a/qlfile.lock
+++ b/qlfile.lock
@@ -38,3 +38,7 @@
  (:class qlot/source/ql:source-ql
   :initargs (:%version :latest)
   :version "ql-2023-10-21"))
+("cl-interpol" .
+ (:class qlot/source/ql:source-ql
+  :initargs (:%version :latest)
+  :version "ql-2023-10-21"))
diff --git a/src/components/layout.lisp b/src/components/layout.lisp
index 7c3ee16..2a1a006 100644
--- a/src/components/layout.lisp
+++ b/src/components/layout.lisp
@@ -1,15 +1,50 @@
 (defpackage #:hp/components/layout
   (:use #:cl
-        #:piccolo)
-  (:local-nicknames (#:cfg #:hp/config/*))
+        #:piccolo
+        #:cl-interpol)
+  (:import-from #:hp/config/asset
+                #:*hx-ext*)
+  (:import-from #:hp/view/asset
+                #:defasset)
   (:export #:layout))
 (in-package #:hp/components/layout)
 
+(named-readtables:in-readtable :interpol-syntax)
+
+(defparameter *header-nav-items*
+  '((:href "/"        :label "Home")
+    (:href "/about"   :label "About")
+    (:href "/work"    :label "Work")
+    (:href "/contact" :label "Contact")))
+
+(define-element header-nav-item (href label)
+  (li
+    :class "px-2 rounded-full"
+    :|:class| #?"isCurrentPath('${href}') && 'font-bold bg-lime-200 pointer-events-none'"
+    (a :href href
+      label)))
+
+(define-element layout-header ()
+  (header :class "px-10 py-6 flex justify-between"
+    (H1 :class "font-bold text-2xl"
+      "skyizwhite.dev")
+    (nav
+      :x-data "{
+        currentPath: window.location.pathname,
+        isCurrentPath(path) {
+          return this.currentPath === path
+        }
+      }"
+      :hx-boost "true"
+      (ul :class "h-full flex items-center gap-6 text-lg"
+        (mapcar (lambda (item) (header-nav-item item))
+                *header-nav-items*)))))
+
 (define-element layout ()
   (body
-    :hx-ext cfg:*hx-ext*
-    :class "h-[100svh] flex flex-col"
-    (header)
+    :hx-ext *hx-ext*
+    :class "h-[100svh] flex flex-col"          
+    (layout-header)
     (main :class "flex-1"
       children)
     ; footer
diff --git a/src/routes/about.lisp b/src/routes/about.lisp
new file mode 100644
index 0000000..c572e0c
--- /dev/null
+++ b/src/routes/about.lisp
@@ -0,0 +1,16 @@
+(defpackage #:hp/routes/about
+  (:use #:cl
+        #:piccolo)
+  (:local-nicknames (#:view #:hp/view/*))
+  (:export #:handle-get))
+(in-package #:hp/routes/about)
+
+(define-element page ()
+  (div :class "h-full place-content-center"
+    (h1
+      :class "text-4xl text-center"
+      "About")))
+
+(defun handle-get (params)
+  (declare (ignore params))
+  (view:render (page)))
diff --git a/src/routes/contact.lisp b/src/routes/contact.lisp
new file mode 100644
index 0000000..7406ba5
--- /dev/null
+++ b/src/routes/contact.lisp
@@ -0,0 +1,16 @@
+(defpackage #:hp/routes/contact
+  (:use #:cl
+        #:piccolo)
+  (:local-nicknames (#:view #:hp/view/*))
+  (:export #:handle-get))
+(in-package #:hp/routes/contact)
+
+(define-element page ()
+  (div :class "h-full place-content-center"
+    (h1
+      :class "text-4xl text-center"
+      "Contact")))
+
+(defun handle-get (params)
+  (declare (ignore params))
+  (view:render (page)))
diff --git a/src/routes/index.lisp b/src/routes/index.lisp
index 73141b2..5ec167d 100644
--- a/src/routes/index.lisp
+++ b/src/routes/index.lisp
@@ -8,15 +8,7 @@
 (define-element page ()
   (div :class "h-full place-content-center"
     (h1
-      :x-data "{
-         flag: true,
-         toggle() {
-           this.flag = !this.flag
-         }
-       }"
-      :@click "toggle"
       :class "text-4xl text-center"
-      :|:class| "flag ? 'text-red-400' : 'text-blue-400'"
       "Hello, world!")))
 
 (defun handle-get (params)
diff --git a/src/routes/not-found.lisp b/src/routes/not-found.lisp
index 2aaf3cc..6d47d45 100644
--- a/src/routes/not-found.lisp
+++ b/src/routes/not-found.lisp
@@ -10,8 +10,10 @@
     :description "お探しのページは見つかりませんでした。"))
 
 (define-element page ()
-  (section
-    (h1 "404 Not Found")))
+  (div :class "h-full place-content-center"
+    (h1
+      :class "text-rose-400 text-4xl text-center"
+      "404 Not Found")))
 
 (defun handle-not-found ()
   (view:render (page)
diff --git a/src/routes/work.lisp b/src/routes/work.lisp
new file mode 100644
index 0000000..b6ffb36
--- /dev/null
+++ b/src/routes/work.lisp
@@ -0,0 +1,16 @@
+(defpackage #:hp/routes/work
+  (:use #:cl
+        #:piccolo)
+  (:local-nicknames (#:view #:hp/view/*))
+  (:export #:handle-get))
+(in-package #:hp/routes/work)
+
+(define-element page ()
+  (div :class "h-full place-content-center"
+    (h1
+      :class "text-4xl text-center"
+      "Work")))
+
+(defun handle-get (params)
+  (declare (ignore params))
+  (view:render (page)))