diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 86628a5d9e..7a9d6d226c 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -140,6 +140,11 @@ $pulse-color: $alert;
     animation-iteration-count: 1;
 
     &.mx_Indicator_gray {
+        background: rgba($roomtile-default-badge-bg-color, 1);
+        box-shadow: rgba($roomtile-default-badge-bg-color, 1);
+    }
+
+    &.mx_Indicator_bold {
         background: rgba($input-darker-fg-color, 1);
         box-shadow: rgba($input-darker-fg-color, 1);
     }
diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx
index 783b9ae740..9393d04559 100644
--- a/src/components/views/right_panel/RoomHeaderButtons.tsx
+++ b/src/components/views/right_panel/RoomHeaderButtons.tsx
@@ -60,6 +60,7 @@ const UnreadIndicator = ({ color }: IUnreadIndicatorProps) => {
 
     const classes = classNames({
         "mx_RightPanel_headerButton_unreadIndicator": true,
+        "mx_Indicator_bold": color === NotificationColor.Bold,
         "mx_Indicator_gray": color === NotificationColor.Grey,
     });
     return <>
@@ -100,6 +101,7 @@ const TimelineCardHeaderButton = ({ room, isHighlighted, onClick }: IHeaderButto
     let unreadIndicator;
     const color = RoomNotificationStateStore.instance.getRoomState(room).color;
     switch (color) {
+        case NotificationColor.Bold:
         case NotificationColor.Grey:
         case NotificationColor.Red:
             unreadIndicator = <UnreadIndicator color={color} />;