diff --git a/qlfile b/qlfile
index 2f0ba9c..1b680f7 100644
--- a/qlfile
+++ b/qlfile
@@ -9,3 +9,5 @@ ql clack-errors
 git microcms https://github.com/skyizwhite/microcms-lisp-sdk
 ql local-time
 ql function-cache
+ql jonathan
+ql access
diff --git a/qlfile.lock b/qlfile.lock
index f41858f..f3d33ac 100644
--- a/qlfile.lock
+++ b/qlfile.lock
@@ -46,3 +46,11 @@
  (:class qlot/source/ql:source-ql
   :initargs (:%version :latest)
   :version "ql-2023-10-21"))
+("jonathan" .
+ (:class qlot/source/ql:source-ql
+  :initargs (:%version :latest)
+  :version "ql-2020-09-25"))
+("access" .
+ (:class qlot/source/ql:source-ql
+  :initargs (:%version :latest)
+  :version "ql-2024-10-12"))
diff --git a/src/components/header.lisp b/src/components/header.lisp
index 9546095..d4a2f9c 100644
--- a/src/components/header.lisp
+++ b/src/components/header.lisp
@@ -1,7 +1,6 @@
 (defpackage #:website/components/header
   (:use #:cl
-        #:hsx
-        #:jingle)
+        #:website/helper)
   (:export #:~header))
 (in-package #:website/components/header)
 
diff --git a/src/components/metadata.lisp b/src/components/metadata.lisp
index f8fb04a..780e2c8 100644
--- a/src/components/metadata.lisp
+++ b/src/components/metadata.lisp
@@ -1,7 +1,6 @@
 (defpackage #:website/components/metadata
   (:use #:cl
-        #:hsx
-        #:jingle)
+        #:website/helper)
   (:import-from #:website/lib/env
                 #:website-url)
   (:export #:~metadata))
diff --git a/src/helper.lisp b/src/helper.lisp
new file mode 100644
index 0000000..a367676
--- /dev/null
+++ b/src/helper.lisp
@@ -0,0 +1,15 @@
+(uiop:define-package #:website/helper
+  (:use #:cl)
+  (:use-reexport #:hsx
+                 #:jingle
+                 #:jonathan
+                 #:access)
+  (:export #:api-p))
+(in-package #:website/helper)
+
+(defun starts-with-p (prefix string)
+  (let ((pos (search prefix string :start1 0 :end1 (length prefix) :start2 0)))
+    (and pos (= pos 0))))
+
+(defun api-p ()
+  (starts-with-p "/api/" (request-uri *request*)))
diff --git a/src/lib/cms.lisp b/src/lib/cms.lisp
index e61aa08..7f24118 100644
--- a/src/lib/cms.lisp
+++ b/src/lib/cms.lisp
@@ -24,12 +24,14 @@
        (defcached (,name :timeout ,timeout) (&key query)
          (,origin :query query)))))
 
+(defparameter *timeout* 60)
+
 (define-object-client about)
-(memorize get-about 60)
+(memorize get-about *timeout*)
 
 (define-object-client work)
-(memorize get-work 60)
+(memorize get-work *timeout*)
 
 (define-list-client blog)
-(memorize get-blog-list 60)
-(memorize get-blog-detail 60)
+(memorize get-blog-list *timeout*)
+(memorize get-blog-detail *timeout*)
diff --git a/src/renderer.lisp b/src/renderer.lisp
index 80fd48b..64c6724 100644
--- a/src/renderer.lisp
+++ b/src/renderer.lisp
@@ -1,7 +1,6 @@
 (defpackage #:website/renderer
   (:use #:cl
-        #:hsx
-        #:jingle)
+        #:website/helper)
   (:import-from #:hsx/element
                 #:element)
   (:import-from #:website/components/metadata
@@ -13,17 +12,21 @@
 (in-package #:website/renderer)
 
 (defmethod jingle:process-response :around ((app jingle:app) result)
-  (set-response-header :content-type "text/html; charset=utf-8")
   (when (eq (request-method *request*) :get)
     (set-response-header :cache-control "public, max-age=60"))
-  (call-next-method app
-                    (render-to-string
-                     (hsx (html :lang "ja"
-                            (head
-                              (~metadata :metadata (context :metadata))
-                              (~scripts))
-                            (body
-                              :hx-ext "head-support, response-targets, preload"
-                              :hx-boost "true" :hx-swap "transition:true"
-                              :hx-target-404 "body" :hx-target-5* "body"
-                              (~layout result)))))))
+  (cond ((api-p)
+         (set-response-header :content-type "application/json; charset=utf-8") 
+         (call-next-method app (to-json result)))
+        (t
+         (set-response-header :content-type "text/html; charset=utf-8")
+         (call-next-method app
+                           (render-to-string
+                            (hsx (html :lang "ja"
+                                   (head
+                                     (~metadata :metadata (context :metadata))
+                                     (~scripts))
+                                   (body
+                                     :hx-ext "head-support, response-targets, preload"
+                                     :hx-boost "true" :hx-swap "transition:true"
+                                     :hx-target-404 "body" :hx-target-5* "body"
+                                     (~layout result)))))))))
diff --git a/src/routes/about.lisp b/src/routes/about.lisp
index e8dcc44..fa84d69 100644
--- a/src/routes/about.lisp
+++ b/src/routes/about.lisp
@@ -1,7 +1,6 @@
 (defpackage #:website/routes/about
   (:use #:cl
-        #:hsx
-        #:jingle)
+        #:website/helper)
   (:import-from #:website/lib/cms
                 #:get-about)
   (:import-from #:website/lib/time
@@ -25,7 +24,7 @@
            (div  :class "flex justify-center"
              (figure :class "flex flex-col items-center"
                (img
-                 :src (getf (getf about :avatar) :url)
+                 :src (accesses about :avatar :url)
                  :alt "avatar" :class "size-40 rounded-xl shadow-sm avatar")
                (figcaption (getf about :avatar-caption))))
            (raw! (getf about :content))
diff --git a/src/routes/blog.lisp b/src/routes/blog.lisp
index 820b359..051e7df 100644
--- a/src/routes/blog.lisp
+++ b/src/routes/blog.lisp
@@ -1,7 +1,6 @@
 (defpackage #:website/routes/blog
   (:use #:cl
-        #:hsx
-        #:jingle)
+        #:website/helper)
   (:export #:handle-get))
 (in-package #:website/routes/blog)
 
diff --git a/src/routes/index.lisp b/src/routes/index.lisp
index 8797b29..fe78adb 100644
--- a/src/routes/index.lisp
+++ b/src/routes/index.lisp
@@ -1,6 +1,6 @@
 (defpackage #:website/routes/index
   (:use #:cl
-        #:hsx)
+        #:website/helper)
   (:import-from #:website/lib/cms
                 #:get-about)
   (:export #:handle-get
@@ -30,7 +30,7 @@
     (hsx
      (div :class "flex flex-col items-center justify-center h-full"
        (img 
-         :src (getf (getf about :avatar) :url)
+         :src (accesses 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"
diff --git a/src/routes/not-found.lisp b/src/routes/not-found.lisp
index b2caaad..b5ca783 100644
--- a/src/routes/not-found.lisp
+++ b/src/routes/not-found.lisp
@@ -1,7 +1,6 @@
 (defpackage #:website/routes/not-found
   (:use #:cl
-        #:hsx
-        #:jingle)
+        #:website/helper)
   (:export #:handle-not-found))
 (in-package #:website/routes/not-found)
 
@@ -12,9 +11,11 @@
 
 (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"))))
+  (if (api-p)
+      '(:|message| "404 Not Found")
+      (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")))))
diff --git a/src/routes/work.lisp b/src/routes/work.lisp
index c1e6cf4..97114cc 100644
--- a/src/routes/work.lisp
+++ b/src/routes/work.lisp
@@ -1,7 +1,6 @@
 (defpackage #:website/routes/work
   (:use #:cl
-        #:hsx
-        #:jingle)
+        #:website/helper)
   (:import-from #:website/lib/cms
                 #:get-work)
   (:import-from #:website/lib/time