diff --git a/frontend/src/lib/components/DiffEditor.svelte b/frontend/src/lib/components/DiffEditor.svelte
index 4015a7a9ac..277cc66bda 100644
--- a/frontend/src/lib/components/DiffEditor.svelte
+++ b/frontend/src/lib/components/DiffEditor.svelte
@@ -169,12 +169,6 @@
 		open = false
 	}
 
-	function onWidthChange(editorWidth: number) {
-		diffEditor?.updateOptions({
-			renderSideBySide: inlineDiff ? false : editorWidth >= SIDE_BY_SIDE_MIN_WIDTH
-		})
-	}
-
 	$effect(() => {
 		if (open && diffDivEl) {
 			loadDiffEditor()
@@ -182,7 +176,11 @@
 	})
 
 	$effect(() => {
-		onWidthChange(editorWidth)
+		if (diffEditor) {
+			diffEditor.updateOptions({
+				renderSideBySide: inlineDiff ? false : editorWidth >= SIDE_BY_SIDE_MIN_WIDTH
+			})
+		}
 	})
 
 	onMount(() => {
diff --git a/frontend/src/lib/components/InstanceSetting.svelte b/frontend/src/lib/components/InstanceSetting.svelte
index b493469139..1780bc1d80 100644
--- a/frontend/src/lib/components/InstanceSetting.svelte
+++ b/frontend/src/lib/components/InstanceSetting.svelte
@@ -208,7 +208,9 @@
 			ee_only={setting.ee_only}
 			settingKey={setting.key}
 		>
-			<ToggleButtonGroup bind:selected={$values[setting.key]}>
+			<ToggleButtonGroup
+				bind:selected={() => $values[setting.key] ?? 'default', (v) => ($values[setting.key] = v)}
+			>
 				{#snippet children({ item: toggleButton })}
 					{#each setting.select_items ?? [] as item}
 						<ToggleButton
@@ -548,7 +550,7 @@
 								<Toggle
 									disabled
 									id="metrics_enabled"
-									bind:checked={$values[setting.key].logs_enabled}
+									bind:checked={$values[setting.key].metrics_enabled}
 									options={{ right: 'Metrics (coming soon)' }}
 								/>
 							</div>
diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index 4753c532b4..9c8e809676 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/frontend/src/lib/components/InstanceSettings.svelte
@@ -30,7 +30,6 @@
 		onNavigateToTab?: (category: string) => void
 		quickSetup?: boolean
 		yamlMode?: boolean
-		diffMode?: boolean
 		hasUnsavedChanges?: boolean
 	}
 
@@ -42,7 +41,6 @@
 		onNavigateToTab,
 		quickSetup = false,
 		yamlMode = $bindable(false),
-		diffMode = $bindable(false),
 		hasUnsavedChanges = $bindable(false)
 	}: Props = $props()
 
@@ -86,7 +84,8 @@
 	function applyFormDefaults(vals: Record<string, any>): void {
 		for (const [key, defaultVal] of Object.entries(formDefaults)) {
 			if (vals[key] == undefined) {
-				vals[key] = typeof defaultVal === 'object' ? JSON.parse(JSON.stringify(defaultVal)) : defaultVal
+				vals[key] =
+					typeof defaultVal === 'object' ? JSON.parse(JSON.stringify(defaultVal)) : defaultVal
 			}
 		}
 	}
@@ -111,6 +110,19 @@
 		}
 		applyFormDefaults(nvalues)
 
+		// Apply select/select_python defaults so initialValues matches what InstanceSetting's $effect does
+		for (const category of settingsKeys) {
+			for (const s of settings[category]) {
+				if (
+					(s.fieldType === 'select' || s.fieldType === 'select_python') &&
+					nvalues[s.key] == undefined &&
+					s.defaultValue
+				) {
+					nvalues[s.key] = s.defaultValue()
+				}
+			}
+		}
+
 		// Snapshot initialValues before applying the base_url fallback so that
 		// the dirty-check detects the unsaved default and enables the Save button.
 		initialValues = JSON.parse(JSON.stringify(nvalues))
@@ -201,6 +213,10 @@
 			initialRequirePreexistingUserForOauth = requirePreexistingUserForOauth
 			baseUrlIsFallback = false
 
+			if (yamlMode) {
+				yamlCodeInitial = yamlCode
+			}
+
 			if (licenseKeySet) {
 				setLicense()
 			}
@@ -333,11 +349,20 @@
 		if (value === false) return undefined
 		if (typeof value === 'string' && value.trim() === '') return undefined
 		if (Array.isArray(value) && value.length === 0) return undefined
-		if (typeof value === 'object' && Object.keys(value).length === 0) return undefined
+		if (typeof value === 'object' && !Array.isArray(value)) {
+			// Recursively normalize: if all values in the object normalize to undefined,
+			// the object itself is effectively empty (e.g. {smtp_tls_implicit: false} ≡ {})
+			const hasNonEmpty = Object.values(value).some((v) => normalizeValue(v) !== undefined)
+			if (!hasNonEmpty) return undefined
+		}
 
 		// Key-specific defaults: these values are equivalent to "not set"
 		if (key === 'secret_backend') {
-			if (typeof value === 'object' && value?.type === 'Database' && Object.keys(value).length === 1) {
+			if (
+				typeof value === 'object' &&
+				value?.type === 'Database' &&
+				Object.keys(value).length === 1
+			) {
 				return undefined
 			}
 		}
@@ -658,7 +683,12 @@
 			normalize: true,
 			mask: !showSensitive
 		})
-		yamlCodeInitial = yamlCode
+		yamlCodeInitial = buildSettingsYaml(
+			initialValues,
+			initialOauths,
+			initialRequirePreexistingUserForOauth,
+			{ normalize: true, mask: !showSensitive }
+		)
 		yamlEditor?.setCode(yamlCode)
 		yamlError = ''
 	}
