diff --git a/src/languages/en.ts b/src/languages/en.ts
index 819382ee66b9..fe867efc27c0 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -886,6 +886,7 @@ export default {
             copyCardNumber: 'Copy card number',
             updateAddress: 'Update address',
         },
+        cardDetailsLoadingFailure: 'An error occurred while loading the card details. Please check your internet connection and try again.',
     },
     reportFraudPage: {
         title: 'Report virtual card fraud',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 198d5d36b121..d86b712104fd 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -881,6 +881,7 @@ export default {
             copyCardNumber: 'Copiar número de la tarjeta',
             updateAddress: 'Actualizar dirección',
         },
+        cardDetailsLoadingFailure: 'Se ha producido un error al cargar los datos de la tarjeta. Comprueba tu conexión a Internet e inténtalo de nuevo.',
     },
     reportFraudPage: {
         title: 'Reportar fraude con la tarjeta virtual',
diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js
index 5e94a7ed2b65..9adcd3803766 100644
--- a/src/libs/actions/Card.js
+++ b/src/libs/actions/Card.js
@@ -1,5 +1,6 @@
 import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
+import * as Localize from '@libs/Localize';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -163,12 +164,12 @@ function revealVirtualCardDetails(cardID) {
         API.makeRequestWithSideEffects('RevealExpensifyCardDetails', {cardID})
             .then((response) => {
                 if (response.jsonCode !== CONST.JSON_CODE.SUCCESS) {
-                    reject();
+                    reject(Localize.translateLocal('cardPage.cardDetailsLoadingFailure'));
                     return;
                 }
                 resolve(response);
             })
-            .catch(reject);
+            .catch(() => reject(Localize.translateLocal('cardPage.cardDetailsLoadingFailure')));
     });
 }
 
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js
index d6cdbefc471a..d4a104d272dd 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.js
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.js
@@ -60,6 +60,7 @@ function ExpensifyCardPage({
 
     const [isLoading, setIsLoading] = useState(false);
     const [details, setDetails] = useState({});
+    const [cardDetailsError, setCardDetailsError] = useState('');
 
     if (_.isEmpty(virtualCard) && _.isEmpty(physicalCard)) {
         return <NotFoundPage />;
@@ -70,16 +71,21 @@ function ExpensifyCardPage({
     const handleRevealDetails = () => {
         setIsLoading(true);
         // We can't store the response in Onyx for security reasons.
-        // That is this action is handled manually and the response is stored in a local state
-        // Hence the eslint disable here.
+        // That is why this action is handled manually and the response is stored in a local state
+        // Hence eslint disable here.
         // eslint-disable-next-line rulesdir/no-thenable-actions-in-views
         Card.revealVirtualCardDetails(virtualCard.cardID)
-            .then(setDetails)
+            .then((value) => {
+                setDetails(value);
+                setCardDetailsError('');
+            })
+            .catch(setCardDetailsError)
             .finally(() => setIsLoading(false));
     };
 
     const hasDetectedDomainFraud = _.some(domainCards, (card) => card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN);
     const hasDetectedIndividualFraud = _.some(domainCards, (card) => card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL);
+    const cardDetailsErrorObject = cardDetailsError ? {error: cardDetailsError} : {};
 
     return (
         <ScreenWrapper
@@ -108,32 +114,6 @@ function ExpensifyCardPage({
 
                         {hasDetectedIndividualFraud && !hasDetectedDomainFraud ? (
                             <>
-                                {details.pan ? (
-                                    <CardDetails
-                                        pan={details.pan}
-                                        expiration={details.expiration}
-                                        cvv={details.cvv}
-                                        privatePersonalDetails={{address: details.address}}
-                                        domain={domain}
-                                    />
-                                ) : (
-                                    <MenuItemWithTopDescription
-                                        description={translate('cardPage.virtualCardNumber')}
-                                        title={CardUtils.maskCard(virtualCard.lastFourPAN)}
-                                        interactive={false}
-                                        titleStyle={styles.walletCardNumber}
-                                        shouldShowRightComponent
-                                        rightComponent={
-                                            <Button
-                                                medium
-                                                text={translate('cardPage.cardDetails.revealDetails')}
-                                                onPress={handleRevealDetails}
-                                                isDisabled={isLoading || isOffline}
-                                                isLoading={isLoading}
-                                            />
-                                        }
-                                    />
-                                )}
                                 <DangerCardSection
                                     title={translate('cardPage.suspiciousBannerTitle')}
                                     description={translate('cardPage.suspiciousBannerDescription')}
@@ -169,22 +149,29 @@ function ExpensifyCardPage({
                                                 domain={domain}
                                             />
                                         ) : (
-                                            <MenuItemWithTopDescription
-                                                description={translate('cardPage.virtualCardNumber')}
-                                                title={CardUtils.maskCard(virtualCard.lastFourPAN)}
-                                                interactive={false}
-                                                titleStyle={styles.walletCardNumber}
-                                                shouldShowRightComponent
-                                                rightComponent={
-                                                    <Button
-                                                        medium
-                                                        text={translate('cardPage.cardDetails.revealDetails')}
-                                                        onPress={handleRevealDetails}
-                                                        isDisabled={isLoading || isOffline}
-                                                        isLoading={isLoading}
-                                                    />
-                                                }
-                                            />
+                                            <>
+                                                <MenuItemWithTopDescription
+                                                    description={translate('cardPage.virtualCardNumber')}
+                                                    title={CardUtils.maskCard(virtualCard.lastFourPAN)}
+                                                    interactive={false}
+                                                    titleStyle={styles.walletCardNumber}
+                                                    shouldShowRightComponent
+                                                    rightComponent={
+                                                        <Button
+                                                            medium
+                                                            text={translate('cardPage.cardDetails.revealDetails')}
+                                                            onPress={handleRevealDetails}
+                                                            isDisabled={isLoading || isOffline}
+                                                            isLoading={isLoading}
+                                                        />
+                                                    }
+                                                />
+                                                <DotIndicatorMessage
+                                                    messages={cardDetailsErrorObject}
+                                                    type="error"
+                                                    style={[styles.ph5]}
+                                                />
+                                            </>
                                         )}
                                         <MenuItemWithTopDescription
                                             title={translate('cardPage.reportFraud')}