diff --git a/package-lock.json b/package-lock.json
index 5148ac9..2cdec48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^1.12.2",
-        "core-js": "^3.8.3",
+        "core-js": "^3.46.0",
         "pinia": "^3.0.3",
         "primeicons": "^7.0.0",
         "vue": "^3.2.13",
@@ -4973,9 +4973,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.45.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.1.tgz",
-      "integrity": "sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==",
+      "version": "3.46.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.46.0.tgz",
+      "integrity": "sha512-vDMm9B0xnqqZ8uSBpZ8sNtRtOdmfShrvT6h2TuQGLs0Is+cR0DYbj/KWP6ALVNbWPpqA/qPLoOuppJN07humpA==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
diff --git a/package.json b/package.json
index e22c83b..b59a1d9 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.12.2",
-    "core-js": "^3.8.3",
+    "core-js": "^3.46.0",
     "pinia": "^3.0.3",
     "primeicons": "^7.0.0",
     "vue": "^3.2.13",
diff --git a/src/pages/ChapterList.vue b/src/pages/ChapterList.vue
index 6004550..90dfba8 100644
--- a/src/pages/ChapterList.vue
+++ b/src/pages/ChapterList.vue
@@ -46,7 +46,7 @@
           class="flex flex-col items-center"
         >
           <img
-            :src="page.image"
+            :src="page.media"
             :alt="'Halaman ' + (index + 1)"
             class="w-full rounded-xl shadow-lg border border-white/40 object-contain"
           />
@@ -68,6 +68,7 @@
 <script>
 import router from '@/router'
 import api from '@/util/api'
+// import { forEach } from 'core-js/core/array';
 
 export default {
   name: "MangaPageScrollReader",
@@ -112,7 +113,11 @@ export default {
         if (this.pages.length > 0 && this.pages[0].chapter?.manga?.title) {
           this.mangaTitle = this.pages[0].chapter.manga.title
         }
-        console.log(this.pages)
+
+        this.pages.forEach((page) => {
+          console.log("Pages :" + JSON.stringify(page))
+        });
+        
       } catch (err) {
         console.error("Gagal memuat halaman:", err)
       } finally {
diff --git a/src/pages/Chapters.vue b/src/pages/Chapters.vue
index e1e36bc..12752a0 100644
--- a/src/pages/Chapters.vue
+++ b/src/pages/Chapters.vue
@@ -46,7 +46,7 @@
         <!-- Manga Cover -->
         <div class="relative" @click="toPage(chapter.id,chapter.chapter)">
           <img
-            :src="images.find(image => image.id === chapter.id).image"
+            :src="chapter.manga?.featured_image"
             :alt="chapter.status"
             class="w-full h-48 object-cover rounded-xl group-hover:scale-105 transition-transform duration-500"
           />
@@ -95,7 +95,7 @@ export default {
       router.back();
     },
     toPage(manga_id,chapter_id) {
-      router.push(`/entertainment/manga/${manga_id}/chapters/${chapter_id}/`);
+      router.push(`/entertainment/manga/${manga_id}/chapters/${chapter_id}/pages`);
     },
     async loadContent() {
       const res = await getChapters(this.id);
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index c0b4d2b..7a6ee0b 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -183,7 +183,6 @@
             >
               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">
                 <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
@@ -191,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_valid, mission.time_to_valid) }}
+                {{ timeLeft(mission.date_from,mission.date_to, mission.time_from_valid, mission.time_to_valid) }}
               </span>
 
               <span class="flex items-center gap-1">
@@ -205,7 +204,6 @@
                 </svg>
                 +{{ mission.coin }} koin
               </span>
-
               <span class="flex items-center gap-1">
                 <svg
                   class="w-4 h-4 text-green-600 transform rotate-180"
@@ -224,6 +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)"
                 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)"
               >
@@ -330,8 +329,11 @@
 </template>
 
 <script>
