diff --git a/docs/screenshots/settings-appearance.png b/docs/screenshots/settings-appearance.png
new file mode 100644
index 00000000..b769fe50
Binary files /dev/null and b/docs/screenshots/settings-appearance.png differ
diff --git a/docs/screenshots/settings-editor.png b/docs/screenshots/settings-editor.png
new file mode 100644
index 00000000..5cbea371
Binary files /dev/null and b/docs/screenshots/settings-editor.png differ
diff --git a/docs/screenshots/settings-toolbars.png b/docs/screenshots/settings-toolbars.png
new file mode 100644
index 00000000..4705486e
Binary files /dev/null and b/docs/screenshots/settings-toolbars.png differ
diff --git a/scripts/toolbarCustomizationWiring.test.ts b/scripts/toolbarCustomizationWiring.test.ts
index 1af4c54a..f6740bd8 100644
--- a/scripts/toolbarCustomizationWiring.test.ts
+++ b/scripts/toolbarCustomizationWiring.test.ts
@@ -3,12 +3,15 @@ import { readFileSync } from 'node:fs';
 import { test } from 'node:test';
 
 import { getSupportedLanguages, translations, type LanguageCode } from '../src/lib/utils/i18n.js';
+import { EDITOR_TOOLBAR_TOOLS } from '../src/lib/utils/editorToolbar.js';
+import { settingsRedesignTranslationKeys } from '../src/lib/utils/settingsRedesignTranslations.js';
 
 const markdownViewer = readFileSync('src/lib/MarkdownViewer.svelte', 'utf8');
 const settingsComponent = readFileSync('src/lib/components/Settings.svelte', 'utf8');
 const settingsStore = readFileSync('src/lib/stores/settings.svelte.ts', 'utf8');
 const titleBar = readFileSync('src/lib/components/TitleBar.svelte', 'utf8');
 const toastComponent = readFileSync('src/lib/components/Toast.svelte', 'utf8');
