Expensify · shawnborton · May 14, 2026 · May 27, 2026
@@ -85,7 +85,7 @@ function MoneyRequestReportGroupHeader({
         ? [
               {minHeight: variables.tableGroupRowHeight},
               styles.justifyContentCenter,
-              styles.highlightBG,
+              {backgroundColor: theme.cardBG},
               styles.pv2,
               styles.ph3,
               styles.borderBottom,

@@ -127,7 +127,7 @@ function MoneyRequestReportTransactionItem({
         borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0,
         shouldHighlight: shouldBeHighlighted,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: theme.highlightBG,
+        backgroundColor: theme.cardBG,
         shouldApplyOtherStyles: !shouldUseNarrowLayout,
     });
 

@@ -648,11 +648,11 @@ function MoneyRequestReportTransactionList({
           })
         : resolvedTransactions.map((transaction) => renderTransactionItem(transaction));
 
-    const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.tableTopRadius, styles.tableBottomRadius, styles.overflowHidden] : undefined;
+    const narrowListWrapper = shouldUseNarrowLayout ? [{backgroundColor: theme.cardBG}, styles.tableTopRadius, styles.tableBottomRadius, styles.overflowHidden] : undefined;
 
     const transactionListContent = (
         <View
-            style={[listHorizontalPadding, shouldUseNarrowLayout ? styles.pb2 : styles.pb4]}
+            style={[shouldUseNarrowLayout && listHorizontalPadding, shouldUseNarrowLayout ? styles.pb2 : styles.pb4]}
             onLayout={onLayout}
         >
             {narrowListWrapper ? <View style={narrowListWrapper}>{transactionItems}</View> : transactionItems}
@@ -678,7 +678,7 @@ function MoneyRequestReportTransactionList({
                     !isDesktopTableLayout && styles.pl5,
                     isDesktopTableLayout ? styles.pr11 : styles.pr16,
                     styles.alignItemsCenter,
-                    isDesktopTableLayout && [styles.highlightBG, styles.tableTopRadius, styles.mh5],
+                    isDesktopTableLayout && [{backgroundColor: theme.cardBG}, styles.tableTopRadius],
                     StyleUtils.getSelectedBorderBottomStyle(selectedTransactionIDs.length > 0),
                 ]}
             >
@@ -775,7 +775,12 @@ function MoneyRequestReportTransactionList({
                     />
                 )}
             </View>
-            {!shouldUseNarrowLayout && !shouldScrollHorizontally && tableHeaderContent}
+            {isDesktopTableLayout && !shouldScrollHorizontally && (
+                <View style={styles.searchTableWrapper}>
+                    {tableHeaderContent}
+                    {transactionListContent}
+                </View>
+            )}
             {shouldScrollHorizontally ? (
                 <ScrollView
                     ref={horizontalScrollViewRef}
@@ -787,13 +792,13 @@ function MoneyRequestReportTransactionList({
                     scrollEventThrottle={CONST.TIMING.MIN_SMOOTH_SCROLL_EVENT_THROTTLE}
                     onLayout={onLayout}
                 >
-                    <View style={[styles.flex1]}>
+                    <View style={[styles.flexShrink1, styles.searchTableWrapper]}>
                         {tableHeaderContent}
                         {transactionListContent}
                     </View>
                 </ScrollView>
             ) : (
-                transactionListContent
+                !isDesktopTableLayout && transactionListContent
             )}
             <View
                 style={[

@@ -106,7 +106,7 @@ function MoneyRequestReportPreviewContent({
     currentWidth,
     reportPreviewStyles,
     shouldDisplayContextMenu = true,
-    shouldShowBorder = false,
+    shouldShowBorder = true,
     onPress,
     forwardedFSClass,
     originalReportID,

@@ -136,6 +136,7 @@ function TripRoomPreview({
     originalReportID,
 }: TripRoomPreviewProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
     const {convertToDisplayString} = useCurrencyListActions();
 
@@ -209,7 +210,7 @@ function TripRoomPreview({
                         {reservationsData.length > 0 && (
                             <FlatList
                                 data={reservationsData}
-                                style={[styles.border, styles.borderRadiusComponentLarge, styles.p4, styles.flexGrow0]}
+                                style={[styles.borderRadiusComponentLarge, styles.p4, styles.flexGrow0, {backgroundColor: theme.cardBG}]}
                                 contentContainerStyle={styles.gap4}
                                 renderItem={renderItem}
                             />

@@ -70,7 +70,7 @@ function CardListItemHeader<TItem extends ListItem>({
     const {translate, formatPhoneNumber} = useLocalize();
     const formattedDisplayName = formatPhoneNumber(getDisplayNameOrDefault(cardItem));
     const backgroundColor =
-        StyleUtils.getItemBackgroundColorStyle(!!cardItem.isSelected, !!isFocused, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ?? theme.highlightBG;
+        StyleUtils.getItemBackgroundColorStyle(!!cardItem.isSelected, !!isFocused, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ?? theme.cardBG;
 
     const columnComponents = {
         [CONST.SEARCH.TABLE_COLUMNS.AVATAR]: (

@@ -37,7 +37,7 @@ function ChatListItem<TItem extends ListItem>({
         borderRadius: variables.componentBorderRadius,
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: theme.highlightBG,
+        backgroundColor: theme.cardBG,
     });
     const pressableStyle = [
         styles.selectionListPressableItemWrapper,

@@ -235,7 +235,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
         borderRadius: 0,
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: item.isSelected ? theme.activeComponentBG : theme.highlightBG,
+        backgroundColor: item.isSelected ? theme.activeComponentBG : theme.cardBG,
         shouldApplyOtherStyles: !isLargeScreenWidth,
     });
 
@@ -313,7 +313,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
             shouldSyncFocus={shouldSyncFocus}
             hoverStyle={item.isSelected && styles.activeComponentBG}
             pressableWrapperStyle={[
-                styles.mh5,
+                !isLargeScreenWidth && styles.mh5,
                 animatedHighlightStyle,
                 isPendingDelete && styles.cursorDisabled,
                 isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden],

@@ -22,7 +22,7 @@ function ExpenseReportListItemAvatar({item, showTooltip, isHovered = false, isFo
 
     const finalAvatarBorderColor =
         StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, isFocused || isHovered, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
-        theme.highlightBG;
+        theme.cardBG;
 
     return (
         <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR), styles.alignItemsStretch]}>

@@ -226,7 +226,7 @@ function ReportListItemHeader<TItem extends ListItem>({
     const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED);
     const avatarBorderColor =
         StyleUtils.getItemBackgroundColorStyle(!!reportItem.isSelected, !!isFocused || !!isHovered, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
-        theme.highlightBG;
+        theme.cardBG;
 
     const handleOnButtonPress = () => {
         handleActionButtonPress({

@@ -58,7 +58,7 @@ function TaskListItem<TItem extends ListItem>({
         borderRadius: StyleUtils.getSearchTableHighlightBorderRadius(isLargeScreenWidth),
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: theme.highlightBG,
+        backgroundColor: theme.cardBG,
         shouldApplyOtherStyles: !isLargeScreenWidth,
     });
 
@@ -81,7 +81,7 @@ function TaskListItem<TItem extends ListItem>({
             onLongPressRow={onLongPressRow}
             shouldSyncFocus={shouldSyncFocus}
             hoverStyle={item.isSelected && styles.activeComponentBG}
-            pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}
+            pressableWrapperStyle={[!isLargeScreenWidth && styles.mh5, animatedHighlightStyle, isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}
             forwardedFSClass={fsClass}
         >
             <TaskListItemRow

@@ -204,7 +204,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: isItemSelected ? theme.activeComponentBG : theme.highlightBG,
+        backgroundColor: isItemSelected ? theme.activeComponentBG : theme.cardBG,
         shouldApplyOtherStyles: false,
     });
 
@@ -538,7 +538,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
                 ]}
                 onFocus={onFocus}
                 wrapperStyle={[
-                    styles.mh5,
+                    !isLargeScreenWidth && styles.mh5,
                     animatedHighlightStyle,
                     styles.userSelectNone,
                     isLargeScreenWidth

@@ -57,7 +57,7 @@ function TransactionListItemNarrow<TItem extends ListItem>({
         borderRadius: 0,
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: item.isSelected ? theme.activeComponentBG : theme.highlightBG,
+        backgroundColor: item.isSelected ? theme.activeComponentBG : theme.cardBG,
         shouldApplyOtherStyles: true,
     });
 

@@ -66,7 +66,7 @@ function TransactionListItemWide<TItem extends ListItem>({
         borderRadius: 0,
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: item.isSelected ? theme.activeComponentBG : theme.highlightBG,
+        backgroundColor: item.isSelected ? theme.activeComponentBG : theme.cardBG,
         shouldApplyOtherStyles: false,
     });
 
@@ -91,7 +91,7 @@ function TransactionListItemWide<TItem extends ListItem>({
                     isDeletedTransaction && styles.cursorDefault,
                 ]}
                 onFocus={onFocus}
-                wrapperStyle={[styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone, isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}
+                wrapperStyle={[styles.flex1, animatedHighlightStyle, styles.userSelectNone, isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}
             >
                 {({hovered}) => (
                     <TransactionItemRow

@@ -484,14 +484,15 @@ function SearchList({
     const tableHeaderVisible = canSelectMultiple || !!SearchTableHeader;
     const selectAllButtonVisible = canSelectMultiple && !SearchTableHeader;
     const isSelectAllChecked = selectedItemsLength > 0 && selectedItemsLength === totalItems && hasLoadedAllTransactions;
+    const isTableLayout = isLargeScreenWidth && !!SearchTableHeader;
 
-    const content = (
-        <View style={[styles.flex1, !isKeyboardShown && safeAreaPaddingBottomStyle, containerStyle]}>
+    const headerAndList = (
+        <>
             {tableHeaderVisible && (
                 <View
                     style={[
                         styles.searchListHeaderContainerStyle,
-                        isLargeScreenWidth ? [styles.listTableHeaderCompact, styles.searchListHeaderTableStyle, styles.mh5] : styles.listTableHeader,
+                        isLargeScreenWidth ? [styles.listTableHeaderCompact, styles.searchListHeaderTableStyle, !isTableLayout && styles.mh5] : styles.listTableHeader,
                     ]}
                 >
                     {canSelectMultiple && (
@@ -547,6 +548,12 @@ function SearchList({
                 isAttendeesEnabledForMovingPolicy={isAttendeesEnabledForMovingPolicy}
                 nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
             />
+        </>
+    );
+
+    const content = (
+        <View style={[styles.flex1, !isKeyboardShown && safeAreaPaddingBottomStyle, containerStyle]}>
+            {isTableLayout ? <View style={[styles.searchTableWrapper, styles.flexShrink1]}>{headerAndList}</View> : headerAndList}
             <Modal
                 isVisible={isModalVisible}
                 type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}

@@ -1804,7 +1804,7 @@ function Search({
                             </View>
                         )
                     }
-                    contentContainerStyle={[styles.pb3, contentContainerStyle]}
+                    contentContainerStyle={[!shouldShowTableHeader && styles.pb3, contentContainerStyle]}
                     containerStyle={[styles.pv0, !tableHeaderVisible && !isSmallScreenWidth && styles.pt3]}
                     onScroll={onSearchListScroll}
                     onEndReachedThreshold={0.75}

@@ -67,8 +67,8 @@ function TableHeader<T, ColumnKey extends string = string>({style, shouldHideHea
             style={[
                 styles.pv2,
                 styles.ph3,
-                styles.mh5,
-                styles.highlightBG,
+                shouldUseNarrowTableLayout && styles.mh5,
+                {backgroundColor: theme.cardBG},
                 styles.borderBottom,
                 styles.tableTopRadius,
                 // Flexbox fallback for browsers / native devices wider than 1024px which don't support grid

@@ -62,9 +62,9 @@ export default function TableRow({
     const isInteractive = interactive && !isLoading;
 
     const tableRowPressableStyles = [
-        styles.mh5,
+        shouldUseNarrowTableLayout && styles.mh5,
         styles.flexRow,
-        styles.highlightBG,
+        {backgroundColor: theme.cardBG},
         styles.overflowHidden,
         styles.alignItemsCenter,
         isInteractive && styles.userSelectNone,

@@ -188,9 +188,9 @@ function WorkspaceCompanyCardsTable({
     const keyExtractor = (item: WorkspaceCompanyCardTableItemData, index: number) => `${item.cardName}_${index}`;
 
     const tableBodyContentContainerStyle = useBottomSafeSafeAreaPaddingStyle({
-        addBottomSafeAreaPadding: true,
-        addOfflineIndicatorBottomSafeAreaPadding: true,
-        style: styles.pb4,
+        addBottomSafeAreaPadding: shouldUseNarrowTableLayout,
+        addOfflineIndicatorBottomSafeAreaPadding: shouldUseNarrowTableLayout,
+        style: shouldUseNarrowTableLayout ? styles.pb4 : undefined,
     });
 
     const compareItems: CompareItemsCallback<WorkspaceCompanyCardTableItemData, CompanyCardsTableColumnKey> = (a, b, activeSorting) => {
@@ -379,7 +379,7 @@ function WorkspaceCompanyCardsTable({
             ListHeaderComponent={shouldUseNarrowTableLayout ? ListHeader : undefined}
             ListEmptyComponent={isLoadingCards ? LoadingComponent : <WorkspaceCompanyCardsFeedAddedEmptyPage shouldShowGBDisclaimer={shouldShowGBDisclaimer} />}
         >
-            {!shouldUseNarrowTableLayout && ListHeader}
+            {!shouldUseNarrowTableLayout && headerButtonsComponent}
 
             {(isLoading || isFeedPending || isNoFeed) && !feedErrorKey && (
                 <ScrollView>
@@ -424,7 +424,14 @@ function WorkspaceCompanyCardsTable({
                 </ScrollView>
             )}
 
-            {showCards && <Table.Body contentContainerStyle={tableBodyContentContainerStyle} />}
+            {!shouldUseNarrowTableLayout && showCards && (
+                <View style={[styles.searchTableWrapper, styles.flexShrink1]}>
+                    {!isLoadingFeed && !isFeedPending && <Table.Header />}
+                    <Table.Body contentContainerStyle={tableBodyContentContainerStyle} />
+                </View>
+            )}
+
+            {shouldUseNarrowTableLayout && showCards && <Table.Body contentContainerStyle={tableBodyContentContainerStyle} />}
         </Table>
     );
 }

@@ -62,7 +62,11 @@ function HomePage() {
                         contentContainerStyle={styles.homePageContentContainer}
                         addBottomSafeAreaPadding
                     >
-                        {!shouldUseNarrowLayout && <QuickCreationActionsBar />}
+                        {!shouldUseNarrowLayout && (
+                            <View style={styles.homePageMainLayout(shouldUseNarrowLayout)}>
+                                <QuickCreationActionsBar />
+                            </View>
+                        )}
                         <View style={styles.homePageMainLayout(shouldUseNarrowLayout)}>
                             {/* Widgets handle their own visibility and may return null to avoid duplicating visibility logic here */}
                             {shouldUseNarrowLayout ? (

@@ -27,7 +27,7 @@ function MoreFeaturesSection({title, children}: MoreFeaturesSectionProps) {
     return (
         <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : {}]}>
             <Section
-                containerStyles={[styles.ph1, styles.pv0, styles.bgTransparent, styles.noBorderRadius]}
+                containerStyles={[styles.ph1, styles.pv0, styles.bgTransparent, styles.noBorderRadius, styles.borderNone, styles.boxShadowNone]}
                 childrenStyles={[styles.flexRow, styles.flexWrap, styles.columnGap3]}
                 renderTitle={() => (
                     <Text

@@ -1904,7 +1904,7 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         sidebarLinkActive: {
-            backgroundColor: theme.activeComponentBG,
+            backgroundColor: theme.activeNavItem,
             textDecorationLine: 'none',
         },
 
@@ -2533,6 +2533,13 @@ const staticStyles = (theme: ThemeColors) =>
             borderBottomRightRadius: variables.componentBorderRadius,
         },
 
+        searchTableWrapper: {
+            marginHorizontal: 20,
+            marginBottom: 20,
+            borderRadius: variables.componentBorderRadius,
+            overflow: 'hidden',
+        },
+
         tableRowHeightCompact: {
             minHeight: variables.tableRowHeightCompact,
         },
@@ -2879,8 +2886,6 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         borderedContentCardLarge: {
-            borderWidth: 1,
-            borderColor: theme.border,
             borderRadius: variables.componentBorderRadiusLarge,
         },
 
@@ -3507,9 +3512,7 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         searchListHeaderTableStyle: {
-            backgroundColor: theme.highlightBG,
-            borderTopLeftRadius: variables.componentBorderRadius,
-            borderTopRightRadius: variables.componentBorderRadius,
+            backgroundColor: theme.cardBG,
             borderBottomWidth: 1,
             borderColor: theme.border,
             minHeight: 36,
@@ -3820,6 +3823,7 @@ const staticStyles = (theme: ThemeColors) =>
             paddingTop: 0,
             paddingHorizontal: 20,
             paddingBottom: 20,
+            alignItems: 'center',
         },
 
         cardSectionIllustration: {
@@ -6589,6 +6593,7 @@ const plainStyles = (theme: ThemeColors) =>
                 flexDirection: shouldUseNarrowLayout ? 'column' : 'row',
                 gap: 20,
                 width: '100%',
+                maxWidth: variables.homePageLeftColumnMaxWidth + variables.homePageRightColumnMaxWidth + 20,
             }) satisfies ViewStyle,
 
         homePageLeftColumn: {flex: 7, flexBasis: '58.333%', maxWidth: variables.homePageLeftColumnMaxWidth, flexDirection: 'column', gap: 20} satisfies ViewStyle,