diff --git a/client/src/components/ad-settings.tsx b/client/src/components/ad-settings.tsx
index 4c9d8d8..ba15e05 100644
--- a/client/src/components/ad-settings.tsx
+++ b/client/src/components/ad-settings.tsx
@@ -116,7 +116,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 9999999 }}>
+    <div className="modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 2147483647, position: 'fixed' }}>
       <div className="bg-white dark:bg-gray-900 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
         <div className="sticky top-0 bg-white dark:bg-gray-900 p-6 border-b border-gray-200 dark:border-gray-700">
           <div className="flex items-center justify-between">
diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index cc83842..d0527c7 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -168,8 +168,8 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
 
   return (
     <div 
-      className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center"
-      style={{ zIndex: 999999999, backgroundColor: '#1f2937', position: 'fixed' }}
+      className="modal-overlay fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center"
+      style={{ zIndex: 2147483647, backgroundColor: '#1f2937', position: 'fixed' }}
       onClick={handleBackdropClick}
     >
       <div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col">
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 0d083e5..9c66d4b 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -141,22 +141,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     if (scrollRef.current) {
       const isMobile = window.innerWidth < 768;
       const containerWidth = scrollRef.current.clientWidth;
-      const scrollAmount = isMobile ? containerWidth * 0.8 : containerWidth * 0.6;
-      const currentScroll = scrollRef.current.scrollLeft;
-      const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
-      
-      let targetScroll;
+      const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.7;
       
       if (direction === 'left') {
-        targetScroll = Math.max(0, currentScroll - scrollAmount);
+        scrollRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
       } else {
-        targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
+        scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
       }
-        
-      scrollRef.current.scrollTo({
-        left: targetScroll,
-        behavior: 'smooth'
-      });
     }
   };
 
diff --git a/client/src/components/vast-player.tsx b/client/src/components/vast-player.tsx
index 9370428..fdc4a8c 100644
--- a/client/src/components/vast-player.tsx
+++ b/client/src/components/vast-player.tsx
@@ -270,7 +270,7 @@ export default function VASTPlayer({ video, onClose, vastTagUrl, enableAds = tru
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 999999999, position: 'fixed' }}>
+    <div className="modal-overlay fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 2147483647, position: 'fixed' }}>
       <div className="relative w-full max-w-6xl mx-4">
         {/* Close button */}
         <Button
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 98d8b7e..2a54e09 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -168,7 +168,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         transformStyle: 'preserve-3d',
         transition: 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), z-index 0.1s ease',
         willChange: 'transform',
-        zIndex: isHovered ? 10 : 'auto',
+        zIndex: isHovered ? 5 : 1,
         position: isHovered ? 'relative' : 'static'
       }}
       onMouseEnter={() => setIsHovered(true)}
diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index bf83dfc..f75632d 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -437,8 +437,8 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
 
   return (
     <div 
-      className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center p-4"
-      style={{ zIndex: 999999999, position: 'fixed' }}
+      className="modal-overlay fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center p-4"
+      style={{ zIndex: 2147483647, position: 'fixed' }}
       onClick={handleBackdropClick}
       data-testid="modal-video"
     >
diff --git a/client/src/index.css b/client/src/index.css
index 285bc4d..79dae25 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -163,6 +163,21 @@
   .animation-delay-150 {
     animation-delay: 150ms;
   }
+
+  /* Force modal z-index above everything */
+  .modal-overlay {
+    z-index: 2147483647 !important;
+    position: fixed !important;
+  }
+  
+  /* Keep video cards low */
+  .video-card {
+    z-index: 1 !important;
+  }
+  
+  .video-card:hover {
+    z-index: 5 !important;
+  }
 }
 
 /* Video edit modal styles */