diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index 8062cedc341b..7a7f61c291b4 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -78,11 +78,14 @@ function WorkspaceCompanyCardsList({cardsList, policyID, handleAssignCard, isDis
                             Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, item.bank));
                         }}
                     >
-                        <WorkspaceCompanyCardsListRow
-                            cardholder={personalDetails?.[item.accountID ?? CONST.DEFAULT_NUMBER_ID]}
-                            cardNumber={item.lastFourPAN ?? ''}
-                            name={customCardNames?.[item.cardID] ?? getDefaultCardName(personalDetails?.[item.accountID ?? CONST.DEFAULT_NUMBER_ID]?.firstName)}
-                        />
+                        {({hovered}) => (
+                            <WorkspaceCompanyCardsListRow
+                                cardholder={personalDetails?.[item.accountID ?? CONST.DEFAULT_NUMBER_ID]}
+                                cardNumber={item.lastFourPAN ?? ''}
+                                name={customCardNames?.[item.cardID] ?? getDefaultCardName(personalDetails?.[item.accountID ?? CONST.DEFAULT_NUMBER_ID]?.firstName)}
+                                isHovered={hovered}
+                            />
+                        )}
                     </PressableWithFeedback>
                 </OfflineWithFeedback>
             );
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx
index 7eae8c2240f7..798fde41725c 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx
@@ -20,9 +20,12 @@ type WorkspaceCompanyCardsListRowProps = {
 
     /** Cardholder personal details */
     cardholder?: PersonalDetails | null;
+
+    /** Whether the list item is hovered */
+    isHovered?: boolean;
 };
 
-function WorkspaceCompanyCardsListRow({cardholder, name, cardNumber}: WorkspaceCompanyCardsListRowProps) {
+function WorkspaceCompanyCardsListRow({cardholder, name, cardNumber, isHovered}: WorkspaceCompanyCardsListRowProps) {
     const styles = useThemeStyles();
     const cardholderName = useMemo(() => getDisplayNameOrDefault(cardholder), [cardholder]);
     const theme = useTheme();
@@ -62,7 +65,7 @@ function WorkspaceCompanyCardsListRow({cardholder, name, cardNumber}: WorkspaceC
                 <Icon
                     src={Expensicons.ArrowRight}
                     fill={theme.icon}
-                    additionalStyles={[styles.alignSelfCenter]}
+                    additionalStyles={[styles.alignSelfCenter, !isHovered && styles.opacitySemiTransparent]}
                     medium
                     isButtonIcon
                 />
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
index ef1c65864e3f..757f5050a988 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
@@ -31,9 +31,12 @@ type WorkspacesListRowProps = {
 
     /** Type of card */
     isVirtual: boolean;
+
+    /** Whether the list item is hovered */
+    isHovered?: boolean;
 };
 
-function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, isVirtual}: WorkspacesListRowProps) {
+function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, isVirtual, isHovered}: WorkspacesListRowProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -118,7 +121,7 @@ function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, i
                 <Icon
                     src={Expensicons.ArrowRight}
                     fill={theme.icon}
-                    additionalStyles={[styles.alignSelfCenter]}
+                    additionalStyles={[styles.alignSelfCenter, !isHovered && styles.opacitySemiTransparent]}
                     medium
                     isButtonIcon
                 />
diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
index 06255a576b92..6f80ac587e60 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
@@ -162,14 +162,17 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp
                     hoverStyle={[styles.hoveredComponentBG]}
                     onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, item.cardID.toString()))}
                 >
-                    <WorkspaceCardListRow
-                        lastFourPAN={item.lastFourPAN ?? ''}
-                        cardholder={personalDetails?.[item.accountID ?? CONST.DEFAULT_NUMBER_ID]}
-                        limit={item.nameValuePairs?.unapprovedExpenseLimit ?? 0}
-                        name={item.nameValuePairs?.cardTitle ?? ''}
-                        currency={settlementCurrency}
-                        isVirtual={!!item.nameValuePairs?.isVirtual}
-                    />
+                    {({hovered}) => (
+                        <WorkspaceCardListRow
+                            lastFourPAN={item.lastFourPAN ?? ''}
+                            cardholder={personalDetails?.[item.accountID ?? CONST.DEFAULT_NUMBER_ID]}
+                            limit={item.nameValuePairs?.unapprovedExpenseLimit ?? 0}
+                            name={item.nameValuePairs?.cardTitle ?? ''}
+                            currency={settlementCurrency}
+                            isVirtual={!!item.nameValuePairs?.isVirtual}
+                            isHovered={hovered}
+                        />
+                    )}
                 </PressableWithFeedback>
             </OfflineWithFeedback>
         ),