diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index 8311632..e850bb7 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -11,7 +11,8 @@
         </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
           >
@@ -30,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">
@@ -200,6 +201,87 @@
         >
       </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>
 </template>
 
@@ -211,7 +293,7 @@ export default {
   data() {
     return {
       username: localStorage.getItem("username"),
-      visibleRight: false,
+      visibleLeft: false,
       lelongOnline: "",
       isSuccessCart: false,
       itemInCart: 0,