diff --git a/src/routes/about.lisp b/src/routes/about.lisp
index 5f74a4d..e8dcc44 100644
--- a/src/routes/about.lisp
+++ b/src/routes/about.lisp
@@ -13,11 +13,24 @@
 (defparameter *metadata*
   (list :title "about"))
 
-(defcomp ~page ()
-  (hsx
-   (p "coming soon")))
-
 (defun handle-get (params)
-  (declare (ignore params))
   (setf (context :metadata) *metadata*)
-  (~page))
+  (with-request-params ((draft-key "draft-key" nil)) params
+    (let ((about (get-about :query (list :draft-key draft-key))))
+      (hsx
+       (<>
+         (and draft-key (hsx (p :class "text-lg text-pink-500" "下書きモード")))
+         (article :class "prose max-w-none"
+           (h1 "About")
+           (div  :class "flex justify-center"
+             (figure :class "flex flex-col items-center"
+               (img
+                 :src (getf (getf about :avatar) :url)
+                 :alt "avatar" :class "size-40 rounded-xl shadow-sm avatar")
+               (figcaption (getf about :avatar-caption))))
+           (raw! (getf about :content))
+           (p :class "text-right"
+             "（最終更新："
+             (|time| :datetime (datetime (getf about :revised-at))
+                     (jp-datetime (getf about :revised-at)))
+             "）")))))))
diff --git a/src/routes/blog.lisp b/src/routes/blog.lisp
index 307009d..820b359 100644
--- a/src/routes/blog.lisp
+++ b/src/routes/blog.lisp
@@ -8,11 +8,7 @@
 (defparameter *metadata*
   (list :title "blog"))
 
-(defcomp ~page ()
-  (hsx
-   (p "coming soon")))
-
 (defun handle-get (params)
   (declare (ignore params))
   (setf (context :metadata) *metadata*)
-  (~page))
+  (hsx (p "coming soon")))
diff --git a/src/routes/index.lisp b/src/routes/index.lisp
index 3191650..8797b29 100644
--- a/src/routes/index.lisp
+++ b/src/routes/index.lisp
@@ -1,6 +1,8 @@
 (defpackage #:website/routes/index
   (:use #:cl
         #:hsx)
+  (:import-from #:website/lib/cms
+                #:get-about)
   (:export #:handle-get
            #:handle-head))
 (in-package #:website/routes/index)
@@ -22,29 +24,29 @@
      "https://status.skyizwhite.dev"
      "/img/icon/server.svg")))
 
-(defcomp ~page ()
-  (hsx
-   (div :class "flex flex-col items-center justify-center h-full"
-     (img :src "/img/avatar.webp" :alt "avatar" :class "size-40 rounded-xl shadow-sm")
-     (div :class "flex flex-col items-center gap-2 py-6"
-       (h1 :class "font-bold text-2xl text-center"
-         "Akira Tempaku")
-       (p :class "text-xl"
-         "Web developer"))
-     (div :class "flex flex-col gap-2 items-left"
-       (loop
-         :for (name url icon) :in *links*
-         :collect (hsx (a 
-                         :href url 
-                         :target "_blank" 
-                         :class "flex items-center gap-2 text-lg hover:text-pink-500"
-                         :rel "me"
-                         (img :src icon :alt name :class "size-4 mt-1")
-                         (span name))))))))
-
 (defun handle-get (params)
   (declare (ignore params))
-  (~page))
+  (let ((about (get-about :query '(:fields "avatar"))))
+    (hsx
+     (div :class "flex flex-col items-center justify-center h-full"
+       (img 
+         :src (getf (getf about :avatar) :url)
+         :alt "avatar" :class "size-40 rounded-xl shadow-sm avatar")
+       (div :class "flex flex-col items-center gap-2 py-6"
+         (h1 :class "font-bold text-2xl text-center"
+           "Akira Tempaku")
+         (p :class "text-xl"
+           "Web developer"))
+       (div :class "flex flex-col gap-2 items-left"
+         (loop
+           :for (name url icon) :in *links*
+           :collect (hsx (a 
+                           :href url 
+                           :target "_blank" 
+                           :class "flex items-center gap-2 text-lg hover:text-pink-500"
+                           :rel "me"
+                           (img :src icon :alt name :class "size-4 mt-1")
+                           (span name)))))))))
 
 ; for health check
 (defun handle-head (params)
diff --git a/src/routes/not-found.lisp b/src/routes/not-found.lisp
index a9f9b9a..b2caaad 100644
--- a/src/routes/not-found.lisp
+++ b/src/routes/not-found.lisp
@@ -10,14 +10,11 @@
     :description "The page you are looking for may have been deleted or the URL might be incorrect."
     :error t))
 
-(defcomp ~page ()
+(defun handle-not-found ()
+  (setf (context :metadata) *metadata*)
   (hsx
    (div :class "flex flex-col h-full items-center justify-center gap-y-6"
      (h1 :class "font-bold text-2xl"
        "404 Not Found")
      (a :href "/" :class "text-lg text-pink-500 hover:underline"
        "Back to TOP"))))
-
-(defun handle-not-found ()
-  (setf (context :metadata) *metadata*)
-  (~page))
diff --git a/src/routes/work.lisp b/src/routes/work.lisp
index 2a62a27..c1e6cf4 100644
--- a/src/routes/work.lisp
+++ b/src/routes/work.lisp
@@ -13,11 +13,7 @@
 (defparameter *metadata*
   (list :title "work"))
 
-(defcomp ~page ()
-  (hsx
-   (p "coming soon")))
-
 (defun handle-get (params)
   (declare (ignore params))
   (setf (context :metadata) *metadata*)
-  (~page))
+  (hsx (p "coming soon")))
diff --git a/static/style/global.css b/static/style/global.css
index 581eac3..e20777e 100644
--- a/static/style/global.css
+++ b/static/style/global.css
@@ -26,4 +26,9 @@
 
 @view-transition {
   navigation: auto;
-}
\ No newline at end of file
+}
+
+.avatar {
+  view-transition-name: avatar;
+  contain: paint;
+}