From 4b570f6092d1183ebb2ace9e979ae0c54e048a16 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 19 Dec 2025 20:35:36 -0500
Subject: [PATCH 01/10] fix: invalid loading states

---
 src/hooks/useCompanyCards.ts                  |  10 +-
 ...orkspaceCompanyCardsTableHeaderButtons.tsx |  10 +-
 .../WorkspaceCompanyCardsTable/index.tsx      | 121 +++++++++---------
 3 files changed, 70 insertions(+), 71 deletions(-)

diff --git a/src/hooks/useCompanyCards.ts b/src/hooks/useCompanyCards.ts
index 55c89cb84ab31..89f6542692c46 100644
--- a/src/hooks/useCompanyCards.ts
+++ b/src/hooks/useCompanyCards.ts
@@ -1,6 +1,6 @@
-import type {OnyxCollection, ResultMetadata} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry, ResultMetadata} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
-import {getCompanyCardFeed, getCompanyFeeds, getPlaidInstitutionId} from '@libs/CardUtils';
+import {getCompanyCardFeed, getCompanyFeeds, getPlaidInstitutionId, getSelectedFeed} from '@libs/CardUtils';
 import type CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {CardFeeds, CardList} from '@src/types/onyx';
@@ -27,14 +27,15 @@ type UsCompanyCardsResult = Partial<{
     onyxMetadata: {
         cardListMetadata: ResultMetadata<WorkspaceCardsList>;
         allCardFeedsMetadata: ResultMetadata<OnyxCollection<CardFeeds>>;
+        lastSelectedFeedMetadata: ResultMetadata<OnyxEntry<CompanyCardFeedWithDomainID>>;
     };
 };
 
 function useCompanyCards(policyID?: string): UsCompanyCardsResult {
-    const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`, {canBeMissing: true});
+    const [lastSelectedFeed, lastSelectedFeedMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`, {canBeMissing: true});
     const [allCardFeeds, allCardFeedsMetadata] = useCardFeeds(policyID);
 
-    const feedName = lastSelectedFeed;
+    const feedName = getSelectedFeed(lastSelectedFeed, allCardFeeds);
     const bankName = feedName ? getCompanyCardFeed(feedName) : undefined;
 
     const [cardsList, cardListMetadata] = useCardsList(feedName);
