diff --git a/assets/images/arrow-down-long.svg b/assets/images/arrow-down-long.svg
new file mode 100644
index 000000000000..cbf6e7e5ad2f
--- /dev/null
+++ b/assets/images/arrow-down-long.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 8 8" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="M6.79395 4.06398C7.08993 4.39201 7.06395 4.89788 6.73592 5.19386L3.99999 7.66247L1.26407 5.19386C0.936035 4.89788 0.910053 4.39201 1.20604 4.06398C1.50202 3.73594 2.00788 3.70996 2.33592 4.00595L3.19999 4.7856L3.19999 1.1999C3.19999 0.758075 3.55817 0.399902 3.99999 0.399902C4.44182 0.399902 4.79999 0.758075 4.79999 1.1999V4.7856L5.66407 4.00595C5.9921 3.70996 6.49797 3.73594 6.79395 4.06398Z" class="st0"/></svg>
\ No newline at end of file
diff --git a/assets/images/arrow-up-long.svg b/assets/images/arrow-up-long.svg
new file mode 100644
index 000000000000..13d7a0c2d67e
--- /dev/null
+++ b/assets/images/arrow-up-long.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" version="1.1" viewBox="0 0 8 8" transform="matrix(-1, 0, 0, -1, 0, 0)" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="M6.79395 4.06398C7.08993 4.39201 7.06395 4.89788 6.73592 5.19386L3.99999 7.66247L1.26407 5.19386C0.936035 4.89788 0.910053 4.39201 1.20604 4.06398C1.50202 3.73594 2.00788 3.70996 2.33592 4.00595L3.19999 4.7856L3.19999 1.1999C3.19999 0.758075 3.55817 0.399902 3.99999 0.399902C4.44182 0.399902 4.79999 0.758075 4.79999 1.1999V4.7856L5.66407 4.00595C5.9921 3.70996 6.49797 3.73594 6.79395 4.06398Z" class="st0"/></svg>
\ No newline at end of file
diff --git a/src/CONST.ts b/src/CONST.ts
index 4f622cc0b3bf..4665ec94625a 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -932,6 +932,7 @@ const CONST = {
         RECEIPT: 'receipt',
         DATE: 'date',
         MERCHANT: 'merchant',
+        DESCRIPTION: 'description',
         FROM: 'from',
         TO: 'to',
         CATEGORY: 'category',
@@ -4777,6 +4778,11 @@ const CONST = {
     REFERRER: {
         NOTIFICATION: 'notification',
     },
+
+    SORT_ORDER: {
+        ASC: 'asc',
+        DESC: 'desc',
+    },
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 0302faf7e92b..ed6e1cd3ce38 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -2,6 +2,8 @@ import type {ValueOf} from 'type-fest';
 import type CONST from './CONST';
 import type {IOUAction, IOUType} from './CONST';
 import type {IOURequestType} from './libs/actions/IOU';
+import type {CentralPaneNavigatorParamList} from './libs/Navigation/types';
+import type {SearchQuery} from './types/onyx/SearchResults';
 import type AssertTypesNotEqual from './types/utils/AssertTypesNotEqual';
 
 // This is a file containing constants for all the routes we want to be able to go to
@@ -35,7 +37,15 @@ const ROUTES = {
 
     SEARCH: {
         route: '/search/:query',
-        getRoute: (query: string) => `search/${query}` as const,
+        getRoute: (searchQuery: SearchQuery, queryParams?: CentralPaneNavigatorParamList['Search_Central_Pane']) => {
+            const {sortBy, sortOrder} = queryParams ?? {};
+
+            if (!sortBy && !sortOrder) {
+                return `search/${searchQuery}` as const;
+            }
+
+            return `search/${searchQuery}?sortBy=${sortBy}&sortOrder=${sortOrder}` as const;
+        },
     },
 
     SEARCH_REPORT: {
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
index c127fbda1bd5..bcc40947a83a 100644
--- a/src/components/Icon/Expensicons.ts
+++ b/src/components/Icon/Expensicons.ts
@@ -2,8 +2,10 @@ import AddReaction from '@assets/images/add-reaction.svg';
 import All from '@assets/images/all.svg';
 import Android from '@assets/images/android.svg';
 import Apple from '@assets/images/apple.svg';
+import ArrowDownLong from '@assets/images/arrow-down-long.svg';
 import ArrowRightLong from '@assets/images/arrow-right-long.svg';
 import ArrowRight from '@assets/images/arrow-right.svg';
+import ArrowUpLong from '@assets/images/arrow-up-long.svg';
 import UpArrow from '@assets/images/arrow-up.svg';
 import ArrowsUpDown from '@assets/images/arrows-updown.svg';
 import AdminRoomAvatar from '@assets/images/avatars/admin-room.svg';
@@ -182,6 +184,8 @@ export {
     ArrowRight,
     ArrowRightLong,
     ArrowsUpDown,
+    ArrowUpLong,
+    ArrowDownLong,
     Wrench,
     BackArrow,
     Bank,
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 699ae0907f31..fcb915379181 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,4 +1,7 @@
-import React, {useEffect} from 'react';
+import {useNavigation} from '@react-navigation/native';
+import type {StackNavigationProp} from '@react-navigation/stack';
+import React, {useEffect, useRef} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -6,11 +9,15 @@ import * as SearchActions from '@libs/actions/Search';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Log from '@libs/Log';
 import * as SearchUtils from '@libs/SearchUtils';
+import type {SearchColumnType, SortOrder} from '@libs/SearchUtils';
 import Navigation from '@navigation/Navigation';
+import type {CentralPaneNavigatorParamList} from '@navigation/types';
 import EmptySearchView from '@pages/Search/EmptySearchView';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {SearchQuery} from '@src/types/onyx/SearchResults';
+import type SearchResults from '@src/types/onyx/SearchResults';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import SelectionList from './SelectionList';
@@ -19,8 +26,10 @@ import type {ReportListItemType, TransactionListItemType} from './SelectionList/
 import TableListItemSkeleton from './Skeletons/TableListItemSkeleton';
 
 type SearchProps = {
-    query: string;
+    query: SearchQuery;
     policyIDs?: string;
+    sortBy?: SearchColumnType;
+    sortOrder?: SortOrder;
 };
 
 function isReportListItemType(item: TransactionListItemType | ReportListItemType): item is ReportListItemType {
@@ -28,27 +37,36 @@ function isReportListItemType(item: TransactionListItemType | ReportListItemType
     return reportListItem.transactions !== undefined;
 }
 
-function Search({query, policyIDs}: SearchProps) {
+function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
     const {isOffline} = useNetwork();
     const styles = useThemeStyles();
+    const navigation = useNavigation<StackNavigationProp<CentralPaneNavigatorParamList>>();
+    const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
 
-    const hash = SearchUtils.getQueryHash(query, policyIDs);
-    const [searchResults, searchResultsMeta] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`);
+    const hash = SearchUtils.getQueryHash(query, policyIDs, sortBy, sortOrder);
+    const [currentSearchResults, searchResultsMeta] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`);
+
+    // save last non-empty search results to avoid ugly flash of loading screen when hash changes and onyx returns empty data
+    if (currentSearchResults?.data && currentSearchResults !== lastSearchResultsRef.current) {
+        lastSearchResultsRef.current = currentSearchResults;
+    }
+
+    const searchResults = currentSearchResults?.data ? currentSearchResults : lastSearchResultsRef.current;
 
     useEffect(() => {
         if (isOffline) {
             return;
         }
 
-        SearchActions.search(hash, query, 0, policyIDs);
+        SearchActions.search({hash, query, policyIDs, offset: 0, sortBy, sortOrder});
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hash, isOffline]);
 
-    const isLoadingInitialItems = (!isOffline && isLoadingOnyxValue(searchResultsMeta)) || searchResults?.data === undefined;
-    const isLoadingMoreItems = !isLoadingInitialItems && searchResults?.search?.isLoading;
-    const shouldShowEmptyState = !isLoadingInitialItems && isEmptyObject(searchResults?.data);
+    const isLoadingItems = (!isOffline && isLoadingOnyxValue(searchResultsMeta)) || searchResults?.data === undefined;
+    const isLoadingMoreItems = !isLoadingItems && searchResults?.search?.isLoading;
+    const shouldShowEmptyState = !isLoadingItems && isEmptyObject(searchResults?.data);
 
-    if (isLoadingInitialItems) {
+    if (isLoadingItems) {
         return <TableListItemSkeleton shouldAnimate />;
     }
 
@@ -65,11 +83,11 @@ function Search({query, policyIDs}: SearchProps) {
     };
 
     const fetchMoreResults = () => {
-        if (!searchResults?.search?.hasMoreResults || isLoadingInitialItems || isLoadingMoreItems) {
+        if (!searchResults?.search?.hasMoreResults || isLoadingItems || isLoadingMoreItems) {
             return;
         }
         const currentOffset = searchResults?.search?.offset ?? 0;
-        SearchActions.search(hash, query, currentOffset + CONST.SEARCH_RESULTS_PAGE_SIZE);
+        SearchActions.search({hash, query, offset: currentOffset + CONST.SEARCH_RESULTS_PAGE_SIZE, sortBy, sortOrder});
     };
 
     const type = SearchUtils.getSearchType(searchResults?.search);
@@ -83,9 +101,25 @@ function Search({query, policyIDs}: SearchProps) {
 
     const data = SearchUtils.getSections(searchResults?.data ?? {}, type);
 
+    const onSortPress = (column: SearchColumnType, order: SortOrder) => {
+        navigation.setParams({
+            sortBy: column,
+            sortOrder: order,
+        });
+    };
+
+    const sortedData = SearchUtils.getSortedSections(type, data, sortBy, sortOrder);
+
     return (
         <SelectionList<ReportListItemType | TransactionListItemType>
-            customListHeader={<SearchTableHeader data={searchResults?.data} />}
+            customListHeader={
+                <SearchTableHeader
+                    data={searchResults?.data}
+                    onSortPress={onSortPress}
+                    sortOrder={sortOrder}
+                    sortBy={sortBy}
+                />
+            }
             // 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.
             // The windowSize determines the number of items rendered before and after the currently visible items.
@@ -98,7 +132,7 @@ function Search({query, policyIDs}: SearchProps) {
             windowSize={111}
             updateCellsBatchingPeriod={200}
             ListItem={ListItem}
-            sections={[{data, isDisabled: false}]}
+            sections={[{data: sortedData, isDisabled: false}]}
             onSelectRow={(item) => {
                 const reportID = isReportListItemType(item) ? item.reportID : item.transactionThreadReportID;
 
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index 9b2188c659e5..cea9c174dda5 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -13,11 +13,13 @@ import UserInfoCell from './UserInfoCell';
 type ExpenseItemHeaderNarrowProps = {
     participantFrom: SearchAccountDetails;
     participantTo: SearchAccountDetails;
+    participantFromDisplayName: string;
+    participantToDisplayName: string;
     buttonText: string;
     onButtonPress: () => void;
 };
 
-function ExpenseItemHeaderNarrow({participantFrom, participantTo, buttonText, onButtonPress}: ExpenseItemHeaderNarrowProps) {
+function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, participantTo, participantToDisplayName, buttonText, onButtonPress}: ExpenseItemHeaderNarrowProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const theme = useTheme();
@@ -26,7 +28,10 @@ function ExpenseItemHeaderNarrow({participantFrom, participantTo, buttonText, on
         <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} />
+                    <UserInfoCell
+                        participant={participantFrom}
+                        displayName={participantFromDisplayName}
+                    />
                 </View>
                 <Icon
                     src={Expensicons.ArrowRightLong}
@@ -35,7 +40,10 @@ function ExpenseItemHeaderNarrow({participantFrom, participantTo, buttonText, on
                     fill={theme.icon}
                 />
                 <View style={[styles.flex1, styles.mw50]}>
-                    <UserInfoCell participant={participantTo} />
+                    <UserInfoCell
+                        participant={participantTo}
+                        displayName={participantToDisplayName}
+                    />
                 </View>
             </View>
             <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index ecab5a3053df..c1a38cf6e7cd 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -74,6 +74,11 @@ function ReportListItem<TItem extends ListItem>({
     const participantFrom = reportItem.transactions[0].from;
     const participantTo = reportItem.transactions[0].to;
 
+    // These values should come as part of the item via SearchUtils.getSections() but ReportListItem is not yet 100% handled
+    // This will be simplified in future once sorting of ReportListItem is done
+    const participantFromDisplayName = participantFrom?.name ?? participantFrom?.displayName ?? participantFrom?.login ?? '';
+    const participantToDisplayName = participantTo?.name ?? participantTo?.displayName ?? participantTo?.login ?? '';
+
     if (reportItem.transactions.length === 1) {
         const transactionItem = reportItem.transactions[0];
 
@@ -118,7 +123,9 @@ function ReportListItem<TItem extends ListItem>({
                     {!isLargeScreenWidth && (
                         <ExpenseItemHeaderNarrow
                             participantFrom={participantFrom}
+                            participantFromDisplayName={participantFromDisplayName}
                             participantTo={participantTo}
+                            participantToDisplayName={participantToDisplayName}
                             buttonText={translate('common.view')}
                             onButtonPress={handleOnButtonPress}
                         />
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 71912c2d3c7a..cb1ef3fdc6e1 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -1,25 +1,11 @@
 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 ReceiptImage from '@components/ReceiptImage';
-import type {
-    ActionCellProps,
-    CellProps,
-    CurrencyCellProps,
-    DateCellProps,
-    MerchantCellProps,
-    ReceiptCellProps,
-    TransactionCellProps,
-    TransactionListItemType,
-    TypeCellProps,
-    UserCellProps,
-} from '@components/SelectionList/types';
-import Text from '@components/Text';
+import type {TransactionListItemType} from '@components/SelectionList/types';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -31,10 +17,31 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 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 ExpenseItemHeaderNarrow from './ExpenseItemHeaderNarrow';
 import TextWithIconCell from './TextWithIconCell';
+import UserInfoCell from './UserInfoCell';
+
+type CellProps = {
+    // eslint-disable-next-line react/no-unused-prop-types
+    showTooltip: boolean;
+    // eslint-disable-next-line react/no-unused-prop-types
+    keyForList: string;
+    // eslint-disable-next-line react/no-unused-prop-types
+    isLargeScreenWidth: boolean;
+};
+
+type TransactionCellProps = {
+    transactionItem: TransactionListItemType;
+} & CellProps;
+
+type ReceiptCellProps = {
+    isHovered?: boolean;
+} & TransactionCellProps;
+
+type ActionCellProps = {
+    onButtonPress: () => void;
+} & CellProps;
 
 type TransactionListItemRowProps = {
     item: TransactionListItemType;
@@ -89,71 +96,49 @@ const ReceiptCell = memo(({transactionItem, isHovered = false}: ReceiptCellProps
     );
 }, areReceiptPropsEqual);
 
-const DateCell = memo(({showTooltip, date, isLargeScreenWidth}: DateCellProps) => {
+const DateCell = memo(({transactionItem, showTooltip, isLargeScreenWidth}: TransactionCellProps) => {
     const styles = useThemeStyles();
+    const date = TransactionUtils.getCreated(transactionItem, CONST.DATE.MONTH_DAY_ABBR_FORMAT);
 
     return (
         <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
+            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 MerchantCell = memo(({transactionItem, showTooltip}: TransactionCellProps) => {
     const styles = useThemeStyles();
+    const description = TransactionUtils.getDescription(transactionItem);
+
     return (
         <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
-            text={transactionItem.shouldShowMerchant ? merchant : description}
-            style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
+            shouldShowTooltip={showTooltip}
+            text={transactionItem.shouldShowMerchant ? transactionItem.formattedMerchant : description}
+            style={[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 TotalCell = memo(({showTooltip, isLargeScreenWidth, transactionItem}: TransactionCellProps) => {
     const styles = useThemeStyles();
+    const currency = TransactionUtils.getCurrency(transactionItem);
 
     return (
         <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
-            text={CurrencyUtils.convertToDisplayString(amount, currency)}
+            shouldShowTooltip={showTooltip}
+            text={CurrencyUtils.convertToDisplayString(transactionItem.formattedTotal, currency)}
             style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
         />
     );
 }, arePropsEqual);
 
-const TypeCell = memo(({typeIcon, isLargeScreenWidth}: TypeCellProps) => {
+const TypeCell = memo(({transactionItem, isLargeScreenWidth}: TransactionCellProps) => {
     const theme = useTheme();
+    const typeIcon = getTypeIcon(transactionItem.type);
+
     return (
         <Icon
             src={typeIcon}
@@ -164,14 +149,14 @@ const TypeCell = memo(({typeIcon, isLargeScreenWidth}: TypeCellProps) => {
     );
 }, arePropsEqual);
 
-const ActionCell = memo(({item, onSelectRow}: ActionCellProps) => {
+const ActionCell = memo(({onButtonPress}: ActionCellProps) => {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
     return (
         <Button
             text={translate('common.view')}
-            onPress={() => onSelectRow(item)}
+            onPress={onButtonPress}
             small
             pressOnEnter
             style={[styles.p0]}
@@ -183,14 +168,14 @@ const CategoryCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: T
     const styles = useThemeStyles();
     return isLargeScreenWidth ? (
         <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
+            shouldShowTooltip={showTooltip}
             text={transactionItem?.category}
             style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
         />
     ) : (
         <TextWithIconCell
             icon={Expensicons.Folder}
-            showTooltip={!!showTooltip}
+            showTooltip={showTooltip}
             text={transactionItem?.category}
         />
     );
@@ -200,62 +185,50 @@ const TagCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: Transa
     const styles = useThemeStyles();
     return isLargeScreenWidth ? (
         <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
+            shouldShowTooltip={showTooltip}
             text={transactionItem?.tag}
             style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
         />
     ) : (
         <TextWithIconCell
             icon={Expensicons.Tag}
-            showTooltip={!!showTooltip}
+            showTooltip={showTooltip}
             text={transactionItem?.tag}
         />
     );
 }, arePropsEqual);
 
-const TaxCell = memo(({showTooltip, amount, currency}: CurrencyCellProps) => {
+const TaxCell = memo(({transactionItem, showTooltip}: TransactionCellProps) => {
     const styles = useThemeStyles();
+
+    const isFromExpenseReport = transactionItem.reportType === CONST.REPORT.TYPE.EXPENSE;
+    const taxAmount = TransactionUtils.getTaxAmount(transactionItem, isFromExpenseReport);
+    const currency = TransactionUtils.getCurrency(transactionItem);
+
     return (
         <TextWithTooltip
-            shouldShowTooltip={!!showTooltip}
-            text={CurrencyUtils.convertToDisplayString(amount, currency)}
+            shouldShowTooltip={showTooltip}
+            text={CurrencyUtils.convertToDisplayString(taxAmount, 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, isHovered = false}: 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}
+                        participantFromDisplayName={item.formattedFrom}
                         participantTo={item.to}
+                        participantToDisplayName={item.formattedTo}
                         buttonText={translate('common.view')}
                         onButtonPress={onButtonPress}
                     />
@@ -271,10 +244,8 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                     />
                     <View style={[styles.flex2, styles.gap1]}>
                         <MerchantCell
-                            showTooltip={showTooltip}
                             transactionItem={item}
-                            merchant={merchant}
-                            description={description}
+                            showTooltip={showTooltip}
                             keyForList={item.keyForList ?? ''}
                             isLargeScreenWidth={false}
                         />
@@ -296,21 +267,20 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                     <View style={[styles.alignItemsEnd, styles.flex1, styles.gap1]}>
                         <TotalCell
                             showTooltip={showTooltip}
-                            amount={amount}
-                            currency={currency}
+                            transactionItem={item}
                             isLargeScreenWidth={isLargeScreenWidth}
                             keyForList={item.keyForList ?? ''}
                         />
                         <View style={[styles.flexRow, styles.gap1, styles.justifyContentCenter]}>
                             <TypeCell
-                                typeIcon={typeIcon}
+                                transactionItem={item}
                                 isLargeScreenWidth={isLargeScreenWidth}
                                 keyForList={item.keyForList ?? ''}
                                 showTooltip={false}
                             />
                             <DateCell
+                                transactionItem={item}
                                 showTooltip={showTooltip}
-                                date={date}
                                 isLargeScreenWidth={isLargeScreenWidth}
                                 keyForList={item.keyForList ?? ''}
                             />
@@ -335,36 +305,30 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.DATE)]}>
                     <DateCell
+                        transactionItem={item}
                         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}
+                        showTooltip={showTooltip}
                         keyForList={item.keyForList ?? ''}
                         isLargeScreenWidth={false}
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
-                    <UserCell
+                    <UserInfoCell
                         participant={item.from}
-                        keyForList={item.keyForList ?? ''}
-                        showTooltip={false}
-                        isLargeScreenWidth={false}
+                        displayName={item.formattedFrom}
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
-                    <UserCell
+                    <UserInfoCell
                         participant={item.to}
-                        keyForList={item.keyForList ?? ''}
-                        showTooltip={false}
-                        isLargeScreenWidth={false}
+                        displayName={item.formattedTo}
                     />
                 </View>
                 {item.shouldShowCategory && (
@@ -390,11 +354,10 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                 {item.shouldShowTax && (
                     <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT)]}>
                         <TaxCell
+                            transactionItem={item}
                             keyForList={item.keyForList ?? ''}
                             isLargeScreenWidth={isLargeScreenWidth}
                             showTooltip={showTooltip}
-                            amount={taxAmount}
-                            currency={currency}
                         />
                     </View>
                 )}
@@ -402,15 +365,14 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TOTAL)]}>
                     <TotalCell
                         showTooltip={showTooltip}
-                        amount={amount}
-                        currency={currency}
+                        transactionItem={item}
                         isLargeScreenWidth={isLargeScreenWidth}
                         keyForList={item.keyForList ?? ''}
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)]}>
                     <TypeCell
-                        typeIcon={typeIcon}
+                        transactionItem={item}
                         isLargeScreenWidth={isLargeScreenWidth}
                         keyForList={item.keyForList ?? ''}
                         showTooltip={false}
@@ -418,8 +380,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
-                        item={item}
-                        onSelectRow={onButtonPress}
+                        onButtonPress={onButtonPress}
                         keyForList={item.keyForList ?? ''}
                         showTooltip={false}
                         isLargeScreenWidth={false}
diff --git a/src/components/SelectionList/Search/UserInfoCell.tsx b/src/components/SelectionList/Search/UserInfoCell.tsx
index 9c9eac163533..eb67f121c298 100644
--- a/src/components/SelectionList/Search/UserInfoCell.tsx
+++ b/src/components/SelectionList/Search/UserInfoCell.tsx
@@ -8,12 +8,12 @@ import type {SearchAccountDetails} from '@src/types/onyx/SearchResults';
 
 type UserInfoCellProps = {
     participant: SearchAccountDetails;
+    displayName: string;
 };
 
-function UserInfoCell({participant}: UserInfoCellProps) {
+function UserInfoCell({participant, displayName}: 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;
diff --git a/src/components/SelectionList/SearchTableHeader.tsx b/src/components/SelectionList/SearchTableHeader.tsx
index 1b2eb59df782..ab930936ec9f 100644
--- a/src/components/SelectionList/SearchTableHeader.tsx
+++ b/src/components/SelectionList/SearchTableHeader.tsx
@@ -5,26 +5,97 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as SearchUtils from '@libs/SearchUtils';
+import type {SearchColumnType, SortOrder} from '@libs/SearchUtils';
 import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
 import type * as OnyxTypes from '@src/types/onyx';
-import SearchTableHeaderColumn from './SearchTableHeaderColumn';
+import SortableHeaderText from './SortableHeaderText';
+
+type SearchColumnConfig = {
+    columnName: SearchColumnType;
+    translationKey: TranslationPaths;
+    isSortable?: boolean;
+    shouldShow: (data: OnyxTypes.SearchResults['data']) => boolean;
+};
+
+const SearchColumns: SearchColumnConfig[] = [
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.RECEIPT,
+        translationKey: 'common.receipt',
+        shouldShow: () => true,
+        isSortable: false,
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.DATE,
+        translationKey: 'common.date',
+        shouldShow: () => true,
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.MERCHANT,
+        translationKey: 'common.merchant',
+        shouldShow: (data: OnyxTypes.SearchResults['data']) => SearchUtils.getShouldShowMerchant(data),
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.DESCRIPTION,
+        translationKey: 'common.description',
+        shouldShow: (data: OnyxTypes.SearchResults['data']) => !SearchUtils.getShouldShowMerchant(data),
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.FROM,
+        translationKey: 'common.from',
+        shouldShow: () => true,
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.TO,
+        translationKey: 'common.to',
+        shouldShow: () => true,
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.CATEGORY,
+        translationKey: 'common.category',
+        shouldShow: (data: OnyxTypes.SearchResults['data']) => SearchUtils.getShouldShowColumn(data, CONST.SEARCH_TABLE_COLUMNS.CATEGORY),
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.TAG,
+        translationKey: 'common.tag',
+        shouldShow: (data: OnyxTypes.SearchResults['data']) => SearchUtils.getShouldShowColumn(data, CONST.SEARCH_TABLE_COLUMNS.TAG),
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT,
+        translationKey: 'common.tax',
+        shouldShow: (data: OnyxTypes.SearchResults['data']) => SearchUtils.getShouldShowColumn(data, CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT),
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.TOTAL,
+        translationKey: 'common.total',
+        shouldShow: () => true,
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.TYPE,
+        translationKey: 'common.type',
+        shouldShow: () => true,
+    },
+    {
+        columnName: CONST.SEARCH_TABLE_COLUMNS.ACTION,
+        translationKey: 'common.action',
+        shouldShow: () => true,
+    },
+];
 
 type SearchTableHeaderProps = {
     data: OnyxTypes.SearchResults['data'];
+    sortBy?: SearchColumnType;
+    sortOrder?: SortOrder;
+    onSortPress: (column: SearchColumnType, order: SortOrder) => void;
 };
 
-function SearchTableHeader({data}: SearchTableHeaderProps) {
+function SearchTableHeader({data, sortBy, sortOrder, onSortPress}: SearchTableHeaderProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {isSmallScreenWidth, isMediumScreenWidth} = useWindowDimensions();
     const {translate} = useLocalize();
     const displayNarrowVersion = isMediumScreenWidth || isSmallScreenWidth;
 
-    const shouldShowCategoryColumn = SearchUtils.getShouldShowColumn(data, CONST.SEARCH_TABLE_COLUMNS.CATEGORY);
-    const shouldShowTagColumn = SearchUtils.getShouldShowColumn(data, CONST.SEARCH_TABLE_COLUMNS.TAG);
-    const shouldShowTaxColumn = SearchUtils.getShouldShowColumn(data, CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT);
-    const shouldShowMerchant = SearchUtils.getShouldShowMerchant(data);
-
     if (displayNarrowVersion) {
         return;
     }
@@ -32,55 +103,24 @@ function SearchTableHeader({data}: SearchTableHeaderProps) {
     return (
         <View style={[styles.ph5, styles.pb3]}>
             <View style={[styles.flex1, styles.flexRow, styles.gap3, styles.ph4]}>
-                <SearchTableHeaderColumn
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.RECEIPT)]}
-                    textStyle={StyleUtils.getTextOverflowStyle('clip')}
-                    text={translate('common.receipt')}
-                />
-                <SearchTableHeaderColumn
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.DATE)]}
-                    text={translate('common.date')}
-                />
-                <SearchTableHeaderColumn
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.MERCHANT)]}
-                    text={translate(shouldShowMerchant ? 'common.merchant' : 'common.description')}
-                />
-                <SearchTableHeaderColumn
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}
-                    text={translate('common.from')}
-                />
-                <SearchTableHeaderColumn
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TO)]}
-                    text={translate('common.to')}
-                />
-                <SearchTableHeaderColumn
-                    shouldShow={shouldShowCategoryColumn}
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.CATEGORY)]}
-                    text={translate('common.category')}
-                />
-                <SearchTableHeaderColumn
-                    shouldShow={shouldShowTagColumn}
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAG)]}
-                    text={translate('common.tag')}
-                />
-                <SearchTableHeaderColumn
-                    shouldShow={shouldShowTaxColumn}
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT)]}
-                    text={translate('common.tax')}
-                />
-                <SearchTableHeaderColumn
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TOTAL)]}
-                    text={translate('common.total')}
-                />
-                <SearchTableHeaderColumn
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)]}
-                    text={translate('common.type')}
-                />
-                <SearchTableHeaderColumn
-                    containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}
-                    text={translate('common.action')}
-                    textStyle={styles.textAlignCenter}
-                />
+                {SearchColumns.map(({columnName, translationKey, shouldShow, isSortable}) => {
+                    const isActive = sortBy === columnName;
+                    const textStyle = columnName === CONST.SEARCH_TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null;
+
+                    return (
+                        <SortableHeaderText
+                            key={translationKey}
+                            text={translate(translationKey)}
+                            textStyle={textStyle}
+                            sortOrder={sortOrder ?? CONST.SORT_ORDER.ASC}
+                            isActive={isActive}
+                            containerStyle={[StyleUtils.getSearchTableColumnStyles(columnName)]}
+                            shouldShow={shouldShow(data)}
+                            isSortable={isSortable}
+                            onPress={(order: SortOrder) => onSortPress(columnName, order)}
+                        />
+                    );
+                })}
             </View>
         </View>
     );
diff --git a/src/components/SelectionList/SearchTableHeaderColumn.tsx b/src/components/SelectionList/SearchTableHeaderColumn.tsx
index a65c9d3e59cc..e69de29bb2d1 100644
--- a/src/components/SelectionList/SearchTableHeaderColumn.tsx
+++ b/src/components/SelectionList/SearchTableHeaderColumn.tsx
@@ -1,31 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
-import Text from '@components/Text';
-import useThemeStyles from '@hooks/useThemeStyles';
-
-type SearchTableHeaderColumnProps = {
-    shouldShow?: boolean;
-    containerStyle?: StyleProp<ViewStyle>;
-    text: string;
-    textStyle?: StyleProp<TextStyle>;
-};
-
-export default function SearchTableHeaderColumn({containerStyle, text, textStyle, shouldShow = true}: SearchTableHeaderColumnProps) {
-    const styles = useThemeStyles();
-
-    if (!shouldShow) {
-        return null;
-    }
-
-    return (
-        <View style={containerStyle}>
-            <Text
-                numberOfLines={1}
-                style={[styles.textMicroSupporting, textStyle]}
-            >
-                {text}
-            </Text>
-        </View>
-    );
-}
diff --git a/src/components/SelectionList/SortableHeaderText.tsx b/src/components/SelectionList/SortableHeaderText.tsx
new file mode 100644
index 000000000000..d84d438b3749
--- /dev/null
+++ b/src/components/SelectionList/SortableHeaderText.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {SortOrder} from '@libs/SearchUtils';
+import CONST from '@src/CONST';
+
+type SearchTableHeaderColumnProps = {
+    text: string;
+    isActive: boolean;
+    sortOrder: SortOrder;
+    shouldShow?: boolean;
+    isSortable?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    onPress: (order: SortOrder) => void;
+};
+
+export default function SortableHeaderText({text, sortOrder, isActive, textStyle, containerStyle, shouldShow = true, isSortable = true, onPress}: SearchTableHeaderColumnProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    if (!shouldShow) {
+        return null;
+    }
+
+    const icon = sortOrder === CONST.SORT_ORDER.ASC ? Expensicons.ArrowUpLong : Expensicons.ArrowDownLong;
+    const displayIcon = isActive;
+
+    const nextSortOrder = isActive && sortOrder === CONST.SORT_ORDER.DESC ? CONST.SORT_ORDER.ASC : CONST.SORT_ORDER.DESC;
+
+    return (
+        <View style={containerStyle}>
+            <PressableWithFeedback
+                onPress={() => onPress(nextSortOrder)}
+                role={CONST.ROLE.BUTTON}
+                accessibilityLabel={CONST.ROLE.BUTTON}
+                accessible
+                disabled={!isSortable}
+            >
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.textMicroSupporting, textStyle, isActive && styles.searchTableHeaderActive]}
+                    >
+                        {text}
+                    </Text>
+                    {displayIcon && (
+                        <Icon
+                            src={icon}
+                            fill={theme.icon}
+                            height={12}
+                            width={12}
+                        />
+                    )}
+                </View>
+            </PressableWithFeedback>
+        </View>
+    );
+}
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index 823e95a7a572..99aa96d4edbe 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -4,7 +4,7 @@ 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, SearchReport, SearchTransaction} from '@src/types/onyx/SearchResults';
+import type {SearchAccountDetails, 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';
@@ -139,6 +139,21 @@ type TransactionListItemType = ListItem &
         /** The personal details of the user paying the request */
         to: SearchAccountDetails;
 
+        /** final and formatted "from" value used for displaying and sorting */
+        formattedFrom: string;
+
+        /** final and formatted "to" value used for displaying and sorting */
+        formattedTo: string;
+
+        /** final and formatted "total" value used for displaying and sorting */
+        formattedTotal: number;
+
+        /** final and formatted "merchant" value used for displaying and sorting */
+        formattedMerchant: string;
+
+        /** final "date" value used for sorting */
+        date: string;
+
         /** Whether we should show the merchant column */
         shouldShowMerchant: boolean;
 
@@ -433,65 +448,17 @@ type ExtendedSectionListData<TItem extends ListItem, TSection extends SectionWit
 
 type SectionListDataType<TItem extends ListItem> = ExtendedSectionListData<TItem, SectionWithIndexOffset<TItem>>;
 
-type CellProps = {
-    showTooltip: boolean;
-    keyForList: string;
-    isLargeScreenWidth: boolean;
-};
-
-type TransactionCellProps = {
-    transactionItem: TransactionListItemType;
-} & CellProps;
-
-type ReceiptCellProps = {
-    transactionItem: TransactionListItemType;
-    isHovered?: boolean;
-} & CellProps;
-
-type DateCellProps = {
-    date: string;
-} & CellProps;
-
-type MerchantCellProps = {
-    merchant: string;
-    description: string;
-} & TransactionCellProps;
-
-type UserCellProps = {
-    participant: Partial<SearchPolicyDetails & SearchPersonalDetails>;
-} & CellProps;
-
-type CurrencyCellProps = {
-    amount: number;
-    currency: string;
-} & CellProps;
-
-type ActionCellProps = {
-    item: TransactionListItemType;
-    onSelectRow: (item: TransactionListItemType) => void;
-} & CellProps;
-
-type TypeCellProps = {
-    typeIcon: IconAsset;
-} & CellProps;
-
 export type {
-    ActionCellProps,
     BaseListItemProps,
     BaseSelectionListProps,
     ButtonOrCheckBoxRoles,
-    CellProps,
     CommonListItemProps,
-    CurrencyCellProps,
-    DateCellProps,
     FlattenedSectionsReturn,
     InviteMemberListItemProps,
     ItemLayout,
     ListItem,
     ListItemProps,
-    MerchantCellProps,
     RadioListItemProps,
-    ReceiptCellProps,
     ReportListItemProps,
     ReportListItemType,
     Section,
@@ -499,11 +466,8 @@ export type {
     SectionWithIndexOffset,
     SelectionListHandle,
     TableListItemProps,
-    TransactionCellProps,
     TransactionListItemProps,
     TransactionListItemType,
-    TypeCellProps,
-    UserCellProps,
     UserListItemProps,
     ValidListItem,
 };
diff --git a/src/libs/API/parameters/Search.ts b/src/libs/API/parameters/Search.ts
index e9d18b3c4541..0a8345b0b7e0 100644
--- a/src/libs/API/parameters/Search.ts
+++ b/src/libs/API/parameters/Search.ts
@@ -1,7 +1,11 @@
+import type {SortOrder} from '@libs/SearchUtils';
+
 type SearchParams = {
+    hash: number;
     query: string;
     policyIDs?: string;
-    hash: number;
+    sortBy?: string;
+    sortOrder?: SortOrder;
     offset: number;
 };
 
diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
index afca6a978361..22e6c6807ee8 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
@@ -5,6 +5,7 @@ import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapp
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import type {CentralPaneNavigatorParamList} from '@navigation/types';
 import SearchPage from '@pages/Search/SearchPage';
+import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
 
 const Stack = createStackNavigator<CentralPaneNavigatorParamList>();
@@ -46,7 +47,7 @@ function BaseCentralPaneNavigator() {
             />
             <Stack.Screen
                 name={SCREENS.SEARCH.CENTRAL_PANE}
-                // We do it this way to avoid adding the url params to url
+                initialParams={{sortBy: CONST.SEARCH_TABLE_COLUMNS.DATE, sortOrder: CONST.SORT_ORDER.DESC}}
                 component={SearchPage}
             />
 
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 231c2f90d3ae..7f597e4d2210 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -12,6 +12,7 @@ import type {
 } from '@react-navigation/native';
 import type {ValueOf} from 'type-fest';
 import type {IOURequestType} from '@libs/actions/IOU';
+import type {SearchColumnType, SortOrder} from '@libs/SearchUtils';
 import type CONST from '@src/CONST';
 import type {Country, IOUAction, IOUType} from '@src/CONST';
 import type NAVIGATORS from '@src/NAVIGATORS';
@@ -65,6 +66,9 @@ type CentralPaneNavigatorParamList = {
     [SCREENS.SEARCH.CENTRAL_PANE]: {
         query: string;
         policyIDs?: string;
+        offset?: number;
+        sortBy?: SearchColumnType;
+        sortOrder?: SortOrder;
     };
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: undefined;
     [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: undefined;
diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index 86685732737f..c1f4de2e5e35 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -5,12 +5,31 @@ import type {ReportListItemType, TransactionListItemType} from '@components/Sele
 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 type {SearchAccountDetails, SearchDataTypes, SearchTypeToItemMap, SectionsType} from '@src/types/onyx/SearchResults';
 import getTopmostCentralPaneRoute from './Navigation/getTopmostCentralPaneRoute';
 import navigationRef from './Navigation/navigationRef';
 import type {RootStackParamList, State} from './Navigation/types';
+import * as TransactionUtils from './TransactionUtils';
 import * as UserUtils from './UserUtils';
 
+type SortOrder = ValueOf<typeof CONST.SORT_ORDER>;
+type SearchColumnType = ValueOf<typeof CONST.SEARCH_TABLE_COLUMNS>;
+
+const columnNamesToSortingProperty = {
+    [CONST.SEARCH_TABLE_COLUMNS.TO]: 'formattedTo' as const,
+    [CONST.SEARCH_TABLE_COLUMNS.FROM]: 'formattedFrom' as const,
+    [CONST.SEARCH_TABLE_COLUMNS.DATE]: 'date' as const,
+    [CONST.SEARCH_TABLE_COLUMNS.TAG]: 'tag' as const,
+    [CONST.SEARCH_TABLE_COLUMNS.MERCHANT]: 'formattedMerchant' as const,
+    [CONST.SEARCH_TABLE_COLUMNS.TOTAL]: 'formattedTotal' as const,
+    [CONST.SEARCH_TABLE_COLUMNS.CATEGORY]: 'category' as const,
+    [CONST.SEARCH_TABLE_COLUMNS.TYPE]: 'type' as const,
+    [CONST.SEARCH_TABLE_COLUMNS.ACTION]: 'action' as const,
+    [CONST.SEARCH_TABLE_COLUMNS.DESCRIPTION]: null,
+    [CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT]: null,
+    [CONST.SEARCH_TABLE_COLUMNS.RECEIPT]: null,
+};
+
 function isSearchDataType(type: string): type is SearchDataTypes {
     const searchDataTypes: string[] = Object.values(CONST.SEARCH_DATA_TYPES);
     return searchDataTypes.includes(type);
@@ -40,25 +59,38 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data']): Transac
     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);
+
     return Object.entries(data)
         .filter(([key]) => key.startsWith(ONYXKEYS.COLLECTION.TRANSACTION))
-        .map(([, value]) => {
-            const isExpenseReport = value.reportType === CONST.REPORT.TYPE.EXPENSE;
+        .map(([, transactionItem]) => {
+            const isExpenseReport = transactionItem.reportType === CONST.REPORT.TYPE.EXPENSE;
+            const from = data.personalDetailsList?.[transactionItem.accountID];
+            const to = isExpenseReport
+                ? (data[`${ONYXKEYS.COLLECTION.POLICY}${transactionItem.policyID}`] as SearchAccountDetails)
+                : (data.personalDetailsList?.[transactionItem.managerID] as SearchAccountDetails);
+
+            const formattedFrom = from.displayName ?? from.login ?? '';
+            const formattedTo = to?.name ?? to?.displayName ?? to?.login ?? '';
+            const formattedTotal = TransactionUtils.getAmount(transactionItem, isExpenseReport);
+            const date = transactionItem?.modifiedCreated ? transactionItem.modifiedCreated : transactionItem?.created;
+            const merchant = TransactionUtils.getMerchant(transactionItem);
+            const formattedMerchant = merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || merchant === CONST.TRANSACTION.DEFAULT_MERCHANT ? '' : merchant;
+
             return {
-                ...value,
-                from: data.personalDetailsList?.[value.accountID],
-                to: isExpenseReport ? data[`${ONYXKEYS.COLLECTION.POLICY}${value.policyID}`] : data.personalDetailsList?.[value.managerID],
+                ...transactionItem,
+                from,
+                to,
+                formattedFrom,
+                formattedTo,
+                date,
+                formattedTotal,
+                formattedMerchant,
                 shouldShowMerchant,
                 shouldShowCategory,
                 shouldShowTag,
                 shouldShowTax,
-                keyForList: value.transactionID,
+                keyForList: transactionItem.transactionID,
             };
-        })
-        .sort((a, b) => {
-            const createdA = a.modifiedCreated ? a.modifiedCreated : a.created;
-            const createdB = b.modifiedCreated ? b.modifiedCreated : b.created;
-            return createdB > createdA ? 1 : -1;
         });
 }
 
@@ -78,18 +110,36 @@ function getReportSections(data: OnyxTypes.SearchResults['data']): ReportListIte
                 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 transactionItem = {...data[key]};
+            const isExpenseReport = transactionItem.reportType === CONST.REPORT.TYPE.EXPENSE;
+            const reportKey = `${ONYXKEYS.COLLECTION.REPORT}${transactionItem.reportID}`;
+
+            const from = data.personalDetailsList?.[transactionItem.accountID];
+            const to = isExpenseReport
+                ? (data[`${ONYXKEYS.COLLECTION.POLICY}${transactionItem.policyID}`] as SearchAccountDetails)
+                : (data.personalDetailsList?.[transactionItem.managerID] as SearchAccountDetails);
+
+            const formattedFrom = from.displayName ?? from.login ?? '';
+            const formattedTo = to?.name ?? to?.displayName ?? to?.login ?? '';
+            const formattedTotal = TransactionUtils.getAmount(transactionItem, isExpenseReport);
+            const date = transactionItem?.modifiedCreated ? transactionItem.modifiedCreated : transactionItem?.created;
+            const merchant = TransactionUtils.getMerchant(transactionItem);
+            const formattedMerchant = merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || merchant === CONST.TRANSACTION.DEFAULT_MERCHANT ? '' : merchant;
+
             const transaction = {
-                ...value,
-                from: data.personalDetailsList?.[value.accountID],
-                to: isExpenseReport ? data[`${ONYXKEYS.COLLECTION.POLICY}${value.policyID}`] : data.personalDetailsList?.[value.managerID],
+                ...transactionItem,
+                from,
+                to,
+                formattedFrom,
+                formattedTo,
+                formattedTotal,
+                date,
+                formattedMerchant,
                 shouldShowMerchant,
                 shouldShowCategory,
                 shouldShowTag,
                 shouldShowTax,
-                keyForList: value.transactionID,
+                keyForList: transactionItem.transactionID,
             };
             if (reportIDToTransactions[reportKey]?.transactions) {
                 reportIDToTransactions[reportKey].transactions.push(transaction);
@@ -106,10 +156,13 @@ const searchTypeToItemMap: SearchTypeToItemMap = {
     [CONST.SEARCH_DATA_TYPES.TRANSACTION]: {
         listItem: TransactionListItem,
         getSections: getTransactionsSections,
+        getSortedSections: getSortedTransactionData,
     },
     [CONST.SEARCH_DATA_TYPES.REPORT]: {
         listItem: ReportListItem,
         getSections: getReportSections,
+        // sorting for ReportItems not yet implemented
+        getSortedSections: (data) => data,
     },
 };
 
@@ -121,14 +174,55 @@ function getSections<K extends keyof SearchTypeToItemMap>(data: OnyxTypes.Search
     return searchTypeToItemMap[type].getSections(data) as ReturnType<SearchTypeToItemMap[K]['getSections']>;
 }
 
-function getQueryHash(query: string, policyID?: string): number {
-    const textToHash = [query, policyID].filter(Boolean).join('_');
+function getSortedSections<K extends keyof SearchTypeToItemMap>(
+    type: K,
+    data: SectionsType<K>,
+    sortBy?: SearchColumnType,
+    sortOrder?: SortOrder,
+): ReturnType<SearchTypeToItemMap[K]['getSortedSections']> {
+    return searchTypeToItemMap[type].getSortedSections(data, sortBy, sortOrder) as ReturnType<SearchTypeToItemMap[K]['getSortedSections']>;
+}
+
+function getQueryHash(query: string, policyID?: string, sortBy?: string, sortOrder?: string): number {
+    const textToHash = [query, policyID, sortOrder, sortBy].filter(Boolean).join('_');
     return UserUtils.hashText(textToHash, 2 ** 32);
 }
 
+function getSortedTransactionData(data: TransactionListItemType[], sortBy?: SearchColumnType, sortOrder?: SortOrder) {
+    if (!sortBy || !sortOrder) {
+        return data;
+    }
+
+    const sortingProperty = columnNamesToSortingProperty[sortBy];
+
+    if (!sortingProperty) {
+        return data;
+    }
+
+    return data.sort((a, b) => {
+        const aValue = a[sortingProperty];
+        const bValue = b[sortingProperty];
+
+        if (aValue === undefined || bValue === undefined) {
+            return 0;
+        }
+
+        // We are guaranteed that both a and b will be string or number at the same time
+        if (typeof aValue === 'string' && typeof bValue === 'string') {
+            return sortOrder === CONST.SORT_ORDER.ASC ? aValue.toLowerCase().localeCompare(bValue) : bValue.toLowerCase().localeCompare(aValue);
+        }
+
+        const aNum = aValue as number;
+        const bNum = bValue as number;
+
+        return sortOrder === CONST.SORT_ORDER.ASC ? aNum - bNum : bNum - aNum;
+    });
+}
+
 function getSearchParams() {
     const topmostCentralPaneRoute = getTopmostCentralPaneRoute(navigationRef.getRootState() as State<RootStackParamList>);
     return topmostCentralPaneRoute?.params;
 }
 
-export {getListItem, getQueryHash, getSearchType, getSections, getShouldShowColumn, getShouldShowMerchant, getSearchParams};
+export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowColumn, getShouldShowMerchant, getSearchType, getSearchParams};
+export type {SearchColumnType, SortOrder};
diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts
index fae9a427f4fa..43f3e2697e8a 100644
--- a/src/libs/actions/Search.ts
+++ b/src/libs/actions/Search.ts
@@ -1,10 +1,11 @@
 import Onyx from 'react-native-onyx';
 import type {OnyxUpdate} from 'react-native-onyx';
 import * as API from '@libs/API';
+import type {SearchParams} from '@libs/API/parameters';
 import {READ_COMMANDS} from '@libs/API/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 
-function search(hash: number, query: string, offset = 0, policyIDs?: string) {
+function search({hash, query, policyIDs, offset, sortBy, sortOrder}: SearchParams) {
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -29,9 +30,8 @@ function search(hash: number, query: string, offset = 0, policyIDs?: string) {
         },
     ];
 
-    API.read(READ_COMMANDS.SEARCH, {hash, query, offset, policyIDs}, {optimisticData, finallyData});
+    API.read(READ_COMMANDS.SEARCH, {hash, query, offset, policyIDs, sortBy, sortOrder}, {optimisticData, finallyData});
 }
-
 export {
     // eslint-disable-next-line import/prefer-default-export
     search,
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index f08a4057f3aa..63097d76e375 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -21,9 +21,10 @@ type SearchPageProps = StackScreenProps<CentralPaneNavigatorParamList, typeof SC
 function SearchPage({route}: SearchPageProps) {
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const currentQuery = route?.params?.query;
-    const policyIDs = route?.params?.policyIDs;
-    const query = currentQuery as SearchQuery;
+
+    const {query: rawQuery, policyIDs, sortBy, sortOrder} = route?.params ?? {};
+
+    const query = rawQuery as SearchQuery;
     const isValidQuery = Object.values(CONST.TAB_SEARCH).includes(query);
 
     const headerContent: {[key in SearchQuery]: {icon: IconAsset; title: string}} = {
@@ -57,6 +58,8 @@ function SearchPage({route}: SearchPageProps) {
                 <Search
                     policyIDs={policyIDs}
                     query={query}
+                    sortBy={sortBy}
+                    sortOrder={sortOrder}
                 />
             </FullPageNotFoundView>
         </ScreenWrapper>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 5627adb01834..7d4366b5723d 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3509,6 +3509,10 @@ const styles = (theme: ThemeColors) =>
             lineHeight: 16,
         },
 
+        searchTableHeaderActive: {
+            fontWeight: 'bold',
+        },
+
         threeDotsPopoverOffset: (windowWidth: number) =>
             ({
                 ...getPopOverVerticalOffset(60),
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index abd479e6d79d..7fe8d4f000bc 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1577,10 +1577,10 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 columnWidth = {...getWidthStyle(variables.w96), ...styles.alignItemsEnd};
                 break;
             case CONST.SEARCH_TABLE_COLUMNS.TYPE:
-                columnWidth = {...getWidthStyle(variables.w28), ...styles.alignItemsCenter};
+                columnWidth = {...getWidthStyle(variables.w44), ...styles.alignItemsCenter};
                 break;
             case CONST.SEARCH_TABLE_COLUMNS.ACTION:
-                columnWidth = getWidthStyle(variables.w80);
+                columnWidth = {...getWidthStyle(variables.w80), ...styles.alignItemsCenter};
                 break;
             default:
                 columnWidth = styles.flex1;
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index 7103e979f515..73cb5007e398 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/src/types/onyx/SearchResults.ts
@@ -2,6 +2,7 @@ import type {ValueOf} from 'type-fest';
 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 {SearchColumnType, SortOrder} from '@libs/SearchUtils';
 import type CONST from '@src/CONST';
 
 type SearchDataTypes = ValueOf<typeof CONST.SEARCH_DATA_TYPES>;
@@ -22,6 +23,7 @@ type SearchTypeToItemMap = {
     [K in SearchDataTypes]: {
         listItem: ListItemType<K>;
         getSections: (data: SearchResults['data']) => SectionsType<K>;
+        getSortedSections: (data: SectionsType<K>, sortBy?: SearchColumnType, sortOrder?: SortOrder) => SectionsType<K>;
     };
 };
 
@@ -161,4 +163,15 @@ type SearchResults = {
 
 export default SearchResults;
 
-export type {SearchQuery, SearchTransaction, SearchTransactionType, SearchPersonalDetails, SearchPolicyDetails, SearchAccountDetails, SearchDataTypes, SearchTypeToItemMap, SearchReport};
+export type {
+    SearchQuery,
+    SearchTransaction,
+    SearchTransactionType,
+    SearchPersonalDetails,
+    SearchPolicyDetails,
+    SearchAccountDetails,
+    SearchDataTypes,
+    SearchTypeToItemMap,
+    SearchReport,
+    SectionsType,
+};