diff --git a/apps/audius-client/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css b/apps/audius-client/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css
index 6b09ffb5072..2bca02685db 100644
--- a/apps/audius-client/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css
+++ b/apps/audius-client/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css
@@ -9,6 +9,10 @@
   align-items: flex-end;
 }
 
+.root.hasReaction {
+  margin-bottom: var(--unit-2);
+}
+
 .bubble {
   --bubble-color: var(--white);
   position: relative;
diff --git a/apps/audius-client/packages/web/src/pages/chat-page/components/ChatMessageListItem.tsx b/apps/audius-client/packages/web/src/pages/chat-page/components/ChatMessageListItem.tsx
index df02266eedb..dbf1aba7418 100644
--- a/apps/audius-client/packages/web/src/pages/chat-page/components/ChatMessageListItem.tsx
+++ b/apps/audius-client/packages/web/src/pages/chat-page/components/ChatMessageListItem.tsx
@@ -181,7 +181,8 @@ export const ChatMessageListItem = (props: ChatMessageListItemProps) => {
   return (
     <div
       className={cn(styles.root, {
-        [styles.isAuthor]: isAuthor
+        [styles.isAuthor]: isAuthor,
+        [styles.hasReaction]: !hasTail && message.reactions?.length > 0
       })}
     >
       <div