diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 021a8b7..29d6e77 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -270,10 +270,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       const isMobile = window.innerWidth < 768;
       
       if (isMobile) {
-        // On mobile, one full card at a time
+        // On mobile, one full card at a time - snap to exact position
         const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
         const newIndex = Math.round(scrollLeft / cardWidth);
-        setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed)
+        setCurrentIndex(Math.min(Math.max(newIndex, 0), 9)); // Ensure 0-9 range
       }
     }
   };
@@ -364,8 +364,12 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
         {/* Scrollable video row - in container */}
         <div
           ref={scrollRef}
-          className="flex gap-3 md:gap-3 gap-0 overflow-x-auto scrollbar-hide py-4 px-3 md:px-2"
-          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', scrollSnapType: 'x mandatory' }}
+          className="flex gap-0 md:gap-3 overflow-x-auto scrollbar-hide py-4 px-3 md:px-2"
+          style={{ 
+            scrollbarWidth: 'none', 
+            msOverflowStyle: 'none', 
+            scrollSnapType: window.innerWidth < 768 ? 'x mandatory' : 'none'
+          }}
           onScroll={handleScroll}
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
@@ -375,6 +379,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
             <div 
               key={video.id} 
               className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
+              style={{ 
+                scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
+              }}
               onMouseEnter={() => setClickedVideoId(video.id)}
             >
               {/* Top 10 Number overlay for first category */}
@@ -394,7 +401,6 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
                   onVideoClick(video);
                 }}
                 className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 hover:shadow-2xl rounded-lg overflow-hidden"
-                style={{ scrollSnapAlign: 'start' }}
               />
             </div>
           ))}