diff --git a/src/pages/404.astro b/src/pages/404.astro
index 684e731..0eb7cac 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,21 +1,19 @@
 ---
-import Layout from "../layouts/layout.astro";
-import "../styles/main.scss";
+import Meta from "../layouts/meta.astro";
 import {SparkleFillIcon} from '@primer/octicons-react'
-
+import "../styles/404.scss"
 ---
-<Layout>
-	<div class="codeblock heading" aria-label='This is the depiction of a terminal with a blinking cursor, with the number "404" displayed.'>
-		<b>></b> 
-        {<SparkleFillIcon size="1em"/>} 
-        <b>404</b>
-        <span class="cursor-blink">_</span>
-	</div>
+<Meta>
+    <main>
+        <div class="title">
+            <h1>This is not the page you are looking for.</h1>
+        </div>
+        <div class="return-home">
+            <span>
+                <SparkleFillIcon size={32} className="header-icon"/>
+                <a href="/">Return home?</a>
+            </span>
 
-    <p>
-        This is not the page you are looking for.
-    </p>
-    <a href="/">
-        Return home?
-    </a>
-</Layout>
\ No newline at end of file
+        </div>
+    </main>
+</Meta>
\ No newline at end of file
diff --git a/src/styles/404.scss b/src/styles/404.scss
new file mode 100644
index 0000000..254a6ad
--- /dev/null
+++ b/src/styles/404.scss
@@ -0,0 +1,58 @@
+@use "./var";
+
+main {
+    display: flex;
+
+    span {
+        width: fit-content;
+        background-color: var(--heading-color);
+        color: var(--background-color);
+    }
+
+    .title {
+        margin-top: 30vh;
+        width: 100%;
+        flex: auto;
+
+        h1 {
+            margin: 0;
+        }
+    }
+
+    .return-home {
+        width: calc(100% / 3);
+        display: flex;
+        flex-direction: column;
+        flex: none;
+        margin-top: 30vh;
+
+        a {
+            font-family: var(--font-main);
+            font-size: 2rem;
+            text-decoration: none;
+            color: var(--background-color);
+        }
+        
+        a:hover {
+            text-decoration: underline;
+            text-decoration-thickness: 2px;
+        }
+    }
+}
+
+@media only screen and (max-width: 786px) {
+    main {
+        flex-direction: column;
+        height: auto;
+
+        .title, .return-home {
+            margin-top: 10vh;
+        }
+
+        .return-home {
+            width: auto;
+        }
+        
+        margin-bottom: 10vh;
+    }
+}
\ No newline at end of file