diff --git a/src/pages/ChapterList.vue b/src/pages/ChapterList.vue
index 90dfba8..af123cc 100644
--- a/src/pages/ChapterList.vue
+++ b/src/pages/ChapterList.vue
@@ -79,7 +79,7 @@ export default {
       mangaTitle: "Loading...",
       nextUrl: null,
       isLoadingNext: false,
-      scrollThreshold: 400, // jarak px dari bawah sebelum trigger load berikutnya
+      scrollThreshold: 400,
     }
   },
   methods: {
@@ -109,15 +109,10 @@ export default {
           this.nextUrl = null
         }
 
-        // ambil nama manga
         if (this.pages.length > 0 && this.pages[0].chapter?.manga?.title) {
           this.mangaTitle = this.pages[0].chapter.manga.title
         }
-
-        this.pages.forEach((page) => {
-          console.log("Pages :" + JSON.stringify(page))
-        });
-        
+        console.log("Pages :" + JSON.stringify(this.pages))
       } catch (err) {
         console.error("Gagal memuat halaman:", err)
       } finally {
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 7a6ee0b..92584b5 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -111,18 +111,18 @@
                 'text-yellow-600': mission.userStatus === 'in_progress',
                 'text-gray-500': mission.userStatus === 'not_started'
               }">
-              Status: {{ mission.userStatus }}
+              Status:  mission.userStatus 
             </p>
             <div class="flex items-center gap-4 text-xs text-gray-700">
               <span class="flex items-center gap-1">
                 <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
                   <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/>
                 </svg>
-                {{ timeLeft(mission.date_valid, mission.time_to_valid) }}
+                 
             </span>
               <span class="flex items-center gap-1">
                 <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
-                +{{ mission.coin }} koin
+                + {{ mission.coin }} koin
               </span>
               <span class="flex items-center gap-1">
                 <svg class="w-4 h-4 text-green-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
@@ -181,7 +181,7 @@
                 'text-gray-500': mission.userStatus === 'not_started'
               }"
             >
-              Status: {{ mission.userStatus }}
+              <!-- Status: {{ mission.userStatus }} -->
             </p>
             <div class="flex items-center gap-4 text-xs text-gray-700 pt-2">
               <span class="flex items-center gap-1">
@@ -190,7 +190,7 @@
                     d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"
                   />
                 </svg>
-                {{ timeLeft(mission.date_from,mission.date_to, mission.time_from_valid, mission.time_to_valid) }}
+                {{ timeLeftDH(mission.date_time_from_valid,mission.date_time_to_valid) }}
               </span>
 
               <span class="flex items-center gap-1">
@@ -222,7 +222,7 @@
             <div class="flex items-center gap-4 text-xs text-gray-700">
               <button
                 v-if="mission.userStatus !== 'completed'"
-                :disabled="!isMissionActive(mission.date_from, mission.time_from_valid)"
+                :disabled="!isMissionActive(mission.date_time_from_valid, mission.date_time_to_valid)"
                 class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold hover:bg-green-700 transition"
                 @click="handleMissionClick(mission)"
               >
@@ -362,7 +362,7 @@ export default {
       isDone : true,
       contents : getContent(),
       missions : [],
-      now : new Date(),
+      now : Date.now(),
       timer: null,
       misi:[],
       logs:[],
@@ -383,11 +383,18 @@ export default {
       this.selectedProfile = profile;
       this.showModal = false;
     },
-    isMissionActive(dateFrom, timeFrom) {
-      if (!dateFrom || !timeFrom) return false;
-      const start = new Date(`${dateFrom}T${timeFrom}`);
-      const now = this.now ? new Date(this.now) : new Date();
-      return now >= start;
+    // isMissionActive(dateFrom, timeFrom) {
+    //   if (!dateFrom || !timeFrom) return false;
+    //   const start = new Date(`${dateFrom}T${timeFrom}`);
+    //   const now = this.now ? new Date(this.now) : new Date();
+    //   return now >= start;
+    // },
+    isMissionActive(from, to) {
+      if (!from || !to) return false;
+      const start = new Date(from);
+      const end = new Date(to);
+      const now = new Date();
+      return now >= start && now <= end;
     },
     async getMission() {
       const res = await getMissions();
@@ -398,19 +405,39 @@ export default {
       const resLog = await getMissionLogs();
       this.logs = resLog.results;
     },
-    timeLeft2(dateValid, timeToValid) {
-      if (!dateValid || !timeToValid) return "—";
-      try {
-        const now = new Date(this.now);
-        const target = new Date(`${dateValid}T${timeToValid}`);
-        const diffMs = target - now;
-        if (diffMs <= 0) return "Waktu habis";
+    timeLeftDH(dateValidFrom, dateValidTo) {
+      if (!dateValidFrom || !dateValidTo) return "—";
 
-        const totalMinutes = Math.floor(diffMs / (1000 * 60));
-        const hours = Math.floor(totalMinutes / 60);
-        const minutes = totalMinutes % 60;
-        return `${hours} jam ${minutes} menit`;
+      try {
+        const start = new Date(dateValidFrom);
+        const end = new Date(dateValidTo);     // Already UTC-aware
+        const now = new Date(); 
+
+        const diffToStart = start - now;
+        const diffToEnd = end - now;
+
+        console.log("diffToStart:", diffToStart, "diffToEnd:", diffToEnd);
+
+        const pad = (n) => String(n).padStart(2, "0")
+        if (diffToStart > 0) {
+          const totalSeconds = Math.floor(diffToStart / 1000);
+          const hours = Math.floor(totalSeconds / 3600);
+          const minutes = Math.floor((totalSeconds % 3600) / 60);
+          const seconds = totalSeconds % 60;
+          return `⏳ ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+        }
+
+        // 🟢 During event
+        if (diffToEnd > 0) {
+          const totalSeconds = Math.floor(diffToEnd / 1000);
+          const hours = Math.floor(totalSeconds / 3600);
+          const minutes = Math.floor((totalSeconds % 3600) / 60);
+          const seconds = totalSeconds % 60;
+          return `🕓 ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+        }
+        return "❌ Waktu habis";
       } catch (e) {
+        console.error("timeLeftDH error:", e);
         return "—";
       }
     },
@@ -462,7 +489,6 @@ export default {
 
         return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
       }
-
       // ⛔ CASE 3: After end
       return "❌ Waktu habis";
     },