diff --git a/client/src/components/hls-preview-thumbnail.tsx b/client/src/components/hls-preview-thumbnail.tsx
index 6798471..9d946e7 100644
--- a/client/src/components/hls-preview-thumbnail.tsx
+++ b/client/src/components/hls-preview-thumbnail.tsx
@@ -20,64 +20,64 @@ export default function HLSPreviewThumbnail({ video, onClick, className = "" }:
   const hoverTimeoutRef = useRef<NodeJS.Timeout>();
   const previewIntervalRef = useRef<NodeJS.Timeout>();
 
-  // Initialize HLS for preview
-  useEffect(() => {
+  // Initialize HLS for preview only when hovering
+  const initializeVideoOnDemand = () => {
     if (!video.videoUrl.includes('.m3u8') && !video.videoUrlMp4) return;
 
     const videoElement = videoRef.current;
-    if (!videoElement) return;
+    if (!videoElement || isVideoLoaded || hlsInstance) return;
 
     let hls: Hls | null = null;
 
-    const initializeVideo = () => {
-      // Use MP4 if available for better seek performance
-      if (video.videoUrlMp4) {
-        videoElement.src = video.videoUrlMp4;
-        videoElement.muted = true;
-        videoElement.playsInline = true;
-        videoElement.preload = 'metadata';
-        return;
-      }
+    // Use MP4 if available for better seek performance
+    if (video.videoUrlMp4) {
+      videoElement.src = video.videoUrlMp4;
+      videoElement.muted = true;
+      videoElement.playsInline = true;
+      videoElement.preload = 'metadata';
+      
+      const handleLoadedMetadata = () => {
+        setIsVideoLoaded(true);
+        videoElement.removeEventListener('loadedmetadata', handleLoadedMetadata);
+      };
+      videoElement.addEventListener('loadedmetadata', handleLoadedMetadata);
+      return;
+    }
 
-      // Use HLS with reduced quality for preview
-      if (Hls.isSupported() && video.videoUrl.includes('.m3u8')) {
-        hls = new Hls({
-          startLevel: 0, // Start with lowest quality for faster loading
-          capLevelToPlayerSize: true,
-          maxLoadingDelay: 1,
-          maxBufferLength: 5, // Minimal buffering for previews
-        });
+    // Use HLS with reduced quality for preview
+    if (Hls.isSupported() && video.videoUrl.includes('.m3u8')) {
+      hls = new Hls({
+        startLevel: 0, // Start with lowest quality for faster loading
+        capLevelToPlayerSize: true,
+        maxLoadingDelay: 2,
+        maxBufferLength: 10, // Minimal buffering for previews
+        lowLatencyMode: true,
+      });
 
-        hls.loadSource(video.videoUrl);
-        hls.attachMedia(videoElement);
-        
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          setIsVideoLoaded(true);
-        });
+      hls.loadSource(video.videoUrl);
+      hls.attachMedia(videoElement);
+      
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        setIsVideoLoaded(true);
+      });
 
-        hls.on(Hls.Events.ERROR, (event, data) => {
-          console.warn('HLS preview error:', data);
-          setIsVideoLoaded(false);
-        });
+      hls.on(Hls.Events.ERROR, (event, data) => {
+        console.warn('HLS preview error:', data);
+        setIsVideoLoaded(false);
+      });
 
-        setHlsInstance(hls);
-      }
-    };
-
-    const handleLoadedMetadata = () => {
-      setIsVideoLoaded(true);
-    };
-
-    videoElement.addEventListener('loadedmetadata', handleLoadedMetadata);
-    initializeVideo();
+      setHlsInstance(hls);
+    }
+  };
 
+  // Clean up on unmount
+  useEffect(() => {
     return () => {
-      videoElement.removeEventListener('loadedmetadata', handleLoadedMetadata);
-      if (hls) {
-        hls.destroy();
+      if (hlsInstance) {
+        hlsInstance.destroy();
       }
     };
-  }, [video.videoUrl, video.videoUrlMp4]);
+  }, [hlsInstance]);
 
   const generatePreviewThumbnail = (time: number) => {
     const videoElement = videoRef.current;
@@ -131,13 +131,18 @@ export default function HLSPreviewThumbnail({ video, onClick, className = "" }:
   };
 
   const handleMouseEnter = () => {
-    if (!isVideoLoaded) return;
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
     
-    // Delay before showing preview to avoid flickering
     hoverTimeoutRef.current = setTimeout(() => {
       setIsHovering(true);
-      generatePreviewThumbnail(video.duration * 0.25); // Start at 25% of video
-    }, 600);
+      // Initialize video only when user actually hovers
+      initializeVideoOnDemand();
+      if (isVideoLoaded) {
+        generatePreviewThumbnail(video.duration * 0.25); // Start at 25% of video
+      }
+    }, 300); // Reduced delay for better UX
   };
 
   const handleMouseLeave = () => {
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 7be769e..b0e6306 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -42,12 +42,41 @@ function formatDate(date: Date | string): string {
 
 export default function VideoCard({ video, onClick }: VideoCardProps) {
   return (
-    <div data-testid={`card-video-${video.id}`}>
-      <HLSPreviewThumbnail 
-        video={video}
-        onClick={onClick}
-        className=""
-      />
+    <div 
+      data-testid={`card-video-${video.id}`}
+      className="transition-transform duration-200 hover:scale-[1.02]"
+    >
+      {/* Simple thumbnail with fallback - no HLS loading until needed */}
+      <div 
+        className="relative bg-bunny-gray rounded-xl overflow-hidden mb-4 aspect-video cursor-pointer group"
+        onClick={() => onClick(video)}
+      >
+        <img
+          src={video.thumbnailUrl}
+          alt={video.title}
+          className="w-full h-full object-cover transition-all duration-300 group-hover:scale-105"
+          data-testid={`img-thumbnail-${video.id}`}
+          onError={(e) => {
+            const target = e.target as HTMLImageElement;
+            target.style.display = 'none';
+            if (target.parentElement) {
+              target.parentElement.style.background = 'linear-gradient(45deg, #374151, #4b5563)';
+            }
+          }}
+        />
+        
+        {/* Duration badge */}
+        <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded">
+          {formatDuration(video.duration)}
+        </div>
+        
+        {/* Play button overlay */}
+        <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center">
+          <div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center group-hover:bg-white/30 group-hover:scale-110 transition-all duration-300">
+            <Play className="text-white ml-1 text-xl" />
+          </div>
+        </div>
+      </div>
       
       <div className="space-y-2">
         <h3 
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index f3a5246..af9c65e 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -44,7 +44,6 @@ export default function Home() {
   // Update videos when new data comes in
   useEffect(() => {
     if (videosResponse) {
-      console.log('Videos response:', videosResponse);
       if (offset === 0) {
         setAllVideos(videosResponse.videos);
       } else {