diff --git a/src/components/ReportActionItem/MoneyRequestAction.tsx b/src/components/ReportActionItem/MoneyRequestAction.tsx
index 2936fddd0376..b07f70c89038 100644
--- a/src/components/ReportActionItem/MoneyRequestAction.tsx
+++ b/src/components/ReportActionItem/MoneyRequestAction.tsx
@@ -112,6 +112,10 @@ function MoneyRequestAction({
         }
         return <RenderHTML html={`<deleted-action ${CONST.REVERSED_TRANSACTION_ATTRIBUTE}="${isReversedTransaction}">${translate(message)}</deleted-action>`} />;
     }
+
+    // TODO: this part of code is needed here if we want to replace MoneyRequestPreview with TransactionPreview
+    // const renderCondition = lodashIsEmpty(iouReport) && !(isSplitBillAction || isTrackExpenseAction);
+    // return renderCondition ? null : (
     return (
         <MoneyRequestPreview
             iouReportID={requestReportID}
diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
new file mode 100644
index 000000000000..f5ab1268d919
--- /dev/null
+++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
@@ -0,0 +1,288 @@
+import React, {useMemo} from 'react';
+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 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 {getCleanedTagName} from '@libs/PolicyUtils';
+import variables from '@styles/variables';
+import type {TransactionPreviewUIProps} from './types';
+
+function TransactionPreviewContent({
+    isDeleted,
+    isScanning,
+    isWhisper,
+    isHovered,
+    isSettled,
+    isBillSplit,
+    isApproved,
+    isSettlementOrApprovalPartial,
+    isReviewDuplicateTransactionPage,
+    shouldShowSkeleton,
+    shouldShowRBR,
+    shouldDisableOnPress,
+    shouldShowKeepButton,
+    shouldShowDescription,
+    shouldShowMerchant,
+    shouldShowCategory,
+    shouldShowTag,
+    displayAmount,
+    category,
+    showCashOrCard,
+    tag,
+    requestCurrency,
+    merchantOrDescription,
+    previewHeaderText,
+    requestAmount,
+    splitShare,
+    receiptImages,
+    sortedParticipantAvatars,
+    containerStyles,
+    walletTermsErrors,
+    pendingAction,
+    showContextMenu,
+    offlineWithFeedbackOnClose,
+    translate,
+    navigateToReviewFields,
+    onPreviewPressed,
+    RBRmessage,
+    from,
+    to,
+    isIOU,
+}: TransactionPreviewUIProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
+    const themeStyles = useMemo(
+        () => [
+            {
+                backgroundColor: theme.cardBG,
+            },
+        ],
+        [theme.cardBG],
+    );
+
+    const shouldShowCategoryOrTag = shouldShowCategory || shouldShowTag;
+
+    const childContainer = (
+        <View>
+            <OfflineWithFeedback
+                errors={walletTermsErrors}
+                onClose={() => offlineWithFeedbackOnClose}
+                errorRowStyles={[styles.mbn1]}
+                needsOffscreenAlphaCompositing
+                pendingAction={pendingAction}
+                shouldDisableStrikeThrough={isDeleted}
+                shouldDisableOpacity={isDeleted}
+            >
+                <View
+                    style={[
+                        isScanning || isWhisper ? [styles.reportPreviewBoxHoverBorder, styles.reportContainerBorderRadius] : undefined,
+                        !onPreviewPressed ? [styles.moneyRequestPreviewBox, containerStyles, themeStyles] : {},
+                    ]}
+                >
+                    {!isDeleted && (
+                        <ReportActionItemImages
+                            images={receiptImages}
+                            isHovered={isHovered || isScanning}
+                            size={1}
+                        />
+                    )}
+                    {shouldShowSkeleton ? (
+                        <MoneyRequestSkeletonView />
+                    ) : (
+                        <View style={[styles.expenseAndReportPreviewBoxBody, styles.mtn1]}>
+                            <View style={styles.gap3}>
+                                <View style={styles.expenseAndReportPreviewTextContainer}>
+                                    {isIOU && !!from && !!to && (
+                                        <View style={[styles.flex1, styles.dFlex, styles.alignItemsCenter, styles.gap2, styles.flexRow]}>
+                                            <UserInfoCellsWithArrow
+                                                styles={styles}
+                                                theme={theme}
+                                                shouldDisplayArrowIcon
+                                                participantFrom={from}
+                                                participantFromDisplayName={from.displayName ?? from.login ?? ''}
+                                                participantTo={to}
+                                                participantToDisplayName={to.displayName ?? to.login ?? ''}
+                                                avatarSize="subscript"
+                                            />
+                                        </View>
+                                    )}
+                                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                        <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16]}>{previewHeaderText}</Text>
+                                        {isBillSplit && (
+                                            <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                                <MultipleAvatars
+                                                    icons={sortedParticipantAvatars}
+                                                    shouldStackHorizontally
+                                                    size="subscript"
+                                                    shouldUseCardBackground
+                                                />
+                                            </View>
+                                        )}
+                                        {!isBillSplit && !shouldShowDescription && !shouldShowMerchant && (
+                                            <Text
+                                                fontSize={variables.fontSizeNormal}
+                                                style={[isDeleted && styles.lineThrough]}
+                                                numberOfLines={1}
+                                            >
+                                                {displayAmount}
+                                            </Text>
+                                        )}
+                                    </View>
+                                    <View>
+                                        <View style={[styles.flexRow]}>
+                                            <View
+                                                style={[
+                                                    styles.flex1,
+                                                    styles.flexRow,
+                                                    styles.alignItemsCenter,
+                                                    !shouldShowMerchant && !shouldShowDescription && isBillSplit ? styles.justifyContentEnd : styles.justifyContentBetween,
+                                                ]}
+                                            >
+                                                {(shouldShowMerchant || shouldShowDescription) && (
+                                                    <Text
+                                                        fontSize={variables.fontSizeNormal}
+                                                        style={[isDeleted && styles.lineThrough]}
+                                                        numberOfLines={1}
+                                                    >
+                                                        {merchantOrDescription}
+                                                    </Text>
+                                                )}
+                                                {(shouldShowMerchant || shouldShowDescription || isBillSplit) && (
+                                                    <Text
+                                                        fontSize={variables.fontSizeNormal}
+                                                        style={[isDeleted && styles.lineThrough]}
+                                                        numberOfLines={1}
+                                                    >
+                                                        {displayAmount}
+                                                    </Text>
+                                                )}
+                                            </View>
+                                        </View>
+                                        <View style={[styles.flexRow, styles.justifyContentEnd]}>
+                                            {!!splitShare && (
+                                                <Text style={[styles.textLabel, styles.colorMuted, styles.amountSplitPadding]}>
+                                                    {translate('iou.yourSplit', {amount: convertToDisplayString(splitShare, requestCurrency)})}
+                                                </Text>
+                                            )}
+                                        </View>
+                                    </View>
+                                    {shouldShowCategoryOrTag && (
+                                        <View style={[styles.flexRow, styles.pt1, styles.alignItemsCenter]}>
+                                            {shouldShowCategory && (
+                                                <View
+                                                    style={[
+                                                        styles.flexRow,
+                                                        styles.alignItemsCenter,
+                                                        styles.gap1,
+                                                        shouldShowTag && styles.mw50,
+                                                        shouldShowTag && styles.pr1,
+                                                        styles.flexShrink1,
+                                                    ]}
+                                                >
+                                                    <Icon
+                                                        src={Folder}
+                                                        height={variables.iconSizeExtraSmall}
+                                                        width={variables.iconSizeExtraSmall}
+                                                        fill={theme.icon}
+                                                    />
+                                                    <Text
+                                                        numberOfLines={1}
+                                                        style={[styles.textMicroSupporting, styles.pre, styles.flexShrink1]}
+                                                    >
+                                                        {category}
+                                                    </Text>
+                                                </View>
+                                            )}
+                                            {shouldShowTag && !!tag && (
+                                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap1, category && styles.pl1]}>
+                                                    <Icon
+                                                        src={Tag}
+                                                        height={variables.iconSizeExtraSmall}
+                                                        width={variables.iconSizeExtraSmall}
+                                                        fill={theme.icon}
+                                                    />
+                                                    <Text
+                                                        numberOfLines={1}
+                                                        style={[styles.textMicroSupporting, styles.pre, styles.flexShrink1]}
+                                                    >
+                                                        {getCleanedTagName(tag)}
+                                                    </Text>
+                                                </View>
+                                            )}
+                                        </View>
+                                    )}
+                                </View>
+                                {!isSettled && shouldShowRBR && (
+                                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
+                                        <Icon
+                                            src={DotIndicator}
+                                            fill={theme.danger}
+                                            height={variables.iconSizeExtraSmall}
+                                            width={variables.iconSizeExtraSmall}
+                                        />
+                                        <Text
+                                            numberOfLines={1}
+                                            style={[styles.textMicroSupporting, styles.pre, styles.flexShrink1, {color: theme.danger}]}
+                                        >
+                                            {RBRmessage}
+                                        </Text>
+                                    </View>
+                                )}
+                            </View>
+                        </View>
+                    )}
+                </View>
+            </OfflineWithFeedback>
+        </View>
+    );
+
+    if (!onPreviewPressed) {
+        return childContainer;
+    }
+
+    return (
+        <PressableWithoutFeedback
+            onPress={shouldDisableOnPress ? undefined : onPreviewPressed}
+            onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
+            onPressOut={() => ControlSelection.unblock()}
+            onLongPress={showContextMenu}
+            shouldUseHapticsOnLongPress
+            accessibilityLabel={isBillSplit ? translate('iou.split') : showCashOrCard}
+            accessibilityHint={convertToDisplayString(requestAmount, requestCurrency)}
+            style={[
+                styles.moneyRequestPreviewBox,
+                containerStyles,
+                themeStyles,
+                shouldDisableOnPress && styles.cursorDefault,
+                (isSettled || isApproved) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending,
+            ]}
+        >
+            {childContainer}
+            {isReviewDuplicateTransactionPage && !isSettled && !isApproved && shouldShowKeepButton && (
+                <Button
+                    text={translate('violations.keepThisOne')}
+                    success
+                    style={[styles.ph4, styles.pb2]}
+                    onPress={navigateToReviewFields}
+                />
+            )}
+        </PressableWithoutFeedback>
+    );
+}
+
+TransactionPreviewContent.displayName = 'TransactionPreviewContentUI';
+
+export default TransactionPreviewContent;
diff --git a/src/components/ReportActionItem/TransactionPreview/index.tsx b/src/components/ReportActionItem/TransactionPreview/index.tsx
new file mode 100644
index 000000000000..049727119ee2
--- /dev/null
+++ b/src/components/ReportActionItem/TransactionPreview/index.tsx
@@ -0,0 +1,71 @@
+import {useRoute} from '@react-navigation/native';
+import React, {useCallback, useMemo} from 'react';
+import type {GestureResponderEvent} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import useLocalize from '@hooks/useLocalize';
+import useTransactionPreviewData from '@hooks/useSingleExecution/useTransactionPreviewData';
+import useTransactionViolations from '@hooks/useTransactionViolations';
+import {getOriginalMessage, isMoneyRequestAction as isMoneyRequestActionReportActionsUtils} from '@libs/ReportActionsUtils';
+import {navigateToReviewFields} from '@libs/TransactionPreviewUtils';
+import {removeSettledAndApprovedTransactions} from '@libs/TransactionUtils';
+import type {PlatformStackRouteProp} from '@navigation/PlatformStackNavigation/types';
+import type {TransactionDuplicateNavigatorParamList} from '@navigation/types';
+import {clearWalletTermsError} from '@userActions/PaymentMethods';
+import {clearIOUError} from '@userActions/Report';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import TransactionPreviewContent from './TransactionPreviewContent';
+import type {TransactionPreviewProps} from './types';
+
+function TransactionPreview(props: TransactionPreviewProps) {
+    const {action, chatReportID, reportID, contextMenuAnchor, checkIfContextMenuActive = () => {}, shouldDisplayContextMenu} = props;
+
+    const {translate} = useLocalize();
+    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 [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+    const violations = useTransactionViolations(transaction?.transactionID);
+
+    // Get transaction violations for given transaction id from onyx, find duplicated transactions violations and get duplicates
+    const allDuplicates = useMemo(() => violations?.find((violation) => violation.name === CONST.VIOLATIONS.DUPLICATED_TRANSACTION)?.data?.duplicates ?? [], [violations]);
+    const duplicates = useMemo(() => removeSettledAndApprovedTransactions(allDuplicates), [allDuplicates]);
+    const areThereDuplicates = !!(allDuplicates.length && duplicates.length && allDuplicates.length === duplicates.length);
+
+    const transactionPreviewData = useTransactionPreviewData(props, translate, route, areThereDuplicates);
+
+    const showContextMenu = (event: GestureResponderEvent) => {
+        if (!shouldDisplayContextMenu) {
+            return;
+        }
+        showContextMenuForReport(event, contextMenuAnchor, reportID, action, checkIfContextMenuActive);
+    };
+
+    const offlineWithFeedbackOnClose = useCallback(() => {
+        clearWalletTermsError();
+        clearIOUError(chatReportID);
+    }, [chatReportID]);
+
+    const navigate = useCallback(() => {
+        navigateToReviewFields(route, report, transaction, duplicates);
+    }, [duplicates, report, route, transaction]);
+
+    return (
+        <TransactionPreviewContent
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...transactionPreviewData}
+            pendingAction={action.pendingAction}
+            navigateToReviewFields={navigate}
+            showContextMenu={showContextMenu}
+            offlineWithFeedbackOnClose={offlineWithFeedbackOnClose}
+            translate={translate}
+        />
+    );
+}
+
+TransactionPreview.displayName = 'TransactionPreview';
+
+export default TransactionPreview;
diff --git a/src/components/ReportActionItem/TransactionPreview/types.ts b/src/components/ReportActionItem/TransactionPreview/types.ts
new file mode 100644
index 000000000000..9aafd83441b6
--- /dev/null
+++ b/src/components/ReportActionItem/TransactionPreview/types.ts
@@ -0,0 +1,189 @@
+import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
+import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils';
+import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import type * as OnyxTypes from '@src/types/onyx';
+import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
+
+type TransactionPreviewProps = {
+    /** The active IOUReport, used for Onyx subscription */
+    // The iouReportID is used inside withOnyx HOC
+    // eslint-disable-next-line react/no-unused-prop-types
+    iouReportID: string | undefined;
+
+    /** The associated chatReport */
+    chatReportID: string | undefined;
+
+    /** The ID of the current report */
+    reportID: string | undefined;
+
+    /** Callback for the preview pressed */
+    onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent) => void;
+
+    /** All the data of the action, used for showing context menu */
+    action: OnyxTypes.ReportAction;
+
+    /** 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;
+
+    /** Extra styles to pass to View wrapper */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** True if this IOU has a type of split */
+    isBillSplit: boolean;
+
+    /** Whether this IOU is a track expense */
+    isTrackExpense: boolean;
+
+    /** True if the IOU Preview card is hovered */
+    isHovered?: boolean;
+
+    /** Whether or not an IOU report contains expenses in a different currency
+     * that are either created or cancelled offline, and thus haven't been converted to the report's currency yet
+     */
+    shouldShowPendingConversionMessage?: boolean;
+
+    /** Whether a message is a whisper */
+    isWhisper?: boolean;
+
+    /** Whether  context menu should be shown on press */
+    shouldDisplayContextMenu?: boolean;
+};
+
+type UIProps = {
+    /** Indicates whether a skeleton loading screen should be displayed. */
+    shouldShowSkeleton: boolean;
+
+    /** Determines whether the RBR should be visible. */
+    shouldShowRBR: boolean;
+
+    /** Controls whether the onPress event should be disabled. */
+    shouldDisableOnPress: boolean;
+
+    /** Specifies if a 'Keep this one' button should be visible. */
+    shouldShowKeepButton: boolean;
+
+    /** Flag indicating whether the description of the transaction should be displayed. */
+    shouldShowDescription: boolean;
+
+    /** Determines if the merchant's name or identifier should be visible in the transaction UI. */
+    shouldShowMerchant: boolean;
+
+    /** Specifies whether the category of the transaction should be visible to the user. */
+    shouldShowCategory: boolean;
+
+    /** Indicates whether tags associated with the transaction should be displayed. */
+    shouldShowTag: boolean;
+};
+
+type TransactionStatus = {
+    /** Marks the transaction as deleted. */
+    isDeleted: boolean;
+
+    /** Indicates approval status. */
+    isApproved: boolean;
+
+    /** Flag to determine if a transaction involves a bill split among multiple parties. */
+    isBillSplit: boolean;
+
+    /** Reflects whether the transaction has been settled. */
+    isSettled: boolean;
+
+    /** Indicates if settlement or approval is partial. */
+    isSettlementOrApprovalPartial: boolean;
+
+    /** A flag to determine if the current page is a review for a suspected duplicate transaction. */
+    isReviewDuplicateTransactionPage: boolean;
+};
+
+type CallbackFunctions = {
+    /** Function to display the context menu in response to an event. */
+    showContextMenu: (event: GestureResponderEvent) => void;
+
+    /** Handles the UI response and data clean-up when the transaction goes offline. */
+    offlineWithFeedbackOnClose: () => void;
+
+    /** Navigates the user to a separate view or component for reviewing or editing transaction fields. */
+    navigateToReviewFields: () => void;
+
+    /** General callback for handling presses on the preview component, can also handle keyboard events. */
+    onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent | undefined) => void;
+};
+
+type TransactionData = {
+    /** Amount of money involved in the transaction, represented as a string. */
+    displayAmount: string;
+
+    /** Optional category label for the transaction. */
+    category?: string;
+
+    /** Indicator if the transaction was made via cash or card. */
+    showCashOrCard: string;
+
+    /** Optional tag for additional categorization or notes. */
+    tag?: string;
+
+    /** Currency in which the request was made. */
+    requestCurrency?: string;
+
+    /** Merchant's name or a description of the transaction. */
+    merchantOrDescription: string;
+
+    /** Header text displayed on the transaction preview, providing contextual information. */
+    previewHeaderText: string;
+
+    /** Optional detailed request amount, may differ from display amount based on currency conversions. */
+    requestAmount?: number;
+
+    /** Share of the split transaction owed by the current user, only applicable in split scenarios. */
+    splitShare: number;
+};
+
+type TransactionPreviewUIProps = TransactionStatus &
+    UIProps &
+    TransactionData &
+    CallbackFunctions & {
+        /** Indicates if the transaction or document is currently being scanned. */
+        isScanning: boolean;
+
+        /** Whether the transaction is whisper. */
+        isWhisper: boolean;
+
+        /** Determines if the element is currently hovered over. */
+        isHovered: boolean;
+
+        /** Collection of thumbnail images linked to the transaction. */
+        receiptImages: ThumbnailAndImageURI[];
+
+        /** List of avatars representing participants in the transaction. */
+        sortedParticipantAvatars: Icon[];
+
+        /** Optional custom styles to be applied to container components. */
+        containerStyles?: StyleProp<ViewStyle>;
+
+        /** Optional message displayed next to RBR icon */
+        RBRmessage?: string;
+
+        /** Records any errors related to wallet terms. */
+        walletTermsErrors: Errors | undefined;
+
+        /** Represents any pending actions that need to be taken */
+        pendingAction: PendingAction | undefined;
+
+        /** Localization or translation function, essential for supporting multiple languages in UI. */
+        translate: LocaleContextProps['translate'];
+
+        /** Payer PersonalDetails */
+        from?: OnyxTypes.PersonalDetails | null;
+
+        /** Payee PersonalDetails */
+        to?: OnyxTypes.PersonalDetails | null;
+
+        /** Whether the report is IOU report */
+        isIOU: boolean;
+    };
+
+export type {TransactionPreviewProps, TransactionPreviewUIProps};
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index 341d46d8bda0..603419971fa6 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -12,7 +12,7 @@ import {isCorrectSearchUserName} from '@libs/SearchUIUtils';
 import variables from '@styles/variables';
 import type {SearchPersonalDetails, SearchTransactionAction} from '@src/types/onyx/SearchResults';
 import ActionCell from './ActionCell';
