diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000..0c0599de
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: open-webui
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c8bbc44..95d15f22 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.5] - 2026-07-02
+
+### Added
+
+- 🎨 **Appearance controls.** Added a new Appearance settings page so you can adjust how Computer looks and feels without leaving the app.
+- 🌳 **Git worktrees.** View, search, open, and create worktrees from the Git panel so you can keep separate branches in separate folders.
+
+### Changed
+
+- 🌍 **More complete language support.** Expanded translations across settings, chat, files, previews, and admin screens so the interface feels more consistent in every supported language.
+- 🧩 **Cleaner everyday interface.** Polished menus, dialogs, chat controls, file previews, terminal views, and setup screens for a more consistent experience across desktop and mobile.
+- 🌐 **Easier web setup.** Search providers and browser tools now show their keys, base URLs, and helper text in a cleaner layout.
+
 ## [0.7.4] - 2026-06-30
 
 ### Added
diff --git a/README.md b/README.md
index db9f35b6..11d27b0e 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
 ![GitHub top language](https://img.shields.io/github/languages/top/open-webui/computer)
 ![GitHub last commit](https://img.shields.io/github/last-commit/open-webui/computer?color=red)
 [![Discord](https://img.shields.io/badge/Discord-Open_WebUI-blue?logo=discord&logoColor=white)](https://discord.gg/5rJgQTnV4s)
-[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/tjbck)
+[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/open-webui)
 
 ![Open WebUI Computer Demo](./demo.png)
 
@@ -31,6 +31,8 @@ The Docker image includes all optional feature groups.
 
 Or with [uv](https://docs.astral.sh/uv/): `uvx cptr@latest run`
 
+On Windows, if opening a terminal reports a missing `VCRUNTIME140.dll` or Universal CRT DLL, install Microsoft's [Visual C++ Redistributable](https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist) and restart `cptr`.
+
 Opens in your browser at `http://localhost:8000`.
 
 ### Access from your phone
diff --git a/cptr/frontend/src/app.css b/cptr/frontend/src/app.css
index 5927914d..4b10260c 100644
--- a/cptr/frontend/src/app.css
+++ b/cptr/frontend/src/app.css
@@ -23,13 +23,26 @@
 	--color-gray-950: oklch(0.16 0 0);
 }
 
+:root {
+	--app-text-scale: 1;
+	--app-bg: #ffffff;
+	--app-fg: #525252;
+	--app-fg-muted: color-mix(in oklab, var(--app-fg) 62%, var(--app-bg));
+	--app-fg-subtle: color-mix(in oklab, var(--app-fg) 48%, var(--app-bg));
+	--app-border: color-mix(in oklab, var(--app-fg) 10%, transparent);
+	--app-divider: color-mix(in oklab, var(--app-fg) 8%, transparent);
+	--app-hover: color-mix(in oklab, var(--app-fg) 6%, transparent);
+	--app-active: color-mix(in oklab, var(--app-fg) 7%, transparent);
+	--app-ui-font: var(--font-sans);
+}
+
 @layer base {
 	*,
 	::after,
 	::before,
 	::backdrop,
 	::file-selector-button {
-		border-color: var(--color-gray-200, currentColor);
+		border-color: var(--app-border, var(--color-gray-200, currentColor));
 	}
 
 	html,
@@ -40,6 +53,9 @@
 		overscroll-behavior: none;
 		scrollbar-width: none;
 		-ms-overflow-style: none;
+		background: var(--app-bg);
+		color: var(--app-fg);
+		font-family: var(--app-ui-font);
 	}
 
 	html::-webkit-scrollbar,
@@ -50,6 +66,7 @@
 	html {
 		color-scheme: dark light;
 		touch-action: manipulation;
+		font-size: calc(1rem * var(--app-text-scale, 1));
 	}
 
 	button {
@@ -62,7 +79,7 @@
 	--tw-border-opacity: 1;
 	background-color: rgba(215, 215, 215, 0.6);
 	border-color: rgba(255, 255, 255, var(--tw-border-opacity));
-	border-radius: 9999px;
+	border-radius: 624.9375rem;
 	border-width: 1px;
 }
 
@@ -79,7 +96,7 @@
 
 ::-webkit-scrollbar-track {
 	background-color: transparent;
-	border-radius: 9999px;
+	border-radius: 624.9375rem;
 }
 
 .scrollbar-hidden,
@@ -99,6 +116,167 @@
 	visibility: visible;
 }
 
+.app-theme {
+	background: var(--app-bg);
+	color: var(--app-fg);
+}
+
+.app-surface {
+	background: var(--app-bg);
+	color: var(--app-fg);
+	border-color: var(--app-border);
+}
+
+.app-subtle-surface {
+	background: var(--app-bg);
+	color: var(--app-fg);
+	border-color: var(--app-border);
+}
+
+.app-divider {
+	background: var(--app-divider);
+}
+
+.app-muted {
+	color: var(--app-fg-muted);
+}
+
+.app-icon-muted {
+	color: var(--app-fg-subtle);
+}
+
+.app-interactive:hover {
+	background: var(--app-hover);
+	color: var(--app-fg);
+}
+
+.app-interactive-active {
+	background: var(--app-active);
+	color: var(--app-fg);
+}
+
+.app-theme:where([class*='border-gray-'], [class*='border-black/'], [class*='border-white/']),
+.app-theme :where([class*='border-gray-'], [class*='border-black/'], [class*='border-white/']) {
+	border-color: var(--app-border);
+}
+
+.dark .app-theme:where([class*='dark:border-gray-'], [class*='dark:border-white/']),
+.dark .app-theme :where([class*='dark:border-gray-'], [class*='dark:border-white/']) {
+	border-color: var(--app-border);
+}
+
+.app-theme
+	:where(
+		[class*='divide-gray-'] > :not(:last-child),
+		[class*='divide-black/'] > :not(:last-child),
+		[class*='divide-white/'] > :not(:last-child)
+	) {
+	border-color: var(--app-border);
+}
+
+.dark .app-theme :where([class*='dark:divide-gray-'] > :not(:last-child)),
+.dark .app-theme :where([class*='dark:divide-white/'] > :not(:last-child)) {
+	border-color: var(--app-border);
+}
+
+.app-theme :where([class~='h-px'][class*='bg-gray-'], [class~='h-px'][class*='bg-black/']) {
+	background: var(--app-divider);
+}
+
+.dark .app-theme :where([class~='h-px'][class*='dark:bg-white/']) {
+	background: var(--app-divider);
+}
+
+.app-theme
+	:where(
+		[class~='bg-gray-50'],
+		[class~='bg-gray-50/50'],
+		[class~='bg-gray-100'],
+		[class~='bg-gray-200/50']
+	) {
+	background: var(--app-hover);
+}
+
+.dark
+	.app-theme
+	:where(
+		[class~='dark:bg-white/3'],
+		[class~='dark:bg-white/4'],
+		[class~='dark:bg-white/5'],
+		[class~='dark:bg-white/6'],
+		[class~='dark:bg-white/8'],
+		[class~='dark:bg-white/10']
+	) {
+	background: var(--app-hover);
+}
+
+.app-theme
+	:where(
+		[class~='hover:bg-gray-50']:hover,
+		[class~='hover:bg-gray-100']:hover,
+		[class~='hover:bg-gray-200']:hover,
+		[class~='hover:bg-gray-200/60']:hover,
+		[class~='hover:bg-gray-200/70']:hover
+	) {
+	background: var(--app-active);
+}
+
+.dark
+	.app-theme
+	:where(
+		[class~='dark:hover:bg-white/3']:hover,
+		[class~='dark:hover:bg-white/4']:hover,
+		[class~='dark:hover:bg-white/5']:hover,
+		[class~='dark:hover:bg-white/6']:hover,
+		[class~='dark:hover:bg-white/8']:hover,
+		[class~='dark:hover:bg-white/10']:hover,
+		[class~='dark:hover:bg-white/12']:hover
+	) {
+	background: var(--app-active);
+}
+
+.app-theme
+	:where(
+		[class~='text-gray-950'],
+		[class~='text-gray-900'],
+		[class~='text-gray-800'],
+		[class~='text-gray-700']
+	) {
+	color: var(--app-fg);
+}
+
+.dark
+	.app-theme
+	:where(
+		[class~='dark:text-white'],
+		[class~='dark:text-gray-100'],
+		[class~='dark:text-gray-200'],
+		[class~='dark:text-gray-300']
+	) {
+	color: var(--app-fg);
+}
+
+.app-theme
+	:where(
+		[class~='text-gray-600'],
+		[class~='text-gray-500'],
+		[class~='text-gray-400'],
+		[class~='text-gray-300']
+	) {
+	color: var(--app-fg-muted);
+}
+
+.dark
+	.app-theme
+	:where(
+		[class~='dark:text-gray-400'],
+		[class~='dark:text-gray-500'],
+		[class~='dark:text-gray-600'],
+		[class~='dark:text-gray-700']
+	) {
+	color: var(--app-fg-muted);
+}
+
 /* CodeMirror - match Open WebUI */
 .cm-editor {
 	height: 100%;
@@ -197,9 +375,9 @@
 .tippy-box[data-theme~='cptr'] {
 	background: #1a1a1a;
 	color: #e0e0e0;
-	font-size: 11px;
+	font-size: 0.6875rem;
 	font-weight: 500;
-	padding: 2px 4px;
-	border-radius: 6px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	padding: 0.125rem 0.25rem;
+	border-radius: 0.375rem;
+	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
 }
diff --git a/cptr/frontend/src/lib/apis/git.ts b/cptr/frontend/src/lib/apis/git.ts
index 6bf00829..888ea7a2 100644
--- a/cptr/frontend/src/lib/apis/git.ts
+++ b/cptr/frontend/src/lib/apis/git.ts
@@ -45,6 +45,12 @@ export const getGitShow = (root: string, ref: string) =>
 export const getGitBranches = (root: string) =>
 	fetchJSON(`/api/git/branches?root=${encodeURIComponent(root)}`);
 
+export const getGitWorktrees = (root: string) =>
+	fetchJSON(`/api/git/worktrees?root=${encodeURIComponent(root)}`);
+
+export const createGitWorktree = (root: string, branch: string, path?: string) =>
+	fetchJSON('/api/git/worktrees', jsonBody({ root, branch, path }));
+
 export const getGitStashes = (root: string) =>
 	fetchJSON(`/api/git/stashes?root=${encodeURIComponent(root)}`);
 
diff --git a/cptr/frontend/src/lib/apis/memory.ts b/cptr/frontend/src/lib/apis/memory.ts
index 2e3d935b..fb9bbcd8 100644
--- a/cptr/frontend/src/lib/apis/memory.ts
+++ b/cptr/frontend/src/lib/apis/memory.ts
@@ -63,8 +63,7 @@ export const updateMemory = (
 	scope: MemoryScope,
 	workspace: string,
 	operations: MemoryOperation[]
-) =>
-	fetchJSON('/api/memory/update', jsonBody({ scope, workspace, operations }));
+) => fetchJSON('/api/memory/update', jsonBody({ scope, workspace, operations }));
 
 export const searchMemory = (body: {
 	query?: string;
diff --git a/cptr/frontend/src/lib/components/Admin/AgentProfileModal.svelte b/cptr/frontend/src/lib/components/Admin/AgentProfileModal.svelte
index ca8d2383..57ffe39d 100644
--- a/cptr/frontend/src/lib/components/Admin/AgentProfileModal.svelte
+++ b/cptr/frontend/src/lib/components/Admin/AgentProfileModal.svelte
@@ -76,7 +76,7 @@
 			</h2>
 			<button
 				type="button"
-				class="text-[13px] text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+				class="text-[0.8125rem] text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
 				onclick={onclose}
 			>
 				Close
@@ -85,7 +85,7 @@
 
 		<div class="flex gap-3">
 			<div class="flex-1">
-				<label for={`${fieldPrefix}-name`} class="text-[10px] text-gray-400 dark:text-gray-600">
+				<label for={`${fieldPrefix}-name`} class="text-[0.625rem] text-gray-400 dark:text-gray-600">
 					{$t('admin.agentsProfileName')}
 				</label>
 				<input
@@ -94,11 +94,11 @@
 					bind:value={draft.name}
 					autocomplete="off"
 					spellcheck="false"
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 				/>
 			</div>
 			<div class="w-32 shrink-0">
-				<label for={`${fieldPrefix}-type`} class="text-[10px] text-gray-400 dark:text-gray-600">
+				<label for={`${fieldPrefix}-type`} class="text-[0.625rem] text-gray-400 dark:text-gray-600">
 					{$t('admin.agentsType')}
 				</label>
 				<select
@@ -119,7 +119,7 @@
 							launch_args: draft.launch_args || ''
 						};
 					}}
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
 				>
 					<option value="codex">Codex</option>
 					<option value="claude_code">Claude Code</option>
@@ -130,7 +130,7 @@
 			</div>
 		</div>
 
-		<label for={`${fieldPrefix}-id`} class="text-[10px] text-gray-400 dark:text-gray-600 mt-2">
+		<label for={`${fieldPrefix}-id`} class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2">
 			{$t('admin.agentsProfileId')}
 		</label>
 		<input
@@ -139,10 +139,13 @@
 			bind:value={draft.id}
 			autocomplete="off"
 			spellcheck="false"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 
-		<label for={`${fieldPrefix}-command`} class="text-[10px] text-gray-400 dark:text-gray-600 mt-2">
+		<label
+			for={`${fieldPrefix}-command`}
+			class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
+		>
 			{$t('admin.agentsCommand')}
 		</label>
 		<input
@@ -152,27 +155,30 @@
 			placeholder={defaultCommand(draft.agent)}
 			autocomplete="off"
 			spellcheck="false"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 
-		<label for={`${fieldPrefix}-home`} class="text-[10px] text-gray-400 dark:text-gray-600 mt-2">
+		<label
+			for={`${fieldPrefix}-home`}
+			class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
+		>
 			{$t('admin.agentsHome')}
 		</label>
 		<input
 			id={`${fieldPrefix}-home`}
 			type="text"
 			value={draft.home || ''}
-			placeholder="Optional"
+			placeholder={$t('admin.optional')}
 			autocomplete="off"
 			spellcheck="false"
 			oninput={(e) => (draft.home = e.currentTarget.value || null)}
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 
 		{#if draft.agent === 'claude_code'}
 			<label
 				for={`${fieldPrefix}-launch-args`}
-				class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+				class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>
 				{$t('admin.agentsLaunchArgs')}
 			</label>
@@ -182,14 +188,14 @@
 				bind:value={draft.launch_args}
 				autocomplete="off"
 				spellcheck="false"
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 			/>
 		{/if}
 
 		{#if draft.agent === 'cursor'}
 			<label
 				for={`${fieldPrefix}-api-endpoint`}
-				class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+				class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>
 				{$t('admin.agentsApiEndpoint')}
 			</label>
@@ -197,17 +203,17 @@
 				id={`${fieldPrefix}-api-endpoint`}
 				type="text"
 				bind:value={draft.api_endpoint}
-				placeholder="Optional"
+				placeholder={$t('admin.optional')}
 				autocomplete="off"
 				spellcheck="false"
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 			/>
 		{/if}
 
 		{#if draft.agent === 'opencode'}
 			<label
 				for={`${fieldPrefix}-server-url`}
-				class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+				class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>
 				{$t('admin.agentsServerUrl')}
 			</label>
@@ -215,15 +221,15 @@
 				id={`${fieldPrefix}-server-url`}
 				type="text"
 				bind:value={draft.server_url}
-				placeholder="Optional"
+				placeholder={$t('admin.optional')}
 				autocomplete="off"
 				spellcheck="false"
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 			/>
 
 			<label
 				for={`${fieldPrefix}-server-password`}
-				class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+				class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>
 				{$t('admin.agentsServerPassword')}
 			</label>
@@ -231,10 +237,10 @@
 				id={`${fieldPrefix}-server-password`}
 				type="password"
 				bind:value={draft.server_password}
-				placeholder="Optional"
+				placeholder={$t('admin.optional')}
 				autocomplete="off"
 				spellcheck="false"
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 			/>
 		{/if}
 
@@ -243,7 +249,7 @@
 				{#if !isNew}
 					<button
 						type="button"
-						class="text-[13px] text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-100"
+						class="text-[0.8125rem] text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-100"
 						onclick={ondelete}
 						title={$t('admin.agentsDeleteProfile')}
 					>
@@ -254,7 +260,7 @@
 			<button
 				type="button"
 				onclick={() => onsave(normalizeDraft())}
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
 			>
 				{$t('settings.save')}
 			</button>
diff --git a/cptr/frontend/src/lib/components/Admin/Agents.svelte b/cptr/frontend/src/lib/components/Admin/Agents.svelte
index 8cb9ec1f..5b20b124 100644
--- a/cptr/frontend/src/lib/components/Admin/Agents.svelte
+++ b/cptr/frontend/src/lib/components/Admin/Agents.svelte
@@ -262,23 +262,23 @@
 				>
 					<span class="flex-1 min-w-0">
 						<span
-							class="block text-[13px] truncate {profile.mode === 'disabled'
+							class="block text-[0.8125rem] truncate {profile.mode === 'disabled'
 								? 'text-gray-400 dark:text-gray-600'
 								: 'text-gray-700 dark:text-gray-300'}"
 						>
 							{profile.name}
 						</span>
-						<span class="block text-[11px] text-gray-400 dark:text-gray-600 truncate">
+						<span class="block text-[0.6875rem] text-gray-400 dark:text-gray-600 truncate">
 							{profileSubtitle(profile)}
 						</span>
 						{#if detected[profile.id]?.message}
-							<span class="block text-[11px] text-gray-300 dark:text-gray-700 truncate">
+							<span class="block text-[0.6875rem] text-gray-300 dark:text-gray-700 truncate">
 								{detected[profile.id]?.message}
 							</span>
 						{/if}
 					</span>
 					<span
-						class="hidden sm:flex items-center gap-1.5 shrink-0 text-[11px] text-gray-400 dark:text-gray-600"
+						class="hidden sm:flex items-center gap-1.5 shrink-0 text-[0.6875rem] text-gray-400 dark:text-gray-600"
 					>
 						<span class="w-1.5 h-1.5 rounded-full {statusTone(profile)}"></span>
 						<span>{$t(statusKey(profile))}</span>
@@ -310,7 +310,9 @@
 		</div>
 
 		{#if profiles.length === 0}
-			<p class="text-[13px] text-gray-400 dark:text-gray-600 py-4">No agent profiles</p>
+			<p class="text-[0.8125rem] text-gray-400 dark:text-gray-600 py-4">
+				{$t('admin.agentsNoProfiles')}
+			</p>
 		{/if}
 
 		<div class="mt-auto pt-6 flex items-center justify-between">
@@ -318,7 +320,7 @@
 				{profiles.length} profile{profiles.length === 1 ? '' : 's'}
 			</span>
 			<button
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
 				onclick={save}
 				disabled={saving}
 			>
diff --git a/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte b/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
index 99e6aca9..beed30ff 100644
--- a/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
+++ b/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
@@ -121,7 +121,7 @@
 						}}
 					/>
 				</label>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 					{$t('admin.audio.voiceMemosHint')}
 				</p>
 
@@ -136,7 +136,7 @@
 						}}
 					/>
 				</label>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 					{transcribeEnabled
 						? $t('admin.audio.transcribeOnHint')
 						: $t('admin.audio.transcribeOffHint')}
@@ -155,7 +155,7 @@
 						<option value="low">{$t('admin.audio.qualityLow')}</option>
 					</select>
 				</div>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 					{quality === 'high'
 						? $t('admin.audio.qualityHintHigh')
 						: quality === 'medium'
@@ -204,7 +204,7 @@
 						class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 					/>
 				</div>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
 					{$t('admin.audio.sttHint')}
 				</p>
 			</div>
@@ -223,7 +223,7 @@
 						}}
 					/>
 				</label>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 					{$t('admin.audio.ttsEnabledHint')}
 				</p>
 				<label class="flex items-center justify-between cursor-pointer">
@@ -237,7 +237,7 @@
 						}}
 					/>
 				</label>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 					{$t('admin.audio.ttsAutoStreamHint')}
 				</p>
 				<div>
@@ -322,7 +322,7 @@
 						>
 					</div>
 				</div>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
 					{$t('admin.audio.ttsHint')}
 				</p>
 			</div>
@@ -345,7 +345,7 @@
 						<option value="provider">{$t('admin.audio.voiceModeSttProvider')}</option>
 					</select>
 				</div>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 					{voiceModeSttMode === 'browser'
 						? $t('admin.audio.voiceModeBrowserSttHint')
 						: $t('admin.audio.voiceModeProviderSttHint')}
@@ -362,7 +362,7 @@
 						class="w-full mt-1 px-2 py-1.5 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors resize-y min-h-24"
 					></textarea>
 				</div>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
 					{$t('admin.audio.voiceModeSystemPromptHint')}
 				</p>
 			</div>
@@ -371,7 +371,7 @@
 		<!-- Save -->
 		<div class="shrink-0 pt-3 flex justify-end">
 			<button
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
 				onclick={() => save()}
 				disabled={saving}
 			>
diff --git a/cptr/frontend/src/lib/components/Admin/Connections.svelte b/cptr/frontend/src/lib/components/Admin/Connections.svelte
index 566cc31a..94730a2e 100644
--- a/cptr/frontend/src/lib/components/Admin/Connections.svelte
+++ b/cptr/frontend/src/lib/components/Admin/Connections.svelte
@@ -77,7 +77,7 @@
 				onclick={() => (editConn = conn)}
 			>
 				<span
-					class="flex-1 text-[13px] truncate
+					class="flex-1 text-[0.8125rem] truncate
 					{conn.enabled ? 'text-gray-700 dark:text-gray-300' : 'text-gray-400 dark:text-gray-600'}"
 				>
 					{conn.name}
@@ -106,7 +106,9 @@
 		{/each}
 
 		{#if connections.length === 0}
-			<p class="text-[13px] text-gray-400 dark:text-gray-600 py-4">{$t('connections.empty')}</p>
+			<p class="text-[0.8125rem] text-gray-400 dark:text-gray-600 py-4">
+				{$t('connections.empty')}
+			</p>
 		{/if}
 	</div>
 {/if}
diff --git a/cptr/frontend/src/lib/components/Admin/CreateBotModal.svelte b/cptr/frontend/src/lib/components/Admin/CreateBotModal.svelte
index e9af940a..d96873d4 100644
--- a/cptr/frontend/src/lib/components/Admin/CreateBotModal.svelte
+++ b/cptr/frontend/src/lib/components/Admin/CreateBotModal.svelte
@@ -142,7 +142,9 @@
 			<!-- Platform + Name on same row -->
 			<div class="flex gap-3">
 				<div class="flex-1">
-					<label class="text-[10px] text-gray-400 dark:text-gray-600">{$t('messaging.name')}</label>
+					<label class="text-[0.625rem] text-gray-400 dark:text-gray-600"
+						>{$t('messaging.name')}</label
+					>
 					<input
 						type="text"
 						bind:value={name}
@@ -150,11 +152,11 @@
 						autofocus
 						autocomplete="off"
 						spellcheck="false"
-						class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+						class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 					/>
 				</div>
 				<div class="w-28 shrink-0">
-					<label class="text-[10px] text-gray-400 dark:text-gray-600"
+					<label class="text-[0.625rem] text-gray-400 dark:text-gray-600"
 						>{$t('messaging.platform')}</label
 					>
 					<select
@@ -162,7 +164,7 @@
 						onchange={() => {
 							verifyResult = null;
 						}}
-						class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
+						class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
 					>
 						<option value="telegram">Telegram</option>
 						<option value="discord">Discord</option>
@@ -174,7 +176,7 @@
 			</div>
 		{:else}
 			<!-- Edit mode: just name -->
-			<label class="text-[10px] text-gray-400 dark:text-gray-600">{$t('messaging.name')}</label>
+			<label class="text-[0.625rem] text-gray-400 dark:text-gray-600">{$t('messaging.name')}</label>
 			<input
 				type="text"
 				bind:value={name}
@@ -182,12 +184,12 @@
 				autofocus
 				autocomplete="off"
 				spellcheck="false"
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 			/>
 		{/if}
 
 		<!-- Token -->
-		<label class="text-[10px] text-gray-400 dark:text-gray-600">
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600">
 			Token {#if bot}<span class="text-gray-300 dark:text-gray-700">({bot.token_masked})</span>{/if}
 		</label>
 		<div class="flex gap-2 items-center mb-0.5">
@@ -198,12 +200,12 @@
 					? $t('messaging.tokenKeep')
 					: platformHints[platform] || $t('messaging.tokenPaste')}
 				autocomplete="new-password"
-				class="flex-1 bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+				class="flex-1 bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 			/>
 			{#if !bot}
 				<button
 					type="button"
-					class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors disabled:opacity-30"
+					class="text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors disabled:opacity-30"
 					onclick={handleVerify}
 					disabled={verifying || !token.trim()}
 				>
@@ -217,7 +219,7 @@
 		</div>
 
 		{#if verifyResult}
-			<p class="text-[10px] mb-1 text-gray-500 dark:text-gray-400">
+			<p class="text-[0.625rem] mb-1 text-gray-500 dark:text-gray-400">
 				{#if verifyResult.ok}
 					✓ {verifyResult.info?.username
 						? `@${verifyResult.info.username}`
@@ -229,10 +231,10 @@
 		{/if}
 
 		<!-- Allowed senders -->
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-1"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1"
 			>{$t('messaging.allowedSenders')}</label
 		>
-		<p class="text-[10px] text-gray-300 dark:text-gray-700 mb-0.5">
+		<p class="text-[0.625rem] text-gray-300 dark:text-gray-700 mb-0.5">
 			{$t('messaging.allowedSendersHint')}
 		</p>
 		<input
@@ -241,7 +243,7 @@
 			placeholder="123456789, 987654321"
 			autocomplete="off"
 			spellcheck="false"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 
 		<!-- Bottom toolbar -->
@@ -254,11 +256,11 @@
 				<button
 					bind:this={workspaceButtonEl}
 					type="button"
-					class="flex items-center gap-1 px-2 py-1 rounded-lg text-[11px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors duration-100"
+					class="flex items-center gap-1 px-2 py-1 rounded-lg text-[0.6875rem] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors duration-100"
 					onclick={() => (showWsMenu = !showWsMenu)}
 				>
 					<Icon name="folder" size={12} />
-					<span class="truncate max-w-[120px]">{selectedWorkspaceName}</span>
+					<span class="truncate max-w-[7.5rem]">{selectedWorkspaceName}</span>
 					<svg
 						class="w-3 h-3 opacity-50"
 						viewBox="0 0 24 24"
@@ -277,7 +279,7 @@
 				type="button"
 				disabled={saving || !name.trim() || (!bot && !token.trim()) || !modelId || !workspace}
 				onclick={handleSubmit}
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
 			>
 				{#if saving}
 					<Spinner size={14} />
diff --git a/cptr/frontend/src/lib/components/Admin/CreateConnectionModal.svelte b/cptr/frontend/src/lib/components/Admin/CreateConnectionModal.svelte
index a4fbfba9..4c81224c 100644
--- a/cptr/frontend/src/lib/components/Admin/CreateConnectionModal.svelte
+++ b/cptr/frontend/src/lib/components/Admin/CreateConnectionModal.svelte
@@ -77,22 +77,26 @@
 
 		<div class="flex gap-3">
 			<div class="flex-1">
-				<label class="text-[10px] text-gray-400 dark:text-gray-600">{$t('connections.name')}</label>
+				<label class="text-[0.625rem] text-gray-400 dark:text-gray-600"
+					>{$t('connections.name')}</label
+				>
 				<input
 					type="text"
-					placeholder="Optional"
+					placeholder={$t('connections.optional')}
 					bind:value={formName}
 					autofocus
 					autocomplete="off"
 					spellcheck="false"
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 				/>
 			</div>
 			<div class="w-28 shrink-0">
-				<label class="text-[10px] text-gray-400 dark:text-gray-600">Provider</label>
+				<label class="text-[0.625rem] text-gray-400 dark:text-gray-600">
+					{$t('connections.provider')}
+				</label>
 				<select
 					bind:value={formProvider}
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
 				>
 					<option value="openai">OpenAI</option>
 					<option value="anthropic">Anthropic</option>
@@ -101,17 +105,19 @@
 		</div>
 
 		{#if formProvider === 'openai'}
-			<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2">API Type</label>
+			<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2">
+				{$t('connections.apiType')}
+			</label>
 			<select
 				bind:value={formApiType}
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
 			>
-				<option value="chat_completions">Chat Completions</option>
-				<option value="responses">Responses</option>
+				<option value="chat_completions">{$t('connections.chatCompletions')}</option>
+				<option value="responses">{$t('connections.responses')}</option>
 			</select>
 		{/if}
 
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>{$t('connections.baseUrl')}</label
 		>
 		<input
@@ -121,7 +127,7 @@
 			autocomplete="off"
 			spellcheck="false"
 			list="base-url-suggestions"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 		<datalist id="base-url-suggestions">
 			<option value="https://api.anthropic.com/v1" />
@@ -130,7 +136,7 @@
 			<option value="http://localhost:11434/v1" />
 		</datalist>
 
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>{$t('connections.apiKey')}</label
 		>
 		<input
@@ -138,39 +144,41 @@
 			placeholder="sk-..."
 			bind:value={formApiKey}
 			autocomplete="new-password"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>{$t('connections.prefixId')}</label
 		>
 		<input
 			type="text"
-			placeholder="e.g. openrouter"
+			placeholder={$t('connections.prefixPlaceholder')}
 			bind:value={formPrefixId}
 			autocomplete="off"
 			spellcheck="false"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>{$t('connections.models')}</label
 		>
-		<p class="text-[10px] text-gray-300 dark:text-gray-700 mb-0.5">{$t('connections.modelsHint')}</p>
+		<p class="text-[0.625rem] text-gray-300 dark:text-gray-700 mb-0.5">
+			{$t('connections.modelsHint')}
+		</p>
 		<input
 			type="text"
 			placeholder="claude-sonnet-4-20250514, claude-opus-4-20250514"
 			bind:value={formModels}
 			autocomplete="off"
 			spellcheck="false"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 
 		<div class="flex justify-end mt-3">
 			<button
 				disabled={creating || !formBaseUrl.trim() || !formApiKey.trim()}
 				onclick={create}
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
 			>
 				{#if creating}
 					<Spinner size={14} />
diff --git a/cptr/frontend/src/lib/components/Admin/CreateUserModal.svelte b/cptr/frontend/src/lib/components/Admin/CreateUserModal.svelte
index ef03fa9e..caa9c721 100644
--- a/cptr/frontend/src/lib/components/Admin/CreateUserModal.svelte
+++ b/cptr/frontend/src/lib/components/Admin/CreateUserModal.svelte
@@ -52,7 +52,9 @@
 		}}
 	>
 		<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-2">{$t('admin.newUser')}</h2>
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-1">{$t('admin.username')}</label>
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1"
+			>{$t('admin.username')}</label
+		>
 		<input
 			type="text"
 			placeholder={$t('admin.enterUsername')}
@@ -60,9 +62,9 @@
 			autofocus
 			autocomplete="off"
 			spellcheck="false"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 		/>
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-1"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1"
 			>{$t('admin.displayName')}</label
 		>
 		<input
@@ -71,9 +73,9 @@
 			bind:value={displayName}
 			autocomplete="off"
 			spellcheck="false"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 		/>
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-1"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1"
 			>{$t('admin.passwordLabel')}</label
 		>
 		<input
@@ -81,12 +83,12 @@
 			placeholder={$t('admin.minChars')}
 			bind:value={password}
 			autocomplete="new-password"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 		/>
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-1">{$t('admin.role')}</label>
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1">{$t('admin.role')}</label>
 		<select
 			bind:value={role}
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
 		>
 			{#each ROLES as r}<option value={r}>{r}</option>{/each}
 		</select>
@@ -94,7 +96,7 @@
 			<button
 				disabled={creating || !username.trim() || password.length < 6}
 				onclick={create}
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
 			>
 				{#if creating}
 					<Spinner size={14} />
diff --git a/cptr/frontend/src/lib/components/Admin/EditConnectionModal.svelte b/cptr/frontend/src/lib/components/Admin/EditConnectionModal.svelte
index c54d31e4..424e0618 100644
--- a/cptr/frontend/src/lib/components/Admin/EditConnectionModal.svelte
+++ b/cptr/frontend/src/lib/components/Admin/EditConnectionModal.svelte
@@ -113,22 +113,26 @@
 
 		<div class="flex gap-3">
 			<div class="flex-1">
-				<label class="text-[10px] text-gray-400 dark:text-gray-600">{$t('connections.name')}</label>
+				<label class="text-[0.625rem] text-gray-400 dark:text-gray-600"
+					>{$t('connections.name')}</label
+				>
 				<input
 					type="text"
-					placeholder="Optional"
+					placeholder={$t('connections.optional')}
 					bind:value={formName}
 					autofocus
 					autocomplete="off"
 					spellcheck="false"
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 				/>
 			</div>
 			<div class="w-28 shrink-0">
-				<label class="text-[10px] text-gray-400 dark:text-gray-600">Provider</label>
+				<label class="text-[0.625rem] text-gray-400 dark:text-gray-600">
+					{$t('connections.provider')}
+				</label>
 				<select
 					bind:value={formProvider}
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
 				>
 					<option value="openai">OpenAI</option>
 					<option value="anthropic">Anthropic</option>
@@ -137,17 +141,19 @@
 		</div>
 
 		{#if formProvider === 'openai'}
-			<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2">API Type</label>
+			<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2">
+				{$t('connections.apiType')}
+			</label>
 			<select
 				bind:value={formApiType}
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
 			>
-				<option value="chat_completions">Chat Completions</option>
-				<option value="responses">Responses</option>
+				<option value="chat_completions">{$t('connections.chatCompletions')}</option>
+				<option value="responses">{$t('connections.responses')}</option>
 			</select>
 		{/if}
 
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>{$t('connections.baseUrl')}</label
 		>
 		<input
@@ -157,7 +163,7 @@
 			autocomplete="off"
 			spellcheck="false"
 			list="base-url-suggestions-edit"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 		<datalist id="base-url-suggestions-edit">
 			<option value="https://api.anthropic.com/v1" />
@@ -166,50 +172,52 @@
 			<option value="http://localhost:11434/v1" />
 		</datalist>
 
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>{$t('connections.apiKey')}</label
 		>
 		<input
 			type="password"
-			placeholder="••••••••  (leave blank to keep)"
+			placeholder={$t('connections.leaveBlankPlaceholder')}
 			bind:value={formApiKey}
 			autocomplete="new-password"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>{$t('connections.prefixId')}</label
 		>
 		<input
 			type="text"
-			placeholder="e.g. openrouter"
+			placeholder={$t('connections.prefixPlaceholder')}
 			bind:value={formPrefixId}
 			autocomplete="off"
 			spellcheck="false"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 			>{$t('connections.models')}</label
 		>
-		<p class="text-[10px] text-gray-300 dark:text-gray-700 mb-0.5">{$t('connections.modelsHint')}</p>
+		<p class="text-[0.625rem] text-gray-300 dark:text-gray-700 mb-0.5">
+			{$t('connections.modelsHint')}
+		</p>
 		<input
 			type="text"
 			placeholder="claude-sonnet-4-20250514, claude-opus-4-20250514"
 			bind:value={formModels}
 			autocomplete="off"
 			spellcheck="false"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 		/>
 
 		<div class="flex items-center justify-between mt-3">
 			<div class="flex items-center gap-3">
 				<button
-					class="text-[13px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
+					class="text-[0.8125rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
 					onclick={handleDelete}>{$t('admin.delete') || 'Delete'}</button
 				>
 				<button
-					class="text-[13px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100 disabled:opacity-30"
+					class="text-[0.8125rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100 disabled:opacity-30"
 					disabled={verifying}
 					onclick={handleVerify}
 				>
@@ -223,7 +231,7 @@
 			<button
 				disabled={saving || !formBaseUrl.trim()}
 				onclick={save}
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
 			>
 				{#if saving}
 					<Spinner size={14} />
diff --git a/cptr/frontend/src/lib/components/Admin/EditUserModal.svelte b/cptr/frontend/src/lib/components/Admin/EditUserModal.svelte
index d2a97cc6..68896687 100644
--- a/cptr/frontend/src/lib/components/Admin/EditUserModal.svelte
+++ b/cptr/frontend/src/lib/components/Admin/EditUserModal.svelte
@@ -91,23 +91,25 @@
 <Modal {onclose} class="w-full max-w-sm mx-4">
 	<div class="p-4">
 		<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-2">{$t('admin.editUser')}</h2>
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-1">{$t('admin.username')}</label>
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1"
+			>{$t('admin.username')}</label
+		>
 		<input
 			type="text"
 			placeholder={$t('admin.username')}
 			bind:value={username}
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 		/>
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-1"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1"
 			>{$t('admin.displayName')}</label
 		>
 		<input
 			type="text"
 			placeholder={$t('admin.optional')}
 			bind:value={displayName}
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 		/>
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-1"
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1"
 			>{$t('admin.newPasswordLabel')}</label
 		>
 		<input
@@ -115,20 +117,20 @@
 			placeholder={$t('admin.leaveBlank')}
 			bind:value={newPassword}
 			autocomplete="new-password"
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 		/>
-		<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-1">{$t('admin.role')}</label>
+		<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1">{$t('admin.role')}</label>
 		<select
 			bind:value={role}
 			disabled={isSelf}
-			class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer disabled:opacity-50"
+			class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer disabled:opacity-50"
 		>
 			{#each ROLES as r}<option value={r}>{r}</option>{/each}
 		</select>
 		<div class="flex items-center justify-between mt-3">
 			{#if !isSelf && (user.role !== 'admin' || adminCount > 1)}
 				<button
-					class="text-[13px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
+					class="text-[0.8125rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
 					onclick={deleteUser}>{$t('admin.delete')}</button
 				>
 			{:else}
@@ -137,7 +139,7 @@
 			<button
 				disabled={saving}
 				onclick={save}
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
 			>
 				{#if saving}{$t('settings.saving')}{:else}{$t('settings.save')}{/if}
 			</button>
diff --git a/cptr/frontend/src/lib/components/Admin/Gateway.svelte b/cptr/frontend/src/lib/components/Admin/Gateway.svelte
index bd2c26ed..180de3d6 100644
--- a/cptr/frontend/src/lib/components/Admin/Gateway.svelte
+++ b/cptr/frontend/src/lib/components/Admin/Gateway.svelte
@@ -127,7 +127,7 @@
 	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-1">
 		{$t('admin.gateway.title')}
 	</h2>
-	<p class="text-[11px] text-gray-400 dark:text-gray-600 mb-4">
+	<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mb-4">
 		{$t('admin.gateway.description')}
 	</p>
 
@@ -152,7 +152,7 @@
 					{/each}
 				</select>
 			</div>
-			<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-1.5">
+			<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-1.5">
 				{$t('admin.gateway.modelDescription')}
 			</p>
 		</div>
@@ -164,7 +164,7 @@
 						{$t('admin.gateway.newKey')}
 					</h3>
 					<button
-						class="shrink-0 text-[11px] text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white transition-colors"
+						class="shrink-0 text-[0.6875rem] text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white transition-colors"
 						onclick={copyKey}
 					>
 						{$t('admin.gateway.copy')}
@@ -172,12 +172,12 @@
 				</div>
 				<div class="flex items-center gap-2">
 					<code
-						class="flex-1 min-w-0 text-[11px] font-mono bg-gray-50 dark:bg-white/4 px-2.5 py-2 rounded-lg border border-gray-100 dark:border-white/5 text-gray-600 dark:text-gray-400 select-all break-all"
+						class="flex-1 min-w-0 text-[0.6875rem] font-mono bg-gray-50 dark:bg-white/4 px-2.5 py-2 rounded-lg border border-gray-100 dark:border-white/5 text-gray-600 dark:text-gray-400 select-all break-all"
 					>
 						{revealedKey}
 					</code>
 				</div>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-1.5">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-1.5">
 					{$t('admin.gateway.keyWarning')}
 				</p>
 			</div>
@@ -194,7 +194,7 @@
 				disabled={creating}
 			/>
 			<button
-				class="shrink-0 text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
+				class="shrink-0 text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
 				onclick={createKey}
 				disabled={creating}
 			>
@@ -224,7 +224,7 @@
 							<span class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate">
 								{key.name}
 							</span>
-							<span class="text-[10px] text-gray-400 dark:text-gray-600 shrink-0">
+							<span class="text-[0.625rem] text-gray-400 dark:text-gray-600 shrink-0">
 								{formatDate(key.created_at)}
 							</span>
 						</div>
@@ -244,7 +244,7 @@
 			<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2">
 				{$t('admin.gateway.howToConnect')}
 			</h3>
-			<div class="space-y-1.5 text-[11px] font-mono text-gray-600 dark:text-gray-400">
+			<div class="space-y-1.5 text-[0.6875rem] font-mono text-gray-600 dark:text-gray-400">
 				<div>
 					<span class="text-gray-400 dark:text-gray-600">{$t('admin.gateway.baseUrl')}</span>
 					<span class="text-gray-700 dark:text-gray-300"
@@ -259,14 +259,14 @@
 					<div class="flex items-center justify-between gap-2 mb-1">
 						<span class="text-gray-400 dark:text-gray-600">{$t('admin.gateway.headers')}</span>
 						<button
-							class="shrink-0 text-[11px] font-sans text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white transition-colors"
+							class="shrink-0 text-[0.6875rem] font-sans text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white transition-colors"
 							onclick={copyHeaders}
 						>
 							{$t('admin.gateway.copy')}
 						</button>
 					</div>
 					<button
-						class="w-full text-left whitespace-pre-wrap rounded-lg border border-gray-100 dark:border-white/5 bg-gray-50 dark:bg-white/4 px-2.5 py-2 text-[11px] font-mono text-gray-700 dark:text-gray-300 transition-colors hover:border-gray-200 dark:hover:border-white/10"
+						class="w-full text-left whitespace-pre-wrap rounded-lg border border-gray-100 dark:border-white/5 bg-gray-50 dark:bg-white/4 px-2.5 py-2 text-[0.6875rem] font-mono text-gray-700 dark:text-gray-300 transition-colors hover:border-gray-200 dark:hover:border-white/10"
 						onclick={copyHeaders}
 					>
 						{openWebUIHeaders}
@@ -277,7 +277,7 @@
 
 		<div class="mt-auto pt-6 flex justify-end">
 			<button
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
 				onclick={() => save()}
 				disabled={saving}>{$t('settings.save')}</button
 			>
diff --git a/cptr/frontend/src/lib/components/Admin/Images.svelte b/cptr/frontend/src/lib/components/Admin/Images.svelte
index ff1cf4d9..290f8159 100644
--- a/cptr/frontend/src/lib/components/Admin/Images.svelte
+++ b/cptr/frontend/src/lib/components/Admin/Images.svelte
@@ -99,7 +99,7 @@
 						}}
 					/>
 				</label>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 					{$t('admin.images.generationHint')}
 				</p>
 				<div>
@@ -167,7 +167,7 @@
 						}}
 					/>
 				</label>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 					{$t('admin.images.editHint')}
 				</p>
 				<div>
@@ -224,7 +224,7 @@
 		<!-- Save -->
 		<div class="shrink-0 pt-3 flex justify-end">
 			<button
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
 				onclick={() => save()}
 				disabled={saving}
 			>
diff --git a/cptr/frontend/src/lib/components/Admin/Messaging.svelte b/cptr/frontend/src/lib/components/Admin/Messaging.svelte
index a05fb7af..d55ca216 100644
--- a/cptr/frontend/src/lib/components/Admin/Messaging.svelte
+++ b/cptr/frontend/src/lib/components/Admin/Messaging.svelte
@@ -81,15 +81,17 @@
 		{#each bots as bot}
 			<div class="group flex items-center gap-2 w-full h-7">
 				<!-- Platform icon -->
-				<span class="shrink-0
-					{bot.is_running ? 'text-gray-400 dark:text-gray-500' : 'text-gray-300 dark:text-gray-700'}">
+				<span
+					class="shrink-0
+					{bot.is_running ? 'text-gray-400 dark:text-gray-500' : 'text-gray-300 dark:text-gray-700'}"
+				>
 					<Icon name={bot.platform} size={14} />
 				</span>
 
 				<!-- Name (clickable to edit) -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<span
-					class="flex-1 text-[13px] truncate cursor-pointer
+					class="flex-1 text-[0.8125rem] truncate cursor-pointer
 					{bot.is_running ? 'text-gray-700 dark:text-gray-300' : 'text-gray-400 dark:text-gray-600'}"
 					onclick={() => (editBot = bot)}
 					onkeydown={() => {}}
@@ -131,7 +133,7 @@
 		{/each}
 
 		{#if bots.length === 0}
-			<p class="text-[13px] text-gray-400 dark:text-gray-600 py-4">{$t('messaging.noBots')}</p>
+			<p class="text-[0.8125rem] text-gray-400 dark:text-gray-600 py-4">{$t('messaging.noBots')}</p>
 		{/if}
 	</div>
 {/if}
@@ -141,9 +143,5 @@
 {/if}
 
 {#if editBot}
-	<CreateBotModal
-		bot={editBot}
-		onclose={() => (editBot = null)}
-		onsave={handleSaved}
-	/>
+	<CreateBotModal bot={editBot} onclose={() => (editBot = null)} onsave={handleSaved} />
 {/if}
diff --git a/cptr/frontend/src/lib/components/Admin/Models.svelte b/cptr/frontend/src/lib/components/Admin/Models.svelte
index ffc11ec1..c052fe99 100644
--- a/cptr/frontend/src/lib/components/Admin/Models.svelte
+++ b/cptr/frontend/src/lib/components/Admin/Models.svelte
@@ -256,11 +256,11 @@ Files:
 
 {#snippet systemPromptField(value: string, onInput: (v: string) => void, placeholder: string)}
 	<div class="mb-2">
-		<span class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wide"
+		<span class="text-[0.625rem] text-gray-400 dark:text-gray-600 uppercase tracking-wide"
 			>{$t('models.systemPrompt')}</span
 		>
 		<textarea
-			class="w-full mt-1 bg-gray-50 dark:bg-white/4 border border-gray-200 dark:border-white/8 rounded-lg px-2.5 py-2 text-[11px] font-mono text-gray-600 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none resize-y leading-relaxed"
+			class="w-full mt-1 bg-gray-50 dark:bg-white/4 border border-gray-200 dark:border-white/8 rounded-lg px-2.5 py-2 text-[0.6875rem] font-mono text-gray-600 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none resize-y leading-relaxed"
 			rows="6"
 			{placeholder}
 			{value}
@@ -269,7 +269,7 @@ Files:
 		></textarea>
 		<div class="flex items-center gap-2 mt-1">
 			<button
-				class="text-[10px] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-75"
+				class="text-[0.625rem] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-75"
 				onclick={() => (showVariables = !showVariables)}
 			>
 				{$t('models.templateVariables')}
@@ -277,7 +277,7 @@ Files:
 			</button>
 			{#if value.trim()}
 				<button
-					class="text-[10px] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-75"
+					class="text-[0.625rem] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-75"
 					onclick={() => onInput('')}
 				>
 					{$t('models.resetToDefault')}
@@ -290,10 +290,11 @@ Files:
 			>
 				{#each TEMPLATE_VARIABLES as v}
 					<div class="flex items-baseline gap-2 h-5">
-						<code class="text-[10px] font-mono text-gray-500 dark:text-gray-500 shrink-0 select-all"
+						<code
+							class="text-[0.625rem] font-mono text-gray-500 dark:text-gray-500 shrink-0 select-all"
 							>{`{{${v.name}}}`}</code
 						>
-						<span class="text-[10px] text-gray-400 dark:text-gray-600 truncate">{v.desc}</span>
+						<span class="text-[0.625rem] text-gray-400 dark:text-gray-600 truncate">{v.desc}</span>
 					</div>
 				{/each}
 			</div>
@@ -308,45 +309,45 @@ Files:
 	onAdd: () => void
 )}
 	<div class="mb-2">
-		<span class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wide"
-			>request params</span
+		<span class="text-[0.625rem] text-gray-400 dark:text-gray-600 uppercase tracking-wide"
+			>{$t('models.requestParams')}</span
 		>
 		{#each rows as row, i}
 			<div class="group/row flex items-center gap-1.5 h-6">
 				<input
 					type="text"
-					placeholder="key"
+					placeholder={$t('models.paramKey')}
 					bind:value={row.key}
 					oninput={onInput}
 					autocomplete="off"
 					spellcheck="false"
-					class="w-24 shrink-0 bg-transparent text-[11px] font-mono text-gray-500 dark:text-gray-500 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
+					class="w-24 shrink-0 bg-transparent text-[0.6875rem] font-mono text-gray-500 dark:text-gray-500 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
 				/>
 				<input
 					type="text"
-					placeholder="value"
+					placeholder={$t('models.paramValue')}
 					bind:value={row.value}
 					oninput={onInput}
 					autocomplete="off"
 					spellcheck="false"
-					class="flex-1 min-w-0 bg-transparent text-[11px] font-mono text-gray-500 dark:text-gray-500 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
+					class="flex-1 min-w-0 bg-transparent text-[0.6875rem] font-mono text-gray-500 dark:text-gray-500 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
 				/>
 				<button
 					type="button"
 					onclick={() => onRemove(i)}
 					class="shrink-0 text-gray-300 dark:text-gray-700 opacity-0 group-hover/row:opacity-100 hover:text-gray-500 dark:hover:text-gray-400 transition-colors duration-75"
-					aria-label="Remove"
+					aria-label={$t('common.remove')}
 				>
 					<Icon name="xmark" size={8} />
 				</button>
 			</div>
 		{/each}
 		<button
-			class="flex items-center gap-1 h-6 text-[11px] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-75"
+			class="flex items-center gap-1 h-6 text-[0.6875rem] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-75"
 			onclick={onAdd}
 		>
 			<Icon name="plus" size={10} />
-			<span>Add</span>
+			<span>{$t('common.add')}</span>
 		</button>
 	</div>
 {/snippet}
@@ -358,7 +359,7 @@ Files:
 )}
 	<div class="mb-2">
 		<label
-			class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wide"
+			class="text-[0.625rem] text-gray-400 dark:text-gray-600 uppercase tracking-wide"
 			for={inputId}>{$t('admin.compactTokenThreshold')}</label
 		>
 		<div class="flex items-center gap-1.5 mt-1">
@@ -372,7 +373,7 @@ Files:
 				placeholder={$t('admin.compactTokenThreshold')}
 				class="w-24 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 			/>
-			<span class="text-[11px] text-gray-400 dark:text-gray-600"
+			<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600"
 				>{$t('admin.compactTokenThresholdUnit')}</span
 			>
 		</div>
@@ -406,7 +407,7 @@ Files:
 			<div class="mb-1">
 				<ModelSelector bind:selectedModel={defaultModelId} preferAbove={false} align="start" />
 			</div>
-			<p class="text-[11px] text-gray-400 dark:text-gray-600 mb-5">
+			<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mb-5">
 				{$t('models.defaultModelHint')}
 			</p>
 
@@ -429,11 +430,11 @@ Files:
 							step="10000"
 							class="w-24 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 						/>
-						<span class="text-[11px] text-gray-400 dark:text-gray-600"
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600"
 							>{$t('admin.compactTokenThresholdUnit')}</span
 						>
 					</div>
-					<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-0.5">
+					<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-0.5">
 						{$t('admin.compactTokenThresholdHint')}
 					</p>
 				</div>
@@ -444,11 +445,11 @@ Files:
 				class="group flex items-center gap-2 w-full h-7 text-left"
 				onclick={() => (globalExpanded = !globalExpanded)}
 			>
-				<span class="flex-1 text-[13px] text-gray-500 dark:text-gray-400"
+				<span class="flex-1 text-[0.8125rem] text-gray-500 dark:text-gray-400"
 					>{$t('models.defaults')}</span
 				>
 				{#if globalRows.filter((r) => r.key.trim()).length > 0 || globalSystemPrompt.trim()}
-					<span class="text-[10px] text-gray-400 dark:text-gray-600">
+					<span class="text-[0.625rem] text-gray-400 dark:text-gray-600">
 						{#if globalSystemPrompt.trim()}prompt{/if}
 						{#if globalRows.filter((r) => r.key.trim()).length > 0}
 							{globalRows.filter((r) => r.key.trim()).length} params
@@ -500,7 +501,7 @@ Files:
 					onclick={() => (selectedId = selectedId === model.id ? null : model.id)}
 				>
 					<span
-						class="flex-1 text-[13px] truncate {model.is_active
+						class="flex-1 text-[0.8125rem] truncate {model.is_active
 							? 'text-gray-700 dark:text-gray-300'
 							: 'text-gray-400 dark:text-gray-600'}"
 					>
@@ -561,7 +562,7 @@ Files:
 			{/each}
 
 			{#if models.length === 0}
-				<p class="text-[13px] text-gray-400 dark:text-gray-600 py-4">
+				<p class="text-[0.8125rem] text-gray-400 dark:text-gray-600 py-4">
 					{$t('models.noModels')}
 				</p>
 			{/if}
@@ -569,7 +570,7 @@ Files:
 
 		<div class="shrink-0 pt-3 flex justify-end">
 			<button
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
 				onclick={saveAll}
 			>
 				{#if saving}{$t('settings.saving')}{:else}{$t('settings.save')}{/if}
diff --git a/cptr/frontend/src/lib/components/Admin/Subagents.svelte b/cptr/frontend/src/lib/components/Admin/Subagents.svelte
index 2ce6371e..a8248fc8 100644
--- a/cptr/frontend/src/lib/components/Admin/Subagents.svelte
+++ b/cptr/frontend/src/lib/components/Admin/Subagents.svelte
@@ -21,7 +21,9 @@
 		try {
 			const config = await getAdminConfig();
 			enabled = config['subagents.enabled'] === true || config['subagents.enabled'] === 'true';
-			backgroundEnabled = config['subagents.background_enabled'] === true || config['subagents.background_enabled'] === 'true';
+			backgroundEnabled =
+				config['subagents.background_enabled'] === true ||
+				config['subagents.background_enabled'] === 'true';
 			maxConcurrent = Number(config['subagents.max_concurrent']) || 3;
 			maxAsync = Number(config['subagents.max_async']) || 3;
 			maxIterations = Number(config['subagents.max_iterations']) || 30;
@@ -63,67 +65,126 @@
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between cursor-pointer">
 				<span class="text-xs text-gray-600 dark:text-gray-400">{$t('admin.subagentsEnabled')}</span>
-				<ToggleSwitch value={enabled} onchange={(v) => { enabled = v; }} />
+				<ToggleSwitch
+					value={enabled}
+					onchange={(v) => {
+						enabled = v;
+					}}
+				/>
 			</label>
-			<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+			<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 				{$t('admin.subagentsHint')}
 			</p>
 
 			{#if enabled}
 				<div>
-					<label class="text-xs text-gray-600 dark:text-gray-400" for="sa-concurrent">{$t('admin.subagentsMaxConcurrent')}</label>
+					<label class="text-xs text-gray-600 dark:text-gray-400" for="sa-concurrent"
+						>{$t('admin.subagentsMaxConcurrent')}</label
+					>
 					<div class="flex items-center gap-1.5 mt-1">
-						<input id="sa-concurrent" type="number" bind:value={maxConcurrent} min="1" max="10"
-							class="w-16 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<span class="text-[11px] text-gray-400 dark:text-gray-600">{$t('admin.subagentsMaxConcurrentHint')}</span>
+						<input
+							id="sa-concurrent"
+							type="number"
+							bind:value={maxConcurrent}
+							min="1"
+							max="10"
+							class="w-16 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600"
+							>{$t('admin.subagentsMaxConcurrentHint')}</span
+						>
 					</div>
 				</div>
 
 				<div>
 					<label class="flex items-center justify-between cursor-pointer">
-						<span class="text-xs text-gray-600 dark:text-gray-400">{$t('admin.subagentsBackgroundEnabled')}</span>
-						<ToggleSwitch value={backgroundEnabled} onchange={(v) => { backgroundEnabled = v; }} />
+						<span class="text-xs text-gray-600 dark:text-gray-400"
+							>{$t('admin.subagentsBackgroundEnabled')}</span
+						>
+						<ToggleSwitch
+							value={backgroundEnabled}
+							onchange={(v) => {
+								backgroundEnabled = v;
+							}}
+						/>
 					</label>
-					<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-1">
+					<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-1">
 						{$t('admin.subagentsBackgroundHint')}
 					</p>
 				</div>
 
 				{#if backgroundEnabled}
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="sa-async">{$t('admin.subagentsMaxAsync')}</label>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="sa-async"
+							>{$t('admin.subagentsMaxAsync')}</label
+						>
 						<div class="flex items-center gap-1.5 mt-1">
-							<input id="sa-async" type="number" bind:value={maxAsync} min="1" max="10"
-								class="w-16 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-							<span class="text-[11px] text-gray-400 dark:text-gray-600">{$t('admin.subagentsMaxAsyncHint')}</span>
+							<input
+								id="sa-async"
+								type="number"
+								bind:value={maxAsync}
+								min="1"
+								max="10"
+								class="w-16 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+							/>
+							<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600"
+								>{$t('admin.subagentsMaxAsyncHint')}</span
+							>
 						</div>
 					</div>
 				{/if}
 
 				<div>
-					<label class="text-xs text-gray-600 dark:text-gray-400" for="sa-iterations">{$t('admin.subagentsMaxIterations')}</label>
+					<label class="text-xs text-gray-600 dark:text-gray-400" for="sa-iterations"
+						>{$t('admin.subagentsMaxIterations')}</label
+					>
 					<div class="flex items-center gap-1.5 mt-1">
-						<input id="sa-iterations" type="number" bind:value={maxIterations} min="1" max="100"
-							class="w-16 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<span class="text-[11px] text-gray-400 dark:text-gray-600">{$t('admin.subagentsMaxIterationsHint')}</span>
+						<input
+							id="sa-iterations"
+							type="number"
+							bind:value={maxIterations}
+							min="1"
+							max="100"
+							class="w-16 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600"
+							>{$t('admin.subagentsMaxIterationsHint')}</span
+						>
 					</div>
 				</div>
 
 				<div>
-					<label class="text-xs text-gray-600 dark:text-gray-400" for="sa-output">{$t('admin.subagentsMaxOutput')}</label>
+					<label class="text-xs text-gray-600 dark:text-gray-400" for="sa-output"
+						>{$t('admin.subagentsMaxOutput')}</label
+					>
 					<div class="flex items-center gap-1.5 mt-1">
-						<input id="sa-output" type="number" bind:value={maxOutput} min="1000" max="100000" step="1000"
-							class="w-20 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<span class="text-[11px] text-gray-400 dark:text-gray-600">chars</span>
+						<input
+							id="sa-output"
+							type="number"
+							bind:value={maxOutput}
+							min="1000"
+							max="100000"
+							step="1000"
+							class="w-20 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600">chars</span>
 					</div>
 				</div>
 
 				<div>
-					<label class="text-xs text-gray-600 dark:text-gray-400" for="sa-prompt">{$t('admin.subagentsSystemPrompt')}</label>
-					<textarea id="sa-prompt" bind:value={systemPrompt} rows="4"
+					<label class="text-xs text-gray-600 dark:text-gray-400" for="sa-prompt"
+						>{$t('admin.subagentsSystemPrompt')}</label
+					>
+					<textarea
+						id="sa-prompt"
+						bind:value={systemPrompt}
+						rows="4"
 						placeholder={$t('admin.subagentsSystemPromptPlaceholder')}
-						class="w-full mt-1 px-2 py-1.5 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors resize-y font-mono" />
-					<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-0.5">{$t('admin.subagentsSystemPromptHint')}</p>
+						class="w-full mt-1 px-2 py-1.5 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors resize-y font-mono"
+					/>
+					<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-0.5">
+						{$t('admin.subagentsSystemPromptHint')}
+					</p>
 				</div>
 			{/if}
 		</div>
@@ -131,10 +192,10 @@
 		<!-- Save -->
 		<div class="mt-auto pt-6 flex justify-end">
 			<button
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
 				onclick={() => save()}
-				disabled={saving}
-			>{$t('settings.save')}</button>
+				disabled={saving}>{$t('settings.save')}</button
+			>
 		</div>
 	{/if}
 </div>
diff --git a/cptr/frontend/src/lib/components/Admin/ToolServers.svelte b/cptr/frontend/src/lib/components/Admin/ToolServers.svelte
index 34a31b2d..9a8afc31 100644
--- a/cptr/frontend/src/lib/components/Admin/ToolServers.svelte
+++ b/cptr/frontend/src/lib/components/Admin/ToolServers.svelte
@@ -227,7 +227,7 @@
 				onclick={() => openEdit(s)}
 			>
 				<span
-					class="text-[10px] font-mono shrink-0
+					class="text-[0.625rem] font-mono shrink-0
 					{s.type === 'mcp' || s.type === 'mcp_stdio'
 						? 'text-purple-500 dark:text-purple-400'
 						: 'text-blue-500 dark:text-blue-400'}"
@@ -235,7 +235,7 @@
 					{s.type === 'mcp' ? 'MCP' : s.type === 'mcp_stdio' ? 'STDIO' : 'API'}
 				</span>
 				<span
-					class="flex-1 text-[13px] truncate
+					class="flex-1 text-[0.8125rem] truncate
 					{s.enabled ? 'text-gray-700 dark:text-gray-300' : 'text-gray-400 dark:text-gray-600'}"
 				>
 					{s.name || s.command || s.url}
@@ -264,7 +264,7 @@
 		{/each}
 
 		{#if servers.length === 0}
-			<p class="text-[13px] text-gray-400 dark:text-gray-600 py-4">
+			<p class="text-[0.8125rem] text-gray-400 dark:text-gray-600 py-4">
 				{$t('toolServers.empty')}
 			</p>
 		{/if}
@@ -287,7 +287,7 @@
 			<!-- ID + Type -->
 			<div class="flex gap-3">
 				<div class="flex-1">
-					<label class="text-[10px] text-gray-400 dark:text-gray-600"
+					<label class="text-[0.625rem] text-gray-400 dark:text-gray-600"
 						>{$t('toolServers.id')}</label
 					>
 					<input
@@ -298,16 +298,16 @@
 						autocomplete="off"
 						spellcheck="false"
 						disabled={!!editServer}
-						class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono disabled:opacity-50"
+						class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono disabled:opacity-50"
 					/>
 				</div>
 				<div class="w-28 shrink-0">
-					<label class="text-[10px] text-gray-400 dark:text-gray-600"
+					<label class="text-[0.625rem] text-gray-400 dark:text-gray-600"
 						>{$t('toolServers.type')}</label
 					>
 					<select
 						bind:value={formType}
-						class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
+						class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
 					>
 						<option value="openapi">{$t('toolServers.typeOpenAPI')}</option>
 						<option value="mcp">{$t('toolServers.typeMCP')}</option>
@@ -317,7 +317,7 @@
 			</div>
 
 			<!-- Name -->
-			<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+			<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 				>{$t('toolServers.name')}</label
 			>
 			<input
@@ -326,12 +326,12 @@
 				bind:value={formName}
 				autocomplete="off"
 				spellcheck="false"
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 			/>
 
 			<!-- URL (openapi/mcp only) -->
 			{#if formType !== 'mcp_stdio'}
-				<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+				<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 					>{$t('toolServers.url')}</label
 				>
 				<input
@@ -342,13 +342,13 @@
 					bind:value={formUrl}
 					autocomplete="off"
 					spellcheck="false"
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 				/>
 			{/if}
 
 			<!-- Command + Args (mcp_stdio only) -->
 			{#if formType === 'mcp_stdio'}
-				<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+				<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 					>{$t('toolServers.command')}</label
 				>
 				<input
@@ -357,9 +357,9 @@
 					bind:value={formCommand}
 					autocomplete="off"
 					spellcheck="false"
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 				/>
-				<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+				<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 					>{$t('toolServers.args')}</label
 				>
 				<input
@@ -368,9 +368,9 @@
 					bind:value={formArgs}
 					autocomplete="off"
 					spellcheck="false"
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 				/>
-				<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+				<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 					>{$t('toolServers.cwd')}</label
 				>
 				<input
@@ -379,13 +379,13 @@
 					bind:value={formCwd}
 					autocomplete="off"
 					spellcheck="false"
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 				/>
 			{/if}
 
 			<!-- Spec path (OpenAPI only) -->
 			{#if formType === 'openapi'}
-				<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+				<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 					>{$t('toolServers.specPath')}</label
 				>
 				<input
@@ -394,7 +394,7 @@
 					bind:value={formPath}
 					autocomplete="off"
 					spellcheck="false"
-					class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+					class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 				/>
 			{/if}
 
@@ -402,12 +402,12 @@
 			{#if formType !== 'mcp_stdio'}
 				<div class="flex gap-3 mt-2">
 					<div class="w-28 shrink-0">
-						<label class="text-[10px] text-gray-400 dark:text-gray-600"
+						<label class="text-[0.625rem] text-gray-400 dark:text-gray-600"
 							>{$t('toolServers.auth')}</label
 						>
 						<select
 							bind:value={formAuthType}
-							class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
+							class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 cursor-pointer"
 						>
 							<option value="none">{$t('toolServers.authNone')}</option>
 							<option value="bearer">{$t('toolServers.authBearer')}</option>
@@ -415,7 +415,7 @@
 					</div>
 					{#if formAuthType === 'bearer'}
 						<div class="flex-1">
-							<label class="text-[10px] text-gray-400 dark:text-gray-600"
+							<label class="text-[0.625rem] text-gray-400 dark:text-gray-600"
 								>{$t('toolServers.apiKey')}</label
 							>
 							<input
@@ -423,7 +423,7 @@
 								placeholder={editServer ? $t('toolServers.apiKeyKeep') : 'sk-...'}
 								bind:value={formKey}
 								autocomplete="new-password"
-								class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
+								class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono"
 							/>
 						</div>
 					{/if}
@@ -431,7 +431,7 @@
 			{/if}
 
 			<!-- Description -->
-			<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+			<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 				>{$t('toolServers.description')}</label
 			>
 			<input
@@ -440,27 +440,28 @@
 				bind:value={formDescription}
 				autocomplete="off"
 				spellcheck="false"
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 			/>
 
 			<!-- Headers -->
-			<label class="text-[10px] text-gray-400 dark:text-gray-600 mt-2"
+			<label class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-2"
 				>{$t('toolServers.headers')}</label
 			>
-			<p class="text-[10px] text-gray-300 dark:text-gray-700 mb-0.5">{$t('toolServers.headersHint')}</p>
+			<p class="text-[0.625rem] text-gray-300 dark:text-gray-700 mb-0.5">
+				{$t('toolServers.headersHint')}
+			</p>
 			<textarea
 				placeholder={'{"X-Custom-Header": "value"}'}
 				bind:value={formHeaders}
 				autocomplete="off"
 				spellcheck="false"
 				rows="2"
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono resize-none"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5 font-mono resize-none"
 			></textarea>
 
-
 			<!-- Verify result -->
 			{#if verifyResult?.ok && verifyResult.tools}
-				<div class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
+				<div class="mt-2 text-[0.6875rem] text-gray-500 dark:text-gray-400">
 					{verifyResult.tools.length}
 					{$t('toolServers.toolsFound')}:
 					<span class="text-gray-400 dark:text-gray-500"
@@ -474,11 +475,11 @@
 				<div class="flex items-center gap-3">
 					{#if editServer}
 						<button
-							class="text-[13px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
+							class="text-[0.8125rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
 							onclick={handleDelete}>{$t('toolServers.delete')}</button
 						>
 						<button
-							class="text-[13px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100 disabled:opacity-30"
+							class="text-[0.8125rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100 disabled:opacity-30"
 							disabled={verifying}
 							onclick={handleVerify}
 						>
@@ -493,7 +494,7 @@
 				<button
 					disabled={saving || (formType === 'mcp_stdio' ? !formCommand.trim() : !formUrl.trim())}
 					onclick={handleSubmit}
-					class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
+					class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
 				>
 					{#if saving}
 						<Spinner size={14} />
diff --git a/cptr/frontend/src/lib/components/Admin/Users.svelte b/cptr/frontend/src/lib/components/Admin/Users.svelte
index 91de2d8a..ea723b72 100644
--- a/cptr/frontend/src/lib/components/Admin/Users.svelte
+++ b/cptr/frontend/src/lib/components/Admin/Users.svelte
@@ -97,13 +97,9 @@
 <div class="flex flex-col gap-2.5 mb-3">
 	<label class="flex items-center justify-between cursor-pointer">
 		<span class="text-xs text-gray-600 dark:text-gray-400">{$t('admin.allowSignUp')}</span>
-		<ToggleSwitch
-			value={signupEnabled}
-			onchange={(v) => toggleSignup(v)}
-			disabled={savingConfig}
-		/>
+		<ToggleSwitch value={signupEnabled} onchange={(v) => toggleSignup(v)} disabled={savingConfig} />
 	</label>
-	<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+	<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 		{signupEnabled ? $t('admin.signUpEnabled') : $t('admin.signUpDisabled')}
 	</p>
 </div>
@@ -124,11 +120,11 @@
 					alt=""
 					class="w-4 h-4 rounded-full object-cover shrink-0"
 				/>
-				<span class="flex-1 text-[13px] text-gray-700 dark:text-gray-300 truncate"
+				<span class="flex-1 text-[0.8125rem] text-gray-700 dark:text-gray-300 truncate"
 					>{user.display_name || user.username}</span
 				>
 				<span
-					class="text-[11px] transition-colors duration-75
+					class="text-[0.6875rem] transition-colors duration-75
 					{user.role === 'admin'
 						? 'text-gray-900 dark:text-white font-medium'
 						: 'text-gray-400 dark:text-gray-600'}">{user.role}</span
@@ -137,7 +133,7 @@
 		{/each}
 
 		{#if users.length === 0}
-			<p class="text-[13px] text-gray-400 dark:text-gray-600 py-4">{$t('admin.noUsers')}</p>
+			<p class="text-[0.8125rem] text-gray-400 dark:text-gray-600 py-4">{$t('admin.noUsers')}</p>
 		{/if}
 	</div>
 
@@ -146,13 +142,15 @@
 			class="flex items-center justify-between mt-4 pt-3 border-t border-gray-200 dark:border-white/6"
 		>
 			<button
-				class="text-[11px] text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+				class="text-[0.6875rem] text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors disabled:opacity-30 disabled:pointer-events-none"
 				disabled={page === 0}
 				onclick={() => page--}>← {$t('admin.prev').replace('← ', '')}</button
 			>
-			<span class="text-[11px] text-gray-400 dark:text-gray-600">{page + 1} / {totalPages}</span>
+			<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600"
+				>{page + 1} / {totalPages}</span
+			>
 			<button
-				class="text-[11px] text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+				class="text-[0.6875rem] text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors disabled:opacity-30 disabled:pointer-events-none"
 				disabled={page >= totalPages - 1}
 				onclick={() => page++}>{$t('admin.next')}</button
 			>
diff --git a/cptr/frontend/src/lib/components/Admin/Web.svelte b/cptr/frontend/src/lib/components/Admin/Web.svelte
index 5b14981c..1c3dce51 100644
--- a/cptr/frontend/src/lib/components/Admin/Web.svelte
+++ b/cptr/frontend/src/lib/components/Admin/Web.svelte
@@ -49,7 +49,8 @@
 			perplexityKey = (config['web.perplexity_api_key'] as string) || '';
 			perplexityBaseUrl = (config['web.perplexity_base_url'] as string) || '';
 			firecrawlSearchKey = (config['web.firecrawl_api_key'] as string) || '';
-			firecrawlSearchBaseUrl = (config['web.firecrawl_base_url'] as string) || 'https://api.firecrawl.dev';
+			firecrawlSearchBaseUrl =
+				(config['web.firecrawl_base_url'] as string) || 'https://api.firecrawl.dev';
 			ccKey = (config['web.chat_completions_api_key'] as string) || '';
 			ccBaseUrl = (config['web.chat_completions_base_url'] as string) || '';
 			ccModel = (config['web.chat_completions_model'] as string) || '';
@@ -58,12 +59,15 @@
 			browserEnabled = config['browser.enabled'] === true || config['browser.enabled'] === 'true';
 			browserProvider = (config['browser.provider'] as typeof browserProvider) || 'local';
 			cdpUrl = (config['browser.cdp_url'] as string) || 'http://localhost:9222';
-			autoLaunch = config['browser.auto_launch'] !== false && config['browser.auto_launch'] !== 'false';
+			autoLaunch =
+				config['browser.auto_launch'] !== false && config['browser.auto_launch'] !== 'false';
 			sessionTimeout = Number(config['browser.session_timeout_minutes']) || 10;
 			firecrawlApiKey = (config['browser.firecrawl_api_key'] as string) || '';
-			firecrawlBaseUrl = (config['browser.firecrawl_base_url'] as string) || 'https://api.firecrawl.dev';
+			firecrawlBaseUrl =
+				(config['browser.firecrawl_base_url'] as string) || 'https://api.firecrawl.dev';
 			browserUseApiKey = (config['browser.browser_use_api_key'] as string) || '';
-			browserUseBaseUrl = (config['browser.browser_use_base_url'] as string) || 'https://api.browser-use.com';
+			browserUseBaseUrl =
+				(config['browser.browser_use_base_url'] as string) || 'https://api.browser-use.com';
 		} catch {
 			toast.error($t('admin.failedToLoadConfig'));
 		}
@@ -136,15 +140,22 @@
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between cursor-pointer">
 				<span class="text-xs text-gray-600 dark:text-gray-400">{$t('admin.webEnabled')}</span>
-				<ToggleSwitch value={webEnabled} onchange={(v) => { webEnabled = v; }} />
+				<ToggleSwitch
+					value={webEnabled}
+					onchange={(v) => {
+						webEnabled = v;
+					}}
+				/>
 			</label>
-			<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+			<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 				{webEnabled ? $t('admin.webEnabledHint') : $t('admin.webDisabledHint')}
 			</p>
 
 			{#if webEnabled}
 				<div class="flex items-center justify-between">
-					<span class="text-xs text-gray-600 dark:text-gray-400">{$t('admin.webSearchProvider')}</span>
+					<span class="text-xs text-gray-600 dark:text-gray-400"
+						>{$t('admin.webSearchProvider')}</span
+					>
 					<select
 						bind:value={searchProvider}
 						class="bg-transparent text-xs text-gray-600 dark:text-gray-400 outline-none cursor-pointer"
@@ -159,7 +170,7 @@
 						<option value="chat_completions">{$t('admin.webChatCompletions')}</option>
 					</select>
 				</div>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 					{#if searchProvider === 'auto'}
 						{$t('admin.webAutoHint')}
 					{:else if searchProvider === 'duckduckgo'}
@@ -169,68 +180,154 @@
 
 				{#if searchProvider === 'exa'}
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="exa-key">{$t('admin.webExaKey')}</label>
-						<input id="exa-key" type="password" bind:value={exaKey} placeholder="exa-..."
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-0.5">{$t('admin.webExaHint')}</p>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="exa-key"
+							>{$t('admin.webExaKey')}</label
+						>
+						<input
+							id="exa-key"
+							type="password"
+							bind:value={exaKey}
+							placeholder="exa-..."
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-0.5">
+							{$t('admin.webExaHint')}
+						</p>
 					</div>
 				{:else if searchProvider === 'tavily'}
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="tavily-key">{$t('admin.webTavilyKey')}</label>
-						<input id="tavily-key" type="password" bind:value={tavilyKey} placeholder="tvly-..."
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-0.5">{$t('admin.webTavilyHint')}</p>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="tavily-key"
+							>{$t('admin.webTavilyKey')}</label
+						>
+						<input
+							id="tavily-key"
+							type="password"
+							bind:value={tavilyKey}
+							placeholder="tvly-..."
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-0.5">
+							{$t('admin.webTavilyHint')}
+						</p>
 					</div>
 				{:else if searchProvider === 'brave'}
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="brave-key">{$t('admin.webBraveKey')}</label>
-						<input id="brave-key" type="password" bind:value={braveKey} placeholder="BSA..."
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-0.5">{$t('admin.webBraveHint')}</p>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="brave-key"
+							>{$t('admin.webBraveKey')}</label
+						>
+						<input
+							id="brave-key"
+							type="password"
+							bind:value={braveKey}
+							placeholder="BSA..."
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-0.5">
+							{$t('admin.webBraveHint')}
+						</p>
 					</div>
 				{:else if searchProvider === 'firecrawl'}
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="web-fc-key">{$t('admin.webFirecrawlKey')}</label>
-						<input id="web-fc-key" type="password" bind:value={firecrawlSearchKey} placeholder="fc-..."
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-0.5">{$t('admin.webFirecrawlHint')}</p>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="web-fc-key"
+							>{$t('admin.webFirecrawlKey')}</label
+						>
+						<input
+							id="web-fc-key"
+							type="password"
+							bind:value={firecrawlSearchKey}
+							placeholder="fc-..."
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-0.5">
+							{$t('admin.webFirecrawlHint')}
+						</p>
 					</div>
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="web-fc-url">{$t('admin.webFirecrawlBaseUrl')}</label>
-						<input id="web-fc-url" type="text" bind:value={firecrawlSearchBaseUrl} placeholder="https://api.firecrawl.dev"
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-0.5">{$t('admin.browserFirecrawlBaseUrlHint')}</p>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="web-fc-url"
+							>{$t('admin.webFirecrawlBaseUrl')}</label
+						>
+						<input
+							id="web-fc-url"
+							type="text"
+							bind:value={firecrawlSearchBaseUrl}
+							placeholder="https://api.firecrawl.dev"
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-0.5">
+							{$t('admin.browserFirecrawlBaseUrlHint')}
+						</p>
 					</div>
 				{:else if searchProvider === 'perplexity'}
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="pplx-key">{$t('admin.webPerplexityKey')}</label>
-						<input id="pplx-key" type="password" bind:value={perplexityKey} placeholder="pplx-..."
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-0.5">{$t('admin.webPerplexityHint')}</p>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="pplx-key"
+							>{$t('admin.webPerplexityKey')}</label
+						>
+						<input
+							id="pplx-key"
+							type="password"
+							bind:value={perplexityKey}
+							placeholder="pplx-..."
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-0.5">
+							{$t('admin.webPerplexityHint')}
+						</p>
 					</div>
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="pplx-base-url">{$t('admin.webPerplexityBaseUrl')}</label>
-						<input id="pplx-base-url" type="text" bind:value={perplexityBaseUrl} placeholder="https://api.perplexity.ai"
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-0.5">{$t('admin.webPerplexityBaseUrlHint')}</p>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="pplx-base-url"
+							>{$t('admin.webPerplexityBaseUrl')}</label
+						>
+						<input
+							id="pplx-base-url"
+							type="text"
+							bind:value={perplexityBaseUrl}
+							placeholder="https://api.perplexity.ai"
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-0.5">
+							{$t('admin.webPerplexityBaseUrlHint')}
+						</p>
 					</div>
 				{:else if searchProvider === 'chat_completions'}
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="cc-base-url">{$t('admin.webCcBaseUrl')}</label>
-						<input id="cc-base-url" type="text" bind:value={ccBaseUrl} placeholder="https://api.perplexity.ai/v1"
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="cc-base-url"
+							>{$t('admin.webCcBaseUrl')}</label
+						>
+						<input
+							id="cc-base-url"
+							type="text"
+							bind:value={ccBaseUrl}
+							placeholder="https://api.perplexity.ai/v1"
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
 					</div>
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="cc-key">{$t('admin.webCcKey')}</label>
-						<input id="cc-key" type="password" bind:value={ccKey} placeholder="sk-..."
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="cc-key"
+							>{$t('admin.webCcKey')}</label
+						>
+						<input
+							id="cc-key"
+							type="password"
+							bind:value={ccKey}
+							placeholder="sk-..."
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
 					</div>
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="cc-model">{$t('admin.webCcModel')}</label>
-						<input id="cc-model" type="text" bind:value={ccModel} placeholder="sonar-pro"
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="cc-model"
+							>{$t('admin.webCcModel')}</label
+						>
+						<input
+							id="cc-model"
+							type="text"
+							bind:value={ccModel}
+							placeholder="sonar-pro"
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
 					</div>
-					<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">{$t('admin.webCcHint')}</p>
+					<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
+						{$t('admin.webCcHint')}
+					</p>
 				{/if}
 			{/if}
 		</div>
@@ -241,15 +338,21 @@
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between cursor-pointer">
 				<span class="text-xs text-gray-600 dark:text-gray-400">{$t('admin.browserTools')}</span>
-				<ToggleSwitch value={browserEnabled} onchange={(v) => { browserEnabled = v; }} />
+				<ToggleSwitch
+					value={browserEnabled}
+					onchange={(v) => {
+						browserEnabled = v;
+					}}
+				/>
 			</label>
-			<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+			<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 				{$t('admin.browserHint')}
 			</p>
 
 			{#if browserEnabled}
 				<div class="flex items-center justify-between">
-					<span class="text-xs text-gray-600 dark:text-gray-400">{$t('admin.browserProvider')}</span>
+					<span class="text-xs text-gray-600 dark:text-gray-400">{$t('admin.browserProvider')}</span
+					>
 					<select
 						bind:value={browserProvider}
 						class="bg-transparent text-xs text-gray-600 dark:text-gray-400 outline-none cursor-pointer"
@@ -259,7 +362,7 @@
 						<option value="browser_use">{$t('admin.browserBrowserUse')}</option>
 					</select>
 				</div>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 					{#if browserProvider === 'local'}
 						{$t('admin.browserLocalHint')}
 					{:else if browserProvider === 'firecrawl'}
@@ -272,60 +375,120 @@
 				{#if browserProvider === 'local'}
 					<label class="flex items-center justify-between cursor-pointer">
 						<div>
-							<span class="text-xs text-gray-600 dark:text-gray-400">{$t('admin.browserAutoLaunch')}</span>
-							<p class="text-[10px] text-gray-400 dark:text-gray-600">{$t('admin.browserAutoLaunchHint')}</p>
+							<span class="text-xs text-gray-600 dark:text-gray-400"
+								>{$t('admin.browserAutoLaunch')}</span
+							>
+							<p class="text-[0.625rem] text-gray-400 dark:text-gray-600">
+								{$t('admin.browserAutoLaunchHint')}
+							</p>
 						</div>
-						<ToggleSwitch value={autoLaunch} onchange={(v) => { autoLaunch = v; }} />
+						<ToggleSwitch
+							value={autoLaunch}
+							onchange={(v) => {
+								autoLaunch = v;
+							}}
+						/>
 					</label>
 
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="cdp-url">{$t('admin.browserCdpUrl')}</label>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="cdp-url"
+							>{$t('admin.browserCdpUrl')}</label
+						>
 						<div class="flex gap-1.5 mt-1">
-							<input id="cdp-url" type="text" bind:value={cdpUrl} placeholder="http://localhost:9222"
-								class="flex-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
+							<input
+								id="cdp-url"
+								type="text"
+								bind:value={cdpUrl}
+								placeholder="http://localhost:9222"
+								class="flex-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+							/>
 							<button
 								class="h-7 px-2.5 rounded-lg text-xs bg-gray-200/50 dark:bg-white/8 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors disabled:opacity-50"
 								onclick={() => testConnection()}
-								disabled={testing}
-							>{testing ? '...' : $t('admin.browserTest')}</button>
+								disabled={testing}>{testing ? '...' : $t('admin.browserTest')}</button
+							>
 						</div>
 						{#if testResult}
-							<p class="text-[11px] mt-1 {testResult.ok ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-500'}">
+							<p
+								class="text-[0.6875rem] mt-1 {testResult.ok
+									? 'text-emerald-600 dark:text-emerald-400'
+									: 'text-red-500'}"
+							>
 								{testResult.message}
 							</p>
 						{/if}
 					</div>
 
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="session-timeout">{$t('admin.browserSessionTimeout')}</label>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="session-timeout"
+							>{$t('admin.browserSessionTimeout')}</label
+						>
 						<div class="flex items-center gap-1.5 mt-1">
-							<input id="session-timeout" type="number" bind:value={sessionTimeout} min="1" max="120"
-								class="w-16 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-							<span class="text-[11px] text-gray-400 dark:text-gray-600">{$t('admin.browserMinutes')}</span>
+							<input
+								id="session-timeout"
+								type="number"
+								bind:value={sessionTimeout}
+								min="1"
+								max="120"
+								class="w-16 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+							/>
+							<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600"
+								>{$t('admin.browserMinutes')}</span
+							>
 						</div>
 					</div>
 				{:else if browserProvider === 'firecrawl'}
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="fc-key">{$t('admin.browserApiKey')}</label>
-						<input id="fc-key" type="password" bind:value={firecrawlApiKey} placeholder="fc-..."
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="fc-key"
+							>{$t('admin.browserApiKey')}</label
+						>
+						<input
+							id="fc-key"
+							type="password"
+							bind:value={firecrawlApiKey}
+							placeholder="fc-..."
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
 					</div>
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="fc-url">{$t('admin.browserBaseUrl')}</label>
-						<input id="fc-url" type="text" bind:value={firecrawlBaseUrl} placeholder="https://api.firecrawl.dev"
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-0.5">{$t('admin.browserFirecrawlBaseUrlHint')}</p>
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="fc-url"
+							>{$t('admin.browserBaseUrl')}</label
+						>
+						<input
+							id="fc-url"
+							type="text"
+							bind:value={firecrawlBaseUrl}
+							placeholder="https://api.firecrawl.dev"
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-0.5">
+							{$t('admin.browserFirecrawlBaseUrlHint')}
+						</p>
 					</div>
 				{:else if browserProvider === 'browser_use'}
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="bu-key">{$t('admin.browserApiKey')}</label>
-						<input id="bu-key" type="password" bind:value={browserUseApiKey} placeholder="bu-..."
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="bu-key"
+							>{$t('admin.browserApiKey')}</label
+						>
+						<input
+							id="bu-key"
+							type="password"
+							bind:value={browserUseApiKey}
+							placeholder="bu-..."
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
 					</div>
 					<div>
-						<label class="text-xs text-gray-600 dark:text-gray-400" for="bu-url">{$t('admin.browserBaseUrl')}</label>
-						<input id="bu-url" type="text" bind:value={browserUseBaseUrl} placeholder="https://api.browser-use.com"
-							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors" />
+						<label class="text-xs text-gray-600 dark:text-gray-400" for="bu-url"
+							>{$t('admin.browserBaseUrl')}</label
+						>
+						<input
+							id="bu-url"
+							type="text"
+							bind:value={browserUseBaseUrl}
+							placeholder="https://api.browser-use.com"
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+						/>
 					</div>
 				{/if}
 			{/if}
@@ -334,10 +497,10 @@
 		<!-- Save -->
 		<div class="mt-auto pt-6 flex justify-end">
 			<button
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
 				onclick={() => save()}
-				disabled={saving}
-			>{$t('settings.save')}</button>
+				disabled={saving}>{$t('settings.save')}</button
+			>
 		</div>
 	{/if}
 </div>
diff --git a/cptr/frontend/src/lib/components/AuthScreen.svelte b/cptr/frontend/src/lib/components/AuthScreen.svelte
index 33bb71e1..88ca8a90 100644
--- a/cptr/frontend/src/lib/components/AuthScreen.svelte
+++ b/cptr/frontend/src/lib/components/AuthScreen.svelte
@@ -97,20 +97,20 @@
 				autofocus
 				autocomplete="username"
 				spellcheck="false"
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1"
 			/>
 			<input
 				type="password"
 				placeholder={$t('auth.password')}
 				bind:value={password}
 				autocomplete={isSetup ? 'new-password' : 'current-password'}
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1"
 			/>
 
 			<button
 				type="submit"
 				disabled={loading || !password || !username.trim()}
-				class="flex items-center gap-2 text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100
+				class="flex items-center gap-2 text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100
 					disabled:opacity-30 disabled:pointer-events-none mt-2"
 			>
 				{#if loading}
@@ -126,7 +126,7 @@
 		</form>
 
 		{#if !isSetup && signupEnabled && mode === 'password'}
-			<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-4">
+			<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-4">
 				{#if isSignup}
 					{$t('auth.alreadyHaveAccount')}
 					<button
diff --git a/cptr/frontend/src/lib/components/Bar.svelte b/cptr/frontend/src/lib/components/Bar.svelte
index 930e3fe1..264a28cf 100644
--- a/cptr/frontend/src/lib/components/Bar.svelte
+++ b/cptr/frontend/src/lib/components/Bar.svelte
@@ -30,7 +30,7 @@
 		const direction = $activeWorkspace?.splitDirection ?? 'horizontal';
 		return [
 			{
-				label: 'Split Right',
+				label: $t('bar.splitRight'),
 				icon: 'split-horizontal',
 				active: direction === 'horizontal',
 				onclick: () => {
@@ -39,7 +39,7 @@
 				}
 			},
 			{
-				label: 'Split Down',
+				label: $t('bar.splitDown'),
 				icon: 'split-vertical',
 				active: direction === 'vertical',
 				onclick: () => {
@@ -81,7 +81,7 @@
 	<!-- Workspace name -->
 	{#if $activeWorkspace}
 		<span
-			class="text-[11px] font-medium text-gray-500 dark:text-gray-500 px-1 truncate flex-1 min-w-0"
+			class="text-[0.6875rem] font-medium text-gray-500 dark:text-gray-500 px-1 truncate flex-1 min-w-0"
 		>
 			{$activeWorkspace.name}
 		</span>
@@ -100,8 +100,8 @@
 					? 'bg-gray-200 text-gray-900 dark:bg-white/8 dark:text-white'
 					: 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}"
 				onclick={() => (showSplitMenu = !showSplitMenu)}
-				aria-label="Split Editor"
-				use:tooltip={'Split Editor'}
+				aria-label={$t('a11y.splitEditor')}
+				use:tooltip={$t('a11y.splitEditor')}
 			>
 				<Icon
 					name={$activeWorkspace?.splitDirection === 'vertical'
@@ -125,9 +125,9 @@
 <style>
 	@media (display-mode: window-controls-overlay) {
 		.wco-bar {
-			padding-left: env(titlebar-area-x, 0px);
+			padding-left: env(titlebar-area-x, 0);
 			width: env(titlebar-area-width, 100%);
-			height: env(titlebar-area-height, 36px);
+			height: env(titlebar-area-height, 2.25rem);
 			app-region: drag;
 		}
 		.wco-bar button,
diff --git a/cptr/frontend/src/lib/components/ChangelogModal.svelte b/cptr/frontend/src/lib/components/ChangelogModal.svelte
index 26475ead..45c2344e 100644
--- a/cptr/frontend/src/lib/components/ChangelogModal.svelte
+++ b/cptr/frontend/src/lib/components/ChangelogModal.svelte
@@ -62,9 +62,11 @@
 	<Modal onclose={handleClose} class="w-full max-w-3xl mx-4 md:mx-0 flex flex-col max-h-[52vh]">
 		<div class="flex items-center gap-3 px-4 pt-4 pb-2 shrink-0">
 			<div class="min-w-0 flex-1">
-				<h2 class="text-sm font-medium text-gray-900 dark:text-white">{$t('changelog.whatsNew')}</h2>
+				<h2 class="text-sm font-medium text-gray-900 dark:text-white">
+					{$t('changelog.whatsNew')}
+				</h2>
 				{#if $appVersion}
-					<p class="mt-0.5 text-[11px] text-gray-400 dark:text-gray-600">
+					<p class="mt-0.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
 						{$t('changelog.releaseNotes')}
 					</p>
 				{/if}
@@ -73,7 +75,7 @@
 			<button
 				class="flex h-7 w-7 items-center justify-center rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-600 dark:hover:bg-white/6 dark:hover:text-gray-300 transition-colors duration-75"
 				onclick={handleClose}
-				aria-label="Close"
+				aria-label={$t('common.close')}
 			>
 				<Icon name="xmark" size={14} />
 			</button>
@@ -85,15 +87,17 @@
 					{#each versions as [ver, data], i}
 						<div>
 							<div class="mb-2">
-								<h3 class="text-[13px] font-semibold text-gray-900 dark:text-white">v{ver}</h3>
-								<p class="text-[10px] text-gray-400 dark:text-gray-600 mt-0.5">{formatDate(data.date)}</p>
+								<h3 class="text-[0.8125rem] font-semibold text-gray-900 dark:text-white">v{ver}</h3>
+								<p class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-0.5">
+									{formatDate(data.date)}
+								</p>
 							</div>
 
 							{#each Object.entries(data).filter(([key]) => key !== 'date') as [section, items]}
 								{#if Array.isArray(items) && items.length > 0}
 									<div class="mb-3">
 										<span
-											class="inline-block text-[10px] font-semibold uppercase tracking-wide rounded-full px-2 py-0.5 my-1.5
+											class="inline-block text-[0.625rem] font-semibold uppercase tracking-wide rounded-full px-2 py-0.5 my-1.5
 											{section === 'added'
 												? 'bg-blue-500/10 text-blue-600 dark:text-blue-400'
 												: section === 'fixed'
@@ -150,14 +154,16 @@
 			{:else}
 				<div class="flex flex-col items-center justify-center py-16 gap-3">
 					<Spinner size={16} />
-					<span class="text-[11px] text-gray-400 dark:text-gray-600">{$t('changelog.loading')}</span>
+					<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600"
+						>{$t('changelog.loading')}</span
+					>
 				</div>
 			{/if}
 		</div>
 
 		<div class="flex items-center justify-end px-4 pt-1 pb-4 shrink-0">
 			<button
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
 				onclick={handleClose}
 			>
 				{$t('changelog.done')}
diff --git a/cptr/frontend/src/lib/components/Collapsible.svelte b/cptr/frontend/src/lib/components/Collapsible.svelte
index 71697202..e53a5d15 100644
--- a/cptr/frontend/src/lib/components/Collapsible.svelte
+++ b/cptr/frontend/src/lib/components/Collapsible.svelte
@@ -25,7 +25,7 @@
 		<span class="text-xs text-gray-400 dark:text-gray-600">{title}</span>
 		{#if !expanded && summary}
 			<span
-				class="text-[11px] text-gray-400 dark:text-gray-600 font-mono ml-auto truncate max-w-[60%] text-right"
+				class="text-[0.6875rem] text-gray-400 dark:text-gray-600 font-mono ml-auto truncate max-w-[60%] text-right"
 				>{summary}</span
 			>
 		{/if}
diff --git a/cptr/frontend/src/lib/components/DirectoryPicker.svelte b/cptr/frontend/src/lib/components/DirectoryPicker.svelte
index 047d7aad..08ec5ba8 100644
--- a/cptr/frontend/src/lib/components/DirectoryPicker.svelte
+++ b/cptr/frontend/src/lib/components/DirectoryPicker.svelte
@@ -289,7 +289,7 @@
 
 <Modal
 	{onclose}
-	class="w-full max-w-[560px] mx-4 max-md:mx-0 max-md:rounded-none max-h-[480px] max-md:max-h-dvh flex flex-col mb-[6vh] max-md:mb-0"
+	class="w-full max-w-[35rem] mx-4 max-md:mx-0 max-md:rounded-none max-h-[30rem] max-md:max-h-dvh flex flex-col mb-[6vh] max-md:mb-0"
 >
 	<!-- Path bar -->
 	<div class="flex items-center px-3.5 pt-2.5 pb-2 gap-2 shrink-0">
@@ -329,10 +329,10 @@
 					<span class="text-red-400 shrink-0 flex"><Icon name="xmark" size={12} /></span>
 				{/if}
 				{#if tabHint}
-					<span class="text-[10px] text-gray-400 whitespace-nowrap shrink-0">{tabHint}</span>
+					<span class="text-[0.625rem] text-gray-400 whitespace-nowrap shrink-0">{tabHint}</span>
 				{/if}
 				<span
-					class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-white/6 text-gray-400 shrink-0"
+					class="text-[0.625rem] font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-white/6 text-gray-400 shrink-0"
 					>TAB</span
 				>
 			</div>
@@ -348,17 +348,18 @@
 				}}
 			>
 				{#each breadcrumbs as seg, i (seg.path)}
-					{#if i > 1}<span class="text-gray-300 dark:text-gray-600 text-[11px] font-mono">/</span
+					{#if i > 1}<span class="text-gray-300 dark:text-gray-600 text-[0.6875rem] font-mono"
+							>/</span
 						>{/if}
 					{#if i === breadcrumbs.length - 1}
 						<span
-							class="text-[11px] font-mono text-gray-900 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis"
+							class="text-[0.6875rem] font-mono text-gray-900 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis"
 							>{seg.name}</span
 						>
 					{:else}
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<span
-							class="text-[11px] font-mono text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 whitespace-nowrap shrink-0 cursor-pointer px-0.5 transition-colors duration-75"
+							class="text-[0.6875rem] font-mono text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 whitespace-nowrap shrink-0 cursor-pointer px-0.5 transition-colors duration-75"
 							role="button"
 							tabindex="-1"
 							onclick={(e) => {
@@ -439,7 +440,7 @@
 	<!-- Footer -->
 	<div class="flex items-center gap-2 px-3.5 pb-3 pt-1 shrink-0">
 		<span
-			class="flex-1 text-[11px] text-gray-400 dark:text-gray-600 font-mono truncate min-w-0"
+			class="flex-1 text-[0.6875rem] text-gray-400 dark:text-gray-600 font-mono truncate min-w-0"
 			title={currentPath}>{currentPath}</span
 		>
 		<button
diff --git a/cptr/frontend/src/lib/components/DropdownMenu.svelte b/cptr/frontend/src/lib/components/DropdownMenu.svelte
index 1fcc8de5..a7e48056 100644
--- a/cptr/frontend/src/lib/components/DropdownMenu.svelte
+++ b/cptr/frontend/src/lib/components/DropdownMenu.svelte
@@ -337,7 +337,7 @@
 	bind:this={menuEl}
 	class="{inlineAbove
 		? `absolute bottom-full mb-1 ${align === 'end' ? 'right-0' : 'left-0'}`
-		: 'fixed'} z-[1001] min-w-36 rounded-xl bg-white dark:bg-[#1a1a1a] border border-gray-150 dark:border-white/6 shadow-xl p-0.5 flex flex-col overflow-hidden {className}"
+		: 'fixed'} app-theme app-surface z-[1001] min-w-36 rounded-xl border shadow-xl p-0.5 flex flex-col overflow-hidden {className}"
 	style="{inlineAbove
 		? ''
 		: `left: ${pos.x}px; ${pos.bottom != null ? `bottom: ${pos.bottom}px;` : `top: ${pos.top ?? -9999}px;`} ${
@@ -352,7 +352,7 @@
 		<div class="flex-none">
 			{@render header()}
 			{#if headerDivider}
-				<div class="h-px bg-gray-100/50 dark:bg-white/3 mx-1 my-0.5"></div>
+				<div class="app-divider h-px mx-1 my-0.5"></div>
 			{/if}
 		</div>
 	{/if}
@@ -365,13 +365,12 @@
 		{:else}
 			{#each items as item}
 				{#if item.divider}
-					<div class="h-px bg-gray-100/50 dark:bg-white/3 mx-1 my-0.5"></div>
+					<div class="app-divider h-px mx-1 my-0.5"></div>
 				{:else}
 					<div
-						class="group flex items-center gap-1 w-full h-6 rounded-xl text-xs transition-colors duration-75
-							{item.active
-							? 'text-gray-900 dark:text-white bg-gray-50 dark:bg-white/5'
-							: 'text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white'}"
+						class="group menu-row flex items-center gap-1 w-full h-6 rounded-xl text-xs transition-colors duration-75 {item.active
+							? 'app-interactive-active'
+							: ''}"
 					>
 						<button
 							class="flex items-center gap-2 min-w-0 flex-1 h-full px-2 text-inherit"
@@ -391,7 +390,7 @@
 							{/if}
 							{#if item.check && item.active}
 								<svg
-									class="w-3 h-3 shrink-0 text-gray-400 dark:text-gray-500"
+									class="app-icon-muted w-3 h-3 shrink-0"
 									viewBox="0 0 24 24"
 									fill="none"
 									stroke="currentColor"
@@ -405,7 +404,7 @@
 						</button>
 						{#if item.actionIcon && item.actionOnclick}
 							<button
-								class="flex items-center justify-center w-5 h-5 mr-0.5 rounded-lg shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/10 transition-all duration-75"
+								class="app-icon-muted app-interactive flex items-center justify-center w-5 h-5 mr-0.5 rounded-lg shrink-0 transition-all duration-75"
 								aria-label={item.actionLabel}
 								onclick={(e) => {
 									e.stopPropagation();
@@ -424,9 +423,20 @@
 	{#if footer}
 		<div class="flex-none">
 			{#if footerDivider}
-				<div class="h-px bg-gray-100/50 dark:bg-white/3 mx-1 my-0.5"></div>
+				<div class="app-divider h-px mx-1 my-0.5"></div>
 			{/if}
 			{@render footer()}
 		</div>
 	{/if}
 </div>
+
+<style>
+	.menu-row {
+		color: color-mix(in oklab, var(--app-fg) 62%, var(--app-bg));
+	}
+
+	.menu-row:hover {
+		background: color-mix(in oklab, var(--app-fg) 6%, transparent);
+		color: var(--app-fg);
+	}
+</style>
diff --git a/cptr/frontend/src/lib/components/FileBrowser.svelte b/cptr/frontend/src/lib/components/FileBrowser.svelte
index 432b45b5..be0c803b 100644
--- a/cptr/frontend/src/lib/components/FileBrowser.svelte
+++ b/cptr/frontend/src/lib/components/FileBrowser.svelte
@@ -989,10 +989,10 @@
 		<div
 			class="flex items-center gap-1.5 h-7 px-3 border-b border-gray-200 dark:border-white/6 shrink-0"
 		>
-			<span class="text-[10px] text-gray-400 shrink-0">{$t('files.ports')}</span>
+			<span class="text-[0.625rem] text-gray-400 shrink-0">{$t('files.ports')}</span>
 			{#each workspacePorts as p (p.port)}
 				<button
-					class="px-1.5 py-0.5 rounded text-[11px] font-mono font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/6 transition-colors duration-75"
+					class="px-1.5 py-0.5 rounded text-[0.6875rem] font-mono font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/6 transition-colors duration-75"
 					onclick={() => openPreviewTab(p.port)}
 					use:tooltip={$t('files.clickToPreview', { process: p.process })}>:{p.port}</button
 				>
@@ -1082,7 +1082,7 @@
 					<!-- Inline rename -->
 					<div
 						class="flex items-center gap-2 h-7"
-						style="padding-left: {8 + entry.depth * 16}px; padding-right: 8px;"
+						style="padding-left: {8 + entry.depth * 16}px; padding-right: 0.5rem;"
 					>
 						<Icon
 							name={fileIconName(entry.name, entry.type)}
@@ -1122,7 +1122,7 @@
 									? 'bg-blue-100 dark:bg-blue-500/20'
 									: 'bg-blue-50/60 dark:bg-blue-500/8'
 								: 'hover:bg-gray-100 dark:hover:bg-white/4'}"
-						style="padding-left: {8 + entry.depth * 16}px; padding-right: 8px;"
+						style="padding-left: {8 + entry.depth * 16}px; padding-right: 0.5rem;"
 						onclick={(e) => handleClick(e, entry, i)}
 						oncontextmenu={(e) => onContextMenu(e, entry)}
 						draggable="true"
@@ -1185,12 +1185,13 @@
 						{/if}
 						{#if fileGitStatus && entryGitDecoration}
 							<span
-								class="text-[10px] font-mono font-bold shrink-0 {entryGitDecoration.badgeColor}"
+								class="text-[0.625rem] font-mono font-bold shrink-0 {entryGitDecoration.badgeColor}"
 								use:tooltip={gitStatusTooltip(fileGitStatus, entry)}>{entryGitDecoration.char}</span
 							>
 						{/if}
 						{#if entry.type !== 'directory' && entry.size !== null}
-							<span class="ml-1 text-[11px] font-mono text-gray-400 dark:text-gray-600 shrink-0"
+							<span
+								class="ml-1 text-[0.6875rem] font-mono text-gray-400 dark:text-gray-600 shrink-0"
 								>{formatSize(entry.size)}</span
 							>
 						{/if}
@@ -1227,26 +1228,26 @@
 		<div
 			class="flex items-center justify-between h-8 px-2 border-t border-gray-200 dark:border-white/6 shrink-0 bg-blue-50 dark:bg-blue-500/5"
 		>
-			<span class="text-[11px] font-medium text-blue-600 dark:text-blue-400"
+			<span class="text-[0.6875rem] font-medium text-blue-600 dark:text-blue-400"
 				>{$t('files.selected', { count: selectedPaths.size })}</span
 			>
 			<div class="flex items-center gap-1">
 				<button
-					class="text-[11px] px-2 py-0.5 rounded text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/10 transition-colors duration-75"
+					class="text-[0.6875rem] px-2 py-0.5 rounded text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/10 transition-colors duration-75"
 					onclick={selectAll}>{$t('files.all')}</button
 				>
 				<button
-					class="text-[11px] px-2 py-0.5 rounded text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/10 transition-colors duration-75"
+					class="text-[0.6875rem] px-2 py-0.5 rounded text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/10 transition-colors duration-75"
 					onclick={archiveSelected}
 					use:tooltip={$t('files.downloadAsZip')}><Icon name="download" size={12} /></button
 				>
 				<button
-					class="text-[11px] px-2 py-0.5 rounded text-red-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors duration-75"
+					class="text-[0.6875rem] px-2 py-0.5 rounded text-red-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors duration-75"
 					onclick={deleteSelected}
 					use:tooltip={$t('files.deleteSelected')}><Icon name="trash" size={12} /></button
 				>
 				<button
-					class="text-[11px] px-2 py-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75"
+					class="text-[0.6875rem] px-2 py-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75"
 					onclick={clearSelection}><Icon name="xmark" size={11} /></button
 				>
 			</div>
diff --git a/cptr/frontend/src/lib/components/FileEditor.svelte b/cptr/frontend/src/lib/components/FileEditor.svelte
index 819eda72..505ff57a 100644
--- a/cptr/frontend/src/lib/components/FileEditor.svelte
+++ b/cptr/frontend/src/lib/components/FileEditor.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import {
-		clearTabEdit,
-		markTabUnsaved,
-		updateTabFilePath,
-		activeWorkspace
-	} from '$lib/stores';
+	import { clearTabEdit, markTabUnsaved, updateTabFilePath, activeWorkspace } from '$lib/stores';
 	import { get } from 'svelte/store';
+	import { t } from '$lib/i18n';
 	import { tooltip } from '$lib/tooltip';
 	import { readFile, writeFile } from '$lib/apis/files';
 	import { getGitDiff } from '$lib/apis/git';
@@ -202,14 +198,20 @@
 		for (const change of changes) {
 			if (change.line < 1) continue;
 			const current = byLine.get(change.line);
-			byLine.set(change.line, current === 'added' || change.type === 'added' ? 'added' : 'modified');
+			byLine.set(
+				change.line,
+				current === 'added' || change.type === 'added' ? 'added' : 'modified'
+			);
 		}
 		return [...byLine.entries()]
 			.sort((a, b) => a[0] - b[0])
 			.map(([line, type]) => ({ line, type }));
 	}
 
-	function buildGitGutterMarkers(doc: EditorState['doc'], changes: GitLineChange[]): RangeSet<GutterMarker> {
+	function buildGitGutterMarkers(
+		doc: EditorState['doc'],
+		changes: GitLineChange[]
+	): RangeSet<GutterMarker> {
 		const builder = new RangeSetBuilder<GutterMarker>();
 		for (const change of normalizeGitLineChanges(changes)) {
 			if (change.line < 1 || change.line > doc.lines) continue;
@@ -246,9 +248,7 @@
 			}
 			return value;
 		},
-		provide: (field) => [
-			gutterLineClass.from(field, (value) => value.markers)
-		]
+		provide: (field) => [gutterLineClass.from(field, (value) => value.markers)]
 	});
 
 	function diffHunkStart(header: string): { oldStart: number; newStart: number } {
@@ -537,9 +537,8 @@
 
 	function diffBlockClass(type: DiffLine['type']): string {
 		if (type === 'added')
-			return 'bg-green-100 border-l-[3px] border-l-green-500 dark:bg-green-500/15 dark:border-l-green-400';
-		if (type === 'removed')
-			return 'bg-red-100 diff-gutter-removed dark:bg-red-500/15';
+			return 'bg-green-100 border-l-[0.1875rem] border-l-green-500 dark:bg-green-500/15 dark:border-l-green-400';
+		if (type === 'removed') return 'bg-red-100 diff-gutter-removed dark:bg-red-500/15';
 		return '';
 	}
 
@@ -642,13 +641,18 @@
 		const status = gitStatusStore.status;
 		const data = fileData;
 		const content = data?.content;
-		if (!data || data.binary || isBinaryPreview || isUntitled || content === null || content === undefined) {
+		if (
+			!data ||
+			data.binary ||
+			isBinaryPreview ||
+			isUntitled ||
+			content === null ||
+			content === undefined
+		) {
 			return;
 		}
 
-		const statusKey = status
-			? `${status.is_repo}:${gitFilesSignature(status.files)}`
-			: 'pending';
+		const statusKey = status ? `${status.is_repo}:${gitFilesSignature(status.files)}` : 'pending';
 		const key = `${wsPath}:${data.path}:${content.length}:${statusKey}`;
 		if (key === lastGitLineRefreshKey) return;
 		lastGitLineRefreshKey = key;
@@ -941,7 +945,7 @@
 			EditorView.theme({
 				'&': {
 					height: '100%',
-					fontSize: '13px',
+					fontSize: '0.8125rem',
 					backgroundColor: dark ? '#000' : '#ffffff'
 				},
 				'.cm-scroller': { fontFamily: '"JetBrains Mono", "Fira Code", ui-monospace, monospace' },
@@ -953,10 +957,10 @@
 				'.cm-activeLineGutter': { backgroundColor: dark ? '#1a1a1a' : '#f3f4f6' },
 				'.cm-activeLine': { backgroundColor: dark ? '#1a1a1a' : '#f9fafb' },
 				'.cm-lineNumbers .cm-gutterElement.cm-git-line-added': {
-					boxShadow: `inset 2px 0 0 ${dark ? 'rgba(52, 211, 153, 0.75)' : 'rgba(5, 150, 105, 0.65)'}`
+					boxShadow: `inset 0.125rem 0 0 ${dark ? 'rgba(52, 211, 153, 0.75)' : 'rgba(5, 150, 105, 0.65)'}`
 				},
 				'.cm-lineNumbers .cm-gutterElement.cm-git-line-modified': {
-					boxShadow: `inset 2px 0 0 ${dark ? 'rgba(251, 191, 36, 0.7)' : 'rgba(217, 119, 6, 0.6)'}`
+					boxShadow: `inset 0.125rem 0 0 ${dark ? 'rgba(251, 191, 36, 0.7)' : 'rgba(217, 119, 6, 0.6)'}`
 				},
 				'&.cm-focused': { outline: 'none' }
 			}),
@@ -1207,7 +1211,7 @@
 		{:else if fileData?.binary}
 			<!-- Unknown binary, fallback -->
 			<div class="state">
-				<p class="state-title">Binary file</p>
+				<p class="state-title">{$t('editor.binaryFile')}</p>
 				<p class="state-sub">{fileData.name} ({formatSize(fileData.size)})</p>
 			</div>
 		{:else if diffMode}
@@ -1216,15 +1220,15 @@
 				<div class="state"><Spinner size={20} /></div>
 			{:else if diffFiles.length === 0}
 				<div class="state">
-					<p class="state-title">No changes</p>
-					<p class="state-sub">This file has no uncommitted modifications.</p>
+					<p class="state-title">{$t('editor.noChanges')}</p>
+					<p class="state-sub">{$t('editor.noUncommittedModifications')}</p>
 				</div>
 			{:else}
 				<div class="diff-scroll">
 					{#each diffFiles as df}
 						{#each df.hunks as hunk}
 							<div
-								class="grid w-full grid-cols-[2.75rem_2.75rem_1.25rem_auto] border-b border-gray-100 bg-gray-50 text-gray-400 dark:border-white/4 dark:bg-white/3 dark:text-gray-600 font-mono text-[11px]"
+								class="grid w-full grid-cols-[2.75rem_2.75rem_1.25rem_auto] border-b border-gray-100 bg-gray-50 text-gray-400 dark:border-white/4 dark:bg-white/3 dark:text-gray-600 font-mono text-[0.6875rem]"
 							>
 								<span></span>
 								<span></span>
@@ -1235,7 +1239,7 @@
 								<div class="w-full {diffBlockClass(group.type)}">
 									{#each group.lines as line}
 										<div
-											class="grid w-full grid-cols-[2.75rem_2.75rem_1.25rem_auto] font-mono text-[11px] leading-[18px]"
+											class="grid w-full grid-cols-[2.75rem_2.75rem_1.25rem_auto] font-mono text-[0.6875rem] leading-[1.125rem]"
 										>
 											<span
 												class="select-none border-r border-black/5 px-2 text-right text-gray-400 dark:border-white/4 dark:text-gray-600"
@@ -1293,9 +1297,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 8px;
-		height: 30px;
-		padding: 0 10px;
+		gap: 0.5rem;
+		height: 1.875rem;
+		padding: 0 0.625rem;
 		border-bottom: 1px solid var(--color-gray-200);
 		flex-shrink: 0;
 	}
@@ -1308,7 +1312,7 @@
 		display: flex;
 		align-items: center;
 		flex: 1 1 auto;
-		gap: 8px;
+		gap: 0.5rem;
 		min-width: 0;
 		overflow: hidden;
 	}
@@ -1317,7 +1321,7 @@
 		display: flex;
 		align-items: center;
 		flex: 0 0 auto;
-		gap: 2px;
+		gap: 0.125rem;
 	}
 
 	.file-name {
@@ -1327,7 +1331,7 @@
 		overflow-x: auto;
 		overflow-y: hidden;
 		white-space: nowrap;
-		font-size: 12px;
+		font-size: 0.75rem;
 		font-weight: 500;
 		color: var(--color-gray-700);
 	}
@@ -1343,7 +1347,7 @@
 	.file-size {
 		flex: 0 0 auto;
 		white-space: nowrap;
-		font-size: 11px;
+		font-size: 0.6875rem;
 		color: var(--color-gray-400);
 	}
 
@@ -1352,26 +1356,26 @@
 		align-items: center;
 		justify-content: center;
 		flex: 0 0 auto;
-		width: 20px;
-		height: 20px;
-		border-radius: 4px;
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: 0.25rem;
 		color: var(--color-gray-400);
 		transition: all 0.1s;
 	}
 
 	@media (max-width: 768px) {
 		.toolbar-btn {
-			width: 32px;
-			height: 32px;
-			border-radius: 6px;
+			width: 2rem;
+			height: 2rem;
+			border-radius: 0.375rem;
 		}
 
 		.toolbar {
-			height: 38px;
+			height: 2.375rem;
 		}
 
 		.toolbar-right {
-			gap: 4px;
+			gap: 0.25rem;
 		}
 	}
 
@@ -1408,19 +1412,19 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		padding: 24px;
+		padding: 1.5rem;
 	}
 
 	.media-container video {
 		max-width: 100%;
 		max-height: 100%;
-		border-radius: 8px;
+		border-radius: 0.5rem;
 		background: #000;
 	}
 
 	.media-container audio {
 		width: 100%;
-		max-width: 480px;
+		max-width: 30rem;
 	}
 
 	/* ── Tree container ──────────────────────────────────── */
@@ -1428,7 +1432,7 @@
 	.tree-container {
 		height: 100%;
 		overflow: auto;
-		padding: 8px 12px;
+		padding: 0.5rem 0.75rem;
 	}
 
 	/* ── Markdown preview container ──────────────────────── */
@@ -1437,7 +1441,7 @@
 		height: 100%;
 		width: 100%;
 		overflow-y: auto;
-		padding: 24px 32px;
+		padding: 1.5rem 2rem;
 	}
 
 	/* ── States ──────────────────────────────────────────── */
@@ -1448,39 +1452,37 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		gap: 6px;
+		gap: 0.375rem;
 	}
 
 	.state.error {
 		color: var(--color-gray-400);
-		font-size: 13px;
+		font-size: 0.8125rem;
 	}
 
 	.state-title {
-		font-size: 14px;
+		font-size: 0.875rem;
 		font-weight: 500;
 		color: var(--color-gray-400);
 	}
 
 	.state-sub {
-		font-size: 12px;
+		font-size: 0.75rem;
 		color: var(--color-gray-500);
 	}
 
-
-
 	/* ── Diff view ────────────────────────────────────────── */
 
 	.diff-scroll {
 		height: 100%;
 		overflow: auto;
 		font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
-		font-size: 12px;
-		line-height: 18px;
+		font-size: 0.75rem;
+		line-height: 1.125rem;
 	}
 
 	.diff-hunk-header {
-		padding: 2px 8px;
+		padding: 0.125rem 0.5rem;
 		color: var(--color-gray-400);
 		background: var(--color-gray-50);
 	}
@@ -1491,14 +1493,14 @@
 	}
 
 	.diff-line {
-		padding: 0 8px;
+		padding: 0 0.5rem;
 		white-space: pre-wrap;
 		word-break: break-all;
 	}
 
 	.diff-prefix {
 		display: inline-block;
-		width: 16px;
+		width: 1rem;
 		user-select: none;
 	}
 
@@ -1553,13 +1555,13 @@
 	}
 
 	.diff-gutter-removed {
-		border-left: 3px solid transparent;
+		border-left: 0.1875rem solid transparent;
 		border-image: repeating-linear-gradient(
 				-45deg,
 				#ef4444 0,
 				#ef4444 1px,
 				transparent 1px,
-				transparent 3px
+				transparent 0.1875rem
 			)
 			3;
 	}
diff --git a/cptr/frontend/src/lib/components/GitBar.svelte b/cptr/frontend/src/lib/components/GitBar.svelte
index 77eee3a5..b3b36078 100644
--- a/cptr/frontend/src/lib/components/GitBar.svelte
+++ b/cptr/frontend/src/lib/components/GitBar.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-	import { activeWorkspace, openFileTab } from '$lib/stores';
+	import { goto } from '$app/navigation';
+	import { activeWorkspace, addWorkspace, openFileTab } from '$lib/stores';
 	import {
 		getGitLog,
 		getGitDiff,
 		getGitShow,
 		getGitBranches,
+		getGitWorktrees,
 		getGitStatusFresh,
 		getGitStashes,
 		stageFiles,
@@ -19,6 +21,7 @@
 		gitUnstash,
 		checkoutBranch,
 		createGitBranch,
+		createGitWorktree,
 		deleteGitBranch,
 		renameGitBranch
 	} from '$lib/apis/git';
@@ -48,24 +51,47 @@
 		is_remote?: boolean;
 		upstream?: string | null;
 	};
+	type BranchData = {
+		current: string;
+		local: string[];
+		remote: string[];
+		all?: BranchItem[];
+	};
+	type WorktreeItem = {
+		path: string;
+		target_path?: string;
+		branch: string;
+		head: string;
+		is_current?: boolean;
+		is_detached?: boolean;
+		is_bare?: boolean;
+	};
+	type WorktreeData = {
+		repo_root: string;
+		current: string;
+		worktrees: WorktreeItem[];
+	};
 
 	let expanded = $state(false);
 	let view = $state<'changes' | 'history'>('changes');
 	let showDiff = $state(false);
 	let showBranches = $state(false);
+	let showWorktrees = $state(false);
 	let branchBtnEl = $state<HTMLButtonElement | undefined>();
+	let worktreeBtnEl = $state<HTMLButtonElement | undefined>();
 	let branchSearchInputEl = $state<HTMLInputElement | undefined>();
+	let worktreeSearchInputEl = $state<HTMLInputElement | undefined>();
 	let newBranchInputEl = $state<HTMLInputElement | undefined>();
+	let newWorktreeInputEl = $state<HTMLInputElement | undefined>();
 	let commits = $state<Commit[]>([]);
-	let branchData = $state<{
-		current: string;
-		local: string[];
-		remote: string[];
-		all?: BranchItem[];
-	} | null>(null);
+	let branchData = $state<BranchData | null>(null);
+	let worktreeData = $state<WorktreeData | null>(null);
 	let branchSearch = $state('');
+	let worktreeSearch = $state('');
 	let newBranchName = $state('');
+	let newWorktreeBranch = $state('');
 	let creatingBranch = $state(false);
+	let creatingWorktree = $state(false);
 	let pendingCheckoutBranch = $state<string | null>(null);
 	let pendingCreateBranch = $state<string | null>(null);
 	let branchActionMenu = $state<{ branch: BranchItem; anchor: HTMLElement } | null>(null);
@@ -110,20 +136,14 @@
 		if (!query) return branches;
 		return branches.filter((branch) => branch.name.toLowerCase().includes(query));
 	});
-	const branchMenuItems = $derived(
-		filteredBranches.map((branch) => ({
-			label: branch.name,
-			icon: 'git-branch',
-			active: Boolean(branch.is_current),
-			check: true,
-			onclick: () => switchBranch(branch.name),
-			actionIcon: 'three-dots',
-			actionLabel: 'Branch actions',
-			actionOnclick: (anchor: HTMLElement) => {
-				branchActionMenu = { branch, anchor };
-			}
-		}))
-	);
+	const filteredWorktrees = $derived.by(() => {
+		const worktrees = worktreeData?.worktrees ?? [];
+		const query = worktreeSearch.trim().toLowerCase();
+		if (!query) return worktrees;
+		return worktrees.filter((worktree) =>
+			`${worktreeLabel(worktree)} ${worktree.path}`.toLowerCase().includes(query)
+		);
+	});
 
 	// Convert git remote URL to browser URL
 	const remoteWebUrl = $derived.by(() => {
@@ -224,7 +244,15 @@
 		try {
 			branchData = await getGitBranches(workspacePath);
 		} catch {
-			branchData = null;
+			branchData = { current: '', local: [], remote: [], all: [] };
+		}
+	}
+
+	async function loadWorktrees() {
+		try {
+			worktreeData = await getGitWorktrees(workspacePath);
+		} catch {
+			worktreeData = { repo_root: '', current: '', worktrees: [] };
 		}
 	}
 
@@ -235,13 +263,31 @@
 			return;
 		}
 		showBranches = true;
+		showWorktrees = false;
 		branchSearch = '';
 		creatingBranch = false;
 		newBranchName = '';
+		branchData = null;
 		await loadBranches();
 		setTimeout(() => branchSearchInputEl?.focus(), 0);
 	}
 
+	async function toggleWorktrees(e: MouseEvent) {
+		e.stopPropagation();
+		if (showWorktrees) {
+			showWorktrees = false;
+			return;
+		}
+		showWorktrees = true;
+		showBranches = false;
+		worktreeSearch = '';
+		creatingWorktree = false;
+		newWorktreeBranch = '';
+		worktreeData = null;
+		await loadWorktrees();
+		setTimeout(() => worktreeSearchInputEl?.focus(), 0);
+	}
+
 	function switchView(v: 'changes' | 'history') {
 		view = v;
 		showDiff = false;
@@ -303,7 +349,7 @@
 			flash($t('git.uncommitted'));
 			switchView('changes');
 		} catch (e) {
-			flash(e instanceof Error ? e.message : 'Failed to undo commit');
+			flash(e instanceof Error ? e.message : $t('git.uncommitFailed'));
 		}
 		loading = false;
 		await refresh();
@@ -328,6 +374,7 @@
 			loading = false;
 			await refresh({ force: true });
 			if (showBranches) await loadBranches();
+			if (showWorktrees) await loadWorktrees();
 			if (view === 'history') await loadHistory();
 		}
 	}
@@ -356,6 +403,19 @@
 		await performBranchCheckout(branch, 'bring');
 	}
 
+	async function switchWorktree(worktree: WorktreeItem) {
+		if (worktree.is_current) {
+			showWorktrees = false;
+			return;
+		}
+		const target = worktree.target_path || worktree.path;
+		addWorkspace(target);
+		showWorktrees = false;
+		creatingWorktree = false;
+		newWorktreeBranch = '';
+		await goto(`/?workspace=${encodeURIComponent(target)}`);
+	}
+
 	async function restoreStashedChangesForBranch(branch: string) {
 		const stashes = (await getGitStashes(workspacePath)) as { message?: string }[];
 		const index = stashes.findIndex((stash) => {
@@ -389,7 +449,7 @@
 					message?: string;
 				};
 				if (!stashResult.ok) {
-					flash(stashResult.message || 'No changes stashed');
+					flash(stashResult.message || $t('git.noChangesStashed'));
 					return;
 				}
 			}
@@ -397,7 +457,7 @@
 			pendingCheckoutBranch = null;
 			await restoreStashedChangesForBranch(branch);
 		} catch (e) {
-			flash(e instanceof Error ? e.message : 'Failed to switch branch');
+			flash(e instanceof Error ? e.message : $t('git.switchBranchFailed'));
 		} finally {
 			loading = false;
 			await refresh();
@@ -416,6 +476,29 @@
 		await performBranchCreate(branch, 'bring');
 	}
 
+	async function createWorktree() {
+		if (!newWorktreeBranch.trim()) return;
+		const branch = newWorktreeBranch.trim();
+		loading = true;
+		try {
+			const result = (await createGitWorktree(workspacePath, branch)) as { path?: string };
+			const target = result.path;
+			newWorktreeBranch = '';
+			creatingWorktree = false;
+			if (target) {
+				addWorkspace(target);
+				showWorktrees = false;
+				await goto(`/?workspace=${encodeURIComponent(target)}`);
+			} else {
+				await loadWorktrees();
+			}
+		} catch (e) {
+			flash(e instanceof Error ? e.message : $t('git.createWorktreeFailed'));
+		} finally {
+			loading = false;
+		}
+	}
+
 	async function performBranchCreate(branch: string, changeMode: 'bring' | 'leave') {
 		loading = true;
 		try {
@@ -429,7 +512,7 @@
 					message?: string;
 				};
 				if (!stashResult.ok) {
-					flash(stashResult.message || 'No changes stashed');
+					flash(stashResult.message || $t('git.noChangesStashed'));
 					return;
 				}
 			}
@@ -439,7 +522,7 @@
 			showBranches = false;
 			pendingCreateBranch = null;
 		} catch (e) {
-			flash(e instanceof Error ? e.message : 'Failed to create branch');
+			flash(e instanceof Error ? e.message : $t('git.createBranchFailed'));
 		} finally {
 			loading = false;
 			await refresh();
@@ -481,36 +564,36 @@
 
 	async function renameBranch(branch: BranchItem) {
 		if (!branch.is_local) return;
-		const nextName = window.prompt('Rename branch', branch.name)?.trim();
+		const nextName = window.prompt($t('git.renameBranch'), branch.name)?.trim();
 		if (!nextName || nextName === branch.name) return;
 		try {
 			await renameGitBranch(workspacePath, branch.name, nextName);
-			flash('Branch renamed');
+			flash($t('git.branchRenamed'));
 			closeBranchActionMenu();
 			await refresh({ force: true });
 			await loadBranches();
 		} catch (e) {
-			flash(e instanceof Error ? e.message : 'Failed to rename branch');
+			flash(e instanceof Error ? e.message : $t('git.renameBranchFailed'));
 		}
 	}
 
 	function copyBranchName(branch: BranchItem) {
 		navigator.clipboard.writeText(branch.name);
-		flash('Branch name copied');
+		flash($t('git.branchNameCopied'));
 		closeBranchActionMenu();
 	}
 
 	async function deleteBranch(branch: BranchItem) {
 		if (!branch.is_local || branch.is_current) return;
-		if (!confirm(`Delete branch "${branch.name}"?`)) return;
+		if (!confirm($t('git.deleteBranchConfirm', { name: branch.name }))) return;
 		try {
 			await deleteGitBranch(workspacePath, branch.name);
-			flash('Branch deleted');
+			flash($t('git.branchDeleted'));
 			closeBranchActionMenu();
 			await refresh({ force: true });
 			await loadBranches();
 		} catch (e) {
-			flash(e instanceof Error ? e.message : 'Failed to delete branch');
+			flash(e instanceof Error ? e.message : $t('git.deleteBranchFailed'));
 		}
 	}
 
@@ -541,6 +624,14 @@
 		return i >= 0 ? { dir: p.slice(0, i + 1), name: p.slice(i + 1) } : { dir: '', name: p };
 	}
 
+	function pathTail(path: string): string {
+		return path.split(/[\\/]/).filter(Boolean).pop() || path;
+	}
+
+	function worktreeLabel(worktree: WorktreeItem): string {
+		return worktree.branch || (worktree.is_detached ? 'Detached' : 'Worktree');
+	}
+
 	function relTime(d: string) {
 		const s = Math.floor((Date.now() - new Date(d).getTime()) / 1000);
 		if (s < 60) return 'now';
@@ -637,7 +728,7 @@
 	function blockClass(type: string): string {
 		switch (type) {
 			case 'added':
-				return 'bg-green-100 border-l-[3px] border-l-green-500 dark:bg-green-500/15 dark:border-l-green-400';
+				return 'bg-green-100 border-l-[0.1875rem] border-l-green-500 dark:bg-green-500/15 dark:border-l-green-400';
 			case 'removed':
 				return 'bg-red-100 diff-gutter-removed dark:bg-red-500/15';
 			default:
@@ -689,25 +780,38 @@
 				onclick={toggleBranches}
 			>
 				<Icon name="git-branch" size={12} class="text-gray-400 dark:text-gray-600 shrink-0" />
-				<span class="text-[11px] text-gray-600 dark:text-gray-400 font-mono"
+				<span class="text-[0.6875rem] text-gray-600 dark:text-gray-400 font-mono"
 					>{gitStatus.branch}</span
 				>
 				<Icon name="chevron-down" size={9} class="text-gray-400 dark:text-gray-600" />
 			</button>
 
+			<button
+				bind:this={worktreeBtnEl}
+				class="flex items-center gap-1.5 h-6 px-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-white/6 transition-colors duration-75"
+				onclick={toggleWorktrees}
+			>
+				<Icon name="folder" size={12} class="text-gray-400 dark:text-gray-600 shrink-0" />
+				<span class="text-[0.6875rem] text-gray-500 dark:text-gray-500 font-mono"
+					>{pathTail(workspacePath)}</span
+				>
+				<Icon name="chevron-down" size={9} class="text-gray-400 dark:text-gray-600" />
+			</button>
+
 			{#if gitStatus.ahead > 0}<span
-					class="text-[10px] font-mono text-gray-400 dark:text-gray-600 ml-1.5"
+					class="text-[0.625rem] font-mono text-gray-400 dark:text-gray-600 ml-1.5"
 					>↑{gitStatus.ahead}</span
 				>{/if}
 			{#if gitStatus.behind > 0}<span
-					class="text-[10px] font-mono text-gray-400 dark:text-gray-600 ml-1"
+					class="text-[0.625rem] font-mono text-gray-400 dark:text-gray-600 ml-1"
 					>↓{gitStatus.behind}</span
 				>{/if}
 			{#if totalChanges > 0}<span
-					class="text-[10px] font-mono text-gray-400 dark:text-gray-600 ml-1.5"
+					class="text-[0.625rem] font-mono text-gray-400 dark:text-gray-600 ml-1.5"
 					>{$t('git.changedCount', { count: totalChanges })}</span
 				>{/if}
-			{#if actionMsg}<span class="text-[10px] font-mono text-gray-400 dark:text-gray-600 ml-auto"
+			{#if actionMsg}<span
+					class="text-[0.625rem] font-mono text-gray-400 dark:text-gray-600 ml-auto"
 					>{actionMsg}</span
 				>{/if}
 
@@ -715,7 +819,7 @@
 
 			<!-- Sync button (stops expand) -->
 			<button
-				class="flex items-center gap-1 h-6 px-2 rounded-md text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/6 transition-colors duration-75"
+				class="flex items-center gap-1 h-6 px-2 rounded-md text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/6 transition-colors duration-75"
 				onclick={(e) => {
 					e.stopPropagation();
 					syncAction.action();
@@ -738,7 +842,7 @@
 		<!-- Branch picker dropdown -->
 		{#if showBranches && branchBtnEl}
 			<DropdownMenu
-				items={branchMenuItems}
+				items={[]}
 				anchor={branchBtnEl}
 				onclose={() => {
 					showBranches = false;
@@ -760,8 +864,8 @@
 							<input
 								bind:this={branchSearchInputEl}
 								bind:value={branchSearch}
-								placeholder="Search branches"
-								class="w-full bg-transparent text-[11px] text-gray-500 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-600 outline-none"
+								placeholder={$t('search.search')}
+								class="w-full bg-transparent text-[0.6875rem] text-gray-500 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-600 outline-none"
 								onkeydown={(e) => {
 									if (e.key === 'Escape') showBranches = false;
 								}}
@@ -774,10 +878,63 @@
 						{/if}
 					</div>
 				{/snippet}
-				{#snippet empty()}
+				{#snippet children()}
 					{#if branchData}
-						<div class="px-3 py-2 text-[11px] text-gray-400 dark:text-gray-500 text-center">
-							No branches found
+						{#if filteredBranches.length > 0}
+							<div
+								class="px-2 pt-1 pb-0.5 text-[0.625rem] uppercase text-gray-300 dark:text-gray-600"
+							>
+								{$t('git.branches')}
+							</div>
+							{#each filteredBranches as branch (branch.name)}
+								<div
+									class="group flex items-center gap-1 w-full h-6 rounded-xl text-xs transition-colors duration-75
+										{branch.is_current
+										? 'text-gray-900 dark:text-white bg-gray-50 dark:bg-white/5'
+										: 'text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white'}"
+								>
+									<button
+										class="flex items-center gap-2 min-w-0 flex-1 h-full px-2 text-inherit"
+										onclick={() => switchBranch(branch.name)}
+									>
+										<Icon name="git-branch" size={14} />
+										<span class="flex-1 text-left truncate">{branch.name}</span>
+										{#if branch.is_current}
+											<svg
+												class="w-3 h-3 shrink-0 text-gray-400 dark:text-gray-500"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2.5"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											>
+												<polyline points="20 6 9 17 4 12" />
+											</svg>
+										{/if}
+									</button>
+									<button
+										class="flex items-center justify-center w-5 h-5 mr-0.5 rounded-lg shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/10 transition-all duration-75"
+										aria-label={$t('git.branchActions')}
+										onclick={(e) => {
+											e.stopPropagation();
+											branchActionMenu = { branch, anchor: e.currentTarget as HTMLElement };
+										}}
+									>
+										<Icon name="three-dots" size={12} />
+									</button>
+								</div>
+							{/each}
+						{/if}
+
+						{#if filteredBranches.length === 0}
+							<div class="px-3 py-2 text-[0.6875rem] text-gray-400 dark:text-gray-500 text-center">
+								{$t('git.noBranchesFound')}
+							</div>
+						{/if}
+					{:else if branchData}
+						<div class="px-3 py-2 text-[0.6875rem] text-gray-400 dark:text-gray-500 text-center">
+							{$t('git.noBranchesFound')}
 						</div>
 					{/if}
 				{/snippet}
@@ -824,7 +981,143 @@
 							}}
 						>
 							<Icon name="plus" size={14} />
-							<span class="truncate">New branch</span>
+							<span class="truncate">{$t('git.newBranch')}</span>
+						</button>
+					{/if}
+				{/snippet}
+			</DropdownMenu>
+		{/if}
+
+		<!-- Worktree picker dropdown -->
+		{#if showWorktrees && worktreeBtnEl}
+			<DropdownMenu
+				items={[]}
+				anchor={worktreeBtnEl}
+				onclose={() => {
+					showWorktrees = false;
+					creatingWorktree = false;
+					newWorktreeBranch = '';
+				}}
+				preferAbove
+				forceAbove
+				maxHeight="15rem"
+				className="w-60"
+				align="start"
+				headerDivider={false}
+				footerDivider={false}
+			>
+				{#snippet header()}
+					<div class="px-2 pb-0.5">
+						<div class="flex items-center gap-1.5 h-6 mt-0.5">
+							<Icon name="search" size={13} class="shrink-0 text-gray-300 dark:text-gray-600" />
+							<input
+								bind:this={worktreeSearchInputEl}
+								bind:value={worktreeSearch}
+								placeholder={$t('git.searchWorktrees')}
+								class="w-full bg-transparent text-[0.6875rem] text-gray-500 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-600 outline-none"
+								onkeydown={(e) => {
+									if (e.key === 'Escape') showWorktrees = false;
+								}}
+							/>
+						</div>
+						{#if !worktreeData}
+							<div class="flex items-center justify-center h-10">
+								<Spinner size={14} />
+							</div>
+						{/if}
+					</div>
+				{/snippet}
+				{#snippet children()}
+					{#if worktreeData}
+						{#if filteredWorktrees.length > 0}
+							<div
+								class="px-2 pt-1 pb-0.5 text-[0.625rem] uppercase text-gray-300 dark:text-gray-600"
+							>
+								{$t('git.worktrees')}
+							</div>
+							{#each filteredWorktrees as worktree (worktree.path)}
+								<button
+									type="button"
+									class="group flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs transition-colors duration-75
+										{worktree.is_current
+										? 'text-gray-900 dark:text-white bg-gray-50 dark:bg-white/5'
+										: 'text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white'}"
+									onclick={() => switchWorktree(worktree)}
+								>
+									<Icon name="folder" size={14} class="shrink-0" />
+									<span class="min-w-0 flex-1 text-left truncate">{worktreeLabel(worktree)}</span>
+									<span
+										class="min-w-0 max-w-[45%] truncate text-[0.6875rem] text-gray-300 dark:text-gray-600"
+									>
+										{pathTail(worktree.path)}
+									</span>
+									{#if worktree.is_current}
+										<svg
+											class="w-3 h-3 shrink-0 text-gray-400 dark:text-gray-500"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="2.5"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<polyline points="20 6 9 17 4 12" />
+										</svg>
+									{/if}
+								</button>
+							{/each}
+						{:else}
+							<div class="px-3 py-2 text-[0.6875rem] text-gray-400 dark:text-gray-500 text-center">
+								{$t('git.noWorktreesFound')}
+							</div>
+						{/if}
+					{/if}
+				{/snippet}
+				{#snippet footer()}
+					{#if creatingWorktree}
+						<div class="flex items-center gap-2 h-7 px-2">
+							<Icon name="folder" size={14} class="text-gray-400 shrink-0" />
+							<input
+								bind:this={newWorktreeInputEl}
+								type="text"
+								class="flex-1 border-none outline-none bg-transparent text-xs text-gray-900 dark:text-white placeholder:text-gray-400"
+								placeholder={$t('git.branchName')}
+								bind:value={newWorktreeBranch}
+								onkeydown={(e) => {
+									if (e.key === 'Enter') createWorktree();
+									if (e.key === 'Escape') {
+										creatingWorktree = false;
+										newWorktreeBranch = '';
+									}
+								}}
+							/>
+							<button
+								class="flex items-center justify-center w-5 h-5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/6 transition-colors duration-75"
+								onclick={() => {
+									creatingWorktree = false;
+									newWorktreeBranch = '';
+								}}
+							>
+								<Icon name="xmark" size={12} />
+							</button>
+							<button
+								class="flex items-center justify-center w-5 h-5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/6 transition-colors duration-75"
+								onclick={createWorktree}
+								disabled={loading}
+							>
+								<Icon name="check" size={12} />
+							</button>
+						</div>
+					{:else}
+						<button
+							class="flex items-center gap-2 w-full h-7 px-2 rounded-xl text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white transition-colors"
+							onclick={() => {
+								creatingWorktree = true;
+								setTimeout(() => newWorktreeInputEl?.focus(), 0);
+							}}
+						>
+							<Icon name="plus" size={14} />
+							<span class="truncate">{$t('git.newWorktree')}</span>
 						</button>
 					{/if}
 				{/snippet}
@@ -840,7 +1133,7 @@
 					<!-- Mobile back button when viewing diff -->
 					{#if showDiff}
 						<button
-							class="flex md:hidden items-center gap-1 h-6 px-1.5 rounded-md text-[11px] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+							class="flex md:hidden items-center gap-1 h-6 px-1.5 rounded-md text-[0.6875rem] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
 							onclick={backToList}
 						>
 							<Icon name="chevron-left" size={12} />
@@ -849,7 +1142,7 @@
 
 					<!-- Tabs (always visible) -->
 					<button
-						class="px-2.5 h-6 rounded-md text-[11px] font-medium transition-colors duration-75
+						class="px-2.5 h-6 rounded-md text-[0.6875rem] font-medium transition-colors duration-75
 							{view === 'changes'
 							? 'bg-gray-200/50 dark:bg-white/8 text-gray-900 dark:text-white'
 							: 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}"
@@ -859,7 +1152,7 @@
 							>{/if}</button
 					>
 					<button
-						class="px-2.5 h-6 rounded-md text-[11px] font-medium transition-colors duration-75
+						class="px-2.5 h-6 rounded-md text-[0.6875rem] font-medium transition-colors duration-75
 							{view === 'history'
 							? 'bg-gray-200/50 dark:bg-white/8 text-gray-900 dark:text-white'
 							: 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}"
@@ -921,7 +1214,7 @@
 											/>
 										{/if}
 									</span>
-									<span class="text-[11px] text-gray-600 dark:text-gray-400"
+									<span class="text-[0.6875rem] text-gray-600 dark:text-gray-400"
 										>{$t('git.changedFile', { count: totalChanges })}</span
 									>
 								</button>
@@ -956,19 +1249,19 @@
 										</span>
 										{#if fp.dir}
 											<span
-												class="text-[10px] text-gray-400 dark:text-gray-600 truncate shrink min-w-0"
+												class="text-[0.625rem] text-gray-400 dark:text-gray-600 truncate shrink min-w-0"
 												>{fp.dir}</span
 											>
 										{/if}
 										<!-- svelte-ignore a11y_no_static_element_interactions -->
 										<span
-											class="text-[11px] text-gray-800 dark:text-gray-200 truncate shrink-0 hover:underline cursor-pointer"
+											class="text-[0.6875rem] text-gray-800 dark:text-gray-200 truncate shrink-0 hover:underline cursor-pointer"
 											onclick={(e) => {
 												e.stopPropagation();
 												openFileTab(workspacePath.replace(/\/$/, '') + '/' + file.path);
 											}}>{fp.name}</span
 										>
-										<span class="ml-auto text-[10px] font-mono font-bold shrink-0 {sc.color}"
+										<span class="ml-auto text-[0.625rem] font-mono font-bold shrink-0 {sc.color}"
 											>{sc.char}</span
 										>
 										<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -992,7 +1285,7 @@
 								>
 									<input
 										type="text"
-										class="w-full h-7 px-2 bg-transparent text-[11px] text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-600 outline-none"
+										class="w-full h-7 px-2 bg-transparent text-[0.6875rem] text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-600 outline-none"
 										placeholder={$t('git.summaryRequired')}
 										bind:value={commitSummary}
 										onkeydown={(e) => {
@@ -1000,14 +1293,14 @@
 										}}
 									/>
 									<textarea
-										class="w-full px-2 py-1.5 bg-transparent text-[11px] text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-600 outline-none resize-none border-t border-gray-100 dark:border-white/4"
+										class="w-full px-2 py-1.5 bg-transparent text-[0.6875rem] text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-600 outline-none resize-none border-t border-gray-100 dark:border-white/4"
 										rows="2"
 										placeholder={$t('git.description')}
 										bind:value={commitDescription}
 									></textarea>
 								</div>
 								<button
-									class="w-full h-7 mt-1.5 rounded-lg text-[11px] font-medium transition-colors duration-75
+									class="w-full h-7 mt-1.5 rounded-lg text-[0.6875rem] font-medium transition-colors duration-75
 										{stagedFiles.length && commitSummary.trim()
 										? 'bg-gray-900 dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200'
 										: 'bg-gray-100 dark:bg-white/6 text-gray-400 dark:text-gray-600 cursor-default'}"
@@ -1037,8 +1330,8 @@
 												size={10}
 												class="text-gray-400 dark:text-gray-600 shrink-0"
 											/>
-											<span class="text-[10px] text-gray-400 dark:text-gray-600">
-												{unpushedCount} unpushed {unpushedCount === 1 ? 'commit' : 'commits'}
+											<span class="text-[0.625rem] text-gray-400 dark:text-gray-600">
+												{$t('git.unpushedCommit', { count: unpushedCount })}
 											</span>
 										</div>
 									{/if}
@@ -1052,14 +1345,14 @@
 										{#if i < unpushedCount}
 											<span
 												class="w-1.5 h-1.5 rounded-full bg-blue-500 dark:bg-blue-400 shrink-0"
-												title="Unpushed"
+												title={$t('git.unpushed')}
 											></span>
 										{/if}
 										<div class="flex flex-col min-w-0 flex-1">
 											<span class="text-xs text-gray-800 dark:text-gray-200 truncate w-full"
 												>{c.message}</span
 											>
-											<span class="text-[10px] text-gray-400 dark:text-gray-600 font-mono"
+											<span class="text-[0.625rem] text-gray-400 dark:text-gray-600 font-mono"
 												>{c.short_hash} · {c.author} · {relTime(c.date)}</span
 											>
 										</div>
@@ -1077,7 +1370,7 @@
 								{/each}
 								{#if !commits.length}
 									<div
-										class="flex items-center justify-center h-full text-[11px] text-gray-400 dark:text-gray-600"
+										class="flex items-center justify-center h-full text-[0.6875rem] text-gray-400 dark:text-gray-600"
 									>
 										{$t('git.noCommits')}
 									</div>
@@ -1088,14 +1381,14 @@
 
 					<!-- Right pane: diff viewer -->
 					<div
-						class="flex-1 overflow-hidden font-mono text-[11px] leading-[18px]
+						class="flex-1 overflow-hidden font-mono text-[0.6875rem] leading-[1.125rem]
 						{showDiff ? 'flex flex-col' : 'hidden md:flex md:flex-col'}"
 					>
 						{#if fileDiff.length}
 							<div
 								class="hidden md:flex items-center h-6 px-2 border-b border-gray-100 dark:border-white/4 shrink-0"
 							>
-								<span class="text-[10px] text-gray-400 dark:text-gray-600 font-mono truncate">
+								<span class="text-[0.625rem] text-gray-400 dark:text-gray-600 font-mono truncate">
 									{#if selectedCommit}
 										{selectedCommit.short_hash} · {selectedCommit.message}
 									{:else}
@@ -1108,7 +1401,7 @@
 									{#each fileDiff as df}
 										{#if fileDiff.length > 1}
 											<div
-												class="px-2 py-1 text-[10px] text-gray-500 dark:text-gray-400 bg-white dark:bg-[#1a1a1a] border-b border-gray-100 dark:border-white/4 sticky top-0 z-10 font-medium"
+												class="px-2 py-1 text-[0.625rem] text-gray-500 dark:text-gray-400 bg-white dark:bg-[#1a1a1a] border-b border-gray-100 dark:border-white/4 sticky top-0 z-10 font-medium"
 											>
 												{df.path}
 											</div>
@@ -1152,15 +1445,15 @@
 						{:else}
 							<div class="flex items-center justify-center h-full">
 								{#if view === 'history' && !selectedCommit}
-									<span class="text-[11px] text-gray-400 dark:text-gray-600"
+									<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600"
 										>{$t('git.selectCommit')}</span
 									>
 								{:else if totalChanges}
-									<span class="text-[11px] text-gray-400 dark:text-gray-600"
+									<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600"
 										>{$t('git.selectFile')}</span
 									>
 								{:else}
-									<span class="text-[11px] text-gray-400 dark:text-gray-600 font-sans"
+									<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600 font-sans"
 										>{$t('git.noLocalChanges')}</span
 									>
 								{/if}
@@ -1176,11 +1469,11 @@
 {#if pendingCheckoutBranch}
 	<Modal onclose={() => (pendingCheckoutBranch = null)} class="w-full max-w-sm mx-4">
 		<div class="p-4">
-			<h2 class="text-sm font-medium text-gray-900 dark:text-white">Switch branches?</h2>
+			<h2 class="text-sm font-medium text-gray-900 dark:text-white">{$t('git.switchBranches')}</h2>
 			<p class="mt-1.5 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
-				You have {totalChanges} changed {totalChanges === 1 ? 'file' : 'files'} on
-				<span class="font-mono text-gray-700 dark:text-gray-300">{gitStatus?.branch}</span>. Choose
-				whether to leave those changes here or bring them to
+				{$t('git.moveChangesPromptPrefix', { count: totalChanges })}
+				<span class="font-mono text-gray-700 dark:text-gray-300">{gitStatus?.branch}</span>.
+				{$t('git.moveChangesPromptMiddle')}
 				<span class="font-mono text-gray-700 dark:text-gray-300">{pendingCheckoutBranch}</span>.
 			</p>
 			<div class="mt-4 flex items-center justify-end gap-2">
@@ -1188,21 +1481,21 @@
 					class="px-2.5 py-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
 					onclick={() => (pendingCheckoutBranch = null)}
 				>
-					Cancel
+					{$t('common.cancel')}
 				</button>
 				<button
 					class="px-2.5 py-1 text-xs text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors"
 					onclick={() => performBranchCheckout(pendingCheckoutBranch!, 'leave')}
 					disabled={loading}
 				>
-					Leave changes
+					{$t('git.leaveChanges')}
 				</button>
 				<button
 					class="px-3.5 py-1.5 text-xs bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition-colors rounded-full disabled:opacity-50"
 					onclick={() => performBranchCheckout(pendingCheckoutBranch!, 'bring')}
 					disabled={loading}
 				>
-					Bring changes
+					{$t('git.bringChanges')}
 				</button>
 			</div>
 		</div>
@@ -1212,11 +1505,13 @@
 {#if pendingCreateBranch}
 	<Modal onclose={() => (pendingCreateBranch = null)} class="w-full max-w-sm mx-4">
 		<div class="p-4">
-			<h2 class="text-sm font-medium text-gray-900 dark:text-white">Create branch?</h2>
+			<h2 class="text-sm font-medium text-gray-900 dark:text-white">
+				{$t('git.createBranchPrompt')}
+			</h2>
 			<p class="mt-1.5 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
-				You have {totalChanges} changed {totalChanges === 1 ? 'file' : 'files'} on
-				<span class="font-mono text-gray-700 dark:text-gray-300">{gitStatus?.branch}</span>. Choose
-				whether to leave those changes here or bring them to
+				{$t('git.moveChangesPromptPrefix', { count: totalChanges })}
+				<span class="font-mono text-gray-700 dark:text-gray-300">{gitStatus?.branch}</span>.
+				{$t('git.moveChangesPromptMiddle')}
 				<span class="font-mono text-gray-700 dark:text-gray-300">{pendingCreateBranch}</span>.
 			</p>
 			<div class="mt-4 flex items-center justify-end gap-2">
@@ -1224,21 +1519,21 @@
 					class="px-2.5 py-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
 					onclick={() => (pendingCreateBranch = null)}
 				>
-					Cancel
+					{$t('common.cancel')}
 				</button>
 				<button
 					class="px-2.5 py-1 text-xs text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors"
 					onclick={() => performBranchCreate(pendingCreateBranch!, 'leave')}
 					disabled={loading}
 				>
-					Leave changes
+					{$t('git.leaveChanges')}
 				</button>
 				<button
 					class="px-3.5 py-1.5 text-xs bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition-colors rounded-full disabled:opacity-50"
 					onclick={() => performBranchCreate(pendingCreateBranch!, 'bring')}
 					disabled={loading}
 				>
-					Bring changes
+					{$t('git.bringChanges')}
 				</button>
 			</div>
 		</div>
@@ -1252,21 +1547,21 @@
 			...(branchActionMenu.branch.is_local
 				? [
 						{
-							label: 'Rename',
+							label: $t('files.rename'),
 							icon: 'pencil',
 							onclick: () => renameBranch(branchActionMenu!.branch)
 						}
 					]
 				: []),
 			{
-				label: 'Copy branch name',
+				label: $t('git.copyBranchName'),
 				icon: 'copy',
 				onclick: () => copyBranchName(branchActionMenu!.branch)
 			},
 			...(branchActionMenu.branch.is_local && !branchActionMenu.branch.is_current
 				? [
 						{
-							label: 'Delete',
+							label: $t('files.delete'),
 							icon: 'xmark',
 							onclick: () => deleteBranch(branchActionMenu!.branch)
 						}
@@ -1338,23 +1633,23 @@
 	}
 
 	.diff-gutter-removed {
-		border-left: 3px solid transparent;
+		border-left: 0.1875rem solid transparent;
 		border-image: repeating-linear-gradient(
 				-45deg,
 				#ef4444 0,
 				#ef4444 1px,
 				transparent 1px,
-				transparent 3px
+				transparent 0.1875rem
 			)
 			3;
 	}
 
 	.git-resize-handle {
 		position: absolute;
-		top: -3px;
+		top: -0.1875rem;
 		left: 0;
 		right: 0;
-		height: 6px;
+		height: 0.375rem;
 		cursor: row-resize;
 		z-index: 10;
 		transition: background 0.15s;
diff --git a/cptr/frontend/src/lib/components/GitView.svelte b/cptr/frontend/src/lib/components/GitView.svelte
index ffd5e50d..78246c36 100644
--- a/cptr/frontend/src/lib/components/GitView.svelte
+++ b/cptr/frontend/src/lib/components/GitView.svelte
@@ -102,7 +102,7 @@
 			reviewFiles = nextFiles;
 		} catch (e) {
 			if (seq !== loadSeq) return;
-			error = e instanceof Error ? e.message : 'Failed to load git changes';
+			error = e instanceof Error ? e.message : $t('git.loadChangesFailed');
 			reviewFiles = [];
 		} finally {
 			if (seq === loadSeq) {
@@ -203,7 +203,7 @@
 	function blockClass(type: DiffLine['type']): string {
 		switch (type) {
 			case 'added':
-				return 'bg-green-100 border-l-[3px] border-l-green-500 dark:bg-green-500/15 dark:border-l-green-400';
+				return 'bg-green-100 border-l-[0.1875rem] border-l-green-500 dark:bg-green-500/15 dark:border-l-green-400';
 			case 'removed':
 				return 'bg-red-100 diff-gutter-removed dark:bg-red-500/15';
 			default:
@@ -265,13 +265,15 @@
 	{:else if error && !gitStatus}
 		<div class="flex h-full flex-col items-center justify-center gap-2 px-6 text-center">
 			<Icon name="git-diff" size={24} class="text-gray-300 dark:text-gray-700" />
-			<p class="text-xs font-medium text-gray-700 dark:text-gray-300">Unable to load changes</p>
-			<p class="max-w-sm text-[11px] text-gray-400 dark:text-gray-600">{error}</p>
+			<p class="text-xs font-medium text-gray-700 dark:text-gray-300">
+				{$t('git.unableToLoadChanges')}
+			</p>
+			<p class="max-w-sm text-[0.6875rem] text-gray-400 dark:text-gray-600">{error}</p>
 		</div>
 	{:else if !gitStatus?.is_repo}
 		<div class="flex h-full flex-col items-center justify-center gap-2 px-6 text-center">
 			<Icon name="git-branch" size={24} class="text-gray-300 dark:text-gray-700" />
-			<p class="text-xs text-gray-400 dark:text-gray-600">Not a git repository</p>
+			<p class="text-xs text-gray-400 dark:text-gray-600">{$t('git.notARepo')}</p>
 		</div>
 	{:else}
 		<header
@@ -284,23 +286,23 @@
 				>
 				{#if gitStatus.upstream}
 					<Icon name="chevron-right" size={12} class="shrink-0 text-gray-300 dark:text-gray-700" />
-					<span class="truncate font-mono text-[11px] text-gray-400 dark:text-gray-600"
+					<span class="truncate font-mono text-[0.6875rem] text-gray-400 dark:text-gray-600"
 						>{gitStatus.upstream}</span
 					>
 				{/if}
 				{#if gitStatus.ahead > 0}
-					<span class="font-mono text-[10px] text-gray-400 dark:text-gray-600"
+					<span class="font-mono text-[0.625rem] text-gray-400 dark:text-gray-600"
 						>+{gitStatus.ahead}</span
 					>
 				{/if}
 				{#if gitStatus.behind > 0}
-					<span class="font-mono text-[10px] text-gray-400 dark:text-gray-600"
+					<span class="font-mono text-[0.625rem] text-gray-400 dark:text-gray-600"
 						>-{gitStatus.behind}</span
 					>
 				{/if}
 				{#if totalChanges > 0}
-					<span class="ml-1 font-mono text-[10px] text-gray-400 dark:text-gray-600"
-						>{totalChanges} changed</span
+					<span class="ml-1 font-mono text-[0.625rem] text-gray-400 dark:text-gray-600"
+						>{$t('git.changedCount', { count: totalChanges })}</span
 					>
 				{/if}
 			</div>
@@ -321,15 +323,17 @@
 				class="flex h-8 shrink-0 items-center gap-2 border-b border-gray-200 px-3 dark:border-white/6"
 			>
 				<button
-					class="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/6 dark:hover:text-gray-300"
+					class="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.6875rem] text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/6 dark:hover:text-gray-300"
 					onclick={toggleAll}
 				>
 					<Icon name={anyExpanded ? 'chevron-down' : 'chevron-right'} size={12} />
-					<span>{anyExpanded ? 'Collapse All' : 'Expand All'}</span>
+					<span>{anyExpanded ? $t('git.collapseAll') : $t('git.expandAll')}</span>
 				</button>
-				<span class="text-[11px] text-gray-500 dark:text-gray-400">Uncommitted</span>
-				<span class="ml-auto text-[11px] text-gray-400 dark:text-gray-600"
-					>{totalChanges} {totalChanges === 1 ? 'change' : 'changes'}</span
+				<span class="text-[0.6875rem] text-gray-500 dark:text-gray-400">
+					{$t('git.uncommittedChanges')}
+				</span>
+				<span class="ml-auto text-[0.6875rem] text-gray-400 dark:text-gray-600"
+					>{$t('git.change', { count: totalChanges })}</span
 				>
 			</div>
 		{/if}
@@ -345,10 +349,10 @@
 							class="text-gray-300 dark:text-gray-700"
 						/>
 						<h2 class="text-sm font-medium text-gray-700 dark:text-gray-300">
-							No file changes yet
+							{$t('git.noFileChangesYet')}
 						</h2>
 						<p class="text-xs text-gray-400 dark:text-gray-600">
-							Changes in this project will appear here.
+							{$t('git.projectChangesHint')}
 						</p>
 					</div>
 				</div>
@@ -370,7 +374,7 @@
 										: ''}"
 								/>
 								<span
-									class="w-4 shrink-0 text-center font-mono text-[11px] font-bold {meta.className}"
+									class="w-4 shrink-0 text-center font-mono text-[0.6875rem] font-bold {meta.className}"
 									title={meta.label}>{meta.char}</span
 								>
 								<Icon name="git-diff" size={13} class="shrink-0 text-gray-400 dark:text-gray-600" />
@@ -385,41 +389,41 @@
 									>
 									{#if parts.dir}
 										<span
-											class="hidden truncate text-[11px] text-gray-400 dark:text-gray-600 sm:inline"
+											class="hidden truncate text-[0.6875rem] text-gray-400 dark:text-gray-600 sm:inline"
 											>{parts.dir}</span
 										>
 									{/if}
 								</div>
 								{#if file.additions > 0}
 									<span
-										class="shrink-0 font-mono text-[11px] font-medium text-green-600 dark:text-green-400"
+										class="shrink-0 font-mono text-[0.6875rem] font-medium text-green-600 dark:text-green-400"
 										>+{file.additions}</span
 									>
 								{/if}
 								{#if file.deletions > 0}
 									<span
-										class="shrink-0 font-mono text-[11px] font-medium text-red-500 dark:text-red-400"
+										class="shrink-0 font-mono text-[0.6875rem] font-medium text-red-500 dark:text-red-400"
 										>-{file.deletions}</span
 									>
 								{/if}
 
 								<span
-									class="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium text-rose-500 bg-rose-50 dark:bg-rose-500/10 dark:text-rose-300"
+									class="shrink-0 rounded px-1.5 py-0.5 text-[0.625rem] font-medium text-rose-500 bg-rose-50 dark:bg-rose-500/10 dark:text-rose-300"
 								>
-									{file.staged ? 'Staged' : 'Uncommitted'}
+									{file.staged ? $t('git.staged') : $t('git.uncommittedChanges')}
 								</span>
 							</button>
 
 							{#if file.expanded}
 								<div
-									class="mb-1 overflow-x-auto border-y border-gray-100 bg-white font-mono text-[11px] leading-[18px] dark:border-white/4 dark:bg-black"
+									class="mb-1 overflow-x-auto border-y border-gray-100 bg-white font-mono text-[0.6875rem] leading-[1.125rem] dark:border-white/4 dark:bg-black"
 								>
 									<div class="diff-content">
 										{#if file.diffFiles.some((diffFile) => diffFile.hunks.length > 0)}
 											{#each file.diffFiles as diffFile}
 												{#if file.diffFiles.length > 1}
 													<div
-														class="sticky top-0 z-10 border-b border-gray-100 bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-500 dark:border-white/4 dark:bg-white/3 dark:text-gray-400"
+														class="sticky top-0 z-10 border-b border-gray-100 bg-gray-50 px-2 py-1 text-[0.625rem] font-medium text-gray-500 dark:border-white/4 dark:bg-white/3 dark:text-gray-400"
 													>
 														{diffFile.path}
 													</div>
@@ -460,9 +464,9 @@
 											{/each}
 										{:else}
 											<div
-												class="px-3 py-8 text-center text-[11px] text-gray-400 dark:text-gray-600"
+												class="px-3 py-8 text-center text-[0.6875rem] text-gray-400 dark:text-gray-600"
 											>
-												No textual diff available
+												{$t('git.noTextualDiff')}
 											</div>
 										{/if}
 									</div>
@@ -483,13 +487,13 @@
 	}
 
 	.diff-gutter-removed {
-		border-left: 3px solid transparent;
+		border-left: 0.1875rem solid transparent;
 		border-image: repeating-linear-gradient(
 				-45deg,
 				#ef4444 0,
 				#ef4444 1px,
 				transparent 1px,
-				transparent 3px
+				transparent 0.1875rem
 			)
 			3;
 	}
diff --git a/cptr/frontend/src/lib/components/GroupTabBar.svelte b/cptr/frontend/src/lib/components/GroupTabBar.svelte
index 583648c9..b76178d3 100644
--- a/cptr/frontend/src/lib/components/GroupTabBar.svelte
+++ b/cptr/frontend/src/lib/components/GroupTabBar.svelte
@@ -423,6 +423,4 @@
 	.group-tabs-row::-webkit-scrollbar {
 		display: none;
 	}
-
-
 </style>
diff --git a/cptr/frontend/src/lib/components/Icon.svelte b/cptr/frontend/src/lib/components/Icon.svelte
index 402b838c..b157bf07 100644
--- a/cptr/frontend/src/lib/components/Icon.svelte
+++ b/cptr/frontend/src/lib/components/Icon.svelte
@@ -397,9 +397,15 @@
 	{:else if name === 'stop'}
 		<rect x="6" y="6" width="12" height="12" rx="1" fill="currentColor" />
 	{:else if name === 'share'}
-		<path d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z" />
-		<path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z" />
-		<path d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z" />
+		<path
+			d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z"
+		/>
+		<path
+			d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z"
+		/>
+		<path
+			d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z"
+		/>
 		<path d="M15.5 6.5L8.5 10.5" />
 		<path d="M8.5 13.5L15.5 17.5" />
 	{:else if name === 'wifi-off'}
diff --git a/cptr/frontend/src/lib/components/KeyPill.svelte b/cptr/frontend/src/lib/components/KeyPill.svelte
index 5dcffa78..607d4c1b 100644
--- a/cptr/frontend/src/lib/components/KeyPill.svelte
+++ b/cptr/frontend/src/lib/components/KeyPill.svelte
@@ -9,6 +9,6 @@
 </script>
 
 <span
-	class="inline-flex items-center justify-center h-[18px] px-[5px] rounded-full text-[10px] font-medium leading-none bg-[#e8e8e8] text-[#555] dark:bg-[#1e1e1e] dark:text-[#999] {className}"
+	class="inline-flex items-center justify-center h-[1.125rem] px-[0.3125rem] rounded-full text-[0.625rem] font-medium leading-none bg-[#e8e8e8] text-[#555] dark:bg-[#1e1e1e] dark:text-[#999] {className}"
 	>{text}</span
 >
diff --git a/cptr/frontend/src/lib/components/Modal.svelte b/cptr/frontend/src/lib/components/Modal.svelte
index 41232fe4..0a7bf42a 100644
--- a/cptr/frontend/src/lib/components/Modal.svelte
+++ b/cptr/frontend/src/lib/components/Modal.svelte
@@ -23,14 +23,11 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="fixed inset-0 z-[100] flex {overlayClass}"
-	onmousedown={onclose}
-	onkeydown={() => {}}
->
+<div class="fixed inset-0 z-[100] flex {overlayClass}" onmousedown={onclose} onkeydown={() => {}}>
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="bg-white dark:bg-[#0a0a0a] dark:border dark:border-white/8 rounded-3xl overflow-visible shadow-2xl {className}"
+		class="app-theme app-surface border rounded-3xl overflow-visible shadow-2xl {className}"
+		style="background: var(--app-bg); color: var(--app-fg);"
 		onmousedown={(e) => e.stopPropagation()}
 		onkeydown={() => {}}
 	>
diff --git a/cptr/frontend/src/lib/components/NotificationToast.svelte b/cptr/frontend/src/lib/components/NotificationToast.svelte
index db9c8cae..d344aa18 100644
--- a/cptr/frontend/src/lib/components/NotificationToast.svelte
+++ b/cptr/frontend/src/lib/components/NotificationToast.svelte
@@ -60,7 +60,7 @@
 <div
 	role="status"
 	aria-live="polite"
-	class="notification-toast group relative flex gap-2.5 text-left w-full bg-white dark:bg-[#1a1a1a] text-gray-700 dark:text-gray-300 border border-black/[0.08] dark:border-white/[0.06] shadow-lg dark:shadow-none rounded-2xl py-3 px-4 cursor-pointer select-none"
+	class="notification-toast app-theme app-surface group relative flex gap-2.5 text-left w-full border shadow-lg dark:shadow-none rounded-2xl py-3 px-4 cursor-pointer select-none"
 	onpointerdown={onPointerDown}
 	onpointermove={onPointerMove}
 	onpointerup={onPointerUp}
@@ -69,7 +69,7 @@
 	<!-- Close button -->
 	<button
 		bind:this={closeButtonEl}
-		class="absolute -top-0.5 -left-0.5 p-0.5 rounded-full opacity-0 group-hover:opacity-100 bg-gray-200 dark:bg-[#222] text-gray-500 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-[#333] hover:text-gray-700 dark:hover:text-gray-300 border-none cursor-pointer transition-opacity duration-150 z-10"
+		class="app-subtle-surface app-muted app-interactive absolute -top-0.5 -left-0.5 p-0.5 rounded-full opacity-0 group-hover:opacity-100 border-none cursor-pointer transition-opacity duration-150 z-10"
 		aria-label={$t('a11y.dismissNotification')}
 		onclick={(e) => {
 			e.stopPropagation();
@@ -92,19 +92,19 @@
 	<div class="min-w-0">
 		{#if title}
 			<div
-				class="text-[13px] font-medium mb-0.5 overflow-hidden text-ellipsis whitespace-nowrap text-gray-900 dark:text-white"
+				class="text-[0.8125rem] font-medium mb-0.5 overflow-hidden text-ellipsis whitespace-nowrap"
 			>
 				{title}
 			</div>
 		{/if}
 		{#if content}
-			<div class="text-xs text-gray-500 dark:text-[#aaa] font-normal line-clamp-2">{content}</div>
+			<div class="app-muted text-xs font-normal line-clamp-2">{content}</div>
 		{/if}
 	</div>
 </div>
 
 <style>
 	.notification-toast {
-		min-width: var(--width, 300px);
+		min-width: var(--width, 18.75rem);
 	}
 </style>
diff --git a/cptr/frontend/src/lib/components/PortNotification.svelte b/cptr/frontend/src/lib/components/PortNotification.svelte
index 3f8990ef..6c062a24 100644
--- a/cptr/frontend/src/lib/components/PortNotification.svelte
+++ b/cptr/frontend/src/lib/components/PortNotification.svelte
@@ -61,24 +61,22 @@
 	<div class="fixed bottom-8 right-3 z-[200] flex flex-col gap-1.5 pointer-events-none">
 		{#each relevantPorts as port (port.port)}
 			<div
-				class="flex items-center gap-2 px-3 py-2 rounded-lg bg-white dark:bg-neutral-900 border border-gray-200 dark:border-white/10 shadow-lg pointer-events-auto animate-in"
+				class="app-theme app-surface flex items-center gap-2 px-3 py-2 rounded-lg border shadow-lg pointer-events-auto animate-in"
 			>
-				<span class="text-xs text-gray-400 shrink-0">🌐</span>
-				<span class="text-xs font-medium font-mono text-gray-700 dark:text-gray-200"
-					>:{port.port}</span
-				>
-				<span class="text-[11px] text-gray-400">({port.process})</span>
+				<span class="app-icon-muted text-xs shrink-0">🌐</span>
+				<span class="text-xs font-medium font-mono">:{port.port}</span>
+				<span class="app-muted text-[0.6875rem]">({port.process})</span>
 				{#if terminalLabel(port.session_id)}
-					<span class="text-[10px] text-gray-400 italic"
+					<span class="app-muted text-[0.625rem] italic"
 						>{$t('port.via', { name: terminalLabel(port.session_id) })}</span
 					>
 				{/if}
 				<button
-					class="ml-1 px-2 py-0.5 rounded text-[11px] font-medium text-white bg-blue-500 hover:bg-blue-600 transition-colors duration-100 shrink-0"
+					class="ml-1 px-2 py-0.5 rounded text-[0.6875rem] font-medium text-white bg-blue-500 hover:bg-blue-600 transition-colors duration-100 shrink-0"
 					onclick={() => preview(port)}>{$t('port.preview')}</button
 				>
 				<button
-					class="flex items-center justify-center w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100 shrink-0"
+					class="app-icon-muted app-interactive flex items-center justify-center w-4 h-4 rounded transition-colors duration-100 shrink-0"
 					onclick={() => dismiss(port)}
 				>
 					<Icon name="xmark" size={9} />
@@ -95,7 +93,7 @@
 
 	@keyframes slideIn {
 		from {
-			transform: translateY(6px);
+			transform: translateY(0.375rem);
 			opacity: 0;
 		}
 		to {
diff --git a/cptr/frontend/src/lib/components/PortPreview.svelte b/cptr/frontend/src/lib/components/PortPreview.svelte
index 24c27309..c0fcdf64 100644
--- a/cptr/frontend/src/lib/components/PortPreview.svelte
+++ b/cptr/frontend/src/lib/components/PortPreview.svelte
@@ -126,7 +126,7 @@
 			class="preview-btn {canGoBack ? '' : 'disabled'}"
 			onclick={goBack}
 			disabled={!canGoBack}
-			use:tooltip={'Back'}
+			use:tooltip={$t('settings.back')}
 		>
 			<Icon name="chevron-left" size={12} />
 		</button>
@@ -136,13 +136,13 @@
 			class="preview-btn {canGoForward ? '' : 'disabled'}"
 			onclick={goForward}
 			disabled={!canGoForward}
-			use:tooltip={'Forward'}
+			use:tooltip={$t('common.forward')}
 		>
 			<Icon name="chevron-right" size={12} />
 		</button>
 
 		<!-- Refresh -->
-		<button class="preview-btn" onclick={refresh} use:tooltip={'Refresh'}>
+		<button class="preview-btn" onclick={refresh} use:tooltip={$t('files.refresh')}>
 			<Icon name="refresh" size={12} />
 		</button>
 
@@ -159,7 +159,7 @@
 		</div>
 
 		<!-- Open external -->
-		<button class="preview-btn" onclick={openExternal} use:tooltip={'Open in new tab'}>
+		<button class="preview-btn" onclick={openExternal} use:tooltip={$t('port.openInNewTab')}>
 			<Icon name="external-link" size={12} />
 		</button>
 	</div>
@@ -176,15 +176,15 @@
 		{#if loadError}
 			<div class="preview-error">
 				<p class="error-title">{$t('port.cannotConnect')}</p>
-				<p class="error-sub">localhost:{port} is not responding</p>
-				<button class="error-retry" onclick={refresh}>Retry</button>
+				<p class="error-sub">{$t('port.notResponding', { port })}</p>
+				<button class="error-retry" onclick={refresh}>{$t('files.retry')}</button>
 			</div>
 		{:else}
 			{#key iframeKey}
 				<iframe
 					bind:this={iframeEl}
 					src={proxyUrl}
-					title="Port {port} preview"
+					title={$t('port.previewTitle', { port })}
 					sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads"
 					class="preview-iframe"
 					onload={onIframeLoad}
@@ -211,9 +211,9 @@
 	.preview-toolbar {
 		display: flex;
 		align-items: center;
-		gap: 4px;
-		height: 32px;
-		padding: 0 6px;
+		gap: 0.25rem;
+		height: 2rem;
+		padding: 0 0.375rem;
 		border-bottom: 1px solid var(--color-gray-200);
 		flex-shrink: 0;
 	}
@@ -226,9 +226,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 22px;
-		height: 22px;
-		border-radius: 4px;
+		width: 1.375rem;
+		height: 1.375rem;
+		border-radius: 0.25rem;
 		color: var(--color-gray-500);
 		transition: all 0.1s;
 		flex-shrink: 0;
@@ -265,9 +265,9 @@
 	.url-input {
 		width: 100%;
 		border: 1px solid var(--color-gray-200);
-		border-radius: 9999px;
-		padding: 3px 12px;
-		font-size: 11px;
+		border-radius: 624.9375rem;
+		padding: 0.1875rem 0.75rem;
+		font-size: 0.6875rem;
 		font-family: var(--font-mono);
 		background: white;
 		color: var(--color-gray-600);
@@ -277,7 +277,7 @@
 
 	.url-input:focus {
 		border-color: oklch(0.65 0.15 250);
-		box-shadow: 0 0 0 2px oklch(0.65 0.15 250 / 0.15);
+		box-shadow: 0 0 0 0.125rem oklch(0.65 0.15 250 / 0.15);
 	}
 
 	:global(.dark) .url-input {
@@ -288,11 +288,11 @@
 
 	:global(.dark) .url-input:focus {
 		border-color: oklch(0.65 0.15 250);
-		box-shadow: 0 0 0 2px oklch(0.65 0.15 250 / 0.1);
+		box-shadow: 0 0 0 0.125rem oklch(0.65 0.15 250 / 0.1);
 	}
 
 	.loading-track {
-		height: 2px;
+		height: 0.125rem;
 		background: var(--color-gray-100);
 		flex-shrink: 0;
 		overflow: hidden;
@@ -305,7 +305,7 @@
 	.loading-bar {
 		height: 100%;
 		background: oklch(0.65 0.15 250);
-		border-radius: 9999px;
+		border-radius: 624.9375rem;
 		animation: loading-bar 1.5s ease-in-out infinite;
 	}
 
@@ -343,26 +343,26 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		gap: 6px;
+		gap: 0.375rem;
 	}
 
 	.error-title {
-		font-size: 14px;
+		font-size: 0.875rem;
 		font-weight: 500;
 		color: var(--color-gray-500);
 	}
 
 	.error-sub {
-		font-size: 12px;
+		font-size: 0.75rem;
 		color: var(--color-gray-400);
 		font-family: var(--font-mono);
 	}
 
 	.error-retry {
-		margin-top: 8px;
-		padding: 4px 14px;
-		border-radius: 6px;
-		font-size: 12px;
+		margin-top: 0.5rem;
+		padding: 0.25rem 0.875rem;
+		border-radius: 0.375rem;
+		font-size: 0.75rem;
 		background: var(--color-gray-100);
 		color: var(--color-gray-600);
 		transition: all 0.1s;
diff --git a/cptr/frontend/src/lib/components/QuickOpen.svelte b/cptr/frontend/src/lib/components/QuickOpen.svelte
index 0578b28e..0c104477 100644
--- a/cptr/frontend/src/lib/components/QuickOpen.svelte
+++ b/cptr/frontend/src/lib/components/QuickOpen.svelte
@@ -77,7 +77,7 @@
 
 <Modal
 	{onclose}
-	class="w-full max-w-[520px] mx-4 max-md:mx-0 max-md:rounded-none max-h-[400px] max-md:max-h-dvh flex flex-col mb-[6vh] max-md:mb-0"
+	class="w-full max-w-[32.5rem] mx-4 max-md:mx-0 max-md:rounded-none max-h-[25rem] max-md:max-h-dvh flex flex-col mb-[6vh] max-md:mb-0"
 >
 	<div class="flex items-center px-4 py-2.5 gap-2.5 border-b border-gray-200 dark:border-white/6">
 		<Icon name="search" size={14} class="text-gray-400 shrink-0" />
@@ -89,7 +89,7 @@
 			bind:value={query}
 		/>
 		<span
-			class="text-[10px] font-mono font-medium px-1.5 py-0.5 rounded bg-gray-100 dark:bg-white/6 text-gray-400 shrink-0"
+			class="text-[0.625rem] font-mono font-medium px-1.5 py-0.5 rounded bg-gray-100 dark:bg-white/6 text-gray-400 shrink-0"
 			>ESC</span
 		>
 	</div>
@@ -111,7 +111,8 @@
 						class="shrink-0 text-gray-400"
 					/>
 					<span class="text-xs font-medium shrink-0">{r.name}</span>
-					<span class="text-[11px] text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
+					<span
+						class="text-[0.6875rem] text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
 						>{relativePath(r.path)}</span
 					>
 				</button>
diff --git a/cptr/frontend/src/lib/components/SaveDialog.svelte b/cptr/frontend/src/lib/components/SaveDialog.svelte
index da2ad441..3f265b18 100644
--- a/cptr/frontend/src/lib/components/SaveDialog.svelte
+++ b/cptr/frontend/src/lib/components/SaveDialog.svelte
@@ -128,7 +128,7 @@
 >
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="w-full max-w-[520px] mx-4 bg-white dark:bg-[#111] dark:border dark:border-white/8 rounded-3xl overflow-hidden shadow-2xl max-h-[420px] flex flex-col"
+		class="app-theme app-surface w-full max-w-[32.5rem] mx-4 border rounded-3xl overflow-hidden shadow-2xl max-h-[26.25rem] flex flex-col"
 		onmousedown={(e) => e.stopPropagation()}
 		onkeydown={() => {}}
 	>
@@ -145,7 +145,7 @@
 				autocomplete="off"
 			/>
 			<span
-				class="text-[10px] font-mono font-medium px-1.5 py-0.5 rounded bg-gray-100 dark:bg-white/6 text-gray-400 shrink-0"
+				class="text-[0.625rem] font-mono font-medium px-1.5 py-0.5 rounded bg-gray-100 dark:bg-white/6 text-gray-400 shrink-0"
 				>ESC</span
 			>
 		</div>
@@ -163,12 +163,12 @@
 					<Icon name="chevron-left" size={13} />
 				</button>
 			{/if}
-			<span class="flex-1 text-[11px] text-gray-400 dark:text-gray-500 font-mono truncate"
+			<span class="flex-1 text-[0.6875rem] text-gray-400 dark:text-gray-500 font-mono truncate"
 				>{currentPath}</span
 			>
 			<label class="flex items-center gap-1.5 cursor-pointer select-none shrink-0">
 				<input type="checkbox" bind:checked={showHidden} class="w-3 h-3 rounded accent-gray-500" />
-				<span class="text-[10px] text-gray-400">{$t('saveDialog.hidden')}</span>
+				<span class="text-[0.625rem] text-gray-400">{$t('saveDialog.hidden')}</span>
 			</label>
 		</div>
 
@@ -183,7 +183,7 @@
 					<p class="text-xs text-red-400">{error}</p>
 					<button
 						class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 px-3 py-1 rounded-lg bg-gray-100 dark:bg-white/6 transition-colors duration-100"
-						onclick={() => fetchDirectories(currentPath)}>Retry</button
+						onclick={() => fetchDirectories(currentPath)}>{$t('saveDialog.retry')}</button
 					>
 				</div>
 			{:else if filteredDirs.length === 0}
@@ -194,10 +194,8 @@
 				{#each filteredDirs as dir, i (dir.name)}
 					<button
 						data-index={i}
-						class="flex items-center gap-2 w-full h-7 px-2 rounded-lg text-left transition-colors duration-75
-							{i === selectedIndex
-							? 'bg-gray-200/50 text-gray-900 dark:bg-white/6 dark:text-white'
-							: 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/4'}"
+						class="directory-row flex items-center gap-2 w-full h-7 px-2 rounded-lg text-left transition-colors duration-75
+					{i === selectedIndex ? 'app-interactive-active' : ''}"
 						onclick={() => navigateTo(dir.name)}
 						onmouseenter={() => {
 							selectedIndex = i;
@@ -221,7 +219,7 @@
 		>
 			{#if fileName.trim()}
 				<span
-					class="flex-1 text-[11px] text-gray-400 dark:text-gray-600 font-mono truncate min-w-0"
+					class="flex-1 text-[0.6875rem] text-gray-400 dark:text-gray-600 font-mono truncate min-w-0"
 					title={savePath}>{savePath}</span
 				>
 			{:else}
@@ -239,3 +237,14 @@
 		</div>
 	</div>
 </div>
+
+<style>
+	.directory-row {
+		color: color-mix(in oklab, var(--app-fg) 62%, var(--app-bg));
+	}
+
+	.directory-row:hover {
+		background: color-mix(in oklab, var(--app-fg) 7%, transparent);
+		color: var(--app-fg);
+	}
+</style>
diff --git a/cptr/frontend/src/lib/components/SearchModal.svelte b/cptr/frontend/src/lib/components/SearchModal.svelte
index c7c30806..62434ac6 100644
--- a/cptr/frontend/src/lib/components/SearchModal.svelte
+++ b/cptr/frontend/src/lib/components/SearchModal.svelte
@@ -208,7 +208,7 @@
 
 <Modal
 	{onclose}
-	class="w-full max-w-[560px] mx-4 max-md:mx-0 max-md:rounded-none max-h-[480px] max-md:max-h-dvh flex flex-col mb-[6vh] max-md:mb-0"
+	class="w-full max-w-[35rem] mx-4 max-md:mx-0 max-md:rounded-none max-h-[30rem] max-md:max-h-dvh flex flex-col mb-[6vh] max-md:mb-0"
 >
 	<!-- Search input -->
 	<div class="flex items-center px-3.5 py-3 gap-2">
@@ -227,7 +227,7 @@
 		{#if showingRecents && filteredRecents.length > 0}
 			<!-- Recent chats (empty query) -->
 			<div
-				class="text-[10px] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-600 px-2 pt-1 pb-0.5"
+				class="text-[0.625rem] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-600 px-2 pt-1 pb-0.5"
 			>
 				{$t('search.recentChats')}
 			</div>
@@ -248,7 +248,7 @@
 							class="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-100"
 						/>
 					{/if}
-					<span class="text-[10px] text-gray-400 dark:text-gray-600 shrink-0"
+					<span class="text-[0.625rem] text-gray-400 dark:text-gray-600 shrink-0"
 						>{getWorkspaceDisplayName(chat.workspace)}</span
 					>
 				</button>
@@ -261,7 +261,7 @@
 			{#if displayedChats.length > 0}
 				<!-- Chat search results -->
 				<div
-					class="text-[10px] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-600 px-2 pt-1 pb-0.5"
+					class="text-[0.625rem] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-600 px-2 pt-1 pb-0.5"
 				>
 					{$t('search.chats')}
 				</div>
@@ -279,17 +279,17 @@
 						<div class="flex-1 min-w-0">
 							<div class="flex items-center gap-2">
 								<span class="text-xs font-medium truncate">{chat.title}</span>
-								<span class="text-[10px] text-gray-400 dark:text-gray-600 shrink-0"
+								<span class="text-[0.625rem] text-gray-400 dark:text-gray-600 shrink-0"
 									>{relativeTime(chat.updated_at)}</span
 								>
 							</div>
 							{#if chat.snippet}
-								<div class="text-[11px] text-gray-400 dark:text-gray-600 truncate mt-0.5">
+								<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600 truncate mt-0.5">
 									{chat.snippet}
 								</div>
 							{/if}
 						</div>
-						<span class="text-[10px] text-gray-400 dark:text-gray-600 shrink-0"
+						<span class="text-[0.625rem] text-gray-400 dark:text-gray-600 shrink-0"
 							>{getWorkspaceDisplayName(chat.workspace)}</span
 						>
 					</button>
@@ -299,7 +299,7 @@
 			{#if fileResults.length > 0}
 				<!-- File search results -->
 				<div
-					class="text-[10px] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-600 px-2 pt-1 pb-0.5 {displayedChats.length >
+					class="text-[0.625rem] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-600 px-2 pt-1 pb-0.5 {displayedChats.length >
 					0
 						? 'mt-1'
 						: ''}"
@@ -323,10 +323,11 @@
 							class="shrink-0 text-gray-400"
 						/>
 						<span class="text-xs font-medium shrink-0">{file.name}</span>
-						<span class="text-[11px] text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
+						<span
+							class="text-[0.6875rem] text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
 							>{relPath(file.path, file.workspace)}</span
 						>
-						<span class="text-[10px] text-gray-400 dark:text-gray-600 shrink-0 ml-auto"
+						<span class="text-[0.625rem] text-gray-400 dark:text-gray-600 shrink-0 ml-auto"
 							>{getWorkspaceDisplayName(file.workspace)}</span
 						>
 					</button>
diff --git a/cptr/frontend/src/lib/components/Settings/About.svelte b/cptr/frontend/src/lib/components/Settings/About.svelte
index bf79b503..8629dcf7 100644
--- a/cptr/frontend/src/lib/components/Settings/About.svelte
+++ b/cptr/frontend/src/lib/components/Settings/About.svelte
@@ -44,28 +44,28 @@
 		{#if $appVersion}
 			<button
 				onclick={() => showChangelog.set(true)}
-				class="text-[11px] text-gray-400 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 font-mono hover:underline cursor-pointer"
+				class="text-[0.6875rem] text-gray-400 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 font-mono hover:underline cursor-pointer"
 				>v{$appVersion}</button
 			>
 		{/if}
 		{#if $updateAvailable}
-			<span class="text-[11px] text-gray-300 dark:text-gray-600">·</span>
+			<span class="text-[0.6875rem] text-gray-300 dark:text-gray-600">·</span>
 			<a
 				href="https://github.com/open-webui/computer/releases"
 				target="_blank"
 				rel="noopener noreferrer"
-				class="text-[11px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+				class="text-[0.6875rem] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
 				>{$t('about.updateAvailable', { version: $latestVersion })}</a
 			>
 		{/if}
 	</div>
 
-	<p class="text-[13px] text-gray-500 mt-0.5 mb-4">{$t('app.tagline')}</p>
+	<p class="text-[0.8125rem] text-gray-500 mt-0.5 mb-4">{$t('app.tagline')}</p>
 
 	<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-1">
 		{$t('about.license')}
 	</h3>
-	<p class="text-[11px] text-gray-500 leading-relaxed font-mono whitespace-pre-line">
+	<p class="text-[0.6875rem] text-gray-500 leading-relaxed font-mono whitespace-pre-line">
 		<a
 			href="https://github.com/open-webui/computer/blob/main/LICENSE"
 			target="_blank"
@@ -79,28 +79,28 @@
 </div>
 
 <div class="flex items-center gap-1.5 pt-6">
-	<span class="text-[11px] text-gray-400 dark:text-gray-600 mr-1">{$t('about.share')}</span>
+	<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mr-1">{$t('about.share')}</span>
 	{#each shareLinks as link, i}
 		{#if i > 0}
-			<span class="text-[11px] text-gray-200 dark:text-gray-700">·</span>
+			<span class="text-[0.6875rem] text-gray-200 dark:text-gray-700">·</span>
 		{/if}
 		<a
 			href={link.href}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-500 transition-colors"
+			class="text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-500 transition-colors"
 			>{link.label}</a
 		>
 	{/each}
-	<span class="text-[11px] text-gray-200 dark:text-gray-700">·</span>
+	<span class="text-[0.6875rem] text-gray-200 dark:text-gray-700">·</span>
 	<button
 		onclick={copyLink}
-		class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-500 transition-colors cursor-pointer"
+		class="text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-500 transition-colors cursor-pointer"
 	>
 		{copied ? $t('about.copied') : $t('about.copyLink')}
 	</button>
 </div>
 
-<p class="text-[11px] text-gray-300 dark:text-gray-700 pt-4">
+<p class="text-[0.6875rem] text-gray-300 dark:text-gray-700 pt-4">
 	{$t('about.createdBy')}
 </p>
diff --git a/cptr/frontend/src/lib/components/Settings/Account.svelte b/cptr/frontend/src/lib/components/Settings/Account.svelte
index 67428dc6..86824915 100644
--- a/cptr/frontend/src/lib/components/Settings/Account.svelte
+++ b/cptr/frontend/src/lib/components/Settings/Account.svelte
@@ -170,14 +170,14 @@
 			>
 			<div class="flex items-center gap-2">
 				<button
-					class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
+					class="text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
 					onclick={handleAvatarSelect}
 					disabled={uploadingAvatar}>{$t('account.uploadPhoto')}</button
 				>
 				{#if avatarUrl}
-					<span class="text-gray-300 dark:text-gray-700 text-[11px]">·</span>
+					<span class="text-gray-300 dark:text-gray-700 text-[0.6875rem]">·</span>
 					<button
-						class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
+						class="text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
 						onclick={handleAvatarDelete}
 						disabled={uploadingAvatar}>{$t('account.removePhoto')}</button
 					>
@@ -192,7 +192,7 @@
 		type="text"
 		placeholder={$t('account.displayNamePlaceholder')}
 		bind:value={displayName}
-		class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1 mb-5"
+		class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1 mb-5"
 	/>
 
 	<!-- Password -->
@@ -202,19 +202,19 @@
 		placeholder={$t('account.currentPassword')}
 		bind:value={currentPassword}
 		autocomplete="current-password"
-		class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1"
+		class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1"
 	/>
 	<input
 		type="password"
 		placeholder={$t('account.newPassword')}
 		bind:value={newPassword}
 		autocomplete="new-password"
-		class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1"
+		class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1"
 	/>
 	<button
 		disabled={updatingPassword || !currentPassword || !newPassword}
 		onclick={updatePassword}
-		class="mt-2 self-start text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100
+		class="mt-2 self-start text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100
 		disabled:opacity-30 disabled:pointer-events-none"
 	>
 		{#if updatingPassword}
@@ -229,7 +229,7 @@
 		<button
 			onclick={saveDisplayName}
 			disabled={savingProfile}
-			class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100
+			class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100
 			disabled:opacity-30 disabled:pointer-events-none"
 		>
 			{#if savingProfile}
diff --git a/cptr/frontend/src/lib/components/Settings/Appearance.svelte b/cptr/frontend/src/lib/components/Settings/Appearance.svelte
new file mode 100644
index 00000000..0e4a58c7
--- /dev/null
+++ b/cptr/frontend/src/lib/components/Settings/Appearance.svelte
@@ -0,0 +1,381 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import Icon from '../Icon.svelte';
+	import { t } from '$lib/i18n';
+	import { textScale, theme, themeConfig } from '$lib/stores';
+	import type { Theme, ThemeConfig } from '$lib/stores';
+	import {
+		normalizeHexColor,
+		resolveThemeMode,
+		resolveThemeConfig,
+		sanitizeThemeConfig
+	} from '$lib/utils/appearance';
+
+	const minTextScale = 1;
+	const maxTextScale = 1.5;
+
+	let fileInput: HTMLInputElement;
+	let scaleEnabled = $state(false);
+	let scaleDraft = $state(1);
+	let colorDrafts = $state({ background: '', foreground: '' });
+
+	const resolvedTheme = $derived(resolveThemeMode($theme));
+	const resolvedConfig = $derived(resolveThemeConfig($theme, $themeConfig));
+	const hasCustomAppearance = $derived(Boolean($themeConfig || $textScale !== null));
+
+	$effect(() => {
+		colorDrafts = {
+			background: resolvedConfig.background,
+			foreground: resolvedConfig.foreground
+		};
+		if ($textScale !== null) {
+			scaleEnabled = true;
+			scaleDraft = $textScale;
+		} else if (!scaleEnabled) {
+			scaleDraft = 1;
+		}
+	});
+
+	function setTheme(v: Theme) {
+		theme.set(v);
+	}
+
+	function updateThemeColors(next: { background?: string; foreground?: string }) {
+		const current = $themeConfig ?? {};
+		themeConfig.set(
+			sanitizeThemeConfig({
+				...current,
+				[resolvedTheme]: { ...(current[resolvedTheme] ?? {}), ...next }
+			})
+		);
+	}
+
+	function updateThemeConfig(next: ThemeConfig) {
+		themeConfig.set(sanitizeThemeConfig({ ...($themeConfig ?? {}), ...next }));
+	}
+
+	function updateColor(key: 'background' | 'foreground', value: string) {
+		colorDrafts = { ...colorDrafts, [key]: value };
+		const color = normalizeHexColor(value);
+		if (color) updateThemeColors({ [key]: color });
+	}
+
+	function updateFont(value: string) {
+		updateThemeConfig({ uiFont: value });
+	}
+
+	function toggleTextScale() {
+		if (scaleEnabled) {
+			scaleEnabled = false;
+			scaleDraft = 1;
+			textScale.set(null);
+		} else {
+			scaleEnabled = true;
+			scaleDraft = $textScale ?? 1;
+		}
+	}
+
+	function normalizeTextScale(scale: number | string) {
+		const value = Number(scale);
+		if (!Number.isFinite(value)) return minTextScale;
+		return Math.max(minTextScale, Math.min(maxTextScale, Number(value.toFixed(2))));
+	}
+
+	function scaleLabel(scale: number) {
+		return `${scale.toFixed(scale % 1 === 0 ? 0 : 2)}x`;
+	}
+
+	function setTextScalePreference(scale: number | string) {
+		const next = normalizeTextScale(scale);
+		scaleDraft = next;
+		if (next === minTextScale) {
+			scaleEnabled = false;
+			textScale.set(null);
+		} else {
+			scaleEnabled = true;
+			textScale.set(next);
+		}
+	}
+
+	function resetAppearance() {
+		themeConfig.set(null);
+		scaleEnabled = false;
+		scaleDraft = 1;
+		textScale.set(null);
+	}
+
+	function exportTheme() {
+		const payload = {
+			theme: $theme,
+			themeConfig: sanitizeThemeConfig($themeConfig),
+			textScale: $textScale
+		};
+
+		try {
+			const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+			const url = URL.createObjectURL(blob);
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = 'computer-theme.json';
+			link.click();
+			URL.revokeObjectURL(url);
+			toast.success($t('appearance.exported'));
+		} catch {
+			toast.error($t('appearance.exportFailed'));
+		}
+	}
+
+	function validateImportedColors(source: Record<string, unknown>) {
+		for (const bucket of [source, source.light, source.dark]) {
+			if (!bucket || typeof bucket !== 'object') continue;
+			for (const key of ['background', 'foreground']) {
+				if (key in bucket && !normalizeHexColor((bucket as Record<string, unknown>)[key])) {
+					throw new Error('invalid color');
+				}
+			}
+		}
+	}
+
+	async function importTheme(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		const file = input.files?.[0];
+		input.value = '';
+		if (!file) return;
+
+		try {
+			const parsed = JSON.parse(await file.text());
+			const source = parsed?.themeConfig ?? parsed;
+			if (!source || typeof source !== 'object') throw new Error('invalid theme');
+			validateImportedColors(source);
+			const importedConfig = sanitizeThemeConfig(source);
+			const importedTheme = ['system', 'light', 'dark'].includes(parsed?.theme)
+				? (parsed.theme as Theme)
+				: null;
+			const importedScale =
+				typeof parsed?.textScale === 'number' && Number.isFinite(parsed.textScale)
+					? normalizeTextScale(parsed.textScale)
+					: undefined;
+
+			if (!importedConfig && !importedTheme && importedScale === undefined) {
+				throw new Error('empty theme');
+			}
+			if (importedTheme) theme.set(importedTheme);
+			if (importedConfig) themeConfig.set(importedConfig);
+			if (importedScale !== undefined) textScale.set(importedScale === 1 ? null : importedScale);
+			toast.success($t('appearance.imported'));
+		} catch {
+			toast.error($t('appearance.importFailed'));
+		}
+	}
+</script>
+
+<div class="flex flex-col h-full">
+	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-none pr-1.5 -mr-1.5">
+		<div class="flex items-center justify-between mb-4">
+			<h2 class="text-sm font-medium text-gray-900 dark:text-white">{$t('appearance.title')}</h2>
+			<div class="flex items-center gap-2">
+				<input
+					bind:this={fileInput}
+					type="file"
+					accept="application/json,.json"
+					class="hidden"
+					onchange={importTheme}
+				/>
+				<button
+					type="button"
+					class="text-[0.625rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
+					onclick={() => fileInput?.click()}
+				>
+					{$t('appearance.import')}
+				</button>
+				<button
+					type="button"
+					class="text-[0.625rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
+					onclick={exportTheme}
+				>
+					{$t('appearance.exportTheme')}
+				</button>
+				<button
+					type="button"
+					class="text-[0.625rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
+					disabled={!hasCustomAppearance}
+					onclick={resetAppearance}
+				>
+					{$t('appearance.reset')}
+				</button>
+			</div>
+		</div>
+
+		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2">{$t('general.theme')}</h3>
+		<div class="flex gap-1">
+			{#each [{ value: 'light' as Theme, label: $t('general.light'), icon: 'sun-light' }, { value: 'dark' as Theme, label: $t('general.dark'), icon: 'half-moon' }, { value: 'system' as Theme, label: $t('general.system'), icon: 'monitor' }] as opt}
+				<button
+					class="flex items-center gap-1.5 h-7 px-2.5 rounded-lg text-xs transition-colors duration-100
+					{$theme === opt.value
+						? 'bg-gray-200/50 dark:bg-white/8 text-gray-900 dark:text-white font-medium'
+						: 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}"
+					onclick={() => setTheme(opt.value)}
+				>
+					<Icon name={opt.icon} size={13} />
+					{opt.label}
+				</button>
+			{/each}
+		</div>
+
+		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2 mt-5">
+			{$t('appearance.colors')}
+		</h3>
+		<div class="flex flex-col gap-2.5">
+			{#each [{ key: 'background' as const, label: $t('appearance.background'), value: resolvedConfig.background }, { key: 'foreground' as const, label: $t('appearance.foreground'), value: resolvedConfig.foreground }] as opt}
+				<label class="flex items-center justify-between gap-3">
+					<span class="text-xs text-gray-600 dark:text-gray-400">{opt.label}</span>
+					<div class="flex items-center gap-2 min-w-0">
+						<input
+							type="color"
+							value={opt.value}
+							class="appearance-swatch"
+							aria-label={opt.label}
+							oninput={(e) => updateColor(opt.key, e.currentTarget.value)}
+						/>
+						<input
+							value={colorDrafts[opt.key]}
+							class="w-24 bg-transparent text-right text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none"
+							aria-label={opt.label}
+							oninput={(e) => updateColor(opt.key, e.currentTarget.value)}
+						/>
+					</div>
+				</label>
+			{/each}
+		</div>
+
+		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2 mt-5">
+			{$t('appearance.interface')}
+		</h3>
+		<label class="flex items-center justify-between gap-3">
+			<span class="text-xs text-gray-600 dark:text-gray-400">{$t('appearance.uiFont')}</span>
+			<input
+				value={$themeConfig?.uiFont ?? ''}
+				placeholder={resolvedConfig.uiFont}
+				class="w-full max-w-[15rem] bg-transparent text-right text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none"
+				aria-label={$t('appearance.uiFont')}
+				onchange={(e) => updateFont(e.currentTarget.value)}
+			/>
+		</label>
+
+		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2 mt-5">
+			{$t('general.uiScale')}
+		</h3>
+		<div class="w-full">
+			<div class="flex items-center gap-2">
+				<span id="ui-scale-label" class="text-xs text-gray-600 dark:text-gray-400">
+					{$t('general.uiScale')}
+				</span>
+				<button
+					type="button"
+					class="ml-auto h-6 px-2 rounded-lg text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/6 transition-colors"
+					aria-live="polite"
+					onclick={toggleTextScale}
+				>
+					{scaleEnabled ? scaleLabel(scaleDraft) : $t('general.default')}
+				</button>
+			</div>
+
+			{#if scaleEnabled}
+				<div class="flex items-center gap-1.5 pt-1.5">
+					<button
+						type="button"
+						class="flex items-center justify-center w-6 h-6 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/6 transition-colors"
+						aria-labelledby="ui-scale-label"
+						aria-label={$t('general.decreaseUiScale')}
+						onclick={() => setTextScalePreference(scaleDraft - 0.1)}
+					>
+						<Icon name="minus" size={12} />
+					</button>
+					<input
+						id="ui-scale-slider"
+						class="ui-scale-range flex-1 min-w-0"
+						type="range"
+						min={minTextScale}
+						max={maxTextScale}
+						step="0.01"
+						bind:value={scaleDraft}
+						aria-labelledby="ui-scale-label"
+						aria-valuemin={minTextScale}
+						aria-valuemax={maxTextScale}
+						aria-valuenow={scaleDraft}
+						aria-valuetext={scaleLabel(scaleDraft)}
+						oninput={() => setTextScalePreference(scaleDraft)}
+					/>
+					<button
+						type="button"
+						class="flex items-center justify-center w-6 h-6 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/6 transition-colors"
+						aria-labelledby="ui-scale-label"
+						aria-label={$t('general.increaseUiScale')}
+						onclick={() => setTextScalePreference(scaleDraft + 0.1)}
+					>
+						<Icon name="plus" size={12} />
+					</button>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.appearance-swatch {
+		width: 1.5rem;
+		height: 1.5rem;
+		border: 1px solid rgb(156 163 175 / 0.35);
+		border-radius: 624.9375rem;
+		background: transparent;
+		padding: 0.125rem;
+	}
+
+	.ui-scale-range {
+		appearance: none;
+		height: 1rem;
+		background: transparent;
+		cursor: pointer;
+	}
+
+	.ui-scale-range::-webkit-slider-runnable-track {
+		height: 0.125rem;
+		border-radius: 624.9375rem;
+		background: rgb(209 213 219 / 0.7);
+	}
+
+	.ui-scale-range::-webkit-slider-thumb {
+		appearance: none;
+		width: 0.75rem;
+		height: 0.75rem;
+		margin-top: -0.3125rem;
+		border-radius: 624.9375rem;
+		border: 1px solid rgb(156 163 175 / 0.45);
+		background: rgb(255 255 255);
+	}
+
+	.ui-scale-range::-moz-range-track {
+		height: 0.125rem;
+		border-radius: 624.9375rem;
+		background: rgb(209 213 219 / 0.7);
+	}
+
+	.ui-scale-range::-moz-range-thumb {
+		width: 0.75rem;
+		height: 0.75rem;
+		border-radius: 624.9375rem;
+		border: 1px solid rgb(156 163 175 / 0.45);
+		background: rgb(255 255 255);
+	}
+
+	:global(.dark) .ui-scale-range::-webkit-slider-runnable-track,
+	:global(.dark) .ui-scale-range::-moz-range-track {
+		background: rgb(255 255 255 / 0.12);
+	}
+
+	:global(.dark) .ui-scale-range::-webkit-slider-thumb,
+	:global(.dark) .ui-scale-range::-moz-range-thumb {
+		border-color: rgb(255 255 255 / 0.18);
+		background: rgb(229 231 235);
+	}
+</style>
diff --git a/cptr/frontend/src/lib/components/Settings/General.svelte b/cptr/frontend/src/lib/components/Settings/General.svelte
index 6482790b..5e4de638 100644
--- a/cptr/frontend/src/lib/components/Settings/General.svelte
+++ b/cptr/frontend/src/lib/components/Settings/General.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import Icon from '../Icon.svelte';
-	import { theme, streamingBehavior, showUpdateToastPref } from '$lib/stores';
-	import type { Theme, StreamingBehavior } from '$lib/stores';
+	import { streamingBehavior, showUpdateToastPref } from '$lib/stores';
+	import type { StreamingBehavior } from '$lib/stores';
 	import { t, locale, changeLocale, supportedLocales } from '$lib/i18n';
 	import { notificationsEnabled, notificationSound } from '$lib/stores/chat';
 	import { fetchJSON } from '$lib/apis';
@@ -11,10 +10,6 @@
 	import ToggleSwitch from '../common/ToggleSwitch.svelte';
 	import { onMount } from 'svelte';
 
-	function setTheme(v: Theme) {
-		theme.set(v);
-	}
-
 	// ── Webhook URL ─────────────────────────────────────────────
 	let webhookUrl = $state('');
 	let webhookUrlOriginal = $state('');
@@ -24,7 +19,9 @@
 
 	onMount(async () => {
 		try {
-			const data = await fetchJSON<{ config: Record<string, any> }>('/api/admin/config/notifications');
+			const data = await fetchJSON<{ config: Record<string, any> }>(
+				'/api/admin/config/notifications'
+			);
 			const url = data.config?.['notifications.webhook_url'] || '';
 			webhookUrl = url;
 			webhookUrlOriginal = url;
@@ -64,25 +61,9 @@
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5 -mr-1.5">
 		<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$t('general.title')}</h2>
 
-		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2">{$t('general.theme')}</h3>
-		<div class="flex gap-1">
-			{#each [{ value: 'light' as Theme, label: $t('general.light'), icon: 'sun-light' }, { value: 'dark' as Theme, label: $t('general.dark'), icon: 'half-moon' }, { value: 'system' as Theme, label: $t('general.system'), icon: 'monitor' }] as opt}
-				<button
-					class="flex items-center gap-1.5 h-7 px-2.5 rounded-lg text-xs transition-colors duration-100
-					{$theme === opt.value
-						? 'bg-gray-200/50 dark:bg-white/8 text-gray-900 dark:text-white font-medium'
-						: 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}"
-					onclick={() => setTheme(opt.value)}
-				>
-					<Icon name={opt.icon} size={13} />
-					{opt.label}
-				</button>
-			{/each}
-		</div>
-
-		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2 mt-5">{$t('general.language')}</h3>
+		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2">{$t('general.language')}</h3>
 		<select
-			class="w-full max-w-[200px] bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-1 cursor-pointer"
+			class="w-full max-w-[12.5rem] bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-1 cursor-pointer"
 			value={$locale}
 			onchange={(e) => changeLocale((e.currentTarget as HTMLSelectElement).value)}
 		>
@@ -92,21 +73,27 @@
 		</select>
 
 		<!-- Notifications -->
-		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2 mt-5">{$t('general.notifications')}</h3>
+		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2 mt-5">
+			{$t('general.notifications')}
+		</h3>
 
 		<div class="flex flex-col gap-2.5">
 			<!-- Browser notifications toggle -->
 			<label class="flex items-center justify-between cursor-pointer">
-				<span class="text-xs text-gray-600 dark:text-gray-400">{$t('general.browserNotifications')}</span>
+				<span class="text-xs text-gray-600 dark:text-gray-400"
+					>{$t('general.browserNotifications')}</span
+				>
 				<ToggleSwitch value={$notificationsEnabled} onchange={() => toggleNotifications()} />
 			</label>
-			<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+			<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">
 				{$t('general.browserNotificationsDesc')}
 			</p>
 
 			<!-- Sound toggle -->
 			<label class="flex items-center justify-between cursor-pointer">
-				<span class="text-xs text-gray-600 dark:text-gray-400">{$t('general.notificationSound')}</span>
+				<span class="text-xs text-gray-600 dark:text-gray-400"
+					>{$t('general.notificationSound')}</span
+				>
 				<ToggleSwitch value={$notificationSound} onchange={(v) => notificationSound.set(v)} />
 			</label>
 
@@ -122,7 +109,7 @@
 					placeholder="https://hooks.slack.com/services/..."
 					class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 				/>
-				<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-1">
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-1">
 					{$t('general.webhookUrlHint')}
 				</p>
 			</div>
@@ -131,10 +118,12 @@
 		{#if $session?.role === 'admin'}
 			<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2 mt-5">{$t('general.updates')}</h3>
 			<label class="flex items-center justify-between cursor-pointer">
-				<span class="text-xs text-gray-600 dark:text-gray-400">{$t('general.updateNotifications')}</span>
+				<span class="text-xs text-gray-600 dark:text-gray-400"
+					>{$t('general.updateNotifications')}</span
+				>
 				<ToggleSwitch value={$showUpdateToastPref} onchange={(v) => showUpdateToastPref.set(v)} />
 			</label>
-			<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-1">
+			<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-1">
 				{$t('general.updateNotificationsDesc')}
 			</p>
 		{/if}
@@ -153,16 +142,14 @@
 				</button>
 			{/each}
 		</div>
-		<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-1">
-			{$streamingBehavior === 'queue'
-				? $t('general.queueDesc')
-				: $t('general.interruptDesc')}
+		<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-1">
+			{$streamingBehavior === 'queue' ? $t('general.queueDesc') : $t('general.interruptDesc')}
 		</p>
 	</div>
 
 	<div class="shrink-0 pt-3 flex justify-end">
 		<button
-			class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100
+			class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100
 			disabled:opacity-30 disabled:pointer-events-none"
 			onclick={save}
 			disabled={saving}
diff --git a/cptr/frontend/src/lib/components/Settings/Keyboard.svelte b/cptr/frontend/src/lib/components/Settings/Keyboard.svelte
index 6aed5ad6..3256884d 100644
--- a/cptr/frontend/src/lib/components/Settings/Keyboard.svelte
+++ b/cptr/frontend/src/lib/components/Settings/Keyboard.svelte
@@ -95,15 +95,18 @@
 	<div class="flex items-center justify-between mb-3">
 		<h2 class="text-sm font-medium text-gray-900 dark:text-white">{$t('keyboard.title')}</h2>
 		<button
-			class="text-[10px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
+			class="text-[0.625rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
 			onclick={resetKeybindings}>{$t('keyboard.resetDefaults')}</button
 		>
 	</div>
 
 	<!-- Column headers -->
 	<div class="flex items-center gap-2 mb-0.5 px-1">
-		<span class="flex-1 text-[10px] font-medium text-gray-400 dark:text-gray-600">{$t('keyboard.command')}</span>
-		<span class="w-[140px] text-[10px] font-medium text-gray-400 dark:text-gray-600 text-right"
+		<span class="flex-1 text-[0.625rem] font-medium text-gray-400 dark:text-gray-600"
+			>{$t('keyboard.command')}</span
+		>
+		<span
+			class="w-[8.75rem] text-[0.625rem] font-medium text-gray-400 dark:text-gray-600 text-right"
 			>{$t('keyboard.keybinding')}</span
 		>
 	</div>
@@ -116,15 +119,15 @@
 
 			<div class="shortcut-row">
 				<div class="flex-1 min-w-0">
-					<div class="text-[11.5px] text-gray-700 dark:text-gray-300">
+					<div class="text-[0.71875rem] text-gray-700 dark:text-gray-300">
 						{ACTION_LABELS[actionId]}
 					</div>
-					<div class="text-[10px] text-gray-400 dark:text-gray-600 truncate leading-tight">
+					<div class="text-[0.625rem] text-gray-400 dark:text-gray-600 truncate leading-tight">
 						{ACTION_DESCRIPTIONS[actionId]}
 					</div>
 				</div>
 
-				<div class="w-[140px] flex items-center justify-end shrink-0">
+				<div class="w-[8.75rem] flex items-center justify-end shrink-0">
 					{#if isRecording}
 						<span class="recording-indicator">{$t('keyboard.pressKeys')}</span>
 					{:else if chord}
@@ -137,14 +140,14 @@
 						</button>
 					{:else}
 						<button
-							class="text-[10px] text-gray-500 dark:text-gray-600 cursor-pointer hover:text-gray-400 transition-colors duration-75"
+							class="text-[0.625rem] text-gray-500 dark:text-gray-600 cursor-pointer hover:text-gray-400 transition-colors duration-75"
 							onclick={() => startRecording(actionId)}>{$t('keyboard.unassigned')}</button
 						>
 					{/if}
 
 					{#if conflict}
 						<span
-							class="text-[9px] text-amber-500 ml-1"
+							class="text-[0.5625rem] text-amber-500 ml-1"
 							title={$t('keyboard.conflict', { action: ACTION_LABELS[conflict] })}>!</span
 						>
 					{/if}
@@ -153,7 +156,7 @@
 		{/each}
 	</div>
 
-	<p class="text-[10px] text-gray-400 dark:text-gray-600 mt-3">
+	<p class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-3">
 		{$t('keyboard.rebindHint')}
 	</p>
 </div>
@@ -173,10 +176,10 @@
 	.recording-indicator {
 		display: inline-flex;
 		align-items: center;
-		height: 18px;
-		padding: 0 8px;
-		border-radius: 4px;
-		font-size: 10px;
+		height: 1.125rem;
+		padding: 0 0.5rem;
+		border-radius: 0.25rem;
+		font-size: 0.625rem;
 		font-weight: 500;
 		background: rgba(59, 130, 246, 0.1);
 		color: rgba(59, 130, 246, 0.7);
@@ -194,6 +197,6 @@
 	}
 
 	.kbd-inline {
-		@apply inline px-0.5 py-px rounded text-[9px] font-mono bg-gray-100 dark:bg-white/6 text-gray-500;
+		@apply inline px-0.5 py-px rounded text-[0.5625rem] font-mono bg-gray-100 dark:bg-white/6 text-gray-500;
 	}
 </style>
diff --git a/cptr/frontend/src/lib/components/Settings/Memory.svelte b/cptr/frontend/src/lib/components/Settings/Memory.svelte
index 00449c30..71ca6891 100644
--- a/cptr/frontend/src/lib/components/Settings/Memory.svelte
+++ b/cptr/frontend/src/lib/components/Settings/Memory.svelte
@@ -153,7 +153,7 @@
 								</button>
 							</div>
 						{/each}
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">{userUsage}</p>
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 -mt-1">{userUsage}</p>
 					</div>
 				{/if}
 			{/if}
@@ -161,7 +161,7 @@
 
 		<div class="shrink-0 pt-3 flex justify-end">
 			<button
-				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
+				class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
 				onclick={saveSettings}
 				disabled={saving}
 			>
diff --git a/cptr/frontend/src/lib/components/Settings/PWA.svelte b/cptr/frontend/src/lib/components/Settings/PWA.svelte
index 7fa1d6e6..e7464104 100644
--- a/cptr/frontend/src/lib/components/Settings/PWA.svelte
+++ b/cptr/frontend/src/lib/components/Settings/PWA.svelte
@@ -52,7 +52,7 @@
 
 		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2">{tr('pwa.shareBehavior')}</h3>
 		<select
-			class="w-full max-w-[200px] bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-1 cursor-pointer"
+			class="w-full max-w-[12.5rem] bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-1 cursor-pointer"
 			value={$pwaPreferences.shareBehavior}
 			onchange={updateShareBehavior}
 		>
@@ -63,7 +63,7 @@
 
 		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2 mt-5">{tr('pwa.fileImports')}</h3>
 		<select
-			class="w-full max-w-[200px] bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-1 cursor-pointer"
+			class="w-full max-w-[12.5rem] bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-1 cursor-pointer"
 			value={$pwaPreferences.importDestination}
 			onchange={updateImportDestination}
 		>
@@ -73,7 +73,7 @@
 		</select>
 		{#if $pwaPreferences.importDestination === 'configuredFolder'}
 			<input
-				class="mt-2 w-full h-8 bg-gray-100 dark:bg-white/6 rounded-lg px-2 text-[13px] text-gray-700 dark:text-gray-300 outline-none"
+				class="mt-2 w-full h-8 bg-gray-100 dark:bg-white/6 rounded-lg px-2 text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none"
 				placeholder={tr('pwa.importFolderPlaceholder')}
 				value={$pwaPreferences.importFolder ?? ''}
 				oninput={(e) =>
@@ -83,13 +83,13 @@
 
 		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2 mt-5">{tr('pwa.resetTitle')}</h3>
 		<button
-			class="text-[13px] text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors disabled:opacity-40 disabled:pointer-events-none"
+			class="text-[0.8125rem] text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors disabled:opacity-40 disabled:pointer-events-none"
 			onclick={resetPwa}
 			disabled={resetting}
 		>
 			{resetting ? tr('pwa.resetting') : tr('pwa.reset')}
 		</button>
-		<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-1">
+		<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mt-1">
 			{tr('pwa.resetDesc')}
 		</p>
 	</div>
diff --git a/cptr/frontend/src/lib/components/SettingsModal.svelte b/cptr/frontend/src/lib/components/SettingsModal.svelte
index 0783c8cf..6c8c85ba 100644
--- a/cptr/frontend/src/lib/components/SettingsModal.svelte
+++ b/cptr/frontend/src/lib/components/SettingsModal.svelte
@@ -3,6 +3,7 @@
 	import Icon from './Icon.svelte';
 	import Modal from './Modal.svelte';
 	import General from './Settings/General.svelte';
+	import Appearance from './Settings/Appearance.svelte';
 	import Memory from './Settings/Memory.svelte';
 	import PWA from './Settings/PWA.svelte';
 	import Account from './Settings/Account.svelte';
@@ -24,6 +25,7 @@
 
 	type Tab =
 		| 'general'
+		| 'appearance'
 		| 'memory'
 		| 'pwa'
 		| 'keyboard'
@@ -73,6 +75,7 @@
 	const personalTabs: SettingsTab[] = $derived.by(() => {
 		const tabs: SettingsTab[] = [
 			{ id: 'general', label: $t('settings.general'), icon: 'settings' },
+			{ id: 'appearance', label: $t('settings.appearance'), icon: 'sun-light' },
 			{ id: 'keyboard', label: $t('settings.keyboard'), icon: 'terminal' },
 			{ id: 'account', label: $t('settings.account'), icon: 'user' }
 		];
@@ -121,10 +124,10 @@
 
 <Modal
 	{onclose}
-	class="w-full max-w-3xl mx-4 md:mx-0 flex flex-col md:flex-row max-h-[85vh] md:h-[560px]"
+	class="w-full max-w-3xl mx-4 md:mx-0 flex flex-col md:flex-row max-h-[85vh] md:h-[35rem]"
 >
 	<nav
-		class="shrink-0 min-w-0 overflow-x-auto md:overflow-x-visible scrollbar-hidden border-b md:border-b-0 md:border-r border-gray-200 dark:border-white/6 md:w-[180px]"
+		class="shrink-0 min-w-0 md:min-h-0 overflow-x-auto md:overflow-x-hidden md:overflow-y-auto scrollbar-none border-b md:border-b-0 md:border-r border-gray-200 dark:border-white/6 md:w-[11.25rem]"
 	>
 		<div class="flex w-max min-w-full md:w-auto md:min-w-0 md:flex-col p-1 gap-px">
 			<button
@@ -151,7 +154,8 @@
 
 			<!-- Admin section -->
 			{#if isAdmin}
-				<span class="hidden md:block text-[10px] text-gray-400 dark:text-gray-600 px-2 mt-2 mb-0.5"
+				<span
+					class="hidden md:block text-[0.625rem] text-gray-400 dark:text-gray-600 px-2 mt-2 mb-0.5"
 					>{$t('sidebar.admin')}</span
 				>
 
@@ -171,9 +175,11 @@
 		</div>
 	</nav>
 
-	<div class="flex-1 overflow-y-auto min-h-0 p-4 md:px-5">
+	<div class="flex-1 overflow-y-auto scrollbar-none min-h-0 p-4 md:px-5">
 		{#if activeTab === 'general'}
 			<General />
+		{:else if activeTab === 'appearance'}
+			<Appearance />
 		{:else if activeTab === 'memory'}
 			<Memory />
 		{:else if activeTab === 'pwa' && showPwaSettings}
diff --git a/cptr/frontend/src/lib/components/SetupWizard.svelte b/cptr/frontend/src/lib/components/SetupWizard.svelte
index af74a849..e4e02deb 100644
--- a/cptr/frontend/src/lib/components/SetupWizard.svelte
+++ b/cptr/frontend/src/lib/components/SetupWizard.svelte
@@ -109,12 +109,12 @@
 				<h1 class="text-lg tracking-tight text-gray-900 dark:text-white mb-1">
 					{$t('onboarding.welcomeTitle')}
 				</h1>
-				<p class="text-[13px] text-gray-500 dark:text-gray-500 mb-6 leading-relaxed">
+				<p class="text-[0.8125rem] text-gray-500 dark:text-gray-500 mb-6 leading-relaxed">
 					{$t('onboarding.welcomeDesc')}
 				</p>
 
 				<button
-					class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
+					class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
 					onclick={next}
 				>
 					{$t('onboarding.getStarted')}
@@ -126,18 +126,18 @@
 				<h2 class="text-xs text-gray-400 dark:text-gray-600 mb-1">
 					{$t('onboarding.openFolder')}
 				</h2>
-				<p class="text-[13px] text-gray-500 dark:text-gray-500 mb-4 leading-relaxed">
+				<p class="text-[0.8125rem] text-gray-500 dark:text-gray-500 mb-4 leading-relaxed">
 					{$t('onboarding.openFolderDesc')}
 				</p>
 
 				{#if selectedPath}
-					<p class="text-[12px] font-mono text-gray-700 dark:text-gray-300 mb-3">
+					<p class="text-[0.75rem] font-mono text-gray-700 dark:text-gray-300 mb-3">
 						{selectedPath}
 					</p>
 				{/if}
 
 				<button
-					class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
+					class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
 					onclick={() => (showPicker = true)}
 				>
 					{$t('onboarding.openFolder')}
@@ -145,7 +145,7 @@
 
 				<div class="mt-4">
 					<button
-						class="text-[11px] text-gray-400 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 transition-colors duration-100"
+						class="text-[0.6875rem] text-gray-400 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 transition-colors duration-100"
 						onclick={skipFolder}
 					>
 						{$t('onboarding.skip')}
@@ -164,28 +164,28 @@
 				<h2 class="text-xs text-gray-400 dark:text-gray-600 mb-1">
 					{$t('onboarding.connectAi')}
 				</h2>
-				<p class="text-[13px] text-gray-500 dark:text-gray-500 mb-4 leading-relaxed">
+				<p class="text-[0.8125rem] text-gray-500 dark:text-gray-500 mb-4 leading-relaxed">
 					{$t('onboarding.connectAiDesc')}
 				</p>
 
 				{#if aiConnected}
-					<p class="text-[13px] text-gray-700 dark:text-gray-300 mb-4">
+					<p class="text-[0.8125rem] text-gray-700 dark:text-gray-300 mb-4">
 						{$t('onboarding.connected', { name: config.name })}
 					</p>
 					<button
-						class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
+						class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
 						onclick={next}
 					>
 						{$t('onboarding.next')}
 					</button>
 				{:else}
 					<div class="mb-3">
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mb-0.5">
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mb-0.5">
 							{$t('onboarding.provider')}
 						</p>
 						<select
 							bind:value={provider}
-							class="bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 border-none cursor-pointer"
+							class="bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 border-none cursor-pointer"
 						>
 							<option value="openai">OpenAI</option>
 							<option value="anthropic">Anthropic</option>
@@ -194,21 +194,21 @@
 
 					{#if provider === 'openai'}
 						<div class="mb-3">
-							<p class="text-[11px] text-gray-400 dark:text-gray-600 mb-0.5">
+							<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mb-0.5">
 								{$t('onboarding.apiType')}
 							</p>
 							<select
 								bind:value={apiType}
-								class="bg-transparent text-[13px] text-gray-700 dark:text-gray-300 outline-none py-0.5 border-none cursor-pointer"
+								class="bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 outline-none py-0.5 border-none cursor-pointer"
 							>
-								<option value="chat_completions">Chat Completions</option>
-								<option value="responses">Responses</option>
+								<option value="chat_completions">{$t('connections.chatCompletions')}</option>
+								<option value="responses">{$t('connections.responses')}</option>
 							</select>
 						</div>
 					{/if}
 
 					<div class="mb-3">
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mb-0.5">
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mb-0.5">
 							{$t('connections.baseUrl')}
 						</p>
 						<input
@@ -218,7 +218,7 @@
 							autocomplete="off"
 							spellcheck="false"
 							list="setup-base-url-suggestions"
-							class="block w-full bg-transparent text-[13px] font-mono text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+							class="block w-full bg-transparent text-[0.8125rem] font-mono text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 						/>
 						<datalist id="setup-base-url-suggestions">
 							<option value="https://api.openai.com/v1" />
@@ -229,7 +229,7 @@
 					</div>
 
 					<div class="mb-2">
-						<p class="text-[11px] text-gray-400 dark:text-gray-600 mb-0.5">
+						<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mb-0.5">
 							{$t('connections.apiKey')}
 						</p>
 						<input
@@ -237,16 +237,16 @@
 							placeholder={config.placeholder}
 							bind:value={apiKey}
 							autocomplete="new-password"
-							class="block w-full bg-transparent text-[13px] font-mono text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1"
+							class="block w-full bg-transparent text-[0.8125rem] font-mono text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-1"
 						/>
 					</div>
 
-					<p class="text-[11px] text-gray-400 dark:text-gray-600 mb-4">
+					<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600 mb-4">
 						{$t('onboarding.keyStaysLocal')}
 					</p>
 
 					<button
-						class="flex items-center gap-2 text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100
+						class="flex items-center gap-2 text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100
 							disabled:opacity-30 disabled:pointer-events-none"
 						onclick={connectAi}
 						disabled={connecting || !apiKey.trim()}
@@ -260,7 +260,7 @@
 
 					<div class="mt-4">
 						<button
-							class="text-[11px] text-gray-400 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 transition-colors duration-100"
+							class="text-[0.6875rem] text-gray-400 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 transition-colors duration-100"
 							onclick={skipAi}
 						>
 							{$t('onboarding.connectAiSkip')}
@@ -274,24 +274,24 @@
 				<h2 class="text-xs text-gray-400 dark:text-gray-600 mb-1">
 					{$t('onboarding.ready')}
 				</h2>
-				<p class="text-[13px] text-gray-500 dark:text-gray-500 mb-5 leading-relaxed">
+				<p class="text-[0.8125rem] text-gray-500 dark:text-gray-500 mb-5 leading-relaxed">
 					{$t('onboarding.readyDesc')}
 				</p>
 
 				<div class="flex flex-col gap-1.5 mb-6">
-					<p class="text-[12px] text-gray-500 dark:text-gray-500">
+					<p class="text-[0.75rem] text-gray-500 dark:text-gray-500">
 						{$t('onboarding.tipSearch', { shortcut: searchShortcut })}
 					</p>
-					<p class="text-[12px] text-gray-500 dark:text-gray-500">
+					<p class="text-[0.75rem] text-gray-500 dark:text-gray-500">
 						{$t('onboarding.tipTerminal')}
 					</p>
-					<p class="text-[12px] text-gray-500 dark:text-gray-500">
+					<p class="text-[0.75rem] text-gray-500 dark:text-gray-500">
 						{$t('onboarding.tipMobile')}
 					</p>
 				</div>
 
 				<button
-					class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
+					class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
 					onclick={finish}
 				>
 					{$t('onboarding.startUsing')}
@@ -326,7 +326,7 @@
 	@keyframes fadeIn {
 		from {
 			opacity: 0;
-			transform: translateY(4px);
+			transform: translateY(0.25rem);
 		}
 		to {
 			opacity: 1;
diff --git a/cptr/frontend/src/lib/components/ShortcutBar.svelte b/cptr/frontend/src/lib/components/ShortcutBar.svelte
index c9498898..1da2efff 100644
--- a/cptr/frontend/src/lib/components/ShortcutBar.svelte
+++ b/cptr/frontend/src/lib/components/ShortcutBar.svelte
@@ -144,8 +144,8 @@
 		<button
 			class="key inline-flex items-center justify-center"
 			class:active={dictating}
-			aria-label="Dictate terminal input"
-			title="Dictate terminal input"
+			aria-label={i18next.t('terminal.dictateInput')}
+			title={i18next.t('terminal.dictateInput')}
 			onmousedown={(e) => e.preventDefault()}
 			ontouchstart={(e) => {
 				e.preventDefault();
@@ -222,8 +222,8 @@
 	.shortcut-bar {
 		display: flex;
 		align-items: center;
-		gap: 4px;
-		padding: 4px 8px;
+		gap: 0.25rem;
+		padding: 0.25rem 0.5rem;
 		background: var(--color-gray-100);
 		border-top: 1px solid var(--color-gray-200);
 		overflow-x: auto;
@@ -241,17 +241,17 @@
 	}
 
 	.key {
-		padding: 4px 10px;
-		font-size: 12px;
+		padding: 0.25rem 0.625rem;
+		font-size: 0.75rem;
 		font-family: var(--font-mono);
 		font-weight: 500;
-		border-radius: 5px;
+		border-radius: 0.3125rem;
 		color: var(--color-gray-600);
 		background: var(--color-gray-200);
 		white-space: nowrap;
 		flex-shrink: 0;
 		transition: all 0.1s ease;
-		min-width: 32px;
+		min-width: 2rem;
 		text-align: center;
 		-webkit-tap-highlight-color: transparent;
 	}
diff --git a/cptr/frontend/src/lib/components/Sidebar.svelte b/cptr/frontend/src/lib/components/Sidebar.svelte
index 2904f712..3b79a8ea 100644
--- a/cptr/frontend/src/lib/components/Sidebar.svelte
+++ b/cptr/frontend/src/lib/components/Sidebar.svelte
@@ -281,6 +281,7 @@
 		<!-- Logo header with collapse button -->
 		<div
 			class="flex items-center justify-between h-9 pl-3.5 pr-1.5 shrink-0 border-b border-gray-200 dark:border-white/6"
+			style="border-color: var(--app-border);"
 		>
 			<a
 				href="/"
@@ -475,7 +476,7 @@
 							e.stopPropagation();
 							showChangelog.set(true);
 						}}
-						class="ml-auto text-[10px] text-gray-400 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 font-mono hover:underline cursor-pointer"
+						class="ml-auto text-[0.625rem] text-gray-400 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 font-mono hover:underline cursor-pointer"
 					>
 						v{$appVersion}
 					</button>
@@ -562,25 +563,25 @@
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 220px;
+		width: 13.75rem;
 		z-index: 50;
 		display: flex;
 		flex-direction: column;
-		background: white;
-		border-right: 1px solid var(--color-gray-200);
-		padding-top: env(safe-area-inset-top, 0px);
+		background: var(--app-bg);
+		color: var(--app-fg);
+		border-right: 1px solid var(--app-border);
+		padding-top: env(safe-area-inset-top, 0);
 	}
 
 	:global(.dark) .sidebar {
-		background: #000;
-		border-right-color: rgba(255, 255, 255, 0.06);
+		border-right-color: var(--app-border);
 	}
 
 	@media (min-width: 768px) {
 		.sidebar {
 			position: relative;
 			z-index: auto;
-			width: var(--sw, 220px);
+			width: var(--sw, 13.75rem);
 		}
 	}
 
@@ -592,10 +593,10 @@
 		.resize-handle {
 			display: block;
 			position: absolute;
-			right: -3px;
+			right: -0.1875rem;
 			top: 0;
 			bottom: 0;
-			width: 6px;
+			width: 0.375rem;
 			cursor: col-resize;
 			z-index: 10;
 			transition: background 0.15s;
@@ -610,7 +611,7 @@
 	/* ── Workspace chat items ────────────────────────────── */
 
 	.ws-item {
-		margin-bottom: 2px;
+		margin-bottom: 0.125rem;
 	}
 
 	.ws-expand-btn {
@@ -623,8 +624,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 14px;
-		height: 14px;
+		width: 0.875rem;
+		height: 0.875rem;
 		cursor: pointer;
 	}
 
@@ -660,18 +661,18 @@
 	}
 
 	.ws-chats {
-		padding-left: 4px;
-		padding-bottom: 4px;
+		padding-left: 0.25rem;
+		padding-bottom: 0.25rem;
 	}
 
 	.ws-chat-show-more {
 		display: block;
 		width: 100%;
-		padding: 2px 8px;
+		padding: 0.125rem 0.5rem;
 		border: none;
 		background: none;
 		cursor: pointer;
-		font-size: 11px;
+		font-size: 0.6875rem;
 		color: #b0b5be;
 		text-align: left;
 		transition: color 0.1s;
@@ -691,13 +692,13 @@
 
 	.ws-chat-loading {
 		display: flex;
-		gap: 4px;
-		padding: 6px 8px;
+		gap: 0.25rem;
+		padding: 0.375rem 0.5rem;
 	}
 
 	.ws-chat-loading-dot {
-		width: 4px;
-		height: 4px;
+		width: 0.25rem;
+		height: 0.25rem;
 		border-radius: 50%;
 		background: #9ca3af;
 		animation: dotPulse 1s ease-in-out infinite;
diff --git a/cptr/frontend/src/lib/components/SystemInfo.svelte b/cptr/frontend/src/lib/components/SystemInfo.svelte
index 70241ac4..60bca6ca 100644
--- a/cptr/frontend/src/lib/components/SystemInfo.svelte
+++ b/cptr/frontend/src/lib/components/SystemInfo.svelte
@@ -71,8 +71,8 @@
 		{#if sys.cpu_usage != null}
 			<div>
 				<div class="flex items-center justify-between mb-1">
-					<span class="text-[11px] text-gray-500 dark:text-gray-500">{$t('system.cpu')}</span>
-					<span class="text-[11px] text-gray-400 dark:text-gray-600 font-mono"
+					<span class="text-[0.6875rem] text-gray-500 dark:text-gray-500">{$t('system.cpu')}</span>
+					<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600 font-mono"
 						>{sys.cpu_usage}%</span
 					>
 				</div>
@@ -90,8 +90,10 @@
 			{@const memPct = Math.round((memUsed / sys.memory_total) * 100)}
 			<div>
 				<div class="flex items-center justify-between mb-1">
-					<span class="text-[11px] text-gray-500 dark:text-gray-500">{$t('system.memory')}</span>
-					<span class="text-[11px] text-gray-400 dark:text-gray-600 font-mono"
+					<span class="text-[0.6875rem] text-gray-500 dark:text-gray-500"
+						>{$t('system.memory')}</span
+					>
+					<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600 font-mono"
 						>{formatBytes(memUsed)} / {formatBytes(sys.memory_total)}</span
 					>
 				</div>
@@ -108,8 +110,8 @@
 			{@const diskPct = Math.round(((sys.disk_used ?? 0) / sys.disk_total) * 100)}
 			<div>
 				<div class="flex items-center justify-between mb-1">
-					<span class="text-[11px] text-gray-500 dark:text-gray-500">{$t('system.disk')}</span>
-					<span class="text-[11px] text-gray-400 dark:text-gray-600 font-mono"
+					<span class="text-[0.6875rem] text-gray-500 dark:text-gray-500">{$t('system.disk')}</span>
+					<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600 font-mono"
 						>{formatBytes(sys.disk_used ?? 0)} / {formatBytes(sys.disk_total)}</span
 					>
 				</div>
@@ -122,7 +124,9 @@
 			</div>
 		{/if}
 
-		<div class="flex items-center gap-4 text-[11px] text-gray-400 dark:text-gray-600 font-mono">
+		<div
+			class="flex items-center gap-4 text-[0.6875rem] text-gray-400 dark:text-gray-600 font-mono"
+		>
 			<span>{$t('system.cores', { count: sys.cpu_count })}</span>
 			<span>{sys.arch}</span>
 			{#if sys.uptime_seconds}
@@ -135,7 +139,7 @@
 
 		{#if sys.network?.length}
 			<div
-				class="flex flex-wrap gap-x-4 gap-y-0.5 text-[11px] font-mono text-gray-400 dark:text-gray-600"
+				class="flex flex-wrap gap-x-4 gap-y-0.5 text-[0.6875rem] font-mono text-gray-400 dark:text-gray-600"
 			>
 				{#each sys.network as iface}
 					<span>{iface.name} {iface.ip}</span>
@@ -144,7 +148,7 @@
 		{/if}
 
 		{#if processes.length}
-			<div class="mt-1 font-mono text-[11px]">
+			<div class="mt-1 font-mono text-[0.6875rem]">
 				<div class="flex items-center gap-2 text-gray-400 dark:text-gray-600 mb-1">
 					<span class="w-14 text-right">{$t('system.cpuShort')}</span>
 					<span class="w-12 text-right">{$t('system.memoryShort')}</span>
diff --git a/cptr/frontend/src/lib/components/SystemInfoModal.svelte b/cptr/frontend/src/lib/components/SystemInfoModal.svelte
index 03d0b436..ffa6d7be 100644
--- a/cptr/frontend/src/lib/components/SystemInfoModal.svelte
+++ b/cptr/frontend/src/lib/components/SystemInfoModal.svelte
@@ -47,13 +47,13 @@
 	});
 </script>
 
-<Modal {onclose} class="w-full max-w-[420px] mx-4">
+<Modal {onclose} class="w-full max-w-[26.25rem] mx-4">
 	<div class="px-4 py-3.5">
 		<div class="mb-3 flex items-baseline justify-between gap-3">
 			<div class="min-w-0">
 				<h2 class="text-sm font-medium text-gray-900 dark:text-white">{$t('system.infoTitle')}</h2>
 				{#if welcomeData?.hostname}
-					<p class="mt-0.5 truncate font-mono text-[11px] text-gray-400 dark:text-gray-600">
+					<p class="mt-0.5 truncate font-mono text-[0.6875rem] text-gray-400 dark:text-gray-600">
 						{welcomeData.hostname}
 					</p>
 				{/if}
diff --git a/cptr/frontend/src/lib/components/Terminal.svelte b/cptr/frontend/src/lib/components/Terminal.svelte
index 83aefe69..20883555 100644
--- a/cptr/frontend/src/lib/components/Terminal.svelte
+++ b/cptr/frontend/src/lib/components/Terminal.svelte
@@ -6,14 +6,14 @@
 
 	// ── Compact binary WebSocket protocol ─────────────────────
 	// Client → Server:  byte 0 = type, rest = payload
-//   0x00 + raw input bytes (microtask-batched for throughput)
-//   0x02 + uint16 cols + uint16 rows, big-endian (5 bytes total)
-//   0x03 stop, 0x04 force stop
-// Server → Client:  raw PTY output bytes (no prefix)
-const MSG_INPUT = 0;
-const MSG_RESIZE = 2;
-const MSG_STOP = 3;
-const MSG_FORCE_STOP = 4;
+	//   0x00 + raw input bytes (microtask-batched for throughput)
+	//   0x02 + uint16 cols + uint16 rows, big-endian (5 bytes total)
+	//   0x03 stop, 0x04 force stop
+	// Server → Client:  raw PTY output bytes (no prefix)
+	const MSG_INPUT = 0;
+	const MSG_RESIZE = 2;
+	const MSG_STOP = 3;
+	const MSG_FORCE_STOP = 4;
 
 	const textEncoder = new TextEncoder();
 
@@ -38,24 +38,24 @@ const MSG_FORCE_STOP = 4;
 	}
 
 	interface Props {
-	sessionId?: string;
-	wsPath?: string;
-	initialOutput?: string;
-	initialOffset?: number;
-	stopSignal?: number;
-	forceStopSignal?: number;
-	readOnly?: boolean;
-}
-
-let {
-	sessionId = '',
-	wsPath = '',
-	initialOutput = '',
-	initialOffset = 0,
-	stopSignal = 0,
-	forceStopSignal = 0,
-	readOnly = false
-}: Props = $props();
+		sessionId?: string;
+		wsPath?: string;
+		initialOutput?: string;
+		initialOffset?: number;
+		stopSignal?: number;
+		forceStopSignal?: number;
+		readOnly?: boolean;
+	}
+
+	let {
+		sessionId = '',
+		wsPath = '',
+		initialOutput = '',
+		initialOffset = 0,
+		stopSignal = 0,
+		forceStopSignal = 0,
+		readOnly = false
+	}: Props = $props();
 
 	let containerEl: HTMLDivElement | undefined = $state();
 	let term: Terminal | null = null;
@@ -211,23 +211,23 @@ let {
 		ws!.send(resizeBuf);
 	}
 
-let lastStopSignal = 0;
-$effect(() => {
-	if (!stopSignal || stopSignal === lastStopSignal) return;
-	lastStopSignal = stopSignal;
-	if (ws?.readyState === WebSocket.OPEN) {
-		ws.send(new Uint8Array([MSG_STOP]));
-	}
-});
-
-let lastForceStopSignal = 0;
-$effect(() => {
-	if (!forceStopSignal || forceStopSignal === lastForceStopSignal) return;
-	lastForceStopSignal = forceStopSignal;
-	if (ws?.readyState === WebSocket.OPEN) {
-		ws.send(new Uint8Array([MSG_FORCE_STOP]));
-	}
-});
+	let lastStopSignal = 0;
+	$effect(() => {
+		if (!stopSignal || stopSignal === lastStopSignal) return;
+		lastStopSignal = stopSignal;
+		if (ws?.readyState === WebSocket.OPEN) {
+			ws.send(new Uint8Array([MSG_STOP]));
+		}
+	});
+
+	let lastForceStopSignal = 0;
+	$effect(() => {
+		if (!forceStopSignal || forceStopSignal === lastForceStopSignal) return;
+		lastForceStopSignal = forceStopSignal;
+		if (ws?.readyState === WebSocket.OPEN) {
+			ws.send(new Uint8Array([MSG_FORCE_STOP]));
+		}
+	});
 
 	$effect(() => {
 		if (term) term.options.disableStdin = readOnly;
diff --git a/cptr/frontend/src/lib/components/UpdateToast.svelte b/cptr/frontend/src/lib/components/UpdateToast.svelte
index a8707494..f2a7c6ab 100644
--- a/cptr/frontend/src/lib/components/UpdateToast.svelte
+++ b/cptr/frontend/src/lib/components/UpdateToast.svelte
@@ -7,15 +7,9 @@
 	let { onclose }: { onclose: () => void } = $props();
 </script>
 
-<div
-	class="fixed bottom-4 right-4 z-50"
-	in:fade={{ duration: 100 }}
-	out:fade={{ duration: 75 }}
->
-	<div
-		class="flex items-center gap-2 rounded-lg border border-gray-200 dark:border-white/6 bg-white dark:bg-[#1a1a1a] px-3 py-2"
-	>
-		<span class="text-[11px] text-gray-500 dark:text-gray-400">
+<div class="fixed bottom-4 right-4 z-50" in:fade={{ duration: 100 }} out:fade={{ duration: 75 }}>
+	<div class="app-theme app-surface flex items-center gap-2 rounded-lg border px-3 py-2">
+		<span class="app-muted text-[0.6875rem]">
 			{$t('update.available', { version: $latestVersion })}
 		</span>
 
@@ -23,15 +17,15 @@
 			href="https://github.com/open-webui/computer/releases"
 			target="_blank"
 			rel="noopener noreferrer"
-			class="text-[11px] text-gray-900 dark:text-white hover:underline font-medium"
+			class="text-[0.6875rem] hover:underline font-medium"
 		>
 			{$t('update.viewRelease')}
 		</a>
 
 		<button
 			onclick={onclose}
-			class="ml-0.5 flex items-center justify-center w-5 h-5 rounded text-gray-300 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400 transition-colors duration-75"
-			aria-label="Dismiss"
+			class="app-icon-muted app-interactive ml-0.5 flex items-center justify-center w-5 h-5 rounded transition-colors duration-75"
+			aria-label={$t('a11y.dismissNotification')}
 		>
 			<Icon name="xmark" size={12} />
 		</button>
diff --git a/cptr/frontend/src/lib/components/VoiceMemoModal.svelte b/cptr/frontend/src/lib/components/VoiceMemoModal.svelte
index 4574d0f4..90630482 100644
--- a/cptr/frontend/src/lib/components/VoiceMemoModal.svelte
+++ b/cptr/frontend/src/lib/components/VoiceMemoModal.svelte
@@ -232,7 +232,7 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<Modal onclose={phase === 'recording' ? cancel : onclose} class="w-full max-w-[260px] mx-4">
+<Modal onclose={phase === 'recording' ? cancel : onclose} class="w-full max-w-[16.25rem] mx-4">
 	<div
 		class="px-4 py-3.5"
 		onkeydown={(e) => {
@@ -259,11 +259,11 @@
 
 			<div class="flex items-center justify-end gap-3 mt-3">
 				<button
-					class="text-[13px] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
+					class="text-[0.8125rem] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
 					onclick={cancel}>{$t('common.cancel')}</button
 				>
 				<button
-					class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
+					class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
 					onclick={stop}>{$t('voiceMemo.done')}</button
 				>
 			</div>
@@ -279,7 +279,9 @@
 				</p>
 			{/if}
 
-			<label class="text-[10px] text-gray-400 dark:text-gray-600">{$t('voiceMemo.filename')}</label>
+			<label class="text-[0.625rem] text-gray-400 dark:text-gray-600"
+				>{$t('voiceMemo.filename')}</label
+			>
 			<input
 				bind:this={filenameInput}
 				type="text"
@@ -287,9 +289,9 @@
 				placeholder={$t('voiceMemo.filenamePlaceholder')}
 				autocomplete="off"
 				spellcheck="false"
-				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+				class="block w-full bg-transparent text-[0.8125rem] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 			/>
-			<p class="text-[10px] text-gray-300 dark:text-gray-700 mt-0.5">
+			<p class="text-[0.625rem] text-gray-300 dark:text-gray-700 mt-0.5">
 				{directory.split('/').pop()}
 			</p>
 
@@ -297,7 +299,7 @@
 				<button
 					onclick={save}
 					disabled={!fileName.trim()}
-					class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
+					class="text-[0.8125rem] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
 					>{$t('common.save')} →</button
 				>
 			</div>
diff --git a/cptr/frontend/src/lib/components/WorkspacePicker.svelte b/cptr/frontend/src/lib/components/WorkspacePicker.svelte
index 47297b37..9d5ddcf3 100644
--- a/cptr/frontend/src/lib/components/WorkspacePicker.svelte
+++ b/cptr/frontend/src/lib/components/WorkspacePicker.svelte
@@ -43,7 +43,7 @@
 
 <Modal
 	onclose={oncancel}
-	class="w-full max-w-[560px] mx-4 max-md:mx-0 max-md:rounded-none max-h-[480px] max-md:max-h-dvh flex flex-col mb-[6vh] max-md:mb-0"
+	class="w-full max-w-[35rem] mx-4 max-md:mx-0 max-md:rounded-none max-h-[30rem] max-md:max-h-dvh flex flex-col mb-[6vh] max-md:mb-0"
 >
 	<div class="flex items-center px-3.5 py-3 gap-2">
 		<div class="flex-1 min-w-0">
@@ -53,7 +53,10 @@
 
 	{#if needsShareBehavior}
 		<div class="flex items-center gap-3 px-3.5 pb-2">
-			<label class="text-[11px] text-gray-400 dark:text-gray-600 shrink-0" for="share-behavior">
+			<label
+				class="text-[0.6875rem] text-gray-400 dark:text-gray-600 shrink-0"
+				for="share-behavior"
+			>
 				{$t('pwa.shareBehavior')}
 			</label>
 			<select
@@ -80,7 +83,7 @@
 				>
 					<span class="text-xs shrink-0 truncate max-w-[34%]">{ws.name}</span>
 					<span
-						class="text-[11px] text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap font-mono"
+						class="text-[0.6875rem] text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap font-mono"
 					>
 						{ws.path}
 					</span>
diff --git a/cptr/frontend/src/lib/components/automations/AutomationModal.svelte b/cptr/frontend/src/lib/components/automations/AutomationModal.svelte
index db19f05c..a4dad1da 100644
--- a/cptr/frontend/src/lib/components/automations/AutomationModal.svelte
+++ b/cptr/frontend/src/lib/components/automations/AutomationModal.svelte
@@ -108,7 +108,7 @@
 
 		<!-- Prompt -->
 		<div class="px-5 pb-2">
-			<div class="mb-1 text-[11px] text-gray-400 dark:text-gray-500">
+			<div class="mb-1 text-[0.6875rem] text-gray-400 dark:text-gray-500">
 				{$t('automationModal.instructions')}
 			</div>
 			<textarea
@@ -133,11 +133,11 @@
 				<button
 					bind:this={workspaceButtonEl}
 					type="button"
-					class="flex items-center gap-1 px-2 py-1 rounded-lg text-[11px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors duration-100"
+					class="flex items-center gap-1 px-2 py-1 rounded-lg text-[0.6875rem] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors duration-100"
 					onclick={() => (showWsMenu = !showWsMenu)}
 				>
 					<Icon name="folder" size={12} />
-					<span class="truncate max-w-[120px]">{selectedWorkspaceName}</span>
+					<span class="truncate max-w-[7.5rem]">{selectedWorkspaceName}</span>
 					<svg
 						class="w-3 h-3 opacity-50"
 						viewBox="0 0 24 24"
diff --git a/cptr/frontend/src/lib/components/automations/AutomationsPanel.svelte b/cptr/frontend/src/lib/components/automations/AutomationsPanel.svelte
index 0d7a80c5..aa6a96a5 100644
--- a/cptr/frontend/src/lib/components/automations/AutomationsPanel.svelte
+++ b/cptr/frontend/src/lib/components/automations/AutomationsPanel.svelte
@@ -253,7 +253,7 @@
 				<!-- Info rows -->
 				<div class="border-b border-gray-200 dark:border-white/6">
 					<div class="flex items-center h-7 px-3">
-						<span class="text-[11px] text-gray-400 dark:text-gray-500 w-20 shrink-0"
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-500 w-20 shrink-0"
 							>{$t('automations.status')}</span
 						>
 						<div class="flex items-center gap-1.5">
@@ -268,7 +268,7 @@
 						</div>
 					</div>
 					<div class="flex items-center h-7 px-3">
-						<span class="text-[11px] text-gray-400 dark:text-gray-500 w-20 shrink-0"
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-500 w-20 shrink-0"
 							>{$t('automations.schedule')}</span
 						>
 						<span class="text-xs text-gray-700 dark:text-gray-300"
@@ -276,15 +276,15 @@
 						>
 					</div>
 					<div class="flex items-center h-7 px-3">
-						<span class="text-[11px] text-gray-400 dark:text-gray-500 w-20 shrink-0"
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-500 w-20 shrink-0"
 							>{$t('automations.model')}</span
 						>
-						<span class="text-[11px] text-gray-500 dark:text-gray-400 font-mono"
+						<span class="text-[0.6875rem] text-gray-500 dark:text-gray-400 font-mono"
 							>{detail.model_id}</span
 						>
 					</div>
 					<div class="flex items-center h-7 px-3">
-						<span class="text-[11px] text-gray-400 dark:text-gray-500 w-20 shrink-0"
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-500 w-20 shrink-0"
 							>{$t('automations.nextRun')}</span
 						>
 						<span class="text-xs text-gray-700 dark:text-gray-300"
@@ -292,7 +292,7 @@
 						>
 					</div>
 					<div class="flex items-center h-7 px-3">
-						<span class="text-[11px] text-gray-400 dark:text-gray-500 w-20 shrink-0"
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-500 w-20 shrink-0"
 							>{$t('automations.lastRun')}</span
 						>
 						<span class="text-xs text-gray-700 dark:text-gray-300"
@@ -300,16 +300,16 @@
 						>
 					</div>
 					<div class="flex items-center min-h-[1.75rem] px-3">
-						<span class="text-[11px] text-gray-400 dark:text-gray-500 w-20 shrink-0"
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-500 w-20 shrink-0"
 							>{$t('automations.webhook')}</span
 						>
 						{#if detail.webhook_url}
 							<div class="flex items-center gap-1.5 min-w-0 flex-1">
-								<span class="text-[11px] text-gray-500 dark:text-gray-400 font-mono truncate"
+								<span class="text-[0.6875rem] text-gray-500 dark:text-gray-400 font-mono truncate"
 									>...?token={detail.webhook_url.split('token=')[1]?.slice(0, 12)}...</span
 								>
 								<button
-									class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75 shrink-0"
+									class="text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75 shrink-0"
 									onclick={copyWebhookUrl}
 								>
 									{webhookCopied ? $t('automations.copied') : $t('automations.copy')}
@@ -318,12 +318,12 @@
 						{:else if detail.has_webhook}
 							<!-- Webhook enabled, URL not available -->
 							<div class="flex items-center gap-1.5">
-								<span class="text-[11px] text-gray-700 dark:text-gray-300"
+								<span class="text-[0.6875rem] text-gray-700 dark:text-gray-300"
 									>{$t('automations.enabled')}</span
 								>
 								<span class="text-gray-300 dark:text-gray-600">·</span>
 								<button
-									class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75"
+									class="text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75"
 									onclick={handleGenerateWebhook}
 									disabled={webhookLoading}
 								>
@@ -331,7 +331,7 @@
 								</button>
 								<span class="text-gray-300 dark:text-gray-600">·</span>
 								<button
-									class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75"
+									class="text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75"
 									onclick={handleRevokeWebhook}
 									disabled={webhookLoading}
 								>
@@ -340,7 +340,7 @@
 							</div>
 						{:else}
 							<button
-								class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75"
+								class="text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75"
 								onclick={handleGenerateWebhook}
 								disabled={webhookLoading}
 							>
@@ -352,7 +352,7 @@
 
 				<!-- Prompt -->
 				<div class="border-b border-gray-200 dark:border-white/6 px-3 py-2">
-					<div class="text-[11px] text-gray-400 dark:text-gray-500 mb-1">
+					<div class="text-[0.6875rem] text-gray-400 dark:text-gray-500 mb-1">
 						{$t('automations.prompt')}
 					</div>
 					<div
@@ -364,11 +364,11 @@
 
 				<!-- Runs -->
 				<div class="px-3 py-2">
-					<div class="text-[11px] text-gray-400 dark:text-gray-500 mb-1">
+					<div class="text-[0.6875rem] text-gray-400 dark:text-gray-500 mb-1">
 						{$t('automations.runs')}
 					</div>
 					{#if runs.length === 0}
-						<div class="text-[11px] text-gray-400 dark:text-gray-600 py-2">
+						<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600 py-2">
 							{$t('automations.noRuns')}
 						</div>
 					{:else}
@@ -382,7 +382,7 @@
 								<span class="text-gray-500 dark:text-gray-400">{formatTime(run.created_at)}</span>
 								{#if run.chat_id}
 									<button
-										class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75"
+										class="text-[0.6875rem] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-75"
 										onclick={() => {
 											const workspacePath = detail?.workspace;
 											const workspaceQuery = workspacePath
@@ -395,7 +395,7 @@
 									</button>
 								{/if}
 								{#if run.error}
-									<span class="text-[11px] text-red-400 truncate" title={run.error}
+									<span class="text-[0.6875rem] text-red-400 truncate" title={run.error}
 										>{run.error}</span
 									>
 								{/if}
@@ -424,12 +424,12 @@
 			{/if}
 			<span class="text-xs text-gray-900 dark:text-white">{$t('automations.title')}</span>
 			{#if total > 0}
-				<span class="text-[11px] text-gray-400 dark:text-gray-600">{total}</span>
+				<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600">{total}</span>
 			{/if}
 
 			<div class="ml-auto flex items-center gap-1">
 				<select
-					class="text-[11px] bg-transparent text-gray-400 dark:text-gray-500 outline-none cursor-pointer"
+					class="text-[0.6875rem] bg-transparent text-gray-400 dark:text-gray-500 outline-none cursor-pointer"
 					bind:value={statusFilter}
 					onchange={loadList}
 				>
@@ -513,11 +513,11 @@
 						>
 							{a.name}
 						</button>
-						<span class="text-[11px] text-gray-400 dark:text-gray-600 shrink-0"
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600 shrink-0"
 							>{getPathDisplayName(a.workspace, a.workspace)}</span
 						>
-						<span class="text-[11px] text-gray-400 dark:text-gray-600 shrink-0">·</span>
-						<span class="text-[11px] text-gray-400 dark:text-gray-600 shrink-0"
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600 shrink-0">·</span>
+						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600 shrink-0"
 							>{parseFrequency(a.rrule)}</span
 						>
 
diff --git a/cptr/frontend/src/lib/components/automations/ScheduleDropdown.svelte b/cptr/frontend/src/lib/components/automations/ScheduleDropdown.svelte
index f551036a..c2c530f2 100644
--- a/cptr/frontend/src/lib/components/automations/ScheduleDropdown.svelte
+++ b/cptr/frontend/src/lib/components/automations/ScheduleDropdown.svelte
@@ -14,23 +14,23 @@
 
 	type Frequency = 'ONCE' | 'HOURLY' | 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'CUSTOM';
 
-	const FREQUENCIES: { key: Frequency; label: string }[] = [
-		{ key: 'ONCE', label: 'Once' },
-		{ key: 'HOURLY', label: 'Hourly' },
-		{ key: 'DAILY', label: 'Daily' },
-		{ key: 'WEEKLY', label: 'Weekly' },
-		{ key: 'MONTHLY', label: 'Monthly' },
-		{ key: 'CUSTOM', label: 'Custom' }
+	const FREQUENCIES: { key: Frequency; labelKey: string }[] = [
+		{ key: 'ONCE', labelKey: 'automations.once' },
+		{ key: 'HOURLY', labelKey: 'automations.hourly' },
+		{ key: 'DAILY', labelKey: 'automations.daily' },
+		{ key: 'WEEKLY', labelKey: 'automations.weekly' },
+		{ key: 'MONTHLY', labelKey: 'automations.monthly' },
+		{ key: 'CUSTOM', labelKey: 'automations.custom' }
 	];
 
 	const DAYS = [
-		{ key: 'MO', label: 'Mo' },
-		{ key: 'TU', label: 'Tu' },
-		{ key: 'WE', label: 'We' },
-		{ key: 'TH', label: 'Th' },
-		{ key: 'FR', label: 'Fr' },
-		{ key: 'SA', label: 'Sa' },
-		{ key: 'SU', label: 'Su' }
+		{ key: 'MO', labelKey: 'automations.dayMo' },
+		{ key: 'TU', labelKey: 'automations.dayTu' },
+		{ key: 'WE', labelKey: 'automations.dayWe' },
+		{ key: 'TH', labelKey: 'automations.dayTh' },
+		{ key: 'FR', labelKey: 'automations.dayFr' },
+		{ key: 'SA', labelKey: 'automations.daySa' },
+		{ key: 'SU', labelKey: 'automations.daySu' }
 	];
 
 	let frequency = $state<Frequency>('DAILY');
@@ -126,19 +126,7 @@
 	}
 
 	let scheduleLabel = $derived(
-		frequency === 'ONCE'
-			? 'Once'
-			: frequency === 'HOURLY'
-				? 'Hourly'
-				: frequency === 'DAILY'
-					? 'Daily'
-					: frequency === 'WEEKLY'
-						? 'Weekly'
-						: frequency === 'MONTHLY'
-							? 'Monthly'
-							: frequency === 'CUSTOM'
-								? 'Custom'
-								: 'Schedule'
+		$t(FREQUENCIES.find((item) => item.key === frequency)?.labelKey ?? 'automations.schedule')
 	);
 </script>
 
@@ -147,13 +135,34 @@
 		bind:this={triggerEl}
 		type="button"
 		class="schedule-trigger"
-		onclick={() => { updatePosition(); showDropdown = !showDropdown; }}
+		onclick={() => {
+			updatePosition();
+			showDropdown = !showDropdown;
+		}}
 	>
-		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3.5 h-3.5">
-			<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="w-3.5 h-3.5"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+			/>
 		</svg>
 		<span>{scheduleLabel}</span>
-		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-2.5 h-2.5">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="2"
+			stroke="currentColor"
+			class="w-2.5 h-2.5"
+		>
 			<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
 		</svg>
 	</button>
@@ -168,7 +177,7 @@
 		style="left:{panelX}px; top:{panelY}px;"
 		onmousedown={(e) => e.stopPropagation()}
 	>
-		<div class="px-2 text-xs text-gray-500 pt-1">Schedule</div>
+		<div class="px-2 text-xs text-gray-500 pt-1">{$t('automations.schedule')}</div>
 
 		<div class="px-1.5 py-0.5">
 			<select
@@ -177,7 +186,7 @@
 				onchange={emitChange}
 			>
 				{#each FREQUENCIES as f}
-					<option value={f.key}>{f.label}</option>
+					<option value={f.key}>{$t(f.labelKey)}</option>
 				{/each}
 			</select>
 		</div>
@@ -211,7 +220,7 @@
 		{:else if frequency !== 'HOURLY'}
 			<div class="flex gap-2 flex-wrap items-center px-3 pb-2 text-xs">
 				<div class="flex items-center gap-1.5">
-					<span class="text-xs text-gray-500 mr-0.5">Time</span>
+					<span class="text-xs text-gray-500 mr-0.5">{$t('automations.time')}</span>
 					<input
 						type="time"
 						value={`${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`}
@@ -227,7 +236,7 @@
 
 				{#if frequency === 'MONTHLY'}
 					<div class="flex items-center gap-1.5">
-						<span class="text-xs text-gray-500">Day</span>
+						<span class="text-xs text-gray-500">{$t('automations.day')}</span>
 						<input
 							type="number"
 							bind:value={monthDay}
@@ -250,7 +259,7 @@
 								: 'text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-200'}"
 							onclick={() => toggleDay(d.key)}
 						>
-							{d.label}
+							{$t(d.labelKey)}
 						</button>
 					{/each}
 				</div>
@@ -269,10 +278,10 @@
 	.schedule-trigger {
 		display: flex;
 		align-items: center;
-		gap: 6px;
-		padding: 4px 10px;
-		border-radius: 16px;
-		font-size: 12px;
+		gap: 0.375rem;
+		padding: 0.25rem 0.625rem;
+		border-radius: 1rem;
+		font-size: 0.75rem;
 		color: var(--color-gray-600);
 		transition: background 0.1s;
 	}
@@ -293,13 +302,13 @@
 		position: fixed;
 		z-index: 201;
 		width: 12rem;
-		padding: 4px;
-		border-radius: 16px;
+		padding: 0.25rem;
+		border-radius: 1rem;
 		background: white;
 		border: 1px solid var(--color-gray-200);
 		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -2px rgba(0, 0, 0, 0.1);
+			0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1),
+			0 0.125rem 0.25rem -0.125rem rgba(0, 0, 0, 0.1);
 	}
 
 	:global(.dark) .schedule-panel {
diff --git a/cptr/frontend/src/lib/components/chat/AssistantMessage.svelte b/cptr/frontend/src/lib/components/chat/AssistantMessage.svelte
index 5d528955..0a00b29d 100644
--- a/cptr/frontend/src/lib/components/chat/AssistantMessage.svelte
+++ b/cptr/frontend/src/lib/components/chat/AssistantMessage.svelte
@@ -365,9 +365,7 @@
 	{#if edit}
 		<!-- Edit mode -->
 		<div class="w-full">
-			<div
-				class="bg-gray-50 dark:bg-white/4 rounded-xl border border-gray-200 dark:border-white/8 px-3.5 py-2.5"
-			>
+			<div class="app-subtle-surface rounded-xl border px-3.5 py-2.5">
 				{#if editedOutput}
 					<OutputEditView
 						output={editedOutput}
@@ -379,14 +377,14 @@
 					<textarea
 						bind:this={textareaEl}
 						bind:value={editedContent}
-						class="w-full bg-transparent outline-none resize-none text-[13px] leading-relaxed text-gray-900 dark:text-gray-200"
+						class="w-full bg-transparent outline-none resize-none text-[0.8125rem] leading-relaxed text-gray-900 dark:text-gray-200"
 						oninput={autoResize}
 						onkeydown={handleKeydown}
 						rows="1"
 					></textarea>
 				{/if}
 			</div>
-			<div class="flex justify-between mt-2 text-[12px] font-medium">
+			<div class="flex justify-between mt-2 text-[0.75rem] font-medium">
 				<button
 					class="px-3 py-1 rounded-lg text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-100"
 					onclick={saveAsCopy}>{$t('chat.saveAs')}</button
@@ -408,7 +406,7 @@
 		<div>
 			{#if !done && (!output || output.length === 0)}
 				<MarkdownRenderer {content} /><span
-					class="inline-block w-[2px] h-3.5 bg-gray-400 dark:bg-gray-500 ml-0.5 animate-pulse align-text-bottom"
+					class="inline-block w-[0.125rem] h-3.5 bg-gray-400 dark:bg-gray-500 ml-0.5 animate-pulse align-text-bottom"
 				></span>
 			{:else}
 				{#if done && displayItems.length === 0 && content}
@@ -428,7 +426,7 @@
 						border border-gray-200 dark:border-white/8
 						hover:border-gray-300 dark:hover:border-white/12
 						hover:bg-gray-50/50 dark:hover:bg-white/[0.03]
-						transition-colors duration-150 {preview ? 'h-[70px]' : 'h-[38px]'}"
+						transition-colors duration-150 {preview ? 'h-[4.375rem]' : 'h-[2.375rem]'}"
 							onclick={() => {
 								const ws = get(currentWorkspace);
 								if (ws && artifact.path) {
@@ -446,7 +444,7 @@
 								{#if preview}
 									<div class="h-8 overflow-hidden">
 										<div
-											class="line-clamp-2 break-words text-[10px] leading-4 font-normal text-gray-400 dark:text-gray-500"
+											class="line-clamp-2 break-words text-[0.625rem] leading-4 font-normal text-gray-400 dark:text-gray-500"
 										>
 											{preview}
 										</div>
@@ -514,7 +512,7 @@
 						<MarkdownRenderer content={leftoverText} />
 					{/if}
 					<span
-						class="inline-block w-[2px] h-3.5 bg-gray-400 dark:bg-gray-500 ml-0.5 animate-pulse align-text-bottom"
+						class="inline-block w-[0.125rem] h-3.5 bg-gray-400 dark:bg-gray-500 ml-0.5 animate-pulse align-text-bottom"
 					></span>
 				{/if}
 			{/if}
@@ -539,7 +537,7 @@
 							/></svg
 						>
 					</button>
-					<span class="text-[11px] tabular-nums text-gray-400 dark:text-gray-600 select-none"
+					<span class="text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
 						>{siblingIndex + 1}/{siblingTotal}</span
 					>
 					<button
@@ -672,9 +670,9 @@
 							<div
 								class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 z-50
 									bg-gray-900 dark:bg-gray-800 text-gray-100 dark:text-gray-100
-									rounded-lg shadow-lg px-2.5 py-1.5 text-[10px] font-mono
+									rounded-lg shadow-lg px-2.5 py-1.5 text-[0.625rem] font-mono
 									whitespace-nowrap pointer-events-none
-									min-w-[160px] border border-transparent dark:border-gray-700"
+									min-w-[10rem] border border-transparent dark:border-gray-700"
 							>
 								<div class="space-y-0.5">
 									{#each Object.entries(usage) as [key, value]}
@@ -689,9 +687,9 @@
 								<!-- Arrow -->
 								<div
 									class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0
-									border-l-[5px] border-l-transparent
-									border-r-[5px] border-r-transparent
-									border-t-[5px] border-t-gray-900 dark:border-t-gray-800"
+									border-l-[0.3125rem] border-l-transparent
+									border-r-[0.3125rem] border-r-transparent
+									border-t-[0.3125rem] border-t-gray-900 dark:border-t-gray-800"
 								></div>
 							</div>
 						{/if}
diff --git a/cptr/frontend/src/lib/components/chat/ChatHistory.svelte b/cptr/frontend/src/lib/components/chat/ChatHistory.svelte
index 9b5f74f6..127bd7a0 100644
--- a/cptr/frontend/src/lib/components/chat/ChatHistory.svelte
+++ b/cptr/frontend/src/lib/components/chat/ChatHistory.svelte
@@ -95,7 +95,7 @@
 		<!-- Sort header -->
 		{#if onsort}
 			<div
-				class="flex items-center text-[10px] font-medium text-gray-400 dark:text-gray-600 mb-1 px-2 select-none"
+				class="flex items-center text-[0.625rem] font-medium text-gray-400 dark:text-gray-600 mb-1 px-2 select-none"
 			>
 				<button
 					class="flex-1 flex items-center gap-1 hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
@@ -131,11 +131,7 @@
 		{/if}
 
 		{#each chats as chat (chat.id)}
-			<ChatItem
-				{chat}
-				onclick={() => onopen(chat.id)}
-				onmenu={(e) => openMenu(e, chat.id)}
-			/>
+			<ChatItem {chat} onclick={() => onopen(chat.id)} onmenu={(e) => openMenu(e, chat.id)} />
 		{/each}
 		{#if onpagechange}
 			<Pagination {page} {totalPages} {onpagechange} />
@@ -159,4 +155,3 @@
 		onclose={closeMenu}
 	/>
 {/if}
-
diff --git a/cptr/frontend/src/lib/components/chat/ChatInput.svelte b/cptr/frontend/src/lib/components/chat/ChatInput.svelte
index 6d0c5329..98ba7ae8 100644
--- a/cptr/frontend/src/lib/components/chat/ChatInput.svelte
+++ b/cptr/frontend/src/lib/components/chat/ChatInput.svelte
@@ -973,7 +973,7 @@
 	<!-- Queued messages (above input, matching open-webui layout) -->
 	{#if queuedMessages.length > 0}
 		<div
-			class="mb-1 mx-2 py-0.5 px-1.5 rounded-2xl border border-gray-100 dark:border-white/5 overflow-x-hidden overflow-y-auto max-h-[25vh]"
+			class="app-subtle-surface mb-1 mx-2 py-0.5 px-1.5 rounded-2xl border overflow-x-hidden overflow-y-auto max-h-[25vh]"
 		>
 			{#each queuedMessages as qm (qm.id)}
 				<QueuedMessageItem
@@ -989,20 +989,18 @@
 
 	{#if showSlashCommands}
 		<div
-			class="absolute left-2 bottom-full mb-1 z-50 w-60 max-h-40 overflow-y-auto rounded-xl bg-white dark:bg-[#1a1a1a] border border-gray-150 dark:border-white/6 shadow-xl p-0.5"
+			class="app-theme app-surface absolute left-2 bottom-full mb-1 z-50 w-60 max-h-40 overflow-y-auto rounded-xl border shadow-xl p-0.5"
 		>
-			<div
-				class="mb-0.5 px-2 pt-1 pb-0.5 text-[10px] leading-none text-gray-400 dark:text-gray-600"
-			>
-				Commands
+			<div class="app-muted mb-0.5 px-2 pt-1 pb-0.5 text-[0.625rem] leading-none">
+				{$t('chat.commands')}
 			</div>
 			{#if slashCommandIds.includes('compact')}
 				<button
 					type="button"
-					class="flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
+					class="slash-command-row flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
 						{slashCommandIds[selectedSlashCommandIndex] === 'compact'
-						? 'bg-gray-50 dark:bg-white/5 text-gray-900 dark:text-white'
-						: 'text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white'} disabled:opacity-50"
+						? 'app-interactive-active'
+						: ''} disabled:opacity-50"
 					disabled={sending || streaming}
 					onmousedown={(e) => e.preventDefault()}
 					onclick={() => {
@@ -1010,9 +1008,7 @@
 					}}
 					onmouseenter={() => (selectedSlashCommandIndex = slashCommandIds.indexOf('compact'))}
 				>
-					<span
-						class="flex items-center justify-center w-4 shrink-0 text-gray-400 dark:text-gray-500"
-					>
+					<span class="app-icon-muted flex items-center justify-center w-4 shrink-0">
 						<svg class="size-3.5 -rotate-90" viewBox="0 0 20 20" aria-hidden="true">
 							<circle
 								cx="10"
@@ -1038,7 +1034,7 @@
 					</span>
 					<span class="flex-1 min-w-0 flex items-baseline gap-1.5 overflow-hidden">
 						<span class="truncate">{$t('chat.commandCompact')}</span>
-						<span class="text-[10px] text-gray-400 dark:text-gray-600 truncate shrink-0">
+						<span class="app-muted text-[0.625rem] truncate shrink-0">
 							{$t('chat.commandCompactPercent', { percent: contextPercent })}
 						</span>
 					</span>
@@ -1047,19 +1043,15 @@
 			{#if slashCommandIds.includes('plan')}
 				<button
 					type="button"
-					class="flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
-						{slashCommandIds[selectedSlashCommandIndex] === 'plan'
-						? 'bg-gray-50 dark:bg-white/5 text-gray-900 dark:text-white'
-						: 'text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white'}"
+					class="slash-command-row flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
+						{slashCommandIds[selectedSlashCommandIndex] === 'plan' ? 'app-interactive-active' : ''}"
 					onmousedown={(e) => e.preventDefault()}
 					onclick={() => {
 						runSlashCommand('plan');
 					}}
 					onmouseenter={() => (selectedSlashCommandIndex = slashCommandIds.indexOf('plan'))}
 				>
-					<span
-						class="flex items-center justify-center w-4 shrink-0 text-gray-400 dark:text-gray-500"
-					>
+					<span class="app-icon-muted flex items-center justify-center w-4 shrink-0">
 						<svg
 							class="size-3.5"
 							viewBox="0 0 24 24"
@@ -1078,7 +1070,7 @@
 					</span>
 					<span class="flex-1 min-w-0 flex items-baseline gap-1.5 overflow-hidden">
 						<span class="truncate">{$t('chat.commandPlan')}</span>
-						<span class="text-[10px] text-gray-400 dark:text-gray-600 truncate shrink-0">
+						<span class="app-muted text-[0.625rem] truncate shrink-0">
 							{$planMode ? $t('chat.commandPlanOn') : $t('chat.commandPlanOff')}
 						</span>
 					</span>
@@ -1087,19 +1079,15 @@
 			{#if slashCommandIds.includes('status')}
 				<button
 					type="button"
-					class="flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
-						{slashCommandIds[selectedSlashCommandIndex] === 'status'
-						? 'bg-gray-50 dark:bg-white/5 text-gray-900 dark:text-white'
-						: 'text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white'}"
+					class="slash-command-row flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
+						{slashCommandIds[selectedSlashCommandIndex] === 'status' ? 'app-interactive-active' : ''}"
 					onmousedown={(e) => e.preventDefault()}
 					onclick={() => {
 						runSlashCommand('status');
 					}}
 					onmouseenter={() => (selectedSlashCommandIndex = slashCommandIds.indexOf('status'))}
 				>
-					<span
-						class="flex items-center justify-center w-4 shrink-0 text-gray-400 dark:text-gray-500"
-					>
+					<span class="app-icon-muted flex items-center justify-center w-4 shrink-0">
 						<svg
 							class="size-3.5"
 							viewBox="0 0 24 24"
@@ -1116,7 +1104,7 @@
 					</span>
 					<span class="flex-1 min-w-0 flex items-baseline gap-1.5 overflow-hidden">
 						<span class="truncate">{$t('chat.commandStatus')}</span>
-						<span class="text-[10px] text-gray-400 dark:text-gray-600 truncate shrink-0">
+						<span class="app-muted text-[0.625rem] truncate shrink-0">
 							{$t('chat.commandStatusDesc')}
 						</span>
 					</span>
@@ -1125,9 +1113,7 @@
 		</div>
 	{/if}
 
-	<div
-		class="rounded-3xl shadow-lg border border-gray-100/40 dark:border-white/4 focus-within:border-gray-200/50 focus-within:dark:border-white/8 transition px-1 bg-white dark:bg-gray-500/5"
-	>
+	<div class="app-surface rounded-3xl shadow-lg border transition px-1">
 		<!-- Uploaded Files Preview -->
 		{#if attachedUploads.length > 0}
 			<div class="mx-2 pt-2 flex flex-wrap gap-2">
@@ -1135,7 +1121,7 @@
 					<div class="relative group flex-shrink-0">
 						{#if upload.loading}
 							<div
-								class="flex items-center justify-center size-8 bg-gray-50 dark:bg-white/5 rounded-xl border border-gray-200 dark:border-white/10 shadow-sm"
+								class="app-subtle-surface flex items-center justify-center size-8 rounded-xl border shadow-sm"
 							>
 								<Spinner size={16} />
 							</div>
@@ -1143,21 +1129,19 @@
 							<img
 								src={upload.url}
 								alt={upload.name}
-								class="size-8 object-cover rounded-xl border border-gray-200 dark:border-white/10 shadow-sm"
+								class="app-surface size-8 object-cover rounded-xl border shadow-sm"
 							/>
 						{:else}
 							<div
-								class="relative group px-2 w-48 h-8 flex items-center gap-1.5 bg-white dark:bg-[#1a1a1a] border border-gray-100 dark:border-white/5 rounded-xl text-left flex-shrink-0 shadow-sm"
+								class="app-surface relative group px-2 w-48 h-8 flex items-center gap-1.5 border rounded-xl text-left flex-shrink-0 shadow-sm"
 							>
 								<div class="shrink-0">
-									<Icon name="page-text" size={14} class="text-gray-500 dark:text-gray-400" />
+									<Icon name="page-text" size={14} class="app-icon-muted" />
 								</div>
 								<div class="flex flex-col justify-center w-full overflow-hidden">
-									<div
-										class="dark:text-gray-100 text-xs flex justify-between items-center w-full gap-2"
-									>
+									<div class="text-xs flex justify-between items-center w-full gap-2">
 										<div class="font-medium truncate flex-1">{upload.name}</div>
-										<div class="text-[10px] text-gray-500 capitalize shrink-0">
+										<div class="app-muted text-[0.625rem] capitalize shrink-0">
 											{upload.type === 'file' ? 'File' : upload.type}
 										</div>
 									</div>
@@ -1167,7 +1151,7 @@
 
 						<div class="absolute -top-1.5 -right-1.5 z-10">
 							<button
-								class="bg-white text-black border border-white rounded-full group-hover:visible invisible transition outline-none shadow-sm flex items-center justify-center"
+								class="app-surface border rounded-full group-hover:visible invisible transition outline-none shadow-sm flex items-center justify-center"
 								type="button"
 								onclick={() => removeUpload(upload.id)}
 								aria-label={$t('chat.removeUpload')}
@@ -1192,9 +1176,7 @@
 		<!-- Editor area -->
 		<div class="px-2.5">
 			{#if $voiceModeEnabled}
-				<div
-					class="pt-2 flex items-center gap-2 text-[11px] font-medium text-gray-600 dark:text-gray-300"
-				>
+				<div class="app-muted pt-2 flex items-center gap-2 text-[0.6875rem] font-medium">
 					<span class="relative flex size-2">
 						<span
 							class="absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-70 {voiceListening
@@ -1232,8 +1214,9 @@
 				{#if $planMode}
 					<button
 						type="button"
-						class="group p-[5px] flex gap-1 items-center text-xs rounded-full transition-colors duration-150
-						text-gray-600 dark:text-gray-300 bg-gray-50 hover:bg-gray-100 dark:bg-white/8 dark:hover:bg-white/12 border border-gray-200 dark:border-white/8"
+						aria-label={$t('chat.commandPlanOff')}
+						title={$t('chat.commandPlanOff')}
+						class="app-surface app-interactive group p-[0.3125rem] flex gap-1 items-center text-xs rounded-full transition-colors duration-150 border"
 						onclick={() => planMode.set(false)}
 					>
 						<svg
@@ -1291,13 +1274,16 @@
 	/* ── ProseMirror editor ───────────────────────── */
 
 	.chat-editor-mount :global(.chat-prosemirror) {
-		@apply pt-2.5 pb-2 px-1 min-h-6 max-h-96 overflow-y-auto text-[13px] leading-relaxed text-gray-900 dark:text-gray-100 outline-none break-words;
+		@apply pt-2.5 pb-2 px-1 min-h-6 max-h-96 overflow-y-auto text-[0.8125rem] leading-relaxed outline-none break-words;
+		font-size: 0.8125rem;
+		color: var(--app-fg);
 	}
 
 	/* Placeholder */
 	.chat-editor-mount :global(.chat-prosemirror p.is-editor-empty:first-child::before) {
 		content: attr(data-placeholder);
-		@apply float-left text-gray-400 dark:text-gray-600 pointer-events-none h-0;
+		@apply float-left pointer-events-none h-0;
+		color: color-mix(in oklab, var(--app-fg) 48%, var(--app-bg));
 	}
 
 	/* Paragraphs */
@@ -1322,12 +1308,14 @@
 
 	/* Inline code */
 	.chat-editor-mount :global(.chat-prosemirror code) {
-		@apply bg-gray-100 dark:bg-white/8 rounded-sm px-1 py-px text-xs font-mono;
+		@apply rounded-sm px-1 py-px text-xs font-mono;
+		background: color-mix(in oklab, var(--app-fg) 7%, transparent);
 	}
 
 	/* Code blocks */
 	.chat-editor-mount :global(.chat-prosemirror pre) {
-		@apply bg-gray-100 dark:bg-white/4 rounded-md px-3 py-2 overflow-x-auto my-1 text-xs font-mono;
+		@apply rounded-md px-3 py-2 overflow-x-auto my-1 text-xs font-mono;
+		background: color-mix(in oklab, var(--app-fg) 5%, transparent);
 	}
 	.chat-editor-mount :global(.chat-prosemirror pre code) {
 		@apply bg-transparent p-0 rounded-none text-inherit;
@@ -1335,7 +1323,9 @@
 
 	/* Blockquote */
 	.chat-editor-mount :global(.chat-prosemirror blockquote) {
-		@apply my-1 py-0.5 pl-3 border-l-2 border-gray-300 dark:border-white/12 text-gray-500 dark:text-gray-400;
+		@apply my-1 py-0.5 pl-3 border-l-2;
+		border-color: color-mix(in oklab, var(--app-fg) 18%, transparent);
+		color: color-mix(in oklab, var(--app-fg) 62%, var(--app-bg));
 	}
 
 	/* Strong */
@@ -1351,12 +1341,14 @@
 		@apply text-sm font-semibold my-1;
 	}
 	.chat-editor-mount :global(.chat-prosemirror h3) {
-		@apply text-[13px] font-semibold my-1;
+		@apply text-[0.8125rem] font-semibold my-1;
+		font-size: 0.8125rem;
 	}
 
 	/* HR */
 	.chat-editor-mount :global(.chat-prosemirror hr) {
-		@apply border-none border-t border-gray-200 dark:border-white/8 my-2;
+		@apply border-none border-t my-2;
+		border-color: color-mix(in oklab, var(--app-fg) 10%, transparent);
 	}
 
 	/* Syntax highlighting */
diff --git a/cptr/frontend/src/lib/components/chat/ChatPanel.svelte b/cptr/frontend/src/lib/components/chat/ChatPanel.svelte
index 280a566e..7e813ce2 100644
--- a/cptr/frontend/src/lib/components/chat/ChatPanel.svelte
+++ b/cptr/frontend/src/lib/components/chat/ChatPanel.svelte
@@ -295,7 +295,9 @@
 	const summaryCount = $derived(runningCommandSessions.length);
 	const statusButtonClass =
 		'text-gray-400 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-gray-300';
-	const statusTitle = $derived(summaryCount > 0 ? `${summaryCount} active command session` : 'Status');
+	const statusTitle = $derived(
+		summaryCount > 0 ? `${summaryCount} active command session` : 'Status'
+	);
 
 	// Queued messages: user-authored messages waiting behind an active response.
 	const queuedMessages = $derived(
@@ -1412,12 +1414,18 @@
 	}
 </script>
 
-<div class="relative flex h-full flex-col bg-white dark:bg-black">
+<div
+	class="app-theme relative flex h-full flex-col"
+	style="background: var(--app-bg); color: var(--app-fg);"
+>
 	{#if !isLanding}
 		<div
 			class="flex h-7 shrink-0 items-center gap-2 border-b border-gray-100 px-3 dark:border-white/6"
+			style="border-color: color-mix(in oklab, var(--app-fg) 8%, transparent);"
 		>
-			<div class="min-w-0 flex-1 truncate text-[11px] font-medium text-gray-600 dark:text-gray-400">
+			<div
+				class="min-w-0 flex-1 truncate text-[0.6875rem] font-medium text-gray-600 dark:text-gray-400"
+			>
 				{displayChatTitle}
 			</div>
 			<button
@@ -1483,7 +1491,12 @@
 				<Spinner size={24} />
 			</div>
 		{:else}
-			<div bind:this={messagesEl} class="flex-1 overflow-y-auto" onscroll={handleMessagesScroll}>
+			<div
+				bind:this={messagesEl}
+				class="flex-1 overflow-y-auto"
+				style="background: var(--app-bg); color: var(--app-fg);"
+				onscroll={handleMessagesScroll}
+			>
 				<div class="max-w-2xl mx-auto px-4 pt-4 pb-16 flex flex-col gap-4">
 					{#if hasHiddenMessages}
 						<div bind:this={loadSentinelEl} class="h-1 w-full" aria-hidden="true"></div>
@@ -1522,14 +1535,14 @@
 		{/if}
 
 		<!-- Input area -->
-		<div class="px-4 py-3">
+		<div class="px-4 py-3" style="background: var(--app-bg);">
 			<div class="max-w-2xl mx-auto relative">
 				{#if !autoScroll && activePath.length > 0}
 					<div
 						class="absolute -top-10 left-0 right-0 pr-2 flex justify-end z-30 pointer-events-none"
 					>
 						<button
-							class="bg-white dark:bg-white/20 border border-gray-200 dark:border-gray-700 p-1 rounded-full pointer-events-auto shadow-sm hover:bg-gray-50 dark:hover:bg-white/30 transition-colors"
+							class="app-surface app-interactive border p-1 rounded-full pointer-events-auto shadow-sm transition-colors"
 							onclick={() => {
 								autoScroll = true;
 								scrollToBottom();
diff --git a/cptr/frontend/src/lib/components/chat/ConsecutiveActivityGroup.svelte b/cptr/frontend/src/lib/components/chat/ConsecutiveActivityGroup.svelte
index 6ae54393..61a03999 100644
--- a/cptr/frontend/src/lib/components/chat/ConsecutiveActivityGroup.svelte
+++ b/cptr/frontend/src/lib/components/chat/ConsecutiveActivityGroup.svelte
@@ -238,7 +238,7 @@
 					</span>
 					<span class="flex gap-1 shrink-0">
 						<button
-							class="text-[11px] px-2.5 py-0.5 rounded-md
+							class="text-[0.6875rem] px-2.5 py-0.5 rounded-md
 							text-gray-600 dark:text-gray-300
 							bg-gray-100 dark:bg-white/8
 							hover:bg-gray-200 dark:hover:bg-white/12
@@ -246,7 +246,7 @@
 							onclick={() => onapprove(messageId, item.call_id, true)}>{$t('chat.allow')}</button
 						>
 						<button
-							class="text-[11px] px-2 py-0.5 rounded-md
+							class="text-[0.6875rem] px-2 py-0.5 rounded-md
 							text-gray-400 dark:text-gray-500
 							hover:text-gray-600 dark:hover:text-gray-300
 							transition-colors duration-100"
diff --git a/cptr/frontend/src/lib/components/chat/FileSuggestionPopup.svelte b/cptr/frontend/src/lib/components/chat/FileSuggestionPopup.svelte
index 3b2725de..4eac1ea5 100644
--- a/cptr/frontend/src/lib/components/chat/FileSuggestionPopup.svelte
+++ b/cptr/frontend/src/lib/components/chat/FileSuggestionPopup.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Icon from '../Icon.svelte';
 	import { fileIconName } from '$lib/utils/fileIcon';
+	import { t } from '$lib/i18n';
 
 	interface SuggestionItem {
 		id: string;
@@ -34,41 +35,33 @@
 </script>
 
 <div
-	class="fixed z-50 w-60 max-h-40 overflow-y-auto rounded-xl bg-white dark:bg-[#1a1a1a] border border-gray-150 dark:border-white/6 shadow-xl p-0.5"
+	class="app-theme app-surface fixed z-50 w-60 max-h-40 overflow-y-auto rounded-xl border shadow-xl p-0.5"
 >
 	{#if items.length === 0}
-		<div class="flex items-center h-6 px-2 text-xs text-gray-400 dark:text-gray-600">
-			No files found
-		</div>
+		<div class="app-muted flex items-center h-6 px-2 text-xs">{$t('quickOpen.noFiles')}</div>
 	{:else}
-		<div class="mb-0.5 px-2 pt-1 pb-0.5 text-[10px] leading-none text-gray-400 dark:text-gray-600">
-			Files
+		<div class="app-muted mb-0.5 px-2 pt-1 pb-0.5 text-[0.625rem] leading-none">
+			{$t('search.files')}
 		</div>
 		<div bind:this={listEl}>
 			{#each items as item, i (item.id)}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<button
-					class="flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
-						{i === selectedIndex
-						? 'bg-gray-50 dark:bg-white/5 text-gray-900 dark:text-white'
-						: 'text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white'}"
+					class="suggestion-row flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
+						{i === selectedIndex ? 'app-interactive-active' : ''}"
 					onmousedown={(e) => {
 						e.preventDefault();
 						onselect(i);
 					}}
 					onmouseenter={() => (selectedIndex = i)}
 				>
-					<span
-						class="flex items-center justify-center w-4 shrink-0 {item.type === 'directory'
-							? 'text-gray-500 dark:text-gray-400'
-							: 'text-gray-400 dark:text-gray-500'}"
-					>
+					<span class="app-icon-muted flex items-center justify-center w-4 shrink-0">
 						<Icon name={fileIconName(item.label, item.type)} size={14} />
 					</span>
 					<span class="flex-1 min-w-0 flex items-baseline gap-1.5 overflow-hidden">
 						<span class="truncate">{item.label}</span>
 						{#if relativePath(item.id)}
-							<span class="text-[10px] text-gray-400 dark:text-gray-600 truncate shrink-0"
+							<span class="app-muted text-[0.625rem] truncate shrink-0"
 								>{relativePath(item.id)}</span
 							>
 						{/if}
@@ -78,3 +71,14 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.suggestion-row {
+		color: color-mix(in oklab, var(--app-fg) 62%, var(--app-bg));
+	}
+
+	.suggestion-row:hover {
+		background: color-mix(in oklab, var(--app-fg) 6%, transparent);
+		color: var(--app-fg);
+	}
+</style>
diff --git a/cptr/frontend/src/lib/components/chat/OutputEditView.svelte b/cptr/frontend/src/lib/components/chat/OutputEditView.svelte
index b8d2dfbf..c19baa3e 100644
--- a/cptr/frontend/src/lib/components/chat/OutputEditView.svelte
+++ b/cptr/frontend/src/lib/components/chat/OutputEditView.svelte
@@ -37,9 +37,9 @@
 					json(),
 					editorTheme.of(isDark ? oneDark : []),
 					EditorView.theme({
-						'&': { fontSize: '13px' },
+						'&': { fontSize: '0.8125rem' },
 						'.cm-content': { fontFamily: 'ui-monospace, monospace' },
-						'.cm-scroller': { maxHeight: '320px', overflow: 'auto' },
+						'.cm-scroller': { maxHeight: '20rem', overflow: 'auto' },
 						'&.cm-focused': { outline: 'none' }
 					}),
 					EditorView.updateListener.of((e) => {
@@ -237,7 +237,7 @@
 					<!-- Role label -->
 					<div class="flex items-start pt-1.5">
 						<div
-							class="text-[11px] font-semibold uppercase tracking-wide min-w-[4.5rem] text-gray-400 dark:text-gray-500"
+							class="text-[0.6875rem] font-semibold uppercase tracking-wide min-w-[4.5rem] text-gray-400 dark:text-gray-500"
 						>
 							{getItemLabel(di)}
 						</div>
@@ -315,7 +315,9 @@
 			{/each}
 
 			{#if displayItems.length === 0}
-				<div class="text-sm text-gray-400 dark:text-gray-500 italic px-1">No output items</div>
+				<div class="text-sm text-gray-400 dark:text-gray-500 italic px-1">
+					{$t('chat.noOutputItems')}
+				</div>
 			{/if}
 		</div>
 	{/if}
diff --git a/cptr/frontend/src/lib/components/chat/PlusMenu.svelte b/cptr/frontend/src/lib/components/chat/PlusMenu.svelte
index 37d64b61..202eab70 100644
--- a/cptr/frontend/src/lib/components/chat/PlusMenu.svelte
+++ b/cptr/frontend/src/lib/components/chat/PlusMenu.svelte
@@ -39,9 +39,7 @@
 		}))
 	);
 
-	const paramCount = $derived(
-		paramRows.filter((r) => r.key.trim()).length
-	);
+	const paramCount = $derived(paramRows.filter((r) => r.key.trim()).length);
 
 	const canAddParam = $derived(
 		paramRows.length === 0 || paramRows.every((r) => r.key.trim() || r.value.trim())
@@ -229,7 +227,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		bind:this={menuEl}
-		class="fixed z-[101] w-56 rounded-xl bg-white dark:bg-[#1a1a1a] border border-gray-150 dark:border-white/6 shadow-xl p-0.5 overflow-hidden"
+		class="app-theme app-surface fixed z-[101] w-56 rounded-xl border shadow-xl p-0.5 overflow-hidden"
 		style="left: {pos.x}px; bottom: {pos.bottom}px; opacity: {ready ? 1 : 0}; pointer-events: {ready
 			? 'auto'
 			: 'none'};"
@@ -271,13 +269,15 @@
 						stroke-linecap="round"
 						stroke-linejoin="round"
 					>
-						<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+						<path
+							d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
+						/>
 						<circle cx="12" cy="13" r="4" />
 					</svg>
 					<span class="flex-1 text-left truncate">{$t('plusMenu.capture')}</span>
 				</button>
 
-				<div class="h-px bg-gray-100/50 dark:bg-white/3 mx-1 my-0.5"></div>
+				<div class="app-divider h-px mx-1 my-0.5"></div>
 
 				<!-- Plan mode toggle -->
 				<button
@@ -302,7 +302,7 @@
 					<ToggleSwitch value={$planMode} onchange={(v) => planMode.set(v)} />
 				</button>
 
-				<div class="h-px bg-gray-100/50 dark:bg-white/3 mx-1 my-0.5"></div>
+				<div class="app-divider h-px mx-1 my-0.5"></div>
 
 				<button
 					class="flex items-center gap-2 w-full h-7 px-2 rounded-xl text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white transition-colors duration-75"
@@ -310,13 +310,13 @@
 				>
 					<Icon name="shield" size={14} />
 					<span class="flex-1 text-left truncate">{$t('plusMenu.toolPermissions')}</span>
-					<span class="text-[10px] text-gray-400 dark:text-gray-500 truncate max-w-16"
+					<span class="text-[0.625rem] text-gray-400 dark:text-gray-500 truncate max-w-16"
 						>{currentModeLabel}</span
 					>
 					<Icon name="chevron-right" size={12} class="shrink-0 text-gray-400 dark:text-gray-500" />
 				</button>
 
-				<div class="h-px bg-gray-100/50 dark:bg-white/3 mx-1 my-0.5"></div>
+				<div class="app-divider h-px mx-1 my-0.5"></div>
 
 				<button
 					class="flex items-center gap-2 w-full h-7 px-2 rounded-xl text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white transition-colors duration-75"
@@ -332,11 +332,13 @@
 						stroke-linejoin="round"
 					>
 						<circle cx="12" cy="12" r="3" />
-						<path 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 4.68 15a1.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 9 4.68a1.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 19.4 9a1.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
+							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 4.68 15a1.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 9 4.68a1.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 19.4 9a1.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"
+						/>
 					</svg>
 					<span class="flex-1 text-left truncate">{$t('plusMenu.parameters')}</span>
 					{#if paramCount > 0}
-						<span class="text-[10px] text-gray-400 dark:text-gray-500">{paramCount}</span>
+						<span class="text-[0.625rem] text-gray-400 dark:text-gray-500">{paramCount}</span>
 					{/if}
 					<Icon name="chevron-right" size={12} class="shrink-0 text-gray-400 dark:text-gray-500" />
 				</button>
@@ -352,7 +354,7 @@
 					<span class="flex-1 text-left font-medium">{$t('plusMenu.toolPermissions')}</span>
 				</button>
 
-				<div class="h-px bg-gray-100/50 dark:bg-white/3 mx-1 my-0.5"></div>
+				<div class="app-divider h-px mx-1 my-0.5"></div>
 
 				{#each modes as mode}
 					<button
@@ -391,10 +393,14 @@
 					<span class="flex-1 text-left font-medium">{$t('plusMenu.parameters')}</span>
 				</button>
 
-				<div class="h-px bg-gray-100/50 dark:bg-white/3 mx-1 my-0.5"></div>
+				<div class="app-divider h-px mx-1 my-0.5"></div>
 
 				{#if paramRows.length === 0}
-					<p class="px-2 h-7 flex items-center justify-center text-[11px] text-gray-400 dark:text-gray-500">{$t('plusMenu.noParams')}</p>
+					<p
+						class="px-2 h-7 flex items-center justify-center text-[0.6875rem] text-gray-400 dark:text-gray-500"
+					>
+						{$t('plusMenu.noParams')}
+					</p>
 				{:else}
 					<div class="px-0.5 py-0.5 flex flex-col max-h-48 overflow-y-auto">
 						{#each paramRows as row, i}
@@ -406,7 +412,7 @@
 									onblur={syncParams}
 									autocomplete="off"
 									spellcheck="false"
-									class="w-[72px] shrink-0 bg-transparent text-[11px] font-mono text-gray-600 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-600 outline-none"
+									class="w-[4.5rem] shrink-0 bg-transparent text-[0.6875rem] font-mono text-gray-600 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-600 outline-none"
 								/>
 								<input
 									type="text"
@@ -415,7 +421,7 @@
 									onblur={syncParams}
 									autocomplete="off"
 									spellcheck="false"
-									class="flex-1 min-w-0 bg-transparent text-[11px] font-mono text-gray-600 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-600 outline-none"
+									class="flex-1 min-w-0 bg-transparent text-[0.6875rem] font-mono text-gray-600 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-600 outline-none"
 								/>
 								<button
 									type="button"
@@ -457,7 +463,7 @@
 	@keyframes slideFromLeft {
 		from {
 			opacity: 0;
-			transform: translateX(-12px);
+			transform: translateX(-0.75rem);
 		}
 		to {
 			opacity: 1;
@@ -468,7 +474,7 @@
 	@keyframes slideFromRight {
 		from {
 			opacity: 0;
-			transform: translateX(12px);
+			transform: translateX(0.75rem);
 		}
 		to {
 			opacity: 1;
diff --git a/cptr/frontend/src/lib/components/chat/ReasoningCollapsible.svelte b/cptr/frontend/src/lib/components/chat/ReasoningCollapsible.svelte
index 4459aef9..2cd3c591 100644
--- a/cptr/frontend/src/lib/components/chat/ReasoningCollapsible.svelte
+++ b/cptr/frontend/src/lib/components/chat/ReasoningCollapsible.svelte
@@ -58,7 +58,7 @@
 				</span>
 			</div>
 
-			<div class="flex shrink-0 self-center translate-y-[1px]">
+			<div class="flex shrink-0 self-center translate-y-[0.0625rem]">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
diff --git a/cptr/frontend/src/lib/components/chat/SendButton.svelte b/cptr/frontend/src/lib/components/chat/SendButton.svelte
index 24e127e8..f26dbaab 100644
--- a/cptr/frontend/src/lib/components/chat/SendButton.svelte
+++ b/cptr/frontend/src/lib/components/chat/SendButton.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { t } from '$lib/i18n';
+
 	interface Props {
 		canSend: boolean;
 		streaming: boolean;
@@ -35,8 +37,8 @@
 			? 'bg-gray-900 text-white dark:bg-white dark:text-black'
 			: 'bg-gray-100 text-gray-800 hover:bg-gray-200 dark:bg-white/90 dark:text-black dark:hover:bg-white'}"
 		onclick={onvoice}
-		aria-label="Voice mode"
-		title="Voice mode"
+		aria-label={$t('admin.audio.voiceMode')}
+		title={$t('admin.audio.voiceMode')}
 	>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/cptr/frontend/src/lib/components/chat/SkillSuggestionPopup.svelte b/cptr/frontend/src/lib/components/chat/SkillSuggestionPopup.svelte
index 265eee64..bbf39810 100644
--- a/cptr/frontend/src/lib/components/chat/SkillSuggestionPopup.svelte
+++ b/cptr/frontend/src/lib/components/chat/SkillSuggestionPopup.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { t } from '$lib/i18n';
+
 	interface SuggestionItem {
 		id: string;
 		label: string;
@@ -25,24 +27,20 @@
 </script>
 
 <div
-	class="fixed z-50 w-60 max-h-40 overflow-y-auto rounded-xl bg-white dark:bg-[#1a1a1a] border border-gray-150 dark:border-white/6 shadow-xl p-0.5"
+	class="app-theme app-surface fixed z-50 w-60 max-h-40 overflow-y-auto rounded-xl border shadow-xl p-0.5"
 >
 	{#if items.length === 0}
-		<div class="flex items-center h-6 px-2 text-xs text-gray-400 dark:text-gray-600">
-			No skills found
-		</div>
+		<div class="app-muted flex items-center h-6 px-2 text-xs">{$t('chat.noSkillsFound')}</div>
 	{:else}
-		<div class="px-2 pt-1 pb-0.5 text-[10px] leading-none text-gray-400 dark:text-gray-600">
-			Skills
+		<div class="app-muted px-2 pt-1 pb-0.5 text-[0.625rem] leading-none">
+			{$t('chat.skills')}
 		</div>
 		<div bind:this={listEl}>
 			{#each items as item, i (item.id)}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<button
-					class="flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
-						{i === selectedIndex
-						? 'bg-gray-50 dark:bg-white/5 text-gray-900 dark:text-white'
-						: 'text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white'}"
+					class="suggestion-row flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
+						{i === selectedIndex ? 'app-interactive-active' : ''}"
 					onmousedown={(e) => {
 						e.preventDefault();
 						onselect(i);
@@ -50,9 +48,7 @@
 					onmouseenter={() => (selectedIndex = i)}
 					title={item.description}
 				>
-					<span
-						class="flex items-center justify-center w-4 shrink-0 text-gray-400 dark:text-gray-500"
-					>
+					<span class="app-icon-muted flex items-center justify-center w-4 shrink-0">
 						<svg viewBox="0 0 16 16" fill="currentColor" class="size-3.5">
 							<path
 								d="M8.75 1a.75.75 0 0 0-1.5 0v1.249c-1.373.158-2.476.682-3.33 1.536C3.066 4.639 2.5 5.77 2.5 7.25c0 1.296-.266 2.193-.613 2.852-.35.663-.83 1.132-1.268 1.507a.75.75 0 0 0 .494 1.315h3.137a3.75 3.75 0 0 0 7.5 0h3.137a.75.75 0 0 0 .494-1.315c-.438-.375-.919-.844-1.268-1.507-.347-.659-.613-1.556-.613-2.852 0-1.48-.566-2.611-1.42-3.465-.854-.854-1.957-1.378-3.33-1.536V1ZM6.5 12.924a2.25 2.25 0 0 0 3 0h-3Z"
@@ -62,9 +58,7 @@
 					<span class="flex-1 min-w-0 flex items-baseline gap-1.5 overflow-hidden">
 						<span class="truncate">{item.label}</span>
 						{#if item.source && item.source !== 'workspace'}
-							<span class="text-[10px] text-gray-400 dark:text-gray-600 truncate shrink-0"
-								>{item.source}</span
-							>
+							<span class="app-muted text-[0.625rem] truncate shrink-0">{item.source}</span>
 						{/if}
 					</span>
 				</button>
@@ -72,3 +66,14 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.suggestion-row {
+		color: color-mix(in oklab, var(--app-fg) 62%, var(--app-bg));
+	}
+
+	.suggestion-row:hover {
+		background: color-mix(in oklab, var(--app-fg) 6%, transparent);
+		color: var(--app-fg);
+	}
+</style>
diff --git a/cptr/frontend/src/lib/components/chat/StatusModal.svelte b/cptr/frontend/src/lib/components/chat/StatusModal.svelte
index 70999dff..4eec0c84 100644
--- a/cptr/frontend/src/lib/components/chat/StatusModal.svelte
+++ b/cptr/frontend/src/lib/components/chat/StatusModal.svelte
@@ -84,8 +84,10 @@
 
 	function statusLabel(session: CommandSession): string {
 		if (!session.done) return elapsedLabel(session.created_at);
-		if (session.exit_code && session.exit_code !== 0) return `Failed ${session.exit_code}`;
-		return 'Finished';
+		if (session.exit_code && session.exit_code !== 0) {
+			return $t('chat.failedWithCode', { code: session.exit_code });
+		}
+		return $t('chat.finished');
 	}
 
 	function terminateSelectedSession() {
@@ -114,17 +116,19 @@
 {#if selectedSession}
 	<Modal
 		{onclose}
-		class="mx-4 flex h-[min(760px,82dvh)] w-full max-w-[min(960px,calc(100vw-2rem))] flex-col overflow-hidden max-sm:mx-0 max-sm:h-[100dvh] max-sm:max-w-none max-sm:rounded-none"
+		class="mx-4 flex h-[min(47.5rem,82dvh)] w-full max-w-[min(60rem,calc(100vw-2rem))] flex-col overflow-hidden max-sm:mx-0 max-sm:h-[100dvh] max-sm:max-w-none max-sm:rounded-none"
 	>
 		<div class="flex h-full min-h-0 flex-col overflow-hidden">
-			<div class="flex h-9 shrink-0 items-center gap-3 border-b border-gray-100 px-3 dark:border-white/8">
+			<div
+				class="flex h-9 shrink-0 items-center gap-3 border-b border-gray-100 px-3 dark:border-white/8"
+			>
 				<button
 					type="button"
 					class="flex h-7 shrink-0 items-center gap-1.5 rounded-lg pr-2 text-xs text-gray-400 transition-colors duration-75 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
 					onclick={onclose}
 				>
 					<Icon name="chevron-left" size={12} />
-					<span>Back</span>
+					<span>{$t('settings.back')}</span>
 				</button>
 				<div class="min-w-0 flex-1">
 					<div class="truncate font-mono text-xs font-medium text-gray-900 dark:text-white">
@@ -134,14 +138,14 @@
 				<button
 					type="button"
 					class="h-7 shrink-0 px-1.5 text-xs text-gray-400 underline-offset-2 transition-colors duration-75 hover:text-gray-700 hover:underline disabled:cursor-default disabled:text-gray-300 disabled:no-underline dark:text-gray-600 dark:hover:text-gray-200 dark:disabled:text-gray-700"
-					title={terminatingSelectedSession ? 'Terminating' : 'Force terminate'}
+					title={terminatingSelectedSession ? $t('chat.terminating') : $t('chat.forceTerminate')}
 					disabled={terminatingSelectedSession}
 					onclick={terminateSelectedSession}
 				>
-					{terminatingSelectedSession ? 'Terminating' : 'Terminate'}
+					{terminatingSelectedSession ? $t('chat.terminating') : $t('chat.terminate')}
 				</button>
 			</div>
-			<div class="min-h-0 flex-1 bg-white dark:bg-black">
+			<div class="min-h-0 flex-1" style="background: var(--app-bg); color: var(--app-fg);">
 				<Terminal
 					wsPath={`/api/terminal/sessions/${selectedSession.command_session_id}/ws`}
 					initialOutput={selectedSession.output ?? ''}
@@ -160,33 +164,35 @@
 		align="end"
 		className="w-80 max-w-[calc(100vw-1.5rem)] p-0"
 	>
-		<div class="max-h-[70dvh] overflow-y-auto px-1 py-0.5 text-xs sm:max-h-[min(72dvh,520px)]">
+		<div class="max-h-[70dvh] overflow-y-auto px-1 py-0.5 text-xs sm:max-h-[min(72dvh,32.5rem)]">
 			{#if missingSessionId}
 				<div
-					class="rounded-xl px-1.5 py-1.5 text-[11px] leading-relaxed text-gray-400 dark:text-gray-600"
+					class="rounded-xl px-1.5 py-1.5 text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600"
 				>
-					Live session unavailable. Saved output remains in the chat.
+					{$t('chat.sessionUnavailable')}
 				</div>
 			{/if}
 
 			{#if runningSessions.length}
 				<section>
 					<div
-						class="px-1.5 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-600"
+						class="px-1.5 pb-0.5 pt-1.5 text-[0.625rem] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-600"
 					>
-						Sessions
+						{$t('chat.sessions')}
 					</div>
 					{#each runningSessions as session}
-						<div class="flex h-7 min-w-0 items-center gap-3 rounded-xl px-1.5 text-gray-600 dark:text-gray-400">
+						<div
+							class="flex h-7 min-w-0 items-center gap-3 rounded-xl px-1.5 text-gray-600 dark:text-gray-400"
+						>
 							<button
 								type="button"
-								class="min-w-0 flex-1 truncate text-left font-mono text-[11px] text-gray-400 underline-offset-2 transition-colors duration-75 hover:text-gray-700 hover:underline dark:text-gray-600 dark:hover:text-gray-200"
+								class="min-w-0 flex-1 truncate text-left font-mono text-[0.6875rem] text-gray-400 underline-offset-2 transition-colors duration-75 hover:text-gray-700 hover:underline dark:text-gray-600 dark:hover:text-gray-200"
 								title={shortCommand(session.command)}
 								onclick={() => (selectedSessionId = session.command_session_id)}
 							>
 								{sessionLabel(session)}
 							</button>
-							<span class="shrink-0 text-[10px] text-gray-400 dark:text-gray-600">
+							<span class="shrink-0 text-[0.625rem] text-gray-400 dark:text-gray-600">
 								{statusLabel(session)}
 							</span>
 						</div>
@@ -197,8 +203,8 @@
 			<section>
 				<div class="rounded-xl px-1.5 py-1.5 text-gray-600 dark:text-gray-400">
 					<div class="flex h-5 items-center gap-3">
-						<span class="min-w-0 flex-1 truncate">Context</span>
-						<span class="shrink-0 font-mono text-[10px] text-gray-400 dark:text-gray-600">
+						<span class="min-w-0 flex-1 truncate">{$t('chat.statusContextUsage')}</span>
+						<span class="shrink-0 font-mono text-[0.625rem] text-gray-400 dark:text-gray-600">
 							{contextValue}
 						</span>
 					</div>
@@ -211,29 +217,35 @@
 				</div>
 
 				{#if queuedMessages.length}
-					<div class="flex h-7 items-center gap-3 rounded-xl px-1.5 text-gray-600 dark:text-gray-400">
-						<span class="min-w-0 flex-1 truncate">Queued messages</span>
-						<span class="font-mono text-[10px] text-gray-400 dark:text-gray-600">
+					<div
+						class="flex h-7 items-center gap-3 rounded-xl px-1.5 text-gray-600 dark:text-gray-400"
+					>
+						<span class="min-w-0 flex-1 truncate">{$t('chat.queuedMessages')}</span>
+						<span class="font-mono text-[0.625rem] text-gray-400 dark:text-gray-600">
 							{queuedMessages.length}
 						</span>
 					</div>
 				{/if}
 
 				{#if chatId}
-					<div class="flex h-7 items-center gap-3 rounded-xl px-1.5 text-gray-600 dark:text-gray-400">
-						<span class="min-w-0 flex-1 truncate">Chat ID</span>
+					<div
+						class="flex h-7 items-center gap-3 rounded-xl px-1.5 text-gray-600 dark:text-gray-400"
+					>
+						<span class="min-w-0 flex-1 truncate">{$t('chat.statusChatId')}</span>
 						<button
 							type="button"
-							class="min-w-0 max-w-[11rem] truncate font-mono text-[10px] text-gray-400 underline-offset-2 transition-colors duration-75 hover:text-gray-700 hover:underline dark:text-gray-600 dark:hover:text-gray-200"
+							class="min-w-0 max-w-[11rem] truncate font-mono text-[0.625rem] text-gray-400 underline-offset-2 transition-colors duration-75 hover:text-gray-700 hover:underline dark:text-gray-600 dark:hover:text-gray-200"
 							onclick={copyChatId}
 						>
 							{copied ? $t('about.copied') : chatId}
 						</button>
 					</div>
 				{:else}
-					<div class="flex h-7 items-center gap-3 rounded-xl px-1.5 text-gray-600 dark:text-gray-400">
-						<span class="min-w-0 flex-1 truncate">Chat ID</span>
-						<span class="font-mono text-[10px] text-gray-400 dark:text-gray-600">
+					<div
+						class="flex h-7 items-center gap-3 rounded-xl px-1.5 text-gray-600 dark:text-gray-400"
+					>
+						<span class="min-w-0 flex-1 truncate">{$t('chat.statusChatId')}</span>
+						<span class="font-mono text-[0.625rem] text-gray-400 dark:text-gray-600">
 							{$t('chat.statusNoChat')}
 						</span>
 					</div>
diff --git a/cptr/frontend/src/lib/components/chat/ToolCallCollapsible.svelte b/cptr/frontend/src/lib/components/chat/ToolCallCollapsible.svelte
index 6f1d1a65..69c56ff1 100644
--- a/cptr/frontend/src/lib/components/chat/ToolCallCollapsible.svelte
+++ b/cptr/frontend/src/lib/components/chat/ToolCallCollapsible.svelte
@@ -56,7 +56,6 @@
 			toggleExpanded();
 		}
 	}
-
 </script>
 
 <div class="w-full min-w-0 flex flex-col">
@@ -156,7 +155,7 @@
 			{#if isPending && chatId}
 				<span class="flex gap-1 shrink-0">
 					<button
-						class="text-[11px] px-2.5 py-0.5 rounded-md
+						class="text-[0.6875rem] px-2.5 py-0.5 rounded-md
 						text-gray-600 dark:text-gray-300
 						bg-gray-100 dark:bg-white/8
 						hover:bg-gray-200 dark:hover:bg-white/12
@@ -167,7 +166,7 @@
 						}}>{$t('chat.allow')}</button
 					>
 					<button
-						class="text-[11px] px-2 py-0.5 rounded-md
+						class="text-[0.6875rem] px-2 py-0.5 rounded-md
 						text-gray-400 dark:text-gray-500
 						hover:text-gray-600 dark:hover:text-gray-300
 						transition-colors duration-100"
@@ -204,13 +203,13 @@
 				{#if Object.keys(args).length > 0}
 					<div>
 						<div
-							class="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1.5 px-1"
+							class="text-[0.625rem] uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1.5 px-1"
 						>
 							{$t('chat.toolInput')}
 						</div>
 						{#if toolName === 'edit_file' && args.target}
 							<div
-								class="text-[11px] font-mono rounded-lg overflow-hidden border border-gray-200/60 dark:border-white/6"
+								class="text-[0.6875rem] font-mono rounded-lg overflow-hidden border border-gray-200/60 dark:border-white/6"
 							>
 								<div
 									class="bg-red-50/80 dark:bg-red-950/20 text-red-700 dark:text-red-400 px-2.5 py-1 whitespace-pre-wrap break-all leading-relaxed"
@@ -231,7 +230,7 @@
 								</div>
 							</div>
 							{#if args.start_line}
-								<div class="text-[10px] text-gray-400 dark:text-gray-600 mt-1 px-1">
+								<div class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1 px-1">
 									{$t('chat.toolLines', {
 										start: args.start_line,
 										end: args.end_line || 'end'
@@ -261,7 +260,7 @@
 				{#if pairedOutput?.output}
 					<div>
 						<div
-							class="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1.5 px-1"
+							class="text-[0.625rem] uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1.5 px-1"
 						>
 							{$t('chat.toolOutput')}
 						</div>
@@ -282,7 +281,7 @@
 										: formattedOutput}</pre>
 							{/if}
 							{#if !imageToolOutput?.length && formattedOutput.length > 10000}
-								<div class="text-[10px] text-gray-400 dark:text-gray-600 mt-1 px-1">
+								<div class="text-[0.625rem] text-gray-400 dark:text-gray-600 mt-1 px-1">
 									{$t('chat.totalChars', {
 										count: formattedOutput.length.toLocaleString()
 									})}
diff --git a/cptr/frontend/src/lib/components/chat/UserMessage.svelte b/cptr/frontend/src/lib/components/chat/UserMessage.svelte
index e36557a1..af33d6fd 100644
--- a/cptr/frontend/src/lib/components/chat/UserMessage.svelte
+++ b/cptr/frontend/src/lib/components/chat/UserMessage.svelte
@@ -13,7 +13,14 @@
 		onedit?: (content: string, submit: boolean) => void;
 		onnavigate?: (direction: -1 | 1) => void;
 	}
-	let { content, meta = null, siblingIndex = 0, siblingTotal = 1, onedit, onnavigate }: Props = $props();
+	let {
+		content,
+		meta = null,
+		siblingIndex = 0,
+		siblingTotal = 1,
+		onedit,
+		onnavigate
+	}: Props = $props();
 
 	type Segment = { type: 'text'; value: string } | { type: 'file'; label: string; path: string };
 
@@ -119,22 +126,27 @@
 				onclick={() => (asyncExpanded = !asyncExpanded)}
 			>
 				<span class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 shrink-0"></span>
-				<span class="text-[12px] font-medium shrink-0">{$t('chat.asyncSubagentComplete')}</span>
+				<span class="text-[0.75rem] font-medium shrink-0">{$t('chat.asyncSubagentComplete')}</span>
 				{#if asyncSummary}
-					<span class="text-[12px] truncate min-w-0 flex-1">{asyncSummary}</span>
+					<span class="text-[0.75rem] truncate min-w-0 flex-1">{asyncSummary}</span>
 				{/if}
 				{#if delegationLabel}
-					<span class="hidden sm:inline text-[11px] font-mono text-gray-400 dark:text-gray-600 shrink-0">{delegationLabel}</span>
+					<span
+						class="hidden sm:inline text-[0.6875rem] font-mono text-gray-400 dark:text-gray-600 shrink-0"
+						>{delegationLabel}</span
+					>
 				{/if}
 				<Icon
 					name="chevron-down"
 					size={12}
-					class="text-gray-400 dark:text-gray-600 shrink-0 transition-transform duration-150 {asyncExpanded ? 'rotate-180' : ''}"
+					class="text-gray-400 dark:text-gray-600 shrink-0 transition-transform duration-150 {asyncExpanded
+						? 'rotate-180'
+						: ''}"
 				/>
 			</button>
 			{#if asyncExpanded}
 				<div
-					class="mt-2 ml-3 border-l border-gray-100 dark:border-white/8 pl-3 text-[12.5px] leading-relaxed text-gray-600 dark:text-gray-400 whitespace-pre-wrap break-words"
+					class="mt-2 ml-3 border-l border-gray-100 dark:border-white/8 pl-3 text-[0.78125rem] leading-relaxed text-gray-600 dark:text-gray-400 whitespace-pre-wrap break-words"
 				>
 					{content}
 				</div>
@@ -143,19 +155,17 @@
 	{:else if edit}
 		<!-- Edit mode: full width -->
 		<div class="w-full">
-			<div
-				class="bg-gray-50 dark:bg-white/4 rounded-xl border border-gray-200 dark:border-white/8 px-3.5 py-2.5"
-			>
+			<div class="app-subtle-surface rounded-xl border px-3.5 py-2.5">
 				<textarea
 					bind:this={textareaEl}
 					bind:value={editedContent}
-					class="w-full bg-transparent outline-none resize-none text-[13px] leading-relaxed text-gray-900 dark:text-gray-200"
+					class="w-full bg-transparent outline-none resize-none text-[0.8125rem] leading-relaxed text-gray-900 dark:text-gray-200"
 					oninput={autoResize}
 					onkeydown={handleKeydown}
 					rows="1"
 				></textarea>
 			</div>
-			<div class="flex justify-between mt-2 text-[12px] font-medium">
+			<div class="flex justify-between mt-2 text-[0.75rem] font-medium">
 				<button
 					class="px-3 py-1 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 bg-gray-100 dark:bg-white/6 hover:bg-gray-200 dark:hover:bg-white/10 transition-colors duration-100"
 					onclick={saveEdit}>{$t('common.save')}</button
@@ -181,14 +191,18 @@
 						{#if upload.type === 'image'}
 							<img src={upload.url} alt={upload.name || 'image'} class="max-h-96 rounded-lg" />
 						{:else}
-							<div class="relative group py-1.5 px-2 w-48 flex items-center gap-1.5 bg-white dark:bg-[#1a1a1a] border border-gray-100 dark:border-white/5 rounded-xl text-left flex-shrink-0 shadow-sm">
+							<div
+								class="app-surface relative group py-1.5 px-2 w-48 flex items-center gap-1.5 border rounded-xl text-left flex-shrink-0 shadow-sm"
+							>
 								<div class="shrink-0">
-									<Icon name="page-text" size={14} class="text-gray-500 dark:text-gray-400" />
+									<Icon name="page-text" size={14} class="app-icon-muted" />
 								</div>
 								<div class="flex flex-col justify-center w-full overflow-hidden">
-									<div class="dark:text-gray-100 text-xs flex justify-between items-center w-full gap-2">
+									<div class="text-xs flex justify-between items-center w-full gap-2">
 										<div class="font-medium truncate flex-1">{upload.name || 'File'}</div>
-										<div class="text-[10px] text-gray-500 capitalize shrink-0">{upload.type === 'file' ? 'File' : (upload.type || 'File')}</div>
+										<div class="app-muted text-[0.625rem] capitalize shrink-0">
+											{upload.type === 'file' ? 'File' : upload.type || 'File'}
+										</div>
 									</div>
 								</div>
 							</div>
@@ -198,9 +212,9 @@
 			</div>
 		{/if}
 		<div class="flex justify-end">
-			<div class="max-w-[90%] px-4 py-2 rounded-3xl bg-gray-50 dark:bg-white/[0.06]">
+			<div class="max-w-[90%] px-4 py-2 rounded-3xl app-interactive-active">
 				<div
-					class="text-[13px] leading-relaxed text-gray-900 dark:text-gray-200 whitespace-pre-wrap break-words"
+					class="text-[0.8125rem] leading-relaxed text-gray-900 dark:text-gray-200 whitespace-pre-wrap break-words"
 				>
 					{#each parsedContent as segment}{#if segment.type === 'text'}{segment.value}{:else}{@const isDir =
 								segment.path.endsWith('/')}{@const cleanPath = isDir
@@ -243,7 +257,7 @@
 							/></svg
 						>
 					</button>
-					<span class="text-[11px] tabular-nums text-gray-400 dark:text-gray-600 select-none"
+					<span class="text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
 						>{siblingIndex + 1}/{siblingTotal}</span
 					>
 					<button
diff --git a/cptr/frontend/src/lib/components/common/ChatItem.svelte b/cptr/frontend/src/lib/components/common/ChatItem.svelte
index 3e2d7435..93868f5d 100644
--- a/cptr/frontend/src/lib/components/common/ChatItem.svelte
+++ b/cptr/frontend/src/lib/components/common/ChatItem.svelte
@@ -38,19 +38,26 @@
 		hover:bg-gray-50 dark:hover:bg-white/3"
 	role="button"
 	tabindex="0"
-	onclick={onclick}
-	onkeydown={(e) => { if (e.key === 'Enter') onclick(); }}
+	{onclick}
+	onkeydown={(e) => {
+		if (e.key === 'Enter') onclick();
+	}}
 	title={chat.title}
 >
 	{#if chat.is_active}
 		<Spinner size={10} borderWidth={1.5} class="opacity-50" />
 	{/if}
 	<span class="flex-1 text-xs text-gray-500 dark:text-gray-500 truncate min-w-0">{chat.title}</span>
-	<span class="text-[10px] text-gray-300 dark:text-gray-700 shrink-0 tabular-nums">{formatTime(chat.updated_at)}</span>
+	<span class="text-[0.625rem] text-gray-300 dark:text-gray-700 shrink-0 tabular-nums"
+		>{formatTime(chat.updated_at)}</span
+	>
 	{#if onmenu}
 		<button
 			class="flex items-center justify-center w-5 h-5 rounded shrink-0 text-gray-300 dark:text-gray-700 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-200 dark:hover:bg-white/8 transition-all duration-75"
-			onclick={(e) => { e.stopPropagation(); onmenu?.(e); }}
+			onclick={(e) => {
+				e.stopPropagation();
+				onmenu?.(e);
+			}}
 			aria-label={$t('a11y.chatOptions')}
 		>
 			<svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor">
diff --git a/cptr/frontend/src/lib/components/common/ModelSelector.svelte b/cptr/frontend/src/lib/components/common/ModelSelector.svelte
index 4ba78f64..216ba057 100644
--- a/cptr/frontend/src/lib/components/common/ModelSelector.svelte
+++ b/cptr/frontend/src/lib/components/common/ModelSelector.svelte
@@ -68,13 +68,14 @@
 <span class="relative inline-flex {open ? 'z-[1001]' : ''}">
 	<button
 		bind:this={btnEl}
-		class="flex items-center gap-1 px-2 py-1 rounded-lg text-[11px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors duration-100"
+		class="flex items-center gap-1 px-2 py-1 rounded-lg text-[0.6875rem] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors duration-100"
 		onclick={toggle}
 	>
-		<span class="truncate max-w-[160px]"
+		<span class="truncate max-w-[10rem]"
 			>{$chatModels.length === 0
 				? $t('modelSelector.noModels')
-				: $chatModels.find((m) => m.id === selectedModel)?.name || $t('modelSelector.selectModel')}</span
+				: $chatModels.find((m) => m.id === selectedModel)?.name ||
+					$t('modelSelector.selectModel')}</span
 		>
 		{#if $chatModels.length > 0}
 			<svg
@@ -96,11 +97,11 @@
 			items={menuItems}
 			anchor={btnEl}
 			onclose={() => (open = false)}
-			preferAbove={preferAbove}
+			{preferAbove}
 			forceAbove={preferAbove}
 			maxHeight={selectorMaxHeight}
 			className="w-48"
-			align={align}
+			{align}
 		>
 			{#snippet header()}
 				<div class="flex items-center gap-1.5 h-6 px-2 mt-0.5">
@@ -119,7 +120,7 @@
 						bind:this={searchInputEl}
 						bind:value={search}
 						placeholder={$t('modelSelector.search')}
-						class="w-full bg-transparent text-[11px] text-gray-500 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-600 outline-none"
+						class="w-full bg-transparent text-[0.6875rem] text-gray-500 dark:text-gray-400 placeholder:text-gray-300 dark:placeholder:text-gray-600 outline-none"
 						onkeydown={(e) => {
 							if (e.key === 'Escape') open = false;
 						}}
@@ -127,7 +128,9 @@
 				</div>
 			{/snippet}
 			{#snippet empty()}
-				<div class="px-3 py-1.5 text-[11px] text-gray-400 dark:text-gray-500 text-center">{$t('modelSelector.noMatches')}</div>
+				<div class="px-3 py-1.5 text-[0.6875rem] text-gray-400 dark:text-gray-500 text-center">
+					{$t('modelSelector.noMatches')}
+				</div>
 			{/snippet}
 		</DropdownMenu>
 	{/if}
diff --git a/cptr/frontend/src/lib/components/common/Pagination.svelte b/cptr/frontend/src/lib/components/common/Pagination.svelte
index 48dc6ae6..36b8bc28 100644
--- a/cptr/frontend/src/lib/components/common/Pagination.svelte
+++ b/cptr/frontend/src/lib/components/common/Pagination.svelte
@@ -53,7 +53,7 @@
 					class="pagination-btn"
 					class:active={item === page}
 					onclick={() => onpagechange(item)}
-					aria-label="Page {item}"
+					aria-label={$t('a11y.page', { page: item })}
 					aria-current={item === page ? 'page' : undefined}
 				>
 					{item}
@@ -88,22 +88,22 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: 1px;
-		padding-top: 8px;
+		gap: 0.0625rem;
+		padding-top: 0.5rem;
 	}
 
 	.pagination-btn {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-width: 22px;
-		height: 22px;
-		padding: 0 3px;
+		min-width: 1.375rem;
+		height: 1.375rem;
+		padding: 0 0.1875rem;
 		border: none;
-		border-radius: 5px;
+		border-radius: 0.3125rem;
 		background: transparent;
 		color: #c4c4c4;
-		font-size: 10.5px;
+		font-size: 0.65625rem;
 		font-weight: 500;
 		cursor: pointer;
 		transition:
@@ -131,12 +131,12 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-width: 22px;
-		height: 22px;
-		font-size: 10.5px;
+		min-width: 1.375rem;
+		height: 1.375rem;
+		font-size: 0.65625rem;
 		color: #d1d5db;
 		user-select: none;
-		letter-spacing: 1px;
+		letter-spacing: 0.0625rem;
 	}
 
 	/* Dark mode */
diff --git a/cptr/frontend/src/lib/components/common/Spinner.svelte b/cptr/frontend/src/lib/components/common/Spinner.svelte
index b189b460..b510ec0f 100644
--- a/cptr/frontend/src/lib/components/common/Spinner.svelte
+++ b/cptr/frontend/src/lib/components/common/Spinner.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { t } from '$lib/i18n';
+
 	interface Props {
-		/** Size in px or Tailwind class like '3.5' or '5'. Defaults to 16px. */
+		/** Size in px or Tailwind class like '3.5' or '5'. Defaults to 1rem. */
 		size?: number | string;
 		/** Border width in px. Scales automatically if not set. */
 		borderWidth?: number;
@@ -17,7 +19,7 @@
 	class="spinner {className}"
 	style="width:{px}px;height:{px}px;border-width:{bw}px"
 	role="status"
-	aria-label="Loading"
+	aria-label={$t('common.loading')}
 ></div>
 
 <style>
@@ -26,7 +28,7 @@
 		border-style: solid;
 		border-color: var(--color-gray-300);
 		border-top-color: var(--color-gray-600);
-		border-radius: 9999px;
+		border-radius: 624.9375rem;
 		animation: spin 0.75s linear infinite;
 		flex-shrink: 0;
 	}
diff --git a/cptr/frontend/src/lib/components/common/ToggleSwitch.svelte b/cptr/frontend/src/lib/components/common/ToggleSwitch.svelte
index c6f34f86..fe4cb35a 100644
--- a/cptr/frontend/src/lib/components/common/ToggleSwitch.svelte
+++ b/cptr/frontend/src/lib/components/common/ToggleSwitch.svelte
@@ -17,9 +17,7 @@
 	aria-checked={value}
 >
 	<span
-		class="absolute top-[2px] w-3 h-3 rounded-full transition-all duration-150
-			{value
-				? 'left-[14px] bg-white dark:bg-black'
-				: 'left-[2px] bg-white dark:bg-gray-500'}"
+		class="absolute top-[0.125rem] w-3 h-3 rounded-full transition-all duration-150
+			{value ? 'left-[0.875rem] bg-white dark:bg-black' : 'left-[0.125rem] bg-white dark:bg-gray-500'}"
 	></span>
 </button>
diff --git a/cptr/frontend/src/lib/components/markdown/BlockRenderer.svelte b/cptr/frontend/src/lib/components/markdown/BlockRenderer.svelte
index aa79797b..1b34bf97 100644
--- a/cptr/frontend/src/lib/components/markdown/BlockRenderer.svelte
+++ b/cptr/frontend/src/lib/components/markdown/BlockRenderer.svelte
@@ -51,7 +51,7 @@
 			<div
 				class="overflow-x-auto max-w-full rounded-lg border border-gray-200/60 dark:border-white/8"
 			>
-				<table class="w-full text-[13px] text-left text-gray-600 dark:text-gray-300">
+				<table class="w-full text-[0.8125rem] text-left text-gray-600 dark:text-gray-300">
 					<thead
 						class="text-xs text-gray-500 dark:text-gray-400 uppercase bg-gray-50/80 dark:bg-white/[0.03]"
 					>
diff --git a/cptr/frontend/src/lib/components/markdown/CodeBlock.svelte b/cptr/frontend/src/lib/components/markdown/CodeBlock.svelte
index 8e7038bc..b0f46742 100644
--- a/cptr/frontend/src/lib/components/markdown/CodeBlock.svelte
+++ b/cptr/frontend/src/lib/components/markdown/CodeBlock.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HighlighterCore } from 'shiki/core';
+	import { t } from '$lib/i18n';
 
 	interface Props {
 		language: string;
@@ -139,38 +140,38 @@
 <div
 	class="not-prose rounded-2xl overflow-hidden bg-black/[0.03] dark:bg-white/[0.03] border border-black/[0.06] dark:border-white/[0.06]"
 >
-	<div class="flex items-center justify-between h-[30px] px-2.5">
-		<span class="text-[11px] font-medium text-gray-500 lowercase">{language || 'text'}</span>
+	<div class="flex items-center justify-between h-[1.875rem] px-2.5">
+		<span class="text-[0.6875rem] font-medium text-gray-500 lowercase">{language || 'text'}</span>
 		<div class="flex items-center gap-1">
 			{#if isDiff && onapply}
 				<button
-					class="text-[11px] px-2 py-0.5 rounded text-green-600 hover:bg-green-600/10 transition-all duration-100"
-					onclick={() => onapply?.(code)}>Apply</button
+					class="text-[0.6875rem] px-2 py-0.5 rounded text-green-600 hover:bg-green-600/10 transition-all duration-100"
+					onclick={() => onapply?.(code)}>{$t('common.apply')}</button
 				>
 				<button
-					class="text-[11px] px-2 py-0.5 rounded text-red-600 hover:bg-red-600/10 transition-all duration-100"
-					onclick={() => onreject?.()}>Reject</button
+					class="text-[0.6875rem] px-2 py-0.5 rounded text-red-600 hover:bg-red-600/10 transition-all duration-100"
+					onclick={() => onreject?.()}>{$t('common.reject')}</button
 				>
 			{/if}
 			<button
-				class="text-[11px] px-2 py-0.5 rounded text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/[0.08] transition-all duration-100"
+				class="text-[0.6875rem] px-2 py-0.5 rounded text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/[0.08] transition-all duration-100"
 				onclick={handleCopy}
 			>
-				{copied ? '✓' : 'Copy'}
+				{copied ? '✓' : $t('common.copy')}
 			</button>
 		</div>
 	</div>
 
 	{#if isDiff}
 		<pre
-			class="!m-0 !pb-3 !px-4 overflow-x-auto text-[13px] leading-normal !bg-transparent font-mono"><code
+			class="!m-0 !pb-3 !px-4 overflow-x-auto text-[0.8125rem] leading-normal !bg-transparent font-mono"><code
 				>{#each diffLines as line}<span class="diff-line diff-{line.type}"
 						>{line.text}
 </span>{/each}</code
 			></pre>
 	{:else}
 		<pre
-			class="!m-0 !pb-3 !px-4 overflow-x-auto text-[13px] leading-normal !bg-transparent text-[#24292e] dark:text-[#e1e4e8] font-mono"><code
+			class="!m-0 !pb-3 !px-4 overflow-x-auto text-[0.8125rem] leading-normal !bg-transparent text-[#24292e] dark:text-[#e1e4e8] font-mono"><code
 				class="font-[inherit]"
 				bind:this={codeEl}>{code}</code
 			></pre>
diff --git a/cptr/frontend/src/lib/components/markdown/EditorToolbar.svelte b/cptr/frontend/src/lib/components/markdown/EditorToolbar.svelte
index 02575ecd..51f97b82 100644
--- a/cptr/frontend/src/lib/components/markdown/EditorToolbar.svelte
+++ b/cptr/frontend/src/lib/components/markdown/EditorToolbar.svelte
@@ -2,6 +2,7 @@
 	import type { Editor } from '@tiptap/core';
 	import Icon from '../Icon.svelte';
 	import { tooltip } from '$lib/tooltip';
+	import { t } from '$lib/i18n';
 
 	interface Props {
 		editor: Editor;
@@ -75,42 +76,42 @@
 			class="tb-btn"
 			class:active={active.bold}
 			onclick={() => editor.chain().focus().toggleBold().run()}
-			use:tooltip={'Bold (⌘B)'}><strong>B</strong></button
+			use:tooltip={$t('markdown.boldShortcut')}><strong>B</strong></button
 		>
 
 		<button
 			class="tb-btn"
 			class:active={active.italic}
 			onclick={() => editor.chain().focus().toggleItalic().run()}
-			use:tooltip={'Italic (⌘I)'}><em>I</em></button
+			use:tooltip={$t('markdown.italicShortcut')}><em>I</em></button
 		>
 
 		<button
 			class="tb-btn"
 			class:active={active.underline}
 			onclick={() => editor.chain().focus().toggleUnderline().run()}
-			use:tooltip={'Underline (⌘U)'}><u>U</u></button
+			use:tooltip={$t('markdown.underlineShortcut')}><u>U</u></button
 		>
 
 		<button
 			class="tb-btn"
 			class:active={active.strike}
 			onclick={() => editor.chain().focus().toggleStrike().run()}
-			use:tooltip={'Strikethrough'}><s>S</s></button
+			use:tooltip={$t('markdown.strikethrough')}><s>S</s></button
 		>
 
 		<button
 			class="tb-btn"
 			class:active={active.code}
 			onclick={() => editor.chain().focus().toggleCode().run()}
-			use:tooltip={'Inline code'}><Icon name="code" size={12} /></button
+			use:tooltip={$t('markdown.inlineCode')}><Icon name="code" size={12} /></button
 		>
 
 		<button
 			class="tb-btn"
 			class:active={active.highlight}
 			onclick={() => editor.chain().focus().toggleHighlight().run()}
-			use:tooltip={'Highlight'}><span class="highlight-icon">H</span></button
+			use:tooltip={$t('markdown.highlight')}><span class="highlight-icon">H</span></button
 		>
 
 		<span class="tb-divider"></span>
@@ -120,21 +121,21 @@
 			class="tb-btn heading-btn"
 			class:active={active.h1}
 			onclick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-			use:tooltip={'Heading 1'}>H1</button
+			use:tooltip={$t('markdown.heading1')}>H1</button
 		>
 
 		<button
 			class="tb-btn heading-btn"
 			class:active={active.h2}
 			onclick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-			use:tooltip={'Heading 2'}>H2</button
+			use:tooltip={$t('markdown.heading2')}>H2</button
 		>
 
 		<button
 			class="tb-btn heading-btn"
 			class:active={active.h3}
 			onclick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-			use:tooltip={'Heading 3'}>H3</button
+			use:tooltip={$t('markdown.heading3')}>H3</button
 		>
 
 		<span class="tb-divider"></span>
@@ -144,21 +145,21 @@
 			class="tb-btn"
 			class:active={active.bulletList}
 			onclick={() => editor.chain().focus().toggleBulletList().run()}
-			use:tooltip={'Bullet list'}><Icon name="list" size={12} /></button
+			use:tooltip={$t('markdown.bulletList')}><Icon name="list" size={12} /></button
 		>
 
 		<button
 			class="tb-btn"
 			class:active={active.orderedList}
 			onclick={() => editor.chain().focus().toggleOrderedList().run()}
-			use:tooltip={'Numbered list'}><Icon name="list-ordered" size={12} /></button
+			use:tooltip={$t('markdown.numberedList')}><Icon name="list-ordered" size={12} /></button
 		>
 
 		<button
 			class="tb-btn"
 			class:active={active.taskList}
 			onclick={() => editor.chain().focus().toggleTaskList().run()}
-			use:tooltip={'Task list'}><Icon name="check-square" size={12} /></button
+			use:tooltip={$t('markdown.taskList')}><Icon name="check-square" size={12} /></button
 		>
 
 		<span class="tb-divider"></span>
@@ -168,20 +169,20 @@
 			class="tb-btn"
 			class:active={active.blockquote}
 			onclick={() => editor.chain().focus().toggleBlockquote().run()}
-			use:tooltip={'Quote'}><Icon name="quote" size={12} /></button
+			use:tooltip={$t('markdown.quote')}><Icon name="quote" size={12} /></button
 		>
 
 		<button
 			class="tb-btn"
 			class:active={active.codeBlock}
 			onclick={() => editor.chain().focus().toggleCodeBlock().run()}
-			use:tooltip={'Code block'}>{'{ }'}</button
+			use:tooltip={$t('markdown.codeBlock')}>{'{ }'}</button
 		>
 
 		<button
 			class="tb-btn"
 			onclick={() => editor.chain().focus().setHorizontalRule().run()}
-			use:tooltip={'Horizontal rule'}>──</button
+			use:tooltip={$t('markdown.horizontalRule')}>──</button
 		>
 
 		<span class="tb-divider"></span>
@@ -191,7 +192,7 @@
 			class="tb-btn"
 			onclick={() =>
 				editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
-			use:tooltip={'Insert table'}><Icon name="table" size={12} /></button
+			use:tooltip={$t('markdown.insertTable')}><Icon name="table" size={12} /></button
 		>
 
 		<!-- Undo/Redo -->
@@ -201,14 +202,14 @@
 			class="tb-btn"
 			onclick={() => editor.chain().focus().undo().run()}
 			disabled={!editor.can().undo()}
-			use:tooltip={'Undo (⌘Z)'}><Icon name="undo" size={12} /></button
+			use:tooltip={$t('markdown.undoShortcut')}><Icon name="undo" size={12} /></button
 		>
 
 		<button
 			class="tb-btn"
 			onclick={() => editor.chain().focus().redo().run()}
 			disabled={!editor.can().redo()}
-			use:tooltip={'Redo (⌘⇧Z)'}><Icon name="redo" size={12} /></button
+			use:tooltip={$t('markdown.redoShortcut')}><Icon name="redo" size={12} /></button
 		>
 	</div>
 </div>
@@ -219,8 +220,8 @@
 	.editor-toolbar {
 		display: flex;
 		align-items: center;
-		height: 36px;
-		padding: 0 8px;
+		height: 2.25rem;
+		padding: 0 0.5rem;
 		border-bottom: 1px solid var(--color-gray-200);
 		background: white;
 		flex-shrink: 0;
@@ -235,7 +236,7 @@
 	.toolbar-scroll {
 		display: flex;
 		align-items: center;
-		gap: 1px;
+		gap: 0.0625rem;
 		overflow-x: auto;
 		overflow-y: hidden;
 		scrollbar-width: none;
@@ -251,14 +252,14 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		min-width: 28px;
-		height: 28px;
-		padding: 0 6px;
+		min-width: 1.75rem;
+		height: 1.75rem;
+		padding: 0 0.375rem;
 		border: none;
-		border-radius: 5px;
+		border-radius: 0.3125rem;
 		background: transparent;
 		color: var(--color-gray-500);
-		font-size: 12px;
+		font-size: 0.75rem;
 		font-weight: 500;
 		cursor: pointer;
 		transition: all 0.1s;
@@ -296,16 +297,16 @@
 	}
 
 	.heading-btn {
-		font-size: 11px;
+		font-size: 0.6875rem;
 		font-weight: 700;
 		font-family: inherit;
 	}
 
 	.tb-divider {
 		width: 1px;
-		height: 16px;
+		height: 1rem;
 		background: var(--color-gray-200);
-		margin: 0 4px;
+		margin: 0 0.25rem;
 		flex-shrink: 0;
 	}
 
@@ -315,10 +316,10 @@
 
 	.highlight-icon {
 		background: rgba(255, 213, 79, 0.4);
-		border-radius: 2px;
-		padding: 0 3px;
+		border-radius: 0.125rem;
+		padding: 0 0.1875rem;
 		font-weight: 700;
-		font-size: 11px;
+		font-size: 0.6875rem;
 	}
 
 	/* ── Mobile: pin to bottom above keyboard ────── */
@@ -329,8 +330,8 @@
 			left: 0;
 			right: 0;
 			z-index: 60;
-			height: 44px;
-			padding: 0 12px;
+			height: 2.75rem;
+			padding: 0 0.75rem;
 			border-bottom: none;
 			border-top: 1px solid var(--color-gray-200);
 			padding-bottom: env(safe-area-inset-bottom, 0);
@@ -342,9 +343,9 @@
 		}
 
 		.tb-btn {
-			min-width: 36px;
-			height: 36px;
-			font-size: 13px;
+			min-width: 2.25rem;
+			height: 2.25rem;
+			font-size: 0.8125rem;
 		}
 	}
 </style>
diff --git a/cptr/frontend/src/lib/components/markdown/InlineRenderer.svelte b/cptr/frontend/src/lib/components/markdown/InlineRenderer.svelte
index c3e5457e..1cec7e5e 100644
--- a/cptr/frontend/src/lib/components/markdown/InlineRenderer.svelte
+++ b/cptr/frontend/src/lib/components/markdown/InlineRenderer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Token } from 'marked';
 	import { openFileTab, setFileBrowserCwd, setActiveTab } from '$lib/stores';
+	import { t } from '$lib/i18n';
 
 	interface Props {
 		items: Token[];
@@ -69,7 +70,7 @@
 			{@const fileName = filePath.split('/').pop() || filePath}
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<button
-				class="inline-flex items-center gap-1 px-1 py-px rounded text-[13px] leading-snug font-medium cursor-pointer border-none text-blue-500 dark:text-blue-400 hover:bg-blue-500/8 transition-colors align-baseline"
+				class="inline-flex items-center gap-1 px-1 py-px rounded text-[0.8125rem] leading-snug font-medium cursor-pointer border-none text-blue-500 dark:text-blue-400 hover:bg-blue-500/8 transition-colors align-baseline"
 				title={filePath}
 				onclick={(e) => {
 					e.preventDefault();
@@ -138,7 +139,7 @@
 		{#if wl}
 			<span
 				class="text-blue-500 dark:text-blue-400 bg-blue-500/8 dark:bg-blue-400/10 rounded px-1 cursor-pointer hover:underline transition-colors"
-				title="Link to {wl.target}">{wl.label}</span
+				title={$t('markdown.linkTo', { target: wl.target })}>{wl.label}</span
 			>
 		{/if}
 	{/if}
diff --git a/cptr/frontend/src/lib/components/markdown/MermaidBlock.svelte b/cptr/frontend/src/lib/components/markdown/MermaidBlock.svelte
index 585795af..0e870db4 100644
--- a/cptr/frontend/src/lib/components/markdown/MermaidBlock.svelte
+++ b/cptr/frontend/src/lib/components/markdown/MermaidBlock.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { t } from '$lib/i18n';
+
 	let { code }: { code: string } = $props();
 
 	let containerEl: HTMLDivElement | undefined = $state();
@@ -27,7 +29,7 @@
 					rendered = true;
 				}
 			} catch (e: any) {
-				error = e.message || 'Failed to render diagram';
+				error = e.message || $t('preview.diagramRenderError');
 			}
 		})();
 	});
@@ -36,7 +38,7 @@
 <div class="mermaid-block">
 	{#if error}
 		<div class="mermaid-error">
-			<span class="mermaid-error-label">Diagram error</span>
+			<span class="mermaid-error-label">{$t('preview.diagramError')}</span>
 			<pre class="mermaid-error-msg">{error}</pre>
 			<pre class="mermaid-source">{code}</pre>
 		</div>
@@ -49,8 +51,8 @@
 	@reference "../../../app.css";
 
 	.mermaid-block {
-		margin: 0 0 12px;
-		border-radius: 8px;
+		margin: 0 0 0.75rem;
+		border-radius: 0.5rem;
 		overflow: hidden;
 		border: 1px solid var(--color-gray-200);
 	}
@@ -62,7 +64,7 @@
 	.mermaid-container {
 		display: flex;
 		justify-content: center;
-		padding: 16px;
+		padding: 1rem;
 		background: var(--color-gray-50);
 		overflow-x: auto;
 	}
@@ -77,19 +79,19 @@
 	}
 
 	.mermaid-error {
-		padding: 12px 16px;
+		padding: 0.75rem 1rem;
 		background: rgba(220, 38, 38, 0.04);
 	}
 
 	.mermaid-error-label {
-		font-size: 11px;
+		font-size: 0.6875rem;
 		font-weight: 500;
 		color: #dc2626;
 	}
 
 	.mermaid-error-msg {
-		margin: 4px 0 8px;
-		font-size: 12px;
+		margin: 0.25rem 0 0.5rem;
+		font-size: 0.75rem;
 		color: #dc2626;
 		white-space: pre-wrap;
 		font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
@@ -97,10 +99,10 @@
 
 	.mermaid-source {
 		margin: 0;
-		padding: 8px 12px;
-		font-size: 12px;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.75rem;
 		background: var(--color-gray-100);
-		border-radius: 4px;
+		border-radius: 0.25rem;
 		color: var(--color-gray-600);
 		font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
 	}
diff --git a/cptr/frontend/src/lib/components/markdown/RichTextEditor.svelte b/cptr/frontend/src/lib/components/markdown/RichTextEditor.svelte
index 0d65463c..8c096546 100644
--- a/cptr/frontend/src/lib/components/markdown/RichTextEditor.svelte
+++ b/cptr/frontend/src/lib/components/markdown/RichTextEditor.svelte
@@ -216,9 +216,9 @@
 	/* ── ProseMirror core ──────────────────────────── */
 
 	.rte-container :global(.rte-prosemirror) {
-		padding: 24px 32px;
+		padding: 1.5rem 2rem;
 		min-height: 100%;
-		font-size: 14px;
+		font-size: 0.875rem;
 		line-height: 1.7;
 		color: var(--color-gray-800);
 		outline: none;
@@ -248,75 +248,75 @@
 	/* ── Headings (match MarkdownRenderer sizes) ──── */
 
 	.rte-container :global(.rte-prosemirror h1) {
-		font-size: 24px;
+		font-size: 1.5rem;
 		font-weight: 600;
-		margin: 0 0 8px;
+		margin: 0 0 0.5rem;
 		letter-spacing: -0.02em;
 	}
 
 	.rte-container :global(.rte-prosemirror h2) {
-		font-size: 20px;
+		font-size: 1.25rem;
 		font-weight: 600;
-		margin: 24px 0 8px;
+		margin: 1.5rem 0 0.5rem;
 		letter-spacing: -0.01em;
 	}
 
 	.rte-container :global(.rte-prosemirror h3) {
-		font-size: 16px;
+		font-size: 1rem;
 		font-weight: 600;
-		margin: 20px 0 6px;
+		margin: 1.25rem 0 0.375rem;
 	}
 
 	.rte-container :global(.rte-prosemirror h4) {
-		font-size: 14px;
+		font-size: 0.875rem;
 		font-weight: 600;
-		margin: 16px 0 4px;
+		margin: 1rem 0 0.25rem;
 	}
 
 	.rte-container :global(.rte-prosemirror h5),
 	.rte-container :global(.rte-prosemirror h6) {
-		font-size: 13px;
+		font-size: 0.8125rem;
 		font-weight: 600;
-		margin: 16px 0 4px;
+		margin: 1rem 0 0.25rem;
 	}
 
 	/* ── Paragraph ─────────────────────────────────── */
 
 	.rte-container :global(.rte-prosemirror p) {
-		margin: 0 0 12px;
+		margin: 0 0 0.75rem;
 	}
 
 	/* ── Lists ─────────────────────────────────────── */
 
 	.rte-container :global(.rte-prosemirror ul),
 	.rte-container :global(.rte-prosemirror ol) {
-		margin: 0 0 12px;
-		padding-left: 20px;
+		margin: 0 0 0.75rem;
+		padding-left: 1.25rem;
 	}
 
 	.rte-container :global(.rte-prosemirror li) {
-		margin: 4px 0;
+		margin: 0.25rem 0;
 	}
 
 	.rte-container :global(.rte-prosemirror li > p) {
-		margin-bottom: 4px;
+		margin-bottom: 0.25rem;
 	}
 
 	/* ── Task lists ────────────────────────────────── */
 
 	.rte-container :global(.rte-prosemirror ul[data-type='taskList']) {
 		list-style: none;
-		padding-left: 4px;
+		padding-left: 0.25rem;
 	}
 
 	.rte-container :global(.rte-prosemirror ul[data-type='taskList'] li) {
 		display: flex;
 		align-items: flex-start;
-		gap: 6px;
+		gap: 0.375rem;
 	}
 
 	.rte-container :global(.rte-prosemirror ul[data-type='taskList'] li label) {
-		margin-top: 3px;
+		margin-top: 0.1875rem;
 	}
 
 	.rte-container :global(.rte-prosemirror ul[data-type='taskList'] li > div) {
@@ -326,9 +326,9 @@
 	/* ── Blockquote ────────────────────────────────── */
 
 	.rte-container :global(.rte-prosemirror blockquote) {
-		margin: 0 0 12px;
-		padding: 4px 16px;
-		border-left: 3px solid var(--color-gray-300);
+		margin: 0 0 0.75rem;
+		padding: 0.25rem 1rem;
+		border-left: 0.1875rem solid var(--color-gray-300);
 		color: var(--color-gray-600);
 	}
 
@@ -342,7 +342,7 @@
 	.rte-container :global(.rte-prosemirror hr) {
 		border: none;
 		border-top: 1px solid var(--color-gray-200);
-		margin: 20px 0;
+		margin: 1.25rem 0;
 	}
 
 	.rte-container.dark-mode :global(.rte-prosemirror hr) {
@@ -353,9 +353,9 @@
 
 	.rte-container :global(.rte-prosemirror code) {
 		background: var(--color-gray-100);
-		border-radius: 3px;
-		padding: 1px 5px;
-		font-size: 12.5px;
+		border-radius: 0.1875rem;
+		padding: 0.0625rem 0.3125rem;
+		font-size: 0.78125rem;
 		font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
 	}
 
@@ -367,11 +367,11 @@
 
 	.rte-container :global(.rte-prosemirror pre) {
 		background: var(--color-gray-100);
-		border-radius: 6px;
-		padding: 12px 16px;
+		border-radius: 0.375rem;
+		padding: 0.75rem 1rem;
 		overflow-x: auto;
-		margin: 0 0 12px;
-		font-size: 13px;
+		margin: 0 0 0.75rem;
+		font-size: 0.8125rem;
 		font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
 	}
 
@@ -391,14 +391,14 @@
 	.rte-container :global(.rte-prosemirror table) {
 		border-collapse: collapse;
 		width: 100%;
-		margin: 0 0 16px;
-		font-size: 13px;
+		margin: 0 0 1rem;
+		font-size: 0.8125rem;
 	}
 
 	.rte-container :global(.rte-prosemirror th),
 	.rte-container :global(.rte-prosemirror td) {
 		border: 1px solid var(--color-gray-200);
-		padding: 6px 10px;
+		padding: 0.375rem 0.625rem;
 		text-align: left;
 	}
 
@@ -432,8 +432,8 @@
 
 	.rte-container :global(.rte-prosemirror img) {
 		max-width: 100%;
-		border-radius: 6px;
-		margin: 8px 0;
+		border-radius: 0.375rem;
+		margin: 0.5rem 0;
 	}
 
 	/* ── Strong / emphasis ─────────────────────────── */
@@ -446,8 +446,8 @@
 
 	.rte-container :global(.rte-prosemirror mark) {
 		background: rgba(255, 213, 79, 0.4);
-		border-radius: 2px;
-		padding: 0 2px;
+		border-radius: 0.125rem;
+		padding: 0 0.125rem;
 	}
 
 	.rte-container.dark-mode :global(.rte-prosemirror mark) {
diff --git a/cptr/frontend/src/lib/components/preview/CsvTable.svelte b/cptr/frontend/src/lib/components/preview/CsvTable.svelte
index 981e3296..d38c99fa 100644
--- a/cptr/frontend/src/lib/components/preview/CsvTable.svelte
+++ b/cptr/frontend/src/lib/components/preview/CsvTable.svelte
@@ -76,7 +76,7 @@
 	table {
 		width: 100%;
 		border-collapse: collapse;
-		font-size: 12.5px;
+		font-size: 0.78125rem;
 		font-family: var(--font-mono);
 		white-space: nowrap;
 	}
@@ -91,10 +91,10 @@
 		background: var(--color-gray-50);
 		color: var(--color-gray-600);
 		font-weight: 600;
-		font-size: 11px;
+		font-size: 0.6875rem;
 		text-transform: uppercase;
 		letter-spacing: 0.03em;
-		padding: 6px 12px;
+		padding: 0.375rem 0.75rem;
 		text-align: left;
 		border-bottom: 1px solid var(--color-gray-200);
 	}
@@ -106,7 +106,7 @@
 	}
 
 	td {
-		padding: 4px 12px;
+		padding: 0.25rem 0.75rem;
 		color: var(--color-gray-800);
 		border-bottom: 1px solid var(--color-gray-100);
 	}
@@ -127,12 +127,12 @@
 	/* Row numbers */
 	.row-num {
 		color: var(--color-gray-400);
-		font-size: 11px;
+		font-size: 0.6875rem;
 		text-align: right;
-		padding-right: 8px;
-		padding-left: 8px;
+		padding-right: 0.5rem;
+		padding-left: 0.5rem;
 		user-select: none;
-		min-width: 32px;
+		min-width: 2rem;
 		border-right: 1px solid var(--color-gray-100);
 	}
 
diff --git a/cptr/frontend/src/lib/components/preview/ImagePreview.svelte b/cptr/frontend/src/lib/components/preview/ImagePreview.svelte
index 07290fef..3d6c1d78 100644
--- a/cptr/frontend/src/lib/components/preview/ImagePreview.svelte
+++ b/cptr/frontend/src/lib/components/preview/ImagePreview.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	import panzoom, { type PanZoom } from 'panzoom';
+	import { t } from '$lib/i18n';
 
 	interface Props {
 		src: string;
@@ -75,7 +76,7 @@
 	</div>
 
 	<div class="zoom-toolbar">
-		<button class="zoom-btn" onclick={zoomOut} aria-label="Zoom out">
+		<button class="zoom-btn" onclick={zoomOut} aria-label={$t('a11y.zoomOut')}>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 20 20"
@@ -90,10 +91,10 @@
 				/>
 			</svg>
 		</button>
-		<button class="zoom-level" onclick={resetView} aria-label="Reset zoom">
+		<button class="zoom-level" onclick={resetView} aria-label={$t('a11y.resetZoom')}>
 			{Math.round(zoomLevel * 100)}%
 		</button>
-		<button class="zoom-btn" onclick={zoomIn} aria-label="Zoom in">
+		<button class="zoom-btn" onclick={zoomIn} aria-label={$t('a11y.zoomIn')}>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 20 20"
@@ -118,12 +119,12 @@
 		height: 100%;
 		overflow: hidden;
 		background: repeating-conic-gradient(var(--color-gray-100) 0% 25%, transparent 0% 50%) 50% /
-			16px 16px;
+			1rem 1rem;
 	}
 
 	:global(.dark) .image-preview {
 		background: repeating-conic-gradient(rgba(255, 255, 255, 0.04) 0% 25%, transparent 0% 50%) 50% /
-			16px 16px;
+			1rem 1rem;
 	}
 
 	.image-content {
@@ -138,39 +139,39 @@
 		max-width: 100%;
 		max-height: 100%;
 		object-fit: contain;
-		padding: 12px;
+		padding: 0.75rem;
 		user-select: none;
 	}
 
 	.zoom-toolbar {
 		position: absolute;
-		bottom: 12px;
+		bottom: 0.75rem;
 		left: 50%;
 		transform: translateX(-50%);
 		display: flex;
 		align-items: center;
-		gap: 2px;
-		padding: 2px;
-		border-radius: 8px;
+		gap: 0.125rem;
+		padding: 0.125rem;
+		border-radius: 0.5rem;
 		background: rgba(255, 255, 255, 0.9);
-		backdrop-filter: blur(8px);
+		backdrop-filter: blur(0.5rem);
 		border: 1px solid rgba(0, 0, 0, 0.08);
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
 	}
 
 	:global(.dark) .zoom-toolbar {
 		background: rgba(30, 30, 30, 0.9);
 		border-color: rgba(255, 255, 255, 0.1);
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+		box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
 	}
 
 	.zoom-btn {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 28px;
-		height: 28px;
-		border-radius: 6px;
+		width: 1.75rem;
+		height: 1.75rem;
+		border-radius: 0.375rem;
 		color: var(--color-gray-500);
 		transition: all 0.1s;
 	}
@@ -186,13 +187,13 @@
 	}
 
 	.zoom-level {
-		min-width: 48px;
-		padding: 4px 6px;
-		font-size: 11px;
+		min-width: 3rem;
+		padding: 0.25rem 0.375rem;
+		font-size: 0.6875rem;
 		font-weight: 500;
 		text-align: center;
 		color: var(--color-gray-500);
-		border-radius: 6px;
+		border-radius: 0.375rem;
 		font-variant-numeric: tabular-nums;
 		transition: all 0.1s;
 	}
diff --git a/cptr/frontend/src/lib/components/preview/JsonTreeView.svelte b/cptr/frontend/src/lib/components/preview/JsonTreeView.svelte
index c1b54d65..1e49f539 100644
--- a/cptr/frontend/src/lib/components/preview/JsonTreeView.svelte
+++ b/cptr/frontend/src/lib/components/preview/JsonTreeView.svelte
@@ -95,9 +95,9 @@
 	.tree-node {
 		display: flex;
 		align-items: baseline;
-		min-height: 22px;
+		min-height: 1.375rem;
 		font-family: var(--font-mono);
-		font-size: 12.5px;
+		font-size: 0.78125rem;
 		line-height: 1.6;
 		white-space: nowrap;
 	}
@@ -106,11 +106,11 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 16px;
-		height: 16px;
+		width: 1rem;
+		height: 1rem;
 		flex-shrink: 0;
 		color: var(--color-gray-400);
-		font-size: 8px;
+		font-size: 0.5rem;
 		transition: color 0.1s;
 	}
 
@@ -132,7 +132,7 @@
 	}
 
 	.spacer {
-		width: 16px;
+		width: 1rem;
 		flex-shrink: 0;
 	}
 
@@ -150,7 +150,7 @@
 
 	.preview {
 		color: var(--color-gray-400);
-		font-size: 11px;
+		font-size: 0.6875rem;
 	}
 
 	.bracket {
diff --git a/cptr/frontend/src/lib/components/preview/OfficePreview.svelte b/cptr/frontend/src/lib/components/preview/OfficePreview.svelte
index 849cf3e3..d1c152fe 100644
--- a/cptr/frontend/src/lib/components/preview/OfficePreview.svelte
+++ b/cptr/frontend/src/lib/components/preview/OfficePreview.svelte
@@ -348,19 +348,17 @@
 	}
 
 	.error-msg {
-		font-size: 13px;
+		font-size: 0.8125rem;
 		color: #ef4444;
 	}
 
-
-
 	/* ── DOCX ────────────────────────────────────── */
 
 	.docx-content {
 		flex: 1;
 		overflow-y: auto;
-		padding: 24px 32px;
-		font-size: 14px;
+		padding: 1.5rem 2rem;
+		font-size: 0.875rem;
 		line-height: 1.7;
 		color: var(--color-gray-800);
 	}
@@ -370,32 +368,32 @@
 	}
 
 	.docx-content :global(h1) {
-		font-size: 24px;
+		font-size: 1.5rem;
 		font-weight: 600;
-		margin: 0 0 8px;
+		margin: 0 0 0.5rem;
 	}
 	.docx-content :global(h2) {
-		font-size: 20px;
+		font-size: 1.25rem;
 		font-weight: 600;
-		margin: 24px 0 8px;
+		margin: 1.5rem 0 0.5rem;
 	}
 	.docx-content :global(h3) {
-		font-size: 16px;
+		font-size: 1rem;
 		font-weight: 600;
-		margin: 20px 0 6px;
+		margin: 1.25rem 0 0.375rem;
 	}
 	.docx-content :global(p) {
-		margin: 0 0 12px;
+		margin: 0 0 0.75rem;
 	}
 	.docx-content :global(table) {
 		border-collapse: collapse;
-		margin: 12px 0;
-		font-size: 13px;
+		margin: 0.75rem 0;
+		font-size: 0.8125rem;
 	}
 	.docx-content :global(td),
 	.docx-content :global(th) {
 		border: 1px solid var(--color-gray-200);
-		padding: 4px 8px;
+		padding: 0.25rem 0.5rem;
 	}
 	.docx-content :global(img) {
 		max-width: 100%;
@@ -408,7 +406,7 @@
 		display: flex;
 		gap: 0;
 		border-bottom: 1px solid var(--color-gray-200);
-		padding: 0 4px;
+		padding: 0 0.25rem;
 		flex-shrink: 0;
 		overflow-x: auto;
 	}
@@ -418,11 +416,11 @@
 	}
 
 	.sheet-tab {
-		padding: 6px 12px;
-		font-size: 11px;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.6875rem;
 		font-weight: 500;
 		color: var(--color-gray-500);
-		border-bottom: 2px solid transparent;
+		border-bottom: 0.125rem solid transparent;
 		white-space: nowrap;
 		transition: all 0.1s;
 	}
@@ -445,7 +443,7 @@
 	.xlsx-content :global(table) {
 		width: 100%;
 		border-collapse: collapse;
-		font-size: 12px;
+		font-size: 0.75rem;
 		font-family: var(--font-mono);
 		white-space: nowrap;
 	}
@@ -460,8 +458,8 @@
 		background: var(--color-gray-50);
 		color: var(--color-gray-500);
 		font-weight: 600;
-		font-size: 10px;
-		padding: 4px 8px;
+		font-size: 0.625rem;
+		padding: 0.25rem 0.5rem;
 		text-align: center;
 		border-bottom: 1px solid var(--color-gray-200);
 	}
@@ -473,7 +471,7 @@
 	}
 
 	.xlsx-content :global(td) {
-		padding: 3px 8px;
+		padding: 0.1875rem 0.5rem;
 		color: var(--color-gray-800);
 		border-bottom: 1px solid var(--color-gray-100);
 		border-right: 1px solid var(--color-gray-100);
@@ -487,10 +485,10 @@
 
 	.xlsx-content :global(.rn) {
 		color: var(--color-gray-400);
-		font-size: 10px;
+		font-size: 0.625rem;
 		text-align: right;
 		user-select: none;
-		min-width: 28px;
+		min-width: 1.75rem;
 		border-right: 1px solid var(--color-gray-200);
 		background: var(--color-gray-50);
 	}
@@ -514,10 +512,10 @@
 	.pptx-content {
 		flex: 1;
 		overflow-y: auto;
-		padding: 16px;
+		padding: 1rem;
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: 0.5rem;
 		align-items: center;
 		background: var(--color-gray-100);
 	}
@@ -529,9 +527,9 @@
 	.slide {
 		position: relative;
 		width: 100%;
-		max-width: 800px;
-		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
-		border-radius: 4px;
+		max-width: 50rem;
+		box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.12);
+		border-radius: 0.25rem;
 		overflow: hidden;
 	}
 
@@ -542,13 +540,13 @@
 
 	.slide-num {
 		position: absolute;
-		top: 6px;
-		left: 6px;
-		font-size: 10px;
+		top: 0.375rem;
+		left: 0.375rem;
+		font-size: 0.625rem;
 		font-weight: 600;
 		color: white;
 		background: rgba(0, 0, 0, 0.4);
-		padding: 1px 6px;
-		border-radius: 3px;
+		padding: 0.0625rem 0.375rem;
+		border-radius: 0.1875rem;
 	}
 </style>
diff --git a/cptr/frontend/src/lib/components/preview/PDFViewer.svelte b/cptr/frontend/src/lib/components/preview/PDFViewer.svelte
index 385a0f55..3b3edc0e 100644
--- a/cptr/frontend/src/lib/components/preview/PDFViewer.svelte
+++ b/cptr/frontend/src/lib/components/preview/PDFViewer.svelte
@@ -3,6 +3,7 @@
 	import panzoom, { type PanZoom } from 'panzoom';
 	import { fetchHandler } from '$lib/apis';
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import { t } from '$lib/i18n';
 
 	interface Props {
 		src: string;
@@ -41,7 +42,7 @@
 			await renderAllPages();
 		} catch (e: any) {
 			console.error('PDF render error:', e);
-			error = 'Failed to load PDF.';
+			error = $t('preview.pdfLoadError');
 		} finally {
 			loading = false;
 		}
@@ -72,7 +73,7 @@
 			wrapper.style.width = `${Math.round(cssScale * viewport.width)}px`;
 			wrapper.style.height = `${Math.round(cssScale * viewport.height)}px`;
 			wrapper.style.setProperty('--scale-factor', String(cssViewport.scale));
-			if (i > 1) wrapper.style.marginTop = '4px';
+			if (i > 1) wrapper.style.marginTop = '0.25rem';
 
 			// Canvas
 			const canvas = document.createElement('canvas');
@@ -240,7 +241,7 @@
 
 	{#if !loading && !error && pdfDoc}
 		<div class="zoom-toolbar">
-			<button class="zoom-btn" onclick={zoomOut} aria-label="Zoom out">
+			<button class="zoom-btn" onclick={zoomOut} aria-label={$t('a11y.zoomOut')}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					viewBox="0 0 20 20"
@@ -255,10 +256,10 @@
 					/>
 				</svg>
 			</button>
-			<button class="zoom-level" onclick={resetView} aria-label="Reset zoom">
+			<button class="zoom-level" onclick={resetView} aria-label={$t('a11y.resetZoom')}>
 				{Math.round(zoomLevel * 100)}%
 			</button>
-			<button class="zoom-btn" onclick={zoomIn} aria-label="Zoom in">
+			<button class="zoom-btn" onclick={zoomIn} aria-label={$t('a11y.zoomIn')}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					viewBox="0 0 20 20"
@@ -304,42 +305,40 @@
 	}
 
 	.error-msg {
-		font-size: 13px;
+		font-size: 0.8125rem;
 		color: #ef4444;
 	}
 
-
-
 	.zoom-toolbar {
 		position: absolute;
-		bottom: 12px;
+		bottom: 0.75rem;
 		left: 50%;
 		transform: translateX(-50%);
 		display: flex;
 		align-items: center;
-		gap: 2px;
-		padding: 2px;
-		border-radius: 8px;
+		gap: 0.125rem;
+		padding: 0.125rem;
+		border-radius: 0.5rem;
 		background: rgba(255, 255, 255, 0.9);
-		backdrop-filter: blur(8px);
+		backdrop-filter: blur(0.5rem);
 		border: 1px solid rgba(0, 0, 0, 0.08);
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
 		z-index: 10;
 	}
 
 	:global(.dark) .zoom-toolbar {
 		background: rgba(30, 30, 30, 0.9);
 		border-color: rgba(255, 255, 255, 0.1);
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+		box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
 	}
 
 	.zoom-btn {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 28px;
-		height: 28px;
-		border-radius: 6px;
+		width: 1.75rem;
+		height: 1.75rem;
+		border-radius: 0.375rem;
 		color: var(--color-gray-500);
 		transition: all 0.1s;
 	}
@@ -355,13 +354,13 @@
 	}
 
 	.zoom-level {
-		min-width: 48px;
-		padding: 4px 6px;
-		font-size: 11px;
+		min-width: 3rem;
+		padding: 0.25rem 0.375rem;
+		font-size: 0.6875rem;
 		font-weight: 500;
 		text-align: center;
 		color: var(--color-gray-500);
-		border-radius: 6px;
+		border-radius: 0.375rem;
 		font-variant-numeric: tabular-nums;
 		transition: all 0.1s;
 	}
diff --git a/cptr/frontend/src/lib/components/preview/SqliteView.svelte b/cptr/frontend/src/lib/components/preview/SqliteView.svelte
index 476fa0c1..a6810ffd 100644
--- a/cptr/frontend/src/lib/components/preview/SqliteView.svelte
+++ b/cptr/frontend/src/lib/components/preview/SqliteView.svelte
@@ -179,7 +179,7 @@
 				<textarea
 					class="query-input"
 					bind:value={customQuery}
-					placeholder="SELECT * FROM ..."
+					placeholder={$t('sqlite.queryPlaceholder')}
 					rows="2"
 					onkeydown={(e) => {
 						if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') runQuery();
@@ -220,9 +220,15 @@
 		<!-- Pagination -->
 		{#if !queryMode && totalRows > PAGE_SIZE}
 			<div class="pagination">
-				<button class="page-btn" onclick={prevPage} disabled={page === 0}>{$t('sqlite.prev')}</button>
+				<button class="page-btn" onclick={prevPage} disabled={page === 0}
+					>{$t('sqlite.prev')}</button
+				>
 				<span class="page-info">
-					{$t('sqlite.pageInfo', { start: page * PAGE_SIZE + 1, end: Math.min((page + 1) * PAGE_SIZE, totalRows), total: totalRows })}
+					{$t('sqlite.pageInfo', {
+						start: page * PAGE_SIZE + 1,
+						end: Math.min((page + 1) * PAGE_SIZE, totalRows),
+						total: totalRows
+					})}
 				</span>
 				<button class="page-btn" onclick={nextPage} disabled={(page + 1) * PAGE_SIZE >= totalRows}
 					>{$t('sqlite.next')}</button
@@ -250,12 +256,10 @@
 	}
 
 	.error-msg {
-		font-size: 13px;
+		font-size: 0.8125rem;
 		color: #ef4444;
 	}
 
-
-
 	/* ── Tab bar ──────────────────────────────────── */
 
 	.tab-bar {
@@ -263,7 +267,7 @@
 		align-items: center;
 		gap: 0;
 		border-bottom: 1px solid var(--color-gray-200);
-		padding: 0 4px;
+		padding: 0 0.25rem;
 		flex-shrink: 0;
 		overflow-x: auto;
 	}
@@ -281,11 +285,11 @@
 	}
 
 	.tab {
-		padding: 6px 12px;
-		font-size: 11px;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.6875rem;
 		font-weight: 500;
 		color: var(--color-gray-500);
-		border-bottom: 2px solid transparent;
+		border-bottom: 0.125rem solid transparent;
 		transition: all 0.1s;
 		white-space: nowrap;
 	}
@@ -311,15 +315,15 @@
 	.query-tab {
 		margin-left: auto;
 		font-family: var(--font-mono);
-		font-size: 10px;
+		font-size: 0.625rem;
 	}
 
 	/* ── Query bar ────────────────────────────────── */
 
 	.query-bar {
 		display: flex;
-		gap: 8px;
-		padding: 8px 12px;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
 		border-bottom: 1px solid var(--color-gray-100);
 		flex-shrink: 0;
 	}
@@ -331,10 +335,10 @@
 	.query-input {
 		flex: 1;
 		font-family: var(--font-mono);
-		font-size: 12px;
-		padding: 6px 10px;
+		font-size: 0.75rem;
+		padding: 0.375rem 0.625rem;
 		border: 1px solid var(--color-gray-200);
-		border-radius: 6px;
+		border-radius: 0.375rem;
 		background: transparent;
 		color: var(--color-gray-800);
 		resize: vertical;
@@ -351,12 +355,12 @@
 	}
 
 	.run-btn {
-		padding: 6px 12px;
-		font-size: 11px;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.6875rem;
 		font-weight: 500;
 		color: white;
 		background: #2563eb;
-		border-radius: 6px;
+		border-radius: 0.375rem;
 		align-self: flex-end;
 		transition: background 0.1s;
 	}
@@ -366,8 +370,8 @@
 	}
 
 	.query-error {
-		padding: 6px 12px;
-		font-size: 11px;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.6875rem;
 		font-family: var(--font-mono);
 		color: #ef4444;
 		background: rgba(239, 68, 68, 0.06);
@@ -384,7 +388,7 @@
 	table {
 		width: 100%;
 		border-collapse: collapse;
-		font-size: 12px;
+		font-size: 0.75rem;
 		font-family: var(--font-mono);
 		white-space: nowrap;
 	}
@@ -399,8 +403,8 @@
 		background: var(--color-gray-50);
 		color: var(--color-gray-600);
 		font-weight: 600;
-		font-size: 11px;
-		padding: 5px 10px;
+		font-size: 0.6875rem;
+		padding: 0.3125rem 0.625rem;
 		text-align: left;
 		border-bottom: 1px solid var(--color-gray-200);
 	}
@@ -412,7 +416,7 @@
 	}
 
 	td {
-		padding: 3px 10px;
+		padding: 0.1875rem 0.625rem;
 		color: var(--color-gray-800);
 		border-bottom: 1px solid var(--color-gray-100);
 	}
@@ -432,11 +436,11 @@
 
 	.row-num {
 		color: var(--color-gray-400);
-		font-size: 10px;
+		font-size: 0.625rem;
 		text-align: right;
-		padding-right: 6px;
+		padding-right: 0.375rem;
 		user-select: none;
-		min-width: 32px;
+		min-width: 2rem;
 		border-right: 1px solid var(--color-gray-100);
 	}
 
@@ -469,8 +473,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: 12px;
-		padding: 6px;
+		gap: 0.75rem;
+		padding: 0.375rem;
 		border-top: 1px solid var(--color-gray-100);
 		flex-shrink: 0;
 	}
@@ -480,9 +484,9 @@
 	}
 
 	.page-btn {
-		font-size: 11px;
-		padding: 3px 10px;
-		border-radius: 4px;
+		font-size: 0.6875rem;
+		padding: 0.1875rem 0.625rem;
+		border-radius: 0.25rem;
 		color: var(--color-gray-500);
 		transition: all 0.1s;
 	}
@@ -503,7 +507,7 @@
 	}
 
 	.page-info {
-		font-size: 11px;
+		font-size: 0.6875rem;
 		color: var(--color-gray-400);
 		font-variant-numeric: tabular-nums;
 	}
diff --git a/cptr/frontend/src/lib/components/preview/SvgPreview.svelte b/cptr/frontend/src/lib/components/preview/SvgPreview.svelte
index 1bb6f374..c4ca8b26 100644
--- a/cptr/frontend/src/lib/components/preview/SvgPreview.svelte
+++ b/cptr/frontend/src/lib/components/preview/SvgPreview.svelte
@@ -4,6 +4,7 @@
 	import panzoom, { type PanZoom } from 'panzoom';
 	import { onMount, onDestroy } from 'svelte';
 	import DOMPurify from 'dompurify';
+	import { t } from '$lib/i18n';
 
 	interface Props {
 		content: string;
@@ -77,7 +78,7 @@
 				onclick={() => {
 					mode = 'visual';
 				}}
-				use:tooltip={'Visual'}><Icon name="eye" size={14} /></button
+				use:tooltip={$t('preview.visual')}><Icon name="eye" size={14} /></button
 			>
 			<button
 				class="toolbar-btn"
@@ -85,10 +86,10 @@
 				onclick={() => {
 					mode = 'source';
 				}}
-				use:tooltip={'Source'}><Icon name="code" size={14} /></button
+				use:tooltip={$t('preview.source')}><Icon name="code" size={14} /></button
 			>
 			{#if mode === 'visual'}
-				<button class="toolbar-btn" onclick={resetView} use:tooltip={'Reset zoom'}>
+				<button class="toolbar-btn" onclick={resetView} use:tooltip={$t('a11y.resetZoom')}>
 					<span class="zoom-text">{Math.round(zoomLevel * 100)}%</span>
 				</button>
 			{/if}
@@ -122,8 +123,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		height: 36px;
-		padding: 0 12px;
+		height: 2.25rem;
+		padding: 0 0.75rem;
 		border-bottom: 1px solid var(--color-gray-200);
 		flex-shrink: 0;
 	}
@@ -140,11 +141,11 @@
 	.toolbar-right {
 		display: flex;
 		align-items: center;
-		gap: 2px;
+		gap: 0.125rem;
 	}
 
 	.file-label {
-		font-size: 11px;
+		font-size: 0.6875rem;
 		font-weight: 500;
 		color: var(--color-gray-500);
 	}
@@ -153,10 +154,10 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		min-width: 24px;
-		height: 24px;
-		padding: 0 4px;
-		border-radius: 6px;
+		min-width: 1.5rem;
+		height: 1.5rem;
+		padding: 0 0.25rem;
+		border-radius: 0.375rem;
 		color: var(--color-gray-400);
 		transition: all 0.1s;
 	}
@@ -178,7 +179,7 @@
 	}
 
 	.zoom-text {
-		font-size: 10px;
+		font-size: 0.625rem;
 		font-weight: 500;
 		font-variant-numeric: tabular-nums;
 	}
@@ -193,12 +194,12 @@
 		height: 100%;
 		overflow: hidden;
 		background: repeating-conic-gradient(var(--color-gray-100) 0% 25%, transparent 0% 50%) 50% /
-			16px 16px;
+			1rem 1rem;
 	}
 
 	:global(.dark) .visual-container {
 		background: repeating-conic-gradient(rgba(255, 255, 255, 0.04) 0% 25%, transparent 0% 50%) 50% /
-			16px 16px;
+			1rem 1rem;
 	}
 
 	.visual-content {
@@ -207,7 +208,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 24px;
+		padding: 1.5rem;
 	}
 
 	.visual-content :global(svg) {
@@ -220,9 +221,9 @@
 		height: 100%;
 		overflow: auto;
 		margin: 0;
-		padding: 12px 16px;
+		padding: 0.75rem 1rem;
 		font-family: var(--font-mono);
-		font-size: 12.5px;
+		font-size: 0.78125rem;
 		line-height: 1.6;
 		color: var(--color-gray-800);
 		white-space: pre-wrap;
diff --git a/cptr/frontend/src/lib/i18n/locales/de.json b/cptr/frontend/src/lib/i18n/locales/de.json
index b77e3860..b66b75a7 100644
--- a/cptr/frontend/src/lib/i18n/locales/de.json
+++ b/cptr/frontend/src/lib/i18n/locales/de.json
@@ -60,8 +60,8 @@
 	"files.rename": "Umbenennen",
 	"files.download": "Herunterladen",
 	"files.delete": "Löschen",
-	"files.ports": "Ports",
-	"files.name": "Name",
+	"files.ports": "Anschlüsse",
+	"files.name": "Bezeichnung",
 	"files.size": "Größe",
 	"files.date": "Datum",
 	"files.folder": "Ordner",
@@ -77,19 +77,20 @@
 	"quickOpen.noFiles": "Keine Dateien gefunden",
 	"search.placeholder": "Suchen...",
 	"search.search": "Suche",
-	"search.chats": "Chats",
+	"search.chats": "Unterhaltungen",
 	"search.files": "Dateien",
 	"search.noResults": "Keine Ergebnisse gefunden",
 	"search.recentChats": "Letzte Chats",
 	"search.noRecentChats": "Keine letzten Chats",
 	"settings.back": "Zurück",
 	"settings.general": "Allgemein",
+	"settings.appearance": "Erscheinungsbild",
 	"settings.memory": "Speicher",
-	"pwa.settingsTitle": "Progressive Web App",
+	"pwa.settingsTitle": "Progressive Web-App",
 	"intent.chooseWorkspace": "Arbeitsbereich",
 	"intent.newNote": "Notiz",
-	"intent.newChat": "Chat",
-	"intent.newTerminal": "Terminal",
+	"intent.newChat": "Neuer Chat",
+	"intent.newTerminal": "Neues Terminal",
 	"intent.share": "Teilen",
 	"intent.importFiles": "Dateien importieren",
 	"pwa.cancel": "Abbrechen",
@@ -121,7 +122,7 @@
 	"memory.enable": "Speicher aktivieren",
 	"memory.assistantCanSave": "Assistent darf Erinnerungen speichern",
 	"memory.backgroundReview": "Hintergrundprüfung",
-	"memory.limits": "Limits",
+	"memory.limits": "Grenzwerte",
 	"memory.reviewEvery": "Prüfen alle",
 	"memory.userLimit": "Benutzerlimit",
 	"memory.userMemory": "Benutzerspeicher",
@@ -129,9 +130,9 @@
 	"general.theme": "Design",
 	"general.light": "Hell",
 	"general.dark": "Dunkel",
-	"general.system": "System",
+	"general.system": "Systemmodus",
 	"general.language": "Sprache",
-	"general.tools": "Tools",
+	"general.tools": "Werkzeuge",
 	"general.autoApproveTools": "Alle Tool-Aufrufe automatisch genehmigen",
 	"general.autoApproveToolsDesc": "Tool-Aufrufe (Schreiben, Ausführen usw.) automatisch ohne Bestätigung erlauben",
 	"account.title": "Konto",
@@ -157,11 +158,11 @@
 	"git.changes": "Änderungen",
 	"git.history": "Verlauf",
 	"git.fetch": "Abrufen",
-	"git.pull": "Pullen",
-	"git.push": "Pushen",
+	"git.pull": "Abrufen",
+	"git.push": "Senden",
 	"git.publish": "Veröffentlichen",
-	"git.pullCount": "Pullen ↓{{count}}",
-	"git.pushCount": "Pushen ↑{{count}}",
+	"git.pullCount": "Abrufen ↓{{count}}",
+	"git.pushCount": "Senden ↑{{count}}",
 	"git.committed": "Committet",
 	"git.pulled": "Gepullt",
 	"git.pushed": "Gepusht",
@@ -187,7 +188,7 @@
 	"git.noCommits": "Keine Commits",
 	"git.newBranch": "Neuer Branch",
 	"git.branchName": "Branch-Name...",
-	"git.remote": "Remote",
+	"git.remote": "Entfernt",
 	"git.restore": "Wiederherstellen",
 	"git.maximize": "Maximieren",
 	"git.notARepo": "Kein Git-Repository",
@@ -219,7 +220,7 @@
 	"admin.displayName": "Anzeigename",
 	"admin.passwordLabel": "Passwort",
 	"admin.role": "Rolle",
-	"admin.optional": "Optional",
+	"admin.optional": "Optionales Feld",
 	"admin.minChars": "Mindestens 6 Zeichen",
 	"admin.enterUsername": "Benutzername eingeben",
 	"admin.create": "Erstellen",
@@ -237,13 +238,13 @@
 	"admin.agentsRefresh": "Aktualisieren",
 	"admin.agentsAddProfile": "Profil hinzufügen",
 	"admin.agentsDeleteProfile": "Löschen",
-	"admin.agentsProfileName": "Name",
+	"admin.agentsProfileName": "Profilname",
 	"admin.agentsProfileId": "Profil-ID",
-	"admin.agentsType": "Agent",
+	"admin.agentsType": "Agententyp",
 	"admin.agentsCommand": "Befehl",
 	"admin.agentsHome": "Home-Pfad",
 	"admin.agentsApprovalMode": "Freigabemodus",
-	"admin.agentsSandboxMode": "Sandbox",
+	"admin.agentsSandboxMode": "Sandbox-Modus",
 	"admin.agentsPermissionMode": "Berechtigungsmodus",
 	"admin.agentsLaunchArgs": "Startargumente",
 	"admin.agentsApiEndpoint": "API-Endpunkt",
@@ -267,6 +268,7 @@
 	"connections.apiKey": "API-Schlüssel",
 	"connections.baseUrl": "Basis-URL",
 	"connections.prefixId": "Präfix-ID",
+	"connections.prefixPlaceholder": "z. B. openrouter",
 	"connections.models": "Modelle (durch Kommas getrennt, optional)",
 	"connections.modelsHint": "Leer lassen, um automatisch vom Anbieter zu erkennen.",
 	"connections.cancel": "Abbrechen",
@@ -275,7 +277,7 @@
 	"connections.updated": "Verbindung aktualisiert",
 	"connections.verify": "Prüfen",
 	"bar.newChat": "Neuer Chat",
-	"home.start": "Start",
+	"home.start": "Loslegen",
 	"home.openFolder": "Ordner öffnen...",
 	"home.openWorkspace": "Arbeitsbereich öffnen",
 	"home.recent": "Zuletzt verwendet",
@@ -294,7 +296,7 @@
 	"directory.hidden": "Versteckte",
 	"directory.noSubdirectories": "Keine Unterverzeichnisse",
 	"directory.goBack": "Zurück",
-	"directory.typePath": "Type a path... (Tab to complete)",
+	"directory.typePath": "Pfad eingeben... (Tab zum Vervollständigen)",
 	"directory.retry": "Erneut versuchen",
 	"saveDialog.fileNamePlaceholder": "Dateiname…",
 	"saveDialog.emptyFolder": "Leerer Ordner",
@@ -304,7 +306,7 @@
 	"saveDialog.retry": "Erneut versuchen",
 	"port.preview": "Vorschau",
 	"port.via": "über {{name}}",
-	"system.title": "System",
+	"system.title": "Systemstatus",
 	"system.infoTitle": "Systeminfo",
 	"system.unavailable": "Systeminfo nicht verfügbar",
 	"system.cpu": "CPU",
@@ -319,7 +321,7 @@
 	"system.summaryDisk": "Disk {{percent}}%",
 	"system.uptime": "läuft {{value}}",
 	"system.load": "Last {{value}}",
-	"admin.web": "Web",
+	"admin.web": "Websuche",
 	"admin.webSearch": "Suche",
 	"admin.webEnabled": "Webzugriff aktivieren",
 	"admin.webEnabledHint": "KI kann das Web durchsuchen und URLs abrufen.",
@@ -341,12 +343,12 @@
 	"admin.webPerplexityHint": "API-Schlüssel unter perplexity.ai erhalten",
 	"admin.webPerplexityBaseUrl": "Basis-URL",
 	"admin.webPerplexityBaseUrlHint": "Leer lassen für api.perplexity.ai. Ändern für LiteLLM oder andere kompatible Proxys.",
-	"admin.webChatCompletions": "Chat Completions",
+	"admin.webChatCompletions": "Chat-Vervollständigungen",
 	"admin.webCcBaseUrl": "Basis-URL",
 	"admin.webCcKey": "API-Schlüssel",
 	"admin.webCcModel": "Modell",
 	"admin.webCcHint": "Beliebiger OpenAI-kompatibler Endpunkt (z. B. Perplexity Sonar, LiteLLM-Proxy)",
-	"admin.browser": "Browser",
+	"admin.browser": "Browsersteuerung",
 	"admin.browserTools": "Browser-Tools",
 	"admin.browserHint": "Gibt der KI Zugriff auf einen Webbrowser zum Navigieren, Klicken und Erstellen von Screenshots.",
 	"admin.browserProvider": "Anbieter",
@@ -448,7 +450,7 @@
 	"automations.noMatches": "Keine Treffer",
 	"automations.noAutomations": "Noch keine Automatisierungen",
 	"automations.create": "Automatisierung erstellen",
-	"automations.status": "Status",
+	"automations.status": "Zustand",
 	"automations.active": "Aktiv",
 	"automations.paused": "Pausiert",
 	"automations.all": "Alle",
@@ -463,7 +465,7 @@
 	"automations.enable": "Aktivieren",
 	"automations.copied": "Kopiert!",
 	"automations.copy": "Kopieren",
-	"automations.prompt": "Prompt",
+	"automations.prompt": "Eingabeaufforderung",
 	"automations.runs": "Ausführungen",
 	"automations.noRuns": "Noch keine Ausführungen",
 	"automations.viewChat": "Chat ansehen →",
@@ -492,7 +494,7 @@
 	"automationModal.createBtn": "Erstellen",
 	"automationModal.failedToSave": "Automatisierung konnte nicht gespeichert werden",
 	"connections.failedToUpdate": "Verbindung konnte nicht aktualisiert werden",
-	"admin.gateway.tab": "Gateway",
+	"admin.gateway.tab": "Schnittstelle",
 	"admin.gateway.title": "API-Gateway",
 	"admin.gateway.description": "Generieren Sie API-Schlüssel, um Open WebUI oder einen OpenAI-kompatiblen Client mit Ihren Arbeitsbereichen zu verbinden.",
 	"admin.gateway.loadError": "API-Schlüssel konnten nicht geladen werden",
@@ -551,7 +553,7 @@
 	"chat.tool.listDirectory": "Auflisten {{path}}",
 	"chat.tool.listDirectoryRecursive": "Auflisten {{path}} (rekursiv)",
 	"chat.tool.searchFiles": "Suche \"{{query}}\"{{scope}}",
-	"chat.tool.searchFilesScope": " in {{include}}",
+	"chat.tool.searchFilesScope": " in {{include}} durchsuchen",
 	"chat.tool.backgroundCommand": "Hintergrund: {{command}}",
 	"chat.tool.checkTask": "Aufgabe prüfen {{id}}",
 	"chat.tool.killTask": "Aufgabe beenden {{id}}",
@@ -586,7 +588,7 @@
 	"chat.commandPlan": "Planmodus",
 	"chat.commandPlanOn": "Ein",
 	"chat.commandPlanOff": "Aus",
-	"chat.commandStatus": "Status",
+	"chat.commandStatus": "Zustand",
 	"chat.commandStatusDesc": "Kontextnutzung, Chat-ID",
 	"chat.statusContextUsage": "Kontextnutzung",
 	"chat.statusEstimated": "Geschätzter Kontext",
@@ -629,7 +631,7 @@
 	"voiceMemo.filename": "Dateiname",
 	"voiceMemo.filenamePlaceholder": "aufnahme-name",
 	"voiceMemo.saved": "Gespeichert ✓",
-	"admin.audio.title": "Audio",
+	"admin.audio.title": "Ton",
 	"admin.audio.voiceMemos": "Sprachnotizen",
 	"admin.audio.enableVoiceMemos": "Sprachnotizen aktivieren",
 	"admin.audio.voiceMemosHint": "Sprachnotizen über das \"+\"-Menü aufnehmen.",
@@ -645,24 +647,24 @@
 	"admin.audio.qualityHintLow": "Kleinste Dateien, optimiert für Sprache.",
 	"admin.audio.stt": "Sprache-zu-Text",
 	"admin.audio.sttHint": "Kompatibel mit OpenAIs Audio-/Transkriptions-API.",
-	"admin.audio.tts": "Text-to-Speech",
-	"admin.audio.enableTts": "Text-to-Speech aktivieren",
-	"admin.audio.ttsEnabledHint": "Aktiviert den Sprachmodus und die Vorlesen-Schaltflächen, wenn ein TTS-Schlüssel verfügbar ist.",
-	"admin.audio.ttsAutoStream": "Stream-Antworten vorlesen",
-	"admin.audio.ttsAutoStreamHint": "Liest jede Assistentenantwort beim Streamen laut vor, auch außerhalb des Sprachmodus.",
-	"admin.audio.ttsKeyPlaceholder": "Leave blank to reuse STT key",
-	"admin.audio.ttsVoice": "Voice",
-	"admin.audio.ttsFormat": "Format",
-	"admin.audio.ttsPlaybackSpeed": "Playback speed",
-	"admin.audio.ttsHint": "Compatible with OpenAI's audio/speech API. If no TTS key is set, the STT key is reused.",
-	"admin.audio.voiceMode": "Voice Mode",
-	"admin.audio.voiceModeSttMode": "Speech recognition",
-	"admin.audio.voiceModeSttBrowser": "Browser",
-	"admin.audio.voiceModeSttProvider": "Configured STT",
-	"admin.audio.voiceModeBrowserSttHint": "Uses browser speech recognition, then stores the audio and transcript locally for the voice data flywheel.",
-	"admin.audio.voiceModeProviderSttHint": "Sends voice-mode audio through the configured STT provider and stores the result locally.",
-	"admin.audio.voiceModeSystemPrompt": "System prompt",
-	"admin.audio.voiceModeSystemPromptHint": "Applied only while voice mode is on. Keep it short to make spoken replies useful.",
+	"admin.audio.tts": "Sprachausgabe",
+	"admin.audio.enableTts": "Sprachausgabe aktivieren",
+	"admin.audio.ttsEnabledHint": "Aktiviert den Sprachmodus und Vorlese-Schaltflächen, wenn ein Sprachausgabe-Schlüssel verfügbar ist.",
+	"admin.audio.ttsAutoStream": "Gestreamte Antworten vorlesen",
+	"admin.audio.ttsAutoStreamHint": "Jede Assistentenantwort während des Streamings laut vorlesen, auch außerhalb des Sprachmodus.",
+	"admin.audio.ttsKeyPlaceholder": "Leer lassen, um den STT-Schlüssel wiederzuverwenden",
+	"admin.audio.ttsVoice": "Stimme",
+	"admin.audio.ttsFormat": "Dateiformat",
+	"admin.audio.ttsPlaybackSpeed": "Wiedergabegeschwindigkeit",
+	"admin.audio.ttsHint": "Kompatibel mit OpenAIs audio/speech API. Wenn kein Sprachausgabe-Schlüssel gesetzt ist, wird der STT-Schlüssel wiederverwendet.",
+	"admin.audio.voiceMode": "Sprachmodus",
+	"admin.audio.voiceModeSttMode": "Spracherkennung",
+	"admin.audio.voiceModeSttBrowser": "Browsererkennung",
+	"admin.audio.voiceModeSttProvider": "Konfigurierte Spracherkennung",
+	"admin.audio.voiceModeBrowserSttHint": "Nutzt die Spracherkennung des Browsers und speichert Audio und Transkript lokal für die Sprachdaten-Schleife.",
+	"admin.audio.voiceModeProviderSttHint": "Sendet Sprachmodus-Audio an den konfigurierten STT-Anbieter und speichert das Ergebnis lokal.",
+	"admin.audio.voiceModeSystemPrompt": "Systemanweisung",
+	"admin.audio.voiceModeSystemPromptHint": "Gilt nur, solange der Sprachmodus aktiv ist. Kurz halten, damit gesprochene Antworten nützlich bleiben.",
 	"admin.audio.saveFailed": "Audioeinstellungen konnten nicht gespeichert werden",
 	"admin.images.title": "Bilder",
 	"admin.images.generation": "Bilderzeugung",
@@ -686,7 +688,7 @@
 	"preview.htmlTitle": "HTML-Vorschau",
 	"preview.emptySheet": "Leeres Blatt",
 	"port.cannotConnect": "Verbindung nicht möglich",
-	"connections.optional": "Optional",
+	"connections.optional": "Optionales Feld",
 	"connections.leaveBlankPlaceholder": "••••••••  (leer lassen zum Beibehalten)",
 	"a11y.dismissNotification": "Benachrichtigung verwerfen",
 	"a11y.chatOptions": "Chat-Optionen",
@@ -705,7 +707,7 @@
 	"messaging.failedToToggle": "Bot konnte nicht umgeschaltet werden",
 	"messaging.failedToDelete": "Bot konnte nicht gelöscht werden",
 	"messaging.editBot": "Bot bearbeiten",
-	"messaging.name": "Name",
+	"messaging.name": "Bezeichnung",
 	"messaging.platform": "Plattform",
 	"messaging.token": "Token",
 	"messaging.tokenKeep": "Leer lassen zum Beibehalten",
@@ -745,7 +747,7 @@
 	"chat.history.title": "Titel",
 	"chat.history.updated": "Aktualisiert",
 	"chat.history.delete": "Löschen",
-	"chat.edit.text": "Text",
+	"chat.edit.text": "Textinhalt",
 	"chat.edit.thought": "Gedanke",
 	"chat.thinking": "Denkt nach",
 	"chat.edit.tool": "Werkzeug",
@@ -754,12 +756,12 @@
 	"chat.voiceModeOn": "Sprachmodus aktiv",
 	"chat.voiceListening": "Hört zu...",
 	"chat.voiceWaiting": "Wartet auf Antwort...",
-	"chat.voiceProviderSttFallback": "Configured STT failed. Used browser transcript.",
-	"chat.voiceProviderSttNoAudio": "Configured STT needs microphone audio, but no voice-mode recording was captured.",
-	"chat.ttsNotConfigured": "Text-to-Speech ist nicht aktiviert oder konfiguriert.",
-	"chat.speakResponses": "Speak responses",
-	"chat.stopSpeaking": "Stop speaking",
-	"chat.fallbackTitle": "Chat",
+	"chat.voiceProviderSttFallback": "Konfigurierte Spracherkennung fehlgeschlagen. Browser-Transkript verwendet.",
+	"chat.voiceProviderSttNoAudio": "Konfigurierte Spracherkennung benötigt Mikrofon-Audio, aber es wurde keine Sprachmodus-Aufnahme erfasst.",
+	"chat.ttsNotConfigured": "Sprachausgabe ist nicht aktiviert oder konfiguriert.",
+	"chat.speakResponses": "Antworten vorlesen",
+	"chat.stopSpeaking": "Vorlesen stoppen",
+	"chat.fallbackTitle": "Unterhaltung",
 	"chat.greeting": "Wie kann ich Ihnen helfen?",
 	"admin.toolServers": "Tool-Server",
 	"toolServers.title": "Tool-Server",
@@ -767,7 +769,7 @@
 	"toolServers.add": "Server hinzufügen",
 	"toolServers.edit": "Server bearbeiten",
 	"toolServers.id": "ID",
-	"toolServers.name": "Name",
+	"toolServers.name": "Bezeichnung",
 	"toolServers.type": "Typ",
 	"toolServers.namePlaceholder": "Optionaler Anzeigename",
 	"toolServers.idPlaceholder": "mein_server",
@@ -785,7 +787,7 @@
 	"toolServers.specPath": "Spec-Pfad",
 	"toolServers.fieldsRequired": "ID und URL sind erforderlich",
 	"toolServers.idInvalid": "ID darf nur Kleinbuchstaben, Zahlen und Unterstriche enthalten",
-	"toolServers.auth": "Auth",
+	"toolServers.auth": "Authentifizierung",
 	"toolServers.authNone": "Keine",
 	"toolServers.authBearer": "Bearer",
 	"toolServers.apiKey": "API-Schlüssel",
@@ -859,5 +861,138 @@
 	"general.persistentYes": "Aktiv",
 	"general.persistentNo": "Nicht gewährt",
 	"general.clearCache": "Cache leeren",
-	"general.cacheCleared": "Cache geleert"
+	"general.cacheCleared": "Cache geleert",
+	"general.uiScale": "Oberflächen-Skalierung",
+	"general.default": "Standard",
+	"general.decreaseUiScale": "Oberfläche verkleinern",
+	"general.increaseUiScale": "Oberfläche vergrößern",
+	"appearance.title": "Erscheinungsbild",
+	"appearance.colors": "Farben",
+	"appearance.interface": "Oberfläche",
+	"appearance.import": "Importieren",
+	"appearance.exportTheme": "Exportieren",
+	"appearance.reset": "Zurücksetzen",
+	"appearance.background": "Hintergrund",
+	"appearance.foreground": "Vordergrund",
+	"appearance.uiFont": "Oberflächenschrift",
+	"appearance.exported": "Design exportiert",
+	"appearance.exportFailed": "Design konnte nicht exportiert werden",
+	"appearance.imported": "Design importiert",
+	"appearance.importFailed": "Design konnte nicht importiert werden",
+	"common.add": "Hinzufügen",
+	"common.forward": "Vorwärts",
+	"common.apply": "Anwenden",
+	"common.reject": "Ablehnen",
+	"connections.provider": "Anbieter",
+	"connections.apiType": "API-Typ",
+	"connections.chatCompletions": "Chat-Vervollständigungen",
+	"connections.responses": "Antworten",
+	"admin.agentsNoProfiles": "Keine Agentenprofile",
+	"models.requestParams": "Anfrageparameter",
+	"models.paramKey": "Schlüssel",
+	"models.paramValue": "Wert",
+	"editor.binaryFile": "Binärdatei",
+	"editor.noChanges": "Keine Änderungen",
+	"editor.noUncommittedModifications": "Diese Datei hat keine nicht committeten Änderungen.",
+	"git.loadChangesFailed": "Git-Änderungen konnten nicht geladen werden",
+	"git.unableToLoadChanges": "Änderungen konnten nicht geladen werden",
+	"git.collapseAll": "Alle einklappen",
+	"git.expandAll": "Alle ausklappen",
+	"git.uncommittedChanges": "Nicht committet",
+	"git.change_one": "{{count}} Änderung",
+	"git.change_other": "{{count}} Änderungen",
+	"git.staged": "Gestaged",
+	"git.noFileChangesYet": "Noch keine Dateiänderungen",
+	"git.projectChangesHint": "Änderungen in diesem Projekt erscheinen hier.",
+	"git.noTextualDiff": "Kein Text-Diff verfügbar",
+	"git.branches": "Zweige",
+	"git.branchActions": "Branch-Aktionen",
+	"git.noBranchesFound": "Keine Branches gefunden",
+	"git.searchWorktrees": "Worktrees suchen",
+	"git.worktrees": "Arbeitsverzeichnisse",
+	"git.noWorktreesFound": "Keine Worktrees gefunden",
+	"git.newWorktree": "Neuer Worktree",
+	"git.unpushedCommit_one": "{{count}} nicht gepushter Commit",
+	"git.unpushedCommit_other": "{{count}} nicht gepushte Commits",
+	"git.unpushed": "Nicht gepusht",
+	"git.switchBranches": "Branch wechseln?",
+	"git.createBranchPrompt": "Branch erstellen?",
+	"git.moveChangesPromptPrefix_one": "Du hast {{count}} geänderte Datei auf",
+	"git.moveChangesPromptPrefix_other": "Du hast {{count}} geänderte Dateien auf",
+	"git.moveChangesPromptMiddle": "Wähle, ob diese Änderungen hier bleiben oder mitgenommen werden zu",
+	"git.leaveChanges": "Änderungen hier lassen",
+	"git.bringChanges": "Änderungen mitnehmen",
+	"git.copyBranchName": "Branch-Namen kopieren",
+	"git.uncommitFailed": "Commit konnte nicht rückgängig gemacht werden",
+	"git.noChangesStashed": "Keine Änderungen gestasht",
+	"git.switchBranchFailed": "Branch konnte nicht gewechselt werden",
+	"git.createWorktreeFailed": "Worktree konnte nicht erstellt werden",
+	"git.createBranchFailed": "Branch konnte nicht erstellt werden",
+	"git.renameBranch": "Branch umbenennen",
+	"git.branchRenamed": "Branch umbenannt",
+	"git.renameBranchFailed": "Branch konnte nicht umbenannt werden",
+	"git.branchNameCopied": "Branch-Name kopiert",
+	"git.deleteBranchConfirm": "Branch \"{{name}}\" löschen?",
+	"git.branchDeleted": "Branch gelöscht",
+	"git.deleteBranchFailed": "Branch konnte nicht gelöscht werden",
+	"automations.automation": "Automatisierung",
+	"automations.once": "Einmal",
+	"automations.hourly": "Stündlich",
+	"automations.daily": "Täglich",
+	"automations.weekly": "Wöchentlich",
+	"automations.monthly": "Monatlich",
+	"automations.custom": "Benutzerdefiniert",
+	"automations.time": "Zeit",
+	"automations.day": "Tag",
+	"automations.dayMo": "Mo.",
+	"automations.dayTu": "Di",
+	"automations.dayWe": "Mi",
+	"automations.dayTh": "Do",
+	"automations.dayFr": "Fr.",
+	"automations.daySa": "Sa.",
+	"automations.daySu": "So",
+	"chat.noSkillsFound": "Keine Skills gefunden",
+	"chat.skills": "Fähigkeiten",
+	"chat.commands": "Befehle",
+	"chat.noOutputItems": "Keine Ausgabeelemente",
+	"chat.failedWithCode": "Fehlgeschlagen {{code}}",
+	"chat.finished": "Abgeschlossen",
+	"chat.terminating": "Wird beendet",
+	"chat.forceTerminate": "Beenden erzwingen",
+	"chat.terminate": "Beenden",
+	"chat.sessionUnavailable": "Live-Sitzung nicht verfügbar. Gespeicherte Ausgabe bleibt im Chat.",
+	"chat.sessions": "Sitzungen",
+	"chat.queuedMessages": "Nachrichten in Warteschlange",
+	"preview.pdfLoadError": "PDF konnte nicht geladen werden.",
+	"preview.visual": "Visuell",
+	"preview.source": "Quelle",
+	"preview.diagramError": "Diagrammfehler",
+	"preview.diagramRenderError": "Diagramm konnte nicht gerendert werden",
+	"a11y.zoomOut": "Verkleinern",
+	"a11y.resetZoom": "Zoom zurücksetzen",
+	"a11y.zoomIn": "Vergrößern",
+	"port.openInNewTab": "In neuem Tab öffnen",
+	"port.notResponding": "localhost:{{port}} antwortet nicht",
+	"port.previewTitle": "Port {{port}} Vorschau",
+	"terminal.dictateInput": "Terminaleingabe diktieren",
+	"a11y.page": "Seite {{page}}",
+	"markdown.linkTo": "Link zu {{target}}",
+	"markdown.boldShortcut": "Fett (⌘B)",
+	"markdown.italicShortcut": "Kursiv (⌘I)",
+	"markdown.underlineShortcut": "Unterstreichen (⌘U)",
+	"markdown.strikethrough": "Durchstreichen",
+	"markdown.inlineCode": "Inline-Code",
+	"markdown.highlight": "Hervorheben",
+	"markdown.heading1": "Überschrift 1",
+	"markdown.heading2": "Überschrift 2",
+	"markdown.heading3": "Überschrift 3",
+	"markdown.bulletList": "Aufzählungsliste",
+	"markdown.numberedList": "Nummerierte Liste",
+	"markdown.taskList": "Aufgabenliste",
+	"markdown.quote": "Zitat",
+	"markdown.codeBlock": "Codeblock",
+	"markdown.horizontalRule": "Horizontale Linie",
+	"markdown.insertTable": "Tabelle einfügen",
+	"markdown.undoShortcut": "Rückgängig (⌘Z)",
+	"markdown.redoShortcut": "Wiederholen (⌘⇧Z)"
 }
diff --git a/cptr/frontend/src/lib/i18n/locales/en.json b/cptr/frontend/src/lib/i18n/locales/en.json
index 28b13821..a77d492b 100644
--- a/cptr/frontend/src/lib/i18n/locales/en.json
+++ b/cptr/frontend/src/lib/i18n/locales/en.json
@@ -84,6 +84,7 @@
 	"search.noRecentChats": "No recent chats",
 	"settings.back": "Back",
 	"settings.general": "General",
+	"settings.appearance": "Appearance",
 	"settings.memory": "Memory",
 	"pwa.settingsTitle": "Progressive Web App",
 	"intent.chooseWorkspace": "Workspace",
@@ -267,6 +268,7 @@
 	"connections.apiKey": "API key",
 	"connections.baseUrl": "Base URL",
 	"connections.prefixId": "Prefix ID",
+	"connections.prefixPlaceholder": "e.g. openrouter",
 	"connections.models": "Models (comma-separated, optional)",
 	"connections.modelsHint": "Leave blank to auto-discover from provider.",
 	"connections.cancel": "Cancel",
@@ -859,5 +861,138 @@
 	"general.persistentYes": "Active",
 	"general.persistentNo": "Not granted",
 	"general.clearCache": "Clear cache",
-	"general.cacheCleared": "Cache cleared"
+	"general.cacheCleared": "Cache cleared",
+	"general.uiScale": "UI Scale",
+	"general.default": "Default",
+	"general.decreaseUiScale": "Decrease UI Scale",
+	"general.increaseUiScale": "Increase UI Scale",
+	"appearance.title": "Appearance",
+	"appearance.colors": "Colors",
+	"appearance.interface": "Interface",
+	"appearance.import": "Import",
+	"appearance.exportTheme": "Export",
+	"appearance.reset": "Reset",
+	"appearance.background": "Background",
+	"appearance.foreground": "Foreground",
+	"appearance.uiFont": "UI font",
+	"appearance.exported": "Theme exported",
+	"appearance.exportFailed": "Failed to export theme",
+	"appearance.imported": "Theme imported",
+	"appearance.importFailed": "Failed to import theme",
+	"common.add": "Add",
+	"common.forward": "Forward",
+	"common.apply": "Apply",
+	"common.reject": "Reject",
+	"connections.provider": "Provider",
+	"connections.apiType": "API Type",
+	"connections.chatCompletions": "Chat Completions",
+	"connections.responses": "Responses",
+	"admin.agentsNoProfiles": "No agent profiles",
+	"models.requestParams": "Request params",
+	"models.paramKey": "key",
+	"models.paramValue": "value",
+	"editor.binaryFile": "Binary file",
+	"editor.noChanges": "No changes",
+	"editor.noUncommittedModifications": "This file has no uncommitted modifications.",
+	"git.loadChangesFailed": "Failed to load git changes",
+	"git.unableToLoadChanges": "Unable to load changes",
+	"git.collapseAll": "Collapse All",
+	"git.expandAll": "Expand All",
+	"git.uncommittedChanges": "Uncommitted",
+	"git.change_one": "{{count}} change",
+	"git.change_other": "{{count}} changes",
+	"git.staged": "Staged",
+	"git.noFileChangesYet": "No file changes yet",
+	"git.projectChangesHint": "Changes in this project will appear here.",
+	"git.noTextualDiff": "No textual diff available",
+	"git.branches": "Branches",
+	"git.branchActions": "Branch actions",
+	"git.noBranchesFound": "No branches found",
+	"git.searchWorktrees": "Search worktrees",
+	"git.worktrees": "Worktrees",
+	"git.noWorktreesFound": "No worktrees found",
+	"git.newWorktree": "New worktree",
+	"git.unpushedCommit_one": "{{count}} unpushed commit",
+	"git.unpushedCommit_other": "{{count}} unpushed commits",
+	"git.unpushed": "Unpushed",
+	"git.switchBranches": "Switch branches?",
+	"git.createBranchPrompt": "Create branch?",
+	"git.moveChangesPromptPrefix_one": "You have {{count}} changed file on",
+	"git.moveChangesPromptPrefix_other": "You have {{count}} changed files on",
+	"git.moveChangesPromptMiddle": "Choose whether to leave those changes here or bring them to",
+	"git.leaveChanges": "Leave changes",
+	"git.bringChanges": "Bring changes",
+	"git.copyBranchName": "Copy branch name",
+	"git.uncommitFailed": "Failed to undo commit",
+	"git.noChangesStashed": "No changes stashed",
+	"git.switchBranchFailed": "Failed to switch branch",
+	"git.createWorktreeFailed": "Failed to create worktree",
+	"git.createBranchFailed": "Failed to create branch",
+	"git.renameBranch": "Rename branch",
+	"git.branchRenamed": "Branch renamed",
+	"git.renameBranchFailed": "Failed to rename branch",
+	"git.branchNameCopied": "Branch name copied",
+	"git.deleteBranchConfirm": "Delete branch \"{{name}}\"?",
+	"git.branchDeleted": "Branch deleted",
+	"git.deleteBranchFailed": "Failed to delete branch",
+	"automations.automation": "Automation",
+	"automations.once": "Once",
+	"automations.hourly": "Hourly",
+	"automations.daily": "Daily",
+	"automations.weekly": "Weekly",
+	"automations.monthly": "Monthly",
+	"automations.custom": "Custom",
+	"automations.time": "Time",
+	"automations.day": "Day",
+	"automations.dayMo": "Mo",
+	"automations.dayTu": "Tu",
+	"automations.dayWe": "We",
+	"automations.dayTh": "Th",
+	"automations.dayFr": "Fr",
+	"automations.daySa": "Sa",
+	"automations.daySu": "Su",
+	"chat.noSkillsFound": "No skills found",
+	"chat.skills": "Skills",
+	"chat.commands": "Commands",
+	"chat.noOutputItems": "No output items",
+	"chat.failedWithCode": "Failed {{code}}",
+	"chat.finished": "Finished",
+	"chat.terminating": "Terminating",
+	"chat.forceTerminate": "Force terminate",
+	"chat.terminate": "Terminate",
+	"chat.sessionUnavailable": "Live session unavailable. Saved output remains in the chat.",
+	"chat.sessions": "Sessions",
+	"chat.queuedMessages": "Queued messages",
+	"preview.pdfLoadError": "Failed to load PDF.",
+	"preview.visual": "Visual",
+	"preview.source": "Source",
+	"preview.diagramError": "Diagram error",
+	"preview.diagramRenderError": "Failed to render diagram",
+	"a11y.zoomOut": "Zoom out",
+	"a11y.resetZoom": "Reset zoom",
+	"a11y.zoomIn": "Zoom in",
+	"port.openInNewTab": "Open in new tab",
+	"port.notResponding": "localhost:{{port}} is not responding",
+	"port.previewTitle": "Port {{port}} preview",
+	"terminal.dictateInput": "Dictate terminal input",
+	"a11y.page": "Page {{page}}",
+	"markdown.linkTo": "Link to {{target}}",
+	"markdown.boldShortcut": "Bold (⌘B)",
+	"markdown.italicShortcut": "Italic (⌘I)",
+	"markdown.underlineShortcut": "Underline (⌘U)",
+	"markdown.strikethrough": "Strikethrough",
+	"markdown.inlineCode": "Inline code",
+	"markdown.highlight": "Highlight",
+	"markdown.heading1": "Heading 1",
+	"markdown.heading2": "Heading 2",
+	"markdown.heading3": "Heading 3",
+	"markdown.bulletList": "Bullet list",
+	"markdown.numberedList": "Numbered list",
+	"markdown.taskList": "Task list",
+	"markdown.quote": "Quote",
+	"markdown.codeBlock": "Code block",
+	"markdown.horizontalRule": "Horizontal rule",
+	"markdown.insertTable": "Insert table",
+	"markdown.undoShortcut": "Undo (⌘Z)",
+	"markdown.redoShortcut": "Redo (⌘⇧Z)"
 }
diff --git a/cptr/frontend/src/lib/i18n/locales/es.json b/cptr/frontend/src/lib/i18n/locales/es.json
index 18a48e08..26bd64d6 100644
--- a/cptr/frontend/src/lib/i18n/locales/es.json
+++ b/cptr/frontend/src/lib/i18n/locales/es.json
@@ -77,19 +77,20 @@
 	"quickOpen.noFiles": "No se encontraron archivos",
 	"search.placeholder": "Buscar...",
 	"search.search": "Buscar",
-	"search.chats": "Chats",
+	"search.chats": "Conversaciones",
 	"search.files": "Archivos",
 	"search.noResults": "No se encontraron resultados",
 	"search.recentChats": "Chats recientes",
 	"search.noRecentChats": "Sin chats recientes",
 	"settings.back": "Atrás",
-	"settings.general": "General",
+	"settings.general": "Configuración general",
+	"settings.appearance": "Apariencia",
 	"settings.memory": "Memoria",
 	"pwa.settingsTitle": "Aplicación web progresiva",
 	"intent.chooseWorkspace": "Espacio de trabajo",
 	"intent.newNote": "Nota",
-	"intent.newChat": "Chat",
-	"intent.newTerminal": "Terminal",
+	"intent.newChat": "Nuevo chat",
+	"intent.newTerminal": "Nueva terminal",
 	"intent.share": "Compartir",
 	"intent.importFiles": "Importar archivos",
 	"pwa.cancel": "Cancelar",
@@ -125,7 +126,7 @@
 	"memory.reviewEvery": "Revisar cada",
 	"memory.userLimit": "Límite de usuario",
 	"memory.userMemory": "Memoria de usuario",
-	"general.title": "General",
+	"general.title": "Configuración general",
 	"general.theme": "Tema",
 	"general.light": "Claro",
 	"general.dark": "Oscuro",
@@ -157,16 +158,16 @@
 	"git.changes": "Cambios",
 	"git.history": "Historial",
 	"git.fetch": "Obtener",
-	"git.pull": "Pull",
-	"git.push": "Push",
+	"git.pull": "Traer",
+	"git.push": "Enviar",
 	"git.publish": "Publicar",
-	"git.pullCount": "Pull ↓{{count}}",
-	"git.pushCount": "Push ↑{{count}}",
+	"git.pullCount": "Traer ↓{{count}}",
+	"git.pushCount": "Enviar ↑{{count}}",
 	"git.committed": "Confirmado",
 	"git.pulled": "Obtenido",
 	"git.pushed": "Enviado",
 	"git.uncommit": "Deshacer",
-	"git.uncommitted": "Commit deshecho",
+	"git.uncommitted": "Confirmación deshecha",
 	"git.uncommitTooltip": "Deshacer el último commit (mantiene los cambios preparados)",
 	"git.discarded": "Descartado",
 	"git.copiedPath": "Ruta copiada",
@@ -243,7 +244,7 @@
 	"admin.agentsCommand": "Comando",
 	"admin.agentsHome": "Ruta de inicio",
 	"admin.agentsApprovalMode": "Modo de aprobación",
-	"admin.agentsSandboxMode": "Sandbox",
+	"admin.agentsSandboxMode": "Modo de aislamiento",
 	"admin.agentsPermissionMode": "Modo de permisos",
 	"admin.agentsLaunchArgs": "Argumentos de inicio",
 	"admin.agentsApiEndpoint": "Endpoint de API",
@@ -253,7 +254,7 @@
 	"admin.agentsStatusNotFound": "No encontrado",
 	"admin.agentsStatusMissingDependency": "Dependencia faltante",
 	"admin.agentsStatusAuthUnknown": "Autenticación desconocida",
-	"admin.agentsStatusError": "Error",
+	"admin.agentsStatusError": "Con error",
 	"connections.loadError": "Error al cargar conexiones",
 	"connections.fieldsRequired": "Se requieren la URL base y la clave de API",
 	"connections.added": "Conexión agregada",
@@ -267,6 +268,7 @@
 	"connections.apiKey": "Clave de API",
 	"connections.baseUrl": "URL base",
 	"connections.prefixId": "ID de prefijo",
+	"connections.prefixPlaceholder": "p. ej. openrouter",
 	"connections.models": "Modelos (separados por comas, opcional)",
 	"connections.modelsHint": "Dejar en blanco para auto-descubrir del proveedor.",
 	"connections.cancel": "Cancelar",
@@ -285,8 +287,8 @@
 	"home.terminalShort_other": "{{count}} terminales",
 	"home.activeChat_one": "{{count}} chat activo",
 	"home.activeChat_other": "{{count}} chats activos",
-	"home.chat_one": "{{count}} chat",
-	"home.chat_other": "{{count}} chats",
+	"home.chat_one": "{{count}} conversación",
+	"home.chat_other": "{{count}} conversaciones",
 	"home.folders": "Sugeridos",
 	"home.chatComingSoon": "Chat (próximamente)",
 	"directory.cancel": "Cancelar",
@@ -294,7 +296,7 @@
 	"directory.hidden": "Ocultos",
 	"directory.noSubdirectories": "Sin subdirectorios",
 	"directory.goBack": "Volver",
-	"directory.typePath": "Type a path... (Tab to complete)",
+	"directory.typePath": "Escribe una ruta... (Tab para completar)",
 	"directory.retry": "Reintentar",
 	"saveDialog.fileNamePlaceholder": "Nombre de archivo…",
 	"saveDialog.emptyFolder": "Carpeta vacía",
@@ -314,8 +316,8 @@
 	"system.disk": "Disco",
 	"system.cores": "{{count}} núcleos",
 	"system.process": "PROCESO",
-	"system.summaryCpu": "cpu {{percent}}%",
-	"system.summaryMemory": "mem {{percent}}%",
+	"system.summaryCpu": "CPU {{percent}}%",
+	"system.summaryMemory": "memoria {{percent}}%",
 	"system.summaryDisk": "disco {{percent}}%",
 	"system.uptime": "activo {{value}}",
 	"system.load": "carga {{value}}",
@@ -341,7 +343,7 @@
 	"admin.webPerplexityHint": "Obtén tu clave de API en perplexity.ai",
 	"admin.webPerplexityBaseUrl": "URL base",
 	"admin.webPerplexityBaseUrlHint": "Dejar en blanco para api.perplexity.ai. Cambiar para LiteLLM u otros proxies compatibles.",
-	"admin.webChatCompletions": "Chat Completions",
+	"admin.webChatCompletions": "Completados de chat",
 	"admin.webCcBaseUrl": "URL base",
 	"admin.webCcKey": "Clave de API",
 	"admin.webCcModel": "Modelo",
@@ -387,7 +389,7 @@
 	"models.systemPrompt": "Prompt del sistema",
 	"models.systemPromptHint": "Instrucciones predeterminadas enviadas al modelo. Usa {{VARIABLES}} para contenido dinámico.",
 	"models.systemPromptInherited": "Hereda el predeterminado global",
-	"models.templateVariables": "Variables",
+	"models.templateVariables": "Variables de plantilla",
 	"models.resetToDefault": "Restablecer",
 	"update.available": "Hay una nueva versión (v{{version}}) disponible.",
 	"update.viewRelease": "Ver notas de la versión →",
@@ -463,7 +465,7 @@
 	"automations.enable": "Activar",
 	"automations.copied": "¡Copiado!",
 	"automations.copy": "Copiar",
-	"automations.prompt": "Prompt",
+	"automations.prompt": "Instrucción",
 	"automations.runs": "Ejecuciones",
 	"automations.noRuns": "Aún no hay ejecuciones",
 	"automations.viewChat": "ver chat →",
@@ -492,8 +494,8 @@
 	"automationModal.createBtn": "Crear",
 	"automationModal.failedToSave": "No se pudo guardar la automatización",
 	"connections.failedToUpdate": "Error al actualizar conexión",
-	"admin.gateway.tab": "Gateway",
-	"admin.gateway.title": "API Gateway",
+	"admin.gateway.tab": "Puerta de enlace",
+	"admin.gateway.title": "Puerta de enlace de API",
 	"admin.gateway.description": "Genera claves API para conectar Open WebUI o cualquier cliente compatible con OpenAI a tus espacios de trabajo.",
 	"admin.gateway.loadError": "Error al cargar las claves API",
 	"admin.gateway.model": "Modelo de respuesta",
@@ -645,24 +647,24 @@
 	"admin.audio.qualityHintLow": "Archivos más pequeños, optimizado para voz.",
 	"admin.audio.stt": "Voz a texto",
 	"admin.audio.sttHint": "Compatible con la API de audio/transcripciones de OpenAI.",
-	"admin.audio.tts": "Text-to-Speech",
-	"admin.audio.enableTts": "Enable Text-to-Speech",
-	"admin.audio.ttsEnabledHint": "Enables voice mode and assistant speak buttons when a TTS key is available.",
-	"admin.audio.ttsAutoStream": "Speak streamed responses",
-	"admin.audio.ttsAutoStreamHint": "Read every assistant response aloud as it streams, even outside voice mode.",
-	"admin.audio.ttsKeyPlaceholder": "Leave blank to reuse STT key",
-	"admin.audio.ttsVoice": "Voice",
-	"admin.audio.ttsFormat": "Format",
-	"admin.audio.ttsPlaybackSpeed": "Playback speed",
-	"admin.audio.ttsHint": "Compatible with OpenAI's audio/speech API. If no TTS key is set, the STT key is reused.",
-	"admin.audio.voiceMode": "Voice Mode",
-	"admin.audio.voiceModeSttMode": "Speech recognition",
-	"admin.audio.voiceModeSttBrowser": "Browser",
-	"admin.audio.voiceModeSttProvider": "Configured STT",
-	"admin.audio.voiceModeBrowserSttHint": "Uses browser speech recognition, then stores the audio and transcript locally for the voice data flywheel.",
-	"admin.audio.voiceModeProviderSttHint": "Sends voice-mode audio through the configured STT provider and stores the result locally.",
-	"admin.audio.voiceModeSystemPrompt": "System prompt",
-	"admin.audio.voiceModeSystemPromptHint": "Applied only while voice mode is on. Keep it short to make spoken replies useful.",
+	"admin.audio.tts": "Texto a voz",
+	"admin.audio.enableTts": "Activar texto a voz",
+	"admin.audio.ttsEnabledHint": "Activa el modo de voz y los botones para leer respuestas cuando haya una clave de texto a voz disponible.",
+	"admin.audio.ttsAutoStream": "Leer respuestas en streaming",
+	"admin.audio.ttsAutoStreamHint": "Lee en voz alta cada respuesta del asistente mientras se transmite, incluso fuera del modo de voz.",
+	"admin.audio.ttsKeyPlaceholder": "Déjalo en blanco para reutilizar la clave de STT",
+	"admin.audio.ttsVoice": "Voz",
+	"admin.audio.ttsFormat": "Formato",
+	"admin.audio.ttsPlaybackSpeed": "Velocidad de reproducción",
+	"admin.audio.ttsHint": "Compatible con la API audio/speech de OpenAI. Si no se define una clave de texto a voz, se reutiliza la clave de STT.",
+	"admin.audio.voiceMode": "Modo de voz",
+	"admin.audio.voiceModeSttMode": "Reconocimiento de voz",
+	"admin.audio.voiceModeSttBrowser": "Navegador",
+	"admin.audio.voiceModeSttProvider": "STT configurado",
+	"admin.audio.voiceModeBrowserSttHint": "Usa el reconocimiento de voz del navegador y luego guarda el audio y la transcripción localmente para el ciclo de datos de voz.",
+	"admin.audio.voiceModeProviderSttHint": "Envía el audio del modo de voz al proveedor STT configurado y guarda el resultado localmente.",
+	"admin.audio.voiceModeSystemPrompt": "Instrucción del sistema",
+	"admin.audio.voiceModeSystemPromptHint": "Se aplica solo mientras el modo de voz está activo. Mantenla breve para que las respuestas habladas sean útiles.",
 	"admin.audio.saveFailed": "No se pudieron guardar los ajustes de audio",
 	"admin.images.title": "Imágenes",
 	"admin.images.generation": "Generación de imágenes",
@@ -751,15 +753,15 @@
 	"chat.edit.tool": "Herramienta",
 	"chat.edit.item": "Elemento",
 	"chat.dictate.unsupported": "El reconocimiento de voz no es compatible con este navegador.",
-	"chat.voiceModeOn": "Voice mode on",
-	"chat.voiceListening": "Listening...",
-	"chat.voiceWaiting": "Waiting for response...",
-	"chat.voiceProviderSttFallback": "Configured STT failed. Used browser transcript.",
-	"chat.voiceProviderSttNoAudio": "Configured STT needs microphone audio, but no voice-mode recording was captured.",
-	"chat.ttsNotConfigured": "Text-to-Speech is not enabled or configured.",
-	"chat.speakResponses": "Speak responses",
-	"chat.stopSpeaking": "Stop speaking",
-	"chat.fallbackTitle": "Chat",
+	"chat.voiceModeOn": "Modo de voz activado",
+	"chat.voiceListening": "Escuchando...",
+	"chat.voiceWaiting": "Esperando respuesta...",
+	"chat.voiceProviderSttFallback": "Falló el STT configurado. Se usó la transcripción del navegador.",
+	"chat.voiceProviderSttNoAudio": "El STT configurado necesita audio del micrófono, pero no se capturó ninguna grabación del modo de voz.",
+	"chat.ttsNotConfigured": "Texto a voz no está activado ni configurado.",
+	"chat.speakResponses": "Leer respuestas",
+	"chat.stopSpeaking": "Detener lectura",
+	"chat.fallbackTitle": "Conversación",
 	"chat.greeting": "¿En qué puedo ayudarte?",
 	"admin.toolServers": "Servidores de herramientas",
 	"toolServers.title": "Servidores de herramientas",
@@ -785,7 +787,7 @@
 	"toolServers.specPath": "Ruta de spec",
 	"toolServers.fieldsRequired": "ID y URL son obligatorios",
 	"toolServers.idInvalid": "El ID solo puede contener letras minúsculas, números y guiones bajos",
-	"toolServers.auth": "Auth",
+	"toolServers.auth": "Autenticación",
 	"toolServers.authNone": "Ninguna",
 	"toolServers.authBearer": "Bearer",
 	"toolServers.apiKey": "Clave API",
@@ -822,7 +824,7 @@
 	"admin.subagentsSystemPromptHint": "Dejar vacío para el valor predeterminado.",
 	"admin.contextCompaction": "Compactación de contexto",
 	"admin.compactTokenThreshold": "Umbral de tokens",
-	"admin.compactTokenThresholdUnit": "tokens",
+	"admin.compactTokenThresholdUnit": "fichas",
 	"admin.compactTokenThresholdHint": "Los mensajes antiguos se resumen cuando el contexto estimado supera este límite. Predeterminado: 80.000.",
 	"onboarding.welcomeTitle": "Tu computadora, desde cualquier lugar",
 	"onboarding.welcomeDesc": "Programa, administra y controla tu máquina desde cualquier dispositivo.",
@@ -859,5 +861,138 @@
 	"general.persistentYes": "Activo",
 	"general.persistentNo": "No concedido",
 	"general.clearCache": "Borrar caché",
-	"general.cacheCleared": "Caché borrada"
+	"general.cacheCleared": "Caché borrada",
+	"general.uiScale": "Escala de la interfaz",
+	"general.default": "Predeterminado",
+	"general.decreaseUiScale": "Reducir escala de la interfaz",
+	"general.increaseUiScale": "Aumentar escala de la interfaz",
+	"appearance.title": "Apariencia",
+	"appearance.colors": "Colores",
+	"appearance.interface": "Interfaz",
+	"appearance.import": "Importar",
+	"appearance.exportTheme": "Exportar",
+	"appearance.reset": "Restablecer",
+	"appearance.background": "Fondo",
+	"appearance.foreground": "Primer plano",
+	"appearance.uiFont": "Fuente de interfaz",
+	"appearance.exported": "Tema exportado",
+	"appearance.exportFailed": "Error al exportar el tema",
+	"appearance.imported": "Tema importado",
+	"appearance.importFailed": "Error al importar el tema",
+	"common.add": "Añadir",
+	"common.forward": "Adelante",
+	"common.apply": "Aplicar",
+	"common.reject": "Rechazar",
+	"connections.provider": "Proveedor",
+	"connections.apiType": "Tipo de API",
+	"connections.chatCompletions": "Completados de chat",
+	"connections.responses": "Respuestas",
+	"admin.agentsNoProfiles": "No hay perfiles de agente",
+	"models.requestParams": "Parámetros de solicitud",
+	"models.paramKey": "clave",
+	"models.paramValue": "valor",
+	"editor.binaryFile": "Archivo binario",
+	"editor.noChanges": "Sin cambios",
+	"editor.noUncommittedModifications": "Este archivo no tiene modificaciones sin confirmar.",
+	"git.loadChangesFailed": "No se pudieron cargar los cambios de git",
+	"git.unableToLoadChanges": "No se pueden cargar los cambios",
+	"git.collapseAll": "Contraer todo",
+	"git.expandAll": "Expandir todo",
+	"git.uncommittedChanges": "Sin confirmar",
+	"git.change_one": "{{count}} cambio",
+	"git.change_other": "{{count}} cambios",
+	"git.staged": "Preparado",
+	"git.noFileChangesYet": "Aún no hay cambios en archivos",
+	"git.projectChangesHint": "Los cambios de este proyecto aparecerán aquí.",
+	"git.noTextualDiff": "No hay diff textual disponible",
+	"git.branches": "Ramas",
+	"git.branchActions": "Acciones de rama",
+	"git.noBranchesFound": "No se encontraron ramas",
+	"git.searchWorktrees": "Buscar worktrees",
+	"git.worktrees": "Árboles de trabajo",
+	"git.noWorktreesFound": "No se encontraron worktrees",
+	"git.newWorktree": "Nuevo worktree",
+	"git.unpushedCommit_one": "{{count}} commit sin enviar",
+	"git.unpushedCommit_other": "{{count}} commits sin enviar",
+	"git.unpushed": "Sin enviar",
+	"git.switchBranches": "¿Cambiar de rama?",
+	"git.createBranchPrompt": "¿Crear rama?",
+	"git.moveChangesPromptPrefix_one": "Tienes {{count}} archivo cambiado en",
+	"git.moveChangesPromptPrefix_other": "Tienes {{count}} archivos cambiados en",
+	"git.moveChangesPromptMiddle": "Elige si dejar esos cambios aquí o llevarlos a",
+	"git.leaveChanges": "Dejar cambios",
+	"git.bringChanges": "Llevar cambios",
+	"git.copyBranchName": "Copiar nombre de rama",
+	"git.uncommitFailed": "No se pudo deshacer el commit",
+	"git.noChangesStashed": "No se guardaron cambios en stash",
+	"git.switchBranchFailed": "No se pudo cambiar de rama",
+	"git.createWorktreeFailed": "No se pudo crear el worktree",
+	"git.createBranchFailed": "No se pudo crear la rama",
+	"git.renameBranch": "Renombrar rama",
+	"git.branchRenamed": "Rama renombrada",
+	"git.renameBranchFailed": "No se pudo renombrar la rama",
+	"git.branchNameCopied": "Nombre de rama copiado",
+	"git.deleteBranchConfirm": "¿Eliminar rama \"{{name}}\"?",
+	"git.branchDeleted": "Rama eliminada",
+	"git.deleteBranchFailed": "No se pudo eliminar la rama",
+	"automations.automation": "Automatización",
+	"automations.once": "Una vez",
+	"automations.hourly": "Cada hora",
+	"automations.daily": "Diario",
+	"automations.weekly": "Semanal",
+	"automations.monthly": "Mensual",
+	"automations.custom": "Personalizado",
+	"automations.time": "Hora",
+	"automations.day": "Día",
+	"automations.dayMo": "Lu",
+	"automations.dayTu": "Ma",
+	"automations.dayWe": "Mi",
+	"automations.dayTh": "Ju",
+	"automations.dayFr": "Vi",
+	"automations.daySa": "Sáb",
+	"automations.daySu": "Do",
+	"chat.noSkillsFound": "No se encontraron habilidades",
+	"chat.skills": "Habilidades",
+	"chat.commands": "Comandos",
+	"chat.noOutputItems": "No hay elementos de salida",
+	"chat.failedWithCode": "Falló {{code}}",
+	"chat.finished": "Finalizado",
+	"chat.terminating": "Terminando",
+	"chat.forceTerminate": "Forzar terminación",
+	"chat.terminate": "Terminar",
+	"chat.sessionUnavailable": "La sesión en vivo no está disponible. La salida guardada permanece en el chat.",
+	"chat.sessions": "Sesiones",
+	"chat.queuedMessages": "Mensajes en cola",
+	"preview.pdfLoadError": "No se pudo cargar el PDF.",
+	"preview.visual": "Vista visual",
+	"preview.source": "Fuente",
+	"preview.diagramError": "Error de diagrama",
+	"preview.diagramRenderError": "No se pudo renderizar el diagrama",
+	"a11y.zoomOut": "Alejar",
+	"a11y.resetZoom": "Restablecer zoom",
+	"a11y.zoomIn": "Acercar",
+	"port.openInNewTab": "Abrir en una pestaña nueva",
+	"port.notResponding": "localhost:{{port}} no responde",
+	"port.previewTitle": "Vista previa del puerto {{port}}",
+	"terminal.dictateInput": "Dictar entrada del terminal",
+	"a11y.page": "Página {{page}}",
+	"markdown.linkTo": "Enlace a {{target}}",
+	"markdown.boldShortcut": "Negrita (⌘B)",
+	"markdown.italicShortcut": "Cursiva (⌘I)",
+	"markdown.underlineShortcut": "Subrayado (⌘U)",
+	"markdown.strikethrough": "Tachado",
+	"markdown.inlineCode": "Código en línea",
+	"markdown.highlight": "Resaltar",
+	"markdown.heading1": "Encabezado 1",
+	"markdown.heading2": "Encabezado 2",
+	"markdown.heading3": "Encabezado 3",
+	"markdown.bulletList": "Lista con viñetas",
+	"markdown.numberedList": "Lista numerada",
+	"markdown.taskList": "Lista de tareas",
+	"markdown.quote": "Cita",
+	"markdown.codeBlock": "Bloque de código",
+	"markdown.horizontalRule": "Línea horizontal",
+	"markdown.insertTable": "Insertar tabla",
+	"markdown.undoShortcut": "Deshacer (⌘Z)",
+	"markdown.redoShortcut": "Rehacer (⌘⇧Z)"
 }
diff --git a/cptr/frontend/src/lib/i18n/locales/fr.json b/cptr/frontend/src/lib/i18n/locales/fr.json
index bc8cb85e..c3dc35e6 100644
--- a/cptr/frontend/src/lib/i18n/locales/fr.json
+++ b/cptr/frontend/src/lib/i18n/locales/fr.json
@@ -39,7 +39,7 @@
 	"files.filter": "Filtrer...",
 	"files.refresh": "Actualiser",
 	"files.sort": "Trier",
-	"files.actions": "Actions",
+	"files.actions": "Opérations",
 	"files.newFile": "Nouveau fichier",
 	"files.newFolder": "Nouveau dossier",
 	"files.uploadFile": "Importer un fichier",
@@ -60,10 +60,10 @@
 	"files.rename": "Renommer",
 	"files.download": "Télécharger",
 	"files.delete": "Supprimer",
-	"files.ports": "Ports",
+	"files.ports": "Ports réseau",
 	"files.name": "Nom",
 	"files.size": "Taille",
-	"files.date": "Date",
+	"files.date": "Date de modification",
 	"files.folder": "dossier",
 	"files.file": "fichier",
 	"files.clickToPreview": "{{process}} — cliquer pour prévisualiser",
@@ -84,12 +84,13 @@
 	"search.noRecentChats": "Aucune conversation récente",
 	"settings.back": "Retour",
 	"settings.general": "Général",
+	"settings.appearance": "Apparence",
 	"settings.memory": "Mémoire",
 	"pwa.settingsTitle": "Application web progressive",
 	"intent.chooseWorkspace": "Espace de travail",
-	"intent.newNote": "Note",
-	"intent.newChat": "Chat",
-	"intent.newTerminal": "Terminal",
+	"intent.newNote": "Nouvelle note",
+	"intent.newChat": "Nouvelle discussion",
+	"intent.newTerminal": "Nouveau terminal",
 	"intent.share": "Partager",
 	"intent.importFiles": "Importer des fichiers",
 	"pwa.cancel": "Annuler",
@@ -178,7 +179,7 @@
 	"git.commitFilesToBranch_other": "Valider {{count}} fichiers sur {{branch}}",
 	"git.commitToBranch": "Valider sur {{branch}}",
 	"git.summaryRequired": "Résumé (obligatoire)",
-	"git.description": "Description",
+	"git.description": "Détails",
 	"git.commit": "Valider",
 	"git.commitMessage": "Message de validation...",
 	"git.selectCommit": "Sélectionnez un commit pour voir les modifications",
@@ -233,17 +234,17 @@
 	"admin.usernameRequired": "Nom d'utilisateur requis",
 	"admin.minCharsPassword": "6 caractères minimum",
 	"admin.connections": "Connexions",
-	"admin.agents": "Agents",
+	"admin.agents": "Assistants",
 	"admin.agentsRefresh": "Actualiser",
 	"admin.agentsAddProfile": "Ajouter un profil",
 	"admin.agentsDeleteProfile": "Supprimer",
 	"admin.agentsProfileName": "Nom",
 	"admin.agentsProfileId": "ID du profil",
-	"admin.agentsType": "Agent",
+	"admin.agentsType": "Type d'agent",
 	"admin.agentsCommand": "Commande",
 	"admin.agentsHome": "Chemin personnel",
 	"admin.agentsApprovalMode": "Mode d’approbation",
-	"admin.agentsSandboxMode": "Sandbox",
+	"admin.agentsSandboxMode": "Mode bac à sable",
 	"admin.agentsPermissionMode": "Mode d’autorisations",
 	"admin.agentsLaunchArgs": "Arguments de lancement",
 	"admin.agentsApiEndpoint": "Point de terminaison API",
@@ -267,6 +268,7 @@
 	"connections.apiKey": "Clé API",
 	"connections.baseUrl": "URL de base",
 	"connections.prefixId": "ID de préfixe",
+	"connections.prefixPlaceholder": "p. ex. openrouter",
 	"connections.models": "Modèles (séparés par des virgules, facultatif)",
 	"connections.modelsHint": "Laisser vide pour la découverte automatique du fournisseur.",
 	"connections.cancel": "Annuler",
@@ -285,8 +287,8 @@
 	"home.terminalShort_other": "{{count}} terminaux",
 	"home.activeChat_one": "{{count}} chat actif",
 	"home.activeChat_other": "{{count}} chats actifs",
-	"home.chat_one": "{{count}} chat",
-	"home.chat_other": "{{count}} chats",
+	"home.chat_one": "{{count}} discussion",
+	"home.chat_other": "{{count}} discussions",
 	"home.folders": "Suggérés",
 	"home.chatComingSoon": "Chat (bientôt disponible)",
 	"directory.cancel": "Annuler",
@@ -294,7 +296,7 @@
 	"directory.hidden": "Masqués",
 	"directory.noSubdirectories": "Aucun sous-répertoire",
 	"directory.goBack": "Retour",
-	"directory.typePath": "Type a path... (Tab to complete)",
+	"directory.typePath": "Saisir un chemin... (Tab pour compléter)",
 	"directory.retry": "Réessayer",
 	"saveDialog.fileNamePlaceholder": "Nom du fichier…",
 	"saveDialog.emptyFolder": "Dossier vide",
@@ -303,7 +305,7 @@
 	"saveDialog.hidden": "Masqués",
 	"saveDialog.retry": "Réessayer",
 	"port.preview": "Aperçu",
-	"port.via": "via {{name}}",
+	"port.via": "par {{name}}",
 	"system.title": "Système",
 	"system.infoTitle": "Infos système",
 	"system.unavailable": "Infos système indisponibles",
@@ -314,18 +316,18 @@
 	"system.disk": "Disque",
 	"system.cores": "{{count}} cœurs",
 	"system.process": "PROCESSUS",
-	"system.summaryCpu": "cpu {{percent}}%",
+	"system.summaryCpu": "processeur {{percent}}%",
 	"system.summaryMemory": "mém {{percent}}%",
 	"system.summaryDisk": "disque {{percent}}%",
 	"system.uptime": "actif {{value}}",
 	"system.load": "charge {{value}}",
-	"admin.web": "Web",
+	"admin.web": "Recherche web",
 	"admin.webSearch": "Recherche",
 	"admin.webEnabled": "Activer l’accès web",
 	"admin.webEnabledHint": "L’IA peut rechercher sur le web et récupérer des URL.",
 	"admin.webDisabledHint": "La recherche web et la récupération d’URL sont désactivées.",
 	"admin.webSearchProvider": "Fournisseur de recherche",
-	"admin.webProviderAuto": "Auto",
+	"admin.webProviderAuto": "Automatique",
 	"admin.webAutoHint": "Sélectionne automatiquement le meilleur fournisseur disponible.",
 	"admin.webExaKey": "Clé API Exa",
 	"admin.webExaHint": "Obtenez votre clé API sur exa.ai",
@@ -341,7 +343,7 @@
 	"admin.webPerplexityHint": "Obtenez votre clé API sur perplexity.ai",
 	"admin.webPerplexityBaseUrl": "URL de base",
 	"admin.webPerplexityBaseUrlHint": "Laisser vide pour api.perplexity.ai. Modifier pour LiteLLM ou d'autres proxies compatibles.",
-	"admin.webChatCompletions": "Chat Completions",
+	"admin.webChatCompletions": "Complétions de chat",
 	"admin.webCcBaseUrl": "URL de base",
 	"admin.webCcKey": "Clé API",
 	"admin.webCcModel": "Modèle",
@@ -361,7 +363,7 @@
 	"admin.browserCdpUrl": "URL CDP",
 	"admin.browserTest": "Tester",
 	"admin.browserSessionTimeout": "Délai d'expiration de session",
-	"admin.browserMinutes": "minutes",
+	"admin.browserMinutes": "min",
 	"admin.browserApiKey": "Clé API",
 	"admin.browserBaseUrl": "URL de base",
 	"admin.browserFirecrawlBaseUrlHint": "Modifier pour les instances Firecrawl auto-hébergées",
@@ -387,12 +389,12 @@
 	"models.systemPrompt": "Prompt système",
 	"models.systemPromptHint": "Instructions par défaut envoyées au modèle. Utilisez {{VARIABLES}} pour le contenu dynamique.",
 	"models.systemPromptInherited": "Hérite de la valeur par défaut globale",
-	"models.templateVariables": "Variables",
+	"models.templateVariables": "Variables de modèle",
 	"models.resetToDefault": "Réinitialiser",
 	"update.available": "Une nouvelle version (v{{version}}) est disponible.",
 	"update.viewRelease": "Voir les notes de version →",
 	"update.updateAvailable": "Mise à jour disponible : v{{version}}",
-	"general.notifications": "Notifications",
+	"general.notifications": "Alertes",
 	"general.browserNotifications": "Notifications du navigateur",
 	"general.browserNotificationsDesc": "Afficher les notifications du système lorsqu'une tâche se termine et que l'onglet n'est pas actif.",
 	"general.notificationSound": "Son de notification",
@@ -449,7 +451,7 @@
 	"automations.noAutomations": "Aucune automatisation",
 	"automations.create": "Créer une automatisation",
 	"automations.status": "Statut",
-	"automations.active": "Active",
+	"automations.active": "Actif",
 	"automations.paused": "En pause",
 	"automations.all": "Toutes",
 	"automations.schedule": "Planification",
@@ -463,7 +465,7 @@
 	"automations.enable": "Activer",
 	"automations.copied": "Copié !",
 	"automations.copy": "Copier",
-	"automations.prompt": "Prompt",
+	"automations.prompt": "Invite",
 	"automations.runs": "Exécutions",
 	"automations.noRuns": "Aucune exécution",
 	"automations.viewChat": "voir le chat →",
@@ -483,7 +485,7 @@
 	"automations.newAutomation": "Nouvelle automatisation",
 	"automations.toggleSidebar": "Afficher/masquer la barre latérale",
 	"automationModal.titlePlaceholder": "Titre de l'automatisation",
-	"automationModal.instructions": "Instructions",
+	"automationModal.instructions": "Consignes",
 	"automationModal.promptPlaceholder": "Saisissez le prompt ici...",
 	"automationModal.selectWorkspace": "Sélectionner un espace de travail",
 	"automationModal.cancel": "Annuler",
@@ -645,26 +647,26 @@
 	"admin.audio.qualityHintLow": "Fichiers les plus petits, optimisé pour la parole.",
 	"admin.audio.stt": "Reconnaissance vocale",
 	"admin.audio.sttHint": "Compatible avec l'API audio/transcriptions d'OpenAI.",
-	"admin.audio.tts": "Text-to-Speech",
-	"admin.audio.enableTts": "Enable Text-to-Speech",
-	"admin.audio.ttsEnabledHint": "Enables voice mode and assistant speak buttons when a TTS key is available.",
-	"admin.audio.ttsAutoStream": "Speak streamed responses",
-	"admin.audio.ttsAutoStreamHint": "Read every assistant response aloud as it streams, even outside voice mode.",
-	"admin.audio.ttsKeyPlaceholder": "Leave blank to reuse STT key",
-	"admin.audio.ttsVoice": "Voice",
-	"admin.audio.ttsFormat": "Format",
-	"admin.audio.ttsPlaybackSpeed": "Playback speed",
-	"admin.audio.ttsHint": "Compatible with OpenAI's audio/speech API. If no TTS key is set, the STT key is reused.",
-	"admin.audio.voiceMode": "Voice Mode",
-	"admin.audio.voiceModeSttMode": "Speech recognition",
-	"admin.audio.voiceModeSttBrowser": "Browser",
-	"admin.audio.voiceModeSttProvider": "Configured STT",
-	"admin.audio.voiceModeBrowserSttHint": "Uses browser speech recognition, then stores the audio and transcript locally for the voice data flywheel.",
-	"admin.audio.voiceModeProviderSttHint": "Sends voice-mode audio through the configured STT provider and stores the result locally.",
-	"admin.audio.voiceModeSystemPrompt": "System prompt",
-	"admin.audio.voiceModeSystemPromptHint": "Applied only while voice mode is on. Keep it short to make spoken replies useful.",
+	"admin.audio.tts": "Synthèse vocale",
+	"admin.audio.enableTts": "Activer la synthèse vocale",
+	"admin.audio.ttsEnabledHint": "Active le mode vocal et les boutons de lecture des réponses lorsqu’une clé de synthèse vocale est disponible.",
+	"admin.audio.ttsAutoStream": "Lire les réponses diffusées",
+	"admin.audio.ttsAutoStreamHint": "Lit à voix haute chaque réponse de l’assistant pendant sa diffusion, même hors mode vocal.",
+	"admin.audio.ttsKeyPlaceholder": "Laisser vide pour réutiliser la clé STT",
+	"admin.audio.ttsVoice": "Voix",
+	"admin.audio.ttsFormat": "Format audio",
+	"admin.audio.ttsPlaybackSpeed": "Vitesse de lecture",
+	"admin.audio.ttsHint": "Compatible avec l’API audio/speech d’OpenAI. Si aucune clé de synthèse vocale n’est définie, la clé STT est réutilisée.",
+	"admin.audio.voiceMode": "Mode vocal",
+	"admin.audio.voiceModeSttMode": "Reconnaissance vocale",
+	"admin.audio.voiceModeSttBrowser": "Navigateur",
+	"admin.audio.voiceModeSttProvider": "STT configuré",
+	"admin.audio.voiceModeBrowserSttHint": "Utilise la reconnaissance vocale du navigateur, puis stocke localement l’audio et la transcription pour la boucle de données vocales.",
+	"admin.audio.voiceModeProviderSttHint": "Envoie l’audio du mode vocal au fournisseur STT configuré et stocke le résultat localement.",
+	"admin.audio.voiceModeSystemPrompt": "Invite système",
+	"admin.audio.voiceModeSystemPromptHint": "S’applique uniquement lorsque le mode vocal est activé. Restez bref pour rendre les réponses parlées utiles.",
 	"admin.audio.saveFailed": "Échec de la sauvegarde des paramètres audio",
-	"admin.images.title": "Images",
+	"admin.images.title": "Images générées",
 	"admin.images.generation": "Génération d’images",
 	"admin.images.editing": "Édition d’images",
 	"admin.images.enableGeneration": "Activer la génération d’images",
@@ -751,15 +753,15 @@
 	"chat.edit.tool": "Outil",
 	"chat.edit.item": "Élément",
 	"chat.dictate.unsupported": "La reconnaissance vocale n'est pas prise en charge dans ce navigateur.",
-	"chat.voiceModeOn": "Voice mode on",
-	"chat.voiceListening": "Listening...",
-	"chat.voiceWaiting": "Waiting for response...",
-	"chat.voiceProviderSttFallback": "Configured STT failed. Used browser transcript.",
-	"chat.voiceProviderSttNoAudio": "Configured STT needs microphone audio, but no voice-mode recording was captured.",
-	"chat.ttsNotConfigured": "Text-to-Speech is not enabled or configured.",
-	"chat.speakResponses": "Speak responses",
-	"chat.stopSpeaking": "Stop speaking",
-	"chat.fallbackTitle": "Chat",
+	"chat.voiceModeOn": "Mode vocal activé",
+	"chat.voiceListening": "Écoute...",
+	"chat.voiceWaiting": "En attente de réponse...",
+	"chat.voiceProviderSttFallback": "Le STT configuré a échoué. La transcription du navigateur a été utilisée.",
+	"chat.voiceProviderSttNoAudio": "Le STT configuré a besoin du micro, mais aucun enregistrement du mode vocal n’a été capturé.",
+	"chat.ttsNotConfigured": "La synthèse vocale n’est pas activée ou configurée.",
+	"chat.speakResponses": "Lire les réponses",
+	"chat.stopSpeaking": "Arrêter la lecture",
+	"chat.fallbackTitle": "Discussion",
 	"chat.greeting": "Comment puis-je vous aider ?",
 	"admin.toolServers": "Serveurs d'outils",
 	"toolServers.title": "Serveurs d'outils",
@@ -768,14 +770,14 @@
 	"toolServers.edit": "Modifier le serveur",
 	"toolServers.id": "ID",
 	"toolServers.name": "Nom",
-	"toolServers.type": "Type",
+	"toolServers.type": "Catégorie",
 	"toolServers.namePlaceholder": "Nom d'affichage optionnel",
 	"toolServers.idPlaceholder": "mon_serveur",
 	"toolServers.typeOpenAPI": "OpenAPI",
 	"toolServers.typeMCP": "MCP",
 	"toolServers.typeStdio": "MCP (Stdio)",
 	"toolServers.command": "Commande",
-	"toolServers.args": "Arguments",
+	"toolServers.args": "Paramètres",
 	"toolServers.cwd": "Répertoire de travail",
 	"toolServers.cwdPlaceholder": "Facultatif (système par défaut)",
 	"toolServers.commandRequired": "La commande est requise pour les serveurs stdio",
@@ -785,11 +787,11 @@
 	"toolServers.specPath": "Chemin de spec",
 	"toolServers.fieldsRequired": "L'ID et l'URL sont requis",
 	"toolServers.idInvalid": "L'ID ne peut contenir que des lettres minuscules, des chiffres et des tirets bas",
-	"toolServers.auth": "Auth",
+	"toolServers.auth": "Authentification",
 	"toolServers.authNone": "Aucune",
 	"toolServers.authBearer": "Bearer",
 	"toolServers.apiKey": "Clé API",
-	"toolServers.description": "Description",
+	"toolServers.description": "Détails",
 	"toolServers.descriptionPlaceholder": "Que fait ce serveur ?",
 	"toolServers.headers": "En-têtes",
 	"toolServers.headersHint": "En-têtes HTTP supplémentaires au format JSON.",
@@ -822,7 +824,7 @@
 	"admin.subagentsSystemPromptHint": "Laisser vide pour la valeur par défaut.",
 	"admin.contextCompaction": "Compaction du contexte",
 	"admin.compactTokenThreshold": "Seuil de tokens",
-	"admin.compactTokenThresholdUnit": "tokens",
+	"admin.compactTokenThresholdUnit": "jetons",
 	"admin.compactTokenThresholdHint": "Les messages anciens sont résumés lorsque le contexte estimé dépasse cette limite. Par défaut : 80 000.",
 	"onboarding.welcomeTitle": "Votre ordinateur, de partout",
 	"onboarding.welcomeDesc": "Codez, gérez et contrôlez votre machine depuis n’importe quel appareil.",
@@ -859,5 +861,138 @@
 	"general.persistentYes": "Actif",
 	"general.persistentNo": "Non accordé",
 	"general.clearCache": "Vider le cache",
-	"general.cacheCleared": "Cache vidé"
+	"general.cacheCleared": "Cache vidé",
+	"general.uiScale": "Échelle de l’interface",
+	"general.default": "Par défaut",
+	"general.decreaseUiScale": "Réduire l’échelle de l’interface",
+	"general.increaseUiScale": "Augmenter l’échelle de l’interface",
+	"appearance.title": "Apparence",
+	"appearance.colors": "Couleurs",
+	"appearance.interface": "Interface utilisateur",
+	"appearance.import": "Importer",
+	"appearance.exportTheme": "Exporter",
+	"appearance.reset": "Réinitialiser",
+	"appearance.background": "Arrière-plan",
+	"appearance.foreground": "Premier plan",
+	"appearance.uiFont": "Police de l’interface",
+	"appearance.exported": "Thème exporté",
+	"appearance.exportFailed": "Échec de l’export du thème",
+	"appearance.imported": "Thème importé",
+	"appearance.importFailed": "Échec de l’import du thème",
+	"common.add": "Ajouter",
+	"common.forward": "Suivant",
+	"common.apply": "Appliquer",
+	"common.reject": "Rejeter",
+	"connections.provider": "Fournisseur",
+	"connections.apiType": "Type d’API",
+	"connections.chatCompletions": "Complétions de chat",
+	"connections.responses": "Réponses",
+	"admin.agentsNoProfiles": "Aucun profil d’agent",
+	"models.requestParams": "Paramètres de requête",
+	"models.paramKey": "clé",
+	"models.paramValue": "valeur",
+	"editor.binaryFile": "Fichier binaire",
+	"editor.noChanges": "Aucune modification",
+	"editor.noUncommittedModifications": "Ce fichier n’a aucune modification non commitée.",
+	"git.loadChangesFailed": "Impossible de charger les modifications git",
+	"git.unableToLoadChanges": "Impossible de charger les modifications",
+	"git.collapseAll": "Tout replier",
+	"git.expandAll": "Tout développer",
+	"git.uncommittedChanges": "Non commité",
+	"git.change_one": "{{count}} modification",
+	"git.change_other": "{{count}} modifications",
+	"git.staged": "Indexé",
+	"git.noFileChangesYet": "Aucune modification de fichier pour le moment",
+	"git.projectChangesHint": "Les modifications de ce projet apparaîtront ici.",
+	"git.noTextualDiff": "Aucun diff textuel disponible",
+	"git.branches": "Branches Git",
+	"git.branchActions": "Actions de branche",
+	"git.noBranchesFound": "Aucune branche trouvée",
+	"git.searchWorktrees": "Rechercher des worktrees",
+	"git.worktrees": "Arbres de travail",
+	"git.noWorktreesFound": "Aucun worktree trouvé",
+	"git.newWorktree": "Nouveau worktree",
+	"git.unpushedCommit_one": "{{count}} commit non poussé",
+	"git.unpushedCommit_other": "{{count}} commits non poussés",
+	"git.unpushed": "Non poussé",
+	"git.switchBranches": "Changer de branche ?",
+	"git.createBranchPrompt": "Créer une branche ?",
+	"git.moveChangesPromptPrefix_one": "Vous avez {{count}} fichier modifié sur",
+	"git.moveChangesPromptPrefix_other": "Vous avez {{count}} fichiers modifiés sur",
+	"git.moveChangesPromptMiddle": "Choisissez de laisser ces modifications ici ou de les apporter vers",
+	"git.leaveChanges": "Laisser les modifications",
+	"git.bringChanges": "Apporter les modifications",
+	"git.copyBranchName": "Copier le nom de la branche",
+	"git.uncommitFailed": "Impossible d’annuler le commit",
+	"git.noChangesStashed": "Aucune modification remisée",
+	"git.switchBranchFailed": "Impossible de changer de branche",
+	"git.createWorktreeFailed": "Impossible de créer le worktree",
+	"git.createBranchFailed": "Impossible de créer la branche",
+	"git.renameBranch": "Renommer la branche",
+	"git.branchRenamed": "Branche renommée",
+	"git.renameBranchFailed": "Impossible de renommer la branche",
+	"git.branchNameCopied": "Nom de branche copié",
+	"git.deleteBranchConfirm": "Supprimer la branche \"{{name}}\" ?",
+	"git.branchDeleted": "Branche supprimée",
+	"git.deleteBranchFailed": "Impossible de supprimer la branche",
+	"automations.automation": "Automatisation",
+	"automations.once": "Une fois",
+	"automations.hourly": "Toutes les heures",
+	"automations.daily": "Quotidien",
+	"automations.weekly": "Hebdomadaire",
+	"automations.monthly": "Mensuel",
+	"automations.custom": "Personnalisé",
+	"automations.time": "Heure",
+	"automations.day": "Jour",
+	"automations.dayMo": "Lu",
+	"automations.dayTu": "Ma",
+	"automations.dayWe": "Me",
+	"automations.dayTh": "Je",
+	"automations.dayFr": "Ve",
+	"automations.daySa": "Sam",
+	"automations.daySu": "Di",
+	"chat.noSkillsFound": "Aucune compétence trouvée",
+	"chat.skills": "Compétences",
+	"chat.commands": "Commandes",
+	"chat.noOutputItems": "Aucun élément de sortie",
+	"chat.failedWithCode": "Échec {{code}}",
+	"chat.finished": "Terminé",
+	"chat.terminating": "Arrêt en cours",
+	"chat.forceTerminate": "Forcer l’arrêt",
+	"chat.terminate": "Arrêter",
+	"chat.sessionUnavailable": "Session en direct indisponible. La sortie enregistrée reste dans le chat.",
+	"chat.sessions": "Conversations",
+	"chat.queuedMessages": "Messages en file",
+	"preview.pdfLoadError": "Impossible de charger le PDF.",
+	"preview.visual": "Visuel",
+	"preview.source": "Code source",
+	"preview.diagramError": "Erreur de diagramme",
+	"preview.diagramRenderError": "Impossible de rendre le diagramme",
+	"a11y.zoomOut": "Zoom arrière",
+	"a11y.resetZoom": "Réinitialiser le zoom",
+	"a11y.zoomIn": "Zoom avant",
+	"port.openInNewTab": "Ouvrir dans un nouvel onglet",
+	"port.notResponding": "localhost:{{port}} ne répond pas",
+	"port.previewTitle": "Aperçu du port {{port}}",
+	"terminal.dictateInput": "Dicter l’entrée du terminal",
+	"a11y.page": "Page n° {{page}}",
+	"markdown.linkTo": "Lien vers {{target}}",
+	"markdown.boldShortcut": "Gras (⌘B)",
+	"markdown.italicShortcut": "Italique (⌘I)",
+	"markdown.underlineShortcut": "Souligné (⌘U)",
+	"markdown.strikethrough": "Barré",
+	"markdown.inlineCode": "Code en ligne",
+	"markdown.highlight": "Surligner",
+	"markdown.heading1": "Titre 1",
+	"markdown.heading2": "Titre 2",
+	"markdown.heading3": "Titre 3",
+	"markdown.bulletList": "Liste à puces",
+	"markdown.numberedList": "Liste numérotée",
+	"markdown.taskList": "Liste de tâches",
+	"markdown.quote": "Citation",
+	"markdown.codeBlock": "Bloc de code",
+	"markdown.horizontalRule": "Ligne horizontale",
+	"markdown.insertTable": "Insérer un tableau",
+	"markdown.undoShortcut": "Annuler (⌘Z)",
+	"markdown.redoShortcut": "Rétablir (⌘⇧Z)"
 }
diff --git a/cptr/frontend/src/lib/i18n/locales/ja.json b/cptr/frontend/src/lib/i18n/locales/ja.json
index 6287db7e..481ac2ff 100644
--- a/cptr/frontend/src/lib/i18n/locales/ja.json
+++ b/cptr/frontend/src/lib/i18n/locales/ja.json
@@ -84,6 +84,7 @@
 	"search.noRecentChats": "最近のチャットはありません",
 	"settings.back": "戻る",
 	"settings.general": "一般",
+	"settings.appearance": "外観",
 	"settings.memory": "メモリ",
 	"pwa.settingsTitle": "プログレッシブ Web アプリ",
 	"intent.chooseWorkspace": "ワークスペース",
@@ -267,6 +268,7 @@
 	"connections.apiKey": "APIキー",
 	"connections.baseUrl": "ベースURL",
 	"connections.prefixId": "プレフィックスID",
+	"connections.prefixPlaceholder": "例: openrouter",
 	"connections.models": "モデル（カンマ区切り、任意）",
 	"connections.modelsHint": "空白のままでプロバイダーから自動検出します。",
 	"connections.cancel": "キャンセル",
@@ -294,7 +296,7 @@
 	"directory.hidden": "隠しファイル",
 	"directory.noSubdirectories": "サブディレクトリがありません",
 	"directory.goBack": "戻る",
-	"directory.typePath": "Type a path... (Tab to complete)",
+	"directory.typePath": "パスを入力... (Tabで補完)",
 	"directory.retry": "再試行",
 	"saveDialog.fileNamePlaceholder": "ファイル名…",
 	"saveDialog.emptyFolder": "空のフォルダ",
@@ -341,7 +343,7 @@
 	"admin.webPerplexityHint": "perplexity.ai でAPIキーを取得",
 	"admin.webPerplexityBaseUrl": "ベースURL",
 	"admin.webPerplexityBaseUrlHint": "api.perplexity.ai を使用する場合は空欄。LiteLLM や他の互換プロキシの場合は変更してください。",
-	"admin.webChatCompletions": "Chat Completions",
+	"admin.webChatCompletions": "チャット補完",
 	"admin.webCcBaseUrl": "ベースURL",
 	"admin.webCcKey": "APIキー",
 	"admin.webCcModel": "モデル",
@@ -645,24 +647,24 @@
 	"admin.audio.qualityHintLow": "最小ファイル、音声に最適化。",
 	"admin.audio.stt": "音声テキスト変換",
 	"admin.audio.sttHint": "OpenAIのaudio/transcriptions APIと互換性があります。",
-	"admin.audio.tts": "Text-to-Speech",
-	"admin.audio.enableTts": "Enable Text-to-Speech",
-	"admin.audio.ttsEnabledHint": "Enables voice mode and assistant speak buttons when a TTS key is available.",
-	"admin.audio.ttsAutoStream": "Speak streamed responses",
-	"admin.audio.ttsAutoStreamHint": "Read every assistant response aloud as it streams, even outside voice mode.",
-	"admin.audio.ttsKeyPlaceholder": "Leave blank to reuse STT key",
-	"admin.audio.ttsVoice": "Voice",
-	"admin.audio.ttsFormat": "Format",
-	"admin.audio.ttsPlaybackSpeed": "Playback speed",
-	"admin.audio.ttsHint": "Compatible with OpenAI's audio/speech API. If no TTS key is set, the STT key is reused.",
-	"admin.audio.voiceMode": "Voice Mode",
-	"admin.audio.voiceModeSttMode": "Speech recognition",
-	"admin.audio.voiceModeSttBrowser": "Browser",
-	"admin.audio.voiceModeSttProvider": "Configured STT",
-	"admin.audio.voiceModeBrowserSttHint": "Uses browser speech recognition, then stores the audio and transcript locally for the voice data flywheel.",
-	"admin.audio.voiceModeProviderSttHint": "Sends voice-mode audio through the configured STT provider and stores the result locally.",
-	"admin.audio.voiceModeSystemPrompt": "System prompt",
-	"admin.audio.voiceModeSystemPromptHint": "Applied only while voice mode is on. Keep it short to make spoken replies useful.",
+	"admin.audio.tts": "音声読み上げ",
+	"admin.audio.enableTts": "音声読み上げを有効にする",
+	"admin.audio.ttsEnabledHint": "音声読み上げキーがある場合、音声モードとアシスタントの読み上げボタンを有効にします。",
+	"admin.audio.ttsAutoStream": "ストリーミング応答を読み上げる",
+	"admin.audio.ttsAutoStreamHint": "音声モード外でも、ストリーミング中のすべてのアシスタント応答を読み上げます。",
+	"admin.audio.ttsKeyPlaceholder": "STTキーを再利用する場合は空欄のままにします",
+	"admin.audio.ttsVoice": "音声",
+	"admin.audio.ttsFormat": "形式",
+	"admin.audio.ttsPlaybackSpeed": "再生速度",
+	"admin.audio.ttsHint": "OpenAI の audio/speech API と互換性があります。音声読み上げキーが未設定の場合は STT キーを再利用します。",
+	"admin.audio.voiceMode": "音声モード",
+	"admin.audio.voiceModeSttMode": "音声認識",
+	"admin.audio.voiceModeSttBrowser": "ブラウザー",
+	"admin.audio.voiceModeSttProvider": "設定済みSTT",
+	"admin.audio.voiceModeBrowserSttHint": "ブラウザーの音声認識を使い、音声データの循環のために音声と文字起こしをローカルに保存します。",
+	"admin.audio.voiceModeProviderSttHint": "音声モードの音声を設定済みSTTプロバイダーに送信し、結果をローカルに保存します。",
+	"admin.audio.voiceModeSystemPrompt": "システムプロンプト",
+	"admin.audio.voiceModeSystemPromptHint": "音声モードがオンの間だけ適用されます。話し言葉の応答が役立つよう短くしてください。",
 	"admin.audio.saveFailed": "オーディオ設定の保存に失敗しました",
 	"admin.images.title": "画像",
 	"admin.images.generation": "画像生成",
@@ -751,14 +753,14 @@
 	"chat.edit.tool": "ツール",
 	"chat.edit.item": "項目",
 	"chat.dictate.unsupported": "このブラウザでは音声認識がサポートされていません。",
-	"chat.voiceModeOn": "Voice mode on",
-	"chat.voiceListening": "Listening...",
-	"chat.voiceWaiting": "Waiting for response...",
-	"chat.voiceProviderSttFallback": "Configured STT failed. Used browser transcript.",
-	"chat.voiceProviderSttNoAudio": "Configured STT needs microphone audio, but no voice-mode recording was captured.",
-	"chat.ttsNotConfigured": "Text-to-Speech is not enabled or configured.",
-	"chat.speakResponses": "Speak responses",
-	"chat.stopSpeaking": "Stop speaking",
+	"chat.voiceModeOn": "音声モードがオン",
+	"chat.voiceListening": "聞き取り中...",
+	"chat.voiceWaiting": "応答待ち...",
+	"chat.voiceProviderSttFallback": "設定済みSTTに失敗しました。ブラウザーの文字起こしを使用しました。",
+	"chat.voiceProviderSttNoAudio": "設定済みSTTにはマイク音声が必要ですが、音声モードの録音が取得されませんでした。",
+	"chat.ttsNotConfigured": "音声読み上げが有効化または設定されていません。",
+	"chat.speakResponses": "応答を読み上げる",
+	"chat.stopSpeaking": "読み上げを停止",
 	"chat.fallbackTitle": "チャット",
 	"chat.greeting": "何かお手伝いできますか？",
 	"admin.toolServers": "ツールサーバー",
@@ -859,5 +861,138 @@
 	"general.persistentYes": "有効",
 	"general.persistentNo": "許可されていません",
 	"general.clearCache": "キャッシュを消去",
-	"general.cacheCleared": "キャッシュを消去しました"
+	"general.cacheCleared": "キャッシュを消去しました",
+	"general.uiScale": "UIスケール",
+	"general.default": "既定",
+	"general.decreaseUiScale": "UIスケールを下げる",
+	"general.increaseUiScale": "UIスケールを上げる",
+	"appearance.title": "外観",
+	"appearance.colors": "色",
+	"appearance.interface": "インターフェイス",
+	"appearance.import": "インポート",
+	"appearance.exportTheme": "エクスポート",
+	"appearance.reset": "リセット",
+	"appearance.background": "背景",
+	"appearance.foreground": "前景",
+	"appearance.uiFont": "UIフォント",
+	"appearance.exported": "テーマをエクスポートしました",
+	"appearance.exportFailed": "テーマのエクスポートに失敗しました",
+	"appearance.imported": "テーマをインポートしました",
+	"appearance.importFailed": "テーマのインポートに失敗しました",
+	"common.add": "追加",
+	"common.forward": "進む",
+	"common.apply": "適用",
+	"common.reject": "却下",
+	"connections.provider": "プロバイダー",
+	"connections.apiType": "API タイプ",
+	"connections.chatCompletions": "チャット補完",
+	"connections.responses": "レスポンス",
+	"admin.agentsNoProfiles": "エージェントプロファイルがありません",
+	"models.requestParams": "リクエストパラメータ",
+	"models.paramKey": "キー",
+	"models.paramValue": "値",
+	"editor.binaryFile": "バイナリファイル",
+	"editor.noChanges": "変更はありません",
+	"editor.noUncommittedModifications": "このファイルには未コミットの変更がありません。",
+	"git.loadChangesFailed": "git の変更を読み込めませんでした",
+	"git.unableToLoadChanges": "変更を読み込めません",
+	"git.collapseAll": "すべて折りたたむ",
+	"git.expandAll": "すべて展開",
+	"git.uncommittedChanges": "未コミット",
+	"git.change_one": "{{count}} 件の変更",
+	"git.change_other": "{{count}} 件の変更",
+	"git.staged": "ステージ済み",
+	"git.noFileChangesYet": "まだファイル変更はありません",
+	"git.projectChangesHint": "このプロジェクトの変更がここに表示されます。",
+	"git.noTextualDiff": "テキスト差分はありません",
+	"git.branches": "ブランチ",
+	"git.branchActions": "ブランチ操作",
+	"git.noBranchesFound": "ブランチが見つかりません",
+	"git.searchWorktrees": "worktree を検索",
+	"git.worktrees": "Worktree",
+	"git.noWorktreesFound": "worktree が見つかりません",
+	"git.newWorktree": "新しい worktree",
+	"git.unpushedCommit_one": "未プッシュのコミット {{count}} 件",
+	"git.unpushedCommit_other": "未プッシュのコミット {{count}} 件",
+	"git.unpushed": "未プッシュ",
+	"git.switchBranches": "ブランチを切り替えますか？",
+	"git.createBranchPrompt": "ブランチを作成しますか？",
+	"git.moveChangesPromptPrefix_one": "{{count}} 件の変更されたファイルがあります:",
+	"git.moveChangesPromptPrefix_other": "{{count}} 件の変更されたファイルがあります:",
+	"git.moveChangesPromptMiddle": "これらの変更をここに残すか、次へ持っていくか選んでください",
+	"git.leaveChanges": "変更を残す",
+	"git.bringChanges": "変更を持っていく",
+	"git.copyBranchName": "ブランチ名をコピー",
+	"git.uncommitFailed": "コミットを取り消せませんでした",
+	"git.noChangesStashed": "stash された変更はありません",
+	"git.switchBranchFailed": "ブランチを切り替えられませんでした",
+	"git.createWorktreeFailed": "worktree を作成できませんでした",
+	"git.createBranchFailed": "ブランチを作成できませんでした",
+	"git.renameBranch": "ブランチ名を変更",
+	"git.branchRenamed": "ブランチ名を変更しました",
+	"git.renameBranchFailed": "ブランチ名を変更できませんでした",
+	"git.branchNameCopied": "ブランチ名をコピーしました",
+	"git.deleteBranchConfirm": "ブランチ \"{{name}}\" を削除しますか？",
+	"git.branchDeleted": "ブランチを削除しました",
+	"git.deleteBranchFailed": "ブランチを削除できませんでした",
+	"automations.automation": "自動化",
+	"automations.once": "1回",
+	"automations.hourly": "毎時",
+	"automations.daily": "毎日",
+	"automations.weekly": "毎週",
+	"automations.monthly": "毎月",
+	"automations.custom": "カスタム",
+	"automations.time": "時刻",
+	"automations.day": "日",
+	"automations.dayMo": "月",
+	"automations.dayTu": "火",
+	"automations.dayWe": "水",
+	"automations.dayTh": "木",
+	"automations.dayFr": "金",
+	"automations.daySa": "土",
+	"automations.daySu": "日",
+	"chat.noSkillsFound": "スキルが見つかりません",
+	"chat.skills": "スキル",
+	"chat.commands": "コマンド",
+	"chat.noOutputItems": "出力項目がありません",
+	"chat.failedWithCode": "失敗 {{code}}",
+	"chat.finished": "完了",
+	"chat.terminating": "終了中",
+	"chat.forceTerminate": "強制終了",
+	"chat.terminate": "終了",
+	"chat.sessionUnavailable": "ライブセッションは利用できません。保存済みの出力はチャットに残ります。",
+	"chat.sessions": "セッション",
+	"chat.queuedMessages": "キュー内のメッセージ",
+	"preview.pdfLoadError": "PDF を読み込めませんでした。",
+	"preview.visual": "ビジュアル",
+	"preview.source": "ソース",
+	"preview.diagramError": "図のエラー",
+	"preview.diagramRenderError": "図をレンダリングできませんでした",
+	"a11y.zoomOut": "ズームアウト",
+	"a11y.resetZoom": "ズームをリセット",
+	"a11y.zoomIn": "ズームイン",
+	"port.openInNewTab": "新しいタブで開く",
+	"port.notResponding": "localhost:{{port}} が応答していません",
+	"port.previewTitle": "ポート {{port}} のプレビュー",
+	"terminal.dictateInput": "ターミナル入力を音声入力",
+	"a11y.page": "ページ {{page}}",
+	"markdown.linkTo": "{{target}} へのリンク",
+	"markdown.boldShortcut": "太字 (⌘B)",
+	"markdown.italicShortcut": "斜体 (⌘I)",
+	"markdown.underlineShortcut": "下線 (⌘U)",
+	"markdown.strikethrough": "取り消し線",
+	"markdown.inlineCode": "インラインコード",
+	"markdown.highlight": "ハイライト",
+	"markdown.heading1": "見出し 1",
+	"markdown.heading2": "見出し 2",
+	"markdown.heading3": "見出し 3",
+	"markdown.bulletList": "箇条書きリスト",
+	"markdown.numberedList": "番号付きリスト",
+	"markdown.taskList": "タスクリスト",
+	"markdown.quote": "引用",
+	"markdown.codeBlock": "コードブロック",
+	"markdown.horizontalRule": "水平線",
+	"markdown.insertTable": "表を挿入",
+	"markdown.undoShortcut": "元に戻す (⌘Z)",
+	"markdown.redoShortcut": "やり直す (⌘⇧Z)"
 }
diff --git a/cptr/frontend/src/lib/i18n/locales/ko.json b/cptr/frontend/src/lib/i18n/locales/ko.json
index dbc49dd3..c69ea10f 100644
--- a/cptr/frontend/src/lib/i18n/locales/ko.json
+++ b/cptr/frontend/src/lib/i18n/locales/ko.json
@@ -84,6 +84,7 @@
 	"search.noRecentChats": "최근 채팅 없음",
 	"settings.back": "뒤로",
 	"settings.general": "일반",
+	"settings.appearance": "모양",
 	"settings.memory": "메모리",
 	"pwa.settingsTitle": "프로그레시브 웹 앱",
 	"intent.chooseWorkspace": "작업공간",
@@ -267,6 +268,7 @@
 	"connections.apiKey": "API 키",
 	"connections.baseUrl": "기본 URL",
 	"connections.prefixId": "접두사 ID",
+	"connections.prefixPlaceholder": "예: openrouter",
 	"connections.models": "모델(쉼표로 구분, 선택 사항)",
 	"connections.modelsHint": "비워두면 프로바이더에서 자동 감지합니다.",
 	"connections.cancel": "취소",
@@ -294,7 +296,7 @@
 	"directory.hidden": "숨김 파일",
 	"directory.noSubdirectories": "하위 디렉터리 없음",
 	"directory.goBack": "뒤로",
-	"directory.typePath": "Type a path... (Tab to complete)",
+	"directory.typePath": "경로 입력... (Tab으로 자동 완성)",
 	"directory.retry": "재시도",
 	"saveDialog.fileNamePlaceholder": "파일 이름…",
 	"saveDialog.emptyFolder": "빈 폴더",
@@ -314,7 +316,7 @@
 	"system.disk": "디스크",
 	"system.cores": "{{count}} 코어",
 	"system.process": "프로세스",
-	"system.summaryCpu": "cpu {{percent}}%",
+	"system.summaryCpu": "CPU {{percent}}%",
 	"system.summaryMemory": "메모리 {{percent}}%",
 	"system.summaryDisk": "디스크 {{percent}}%",
 	"system.uptime": "가동 {{value}}",
@@ -341,7 +343,7 @@
 	"admin.webPerplexityHint": "perplexity.ai에서 API 키를 받으세요",
 	"admin.webPerplexityBaseUrl": "기본 URL",
 	"admin.webPerplexityBaseUrlHint": "api.perplexity.ai를 사용하려면 비워두세요. LiteLLM 또는 기타 호환 프록시의 경우 변경하세요.",
-	"admin.webChatCompletions": "Chat Completions",
+	"admin.webChatCompletions": "채팅 완성",
 	"admin.webCcBaseUrl": "기본 URL",
 	"admin.webCcKey": "API 키",
 	"admin.webCcModel": "모델",
@@ -645,24 +647,24 @@
 	"admin.audio.qualityHintLow": "가장 작은 파일, 음성에 최적화.",
 	"admin.audio.stt": "음성-텍스트 변환",
 	"admin.audio.sttHint": "OpenAI의 audio/transcriptions API와 호환됩니다.",
-	"admin.audio.tts": "Text-to-Speech",
-	"admin.audio.enableTts": "Enable Text-to-Speech",
-	"admin.audio.ttsEnabledHint": "Enables voice mode and assistant speak buttons when a TTS key is available.",
-	"admin.audio.ttsAutoStream": "Speak streamed responses",
-	"admin.audio.ttsAutoStreamHint": "Read every assistant response aloud as it streams, even outside voice mode.",
-	"admin.audio.ttsKeyPlaceholder": "Leave blank to reuse STT key",
-	"admin.audio.ttsVoice": "Voice",
-	"admin.audio.ttsFormat": "Format",
-	"admin.audio.ttsPlaybackSpeed": "Playback speed",
-	"admin.audio.ttsHint": "Compatible with OpenAI's audio/speech API. If no TTS key is set, the STT key is reused.",
-	"admin.audio.voiceMode": "Voice Mode",
-	"admin.audio.voiceModeSttMode": "Speech recognition",
-	"admin.audio.voiceModeSttBrowser": "Browser",
-	"admin.audio.voiceModeSttProvider": "Configured STT",
-	"admin.audio.voiceModeBrowserSttHint": "Uses browser speech recognition, then stores the audio and transcript locally for the voice data flywheel.",
-	"admin.audio.voiceModeProviderSttHint": "Sends voice-mode audio through the configured STT provider and stores the result locally.",
-	"admin.audio.voiceModeSystemPrompt": "System prompt",
-	"admin.audio.voiceModeSystemPromptHint": "Applied only while voice mode is on. Keep it short to make spoken replies useful.",
+	"admin.audio.tts": "텍스트 음성 변환",
+	"admin.audio.enableTts": "텍스트 음성 변환 사용",
+	"admin.audio.ttsEnabledHint": "텍스트 음성 변환 키가 있으면 음성 모드와 어시스턴트 읽기 버튼을 활성화합니다.",
+	"admin.audio.ttsAutoStream": "스트리밍 응답 읽기",
+	"admin.audio.ttsAutoStreamHint": "음성 모드가 아니어도 스트리밍되는 모든 어시스턴트 응답을 소리 내어 읽습니다.",
+	"admin.audio.ttsKeyPlaceholder": "STT 키를 재사용하려면 비워 두세요",
+	"admin.audio.ttsVoice": "음성",
+	"admin.audio.ttsFormat": "형식",
+	"admin.audio.ttsPlaybackSpeed": "재생 속도",
+	"admin.audio.ttsHint": "OpenAI audio/speech API와 호환됩니다. 텍스트 음성 변환 키가 없으면 STT 키를 재사용합니다.",
+	"admin.audio.voiceMode": "음성 모드",
+	"admin.audio.voiceModeSttMode": "음성 인식",
+	"admin.audio.voiceModeSttBrowser": "브라우저",
+	"admin.audio.voiceModeSttProvider": "설정된 STT",
+	"admin.audio.voiceModeBrowserSttHint": "브라우저 음성 인식을 사용한 뒤 음성 데이터 순환을 위해 오디오와 전사를 로컬에 저장합니다.",
+	"admin.audio.voiceModeProviderSttHint": "음성 모드 오디오를 설정된 STT 제공자에게 보내고 결과를 로컬에 저장합니다.",
+	"admin.audio.voiceModeSystemPrompt": "시스템 프롬프트",
+	"admin.audio.voiceModeSystemPromptHint": "음성 모드가 켜져 있을 때만 적용됩니다. 말로 듣기 좋은 답변이 되도록 짧게 유지하세요.",
 	"admin.audio.saveFailed": "오디오 설정 저장에 실패했습니다",
 	"admin.images.title": "이미지",
 	"admin.images.generation": "이미지 생성",
@@ -751,14 +753,14 @@
 	"chat.edit.tool": "도구",
 	"chat.edit.item": "항목",
 	"chat.dictate.unsupported": "이 브라우저에서는 음성 인식이 지원되지 않습니다.",
-	"chat.voiceModeOn": "Voice mode on",
-	"chat.voiceListening": "Listening...",
-	"chat.voiceWaiting": "Waiting for response...",
-	"chat.voiceProviderSttFallback": "Configured STT failed. Used browser transcript.",
-	"chat.voiceProviderSttNoAudio": "Configured STT needs microphone audio, but no voice-mode recording was captured.",
-	"chat.ttsNotConfigured": "Text-to-Speech is not enabled or configured.",
-	"chat.speakResponses": "Speak responses",
-	"chat.stopSpeaking": "Stop speaking",
+	"chat.voiceModeOn": "음성 모드 켜짐",
+	"chat.voiceListening": "듣는 중...",
+	"chat.voiceWaiting": "응답 대기 중...",
+	"chat.voiceProviderSttFallback": "설정된 STT가 실패했습니다. 브라우저 전사를 사용했습니다.",
+	"chat.voiceProviderSttNoAudio": "설정된 STT에는 마이크 오디오가 필요하지만 음성 모드 녹음이 캡처되지 않았습니다.",
+	"chat.ttsNotConfigured": "텍스트 음성 변환이 활성화되지 않았거나 설정되지 않았습니다.",
+	"chat.speakResponses": "응답 읽기",
+	"chat.stopSpeaking": "읽기 중지",
 	"chat.fallbackTitle": "채팅",
 	"chat.greeting": "무엇을 도와드릴까요?",
 	"admin.toolServers": "도구 서버",
@@ -859,5 +861,138 @@
 	"general.persistentYes": "활성",
 	"general.persistentNo": "허용되지 않음",
 	"general.clearCache": "캐시 지우기",
-	"general.cacheCleared": "캐시가 지워졌습니다"
+	"general.cacheCleared": "캐시가 지워졌습니다",
+	"general.uiScale": "UI 배율",
+	"general.default": "기본값",
+	"general.decreaseUiScale": "UI 배율 줄이기",
+	"general.increaseUiScale": "UI 배율 늘리기",
+	"appearance.title": "모양",
+	"appearance.colors": "색상",
+	"appearance.interface": "인터페이스",
+	"appearance.import": "가져오기",
+	"appearance.exportTheme": "내보내기",
+	"appearance.reset": "초기화",
+	"appearance.background": "배경",
+	"appearance.foreground": "전경",
+	"appearance.uiFont": "UI 글꼴",
+	"appearance.exported": "테마를 내보냈습니다",
+	"appearance.exportFailed": "테마 내보내기에 실패했습니다",
+	"appearance.imported": "테마를 가져왔습니다",
+	"appearance.importFailed": "테마 가져오기에 실패했습니다",
+	"common.add": "추가",
+	"common.forward": "앞으로",
+	"common.apply": "적용",
+	"common.reject": "거부",
+	"connections.provider": "제공자",
+	"connections.apiType": "API 유형",
+	"connections.chatCompletions": "채팅 완성",
+	"connections.responses": "응답",
+	"admin.agentsNoProfiles": "에이전트 프로필 없음",
+	"models.requestParams": "요청 매개변수",
+	"models.paramKey": "키",
+	"models.paramValue": "값",
+	"editor.binaryFile": "바이너리 파일",
+	"editor.noChanges": "변경 없음",
+	"editor.noUncommittedModifications": "이 파일에는 커밋되지 않은 수정사항이 없습니다.",
+	"git.loadChangesFailed": "git 변경 사항을 불러오지 못했습니다",
+	"git.unableToLoadChanges": "변경 사항을 불러올 수 없음",
+	"git.collapseAll": "모두 접기",
+	"git.expandAll": "모두 펼치기",
+	"git.uncommittedChanges": "커밋되지 않음",
+	"git.change_one": "변경 {{count}}개",
+	"git.change_other": "변경 {{count}}개",
+	"git.staged": "스테이징됨",
+	"git.noFileChangesYet": "아직 파일 변경 없음",
+	"git.projectChangesHint": "이 프로젝트의 변경 사항이 여기에 표시됩니다.",
+	"git.noTextualDiff": "텍스트 diff를 사용할 수 없음",
+	"git.branches": "브랜치",
+	"git.branchActions": "브랜치 작업",
+	"git.noBranchesFound": "브랜치를 찾을 수 없음",
+	"git.searchWorktrees": "worktree 검색",
+	"git.worktrees": "Worktree",
+	"git.noWorktreesFound": "worktree를 찾을 수 없음",
+	"git.newWorktree": "새 worktree",
+	"git.unpushedCommit_one": "푸시되지 않은 커밋 {{count}}개",
+	"git.unpushedCommit_other": "푸시되지 않은 커밋 {{count}}개",
+	"git.unpushed": "푸시되지 않음",
+	"git.switchBranches": "브랜치를 전환할까요?",
+	"git.createBranchPrompt": "브랜치를 만들까요?",
+	"git.moveChangesPromptPrefix_one": "{{count}}개의 변경된 파일이 있습니다:",
+	"git.moveChangesPromptPrefix_other": "{{count}}개의 변경된 파일이 있습니다:",
+	"git.moveChangesPromptMiddle": "이 변경 사항을 여기에 둘지 다음으로 가져갈지 선택하세요",
+	"git.leaveChanges": "변경 사항 남기기",
+	"git.bringChanges": "변경 사항 가져가기",
+	"git.copyBranchName": "브랜치 이름 복사",
+	"git.uncommitFailed": "커밋 실행 취소 실패",
+	"git.noChangesStashed": "stash된 변경 사항 없음",
+	"git.switchBranchFailed": "브랜치 전환 실패",
+	"git.createWorktreeFailed": "worktree 생성 실패",
+	"git.createBranchFailed": "브랜치 생성 실패",
+	"git.renameBranch": "브랜치 이름 변경",
+	"git.branchRenamed": "브랜치 이름 변경됨",
+	"git.renameBranchFailed": "브랜치 이름 변경 실패",
+	"git.branchNameCopied": "브랜치 이름 복사됨",
+	"git.deleteBranchConfirm": "브랜치 \"{{name}}\"을(를) 삭제할까요?",
+	"git.branchDeleted": "브랜치 삭제됨",
+	"git.deleteBranchFailed": "브랜치 삭제 실패",
+	"automations.automation": "자동화",
+	"automations.once": "한 번",
+	"automations.hourly": "매시간",
+	"automations.daily": "매일",
+	"automations.weekly": "매주",
+	"automations.monthly": "매월",
+	"automations.custom": "사용자 지정",
+	"automations.time": "시간",
+	"automations.day": "일",
+	"automations.dayMo": "월",
+	"automations.dayTu": "화",
+	"automations.dayWe": "수",
+	"automations.dayTh": "목",
+	"automations.dayFr": "금",
+	"automations.daySa": "토",
+	"automations.daySu": "일",
+	"chat.noSkillsFound": "스킬을 찾을 수 없음",
+	"chat.skills": "스킬",
+	"chat.commands": "명령",
+	"chat.noOutputItems": "출력 항목 없음",
+	"chat.failedWithCode": "실패 {{code}}",
+	"chat.finished": "완료됨",
+	"chat.terminating": "종료 중",
+	"chat.forceTerminate": "강제 종료",
+	"chat.terminate": "종료",
+	"chat.sessionUnavailable": "라이브 세션을 사용할 수 없습니다. 저장된 출력은 채팅에 남아 있습니다.",
+	"chat.sessions": "세션",
+	"chat.queuedMessages": "대기 중인 메시지",
+	"preview.pdfLoadError": "PDF를 불러오지 못했습니다.",
+	"preview.visual": "시각 보기",
+	"preview.source": "소스",
+	"preview.diagramError": "다이어그램 오류",
+	"preview.diagramRenderError": "다이어그램을 렌더링하지 못했습니다",
+	"a11y.zoomOut": "축소",
+	"a11y.resetZoom": "확대/축소 초기화",
+	"a11y.zoomIn": "확대",
+	"port.openInNewTab": "새 탭에서 열기",
+	"port.notResponding": "localhost:{{port}}이(가) 응답하지 않습니다",
+	"port.previewTitle": "포트 {{port}} 미리보기",
+	"terminal.dictateInput": "터미널 입력 받아쓰기",
+	"a11y.page": "페이지 {{page}}",
+	"markdown.linkTo": "{{target}} 링크",
+	"markdown.boldShortcut": "굵게 (⌘B)",
+	"markdown.italicShortcut": "기울임 (⌘I)",
+	"markdown.underlineShortcut": "밑줄 (⌘U)",
+	"markdown.strikethrough": "취소선",
+	"markdown.inlineCode": "인라인 코드",
+	"markdown.highlight": "강조",
+	"markdown.heading1": "제목 1",
+	"markdown.heading2": "제목 2",
+	"markdown.heading3": "제목 3",
+	"markdown.bulletList": "글머리 기호 목록",
+	"markdown.numberedList": "번호 매기기 목록",
+	"markdown.taskList": "작업 목록",
+	"markdown.quote": "인용",
+	"markdown.codeBlock": "코드 블록",
+	"markdown.horizontalRule": "가로줄",
+	"markdown.insertTable": "표 삽입",
+	"markdown.undoShortcut": "실행 취소 (⌘Z)",
+	"markdown.redoShortcut": "다시 실행 (⌘⇧Z)"
 }
diff --git a/cptr/frontend/src/lib/i18n/locales/pt-BR.json b/cptr/frontend/src/lib/i18n/locales/pt-BR.json
index b387652e..6199016e 100644
--- a/cptr/frontend/src/lib/i18n/locales/pt-BR.json
+++ b/cptr/frontend/src/lib/i18n/locales/pt-BR.json
@@ -84,12 +84,13 @@
 	"search.noRecentChats": "Sem conversas recentes",
 	"settings.back": "Voltar",
 	"settings.general": "Geral",
+	"settings.appearance": "Aparência",
 	"settings.memory": "Memória",
 	"pwa.settingsTitle": "Aplicativo Web Progressivo",
-	"intent.chooseWorkspace": "Workspace",
+	"intent.chooseWorkspace": "Espaço de trabalho",
 	"intent.newNote": "Nota",
-	"intent.newChat": "Chat",
-	"intent.newTerminal": "Terminal",
+	"intent.newChat": "Novo chat",
+	"intent.newTerminal": "Novo terminal",
 	"intent.share": "Compartilhar",
 	"intent.importFiles": "Importar arquivos",
 	"pwa.cancel": "Cancelar",
@@ -157,11 +158,11 @@
 	"git.changes": "Alterações",
 	"git.history": "Histórico",
 	"git.fetch": "Buscar",
-	"git.pull": "Pull",
-	"git.push": "Push",
+	"git.pull": "Trazer",
+	"git.push": "Enviar",
 	"git.publish": "Publicar",
-	"git.pullCount": "Pull ↓{{count}}",
-	"git.pushCount": "Push ↑{{count}}",
+	"git.pullCount": "Trazer ↓{{count}}",
+	"git.pushCount": "Enviar ↑{{count}}",
 	"git.committed": "Commitado",
 	"git.pulled": "Puxado",
 	"git.pushed": "Enviado",
@@ -243,7 +244,7 @@
 	"admin.agentsCommand": "Comando",
 	"admin.agentsHome": "Caminho home",
 	"admin.agentsApprovalMode": "Modo de aprovação",
-	"admin.agentsSandboxMode": "Sandbox",
+	"admin.agentsSandboxMode": "Modo isolado",
 	"admin.agentsPermissionMode": "Modo de permissão",
 	"admin.agentsLaunchArgs": "Argumentos de inicialização",
 	"admin.agentsApiEndpoint": "Endpoint da API",
@@ -267,6 +268,7 @@
 	"connections.apiKey": "Chave de API",
 	"connections.baseUrl": "URL base",
 	"connections.prefixId": "ID de prefixo",
+	"connections.prefixPlaceholder": "ex.: openrouter",
 	"connections.models": "Modelos (separados por vírgula, opcional)",
 	"connections.modelsHint": "Deixe em branco para descoberta automática do provedor.",
 	"connections.cancel": "Cancelar",
@@ -285,8 +287,8 @@
 	"home.terminalShort_other": "{{count}} terminais",
 	"home.activeChat_one": "{{count}} chat ativo",
 	"home.activeChat_other": "{{count}} chats ativos",
-	"home.chat_one": "{{count}} chat",
-	"home.chat_other": "{{count}} chats",
+	"home.chat_one": "{{count}} conversa",
+	"home.chat_other": "{{count}} conversas",
 	"home.folders": "Sugeridos",
 	"home.chatComingSoon": "Chat (em breve)",
 	"directory.cancel": "Cancelar",
@@ -294,7 +296,7 @@
 	"directory.hidden": "Ocultos",
 	"directory.noSubdirectories": "Sem subdiretórios",
 	"directory.goBack": "Voltar",
-	"directory.typePath": "Type a path... (Tab to complete)",
+	"directory.typePath": "Digite um caminho... (Tab para completar)",
 	"directory.retry": "Tentar novamente",
 	"saveDialog.fileNamePlaceholder": "Nome do arquivo…",
 	"saveDialog.emptyFolder": "Pasta vazia",
@@ -303,7 +305,7 @@
 	"saveDialog.hidden": "Ocultos",
 	"saveDialog.retry": "Tentar novamente",
 	"port.preview": "Visualizar",
-	"port.via": "via {{name}}",
+	"port.via": "por {{name}}",
 	"system.title": "Sistema",
 	"system.infoTitle": "Informações do sistema",
 	"system.unavailable": "Informações do sistema indisponíveis",
@@ -314,8 +316,8 @@
 	"system.disk": "Disco",
 	"system.cores": "{{count}} núcleos",
 	"system.process": "PROCESSO",
-	"system.summaryCpu": "cpu {{percent}}%",
-	"system.summaryMemory": "mem {{percent}}%",
+	"system.summaryCpu": "CPU {{percent}}%",
+	"system.summaryMemory": "memória {{percent}}%",
 	"system.summaryDisk": "disco {{percent}}%",
 	"system.uptime": "ativo {{value}}",
 	"system.load": "carga {{value}}",
@@ -341,7 +343,7 @@
 	"admin.webPerplexityHint": "Obtenha sua chave de API em perplexity.ai",
 	"admin.webPerplexityBaseUrl": "URL base",
 	"admin.webPerplexityBaseUrlHint": "Deixe em branco para api.perplexity.ai. Altere para LiteLLM ou outros proxies compatíveis.",
-	"admin.webChatCompletions": "Chat Completions",
+	"admin.webChatCompletions": "Completações de chat",
 	"admin.webCcBaseUrl": "URL base",
 	"admin.webCcKey": "Chave de API",
 	"admin.webCcModel": "Modelo",
@@ -448,7 +450,7 @@
 	"automations.noMatches": "Sem resultados",
 	"automations.noAutomations": "Nenhuma automação ainda",
 	"automations.create": "Criar automação",
-	"automations.status": "Status",
+	"automations.status": "Situação",
 	"automations.active": "Ativa",
 	"automations.paused": "Pausada",
 	"automations.all": "Todas",
@@ -463,7 +465,7 @@
 	"automations.enable": "Ativar",
 	"automations.copied": "Copiado!",
 	"automations.copy": "Copiar",
-	"automations.prompt": "Prompt",
+	"automations.prompt": "Instrução",
 	"automations.runs": "Execuções",
 	"automations.noRuns": "Nenhuma execução ainda",
 	"automations.viewChat": "ver chat →",
@@ -493,7 +495,7 @@
 	"automationModal.failedToSave": "Falha ao salvar automação",
 	"connections.failedToUpdate": "Falha ao atualizar conexão",
 	"admin.gateway.tab": "Gateway",
-	"admin.gateway.title": "API Gateway",
+	"admin.gateway.title": "Gateway de API",
 	"admin.gateway.description": "Gere chaves API para conectar o Open WebUI ou qualquer cliente compatível com OpenAI aos seus workspaces.",
 	"admin.gateway.loadError": "Falha ao carregar as chaves API",
 	"admin.gateway.model": "Modelo de resposta",
@@ -586,7 +588,7 @@
 	"chat.commandPlan": "Modo plano",
 	"chat.commandPlanOn": "Ligado",
 	"chat.commandPlanOff": "Desligado",
-	"chat.commandStatus": "Status",
+	"chat.commandStatus": "Situação",
 	"chat.commandStatusDesc": "Uso de contexto, ID do chat",
 	"chat.statusContextUsage": "Uso de contexto",
 	"chat.statusEstimated": "Contexto estimado",
@@ -645,24 +647,24 @@
 	"admin.audio.qualityHintLow": "Arquivos menores, otimizado para voz.",
 	"admin.audio.stt": "Voz para texto",
 	"admin.audio.sttHint": "Compatível com a API audio/transcriptions da OpenAI.",
-	"admin.audio.tts": "Text-to-Speech",
-	"admin.audio.enableTts": "Enable Text-to-Speech",
-	"admin.audio.ttsEnabledHint": "Enables voice mode and assistant speak buttons when a TTS key is available.",
-	"admin.audio.ttsAutoStream": "Speak streamed responses",
-	"admin.audio.ttsAutoStreamHint": "Read every assistant response aloud as it streams, even outside voice mode.",
-	"admin.audio.ttsKeyPlaceholder": "Leave blank to reuse STT key",
-	"admin.audio.ttsVoice": "Voice",
-	"admin.audio.ttsFormat": "Format",
-	"admin.audio.ttsPlaybackSpeed": "Playback speed",
-	"admin.audio.ttsHint": "Compatible with OpenAI's audio/speech API. If no TTS key is set, the STT key is reused.",
-	"admin.audio.voiceMode": "Voice Mode",
-	"admin.audio.voiceModeSttMode": "Speech recognition",
-	"admin.audio.voiceModeSttBrowser": "Browser",
-	"admin.audio.voiceModeSttProvider": "Configured STT",
-	"admin.audio.voiceModeBrowserSttHint": "Uses browser speech recognition, then stores the audio and transcript locally for the voice data flywheel.",
-	"admin.audio.voiceModeProviderSttHint": "Sends voice-mode audio through the configured STT provider and stores the result locally.",
-	"admin.audio.voiceModeSystemPrompt": "System prompt",
-	"admin.audio.voiceModeSystemPromptHint": "Applied only while voice mode is on. Keep it short to make spoken replies useful.",
+	"admin.audio.tts": "Texto para fala",
+	"admin.audio.enableTts": "Ativar texto para fala",
+	"admin.audio.ttsEnabledHint": "Ativa o modo de voz e os botões de leitura das respostas quando uma chave de texto para fala está disponível.",
+	"admin.audio.ttsAutoStream": "Ler respostas transmitidas",
+	"admin.audio.ttsAutoStreamHint": "Lê em voz alta cada resposta do assistente enquanto ela é transmitida, mesmo fora do modo de voz.",
+	"admin.audio.ttsKeyPlaceholder": "Deixe em branco para reutilizar a chave de STT",
+	"admin.audio.ttsVoice": "Voz",
+	"admin.audio.ttsFormat": "Formato",
+	"admin.audio.ttsPlaybackSpeed": "Velocidade de reprodução",
+	"admin.audio.ttsHint": "Compatível com a API audio/speech da OpenAI. Se nenhuma chave de texto para fala for definida, a chave de STT será reutilizada.",
+	"admin.audio.voiceMode": "Modo de voz",
+	"admin.audio.voiceModeSttMode": "Reconhecimento de fala",
+	"admin.audio.voiceModeSttBrowser": "Navegador",
+	"admin.audio.voiceModeSttProvider": "STT configurado",
+	"admin.audio.voiceModeBrowserSttHint": "Usa o reconhecimento de fala do navegador e salva o áudio e a transcrição localmente para o ciclo de dados de voz.",
+	"admin.audio.voiceModeProviderSttHint": "Envia o áudio do modo de voz ao provedor STT configurado e salva o resultado localmente.",
+	"admin.audio.voiceModeSystemPrompt": "Prompt do sistema",
+	"admin.audio.voiceModeSystemPromptHint": "Aplicado apenas enquanto o modo de voz estiver ativo. Mantenha curto para que as respostas faladas sejam úteis.",
 	"admin.audio.saveFailed": "Falha ao salvar as configurações de áudio",
 	"admin.images.title": "Imagens",
 	"admin.images.generation": "Geração de imagens",
@@ -749,17 +751,17 @@
 	"chat.edit.thought": "Pensamento",
 	"chat.thinking": "Pensando",
 	"chat.edit.tool": "Ferramenta",
-	"chat.edit.item": "Item",
+	"chat.edit.item": "Item editado",
 	"chat.dictate.unsupported": "O reconhecimento de voz não é suportado neste navegador.",
-	"chat.voiceModeOn": "Voice mode on",
-	"chat.voiceListening": "Listening...",
-	"chat.voiceWaiting": "Waiting for response...",
-	"chat.voiceProviderSttFallback": "Configured STT failed. Used browser transcript.",
-	"chat.voiceProviderSttNoAudio": "Configured STT needs microphone audio, but no voice-mode recording was captured.",
-	"chat.ttsNotConfigured": "Text-to-Speech is not enabled or configured.",
-	"chat.speakResponses": "Speak responses",
-	"chat.stopSpeaking": "Stop speaking",
-	"chat.fallbackTitle": "Chat",
+	"chat.voiceModeOn": "Modo de voz ativado",
+	"chat.voiceListening": "Ouvindo...",
+	"chat.voiceWaiting": "Aguardando resposta...",
+	"chat.voiceProviderSttFallback": "O STT configurado falhou. A transcrição do navegador foi usada.",
+	"chat.voiceProviderSttNoAudio": "O STT configurado precisa de áudio do microfone, mas nenhuma gravação do modo de voz foi capturada.",
+	"chat.ttsNotConfigured": "Texto para fala não está ativado ou configurado.",
+	"chat.speakResponses": "Ler respostas",
+	"chat.stopSpeaking": "Parar leitura",
+	"chat.fallbackTitle": "Conversa",
 	"chat.greeting": "Como posso ajudar?",
 	"admin.toolServers": "Servidores de ferramentas",
 	"toolServers.title": "Servidores de ferramentas",
@@ -785,7 +787,7 @@
 	"toolServers.specPath": "Caminho da spec",
 	"toolServers.fieldsRequired": "ID e URL são obrigatórios",
 	"toolServers.idInvalid": "O ID só pode conter letras minúsculas, números e sublinhados",
-	"toolServers.auth": "Auth",
+	"toolServers.auth": "Autenticação",
 	"toolServers.authNone": "Nenhuma",
 	"toolServers.authBearer": "Bearer",
 	"toolServers.apiKey": "Chave API",
@@ -822,7 +824,7 @@
 	"admin.subagentsSystemPromptHint": "Deixe vazio para o padrão integrado.",
 	"admin.contextCompaction": "Compactação de contexto",
 	"admin.compactTokenThreshold": "Limite de tokens",
-	"admin.compactTokenThresholdUnit": "tokens",
+	"admin.compactTokenThresholdUnit": "tokens de texto",
 	"admin.compactTokenThresholdHint": "Mensagens antigas são resumidas quando o contexto estimado excede este limite. Padrão: 80.000.",
 	"onboarding.welcomeTitle": "Seu computador, de qualquer lugar",
 	"onboarding.welcomeDesc": "Programe, gerencie e controle sua máquina de qualquer dispositivo.",
@@ -859,5 +861,138 @@
 	"general.persistentYes": "Ativo",
 	"general.persistentNo": "Não concedido",
 	"general.clearCache": "Limpar cache",
-	"general.cacheCleared": "Cache limpo"
+	"general.cacheCleared": "Cache limpo",
+	"general.uiScale": "Escala da interface",
+	"general.default": "Padrão",
+	"general.decreaseUiScale": "Diminuir escala da interface",
+	"general.increaseUiScale": "Aumentar escala da interface",
+	"appearance.title": "Aparência",
+	"appearance.colors": "Cores",
+	"appearance.interface": "Interface do usuário",
+	"appearance.import": "Importar",
+	"appearance.exportTheme": "Exportar",
+	"appearance.reset": "Redefinir",
+	"appearance.background": "Plano de fundo",
+	"appearance.foreground": "Primeiro plano",
+	"appearance.uiFont": "Fonte da interface",
+	"appearance.exported": "Tema exportado",
+	"appearance.exportFailed": "Falha ao exportar o tema",
+	"appearance.imported": "Tema importado",
+	"appearance.importFailed": "Falha ao importar o tema",
+	"common.add": "Adicionar",
+	"common.forward": "Avançar",
+	"common.apply": "Aplicar",
+	"common.reject": "Rejeitar",
+	"connections.provider": "Provedor",
+	"connections.apiType": "Tipo de API",
+	"connections.chatCompletions": "Completações de chat",
+	"connections.responses": "Respostas",
+	"admin.agentsNoProfiles": "Nenhum perfil de agente",
+	"models.requestParams": "Parâmetros da requisição",
+	"models.paramKey": "chave",
+	"models.paramValue": "valor",
+	"editor.binaryFile": "Arquivo binário",
+	"editor.noChanges": "Sem alterações",
+	"editor.noUncommittedModifications": "Este arquivo não tem modificações não commitadas.",
+	"git.loadChangesFailed": "Falha ao carregar alterações do git",
+	"git.unableToLoadChanges": "Não foi possível carregar as alterações",
+	"git.collapseAll": "Recolher tudo",
+	"git.expandAll": "Expandir tudo",
+	"git.uncommittedChanges": "Não commitado",
+	"git.change_one": "{{count}} alteração",
+	"git.change_other": "{{count}} alterações",
+	"git.staged": "Preparado",
+	"git.noFileChangesYet": "Nenhuma alteração de arquivo ainda",
+	"git.projectChangesHint": "As alterações neste projeto aparecerão aqui.",
+	"git.noTextualDiff": "Nenhum diff textual disponível",
+	"git.branches": "Ramificações",
+	"git.branchActions": "Ações do branch",
+	"git.noBranchesFound": "Nenhum branch encontrado",
+	"git.searchWorktrees": "Buscar worktrees",
+	"git.worktrees": "Árvores de trabalho",
+	"git.noWorktreesFound": "Nenhum worktree encontrado",
+	"git.newWorktree": "Novo worktree",
+	"git.unpushedCommit_one": "{{count}} commit não enviado",
+	"git.unpushedCommit_other": "{{count}} commits não enviados",
+	"git.unpushed": "Não enviado",
+	"git.switchBranches": "Trocar de branch?",
+	"git.createBranchPrompt": "Criar branch?",
+	"git.moveChangesPromptPrefix_one": "Você tem {{count}} arquivo alterado em",
+	"git.moveChangesPromptPrefix_other": "Você tem {{count}} arquivos alterados em",
+	"git.moveChangesPromptMiddle": "Escolha se quer deixar essas alterações aqui ou levá-las para",
+	"git.leaveChanges": "Deixar alterações",
+	"git.bringChanges": "Levar alterações",
+	"git.copyBranchName": "Copiar nome do branch",
+	"git.uncommitFailed": "Falha ao desfazer commit",
+	"git.noChangesStashed": "Nenhuma alteração salva no stash",
+	"git.switchBranchFailed": "Falha ao trocar de branch",
+	"git.createWorktreeFailed": "Falha ao criar worktree",
+	"git.createBranchFailed": "Falha ao criar branch",
+	"git.renameBranch": "Renomear branch",
+	"git.branchRenamed": "Branch renomeado",
+	"git.renameBranchFailed": "Falha ao renomear branch",
+	"git.branchNameCopied": "Nome do branch copiado",
+	"git.deleteBranchConfirm": "Excluir branch \"{{name}}\"?",
+	"git.branchDeleted": "Branch excluído",
+	"git.deleteBranchFailed": "Falha ao excluir branch",
+	"automations.automation": "Automação",
+	"automations.once": "Uma vez",
+	"automations.hourly": "A cada hora",
+	"automations.daily": "Diariamente",
+	"automations.weekly": "Semanalmente",
+	"automations.monthly": "Mensalmente",
+	"automations.custom": "Personalizado",
+	"automations.time": "Hora",
+	"automations.day": "Dia",
+	"automations.dayMo": "Seg",
+	"automations.dayTu": "Ter",
+	"automations.dayWe": "Qua",
+	"automations.dayTh": "Qui",
+	"automations.dayFr": "Sex",
+	"automations.daySa": "Sáb",
+	"automations.daySu": "Dom",
+	"chat.noSkillsFound": "Nenhuma skill encontrada",
+	"chat.skills": "Habilidades",
+	"chat.commands": "Comandos",
+	"chat.noOutputItems": "Nenhum item de saída",
+	"chat.failedWithCode": "Falhou {{code}}",
+	"chat.finished": "Concluído",
+	"chat.terminating": "Encerrando",
+	"chat.forceTerminate": "Forçar encerramento",
+	"chat.terminate": "Encerrar",
+	"chat.sessionUnavailable": "Sessão ao vivo indisponível. A saída salva permanece no chat.",
+	"chat.sessions": "Sessões",
+	"chat.queuedMessages": "Mensagens na fila",
+	"preview.pdfLoadError": "Falha ao carregar PDF.",
+	"preview.visual": "Visualização",
+	"preview.source": "Fonte",
+	"preview.diagramError": "Erro no diagrama",
+	"preview.diagramRenderError": "Falha ao renderizar diagrama",
+	"a11y.zoomOut": "Diminuir zoom",
+	"a11y.resetZoom": "Redefinir zoom",
+	"a11y.zoomIn": "Aumentar zoom",
+	"port.openInNewTab": "Abrir em nova aba",
+	"port.notResponding": "localhost:{{port}} não está respondendo",
+	"port.previewTitle": "Prévia da porta {{port}}",
+	"terminal.dictateInput": "Ditar entrada do terminal",
+	"a11y.page": "Página {{page}}",
+	"markdown.linkTo": "Link para {{target}}",
+	"markdown.boldShortcut": "Negrito (⌘B)",
+	"markdown.italicShortcut": "Itálico (⌘I)",
+	"markdown.underlineShortcut": "Sublinhado (⌘U)",
+	"markdown.strikethrough": "Tachado",
+	"markdown.inlineCode": "Código inline",
+	"markdown.highlight": "Realçar",
+	"markdown.heading1": "Título 1",
+	"markdown.heading2": "Título 2",
+	"markdown.heading3": "Título 3",
+	"markdown.bulletList": "Lista com marcadores",
+	"markdown.numberedList": "Lista numerada",
+	"markdown.taskList": "Lista de tarefas",
+	"markdown.quote": "Citação",
+	"markdown.codeBlock": "Bloco de código",
+	"markdown.horizontalRule": "Linha horizontal",
+	"markdown.insertTable": "Inserir tabela",
+	"markdown.undoShortcut": "Desfazer (⌘Z)",
+	"markdown.redoShortcut": "Refazer (⌘⇧Z)"
 }
diff --git a/cptr/frontend/src/lib/i18n/locales/ru.json b/cptr/frontend/src/lib/i18n/locales/ru.json
index 734900ee..948517dd 100644
--- a/cptr/frontend/src/lib/i18n/locales/ru.json
+++ b/cptr/frontend/src/lib/i18n/locales/ru.json
@@ -84,6 +84,7 @@
 	"search.noRecentChats": "Нет недавних чатов",
 	"settings.back": "Назад",
 	"settings.general": "Основные",
+	"settings.appearance": "Внешний вид",
 	"settings.memory": "Память",
 	"pwa.settingsTitle": "Прогрессивное веб-приложение",
 	"intent.chooseWorkspace": "Рабочая область",
@@ -157,11 +158,11 @@
 	"git.changes": "Изменения",
 	"git.history": "История",
 	"git.fetch": "Получить",
-	"git.pull": "Pull",
-	"git.push": "Push",
+	"git.pull": "Получить",
+	"git.push": "Отправить",
 	"git.publish": "Опубликовать",
-	"git.pullCount": "Pull ↓{{count}}",
-	"git.pushCount": "Push ↑{{count}}",
+	"git.pullCount": "Получить ↓{{count}}",
+	"git.pushCount": "Отправить ↑{{count}}",
 	"git.committed": "Закоммичено",
 	"git.pulled": "Получено",
 	"git.pushed": "Отправлено",
@@ -246,7 +247,7 @@
 	"admin.agentsSandboxMode": "Песочница",
 	"admin.agentsPermissionMode": "Режим разрешений",
 	"admin.agentsLaunchArgs": "Аргументы запуска",
-	"admin.agentsApiEndpoint": "API endpoint",
+	"admin.agentsApiEndpoint": "Конечная точка API",
 	"admin.agentsServerUrl": "URL сервера",
 	"admin.agentsServerPassword": "Пароль сервера",
 	"admin.agentsStatusReady": "Готово",
@@ -267,6 +268,7 @@
 	"connections.apiKey": "API-ключ",
 	"connections.baseUrl": "Базовый URL",
 	"connections.prefixId": "ID префикса",
+	"connections.prefixPlaceholder": "например openrouter",
 	"connections.models": "Модели (через запятую, необязательно)",
 	"connections.modelsHint": "Оставьте пустым для автообнаружения от провайдера.",
 	"connections.cancel": "Отмена",
@@ -294,7 +296,7 @@
 	"directory.hidden": "Скрытые",
 	"directory.noSubdirectories": "Нет подкаталогов",
 	"directory.goBack": "Назад",
-	"directory.typePath": "Type a path... (Tab to complete)",
+	"directory.typePath": "Введите путь... (Tab для автодополнения)",
 	"directory.retry": "Повторить",
 	"saveDialog.fileNamePlaceholder": "Имя файла…",
 	"saveDialog.emptyFolder": "Пустая папка",
@@ -314,7 +316,7 @@
 	"system.disk": "Диск",
 	"system.cores": "{{count}} ядер",
 	"system.process": "ПРОЦЕСС",
-	"system.summaryCpu": "cpu {{percent}}%",
+	"system.summaryCpu": "процессор {{percent}}%",
 	"system.summaryMemory": "пам {{percent}}%",
 	"system.summaryDisk": "диск {{percent}}%",
 	"system.uptime": "работает {{value}}",
@@ -341,7 +343,7 @@
 	"admin.webPerplexityHint": "Получите API-ключ на perplexity.ai",
 	"admin.webPerplexityBaseUrl": "Базовый URL",
 	"admin.webPerplexityBaseUrlHint": "Оставьте пустым для api.perplexity.ai. Измените для LiteLLM или других совместимых прокси.",
-	"admin.webChatCompletions": "Chat Completions",
+	"admin.webChatCompletions": "Чат-завершения",
 	"admin.webCcBaseUrl": "Базовый URL",
 	"admin.webCcKey": "API-ключ",
 	"admin.webCcModel": "Модель",
@@ -645,24 +647,24 @@
 	"admin.audio.qualityHintLow": "Наименьшие файлы, оптимизировано для речи.",
 	"admin.audio.stt": "Распознавание речи",
 	"admin.audio.sttHint": "Совместимо с API audio/transcriptions OpenAI.",
-	"admin.audio.tts": "Text-to-Speech",
-	"admin.audio.enableTts": "Enable Text-to-Speech",
-	"admin.audio.ttsEnabledHint": "Enables voice mode and assistant speak buttons when a TTS key is available.",
-	"admin.audio.ttsAutoStream": "Speak streamed responses",
-	"admin.audio.ttsAutoStreamHint": "Read every assistant response aloud as it streams, even outside voice mode.",
-	"admin.audio.ttsKeyPlaceholder": "Leave blank to reuse STT key",
-	"admin.audio.ttsVoice": "Voice",
-	"admin.audio.ttsFormat": "Format",
-	"admin.audio.ttsPlaybackSpeed": "Playback speed",
-	"admin.audio.ttsHint": "Compatible with OpenAI's audio/speech API. If no TTS key is set, the STT key is reused.",
-	"admin.audio.voiceMode": "Voice Mode",
-	"admin.audio.voiceModeSttMode": "Speech recognition",
-	"admin.audio.voiceModeSttBrowser": "Browser",
-	"admin.audio.voiceModeSttProvider": "Configured STT",
-	"admin.audio.voiceModeBrowserSttHint": "Uses browser speech recognition, then stores the audio and transcript locally for the voice data flywheel.",
-	"admin.audio.voiceModeProviderSttHint": "Sends voice-mode audio through the configured STT provider and stores the result locally.",
-	"admin.audio.voiceModeSystemPrompt": "System prompt",
-	"admin.audio.voiceModeSystemPromptHint": "Applied only while voice mode is on. Keep it short to make spoken replies useful.",
+	"admin.audio.tts": "Синтез речи",
+	"admin.audio.enableTts": "Включить синтез речи",
+	"admin.audio.ttsEnabledHint": "Включает голосовой режим и кнопки озвучивания ответов, если доступен ключ синтеза речи.",
+	"admin.audio.ttsAutoStream": "Озвучивать потоковые ответы",
+	"admin.audio.ttsAutoStreamHint": "Озвучивает каждый ответ ассистента во время потоковой передачи, даже вне голосового режима.",
+	"admin.audio.ttsKeyPlaceholder": "Оставьте пустым, чтобы повторно использовать ключ STT",
+	"admin.audio.ttsVoice": "Голос",
+	"admin.audio.ttsFormat": "Формат",
+	"admin.audio.ttsPlaybackSpeed": "Скорость воспроизведения",
+	"admin.audio.ttsHint": "Совместимо с API audio/speech OpenAI. Если ключ синтеза речи не задан, повторно используется ключ STT.",
+	"admin.audio.voiceMode": "Голосовой режим",
+	"admin.audio.voiceModeSttMode": "Распознавание речи",
+	"admin.audio.voiceModeSttBrowser": "Браузер",
+	"admin.audio.voiceModeSttProvider": "Настроенный STT",
+	"admin.audio.voiceModeBrowserSttHint": "Использует распознавание речи в браузере, затем локально сохраняет аудио и расшифровку для цикла голосовых данных.",
+	"admin.audio.voiceModeProviderSttHint": "Отправляет аудио голосового режима настроенному STT-провайдеру и локально сохраняет результат.",
+	"admin.audio.voiceModeSystemPrompt": "Системная инструкция",
+	"admin.audio.voiceModeSystemPromptHint": "Применяется только при включенном голосовом режиме. Делайте ее короткой, чтобы устные ответы были полезными.",
 	"admin.audio.saveFailed": "Не удалось сохранить настройки аудио",
 	"admin.images.title": "Изображения",
 	"admin.images.generation": "Генерация изображений",
@@ -751,14 +753,14 @@
 	"chat.edit.tool": "Инструмент",
 	"chat.edit.item": "Элемент",
 	"chat.dictate.unsupported": "Распознавание речи не поддерживается в этом браузере.",
-	"chat.voiceModeOn": "Voice mode on",
-	"chat.voiceListening": "Listening...",
-	"chat.voiceWaiting": "Waiting for response...",
-	"chat.voiceProviderSttFallback": "Configured STT failed. Used browser transcript.",
-	"chat.voiceProviderSttNoAudio": "Configured STT needs microphone audio, but no voice-mode recording was captured.",
-	"chat.ttsNotConfigured": "Text-to-Speech is not enabled or configured.",
-	"chat.speakResponses": "Speak responses",
-	"chat.stopSpeaking": "Stop speaking",
+	"chat.voiceModeOn": "Голосовой режим включен",
+	"chat.voiceListening": "Слушаю...",
+	"chat.voiceWaiting": "Ожидание ответа...",
+	"chat.voiceProviderSttFallback": "Настроенный STT не сработал. Использована расшифровка браузера.",
+	"chat.voiceProviderSttNoAudio": "Настроенному STT нужен звук с микрофона, но запись голосового режима не была получена.",
+	"chat.ttsNotConfigured": "Синтез речи не включен или не настроен.",
+	"chat.speakResponses": "Озвучивать ответы",
+	"chat.stopSpeaking": "Остановить озвучивание",
 	"chat.fallbackTitle": "Чат",
 	"chat.greeting": "Чем могу помочь?",
 	"admin.toolServers": "Серверы инструментов",
@@ -859,5 +861,138 @@
 	"general.persistentYes": "Активно",
 	"general.persistentNo": "Не разрешено",
 	"general.clearCache": "Очистить кэш",
-	"general.cacheCleared": "Кэш очищен"
+	"general.cacheCleared": "Кэш очищен",
+	"general.uiScale": "Масштаб интерфейса",
+	"general.default": "По умолчанию",
+	"general.decreaseUiScale": "Уменьшить масштаб интерфейса",
+	"general.increaseUiScale": "Увеличить масштаб интерфейса",
+	"appearance.title": "Внешний вид",
+	"appearance.colors": "Цвета",
+	"appearance.interface": "Интерфейс",
+	"appearance.import": "Импорт",
+	"appearance.exportTheme": "Экспорт",
+	"appearance.reset": "Сбросить",
+	"appearance.background": "Фон",
+	"appearance.foreground": "Передний план",
+	"appearance.uiFont": "Шрифт интерфейса",
+	"appearance.exported": "Тема экспортирована",
+	"appearance.exportFailed": "Не удалось экспортировать тему",
+	"appearance.imported": "Тема импортирована",
+	"appearance.importFailed": "Не удалось импортировать тему",
+	"common.add": "Добавить",
+	"common.forward": "Вперед",
+	"common.apply": "Применить",
+	"common.reject": "Отклонить",
+	"connections.provider": "Провайдер",
+	"connections.apiType": "Тип API",
+	"connections.chatCompletions": "Чат-завершения",
+	"connections.responses": "Ответы",
+	"admin.agentsNoProfiles": "Нет профилей агентов",
+	"models.requestParams": "Параметры запроса",
+	"models.paramKey": "ключ",
+	"models.paramValue": "значение",
+	"editor.binaryFile": "Двоичный файл",
+	"editor.noChanges": "Нет изменений",
+	"editor.noUncommittedModifications": "В этом файле нет незакоммиченных изменений.",
+	"git.loadChangesFailed": "Не удалось загрузить изменения git",
+	"git.unableToLoadChanges": "Не удалось загрузить изменения",
+	"git.collapseAll": "Свернуть все",
+	"git.expandAll": "Развернуть все",
+	"git.uncommittedChanges": "Не закоммичено",
+	"git.change_one": "{{count}} изменение",
+	"git.change_other": "{{count}} изменений",
+	"git.staged": "В индексе",
+	"git.noFileChangesYet": "Пока нет изменений файлов",
+	"git.projectChangesHint": "Изменения в этом проекте появятся здесь.",
+	"git.noTextualDiff": "Текстовый diff недоступен",
+	"git.branches": "Ветки",
+	"git.branchActions": "Действия с веткой",
+	"git.noBranchesFound": "Ветки не найдены",
+	"git.searchWorktrees": "Искать worktree",
+	"git.worktrees": "Worktree",
+	"git.noWorktreesFound": "Worktree не найдены",
+	"git.newWorktree": "Новый worktree",
+	"git.unpushedCommit_one": "{{count}} неотправленный коммит",
+	"git.unpushedCommit_other": "{{count}} неотправленных коммитов",
+	"git.unpushed": "Не отправлено",
+	"git.switchBranches": "Переключить ветку?",
+	"git.createBranchPrompt": "Создать ветку?",
+	"git.moveChangesPromptPrefix_one": "У вас {{count}} измененный файл в",
+	"git.moveChangesPromptPrefix_other": "У вас {{count}} измененных файлов в",
+	"git.moveChangesPromptMiddle": "Выберите, оставить эти изменения здесь или перенести их в",
+	"git.leaveChanges": "Оставить изменения",
+	"git.bringChanges": "Перенести изменения",
+	"git.copyBranchName": "Копировать имя ветки",
+	"git.uncommitFailed": "Не удалось отменить коммит",
+	"git.noChangesStashed": "Нет изменений для stash",
+	"git.switchBranchFailed": "Не удалось переключить ветку",
+	"git.createWorktreeFailed": "Не удалось создать worktree",
+	"git.createBranchFailed": "Не удалось создать ветку",
+	"git.renameBranch": "Переименовать ветку",
+	"git.branchRenamed": "Ветка переименована",
+	"git.renameBranchFailed": "Не удалось переименовать ветку",
+	"git.branchNameCopied": "Имя ветки скопировано",
+	"git.deleteBranchConfirm": "Удалить ветку \"{{name}}\"?",
+	"git.branchDeleted": "Ветка удалена",
+	"git.deleteBranchFailed": "Не удалось удалить ветку",
+	"automations.automation": "Автоматизация",
+	"automations.once": "Один раз",
+	"automations.hourly": "Ежечасно",
+	"automations.daily": "Ежедневно",
+	"automations.weekly": "Еженедельно",
+	"automations.monthly": "Ежемесячно",
+	"automations.custom": "Пользовательское",
+	"automations.time": "Время",
+	"automations.day": "День",
+	"automations.dayMo": "Пн",
+	"automations.dayTu": "Вт",
+	"automations.dayWe": "Ср",
+	"automations.dayTh": "Чт",
+	"automations.dayFr": "Пт",
+	"automations.daySa": "Сб",
+	"automations.daySu": "Вс",
+	"chat.noSkillsFound": "Навыки не найдены",
+	"chat.skills": "Навыки",
+	"chat.commands": "Команды",
+	"chat.noOutputItems": "Нет элементов вывода",
+	"chat.failedWithCode": "Ошибка {{code}}",
+	"chat.finished": "Завершено",
+	"chat.terminating": "Завершение",
+	"chat.forceTerminate": "Принудительно завершить",
+	"chat.terminate": "Завершить",
+	"chat.sessionUnavailable": "Live-сессия недоступна. Сохраненный вывод остается в чате.",
+	"chat.sessions": "Сессии",
+	"chat.queuedMessages": "Сообщения в очереди",
+	"preview.pdfLoadError": "Не удалось загрузить PDF.",
+	"preview.visual": "Визуально",
+	"preview.source": "Источник",
+	"preview.diagramError": "Ошибка диаграммы",
+	"preview.diagramRenderError": "Не удалось отрисовать диаграмму",
+	"a11y.zoomOut": "Уменьшить",
+	"a11y.resetZoom": "Сбросить масштаб",
+	"a11y.zoomIn": "Увеличить",
+	"port.openInNewTab": "Открыть в новой вкладке",
+	"port.notResponding": "localhost:{{port}} не отвечает",
+	"port.previewTitle": "Предпросмотр порта {{port}}",
+	"terminal.dictateInput": "Диктовать ввод терминала",
+	"a11y.page": "Страница {{page}}",
+	"markdown.linkTo": "Ссылка на {{target}}",
+	"markdown.boldShortcut": "Жирный (⌘B)",
+	"markdown.italicShortcut": "Курсив (⌘I)",
+	"markdown.underlineShortcut": "Подчеркнутый (⌘U)",
+	"markdown.strikethrough": "Зачеркнутый",
+	"markdown.inlineCode": "Встроенный код",
+	"markdown.highlight": "Выделить",
+	"markdown.heading1": "Заголовок 1",
+	"markdown.heading2": "Заголовок 2",
+	"markdown.heading3": "Заголовок 3",
+	"markdown.bulletList": "Маркированный список",
+	"markdown.numberedList": "Нумерованный список",
+	"markdown.taskList": "Список задач",
+	"markdown.quote": "Цитата",
+	"markdown.codeBlock": "Блок кода",
+	"markdown.horizontalRule": "Горизонтальная линия",
+	"markdown.insertTable": "Вставить таблицу",
+	"markdown.undoShortcut": "Отменить (⌘Z)",
+	"markdown.redoShortcut": "Повторить (⌘⇧Z)"
 }
diff --git a/cptr/frontend/src/lib/i18n/locales/zh-CN.json b/cptr/frontend/src/lib/i18n/locales/zh-CN.json
index b01cf832..7013e23f 100644
--- a/cptr/frontend/src/lib/i18n/locales/zh-CN.json
+++ b/cptr/frontend/src/lib/i18n/locales/zh-CN.json
@@ -84,6 +84,7 @@
 	"search.noRecentChats": "没有最近对话",
 	"settings.back": "返回",
 	"settings.general": "通用",
+	"settings.appearance": "外观",
 	"settings.memory": "记忆",
 	"pwa.settingsTitle": "渐进式 Web 应用",
 	"intent.chooseWorkspace": "工作区",
@@ -267,6 +268,7 @@
 	"connections.apiKey": "API 密钥",
 	"connections.baseUrl": "基础 URL",
 	"connections.prefixId": "前缀 ID",
+	"connections.prefixPlaceholder": "例如 openrouter",
 	"connections.models": "模型（逗号分隔，可选）",
 	"connections.modelsHint": "留空以从提供商自动发现。",
 	"connections.cancel": "取消",
@@ -294,7 +296,7 @@
 	"directory.hidden": "隐藏文件",
 	"directory.noSubdirectories": "无子目录",
 	"directory.goBack": "返回",
-	"directory.typePath": "Type a path... (Tab to complete)",
+	"directory.typePath": "输入路径...（按 Tab 补全）",
 	"directory.retry": "重试",
 	"saveDialog.fileNamePlaceholder": "文件名…",
 	"saveDialog.emptyFolder": "空文件夹",
@@ -314,7 +316,7 @@
 	"system.disk": "磁盘",
 	"system.cores": "{{count}} 核",
 	"system.process": "进程",
-	"system.summaryCpu": "cpu {{percent}}%",
+	"system.summaryCpu": "处理器 {{percent}}%",
 	"system.summaryMemory": "内存 {{percent}}%",
 	"system.summaryDisk": "磁盘 {{percent}}%",
 	"system.uptime": "运行 {{value}}",
@@ -341,7 +343,7 @@
 	"admin.webPerplexityHint": "在 perplexity.ai 获取你的 API 密钥",
 	"admin.webPerplexityBaseUrl": "基础 URL",
 	"admin.webPerplexityBaseUrlHint": "留空使用 api.perplexity.ai。如使用 LiteLLM 或其他兼容代理请修改。",
-	"admin.webChatCompletions": "Chat Completions",
+	"admin.webChatCompletions": "聊天补全",
 	"admin.webCcBaseUrl": "基础 URL",
 	"admin.webCcKey": "API 密钥",
 	"admin.webCcModel": "模型",
@@ -645,24 +647,24 @@
 	"admin.audio.qualityHintLow": "最小文件，针对语音优化。",
 	"admin.audio.stt": "语音转文字",
 	"admin.audio.sttHint": "兼容 OpenAI 的 audio/transcriptions API。",
-	"admin.audio.tts": "Text-to-Speech",
-	"admin.audio.enableTts": "Enable Text-to-Speech",
-	"admin.audio.ttsEnabledHint": "Enables voice mode and assistant speak buttons when a TTS key is available.",
-	"admin.audio.ttsAutoStream": "Speak streamed responses",
-	"admin.audio.ttsAutoStreamHint": "Read every assistant response aloud as it streams, even outside voice mode.",
-	"admin.audio.ttsKeyPlaceholder": "Leave blank to reuse STT key",
-	"admin.audio.ttsVoice": "Voice",
-	"admin.audio.ttsFormat": "Format",
-	"admin.audio.ttsPlaybackSpeed": "Playback speed",
-	"admin.audio.ttsHint": "Compatible with OpenAI's audio/speech API. If no TTS key is set, the STT key is reused.",
-	"admin.audio.voiceMode": "Voice Mode",
-	"admin.audio.voiceModeSttMode": "Speech recognition",
-	"admin.audio.voiceModeSttBrowser": "Browser",
-	"admin.audio.voiceModeSttProvider": "Configured STT",
-	"admin.audio.voiceModeBrowserSttHint": "Uses browser speech recognition, then stores the audio and transcript locally for the voice data flywheel.",
-	"admin.audio.voiceModeProviderSttHint": "Sends voice-mode audio through the configured STT provider and stores the result locally.",
-	"admin.audio.voiceModeSystemPrompt": "System prompt",
-	"admin.audio.voiceModeSystemPromptHint": "Applied only while voice mode is on. Keep it short to make spoken replies useful.",
+	"admin.audio.tts": "文本转语音",
+	"admin.audio.enableTts": "启用文本转语音",
+	"admin.audio.ttsEnabledHint": "当文本转语音密钥可用时，启用语音模式和助手朗读按钮。",
+	"admin.audio.ttsAutoStream": "朗读流式响应",
+	"admin.audio.ttsAutoStreamHint": "即使不在语音模式下，也会在流式传输时朗读每条助手响应。",
+	"admin.audio.ttsKeyPlaceholder": "留空以复用 STT 密钥",
+	"admin.audio.ttsVoice": "语音",
+	"admin.audio.ttsFormat": "格式",
+	"admin.audio.ttsPlaybackSpeed": "播放速度",
+	"admin.audio.ttsHint": "兼容 OpenAI audio/speech API。如果未设置文本转语音密钥，将复用 STT 密钥。",
+	"admin.audio.voiceMode": "语音模式",
+	"admin.audio.voiceModeSttMode": "语音识别",
+	"admin.audio.voiceModeSttBrowser": "浏览器",
+	"admin.audio.voiceModeSttProvider": "已配置的 STT",
+	"admin.audio.voiceModeBrowserSttHint": "使用浏览器语音识别，然后将音频和转录文本本地保存，用于语音数据循环。",
+	"admin.audio.voiceModeProviderSttHint": "将语音模式音频发送到已配置的 STT 提供商，并将结果本地保存。",
+	"admin.audio.voiceModeSystemPrompt": "系统提示词",
+	"admin.audio.voiceModeSystemPromptHint": "仅在语音模式开启时应用。请保持简短，让朗读回复更有用。",
 	"admin.audio.saveFailed": "保存音频设置失败",
 	"admin.images.title": "图像",
 	"admin.images.generation": "图像生成",
@@ -751,14 +753,14 @@
 	"chat.edit.tool": "工具",
 	"chat.edit.item": "项目",
 	"chat.dictate.unsupported": "此浏览器不支持语音识别。",
-	"chat.voiceModeOn": "Voice mode on",
-	"chat.voiceListening": "Listening...",
-	"chat.voiceWaiting": "Waiting for response...",
-	"chat.voiceProviderSttFallback": "Configured STT failed. Used browser transcript.",
-	"chat.voiceProviderSttNoAudio": "Configured STT needs microphone audio, but no voice-mode recording was captured.",
-	"chat.ttsNotConfigured": "Text-to-Speech is not enabled or configured.",
-	"chat.speakResponses": "Speak responses",
-	"chat.stopSpeaking": "Stop speaking",
+	"chat.voiceModeOn": "语音模式已开启",
+	"chat.voiceListening": "正在聆听...",
+	"chat.voiceWaiting": "正在等待响应...",
+	"chat.voiceProviderSttFallback": "已配置的 STT 失败。已使用浏览器转录。",
+	"chat.voiceProviderSttNoAudio": "已配置的 STT 需要麦克风音频，但没有捕获到语音模式录音。",
+	"chat.ttsNotConfigured": "文本转语音未启用或未配置。",
+	"chat.speakResponses": "朗读响应",
+	"chat.stopSpeaking": "停止朗读",
 	"chat.fallbackTitle": "聊天",
 	"chat.greeting": "有什么可以帮您的？",
 	"admin.toolServers": "工具服务器",
@@ -859,5 +861,138 @@
 	"general.persistentYes": "已启用",
 	"general.persistentNo": "未授予",
 	"general.clearCache": "清除缓存",
-	"general.cacheCleared": "缓存已清除"
+	"general.cacheCleared": "缓存已清除",
+	"general.uiScale": "界面缩放",
+	"general.default": "默认",
+	"general.decreaseUiScale": "缩小界面",
+	"general.increaseUiScale": "放大界面",
+	"appearance.title": "外观",
+	"appearance.colors": "颜色",
+	"appearance.interface": "界面",
+	"appearance.import": "导入",
+	"appearance.exportTheme": "导出",
+	"appearance.reset": "重置",
+	"appearance.background": "背景",
+	"appearance.foreground": "前景",
+	"appearance.uiFont": "界面字体",
+	"appearance.exported": "主题已导出",
+	"appearance.exportFailed": "主题导出失败",
+	"appearance.imported": "主题已导入",
+	"appearance.importFailed": "主题导入失败",
+	"common.add": "添加",
+	"common.forward": "前进",
+	"common.apply": "应用",
+	"common.reject": "拒绝",
+	"connections.provider": "提供商",
+	"connections.apiType": "API 类型",
+	"connections.chatCompletions": "聊天补全",
+	"connections.responses": "响应",
+	"admin.agentsNoProfiles": "没有代理配置",
+	"models.requestParams": "请求参数",
+	"models.paramKey": "键",
+	"models.paramValue": "值",
+	"editor.binaryFile": "二进制文件",
+	"editor.noChanges": "无更改",
+	"editor.noUncommittedModifications": "此文件没有未提交的修改。",
+	"git.loadChangesFailed": "无法加载 git 更改",
+	"git.unableToLoadChanges": "无法加载更改",
+	"git.collapseAll": "全部折叠",
+	"git.expandAll": "全部展开",
+	"git.uncommittedChanges": "未提交",
+	"git.change_one": "{{count}} 项更改",
+	"git.change_other": "{{count}} 项更改",
+	"git.staged": "已暂存",
+	"git.noFileChangesYet": "尚无文件更改",
+	"git.projectChangesHint": "此项目中的更改会显示在这里。",
+	"git.noTextualDiff": "没有可用的文本差异",
+	"git.branches": "分支",
+	"git.branchActions": "分支操作",
+	"git.noBranchesFound": "未找到分支",
+	"git.searchWorktrees": "搜索工作树",
+	"git.worktrees": "工作树",
+	"git.noWorktreesFound": "未找到工作树",
+	"git.newWorktree": "新建工作树",
+	"git.unpushedCommit_one": "{{count}} 个未推送提交",
+	"git.unpushedCommit_other": "{{count}} 个未推送提交",
+	"git.unpushed": "未推送",
+	"git.switchBranches": "切换分支？",
+	"git.createBranchPrompt": "创建分支？",
+	"git.moveChangesPromptPrefix_one": "你在以下分支有 {{count}} 个已更改文件：",
+	"git.moveChangesPromptPrefix_other": "你在以下分支有 {{count}} 个已更改文件：",
+	"git.moveChangesPromptMiddle": "请选择将这些更改留在这里，还是带到",
+	"git.leaveChanges": "留下更改",
+	"git.bringChanges": "带上更改",
+	"git.copyBranchName": "复制分支名称",
+	"git.uncommitFailed": "无法撤销提交",
+	"git.noChangesStashed": "没有已 stash 的更改",
+	"git.switchBranchFailed": "无法切换分支",
+	"git.createWorktreeFailed": "无法创建工作树",
+	"git.createBranchFailed": "无法创建分支",
+	"git.renameBranch": "重命名分支",
+	"git.branchRenamed": "分支已重命名",
+	"git.renameBranchFailed": "无法重命名分支",
+	"git.branchNameCopied": "分支名称已复制",
+	"git.deleteBranchConfirm": "删除分支“{{name}}”？",
+	"git.branchDeleted": "分支已删除",
+	"git.deleteBranchFailed": "无法删除分支",
+	"automations.automation": "自动化",
+	"automations.once": "一次",
+	"automations.hourly": "每小时",
+	"automations.daily": "每天",
+	"automations.weekly": "每周",
+	"automations.monthly": "每月",
+	"automations.custom": "自定义",
+	"automations.time": "时间",
+	"automations.day": "日期",
+	"automations.dayMo": "一",
+	"automations.dayTu": "二",
+	"automations.dayWe": "三",
+	"automations.dayTh": "四",
+	"automations.dayFr": "五",
+	"automations.daySa": "六",
+	"automations.daySu": "日",
+	"chat.noSkillsFound": "未找到技能",
+	"chat.skills": "技能",
+	"chat.commands": "命令",
+	"chat.noOutputItems": "没有输出项",
+	"chat.failedWithCode": "失败 {{code}}",
+	"chat.finished": "已完成",
+	"chat.terminating": "正在终止",
+	"chat.forceTerminate": "强制终止",
+	"chat.terminate": "终止",
+	"chat.sessionUnavailable": "实时会话不可用。保存的输出仍保留在聊天中。",
+	"chat.sessions": "会话",
+	"chat.queuedMessages": "排队消息",
+	"preview.pdfLoadError": "无法加载 PDF。",
+	"preview.visual": "可视化",
+	"preview.source": "源码",
+	"preview.diagramError": "图表错误",
+	"preview.diagramRenderError": "无法渲染图表",
+	"a11y.zoomOut": "缩小",
+	"a11y.resetZoom": "重置缩放",
+	"a11y.zoomIn": "放大",
+	"port.openInNewTab": "在新标签页打开",
+	"port.notResponding": "localhost:{{port}} 没有响应",
+	"port.previewTitle": "端口 {{port}} 预览",
+	"terminal.dictateInput": "听写终端输入",
+	"a11y.page": "第 {{page}} 页",
+	"markdown.linkTo": "链接到 {{target}}",
+	"markdown.boldShortcut": "加粗 (⌘B)",
+	"markdown.italicShortcut": "斜体 (⌘I)",
+	"markdown.underlineShortcut": "下划线 (⌘U)",
+	"markdown.strikethrough": "删除线",
+	"markdown.inlineCode": "行内代码",
+	"markdown.highlight": "高亮",
+	"markdown.heading1": "标题 1",
+	"markdown.heading2": "标题 2",
+	"markdown.heading3": "标题 3",
+	"markdown.bulletList": "项目符号列表",
+	"markdown.numberedList": "编号列表",
+	"markdown.taskList": "任务列表",
+	"markdown.quote": "引用",
+	"markdown.codeBlock": "代码块",
+	"markdown.horizontalRule": "水平线",
+	"markdown.insertTable": "插入表格",
+	"markdown.undoShortcut": "撤销 (⌘Z)",
+	"markdown.redoShortcut": "重做 (⌘⇧Z)"
 }
diff --git a/cptr/frontend/src/lib/i18n/locales/zh-TW.json b/cptr/frontend/src/lib/i18n/locales/zh-TW.json
index 0d80b28d..935ca377 100644
--- a/cptr/frontend/src/lib/i18n/locales/zh-TW.json
+++ b/cptr/frontend/src/lib/i18n/locales/zh-TW.json
@@ -84,6 +84,7 @@
 	"search.noRecentChats": "沒有最近對話",
 	"settings.back": "返回",
 	"settings.general": "一般",
+	"settings.appearance": "外觀",
 	"settings.memory": "記憶",
 	"pwa.settingsTitle": "漸進式 Web 應用程式",
 	"intent.chooseWorkspace": "工作區",
@@ -267,6 +268,7 @@
 	"connections.apiKey": "API 金鑰",
 	"connections.baseUrl": "基礎 URL",
 	"connections.prefixId": "前綴 ID",
+	"connections.prefixPlaceholder": "例如 openrouter",
 	"connections.models": "模型（以逗號分隔，可選）",
 	"connections.modelsHint": "留空以從提供商自動探索。",
 	"connections.cancel": "取消",
@@ -294,7 +296,7 @@
 	"directory.hidden": "隱藏檔案",
 	"directory.noSubdirectories": "無子目錄",
 	"directory.goBack": "返回",
-	"directory.typePath": "Type a path... (Tab to complete)",
+	"directory.typePath": "輸入路徑...（按 Tab 補完）",
 	"directory.retry": "重試",
 	"saveDialog.fileNamePlaceholder": "檔案名稱…",
 	"saveDialog.emptyFolder": "空資料夾",
@@ -314,7 +316,7 @@
 	"system.disk": "磁碟",
 	"system.cores": "{{count}} 核心",
 	"system.process": "處理程序",
-	"system.summaryCpu": "cpu {{percent}}%",
+	"system.summaryCpu": "處理器 {{percent}}%",
 	"system.summaryMemory": "記憶體 {{percent}}%",
 	"system.summaryDisk": "磁碟 {{percent}}%",
 	"system.uptime": "運行 {{value}}",
@@ -341,7 +343,7 @@
 	"admin.webPerplexityHint": "在 perplexity.ai 取得你的 API 金鑰",
 	"admin.webPerplexityBaseUrl": "基礎 URL",
 	"admin.webPerplexityBaseUrlHint": "留空使用 api.perplexity.ai。如使用 LiteLLM 或其他相容代理請修改。",
-	"admin.webChatCompletions": "Chat Completions",
+	"admin.webChatCompletions": "聊天補全",
 	"admin.webCcBaseUrl": "基礎 URL",
 	"admin.webCcKey": "API 金鑰",
 	"admin.webCcModel": "模型",
@@ -645,24 +647,24 @@
 	"admin.audio.qualityHintLow": "最小檔案，針對語音最佳化。",
 	"admin.audio.stt": "語音轉文字",
 	"admin.audio.sttHint": "相容 OpenAI 的 audio/transcriptions API。",
-	"admin.audio.tts": "Text-to-Speech",
-	"admin.audio.enableTts": "Enable Text-to-Speech",
-	"admin.audio.ttsEnabledHint": "Enables voice mode and assistant speak buttons when a TTS key is available.",
-	"admin.audio.ttsAutoStream": "Speak streamed responses",
-	"admin.audio.ttsAutoStreamHint": "Read every assistant response aloud as it streams, even outside voice mode.",
-	"admin.audio.ttsKeyPlaceholder": "Leave blank to reuse STT key",
-	"admin.audio.ttsVoice": "Voice",
-	"admin.audio.ttsFormat": "Format",
-	"admin.audio.ttsPlaybackSpeed": "Playback speed",
-	"admin.audio.ttsHint": "Compatible with OpenAI's audio/speech API. If no TTS key is set, the STT key is reused.",
-	"admin.audio.voiceMode": "Voice Mode",
-	"admin.audio.voiceModeSttMode": "Speech recognition",
-	"admin.audio.voiceModeSttBrowser": "Browser",
-	"admin.audio.voiceModeSttProvider": "Configured STT",
-	"admin.audio.voiceModeBrowserSttHint": "Uses browser speech recognition, then stores the audio and transcript locally for the voice data flywheel.",
-	"admin.audio.voiceModeProviderSttHint": "Sends voice-mode audio through the configured STT provider and stores the result locally.",
-	"admin.audio.voiceModeSystemPrompt": "System prompt",
-	"admin.audio.voiceModeSystemPromptHint": "Applied only while voice mode is on. Keep it short to make spoken replies useful.",
+	"admin.audio.tts": "文字轉語音",
+	"admin.audio.enableTts": "啟用文字轉語音",
+	"admin.audio.ttsEnabledHint": "當文字轉語音金鑰可用時，啟用語音模式和助理朗讀按鈕。",
+	"admin.audio.ttsAutoStream": "朗讀串流回應",
+	"admin.audio.ttsAutoStreamHint": "即使不在語音模式下，也會在串流傳輸時朗讀每則助理回應。",
+	"admin.audio.ttsKeyPlaceholder": "留空以重複使用 STT 金鑰",
+	"admin.audio.ttsVoice": "語音",
+	"admin.audio.ttsFormat": "格式",
+	"admin.audio.ttsPlaybackSpeed": "播放速度",
+	"admin.audio.ttsHint": "相容 OpenAI audio/speech API。若未設定文字轉語音金鑰，會重複使用 STT 金鑰。",
+	"admin.audio.voiceMode": "語音模式",
+	"admin.audio.voiceModeSttMode": "語音辨識",
+	"admin.audio.voiceModeSttBrowser": "瀏覽器",
+	"admin.audio.voiceModeSttProvider": "已設定的 STT",
+	"admin.audio.voiceModeBrowserSttHint": "使用瀏覽器語音辨識，然後將音訊和轉錄文字儲存在本機，用於語音資料循環。",
+	"admin.audio.voiceModeProviderSttHint": "將語音模式音訊傳送到已設定的 STT 提供者，並將結果儲存在本機。",
+	"admin.audio.voiceModeSystemPrompt": "系統提示詞",
+	"admin.audio.voiceModeSystemPromptHint": "僅在語音模式開啟時套用。請保持簡短，讓朗讀回覆更實用。",
 	"admin.audio.saveFailed": "儲存音訊設定失敗",
 	"admin.images.title": "圖片",
 	"admin.images.generation": "圖片生成",
@@ -751,14 +753,14 @@
 	"chat.edit.tool": "工具",
 	"chat.edit.item": "項目",
 	"chat.dictate.unsupported": "此瀏覽器不支援語音辨識。",
-	"chat.voiceModeOn": "Voice mode on",
-	"chat.voiceListening": "Listening...",
-	"chat.voiceWaiting": "Waiting for response...",
-	"chat.voiceProviderSttFallback": "Configured STT failed. Used browser transcript.",
-	"chat.voiceProviderSttNoAudio": "Configured STT needs microphone audio, but no voice-mode recording was captured.",
-	"chat.ttsNotConfigured": "Text-to-Speech is not enabled or configured.",
-	"chat.speakResponses": "Speak responses",
-	"chat.stopSpeaking": "Stop speaking",
+	"chat.voiceModeOn": "語音模式已開啟",
+	"chat.voiceListening": "正在聆聽...",
+	"chat.voiceWaiting": "正在等待回應...",
+	"chat.voiceProviderSttFallback": "已設定的 STT 失敗。已使用瀏覽器轉錄。",
+	"chat.voiceProviderSttNoAudio": "已設定的 STT 需要麥克風音訊，但沒有擷取到語音模式錄音。",
+	"chat.ttsNotConfigured": "文字轉語音未啟用或未設定。",
+	"chat.speakResponses": "朗讀回應",
+	"chat.stopSpeaking": "停止朗讀",
 	"chat.fallbackTitle": "聊天",
 	"chat.greeting": "有什麼可以幫您的？",
 	"admin.toolServers": "工具伺服器",
@@ -859,5 +861,138 @@
 	"general.persistentYes": "啟用",
 	"general.persistentNo": "未授予",
 	"general.clearCache": "清除快取",
-	"general.cacheCleared": "快取已清除"
+	"general.cacheCleared": "快取已清除",
+	"general.uiScale": "介面縮放",
+	"general.default": "預設",
+	"general.decreaseUiScale": "縮小介面",
+	"general.increaseUiScale": "放大介面",
+	"appearance.title": "外觀",
+	"appearance.colors": "顏色",
+	"appearance.interface": "介面",
+	"appearance.import": "匯入",
+	"appearance.exportTheme": "匯出",
+	"appearance.reset": "重設",
+	"appearance.background": "背景",
+	"appearance.foreground": "前景",
+	"appearance.uiFont": "介面字體",
+	"appearance.exported": "主題已匯出",
+	"appearance.exportFailed": "主題匯出失敗",
+	"appearance.imported": "主題已匯入",
+	"appearance.importFailed": "主題匯入失敗",
+	"common.add": "新增",
+	"common.forward": "前進",
+	"common.apply": "套用",
+	"common.reject": "拒絕",
+	"connections.provider": "提供者",
+	"connections.apiType": "API 類型",
+	"connections.chatCompletions": "聊天補全",
+	"connections.responses": "回應",
+	"admin.agentsNoProfiles": "沒有代理設定檔",
+	"models.requestParams": "請求參數",
+	"models.paramKey": "鍵",
+	"models.paramValue": "值",
+	"editor.binaryFile": "二進位檔案",
+	"editor.noChanges": "沒有變更",
+	"editor.noUncommittedModifications": "此檔案沒有未提交的修改。",
+	"git.loadChangesFailed": "無法載入 git 變更",
+	"git.unableToLoadChanges": "無法載入變更",
+	"git.collapseAll": "全部收合",
+	"git.expandAll": "全部展開",
+	"git.uncommittedChanges": "未提交",
+	"git.change_one": "{{count}} 項變更",
+	"git.change_other": "{{count}} 項變更",
+	"git.staged": "已暫存",
+	"git.noFileChangesYet": "尚無檔案變更",
+	"git.projectChangesHint": "此專案中的變更會顯示在這裡。",
+	"git.noTextualDiff": "沒有可用的文字差異",
+	"git.branches": "分支",
+	"git.branchActions": "分支操作",
+	"git.noBranchesFound": "找不到分支",
+	"git.searchWorktrees": "搜尋工作樹",
+	"git.worktrees": "工作樹",
+	"git.noWorktreesFound": "找不到工作樹",
+	"git.newWorktree": "新增工作樹",
+	"git.unpushedCommit_one": "{{count}} 個未推送提交",
+	"git.unpushedCommit_other": "{{count}} 個未推送提交",
+	"git.unpushed": "未推送",
+	"git.switchBranches": "切換分支？",
+	"git.createBranchPrompt": "建立分支？",
+	"git.moveChangesPromptPrefix_one": "你在以下分支有 {{count}} 個已變更檔案：",
+	"git.moveChangesPromptPrefix_other": "你在以下分支有 {{count}} 個已變更檔案：",
+	"git.moveChangesPromptMiddle": "請選擇要將這些變更留在這裡，或帶到",
+	"git.leaveChanges": "留下變更",
+	"git.bringChanges": "帶上變更",
+	"git.copyBranchName": "複製分支名稱",
+	"git.uncommitFailed": "無法復原提交",
+	"git.noChangesStashed": "沒有已 stash 的變更",
+	"git.switchBranchFailed": "無法切換分支",
+	"git.createWorktreeFailed": "無法建立工作樹",
+	"git.createBranchFailed": "無法建立分支",
+	"git.renameBranch": "重新命名分支",
+	"git.branchRenamed": "分支已重新命名",
+	"git.renameBranchFailed": "無法重新命名分支",
+	"git.branchNameCopied": "分支名稱已複製",
+	"git.deleteBranchConfirm": "刪除分支「{{name}}」？",
+	"git.branchDeleted": "分支已刪除",
+	"git.deleteBranchFailed": "無法刪除分支",
+	"automations.automation": "自動化",
+	"automations.once": "一次",
+	"automations.hourly": "每小時",
+	"automations.daily": "每天",
+	"automations.weekly": "每週",
+	"automations.monthly": "每月",
+	"automations.custom": "自訂",
+	"automations.time": "時間",
+	"automations.day": "日期",
+	"automations.dayMo": "一",
+	"automations.dayTu": "二",
+	"automations.dayWe": "三",
+	"automations.dayTh": "四",
+	"automations.dayFr": "五",
+	"automations.daySa": "六",
+	"automations.daySu": "日",
+	"chat.noSkillsFound": "找不到技能",
+	"chat.skills": "技能",
+	"chat.commands": "指令",
+	"chat.noOutputItems": "沒有輸出項目",
+	"chat.failedWithCode": "失敗 {{code}}",
+	"chat.finished": "已完成",
+	"chat.terminating": "正在終止",
+	"chat.forceTerminate": "強制終止",
+	"chat.terminate": "終止",
+	"chat.sessionUnavailable": "即時工作階段無法使用。已儲存的輸出仍保留在聊天中。",
+	"chat.sessions": "工作階段",
+	"chat.queuedMessages": "佇列訊息",
+	"preview.pdfLoadError": "無法載入 PDF。",
+	"preview.visual": "視覺化",
+	"preview.source": "原始碼",
+	"preview.diagramError": "圖表錯誤",
+	"preview.diagramRenderError": "無法算繪圖表",
+	"a11y.zoomOut": "縮小",
+	"a11y.resetZoom": "重設縮放",
+	"a11y.zoomIn": "放大",
+	"port.openInNewTab": "在新分頁開啟",
+	"port.notResponding": "localhost:{{port}} 沒有回應",
+	"port.previewTitle": "連接埠 {{port}} 預覽",
+	"terminal.dictateInput": "聽寫終端機輸入",
+	"a11y.page": "第 {{page}} 頁",
+	"markdown.linkTo": "連結到 {{target}}",
+	"markdown.boldShortcut": "粗體 (⌘B)",
+	"markdown.italicShortcut": "斜體 (⌘I)",
+	"markdown.underlineShortcut": "底線 (⌘U)",
+	"markdown.strikethrough": "刪除線",
+	"markdown.inlineCode": "行內程式碼",
+	"markdown.highlight": "醒目提示",
+	"markdown.heading1": "標題 1",
+	"markdown.heading2": "標題 2",
+	"markdown.heading3": "標題 3",
+	"markdown.bulletList": "項目符號清單",
+	"markdown.numberedList": "編號清單",
+	"markdown.taskList": "工作清單",
+	"markdown.quote": "引用",
+	"markdown.codeBlock": "程式碼區塊",
+	"markdown.horizontalRule": "水平線",
+	"markdown.insertTable": "插入表格",
+	"markdown.undoShortcut": "復原 (⌘Z)",
+	"markdown.redoShortcut": "重做 (⌘⇧Z)"
 }
diff --git a/cptr/frontend/src/lib/stores.ts b/cptr/frontend/src/lib/stores.ts
index 3b041047..ec69575b 100644
--- a/cptr/frontend/src/lib/stores.ts
+++ b/cptr/frontend/src/lib/stores.ts
@@ -30,6 +30,15 @@ import { streamingChatTabs } from '$lib/stores/chat';
 import { keybindings, loadKeybindings } from '$lib/stores/keybindings';
 import { defaultPwaPreferences, type PwaPreferences } from '$lib/intents/types';
 import { getPathDisplayName, isSupportedWorkspacePath } from '$lib/utils/paths';
+import {
+	applyAppearance,
+	sanitizeThemeConfig,
+	type AppearancePreferences,
+	type Theme,
+	type ThemeConfig
+} from '$lib/utils/appearance';
+
+export type { AppearancePreferences, Theme, ThemeConfig };
 
 // ── Types ───────────────────────────────────────────────────────
 
@@ -69,7 +78,8 @@ export interface WorkspaceState {
 export type ToolApprovalMode = 'ask' | 'auto' | 'full';
 
 export interface UserPreferences {
-	theme: Theme;
+	theme?: Theme;
+	appearance?: AppearancePreferences;
 	sidebarOpen: boolean;
 	sidebarWidth: number;
 	toolApprovalMode: ToolApprovalMode;
@@ -82,10 +92,9 @@ export interface UserPreferences {
 	requestParams?: Record<string, unknown>; // arbitrary params merged into API request body
 	showUpdateToast?: boolean; // show version update notifications (default true)
 	pwa?: PwaPreferences;
+	textScale?: number | null;
 }
 
-export type Theme = 'dark' | 'light' | 'system';
-
 // ── ID generation ───────────────────────────────────────────────
 
 let _idCounter = Date.now();
@@ -172,6 +181,8 @@ export type StreamingBehavior = 'queue' | 'interrupt';
 export const streamingBehavior = writable<StreamingBehavior>('queue');
 export const selectedModelId = writable<string>('');
 export const pwaPreferences = writable<PwaPreferences>(defaultPwaPreferences);
+export const themeConfig = writable<ThemeConfig | null>(null);
+export const textScale = writable<number | null>(null);
 
 /** Saved workspace path order for sidebar drag-reorder. */
 export const workspaceOrder = writable<string[]>([]);
@@ -297,6 +308,11 @@ function persistPreferences(): void {
 	_savePrefTimer = setTimeout(() => {
 		const prefs: UserPreferences = {
 			theme: get(theme),
+			appearance: {
+				theme: get(theme),
+				themeConfig: sanitizeThemeConfig(get(themeConfig)),
+				textScale: get(textScale) ?? undefined
+			},
 			sidebarOpen: get(sidebarOpen),
 			sidebarWidth: get(sidebarWidth),
 			toolApprovalMode: get(toolApprovalMode),
@@ -308,7 +324,8 @@ function persistPreferences(): void {
 			selectedModelId: get(selectedModelId) || undefined,
 			requestParams: Object.keys(get(requestParams)).length ? get(requestParams) : undefined,
 			showUpdateToast: get(showUpdateToastPref),
-			pwa: get(pwaPreferences)
+			pwa: get(pwaPreferences),
+			textScale: get(textScale) ?? undefined
 		};
 		savePreferences(prefs as unknown as Record<string, unknown>).catch(() => {});
 	}, 300);
@@ -324,6 +341,9 @@ function subscribeForPersistence() {
 	theme.subscribe(() => {
 		if (get(stateLoaded)) persistPreferences();
 	});
+	themeConfig.subscribe(() => {
+		if (get(stateLoaded)) persistPreferences();
+	});
 	sidebarOpen.subscribe(() => {
 		if (get(stateLoaded)) persistPreferences();
 	});
@@ -357,6 +377,9 @@ function subscribeForPersistence() {
 	pwaPreferences.subscribe(() => {
 		if (get(stateLoaded)) persistPreferences();
 	});
+	textScale.subscribe(() => {
+		if (get(stateLoaded)) persistPreferences();
+	});
 	i18next.on('languageChanged', () => {
 		if (get(stateLoaded)) persistPreferences();
 	});
@@ -367,7 +390,11 @@ function subscribeForPersistence() {
 export async function loadPreferences(): Promise<void> {
 	try {
 		const prefs = await getPreferences();
-		if (prefs.theme) theme.set(prefs.theme as Theme);
+		const appearance = (
+			prefs.appearance && typeof prefs.appearance === 'object' ? prefs.appearance : {}
+		) as AppearancePreferences;
+		if (appearance.theme || prefs.theme) theme.set((appearance.theme ?? prefs.theme) as Theme);
+		themeConfig.set(sanitizeThemeConfig(appearance.themeConfig));
 		if (prefs.sidebarOpen !== undefined) sidebarOpen.set(prefs.sidebarOpen as boolean);
 		if (prefs.sidebarWidth !== undefined) sidebarWidth.set(prefs.sidebarWidth as number);
 		// Support new toolApprovalMode and legacy boolean autoApproveTools
@@ -386,6 +413,13 @@ export async function loadPreferences(): Promise<void> {
 		if (prefs.requestParams) requestParams.set(prefs.requestParams as Record<string, unknown>);
 		if (prefs.showUpdateToast !== undefined)
 			showUpdateToastPref.set(prefs.showUpdateToast as boolean);
+		textScale.set(
+			typeof appearance.textScale === 'number'
+				? appearance.textScale
+				: typeof prefs.textScale === 'number'
+					? (prefs.textScale as number)
+					: null
+		);
 		const pwaPrefs = prefs.pwa;
 		if (pwaPrefs)
 			pwaPreferences.set({
@@ -488,25 +522,19 @@ export async function initState(): Promise<void> {
 /** @deprecated Use initState */
 export const loadStateFromServer = initState;
 
-// ── Theme application ───────────────────────────────────────────
+// ── Appearance application ──────────────────────────────────────
 
-function applyTheme(t: Theme) {
-	if (typeof window === 'undefined') return;
-	let resolved = t;
-	if (t === 'system') {
-		resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-	}
-	document.documentElement.classList.toggle('dark', resolved === 'dark');
-	document.documentElement.style.colorScheme = resolved;
-	const meta = document.querySelector('meta[name="theme-color"]');
-	if (meta) meta.setAttribute('content', resolved === 'dark' ? '#0d0d0d' : '#ffffff');
+function applyCurrentAppearance() {
+	applyAppearance(get(theme), get(themeConfig), get(textScale));
 }
 
-theme.subscribe(applyTheme);
+theme.subscribe(applyCurrentAppearance);
+themeConfig.subscribe(applyCurrentAppearance);
+textScale.subscribe(applyCurrentAppearance);
 
 if (typeof window !== 'undefined') {
 	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-		if (get(theme) === 'system') applyTheme('system');
+		if (get(theme) === 'system') applyCurrentAppearance();
 	});
 }
 
@@ -525,6 +553,10 @@ if (typeof BroadcastChannel !== 'undefined') {
 		try {
 			if (type === 'theme' && value) {
 				theme.set(value);
+			} else if (type === 'appearance' && value) {
+				if (value.theme) theme.set(value.theme);
+				themeConfig.set(sanitizeThemeConfig(value.themeConfig));
+				textScale.set(typeof value.textScale === 'number' ? value.textScale : null);
 			} else if (type === 'locale' && value) {
 				changeLocale(value);
 			}
@@ -536,6 +568,28 @@ if (typeof BroadcastChannel !== 'undefined') {
 	theme.subscribe((t) => {
 		if (!_syncingFromBroadcast) {
 			channel.postMessage({ type: 'theme', value: t });
+			channel.postMessage({
+				type: 'appearance',
+				value: { theme: t, themeConfig: get(themeConfig), textScale: get(textScale) }
+			});
+		}
+	});
+
+	themeConfig.subscribe((config) => {
+		if (!_syncingFromBroadcast) {
+			channel.postMessage({
+				type: 'appearance',
+				value: { theme: get(theme), themeConfig: config, textScale: get(textScale) }
+			});
+		}
+	});
+
+	textScale.subscribe((scale) => {
+		if (!_syncingFromBroadcast) {
+			channel.postMessage({
+				type: 'appearance',
+				value: { theme: get(theme), themeConfig: get(themeConfig), textScale: scale }
+			});
 		}
 	});
 
diff --git a/cptr/frontend/src/lib/utils/appearance.ts b/cptr/frontend/src/lib/utils/appearance.ts
new file mode 100644
index 00000000..9e5f0138
--- /dev/null
+++ b/cptr/frontend/src/lib/utils/appearance.ts
@@ -0,0 +1,125 @@
+import { setTextScale } from '$lib/utils/text-scale';
+
+export type Theme = 'dark' | 'light' | 'system';
+
+export type ThemeColors = {
+	background?: string;
+	foreground?: string;
+};
+
+export type ThemeConfig = {
+	light?: ThemeColors;
+	dark?: ThemeColors;
+	uiFont?: string;
+};
+
+export type AppearancePreferences = {
+	theme?: Theme;
+	themeConfig?: ThemeConfig | null;
+	textScale?: number | null;
+};
+
+type ResolvedTheme = 'dark' | 'light';
+
+const DEFAULT_UI_FONT =
+	"'Inter', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif";
+
+export function resolveThemeMode(theme: Theme): ResolvedTheme {
+	if (theme === 'system' && typeof window !== 'undefined') {
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	}
+	return theme === 'light' ? 'light' : 'dark';
+}
+
+export function normalizeHexColor(value: unknown): string | undefined {
+	if (typeof value !== 'string') return undefined;
+	const color = value.trim();
+	const short = /^#([0-9a-f]{3})$/i.exec(color);
+	if (short) {
+		return `#${short[1]
+			.split('')
+			.map((char) => char + char)
+			.join('')}`.toLowerCase();
+	}
+	if (/^#[0-9a-f]{6}$/i.test(color)) return color.toLowerCase();
+	return undefined;
+}
+
+function sanitizeThemeColors(value: unknown): ThemeColors | null {
+	if (!value || typeof value !== 'object') return null;
+	const raw = value as Record<string, unknown>;
+	const next: ThemeColors = {};
+	const background = normalizeHexColor(raw.background);
+	const foreground = normalizeHexColor(raw.foreground);
+	if (background) next.background = background;
+	if (foreground) next.foreground = foreground;
+	return Object.keys(next).length ? next : null;
+}
+
+export function sanitizeThemeConfig(value: unknown): ThemeConfig | null {
+	if (!value || typeof value !== 'object') return null;
+	const raw = value as Record<string, unknown>;
+	const next: ThemeConfig = {};
+	const light = sanitizeThemeColors(raw.light);
+	const dark = sanitizeThemeColors(raw.dark);
+	const legacy = sanitizeThemeColors(raw);
+	if (light) next.light = light;
+	if (dark) next.dark = dark;
+	if (legacy && !light && !dark) {
+		next.light = legacy;
+		next.dark = legacy;
+	}
+	if (typeof raw.uiFont === 'string' && raw.uiFont.trim()) {
+		next.uiFont = raw.uiFont.trim().slice(0, 240);
+	}
+	return Object.keys(next).length ? next : null;
+}
+
+export function defaultThemeConfig(theme: Theme): Required<ThemeColors> & { uiFont: string } {
+	const resolved = resolveThemeMode(theme);
+	return {
+		background: resolved === 'dark' ? '#000000' : '#ffffff',
+		foreground: resolved === 'dark' ? '#d4d4d4' : '#525252',
+		uiFont: DEFAULT_UI_FONT
+	};
+}
+
+export function resolveThemeConfig(
+	theme: Theme,
+	config: ThemeConfig | null
+): Required<ThemeColors> & { uiFont: string } {
+	const resolved = resolveThemeMode(theme);
+	return {
+		...defaultThemeConfig(theme),
+		...(config?.[resolved] ?? {}),
+		uiFont: config?.uiFont ?? DEFAULT_UI_FONT
+	};
+}
+
+function setVar(name: string, value: string) {
+	document.documentElement.style.setProperty(name, value);
+}
+
+export function applyAppearance(
+	theme: Theme,
+	config: ThemeConfig | null,
+	textScale: number | null
+) {
+	if (typeof document === 'undefined') return;
+
+	const resolved = resolveThemeMode(theme);
+	const merged = resolveThemeConfig(theme, config);
+
+	document.documentElement.classList.toggle('dark', resolved === 'dark');
+	document.documentElement.style.colorScheme = resolved;
+
+	setVar('--app-bg', merged.background);
+	setVar('--app-fg', merged.foreground);
+	setVar('--app-ui-font', merged.uiFont);
+	setVar('--font-sans', merged.uiFont);
+
+	setTextScale(textScale ?? 1);
+
+	const meta = document.querySelector('meta[name="theme-color"]');
+	if (meta) meta.setAttribute('content', merged.background);
+}
diff --git a/cptr/frontend/src/lib/utils/text-scale.ts b/cptr/frontend/src/lib/utils/text-scale.ts
new file mode 100644
index 00000000..e783dc14
--- /dev/null
+++ b/cptr/frontend/src/lib/utils/text-scale.ts
@@ -0,0 +1,4 @@
+export const setTextScale = (scale: number) => {
+	if (typeof document === 'undefined') return;
+	document.documentElement.style.setProperty('--app-text-scale', `${scale}`);
+};
diff --git a/cptr/frontend/src/routes/+layout.svelte b/cptr/frontend/src/routes/+layout.svelte
index c1e5b40f..7263f6b9 100644
--- a/cptr/frontend/src/routes/+layout.svelte
+++ b/cptr/frontend/src/routes/+layout.svelte
@@ -90,7 +90,7 @@
 			const keyboardInset = Math.max(0, window.innerHeight - visualBottom);
 			document.documentElement.style.setProperty(
 				'--keyboard-inset-bottom',
-				keyboardInset > 100 ? `${keyboardInset}px` : '0px'
+				keyboardInset > 100 ? `${keyboardInset}px` : '0'
 			);
 		};
 
@@ -421,7 +421,10 @@
 
 {#if authState === 'checking'}
 	<!-- Loading spinner while checking auth -->
-	<div class="flex items-center justify-center h-dvh bg-white dark:bg-black">
+	<div
+		class="app-theme flex items-center justify-center h-dvh bg-white dark:bg-black"
+		style="background: var(--app-bg); color: var(--app-fg);"
+	>
 		<Spinner size={20} />
 	</div>
 {:else if authState === 'needs_setup' || authState === 'needs_login'}
@@ -441,14 +444,15 @@
 	/>
 {:else if $stateLoaded}
 	<div
-		class="h-screen max-h-[100dvh] flex overflow-hidden font-sans antialiased text-gray-900 bg-white dark:text-gray-100 dark:bg-black"
+		class="app-theme h-screen max-h-[100dvh] flex overflow-hidden font-sans antialiased text-gray-900 bg-white dark:text-gray-100 dark:bg-black"
+		style="background: var(--app-bg); color: var(--app-fg);"
 	>
 		<Sidebar />
 
 		<div
 			id="main-col"
 			class="flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden"
-			style="padding-top: env(safe-area-inset-top, 0px); padding-bottom: var(--keyboard-inset-bottom, 0px);"
+			style="padding-top: env(safe-area-inset-top, 0); padding-bottom: var(--keyboard-inset-bottom, 0);"
 		>
 			{#if !$currentWorkspace && $page.url.pathname === '/'}
 				<Bar />
@@ -483,7 +487,10 @@
 		/>
 	{/if}
 {:else}
-	<div class="flex items-center justify-center h-dvh bg-white dark:bg-black">
+	<div
+		class="app-theme flex items-center justify-center h-dvh bg-white dark:bg-black"
+		style="background: var(--app-bg); color: var(--app-fg);"
+	>
 		<Spinner size={20} />
 	</div>
 {/if}
@@ -494,6 +501,6 @@
 	closeButton
 	richColors
 	toastOptions={{
-		style: 'font-size: 12px; font-family: var(--font-sans); border-radius: 8px;'
+		style: 'font-size: 0.75rem; font-family: var(--font-sans); border-radius: 0.5rem;'
 	}}
 />
diff --git a/cptr/frontend/src/routes/+page.svelte b/cptr/frontend/src/routes/+page.svelte
index 2a505df9..12edf3b7 100644
--- a/cptr/frontend/src/routes/+page.svelte
+++ b/cptr/frontend/src/routes/+page.svelte
@@ -715,7 +715,7 @@
 					{#if $appVersion}
 						<button
 							onclick={() => showChangelog.set(true)}
-							class="cursor-pointer font-mono text-[11px] text-gray-400 hover:text-gray-500 hover:underline dark:text-gray-600 dark:hover:text-gray-400"
+							class="cursor-pointer font-mono text-[0.6875rem] text-gray-400 hover:text-gray-500 hover:underline dark:text-gray-600 dark:hover:text-gray-400"
 						>
 							v{$appVersion}
 						</button>
@@ -731,7 +731,7 @@
 			<div class="mb-6">
 				<h2 class="mb-2 text-xs text-gray-400 dark:text-gray-600">{$t('home.start')}</h2>
 				<button
-					class="text-[13px] text-gray-600 transition-colors duration-100 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+					class="text-[0.8125rem] text-gray-600 transition-colors duration-100 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
 					onclick={() => (showPicker = true)}
 				>
 					{$t('home.openWorkspace')}
@@ -747,22 +747,22 @@
 					>
 						<span class="flex min-w-0 items-baseline gap-2">
 							<span
-								class="truncate text-[13px] text-gray-800 group-hover:text-gray-950 dark:text-gray-200 dark:group-hover:text-white"
+								class="truncate text-[0.8125rem] text-gray-800 group-hover:text-gray-950 dark:text-gray-200 dark:group-hover:text-white"
 							>
 								{continuation.name}
 							</span>
-							<span class="truncate font-mono text-[11px] text-gray-400 dark:text-gray-600">
+							<span class="truncate font-mono text-[0.6875rem] text-gray-400 dark:text-gray-600">
 								{shortenPath(continuation.path)}
 							</span>
 						</span>
 						{#if continueSignals.length}
 							<span
-								class="mt-0.5 block truncate font-mono text-[10px] text-gray-400 dark:text-gray-600"
+								class="mt-0.5 block truncate font-mono text-[0.625rem] text-gray-400 dark:text-gray-600"
 							>
 								{continueSignals.join('  ')}
 							</span>
 						{:else if continueResume?.activeLabels.length}
-							<span class="mt-0.5 block truncate text-[11px] text-gray-400 dark:text-gray-600">
+							<span class="mt-0.5 block truncate text-[0.6875rem] text-gray-400 dark:text-gray-600">
 								{continueResume.activeLabels.join(' · ')}
 							</span>
 						{/if}
@@ -783,22 +783,26 @@
 							>
 								<span class="flex min-w-0 items-baseline gap-2">
 									<span
-										class="truncate text-[13px] text-gray-700 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-white"
+										class="truncate text-[0.8125rem] text-gray-700 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-white"
 									>
 										{item.name}
 									</span>
-									<span class="truncate font-mono text-[11px] text-gray-400 dark:text-gray-600">
+									<span
+										class="truncate font-mono text-[0.6875rem] text-gray-400 dark:text-gray-600"
+									>
 										{shortenPath(item.path)}
 									</span>
 								</span>
 								{#if signals.length}
 									<span
-										class="mt-0.5 block truncate font-mono text-[10px] text-gray-400 dark:text-gray-600"
+										class="mt-0.5 block truncate font-mono text-[0.625rem] text-gray-400 dark:text-gray-600"
 									>
 										{signals.join('  ')}
 									</span>
 								{:else if resume?.activeLabels.length}
-									<span class="mt-0.5 block truncate text-[11px] text-gray-400 dark:text-gray-600">
+									<span
+										class="mt-0.5 block truncate text-[0.6875rem] text-gray-400 dark:text-gray-600"
+									>
 										{resume.activeLabels.join(' · ')}
 									</span>
 								{/if}
@@ -810,7 +814,7 @@
 				<div class="mb-6">
 					<h2 class="mb-2 text-xs text-gray-400 dark:text-gray-600">{$t('home.recent')}</h2>
 					<button
-						class="text-[13px] text-gray-500 transition-colors duration-100 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
+						class="text-[0.8125rem] text-gray-500 transition-colors duration-100 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
 						onclick={() => (showPicker = true)}
 					>
 						{$t('home.noWorkspaces')}
@@ -824,7 +828,7 @@
 					<div class="flex flex-col">
 						{#each nearby as item}
 							<button
-								class="flex min-w-0 items-center gap-2 py-1.5 text-left text-[13px] text-gray-600 transition-colors duration-100 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+								class="flex min-w-0 items-center gap-2 py-1.5 text-left text-[0.8125rem] text-gray-600 transition-colors duration-100 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
 								onclick={() => quickOpen(item.path)}
 							>
 								<Icon
@@ -834,7 +838,7 @@
 									class="shrink-0 text-gray-400 dark:text-gray-600"
 								/>
 								<span class="truncate">{item.name}</span>
-								<span class="truncate font-mono text-[11px] text-gray-400 dark:text-gray-600">
+								<span class="truncate font-mono text-[0.6875rem] text-gray-400 dark:text-gray-600">
 									{shortenPath(item.path)}
 								</span>
 							</button>
@@ -978,6 +982,8 @@
 		height: 100%;
 		position: relative;
 		overflow: hidden;
+		background: var(--app-bg);
+		color: var(--app-fg);
 	}
 
 	.split-horizontal {
@@ -1010,6 +1016,8 @@
 		min-width: 0;
 		overflow: hidden;
 		position: relative;
+		background: var(--app-bg);
+		color: var(--app-fg);
 	}
 
 	/* ── Divider ─────────────────────────────────────────────── */
@@ -1024,12 +1032,12 @@
 	}
 
 	.split-divider-h {
-		width: 6px;
+		width: 0.375rem;
 		cursor: col-resize;
 	}
 
 	.split-divider-v {
-		height: 6px;
+		height: 0.375rem;
 		cursor: row-resize;
 	}
 
@@ -1090,22 +1098,22 @@
 		position: absolute;
 		z-index: 15;
 		background: oklch(0.65 0.15 250 / 0.08);
-		border: 2px dashed oklch(0.65 0.15 250 / 0.3);
-		border-radius: 8px;
+		border: 0.125rem dashed oklch(0.65 0.15 250 / 0.3);
+		border-radius: 0.5rem;
 		pointer-events: none;
 	}
 
 	.split-drop-right {
-		top: 8px;
-		right: 8px;
-		bottom: 8px;
+		top: 0.5rem;
+		right: 0.5rem;
+		bottom: 0.5rem;
 		width: 45%;
 	}
 
 	.split-drop-bottom {
-		left: 8px;
-		right: 8px;
-		bottom: 8px;
+		left: 0.5rem;
+		right: 0.5rem;
+		bottom: 0.5rem;
 		height: 45%;
 	}
 
diff --git a/cptr/frontend/src/routes/automations/+page.svelte b/cptr/frontend/src/routes/automations/+page.svelte
index eecf2182..6790d014 100644
--- a/cptr/frontend/src/routes/automations/+page.svelte
+++ b/cptr/frontend/src/routes/automations/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import AutomationsPanel from '$lib/components/automations/AutomationsPanel.svelte';
+	import { t } from '$lib/i18n';
 </script>
 
 <svelte:head>
-	<title>Automations / Computer</title>
+	<title>{$t('automations.title')} / Computer</title>
 </svelte:head>
 
 <AutomationsPanel />
diff --git a/cptr/frontend/src/routes/automations/[id]/+page.svelte b/cptr/frontend/src/routes/automations/[id]/+page.svelte
index 6e85745d..47414b09 100644
--- a/cptr/frontend/src/routes/automations/[id]/+page.svelte
+++ b/cptr/frontend/src/routes/automations/[id]/+page.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import AutomationsPanel from '$lib/components/automations/AutomationsPanel.svelte';
+	import { t } from '$lib/i18n';
 
 	const automationId = $derived($page.params.id);
 </script>
 
 <svelte:head>
-	<title>Automation / Computer</title>
+	<title>{$t('automations.automation')} / Computer</title>
 </svelte:head>
 
 <AutomationsPanel {automationId} />
diff --git a/cptr/routers/git.py b/cptr/routers/git.py
index 79c7c3e8..3bd54f3b 100644
--- a/cptr/routers/git.py
+++ b/cptr/routers/git.py
@@ -17,6 +17,7 @@
     checkout,
     commit,
     create_branch,
+    create_worktree,
     delete_branch,
     diff,
     discard,
@@ -34,6 +35,7 @@
     status,
     uncommit,
     unstage,
+    worktrees,
 )
 
 router = APIRouter(prefix="/api/git", tags=["git"])
@@ -107,6 +109,16 @@ async def git_branches(root: str):
         _handle_git_error(e)
 
 
+@router.get("/worktrees")
+async def git_worktrees(root: str):
+    """List git worktrees for the active repository."""
+    await _require_repo(root)
+    try:
+        return await worktrees(root)
+    except GitError as e:
+        _handle_git_error(e)
+
+
 @router.get("/stashes")
 async def git_stashes(root: str):
     """List stashes."""
@@ -141,6 +153,12 @@ class CreateBranchRequest(BaseModel):
     from_ref: Optional[str] = None
 
 
+class CreateWorktreeRequest(BaseModel):
+    root: str
+    branch: str
+    path: Optional[str] = None
+
+
 class DeleteBranchRequest(BaseModel):
     root: str
     name: str
@@ -242,6 +260,15 @@ async def git_delete_branch(body: DeleteBranchRequest):
         _handle_git_error(e)
 
 
+@router.post("/worktrees")
+async def git_create_worktree(body: CreateWorktreeRequest):
+    """Create a new branch-backed worktree."""
+    try:
+        return await create_worktree(body.root, body.branch, body.path)
+    except GitError as e:
+        _handle_git_error(e)
+
+
 @router.patch("/branch")
 async def git_rename_branch(body: RenameBranchRequest):
     """Rename a local branch."""
diff --git a/cptr/routers/terminal.py b/cptr/routers/terminal.py
index adfd4b81..dc3c8b1f 100644
--- a/cptr/routers/terminal.py
+++ b/cptr/routers/terminal.py
@@ -4,14 +4,13 @@
 
 import asyncio
 import logging
-import os
 from typing import List, Optional
 
 from fastapi import APIRouter, HTTPException, WebSocket, WebSocketDisconnect
 from pydantic import BaseModel
 
-from cptr.utils.config import check_access, get_auth_mode, get_user_uid_gid, AuthMode
-from cptr.utils.terminal import manager, IS_WINDOWS
+from cptr.utils.config import check_access
+from cptr.utils.terminal import TerminalUnavailable, manager, IS_WINDOWS
 from cptr.utils.tools import (
     command_session_bytes_since,
     drain_command_session_input,
@@ -58,7 +57,10 @@ class CommandSessionInfo(BaseModel):
 async def create_session(req: CreateSessionRequest):
     """Create a new terminal session."""
     logger.info(f"Creating terminal session: cwd={req.cwd}, rows={req.rows}, cols={req.cols}")
-    session = manager.create(rows=req.rows, cols=req.cols, cwd=req.cwd)
+    try:
+        session = manager.create(rows=req.rows, cols=req.cols, cwd=req.cwd)
+    except TerminalUnavailable as exc:
+        raise HTTPException(status_code=503, detail=str(exc)) from exc
     logger.info(
         f"Created session {session.session_id} at {session.cwd}, fd={session._fd}, alive={session.is_alive()}"
     )
@@ -247,17 +249,18 @@ async def read_pty():
         try:
             if IS_WINDOWS:
                 # Windows ProactorEventLoop doesn't support add_reader;
-                # fall back to minimal-sleep polling.
+                # pywinpty read() blocks, so run it outside the event loop.
                 while True:
                     if not session.is_alive():
                         logger.info(f"Session {session_id} died, stopping read")
                         break
                     try:
-                        data = session.read(16384)
+                        data = await asyncio.to_thread(session.read, 16384)
                         if data:
                             await websocket.send_bytes(data)
-                        else:
-                            await asyncio.sleep(0.005)
+                    except EOFError:
+                        logger.info(f"Session {session_id} reached EOF")
+                        break
                     except (OSError, IOError) as e:
                         logger.error(f"PTY read error for {session_id}: {e}")
                         break
diff --git a/cptr/socket/__init__.py b/cptr/socket/__init__.py
deleted file mode 100644
index 578c6fea..00000000
--- a/cptr/socket/__init__.py
+++ /dev/null
@@ -1 +0,0 @@
-"""Socket.IO server package."""
diff --git a/cptr/utils/git.py b/cptr/utils/git.py
index d50ad683..9fad2114 100644
--- a/cptr/utils/git.py
+++ b/cptr/utils/git.py
@@ -138,9 +138,7 @@ def add_file(
         upstream = ""
 
     # Get remote URL for "View on GitHub/GitLab" link
-    code, remote_out, _ = await _run(
-        "remote", "get-url", "origin", cwd=root, check=False
-    )
+    code, remote_out, _ = await _run("remote", "get-url", "origin", cwd=root, check=False)
     remote_url = remote_out.strip() if code == 0 else ""
 
     return {
@@ -271,9 +269,9 @@ async def discard(root: str, files: list[str]) -> None:
         check=False,
     )
 
-    to_unstage: list[str] = []   # staged changes that need unstaging first
+    to_unstage: list[str] = []  # staged changes that need unstaging first
     to_checkout: list[str] = []  # working-tree changes to restore from HEAD
-    to_delete: list[str] = []    # untracked / newly-added files to remove
+    to_delete: list[str] = []  # untracked / newly-added files to remove
 
     for line in st_out.splitlines():
         if line.startswith("? "):
@@ -463,6 +461,88 @@ async def branches(root: str) -> dict[str, Any]:
     return {"current": current, "local": local, "remote": remote, "all": all_branches}
 
 
+def _same_path(a: str, b: str) -> bool:
+    return os.path.normcase(os.path.abspath(a)) == os.path.normcase(os.path.abspath(b))
+
+
+def _parse_worktree_list(raw: str, current_root: str = "") -> list[dict[str, Any]]:
+    """Parse `git worktree list --porcelain` output."""
+    worktrees: list[dict[str, Any]] = []
+    current: dict[str, Any] = {}
+
+    def flush() -> None:
+        if not current.get("path"):
+            return
+        item = {
+            "path": current["path"],
+            "branch": current.get("branch", ""),
+            "head": current.get("head", ""),
+            "is_current": bool(current_root and _same_path(current["path"], current_root)),
+            "is_detached": bool(current.get("is_detached")),
+            "is_bare": bool(current.get("is_bare")),
+        }
+        if not item["branch"]:
+            item["is_detached"] = True
+        worktrees.append(item)
+
+    for line in raw.splitlines():
+        if not line:
+            flush()
+            current = {}
+            continue
+        if line.startswith("worktree "):
+            current["path"] = line.removeprefix("worktree ")
+        elif line.startswith("HEAD "):
+            current["head"] = line.removeprefix("HEAD ")
+        elif line.startswith("branch "):
+            branch = line.removeprefix("branch ")
+            current["branch"] = branch.removeprefix("refs/heads/")
+        elif line == "detached":
+            current["is_detached"] = True
+        elif line == "bare":
+            current["is_bare"] = True
+
+    flush()
+    return worktrees
+
+
+async def worktrees(root: str) -> dict[str, Any]:
+    """List worktrees for the current repository."""
+    _, repo_root_out, _ = await _run("rev-parse", "--show-toplevel", cwd=root)
+    repo_root = repo_root_out.strip() or root
+    _, out, _ = await _run("worktree", "list", "--porcelain", cwd=root)
+    items = _parse_worktree_list(out, repo_root)
+
+    relpath = os.path.relpath(os.path.abspath(root), os.path.abspath(repo_root))
+    for item in items:
+        target_path = item["path"]
+        if relpath != "." and not relpath.startswith(".."):
+            candidate = os.path.join(item["path"], relpath)
+            if os.path.isdir(candidate):
+                target_path = candidate
+        item["target_path"] = target_path
+
+    return {"repo_root": repo_root, "current": repo_root, "worktrees": items}
+
+
+def _worktree_path_for_branch(repo_root: str, branch: str) -> str:
+    safe = "".join(c if c.isalnum() or c in "._-" else "-" for c in branch.strip()).strip(".-")
+    return os.path.join(os.path.dirname(repo_root), safe or "worktree")
+
+
+async def create_worktree(
+    root: str,
+    branch: str,
+    path: str | None = None,
+) -> dict[str, str]:
+    """Create a new branch-backed worktree beside the current repository."""
+    _, repo_root_out, _ = await _run("rev-parse", "--show-toplevel", cwd=root)
+    repo_root = repo_root_out.strip() or root
+    target_path = path or _worktree_path_for_branch(repo_root, branch)
+    await _run("worktree", "add", "-b", branch, target_path, cwd=root)
+    return {"path": target_path}
+
+
 async def checkout(root: str, branch: str) -> None:
     """Switch branch."""
     await _run("checkout", branch, cwd=root)
@@ -526,9 +606,7 @@ async def uncommit(root: str) -> dict[str, str]:
     commits (no parent).
     """
     # Grab info about the commit we're about to undo
-    _, log_out, _ = await _run(
-        "log", "-1", "--format=%H%x00%h%x00%s", cwd=root, check=False
-    )
+    _, log_out, _ = await _run("log", "-1", "--format=%H%x00%h%x00%s", cwd=root, check=False)
     parts = log_out.strip().split("\x00")
     undone_hash = parts[1] if len(parts) >= 2 else ""
     undone_msg = parts[2] if len(parts) >= 3 else ""
diff --git a/cptr/utils/terminal.py b/cptr/utils/terminal.py
index 623d7c89..a36a97f5 100644
--- a/cptr/utils/terminal.py
+++ b/cptr/utils/terminal.py
@@ -18,6 +18,10 @@
 IS_WINDOWS = platform.system() == "Windows"
 
 
+class TerminalUnavailable(RuntimeError):
+    """Raised when the platform terminal backend cannot be loaded."""
+
+
 @dataclass
 class TerminalSession:
     """Platform-agnostic terminal session with scrollback buffer."""
@@ -35,6 +39,7 @@ class TerminalSession:
 
     def write(self, data: bytes) -> None:
         if IS_WINDOWS:
+            data = data.decode("utf-8", errors="replace")
             self._process.write(data)  # type: ignore
         else:
             os.write(self._fd, data)
@@ -43,6 +48,8 @@ def read(self, size: int = 4096) -> bytes:
         try:
             if IS_WINDOWS:
                 data = self._process.read(size)  # type: ignore
+                if isinstance(data, str):
+                    data = data.encode("utf-8", errors="replace")
             else:
                 data = os.read(self._fd, size)
         except (BlockingIOError, OSError):
@@ -191,7 +198,14 @@ def _create_windows(
     session_id: str, shell: str, work_dir: str, env: dict, rows: int, cols: int
 ) -> TerminalSession:
     """Create a terminal session on Windows using pywinpty."""
-    from winpty import PtyProcess  # type: ignore
+    try:
+        from winpty import PtyProcess  # type: ignore
+    except (ImportError, OSError) as exc:
+        raise TerminalUnavailable(
+            "Windows terminal support requires pywinpty and the Microsoft Visual C++ "
+            "Redistributable. Install the latest supported Visual C++ Redistributable "
+            "from Microsoft, then restart cptr."
+        ) from exc
 
     proc = PtyProcess.spawn(
         [shell],
diff --git a/pyproject.toml b/pyproject.toml
index b261fb34..f65d930c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "cptr"
-version = "0.7.4"
+version = "0.7.5"
 description = "Your computer, from anywhere. Code, manage, and control your machine from the web."
 license = {file = "LICENSE"}
 readme = "README.md"
diff --git a/uv.lock b/uv.lock
index 9f74db66..194dface 100644
--- a/uv.lock
+++ b/uv.lock
@@ -284,7 +284,7 @@ wheels = [
 
 [[package]]
 name = "cptr"
-version = "0.7.4"
+version = "0.7.5"
 source = { editable = "." }
 dependencies = [
     { name = "aiosqlite" },