diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 3183168f8..1c6fbc162 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -400,6 +400,13 @@
       text-transform: uppercase;
     }
 
+    .card__notification-mentioner {
+      background-color: var(--color-highlight);
+      border-radius: 0.7em 0.2em 0.7em 0.2em;
+      display: inline-flex;
+      padding: 0.1em 0.3em;
+    }
+
     .card__title {
       font-size: var(--text-small);
       font-weight: bold;
diff --git a/app/views/notifications/notification/mention/_body.html.erb b/app/views/notifications/notification/mention/_body.html.erb
index 9c40293b1..5f10e67d6 100644
--- a/app/views/notifications/notification/mention/_body.html.erb
+++ b/app/views/notifications/notification/mention/_body.html.erb
@@ -1,6 +1,6 @@
 <% mention = notification.source %>
 
-<strong class="card__title overflow-ellipsis"><%= mention.mentioner.first_name %> mentioned you</strong>
+<strong class="card__title overflow-ellipsis"><mark class="card__notification-mentioner"><%= mention.mentioner.first_name %> @mentioned you</mark></strong>
 <div class="card__notification-body overflow-ellipsis">
   <%= mention.source.mentionable_content.truncate(200) %>
 </div>