diff --git a/docs/src/pages/404.astro b/docs/src/pages/404.astro
new file mode 100644
index 00000000..a2b25ae0
--- /dev/null
+++ b/docs/src/pages/404.astro
@@ -0,0 +1,34 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+const base = import.meta.env.BASE_URL;
+---
+
+<BaseLayout title="Page Not Found">
+  <script is:inline define:vars={{ base }}>
+    (function () {
+      var path = window.location.pathname;
+      var oldPrefix = base + 'generated/';
+      if (path.startsWith(oldPrefix)) {
+        var newPath = base + path.slice(oldPrefix.length);
+        window.location.replace(newPath + window.location.search + window.location.hash);
+        return;
+      }
+    })();
+  </script>
+
+  <div class="py-16 text-center">
+    <h1 class="text-6xl font-semibold text-text-primary mb-4">404</h1>
+    <p class="text-lg text-text-secondary mb-8 max-w-md mx-auto">
+      The page you're looking for doesn't exist or has been moved.
+    </p>
+    <div class="flex gap-3 justify-center">
+      <a href={`${import.meta.env.BASE_URL}`} class="btn btn-primary">
+        Go Home
+      </a>
+      <a href={`${import.meta.env.BASE_URL}attributes/`} class="btn btn-secondary">
+        Browse Attributes
+      </a>
+    </div>
+  </div>
+</BaseLayout>