diff --git a/web/src/components/login-form.tsx b/web/src/components/login-form.tsx
index a7ff01c..3e1bbff 100644
--- a/web/src/components/login-form.tsx
+++ b/web/src/components/login-form.tsx
@@ -1,17 +1,29 @@
 "use client"
 
 import { useState } from "react"
+import { XIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useAuth } from "@/lib/auth-context"
+import {
+  useHandleTypeahead,
+  type TypeaheadActor,
+} from "@/hooks/use-handle-typeahead"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/components/ui/combobox"
 import {
   Field,
   FieldDescription,
   FieldGroup,
   FieldLabel,
 } from "@/components/ui/field"
-import { Input } from "@/components/ui/input"
 
 export function LoginForm({
   className,
@@ -19,23 +31,37 @@ export function LoginForm({
   ...props
 }: React.ComponentProps<"div"> & { externalError?: string | null }) {
   const [handle, setHandle] = useState("")
+  const [selectedActor, setSelectedActor] = useState<TypeaheadActor | null>(
+    null,
+  )
+  const [dropdownOpen, setDropdownOpen] = useState(false)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const { login } = useAuth()
+  const { actors } = useHandleTypeahead(selectedActor ? "" : handle)
+
+  const actorsByHandle = new Map(actors.map((a) => [a.handle, a]))
+  const showDropdown = dropdownOpen && actors.length > 0
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
-    if (!handle.trim()) return
+    const value = selectedActor?.handle ?? handle
+    if (!value.trim()) return
     setLoading(true)
     setError(null)
     try {
-      await login(handle.trim().toLowerCase())
+      await login(value.trim().toLowerCase())
     } catch (e: unknown) {
       setError(e instanceof Error ? e.message : "Login failed")
       setLoading(false)
     }
   }
 
+  function clearSelection() {
+    setSelectedActor(null)
+    setHandle("")
+  }
+
   return (
     <div className={cn("flex flex-col gap-6", className)} {...props}>
       <form onSubmit={handleSubmit}>
@@ -51,18 +77,112 @@ export function LoginForm({
           )}
           <Field>
             <FieldLabel htmlFor="handle">Handle</FieldLabel>
-            <Input
-              id="handle"
-              type="text"
-              placeholder="you.bsky.social"
-              value={handle}
-              onChange={(e) => setHandle(e.target.value)}
-              required
-              disabled={loading}
-            />
+            {selectedActor ? (
+              <div className="border-input dark:bg-input/30 flex w-full items-center gap-3 rounded-md border px-3 py-2 shadow-xs">
+                <Avatar size="sm">
+                  {selectedActor.avatar && (
+                    <AvatarImage
+                      src={selectedActor.avatar}
+                      alt={selectedActor.handle}
+                    />
+                  )}
+                  <AvatarFallback>
+                    {(
+                      selectedActor.displayName?.[0] ??
+                      selectedActor.handle[0]
+                    ).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex min-w-0 flex-1 flex-col">
+                  {selectedActor.displayName && (
+                    <span className="truncate text-sm font-medium">
+                      {selectedActor.displayName}
+                    </span>
+                  )}
+                  <span className="text-muted-foreground truncate text-xs">
+                    @{selectedActor.handle}
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  onClick={clearSelection}
+                  disabled={loading}
+                  className="text-muted-foreground hover:text-foreground shrink-0 cursor-pointer disabled:pointer-events-none disabled:opacity-50"
+                >
+                  <XIcon className="size-4" />
+                </button>
+              </div>
+            ) : (
+              <Combobox
+                inputValue={handle}
+                onInputValueChange={(value, details) => {
+                  if (details.reason === "input-change") {
+                    setHandle(value)
+                  }
+                }}
+                onValueChange={(value) => {
+                  if (value) {
+                    const actor = actorsByHandle.get(value as string)
+                    if (actor) {
+                      setSelectedActor(actor)
+                      setHandle(actor.handle)
+                    } else {
+                      setHandle(value as string)
+                    }
+                  }
+                }}
+                open={showDropdown}
+                onOpenChange={setDropdownOpen}
+                items={actors.map((a) => a.handle)}
+                filter={null}
+              >
+                <ComboboxInput
+                  className="w-full"
+                  id="handle"
+                  placeholder="you.bsky.social"
+                  disabled={loading}
+                  showTrigger={false}
+                />
+                <ComboboxContent className="min-w-(--anchor-width)">
+                  <ComboboxList>
+                    {(item: string) => {
+                      const actor = actorsByHandle.get(item)
+                      return (
+                        <ComboboxItem key={item} value={item}>
+                          <Avatar size="sm">
+                            {actor?.avatar && (
+                              <AvatarImage src={actor.avatar} alt={item} />
+                            )}
+                            <AvatarFallback>
+                              {(
+                                actor?.displayName?.[0] ?? item[0]
+                              ).toUpperCase()}
+                            </AvatarFallback>
+                          </Avatar>
+                          <div className="flex flex-col">
+                            {actor?.displayName && (
+                              <span className="text-sm font-medium leading-tight">
+                                {actor.displayName}
+                              </span>
+                            )}
+                            <span className="text-muted-foreground text-xs">
+                              @{item}
+                            </span>
+                          </div>
+                        </ComboboxItem>
+                      )
+                    }}
+                  </ComboboxList>
+                </ComboboxContent>
+              </Combobox>
+            )}
           </Field>
           <Field>
-            <Button type="submit" className="w-full" disabled={loading}>
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={loading || (!selectedActor && !handle.trim())}
+            >
               {loading ? "Signing in..." : "Sign in"}
             </Button>
           </Field>
diff --git a/web/src/components/ui/combobox.tsx b/web/src/components/ui/combobox.tsx
index 03f3e52..52ccbf3 100644
--- a/web/src/components/ui/combobox.tsx
+++ b/web/src/components/ui/combobox.tsx
@@ -69,21 +69,23 @@ function ComboboxInput({
         render={<InputGroupInput disabled={disabled} />}
         {...props}
       />
-      <InputGroupAddon align="inline-end">
-        {showTrigger && (
-          <InputGroupButton
-            size="icon-xs"
-            variant="ghost"
-            asChild
-            data-slot="input-group-button"
-            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
-            disabled={disabled}
-          >
-            <ComboboxTrigger />
-          </InputGroupButton>
-        )}
-        {showClear && <ComboboxClear disabled={disabled} />}
-      </InputGroupAddon>
+      {(showTrigger || showClear) && (
+        <InputGroupAddon align="inline-end">
+          {showTrigger && (
+            <InputGroupButton
+              size="icon-xs"
+              variant="ghost"
+              asChild
+              data-slot="input-group-button"
+              className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+              disabled={disabled}
+            >
+              <ComboboxTrigger />
+            </InputGroupButton>
+          )}
+          {showClear && <ComboboxClear disabled={disabled} />}
+        </InputGroupAddon>
+      )}
       {children}
     </InputGroup>
   )
diff --git a/web/src/hooks/use-handle-typeahead.ts b/web/src/hooks/use-handle-typeahead.ts
new file mode 100644
index 0000000..232f2f7
--- /dev/null
+++ b/web/src/hooks/use-handle-typeahead.ts
@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from "react"
+
+export interface TypeaheadActor {
+  did: string
+  handle: string
+  displayName?: string
+  avatar?: string
+}
+
+export function useHandleTypeahead(query: string, delay = 200) {
+  const [actors, setActors] = useState<TypeaheadActor[]>([])
+  const abortRef = useRef<AbortController | null>(null)
+
+  useEffect(() => {
+    if (query.length < 2) {
+      setActors([])
+      return
+    }
+
+    abortRef.current?.abort()
+
+    const timeout = setTimeout(() => {
+      const controller = new AbortController()
+      abortRef.current = controller
+
+      fetch(
+        `https://typeahead.waow.tech/xrpc/app.bsky.actor.searchActorsTypeahead?q=${encodeURIComponent(query)}&limit=8`,
+        {
+          signal: controller.signal,
+          headers: { "X-Client": "happyview" },
+        },
+      )
+        .then((res) => (res.ok ? res.json() : Promise.reject()))
+        .then((data) => setActors(data.actors ?? []))
+        .catch((e) => {
+          if (!(e instanceof DOMException && e.name === "AbortError")) {
+            setActors([])
+          }
+        })
+    }, delay)
+
+    return () => {
+      clearTimeout(timeout)
+      abortRef.current?.abort()
+    }
+  }, [query, delay])
+
+  return { actors }
+}