diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 99719f2..57b4ab2 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -5125,18 +5125,18 @@
 }
 
 .p-inline-message {
-  padding: 0.75rem 0.75rem;
+  padding: 0.4rem 0.9rem;
   margin: 0;
   border-radius: 6px;
 }
 .p-inline-message.p-inline-message-info {
-  background: #e9e9ff;
-  border: solid #696cff;
+  background: #eaf0f9;
+  border: solid #2f68c5;
   border-width: 0px;
-  color: #696cff;
+  color: #2f68c5;
 }
 .p-inline-message.p-inline-message-info .p-inline-message-icon {
-  color: #696cff;
+  color: #2f68c5;
 }
 .p-inline-message.p-inline-message-success {
   background: #e4f8f0;
diff --git a/src/App.vue b/src/App.vue
index 380064b..419d6c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,12 +18,20 @@ export default {
 </script>
 
 <style scoped>
+
+/* 
+
+#1e417b //main color nav
+#2f68c5 //main button
+#eaf0f9 //background inline message
+
+*/
 #app {
-  font-family: Inter, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  /* font-family: Inter, Helvetica, Arial, sans-serif; */
+  /* -webkit-font-smoothing: antialiased; */
+  /* -moz-osx-font-smoothing: grayscale; */
+  /* text-align: center; */
+  /* color: #2c3e50; */
   /* background-color: #e8ebef; */
 }
 
diff --git a/src/components/home/CurrentKarat.vue b/src/components/home/CurrentKarat.vue
index 0865f51..9cbe5b6 100644
--- a/src/components/home/CurrentKarat.vue
+++ b/src/components/home/CurrentKarat.vue
@@ -1,111 +1,45 @@
 <template>
-  <div
-    v-if="loading"
-    style="min-height: 60vh; display: grid; place-items: center"
-  >
-    <div class="spinner-border" role="status">
-      <span class="visually-hidden">Loading...</span>
-    </div>
-  </div>
-  <!-- <div v-else class="card text-center"> -->
-  <!-- <div class="card-header fw-bold text-uppercase">Karat Semasa</div>
-    <div class="card-body">
-      <table class="table table-bordered table-hover">
-        <thead class="table-light">
-          <tr>
-            <th>No.</th>
-            <th>Karat</th>
-            <th>Keterangan</th>
-            <th>Harga</th>
-          </tr>
-        </thead>
-        <tbody v-for="(karats, index) in karat" :key="karats.id">
-          <tr>
-            <td scope="row">{{ index + 1 }}</td>
-            <td scope="row">{{ karats.karat }}</td>
-            <td scope="row">{{ karats.keterangan }}</td>
-            <td scope="row">RM{{ karats.harga }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div> -->
-  <!-- <div v-else class="grid-container">
-    <div v-for="data in karat" v-bind:key="data.id" class="card">
-      <p>{{ data.karat }}</p>
-      <p>RM{{ data.harga }}</p>
-    </div>
-  </div> -->
-  <div v-else>
-    <base-card>
-      <table class="table table-bordered table-hover">
-        <thead>
-          <tr>
-            <th scope="col">Bil</th>
-            <th scope="col">Karat</th>
-            <th scope="col">Harga</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(data, index) in karat" v-bind:key="data.id">
-            <td>{{ index + 1 }}</td>
-            <td>{{ data.karat }}</td>
-            <td>{{ data.harga }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </base-card>
-  </div>
+  <Card>
+    <template #title>
+      <div class="flex justify-content-between flex-wrap card-container">
+        <div class="font-normal">Harga Emas Lelongan</div>
+        <Button
+          class="button-standard p-button-rounded p-button-outlined"
+          icon="pi pi-refresh"
+          @click="toggleReloadComponent()"
+        />
+      </div>
+    </template>
+    <template #content>
+      <current-karat-detail v-bind:key="componentKey"></current-karat-detail>
+    </template>
+  </Card>
 </template>
 
 <script>
-import axios from "axios";
+import CurrentKaratDetail from "./CurrentKaratDetail.vue";
 
 export default {
-  name: "Karat",
+  components: {
+    "current-karat-detail": CurrentKaratDetail,
+  },
   data() {
     return {
-      karat: Array,
-      loading: false,
+      componentKey: 0,
     };
   },
-  created() {
-    this.getKarat();
-  },
   methods: {
-    async getKarat() {
-      this.loading = true;
-      await axios
-        .get("/karat", {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          this.karat = response.data;
-          this.loading = false;
-          console.log(response);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+    toggleReloadComponent() {
+      this.componentKey += 1;
     },
   },
 };
 </script>
 
 <style scoped>
-.grid-container {
-  display: grid;
-  grid-template-columns: auto auto;
-  justify-content: center;
+.button-standard {
+  height: 30px !important;
+  width: 30px !important;
+  margin-top: 3px !important;
 }
-
-.card {
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
-  padding: 20px;
-  margin: 10px;
-  width: 140px;
-  height: 130px;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/home/CurrentKaratDetail.vue b/src/components/home/CurrentKaratDetail.vue
new file mode 100644
index 0000000..3a3c53f
--- /dev/null
+++ b/src/components/home/CurrentKaratDetail.vue
@@ -0,0 +1,90 @@
+<template>
+  <div v-if="isLoading" class="fadein animation-duration-400">
+    <div class="d-flex justify-content-center">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  </div>
+  <div v-else>
+    <div v-if="responseData" class="fadein animation-duration-400">
+      <InlineMessage class="mb-2" severity="info">Kemaskini pada {{ updatedTime }}</InlineMessage>
+
+      <div class="overflow-x-scroll">
+        <table class="table table-bordered table-hover">
+          <tbody>
+            <tr class="table-light">
+              <td>Bil</td>
+              <td>Karat</td>
+              <td style="min-width: 100px">Harga</td>
+            </tr>
+            <tr v-for="(data, index) in listKarat" v-bind:key="data.id">
+              <td>{{ index + 1 }}</td>
+              <td>{{ data.karat }}</td>
+              <td>RM {{ data.harga2 }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div v-else>
+      <table class="table table-bordered table-hover">
+        <tbody>
+          <tr class="table-light">
+            <td scope="col">Bil</td>
+            <td scope="col">Karat</td>
+            <td scope="col">Harga</td>
+          </tr>
+          <tr>
+            <td colspan="5" class="text-center">Tiada Data</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      listKarat: Array,
+      updatedTime: String,
+      isLoading: false,
+      responseData: false,
+    };
+  },
+  created() {
+    this.getKarat();
+  },
+  methods: {
+    async getKarat() {
+      this.isLoading = true;
+      await axios
+        .get("/karat", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          console.log(response);
+          if (response.data.success == true) {
+            this.updatedTime = response.data.update_time;
+            this.listKarat = response.data.karat;
+            this.isLoading = false;
+            this.responseData = true;
+          } else {
+            this.isLoading = false;
+            this.responseData = false;
+          }
+          //
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/home/LelongNext.vue b/src/components/home/LelongNext.vue
index 13306bd..982f1bb 100644
--- a/src/components/home/LelongNext.vue
+++ b/src/components/home/LelongNext.vue
@@ -1,78 +1,53 @@
 <template>
-  <div
-    v-if="loading"
-    style="min-height: 20vh; display: grid; place-items: center"
-  >
-    <div class="spinner-border" role="status">
-      <span class="visually-hidden">Loading...</span>
-    </div>
-  </div>
-  <table v-else class="table table-bordered table-hover">
-    <thead class="table-body">
-      <tr>
-        <th>Bil</th>
-        <th>Cawangan</th>
-        <th>Tarikh</th>
-      </tr>
-    </thead>
-    <tbody v-if="responseData">
-      <tr v-for="(data, index) in response" :key="data.id">
-        <td>{{ index + 1 }}</td>
-        <td>{{ data.caw_name }}</td>
-        <td>{{ data.tarikh_lelong }}</td>
-      </tr>
-    </tbody>
-    <tbody v-else>
-      <tr>
-        <td colspan="4">Tiada Data</td>
-      </tr>
-    </tbody>
-  </table>
+  <Card>
+    <template #title
+      ><div
+        class="
+          flex
+          justify-content-between
+          flex-wrap
+          card-container
+          purple-container
+        "
+      >
+        <div class="font-normal">Lelongan Seterusnya</div>
+        <Button
+          class="button-standard p-button-rounded p-button-outlined"
+          icon="pi pi-refresh"
+          @click="toggleReloadComponent()"
+        /></div
+    ></template>
+    <template #content>
+      <lelong-next-detail v-bind:key="componentKey"></lelong-next-detail>
+    </template>
+  </Card>
 </template>
 
 <script>
-import axios from "axios";
+import LelongNextDetail from "./LelongNextDetail.vue";
 
 export default {
-  name: "Card",
-  props: {
-    msg: String,
-    masa: String,
+  components: {
+    "lelong-next-detail": LelongNextDetail,
   },
   data() {
     return {
-      response: Array,
-      cawangan: String,
       loading: false,
-      responseData: false,
+      componentKey: 0,
     };
   },
-  mounted: function () {
-    this.liveData();
-  },
   methods: {
-    liveData() {
-      this.loading = true;
-      axios
-        .get("/listcawlelongnext", {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          if (response.data.success == true) {
-            this.responseData = true;
-            this.response = response.data.lelong;
-            console.log(response.data);
-            this.loading = false;
-          } else {
-            this.loading = false;
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+    toggleReloadComponent() {
+      this.componentKey += 1;
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.button-standard {
+  height: 30px !important;
+  width: 30px !important;
+  margin-top: 3px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/LelongNextDetail.vue b/src/components/home/LelongNextDetail.vue
new file mode 100644
index 0000000..40f1938
--- /dev/null
+++ b/src/components/home/LelongNextDetail.vue
@@ -0,0 +1,84 @@
+<template>
+  <div v-if="isLoading" class="fadein animation-duration-400">
+    <div class="d-flex justify-content-center">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  </div>
+  <div v-else class="fadein animation-duration-400">
+    <div class="overflow-x-scroll">
+      <table
+        v-if="responseData"
+        class="table table-sm table-bordered table-hover"
+      >
+        <tbody>
+          <tr class="table-light">
+            <td>Bil</td>
+            <td style="min-width: 200px">Cawangan</td>
+            <td style="min-width: 120px">Tarikh</td>
+          </tr>
+          <tr v-for="(data, index) in response" :key="data.id">
+            <td>{{ index + 1 }}</td>
+            <td>{{ data.caw_name }}</td>
+            <td>{{ data.tarikh_lelong }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <table v-else class="table table-sm table-bordered table-hover">
+        <tbody>
+          <tr class="table-light">
+            <td>Bil</td>
+            <td>Cawangan</td>
+            <td>Tarikh</td>
+          </tr>
+          <tr>
+            <td colspan="4" class="text-center">Tiada Data</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      responseData: false,
+      response: Array,
+      isLoading: false,
+    };
+  },
+  mounted: function () {
+    this.liveData();
+  },
+  methods: {
+    liveData() {
+      this.isLoading = true;
+      axios
+        .get("/listcawlelongnext", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          console.log(response);
+          if (response.data.success == true) {
+            this.responseData = true;
+            this.response = response.data.lelong;
+            // console.log(response.data);
+            this.isLoading = false;
+          } else {
+            this.isLoading = false;
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/home/LelongToday.vue b/src/components/home/LelongToday.vue
index 1badad3..1c9c75c 100644
--- a/src/components/home/LelongToday.vue
+++ b/src/components/home/LelongToday.vue
@@ -1,88 +1,59 @@
 <template>
-  <div
-    v-if="loading"
-    style="min-height: 20vh; display: grid; place-items: center"
-  >
-    <div class="spinner-border" role="status">
-      <span class="visually-hidden">Loading...</span>
-    </div>
-  </div>
-  <div v-else>
-    <table class="table table-bordered table-hover">
-      <thead class="table-body">
-        <tr>
-          <th>Bil</th>
-          <th>Cawangan</th>
-          <th>Masa Mula</th>
-          <th>Masa Tamat</th>
-        </tr>
-      </thead>
-      <tbody v-if="responseData">
-        <tr v-for="(item, index) in response" :key="item.id">
-          <td>{{ index + 1 }}</td>
-          <td>{{ item.caw_name }}</td>
-          <td>{{ item.masamula_lelong }}</td>
-          <td>{{ item.masatamat_lelong }}</td>
-        </tr>
-      </tbody>
-      <tbody v-else>
-        <tr>
-          <td colspan="100">Tiada Data</td>
-        </tr>
-      </tbody>
-    </table>
-    <router-link v-bind:to="{name: 'list'}" class="btn btn-primary">Lihat Senarai</router-link>
-  </div>
+  <Card style="margin-bottom: 1em">
+    <template #title>
+      <div class="flex justify-content-between flex-wrap card-container">
+        <div class="font-normal">Lelongan Hari Ini : {{ date }}</div>
+        <Button
+          class="button-standard p-button-rounded p-button-outlined"
+          icon="pi pi-refresh"
+          @click="toggleReloadComponent()"
+        />
+      </div>
+    </template>
+    <template #content>
+      <lelong-today-detail v-bind:key="componentKey"></lelong-today-detail>
+    </template>
+  </Card>
 </template>
 
 <script>
-import axios from "axios";
+import LelongTodayDetail from "./LelongTodayDetail.vue";
 
 export default {
-  name: "Card",
-  props: {
-    msg: String,
-    masa: String,
+  components: {
+    "lelong-today-detail": LelongTodayDetail,
   },
   data() {
     return {
-      response: Array,
-      cawangan: String,
-      loading: false,
-      responseData: false,
+      date: String,
+      componentKey: 0,
     };
   },
-  mounted: function () {
-    this.liveData();
+  created() {
+    this.getDate();
   },
+
   methods: {
-    liveData() {
-      this.loading = true;
-      axios
-        .get("/listcawlelongtoday", {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          if (response.data.success == true) {
-            this.responseData = true;
-            this.response = response.data.lelong;
-            console.log(response.data);
-            localStorage.setItem(
-              "lelong_id",
-              response.data.lelong[0].lelong_id
-            );
-            this.loading = false;
-          } else {
-            this.loading = false;
-            console.log(response.data.success);
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+    toggleReloadComponent() {
+      this.componentKey += 1;
+    },
+    getDate() {
+      var today = new Date();
+      var dd = String(today.getDate()).padStart(2, "0");
+      var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
+      var yyyy = today.getFullYear();
+
+      today = yyyy + "-" + mm + "-" + dd;
+      this.date = today;
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.button-standard {
+  height: 30px !important;
+  width: 30px !important;
+  margin-top: 3px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/LelongTodayDetail.vue b/src/components/home/LelongTodayDetail.vue
new file mode 100644
index 0000000..1d83c1e
--- /dev/null
+++ b/src/components/home/LelongTodayDetail.vue
@@ -0,0 +1,95 @@
+<template>
+  <div v-if="isLoading" class="fadein animation-duration-400">
+    <div class="d-flex justify-content-center">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  </div>
+  <div v-else class="fadein animation-duration-300">
+    <div v-if="responseData">
+      <div class="overflow-x-scroll">
+        <table class="table table-sm table-bordered table-hover">
+          <tbody>
+            <tr class="table-light">
+              <td>Bil</td>
+              <td style="min-width: 200px">Cawangan</td>
+              <td style="min-width: 120px">Masa Mula</td>
+              <td style="min-width: 120px">Masa Tamat</td>
+            </tr>
+            <tr v-for="(item, index) in response" :key="item.id">
+              <td>{{ index + 1 }}</td>
+              <td>{{ item.caw_name }}</td>
+              <td>{{ item.masamula_lelong }}</td>
+              <td>{{ item.masatamat_lelong }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Button label="Lihat Senarai" class="p-button-sm" v-on:click="toList()" />
+    </div>
+    <div v-else>
+      <table class="table table-sm table-bordered table-hover">
+        <tbody>
+          <tr class="table-light">
+            <td>Bil</td>
+            <td>Cawangan</td>
+            <td>Masa Mula</td>
+            <td>Masa Tamat</td>
+          </tr>
+          <tr>
+            <td colspan="100" class="text-center">Tiada Data</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      responseData: false,
+      isLoading: false,
+      response: Array,
+    };
+  },
+  mounted: function () {
+    this.liveData();
+  },
+  methods: {
+    liveData() {
+      this.isLoading = true;
+      axios
+        .get("/listcawlelongtoday", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          if (response.data.success == true) {
+            this.responseData = true;
+            this.response = response.data.lelong;
+            localStorage.setItem(
+              "lelong_id",
+              response.data.lelong[0].lelong_id
+            );
+            this.isLoading = false;
+          } else {
+            this.isLoading = false;
+            console.log(response.data.success);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    toList() {
+      this.$router.push({ name: "list" });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/home/ResultNotification.vue b/src/components/home/ResultNotification.vue
index 0e3fd31..54555df 100644
--- a/src/components/home/ResultNotification.vue
+++ b/src/components/home/ResultNotification.vue
@@ -1,68 +1,24 @@
 <template>
-  <base-card
-    ><div>
-      <h4 class="text-success">Tahniah! Bidaan anda menang.</h4>
-      <h5 class="text-success">
-        Sila lihat butiran dihalaman
-        <span
-          ><router-link v-bind:to="{ name: 'result' }"
-            >keputusan</router-link
-          ></span
-        >
-      </h5>
-      <p class="fst-italic">
-        <small>*Bayaran mesti diselesaikan sebelum 3:30pm.</small>
-      </p>
-    </div></base-card
+  <Message severity="warn" :closable="false"
+    >Tahniah, bidaan anda menang!
+    <a class="ml-1 text-blue" @click="toResult()" href="#"
+      ><span class="underline">Selesaikan pembayaran sekarang.</span></a
+    ></Message
   >
 </template>
 
 <script>
-import axios from "axios";
-import lelongId from "@/store/modules/lelongId";
-
 export default {
   data() {
-    return {
-      // form: {
-      //   lelong_id: 4,
-      //   user_id: 9
-      // }
-      lelongId: 0,
-    };
-  },
-  mounted: function () {
-    // this.resultStatus();
+    return {};
   },
+  mounted: function () {},
   methods: {
     resultStatus() {
-      // console.log(localStorage.getItem("lelong_id"));
-      if (localStorage.getItem("lelong_id" == null)) {
-        this.lelongId = 0;
-      } else {
-        this.lelongId = localStorage.getItem("lelong_id");
-      }
-
-      this.loading = true;
-      axios
-        .get(
-          "/resultStatus/" + localStorage.getItem("id") + "/" + this.lelongId,
-          {
-            headers: {
-              Authorization: "Bearer " + localStorage.getItem("token"),
-            },
-          }
-        )
-        .then((response) => {
-          console.log(response);
-          if (response.data.success == true) {
-          } else {
-          }
-        })
-        .catch((error) => {
-          // this.loading = false;
-          console.log(error);
-        });
+      // "/resultStatus/" + localStorage.getItem("id") + "/" + this.lelongId,
+    },
+    toResult() {
+      this.$router.push({ name: "result" });
     },
   },
 };
diff --git a/src/components/home/TheHome.vue b/src/components/home/TheHome.vue
index 2370f76..ae3629f 100644
--- a/src/components/home/TheHome.vue
+++ b/src/components/home/TheHome.vue
@@ -1,35 +1,21 @@
 <template>
   <the-template>
-    <div class="container">
-      <div class="row mb-3 justify-content-center">
-        <div class="col-8">
-          <!-- <result-notification></result-notification> -->
-        </div>
+    <div class="grid">
+      <div class="col-12">
+        <result-notification></result-notification>
       </div>
-      <div class="row">
-        <div class="col-md-8">
-          <h4>Lelongan Hari Ini: {{ date }}</h4>
-          <base-card>
-            <lelong-today></lelong-today>
-          </base-card>
-          <h4 class="mt-4">Lelongan Seterusnya</h4>
-          <base-card>
-            <lelong-next></lelong-next>
-          </base-card>
-        </div>
-        <div class="col-md-4">
-          <div class="col">
-            <h4 class="ps-3">Harga Emas Lelongan</h4>
-            <current-karat></current-karat>
-          </div>
-        </div>
+      <div class="col-12 lg:col-7">
+        <lelong-today></lelong-today>
+        <lelong-next></lelong-next>
+      </div>
+      <div class="col-12 lg:col-5">
+        <current-karat></current-karat>
       </div>
     </div>
   </the-template>
 </template>
 
 <script>
-import axios from "axios";
 import LelongToday from "./LelongToday.vue";
 import LelongNext from "./LelongNext.vue";
 import CurrentKarat from "./CurrentKarat.vue";
@@ -42,28 +28,6 @@ export default {
     "current-karat": CurrentKarat,
     "result-notification": ResultNotification,
   },
-  name: "Karat",
-  data() {
-    return {
-      karat: Array,
-      loading: false,
-      date: "",
-    };
-  },
-  created() {
-    this.getDate();
-  },
-  methods: {
-    getDate() {
-      var today = new Date();
-      var dd = String(today.getDate()).padStart(2, "0");
-      var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
-      var yyyy = today.getFullYear();
-
-      today = yyyy + "-" + mm + "-" + dd;
-      this.date = today;
-    },
-  },
 };
 </script>
 
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index e24dcf2..3f61387 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -1,69 +1,201 @@
 <template>
-  <header class="header">
-    <div class="company-title" type="button" v-on:click="toHome()">
-      <div class="logo-title">eLelong</div>
-      <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
-    </div>
-    <nav class="main-nav">
-      <ul class="main-nav-list">
-        <li>
-          <router-link class="main-nav-link" v-bind:to="{ name: 'home' }"
-            >Utama</router-link
-          >
-        </li>
-        <li>
-          <router-link class="main-nav-link" v-bind:to="{ name: 'list' }"
-            >Senarai</router-link
-          >
-        </li>
-        <li>
-          <router-link class="main-nav-link" v-bind:to="{ name: 'cart' }"
-            >Troli</router-link
-          >
-        </li>
-        <li>
-          <router-link class="main-nav-link" v-bind:to="{ name: 'bid-record' }"
-            >Rekod</router-link
-          >
-        </li>
-        <li>
-          <router-link class="main-nav-link" v-bind:to="{ name: 'result' }"
-            >Keputusan</router-link
-          >
-        </li>
-        <li>
-          <router-link class="main-nav-link" v-bind:to="{ name: 'login' }"
-            >Login</router-link
-          >
-        </li>
-      </ul>
-    </nav>
-    <div class="profile-title">
-      <div class="dropdown">
-        <div
-          class="dropdown-toggle"
-          type="button"
-          data-bs-toggle="dropdown"
-          aria-expanded="false"
+  <Sidebar v-model:visible="visibleRight" position="right">
+    <div class="grid">
+      <div class="col-12">
+        <div class="text-center">Hai, {{ 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">
+        <a
+          class="main-nav-link main-nav-link-sidebar"
+          v-on:click="doLogout()"
+          href="#"
+          >Loq Keluar</a
         >
-          <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>
-  </header>
+  </Sidebar>
+  <div class="card hidden lg: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">
+        <div class="company-title" type="button" v-on:click="toHome()">
+          <div class="logo-title">eLelong</div>
+          <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
+        </div>
+      </div>
+      <div class="flex align-items-center justify-content-center">
+        <nav class="main-nav hidden lg:flex">
+          <ul class="main-nav-list">
+            <li>
+              <router-link class="main-nav-link" v-bind:to="{ name: 'home' }"
+                >Utama</router-link
+              >
+            </li>
+            <li>
+              <router-link class="main-nav-link" v-bind:to="{ name: 'list' }"
+                >Senarai</router-link
+              >
+            </li>
+            <li>
+              <router-link class="main-nav-link" v-bind:to="{ name: 'cart' }"
+                >Troli</router-link
+              >
+            </li>
+            <li>
+              <router-link
+                class="main-nav-link"
+                v-bind:to="{ name: 'bid-record' }"
+                >Rekod</router-link
+              >
+            </li>
+            <li>
+              <router-link class="main-nav-link" v-bind:to="{ name: 'result' }"
+                >Keputusan</router-link
+              >
+            </li>
+            <!-- <li>
+              <router-link class="main-nav-link" v-bind:to="{ name: 'login' }"
+                >Login</router-link
+              >
+            </li> -->
+          </ul>
+        </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 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="card sticky 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">
+        <div class="company-title" type="button" v-on:click="toHome()">
+          <div class="logo-title">eLelong</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"
+          @click="visibleRight = true"
+        ></i>
+      </div>
+    </div>
+    <div>
+      <div
+      class="
+        flex
+        justify-content-between
+        px-3
+        md:px-6
+        h-2rem
+        flex-wrap
+        bg-red-500
+      "
+    >
+    </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -72,6 +204,7 @@ export default {
   data() {
     return {
       username: localStorage.getItem("username"),
+      visibleRight: false,
     };
   },
   methods: {
@@ -138,6 +271,20 @@ router-link:hover {
   color: blue;
 } */
 
+@media screen and (max-width: 769px) {
+  .header {
+    padding: 0 1rem;
+  }
+}
+
+.main-color {
+  background-color: #1e417b;
+}
+
+.border-none {
+  border: none;
+}
+
 .header {
   display: flex;
   justify-content: space-between;
@@ -191,6 +338,10 @@ router-link:hover {
   color: #fff;
 }
 
+.main-nav-link-sidebar:hover {
+  color: #1e417b !important;
+}
+
 a.router-link-exact-active {
   background: #bbc2d0;
   color: #1d3461;
diff --git a/src/components/layouts/TheTemplate.vue b/src/components/layouts/TheTemplate.vue
index 98c0007..7a90898 100644
--- a/src/components/layouts/TheTemplate.vue
+++ b/src/components/layouts/TheTemplate.vue
@@ -30,6 +30,7 @@ export default {
   /* overflow: hidden; */
   padding: 0 0 100px;
   min-height: 100vh;
+  background: #eff3f8;
 }
 
 .footer {
diff --git a/src/main.js b/src/main.js
index d06c35a..e6ff4a3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,32 +8,50 @@ import './interceptors/axios'
 import "bootstrap/dist/css/bootstrap.css"
 import "bootstrap/dist/js/bootstrap.js"
 import 'bootstrap-icons/font/bootstrap-icons.css'
-import VueSweetalert2 from 'vue-sweetalert2';
-import 'sweetalert2/dist/sweetalert2.min.css';
+// import VueSweetalert2 from 'vue-sweetalert2';
+// import 'sweetalert2/dist/sweetalert2.min.css';
 import PrimeVue from 'primevue/config';
 
 import '../public/themes/lara-light-blue/theme.css'
 import 'primevue/resources/primevue.min.css'
 import 'primeicons/primeicons.css'
 import 'primeflex/primeflex.css'
+import ToastService from 'primevue/toastservice';
 
+import Card from 'primevue/card';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
 import Button from 'primevue/button';
+import ProgressBar from 'primevue/progressbar';
+import Toast from 'primevue/toast';
+import Sidebar from 'primevue/sidebar';
+import Message from 'primevue/message';
+import InlineMessage from 'primevue/inlinemessage';
 
 
 import TheTemplate from './components/layouts/TheTemplate.vue'
 import BaseCard from './components/base/BaseCard.vue'
 import TermsAndConditions from './components/authentication/TermsAndConditions.vue'
 
-// const app = createApp(App);
-const app = createApp(Master);
+const app = createApp(App);
+// const app = createApp(Master);
 
 app.component('the-template', TheTemplate);
 app.component('base-card', BaseCard);
 app.component('terms-and-conditions', TermsAndConditions);
 
+app.component('Card', Card);
 app.component('Button', Button);
+app.component('DataTable', DataTable);
+app.component('Column', Column);
+app.component('ProgressBar', ProgressBar);
+app.component('Toast', Toast);
+app.component('Sidebar', Sidebar);
+app.component('Message', Message);
+app.component('InlineMessage', InlineMessage);
 
-app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).mount('#app');
+// app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).mount('#app');
+app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');
 
 // createApp(App).use(router).use(store).mount('#app')
 // createApp(Master).use(router).use(store).mount('#app')