diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index 5d1630f..966ee8b 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -6,12 +6,19 @@
       <div class="flex align-items-center justify-content-center">
         <!-- <div class="company-title" type="button" v-on:click="toHome()"> -->
           <!-- <img class="logo-img mr-2" src="img/e-rahn-lelong.png" alt="arrahn-logo" /> -->
-          <Button icon="pi pi-th-large" @click="visibleLeft = true" class="mr-2" />
+          <Button
+            icon="pi pi-th-large"
+            @click="visibleLeft = true"
+          />
+
+          <div class="logo-title mr-2">Menu</div>
+
+          <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/>
           <!-- <div class="logo-title">E-Rahn Lelong</div>   -->
         <!-- </div> -->
       </div>
       <div class="flex align-items-center justify-content-center">
-        <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/>
+        <!-- <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/> -->
         <!-- <nav class="main-nav">
           <router-link class="nav-button" v-bind:to="{ name: 'home' }"
             >Utama</router-link
@@ -620,9 +627,9 @@ router-link:hover {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #212223;
-  font-size: 3rem;
-  font-weight: 500;
+  color: #f9fafc;
+  font-size: 1.0rem;
+  font-weight: 200;
 }
 
 .logo-img {
@@ -690,4 +697,12 @@ a.router-link-exact-active:hover {
 .arrow-logo {
   font-size: 0.5rem;
 }
+
+.p-component-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>