diff --git a/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx b/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx
index c2ae188f..1dc18c7f 100644
--- a/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx
+++ b/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx
@@ -296,18 +296,30 @@ export function IndexOverlay({
         return;
       }
 
-      // Position index line
+      // Position index line — hide if the current x or y value is outside the zoomed viewport
       const px = chart.convertToPixel({ xAxisIndex: 0 }, xValue) as number;
+      const inBoundsX = px >= rect.x && px <= rect.x + rect.width;
+
+      if (!inBoundsX) {
+        lineEl.style.display = 'none';
+        dotEls.forEach((dotEl) => {
+          if (dotEl) dotEl.style.display = 'none';
+        });
+        return;
+      }
+      
       lineEl.style.transform = `translate3d(${px}px, ${rect.y}px, 0)`;
       lineEl.style.height = `${rect.height}px`;
       lineEl.style.display = 'block';
 
       // Position dots
-      yValues.forEach((yValue, seriesIndex) => {
-        const dotEl = dotEls[seriesIndex];
-        if (!dotEl) return;
-        if (yValue != null) {
-          const py = chart.convertToPixel({ yAxisIndex: 0 }, yValue) as number;
+      dotEls.forEach((dotEl, seriesIndex) => {
+        const yValue = yValues[seriesIndex];
+        if (!dotEl || yValue == null) return;
+
+        const py = chart.convertToPixel({ yAxisIndex: 0 }, yValue) as number;
+        const inBoundsY = py >= rect.y && py <= rect.y + rect.height;
+        if (inBoundsY) {
           dotEl.style.transform = `translate3d(${px - 6}px, ${py - 6}px, 0)`;
           dotEl.style.display = 'block';
         } else {
@@ -315,9 +327,10 @@ export function IndexOverlay({
         }
       });
 
-      for (let i = yValues.length; i < dotEls.length; i++) {
-        if (dotEls[i]) dotEls[i].style.display = 'none';
-      }
+      // Not sure what this code does
+      // for (let i = yValues.length; i < dotEls.length; i++) {
+      //   if (dotEls[i]) dotEls[i].style.display = 'none';
+      // }
 
       // Build tooltip HTML
       const xLabel = xAxis.unit
diff --git a/frontend/src/utils/ReplayController.ts b/frontend/src/utils/ReplayController.ts
index d196c349..a242187e 100644
--- a/frontend/src/utils/ReplayController.ts
+++ b/frontend/src/utils/ReplayController.ts
@@ -161,7 +161,7 @@ export class ReplayController {
     if (latest) {
       this.emit({
         type: ReplayEventType.Progress,
-        currentIndex: this.currentIndex,
+        currentIndex: this.currentIndex - 1,
         data: latest, // only the newest point this frame
       });
     }