diff --git a/apps/web/src/components/layout/header.tsx b/apps/web/src/components/layout/header.tsx
index 4d1badd..8128e3b 100644
--- a/apps/web/src/components/layout/header.tsx
+++ b/apps/web/src/components/layout/header.tsx
@@ -31,6 +31,7 @@ export function Header() {
             displayName: u.displayName,
             role: u.role,
             tenantId: u.tenantId,
+            hasAvatar: u.hasAvatar,
           });
         }
       });
@@ -53,6 +54,8 @@ export function Header() {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [dropdownOpen]);
 
+  const [avatarError, setAvatarError] = useState(false);
+
   const userInitial = user
     ? (user.displayName ?? user.username).charAt(0).toUpperCase()
     : '?';
@@ -104,10 +107,19 @@ export function Header() {
         <div className="relative" ref={dropdownRef}>
           <button
             onClick={() => setDropdownOpen(!dropdownOpen)}
-            className="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-xs font-medium text-primary-foreground hover:opacity-90 transition-opacity"
+            className="h-8 w-8 rounded-full overflow-hidden bg-primary flex items-center justify-center text-xs font-medium text-primary-foreground hover:opacity-90 transition-opacity"
             aria-label={tHeader('userMenu')}
           >
-            {userInitial}
+            {user?.hasAvatar && !avatarError ? (
+              <img
+                src="/api-proxy/users/me/avatar"
+                alt=""
+                className="h-8 w-8 rounded-full object-cover"
+                onError={() => setAvatarError(true)}
+              />
+            ) : (
+              <span>{userInitial}</span>
+            )}
           </button>
 
           {/* Dropdown menu */}
diff --git a/apps/web/src/lib/stores/auth-store.ts b/apps/web/src/lib/stores/auth-store.ts
index 1ff8748..a1eda2e 100644
--- a/apps/web/src/lib/stores/auth-store.ts
+++ b/apps/web/src/lib/stores/auth-store.ts
@@ -6,6 +6,7 @@ export interface AuthUser {
   displayName: string | null;
   role: 'SUPER_ADMIN' | 'ADMIN' | 'USER';
   tenantId: string;
+  hasAvatar?: boolean;
 }
 
 interface AuthState {