diff --git a/src/languages/en.ts b/src/languages/en.ts
index b4367e69bcf3..df20625c9241 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2650,6 +2650,7 @@ export default {
             disclaimer:
                 'The Expensify Visa® Commercial Card is issued by The Bancorp Bank, N.A., Member FDIC, pursuant to a license from Visa U.S.A. Inc. and may not be used at all merchants that accept Visa cards. Apple® and the Apple logo® are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc. Google Play and the Google Play logo are trademarks of Google LLC.',
             issueCard: 'Issue card',
+            newCard: 'New card',
             name: 'Name',
             lastFour: 'Last 4',
             limit: 'Limit',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 9169d3f51987..d3fcb8fd0ef7 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2699,6 +2699,7 @@ export default {
             disclaimer:
                 'La tarjeta comercial Expensify Visa® es emitida por The Bancorp Bank, N.A., miembro de la FDIC, en virtud de una licencia de Visa U.S.A. Inc. y no puede utilizarse en todos los comercios que aceptan tarjetas Visa. Apple® y el logotipo de Apple® son marcas comerciales de Apple Inc. registradas en EE.UU. y otros países. App Store es una marca de servicio de Apple Inc. Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.',
             issueCard: 'Emitir tarjeta',
+            newCard: 'Nueva tarjeta',
             name: 'Nombre',
             lastFour: '4 últimos',
             limit: 'Limite',
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index 9924d47764e8..17bae66716b3 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import Avatar from '@components/Avatar';
 import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
@@ -12,6 +13,7 @@ import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
@@ -19,20 +21,125 @@ import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import variables from '@styles/variables';
+import * as Card from '@userActions/Card';
 import * as Member from '@userActions/Policy/Member';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx';
+import type {PersonalDetails, PersonalDetailsList, WorkspaceCardsList} from '@src/types/onyx';
 import type {ListItemType} from './WorkspaceMemberDetailsRoleSelectionModal';
 import WorkspaceMemberDetailsRoleSelectionModal from './WorkspaceMemberDetailsRoleSelectionModal';
 
+// TODO: remove when Onyx data is available
+const mockedCards: OnyxEntry<WorkspaceCardsList> = {
+    test1: {
+        accountID: 885646,
+        cardID: 1,
+        nameValuePairs: {
+            limit: 1000,
+            cardTitle: 'Test 1',
+        },
+        lastFourPAN: '1234',
+        state: CONST.EXPENSIFY_CARD.STATE.OPEN,
+        bank: '',
+        availableSpend: 1,
+        domainName: '',
+        fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
+    },
+    test2: {
+        accountID: 885646,
+        cardID: 2,
+        nameValuePairs: {
+            limit: 2000,
+            cardTitle: 'Test 2',
+        },
+        lastFourPAN: '1234',
+        state: CONST.EXPENSIFY_CARD.STATE.OPEN,
+        bank: '',
+        availableSpend: 1,
+        domainName: '',
+        fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
+    },
+    test3: {
+        accountID: 885646,
+        cardID: 3,
+        nameValuePairs: {
+            limit: 3000,
+            cardTitle: 'Test 3',
+        },
+        lastFourPAN: '1234',
+        state: CONST.EXPENSIFY_CARD.STATE.OPEN,
+        bank: '',
+        availableSpend: 1,
+        domainName: '',
+        fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
+    },
+    test4: {
+        accountID: 885646,
+        cardID: 3,
+        nameValuePairs: {
+            limit: 3000,
+            cardTitle: 'Test 3',
+        },
+        lastFourPAN: '1234',
+        state: CONST.EXPENSIFY_CARD.STATE.OPEN,
+        bank: '',
+        availableSpend: 1,
+        domainName: '',
+        fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
+    },
+    test5: {
+        accountID: 885646,
+        cardID: 3,
+        nameValuePairs: {
+            limit: 3000,
+            cardTitle: 'Test 3',
+        },
+        lastFourPAN: '1234',
+        state: CONST.EXPENSIFY_CARD.STATE.OPEN,
+        bank: '',
+        availableSpend: 1,
+        domainName: '',
+        fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
+    },
+    test6: {
+        accountID: 885646,
+        cardID: 3,
+        nameValuePairs: {
+            limit: 3000,
+            cardTitle: 'Test 3',
+        },
+        lastFourPAN: '1234',
+        state: CONST.EXPENSIFY_CARD.STATE.OPEN,
+        bank: '',
+        availableSpend: 1,
+        domainName: '',
+        fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
+    },
+    test7: {
+        accountID: 885646,
+        cardID: 3,
+        nameValuePairs: {
+            limit: 3000,
+            cardTitle: 'Test 3',
+        },
+        lastFourPAN: '1234',
+        state: CONST.EXPENSIFY_CARD.STATE.OPEN,
+        bank: '',
+        availableSpend: 1,
+        domainName: '',
+        fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL,
+    },
+};
+
 type WorkspacePolicyOnyxProps = {
     /** Personal details of all users */
     personalDetails: OnyxEntry<PersonalDetailsList>;
@@ -54,6 +161,9 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
 
     const accountID = Number(route.params.accountID);
     const policyID = route.params.policyID;
+    // TODO: uncomment the code line below to use cardsList data from Onyx when it's supported
+    // const [cardList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${policyID}_${CONST.EXPENSIFY_CARD.BANK}`);
+    const cardList = mockedCards;
 
     const memberLogin = personalDetails?.[accountID]?.login ?? '';
     const member = policy?.employeeList?.[memberLogin];
@@ -114,6 +224,24 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
         Navigation.navigate(ROUTES.PROFILE.getRoute(accountID, Navigation.getActiveRoute()));
     }, [accountID]);
 
+    const navigateToDetails = useCallback(
+        (cardID: string) => {
+            Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID, Navigation.getActiveRoute()));
+        },
+        [policyID],
+    );
+
+    const navigateToIssueNewCard = useCallback(() => {
+        Card.setIssueNewCardStepAndData({
+            step: CONST.EXPENSIFY_CARD.STEP.CARD_TYPE,
+            data: {
+                assigneeEmail: memberLogin,
+            },
+            isEditing: false,
+        });
+        Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID));
+    }, [memberLogin, policyID]);
+
     const openRoleSelectionModal = useCallback(() => {
         setIsRoleSelectionModalVisible(true);
     }, []);
