diff --git a/web/markdown/markdown-chat-mention.react.js b/web/markdown/markdown-chat-mention.react.js
new file mode 100644
index 000000000..537fa504b
--- /dev/null
+++ b/web/markdown/markdown-chat-mention.react.js
@@ -0,0 +1,22 @@
+// @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 <a className={css.chatMention}>{text}</a>;
+}
+
+export default MarkdownChatMention;
diff --git a/web/markdown/markdown.css b/web/markdown/markdown.css
index 72e019f38..1eab84753 100644
--- a/web/markdown/markdown.css
+++ b/web/markdown/markdown.css
@@ -1,106 +1,115 @@
 div.markdown {
   display: inline;
 }
 
 div.markdown h1,
 div.markdown h2,
 div.markdown h3,
 div.markdown h4,
 div.markdown h5,
 div.markdown h6 {
   display: inline;
 }
 
 div.markdown blockquote {
   display: inline-block;
   padding: 0.5em 10px;
   box-sizing: border-box;
   width: 100%;
   margin: 6px 0;
   border-radius: 8px;
   border-left: 8px solid #00000066;
   box-shadow: 0 1px 2px 1px #00000033;
 }
 
 div.markdown > blockquote {
   background-color: #00000066;
 }
 
 div.markdown code {
   padding: 0 4px;
   margin: 0 2px;
   border-radius: 3px;
 }
 div.lightBackground code {
   background: #dcdcdc;
   color: #222222;
 }
 div.darkBackground code {
   background: #222222;
   color: #f3f3f3;
 }
 
 div.markdown pre {
   padding: 0.5em 10px;
   border-radius: 5px;
   margin: 6px 0;
 }
 div.lightBackground pre {
   background: #dcdcdc;
   color: #222222;
 }
 div.darkBackground pre {
   background: #222222;
   color: #f3f3f3;
 }
 div.markdown pre > code {
   width: 100%;
   display: inline-block;
   box-sizing: border-box;
   tab-size: 2;
   overflow-x: auto;
 }
 
 div.markdown ol,
 div.markdown ul {
   padding-left: 1em;
   margin-left: 0.5em;
 }
 
 div.markdown a {
   text-decoration: underline;
 }
+div.markdown a.chatMention {
+  text-decoration: none;
+  color: inherit;
+  font-weight: bold;
+}
+div.lightBackground a.chatMention {
+  color: black;
+}
 div.lightBackground a {
   color: #2a5db0;
 }
 div.darkBackground a {
   color: white;
 }
 
 span.spoiler {
   background: var(--spoiler-background-color);
   color: var(--spoiler-text-color);
   cursor: pointer;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Old versions of Firefox */
   -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);
 }
 span.revealSpoilerAnimation {
   animation: revealSpoiler 1s;
 }
 @keyframes revealSpoiler {
   from {
     background: var(--spoiler-background-color);
     color: var(--spoiler-text-color);
   }
   to {
     background: transparent;
     color: white;
   }
 }