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,26 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './markdown.css';
+
+type MarkdownChatMentionProps = {
+  +hasAccessToChat: boolean,
+  +text: string,
+};
+
+function MarkdownChatMention(props: MarkdownChatMentionProps): React.Node {
+  const { hasAccessToChat, text } = props;
+
+  if (!hasAccessToChat) {
+    return text;
+  }
+
+  return (
+    <strong>
+      <a className={css.chatMention}>{text}</a>
+    </strong>
+  );
+}
+
+export default MarkdownChatMention;
diff --git a/web/markdown/markdown.css b/web/markdown/markdown.css
--- a/web/markdown/markdown.css
+++ b/web/markdown/markdown.css
@@ -70,6 +70,10 @@
 div.markdown a {
   text-decoration: underline;
 }
+div.markdown a.chatMention {
+  text-decoration: none;
+  color: inherit;
+}
 div.lightBackground a {
   color: #2a5db0;
 }
@@ -87,7 +91,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);
 }