diff --git a/attached_assets/image_1756732329195.png b/attached_assets/image_1756732329195.png
new file mode 100644
index 0000000..50ad121
Binary files /dev/null and b/attached_assets/image_1756732329195.png differ
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index b69d21e..e5c08eb 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -153,7 +153,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
     <>
       <div>
         {categories.map((category, categoryIndex) => (
-          <div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-2 mb-1' : 'mb-2'}`}>
+          <div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-6 mb-8' : 'mb-8'}`}>
             <CategoryRow
               category={category}
               onVideoClick={handleVideoClick}
@@ -272,13 +272,13 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
         {/* Scrollable video row - true edge to edge */}
         <div
           ref={scrollRef}
-          className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 -mx-1"
+          className="flex gap-2 overflow-x-auto scrollbar-hide pb-0 px-4"
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {category.videos.map((video, index) => (
             <div 
               key={video.id} 
-              className="flex-shrink-0 w-[calc(70vw-2px)] sm:w-[calc(40vw-2px)] md:w-[calc(30vw-2px)] lg:w-[calc(24vw-2px)] relative group hover:z-30"
+              className="flex-shrink-0 w-[280px] sm:w-[320px] md:w-[360px] lg:w-[400px] xl:w-[440px] relative group hover:z-30"
               onMouseEnter={() => setClickedVideoId(video.id)}
             >
               {/* Top 10 Number overlay for first category */}