diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 5811bf7e08f6..9281f6276134 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -240,6 +240,7 @@ const SCREENS = {
         TRANSACTION_DUPLICATE: 'TransactionDuplicate',
         TRAVEL: 'Travel',
         SEARCH_REPORT: 'SearchReport',
+        SEARCH_MONEY_REQUEST_REPORT: 'SearchMoneyRequestReport',
         SEARCH_ADVANCED_FILTERS: 'SearchAdvancedFilters',
         SEARCH_SAVED_SEARCH: 'SearchSavedSearch',
         SETTINGS_CATEGORIES: 'SettingsCategories',
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 27d37a52bab3..bc1dabcd30ed 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -40,7 +40,7 @@ import Log from '@libs/Log';
 import {getThreadReportIDsForTransactions, getTotalAmountForIOUReportPreviewButton} from '@libs/MoneyRequestReportUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
-import type {ReportsSplitNavigatorParamList, SearchFullscreenNavigatorParamList, SearchReportParamList} from '@libs/Navigation/types';
+import type {ReportsSplitNavigatorParamList, SearchReportParamList} from '@libs/Navigation/types';
 import {buildOptimisticNextStepForPreventSelfApprovalsEnabled, buildOptimisticNextStepForStrictPolicyRuleViolations} from '@libs/NextStepUtils';
 import type {KYCFlowEvent, TriggerKYCFlow} from '@libs/PaymentUtils';
 import {selectPaymentType} from '@libs/PaymentUtils';
@@ -183,7 +183,7 @@ function MoneyReportHeader({
     const shouldDisplayNarrowVersion = shouldUseNarrowLayout || isMediumScreenWidth;
     const route = useRoute<
         | PlatformStackRouteProp<ReportsSplitNavigatorParamList, typeof SCREENS.REPORT>
-        | PlatformStackRouteProp<SearchFullscreenNavigatorParamList, typeof SCREENS.SEARCH.MONEY_REQUEST_REPORT>
+        | PlatformStackRouteProp<SearchReportParamList, typeof SCREENS.SEARCH.MONEY_REQUEST_REPORT>
         | PlatformStackRouteProp<SearchReportParamList, typeof SCREENS.SEARCH.REPORT_RHP>
     >();
     const {login: currentUserLogin, accountID, email} = useCurrentUserPersonalDetails();
diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
index 9e816cf999ec..b06e5e3396dc 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
@@ -1,11 +1,15 @@
 import {PortalHost} from '@gorhom/portal';
 import React, {useCallback, useMemo} from 'react';
-import {InteractionManager, View} from 'react-native';
+// We use Animated for all functionality related to wide RHP to make it easier
+// to interact with react-navigation components (e.g., CardContainer, interpolator), which also use Animated.
+// eslint-disable-next-line no-restricted-imports
+import {Animated, InteractionManager, ScrollView, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import HeaderGap from '@components/HeaderGap';
 import MoneyReportHeader from '@components/MoneyReportHeader';
 import MoneyRequestHeader from '@components/MoneyRequestHeader';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import MoneyRequestReceiptView from '@components/ReportActionItem/MoneyRequestReceiptView';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
 import useNetwork from '@hooks/useNetwork';
@@ -13,6 +17,7 @@ import useNewTransactions from '@hooks/useNewTransactions';
 import useOnyx from '@hooks/useOnyx';
 import usePaginatedReportActions from '@hooks/usePaginatedReportActions';
 import useParentReportAction from '@hooks/useParentReportAction';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
 import {removeFailedReport} from '@libs/actions/Report';
@@ -84,6 +89,9 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
 
+    const {isSmallScreenWidth} = useResponsiveLayout();
+
+    const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
     const reportID = report?.reportID;
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true});
     const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`, {canBeMissing: true});
@@ -129,6 +137,9 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
     const isEmptyTransactionReport = visibleTransactions && visibleTransactions.length === 0 && transactionThreadReportID === undefined;
     const shouldDisplayMoneyRequestActionsList = !!isEmptyTransactionReport || shouldDisplayReportTableView(report, visibleTransactions ?? []);
 
+    const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`, {canBeMissing: true});
+    const shouldShowWideRHPReceipt = visibleTransactions.length === 1 && !isSmallScreenWidth && !!transactionThreadReport;
+
     const reportHeaderView = useMemo(
         () =>
             isTransactionThreadView ? (
@@ -211,47 +222,61 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
             >
                 <HeaderGap />
                 {reportHeaderView}
-                <View style={[styles.overflowHidden, styles.justifyContentEnd, styles.flex1]}>
-                    {shouldDisplayMoneyRequestActionsList ? (
-                        <MoneyRequestReportActionsList
-                            report={report}
-                            policy={policy}
-                            transactions={visibleTransactions}
-                            hasPendingDeletionTransaction={hasPendingDeletionTransaction}
-                            newTransactions={newTransactions}
-                            reportActions={reportActions}
-                            violations={allReportViolations}
-                            hasOlderActions={hasOlderActions}
-                            hasNewerActions={hasNewerActions}
-                            showReportActionsLoadingState={isLoadingInitialReportActions && !reportMetadata?.hasOnceLoadedReportActions}
-                        />
-                    ) : (
-                        <ReportActionsView
-                            report={report}
-                            reportActions={reportActions}
-                            isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions}
-                            hasNewerActions={hasNewerActions}
-                            hasOlderActions={hasOlderActions}
-                            parentReportAction={parentReportAction}
-                            transactionThreadReportID={transactionThreadReportID}
-                        />
+                <View style={[styles.flex1, styles.flexRow]}>
+                    {shouldShowWideRHPReceipt && (
+                        <Animated.View style={styles.wideRHPMoneyRequestReceiptViewContainer}>
+                            <ScrollView contentContainerStyle={styles.wideRHPMoneyRequestReceiptViewScrollViewContainer}>
+                                <MoneyRequestReceiptView
+                                    allReports={allReports}
+                                    report={transactionThreadReport}
+                                    fillSpace
+                                    isDisplayedInWideRHP
+                                />
+                            </ScrollView>
+                        </Animated.View>
                     )}
-                    {shouldDisplayReportFooter ? (
-                        <>
-                            <ReportFooter
+                    <View style={[[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]]}>
+                        {shouldDisplayMoneyRequestActionsList ? (
+                            <MoneyRequestReportActionsList
                                 report={report}
-                                reportMetadata={reportMetadata}
                                 policy={policy}
-                                pendingAction={reportPendingAction}
-                                isComposerFullSize={!!isComposerFullSize}
-                                lastReportAction={lastReportAction}
-                                reportTransactions={transactions}
-                                // If the report is from the 'Send Money' flow, we add the comment to the `iou` report because for these we don't combine reportActions even if there is a single transaction (they always have a single transaction)
-                                transactionThreadReportID={isSentMoneyReport ? undefined : transactionThreadReportID}
+                                transactions={visibleTransactions}
+                                hasPendingDeletionTransaction={hasPendingDeletionTransaction}
+                                newTransactions={newTransactions}
+                                reportActions={reportActions}
+                                violations={allReportViolations}
+                                hasOlderActions={hasOlderActions}
+                                hasNewerActions={hasNewerActions}
+                                showReportActionsLoadingState={isLoadingInitialReportActions && !reportMetadata?.hasOnceLoadedReportActions}
+                            />
+                        ) : (
+                            <ReportActionsView
+                                report={report}
+                                reportActions={reportActions}
+                                isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions}
+                                hasNewerActions={hasNewerActions}
+                                hasOlderActions={hasOlderActions}
+                                parentReportAction={parentReportAction}
+                                transactionThreadReportID={transactionThreadReportID}
                             />
-                            <PortalHost name="suggestions" />
-                        </>
-                    ) : null}
+                        )}
+                        {shouldDisplayReportFooter ? (
+                            <>
+                                <ReportFooter
+                                    report={report}
+                                    reportMetadata={reportMetadata}
+                                    policy={policy}
+                                    pendingAction={reportPendingAction}
+                                    isComposerFullSize={!!isComposerFullSize}
+                                    lastReportAction={lastReportAction}
+                                    reportTransactions={transactions}
+                                    // If the report is from the 'Send Money' flow, we add the comment to the `iou` report because for these we don't combine reportActions even if there is a single transaction (they always have a single transaction)
+                                    transactionThreadReportID={isSentMoneyReport ? undefined : transactionThreadReportID}
+                                />
+                                <PortalHost name="suggestions" />
+                            </>
+                        ) : null}
+                    </View>
                 </View>
             </OfflineWithFeedback>
         </View>
diff --git a/src/components/WideRHPContextProvider/index.tsx b/src/components/WideRHPContextProvider/index.tsx
index 07a327d95719..70c2c4d47422 100644
--- a/src/components/WideRHPContextProvider/index.tsx
+++ b/src/components/WideRHPContextProvider/index.tsx
@@ -1,5 +1,5 @@
-import {findFocusedRoute, StackActions, useNavigation, useRoute} from '@react-navigation/native';
 import type {NavigationState, PartialState} from '@react-navigation/native';
+import {findFocusedRoute, StackActions, useNavigation, useRoute} from '@react-navigation/native';
 import React, {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react';
 // We use Animated for all functionality related to wide RHP to make it easier
 // to interact with react-navigation components (e.g., CardContainer, interpolator), which also use Animated.
@@ -23,8 +23,11 @@ import type {WideRHPContextType} from './types';
 // 0 is folded/hidden, 1 is expanded/shown
 const expandedRHPProgress = new Animated.Value(0);
 const secondOverlayProgress = new Animated.Value(0);
+const thirdOverlayProgress = new Animated.Value(0);
 
-const wideRHPMaxWidth = variables.receiptPaneRHPMaxWidth + variables.sideBarWidth;
+const singleRHPWidth = variables.sideBarWidth;
+const wideRHPMaxWidth = variables.receiptPaneRHPMaxWidth + singleRHPWidth;
+const sidebarWidth = variables.sideBarWithLHBWidth + variables.navigationTabBarSize;
 
 /**
  * Utility function that extracts all unique navigation keys from a React Navigation state.
@@ -71,11 +74,30 @@ function extractNavigationKeys(state: NavigationState | PartialState<NavigationS
 const calculateReceiptPaneRHPWidth = (windowWidth: number) => {
     const calculatedWidth = windowWidth < wideRHPMaxWidth ? variables.receiptPaneRHPMaxWidth - (wideRHPMaxWidth - windowWidth) : variables.receiptPaneRHPMaxWidth;
 
-    return Math.max(calculatedWidth, variables.mobileResponsiveWidthBreakpoint - variables.sideBarWidth);
+    return Math.max(calculatedWidth, variables.mobileResponsiveWidthBreakpoint - singleRHPWidth);
+};
+
+/**
+ * Calculates the optimal width for the super wide RHP based on window width.
+ * Ensures the RHP doesn't exceed maximum width and maintains minimum responsive width.
+ *
+ * @param windowWidth - Current window width in pixels
+ * @returns Calculated super wide RHP width with constraints applied
+ */
+const calculateSuperWideRHPWidth = (windowWidth: number) => {
+    const SuperWideRHPWidth = windowWidth - variables.navigationTabBarSize - variables.sideBarWithLHBWidth;
+    const wideRHPWidth = calculateReceiptPaneRHPWidth(windowWidth) + variables.sideBarWidth;
+
+    return Math.max(Math.min(SuperWideRHPWidth, variables.superWideRHPMaxWidth), wideRHPWidth);
 };
 
 // This animated value is necessary to have a responsive RHP width for the range 800px to 840px.
 const receiptPaneRHPWidth = new Animated.Value(calculateReceiptPaneRHPWidth(Dimensions.get('window').width));
+const superWideRHPWidth = new Animated.Value(calculateSuperWideRHPWidth(Dimensions.get('window').width));
+
+const wideRHPWidth = new Animated.Value(calculateReceiptPaneRHPWidth(Dimensions.get('window').width) + singleRHPWidth);
+const modalStackOverlayWideRHPWidth = new Animated.Value(Dimensions.get('window').width - sidebarWidth - calculateReceiptPaneRHPWidth(Dimensions.get('window').width - singleRHPWidth));
+const modalStackOverlaySuperWideRHPWidth = new Animated.Value(Dimensions.get('window').width - sidebarWidth - singleRHPWidth);
 
 const WideRHPContext = createContext<WideRHPContextType>(defaultWideRHPContextValue);
 
@@ -95,8 +117,12 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
     // We have a separate containers for allWideRHPRouteKeys and wideRHPRouteKeys because we may have two or more RHPs on the stack.
     // For convenience and proper overlay logic wideRHPRouteKeys will show only the keys existing in the last RHP.
     const [allWideRHPRouteKeys, setAllWideRHPRouteKeys] = useState<string[]>([]);
+    const [superWideRHPRouteKeys, setSuperWideRHPRouteKeys] = useState<string[]>([]);
     const [shouldRenderSecondaryOverlay, setShouldRenderSecondaryOverlay] = useState(false);
+    const [shouldRenderThirdOverlay, setShouldRenderThirdOverlay] = useState(false);
     const [expenseReportIDs, setExpenseReportIDs] = useState<Set<string>>(new Set());
+
+    const focusedRouteKey = useRootNavigationState((state) => findFocusedRoute(state))?.key;
     const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: expenseReportSelector, canBeMissing: true});
 
     // Return undefined if RHP is not the last route
@@ -135,6 +161,10 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
         return currentKeys;
     }, [allWideRHPRouteKeys, lastVisibleRHPRouteKey]);
 
