diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index dd1cfea7f5..340bd4f3bb 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -445,8 +445,10 @@ export const Message = ({
                 </Box>
               );
             case 'mention':
+              const first = (i) => (i === 0);
               return (
                 <Mention
+                  marginLeft={first(i) ? "-4px" : "0"}
                   group={group}
                   scrollWindow={scrollWindow}
                   ship={content.mention}
diff --git a/pkg/interface/src/views/components/MentionText.tsx b/pkg/interface/src/views/components/MentionText.tsx
index 689b489de2..eca48d300f 100644
--- a/pkg/interface/src/views/components/MentionText.tsx
+++ b/pkg/interface/src/views/components/MentionText.tsx
@@ -39,7 +39,7 @@ export function Mention(props: {
   scrollWindow?: HTMLElement;
   ship: string;
 }) {
-  const { contacts, ship, scrollWindow } = props;
+  const { contacts, ship, scrollWindow, ...rest } = props;
   let { contact } = props;
   contact = contact?.color ? contact : contacts?.[ship];
   const history = useHistory();
@@ -53,7 +53,7 @@ export function Mention(props: {
   }, [showOverlay]);
 
   return (
-    <Box position='relative' display='inline-block' cursor='pointer'>
+    <Box position='relative' display='inline-block' cursor='pointer' {...rest}>
       <Text
         onClick={() => toggleOverlay()}
         mx={1}