diff --git a/404.html b/404.html
new file mode 100644
index 0000000..1805568
--- /dev/null
+++ b/404.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>404 | Miles Wolf Allen</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
+<link rel="icon" type="image/svg+xml" href="favicon.svg">
+<style>
+  :root{
+    --bg:#000;--text:#fff;--muted:#666;--accent:#FF3D9A;--tape:#FFC93C;--red:#FF0000;
+    --font-pixel:'Press Start 2P',monospace;--font-mono:'Space Mono',monospace;--font-body:'Inter',sans-serif;
+  }
+  *{margin:0;padding:0;box-sizing:border-box;}
+  body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow:hidden;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;}
+  body::after{
+    content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
+    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px);
+  }
+
+  .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%;}
+  .cursor-dot{width:6px;height:6px;background:var(--accent);transform:translate(-50%,-50%);transition:width .2s,height .2s;}
+  .cursor-ring{width:36px;height:36px;border:2px solid var(--accent);transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;opacity:.5;}
+  .cursor-dot.hover{width:10px;height:10px;background:var(--tape);}
+  .cursor-ring.hover{width:50px;height:50px;border-color:var(--tape);opacity:.8;}
+  @media(max-width:720px){.cursor-dot,.cursor-ring{display:none;}}
+  @media(hover:none){.cursor-dot,.cursor-ring{display:none;}}
+
+  .code{
+    font-family:var(--font-pixel);font-size:clamp(80px,20vw,200px);font-weight:700;line-height:1;
+    color:var(--text);text-shadow:6px 6px 0 var(--accent),-3px -3px 0 var(--tape);
+    animation:glitch 3s ease-in-out infinite;transform:rotate(-3deg);margin-bottom:20px;
+  }
+  @keyframes glitch{
+    0%,90%,100%{text-shadow:6px 6px 0 var(--accent),-3px -3px 0 var(--tape);}
+    92%{text-shadow:6px 6px 0 var(--red),-3px -3px 0 var(--accent);transform:rotate(-3deg) translateX(3px);}
+    94%{text-shadow:6px 6px 0 var(--accent),-3px -3px 0 var(--red);transform:rotate(-3deg) translateX(-3px);}
+    96%{text-shadow:6px 6px 0 var(--tape),-3px -3px 0 var(--accent);transform:rotate(-3deg) translateX(2px);}
+  }
+
+  .msg{
+    font-family:var(--font-mono);font-size:clamp(12px,2.5vw,16px);color:var(--muted);
+    text-align:center;max-width:500px;line-height:1.8;margin-bottom:40px;transform:rotate(1deg);
+  }
+
+  .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;transform:rotate(-0.5deg);}
+  .btn{
+    font-family:var(--font-mono);font-weight:700;font-size:12px;padding:14px 28px;
+    border:2px solid var(--text);text-transform:uppercase;letter-spacing:.04em;
+    text-decoration:none;transition:all .2s;display:inline-block;
+  }
+  .btn-home{background:var(--text);color:#000;}
+  .btn-back{background:transparent;color:var(--text);}
+  .btn:hover{transform:translateY(-3px) rotate(-1deg);filter:brightness(1.1);}
+  .btn:active{transform:translateY(0) scale(.98);}
+
+  .tape{
+    position:fixed;top:50%;left:-5%;right:-5%;height:28px;
+    background:var(--tape);transform:rotate(-5deg);z-index:10;display:flex;align-items:center;
+    justify-content:center;font-family:var(--font-pixel);font-size:9px;color:#000;
+    letter-spacing:.1em;text-transform:uppercase;opacity:.15;pointer-events:none;
+  }
+  .tape:nth-child(2){top:30%;transform:rotate(3deg);opacity:.08;}
+  .tape:nth-child(3){top:70%;transform:rotate(-2deg);opacity:.1;}
+
+  @media(max-width:720px){
+    .actions{flex-direction:column;width:80%;}
+    .btn{text-align:center;}
+  }
+  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
+</style>
+</head>
+<body>
+  <div class="cursor-dot" id="cursorDot"></div>
+  <div class="cursor-ring" id="cursorRing"></div>
+
+  <div class="tape">PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND * PAGE NOT FOUND *</div>
+  <div class="tape">404 * 404 * 404 * 404 * 404 * 404 * 404 * 404 *</div>
+  <div class="tape">DOES NOT EXIST * DOES NOT EXIST * DOES NOT EXIST * DOES NOT EXIST *</div>
+
+  <div class="code">404</div>
+  <p class="msg">This page doesn't exist. Either the URL is wrong or I never built it. Probably both.</p>
+  <div class="actions">
+    <a href="index.html" class="btn btn-home">Go Home</a>
+    <a href="javascript:history.back()" class="btn btn-back">Go Back</a>
+  </div>
+
+<script>
+(function(){
+  var dot=document.getElementById('cursorDot');
+  var ring=document.getElementById('cursorRing');
+  if(!dot||!ring)return;
+  var mx=0,my=0,rx=0,ry=0;
+  document.addEventListener('mousemove',function(e){mx=e.clientX;my=e.clientY;dot.style.left=mx+'px';dot.style.top=my+'px';});
+  (function loop(){
+    rx+=(mx-rx)*0.15;ry+=(my-ry)*0.15;
+    ring.style.left=rx+'px';ring.style.top=ry+'px';
+    requestAnimationFrame(loop);
+  })();
+  document.querySelectorAll('a,button').forEach(function(el){
+    el.addEventListener('mouseenter',function(){dot.classList.add('hover');ring.classList.add('hover');});
+    el.addEventListener('mouseleave',function(){dot.classList.remove('hover');ring.classList.remove('hover');});
+  });
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
