diff --git a/web/templates/settings/home.html b/web/templates/settings/home.html
index 480261c..20838cd 100644
--- a/web/templates/settings/home.html
+++ b/web/templates/settings/home.html
@@ -1,126 +1,213 @@
 {% extends "base.html" %}
 {% load static %}
 
-{# Leave body_class empty so Classic gradient is controlled by base.html logic #}
+{# Let base.html control gradients via theme #}
 {% block body_class %}{% endblock %}
 
 {% block content %}
-<div class="container">
-  <h1 class="page-title">Settings</h1>
+<div class="container settings-console">
 
-  <!-- Intro / placeholder -->
-  <div class="card" style="padding:20px; margin-bottom:20px;">
-    <p class="muted small">Add your settings here when you’re ready.</p>
+  <!-- Header -->
+  <div class="cc-header">
+    <h1 class="cc-title">Command Center</h1>
+    <div class="cc-subtitle">Personalization · Privacy · Security</div>
   </div>
 
-  <!-- Privacy: Clear History -->
-  <div class="card" style="margin-top:18px; padding:20px;">
-    <h2 class="page-title">Privacy · Clear My History</h2>
-    <p class="muted" style="margin:-6px 0 12px;">
-      Remove your Recent Searches and Recently Viewed illustrations from the Search page.
-    </p>
-    <button id="clear-history-btn" class="btn btn-danger">Clear History</button>
-  </div>
-
-  <!-- Theme chooser -->
-  <div class="card" style="padding:20px; margin-top:18px;">
-    <h2 class="page-title">Appearance · Theme</h2>
-    <form method="post" action="{% url 'set_theme' %}" style="margin-top:10px;">
-      {% csrf_token %}
-      <label for="theme" class="small muted" style="display:block; margin-bottom:6px;">Choose site theme</label>
-      <select id="theme" name="theme" class="form-control" style="max-width: 320px;">
-        {% for t in available_themes %}
-          <option value="{{ t }}" {% if request.session.theme|default:'classic' == t %}selected{% endif %}>
-            {{ t|capfirst }}
-          </option>
-        {% endfor %}
-      </select>
-      <button class="btn btn-primary" style="margin-top:10px;">Save</button>
-      <small class="text-muted" style="display:block;margin-top:6px;">Changes apply immediately across the site.</small>
-    </form>
-  </div>
-
-  <!-- Highlight search hits -->
-  <div class="card" style="padding:20px; margin-top:18px;">
-    <h2 class="page-title">Reading · Highlight Search Hits</h2>
-    <label style="display:flex;gap:10px;align-items:center; margin-top:8px;">
-      <input id="highlightHitsToggle" type="checkbox">
-      <span>Highlight search hits on entry page</span>
-    </label>
-    <p class="small muted" style="margin-top:6px;">When on, your last search terms are lightly highlighted on result pages—but only in the fields you searched.</p>
-  </div>
-
-  {% if user.is_authenticated and user.is_superuser %}
-    <h1 class="page-title" style="margin-top:22px;">Tools</h1>
-
-    <!-- Release Announcement -->
-    <div class="card" style="margin-top:18px; padding:20px;">
-      <h2 class="page-title">Release Announcement</h2>
-      <p class="muted" style="margin:-6px 0 12px;">
-        Publish a message to show once to each user on their next search page load.
-      </p>
-
-      <form method="post" action="{% url 'announcement_tools' %}" class="vertical-stack" style="gap:10px;">
+  <!-- Quick Controls Strip -->
+  <div class="cc-quick card">
+    <div class="qc-item">
+      <div class="qc-label">Theme</div>
+      <form method="post" action="{% url 'set_theme' %}" class="qc-inline">
         {% csrf_token %}
-        {% if announcement_form %}
-          {{ announcement_form.as_p }}
-        {% else %}
-          <label class="small muted" style="display:block; margin-bottom:4px;">Title (optional)</label>
-          <input type="text" name="title" class="tool-input">
-
-          <label class="small muted" style="display:block; margin:10px 0 4px;">Message</label>
-          <textarea name="message" rows="6" class="tool-input" placeholder="What’s new in this release…"></textarea>
-
-          <label style="display:flex; gap:6px; align-items:center; margin-top:8px;">
-            <input type="checkbox" name="is_active" checked> Active
-          </label>
-        {% endif %}
-
-        <button class="btn btn-primary">Publish</button>
+        <select id="theme" name="theme" class="qc-select">
+          {% for t in available_themes %}
+            <option value="{{ t }}" {% if request.session.theme|default:'classic' == t %}selected{% endif %}>{{ t|capfirst }}</option>
+          {% endfor %}
+        </select>
+        <button class="btn btn-primary qc-btn">Save</button>
       </form>
+    </div>
 
-      {% if announcements_recent %}
-        <h3 style="margin-top:16px;">Recent</h3>
-        <table class="table">
-          <thead>
-            <tr><th>ID</th><th>Title</th><th>Active?</th><th>Window</th><th>Created</th></tr>
-          </thead>
-          <tbody>
-            {% for a in announcements_recent %}
-              <tr>
-                <td>#{{ a.id }}</td>
-                <td>{{ a.title|default:"(untitled)" }}</td>
-                <td>{{ a.is_current|yesno:"✅,—" }}</td>
-                <td>
-                  {{ a.start_at|date:"Y-m-d H:i" }}
-                  {% if a.end_at %} → {{ a.end_at|date:"Y-m-d H:i" }}{% endif %}
-                </td>
-                <td>{{ a.created_at|date:"Y-m-d H:i" }}</td>
-              </tr>
+    <div class="qc-divider" role="separator"></div>
+
+    <div class="qc-item">
+      <div class="qc-label">Highlight Hits</div>
+      <label class="switch">
+        <input id="highlightHitsToggle" type="checkbox">
+        <span class="slider"></span>
+      </label>
+    </div>
+
+    <div class="qc-divider" role="separator"></div>
+
+    <div class="qc-item">
+      <div class="qc-label">Clear History</div>
+      <button id="clear-history-btn" class="btn btn-danger">Clear</button>
+    </div>
+  </div>
+
+  <!-- 3-Column Grid -->
+  <div class="cc-grid">
+
+    <!-- Appearance -->
+    <section class="card cc-panel">
+      <div class="cc-panel-head">
+        <div class="cc-kicker">Appearance</div>
+        <h2 class="cc-panel-title">Theme & Surface</h2>
+      </div>
+
+      <div class="cc-panel-body">
+        <p class="muted small">Pick a theme you like; preview applies instantly.</p>
+
+        <form method="post" action="{% url 'set_theme' %}" class="cc-form">
+          {% csrf_token %}
+          <label for="theme" class="cc-label">Theme</label>
+          <select id="theme-dup" class="form-control" style="max-width:320px;">
+            {% for t in available_themes %}
+              <option value="{{ t }}" {% if request.session.theme|default:'classic' == t %}selected{% endif %}>
+                {{ t|capfirst }}
+              </option>
             {% endfor %}
-          </tbody>
-        </table>
-      {% endif %}
-    </div>
+          </select>
+          <div class="cc-actions">
+            <button class="btn btn-primary" onclick="return saveThemeFromDuplicate()">Save</button>
+            <small class="text-muted">Applies across the site</small>
+          </div>
+        </form>
 
-    <!-- Security tools -->
-    <div class="card" style="margin-top:18px; padding:20px;">
-      <h2 class="page-title">Security · Login Attempts (7 days)</h2>
-      <p class="muted" style="margin:-6px 0 12px;">
-        View successful and failed login attempts from the last week.
-      </p>
-      <a class="btn btn-secondary" href="{% url 'login_attempts' %}">Open Login Attempts</a>
-    </div>
+        <div class="swatch-grid">
+          {% for t in available_themes %}
+          <button class="swatch" data-theme="{{ t }}" aria-label="Preview {{ t|capfirst }}">
+            <span class="swatch-name">{{ t|capfirst }}</span>
+          </button>
+          {% endfor %}
+        </div>
+      </div>
+    </section>
 
-    <div class="card" style="margin-top:18px; padding:20px;">
-      <h2 class="page-title">Security · Audit Log</h2>
-      <p class="muted" style="margin:-6px 0 12px;">Track adds, edits (with per-field changes), and deletes. Newest first, latest 100 entries.</p>
-      <a class="btn btn-secondary" href="{% url 'audit_log' %}">Open Audit Log</a>
-    </div>
-  {% endif %}
+    <!-- Reading -->
+    <section class="card cc-panel">
+      <div class="cc-panel-head">
+        <div class="cc-kicker">Reading</div>
+        <h2 class="cc-panel-title">Search Highlights</h2>
+      </div>
+      <div class="cc-panel-body">
+        <div class="cc-row">
+          <label class="cc-label">Highlight search hits</label>
+          <label class="switch">
+            <input id="highlightHitsToggle-dup" type="checkbox">
+            <span class="slider"></span>
+          </label>
+        </div>
+        <p class="small muted">Lightly marks terms you searched for on entry pages.</p>
+      </div>
+    </section>
+
+    <!-- Privacy -->
+    <section class="card cc-panel">
+      <div class="cc-panel-head">
+        <div class="cc-kicker">Privacy</div>
+        <h2 class="cc-panel-title">Your Footprint</h2>
+      </div>
+      <div class="cc-panel-body">
+        <p class="small muted">Remove Recent Searches and Recently Viewed.</p>
+        <button id="clear-history-btn-dup" class="btn btn-danger">Clear My History</button>
+      </div>
+    </section>
+
+    {% if user.is_authenticated and user.is_superuser %}
+
+    <!-- Security (accented) -->
+    <section class="card cc-panel cc-sec">
+      <div class="cc-sec-bg"></div>
+      <div class="cc-panel-head">
+        <div class="cc-kicker cc-kicker-sec">Security</div>
+        <h2 class="cc-panel-title">Monitoring</h2>
+      </div>
+      <div class="cc-panel-body">
+        <div class="sec-grid">
+          <a class="sec-tile" href="{% url 'login_attempts' %}">
+            <div class="sec-icon">
+              <!-- shield -->
+              <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M12 2l7 3v6c0 5-3.8 9.7-7 11-3.2-1.3-7-6-7-11V5l7-3z"/></svg>
+            </div>
+            <div class="sec-meta">
+              <div class="sec-title">Login Attempts</div>
+              <div class="sec-sub">Last 7 days</div>
+            </div>
+            <div class="sec-cta">Open →</div>
+          </a>
+
+          <a class="sec-tile" href="{% url 'audit_log' %}">
+            <div class="sec-icon">
+              <!-- activity -->
+              <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M3 12h3l2 7 4-14 3 10h6"/></svg>
+            </div>
+            <div class="sec-meta">
+              <div class="sec-title">Audit Log</div>
+              <div class="sec-sub">Latest 100</div>
+            </div>
+            <div class="sec-cta">Open →</div>
+          </a>
+        </div>
+        <p class="tiny muted" style="margin-top:10px;">Superuser tools</p>
+      </div>
+    </section>
+
+    <!-- Release Announcement (compact) -->
+    <section class="card cc-panel">
+      <div class="cc-panel-head">
+        <div class="cc-kicker">Comms</div>
+        <h2 class="cc-panel-title">Release Announcement</h2>
+      </div>
+      <div class="cc-panel-body">
+        <form method="post" action="{% url 'announcement_tools' %}" class="cc-form">
+          {% csrf_token %}
+          {% if announcement_form %}
+            {{ announcement_form.as_p }}
+          {% else %}
+            <label class="cc-label">Title</label>
+            <input type="text" name="title" class="tool-input">
+            <label class="cc-label">Message</label>
+            <textarea name="message" rows="5" class="tool-input" placeholder="What’s new…"></textarea>
+            <label class="cc-check"><input type="checkbox" name="is_active" checked> Active</label>
+          {% endif %}
+          <div class="cc-actions">
+            <button class="btn btn-primary">Publish</button>
+          </div>
+        </form>
+
+        {% if announcements_recent %}
+          <div class="cc-table-wrap">
+            <table class="table small">
+              <thead>
+                <tr><th>ID</th><th>Title</th><th>Active?</th><th>Window</th><th>Created</th></tr>
+              </thead>
+              <tbody>
+                {% for a in announcements_recent %}
+                <tr>
+                  <td>#{{ a.id }}</td>
+                  <td>{{ a.title|default:"(untitled)" }}</td>
+                  <td>{{ a.is_current|yesno:"✅,—" }}</td>
+                  <td>
+                    {{ a.start_at|date:"Y-m-d H:i" }}
+                    {% if a.end_at %} → {{ a.end_at|date:"Y-m-d H:i" }}{% endif %}
+                  </td>
+                  <td>{{ a.created_at|date:"Y-m-d H:i" }}</td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
+        {% endif %}
+      </div>
+    </section>
+
+    {% endif %}
+  </div>
 </div>
 
-<!-- Toast for Clear History -->
+<!-- Toast -->
 <div id="toast-clear-history"
      style="position:fixed; right:16px; bottom:16px; padding:10px 14px; border-radius:10px;
             background:#111827; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.25);
@@ -129,107 +216,227 @@
 </div>
 
 <style>
-  .tool-input {
-    border:1px solid var(--border, #d1d5db);
-    border-radius:8px;
-    padding:6px 8px;
-    font-size:14px;
-    width:100%;
-    max-width:640px;
-  }
+/* ---------- Console Layout ---------- */
+.settings-console .cc-title{margin:0;font-size:24px;font-weight:700;color:#0f172a}
+.settings-console .cc-subtitle{color:#64748b;margin-top:6px}
+
+.cc-header{margin:6px 0 14px}
+.cc-quick{
+  display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:18px;
+}
+.qc-item{display:flex; align-items:center; gap:10px}
+.qc-label{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#64748b}
+.qc-inline{display:flex; gap:8px; align-items:center}
+.qc-select{min-width:180px}
+.qc-btn{padding:8px 12px}
+.qc-divider{width:1px; height:26px; background:var(--border,#e5e7eb); opacity:.8}
+
+/* 3-column; collapse on small screens */
+.cc-grid{
+  display:grid;
+  grid-template-columns: repeat(3, minmax(0,1fr));
+  gap:16px;
+}
+@media (max-width: 1020px){ .cc-grid{ grid-template-columns: 1fr 1fr; } }
+@media (max-width: 720px){ .cc-grid{ grid-template-columns: 1fr; } }
+
+.cc-panel{padding:16px 16px 14px}
+.cc-panel-head{margin-bottom:8px}
+.cc-kicker{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#64748b}
+.cc-kicker-sec{color:#22c55e}
+.cc-panel-title{margin:2px 0 0; font-size:18px; font-weight:700; color:#0f172a}
+.cc-panel-body{margin-top:8px}
+.cc-label{display:block; font-weight:600; margin:8px 0 6px; color:#0f172a}
+.cc-actions{display:flex; align-items:center; gap:10px; margin-top:10px}
+.cc-form .tool-input{border:1px solid var(--border,#d1d5db); border-radius:10px; padding:8px 10px; font-size:14px}
+
+/* Switch */
+.switch{position:relative; display:inline-block; width:46px; height:26px}
+.switch input{display:none}
+.slider{
+  position:absolute; cursor:pointer; inset:0; background:#e5e7eb; border-radius:999px; transition:all .15s;
+}
+.slider:before{
+  content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:white; border-radius:50%; transition:all .15s; box-shadow:0 2px 6px rgba(0,0,0,.15);
+}
+.switch input:checked + .slider{ background:#22c55e; }
+.switch input:checked + .slider:before{ transform:translateX(20px); }
+
+/* Swatches */
+.swatch-grid{
+  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px;
+}
+@media (max-width:720px){ .swatch-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
+.swatch{
+  position:relative; display:flex; align-items:flex-end; justify-content:flex-start;
+  height:64px; border:1px solid var(--border,#e5e7eb); border-radius:12px; padding:8px;
+  background:linear-gradient(135deg,#eef2f7,#dfe7f2); cursor:pointer;
+}
+.swatch[data-theme="classic"]{ background:linear-gradient(110deg,#d7b592 0%,#e7e3db 35%,#8fbfe0 100%); }
+.swatch[data-theme="dawn"]{ background:linear-gradient(135deg,#ffd9a0 0%,#ffb6b9 40%,#a3d5ff 100%); }
+.swatch[data-theme="midnight"]{ background:linear-gradient(135deg,#0b1220,#1c2741); }
+.swatch[data-theme="forest"]{ background:linear-gradient(135deg,#d7f3e2,#92c7a3); }
+.swatch[data-theme="sandstone"]{ background:linear-gradient(135deg,#f7efe4,#e4d2b6); }
+.swatch-name{
+  background:rgba(255,255,255,.8); padding:2px 6px; border-radius:8px; font-size:12px; color:#0f172a;
+}
+
+/* Security panel accent */
+.cc-sec{ position:relative; overflow:hidden; color:#0f172a; }
+.cc-sec .cc-panel-title{ color:#0f172a; }
+.cc-sec .cc-kicker{ color:#16a34a; }
+.cc-sec-bg{
+  position:absolute; inset:-1px; z-index:0;
+  background: radial-gradient(800px 300px at 90% -20%, rgba(34,197,94,.25), transparent 55%),
+              linear-gradient(135deg, rgba(34,197,94,.10), rgba(59,130,246,.06));
+  pointer-events:none;
+}
+.cc-sec > * { position:relative; z-index:1; }
+
+.sec-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
+.sec-tile{
+  display:flex; align-items:center; gap:12px; padding:12px; border:1px solid rgba(34,197,94,.25);
+  border-radius:12px; background:rgba(255,255,255,.8); text-decoration:none; color:inherit;
+  transition:transform .12s, box-shadow .12s, border-color .12s;
+}
+.sec-tile:hover{
+  transform: translateY(-2px);
+  box-shadow:0 10px 24px rgba(16,24,40,.08);
+  border-color: rgba(34,197,94,.45);
+}
+.sec-icon{
+  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
+  border-radius:10px; background:rgba(34,197,94,.18); color:#065f46;
+}
+.sec-title{ font-weight:700; }
+.sec-sub{ font-size:12px; color:#64748b; }
+.sec-meta{ flex:1; }
+.sec-cta{ font-size:13px; color:#0f172a; opacity:.7 }
+
+/* Tiny helper */
+.tiny{ font-size:12px }
+
+/* Make the quick strip responsive */
+@media (max-width:720px){
+  .cc-quick{ flex-direction:column; align-items:stretch; gap:10px; }
+  .qc-divider{ display:none; }
+  .qc-inline{ width:100%; }
+}
 </style>
 
 <script>
 (function(){
-  // Simple CSRF helper
+  // --- Shared helpers ---
   function getCookie(name) {
-    var value = "; " + document.cookie;
-    var parts = value.split("; " + name + "=");
-    if (parts.length === 2) return parts.pop().split(";").shift();
-    return "";
+    const m = document.cookie.match("(^|;)\\s*" + name + "\\s*=\\s*([^;]+)");
+    return m ? m.pop() : "";
+  }
+  function setThemeHref(name){
+    var link = document.getElementById('theme-css');
+    if (link) link.href = '{% static "themes/" %}' + name + '.css';
+    document.documentElement.setAttribute('data-theme', name);
+    try { localStorage.setItem('theme', name); } catch(e){}
+    // Classic gradient body toggle (matches base.html behavior)
+    if (name === 'classic') { document.body.classList.add('themed-bg'); }
+    else { document.body.classList.remove('themed-bg'); }
   }
 
-  // Clear history
-  var btn = document.getElementById("clear-history-btn");
-  var toast = document.getElementById("toast-clear-history");
-  if (btn) {
+  // --- Clear History (both buttons) ---
+  function wireClear(btnId){
+    var btn = document.getElementById(btnId);
+    if (!btn) return;
     btn.addEventListener("click", function(){
-      fetch("{% url 'clear_history' %}", {
-        method: "POST",
-        headers: { "X-CSRFToken": getCookie("csrftoken") }
-      })
-      .then(function(r){ return r.ok ? r.json() : Promise.reject(); })
-      .then(function(data){
-        // Clear likely client-side copies too (harmless if not present)
-        var keys = ["recent_searches","recent_entries","recent_viewed","recently_viewed","recent_results","recentSearches","recentEntries"];
+      fetch("{% url 'clear_history' %}", { method:"POST", headers:{ "X-CSRFToken": getCookie("csrftoken") }})
+      .then(r => r.ok ? r.json() : Promise.reject())
+      .then(data => {
+        const keys = ["recent_searches","recent_entries","recent_viewed","recently_viewed","recent_results","recentSearches","recentEntries"];
         try {
-          keys.forEach(function(k){
+          keys.forEach(k => {
             localStorage.removeItem(k);
             sessionStorage.removeItem(k);
             document.cookie = k + "=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";
           });
-        } catch(e) {}
-
-        if (toast){
-          toast.textContent = "History cleared.";
-          toast.style.opacity = "1";
-          setTimeout(function(){ toast.style.opacity = "0"; }, 1500);
-        }
-        if (data && data.cleared) { console.log("Cleared server keys:", data.cleared); }
+        } catch(e){}
+        var toast = document.getElementById("toast-clear-history");
+        if (toast){ toast.style.opacity = "1"; setTimeout(() => toast.style.opacity = "0", 1500); }
+        if (data && data.cleared) console.log("Cleared server keys:", data.cleared);
       })
-      .catch(function(){ /* silent */ });
+      .catch(() => {});
     });
   }
+  wireClear("clear-history-btn");
+  wireClear("clear-history-btn-dup");
 
-  // Theme live preview (without saving)
+  // --- Theme: quick strip select (id="theme") ---
   var themeSel = document.getElementById('theme');
   if (themeSel) {
     themeSel.addEventListener('change', function(e){
-      var name = e.target.value;
-      var link = document.getElementById('theme-css');
-      if (link) link.href = '{% static "themes/" %}' + name + '.css';
-      try {
-        localStorage.setItem('theme', name);
-        // Toggle the classic gradient body class in case user previews Classic
-        if (name === 'classic') {
-          document.body.classList.add('themed-bg');
-        } else {
-          document.body.classList.remove('themed-bg');
-        }
-        document.documentElement.setAttribute('data-theme', name);
-      } catch(e){}
+      setThemeHref(e.target.value);
     });
   }
 
-  // Highlight search hits toggle
-  (async function(){
-    const toggle = document.getElementById("highlightHitsToggle");
-    if (!toggle) return;
+  // --- Theme: panel select (id="theme-dup") + save button ---
+  window.saveThemeFromDuplicate = function(){
+    var dup = document.getElementById('theme-dup');
+    if (!dup) return false;
+    var name = dup.value;
+    setThemeHref(name);
+    // Also mirror back to the quick select if present
+    if (themeSel) themeSel.value = name;
 
-    // Load current prefs
+    // Submit a hidden form post to persist session theme
+    var f = document.createElement('form');
+    f.method = 'POST';
+    f.action = "{% url 'set_theme' %}";
+    var csrf = document.createElement('input');
+    csrf.type = 'hidden'; csrf.name = 'csrfmiddlewaretoken'; csrf.value = getCookie('csrftoken');
+    var t = document.createElement('input');
+    t.type = 'hidden'; t.name = 'theme'; t.value = name;
+    f.appendChild(csrf); f.appendChild(t);
+    document.body.appendChild(f);
+    f.submit();
+    return false; // prevent default
+  };
+
+  // --- Theme swatches (instant preview) ---
+  document.querySelectorAll('.swatch').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const name = btn.getAttribute('data-theme');
+      setThemeHref(name);
+      // sync selects
+      if (themeSel) themeSel.value = name;
+      var dup = document.getElementById('theme-dup');
+      if (dup) dup.value = name;
+    });
+  });
+
+  // --- Highlight toggle (quick + panel are synced) ---
+  async function loadPrefsAndWire(){
+    let initial = false;
     try {
       const res = await fetch("{% url 'api_get_prefs' %}");
       const data = await res.json();
       if (data && typeof data.highlight_search_hits !== "undefined") {
-        toggle.checked = !!data.highlight_search_hits;
+        initial = !!data.highlight_search_hits;
       }
-    } catch (e) { /* ignore */ }
+    } catch(e){}
 
-    // Save on change
-    toggle.addEventListener("change", async () => {
+    const toggles = [document.getElementById("highlightHitsToggle"), document.getElementById("highlightHitsToggle-dup")].filter(Boolean);
+    toggles.forEach(t => t.checked = initial);
+
+    function save(val){
       const form = new FormData();
-      form.append("enabled", toggle.checked ? "true" : "false");
-      try {
-        await fetch("{% url 'api_set_highlight_hits' %}", {
-          method: "POST",
-          body: form,
-          headers: { "X-CSRFToken": getCookie("csrftoken") }
-        });
-      } catch (e) {
-        alert("Could not save the setting. Please try again.");
-      }
-    });
-  })();
+      form.append("enabled", val ? "true" : "false");
+      fetch("{% url 'api_set_highlight_hits' %}", { method:"POST", body:form, headers:{ "X-CSRFToken": getCookie("csrftoken") }})
+        .catch(() => alert("Could not save the setting. Please try again."));
+    }
+    toggles.forEach(t => t.addEventListener('change', () => {
+      const val = t.checked;
+      toggles.forEach(o => { if (o !== t) o.checked = val; });
+      save(val);
+    }));
+  }
+  loadPrefsAndWire();
 })();
 </script>
 {% endblock %}
\ No newline at end of file