diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index fcac4ca..7702a04 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -138,10 +138,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     if (scrollRef.current) {
       // Responsive scroll amount - extra small cards for Netflix style
       const isMobile = window.innerWidth < 768;
-      const scrollAmount = isMobile ? 150 : 220; // Mobile: 144px + gap, Desktop: 208px + gap
+      const containerWidth = scrollRef.current.clientWidth;
+      // Scroll by container width for smoother experience
+      const scrollAmount = isMobile ? containerWidth * 0.8 : containerWidth * 0.75;
       const currentScroll = scrollRef.current.scrollLeft;
       const targetScroll = direction === 'left' 
-        ? currentScroll - scrollAmount 
+        ? Math.max(0, currentScroll - scrollAmount)
         : currentScroll + scrollAmount;
         
       scrollRef.current.scrollTo({
@@ -183,8 +185,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         {/* Scrollable video row */}
         <div
           ref={scrollRef}
-          className="flex space-x-2 md:space-x-3 overflow-x-auto scrollbar-hide pb-4"
-          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+          className="flex space-x-2 md:space-x-3 overflow-x-auto scrollbar-hide pb-4 scroll-smooth"
+          style={{ 
+            scrollbarWidth: 'none', 
+            msOverflowStyle: 'none',
+            scrollBehavior: 'smooth',
+            WebkitOverflowScrolling: 'touch'
+          }}
         >
           {category.videos.map((video, index) => (
             <div key={video.id} className="flex-shrink-0 w-36 md:w-52 relative group">