diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index e6be414998..a103ca4ebf 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -18,6 +18,9 @@ limitations under the License.
 .mx_MessageActionBar {
     --MessageActionBar-size-button: 28px;
     --MessageActionBar-size-box: 32px; // 28px + 2px (margin) * 2
+    --MessageActionBar-item-hover-background: $panel-actions;
+    --MessageActionBar-item-hover-borderRadius: 6px;
+    --MessageActionBar-item-hover-zIndex: 1;
 
     position: absolute;
     visibility: hidden;
@@ -59,9 +62,9 @@ limitations under the License.
         margin: 2px;
 
         &:hover {
-            background: $panel-actions;
-            border-radius: 6px;
-            z-index: 1;
+            background: var(--MessageActionBar-item-hover-background);
+            border-radius: var(--MessageActionBar-item-hover-borderRadius);
+            z-index: var(--MessageActionBar-item-hover-zIndex);
         }
     }
 }
diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss
index b2c0a132d4..7b099387f6 100644
--- a/res/css/views/right_panel/_PinnedMessagesCard.scss
+++ b/res/css/views/right_panel/_PinnedMessagesCard.scss
@@ -33,37 +33,33 @@ limitations under the License.
         }
     }
 
-    .mx_PinnedMessagesCard_empty {
+    .mx_PinnedMessagesCard_empty_wrapper {
         display: flex;
         height: 100%;
 
-        > div {
+        .mx_PinnedMessagesCard_empty {
             height: max-content;
             text-align: center;
             margin: auto 40px;
 
             .mx_PinnedMessagesCard_MessageActionBar {
                 pointer-events: none;
-                display: flex;
-                height: 32px;
-                line-height: $font-24px;
-                border-radius: 8px;
-                background: $background;
-                border: 1px solid $input-border-color;
-                padding: 1px;
                 width: max-content;
                 margin: 0 auto;
-                box-sizing: border-box;
 
-                .mx_MessageActionBar_maskButton {
-                    display: inline-block;
-                    position: relative;
+                // Cancel the default values for non-interactivity
+                position: unset;
+                visibility: visible;
+                cursor: unset;
+
+                &::before {
+                    content: unset;
                 }
 
                 .mx_MessageActionBar_optionsButton {
-                    background: $panel-actions;
-                    border-radius: 6px;
-                    z-index: 1;
+                    background: var(--MessageActionBar-item-hover-background);
+                    border-radius: var(--MessageActionBar-item-hover-borderRadius);
+                    z-index: var(--MessageActionBar-item-hover-zIndex);
 
                     &::after {
                         background-color: $primary-content;
@@ -71,13 +67,9 @@ limitations under the License.
                 }
             }
 
-            > h2 {
-                font-weight: $font-semi-bold;
-                font-size: $font-15px;
-                line-height: $font-24px;
+            .mx_PinnedMessagesCard_empty_header {
                 color: $primary-content;
-                margin-top: 24px;
-                margin-bottom: 20px;
+                margin-block: $spacing-24 $spacing-20;
             }
 
             > span {
diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx
index def0985863..f17a743557 100644
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -32,6 +32,7 @@ import PinnedEventTile from "../rooms/PinnedEventTile";
 import { useRoomState } from "../../../hooks/useRoomState";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import { ReadPinsEventId } from "./types";
+import Heading from '../typography/Heading';
 
 interface IProps {
     room: Room;
@@ -154,16 +155,16 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
             />
         ));
     } else {
-        content = <div className="mx_PinnedMessagesCard_empty">
-            <div>
+        content = <div className="mx_PinnedMessagesCard_empty_wrapper">
+            <div className="mx_PinnedMessagesCard_empty">
                 { /* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */ }
-                <div className="mx_PinnedMessagesCard_MessageActionBar">
+                <div className="mx_MessageActionBar mx_PinnedMessagesCard_MessageActionBar">
                     <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton" />
                     <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton" />
                     <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton" />
                 </div>
 
-                <h2>{ _t("Nothing pinned, yet") }</h2>
+                <Heading size="h4" className="mx_PinnedMessagesCard_empty_header">{ _t("Nothing pinned, yet") }</Heading>
                 { _t("If you have permissions, open the menu on any message and select " +
                     "<b>Pin</b> to stick them here.", {}, {
                     b: sub => <b>{ sub }</b>,