diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index d59dc927fdfe..b2add55c0d55 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -31,6 +31,7 @@ import {
     isInvoiceReport,
     isReportApproved,
     isReportOwner,
+    isWaitingForSubmissionFromCurrentUser as isWaitingForSubmissionFromCurrentUserReportUtils,
     navigateBackOnDeleteTransaction,
     reportTransactionsSelector,
 } from '@libs/ReportUtils';
@@ -363,10 +364,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         (!!statusBarProps || shouldShowNextStep);
 
     // The submit button should be success green colour only if the user is the submitter and the policy does not have Scheduled Submit turned on
-    const isWaitingForSubmissionFromCurrentUser = useMemo(
-        () => chatReport?.isOwnPolicyExpenseChat && !policy?.harvesting?.enabled,
-        [chatReport?.isOwnPolicyExpenseChat, policy?.harvesting?.enabled],
-    );
+    const isWaitingForSubmissionFromCurrentUser = useMemo(() => isWaitingForSubmissionFromCurrentUserReportUtils(chatReport, policy), [chatReport, policy]);
 
     const shouldDuplicateButtonBeSuccess = useMemo(
         () => isDuplicate && !shouldShowSettlementButton && !shouldShowExportIntegrationButton && !shouldShowSubmitButton && !shouldShowMarkAsCashButton,
diff --git a/src/components/MoneyRequestSkeletonView.tsx b/src/components/MoneyRequestSkeletonView.tsx
index 400e3c9534d7..5cc12066c250 100644
--- a/src/components/MoneyRequestSkeletonView.tsx
+++ b/src/components/MoneyRequestSkeletonView.tsx
@@ -10,6 +10,7 @@ function MoneyRequestSkeletonView() {
     const styles = useThemeStyles();
     return (
         <SkeletonViewContentLoader
+            testID={MoneyRequestSkeletonView.displayName}
             animate
             width={styles.w100.width}
             height={variables.moneyRequestSkeletonHeight}
diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
new file mode 100644
index 000000000000..ef3acfb1b298
--- /dev/null
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -0,0 +1,684 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {FlatList, View} from 'react-native';
+import type {LayoutChangeEvent, ListRenderItemInfo, ViewToken} from 'react-native';
+import Animated, {useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming} from 'react-native-reanimated';
+import type {LayoutRectangle} from 'react-native/Libraries/Types/CoreEventTypes';
+import Button from '@components/Button';
+import {getButtonRole} from '@components/Button/utils';
+import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import ImageSVG from '@components/ImageSVG';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import {PressableWithFeedback} from '@components/Pressable';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import ProcessMoneyReportHoldMenu from '@components/ProcessMoneyReportHoldMenu';
+import type {ActionHandledType} from '@components/ProcessMoneyReportHoldMenu';
+import ExportWithDropdownMenu from '@components/ReportActionItem/ExportWithDropdownMenu';
+import AnimatedSettlementButton from '@components/SettlementButton/AnimatedSettlementButton';
+import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import usePaymentAnimations from '@hooks/usePaymentAnimations';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ControlSelection from '@libs/ControlSelection';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import {getConnectedIntegration} from '@libs/PolicyUtils';
+import {
+    areAllRequestsBeingSmartScanned as areAllRequestsBeingSmartScannedReportUtils,
+    canBeExported,
+    getBankAccountRoute,
+    getDisplayNameForParticipant,
+    getInvoicePayerName,
+    getMoneyRequestSpendBreakdown,
+    getNonHeldAndFullAmount,
+    getPolicyName,
+    getTransactionsWithReceipts,
+    hasActionsWithErrors,
+    hasHeldExpenses as hasHeldExpensesReportUtils,
+    hasMissingSmartscanFields as hasMissingSmartscanFieldsReportUtils,
+    hasNonReimbursableTransactions as hasNonReimbursableTransactionsReportUtils,
+    hasNoticeTypeViolations,
+    hasOnlyHeldExpenses as hasOnlyHeldExpensesReportUtils,
+    hasOnlyTransactionsWithPendingRoutes as hasOnlyTransactionsWithPendingRoutesReportUtils,
+    hasReportViolations,
+    hasUpdatedTotal,
+    hasViolations,
+    hasWarningTypeViolations,
+    isAllowedToApproveExpenseReport,
+    isAllowedToSubmitDraftExpenseReport,
+    isInvoiceReport as isInvoiceReportUtils,
+    isInvoiceRoom as isInvoiceRoomReportUtils,
+    isPolicyExpenseChat as isPolicyExpenseChatReportUtils,
+    isReportApproved,
+    isReportOwner,
+    isSettled,
+    isTripRoom as isTripRoomReportUtils,
+    isWaitingForSubmissionFromCurrentUser as isWaitingForSubmissionFromCurrentUserReportUtils,
+} from '@libs/ReportUtils';
+import {
+    getMerchant,
+    hasPendingUI,
+    isCardTransaction,
+    isPartialMerchant,
+    isPending,
+    isReceiptBeingScanned,
+    shouldShowBrokenConnectionViolationForMultipleTransactions,
+} from '@libs/TransactionUtils';
+import colors from '@styles/theme/colors';
+import variables from '@styles/variables';
+import {approveMoneyRequest, canApproveIOU, canIOUBePaid as canIOUBePaidIOUActions, canSubmitReport, payInvoice, payMoneyRequest, submitReport} from '@userActions/IOU';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import ROUTES from '@src/ROUTES';
+import type {Transaction} from '@src/types/onyx';
+import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
+import type {MoneyRequestReportPreviewContentProps} from './types';
+
+type WebLayoutNativeEvent = {
+    layout: LayoutRectangle;
+    target: Element;
+};
+
+const checkIfReportNameOverflows = <T extends LayoutChangeEvent>({nativeEvent}: T) =>
+    'target' in nativeEvent ? (nativeEvent as WebLayoutNativeEvent).target.scrollHeight > variables.h70 : false;
+
+// Do not remove this empty view, it is a workaround for the icon padding at the end of the preview text
+const FixIconPadding = <View />;
+
+function MoneyRequestReportPreviewContent({
+    iouReportID,
+    policyID,
+    chatReportID,
+    action,
+    containerStyles,
+    contextMenuAnchor,
+    isHovered = false,
+    isWhisper = false,
+    checkIfContextMenuActive = () => {},
+    onPaymentOptionsShow,
+    onPaymentOptionsHide,
+    chatReport,
+    invoiceReceiverPolicy,
+    iouReport,
+    transactions,
+    violations,
+    policy,
+    invoiceReceiverPersonalDetail,
+    lastTransactionViolations,
+    isDelegateAccessRestricted,
+    renderItem,
+    getCurrentWidth,
+    reportPreviewStyles,
+}: MoneyRequestReportPreviewContentProps) {
+    const lastTransaction = transactions?.at(0);
+    const transactionIDList = transactions?.map((reportTransaction) => reportTransaction.transactionID) ?? [];
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+    const [doesReportNameOverflow, setDoesReportNameOverflow] = useState(false);
+
+    const {hasMissingSmartscanFields, areAllRequestsBeingSmartScanned, hasNonReimbursableTransactions} = useMemo(
+        () => ({
+            hasMissingSmartscanFields: hasMissingSmartscanFieldsReportUtils(iouReportID),
+            areAllRequestsBeingSmartScanned: areAllRequestsBeingSmartScannedReportUtils(iouReportID, action),
+            hasOnlyTransactionsWithPendingRoutes: hasOnlyTransactionsWithPendingRoutesReportUtils(iouReportID),
+            hasNonReimbursableTransactions: hasNonReimbursableTransactionsReportUtils(iouReportID),
+        }),
+        // When transactions get updated these values may have changed, so that is a case where we also want to recompute them
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+        [transactions, iouReportID, action],
+    );
+
+    const {isPaidAnimationRunning, isApprovedAnimationRunning, stopAnimation, startAnimation, startApprovedAnimation} = usePaymentAnimations();
+    const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false);
+    const [requestType, setRequestType] = useState<ActionHandledType>();
+    const [paymentType, setPaymentType] = useState<PaymentMethodType>();
+
+    const getCanIOUBePaid = useCallback(
+        (onlyShowPayElsewhere = false, shouldCheckApprovedState = true) =>
+            canIOUBePaidIOUActions(iouReport, chatReport, policy, transactions, onlyShowPayElsewhere, undefined, undefined, shouldCheckApprovedState),
+        [iouReport, chatReport, policy, transactions],
+    );
+
+    const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]);
+    const canIOUBePaidAndApproved = useMemo(() => getCanIOUBePaid(false, false), [getCanIOUBePaid]);
+    const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]);
+    const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere;
+    const shouldShowApproveButton = useMemo(() => canApproveIOU(iouReport, policy), [iouReport, policy]) || isApprovedAnimationRunning;
+
+    const shouldDisableApproveButton = shouldShowApproveButton && !isAllowedToApproveExpenseReport(iouReport);
+
+    const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = getNonHeldAndFullAmount(iouReport, shouldShowPayButton);
+    const hasOnlyHeldExpenses = hasOnlyHeldExpensesReportUtils(iouReport?.reportID);
+
+    const managerID = iouReport?.managerID ?? action.childManagerAccountID ?? CONST.DEFAULT_NUMBER_ID;
+    const {totalDisplaySpend, reimbursableSpend} = getMoneyRequestSpendBreakdown(iouReport);
+
+    const iouSettled = isSettled(iouReportID) || action?.childStatusNum === CONST.REPORT.STATUS_NUM.REIMBURSED;
+    const previewMessageOpacity = useSharedValue(1);
+    const previewMessageStyle = useAnimatedStyle(() => ({
+        opacity: previewMessageOpacity.get(),
+    }));
+    const checkMarkScale = useSharedValue(iouSettled ? 1 : 0);
+
+    const isApproved = isReportApproved({report: iouReport, parentReportAction: action});
+    const thumbsUpScale = useSharedValue(isApproved ? 1 : 0);
+
+    const isPolicyExpenseChat = isPolicyExpenseChatReportUtils(chatReport);
+    const isInvoiceRoom = isInvoiceRoomReportUtils(chatReport);
+    const isTripRoom = isTripRoomReportUtils(chatReport);
+
+    const canAllowSettlement = hasUpdatedTotal(iouReport, policy);
+    const numberOfRequests = transactions?.length ?? 0;
+    const transactionsWithReceipts = getTransactionsWithReceipts(iouReportID);
+    const numberOfScanningReceipts = transactionsWithReceipts.filter((transaction) => isReceiptBeingScanned(transaction)).length;
+    const numberOfPendingRequests = transactionsWithReceipts.filter((transaction) => isPending(transaction) && isCardTransaction(transaction)).length;
+
+    const hasReceipts = transactionsWithReceipts.length > 0;
+    const isScanning = hasReceipts && areAllRequestsBeingSmartScanned;
+    const hasErrors =
+        (hasMissingSmartscanFields && !iouSettled) ||
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        hasViolations(iouReportID, violations, true) ||
+        hasNoticeTypeViolations(iouReportID, violations, true) ||
+        hasWarningTypeViolations(iouReportID, violations, true) ||
+        (isReportOwner(iouReport) && hasReportViolations(iouReportID)) ||
+        hasActionsWithErrors(iouReportID);
+    const showRTERViolationMessage = numberOfRequests === 1 && hasPendingUI(lastTransaction, lastTransactionViolations);
+    const shouldShowBrokenConnectionViolation = numberOfRequests === 1 && shouldShowBrokenConnectionViolationForMultipleTransactions(transactionIDList, iouReport, policy, violations);
+    let formattedMerchant = numberOfRequests === 1 ? getMerchant(lastTransaction) : undefined;
+
+    if (isPartialMerchant(formattedMerchant ?? '')) {
+        formattedMerchant = undefined;
+    }
+
+    const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
+    const filteredTransactions = transactions?.filter((transaction) => transaction) ?? [];
+    const shouldShowSubmitButton = canSubmitReport(iouReport, policy, filteredTransactions, violations);
+    const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(iouReport);
+
+    // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
+    const isWaitingForSubmissionFromCurrentUser = useMemo(() => isWaitingForSubmissionFromCurrentUserReportUtils(chatReport, policy), [chatReport, policy]);
+
+    const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
+
+    const confirmPayment = useCallback(
+        (type: PaymentMethodType | undefined, payAsBusiness?: boolean) => {
+            if (!type) {
+                return;
+            }
+            setPaymentType(type);
+            setRequestType(CONST.IOU.REPORT_ACTION_TYPE.PAY);
+            if (isDelegateAccessRestricted) {
+                setIsNoDelegateAccessMenuVisible(true);
+            } else if (hasHeldExpensesReportUtils(iouReport?.reportID)) {
+                setIsHoldMenuVisible(true);
+            } else if (chatReport && iouReport) {
+                startAnimation();
+                if (isInvoiceReportUtils(iouReport)) {
+                    payInvoice(type, chatReport, iouReport, payAsBusiness);
+                } else {
+                    payMoneyRequest(type, chatReport, iouReport);
+                }
+            }
+        },
+        [chatReport, iouReport, isDelegateAccessRestricted, startAnimation],
+    );
+
+    const confirmApproval = () => {
+        setRequestType(CONST.IOU.REPORT_ACTION_TYPE.APPROVE);
+        if (isDelegateAccessRestricted) {
+            setIsNoDelegateAccessMenuVisible(true);
+        } else if (hasHeldExpensesReportUtils(iouReport?.reportID)) {
+            setIsHoldMenuVisible(true);
+        } else {
+            startApprovedAnimation();
+            approveMoneyRequest(iouReport, true);
+        }
+    };
+
+    const getSettlementAmount = () => {
+        if (hasOnlyHeldExpenses) {
+            return '';
+        }
+
+        // We shouldn't display the nonHeldAmount as the default option if it's not valid since we cannot pay partially in this case
+        if (hasHeldExpensesReportUtils(iouReport?.reportID) && canAllowSettlement && hasValidNonHeldAmount) {
+            return nonHeldAmount;
+        }
+
+        return convertToDisplayString(reimbursableSpend, iouReport?.currency);
+    };
+
+    const previewMessage = useMemo(() => {
+        if (isScanning) {
+            return totalDisplaySpend ? `${translate('common.receipt')} ${CONST.DOT_SEPARATOR} ${translate('common.scanning')}` : `${translate('common.receipt')}`;
+        }
+        if (numberOfPendingRequests === 1 && numberOfRequests === 1) {
+            return `${translate('common.receipt')} ${CONST.DOT_SEPARATOR} ${translate('iou.pending')}`;
+        }
+        if (showRTERViolationMessage) {
+            return `${translate('common.receipt')} ${CONST.DOT_SEPARATOR} ${translate('iou.pendingMatch')}`;
+        }
+
+        let payerOrApproverName;
+        if (isPolicyExpenseChat || isTripRoom) {
+            payerOrApproverName = getPolicyName({report: chatReport, policy});
+        } else if (isInvoiceRoom) {
+            payerOrApproverName = getInvoicePayerName(chatReport, invoiceReceiverPolicy, invoiceReceiverPersonalDetail);
+        } else {
+            payerOrApproverName = getDisplayNameForParticipant({accountID: managerID, shouldUseShortForm: true});
+        }
+
+        if (isApproved) {
+            return translate('iou.managerApproved', {manager: payerOrApproverName});
+        }
+        let paymentVerb: TranslationPaths = 'iou.payerOwes';
+        if (iouSettled || iouReport?.isWaitingOnBankAccount) {
+            paymentVerb = 'iou.payerPaid';
+        } else if (hasNonReimbursableTransactions) {
+            paymentVerb = 'iou.payerSpent';
+            payerOrApproverName = getDisplayNameForParticipant({accountID: chatReport?.ownerAccountID, shouldUseShortForm: true});
+        }
+        return translate(paymentVerb, {payer: payerOrApproverName});
+    }, [
+        isScanning,
+        numberOfPendingRequests,
+        numberOfRequests,
+        showRTERViolationMessage,
+        isPolicyExpenseChat,
+        isTripRoom,
+        isInvoiceRoom,
+        isApproved,
+        iouSettled,
+        iouReport?.isWaitingOnBankAccount,
+        hasNonReimbursableTransactions,
+        translate,
+        totalDisplaySpend,
+        chatReport,
+        policy,
+        invoiceReceiverPolicy,
+        invoiceReceiverPersonalDetail,
+        managerID,
+    ]);
+
+    const bankAccountRoute = getBankAccountRoute(chatReport);
+
+    const shouldShowSettlementButton = !shouldShowSubmitButton && (shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation;
+
+    const shouldShowRBR = hasErrors && !iouSettled;
+
+    /*
+     Show subtitle if at least one of the expenses is not being smart scanned, and either:
+     - There is more than one expense – in this case, the "X expenses, Y scanning" subtitle is shown;
+     - There is only one expense, it has a receipt and is not being smart scanned – in this case, the expense merchant or description is shown;
+
+     * There is an edge case when there is only one distance expense with a pending route and amount = 0.
+       In this case, we don't want to show the merchant or description because it says: "Pending route...", which is already displayed in the amount field.
+     */
+    const {supportText} = useMemo(() => {
+        if (numberOfRequests === 1) {
+            return {
+                supportText: '',
+            };
+        }
+        return {
+            supportText: translate('iou.expenseCount', {
+                scanningReceipts: numberOfScanningReceipts,
+                pendingReceipts: numberOfPendingRequests,
+                count: numberOfRequests,
+            }),
+        };
+    }, [translate, numberOfRequests, numberOfScanningReceipts, numberOfPendingRequests]);
+
+    /*
+     * Manual export
+     */
+    const connectedIntegration = getConnectedIntegration(policy);
+    const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && canBeExported(iouReport);
+
+    useEffect(() => {
+        if (!isPaidAnimationRunning || isApprovedAnimationRunning) {
+            return;
+        }
+
+        previewMessageOpacity.set(
+            withTiming(0.75, {duration: CONST.ANIMATION_PAID_DURATION / 2}, () => {
+                previewMessageOpacity.set(withTiming(1, {duration: CONST.ANIMATION_PAID_DURATION / 2}));
+            }),
+        );
+        // We only want to animate the text when the text changes
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [previewMessage, previewMessageOpacity]);
+
+    useEffect(() => {
+        if (!iouSettled) {
+            return;
+        }
+
+        checkMarkScale.set(isPaidAnimationRunning ? withDelay(CONST.ANIMATION_PAID_CHECKMARK_DELAY, withSpring(1, {duration: CONST.ANIMATION_PAID_DURATION})) : 1);
+    }, [isPaidAnimationRunning, iouSettled, checkMarkScale]);
+
+    useEffect(() => {
+        if (!isApproved) {
+            return;
+        }
+
+        thumbsUpScale.set(isApprovedAnimationRunning ? withDelay(CONST.ANIMATION_THUMBSUP_DELAY, withSpring(1, {duration: CONST.ANIMATION_THUMBSUP_DURATION})) : 1);
+    }, [isApproved, isApprovedAnimationRunning, thumbsUpScale]);
+
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [lastVisibleIndex, setLastVisibleIndex] = useState(0);
+    const carouselRef = useRef<FlatList<Transaction> | null>(null);
+    const viewabilityConfig = useMemo(() => {
+        return {itemVisiblePercentThreshold: 90};
+    }, []);
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    const onViewableItemsChanged = useRef(({viewableItems}: {viewableItems: ViewToken[]; changed: ViewToken[]}) => {
+        const newIndex = viewableItems.at(0)?.index;
+        const lastIndex = viewableItems.at(viewableItems.length - 1)?.index;
+        if (typeof newIndex === 'number') {
+            setCurrentIndex(newIndex);
+        }
+        if (typeof lastIndex === 'number') {
+            setLastVisibleIndex(lastIndex);
+        }
+    }).current;
+
+    const handleChange = (index: number) => {
+        if (index >= transactions.length || index < 0) {
+            return;
+        }
+        carouselRef.current?.scrollToIndex({index, animated: true, viewOffset: 2 * styles.gap2.gap});
+    };
+
+    const onTextLayoutChange = (e: LayoutChangeEvent) => {
+        const doesOverflow = checkIfReportNameOverflows(e);
+        if (doesOverflow !== doesReportNameOverflow) {
+            setDoesReportNameOverflow(doesOverflow);
+        }
+    };
+
+    const renderFlatlistItem = (itemInfo: ListRenderItemInfo<Transaction>) => {
+        if (itemInfo.index > 9) {
+            return (
+                <View style={[styles.flex1, styles.p5, styles.justifyContentCenter]}>
+                    <Text style={{color: colors.blue600}}>
+                        +{transactions.length - 10} {translate('common.more').toLowerCase()}
+                    </Text>
+                </View>
+            );
+        }
+        return renderItem(itemInfo);
+    };
+
+    // The button should expand up to transaction width
+    const buttonMaxWidth = !shouldUseNarrowLayout ? {maxWidth: reportPreviewStyles.transactionPreviewStyle.width} : {};
+
+    const approvedOrSettledicon = (iouSettled || isApproved) && (
+        <ImageSVG
+            src={isApproved ? Expensicons.Checkmark : Expensicons.ThumbsUp}
+            fill={isApproved ? theme.iconSuccessFill : theme.icon}
+            width={20}
+            height={20}
+            style={{transform: 'translateY(4px)'}}
+            contentFit="cover"
+        />
+    );
+
+    return (
+        transactions.length > 0 && (
+            <OfflineWithFeedback
+                pendingAction={iouReport?.pendingFields?.preview}
+                shouldDisableOpacity={!!(action.pendingAction ?? action.isOptimisticAction)}
+                needsOffscreenAlphaCompositing
+                style={styles.mt1}
+            >
+                <View
+                    style={[styles.chatItemMessage, containerStyles]}
+                    onLayout={getCurrentWidth}
+                >
+                    <PressableWithoutFeedback
+                        onPress={() => {}}
+                        onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
+                        onPressOut={() => ControlSelection.unblock()}
+                        onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
+                        shouldUseHapticsOnLongPress
+                        style={[styles.flexRow, styles.justifyContentBetween, StyleUtils.getBackgroundColorStyle(theme.cardBG), styles.reportContainerBorderRadius]}
+                        role={getButtonRole(true)}
+                        isNested
+                        accessibilityLabel={translate('iou.viewDetails')}
+                    >
+                        <View
+                            style={[
+                                StyleUtils.getBackgroundColorStyle(theme.cardBG),
+                                styles.reportContainerBorderRadius,
+                                styles.w100,
+                                (isHovered || isScanning || isWhisper) && styles.reportPreviewBoxHoverBorder,
+                            ]}
+                        >
+                            <View style={[reportPreviewStyles.wrapperStyle]}>
+                                <View style={[reportPreviewStyles.contentContainerStyle]}>
+                                    <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden]}>
+                                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.gap3]}>
+                                            <View style={[styles.flexRow, styles.mw100, styles.flexShrink1, (isApproved || iouSettled) && styles.mtn1]}>
+                                                <Animated.View style={[styles.flexRow, styles.alignItemsCenter, previewMessageStyle, styles.flexShrink1]}>
+                                                    <Text
+                                                        onLayout={onTextLayoutChange}
+                                                        style={[styles.lh20]}
+                                                        numberOfLines={3}
+                                                    >
+                                                        {FixIconPadding}
+                                                        <Text
+                                                            style={[styles.headerText]}
+                                                            testID="MoneyRequestReportPreview-reportName"
+                                                        >
+                                                            {action.childReportName}
+                                                        </Text>
+                                                        {!doesReportNameOverflow && <>&nbsp;{approvedOrSettledicon}</>}
+                                                    </Text>
+                                                    {doesReportNameOverflow && (
+                                                        <View style={[styles.mtn0Half, (transactions.length < 3 || shouldUseNarrowLayout) && styles.alignSelfStart]}>
+                                                            {approvedOrSettledicon}
+                                                        </View>
+                                                    )}
+                                                </Animated.View>
+                                            </View>
+                                            {!shouldUseNarrowLayout && transactions.length > 2 && (
+                                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                                    <Text style={[styles.textLabelSupporting, styles.textLabelSupporting, styles.lh20, styles.mr1]}>{supportText}</Text>
+                                                    <PressableWithFeedback
+                                                        accessibilityRole="button"
+                                                        accessible
+                                                        accessibilityLabel="button"
+                                                        style={[styles.reportPreviewArrowButton, {backgroundColor: theme.buttonDefaultBG}]}
+                                                        onPress={() => handleChange(currentIndex - 1)}
+                                                        disabled={currentIndex === 0}
+                                                        disabledStyle={[styles.cursorDefault, styles.buttonOpacityDisabled]}
+                                                    >
+                                                        <Icon
+                                                            src={Expensicons.BackArrow}
+                                                            small
+                                                            fill={theme.icon}
+                                                            isButtonIcon
+                                                        />
+                                                    </PressableWithFeedback>
+                                                    <PressableWithFeedback
+                                                        accessibilityRole="button"
+                                                        accessible
+                                                        accessibilityLabel="button"
+                                                        style={[styles.reportPreviewArrowButton, {backgroundColor: theme.buttonDefaultBG}]}
+                                                        onPress={() => handleChange(currentIndex + 1)}
+                                                        disabled={lastVisibleIndex === Math.min(transactions.length - 1, 10)}
+                                                        disabledStyle={[styles.cursorDefault, styles.buttonOpacityDisabled]}
+                                                    >
+                                                        <Icon
+                                                            src={Expensicons.ArrowRight}
+                                                            small
+                                                            fill={theme.icon}
+                                                            isButtonIcon
+                                                        />
+                                                    </PressableWithFeedback>
+                                                </View>
+                                            )}
+                                        </View>
+                                        {shouldShowRBR && (
+                                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                                <Icon
+                                                    src={Expensicons.DotIndicator}
+                                                    fill={theme.danger}
+                                                />
+                                                <Text style={[styles.textDanger, styles.fontSizeLabel, styles.textLineHeightNormal, styles.ml2]}>
+                                                    {translate('violations.reviewRequired')}
+                                                </Text>
+                                            </View>
+                                        )}
+                                    </View>
+                                    <View style={[styles.flex1, styles.flexColumn, styles.overflowVisible, styles.mtn1]}>
+                                        <FlatList
+                                            snapToAlignment="start"
+                                            decelerationRate="fast"
+                                            snapToInterval={reportPreviewStyles.transactionPreviewStyle.width + styles.gap2.gap}
+                                            horizontal
+                                            data={transactions.slice(0, 11)}
+                                            ref={carouselRef}
+                                            nestedScrollEnabled
+                                            scrollEnabled={transactions.length > 1}
+                                            keyExtractor={(item) => item.transactionID}
+                                            contentContainerStyle={[styles.gap2]}
+                                            style={reportPreviewStyles.flatListStyle}
+                                            showsHorizontalScrollIndicator={false}
+                                            renderItem={renderFlatlistItem}
+                                            onViewableItemsChanged={onViewableItemsChanged}
+                                            viewabilityConfig={viewabilityConfig}
+                                            ListFooterComponent={<View style={styles.pl2} />}
+                                            ListHeaderComponent={<View style={styles.pr2} />}
+                                        />
+                                    </View>
+                                    {shouldUseNarrowLayout && transactions.length > 1 && (
+                                        <View style={[styles.flexRow, styles.alignSelfCenter, styles.gap2]}>
+                                            {transactions.slice(0, 11).map((item, index) => (
+                                                <PressableWithFeedback
+                                                    accessibilityRole="button"
+                                                    accessible
+                                                    accessibilityLabel="button"
+                                                    style={[styles.reportPreviewCarouselDots, {backgroundColor: index === currentIndex ? theme.icon : theme.buttonDefaultBG}]}
+                                                    onPress={() => handleChange(index)}
+                                                />
+                                            ))}
+                                        </View>
+                                    )}
+                                    {shouldShowSettlementButton && !shouldShowRBR && (
+                                        <AnimatedSettlementButton
+                                            onlyShowPayElsewhere={onlyShowPayElsewhere}
+                                            isPaidAnimationRunning={isPaidAnimationRunning}
+                                            isApprovedAnimationRunning={isApprovedAnimationRunning}
+                                            canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
+                                            onAnimationFinish={stopAnimation}
+                                            formattedAmount={getSettlementAmount() ?? ''}
+                                            currency={iouReport?.currency}
+                                            policyID={policyID}
+                                            chatReportID={chatReportID}
+                                            iouReport={iouReport}
+                                            wrapperStyle={buttonMaxWidth}
+                                            onPress={confirmPayment}
+                                            onPaymentOptionsShow={onPaymentOptionsShow}
+                                            onPaymentOptionsHide={onPaymentOptionsHide}
+                                            confirmApproval={confirmApproval}
+                                            enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+                                            addBankAccountRoute={bankAccountRoute}
+                                            shouldHidePaymentOptions={!shouldShowPayButton}
+                                            shouldShowApproveButton={shouldShowApproveButton}
+                                            shouldDisableApproveButton={shouldDisableApproveButton}
+                                            kycWallAnchorAlignment={{
+                                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                                            }}
+                                            paymentMethodDropdownAnchorAlignment={{
+                                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                                            }}
+                                            isDisabled={isOffline && !canAllowSettlement}
+                                            isLoading={!isOffline && !canAllowSettlement}
+                                        />
+                                    )}
+                                    {!!shouldShowExportIntegrationButton && !shouldShowSettlementButton && shouldShowRBR && (
+                                        <ExportWithDropdownMenu
+                                            policy={policy}
+                                            report={iouReport}
+                                            connectionName={connectedIntegration}
+                                            wrapperStyle={[buttonMaxWidth, styles.flexReset]}
+                                            dropdownAnchorAlignment={{
+                                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                                            }}
+                                        />
+                                    )}
+                                    {!shouldShowSubmitButton && shouldShowRBR && (shouldShowSettlementButton || !!shouldShowExportIntegrationButton) && (
+                                        <Button
+                                            icon={Expensicons.DotIndicator}
+                                            iconFill={theme.danger}
+                                            iconHoverFill={theme.danger}
+                                            text={translate('common.review', {amount: shouldShowSettlementButton ? getSettlementAmount() : ''})}
+                                            onPress={() => {}}
+                                            style={buttonMaxWidth}
+                                        />
+                                    )}
+                                    {shouldShowSubmitButton && (
+                                        <Button
+                                            success={isWaitingForSubmissionFromCurrentUser}
+                                            text={translate('common.submit')}
+                                            style={buttonMaxWidth}
+                                            onPress={() => iouReport && submitReport(iouReport)}
+                                            isDisabled={shouldDisableSubmitButton}
+                                        />
+                                    )}
+                                </View>
+                            </View>
+                        </View>
+                    </PressableWithoutFeedback>
+                </View>
+                <DelegateNoAccessModal
+                    isNoDelegateAccessMenuVisible={isNoDelegateAccessMenuVisible}
+                    onClose={() => setIsNoDelegateAccessMenuVisible(false)}
+                />
+
+                {isHoldMenuVisible && !!iouReport && !!requestType && (
+                    <ProcessMoneyReportHoldMenu
+                        nonHeldAmount={!hasOnlyHeldExpenses && hasValidNonHeldAmount ? nonHeldAmount : undefined}
+                        requestType={requestType}
+                        fullAmount={fullAmount}
+                        onClose={() => setIsHoldMenuVisible(false)}
+                        isVisible={isHoldMenuVisible}
+                        paymentType={paymentType}
+                        chatReport={chatReport}
+                        moneyRequestReport={iouReport}
+                        transactionCount={numberOfRequests}
+                        startAnimation={() => {
+                            if (requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE) {
+                                startApprovedAnimation();
+                            } else {
+                                startAnimation();
+                            }
+                        }}
+                    />
+                )}
+            </OfflineWithFeedback>
+        )
+    );
+}
+
+MoneyRequestReportPreviewContent.displayName = 'MoneyRequestReportPreviewContent';
+
+export default MoneyRequestReportPreviewContent;
diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
new file mode 100644
index 000000000000..27a812502640
--- /dev/null
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -0,0 +1,107 @@
+import React, {useMemo, useState} from 'react';
+import type {LayoutChangeEvent, ListRenderItem} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import TransactionPreview from '@components/ReportActionItem/TransactionPreview';
+import useDelegateUserDetails from '@hooks/useDelegateUserDetails';
+import usePolicy from '@hooks/usePolicy';
+import useReportWithTransactionsAndViolations from '@hooks/useReportWithTransactionsAndViolations';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useTransactionViolations from '@hooks/useTransactionViolations';
+import {getIOUActionForReportID, isSplitBillAction as isSplitBillActionReportActionsUtils, isTrackExpenseAction as isTrackExpenseActionReportActionsUtils} from '@libs/ReportActionsUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Transaction} from '@src/types/onyx';
+import MoneyRequestReportPreviewContent from './MoneyRequestReportPreviewContent';
+import type {MoneyRequestReportPreviewProps} from './types';
+
+function MoneyRequestReportPreview({
+    iouReportID,
+    policyID,
+    chatReportID,
+    action,
+    containerStyles,
+    contextMenuAnchor,
+    isHovered = false,
+    isWhisper = false,
+    checkIfContextMenuActive = () => {},
+    onPaymentOptionsShow,
+    onPaymentOptionsHide,
+}: MoneyRequestReportPreviewProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
+    const [invoiceReceiverPolicy] = useOnyx(
+        `${ONYXKEYS.COLLECTION.POLICY}${chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : CONST.DEFAULT_NUMBER_ID}`,
+    );
+    const [invoiceReceiverPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+        selector: (personalDetails) =>
+            personalDetails?.[chatReport?.invoiceReceiver && 'accountID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.accountID : CONST.DEFAULT_NUMBER_ID],
+    });
+    const [iouReport, transactions, violations] = useReportWithTransactionsAndViolations(iouReportID);
+    const policy = usePolicy(policyID);
+    const lastTransaction = transactions?.at(0);
+    const lastTransactionViolations = useTransactionViolations(lastTransaction?.transactionID);
+    const {isDelegateAccessRestricted} = useDelegateUserDetails();
+    const isTrackExpenseAction = isTrackExpenseActionReportActionsUtils(action);
+    const isSplitBillAction = isSplitBillActionReportActionsUtils(action);
+    const [currentWidth, setCurrentWidth] = useState(256);
+    const reportPreviewStyles = useMemo(
+        () => StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, currentWidth, transactions.length === 1),
+        [StyleUtils, currentWidth, shouldUseNarrowLayout, transactions.length],
+    );
+
+    const renderItem: ListRenderItem<Transaction> = ({item}) => (
+        <TransactionPreview
+            chatReportID={chatReportID}
+            action={getIOUActionForReportID(item.reportID, item.transactionID)}
+            reportID={item.reportID}
+            isBillSplit={isSplitBillAction}
+            isTrackExpense={isTrackExpenseAction}
+            contextMenuAnchor={contextMenuAnchor}
+            isWhisper={isWhisper}
+            isHovered={isHovered}
+            iouReportID={iouReportID}
+            onPreviewPressed={() => {}}
+            wrapperStyles={reportPreviewStyles.transactionPreviewStyle}
+            containerStyles={[styles.h100, containerStyles]}
+            transactionID={item.transactionID}
+        />
+    );
+
+    return (
+        <MoneyRequestReportPreviewContent
+            containerStyles={[reportPreviewStyles.componentStyle, containerStyles]}
+            contextMenuAnchor={contextMenuAnchor}
+            isHovered={isHovered}
+            isWhisper={isWhisper}
+            checkIfContextMenuActive={checkIfContextMenuActive}
+            onPaymentOptionsShow={onPaymentOptionsShow}
+            onPaymentOptionsHide={onPaymentOptionsHide}
+            action={action}
+            chatReportID={chatReportID}
+            iouReportID={iouReportID}
+            policyID={undefined}
+            iouReport={iouReport}
+            transactions={transactions}
+            violations={violations}
+            chatReport={chatReport}
+            policy={policy}
+            invoiceReceiverPersonalDetail={invoiceReceiverPersonalDetail}
+            invoiceReceiverPolicy={invoiceReceiverPolicy}
+            lastTransactionViolations={lastTransactionViolations}
+            isDelegateAccessRestricted={isDelegateAccessRestricted}
+            renderItem={renderItem}
+            getCurrentWidth={(e: LayoutChangeEvent) => {
+                setCurrentWidth(e.nativeEvent.layout.width ?? 255);
+            }}
+            reportPreviewStyles={reportPreviewStyles}
+        />
+    );
+}
+
+MoneyRequestReportPreview.displayName = 'MoneyRequestReportPreview';
+
+export default MoneyRequestReportPreview;
diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/types.ts b/src/components/ReportActionItem/MoneyRequestReportPreview/types.ts
new file mode 100644
index 000000000000..c502df223adc
--- /dev/null
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/types.ts
@@ -0,0 +1,65 @@
+import type {LayoutChangeEvent, ListRenderItem, StyleProp, ViewStyle} from 'react-native';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {TransactionPreviewStyleType} from '@components/ReportActionItem/TransactionPreview/types';
+import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import type {PersonalDetails, Policy, Report, ReportAction, Transaction, TransactionViolation, TransactionViolations} from '@src/types/onyx';
+
+type MoneyRequestReportPreviewStyleType = {
+    flatListStyle: StyleProp<ViewStyle>;
+    wrapperStyle: ViewStyle;
+    contentContainerStyle: ViewStyle;
+    transactionPreviewStyle: TransactionPreviewStyleType;
+    componentStyle: StyleProp<ViewStyle>;
+};
+
+type MoneyRequestReportPreviewProps = {
+    /** The report's policyID, used for Onyx subscription */
+    policyID: string | undefined;
+
+    /** All the data of the action */
+    action: ReportAction;
+
+    /** The associated chatReport */
+    chatReportID: string | undefined;
+
+    /** The active IOUReport, used for Onyx subscription */
+    iouReportID: string | undefined;
+
+    /** Extra styles to pass to View wrapper */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Popover context menu anchor, used for showing context menu */
+    contextMenuAnchor?: ContextMenuAnchor;
+
+    /** Callback for updating context menu active state, used for showing context menu */
+    checkIfContextMenuActive?: () => void;
+
+    /** Callback when the payment options popover is shown */
+    onPaymentOptionsShow?: () => void;
+
+    /** Callback when the payment options popover is closed */
+    onPaymentOptionsHide?: () => void;
+
+    /** Whether a message is a whisper */
+    isWhisper?: boolean;
+
+    /** Whether the corresponding report action item is hovered */
+    isHovered?: boolean;
+};
+
+type MoneyRequestReportPreviewContentOnyxProps = {
+    chatReport: OnyxEntry<Report>;
+    invoiceReceiverPolicy: OnyxEntry<Policy>;
+    iouReport: OnyxEntry<Report>;
+    transactions: Transaction[];
+    violations: OnyxCollection<TransactionViolation[]>;
+    policy: OnyxEntry<Policy>;
+    invoiceReceiverPersonalDetail: OnyxEntry<PersonalDetails>;
+    lastTransactionViolations: TransactionViolations;
+    isDelegateAccessRestricted: boolean;
+};
+
+type MoneyRequestReportPreviewContentProps = MoneyRequestReportPreviewContentOnyxProps &
+    MoneyRequestReportPreviewProps & {renderItem: ListRenderItem<Transaction>; getCurrentWidth: (e: LayoutChangeEvent) => void; reportPreviewStyles: MoneyRequestReportPreviewStyleType};
+
+export type {MoneyRequestReportPreviewContentProps, MoneyRequestReportPreviewProps, MoneyRequestReportPreviewStyleType};
diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 1135a7469d5a..fc7d43e2a2cc 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -70,6 +70,7 @@ import {
     isReportOwner,
     isSettled,
     isTripRoom as isTripRoomReportUtils,
+    isWaitingForSubmissionFromCurrentUser as isWaitingForSubmissionFromCurrentUserReportUtils,
 } from '@libs/ReportUtils';
 import StringUtils from '@libs/StringUtils';
 import {
@@ -254,10 +255,7 @@ function ReportPreview({
     const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(iouReport);
 
     // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
-    const isWaitingForSubmissionFromCurrentUser = useMemo(
-        () => chatReport?.isOwnPolicyExpenseChat && !policy?.harvesting?.enabled,
-        [chatReport?.isOwnPolicyExpenseChat, policy?.harvesting?.enabled],
-    );
+    const isWaitingForSubmissionFromCurrentUser = useMemo(() => isWaitingForSubmissionFromCurrentUserReportUtils(chatReport, policy), [chatReport, policy]);
 
     const {isDelegateAccessRestricted} = useDelegateUserDetails();
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
index f26a09e7b977..0a4788df90a8 100644
--- a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
+++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
@@ -5,13 +5,13 @@ import {View} from 'react-native';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
 import {DotIndicator, Folder, Tag} from '@components/Icon/Expensicons';
-import MoneyRequestSkeletonView from '@components/MoneyRequestSkeletonView';
 import MultipleAvatars from '@components/MultipleAvatars';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import ReportActionItemImages from '@components/ReportActionItem/ReportActionItemImages';
 import UserInfoCellsWithArrow from '@components/SelectionList/Search/UserInfoCellsWithArrow';
 import Text from '@components/Text';
+import TransactionPreviewSkeletonView from '@components/TransactionPreviewSkeletonView';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -49,6 +49,7 @@ function TransactionPreviewContent({
     navigateToReviewFields,
     onPreviewPressed,
     containerStyles,
+    wrapperStyles,
     isBillSplit,
     areThereDuplicates,
     sessionAccountID,
@@ -159,12 +160,12 @@ function TransactionPreviewContent({
         () =>
             shouldShowSplitShare
                 ? transaction?.comment?.splits?.find((split) => split.accountID === sessionAccountID)?.amount ??
-                  calculateAmount(isReportAPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount ?? 0, requestCurrency ?? '', action.actorAccountID === sessionAccountID)
+                  calculateAmount(isReportAPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount ?? 0, requestCurrency ?? '', action?.actorAccountID === sessionAccountID)
                 : 0,
         [
             shouldShowSplitShare,
             isReportAPolicyExpenseChat,
-            action.actorAccountID,
+            action?.actorAccountID,
             participantAccountIDs.length,
             transaction?.comment?.splits,
             requestAmount,
@@ -173,8 +174,12 @@ function TransactionPreviewContent({
         ],
     );
 
+    const previewTextViewGap = (isBillSplit || shouldShowMerchantOrDescription || shouldShowCategoryOrTag) && styles.gap2;
+    const previewTextMargin = shouldShowIOUHeader && shouldShowMerchantOrDescription && !isBillSplit && !shouldShowCategoryOrTag && styles.mbn1;
+    const shouldWrapDisplayAmount = !(shouldShowMerchantOrDescription || isBillSplit);
+
     const transactionContent = (
-        <View style={[styles.border, styles.reportContainerBorderRadius]}>
+        <View style={[styles.border, styles.reportContainerBorderRadius, containerStyles]}>
             <OfflineWithFeedback
                 errors={walletTermsErrors}
                 onClose={() => offlineWithFeedbackOnClose}
@@ -187,7 +192,7 @@ function TransactionPreviewContent({
             >
                 <View
                     style={[
-                        isScanning || isWhisper ? [styles.reportPreviewBoxHoverBorder, styles.reportContainerBorderRadius] : undefined,
+                        (isScanning || isWhisper) && [styles.reportPreviewBoxHoverBorder, styles.reportContainerBorderRadius],
                         !onPreviewPressed ? [styles.moneyRequestPreviewBox, containerStyles, themeStyles] : {},
                     ]}
                 >
@@ -200,27 +205,27 @@ function TransactionPreviewContent({
                         />
                     )}
                     {shouldShowSkeleton ? (
-                        <MoneyRequestSkeletonView />
+                        <TransactionPreviewSkeletonView transactionPreviewWidth={wrapperStyles.width} />
                     ) : (
                         <View style={[styles.expenseAndReportPreviewBoxBody, styles.mtn1]}>
                             <View style={styles.gap3}>
-                                <View style={isBillSplit || shouldShowMerchantOrDescription || shouldShowCategoryOrTag ? styles.gap2 : {}}>
-                                    {shouldShowIOUHeader && (
-                                        <View style={[styles.flex1, styles.dFlex, styles.alignItemsCenter, styles.gap2, styles.flexRow]}>
-                                            <UserInfoCellsWithArrow
-                                                shouldDisplayArrowIcon
-                                                participantFrom={from}
-                                                participantFromDisplayName={from.displayName ?? from.login ?? ''}
-                                                participantTo={to}
-                                                participantToDisplayName={to.displayName ?? to.login ?? ''}
-                                                avatarSize="mid-subscript"
-                                                infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}}
-                                                infoCellsAvatarStyle={styles.pr1}
-                                            />
-                                        </View>
-                                    )}
+                                {shouldShowIOUHeader && (
+                                    <View style={[styles.flex1, styles.dFlex, styles.alignItemsCenter, styles.gap2, styles.flexRow]}>
+                                        <UserInfoCellsWithArrow
+                                            shouldDisplayArrowIcon
+                                            participantFrom={from}
+                                            participantFromDisplayName={from.displayName ?? from.login ?? ''}
+                                            participantTo={to}
+                                            participantToDisplayName={to.displayName ?? to.login ?? ''}
+                                            avatarSize="mid-subscript"
+                                            infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}}
+                                            infoCellsAvatarStyle={styles.pr1}
+                                        />
+                                    </View>
+                                )}
+                                <View style={previewTextViewGap}>
                                     <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                        <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16]}>{previewHeaderText}</Text>
+                                        <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16, previewTextMargin]}>{previewHeaderText}</Text>
                                         {isBillSplit && (
                                             <View style={styles.moneyRequestPreviewBoxAvatar}>
                                                 <MultipleAvatars
@@ -231,7 +236,7 @@ function TransactionPreviewContent({
                                                 />
                                             </View>
                                         )}
-                                        {!isBillSplit && !shouldShowMerchantOrDescription && (
+                                        {shouldWrapDisplayAmount && (
                                             <Text
                                                 fontSize={variables.fontSizeNormal}
                                                 style={[isDeleted && styles.lineThrough, styles.flexShrink0]}
@@ -260,7 +265,7 @@ function TransactionPreviewContent({
                                                         {merchantOrDescription}
                                                     </Text>
                                                 )}
-                                                {(shouldShowMerchant || shouldShowDescription || isBillSplit) && (
+                                                {!shouldWrapDisplayAmount && (
                                                     <Text
                                                         fontSize={variables.fontSizeNormal}
                                                         style={[isDeleted && styles.lineThrough, styles.flexShrink0]}
@@ -364,7 +369,7 @@ function TransactionPreviewContent({
             accessibilityHint={convertToDisplayString(requestAmount, requestCurrency)}
             style={[
                 styles.moneyRequestPreviewBox,
-                containerStyles,
+                wrapperStyles,
                 themeStyles,
                 shouldDisableOnPress && styles.cursorDefault,
                 (isIOUSettled || isApproved) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending,
diff --git a/src/components/ReportActionItem/TransactionPreview/index.tsx b/src/components/ReportActionItem/TransactionPreview/index.tsx
index fdd2edc436b8..fd424ab23d40 100644
--- a/src/components/ReportActionItem/TransactionPreview/index.tsx
+++ b/src/components/ReportActionItem/TransactionPreview/index.tsx
@@ -1,12 +1,13 @@
 import {useRoute} from '@react-navigation/native';
 import React, {useCallback, useMemo} from 'react';
 import type {GestureResponderEvent} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import useTransactionViolations from '@hooks/useTransactionViolations';
 import {getOriginalMessage, isMoneyRequestAction as isMoneyRequestActionReportActionsUtils} from '@libs/ReportActionsUtils';
 import {getReviewNavigationRoute} from '@libs/TransactionPreviewUtils';
-import {removeSettledAndApprovedTransactions} from '@libs/TransactionUtils';
+import {getTransaction, removeSettledAndApprovedTransactions} from '@libs/TransactionUtils';
 import Navigation from '@navigation/Navigation';
 import type {PlatformStackRouteProp} from '@navigation/PlatformStackNavigation/types';
 import type {TransactionDuplicateNavigatorParamList} from '@navigation/types';
@@ -15,17 +16,30 @@ import {clearIOUError} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
+import type {Transaction} from '@src/types/onyx';
 import TransactionPreviewContent from './TransactionPreviewContent';
 import type {TransactionPreviewProps} from './types';
 
+const getOriginalTransactionIfBillIsSplit = (transaction: OnyxEntry<Transaction>) => {
+    const {originalTransactionID, source} = transaction?.comment ?? {};
+
+    if (!originalTransactionID || source !== CONST.IOU.TYPE.SPLIT) {
+        return {isSplit: false, originalTransaction: transaction};
+    }
+
+    const originalTransaction = getTransaction(originalTransactionID);
+
+    return {isSplit: !!originalTransaction, originalTransaction: originalTransaction ?? transaction};
+};
+
 function TransactionPreview(props: TransactionPreviewProps) {
-    const {action, chatReportID, reportID, contextMenuAnchor, checkIfContextMenuActive = () => {}, shouldDisplayContextMenu, iouReportID} = props;
+    const {action, chatReportID, reportID, contextMenuAnchor, checkIfContextMenuActive = () => {}, shouldDisplayContextMenu, iouReportID, transactionID: transactionIDFromProps} = props;
 
     const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`);
     const route = useRoute<PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params?.threadReportID}`);
     const isMoneyRequestAction = isMoneyRequestActionReportActionsUtils(action);
-    const transactionID = isMoneyRequestAction ? getOriginalMessage(action)?.IOUTransactionID : null;
+    const transactionID = transactionIDFromProps ?? (isMoneyRequestAction ? getOriginalMessage(action)?.IOUTransactionID : null);
     const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
     const violations = useTransactionViolations(transaction?.transactionID);
     const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
@@ -55,14 +69,17 @@ function TransactionPreview(props: TransactionPreviewProps) {
         Navigation.navigate(getReviewNavigationRoute(route, report, transaction, duplicates));
     }, [duplicates, report, route, transaction]);
 
+    const {originalTransaction, isSplit} = getOriginalTransactionIfBillIsSplit(transaction);
+
     return (
         <TransactionPreviewContent
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...props}
+            isBillSplit={isSplit}
             chatReport={chatReport}
             personalDetails={personalDetails}
+            transaction={originalTransaction}
             iouReport={iouReport}
-            transaction={transaction}
             violations={violations}
             showContextMenu={showContextMenu}
             offlineWithFeedbackOnClose={offlineWithFeedbackOnClose}
diff --git a/src/components/ReportActionItem/TransactionPreview/types.ts b/src/components/ReportActionItem/TransactionPreview/types.ts
index 88bed24e1b72..d8239c66f372 100644
--- a/src/components/ReportActionItem/TransactionPreview/types.ts
+++ b/src/components/ReportActionItem/TransactionPreview/types.ts
@@ -4,6 +4,11 @@ import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActio
 import type {PersonalDetailsList, Report, ReportAction, Transaction, TransactionViolations} from '@src/types/onyx';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 
+type TransactionPreviewStyleType = {
+    width: number;
+    maxWidth?: number;
+};
+
 type TransactionPreviewProps = {
     /** The active IOUReport, used for Onyx subscription */
     iouReportID: string | undefined;
@@ -18,7 +23,7 @@ type TransactionPreviewProps = {
     onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent) => void;
 
     /** All the data of the action, used for showing context menu */
-    action: ReportAction;
+    action: OnyxEntry<ReportAction>;
 
     /** Popover context menu anchor, used for showing context menu */
     contextMenuAnchor?: ContextMenuAnchor;
@@ -26,9 +31,12 @@ type TransactionPreviewProps = {
     /** Callback for updating context menu active state, used for showing context menu */
     checkIfContextMenuActive?: () => void;
 
-    /** Extra styles to pass to View wrapper */
+    /** Optional custom styles to be applied to container component. */
     containerStyles?: StyleProp<ViewStyle>;
 
+    /** Optional custom styles to be applied to wrapper component. */
+    wrapperStyles: TransactionPreviewStyleType;
+
     /** True if this IOU has a type of split */
     isBillSplit: boolean;
 
@@ -48,6 +56,9 @@ type TransactionPreviewProps = {
 
     /** Whether  context menu should be shown on press */
     shouldDisplayContextMenu?: boolean;
+
+    /** In the case where we have access to the transactionID in the parent */
+    transactionID?: string;
 };
 
 type TransactionPreviewContentProps = {
@@ -69,9 +80,12 @@ type TransactionPreviewContentProps = {
     /** Determines if the element is currently hovered over. */
     isHovered?: boolean;
 
-    /** Optional custom styles to be applied to container components. */
+    /** Optional custom styles to be applied to container component. */
     containerStyles?: StyleProp<ViewStyle>;
 
+    /** Optional custom styles to be applied to wrapper component. */
+    wrapperStyles: TransactionPreviewStyleType;
+
     /** Records any errors related to wallet terms. */
     walletTermsErrors: Errors | undefined;
 
@@ -85,7 +99,7 @@ type TransactionPreviewContentProps = {
     transaction: OnyxEntry<Transaction>;
 
     /** Represents the action entry from Onyx */
-    action: ReportAction;
+    action: OnyxEntry<ReportAction>;
 
     /** Contains data about potential transaction violations */
     violations: TransactionViolations;
@@ -109,4 +123,4 @@ type TransactionPreviewContentProps = {
     shouldHideOnDelete?: boolean;
 };
 
-export type {TransactionPreviewProps, TransactionPreviewContentProps};
+export type {TransactionPreviewProps, TransactionPreviewContentProps, TransactionPreviewStyleType};
diff --git a/src/components/TransactionPreviewSkeletonView.tsx b/src/components/TransactionPreviewSkeletonView.tsx
new file mode 100644
index 000000000000..959e7e8f0ca7
--- /dev/null
+++ b/src/components/TransactionPreviewSkeletonView.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import {Rect} from 'react-native-svg';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import SkeletonViewContentLoader from './SkeletonViewContentLoader';
+
+type TransactionPreviewSkeletonViewProps = {
+    transactionPreviewWidth: number;
+};
+
+function TransactionPreviewSkeletonView({transactionPreviewWidth}: TransactionPreviewSkeletonViewProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {width, height} = {
+        width: transactionPreviewWidth - styles.p4.padding * 2,
+        height: variables.transactionPreviewSkeletonHeight,
+    };
+
+    return (
+        <SkeletonViewContentLoader
+            testID={TransactionPreviewSkeletonView.displayName}
+            animate
+            width={width}
+            height={height}
+            backgroundColor={theme.skeletonLHNIn}
+            foregroundColor={theme.skeletonLHNOut}
+            style={[styles.p4, styles.mtn1]}
+        >
+            <Rect
+                x="0"
+                y="4"
+                width="64"
+                height="8"
+            />
+            <Rect
+                x="0"
+                y="24"
+                width="120"
+                height="20"
+            />
+            <Rect
+                x={width - 68}
+                y="24"
+                width="68"
+                height="20"
+            />
+            <Rect
+                x="0"
+                y="54.75"
+                width="80"
+                height="7"
+            />
+        </SkeletonViewContentLoader>
+    );
+}
+
+TransactionPreviewSkeletonView.displayName = 'TransactionPreviewSkeletonView';
+export default TransactionPreviewSkeletonView;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index f3e139c95144..f610e23bb77f 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -144,6 +144,7 @@ import type {
     RequestedAmountMessageParams,
     RequiredFieldParams,
     ResolutionConstraintsParams,
+    ReviewParams,
     RoleNamesParams,
     RoomNameReservedErrorParams,
     RoomRenamedToParams,
@@ -289,7 +290,7 @@ const translations = {
         wallet: 'Wallet',
         preferences: 'Preferences',
         view: 'View',
-        review: 'Review',
+        review: (reviewParams?: ReviewParams) => `Review${reviewParams?.amount && ' '}${reviewParams?.amount}}`,
         not: 'Not',
         signIn: 'Sign in',
         signInWithGoogle: 'Sign in with Google',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 6cf482290644..5cf83b369e64 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -143,6 +143,7 @@ import type {
     RequestedAmountMessageParams,
     RequiredFieldParams,
     ResolutionConstraintsParams,
+    ReviewParams,
     RoleNamesParams,
     RoomNameReservedErrorParams,
     RoomRenamedToParams,
@@ -280,7 +281,7 @@ const translations = {
         wallet: 'Billetera',
         preferences: 'Preferencias',
         view: 'Ver',
-        review: 'Revisar',
+        review: (reviewParams?: ReviewParams) => `Revisar${reviewParams?.amount && ' '}${reviewParams?.amount}}`,
         not: 'No',
         privacyPolicy: 'la Política de Privacidad de Expensify',
         addCardTermsOfService: 'Términos de Servicio',
diff --git a/src/languages/params.ts b/src/languages/params.ts
index 8cd0b9d58b1c..b452aae2e998 100644
--- a/src/languages/params.ts
+++ b/src/languages/params.ts
@@ -659,6 +659,10 @@ type PolicyExpenseChatNameParams = {
     displayName: string;
 };
 
+type ReviewParams = {
+    amount: string;
+};
+
 export type {
     AuthenticationErrorParams,
     ImportMembersSuccessfullDescriptionParams,
@@ -895,4 +899,5 @@ export type {
     SettlementDateParams,
     PolicyExpenseChatNameParams,
     NeedCategoryForExportToIntegrationParams,
+    ReviewParams,
 };
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 3a5cbf37ce93..a583da653005 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -9476,6 +9476,10 @@ function isTestTransactionReport(report: OnyxEntry<Report>): boolean {
     return isSelectedManagerMcTest(persionalDetails?.login);
 }
 
+function isWaitingForSubmissionFromCurrentUser(chatReport: OnyxEntry<Report>, policy: OnyxEntry<Policy>) {
+    return chatReport?.isOwnPolicyExpenseChat && !policy?.harvesting?.enabled;
+}
+
 function getGroupChatDraft() {
     return newGroupChatDraft;
 }
@@ -9749,6 +9753,7 @@ export {
     isValidReport,
     isValidReportIDFromPath,
     isWaitingForAssigneeToCompleteAction,
+    isWaitingForSubmissionFromCurrentUser,
     isInvoiceRoom,
     isInvoiceRoomWithID,
     isInvoiceReport,
diff --git a/src/libs/TransactionPreviewUtils.ts b/src/libs/TransactionPreviewUtils.ts
index 817f152079f5..6ee158603460 100644
--- a/src/libs/TransactionPreviewUtils.ts
+++ b/src/libs/TransactionPreviewUtils.ts
@@ -123,7 +123,7 @@ function getTransactionPreviewTextAndTranslationPaths({
 }: {
     iouReport: OnyxEntry<OnyxTypes.Report>;
     transaction: OnyxEntry<OnyxTypes.Transaction>;
-    action: OnyxTypes.ReportAction;
+    action: OnyxEntry<OnyxTypes.ReportAction>;
     violations: OnyxTypes.TransactionViolations;
     transactionDetails: Partial<TransactionDetails>;
     isBillSplit: boolean;
@@ -256,7 +256,7 @@ function createTransactionPreviewConditionals({
 }: {
     iouReport: OnyxInputValue<OnyxTypes.Report> | undefined;
     transaction: OnyxEntry<OnyxTypes.Transaction> | undefined;
-    action: OnyxTypes.ReportAction;
+    action: OnyxEntry<OnyxTypes.ReportAction>;
     violations: OnyxTypes.TransactionViolations;
     transactionDetails: Partial<TransactionDetails>;
     isBillSplit: boolean;
@@ -284,7 +284,7 @@ function createTransactionPreviewConditionals({
     const isFullyApproved = isApproved && !isSettlementOrApprovalPartial;
 
     const shouldDisableOnPress = isBillSplit && isEmptyObject(transaction);
-    const shouldShowSkeleton = isEmptyObject(transaction) && !isMessageDeleted(action) && action.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+    const shouldShowSkeleton = isEmptyObject(transaction) && !isMessageDeleted(action) && action?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
     const shouldShowTag = !!tag && isReportAPolicyExpenseChat;
     const shouldShowCategory = !!category && isReportAPolicyExpenseChat;
 
diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx
index 81e1d78da06d..5d74fe920a18 100644
--- a/src/pages/home/report/PureReportActionItem.tsx
+++ b/src/pages/home/report/PureReportActionItem.tsx
@@ -26,6 +26,7 @@ import ChronosOOOListActions from '@components/ReportActionItem/ChronosOOOListAc
 import ExportIntegration from '@components/ReportActionItem/ExportIntegration';
 import IssueCardMessage from '@components/ReportActionItem/IssueCardMessage';
 import MoneyRequestAction from '@components/ReportActionItem/MoneyRequestAction';
+import MoneyRequestReportPreview from '@components/ReportActionItem/MoneyRequestReportPreview';
 import ReportPreview from '@components/ReportActionItem/ReportPreview';
 import TaskAction from '@components/ReportActionItem/TaskAction';
 import TaskPreview from '@components/ReportActionItem/TaskPreview';
@@ -34,6 +35,7 @@ import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import UnreadActionIndicator from '@components/UnreadActionIndicator';
 import useLocalize from '@hooks/useLocalize';
+import usePermissions from '@hooks/usePermissions';
 import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -317,6 +319,12 @@ type PureReportActionItemProps = {
     reportAutomaticallyForwardedMessage?: string;
 };
 
+// This is equivalent to returning a negative boolean in normal functions, but we can keep the element return type
+// If the child was rendered using RenderHTML and an empty html string, it has an empty prop called html
+// If we render an empty component/fragment, this does not apply
+const emptyHTML = <RenderHTML html="" />;
+const isEmptyHTML = <T extends React.JSX.Element>({props: {html}}: T): boolean => typeof html === 'string' && html.length === 0;
+
 /**
  * This is a pure version of ReportActionItem, used in ReportActionList and Search result chat list items.
  * Since the search result has a separate Onyx key under the 'snapshot_' prefix, we should not connect this component with Onyx.
@@ -378,6 +386,7 @@ function PureReportActionItem({
     const [isContextMenuActive, setIsContextMenuActive] = useState(() => isActiveReportAction(action.reportActionID));
     const [isEmojiPickerActive, setIsEmojiPickerActive] = useState<boolean | undefined>();
     const [isPaymentMethodPopoverActive, setIsPaymentMethodPopoverActive] = useState<boolean | undefined>();
+    const {canUseTableReportView} = usePermissions();
 
     const [isHidden, setIsHidden] = useState(false);
     const [moderationDecision, setModerationDecision] = useState<OnyxTypes.DecisionName>(CONST.MODERATION.MODERATOR_DECISION_APPROVED);
@@ -745,6 +754,11 @@ function PureReportActionItem({
                     shouldDisplayContextMenu={shouldDisplayContextMenu}
                 />
             );
+
+            // Table Report View does not display these components as separate messages
+            if (canUseTableReportView) {
+                children = emptyHTML;
+            }
         } else if (isTripPreview(action)) {
             children = (
                 <TripRoomPreview
@@ -756,10 +770,26 @@ function PureReportActionItem({
                     checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
                 />
             );
+        } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW && isClosedExpenseReportWithNoExpenses) {
+            children = <RenderHTML html={`<deleted-action>${translate('parentReportAction.deletedReport')}</deleted-action>`} />;
+        } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW && canUseTableReportView) {
+            children = (
+                <MoneyRequestReportPreview
+                    // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+                    iouReportID={getIOUReportIDFromReportActionPreview(action) as string}
+                    policyID={report?.policyID}
+                    chatReportID={reportID}
+                    action={action}
+                    contextMenuAnchor={popoverAnchorRef.current}
+                    isHovered={hovered}
+                    isWhisper={isWhisper}
+                    checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
+                    onPaymentOptionsShow={() => setIsPaymentMethodPopoverActive(true)}
+                    onPaymentOptionsHide={() => setIsPaymentMethodPopoverActive(false)}
+                />
+            );
         } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW) {
-            children = isClosedExpenseReportWithNoExpenses ? (
-                <RenderHTML html={`<deleted-action>${translate('parentReportAction.deletedReport')}</deleted-action>`} />
-            ) : (
+            children = (
                 <ReportPreview
                     // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
                     iouReportID={getIOUReportIDFromReportActionPreview(action) as string}
@@ -1037,7 +1067,7 @@ function PureReportActionItem({
                 .filter((accountID): accountID is number => typeof accountID === 'number') ?? [];
         const draftMessageRightAlign = draftMessage !== undefined ? styles.chatItemReactionsDraftRight : {};
 
-        return (
+        const itemContent = (
             <>
                 {children}
                 {Permissions.canUseLinkPreviews() && !isHidden && (action.linkMetadata?.length ?? 0) > 0 && (
@@ -1083,6 +1113,8 @@ function PureReportActionItem({
                 )}
             </>
         );
+
+        return isEmptyHTML(children) ? emptyHTML : itemContent;
     };
 
     /**
@@ -1096,6 +1128,10 @@ function PureReportActionItem({
     const renderReportActionItem = (hovered: boolean, isWhisper: boolean, hasErrors: boolean): React.JSX.Element => {
         const content = renderItemContent(hovered || isContextMenuActive || isEmojiPickerActive, isWhisper, hasErrors);
 
+        if (canUseTableReportView && isEmptyHTML(content)) {
+            return content;
+        }
+
         if (draftMessage !== undefined) {
             return <ReportActionItemDraft>{content}</ReportActionItemDraft>;
         }
diff --git a/src/stories/MoneyRequestReportPreview.stories.tsx b/src/stories/MoneyRequestReportPreview.stories.tsx
new file mode 100644
index 000000000000..64ae452c6a09
--- /dev/null
+++ b/src/stories/MoneyRequestReportPreview.stories.tsx
@@ -0,0 +1,179 @@
+import type {StoryFn} from '@storybook/react/*';
+import React from 'react';
+import type {ListRenderItem} from 'react-native';
+import {View} from 'react-native';
+import MoneyRequestReportPreviewContent from '@components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent';
+import type {MoneyRequestReportPreviewContentProps} from '@components/ReportActionItem/MoneyRequestReportPreview/types';
+import TransactionPreviewContent from '@components/ReportActionItem/TransactionPreview/TransactionPreviewContent';
+import ThemeProvider from '@components/ThemeProvider';
+import ThemeStylesProvider from '@components/ThemeStylesProvider';
+// eslint-disable-next-line no-restricted-imports
+import getMoneyRequestReportPreviewStyle from '@styles/utils/getMoneyRequestReportPreviewStyle';
+// eslint-disable-next-line no-restricted-imports
+import sizing from '@styles/utils/sizing';
+import CONST from '@src/CONST';
+import SCREENS from '@src/SCREENS';
+import type {Transaction} from '@src/types/onyx';
+import {action, chatReport, iouReport, personalDetails, receiptErrors, transaction, violations} from './mockData/transactions';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+
+const mockTransactionsMedium = Array.from({length: 2}).map((item, index) => {
+    return {...transaction, transactionID: `${index}`};
+});
+
+const mockTransactionsBig = Array.from({length: 12}).map((item, index) => {
+    return {...transaction, transactionID: `${index}`};
+});
+
+const style = getMoneyRequestReportPreviewStyle(false);
+
+const mockRenderItem: ListRenderItem<Transaction> = ({item}) => (
+    <TransactionPreviewContent
+        action={action}
+        isWhisper={false}
+        isHovered={false}
+        chatReport={chatReport}
+        personalDetails={personalDetails}
+        iouReport={iouReport}
+        transaction={item}
+        violations={item.errors ? violations : []}
+        showContextMenu={() => undefined}
+        offlineWithFeedbackOnClose={() => undefined}
+        navigateToReviewFields={() => undefined}
+        onPreviewPressed={() => true}
+        isBillSplit={false}
+        areThereDuplicates={false}
+        sessionAccountID={11111111}
+        walletTermsErrors={undefined}
+        routeName={SCREENS.TRANSACTION_DUPLICATE.REVIEW}
+        shouldHideOnDelete={false}
+        wrapperStyles={style.transactionPreviewStyle}
+        containerStyles={[sizing.h100]}
+    />
+);
+
+type MoneyRequestReportPreviewStory = StoryFn<typeof MoneyRequestReportPreviewContent>;
+
+export default {
+    title: 'Components/MoneyRequestReportPreviewContent',
+    component: MoneyRequestReportPreviewContent,
+    argTypes: {
+        /** The associated chatReport */
+        chatReportID: {
+            options: ['chatReportID', undefined],
+            control: {type: 'radio'},
+        },
+        /** The active IOUReport, used for Onyx subscription */
+        iouReportID: {
+            options: ['iouReportID', undefined],
+            control: {type: 'radio'},
+        },
+        /** The report's policyID, used for Onyx subscription */
+        policyID: {
+            options: ['policyID', undefined],
+            control: {type: 'radio'},
+        },
+        /** Extra styles to pass to View wrapper */
+        containerStyles: {
+            options: [{marginTop: 8}],
+            control: {type: 'radio'},
+        },
+        /** Popover context menu anchor, used for showing context menu */
+        contextMenuAnchor: {
+            options: [null],
+            control: {type: 'radio'},
+        },
+        /** Callback for updating context menu active state, used for showing context menu */
+        chceckIfContextMenuActive: {
+            options: [undefined, () => {}],
+            control: {type: 'radio'},
+        },
+        /** Callback when the payment options popover is shown */
+        onPaymentOptionsShow: {
+            options: [undefined, () => {}],
+            control: {type: 'radio'},
+        },
+        /** Callback when the payment options popover is closed */
+        onPaymentOptionsHide: {
+            options: [undefined, () => {}],
+            control: {type: 'radio'},
+        },
+        /** Whether a message is a whisper */
+        isWhisper: {
+            options: [true, false, undefined],
+            control: {type: 'radio'},
+        },
+        /** Whether the corresponding report action item is hovered */
+        isHovered: {
+            control: {type: 'boolean'},
+        },
+    },
+    args: {
+        action,
+        chatReport,
+        policy: undefined,
+        iouReport,
+        transactions: mockTransactionsMedium,
+        violations,
+        invoiceReceiverPersonalDetail: undefined,
+        invoiceReceiverPolicy: undefined,
+        renderItem: mockRenderItem,
+    },
+    parameters: {
+        useLightTheme: true,
+    },
+};
+
+function Template(props: MoneyRequestReportPreviewContentProps, {parameters}: {parameters: {useLightTheme?: boolean; transactionsBig?: boolean}}) {
+    const theme = parameters.useLightTheme ? CONST.THEME.LIGHT : CONST.THEME.DARK;
+    const transactions = parameters.transactionsBig ? mockTransactionsBig : props.transactions;
+
+    return (
+        <ThemeProvider theme={theme}>
+            <ThemeStylesProvider>
+                <View style={{maxWidth: '100%'}}>
+                    <MoneyRequestReportPreviewContent
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...props}
+                        containerStyles={[style.componentStyle, props.containerStyles]}
+                        transactions={transactions}
+                    />
+                </View>
+            </ThemeStylesProvider>
+        </ThemeProvider>
+    );
+}
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default: MoneyRequestReportPreviewStory = Template.bind({});
+const DarkTheme: MoneyRequestReportPreviewStory = Template.bind({});
+const OneTransaction: MoneyRequestReportPreviewStory = Template.bind({});
+const ManyTransactions: MoneyRequestReportPreviewStory = Template.bind({});
+const HasErrors: MoneyRequestReportPreviewStory = Template.bind({});
+
+DarkTheme.parameters = {
+    useLightTheme: false,
+};
+
+OneTransaction.args = {
+    transactions: [transaction],
+};
+
+ManyTransactions.parameters = {
+    transactionsBig: true,
+};
+
+HasErrors.args = {
+    transactions: mockTransactionsMedium.map((t) => ({
+        ...t,
+        errors: receiptErrors,
+    })),
+};
+
+export {Default, DarkTheme, ManyTransactions, HasErrors, OneTransaction};
diff --git a/src/stories/TransactionPreviewContent.stories.tsx b/src/stories/TransactionPreviewContent.stories.tsx
index 3f7f2f8a79b9..b5cceeef83cd 100644
--- a/src/stories/TransactionPreviewContent.stories.tsx
+++ b/src/stories/TransactionPreviewContent.stories.tsx
@@ -112,6 +112,7 @@ const story: Meta<typeof TransactionPreviewContent> = {
         walletTermsErrors: undefined,
         routeName: SCREENS.TRANSACTION_DUPLICATE.REVIEW,
         shouldHideOnDelete: false,
+        wrapperStyles: {width: 256},
     },
     argTypes: {
         ...disabledProperties,
diff --git a/src/stories/mockData/transactions.ts b/src/stories/mockData/transactions.ts
index 5e7730a4726a..b228c404edba 100644
--- a/src/stories/mockData/transactions.ts
+++ b/src/stories/mockData/transactions.ts
@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import CONST from '@src/CONST';
 import type {OriginalMessageIOU, PersonalDetailsList, Report, ReportAction, Transaction, TransactionViolations} from '@src/types/onyx';
+import type {ReceiptErrors} from '@src/types/onyx/Transaction';
 
 const amount = 1000;
-const currency = 'USD';
+const currency = CONST.CURRENCY.USD;
 
 const REPORT_ID_456 = 'R98765';
 const REPORT_ID_111 = '1111111111111111';
@@ -111,7 +112,7 @@ const iouReport: Report = {
     },
     permissions: [CONST.REPORT.PERMISSIONS.READ, CONST.REPORT.PERMISSIONS.WRITE],
     policyID: CONST.POLICY.ID_FAKE,
-    reportID: '111111111111111',
+    reportID: '1111111111111111',
     reportName: 'IOU',
     stateNum: CONST.REPORT.STATE_NUM.APPROVED,
     statusNum: CONST.REPORT.STATUS_NUM.OPEN,
@@ -163,7 +164,7 @@ const chatReport: Report = {
     reportName: 'Chat Report',
     stateNum: 0,
     statusNum: 0,
-    total: 0,
+    total: 100,
     type: 'chat',
     unheldNonReimbursableTotal: 0,
     unheldTotal: 0,
@@ -201,7 +202,7 @@ const transaction: Transaction = {
         source: 'mockData/eReceiptBGs/eReceiptBG_pink.png',
     },
     reimbursable: true,
-    reportID: '111111111111111',
+    reportID: '1111111111111111',
     status: CONST.TRANSACTION.STATUS.POSTED,
     tag: '',
     transactionID: '1111111111111111111',
@@ -236,7 +237,6 @@ const fakeTransaction456: Transaction = {
     reportID: '111111111111111',
     status: CONST.TRANSACTION.STATUS.POSTED,
     tag: '',
-
     hasEReceipt: true,
 };
 
@@ -259,7 +259,7 @@ const violations: TransactionViolations = [
 ];
 
 const originalMessage: OriginalMessageIOU = {
-    IOUReportID: '111111111111111',
+    IOUReportID: '1111111111111111',
     IOUTransactionID: '590639150582440369',
     amount,
     comment: '',
@@ -293,9 +293,10 @@ const action: ReportAction = {
             deleted: '',
         },
     ],
-    actionName: 'IOU',
+    actionName: CONST.REPORT.ACTIONS.TYPE.IOU,
     originalMessage,
     childReportID: REPORT_ID_111,
+    childReportName: 'Expense #123456789',
     created: '2025-02-14 08:12:05.165',
     actorAccountID: 11111111,
     childType: 'chat',
@@ -308,6 +309,20 @@ const action: ReportAction = {
     ],
 };
 
+const receiptErrors: ReceiptErrors = {
+    '1201421': {
+        source: 'fake',
+        filename: 'fake',
+        action: 'fake',
+        retryParams: {
+            transactionID: '1111111111111111111',
+            source: 'fake',
+        },
+    },
+};
+
+/* eslint-enable @typescript-eslint/naming-convention */
+
 const fakeAction456: ReportAction = {
     reportActionID: 'ra456',
     message: [
@@ -336,4 +351,4 @@ const fakeAction456: ReportAction = {
     ],
 };
 
-export {personalDetails, iouReport, chatReport, transaction, violations, action, fakeAction456, fakeTransaction456};
+export {personalDetails, iouReport, chatReport, transaction, violations, action, fakeAction456, fakeTransaction456, receiptErrors};
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 9d42ea33da94..51fc21e776aa 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5563,6 +5563,21 @@ const styles = (theme: ThemeColors) =>
             borderLeftWidth: isExtraLargeScreenWidth ? 1 : 0,
             borderLeftColor: theme.border,
         }),
+        reportPreviewCarouselDots: {
+            borderRadius: 50,
+            width: 8,
+            height: 8,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        reportPreviewArrowButton: {
+            borderRadius: 50,
+            width: 28,
+            height: 28,
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginLeft: 4,
+        },
 
         expenseWidgetRadius: {
             borderRadius: variables.componentBorderRadiusNormal,
diff --git a/src/styles/utils/getMoneyRequestReportPreviewStyle/index.ts b/src/styles/utils/getMoneyRequestReportPreviewStyle/index.ts
new file mode 100644
index 000000000000..ea82298f0043
--- /dev/null
+++ b/src/styles/utils/getMoneyRequestReportPreviewStyle/index.ts
@@ -0,0 +1,34 @@
+import type {MoneyRequestReportPreviewStyleType} from '@components/ReportActionItem/MoneyRequestReportPreview/types';
+// eslint-disable-next-line no-restricted-imports
+import sizing from '@styles/utils/sizing';
+// eslint-disable-next-line no-restricted-imports
+import spacing from '@styles/utils/spacing';
+
+const componentsSpacing = {
+    flatListStyle: [spacing.mhn4],
+    wrapperStyle: spacing.p4,
+    contentContainerStyle: spacing.gap4,
+};
+
+const NEXT_TRANSACTION_PEEK = 32;
+
+const mobileStyle = (currentWidth: number, isSingleTransaction?: boolean) => {
+    const peek = isSingleTransaction ? spacing.p4.padding : NEXT_TRANSACTION_PEEK;
+    const transactionPreviewWidth = currentWidth - spacing.p4.padding - peek;
+    return {
+        transactionPreviewStyle: {width: transactionPreviewWidth, maxWidth: transactionPreviewWidth},
+        componentStyle: [sizing.mw100, {width: '100%'}],
+    };
+};
+
+const desktopStyle = {
+    transactionPreviewStyle: {width: 303},
+    componentStyle: [{maxWidth: 'min(680px, 100%)'}, {width: 'min-content'}],
+};
+
+const getMoneyRequestReportPreviewStyle = (shouldUseNarrowLayout: boolean, currentWidth?: number, isSingleTransaction?: boolean): MoneyRequestReportPreviewStyleType => ({
+    ...componentsSpacing,
+    ...(shouldUseNarrowLayout ? mobileStyle(currentWidth ?? 256, isSingleTransaction) : desktopStyle),
+});
+
+export default getMoneyRequestReportPreviewStyle;
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 2885d80b289c..1d8faeb41cc7 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -24,6 +24,7 @@ import createReportActionContextMenuStyleUtils from './generators/ReportActionCo
 import createTooltipStyleUtils from './generators/TooltipStyleUtils';
 import getContextMenuItemStyles from './getContextMenuItemStyles';
 import getHighResolutionInfoWrapperStyle from './getHighResolutionInfoWrapperStyle';
+import getMoneyRequestReportPreviewStyle from './getMoneyRequestReportPreviewStyle';
 import getNavigationBarType from './getNavigationBarType/index';
 import getNavigationModalCardStyle from './getNavigationModalCardStyles';
 import getSafeAreaInsets from './getSafeAreaInsets';
@@ -1209,6 +1210,7 @@ const staticStyleUtils = {
     getHorizontalStackedAvatarBorderStyle,
     getHorizontalStackedAvatarStyle,
     getHorizontalStackedOverlayAvatarStyle,
+    getMoneyRequestReportPreviewStyle,
     getReportWelcomeBackgroundImageStyle,
     getReportWelcomeBackgroundContainerStyle,
     getBaseAutoCompleteSuggestionContainerStyle,
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index 340ea7564ce2..c13e413e5ca9 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -59,6 +59,10 @@ export default {
         marginHorizontal: -8,
     },
 
+    mhn4: {
+        marginHorizontal: -16,
+    },
+
     mhn5: {
         marginHorizontal: -20,
     },
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 6c4eb2265d5f..8d0391f73874 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -241,6 +241,7 @@ export default {
     menuIconSize: 48,
 
     moneyRequestSkeletonHeight: 107,
+    transactionPreviewSkeletonHeight: 66,
 
     distanceScrollEventThrottle: 16,
 
@@ -289,6 +290,7 @@ export default {
     h28: 28,
     h36: 36,
     h40: 40,
+    h70: 70,
     h112: 112,
     h172: 172,
     w20: 20,
diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx
new file mode 100644
index 000000000000..e94c113c2ebc
--- /dev/null
+++ b/tests/ui/MoneyRequestReportPreview.test.tsx
@@ -0,0 +1,165 @@
+import {PortalProvider} from '@gorhom/portal';
+import * as NativeNavigation from '@react-navigation/native';
+import {render, screen} from '@testing-library/react-native';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import Onyx from 'react-native-onyx';
+import ComposeProviders from '@components/ComposeProviders';
+import {LocaleContextProvider} from '@components/LocaleContextProvider';
+import OnyxProvider from '@components/OnyxProvider';
+import OptionsListContextProvider from '@components/OptionListContextProvider';
+import MoneyRequestReportPreview from '@components/ReportActionItem/MoneyRequestReportPreview';
+import type {MoneyRequestReportPreviewProps} from '@components/ReportActionItem/MoneyRequestReportPreview/types';
+import ScreenWrapper from '@components/ScreenWrapper';
+import TransactionPreviewSkeletonView from '@components/TransactionPreviewSkeletonView';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
+import DateUtils from '@libs/DateUtils';
+import {translateLocal} from '@libs/Localize';
+import {getFormattedCreated, isCardTransaction} from '@libs/TransactionUtils';
+import CONST from '@src/CONST';
+import * as ReportActionUtils from '@src/libs/ReportActionsUtils';
+import * as ReportUtils from '@src/libs/ReportUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {
+    action as mockAction,
+    chatReport as mockChatReport,
+    iouReport as mockIOUReport,
+    transaction as mockTransaction,
+    violations as mockViolations,
+} from '@src/stories/mockData/transactions';
+import type {Report, Transaction, TransactionViolation, TransactionViolations} from '@src/types/onyx';
+import * as TestHelper from '../utils/TestHelper';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct';
+
+const mockSecondTransactionID = `${mockTransaction.transactionID.substring(0, mockTransaction.transactionID.length - 1)}2`;
+
+jest.mock('@react-navigation/native');
+
+jest.mock('@rnmapbox/maps', () => {
+    return {
+        default: jest.fn(),
+        MarkerView: jest.fn(),
+        setAccessToken: jest.fn(),
+    };
+});
+
+jest.mock('@react-native-community/geolocation', () => ({
+    setRNConfiguration: jest.fn(),
+}));
+
+jest.mock('@src/hooks/useReportWithTransactionsAndViolations', () =>
+    jest.fn((): [OnyxEntry<Report>, Transaction[], OnyxCollection<TransactionViolation[]>] => {
+        return [mockChatReport, [mockTransaction, {...mockTransaction, transactionID: mockSecondTransactionID}], {violations: mockViolations}];
+    }),
+);
+
+const getIOUActionForReportID = (reportID: string | undefined, transactionID: string | undefined) => {
+    if (!reportID || !transactionID) {
+        return undefined;
+    }
+    return {...mockAction, originalMessage: {...mockAction, IOUTransactionID: transactionID}};
+};
+
+const hasViolations = (reportID: string | undefined, transactionViolations: OnyxCollection<TransactionViolation[]>, shouldShowInReview?: boolean) =>
+    (shouldShowInReview === undefined || shouldShowInReview) && Object.values(transactionViolations ?? {}).length > 0;
+
+const renderPage = ({isWhisper = false, isHovered = false, contextMenuAnchor = null}: Partial<MoneyRequestReportPreviewProps>) => {
+    return render(
+        <ComposeProviders components={[OnyxProvider, LocaleContextProvider]}>
+            <OptionsListContextProvider>
+                <ScreenWrapper testID="test">
+                    <PortalProvider>
+                        <MoneyRequestReportPreview
+                            policyID={mockChatReport.policyID}
+                            action={mockAction}
+                            iouReportID={mockIOUReport.iouReportID}
+                            chatReportID={mockChatReport.chatReportID}
+                            containerStyles={[]}
+                            contextMenuAnchor={contextMenuAnchor}
+                            checkIfContextMenuActive={() => {}}
+                            onPaymentOptionsShow={() => {}}
+                            onPaymentOptionsHide={() => {}}
+                            isHovered={isHovered}
+                            isWhisper={isWhisper}
+                        />
+                    </PortalProvider>
+                </ScreenWrapper>
+            </OptionsListContextProvider>
+        </ComposeProviders>,
+    );
+};
+
+const getTransactionDisplayAmountAndHeaderText = (transaction: Transaction) => {
+    const created = getFormattedCreated(transaction);
+    const date = DateUtils.formatWithUTCTimeZone(created, DateUtils.doesDateBelongToAPastYear(created) ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT);
+    const isTransactionMadeWithCard = isCardTransaction(transaction);
+    const cashOrCard = isTransactionMadeWithCard ? translateLocal('iou.card') : translateLocal('iou.cash');
+    const transactionHeaderText = `${date} ${CONST.DOT_SEPARATOR} ${cashOrCard}`;
+    const transactionDisplayAmount = convertToDisplayString(transaction.amount, transaction.currency);
+    return {transactionHeaderText, transactionDisplayAmount};
+};
+
+const mockSecondTransaction: Transaction = {
+    ...mockTransaction,
+    amount: mockTransaction.amount * 2,
+    transactionID: mockSecondTransactionID,
+};
+
+const mockOnyxTransactions: Record<`${typeof ONYXKEYS.COLLECTION.TRANSACTION}${string}`, Transaction> = {
+    [`${ONYXKEYS.COLLECTION.TRANSACTION}${mockTransaction.transactionID}`]: mockTransaction,
+    [`${ONYXKEYS.COLLECTION.TRANSACTION}${mockSecondTransaction.transactionID}`]: mockSecondTransaction,
+};
+
+const mockOnyxViolations: Record<`${typeof ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${string}`, TransactionViolations> = {
+    [`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${mockTransaction.transactionID}`]: mockViolations,
+};
+
+const arrayOfTransactions = Object.values(mockOnyxTransactions);
+
+TestHelper.setupApp();
+TestHelper.setupGlobalFetchMock();
+
+describe('MoneyRequestReportPreview', () => {
+    beforeAll(async () => {
+        Onyx.init({
+            keys: ONYXKEYS,
+        });
+        jest.spyOn(NativeNavigation, 'useRoute').mockReturnValue({key: '', name: ''});
+        jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(getIOUActionForReportID);
+        jest.spyOn(ReportUtils, 'hasViolations').mockImplementation(hasViolations);
+        await TestHelper.signInWithTestUser();
+    });
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        return Onyx.clear().then(waitForBatchedUpdates);
+    });
+
+    it('renders transaction details and associated report name correctly', async () => {
+        renderPage({});
+        await waitForBatchedUpdatesWithAct();
+        await Onyx.mergeCollection(ONYXKEYS.COLLECTION.TRANSACTION, mockOnyxTransactions).then(waitForBatchedUpdates);
+        const {childReportName: moneyRequestReportPreviewName = ''} = mockAction;
+        for (const transaction of arrayOfTransactions) {
+            const {transactionDisplayAmount, transactionHeaderText} = getTransactionDisplayAmountAndHeaderText(transaction);
+
+            expect(screen.getByText(moneyRequestReportPreviewName)).toBeOnTheScreen();
+            expect(screen.getByText(transactionDisplayAmount)).toBeOnTheScreen();
+            expect(screen.getAllByText(transactionHeaderText)).toHaveLength(arrayOfTransactions.length);
+            expect(screen.getAllByText(transaction.merchant)).toHaveLength(arrayOfTransactions.length);
+        }
+    });
+
+    it('renders RBR for both transaction and report if there are violations', async () => {
+        renderPage({});
+        await waitForBatchedUpdatesWithAct();
+        await Onyx.multiSet({...mockOnyxTransactions, ...mockOnyxViolations});
+        expect(screen.getAllByText(translateLocal('violations.reviewRequired'))).toHaveLength(2);
+    });
+
+    it('renders a skeleton if the transaction is empty', async () => {
+        renderPage({});
+        await waitForBatchedUpdatesWithAct();
+        expect(screen.getAllByTestId(TransactionPreviewSkeletonView.displayName)).toHaveLength(2);
+    });
+});