diff --git a/packages/web/src/components/modals/UserProfileModal.tsx b/packages/web/src/components/modals/UserProfileModal.tsx
index f2b7146d..bb78705a 100644
--- a/packages/web/src/components/modals/UserProfileModal.tsx
+++ b/packages/web/src/components/modals/UserProfileModal.tsx
@@ -261,6 +261,7 @@ export function UserProfileModal() {
             size={96}
             status={user.status as 'online' | 'idle' | 'dnd' | 'offline' | null}
             userId={user.homeUserId ?? user.id}
+            user={user}
             ring={{ width: 4, color: 'var(--color-surface-elevated, #1e1e2a)' }}
             className="mt-[-52px] mb-2"
           />
@@ -373,6 +374,7 @@ export function UserProfileModal() {
                           size={40}
                           status={friend.status as 'online' | 'idle' | 'dnd' | 'offline' | null}
                           userId={friend.homeUserId ?? friend.id}
+                          avatarColor={friend.avatarColor}
                         />
                         <div className="min-w-0">
                           <div className="text-[13px] font-medium text-txt-primary truncate">
diff --git a/packages/web/src/components/ui/UserProfilePopout.tsx b/packages/web/src/components/ui/UserProfilePopout.tsx
index c94cc7ee..79b6bfd1 100644
--- a/packages/web/src/components/ui/UserProfilePopout.tsx
+++ b/packages/web/src/components/ui/UserProfilePopout.tsx
@@ -108,6 +108,7 @@ export function UserProfilePopout({ user, onClose, position }: UserProfilePopout
           size={80}
           status={user.status as 'online' | 'idle' | 'dnd' | 'offline' | null}
           userId={user.homeUserId ?? user.id}
+          user={user}
           ring={{ width: 4, color: 'rgba(20,20,26,0.85)' }}
           className="mt-[-44px] mb-3"
         />