diff --git a/script.js b/script.js
index 320fb41..29cfc2a 100644
--- a/script.js
+++ b/script.js
@@ -919,12 +919,16 @@ function updateDetailCurrentTime() {
 
 function detailPrev() {
     if (currentDetailCob === null) return;
-    showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);
+    animateDetailSwipe(-1, () => {
+        showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);
+    });
 }
 
 function detailNext() {
     if (currentDetailCob === null) return;
-    showEonstripDetail(currentDetailCob + COBIE_UNITS.eonstrip);
+    animateDetailSwipe(1, () => {
+        showEonstripDetail(currentDetailCob + COBIE_UNITS.eonstrip);
+    });
 }
 
 function detailNow() {
@@ -1005,6 +1009,30 @@ function animateSwipe(direction, onDone) {
     grid.addEventListener('transitionend', afterOut);
 }
 
+function animateDetailSwipe(direction, onDone) {
+    const tl = document.getElementById('detailTimeline');
+    if (!tl) { onDone(); return; }
+
+    tl.style.transition = 'none';
+    tl.style.transform = 'translateX(0)';
+    void tl.offsetWidth;
+
+    tl.style.transition = 'transform 0.3s ease';
+    tl.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;
+
+    function afterOut() {
+        tl.removeEventListener('transitionend', afterOut);
+        tl.style.transition = 'none';
+        tl.style.transform = `translateX(${direction > 0 ? '100%' : '-100%'})`;
+        onDone();
+        void tl.offsetWidth;
+        tl.style.transition = 'transform 0.3s ease';
+        tl.style.transform = 'translateX(0)';
+    }
+
+    tl.addEventListener('transitionend', afterOut);
+}
+
 function goToNow() {
     manualMode = false;
     manualCobiets = 0;
@@ -1142,11 +1170,12 @@ document.getElementById('toggleExtended').addEventListener('click', () => {
 });
 
 // ── Swipe & Wheel Navigation ────────────────────────────────────────────────
-let swipeStartX = null;
-let swipeStartY = null;
-let swipeMods   = { altKey: false, shiftKey: false, ctrlKey: false };
-let isSwiping   = false;
-let swipeGrid   = null;
+let swipeStartX  = null;
+let swipeStartY  = null;
+let swipeMods    = { altKey: false, shiftKey: false, ctrlKey: false };
+let isSwiping    = false;
+let swipeGrid    = null;
+let swipeContext = 'calendar';
 
 function swipeStart(e) {
     const touch = e.touches ? e.touches[0] : e;
@@ -1157,7 +1186,17 @@ function swipeStart(e) {
         shiftKey: e.shiftKey || false,
         ctrlKey: e.ctrlKey || false
     };
-    swipeGrid = document.getElementById('eonstripGrid');
+
+    const detailView = document.getElementById('eonstripDetailView');
+    const detailOpen = detailView && detailView.style.display === 'block';
+    if (detailOpen) {
+        swipeGrid = document.getElementById('detailTimeline');
+        swipeContext = 'detail';
+    } else {
+        swipeGrid = document.getElementById('eonstripGrid');
+        swipeContext = 'calendar';
+    }
+
     if (swipeGrid) {
         swipeGrid.style.transition = 'none';
     }
@@ -1194,9 +1233,19 @@ function swipeEnd(e) {
                 // prepare opposite side
                 swipeGrid.style.transition = 'none';
                 swipeGrid.style.transform = `translateX(${dx < 0 ? width : -width}px)`;
-                const step = getStep(swipeMods);
-                currentOffset += direction * step;
-                updateCalendar();
+
+                if (swipeContext === 'calendar') {
+                    const step = getStep(swipeMods);
+                    currentOffset += direction * step;
+                    updateCalendar();
+                } else if (swipeContext === 'detail') {
+                    if (direction === 1) {
+                        currentDetailCob !== null && showEonstripDetail(currentDetailCob + COBIE_UNITS.eonstrip);
+                    } else {
+                        currentDetailCob !== null && showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);
+                    }
+                }
+
                 void swipeGrid.offsetWidth;
                 swipeGrid.style.transition = 'transform 0.3s ease';
                 swipeGrid.style.transform = 'translateX(0)';
@@ -1221,7 +1270,15 @@ document.addEventListener('mouseup', swipeEnd);
 function wheelNavigate(e) {
     if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 10) {
         const direction = e.deltaX > 0 ? 1 : -1;
-        navigatePeriod(e, direction);
+        if (currentDetailCob !== null) {
+            if (direction === 1) {
+                detailNext();
+            } else {
+                detailPrev();
+            }
+        } else {
+            navigatePeriod(e, direction);
+        }
     }
 }