diff --git a/includes/Settings/Settings_Page.php b/includes/Settings/Settings_Page.php
index 3223045f..3ef227fd 100644
--- a/includes/Settings/Settings_Page.php
+++ b/includes/Settings/Settings_Page.php
@@ -155,7 +155,7 @@ public function render_page(): void {
 
 			<?php settings_errors( 'ai_experiments' ); ?>
 
-			<form method="post" action="options.php">
+			<form method="post" action="options.php" id="ai-experiments-form">
 				<?php
 				settings_fields( Settings_Registration::OPTION_GROUP );
 				?>
@@ -171,19 +171,20 @@ public function render_page(): void {
 						</div>
 
 						<div class="ai-experiments__toggle">
-							<label class="components-toggle-control" for="<?php echo esc_attr( Settings_Registration::GLOBAL_OPTION ); ?>">
-								<input
-									type="checkbox"
-									name="<?php echo esc_attr( Settings_Registration::GLOBAL_OPTION ); ?>"
-									id="<?php echo esc_attr( Settings_Registration::GLOBAL_OPTION ); ?>"
-									value="1"
-									<?php checked( $global_enabled ); ?>
-									aria-describedby="ai-experiments-global-desc"
-								/>
-								<span class="ai-experiments__toggle-label">
-									<?php esc_html_e( 'Enable Experiments', 'ai' ); ?>
-								</span>
-							</label>
+							<input
+								type="hidden"
+								name="<?php echo esc_attr( Settings_Registration::GLOBAL_OPTION ); ?>"
+								id="ai-experiments-enabled"
+								value="<?php echo $global_enabled ? '1' : '0'; ?>"
+							/>
+							<button
+								type="button"
+								class="button <?php echo $global_enabled ? 'button-secondary' : 'button-primary'; ?> ai-experiments__toggle-button"
+								data-ai-toggle-global="<?php echo $global_enabled ? '0' : '1'; ?>"
+								aria-describedby="ai-experiments-global-desc"
+							>
+								<?php echo $global_enabled ? esc_html__( 'Disable Experiments', 'ai' ) : esc_html__( 'Enable Experiments', 'ai' ); ?>
+							</button>
 						</div>
 					</div>
 
@@ -267,6 +268,29 @@ public function render_page(): void {
 
 				<?php submit_button(); ?>
 			</form>
+
+			<script>
+				(function() {
+					const form = document.getElementById('ai-experiments-form');
+					const toggleButton = form ? form.querySelector('[data-ai-toggle-global]') : null;
+					const globalInput = document.getElementById('ai-experiments-enabled');
+
+					if (!form || !toggleButton || !globalInput) {
+						return;
+					}
+
+					toggleButton.addEventListener('click', function() {
+						globalInput.value = this.dataset.aiToggleGlobal || '';
+
+						if (form.requestSubmit) {
+							form.requestSubmit();
+							return;
+						}
+
+						form.submit();
+					});
+				})();
+			</script>
 		</div>
 		<?php
 	}
diff --git a/src/admin/settings/index.scss b/src/admin/settings/index.scss
index cce638c0..e7413087 100644
--- a/src/admin/settings/index.scss
+++ b/src/admin/settings/index.scss
@@ -42,25 +42,18 @@
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
+		flex-wrap: wrap;
+	}
 
-		.components-toggle-control {
-			display: flex;
-			align-items: center;
-			margin: 0;
-
-			span {
-				margin-left: 0.5rem;
-			}
-		}
-
-		input[type="checkbox"] {
-			margin: 0;
-		}
+	/* Element: toggle button */
+	&__toggle-button {
+		margin: 0;
 	}
 
-	/* Element: toggle label */
-	&__toggle-label {
-		font-weight: 500;
+	/* Element: toggle help text */
+	&__toggle-help {
+		margin: 0;
+		color: #555d66;
 	}
 
 	/* Element: notice */
diff --git a/tests/e2e/utils/helpers.ts b/tests/e2e/utils/helpers.ts
index 11d994ab..bc262f27 100644
--- a/tests/e2e/utils/helpers.ts
+++ b/tests/e2e/utils/helpers.ts
@@ -60,10 +60,23 @@ export const clearCredentials = async ( admin: Admin, page: Page ) => {
  */
 export const disableExperiments = async ( admin: Admin, page: Page ) => {
 	await visitSettingsPage( admin );
-	await page.locator( '#ai_experiments_enabled' ).uncheck();
-	await page.locator( '#submit' ).click();
 
-	// Ensure the save was successful.
+	// Wait for page to fully load before finding button
+	await page.waitForSelector( 'button.ai-experiments__toggle-button', {
+		timeout: 10000,
+	} );
+
+	// Click the disable button if it exists. Otherwise we assume the experiments are already disabled.
+	const button = page.locator( 'button.ai-experiments__toggle-button', {
+		hasText: 'Disable Experiments',
+	} );
+	if ( ( await button.count() ) === 0 ) {
+		return;
+	}
+	await button.click();
+
+	// Wait for page reload and ensure the save was successful.
+	await page.waitForLoadState( 'load' );
 	await expect(
 		page.locator( '.wrap .notice-success', {
 			hasText: 'Settings saved',
@@ -79,10 +92,23 @@ export const disableExperiments = async ( admin: Admin, page: Page ) => {
  */
 export const enableExperiments = async ( admin: Admin, page: Page ) => {
 	await visitSettingsPage( admin );
-	await page.locator( '#ai_experiments_enabled' ).check();
-	await page.locator( '#submit' ).click();
 
-	// Ensure the save was successful.
+	// Wait for page to fully load before finding button
+	await page.waitForSelector( 'button.ai-experiments__toggle-button', {
+		timeout: 10000,
+	} );
+
+	// Click the enable button if it exists. Otherwise we assume the experiments are already enabled.
+	const button = page.locator( 'button.ai-experiments__toggle-button', {
+		hasText: 'Enable Experiments',
+	} );
+	if ( ( await button.count() ) === 0 ) {
+		return;
+	}
+	await button.click();
+
+	// Wait for page reload and ensure the save was successful.
+	await page.waitForLoadState( 'load' );
 	await expect(
 		page.locator( '.wrap .notice-success', {
 			hasText: 'Settings saved',