diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 55d63c1..53cb86a 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -57,6 +57,7 @@ export default function VideoPage() {
   const [showShareMenu, setShowShareMenu] = useState(false);
   const [touchStart, setTouchStart] = useState(0);
   const [touchEnd, setTouchEnd] = useState(0);
+  const [activeDot, setActiveDot] = useState<'left' | 'center' | 'right'>('center');
   const [searchQuery, setSearchQuery] = useState("");
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -123,6 +124,14 @@ export default function VideoPage() {
     const currentIndex = getCurrentVideoIndex();
     if (currentIndex === -1) return;
     
+    // Show direction feedback on dots
+    setActiveDot(direction === 'next' ? 'right' : 'left');
+    
+    // Return to center after 300ms
+    setTimeout(() => {
+      setActiveDot('center');
+    }, 300);
+    
     let newIndex;
     if (direction === 'next') {
       newIndex = currentIndex + 1 >= allVideos.length ? 0 : currentIndex + 1;
@@ -570,7 +579,11 @@ export default function VideoPage() {
                 {/* Left dot */}
                 <button
                   onClick={() => navigateToVideo('prev')}
-                  className="rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  className={`rounded-full transition-colors duration-300 ease-in-out ${
+                    activeDot === 'left' 
+                      ? 'bg-gradient-to-r from-purple-500 to-blue-500' 
+                      : 'bg-white/25 hover:bg-white/40'
+                  }`}
                   style={{
                     width: '8px',
                     height: '8px',
@@ -579,9 +592,13 @@ export default function VideoPage() {
                   }}
                   aria-label="Previous video"
                 />
-                {/* Center dot - always active */}
+                {/* Center dot */}
                 <button
-                  className="rounded-full bg-gradient-to-r from-purple-500 to-blue-500"
+                  className={`rounded-full transition-colors duration-300 ease-in-out ${
+                    activeDot === 'center' 
+                      ? 'bg-gradient-to-r from-purple-500 to-blue-500' 
+                      : 'bg-white/25'
+                  }`}
                   style={{
                     width: '8px',
                     height: '8px',
@@ -593,7 +610,11 @@ export default function VideoPage() {
                 {/* Right dot */}
                 <button
                   onClick={() => navigateToVideo('next')}
-                  className="rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  className={`rounded-full transition-colors duration-300 ease-in-out ${
+                    activeDot === 'right' 
+                      ? 'bg-gradient-to-r from-purple-500 to-blue-500' 
+                      : 'bg-white/25 hover:bg-white/40'
+                  }`}
                   style={{
                     width: '8px',
                     height: '8px',