diff --git a/client/index.html b/client/index.html
index 795e4fb..dfcf4b6 100644
--- a/client/index.html
+++ b/client/index.html
@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>Wanderhome Personality Quiz | V.S.</title>
   </head>
-  <body>
-    <div id="app"></div>
+  <body class="bg-green-100 h-screen">
+    <div class="bg-green-100" id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/client/src/App.vue b/client/src/App.vue
index c1f5d61..d33fdf8 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -6,7 +6,7 @@ import Navbar from '@/components/Navbar.vue'
 
 <template>
   <Navbar />
-  <div class="container">
+  <div class="container p-3 max-w-5xl mx-auto">
     <router-view></router-view>
   </div>
 </template>
diff --git a/client/src/components/Navbar.vue b/client/src/components/Navbar.vue
index c80e544..f3d7cb6 100644
--- a/client/src/components/Navbar.vue
+++ b/client/src/components/Navbar.vue
@@ -1,15 +1,16 @@
 <template>
-    <nav class="relative container mx-auto p-6">
-        <div class="flex items-center justify-between">
+    <nav class="relative bg-lime-900 text-white">
+        <div class="flex max-w-5xl mx-auto items-center justify-between">
             <!-- Logo -->
-            <div class="pt-2">
-                <img src="@/assets/vue.svg" alt="Vite Logo" >
+            <div class="inline-flex justify-center items-center">
+                <img src="@/assets/vue.svg" class="p-2" alt="Vite Logo" >
+                <router-link to="/"><span class="text-m md:text-lg h-fit align-middle p-1"><em>Wanderhome</em> Personality Quiz | V.S.</span></router-link>
             </div>
             <!-- Menu Items -->
-            <div class="hidden md:flex space-x-6">
-                <router-link class="hover:text-red-500 active:text-blue-500" to="/">Home</router-link>
-                <router-link class="hover:text-red-500 active:text-blue-500" to="/quiz">Take the Quiz</router-link>
-                <router-link class="hover:text-red-500 active:text-blue-500" to="/about">About</router-link>
+            <div class="hidden md:flex space-x-3 justify-center items-center">
+                <router-link class="hover:text-orange-500 active:text-blue-500 p-3 h-fit align-middle" to="/">Home</router-link>
+                <router-link class="hover:text-orange-500 active:text-blue-500 p-3 h-fit align-middle" to="/quiz">Take the Quiz</router-link>
+                <router-link class="hover:text-orange-500 active:text-blue-500 p-3 h-fit align-middle" to="/about">About</router-link>
             </div>
         </div>
     </nav>
