diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
index 57d9699dd697..daed57cb44f9 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
@@ -85,6 +85,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             'mention-user': HTMLElementModel.fromCustomModel({tagName: 'mention-user', contentModel: HTMLContentModel.textual}),
             'mention-report': HTMLElementModel.fromCustomModel({tagName: 'mention-report', contentModel: HTMLContentModel.textual}),
             'mention-here': HTMLElementModel.fromCustomModel({tagName: 'mention-here', contentModel: HTMLContentModel.textual}),
+            'mention-short': HTMLElementModel.fromCustomModel({tagName: 'mention-short', contentModel: HTMLContentModel.textual}),
             'next-step': HTMLElementModel.fromCustomModel({
                 tagName: 'next-step',
                 mixedUAStyles: {...styles.textLabelSupporting, ...styles.lh16},
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ShortMentionRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ShortMentionRenderer.tsx
new file mode 100644
index 000000000000..beab33275087
--- /dev/null
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ShortMentionRenderer.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import type {TextStyle} from 'react-native';
+import {TNodeChildrenRenderer} from 'react-native-render-html';
+import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
+import Text from '@components/Text';
+import useShortMentionsList from '@hooks/useShortMentionsList';
+import CONST from '@src/CONST';
+import MentionHereRenderer from './MentionHereRenderer';
+import MentionUserRenderer from './MentionUserRenderer';
+
+function ShortMentionRenderer(props: CustomRendererProps<TText | TPhrasing>) {
+    const {mentionsList, currentUserMentions} = useShortMentionsList();
+
+    const mentionValue = 'data' in props.tnode ? props.tnode.data.replace(CONST.UNICODE.LTR, '') : '';
+
+    if (currentUserMentions?.includes(mentionValue)) {
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return <MentionHereRenderer {...props} />;
+    }
+
+    if (mentionsList.includes(mentionValue)) {
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return <MentionUserRenderer {...props} />;
+    }
+
+    return (
+        <Text style={props.style as TextStyle}>
+            <TNodeChildrenRenderer tnode={props.tnode} />
+        </Text>
+    );
+}
+
+ShortMentionRenderer.displayName = 'ShortMentionRenderer';
+
+export default ShortMentionRenderer;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/index.ts b/src/components/HTMLEngineProvider/HTMLRenderers/index.ts
index b8bd12da24fe..2ac2e8591915 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/index.ts
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/index.ts
@@ -12,6 +12,7 @@ import MentionReportRenderer from './MentionReportRenderer';
 import MentionUserRenderer from './MentionUserRenderer';
 import NextStepEmailRenderer from './NextStepEmailRenderer';
 import PreRenderer from './PreRenderer';
+import ShortMentionRenderer from './ShortMentionRenderer';
 import StrongRenderer from './StrongRenderer';
 import TaskTitleRenderer from './TaskTitleRenderer';
 import VideoRenderer from './VideoRenderer';
@@ -37,6 +38,7 @@ const HTMLEngineProviderComponentList: CustomTagRendererRecord = {
     'mention-user': MentionUserRenderer,
     'mention-report': MentionReportRenderer,
     'mention-here': MentionHereRenderer,
+    'mention-short': ShortMentionRenderer,
     emoji: EmojiRenderer,
     'next-step-email': NextStepEmailRenderer,
     'deleted-action': DeletedActionRenderer,