diff --git a/index.html b/index.html
index a18c317..eadf522 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,15 @@
     <meta name="Description" content="Hippoz's homepage on hippoz.xyz with a file server, a git server, an about page, and a contact page.">
 </head>
 <body>
-    <div class="card navigation-card">
+    <div class="card navigation noselect">
+        <div class="navigation-branding">
+            <span class="navigation-branding-h">
+                h
+            </span>
+        </div>
         <div class="navigation-buttons">
             <button id='button-home' class="button-default button-selected">home</button>
+            <button id='button-blog' class="button-default">blog</button>
             <button id='button-file-server' class="button-default">file server</button>
             <button id='button-git-server' class="button-default">git server</button>
             <button id='button-about-me' class="button-default">about me</button>
diff --git a/res/index.js b/res/index.js
index 85231c5..e5218c3 100644
--- a/res/index.js
+++ b/res/index.js
@@ -33,7 +33,8 @@ const onButtonClick = (buttonId) => {
             break;
         }
         default: {
-            console.error('Invalid button id');
+            console.error('Page not found. Invalid button ID.');
+            A('#content-container').html('<h2>page not found</h2><p>i think</p>');
             return;
         }
     }
diff --git a/res/style.css b/res/style.css
index 07f73bb..b29763e 100644
--- a/res/style.css
+++ b/res/style.css
@@ -5,6 +5,7 @@
     --selected-bg-color: #2E2E2E;
     --hover-bg-color: #555555;
     --main-font-weight: 500;
+    --cards-length: 600px;
 }
 
 body {
@@ -16,7 +17,7 @@ body {
 .card {
     margin: 25px auto;
     padding: 20px;
-    width: 400px;
+    width: var(--cards-length);
     background: var(--accent-bg-color);
     border-radius: 3px;
 
@@ -26,18 +27,35 @@ body {
     box-shadow: 2px -2px 38px 1px rgba(0,0,0,0.59);
 }
 
-.navigation-card {
-    width: 500px;
-    text-align: center;
+/*
+.card.navigation {
+    
 }
+*/
 
+.navigation-buttons {
+    text-align: right;
+}
 .navigation-buttons a {
     margin-left: 10px;
 }
-
 .navigation-buttons a:first-child {
     margin-left: 0px;
 }
+.navigation-branding {
+    float: left;
+}
+.navigation-branding-h {
+    font-size: xx-large;
+    padding: 5px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    white-space: nowrap;
+}
+
+.noselect {
+    user-select: none;
+}
 
 .button-default {
     text-decoration: none;
@@ -65,16 +83,6 @@ body {
     background-color: var(--selected-bg-color);
 }
 
-.button-border {
-    border: 2px solid var(--button-accent-color);
-}
-
-@media screen and (max-width: 768px) {
-    .card {
-        width: 80%;
-    }
-}
-
 .input {
     border: none;
     outline: none;
@@ -87,4 +95,14 @@ body {
     opacity: 0;
     position: absolute;
     z-index: -1;
- }
\ No newline at end of file
+ }
+
+#content-container {
+    text-align: center;
+}
+
+@media screen and (max-width: 768px) {
+    .card {
+        width: 80%;
+    }
+}
\ No newline at end of file
