diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlToggleButton.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlToggleButton.js
index 86350f5c7..2d648e20b 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlToggleButton.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlToggleButton.js
@@ -5,7 +5,7 @@ const ControlToggleButton = ( { label, description, value, onChange } ) => (
 	<Action>
 		<ToggleControl
 			className="ppcp--control-toggle"
-			__nextHasNoMarginBottom={ true }
+			__nextHasNoMarginBottom
 			checked={ value }
 			onChange={ onChange }
 			label={ label }
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
index df2c5159c..949b21c97 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
@@ -1,4 +1,5 @@
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, Icon, Button } from '@wordpress/components';
+import { cog } from '@wordpress/icons';
 
 import SettingsBlock from '../SettingsBlock';
 import PaymentMethodIcon from '../PaymentMethodIcon';
@@ -13,12 +14,12 @@ const PaymentMethodItemBlock = ( {
 		<SettingsBlock className="ppcp--method-item" separatorAndGap={ false }>
 			<div className="ppcp--method-inner">
 				<div className="ppcp--method-title-wrapper">
-                    { paymentMethod?.icon && (
-                        <PaymentMethodIcon
-                            icons={ [ paymentMethod.icon ] }
-                            type={ paymentMethod.icon }
-                        />
-                    ) }
+					{ paymentMethod?.icon && (
+						<PaymentMethodIcon
+							icons={ [ paymentMethod.icon ] }
+							type={ paymentMethod.icon }
+						/>
+					) }
 					<span className="ppcp--method-title">
 						{ paymentMethod.itemTitle }
 					</span>
@@ -28,7 +29,7 @@ const PaymentMethodItemBlock = ( {
 				</p>
 				<div className="ppcp--method-footer">
 					<ToggleControl
-						__nextHasNoMarginBottom={ true }
+						__nextHasNoMarginBottom
 						checked={ isSelected }
 						onChange={ onSelect }
 					/>
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js
index 4a7cf1a20..614ad0a3b 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js
@@ -43,6 +43,7 @@ const SettingsToggleBlock = ( {
 				</div>
 				<div className="ppcp-r-toggle-block__switch">
 					<ToggleControl
+						__nextHasNoMarginBottom
 						ref={ toggleRef }
 						checked={ isToggled }
 						onChange={ ( newState ) => setToggled( newState ) }
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
index 2865e8777..a749c7420 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
@@ -11,7 +11,7 @@ import PaymentMethodModal from '../../../../ReusableComponents/PaymentMethodModa
 import { PaymentHooks } from '../../../../../data';
 
 const Modal = ( { method, setModalIsVisible, onSave } ) => {
-	const { paymentMethods } = PaymentHooks.usePaymentMethods();
+	const { all: paymentMethods } = PaymentHooks.usePaymentMethods();
 	const {
 		paypalShowLogo,
 		threeDSecure,
@@ -64,9 +64,9 @@ const Modal = ( { method, setModalIsVisible, onSave } ) => {
 		switch ( field.type ) {
 			case 'text':
 				return (
-					<div className="ppcp-r-modal__field-row">
+					<div key={ key } className="ppcp-r-modal__field-row">
 						<TextControl
-							__nextHasNoMarginBottom={ true }
+							__nextHasNoMarginBottom
 							className="ppcp-r-vertical-text-control"
 							label={ field.label }
 							value={ settings[ key ] }
@@ -82,8 +82,9 @@ const Modal = ( { method, setModalIsVisible, onSave } ) => {
 
 			case 'toggle':
 				return (
-					<div className="ppcp-r-modal__field-row">
+					<div key={ key } className="ppcp-r-modal__field-row">
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ field.label }
 							checked={ settings[ key ] }
 							onChange={ ( value ) =>