diff --git a/web/markdown/markdown-chat-mention.react.js b/web/markdown/markdown-chat-mention.react.js
--- a/web/markdown/markdown-chat-mention.react.js
+++ b/web/markdown/markdown-chat-mention.react.js
@@ -22,7 +22,7 @@
   }
 
   return (
-    <a className={css.chatMention} onClick={onClick}>
+    <a className={css.mention} onClick={onClick}>
       {text}
     </a>
   );
diff --git a/web/markdown/markdown-user-mention.react.js b/web/markdown/markdown-user-mention.react.js
new file mode 100644
--- /dev/null
+++ b/web/markdown/markdown-user-mention.react.js
@@ -0,0 +1,30 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './markdown.css';
+import { usePushUserProfileModal } from '../modals/user-profile/user-profile-utils.js';
+
+type MarkdownChatMentionProps = {
+  +text: string,
+  +userID: string,
+};
+
+function MarkdownUserMention(props: MarkdownChatMentionProps): React.Node {
+  const { text, userID } = props;
+
+  const pushUserProfileModal = usePushUserProfileModal(userID);
+
+  const markdownUserMention = React.useMemo(
+    () => (
+      <a className={css.mention} onClick={pushUserProfileModal}>
+        {text}
+      </a>
+    ),
+    [pushUserProfileModal, text],
+  );
+
+  return markdownUserMention;
+}
+
+export default MarkdownUserMention;
diff --git a/web/markdown/markdown.css b/web/markdown/markdown.css
--- a/web/markdown/markdown.css
+++ b/web/markdown/markdown.css
@@ -70,12 +70,12 @@
 div.markdown a {
   text-decoration: underline;
 }
-div.markdown a.chatMention {
+div.markdown a.mention {
   text-decoration: none;
   color: inherit;
   font-weight: bold;
 }
-div.lightBackground a.chatMention {
+div.lightBackground a.mention {
   color: black;
 }
 div.lightBackground a {
@@ -96,7 +96,7 @@
   user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
 }
 span.spoiler:not(.revealSpoilerAnimation) a,
-span.spoiler:not(.revealSpoilerAnimation) a.chatMention {
+span.spoiler:not(.revealSpoilerAnimation) a.mention {
   pointer-events: none;
   color: var(--spoiler-text-color);
 }
diff --git a/web/markdown/rules.react.js b/web/markdown/rules.react.js
--- a/web/markdown/rules.react.js
+++ b/web/markdown/rules.react.js
@@ -14,6 +14,7 @@
 
 import MarkdownChatMention from './markdown-chat-mention.react.js';
 import MarkdownSpoiler from './markdown-spoiler.react.js';
+import MarkdownUserMention from './markdown-user-mention.react.js';
 
 export type MarkdownRules = {
   +simpleMarkdownRules: SharedMarkdown.ParserRules,
@@ -192,15 +193,20 @@
       userMention: {
         ...SimpleMarkdown.defaultRules.strong,
         match: SharedMarkdown.matchUserMentions(membersMap),
-        parse: (capture: SharedMarkdown.Capture) => ({
-          content: capture[0],
-        }),
+        parse: (capture: SharedMarkdown.Capture) =>
+          SharedMarkdown.parseUserMentions(membersMap, capture),
         // eslint-disable-next-line react/display-name
         react: (
           node: SharedMarkdown.SingleASTNode,
           output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
           state: SharedMarkdown.State,
-        ) => <strong key={state.key}>{node.content}</strong>,
+        ) => (
+          <MarkdownUserMention
+            key={state.key}
+            text={node.content}
+            userID={node.userID}
+          />
+        ),
       },
       chatMention: {
         ...SimpleMarkdown.defaultRules.strong,