+    const isWideRhpFocused = useMemo(() => {
+        return focusedRouteKey && wideRHPRouteKeys.includes(focusedRouteKey);
+    }, [focusedRouteKey, wideRHPRouteKeys]);
+
     /**
      * Determines whether the secondary overlay should be displayed.
      * Shows second overlay when RHP is open and there is a wide RHP route open but there is another regular route on the top.
@@ -153,6 +183,14 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
             return false;
         }
 
+        if (superWideRHPRouteKeys.includes(focusedRoute.key) && wideRHPRouteKeys.length > 0) {
+            return false;
+        }
+
+        if (superWideRHPRouteKeys.length > 0 && !superWideRHPRouteKeys.includes(focusedRoute.key) && isRHPLastRootRoute && focusedRoute.name !== SCREENS.SEARCH.MONEY_REQUEST_REPORT) {
+            return true;
+        }
+
         // Check the focused route to avoid glitching when quickly close and open RHP.
         if (wideRHPRouteKeys.length > 0 && !wideRHPRouteKeys.includes(focusedRoute.key) && isRHPLastRootRoute && focusedRoute.name !== SCREENS.SEARCH.REPORT_RHP) {
             return true;
@@ -161,6 +199,28 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
         return false;
     });
 
+    const shouldShowThirdOverlay = useRootNavigationState((state) => {
+        // Safe handling when navigation is not yet initialized
+        if (!state) {
+            return false;
+        }
+
+        const focusedRoute = findFocusedRoute(state);
+        const isRHPLastRootRoute = state?.routes.at(-1)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR;
+
+        // Shouldn't ever happen but for type safety
+        if (!focusedRoute?.key) {
+            return false;
+        }
+
+        const isSuperWideRhpDisplayedBelow =
+            superWideRHPRouteKeys.length > 0 && !superWideRHPRouteKeys.includes(focusedRoute.key) && focusedRoute.name !== SCREENS.SEARCH.MONEY_REQUEST_REPORT;
+        const isWideRhpDisplayedBelow = wideRHPRouteKeys.length > 0 && !wideRHPRouteKeys.includes(focusedRoute.key) && focusedRoute.name !== SCREENS.SEARCH.REPORT_RHP;
+
+        // Check the focused route to avoid glitching when quickly close and open RHP.
+        return isSuperWideRhpDisplayedBelow && isWideRhpDisplayedBelow && isRHPLastRootRoute;
+    });
+
     /**
      * Adds a route to the wide RHP route keys list, enabling wide RHP display for that route.
      */
