diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index 9439882..fe2e1ed 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -5,12 +5,14 @@
     <div class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color">
       <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" />
+          <!-- <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" />
           <!-- <div class="logo-title">E-Rahn Lelong</div>   -->
         </div>
       </div>
       <div class="flex align-items-center justify-content-center">
-        <nav class="main-nav">
+        <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
+        <!-- <nav class="main-nav">
           <router-link class="nav-button" v-bind:to="{ name: 'home' }"
             >Utama</router-link
           >
@@ -29,7 +31,7 @@
           <router-link class="nav-button" v-bind:to="{ name: 'policy' }"
             >Polisi</router-link
           >
-        </nav>
+        </nav> -->
       </div>
       <div class="flex align-items-center justify-content-center">
         <div class="profile-title hidden lg:flex">
@@ -202,6 +204,168 @@
   </Sidebar> -->
 
   
+<Sidebar :visible.sync="visibleLeft" autoZIndex dismissable:false>
+    <!-- <h3>Left Sidebar</h3> -->
+    <div class="grid">
+      <!-- <div class="col-12">
+        <div class="text-center">
+          <i class="bi bi-person-circle me-1"></i> {{ username }}
+        </div>
+      </div> -->
+       <div class="col-12">
+        <div class="text-center">
+          <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
+        </div>
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'home' }"
+          >Utama</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'list' }"
+          >Senarai</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'cart' }"
+          >Troli</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'bid-record' }"
+          >Rekod</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'result' }"
+          >Keputusan</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'policy' }"
+          >Polisi</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'profile' }"
+          >Profil</router-link
+        >
+      </div>
+      <div class="col-12">
+        <!-- <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'login' }"
+          >Login</router-link
+        > -->
+      </div>
+      <div class="col-12">
+        <a
+          class="main-nav-link main-nav-link-sidebar"
+          v-on:click="doLogout()"
+          href="#"
+          ><i class="bi bi-box-arrow-right me-1"></i> Log Keluar</a
+        >
+      </div>
+    </div>
+  </Sidebar> -->
+
+  
+<Sidebar :visible.sync="visibleLeft" autoZIndex dismissable:false>
+    <!-- <h3>Left Sidebar</h3> -->
+    <div class="grid">
+      <!-- <div class="col-12">
+        <div class="text-center">
+          <i class="bi bi-person-circle me-1"></i> {{ username }}
+        </div>
+      </div> -->
+       <div class="col-12">
+        <div class="text-center">
+          <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
+        </div>
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'home' }"
+          >Utama</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'list' }"
+          >Senarai</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'cart' }"
+          >Troli</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'bid-record' }"
+          >Rekod</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'result' }"
+          >Keputusan</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'policy' }"
+          >Polisi</router-link
+        >
+      </div>
+      <div class="col-12">
+        <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'profile' }"
+          >Profil</router-link
+        >
+      </div>
+      <div class="col-12">
+        <!-- <router-link
+          class="main-nav-link main-nav-link-sidebar"
+          v-bind:to="{ name: 'login' }"
+          >Login</router-link
+        > -->
+      </div>
+      <div class="col-12">
+        <a
+          class="main-nav-link main-nav-link-sidebar"
+          v-on:click="doLogout()"
+          href="#"
+          ><i class="bi bi-box-arrow-right me-1"></i> Log Keluar</a
+        >
+      </div>
+    </div>
+  </Sidebar> -->
+
+  
 <Sidebar :visible.sync="visibleLeft" autoZIndex dismissable:false>
     <!-- <h3>Left Sidebar</h3> -->
     <div class="grid">
@@ -291,7 +455,7 @@ export default {
   data() {
     return {
       username: localStorage.getItem("username"),
-      visibleRight: false,
+      visibleLeft: false,
       lelongOnline: "",
       isSuccessCart: false,
       itemInCart: 0,
@@ -431,7 +595,7 @@ router-link:hover {
   padding: 25px 10px;
 }
 .main-color {
-  background-color: #333333;
+  background-color: #008F96;
 }
 
 .border-none {
@@ -484,7 +648,7 @@ router-link:hover {
   align-items: center;
   justify-content: center;
   height: 2.4rem;
-  color: #eaf0f9;
+  color: #2c2d2e;
   font-weight: 500;
   font-size: 1rem;
   transition: all 0.3s;