diff --git a/tools/ui/src/lib/components/app/dialogs/DialogSettingsChat.svelte b/tools/ui/src/lib/components/app/dialogs/DialogSettingsChat.svelte
new file mode 100644
index 0000000000..268a00442f
--- /dev/null
+++ b/tools/ui/src/lib/components/app/dialogs/DialogSettingsChat.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Settings } from '@lucide/svelte';
+	import { SettingsChat } from '$lib/components/app/settings';
+	import * as Dialog from '$lib/components/ui/dialog';
+
+	interface Props {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		initialSection?: string;
+	}
+
+	let { initialSection, onOpenChange, open = $bindable(false) }: Props = $props();
+
+	function handleOpenChange(value: boolean) {
+		open = value;
+		onOpenChange?.(value);
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Content
+		class="md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-6xl! flex flex-col p-0 md:p-6 gap-0"
+	>
+		<Dialog.Header class="md:p-0 p-4">
+			<Dialog.Title class="flex items-center gap-2">
+				<Settings class="h-5 w-5" />
+
+				<span>Settings</span>
+			</Dialog.Title>
+		</Dialog.Header>
+
+		<SettingsChat {initialSection} onSectionChange={() => {}} onClose={() => (open = false)} />
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/tools/ui/src/lib/components/app/dialogs/index.ts b/tools/ui/src/lib/components/app/dialogs/index.ts
index 39ed5fbbb0..1ffa7a2b9e 100644
--- a/tools/ui/src/lib/components/app/dialogs/index.ts
+++ b/tools/ui/src/lib/components/app/dialogs/index.ts
@@ -26,6 +26,15 @@ export { default as DialogMcpServerAddNew } from './DialogMcpServerAddNew.svelte
  */
 export { default as DialogMcpServers } from './DialogMcpServers.svelte';
 
+/**
+ * **DialogSettingsChat** - Chat settings shown in a modal dialog
+ *
+ * Wraps the full SettingsChat layout (sidebar, mobile header, fields, footer)
+ * inside a ShadCN Dialog instead of a dedicated route. Section switching is
+ * handled in-app via `onSectionChange` rather than URL navigation.
+ */
+export { default as DialogSettingsChat } from './DialogSettingsChat.svelte';
+
 /**
  * **DialogExportSettings** - Settings export dialog with sensitive data warning
  *