diff --git a/internal/views/static/css/kafka.css b/internal/views/static/css/kafka.css
index b637860..8ae97ea 100644
--- a/internal/views/static/css/kafka.css
+++ b/internal/views/static/css/kafka.css
@@ -1,71 +1,49 @@
-/* kafka — clean, minimal search engine CSS */
+/* ============================================================
+   kafka — modern, clean search UI
+   ============================================================ */
 
 :root {
-  --color-base: #f5f5f5;
-  --color-base-font: #444;
-  --color-base-background: #fff;
-  --color-header-background: #f7f7f7;
-  --color-header-border: #ddd;
-  --color-search-border: #bbb;
-  --color-search-focus: #3498db;
-  --color-result-url: #1a0dab;
-  --color-result-url-visited: #609;
-  --color-result-content: #545454;
-  --color-result-title: #1a0dab;
-  --color-result-title-visited: #609;
-  --color-result-engine: #666;
-  --color-result-border: #eee;
-  --color-link: #3498db;
-  --color-link-visited: #609;
-  --color-sidebar-background: #f7f7f7;
-  --color-sidebar-border: #ddd;
-  --color-infobox-background: #f9f9f9;
-  --color-infobox-border: #ddd;
-  --color-pagination-current: #3498db;
-  --color-pagination-border: #ddd;
-  --color-error: #c0392b;
-  --color-error-background: #fdecea;
-  --color-suggestion: #666;
-  --color-footer: #888;
-  --color-btn-background: #fff;
-  --color-btn-border: #ddd;
-  --color-btn-hover: #eee;
-  --radius: 4px;
-  --max-width: 800px;
+  /* Light theme */
+  --bg: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #f1f3f5;
+  --border: #e9ecef;
+  --border-focus: #cad1d8;
+  --text-primary: #1a1a1a;
+  --text-secondary: #5c6370;
+  --text-muted: #8b929e;
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
+  --accent-soft: #eff6ff;
+  --accent-glow: rgba(37, 99, 235, 0.15);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
+  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-full: 9999px;
+  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
+  --max-width: 880px;
+  --header-height: 56px;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-base: #222;
-    --color-base-font: #dcdcdc;
-    --color-base-background: #2b2b2b;
-    --color-header-background: #333;
-    --color-header-border: #444;
-    --color-search-border: #555;
-    --color-search-focus: #5dade2;
-    --color-result-url: #8ab4f8;
-    --color-result-url-visited: #b39ddb;
-    --color-result-content: #b0b0b0;
-    --color-result-title: #8ab4f8;
-    --color-result-title-visited: #b39ddb;
-    --color-result-engine: #999;
-    --color-result-border: #3a3a3a;
-    --color-link: #5dade2;
-    --color-link-visited: #b39ddb;
-    --color-sidebar-background: #333;
-    --color-sidebar-border: #444;
-    --color-infobox-background: #333;
-    --color-infobox-border: #444;
-    --color-pagination-current: #5dade2;
-    --color-pagination-border: #444;
-    --color-error: #e74c3c;
-    --color-error-background: #3b1a1a;
-    --color-suggestion: #999;
-    --color-footer: #666;
-    --color-btn-background: #333;
-    --color-btn-border: #555;
-    --color-btn-hover: #444;
-  }
+[data-theme="dark"] {
+  --bg: #0f0f0f;
+  --bg-secondary: #1a1a1a;
+  --bg-tertiary: #242424;
+  --border: #2e2e2e;
+  --border-focus: #404040;
+  --text-primary: #e8eaed;
+  --text-secondary: #9aa0a6;
+  --text-muted: #6b7280;
+  --accent: #60a5fa;
+  --accent-hover: #93c5fd;
+  --accent-soft: #1e3a5f;
+  --accent-glow: rgba(96, 165, 250, 0.2);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
 }
 
 *, *::before, *::after {
@@ -76,35 +54,491 @@
 
 html {
   font-size: 16px;
+  scroll-behavior: smooth;
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  color: var(--color-base-font);
-  background: var(--color-base);
-  line-height: 1.6;
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text-primary);
+  line-height: 1.5;
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-main {
-  flex: 1;
-  max-width: var(--max-width);
-  width: 100%;
-  margin: 0 auto;
-  padding: 1rem;
+/* ============================================================
+   Header
+   ============================================================ */
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1.5rem;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(12px);
+  background: color-mix(in srgb, var(--bg) 90%, transparent);
 }
 
+.site-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: var(--text-primary);
+}
+
+.site-logo-mark {
+  width: 28px;
+  height: 28px;
+  color: var(--accent);
+}
+
+.site-name {
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.settings-trigger {
+  background: none;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: background 0.15s, color 0.15s;
+}
+.settings-trigger:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+/* ============================================================
+   Main Layout
+   ============================================================ */
+
+main {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+/* ============================================================
+   Homepage — Hero Search
+   ============================================================ */
+
+.page-home {
+  min-height: calc(100vh - var(--header-height));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 1.5rem;
+  text-align: center;
+}
+
+.hero-logo {
+  margin-bottom: 2rem;
+}
+
+.hero-logo svg {
+  width: 64px;
+  height: 64px;
+  color: var(--accent);
+}
+
+.hero-tagline {
+  font-size: 1rem;
+  color: var(--text-muted);
+  margin-bottom: 2.5rem;
+  max-width: 400px;
+}
+
+.search-hero {
+  width: 100%;
+  max-width: 640px;
+}
+
+.search-box {
+  position: relative;
+  width: 100%;
+}
+
+.search-box input[type="text"],
+#q {
+  width: 100%;
+  padding: 1rem 3.5rem 1rem 1.25rem;
+  font-size: 1.1rem;
+  font-family: inherit;
+  border: 2px solid var(--border);
+  border-radius: var(--radius-full);
+  background: var(--bg);
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.search-box input[type="text"]:focus,
+#q:focus {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-glow);
+}
+
+.search-box input[type="text"]::placeholder,
+#q::placeholder {
+  color: var(--text-muted);
+}
+
+.search-box-submit {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, transform 0.15s;
+}
+
+.search-box-submit:hover {
+  background: var(--accent-hover);
+  transform: translateY(-50%) scale(1.05);
+}
+
+.search-box-submit:active {
+  transform: translateY(-50%) scale(0.97);
+}
+
+/* ============================================================
+   Results Page
+   ============================================================ */
+
+.page-results {
+  padding-top: 1.5rem;
+}
+
+.results-layout {
+  display: grid;
+  grid-template-columns: 1fr 220px;
+  gap: 2rem;
+  align-items: start;
+}
+
+@media (max-width: 700px) {
+  .results-layout {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
+/* Compact search bar on results page */
+.search-compact {
+  grid-column: 1 / -1;
+}
+
+.search-compact .search-box {
+  max-width: 100%;
+}
+
+.search-compact input {
+  font-size: 1rem;
+  padding: 0.75rem 2.75rem 0.75rem 1rem;
+}
+
+.search-compact .search-box-submit {
+  width: 34px;
+  height: 34px;
+}
+
+/* ============================================================
+   Results Column
+   ============================================================ */
+
+.results-column {
+  min-width: 0;
+}
+
+/* Result count + meta */
+.results-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+/* Individual result card */
+.result {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 1rem 1.1rem;
+  margin-bottom: 0.75rem;
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+
+.result:hover {
+  border-color: var(--border-focus);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.result_header {
+  margin-bottom: 0.25rem;
+}
+
+.result-favicon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 0.4rem;
+  background: var(--bg-tertiary);
+  flex-shrink: 0;
+}
+
+.result_url {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-bottom: 0.35rem;
+  overflow: hidden;
+}
+
+.result_url a {
+  color: var(--text-muted);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result_url a:hover {
+  color: var(--accent);
+}
+
+.result_url .engine-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1rem 0.4rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.result_header a {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-decoration: none;
+  line-height: 1.4;
+  display: block;
+}
+
+.result_header a:hover {
+  color: var(--accent);
+}
+
+.result_header a:visited {
+  color: var(--text-secondary);
+}
+
+.result_content {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  line-height: 1.55;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ============================================================
+   Sidebar
+   ============================================================ */
+
+.sidebar {
+  position: sticky;
+  top: calc(var(--header-height) + 1.5rem);
+}
+
+.sidebar-card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.sidebar-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 0.75rem;
+}
+
+/* Suggestions in sidebar */
+.suggestion-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.suggestion a {
+  display: inline-block;
+  padding: 0.3rem 0.65rem;
+  font-size: 0.8rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  color: var(--accent);
+  text-decoration: none;
+  background: var(--accent-soft);
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.suggestion a:hover {
+  background: color-mix(in srgb, var(--accent-soft) 70%, var(--bg-tertiary));
+  border-color: var(--accent);
+}
+
+/* Unresponsive engines warning */
+.unresponsive-engines {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.unresponsive-engines li {
+  margin: 0.3rem 0;
+}
+
+/* Corrections */
+.correction {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+}
+
+/* ============================================================
+   No Results
+   ============================================================ */
+
+.no-results {
+  text-align: center;
+  padding: 4rem 2rem;
+}
+
+.no-results-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.3;
+}
+
+.no-results h2 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.no-results p {
+  color: var(--text-muted);
+  font-size: 0.95rem;
+}
+
+/* ============================================================
+   Pagination
+   ============================================================ */
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 2rem 0;
+  flex-wrap: wrap;
+}
+
+.pagination button,
+.pagination .page-link {
+  min-width: 40px;
+  height: 40px;
+  padding: 0 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  font-family: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.pagination button:hover,
+.pagination .page-link:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--border-focus);
+}
+
+.pagination .page-current {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.pagination .page-current:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+
+.pagination .prev-next {
+  font-weight: 500;
+}
+
+/* ============================================================
+   Footer
+   ============================================================ */
+
 footer {
   text-align: center;
-  padding: 1.5rem;
-  color: var(--color-footer);
+  padding: 3rem 1.5rem 2rem;
+  color: var(--text-muted);
   font-size: 0.85rem;
+  margin-top: auto;
 }
 
 footer a {
-  color: var(--color-link);
+  color: var(--accent);
   text-decoration: none;
 }
 
@@ -112,331 +546,21 @@ footer a:hover {
   text-decoration: underline;
 }
 
-/* Index / Homepage */
-.index {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 60vh;
-  text-align: center;
-}
-
-.index .title h1 {
-  font-size: 2rem;
-  font-weight: 300;
-  margin-bottom: 2rem;
-  letter-spacing: 0.05em;
-}
-
-/* Search form */
-#search {
-  width: 100%;
-  max-width: 600px;
-  margin-bottom: 2rem;
-}
-
-#search form {
-  display: flex;
-  gap: 0.5rem;
-}
-
-#search input[type="text"],
-#q {
-  flex: 1;
-  padding: 0.7rem 1rem;
-  font-size: 1rem;
-  border: 1px solid var(--color-search-border);
-  border-radius: var(--radius);
-  background: var(--color-base-background);
-  color: var(--color-base-font);
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-#search input[type="text"]:focus,
-#q:focus {
-  border-color: var(--color-search-focus);
-  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
-}
-
-#search button[type="submit"] {
-  padding: 0.7rem 1.2rem;
-  font-size: 1rem;
-  border: 1px solid var(--color-search-border);
-  border-radius: var(--radius);
-  background: var(--color-btn-background);
-  color: var(--color-base-font);
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-#search button[type="submit"]:hover {
-  background: var(--color-btn-hover);
-}
-
-/* Results page search bar (compact) */
-.search_on_results #search {
-  max-width: 100%;
-  margin-bottom: 1rem;
-}
-
-/* Results area */
-#results {
-  display: flex;
-  gap: 1.5rem;
-}
-
-#sidebar {
-  flex: 0 0 200px;
-  font-size: 0.85rem;
-}
-
-#sidebar p {
-  margin-bottom: 0.5rem;
-}
-
-#urls {
-  flex: 1;
-  min-width: 0;
-}
-
-/* Result count */
-#result_count {
-  margin-bottom: 1rem;
-}
-
-/* Individual result */
-.result {
-  padding: 0.8rem 0;
-  border-bottom: 1px solid var(--color-result-border);
-  word-wrap: break-word;
-}
-
-.result:last-child {
-  border-bottom: none;
-}
-
-.result_header {
-  margin-bottom: 0.2rem;
-}
-
-.result_header a {
-  font-size: 1.1rem;
-  font-weight: 400;
-  color: var(--color-result-title);
-  text-decoration: none;
-}
-
-.result_header a:visited {
-  color: var(--color-result-title-visited);
-}
-
-.result_header a:hover {
-  text-decoration: underline;
-}
-
-.result_url {
-  font-size: 0.85rem;
-  color: var(--color-result-url);
-  margin-bottom: 0.2rem;
-}
-
-.result_url a {
-  color: var(--color-result-url);
-  text-decoration: none;
-}
-
-.result_url a:visited {
-  color: var(--color-result-url-visited);
-}
-
-.result_content {
-  font-size: 0.9rem;
-  color: var(--color-result-content);
-  max-width: 600px;
-}
-
-.result_content p {
-  margin: 0;
-}
-
-.result_engine {
-  font-size: 0.75rem;
-  color: var(--color-result-engine);
-  margin-top: 0.3rem;
-}
-
-.engine {
-  display: inline-block;
-  padding: 0.1rem 0.4rem;
-  background: var(--color-sidebar-background);
-  border: 1px solid var(--color-sidebar-border);
-  border-radius: 2px;
-  font-size: 0.7rem;
-  color: var(--color-result-engine);
-}
-
-/* No results */
-.no_results {
-  text-align: center;
-  padding: 3rem 1rem;
-  color: var(--color-suggestion);
-}
-
-/* Suggestions */
-#suggestions {
-  margin-bottom: 1rem;
-}
-
-.suggestion {
-  display: inline-block;
-  margin: 0.2rem;
-}
-
-.suggestion a {
-  display: inline-block;
-  padding: 0.3rem 0.6rem;
-  font-size: 0.85rem;
-  border: 1px solid var(--color-pagination-border);
-  border-radius: var(--radius);
-  color: var(--color-link);
-  text-decoration: none;
-  background: var(--color-btn-background);
-  transition: background 0.2s;
-}
-
-.suggestion a:hover {
-  background: var(--color-btn-hover);
-}
-
-/* Infoboxes */
-#infoboxes {
-  margin-bottom: 1rem;
-}
-
-.infobox {
-  background: var(--color-infobox-background);
-  border: 1px solid var(--color-infobox-border);
-  border-radius: var(--radius);
-  padding: 0.8rem;
-  margin-bottom: 0.5rem;
-}
-
-.infobox .title {
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-}
-
-/* Errors */
-.dialog-error {
-  background: var(--color-error-background);
-  color: var(--color-error);
-  border: 1px solid var(--color-error);
-  border-radius: var(--radius);
-  padding: 0.8rem 1rem;
-  margin-bottom: 1rem;
-}
-
-/* Unresponsive engines */
-.unresponsive_engines {
-  font-size: 0.8rem;
-  color: var(--color-suggestion);
-  margin-top: 0.5rem;
-}
-
-.unresponsive_engines li {
-  margin: 0.1rem 0;
-}
-
-/* Corrections */
-.correction {
-  font-size: 0.9rem;
-  margin-bottom: 0.5rem;
-}
-
-/* Pagination */
-#pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.3rem;
-  padding: 1.5rem 0;
-  flex-wrap: wrap;
-}
-
-#pagination button,
-#pagination .page_number,
-#pagination .page_number_current {
-  padding: 0.4rem 0.8rem;
-  font-size: 0.9rem;
-  border: 1px solid var(--color-pagination-border);
-  border-radius: var(--radius);
-  background: var(--color-btn-background);
-  color: var(--color-base-font);
-  cursor: pointer;
-  text-decoration: none;
-  transition: background 0.2s;
-}
-
-#pagination button:hover,
-#pagination .page_number:hover {
-  background: var(--color-btn-hover);
-}
-
-#pagination .page_number_current {
-  background: var(--color-pagination-current);
-  color: #fff;
-  border-color: var(--color-pagination-current);
-  cursor: default;
-}
-
-.previous_page, .next_page {
-  font-weight: 500;
-}
-
-/* Back to top */
-#backToTop {
-  text-align: center;
-  margin: 1rem 0;
-}
-
-#backToTop a {
-  color: var(--color-link);
-  text-decoration: none;
-  font-size: 0.85rem;
-}
-
-/* HTMX loading indicator */
-.htmx-indicator {
-  display: none;
-  text-align: center;
-  padding: 2rem;
-  color: var(--color-suggestion);
-}
-
-.htmx-request .htmx-indicator,
-.htmx-request.htmx-indicator {
-  display: block;
-}
-
-/* Autocomplete dropdown */
-#search {
-  position: relative;
-}
+/* ============================================================
+   Autocomplete Dropdown
+   ============================================================ */
 
 #autocomplete-dropdown {
   position: absolute;
