diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 749a0f1..e5e5be3 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -244,10 +244,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       </h2>
       <div className="relative overflow-hidden">
         {/* Left gradient fade */}
-        <div className="absolute left-0 top-0 w-12 h-full bg-gradient-to-r from-bunny-dark to-transparent z-[30] pointer-events-none"></div>
+        <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>
         
         {/* Right gradient fade */}
-        <div className="absolute right-0 top-0 w-12 h-full bg-gradient-to-l from-bunny-dark to-transparent z-[30] pointer-events-none"></div>
+        <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>
 
         {/* Left scroll button - positioned at container edge */}
         {!hideScrollButtons && (