diff --git a/scraper/internal/server/ui.go b/scraper/internal/server/ui.go
index 25a66c9..38a9276 100644
--- a/scraper/internal/server/ui.go
+++ b/scraper/internal/server/ui.go
@@ -583,6 +583,14 @@ func (s *Server) handleScrape(w http.ResponseWriter, r *http.Request) {
 
 const rankingTmpl = `
 <div class="max-w-4xl mx-auto px-4 py-10">
+
+  <!-- Cover zoom overlay -->
+  <div id="cover-zoom-overlay"
+       class="fixed inset-0 z-50 hidden items-center justify-center bg-black/80 cursor-zoom-out"
+       onclick="this.classList.add('hidden');this.classList.remove('flex');document.getElementById('cover-zoom-img').src='';">
+    <img id="cover-zoom-img" src="" alt="cover zoomed" class="max-w-[90vw] max-h-[90vh] object-contain rounded-xl shadow-2xl">
+  </div>
+
   <a href="/"
      hx-get="/"
      hx-target="#main-content"
@@ -737,7 +745,8 @@ const rankingTmpl = `
        data-local="1"
        class="group flex gap-3 rounded-xl border border-teal-700 bg-teal-950 p-3 hover:border-teal-400 transition-colors min-w-0">
       {{if .Cover}}
-      <img src="{{.Cover}}" alt="cover" class="w-12 h-[4.5rem] object-cover rounded flex-shrink-0">
+      <img src="{{.Cover}}" alt="cover" class="w-12 h-[4.5rem] object-cover rounded flex-shrink-0 cursor-zoom-in"
+           onclick="event.preventDefault();event.stopPropagation();(function(src){var o=document.getElementById('cover-zoom-overlay');document.getElementById('cover-zoom-img').src=src;o.classList.remove('hidden');o.classList.add('flex');})(this.src)">
       {{end}}
       <div class="min-w-0 flex-1">
         <div class="flex items-start gap-1.5 flex-wrap">
@@ -771,7 +780,8 @@ const rankingTmpl = `
          {{if .SourceURL}}data-scrape-url="{{.SourceURL}}"{{end}}
          class="ranking-card group flex gap-3 rounded-xl border border-zinc-800 bg-zinc-900 p-3 transition-colors min-w-0{{if .SourceURL}} cursor-pointer hover:border-zinc-600{{end}}">
       {{if .Cover}}
-      <img src="{{.Cover}}" alt="cover" class="w-12 h-[4.5rem] object-cover rounded flex-shrink-0">
+      <img src="{{.Cover}}" alt="cover" class="w-12 h-[4.5rem] object-cover rounded flex-shrink-0 cursor-zoom-in"
+           onclick="event.stopPropagation();(function(src){var o=document.getElementById('cover-zoom-overlay');document.getElementById('cover-zoom-img').src=src;o.classList.remove('hidden');o.classList.add('flex');})(this.src)">
       {{end}}
       <div class="min-w-0 flex-1">
         <div class="flex items-start gap-1.5 flex-wrap">