diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index f585df6..1ccd7c5 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -203,9 +203,19 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       <div className="relative">
         {/* Left scroll button - positioned at video thumbnail center */}
         <button
-          onClick={() => scroll('left')}
-          onMouseEnter={() => startAutoScroll('left')}
-          onMouseLeave={stopAutoScroll}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            scroll('left');
+          }}
+          onMouseEnter={(e) => {
+            e.stopPropagation();
+            startAutoScroll('left');
+          }}
+          onMouseLeave={(e) => {
+            e.stopPropagation();
+            stopAutoScroll();
+          }}
           className="hidden md:flex absolute left-2 top-[45%] -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"
         >
@@ -214,9 +224,19 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
 
         {/* Right scroll button - positioned at video thumbnail center */}
         <button
-          onClick={() => scroll('right')}
-          onMouseEnter={() => startAutoScroll('right')}
-          onMouseLeave={stopAutoScroll}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            scroll('right');
+          }}
+          onMouseEnter={(e) => {
+            e.stopPropagation();
+            startAutoScroll('right');
+          }}
+          onMouseLeave={(e) => {
+            e.stopPropagation();
+            stopAutoScroll();
+          }}
           className="hidden md:flex absolute right-2 top-[45%] -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"
         >
@@ -225,14 +245,22 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
 
         {/* Mobile scroll buttons */}
         <button
-          onClick={() => scroll('left')}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            scroll('left');
+          }}
           className="md:hidden absolute left-1 top-[45%] -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')}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            scroll('right');
+          }}
           className="md:hidden absolute right-1 top-[45%] -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"
         >