diff --git a/404.html b/404.html
new file mode 100644
index 0000000..f1a5c68
--- /dev/null
+++ b/404.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>SplatNet - Splatoon's multiplayer service hub</title>
+
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/styles.css" />
+
+    <style>
+        .notfound {
+            margin-top: 40px;
+            background: rgba(0, 0, 0, 0.85);
+            border-radius: 18px;
+            padding: 32px 40px;
+            text-align: center;
+            max-width: 600px;
+        }
+
+        .notfound h1 {
+            font-family: "Splatoon1";
+            font-size: 96px;
+            margin: 0;
+            color: #ff4fd8;
+            letter-spacing: 6px;
+        }
+
+        .notfound h2 {
+            font-family: "Splatoon1";
+            font-size: 32px;
+            margin: 8px 0 16px;
+            color: white;
+        }
+
+        .notfound p {
+            font-family: "Regular";
+            font-size: 18px;
+            color: #ddd;
+            margin-bottom: 28px;
+        }
+
+        .notfound a {
+            display: inline-block;
+            font-family: "Splatoon1";
+            font-size: 20px;
+            padding: 12px 28px;
+            background: #ff4fd8;
+            color: black;
+            text-decoration: none;
+            border-radius: 999px;
+            transition: transform 0.15s ease, background 0.15s ease;
+        }
+
+        .notfound a:hover {
+            background: #ff7ae6;
+            transform: scale(1.05);
+        }
+        body {
+        background-image: url("/assets/friendlist.png");
+        }
+    </style>
+</head>
+
+<body>
+    <div id="header"></div>
+
+    <div class="content">
+        <div class="notfound">
+            <h1>404</h1>
+            <h2>Booyah…?</h2>
+            <p>
+                This page got splatted.<br />
+            </p>
+
+            <a href="/">Return to somewhere safe</a>
+        </div>
+    </div>
+
+    <script>
+        fetch("/header.html")
+            .then(res => res.text())
+            .then(html => {
+                document.getElementById("header").innerHTML = html;
+            });
+    </script>
+</body>
+</html>
diff --git a/assets/friendlist.png b/assets/friendlist.png
new file mode 100644
index 0000000..31a0688
Binary files /dev/null and b/assets/friendlist.png differ
diff --git a/index.html b/index.html
index f02d6ba..86d2373 100644
--- a/index.html
+++ b/index.html
@@ -36,4 +36,9 @@
 
   <script src="stages.js"></script>
 </body>
+<style>
+body {
+    background-image: url("/assets/stage.png");
+}
+</style>
 </html>
diff --git a/styles.css b/styles.css
index 20bede7..e9332bf 100644
--- a/styles.css
+++ b/styles.css
@@ -18,7 +18,6 @@ html, body {
 }
 
 body {
-    background-image: url("/assets/stage.png");
     background-repeat: repeat;
     background-size: 800px 800px;
 }
