diff --git a/src/CONST.ts b/src/CONST.ts
index d2be946cdb2b..e9d4acf50fcf 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -4782,6 +4782,7 @@ const CONST = {
 
     SEARCH_DATA_TYPES: {
         TRANSACTION: 'transaction',
+        REPORT: 'report',
     },
 
     REFERRER: {
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index b4dcc9a15d75..4cead436aae2 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -15,6 +15,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import SelectionList from './SelectionList';
 import SearchTableHeader from './SelectionList/SearchTableHeader';
+import type {ReportListItemType, TransactionListItemType} from './SelectionList/types';
 import TableListItemSkeleton from './Skeletons/TableListItemSkeleton';
 
 type SearchProps = {
@@ -22,6 +23,11 @@ type SearchProps = {
     policyIDs?: string;
 };
 
+function isReportListItemType(item: TransactionListItemType | ReportListItemType): item is ReportListItemType {
+    const reportListItem = item as ReportListItemType;
+    return reportListItem.transactions !== undefined;
+}
+
 function Search({query, policyIDs}: SearchProps) {
     const {isOffline} = useNetwork();
     const styles = useThemeStyles();
@@ -74,10 +80,11 @@ function Search({query, policyIDs}: SearchProps) {
     }
 
     const ListItem = SearchUtils.getListItem(type);
+
     const data = SearchUtils.getSections(searchResults?.data ?? {}, type);
 
     return (
-        <SelectionList
+        <SelectionList<ReportListItemType | TransactionListItemType>
             customListHeader={<SearchTableHeader data={searchResults?.data} />}
             // To enhance the smoothness of scrolling and minimize the risk of encountering blank spaces during scrolling,
             // we have configured a larger windowSize and a longer delay between batch renders.
@@ -93,7 +100,9 @@ function Search({query, policyIDs}: SearchProps) {
             ListItem={ListItem}
             sections={[{data, isDisabled: false}]}
             onSelectRow={(item) => {
-                openReport(item.transactionThreadReportID);
+                const reportID = isReportListItemType(item) ? item.reportID : item.transactionThreadReportID;
+
+                openReport(reportID);
             }}
             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
             listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
new file mode 100644
index 000000000000..9b2188c659e5
--- /dev/null
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -0,0 +1,54 @@
+import React, {memo} from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import type {SearchAccountDetails} from '@src/types/onyx/SearchResults';
+import UserInfoCell from './UserInfoCell';
+
+type ExpenseItemHeaderNarrowProps = {
+    participantFrom: SearchAccountDetails;
+    participantTo: SearchAccountDetails;
+    buttonText: string;
+    onButtonPress: () => void;
+};
+
+function ExpenseItemHeaderNarrow({participantFrom, participantTo, buttonText, onButtonPress}: ExpenseItemHeaderNarrowProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const theme = useTheme();
+
+    return (
+        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mb2, styles.gap2]}>
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.flex1]}>
+                <View style={[styles.mw50]}>
+                    <UserInfoCell participant={participantFrom} />
+                </View>
+                <Icon
+                    src={Expensicons.ArrowRightLong}
+                    width={variables.iconSizeXXSmall}
+                    height={variables.iconSizeXXSmall}
+                    fill={theme.icon}
+                />
+                <View style={[styles.flex1, styles.mw50]}>
+                    <UserInfoCell participant={participantTo} />
+                </View>
+            </View>
+            <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
+                <Button
+                    text={buttonText}
+                    onPress={onButtonPress}
+                    small
+                    pressOnEnter
+                    style={[styles.p0]}
+                />
+            </View>
+        </View>
+    );
+}
+
+export default memo(ExpenseItemHeaderNarrow);
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
new file mode 100644
index 000000000000..654cf7597568
--- /dev/null
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -0,0 +1,159 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import BaseListItem from '@components/SelectionList/BaseListItem';
+import type {ListItem, ReportListItemProps, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
+import Text from '@components/Text';
+import TextWithTooltip from '@components/TextWithTooltip';
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import {getSearchParams} from '@libs/SearchUtils';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import ExpenseItemHeaderNarrow from './ExpenseItemHeaderNarrow';
+import TransactionListItem from './TransactionListItem';
+import TransactionListItemRow from './TransactionListItemRow';
+
+function ReportListItem<TItem extends ListItem>({
+    item,
+    isFocused,
+    showTooltip,
+    isDisabled,
+    canSelectMultiple,
+    onSelectRow,
+    onDismissError,
+    shouldPreventDefaultFocusOnSelectRow,
+    onFocus,
+    shouldSyncFocus,
+}: ReportListItemProps<TItem>) {
+    const reportItem = item as unknown as ReportListItemType;
+
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isLargeScreenWidth} = useWindowDimensions();
+    const StyleUtils = useStyleUtils();
+
+    const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive];
+
+    const handleOnButtonPress = () => {
+        onSelectRow(item);
+    };
+
+    const openReportInRHP = (transactionItem: TransactionListItemType) => {
+        const searchParams = getSearchParams();
+        const currentQuery = searchParams && `query` in searchParams ? (searchParams?.query as string) : CONST.TAB_SEARCH.ALL;
+        Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(currentQuery, transactionItem.transactionThreadReportID));
+    };
+
+    const totalCell = (
+        <TextWithTooltip
+            shouldShowTooltip={showTooltip}
+            text={CurrencyUtils.convertToDisplayString(reportItem?.total, reportItem?.currency)}
+            style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
+        />
+    );
+
+    const actionCell = (
+        <Button
+            text={translate('common.view')}
+            onPress={handleOnButtonPress}
+            small
+            pressOnEnter
+            style={[styles.p0]}
+        />
+    );
+
+    if (!reportItem?.reportName && reportItem.transactions.length > 1) {
+        return null;
+    }
+
+    const participantFrom = reportItem.transactions[0].from;
+    const participantTo = reportItem.transactions[0].to;
+
+    if (reportItem.transactions.length === 1) {
+        const transactionItem = reportItem.transactions[0];
+
+        return (
+            <TransactionListItem
+                item={transactionItem as unknown as TItem}
+                isFocused={isFocused}
+                showTooltip={showTooltip}
+                isDisabled={isDisabled}
+                canSelectMultiple={canSelectMultiple}
+                onSelectRow={() => openReportInRHP(transactionItem)}
+                onDismissError={onDismissError}
+                shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+                onFocus={onFocus}
+                shouldSyncFocus={shouldSyncFocus}
+            />
+        );
+    }
+
+    return (
+        <BaseListItem
+            item={item}
+            pressableStyle={listItemPressableStyle}
+            wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
+            containerStyle={[styles.mb3]}
+            isFocused={isFocused}
+            isDisabled={isDisabled}
+            showTooltip={showTooltip}
+            canSelectMultiple={canSelectMultiple}
+            onSelectRow={onSelectRow}
+            onDismissError={onDismissError}
+            shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+            errors={item.errors}
+            pendingAction={item.pendingAction}
+            keyForList={item.keyForList}
+            onFocus={onFocus}
+            shouldSyncFocus={shouldSyncFocus}
+            hoverStyle={item.isSelected && styles.activeComponentBG}
+        >
+            <View style={styles.flex1}>
+                {!isLargeScreenWidth && (
+                    <ExpenseItemHeaderNarrow
+                        participantFrom={participantFrom}
+                        participantTo={participantTo}
+                        buttonText={translate('common.view')}
+                        onButtonPress={handleOnButtonPress}
+                    />
+                )}
+                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                    <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
+                            <View style={[styles.flexShrink1]}>
+                                <Text style={[styles.reportListItemTitle]}>{reportItem?.reportName}</Text>
+                                <Text style={[styles.textMicroSupporting]}>{`${reportItem.transactions.length} ${translate('search.groupedExpenses')}`}</Text>
+                            </View>
+                        </View>
+                        <View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>{totalCell}</View>
+                    </View>
+                    {/** styles.reportListItemActionButtonMargin added here to move the action button by the type column distance */}
+                    {isLargeScreenWidth && (
+                        <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION), styles.reportListItemActionButtonMargin]}>{actionCell}</View>
+                    )}
+                </View>
+                <View style={[styles.mt3, styles.reportListItemSeparator]} />
+                {reportItem.transactions.map((transaction) => (
+                    <TransactionListItemRow
+                        item={transaction}
+                        showTooltip={showTooltip}
+                        onButtonPress={() => {
+                            openReportInRHP(transaction);
+                        }}
+                        showItemHeaderOnNarrowLayout={false}
+                        containerStyle={styles.mt3}
+                    />
+                ))}
+            </View>
+        </BaseListItem>
+    );
+}
+
+ReportListItem.displayName = 'ReportListItem';
+
+export default ReportListItem;
diff --git a/src/components/SelectionList/TextWithIconCell.tsx b/src/components/SelectionList/Search/TextWithIconCell.tsx
similarity index 100%
rename from src/components/SelectionList/TextWithIconCell.tsx
rename to src/components/SelectionList/Search/TextWithIconCell.tsx
diff --git a/src/components/SelectionList/Search/TransactionListItem.tsx b/src/components/SelectionList/Search/TransactionListItem.tsx
new file mode 100644
index 000000000000..026f0df2d43e
--- /dev/null
+++ b/src/components/SelectionList/Search/TransactionListItem.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import BaseListItem from '@components/SelectionList/BaseListItem';
+import type {ListItem, TransactionListItemProps, TransactionListItemType} from '@components/SelectionList/types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import TransactionListItemRow from './TransactionListItemRow';
+
+function TransactionListItem<TItem extends ListItem>({
+    item,
+    isFocused,
+    showTooltip,
+    isDisabled,
+    canSelectMultiple,
+    onSelectRow,
+    onDismissError,
+    shouldPreventDefaultFocusOnSelectRow,
+    onFocus,
+    shouldSyncFocus,
+}: TransactionListItemProps<TItem>) {
+    const transactionItem = item as unknown as TransactionListItemType;
+    const styles = useThemeStyles();
+
+    const {isLargeScreenWidth} = useWindowDimensions();
+
+    const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive];
+
+    const listItemWrapperStyle = [
+        styles.flex1,
+        styles.userSelectNone,
+        isLargeScreenWidth ? {...styles.flexRow, ...styles.justifyContentBetween, ...styles.alignItemsCenter} : {...styles.flexColumn, ...styles.alignItemsStretch},
+    ];
+
+    return (
+        <BaseListItem
+            item={item}
+            pressableStyle={listItemPressableStyle}
+            wrapperStyle={listItemWrapperStyle}
+            containerStyle={[styles.mb3]}
+            isFocused={isFocused}
+            isDisabled={isDisabled}
+            showTooltip={showTooltip}
+            canSelectMultiple={canSelectMultiple}
+            onSelectRow={onSelectRow}
+            onDismissError={onDismissError}
+            shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+            errors={item.errors}
+            pendingAction={item.pendingAction}
+            keyForList={item.keyForList}
+            onFocus={onFocus}
+            shouldSyncFocus={shouldSyncFocus}
+            hoverStyle={item.isSelected && styles.activeComponentBG}
+        >
+            {() => (
+                <TransactionListItemRow
+                    item={transactionItem}
+                    showTooltip={showTooltip}
+                    onButtonPress={() => {
+                        onSelectRow(item);
+                    }}
+                />
+            )}
+        </BaseListItem>
+    );
+}
+
+TransactionListItem.displayName = 'TransactionListItem';
+
+export default TransactionListItem;
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
new file mode 100644
index 000000000000..e25588f160f7
--- /dev/null
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -0,0 +1,386 @@
+import React, {memo} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import Avatar from '@components/Avatar';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import type {
+    ActionCellProps,
+    CellProps,
+    CurrencyCellProps,
+    DateCellProps,
+    MerchantCellProps,
+    TransactionCellProps,
+    TransactionListItemType,
+    TypeCellProps,
+    UserCellProps,
+} from '@components/SelectionList/types';
+import Text from '@components/Text';
+import TextWithTooltip from '@components/TextWithTooltip';
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import CONST from '@src/CONST';
+import type {Transaction} from '@src/types/onyx';
+import type {SearchTransactionType} from '@src/types/onyx/SearchResults';
+import ExpenseItemHeaderNarrow from './ExpenseItemHeaderNarrow';
+import TextWithIconCell from './TextWithIconCell';
+
+type TransactionListItemRowProps = {
+    item: TransactionListItemType;
+    showTooltip: boolean;
+    onButtonPress: () => void;
+    showItemHeaderOnNarrowLayout?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+};
+
+const getTypeIcon = (type?: SearchTransactionType) => {
+    switch (type) {
+        case CONST.SEARCH_TRANSACTION_TYPE.CASH:
+            return Expensicons.Cash;
+        case CONST.SEARCH_TRANSACTION_TYPE.CARD:
+            return Expensicons.CreditCard;
+        case CONST.SEARCH_TRANSACTION_TYPE.DISTANCE:
+            return Expensicons.Car;
+        default:
+            return Expensicons.Cash;
+    }
+};
+function arePropsEqual(prevProps: CellProps, nextProps: CellProps) {
+    return prevProps.keyForList === nextProps.keyForList;
+}
+
+const DateCell = memo(({showTooltip, date, isLargeScreenWidth}: DateCellProps) => {
+    const styles = useThemeStyles();
+
+    return (
+        <TextWithTooltip
+            shouldShowTooltip={!!showTooltip}
+            text={date}
+            style={[styles.label, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : [styles.textMicro, styles.textSupporting]]}
+        />
+    );
+}, arePropsEqual);
+
+const MerchantCell = memo(({showTooltip, transactionItem, merchant, description}: MerchantCellProps) => {
+    const styles = useThemeStyles();
+    return (
+        <TextWithTooltip
+            shouldShowTooltip={!!showTooltip}
+            text={transactionItem.shouldShowMerchant ? merchant : description}
+            style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
+        />
+    );
+}, arePropsEqual);
+
+const UserCell = memo(({participant}: UserCellProps) => {
+    const styles = useThemeStyles();
+
+    const displayName = participant?.name ?? participant?.displayName ?? participant?.login;
+    const avatarURL = participant?.avatarURL ?? participant?.avatar;
+    const isWorkspace = participant?.avatarURL !== undefined;
+    const iconType = isWorkspace ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR;
+
+    return (
+        <View style={[styles.flexRow, styles.gap1, styles.alignItemsCenter]}>
+            <Avatar
+                imageStyles={[styles.alignSelfCenter]}
+                size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                source={avatarURL}
+                name={displayName}
+                type={iconType}
+                avatarID={isWorkspace ? participant?.id : participant?.accountID}
+            />
+            <Text
+                numberOfLines={1}
+                style={[styles.textMicroBold, styles.flexShrink1]}
+            >
+                {displayName}
+            </Text>
+        </View>
+    );
+}, arePropsEqual);
+
+const TotalCell = memo(({showTooltip, amount, currency, isLargeScreenWidth}: CurrencyCellProps) => {
+    const styles = useThemeStyles();
+
+    return (
+        <TextWithTooltip
+            shouldShowTooltip={!!showTooltip}
+            text={CurrencyUtils.convertToDisplayString(amount, currency)}
+            style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
+        />
+    );
+}, arePropsEqual);
+
+const TypeCell = memo(({typeIcon, isLargeScreenWidth}: TypeCellProps) => {
+    const theme = useTheme();
+    return (
+        <Icon
+            src={typeIcon}
+            fill={theme.icon}
+            height={isLargeScreenWidth ? 20 : 12}
+            width={isLargeScreenWidth ? 20 : 12}
+        />
+    );
+}, arePropsEqual);
+
+const ActionCell = memo(({item, onSelectRow}: ActionCellProps) => {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <Button
+            text={translate('common.view')}
+            onPress={() => onSelectRow(item)}
+            small
+            pressOnEnter
+            style={[styles.p0]}
+        />
+    );
+}, arePropsEqual);
+
+const CategoryCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) => {
+    const styles = useThemeStyles();
+    return isLargeScreenWidth ? (
+        <TextWithTooltip
+            shouldShowTooltip={!!showTooltip}
+            text={transactionItem?.category}
+            style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
+        />
+    ) : (
+        <TextWithIconCell
+            icon={Expensicons.Folder}
+            showTooltip={!!showTooltip}
+            text={transactionItem?.category}
+        />
+    );
+}, arePropsEqual);
+
+const TagCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) => {
+    const styles = useThemeStyles();
+    return isLargeScreenWidth ? (
+        <TextWithTooltip
+            shouldShowTooltip={!!showTooltip}
+            text={transactionItem?.tag}
+            style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
+        />
+    ) : (
+        <TextWithIconCell
+            icon={Expensicons.Tag}
+            showTooltip={!!showTooltip}
+            text={transactionItem?.tag}
+        />
+    );
+}, arePropsEqual);
+
+const TaxCell = memo(({showTooltip, amount, currency}: CurrencyCellProps) => {
+    const styles = useThemeStyles();
+    return (
+        <TextWithTooltip
+            shouldShowTooltip={!!showTooltip}
+            text={CurrencyUtils.convertToDisplayString(amount, currency)}
+            style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter, styles.textAlignRight]}
+        />
+    );
+}, arePropsEqual);
+
+function getMerchant(item: TransactionListItemType) {
+    const merchant = TransactionUtils.getMerchant(item as OnyxEntry<Transaction>);
+
+    if (merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || merchant === CONST.TRANSACTION.DEFAULT_MERCHANT) {
+        return '';
+    }
+
+    return merchant;
+}
+
+function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeaderOnNarrowLayout = true, containerStyle}: TransactionListItemRowProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isLargeScreenWidth} = useWindowDimensions();
+    const StyleUtils = useStyleUtils();
+
+    const isFromExpenseReport = item.reportType === CONST.REPORT.TYPE.EXPENSE;
+    const date = TransactionUtils.getCreated(item as OnyxEntry<Transaction>, CONST.DATE.MONTH_DAY_ABBR_FORMAT);
+    const amount = TransactionUtils.getAmount(item as OnyxEntry<Transaction>, isFromExpenseReport);
+    const taxAmount = TransactionUtils.getTaxAmount(item as OnyxEntry<Transaction>, isFromExpenseReport);
+    const currency = TransactionUtils.getCurrency(item as OnyxEntry<Transaction>);
+    const description = TransactionUtils.getDescription(item as OnyxEntry<Transaction>);
+    const merchant = getMerchant(item);
+    const typeIcon = getTypeIcon(item.type);
+
+    if (!isLargeScreenWidth) {
+        return (
+            <View style={containerStyle}>
+                {showItemHeaderOnNarrowLayout && (
+                    <ExpenseItemHeaderNarrow
+                        participantFrom={item.from}
+                        participantTo={item.to}
+                        buttonText={translate('common.view')}
+                        onButtonPress={onButtonPress}
+                    />
+                )}
+
+                <View style={[styles.flexRow, styles.justifyContentBetween, styles.gap1]}>
+                    <View style={[styles.flex2, styles.gap1]}>
+                        <MerchantCell
+                            showTooltip={showTooltip}
+                            transactionItem={item}
+                            merchant={merchant}
+                            description={description}
+                            keyForList={item.keyForList ?? ''}
+                            isLargeScreenWidth={false}
+                        />
+                        <View style={[styles.flexRow, styles.flex1, styles.alignItemsEnd, styles.gap3]}>
+                            <CategoryCell
+                                keyForList={item.keyForList ?? ''}
+                                isLargeScreenWidth={isLargeScreenWidth}
+                                showTooltip={showTooltip}
+                                transactionItem={item}
+                            />
+                            <TagCell
+                                showTooltip={showTooltip}
+                                transactionItem={item}
+                                isLargeScreenWidth={isLargeScreenWidth}
+                                keyForList={item.keyForList ?? ''}
+                            />
+                        </View>
+                    </View>
+                    <View style={[styles.alignItemsEnd, styles.flex1, styles.gap1]}>
+                        <TotalCell
+                            showTooltip={showTooltip}
+                            amount={amount}
+                            currency={currency}
+                            isLargeScreenWidth={isLargeScreenWidth}
+                            keyForList={item.keyForList ?? ''}
+                        />
+                        <View style={[styles.flexRow, styles.gap1, styles.justifyContentCenter]}>
+                            <TypeCell
+                                typeIcon={typeIcon}
+                                isLargeScreenWidth={isLargeScreenWidth}
+                                keyForList={item.keyForList ?? ''}
+                                showTooltip={false}
+                            />
+                            <DateCell
+                                showTooltip={showTooltip}
+                                date={date}
+                                isLargeScreenWidth={isLargeScreenWidth}
+                                keyForList={item.keyForList ?? ''}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </View>
+        );
+    }
+
+    return (
+        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, containerStyle]}>
+            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.DATE)]}>
+                    <DateCell
+                        showTooltip={showTooltip}
+                        date={date}
+                        isLargeScreenWidth={isLargeScreenWidth}
+                        keyForList={item.keyForList ?? ''}
+                    />
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.MERCHANT)]}>
+                    <MerchantCell
+                        showTooltip={showTooltip}
+                        transactionItem={item}
+                        merchant={merchant}
+                        description={description}
+                        keyForList={item.keyForList ?? ''}
+                        isLargeScreenWidth={false}
+                    />
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
+                    <UserCell
+                        participant={item.from}
+                        keyForList={item.keyForList ?? ''}
+                        showTooltip={false}
+                        isLargeScreenWidth={false}
+                    />
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
+                    <UserCell
+                        participant={item.to}
+                        keyForList={item.keyForList ?? ''}
+                        showTooltip={false}
+                        isLargeScreenWidth={false}
+                    />
+                </View>
+                {item.shouldShowCategory && (
+                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.CATEGORY)]}>
+                        <CategoryCell
+                            keyForList={item.keyForList ?? ''}
+                            isLargeScreenWidth={isLargeScreenWidth}
+                            showTooltip={showTooltip}
+                            transactionItem={item}
+                        />
+                    </View>
+                )}
+                {item.shouldShowTag && (
+                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAG)]}>
+                        <TagCell
+                            keyForList={item.keyForList ?? ''}
+                            isLargeScreenWidth={isLargeScreenWidth}
+                            showTooltip={showTooltip}
+                            transactionItem={item}
+                        />
+                    </View>
+                )}
+                {item.shouldShowTax && (
+                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT)]}>
+                        <TaxCell
+                            keyForList={item.keyForList ?? ''}
+                            isLargeScreenWidth={isLargeScreenWidth}
+                            showTooltip={showTooltip}
+                            amount={taxAmount}
+                            currency={currency}
+                        />
+                    </View>
+                )}
+
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TOTAL)]}>
+                    <TotalCell
+                        showTooltip={showTooltip}
+                        amount={amount}
+                        currency={currency}
+                        isLargeScreenWidth={isLargeScreenWidth}
+                        keyForList={item.keyForList ?? ''}
+                    />
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)]}>
+                    <TypeCell
+                        typeIcon={typeIcon}
+                        isLargeScreenWidth={isLargeScreenWidth}
+                        keyForList={item.keyForList ?? ''}
+                        showTooltip={false}
+                    />
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}>
+                    <ActionCell
+                        item={item}
+                        onSelectRow={onButtonPress}
+                        keyForList={item.keyForList ?? ''}
+                        showTooltip={false}
+                        isLargeScreenWidth={false}
+                    />
+                </View>
+            </View>
+        </View>
+    );
+}
+
+TransactionListItemRow.displayName = 'TransactionListItemRow';
+
+export default TransactionListItemRow;
diff --git a/src/components/SelectionList/Search/UserInfoCell.tsx b/src/components/SelectionList/Search/UserInfoCell.tsx
new file mode 100644
index 000000000000..9c9eac163533
--- /dev/null
+++ b/src/components/SelectionList/Search/UserInfoCell.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {View} from 'react-native';
+import Avatar from '@components/Avatar';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type {SearchAccountDetails} from '@src/types/onyx/SearchResults';
+
+type UserInfoCellProps = {
+    participant: SearchAccountDetails;
+};
+
+function UserInfoCell({participant}: UserInfoCellProps) {
+    const styles = useThemeStyles();
+
+    const displayName = participant?.name ?? participant?.displayName ?? participant?.login;
+    const avatarURL = participant?.avatarURL ?? participant?.avatar;
+    const isWorkspace = participant?.avatarURL !== undefined;
+    const iconType = isWorkspace ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR;
+
+    return (
+        <View style={[styles.flexRow, styles.gap1, styles.alignItemsCenter]}>
+            <Avatar
+                imageStyles={[styles.alignSelfCenter]}
+                size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                source={avatarURL}
+                name={displayName}
+                type={iconType}
+                avatarID={isWorkspace ? participant?.id : participant?.accountID}
+            />
+            <Text
+                numberOfLines={1}
+                style={[styles.textMicroBold, styles.flexShrink1]}
+            >
+                {displayName}
+            </Text>
+        </View>
+    );
+}
+
+UserInfoCell.displayName = 'UserInfoCell';
+
+export default UserInfoCell;
diff --git a/src/components/SelectionList/TransactionListItem.tsx b/src/components/SelectionList/TransactionListItem.tsx
deleted file mode 100644
index 3cfbea9f9d05..000000000000
--- a/src/components/SelectionList/TransactionListItem.tsx
+++ /dev/null
@@ -1,458 +0,0 @@
-import React, {memo} from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import Avatar from '@components/Avatar';
-import Button from '@components/Button';
-import Icon from '@components/Icon';
-import * as Expensicons from '@components/Icon/Expensicons';
-import Text from '@components/Text';
-import TextWithTooltip from '@components/TextWithTooltip';
-import useLocalize from '@hooks/useLocalize';
-import useStyleUtils from '@hooks/useStyleUtils';
-import useTheme from '@hooks/useTheme';
-import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
-import * as TransactionUtils from '@libs/TransactionUtils';
-import variables from '@styles/variables';
-import CONST from '@src/CONST';
-import type {Transaction} from '@src/types/onyx';
-import type {SearchTransactionType} from '@src/types/onyx/SearchResults';
-import BaseListItem from './BaseListItem';
-import TextWithIconCell from './TextWithIconCell';
-import type {
-    ActionCellProps,
-    CellProps,
-    CurrencyCellProps,
-    DateCellProps,
-    ListItem,
-    MerchantCellProps,
-    TransactionCellProps,
-    TransactionListItemProps,
-    TransactionListItemType,
-    TypeCellProps,
-    UserCellProps,
-} from './types';
-
-const getTypeIcon = (type?: SearchTransactionType) => {
-    switch (type) {
-        case CONST.SEARCH_TRANSACTION_TYPE.CASH:
-            return Expensicons.Cash;
-        case CONST.SEARCH_TRANSACTION_TYPE.CARD:
-            return Expensicons.CreditCard;
-        case CONST.SEARCH_TRANSACTION_TYPE.DISTANCE:
-            return Expensicons.Car;
-        default:
-            return Expensicons.Cash;
-    }
-};
-
-function arePropsEqual(prevProps: CellProps, nextProps: CellProps) {
-    return prevProps.keyForList === nextProps.keyForList;
-}
-
-const DateCell = memo(({showTooltip, date, isLargeScreenWidth}: DateCellProps) => {
-    const styles = useThemeStyles();
-
-    return (
-        <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
-            text={date}
-            style={[styles.label, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : [styles.textMicro, styles.textSupporting]]}
-        />
-    );
-}, arePropsEqual);
-
-const MerchantCell = memo(({showTooltip, transactionItem, merchant, description}: MerchantCellProps) => {
-    const styles = useThemeStyles();
-    return (
-        <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
-            text={transactionItem.shouldShowMerchant ? merchant : description}
-            style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
-        />
-    );
-}, arePropsEqual);
-
-const UserCell = memo(({participant}: UserCellProps) => {
-    const styles = useThemeStyles();
-
-    const displayName = participant?.name ?? participant?.displayName ?? participant?.login;
-    const avatarURL = participant?.avatarURL ?? participant?.avatar;
-    const isWorkspace = participant?.avatarURL !== undefined;
-    const iconType = isWorkspace ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR;
-
-    return (
-        <View style={[styles.flexRow, styles.gap1, styles.alignItemsCenter]}>
-            <Avatar
-                imageStyles={[styles.alignSelfCenter]}
-                size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
-                source={avatarURL}
-                name={displayName}
-                type={iconType}
-                avatarID={isWorkspace ? participant?.id : participant?.accountID}
-            />
-            <Text
-                numberOfLines={1}
-                style={[styles.textMicroBold, styles.flexShrink1]}
-            >
-                {displayName}
-            </Text>
-        </View>
-    );
-}, arePropsEqual);
-
-const TotalCell = memo(({showTooltip, amount, currency, isLargeScreenWidth}: CurrencyCellProps) => {
-    const styles = useThemeStyles();
-
-    return (
-        <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
-            text={CurrencyUtils.convertToDisplayString(amount, currency)}
-            style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
-        />
-    );
-}, arePropsEqual);
-
-const TypeCell = memo(({typeIcon, isLargeScreenWidth}: TypeCellProps) => {
-    const theme = useTheme();
-    return (
-        <Icon
-            src={typeIcon}
-            fill={theme.icon}
-            height={isLargeScreenWidth ? 20 : 12}
-            width={isLargeScreenWidth ? 20 : 12}
-        />
-    );
-}, arePropsEqual);
-
-const ActionCell = memo(({item, onSelectRow}: ActionCellProps) => {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-
-    return (
-        <Button
-            text={translate('common.view')}
-            onPress={() => onSelectRow(item)}
-            small
-            pressOnEnter
-            style={[styles.p0]}
-        />
-    );
-}, arePropsEqual);
-
-const CategoryCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) => {
-    const styles = useThemeStyles();
-    return isLargeScreenWidth ? (
-        <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
-            text={transactionItem?.category}
-            style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
-        />
-    ) : (
-        <TextWithIconCell
-            icon={Expensicons.Folder}
-            showTooltip={!!showTooltip}
-            text={transactionItem?.category}
-        />
-    );
-}, arePropsEqual);
-
-const TagCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) => {
-    const styles = useThemeStyles();
-    return isLargeScreenWidth ? (
-        <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
-            text={transactionItem?.tag}
-            style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
-        />
-    ) : (
-        <TextWithIconCell
-            icon={Expensicons.Tag}
-            showTooltip={!!showTooltip}
-            text={transactionItem?.tag}
-        />
-    );
-}, arePropsEqual);
-
-const TaxCell = memo(({showTooltip, amount, currency}: CurrencyCellProps) => {
-    const styles = useThemeStyles();
-    return (
-        <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
-            text={CurrencyUtils.convertToDisplayString(amount, currency)}
-            style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter, styles.textAlignRight]}
-        />
-    );
-}, arePropsEqual);
-
-function getMerchant(transactionItem: TransactionListItemType) {
-    const merchant = TransactionUtils.getMerchant(transactionItem as OnyxEntry<Transaction>);
-    return merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || merchant === CONST.TRANSACTION.DEFAULT_MERCHANT ? '' : merchant;
-}
-
-function TransactionListItem<TItem extends ListItem>({
-    item,
-    isFocused,
-    showTooltip,
-    isDisabled,
-    canSelectMultiple,
-    onSelectRow,
-    onDismissError,
-    shouldPreventDefaultFocusOnSelectRow,
-    onFocus,
-    shouldSyncFocus,
-}: TransactionListItemProps<TItem>) {
-    const transactionItem = item as unknown as TransactionListItemType;
-    const styles = useThemeStyles();
-    const theme = useTheme();
-    const {isLargeScreenWidth} = useWindowDimensions();
-    const StyleUtils = useStyleUtils();
-
-    const isFromExpenseReport = transactionItem.reportType === CONST.REPORT.TYPE.EXPENSE;
-    const date = TransactionUtils.getCreated(transactionItem as OnyxEntry<Transaction>, CONST.DATE.MONTH_DAY_ABBR_FORMAT);
-    const amount = TransactionUtils.getAmount(transactionItem as OnyxEntry<Transaction>, isFromExpenseReport);
-    const taxAmount = TransactionUtils.getTaxAmount(transactionItem as OnyxEntry<Transaction>, isFromExpenseReport);
-    const currency = TransactionUtils.getCurrency(transactionItem as OnyxEntry<Transaction>);
-    const description = TransactionUtils.getDescription(transactionItem as OnyxEntry<Transaction>);
-    const merchant = getMerchant(transactionItem);
-    const typeIcon = getTypeIcon(transactionItem.type);
-
-    const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive];
-
-    if (!isLargeScreenWidth) {
-        return (
-            <BaseListItem
-                item={item}
-                pressableStyle={listItemPressableStyle}
-                wrapperStyle={[styles.flexColumn, styles.flex1, styles.userSelectNone, styles.alignItemsStretch]}
-                containerStyle={[styles.mb3]}
-                isFocused={isFocused}
-                isDisabled={isDisabled}
-                showTooltip={showTooltip}
-                canSelectMultiple={canSelectMultiple}
-                onSelectRow={onSelectRow}
-                onDismissError={onDismissError}
-                shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
-                errors={item.errors}
-                pendingAction={item.pendingAction}
-                keyForList={item.keyForList}
-                onFocus={onFocus}
-                shouldSyncFocus={shouldSyncFocus}
-                hoverStyle={item.isSelected && styles.activeComponentBG}
-            >
-                {() => (
-                    <>
-                        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mb2, styles.gap2]}>
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.flex1]}>
-                                <View style={[styles.mw50]}>
-                                    <UserCell
-                                        participant={transactionItem.from}
-                                        keyForList={item.keyForList ?? ''}
-                                        showTooltip={false}
-                                        isLargeScreenWidth={false}
-                                    />
-                                </View>
-                                <Icon
-                                    src={Expensicons.ArrowRightLong}
-                                    width={variables.iconSizeXXSmall}
-                                    height={variables.iconSizeXXSmall}
-                                    fill={theme.icon}
-                                />
-                                <View style={[styles.mw50]}>
-                                    <UserCell
-                                        participant={transactionItem.to}
-                                        keyForList={item.keyForList ?? ''}
-                                        showTooltip={false}
-                                        isLargeScreenWidth={false}
-                                    />
-                                </View>
-                            </View>
-                            <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
-                                <ActionCell
-                                    item={transactionItem}
-                                    onSelectRow={onSelectRow as unknown as (item: TransactionListItemType) => void}
-                                    keyForList={item.keyForList ?? ''}
-                                    showTooltip={false}
-                                    isLargeScreenWidth={false}
-                                />
-                            </View>
-                        </View>
-                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.gap1]}>
-                            <View style={[styles.flex2, styles.gap1]}>
-                                <MerchantCell
-                                    showTooltip={showTooltip}
-                                    transactionItem={transactionItem}
-                                    merchant={merchant}
-                                    description={description}
-                                    keyForList={item.keyForList ?? ''}
-                                    isLargeScreenWidth={false}
-                                />
-                                <View style={[styles.flexRow, styles.flex1, styles.alignItemsEnd, styles.gap3]}>
-                                    <CategoryCell
-                                        keyForList={item.keyForList ?? ''}
-                                        isLargeScreenWidth={isLargeScreenWidth}
-                                        showTooltip={showTooltip}
-                                        transactionItem={transactionItem}
-                                    />
-                                    <TagCell
-                                        showTooltip={showTooltip}
-                                        transactionItem={transactionItem}
-                                        isLargeScreenWidth={isLargeScreenWidth}
-                                        keyForList={item.keyForList ?? ''}
-                                    />
-                                </View>
-                            </View>
-                            <View style={[styles.alignItemsEnd, styles.flex1, styles.gap1]}>
-                                <TotalCell
-                                    showTooltip={showTooltip}
-                                    amount={amount}
-                                    currency={currency}
-                                    isLargeScreenWidth={isLargeScreenWidth}
-                                    keyForList={item.keyForList ?? ''}
-                                />
-                                <View style={[styles.flexRow, styles.gap1, styles.justifyContentCenter]}>
-                                    <TypeCell
-                                        typeIcon={typeIcon}
-                                        isLargeScreenWidth={isLargeScreenWidth}
-                                        keyForList={item.keyForList ?? ''}
-                                        showTooltip={false}
-                                    />
-                                    <DateCell
-                                        showTooltip={showTooltip}
-                                        date={date}
-                                        isLargeScreenWidth={isLargeScreenWidth}
-                                        keyForList={item.keyForList ?? ''}
-                                    />
-                                </View>
-                            </View>
-                        </View>
-                    </>
-                )}
-            </BaseListItem>
-        );
-    }
-
-    return (
-        <BaseListItem
-            item={item}
-            pressableStyle={listItemPressableStyle}
-            wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
-            containerStyle={[styles.mb3]}
-            isFocused={isFocused}
-            isDisabled={isDisabled}
-            showTooltip={showTooltip}
-            canSelectMultiple={canSelectMultiple}
-            onSelectRow={onSelectRow}
-            onDismissError={onDismissError}
-            shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
-            errors={item.errors}
-            pendingAction={item.pendingAction}
-            keyForList={item.keyForList}
-            onFocus={onFocus}
-            shouldSyncFocus={shouldSyncFocus}
-            hoverStyle={item.isSelected && styles.activeComponentBG}
-        >
-            {() => (
-                <View style={[styles.flex1, styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.DATE)]}>
-                        <DateCell
-                            showTooltip={showTooltip}
-                            date={date}
-                            isLargeScreenWidth={isLargeScreenWidth}
-                            keyForList={item.keyForList ?? ''}
-                        />
-                    </View>
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.MERCHANT)]}>
-                        <MerchantCell
-                            showTooltip={showTooltip}
-                            transactionItem={transactionItem}
-                            merchant={merchant}
-                            description={description}
-                            keyForList={item.keyForList ?? ''}
-                            isLargeScreenWidth={false}
-                        />
-                    </View>
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
-                        <UserCell
-                            participant={transactionItem.from}
-                            keyForList={item.keyForList ?? ''}
-                            showTooltip={false}
-                            isLargeScreenWidth={false}
-                        />
-                    </View>
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
-                        <UserCell
-                            participant={transactionItem.to}
-                            keyForList={item.keyForList ?? ''}
-                            showTooltip={false}
-                            isLargeScreenWidth={false}
-                        />
-                    </View>
-                    {transactionItem.shouldShowCategory && (
-                        <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.CATEGORY)]}>
-                            <CategoryCell
-                                keyForList={item.keyForList ?? ''}
-                                isLargeScreenWidth={isLargeScreenWidth}
-                                showTooltip={showTooltip}
-                                transactionItem={transactionItem}
-                            />
-                        </View>
-                    )}
-                    {transactionItem.shouldShowTag && (
-                        <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAG)]}>
-                            <TagCell
-                                keyForList={item.keyForList ?? ''}
-                                isLargeScreenWidth={isLargeScreenWidth}
-                                showTooltip={showTooltip}
-                                transactionItem={transactionItem}
-                            />
-                        </View>
-                    )}
-                    {transactionItem.shouldShowTax && (
-                        <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT)]}>
-                            <TaxCell
-                                keyForList={item.keyForList ?? ''}
-                                isLargeScreenWidth={isLargeScreenWidth}
-                                showTooltip={showTooltip}
-                                amount={taxAmount}
-                                currency={currency}
-                            />
-                        </View>
-                    )}
-
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TOTAL)]}>
-                        <TotalCell
-                            showTooltip={showTooltip}
-                            amount={amount}
-                            currency={currency}
-                            isLargeScreenWidth={isLargeScreenWidth}
-                            keyForList={item.keyForList ?? ''}
-                        />
-                    </View>
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)]}>
-                        <TypeCell
-                            typeIcon={typeIcon}
-                            isLargeScreenWidth={isLargeScreenWidth}
-                            keyForList={item.keyForList ?? ''}
-                            showTooltip={false}
-                        />
-                    </View>
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}>
-                        <ActionCell
-                            item={transactionItem}
-                            onSelectRow={onSelectRow as unknown as (item: TransactionListItemType) => void}
-                            keyForList={item.keyForList ?? ''}
-                            showTooltip={false}
-                            isLargeScreenWidth={false}
-                        />
-                    </View>
-                </View>
-            )}
-        </BaseListItem>
-    );
-}
-
-TransactionListItem.displayName = 'TransactionListItem';
-
-export default memo(TransactionListItem);
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index 11e2a53fe5d2..389488c475c2 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -4,14 +4,15 @@ import type {MaybePhraseKey} from '@libs/Localize';
 import type {BrickRoad} from '@libs/WorkspacesSettingsUtils';
 import type CONST from '@src/CONST';
 import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
