diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
index 6bc1521ee..eabdde934 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
@@ -18,7 +18,7 @@ const ButtonSettingsBlock = ( { title, description, ...props } ) => (
 						: undefined
 				}
 			>
-				{ props.actionProps.value }
+				{ props?.actionProps?.value }
 			</Button>
 		</Action>
 	</SettingsBlock>
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
new file mode 100644
index 000000000..b1b5fcb4d
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
@@ -0,0 +1,41 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import {
+	AccordionSettingsBlock,
+	RadioSettingsBlock,
+	InputSettingsBlock,
+} from '../../../../ReusableComponents/SettingsBlocks';
+import {
+	sandboxData,
+	productionData,
+} from '../../../../../data/settings/connection-details-data';
+
+const ConnectionDetails = ( { settings, updateFormValue } ) => {
+	const isSandbox = settings.sandboxConnected;
+
+	const modeConfig = isSandbox
+		? productionData( { settings, updateFormValue } )
+		: sandboxData( { settings, updateFormValue } );
+
+	const modeKey = isSandbox ? 'productionMode' : 'sandboxMode';
+
+	return (
+		<AccordionSettingsBlock
+			title={ modeConfig.title }
+			description={ modeConfig.description }
+		>
+			<RadioSettingsBlock
+				title={ modeConfig.connectTitle }
+				description={ modeConfig.connectDescription }
+				options={ modeConfig.options }
+				actionProps={ {
+					key: modeKey,
+					currentValue: settings[ modeKey ],
+					callback: updateFormValue,
+				} }
+			/>
+		</AccordionSettingsBlock>
+	);
+};
+
+export default ConnectionDetails;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Sandbox.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Sandbox.js
deleted file mode 100644
index 93a4a7d0d..000000000
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Sandbox.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import {
-	AccordionSettingsBlock,
-	ButtonSettingsBlock,
-	RadioSettingsBlock,
-	ToggleSettingsBlock,
-	InputSettingsBlock,
-} from '../../../../ReusableComponents/SettingsBlocks';
-import TitleBadge, {
-	TITLE_BADGE_POSITIVE,
-} from '../../../../ReusableComponents/TitleBadge';
-import ConnectionInfo, {
-	connectionStatusDataDefault,
-} from '../../../../ReusableComponents/ConnectionInfo';
-
-const Sandbox = ( { settings, updateFormValue } ) => {
-	const className = settings.sandboxConnected
-		? 'ppcp-r-settings-block--sandbox-connected'
-		: 'ppcp-r-settings-block--sandbox-disconnected';
-
-	return (
-		<AccordionSettingsBlock
-			title={ __( 'Sandbox', 'woocommerce-paypal-payments' ) }
-			className={ className }
-			description={ __(
-				"Test your site in PayPal's Sandbox environment.",
-				'woocommerce-paypal-payments'
-			) }
-			actionProps={ {
-				callback: updateFormValue,
-				key: 'payNowExperience',
-				value: settings.payNowExperience,
-			} }
-		>
-			{ settings.sandboxConnected && (
-				<ButtonSettingsBlock
-					title={ __(
-						'Sandbox account credentials',
-						'woocommerce-paypal-payments'
-					) }
-					description={ __(
-						'Your account is connected to sandbox, no real charging takes place. To accept live payments, turn off sandbox mode and connect your live PayPal account.',
-						'woocommerce-paypal-payments'
-					) }
-					tag={
-						<TitleBadge
-							type={ TITLE_BADGE_POSITIVE }
-							text={ __(
-								'Connected',
-								'woocommerce-paypal-payments'
-							) }
-						/>
-					}
-				>
-					<div className="ppcp-r-settings-block--sandbox">
-						<ToggleSettingsBlock
-							title={ __(
-								'Enable sandbox mode',
-								'woocommerce-paypal-payments'
-							) }
-							actionProps={ {
-								callback: updateFormValue,
-								key: 'sandboxEnabled',
-								value: settings.sandboxEnabled,
-							} }
-						/>
-						<ConnectionInfo
-							connectionStatusDataDefault={
-								connectionStatusDataDefault
-							}
-						/>
-						<Button
-							variant="secondary"
-							onClick={ () =>
-								updateFormValue( 'sandboxConnected', false )
-							}
-						>
-							{ __(
-								'Disconnect Sandbox',
-								'woocommerce-paypal-payments'
-							) }
-						</Button>
-					</div>
-				</ButtonSettingsBlock>
-			) }
-			{ ! settings.sandboxConnected && (
-				<RadioSettingsBlock
-					title={ __(
-						'Connect Sandbox Account',
-						'woocommerce-paypal-payments'
-					) }
-					description={ __(
-						'Connect a PayPal Sandbox account in order to test your website. Transactions made will not result in actual money movement. Do not fulfil orders completed in Sandbox mode.',
-						'woocommerce-paypal-payments'
-					) }
-					options={ [
-						{
-							id: 'sandbox_mode',
-							value: 'sandbox_mode',
-							label: __(
-								'Sandbox Mode',
-								'woocommerce-paypal-payments'
-							),
-							description: __(
-								'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
-								'woocommerce-paypal-payments'
-							),
-							additionalContent: (
-								<Button
-									variant="primary"
-									onClick={ () =>
-										updateFormValue(
-											'sandboxConnected',
-											true
-										)
-									}
-								>
-									{ __(
-										'Connect Sandbox Account',
-										'woocommerce-paypal-payments'
-									) }
-								</Button>
-							),
-						},
-						{
-							id: 'manual_connect',
-							value: 'manual_connect',
-							label: __(
-								'Manual Connect',
-								'woocommerce-paypal-payments'
-							),
-							description: sprintf(
-								__(
-									'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
-									'woocommerce-paypal-payments'
-								),
-								'#'
-							),
-							additionalContent: (
-								<>
-									<InputSettingsBlock
-										title={ __(
-											'Sandbox Client ID',
-											'woocommerce-paypal-payments'
-										) }
-										actionProps={ {
-											value: settings.sandboxClientId, // Add this to settings if not present
-											callback: updateFormValue,
-											key: 'sandboxClientId',
-											placeholder: __(
-												'Enter Client ID',
-												'woocommerce-paypal-payments'
-											),
-										} }
-									/>
-									<InputSettingsBlock
-										title={ __(
-											'Sandbox Secret Key',
-											'woocommerce-paypal-payments'
-										) }
-										actionProps={ {
-											value: settings.sandboxSecretKey, // Add this to settings if not present
-											callback: updateFormValue,
-											key: 'sandboxSecretKey',
-											placeholder: __(
-												'Enter Secret Key',
-												'woocommerce-paypal-payments'
-											),
-										} }
-									/>
-									<Button
-										variant="primary"
-										onClick={ () =>
-											updateFormValue(
-												'sandboxManuallyConnected',
-												true
-											)
-										} // Add this handler if needed
-									>
-										{ __(
-											'Connect Account',
-											'woocommerce-paypal-payments'
-										) }
-									</Button>
-								</>
-							),
-						},
-					] }
-					actionProps={ {
-						name: 'paypal_connect_sandbox',
-						key: 'sandboxMode',
-						currentValue: settings.sandboxMode,
-						callback: updateFormValue,
-					} }
-				/>
-			) }
-		</AccordionSettingsBlock>
-	);
-};
-
-export default Sandbox;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js
index fd949b8c2..0bc2914f3 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js
@@ -4,7 +4,7 @@ import {
 	Content,
 	ContentWrapper,
 } from '../../../ReusableComponents/SettingsBlocks';
