diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 7a9d6d226c..5fb57d1999 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -139,6 +139,11 @@ $pulse-color: $alert;
     animation: mx_RightPanel_indicator_pulse 2s infinite;
     animation-iteration-count: 1;
 
+    &.mx_Indicator_red {
+        background: rgba($alert, 1);
+        box-shadow: rgba($alert, 1);
+    }
+
     &.mx_Indicator_gray {
         background: rgba($roomtile-default-badge-bg-color, 1);
         box-shadow: rgba($roomtile-default-badge-bg-color, 1);
diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx
index 9393d04559..6d4ddb7b58 100644
--- a/src/components/views/right_panel/RoomHeaderButtons.tsx
+++ b/src/components/views/right_panel/RoomHeaderButtons.tsx
@@ -62,6 +62,7 @@ const UnreadIndicator = ({ color }: IUnreadIndicatorProps) => {
         "mx_RightPanel_headerButton_unreadIndicator": true,
         "mx_Indicator_bold": color === NotificationColor.Bold,
         "mx_Indicator_gray": color === NotificationColor.Grey,
+        "mx_Indicator_red": color === NotificationColor.Red,
     });
     return <>
         <div className="mx_RightPanel_headerButton_unreadIndicator_bg" />