diff --git a/modules/ppcp-onboarding/assets/js/settings.js b/modules/ppcp-onboarding/assets/js/settings.js
index 9af409f07..993c48edb 100644
--- a/modules/ppcp-onboarding/assets/js/settings.js
+++ b/modules/ppcp-onboarding/assets/js/settings.js
@@ -171,6 +171,16 @@ document.addEventListener(
                 return;
             }
             const allOptions = Array.from(document.querySelectorAll('select[name="ppcp[disable_cards][]"] option'));
+            const iconVersions = {
+                'visa': {
+                    'light': {'label': 'Visa (light)'},
+                    'dark' : {'label': 'Visa (dark)', 'value': 'visa-dark'}
+                },
+                'mastercard': {
+                    'light': {'label': 'Mastercard (light)'},
+                    'dark' : {'label': 'Mastercard (dark)', 'value': 'mastercard-dark'}
+                }
+            }
             const replace = () => {
                 const validOptions = allOptions.filter(
                     (option) => {
@@ -181,13 +191,35 @@ document.addEventListener(
                 const selectedValidOptions = validOptions.map(
                     (option) => {
                         option = option.cloneNode(true);
-                        option.selected = target.querySelector('option[value="' + option.value + '"]') && target.querySelector('option[value="' + option.value + '"]').selected;
+                        let value = option.value;
+                        option.selected = target.querySelector('option[value="' + value + '"]') && target.querySelector('option[value="' + value + '"]').selected;
+                        if(value === 'visa' || value === 'mastercard') {
+                            let darkOption = option.cloneNode(true);
+                            let currentVersion = iconVersions[value];
+                            let darkValue = iconVersions[value].dark.value;
+
+                            option.text = currentVersion.light.label;
+                            darkOption.text = currentVersion.dark.label;
+                            darkOption.value = darkValue;
+                            darkOption.selected = target.querySelector('option[value="' + darkValue + '"]') && target.querySelector('option[value="' + darkValue + '"]').selected;
+
+                            return [option, darkOption];
+                        }
                         return option;
                     }
                 );
+
                 target.innerHTML = '';
                 selectedValidOptions.forEach(
                     (option) => {
+                        if(Array.isArray(option)){
+                            option.forEach(
+                                (option) => {
+                                    target.append(option);
+                                }
+                            )
+                        }
+
                         target.append(option);
                     }
                 );
diff --git a/modules/ppcp-wc-gateway/services.php b/modules/ppcp-wc-gateway/services.php
index 45c3270c2..addab8f1c 100644
--- a/modules/ppcp-wc-gateway/services.php
+++ b/modules/ppcp-wc-gateway/services.php
@@ -1945,13 +1945,15 @@ return array(
 					'woocommerce-paypal-payments'
 				),
 				'options'      => array(
-					'visa'       => _x( 'Visa', 'Name of credit card', 'woocommerce-paypal-payments' ),
-					'mastercard' => _x( 'Mastercard', 'Name of credit card', 'woocommerce-paypal-payments' ),
-					'amex'       => _x( 'American Express', 'Name of credit card', 'woocommerce-paypal-payments' ),
-					'discover'   => _x( 'Discover', 'Name of credit card', 'woocommerce-paypal-payments' ),
-					'jcb'        => _x( 'JCB', 'Name of credit card', 'woocommerce-paypal-payments' ),
-					'elo'        => _x( 'Elo', 'Name of credit card', 'woocommerce-paypal-payments' ),
-					'hiper'      => _x( 'Hiper', 'Name of credit card', 'woocommerce-paypal-payments' ),
+					'visa'            => _x( 'Visa (light)', 'Name of credit card', 'woocommerce-paypal-payments' ),
+					'visa-dark'       => _x( 'Visa (dark)', 'Name of credit card', 'woocommerce-paypal-payments' ),
+					'mastercard'      => _x( 'Mastercard (light)', 'Name of credit card', 'woocommerce-paypal-payments' ),
+					'mastercard-dark' => _x( 'Mastercard (dark)', 'Name of credit card', 'woocommerce-paypal-payments' ),
+					'amex'            => _x( 'American Express', 'Name of credit card', 'woocommerce-paypal-payments' ),
+					'discover'        => _x( 'Discover', 'Name of credit card', 'woocommerce-paypal-payments' ),
+					'jcb'             => _x( 'JCB', 'Name of credit card', 'woocommerce-paypal-payments' ),
+					'elo'             => _x( 'Elo', 'Name of credit card', 'woocommerce-paypal-payments' ),
+					'hiper'           => _x( 'Hiper', 'Name of credit card', 'woocommerce-paypal-payments' ),
 				),
 				'screens'      => array(
 					State::STATE_ONBOARDED,
@@ -2027,14 +2029,23 @@ return array(
 		 * Here, we filter them out.
 		 */
 		$card_options = $fields['disable_cards']['options'];
+		$card_icons = $fields['card_icons']['options'];
+		$dark_versions = array();
 		foreach ( $card_options as $card => $label ) {
 			if ( $dcc_applies->can_process_card( $card ) ) {
+				if ( 'visa' === $card || 'mastercard' === $card ) {
+					$dark_versions = array(
+						'visa-dark'       => $card_icons['visa-dark'],
+						'mastercard-dark' => $card_icons['mastercard-dark'],
+					);
+				}
 				continue;
 			}
 			unset( $card_options[ $card ] );
 		}
+
 		$fields['disable_cards']['options'] = $card_options;
-		$fields['card_icons']['options'] = $card_options;
+		$fields['card_icons']['options'] = array_merge( $dark_versions, $card_options );
 
 		/**
 		 * Display vault message on Pay Later label if vault is enabled.
diff --git a/modules/ppcp-wc-gateway/src/Gateway/CreditCardGateway.php b/modules/ppcp-wc-gateway/src/Gateway/CreditCardGateway.php
index d1310fb0a..7d7e14bee 100644
--- a/modules/ppcp-wc-gateway/src/Gateway/CreditCardGateway.php
+++ b/modules/ppcp-wc-gateway/src/Gateway/CreditCardGateway.php
@@ -331,8 +331,9 @@ class CreditCardGateway extends \WC_Payment_Gateway_CC {
 		$title_options = $this->card_labels();
 		$images        = array_map(
 			function ( string $type ) use ( $title_options ): string {
+				$striped_dark = str_replace( '-dark', '', $type );
 				return '<img
-                 title="' . esc_attr( $title_options[ $type ] ) . '"
+                 title="' . esc_attr( $title_options[ $striped_dark ] ) . '"
                  src="' . esc_url( $this->module_url ) . 'assets/images/' . esc_attr( $type ) . '.svg"
                  class="ppcp-card-icon"
                 > ';