@@ -54,6 +55,7 @@ function useCompanyCards(policyID?: string): UsCompanyCardsResult {
     const onyxMetadata = {
         cardListMetadata,
         allCardFeedsMetadata,
+        lastSelectedFeedMetadata,
     };
 
     if (!policyID) {
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx
index d8b779b9e7728..b810e8ce7539b 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx
@@ -46,7 +46,7 @@ type WorkspaceCompanyCardsTableHeaderButtonsProps = {
     feedName: CompanyCardFeedWithDomainID | undefined;
 
     /** Whether the feed is loading */
-    isLoadingFeed?: boolean;
+    isLoading?: boolean;
 
     /** Whether to show the table controls */
     showTableControls: boolean;
@@ -55,7 +55,7 @@ type WorkspaceCompanyCardsTableHeaderButtonsProps = {
     CardFeedIcon?: React.ReactNode;
 };
 
-function WorkspaceCompanyCardsTableHeaderButtons({policyID, feedName, isLoadingFeed, showTableControls, CardFeedIcon}: WorkspaceCompanyCardsTableHeaderButtonsProps) {
+function WorkspaceCompanyCardsTableHeaderButtons({policyID, feedName, isLoading, showTableControls, CardFeedIcon}: WorkspaceCompanyCardsTableHeaderButtonsProps) {
     const styles = useThemeStyles();
 
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
@@ -118,7 +118,7 @@ function WorkspaceCompanyCardsTableHeaderButtons({policyID, feedName, isLoadingF
                     !shouldShowNarrowLayout && [styles.flexColumn, styles.pv2, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween],
                 ]}
             >
-                {isLoadingFeed ? (
+                {isLoading ? (
                     <AccountSwitcherSkeletonView
                         avatarSize={CONST.AVATAR_SIZE.DEFAULT}
                         width={FEED_SELECTOR_SKELETON_WIDTH}
@@ -137,14 +137,14 @@ function WorkspaceCompanyCardsTableHeaderButtons({policyID, feedName, isLoadingF
                 <View
                     style={[styles.alignItemsCenter, styles.gap3, shouldShowNarrowLayout ? [styles.flexColumnReverse, styles.w100, styles.alignItemsStretch, styles.gap5] : styles.flexRow]}
                 >
-                    {!isLoadingFeed && showTableControls && (
+                    {!isLoading && showTableControls && (
                         <View style={[styles.mnw200]}>
                             <Table.SearchBar />
                         </View>
                     )}
 
                     <View style={[styles.flexRow, styles.gap3]}>
-                        {!isLoadingFeed && (
+                        {!isLoading && (
                             <>
                                 {showTableControls && <Table.FilterButtons style={shouldShowNarrowLayout && [styles.flex1]} />}
                                 <ButtonWithDropdownMenu
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
index 109ba0534d3f6..fafa2d8a191b9 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
@@ -54,47 +54,32 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
         cardNames,
         cardFeedType,
         selectedFeed,
-        onyxMetadata: {cardListMetadata, allCardFeedsMetadata},
+        onyxMetadata: {cardListMetadata, lastSelectedFeedMetadata},
     } = useCompanyCards(policy?.id);
-
-    const [countryByIp] = useOnyx(ONYXKEYS.COUNTRY, {canBeMissing: false});
-    const [personalDetails, personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
+    const isDirectCardFeed = cardFeedType === 'directFeed';
 
     const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID;
     const domainOrWorkspaceAccountID = getDomainOrWorkspaceAccountID(workspaceAccountID, selectedFeed);
-
+    const [countryByIp] = useOnyx(ONYXKEYS.COUNTRY, {canBeMissing: false});
+    const [personalDetails, personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
     const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES, {canBeMissing: true});
     const [failedCompanyCardAssignments] = useOnyx(`${ONYXKEYS.COLLECTION.FAILED_COMPANY_CARDS_ASSIGNMENTS}${domainOrWorkspaceAccountID}`, {canBeMissing: true});
 
     const hasNoAssignedCard = Object.keys(assignedCards ?? {}).length === 0;
     const isInitiallyLoadingFeeds = isEmptyObject(allCardFeeds);
+
     const isNoFeed = !selectedFeed && !isInitiallyLoadingFeeds;
     const isFeedPending = !!selectedFeed?.pending;
-    const isFeedAdded = !isInitiallyLoadingFeeds && !isFeedPending && !isNoFeed;
+    const isLoadingFeed = !feedName || policy?.id === undefined || isLoadingOnyxValue(lastSelectedFeedMetadata);
 
-    const isGB = countryByIp === CONST.COUNTRY.GB;
-    const shouldShowGBDisclaimer = isGB && isBetaEnabled(CONST.BETAS.PLAID_COMPANY_CARDS) && (isNoFeed || hasNoAssignedCard);
+    const isLoadingCards = cardFeedType === 'directFeed' ? selectedFeed?.accountList === undefined : isLoadingOnyxValue(cardListMetadata) || cardList === undefined;
+    const isLoadingPage = !isOffline && (isLoadingFeed || isLoadingOnyxValue(personalDetailsMetadata));
 
-    const cardFeedIcon = (
-        <CardFeedIcon
-            key={feedName}
-            iconProps={{
-                height: variables.cardIconHeight,
-                width: variables.cardIconWidth,
-                additionalStyles: styles.cardIcon,
-            }}
-            selectedFeed={feedName}
-        />
-    );
-
-    const isLoadingFeed = !feedName || policy?.id === undefined;
+    const showCards = !isInitiallyLoadingFeeds && !isFeedPending && !isNoFeed && !isLoadingFeed;
+    const showTableControls = !(showCards && !!selectedFeed);
 
-    const isDirectCardFeed = cardFeedType === 'directFeed';
-    const isLoadingDirectCardFeed = isDirectCardFeed && selectedFeed?.accountList === undefined;
-    const isLoadingCommercialCardFeed = !isDirectCardFeed && (isLoadingOnyxValue(cardListMetadata) || cardList === undefined);
-    const isLoadingCards = isLoadingOnyxValue(allCardFeedsMetadata) && (isLoadingDirectCardFeed || isLoadingCommercialCardFeed);
-    const isLoadingPersonalDetails = isLoadingOnyxValue(personalDetailsMetadata);
-    const isLoadingCardsTableData = isLoadingFeed || (!isOffline && isLoadingCards) || isLoadingPersonalDetails;
+    const isGB = countryByIp === CONST.COUNTRY.GB;
+    const shouldShowGBDisclaimer = isGB && isBetaEnabled(CONST.BETAS.PLAID_COMPANY_CARDS) && (isNoFeed || hasNoAssignedCard);
 
     // When we reach the medium screen width or the narrow layout is active,
     // we want to hide the table header and the middle column of the card rows, so that the content is not overlapping.
@@ -120,9 +105,9 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
         },
     ];
 
-    const showCards = !isFeedPending && !isNoFeed && isFeedAdded;
-    const data: WorkspaceCompanyCardTableItemData[] = showCards
-        ? (cardNames?.map((cardName) => {
+    const cardsData: WorkspaceCompanyCardTableItemData[] = isLoadingCards
+        ? []
+        : (cardNames?.map((cardName) => {
               const assignedCardPredicate = (card: Card) => (isDirectCardFeed ? card.cardName === cardName : isMaskedCardNumberEqual(card.cardName, cardName));
 
               const assignedCard = Object.values(assignedCards ?? {}).find(assignedCardPredicate);
@@ -138,23 +123,7 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
               const isAssigned = !!assignedCard;
 
               return {cardName, customCardName, isCardDeleted, isAssigned, assignedCard, cardholder, failedCompanyCardAssignment};
-          }) ?? [])
-        : [];
-
-    const renderItem = ({item, index}: ListRenderItemInfo<WorkspaceCompanyCardTableItemData>) => (
-        <WorkspaceCompanyCardTableItem
-            key={`${item.cardName}_${index}`}
-            item={item}
-            policyID={policy?.id ?? String(CONST.DEFAULT_NUMBER_ID)}
-            domainOrWorkspaceAccountID={domainOrWorkspaceAccountID}
-            CardFeedIcon={cardFeedIcon}
-            isPlaidCardFeed={isDirectCardFeed}
-            onAssignCard={onAssignCard}
-            isAssigningCardDisabled={isAssigningCardDisabled}
-            shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}
-            columnCount={columns.length}
-        />
-    );
+          }) ?? []);
 
     const keyExtractor = (item: WorkspaceCompanyCardTableItemData, index: number) => `${item.cardName}_${index}`;
 
@@ -240,6 +209,33 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
         },
     };
 
+    const cardFeedIcon = (
+        <CardFeedIcon
+            key={feedName}
+            iconProps={{
+                height: variables.cardIconHeight,
+                width: variables.cardIconWidth,
+                additionalStyles: styles.cardIcon,
+            }}
+            selectedFeed={feedName}
+        />
+    );
+
+    const renderItem = ({item, index}: ListRenderItemInfo<WorkspaceCompanyCardTableItemData>) => (
+        <WorkspaceCompanyCardTableItem
+            key={`${item.cardName}_${index}`}
+            item={item}
+            policyID={policy?.id ?? String(CONST.DEFAULT_NUMBER_ID)}
+            domainOrWorkspaceAccountID={domainOrWorkspaceAccountID}
+            CardFeedIcon={cardFeedIcon}
+            isPlaidCardFeed={isDirectCardFeed}
+            onAssignCard={onAssignCard}
+            isAssigningCardDisabled={isAssigningCardDisabled}
+            shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}
+            columnCount={columns.length}
+        />
+    );
+
     const [activeSortingInWideLayout, setActiveSortingInWideLayout] = useState<ActiveSorting<CompanyCardsTableColumnKey> | undefined>(undefined);
     const isNarrowLayoutRef = useRef(shouldUseNarrowTableLayout);
 
@@ -266,14 +262,10 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
         tableRef.current?.updateSorting(activeSortingInWideLayout);
     }, [activeSortingInWideLayout, shouldUseNarrowTableLayout]);
 
-    const showTableControls = !(isFeedPending && !!selectedFeed);
-
-    const ListEmptyComponent = showCards ? <TableRowSkeleton fixedNumItems={5} /> : <WorkspaceCompanyCardsFeedAddedEmptyPage shouldShowGBDisclaimer={shouldShowGBDisclaimer} />;
-
     return (
         <Table
             ref={tableRef}
-            data={isLoadingCardsTableData ? [] : data}
+            data={cardsData}
             columns={columns}
             renderItem={renderItem}
             keyExtractor={keyExtractor}
@@ -281,8 +273,22 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
             isItemInSearch={isItemInSearch}
             isItemInFilter={isItemInFilter}
             filters={filterConfig}
-            ListEmptyComponent={ListEmptyComponent}
+            ListEmptyComponent={isLoadingCards ? <TableRowSkeleton fixedNumItems={5} /> : <WorkspaceCompanyCardsFeedAddedEmptyPage shouldShowGBDisclaimer={shouldShowGBDisclaimer} />}
         >
+            {(showCards || isLoadingPage) && (
+                <View style={shouldUseNarrowTableLayout && styles.mb5}>
+                    <WorkspaceCompanyCardsTableHeaderButtons
+                        isLoading={isLoadingPage}
+                        policyID={policy?.id}
+                        feedName={feedName}
+                        showTableControls={showTableControls}
+                        CardFeedIcon={cardFeedIcon}
+                    />
+                </View>
+            )}
+
+            {isLoadingPage && <TableRowSkeleton fixedNumItems={5} />}
+
             {isFeedPending && (
                 <View style={styles.flex1}>
                     <WorkspaceCompanyCardsFeedPendingPage />
@@ -300,15 +306,6 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
 
             {showCards && (
                 <>
-                    <View style={shouldUseNarrowTableLayout && styles.mb5}>
-                        <WorkspaceCompanyCardsTableHeaderButtons
-                            isLoadingFeed={isLoadingFeed}
-                            policyID={policy?.id}
-                            feedName={feedName}
-                            showTableControls={showTableControls}
-                            CardFeedIcon={cardFeedIcon}
-                        />
-                    </View>
                     {!shouldUseNarrowTableLayout && !isLoadingFeed && <Table.Header />}
                     <Table.Body />
                 </>

From eb5ae437c1cc8d96ba819c04685bc3821005eb3a Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 19 Dec 2025 20:41:14 -0500
Subject: [PATCH 02/10] fix: assignCard button size

---
 .../WorkspaceCompanyCardsTableItem.tsx                          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
index 8540d310007b5..49e22f0b58eb5 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
@@ -235,7 +235,7 @@ function WorkspaceCompanyCardTableItem({
                             ) : (
                                 <Button
                                     success
-                                    small={!shouldUseNarrowTableLayout}
+                                    small={shouldUseNarrowTableLayout}
                                     text={translate('workspace.companyCards.assign')}
                                     onPress={assignCard}
                                     isDisabled={isAssigningCardDisabled}

From bf731e89ea8cab8e30527b415fb461665a129877 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 19 Dec 2025 20:44:08 -0500
Subject: [PATCH 03/10] fix: right arrow flex issue

---
 .../WorkspaceCompanyCardsTableItem.tsx                          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
index 49e22f0b58eb5..2ec3e6a07395a 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
@@ -213,7 +213,7 @@ function WorkspaceCompanyCardTableItem({
                             </View>
                         )}
 
-                        <View style={[styles.flex0, styles.flexRow, styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
+                        <View style={[styles.flexRow, styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
                             {isAssigned ? (
                                 <View style={[styles.flexRow, styles.ml2, styles.gap3, styles.mw100]}>
                                     {!shouldUseNarrowTableLayout && (

From 342d89ed0a8cab2ea38ec104404e6675d937d721 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 19 Dec 2025 20:45:10 -0500
Subject: [PATCH 04/10] fix: table controls not showing up

---
 .../workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
index fafa2d8a191b9..7d8e10c6f6b13 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
@@ -76,7 +76,7 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
     const isLoadingPage = !isOffline && (isLoadingFeed || isLoadingOnyxValue(personalDetailsMetadata));
 
     const showCards = !isInitiallyLoadingFeeds && !isFeedPending && !isNoFeed && !isLoadingFeed;
-    const showTableControls = !(showCards && !!selectedFeed);
+    const showTableControls = showCards && !!selectedFeed;
 
     const isGB = countryByIp === CONST.COUNTRY.GB;
     const shouldShowGBDisclaimer = isGB && isBetaEnabled(CONST.BETAS.PLAID_COMPANY_CARDS) && (isNoFeed || hasNoAssignedCard);

From 1ab5cb34e4fff9297da59ac8b3efeaddad3a1a29 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 19 Dec 2025 21:11:13 -0500
Subject: [PATCH 05/10] fix: go back after edit card name not working

---
 src/ROUTES.ts                                 |  9 +--
 src/SCREENS.ts                                |  2 +-
 .../ModalStackNavigators/index.tsx            |  2 +-
 .../RELATIONS/WORKSPACE_TO_RHP.ts             |  2 +-
 src/libs/Navigation/linkingConfig/config.ts   |  4 +-
 src/libs/Navigation/types.ts                  |  4 +-
 ...kspaceCompanyCardAccountSelectCardPage.tsx |  4 +-
 .../WorkspaceCompanyCardDetailsPage.tsx       | 26 +++----
 .../WorkspaceCompanyCardEditCardNamePage.tsx  |  9 ++-
 .../WorkspaceCompanyCardsTableItem.tsx        | 70 ++++++++-----------
 .../members/WorkspaceMemberDetailsPage.tsx    |  2 +-
 11 files changed, 62 insertions(+), 72 deletions(-)

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 0c4fbf04412ea..27d9c8432e8ef 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -2226,13 +2226,14 @@ const ROUTES = {
     WORKSPACE_COMPANY_CARD_DETAILS: {
         route: 'workspaces/:policyID/company-cards/:feed/:cardID',
 
-        getRoute: (policyID: string, cardID: string, feed: CompanyCardFeedWithDomainID, backTo?: string) =>
+        getRoute: (policyID: string, feed: CompanyCardFeedWithDomainID, cardID: string, backTo?: string) =>
             // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
             getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${encodeURIComponent(feed)}/${encodeURIComponent(cardID)}`, backTo),
     },
-    WORKSPACE_COMPANY_CARD_NAME: {
-        route: 'workspaces/:policyID/company-cards/:bank/:cardID/edit/name',
-        getRoute: (policyID: string, cardID: string, bank: string) => `workspaces/${policyID}/company-cards/${bank}/${cardID}/edit/name` as const,
+    WORKSPACE_COMPANY_CARD_EDIT_CARD_NAME: {
+        route: 'workspaces/:policyID/company-cards/:feed/:cardID/edit/name',
+        getRoute: (policyID: string, cardID: string, feed: CompanyCardFeedWithDomainID) =>
+            `workspaces/${policyID}/company-cards/${encodeURIComponent(feed)}/${encodeURIComponent(cardID)}/edit/name` as const,
     },
     WORKSPACE_COMPANY_CARD_EXPORT: {
         route: 'workspaces/:policyID/company-cards/:bank/:cardID/edit/export',
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index c73a1ae704203..f226769d6aea4 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -598,7 +598,7 @@ const SCREENS = {
         COMPANY_CARDS_SETTINGS_FEED_NAME: 'Workspace_CompanyCards_Settings_Feed_Name',
         COMPANY_CARDS_SETTINGS_STATEMENT_CLOSE_DATE: 'Workspace_CompanyCards_Settings_Statement_Close_Date',
         COMPANY_CARD_DETAILS: 'Workspace_CompanyCard_Details',
-        COMPANY_CARD_NAME: 'Workspace_CompanyCard_Name',
+        COMPANY_CARD_EDIT_CARD_NAME: 'Workspace_CompanyCard_Edit_Card_Name',
         COMPANY_CARD_EXPORT: 'Workspace_CompanyCard_Export',
         EXPENSIFY_CARD: 'Workspace_ExpensifyCard',
         EXPENSIFY_CARD_DETAILS: 'Workspace_ExpensifyCard_Details',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
index 6b475dc2b3ff7..fadf95d854816 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -708,7 +708,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.COMPANY_CARDS_BANK_CONNECTION]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/BankConnection').default,
     [SCREENS.WORKSPACE.COMPANY_CARDS_ADD_NEW]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/addNew/AddNewCardPage').default,
     [SCREENS.WORKSPACE.COMPANY_CARD_DETAILS]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage').default,
-    [SCREENS.WORKSPACE.COMPANY_CARD_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage').default,
+    [SCREENS.WORKSPACE.COMPANY_CARD_EDIT_CARD_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage').default,
     [SCREENS.WORKSPACE.COMPANY_CARD_EXPORT]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/issueNew/IssueNewCardPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW_CONFIRM_MAGIC_CODE]: () =>
diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts b/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts
index 6e9e6fd79786c..5dee0b252dd9f 100755
--- a/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts
+++ b/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts
@@ -250,7 +250,7 @@ const WORKSPACE_TO_RHP: Partial<Record<keyof WorkspaceSplitNavigatorParamList, s
         SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_CONFIRMATION,
         SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD_INVITE_NEW_MEMBER,
         SCREENS.WORKSPACE.COMPANY_CARD_DETAILS,
-        SCREENS.WORKSPACE.COMPANY_CARD_NAME,
+        SCREENS.WORKSPACE.COMPANY_CARD_EDIT_CARD_NAME,
         SCREENS.WORKSPACE.COMPANY_CARD_EXPORT,
     ],
     [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index f3b5b114ce84a..50a8a48def4d3 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -710,8 +710,8 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.WORKSPACE.COMPANY_CARD_DETAILS]: {
                             path: ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.route,
                         },
-                        [SCREENS.WORKSPACE.COMPANY_CARD_NAME]: {
-                            path: ROUTES.WORKSPACE_COMPANY_CARD_NAME.route,
+                        [SCREENS.WORKSPACE.COMPANY_CARD_EDIT_CARD_NAME]: {
+                            path: ROUTES.WORKSPACE_COMPANY_CARD_EDIT_CARD_NAME.route,
                         },
                         [SCREENS.WORKSPACE.COMPANY_CARD_EXPORT]: {
                             path: ROUTES.WORKSPACE_COMPANY_CARD_EXPORT.route,
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 63c4bcc750045..96fabcc262c30 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -1152,10 +1152,10 @@ type SettingsNavigatorParamList = {
         // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md
         backTo?: Routes;
     };
-    [SCREENS.WORKSPACE.COMPANY_CARD_NAME]: {
+    [SCREENS.WORKSPACE.COMPANY_CARD_EDIT_CARD_NAME]: {
         policyID: string;
-        cardID: string;
         feed: CompanyCardFeedWithDomainID;
+        cardID: string;
     };
     [SCREENS.WORKSPACE.COMPANY_CARD_EXPORT]: {
         policyID: string;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx
index 8c1372ab26238..928f6f080c18a 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx
@@ -82,7 +82,7 @@ function WorkspaceCompanyCardAccountSelectCardPage({route}: WorkspaceCompanyCard
             const exportValue = isDefaultCardSelected ? CONST.COMPANY_CARDS.DEFAULT_EXPORT_TYPE : value;
             setCompanyCardExportAccount(policyID, domainOrWorkspaceAccountID, cardID, exportMenuItem.exportType, exportValue, getCompanyCardFeed(feed));
 
-            Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, feed));
+            Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, feed, cardID));
         },
         [exportMenuItem?.exportType, domainOrWorkspaceAccountID, cardID, policyID, feed, defaultCard],
     );
@@ -117,7 +117,7 @@ function WorkspaceCompanyCardAccountSelectCardPage({route}: WorkspaceCompanyCard
             onChangeText={setSearchText}
             onSelectRow={updateExportAccount}
             initiallyFocusedOptionKey={exportMenuItem?.data?.find((mode) => mode.isSelected)?.keyForList}
-            onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, feed, backTo), {compareParams: false})}
+            onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, feed, cardID, backTo), {compareParams: false})}
             headerTitleAlreadyTranslated={exportMenuItem?.description}
             listEmptyContent={listEmptyContent}
             connectionName={connectedIntegration}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
index 81773096e8c21..12f5c1a4e250d 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
@@ -49,8 +49,8 @@ type WorkspaceCompanyCardDetailsPageProps = PlatformStackScreenProps<SettingsNav
 
 function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPageProps) {
     const {policyID, cardID, backTo} = route.params;
-    const bank = decodeURIComponent(route.params.feed) as CompanyCardFeedWithDomainID;
-    const feed = getCompanyCardFeed(bank);
+    const feedName = decodeURIComponent(route.params.feed) as CompanyCardFeedWithDomainID;
+    const bank = getCompanyCardFeed(feedName);
     const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`, {canBeMissing: true});
     const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES, {canBeMissing: true});
     const policy = usePolicy(policyID);
@@ -68,7 +68,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
     const connectedIntegration = getConnectedIntegration(policy, accountingIntegrations) ?? connectionSyncProgress?.connectionName;
 
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
-    const [allBankCards, allBankCardsMetadata] = useCardsList(bank);
+    const [allBankCards, allBankCardsMetadata] = useCardsList(feedName);
     const card = allBankCards?.[cardID];
 
     const cardBank = card?.bank ?? '';
@@ -78,19 +78,19 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
 
     const [cardFeeds] = useCardFeeds(policyID);
     const companyFeeds = getCompanyFeeds(cardFeeds);
-    const domainOrWorkspaceAccountID = getDomainOrWorkspaceAccountID(workspaceAccountID, companyFeeds[bank]);
-    const plaidUrl = getPlaidInstitutionIconUrl(bank);
+    const domainOrWorkspaceAccountID = getDomainOrWorkspaceAccountID(workspaceAccountID, companyFeeds[feedName]);
+    const plaidUrl = getPlaidInstitutionIconUrl(feedName);
 
     const unassignCard = () => {
         setIsUnassignModalVisible(false);
         if (card) {
-            unassignWorkspaceCompanyCard(domainOrWorkspaceAccountID, feed, card);
+            unassignWorkspaceCompanyCard(domainOrWorkspaceAccountID, bank, card);
         }
         Navigation.goBack();
     };
 
     const updateCard = () => {
-        updateWorkspaceCompanyCard(domainOrWorkspaceAccountID, cardID, feed, card?.lastScrapeResult);
+        updateWorkspaceCompanyCard(domainOrWorkspaceAccountID, cardID, bank, card?.lastScrapeResult);
     };
 
     const lastScrape = useMemo(() => {
@@ -158,7 +158,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                     <MenuItemWithTopDescription
                         numberOfLinesTitle={3}
                         description={translate('workspace.moreFeatures.companyCards.cardNumber')}
-                        title={maskCardNumber(card?.cardName ?? '', feed, true)}
+                        title={maskCardNumber(card?.cardName ?? '', bank, true)}
                         interactive={false}
                         titleStyle={styles.walletCardNumber}
                     />
@@ -166,14 +166,14 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                         pendingAction={card?.nameValuePairs?.pendingFields?.cardTitle}
                         errorRowStyles={[styles.ph5, styles.mb3]}
                         errors={getLatestErrorField(card?.nameValuePairs ?? {}, 'cardTitle')}
-                        onClose={() => clearCompanyCardErrorField(domainOrWorkspaceAccountID, cardID, feed, 'cardTitle')}
+                        onClose={() => clearCompanyCardErrorField(domainOrWorkspaceAccountID, cardID, bank, 'cardTitle')}
                     >
                         <MenuItemWithTopDescription
                             description={translate('workspace.moreFeatures.companyCards.cardName')}
                             title={customCardNames?.[cardID] ?? getDefaultCardName(cardholder?.firstName)}
                             shouldShowRightIcon
                             brickRoadIndicator={card?.nameValuePairs?.errorFields?.cardTitle ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
-                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_NAME.getRoute(policyID, cardID, bank))}
+                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_EDIT_CARD_NAME.getRoute(policyID, cardID, feedName))}
                         />
                     </OfflineWithFeedback>
                     {exportMenuItem?.shouldShowMenuItem ? (
@@ -185,14 +185,14 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                                 if (!exportMenuItem.exportType) {
                                     return;
                                 }
-                                clearCompanyCardErrorField(domainOrWorkspaceAccountID, cardID, feed, exportMenuItem.exportType);
+                                clearCompanyCardErrorField(domainOrWorkspaceAccountID, cardID, bank, exportMenuItem.exportType);
                             }}
                         >
                             <MenuItemWithTopDescription
                                 description={exportMenuItem.description}
                                 title={exportMenuItem.title}
                                 shouldShowRightIcon
-                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_EXPORT.getRoute(policyID, cardID, bank, backTo))}
+                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_EXPORT.getRoute(policyID, cardID, feedName, backTo))}
                             />
                         </OfflineWithFeedback>
                     ) : null}
@@ -224,7 +224,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                         pendingAction={card?.pendingFields?.lastScrape}
                         errorRowStyles={[styles.ph5, styles.mb3]}
                         errors={getLatestErrorField(card ?? {}, 'lastScrape')}
-                        onClose={() => clearCompanyCardErrorField(domainOrWorkspaceAccountID, cardID, feed, 'lastScrape', true)}
+                        onClose={() => clearCompanyCardErrorField(domainOrWorkspaceAccountID, cardID, bank, 'lastScrape', true)}
                     >
                         <MenuItem
                             icon={expensifyIcons.Sync}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
index ffd6e4097b693..8487c1f5f8d75 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
@@ -27,12 +27,11 @@ import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/EditExpensifyCardNameForm';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
-type WorkspaceCompanyCardEditCardNamePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARD_NAME>;
+type WorkspaceCompanyCardEditCardNamePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARD_EDIT_CARD_NAME>;
 
 function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditCardNamePageProps) {
-    const {policyID, cardID} = route.params;
+    const {policyID, cardID, feed} = route.params;
     const workspaceAccountID = useWorkspaceAccountID(policyID);
-    const feed = route.params.feed;
     const [customCardNames, customCardNamesMetadata] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES, {canBeMissing: true});
     const defaultValue = customCardNames?.[cardID];
 
@@ -46,7 +45,7 @@ function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditC
 
     const submit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM>) => {
         updateCompanyCardName(domainOrWorkspaceAccountID, cardID, values[INPUT_IDS.NAME], getCompanyCardFeed(feed), defaultValue);
-        Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, feed), {compareParams: false});
+        Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, feed, cardID), {compareParams: false});
     };
 
     const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM> => {
@@ -81,7 +80,7 @@ function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditC
             >
                 <HeaderWithBackButton
                     title={translate('workspace.moreFeatures.companyCards.cardName')}
-                    onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, feed), {compareParams: false})}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, feed, cardID), {compareParams: false})}
                 />
                 <Text style={[styles.mh5, styles.mt3, styles.mb5]}>{translate('workspace.moreFeatures.companyCards.giveItNameInstruction')}</Text>
                 <FormProvider
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
index 2ec3e6a07395a..b6adc6227633f 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
@@ -104,8 +104,11 @@ function WorkspaceCompanyCardTableItem({
     }
 
     const lastCardNumbers = isPlaidCardFeed ? lastFourNumbersFromCardName(cardName) : splitMaskedCardNumber(cardName)?.lastDigits;
+    const cardholderLoginText = !shouldUseNarrowTableLayout && isAssigned ? cardholder?.login : undefined;
+    const narrowWidthCardName = isAssigned ? `${customCardName ?? ''}${lastCardNumbers ? ` - ${lastCardNumbers}` : ''}` : cardName;
 
-    const alternateLoginText = shouldUseNarrowTableLayout ? `${customCardName ?? ''}${lastCardNumbers ? ` - ${lastCardNumbers}` : ''}` : (cardholder?.login ?? '');
+    const leftColumnTitle = isAssigned ? (cardholder?.displayName ?? '') : translate('workspace.moreFeatures.companyCards.unassignedCards');
+    const leftColumnSubtitle = shouldUseNarrowTableLayout ? narrowWidthCardName : cardholderLoginText;
 
     const resetFailedCompanyCardAssignment = () => {
         if (!failedCompanyCardAssignment) {
@@ -142,7 +145,7 @@ function WorkspaceCompanyCardTableItem({
 
                     const feedName = getCompanyCardFeedWithDomainID(assignedCard?.bank as CompanyCardFeed, assignedCard.fundID);
 
-                    return Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, assignedCard.cardID.toString(), feedName));
+                    return Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, feedName, assignedCard.cardID.toString()));
                 }}
             >
                 {({hovered}) => (
@@ -160,46 +163,33 @@ function WorkspaceCompanyCardTableItem({
                     >
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                             {isAssigned ? (
-                                <>
-                                    <Avatar
-                                        source={
-                                            cardholder?.avatar ??
-                                            getDefaultAvatarURL({
-                                                accountID: cardholder?.accountID,
-                                            })
-                                        }
-                                        avatarID={cardholder?.accountID}
-                                        type={CONST.ICON_TYPE_AVATAR}
-                                        size={CONST.AVATAR_SIZE.DEFAULT}
-                                    />
-
-                                    <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
-                                        <TextWithTooltip
-                                            text={cardholder?.displayName ?? ''}
-                                            style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre, styles.justifyContentCenter]}
-                                        />
-                                        <TextWithTooltip
-                                            text={alternateLoginText}
-                                            style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3]}
-                                        />
-                                    </View>
-                                </>
+                                <Avatar
+                                    source={
+                                        cardholder?.avatar ??
+                                        getDefaultAvatarURL({
+                                            accountID: cardholder?.accountID,
+                                        })
+                                    }
+                                    avatarID={cardholder?.accountID}
+                                    type={CONST.ICON_TYPE_AVATAR}
+                                    size={CONST.AVATAR_SIZE.DEFAULT}
+                                />
                             ) : (
-                                <>
-                                    {CardFeedIcon}
-
-                                    <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
-                                        <TextWithTooltip
-                                            text={translate('workspace.moreFeatures.companyCards.unassignedCards')}
-                                            style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre, styles.justifyContentCenter]}
-                                        />
-                                        <TextWithTooltip
-                                            text={cardName}
-                                            style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3]}
-                                        />
-                                    </View>
-                                </>
+                                CardFeedIcon
                             )}
+
+                            <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
+                                <TextWithTooltip
+                                    text={leftColumnTitle}
+                                    style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre, styles.justifyContentCenter]}
+                                />
+                                {!!leftColumnSubtitle && (
+                                    <TextWithTooltip
+                                        text={leftColumnSubtitle}
+                                        style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3]}
+                                    />
+                                )}
+                            </View>
                         </View>
 
                         {!shouldUseNarrowTableLayout && (
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index 2e8513f189f3b..8475b26aadac9 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -256,8 +256,8 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
             Navigation.navigate(
                 ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(
                     policyID,
-                    card.cardID.toString(),
                     getCompanyCardFeedWithDomainID(card.bank as CompanyCardFeed, card.fundID),
+                    card.cardID.toString(),
                     Navigation.getActiveRoute(),
                 ),
             );

From 010e8afb96881744582f85138000e8c6fb5bcf63 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 19 Dec 2025 21:23:18 -0500
Subject: [PATCH 06/10] fix: add scrollview

---
 .../WorkspaceCompanyCardsTable/index.tsx      | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
index 7d8e10c6f6b13..1f81b7399a9cf 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
@@ -1,6 +1,6 @@
 import type {ListRenderItemInfo} from '@shopify/flash-list';
 import React, {useEffect, useRef, useState} from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import CardFeedIcon from '@components/CardFeedIcon';
 import TableRowSkeleton from '@components/Skeletons/TableRowSkeleton';
 import Table from '@components/Table';
@@ -287,21 +287,25 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
                 </View>
             )}
 
