diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index cf0f2d2..c509233 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -2,25 +2,17 @@
   <!-- Navbar for laptop screen size (width>992px) -->
   <Toast :breakpoints="{ '500px': { width: '100%', right: '0', left: '0' } }" />
   <div class="card sticky-top lg:flex hidden border-none">
-    <div
-      class="
-        flex
-        justify-content-between
-        px-3
-        md:px-6
-        h-3rem
-        flex-wrap
-        main-color
-      "
-    >
+    <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
           >
@@ -39,7 +31,7 @@
           <router-link class="nav-button" v-bind:to="{ name: 'login' }"
             >Login</router-link
           >
-        </nav>
+        </nav> -->
       </div>
       <div class="flex align-items-center justify-content-center">
         <div class="profile-title hidden lg:flex">
@@ -93,8 +85,8 @@
     >
       <div class="flex align-items-center justify-content-center">
         <div class="company-title" type="button" v-on:click="toHome()">
-          <div class="logo-title">E-Rahn Lelong</div>
-          <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
+          <!-- <div class="logo-title">E-Rahn Lelong</div> -->
+       
         </div>
       </div>
 
@@ -111,7 +103,7 @@
       </div>
     </div> -->
   </div>
-  <Sidebar v-model:visible="visibleRight" position="right">
+  <!-- <Sidebar v-model:visible="visibleRight" position="right">
     <div class="grid">
       <div class="col-12">
         <div class="text-center">
@@ -176,16 +168,92 @@
         >
       </div>
     </div>
-  </Sidebar>
+  </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: '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>
 
 <script>
 import axios from "axios";
+
 export default {
   data() {
     return {
       username: localStorage.getItem("username"),
-      visibleRight: false,
+      visibleLeft: false,
       lelongOnline: "",
     };
   },
@@ -281,7 +349,7 @@ router-link:hover {
 } */
 
 .main-color {
-  background-color: #333333;
+  background-color: #008F96;
 }
 
 .border-none {
@@ -334,7 +402,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;
diff --git a/src/components/layouts/TheSidebar.vue b/src/components/layouts/TheSidebar.vue
new file mode 100644
index 0000000..7df8978
--- /dev/null
+++ b/src/components/layouts/TheSidebar.vue
@@ -0,0 +1,18 @@
+<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
+    <h3>Left Sidebar</h3>
+</Sidebar>
+
+<script>
+export default {
+	data() {
+		return {
+			visibleLeft: false,
+			// visibleRight: false,
+			// visibleTop: false,
+			// visibleBottom: false,
+			// visibleFull: false
+		}
+	}
+}
+</script>
+
diff --git a/src/components/layouts/TheTemplate.vue b/src/components/layouts/TheTemplate.vue
index 5511790..60f1f92 100644
--- a/src/components/layouts/TheTemplate.vue
+++ b/src/components/layouts/TheTemplate.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="content-page" style="background-color: #fec234;">
-    <div class="content" style="background-color: #fec234;">
+  <div class="content-page" style="background-color: #eeeeee;">
+    <div class="content" style="background-color: #eeeeee;">
       <the-header />
       <br>
-      <div class="container pt-2" style="background-color: #333333;">
+      <div class="container pt-2" style="background-color: #FAE79A;">
         <slot></slot>
       </div>
     </div>