diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js
index a3d8398a22b0..890db2b45ad4 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js
@@ -1,6 +1,8 @@
 import _ from 'underscore';
 import {StackRouter} from '@react-navigation/native';
+import lodashFindLast from 'lodash/findLast';
 import NAVIGATORS from '../../../../NAVIGATORS';
+import SCREENS from '../../../../SCREENS';
 
 /**
  * @param {Object} state - react-navigation state
@@ -8,6 +10,30 @@ import NAVIGATORS from '../../../../NAVIGATORS';
  */
 const isAtLeastOneCentralPaneNavigatorInState = (state) => _.find(state.routes, (r) => r.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR);
 
+/**
+ * @param {Object} state - react-navigation state
+ * @returns {String|undefined}
+ */
+const getTopMostReportIDFromRHP = (state) => {
+    if (!state) {
+        return;
+    }
+    const topmostRightPane = lodashFindLast(state.routes, (route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR);
+
+    if (topmostRightPane) {
+        return getTopMostReportIDFromRHP(topmostRightPane.state);
+    }
+
+    const topmostRoute = lodashFindLast(state.routes);
+
+    if (topmostRoute.state) {
+        return getTopMostReportIDFromRHP(topmostRoute.state);
+    }
+
+    if (topmostRoute.params && topmostRoute.params.reportID) {
+        return topmostRoute.params.reportID;
+    }
+};
 /**
  * Adds report route without any specific reportID to the state.
  * The report screen will self set proper reportID param based on the helper function findLastAccessedReport (look at ReportScreenWrapper for more info)
@@ -15,7 +41,21 @@ const isAtLeastOneCentralPaneNavigatorInState = (state) => _.find(state.routes,
  * @param {Object} state - react-navigation state
  */
 const addCentralPaneNavigatorRoute = (state) => {
-    state.routes.splice(1, 0, {name: NAVIGATORS.CENTRAL_PANE_NAVIGATOR});
+    const reportID = getTopMostReportIDFromRHP(state);
+    const centralPaneNavigatorRoute = {
+        name: NAVIGATORS.CENTRAL_PANE_NAVIGATOR,
+        state: {
+            routes: [
+                {
+                    name: SCREENS.REPORT,
+                    params: {
+                        reportID,
+                    },
+                },
+            ],
+        },
+    };
+    state.routes.splice(1, 0, centralPaneNavigatorRoute);
     // eslint-disable-next-line no-param-reassign
     state.index = state.routes.length - 1;
 };
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 42a535844c72..e1de310a1748 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -160,7 +160,18 @@ function ReportDetailsPage(props) {
     return (
         <ScreenWrapper testID={ReportDetailsPage.displayName}>
             <FullPageNotFoundView shouldShow={_.isEmpty(props.report)}>
-                <HeaderWithBackButton title={props.translate('common.details')} />
+                <HeaderWithBackButton
+                    title={props.translate('common.details')}
+                    onBackButtonPress={() => {
+                        const topMostReportID = Navigation.getTopmostReportId();
+                        if (topMostReportID) {
+                            Navigation.goBack(ROUTES.HOME);
+                            return;
+                        }
+                        Navigation.goBack();
+                        Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(props.report.reportID));
+                    }}
+                />
                 <ScrollView style={[styles.flex1]}>
                     <View style={styles.reportDetailsTitleContainer}>
                         <View style={styles.mb3}>