diff --git a/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss b/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
index 67a052594..bb0b3ec98 100644
--- a/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
+++ b/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
@@ -1,8 +1,14 @@
 .root {
+  display: inline-flex;
   padding: 10px 0px;
   color: var(--theme-color-components-chat-text);
   font-weight: 400;
   font-size: var(--chat-message-text-size);
+
+  .moderatorBadge,
+  .user {
+    margin-right: 5px;
+  }
 }
 
 .icon {
diff --git a/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx b/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
index c99c584ea..2fb17ff87 100644
--- a/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
+++ b/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
@@ -31,11 +31,11 @@ export const ChatJoinMessage: FC<ChatJoinMessageProps> = ({
         </span>
         <span className={styles.user}>{displayName}</span>
         {isAuthorModerator && (
-          <span>
+          <span className={styles.moderatorBadge}>
             <ModerationBadge userColor={userColor} />
           </span>
         )}
-      </span>{' '}
+      </span>
       joined the chat.
     </div>
   );
diff --git a/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss b/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss
index 03295ed40..018be3af0 100644
--- a/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss
+++ b/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss
@@ -10,6 +10,5 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  margin-left: 5px;
   font-size: 0.75rem;
 }
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
index ed0b01335..e5bab8578 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
@@ -19,6 +19,10 @@ $p-v-size: 2px;
     font-weight: 600;
   }
 
+  .userBadges {
+    margin-left: 3px;
+  }
+
   .message {
     overflow: hidden;
     overflow-wrap: anywhere;
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
index 5304aa974..4943b5268 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
@@ -101,7 +101,7 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
           <UserTooltip user={user}>
             <div className={styles.user} style={{ color }}>
               <span className={styles.userName}>{displayName}</span>
-              {badgeNodes}
+              <span className={styles.userBadges}>{badgeNodes}</span>
             </div>
           </UserTooltip>
         )}