diff --git a/app/(pages)/titles/[id]/_components/title-availability.tsx b/app/(pages)/titles/[id]/_components/title-availability.tsx
index d3b9d24..526d8ab 100644
--- a/app/(pages)/titles/[id]/_components/title-availability.tsx
+++ b/app/(pages)/titles/[id]/_components/title-availability.tsx
@@ -1,6 +1,11 @@
 "use client";
 
 import Image from "next/image";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   Tooltip,
   TooltipContent,
@@ -8,6 +13,8 @@ import {
 } from "@/components/ui/tooltip";
 import type { AvailabilityOffer } from "@/lib/types/title";
 
+const MAX_VISIBLE = 4;
+
 const offerLabels: Record<string, string> = {
   flatrate: "Stream",
   rent: "Rent",
@@ -59,6 +66,69 @@ function ProviderBadge({
   );
 }
 
+function OverflowProviderIcon({ offer }: { offer: AvailabilityOffer }) {
+  return (
+    <div className="flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border/20 bg-card">
+      {offer.logoPath ? (
+        <Image
+          src={offer.logoPath}
+          alt={offer.providerName}
+          width={28}
+          height={28}
+          className="h-7 w-7 object-cover"
+        />
+      ) : (
+        <span className="text-[7px] font-medium text-muted-foreground">
+          {offer.providerName.slice(0, 2)}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function OverflowBadge({ offers }: { offers: AvailabilityOffer[] }) {
+  return (
+    <Popover>
+      <PopoverTrigger
+        openOnHover
+        delay={0}
+        closeDelay={300}
+        className="flex h-10 w-10 cursor-default items-center justify-center rounded-lg border border-border/30 bg-card text-xs font-semibold text-muted-foreground motion-safe:transition-transform motion-safe:hover:scale-105"
+      >
+        +{offers.length}
+      </PopoverTrigger>
+      <PopoverContent className="flex w-auto max-w-64 flex-col gap-0 divide-y divide-border/30 p-0.5">
+        {offers.map((offer) =>
+          offer.watchUrl ? (
+            <a
+              key={offer.providerId}
+              href={offer.watchUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2.5 px-2 py-1.5 hover:bg-muted/50"
+            >
+              <OverflowProviderIcon offer={offer} />
+              <span className="truncate text-xs text-popover-foreground">
+                {offer.providerName}
+              </span>
+            </a>
+          ) : (
+            <div
+              key={offer.providerId}
+              className="flex items-center gap-2.5 px-2 py-1.5"
+            >
+              <OverflowProviderIcon offer={offer} />
+              <span className="truncate text-xs text-popover-foreground">
+                {offer.providerName}
+              </span>
+            </div>
+          ),
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 export function TitleAvailability({
   availability,
 }: {
@@ -78,23 +148,29 @@ export function TitleAvailability({
         Where to Watch
       </h2>
       <div className="flex flex-wrap gap-4">
-        {Object.entries(availByType).map(([type, offers]) => (
-          <div key={type} className="space-y-1.5">
-            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60">
-              {offerLabels[type] ?? type}
-            </span>
-            <div className="flex gap-1.5">
-              {offers.map((offer) => (
-                <ProviderBadge
-                  key={offer.providerId}
-                  name={offer.providerName}
-                  logoPath={offer.logoPath}
-                  watchUrl={offer.watchUrl}
-                />
-              ))}
+        {Object.entries(availByType).map(([type, offers]) => {
+          const visible = offers.slice(0, MAX_VISIBLE);
+          const overflow = offers.slice(MAX_VISIBLE);
+
+          return (
+            <div key={type} className="space-y-1.5">
+              <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60">
+                {offerLabels[type] ?? type}
+              </span>
+              <div className="flex gap-1.5">
+                {visible.map((offer) => (
+                  <ProviderBadge
+                    key={offer.providerId}
+                    name={offer.providerName}
+                    logoPath={offer.logoPath}
+                    watchUrl={offer.watchUrl}
+                  />
+                ))}
+                {overflow.length > 0 && <OverflowBadge offers={overflow} />}
+              </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );
diff --git a/components/command-palette.tsx b/components/command-palette.tsx
index ca1de96..792edc2 100644
--- a/components/command-palette.tsx
+++ b/components/command-palette.tsx
@@ -13,7 +13,7 @@ import { useHotkey, useHotkeySequence } from "@tanstack/react-hotkeys";
 import { useAtom } from "jotai";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useProgress } from "@/components/navigation-progress";
 import {
   Command,
@@ -86,15 +86,22 @@ export function CommandPalette() {
     }
   }, [commandPaletteOpen]);
 
-  // Save to recent searches when results arrive
+  // Save to recent searches after user stops typing for a while
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
   useEffect(() => {
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
     const trimmed = debouncedQuery.trim();
     if (trimmed && results.length > 0) {
-      setRecentSearches((prev) => {
-        const filtered = prev.filter((q) => q !== trimmed);
-        return [trimmed, ...filtered].slice(0, MAX_RECENT);
-      });
+      saveTimerRef.current = setTimeout(() => {
+        setRecentSearches((prev) => {
+          const filtered = prev.filter((q) => q !== trimmed);
+          return [trimmed, ...filtered].slice(0, MAX_RECENT);
+        });
+      }, 2000);
     }
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
   }, [debouncedQuery, results, setRecentSearches]);
 
   const handleSelect = useCallback(