diff --git a/reproducibility/site/src/layouts/Default.astro b/reproducibility/site/src/layouts/Default.astro
index 9c0baef..2b5eedf 100644
--- a/reproducibility/site/src/layouts/Default.astro
+++ b/reproducibility/site/src/layouts/Default.astro
@@ -99,6 +99,6 @@ const navLinks = [
     <main class="mx-auto flex w-[90%] min-h-0 flex-1 flex-col overflow-y-auto px-4 pt-3 pb-3">
       <slot />
     </main>
-    <Footer />
+    <Footer paperHref="https://arxiv.org/abs/2604.27421" />
   </body>
 </html>
diff --git a/reproducibility/site/src/pages/index.astro b/reproducibility/site/src/pages/index.astro
index 95a3627..8dcecc0 100644
--- a/reproducibility/site/src/pages/index.astro
+++ b/reproducibility/site/src/pages/index.astro
@@ -158,62 +158,66 @@ const jsonLd = JSON.stringify({
 
 {populated ? (
   <>
-    {/* ── Selector card: Benchmark pills → Dataset dropdown → Retriever pills ── */}
-    <div class="lb-selector-card">
-      {/* Row 1: Benchmark */}
-      <div class="lb-selector-row">
-        <span class="lb-selector-label">Benchmark</span>
-        <div id="lb-bench-pills" class="lb-ret-pills">
-          {benchmarkGroups.map((g) => (
-            <button class:list={["lb-chip", g.key === defaultBenchmark && "active"]} data-bench={g.key}>
-              {g.label}
-            </button>
-          ))}
+    {/* ── Controls bar: Benchmark / Dataset / Retriever, then LLM / Method / Search ── */}
+    <div class="lb-controls" data-lb-filters>
+      {/* Row 1: Benchmark pills · Dataset dropdown · Retriever pills */}
+      <div class="lb-ctrl-row">
+        <div class="lb-ctrl-grp">
+          <span class="lb-selector-label">Benchmark</span>
+          <div id="lb-bench-pills" class="lb-ret-pills">
+            {benchmarkGroups.map((g) => (
+              <button class:list={["lb-chip", g.key === defaultBenchmark && "active"]} data-bench={g.key}>
+                {g.label}
+              </button>
+            ))}
+          </div>
         </div>
-      </div>
-      {/* Row 2: Dataset dropdown — populated entirely by JS on init */}
-      <div class="lb-selector-row">
-        <span class="lb-selector-label">Dataset</span>
-        <select id="lb-ds-select" class="lb-ds-select"></select>
-      </div>
-      {/* Row 3: Retriever */}
-      <div class="lb-selector-row">
-        <span class="lb-selector-label">Retriever</span>
-        <div class="lb-ret-pills" id="lb-ret-pills">
-          <button class="lb-chip active" data-ret="">All</button>
-          {retrievers.map((r: any) => (
-            <button class="lb-chip" data-ret={r.id}>{r.display_name ?? r.id}</button>
-          ))}
+        <div class="lb-divider"></div>
+        <div class="lb-ctrl-grp">
+          <span class="lb-selector-label">Dataset</span>
+          {/* populated entirely by JS on init */}
+          <select id="lb-ds-select" class="lb-ds-select"></select>
+        </div>
+        <div class="lb-divider"></div>
+        <div class="lb-ctrl-grp">
+          <span class="lb-selector-label">Retriever</span>
+          <div class="lb-ret-pills" id="lb-ret-pills">
+            <button class="lb-chip active" data-ret="">All</button>
+            {retrievers.map((r: any) => (
+              <button class="lb-chip" data-ret={r.id}>{r.display_name ?? r.id}</button>
+            ))}
+          </div>
         </div>
       </div>
-    </div>
-
-    {/* ── Filter card: Model + Method chips + Search ── */}
-    <div class="lb-filter-card" data-lb-filters>
-      <div class="lb-filter-row">
-        <div class="lb-filter-group" data-group="model">
+      {/* Row 2: LLM dropdown · Method dropdown · Search · legend */}
+      <div class="lb-ctrl-row">
+        <div class="lb-ctrl-grp">
           <span class="lb-filter-label">LLM</span>
-          <button class="lb-chip active" data-value="">All</button>
-          {(models as any[]).map((m) => (
-            <button class="lb-chip" data-value={m.id}>{m.display ?? m.id}</button>
-          ))}
+          <select id="lb-model-select" class="lb-ds-select">
+            <option value="">All LLMs</option>
+            {(models as any[]).map((m) => (
+              <option value={m.id}>{m.display ?? m.id}</option>
+            ))}
+          </select>
         </div>
-        <div class="lb-filter-group" data-group="method">
+        <div class="lb-divider"></div>
+        <div class="lb-ctrl-grp">
           <span class="lb-filter-label">Method</span>
-          <button class="lb-chip active" data-value="">All</button>
-          {(methods as any[]).map((m) => (
-            <button class="lb-chip" data-value={m.id}>{m.display ?? m.display_name ?? m.id}</button>
-          ))}
+          <select id="lb-method-select" class="lb-ds-select">
+            <option value="">All methods</option>
+            {(methods as any[]).map((m) => (
+              <option value={m.id}>{m.display ?? m.display_name ?? m.id}</option>
+            ))}
+          </select>
         </div>
-      </div>
-      <div class="lb-filter-row">
+        <div class="lb-divider"></div>
         <div class="lb-search-wrap">
           <div class="lb-search-input">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
-            <input id="lb-search" placeholder="Filter by method or LLM…" autocomplete="off" />
+            <input id="lb-search" placeholder="Filter…" autocomplete="off" />
           </div>
           <span class="lb-row-count">
-            <span id="lb-shown">0</span> / {matrixRows.length} configs · {overview.run_count} runs
+            <span id="lb-shown">0</span> / {matrixRows.length} · {overview.run_count} runs
           </span>
         </div>
         <span class="lb-best-legend" style="margin-left:auto">
@@ -444,16 +448,13 @@ const jsonLd = JSON.stringify({
 
   // ------ model / method chips ------------------------------------------------
   const filterState = { model: "", method: "" };
-  document.querySelectorAll("[data-lb-filters] [data-group]").forEach((g) => {
-    const key = g.dataset.group;
-    g.querySelectorAll("button.lb-chip").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        g.querySelectorAll("button.lb-chip").forEach((b) => b.classList.remove("active"));
-        btn.classList.add("active");
-        filterState[key] = btn.dataset.value ?? "";
-        renderTable();
-      });
-    });
+  document.getElementById("lb-model-select")?.addEventListener("change", (e) => {
+    filterState.model = e.target.value ?? "";
+    renderTable();
+  });
+  document.getElementById("lb-method-select")?.addEventListener("change", (e) => {
+    filterState.method = e.target.value ?? "";
+    renderTable();
   });
 
   // ------ search --------------------------------------------------------------
diff --git a/reproducibility/site/src/styles/global.css b/reproducibility/site/src/styles/global.css
index 3ffc1ba..e331790 100644
--- a/reproducibility/site/src/styles/global.css
+++ b/reproducibility/site/src/styles/global.css
@@ -33,6 +33,7 @@
 /* ── Font family: Source Sans 3 matching HuggingFace / Gradio default theme ── */
 .lb-selector-card,
 .lb-filter-card,
+.lb-controls,
 .lb-table-card,
 table.lb,
 .lb-exp-panel,
@@ -141,6 +142,50 @@ table.lb,
 /* Dark mode: keep options readable */
 .lb-ds-select option { background: var(--qg-bg, #1a1d27); color: var(--qg-fg, #e2e8f0); }
 
+/* ---------- unified controls bar (home page) ----------------------------- */
+/* Single card: Benchmark / Dataset / Retriever on row 1; LLM / Method /
+ * Search on row 2, groups separated by vertical dividers. Reuses .lb-chip,
+ * .lb-ds-select, .lb-search-*, .lb-best-legend primitives. */
+.lb-controls {
+  background: var(--qg-bg-soft);
+  border: 1px solid var(--qg-border);
+  border-radius: 12px;
+  padding: 8px 12px;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.lb-controls .lb-ctrl-row {
+  display: flex;
+  align-items: center;
+  gap: 8px 14px;
+  flex-wrap: wrap;
+}
+.lb-controls .lb-ctrl-row + .lb-ctrl-row {
+  border-top: 1px solid var(--qg-border-soft, var(--qg-border));
+  padding-top: 7px;
+}
+.lb-controls .lb-selector-label,
+.lb-controls .lb-filter-label { min-width: 0; margin: 0; }
+.lb-controls .lb-ctrl-grp {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.lb-controls .lb-divider {
+  width: 1px;
+  align-self: stretch;
+  background: var(--qg-border);
+  margin: 1px 2px;
+}
+.lb-controls .lb-chip { font-size: 13.5px; padding: 4px 10px; }
+.lb-controls .lb-ds-select { font-size: 13.5px; padding: 5px 30px 5px 11px; min-width: 140px; }
+.lb-controls .lb-search-input { padding: 4px 9px; min-width: 200px; }
+.lb-controls .lb-search-input input { font-size: 12.5px; }
+@media (max-width: 760px) { .lb-controls .lb-divider { display: none; } }
+
 /* ---------- filter card -------------------------------------------------- */
 .lb-filter-card {
   background: var(--qg-bg-soft);
diff --git a/web/shared/components/Footer.astro b/web/shared/components/Footer.astro
index 515d072..3fc2739 100644
--- a/web/shared/components/Footer.astro
+++ b/web/shared/components/Footer.astro
@@ -11,17 +11,23 @@ interface FooterLink {
 interface Props {
   /** Lab / org name displayed in the copyright line. */
   org?: string;
+  /** Override the "Paper" link target (defaults to the WWW toolkit paper). */
+  paperHref?: string;
   /** Extra links appended after the defaults. */
   extraLinks?: FooterLink[];
 }
 
-const { org = "ls3-lab", extraLinks = [] } = Astro.props;
+const {
+  org = "ls3-lab",
+  paperHref = "https://arxiv.org/abs/2511.15996",
+  extraLinks = [],
+} = Astro.props;
 const year = new Date().getFullYear();
 
 const baseLinks: FooterLink[] = [
   { label: "GitHub", href: "https://github.com/ls3-lab/QueryGym" },
   { label: "Docs", href: "https://querygym.readthedocs.io" },
-  { label: "Paper", href: "https://arxiv.org/abs/2511.15996" },
+  { label: "Paper", href: paperHref },
 ];
 ---