-  top: 100%;
+  top: calc(100% + 6px);
   left: 0;
   right: 0;
-  background: var(--color-base-background);
-  border: 1px solid var(--color-search-border);
-  border-top: none;
-  border-radius: 0 0 var(--radius) var(--radius);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 100;
-  max-height: 320px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 200;
+  max-height: 360px;
   overflow-y: auto;
   display: none;
 }
@@ -446,12 +570,12 @@ footer a:hover {
 }
 
 .autocomplete-suggestion {
-  padding: 0.6rem 1rem;
+  padding: 0.7rem 1rem;
   cursor: pointer;
   font-size: 0.95rem;
-  color: var(--color-base-font);
-  border-bottom: 1px solid var(--color-result-border);
-  transition: background 0.15s;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border);
+  transition: background 0.1s;
 }
 
 .autocomplete-suggestion:last-child {
@@ -460,159 +584,101 @@ footer a:hover {
 
 .autocomplete-suggestion:hover,
 .autocomplete-suggestion.active {
-  background: var(--color-header-background);
+  background: var(--bg-tertiary);
 }
 
 .autocomplete-suggestion mark {
   background: none;
-  color: var(--color-link);
+  color: var(--accent);
   font-weight: 600;
 }
 
 .autocomplete-footer {
-  padding: 0.4rem 1rem;
+  padding: 0.5rem 1rem;
   font-size: 0.75rem;
-  color: var(--color-suggestion);
-  border-top: 1px solid var(--color-result-border);
-  background: var(--color-header-background);
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  border-top: 1px solid var(--border);
 }
 
-/* Responsive */
-@media (max-width: 768px) {
-  #results {
-    flex-direction: column-reverse;
-  }
-
-  #sidebar {
-    flex: none;
-    border-top: 1px solid var(--color-sidebar-border);
-    padding-top: 0.5rem;
-  }
-
-  .index .title h1 {
-    font-size: 1.5rem;
-  }
-
-  main {
-    padding: 0.5rem;
-  }
-}
-
-/* Print */
-@media print {
-  footer, #pagination, #search button, #backToTop, .htmx-indicator {
-    display: none;
-  }
-
-  body {
-    background: #fff;
-    color: #000;
-  }
-
-  .result a {
-    color: #000;
-  }
-}
-
-/* ============================================
+/* ============================================================
    Settings Panel
-   ============================================ */
+   ============================================================ */
 
