diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index e180dbaac8..89c47481ff 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -66,7 +66,8 @@ body,
     --color-message-header-icon-non-interactive: hsl(0deg 0% 0% / 30%);
     --color-message-header-icon-interactive: hsl(0deg 0% 0%);
     --color-background: hsl(0deg 0% 100%);
-    --color-background-mention: hsl(8deg 94% 94%);
+    --color-background-direct-mention: hsl(240deg 52% 95%);
+    --color-background-group-mention: hsl(180deg 40% 94%);
 }
 
 %dark-theme {
@@ -80,7 +81,8 @@ body,
     --color-message-header-icon-interactive: hsl(0deg 0% 100%);
     --color-message-list-border: hsl(0deg 0% 7%);
     --color-background: hsl(212deg 28% 18%);
-    --color-background-mention: hsl(8deg 78% 43% / 15%);
+    --color-background-direct-mention: hsl(240deg 13% 20%);
+    --color-background-group-mention: hsl(180deg 13% 15%);
 }
 
 :root.dark-theme {
@@ -1564,9 +1566,12 @@ div.message_table {
     border-left: 1px solid var(--color-message-list-border);
     border-right: 1px solid var(--color-message-list-border);
 
-    &.group_mention,
+    &.group_mention {
+        background-color: var(--color-background-group-mention);
+    }
+
     &.direct_mention {
-        background-color: var(--color-background-mention);
+        background-color: var(--color-background-direct-mention);
     }
 
     .date_row {