diff --git a/website/client/src/components/messages/messageCard.vue b/website/client/src/components/messages/messageCard.vue
index c98cc11c67..116ab827a7 100644
--- a/website/client/src/components/messages/messageCard.vue
+++ b/website/client/src/components/messages/messageCard.vue
@@ -152,6 +152,11 @@
 
 <style lang="scss">
 .message-card {
+  .at-highlight {
+    background-color: rgba(213, 200, 255, 0.32);
+    padding: 0.1rem;
+  }
+  
   .at-text {
     color: #6133b4;
   }
diff --git a/website/client/src/libs/renderWithMentions.js b/website/client/src/libs/renderWithMentions.js
index e5e86fcdf3..7098e797ad 100644
--- a/website/client/src/libs/renderWithMentions.js
+++ b/website/client/src/libs/renderWithMentions.js
@@ -3,5 +3,14 @@ import habiticaMarkdown from 'habitica-markdown/withMentions';
 export default function renderWithMentions (text, user) {
   if (!text) return null;
   const env = { userName: user.auth.local.username, displayName: user.profile.name };
-  return habiticaMarkdown.render(String(text), env);
+  let html = habiticaMarkdown.render(String(text), env);
+  if (user.profile.name && user.profile.name !== user.auth.local.username) {
+    const escapedDisplayName = user.profile.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const displayNameRegex = new RegExp(
+      `(<span class="at-text) at-highlight(">@${escapedDisplayName}</span>)`,
+      'gi',
+    );
+    html = html.replace(displayNameRegex, '$1$2');
+  }
+  return html;
 }