-/* Header */
-.site-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.6rem 1rem;
-  background: var(--color-header-background);
-  border-bottom: 1px solid var(--color-header-border);
-}
-.site-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-base-font);
-}
-
-/* Gear trigger button */
-.settings-trigger {
-  background: none;
-  border: none;
-  font-size: 1.1rem;
-  cursor: pointer;
-  padding: 0.3rem 0.5rem;
-  border-radius: var(--radius);
-  color: var(--color-base-font);
-  opacity: 0.7;
-  transition: opacity 0.2s, background 0.2s;
-  line-height: 1;
-}
-.settings-trigger:hover,
-.settings-trigger[aria-expanded="true"] {
-  opacity: 1;
-  background: var(--color-sidebar-background);
-}
-
-/* Popover panel */
 .settings-popover {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  width: 280px;
-  max-height: 420px;
+  position: fixed;
+  top: calc(var(--header-height) + 8px);
+  right: 1rem;
+  width: 300px;
+  max-height: calc(100vh - var(--header-height) - 2rem);
   overflow-y: auto;
-  background: var(--color-base-background);
-  border: 1px solid var(--color-sidebar-border);
-  border-radius: var(--radius);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  z-index: 200;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  z-index: 300;
   display: none;
-  flex-direction: column;
 }
+
 .settings-popover[data-open="true"] {
-  display: flex;
-  animation: settings-slide-in 0.2s ease;
+  display: block;
+  animation: pop-in 0.2s ease;
 }
