diff --git a/src/components/header.lisp b/src/components/header.lisp
new file mode 100644
index 0000000..82bbef8
--- /dev/null
+++ b/src/components/header.lisp
@@ -0,0 +1,28 @@
+(defpackage #:hp/components/header
+  (:use #:cl
+        #:hsx)
+  (:import-from #:jingle
+                #:request-uri)
+  (:export #:~header))
+(in-package #:hp/components/header)
+
+(defparameter *nav-menu*
+  '(("/bio" "bio")
+    ("/work" "work")
+    ("/blog" "blog")))
+
+(defcomp ~header ()
+  (hsx
+   (header :class "flex justify-between pb-2 md:pb-4 border-b-1"            
+     (h1 :class "text-2xl md:text-3xl font-bold"
+       (a :href "/"
+         "skyizwhite"))
+     (nav :class "flex items-end"
+       (ul :preload "mouseover" :class "flex gap-4 text-lg"
+         (loop
+           :for (href label) :in *nav-menu* :collect
+              (if (search href (request-uri jingle:*request*))
+                  (hsx (li :class "text-pink-500"
+                         label))
+                  (hsx (li (a :href href :class "underline hover:text-pink-500"
+                             label))))))))))
diff --git a/src/components/layout.lisp b/src/components/layout.lisp
index 4421773..7d859cd 100644
--- a/src/components/layout.lisp
+++ b/src/components/layout.lisp
@@ -3,19 +3,14 @@
         #:hsx)
   (:import-from #:hp/lib/metadata
                 #:~metadata)
-  (:import-from #:jingle
-                #:request-uri)
+  (:import-from #:hp/components/header
+                #:~header)
   (:export #:~layout))
 (in-package #:hp/components/layout)
 
 (defun bust-cache (url)
   (format nil "~a?v=~a" url #.(get-universal-time)))
 
-(defparameter *nav-menu*
-  '(("/bio" "bio")
-    ("/work" "work")
-    ("/blog" "blog")))
-
 (defcomp ~layout (&key metadata children)
   (hsx
    (html :lang "ja"
@@ -41,23 +36,10 @@
        :hx-ext "head-support, response-targets, preload"
        :hx-boost "true" :hx-target-404 "body" :hx-target-5* "body"
        :class (<> 
-                "bg-amber-50/90 flex flex-col h-[100svh] w-full max-w-[700px] "
-                "px-2 pt-2 mx-auto md:px-8 md:pt-8")
-       (header :class "flex justify-between pb-2 md:pb-4 border-b-1"            
-         (h1 :class "text-2xl md:text-3xl font-bold"
-           (a :href "/"
-             "skyizwhite"))
-         (nav :class "flex items-end"
-           (ul
-             :preload "mouseover"
-             :class "flex gap-4 text-lg"
-             (loop
-               :for (href label) :in *nav-menu*
-               :collect
-                  (if (search href (request-uri jingle:*request*))
-                      (hsx (li :class "text-pink-500"
-                             label))
-                      (hsx (li (a :href href :class "underline hover:text-pink-500"
-                                 label))))))))
-       (main :class "flex-1 pt-2 pb-4 md:pt-4 md:pb-8 overflow-y-scroll "
-         children)))))
+                "flex flex-col h-[100svh] w-full max-w-[700px] "
+                "p-2 md:pt-6 mx-auto")
+       (~header)
+       (main :class "flex-1 px-2 py-6 md:px-4 md:py-8 overflow-y-scroll"
+         children)
+       (footer :class "flex p-2 justify-center text-sm border-t-1"
+         (p "© 2025 Akira Tempaku"))))))