diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index aaa8086..78698d5 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -145,9 +145,9 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
 
   return (
     <>
-      <div className="space-y-8">
+      <div className="space-y-4">
         {categories.map((category, categoryIndex) => (
-          <div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-2 mb-6' : 'mb-6'}`}>
+          <div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-2 mb-3' : 'mb-3'}`}>
             <CategoryRow
               category={category}
               onVideoClick={handleVideoClick}
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 33dabb4..af073c8 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -294,10 +294,10 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
         {!showPreview && !hideOverlay && !(isMobile && isVideoPage) && (
           <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 leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300 mb-1" style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
+              <h3 className={`text-white font-extrabold leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300 mb-1 ${isMobile ? 'text-lg' : 'text-base'}`} style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
                 {video.title.split(' - ')[0] || 'go4.video'}
               </h3>
-              <p className="text-white/85 text-sm font-medium 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)'}}>
+              <p className={`text-white/85 font-medium drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300 ${isMobile ? 'text-sm' : 'text-xs'}`} style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
                 {video.title.split(' - ')[1] || video.title}
               </p>
             </div>