diff --git a/frontend/src/app/stories/[id]/detail/page.tsx b/frontend/src/app/stories/[id]/detail/page.tsx
index 1e2beed..7366785 100644
--- a/frontend/src/app/stories/[id]/detail/page.tsx
+++ b/frontend/src/app/stories/[id]/detail/page.tsx
@@ -27,6 +27,7 @@ export default function StoryDetailPage() {
   const [isSendingToAudioCove, setIsSendingToAudioCove] = useState(false);
   const [audioCovedSuccess, setAudioCovedSuccess] = useState(false);
   const [isCreatingCollection, setIsCreatingCollection] = useState(false);
+  const [showAllSeriesStories, setShowAllSeriesStories] = useState(false);
 
   useEffect(() => {
     const loadStoryData = async () => {
@@ -315,7 +316,7 @@ export default function StoryDetailPage() {
                     <div className="space-y-1">
                       {seriesStories
                         .filter(s => s.id !== story.id)
-                        .slice(0, 5)
+                        .slice(0, showAllSeriesStories ? undefined : 5)
                         .map((seriesStory) => (
                           <Link
                             key={seriesStory.id}
@@ -326,10 +327,13 @@ export default function StoryDetailPage() {
                             {seriesStory.title}
                           </Link>
                         ))}
-                      {seriesStories.length > 6 && (
-                        <p className="text-sm theme-text">
+                      {!showAllSeriesStories && seriesStories.length > 6 && (
+                        <button
+                          onClick={() => setShowAllSeriesStories(true)}
+                          className="text-sm theme-accent hover:underline text-left"
+                        >
                           +{seriesStories.length - 6} more stories
-                        </p>
+                        </button>
                       )}
                     </div>
                   </div>