-            {isLoadingPage && <TableRowSkeleton fixedNumItems={5} />}
-
-            {isFeedPending && (
-                <View style={styles.flex1}>
-                    <WorkspaceCompanyCardsFeedPendingPage />
-                </View>
-            )}
-
-            {isNoFeed && (
-                <View style={styles.flex1}>
-                    <WorkspaceCompanyCardPageEmptyState
-                        policy={policy}
-                        shouldShowGBDisclaimer={shouldShowGBDisclaimer}
-                    />
-                </View>
+            {(isLoadingPage || isFeedPending || isNoFeed) && (
+                <ScrollView>
+                    {isLoadingPage && <TableRowSkeleton fixedNumItems={5} />}
+
+                    {isFeedPending && (
+                        <View style={styles.flex1}>
+                            <WorkspaceCompanyCardsFeedPendingPage />
+                        </View>
+                    )}
+
+                    {isNoFeed && (
+                        <View style={styles.flex1}>
+                            <WorkspaceCompanyCardPageEmptyState
+                                policy={policy}
+                                shouldShowGBDisclaimer={shouldShowGBDisclaimer}
+                            />
+                        </View>
+                    )}
+                </ScrollView>
             )}
 
             {showCards && (

From 9614ed0632a8ee71ad6f5533dc4d2d429b424bbf Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 19 Dec 2025 21:35:09 -0500
Subject: [PATCH 07/10] fix: restricted ScrollView components

---
 .../companyCards/WorkspaceCompanyCardsTable/index.tsx          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
index 1f81b7399a9cf..8e737c3fb73fb 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
@@ -1,7 +1,8 @@
 import type {ListRenderItemInfo} from '@shopify/flash-list';
 import React, {useEffect, useRef, useState} from 'react';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import CardFeedIcon from '@components/CardFeedIcon';
+import ScrollView from '@components/ScrollView';
 import TableRowSkeleton from '@components/Skeletons/TableRowSkeleton';
 import Table from '@components/Table';
 import type {ActiveSorting, CompareItemsCallback, FilterConfig, IsItemInFilterCallback, IsItemInSearchCallback, TableColumn, TableHandle} from '@components/Table';

From 79da0da82f9243d2bc682dc87f80b3ed9824f0f8 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 19 Dec 2025 22:21:34 -0500
Subject: [PATCH 08/10] fix: allow changing feed when pending

---
 .../companyCards/WorkspaceCompanyCardsTable/index.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
index 8e737c3fb73fb..2e34dd922d4ca 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
@@ -77,7 +77,7 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
     const isLoadingPage = !isOffline && (isLoadingFeed || isLoadingOnyxValue(personalDetailsMetadata));
 
     const showCards = !isInitiallyLoadingFeeds && !isFeedPending && !isNoFeed && !isLoadingFeed;
-    const showTableControls = showCards && !!selectedFeed;
+    const showTableControls = showCards && !!selectedFeed && !isFeedPending;
 
     const isGB = countryByIp === CONST.COUNTRY.GB;
     const shouldShowGBDisclaimer = isGB && isBetaEnabled(CONST.BETAS.PLAID_COMPANY_CARDS) && (isNoFeed || hasNoAssignedCard);
@@ -276,7 +276,7 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
             filters={filterConfig}
             ListEmptyComponent={isLoadingCards ? <TableRowSkeleton fixedNumItems={5} /> : <WorkspaceCompanyCardsFeedAddedEmptyPage shouldShowGBDisclaimer={shouldShowGBDisclaimer} />}
         >
-            {(showCards || isLoadingPage) && (
+            {(showCards || isLoadingPage || isFeedPending) && (
                 <View style={shouldUseNarrowTableLayout && styles.mb5}>
                     <WorkspaceCompanyCardsTableHeaderButtons
                         isLoading={isLoadingPage}

From caafb87918834542ed5ed0530624f30431541d6f Mon Sep 17 00:00:00 2001
From: Carlos Miceli <carlosmiceli@expensify.com>
Date: Fri, 19 Dec 2025 23:31:39 -0500
Subject: [PATCH 09/10] fix infinnte loading after creating workspace

---
 .../workspace/companyCards/WorkspaceCompanyCardsPage.tsx   | 5 ++---
 .../companyCards/WorkspaceCompanyCardsTable/index.tsx      | 7 +++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 6d21928381f13..7b1477291b19e 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -18,7 +18,6 @@ import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSection
 import {openPolicyCompanyCardsFeed, openPolicyCompanyCardsPage} from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
-import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import WorkspaceCompanyCardsTable from './WorkspaceCompanyCardsTable';
 
@@ -34,10 +33,10 @@ function WorkspaceCompanyCardsPage({route}: WorkspaceCompanyCardsPageProps) {
     const policy = usePolicy(policyID);
     const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID;
 
-    const {allCardFeeds, feedName, selectedFeed, bankName} = useCompanyCards(policyID);
+    const {allCardFeeds, feedName, selectedFeed, bankName, onyxMetadata: {allCardFeedsMetadata}} = useCompanyCards(policyID);
     const [, cardsListMetadata] = useCardsList(feedName);
 
-    const isInitiallyLoadingFeeds = isEmptyObject(allCardFeeds);
+    const isInitiallyLoadingFeeds = isLoadingOnyxValue(allCardFeedsMetadata);
     const isNoFeed = !selectedFeed && !isInitiallyLoadingFeeds;
     const isFeedPending = !!selectedFeed?.pending;
     const isFeedAdded = !isInitiallyLoadingFeeds && !isFeedPending && !isNoFeed;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
index 2e34dd922d4ca..13ebd5902defc 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
@@ -21,7 +21,6 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Card, Policy} from '@src/types/onyx';
-import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import WorkspaceCompanyCardsTableHeaderButtons from './WorkspaceCompanyCardsTableHeaderButtons';
 import WorkspaceCompanyCardTableItem from './WorkspaceCompanyCardsTableItem';
@@ -55,7 +54,7 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
         cardNames,
         cardFeedType,
         selectedFeed,
-        onyxMetadata: {cardListMetadata, lastSelectedFeedMetadata},
+        onyxMetadata: {cardListMetadata, lastSelectedFeedMetadata, allCardFeedsMetadata},
     } = useCompanyCards(policy?.id);
     const isDirectCardFeed = cardFeedType === 'directFeed';
 
@@ -67,11 +66,11 @@ function WorkspaceCompanyCardsTable({policy, onAssignCard, isAssigningCardDisabl
     const [failedCompanyCardAssignments] = useOnyx(`${ONYXKEYS.COLLECTION.FAILED_COMPANY_CARDS_ASSIGNMENTS}${domainOrWorkspaceAccountID}`, {canBeMissing: true});
 
     const hasNoAssignedCard = Object.keys(assignedCards ?? {}).length === 0;
-    const isInitiallyLoadingFeeds = isEmptyObject(allCardFeeds);
+    const isInitiallyLoadingFeeds = isLoadingOnyxValue(allCardFeedsMetadata);
 
     const isNoFeed = !selectedFeed && !isInitiallyLoadingFeeds;
     const isFeedPending = !!selectedFeed?.pending;
-    const isLoadingFeed = !feedName || policy?.id === undefined || isLoadingOnyxValue(lastSelectedFeedMetadata);
+    const isLoadingFeed = (!feedName && isInitiallyLoadingFeeds) || policy?.id === undefined || isLoadingOnyxValue(lastSelectedFeedMetadata);
 
     const isLoadingCards = cardFeedType === 'directFeed' ? selectedFeed?.accountList === undefined : isLoadingOnyxValue(cardListMetadata) || cardList === undefined;
     const isLoadingPage = !isOffline && (isLoadingFeed || isLoadingOnyxValue(personalDetailsMetadata));

From bebfa52e93a6eb1323b67b629edfe8087ed163c2 Mon Sep 17 00:00:00 2001
From: Carlos Miceli <carlosmiceli@expensify.com>
Date: Fri, 19 Dec 2025 23:36:27 -0500
Subject: [PATCH 10/10] prettier

---
 .../workspace/companyCards/WorkspaceCompanyCardsPage.tsx  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 7b1477291b19e..d37f3bdb02547 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -33,7 +33,13 @@ function WorkspaceCompanyCardsPage({route}: WorkspaceCompanyCardsPageProps) {
     const policy = usePolicy(policyID);
     const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID;
 
-    const {allCardFeeds, feedName, selectedFeed, bankName, onyxMetadata: {allCardFeedsMetadata}} = useCompanyCards(policyID);
+    const {
+        allCardFeeds,
+        feedName,
+        selectedFeed,
+        bankName,
+        onyxMetadata: {allCardFeedsMetadata},
+    } = useCompanyCards(policyID);
     const [, cardsListMetadata] = useCardsList(feedName);
 
     const isInitiallyLoadingFeeds = isLoadingOnyxValue(allCardFeedsMetadata);