diff --git a/scraper/internal/server/ui.go b/scraper/internal/server/ui.go
index e165a51..f5436ff 100644
--- a/scraper/internal/server/ui.go
+++ b/scraper/internal/server/ui.go
@@ -531,124 +531,119 @@ const rankingTmpl = `
          class="text-sm px-3 py-1.5 rounded-lg bg-zinc-700 hover:bg-zinc-600 text-white inline-flex items-center gap-1">
         View Markdown
       </a>
-      <span class="text-xs text-zinc-500 ml-1">Refresh:</span>
-      {{range .RefreshPages}}
-      <form hx-post="/ranking/refresh"
-            hx-target="#ranking-refresh-status"
-            hx-swap="innerHTML">
-        <input type="hidden" name="pages" value="{{.Pages}}">
-        <button type="submit"
-          class="text-sm px-3 py-1.5 rounded-lg bg-amber-800 hover:bg-amber-600 text-white transition-colors">
-          {{.Label}}
-        </button>
-      </form>
-      {{end}}
     </div>
   </div>
   <div id="ranking-refresh-status" class="mt-2"></div>
 
   <!-- Filter bar -->
-  <div class="mt-4 mb-2">
-    <input id="ranking-filter" type="search" placeholder="Filter by title, genre, status…"
-           autocomplete="off" spellcheck="false"
-           class="w-full rounded-lg bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-amber-500 transition-colors" />
-    <p id="ranking-filter-count" class="text-xs text-zinc-500 mt-1 hidden"></p>
+  <div class="mt-4 mb-4 flex gap-2 items-center">
+    <div class="flex-1 relative">
+      <input id="ranking-filter" type="search" placeholder="Filter by title, author, genre, status…"
+             autocomplete="off" spellcheck="false"
+             class="w-full rounded-lg bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-amber-500 transition-colors" />
+    </div>
+    <p id="ranking-filter-count" class="text-xs text-zinc-500 whitespace-nowrap hidden"></p>
+  </div>
+
+  <!-- Pagination: fetch pages from novelfire -->
+  <div class="flex items-center gap-2 mb-6 flex-wrap">
+    <span class="text-xs text-zinc-500">Fetch pages:</span>
+    {{range .Pages}}
+    <form hx-post="/ranking/refresh"
+          hx-target="#ranking-refresh-status"
+          hx-swap="innerHTML">
+      <input type="hidden" name="pages" value="{{.Pages}}">
+      <button type="submit"
+        class="text-xs px-2.5 py-1 rounded-lg bg-zinc-800 hover:bg-amber-700 border border-zinc-700 hover:border-amber-600 text-zinc-300 hover:text-white transition-colors">
+        {{.Label}}
+      </button>
+    </form>
+    {{end}}
+    <span class="text-xs text-zinc-600 ml-1">
+      (source:
+      <a href="https://novelfire.net/genre-all/sort-popular/status-all/all-novel?page=1"
+         target="_blank" rel="noopener noreferrer"
+         class="text-zinc-500 hover:text-amber-400 underline underline-offset-2">novelfire.net</a>)
+    </span>
   </div>
 
   <!-- Book grid -->
-  <div id="ranking-grid" class="grid gap-4 sm:grid-cols-2 mt-4">
+  <div id="ranking-grid" class="grid gap-3 sm:grid-cols-2 mt-2">
     {{range .Books}}
     {{if .Local}}
-    {{/* Book is in local library — wrap entire card in a clickable link */}}
     <a href="/books/{{.Slug}}"
        hx-get="/books/{{.Slug}}"
        hx-target="#main-content"
        hx-push-url="true"
        hx-swap="innerHTML"
        data-filter="{{.Title}} {{.Author}} {{.Status}} {{range .Genres}}{{.}} {{end}}"
-       class="group block rounded-xl border border-teal-700 bg-teal-950 p-4 hover:border-teal-400 transition-colors">
-      <div class="flex gap-4">
-        {{if .Cover}}
-        <img src="{{.Cover}}" alt="cover" class="w-14 h-20 object-cover rounded flex-shrink-0">
-        {{end}}
-        <div class="min-w-0 flex-1">
-          <div class="flex items-center gap-2">
-            {{if .Rank}}<span class="text-xs font-bold text-amber-400">#{{.Rank}}</span>{{end}}
-            <h2 class="font-semibold text-zinc-100 group-hover:text-teal-300 truncate">{{.Title}}</h2>
-            <span class="ml-auto text-xs px-1.5 py-0.5 rounded bg-teal-800 text-teal-300 flex-shrink-0">In library</span>
-          </div>
-          {{if .Author}}<p class="text-sm text-zinc-400 mt-0.5">{{.Author}}</p>{{end}}
-          <div class="flex gap-2 mt-2 flex-wrap">
-            {{if .Status}}<span class="text-xs px-2 py-0.5 rounded-full bg-teal-900 text-teal-300">{{.Status}}</span>{{end}}
-          </div>
-          {{if .Genres}}
-          <div class="flex gap-1 mt-2 flex-wrap">
-            {{range .Genres}}<span class="text-xs px-1.5 py-0.5 rounded bg-teal-900 text-teal-400">{{.}}</span>{{end}}
-          </div>
-          {{end}}
-          {{if .SourceURL}}
-          <div class="mt-3">
-            <a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
-               title="View on novelfire.net"
-               class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
-              <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-              </svg>
-              Source
-            </a>
-          </div>
-          {{end}}
+       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">
+      {{end}}
+      <div class="min-w-0 flex-1">
+        <div class="flex items-start gap-1.5 flex-wrap">
+          {{if .Rank}}<span class="text-xs font-bold text-amber-400 flex-shrink-0">#{{.Rank}}</span>{{end}}
+          <h2 class="font-semibold text-zinc-100 group-hover:text-teal-300 break-words leading-snug flex-1 min-w-0">{{.Title}}</h2>
+          <span class="text-xs px-1.5 py-0.5 rounded bg-teal-800 text-teal-300 flex-shrink-0">In library</span>
         </div>
+        {{if .Author}}<p class="text-xs text-zinc-400 mt-0.5 truncate">{{.Author}}</p>{{end}}
+        <div class="flex gap-1.5 mt-1.5 flex-wrap">
+          {{if .Status}}<span class="text-xs px-1.5 py-0.5 rounded-full bg-teal-900 text-teal-300">{{.Status}}</span>{{end}}
+          {{range .Genres}}<span class="text-xs px-1.5 py-0.5 rounded bg-teal-900 text-teal-400">{{.}}</span>{{end}}
+        </div>
+        {{if .SourceURL}}
+        <div class="mt-2">
+          <a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
+             class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+            </svg>
+            Source
+          </a>
+        </div>
+        {{end}}
       </div>
     </a>
     {{else}}
-    {{/* Book not yet in local library */}}
     <div data-filter="{{.Title}} {{.Author}} {{.Status}} {{range .Genres}}{{.}} {{end}}"
-         class="group block rounded-xl border border-zinc-800 bg-zinc-900 p-4 hover:border-amber-500 transition-colors">
-      <div class="flex gap-4">
-        {{if .Cover}}
-        <img src="{{.Cover}}" alt="cover" class="w-14 h-20 object-cover rounded flex-shrink-0">
-        {{end}}
-        <div class="min-w-0 flex-1">
-          <div class="flex items-center gap-2">
-            {{if .Rank}}<span class="text-xs font-bold text-amber-400">#{{.Rank}}</span>{{end}}
-            <h2 class="font-semibold text-zinc-100 group-hover:text-amber-400 truncate">{{.Title}}</h2>
-          </div>
-          {{if .Author}}<p class="text-sm text-zinc-400 mt-0.5">{{.Author}}</p>{{end}}
-          <div class="flex gap-2 mt-2 flex-wrap">
-            {{if .Status}}<span class="text-xs px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-300">{{.Status}}</span>{{end}}
-          </div>
-          {{if .Genres}}
-          <div class="flex gap-1 mt-2 flex-wrap">
-            {{range .Genres}}<span class="text-xs px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400">{{.}}</span>{{end}}
-          </div>
-          {{end}}
-          {{if .SourceURL}}
-          <div class="mt-3 flex items-center gap-2">
-            <form hx-post="/ui/scrape/book" hx-swap="outerHTML" hx-target="closest div">
-              <input type="hidden" name="url" value="{{.SourceURL}}">
-              <button type="submit"
-                class="text-xs px-2 py-1 rounded bg-amber-700 hover:bg-amber-600 text-white"
-                title="Scrape full content">
-                Scrape
-              </button>
-            </form>
-            <a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
-               title="View on novelfire.net"
-               class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
-              <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-              </svg>
-              Source
-            </a>
-          </div>
-          {{end}}
+         class="group flex gap-3 rounded-xl border border-zinc-800 bg-zinc-900 p-3 hover:border-amber-500 transition-colors min-w-0">
+      {{if .Cover}}
+      <img src="{{.Cover}}" alt="cover" class="w-12 h-[4.5rem] object-cover rounded flex-shrink-0">
+      {{end}}
+      <div class="min-w-0 flex-1">
+        <div class="flex items-start gap-1.5 flex-wrap">
+          {{if .Rank}}<span class="text-xs font-bold text-amber-400 flex-shrink-0">#{{.Rank}}</span>{{end}}
+          <h2 class="font-semibold text-zinc-100 group-hover:text-amber-400 break-words leading-snug flex-1 min-w-0">{{.Title}}</h2>
         </div>
+        {{if .Author}}<p class="text-xs text-zinc-400 mt-0.5 truncate">{{.Author}}</p>{{end}}
+        <div class="flex gap-1.5 mt-1.5 flex-wrap">
+          {{if .Status}}<span class="text-xs px-1.5 py-0.5 rounded-full bg-zinc-800 text-zinc-300">{{.Status}}</span>{{end}}
+          {{range .Genres}}<span class="text-xs px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400">{{.}}</span>{{end}}
+        </div>
+        {{if .SourceURL}}
+        <div class="mt-2 flex items-center gap-2 flex-wrap">
+          <form hx-post="/ui/scrape/book" hx-swap="outerHTML" hx-target="closest div">
+            <input type="hidden" name="url" value="{{.SourceURL}}">
+            <button type="submit"
+              class="text-xs px-2 py-0.5 rounded bg-amber-700 hover:bg-amber-600 text-white">
+              Scrape
+            </button>
+          </form>
+          <a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
+             class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+            </svg>
+            Source
+          </a>
+        </div>
+        {{end}}
       </div>
     </div>
     {{end}}
     {{else}}
-    <p class="text-zinc-500 col-span-2">No ranking data available. Click "Refresh Rankings" to fetch from novelfire.net.</p>
+    <p class="text-zinc-500 col-span-2">No ranking data. Use the page buttons above to fetch from novelfire.net.</p>
     {{end}}
   </div>
 </div>
@@ -704,12 +699,14 @@ type refreshPage struct {
 	Pages int // 0 means "all pages"
 }
 
-// rankingRefreshPages defines the ordered set of refresh buttons shown on the
-// ranking page. Pages == 0 means "fetch all pages".
+// rankingRefreshPages defines the pagination buttons shown on the ranking page.
+// Each entry fetches that many pages from novelfire.net (100 novels per page).
+// Pages == 0 means fetch all pages.
 var rankingRefreshPages = []refreshPage{
-	{"Top 100", 1},
-	{"Top 300", 3},
-	{"Top 500", 5},
+	{"p.1 (top 100)", 1},
+	{"p.1–3 (top 300)", 3},
+	{"p.1–5 (top 500)", 5},
+	{"p.1–10 (top 1000)", 10},
 	{"All", 0},
 }
 
@@ -729,13 +726,13 @@ func (s *Server) handleRanking(w http.ResponseWriter, r *http.Request) {
 	t := template.Must(template.New("ranking").Parse(rankingTmpl))
 	var buf bytes.Buffer
 	_ = t.Execute(&buf, struct {
-		Books        interface{}
-		CachedAt     string
-		RefreshPages []refreshPage
+		Books    interface{}
+		CachedAt string
+		Pages    []refreshPage
 	}{
-		Books:        toRankingViewItems(rankingItems, s.writer.LocalSlugs()),
-		CachedAt:     cachedAt,
-		RefreshPages: rankingRefreshPages,
+		Books:    toRankingViewItems(rankingItems, s.writer.LocalSlugs()),
+		CachedAt: cachedAt,
+		Pages:    rankingRefreshPages,
 	})
 	s.respond(w, r, "Rankings", buf.String())
 }