-@keyframes settings-slide-in {
-  from { opacity: 0; transform: translateY(-8px); }
-  to   { opacity: 1; transform: translateY(0); }
+
+@keyframes pop-in {
+  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .settings-popover-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-sidebar-border);
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border);
   font-weight: 600;
-  font-size: 0.9rem;
-  flex-shrink: 0;
+  font-size: 0.95rem;
+  position: sticky;
+  top: 0;
+  background: var(--bg);
+  z-index: 1;
 }
+
 .settings-popover-close {
   background: none;
   border: none;
-  font-size: 1.2rem;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
-  color: var(--color-base-font);
-  opacity: 0.6;
-  padding: 0 0.25rem;
-  line-height: 1;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  transition: background 0.15s, color 0.15s;
+}
+
+.settings-popover-close:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
 }
-.settings-popover-close:hover { opacity: 1; }
 
 .settings-popover-body {
-  padding: 0.8rem;
+  padding: 1rem 1.25rem;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.25rem;
 }
 
 .settings-section-title {
   font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-suggestion);
-  margin-bottom: 0.5rem;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  margin-bottom: 0.6rem;
 }
 
 /* Theme buttons */
@@ -620,162 +686,109 @@ footer a:hover {
   display: flex;
   gap: 0.4rem;
 }
+
 .theme-btn {
   flex: 1;
-  padding: 0.35rem 0.5rem;
-  border: 1px solid var(--color-sidebar-border);
-  border-radius: var(--radius);
-  background: var(--color-btn-background);
-  color: var(--color-base-font);
+  padding: 0.45rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--text-secondary);
   cursor: pointer;
