diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 76491ee..749e004 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -173,7 +173,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
   return (
     <div 
       data-testid={`card-video-${video.id}`}
-      className={`video-card transition-all duration-300 ${showPopup ? 'z-50 scale-150 -translate-y-8' : 'hover:scale-[1.02]'} p-1 md:p-2 ${className}`}
+      className={`video-card transition-all duration-300 hover:scale-[1.02] p-1 md:p-2 ${className} ${showPopup ? 'z-50' : ''}`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -247,41 +247,40 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         </h3>
       </div>
       
-      {/* Netflix-style popup overlay */}
+      {/* Netflix-style popup overlay - stays within card */}
       {showPopup && (
-        <div className="absolute inset-0 bg-bunny-dark rounded-lg shadow-2xl border border-gray-700 p-4 z-50">
+        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/80 to-transparent rounded-b-lg p-3">
           {/* Action buttons */}
-          <div className="flex items-center gap-2 mb-3">
+          <div className="flex items-center gap-1.5 mb-2">
             <button 
               onClick={() => onClick?.(video)}
-              className="bg-white text-black rounded-full w-8 h-8 flex items-center justify-center hover:bg-gray-200 transition-colors"
+              className="bg-white text-black rounded-full w-6 h-6 flex items-center justify-center hover:bg-gray-200 transition-colors"
             >
-              <Play className="w-4 h-4 ml-0.5" fill="currentColor" />
+              <Play className="w-3 h-3 ml-0.5" fill="currentColor" />
             </button>
-            <button className="border border-gray-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:border-white transition-colors">
-              <Plus className="w-4 h-4" />
+            <button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors">
+              <Plus className="w-3 h-3" />
             </button>
-            <button className="border border-gray-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:border-white transition-colors">
-              <ThumbsUp className="w-4 h-4" />
+            <button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors">
+              <ThumbsUp className="w-3 h-3" />
             </button>
-            <button className="border border-gray-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:border-white transition-colors ml-auto">
-              <ChevronDown className="w-4 h-4" />
+            <button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors ml-auto">
+              <ChevronDown className="w-3 h-3" />
             </button>
           </div>
           
           {/* Video info */}
           <div className="text-white">
-            <h4 className="font-bold text-sm mb-1 line-clamp-2">{video.title}</h4>
-            <div className="flex items-center gap-2 text-xs text-gray-300 mb-2">
+            <h4 className="font-bold text-xs mb-1 line-clamp-1">{video.title}</h4>
+            <div className="flex items-center gap-2 text-xs text-gray-300">
               <span className="border border-gray-500 px-1 rounded text-xs">HD</span>
               <span>{formatDuration(video.duration)}</span>
-            </div>
-            <div className="flex items-center gap-1 text-xs text-gray-300">
-              <span>Drama</span>
-              <span>•</span>
-              <span>Thriller</span>
-              <span>•</span>
-              <span>Action</span>
+              {video.category && (
+                <>
+                  <span>•</span>
+                  <span>{video.category}</span>
+                </>
+              )}
             </div>
           </div>
         </div>