diff --git a/packages/web/src/components/chat/FriendsPage.tsx b/packages/web/src/components/chat/FriendsPage.tsx
index 2b3cd0eb..8e5be27e 100644
--- a/packages/web/src/components/chat/FriendsPage.tsx
+++ b/packages/web/src/components/chat/FriendsPage.tsx
@@ -231,7 +231,7 @@ function FriendItem({ friend, onRemove, onDm }: { friend: Friend, onRemove: () =
   return (
     <div className="flex items-center justify-between px-3 h-[62px] rounded-[8px] hover:bg-interactive-hover group transition-colors border-t border-interactive-muted mx-2">
       <div className="flex items-center gap-3">
-        <Avatar src={friend.avatar} name={friend.displayName ?? friend.username} size={32} status={friend.status} />
+        <Avatar src={friend.avatar} name={friend.displayName ?? friend.username} size={32} status={friend.status} userId={friend.id} />
         <div className="flex flex-col leading-tight">
           <div className="flex items-center gap-1.5">
             <span className="text-txt-primary font-semibold text-[15px]">{friend.displayName ?? friend.username}</span>
@@ -277,7 +277,7 @@ function RequestItem({ request, type, onAccept, onDecline, onCancel }: {
   return (
     <div className="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-interactive-hover group transition-colors border-t border-interactive-muted mx-2">
       <div className="flex items-center gap-3">
-        <Avatar src={user.avatar} name={user.displayName ?? user.username} size={32} status={user.status as any} />
+        <Avatar src={user.avatar} name={user.displayName ?? user.username} size={32} status={user.status as any} userId={user.id} />
         <div className="flex flex-col">
           <div className="flex items-center gap-1.5">
             <span className="text-txt-primary font-bold text-sm">{user.displayName ?? user.username}</span>
diff --git a/packages/web/src/components/chat/MentionPopover.tsx b/packages/web/src/components/chat/MentionPopover.tsx
index 1b745dc6..b2579ea1 100644
--- a/packages/web/src/components/chat/MentionPopover.tsx
+++ b/packages/web/src/components/chat/MentionPopover.tsx
@@ -71,6 +71,7 @@ export function MentionPopover({ query, selectedIndex, onSelect }: MentionPopove
                 name={displayName}
                 size={24}
                 status={member.user.status}
+                userId={member.user.id}
               />
               <span
                 className="text-[14px] font-medium truncate"
diff --git a/packages/web/src/components/chat/Message.tsx b/packages/web/src/components/chat/Message.tsx
index 9167c3c5..70ab0811 100644
--- a/packages/web/src/components/chat/Message.tsx
+++ b/packages/web/src/components/chat/Message.tsx
@@ -182,7 +182,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
       <div className="flex-1 min-w-0 pr-4">
         {message.replyTo && (
           <div className="flex items-center gap-1 mb-1 ml-[-4px] opacity-80 hover:opacity-100 cursor-pointer group/reply">
-            <Avatar src={message.replyTo.user.avatar} name={message.replyTo.user.username} size={16} />
+            <Avatar src={message.replyTo.user.avatar} name={message.replyTo.user.username} size={16} user={message.replyTo.user} />
             <span 
               className="text-[14px] font-bold text-txt-primary hover:underline"
               style={message.replyTo ? replyRoleColor(message.replyTo) : undefined}
diff --git a/packages/web/src/components/chat/MessageList.tsx b/packages/web/src/components/chat/MessageList.tsx
index a8be308c..d20491f2 100644
--- a/packages/web/src/components/chat/MessageList.tsx
+++ b/packages/web/src/components/chat/MessageList.tsx
@@ -173,7 +173,7 @@ function WelcomeHeader({ channelId }: { channelId: string }) {
     return (
       <div className="px-4 pt-8 pb-4">
         <div className="mb-2">
-          <Avatar src={otherUser?.avatar} name={displayName} size={80} />
+          <Avatar src={otherUser?.avatar} name={displayName} size={80} userId={otherUser?.id} />
         </div>
         <h3 className="text-[32px] leading-10 font-bold text-txt-primary">{displayName}</h3>
         <p className="text-txt-secondary text-[14px] mt-1">
diff --git a/packages/web/src/components/layout/ActivityPanel.tsx b/packages/web/src/components/layout/ActivityPanel.tsx
index c8a1a4e5..698217b3 100644
--- a/packages/web/src/components/layout/ActivityPanel.tsx
+++ b/packages/web/src/components/layout/ActivityPanel.tsx
@@ -54,6 +54,7 @@ export function ActivityPanel() {
         size={32}
         status={isOffline ? 'offline' : friend.status}
         className={isOffline ? 'opacity-60' : undefined}
+        userId={friend.id}
       />
       <div className="flex-1 min-w-0">
         <div className={`text-[13.5px] leading-[1.2] font-medium truncate ${isOffline ? 'text-txt-tertiary' : 'text-txt-primary'}`}>
diff --git a/packages/web/src/components/layout/ChannelSidebar.tsx b/packages/web/src/components/layout/ChannelSidebar.tsx
index 47cb5827..029f75c7 100644
--- a/packages/web/src/components/layout/ChannelSidebar.tsx
+++ b/packages/web/src/components/layout/ChannelSidebar.tsx
@@ -215,12 +215,12 @@ export function ChannelSidebar() {
                             zIndex: 2 - i,
                           }}
                         >
-                          <Avatar src={m.avatar} name={m.displayName ?? m.username} size={22} />
+                          <Avatar src={m.avatar} name={m.displayName ?? m.username} size={22} userId={m.id} />
                         </div>
                       ))}
                     </div>
                   ) : (
-                    <Avatar src={otherMembers[0]?.avatar} name={otherMembers[0]?.displayName ?? otherMembers[0]?.username ?? ''} size={32} status={otherMembers[0]?.status as any} />
+                    <Avatar src={otherMembers[0]?.avatar} name={otherMembers[0]?.displayName ?? otherMembers[0]?.username ?? ''} size={32} status={otherMembers[0]?.status as any} userId={otherMembers[0]?.id} />
                   )}
                   <div className="flex-1 min-w-0">
                     <div className={`text-[15px] truncate leading-tight ${
diff --git a/packages/web/src/components/layout/MemberSidebar.tsx b/packages/web/src/components/layout/MemberSidebar.tsx
index 37054702..1f4b6ae0 100644
--- a/packages/web/src/components/layout/MemberSidebar.tsx
+++ b/packages/web/src/components/layout/MemberSidebar.tsx
@@ -108,6 +108,7 @@ export function MemberSidebar() {
           size={32}
           status={isOffline ? 'offline' : member.user.status}
           className={isOffline ? 'opacity-60' : undefined}
+          user={member.user}
         />
         <div className="flex-1 min-w-0">
           <div
diff --git a/packages/web/src/components/modals/AddDmMemberModal.tsx b/packages/web/src/components/modals/AddDmMemberModal.tsx
index 0e703c3c..ecd26e71 100644
--- a/packages/web/src/components/modals/AddDmMemberModal.tsx
+++ b/packages/web/src/components/modals/AddDmMemberModal.tsx
@@ -122,7 +122,7 @@ export function AddDmMemberModal() {
               disabled={isAdding}
               className="w-full flex items-center gap-3 px-3 py-2 rounded-[4px] hover:bg-interactive-hover transition-colors text-left disabled:opacity-50"
             >
-              <Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} />
+              <Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} userId={user.id} />
               <div className="flex-1 min-w-0">
                 <div className="text-[14px] font-medium text-txt-primary truncate">
                   {user.displayName ?? user.username}
diff --git a/packages/web/src/components/modals/NewDmModal.tsx b/packages/web/src/components/modals/NewDmModal.tsx
index f47ed057..36c04110 100644
--- a/packages/web/src/components/modals/NewDmModal.tsx
+++ b/packages/web/src/components/modals/NewDmModal.tsx
@@ -100,7 +100,7 @@ export function NewDmModal() {
               onClick={() => handleSelectUser(user)}
               className="w-full flex items-center gap-3 px-3 py-2 rounded-[4px] hover:bg-interactive-hover transition-colors text-left"
             >
-              <Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} />
+              <Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} userId={user.id} />
               <div className="flex-1 min-w-0">
                 <div className="text-[14px] font-medium text-txt-primary truncate">
                   {user.displayName ?? user.username}
diff --git a/packages/web/src/components/modals/ServerSettings.tsx b/packages/web/src/components/modals/ServerSettings.tsx
index 9b4f9323..b6ff1849 100644
--- a/packages/web/src/components/modals/ServerSettings.tsx
+++ b/packages/web/src/components/modals/ServerSettings.tsx
@@ -428,6 +428,7 @@ export function ServerSettingsModal() {
                           name={displayName}
                           size={32}
                           status={member.user.status}
+                          user={member.user}
                         />
                         <div>
                           <div className="text-sm font-medium">{displayName}</div>
diff --git a/packages/web/src/components/modals/UserSettings.tsx b/packages/web/src/components/modals/UserSettings.tsx
index 093f393f..baee273b 100644
--- a/packages/web/src/components/modals/UserSettings.tsx
+++ b/packages/web/src/components/modals/UserSettings.tsx
@@ -64,6 +64,7 @@ export function UserSettingsModal() {
             name={user.displayName ?? user.username}
             size={64}
             status={user.status}
+            userId={user.id}
           />
           <div>
             <div className="font-bold text-lg">{user.displayName ?? user.username}</div>
diff --git a/packages/web/src/components/ui/Avatar.tsx b/packages/web/src/components/ui/Avatar.tsx
index 3c5105b0..f970419a 100644
--- a/packages/web/src/components/ui/Avatar.tsx
+++ b/packages/web/src/components/ui/Avatar.tsx
@@ -11,6 +11,7 @@ interface AvatarProps {
   className?: string;
   onClick?: (e: React.MouseEvent) => void;
   user?: User;
+  userId?: string;
 }
 
 const statusColors: Record<string, string> = {
@@ -20,11 +21,11 @@ const statusColors: Record<string, string> = {
   offline: 'bg-status-offline',
 };
 
-export function Avatar({ src, name, size = 40, status, className = '', onClick, user }: AvatarProps) {
+export function Avatar({ src, name, size = 40, status, className = '', onClick, user, userId }: AvatarProps) {
   const openUserProfile = useUIStore((s) => s.openUserProfile);
   const initials = name.charAt(0).toUpperCase();
   const fontSize = size < 32 ? 'text-xs' : size < 48 ? 'text-sm' : 'text-lg';
-  const gradient = getAvatarGradient(user?.id, name);
+  const gradient = getAvatarGradient(userId ?? user?.id, name);
 
   const handleClick = (e: React.MouseEvent) => {
     if (onClick) {
diff --git a/packages/web/src/components/voice/PictureInPicture.tsx b/packages/web/src/components/voice/PictureInPicture.tsx
index d5433597..fd7ff3c7 100644
--- a/packages/web/src/components/voice/PictureInPicture.tsx
+++ b/packages/web/src/components/voice/PictureInPicture.tsx
@@ -269,6 +269,7 @@ export function PictureInPicture() {
               <Avatar
                 name={displayParticipant.username}
                 size={64}
+                userId={displayParticipant.userId}
               />
               {speakingParticipantIds.has(displayParticipant.identity) && (
                 <div className="absolute -inset-1 rounded-full ring-2 ring-status-online animate-pulse" />
diff --git a/packages/web/src/components/voice/StreamTile.tsx b/packages/web/src/components/voice/StreamTile.tsx
index 2f2ba951..b9dc25a9 100644
--- a/packages/web/src/components/voice/StreamTile.tsx
+++ b/packages/web/src/components/voice/StreamTile.tsx
@@ -146,7 +146,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
       ) : (
         <div className="w-full h-full flex flex-col items-center justify-center gap-3 bg-surface-channel">
           <div className="relative">
-            <Avatar src={null} name={participant.username} size={large ? 80 : 48} />
+            <Avatar src={null} name={participant.username} size={large ? 80 : 48} userId={participant.userId} />
           </div>
           <div className="text-center px-4">
             <p className="text-txt-primary text-sm font-semibold">
diff --git a/packages/web/src/components/voice/VoiceChannel.tsx b/packages/web/src/components/voice/VoiceChannel.tsx
index e66c9ba2..11854d2b 100644
--- a/packages/web/src/components/voice/VoiceChannel.tsx
+++ b/packages/web/src/components/voice/VoiceChannel.tsx
@@ -67,6 +67,7 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
                   name={displayName}
                   size={20}
                   status={status}
+                  userId={userId}
                 />
                 <span className="text-[13px] text-txt-secondary truncate flex-1 min-w-0">{displayName}</span>
                 {/* Status badges */}
diff --git a/packages/web/src/components/voice/VoiceUser.tsx b/packages/web/src/components/voice/VoiceUser.tsx
index f32618f8..d538ec7c 100644
--- a/packages/web/src/components/voice/VoiceUser.tsx
+++ b/packages/web/src/components/voice/VoiceUser.tsx
@@ -95,6 +95,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
               src={null}
               name={participant.username}
               size={large ? 100 : 64}
+              userId={participant.userId}
             />
             {isSpeaking && (
               <div className="absolute -inset-1.5 rounded-full ring-[3px] ring-status-online animate-pulse" />