-import UserInfoCell from './UserInfoCell';
+import UserInfoCellsWithArrow from './UserInfoCellsWithArrow';
 
 type ExpenseItemHeaderNarrowProps = {
     text?: string;
@@ -77,26 +77,15 @@ function ExpenseItemHeaderNarrow({
                         </View>
                     </PressableWithFeedback>
                 )}
-                <View style={[styles.mw50]}>
-                    <UserInfoCell
-                        participant={participantFrom}
-                        displayName={participantFromDisplayName}
-                    />
-                </View>
-                {!!shouldDisplayArrowIcon && (
-                    <Icon
-                        src={Expensicons.ArrowRightLong}
-                        width={variables.iconSizeXXSmall}
-                        height={variables.iconSizeXXSmall}
-                        fill={theme.icon}
-                    />
-                )}
-                <View style={[styles.flex1, styles.mw50]}>
-                    <UserInfoCell
-                        participant={participantTo}
-                        displayName={participantToDisplayName}
-                    />
-                </View>
+                <UserInfoCellsWithArrow
+                    styles={styles}
+                    theme={theme}
+                    shouldDisplayArrowIcon={!!shouldDisplayArrowIcon}
+                    participantFrom={participantFrom}
+                    participantFromDisplayName={participantFromDisplayName}
+                    participantTo={participantTo}
+                    participantToDisplayName={participantToDisplayName}
+                />
             </View>
             <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
                 <ActionCell
diff --git a/src/components/SelectionList/Search/UserInfoCell.tsx b/src/components/SelectionList/Search/UserInfoCell.tsx
index 6a2fda42d247..0eac5f6f475c 100644
--- a/src/components/SelectionList/Search/UserInfoCell.tsx
+++ b/src/components/SelectionList/Search/UserInfoCell.tsx
@@ -5,15 +5,18 @@ import Text from '@components/Text';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isCorrectSearchUserName} from '@libs/SearchUIUtils';
+import type {AvatarSizeName} from '@styles/utils';
 import CONST from '@src/CONST';