-import Sandbox from './Blocks/Sandbox';
+import ConnectionDetails from './Blocks/ConnectionDetails';
 import Troubleshooting from './Blocks/Troubleshooting/Troubleshooting';
 import PaypalSettings from './Blocks/PaypalSettings';
 import OtherSettings from './Blocks/OtherSettings';
@@ -27,7 +27,7 @@ const ExpertSettings = ( { updateFormValue, settings } ) => {
 		>
 			<ContentWrapper>
 				<Content>
-					<Sandbox
+					<ConnectionDetails
 						updateFormValue={ updateFormValue }
 						settings={ settings }
 					/>
diff --git a/modules/ppcp-settings/resources/js/data/settings/connection-details-data.js b/modules/ppcp-settings/resources/js/data/settings/connection-details-data.js
new file mode 100644
index 000000000..65eeb62c2
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/data/settings/connection-details-data.js
@@ -0,0 +1,178 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { InputSettingsBlock } from '../../Components/ReusableComponents/SettingsBlocks';
+import { Button } from '@wordpress/components';
+
+/**
+ * Generates options for the environment mode settings.
+ *
+ * @param {Object}   config          - Configuration for the mode.
+ * @param {Object}   settings        - Current settings.
+ * @param {Function} updateFormValue - Callback to update settings.
+ * @return {Array} Options array.
+ */
+const generateOptions = ( config, settings, updateFormValue ) => [
+	{
+		id: `${ config.mode }_mode`,
+		value: `${ config.mode }_mode`,
+		label: config.labelTitle,
+		description: config.labelDescription,
+		additionalContent: (
+			<Button
+				variant="primary"
+				onClick={ () => {
+					updateFormValue( `${ config.mode }Connected`, true );
+					if ( config.mode === 'production' ) {
+						global.ppcpSettings.startOnboarding();
+					}
+				} }
+			>
+				{ config.buttonText }
+			</Button>
+		),
+	},
+	{
+		id: 'manual_connect',
+		value: 'manual_connect',
+		label: __( 'Manual Connect', 'woocommerce-paypal-payments' ),
+		description: sprintf(
+			__(
+				'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
+				'woocommerce-paypal-payments'
+			),
+			'#'
+		),
+		additionalContent: (
+			<>
+				<InputSettingsBlock
+					title={ config.clientIdTitle }
+					actionProps={ {
+						value: settings[ `${ config.mode }ClientId` ],
+						callback: updateFormValue,
+						key: `${ config.mode }ClientId`,
+						placeholder: __(
+							'Enter Client ID',
+							'woocommerce-paypal-payments'
+						),
+					} }
+				/>
+				<InputSettingsBlock
+					title={ config.secretKeyTitle }
+					actionProps={ {
+						value: settings[ `${ config.mode }SecretKey` ],
+						callback: updateFormValue,
+						key: `${ config.mode }SecretKey`,
+						placeholder: __(
+							'Enter Secret Key',
+							'woocommerce-paypal-payments'
+						),
+					} }
+				/>
+				<Button
+					variant="primary"
+					onClick={ () =>
+						updateFormValue(
+							`${ config.mode }ManuallyConnected`,
+							true
+						)
+					}
+				>
+					{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
+				</Button>
+			</>
+		),
+	},
+];
+
+/**
+ * Generates data for a given mode (sandbox or production).
+ *
+ * @param {Object}   config          - Configuration for the mode.
+ * @param {Object}   settings        - Current settings.
+ * @param {Function} updateFormValue - Callback to update settings.
+ * @return {Object} Mode configuration.
+ */
+const generateModeData = ( config, settings, updateFormValue ) => ( {
+	title: config.title,
+	description: config.description,
+	connectTitle: __(
+		`Connect ${ config.label } Account`,
+		'woocommerce-paypal-payments'
+	),
+	connectDescription: config.connectDescription,
+	options: generateOptions( config, settings, updateFormValue ),
+} );
+
+export const sandboxData = ( { settings = {}, updateFormValue = () => {} } ) =>
+	generateModeData(
+		{
+			mode: 'sandbox',
+			label: 'Sandbox',
+			title: __( 'Sandbox', 'woocommerce-paypal-payments' ),
+			description: __(
+				"Test your site in PayPal's Sandbox environment.",
+				'woocommerce-paypal-payments'
+			),
+			connectDescription: __(
+				'Connect a PayPal Sandbox account in order to test your website. Transactions made will not result in actual money movement. Do not fulfil orders completed in Sandbox mode.',
+				'woocommerce-paypal-payments'
+			),
+			labelTitle: __( 'Sandbox Mode', 'woocommerce-paypal-payments' ),
+			labelDescription: __(
+				'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
+				'woocommerce-paypal-payments'
+			),
+			buttonText: __(
+				'Connect Sandbox Account',
+				'woocommerce-paypal-payments'
+			),
+			clientIdTitle: __(
+				'Sandbox Client ID',
+				'woocommerce-paypal-payments'
+			),
+			secretKeyTitle: __(
+				'Sandbox Secret Key',
+				'woocommerce-paypal-payments'
+			),
+		},
+		settings,
+		updateFormValue
+	);
+
+export const productionData = ( {
+	settings = {},
+	updateFormValue = () => {},
+} ) =>
+	generateModeData(
+		{
+			mode: 'production',
+			label: 'Live',
+			title: __( 'Live Payments', 'woocommerce-paypal-payments' ),
+			description: __(
+				'Your site is currently configured in Sandbox mode to test payments. When you are ready, launch your site and receive live payments via PayPal.',
+				'woocommerce-paypal-payments'
+			),
+			connectDescription: __(
+				'Connect a live PayPal account to launch your site and receive live payments via PayPal. PayPal will guide you through the setup process.',
+				'woocommerce-paypal-payments'
+			),
+			labelTitle: __( 'Production Mode', 'woocommerce-paypal-payments' ),
+			labelDescription: __(
+				'Activate Production mode to connect your live account and receive live payments via PayPal. Stay connected in Sandbox mode to continue testing payments before going live.',
+				'woocommerce-paypal-payments'
+			),
+			buttonText: __(
+				'Set up and connect live PayPal Account',
+				'woocommerce-paypal-payments'
+			),
+			clientIdTitle: __(
+				'Live Account Client ID',
+				'woocommerce-paypal-payments'
+			),
+			secretKeyTitle: __(
+				'Live Account Secret Key',
+				'woocommerce-paypal-payments'
+			),
+		},
+		settings,
+		updateFormValue
+	);