diff --git a/src/components/TimelineChapters.tsx b/src/components/TimelineChapters.tsx
index b9117b8..a1a5541 100644
--- a/src/components/TimelineChapters.tsx
+++ b/src/components/TimelineChapters.tsx
@@ -56,7 +56,8 @@ export function TimelineChapters({
           <h3 className="font-semibold">Timeline</h3>
         </div>
 
-        <div className="space-y-1">
+        {/* Scrollable chapter list with max-height */}
+        <div className="max-h-[400px] overflow-y-auto space-y-1 pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 hover:scrollbar-thumb-gray-400">
           {chapters.map((chapter, index) => {
             const active = isChapterActive(index);