diff --git a/docs/package.json b/docs/package.json
index 707b2b90f6..d32775ac4f 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "NODE_OPTIONS=\"--max-old-space-size=16384\" vocs build --searchIndex",
+    "build": "NODE_OPTIONS=\"--max-old-space-size=16384\" vocs build --searchIndex && cp dist/404/index.html dist/404.html",
     "check": "biome check . --write --unsafe",
     "check:ci": "biome check . --diagnostic-level=error",
     "check:types": "tsc --noEmit",
diff --git a/docs/pages/404.mdx b/docs/pages/404.mdx
new file mode 100644
index 0000000000..0363f5fb09
--- /dev/null
+++ b/docs/pages/404.mdx
@@ -0,0 +1,15 @@
+---
+title: Page not found
+description: The page you're looking for doesn't exist. Navigate back to Tempo documentation.
+---
+
+<div className="flex flex-col items-center justify-center text-center py-16">
+  <div className="text-[120px] font-bold text-[var(--vocs-color_text3)] leading-none select-none">404</div>
+  <h1 className="text-2xl font-semibold mt-4 mb-2">Page not found</h1>
+  <p className="text-[var(--vocs-color_text2)] max-w-md mb-8">
+    The page you're looking for doesn't exist or may have been moved.
+  </p>
+  <a href="/" className="text-[var(--vocs-color_textAccent)] hover:underline">
+    ← Back to home
+  </a>
+</div>
diff --git a/docs/vocs.config.tsx b/docs/vocs.config.tsx
index 383758ac3c..1fdd9f60df 100644
--- a/docs/vocs.config.tsx
+++ b/docs/vocs.config.tsx
@@ -129,11 +129,16 @@ export default defineConfig({
   ),
   ogImageUrl: {
     '/': 'https://docs.tempo.xyz/og-docs.png',
-    '/learn': 'https://docs.tempo.xyz/api/og?title=%title&description=%description',
-    '/quickstart': 'https://docs.tempo.xyz/api/og?title=%title&description=%description',
-    '/guide': 'https://docs.tempo.xyz/api/og?title=%title&description=%description',
-    '/protocol': 'https://docs.tempo.xyz/api/og?title=%title&description=%description',
-    '/sdk': 'https://docs.tempo.xyz/api/og?title=%title&description=%description',
+    '/learn':
+      'https://docs.tempo.xyz/api/og?title=%title&description=%description',
+    '/quickstart':
+      'https://docs.tempo.xyz/api/og?title=%title&description=%description',
+    '/guide':
+      'https://docs.tempo.xyz/api/og?title=%title&description=%description',
+    '/protocol':
+      'https://docs.tempo.xyz/api/og?title=%title&description=%description',
+    '/sdk':
+      'https://docs.tempo.xyz/api/og?title=%title&description=%description',
   },
   title: 'Tempo',
   titleTemplate: '%s | Tempo Docs',
@@ -750,6 +755,23 @@ export default defineConfig({
         },
   vite: {
     plugins: [
+      {
+        // Vocs's default NotFound component shows a generic 404 page.
+        // This patches it to redirect to our custom /404 page instead.
+        name: 'fix-404-route',
+        transform(code, id) {
+          if (!id.includes('vocs/_lib/app/routes')) return
+          return code
+            .replace(
+              "import { NotFound } from './components/NotFound.js';",
+              "import { Navigate } from 'react-router';",
+            )
+            .replace(
+              '_jsx(NotFound, {})',
+              '_jsx(Navigate, { to: "/404", replace: true })',
+            )
+        },
+      },
       {
         name: 'virtual-tips',
         resolveId(id) {