diff --git a/ts/components/conversation/message/message-content/MessageReactions.tsx b/ts/components/conversation/message/message-content/MessageReactions.tsx
index 7bf262a0f..8a417c9bc 100644
--- a/ts/components/conversation/message/message-content/MessageReactions.tsx
+++ b/ts/components/conversation/message/message-content/MessageReactions.tsx
@@ -14,7 +14,11 @@ import { StyledPopupContainer } from '../reactions/ReactionPopup';
 export const popupXDefault = -81;
 export const popupYDefault = -90;
 
-const StyledMessageReactionsContainer = styled(Flex)<{ x: number; y: number; noAvatar: boolean }>`
+export const StyledMessageReactionsContainer = styled(Flex)<{
+  x: number;
+  y: number;
+  noAvatar: boolean;
+}>`
   ${StyledPopupContainer} {
     position: absolute;
     top: ${props => `${props.y}px;`};
diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
index b4b8dc0d1..307023e3e 100644
--- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
+++ b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
@@ -21,6 +21,7 @@ import { MessageContentWithStatuses } from '../message-content/MessageContentWit
 import { ReadableMessage } from './ReadableMessage';
 import styled, { keyframes } from 'styled-components';
 import { isOpenOrClosedGroup } from '../../../../models/conversationAttributes';
+import { StyledMessageReactionsContainer } from '../message-content/MessageReactions';
 
 export type GenericReadableMessageSelectorProps = Pick<
   MessageRenderingProps,
@@ -118,11 +119,16 @@ const StyledReadableMessage = styled(ReadableMessage)<{
   width: 100%;
   letter-spacing: 0.03rem;
   padding: var(--margins-xs) var(--margins-lg) 0;
+  margin: var(--margins-xxs) 0;
 
   &.message-highlighted {
     animation: ${highlightedMessageAnimation} 1s ease-in-out;
   }
 
+  ${StyledMessageReactionsContainer} {
+    margin-top: var(--margins-xs);
+  }
+
   ${props =>
     props.isRightClicked &&
     `
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index f1fc40cbc..e0018ea0f 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -17,6 +17,7 @@ export type ThemeGlobals = {
   '--font-size-h4': string;
 
   /* Margins */
+  '--margins-xxs': string;
   '--margins-xs': string;
   '--margins-sm': string;
   '--margins-md': string;
@@ -97,6 +98,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--font-size-h3': '20px',
   '--font-size-h4': '16px',
 
+  '--margins-xxs': '2.5px',
   '--margins-xs': '5px',
   '--margins-sm': '10px',
   '--margins-md': '15px',