diff --git a/web/markdown/markdown-chat-mention.react.js b/web/markdown/markdown-chat-mention.react.js
new file mode 100644
--- /dev/null
+++ b/web/markdown/markdown-chat-mention.react.js
@@ -0,0 +1,32 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
+
+import css from './markdown.css';
+
+type MarkdownChatMentionProps = {
+  +threadInfo: ResolvedThreadInfo,
+  +hasAccessToChat: boolean,
+  +text: string,
+};
+
+function MarkdownChatMention(props: MarkdownChatMentionProps): React.Node {
+  const { hasAccessToChat, text } = props;
+
+  if (!hasAccessToChat) {
+    return text;
+  }
+
+  return (
+    <a className={css.chatMention}>
+      <strong>{text}</strong>
+    </a>
+  );
+}
+
+const MemoizedMarkdownChatMention: React.ComponentType<MarkdownChatMentionProps> =
+  React.memo<MarkdownChatMentionProps>(MarkdownChatMention);
+
+export default MemoizedMarkdownChatMention;
diff --git a/web/markdown/markdown.css b/web/markdown/markdown.css
--- a/web/markdown/markdown.css
+++ b/web/markdown/markdown.css
@@ -73,9 +73,15 @@
 div.lightBackground a {
   color: #2a5db0;
 }
+div.lightBackground a.chatMention {
+  color: black;
+}
 div.darkBackground a {
   color: white;
 }
+div.markdown a.chatMention {
+  text-decoration: none;
+}
 
 span.spoiler {
   background: var(--spoiler-background-color);
@@ -87,7 +93,8 @@
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
 }
-span.spoiler a {
+span.spoiler a,
+span.spoiler a.chatMention {
   pointer-events: none;
   color: var(--spoiler-text-color);
 }