diff --git a/handlers/error.go b/handlers/error.go
new file mode 100644
index 0000000..83f240b
--- /dev/null
+++ b/handlers/error.go
@@ -0,0 +1,13 @@
+package handlers
+
+import (
+	"net/http"
+	"personal-site/pages"
+
+	"github.com/gin-gonic/gin"
+)
+
+func NotFoundHandler(c *gin.Context) {
+    c.Status(http.StatusNotFound)
+    pages.ErrorPage().Render(c.Request.Context(), c.Writer)
+}
diff --git a/main.go b/main.go
index 2d52e79..a483409 100644
--- a/main.go
+++ b/main.go
@@ -6,6 +6,7 @@ import (
 	"net/http"
 	"os"
 	"os/signal"
+	"personal-site/handlers"
 	"personal-site/pages"
 	"syscall"
 	"time"
@@ -21,6 +22,7 @@ func setupRoutesAndMiddleware() *gin.Engine {
 		page := pages.Index()
 		page.Render(c.Request.Context(), c.Writer)
 	})
+	r.NoRoute(handlers.NotFoundHandler)
 	return r
 }
 
diff --git a/pages/error.templ b/pages/error.templ
new file mode 100644
index 0000000..266ce15
--- /dev/null
+++ b/pages/error.templ
@@ -0,0 +1,14 @@
+package pages
+
+import "personal-site/components"
+import "personal-site/constants"
+
+templ ErrorPage() {
+	{{ params := constants.NewLayoutParams("Not Found") }}
+	@components.MainLayout(params) {
+        <div class="mx-auto flex flex-col gap-4 text-center">
+            <h2>page not found</h2>
+            <a href="/">Go Home</a>
+        </div>
+	}
+}
diff --git a/tailwind.css b/tailwind.css
index 5ead6f2..c78fab6 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -27,6 +27,10 @@
 }
 
 @layer base {
+  body {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
   @keyframes fadeUp {
     from {
       opacity: 0;