-import type {SearchAccountDetails, SearchPersonalDetails, SearchPolicyDetails, SearchTransaction} from '@src/types/onyx/SearchResults';
+import type {SearchAccountDetails, SearchPersonalDetails, SearchPolicyDetails, SearchReport, SearchTransaction} from '@src/types/onyx/SearchResults';
 import type {ReceiptErrors} from '@src/types/onyx/Transaction';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
 import type InviteMemberListItem from './InviteMemberListItem';
 import type RadioListItem from './RadioListItem';
+import type ReportListItem from './Search/ReportListItem';
+import type TransactionListItem from './Search/TransactionListItem';
 import type TableListItem from './TableListItem';
-import type TransactionListItem from './TransactionListItem';
 import type UserListItem from './UserListItem';
 
 type TRightHandSideComponent<TItem extends ListItem> = {
@@ -148,6 +149,11 @@ type TransactionListItemType = ListItem &
         shouldShowTax: boolean;
     };
 
+type ReportListItemType = ListItem &
+    SearchReport & {
+        transactions: TransactionListItemType[];
+    };
+
 type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     /** The section list item */
     item: TItem;
@@ -206,7 +212,9 @@ type TableListItemProps<TItem extends ListItem> = ListItemProps<TItem>;
 
 type TransactionListItemProps<TItem extends ListItem> = ListItemProps<TItem>;
 
