diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/componet.tsx b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/componet.tsx
index b4f137f3b1..02dc8ed5f4 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/componet.tsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/componet.tsx
@@ -146,7 +146,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
           color={messageContent.color}
           moderator={messageContent.isModerator}
         >
-          {messageContent.name.toLowerCase().slice(0, 2) || ' '}
+          {message.user?.avatar.length === 0 ? messageContent.name.toLowerCase().slice(0, 2) || '' : ''}
         </ChatAvatar>
       )}
       <ChatContent sameSender={message?.user ? sameSender : false}>
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/styles.ts b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/styles.ts
index 622e4a5f66..4338768859 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/styles.ts
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/styles.ts
@@ -120,10 +120,11 @@ export const ChatAvatar = styled.div<ChatAvatarProps>`
   `}
 
   // ================ image ================
-  ${({ avatar, emoji }) => avatar?.length !== 0 && !emoji && css`
+  ${({ avatar, emoji, color }) => avatar?.length !== 0 && !emoji && css`
       background-image: url(${avatar});
       background-repeat: no-repeat;
       background-size: contain;
+      border: 2px solid ${color};
     `}
   // ================ image ================