diff --git a/client/index.html b/client/index.html
index b986c0a..7c3db11 100644
--- a/client/index.html
+++ b/client/index.html
@@ -67,7 +67,7 @@
         align-items: center;
         justify-content: center;
         z-index: 9999;
-        font-family: Arial, sans-serif;
+        font-family: 'Poppins', 'Inter', Arial, sans-serif;
       ">
         <div style="text-align: center; color: white;">
           <div style="
@@ -90,8 +90,8 @@
               margin-left: 4px;
             "></div>
           </div>
-          <h2 style="margin: 0; font-size: 24px; font-weight: bold;">go4.video</h2>
-          <p style="margin: 10px 0 0; opacity: 0.8;">Loading...</p>
+          <h2 style="margin: 0; font-size: 28px; font-weight: 800; letter-spacing: 1px; text-shadow: 2px 2px 8px rgba(0,0,0,0.5);">go4.video</h2>
+          <p style="margin: 10px 0 0; opacity: 0.9; font-size: 16px; font-weight: 500;">Loading amazing content...</p>
         </div>
       </div>
       <style>
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 82b85dc..3595e17 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -129,7 +129,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
     >
       {/* Video preview container */}
       <div 
-        className="relative gradient-card rounded-xl overflow-hidden aspect-[16/9] cursor-pointer group"
+        className="relative gradient-card rounded-xl overflow-hidden aspect-[16/9] cursor-pointer group hover:shadow-2xl transition-all duration-300"
         onClick={() => onClick?.(video)}
       >
         {/* Static thumbnail - always visible */}
@@ -209,14 +209,16 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
           </div>
         )}
         
-        {/* Title overlay - only show when not playing preview and hideOverlay is false */}
+        {/* Modern gradient overlay with title */}
         {!showPreview && !hideOverlay && (
-          <div className="absolute bottom-2 left-2 right-2 bg-black/40 text-white px-2 py-1 rounded backdrop-blur-sm z-10">
-            <div className="truncate font-semibold text-base bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">{video.title}</div>
-            <div className="text-xs text-gray-300 flex items-center space-x-1 mt-0.5">
-              <span>{formatViews(video.views)}</span>
-              <span>•</span>
-              <span>{formatDate(video.createdAt)}</span>
+          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10 flex items-end p-4 group-hover:from-black/95 transition-all duration-300">
+            <div className="w-full">
+              <h3 className="text-white font-extrabold text-xl mb-2 leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
+                {video.title.split(' - ')[1] || video.title}
+              </h3>
+              <p className="text-white/95 text-base font-bold drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
+                {video.title.split(' - ')[0] || 'go4.video'}
+              </p>
             </div>
           </div>
         )}
diff --git a/client/src/index.css b/client/src/index.css
index c5d7f1a..a252949 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;