-type ValidListItem = typeof RadioListItem | typeof UserListItem | typeof TableListItem | typeof InviteMemberListItem | typeof TransactionListItem;
+type ReportListItemProps<TItem extends ListItem> = ListItemProps<TItem>;
+
+type ValidListItem = typeof RadioListItem | typeof UserListItem | typeof TableListItem | typeof InviteMemberListItem | typeof TransactionListItem | typeof ReportListItem;
 
 type Section<TItem extends ListItem> = {
     /** Title of the section */
@@ -457,31 +465,33 @@ type TypeCellProps = {
 } & CellProps;
 
 export type {
+    ActionCellProps,
     BaseListItemProps,
     BaseSelectionListProps,
     ButtonOrCheckBoxRoles,
+    CellProps,
     CommonListItemProps,
+    CurrencyCellProps,
+    DateCellProps,
     FlattenedSectionsReturn,
     InviteMemberListItemProps,
     ItemLayout,
     ListItem,
     ListItemProps,
+    MerchantCellProps,
     RadioListItemProps,
+    ReportListItemProps,
+    ReportListItemType,
     Section,
     SectionListDataType,
     SectionWithIndexOffset,
     SelectionListHandle,
     TableListItemProps,
+    TransactionCellProps,
     TransactionListItemProps,
     TransactionListItemType,
+    TypeCellProps,
+    UserCellProps,
     UserListItemProps,
     ValidListItem,
-    DateCellProps,
-    MerchantCellProps,
-    UserCellProps,
-    CurrencyCellProps,
-    TransactionCellProps,
-    ActionCellProps,
-    TypeCellProps,
-    CellProps,
 };
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 174b52b7bad8..6ce7d0355f94 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2706,6 +2706,7 @@ export default {
                 subtitle: 'Try creating something using the green + button.',
             },
         },