@@ -797,40 +827,25 @@
 </script>
 
 <div class="pb-12">
-	{#if diffMode}
-		<div class="w-full h-[calc(100vh-8rem)]">
-			{#await import('$lib/components/DiffEditor.svelte')}
-				<Loader2 class="animate-spin m-4" />
-			{:then Module}
-				{@const diff = buildFullDiff()}
-				<Module.default
-					open={true}
-					className="!h-full"
-					defaultLang="yaml"
-					defaultOriginal={diff.original}
-					defaultModified={diff.modified}
-					readOnly
-					inlineDiff={true}
+	{#if yamlMode}
+		<div class="flex flex-row justify-between">
+			<p class="text-2xs text-tertiary">
+				Use this YAML to manage instance settings as code.
+				<a
+					href="https://www.windmill.dev/docs/advanced/instance_settings#kubernetes-operator"
+					target="_blank"
+					rel="noopener noreferrer">Learn more <ExternalLink size={12} class="inline-block" /></a
+				>
+			</p>
+			<!-- svelte-ignore a11y_label_has_associated_control -->
+			<div class="flex items-center justify-end gap-4 mb-2">
+				<Toggle
+					checked={showSensitive}
+					on:change={(e) => handleShowSensitiveToggle(e.detail)}
+					options={{ right: 'Show sensitive values' }}
+					size="xs"
 				/>
-			{/await}
-		</div>
-	{:else if yamlMode}
-		<p class="text-2xs text-tertiary mb-2">
-			Use this YAML to manage instance settings as code.
-			<a
-				href="https://www.windmill.dev/docs/advanced/instance_settings#kubernetes-operator"
-				target="_blank"
-				rel="noopener noreferrer"
-			>Learn more <ExternalLink size={12} class="inline-block" /></a>
-		</p>
-		<!-- svelte-ignore a11y_label_has_associated_control -->
-		<div class="flex items-center justify-end gap-4 mb-2">
-			<Toggle
-				checked={showSensitive}
-				on:change={(e) => handleShowSensitiveToggle(e.detail)}
-				options={{ right: 'Show sensitive values' }}
-				size="xs"
-			/>
+			</div>
 		</div>
 		<div class="border rounded w-full h-[calc(100vh-12rem)]">
 			{#await import('$lib/components/SimpleEditor.svelte')}
@@ -887,11 +902,7 @@
 				link="https://www.windmill.dev/docs/advanced/imports"
 			/>
 			{#if !$enterpriseLicense}
-				<Alert
-					type="info"
-					title="Private registries configuration is an EE feature"
-					class="mb-2"
-				/>
+				<Alert type="info" title="Private registries configuration is an EE feature" class="mb-2" />
 			{/if}
 		{:else if category == 'Alerts'}
 			<SettingsPageHeader
@@ -1026,7 +1037,9 @@
 						{values}
 						{version}
 						{oauths}
-						warning={setting.key === 'base_url' && baseUrlIsFallback ? 'Auto-detected from browser — not yet saved' : undefined}
+						warning={setting.key === 'base_url' && baseUrlIsFallback
+							? 'Auto-detected from browser — not yet saved'
+							: undefined}
 					/>
 				{/if}
 				{#if quickSetup && category === 'Core' && setting.key === 'base_url'}
@@ -1076,4 +1089,5 @@
 			/>
 		{/if}
 	{/snippet}
+
 </div>
diff --git a/frontend/src/lib/components/SaveButton.svelte b/frontend/src/lib/components/SaveButton.svelte
new file mode 100644
index 0000000000..7c89c2e196
--- /dev/null
+++ b/frontend/src/lib/components/SaveButton.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { Button } from './common'
+	import { type ButtonType } from './common/button/model'
+	import { Save, CheckCircle2, AlertCircle, Loader2 } from 'lucide-svelte'
+	import { fly } from 'svelte/transition'
+
+	let {
+		onSave,
+		disabled = false,
+		label = 'Save settings',
+		size = undefined,
+		unifiedSize = undefined,
+		variant = 'accent'
+	}: {
+		onSave: () => void | Promise<void>
+		disabled?: boolean
+		label?: string
+		size?: ButtonType.Size | undefined
+		unifiedSize?: ButtonType.UnifiedSize | undefined
+		variant?: ButtonType.Variant
+	} = $props()
+
+	let isSaving = $state(false)
+	let saveStatus: 'success' | 'error' | null = $state(null)
+	let statusTimeout: ReturnType<typeof setTimeout> | null = null
+
+	function clearStatusTimeout() {
+		if (statusTimeout !== null) {
+			clearTimeout(statusTimeout)
+			statusTimeout = null
+		}
+	}
+
+	function handleClick() {
+		if (isSaving) return
+
+		isSaving = true
+		saveStatus = null
+		clearStatusTimeout()
+
+		Promise.resolve(onSave())
+			.then(() => {
+				saveStatus = 'success'
+				statusTimeout = setTimeout(() => {
+					saveStatus = null
+					statusTimeout = null
+				}, 1500)
+			})
+			.catch((error) => {
+				console.error('Save failed:', error)
+				saveStatus = 'error'
+				statusTimeout = setTimeout(() => {
+					saveStatus = null
+					statusTimeout = null
+				}, 3000)
+			})
+			.finally(() => {
+				isSaving = false
+			})
+	}
+
+	$effect(() => {
+		return () => {
+			clearStatusTimeout()
+		}
+	})
+</script>
+
+<div class="relative overflow-hidden rounded-md">
+	<Button
+		{variant}
+		{size}
+		{unifiedSize}
+		startIcon={{
+			icon: isSaving ? Loader2 : Save,
+			classes: isSaving ? 'animate-spin' : ''
+		}}
+		disabled={disabled || isSaving}
+		onClick={handleClick}
+	>
+		{isSaving ? 'Saving...' : label}
+	</Button>
+
+	{#if saveStatus === 'success'}
+		<div
+			class="absolute inset-0 flex items-center justify-center bg-green-200 dark:bg-green-800 rounded-md"
+			transition:fly={{ y: -10, duration: 300 }}
+		>
+			<CheckCircle2 class="w-5 h-5 text-green-700 dark:text-green-300" />
+		</div>
+	{:else if saveStatus === 'error'}
+		<div
+			class="absolute inset-0 flex items-center justify-center bg-red-500 dark:bg-red-700 rounded-md"
+			transition:fly={{ y: -10, duration: 300 }}
+		>
+			<AlertCircle class="w-5 h-5 text-white" />
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/SuperadminSettings.svelte b/frontend/src/lib/components/SuperadminSettings.svelte
index 1600de6e0a..f9b446b04e 100644
--- a/frontend/src/lib/components/SuperadminSettings.svelte
+++ b/frontend/src/lib/components/SuperadminSettings.svelte
@@ -5,7 +5,9 @@
 	import MeltTooltip from './meltComponents/Tooltip.svelte'
 	import Toggle from './Toggle.svelte'
 	import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte'
-	import { X, FileDiff, Save, Loader2 } from 'lucide-svelte'
+	import SaveButton from './SaveButton.svelte'
+	import { X, FileDiff, Loader2 } from 'lucide-svelte'
+	import { fade } from 'svelte/transition'
 	import { SettingsService } from '$lib/gen'
 	import { isCloudHosted } from '$lib/cloud'
 
@@ -16,14 +18,14 @@
 	let { disableChatOffset = false }: Props = $props()
 
 	let drawer: Drawer | undefined = $state()
+	let diffDrawer: Drawer | undefined = $state()
 	let innerComponent: SuperadminSettingsInner | undefined = $state()
 	let uptodateVersion: string | undefined = $state(undefined)
 	let yamlMode = $state(false)
-	let diffMode = $state(false)
 	let hasUnsavedChanges = $state(false)
-	let pendingSave = $state(false)
-	let isSaving = $state(false)
 	let showCloseConfirmModal = $state(false)
+	let diffData: { original: string; modified: string } = $state({ original: '', modified: '' })
+	let inlineDiff = $state(false)
 
 	async function loadUptodate() {
 		try {
@@ -65,39 +67,24 @@
 		bypassCloseCheck = false
 	}
 
-	async function handleSave() {
-		if (!pendingSave) {
-			if (!innerComponent?.syncBeforeDiff()) return
-			diffMode = true
-			pendingSave = true
-			return
-		}
-		isSaving = true
-		try {
-			await innerComponent?.saveSettings()
-			diffMode = false
-			pendingSave = false
-		} catch (e) {
-			console.error('Save failed:', e)
-		} finally {
-			isSaving = false
-		}
+	async function handleSave(): Promise<void> {
+		if (!innerComponent?.syncBeforeDiff()) throw new Error('YAML sync failed')
+		await innerComponent?.saveSettings()
+	}
+
+	async function handleSaveAndCloseDiff(): Promise<void> {
+		await handleSave()
+		diffDrawer?.closeDrawer()
 	}
 
 	function handleDiscard() {
 		innerComponent?.discardAll()
-		diffMode = false
-		pendingSave = false
 	}
 
-	function handleShowDiff() {
-		if (!diffMode) {
-			if (!innerComponent?.syncBeforeDiff()) return
-		}
-		diffMode = !diffMode
-		if (!diffMode) {
-			pendingSave = false
-		}
+	function handleReviewChanges() {
+		if (!innerComponent?.syncBeforeDiff()) return
+		diffData = innerComponent?.buildFullDiff() ?? { original: '', modified: '' }
+		diffDrawer?.openDrawer()
 	}
 </script>
 
@@ -124,41 +111,32 @@
 		{/snippet}
 		{#snippet actions()}
 			<div class="flex items-center gap-2">
+				{#if hasUnsavedChanges}
+					<div transition:fade={{ duration: 150 }}>
+						<Button
+							variant="default"
+							size="xs"
+							startIcon={{ icon: X }}
+							onClick={handleDiscard}
+						>
+							Discard
+						</Button>
+					</div>
+				{/if}
 				<Button
-					variant="default"
-					size="xs"
-					startIcon={{ icon: X }}
-					onClick={handleDiscard}
-					disabled={!hasUnsavedChanges || isSaving}
-				>
-					Discard
-				</Button>
-				<Button
-					variant={diffMode ? 'accent' : 'default'}
+					variant="accent"
 					size="xs"
 					startIcon={{ icon: FileDiff }}
-					onClick={handleShowDiff}
+					onClick={handleReviewChanges}
 					disabled={!hasUnsavedChanges}
 				>
-					{diffMode ? 'Hide diff' : 'Show diff'}
+					Review changes
 				</Button>
 				<Toggle
 					bind:checked={yamlMode}
 					options={{ right: 'YAML' }}
 					size="sm"
 				/>
-				<Button
-					variant="accent"
-					size="xs"
-					startIcon={{
-						icon: isSaving ? Loader2 : Save,
-						classes: isSaving ? 'animate-spin' : ''
-					}}
-					disabled={!hasUnsavedChanges || isSaving}
-					onClick={handleSave}
-				>
-					{isSaving ? 'Saving...' : pendingSave ? 'Confirm & Save' : 'Save settings'}
-				</Button>
 			</div>
 		{/snippet}
 		<SuperadminSettingsInner
@@ -166,12 +144,40 @@
 			closeDrawer={handleClose}
 			showHeaderInfo={false}
 			bind:yamlMode
-			bind:diffMode
 			bind:hasUnsavedChanges
 		/>
 	</DrawerContent>
 </Drawer>
 
+<Drawer bind:this={diffDrawer} size="1200px">
+	<DrawerContent title="Review changes" on:close={() => diffDrawer?.closeDrawer()}>
+		{#snippet actions()}
+			<Toggle
+				bind:checked={inlineDiff}
+				options={{ right: 'Unified' }}
+				size="xs"
+			/>
+			<SaveButton onSave={handleSaveAndCloseDiff} disabled={!hasUnsavedChanges} size="xs" />
+		{/snippet}
+		<!-- DiffEditor reacts to inlineDiff changes via $effect — no {#key} needed -->
+		<div class="h-full">
+			{#await import('$lib/components/DiffEditor.svelte')}
+				<Loader2 class="animate-spin m-4" />
+			{:then Module}
+				<Module.default
+					open={true}
+					className="!h-full"
+					defaultLang="yaml"
+					defaultOriginal={diffData.original}
+					defaultModified={diffData.modified}
+					readOnly
+					{inlineDiff}
+				/>
+			{/await}
+		</div>
+	</DrawerContent>
+</Drawer>
+
 {#if showCloseConfirmModal}
 	<ConfirmationModal
 		open={showCloseConfirmModal}
@@ -183,8 +189,6 @@
 		on:confirmed={() => {
 			innerComponent?.discardAll()
 			showCloseConfirmModal = false
-			diffMode = false
-			pendingSave = false
 			closeDrawer()
 		}}
 	>
@@ -192,14 +196,14 @@
 			<span>You have unsaved changes. Are you sure you want to discard them and close?</span>
 			<Button
 				variant="default"
-				size="xs"
+				size="sm"
 				startIcon={{ icon: FileDiff }}
 				onClick={() => {
 					showCloseConfirmModal = false
-					diffMode = true
+					handleReviewChanges()
 				}}
 			>
-				Show diff
+				Review changes
 			</Button>
 		</div>
 	</ConfirmationModal>
diff --git a/frontend/src/lib/components/SuperadminSettingsInner.svelte b/frontend/src/lib/components/SuperadminSettingsInner.svelte
index 22883567bb..4d6b0e33f1 100644
--- a/frontend/src/lib/components/SuperadminSettingsInner.svelte
+++ b/frontend/src/lib/components/SuperadminSettingsInner.svelte
@@ -46,7 +46,6 @@
 		closeDrawer,
 		showHeaderInfo = true,
 		yamlMode = $bindable(false),
-		diffMode = $bindable(false),
 		hasUnsavedChanges = $bindable(false)
 	} = $props()
 
@@ -142,6 +141,9 @@
 		return instanceSettings?.syncBeforeDiff() ?? true
 	}
 
+	export function buildFullDiff(): { original: string; modified: string } {
+		return instanceSettings?.buildFullDiff() ?? { original: '', modified: '' }
+	}
 	// --- Settings search ---
 	const searchableItems = buildSearchableSettingItems()
 
@@ -203,7 +205,7 @@
 		{/if}
 	{/if}
 	<div class="{showHeaderInfo ? 'pt-4' : ''} flex grow min-h-0">
-		{#if !yamlMode && !diffMode}
+		{#if !yamlMode}
 			<!-- Sidebar Navigation -->
 			<div class="w-52 shrink-0 h-full overflow-auto p-4 bg-surface flex flex-col">
 				<SettingsSearchInput {searchableItems} onSelect={handleSearchSelect} class="mb-3" />
@@ -231,7 +233,7 @@
 		<div class="flex-1 min-w-0 h-full">
 			<div class="h-full overflow-auto bg-surface">
 				<div class="h-fit px-8 py-4">
-					{#if tab === 'users' && !yamlMode && !diffMode}
+					{#if tab === 'users' && !yamlMode}
 						<div class="h-full">
 							{#if !automateUsernameCreation && !isCloudHosted()}
 								<div class="mb-4">
@@ -507,7 +509,6 @@
 							bind:this={instanceSettings}
 							hideTabs
 							bind:yamlMode
-							bind:diffMode
 							bind:hasUnsavedChanges
 							tab={instanceSettingsCategory}
 							{authSubTab}
@@ -543,4 +544,3 @@
 		<span>Are you sure you want to remove <b>{deleteUserEmail}</b>?</span>
 	</div>
 </ConfirmationModal>
-
diff --git a/frontend/src/lib/components/instanceSettings.ts b/frontend/src/lib/components/instanceSettings.ts
index 287d7aa9a2..b336b11fca 100644
--- a/frontend/src/lib/components/instanceSettings.ts
+++ b/frontend/src/lib/components/instanceSettings.ts
@@ -181,7 +181,7 @@ export const settings: Record<string, Setting[]> = {
 	],
 	Jobs: [
 		{
-			label: 'Job Isolation',
+			label: 'Job isolation',
 			key: 'job_isolation',
 			fieldType: 'select',
 			description:
diff --git a/frontend/src/lib/components/workspaceSettings/SettingsFooter.svelte b/frontend/src/lib/components/workspaceSettings/SettingsFooter.svelte
index afff676149..bebd117dee 100644
--- a/frontend/src/lib/components/workspaceSettings/SettingsFooter.svelte
+++ b/frontend/src/lib/components/workspaceSettings/SettingsFooter.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Button } from '../common'
-	import { Save, X, CheckCircle2, AlertCircle, Loader2 } from 'lucide-svelte'
-	import { fade, fly } from 'svelte/transition'
+	import SaveButton from '../SaveButton.svelte'
+	import { X } from 'lucide-svelte'
+	import { fade } from 'svelte/transition'
 	import { twMerge } from 'tailwind-merge'
 
 	let {
@@ -21,52 +22,6 @@
 		inline?: boolean
 		class?: string
 	} = $props()
-
-	let saveStatus: 'success' | 'error' | null = $state(null)
-	let isSaving = $state(false)
-	let statusTimeout: ReturnType<typeof setTimeout> | null = null
-
-	function clearStatusTimeout() {
-		if (statusTimeout !== null) {
-			clearTimeout(statusTimeout)
-			statusTimeout = null
-		}
-	}
-
-	async function handleSave() {
-		if (isSaving) return
-
-		isSaving = true
-		saveStatus = null
-		clearStatusTimeout() // Clear any existing timeout
-
-		try {
-			await onSave()
-			saveStatus = 'success'
-			// Auto-hide success status after 3 seconds
-			statusTimeout = setTimeout(() => {
-				saveStatus = null
-				statusTimeout = null
-			}, 3000)
-		} catch (error) {
-			console.error('Save failed:', error)
-			saveStatus = 'error'
-			// Auto-hide error status after 5 seconds (longer for errors)
-			statusTimeout = setTimeout(() => {
-				saveStatus = null
-				statusTimeout = null
-			}, 5000)
-		} finally {
-			isSaving = false
-		}
-	}
-
-	// Cleanup timeout on component unmount
-	$effect(() => {
-		return () => {
-			clearStatusTimeout()
-		}
-	})
 </script>
 
 <div
@@ -81,44 +36,18 @@
 						size="sm"
 						startIcon={{ icon: X }}
 						onClick={onDiscard}
-						disabled={isSaving}
 					>
 						Discard changes
 					</Button>
 				</div>
 			{/if}
 
-			<div class="relative">
-				<Button
-					variant="accent"
-					unifiedSize="md"
-					startIcon={{
-						icon: isSaving ? Loader2 : Save,
-						classes: isSaving ? 'animate-spin' : ''
-					}}
-					disabled={!hasUnsavedChanges || disabled || isSaving}
-					onClick={handleSave}
-				>
-					{isSaving ? 'Saving...' : saveLabel}
-				</Button>
-
-				<!-- Success icon overlay -->
-				{#if saveStatus === 'success'}
-					<div
-						class="absolute inset-0 flex items-center justify-center bg-green-200 dark:bg-green-800 rounded-md"
-						transition:fly={{ y: -10, duration: 300 }}
-					>
-						<CheckCircle2 class="w-5 h-5 text-green-700 dark:text-green-300" />
-					</div>
-				{:else if saveStatus === 'error'}
-					<div
-						class="absolute inset-0 flex items-center justify-center bg-red-500 dark:bg-red-700 rounded-md"
-						transition:fly={{ y: -10, duration: 300 }}
-					>
-						<AlertCircle class="w-5 h-5 text-white" />
-					</div>
-				{/if}
-			</div>
+			<SaveButton
+				{onSave}
+				disabled={!hasUnsavedChanges || disabled}
+				label={saveLabel}
+				unifiedSize="md"
+			/>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte
index 772480d0de..07b821fe04 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte
@@ -5,7 +5,6 @@
 	import InstanceSettings from '$lib/components/InstanceSettings.svelte'
 	import { Alert, Button } from '$lib/components/common'
 	import SidebarNavigation from '$lib/components/common/sidebar/SidebarNavigation.svelte'
-	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 	import {
 		setupNavigationGroups,
 		tabToCategoryMap,
@@ -25,6 +24,7 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import SettingsPageHeader from '$lib/components/settings/SettingsPageHeader.svelte'
 	import SettingCard from '$lib/components/instanceSettings/SettingCard.svelte'
+	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 
 	const settingsSteps = [
 		{ id: 'Core', label: 'Core' },
@@ -148,19 +148,9 @@
 	let authSubTab: 'sso' | 'oauth' | 'scim' = $derived(tabToAuthSubTab[fullTab] ?? 'sso')
 	let yamlMode = $state(false)
 
-	// --- Unsaved changes detection (full mode) ---
-	let pendingTab: string | undefined = $state(undefined)
-	let showUnsavedChangesModal = $state(false)
-
 	function handleNavigate(newTab: string) {
 		if (newTab === fullTab) return
-		const currentCategory = tabToCategoryMap[fullTab]
-		if (currentCategory && instanceSettings?.isDirty(currentCategory)) {
-			pendingTab = newTab
-			showUnsavedChangesModal = true
-		} else {
-			fullTab = newTab
-		}
+		fullTab = newTab
 	}
 
 	// --- Settings search (full mode) ---
@@ -558,33 +548,6 @@
 	</div>
 </CenteredModal>
 
-{#if showUnsavedChangesModal}
-	<ConfirmationModal
-		open={showUnsavedChangesModal}
-		title="Unsaved changes detected"
-		confirmationText="Discard changes"
-		on:canceled={() => {
-			showUnsavedChangesModal = false
-			pendingTab = undefined
-		}}
-		on:confirmed={() => {
-			if (pendingTab !== undefined) {
-				const currentCategory = tabToCategoryMap[fullTab]
-				if (currentCategory) {
-					instanceSettings?.discardCategory(currentCategory)
-				}
-				fullTab = pendingTab
-			}
-			showUnsavedChangesModal = false
-			pendingTab = undefined
-		}}
-	>
-		<div class="flex flex-col w-full space-y-4">
-			<span>You have unsaved changes. Are you sure you want to discard them?</span>
-		</div>
-	</ConfirmationModal>
-{/if}
-
 {#if showLicenseKeyWarning}
 	<ConfirmationModal
 		open={showLicenseKeyWarning}
@@ -603,7 +566,8 @@
 	>
 		<div class="flex flex-col w-full space-y-4">
 			<span>
-				You are running the Enterprise Edition image but have not entered a license key. A valid license key is required to use EE features. Are you sure you want to continue without one?
+				You are running the Enterprise Edition image but have not entered a license key. A valid
+				license key is required to use EE features. Are you sure you want to continue without one?
 			</span>
 		</div>
 	</ConfirmationModal>