diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index fe94e60..9bc502d 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -1,5 +1,6 @@
 <template>
   <!-- Navbar for laptop screen size (width>992px) -->
+  <Toast :breakpoints="{ '500px': { width: '100%', right: '0', left: '0' } }" />
   <div class="card lg:flex hidden border-none">
     <div
       class="
@@ -104,11 +105,11 @@
         ></i>
       </div>
     </div>
-    <div>
+    <!-- <div>
       <div class="flex justify-content-center h-2rem bg-red-500">
         Countdown 00:00:00
       </div>
-    </div>
+    </div> -->
   </div>
   <Sidebar v-model:visible="visibleRight" position="right">
     <div class="grid">
@@ -185,8 +186,12 @@ export default {
     return {
       username: localStorage.getItem("username"),
       visibleRight: false,
+      lelongOnline: "",
     };
   },
+  mounted: function () {
+    this.getLelongOnline();
+  },
   methods: {
     doLogout() {
       axios
@@ -213,6 +218,30 @@ export default {
     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);
+        });
+    },
   },
 };
 </script>