diff --git a/package-lock.json b/package-lock.json
index 2a45345..7fe5f6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5383,6 +5383,11 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -10178,15 +10183,6 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
-    "node_modules/terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/text-segmentation": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
@@ -10532,6 +10528,29 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "node_modules/verror/node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+    },
+    "node_modules/viewerjs": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.2.tgz",
+      "integrity": "sha512-z7N9R91ORhtLvOUxN7GoIl+MFVVMbtWNB1T2UmTKuMlzc4EevS+/bletZcIwDf8RIUzk2CFMdleQzcsjsfLl+A=="
+    },
     "node_modules/vue": {
       "version": "3.2.45",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
@@ -14205,9 +14224,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ=="
     },
     "bootstrap-icons": {
       "version": "1.8.1",
@@ -15394,6 +15413,11 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -17577,16 +17601,14 @@
         "vue-demi": {
           "version": "0.13.11",
           "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
-          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
-          "requires": {}
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A=="
         }
       }
     },
     "pinia-plugin-persistedstate": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.0.2.tgz",
-      "integrity": "sha512-84vPyUhPA/8Pr+1mT1ioNb2d8z4tvdgYRqMQf8xyauOVBKjo0ZcRBwPQBV7ZAJG43Kwar43nXG2jU+ZMvAFFRQ==",
-      "requires": {}
+      "integrity": "sha512-84vPyUhPA/8Pr+1mT1ioNb2d8z4tvdgYRqMQf8xyauOVBKjo0ZcRBwPQBV7ZAJG43Kwar43nXG2jU+ZMvAFFRQ=="
     },
     "pkg-dir": {
       "version": "4.2.0",
@@ -19192,6 +19214,28 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      },
+      "dependencies": {
+        "core-util-is": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+        }
+      }
+    },
+    "viewerjs": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.2.tgz",
+      "integrity": "sha512-z7N9R91ORhtLvOUxN7GoIl+MFVVMbtWNB1T2UmTKuMlzc4EevS+/bletZcIwDf8RIUzk2CFMdleQzcsjsfLl+A=="
+    },
     "vue": {
       "version": "3.2.45",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
diff --git a/src/components/home/LelongNext.vue b/src/components/home/LelongNext.vue
index 3ae9b3e..74f84c4 100644
--- a/src/components/home/LelongNext.vue
+++ b/src/components/home/LelongNext.vue
@@ -1,15 +1,7 @@
 <template>
   <Card style="margin-bottom: 1em">
-    <template #title
-      ><div
-        class="
-          flex
-          justify-content-center
-          flex-wrap
-          card-container
-          purple-container
-        "
-      >
+    <template #title>
+      <div class="flex justify-content-center flex-wrap card-container purple-container">
         <div class="font-normal">Lelongan Seterusnya</div>
         <Button
           class="button-standard p-button-rounded p-button-outlined"
diff --git a/src/components/home/LelongToday.vue b/src/components/home/LelongToday.vue
index 24d21d6..9696f09 100644
--- a/src/components/home/LelongToday.vue
+++ b/src/components/home/LelongToday.vue
@@ -1,7 +1,7 @@
 <template>
   <Card style="margin-bottom: 1em">
     <template #title>
-      <div class="flex justify-content-between flex-wrap card-container">
+      <div class="flex justify-content-center flex-wrap card-container">
         <div class="font-semibold">Lelongan Hari Ini : <span class="white-space-nowrap">{{ date }}</span></div>
         <Button
           class="button-standard p-button-rounded p-button-outlined"
diff --git a/src/components/home/TheHome.vue b/src/components/home/TheHome.vue
index e111622..efcd52e 100644
--- a/src/components/home/TheHome.vue
+++ b/src/components/home/TheHome.vue
@@ -7,7 +7,7 @@
       <div class="col-12">
         <item-in-cart-notification></item-in-cart-notification>
       </div>
-      <div class="col-12 lg:col-7">
+      <div class="col-12 lg:col-12">
         <lelong-today></lelong-today>
         <lelong-next></lelong-next>
         <current-karat></current-karat>
diff --git a/src/components/layouts/TheHeader-v2.vue b/src/components/layouts/TheHeader-v2.vue
new file mode 100644
index 0000000..85fb5c6
--- /dev/null
+++ b/src/components/layouts/TheHeader-v2.vue
@@ -0,0 +1,494 @@
+<template>
+    <!-- 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 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"
+            />
+  
+            <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()"/> -->
+          <!-- <nav class="main-nav">
+            <router-link class="nav-button" v-bind:to="{ name: 'home' }"
+              >Utama</router-link
+            >
+            <router-link class="nav-button" v-bind:to="{ name: 'list' }"
+              >Senarai</router-link
+            >
+            <router-link class="nav-button" v-bind:to="{ name: 'cart' }"
+              >Troli</router-link
+            >
+            <router-link class="nav-button" v-bind:to="{ name: 'bid-record' }"
+              >Rekod</router-link
+            >
+            <router-link class="nav-button" v-bind:to="{ name: 'result' }"
+              >Keputusan</router-link
+            >
+            <router-link class="nav-button" v-bind:to="{ name: 'login' }"
+              >Login</router-link
+            >
+          </nav> -->
+        </div>
+        <div class="flex align-items-center justify-content-center">
+          <div class="profile-title hidden lg:flex">
+            <div class="dropdown">
+              <div
+                class="dropdown-toggle"
+                type="button"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                <i class="bi bi-person-circle me-1"></i>{{ username }}
+              </div>
+              <ul class="dropdown-menu">
+                <li>
+                  <div
+                    type="button"
+                    class="dropdown-item"
+                    v-on:click="toProfile()"
+                  >
+                    Profil <i class="bi bi-person-workspace"></i>
+                  </div>
+                </li>
+                <li><hr class="dropdown-divider" /></li>
+                <li>
+                  <div
+                    type="button"
+                    v-on:click="doLogout()"
+                    class="dropdown-item"
+                  >
+                    Log Keluar <i class="bi bi-box-arrow-right"></i>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 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"
+      >
+        <div class="flex align-items-center justify-content-center">
+         
+          <Button
+            icon="pi pi-th-large"
+            @click="visibleLeft = true"
+            class="mr-2"
+          />
+         
+          <!-- <div class="logo-title ml-4 mr-5">Menu</div> -->
+  
+          <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">
+          <i
+            class="pi pi-bars text-white lg:hidden"
+            @click="visibleRight = true"
+          ></i>
+        </div>
+      </div>
+      <!-- <div>
+        <div class="flex justify-content-center h-2rem bg-red-500">
+          Countdown 00:00:00
+        </div>
+      </div> -->
+    </div>
+    <!-- <Sidebar v-model:visible="visibleRight" position="right">
+      <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">
+          <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> -->
+  
+    <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="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"),
+        visibleLeft: false,
+        lelongOnline: "",
+      };
+    },
+    setup() {
+      const authenticationStore = useAuthenticationUserStore()
+  
+      return { authenticationStore }
+    },
+    mounted: function () {
+      this.getLelongOnline();
+    },
+    methods: {
+      doLogout() {
+        axios
+          .post(
+            "/user/logout",
+            {},
+            {
+              headers: {
+                Authorization: "Bearer " + localStorage.getItem("token"),
+              },
+            }
+          )
+          .then((response) => {
+            localStorage.clear();
+            this.authenticationStore.$reset();
+            this.$router.push({ name: "login" });
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+        localStorage.clear();
+        this.$router.push({ name: "login" });
+      },
+      toHome() {
+        this.$router.push({ name: "home" });
+      },
+      toProfile() {
+        this.$router.push({ name: "profile" });
+      },
+      getLelongOnline() {
+        axios
+          .get("/lelongOnline", {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          })
+  
+          .then((response) => {
+            console.log(response);
+            if (response.data.success === true) {
+              this.lelongOnline = response.data.lelong.masatamat_lelong;
+              this.$toast.add({
+                severity: "info",
+                summary: "Informasi",
+                detail: "Lelong akan tamat pada " + this.lelongOnline,
+              });
+            } else {
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      },
+    },
+  };
+  
+  // 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>
+  /* 
+  
+  ========== 01 TYPOGRAPHY ==========
+  -Font sizes(px)
+  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
+  
+  ========== 02 COLORS ==========
+  -Primary: #1d3461
+  -Shades: #142444
+  -Tints: #bbc2d0 #d2d6df
+  -Accents:
+  -Greys: 
+  #555
+  #333
+  
+  -Tints KIV: #617190
+  -Accents KIV: #E9C439
+  
+  ========== 07 WHITESPACE ==========
+  
+  -Spacing system(px)
+  2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
+  
+  */
+  
+  /* .nav-link:hover {
+    color: blue !important;
+  }
+  
+  router-link:hover {
+    color: blue;
+  } */
+  
+  .main-color {
+    background-color: #008f96;
+  }
+  
+  .border-none {
+    border: none;
+  }
+  
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #eeeeee;
+    height: 3.2rem;
+    padding: 0 6.4rem;
+  }
+  
+  .company-title {
+    display: flex;
+    text-decoration: none;
+  }
+  
+  .logo-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #f9fafc;
+    font-size: 1.0rem;
+    font-weight: 200;
+  }
+  
+  .logo-img {
+    height: 1.6rem;
+  }
+  
+  /* .main-nav {
+    background-color: #cb3d3d;
+  } */
+  
+  .main-nav-list {
+    list-style: none;
+    display: flex;
+    gap: 3.2rem;
+    align-items: center;
+    margin: 0;
+  }
+  
+  .main-nav-link:link,
+  .main-nav-link {
+    display: flex;
+    text-decoration: none;
+    align-items: center;
+    justify-content: center;
+    height: 2.4rem;
+    color: #2c2d2e;
+    font-weight: 500;
+    font-size: 1rem;
+    transition: all 0.3s;
+  }
+  
+  .main-nav-link:hover {
+    color:#fec234;
+  }
+  
+  .main-nav-link-sidebar:hover {
+    background: #fec234;
+    border-radius: 10px;
+    padding: 7px 20px;
+    color: #1e417b !important;
+  }
+  
+  .nav-button {
+    text-decoration: none;
+    margin: 0 1.5rem;
+    color: #eaf0f9;
+  }
+  
+  .nav-button:hover {
+    color: #fec234;
+  }
+  
+  a.router-link-exact-active {
+    background: #fec234;
+    color: #000000;
+    border-radius: 10px;
+    padding: 7px 20px;
+  }
+  
+  a.router-link-exact-active:hover {
+    background: #fec234;
+    color: #000000;
+  }
+  
+  .profile-title {
+    color: #eaf0f9;
+  }
+  
+  .arrow-logo {
+    font-size: 0.5rem;
+  }
+  
+  .p-component-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index f35ccdc..8538ccc 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -1,28 +1,17 @@
 <template>
   <!-- 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"
-    >
+    <Toast :breakpoints="{ '992px': { display: 'none' },  }"/>
+    <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"
-          />
-
-          <div class="logo-title mr-2">Menu</div>
-
+        <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" /> -->
           <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>
-
       <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()"/> -->
-        <!-- <nav class="main-nav">
+        <nav class="main-nav">
           <router-link class="nav-button" v-bind:to="{ name: 'home' }"
             >Utama</router-link
           >
@@ -38,10 +27,10 @@
           <router-link class="nav-button" v-bind:to="{ name: 'result' }"
             >Keputusan</router-link
           >
-          <router-link class="nav-button" v-bind:to="{ name: 'login' }"
-            >Login</router-link
+          <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">
@@ -83,114 +72,67 @@
   <!-- 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">
-       
-        <Button
-          icon="pi pi-th-large"
-          @click="visibleLeft = true"
-          class="mr-2"
-        />
-       
-        <!-- <div class="logo-title ml-4 mr-5">Menu</div> -->
-
-        <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
-        <!-- <div class="company-title" type="button" v-on:click="toHome()">
+        <i
+          class="pi pi-bars text-white lg:hidden mr-3"
+          style="cursor: pointer"
+          @click="visibleRight = true"
+        ></i>
+        <div class="company-title" type="button" v-on:click="toHome()">
           <div class="logo-title">E-Rahn Lelong</div>
-        </div> -->
+          <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
+        </div>
       </div>
 
       <div class="flex align-items-center justify-content-center">
-        <i
-          class="pi pi-bars text-white lg:hidden"
+        <!-- <i
+          class="pi pi-shopping-cart text-white lg:hidden"
+          style="cursor: pointer"
           @click="visibleRight = true"
+        ></i> -->
+        <!-- <i
+          class="pi pi-shopping-cart mr-1 p-text-primary"
+          style="font-size: 1.5rem; color: #eaf0f9"
+          v-badge.success="itemInCart"
+          v-on:click="toCart()"
+          v-if="isSuccessCart"
+        ></i> -->
+        <i
+          class="pi pi-shopping-cart mr-1 p-text-primary"
+          style="font-size: 1.5rem; color: #eaf0f9"
+          v-on:click="toCart()"
         ></i>
       </div>
     </div>
-    <!-- <div>
-      <div class="flex justify-content-center h-2rem bg-red-500">
-        Countdown 00:00:00
-      </div>
-    </div> -->
-  </div>
-  <!-- <Sidebar v-model:visible="visibleRight" position="right">
-    <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">
-        <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 v-if="lelongOnline != ''">
+      <div
+        class="
+          flex
+          align-items-center
+          justify-content-center
+          notification-mobile
+        "
+      >
+        <i class="blink pi pi-info-circle mr-2"></i> Lelongan akan tamat pada
+        {{ lelongOnline }}
       </div>
     </div>
-  </Sidebar> -->
-
-  <Sidebar :visible.sync="visibleLeft" autoZIndex>
+  </div>
+  <Sidebar v-model:visible="visibleRight" position="left">
     <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" />
+          <i class="bi bi-person-circle me-1"></i> {{ username }}
         </div>
       </div>
       <div class="col-12">
@@ -228,6 +170,13 @@
           >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"
@@ -235,13 +184,13 @@
           >Profil</router-link
         >
       </div>
-      <!-- <div class="col-12">
-        <router-link
+      <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"
@@ -256,13 +205,16 @@
 
 <script>
 import axios from "axios";
+import { useAuthenticationUserStore } from "@/store/modules/authentication"
 
 export default {
   data() {
     return {
       username: localStorage.getItem("username"),
-      visibleLeft: false,
+      visibleRight: false,
       lelongOnline: "",
+      isSuccessCart: false,
+      itemInCart: 0,
     };
   },
   setup() {
@@ -272,6 +224,7 @@ export default {
   },
   mounted: function () {
     this.getLelongOnline();
+    // this.getItemInCart();
   },
   methods: {
     doLogout() {
@@ -302,6 +255,9 @@ export default {
     toProfile() {
       this.$router.push({ name: "profile" });
     },
+    toCart() {
+      this.$router.push({ name: "cart" });
+    },
     getLelongOnline() {
       axios
         .get("/lelongOnline", {
@@ -311,13 +267,13 @@ export default {
         })
 
         .then((response) => {
-          console.log(response);
+          // console.log('getLelongOnline', response);
           if (response.data.success === true) {
             this.lelongOnline = response.data.lelong.masatamat_lelong;
             this.$toast.add({
               severity: "info",
               summary: "Informasi",
-              detail: "Lelong akan tamat pada " + this.lelongOnline,
+              detail: "Lelongan akan tamat pada " + this.lelongOnline,
             });
           } else {
           }
@@ -326,26 +282,33 @@ export default {
           console.log(error);
         });
     },
+    getItemInCart() {
+      this.loading = true;
+      axios
+        .get("/itemInCart", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            user_id: localStorage.getItem("id"),
+          },
+        })
+
+        .then((response) => {
+          // console.log('getItemInCart', response);
+          if (response.data.success === true) {
+            this.isSuccessCart = true;
+            this.itemInCart = response.data.cart;
+          } else {
+            this.isSuccessCart = false;
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
   },
 };
-
-// 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>
@@ -381,9 +344,14 @@ export default {
 router-link:hover {
   color: blue;
 } */
-
+.notification-mobile {
+  background: #e9e9ff;
+  color: #696cff;
+  height: 2.5rem;
+  padding: 25px 10px;
+}
 .main-color {
-  background-color: #008f96;
+  background-color: #0D908B;
 }
 
 .border-none {
@@ -394,7 +362,8 @@ router-link:hover {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: #eeeeee;
+  background-color: #0D908B;
+
   height: 3.2rem;
   padding: 0 6.4rem;
 }
@@ -408,19 +377,15 @@ router-link:hover {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #f9fafc;
-  font-size: 1.0rem;
-  font-weight: 200;
+  color: #eaf0f9;
+  font-size: 1rem;
+  font-weight: 700;
 }
 
 .logo-img {
   height: 1.6rem;
 }
 
-/* .main-nav {
-  background-color: #cb3d3d;
-} */
-
 .main-nav-list {
   list-style: none;
   display: flex;
@@ -436,43 +401,39 @@ router-link:hover {
   align-items: center;
   justify-content: center;
   height: 2.4rem;
-  color: #2c2d2e;
+  color: #82a4dc;
   font-weight: 500;
   font-size: 1rem;
   transition: all 0.3s;
 }
 
 .main-nav-link:hover {
-  color:#fec234;
+  color: #fff;
 }
 
 .main-nav-link-sidebar:hover {
-  background: #fec234;
-  border-radius: 10px;
-  padding: 7px 20px;
   color: #1e417b !important;
 }
 
 .nav-button {
   text-decoration: none;
   margin: 0 1.5rem;
-  color: #eaf0f9;
+  color: #ffffff;
 }
 
 .nav-button:hover {
-  color: #fec234;
+  color: #eaf0f9;
 }
 
 a.router-link-exact-active {
-  background: #fec234;
+  background: #FAE79A;
   color: #000000;
   border-radius: 10px;
   padding: 7px 20px;
 }
 
 a.router-link-exact-active:hover {
-  background: #fec234;
-  color: #000000;
+  color: #132a4f;
 }
 
 .profile-title {
@@ -482,12 +443,4 @@ 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>
+</style>
\ No newline at end of file
diff --git a/src/components/policy/ThePolicy.vue b/src/components/policy/ThePolicy.vue
index 98d6569..0928fe8 100644
--- a/src/components/policy/ThePolicy.vue
+++ b/src/components/policy/ThePolicy.vue
@@ -7,9 +7,9 @@
         </template>
         <template #content>
           <TabView>
-            <TabPanel :header="'Panduan ArrahnBid'">
+            <TabPanel :header="'Panduan E-Rahn Lelong'">
               <p>
-                Berikut merupakan video panduan untuk penggunaan ArrahnBid. Sila
+                Berikut merupakan video panduan untuk penggunaan E-Rahn Lelong. Sila
                 tonton
                 <a
                   class="font-bold"