+        groupedExpenses: 'grouped expenses',
     },
     genericErrorPage: {
         title: 'Uh-oh, something went wrong!',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index a072c84ab36e..eb282c6a4280 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2745,6 +2745,7 @@ export default {
                 subtitle: 'Por favor intenta crear algo usando el botón verde.',
             },
         },
+        groupedExpenses: 'gastos agrupados',
     },
     genericErrorPage: {
         title: '¡Oh-oh, algo salió mal!',
diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index fb07990237f9..86685732737f 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -1,19 +1,27 @@
 import type {ValueOf} from 'react-native-gesture-handler/lib/typescript/typeUtils';
-import TransactionListItem from '@components/SelectionList/TransactionListItem';
-import type {TransactionListItemType} from '@components/SelectionList/types';
+import ReportListItem from '@components/SelectionList/Search/ReportListItem';
+import TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
+import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {SearchDataTypes, SearchTypeToItemMap} from '@src/types/onyx/SearchResults';
+import getTopmostCentralPaneRoute from './Navigation/getTopmostCentralPaneRoute';
+import navigationRef from './Navigation/navigationRef';
+import type {RootStackParamList, State} from './Navigation/types';
 import * as UserUtils from './UserUtils';
 
+function isSearchDataType(type: string): type is SearchDataTypes {
+    const searchDataTypes: string[] = Object.values(CONST.SEARCH_DATA_TYPES);
+    return searchDataTypes.includes(type);
+}
+
 function getSearchType(search: OnyxTypes.SearchResults['search']): SearchDataTypes | undefined {
-    switch (search.type) {
-        case CONST.SEARCH_DATA_TYPES.TRANSACTION:
-            return CONST.SEARCH_DATA_TYPES.TRANSACTION;
-        default:
-            return undefined;
+    if (!isSearchDataType(search.type)) {
+        return undefined;
     }
+
+    return search.type;
 }
 
 function getShouldShowMerchant(data: OnyxTypes.SearchResults['data']): boolean {
@@ -54,11 +62,55 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data']): Transac
         });
 }
 