-  font-size: 0.75rem;
-  text-align: center;
-  transition: background 0.15s, border-color 0.15s;
-}
-.theme-btn:hover { background: var(--color-btn-hover); }
-.theme-btn.active {
-  background: var(--color-link);
-  color: #fff;
-  border-color: var(--color-link);
+  font-size: 0.8rem;
+  font-family: inherit;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 
-/* Engine toggles — 2-column grid */
+.theme-btn:hover {
+  background: var(--bg-tertiary);
+}
+
+.theme-btn.active {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--accent);
+  font-weight: 500;
+}
+
+/* Engine toggles */
 .engine-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.4rem;
 }
+
 .engine-toggle {
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  padding: 0.3rem 0.5rem;
-  border-radius: var(--radius);
-  background: var(--color-sidebar-background);
-  font-size: 0.78rem;
+  padding: 0.4rem 0.5rem;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+  font-size: 0.8rem;
   cursor: pointer;
+  transition: background 0.1s;
 }
+
+.engine-toggle:hover {
+  background: var(--border);
+}
+
 .engine-toggle input[type="checkbox"] {
   width: 15px;
   height: 15px;
   margin: 0;
   cursor: pointer;
-  accent-color: var(--color-link);
-}
-.engine-toggle span {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  accent-color: var(--accent);
+  flex-shrink: 0;
 }
 
-/* Search defaults */
+.engine-toggle span {
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Select dropdowns */
 .setting-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
-  margin-top: 0.4rem;
+  gap: 0.75rem;
 }
+
 .setting-row label {
   font-size: 0.85rem;
-  flex: 1;
+  color: var(--text-secondary);
 }
+
 .setting-row select {
-  width: 110px;
-  padding: 0.3rem 0.4rem;
+  padding: 0.35rem 0.6rem;
   font-size: 0.8rem;
-  border: 1px solid var(--color-sidebar-border);
-  border-radius: var(--radius);
-  background: var(--color-base-background);
-  color: var(--color-base-font);
+  font-family: inherit;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--text-primary);
   cursor: pointer;
+  min-width: 100px;
+}
+
+.setting-row select:focus {
+  outline: none;
+  border-color: var(--accent);
 }
 
-/* Mid-search notice */
 .settings-notice {
-  font-size: 0.72rem;
-  color: var(--color-suggestion);
-  margin-top: 0.3rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
   font-style: italic;
+  margin-top: 0.25rem;
 }
 
