diff --git a/src/css/components/form.css b/src/css/components/form.css
index 7c74746..74fe190 100644
--- a/src/css/components/form.css
+++ b/src/css/components/form.css
@@ -12,4 +12,22 @@ form {
     inline-size: fit-content;
     line-height: 1.5;
   }
+
+  & > * {
+    grid-column: 1 / -1;
+  }
+
+  &[action*="login"] {
+    grid-template-columns: 1fr auto;
+    inline-size: min(100%, 400px);
+
+    & input {
+      inline-size: 100%;
+      grid-column: 1 / 2;
+    }
+
+    & button {
+      grid-column: 2 / 3;
+    }
+  }
 }
diff --git a/src/css/main.css b/src/css/main.css
index cacbb5d..841b06c 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -14,15 +14,16 @@
 }
 
 .avatar {
+  --size: 50px;
   align-items: center;
   display: grid;
   column-gap: 10px;
-  grid-template-columns: 50px auto;
+  grid-template-columns: var(--size) auto;
 
   & img {
     border-radius: calc(1px * infinity);
-    block-size: 50px;
-    inline-size: 50px;
+    block-size: var(--size);
+    inline-size: var(--size);
     grid-column: 1;
     grid-row: 1 / 5;
   }
@@ -39,3 +40,38 @@
     }
   }
 }
+
+#handle {
+  anchor-name: --handle;
+}
+
+#handle-listbox {
+  background: white;
+  border: 2px solid black;
+  display: grid;
+  inline-size: anchor-size(--handle inline);
+  max-block-size: 230px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  position-anchor: --handle;
+  position-area: block-end center;
+  position-visibility: no-overflow;
+
+  & .avatar {
+    --size: 40px;
+    padding: 10px;
+  }
+
+  & [aria-selected="true"] {
+    background: yellow;
+  }
+
+  & li {
+    cursor: pointer;
+
+    &:hover {
+      background: cyan;
+    }
+  }
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1eaabf4..ce99b8a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,110 @@
+<script lang="ts" module>
+  import { parsePublicUser, type PublicUserData } from "$lib/valibot";
+
+  type BskyUserData = PublicUserData & { avatar: string };
+</script>
+
 <script lang="ts">
   import type { PageProps } from "./$types.d.ts";
   let { data, form }: PageProps = $props();
 
+  let handle = $derived(String(form?.handle ?? ""));
+  let handleFocus = $state(false);
+
+  let bskyUsers: BskyUserData[] = $state([]);
+  let controller = new AbortController();
+
+  let activeOption = $state<HTMLElement | null>(null);
+  let handleListbox = $state<HTMLElement | null>(null);
+
+  const handleKeydown = (ev: KeyboardEvent) => {
+    if (!bskyUsers.length || !handleListbox) {
+      return;
+    }
+    switch (ev.key) {
+      case "ArrowDown":
+        ev.preventDefault();
+        if (activeOption) {
+          activeOption =
+            (activeOption.nextElementSibling as HTMLElement) ||
+            (handleListbox.firstElementChild as HTMLElement);
+        } else {
+          activeOption = handleListbox.firstElementChild as HTMLElement;
+        }
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        if (activeOption) {
+          activeOption =
+            (activeOption.previousElementSibling as HTMLElement) ||
+            (handleListbox.lastElementChild as HTMLElement);
+        } else {
+          activeOption = handleListbox.lastElementChild as HTMLElement;
+        }
+        break;
+      case "Home":
+        ev.preventDefault();
+        activeOption = handleListbox.firstElementChild as HTMLElement;
+        break;
+      case "End":
+        ev.preventDefault();
+        activeOption = handleListbox.lastElementChild as HTMLElement;
+        break;
+      case "Enter":
+        if (activeOption) {
+          ev.preventDefault();
+          handle = activeOption.dataset.handle!;
+        }
+        break;
+      case "Escape":
+        activeOption = null;
+        break;
+    }
+    if (activeOption) {
+      activeOption.scrollIntoView();
+    }
+  };
+
+  const bskySearch = async (q: string) => {
+    if (controller.signal.aborted === false) {
+      controller.abort();
+    }
+    controller = new AbortController();
+    const response = await fetch(
+      `https://public.api.bsky.app/xrpc/app.bsky.actor.searchActorsTypeahead?limit=10&q=${q}`,
+      {
+        signal: controller.signal,
+      },
+    );
+    bskyUsers.length = 0;
+    if (response.ok === false) {
+      return;
+    }
+    const data = await response.json();
+    for (const actor of data.actors) {
+      try {
+        const parsed = parsePublicUser(actor);
+        if (parsed.handle === handle) continue;
+        if (parsed.handle === "handle.invalid") continue;
+        bskyUsers.push({ ...parsed, avatar: actor.avatar });
+      } catch {
+        continue;
+      }
+    }
+    if (activeOption && document.getElementById(activeOption.id) === null) {
+      activeOption = null;
+    }
+  };
+
+  $effect(() => {
+    const value = handle.trim();
+    if (value.length < 2) {
+      bskyUsers.length = 0;
+      return;
+    }
+    bskySearch(value);
+  });
+
   const confirmPurge = (ev: SubmitEvent) => {
     if (confirm("Are you sure?")) {
       return;
@@ -45,13 +148,56 @@
   </form>
 {:else}
   <form method="POST" action="?/login">
-    <h2>Connect</h2>
-    <p>Connect with your Bluesky / Atmosphere account.</p>
+    <h2>Sign in</h2>
+    <p>Connect with your Atmosphere account.</p>
     {#if form?.action === "login" && form?.error}
       <p class="error">{form.error}</p>
     {/if}
     <label for="handle">Handle</label>
-    <input type="text" id="handle" name="handle" value={form?.handle} />
+    <input
+      type="text"
+      id="handle"
+      name="handle"
+      bind:value={handle}
+      onfocus={() => (handleFocus = true)}
+      onblur={() => setTimeout(() => (handleFocus = false), 100)}
+      onkeydown={handleKeydown}
+      autocorrect="off"
+      spellcheck="false"
+      role="combobox"
+      aria-autocomplete="list"
+      aria-expanded="false"
+      aria-controls="handle-listbox"
+      aria-activedescendant={activeOption ? activeOption.id : undefined}
+    />
+    {#if handleFocus && bskyUsers.length}
+      <ul
+        bind:this={handleListbox}
+        id="handle-listbox"
+        role="listbox"
+        aria-label="suggestions"
+        tabindex="-1"
+      >
+        {#each bskyUsers as user, i (user.did)}
+          <li
+            class="avatar"
+            role="option"
+            aria-selected={activeOption &&
+              activeOption.id === `option:${user.did}`}
+            id="option:{user.did}"
+            data-handle={user.handle}
+            onclick={() => {
+              handle = user.handle;
+            }}
+          >
+            <img alt="avatar" src={user.avatar} width="50" height="50" />
+            <p>{user.displayName}</p>
+            <p><small>@{user.handle}</small></p>
+          </li>
+        {/each}
+      </ul>
+    {/if}
     <button type="submit">Sign in</button>
+    <p>Suggestions provided by Bluesky.</p>
   </form>
 {/if}