@@ -146,85 +274,120 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
         >
             <ScreenWrapper testID={WorkspaceMemberDetailsPage.displayName}>
-                <HeaderWithBackButton
-                    title={displayName}
-                    subtitle={policy?.name}
-                />
-                <View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone, styles.justifyContentStart]}>
-                    <View style={[styles.avatarSectionWrapper, styles.pb0]}>
-                        <OfflineWithFeedback pendingAction={details.pendingFields?.avatar}>
-                            <Avatar
-                                containerStyles={[styles.avatarXLarge, styles.mv5, styles.noOutline]}
-                                imageStyles={[styles.avatarXLarge]}
-                                source={details.avatar}
-                                avatarID={accountID}
-                                type={CONST.ICON_TYPE_AVATAR}
-                                size={CONST.AVATAR_SIZE.XLARGE}
-                                fallbackIcon={fallbackIcon}
-                            />
-                        </OfflineWithFeedback>
-                        {!!(details.displayName ?? '') && (
-                            <Text
-                                style={[styles.textHeadline, styles.pre, styles.mb6, styles.w100, styles.textAlignCenter]}
-                                numberOfLines={1}
-                            >
-                                {displayName}
-                            </Text>
-                        )}
-                        {isSelectedMemberOwner && isCurrentUserAdmin && !isCurrentUserOwner ? (
-                            <Button
-                                text={translate('workspace.people.transferOwner')}
-                                onPress={startChangeOwnershipFlow}
-                                medium
-                                isDisabled={isOffline}
-                                icon={Expensicons.Transfer}
-                                iconStyles={StyleUtils.getTransformScaleStyle(0.8)}
-                                style={styles.mv5}
-                            />
-                        ) : (
-                            <Button
-                                text={translate('workspace.people.removeMemberButtonTitle')}
-                                onPress={askForConfirmationToRemove}
-                                medium
-                                isDisabled={isSelectedMemberOwner || isSelectedMemberCurrentUser}
-                                icon={Expensicons.RemoveMembers}
-                                iconStyles={StyleUtils.getTransformScaleStyle(0.8)}
-                                style={styles.mv5}
-                            />
-                        )}
-                        <ConfirmModal
-                            danger
-                            title={translate('workspace.people.removeMemberTitle')}
-                            isVisible={isRemoveMemberConfirmModalVisible}
-                            onConfirm={removeUser}
-                            onCancel={() => setIsRemoveMemberConfirmModalVisible(false)}
-                            prompt={confirmModalPrompt}
-                            confirmText={translate('common.remove')}
-                            cancelText={translate('common.cancel')}
-                        />
-                    </View>
-                    <View style={styles.w100}>
-                        <MenuItemWithTopDescription
-                            disabled={isSelectedMemberOwner || isSelectedMemberCurrentUser}
-                            title={member?.role === CONST.POLICY.ROLE.ADMIN ? translate('common.admin') : translate('common.member')}
-                            description={translate('common.role')}
-                            shouldShowRightIcon
-                            onPress={openRoleSelectionModal}
-                        />
-                        <MenuItem
-                            title={translate('common.profile')}
-                            icon={Expensicons.Info}
-                            onPress={navigateToProfile}
-                            shouldShowRightIcon
-                        />
-                        <WorkspaceMemberDetailsRoleSelectionModal
-                            isVisible={isRoleSelectionModalVisible}
-                            items={roleItems}
-                            onRoleChange={changeRole}
-                            onClose={() => setIsRoleSelectionModalVisible(false)}
+                {({safeAreaPaddingBottomStyle}) => (
+                    <>
+                        <HeaderWithBackButton
+                            title={displayName}
+                            subtitle={policy?.name}
                         />
-                    </View>
-                </View>
+                        <ScrollView contentContainerStyle={safeAreaPaddingBottomStyle}>
+                            <View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone, styles.justifyContentStart]}>
+                                <View style={[styles.avatarSectionWrapper, styles.pb0]}>
+                                    <OfflineWithFeedback pendingAction={details.pendingFields?.avatar}>
+                                        <Avatar
+                                            containerStyles={[styles.avatarXLarge, styles.mv5, styles.noOutline]}
+                                            imageStyles={[styles.avatarXLarge]}
+                                            source={details.avatar}
+                                            avatarID={accountID}
+                                            type={CONST.ICON_TYPE_AVATAR}
+                                            size={CONST.AVATAR_SIZE.XLARGE}
+                                            fallbackIcon={fallbackIcon}
+                                        />
+                                    </OfflineWithFeedback>
+                                    {!!(details.displayName ?? '') && (
+                                        <Text
+                                            style={[styles.textHeadline, styles.pre, styles.mb6, styles.w100, styles.textAlignCenter]}
+                                            numberOfLines={1}
+                                        >
+                                            {displayName}
+                                        </Text>
+                                    )}
+                                    {isSelectedMemberOwner && isCurrentUserAdmin && !isCurrentUserOwner ? (
+                                        <Button
+                                            text={translate('workspace.people.transferOwner')}
+                                            onPress={startChangeOwnershipFlow}
+                                            medium
+                                            isDisabled={isOffline}
+                                            icon={Expensicons.Transfer}
+                                            iconStyles={StyleUtils.getTransformScaleStyle(0.8)}
+                                            style={styles.mv5}
+                                        />
+                                    ) : (
+                                        <Button
+                                            text={translate('workspace.people.removeMemberButtonTitle')}
+                                            onPress={askForConfirmationToRemove}
+                                            medium
+                                            isDisabled={isSelectedMemberOwner || isSelectedMemberCurrentUser}
+                                            icon={Expensicons.RemoveMembers}
+                                            iconStyles={StyleUtils.getTransformScaleStyle(0.8)}
+                                            style={styles.mv5}
+                                        />
+                                    )}
+                                    <ConfirmModal
+                                        danger
+                                        title={translate('workspace.people.removeMemberTitle')}
+                                        isVisible={isRemoveMemberConfirmModalVisible}
+                                        onConfirm={removeUser}
+                                        onCancel={() => setIsRemoveMemberConfirmModalVisible(false)}
+                                        prompt={confirmModalPrompt}
+                                        confirmText={translate('common.remove')}
+                                        cancelText={translate('common.cancel')}
+                                    />
+                                </View>
+                                <View style={styles.w100}>
+                                    <MenuItemWithTopDescription
+                                        disabled={isSelectedMemberOwner || isSelectedMemberCurrentUser}
+                                        title={member?.role === CONST.POLICY.ROLE.ADMIN ? translate('common.admin') : translate('common.member')}
+                                        description={translate('common.role')}
+                                        shouldShowRightIcon
+                                        onPress={openRoleSelectionModal}
+                                    />
+                                    <MenuItem
+                                        style={styles.mb5}
+                                        title={translate('common.profile')}
+                                        icon={Expensicons.Info}
+                                        onPress={navigateToProfile}
+                                        shouldShowRightIcon
+                                    />
+                                    <WorkspaceMemberDetailsRoleSelectionModal
+                                        isVisible={isRoleSelectionModalVisible}
+                                        items={roleItems}
+                                        onRoleChange={changeRole}
+                                        onClose={() => setIsRoleSelectionModalVisible(false)}
+                                    />
+                                    {policy?.areExpensifyCardsEnabled && (
+                                        <>
+                                            <View style={[styles.ph5, styles.pv3]}>
+                                                <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting])}>
+                                                    {translate('walletPage.assignedCards')}
+                                                </Text>
+                                            </View>
+                                            {Object.values(cardList ?? {}).map((card) => (
+                                                <MenuItem
+                                                    title={card.nameValuePairs?.cardTitle}
+                                                    badgeText={CurrencyUtils.convertAmountToDisplayString(card.nameValuePairs?.limit)}
+                                                    icon={ExpensifyCardImage}
+                                                    displayInDefaultIconColor
+                                                    iconStyles={styles.cardIcon}
+                                                    contentFit="contain"
+                                                    iconWidth={variables.cardIconWidth}
+                                                    iconHeight={variables.cardIconHeight}
+                                                    onPress={() => navigateToDetails(card.cardID.toString())}
+                                                    shouldShowRightIcon
+                                                />
+                                            ))}
+                                            <MenuItem
+                                                title={translate('workspace.expensifyCard.newCard')}
+                                                icon={Expensicons.Plus}
+                                                onPress={navigateToIssueNewCard}
+                                            />
+                                        </>
+                                    )}
+                                </View>
+                            </View>
+                        </ScrollView>
+                    </>
+                )}
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 2937fd5dcb19..1e24d1779de6 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5091,6 +5091,13 @@ const styles = (theme: ThemeColors) =>
             height: 188,
         },
 
+        cardIcon: {
+            overflow: 'hidden',
+            borderRadius: variables.cardBorderRadius,
+            height: variables.cardIconHeight,
+            alignSelf: 'center',
+        },
+
         tripReservationIconContainer: {
             width: variables.avatarSizeNormal,
             height: variables.avatarSizeNormal,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index ec488cf42744..e0720ad1d836 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -227,6 +227,10 @@ export default {
 
     cardPreviewHeight: 148,
     cardPreviewWidth: 235,
+    cardIconWidth: 40,
+    cardIconHeight: 25.29,
+    cardBorderRadius: 2.35,
+
     cardNameWidth: 156,
     holdMenuIconSize: 64,
     updateAnimationW: 390,