diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index e41195c4..033f2b98 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
-	import Avatar from "../ui/Avatar.svelte";
 	import Button from "../ui/Button.svelte";
 	import Dropdown from "../ui/Dropdown.svelte";
 	import DropdownItem from "../ui/DropdownItem.svelte";
@@ -13,20 +12,17 @@
 	import LogOut from "$icon/log-out";
 	import Plus from "$icon/plus";
 	import Search from "$icon/search";
-	import User from "$icon/user";
+	import UserIcon from "$icon/user";
 	import Spinner from "../ui/Spinner.svelte";
 	import Logo from "../ui/Logo.svelte";
+	import User from "../ui/User.svelte";
 	import TopbarSearch from "./TopbarSearch.svelte";
-
-	interface User {
-		handle: string;
-		did: string;
-	}
+	import type { CurrentUser } from "$lib/auth.svelte";
 
 	interface Props {
 		variant: "marketing" | "app";
 		onSignOut?: () => void | Promise<void>;
-		user: User | null;
+		user: CurrentUser | null;
 		loading?: boolean;
 	}
 
@@ -128,10 +124,12 @@
 					{:else if user}
 						<Dropdown id="profile-menu" group="topbar" align="right">
 							{#snippet trigger()}
-								<Avatar did={user.did} handle={user.handle} size="size-8 md:size-5" tiny />
-								<span class="hidden max-w-48 truncate md:inline">{user.handle}</span>
+								<User
+									did={user.did}
+									handle={user.handle}
+								/>
 							{/snippet}
-							<DropdownItem href={`/${user.handle}`} icon={User}>Profile</DropdownItem>
+							<DropdownItem href={`/${user.handle}`} icon={UserIcon}>Profile</DropdownItem>
 							<DropdownItem href={`/${user.handle}?tab=repos`} icon={BookMarked}>
 								Repositories
 							</DropdownItem>