diff --git a/assets/_layout.html b/assets/_layout.html
index 18e5fdd..72d6af1 100644
--- a/assets/_layout.html
+++ b/assets/_layout.html
@@ -13,12 +13,15 @@
         <nav>
             <ul>
                 <li><a href="/">Home</a></li>
-                <!-- placeholder -->
+                <!-- Add more links to your menubar here -->
+                <li><a href="/what">What</a></li>
+                <li><a href="/who">Who</a></li>
             </ul>
         </nav>
     </header>
-    <div id="content">
-        {{.Content}}
-    </div>
+    <main>
+        {{ .Content }}
+    </main>
 </body>
 </html>
+
diff --git a/assets/main.css b/assets/main.css
index 64d7ff4..bbda18a 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -1,8 +1,7 @@
 /* assets/main.css */
 
-/* placeholder for better sytle */
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Courier New', Courier, monospace;
     line-height: 1.6;
     margin: 20px;
     background-color: #131313;
@@ -24,29 +23,47 @@ a:hover {
 
 header {
     padding: 1em;
-    background-color: #5555;
+    background-color: #333;
     border-bottom: 1px solid #555;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 header h1 {
-    display: inline-block;
     margin-right: 1em;
+    font-size: 1.5em;
 }
 
 nav ul {
     list-style: none;
     padding: 0;
+    margin: 0;
 }
 
 nav ul li {
     display: inline;
     margin-right: 1em;
+    font-size: 1.1em;
 }
 
-/* Add the following rule to improve code block appearance */
 pre {
     background-color: #5555;
     padding: 1em;
     border-radius: 3px;
 }
+/* Button styles */
+nav ul li a {
+    display: inline-block;
+    padding: 8px 16px;
+    border: 1px solid #14ee00;
+    border-radius: 3px;
+    background-color: transparent;
+    font-size: 1.1em;
+    transition: background-color 0.3s, color 0.3s;
+}
 
+nav ul li a:hover {
+    background-color: #14ee00;
+    color: #131313;
+}