diff --git a/frontend/src/components/VideoCard.jsx b/frontend/src/components/VideoCard.jsx
index 0424960..d01a0a1 100644
--- a/frontend/src/components/VideoCard.jsx
+++ b/frontend/src/components/VideoCard.jsx
@@ -33,10 +33,8 @@ function IconBtn({ onClick, title, active, pending, children }) {
       onClick={(e) => { e.stopPropagation(); onClick(e); }}
       title={title}
       className={clsx(
-        "flex items-center justify-center w-6 h-6 rounded-full transition-all duration-150",
-        active
-          ? "text-accent"
-          : "text-zinc-600 hover:text-zinc-200",
+        "flex items-center justify-center w-7 h-7 rounded-full transition-all duration-150",
+        active ? "text-accent" : "text-zinc-600 hover:text-zinc-200",
         pending && "opacity-60 cursor-default",
       )}
     >
@@ -104,7 +102,6 @@ function ThumbnailBlock({ video, isWatched, duration, calmMode, onDismiss, class
         </div>
       )}
 
-      {/* Dismiss */}
       {video.is_recommended && !calmMode && (
         <button
           onClick={(e) => { e.stopPropagation(); onDismiss?.(); }}
@@ -117,35 +114,30 @@ function ThumbnailBlock({ video, isWatched, duration, calmMode, onDismiss, class
         </button>
       )}
 
-      {/* Duration */}
       {duration && (
-        <span className="absolute bottom-2 right-2 bg-black/75 text-white text-[10px] font-medium px-1.5 py-0.5 rounded-md font-mono tabular-nums">
+        <span className="absolute bottom-1.5 right-1.5 bg-black/80 text-white text-[10px] font-medium px-1.5 py-0.5 rounded font-mono tabular-nums">
           {duration}
         </span>
       )}
 
-      {/* Resolution */}
       {video.download_resolution && (
-        <span className="absolute bottom-2 left-2 text-[10px] font-medium px-1.5 py-0.5 rounded-md font-mono text-accent bg-black/75">
+        <span className="absolute bottom-1.5 left-1.5 text-[10px] font-medium px-1.5 py-0.5 rounded font-mono text-accent bg-black/75">
           {video.download_resolution}
         </span>
       )}
 
-      {/* Watched dot */}
       {isWatched && (
         <span className="absolute top-2 left-2 w-2 h-2 rounded-full bg-accent shadow-[0_0_6px_rgba(var(--color-accent-rgb),0.8)]" />
       )}
 
-      {/* Play hover overlay */}
-      <div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-        <div className="w-11 h-11 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center border border-white/20">
+      <div className="absolute inset-0 bg-black/25 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+        <div className="w-10 h-10 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center border border-white/20">
           <svg className="w-5 h-5 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24">
             <path d="M8 5v14l11-7z" />
           </svg>
         </div>
       </div>
 
-      {/* Progress bar */}
       {video.watch_progress_seconds > 0 && video.duration_seconds > 0 && (
         <div className="absolute bottom-0 inset-x-0 h-[3px] bg-white/10">
           <div
@@ -176,13 +168,15 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
     ? (Date.now() - new Date(channelMeta.last_published_at)) / (1000 * 60 * 60 * 24) > 180
     : false;
 
+  const avatarUrl = video.channel_thumbnail_url ?? channelMeta?.thumbnail_url ?? null;
+  const avatarLetter = video.channel_name?.[0]?.toUpperCase() ?? "?";
+
   const internalId = video.id ?? video.local_video_id ?? null;
-  const isDownloaded = video.is_downloaded;
   const isWatched = video.is_watched;
   const duration = formatDuration(video.duration_seconds);
   const date = formatDate(video.published_at);
 
-  const [downloaded, setDownloaded] = useState(isDownloaded);
+  const [downloaded, setDownloaded] = useState(video.is_downloaded);
   const [queued, setQueued] = useState(video.queued ?? false);
   const [liked, setLiked] = useState(video.liked ?? false);
 
@@ -204,7 +198,7 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
   });
 
   const actions = (
-    <div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
+    <div className="flex items-center gap-0" onClick={(e) => e.stopPropagation()}>
       <IconBtn onClick={() => navigate(`/watch/${video.youtube_video_id}`)} title="Watch">
         <svg className="w-3.5 h-3.5 ml-px" fill="currentColor" viewBox="0 0 24 24">
           <path d="M8 5v14l11-7z" />
@@ -251,40 +245,53 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
     </div>
   );
 
-  // ── List variant ─────────────────────────────────────────────────────────
+  // ── List variant ────────────────────────────────────────────────────────────
   if (variant === "list") {
     return (
       <div
         onClick={() => navigate(`/watch/${video.youtube_video_id}`)}
-        className="group flex gap-5 px-3 py-3.5 rounded-2xl cursor-pointer hover:bg-zinc-800/50 transition-colors duration-150"
+        className="group flex gap-3 sm:gap-4 px-2 sm:px-3 py-2 sm:py-3 rounded-xl cursor-pointer hover:bg-zinc-800/50 transition-colors duration-150"
       >
+        {/* Thumbnail — compact on mobile, wide on desktop */}
         <ThumbnailBlock
           video={video}
           isWatched={isWatched}
           duration={duration}
           calmMode={calmMode}
           onDismiss={() => dismissMut.mutate()}
-          className="w-56 sm:w-72 aspect-video rounded-xl shrink-0"
+          className="w-32 sm:w-60 md:w-72 aspect-video rounded-lg shrink-0"
         />
 
-        <div className="flex flex-col min-w-0 flex-1 py-0.5 gap-2">
+        <div className="flex flex-col min-w-0 flex-1 gap-1 sm:gap-1.5 py-px sm:py-0.5">
           {/* Title */}
-          <h3 className="font-semibold text-[15px] leading-snug text-zinc-50 line-clamp-2">
+          <h3 className="font-semibold text-[12px] sm:text-[14px] leading-snug text-zinc-50 line-clamp-2">
             {video.title}
           </h3>
 
-          {/* Channel · date · badges */}
-          <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-[12px] text-zinc-400 truncate">{video.channel_name}</span>
-            {date && <span className="text-zinc-700 text-[12px]">·</span>}
-            {date && <span className="text-[12px] text-zinc-600 shrink-0">{date}</span>}
+          {/* Channel row */}
+          <div className="flex items-center gap-1.5 min-w-0 flex-wrap">
+            {avatarUrl && (
+              <img src={avatarUrl} alt="" className="hidden sm:block w-4 h-4 rounded-full object-cover shrink-0" />
+            )}
+            <span className="text-[10px] sm:text-[11px] text-zinc-400 truncate">{video.channel_name}</span>
+            {date && (
+              <>
+                <span className="text-zinc-700 text-[10px]">·</span>
+                <span className="text-[10px] sm:text-[11px] text-zinc-500 shrink-0">{date}</span>
+              </>
+            )}
+          </div>
+
+          {/* Views + badges */}
+          <div className="flex items-center gap-1.5 flex-wrap text-[10px] text-zinc-600">
+            {video.view_count > 0 && <span>{formatViews(video.view_count)}</span>}
             {video.is_recommended && !calmMode && (
-              <span className="text-[10px] font-semibold tracking-wide text-indigo-400 bg-indigo-950/60 px-1.5 py-0.5 rounded-full">
+              <span className="text-indigo-400 bg-indigo-950/60 px-1.5 py-0.5 rounded-full font-semibold tracking-wide text-[9px]">
                 Discover
               </span>
             )}
             {isDormant && !calmMode && (
-              <span title="No uploads in 6+ months" className="text-[10px] text-zinc-700 tracking-widest">zzz</span>
+              <span title="No uploads in 6+ months" className="text-zinc-700 tracking-widest text-[9px]">zzz</span>
             )}
             {channelNote && (
               <span title={channelNote} className="text-zinc-700 hover:text-zinc-400 transition-colors cursor-default">
@@ -295,17 +302,15 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
             )}
           </div>
 
-          {/* Description */}
-          {video.description ? (
-            <p className="text-[12px] leading-relaxed text-zinc-500 line-clamp-3 flex-1">
+          {/* Description — desktop only, 2 lines max */}
+          {video.description && (
+            <p className="hidden sm:block text-[11px] leading-relaxed text-zinc-500 line-clamp-2">
               {video.description.replace(/\n+/g, " ")}
             </p>
-          ) : (
-            <div className="flex-1" />
           )}
 
-          {/* Actions — fade in on hover */}
-          <div className="opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150 mt-auto">
+          {/* Actions — always visible on mobile, fade on desktop */}
+          <div className="mt-auto pt-1 sm:opacity-0 sm:pointer-events-none sm:group-hover:opacity-100 sm:group-hover:pointer-events-auto sm:transition-opacity sm:duration-150">
             {actions}
           </div>
         </div>
@@ -313,10 +318,7 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
     );
   }
 
-  // ── Grid variant ─────────────────────────────────────────────────────────
-  const avatarUrl = video.channel_thumbnail_url ?? channelMeta?.thumbnail_url ?? null;
-  const avatarLetter = video.channel_name?.[0]?.toUpperCase() ?? "?";
-
+  // ── Grid variant ────────────────────────────────────────────────────────────
   return (
     <div
       onClick={() => navigate(`/watch/${video.youtube_video_id}`)}
@@ -335,56 +337,62 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
         className="aspect-video rounded-t-2xl overflow-hidden"
       />
 
-      <div className="flex gap-2.5 p-3 flex-1">
+      <div className="flex gap-2 sm:gap-2.5 p-2 sm:p-3 flex-1">
         {/* Channel avatar */}
-        <div className="shrink-0 mt-0.5" onClick={(e) => { e.stopPropagation(); navigate(`/channels/${video.channel_id}`); }}>
+        <div
+          className="shrink-0 mt-0.5"
+          onClick={(e) => { e.stopPropagation(); navigate(`/channels/${video.channel_id}`); }}
+        >
           {avatarUrl ? (
-            <img src={avatarUrl} alt="" className="w-8 h-8 rounded-full object-cover hover:ring-2 hover:ring-accent/50 transition-all" />
+            <img
+              src={avatarUrl}
+              alt=""
+              className="w-7 h-7 sm:w-8 sm:h-8 rounded-full object-cover hover:ring-2 hover:ring-accent/50 transition-all"
+            />
           ) : (
-            <div className="w-8 h-8 rounded-full bg-zinc-700 flex items-center justify-center text-xs font-bold text-zinc-400 hover:ring-2 hover:ring-accent/50 transition-all">
+            <div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-zinc-700 flex items-center justify-center text-[11px] font-bold text-zinc-400 hover:ring-2 hover:ring-accent/50 transition-all">
               {avatarLetter}
             </div>
           )}
         </div>
 
         {/* Text + actions */}
-        <div className="flex flex-col gap-1 min-w-0 flex-1">
-          <p className="font-medium text-[13px] leading-snug text-zinc-50 line-clamp-2">
+        <div className="flex flex-col gap-0.5 sm:gap-1 min-w-0 flex-1">
+          <p className="font-medium text-[12px] sm:text-[13px] leading-snug text-zinc-50 line-clamp-2">
             {video.title}
           </p>
 
-          <div className="flex items-center gap-1.5 flex-wrap">
-            <span className="text-[11px] text-zinc-500 truncate">{video.channel_name}</span>
+          <div className="flex items-center gap-1 flex-wrap">
+            <span className="text-[10px] sm:text-[11px] text-zinc-500 truncate">{video.channel_name}</span>
             {channelNote && (
-              <span title={channelNote} className="text-zinc-700 hover:text-zinc-400 transition-colors cursor-default">
+              <span title={channelNote} className="text-zinc-700 hover:text-zinc-400 transition-colors cursor-default shrink-0">
                 <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M3 5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2zm2 0v14h14V5zm2 3h10v2H7zm0 4h7v2H7z"/>
                 </svg>
               </span>
             )}
             {isDormant && !calmMode && (
-              <span title="No uploads in 6+ months" className="text-[9px] text-zinc-700 tracking-widest">zzz</span>
+              <span title="No uploads in 6+ months" className="text-[9px] text-zinc-700 tracking-widest shrink-0">zzz</span>
             )}
             {video.is_recommended && !calmMode && (
-              <span className="text-[10px] font-semibold tracking-wide text-indigo-400 bg-indigo-950/60 px-1.5 py-0.5 rounded-full">
+              <span className="text-[9px] font-semibold tracking-wide text-indigo-400 bg-indigo-950/60 px-1 py-px rounded-full shrink-0">
                 Discover
               </span>
             )}
           </div>
 
-          <div className="flex items-center gap-1.5 flex-wrap text-[11px] text-zinc-600">
+          <div className="flex items-center gap-1 flex-wrap text-[10px] text-zinc-600">
             {date && <span>{date}</span>}
-            {video.view_count > 0 && <><span>·</span><span>{formatViews(video.view_count)}</span></>}
+            {video.view_count > 0 && (
+              <>
+                <span>·</span>
+                <span>{formatViews(video.view_count)}</span>
+              </>
+            )}
           </div>
 
-          {video.description && (
-            <p className="hidden sm:block text-[11px] leading-relaxed text-zinc-500 line-clamp-2 mt-0.5">
-              {video.description.replace(/\n+/g, " ")}
-            </p>
-          )}
-
-          {/* Actions — fade in on hover */}
-          <div className="mt-auto pt-1.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150">
+          {/* Actions — desktop hover only (touch users tap to watch) */}
+          <div className="mt-auto pt-1 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150">
             {actions}
           </div>
         </div>