diff --git a/attached_assets/image_1756477531696.png b/attached_assets/image_1756477531696.png
new file mode 100644
index 0000000..373a104
Binary files /dev/null and b/attached_assets/image_1756477531696.png differ
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 398ff60..434bdd6 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -201,23 +201,23 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       </h2>
       
       <div className="relative">
-        {/* Left scroll button - always visible on desktop */}
+        {/* Left scroll button - positioned at video center */}
         <button
           onClick={() => scroll('left')}
           onMouseEnter={() => startAutoScroll('left')}
           onMouseLeave={stopAutoScroll}
-          className="hidden md:flex absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 z-30 bg-black/70 hover:bg-black/90 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/20"
+          className="hidden md:flex absolute left-2 top-[60%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg"
           data-testid="button-scroll-left"
         >
           <ChevronLeft className="w-6 h-6 text-white" />
         </button>
 
-        {/* Right scroll button - always visible on desktop */}
+        {/* Right scroll button - positioned at video center */}
         <button
           onClick={() => scroll('right')}
           onMouseEnter={() => startAutoScroll('right')}
           onMouseLeave={stopAutoScroll}
-          className="hidden md:flex absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 z-30 bg-black/70 hover:bg-black/90 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/20"
+          className="hidden md:flex absolute right-2 top-[60%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg"
           data-testid="button-scroll-right"
         >
           <ChevronRight className="w-6 h-6 text-white" />
@@ -226,14 +226,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         {/* Mobile scroll buttons */}
         <button
           onClick={() => scroll('left')}
-          className="md:hidden absolute left-1 top-1/2 -translate-y-1/2 w-10 h-10 z-40 bg-black/70 rounded-full flex items-center justify-center"
+          className="md:hidden absolute left-1 top-[60%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
           data-testid="button-mobile-scroll-left"
         >
           <ChevronLeft className="w-5 h-5 text-white" />
         </button>
         <button
           onClick={() => scroll('right')}
-          className="md:hidden absolute right-1 top-1/2 -translate-y-1/2 w-10 h-10 z-40 bg-black/70 rounded-full flex items-center justify-center"
+          className="md:hidden absolute right-1 top-[60%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
           data-testid="button-mobile-scroll-right"
         >
           <ChevronRight className="w-5 h-5 text-white" />