diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index a58103d..baeac8e 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -140,8 +140,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       // Responsive scroll amount - extra small cards for Netflix style
       const isMobile = window.innerWidth < 768;
       const containerWidth = scrollRef.current.clientWidth;
-      // Scroll by container width for smoother experience
-      const scrollAmount = isMobile ? containerWidth * 0.8 : containerWidth * 0.75;
+      // More responsive scroll amounts for better mobile experience
+      const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.75;
       const currentScroll = scrollRef.current.scrollLeft;
       const targetScroll = direction === 'left' 
         ? Math.max(0, currentScroll - scrollAmount)
@@ -203,8 +203,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         </div>
 
         {/* Mobile touch areas for left/right navigation */}
-        <div className="md:hidden absolute left-0 top-0 w-1/3 h-full z-20" onClick={() => scroll('left')} />
-        <div className="md:hidden absolute right-0 top-0 w-1/3 h-full z-20" onClick={() => scroll('right')} />
+        <div 
+          className="md:hidden absolute left-0 top-0 w-1/3 h-full z-40 bg-transparent" 
+          onClick={() => scroll('left')}
+          style={{ touchAction: 'manipulation' }}
+        />
+        <div 
+          className="md:hidden absolute right-0 top-0 w-1/3 h-full z-40 bg-transparent" 
+          onClick={() => scroll('right')}
+          style={{ touchAction: 'manipulation' }}
+        />
 
         {/* Scrollable video row - edge to edge */}
         <div