diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 1417481..3cbae89 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -134,19 +134,20 @@ interface CategoryRowProps {
 function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [showLeftButton, setShowLeftButton] = useState(false);
   const [showRightButton, setShowRightButton] = useState(true);
-  
-  const [translateX, setTranslateX] = useState(0);
   const [isScrolling, setIsScrolling] = useState(false);
   const [speedMode, setSpeedMode] = useState<'normal' | 'fast'>('normal');
-  const videosToShow = 5; // Show 5 videos at a time
-  const videoWidth = 120; // Width including spacing
 
   const scroll = (direction: 'left' | 'right') => {
-    // SUPER SIMPLE - just move without any wrapping
-    const step = direction === 'right' ? -250 : 250;
-    setTranslateX(prev => prev + step);
+    if (!scrollContainerRef.current) return;
+    
+    const scrollAmount = direction === 'right' ? 300 : -300;
+    scrollContainerRef.current.scrollBy({
+      left: scrollAmount,
+      behavior: 'smooth'
+    });
   };
 
   const toggleSpeed = (direction: 'left' | 'right') => {
@@ -327,15 +328,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           <ChevronRight className="w-5 h-5 text-white" />
         </button>
 
-        {/* Continuous flowing carousel - videos flow across entire width */}
-        <div className="overflow-hidden">
-          <div 
-            className="flex space-x-4 pb-4"
-            style={{
-              transform: `translateX(${translateX}px)`,
-              willChange: 'transform'
-            }}
-          >
+        {/* Simple horizontal scroll carousel */}
+        <div 
+          ref={scrollContainerRef}
+          className="overflow-x-auto scrollbar-hide"
+          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+        >
+          <div className="flex space-x-4 pb-4 w-max">
             {/* ULTRA SIMPLE - just many copies */}
             {Array.from({ length: 50 }).map((_, copyIndex) => 
               category.videos.map((video, videoIndex) => (