diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index c56e529e1a94..a77c425c0ed2 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -9,6 +9,7 @@ import htmlRendererPropTypes from './htmlRendererPropTypes';
 import withCurrentUserPersonalDetails from '../../withCurrentUserPersonalDetails';
 import personalDetailsPropType from '../../../pages/personalDetailsPropType';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import TextLink from '../../TextLink';
 
 const propTypes = {
     ...htmlRendererPropTypes,
@@ -30,22 +31,23 @@ function MentionUserRenderer(props) {
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']);
 
     // We need to remove the leading @ from data as it is not part of the login
-    const loginWhithoutLeadingAt = props.tnode.data.slice(1);
+    const loginWithoutLeadingAt = props.tnode.data.slice(1);
 
-    const isOurMention = loginWhithoutLeadingAt === props.currentUserPersonalDetails.login;
+    const isOurMention = loginWithoutLeadingAt === props.currentUserPersonalDetails.login;
 
     return (
         <Text>
-            <Tooltip text={loginWhithoutLeadingAt}>
-                <Text
+            <Tooltip text={loginWithoutLeadingAt}>
+                <TextLink
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...defaultRendererProps}
+                    href={ROUTES.getDetailsRoute(loginWithoutLeadingAt)}
                     color={StyleUtils.getMentionTextColor(isOurMention)}
                     style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(isOurMention)]}
-                    onPress={() => showUserDetails(loginWhithoutLeadingAt)}
+                    onPress={() => showUserDetails(loginWithoutLeadingAt)}
                 >
                     <TNodeChildrenRenderer tnode={props.tnode} />
-                </Text>
+                </TextLink>
             </Tooltip>
         </Text>
     );
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index 07690600cb0d..f498fbe16bbd 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -31,6 +31,7 @@ const defaultProps = {
 };
 
 function TextLink(props) {
+    const rest = _.omit(props, _.keys(propTypes));
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
 
     /**
@@ -64,6 +65,8 @@ function TextLink(props) {
             onPress={openLink}
             onMouseDown={props.onMouseDown}
             onKeyDown={openLinkIfEnterKeyPressed}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
         >
             {props.children}
         </Text>