diff --git a/static/404.html b/static/404.html
index 85373076..906a86ff 100644
--- a/static/404.html
+++ b/static/404.html
@@ -1 +1,70 @@
-Not Found
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>404 - page not found</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <style>
+    body {
+      margin: 0;
+      height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background: #f3f8ff;
+      color: #1f2937;
+      text-align: center;
+    }
+
+    .box {
+      max-width: 500px;
+      padding: 40px;
+      background: white;
+      border-radius: 20px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+    }
+
+    h1 {
+      font-size: 90px;
+      margin: 0;
+      color: #6ec8ff;
+    }
+
+    p {
+      font-size: 20px;
+      color: #64748b;
+      line-height: 1.5;
+    }
+
+    a {
+      display: inline-block;
+      margin-top: 20px;
+      padding: 12px 28px;
+      border-radius: 14px;
+      background: #6ec8ff;
+      color: white;
+      text-decoration: none;
+      font-weight: 600;
+      transition: 0.2s;
+    }
+
+    a:hover {
+      background: #4db7f5;
+      transform: translateY(-2px);
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box">
+    <h1>404</h1>
+    <p>
+      oops! this page flew away like a penguin without a map.
+    </p>
+
+    <a href="/">go back home</a>
+  </div>
+</body>
+</html>