-/* Dark theme via data-theme attribute */
-html[data-theme="dark"] {
-  --color-base: #222;
-  --color-base-font: #dcdcdc;
-  --color-base-background: #2b2b2b;
-  --color-header-background: #333;
-  --color-header-border: #444;
-  --color-search-border: #555;
-  --color-search-focus: #5dade2;
-  --color-result-url: #8ab4f8;
-  --color-result-url-visited: #b39ddb;
-  --color-result-content: #b0b0b0;
-  --color-result-title: #8ab4f8;
-  --color-result-title-visited: #b39ddb;
-  --color-result-engine: #999;
-  --color-result-border: #3a3a3a;
-  --color-link: #5dade2;
-  --color-link-visited: #b39ddb;
-  --color-sidebar-background: #333;
-  --color-sidebar-border: #444;
-  --color-infobox-background: #333;
-  --color-infobox-border: #444;
-  --color-pagination-current: #5dade2;
-  --color-pagination-border: #444;
-  --color-error: #e74c3c;
-  --color-error-background: #3b1a1a;
-  --color-suggestion: #999;
-  --color-footer: #666;
-  --color-btn-background: #333;
-  --color-btn-border: #555;
-  --color-btn-hover: #444;
-}
-
-/* Light theme via data-theme attribute - explicit reset */
-html[data-theme="light"] {
-  --color-base: #f5f5f5;
-  --color-base-font: #444;
-  --color-base-background: #fff;
-  --color-header-background: #f7f7f7;
-  --color-header-border: #ddd;
-  --color-search-border: #bbb;
-  --color-search-focus: #3498db;
-  --color-result-url: #1a0dab;
-  --color-result-url-visited: #609;
-  --color-result-content: #545454;
-  --color-result-title: #1a0dab;
-  --color-result-title-visited: #609;
-  --color-result-engine: #666;
-  --color-result-border: #eee;
-  --color-link: #3498db;
-  --color-link-visited: #609;
-  --color-sidebar-background: #f7f7f7;
-  --color-sidebar-border: #ddd;
-  --color-infobox-background: #f9f9f9;
-  --color-infobox-border: #ddd;
-  --color-pagination-current: #3498db;
-  --color-pagination-border: #ddd;
-  --color-error: #c0392b;
-  --color-error-background: #fdecea;
-  --color-suggestion: #666;
-  --color-footer: #888;
-  --color-btn-background: #fff;
-  --color-btn-border: #ddd;
-  --color-btn-hover: #eee;
-}
-
-/* Mobile: Bottom sheet + FAB trigger */
-@media (max-width: 768px) {
-  /* Hide desktop trigger, show FAB */
-  .settings-trigger-desktop {
-    display: none;
-  }
-  .settings-trigger-mobile {
-    display: block;
-  }
+/* Mobile settings: bottom sheet */
+@media (max-width: 480px) {
   .settings-popover {
     position: fixed;
     top: auto;
@@ -784,29 +797,64 @@ html[data-theme="light"] {
     right: 0;
     width: 100%;
     max-height: 70vh;
-    border-radius: var(--radius) var(--radius) 0 0;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     border-bottom: none;
   }
-  /* FAB: fixed bottom-right button visible only on mobile */
+
   .settings-trigger-mobile {
-    display: block;
-    position: fixed;
-    bottom: 1.5rem;
-    right: 1.5rem;
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: var(--color-link);
-    color: #fff;
-    border: none;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-    font-size: 1.2rem;
-    z-index: 199;
-    opacity: 1;
+    display: flex;
   }
 }
 
-/* Video result cards */
+@media (min-width: 481px) {
+  .settings-trigger-mobile {
+    display: none;
+  }
+}
+
+/* ============================================================
+   HTMX Loading State
+   ============================================================ */
+
+.htmx-indicator {
+  display: none;
+  text-align: center;
+  padding: 2rem;
+  color: var(--text-muted);
+}
+
+.htmx-request .htmx-indicator {
+  display: block;
+}
+
+.htmx-request .results-column {
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+
+/* ============================================================
+   Back to Top
+   ============================================================ */
+
+.back-to-top {
+  text-align: center;
+  padding: 1rem;
+}
+
+.back-to-top a {
+  color: var(--accent);
+  text-decoration: none;
+  font-size: 0.85rem;
+}
+
+.back-to-top a:hover {
+  text-decoration: underline;
+}
+
+/* ============================================================
+   Video Results
+   ============================================================ */
+
 .video-result {
   display: flex;
   gap: 1rem;
@@ -816,15 +864,134 @@ html[data-theme="light"] {
 .video-result .result_thumbnail {
   flex-shrink: 0;
   width: 180px;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  background: var(--bg-tertiary);
 }
 
 .video-result .result_thumbnail img {
   width: 100%;
   height: auto;
-  border-radius: var(--radius);
+  display: block;
+  object-fit: cover;
 }
 
 .video-result .result_content_wrapper {
   flex: 1;
   min-width: 0;
 }
+
+@media (max-width: 480px) {
+  .video-result {
+    flex-direction: column;
+  }
+
+  .video-result .result_thumbnail {
+    width: 100%;
+  }
+}
+
+/* ============================================================
+   Infoboxes
+   ============================================================ */
+
+.infobox {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.infobox .title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  font-size: 0.95rem;
+}
+
+.infobox img {
+  max-width: 100%;
+  border-radius: var(--radius-sm);
+  margin-top: 0.5rem;
+}
+
+/* ============================================================
+   Errors
+   ============================================================ */
+
+.dialog-error {
+  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  color: var(--accent);
+  border-radius: var(--radius-md);
+  padding: 0.8rem 1rem;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+}
+
+/* ============================================================
+   Focus visible — keyboard navigation
+   ============================================================ */
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ============================================================
+   Selection color
+   ============================================================ */
+
+::selection {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+/* ============================================================
+   Scrollbar
+   ============================================================ */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-focus);
+}
+
+/* ============================================================
+   Print
+   ============================================================ */
+
+@media print {
+  .site-header, footer, .settings-popover, #backToTop, .htmx-indicator, .settings-trigger {
+    display: none !important;
+  }
+
+  body {
+    background: #fff;
+    color: #000;
+  }
+
+  .result {
+    break-inside: avoid;
+    border: 1px solid #ddd;
+    margin-bottom: 1rem;
+  }
+}
diff --git a/internal/views/templates/base.html b/internal/views/templates/base.html
index 239e886..691dba2 100644
--- a/internal/views/templates/base.html
+++ b/internal/views/templates/base.html
@@ -1,6 +1,6 @@
 {{define "base"}}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -13,31 +13,43 @@
   <link rel="icon" href="/static/img/favicon.svg" type="image/svg+xml">
   <link title="kafka" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml">
 </head>
-<body class="{{if .Query}}search_on_results{{end}}">
+<body>
   <header class="site-header">
-    <span class="site-title">kafka</span>
-    <!-- Desktop trigger (hidden on mobile via CSS) -->
-    <button id="settings-trigger" class="settings-trigger settings-trigger-desktop"
-      aria-label="Preferences" aria-expanded="false" aria-controls="settings-popover">&#9881;</button>
+    <a href="/" class="site-logo">
+      <svg class="site-logo-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8"/>
+        <path d="m21 21-4.35-4.35"/>
+      </svg>
+      <span class="site-name">kafka</span>
+    </a>
+    <button id="settings-trigger" class="settings-trigger" aria-label="Preferences" aria-expanded="false" aria-controls="settings-popover">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+        <circle cx="12" cy="12" r="3"/>
+      </svg>
+    </button>
   </header>
-  <!-- Mobile FAB trigger (shown only on mobile via CSS) -->
-  <button id="settings-trigger-mobile" class="settings-trigger settings-trigger-mobile"
-    aria-label="Preferences" aria-expanded="false" aria-controls="settings-popover"
-    style="display:none;">&#9881;</button>
-  <main>
+
+  <main class="{{if .Query}}page-results{{else}}page-home{{end}}">
     {{template "content" .}}
   </main>
+
   <footer>
     <p>Powered by <a href="https://git.ashisgreat.xyz/penal-colony/kafka">kafka</a> — a privacy-respecting, open metasearch engine</p>
   </footer>
+
   <script src="/static/js/settings.js"></script>
+
   <div id="settings-popover" data-open="false" role="dialog" aria-label="Preferences" aria-modal="true">
     <div class="settings-popover-header">
       Preferences
-      <button class="settings-popover-close" aria-label="Close">&#215;</button>
+      <button class="settings-popover-close" aria-label="Close">×</button>
     </div>
     <div class="settings-popover-body"></div>
   </div>
+
+  <div id="autocomplete-dropdown"></div>
+
   <script>
   (function () {
     'use strict';
@@ -50,12 +62,10 @@
     var activeIndex = -1;
     var fetchController = null;
 
-    // Escape regex special chars for highlight matching
     function escapeRegex(str) {
       return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     }
 
-    // Highlight matching prefix
     function highlight(text, query) {
       if (!query) return text;
       var re = new RegExp('^(' + escapeRegex(query) + ')', 'i');
@@ -72,7 +82,7 @@
         var escaped = highlight(suggestions[i], input.value);
         html += '<div class="autocomplete-suggestion" data-index="' + i + '">' + escaped + '</div>';
       }
-      html += '<div class="autocomplete-footer">Press <kbd>↑</kbd><kbd>↓</kbd> to navigate, Enter to select, Esc to close</div>';
+      html += '<div class="autocomplete-footer">↑↓ navigate · Enter select · Esc close</div>';
       dropdown.innerHTML = html;
       dropdown.classList.add('open');
       activeIndex = -1;
@@ -141,14 +151,13 @@
     });
 
     input.addEventListener('blur', function () {
-      // Delay to allow click events on suggestions
       setTimeout(closeDropdown, 150);
     });
 
     dropdown.addEventListener('mousedown', function (e) {
       var item = e.target.closest('.autocomplete-suggestion');
       if (item) {
-        e.preventDefault(); // prevent blur from firing before select
+        e.preventDefault();
         var idx = parseInt(item.getAttribute('data-index'), 10);
         selectSuggestion(idx);
       }
diff --git a/internal/views/templates/index.html b/internal/views/templates/index.html
index ccf597e..c4d1d57 100644
--- a/internal/views/templates/index.html
+++ b/internal/views/templates/index.html
@@ -1,15 +1,23 @@
 {{define "title"}}{{end}}
 {{define "content"}}
-<div class="index">
-  <div class="title"><h1>kafka</h1></div>
-  <div id="search">
+<div class="search-hero">
+  <div class="hero-logo">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <circle cx="11" cy="11" r="8"/>
+      <path d="m21 21-4.35-4.35"/>
+    </svg>
+  </div>
+  <p class="hero-tagline">Search the web privately, without tracking or censorship.</p>
+  <div class="search-box">
     <form method="GET" action="/search" role="search" id="search-form">
-      <input type="text" name="q" id="q" placeholder="Search…" autocomplete="off" autofocus
-        hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:500ms" hx-include="this">
-      <button type="submit">Search</button>
-      <input type="hidden" name="engines" id="engines-input" value="">
+      <input type="text" name="q" id="q" placeholder="Search the web…" autocomplete="off" autofocus>
+      <button type="submit" class="search-box-submit" aria-label="Search">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"/>
+          <path d="m21 21-4.35-4.35"/>
+        </svg>
+      </button>
     </form>
-    <div id="autocomplete-dropdown"></div>
   </div>
 </div>
 <div id="results"></div>
diff --git a/internal/views/templates/result_item.html b/internal/views/templates/result_item.html
index 2cbadab..cf1c33b 100644
--- a/internal/views/templates/result_item.html
+++ b/internal/views/templates/result_item.html
@@ -1,16 +1,15 @@
 {{define "result_item"}}
 <article class="result">
-  <h3 class="result_header">
+  <div class="result_header">
     <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.Title}}</a>
-  </h3>
+  </div>
   <div class="result_url">
+    <img class="result-favicon" src="https://www.google.com/s2/favicons?domain={{.URL | urlquery}}&sz=32" alt="" loading="lazy" onerror="this.style.display='none'">
     <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.URL}}</a>
+    <span class="engine-badge">{{.Engine}}</span>
   </div>
   {{if .Content}}
   <p class="result_content">{{.Content}}</p>
   {{end}}
-  {{if .Engine}}
-  <div class="result_engine"><span class="engine">{{.Engine}}</span></div>
-  {{end}}
 </article>
 {{end}}
diff --git a/internal/views/templates/results.html b/internal/views/templates/results.html
index 2a795c3..7010a3a 100644
--- a/internal/views/templates/results.html
+++ b/internal/views/templates/results.html
@@ -1,15 +1,46 @@
 {{define "title"}}{{if .Query}}{{.Query}} — {{end}}{{end}}
 {{define "content"}}
-<div id="search">
-  <form method="GET" action="/search" role="search">
-    <input type="text" name="q" id="q" value="{{.Query}}" autocomplete="off"
-      hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:500ms" hx-include="this">
-    <button type="submit">Search</button>
-    <input type="hidden" name="engines" id="engines-input" value="">
-  </form>
-</div>
+<div class="results-layout">
+  <!-- Compact search bar -->
+  <div class="search-compact">
+    <div class="search-box">
+      <form method="GET" action="/search" role="search" id="search-form">
+        <input type="text" name="q" id="q" value="{{.Query}}" autocomplete="off" autofocus
+          hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:500ms" hx-include="this">
+        <button type="submit" class="search-box-submit" aria-label="Search">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"/>
+            <path d="m21 21-4.35-4.35"/>
+          </svg>
+        </button>
+      </form>
+    </div>
+  </div>
 
-<div id="results">
-  {{template "results_inner" .}}
+  <!-- Results -->
+  <div class="results-column" id="results">
+    {{template "results_inner" .}}
+  </div>
+
+  <!-- Sidebar -->
+  <aside class="sidebar" id="sidebar">
+    {{if .Suggestions}}
+    <div class="sidebar-card">
+      <div class="sidebar-title">Suggestions</div>
+      <div class="suggestion-list">
+        {{range .Suggestions}}<span class="suggestion"><a href="/search?q={{. | urlquery}}">{{.}}</a></span>{{end}}
+      </div>
+    </div>
+    {{end}}
+
+    {{if .UnresponsiveEngines}}
+    <div class="sidebar-card">
+      <div class="sidebar-title">Engines with issues</div>
+      <ul class="unresponsive-engines">
+        {{range .UnresponsiveEngines}}<li>{{index . 0}}: {{index . 1}}</li>{{end}}
+      </ul>
+    </div>
+    {{end}}
+  </aside>
 </div>
 {{end}}
diff --git a/internal/views/templates/results_inner.html b/internal/views/templates/results_inner.html
index 1b93c66..0f9450a 100644
--- a/internal/views/templates/results_inner.html
+++ b/internal/views/templates/results_inner.html
@@ -1,51 +1,26 @@
 {{define "results_inner"}}
 {{if .Corrections}}
-<div class="corrections">
-  {{range .Corrections}}<span class="correction">{{.}}</span>{{end}}
-</div>
+<div class="correction">{{range .Corrections}}{{.}} {{end}}</div>
 {{end}}
 
-{{if .Answers}}
+{{if or .Answers .Infoboxes}}
 <div id="answers">
   {{range .Answers}}
-  <div class="answer">{{.}}</div>
+  <div class="dialog-error">{{.}}</div>
+  {{end}}
+  {{range .Infoboxes}}
+  <div class="infobox">
+    {{if .title}}<div class="title">{{.title}}</div>{{end}}
+    {{if .content}}<div>{{.content}}</div>{{end}}
+    {{if .img_src}}<img src="{{.img_src}}" alt="{{.title}}">{{end}}
+  </div>
   {{end}}
 </div>
 {{end}}
 
-<div id="sidebar">
+<div class="results-meta">
   {{if .NumberOfResults}}
-  <p id="result_count"><small>{{.NumberOfResults}} results</small></p>
-  {{end}}
-
-  {{if .Infoboxes}}
-  <div id="infoboxes">
-    {{range .Infoboxes}}
-    <div class="infobox">
-      {{if .title}}<div class="title">{{.title}}</div>{{end}}
-      {{if .content}}<div class="content">{{.content}}</div>{{end}}
-      {{if .img_src}}<img src="{{.img_src}}" alt="{{.title}}" loading="lazy">{{end}}
-    </div>
-    {{end}}
-  </div>
-  {{end}}
-
-  {{if .Suggestions}}
-  <div id="suggestions">
-    <small>Suggestions:</small>
-    <div>
-      {{range .Suggestions}}<span class="suggestion"><a href="/search?q={{.}}">{{.}}</a></span>{{end}}
-    </div>
-  </div>
-  {{end}}
-
-  {{if .UnresponsiveEngines}}
-  <div class="unresponsive_engines">
-    <small>Unresponsive engines:</small>
-    <ul>
-      {{range .UnresponsiveEngines}}<li>{{index . 0}}: {{index . 1}}</li>{{end}}
-    </ul>
-  </div>
+  <span>{{.NumberOfResults}} results</span>
   {{end}}
 </div>
 
@@ -59,51 +34,47 @@
   {{end}}
   {{end}}
   {{else if not .Answers}}
-  <div class="no_results">
-    <p>No results found.</p>
-    {{if .Query}}<p>Try different keywords or check your spelling.</p>{{end}}
+  <div class="no-results">
+    <div class="no-results-icon">🔍</div>
+    <h2>No results found</h2>
+    <p>Try different keywords or check your spelling.</p>
   </div>
   {{end}}
 </div>
 
 {{if .Pageno}}
-<nav id="pagination" role="navigation">
+<nav class="pagination" role="navigation">
   {{if gt .Pageno 1}}
-  <form method="GET" action="/search" class="previous_page">
+  <form method="GET" action="/search" class="prev-next">
     <input type="hidden" name="q" value="{{.Query}}">
     <input type="hidden" name="pageno" value="{{.PrevPage}}">
-    <input type="hidden" name="format" value="html">
-    <button type="submit" role="link">← Previous</button>
+    <button type="submit">← Prev</button>
   </form>
   {{end}}
 
-  <div class="numbered_pagination">
-    {{range .PageNumbers}}
-    {{if .IsCurrent}}
-    <span class="page_number_current">{{.Num}}</span>
-    {{else}}
-    <form method="GET" action="/search" class="page_number">
-      <input type="hidden" name="q" value="{{$.Query}}">
-      <input type="hidden" name="pageno" value="{{.Num}}">
-      <input type="hidden" name="format" value="html">
-      <button type="submit" role="link">{{.Num}}</button>
-    </form>
-    {{end}}
-    {{end}}
-  </div>
+  {{range .PageNumbers}}
+  {{if .IsCurrent}}
+  <span class="page-current">{{.Num}}</span>
+  {{else}}
+  <form method="GET" action="/search" class="page-link">
+    <input type="hidden" name="q" value="{{$.Query}}">
+    <input type="hidden" name="pageno" value="{{.Num}}">
+    <button type="submit">{{.Num}}</button>
+  </form>
+  {{end}}
+  {{end}}
 
   {{if .HasNext}}
-  <form method="GET" action="/search" class="next_page">
+  <form method="GET" action="/search" class="prev-next">
     <input type="hidden" name="q" value="{{.Query}}">
     <input type="hidden" name="pageno" value="{{.NextPage}}">
-    <input type="hidden" name="format" value="html">
-    <button type="submit" role="link">Next →</button>
+    <button type="submit">Next →</button>
   </form>
   {{end}}
 </nav>
 {{end}}
 
-<div id="backToTop">
+<div class="back-to-top" id="backToTop">
   <a href="#">↑ Back to top</a>
 </div>
 
diff --git a/internal/views/templates/video_item.html b/internal/views/templates/video_item.html
index 0ca0109..b94c061 100644
--- a/internal/views/templates/video_item.html
+++ b/internal/views/templates/video_item.html
@@ -8,15 +8,15 @@
   </div>
   {{end}}
   <div class="result_content_wrapper">
-    <h3 class="result_header">
+    <div class="result_header">
       <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.Title}}</a>
-    </h3>
+    </div>
+    <div class="result_url">
+      <span class="engine-badge">youtube</span>
+    </div>
     {{if .Content}}
     <p class="result_content">{{.Content}}</p>
     {{end}}
-    {{if .Engine}}
-    <div class="result_engine"><span class="engine">{{.Engine}}</span></div>
-    {{end}}
   </div>
 </article>
 {{end}}