diff --git a/web/src/components/DialBBS.tsx b/web/src/components/DialBBS.tsx
index 72dc78e..4d69336 100644
--- a/web/src/components/DialBBS.tsx
+++ b/web/src/components/DialBBS.tsx
@@ -2,6 +2,7 @@ import { useState, type SyntheticEvent } from "react";
 import { ArrowRight, Dices } from "lucide-react";
 import { Link, useNavigate } from "react-router-dom";
 import HandleInput from "./form/HandleInput";
+import IdentityRow from "./IdentityRow";
 import { Button } from "./form/Form";
 import { useDropdown } from "../hooks/useDropdown";
 import { useResolvedBBS } from "../hooks/useResolvedBBS";
@@ -113,16 +114,18 @@ export default function DialBBS({ discovered, suggestions }: DialBBSProps) {
                 to={entry.to}
                 role="option"
                 aria-selected={index === dropdown.activeIndex}
-                className={`block px-3 py-2 text-sm text-neutral-300 first:rounded-t last:rounded-b ${
+                className={`block px-3 py-2 first:rounded-t last:rounded-b ${
                   index === dropdown.activeIndex
                     ? "bg-neutral-800"
                     : "hover:bg-neutral-800"
                 }`}
               >
-                {entry.name}
-                {entry.name !== entry.handle && (
-                  <span className="text-neutral-400 ml-2">{entry.handle}</span>
-                )}
+                <IdentityRow
+                  primary={entry.name}
+                  secondary={
+                    entry.name !== entry.handle ? entry.handle : undefined
+                  }
+                />
               </Link>
             ))}
           </div>
diff --git a/web/src/components/IdentityRow.tsx b/web/src/components/IdentityRow.tsx
new file mode 100644
index 0000000..fd359a0
--- /dev/null
+++ b/web/src/components/IdentityRow.tsx
@@ -0,0 +1,29 @@
+interface IdentityRowProps {
+  avatar?: string;
+  primary: string;
+  secondary?: string;
+}
+
+export default function IdentityRow({
+  avatar,
+  primary,
+  secondary,
+}: IdentityRowProps) {
+  return (
+    <div className="flex items-center gap-3 min-w-0">
+      {avatar && (
+        <img
+          src={avatar}
+          alt=""
+          className="w-6 h-6 rounded-full shrink-0"
+        />
+      )}
+      <div className="min-w-0">
+        <div className="text-sm text-neutral-200 truncate">{primary}</div>
+        {secondary && (
+          <div className="text-xs text-neutral-400 truncate">{secondary}</div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/form/HandleSuggestions.tsx b/web/src/components/form/HandleSuggestions.tsx
index b238fa7..0c5d82a 100644
--- a/web/src/components/form/HandleSuggestions.tsx
+++ b/web/src/components/form/HandleSuggestions.tsx
@@ -1,3 +1,4 @@
+import IdentityRow from "../IdentityRow";
 import type { HandleMatch } from "../../lib/bsky";
 
 interface HandleSuggestionsProps {
@@ -29,25 +30,15 @@ export default function HandleSuggestions({
               role="option"
               aria-selected={isActive}
               onClick={() => onSelect(suggestion.handle)}
-              className={`flex items-center gap-3 w-full px-3 py-2 text-left first:rounded-t last:rounded-b ${
+              className={`w-full px-3 py-2 text-left first:rounded-t last:rounded-b ${
                 isActive ? "bg-neutral-800" : "hover:bg-neutral-800"
               }`}
             >
-              {suggestion.avatar && (
-                <img
-                  src={suggestion.avatar}
-                  alt=""
-                  className="w-6 h-6 rounded-full shrink-0"
-                />
-              )}
-              <div className="min-w-0">
-                <div className="text-sm text-neutral-200 truncate">
-                  {suggestion.displayName}
-                </div>
-                <div className="text-xs text-neutral-400 truncate">
-                  {suggestion.handle}
-                </div>
-              </div>
+              <IdentityRow
+                avatar={suggestion.avatar}
+                primary={suggestion.displayName}
+                secondary={suggestion.handle}
+              />
             </button>
           );
         })}