diff --git a/static/search.ts b/static/search.ts
index 38de6ac..096f833 100644
--- a/static/search.ts
+++ b/static/search.ts
@@ -11,25 +11,24 @@ interface CommandPaletteItem {
 const commandPaletteInitializedKey = Symbol("commandPaletteInitialized");
 const globalWindow = window as Window & { [commandPaletteInitializedKey]?: boolean };
 
-const paletteInput = document.getElementById("command-palette-input") as HTMLInputElement | null;
-const paletteResults = document.querySelector(
+const searchInput = document.getElementById("command-palette-input") as HTMLInputElement | null;
+const searchResults = document.querySelector(
   "[data-command-palette-results]",
 ) as HTMLElement | null;
-const paletteDialog = document.querySelector("[data-command-palette-dialog]") as HTMLElement | null;
-const paletteRoot = document.querySelector("[data-command-palette-root]") as HTMLElement | null;
-const paletteOpenButtons = document.querySelectorAll("[data-command-palette-open]");
-const paletteCloseButtons = document.querySelectorAll("[data-command-palette-close]");
+const searchDialog = document.querySelector("[data-command-palette-dialog]") as HTMLElement | null;
+const searchRoot = document.querySelector("[data-command-palette-root]") as HTMLElement | null;
+const searchOpenButtons = document.querySelectorAll("[data-command-palette-open]");
+const searchCloseButtons = document.querySelectorAll("[data-command-palette-close]");
+const searchClearButtons = document.querySelectorAll("[data-command-palette-clear]");
 const shortcutHints = document.querySelectorAll("[data-command-palette-shortcut]");
 
-let allPaletteItems: CommandPaletteItem[] = [];
-let paletteItems: CommandPaletteItem[] = [];
+let resultItems: CommandPaletteItem[] = [];
 let selectedIndex = 0;
 let fetchTimeout: number | undefined;
 let lastQuery = "";
-let continueExpanded = false;
 let activeRequestController: AbortController | undefined;
+let lastFocusedSearchOpener: HTMLElement | null = null;
 const responseCache = new Map<string, CommandPaletteItem[]>();
-let lastFocusedPaletteOpener: HTMLElement | null = null;
 
 const iconPaths: Record<string, string> = {
   bookmark: "M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z",
@@ -40,10 +39,24 @@ const iconPaths: Record<string, string> = {
   trending: "M3 17l6-6 4 4 8-8 M14 7h7v7",
 };
 
+const typeLabels: Record<string, string> = {
+  anime: "Top results",
+};
+
+const groupOrder = ["anime"];
+
 const isMac = (): boolean => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
 
+const isTypingTarget = (target: EventTarget | null): boolean =>
+  target instanceof HTMLInputElement ||
+  target instanceof HTMLTextAreaElement ||
+  target instanceof HTMLSelectElement ||
+  (target instanceof HTMLElement && target.isContentEditable);
+
+const isSearchOpen = (): boolean => searchDialog?.classList.contains("flex") ?? false;
+
 const isSafeImageUrl = (rawUrl?: string): boolean => {
-  if (!rawUrl || typeof rawUrl !== "string") {
+  if (!rawUrl) {
     return false;
   }
 
@@ -55,19 +68,15 @@ const isSafeImageUrl = (rawUrl?: string): boolean => {
   }
 };
 
-const isTypingTarget = (target: EventTarget | null): boolean =>
-  target instanceof HTMLInputElement ||
-  target instanceof HTMLTextAreaElement ||
-  target instanceof HTMLSelectElement ||
-  (target instanceof HTMLElement && target.isContentEditable);
+const setSearchState = (open: boolean): void => {
+  if (!searchDialog) {
+    return;
+  }
 
-const isOpen = (): boolean => paletteDialog?.classList.contains("flex") ?? false;
-
-const setDialogState = (open: boolean): void => {
-  if (!paletteDialog) return;
-  paletteDialog.classList.toggle("hidden", !open);
-  paletteDialog.classList.toggle("flex", open);
-  paletteDialog.setAttribute("aria-hidden", open ? "false" : "true");
+  searchDialog.classList.toggle("hidden", !open);
+  searchDialog.classList.toggle("flex", open);
+  searchDialog.setAttribute("aria-hidden", open ? "false" : "true");
+  document.body.classList.toggle("overflow-hidden", open);
 };
 
 const setShortcutHints = (): void => {
@@ -76,46 +85,11 @@ const setShortcutHints = (): void => {
   });
 };
 
-const clearResults = (): void => {
-  paletteResults?.replaceChildren();
-};
-
-const buildSearchActionItem = (query: string): CommandPaletteItem => ({
-  id: "search:" + query.toLowerCase(),
-  type: "search",
-  label: `Search anime for "${query}"`,
-  subtitle: "Browse",
-  href: "/browse?q=" + encodeURIComponent(query),
-  icon: "search",
-});
-
-const buildIcon = (item: CommandPaletteItem): HTMLElement => {
-  if (isSafeImageUrl(item.image)) {
-    const img = document.createElement("img");
-    img.className = "h-11 w-8 shrink-0 bg-background-surface object-cover";
-    img.src = item.image || "";
-    img.alt = "";
-    return img;
-  }
-
-  const icon = document.createElement("div");
-  icon.className = "flex h-8 w-8 shrink-0 items-center justify-center text-foreground-muted";
-
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("fill", item.icon === "play" ? "currentColor" : "none");
-  svg.setAttribute("stroke", "currentColor");
-  svg.setAttribute("stroke-width", "1.7");
-  svg.setAttribute("stroke-linecap", "round");
-  svg.setAttribute("stroke-linejoin", "round");
-  svg.classList.add("size-5");
-
-  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute("d", iconPaths[item.icon || "search"] || iconPaths.search);
-  svg.appendChild(path);
-  icon.appendChild(svg);
-
-  return icon;
+const setClearButtonState = (hasQuery: boolean): void => {
+  searchClearButtons.forEach((button) => {
+    button.classList.toggle("opacity-0", !hasQuery);
+    button.classList.toggle("pointer-events-none", !hasQuery);
+  });
 };
 
 const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => {
@@ -123,7 +97,7 @@ const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => {
   svg.setAttribute("viewBox", "0 0 24 24");
   svg.setAttribute("fill", "none");
   svg.setAttribute("stroke", "currentColor");
-  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-width", "1.8");
   svg.setAttribute("stroke-linecap", "round");
   svg.setAttribute("stroke-linejoin", "round");
   svg.setAttribute("aria-hidden", "true");
@@ -136,54 +110,70 @@ const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => {
   return svg;
 };
 
-const selectItem = (index: number): void => {
-  if (!paletteResults || paletteItems.length === 0) {
+const buildFallbackIcon = (item: CommandPaletteItem): HTMLElement => {
+  const icon = document.createElement("div");
+  icon.className =
+    "flex aspect-2/3 w-full items-center justify-center bg-background-button text-foreground-muted";
+
+  const path = iconPaths[item.icon || "search"] || iconPaths.search;
+  icon.appendChild(buildSvgIcon(path, "size-7"));
+  return icon;
+};
+
+const buildPosterImage = (item: CommandPaletteItem): HTMLElement => {
+  if (!isSafeImageUrl(item.image)) {
+    return buildFallbackIcon(item);
+  }
+
+  const img = document.createElement("img");
+  img.className = "aspect-2/3 w-full bg-background-button object-cover";
+  img.src = item.image || "";
+  img.alt = "";
+  img.loading = "lazy";
+  return img;
+};
+
+const clearResults = (): void => {
+  resultItems = [];
+  selectedIndex = 0;
+  searchResults?.replaceChildren();
+};
+
+const cancelScheduledFetch = (): void => {
+  if (!fetchTimeout) {
+    return;
+  }
+
+  window.clearTimeout(fetchTimeout);
+  fetchTimeout = undefined;
+};
+
+const selectItem = (index: number, scrollIntoView: boolean): void => {
+  if (!searchResults || resultItems.length === 0) {
     selectedIndex = 0;
     return;
   }
 
-  selectedIndex = Math.max(0, Math.min(index, paletteItems.length - 1));
-  paletteResults.querySelectorAll<HTMLElement>("[data-command-palette-item]").forEach((row, i) => {
-    const selected = i === selectedIndex;
-    row.classList.toggle("bg-surface-hover", selected);
-    row.setAttribute("aria-selected", String(selected));
-    if (selected) {
-      row.scrollIntoView({ block: "nearest" });
+  selectedIndex = Math.max(0, Math.min(index, resultItems.length - 1));
+  searchResults.querySelectorAll<HTMLElement>("[data-command-palette-item]").forEach((item) => {
+    const selected = Number(item.dataset.resultIndex) === selectedIndex;
+    item.classList.toggle("opacity-75", selected);
+    item.setAttribute("aria-selected", String(selected));
+    if (selected && scrollIntoView) {
+      item.scrollIntoView({ block: "nearest" });
     }
   });
 };
 
 const runSelectedItem = (): void => {
-  const item = paletteItems[selectedIndex];
+  const item = resultItems[selectedIndex];
   if (!item) {
     return;
   }
+
   window.location.href = item.href;
 };
 
-const removeContinueWatchingItem = (item: CommandPaletteItem): void => {
-  const animeID = item.id.replace("continue:", "");
-  if (!animeID || animeID === item.id) {
-    return;
-  }
-
-  fetch("/api/continue-watching/" + encodeURIComponent(animeID), { method: "DELETE" })
-    .then((res: Response) => {
-      if (!res.ok) {
-        return;
-      }
-
-      allPaletteItems = allPaletteItems.filter((candidate) => candidate.id !== item.id);
-      paletteItems = paletteItems.filter((candidate) => candidate.id !== item.id);
-      responseCache.clear();
-      removeContinueWatchingCard(animeID);
-      renderItems(allPaletteItems);
-    })
-    .catch((err: unknown) => {
-      console.error("Continue watching remove error:", err);
-    });
-};
-
 const removeContinueWatchingCard = (animeID: string): void => {
   document.getElementById("continue-watching-" + animeID)?.remove();
 
@@ -197,41 +187,59 @@ const removeContinueWatchingCard = (animeID: string): void => {
   }
 };
 
-const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement => {
-  const row = document.createElement("a");
-  row.href = item.href;
-  row.className =
-    "flex min-h-12 items-center gap-3 px-4 py-2 text-foreground no-underline transition-colors hover:bg-surface-hover hover:no-underline focus-visible:bg-surface-hover focus-visible:outline-none";
-  row.dataset.commandPaletteItem = item.id;
-  row.setAttribute("role", "option");
-  row.setAttribute("aria-selected", String(index === selectedIndex));
-
-  row.addEventListener("mouseenter", () => selectItem(index));
-
-  row.appendChild(buildIcon(item));
-
-  const copy = document.createElement("div");
-  copy.className = "grid min-w-0 flex-1 gap-0.5";
-
-  const label = document.createElement("div");
-  label.className = "truncate text-sm font-normal text-foreground";
-  label.textContent = item.label;
-  copy.appendChild(label);
-
-  if (item.subtitle && item.type !== "navigation") {
-    const subtitle = document.createElement("div");
-    subtitle.className = "truncate text-xs font-normal text-foreground-muted";
-    subtitle.textContent = item.subtitle;
-    copy.appendChild(subtitle);
+const removeContinueWatchingItem = (item: CommandPaletteItem): void => {
+  const animeID = item.id.replace("continue:", "");
+  if (!animeID || animeID === item.id) {
+    return;
   }
 
-  row.appendChild(copy);
+  fetch("/api/continue-watching/" + encodeURIComponent(animeID), { method: "DELETE" })
+    .then((res: Response) => {
+      if (!res.ok) {
+        return;
+      }
+
+      responseCache.clear();
+      removeContinueWatchingCard(animeID);
+      renderItems(resultItems.filter((candidate) => candidate.id !== item.id));
+    })
+    .catch((err: unknown) => {
+      console.error("Continue watching remove error:", err);
+    });
+};
+
+const cleanLabel = (item: CommandPaletteItem): string => {
+  if (item.type === "continue") {
+    return item.label.replace(/^Continue watching\s+/i, "");
+  }
+
+  if (item.type === "navigation") {
+    return item.label.replace(/^Go to\s+/i, "");
+  }
+
+  return item.label;
+};
+
+const buildCard = (item: CommandPaletteItem, index: number): HTMLAnchorElement => {
+  const card = document.createElement("a");
+  card.href = item.href;
+  card.className =
+    "group block min-w-0 text-foreground no-underline transition focus-visible:outline-none hover:no-underline";
+  card.dataset.commandPaletteItem = item.id;
+  card.dataset.resultIndex = String(index);
+  card.setAttribute("role", "option");
+  card.setAttribute("aria-selected", String(index === selectedIndex));
+  card.addEventListener("mouseenter", () => selectItem(index, false));
+
+  const media = document.createElement("div");
+  media.className = "relative mb-3 overflow-hidden bg-background-button";
+  media.appendChild(buildPosterImage(item));
 
   if (item.type === "continue") {
     const removeButton = document.createElement("button");
     removeButton.type = "button";
     removeButton.className =
-      "flex h-8 w-8 shrink-0 items-center justify-center text-red-500/70 transition-colors hover:text-red-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent";
+      "absolute right-2 top-2 flex size-8 items-center justify-center bg-black/70 text-white opacity-0 transition hover:bg-black group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent";
     removeButton.setAttribute("aria-label", "Remove from Continue Watching");
     removeButton.appendChild(buildSvgIcon("M18 6 6 18 M6 6l12 12", "size-4"));
     removeButton.addEventListener("click", (event) => {
@@ -239,98 +247,174 @@ const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement =>
       event.stopPropagation();
       removeContinueWatchingItem(item);
     });
-    row.appendChild(removeButton);
-  } else {
-    const hint = document.createElement("div");
-    hint.className = "hidden text-xs text-foreground-muted sm:block";
-    hint.textContent = index === selectedIndex ? "Enter" : "";
-    row.appendChild(hint);
+    media.appendChild(removeButton);
   }
 
+  card.appendChild(media);
+
+  const title = document.createElement("div");
+  title.className = "line-clamp-2 text-sm font-semibold leading-snug text-foreground";
+  title.textContent = cleanLabel(item);
+  card.appendChild(title);
+
+  if (item.subtitle) {
+    const subtitle = document.createElement("div");
+    subtitle.className = "mt-1 truncate text-xs font-medium text-foreground-muted";
+    subtitle.textContent = item.subtitle;
+    card.appendChild(subtitle);
+  }
+
+  return card;
+};
+
+const buildCompactItem = (item: CommandPaletteItem, index: number): HTMLAnchorElement => {
+  const row = document.createElement("a");
+  row.href = item.href;
+  row.className =
+    "group flex min-h-16 items-center gap-3 px-3 py-2 text-foreground no-underline transition hover:bg-surface-hover hover:no-underline focus-visible:outline-none";
+  row.dataset.commandPaletteItem = item.id;
+  row.dataset.resultIndex = String(index);
+  row.setAttribute("role", "option");
+  row.setAttribute("aria-selected", String(index === selectedIndex));
+  row.addEventListener("mouseenter", () => selectItem(index, false));
+
+  const thumb = document.createElement("div");
+  thumb.className = "w-11 shrink-0 overflow-hidden";
+  thumb.appendChild(buildPosterImage(item));
+  row.appendChild(thumb);
+
+  const copy = document.createElement("div");
+  copy.className = "min-w-0 flex-1";
+
+  const title = document.createElement("div");
+  title.className = "truncate text-sm font-semibold text-foreground";
+  title.textContent = cleanLabel(item);
+  copy.appendChild(title);
+
+  if (item.subtitle) {
+    const subtitle = document.createElement("div");
+    subtitle.className = "mt-0.5 truncate text-xs text-foreground-muted";
+    subtitle.textContent = item.subtitle;
+    copy.appendChild(subtitle);
+  }
+
+  row.appendChild(copy);
   return row;
 };
 
-const buildContinueToggle = (hiddenCount: number): HTMLButtonElement => {
-  const button = document.createElement("button");
-  button.type = "button";
-  button.className =
-    "flex w-full items-center gap-3 px-4 py-2 text-left text-xs font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent";
+const buildSection = (
+  title: string,
+  items: CommandPaletteItem[],
+  startIndex: number,
+  variant: "grid" | "compact",
+): HTMLElement => {
+  const section = document.createElement("section");
+  section.className = "min-w-0";
 
-  const spacer = document.createElement("span");
-  spacer.className = "h-8 w-8 shrink-0";
-  button.appendChild(spacer);
-
-  const label = document.createElement("span");
-  label.className = "flex-1";
-  label.textContent = continueExpanded
-    ? "Hide extra continue watching"
-    : `Show ${hiddenCount} more continue watching`;
-  button.appendChild(label);
-
-  const chevron = buildSvgIcon(continueExpanded ? "m18 15-6-6-6 6" : "m6 9 6 6 6-6", "size-4");
-  button.appendChild(chevron);
-
-  button.addEventListener("click", () => {
-    continueExpanded = !continueExpanded;
-    renderItems(allPaletteItems);
-  });
-
-  return button;
-};
-
-const visiblePaletteItems = (items: CommandPaletteItem[]): CommandPaletteItem[] => {
-  if (lastQuery !== "") {
-    return items;
-  }
-
-  const continueItems = items.filter((item) => item.type === "continue");
-  if (continueItems.length <= 1 || continueExpanded) {
-    return items;
-  }
-
-  let firstContinueShown = false;
-  return items.filter((item) => {
-    if (item.type !== "continue") {
-      return true;
-    }
-    if (!firstContinueShown) {
-      firstContinueShown = true;
-      return true;
-    }
-    return false;
-  });
-};
-
-const renderItems = (items: CommandPaletteItem[]): void => {
-  if (!paletteResults) {
-    return;
-  }
-
-  allPaletteItems = items;
-  paletteItems = visiblePaletteItems(items);
-  selectedIndex = 0;
-
-  if (paletteItems.length === 0) {
-    const empty = document.createElement("div");
-    empty.className = "px-4 py-8 text-center text-sm font-normal text-foreground-muted";
-    empty.textContent = "No commands found";
-    paletteResults.replaceChildren(empty);
-    return;
-  }
+  const heading = document.createElement("h2");
+  heading.className = "mb-4 text-base font-bold text-foreground md:text-lg";
+  heading.textContent = title;
+  section.appendChild(heading);
 
   const list = document.createElement("div");
   list.setAttribute("role", "listbox");
-  list.setAttribute("aria-label", "Command palette results");
-  paletteItems.forEach((item, index) => {
-    list.appendChild(buildRow(item, index));
+  list.setAttribute("aria-label", title);
+  list.className =
+    variant === "grid"
+      ? "grid grid-cols-2 gap-x-5 gap-y-7 sm:grid-cols-3 lg:grid-cols-4"
+      : "grid gap-1 sm:grid-cols-2";
 
-    const continueCount = items.filter((candidate) => candidate.type === "continue").length;
-    if (lastQuery === "" && continueCount > 1 && item.type === "continue" && index === 0) {
-      list.appendChild(buildContinueToggle(continueCount - 1));
-    }
+  items.forEach((item, itemIndex) => {
+    const index = startIndex + itemIndex;
+    list.appendChild(variant === "grid" ? buildCard(item, index) : buildCompactItem(item, index));
   });
-  paletteResults.replaceChildren(list);
-  selectItem(0);
+
+  section.appendChild(list);
+  return section;
+};
+
+const renderEmptyState = (query: string): void => {
+  if (!searchResults) {
+    return;
+  }
+
+  const empty = document.createElement("div");
+  empty.className =
+    "mx-auto flex min-h-80 w-full max-w-5xl flex-col justify-center px-5 py-14 text-center md:px-8";
+
+  const title = document.createElement("div");
+  title.className = "text-2xl font-semibold text-foreground";
+  title.textContent = query ? "No results found" : "Start typing to search your anime";
+  empty.appendChild(title);
+
+  const subtitle = document.createElement("p");
+  subtitle.className = "mx-auto mt-3 max-w-lg text-sm leading-6 text-foreground-muted";
+  subtitle.textContent = query
+    ? "Try a shorter title, alternate spelling, or browse the full search results."
+    : "Search opens title results first, then your watchlist and quick links when they matter.";
+  empty.appendChild(subtitle);
+
+  searchResults.replaceChildren(empty);
+};
+
+const groupedItems = (items: CommandPaletteItem[]): Map<string, CommandPaletteItem[]> => {
+  const groups = new Map<string, CommandPaletteItem[]>();
+  items.forEach((item) => {
+    const key = item.type in typeLabels ? item.type : "anime";
+    const group = groups.get(key) || [];
+    group.push(item);
+    groups.set(key, group);
+  });
+  return groups;
+};
+
+const orderedGroupKeys = (groups: Map<string, CommandPaletteItem[]>): string[] => {
+  return groupOrder.filter((key) => groups.has(key));
+};
+
+const renderItems = (items: CommandPaletteItem[]): void => {
+  if (!searchResults) {
+    return;
+  }
+
+  selectedIndex = 0;
+
+  if (items.length === 0) {
+    renderEmptyState(lastQuery);
+    return;
+  }
+
+  const shell = document.createElement("div");
+  shell.className = "mx-auto w-full max-w-5xl px-5 py-9 md:px-8 md:py-12";
+
+  const groups = groupedItems(items);
+  const keys = orderedGroupKeys(groups);
+  resultItems = keys.flatMap((key) => groups.get(key) || []);
+  let cursor = 0;
+
+  keys.forEach((key) => {
+    const groupItems = groups.get(key);
+    if (!groupItems) {
+      return;
+    }
+
+    const variant = key === "anime" ? "grid" : "compact";
+    const section = buildSection(typeLabels[key] || "Results", groupItems, cursor, variant);
+    section.classList.add("mb-12");
+    shell.appendChild(section);
+    cursor += groupItems.length;
+  });
+
+  searchResults.replaceChildren(shell);
+  selectItem(0, false);
+};
+
+const visibleSearchItems = (items: CommandPaletteItem[], query: string): CommandPaletteItem[] => {
+  if (query === "") {
+    return [];
+  }
+
+  return items.filter((item) => item.type === "anime");
 };
 
 const renderPendingQuery = (query: string): void => {
@@ -338,17 +422,23 @@ const renderPendingQuery = (query: string): void => {
     return;
   }
 
-  renderItems([buildSearchActionItem(query)]);
+  clearResults();
 };
 
-const fetchPaletteItems = (query: string): void => {
+const fetchSearchItems = (query: string): void => {
   lastQuery = query;
+  setClearButtonState(query !== "");
 
   if (activeRequestController) {
     activeRequestController.abort();
     activeRequestController = undefined;
   }
 
+  if (query === "") {
+    clearResults();
+    return;
+  }
+
   const cached = responseCache.get(query);
   if (cached) {
     renderItems(cached);
@@ -371,16 +461,19 @@ const fetchPaletteItems = (query: string): void => {
       if (controller.signal.aborted || query !== lastQuery) {
         return;
       }
+
+      const visibleItems = visibleSearchItems(items, query);
       activeRequestController = undefined;
-      responseCache.set(query, items);
-      renderItems(items);
+      responseCache.set(query, visibleItems);
+      renderItems(visibleItems);
     })
     .catch((err: unknown) => {
       if (controller.signal.aborted) {
         return;
       }
+
       activeRequestController = undefined;
-      console.error("Command palette error:", err);
+      console.error("Search overlay error:", err);
       renderItems([]);
     });
 };
@@ -390,58 +483,72 @@ const scheduleFetch = (): void => {
     window.clearTimeout(fetchTimeout);
   }
 
-  const query = paletteInput?.value.trim() || "";
-  fetchTimeout = window.setTimeout(() => fetchPaletteItems(query), query.length >= 2 ? 300 : 120);
+  const query = searchInput?.value.trim() || "";
+  setClearButtonState(query !== "");
+  fetchTimeout = window.setTimeout(() => fetchSearchItems(query), query.length >= 2 ? 240 : 80);
 };
 
-const openPalette = (): void => {
-  if (!paletteDialog || !paletteInput) {
+const openSearch = (): void => {
+  if (!searchDialog || !searchInput) {
     return;
   }
 
-  lastFocusedPaletteOpener =
-    document.activeElement instanceof HTMLElement ? document.activeElement : null;
-  setDialogState(true);
-  paletteInput.value = "";
-  paletteInput.focus();
-  continueExpanded = false;
-  fetchPaletteItems("");
+  lastFocusedSearchOpener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  setSearchState(true);
+  searchInput.value = "";
+  lastQuery = "";
+  cancelScheduledFetch();
+  setClearButtonState(false);
+  clearResults();
+  searchInput.focus();
 };
 
-const closePalette = (): void => {
-  if (!paletteDialog || !paletteInput) {
+const closeSearch = (): void => {
+  if (!searchDialog || !searchInput) {
     return;
   }
 
-  setDialogState(false);
+  setSearchState(false);
+  cancelScheduledFetch();
   if (activeRequestController) {
     activeRequestController.abort();
     activeRequestController = undefined;
   }
-  paletteInput.value = "";
-  allPaletteItems = [];
-  paletteItems = [];
-  continueExpanded = false;
+  searchInput.value = "";
+  lastQuery = "";
+  setClearButtonState(false);
   clearResults();
-  lastFocusedPaletteOpener?.focus();
+  lastFocusedSearchOpener?.focus();
+};
+
+const clearSearchInput = (): void => {
+  if (!searchInput) {
+    return;
+  }
+
+  searchInput.value = "";
+  searchInput.focus();
+  cancelScheduledFetch();
+  setClearButtonState(false);
+  fetchSearchItems("");
 };
 
 const onDocumentClick = (event: MouseEvent): void => {
-  if (event.target === paletteDialog) {
-    closePalette();
+  if (event.target === searchDialog) {
+    closeSearch();
   }
 };
 
 const onInputKeydown = (event: KeyboardEvent): void => {
   if (event.key === "ArrowDown") {
     event.preventDefault();
-    selectItem(selectedIndex + 1);
+    selectItem(selectedIndex + 1, true);
     return;
   }
 
   if (event.key === "ArrowUp") {
     event.preventDefault();
-    selectItem(selectedIndex - 1);
+    selectItem(selectedIndex - 1, true);
     return;
   }
 
@@ -456,50 +563,51 @@ const onDocumentKeydown = (event: KeyboardEvent): void => {
 
   if (commandShortcut && !isTypingTarget(event.target)) {
     event.preventDefault();
-    if (isOpen()) {
-      closePalette();
+    if (isSearchOpen()) {
+      closeSearch();
     } else {
-      openPalette();
+      openSearch();
     }
     return;
   }
 
   if (event.key === "/" && !isTypingTarget(event.target)) {
     event.preventDefault();
-    openPalette();
+    openSearch();
     return;
   }
 
-  if (event.key === "Escape" && isOpen()) {
+  if (event.key === "Escape" && isSearchOpen()) {
     event.preventDefault();
-    closePalette();
+    closeSearch();
   }
 };
 
-const initCommandPalette = (): void => {
+const initSearchOverlay = (): void => {
   if (globalWindow[commandPaletteInitializedKey]) {
     return;
   }
   globalWindow[commandPaletteInitializedKey] = true;
 
-  if (!paletteInput || !paletteResults || !paletteRoot) {
+  if (!searchInput || !searchResults || !searchRoot) {
     return;
   }
 
   setShortcutHints();
-  paletteOpenButtons.forEach((button) => {
-    button.addEventListener("click", openPalette);
+  searchOpenButtons.forEach((button) => {
+    button.addEventListener("click", openSearch);
   });
-  paletteCloseButtons.forEach((button) => {
-    button.addEventListener("click", closePalette);
+  searchCloseButtons.forEach((button) => {
+    button.addEventListener("click", closeSearch);
   });
-  paletteInput.addEventListener("input", scheduleFetch);
-  paletteInput.addEventListener("keydown", onInputKeydown);
+  searchClearButtons.forEach((button) => {
+    button.addEventListener("click", clearSearchInput);
+  });
+  searchInput.addEventListener("input", scheduleFetch);
+  searchInput.addEventListener("keydown", onInputKeydown);
   document.addEventListener("click", onDocumentClick);
   document.addEventListener("keydown", onDocumentKeydown);
-  paletteDialog?.setAttribute("aria-hidden", "true");
-  closestFocusable(paletteRoot ?? document.body);
+  searchDialog?.setAttribute("aria-hidden", "true");
 };
 
-initCommandPalette();
-import { closestFocusable } from "./utils";
+initSearchOverlay();
diff --git a/templates/base.gohtml b/templates/base.gohtml
index 03f907e..f6f46d7 100644
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -99,26 +99,35 @@
 	          {{end}}
 	        </div>
 
-        <div class="fixed inset-0 z-60 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-command-palette-dialog aria-hidden="true">
-          <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-(--shadow-card) ring-1 ring-black/10" data-command-palette-root role="dialog" aria-modal="true" aria-label="Command palette">
+        <div class="fixed inset-0 z-100 hidden flex-col bg-background" data-command-palette-dialog aria-hidden="true">
+          <div class="border-b border-(--border) bg-background shadow-[0_10px_28px_rgba(0,0,0,0.18)]" data-command-palette-root role="dialog" aria-modal="true" aria-label="Search anime">
             <label for="command-palette-input" class="sr-only">Search commands and anime</label>
-            <div class="flex items-center border-b border-black/5">
-              <svg class="mx-4 size-5 shrink-0 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="11" cy="11" r="8" />
-                <path d="m21 21-4.35-4.35" />
-              </svg>
-              <input
-                id="command-palette-input"
-                name="q"
-                type="search"
-                autocomplete="off"
-                placeholder="Search or jump to..."
-                class="min-w-0 flex-1 bg-transparent py-4 pr-4 text-base text-foreground placeholder:text-foreground-muted outline-none"
-              />
-              <button type="button" data-unstyled-button class="mr-3 px-2 py-1 text-xs font-normal text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" data-command-palette-close>Esc</button>
+            <div class="mx-auto flex min-h-32 w-full max-w-4xl items-end gap-4 px-5 pb-6 pt-8 md:min-h-40 md:px-8 md:pb-7">
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-3 border-b-2 border-accent">
+                  <svg class="size-9 shrink-0 text-foreground-muted/90" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="11" cy="11" r="8" />
+                    <path d="m21 21-4.35-4.35" />
+                  </svg>
+                  <input
+                    id="command-palette-input"
+                    name="q"
+                    type="search"
+                    autocomplete="off"
+                    placeholder="Search anime..."
+                    class="min-w-0 flex-1 bg-transparent py-3 text-3xl font-medium text-foreground placeholder:text-foreground-muted outline-none md:text-4xl"
+                  />
+                  <button type="button" data-unstyled-button class="pointer-events-none flex size-10 shrink-0 items-center justify-center text-foreground-muted opacity-0 transition hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" data-command-palette-clear aria-label="Clear search">
+                    <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+                      <path d="M18 6 6 18"></path>
+                      <path d="m6 6 12 12"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
             </div>
-            <div data-command-palette-results class="max-h-[min(70vh,34rem)] overflow-y-auto py-2"></div>
           </div>
+          <div data-command-palette-results class="min-h-0 flex-1 overflow-y-auto"></div>
         </div>
   
         <main class="w-full flex-1 flex flex-col h-[calc(100dvh-3.5rem)] overflow-y-auto lg:h-screen">