diff --git a/app/app.css b/app/app.css
index 7f0cd29..8e6b96d 100644
--- a/app/app.css
+++ b/app/app.css
@@ -208,3 +208,22 @@ span.ͼ5 { color: var(--foreground, #111827); }  /* markdown syntax chars     */
 details > summary { color: #959595; }
 
 .dark details > summary { color: #6b7280; }
+
+/* ── Typeahead ───────────────────────────────────────────────────────────────*/
+
+@keyframes typeahead-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.typeahead-item {
+  opacity: 0;
+  animation: typeahead-in 0.2s ease forwards;
+}
+
+@keyframes typeahead-dot {
+  0%, 100% { opacity: 0.3; transform: translateY(0); }
+  50%       { opacity: 1;   transform: translateY(-2px); }
+}
+.typeahead-dot {
+  animation: typeahead-dot 1s ease infinite;
+}
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 8087ca7..f854779 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -65,6 +65,7 @@ function LoginScreen() {
   const [suggestions, setSuggestions] = useState<TypeaheadActor[]>([])
   const [showSuggestions, setShowSuggestions] = useState(false)
   const [activeIndex, setActiveIndex] = useState(-1)
+  const [fetching, setFetching] = useState(false)
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => () => { if (debounceRef.current) clearTimeout(debounceRef.current) }, [])
@@ -91,8 +92,10 @@ function LoginScreen() {
     if (!q || q.startsWith('did:')) {
       setSuggestions([])
       setShowSuggestions(false)
+      setFetching(false)
       return
     }
+    setFetching(true)
     debounceRef.current = setTimeout(async () => {
       try {
         const res = await fetch(
@@ -106,6 +109,8 @@ function LoginScreen() {
         setShowSuggestions(actors.length > 0)
       } catch {
         // fail silently — typeahead is non-critical
+      } finally {
+        setFetching(false)
       }
     }, 300)
   }
@@ -180,12 +185,25 @@ function LoginScreen() {
           {/* Form */}
           <form onSubmit={handleSubmit} className="space-y-3">
             <div className="relative space-y-1.5">
-              <label
-                htmlFor="handle"
-                className="block text-xs font-semibold uppercase tracking-widest text-[#9E9389] dark:text-[#78716C]"
-              >
-                Handle
-              </label>
+              <div className="flex items-center justify-between">
+                <label
+                  htmlFor="handle"
+                  className="block text-xs font-semibold uppercase tracking-widest text-[#9E9389] dark:text-[#78716C]"
+                >
+                  Handle
+                </label>
+                {fetching && (
+                  <span className="flex items-center gap-[3px]" aria-hidden>
+                    {[0, 1, 2].map((j) => (
+                      <span
+                        key={j}
+                        className="typeahead-dot w-[3px] h-[3px] rounded-full bg-[#9E9389] dark:bg-[#78716C]"
+                        style={{ animationDelay: `${j * 0.18}s` }}
+                      />
+                    ))}
+                  </span>
+                )}
+              </div>
               <input
                 id="handle"
                 type="text"
@@ -204,7 +222,7 @@ function LoginScreen() {
               {showSuggestions && suggestions.length > 0 && (
                 <ul
                   role="listbox"
-                  className="absolute z-10 top-full mt-1 w-full rounded-lg border border-[#E5E0D8] dark:border-[#2E2925] bg-white dark:bg-[#1C1917] shadow-lg overflow-hidden"
+                  className="absolute z-10 top-full mt-2 w-full bg-white dark:bg-[#1A1714] border border-[#E5E0D8] dark:border-[#2E2925] shadow-2xl overflow-hidden divide-y divide-[#F0EDE8] dark:divide-[#252018]"
                 >
                   {suggestions.map((actor, i) => (
                     <li
@@ -212,22 +230,35 @@ function LoginScreen() {
                       role="option"
                       aria-selected={i === activeIndex}
                       onMouseDown={() => selectSuggestion(actor)}
-                      className={`flex items-center gap-3 px-3 py-2.5 cursor-pointer transition-colors ${
+                      className={`typeahead-item flex items-center gap-3 px-4 py-3 cursor-pointer border-l-[3px] transition-colors duration-150 ${
                         i === activeIndex
-                          ? 'bg-[#F0EDE8] dark:bg-[#2E2925]'
-                          : 'hover:bg-[#F5F3F0] dark:hover:bg-[#241F1C]'
+                          ? 'bg-[#F5F1EC] dark:bg-[#231F1C] border-l-[#1A1614] dark:border-l-white'
+                          : 'border-l-transparent hover:bg-[#FAF8F5] dark:hover:bg-[#201D1A] hover:border-l-[#C4BAB0] dark:hover:border-l-[#57504A]'
                       }`}
+                      style={{ animationDelay: `${i * 40}ms` }}
                     >
-                      {actor.avatar ? (
-                        <img src={actor.avatar} alt="" className="w-7 h-7 rounded-full object-cover shrink-0" />
-                      ) : (
-                        <div className="w-7 h-7 rounded-full bg-[#E5E0D8] dark:bg-[#2E2925] shrink-0" />
-                      )}
-                      <div className="min-w-0">
-                        {actor.displayName && (
-                          <p className="text-sm font-medium text-[#1A1614] dark:text-white truncate leading-tight">{actor.displayName}</p>
+                      <div className="shrink-0">
+                        {actor.avatar ? (
+                          <img
+                            src={actor.avatar}
+                            alt=""
+                            className="w-8 h-8 rounded-full object-cover ring-1 ring-[#E5E0D8] dark:ring-[#2E2925]"
+                          />
+                        ) : (
+                          <div className="w-8 h-8 rounded-full bg-[#EDE9E4] dark:bg-[#2E2925] ring-1 ring-[#E5E0D8] dark:ring-[#3A342F] flex items-center justify-center">
+                            <span className="font-display italic text-xs text-[#9E9389] dark:text-[#78716C]">λ</span>
+                          </div>
+                        )}
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        {actor.displayName ? (
+                          <>
+                            <p className="font-display italic text-sm text-[#1A1614] dark:text-white truncate leading-tight">{actor.displayName}</p>
+                            <p className="text-[10px] tracking-widest uppercase text-[#9E9389] dark:text-[#78716C] truncate mt-0.5">@{actor.handle}</p>
+                          </>
+                        ) : (
+                          <p className="font-display italic text-sm text-[#1A1614] dark:text-white truncate leading-tight">@{actor.handle}</p>
                         )}
-                        <p className="text-xs text-[#9E9389] dark:text-[#78716C] truncate">@{actor.handle}</p>
                       </div>
                     </li>
                   ))}