diff --git a/src/lib/cms.lisp b/src/lib/cms.lisp
index 87d654e..d242dd9 100644
--- a/src/lib/cms.lisp
+++ b/src/lib/cms.lisp
@@ -1,15 +1,20 @@
 (defpackage #:hp/lib/cms
   (:use #:cl)
   (:import-from #:microcms
-                #:define-list-client)
+                #:define-list-client
+                #:define-object-client)
   (:import-from #:hp/lib/env
                 #:microcms-service-domain
                 #:microcms-api-key)
   (:export #:get-blog-list
-           #:get-blog-detail))
+           #:get-blog-detail
+           #:get-bio
+           #:get-work))
 (in-package :hp/lib/cms)
 
 (setf microcms:*service-domain* (microcms-service-domain))
 (setf microcms:*api-key* (microcms-api-key))
 
+(define-object-client bio)
+(define-object-client work)
 (define-list-client blog)
diff --git a/src/lib/metadata.lisp b/src/lib/metadata.lisp
index 201bd52..6e708e0 100644
--- a/src/lib/metadata.lisp
+++ b/src/lib/metadata.lisp
@@ -12,7 +12,7 @@
 
 (defparameter *metadata-template*
   (list :title (lambda (title) (format nil "~@[~a - ~]~a" title "skyizwhite.dev"))
-        :description "The personal website of Akira Tempaku (paku) - projects, thoughts, and more."
+        :description "The personal website of Akira Tempaku (paku) - bio, work, blog and more."
         :canonical #'path->url
         :og-url #'path->url
         :og-type "website"
diff --git a/src/routes/index.lisp b/src/routes/index.lisp
index 11fd0dc..2c71a43 100644
--- a/src/routes/index.lisp
+++ b/src/routes/index.lisp
@@ -14,7 +14,7 @@
 (defcomp ~page ()
   (hsx
    (section :class "flex flex-col items-center justify-center h-full"
-     (img :src "/img/avatar.jpg" :alt "avatar" :class "size-40 rounded-xl shadow-sm")
+     (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")
diff --git a/src/ui/layout.lisp b/src/ui/layout.lisp
index 23785b5..c06f1d6 100644
--- a/src/ui/layout.lisp
+++ b/src/ui/layout.lisp
@@ -40,7 +40,7 @@
        (link :rel "manifest" :href "/img/site.webmanifest")
        (link :rel "stylesheet" :href (bust-cache "/style/dist.css"))
        (link :rel "preconnect" :href "https://fonts.googleapis.com")
-       (link :rel "stylesheet" :href "https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap")
+       (link :rel "stylesheet" :href "https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap")
        (script :src "https://cdn.jsdelivr.net/npm/htmx.org@2.0.0/dist/htmx.min.js")
        (script :src "https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.0.0/preload.min.js")
        (script :src "https://cdn.jsdelivr.net/npm/htmx-ext-head-support@2.0.0/head-support.min.js")
@@ -50,14 +50,14 @@
        :hx-ext "head-support, response-targets, preload"
        :hx-boost "true" :hx-target-404 "body" :hx-target-5* "body"
        :class (<>
-                "h-[100svh] flex flex-col bg-[url(/img/bg.jpg)] bg-cover bg-center "
+                "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-4xl font-bold"
-             (a :href "/"
+           (h1 :class "text-2xl md:text-3xl font-bold"
+             (a :href "/" :preload t
                "skyizwhite"))
            (nav :class "flex items-end"
              (ul
diff --git a/static/img/avatar.jpg b/static/img/avatar.jpg
deleted file mode 100644
index 38cf5fc..0000000
Binary files a/static/img/avatar.jpg and /dev/null differ
diff --git a/static/img/avatar.webp b/static/img/avatar.webp
new file mode 100644
index 0000000..7231273
Binary files /dev/null and b/static/img/avatar.webp differ
diff --git a/static/img/bg.jpg b/static/img/bg.jpg
deleted file mode 100644
index f1c176e..0000000
Binary files a/static/img/bg.jpg and /dev/null differ
diff --git a/static/img/bg.webp b/static/img/bg.webp
new file mode 100644
index 0000000..21c6b0e
Binary files /dev/null and b/static/img/bg.webp differ
diff --git a/static/style/global.css b/static/style/global.css
index dc52305..ee63e75 100644
--- a/static/style/global.css
+++ b/static/style/global.css
@@ -1,11 +1,12 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 :root {
-  font-family: "Zen Kurenaido", sans-serif;
+  font-family: "Zen Maru Gothic", sans-serif;
 }
 
 @supports (font-variation-settings: normal) {
   :root {
-    font-family: "Zen Kurenaido", sans-serif;
+    font-family: "Zen Maru Gothic", sans-serif;
   }
 }