diff --git a/src/components/Search/SearchContext.tsx b/src/components/Search/SearchContext.tsx
index 3408ffbc480..50b84ae6846 100644
--- a/src/components/Search/SearchContext.tsx
+++ b/src/components/Search/SearchContext.tsx
@@ -1,21 +1,39 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react';
+import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
+import * as SearchUtils from '@libs/SearchUtils';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type {SearchContext, SelectedTransactions} from './types';
 
 const defaultSearchContext = {
     currentSearchHash: -1,
     selectedTransactions: {},
+    selectedReports: [],
     setCurrentSearchHash: () => {},
     setSelectedTransactions: () => {},
     clearSelectedTransactions: () => {},
+    shouldShowStatusBarLoading: false,
+    setShouldShowStatusBarLoading: () => {},
 };
 
 const Context = React.createContext<SearchContext>(defaultSearchContext);
 
+function getReportsFromSelectedTransactions(data: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[], selectedTransactions: SelectedTransactions) {
+    return (data ?? [])
+        .filter(
+            (item) =>
+                !SearchUtils.isTransactionListItemType(item) &&
+                !SearchUtils.isReportActionListItemType(item) &&
+                item.reportID &&
+                item?.transactions?.every((transaction: {keyForList: string | number}) => selectedTransactions[transaction.keyForList]?.isSelected),
+        )
+        .map((item) => item.reportID);
+}
+
 function SearchContextProvider({children}: ChildrenProps) {
-    const [searchContextData, setSearchContextData] = useState<Pick<SearchContext, 'currentSearchHash' | 'selectedTransactions'>>({
+    const [searchContextData, setSearchContextData] = useState<Pick<SearchContext, 'currentSearchHash' | 'selectedTransactions' | 'selectedReports'>>({
         currentSearchHash: defaultSearchContext.currentSearchHash,
         selectedTransactions: defaultSearchContext.selectedTransactions,
+        selectedReports: defaultSearchContext.selectedReports,
     });
 
     const setCurrentSearchHash = useCallback((searchHash: number) => {
@@ -25,10 +43,14 @@ function SearchContextProvider({children}: ChildrenProps) {
         }));
     }, []);
 
-    const setSelectedTransactions = useCallback((selectedTransactions: SelectedTransactions) => {
+    const setSelectedTransactions = useCallback((selectedTransactions: SelectedTransactions, data: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[]) => {
+        // When selecting transactions, we also need to manage the reports to which these transactions belong. This is done to ensure proper exporting to CSV.
+        const selectedReports = getReportsFromSelectedTransactions(data, selectedTransactions);
+
         setSearchContextData((prevState) => ({
             ...prevState,
             selectedTransactions,
+            selectedReports,
         }));
     }, []);
 
@@ -40,19 +62,24 @@ function SearchContextProvider({children}: ChildrenProps) {
             setSearchContextData((prevState) => ({
                 ...prevState,
                 selectedTransactions: {},
+                selectedReports: [],
             }));
         },
         [searchContextData.currentSearchHash],
     );
 
+    const [shouldShowStatusBarLoading, setShouldShowStatusBarLoading] = useState(false);
+
     const searchContext = useMemo<SearchContext>(
         () => ({
             ...searchContextData,
             setCurrentSearchHash,
             setSelectedTransactions,
             clearSelectedTransactions,
+            shouldShowStatusBarLoading,
+            setShouldShowStatusBarLoading,
         }),
-        [searchContextData, setCurrentSearchHash, setSelectedTransactions, clearSelectedTransactions],
+        [searchContextData, setCurrentSearchHash, setSelectedTransactions, clearSelectedTransactions, shouldShowStatusBarLoading],
     );
 
     return <Context.Provider value={searchContext}>{children}</Context.Provider>;
diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
index 73829989409..74b0048b411 100644
--- a/src/components/Search/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader.tsx
@@ -1,17 +1,18 @@
-import React, {useMemo} from 'react';
+import React, {useMemo, useState} from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
+import ConfirmModal from '@components/ConfirmModal';
+import DecisionModal from '@components/DecisionModal';
 import Header from '@components/Header';
 import type HeaderWithBackButtonProps from '@components/HeaderWithBackButton/types';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import {usePersonalDetails} from '@components/OnyxProvider';
-import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useLocalize from '@hooks/useLocalize';
@@ -29,7 +30,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {SearchDataTypes, SearchReport} from '@src/types/onyx/SearchResults';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
 import {useSearchContext} from './SearchContext';
@@ -93,10 +94,6 @@ function HeaderWrapper({icon, title, subtitle, children, subtitleStyles = {}}: H
 type SearchPageHeaderProps = {
     queryJSON: SearchQueryJSON;
     hash: number;
-    onSelectDeleteOption?: (itemsToDelete: string[]) => void;
-    setOfflineModalOpen?: () => void;
-    setDownloadErrorModalOpen?: () => void;
-    data?: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[];
 };
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
@@ -120,37 +117,26 @@ function getHeaderContent(type: SearchDataTypes): HeaderContent {
     }
 }
 
-function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModalOpen, setDownloadErrorModalOpen, data}: SearchPageHeaderProps) {
+function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {activeWorkspaceID} = useActiveWorkspace();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const {selectedTransactions} = useSearchContext();
+    const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
+    const {selectedTransactions, clearSelectedTransactions, selectedReports} = useSearchContext();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
     const personalDetails = usePersonalDetails();
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const taxRates = getAllTaxRates();
     const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
+    const [isDeleteExpensesConfirmModalVisible, setIsDeleteExpensesConfirmModalVisible] = useState(false);
+    const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
+    const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
 
     const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
 
-    const selectedReports: Array<SearchReport['reportID']> = useMemo(
-        () =>
-            (data ?? [])
-                .filter(
-                    (item) =>
-                        !SearchUtils.isTransactionListItemType(item) &&
-                        !SearchUtils.isReportActionListItemType(item) &&
-                        item.reportID &&
-                        item.transactions.every((transaction: {keyForList: string | number}) => selectedTransactions[transaction.keyForList]?.isSelected),
-                )
-                .map((item) => item.reportID),
-        [data, selectedTransactions],
-    );
     const {status, type} = queryJSON;
-
     const isCannedQuery = SearchUtils.isCannedSearchQuery(queryJSON);
 
     const headerSubtitle = isCannedQuery ? translate(getHeaderContent(type).titleText) : SearchUtils.getSearchHeaderTitle(queryJSON, personalDetails, cardList, reports, taxRates);
@@ -158,6 +144,15 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
     const headerIcon = isCannedQuery ? getHeaderContent(type).icon : Illustrations.Filters;
 
     const subtitleStyles = isCannedQuery ? styles.textHeadlineH2 : {};
+    const handleDeleteExpenses = () => {
+        if (selectedTransactionsKeys.length === 0) {
+            return;
+        }
+
+        clearSelectedTransactions();
+        setIsDeleteExpensesConfirmModalVisible(false);
+        SearchActions.deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
+    };
 
     const headerButtonsOptions = useMemo(() => {
         if (selectedTransactionsKeys.length === 0) {
@@ -173,7 +168,7 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
             shouldCloseModalOnSelect: true,
             onSelected: () => {
                 if (isOffline) {
-                    setOfflineModalOpen?.();
+                    setIsOfflineModalVisible(true);
                     return;
                 }
 
@@ -181,7 +176,7 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                 SearchActions.exportSearchItemsToCSV(
                     {query: status, jsonQuery: JSON.stringify(queryJSON), reportIDList, transactionIDList: selectedTransactionsKeys, policyIDs: [activeWorkspaceID ?? '']},
                     () => {
-                        setDownloadErrorModalOpen?.();
+                        setIsDownloadErrorModalVisible(true);
                     },
                 );
             },
@@ -197,7 +192,7 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                 shouldCloseModalOnSelect: true,
                 onSelected: () => {
                     if (isOffline) {
-                        setOfflineModalOpen?.();
+                        setIsOfflineModalVisible(true);
                         return;
                     }
 
@@ -216,7 +211,7 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                 shouldCloseModalOnSelect: true,
                 onSelected: () => {
                     if (isOffline) {
-                        setOfflineModalOpen?.();
+                        setIsOfflineModalVisible(true);
                         return;
                     }
 
@@ -235,11 +230,10 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                 shouldCloseModalOnSelect: true,
                 onSelected: () => {
                     if (isOffline) {
-                        setOfflineModalOpen?.();
+                        setIsOfflineModalVisible(true);
                         return;
                     }
-
-                    onSelectDeleteOption?.(selectedTransactionsKeys);
+                    setIsDeleteExpensesConfirmModalVisible(true);
                 },
             });
         }
@@ -269,14 +263,11 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
         selectedTransactionsKeys,
         selectedTransactions,
         translate,
-        onSelectDeleteOption,
         hash,
         theme.icon,
         styles.colorMuted,
         styles.fontWeightNormal,
         isOffline,
-        setOfflineModalOpen,
-        setDownloadErrorModalOpen,
         activeWorkspaceID,
         selectedReports,
         styles.textWrap,
@@ -285,10 +276,42 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
     if (shouldUseNarrowLayout) {
         if (selectionMode?.isEnabled) {
             return (
-                <SearchSelectedNarrow
-                    options={headerButtonsOptions}
-                    itemsLength={selectedTransactionsKeys.length}
-                />
+                <View>
+                    <SearchSelectedNarrow
+                        options={headerButtonsOptions}
+                        itemsLength={selectedTransactionsKeys.length}
+                    />
+                    <ConfirmModal
+                        isVisible={isDeleteExpensesConfirmModalVisible}
+                        onConfirm={handleDeleteExpenses}
+                        onCancel={() => {
+                            setIsDeleteExpensesConfirmModalVisible(false);
+                        }}
+                        title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
+                        prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
+                        confirmText={translate('common.delete')}
+                        cancelText={translate('common.cancel')}
+                        danger
+                    />
+                    <DecisionModal
+                        title={translate('common.youAppearToBeOffline')}
+                        prompt={translate('common.offlinePrompt')}
+                        isSmallScreenWidth={isSmallScreenWidth}
+                        onSecondOptionSubmit={() => setIsOfflineModalVisible(false)}
+                        secondOptionText={translate('common.buttonConfirm')}
+                        isVisible={isOfflineModalVisible}
+                        onClose={() => setIsOfflineModalVisible(false)}
+                    />
+                    <DecisionModal
+                        title={translate('common.downloadFailedTitle')}
+                        prompt={translate('common.downloadFailedDescription')}
+                        isSmallScreenWidth={isSmallScreenWidth}
+                        onSecondOptionSubmit={() => setIsDownloadErrorModalVisible(false)}
+                        secondOptionText={translate('common.buttonConfirm')}
+                        isVisible={isDownloadErrorModalVisible}
+                        onClose={() => setIsDownloadErrorModalVisible(false)}
+                    />
+                </View>
             );
         }
         return null;
@@ -301,31 +324,63 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
     };
 
     return (
-        <HeaderWrapper
-            title={headerTitle}
-            subtitle={headerSubtitle}
-            icon={headerIcon}
-            subtitleStyles={subtitleStyles}
-        >
-            {headerButtonsOptions.length > 0 ? (
-                <ButtonWithDropdownMenu
-                    onPress={() => null}
-                    shouldAlwaysShowDropdownMenu
-                    pressOnEnter
-                    buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
-                    customText={translate('workspace.common.selected', {selectedNumber: selectedTransactionsKeys.length})}
-                    options={headerButtonsOptions}
-                    isSplitButton={false}
-                    shouldUseStyleUtilityForAnchorPosition
-                />
-            ) : (
-                <Button
-                    text={translate('search.filtersHeader')}
-                    icon={Expensicons.Filters}
-                    onPress={onPress}
-                />
-            )}
-        </HeaderWrapper>
+        <>
+            <HeaderWrapper
+                title={headerTitle}
+                subtitle={headerSubtitle}
+                icon={headerIcon}
+                subtitleStyles={subtitleStyles}
+            >
+                {headerButtonsOptions.length > 0 ? (
+                    <ButtonWithDropdownMenu
+                        onPress={() => null}
+                        shouldAlwaysShowDropdownMenu
+                        pressOnEnter
+                        buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                        customText={translate('workspace.common.selected', {selectedNumber: selectedTransactionsKeys.length})}
+                        options={headerButtonsOptions}
+                        isSplitButton={false}
+                        shouldUseStyleUtilityForAnchorPosition
+                    />
+                ) : (
+                    <Button
+                        text={translate('search.filtersHeader')}
+                        icon={Expensicons.Filters}
+                        onPress={onPress}
+                    />
+                )}
+            </HeaderWrapper>
+            <ConfirmModal
+                isVisible={isDeleteExpensesConfirmModalVisible}
+                onConfirm={handleDeleteExpenses}
+                onCancel={() => {
+                    setIsDeleteExpensesConfirmModalVisible(false);
+                }}
+                title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
+                prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                danger
+            />
+            <DecisionModal
+                title={translate('common.youAppearToBeOffline')}
+                prompt={translate('common.offlinePrompt')}
+                isSmallScreenWidth={isSmallScreenWidth}
+                onSecondOptionSubmit={() => setIsOfflineModalVisible(false)}
+                secondOptionText={translate('common.buttonConfirm')}
+                isVisible={isOfflineModalVisible}
+                onClose={() => setIsOfflineModalVisible(false)}
+            />
+            <DecisionModal
+                title={translate('common.downloadFailedTitle')}
+                prompt={translate('common.downloadFailedDescription')}
+                isSmallScreenWidth={isSmallScreenWidth}
+                onSecondOptionSubmit={() => setIsDownloadErrorModalVisible(false)}
+                secondOptionText={translate('common.buttonConfirm')}
+                isVisible={isDownloadErrorModalVisible}
+                onClose={() => setIsDownloadErrorModalVisible(false)}
+            />
+        </>
     );
 }
 
diff --git a/src/components/Search/SearchStatusBar.tsx b/src/components/Search/SearchStatusBar.tsx
index ea19ef5f4e9..ba531382b5f 100644
--- a/src/components/Search/SearchStatusBar.tsx
+++ b/src/components/Search/SearchStatusBar.tsx
@@ -4,6 +4,7 @@ import type {ScrollView as RNScrollView} from 'react-native';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScrollView from '@components/ScrollView';
+import SearchStatusSkeleton from '@components/Skeletons/SearchStatusSkeleton';
 import useLocalize from '@hooks/useLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -15,12 +16,13 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type IconAsset from '@src/types/utils/IconAsset';
+import {useSearchContext} from './SearchContext';
 import type {ChatSearchStatus, ExpenseSearchStatus, InvoiceSearchStatus, SearchQueryString, SearchStatus, TripSearchStatus} from './types';
 
 type SearchStatusBarProps = {
     type: SearchDataTypes;
     status: SearchStatus;
-    resetOffset: () => void;
+    onStatusChange?: () => void;
 };
 
 const expenseOptions: Array<{key: ExpenseSearchStatus; icon: IconAsset; text: TranslationPaths; query: SearchQueryString}> = [
@@ -151,7 +153,7 @@ function getOptions(type: SearchDataTypes) {
     }
 }
 
-function SearchStatusBar({type, status, resetOffset}: SearchStatusBarProps) {
+function SearchStatusBar({type, status, onStatusChange}: SearchStatusBarProps) {
     const {singleExecution} = useSingleExecution();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -160,17 +162,22 @@ function SearchStatusBar({type, status, resetOffset}: SearchStatusBarProps) {
     const options = getOptions(type);
     const scrollRef = useRef<RNScrollView>(null);
     const isScrolledRef = useRef(false);
+    const {shouldShowStatusBarLoading} = useSearchContext();
+
+    if (shouldShowStatusBarLoading) {
+        return <SearchStatusSkeleton shouldAnimate />;
+    }
 
     return (
         <ScrollView
+            style={[styles.flexRow, styles.mb2, styles.overflowScroll, styles.flexGrow0]}
             ref={scrollRef}
-            style={[styles.flexRow, styles.mb5, styles.overflowScroll, styles.flexGrow0]}
             horizontal
             showsHorizontalScrollIndicator={false}
         >
             {options.map((item, index) => {
                 const onPress = singleExecution(() => {
-                    resetOffset();
+                    onStatusChange?.();
                     Navigation.setParams({q: item.query});
                 });
                 const isActive = status === item.key;
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 4e23c0883f8..b1a53e2d4b5 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -1,17 +1,15 @@
 import {useNavigation} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {View} from 'react-native';
+import type {NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
-import ConfirmModal from '@components/ConfirmModal';
-import DecisionModal from '@components/DecisionModal';
 import SearchTableHeader from '@components/SelectionList/SearchTableHeader';
 import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import SelectionListWithModal from '@components/SelectionListWithModal';
 import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
-import SearchStatusSkeleton from '@components/Skeletons/SearchStatusSkeleton';
-import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
@@ -33,12 +31,12 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SearchResults from '@src/types/onyx/SearchResults';
 import {useSearchContext} from './SearchContext';
-import SearchPageHeader from './SearchPageHeader';
-import SearchStatusBar from './SearchStatusBar';
 import type {SearchColumnType, SearchQueryJSON, SearchStatus, SelectedTransactionInfo, SelectedTransactions, SortOrder} from './types';
 
 type SearchProps = {
     queryJSON: SearchQueryJSON;
+    onSearchListScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    contentContainerStyle?: StyleProp<ViewStyle>;
 };
 
 const transactionItemMobileHeight = 100;
@@ -78,21 +76,17 @@ function prepareTransactionsList(item: TransactionListItemType, selectedTransact
     return {...selectedTransactions, [item.keyForList]: {isSelected: true, canDelete: item.canDelete, canHold: item.canHold, canUnhold: item.canUnhold, action: item.action}};
 }
 
-function Search({queryJSON}: SearchProps) {
+function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchProps) {
     const {isOffline} = useNetwork();
-    const {translate} = useLocalize();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const {isSmallScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
     const navigation = useNavigation<StackNavigationProp<AuthScreensParamList>>();
     const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
-    const {setCurrentSearchHash, setSelectedTransactions, selectedTransactions, clearSelectedTransactions} = useSearchContext();
+    const {setCurrentSearchHash, setSelectedTransactions, selectedTransactions, clearSelectedTransactions, setShouldShowStatusBarLoading} = useSearchContext();
     const {selectionMode} = useMobileSelectionMode();
     const [offset, setOffset] = useState(0);
-    const [offlineModalVisible, setOfflineModalVisible] = useState(false);
 
-    const [selectedTransactionsToDelete, setSelectedTransactionsToDelete] = useState<string[]>([]);
-    const [deleteExpensesConfirmModalVisible, setDeleteExpensesConfirmModalVisible] = useState(false);
-    const [downloadErrorModalVisible, setDownloadErrorModalVisible] = useState(false);
     const {type, status, sortBy, sortOrder, hash} = queryJSON;
 
     const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`);
@@ -126,25 +120,6 @@ function Search({queryJSON}: SearchProps) {
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [isOffline, offset, queryJSON]);
 
-    const handleOnCancelConfirmModal = () => {
-        setDeleteExpensesConfirmModalVisible(false);
-    };
-
-    const handleDeleteExpenses = () => {
-        if (selectedTransactionsToDelete.length === 0) {
-            return;
-        }
-
-        clearSelectedTransactions();
-        setDeleteExpensesConfirmModalVisible(false);
-        SearchActions.deleteMoneyRequestOnSearch(hash, selectedTransactionsToDelete);
-    };
-
-    const handleOnSelectDeleteOption = (itemsToDelete: string[]) => {
-        setSelectedTransactionsToDelete(itemsToDelete);
-        setDeleteExpensesConfirmModalVisible(true);
-    };
-
     const getItemHeight = useCallback(
         (item: TransactionListItemType | ReportListItemType | ReportActionListItemType) => {
             if (SearchUtils.isTransactionListItemType(item) || SearchUtils.isReportActionListItemType(item)) {
@@ -165,8 +140,6 @@ function Search({queryJSON}: SearchProps) {
         [isLargeScreenWidth],
     );
 
-    const resetOffset = () => setOffset(0);
-
     const getItemHeightMemoized = memoize(getItemHeight, {
         transformKey: ([item]) => {
             // List items are displayed differently on "L"arge and "N"arrow screens so the height will differ
@@ -191,6 +164,11 @@ function Search({queryJSON}: SearchProps) {
     const isSearchResultsEmpty = !searchResults?.data || SearchUtils.isSearchResultsEmpty(searchResults);
     const prevIsSearchResultEmpty = usePrevious(isSearchResultsEmpty);
 
+    useEffect(() => {
+        /** We only want to display the skeleton for the status filters the first time we load them for a specific data type */
+        setShouldShowStatusBarLoading(shouldShowLoadingState && searchResults?.search?.type !== type);
+    }, [searchResults?.search?.type, setShouldShowStatusBarLoading, shouldShowLoadingState, type]);
+
     useEffect(() => {
         if (!isSearchResultsEmpty || prevIsSearchResultEmpty) {
             return;
@@ -200,24 +178,10 @@ function Search({queryJSON}: SearchProps) {
 
     if (shouldShowLoadingState) {
         return (
-            <>
-                <SearchPageHeader
-                    queryJSON={queryJSON}
-                    hash={hash}
-                />
-
-                {/* We only want to display the skeleton for the status filters the first time we load them for a specific data type */}
-                {searchResults?.search?.type === type ? (
-                    <SearchStatusBar
-                        type={type}
-                        status={status}
-                        resetOffset={resetOffset}
-                    />
-                ) : (
-                    <SearchStatusSkeleton shouldAnimate />
-                )}
-                <SearchRowSkeleton shouldAnimate />
-            </>
+            <SearchRowSkeleton
+                shouldAnimate
+                containerStyle={shouldUseNarrowLayout && styles.searchListContentContainerStyles}
+            />
         );
     }
 
@@ -235,18 +199,9 @@ function Search({queryJSON}: SearchProps) {
 
     if (shouldShowEmptyState) {
         return (
-            <>
-                <SearchPageHeader
-                    queryJSON={queryJSON}
-                    hash={hash}
-                />
-                <SearchStatusBar
-                    type={type}
-                    status={status}
-                    resetOffset={resetOffset}
-                />
+            <View style={[shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3, styles.flex1]}>
                 <EmptySearchView type={type} />
-            </>
+            </View>
         );
     }
 
@@ -259,7 +214,7 @@ function Search({queryJSON}: SearchProps) {
                 return;
             }
 
-            setSelectedTransactions(prepareTransactionsList(item, selectedTransactions));
+            setSelectedTransactions(prepareTransactionsList(item, selectedTransactions), data);
             return;
         }
 
@@ -270,14 +225,17 @@ function Search({queryJSON}: SearchProps) {
                 delete reducedSelectedTransactions[transaction.keyForList];
             });
 
-            setSelectedTransactions(reducedSelectedTransactions);
+            setSelectedTransactions(reducedSelectedTransactions, data);
             return;
         }
 
-        setSelectedTransactions({
-            ...selectedTransactions,
-            ...Object.fromEntries(item.transactions.map(mapTransactionItemToSelectedEntry)),
-        });
+        setSelectedTransactions(
+            {
+                ...selectedTransactions,
+                ...Object.fromEntries(item.transactions.map(mapTransactionItemToSelectedEntry)),
+            },
+            data,
+        );
     };
 
     const openReport = (item: TransactionListItemType | ReportListItemType | ReportActionListItemType) => {
@@ -321,12 +279,12 @@ function Search({queryJSON}: SearchProps) {
         }
 
         if (areItemsOfReportType) {
-            setSelectedTransactions(Object.fromEntries((data as ReportListItemType[]).flatMap((item) => item.transactions.map(mapTransactionItemToSelectedEntry))));
+            setSelectedTransactions(Object.fromEntries((data as ReportListItemType[]).flatMap((item) => item.transactions.map(mapTransactionItemToSelectedEntry))), data);
 
             return;
         }
 
-        setSelectedTransactions(Object.fromEntries((data as TransactionListItemType[]).map(mapTransactionItemToSelectedEntry)));
+        setSelectedTransactions(Object.fromEntries((data as TransactionListItemType[]).map(mapTransactionItemToSelectedEntry)), data);
     };
 
     const onSortPress = (column: SearchColumnType, order: SortOrder) => {
@@ -338,101 +296,60 @@ function Search({queryJSON}: SearchProps) {
     const shouldShowSorting = sortableSearchStatuses.includes(status);
 
     return (
-        <>
-            <SearchPageHeader
-                queryJSON={queryJSON}
-                hash={hash}
-                onSelectDeleteOption={handleOnSelectDeleteOption}
-                data={data}
-                setOfflineModalOpen={() => setOfflineModalVisible(true)}
-                setDownloadErrorModalOpen={() => setDownloadErrorModalVisible(true)}
-            />
-            <SearchStatusBar
-                type={type}
-                status={status}
-                resetOffset={resetOffset}
-            />
-            <SelectionListWithModal<ReportListItemType | TransactionListItemType | ReportActionListItemType>
-                sections={[{data: sortedSelectedData, isDisabled: false}]}
-                turnOnSelectionModeOnLongPress={type !== CONST.SEARCH.DATA_TYPES.CHAT}
-                onTurnOnSelectionMode={(item) => item && toggleTransaction(item)}
-                onCheckboxPress={toggleTransaction}
-                onSelectAll={toggleAllTransactions}
-                customListHeader={
-                    !isLargeScreenWidth ? null : (
-                        <SearchTableHeader
-                            data={searchResults?.data}
-                            metadata={searchResults?.search}
-                            onSortPress={onSortPress}
-                            sortOrder={sortOrder}
-                            sortBy={sortBy}
-                            shouldShowYear={shouldShowYear}
-                            shouldShowSorting={shouldShowSorting}
-                        />
-                    )
-                }
-                canSelectMultiple={type !== CONST.SEARCH.DATA_TYPES.CHAT && canSelectMultiple}
-                customListHeaderHeight={searchHeaderHeight}
-                // 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.
-                // A larger windowSize helps pre-render more items, reducing the likelihood of blank spaces appearing.
-                // The updateCellsBatchingPeriod sets the delay (in milliseconds) between rendering batches of cells.
-                // A longer delay allows the UI to handle rendering in smaller increments, which can improve performance and smoothness.
-                // For more information, refer to the React Native documentation:
-                // https://reactnative.dev/docs/0.73/optimizing-flatlist-configuration#windowsize
-                // https://reactnative.dev/docs/0.73/optimizing-flatlist-configuration#updatecellsbatchingperiod
-                windowSize={111}
-                updateCellsBatchingPeriod={200}
-                ListItem={ListItem}
-                onSelectRow={openReport}
-                getItemHeight={getItemHeightMemoized}
-                shouldSingleExecuteRowSelect
-                shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
-                listHeaderWrapperStyle={[styles.ph8, styles.pv3, styles.pb5]}
-                containerStyle={[styles.pv0]}
-                showScrollIndicator={false}
-                onEndReachedThreshold={0.75}
-                onEndReached={fetchMoreResults}
-                listFooterContent={
-                    shouldShowLoadingMoreItems ? (
-                        <SearchRowSkeleton
-                            shouldAnimate
-                            fixedNumItems={5}
-                        />
-                    ) : undefined
-                }
-            />
-            <ConfirmModal
-                isVisible={deleteExpensesConfirmModalVisible}
-                onConfirm={handleDeleteExpenses}
-                onCancel={handleOnCancelConfirmModal}
-                onModalHide={() => setSelectedTransactionsToDelete([])}
-                title={translate('iou.deleteExpense', {count: selectedTransactionsToDelete.length})}
-                prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsToDelete.length})}
-                confirmText={translate('common.delete')}
-                cancelText={translate('common.cancel')}
-                danger
-            />
-            <DecisionModal
-                title={translate('common.youAppearToBeOffline')}
-                prompt={translate('common.offlinePrompt')}
-                isSmallScreenWidth={isSmallScreenWidth}
-                onSecondOptionSubmit={() => setOfflineModalVisible(false)}
-                secondOptionText={translate('common.buttonConfirm')}
-                isVisible={offlineModalVisible}
-                onClose={() => setOfflineModalVisible(false)}
-            />
-            <DecisionModal
-                title={translate('common.downloadFailedTitle')}
-                prompt={translate('common.downloadFailedDescription')}
-                isSmallScreenWidth={isSmallScreenWidth}
-                onSecondOptionSubmit={() => setDownloadErrorModalVisible(false)}
-                secondOptionText={translate('common.buttonConfirm')}
-                isVisible={downloadErrorModalVisible}
-                onClose={() => setDownloadErrorModalVisible(false)}
-            />
-        </>
+        <SelectionListWithModal<ReportListItemType | TransactionListItemType | ReportActionListItemType>
+            sections={[{data: sortedSelectedData, isDisabled: false}]}
+            turnOnSelectionModeOnLongPress={type !== CONST.SEARCH.DATA_TYPES.CHAT}
+            onTurnOnSelectionMode={(item) => item && toggleTransaction(item)}
+            onCheckboxPress={toggleTransaction}
+            onSelectAll={toggleAllTransactions}
+            customListHeader={
+                !isLargeScreenWidth ? null : (
+                    <SearchTableHeader
+                        data={searchResults?.data}
+                        metadata={searchResults?.search}
+                        onSortPress={onSortPress}
+                        sortOrder={sortOrder}
+                        sortBy={sortBy}
+                        shouldShowYear={shouldShowYear}
+                        shouldShowSorting={shouldShowSorting}
+                    />
+                )
+            }
+            onScroll={onSearchListScroll}
+            canSelectMultiple={type !== CONST.SEARCH.DATA_TYPES.CHAT && canSelectMultiple}
+            customListHeaderHeight={searchHeaderHeight}
+            // 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.
+            // A larger windowSize helps pre-render more items, reducing the likelihood of blank spaces appearing.
+            // The updateCellsBatchingPeriod sets the delay (in milliseconds) between rendering batches of cells.
+            // A longer delay allows the UI to handle rendering in smaller increments, which can improve performance and smoothness.
+            // For more information, refer to the React Native documentation:
+            // https://reactnative.dev/docs/0.73/optimizing-flatlist-configuration#windowsize
+            // https://reactnative.dev/docs/0.73/optimizing-flatlist-configuration#updatecellsbatchingperiod
+            windowSize={111}
+            updateCellsBatchingPeriod={200}
+            ListItem={ListItem}
+            onSelectRow={openReport}
+            getItemHeight={getItemHeightMemoized}
+            shouldSingleExecuteRowSelect
+            shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
+            listHeaderWrapperStyle={[styles.ph8, styles.pv5]}
+            containerStyle={[styles.pv0]}
+            showScrollIndicator={false}
+            onEndReachedThreshold={0.75}
+            onEndReached={fetchMoreResults}
+            listFooterContent={
+                shouldShowLoadingMoreItems ? (
+                    <SearchRowSkeleton
+                        shouldAnimate
+                        fixedNumItems={5}
+                    />
+                ) : undefined
+            }
+            contentContainerStyle={contentContainerStyle}
+            scrollEventThrottle={1}
+        />
     );
 }
 
diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts
index 195073f8b89..3d35190bf1a 100644
--- a/src/components/Search/types.ts
+++ b/src/components/Search/types.ts
@@ -1,6 +1,7 @@
 import type {ValueOf} from 'react-native-gesture-handler/lib/typescript/typeUtils';
+import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import type CONST from '@src/CONST';
-import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
+import type {SearchDataTypes, SearchReport} from '@src/types/onyx/SearchResults';
 
 /** Model of the selected transaction */
 type SelectedTransactionInfo = {
@@ -34,9 +35,12 @@ type SearchStatus = ExpenseSearchStatus | InvoiceSearchStatus | TripSearchStatus
 type SearchContext = {
     currentSearchHash: number;
     selectedTransactions: SelectedTransactions;
+    selectedReports: Array<SearchReport['reportID']>;
     setCurrentSearchHash: (hash: number) => void;
-    setSelectedTransactions: (selectedTransactions: SelectedTransactions) => void;
+    setSelectedTransactions: (selectedTransactions: SelectedTransactions, data: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[]) => void;
     clearSelectedTransactions: (hash?: number) => void;
+    shouldShowStatusBarLoading: boolean;
+    setShouldShowStatusBarLoading: (shouldShow: boolean) => void;
 };
 
 type ASTNode = {
diff --git a/src/components/SectionList/AnimatedSectionList.tsx b/src/components/SectionList/AnimatedSectionList.tsx
new file mode 100644
index 00000000000..57e532dc80c
--- /dev/null
+++ b/src/components/SectionList/AnimatedSectionList.tsx
@@ -0,0 +1,8 @@
+import {SectionList as RNSectionList} from 'react-native';
+import Animated from 'react-native-reanimated';
+import type {SectionListProps} from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const AnimatedSectionList = Animated.createAnimatedComponent<SectionListProps<any, any>>(RNSectionList);
+
+export default AnimatedSectionList;
diff --git a/src/components/SectionList/index.android.tsx b/src/components/SectionList/index.android.tsx
index 60c769945b8..157e546b3ea 100644
--- a/src/components/SectionList/index.android.tsx
+++ b/src/components/SectionList/index.android.tsx
@@ -1,10 +1,10 @@
 import React, {forwardRef} from 'react';
-import {SectionList as RNSectionList} from 'react-native';
+import AnimatedSectionList from './AnimatedSectionList';
 import type {SectionListProps, SectionListRef} from './types';
 
 function SectionListWithRef<ItemT, SectionT>(props: SectionListProps<ItemT, SectionT>, ref: SectionListRef<ItemT, SectionT>) {
     return (
-        <RNSectionList
+        <AnimatedSectionList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={ref}
diff --git a/src/components/SectionList/index.tsx b/src/components/SectionList/index.tsx
index 4f7b6e31f45..b478d3c2bdf 100644
--- a/src/components/SectionList/index.tsx
+++ b/src/components/SectionList/index.tsx
@@ -1,10 +1,10 @@
 import React, {forwardRef} from 'react';
-import {SectionList as RNSectionList} from 'react-native';
+import AnimatedSectionList from './AnimatedSectionList';
 import type {SectionListProps, SectionListRef} from './types';
 
 function SectionList<ItemT, SectionT>(props: SectionListProps<ItemT, SectionT>, ref: SectionListRef<ItemT, SectionT>) {
     return (
-        <RNSectionList
+        <AnimatedSectionList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={ref}
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index 9ee264bc9bf..d4e57b0670b 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -100,6 +100,8 @@ function BaseSelectionList<TItem extends ListItem>(
         onLongPressRow,
         shouldShowTextInput = !!textInputLabel || !!textInputIconLeft,
         shouldShowListEmptyContent = true,
+        scrollEventThrottle,
+        contentContainerStyle,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -734,6 +736,8 @@ function BaseSelectionList<TItem extends ListItem>(
                                 ListFooterComponent={listFooterContent ?? ShowMoreButtonInstance}
                                 onEndReached={onEndReached}
                                 onEndReachedThreshold={onEndReachedThreshold}
+                                scrollEventThrottle={scrollEventThrottle}
+                                contentContainerStyle={contentContainerStyle}
                             />
                             {children}
                         </>
diff --git a/src/components/SelectionList/index.tsx b/src/components/SelectionList/index.tsx
index a6fd636cc21..b719737a963 100644
--- a/src/components/SelectionList/index.tsx
+++ b/src/components/SelectionList/index.tsx
@@ -5,7 +5,7 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import BaseSelectionList from './BaseSelectionList';
 import type {BaseSelectionListProps, ListItem, SelectionListHandle} from './types';
 
-function SelectionList<TItem extends ListItem>(props: BaseSelectionListProps<TItem>, ref: ForwardedRef<SelectionListHandle>) {
+function SelectionList<TItem extends ListItem>({onScroll, ...props}: BaseSelectionListProps<TItem>, ref: ForwardedRef<SelectionListHandle>) {
     const [isScreenTouched, setIsScreenTouched] = useState(false);
 
     const touchStart = () => setIsScreenTouched(true);
@@ -27,18 +27,21 @@ function SelectionList<TItem extends ListItem>(props: BaseSelectionListProps<TIt
         };
     }, []);
 
+    // In SearchPageBottomTab we use useAnimatedScrollHandler from reanimated(for performance reasons) and it returns object instead of function. In that case we cannot change it to a function call, that's why we have to choose between onScroll and defaultOnScroll.
+    const defaultOnScroll = () => {
+        // Only dismiss the keyboard whenever the user scrolls the screen
+        if (!isScreenTouched) {
+            return;
+        }
+        Keyboard.dismiss();
+    };
+
     return (
         <BaseSelectionList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={ref}
-            onScroll={() => {
-                // Only dismiss the keyboard whenever the user scrolls the screen
-                if (!isScreenTouched) {
-                    return;
-                }
-                Keyboard.dismiss();
-            }}
+            onScroll={onScroll ?? defaultOnScroll}
         />
     );
 }
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index c1085c71e0f..0cc9573c5b8 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -1,5 +1,16 @@
 import type {MutableRefObject, ReactElement, ReactNode} from 'react';
-import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextInput, TextStyle, ViewStyle} from 'react-native';
+import type {
+    GestureResponderEvent,
+    InputModeOptions,
+    LayoutChangeEvent,
+    NativeScrollEvent,
+    NativeSyntheticEvent,
+    SectionListData,
+    StyleProp,
+    TextInput,
+    TextStyle,
+    ViewStyle,
+} from 'react-native';
 import type {BrickRoad} from '@libs/WorkspacesSettingsUtils';
 // eslint-disable-next-line no-restricted-imports
 import type CursorStyles from '@styles/utils/cursor/types';
@@ -407,7 +418,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     initiallyFocusedOptionKey?: string | null;
 
     /** Callback to fire when the list is scrolled */
-    onScroll?: () => void;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 
     /** Callback to fire when the list is scrolled and the user begins dragging */
     onScrollBeginDrag?: () => void;
@@ -539,6 +550,12 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
 
     /** Whether to show the empty list content */
     shouldShowListEmptyContent?: boolean;
+
+    /** Scroll event throttle for preventing onScroll callbacks to be fired too often */
+    scrollEventThrottle?: number;
+
+    /** Additional styles to apply to scrollable content */
+    contentContainerStyle?: StyleProp<ViewStyle>;
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {
diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx
index 55103cad4c6..1169ffb9df9 100644
--- a/src/components/Skeletons/SearchRowSkeleton.tsx
+++ b/src/components/Skeletons/SearchRowSkeleton.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -11,6 +13,7 @@ type SearchRowSkeletonProps = {
     shouldAnimate?: boolean;
     fixedNumItems?: number;
     gradientOpacityEnabled?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
 };
 
 const barHeight = 8;
@@ -29,158 +32,162 @@ const centralPanePadding = 40;
 // 80 is the width of the button on the right side
 const rightButtonWidth = 80;
 
-function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacityEnabled = false}: SearchRowSkeletonProps) {
+function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacityEnabled = false, containerStyle}: SearchRowSkeletonProps) {
     const styles = useThemeStyles();
     const {windowWidth} = useWindowDimensions();
     const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout();
 
     if (shouldUseNarrowLayout) {
         return (
+            <View style={[styles.flex1, containerStyle]}>
+                <ItemListSkeletonView
+                    itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT}
+                    itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mh5]}
+                    gradientOpacityEnabled={gradientOpacityEnabled}
+                    shouldAnimate={shouldAnimate}
+                    fixedNumItems={fixedNumItems}
+                    renderSkeletonItem={() => (
+                        <>
+                            <Circle
+                                cx={24}
+                                cy={26}
+                                r={8}
+                            />
+
+                            <Rect
+                                x={40}
+                                y={24}
+                                width={40}
+                                height={4}
+                            />
+                            <Circle
+                                cx={96}
+                                cy={26}
+                                r={8}
+                            />
+
+                            <Rect
+                                x={112}
+                                y={24}
+                                width={40}
+                                height={4}
+                            />
+                            <Rect
+                                x={windowWidth - 130}
+                                y={12}
+                                width={80}
+                                height={28}
+                                rx={14}
+                                ry={14}
+                            />
+
+                            <Rect
+                                x={16}
+                                y={56}
+                                width={36}
+                                height={40}
+                                rx={4}
+                                ry={4}
+                            />
+                            <Rect
+                                x={64}
+                                y={65}
+                                width={124}
+                                height={8}
+                            />
+                            <Rect
+                                x={64}
+                                y={79}
+                                width={60}
+                                height={8}
+                            />
+                            <Rect
+                                x={windowWidth - 130}
+                                y={65}
+                                width={80}
+                                height={8}
+                            />
+                            <Rect
+                                x={windowWidth - 110}
+                                y={79}
+                                width={60}
+                                height={8}
+                            />
+                        </>
+                    )}
+                />
+            </View>
+        );
+    }
+
+    return (
+        <View style={[styles.flex1, containerStyle]}>
             <ItemListSkeletonView
-                itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT}
-                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mh5]}
-                gradientOpacityEnabled={gradientOpacityEnabled}
                 shouldAnimate={shouldAnimate}
                 fixedNumItems={fixedNumItems}
+                gradientOpacityEnabled={gradientOpacityEnabled}
+                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mh5]}
                 renderSkeletonItem={() => (
                     <>
-                        <Circle
-                            cx={24}
-                            cy={26}
-                            r={8}
-                        />
-
-                        <Rect
-                            x={40}
-                            y={24}
-                            width={40}
-                            height={4}
-                        />
-                        <Circle
-                            cx={96}
-                            cy={26}
-                            r={8}
-                        />
-
-                        <Rect
-                            x={112}
-                            y={24}
-                            width={40}
-                            height={4}
-                        />
                         <Rect
-                            x={windowWidth - 130}
+                            x={12}
                             y={12}
-                            width={80}
-                            height={28}
-                            rx={14}
-                            ry={14}
-                        />
-
-                        <Rect
-                            x={16}
-                            y={56}
+                            rx={5}
+                            ry={5}
                             width={36}
                             height={40}
-                            rx={4}
-                            ry={4}
                         />
                         <Rect
-                            x={64}
-                            y={65}
-                            width={124}
-                            height={8}
+                            x={60}
+                            y={28}
+                            width={30}
+                            height={barHeight}
                         />
                         <Rect
-                            x={64}
-                            y={79}
-                            width={60}
-                            height={8}
+                            x={102}
+                            y={28}
+                            width={longBarWidth}
+                            height={barHeight}
                         />
+                        {isLargeScreenWidth && (
+                            <>
+                                <Rect
+                                    x={234}
+                                    y={28}
+                                    width={longBarWidth}
+                                    height={barHeight}
+                                />
+
+                                <Rect
+                                    x={366}
+                                    y={28}
+                                    width={60}
+                                    height={barHeight}
+                                />
+                            </>
+                        )}
+
                         <Rect
-                            x={windowWidth - 130}
-                            y={65}
+                            // We have to calculate this value to make sure the element is aligned to the button on the right side.
+                            x={windowWidth - leftPaneWidth - rightButtonWidth - gapWidth - centralPanePadding - gapWidth - rightSideElementWidth}
+                            y={28}
                             width={80}
-                            height={8}
+                            height={barHeight}
                         />
+
                         <Rect
-                            x={windowWidth - 110}
-                            y={79}
-                            width={60}
-                            height={8}
+                            // We have to calculate this value to make sure the element is aligned to the right border.
+                            x={windowWidth - leftPaneWidth - rightSideElementWidth - gapWidth - centralPanePadding}
+                            y={18}
+                            rx={15}
+                            ry={15}
+                            width={80}
+                            height={28}
                         />
                     </>
                 )}
             />
-        );
-    }
-
-    return (
-        <ItemListSkeletonView
-            shouldAnimate={shouldAnimate}
-            fixedNumItems={fixedNumItems}
-            gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mh5]}
-            renderSkeletonItem={() => (
-                <>
-                    <Rect
-                        x={12}
-                        y={12}
-                        rx={5}
-                        ry={5}
-                        width={36}
-                        height={40}
-                    />
-                    <Rect
-                        x={60}
-                        y={28}
-                        width={30}
-                        height={barHeight}
-                    />
-                    <Rect
-                        x={102}
-                        y={28}
-                        width={longBarWidth}
-                        height={barHeight}
-                    />
-                    {isLargeScreenWidth && (
-                        <>
-                            <Rect
-                                x={234}
-                                y={28}
-                                width={longBarWidth}
-                                height={barHeight}
-                            />
-
-                            <Rect
-                                x={366}
-                                y={28}
-                                width={60}
-                                height={barHeight}
-                            />
-                        </>
-                    )}
-
-                    <Rect
-                        // We have to calculate this value to make sure the element is aligned to the button on the right side.
-                        x={windowWidth - leftPaneWidth - rightButtonWidth - gapWidth - centralPanePadding - gapWidth - rightSideElementWidth}
-                        y={28}
-                        width={80}
-                        height={barHeight}
-                    />
-
-                    <Rect
-                        // We have to calculate this value to make sure the element is aligned to the right border.
-                        x={windowWidth - leftPaneWidth - rightSideElementWidth - gapWidth - centralPanePadding}
-                        y={18}
-                        rx={15}
-                        ry={15}
-                        width={80}
-                        height={28}
-                    />
-                </>
-            )}
-        />
+        </View>
     );
 }
 
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index c3607d4a594..47c29b99b02 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -3,6 +3,8 @@ import React, {useMemo} from 'react';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Search from '@components/Search';
+import SearchPageHeader from '@components/Search/SearchPageHeader';
+import SearchStatusBar from '@components/Search/SearchStatusBar';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -39,7 +41,19 @@ function SearchPage({route}: SearchPageProps) {
                 onBackButtonPress={handleOnBackButtonPress}
                 shouldShowLink={false}
             >
-                {queryJSON && <Search queryJSON={queryJSON} />}
+                {queryJSON && (
+                    <>
+                        <SearchPageHeader
+                            queryJSON={queryJSON}
+                            hash={queryJSON.hash}
+                        />
+                        <SearchStatusBar
+                            type={queryJSON.type}
+                            status={queryJSON.status}
+                        />
+                        <Search queryJSON={queryJSON} />
+                    </>
+                )}
             </FullPageNotFoundView>
         </ScreenWrapper>
     );
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index 9226093154a..57611d20c03 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -1,31 +1,64 @@
 import React from 'react';
+import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import Animated, {clamp, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Search from '@components/Search';
-import {useSearchContext} from '@components/Search/SearchContext';
+import SearchStatusBar from '@components/Search/SearchStatusBar';
 import useActiveCentralPaneRoute from '@hooks/useActiveCentralPaneRoute';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import * as SearchUtils from '@libs/SearchUtils';
 import TopBar from '@navigation/AppNavigator/createCustomBottomTabNavigator/TopBar';
+import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
+import SearchSelectionModeHeader from './SearchSelectionModeHeader';
 import SearchTypeMenu from './SearchTypeMenu';
 
+const TOO_CLOSE_TO_TOP_DISTANCE = 10;
+const TOO_CLOSE_TO_BOTTOM_DISTANCE = 10;
+const ANIMATION_DURATION_IN_MS = 300;
+
 function SearchPageBottomTab() {
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {windowHeight} = useWindowDimensions();
     const activeCentralPaneRoute = useActiveCentralPaneRoute();
     const styles = useThemeStyles();
-    const {clearSelectedTransactions} = useSearchContext();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
+
+    const scrollOffset = useSharedValue(0);
+    const topBarOffset = useSharedValue<number>(variables.searchHeaderHeight);
+    const topBarAnimatedStyle = useAnimatedStyle(() => ({
+        top: topBarOffset.value,
+    }));
+
+    const scrollHandler = useAnimatedScrollHandler({
+        onScroll: (event) => {
+            const {contentOffset, layoutMeasurement, contentSize} = event;
+            if (windowHeight > contentSize.height) {
+                return;
+            }
+            const currentOffset = contentOffset.y;
+            const isScrollingDown = currentOffset > scrollOffset.value;
+            const distanceScrolled = currentOffset - scrollOffset.value;
+            if (isScrollingDown && contentOffset.y > TOO_CLOSE_TO_TOP_DISTANCE) {
+                // eslint-disable-next-line react-compiler/react-compiler
+                topBarOffset.value = clamp(topBarOffset.value - distanceScrolled, variables.minimalTopBarOffset, variables.searchHeaderHeight);
+            } else if (!isScrollingDown && distanceScrolled < 0 && contentOffset.y + layoutMeasurement.height < contentSize.height - TOO_CLOSE_TO_BOTTOM_DISTANCE) {
+                topBarOffset.value = withTiming(variables.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS});
+            }
+            scrollOffset.value = currentOffset;
+        },
+    });
+
     const searchParams = activeCentralPaneRoute?.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE];
     const parsedQuery = SearchUtils.buildSearchQueryJSON(searchParams?.q);
     const policyIDFromSearchQuery = parsedQuery && SearchUtils.getPolicyIDFromSearchQuery(parsedQuery);
@@ -35,38 +68,61 @@ function SearchPageBottomTab() {
 
     const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery()}));
 
+    if (!queryJSON) {
+        return (
+            <ScreenWrapper
+                testID={SearchPageBottomTab.displayName}
+                style={styles.pv0}
+                offlineIndicatorStyle={styles.mtAuto}
+            >
+                <FullPageNotFoundView
+                    shouldShow={!queryJSON}
+                    onBackButtonPress={handleOnBackButtonPress}
+                    shouldShowLink={false}
+                />
+            </ScreenWrapper>
+        );
+    }
+
     return (
         <ScreenWrapper
             testID={SearchPageBottomTab.displayName}
             style={styles.pv0}
             offlineIndicatorStyle={styles.mtAuto}
         >
-            <FullPageNotFoundView
-                shouldShow={!queryJSON}
-                onBackButtonPress={handleOnBackButtonPress}
-                shouldShowLink={false}
-            >
-                {!selectionMode?.isEnabled && queryJSON ? (
-                    <>
+            {!selectionMode?.isEnabled ? (
+                <>
+                    <View style={[styles.zIndex10, styles.appBG]}>
                         <TopBar
                             activeWorkspaceID={policyID}
                             breadcrumbLabel={translate('common.search')}
                             shouldDisplaySearch={false}
                             isCustomSearchQuery={shouldUseNarrowLayout && !SearchUtils.isCannedSearchQuery(queryJSON)}
                         />
+                    </View>
+                    <Animated.View style={[styles.searchTopBarStyle, topBarAnimatedStyle]}>
                         <SearchTypeMenu queryJSON={queryJSON} />
-                    </>
-                ) : (
-                    <HeaderWithBackButton
-                        title={translate('common.selectMultiple')}
-                        onBackButtonPress={() => {
-                            clearSelectedTransactions();
-                            turnOffMobileSelectionMode();
-                        }}
-                    />
-                )}
-                {shouldUseNarrowLayout && queryJSON && <Search queryJSON={queryJSON} />}
-            </FullPageNotFoundView>
+                        {shouldUseNarrowLayout && (
+                            <SearchStatusBar
+                                type={queryJSON.type}
+                                status={queryJSON.status}
+                                onStatusChange={() => {
+                                    topBarOffset.value = withTiming(variables.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS});
+                                }}
+                            />
+                        )}
+                    </Animated.View>
+                </>
+            ) : (
+                <SearchSelectionModeHeader queryJSON={queryJSON} />
+            )}
+            {shouldUseNarrowLayout && (
+                <Search
+                    queryJSON={queryJSON}
+                    onSearchListScroll={scrollHandler}
+                    contentContainerStyle={!selectionMode?.isEnabled ? [styles.searchListContentContainerStyles] : undefined}
+                />
+            )}
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/Search/SearchSelectionModeHeader.tsx b/src/pages/Search/SearchSelectionModeHeader.tsx
new file mode 100644
index 00000000000..cf2d22a59ff
--- /dev/null
+++ b/src/pages/Search/SearchSelectionModeHeader.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {useSearchContext} from '@components/Search/SearchContext';
+import SearchPageHeader from '@components/Search/SearchPageHeader';
+import type {SearchQueryJSON} from '@components/Search/types';
+import useLocalize from '@hooks/useLocalize';
+import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
+
+type SearchSelectedModeHeaderProps = {
+    queryJSON: SearchQueryJSON | undefined;
+};
+
+function SearchSelectionModeHeader({queryJSON}: SearchSelectedModeHeaderProps) {
+    const {translate} = useLocalize();
+    const {clearSelectedTransactions} = useSearchContext();
+
+    return (
+        <>
+            <HeaderWithBackButton
+                title={translate('common.selectMultiple')}
+                onBackButtonPress={() => {
+                    clearSelectedTransactions();
+                    turnOffMobileSelectionMode();
+                }}
+            />
+
+            {queryJSON && (
+                <SearchPageHeader
+                    queryJSON={queryJSON}
+                    hash={queryJSON.hash}
+                />
+            )}
+        </>
+    );
+}
+
+export default SearchSelectionModeHeader;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ad6c0552aa2..65a9109c684 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3610,6 +3610,22 @@ const styles = (theme: ThemeColors) =>
             fontWeight: FontUtils.fontWeight.bold,
         },
 
+        zIndex10: {
+            zIndex: 10,
+        },
+
+        searchListContentContainerStyles: {
+            marginTop: variables.searchListContentMarginTop,
+        },
+
+        searchTopBarStyle: {
+            left: 0,
+            right: 0,
+            position: 'absolute',
+            zIndex: 9,
+            backgroundColor: theme.appBG,
+        },
+
         threeDotsPopoverOffset: (windowWidth: number) =>
             ({
                 ...getPopOverVerticalOffset(60),
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 300574514e5..db2febc11c5 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -254,6 +254,10 @@ export default {
     composerTooltipShiftVertical: -10,
     gbrTooltipShiftHorizontal: -20,
 
+    minimalTopBarOffset: -26,
+    searchHeaderHeight: 80,
+    searchListContentMarginTop: 116,
+
     h20: 20,
     h28: 28,
     h36: 36,