+// import { computed } from "vue"
 import { getContent } from '@/services/content';
 import { getMissions,getMissionLogs, createMissionLog } from '@/services/missions';
+import { useAuthStore } from '@/stores/auth'
+
 export default {
   name: "App",
   data() {
@@ -363,7 +365,9 @@ export default {
       now : new Date(),
       timer: null,
       misi:[],
-      logs:[]
+      logs:[],
+      authStore : useAuthStore(),
+      // currentUser : computed(() => this.authStore.currentUser)
     };
   },
   methods: {
@@ -379,6 +383,12 @@ 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;
+    },
     async getMission() {
       const res = await getMissions();
       this.missions = res.results;
@@ -404,13 +414,14 @@ export default {
         return "—";
       }
     },
-    timeLeft(dateValid, timeToValid) {
-      if (!dateValid || !timeToValid) return "—";
-
-      const now = new Date(this.now);
-      const target = new Date(`${dateValid}T${timeToValid}`);
-      const diffMs = target - now;
+    timeLeft3(dateValidFrom,dateValidTo, timeValidFrom, timeToValid) {
+      console.log(dateValidFrom,timeValidFrom,timeValidFrom,timeToValid)
+      if (!dateValidFrom || !timeValidFrom || !dateValidFrom || !timeToValid) return "—";
 
+      const validDate = new Date(`${dateValidFrom}T${timeValidFrom}`);
+      const target = new Date(`${dateValidTo}T${timeToValid}`);
+      const diffMs = target - validDate;
+      console.log("Sisa Waktu:" + diffMs)
       if (diffMs <= 0) return "Waktu habis";
 
       const totalSeconds = Math.floor(diffMs / 1000);
@@ -422,6 +433,39 @@ export default {
 
       return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
     },
+    timeLeft(dateFrom, dateTo, timeFrom, timeTo) {
+      if (!dateFrom || !timeFrom || !dateTo || !timeTo) return "—";
+
+      // const now = new Date();
+      const start = new Date(`${dateFrom}T${timeFrom}`);
+      const end = new Date(`${dateTo}T${timeTo}`);
+      const current = this.now;
+
+      const pad = (num) => String(num).padStart(2, "0");
+      const diffToStart = start - current;
+      const diffToEnd = end - current;
+
+      // 🕰️ CASE 1: Before start
+      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)}`;
+      }
+      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)}`;
+      }
+
+      // ⛔ CASE 3: After end
+      return "❌ Waktu habis";
+    },
     downtimeHours(from, to) {
       if (!from || !to) return '-';
       const [fh, fm] = from.split(':').map(Number);
@@ -464,7 +508,7 @@ export default {
       }
       if (mission.userStatus === 'completed') return;
       if (mission.userStatus === 'not_started') {
-        this.startMission(mission);
+        // this.startMission(mission);
       }
       if (mission.task === 'scan-qr') {
         console.log(mission)
@@ -483,9 +527,13 @@ export default {
     },
 
     async startMission(mission) {
+      if (!mission || !mission.id) {
+        console.error("Invalid mission", mission);
+        return;
+      }
       await createMissionLog({
         mission: mission.id,
-        user_id: this.currentUser.id,
+        user_id: this.currentUser?.value?.id,
         status: 'in_progress',
         coin: mission.coin,
         point: mission.point
@@ -505,10 +553,15 @@ export default {
   beforeUnmount() {
     clearInterval(this.timer);
   },
+  computed: {
+    currentUser() {
+      return this.authStore.currentUser;
+    }
+  }
 }; 
 </script>
 <script setup>
-import { useAuthStore } from '@/stores/auth'
+// import { useAuthStore } from '@/stores/auth'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const auth = useAuthStore()
diff --git a/src/pages/MissionPage.vue b/src/pages/MissionPage.vue
index ec9d2dc..aa02e7e 100644
--- a/src/pages/MissionPage.vue
+++ b/src/pages/MissionPage.vue
@@ -1,4 +1,17 @@
 <template>
+  <!-- Header Section -->
+    <div class="w-full px-6 py-4 flex items-center justify-between backdrop-blur-md bg-white/30 border-b border-emerald-100 z-20">
+      <!-- Back Button -->
+      <button
+        @click="goBack"
+        class="flex items-center gap-2 text-emerald-600 hover:text-emerald-800 transition-colors"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+        <span class="font-semibold">Kembali</span>
+      </button>
+    </div>
   <div
     class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-teal-100 to-lime-200 p-6"
   >
@@ -111,8 +124,8 @@
   import { QrcodeStream } from "vue-qrcode-reader"
   import api from "@/util/api"
   import { useRoute } from "vue-router"
-  import { createMissionLog } from '@/services/missions';
-  import { useAuthStore } from '@/stores/auth'
+  // import { createMissionLog } from '@/services/missions';
+  // import { useAuthStore } from '@/stores/auth'
 
   const mission = ref({
     id: 1,
@@ -133,8 +146,12 @@
   const scanning = ref(false)
   const detectedOnce = ref(false)
   const router = useRoute();
-  const authStore = useAuthStore()
-  const currentUser = computed(() => authStore.currentUser)
+  // const authStore = useAuthStore()
+  // const currentUser = computed(() => authStore.currentUser)
+
+  function goBack() {
+      window.history.back('/mission/missions');
+  }
 
   onMounted(async () => {
     if(router.query.mission){
@@ -224,7 +241,7 @@
       //   data: result,
       //   completed_at: new Date().toISOString(),
       // })
-      this.startMission(data={
+      this.startMission({
         mission: mission.value.id,
         user_id: user_id,
         type: "scan-qr",
@@ -281,18 +298,22 @@
     alert("🎉 Misi selesai! Semua task telah disimpan.")
   }
 
-  async function startMission(mission) {
-    console.log("mission: ", mission)
-    await createMissionLog({
-      mission: mission.id,
-      user_id: currentUser.id,
-      status: 'in_progress',
-      coin: mission.coin,
-      point: mission.point
-    });
+  // async function startMission(mission) {
+  //   if (!mission || !mission.id) {
+  //     console.error("⚠️ Invalid mission:", mission);
+  //     return;
+  //   }
+  //   console.log("mission: ", mission)
+  //   await createMissionLog({
+  //     mission: mission.id,
+  //     user_id: currentUser.id,
+  //     status: 'in_progress',
+  //     coin: mission.coin,
+  //     point: mission.point
+  //   });
 
-    mission.userStatus = 'in_progress';
-  }
+  //   mission.userStatus = 'in_progress';
+  // }
 </script>
 
 <style scoped>
diff --git a/src/router/index.js b/src/router/index.js
index 68ed33d..c1c3ba7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -28,7 +28,7 @@ const routes = [
     })
   },
   { path: '/entertainment/manga/:manga_id/chapters/:chapter_id/', name:'manga-list', component:ChapterListPage, props:true},
-
+  { path: '/entertainment/manga/:manga_id/chapters/:chapter_id/pages', name:'manga-read', component:ChapterListPage, props:true},
   { path:'/mission/quest/:id/missions', name: 'quest-missions', component:MissionPage}
 ]
 
diff --git a/src/services/manga.js b/src/services/manga.js
index 18b86fe..91f936e 100644
--- a/src/services/manga.js
+++ b/src/services/manga.js
@@ -9,4 +9,8 @@ export const getChapters = async(id) => {
 
 export const getMangaByChapter = async(manga_id, chapter_id) => {
     return await api.get(`/entertainment/manga/${manga_id}/chapters/${chapter_id}/`).then((res) => res.data);
-};
\ No newline at end of file
+};
+
+export const getMangaByChapterPages = async (manga_id, chapter_id) =>{
+    return await api.get(`/entertainment/manga/${manga_id}/chapters/${chapter_id}/pages`).then((res) => res.data);
+}
\ No newline at end of file