+function getReportSections(data: OnyxTypes.SearchResults['data']): ReportListItemType[] {
+    const shouldShowMerchant = getShouldShowMerchant(data);
+    const shouldShowCategory = getShouldShowColumn(data, CONST.SEARCH_TABLE_COLUMNS.CATEGORY);
+    const shouldShowTag = getShouldShowColumn(data, CONST.SEARCH_TABLE_COLUMNS.TAG);
+    const shouldShowTax = getShouldShowColumn(data, CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT);
+
+    const reportIDToTransactions: Record<string, ReportListItemType> = {};
+    for (const key in data) {
+        if (key.startsWith(ONYXKEYS.COLLECTION.REPORT)) {
+            const value = {...data[key]};
+            const reportKey = `${ONYXKEYS.COLLECTION.REPORT}${value.reportID}`;
+            reportIDToTransactions[reportKey] = {
+                ...value,
+                transactions: reportIDToTransactions[reportKey]?.transactions ?? [],
+            };
+        } else if (key.startsWith(ONYXKEYS.COLLECTION.TRANSACTION)) {
+            const value = {...data[key]};
+            const isExpenseReport = value.reportType === CONST.REPORT.TYPE.EXPENSE;
+            const reportKey = `${ONYXKEYS.COLLECTION.REPORT}${value.reportID}`;
+            const transaction = {
+                ...value,
+                from: data.personalDetailsList?.[value.accountID],
+                to: isExpenseReport ? data[`${ONYXKEYS.COLLECTION.POLICY}${value.policyID}`] : data.personalDetailsList?.[value.managerID],
+                shouldShowMerchant,
+                shouldShowCategory,
+                shouldShowTag,
+                shouldShowTax,
+                keyForList: value.transactionID,
+            };
+            if (reportIDToTransactions[reportKey]?.transactions) {
+                reportIDToTransactions[reportKey].transactions.push(transaction);
+            } else {
+                reportIDToTransactions[reportKey] = {transactions: [transaction]};
+            }
+        }
+    }
+
+    return Object.values(reportIDToTransactions);
+}
+
 const searchTypeToItemMap: SearchTypeToItemMap = {
     [CONST.SEARCH_DATA_TYPES.TRANSACTION]: {
         listItem: TransactionListItem,
         getSections: getTransactionsSections,
     },
+    [CONST.SEARCH_DATA_TYPES.REPORT]: {
+        listItem: ReportListItem,
+        getSections: getReportSections,
+    },
 };
 
 function getListItem<K extends keyof SearchTypeToItemMap>(type: K): SearchTypeToItemMap[K]['listItem'] {
@@ -74,4 +126,9 @@ function getQueryHash(query: string, policyID?: string): number {
     return UserUtils.hashText(textToHash, 2 ** 32);
 }
 
-export {getListItem, getQueryHash, getSections, getShouldShowColumn, getShouldShowMerchant, getSearchType};
+function getSearchParams() {
+    const topmostCentralPaneRoute = getTopmostCentralPaneRoute(navigationRef.getRootState() as State<RootStackParamList>);
+    return topmostCentralPaneRoute?.params;
+}
+
+export {getListItem, getQueryHash, getSearchType, getSections, getShouldShowColumn, getShouldShowMerchant, getSearchParams};
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 99956f003d73..f08a4057f3aa 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -21,8 +21,8 @@ type SearchPageProps = StackScreenProps<CentralPaneNavigatorParamList, typeof SC
 function SearchPage({route}: SearchPageProps) {
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const currentQuery = route?.params && 'query' in route.params ? route?.params?.query : '';
-    const policyIDs = route?.params && 'policyIDs' in route.params ? route?.params?.policyIDs : undefined;
+    const currentQuery = route?.params?.query;
+    const policyIDs = route?.params?.policyIDs;
     const query = currentQuery as SearchQuery;
     const isValidQuery = Object.values(CONST.TAB_SEARCH).includes(query);
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index cd676e89be0b..6cb11536eaa5 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4917,6 +4917,21 @@ const styles = (theme: ThemeColors) =>
         textLineThrough: {
             textDecorationLine: 'line-through',
         },
+
+        reportListItemSeparator: {
+            borderBottomWidth: 1,
+            borderBottomColor: theme.activeComponentBG,
+        },
+
+        reportListItemTitle: {
+            color: theme.text,
+            fontSize: variables.fontSizeNormal,
+            fontWeight: FontUtils.fontWeight.bold,
+        },
+
+        reportListItemActionButtonMargin: {
+            marginLeft: variables.searchTypeColumnWidth,
+        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 7ab469af9533..01a18462c302 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -231,6 +231,8 @@ export default {
     bankButtonMargin: 23,
     textInputAutoGrowMaxHeight: 115,
 
+    searchTypeColumnWidth: 52,
+
     w28: 28,
     w44: 44,
     w80: 80,
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index 5bce5be12f30..e9ccc4d82ad0 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/src/types/onyx/SearchResults.ts
@@ -1,12 +1,22 @@
 import type {ValueOf} from 'type-fest';
-import type TransactionListItem from '@components/SelectionList/TransactionListItem';
+import type ReportListItem from '@components/SelectionList/Search/ReportListItem';
+import type TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
+import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import type CONST from '@src/CONST';
 
 type SearchDataTypes = ValueOf<typeof CONST.SEARCH_DATA_TYPES>;
 
-type ListItemType<T extends SearchDataTypes> = T extends typeof CONST.SEARCH_DATA_TYPES.TRANSACTION ? typeof TransactionListItem : never;
+type ListItemType<T extends SearchDataTypes> = T extends typeof CONST.SEARCH_DATA_TYPES.TRANSACTION
+    ? typeof TransactionListItem
+    : T extends typeof CONST.SEARCH_DATA_TYPES.REPORT
+    ? typeof ReportListItem
+    : never;
 
-type SectionsType<T extends SearchDataTypes> = T extends typeof CONST.SEARCH_DATA_TYPES.TRANSACTION ? SearchTransaction[] : never;
+type SectionsType<T extends SearchDataTypes> = T extends typeof CONST.SEARCH_DATA_TYPES.TRANSACTION
+    ? TransactionListItemType[]
+    : T extends typeof CONST.SEARCH_DATA_TYPES.REPORT
+    ? ReportListItemType[]
+    : never;
 
 type SearchTypeToItemMap = {
     [K in SearchDataTypes]: {
@@ -35,6 +45,23 @@ type SearchPolicyDetails = {
     name: string;
 };
 
+type SearchReport = {
+    /** The ID of the report */
+    reportID?: string;
+
+    /** The name of the report */
+    reportName?: string;
+
+    /** The report total amount */
+    total?: number;
+
+    /** The report currency */
+    currency?: string;
+
+    /** The action that can be performed for the report */
+    action?: string;
+};
+
 type SearchTransaction = {
     /** The ID of the transaction */
     transactionID: string;
@@ -123,9 +150,9 @@ type SearchQuery = ValueOf<typeof CONST.TAB_SEARCH>;
 
 type SearchResults = {
     search: SearchResultsInfo;
-    data: Record<string, SearchTransaction & Record<string, SearchPersonalDetails>> & Record<string, SearchPolicyDetails>;
+    data: Record<string, SearchTransaction & Record<string, SearchPersonalDetails>> & Record<string, SearchPolicyDetails> & Record<string, SearchReport>;
 };
 
 export default SearchResults;
 
-export type {SearchQuery, SearchTransaction, SearchTransactionType, SearchPersonalDetails, SearchPolicyDetails, SearchAccountDetails, SearchDataTypes, SearchTypeToItemMap};
+export type {SearchQuery, SearchTransaction, SearchTransactionType, SearchPersonalDetails, SearchPolicyDetails, SearchAccountDetails, SearchDataTypes, SearchTypeToItemMap, SearchReport};