diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index d1e3631..55ad200 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -136,9 +136,21 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
-      // Responsive scroll amount - wider cards on desktop
-      const isMobile = window.innerWidth < 768;
-      const scrollAmount = isMobile ? 240 : 336; // Mobile: 224px + gap, Desktop: 320px + gap
+      // Responsive scroll amount - different sizes for mobile/tablet/desktop
+      const width = window.innerWidth;
+      let scrollAmount;
+      
+      if (width < 640) {
+        // Mobile: smaller cards (176px + gap)
+        scrollAmount = 192;
+      } else if (width < 768) {
+        // Small tablet: medium cards (224px + gap)
+        scrollAmount = 240;
+      } else {
+        // Desktop: large cards (320px + gap)
+        scrollAmount = 336;
+      }
+      
       const currentScroll = scrollRef.current.scrollLeft;
       const targetScroll = direction === 'left' 
         ? currentScroll - scrollAmount 
@@ -183,10 +195,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {category.videos.map((video, index) => (
-            <div key={video.id} className="flex-shrink-0 w-56 md:w-80 relative group">
+            <div key={video.id} className="flex-shrink-0 w-44 sm:w-56 md:w-80 relative group">
               {/* Top 10 Number overlay for first category */}
               {category.title.includes("Top 10") && index < 10 && (
-                <div className="absolute top-2 left-2 z-20 text-white font-black text-5xl md:text-7xl drop-shadow-2xl"
+                <div className="absolute top-2 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl"
                      style={{ 
                        textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
                        WebkitTextStroke: '2px rgba(0,0,0,0.8)' 
@@ -197,7 +209,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
               <VideoCard
                 video={video}
                 onClick={onVideoClick}
-                className="w-full hover:scale-110 hover:z-10 transition-all duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
+                className="w-full hover:scale-105 md:hover:scale-110 hover:z-10 transition-all duration-300 md:duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
               />
             </div>
           ))}