diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4f4fa95..28805d8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,34 +8,55 @@ const storyService = new StoryService();
 // Tunggu hingga cerita diambil
 await storyService.fetchStories();
 
-const randomSlug = storyService.getRandomSlug();
-const randomStory = randomSlug ? storyService.getStoryBySlug(randomSlug) : undefined;
+const now = new Date();
+const today = now.toISOString().split('T')[0];
+
+let dailyStory;
+const storedDate = Astro.cookies.get('dailyStoryDate')?.value;
+let storedSlug = Astro.cookies.get('dailyStorySlug')?.value;
+
+// Cek apakah ini hari baru atau tidak ada slug yang tersimpan
+if (storedDate !== today || !storedSlug) {
+    // Jika setelah jam 9 pagi, ambil cerita acak baru
+    if (now.getHours() >= 9) {
+        storedSlug = storyService.getRandomSlug();
+        Astro.cookies.set('dailyStoryDate', today, { path: '/' });
+        Astro.cookies.set('dailyStorySlug', storedSlug || '', { path: '/' });
+    } else if (!storedSlug) {
+        // Jika sebelum jam 9 pagi dan tidak ada slug tersimpan, ambil yang acak
+        storedSlug = storyService.getRandomSlug();
+        Astro.cookies.set('dailyStorySlug', storedSlug || '', { path: '/' });
+    }
+    // Jika sebelum jam 9 pagi dan ada slug tersimpan, gunakan yang tersimpan
+}
+
+dailyStory = storedSlug ? storyService.getStoryBySlug(storedSlug) : undefined;
 ---
 
 <MainLayout title="Mops">	
 	<div class="max-w-3xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
 		<div class="max-w-2xl">  		
 			<!-- Content -->
-			{randomStory ? (
+			{dailyStory ? (
 			<div class="space-y-5 md:space-y-8">
 				<blockquote class="text-center p-4 sm:px-7">
 					<h2 class="text-xl font-medium text-gray-800 md:text-2xl md:leading-normal xl:text-2xl xl:leading-normal dark:text-neutral-200">
-						{randomStory.title}
+						{dailyStory.title}
 					</h2>
 					<p class="mt-5 text-sm text-gray-800 dark:text-neutral-200">
-						Hari ini, {new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
+						Hari ini, {now.toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
 					</p>
 				</blockquote>
 			
 				<div class="space-y-3 relative border-s-4 ps-4 sm:ps-6 dark:border-neutral-700">     
 					<p class="text-sm text-gray-800 dark:text-neutral-200">
-					{randomStory.scenes[0]?.content}
+					{dailyStory.scenes[0]?.content}
 					</p>
 				</div>
 			
 				{/* <!-- List --> */}
 				<div class="space-y-6">
-					{randomStory.scenes.slice(1).map((scene, index) => (
+					{dailyStory.scenes.slice(1).map((scene, index) => (
 					<dl class="flex flex-col sm:flex-row gap-1">
 						{scene.type === 'dialogue' && (
 						<>
@@ -55,7 +76,7 @@ const randomStory = randomSlug ? storyService.getStoryBySlug(randomSlug) : undef
 				{/* <!-- End List --> */}
 				</div>
 			) : (
-				<p>No random story available</p>
+				<p>No daily story available</p>
 			)}
 			<!-- End Content -->