diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 8f31394..760ba6a 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -52,25 +52,27 @@
           class="h-full w-32 object-cover rounded-l-sm"
         />
       </a>
-      <div class="w-full justify-between flex border border-neutral-200">
+      <div
+        class="w-full justify-between flex border border-neutral-200 hover:bg-neutral-200 transition-all"
+      >
         <a
           class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg hover:bg-neutral-200 px-6 object-center w-full h-full text-center flex content-center transition-all"
           href="/visit"
           ><span class="mx-auto my-auto">Visit</span></a
         >
         <a
-          class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg hover:bg-neutral-200 px-6 object-center w-full h-full text-center flex content-center transition-all"
+          class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg px-4 object-center w-full h-full text-center flex content-center"
           href="/about"
           ><span class="mx-auto my-auto">About</span></a
         >
       </div>
     </div>
-    <div class="flex w-28">
+    <div class="flex w-24 mr-8">
       <div
-        class="w-full bg-white border border-l-0 md:border-l border-neutral-200 justify-between mr-8 rounded-sm xl:mr-32 flex"
+        class="w-full bg-white hover:bg-neutral-200 transition-all flex-none border border-l-0 md:border-l border-neutral-200 justify-between mr-8 rounded-sm xl:mr-32 flex"
       >
         <a
-          class="my-auto mx-auto font-semibold text-sm lg:text-lg hover:bg-neutral-200 object-center w-full text-center flex content-center transition-all"
+          class="my-auto mx-auto font-semibold text-sm lg:text-lg object-center w-full text-center flex content-center"
           href="/about"
         >
           <img