diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index b49896ac3fed..d6b49246580c 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -50,6 +50,7 @@ const customHTMLElementModels = {
         mixedUAStyles: {whiteSpace: 'pre'},
     }),
     'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
+    'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
 };
 
 // We are using the explicit composite architecture for performance gains.
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
new file mode 100644
index 000000000000..065bc2d928aa
--- /dev/null
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {TNodeChildrenRenderer} from 'react-native-render-html';
+import htmlRendererPropTypes from './htmlRendererPropTypes';
+import Text from '../../Text';
+import * as StyleUtils from '../../../styles/StyleUtils';
+
+const MentionHereRenderer = props => (
+    <Text>
+        <Text
+
+            // Passing the true value to the function as here mention is always for the current user
+            color={StyleUtils.getMentionTextColor(true)}
+            style={StyleUtils.getMentionStyle(true)}
+        >
+            <TNodeChildrenRenderer tnode={props.tnode} />
+        </Text>
+    </Text>
+);
+
+MentionHereRenderer.propTypes = htmlRendererPropTypes;
+MentionHereRenderer.displayName = 'HereMentionRenderer';
+
+export default MentionHereRenderer;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index 91ac89fdc33c..7e8a76dd144b 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -42,8 +42,8 @@ const MentionUserRenderer = (props) => {
                 <Text
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...defaultRendererProps}
-                    color={StyleUtils.getUserMentionTextColor(isOurMention)}
-                    style={StyleUtils.getUserMentionStyle(isOurMention)}
+                    color={StyleUtils.getMentionTextColor(isOurMention)}
+                    style={StyleUtils.getMentionStyle(isOurMention)}
                     onPress={() => showUserDetails(loginWhithoutLeadingAt)}
                 >
                     <TNodeChildrenRenderer tnode={props.tnode} />
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/index.js
index 01a0721cd5c4..a866d86486b6 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/index.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/index.js
@@ -1,6 +1,7 @@
 import AnchorRenderer from './AnchorRenderer';
 import CodeRenderer from './CodeRenderer';
 import EditedRenderer from './EditedRenderer';
+import MentionHereRenderer from './MentionHereRenderer';
 import ImageRenderer from './ImageRenderer';
 import MentionUserRenderer from './MentionUserRenderer';
 import PreRenderer from './PreRenderer';
@@ -18,4 +19,5 @@ export default {
     edited: EditedRenderer,
     pre: PreRenderer,
     'mention-user': MentionUserRenderer,
+    'mention-here': MentionHereRenderer,
 };
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index cc0fe59696dc..aacd48132786 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1114,7 +1114,7 @@ function getGoogleListViewStyle(shouldDisplayBorder) {
  * @param {Boolean} isOurMention
  * @returns {Object}
  */
-function getUserMentionStyle(isOurMention) {
+function getMentionStyle(isOurMention) {
     const backgroundColor = isOurMention ? themeColors.ourMentionBG : themeColors.mentionBG;
     return {
         backgroundColor,
@@ -1128,7 +1128,7 @@ function getUserMentionStyle(isOurMention) {
  * @param {Boolean} isOurMention
  * @returns {Object}
  */
-function getUserMentionTextColor(isOurMention) {
+function getMentionTextColor(isOurMention) {
     return isOurMention ? themeColors.ourMentionText : themeColors.mentionText;
 }
 
@@ -1192,6 +1192,6 @@ export {
     getFontSizeStyle,
     getSignInWordmarkWidthStyle,
     getGoogleListViewStyle,
-    getUserMentionStyle,
-    getUserMentionTextColor,
+    getMentionStyle,
+    getMentionTextColor,
 };