diff --git a/attached_assets/image_1756757950999.png b/attached_assets/image_1756757950999.png
new file mode 100644
index 0000000..9b41602
Binary files /dev/null and b/attached_assets/image_1756757950999.png differ
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index e5e5be3..f85a393 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -243,11 +243,17 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
         {category.title}
       </h2>
       <div className="relative overflow-hidden">
-        {/* Left gradient fade */}
-        <div className="absolute left-0 top-0 w-16 h-full bg-gradient-to-r from-bunny-dark via-bunny-dark/80 to-transparent z-[30] pointer-events-none"></div>
+        {/* Left gradient mask - stronger */}
+        <div className="absolute left-0 top-0 w-20 h-full z-[30] pointer-events-none"
+             style={{
+               background: 'linear-gradient(to right, hsl(250, 50%, 15%) 0%, hsl(250, 50%, 15%) 40%, rgba(60, 40, 90, 0.8) 70%, transparent 100%)'
+             }}></div>
         
-        {/* Right gradient fade */}
-        <div className="absolute right-0 top-0 w-16 h-full bg-gradient-to-l from-bunny-dark via-bunny-dark/80 to-transparent z-[30] pointer-events-none"></div>
+        {/* Right gradient mask - stronger */}
+        <div className="absolute right-0 top-0 w-20 h-full z-[30] pointer-events-none"
+             style={{
+               background: 'linear-gradient(to left, hsl(250, 50%, 15%) 0%, hsl(250, 50%, 15%) 40%, rgba(60, 40, 90, 0.8) 70%, transparent 100%)'
+             }}></div>
 
         {/* Left scroll button - positioned at container edge */}
         {!hideScrollButtons && (