diff --git a/apps/web/src/features/auth/components/AccountCard.tsx b/apps/web/src/features/auth/components/AccountCard.tsx
index 889c46a..1c62138 100644
--- a/apps/web/src/features/auth/components/AccountCard.tsx
+++ b/apps/web/src/features/auth/components/AccountCard.tsx
@@ -23,24 +23,19 @@ export function AccountCard(props: Props) {
   if (!me) return null
   if (isPending)
     return (
-      <span title={me.did} className="flex min-w-0 flex-1 items-center gap-2.5">
-        <span className="relative inline-flex flex-none">
-          <Skeleton className="size-8" />
-          {props.badge}
-        </span>
+      <Layout did={me.did} avatar={<Skeleton className="size-8" />} badge={props.badge}>
         <span className="sr-only">{me.handle ?? me.did}</span>
         <SkeletonText className="w-24 text-small leading-tight" />
-      </span>
+      </Layout>
     )
   const handle = me.handle ? `@${me.handle}` : me.did
   const name = profile?.displayName ?? me.handle ?? me.did
   return (
-    <span title={me.did} className="flex min-w-0 flex-1 items-center gap-2.5">
-      {/* The avatar holds the badge on its corner. */}
-      <span className="relative inline-flex flex-none">
-        <Avatar key={profile?.avatar} src={profile?.avatar ?? null} name={name} />
-        {props.badge}
-      </span>
+    <Layout
+      did={me.did}
+      avatar={<Avatar key={profile?.avatar} src={profile?.avatar ?? null} name={name} />}
+      badge={props.badge}
+    >
       <span className="flex min-w-0 flex-1 flex-col leading-tight">
         <strong className="truncate font-semibold text-ink text-small">{name}</strong>
         {profile?.displayName && (
@@ -49,6 +44,27 @@ export function AccountCard(props: Props) {
           </Text>
         )}
       </span>
+    </Layout>
+  )
+}
+
+interface LayoutProps {
+  did: string
+  avatar: ReactNode
+  badge?: ReactNode
+  /** The names beside the avatar. */
+  children: ReactNode
+}
+
+/** The avatar, holding the badge on its corner, beside the names, with the DID on hover. */
+function Layout(props: LayoutProps) {
+  return (
+    <span title={props.did} className="flex min-w-0 flex-1 items-center gap-2.5">
+      <span className="relative inline-flex flex-none">
+        {props.avatar}
+        {props.badge}
+      </span>
+      {props.children}
     </span>
   )
 }