diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 4b77ce5..af200d5 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -135,6 +135,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [isScrolling, setIsScrolling] = useState(false);
   const scrollIntervalRef = useRef<NodeJS.Timeout>();
+  const [clickedVideoId, setClickedVideoId] = useState<string | null>(null);
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
@@ -220,10 +221,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {category.videos.map((video, index) => (
-            <div key={video.id} className="flex-shrink-0 w-[calc(50vw-2px)] sm:w-[calc(33.33vw-2px)] md:w-[calc(25vw-2px)] lg:w-[calc(20vw-2px)] relative group">
+            <div 
+              key={video.id} 
+              className="flex-shrink-0 w-[calc(50vw-2px)] sm:w-[calc(33.33vw-2px)] md:w-[calc(25vw-2px)] lg:w-[calc(20vw-2px)] relative group"
+              onMouseEnter={() => setClickedVideoId(null)}
+            >
               {/* Top 10 Number overlay for first category */}
-              {category.title.includes("Top 10") && index < 10 && (
-                <div className="absolute top-2 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl"
+              {category.title.includes("Top 10") && index < 10 && clickedVideoId !== video.id && (
+                <div className="absolute top-2 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl transition-opacity duration-300"
                      style={{ 
                        textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
                        WebkitTextStroke: '2px rgba(0,0,0,0.8)' 
@@ -233,7 +238,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
               )}
               <VideoCard
                 video={video}
-                onClick={onVideoClick}
+                onClick={(video) => {
+                  setClickedVideoId(video.id);
+                  onVideoClick(video);
+                }}
                 className="w-full hover:scale-105 md:hover:scale-110 hover:z-10 transition-all duration-300 md:duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
               />
             </div>