diff --git a/attached_assets/image_1756564625261.png b/attached_assets/image_1756564625261.png
new file mode 100644
index 0000000..3801348
Binary files /dev/null and b/attached_assets/image_1756564625261.png differ
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 439bfe6..5ac3351 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -111,6 +111,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
             <CategoryRow
               category={category}
               onVideoClick={handleVideoClick}
+              hideScrollButtons={isModalOpen}
             />
           </div>
         ))}
@@ -130,9 +131,10 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
 interface CategoryRowProps {
   category: VideoCategory;
   onVideoClick: (video: Video) => void;
+  hideScrollButtons?: boolean;
 }
 
-function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
+function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: CategoryRowProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [isScrolling, setIsScrolling] = useState(false);
   const scrollIntervalRef = useRef<NodeJS.Timeout>();
@@ -195,27 +197,31 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         {category.title}
       </h2>
       <div className="relative overflow-hidden">
-        {/* Left scroll button - only on desktop */}
-        <Button
-          onClick={() => scroll('left')}
-          onMouseEnter={() => startAutoScroll('left')}
-          onMouseLeave={stopAutoScroll}
-          className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex"
-          size="sm"
-        >
-          <ChevronLeft className="w-5 h-5" />
-        </Button>
+        {/* Left scroll button - only on desktop and not hidden */}
+        {!hideScrollButtons && (
+          <Button
+            onClick={() => scroll('left')}
+            onMouseEnter={() => startAutoScroll('left')}
+            onMouseLeave={stopAutoScroll}
+            className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex"
+            size="sm"
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </Button>
+        )}
 
-        {/* Right scroll button - only on desktop */}
-        <Button
-          onClick={() => scroll('right')}
-          onMouseEnter={() => startAutoScroll('right')}
-          onMouseLeave={stopAutoScroll}
-          className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex"
-          size="sm"
-        >
-          <ChevronRight className="w-5 h-5" />
-        </Button>
+        {/* Right scroll button - only on desktop and not hidden */}
+        {!hideScrollButtons && (
+          <Button
+            onClick={() => scroll('right')}
+            onMouseEnter={() => startAutoScroll('right')}
+            onMouseLeave={stopAutoScroll}
+            className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex"
+            size="sm"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </Button>
+        )}
 
         {/* Scrollable video row - true edge to edge */}
         <div