@@ -173,9 +233,25 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
         const newKey = route.key;
 
         // If the key is in the array, don't add it.
+        // Ensure mutual exclusivity: remove key from other array if present
+        setSuperWideRHPRouteKeys((prev) => (prev.includes(newKey) ? prev.filter((key) => key !== newKey) : prev));
         setAllWideRHPRouteKeys((prev) => (prev.includes(newKey) ? prev : [newKey, ...prev]));
     }, []);
 
+    const showSuperWideRHPVersion = useCallback((route: NavigationRoute) => {
+        if (!route.key) {
+            console.error(`The route passed to showWideRHPVersion should have the "key" property defined.`);
+            return;
+        }
+
+        const newKey = route.key;
+
+        // If the key is in the array, don't add it.
+        // Ensure mutual exclusivity: remove key from other array if present
+        setAllWideRHPRouteKeys((prev) => (prev.includes(newKey) ? prev.filter((key) => key !== newKey) : prev));
+        setSuperWideRHPRouteKeys((prev) => (prev.includes(newKey) ? prev : [newKey, ...prev]));
+    }, []);
+
     /**
      * Removes a route from the wide RHP route keys list, disabling wide RHP display for that route.
      */
@@ -189,13 +265,14 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
             const keyToRemove = route.key;
 
             // Do nothing, the key is not here
-            if (!allWideRHPRouteKeys.includes(keyToRemove)) {
+            if (!allWideRHPRouteKeys.includes(keyToRemove) && !superWideRHPRouteKeys.includes(keyToRemove)) {
                 return;
             }
 
             setAllWideRHPRouteKeys((prev) => (prev.includes(keyToRemove) ? prev.filter((key) => key !== keyToRemove) : prev));
+            setSuperWideRHPRouteKeys((prev) => (prev.includes(keyToRemove) ? prev.filter((key) => key !== keyToRemove) : prev));
         },
-        [allWideRHPRouteKeys],
+        [allWideRHPRouteKeys, superWideRHPRouteKeys],
     );
 
     /**
@@ -256,12 +333,14 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
      * Effect that shows/hides the expanded RHP progress based on the number of wide RHP routes.
      */
     useEffect(() => {
-        if (wideRHPRouteKeys.length > 0) {
+        if (superWideRHPRouteKeys.length > 0) {
+            expandedRHPProgress.setValue(2);
+        } else if (wideRHPRouteKeys.length > 0) {
             expandedRHPProgress.setValue(1);
         } else {
             expandedRHPProgress.setValue(0);
         }
-    }, [wideRHPRouteKeys.length]);
+    }, [superWideRHPRouteKeys.length, wideRHPRouteKeys.length]);
 
     /**
      * Effect that manages the secondary overlay animation and rendering state.
@@ -285,6 +364,28 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
         }
     }, [shouldShowSecondaryOverlay]);
 
+    /**
+     * Effect that manages the secondary overlay animation and rendering state.
+     */
+    useEffect(() => {
+        if (shouldShowThirdOverlay) {
+            setShouldRenderThirdOverlay(true);
+            Animated.timing(thirdOverlayProgress, {
+                toValue: 1,
+                duration: 300,
+                useNativeDriver: false,
+            }).start();
+        } else {
+            Animated.timing(thirdOverlayProgress, {
+                toValue: 0,
+                duration: 300,
+                useNativeDriver: false,
+            }).start(() => {
+                setShouldRenderThirdOverlay(false);
+            });
+        }
+    }, [shouldShowThirdOverlay]);
+
     /**
      * Effect that handles responsive RHP width calculation when window dimensions change.
      * Listens for dimension changes and recalculates the optimal RHP width accordingly.
@@ -292,9 +393,14 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
     useEffect(() => {
         const handleDimensionChange = () => {
             const windowWidth = Dimensions.get('window').width;
-            const newWidth = calculateReceiptPaneRHPWidth(windowWidth);
-
-            receiptPaneRHPWidth.setValue(newWidth);
+            const newReceiptPaneRHPWidth = calculateReceiptPaneRHPWidth(windowWidth);
+            const newSuperWideRHPWidth = calculateSuperWideRHPWidth(windowWidth);
+            const newWideRHPWidth = newReceiptPaneRHPWidth + singleRHPWidth;
+            receiptPaneRHPWidth.setValue(newReceiptPaneRHPWidth);
+            wideRHPWidth.setValue(newWideRHPWidth);
+            modalStackOverlayWideRHPWidth.setValue(windowWidth - newWideRHPWidth - sidebarWidth);
+            modalStackOverlaySuperWideRHPWidth.setValue(windowWidth - sidebarWidth - singleRHPWidth);
+            superWideRHPWidth.setValue(newSuperWideRHPWidth);
         };
 
         // Set initial value
@@ -311,15 +417,32 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
         () => ({
             expandedRHPProgress,
             wideRHPRouteKeys,
+            superWideRHPRouteKeys,
             showWideRHPVersion,
+            showSuperWideRHPVersion,
             cleanWideRHPRouteKey,
             secondOverlayProgress,
+            thirdOverlayProgress,
             shouldRenderSecondaryOverlay,
+            shouldRenderThirdOverlay,
             dismissToWideReport,
             markReportIDAsExpense,
             isReportIDMarkedAsExpense,
+            isWideRhpFocused,
         }),
-        [wideRHPRouteKeys, showWideRHPVersion, cleanWideRHPRouteKey, shouldRenderSecondaryOverlay, dismissToWideReport, markReportIDAsExpense, isReportIDMarkedAsExpense],
+        [
+            wideRHPRouteKeys,
+            superWideRHPRouteKeys,
+            showWideRHPVersion,
+            showSuperWideRHPVersion,
+            cleanWideRHPRouteKey,
+            shouldRenderSecondaryOverlay,
+            shouldRenderThirdOverlay,
+            dismissToWideReport,
+            markReportIDAsExpense,
+            isReportIDMarkedAsExpense,
+            isWideRhpFocused,
+        ],
     );
 
     return <WideRHPContext.Provider value={value}>{children}</WideRHPContext.Provider>;
@@ -366,8 +489,54 @@ function useShowWideRHPVersion(condition: boolean) {
     }, [condition, reportID, isReportIDMarkedAsExpense, route, showWideRHPVersion]);
 }
 
+function useShowSuperWideRHPVersion(condition: boolean) {
+    const navigation = useNavigation();
+    const route = useRoute();
+    const reportID = route.params && 'reportID' in route.params && typeof route.params.reportID === 'string' ? route.params.reportID : '';
+    const {showWideRHPVersion, showSuperWideRHPVersion, cleanWideRHPRouteKey, isReportIDMarkedAsExpense} = useContext(WideRHPContext);
+
+    /**
+     * Effect that sets up cleanup when the screen is about to be removed.
+     * Uses InteractionManager to ensure cleanup happens after closing animation.
+     */
+    useEffect(() => {
+        return navigation.addListener('beforeRemove', () => {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            InteractionManager.runAfterInteractions(() => {
+                cleanWideRHPRouteKey(route);
+            });
+        });
+    }, [cleanWideRHPRouteKey, navigation, route]);
+
+    /**
+     * Effect that determines whether to show wide RHP based on condition or optimistic state.
+     * Shows wide RHP if either the condition is true OR the reportID is marked as an expense.
+     */
+    useEffect(() => {
+        // Check if we should show wide RHP based on condition OR if reportID is in optimistic set
+        if (!condition) {
+            showWideRHPVersion(route);
+            return;
+        }
+        showSuperWideRHPVersion(route);
+    }, [condition, reportID, isReportIDMarkedAsExpense, route, showWideRHPVersion, showSuperWideRHPVersion]);
+}
+
 WideRHPContextProvider.displayName = 'WideRHPContextProvider';
 
 export default WideRHPContextProvider;
 
