diff --git a/components/Combobox.tsx b/components/Combobox.tsx
index b001d0ae..30085c25 100644
--- a/components/Combobox.tsx
+++ b/components/Combobox.tsx
@@ -15,12 +15,16 @@ export const Combobox = ({
   showSearch,
   trigger,
   triggerClassName,
+  className,
   sideOffset,
   open: openProp,
+  zIndex,
 }: {
   children: React.ReactNode;
   trigger?: React.ReactNode;
   triggerClassName?: string;
+  className?: string;
+  width?: string;
   results: string[];
   onSelect?: () => void;
   onOpenChange?: (open: boolean) => void;
@@ -31,6 +35,7 @@ export const Combobox = ({
   showSearch?: boolean;
   sideOffset?: number;
   open?: boolean;
+  zIndex?: number;
 }) => {
   let ref = useRef<HTMLDivElement>(null);
   let [internalOpen, setInternalOpen] = useState(false);
@@ -106,10 +111,12 @@ export const Combobox = ({
           collisionPadding={16}
           ref={ref}
           onOpenAutoFocus={(e) => e.preventDefault()}
+          style={zIndex !== undefined ? { zIndex } : undefined}
           className={`
             commandMenuContent group/cmd-menu
             z-20 w-[264px]
             flex data-[side=top]:items-end items-start
+            ${className}
             `}
         >
           <NestedCardThemeProvider>
diff --git a/components/Subscribe/HandleInput.tsx b/components/Subscribe/HandleInput.tsx
index c0743273..6526c829 100644
--- a/components/Subscribe/HandleInput.tsx
+++ b/components/Subscribe/HandleInput.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Agent } from "@atproto/api";
 import { Input } from "components/Input";
-import * as RadixPopover from "@radix-ui/react-popover";
+import { Combobox, ComboboxResult } from "components/Combobox";
 import { useState } from "react";
 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
 
@@ -22,7 +22,7 @@ export const HandleInput = (props: {
   let [handleValue, setHandleValue] = useState("");
   let [suggestions, setSuggestions] = useState<ActorSuggestion[]>([]);
   let [dropdownOpen, setDropdownOpen] = useState(false);
-  let [selectedIndex, setSelectedIndex] = useState(0);
+  let [highlighted, setHighlighted] = useState<string | undefined>(undefined);
 
   useDebouncedEffect(
     async () => {
@@ -44,64 +44,64 @@ export const HandleInput = (props: {
       }));
       setSuggestions(actors);
       setDropdownOpen(actors.length > 0);
-      setSelectedIndex(0);
     },
     300,
     [handleValue],
   );
 
-  const handleSelect = (selected: string) => {
+  const handleSelect = (handle?: string) => {
+    const selected = handle ?? handleValue;
+    if (!selected) return;
     setHandleValue(selected);
     setDropdownOpen(false);
     setSuggestions([]);
+    setHighlighted(undefined);
     props.onSubmit?.(selected);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "ArrowDown") {
-      if (!dropdownOpen) return;
-      e.preventDefault();
-      setSelectedIndex((i) => Math.min(i + 1, suggestions.length - 1));
-    } else if (e.key === "ArrowUp") {
-      if (!dropdownOpen) return;
-      e.preventDefault();
-      setSelectedIndex((i) => Math.max(i - 1, 0));
-    } else if (e.key === "Enter") {
-      if (dropdownOpen && suggestions[selectedIndex]) {
-        e.preventDefault();
-        handleSelect(suggestions[selectedIndex].handle);
-      } else if (!dropdownOpen && handleValue) {
-        e.preventDefault();
-        props.onSubmit?.(handleValue);
-      }
-    } else if (e.key === "Escape") {
-      setDropdownOpen(false);
-    }
-  };
+  const handles = suggestions.map((s) => s.handle);
 
   return (
-    <RadixPopover.Root open={dropdownOpen} onOpenChange={setDropdownOpen}>
-      <RadixPopover.Anchor asChild>
+    <Combobox
+      open={dropdownOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          setDropdownOpen(false);
+          setHighlighted(undefined);
+        }
+      }}
+      results={handles}
+      highlighted={highlighted}
+      setHighlighted={setHighlighted}
+      onSelect={() => handleSelect(highlighted)}
+      zIndex={60}
+      sideOffset={4}
+      className="w-(--radix-popover-trigger-width)!"
+      trigger={
         <div
-          className={`handleInput input-with-border relative py-0! flex items-center gap-1 w-full ${props.large && "px-2!"} ${props.className} `}
+          className={`handleInput input-with-border relative py-0! flex items-center gap-1 w-full ${props.large && "px-2!"} ${props.className}`}
         >
-          <div className="text-tertiary text-center shrink-0  flex justify-end h-full items-center">
+          <div className="text-tertiary text-center shrink-0 flex justify-end h-full items-center">
             @
           </div>
           <Input
             autoFocus={props.autoFocus}
-            className={`appearance-none! grow outline-none!  ${props.large ? "py-1!" : "py-0.5 "} `}
+            className={`appearance-none! grow outline-none! ${props.large ? "py-1!" : "py-0.5"}`}
             placeholder="atmosphere.handle"
             size={0}
             value={handleValue}
             onChange={(e) => setHandleValue(e.target.value)}
-            onKeyDown={handleKeyDown}
+            onClick={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
             autoComplete="off"
           />
           {props.onSubmit ? (
             <button
               type="button"
-              onClick={() => props.onSubmit!(handleValue)}
+              onClick={(e) => {
+                e.stopPropagation();
+                props.onSubmit!(handleValue);
+              }}
               disabled={!handleValue}
             >
               {props.action}
@@ -110,45 +110,38 @@ export const HandleInput = (props: {
             props.action
           )}
         </div>
-      </RadixPopover.Anchor>
-      <RadixPopover.Portal>
-        <RadixPopover.Content
-          align="start"
-          sideOffset={4}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          className="dropdownMenu z-20 bg-bg-page flex flex-col p-1 gap-1 text-primary border border-border rounded-md shadow-md w-(--radix-popover-trigger-width)"
+      }
+    >
+      {suggestions.map((actor) => (
+        <ComboboxResult
+          key={actor.did}
+          result={actor.handle}
+          highlighted={highlighted}
+          setHighlighted={setHighlighted}
+          onSelect={() => handleSelect(actor.handle)}
+          className=" flex-row! gap-2! leading-snug text-sm"
         >
-          {suggestions.map((actor, index) => (
-            <button
-              key={actor.did}
-              type="button"
-              className={`menuItem w-full flex-row! gap-2! text-secondary leading-snug text-sm py-1! ${index === selectedIndex ? "bg-[var(--accent-light)]!" : ""}`}
-              onMouseDown={(e) => e.preventDefault()}
-              onClick={() => handleSelect(actor.handle)}
-            >
-              {actor.avatar ? (
-                <img
-                  src={actor.avatar}
-                  alt=""
-                  className="w-5 h-5 rounded-full shrink-0"
-                />
-              ) : (
-                <div className="w-5 h-5 rounded-full bg-border shrink-0" />
-              )}
-              <div className="flex flex-col min-w-0 flex-1 text-left">
-                <div className="truncate">
-                  {actor.displayName || actor.handle}
-                </div>
-                {actor.displayName && (
-                  <div className="text-tertiary text-xs italic truncate">
-                    @{actor.handle}
-                  </div>
-                )}
+          {actor.avatar ? (
+            <img
+              src={actor.avatar}
+              alt=""
+              className="w-6 h-6 rounded-full shrink-0 mr-2"
+            />
+          ) : (
+            <div className="w-6 h-6 rounded-full bg-border shrink-0 mr-2" />
+          )}
+          <div className="flex flex-col min-w-0 flex-1 text-left">
+            <div className="truncate font-bold">
+              {actor.displayName || actor.handle}
+            </div>
+            {actor.displayName && (
+              <div className="text-tertiary text-xs italic truncate">
+                @{actor.handle}
               </div>
-            </button>
-          ))}
-        </RadixPopover.Content>
-      </RadixPopover.Portal>
-    </RadixPopover.Root>
+            )}
+          </div>
+        </ComboboxResult>
+      ))}
+    </Combobox>
   );
 };