diff --git a/src/app.lisp b/src/app.lisp
index 3985415..98a262f 100644
--- a/src/app.lisp
+++ b/src/app.lisp
@@ -2,6 +2,8 @@
   (:use #:cl)
   (:local-nicknames (#:jg #:jingle))
   (:local-nicknames (#:fbr #:ningle-fbr))
+  (:local-nicknames (#:pi #:piccolo))
+  (:local-nicknames (#:cmp #:hp/components/*))
   (:import-from #:lack)
   (:export #:*app*
            #:update-routes))
@@ -9,6 +11,11 @@
 
 (defparameter *raw-app* (jg:make-app))
 
+(defmethod jg:not-found ((app jg:app))
+  (jg:with-html-response
+    (jg:set-response-status 404)
+    (pi:element-string (cmp:not-found-page))))
+
 (defun update-routes ()
   (fbr:enable-file-based-routing *raw-app*
                                  :dir "src/routes"
diff --git a/src/components/not-found.lisp b/src/components/not-found.lisp
new file mode 100644
index 0000000..95836bb
--- /dev/null
+++ b/src/components/not-found.lisp
@@ -0,0 +1,14 @@
+(uiop:define-package #:hp/components/not-found
+  (:use #:cl)
+  (:local-nicknames (#:pi #:piccolo))
+  (:import-from #:hp/components/layout
+                #:layout)
+  (:export #:not-found-page))
+(in-package #:hp/components/not-found)
+
+(pi:define-element not-found-page ()
+  (pi:h
+    (layout
+      (section :class "h-full flex justify-center items-center"
+        (h1 :class "text-error text-4xl"
+          "404 Not Found")))))