diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 528bc30..62b49f4 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -206,13 +206,16 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
-      // Viewport-based scroll amount for full-width cards
+      // Calculate card width with gap for precise scrolling
       const containerWidth = scrollRef.current.clientWidth;
-      const scrollAmount = containerWidth * 0.8; // Scroll 80% of visible area
+      const isMobile = window.innerWidth < 768;
+      const cardWidth = isMobile ? containerWidth - 24 : 330; // 24px for mobile margins (3rem - 1.5rem each side)
+      const gap = 12; // 3 * 0.25rem = 12px gap
+      const scrollAmount = cardWidth + gap;
       
       const currentScroll = scrollRef.current.scrollLeft;
       const targetScroll = direction === 'left' 
-        ? currentScroll - scrollAmount 
+        ? Math.max(0, currentScroll - scrollAmount)
         : currentScroll + scrollAmount;
         
       scrollRef.current.scrollTo({
@@ -264,9 +267,15 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
     if (scrollRef.current) {
       const containerWidth = scrollRef.current.clientWidth;
       const scrollLeft = scrollRef.current.scrollLeft;
-      const cardWidth = containerWidth; // Full width cards on mobile
-      const newIndex = Math.round(scrollLeft / cardWidth);
-      setCurrentIndex(newIndex);
+      const isMobile = window.innerWidth < 768;
+      
+      if (isMobile) {
+        // On mobile, cards are full width
+        const cardWidth = containerWidth - 24; // Account for margins
+        const gap = 12;
+        const newIndex = Math.round(scrollLeft / (cardWidth + gap));
+        setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed)
+      }
     }
   };
 
@@ -287,13 +296,15 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
     const isLeftSwipe = distance > 50; // Swipe left (next)
     const isRightSwipe = distance < -50; // Swipe right (previous)
     
-    if (isLeftSwipe && currentIndex < Math.min(10, category.videos.length) - 1) {
+    if (isLeftSwipe && currentIndex < 9) { // Max index 9 for 10 cards
       // Navigate to next card
       const nextIndex = currentIndex + 1;
       if (scrollRef.current) {
         const containerWidth = scrollRef.current.clientWidth;
+        const cardWidth = containerWidth - 24; // Account for margins
+        const gap = 12;
         scrollRef.current.scrollTo({
-          left: nextIndex * containerWidth,
+          left: nextIndex * (cardWidth + gap),
           behavior: 'smooth'
         });
         setCurrentIndex(nextIndex);
@@ -305,8 +316,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       const prevIndex = currentIndex - 1;
       if (scrollRef.current) {
         const containerWidth = scrollRef.current.clientWidth;
+        const cardWidth = containerWidth - 24; // Account for margins
+        const gap = 12;
         scrollRef.current.scrollTo({
-          left: prevIndex * containerWidth,
+          left: prevIndex * (cardWidth + gap),
           behavior: 'smooth'
         });
         setCurrentIndex(prevIndex);
@@ -395,8 +408,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
               onClick={() => {
                 if (scrollRef.current) {
                   const containerWidth = scrollRef.current.clientWidth;
+                  const cardWidth = containerWidth - 24; // Account for margins
+                  const gap = 12;
                   scrollRef.current.scrollTo({
-                    left: index * containerWidth,
+                    left: index * (cardWidth + gap),
                     behavior: 'smooth'
                   });
                   setCurrentIndex(index);