+import type {PersonalDetails} from '@src/types/onyx';
 import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults';
 
 type UserInfoCellProps = {
-    participant: SearchPersonalDetails;
+    participant: SearchPersonalDetails | PersonalDetails;
     displayName: string;
+    avatarSize?: AvatarSizeName;
 };
 
-function UserInfoCell({participant, displayName}: UserInfoCellProps) {
+function UserInfoCell({participant, displayName, avatarSize}: UserInfoCellProps) {
     const styles = useThemeStyles();
     const {isLargeScreenWidth} = useResponsiveLayout();
     const avatarURL = participant?.avatar;
@@ -26,7 +29,7 @@ function UserInfoCell({participant, displayName}: UserInfoCellProps) {
         <View style={[styles.flexRow, styles.alignItemsCenter]}>
             <Avatar
                 imageStyles={[styles.alignSelfCenter]}
-                size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                size={avatarSize ?? CONST.AVATAR_SIZE.MID_SUBSCRIPT}
                 source={avatarURL}
                 name={displayName}
                 type={CONST.ICON_TYPE_AVATAR}
diff --git a/src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx b/src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx
new file mode 100644
index 000000000000..15d4c73f133f
--- /dev/null
+++ b/src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import type {ThemeColors} from '@styles/theme/types';
+import type {AvatarSizeName} from '@styles/utils';
+import variables from '@styles/variables';
+import type {ThemeStyles} from '@src/styles';
+import type {PersonalDetails} from '@src/types/onyx';
+import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults';
+import UserInfoCell from './UserInfoCell';
+
+function UserInfoCellsWithArrow({
+    styles,
+    theme,
+    shouldDisplayArrowIcon,
+    participantFrom,
+    participantFromDisplayName,
+    participantTo,
+    participantToDisplayName,
+    avatarSize,
+}: {
+    styles: ThemeStyles;
+    theme: ThemeColors;
+    shouldDisplayArrowIcon: boolean;
+    participantFrom: SearchPersonalDetails | PersonalDetails;
+    participantFromDisplayName: string;
+    participantTo: SearchPersonalDetails | PersonalDetails;
+    participantToDisplayName: string;
+    avatarSize?: AvatarSizeName;
+}) {
+    return (
+        <>
+            <View style={[styles.mw50]}>
+                <UserInfoCell
+                    participant={participantFrom}
+                    displayName={participantFromDisplayName}
+                    avatarSize={avatarSize}
+                />
+            </View>
+            {shouldDisplayArrowIcon && (
+                <Icon
+                    src={Expensicons.ArrowRightLong}
+                    width={variables.iconSizeXXSmall}
+                    height={variables.iconSizeXXSmall}
+                    fill={theme.icon}
+                />
+            )}
+            <View style={[styles.flex1, styles.mw50]}>
+                <UserInfoCell
+                    participant={participantTo}
+                    displayName={participantToDisplayName}
+                    avatarSize={avatarSize}
+                />
+            </View>
+        </>
+    );
+}
+
+export default UserInfoCellsWithArrow;
diff --git a/src/hooks/useSingleExecution/useTransactionPreviewData.ts b/src/hooks/useSingleExecution/useTransactionPreviewData.ts
new file mode 100644
index 000000000000..b90824c40120
--- /dev/null
+++ b/src/hooks/useSingleExecution/useTransactionPreviewData.ts
@@ -0,0 +1,149 @@
+import lodashSortBy from 'lodash/sortBy';
+import truncate from 'lodash/truncate';
+import {useMemo} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
+import type {TransactionPreviewProps} from '@components/ReportActionItem/TransactionPreview/types';
+import useTransactionViolations from '@hooks/useTransactionViolations';
+import {calculateAmount} from '@libs/IOUUtils';
+import {getAvatarsForAccountIDs} from '@libs/OptionsListUtils';
+import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
+import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
+import {getTransactionDetails, getWorkspaceIcon, isPolicyExpenseChat, isReportApproved, isSettled} from '@libs/ReportUtils';
+import type {TransactionDetails} from '@libs/ReportUtils';
+import StringUtils from '@libs/StringUtils';
+import {createTransactionPreviewConditionals, createTransactionPreviewText, getIOUData} from '@libs/TransactionPreviewUtils';
+import {hasReceipt as hasReceiptTransactionUtils, isReceiptBeingScanned} from '@libs/TransactionUtils';
+import type {PlatformStackRouteProp} from '@navigation/PlatformStackNavigation/types';
+import type {TransactionDuplicateNavigatorParamList} from '@navigation/types';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
+
+function useTransactionPreviewData(
+    {isBillSplit, action, chatReportID, reportID, onPreviewPressed, containerStyles, isHovered = false, isWhisper = false, iouReportID}: TransactionPreviewProps,
+    translate: LocaleContextProps['translate'],
+    route: PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>,
+    areThereDuplicates: boolean,
+) {
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`);
+    const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
+
+    const isIOUActionType = isMoneyRequestAction(action);
+    const transactionID = isIOUActionType ? getOriginalMessage(action)?.IOUTransactionID : null;
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+
+    const violations = useTransactionViolations(transaction?.transactionID);
+
+    const transactions = useMemo<Partial<TransactionDetails>>(() => getTransactionDetails(transaction) ?? {}, [transaction]);
+    const {amount: requestAmount, comment: requestComment, merchant, tag, category, currency: requestCurrency} = transactions;
+    const isReportAPolicyExpenseChat = isPolicyExpenseChat(chatReport);
+
+    const creationalData = useMemo(
+        () => ({
+            iouReport,
+            transaction,
+            translate,
+            action,
+            isBillSplit,
+            violations,
+            transactions,
+        }),
+        [action, iouReport, isBillSplit, transaction, transactions, translate, violations],
+    );
+
+    const conditionalProps = useMemo(
+        () =>
+            createTransactionPreviewConditionals({
+                ...creationalData,
+                areThereDuplicates,
+                isReportAPolicyExpenseChat,
+            }),
+        [areThereDuplicates, creationalData, isReportAPolicyExpenseChat],
+    );
+
+    const {shouldShowRBR, shouldShowMerchant, shouldShowSplitShare} = conditionalProps;
+
+    const {RBRmessage, displayAmountText, displayDeleteAmountText, previewHeaderText} = useMemo(
+        () =>
+            createTransactionPreviewText({
+                ...creationalData,
+                shouldShowRBR,
+            }),
+        [creationalData, shouldShowRBR],
+    );
+
+    const managerID = iouReport?.managerID ?? CONST.DEFAULT_NUMBER_ID;
+    const ownerAccountID = iouReport?.ownerAccountID ?? CONST.DEFAULT_NUMBER_ID;
+
+    const participantAccountIDs = isMoneyRequestAction(action) && isBillSplit ? getOriginalMessage(action)?.participantAccountIDs ?? [] : [managerID, ownerAccountID];
+    const participantAvatars = getAvatarsForAccountIDs(participantAccountIDs, personalDetails ?? {});
+    const sortedParticipantAvatars = lodashSortBy(participantAvatars, (avatar) => avatar.id);
+    if (isReportAPolicyExpenseChat && isBillSplit) {
+        sortedParticipantAvatars.push(getWorkspaceIcon(chatReport));
+    }
+
+    const sessionAccountID = session?.accountID;
+
+    const isDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+
+    // If available, retrieve the split share from the splits object of the transaction, if not, display an even share.
+    const splitShare = useMemo(
+        () =>
+            shouldShowSplitShare
+                ? transaction?.comment?.splits?.find((split) => split.accountID === sessionAccountID)?.amount ??
+                  calculateAmount(isReportAPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount ?? 0, requestCurrency ?? '', action.actorAccountID === sessionAccountID)
+                : 0,
+        [
+            shouldShowSplitShare,
+            isReportAPolicyExpenseChat,
+            action.actorAccountID,
+            participantAccountIDs.length,
+            transaction?.comment?.splits,
+            requestAmount,
+            requestCurrency,
+            sessionAccountID,
+        ],
+    );
+
+    const description = truncate(StringUtils.lineBreaksToSpaces(requestComment), {length: CONST.REQUEST_PREVIEW.MAX_LENGTH});
+    const requestMerchant = truncate(merchant, {length: CONST.REQUEST_PREVIEW.MAX_LENGTH});
+    const hasReceipt = hasReceiptTransactionUtils(transaction);
+
+    const {from, to, isIOU} = getIOUData(managerID, ownerAccountID, reportID, personalDetails, (transaction && transaction.amount) ?? 0);
+
+    return {
+        isApproved: isReportApproved({report: iouReport}),
+        isSettled: isSettled(iouReport?.reportID),
+        isSettlementOrApprovalPartial: !!iouReport?.pendingFields?.partial,
+        isScanning: hasReceipt && isReceiptBeingScanned(transaction),
+        displayAmount: isDeleted ? displayDeleteAmountText : displayAmountText,
+        receiptImages: [{...getThumbnailAndImageURIs(transaction), transaction}],
+        merchantOrDescription: shouldShowMerchant ? requestMerchant : description || '',
+        isReviewDuplicateTransactionPage: route.name === SCREENS.TRANSACTION_DUPLICATE.REVIEW,
+        walletTermsErrors: walletTerms?.errors,
+        sortedParticipantAvatars,
+        splitShare,
+        isDeleted,
+        RBRmessage,
+        previewHeaderText,
+        requestAmount,
+        requestCurrency,
+        tag,
+        category,
+        isWhisper,
+        isHovered,
+        isBillSplit,
+        onPreviewPressed,
+        containerStyles,
+        from,
+        to,
+        isIOU,
+        ...conditionalProps,
+    };
+}
+
+export default useTransactionPreviewData;
diff --git a/src/libs/TransactionPreviewUtils.ts b/src/libs/TransactionPreviewUtils.ts
new file mode 100644
index 000000000000..a3fca66c0387
--- /dev/null
+++ b/src/libs/TransactionPreviewUtils.ts
@@ -0,0 +1,334 @@
+import truncate from 'lodash/truncate';
+import type {OnyxEntry, OnyxInputValue} from 'react-native-onyx';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import type * as OnyxTypes from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import {abandonReviewDuplicateTransactions, setReviewDuplicatesKey} from './actions/Transaction';
+import {convertToDisplayString} from './CurrencyUtils';
+import DateUtils from './DateUtils';
+import Navigation from './Navigation/Navigation';
+import type {PlatformStackRouteProp} from './Navigation/PlatformStackNavigation/types';
+import type {TransactionDuplicateNavigatorParamList} from './Navigation/types';
+import {getOriginalMessage, getReportAction, isMessageDeleted, isMoneyRequestAction} from './ReportActionsUtils';
+import {canEditMoneyRequest, isIOUReport, isPaidGroupPolicy, isPaidGroupPolicyExpenseReport, isReportApproved, isSettled} from './ReportUtils';
+import type {TransactionDetails} from './ReportUtils';
+import StringUtils from './StringUtils';
+import {
+    compareDuplicateTransactionFields,
+    getFormattedCreated,
+    hasMissingSmartscanFields,
+    hasNoticeTypeViolation,
+    hasPendingRTERViolation,
+    hasReceipt,
+    hasViolation,
+    hasWarningTypeViolation,
+    isAmountMissing,
+    isCardTransaction,
+    isCreatedMissing,
+    isDistanceRequest,
+    isFetchingWaypointsFromServer,
+    isMerchantMissing,
+    isOnHold,
+    isPending,
+    isPerDiemRequest,
+    isReceiptBeingScanned,
+} from './TransactionUtils';
+import ViolationsUtils from './Violations/ViolationsUtils';
+
+const emptyPersonalDetails: OnyxTypes.PersonalDetails = {
+    accountID: CONST.REPORT.OWNER_ACCOUNT_ID_FAKE,
+    avatar: '',
+    displayName: undefined,
+    login: undefined,
+};
+
+const chooseIdBasedOnAmount = (amount: number, negativeId: number, positiveId: number) => (amount < 0 ? negativeId : positiveId);
+
+function getIOUData(managerID: number, ownerAccountID: number, reportID: string | undefined, personalDetails: OnyxTypes.PersonalDetailsList | undefined, amount: number) {
+    const fromID = chooseIdBasedOnAmount(amount, managerID, ownerAccountID);
+    const toID = chooseIdBasedOnAmount(amount, ownerAccountID, managerID);
+
+    return {
+        from: personalDetails ? personalDetails[fromID] : emptyPersonalDetails,
+        to: personalDetails ? personalDetails[toID] : emptyPersonalDetails,
+        isIOU: reportID ? isIOUReport(reportID) : false,
+    };
+}
+
+const navigateToReviewFields = (
+    route: PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, 'Transaction_Duplicate_Review'>,
+    report: OnyxEntry<OnyxTypes.Report>,
+    transaction: OnyxEntry<OnyxTypes.Transaction>,
+    duplicates: string[],
+) => {
+    const backTo = route.params.backTo;
+
+    const parentReportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
+    const reviewingTransactionID = isMoneyRequestAction(parentReportAction) ? getOriginalMessage(parentReportAction)?.IOUTransactionID : undefined;
+
+    // Clear the draft before selecting a different expense to prevent merging fields from the previous expense
+    // (e.g., category, tag, tax) that may be not enabled/available in the new expense's policy.
+    abandonReviewDuplicateTransactions();
+    const comparisonResult = compareDuplicateTransactionFields(reviewingTransactionID, transaction?.reportID, transaction?.transactionID ?? reviewingTransactionID);
+    setReviewDuplicatesKey({...comparisonResult.keep, duplicates, transactionID: transaction?.transactionID, reportID: transaction?.reportID});
+
+    if ('merchant' in comparisonResult.change) {
+        Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_MERCHANT_PAGE.getRoute(route.params?.threadReportID, backTo));
+    } else if ('category' in comparisonResult.change) {
+        Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_CATEGORY_PAGE.getRoute(route.params?.threadReportID, backTo));
+    } else if ('tag' in comparisonResult.change) {
+        Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_TAG_PAGE.getRoute(route.params?.threadReportID, backTo));
+    } else if ('description' in comparisonResult.change) {
+        Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_DESCRIPTION_PAGE.getRoute(route.params?.threadReportID, backTo));
+    } else if ('taxCode' in comparisonResult.change) {
+        Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_TAX_CODE_PAGE.getRoute(route.params?.threadReportID, backTo));
+    } else if ('billable' in comparisonResult.change) {
+        Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_BILLABLE_PAGE.getRoute(route.params?.threadReportID, backTo));
+    } else if ('reimbursable' in comparisonResult.change) {
+        Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_REIMBURSABLE_PAGE.getRoute(route.params?.threadReportID, backTo));
+    } else {
+        Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_CONFIRMATION_PAGE.getRoute(route.params?.threadReportID, backTo));
+    }
+};
+
+function createTransactionPreviewText({
+    iouReport,
+    transaction,
+    translate,
+    action,
+    violations,
+    transactions,
+    isBillSplit,
+    shouldShowRBR,
+}: {
+    iouReport: OnyxEntry<OnyxTypes.Report>;
+    transaction: OnyxEntry<OnyxTypes.Transaction>;
+    translate: LocaleContextProps['translate'];
+    action: OnyxTypes.ReportAction;
+    violations: OnyxTypes.TransactionViolations;
+    transactions: Partial<TransactionDetails>;
+    isBillSplit: boolean;
+    shouldShowRBR: boolean;
+}) {
+    const isFetchingWaypoints = isFetchingWaypointsFromServer(transaction);
+    const isTransactionOnHold = isOnHold(transaction);
+    const isTransactionMadeWithCard = isCardTransaction(transaction);
+    const isMoneyRequestSettled = isSettled(iouReport?.reportID);
+    const isSettlementOrApprovalPartial = !!iouReport?.pendingFields?.partial;
+    const isPartialHold = isSettlementOrApprovalPartial && isTransactionOnHold;
+    // We don't use isOnHold because it's true for duplicated transaction too and we only want to show hold message if the transaction is truly on hold
+    const shouldShowHoldMessage = !(isMoneyRequestSettled && !isSettlementOrApprovalPartial) && !!transaction?.comment?.hold;
+    const showCashOrCard = isTransactionMadeWithCard ? translate('iou.card') : translate('iou.cash');
+    const isScanning = hasReceipt(transaction) && isReceiptBeingScanned(transaction);
+    const hasFieldErrors = hasMissingSmartscanFields(transaction);
+    const isIOUActionType = isMoneyRequestAction(action);
+    const hasViolationsOfTypeNotice = hasNoticeTypeViolation(transaction?.transactionID, violations, true) && isPaidGroupPolicy(iouReport);
+
+    const {amount: requestAmount, currency: requestCurrency} = transactions;
+
+    const getSettledMessage = (): string => {
+        if (isTransactionMadeWithCard) {
+            return translate('common.done');
+        }
+        return translate('iou.settledExpensify');
+    };
+
+    const getRBRmessage = () => {
+        if (!shouldShowRBR || !transaction) {
+            return '';
+        }
+
+        if (shouldShowHoldMessage) {
+            return translate('violations.hold');
+        }
+
+        const firstViolation = violations?.at(0);
+
+        if (firstViolation) {
+            const canEdit = isIOUActionType && canEditMoneyRequest(action, transaction);
+            const violationMessage = ViolationsUtils.getViolationTranslation(firstViolation, translate, canEdit);
+            const violationsCount = violations?.filter((v) => v.type === CONST.VIOLATION_TYPES.VIOLATION).length ?? 0;
+            const isTooLong = violationsCount > 1 || violationMessage.length > 15;
+            const hasViolationsAndFieldErrors = violationsCount > 0 && hasFieldErrors;
+
+            return isTooLong || hasViolationsAndFieldErrors ? translate('violations.reviewRequired') : violationMessage;
+        }
+
+        if (hasFieldErrors) {
+            const merchantMissing = isMerchantMissing(transaction);
+            const amountMissing = isAmountMissing(transaction);
+            if (amountMissing && merchantMissing) {
+                return translate('violations.reviewRequired');
+            }
+            if (amountMissing) {
+                return translate('iou.missingAmount');
+            }
+            if (merchantMissing) {
+                return translate('iou.missingMerchant');
+            }
+        }
+
+        return '';
+    };
+
+    const getPreviewHeaderText = (): string => {
+        let message = showCashOrCard;
+
+        if (isDistanceRequest(transaction)) {
+            message = translate('common.distance');
+        } else if (isPerDiemRequest(transaction)) {
+            message = translate('common.perDiem');
+        } else if (isScanning) {
+            message = translate('common.receipt');
+        } else if (isBillSplit) {
+            message = translate('iou.split');
+        }
+
+        if (!isCreatedMissing(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);
+            message = `${date} ${CONST.DOT_SEPARATOR} ${message}`;
+        }
+
+        if (isPending(transaction)) {
+            message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.pending')}`;
+        }
+
+        if (hasPendingRTERViolation(violations)) {
+            message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.pendingMatch')}`;
+        }
+
+        if (isMoneyRequestSettled && !iouReport?.isCancelledIOU && !isPartialHold) {
+            message += ` ${CONST.DOT_SEPARATOR} ${getSettledMessage()}`;
+            return message;
+        }
+
+        if (shouldShowRBR && transaction) {
+            return message;
+        }
+
+        if (hasViolationsOfTypeNotice && transaction && !isReportApproved({report: iouReport}) && !isSettled(iouReport?.reportID)) {
+            message += ` ${CONST.DOT_SEPARATOR} ${translate('violations.reviewRequired')}`;
+        } else if (isPaidGroupPolicyExpenseReport(iouReport) && isReportApproved({report: iouReport}) && !isSettled(iouReport?.reportID) && !isPartialHold) {
+            message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.approved')}`;
+        } else if (iouReport?.isCancelledIOU) {
+            message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.canceled')}`;
+        } else if (shouldShowHoldMessage) {
+            message += ` ${CONST.DOT_SEPARATOR} ${translate('violations.hold')}`;
+        }
+        return message;
+    };
+
+    const getDisplayAmountText = (): string => {
+        if (isScanning) {
+            return translate('iou.receiptStatusTitle');
+        }
+
+        if (isFetchingWaypoints && !requestAmount) {
+            return translate('iou.fieldPending');
+        }
+
+        return convertToDisplayString(requestAmount, requestCurrency);
+    };
+
+    const getDisplayDeleteAmountText = (): string => {
+        const iouOriginalMessage: OnyxEntry<OnyxTypes.OriginalMessageIOU> = isMoneyRequestAction(action) ? getOriginalMessage(action) ?? undefined : undefined;
+        return convertToDisplayString(iouOriginalMessage?.amount, iouOriginalMessage?.currency);
+    };
+
+    // const displayAmount = isDeleted ? getDisplayDeleteAmountText() : getDisplayAmountText();
+    return {
+        RBRmessage: getRBRmessage(),
+        displayAmountText: getDisplayAmountText(),
+        displayDeleteAmountText: getDisplayDeleteAmountText(),
+        previewHeaderText: getPreviewHeaderText(),
+    };
+}
+
+function createTransactionPreviewConditionals({
+    iouReport,
+    transaction,
+    translate,
+    action,
+    violations,
+    transactions,
+    isBillSplit,
+    isReportAPolicyExpenseChat,
+    areThereDuplicates,
+}: {
+    iouReport: OnyxInputValue<OnyxTypes.Report> | undefined;
+    transaction: OnyxEntry<OnyxTypes.Transaction> | undefined;
+    translate: LocaleContextProps['translate'];
+    action: OnyxTypes.ReportAction;
+    violations: OnyxTypes.TransactionViolations;
+    transactions: Partial<TransactionDetails>;
+    isBillSplit: boolean;
+    isReportAPolicyExpenseChat: boolean;
+    areThereDuplicates: boolean;
+}) {
+    const {amount: requestAmount, comment: requestComment, merchant, tag, category} = transactions;
+
+    const isScanning = hasReceipt(transaction) && isReceiptBeingScanned(transaction);
+
+    const requestMerchant = truncate(merchant, {length: CONST.REQUEST_PREVIEW.MAX_LENGTH});
+    const description = truncate(StringUtils.lineBreaksToSpaces(requestComment), {length: CONST.REQUEST_PREVIEW.MAX_LENGTH});
+
+    const isMoneyRequestSettled = isSettled(iouReport?.reportID);
+    const isApproved = isReportApproved({report: iouReport});
+    const isSettlementOrApprovalPartial = !!iouReport?.pendingFields?.partial;
+
+    const hasViolationsOfTypeNotice = hasNoticeTypeViolation(transaction?.transactionID, violations, true) && iouReport && isPaidGroupPolicy(iouReport);
+    const hasFieldErrors = hasMissingSmartscanFields(transaction);
+
+    const isFetchingWaypoints = isFetchingWaypointsFromServer(transaction);
+    const isTransactionMadeWithCard = isCardTransaction(transaction);
+
+    const isTransactionOnHold = isOnHold(transaction);
+    const isFullySettled = isMoneyRequestSettled && !isSettlementOrApprovalPartial;
+    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 shouldShowTag = !!tag && isReportAPolicyExpenseChat;
+    const shouldShowCategory = !!category && isReportAPolicyExpenseChat;
+
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const hasAnyViolations = hasViolationsOfTypeNotice || hasWarningTypeViolation(transaction?.transactionID, violations, true) || hasViolation(transaction, violations, true);
+    const hasErrorOrOnHold = hasFieldErrors || (!isFullySettled && !isFullyApproved && isTransactionOnHold);
+    const shouldShowRBR = hasAnyViolations || hasErrorOrOnHold;
+
+    const showCashOrCard = isTransactionMadeWithCard ? translate('iou.card') : translate('iou.cash');
+    // When there are no settled transactions in duplicates, show the "Keep this one" button
+    const shouldShowKeepButton = areThereDuplicates;
+    const shouldShowSplitShare = isBillSplit && !!requestAmount && requestAmount > 0;
+
+    /*
+ Show the merchant for IOUs and expenses only if:
+ - the merchant is not empty, is custom, or is not related to scanning smartscan;
+ - the expense is not a distance expense with a pending route and amount = 0 - in this case,
+   the merchant says: "Route pending...", which is already shown in the amount field;
+*/
+    const shouldShowMerchant =
+        !!requestMerchant &&
+        requestMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT &&
+        requestMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT &&
+        !(isFetchingWaypoints && !requestAmount);
+    const shouldShowDescription = !!description && !shouldShowMerchant && !isScanning;
+
+    return {
+        shouldDisableOnPress,
+        shouldShowSkeleton,
+        shouldShowTag,
+        showCashOrCard,
+        shouldShowRBR,
+        shouldShowCategory,
+        shouldShowKeepButton,
+        shouldShowSplitShare,
+        shouldShowMerchant,
+        shouldShowDescription,
+    };
+}
+
+export {navigateToReviewFields, getIOUData, createTransactionPreviewText, createTransactionPreviewConditionals};
diff --git a/src/stories/TransactionPreviewContent.stories.tsx b/src/stories/TransactionPreviewContent.stories.tsx
new file mode 100644
index 000000000000..1648ffece350
--- /dev/null
+++ b/src/stories/TransactionPreviewContent.stories.tsx
@@ -0,0 +1,264 @@
+import type {Meta, StoryFn} from '@storybook/react';
+import React from 'react';
+import {View} from 'react-native';
+import type {InputType} from 'storybook/internal/types';
+import type {TupleToUnion} from 'type-fest';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
+import TransactionPreviewContent from '@components/ReportActionItem/TransactionPreview/TransactionPreviewContent';
+import type {TransactionPreviewUIProps} from '@components/ReportActionItem/TransactionPreview/types';
+import ThemeProvider from '@components/ThemeProvider';
+import ThemeStylesProvider from '@components/ThemeStylesProvider';
+import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils';
+import CONST from '@src/CONST';
+import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults';
+
+const availableColors = ['pink', 'yellow', 'navy', 'blue', 'green', 'tangerine'];
+const availableUsers = ['John Smith', 'Jane Doe', 'Ted Kowalski'];
+type BGColor = TupleToUnion<typeof availableColors>;
+
+const generateReceiptImage = (color: BGColor): ThumbnailAndImageURI => ({
+    thumbnail: `static/media/assets/images/eReceiptBGs/eReceiptBG_${color}.png`,
+    isEmptyReceipt: true,
+    transaction: {
+        amount: 1234,
+        bank: '',
+        billable: false,
+        cardID: 0,
+        cardName: 'Cash Expense',
+        cardNumber: '',
+        category: '',
+        comment: {
+            comment: '',
+        },
+        created: '2025-02-14',
+        currency: 'PLN',
+        filename: '',
+        inserted: '2025-02-14 08:12:19',
+        managedCard: false,
+        merchant: '(none)',
+        modifiedAmount: 0,
+        modifiedCreated: '',
+        modifiedCurrency: '',
+        modifiedMerchant: '',
+        originalAmount: 0,
+        originalCurrency: '',
+        parentTransactionID: '',
+        posted: '',
+        receipt: {},
+        reimbursable: true,
+        reportID: '111111111111111',
+        status: 'Posted',
+        tag: '',
+        transactionID: '1111111111111111111',
+        hasEReceipt: false,
+    },
+});
+
+const generateAvatars = (count: number) =>
+    new Array(count).fill(0).map((_, i) => ({
+        id: i.toString().repeat(8),
+        source: `@assets/images/avatars/user/default-avatar_${(i + 1) % 24}.svg`,
+        type: 'avatar',
+        name: `qwerty${i}@xyz.com`,
+    }));
+
+const generateReceiptImages = (colors: BGColor | BGColor[]) => {
+    if (typeof colors === 'string') {
+        return [generateReceiptImage(colors)];
+    }
+    return colors.map((color) => generateReceiptImage(color));
+};
+
+const usersMap = availableUsers.reduce<Record<string, {displayName: string; avatar: string}>>((mappings, user, index) => {
+    // eslint-disable-next-line no-param-reassign
+    mappings[user] = {
+        displayName: user,
+        avatar: `@assets/images/avatars/user/default-avatar_${(index + 1) % 24}.svg`,
+    };
+    return mappings;
+}, {});
+
+const receiptImagesMap = availableColors.reduce<Record<string, ThumbnailAndImageURI[]>>((mappings, color) => {
+    // eslint-disable-next-line no-param-reassign
+    mappings[color] = generateReceiptImages(color);
+    return mappings;
+}, {});
+
+const generateProps = (
+    amount: string,
+    tag: string,
+    merchantOrDescription: string,
+    date: string,
+    colors: BGColor | BGColor[],
+    category: string,
+    type: string,
+    RBRmessage?: string,
+    isBillSplit = false,
+    isDeleted = false,
+    shouldShowKeepButton = false,
+    isIOU = false,
+    participants?: [string, string],
+) => ({
+    previewHeaderText: `${date} ${CONST.DOT_SEPARATOR} ${type}`,
+    merchantOrDescription,
+    tag,
+    displayAmount: amount,
+    category,
+    isBillSplit,
+    splitShare: 10000,
+    requestCurrency: 'USD',
+    isDeleted,
+    shouldShowSkeleton: false,
+    shouldShowKeepButton,
+    shouldShowRBR: !!RBRmessage,
+    RBRmessage,
+    // this is stale in Storybook UI, but is in this function to generate different images on first render
+    receiptImages: generateReceiptImages(colors),
+    isIOU,
+    from: participants ? (usersMap[participants[0]] as SearchPersonalDetails) : undefined,
+    to: participants ? (usersMap[participants[1]] as SearchPersonalDetails) : undefined,
+});
+
+const staticProps = {
+    translate: ((value: string, options?: {amount: string}) => {
+        if (value === 'violations.keepThisOne') {
+            return 'Keep this one';
+        }
+        return `Your split ${options?.amount}`;
+    }) as LocaleContextProps['translate'],
+    navigateToReviewFields: () => undefined,
+    onPreviewPressed: () => true,
+    showContextMenu: () => undefined,
+    offlineWithFeedbackOnClose(): void {},
+    pendingAction: undefined,
+    walletTermsErrors: undefined,
+    requestAmount: 100,
+    shouldShowTag: true,
+    showCashOrCard: '',
+    isScanning: false,
+    isWhisper: false,
+    isHovered: false,
+    isSettled: false,
+    isApproved: false,
+    shouldDisableOnPress: false,
+    isSettlementOrApprovalPartial: false,
+    isReviewDuplicateTransactionPage: true,
+    shouldShowDescription: true,
+    shouldShowMerchant: true,
+    shouldShowCategory: true,
+    sortedParticipantAvatars: generateAvatars(20),
+    containerStyles: [{margin: 10}],
+};
+
+const disabledProperties = Object.keys(staticProps).reduce<Record<string, {table: {disable: boolean}}>>((storyProperties, fakeDataKey) => {
+    // eslint-disable-next-line no-param-reassign
+    storyProperties[fakeDataKey] = {
+        table: {
+            disable: true,
+        },
+    };
+    return storyProperties;
+}, {});
+
+type TransactionPreviewStory = StoryFn<typeof TransactionPreviewContent>;
+
+const usersArgType: InputType = {
+    options: availableUsers,
+    mapping: usersMap,
+    control: 'select',
+    if: {
+        arg: 'isIOU',
+    },
+};
+
+/**
+ * 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 story: Meta<typeof TransactionPreviewContent> = {
+    title: 'Components/TransactionPreview',
+    component: TransactionPreviewContent,
+    argTypes: {
+        ...disabledProperties,
+        requestCurrency: {
+            control: 'select',
+            options: ['USD', 'PLN', 'EUR'],
+            if: {
+                arg: 'isBillSplit',
+            },
+        },
+        splitShare: {
+            control: 'number',
+            if: {
+                arg: 'isBillSplit',
+            },
+        },
+        RBRmessage: {
+            control: 'text',
+            if: {
+                arg: 'shouldShowRBR',
+            },
+        },
+        receiptImages: {
+            mapping: receiptImagesMap,
+            options: availableColors,
+            control: 'select',
+        },
+        from: usersArgType,
+        to: usersArgType,
+    },
+};
+
+function Template(props: TransactionPreviewUIProps) {
+    return (
+        <ThemeProvider theme={CONST.THEME.LIGHT}>
+            <ThemeStylesProvider>
+                <View style={{flexDirection: 'row'}}>
+                    {/* eslint-disable react/jsx-props-no-spreading */}
+                    <TransactionPreviewContent
+                        {...staticProps}
+                        {...props}
+                    />
+                    {/* eslint-enable react/jsx-props-no-spreading */}
+                </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: TransactionPreviewStory = Template.bind({});
+const SplitAndKeepButton: TransactionPreviewStory = Template.bind({});
+const MoreThan1ImageAndRBR: TransactionPreviewStory = Template.bind({});
+const MoreThan1ImageAndSplit: TransactionPreviewStory = Template.bind({});
+const DeletedSplitWithRBRAndKeepButton: TransactionPreviewStory = Template.bind({});
+const IOUWithKeepButton: TransactionPreviewStory = Template.bind({});
+
+Default.args = {
+    ...generateProps('$60.00', 'New Jersey Office', 'Acme', 'Nov 19', 'blue', 'Grocery stores', 'Cash'),
+};
+
+SplitAndKeepButton.args = {
+    ...generateProps('$40.00', 'New Jersey Office', 'Wawa', 'Nov 19', 'pink', 'Gas stations', 'Split', undefined, true, false, true),
+};
+
+MoreThan1ImageAndRBR.args = {
+    ...generateProps('2000.00€', 'Cracow', 'Orlen', 'Jan 21', new Array(10).fill('tangerine'), 'Gas stations', 'Card', 'Duplicate'),
+};
+
+MoreThan1ImageAndSplit.args = {
+    ...generateProps('14000.00¥', 'Starbucks', 'Coffee', 'Feb 26', new Array(10).fill('yellow'), 'Food', 'Split', undefined, true),
+};
+
+DeletedSplitWithRBRAndKeepButton.args = {
+    ...generateProps('$1000.00', 'Nowhere', 'Bad', 'Dec 10', 'navy', 'No existent', 'Split', 'Generic error', true, true, true),
+};
+
+IOUWithKeepButton.args = {
+    ...generateProps('$50000.00', 'Somewhere', 'I Owe You', 'Jul 20', 'green', 'Debts', 'Card', undefined, false, false, true, true, ['John Smith', 'Jane Doe']),
+};
+
+export default story;
+export {Default, SplitAndKeepButton, MoreThan1ImageAndRBR, MoreThan1ImageAndSplit, DeletedSplitWithRBRAndKeepButton, IOUWithKeepButton};
diff --git a/tests/unit/TransactionPreviewUtils.test.ts b/tests/unit/TransactionPreviewUtils.test.ts
new file mode 100644
index 000000000000..ec10ae91b5e0
--- /dev/null
+++ b/tests/unit/TransactionPreviewUtils.test.ts
@@ -0,0 +1,75 @@
+import {buildOptimisticIOUReport, buildOptimisticIOUReportAction} from '@libs/ReportUtils';
+import {createTransactionPreviewConditionals, createTransactionPreviewText} from '@libs/TransactionPreviewUtils';
+import {buildOptimisticTransaction} from '@libs/TransactionUtils';
+import CONST from '@src/CONST';
+
+const basicInput = {
+    iouReport: buildOptimisticIOUReport(123, 234, 1000, '1', 'USD'),
+    transaction: buildOptimisticTransaction({
+        transactionParams: {
+            amount: 100,
+            currency: 'USD',
+            reportID: '1',
+            comment: '',
+            attendees: [],
+            created: '2024-01-01',
+        },
+    }),
+    translate: jest.fn().mockImplementation((key: string) => key),
+    action: buildOptimisticIOUReportAction('create', 100, 'USD', '', [], '1', undefined, '1'),
+    violations: [],
+    transactions: {},
+    isBillSplit: false,
+    shouldShowRBR: false,
+    isReportAPolicyExpenseChat: false,
+    areThereDuplicates: false,
+};
+
+describe('TransactionPreviewUtils', () => {
+    describe('createTransactionPreviewText', () => {
+        it('should return an empty RBR message when shouldShowRBR is false and no transaction is given', () => {
+            const result = createTransactionPreviewText({...basicInput, shouldShowRBR: false});
+            expect(result.RBRmessage).toEqual('');
+        });
+
+        it('returns correct hold message when the transaction is on hold', () => {
+            const testInput = {
+                ...basicInput,
+                transaction: {...basicInput.transaction, comment: {hold: 'true'}},
+                shouldShowRBR: true,
+            };
+
+            const result = createTransactionPreviewText(testInput);
+            expect(result.RBRmessage).toContain('violations.hold');
+        });
+    });
+
+    describe('createTransactionPreviewConditionals', () => {
+        it('should determine RBR visibility according to violation and hold conditions', () => {
+            const input = {
+                ...basicInput,
+                violations: [{name: CONST.VIOLATIONS.MISSING_CATEGORY, type: CONST.VIOLATION_TYPES.VIOLATION, transactionID: 123, showInReview: true}],
+            };
+            const result = createTransactionPreviewConditionals(input);
+            expect(result.shouldShowRBR).toBeTruthy();
+        });
+
+        it("should disable onPress when it's a bill split with empty transaction data", () => {
+            const input = {...basicInput, isBillSplit: true, transaction: undefined};
+            const result = createTransactionPreviewConditionals(input);
+            expect(result.shouldDisableOnPress).toBeTruthy();
+        });
+
+        it("should not show category if it's not a policy expense chat", () => {
+            const input = {...basicInput, isReportAPolicyExpenseChat: false};
+            const result = createTransactionPreviewConditionals(input);
+            expect(result.shouldShowCategory).toBeFalsy();
+        });
+
+        it('should show keep button when there are duplicates', () => {
+            const input = {...basicInput, areThereDuplicates: true};
+            const result = createTransactionPreviewConditionals(input);
+            expect(result.shouldShowKeepButton).toBeTruthy();
+        });
+    });
+});