diff --git a/src/sidebar/components/Annotation/AnnotationBody.tsx b/src/sidebar/components/Annotation/AnnotationBody.tsx
index 279ff1bc435..af4cbe5974a 100644
--- a/src/sidebar/components/Annotation/AnnotationBody.tsx
+++ b/src/sidebar/components/Annotation/AnnotationBody.tsx
@@ -105,6 +105,7 @@ function AnnotationBody({ annotation, settings }: AnnotationBodyProps) {
               'p-redacted-text': isHidden(annotation),
             })}
             style={textStyle}
+            mentions={annotation.mentions}
           />
         </Excerpt>
       )}
diff --git a/src/sidebar/components/Annotation/AnnotationEditor.tsx b/src/sidebar/components/Annotation/AnnotationEditor.tsx
index 7a8227e0a68..91991bbcb1c 100644
--- a/src/sidebar/components/Annotation/AnnotationEditor.tsx
+++ b/src/sidebar/components/Annotation/AnnotationEditor.tsx
@@ -201,6 +201,7 @@ function AnnotationEditor({
         mentionsEnabled={mentionsEnabled}
         usersForMentions={usersWhoAnnotated}
         showHelpLink={showHelpLink}
+        mentions={annotation.mentions}
       />
       <TagEditor
         onAddTag={onAddTag}
diff --git a/src/sidebar/components/MarkdownEditor.tsx b/src/sidebar/components/MarkdownEditor.tsx
index 811f01d382c..84111a26063 100644
--- a/src/sidebar/components/MarkdownEditor.tsx
+++ b/src/sidebar/components/MarkdownEditor.tsx
@@ -29,6 +29,7 @@ import {
 } from 'preact/hooks';
 
 import { isMacOS } from '../../shared/user-agent';
+import type { Mention } from '../../types/api';
 import {
   getContainingMentionOffsets,
   termBeforePosition,
@@ -547,6 +548,9 @@ export type MarkdownEditorProps = {
    * this list.
    */
   usersForMentions: UserItem[];
+
+  /** List of mentions extracted from the annotation text. */
+  mentions?: Mention[];
 };
 
 /**
@@ -560,6 +564,7 @@ export default function MarkdownEditor({
   textStyle = {},
   showHelpLink = true,
   usersForMentions,
+  mentions,
 }: MarkdownEditorProps) {
   // Whether the preview mode is currently active.
   const [preview, setPreview] = useState(false);
@@ -611,6 +616,7 @@ export default function MarkdownEditor({
           markdown={text}
           classes="border bg-grey-1 p-2"
           style={textStyle}
+          mentions={mentions}
         />
       ) : (
         <TextArea
diff --git a/src/sidebar/components/MarkdownView.tsx b/src/sidebar/components/MarkdownView.tsx
index 54a52e69131..34632d35325 100644
--- a/src/sidebar/components/MarkdownView.tsx
+++ b/src/sidebar/components/MarkdownView.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useRef } from 'preact/hooks';
 
+import type { Mention } from '../../types/api';
+import { renderMentionTags } from '../helpers/mentions';
 import { replaceLinksWithEmbeds } from '../media-embedder';
 import { renderMathAndMarkdown } from '../render-markdown';
 import StyledText from './StyledText';
@@ -9,6 +11,7 @@ export type MarkdownViewProps = {
   markdown: string;
   classes?: string;
   style?: Record<string, string>;
+  mentions?: Mention[];
 };
 
 /**
@@ -19,6 +22,7 @@ export default function MarkdownView({
   markdown,
   classes,
   style,
+  mentions,
 }: MarkdownViewProps) {
   const html = useMemo(
     () => (markdown ? renderMathAndMarkdown(markdown) : ''),
@@ -35,6 +39,10 @@ export default function MarkdownView({
     });
   }, [markdown]);
 
+  useEffect(() => {
+    renderMentionTags(content.current!, mentions ?? []);
+  }, [mentions]);
+
   // NB: The following could be implemented by setting attribute props directly
   // on `StyledText` (which renders a `div` itself), versus introducing a child
   // `div` as is done here. However, in initial testing, this interfered with
diff --git a/src/sidebar/components/test/MarkdownView-test.js b/src/sidebar/components/test/MarkdownView-test.js
index d07a7c5e174..3ebe054cda9 100644
--- a/src/sidebar/components/test/MarkdownView-test.js
+++ b/src/sidebar/components/test/MarkdownView-test.js
@@ -1,17 +1,20 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from '@hypothesis/frontend-testing';
+import sinon from 'sinon';
 
 import MarkdownView, { $imports } from '../MarkdownView';
 
 describe('MarkdownView', () => {
   let fakeRenderMathAndMarkdown;
   let fakeReplaceLinksWithEmbeds;
+  let fakeRenderMentionTags;
 
   const markdownSelector = '[data-testid="markdown-text"]';
 
   beforeEach(() => {
     fakeRenderMathAndMarkdown = markdown => `rendered:${markdown}`;
     fakeReplaceLinksWithEmbeds = sinon.stub();
+    fakeRenderMentionTags = sinon.stub();
 
     $imports.$mock({
       '../render-markdown': {
@@ -20,6 +23,9 @@ describe('MarkdownView', () => {
       '../media-embedder': {
         replaceLinksWithEmbeds: fakeReplaceLinksWithEmbeds,
       },
+      '../helpers/mentions': {
+        renderMentionTags: fakeRenderMentionTags,
+      },
     });
   });
 
@@ -69,6 +75,13 @@ describe('MarkdownView', () => {
     });
   });
 
+  [undefined, [{}]].forEach(mentions => {
+    it('renders mention tags based on provided mentions', () => {
+      mount(<MarkdownView mentions={mentions} />);
+      assert.calledWith(fakeRenderMentionTags, sinon.match.any, mentions ?? []);
+    });
+  });
+
   it(
     'should pass a11y checks',
     checkAccessibility({
diff --git a/src/sidebar/helpers/mentions.ts b/src/sidebar/helpers/mentions.ts
index dbe490c1123..ab4e5e1bf08 100644
--- a/src/sidebar/helpers/mentions.ts
+++ b/src/sidebar/helpers/mentions.ts
@@ -58,11 +58,11 @@ function elementForMention(
   mentionLink: HTMLElement,
   mention?: Mention,
 ): [HTMLElement, Mention | InvalidUsername] {
-  // If the mention exists in the list of mentions, render it as a link
+  // If the mention exists in the list of mentions and contains a link, render
+  // it as an anchor pointing to that link
   if (mention && mention.link) {
-    mentionLink.setAttribute('href', mention.link ?? '');
+    mentionLink.setAttribute('href', mention.link);
     mentionLink.setAttribute('target', '_blank');
-    mentionLink.classList.add('font-bold');
 
     return [mentionLink, mention];
   }
@@ -73,9 +73,8 @@ function elementForMention(
   if (!mention) {
     const invalidMention = document.createElement('span');
 
+    invalidMention.setAttribute('data-hyp-mention', '');
     invalidMention.textContent = username;
-    invalidMention.style.fontStyle = 'italic';
-    invalidMention.style.borderBottom = 'dotted';
     mentionLink.replaceWith(invalidMention);
 
     return [invalidMention, username];
@@ -87,8 +86,8 @@ function elementForMention(
 
   nonLinkMention.setAttribute('data-hyp-mention', '');
   nonLinkMention.setAttribute('data-userid', mentionLink.dataset.userid ?? '');
-  nonLinkMention.classList.add('text-brand', 'font-bold');
   nonLinkMention.textContent = username;
+  mentionLink.replaceWith(nonLinkMention);
 
   return [nonLinkMention, mention];
 }
diff --git a/src/sidebar/helpers/test/mentions-test.js b/src/sidebar/helpers/test/mentions-test.js
index d22d86f083f..b0da44dac7a 100644
--- a/src/sidebar/helpers/test/mentions-test.js
+++ b/src/sidebar/helpers/test/mentions-test.js
@@ -131,16 +131,16 @@ describe('renderMentionTags', () => {
     // Second element will render as a highlighted span
     assert.equal(secondElement.tagName, 'SPAN');
     assert.equal(secondElement.dataset.userid, 'acct:johndoe@hypothes.is');
-    assert.isTrue(secondElement.hasAttribute('data-hyp-mention'));
+    assert.isTrue(secondElement.hasAttribute('data-userid'));
     assert.equal(secondMention, mentions[1]);
 
     // Third and fourth elements will be invalid mentions wrapping the invalid
     // username
     assert.equal(thirdElement.tagName, 'SPAN');
-    assert.isFalse(thirdElement.hasAttribute('data-hyp-mention'));
+    assert.isFalse(thirdElement.hasAttribute('data-userid'));
     assert.equal(thirdMention, '@invalid');
     assert.equal(fourthElement.tagName, 'SPAN');
-    assert.isFalse(fourthElement.hasAttribute('data-hyp-mention'));
+    assert.isFalse(fourthElement.hasAttribute('data-userid'));
     assert.equal(fourthMention, '@user_id_missing');
   });
 });
diff --git a/src/styles/sidebar/components/StyledText.scss b/src/styles/sidebar/components/StyledText.scss
index d477bcd0dd7..7a805adc5c2 100644
--- a/src/styles/sidebar/components/StyledText.scss
+++ b/src/styles/sidebar/components/StyledText.scss
@@ -99,5 +99,20 @@
     blockquote {
       @apply border-l-[3px] italic px-[1em] text-color-text-light;
     }
+
+    // Valid mention with link
+    a[data-hyp-mention][href] {
+      @apply font-bold;
+    }
+
+    // Valid mention without link
+    span[data-hyp-mention][data-userid] {
+      @apply text-brand font-bold;
+    }
+
+    // Invalid mention
+    span[data-hyp-mention]:not([data-userid]) {
+      @apply text-grey-6 font-bold underline decoration-wavy decoration-red-error;
+    }
   }
 }
diff --git a/src/types/api.ts b/src/types/api.ts
index d4e7b50ddbb..da3ebc9154f 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -240,6 +240,12 @@ export type APIAnnotationData = {
    * current assignment, course etc. to annotations.
    */
   metadata?: object;
+
+  /**
+   * List of unique users that were mentioned in the annotation text.
+   * This prop will be present only if `at_mentions` is enabled.
+   */
+  mentions?: Mention[];
 };
 
 /**