+const globalStyles = readFileSync('src/styles.css', 'utf8');
 
 function getDirectTranslation(lang: LanguageCode, key: string): string | undefined {
 	let current: unknown = translations[lang];
@@ -93,6 +96,45 @@ test('toolbar settings use collapsed accordions for application and editor toolb
 	}
 	assert.match(settingsComponent, /\.toolbar-settings\[open\]\s+\.toolbar-settings-chevron/);
 	assert.match(settingsComponent, /\.toolbar-settings-summary::-webkit-details-marker/);
+	assert.doesNotMatch(settingsComponent, /class="toolbar-settings-header"/);
+	assert.match(settingsComponent, /\.toolbar-settings-reset\s*\{[\s\S]*?position:\s*absolute/);
+});
+
+test('appearance uses the shared settings group and native controls', () => {
+	const appearanceBlock = settingsComponent.match(
+		/{:else if activeCategory === 'appearance'}([\s\S]*?){:else if activeCategory === 'toolbars'}/,
+	);
+	assert.ok(appearanceBlock);
+	assert.match(appearanceBlock[1], /<div class="settings-group">/);
+	assert.match(appearanceBlock[1], /<div class="settings-group-header">/);
+	assert.match(appearanceBlock[1], /<select id="appearance-theme"/);
+	assert.match(appearanceBlock[1], /<select id="appearance-highlight-color"/);
+	assert.doesNotMatch(appearanceBlock[1], /settings-section|appearance-group|theme-segmented|custom-dropdown/);
+	assert.doesNotMatch(settingsComponent, /\.settings-section|\.appearance-group|\.theme-segmented|\.custom-dropdown/);
+});
+
+test('settings and menus share the Markpad workbench visual system', () => {
+	for (const token of [
+		'--workbench-surface-base',
+		'--workbench-surface-raised',
+		'--workbench-border',
+		'--workbench-panel-radius',
+		'--workbench-shadow',
+	]) {
+		assert.match(globalStyles, new RegExp(token));
+		assert.match(`${settingsComponent}\n${titleBar}`, new RegExp(token));
+	}
+	assert.match(settingsComponent, /\.toolbar-settings-list\s*\{[\s\S]*?gap:\s*0;[\s\S]*?overflow:\s*hidden;/);
+	assert.match(settingsComponent, /\.toolbar-tool-row:last-child\s*\{[\s\S]*?border-bottom:\s*0;/);
+});
+
+test('titlebar overflow menu preserves translated labels and aligns shortcuts', () => {
+	assert.match(titleBar, /\.title-actions\.show-dropdown\s*\{[\s\S]*?width:\s*min\(278px, calc\(100vw - 16px\)\)/);
+	assert.match(titleBar, /grid-template-columns:\s*16px minmax\(0, 1fr\) max-content/);
+	const overflowLabelRule = titleBar.match(/\.title-actions\.show-dropdown \.action-label\s*\{([^}]*)\}/);
+	assert.ok(overflowLabelRule);
+	assert.match(overflowLabelRule[1], /text-overflow:\s*clip/);
+	assert.doesNotMatch(overflowLabelRule[1], /text-overflow:\s*ellipsis/);
 });
 
 test('interactive button labels are directly translated for every supported language', () => {
@@ -123,6 +165,27 @@ test('interactive button labels are directly translated for every supported lang
 	assert.doesNotMatch(toastComponent, /aria-label="Close"/);
 });
 
+test('every settings translation is available directly in every supported language', () => {
+	const staticKeys = Array.from(
+		settingsComponent.matchAll(/(?:^|[^\w.])t\('((?:settings|menu|tooltip|common)\.[^']+)'/gm),
+		(match) => match[1]
+	);
+	const settingsKeys = new Set([
+		...staticKeys,
+		...settingsRedesignTranslationKeys,
+		...EDITOR_TOOLBAR_TOOLS.map((tool) => tool.nameKey),
+		...['default', 'yellow', 'orange', 'red', 'pink', 'purple', 'blue', 'cyan', 'green'].map((color) => `colors.${color}`),
+		'tooltip.showTableOfContents'
+	]);
+	const missing = getSupportedLanguages().flatMap(({ code }) =>
+		Array.from(settingsKeys)
+			.filter((key) => getDirectTranslation(code, key) === undefined)
+			.map((key) => `${code}:${key}`)
+	);
+
+	assert.deepEqual(missing, []);
+});
+
 test('top toolbar overflow no longer includes Open file location action', () => {
 	assert.doesNotMatch(titleBar, /list\.push\('open_loc'\)/);
 });
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 799f1ba7..8227f8d2 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -22,7 +22,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = ["protocol-asset"] }
+tauri = { version = "2", features = ["protocol-asset", "macos-private-api"] }
 tauri-plugin-opener = "2"
 tauri-plugin-dialog = "2"
 tauri-plugin-single-instance = "2"
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 4fe23191..5e4efcc1 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -21,7 +21,8 @@
     "core:window:allow-show",
     "core:window:allow-hide",
     "core:window:allow-destroy",
+    "core:window:allow-set-effects",
     "updater:default",
     "process:default"
   ]
-}
\ No newline at end of file
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 542b3255..55400ee0 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -997,6 +997,15 @@ pub fn run() {
             .shadow(false)
             .center();
 
+            // Keep the main host window alpha-capable on every supported platform.
+            // Solid mode is painted by CSS, so changing surface mode does not require
+            // recreating the native window. The installer remains fully opaque.
+            if !is_installer_mode {
+                window_builder = window_builder
+                    .transparent(true)
+                    .background_color(tauri::window::Color(0, 0, 0, 0));
+            }
+
             #[cfg(target_os = "macos")]
             {
                 window_builder = window_builder
@@ -1124,22 +1133,23 @@ pub fn run() {
 
             let window = app.get_webview_window(label).unwrap();
 
-            let bg_color = match theme_pref.as_str() {
-                "dark" => Some(tauri::window::Color(24, 24, 24, 255)),
-                "light" => Some(tauri::window::Color(253, 253, 253, 255)),
-                _ => {
-                    if let Ok(t) = window.theme() {
-                        match t {
-                            tauri::Theme::Dark => Some(tauri::window::Color(24, 24, 24, 255)),
-                            _ => Some(tauri::window::Color(253, 253, 253, 255)),
+            if is_installer_mode {
+                let bg_color = match theme_pref.as_str() {
+                    "dark" => Some(tauri::window::Color(24, 24, 24, 255)),
+                    "light" => Some(tauri::window::Color(253, 253, 253, 255)),
+                    _ => {
+                        if let Ok(t) = window.theme() {
+                            match t {
+                                tauri::Theme::Dark => Some(tauri::window::Color(24, 24, 24, 255)),
+                                _ => Some(tauri::window::Color(253, 253, 253, 255)),
+                            }
+                        } else {
+                            Some(tauri::window::Color(253, 253, 253, 255))
                         }
-                    } else {
-                        Some(tauri::window::Color(253, 253, 253, 255))
                     }
-                }
-            };
-
-            let _ = window.set_background_color(bg_color);
+                };
+                let _ = window.set_background_color(bg_color);
+            }
 
             let _ = _window.set_shadow(true);
 
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 3c9c6b8a..f03e6959 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -10,6 +10,7 @@
     "frontendDist": "../build"
   },
   "app": {
+    "macOSPrivateApi": true,
     "windows": [],
     "security": {
       "csp": {
diff --git a/src/app.html b/src/app.html
index c03d6884..09d24af7 100644
--- a/src/app.html
+++ b/src/app.html
@@ -30,7 +30,7 @@
 </head>
 
 <body data-sveltekit-preload-data="hover">
-  <div id=app style="display: contents">%sveltekit.body%</div>
+  <div id="app">%sveltekit.body%</div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/lib/MarkdownViewer.svelte b/src/lib/MarkdownViewer.svelte
index 1d77a3c5..defa30ad 100644
--- a/src/lib/MarkdownViewer.svelte
+++ b/src/lib/MarkdownViewer.svelte
@@ -3434,11 +3434,11 @@ import { t } from './utils/i18n.js';
 	:root {
 		--animation: cubic-bezier(0.05, 0.95, 0.05, 0.95);
 		scroll-behavior: smooth !important;
-		background-color: var(--color-canvas-default);
+		background-color: transparent;
 	}
 
 	:global(body) {
-		background-color: var(--color-canvas-default);
+		background-color: transparent;
 		margin: 0;
 		padding: 0;
 		color: var(--color-fg-default);
diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
index bade4a16..e8dd4f9c 100644
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -2,9 +2,14 @@
 	import { invoke } from '@tauri-apps/api/core';
 	import { getVersion } from '@tauri-apps/api/app';
 	import { openUrl } from '@tauri-apps/plugin-opener';
-	import { settings, DEFAULT_FONTS, type OSType } from '../stores/settings.svelte.js';
+	import {
+		settings,
+		DEFAULT_FONTS,
+		type OSType,
+		type SettingsSurface,
+	} from '../stores/settings.svelte.js';
 	import { updateStore } from '../stores/update.svelte.js';
-	import { fade, scale, fly } from 'svelte/transition';
+	import { fade, scale } from 'svelte/transition';
 	import { t, getSupportedLanguages } from '../utils/i18n.js';
 	import type { LanguageCode } from '../utils/i18n.js';
 	import { getEditorToolbarTools } from '../utils/editorToolbar.js';
@@ -17,8 +22,9 @@
 		onclose,
 	} = $props<{ show?: boolean; theme?: string; onSetTheme?: (t: string) => void; onclose: () => void }>();
 
-	let activeCategory = $state<'editor' | 'preview' | 'appearance' | 'toolbars' | 'files'>('editor');
-	let highlightMenuOpen = $state(false);
+	type SettingsCategory = 'editor' | 'preview' | 'appearance' | 'toolbars' | 'files';
+	let activeCategory = $state<SettingsCategory>('editor');
+	let settingsSearch = $state('');
 	const highlightColors = [
 		{ value: 'default', color: 'var(--color-accent-fg)' },
 		{ value: 'yellow', color: '#ffd000' },
@@ -90,8 +96,8 @@
 	let titlebarToolbarDragOverId = $state<string | null>(null);
 	let titlebarToolbarDragState = $state<ToolbarSettingsDragState | null>(null);
 	let settingsModalFrame = $state<SettingsModalFrame>({
-		width: 560,
-		height: 420,
+		width: 960,
+		height: 700,
 		left: null,
 		top: null,
 	});
@@ -110,6 +116,9 @@
 	let settingsModalIsResizing = $state(false);
 	let editorToolbarSettingsTools = $derived(getEditorToolbarTools(settings.editorToolbarOrder));
 	let titlebarToolbarSettingsActions = $derived(getTitlebarToolbarActions(settings.titlebarToolbarOrder));
+	let windowBlurUnavailable = $derived(
+		settings.windowSurface === 'solid' || settings.windowOpacity >= 100 || settings.osType === 'linux',
+	);
 	let settingsModalFrameStyle = $derived.by(() => {
 		if (settingsModalFrame.left === null || settingsModalFrame.top === null) return '';
 		return [
@@ -120,6 +129,43 @@
 			`height: ${settingsModalFrame.height}px`,
 		].join('; ');
 	});
+	let settingsModalStyle = $derived(settingsModalFrameStyle);
+	let settingsSearchResults = $derived.by(() => {
+		const query = settingsSearch.trim().toLocaleLowerCase(settings.language);
+		if (!query) return [];
+		const items: { category: SettingsCategory; label: string }[] = [
+			{ category: 'editor', label: t('settings.editorSettings', settings.language) },
+			{ category: 'editor', label: `${t('settings.font', settings.language)} · ${t('settings.editor', settings.language)}` },
+			{ category: 'editor', label: `${t('settings.fontSize', settings.language)} · ${t('settings.editor', settings.language)}` },
+			{ category: 'editor', label: t('settings.wrapColumn', settings.language) },
+			{ category: 'editor', label: t('settings.wordWrap', settings.language) },
+			{ category: 'editor', label: t('settings.lineNumbers', settings.language) },
+			{ category: 'editor', label: t('settings.minimap', settings.language) },
+			{ category: 'editor', label: t('settings.vimMode', settings.language) },
+			{ category: 'editor', label: t('settings.statusBar', settings.language) },
+			{ category: 'editor', label: t('settings.wordCount', settings.language) },
+			{ category: 'editor', label: t('settings.showWhitespace', settings.language) },
+			{ category: 'preview', label: t('settings.previewSettings', settings.language) },
+			{ category: 'preview', label: `${t('settings.font', settings.language)} · ${t('settings.preview', settings.language)}` },
+			{ category: 'preview', label: `${t('settings.fontSize', settings.language)} · ${t('settings.preview', settings.language)}` },
+			{ category: 'appearance', label: t('settings.appearanceSettings', settings.language) },
+			{ category: 'appearance', label: t('settings.language', settings.language) },
+			{ category: 'appearance', label: t('settings.theme', settings.language) },
+			{ category: 'appearance', label: t('settings.windowSurface', settings.language) },
+			{ category: 'appearance', label: t('settings.surfaceOpacity', settings.language) },
+			{ category: 'appearance', label: t('settings.surfaceBlur', settings.language) },
+			{ category: 'appearance', label: t('settings.backdropDimming', settings.language) },
+			{ category: 'appearance', label: t('settings.showTabs', settings.language) },
+			{ category: 'appearance', label: t('settings.highlightColor', settings.language) },
+			{ category: 'toolbars', label: t('settings.toolbarsSettings', settings.language) },
+			{ category: 'toolbars', label: t('settings.editorToolbar', settings.language) },
+			{ category: 'toolbars', label: t('settings.applicationToolbar', settings.language) },
+			{ category: 'files', label: t('settings.fileSettings', settings.language) },
+			{ category: 'files', label: t('settings.autoSave', settings.language) },
+			{ category: 'files', label: t('settings.confirmBeforeSave', settings.language) },
+		];
+		return items.filter((item) => item.label.toLocaleLowerCase(settings.language).includes(query)).slice(0, 6);
+	});
 
 	type ToolbarSettingsDragState = {
 		id: string;
@@ -274,9 +320,9 @@
 		return {
 			viewportWidth,
 			viewportHeight,
-			minWidth: Math.min(520, viewportWidth * 0.9),
+			minWidth: Math.min(700, viewportWidth * 0.9),
 			maxWidth: viewportWidth * 0.9,
-			minHeight: Math.min(360, viewportHeight * 0.9),
+			minHeight: Math.min(520, viewportHeight * 0.9),
 			maxHeight: viewportHeight * 0.9,
 		};
 	}
@@ -498,12 +544,7 @@
 			loadVscodeThemes();
 			previousActiveElement = document.activeElement as HTMLElement;
 			setTimeout(() => {
-				const firstFocusable = settingsModal?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') as HTMLElement | null;
-				if (firstFocusable) {
-					firstFocusable.focus();
-				} else {
-					settingsModal?.focus();
-				}
+				settingsModal?.focus({ preventScroll: true });
 			}, 50);
 		} else if (previousActiveElement) {
 			previousActiveElement.focus();
@@ -560,16 +601,27 @@
 			console.error('Failed to delete theme:', e);
 		}
 	}
+
+	function selectSearchResult(category: SettingsCategory) {
+		activeCategory = category;
+		settingsSearch = '';
+	}
+
+	function resetAppearanceSection() {
+		settings.resetWindowAppearance();
+		onSetTheme?.('system');
+	}
 </script>
 
 {#if show}
 	<div class="settings-backdrop" transition:fade={{ duration: 150 }} role="presentation">
 		<div
 			class="settings-modal"
+			class:translucent={settings.windowSurface === 'translucent'}
 			class:dragging={settingsModalIsDragging}
 			class:resizing={settingsModalIsResizing}
 			bind:this={settingsModal}
-			style={settingsModalFrameStyle}
+			style={settingsModalStyle}
 			transition:scale={{ duration: 200, start: 0.95 }}
 			role="dialog"
 			aria-modal="true"
@@ -578,6 +630,27 @@
 			onkeydown={handleModalKeydown}>
 			<div class="settings-header" onpointerdown={handleSettingsModalDragPointerDown}>
 				<h1 id="settings-title">{t('settings.title', settings.language)}</h1>
+				<div class="settings-search" onpointerdown={(e) => e.stopPropagation()}>
+					<svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path>
+					</svg>
+					<input
+						type="search"
+						bind:value={settingsSearch}
+						placeholder={t('settings.searchPlaceholder', settings.language)}
+						aria-label={t('settings.searchPlaceholder', settings.language)} />
+					{#if settingsSearch.trim()}
+						<div class="settings-search-results">
+							{#if settingsSearchResults.length > 0}
+								{#each settingsSearchResults as result}
+									<button onclick={() => selectSearchResult(result.category)}>{result.label}</button>
+								{/each}
+							{:else}
+								<span>{t('settings.noSearchResults', settings.language)}</span>
+							{/if}
+						</div>
+					{/if}
+				</div>
 				<button class="close-btn" onclick={onclose} aria-label={t('common.close', settings.language)}>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -596,8 +669,8 @@
 			</div>
 
 			<div class="settings-content">
-				<nav class="settings-nav">
-					<button class="nav-item" class:active={activeCategory === 'editor'} onclick={() => (activeCategory = 'editor')}>
+				<nav class="settings-nav" aria-label={t('settings.title', settings.language)}>
+					<button class="nav-item" class:active={activeCategory === 'editor'} aria-label={t('settings.editor', settings.language)} aria-current={activeCategory === 'editor' ? 'page' : undefined} onclick={() => (activeCategory = 'editor')}>
 						<svg
 								xmlns="http://www.w3.org/2000/svg"
 								width="16"
@@ -611,9 +684,9 @@
 								<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
 								<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
 							</svg>
-							{t('settings.editor', settings.language)}
+							<span class="nav-label">{t('settings.editor', settings.language)}</span>
 					</button>
-					<button class="nav-item" class:active={activeCategory === 'preview'} onclick={() => (activeCategory = 'preview')}>
+					<button class="nav-item" class:active={activeCategory === 'preview'} aria-label={t('settings.preview', settings.language)} aria-current={activeCategory === 'preview' ? 'page' : undefined} onclick={() => (activeCategory = 'preview')}>
 						<svg
 								xmlns="http://www.w3.org/2000/svg"
 								width="16"
@@ -627,9 +700,9 @@
 								<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
 								<circle cx="12" cy="12" r="3"></circle>
 							</svg>
-							{t('settings.preview', settings.language)}
+							<span class="nav-label">{t('settings.preview', settings.language)}</span>
 					</button>
-					<button class="nav-item" class:active={activeCategory === 'appearance'} onclick={() => (activeCategory = 'appearance')}>
+					<button class="nav-item" class:active={activeCategory === 'appearance'} aria-label={t('settings.appearance', settings.language)} aria-current={activeCategory === 'appearance' ? 'page' : undefined} onclick={() => (activeCategory = 'appearance')}>
 						<svg
 								xmlns="http://www.w3.org/2000/svg"
 								width="16"
@@ -645,9 +718,9 @@
 									d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
 								></path>
 							</svg>
-							{t('settings.appearance', settings.language)}
+							<span class="nav-label">{t('settings.appearance', settings.language)}</span>
 					</button>
-					<button class="nav-item" class:active={activeCategory === 'toolbars'} onclick={() => (activeCategory = 'toolbars')}>
+					<button class="nav-item" class:active={activeCategory === 'toolbars'} aria-label={t('settings.toolbars', settings.language)} aria-current={activeCategory === 'toolbars' ? 'page' : undefined} onclick={() => (activeCategory = 'toolbars')}>
 						<svg
 								xmlns="http://www.w3.org/2000/svg"
 								width="16"
@@ -663,9 +736,9 @@
 								<path d="M7 9v6"></path>
 								<path d="M17 9v6"></path>
 							</svg>
-							{t('settings.toolbars', settings.language)}
+							<span class="nav-label">{t('settings.toolbars', settings.language)}</span>
 					</button>
-					<button class="nav-item" class:active={activeCategory === 'files'} onclick={() => (activeCategory = 'files')}>
+					<button class="nav-item" class:active={activeCategory === 'files'} aria-label={t('settings.files', settings.language)} aria-current={activeCategory === 'files' ? 'page' : undefined} onclick={() => (activeCategory = 'files')}>
 						<svg
 								xmlns="http://www.w3.org/2000/svg"
 								width="16"
@@ -681,7 +754,7 @@
 								<line x1="9" y1="13" x2="15" y2="13"></line>
 								<line x1="9" y1="17" x2="13" y2="17"></line>
 							</svg>
-							{t('settings.files', settings.language)}
+							<span class="nav-label">{t('settings.files', settings.language)}</span>
 					</button>
 
 					<div class="nav-footer">
@@ -723,7 +796,7 @@
 					</div>
 				</nav>
 
-					<div class="settings-panel" role="presentation" onclick={() => { highlightMenuOpen = false; }}>
+					<div class="settings-panel" role="presentation">
 						{#if activeCategory === 'editor'}
 						<div class="settings-group">
 							<div class="settings-group-header">
@@ -736,6 +809,10 @@
 								</button>
 							</div>
 
+							<div class="font-preview" aria-label={t('settings.editorFontPreview', settings.language)}>
+								<code style={`font-family: ${settings.editorFont}, monospace; font-size: ${settings.editorFontSize}px;`}># Markpad editor</code>
+							</div>
+
 							<div class="setting-item">
 								<label for="editor-font">{t('settings.font', settings.language)}</label>
 								<div class="select-wrapper">
@@ -897,8 +974,17 @@
 								</button>
 							</div>
 
+							<div class="font-preview" aria-label={t('settings.fontPreview', settings.language)}>
+								<span
+									class="font-preview-text"
+									style={`font-family: ${settings.previewFont}, sans-serif; font-size: ${settings.previewFontSize}px;`}>
+									{t('settings.fontPreviewText', settings.language)}
+								</span>
+								<code style={`font-family: ${settings.codeFont}, monospace; font-size: ${settings.codeFontSize}px;`}># Markpad **preview**</code>
+							</div>
+
 							<div class="setting-item">
-								<label for="preview-font">{t('settings.font', settings.language)}</label>
+								<label for="preview-font">{t('settings.previewTextFont', settings.language)}</label>
 								<div class="select-wrapper">
 									<select id="preview-font" bind:value={settings.previewFont}>
 										{#each systemFonts as font}
@@ -937,7 +1023,7 @@
 							</div>
 
 							<div class="setting-item">
-								<label for="code-font">{t('settings.font', settings.language)}</label>
+								<label for="code-font">{t('settings.previewCodeFont', settings.language)}</label>
 								<div class="select-wrapper">
 									<select id="code-font" bind:value={settings.codeFont}>
 										{#each systemFonts as font}
@@ -974,190 +1060,93 @@
 									<span class="slider-value">px</span>
 								</div>
 							</div>
-						</div>
+					</div>
 					{:else if activeCategory === 'appearance'}
 						<div class="settings-group">
-						<h2>{t('settings.appearanceSettings', settings.language)}</h2>
-
-						<div class="setting-item">
-							<label for="appearance-language">{t('settings.language', settings.language)}</label>
-							<div class="select-wrapper">
-								<select id="appearance-language" value={settings.language} onchange={(e) => settings.setLanguage(e.currentTarget.value as LanguageCode)}>
-									{#each getSupportedLanguages() as lang}
-										<option value={lang.code}>{lang.nativeName}</option>
-									{/each}
-								</select>
-								<svg
-									class="select-arrow"
-									width="12"
-									height="12"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+							<div class="settings-group-header">
+								<h2>{t('settings.appearance', settings.language)}</h2>
+								<button class="reset-text-btn" onclick={resetAppearanceSection}>{t('settings.resetSection', settings.language)}</button>
 							</div>
-						</div>
 
-						<div class="setting-item" style="align-items: flex-start; padding-top: 16px;">
-							<label for="appearance-theme" style="margin-top: 6px;">{t('settings.theme', settings.language)}</label>
-								<div style="display: flex; flex-direction: column; align-items: flex-end; gap: 8px;">
+								<div class="setting-item">
+									<label for="appearance-language">{t('settings.language', settings.language)}</label>
 									<div class="select-wrapper">
-										<select id="appearance-theme" value={theme} onchange={(e) => onSetTheme?.(e.currentTarget.value as any)}>
-											<option value="system">{t('settings.themeFollowSystem', settings.language)}</option>
-											<option value="light">{t('settings.themeDefaultLight', settings.language)}</option>
-											<option value="dark">{t('settings.themeDefaultDark', settings.language)}</option>
-											{#if savedVscodeThemes.length > 0}
-												<optgroup label={t('settings.vsCodeThemes', settings.language)}>
-													{#each savedVscodeThemes as themeOption}
-														<option value={`vscode:${themeOption}`}>{themeOption}</option>
-													{/each}
-												</optgroup>
-											{/if}
+										<select id="appearance-language" value={settings.language} onchange={(e) => settings.setLanguage(e.currentTarget.value as LanguageCode)}>
+											{#each getSupportedLanguages() as lang}<option value={lang.code}>{lang.nativeName}</option>{/each}
 										</select>
-										<svg
-											class="select-arrow"
-											width="12"
-											height="12"
-											viewBox="0 0 24 24"
-											fill="none"
-											stroke="currentColor"
-											stroke-width="2"
-											stroke-linecap="round"
-											stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+										<svg class="select-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
 									</div>
-									{#if theme.startsWith('vscode:')}
-										<button class="reset-text-btn" style="color: var(--color-danger-fg); font-size: 12px; padding: 0;" onclick={() => deleteTheme(theme.replace('vscode:', ''))}>
-										{t('settings.deleteSelectedTheme', settings.language)}
-									</button>
-									{/if}
 								</div>
-							</div>
-
-							<div class="setting-item" style="flex-direction: column; align-items: flex-start; gap: 8px;">
-								<div style="display: flex; justify-content: space-between; width: 100%;">
-									<label for="theme-import">{t('settings.importVSCodeTheme', settings.language)}</label>
-									<button
-										class="reset-text-btn"
-										onclick={() =>
-											openUrl('https://vscodethemes.com/')
-												.catch(() => window.open('https://vscodethemes.com/', '_blank'))}
-									>
-										{t('settings.browseThemes', settings.language)}
-									</button>
+								<div class="setting-item">
+									<label for="appearance-theme">{t('settings.theme', settings.language)}</label>
+									<div class="select-wrapper">
+										<select id="appearance-theme" value={theme} onchange={(e) => onSetTheme?.(e.currentTarget.value)}>
+											<option value="light">{t('settings.themeLight', settings.language)}</option>
+											<option value="system">{t('settings.themeSystem', settings.language)}</option>
+											<option value="dark">{t('settings.themeDark', settings.language)}</option>
+											{#each savedVscodeThemes as themeOption}<option value={`vscode:${themeOption}`}>{themeOption}</option>{/each}
+										</select>
+										<svg class="select-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+									</div>
 								</div>
-								<div style="display: flex; gap: 8px; width: 100%;">
-									<input 
-										type="text" 
-										id="theme-import" 
-										class="text-input" 
-										style="flex: 1;" 
-										placeholder="https://vscodethemes.com/e/..." 
-										bind:value={themeImportUrl} 
-										onkeydown={e => e.key === 'Enter' && importVscodeTheme()}
-									/>
-									<button class="import-btn" onclick={importVscodeTheme} disabled={importingTheme || !themeImportUrl}>
-										{importingTheme ? t('settings.importing', settings.language) : t('settings.import', settings.language)}
-									</button>
+								<div class="setting-item surface-preference">
+									<label for="appearance-window-surface">{t('settings.windowSurface', settings.language)}</label>
+									<div class="select-wrapper">
+										<select id="appearance-window-surface" value={settings.windowSurface} onchange={(e) => settings.setWindowSurface(e.currentTarget.value as SettingsSurface)}>
+											<option value="solid">{t('settings.surfaceSolid', settings.language)}</option><option value="translucent">{t('settings.surfaceTranslucent', settings.language)}</option>
+										</select>
+										<svg class="select-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+									</div>
 								</div>
-							</div>
-
-							<div class="setting-item">
-								<label for="appearance-tabs">{t('settings.showTabs', settings.language)}</label>
-								<label class="toggle">
-									<input id="appearance-tabs" type="checkbox" checked={settings.showTabs} onchange={() => settings.toggleTabs()} />
-									<span class="toggle-slider"></span>
-								</label>
-							</div>
-
-							<div class="setting-item">
-								<label for="appearance-restore-state">{t('settings.restoreStateOnReopen', settings.language)}</label>
-								<label class="toggle">
-									<input id="appearance-restore-state" type="checkbox" checked={settings.restoreStateOnReopen} onchange={() => settings.toggleRestoreStateOnReopen()} />
-									<span class="toggle-slider"></span>
-								</label>
-							</div>
-
-							<div class="setting-item">
-								<label for="appearance-start-editor">{t('settings.startInEditor', settings.language)}</label>
-								<label class="toggle">
-									<input id="appearance-start-editor" type="checkbox" checked={settings.startInEditor} onchange={() => settings.toggleStartInEditor()} />
-									<span class="toggle-slider"></span>
-								</label>
-							</div>
-							<div class="setting-item">
-								<label for="appearance-new-file-mode">{t('settings.newFileDefaultMode', settings.language)}</label>
-								<label class="toggle">
-									<input id="appearance-new-file-mode" type="checkbox" checked={settings.newFileDefaultMode} onchange={() => settings.toggleNewFileDefaultMode()} />
-									<span class="toggle-slider"></span>
-								</label>
-							</div>
-							<div class="setting-item">
-								<label for="appearance-recent-files">{t('settings.showRecentFiles', settings.language)}</label>
-								<label class="toggle">
-									<input id="appearance-recent-files" type="checkbox" checked={settings.showRecentFiles} onchange={() => settings.toggleShowRecentFiles()} />
-									<span class="toggle-slider"></span>
-								</label>
-							</div>
-							<div class="setting-item">
-							<label for="appearance-toc">{t('settings.showTableOfContents', settings.language)}</label>
-							<label class="toggle">
-								<input id="appearance-toc" type="checkbox" checked={settings.showToc} onchange={() => settings.toggleToc()} />
-								<span class="toggle-slider"></span>
-							</label>
-						</div>
-
-						<div class="setting-item">
-							<label for="appearance-highlight-color">{t('settings.highlightColor', settings.language)}</label>
-							<div class="custom-dropdown-wrapper">
-								<button 
-									class="custom-dropdown-btn" 
-									onclick={(e) => { e.stopPropagation(); highlightMenuOpen = !highlightMenuOpen; }}>
-										<div style="display: flex; align-items: center; gap: 8px;">
-										<div class="color-circle" style="background-color: {highlightColors.find(c => c.value === settings.highlightColor)?.color || 'var(--color-accent-fg)'}"></div>
-										<span>{t(`colors.${settings.highlightColor || 'default'}`, settings.language)}</span>
+								<div class="setting-item surface-preference" class:unavailable={settings.windowSurface === 'solid'}>
+									<label for="appearance-window-opacity">{t('settings.surfaceOpacity', settings.language)}</label>
+									<div class:disabled={settings.windowSurface === 'solid'} class="range-control">
+										<input id="appearance-window-opacity" type="range" min="72" max="100" step="1" value={settings.windowOpacity} style={`--range-progress: ${((settings.windowOpacity - 72) / 28) * 100}%`} disabled={settings.windowSurface === 'solid'} oninput={(e) => settings.setWindowOpacity(e.currentTarget.valueAsNumber)} />
+										<output for="appearance-window-opacity">{settings.windowOpacity}%</output>
+									</div>
+								</div>
+								<div class="setting-item surface-preference" class:unavailable={windowBlurUnavailable}>
+									<label for="appearance-window-blur">{t('settings.surfaceBlur', settings.language)}</label>
+									<label class="toggle" class:disabled={windowBlurUnavailable}>
+										<input id="appearance-window-blur" type="checkbox" checked={settings.windowBlur && settings.osType !== 'linux'} disabled={windowBlurUnavailable} onchange={() => settings.toggleWindowBlur()} /><span class="toggle-slider"></span>
+									</label>
+								</div>
+								<div class="setting-item surface-preference" class:unavailable={settings.windowSurface === 'solid'}>
+									<label for="appearance-backdrop-dim">{t('settings.backdropDimming', settings.language)}</label>
+									<div class:disabled={settings.windowSurface === 'solid'} class="range-control">
+										<input id="appearance-backdrop-dim" type="range" min="0" max="70" step="1" value={settings.windowBackdropDim} style={`--range-progress: ${(settings.windowBackdropDim / 70) * 100}%`} disabled={settings.windowSurface === 'solid'} oninput={(e) => settings.setWindowBackdropDim(e.currentTarget.valueAsNumber)} />
+										<output for="appearance-backdrop-dim">{settings.windowBackdropDim}%</output>
+									</div>
+								</div>
+								<div class="setting-item">
+									<label for="theme-import">{t('settings.importVSCodeTheme', settings.language)}</label>
+									<div class="theme-import-control">
+										<input type="text" id="theme-import" class="text-input" placeholder="https://vscodethemes.com/e/..." bind:value={themeImportUrl} onkeydown={e => e.key === 'Enter' && importVscodeTheme()} />
+										<button class="import-btn" onclick={importVscodeTheme} disabled={importingTheme || !themeImportUrl}>{importingTheme ? t('settings.importing', settings.language) : t('settings.import', settings.language)}</button>
+										<button class="import-btn" onclick={() => openUrl('https://vscodethemes.com/').catch(() => window.open('https://vscodethemes.com/', '_blank'))}>{t('settings.browseThemes', settings.language)}</button>
 									</div>
+								</div>
+								{#each [
+									{ id: 'appearance-tabs', label: t('settings.showTabs', settings.language), checked: settings.showTabs, action: () => settings.toggleTabs() },
+									{ id: 'appearance-restore-state', label: t('settings.restoreStateOnReopen', settings.language), checked: settings.restoreStateOnReopen, action: () => settings.toggleRestoreStateOnReopen() },
+									{ id: 'appearance-start-editor', label: t('settings.startInEditor', settings.language), checked: settings.startInEditor, action: () => settings.toggleStartInEditor() },
+									{ id: 'appearance-new-file-mode', label: t('settings.newFileDefaultMode', settings.language), checked: settings.newFileDefaultMode, action: () => settings.toggleNewFileDefaultMode() },
+									{ id: 'appearance-recent-files', label: t('settings.showRecentFiles', settings.language), checked: settings.showRecentFiles, action: () => settings.toggleShowRecentFiles() },
+									{ id: 'appearance-toc', label: t('settings.showTableOfContents', settings.language), checked: settings.showToc, action: () => settings.toggleToc() },
+								] as item}
+									<div class="setting-item"><label for={item.id}>{item.label}</label><label class="toggle"><input id={item.id} type="checkbox" checked={item.checked} onchange={item.action} /><span class="toggle-slider"></span></label></div>
+								{/each}
+								<div class="setting-item">
+									<label for="appearance-highlight-color">{t('settings.highlightColor', settings.language)}</label>
+									<div class="select-wrapper">
+										<select id="appearance-highlight-color" value={settings.highlightColor} onchange={(e) => settings.highlightColor = e.currentTarget.value}>
+											{#each highlightColors as color}<option value={color.value}>{t(`colors.${color.value}`, settings.language)}</option>{/each}
+										</select>
 										<svg class="select-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
-								</button>
-								{#if highlightMenuOpen}
-									<div
-										class="custom-dropdown-menu"
-										role="menu"
-										tabindex="-1"
-										transition:fly={{ y: 5, duration: 150 }}
-										onclick={(e) => e.stopPropagation()}
-										onkeydown={(e) => {
-											if (e.key === 'Escape') highlightMenuOpen = false;
-										}}>
-										{#each highlightColors as color, index}
-											{#if index === 1}
-												<div class="theme-menu-divider" style="height: 1px; background-color: var(--color-border-muted); margin: 4px 0; transform: scaleY(0.5);"></div>
-											{/if}
-											<button 
-													class="custom-dropdown-option {settings.highlightColor === color.value ? 'selected' : ''}" 
-													onclick={() => {
-														settings.highlightColor = color.value;
-														highlightMenuOpen = false;
-													}}
-												>
-													<div class="color-circle" style="background-color: {color.color}"></div>
-													<span>{t(`colors.${color.value}`, settings.language)}</span>
-												</button>
-										{/each}
 									</div>
-								{/if}
-							</div>
-					</div>
-
-					<div class="setting-item">
-						<label for="appearance-zen-mode">{t('settings.zenMode', settings.language)}</label>
-						<label class="toggle">
-							<input id="appearance-zen-mode" type="checkbox" checked={settings.zenMode} onchange={() => settings.toggleZenMode()} />
-							<span class="toggle-slider"></span>
-						</label>
-					</div>
-					</div>
+								</div>
+								<div class="setting-item"><label for="appearance-zen-mode">{t('settings.zenMode', settings.language)}</label><label class="toggle"><input id="appearance-zen-mode" type="checkbox" checked={settings.zenMode} onchange={() => settings.toggleZenMode()} /><span class="toggle-slider"></span></label></div>
+						</div>
 					{:else if activeCategory === 'toolbars'}
 					<div class="settings-group">
 						<div class="settings-group-header">
@@ -1169,15 +1158,13 @@
 								<span class="toolbar-settings-chevron" aria-hidden="true"></span>
 								<span>{t('settings.applicationToolbar', settings.language)}</span>
 							</summary>
+							<button
+								type="button"
+								class="reset-text-btn toolbar-settings-reset"
+								onclick={() => settings.resetTitlebarToolbar()}>
+								{t('settings.resetToolbar', settings.language)}
+							</button>
 							<div class="toolbar-settings-body">
-								<div class="toolbar-settings-header">
-									<button
-										type="button"
-										class="reset-text-btn"
-										onclick={() => settings.resetTitlebarToolbar()}>
-										{t('settings.resetToolbar', settings.language)}
-									</button>
-								</div>
 								<div class="toolbar-settings-list" role="list">
 									{#each titlebarToolbarSettingsActions as action, index (action.id)}
 										{@const actionName = t(action.labelKey, settings.language) === action.labelKey ? action.fallbackName : t(action.labelKey, settings.language)}
@@ -1246,17 +1233,16 @@
 								<span class="toolbar-settings-chevron" aria-hidden="true"></span>
 								<span>{t('settings.editorToolbar', settings.language)}</span>
 							</summary>
+							<button
+								type="button"
+								class="reset-text-btn toolbar-settings-reset"
+								onclick={() => settings.resetEditorToolbar()}>
+								{t('settings.resetToolbar', settings.language)}
+							</button>
 							<div class="toolbar-settings-body">
-								<div class="toolbar-settings-header">
-									<button
-										type="button"
-										class="reset-text-btn"
-										onclick={() => settings.resetEditorToolbar()}>
-										{t('settings.resetToolbar', settings.language)}
-									</button>
-								</div>
 								<div class="toolbar-settings-list" role="list">
 									{#each editorToolbarSettingsTools as tool, index (tool.id)}
+										{@const toolName = t(tool.nameKey, settings.language) === tool.nameKey ? tool.name : t(tool.nameKey, settings.language)}
 										<div
 											class="toolbar-tool-row"
 											class:drag-source={editorToolbarDraggingId === tool.id}
@@ -1266,7 +1252,7 @@
 											<button
 												type="button"
 												class="toolbar-drag-handle"
-												aria-label={`${t('settings.move', settings.language)}: ${tool.name}`}
+												aria-label={`${t('settings.move', settings.language)}: ${toolName}`}
 												onpointerdown={(e) => handleEditorToolbarDragPointerDown(e, tool.id)}>
 												::
 											</button>
@@ -1277,21 +1263,21 @@
 													checked={isEditorToolbarToolVisible(tool.id)}
 													onchange={(e) => settings.setEditorToolbarToolVisible(tool.id, e.currentTarget.checked)}
 												/>
-												<span class="toolbar-tool-name">{tool.name}</span>
+											<span class="toolbar-tool-name">{toolName}</span>
 												<span class="toolbar-tool-sample">{tool.label}</span>
 											</label>
 											<div class="toolbar-order-controls">
 												<button
 													type="button"
 													disabled={index === 0}
-													aria-label={`${t('settings.moveUp', settings.language)}: ${tool.name}`}
+												aria-label={`${t('settings.moveUp', settings.language)}: ${toolName}`}
 													onclick={() => settings.moveEditorToolbarTool(tool.id, 'up')}>
 													{t('settings.moveUp', settings.language)}
 												</button>
 												<button
 													type="button"
 													disabled={index === editorToolbarSettingsTools.length - 1}
-													aria-label={`${t('settings.moveDown', settings.language)}: ${tool.name}`}
+												aria-label={`${t('settings.moveDown', settings.language)}: ${toolName}`}
 													onclick={() => settings.moveEditorToolbarTool(tool.id, 'down')}>
 													{t('settings.moveDown', settings.language)}
 												</button>
@@ -1347,7 +1333,7 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
-		background: rgba(0, 0, 0, 0.4);
+		background: rgb(0 0 0 / 0.22);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -1355,21 +1341,38 @@
 	}
 
 	.settings-modal {
-		background: var(--color-canvas-default);
-		border: 1px solid var(--color-border-default);
-		border-radius: 6px;
-		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
-		width: min(560px, 90vw);
+		--settings-control-bg: var(--workbench-surface-base);
+		--settings-row-bg: var(--workbench-surface-raised);
+		box-sizing: border-box;
+		outline: none;
+		background: var(--workbench-surface-base);
+		border: 1px solid var(--workbench-border-strong);
+		border-radius: var(--workbench-panel-radius);
+		box-shadow: var(--workbench-shadow);
+		width: min(980px, 92vw);
 		max-width: 90vw;
-		min-width: min(520px, 90vw);
-		height: 420px;
+		min-width: min(700px, 90vw);
+		height: min(720px, 88vh);
 		max-height: 90vh;
-		min-height: min(360px, 90vh);
+		min-height: min(520px, 90vh);
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
 		position: relative;
 		font-family: var(--win-font);
+		color: var(--color-fg-default);
+	}
+
+	.settings-modal.translucent {
+		--settings-control-bg: color-mix(in srgb, var(--workbench-surface-base) 76%, transparent);
+		--settings-row-bg: color-mix(in srgb, var(--workbench-surface-raised) 78%, transparent);
+		background: color-mix(in srgb, var(--color-canvas-default) var(--window-surface-opacity, 92%), transparent);
+		-webkit-backdrop-filter: blur(var(--window-surface-blur, 18px)) saturate(1.08);
+		backdrop-filter: blur(var(--window-surface-blur, 18px)) saturate(1.08);
+	}
+
+	.settings-modal.translucent .settings-nav {
+		background: color-mix(in srgb, var(--color-canvas-subtle) 76%, transparent);
 	}
 
 	.settings-modal.dragging,
@@ -1383,7 +1386,9 @@
 		border: none;
 		background: transparent;
 		color: var(--color-fg-muted);
+		opacity: 0.45;
 		z-index: 2;
+		transition: color 0.12s ease, opacity 0.12s ease;
 	}
 
 	.settings-resize-handle.resize-n,
@@ -1453,13 +1458,12 @@
 	.settings-resize-handle.resize-se::before {
 		content: '';
 		position: absolute;
-		right: 4px;
-		bottom: 4px;
-		width: 9px;
-		height: 9px;
+		right: 5px;
+		bottom: 5px;
+		width: 7px;
+		height: 7px;
 		border-right: 1px solid currentColor;
 		border-bottom: 1px solid currentColor;
-		opacity: 0.7;
 	}
 
 	.settings-resize-handle.resize-se::after {
@@ -1467,23 +1471,25 @@
 		position: absolute;
 		right: 8px;
 		bottom: 8px;
-		width: 5px;
-		height: 5px;
+		width: 3px;
+		height: 3px;
 		border-right: 1px solid currentColor;
 		border-bottom: 1px solid currentColor;
-		opacity: 0.55;
 	}
 
 	.settings-resize-handle:hover {
 		color: var(--color-fg-default);
+		opacity: 0.9;
 	}
 
 	.settings-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 16px 20px;
-		border-bottom: 1px solid var(--color-border-default);
+		min-height: 64px;
+		padding: 0 18px 0 24px;
+		gap: 20px;
+		border-bottom: 1px solid var(--workbench-border);
 		cursor: grab;
 		user-select: none;
 	}
@@ -1493,26 +1499,100 @@
 	}
 
 	.settings-header h1 {
-		font-size: 16px;
+		font-size: 18px;
 		font-weight: 600;
+		letter-spacing: -0.02em;
 		margin: 0;
 	}
 
+	.settings-search {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: min(320px, 42%);
+		margin-left: auto;
+		color: var(--color-fg-muted);
+	}
+
+	.settings-search > svg {
+		position: absolute;
+		left: 13px;
+		z-index: 1;
+		pointer-events: none;
+	}
+
+	.settings-search input {
+		box-sizing: border-box;
+		width: 100%;
+		height: 42px;
+		padding: 0 14px 0 40px;
+		border: 1px solid var(--workbench-border);
+		border-radius: var(--workbench-control-radius);
+		background: color-mix(in srgb, var(--settings-control-bg) 88%, transparent);
+		color: var(--color-fg-default);
+		font: inherit;
+		font-size: 13px;
+		outline: none;
+	}
+
+	.settings-search input:focus {
+		border-color: var(--color-accent-fg);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-fg) 22%, transparent);
+	}
+
+	.settings-search input::-webkit-search-cancel-button {
+		display: none;
+	}
+
+	.settings-search-results {
+		position: absolute;
+		top: calc(100% + 7px);
+		left: 0;
+		right: 0;
+		z-index: 10;
+		display: flex;
+		flex-direction: column;
+		padding: 5px;
+		border: 1px solid var(--workbench-border-strong);
+		border-radius: 9px;
+		background: var(--workbench-surface-base);
+		box-shadow: 0 16px 40px rgb(0 0 0 / 0.28);
+	}
+
+	.settings-search-results button,
+	.settings-search-results span {
+		padding: 9px 10px;
+		border: 0;
+		border-radius: 5px;
+		background: transparent;
+		color: var(--color-fg-default);
+		font: inherit;
+		font-size: 12px;
+		text-align: left;
+	}
+
+	.settings-search-results button:hover {
+		background: var(--color-neutral-muted);
+		cursor: pointer;
+	}
+
 	.close-btn {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 28px;
-		height: 28px;
+		width: 32px;
+		height: 32px;
 		border: none;
 		background: transparent;
 		cursor: pointer;
-		border-radius: 4px;
-		color: var(--color-fg-default);
+		border-radius: 6px;
+		color: var(--color-fg-muted);
+		transition: background-color 0.12s ease, color 0.12s ease;
 	}
 
 	.close-btn:hover {
 		background: var(--color-neutral-muted);
+		color: var(--color-fg-default);
 	}
 
 	.settings-content {
@@ -1522,45 +1602,84 @@
 	}
 
 	.settings-nav {
-		width: 140px;
-		padding: 12px 8px;
-		border-right: 1px solid var(--color-border-default);
+		box-sizing: border-box;
+		width: 224px;
+		padding: 16px 12px 12px;
+		border-right: 1px solid var(--workbench-border);
+		background: var(--workbench-surface-raised);
 		display: flex;
 		flex-direction: column;
-		gap: 2px;
+		gap: 4px;
+		flex-shrink: 0;
 	}
 
 	.nav-item {
 		display: flex;
 		align-items: center;
-		gap: 8px;
-		padding: 8px 12px;
-		line-height: 1;
+		gap: 10px;
+		min-height: 38px;
+		padding: 8px 10px;
+		line-height: 1.25;
 		border: none;
 		background: transparent;
 		cursor: pointer;
-		border-radius: 6px;
+		border: 1px solid transparent;
+		border-radius: var(--workbench-control-radius);
 		font-size: 13px;
-		color: var(--color-fg-default);
+		font-weight: 500;
+		color: var(--color-fg-muted);
 		text-align: left;
+		transition: background-color 0.12s ease, color 0.12s ease;
 	}
 
 	.nav-item svg {
 		width: 16px;
 		height: 16px;
+		flex-shrink: 0;
 	}
 
 	.nav-item:hover {
 		background: var(--color-neutral-muted);
+		color: var(--color-fg-default);
 	}
 
 	.nav-item.active {
-		background: var(--color-accent-fg);
-		color: var(--color-btn-fg);
+		background: var(--workbench-accent-soft);
+		border-color: color-mix(in srgb, var(--color-accent-fg) 18%, transparent);
+		box-shadow: inset 2px 0 0 var(--color-accent-fg);
+		color: color-mix(in srgb, var(--color-accent-fg) 72%, var(--color-fg-default));
+		font-weight: 600;
+	}
+
+	.nav-item:focus-visible {
+		outline: none;
+		box-shadow:
+			0 0 0 1px color-mix(in srgb, var(--color-accent-fg) 52%, transparent),
+			inset 3px 0 0 color-mix(in srgb, var(--color-accent-fg) 76%, transparent);
+	}
+
+	.github-btn:focus-visible,
+	.check-updates-btn:focus-visible,
+	.reset-text-btn:focus-visible,
+	.import-btn:focus-visible,
+	.spin-btn:focus-visible,
+	.toolbar-settings-summary:focus-visible,
+	.toolbar-drag-handle:focus-visible,
+	.toolbar-placement-controls button:focus-visible,
+	.toolbar-order-controls button:focus-visible {
+		outline: 2px solid var(--color-accent-fg);
+		outline-offset: 2px;
+	}
+
+	.close-btn:focus-visible {
+		outline: none;
+		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-fg) 48%, transparent);
 	}
 
 	.nav-footer {
 		margin-top: auto;
+		padding-top: 10px;
+		border-top: 1px solid var(--color-border-muted);
 		display: flex;
 		flex-direction: column;
 	}
@@ -1569,23 +1688,25 @@
 	.check-updates-btn {
 		display: flex;
 		align-items: center;
-		padding: 8px 12px;
+		min-height: 34px;
+		padding: 7px 10px;
 		border: none;
 		background: transparent;
 		cursor: pointer;
-		border-radius: 6px;
-		opacity: 0.5;
-		font-size: 13px;
-		color: var(--color-fg-default);
+		border-radius: 7px;
+		opacity: 1;
+		font-size: 12px;
+		color: var(--color-fg-muted);
 		text-align: left;
-		transition: all 0.1s;
+		transition: background-color 0.12s ease, color 0.12s ease;
 		gap: 8px;
 		font-family: inherit;
 	}
 
 	.github-btn:hover,
 	.check-updates-btn:hover {
-		opacity: 1;
+		background: var(--color-neutral-muted);
+		color: var(--color-fg-default);
 	}
 
 	.check-updates-btn svg {
@@ -1616,28 +1737,71 @@
 
 	.settings-panel {
 		flex: 1;
-		padding: 20px;
+		padding: 26px 28px 40px;
 		overflow-y: auto;
+		overflow-x: hidden;
 		min-height: 0;
+		scrollbar-gutter: stable;
+		scrollbar-color: color-mix(in srgb, var(--color-fg-muted) 42%, transparent) transparent;
+		scrollbar-width: thin;
+	}
+
+	.settings-panel::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	.settings-panel::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.settings-panel::-webkit-scrollbar-thumb {
+		background: color-mix(in srgb, var(--color-fg-muted) 42%, transparent);
+		background-clip: padding-box;
+		border: 3px solid transparent;
+		border-radius: 999px;
+	}
+
+	.settings-panel::-webkit-scrollbar-thumb:hover {
+		background: color-mix(in srgb, var(--color-fg-muted) 68%, transparent);
+		background-clip: padding-box;
 	}
 
 	.settings-group h2 {
-		font-size: 16px;
+		font-size: 19px;
 		font-weight: 600;
-		margin: 0 0 16px 0;
+		letter-spacing: -0.015em;
+		margin: 0 0 22px 0;
 		color: var(--color-fg-default);
 	}
 
+	.theme-import-control {
+		display: flex;
+		width: min(370px, 58%);
+		gap: 8px;
+	}
+
+	.theme-import-control .text-input {
+		min-width: 0;
+		flex: 1;
+	}
+
+	.toggle.disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+
 	.settings-group-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		margin-bottom: 16px;
+		margin-bottom: 20px;
+		min-height: 28px;
 	}
 
 	.settings-group-header h2 {
-		font-size: 16px;
+		font-size: 19px;
 		font-weight: 600;
+		letter-spacing: -0.015em;
 		margin: 0;
 		color: var(--color-fg-default);
 	}
@@ -1646,32 +1810,63 @@
 		background: transparent;
 		border: none;
 		color: var(--color-fg-muted);
-		font-size: 13px;
+		font-size: 12px;
 		cursor: pointer;
-		padding: 0;
-		transition: all 0.1s;
+		padding: 5px 7px;
+		border-radius: 5px;
+		transition: background-color 0.12s ease, color 0.12s ease;
 		text-decoration: none;
 	}
 
 	.reset-text-btn:hover:not(.disabled) {
 		color: var(--color-accent-fg);
+		background: color-mix(in srgb, var(--color-accent-fg) 10%, transparent);
 	}
 
 	.reset-text-btn.disabled {
-		opacity: 0.5;
+		opacity: 0.38;
 		cursor: default;
 	}
 
+	.settings-group > :is(.setting-item, .toolbar-settings) {
+		padding-inline: 14px;
+		border-right: 1px solid var(--workbench-border);
+		border-left: 1px solid var(--workbench-border);
+		background: var(--settings-row-bg);
+	}
+
+	.settings-group > :is(.setting-item, .toolbar-settings):nth-child(2) {
+		border-top: 1px solid var(--workbench-border);
+		border-radius: var(--workbench-panel-radius) var(--workbench-panel-radius) 0 0;
+	}
+
+	.settings-group > :is(.setting-item, .toolbar-settings):last-child {
+		border-bottom: 1px solid var(--workbench-border);
+		border-radius: 0 0 var(--workbench-panel-radius) var(--workbench-panel-radius);
+	}
+
+	.settings-group > :is(.setting-item, .toolbar-settings):only-child {
+		border-radius: var(--workbench-panel-radius);
+	}
+
 	.setting-item {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 10px 0;
-		border-bottom: 1px solid var(--color-border-muted);
+		gap: 24px;
+		min-height: 50px;
+		padding: 8px 0;
+		border-bottom: 1px solid var(--workbench-border);
+		transition: background-color 0.12s ease;
+	}
+
+	.settings-group > .setting-item:hover {
+		background: var(--workbench-surface-hover);
 	}
 
 	.setting-item label:first-child {
-		font-size: 13px;
+		font-size: 13.5px;
+		font-weight: 500;
 		color: var(--color-fg-default);
 		display: flex;
 		align-items: center;
@@ -1679,15 +1874,17 @@
 	}
 
 	.toolbar-settings {
+		position: relative;
 		padding: 0;
-		border-bottom: 1px solid var(--color-border-muted);
+		border-bottom: 1px solid var(--workbench-border);
 	}
 
 	.toolbar-settings-summary {
 		display: flex;
 		align-items: center;
 		gap: 8px;
-		padding: 12px 0;
+		min-height: 50px;
+		padding: 12px 118px 12px 0;
 		list-style: none;
 		color: var(--color-fg-default);
 		font-size: 13px;
@@ -1718,21 +1915,26 @@
 	}
 
 	.toolbar-settings-body {
-		padding-bottom: 12px;
+		padding: 0 0 12px;
 	}
 
-	.toolbar-settings-header {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		gap: 12px;
-		margin-bottom: 8px;
+	.toolbar-settings-reset {
+		position: absolute;
+		top: 8px;
+		right: 0;
+	}
+
+	.toolbar-settings:not([open]) > .toolbar-settings-reset {
+		display: none;
 	}
 
 	.toolbar-settings-list {
 		display: flex;
 		flex-direction: column;
-		gap: 4px;
+		gap: 0;
+		border: 1px solid var(--workbench-border);
+		border-radius: 8px;
+		overflow: hidden;
 	}
 
 	.toolbar-tool-row {
@@ -1740,11 +1942,19 @@
 		grid-template-columns: 18px minmax(0, 1fr) auto;
 		align-items: center;
 		gap: 8px;
-		min-height: 34px;
-		padding: 4px 6px;
-		border: 1px solid var(--color-border-muted);
-		border-radius: 6px;
-		background: var(--color-canvas-subtle);
+		min-height: 42px;
+		padding: 5px 8px;
+		border: 0;
+		border-bottom: 1px solid var(--workbench-border);
+		background: color-mix(in srgb, var(--settings-control-bg) 78%, transparent);
+	}
+
+	.toolbar-tool-row:last-child {
+		border-bottom: 0;
+	}
+
+	.toolbar-tool-row:hover {
+		background: var(--workbench-surface-hover);
 	}
 
 	.titlebar-toolbar-row {
@@ -1810,10 +2020,10 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		border: 1px solid var(--color-border-muted);
-		border-radius: 4px;
+		border: 1px solid var(--workbench-border);
+		border-radius: 5px;
 		color: var(--color-fg-muted);
-		background: var(--color-canvas-default);
+		background: var(--settings-control-bg);
 		font-size: 12px;
 		font-weight: 600;
 	}
@@ -1828,9 +2038,9 @@
 		display: inline-flex;
 		align-items: center;
 		padding: 2px;
-		border: 1px solid var(--color-border-default);
-		border-radius: 5px;
-		background: var(--color-canvas-default);
+		border: 1px solid var(--workbench-border);
+		border-radius: 6px;
+		background: var(--settings-control-bg);
 	}
 
 	.toolbar-placement-controls button {
@@ -1857,9 +2067,9 @@
 	.toolbar-order-controls button {
 		height: 24px;
 		padding: 0 8px;
-		border: 1px solid var(--color-border-default);
-		border-radius: 4px;
-		background: var(--color-canvas-default);
+		border: 1px solid var(--workbench-border);
+		border-radius: 5px;
+		background: var(--settings-control-bg);
 		color: var(--color-fg-default);
 		font-size: 11px;
 		cursor: pointer;
@@ -1888,13 +2098,15 @@
 	}
 
 	.setting-item select {
-		padding: 6px 32px 6px 12px;
-		border: 1px solid var(--color-border-default);
-		border-radius: 6px;
-		background-color: var(--color-canvas-default);
+		box-sizing: border-box;
+		height: 34px;
+		padding: 6px 32px 6px 11px;
+		border: 1px solid var(--workbench-border);
+		border-radius: var(--workbench-control-radius);
+		background-color: var(--settings-control-bg);
 		color: var(--color-fg-default);
 		font-size: 13px;
-		min-width: 160px;
+		min-width: 190px;
 		cursor: pointer;
 		appearance: none;
 		-webkit-appearance: none;
@@ -1906,11 +2118,137 @@
 		color: var(--color-fg-default);
 	}
 
-	.setting-item select:focus {
+	.setting-item select:disabled {
+		opacity: 0.48;
+		cursor: not-allowed;
+	}
+
+	.range-control {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		min-width: 190px;
+	}
+
+	.range-control.disabled {
+		opacity: 0.48;
+	}
+
+	.range-control input[type='range'] {
+		width: 142px;
+		margin: 0;
+		height: 18px;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		cursor: pointer;
+		appearance: none;
+		-webkit-appearance: none;
+		color-scheme: normal;
+	}
+
+	.range-control input[type='range']::-webkit-slider-runnable-track {
+		height: 4px;
+		border: 0;
+		border-radius: 999px;
+		background: linear-gradient(
+			to right,
+			var(--color-accent-fg) 0 var(--range-progress, 0%),
+			color-mix(in srgb, var(--color-fg-muted) 34%, transparent) var(--range-progress, 0%) 100%
+		);
+	}
+
+	.range-control input[type='range']::-webkit-slider-thumb {
+		width: 16px;
+		height: 16px;
+		margin-top: -6px;
+		border: 2px solid var(--color-accent-fg);
+		border-radius: 50%;
+		background: var(--color-canvas-overlay);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+		appearance: none;
+		-webkit-appearance: none;
+	}
+
+	.range-control input[type='range']::-moz-range-track {
+		height: 4px;
+		border: 0;
+		border-radius: 999px;
+		background: color-mix(in srgb, var(--color-fg-muted) 34%, transparent);
+	}
+
+	.range-control input[type='range']::-moz-range-progress {
+		height: 4px;
+		border-radius: 999px;
+		background: var(--color-accent-fg);
+	}
+
+	.range-control input[type='range']::-moz-range-thumb {
+		width: 12px;
+		height: 12px;
+		border: 2px solid var(--color-accent-fg);
+		border-radius: 50%;
+		background: var(--color-canvas-overlay);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+	}
+
+	.range-control input[type='range']:focus-visible {
 		outline: none;
+	}
+
+	.range-control input[type='range']:focus-visible::-webkit-slider-thumb {
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-fg) 28%, transparent);
+	}
+
+	.range-control input[type='range']:disabled {
+		cursor: not-allowed;
+	}
+
+	.range-control output {
+		min-width: 38px;
+		color: var(--color-fg-muted);
+		font-size: 12px;
+		font-variant-numeric: tabular-nums;
+		text-align: right;
+	}
+
+	.setting-item select:focus-visible {
+		outline: 2px solid color-mix(in srgb, var(--color-accent-fg) 45%, transparent);
+		outline-offset: 1px;
 		border-color: var(--color-accent-fg);
 	}
 
+	.setting-item.unavailable {
+		opacity: 0.52;
+	}
+
+	.font-preview {
+		display: grid;
+		gap: 10px;
+		min-width: 0;
+		padding: 14px;
+		border: 1px solid var(--workbench-border);
+		border-radius: var(--workbench-panel-radius) var(--workbench-panel-radius) 0 0;
+		background: var(--settings-row-bg);
+		overflow: hidden;
+	}
+
+	.font-preview-text,
+	.font-preview code {
+		display: block;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.font-preview code {
+		padding: 8px 10px;
+		border-radius: 6px;
+		background: color-mix(in srgb, var(--color-canvas-default) 74%, transparent);
+		color: var(--color-fg-default);
+	}
+
 	.slider-container {
 		display: flex;
 		align-items: center;
@@ -1920,15 +2258,16 @@
 	.number-input-wrapper {
 		display: flex;
 		align-items: stretch;
-		background: var(--color-canvas-default);
-		border: 1px solid var(--color-border-default);
-		border-radius: 4px;
+		background: var(--settings-control-bg);
+		border: 1px solid var(--workbench-border);
+		border-radius: var(--workbench-control-radius);
 		overflow: hidden;
 		transition: border-color 0.1s;
 	}
 
 	.number-input-wrapper:focus-within {
 		border-color: var(--color-accent-fg);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-fg) 28%, transparent);
 	}
 
 	.number-input {
@@ -1953,7 +2292,7 @@
 
 	.number-input-wrapper.horizontal {
 		align-items: center;
-		height: 28px;
+		height: 34px;
 	}
 
 	.number-input-wrapper.horizontal .number-input {
@@ -1988,29 +2327,38 @@
 	}
 
 	.text-input {
-		background: var(--color-canvas-default);
-		border: 1px solid var(--color-border-default);
-		border-radius: 6px;
+		box-sizing: border-box;
+		background: var(--settings-control-bg);
+		border: 1px solid var(--workbench-border);
+		border-radius: var(--workbench-control-radius);
 		color: var(--color-fg-default);
+		height: 34px;
 		padding: 6px 10px;
 		font-size: 13px;
 		outline: none;
 	}
 
-	.text-input:focus {
+	.setting-item .text-input {
+		min-width: 0;
+	}
+
+	.text-input:focus-visible {
 		border-color: var(--color-accent-fg);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-fg) 28%, transparent);
 	}
 
 	.import-btn {
-		background: var(--color-canvas-subtle);
-		border: 1px solid var(--color-border-default);
-		border-radius: 6px;
+		box-sizing: border-box;
+		background: var(--settings-control-bg);
+		border: 1px solid var(--workbench-border);
+		border-radius: var(--workbench-control-radius);
 		color: var(--color-fg-default);
+		min-height: 34px;
 		padding: 6px 12px;
 		font-size: 13px;
 		cursor: pointer;
 		outline: none;
-		transition: all 0.1s;
+		transition: background-color 0.12s ease, border-color 0.12s ease;
 	}
 
 	.import-btn:hover:not(:disabled) {
@@ -2038,15 +2386,16 @@
 	.toggle {
 		position: relative;
 		display: inline-block;
-		width: 40px;
-		height: 20px;
+		width: 38px;
+		height: 22px;
 		cursor: pointer;
 	}
 
 	.toggle input {
+		position: absolute;
 		opacity: 0;
-		width: 0;
-		height: 0;
+		width: 1px;
+		height: 1px;
 	}
 
 	.toggle-slider {
@@ -2061,17 +2410,17 @@
 		transition:
 			background-color 0.2s,
 			border-color 0.2s;
-		border-radius: 20px;
+		border-radius: 999px;
 	}
 
 	.toggle-slider:before {
 		position: absolute;
 		content: '';
-		height: 12px;
-		width: 12px;
+		height: 14px;
+		width: 14px;
 		left: 3px;
 		bottom: 3px;
-		background-color: #abb2bf; 
+		background-color: var(--color-fg-muted);
 		transition:
 			transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
 			height 0.2s,
@@ -2088,80 +2437,117 @@
 	}
 
 	.toggle input:checked + .toggle-slider:before {
-		transform: translateX(20px);
+		transform: translateX(16px);
 		background-color: #fff;
 	}
-	.custom-dropdown-wrapper {
-		position: relative;
-		min-width: 140px;
-	}
 
-	.custom-dropdown-btn {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 4px 8px;
-		background-color: var(--color-canvas-default);
-		border: 1px solid var(--color-border-default);
-		border-radius: 4px;
-		color: var(--color-fg-default);
-		font-size: 13px;
-		font-family: inherit;
-		cursor: pointer;
-		outline: none;
-	}
-	.custom-dropdown-btn:hover {
-		background-color: var(--color-canvas-subtle);
+	.toggle input:focus-visible + .toggle-slider {
+		outline: 2px solid var(--color-accent-fg);
+		outline-offset: 2px;
 	}
 
-	.custom-dropdown-menu {
-		position: absolute;
-		top: 100%;
-		right: 0;
-		margin-top: 4px;
-		background-color: var(--color-canvas-default);
-		border: 1px solid var(--color-border-default);
-		border-radius: 6px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-		padding: 4px;
-		display: flex;
-		flex-direction: column;
-		min-width: 140px;
-		z-index: 10005;
-		gap: 1px;
+	@media (max-width: 680px) {
+		.settings-modal {
+			min-width: min(360px, 94vw);
+			width: 94vw;
+			max-width: 94vw;
+		}
+
+		.settings-nav {
+			width: 62px;
+			padding-inline: 8px;
+		}
+
+		.nav-item {
+			justify-content: center;
+			padding-inline: 8px;
+		}
+
+		.nav-label,
+		.nav-footer button > span {
+			display: none;
+		}
+
+		.github-btn,
+		.check-updates-btn {
+			justify-content: center;
+		}
+
+		.settings-panel {
+			padding: 24px 20px 32px;
+		}
+
+		.setting-item {
+			gap: 14px;
+		}
+
+		.setting-item select {
+			min-width: 150px;
+		}
 	}
 
-	.custom-dropdown-option {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		background: transparent;
-		border: none;
-		text-align: left;
-		padding: 6px 12px;
-		font-size: 13px;
-		color: var(--color-fg-default);
-		cursor: pointer;
-		border-radius: 4px;
-		font-family: inherit;
-		width: 100%;
+	@media (max-width: 460px) {
+		.settings-group-header {
+			align-items: flex-start;
+			flex-direction: column;
+			gap: 2px;
+			margin-bottom: 16px;
+		}
+
+		.reset-text-btn {
+			padding-left: 0;
+		}
+
+		.range-control {
+			gap: 8px;
+			min-width: 150px;
+		}
+
+		.range-control input[type='range'] {
+			width: 108px;
+		}
+
+		.range-control output {
+			min-width: 32px;
+		}
 	}
 
-	.custom-dropdown-option:hover {
-		background-color: var(--color-canvas-subtle);
+	@media (max-width: 380px) {
+		.surface-preference {
+			align-items: flex-start;
+			flex-direction: column;
+			gap: 8px;
+		}
+
+		.surface-preference .select-wrapper,
+		.surface-preference .range-control {
+			width: 100%;
+			min-width: 0;
+		}
+
+		.surface-preference select {
+			width: 100%;
+			min-width: 0;
+		}
+
+		.surface-preference .range-control input[type='range'] {
+			flex: 1;
+			width: auto;
+		}
 	}
 
-	.custom-dropdown-option.selected {
-		background-color: var(--color-canvas-subtle);
-		font-weight: 500;
+	@media (prefers-reduced-motion: reduce) {
+		.settings-modal *,
+		.settings-modal *::before,
+		.settings-modal *::after {
+			transition-duration: 0.01ms !important;
+		}
 	}
 
-	.color-circle {
-		width: 12px;
-		height: 12px;
-		border-radius: 50%;
-		flex-shrink: 0;
-		border: 1px solid rgba(128, 128, 128, 0.4);
+	@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+		.settings-modal.translucent,
+		.settings-modal.translucent .settings-nav {
+			background: var(--color-canvas-default);
+		}
 	}
 </style>
diff --git a/src/lib/components/TitleBar.svelte b/src/lib/components/TitleBar.svelte
index 9383894f..b5e72724 100644
--- a/src/lib/components/TitleBar.svelte
+++ b/src/lib/components/TitleBar.svelte
@@ -1003,13 +1003,13 @@
 		top: 100%;
 		right: 0;
 		margin-top: 4px;
-		background-color: var(--color-canvas-default);
-		border: 1px solid var(--color-border-default);
-		border-radius: 6px;
-		padding: 4px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+		background-color: var(--workbench-surface-base);
+		border: 1px solid var(--workbench-border-strong);
+		border-radius: 10px;
+		padding: 6px;
+		box-shadow: var(--workbench-shadow);
 		z-index: 10006;
-		width: 200px;
+		width: min(278px, calc(100vw - 16px));
 	}
 
 	.theme-dropdown-container {
@@ -1018,15 +1018,18 @@
 	}
 
 	.title-actions.show-dropdown .title-action-btn {
+		display: grid;
+		grid-template-columns: 16px minmax(0, 1fr) max-content;
 		width: 100%;
-		justify-content: flex-start;
 		align-items: center;
-		padding: 6px 12px;
+		padding: 7px 9px;
+		min-height: 34px;
 		height: auto;
 		font-size: 13px;
 		color: var(--color-fg-default);
 		font-family: var(--win-font);
-		gap: 8px;
+		gap: 9px;
+		border-radius: 6px;
 	}
 
 	.title-actions.show-dropdown .title-action-btn svg {
@@ -1053,9 +1056,9 @@
 		font-size: 13px;
 		text-align: left;
 		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1;
+		overflow: visible;
+		text-overflow: clip;
+		min-width: 0;
 	}
 
 	.action-label {
@@ -1083,18 +1086,19 @@
 
 	.title-actions.show-dropdown .menu-zoom-item {
 		width: 100%;
-		display: flex;
-		justify-content: flex-start;
+		display: grid;
+		grid-template-columns: 16px minmax(0, 1fr) max-content;
 		align-items: center;
-		padding: 6px 12px;
+		padding: 7px 9px;
+		min-height: 34px;
 		height: auto;
 		font-size: 13px;
 		color: var(--color-fg-default);
 		font-family: var(--win-font);
-		gap: 8px;
+		gap: 9px;
 		background: transparent;
 		border: none;
-		border-radius: 4px;
+		border-radius: 6px;
 		cursor: pointer;
 	}
 
@@ -1113,7 +1117,7 @@
 	}
 
 	:global(.title-actions.show-dropdown .menu-zoom-item .zoom-value) {
-		width: 32px;
+		width: auto;
 		text-align: left;
 		color: var(--color-fg-default);
 		display: inline-block;
@@ -1391,17 +1395,17 @@
 
 	.theme-menu {
 		position: absolute;
-		top: 100%;
-		right: 0;
-		margin-top: 4px;
-		background-color: var(--color-canvas-default);
-		border: 1px solid var(--color-border-default);
-		border-radius: 6px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-		padding: 4px;
+		top: -6px;
+		right: calc(100% + 8px);
+		margin-top: 0;
+		background-color: var(--workbench-surface-base);
+		border: 1px solid var(--workbench-border-strong);
+		border-radius: 10px;
+		box-shadow: var(--workbench-shadow);
+		padding: 6px;
 		display: flex;
 		flex-direction: column;
-		width: 120px;
+		width: 184px;
 		z-index: 10005;
 		gap: 1px;
 	}
@@ -1417,11 +1421,12 @@
 		background: transparent;
 		border: none;
 		text-align: left;
-		padding: 6px 12px;
-		font-size: 12px;
+		padding: 7px 9px;
+		min-height: 34px;
+		font-size: 13px;
 		color: var(--color-fg-default);
 		cursor: pointer;
-		border-radius: 4px;
+		border-radius: 6px;
 		font-family: var(--win-font);
 	}
 
@@ -1436,7 +1441,7 @@
 
 	.menu-shortcut {
 		display: none;
-		margin-left: auto;
+		margin-left: 12px;
 		font-size: 11px;
 		color: var(--color-fg-muted);
 		white-space: nowrap;
@@ -1460,29 +1465,31 @@
 		top: 100%;
 		left: 0;
 		margin-top: 4px;
-		background-color: var(--color-canvas-default);
-		border: 1px solid var(--color-border-default);
-		border-radius: 6px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-		padding: 4px;
+		background-color: var(--workbench-surface-base);
+		border: 1px solid var(--workbench-border-strong);
+		border-radius: 10px;
+		box-shadow: var(--workbench-shadow);
+		padding: 6px;
 		display: flex;
 		flex-direction: column;
-		width: 200px;
+		width: 246px;
 		z-index: 10006;
 		gap: 1px;
 	}
 
 	.home-menu-item {
-		display: flex;
+		display: grid;
+		grid-template-columns: 16px minmax(0, 1fr) max-content;
 		align-items: center;
 		background: transparent;
 		border: none;
 		text-align: left;
-		padding: 6px 12px;
+		padding: 7px 9px;
+		min-height: 34px;
 		font-size: 13px;
 		color: var(--color-fg-default);
 		cursor: pointer;
-		border-radius: 4px;
+		border-radius: 6px;
 		font-family: var(--win-font);
 		gap: 8px;
 		white-space: nowrap;
diff --git a/src/lib/stores/settings.svelte.ts b/src/lib/stores/settings.svelte.ts
index 8f7fa2ec..9e902507 100644
--- a/src/lib/stores/settings.svelte.ts
+++ b/src/lib/stores/settings.svelte.ts
@@ -1,4 +1,5 @@
 import { invoke } from '@tauri-apps/api/core';
+import { Effect, getCurrentWindow } from '@tauri-apps/api/window';
 import {
 	DEFAULT_EDITOR_TOOLBAR_ORDER,
 	applyEditorToolbarMove,
@@ -20,6 +21,7 @@ import {
 } from '../utils/titlebarToolbar.js';
 
 export type OSType = 'macos' | 'windows' | 'linux' | 'unknown';
+export type SettingsSurface = 'solid' | 'translucent';
 export type LanguageCode =
 	| 'en' // English
 	| 'ja' // Japanese
@@ -168,6 +170,10 @@ export class SettingsStore {
 	startInEditor = $state(false);
 	newFileDefaultMode = $state(true);
 	showRecentFiles = $state(true);
+	windowSurface = $state<SettingsSurface>('solid');
+	windowOpacity = $state(92);
+	windowBlur = $state(true);
+	windowBackdropDim = $state(48);
 	editorMaxWidth = $state(80);
 	pinnedToc = $state(false);
 	tocSide = $state<'left' | 'right'>('left');
@@ -188,6 +194,7 @@ export class SettingsStore {
 	previewFontSize = $state(16);
 	codeFont = $state('Consolas');
 	codeFontSize = $state(14);
+	private appliedWindowEffectKey = '';
 
 	// File-save behavior. autoSave = silently persist edits without Cmd+S.
 	// confirmBeforeSave = if true, keep the unsaved-changes modals on close/toggle
@@ -216,6 +223,10 @@ export class SettingsStore {
 			const savedStartInEditor = localStorage.getItem('editor.startInEditor');
 			const savedNewFileDefaultMode = localStorage.getItem('editor.newFileDefaultMode');
 			const savedShowRecentFiles = localStorage.getItem('editor.showRecentFiles');
+			const savedWindowSurface = localStorage.getItem('appearance.windowSurface') ?? localStorage.getItem('appearance.settingsSurface');
+			const savedWindowOpacity = localStorage.getItem('appearance.windowOpacity') ?? localStorage.getItem('appearance.settingsSurfaceOpacity');
+			const savedWindowBlur = localStorage.getItem('appearance.windowBlur') ?? localStorage.getItem('appearance.settingsSurfaceBlur');
+			const savedWindowBackdropDim = localStorage.getItem('appearance.windowBackdropDim') ?? localStorage.getItem('appearance.settingsBackdropDim');
 			const savedEditorMaxWidth = localStorage.getItem('editor.maxWidth');
 			const savedPinnedToc = localStorage.getItem('editor.pinnedToc');
 			const savedTocSide = localStorage.getItem('editor.tocSide');
@@ -284,6 +295,14 @@ export class SettingsStore {
 			if (savedStartInEditor !== null) this.startInEditor = savedStartInEditor === 'true';
 			if (savedNewFileDefaultMode !== null) this.newFileDefaultMode = savedNewFileDefaultMode === 'true';
 			if (savedShowRecentFiles !== null) this.showRecentFiles = savedShowRecentFiles === 'true';
+			if (savedWindowSurface === 'solid' || savedWindowSurface === 'translucent') {
+				this.windowSurface = savedWindowSurface;
+			}
+			this.windowOpacity = parseFontSize(savedWindowOpacity, 92, 72, 100);
+			if (savedWindowBlur !== null) {
+				this.windowBlur = savedWindowBlur === 'true' || savedWindowBlur === 'subtle' || savedWindowBlur === 'strong';
+			}
+			this.windowBackdropDim = parseFontSize(savedWindowBackdropDim, 48, 0, 70);
 			if (savedEditorMaxWidth !== null) this.editorMaxWidth = parseFontSize(savedEditorMaxWidth, 80, 20, 500);
 			if (savedPinnedToc !== null) this.pinnedToc = savedPinnedToc === 'true';
 			if (savedTocSide !== null) this.tocSide = savedTocSide as 'left' | 'right';
@@ -357,6 +376,17 @@ export class SettingsStore {
 					localStorage.setItem('editor.startInEditor', String(this.startInEditor));
 					localStorage.setItem('editor.newFileDefaultMode', String(this.newFileDefaultMode));
 					localStorage.setItem('editor.showRecentFiles', String(this.showRecentFiles));
+					localStorage.setItem('appearance.windowSurface', this.windowSurface);
+					localStorage.setItem('appearance.windowOpacity', String(this.windowOpacity));
+					localStorage.setItem('appearance.windowBlur', String(this.windowBlur));
+					localStorage.setItem('appearance.windowBackdropDim', String(this.windowBackdropDim));
+
+					const root = document.documentElement;
+					root.dataset.windowSurface = this.windowSurface;
+					root.style.setProperty('--window-surface-opacity', `${this.windowOpacity}%`);
+					root.style.setProperty('--window-surface-blur', this.windowBlur ? '18px' : '0px');
+					root.style.setProperty('--window-backdrop-dim-opacity', String(this.windowBackdropDim / 200));
+					void this.syncWindowEffects();
 					localStorage.setItem('editor.maxWidth', String(this.editorMaxWidth));
 					localStorage.setItem('editor.pinnedToc', String(this.pinnedToc));
 					localStorage.setItem('editor.tocSide', this.tocSide);
@@ -511,6 +541,29 @@ export class SettingsStore {
 		this.language = lang;
 	}
 
+	setWindowSurface(surface: SettingsSurface) {
+		this.windowSurface = surface;
+	}
+
+	setWindowOpacity(opacity: number) {
+		this.windowOpacity = Math.min(100, Math.max(72, Math.round(opacity)));
+	}
+
+	toggleWindowBlur() {
+		this.windowBlur = !this.windowBlur;
+	}
+
+	setWindowBackdropDim(dim: number) {
+		this.windowBackdropDim = Math.min(70, Math.max(0, Math.round(dim)));
+	}
+
+	resetWindowAppearance() {
+		this.windowSurface = 'solid';
+		this.windowOpacity = 92;
+		this.windowBlur = true;
+		this.windowBackdropDim = 48;
+	}
+
 	setEditorToolbarToolVisible(id: string, visible: boolean) {
 		const hidden = normalizeEditorToolbarHidden(this.editorToolbarHidden);
 		if (visible) {
@@ -585,6 +638,30 @@ export class SettingsStore {
 		}
 	}
 
+	private async syncWindowEffects() {
+		const osType = this.osType;
+		const enabled = this.windowSurface === 'translucent' && this.windowOpacity < 100 && this.windowBlur;
+		if (osType === 'unknown') return;
+		const effectKey = `${osType}:${enabled}`;
+		if (effectKey === this.appliedWindowEffectKey) return;
+
+		try {
+			const window = getCurrentWindow();
+			if (!enabled || osType === 'linux') {
+				await window.clearEffects();
+				this.appliedWindowEffectKey = effectKey;
+				return;
+			}
+
+			await window.setEffects({
+				effects: [osType === 'windows' ? Effect.Blur : Effect.UnderWindowBackground],
+			});
+			this.appliedWindowEffectKey = effectKey;
+		} catch (error) {
+			console.warn('Failed to update native window effects:', error);
+		}
+	}
+
 	resetEditorFont() {
 		const defaults = DEFAULT_FONTS[this.osType];
 		this.editorFont = defaults.editorFont;
diff --git a/src/lib/utils/editorToolbar.ts b/src/lib/utils/editorToolbar.ts
index 2415d0e1..66752105 100644
--- a/src/lib/utils/editorToolbar.ts
+++ b/src/lib/utils/editorToolbar.ts
@@ -4,6 +4,7 @@ export type EditorToolbarTool = {
 	id: string;
 	label: string;
 	name: string;
+	nameKey: string;
 	shortcut?: (modifier: 'Ctrl' | 'Cmd') => string;
 	group: EditorToolbarGroup;
 };
@@ -14,20 +15,20 @@ export type EditorToolbarMove = {
 };
 
 export const EDITOR_TOOLBAR_TOOLS: EditorToolbarTool[] = [
-	{ id: 'fmt-bold', label: 'B', name: 'Bold', shortcut: (modifier) => `${modifier}+B`, group: 'inline' },
-	{ id: 'fmt-italic', label: 'I', name: 'Italic', shortcut: (modifier) => `${modifier}+I`, group: 'inline' },
-	{ id: 'fmt-underline', label: 'U', name: 'Underline', shortcut: (modifier) => `${modifier}+U`, group: 'inline' },
-	{ id: 'fmt-inline-code', label: '`', name: 'Inline Code', group: 'inline' },
-	{ id: 'fmt-code-block', label: '{}', name: 'Code Block', group: 'block' },
-	{ id: 'fmt-quote', label: '>', name: 'Quote', group: 'block' },
-	{ id: 'fmt-heading-1', label: 'H1', name: 'Heading 1', group: 'block' },
-	{ id: 'fmt-heading-2', label: 'H2', name: 'Heading 2', group: 'block' },
-	{ id: 'fmt-heading-3', label: 'H3', name: 'Heading 3', group: 'block' },
-	{ id: 'fmt-bullet-list', label: '-', name: 'Bullet List', group: 'list' },
-	{ id: 'fmt-numbered-list', label: '1.', name: 'Numbered List', group: 'list' },
-	{ id: 'fmt-checklist', label: '[ ]', name: 'Checklist', group: 'list' },
-	{ id: 'fmt-link', label: '[]', name: 'Link', group: 'insert' },
-	{ id: 'insert-table-simple', label: '#', name: 'Table', shortcut: (modifier) => `${modifier}+K T`, group: 'insert' },
+	{ id: 'fmt-bold', label: 'B', name: 'Bold', nameKey: 'settings.toolbarToolBold', shortcut: (modifier) => `${modifier}+B`, group: 'inline' },
+	{ id: 'fmt-italic', label: 'I', name: 'Italic', nameKey: 'settings.toolbarToolItalic', shortcut: (modifier) => `${modifier}+I`, group: 'inline' },
+	{ id: 'fmt-underline', label: 'U', name: 'Underline', nameKey: 'settings.toolbarToolUnderline', shortcut: (modifier) => `${modifier}+U`, group: 'inline' },
+	{ id: 'fmt-inline-code', label: '`', name: 'Inline Code', nameKey: 'settings.toolbarToolInlineCode', group: 'inline' },
+	{ id: 'fmt-code-block', label: '{}', name: 'Code Block', nameKey: 'settings.toolbarToolCodeBlock', group: 'block' },
+	{ id: 'fmt-quote', label: '>', name: 'Quote', nameKey: 'settings.toolbarToolQuote', group: 'block' },
+	{ id: 'fmt-heading-1', label: 'H1', name: 'Heading 1', nameKey: 'settings.toolbarToolHeading1', group: 'block' },
+	{ id: 'fmt-heading-2', label: 'H2', name: 'Heading 2', nameKey: 'settings.toolbarToolHeading2', group: 'block' },
+	{ id: 'fmt-heading-3', label: 'H3', name: 'Heading 3', nameKey: 'settings.toolbarToolHeading3', group: 'block' },
+	{ id: 'fmt-bullet-list', label: '-', name: 'Bullet List', nameKey: 'settings.toolbarToolBulletList', group: 'list' },
+	{ id: 'fmt-numbered-list', label: '1.', name: 'Numbered List', nameKey: 'settings.toolbarToolNumberedList', group: 'list' },
+	{ id: 'fmt-checklist', label: '[ ]', name: 'Checklist', nameKey: 'settings.toolbarToolChecklist', group: 'list' },
+	{ id: 'fmt-link', label: '[]', name: 'Link', nameKey: 'settings.toolbarToolLink', group: 'insert' },
+	{ id: 'insert-table-simple', label: '#', name: 'Table', nameKey: 'settings.toolbarToolTable', shortcut: (modifier) => `${modifier}+K T`, group: 'insert' },
 ];
 
 export const DEFAULT_EDITOR_TOOLBAR_ORDER = EDITOR_TOOLBAR_TOOLS.map((tool) => tool.id);
diff --git a/src/lib/utils/i18n.ts b/src/lib/utils/i18n.ts
index d5c50404..ec00dc58 100644
--- a/src/lib/utils/i18n.ts
+++ b/src/lib/utils/i18n.ts
@@ -1,3 +1,8 @@
+import {
+	settingsRedesignTranslationKeys,
+	settingsRedesignTranslationValues
+} from './settingsRedesignTranslations';
+
 export type LanguageCode =
 	| 'en' // English
 	| 'ja' // Japanese
@@ -73,14 +78,26 @@ export const translations: Record<LanguageCode, Translation> = {
             editorSettings: 'Editor Settings',
             previewSettings: 'Preview Settings',
             appearanceSettings: 'Appearance Settings',
+			appearanceDescription: 'Personalize language, theme, and app surfaces',
+			searchPlaceholder: 'Search settings...',
+			noSearchResults: 'No settings found',
+			resetSection: 'Reset section',
+			interfaceSection: 'Interface',
+			markpadWindowSection: 'Markpad window',
+			behaviorSection: 'Behavior',
             toolbarsSettings: 'Toolbar Settings',
             fileSettings: 'File Settings',
             autoSave: 'Auto-save edits',
             confirmBeforeSave: 'Ask for confirmation before saving',
             resetEditorSettings: 'Reset editor settings',
-            resetFontSettings: 'Reset font settings',
-            font: 'Font',
-            fontSize: 'Font Size',
+			resetFontSettings: 'Reset font settings',
+			font: 'Font',
+			previewTextFont: 'Preview text font',
+			previewCodeFont: 'Code font',
+			fontPreview: 'Live font preview',
+			fontPreviewText: 'Markpad text preview',
+			editorFontPreview: 'Live editor font preview',
+			fontSize: 'Font Size',
             wrapColumn: 'Wrap Column',
             wordWrap: 'Word Wrap',
             lineNumbers: 'Line Numbers',
@@ -98,6 +115,28 @@ export const translations: Record<LanguageCode, Translation> = {
             showTableOfContents: 'Show Table of Contents',
             zenMode: 'Zen Mode',
             theme: 'Theme',
+            settingsSurface: 'Settings Surface',
+			windowSurface: 'Surface',
+			windowSurfaceDescription: 'Visual style for the entire app',
+			surfaceSolid: 'Solid',
+			surfaceTranslucent: 'Translucent',
+            surfaceOpacity: 'Surface Opacity',
+			surfaceOpacityDescription: 'Transparency across settings and editor',
+			surfaceBlur: 'Background Blur',
+			surfaceBlurDescription: 'Soften content behind the Markpad window',
+			surfaceControlRequiresTranslucent: 'Available with the Translucent surface',
+			surfaceBlurRequiresTransparency: 'Available when surface opacity is below 100%',
+			surfaceBlurUnavailableLinux: 'Unavailable on Linux because Tauri does not support native window effects',
+            blurOff: 'Off',
+            blurSubtle: 'Subtle',
+            blurStrong: 'Strong',
+            backdropDimming: 'Backdrop Dimming',
+			backdropDimmingDescription: 'Reduce distractions behind the window',
+			languageDescription: 'Application language',
+			themeDescription: 'Interface appearance',
+			themeLight: 'Light',
+			themeSystem: 'System',
+			themeDark: 'Dark',
             importVSCodeTheme: 'Import VS Code Theme',
             import: 'Import',
             importing: 'Importing...',
@@ -115,7 +154,21 @@ export const translations: Record<LanguageCode, Translation> = {
             toolbarPlacement: 'Toolbar placement',
             toolbarOnBar: 'Bar',
             toolbarInMenu: 'Menu',
-            resetToolbar: 'Reset toolbar',
+			resetToolbar: 'Reset toolbar',
+			toolbarToolBold: 'Bold',
+			toolbarToolItalic: 'Italic',
+			toolbarToolUnderline: 'Underline',
+			toolbarToolInlineCode: 'Inline code',
+			toolbarToolCodeBlock: 'Code block',
+			toolbarToolQuote: 'Quote',
+			toolbarToolHeading1: 'Heading 1',
+			toolbarToolHeading2: 'Heading 2',
+			toolbarToolHeading3: 'Heading 3',
+			toolbarToolBulletList: 'Bullet list',
+			toolbarToolNumberedList: 'Numbered list',
+			toolbarToolChecklist: 'Checklist',
+			toolbarToolLink: 'Link',
+			toolbarToolTable: 'Table',
             move: 'Move',
             moveUp: 'Move up',
             moveDown: 'Move down',
@@ -2570,10 +2623,22 @@ export const translations: Record<LanguageCode, Translation> = {
             editorSettings: 'Impostazioni Editor',
             previewSettings: 'Impostazioni Anteprima',
             appearanceSettings: 'Impostazioni Aspetto',
+			appearanceDescription: 'Personalizza lingua, tema e superfici',
+			searchPlaceholder: 'Cerca impostazioni...',
+			noSearchResults: 'Nessuna impostazione trovata',
+			resetSection: 'Ripristina sezione',
+			interfaceSection: 'Interfaccia',
+			markpadWindowSection: 'Finestra Markpad',
+			behaviorSection: 'Comportamento',
             resetEditorSettings: 'Reimposta impostazioni editor',
-            resetFontSettings: 'Reimposta impostazioni font',
-            font: 'Font',
-            fontSize: 'Dimensione font',
+			resetFontSettings: 'Reimposta impostazioni font',
+			font: 'Font',
+			previewTextFont: 'Font testo anteprima',
+			previewCodeFont: 'Font codice',
+			fontPreview: 'Anteprima font dal vivo',
+			fontPreviewText: 'Anteprima testo Markpad',
+			editorFontPreview: 'Anteprima dal vivo del font editor',
+			fontSize: 'Dimensione font',
             wrapColumn: 'Colonna a capo',
             wordWrap: 'A capo automatico',
             lineNumbers: 'Numeri riga',
@@ -2591,6 +2656,28 @@ export const translations: Record<LanguageCode, Translation> = {
             showTableOfContents: 'Mostra indice',
             zenMode: 'Modalità Zen',
             theme: 'Tema',
+            settingsSurface: 'Superficie impostazioni',
+			windowSurface: 'Superficie',
+			windowSurfaceDescription: 'Stile visivo per tutta l’app',
+			surfaceSolid: 'Solida',
+			surfaceTranslucent: 'Traslucida',
+            surfaceOpacity: 'Opacità superficie',
+			surfaceOpacityDescription: 'Trasparenza di impostazioni ed editor',
+			surfaceBlur: 'Sfocatura sfondo',
+			surfaceBlurDescription: 'Sfoca ciò che si trova dietro la finestra Markpad',
+			surfaceControlRequiresTranslucent: 'Disponibile con la superficie Traslucida',
+			surfaceBlurRequiresTransparency: 'Disponibile quando l’opacità della superficie è inferiore al 100%',
+			surfaceBlurUnavailableLinux: 'Non disponibile su Linux: Tauri non supporta gli effetti finestra nativi',
+            blurOff: 'Disattivata',
+            blurSubtle: 'Leggera',
+            blurStrong: 'Intensa',
+            backdropDimming: 'Oscuramento sfondo',
+			backdropDimmingDescription: 'Riduce le distrazioni dietro la finestra',
+			languageDescription: 'Lingua dell’applicazione',
+			themeDescription: 'Aspetto dell’interfaccia',
+			themeLight: 'Chiaro',
+			themeSystem: 'Sistema',
+			themeDark: 'Scuro',
             importVSCodeTheme: 'Importa tema VS Code',
             import: 'Importa',
             importing: 'Importazione...',
@@ -2599,9 +2686,28 @@ export const translations: Record<LanguageCode, Translation> = {
             vsCodeThemes: 'Temi VS Code',
             language: 'Lingua',
             highlightColor: 'Colore evidenziazione',
-            imageDirectory: 'Directory immagini',
-            scaleMacOSScreenshots: 'Riduci screenshot macOS',
-            reduceSizeBy50: 'Riduci del 50%',
+			imageDirectory: 'Directory immagini',
+			scaleMacOSScreenshots: 'Riduci screenshot macOS',
+			reduceSizeBy50: 'Riduci del 50%',
+			toolbar: 'Barra degli strumenti',
+			toolbars: 'Barre strumenti',
+			toolbarsSettings: 'Impostazioni barre degli strumenti',
+			editorToolbar: 'Barra dell’editor',
+			applicationToolbar: 'Barra dell’applicazione',
+			toolbarToolBold: 'Grassetto',
+			toolbarToolItalic: 'Corsivo',
+			toolbarToolUnderline: 'Sottolineato',
+			toolbarToolInlineCode: 'Codice in linea',
+			toolbarToolCodeBlock: 'Blocco di codice',
+			toolbarToolQuote: 'Citazione',
+			toolbarToolHeading1: 'Titolo 1',
+			toolbarToolHeading2: 'Titolo 2',
+			toolbarToolHeading3: 'Titolo 3',
+			toolbarToolBulletList: 'Elenco puntato',
+			toolbarToolNumberedList: 'Elenco numerato',
+			toolbarToolChecklist: 'Elenco attività',
+			toolbarToolLink: 'Collegamento',
+			toolbarToolTable: 'Tabella',
             default: 'Predefinito',
             cancel: 'Annulla',
             save: 'Salva',
@@ -2610,27 +2716,29 @@ export const translations: Record<LanguageCode, Translation> = {
             themeDefaultLight: 'Chiaro predefinito',
             themeDefaultDark: 'Scuro predefinito',
             themeFollowSystem: 'Segui sistema',
-            colors: {
-                default: 'Predefinito',
-                yellow: 'Giallo',
-                orange: 'Arancione',
-                red: 'Rosso',
-                pink: 'Rosa',
-                purple: 'Viola',
-                blue: 'Blu',
-                cyan: 'Ciano',
-                green: 'Verde'
-            },
-            files: 'File',
-            fileSettings: 'Impostazioni file',
-            autoSave: 'Salvataggio automatico delle modifiche',
-            confirmBeforeSave: 'Chiedi conferma prima di salvare'
-        },
-        menu: {
-            file: 'File',
-            edit: 'Modifica',
-            view: 'Visualizza',
-            help: 'Aiuto',
+			files: 'File',
+			fileSettings: 'Impostazioni file',
+			autoSave: 'Salvataggio automatico delle modifiche',
+			confirmBeforeSave: 'Chiedi conferma prima di salvare'
+		},
+		colors: {
+			default: 'Predefinito',
+			yellow: 'Giallo',
+			orange: 'Arancione',
+			red: 'Rosso',
+			pink: 'Rosa',
+			purple: 'Viola',
+			blue: 'Blu',
+			cyan: 'Ciano',
+			green: 'Verde'
+		},
+		menu: {
+			file: 'File',
+			edit: 'Modifica',
+			view: 'Visualizza',
+			help: 'Aiuto',
+			back: 'Indietro',
+			forward: 'Avanti',
             newFile: 'Nuovo file',
             openFile: 'Apri file',
             save: 'Salva',
@@ -2651,9 +2759,10 @@ export const translations: Record<LanguageCode, Translation> = {
             zoomIn: 'Zoom avanti',
             zoomOut: 'Zoom indietro',
             resetZoom: 'Reimposta zoom',
-            settings: 'Impostazioni',
-            about: 'Informazioni',
-            github: 'GitHub',
+			settings: 'Impostazioni',
+			about: 'Informazioni',
+			checkForUpdates: 'Controlla aggiornamenti…',
+			github: 'GitHub',
             documentation: 'Documentazione',
             home: 'Home',
             exportHtml: 'Esporta come HTML',
@@ -2738,10 +2847,12 @@ export const translations: Record<LanguageCode, Translation> = {
             defaultLight: 'Chiaro predefinito',
             defaultDark: 'Scuro predefinito'
         },
-        tooltip: {
-            menu: 'Menu',
-            more: 'Altro',
-            moreActions: 'Altre azioni',
+		tooltip: {
+			menu: 'Menu',
+			more: 'Altro',
+			moreActions: 'Altre azioni',
+			reloadFromDisk: 'Ricarica dal disco',
+			showTableOfContents: 'Mostra indice',
             settings: 'Impostazioni',
             resetZoom: 'Reimposta zoom',
             reset: 'Reimposta',
@@ -6542,6 +6653,64 @@ for (const [language, sections] of Object.entries(interactiveLabelTranslations)
     }
 }
 
+function setTranslationValue(language: LanguageCode, key: string, value: string) {
+	const parts = key.split('.');
+	const property = parts.pop();
+	if (!property) return;
+
+	let section: Translation = translations[language];
+	for (const part of parts) {
+		const current = section[part];
+		if (!current || typeof current === 'string') section[part] = {};
+		section = section[part] as Translation;
+	}
+	section[property] = value;
+}
+
+for (const [language, values] of Object.entries(settingsRedesignTranslationValues) as [LanguageCode, readonly string[]][]) {
+	if (values.length !== settingsRedesignTranslationKeys.length) {
+		throw new Error(
+			`Settings redesign translations for ${language} contain ${values.length} values; expected ${settingsRedesignTranslationKeys.length}`
+		);
+	}
+
+	settingsRedesignTranslationKeys.forEach((key, index) => {
+		setTranslationValue(language, key, values[index]);
+	});
+}
+
+const redesignTranslationAliases = [
+	['settings.toolbarToolBold', 'menu.bold'],
+	['settings.toolbarToolItalic', 'menu.italic'],
+	['settings.toolbarToolUnderline', 'menu.underline'],
+	['settings.toolbarToolTable', 'menu.insertTable'],
+	['tooltip.showTableOfContents', 'settings.showTableOfContents']
+] as const;
+
+for (const { code: language } of getSupportedLanguages()) {
+	for (const [targetKey, sourceKey] of redesignTranslationAliases) {
+		const sourceParts = sourceKey.split('.');
+		let value: string | Translation | undefined = translations[language];
+		for (const part of sourceParts) {
+			value = value && typeof value !== 'string' ? value[part] : undefined;
+		}
+		if (typeof value === 'string') setTranslationValue(language, targetKey, value);
+	}
+}
+
+const highlightColorTranslationKeys = ['default', 'yellow', 'orange', 'red', 'pink', 'purple', 'blue', 'cyan', 'green'] as const;
+
+for (const { code: language } of getSupportedLanguages()) {
+	const settingsSection = translations[language].settings;
+	const nestedColors = settingsSection && typeof settingsSection !== 'string' ? settingsSection.colors : undefined;
+	if (!nestedColors || typeof nestedColors === 'string') continue;
+
+	for (const color of highlightColorTranslationKeys) {
+		const value = nestedColors[color];
+		if (typeof value === 'string') setTranslationValue(language, `colors.${color}`, value);
+	}
+}
+
 export function t(key: string, lang: LanguageCode = 'en'): string {
     const keys = key.split('.');
     
diff --git a/src/lib/utils/settingsRedesignTranslations.ts b/src/lib/utils/settingsRedesignTranslations.ts
new file mode 100644
index 00000000..7af6538f
--- /dev/null
+++ b/src/lib/utils/settingsRedesignTranslations.ts
@@ -0,0 +1,251 @@
+import type { LanguageCode } from './i18n';
+
+export const settingsRedesignTranslationKeys = [
+	'settings.appearanceDescription',
+	'settings.searchPlaceholder',
+	'settings.noSearchResults',
+	'settings.resetSection',
+	'settings.interfaceSection',
+	'settings.markpadWindowSection',
+	'settings.behaviorSection',
+	'settings.toolbarsSettings',
+	'settings.previewTextFont',
+	'settings.previewCodeFont',
+	'settings.fontPreview',
+	'settings.fontPreviewText',
+	'settings.editorFontPreview',
+	'settings.windowSurface',
+	'settings.windowSurfaceDescription',
+	'settings.surfaceSolid',
+	'settings.surfaceTranslucent',
+	'settings.surfaceOpacity',
+	'settings.surfaceBlur',
+	'settings.surfaceControlRequiresTranslucent',
+	'settings.surfaceBlurRequiresTransparency',
+	'settings.surfaceBlurUnavailableLinux',
+	'settings.backdropDimming',
+	'settings.languageDescription',
+	'settings.themeDescription',
+	'settings.themeLight',
+	'settings.themeSystem',
+	'settings.themeDark',
+	'settings.editorToolbar',
+	'settings.applicationToolbar',
+	'settings.toolbarToolInlineCode',
+	'settings.toolbarToolCodeBlock',
+	'settings.toolbarToolQuote',
+	'settings.toolbarToolHeading1',
+	'settings.toolbarToolHeading2',
+	'settings.toolbarToolHeading3',
+	'settings.toolbarToolBulletList',
+	'settings.toolbarToolNumberedList',
+	'settings.toolbarToolChecklist',
+	'settings.toolbarToolLink',
+	'settings.toolbars',
+	'menu.checkForUpdates',
+	'menu.back',
+	'menu.forward',
+	'tooltip.reloadFromDisk',
+	'settings.surfaceOpacityDescription',
+	'settings.surfaceBlurDescription',
+	'settings.backdropDimmingDescription'
+] as const;
+
+type RedesignLanguage = Exclude<LanguageCode, 'en' | 'it'>;
+
+// Values follow settingsRedesignTranslationKeys. Keeping the keys in one place makes
+// missing redesign strings detectable without duplicating 45 property names per locale.
+export const settingsRedesignTranslationValues: Record<RedesignLanguage, readonly string[]> = {
+	ja: [
+		'言語、テーマ、アプリの表示をカスタマイズ', '設定を検索...', '設定が見つかりません', 'セクションをリセット', 'インターフェース', 'Markpad ウィンドウ', '動作', 'ツールバー設定',
+		'プレビューテキストのフォント', 'コードフォント', 'フォントのライブプレビュー', 'Markpad テキストプレビュー', 'エディターのライブフォントプレビュー',
+		'表示スタイル', 'アプリ全体の表示スタイル', '不透明', '半透明', '表示の不透明度', '背景のぼかし', '半透明の表示スタイルで利用できます', '表示の不透明度が 100% 未満のとき利用できます', 'Tauri がネイティブウィンドウ効果をサポートしていないため Linux では利用できません', '背景を暗くする',
+		'アプリケーションの言語', 'インターフェースの外観', 'ライト', 'システム', 'ダーク',
+		'エディターツールバー', 'アプリケーションツールバー', 'インラインコード', 'コードブロック', '引用', '見出し 1', '見出し 2', '見出し 3', '箇条書き', '番号付きリスト', 'チェックリスト', 'リンク', 'ツールバー',
+		'更新を確認…', '戻る', '進む', 'ディスクから再読み込み', '設定画面とエディターの透明度', 'Markpad ウィンドウの背後を柔らかくぼかします', 'ウィンドウ背後の気を散らす要素を抑えます'
+	],
+	'zh-CN': [
+		'自定义语言、主题和应用表面', '搜索设置...', '未找到设置', '重置此部分', '界面', 'Markpad 窗口', '行为', '工具栏设置',
+		'预览文本字体', '代码字体', '实时字体预览', 'Markpad 文本预览', '实时编辑器字体预览',
+		'表面', '整个应用的视觉样式', '实色', '半透明', '表面不透明度', '背景模糊', '使用半透明表面时可用', '表面不透明度低于 100% 时可用', 'Tauri 不支持原生窗口效果，因此在 Linux 上不可用', '背景变暗',
+		'应用语言', '界面外观', '浅色', '系统', '深色',
+		'编辑器工具栏', '应用工具栏', '行内代码', '代码块', '引用', '标题 1', '标题 2', '标题 3', '项目符号列表', '编号列表', '任务列表', '链接', '工具栏',
+		'检查更新…', '后退', '前进', '从磁盘重新加载', '设置和编辑器的透明度', '柔化 Markpad 窗口后面的内容', '减少窗口后面的干扰'
+	],
+	'zh-TW': [
+		'自訂語言、主題與應用程式表面', '搜尋設定...', '找不到設定', '重設此區段', '介面', 'Markpad 視窗', '行為', '工具列設定',
+		'預覽文字字型', '程式碼字型', '即時字型預覽', 'Markpad 文字預覽', '即時編輯器字型預覽',
+		'表面', '整個應用程式的視覺樣式', '實色', '半透明', '表面不透明度', '背景模糊', '使用半透明表面時可用', '表面不透明度低於 100% 時可用', 'Tauri 不支援原生視窗效果，因此在 Linux 上無法使用', '背景變暗',
+		'應用程式語言', '介面外觀', '淺色', '系統', '深色',
+		'編輯器工具列', '應用程式工具列', '行內程式碼', '程式碼區塊', '引用', '標題 1', '標題 2', '標題 3', '項目符號清單', '編號清單', '核取清單', '連結', '工具列',
+		'檢查更新…', '上一頁', '下一頁', '從磁碟重新載入', '設定與編輯器的透明度', '柔化 Markpad 視窗後方的內容', '減少視窗後方的干擾'
+	],
+	ko: [
+		'언어, 테마 및 앱 표면을 맞춤 설정', '설정 검색...', '설정을 찾을 수 없음', '섹션 초기화', '인터페이스', 'Markpad 창', '동작', '도구 모음 설정',
+		'미리보기 텍스트 글꼴', '코드 글꼴', '실시간 글꼴 미리보기', 'Markpad 텍스트 미리보기', '실시간 편집기 글꼴 미리보기',
+		'표면', '앱 전체의 시각적 스타일', '불투명', '반투명', '표면 불투명도', '배경 흐림', '반투명 표면에서 사용할 수 있습니다', '표면 불투명도가 100% 미만일 때 사용할 수 있습니다', 'Tauri가 네이티브 창 효과를 지원하지 않아 Linux에서는 사용할 수 없습니다', '배경 어둡게',
+		'애플리케이션 언어', '인터페이스 모양', '밝게', '시스템', '어둡게',
+		'편집기 도구 모음', '애플리케이션 도구 모음', '인라인 코드', '코드 블록', '인용문', '제목 1', '제목 2', '제목 3', '글머리 기호 목록', '번호 매기기 목록', '체크리스트', '링크', '도구 모음',
+		'업데이트 확인…', '뒤로', '앞으로', '디스크에서 다시 로드', '설정 및 편집기의 투명도', 'Markpad 창 뒤의 콘텐츠를 부드럽게 흐립니다', '창 뒤의 방해 요소를 줄입니다'
+	],
+	ru: [
+		'Настройте язык, тему и оформление приложения', 'Поиск настроек...', 'Настройки не найдены', 'Сбросить раздел', 'Интерфейс', 'Окно Markpad', 'Поведение', 'Настройки панелей инструментов',
+		'Шрифт текста предпросмотра', 'Шрифт кода', 'Предпросмотр шрифта', 'Предпросмотр текста Markpad', 'Предпросмотр шрифта редактора',
+		'Оформление', 'Визуальный стиль всего приложения', 'Сплошное', 'Полупрозрачное', 'Непрозрачность поверхности', 'Размытие фона', 'Доступно с полупрозрачным оформлением', 'Доступно при непрозрачности ниже 100%', 'Недоступно в Linux: Tauri не поддерживает системные эффекты окна', 'Затемнение фона',
+		'Язык приложения', 'Внешний вид интерфейса', 'Светлая', 'Системная', 'Тёмная',
+		'Панель редактора', 'Панель приложения', 'Встроенный код', 'Блок кода', 'Цитата', 'Заголовок 1', 'Заголовок 2', 'Заголовок 3', 'Маркированный список', 'Нумерованный список', 'Список задач', 'Ссылка', 'Панели инструментов',
+		'Проверить обновления…', 'Назад', 'Вперёд', 'Перезагрузить с диска', 'Прозрачность настроек и редактора', 'Смягчает содержимое за окном Markpad', 'Уменьшает отвлекающие элементы за окном'
+	],
+	es: [
+		'Personaliza el idioma, el tema y las superficies de la aplicación', 'Buscar ajustes...', 'No se encontraron ajustes', 'Restablecer sección', 'Interfaz', 'Ventana de Markpad', 'Comportamiento', 'Ajustes de las barras de herramientas',
+		'Fuente del texto de vista previa', 'Fuente del código', 'Vista previa de fuente en directo', 'Vista previa de texto de Markpad', 'Vista previa de fuente del editor',
+		'Superficie', 'Estilo visual de toda la aplicación', 'Sólida', 'Translúcida', 'Opacidad de la superficie', 'Desenfoque del fondo', 'Disponible con la superficie translúcida', 'Disponible cuando la opacidad es inferior al 100 %', 'No disponible en Linux porque Tauri no admite efectos de ventana nativos', 'Oscurecimiento del fondo',
+		'Idioma de la aplicación', 'Aspecto de la interfaz', 'Claro', 'Sistema', 'Oscuro',
+		'Barra del editor', 'Barra de la aplicación', 'Código en línea', 'Bloque de código', 'Cita', 'Encabezado 1', 'Encabezado 2', 'Encabezado 3', 'Lista con viñetas', 'Lista numerada', 'Lista de tareas', 'Enlace', 'Barras de herramientas',
+		'Buscar actualizaciones…', 'Atrás', 'Adelante', 'Recargar desde el disco', 'Transparencia de los ajustes y el editor', 'Suaviza el contenido detrás de la ventana de Markpad', 'Reduce las distracciones detrás de la ventana'
+	],
+	fr: [
+		'Personnalisez la langue, le thème et les surfaces de l’application', 'Rechercher dans les paramètres...', 'Aucun paramètre trouvé', 'Réinitialiser la section', 'Interface', 'Fenêtre Markpad', 'Comportement', 'Paramètres des barres d’outils',
+		'Police du texte d’aperçu', 'Police du code', 'Aperçu de la police en direct', 'Aperçu du texte Markpad', 'Aperçu de la police de l’éditeur',
+		'Surface', 'Style visuel de toute l’application', 'Opaque', 'Translucide', 'Opacité de la surface', 'Flou d’arrière-plan', 'Disponible avec la surface translucide', 'Disponible lorsque l’opacité est inférieure à 100 %', 'Indisponible sous Linux car Tauri ne prend pas en charge les effets de fenêtre natifs', 'Assombrissement de l’arrière-plan',
+		'Langue de l’application', 'Apparence de l’interface', 'Clair', 'Système', 'Sombre',
+		'Barre d’outils de l’éditeur', 'Barre d’outils de l’application', 'Code en ligne', 'Bloc de code', 'Citation', 'Titre 1', 'Titre 2', 'Titre 3', 'Liste à puces', 'Liste numérotée', 'Liste de tâches', 'Lien', 'Barres d’outils',
+		'Rechercher des mises à jour…', 'Retour', 'Suivant', 'Recharger depuis le disque', 'Transparence des paramètres et de l’éditeur', 'Adoucit le contenu derrière la fenêtre Markpad', 'Réduit les distractions derrière la fenêtre'
+	],
+	de: [
+		'Sprache, Design und App-Oberflächen anpassen', 'Einstellungen durchsuchen...', 'Keine Einstellungen gefunden', 'Abschnitt zurücksetzen', 'Benutzeroberfläche', 'Markpad-Fenster', 'Verhalten', 'Symbolleisteneinstellungen',
+		'Schrift für Vorschautext', 'Codeschrift', 'Live-Schriftvorschau', 'Markpad-Textvorschau', 'Live-Schriftvorschau des Editors',
+		'Oberfläche', 'Visueller Stil der gesamten App', 'Deckend', 'Durchscheinend', 'Deckkraft der Oberfläche', 'Hintergrundunschärfe', 'Mit durchscheinender Oberfläche verfügbar', 'Bei einer Deckkraft unter 100 % verfügbar', 'Unter Linux nicht verfügbar, da Tauri keine nativen Fenstereffekte unterstützt', 'Hintergrundabdunklung',
+		'Anwendungssprache', 'Erscheinungsbild der Oberfläche', 'Hell', 'System', 'Dunkel',
+		'Editor-Symbolleiste', 'Anwendungs-Symbolleiste', 'Inlinecode', 'Codeblock', 'Zitat', 'Überschrift 1', 'Überschrift 2', 'Überschrift 3', 'Aufzählung', 'Nummerierte Liste', 'Aufgabenliste', 'Link', 'Symbolleisten',
+		'Nach Updates suchen…', 'Zurück', 'Vorwärts', 'Von Festplatte neu laden', 'Transparenz von Einstellungen und Editor', 'Macht Inhalte hinter dem Markpad-Fenster weicher', 'Reduziert Ablenkungen hinter dem Fenster'
+	],
+	'pt-BR': [
+		'Personalize o idioma, o tema e as superfícies do aplicativo', 'Pesquisar configurações...', 'Nenhuma configuração encontrada', 'Redefinir seção', 'Interface', 'Janela do Markpad', 'Comportamento', 'Configurações das barras de ferramentas',
+		'Fonte do texto de visualização', 'Fonte do código', 'Visualização da fonte em tempo real', 'Visualização de texto do Markpad', 'Visualização da fonte do editor',
+		'Superfície', 'Estilo visual de todo o aplicativo', 'Sólida', 'Translúcida', 'Opacidade da superfície', 'Desfoque do fundo', 'Disponível com a superfície translúcida', 'Disponível quando a opacidade está abaixo de 100%', 'Indisponível no Linux porque o Tauri não oferece suporte a efeitos nativos de janela', 'Escurecimento do fundo',
+		'Idioma do aplicativo', 'Aparência da interface', 'Claro', 'Sistema', 'Escuro',
+		'Barra do editor', 'Barra do aplicativo', 'Código embutido', 'Bloco de código', 'Citação', 'Título 1', 'Título 2', 'Título 3', 'Lista com marcadores', 'Lista numerada', 'Lista de tarefas', 'Link', 'Barras de ferramentas',
+		'Procurar atualizações…', 'Voltar', 'Avançar', 'Recarregar do disco', 'Transparência nas configurações e no editor', 'Suaviza o conteúdo atrás da janela do Markpad', 'Reduz as distrações atrás da janela'
+	],
+	pl: [
+		'Dostosuj język, motyw i powierzchnie aplikacji', 'Szukaj ustawień...', 'Nie znaleziono ustawień', 'Zresetuj sekcję', 'Interfejs', 'Okno Markpad', 'Zachowanie', 'Ustawienia pasków narzędzi',
+		'Czcionka tekstu podglądu', 'Czcionka kodu', 'Podgląd czcionki na żywo', 'Podgląd tekstu Markpad', 'Podgląd czcionki edytora na żywo',
+		'Powierzchnia', 'Styl wizualny całej aplikacji', 'Pełna', 'Półprzezroczysta', 'Krycie powierzchni', 'Rozmycie tła', 'Dostępne z półprzezroczystą powierzchnią', 'Dostępne, gdy krycie jest mniejsze niż 100%', 'Niedostępne w systemie Linux, ponieważ Tauri nie obsługuje natywnych efektów okna', 'Przyciemnienie tła',
+		'Język aplikacji', 'Wygląd interfejsu', 'Jasny', 'System', 'Ciemny',
+		'Pasek edytora', 'Pasek aplikacji', 'Kod w tekście', 'Blok kodu', 'Cytat', 'Nagłówek 1', 'Nagłówek 2', 'Nagłówek 3', 'Lista punktowana', 'Lista numerowana', 'Lista zadań', 'Łącze', 'Paski narzędzi',
+		'Sprawdź aktualizacje…', 'Wstecz', 'Dalej', 'Wczytaj ponownie z dysku', 'Przezroczystość ustawień i edytora', 'Zmiękcza zawartość za oknem Markpad', 'Ogranicza elementy rozpraszające za oknem'
+	],
+	nl: [
+		'Pas taal, thema en app-oppervlakken aan', 'Instellingen zoeken...', 'Geen instellingen gevonden', 'Sectie resetten', 'Interface', 'Markpad-venster', 'Gedrag', 'Werkbalkinstellingen',
+		'Lettertype voor voorbeeldtekst', 'Lettertype voor code', 'Live lettertypevoorbeeld', 'Markpad-tekstvoorbeeld', 'Live lettertypevoorbeeld van editor',
+		'Oppervlak', 'Visuele stijl voor de hele app', 'Effen', 'Doorschijnend', 'Dekking van oppervlak', 'Achtergrondvervaging', 'Beschikbaar met het doorschijnende oppervlak', 'Beschikbaar wanneer de dekking lager is dan 100%', 'Niet beschikbaar op Linux omdat Tauri geen systeemeigen venstereffecten ondersteunt', 'Achtergrond dimmen',
+		'Applicatietaal', 'Uiterlijk van de interface', 'Licht', 'Systeem', 'Donker',
+		'Editorwerkbalk', 'Applicatiewerkbalk', 'Inlinecode', 'Codeblok', 'Citaat', 'Kop 1', 'Kop 2', 'Kop 3', 'Opsomming', 'Genummerde lijst', 'Takenlijst', 'Koppeling', 'Werkbalken',
+		'Controleren op updates…', 'Terug', 'Vooruit', 'Opnieuw laden vanaf schijf', 'Transparantie van instellingen en editor', 'Verzacht inhoud achter het Markpad-venster', 'Vermindert afleiding achter het venster'
+	],
+	sv: [
+		'Anpassa språk, tema och appytor', 'Sök inställningar...', 'Inga inställningar hittades', 'Återställ avsnitt', 'Gränssnitt', 'Markpad-fönster', 'Beteende', 'Inställningar för verktygsfält',
+		'Teckensnitt för förhandsgranskning', 'Kodteckensnitt', 'Direkt förhandsgranskning av teckensnitt', 'Förhandsgranskning av Markpad-text', 'Direkt förhandsgranskning av redigerarens teckensnitt',
+		'Yta', 'Visuell stil för hela appen', 'Solid', 'Genomskinlig', 'Ytans opacitet', 'Bakgrundsoskärpa', 'Tillgängligt med genomskinlig yta', 'Tillgängligt när opaciteten är under 100 %', 'Inte tillgängligt på Linux eftersom Tauri inte stöder inbyggda fönstereffekter', 'Bakgrundsdämpning',
+		'Appens språk', 'Gränssnittets utseende', 'Ljust', 'System', 'Mörkt',
+		'Redigerarens verktygsfält', 'Appens verktygsfält', 'Infogad kod', 'Kodblock', 'Citat', 'Rubrik 1', 'Rubrik 2', 'Rubrik 3', 'Punktlista', 'Numrerad lista', 'Checklista', 'Länk', 'Verktygsfält',
+		'Sök efter uppdateringar…', 'Bakåt', 'Framåt', 'Läs in från disk igen', 'Genomskinlighet för inställningar och editor', 'Mjukar upp innehåll bakom Markpad-fönstret', 'Minskar distraktioner bakom fönstret'
+	],
+	vi: [
+		'Tùy chỉnh ngôn ngữ, chủ đề và bề mặt ứng dụng', 'Tìm kiếm cài đặt...', 'Không tìm thấy cài đặt', 'Đặt lại mục', 'Giao diện', 'Cửa sổ Markpad', 'Hành vi', 'Cài đặt thanh công cụ',
+		'Phông chữ văn bản xem trước', 'Phông chữ mã', 'Xem trước phông chữ trực tiếp', 'Xem trước văn bản Markpad', 'Xem trước phông chữ trình soạn thảo',
+		'Bề mặt', 'Kiểu hiển thị cho toàn bộ ứng dụng', 'Đặc', 'Trong mờ', 'Độ mờ bề mặt', 'Làm mờ nền', 'Khả dụng với bề mặt trong mờ', 'Khả dụng khi độ mờ dưới 100%', 'Không khả dụng trên Linux vì Tauri không hỗ trợ hiệu ứng cửa sổ gốc', 'Làm tối nền',
+		'Ngôn ngữ ứng dụng', 'Giao diện hiển thị', 'Sáng', 'Hệ thống', 'Tối',
+		'Thanh công cụ trình soạn thảo', 'Thanh công cụ ứng dụng', 'Mã nội dòng', 'Khối mã', 'Trích dẫn', 'Tiêu đề 1', 'Tiêu đề 2', 'Tiêu đề 3', 'Danh sách dấu đầu dòng', 'Danh sách đánh số', 'Danh sách kiểm tra', 'Liên kết', 'Thanh công cụ',
+		'Kiểm tra bản cập nhật…', 'Quay lại', 'Tiến', 'Tải lại từ đĩa', 'Độ trong suốt của cài đặt và trình soạn thảo', 'Làm dịu nội dung phía sau cửa sổ Markpad', 'Giảm sự phân tâm phía sau cửa sổ'
+	],
+	pt: [
+		'Personalize o idioma, o tema e as superfícies da aplicação', 'Pesquisar definições...', 'Nenhuma definição encontrada', 'Repor secção', 'Interface', 'Janela do Markpad', 'Comportamento', 'Definições das barras de ferramentas',
+		'Tipo de letra do texto de pré-visualização', 'Tipo de letra do código', 'Pré-visualização do tipo de letra em tempo real', 'Pré-visualização de texto do Markpad', 'Pré-visualização do tipo de letra do editor',
+		'Superfície', 'Estilo visual de toda a aplicação', 'Sólida', 'Translúcida', 'Opacidade da superfície', 'Desfocagem do fundo', 'Disponível com a superfície translúcida', 'Disponível quando a opacidade é inferior a 100%', 'Indisponível no Linux porque o Tauri não suporta efeitos nativos de janela', 'Escurecimento do fundo',
+		'Idioma da aplicação', 'Aspeto da interface', 'Claro', 'Sistema', 'Escuro',
+		'Barra do editor', 'Barra da aplicação', 'Código em linha', 'Bloco de código', 'Citação', 'Título 1', 'Título 2', 'Título 3', 'Lista com marcas', 'Lista numerada', 'Lista de tarefas', 'Ligação', 'Barras de ferramentas',
+		'Procurar atualizações…', 'Voltar', 'Avançar', 'Recarregar do disco', 'Transparência nas definições e no editor', 'Suaviza o conteúdo atrás da janela do Markpad', 'Reduz as distrações atrás da janela'
+	],
+	ro: [
+		'Personalizează limba, tema și suprafețele aplicației', 'Caută setări...', 'Nu s-au găsit setări', 'Resetează secțiunea', 'Interfață', 'Fereastra Markpad', 'Comportament', 'Setări bare de instrumente',
+		'Font pentru textul previzualizării', 'Font pentru cod', 'Previzualizare live a fontului', 'Previzualizare text Markpad', 'Previzualizare live a fontului editorului',
+		'Suprafață', 'Stil vizual pentru întreaga aplicație', 'Solidă', 'Translucidă', 'Opacitatea suprafeței', 'Estomparea fundalului', 'Disponibil cu suprafața translucidă', 'Disponibil când opacitatea este sub 100%', 'Indisponibil în Linux deoarece Tauri nu acceptă efecte native pentru ferestre', 'Întunecarea fundalului',
+		'Limba aplicației', 'Aspectul interfeței', 'Luminos', 'Sistem', 'Întunecat',
+		'Bara editorului', 'Bara aplicației', 'Cod în linie', 'Bloc de cod', 'Citat', 'Titlu 1', 'Titlu 2', 'Titlu 3', 'Listă cu marcatori', 'Listă numerotată', 'Listă de verificare', 'Legătură', 'Bare de instrumente',
+		'Caută actualizări…', 'Înapoi', 'Înainte', 'Reîncarcă de pe disc', 'Transparența setărilor și a editorului', 'Estompează conținutul din spatele ferestrei Markpad', 'Reduce distragerile din spatele ferestrei'
+	],
+	hu: [
+		'A nyelv, a téma és az alkalmazásfelületek testreszabása', 'Beállítások keresése...', 'Nem található beállítás', 'Szakasz visszaállítása', 'Felület', 'Markpad ablak', 'Működés', 'Eszköztár-beállítások',
+		'Előnézeti szöveg betűtípusa', 'Kód betűtípusa', 'Élő betűtípus-előnézet', 'Markpad szövegelőnézet', 'A szerkesztő betűtípusának élő előnézete',
+		'Felületstílus', 'Az egész alkalmazás vizuális stílusa', 'Tömör', 'Áttetsző', 'Felület átlátszatlansága', 'Háttér elmosása', 'Az áttetsző felülettel érhető el', '100% alatti átlátszatlanságnál érhető el', 'Linuxon nem érhető el, mert a Tauri nem támogatja a natív ablakeffektusokat', 'Háttér sötétítése',
+		'Alkalmazás nyelve', 'A felület megjelenése', 'Világos', 'Rendszer', 'Sötét',
+		'Szerkesztő eszköztára', 'Alkalmazás eszköztára', 'Sorközi kód', 'Kódblokk', 'Idézet', 'Címsor 1', 'Címsor 2', 'Címsor 3', 'Felsorolás', 'Számozott lista', 'Ellenőrzőlista', 'Hivatkozás', 'Eszköztárak',
+		'Frissítések keresése…', 'Vissza', 'Előre', 'Újratöltés lemezről', 'A beállítások és a szerkesztő átlátszósága', 'Lágyítja a Markpad ablak mögötti tartalmat', 'Csökkenti az ablak mögötti zavaró elemeket'
+	],
+	cs: [
+		'Přizpůsobte jazyk, motiv a povrchy aplikace', 'Hledat v nastavení...', 'Nebyla nalezena žádná nastavení', 'Obnovit sekci', 'Rozhraní', 'Okno Markpad', 'Chování', 'Nastavení panelů nástrojů',
+		'Písmo textu náhledu', 'Písmo kódu', 'Živý náhled písma', 'Náhled textu Markpad', 'Živý náhled písma editoru',
+		'Povrch', 'Vizuální styl celé aplikace', 'Plný', 'Průsvitný', 'Krytí povrchu', 'Rozostření pozadí', 'Dostupné s průsvitným povrchem', 'Dostupné při krytí pod 100 %', 'V Linuxu není dostupné, protože Tauri nepodporuje nativní efekty oken', 'Ztmavení pozadí',
+		'Jazyk aplikace', 'Vzhled rozhraní', 'Světlý', 'Systém', 'Tmavý',
+		'Panel editoru', 'Panel aplikace', 'Vložený kód', 'Blok kódu', 'Citace', 'Nadpis 1', 'Nadpis 2', 'Nadpis 3', 'Seznam s odrážkami', 'Číslovaný seznam', 'Kontrolní seznam', 'Odkaz', 'Panely nástrojů',
+		'Zkontrolovat aktualizace…', 'Zpět', 'Vpřed', 'Znovu načíst z disku', 'Průhlednost nastavení a editoru', 'Zjemní obsah za oknem Markpad', 'Omezuje rušivé prvky za oknem'
+	],
+	sk: [
+		'Prispôsobte jazyk, tému a povrchy aplikácie', 'Hľadať v nastaveniach...', 'Nenašli sa žiadne nastavenia', 'Obnoviť sekciu', 'Rozhranie', 'Okno Markpad', 'Správanie', 'Nastavenia panelov nástrojov',
+		'Písmo textu náhľadu', 'Písmo kódu', 'Živý náhľad písma', 'Náhľad textu Markpad', 'Živý náhľad písma editora',
+		'Povrch', 'Vizuálny štýl celej aplikácie', 'Plný', 'Priesvitný', 'Krytie povrchu', 'Rozostrenie pozadia', 'Dostupné s priesvitným povrchom', 'Dostupné pri krytí pod 100 %', 'V Linuxe nie je dostupné, pretože Tauri nepodporuje natívne efekty okien', 'Stmavenie pozadia',
+		'Jazyk aplikácie', 'Vzhľad rozhrania', 'Svetlý', 'Systém', 'Tmavý',
+		'Panel editora', 'Panel aplikácie', 'Vložený kód', 'Blok kódu', 'Citácia', 'Nadpis 1', 'Nadpis 2', 'Nadpis 3', 'Zoznam s odrážkami', 'Číslovaný zoznam', 'Kontrolný zoznam', 'Odkaz', 'Panely nástrojov',
+		'Skontrolovať aktualizácie…', 'Späť', 'Dopredu', 'Znova načítať z disku', 'Priehľadnosť nastavení a editora', 'Zjemní obsah za oknom Markpad', 'Obmedzuje rušivé prvky za oknom'
+	],
+	el: [
+		'Προσαρμόστε τη γλώσσα, το θέμα και τις επιφάνειες της εφαρμογής', 'Αναζήτηση ρυθμίσεων...', 'Δεν βρέθηκαν ρυθμίσεις', 'Επαναφορά ενότητας', 'Διεπαφή', 'Παράθυρο Markpad', 'Συμπεριφορά', 'Ρυθμίσεις γραμμών εργαλείων',
+		'Γραμματοσειρά κειμένου προεπισκόπησης', 'Γραμματοσειρά κώδικα', 'Ζωντανή προεπισκόπηση γραμματοσειράς', 'Προεπισκόπηση κειμένου Markpad', 'Ζωντανή προεπισκόπηση γραμματοσειράς επεξεργαστή',
+		'Επιφάνεια', 'Οπτικό στυλ για ολόκληρη την εφαρμογή', 'Συμπαγής', 'Ημιδιαφανής', 'Αδιαφάνεια επιφάνειας', 'Θόλωση φόντου', 'Διαθέσιμο με την ημιδιαφανή επιφάνεια', 'Διαθέσιμο όταν η αδιαφάνεια είναι κάτω από 100%', 'Δεν διατίθεται στο Linux επειδή το Tauri δεν υποστηρίζει εγγενή εφέ παραθύρου', 'Σκοτείνιασμα φόντου',
+		'Γλώσσα εφαρμογής', 'Εμφάνιση διεπαφής', 'Φωτεινό', 'Σύστημα', 'Σκοτεινό',
+		'Γραμμή εργαλείων επεξεργαστή', 'Γραμμή εργαλείων εφαρμογής', 'Ενσωματωμένος κώδικας', 'Μπλοκ κώδικα', 'Παράθεση', 'Επικεφαλίδα 1', 'Επικεφαλίδα 2', 'Επικεφαλίδα 3', 'Λίστα με κουκκίδες', 'Αριθμημένη λίστα', 'Λίστα ελέγχου', 'Σύνδεσμος', 'Γραμμές εργαλείων',
+		'Έλεγχος για ενημερώσεις…', 'Πίσω', 'Μπροστά', 'Επαναφόρτωση από τον δίσκο', 'Διαφάνεια ρυθμίσεων και επεξεργαστή', 'Απαλύνει το περιεχόμενο πίσω από το παράθυρο Markpad', 'Μειώνει τους περισπασμούς πίσω από το παράθυρο'
+	],
+	fi: [
+		'Mukauta kieltä, teemaa ja sovelluksen pintoja', 'Hae asetuksia...', 'Asetuksia ei löytynyt', 'Palauta osio', 'Käyttöliittymä', 'Markpad-ikkuna', 'Toiminta', 'Työkalupalkkien asetukset',
+		'Esikatselutekstin fontti', 'Koodifontti', 'Fontin reaaliaikainen esikatselu', 'Markpad-tekstin esikatselu', 'Editorin fontin reaaliaikainen esikatselu',
+		'Pinta', 'Koko sovelluksen visuaalinen tyyli', 'Kiinteä', 'Läpikuultava', 'Pinnan peittävyys', 'Taustan sumennus', 'Käytettävissä läpikuultavalla pinnalla', 'Käytettävissä, kun peittävyys on alle 100 %', 'Ei käytettävissä Linuxissa, koska Tauri ei tue järjestelmän omia ikkunatehosteita', 'Taustan tummennus',
+		'Sovelluksen kieli', 'Käyttöliittymän ulkoasu', 'Vaalea', 'Järjestelmä', 'Tumma',
+		'Editorin työkalupalkki', 'Sovelluksen työkalupalkki', 'Rivikoodi', 'Koodilohko', 'Lainaus', 'Otsikko 1', 'Otsikko 2', 'Otsikko 3', 'Luettelomerkkiluettelo', 'Numeroitu luettelo', 'Tarkistuslista', 'Linkki', 'Työkalupalkit',
+		'Tarkista päivitykset…', 'Takaisin', 'Eteenpäin', 'Lataa uudelleen levyltä', 'Asetusten ja editorin läpinäkyvyys', 'Pehmentää Markpad-ikkunan takana olevaa sisältöä', 'Vähentää häiriötekijöitä ikkunan takana'
+	],
+	da: [
+		'Tilpas sprog, tema og appflader', 'Søg i indstillinger...', 'Ingen indstillinger fundet', 'Nulstil sektion', 'Brugerflade', 'Markpad-vindue', 'Adfærd', 'Indstillinger for værktøjslinjer',
+		'Skrifttype til forhåndsvisning', 'Skrifttype til kode', 'Direkte skrifttypevisning', 'Forhåndsvisning af Markpad-tekst', 'Direkte visning af editorens skrifttype',
+		'Flade', 'Visuel stil for hele appen', 'Massiv', 'Gennemsigtig', 'Fladens opacitet', 'Sløring af baggrund', 'Tilgængelig med gennemsigtig flade', 'Tilgængelig når opaciteten er under 100 %', 'Ikke tilgængelig på Linux, fordi Tauri ikke understøtter indbyggede vindueseffekter', 'Dæmpning af baggrund',
+		'Appens sprog', 'Brugerfladens udseende', 'Lys', 'System', 'Mørk',
+		'Editorens værktøjslinje', 'Appens værktøjslinje', 'Indlejret kode', 'Kodeblok', 'Citat', 'Overskrift 1', 'Overskrift 2', 'Overskrift 3', 'Punktopstilling', 'Nummereret liste', 'Tjekliste', 'Link', 'Værktøjslinjer',
+		'Søg efter opdateringer…', 'Tilbage', 'Frem', 'Genindlæs fra disk', 'Gennemsigtighed for indstillinger og editor', 'Blødgør indholdet bag Markpad-vinduet', 'Reducerer forstyrrelser bag vinduet'
+	],
+	no: [
+		'Tilpass språk, tema og appflater', 'Søk i innstillinger...', 'Fant ingen innstillinger', 'Tilbakestill del', 'Grensesnitt', 'Markpad-vindu', 'Atferd', 'Innstillinger for verktøylinjer',
+		'Skrift for forhåndsvisning', 'Kodeskrift', 'Direkte forhåndsvisning av skrift', 'Forhåndsvisning av Markpad-tekst', 'Direkte forhåndsvisning av redigeringsskrift',
+		'Flate', 'Visuell stil for hele appen', 'Heldekkende', 'Gjennomskinnelig', 'Flatens gjennomsiktighet', 'Bakgrunnsuskarphet', 'Tilgjengelig med gjennomskinnelig flate', 'Tilgjengelig når gjennomsiktigheten er under 100 %', 'Ikke tilgjengelig på Linux fordi Tauri ikke støtter innebygde vinduseffekter', 'Bakgrunnsdemping',
+		'Appens språk', 'Grensesnittets utseende', 'Lys', 'System', 'Mørk',
+		'Redigeringsverktøylinje', 'Appverktøylinje', 'Innebygd kode', 'Kodeblokk', 'Sitat', 'Overskrift 1', 'Overskrift 2', 'Overskrift 3', 'Punktliste', 'Nummerert liste', 'Sjekkliste', 'Lenke', 'Verktøylinjer',
+		'Se etter oppdateringer…', 'Tilbake', 'Frem', 'Last inn på nytt fra disk', 'Gjennomsiktighet for innstillinger og redigering', 'Myker opp innholdet bak Markpad-vinduet', 'Reduserer distraksjoner bak vinduet'
+	],
+	id: [
+		'Sesuaikan bahasa, tema, dan permukaan aplikasi', 'Cari pengaturan...', 'Pengaturan tidak ditemukan', 'Atur ulang bagian', 'Antarmuka', 'Jendela Markpad', 'Perilaku', 'Pengaturan bilah alat',
+		'Font teks pratinjau', 'Font kode', 'Pratinjau font langsung', 'Pratinjau teks Markpad', 'Pratinjau langsung font editor',
+		'Permukaan', 'Gaya visual untuk seluruh aplikasi', 'Padat', 'Tembus cahaya', 'Opasitas permukaan', 'Keburaman latar', 'Tersedia dengan permukaan tembus cahaya', 'Tersedia saat opasitas di bawah 100%', 'Tidak tersedia di Linux karena Tauri tidak mendukung efek jendela asli', 'Peredupan latar',
+		'Bahasa aplikasi', 'Tampilan antarmuka', 'Terang', 'Sistem', 'Gelap',
+		'Bilah alat editor', 'Bilah alat aplikasi', 'Kode sebaris', 'Blok kode', 'Kutipan', 'Judul 1', 'Judul 2', 'Judul 3', 'Daftar berpoin', 'Daftar bernomor', 'Daftar periksa', 'Tautan', 'Bilah alat',
+		'Periksa pembaruan…', 'Kembali', 'Maju', 'Muat ulang dari disk', 'Transparansi pengaturan dan editor', 'Memperhalus konten di belakang jendela Markpad', 'Mengurangi gangguan di belakang jendela'
+	],
+	tr: [
+		'Dili, temayı ve uygulama yüzeylerini özelleştirin', 'Ayarlarda ara...', 'Ayar bulunamadı', 'Bölümü sıfırla', 'Arayüz', 'Markpad penceresi', 'Davranış', 'Araç çubuğu ayarları',
+		'Önizleme metni yazı tipi', 'Kod yazı tipi', 'Canlı yazı tipi önizlemesi', 'Markpad metin önizlemesi', 'Canlı düzenleyici yazı tipi önizlemesi',
+		'Yüzey', 'Tüm uygulamanın görsel stili', 'Düz', 'Yarı saydam', 'Yüzey opaklığı', 'Arka plan bulanıklığı', 'Yarı saydam yüzeyle kullanılabilir', 'Yüzey opaklığı %100’ün altındayken kullanılabilir', 'Tauri yerel pencere efektlerini desteklemediğinden Linux’ta kullanılamaz', 'Arka plan karartması',
+		'Uygulama dili', 'Arayüz görünümü', 'Açık', 'Sistem', 'Koyu',
+		'Düzenleyici araç çubuğu', 'Uygulama araç çubuğu', 'Satır içi kod', 'Kod bloğu', 'Alıntı', 'Başlık 1', 'Başlık 2', 'Başlık 3', 'Madde işaretli liste', 'Numaralı liste', 'Kontrol listesi', 'Bağlantı', 'Araç çubukları',
+		'Güncellemeleri denetle…', 'Geri', 'İleri', 'Diskten yeniden yükle', 'Ayarların ve düzenleyicinin şeffaflığı', 'Markpad penceresinin arkasındaki içeriği yumuşatır', 'Pencerenin arkasındaki dikkat dağıtıcı öğeleri azaltır'
+	]
+};
diff --git a/src/styles.css b/src/styles.css
index 454333bb..18fb1d52 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5,8 +5,7 @@
 
 html,
 body {
-	/* background-color: var(--color-canvas-default); */
-	background-color: var(--color-canvas-default);
+	background-color: transparent;
 	margin: 0;
 	padding: 0;
 	height: 100%;
@@ -18,8 +17,15 @@ body {
 }
 
 #app {
+	display: block;
+	position: relative;
+	width: 100%;
+	height: 100%;
 	overflow: hidden;
 	border-radius: 8px !important;
+	background:
+		linear-gradient(var(--app-window-surface, var(--color-canvas-default)), var(--app-window-surface, var(--color-canvas-default))),
+		rgb(0 0 0 / var(--app-window-dim-opacity, 0));
 }
 
 :root {
@@ -48,6 +54,20 @@ body {
 	--color-window-border-top: #B5B5B5;
 	--color-canvas-overlay: #FDFDFD;
 	--tab-active-bg: #dee1e6;
+	--app-window-surface: var(--color-canvas-default);
+	--app-window-blur: 0px;
+	--app-window-dim-opacity: 0;
+
+	/* Markpad workbench surfaces */
+	--workbench-surface-base: color-mix(in srgb, var(--color-canvas-default) 96%, var(--color-canvas-subtle));
+	--workbench-surface-raised: color-mix(in srgb, var(--color-canvas-default) 82%, var(--color-canvas-subtle));
+	--workbench-surface-hover: color-mix(in srgb, var(--color-canvas-default) 68%, var(--color-canvas-subtle));
+	--workbench-border: color-mix(in srgb, var(--color-border-default) 82%, transparent);
+	--workbench-border-strong: color-mix(in srgb, var(--color-border-default) 72%, var(--color-fg-muted));
+	--workbench-accent-soft: color-mix(in srgb, var(--color-accent-fg) 12%, transparent);
+	--workbench-control-radius: 7px;
+	--workbench-panel-radius: 11px;
+	--workbench-shadow: 0 22px 64px rgb(0 0 0 / 0.32), 0 3px 12px rgb(0 0 0 / 0.16);
 
 	/* Light Syntax Highlighting */
 	--hljs-bg: #f6f8fa;
@@ -59,6 +79,45 @@ body {
 	--hljs-type: #953800;
 }
 
+:root[data-window-surface="translucent"] {
+	--app-window-surface: color-mix(
+		in srgb,
+		var(--color-canvas-default) var(--window-surface-opacity, 92%),
+		transparent
+	);
+	--app-window-blur: var(--window-surface-blur, 18px);
+	--app-window-dim-opacity: var(--window-backdrop-dim-opacity, 0.24);
+}
+
+:root[data-window-surface="translucent"] :is(
+	.markdown-body,
+	.custom-title-bar,
+	.editor-outer,
+	.editor-toolbar,
+	.pane.editor-pane,
+	.pane.viewer-pane,
+	.toc-overlay-wrapper,
+	.pinned-toc
+) {
+	background-color: transparent !important;
+	background-image: none !important;
+}
+
+:root[data-window-surface="translucent"] :is(
+	.monaco-editor,
+	.monaco-editor-background,
+	.monaco-editor .margin,
+	.monaco-editor .overflow-guard
+) {
+	background-color: transparent !important;
+}
+
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+	:root[data-window-surface="translucent"] {
+		--app-window-blur: 0px;
+	}
+}
+
 :root[data-theme="light"] {
 	/* Explicit Light Theme Override */
 	--color-fg-default: #1f2328;