diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js
index b2644ab0eef9..0f1300ebf03d 100644
--- a/src/components/AvatarWithDisplayName.js
+++ b/src/components/AvatarWithDisplayName.js
@@ -17,9 +17,7 @@ import compose from '../libs/compose';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
 import Text from './Text';
 import * as StyleUtils from '../styles/StyleUtils';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import ParentNavigationSubtitle from './ParentNavigationSubtitle';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -55,7 +53,7 @@ const defaultProps = {
 function AvatarWithDisplayName(props) {
     const title = ReportUtils.getReportName(props.report);
     const subtitle = ReportUtils.getChatRoomSubtitle(props.report);
-    const parentNavigationSubtitle = ReportUtils.getParentNavigationSubtitle(props.report);
+    const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(props.report);
     const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(props.report) || ReportUtils.isMoneyRequest(props.report);
     const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies, true);
     const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.ownerAccountID], props.personalDetails);
@@ -90,21 +88,11 @@ function AvatarWithDisplayName(props) {
                             textStyles={[props.isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
                             shouldUseFullTitle={isMoneyRequestOrReport || props.isAnonymous}
                         />
-                        {!_.isEmpty(parentNavigationSubtitle) && (
-                            <PressableWithoutFeedback
-                                onPress={() => {
-                                    Navigation.navigate(ROUTES.getReportRoute(props.report.parentReportID));
-                                }}
-                                accessibilityLabel={subtitle}
-                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
-                            >
-                                <Text
-                                    style={[styles.optionAlternateText, styles.textLabelSupporting, styles.link]}
-                                    numberOfLines={1}
-                                >
-                                    {parentNavigationSubtitle}
-                                </Text>
-                            </PressableWithoutFeedback>
+                        {!_.isEmpty(parentNavigationSubtitleData) && (
+                            <ParentNavigationSubtitle
+                                parentNavigationSubtitleData={parentNavigationSubtitleData}
+                                parentReportID={props.report.parentReportID}
+                            />
                         )}
                         {!_.isEmpty(subtitle) && (
                             <Text
diff --git a/src/components/ParentNavigationSubtitle.js b/src/components/ParentNavigationSubtitle.js
new file mode 100644
index 000000000000..fd388b00a8a7
--- /dev/null
+++ b/src/components/ParentNavigationSubtitle.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import CONST from '../CONST';
+import Text from './Text';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import useLocalize from '../hooks/useLocalize';
+
+const propTypes = {
+    parentNavigationSubtitleData: PropTypes.shape({
+        // Title of root report room
+        rootReportName: PropTypes.string,
+
+        // Name of workspace, if any
+        workspaceName: PropTypes.string,
+    }).isRequired,
+
+    /** parent Report ID */
+    parentReportID: PropTypes.string,
+
+    /** PressableWithoutFeedack additional styles */
+    // eslint-disable-next-line react/forbid-prop-types
+    pressableStyles: PropTypes.arrayOf(PropTypes.object),
+};
+
+const defaultProps = {
+    parentReportID: '',
+    pressableStyles: [],
+};
+
+function ParentNavigationSubtitle(props) {
+    const {workspaceName, rootReportName} = props.parentNavigationSubtitleData;
+
+    const {translate} = useLocalize();
+
+    return (
+        <PressableWithoutFeedback
+            onPress={() => {
+                Navigation.navigate(ROUTES.getReportRoute(props.parentReportID));
+            }}
+            accessibilityLabel={translate('threads.parentNavigationSummary', {rootReportName, workspaceName})}
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
+            style={[...props.pressableStyles]}
+        >
+            <Text
+                style={[styles.optionAlternateText]}
+                numberOfLines={1}
+            >
+                <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{`${translate('threads.from')} `}</Text>
+                <Text style={[styles.optionAlternateText, styles.textLabelSupporting, styles.link]}>{rootReportName}</Text>
+                {Boolean(workspaceName) && <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{` ${translate('threads.in')} ${workspaceName}`}</Text>}
+            </Text>
+        </PressableWithoutFeedback>
+    );
+}
+
+ParentNavigationSubtitle.defaultProps = defaultProps;
+ParentNavigationSubtitle.propTypes = propTypes;
+ParentNavigationSubtitle.displayName = 'ParentNavigationSubtitle';
+export default ParentNavigationSubtitle;
diff --git a/src/languages/en.js b/src/languages/en.js
index 4e3e938e5818..ba4aca6b4a2a 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1508,6 +1508,8 @@ export default {
     threads: {
         replies: 'Replies',
         reply: 'Reply',
+        from: 'From',
+        in: 'In',
         parentNavigationSummary: ({rootReportName, workspaceName}) => `From ${rootReportName}${workspaceName ? ` in ${workspaceName}` : ''}`,
     },
     qrCodes: {
diff --git a/src/languages/es.js b/src/languages/es.js
index 4810df39c3a4..a3c983ac6c10 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1979,6 +1979,8 @@ export default {
     threads: {
         replies: 'Respuestas',
         reply: 'Respuesta',
+        from: 'De',
+        in: 'en',
         parentNavigationSummary: ({rootReportName, workspaceName}) => `De ${rootReportName}${workspaceName ? ` en ${workspaceName}` : ''}`,
     },
     qrCodes: {
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 49bd51ff050d..91c35d4cd956 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1400,19 +1400,19 @@ function getChatRoomSubtitle(report) {
 /**
  * Gets the parent navigation subtitle for the report
  * @param {Object} report
- * @returns {String}
+ * @returns {Object}
  */
 function getParentNavigationSubtitle(report) {
     if (isThread(report)) {
         const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
         const {rootReportName, workspaceName} = getRootReportAndWorkspaceName(parentReport);
         if (_.isEmpty(rootReportName)) {
-            return '';
+            return {};
         }
 
-        return Localize.translateLocal('threads.parentNavigationSummary', {rootReportName, workspaceName});
+        return {rootReportName, workspaceName};
     }
-    return '';
+    return {};
 }
 
 /**
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 1816e5a39caf..05be2e086fcd 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -28,9 +28,8 @@ import * as Task from '../../libs/actions/Task';
 import reportActionPropTypes from './report/reportActionPropTypes';
 import PressableWithoutFeedback from '../../components/Pressable/PressableWithoutFeedback';
 import PinButton from '../../components/PinButton';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
 import TaskHeaderActionButton from '../../components/TaskHeaderActionButton';
+import ParentNavigationSubtitle from '../../components/ParentNavigationSubtitle';
 
 const propTypes = {
     /** Toggles the navigationMenu open and closed */
@@ -90,7 +89,7 @@ function HeaderView(props) {
     const reportHeaderData = !isTaskReport && !isChatThread && props.report.parentReportID ? props.parentReport : props.report;
     const title = ReportUtils.getReportName(reportHeaderData);
     const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData);
-    const parentNavigationSubtitle = ReportUtils.getParentNavigationSubtitle(reportHeaderData);
+    const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(reportHeaderData);
     const isConcierge = ReportUtils.hasSingleParticipant(props.report) && _.contains(participants, CONST.ACCOUNT_ID.CONCIERGE);
     const isAutomatedExpensifyAccount = ReportUtils.hasSingleParticipant(props.report) && ReportUtils.hasAutomatedExpensifyAccountIDs(participants);
     const guideCalendarLink = lodashGet(props.account, 'guideCalendarLink');
@@ -190,22 +189,12 @@ function HeaderView(props) {
                                     textStyles={[styles.headerText, styles.pre]}
                                     shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport}
                                 />
-                                {!_.isEmpty(parentNavigationSubtitle) && (
-                                    <PressableWithoutFeedback
-                                        onPress={() => {
-                                            Navigation.navigate(ROUTES.getReportRoute(props.report.parentReportID));
-                                        }}
-                                        style={[styles.alignSelfStart, styles.mw100]}
-                                        accessibilityLabel={parentNavigationSubtitle}
-                                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
-                                    >
-                                        <Text
-                                            style={[styles.optionAlternateText, styles.textLabelSupporting, styles.link]}
-                                            numberOfLines={1}
-                                        >
-                                            {parentNavigationSubtitle}
-                                        </Text>
-                                    </PressableWithoutFeedback>
+                                {!_.isEmpty(parentNavigationSubtitleData) && (
+                                    <ParentNavigationSubtitle
+                                        parentNavigationSubtitleData={parentNavigationSubtitleData}
+                                        parentReportID={props.report.parentReportID}
+                                        pressableStyles={[styles.alignSelfStart, styles.mw100]}
+                                    />
                                 )}
                                 {!_.isEmpty(subtitle) && (
                                     <Text