diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index 11ffabe4fe6a..3646d9148b3a 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -1,3 +1,4 @@
+import {cloneDeep} from 'lodash';
 import lodashGet from 'lodash/get';
 import React from 'react';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
@@ -16,6 +17,7 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import CONST from '@src/CONST';
+import * as LoginUtils from '@src/libs/LoginUtils';
 import ROUTES from '@src/ROUTES';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
@@ -31,21 +33,41 @@ function MentionUserRenderer(props) {
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']);
-    const htmlAttribAccountID = lodashGet(props.tnode.attributes, 'accountid');
+    const htmlAttributeAccountID = lodashGet(props.tnode.attributes, 'accountid');
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     let accountID;
     let displayNameOrLogin;
     let navigationRoute;
+    const tnode = cloneDeep(props.tnode);
 
-    if (!_.isEmpty(htmlAttribAccountID)) {
-        const user = lodashGet(personalDetails, htmlAttribAccountID);
-        accountID = parseInt(htmlAttribAccountID, 10);
+    const getMentionDisplayText = (displayText, userAccountID, userLogin = '') => {
+        // If the userAccountID does not exist, this is an email-based mention so the displayText must be an email.
+        // If the userAccountID exists but userLogin is different from displayText, this means the displayText is either user display name, Hidden, or phone number, in which case we should return it as is.
+        if (userAccountID && userLogin !== displayText) {
+            return displayText;
+        }
+
+        // If the emails are not in the same private domain, we also return the displayText
+        if (!LoginUtils.areEmailsFromSamePrivateDomain(displayText, props.currentUserPersonalDetails.login)) {
+            return displayText;
+        }
+
+        // Otherwise, the emails must be of the same private domain, so we should remove the domain part
+        return displayText.split('@')[0];
+    };
+
+    if (!_.isEmpty(htmlAttributeAccountID)) {
+        const user = lodashGet(personalDetails, htmlAttributeAccountID);
+        accountID = parseInt(htmlAttributeAccountID, 10);
         displayNameOrLogin = LocalePhoneNumber.formatPhoneNumber(lodashGet(user, 'login', '')) || lodashGet(user, 'displayName', '') || translate('common.hidden');
-        navigationRoute = ROUTES.PROFILE.getRoute(htmlAttribAccountID);
-    } else if (!_.isEmpty(props.tnode.data)) {
+        displayNameOrLogin = getMentionDisplayText(displayNameOrLogin, htmlAttributeAccountID, lodashGet(user, 'login', ''));
+        navigationRoute = ROUTES.PROFILE.getRoute(htmlAttributeAccountID);
+    } else if (!_.isEmpty(tnode.data)) {
         // We need to remove the LTR unicode and leading @ from data as it is not part of the login
-        displayNameOrLogin = props.tnode.data.replace(CONST.UNICODE.LTR, '').slice(1);
+        displayNameOrLogin = tnode.data.replace(CONST.UNICODE.LTR, '').slice(1);
+        // We need to replace tnode.data here because we will pass it to TNodeChildrenRenderer below
+        tnode.data = tnode.data.replace(displayNameOrLogin, getMentionDisplayText(displayNameOrLogin, htmlAttributeAccountID));
 
         accountID = _.first(PersonalDetailsUtils.getAccountIDsByLogins([displayNameOrLogin]));
         navigationRoute = ROUTES.DETAILS.getRoute(displayNameOrLogin);
@@ -83,7 +105,7 @@ function MentionUserRenderer(props) {
                             // eslint-disable-next-line react/jsx-props-no-spreading
                             {...defaultRendererProps}
                         >
-                            {!_.isEmpty(htmlAttribAccountID) ? `@${displayNameOrLogin}` : <TNodeChildrenRenderer tnode={props.tnode} />}
+                            {!_.isEmpty(htmlAttributeAccountID) ? `@${displayNameOrLogin}` : <TNodeChildrenRenderer tnode={tnode} />}
                         </Text>
                     </UserDetailsTooltip>
                 </Text>
diff --git a/src/libs/LoginUtils.ts b/src/libs/LoginUtils.ts
index dca84b9b11e0..3781890013eb 100644
--- a/src/libs/LoginUtils.ts
+++ b/src/libs/LoginUtils.ts
@@ -59,4 +59,14 @@ function getPhoneLogin(partnerUserID: string): string {
     return appendCountryCode(getPhoneNumberWithoutSpecialChars(partnerUserID));
 }
 
-export {getPhoneNumberWithoutSpecialChars, appendCountryCode, isEmailPublicDomain, validateNumber, getPhoneLogin};
+/**
+ * Check whether 2 emails have the same private domain
+ */
+function areEmailsFromSamePrivateDomain(email1: string, email2: string): boolean {
+    if (isEmailPublicDomain(email1) || isEmailPublicDomain(email2)) {
+        return false;
+    }
+    return Str.extractEmailDomain(email1).toLowerCase() === Str.extractEmailDomain(email2).toLowerCase();
+}
+
+export {getPhoneNumberWithoutSpecialChars, appendCountryCode, isEmailPublicDomain, validateNumber, getPhoneLogin, areEmailsFromSamePrivateDomain};