-export {expandedRHPProgress, receiptPaneRHPWidth, secondOverlayProgress, useShowWideRHPVersion, WideRHPContext, extractNavigationKeys};
+export {
+    calculateReceiptPaneRHPWidth,
+    calculateSuperWideRHPWidth,
+    extractNavigationKeys,
+    superWideRHPWidth,
+    modalStackOverlaySuperWideRHPWidth,
+    modalStackOverlayWideRHPWidth,
+    receiptPaneRHPWidth,
+    secondOverlayProgress,
+    useShowSuperWideRHPVersion,
+    useShowWideRHPVersion,
+    WideRHPContext,
+    wideRHPWidth,
+};
diff --git a/src/components/WideRHPContextProvider/types.ts b/src/components/WideRHPContextProvider/types.ts
index 630195bda6ad..9318e8f10cb8 100644
--- a/src/components/WideRHPContextProvider/types.ts
+++ b/src/components/WideRHPContextProvider/types.ts
@@ -6,18 +6,30 @@ type WideRHPContextType = {
     // Route keys of screens that should be displayed in wide format
     wideRHPRouteKeys: string[];
 
-    // Progress of changing format: 0 - narrow, 1 - wide
+    // Route keys of screens that should be displayed in super wide format
+    superWideRHPRouteKeys: string[];
+
+    // Progress of changing format: 0 - narrow, 1 - wide, 2 - super-wide
     expandedRHPProgress: Animated.Value;
 
     // Progress of the secondary overlay, the one covering wider RHP screen
     secondOverlayProgress: Animated.Value;
 
+    // Progress of the secondary overlay, the one covering wider RHP screen
+    thirdOverlayProgress: Animated.Value;
+
     // If the secondary overlay should be rendered. This value takes into account the delay of closing transition.
     shouldRenderSecondaryOverlay: boolean;
 
+    // If the secondary overlay should be rendered. This value takes into account the delay of closing transition.
+    shouldRenderThirdOverlay: boolean;
+
     // Show given route as in wide format
     showWideRHPVersion: (route: NavigationRoute) => void;
 
+    // Show given route as in super wide format
+    showSuperWideRHPVersion: (route: NavigationRoute) => void;
+
     // Remove given route from the array
     cleanWideRHPRouteKey: (route: NavigationRoute) => void;
 
@@ -29,6 +41,9 @@ type WideRHPContextType = {
 
     // Navigate to the last element in wideRHPRouteKeys array
     dismissToWideReport: () => void;
+
+    // Whether the currently focused route is inside the wide RHP set
+    isWideRhpFocused: boolean;
 };
 
 // eslint-disable-next-line import/prefer-default-export
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
index bdc9bebdbf54..ce8c10ef28f7 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -1,8 +1,8 @@
-import {useRoute} from '@react-navigation/native';
+import {useIsFocused, useRoute} from '@react-navigation/native';
 import type {ParamListBase} from '@react-navigation/routers';
 import React, {useCallback, useContext} from 'react';
 import {View} from 'react-native';
-import {WideRHPContext} from '@components/WideRHPContextProvider';
+import {modalStackOverlaySuperWideRHPWidth, modalStackOverlayWideRHPWidth, receiptPaneRHPWidth, WideRHPContext, wideRHPWidth} from '@components/WideRHPContextProvider';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay';
@@ -35,6 +35,7 @@ import type {
     RoomMembersNavigatorParamList,
     ScheduleCallParamList,
     SearchAdvancedFiltersParamList,
+    SearchMoneyRequestReportParamList,
     SearchReportParamList,
     SearchSavedSearchParamList,
     SetDefaultWorkspaceNavigatorParamList,
@@ -50,6 +51,7 @@ import type {
     WorkspaceConfirmationNavigatorParamList,
     WorkspaceDuplicateNavigatorParamList,
 } from '@navigation/types';
+import variables from '@styles/variables';
 import type {Screen} from '@src/SCREENS';
 import SCREENS from '@src/SCREENS';
 import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
@@ -92,9 +94,11 @@ function createModalStackNavigator<ParamList extends ParamListBase>(screens: Scr
     function ModalStack() {
         const styles = useThemeStyles();
         const screenOptions = useModalStackScreenOptions();
-        const {secondOverlayProgress, shouldRenderSecondaryOverlay} = useContext(WideRHPContext);
+        const {secondOverlayProgress, shouldRenderSecondaryOverlay, thirdOverlayProgress, shouldRenderThirdOverlay, isWideRhpFocused} = useContext(WideRHPContext);
         const route = useRoute();
 
+        const isFocused = useIsFocused();
+
         // We have to use the isSmallScreenWidth instead of shouldUseNarrow layout, because we want to have information about screen width without the context of side modal.
         // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
         const {isSmallScreenWidth} = useResponsiveLayout();
@@ -124,11 +128,29 @@ function createModalStackNavigator<ParamList extends ParamListBase>(screens: Scr
                         />
                     ))}
                 </ModalStackNavigator.Navigator>
-                {!isSmallScreenWidth && shouldRenderSecondaryOverlay && route.name === SCREENS.RIGHT_MODAL.SEARCH_REPORT ? (
+                {!isSmallScreenWidth && shouldRenderSecondaryOverlay && route.name === SCREENS.RIGHT_MODAL.SEARCH_REPORT && !isFocused && !shouldRenderThirdOverlay ? (
                     // This overlay is necessary to cover the gap under the narrow format RHP screen
                     <Overlay
                         progress={secondOverlayProgress}
-                        hasMarginLeft
+                        positionLeftValue={receiptPaneRHPWidth}
+                    />
+                ) : null}
+                {!isSmallScreenWidth && shouldRenderSecondaryOverlay && route.name === SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT && !!isWideRhpFocused && !isFocused ? (
+                    <Overlay
+                        progress={secondOverlayProgress}
+                        positionLeftValue={modalStackOverlayWideRHPWidth}
+                    />
+                ) : null}
+                {!isSmallScreenWidth && shouldRenderSecondaryOverlay && route.name === SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT && !isWideRhpFocused && !isFocused ? (
+                    <Overlay
+                        progress={secondOverlayProgress}
+                        positionLeftValue={modalStackOverlaySuperWideRHPWidth}
+                    />
+                ) : null}
+                {!isSmallScreenWidth && shouldRenderThirdOverlay && route.name === SCREENS.RIGHT_MODAL.SEARCH_REPORT ? (
+                    <Overlay
+                        progress={thirdOverlayProgress}
+                        positionLeftValue={modalStackOverlaySuperWideRHPWidth}
                     />
                 ) : null}
             </View>
@@ -837,6 +859,10 @@ const SearchReportModalStackNavigator = createModalStackNavigator<SearchReportPa
     [SCREENS.SEARCH.TRANSACTIONS_CHANGE_REPORT_SEARCH_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchTransactionsChangeReport').default,
 });
 
+const SearchMoneyRequestReportNavigator = createModalStackNavigator<SearchMoneyRequestReportParamList>({
+    [SCREENS.SEARCH.MONEY_REQUEST_REPORT]: () => require<ReactComponentModule>('../../../../pages/Search/SearchMoneyRequestReportPage').default,
+});
+
 const SearchAdvancedFiltersModalStackNavigator = createModalStackNavigator<SearchAdvancedFiltersParamList>({
     [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchAdvancedFiltersPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersTypePage').default,
@@ -921,48 +947,49 @@ const ScheduleCallModalStackNavigator = createModalStackNavigator<ScheduleCallPa
 
 export {
     AddPersonalBankAccountModalStackNavigator,
+    AddUnreportedExpenseModalStackNavigator,
+    CategoriesModalStackNavigator,
+    ConsoleModalStackNavigator,
+    DebugModalStackNavigator,
+    DomainCardModalStackNavigator,
     EditRequestStackNavigator,
     EnablePaymentsStackNavigator,
+    ExpensifyCardModalStackNavigator,
     FlagCommentStackNavigator,
+    MergeTransactionStackNavigator,
+    MissingPersonalDetailsModalStackNavigator,
     MoneyRequestModalStackNavigator,
     NewChatModalStackNavigator,
+    NewReportWorkspaceSelectionModalStackNavigator,
     NewTaskModalStackNavigator,
     NewTeachersUniteNavigator,
     PrivateNotesModalStackNavigator,
     ProfileModalStackNavigator,
     ReferralModalStackNavigator,
-    TravelModalStackNavigator,
-    NewReportWorkspaceSelectionModalStackNavigator,
-    SetDefaultWorkspaceModalStackNavigator,
+    ReportChangeApproverModalStackNavigator,
+    ReportChangeWorkspaceModalStackNavigator,
     ReportDescriptionModalStackNavigator,
     ReportDetailsModalStackNavigator,
-    ReportChangeWorkspaceModalStackNavigator,
-    ReportChangeApproverModalStackNavigator,
     ReportParticipantsModalStackNavigator,
     ReportSettingsModalStackNavigator,
+    RestrictedActionModalStackNavigator,
     RoomMembersModalStackNavigator,
+    ScheduleCallModalStackNavigator,
+    SearchAdvancedFiltersModalStackNavigator,
+    SearchMoneyRequestReportNavigator,
+    SearchReportModalStackNavigator,
+    SearchSavedSearchModalStackNavigator,
+    SetDefaultWorkspaceModalStackNavigator,
     SettingsModalStackNavigator,
-    TwoFactorAuthenticatorStackNavigator,
+    ShareModalStackNavigator,
     SignInModalStackNavigator,
-    CategoriesModalStackNavigator,
-    TagsModalStackNavigator,
-    ExpensifyCardModalStackNavigator,
-    DomainCardModalStackNavigator,
     SplitDetailsModalStackNavigator,
+    TagsModalStackNavigator,
     TaskModalStackNavigator,
-    WalletStatementStackNavigator,
     TransactionDuplicateStackNavigator,
-    SearchReportModalStackNavigator,
-    RestrictedActionModalStackNavigator,
-    SearchAdvancedFiltersModalStackNavigator,
-    ShareModalStackNavigator,
-    SearchSavedSearchModalStackNavigator,
-    MissingPersonalDetailsModalStackNavigator,
-    DebugModalStackNavigator,
+    TravelModalStackNavigator,
+    TwoFactorAuthenticatorStackNavigator,
+    WalletStatementStackNavigator,
     WorkspaceConfirmationModalStackNavigator,
     WorkspaceDuplicateModalStackNavigator,
-    ConsoleModalStackNavigator,
-    AddUnreportedExpenseModalStackNavigator,
-    ScheduleCallModalStackNavigator,
-    MergeTransactionStackNavigator,
 };
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts
index 7703f6712edd..4a80e00f7f76 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts
@@ -4,6 +4,7 @@ import {useCallback, useContext} from 'react';
 import {WideRHPContext} from '@components/WideRHPContextProvider';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import enhanceCardStyleInterpolator from '@libs/Navigation/AppNavigator/enhanceCardStyleInterpolator';
 import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe';
 import type {PlatformStackNavigationOptions, PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -16,17 +17,22 @@ function useModalStackScreenOptions() {
     // https://github.com/Expensify/App/issues/63747
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
-    const {wideRHPRouteKeys} = useContext(WideRHPContext);
+    const {wideRHPRouteKeys, superWideRHPRouteKeys} = useContext(WideRHPContext);
+    const {windowWidth} = useWindowDimensions();
 
     return useCallback<({route}: {route: PlatformStackRouteProp<ParamListBase, string>}) => PlatformStackNavigationOptions>(
         ({route}) => {
             let cardStyleInterpolator;
 
-            if (wideRHPRouteKeys.includes(route.key) && !isSmallScreenWidth) {
+            if (superWideRHPRouteKeys.includes(route.key) && !isSmallScreenWidth) {
+                cardStyleInterpolator = enhanceCardStyleInterpolator(CardStyleInterpolators.forHorizontalIOS, {
+                    cardStyle: styles.superWideRHPExtendedCardInterpolatorStyles(windowWidth),
+                });
+            } else if (wideRHPRouteKeys.includes(route.key) && !isSmallScreenWidth) {
                 // We need to use interpolator styles instead of regular card styles so we can use animated value for width.
                 // It is necessary to have responsive width of the wide RHP for range 800px to 840px.
                 cardStyleInterpolator = enhanceCardStyleInterpolator(CardStyleInterpolators.forHorizontalIOS, {
-                    cardStyle: styles.wideRHPExtendedCardInterpolatorStyles,
+                    cardStyle: styles.wideRHPExtendedCardInterpolatorStyles(windowWidth),
                 });
             } else {
                 cardStyleInterpolator = CardStyleInterpolators.forHorizontalIOS;
@@ -45,7 +51,7 @@ function useModalStackScreenOptions() {
                 },
             };
         },
-        [isSmallScreenWidth, styles.navigationScreenCardStyle, styles.wideRHPExtendedCardInterpolatorStyles, wideRHPRouteKeys],
+        [isSmallScreenWidth, styles, superWideRHPRouteKeys, wideRHPRouteKeys, windowWidth],
     );
 }
 
diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx
index eb760709ddbb..073804cb8669 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx
@@ -4,41 +4,32 @@ import React from 'react';
 import {Animated, View} from 'react-native';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useLocalize from '@hooks/useLocalize';
-import useSidePanel from '@hooks/useSidePanel';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {OverlayStylesParams} from '@styles/index';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
 type BaseOverlayProps = {
     /* Callback to close the modal */
     onPress?: () => void;
 
-    /* Whether there should be a gap on the right side. Necessary for the overlay that covers wider part of RHP. */
-    hasMarginRight?: boolean;
-
-    /* Whether there should be a gap on the left. Necessary for the overlay in modal stack navigator. */
-    hasMarginLeft?: boolean;
-
     /* Override the progress from useCardAnimation. Necessary for the secondary overlay */
     progress?: OverlayStylesParams;
+
+    positionLeftValue?: number | Animated.Value;
+
+    positionRightValue?: number | Animated.Value;
 };
 
-function BaseOverlay({onPress, hasMarginRight = false, progress, hasMarginLeft = false}: BaseOverlayProps) {
+function BaseOverlay({onPress, progress, positionLeftValue = -2 * variables.sideBarWidth, positionRightValue = 0}: BaseOverlayProps) {
     const styles = useThemeStyles();
     const {current} = useCardAnimation();
     const {translate} = useLocalize();
-    const {sidePanelTranslateX} = useSidePanel();
 
     return (
         <Animated.View
             id="BaseOverlay"
-            style={[
-                styles.pFixed,
-                styles.t0,
-                styles.b0,
-                styles.overlayBackground,
-                styles.overlayStyles({progress: progress ?? current.progress, hasMarginRight, hasMarginLeft, sidePanelTranslateX}),
-            ]}
+            style={[styles.pFixed, styles.t0, styles.b0, styles.overlayBackground, styles.overlayStyles({progress: progress ?? current.progress, positionLeftValue, positionRightValue})]}
         >
             <View style={[styles.flex1, styles.flexColumn]}>
                 {/* In the latest Electron version buttons can't be both clickable and draggable.
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
index 6c6e525903b3..121e52b5af9c 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
@@ -1,21 +1,21 @@
 import type {NavigatorScreenParams} from '@react-navigation/native';
 import React, {useCallback, useContext, useMemo, useRef} from 'react';
-// We use Animated for all functionality related to wide RHP to make it easier
-// to interact with react-navigation components (e.g., CardContainer, interpolator), which also use Animated.
 // eslint-disable-next-line no-restricted-imports
 import {Animated, InteractionManager} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
-import {expandedRHPProgress, WideRHPContext} from '@components/WideRHPContextProvider';
+import {calculateReceiptPaneRHPWidth, calculateSuperWideRHPWidth, WideRHPContext, wideRHPWidth} from '@components/WideRHPContextProvider';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import {abandonReviewDuplicateTransactions} from '@libs/actions/Transaction';
 import {clearTwoFactorAuthData} from '@libs/actions/TwoFactorAuthActions';
 import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe';
 import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
 import useRHPScreenOptions from '@libs/Navigation/AppNavigator/useRHPScreenOptions';
+import Navigation from '@libs/Navigation/Navigation';
 import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
@@ -26,12 +26,30 @@ type RightModalNavigatorProps = PlatformStackScreenProps<AuthScreensParamList, t
 
 const Stack = createPlatformStackNavigator<RightModalNavigatorParamList, string>();
 
+const singleRHPWidth = variables.sideBarWidth;
+const getWideRHPWidth = (windowWidth: number) => variables.sideBarWidth + calculateReceiptPaneRHPWidth(windowWidth);
+
 function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
-    const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const isExecutingRef = useRef<boolean>(false);
     const screenOptions = useRHPScreenOptions();
-    const {shouldRenderSecondaryOverlay, secondOverlayProgress, dismissToWideReport} = useContext(WideRHPContext);
+    const {expandedRHPProgress, shouldRenderSecondaryOverlay, secondOverlayProgress, isWideRhpFocused, shouldRenderThirdOverlay, thirdOverlayProgress} = useContext(WideRHPContext);
+    const {windowWidth} = useWindowDimensions();
+
+    const animatedWidth = expandedRHPProgress.interpolate({
+        inputRange: [0, 1, 2],
+        outputRange: [singleRHPWidth, getWideRHPWidth(windowWidth), calculateSuperWideRHPWidth(windowWidth)],
+    });
+
+    const animatedStyle = useMemo(() => {
+        return {
+            height: '100%',
+            right: 0,
+            position: 'absolute',
+            overflow: 'hidden',
+            width: shouldUseNarrowLayout ? '100%' : (animatedWidth as unknown as number),
+        } as const;
+    }, [animatedWidth, shouldUseNarrowLayout]);
 
     const screenListeners = useMemo(
         () => ({
@@ -71,7 +89,7 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
                 {!shouldUseNarrowLayout && <Overlay onPress={handleOverlayPress} />}
                 {/* This one is to limit the outer Animated.View and allow the background to be pressable */}
                 {/* Without it, the transparent half of the narrow format RHP card would cover the pressable part of the overlay */}
-                <Animated.View style={[styles.animatedRHPNavigatorContainer, styles.animatedRHPNavigatorContainerWidth(shouldUseNarrowLayout, expandedRHPProgress)]}>
+                <Animated.View style={[animatedStyle]}>
                     <Stack.Navigator
                         screenOptions={screenOptions}
                         screenListeners={screenListeners}
@@ -232,6 +250,10 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
                             name={SCREENS.RIGHT_MODAL.SEARCH_REPORT}
                             component={ModalStackNavigators.SearchReportModalStackNavigator}
                         />
+                        <Stack.Screen
+                            name={SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT}
+                            component={ModalStackNavigators.SearchMoneyRequestReportNavigator}
+                        />
                         <Stack.Screen
                             name={SCREENS.RIGHT_MODAL.RESTRICTED_ACTION}
                             component={ModalStackNavigators.RestrictedActionModalStackNavigator}
@@ -260,11 +282,25 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
                 </Animated.View>
                 {/* The second overlay is here to cover the wide rhp screen underneath */}
                 {/* It has a gap on the right to make the last rhp route (narrow) visible and pressable */}
-                {shouldRenderSecondaryOverlay && !shouldUseNarrowLayout && (
+                {shouldRenderSecondaryOverlay && !shouldUseNarrowLayout && !isWideRhpFocused && (
+                    <Overlay
+                        progress={secondOverlayProgress}
+                        positionRightValue={variables.sideBarWidth}
+                        onPress={() => Navigation.closeRHPFlow()}
+                    />
+                )}
+                {shouldRenderSecondaryOverlay && !shouldUseNarrowLayout && !!isWideRhpFocused && (
                     <Overlay
-                        hasMarginRight
                         progress={secondOverlayProgress}
-                        onPress={dismissToWideReport}
+                        positionRightValue={wideRHPWidth}
+                        onPress={() => Navigation.closeRHPFlow()}
+                    />
+                )}
+                {shouldRenderThirdOverlay && !shouldUseNarrowLayout && (
+                    <Overlay
+                        progress={thirdOverlayProgress}
+                        positionRightValue={variables.sideBarWidth}
+                        onPress={() => Navigation.closeRHPFlow()}
                     />
                 )}
             </NoDropZone>
diff --git a/src/libs/Navigation/AppNavigator/Navigators/SearchFullscreenNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/SearchFullscreenNavigator.tsx
index 437208bd36db..f988fae0a49e 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/SearchFullscreenNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/SearchFullscreenNavigator.tsx
@@ -12,7 +12,6 @@ import SCREENS from '@src/SCREENS';
 import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
 
 const loadSearchPage = () => require<ReactComponentModule>('@pages/Search/SearchPage').default;
-const loadSearchMoneyReportPage = () => require<ReactComponentModule>('@pages/Search/SearchMoneyRequestReportPage').default;
 
 const Stack = createSearchFullscreenNavigator<SearchFullscreenNavigatorParamList>();
 
@@ -36,10 +35,6 @@ function SearchFullscreenNavigator({route}: PlatformStackScreenProps<AuthScreens
                     initialParams={{q: SearchQueryUtils.buildSearchQueryString()}}
                     options={{animation: Animations.NONE}}
                 />
-                <Stack.Screen
-                    name={SCREENS.SEARCH.MONEY_REQUEST_REPORT}
-                    getComponent={loadSearchMoneyReportPage}
-                />
             </Stack.Navigator>
         </FreezeWrapper>
     );
diff --git a/src/libs/Navigation/AppNavigator/useRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/useRootNavigatorScreenOptions.ts
index b5c8edca4100..afc2de926828 100644
--- a/src/libs/Navigation/AppNavigator/useRootNavigatorScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/useRootNavigatorScreenOptions.ts
@@ -1,12 +1,14 @@
 import type {StackCardInterpolationProps} from '@react-navigation/stack';
+import {useContext} from 'react';
 // We use Animated for all functionality related to wide RHP to make it easier
 // to interact with react-navigation components (e.g., CardContainer, interpolator), which also use Animated.
 // eslint-disable-next-line no-restricted-imports
 import {Animated} from 'react-native';
-import {expandedRHPProgress} from '@components/WideRHPContextProvider';
+import {WideRHPContext} from '@components/WideRHPContextProvider';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
 import Presentation from '@libs/Navigation/PlatformStackNavigation/navigationOptions/presentation';
 import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -28,12 +30,23 @@ const commonScreenOptions: PlatformStackNavigationOptions = {
     },
 };
 
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument */
+function abs(a: any) {
+    const b = Animated.multiply(a, -1);
+    const clampedA = Animated.diffClamp(a, 0, Number.MAX_SAFE_INTEGER);
+    const clampedB = Animated.diffClamp(b, 0, Number.MAX_SAFE_INTEGER);
+
+    return Animated.add(clampedA, clampedB);
+}
+
 const useRootNavigatorScreenOptions = () => {
     const StyleUtils = useStyleUtils();
     const modalCardStyleInterpolator = useModalCardStyleInterpolator();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const themeStyles = useThemeStyles();
+    const {expandedRHPProgress} = useContext(WideRHPContext);
+    const {windowWidth} = useWindowDimensions();
 
     return {
         rightModalNavigator: {
@@ -54,7 +67,16 @@ const useRootNavigatorScreenOptions = () => {
                         // Adjust output range to match the wide RHP size
                         outputRangeMultiplier: isSmallScreenWidth
                             ? undefined
-                            : Animated.add(Animated.multiply(expandedRHPProgress, variables.receiptPaneRHPMaxWidth / variables.sideBarWidth), 1),
+                            : Animated.add(
+                                  Animated.add(
+                                      Animated.multiply(Animated.subtract(1, abs(Animated.subtract(1, expandedRHPProgress))), variables.receiptPaneRHPMaxWidth / variables.sideBarWidth),
+                                      Animated.multiply(
+                                          expandedRHPProgress.interpolate({inputRange: [1, 2], outputRange: [0, 1], extrapolate: 'clamp'}),
+                                          (windowWidth - variables.navigationTabBarSize - variables.sideBarWithLHBWidth - variables.sideBarWidth) / variables.sideBarWidth,
+                                      ),
+                                  ),
+                                  1,
+                              ),
                     }),
             },
         },
diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/SEARCH_TO_RHP.ts b/src/libs/Navigation/linkingConfig/RELATIONS/SEARCH_TO_RHP.ts
index 3b92bce9df20..5a42e883304e 100644
--- a/src/libs/Navigation/linkingConfig/RELATIONS/SEARCH_TO_RHP.ts
+++ b/src/libs/Navigation/linkingConfig/RELATIONS/SEARCH_TO_RHP.ts
@@ -47,6 +47,7 @@ const SEARCH_TO_RHP: Partial<Record<keyof SearchFullscreenNavigatorParamList, st
         SCREENS.SEARCH.ADVANCED_FILTERS_PURCHASE_CURRENCY_RHP,
         SCREENS.SEARCH.ADVANCED_FILTERS_REPORT_FIELD_RHP,
         SCREENS.SEARCH.SAVED_SEARCH_RENAME_RHP,
+        SCREENS.SEARCH.MONEY_REQUEST_REPORT,
     ],
 };
 
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index ca0303aba72f..27daf73ae3b2 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -1558,6 +1558,11 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.SEARCH.TRANSACTIONS_CHANGE_REPORT_SEARCH_RHP]: ROUTES.MOVE_TRANSACTIONS_SEARCH_RHP,
                     },
                 },
+                [SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT]: {
+                    screens: {
+                        [SCREENS.SEARCH.MONEY_REQUEST_REPORT]: ROUTES.SEARCH_MONEY_REQUEST_REPORT.route,
+                    },
+                },
                 [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: {
                     screens: {
                         [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(),
@@ -1846,9 +1851,6 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                 [SCREENS.SEARCH.ROOT]: {
                     path: ROUTES.SEARCH_ROOT.route,
                 },
-                [SCREENS.SEARCH.MONEY_REQUEST_REPORT]: {
-                    path: ROUTES.SEARCH_MONEY_REQUEST_REPORT.route,
-                },
             },
         },
         [NAVIGATORS.SHARE_MODAL_NAVIGATOR]: {
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 873d60e713db..664a7d716dcd 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -2081,6 +2081,7 @@ type RightModalNavigatorParamList = {
     [SCREENS.RIGHT_MODAL.TRANSACTION_DUPLICATE]: NavigatorScreenParams<TransactionDuplicateNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.TRAVEL]: NavigatorScreenParams<TravelNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.SEARCH_REPORT]: NavigatorScreenParams<SearchReportParamList>;
+    [SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT]: NavigatorScreenParams<SearchMoneyRequestReportParamList>;
     [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: NavigatorScreenParams<RestrictedActionParamList>;
     [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: NavigatorScreenParams<SearchAdvancedFiltersParamList>;
     [SCREENS.RIGHT_MODAL.SEARCH_SAVED_SEARCH]: NavigatorScreenParams<SearchSavedSearchParamList>;
@@ -2573,17 +2574,20 @@ type SearchReportParamList = {
     };
 };
 
+type SearchMoneyRequestReportParamList = {
+    [SCREENS.SEARCH.MONEY_REQUEST_REPORT]: {
+        reportID: string;
+        // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md
+        backTo?: Routes;
+    };
+};
+
 type SearchFullscreenNavigatorParamList = {
     [SCREENS.SEARCH.ROOT]: {
         q: SearchQueryString;
         name?: string;
         groupBy?: string;
     };
-    [SCREENS.SEARCH.MONEY_REQUEST_REPORT]: {
-        reportID: string;
-        // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md
-        backTo?: Routes;
-    };
 };
 
 type SearchAdvancedFiltersParamList = {
@@ -2794,4 +2798,5 @@ export type {
     TestToolsModalModalNavigatorParamList,
     MergeTransactionNavigatorParamList,
     AttachmentModalScreensParamList,
+    SearchMoneyRequestReportParamList,
 };
diff --git a/src/pages/Search/SearchMoneyRequestReportPage.tsx b/src/pages/Search/SearchMoneyRequestReportPage.tsx
index c20ef96f56a2..7403b0b7c706 100644
--- a/src/pages/Search/SearchMoneyRequestReportPage.tsx
+++ b/src/pages/Search/SearchMoneyRequestReportPage.tsx
@@ -7,6 +7,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import MoneyRequestReportView from '@components/MoneyRequestReportView/MoneyRequestReportView';
 import ScreenWrapper from '@components/ScreenWrapper';
+import {useShowSuperWideRHPVersion} from '@components/WideRHPContextProvider';
 import useIsReportReadyToDisplay from '@hooks/useIsReportReadyToDisplay';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -18,7 +19,7 @@ import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViol
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getAllNonDeletedTransactions} from '@libs/MoneyRequestReportUtils';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
-import type {SearchFullscreenNavigatorParamList} from '@libs/Navigation/types';
+import type {SearchReportParamList} from '@libs/Navigation/types';
 import {getFilteredReportActionsForReportView, getIOUActionForTransactionID, getOneTransactionThreadReportID} from '@libs/ReportActionsUtils';
 import {isValidReportIDFromPath} from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
@@ -32,7 +33,7 @@ import type SCREENS from '@src/SCREENS';
 import type {Policy} from '@src/types/onyx';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
 
-type SearchMoneyRequestPageProps = PlatformStackScreenProps<SearchFullscreenNavigatorParamList, typeof SCREENS.SEARCH.MONEY_REQUEST_REPORT>;
+type SearchMoneyRequestPageProps = PlatformStackScreenProps<SearchReportParamList, typeof SCREENS.SEARCH.MONEY_REQUEST_REPORT>;
 
 const defaultReportMetadata = {
     isLoadingInitialReportActions: true,
@@ -78,6 +79,11 @@ function SearchMoneyRequestReportPage({route}: SearchMoneyRequestPageProps) {
 
     const reportID = report?.reportID;
 
+    // If there is more than one transaction, display the report in Super Wide RHP, otherwise it will be shown in Wide RHP
+    const shouldShowSuperWideRHP = visibleTransactions.length > 1;
+
+    useShowSuperWideRHPVersion(shouldShowSuperWideRHP);
+
     useEffect(() => {
         if (transactionThreadReportID === CONST.FAKE_REPORT_ID && oneTransactionID) {
             const iouAction = getIOUActionForTransactionID(reportActions, oneTransactionID);
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 6e0c1877a555..b614565d58c5 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -7,13 +7,13 @@ import type {ImageStyle, TextStyle, ViewStyle} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
 import {Animated, Platform, StyleSheet} from 'react-native';
 import type {PickerStyle} from 'react-native-picker-select';
-import {interpolate} from 'react-native-reanimated';
 import type {SharedValue} from 'react-native-reanimated';
+import {interpolate} from 'react-native-reanimated';
 import type {MixedStyleDeclaration, MixedStyleRecord} from 'react-native-render-html';
 import type {ValueOf} from 'type-fest';
 import type DotLottieAnimation from '@components/LottieAnimations/types';
 import {ACTIVE_LABEL_SCALE} from '@components/TextInput/styleConst';
-import {receiptPaneRHPWidth} from '@components/WideRHPContextProvider';
+import {calculateReceiptPaneRHPWidth, receiptPaneRHPWidth, superWideRHPWidth} from '@components/WideRHPContextProvider';
 import {getBrowser, isMobile, isMobileSafari, isSafari} from '@libs/Browser';
 import getPlatform from '@libs/getPlatform';
 import CONST from '@src/CONST';
@@ -5343,12 +5343,19 @@ const staticStyles = (theme: ThemeColors) =>
             backgroundColor: colors.green800,
         },
 
-        wideRHPExtendedCardInterpolatorStyles: {
+        wideRHPExtendedCardInterpolatorStyles: (windowWidth: number) => ({
             position: Platform.OS === 'web' ? 'fixed' : 'absolute',
             height: '100%',
             right: 0,
-            width: Animated.add(variables.sideBarWidth, receiptPaneRHPWidth),
-        },
+            width: Animated.add(variables.sideBarWidth, calculateReceiptPaneRHPWidth(windowWidth)),
+        }),
+
+        superWideRHPExtendedCardInterpolatorStyles: (windowWidth: number) => ({
+            position: Platform.OS === 'web' ? 'fixed' : 'absolute',
+            height: '100%',
+            right: 0,
+            width: superWideRHPWidth,
+        }),
 
         flexibleHeight: {
             height: 'auto',
@@ -5598,19 +5605,17 @@ const dynamicStyles = (theme: ThemeColors) =>
 
         overlayStyles: ({
             progress,
-            hasMarginRight = false,
-            hasMarginLeft = false,
-            sidePanelTranslateX,
+            positionLeftValue,
+            positionRightValue,
         }: {
             progress: OverlayStylesParams;
-            hasMarginRight?: boolean;
-            hasMarginLeft?: boolean;
-            sidePanelTranslateX?: RefObject<Animated.Value>;
+            positionLeftValue: number | Animated.Value;
+            positionRightValue: number | Animated.Value;
         }) =>
             ({
                 // We need to stretch the overlay to cover the sidebar and the translate animation distance.
-                left: hasMarginLeft ? receiptPaneRHPWidth : -2 * variables.sideBarWidth,
-                right: hasMarginRight ? Animated.add(variables.sideBarWidth, sidePanelTranslateX ? Animated.subtract(variables.sideBarWidth, sidePanelTranslateX.current) : 0) : 0,
+                left: positionLeftValue,
+                right: positionRightValue,
                 opacity: progress.interpolate({
                     inputRange: [0, 1],
                     outputRange: [0, variables.overlayOpacity],
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index ad067ed20605..d29541dc0210 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -102,6 +102,7 @@ export default {
     androidSafeAreaInsetsPercentage: 1,
     sideBarWidth: 375,
     receiptPaneRHPMaxWidth: 465,
+    superWideRHPMaxWidth: 1260,
     minScanTooltipWidth: 320,
     uploadViewMargin: 20,
     chooseFilesViewMargin: 8,
