diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx
index 630cc72..0affe0e 100644
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -45,7 +45,7 @@ const Header: React.FC = () => {
 
         // Set the selected user in the store
         setSelectedUser({
-            color: getAvatarColor(index, user.userName),
+            color: getAvatarColor(index, user.userId),
             name: user.userName,
             id: user.id,
             location: { position, rotation, target },
@@ -93,7 +93,7 @@ const Header: React.FC = () => {
                                 id="user-profile-button"
                                 key={`${index}-${user.userName}`}
                                 className="user-profile"
-                                style={{ background: getAvatarColor(index, user.userName) }}
+                                style={{ background: getAvatarColor(index, user.userId) }}
                                 onClick={() => {
                                     handleUserFollow(user, index);
                                 }}
diff --git a/app/src/components/ui/collaboration/threads/Messages.tsx b/app/src/components/ui/collaboration/threads/Messages.tsx
index 11af2a8..ff0b05d 100644
--- a/app/src/components/ui/collaboration/threads/Messages.tsx
+++ b/app/src/components/ui/collaboration/threads/Messages.tsx
@@ -200,7 +200,7 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
                 </div>
             ) : (
                 <div className="message-container">
-                    <div className="profile" style={{ background: getAvatarColor(i, userName) }}>
+                    <div className="profile" style={{ background: getAvatarColor(i, userId) }}>
                         {userName?.charAt(0).toUpperCase() || "user"}
                     </div>
                     <div className="content">
diff --git a/app/src/modules/collaboration/camera/collabCams.tsx b/app/src/modules/collaboration/camera/collabCams.tsx
index 429d3a5..88871ea 100644
--- a/app/src/modules/collaboration/camera/collabCams.tsx
+++ b/app/src/modules/collaboration/camera/collabCams.tsx
@@ -63,7 +63,7 @@ const CamModel = ({ user, model, index }: { user: CollabUsersScheme; model: THRE
                     userImage={""}
                     userName={user.userName}
                     id={user.userId}
-                    color={getAvatarColor(index, user.userName)}
+                    color={getAvatarColor(index, user.userId)}
                     position={user.camData.position}
                     rotation={user.camData.rotation}
                     target={user.camData.target}
diff --git a/app/src/modules/collaboration/functions/getAvatarColor.ts b/app/src/modules/collaboration/functions/getAvatarColor.ts
index 6d34edc..7a3d1de 100644
--- a/app/src/modules/collaboration/functions/getAvatarColor.ts
+++ b/app/src/modules/collaboration/functions/getAvatarColor.ts
@@ -22,16 +22,16 @@ const avatarColors: string[] = [
     "#2FAFAF", // Teal
 ];
 
-export function getAvatarColor(index: number, name?: string): string {
+export function getAvatarColor(index: number, userId?: string): string {
     // Check if the color is already stored in localStorage
     const localStorageKey = "userAvatarColors";
     // Check if local storage is available
-    if (name) {
+    if (userId) {
         let userColors = JSON.parse(localStorage.getItem(localStorageKey) ?? "{}");
 
         // Check if the user already has an assigned color
-        if (userColors[name]) {
-            return userColors[name];
+        if (userColors[userId]) {
+            return userColors[userId];
         }
 
         // Find a new color not already assigned
@@ -43,7 +43,7 @@ export function getAvatarColor(index: number, name?: string): string {
             ? availableColors[0]
             : avatarColors[index % avatarColors.length];
 
-        userColors[name] = assignedColor;
+        userColors[userId] = assignedColor;
 
         // Save back to local storage
         localStorage.setItem(localStorageKey, JSON.stringify(userColors));
@@ -51,6 +51,6 @@ export function getAvatarColor(index: number, name?: string): string {
         return assignedColor;
     }
 
-    // Fallback: Assign a color using the index if no name or local storage is unavailable
+    // Fallback: Assign a color using the index if no userId or local storage is unavailable
     return avatarColors[index % avatarColors.length];
 }