diff --git a/src/components/header.lisp b/src/components/header.lisp
deleted file mode 100644
index 82bbef8..0000000
--- a/src/components/header.lisp
+++ /dev/null
@@ -1,28 +0,0 @@
-(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/renderer.lisp b/src/renderer.lisp
index 8d26ca9..23742cf 100644
--- a/src/renderer.lisp
+++ b/src/renderer.lisp
@@ -9,7 +9,7 @@
   (:import-from #:hp/lib/env
                 #:hp-url
                 #:hp-env)
-  (:import-from #:hp/components/layout
+  (:import-from #:hp/ui/layout
                 #:~layout))
 (in-package #:hp/renderer)
 
diff --git a/src/ui/.keep b/src/ui/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layout.lisp b/src/ui/layout.lisp
similarity index 56%
rename from src/components/layout.lisp
rename to src/ui/layout.lisp
index fadd874..ea14831 100644
--- a/src/components/layout.lisp
+++ b/src/ui/layout.lisp
@@ -1,16 +1,21 @@
-(defpackage #:hp/components/layout
+(defpackage #:hp/ui/layout
   (:use #:cl
         #:hsx)
   (:import-from #:hp/lib/metadata
                 #:~metadata)
-  (:import-from #:hp/components/header
-                #:~header)
+  (:import-from #:jingle
+                #:request-uri)
   (:export #:~layout))
-(in-package #:hp/components/layout)
+(in-package #:hp/ui/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"
@@ -35,11 +40,27 @@
      (body
        :hx-ext "head-support, response-targets, preload"
        :hx-boost "true" :hx-target-404 "body" :hx-target-5* "body"
-       :class (<> 
-                "bg-amber-50 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"))))))
+       :class (<>
+                "h-[100svh] flex flex-col bg-[url(/img/bg.webp)] bg-cover bg-center "
+                "p-2 md:p-8")
+       (div :class (<> 
+                     "bg-amber-50/90 flex flex-col flex-1 w-full max-w-[700px] overflow-hidden  shadow-sm "
+                     "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))))))
diff --git a/tailwind.config.js b/tailwind.config.js
index 738e1dd..e7772f0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,7 @@ module.exports = {
   content: [
     "./src/renderer.lisp",
     "./src/routes/**/*.lisp",
-    "./src/components/**/*.lisp",
+    "./src/ui/**/*.lisp",
   ],
   theme: {
     container: {