diff --git a/assets/css/components/.keep b/assets/css/components/.keep
deleted file mode 100644
index e69de29..0000000
diff --git a/assets/css/components/layout/footer.css b/assets/css/components/layout/footer.css
new file mode 100644
index 0000000..6a0d903
--- /dev/null
+++ b/assets/css/components/layout/footer.css
@@ -0,0 +1,6 @@
+@scope ([data-css='components/layout/footer.css']) {
+  :scope {
+    height: 40px;
+    background-color: gray;
+  }
+}
diff --git a/assets/css/components/layout/header.css b/assets/css/components/layout/header.css
new file mode 100644
index 0000000..3b0754e
--- /dev/null
+++ b/assets/css/components/layout/header.css
@@ -0,0 +1,7 @@
+@scope ([data-css='components/layout/header.css']) {
+  :scope {
+    height: 80px;
+    display: flex;
+    background-color: gray;
+  }
+}
diff --git a/assets/css/components/layout/main.css b/assets/css/components/layout/main.css
new file mode 100644
index 0000000..fe2004e
--- /dev/null
+++ b/assets/css/components/layout/main.css
@@ -0,0 +1,11 @@
+@scope ([data-css='components/layout/main.css']) {
+  :scope {
+    height: 100svh;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .main {
+    flex: 1;
+  }
+}
diff --git a/assets/css/global.css b/assets/css/global.css
index a7c7c9b..9f4385b 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -1,12 +1,8 @@
 @charset "utf-8";
 
-body {
+html {
   font-family: "Noto Sans JP", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
-
-  &[data-dark] {
-    background-color: slategrey; 
-  }
 }
diff --git a/assets/css/pages/index.css b/assets/css/pages/index.css
index 42a2d5d..109f9ac 100644
--- a/assets/css/pages/index.css
+++ b/assets/css/pages/index.css
@@ -1,6 +1,6 @@
 @scope ([data-css='pages/index.css']) {
   :scope {
-    height: 100svh;
+    height: 100%;
     display: grid;
     place-content: center;
   }
diff --git a/src/app.lisp b/src/app.lisp
index dcd5a4e..ba379df 100644
--- a/src/app.lisp
+++ b/src/app.lisp
@@ -4,7 +4,6 @@
   (:local-nicknames (#:jg #:jingle))
   (:local-nicknames (#:fbr #:ningle-fbr))
   (:local-nicknames (#:cfg #:hp/config/env))
-  (:local-nicknames (#:asset #:hp/view/asset))
   (:local-nicknames (#:mw #:hp/middlewares/*))
   (:export #:start
            #:stop
@@ -32,7 +31,7 @@
 
 (defun update ()
   (stop)
-  (setup)
+  (ql:quickload :hp)
   (start))
 
 (setup)
diff --git a/src/components/layout/footer.lisp b/src/components/layout/footer.lisp
new file mode 100644
index 0000000..da0091f
--- /dev/null
+++ b/src/components/layout/footer.lisp
@@ -0,0 +1,9 @@
+(defpackage #:hp/components/layout/footer
+  (:use #:cl)
+  (:local-nicknames (#:pi #:piccolo))
+  (:export #:layout-footer))
+(in-package #:hp/components/layout/footer)
+
+(pi:define-element layout-footer ()
+  (pi:h
+    (footer :data-css "components/layout/footer.css")))
diff --git a/src/components/layout/header.lisp b/src/components/layout/header.lisp
new file mode 100644
index 0000000..a185db8
--- /dev/null
+++ b/src/components/layout/header.lisp
@@ -0,0 +1,10 @@
+(defpackage #:hp/components/layout/header
+  (:use #:cl)
+  (:local-nicknames (#:pi #:piccolo))
+  (:export #:layout-header))
+(in-package #:hp/components/layout/header)
+
+(pi:define-element layout-header ()
+  (pi:h
+    (header :data-css "components/layout/header.css"
+      (p "skyizwhite.dev"))))
diff --git a/src/components/layout/main.lisp b/src/components/layout/main.lisp
new file mode 100644
index 0000000..db768d3
--- /dev/null
+++ b/src/components/layout/main.lisp
@@ -0,0 +1,21 @@
+(defpackage #:hp/components/layout/main
+  (:use #:cl)
+  (:local-nicknames (#:pi #:piccolo))
+  (:local-nicknames (#:cfg #:hp/config/asset))
+  (:import-from #:hp/components/layout/header
+                #:layout-header)
+  (:import-from #:hp/components/layout/footer
+                #:layout-footer)
+  (:export #:layout))
+(in-package #:hp/components/layout/main)
+
+(pi:define-element layout ()
+  (pi:h
+    (body
+      :hx-ext cfg:*hx-ext*
+      :data-css "components/layout/main.css"
+      (layout-header)
+      (main :class "main"
+        pi:children)
+      (layout-footer)
+      )))
diff --git a/src/routes/index.lisp b/src/routes/index.lisp
index 024e23e..a09e4f0 100644
--- a/src/routes/index.lisp
+++ b/src/routes/index.lisp
@@ -7,7 +7,7 @@
 
 (pi:define-element page ()
   (pi:h
-    (div (view:cmp-props :css "pages/index.css")
+    (div :data-css "pages/index.css"
       (h1 "Hello, World!"))))
 
 (defun handle-get (params)
diff --git a/src/view/asset.lisp b/src/view/asset.lisp
index 90a8fcf..8361445 100644
--- a/src/view/asset.lisp
+++ b/src/view/asset.lisp
@@ -4,8 +4,7 @@
   (:local-nicknames (#:cfg #:hp/config/asset))
   (:export #:asset-root
            #:defasset
-           #:get-css-paths
-           #:cmp-props))
+           #:get-css-paths))
 (in-package #:hp/view/asset)
 
 (defun asset-root (kind)
@@ -31,11 +30,3 @@
 (defun get-css-paths (html)
   (mapcar (asset-path-under :css)
           (detect-attr-vals html "data-css")))
-
-(defun cmp-props (&key css js x-data)
-  (append (and css `(:data-css ,css))
-          (and js x-data
-               `(:ax-load t
-                 :ax-load-src ,(asset-path :js js)
-                 :x-ignore t
-                 :x-data ,x-data))))
diff --git a/src/view/components/layout/main.lisp b/src/view/components/layout/main.lisp
deleted file mode 100644
index 599b7e8..0000000
--- a/src/view/components/layout/main.lisp
+++ /dev/null
@@ -1,17 +0,0 @@
-(defpackage #:hp/components/layout/main
-  (:use #:cl)
-  (:local-nicknames (#:pi #:piccolo))
-  (:local-nicknames (#:cfg #:hp/config/asset))
-  (:export #:layout))
-(in-package #:hp/components/layout/main)
-
-(pi:define-element layout ()
-  (pi:h
-    (body
-      :hx-ext cfg:*hx-ext*
-      :x-data t
-      :|:data-dark| "$store.darkMode.on"
-      ; header
-      (main pi:children)
-      ; footer
-      )))