diff --git a/public/404.html b/public/404.html
new file mode 100644
index 00000000..a594c70a
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>404 — Frame Not Found | Reframe</title>
+  <meta name="description" content="The page you're looking for doesn't exist. Return to Reframe — the free, open-source browser-based video editor." />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <style>
+    /* ── Design tokens (mirrored from globals.css) ── */
+    :root {
+      --bg: #F7F4F0;
+      --surface: #ffffff;
+      --border: #E8E3DC;
+      --text: #181412;
+      --muted: #5C5550;
+      --film-500: #e63946;
+      --film-400: #ff6b6b;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #0f172a;
+        --surface: #1e293b;
+        --border: #334155;
+        --text: #f1f5f9;
+        --muted: #94a3b8;
+        --film-500: #e63946;
+        --film-400: #ff6b6b;
+      }
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--bg);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      text-align: center;
+      padding: 1rem;
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .brand svg {
+      width: 28px;
+      height: 28px;
+      color: var(--text);
+    }
+
+    .brand span {
+      font-size: 1.5rem;
+      font-weight: 700;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+    }
+
+    .code {
+      font-size: clamp(7rem, 22vw, 16rem);
+      font-weight: 700;
+      line-height: 1;
+      color: var(--film-500);
+      user-select: none;
+      letter-spacing: 0.05em;
+    }
+
+    .divider {
+      width: 3.5rem;
+      height: 1px;
+      background: var(--film-500);
+      margin: 0.25rem auto 1.5rem;
+    }
+
+    h1 {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.2em;
+      color: var(--text);
+      margin-bottom: 0.5rem;
+    }
+
+    p {
+      font-size: 0.875rem;
+      color: var(--muted);
+      max-width: 22rem;
+      margin: 0 auto 2rem;
+      line-height: 1.5;
+    }
+
+    .back-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.5rem 1rem;
+      border-radius: 0.5rem;
+      border: 1px solid var(--border);
+      background: var(--surface);
+      color: var(--muted);
+      font-size: 0.6875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.15em;
+      text-decoration: none;
+      transition: all 0.2s ease;
+      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+    }
+
+    .back-link:hover {
+      color: var(--film-500);
+      border-color: var(--film-400);
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(12px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .container {
+      animation: fadeIn 0.5s ease-out;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <!-- Brand -->
+    <div class="brand">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M7 3v18" /><path d="M3 7.5h4" /><path d="M3 12h18" /><path d="M3 16.5h4" />
+        <path d="M17 3v18" /><path d="M17 7.5h4" /><path d="M17 16.5h4" />
+      </svg>
+      <span>Reframe</span>
+    </div>
+
+    <!-- 404 -->
+    <div class="code">404</div>
+    <div class="divider"></div>
+
+    <h1>Frame not found</h1>
+    <p>This reel is empty. The page you&apos;re looking for doesn&apos;t exist.</p>
+
+    <a href="/" class="back-link">&larr; Back to Reframe</a>
+  </div>
+</body>
+</html>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
deleted file mode 100644
index 88d6f4cc..00000000
--- a/src/app/not-found.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Link from "next/link";
-
-import {Film} from 'lucide-react'
-export default function NotFound() {
-  return (
-    <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center animate-fade-in">
-            <div className="flex items-center gap-2 ">
-     <Film size={28} />
-         <span className="font-display text-2xl tracking-widest">REFRAME</span>
-       </div>
-      <span className="font-display text-[clamp(7rem,22vw,16rem)] leading-none text-film-500 select-none">
-        404
-      </span>
-
-      <div className="w-14 h-px bg-film-500 mt-1 mb-6" />
-
-      <h1 className="font-heading text-xs font-semibold uppercase tracking-[0.2em] text-[var(--text)] mb-2">
-        Frame not found
-      </h1>
-
-      <p className="font-sans text-sm text-[var(--muted)] max-w-[22rem] mb-8">
-        This reel is empty. The page you&apos;re looking for doesn&apos;t exist.
-      </p>
-
-      <Link
-        href="/"
-        className="flex items-center gap-1.5 px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[11px] font-heading font-semibold uppercase tracking-widest text-[var(--muted)] hover:text-film-600 hover:border-film-400 transition-all duration-200 shadow-sm"
-      >
-        ← Back to Reframe
-      </Link>
-    </div>
-  )
-}
-
