diff --git a/src/languages/en.ts b/src/languages/en.ts
index ee4bef78f106..01658f2b98cb 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2951,6 +2951,11 @@ export default {
                 limitType: 'Limit type',
                 name: 'Name',
             },
+            deactivateCardModal: {
+                deactivate: 'Deactivate',
+                deactivateCard: 'Deactivate card',
+                deactivateConfirmation: 'Deactivating this card will decline all future transactions and can’t be undone.',
+            },
         },
         reimburse: {
             captureReceipts: 'Capture receipts',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index b8a38f5bbbe5..9b4bce7152af 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3198,6 +3198,11 @@ export default {
                 limitType: 'Tipo de limite',
                 name: 'Nombre',
             },
+            deactivateCardModal: {
+                deactivate: 'Desactivar',
+                deactivateCard: 'Desactivar tarjeta',
+                deactivateConfirmation: 'Al desactivar esta tarjeta, se rechazarán todas las transacciones futuras y no se podrá deshacer.',
+            },
         },
         reimburse: {
             captureReceipts: 'Captura recibos',
diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx
index 6934776e44ba..e1e111399f94 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx
@@ -1,9 +1,10 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import Badge from '@components/Badge';
+import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {FallbackAvatar} from '@components/Icon/Expensicons';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -44,6 +45,7 @@ type WorkspaceExpensifyCardDetailsPageProps = StackScreenProps<SettingsNavigator
 function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetailsPageProps) {
     const {policyID, cardID, backTo} = route.params;
 
+    const [isDeactivateModalVisible, setIsDeactivateModalVisible] = useState(false);
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -59,6 +61,14 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
     const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(cardholder);
     const translationForLimitType = CardUtils.getTranslationKeyForLimitType(card.nameValuePairs?.limitType);
 
+    const deactivateCard = () => {
+        setIsDeactivateModalVisible(false);
+
+        // TODO: add API call when it's supported https://github.com/Expensify/Expensify/issues/407841
+
+        Navigation.goBack();
+    };
+
     return (
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
@@ -134,7 +144,18 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
                                 iconFill={theme.icon}
                                 title={translate('workspace.expensifyCard.deactivate')}
                                 style={styles.mv1}
-                                onPress={() => {}} // TODO: create Deactivate card logic https://github.com/Expensify/App/issues/44320
+                                onPress={() => setIsDeactivateModalVisible(true)}
+                            />
+                            <ConfirmModal
+                                title={translate('workspace.card.deactivateCardModal.deactivateCard')}
+                                isVisible={isDeactivateModalVisible}
+                                onConfirm={deactivateCard}
+                                onCancel={() => setIsDeactivateModalVisible(false)}
+                                shouldSetModalVisibility={false}
+                                prompt={translate('workspace.card.deactivateCardModal.deactivateConfirmation')}
+                                confirmText={translate('workspace.card.deactivateCardModal.deactivate')}
+                                cancelText={translate('common.cancel')}
+                                danger
                             />
                         </ScrollView>
                     </>