diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 6fc3858..1a1d218 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -136,9 +136,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
-      // Responsive scroll amount - smaller cards for Netflix style
+      // Responsive scroll amount - extra small cards for Netflix style
       const isMobile = window.innerWidth < 768;
-      const scrollAmount = isMobile ? 180 : 280; // Mobile: 176px + gap, Desktop: 256px + gap
+      const scrollAmount = isMobile ? 150 : 220; // Mobile: 144px + gap, Desktop: 208px + gap
       const currentScroll = scrollRef.current.scrollLeft;
       const targetScroll = direction === 'left' 
         ? currentScroll - scrollAmount 
@@ -183,7 +183,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {category.videos.map((video, index) => (
-            <div key={video.id} className="flex-shrink-0 w-44 md:w-64 relative group">
+            <div key={video.id} className="flex-shrink-0 w-36 md:w-52 relative group">
               {/* Top 10 Number overlay for first category */}
               {category.title.includes("Top 10") && index < 10 && (
                 <div className="absolute top-1 left-1 z-20 text-white font-black text-3xl md:text-5xl drop-shadow-2xl"