diff --git a/apps/web/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png b/apps/web/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png
index 39e39de9440..759dcb7813a 100644
Binary files a/apps/web/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png and b/apps/web/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png differ
diff --git a/apps/web/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png b/apps/web/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
index f0d6c452a86..fd902e5075e 100644
Binary files a/apps/web/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png and b/apps/web/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png
index 8b906b346e3..dcd74911d51 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
index 2e02360ce95..89ab0ca2227 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png
index 99577dbecef..eae52b9e4b4 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
index 376f2d2d946..e801381b8c6 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
index 383a43bcae8..d7e58aace06 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png
index d05b9938d5c..2f503a5d7bd 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
index 2e02360ce95..89ab0ca2227 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
index 4196fedfbf5..2343978f71a 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png
index 8ab5bc91b77..c58861bbfb7 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png
index 65fe4d96e12..3e4583da5b6 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png differ
diff --git a/apps/web/res/css/views/messages/_MessageActionBar.pcss b/apps/web/res/css/views/messages/_MessageActionBar.pcss
index 61897bb34f7..31a83d3feb7 100644
--- a/apps/web/res/css/views/messages/_MessageActionBar.pcss
+++ b/apps/web/res/css/views/messages/_MessageActionBar.pcss
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MessageActionBar {
     --MessageActionBar-size-button: 28px;
-    --MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
+    --MessageActionBar-size-margin: 3px;
     --MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
     --MessageActionBar-item-hover-borderRadius: 6px;
     --MessageActionBar-item-hover-zIndex: 1;
@@ -17,12 +17,18 @@ Please see LICENSE files in the repository root for full details.
     visibility: hidden;
     cursor: pointer;
     display: flex;
-    height: var(--MessageActionBar-size-box);
+    gap: var(--cpd-space-0-5x);
     line-height: $font-24px;
     border-radius: 8px;
     background: $background;
     border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
-    top: -32px;
+    top: calc(
+        -1 *
+            (
+                var(--MessageActionBar-size-button) + 2 *
+                    (var(--MessageActionBar-size-margin) + var(--cpd-border-width-1))
+            )
+    );
     right: 8px;
     user-select: none;
     /* Ensure the action bar appears above other things like the read marker */
@@ -74,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
         white-space: nowrap;
         display: inline-block;
         position: relative;
-        margin: 2px;
+        margin: var(--MessageActionBar-size-margin);
 
         &:hover {
             background: var(--MessageActionBar-item-hover-background);
@@ -84,7 +90,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageActionBar_iconButton {
-        --MessageActionBar-icon-size: 18px;
+        --MessageActionBar-icon-size: 20px;
         width: var(--MessageActionBar-size-button);
         height: var(--MessageActionBar-size-button);
         color: var(--cpd-color-icon-secondary);
@@ -108,30 +114,12 @@ Please see LICENSE files in the repository root for full details.
             color: var(--cpd-color-icon-primary);
         }
 
-        &.mx_MessageActionBar_threadButton {
-            --MessageActionBar-icon-size: 20px;
-        }
-
-        &.mx_MessageActionBar_retryButton {
-            --MessageActionBar-icon-size: 16px;
-        }
-
         &.mx_MessageActionBar_downloadButton {
-            --MessageActionBar-icon-size: 20px;
-
             &.mx_MessageActionBar_downloadSpinnerButton {
                 svg {
                     display: none; /* hide the download icon */
                 }
             }
         }
-
-        &.mx_MessageActionBar_expandCollapseMessageButton {
-            --MessageActionBar-icon-size: 12px;
-        }
-    }
-
-    .mx_MessageActionBar_optionsButton {
-        --MessageActionBar-icon-size: 22px;
     }
 }
diff --git a/apps/web/res/css/views/rooms/_EventBubbleTile.pcss b/apps/web/res/css/views/rooms/_EventBubbleTile.pcss
index d7c88982dbc..6c4febd10f6 100644
--- a/apps/web/res/css/views/rooms/_EventBubbleTile.pcss
+++ b/apps/web/res/css/views/rooms/_EventBubbleTile.pcss
@@ -196,7 +196,9 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_MessageActionBar {
-            inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
+            inset-inline-start: calc(
+                100% - var(--MessageActionBar-size-button) - 2 * var(--MessageActionBar-size-margin)
+            );
             right: initial; /* Reset the default value */
         }
 
diff --git a/apps/web/src/components/views/messages/MessageActionBar.tsx b/apps/web/src/components/views/messages/MessageActionBar.tsx
index 80b0939a71e..5462ca4213a 100644
--- a/apps/web/src/components/views/messages/MessageActionBar.tsx
+++ b/apps/web/src/components/views/messages/MessageActionBar.tsx
@@ -130,7 +130,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
                 ref={buttonRefCallback}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
-                placement="left"
+                placement="top"
             >
                 <OverflowHorizontalIcon />
             </ContextMenuTooltipButton>
@@ -188,7 +188,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
                 ref={buttonRefCallback}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
-                placement="left"
+                placement="top"
             >
                 <ReactionAddIcon />
             </ContextMenuTooltipButton>
@@ -241,7 +241,7 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
             title={title}
             onClick={onClick}
             onContextMenu={onClick}
-            placement="left"
+            placement="top"
         >
             <ThreadsIcon />
         </RovingAccessibleButton>
@@ -420,7 +420,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     onClick={this.onEditClick}
                     onContextMenu={this.onEditClick}
                     key="edit"
-                    placement="left"
+                    placement="top"
                 >
                     <EditIcon />
                 </RovingAccessibleButton>,
@@ -439,7 +439,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     onClick={(e: ButtonEvent) => this.onPinClick(e, isPinned)}
                     onContextMenu={(e: ButtonEvent) => this.onPinClick(e, isPinned)}
                     key="pin"
-                    placement="left"
+                    placement="top"
                 >
                     {isPinned ? <UnpinIcon /> : <PinIcon />}
                 </RovingAccessibleButton>,
@@ -453,7 +453,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 onClick={this.onCancelClick}
                 onContextMenu={this.onCancelClick}
                 key="cancel"
-                placement="left"
+                placement="top"
             >
                 <DeleteIcon />
             </RovingAccessibleButton>
@@ -479,7 +479,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     onClick={this.onResendClick}
                     onContextMenu={this.onResendClick}
                     key="resend"
-                    placement="left"
+                    placement="top"
                 >
                     <RestartIcon />
                 </RovingAccessibleButton>,
@@ -506,7 +506,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                             onClick={this.onReplyClick}
                             onContextMenu={this.onReplyClick}
                             key="reply"
-                            placement="left"
+                            placement="top"
                         >
                             <ReplyIcon />
                         </RovingAccessibleButton>,
@@ -570,7 +570,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                         caption={_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
                         onClick={this.props.toggleThreadExpanded}
                         key="expand"
-                        placement="left"
+                        placement="top"
                     >
                         {this.props.isQuoteExpanded ? <CollapseIcon /> : <ExpandIcon />}
                     </RovingAccessibleButton>,