diff --git a/public/img/bidder.png b/public/img/bidder.png
new file mode 100644
index 0000000..efa6898
Binary files /dev/null and b/public/img/bidder.png differ
diff --git a/public/img/person-icon-white.png b/public/img/person-icon-white.png
new file mode 100644
index 0000000..e603c93
Binary files /dev/null and b/public/img/person-icon-white.png differ
diff --git a/public/img/person-icon.png b/public/img/person-icon.png
new file mode 100644
index 0000000..cd30902
Binary files /dev/null and b/public/img/person-icon.png differ
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 82e9872..508abfa 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -1698,8 +1698,8 @@
 
 .p-button {
   color: #ffffff;
-  background: #faa608;
-  border: 1px solid #faa608;
+  background: #008f96;
+  border: 1px solid #008f96;
   padding: 0.75rem 1.25rem;
   font-size: 1rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
index a013c0e..7b64999 100644
--- a/src/components/authentication/TheLogin.vue
+++ b/src/components/authentication/TheLogin.vue
@@ -12,18 +12,36 @@
             class="col-md-2 d-flex flex-column justify-content-center align-items-left"
             style="margin-right: -85px"
           >
-            <img class="logo-img1" src="img/e-Rahn_Logo_FA-01.png" alt="erahn-logo" />
+            <img
+              class="logo-img1"
+              src="img/e-Rahn_Logo_FA-01.png"
+              alt="erahn-logo"
+            />
           </div>
           <div
             class="col-md-2 d-flex flex-column justify-content-center align-items-left"
           >
-            <img class="logo-img2" src="img/Logo KoPKB_Final.png" alt="erahn-logo" />
+            <img
+              class="logo-img2"
+              src="img/Logo KoPKB_Final.png"
+              alt="erahn-logo"
+            />
+          </div>
+          <div
+            class="col-md-2 d-flex flex-column justify-content-center align-items-left"
+            style="margin-left: -85px"
+          >
+            <img
+              class="logo-img3"
+              src="img/e-rahn-lelong.png"
+              alt="erahn-logo"
+            />
           </div>
         </div>
       </div>
       <div class="text-center mb-5">
-        <img class="logo-img" src="img/e-rahn-lelong.png" alt="erahn-logo" />
-        <div class="text-200 text-3xl font-semibold mb-3 mt-2">Log Masuk</div>
+        <img class="logo-img" src="img/bidder.png" alt="erahn-logo" />
+        <div class="text-200 text-3xl font-semibold mb-3">Log Masuk</div>
         <span class="text-200 font-medium line-height-3"
           >Belum punyai akaun?</span
         >
@@ -214,8 +232,9 @@ export default {
 }
 
 .logo-img {
-  width: 350px;
-  height: 60px;
+  color: white;
+  width: 180px;
+  height: 150px;
 }
 
 .logo-img1 {
@@ -228,6 +247,11 @@ export default {
   height: 60px;
 }
 
+.logo-img3 {
+  width: 150px;
+  height: 30px;
+}
+
 /* .border-round{
   border-radius:50px;
 } */
diff --git a/src/components/authentication/TheRegister.vue b/src/components/authentication/TheRegister.vue
index 0392e80..e5aba8f 100644
--- a/src/components/authentication/TheRegister.vue
+++ b/src/components/authentication/TheRegister.vue
@@ -22,6 +22,14 @@
             <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
             <div class="text-200 text-3xl font-semibold mb-3 mt-3">Daftar Akaun</div>
           </div>
+          <!-- <span class="text-600 font-medium line-height-3"
+            >Sudah punyai akaun?</span
+          >
+          <router-link
+            v-bind:to="{ name: 'login' }"
+            class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
+            >Log masuk sekarang!</router-link
+          > -->
         </div>
         <!-- <h5>Daftar Akaun</h5> -->
         <div class="grid">
@@ -253,12 +261,12 @@
             />
           </div>
           <div class="col-12 text-center">
-            <span class="text-600 font-medium line-height-3"
+            <span class="text-200 font-medium line-height-3"
             >Sudah punyai akaun?
             </span>
             <router-link
             v-bind:to="{ name: 'login' }"
-            class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
+            class="font-medium no-underline ml-2 text-teal-600 cursor-pointer"
             >Log masuk sekarang!</router-link>
           </div>      
         </div>
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index 4b45246..f3b1a4a 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -2,14 +2,21 @@
   <!-- 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" /> -->
-          <Button icon="pi pi-th-large" @click="visibleLeft = true" class="mr-2" />
+          <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">
         <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
         <!-- <nav class="main-nav">
@@ -73,21 +80,19 @@
   <!-- Navbar for phone, tab screen size (width<992px) -->
   <div class="card sticky-top lg:hidden md:flex border-none">
     <div
-      class="
-        flex
-        justify-content-between
-        px-3
-        md:px-6
-        h-3rem
-        flex-wrap
-        main-color
-      "
+      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()">
-          <!-- <div class="logo-title">E-Rahn Lelong</div> -->
-       
-        </div>
+        <Button
+          icon="pi pi-th-large"
+          @click="visibleLeft = true"
+          class="mr-2"
+        />
+
+        <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
+        <!-- <div class="company-title" 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">
@@ -170,16 +175,14 @@
     </div>
   </Sidebar> -->
 
-  
-<Sidebar :visible.sync="visibleLeft" autoZIndex dismissable:false>
-    <!-- <h3>Left Sidebar</h3> -->
+  <Sidebar :visible.sync="visibleLeft" autoZIndex>
     <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="col-12">
         <div class="text-center">
           <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
         </div>
@@ -226,13 +229,13 @@
           >Profil</router-link
         >
       </div>
-      <div class="col-12">
+      <!-- <div class="col-12">
         <router-link
           class="main-nav-link main-nav-link-sidebar"
           v-bind:to="{ name: 'login' }"
           >Login</router-link
         >
-      </div>
+      </div> -->
       <div class="col-12">
         <a
           class="main-nav-link main-nav-link-sidebar"
@@ -242,8 +245,7 @@
         >
       </div>
     </div>
-</Sidebar>
-
+  </Sidebar>
 </template>
 
 <script>
@@ -312,6 +314,24 @@ export default {
     },
   },
 };
+
+// const { createApp, ref } = Vue;
+
+// const App = {
+//   setup() {
+//     const visibleLeft = ref(false);
+
+//     return {
+//       visibleLeft,
+//     };
+//   },
+//   components: {
+//     "p-sidebar": primevue.sidebar,
+//     "p-button": primevue.button,
+//   },
+// };
+
+// createApp(App).use(primevue.config.default).mount("#app");
 </script>
 
 <style scoped>
@@ -349,7 +369,7 @@ router-link:hover {
 } */
 
 .main-color {
-  background-color: #008F96;
+  background-color: #008f96;
 }
 
 .border-none {
@@ -409,10 +429,13 @@ router-link:hover {
 }
 
 .main-nav-link:hover {
-  color: #fff;
+  color:#fec234;
 }
 
 .main-nav-link-sidebar:hover {
+  background: #fec234;
+  border-radius: 10px;
+  padding: 7px 20px;
   color: #1e417b !important;
 }
 
@@ -423,17 +446,18 @@ router-link:hover {
 }
 
 .nav-button:hover {
-  color: #eaf0f9;
+  color: #fec234;
 }
 
 a.router-link-exact-active {
-  background: #d5d54f;
+  background: #fec234;
   color: #000000;
   border-radius: 10px;
   padding: 7px 20px;
 }
 
 a.router-link-exact-active:hover {
+  background: #fec234;
   color: #000000;
 }