diff --git a/src/components/document.lisp b/src/components/document.lisp
index f6d6281..8f7447b 100644
--- a/src/components/document.lisp
+++ b/src/components/document.lisp
@@ -1,6 +1,6 @@
 (defpackage #:hp/components/document
-  (:use #:cl)
-  (:local-nicknames (#:pi #:piccolo))
+  (:use #:cl
+        #:piccolo)
   (:import-from #:hp/view/asset
                 #:defasset)
   (:export #:document))
@@ -20,24 +20,23 @@
 (defasset *global-css* :root "global.css")
 (defasset *dist-css* :root "dist.css")
 
-(pi:define-element document (title description)
-  (pi:h
-    (html :lang "ja"
-      (head
-        (meta :charset "UTF-8")
-        (script :src *htmx*)
-        (mapcar (lambda (path) (script :src path))
-                *htmx-exts*)
-        (mapcar (lambda (path) (script :src path :defer t))
-                *alpine-exts*)
-        (script :src *alpine-store* :defer t)
-        (script :src *alpine* :defer t)
-        (style
-          "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');")
-        (link :rel "stylesheet" :type "text/css" :href *global-css*)
-        (link :rel "stylesheet" :type "text/css" :href *dist-css*)
-        (title (format nil "~@[~a - ~]skyizwhite.dev" title))
-        (meta
-          :name "description"
-          :content (or description "pakuの個人サイト")))      
-      pi:children)))
+(define-element document (title description)
+  (html :lang "ja"
+    (head
+      (meta :charset "UTF-8")
+      (script :src *htmx*)
+      (mapcar (lambda (path) (script :src path))
+              *htmx-exts*)
+      (mapcar (lambda (path) (script :src path :defer t))
+              *alpine-exts*)
+      (script :src *alpine-store* :defer t)
+      (script :src *alpine* :defer t)
+      (style
+        "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');")
+      (link :rel "stylesheet" :type "text/css" :href *global-css*)
+      (link :rel "stylesheet" :type "text/css" :href *dist-css*)
+      (title (format nil "~@[~a - ~]skyizwhite.dev" title))
+      (meta
+        :name "description"
+        :content (or description "pakuの個人サイト")))      
+    children))
diff --git a/src/components/layout.lisp b/src/components/layout.lisp
index d9854d1..7c3ee16 100644
--- a/src/components/layout.lisp
+++ b/src/components/layout.lisp
@@ -1,17 +1,16 @@
 (defpackage #:hp/components/layout
-  (:use #:cl)
-  (:local-nicknames (#:pi #:piccolo))
+  (:use #:cl
+        #:piccolo)
   (:local-nicknames (#:cfg #:hp/config/*))
   (:export #:layout))
 (in-package #:hp/components/layout)
 
-(pi:define-element layout ()
-  (pi:h
-    (body
-      :hx-ext cfg:*hx-ext*
-      :class "h-[100svh] flex flex-col"
-      (header)
-      (main :class "flex-1"
-        pi:children)
-      ; footer
-      (footer))))
+(define-element layout ()
+  (body
+    :hx-ext cfg:*hx-ext*
+    :class "h-[100svh] flex flex-col"
+    (header)
+    (main :class "flex-1"
+      children)
+    ; footer
+    (footer)))
diff --git a/src/routes/index.lisp b/src/routes/index.lisp
index c147282..73141b2 100644
--- a/src/routes/index.lisp
+++ b/src/routes/index.lisp
@@ -1,19 +1,23 @@
 (defpackage #:hp/routes/index
-  (:use #:cl)
-  (:local-nicknames (#:pi #:piccolo))
+  (:use #:cl
+        #:piccolo)
   (:local-nicknames (#:view #:hp/view/*))
   (:export #:handle-get))
 (in-package #:hp/routes/index)
 
-(pi:define-element page ()
-  (pi:h
-    (div :class "h-full place-content-center"
-      (h1
-        :x-data "{flag: true}"
-        :@click "flag = ! flag"
-        :class "text-4xl text-center"
-        :|:class| "flag ? 'text-red-400' : 'text-blue-400'"
-        "Hello, world!"))))
+(define-element page ()
+  (div :class "h-full place-content-center"
+    (h1
+      :x-data "{
+         flag: true,
+         toggle() {
+           this.flag = !this.flag
+         }
+       }"
+      :@click "toggle"
+      :class "text-4xl text-center"
+      :|:class| "flag ? 'text-red-400' : 'text-blue-400'"
+      "Hello, world!")))
 
 (defun handle-get (params)
   (declare (ignore params))
diff --git a/src/routes/not-found.lisp b/src/routes/not-found.lisp
index f6c7f31..2aaf3cc 100644
--- a/src/routes/not-found.lisp
+++ b/src/routes/not-found.lisp
@@ -1,7 +1,6 @@
 (defpackage #:hp/routes/not-found
-  (:use #:cl)
-  (:local-nicknames (#:jg #:jingle))
-  (:local-nicknames (#:pi #:piccolo))
+  (:use #:cl
+        #:piccolo)
   (:local-nicknames (#:view #:hp/view/*))
   (:export #:handle-not-found))
 (in-package #:hp/routes/not-found)
@@ -10,10 +9,9 @@
   '(:title "404 Not Found"
     :description "お探しのページは見つかりませんでした。"))
 
-(pi:define-element page ()
-  (pi:h
-    (section
-      (h1 "404 Not Found"))))
+(define-element page ()
+  (section
+    (h1 "404 Not Found")))
 
 (defun handle-not-found ()
   (view:render (page)