diff --git a/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx b/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
index 58114c3..9b6405d 100644
--- a/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
+++ b/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
@@ -9,7 +9,11 @@ import {
 	SystemIcon,
 	UserCircleIcon,
 } from "@diffkit/icons";
-import { Avatar, AvatarFallback } from "@diffkit/ui/components/avatar";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "@diffkit/ui/components/avatar";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -24,7 +28,6 @@ import { cn } from "@diffkit/ui/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { useTheme } from "next-themes";
-import { useState } from "react";
 import { signOutToLogin } from "#/lib/auth-actions";
 import { githubViewerQueryOptions } from "#/lib/github.query";
 import { useHasMounted } from "#/lib/use-has-mounted";
@@ -63,7 +66,6 @@ export function DashboardMobileNav({
 	counts,
 }: DashboardMobileNavProps) {
 	const { theme, setTheme } = useTheme();
-	const [avatarLoadFailed, setAvatarLoadFailed] = useState(false);
 	const hasMounted = useHasMounted();
 	const viewerQuery = useQuery({
 		...githubViewerQueryOptions({ userId: user.id }),
@@ -130,18 +132,13 @@ export function DashboardMobileNav({
 						className="flex flex-1 items-center justify-center py-3 text-muted-foreground"
 					>
 						<Avatar className="size-6 border border-border">
-							{user.image && !avatarLoadFailed ? (
-								<img
-									src={user.image}
-									alt={displayName}
-									className="size-full object-cover"
-									onError={() => setAvatarLoadFailed(true)}
-								/>
-							) : (
-								<AvatarFallback className="text-[8px]">
-									{initials}
-								</AvatarFallback>
-							)}
+							<AvatarImage src={user.image ?? undefined} alt={displayName} />
+							<AvatarFallback
+								delayMs={user.image ? 400 : 0}
+								className="text-[8px]"
+							>
+								{initials}
+							</AvatarFallback>
 						</Avatar>
 					</button>
 				</DropdownMenuTrigger>
diff --git a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
index 73a3747..2b1db7d 100644
--- a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
+++ b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
@@ -12,7 +12,11 @@ import {
 	UserCircleIcon,
 	XLogo,
 } from "@diffkit/icons";
-import { Avatar, AvatarFallback } from "@diffkit/ui/components/avatar";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "@diffkit/ui/components/avatar";
 import { Button } from "@diffkit/ui/components/button";
 import {
 	DropdownMenu,
@@ -26,7 +30,7 @@ import {
 } from "@diffkit/ui/components/dropdown-menu";
 import { useQuery } from "@tanstack/react-query";
 import { Link, useRouter } from "@tanstack/react-router";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { DashboardTabs } from "#/components/layouts/dashboard-tabs";
 import { signOutToLogin } from "#/lib/auth-actions";
 import {
@@ -74,7 +78,6 @@ export function DashboardTopbar({
 	tabsReady,
 	counts,
 }: DashboardTopbarProps) {
-	const [avatarLoadFailed, setAvatarLoadFailed] = useState(false);
 	const openTabs = useTabs();
 	const hasMounted = useHasMounted();
 	const viewerQuery = useQuery({
@@ -232,37 +235,26 @@ export function DashboardTopbar({
 							className="flex size-8 items-center justify-center rounded-full"
 						>
 							<Avatar className="size-7 border border-border">
-								{user.image && !avatarLoadFailed ? (
-									<img
-										src={user.image}
-										alt={displayName}
-										className="size-full object-cover"
-										onError={() => {
-											setAvatarLoadFailed(true);
-										}}
-									/>
-								) : (
-									<AvatarFallback className="text-xs">
-										{initials}
-									</AvatarFallback>
-								)}
+								<AvatarImage src={user.image ?? undefined} alt={displayName} />
+								<AvatarFallback
+									delayMs={user.image ? 400 : 0}
+									className="text-xs"
+								>
+									{initials}
+								</AvatarFallback>
 							</Avatar>
 						</button>
 					</DropdownMenuTrigger>
 					<DropdownMenuContent align="start" className="w-56">
 						<DropdownMenuLabel className="flex items-center gap-3 py-2">
 							<Avatar className="size-8 border border-border">
-								{user.image && !avatarLoadFailed ? (
-									<img
-										src={user.image}
-										alt={displayName}
-										className="size-full object-cover"
-									/>
-								) : (
-									<AvatarFallback className="text-xs">
-										{initials}
-									</AvatarFallback>
-								)}
+								<AvatarImage src={user.image ?? undefined} alt={displayName} />
+								<AvatarFallback
+									delayMs={user.image ? 400 : 0}
+									className="text-xs"
+								>
+									{initials}
+								</AvatarFallback>
 							</Avatar>
 							<div className="flex flex-col">
 								<span className="text-sm font-medium text-foreground">