diff --git a/src/components/article.lisp b/src/components/article.lisp
new file mode 100644
index 0000000..5177c7d
--- /dev/null
+++ b/src/components/article.lisp
@@ -0,0 +1,21 @@
+(defpackage #:website/components/article
+  (:use #:cl
+        #:hsx)
+  (:import-from #:website/lib/time
+                #:datetime
+                #:jp-datetime)
+  (:export #:~article))
+(in-package #:website/components/article)
+
+(defcomp ~article (&key title content revised-at draft-p)
+  (hsx
+   (<>
+     (and draft-p (hsx (p :class "text-lg text-pink-500" "下書きモード")))
+     (article :class "prose max-w-none"
+       (h1 title)
+       (raw! content)
+       (p :class "text-right"
+         "（最終更新："
+         (|time| :datetime (datetime revised-at)
+                 (jp-datetime revised-at))
+         "）")))))
diff --git a/src/routes/about.lisp b/src/routes/about.lisp
index a642363..c1b0796 100644
--- a/src/routes/about.lisp
+++ b/src/routes/about.lisp
@@ -1,13 +1,11 @@
 (defpackage #:website/routes/about
   (:use #:cl
         #:hsx
-        #:jingle
-        #:access)
+        #:jingle)
   (:import-from #:website/lib/cms
                 #:get-about)
-  (:import-from #:website/lib/time
-                #:datetime
-                #:jp-datetime)
+  (:import-from #:website/components/article
+                #:~article)
   (:export #:handle-get))
 (in-package #:website/routes/about)
 
@@ -19,14 +17,8 @@
   (with-request-params ((draft-key "draft-key" nil)) params
     (setf (context :no-cache) draft-key)
     (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")
-           (raw! (getf about :content))
-           (p :class "text-right"
-             "（最終更新："
-             (|time| :datetime (datetime (getf about :revised-at))
-                     (jp-datetime (getf about :revised-at)))
-             "）")))))))
+      (~article
+        :title "About"
+        :content (getf about :content)
+        :revised-at (getf about :revised-at)
+        :draft-p draft-key))))
diff --git a/src/routes/works.lisp b/src/routes/works.lisp
index 9110875..1e6e9b4 100644
--- a/src/routes/works.lisp
+++ b/src/routes/works.lisp
@@ -4,10 +4,8 @@
         #:jingle)
   (:import-from #:website/lib/cms
                 #:get-works)
-  (:import-from #:website/lib/time
-                #:datetime
-                #:jp-datetime)
-  (:export #:handle-get))
+  (:import-from #:website/components/article
+                #:~article))
 (in-package #:website/routes/works)
 
 (defparameter *metadata*
@@ -18,14 +16,8 @@
   (with-request-params ((draft-key "draft-key" nil)) params
     (setf (context :no-cache) draft-key)
     (let ((works (get-works :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 "Works")
-           (raw! (getf works :content))
-           (p :class "text-right"
-             "（最終更新："
-             (|time| :datetime (datetime (getf works :revised-at))
-                     (jp-datetime (getf works :revised-at)))
-             "）")))))))
+      (~article
+        :title "Works"
+        :content (getf works :content)
+        :revised-at (getf works :revised-at)
+        :draft-p draft-key))))