diff --git a/app/src/components/StoriesTab/StoryList.tsx b/app/src/components/StoriesTab/StoryList.tsx
index 64719257..4222a800 100644
--- a/app/src/components/StoriesTab/StoryList.tsx
+++ b/app/src/components/StoriesTab/StoryList.tsx
@@ -1,5 +1,5 @@
 import { BookOpen, MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -62,6 +62,13 @@ export function StoryList() {
   const [newStoryDescription, setNewStoryDescription] = useState('');
   const { toast } = useToast();
 
+  // Auto-select the first story when the list loads with no selection
+  useEffect(() => {
+    if (!selectedStoryId && stories && stories.length > 0) {
+      setSelectedStoryId(stories[0].id);
+    }
+  }, [selectedStoryId, stories, setSelectedStoryId]);
+
   const handleCreateStory = () => {
     if (!newStoryName.trim()) {
       toast({