diff --git a/src/css/main.scss b/src/css/main.scss
index 21f2749..5d6138d 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -709,3 +709,26 @@ body.has-modal #main {
     margin-left: -5px;
     line-height: 0.45rem;
 }
+
+.error404 {
+    @extend .text-shadow;
+    max-width: 500px;
+    margin: auto;
+
+    .hook-box, .hook-box:before {
+        background-color: #888;
+        @extend .bg-stripes-gradient;
+
+        padding-left: 0;
+        padding-right: 0;
+        padding-bottom: 0;
+    }
+
+    .box-header {
+        padding: 5px 15px 10px;
+    }
+
+    .box-footer {
+        padding: 5px 15px 10px;
+    }
+}
diff --git a/src/img/404.jpg b/src/img/404.jpg
new file mode 100644
index 0000000..b91a3c0
Binary files /dev/null and b/src/img/404.jpg differ
diff --git a/src/js/components/404.vue b/src/js/components/404.vue
new file mode 100644
index 0000000..eccba47
--- /dev/null
+++ b/src/js/components/404.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="hero is-fullheight">
+        <div class="hero-body">
+            <!-- 404! -->
+            <div class="error404 tilt-left">
+                <div class="hook-box">
+                    <div class="box-header">
+                        <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
+                            404 Not Found
+                        </h2>
+                    </div>
+
+                    <img src="~@/img/404.jpg" />
+
+                    <div class="box-footer">
+                        <p class="has-text-centered">
+                            <router-link to="/" class="button is-translucent is-rounded">
+                                <span class="icon squid-icon-tilt">
+                                    <span class="fa squid-squid"></span>
+                                </span>
+                                <span class="font-splatoon2">
+                                    Return to Splatoon2.ink
+                                </span>
+                            </router-link>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/js/router.js b/src/js/router.js
index 6e66137..d145b76 100644
--- a/src/js/router.js
+++ b/src/js/router.js
@@ -20,6 +20,10 @@ const routes = [
             },
         ],
     },
+    {
+        path: '*',
+        component: require('./components/404.vue').default,
+    },
 ];
 
 const router = new VueRouter({