diff --git a/src/components/player/atoms/Settings.tsx b/src/components/player/atoms/Settings.tsx
index f5f72ff9..a7bad320 100644
--- a/src/components/player/atoms/Settings.tsx
+++ b/src/components/player/atoms/Settings.tsx
@@ -96,7 +96,12 @@ function SettingsOverlay({ id }: { id: string }) {
             <PlaybackSettingsView id={id} />
           </Menu.Card>
         </OverlayPage>
-        <OverlayPage id={id} path="/transcript" width={343} height={452}>
+        <OverlayPage
+          id={id}
+          path="/captions/transcript"
+          width={343}
+          height={452}
+        >
           <Menu.CardWithScrollable>
             <TranscriptView id={id} />
           </Menu.CardWithScrollable>
diff --git a/src/components/player/atoms/settings/CaptionsView.tsx b/src/components/player/atoms/settings/CaptionsView.tsx
index 902f9d69..d15d64cb 100644
--- a/src/components/player/atoms/settings/CaptionsView.tsx
+++ b/src/components/player/atoms/settings/CaptionsView.tsx
@@ -542,7 +542,9 @@ export function CaptionsView({
           />
 
           {selectedCaptionId && (
-            <Menu.ChevronLink onClick={() => router.navigate("/transcript")}>
+            <Menu.ChevronLink
+              onClick={() => router.navigate("/captions/transcript")}
+            >
               {t("player.menus.subtitles.transcriptChoice")}
             </Menu.ChevronLink>
           )}
diff --git a/src/components/player/atoms/settings/TranscriptView.tsx b/src/components/player/atoms/settings/TranscriptView.tsx
index c30ede83..8f31412e 100644
--- a/src/components/player/atoms/settings/TranscriptView.tsx
+++ b/src/components/player/atoms/settings/TranscriptView.tsx
@@ -153,27 +153,15 @@ export function TranscriptView({ id }: { id: string }) {
   const [didFirstScroll, setDidFirstScroll] = useState(false);
   useEffect(() => {
     if (!scrollTargetKey) return;
-    // Find nearest scrollable parent
-    const getScrollableParent = (node: HTMLElement | null): HTMLElement => {
-      let el: HTMLElement | null = node;
-      while (el && el.parentElement) {
-        const style = window.getComputedStyle(el);
-        if (/(auto|scroll)/.test(style.overflowY)) return el;
-        el = el.parentElement as HTMLElement;
-      }
-      return (
-        (document.scrollingElement as HTMLElement) ||
-        (document.documentElement as HTMLElement)
-      );
-    };
-
     const scrollToStablePoint = (target: HTMLElement) => {
-      const container = getScrollableParent(target);
+      const container = carouselRef.current;
+      if (!container) return;
+
       const containerRect = container.getBoundingClientRect();
       const targetRect = target.getBoundingClientRect();
 
-      const containerHeight = container.clientHeight || 452;
-      const desiredOffsetFromTop = Math.floor(containerHeight * 0.85); // ~3/4 down
+      const containerHeight = container.clientHeight || 288; // 18rem = 288px
+      const desiredOffsetFromTop = Math.floor(containerHeight * 0.6); // half of the container height
 
       // Current absolute position of target center within container's scroll space
       const targetCenterAbs =