diff --git a/internal/handler/home.go b/internal/handler/home.go
index 50d0ca0..41b8f0c 100644
--- a/internal/handler/home.go
+++ b/internal/handler/home.go
@@ -4,6 +4,8 @@ import (
 	"net/http"
 
 	"git.juancwu.dev/juancwu/budgit/internal/ctxkeys"
+	"git.juancwu.dev/juancwu/budgit/internal/ui"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/pages"
 )
 
 type homeHandler struct{}
@@ -23,6 +25,5 @@ func (h *homeHandler) HomePage(w http.ResponseWriter, r *http.Request) {
 }
 
 func (home *homeHandler) NotFoundPage(w http.ResponseWriter, r *http.Request) {
-	w.WriteHeader(http.StatusNotFound)
-	w.Write([]byte("404 Page Not Found"))
+	ui.Render(w, r, pages.NotFound())
 }
diff --git a/internal/ui/pages/public_notfound.templ b/internal/ui/pages/public_notfound.templ
new file mode 100644
index 0000000..69d152a
--- /dev/null
+++ b/internal/ui/pages/public_notfound.templ
@@ -0,0 +1,18 @@
+package pages
+
+import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+
+templ NotFound() {
+	@layouts.Base() {
+		<div class="min-h-screen flex items-center justify-center">
+			<div class="text-center">
+				<h1 class="text-8xl font-bold text-muted-foreground/30 mb-4">404</h1>
+				<h2 class="text-2xl font-semibold mb-2">Page Not Found</h2>
+				<p class="text-muted-foreground mb-8">The page you are looking for does not exist.</p>
+				<a href="/" class="text-primary hover:underline">
+					← Back to Home
+				</a>
+			</div>
+		</div>
+	}
+}