diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000000..caea60a323
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,32 @@
+---
+import BaseLayout from "@layouts/BaseLayout.astro";
+
+const rawPath = Astro.url.pathname;
+
+const cleanPath =
+  rawPath !== "/" ? rawPath.replace(/\/$/, "") : rawPath;
+
+const searchText =
+  cleanPath.split("/").filter(Boolean).pop() || "";
+---
+<BaseLayout title="404: Page Not Found">
+  <section class="flex flex-col gap-8 items-start max-w-none prose px-2 py-8">
+
+    <p>
+      Sorry, we couldn't find your exact page <code>{cleanPath}</code>.
+    </p>
+
+    <div class="flex flex-col gap-4">
+      <a class="btn" href={`/search/?term=${searchText}`}>
+        Search here for <code>{searchText}</code>
+      </a>
+
+      <span>or</span>
+
+      <a class="btn secondary" href="/">
+        go home
+      </a>
+    </div>
+
+  </section>
+</BaseLayout>
\ No newline at end of file
diff --git a/src/pages/[slug].astro b/src/pages/[slug].astro
index 99a86a6e61..2fdee7c689 100644
--- a/src/pages/[slug].astro
+++ b/src/pages/[slug].astro
@@ -26,6 +26,8 @@ export const getStaticPaths = async () => {
 };
 
 const { page } = Astro.props;
+if (!page) {
+  return Astro.redirect("/404");
+}
 ---
-
 <TextDetailLayout page={page} />