diff --git a/404.html b/404.html
new file mode 100644
index 0000000..e727d22
--- /dev/null
+++ b/404.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en-ca">
+    <head>
+        <meta charset="utf-8" />
+
+        <title>404 | Cutieguwu</title>
+
+        <link rel="icon" type="image/x-icon" href="test-favicon.jpg" />
+        <link rel="stylesheet" type="text/css" href="style.css" />
+
+        <meta name="description" content="Cutieguwu's Official website" />
+        <meta
+            name="viewport"
+            content="width=device-width, height=device-height, initial-scale=1.0"
+        />
+    </head>
+    <body class="viewport">
+        <nav class="nav_pane">
+            <h2 class="nav_logo">Cutieguwu</h2>
+
+            <ul class="nav_menu">
+                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
+                <li class="nav_body">
+                    <a class="nav_title" href="#">About</a>
+                </li>
+                <li class="dropdown">
+                    <div class="dropdown_header nav_body">
+                        <p class="nav_title" href="#">Minecraft</p>
+                        <ion-icon name="chevron-forward-outline"></ion-icon>
+                    </div>
+                    <div class="dropdown_body">
+                        <a class="nav_title" href="#">Bearock SMP</a>
+                        <a class="nav_title" href="#">Rebirth SMP</a>
+                    </div>
+                </li>
+                <li class="dropdown">
+                    <div class="dropdown_header nav_body">
+                        <p class="nav_title">Links</p>
+                        <ion-icon name="chevron-forward-outline"></ion-icon>
+                    </div>
+                    <div class="dropdown_body">
+                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
+                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
+                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
+                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
+                    </div>
+                </li>
+                <li class="dropdown">
+                    <div class="dropdown_header nav_body">
+                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
+                            >Pronoun Pages</a
+                        >
+                        <ion-icon name="chevron-forward-outline"></ion-icon>
+                    </div>
+                    <div class="dropdown_body">
+                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
+                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
+                    </div>
+                </li>
+                <li class="nav_body">
+                    <a class="nav_title" href="#">Other</a>
+                </li>
+                <li class="nav_body">
+                    <a class="nav_title" href="#">Other 2</a>
+                </li>
+                <li class="nav_body">
+                    <a class="nav_title" href="#">Super long titled</a>
+                </li>
+            </ul>
+        </nav>
+        <div class="error_pane">
+            <h1>404</h1>
+            <h2>Page not found!</h2>
+        </div>
+        <script
+            type="module"
+            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+        ></script>
+        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+    </body>
+</html>
diff --git a/index.html b/index.html
index e555236..c6e2c04 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
 
-        <title>Home | Cuiteguwu</title>
+        <title>Home | Cutieguwu</title>
 
         <link rel="icon" type="image/x-icon" href="test-favicon.jpg" />
         <link rel="stylesheet" type="text/css" href="style.css" />
@@ -70,13 +70,7 @@
             </ul>
         </nav>
         <div class="main_pane">
-            <p>
-                lorem ipsum etc idk what else there is in this latin phrase so here's a bunch of
-                generic stuff the quick brown fox jumps over the lazy dog blah blah blah more text
-                here as I continue to type random shit out hoping that I can fill this block and
-                track something down but likely only to fail miserably because css is such a pain in
-                the ass
-            </p>
+            <p>lorem ipsum etc idk what else there is in this latin phrase</p>
         </div>
         <script
             type="module"
diff --git a/style.css b/style.css
index ad12680..191e743 100644
--- a/style.css
+++ b/style.css
@@ -120,7 +120,16 @@
 .main_pane {
     padding: 1rem;
     width: auto;
+    align-self: center;
     background-color: rgba(0, 0, 0, 50%);
     color: white;
-    float: right;
+}
+
+.error_pane {
+    padding: 1rem;
+    width: max-content;
+    align-self: center;
+    background-color: rgba(0, 0, 0, 50%);
+    color: white;
+    border-radius: 1cqh;
 }
