diff --git a/attached_assets/image_1756595314312.png b/attached_assets/image_1756595314312.png
new file mode 100644
index 0000000..b952de6
Binary files /dev/null and b/attached_assets/image_1756595314312.png differ
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 0937a08..8ed4250 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -70,7 +70,7 @@ export default function VideoPage() {
 
   // Fetch recommended videos (excluding current video)
   const { data: recommendedResponse } = useQuery<VideosResponse>({
-    queryKey: ["/api/videos"],
+    queryKey: ["/api/videos", "limit=150"],
     queryFn: () => fetch("/api/videos?limit=150&offset=0").then(res => res.json()),
     enabled: !!videoId,
   });
@@ -85,8 +85,17 @@ export default function VideoPage() {
   };
 
   const navigateToVideo = (direction: 'next' | 'prev') => {
+    console.log('Navigate clicked:', direction);
+    console.log('All videos length:', allVideos.length);
+    console.log('Current video:', currentVideo?.title);
+    
     const currentIndex = getCurrentVideoIndex();
-    if (currentIndex === -1) return;
+    console.log('Current index:', currentIndex);
+    
+    if (currentIndex === -1) {
+      console.log('Video not found in list');
+      return;
+    }
     
     let newIndex;
     if (direction === 'next') {
@@ -96,6 +105,8 @@ export default function VideoPage() {
     }
     
     const newVideo = allVideos[newIndex];
+    console.log('New video:', newVideo?.title);
+    
     if (newVideo) {
       setLocation(`/video/${newVideo.id}`);
     }
@@ -415,22 +426,32 @@ export default function VideoPage() {
               {allVideos.length > 1 && (
                 <>
                   <Button
-                    onClick={() => navigateToVideo('prev')}
-                    className="absolute left-1 top-1/2 transform -translate-y-1/2 bg-black/90 hover:bg-black text-white border-none p-3 rounded-full shadow-lg hidden md:flex items-center justify-center"
-                    style={{ zIndex: 999, pointerEvents: 'auto' }}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      console.log('Prev button clicked');
+                      navigateToVideo('prev');
+                    }}
+                    className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black/90 hover:bg-black text-white border-none p-4 rounded-full shadow-xl flex items-center justify-center"
+                    style={{ zIndex: 9999, pointerEvents: 'auto', display: 'flex' }}
                     size="sm"
                     data-testid="button-prev-video"
                   >
-                    <ChevronLeft className="w-5 h-5" />
+                    <ChevronLeft className="w-6 h-6" />
                   </Button>
                   <Button
-                    onClick={() => navigateToVideo('next')}
-                    className="absolute right-1 top-1/2 transform -translate-y-1/2 bg-black/90 hover:bg-black text-white border-none p-3 rounded-full shadow-lg hidden md:flex items-center justify-center"
-                    style={{ zIndex: 999, pointerEvents: 'auto' }}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      console.log('Next button clicked');
+                      navigateToVideo('next');
+                    }}
+                    className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black/90 hover:bg-black text-white border-none p-4 rounded-full shadow-xl flex items-center justify-center"
+                    style={{ zIndex: 9999, pointerEvents: 'auto', display: 'flex' }}
                     size="sm"
                     data-testid="button-next-video"
                   >
-                    <ChevronRight className="w-5 h-5" />
+                    <ChevronRight className="w-6 h-6" />
                   </Button>
                 </>
               )}