From 539f24529bdf99e0baefd54fefff1660034bfe7b Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Wed, 26 Aug 2026 21:07:24 +0200
Subject: [PATCH] ui: Move Settings and MCP Servers routes to dialog-based
 views (#27744)

* ui : open MCP servers in a dialog from the chat form

Replace the MCP servers submenu with a single "MCP Servers" item that opens
a new DialogMcpServers dialog instead of navigating to the /mcp-servers route.

Assisted-by: pi

* ui : browse MCP resources from the server card

Make the Resources capability badge clickable so it opens the MCP resources
browser dialog, and drop the page-only chrome from SettingsMcpServers.

Assisted-by: pi

* ui : remove mcp-servers route and sidebar entry

MCP servers are now managed in a dialog, so drop the dedicated route and the
sidebar icon that navigated to it.

Assisted-by: pi

* ui : remove unused MCP servers submenu component

The submenu was replaced by the MCP servers dialog, so delete the component
and its export.

Assisted-by: pi

* feat(ui): add DialogSettingsChat dialog

* refactor(ui): switch SettingsChat to in-app section navigation

* feat(ui): open settings as dialog from sidebar

* refactor(ui): remove settings route and URL-based settings navigation

* fix(ui): adjust MCP dialogs for new base sizing

* chore: Formatting & linting
---
 .../app/chat/ChatForm/ChatForm.svelte         |   9 +-
 .../ChatFormActionAddDropdown.svelte          |  48 ++----
 .../ChatFormActionAddMcpServersSubmenu.svelte | 152 ------------------
 .../ChatFormActionAddMcpSubmenu.svelte        |  51 ++++++
 .../ChatFormActions/ChatFormActions.svelte    |   7 +-
 tools/ui/src/lib/components/app/chat/index.ts |  18 +--
 .../dialogs/DialogMcpResourcesBrowser.svelte  |   2 +-
 .../app/dialogs/DialogMcpServerAddNew.svelte  |   2 +-
 .../app/dialogs/DialogMcpServers.svelte       |  33 ++++
 .../app/dialogs/DialogSettingsChat.svelte     |  34 ++++
 .../src/lib/components/app/dialogs/index.ts   |  17 ++
 .../app/mcp/McpCapabilitiesBadges.svelte      |  29 +++-
 .../mcp/McpServerCard/McpServerCard.svelte    |  18 ++-
 .../McpServerCard/McpServerCardHeader.svelte  |   4 +-
 .../SidebarNavigation.svelte                  |   7 +-
 .../SidebarNavigationActions.svelte           |  38 +++--
 .../settings/SettingsChat/SettingsChat.svelte |  48 +++---
 .../SettingsChatDesktopSidebar.svelte         |  49 ++----
 .../settings/SettingsChatMobileHeader.svelte  |  63 +++-----
 .../app/settings/SettingsFooter.svelte        |   2 +-
 .../app/settings/SettingsMcpServers.svelte    |  57 ++-----
 .../src/lib/components/app/settings/index.ts  |   6 +-
 .../ui/src/lib/constants/routes.constants.ts  |   4 -
 tools/ui/src/lib/constants/ui.constants.ts    |  11 +-
 tools/ui/src/lib/enums/ui.enums.ts            |   3 +-
 .../hooks/use-settings-navigation.svelte.ts   |  45 ------
 tools/ui/src/lib/services/index.ts            |   1 -
 tools/ui/src/lib/services/router.service.ts   |   7 +-
 tools/ui/src/lib/stores/index.ts              |   2 -
 .../lib/stores/settings/referrer.svelte.ts    |  19 ---
 tools/ui/src/routes/mcp-servers/+page.svelte  |   5 -
 tools/ui/src/routes/settings/+layout.svelte   |  38 -----
 .../routes/settings/[[section]]/+page.svelte  |  15 --
 33 files changed, 305 insertions(+), 539 deletions(-)
 delete mode 100644 tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte
 create mode 100644 tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpSubmenu.svelte
 create mode 100644 tools/ui/src/lib/components/app/dialogs/DialogMcpServers.svelte
 create mode 100644 tools/ui/src/lib/components/app/dialogs/DialogSettingsChat.svelte
 delete mode 100644 tools/ui/src/lib/hooks/use-settings-navigation.svelte.ts
 delete mode 100644 tools/ui/src/lib/stores/settings/referrer.svelte.ts
 delete mode 100644 tools/ui/src/routes/mcp-servers/+page.svelte
 delete mode 100644 tools/ui/src/routes/settings/+layout.svelte
 delete mode 100644 tools/ui/src/routes/settings/[[section]]/+page.svelte

diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
index 9152935f07..40819d6f1a 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
@@ -8,7 +8,8 @@
 		ChatFormInputFileInputInvisible,
 		ChatFormMcpResourcesList,
 		ChatFormPickers,
-		DialogMcpResourcesBrowser
+		DialogMcpResourcesBrowser,
+		DialogMcpServers
 	} from '$lib/components/app';
 	import {
 		CLIPBOARD_CONTENT_QUOTE_PREFIX,
@@ -183,6 +184,9 @@
 	let isResourceDialogOpen = $state(false);
 	let preSelectedResourceUri = $state<string | undefined>(undefined);
 
+	// MCP Servers Dialog State
+	let isMcpServersDialogOpen = $state(false);
+
 	let currentConfig = $derived(settingsStore.config);
 
 	let pasteLongTextToFileLength = $derived.by(() => {
@@ -618,6 +622,7 @@
 				onFileUpload={handleFileUpload}
 				onMcpPromptClick={showMcpPromptButton ? () => pickers.openPromptPicker() : undefined}
 				onMcpResourcesClick={() => (isResourceDialogOpen = true)}
+				onMcpSettingsClick={() => (isMcpServersDialogOpen = true)}
 				onMicClick={handleMicClick}
 				{onStop}
 				onSystemPromptClick={() => onSystemPromptClick?.({ files: uploadedFiles, message: value })}
@@ -656,3 +661,5 @@
 	}}
 	preSelectedUri={preSelectedResourceUri}
 />
+
+<DialogMcpServers bind:open={isMcpServersDialogOpen} />
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
index 02bfadb7e4..5ff3c6a908 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
-	import { File, FolderOpen, MessageSquare, Plus, Zap } from '@lucide/svelte';
-	import {
-		ChatFormActionAddMcpServersSubmenu,
-		ChatFormActionAddReasoningSubmenu,
-		ChatFormActionAddToolsSubmenu
-	} from '$lib/components/app';
+	import { File, MessageSquare, Plus } from '@lucide/svelte';
+	import { ChatFormActionAddToolsSubmenu, McpLogo } from '$lib/components/app';
 	import { buttonVariants } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
@@ -31,11 +27,6 @@
 	// must not restore focus to the trigger on close
 	let suppressCloseAutoFocus = false;
 
-	function handleMcpSettingsClick() {
-		dropdownOpen = false;
-		chatFormActions.onMcpSettingsClick?.();
-	}
-
 	const attachmentMenu = useAttachmentMenu(
 		() => ({
 			hasAudioModality: chatFormActions.hasAudioModality,
@@ -93,10 +84,6 @@
 				}
 			}}
 		>
-			<ChatFormActionAddReasoningSubmenu />
-
-			<DropdownMenu.Separator />
-
 			<DropdownMenu.Sub>
 				<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
 					<File class={ICON_CLASS_DEFAULT} />
@@ -156,31 +143,14 @@
 
 			<ChatFormActionAddToolsSubmenu />
 
-			<ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
+			<DropdownMenu.Item
+				class="flex cursor-pointer items-center gap-2"
+				onclick={chatFormActions.onMcpSettingsClick}
+			>
+				<McpLogo class={ICON_CLASS_DEFAULT} />
 
-			{#if chatFormActions.hasMcpPromptsSupport}
-				<DropdownMenu.Separator />
-
-				<DropdownMenu.Item
-					class="flex cursor-pointer items-center gap-2"
-					onclick={chatFormActions.onMcpPromptClick}
-				>
-					<Zap class={ICON_CLASS_DEFAULT} />
-
-					<span>MCP Prompt</span>
-				</DropdownMenu.Item>
-			{/if}
-
-			{#if chatFormActions.hasMcpResourcesSupport}
-				<DropdownMenu.Item
-					class="flex cursor-pointer items-center gap-2"
-					onclick={chatFormActions.onMcpResourcesClick}
-				>
-					<FolderOpen class={ICON_CLASS_DEFAULT} />
-
-					<span>MCP Resources</span>
-				</DropdownMenu.Item>
-			{/if}
+				<span>MCP Servers</span>
+			</DropdownMenu.Item>
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>
 </div>
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte
deleted file mode 100644
index bceb43d2ab..0000000000
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte
+++ /dev/null
@@ -1,152 +0,0 @@
-<script lang="ts">
-	import { Plus, Settings } from '@lucide/svelte';
-	import { goto } from '$app/navigation';
-	import { DropdownMenuSearchable, McpLogo, McpServerIdentity } from '$lib/components/app';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { Switch } from '$lib/components/ui/switch';
-	import { ICON_CLASS_DEFAULT, ROUTES } from '$lib/constants';
-	import { HealthCheckStatus } from '$lib/enums';
-	import { conversationsStore, mcpStore } from '$lib/stores';
-	import type { MCPServerSettingsEntry } from '$lib/types';
-
-	interface Props {
-		onMcpSettingsClick?: () => void;
-	}
-
-	let { onMcpSettingsClick }: Props = $props();
-
-	let mcpSearchQuery = $state('');
-	// Every configured server is listed; `enabled` is an on/off state,
-	// not a visibility filter, so a disabled server stays toggleable.
-	let mcpServers = $derived(mcpStore.getServers());
-	let hasMcpServers = $derived(mcpServers.length > 0);
-	let filteredMcpServers = $derived.by(() => {
-		const query = mcpSearchQuery.toLowerCase().trim();
-
-		if (!query) return mcpServers;
-
-		return mcpServers.filter((s) => {
-			const name = getServerLabel(s).toLowerCase();
-			const url = s.url.toLowerCase();
-
-			return name.includes(query) || url.includes(query);
-		});
-	});
-
-	function getServerLabel(server: MCPServerSettingsEntry): string {
-		return mcpStore.getServerLabel(server);
-	}
-
-	function isServerEnabledForChat(serverId: string): boolean {
-		return conversationsStore.preferences.isMcpServerEnabledForChat(serverId);
-	}
-
-	async function toggleServerForChat(serverId: string) {
-		await conversationsStore.preferences.toggleMcpServerForChat(serverId);
-	}
-
-	function handleMcpSubMenuOpen(open: boolean) {
-		if (open) {
-			mcpSearchQuery = '';
-			mcpStore.runHealthChecksForServers(mcpServers);
-		}
-	}
-
-	function handleMcpSettingsClick() {
-		onMcpSettingsClick?.();
-
-		goto(`${hasMcpServers ? '' : '?add'}${ROUTES.MCP_SERVERS}`);
-	}
-</script>
-
-<DropdownMenu.Root>
-	<DropdownMenu.Sub onOpenChange={handleMcpSubMenuOpen}>
-		<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
-			<McpLogo class={ICON_CLASS_DEFAULT} />
-
-			<span>MCP Servers</span>
-		</DropdownMenu.SubTrigger>
-
-		<DropdownMenu.SubContent class="w-72 pt-0">
-			{#if hasMcpServers}
-				<DropdownMenuSearchable
-					bind:searchValue={mcpSearchQuery}
-					emptyMessage="No servers found"
-					isEmpty={filteredMcpServers.length === 0}
-					placeholder="Search servers..."
-				>
-					<div class="max-h-64 overflow-y-auto">
-						{#each filteredMcpServers as server (server.id)}
-							{@const healthState = mcpStore.getHealthCheckState(server.id)}
-							{@const hasError = healthState.status === HealthCheckStatus.ERROR}
-							{@const isEnabledForChat = isServerEnabledForChat(server.id)}
-							{@const displayName = getServerLabel(server)}
-							{@const faviconUrl = mcpStore.getServerFavicon(server.id)}
-
-							<button
-								class="flex w-full items-center justify-between gap-2 rounded-sm px-2 py-2 text-left transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
-								disabled={hasError}
-								onclick={() => !hasError && toggleServerForChat(server.id)}
-								type="button"
-							>
-								<div class="flex min-w-0 flex-1 items-center gap-2">
-									<div class="min-w-0 flex-1">
-										<McpServerIdentity
-											{displayName}
-											{faviconUrl}
-											iconClass={ICON_CLASS_DEFAULT}
-											iconRounded="rounded-sm"
-											nameClass="text-sm"
-											showVersion={false}
-										/>
-									</div>
-
-									{#if hasError}
-										<span
-											class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
-										>
-											Error
-										</span>
-									{/if}
-								</div>
-
-								<Switch
-									checked={isEnabledForChat}
-									disabled={hasError}
-									onCheckedChange={() => toggleServerForChat(server.id)}
-									onclick={(e) => e.stopPropagation()}
-								/>
-							</button>
-						{/each}
-					</div>
-
-					{#snippet footer()}
-						<DropdownMenu.Item
-							class="flex cursor-pointer items-center gap-2"
-							onclick={handleMcpSettingsClick}
-						>
-							<Settings class={ICON_CLASS_DEFAULT} />
-
-							<span>Manage MCP Servers</span>
-						</DropdownMenu.Item>
-					{/snippet}
-				</DropdownMenuSearchable>
-			{:else}
-				<div class="px-2 py-3 text-center text-sm text-muted-foreground">
-					No MCP servers configured
-				</div>
-
-				<DropdownMenu.Separator />
-
-				<DropdownMenu.Item
-					class="flex cursor-pointer items-center gap-2"
-					onclick={handleMcpSettingsClick}
-				>
-					<Plus class={ICON_CLASS_DEFAULT} />
-
-					<span>Add MCP Servers</span>
-				</DropdownMenu.Item>
-			{/if}
-		</DropdownMenu.SubContent>
-	</DropdownMenu.Sub>
-</DropdownMenu.Root>
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpSubmenu.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpSubmenu.svelte
new file mode 100644
index 0000000000..07439afd61
--- /dev/null
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpSubmenu.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { FolderOpen, Server, Zap } from '@lucide/svelte';
+	import { McpLogo } from '$lib/components/app';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { ICON_CLASS_DEFAULT } from '$lib/constants';
+	import { getChatFormActionsContext } from '$lib/contexts';
+
+	const chatFormActions = getChatFormActionsContext();
+
+	function handleServersClick() {
+		chatFormActions.onMcpSettingsClick?.();
+	}
+</script>
+
+<DropdownMenu.Sub>
+	<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+		<McpLogo class={ICON_CLASS_DEFAULT} />
+
+		<span>MCP</span>
+	</DropdownMenu.SubTrigger>
+
+	<DropdownMenu.SubContent class="w-48">
+		<DropdownMenu.Item class="flex cursor-pointer items-center gap-2" onclick={handleServersClick}>
+			<Server class={ICON_CLASS_DEFAULT} />
+
+			<span>Servers</span>
+		</DropdownMenu.Item>
+
+		{#if chatFormActions.hasMcpPromptsSupport}
+			<DropdownMenu.Item
+				class="flex cursor-pointer items-center gap-2"
+				onclick={chatFormActions.onMcpPromptClick}
+			>
+				<Zap class={ICON_CLASS_DEFAULT} />
+
+				<span>Prompts</span>
+			</DropdownMenu.Item>
+		{/if}
+
+		{#if chatFormActions.hasMcpResourcesSupport}
+			<DropdownMenu.Item
+				class="flex cursor-pointer items-center gap-2"
+				onclick={chatFormActions.onMcpResourcesClick}
+			>
+				<FolderOpen class={ICON_CLASS_DEFAULT} />
+
+				<span>Resources</span>
+			</DropdownMenu.Item>
+		{/if}
+	</DropdownMenu.SubContent>
+</DropdownMenu.Sub>
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
index 97351b3a6c..f1aa743693 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { SkipForward, Square } from '@lucide/svelte';
-	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import {
 		ChatFormActionModels,
@@ -10,7 +9,7 @@
 		ChatFormContextGauge
 	} from '$lib/components/app';
 	import { Button } from '$lib/components/ui/button';
-	import { ICON_CLASS_DEFAULT, ROUTES } from '$lib/constants';
+	import { ICON_CLASS_DEFAULT } from '$lib/constants';
 	import { setChatFormActionsContext } from '$lib/contexts';
 	import { FileTypeCategory, MessageRole } from '$lib/enums';
 	import { ChatService } from '$lib/services';
@@ -34,6 +33,7 @@
 		onSystemPromptClick?: () => void;
 		onMcpPromptClick?: () => void;
 		onMcpResourcesClick?: () => void;
+		onMcpSettingsClick?: () => void;
 	}
 
 	let {
@@ -47,6 +47,7 @@
 		onFileUpload,
 		onMcpPromptClick,
 		onMcpResourcesClick,
+		onMcpSettingsClick,
 		onMicClick,
 		onStop,
 		onSystemPromptClick,
@@ -163,7 +164,7 @@
 			return onMcpResourcesClick;
 		},
 		get onMcpSettingsClick() {
-			return () => goto(ROUTES.MCP_SERVERS);
+			return onMcpSettingsClick;
 		},
 		get onSystemPromptClick() {
 			return onSystemPromptClick;
diff --git a/tools/ui/src/lib/components/app/chat/index.ts b/tools/ui/src/lib/components/app/chat/index.ts
index a96ae37891..61ec242e90 100644
--- a/tools/ui/src/lib/components/app/chat/index.ts
+++ b/tools/ui/src/lib/components/app/chat/index.ts
@@ -221,25 +221,17 @@ export { default as ChatFormActionModels } from './ChatForm/ChatFormActions/Chat
 export { default as ChatFormActionAddToolsSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddToolsSubmenu.svelte';
 
 /**
- * Dropdown submenu for managing MCP servers in the chat form.
+ * Dropdown submenu for MCP prompts and resources in the chat form.
  *
- * Displays a searchable list of enabled MCP servers with toggle switches
- * to enable/disable each server for chat. Shows server favicon, health status,
- * and a "Manage MCP Servers" settings link.
- *
- * Features:
- * - Search/filter servers by name or URL
- * - Per-server toggle to enable/disable for chat
- * - Health check indicator (shows "Error" badge for failed servers)
- * - Server favicon display
- * - Settings link to manage MCP server configuration
+ * Shows an "MCP" sub-menu item with entries for MCP Prompts and MCP
+ * Resources. Only visible when the server supports them.
  *
  * @example
  * ```svelte
- * <ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
+ * <ChatFormActionAddMcpSubmenu />
  * ```
  */
-export { default as ChatFormActionAddMcpServersSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte';
+export { default as ChatFormActionAddMcpSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpSubmenu.svelte';
 
 /**
  * Dropdown submenu for selecting reasoning effort level.
diff --git a/tools/ui/src/lib/components/app/dialogs/DialogMcpResourcesBrowser.svelte b/tools/ui/src/lib/components/app/dialogs/DialogMcpResourcesBrowser.svelte
index 8804cb7ea7..6dfcdb856c 100644
--- a/tools/ui/src/lib/components/app/dialogs/DialogMcpResourcesBrowser.svelte
+++ b/tools/ui/src/lib/components/app/dialogs/DialogMcpResourcesBrowser.svelte
@@ -253,7 +253,7 @@
 </script>
 
 <Dialog.Root onOpenChange={handleOpenChange} {open}>
-	<Dialog.Content class="max-h-[80vh] !max-w-4xl overflow-hidden p-0">
+	<Dialog.Content class="max-h-[80vh] md:max-w-4xl! w-full! overflow-hidden p-0">
 		<Dialog.Header class="border-b border-border/30 px-6 py-4">
 			<Dialog.Title class="flex items-center gap-2">
 				<FolderOpen class="h-5 w-5" />
diff --git a/tools/ui/src/lib/components/app/dialogs/DialogMcpServerAddNew.svelte b/tools/ui/src/lib/components/app/dialogs/DialogMcpServerAddNew.svelte
index ae8b24cb2d..fab45aa970 100644
--- a/tools/ui/src/lib/components/app/dialogs/DialogMcpServerAddNew.svelte
+++ b/tools/ui/src/lib/components/app/dialogs/DialogMcpServerAddNew.svelte
@@ -246,7 +246,7 @@
 </script>
 
 <Dialog.Root onOpenChange={handleOpenChange} {open}>
-	<Dialog.Content class="sm:max-w-2xl">
+	<Dialog.Content class="max-w-2xl!">
 		<Dialog.Header>
 			<Dialog.Title class="select-none">Add New MCP Server</Dialog.Title>
 		</Dialog.Header>
diff --git a/tools/ui/src/lib/components/app/dialogs/DialogMcpServers.svelte b/tools/ui/src/lib/components/app/dialogs/DialogMcpServers.svelte
new file mode 100644
index 0000000000..2eaaa0a657
--- /dev/null
+++ b/tools/ui/src/lib/components/app/dialogs/DialogMcpServers.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { McpLogo } from '$lib/components/app';
+	import { SettingsMcpServers } from '$lib/components/app/settings';
+	import * as Dialog from '$lib/components/ui/dialog';
+
+	interface Props {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { onOpenChange, open = $bindable(false) }: Props = $props();
+
+	function handleOpenChange(value: boolean) {
+		open = value;
+		onOpenChange?.(value);
+	}
+</script>
+
+<Dialog.Root onOpenChange={handleOpenChange} {open}>
+	<Dialog.Content
+		class="md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-360! flex flex-col"
+	>
+		<Dialog.Header>
+			<Dialog.Title class="flex items-center gap-2">
+				<McpLogo class="h-5 w-5" />
+
+				<span>MCP Servers</span>
+			</Dialog.Title>
+		</Dialog.Header>
+
+		<SettingsMcpServers class="mt-4" />
+	</Dialog.Content>
+</Dialog.Root>
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..5e0046aae5
--- /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 onOpenChange={handleOpenChange} {open}>
+	<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} onClose={() => (open = false)} onSectionChange={() => {}} />
+	</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 38aa099354..1ffa7a2b9e 100644
--- a/tools/ui/src/lib/components/app/dialogs/index.ts
+++ b/tools/ui/src/lib/components/app/dialogs/index.ts
@@ -18,6 +18,23 @@
  */
 export { default as DialogMcpServerAddNew } from './DialogMcpServerAddNew.svelte';
 
+/**
+ * **DialogMcpServers** - MCP servers dialog shown from the chat form
+ *
+ * Shows the same MCP server list as the `/mcp-servers` route inside a modal
+ * dialog.
+ */
+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
  *
diff --git a/tools/ui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte b/tools/ui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte
index 632cd3e8a7..5969547036 100644
--- a/tools/ui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte
+++ b/tools/ui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte
@@ -1,13 +1,22 @@
 <script lang="ts">
-	import { Database, FileText, ListChecks, MessageSquare, Sparkles, Wrench } from '@lucide/svelte';
+	import {
+		Database,
+		ExternalLink,
+		FileText,
+		ListChecks,
+		MessageSquare,
+		Sparkles,
+		Wrench
+	} from '@lucide/svelte';
 	import { Badge } from '$lib/components/ui/badge';
 	import type { MCPCapabilitiesInfo } from '$lib/types';
 
 	interface Props {
 		capabilities?: MCPCapabilitiesInfo;
+		onBrowseResources?: () => void;
 	}
 
-	let { capabilities }: Props = $props();
+	let { capabilities, onBrowseResources }: Props = $props();
 </script>
 
 {#if capabilities}
@@ -20,10 +29,24 @@
 	{/if}
 
 	{#if capabilities.server.resources}
-		<Badge class="h-5 gap-1 bg-blue-50 px-1.5 text-[10px] dark:bg-blue-950" variant="outline">
+		<Badge
+			class="h-5 cursor-pointer gap-1 bg-blue-50 px-1.5 text-[10px] transition-colors hover:bg-blue-100 dark:bg-blue-950 dark:hover:bg-blue-900"
+			onclick={onBrowseResources}
+			onkeydown={(e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					onBrowseResources?.();
+				}
+			}}
+			role="button"
+			tabindex={0}
+			variant="outline"
+		>
 			<Database class="h-3 w-3 text-blue-600 dark:text-blue-400" />
 
 			Resources
+
+			<ExternalLink class="h-3 w-3 text-blue-600 dark:text-blue-400" />
 		</Badge>
 	{/if}
 
diff --git a/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte b/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
index 84383d59ea..6e9a995385 100644
--- a/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
+++ b/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
@@ -22,9 +22,10 @@
 		onToggle: (enabled: boolean) => void;
 		onUpdate: (updates: Partial<MCPServerSettingsEntry>) => void;
 		onDelete: () => void;
+		onBrowseResources?: () => void;
 	}
 
-	let { enabled, onDelete, onToggle, onUpdate, server }: Props = $props();
+	let { enabled, onBrowseResources, onDelete, onToggle, onUpdate, server }: Props = $props();
 
 	let healthState = $derived<HealthCheckState>(mcpStore.getHealthCheckState(server.id));
 	let displayName = $derived(mcpStore.getServerLabel(server));
@@ -125,6 +126,7 @@
 			{displayName}
 			enabled={enabled ?? server.enabled}
 			{faviconUrl}
+			{onBrowseResources}
 			{onToggle}
 			{serverInfo}
 			{transportType}
@@ -191,12 +193,14 @@
 				</div>
 			{/if}
 
-			<McpServerCardActions
-				{isHealthChecking}
-				onDelete={handleDeleteClick}
-				onEdit={startEditing}
-				onRefresh={handleHealthCheck}
-			/>
+			<div class="flex items-center gap-2">
+				<McpServerCardActions
+					{isHealthChecking}
+					onDelete={handleDeleteClick}
+					onEdit={startEditing}
+					onRefresh={handleHealthCheck}
+				/>
+			</div>
 		</div>
 	{/if}
 </Card.Root>
diff --git a/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte b/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
index 30369d6509..9baded678e 100644
--- a/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
+++ b/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
@@ -12,6 +12,7 @@
 		enabled: boolean;
 		disabled?: boolean;
 		onToggle: (enabled: boolean) => void;
+		onBrowseResources?: () => void;
 		serverInfo?: MCPServerInfo;
 		capabilities?: MCPCapabilitiesInfo;
 		transportType?: MCPTransportType;
@@ -23,6 +24,7 @@
 		displayName,
 		enabled,
 		faviconUrl,
+		onBrowseResources,
 		onToggle,
 		serverInfo,
 		transportType
@@ -57,7 +59,7 @@
 					{/if}
 
 					{#if capabilities}
-						<McpCapabilitiesBadges {capabilities} />
+						<McpCapabilitiesBadges {capabilities} {onBrowseResources} />
 					{/if}
 				</div>
 			{/if}
diff --git a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
index dfe55b5e29..8bf12279e3 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
@@ -5,6 +5,7 @@
 	import {
 		ActionIcon,
 		DialogConversationRename,
+		DialogSettingsChat,
 		Logo,
 		SidebarNavigationActions,
 		SidebarNavigationConversationList
@@ -91,6 +92,7 @@
 	let selectedIds = new SvelteSet<string>();
 
 	let renameDialogOpen = $state(false);
+	let settingsDialogOpen = $state(false);
 	let renameTargetConversationId = $state<string | null>(null);
 	let renameDraft = $state('');
 	let renameOriginalTitle = $state('');
@@ -308,7 +310,7 @@
 
 <svelte:window bind:innerWidth onkeydown={handleKeydown} />
 
-{#if innerWidth > 768 || (!page.url.hash.includes(ROUTES.SETTINGS) && !page.url.hash.includes(ROUTES.MCP_SERVERS) && !page.url.hash.includes(ROUTES.SEARCH))}
+{#if innerWidth > 768 || !page.url.hash.includes(ROUTES.SEARCH)}
 	<aside
 		class={[
 			'fixed md:sticky top-2 left-2 md:left-0 md:ml-2 md:mt-2 pt-2 z-10 w-[calc(100dvw-1rem)]',
@@ -400,6 +402,7 @@
 					isSearchModeActive = false;
 					searchQuery = '';
 				}}
+				onSettingsClick={() => (settingsDialogOpen = true)}
 			/>
 
 			{#if uiStore.isSidebarExpanded || isOnMobile}
@@ -447,6 +450,8 @@
 	onConfirm={handleRenameConfirm}
 />
 
+<DialogSettingsChat bind:open={settingsDialogOpen} />
+
 <style>
 	aside {
 		@media (max-width: 768px) {
diff --git a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
index 9df658e037..6bc2ca2d7f 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
@@ -26,6 +26,7 @@
 		onSearchDeactivated?: () => void;
 		onSearchClick?: () => void;
 		onNewChat?: () => void;
+		onSettingsClick?: () => void;
 	}
 
 	let {
@@ -35,6 +36,7 @@
 		onNewChat,
 		onSearchClick,
 		onSearchDeactivated,
+		onSettingsClick,
 		searchQuery = $bindable('')
 	}: Props = $props();
 
@@ -115,14 +117,16 @@
 							onNewChat?.();
 							void conversationsStore.openNewChat();
 						}
-					: item.route
-						? () => {
-								onNewChat?.();
-								goto(item.route!);
-							}
-						: isSearchOnMobile
-							? undefined
-							: onSearchClick}
+					: item.action === SidebarAction.SETTINGS
+						? () => onSettingsClick?.()
+						: item.route
+							? () => {
+									onNewChat?.();
+									goto(item.route!);
+								}
+							: isSearchOnMobile
+								? undefined
+								: onSearchClick}
 			{@const itemTransition = {
 				delay: !initialized ? i * ICON_STRIP_TRANSITION_DELAY_MULTIPLIER : 0,
 				duration: ICON_STRIP_TRANSITION_DURATION,
@@ -169,14 +173,16 @@
 							onNewChat?.();
 							void conversationsStore.openNewChat();
 						}
-					: item.route
-						? () => {
-								onNewChat?.();
-								goto(item.route!);
-							}
-						: isSearchOnMobile
-							? undefined
-							: onSearchClick}
+					: item.action === SidebarAction.SETTINGS
+						? () => onSettingsClick?.()
+						: item.route
+							? () => {
+									onNewChat?.();
+									goto(item.route!);
+								}
+							: isSearchOnMobile
+								? undefined
+								: onSearchClick}
 			{@const itemTransition = {
 				delay: !initialized ? i * ICON_STRIP_TRANSITION_DELAY_MULTIPLIER : 0,
 				duration: ICON_STRIP_TRANSITION_DURATION,
diff --git a/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte b/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
index 347e8484bd..8793900759 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { RefreshCw } from '@lucide/svelte';
-	import { goto } from '$app/navigation';
-	import { page } from '$app/state';
 	import {
 		SettingsChatDesktopSidebar,
 		SettingsChatFields,
@@ -18,21 +16,29 @@
 		SETTINGS_SECTION_SLUGS
 	} from '$lib/constants';
 	import { ColorMode } from '$lib/enums/ui.enums';
-	import { RouterService } from '$lib/services/router.service';
-	import { modelsStore, serverStore, settingsReferrer, settingsStore } from '$lib/stores';
-	import type { SettingsSection } from '$lib/types';
+	import { modelsStore, serverStore, settingsStore } from '$lib/stores';
+	import type { SettingsSection, SettingsSectionTitle } from '$lib/types';
 	import { setMode } from 'mode-watcher';
 	import { fade } from 'svelte/transition';
 	interface Props {
 		initialSection?: string;
-		getSectionHref?: (section: SettingsSection) => string;
+		onSectionChange?: (section: SettingsSectionTitle) => void;
+		onClose?: () => void;
 	}
 
-	let { getSectionHref, initialSection }: Props = $props();
+	let { initialSection, onClose, onSectionChange }: Props = $props();
 
-	let activeSlug = $derived(
-		initialSection ?? (page.params as Record<string, string | undefined>).section ?? 'general'
-	);
+	let activeSlug = $derived(initialSection ?? 'general');
+
+	function handleSectionChange(section: SettingsSectionTitle) {
+		const found = SETTINGS_CHAT_SECTIONS.find((s) => s.title === section);
+
+		if (found) {
+			activeSlug = found.slug;
+		}
+
+		onSectionChange?.(section);
+	}
 
 	let currentSection = $derived(
 		SETTINGS_CHAT_SECTIONS.find((section) => section.slug === activeSlug) ||
@@ -115,7 +121,7 @@
 		}
 
 		settingsStore.updateMultipleConfig(processedConfig);
-		goto(settingsReferrer.url);
+		onClose?.();
 	}
 
 	export function reset() {
@@ -123,32 +129,24 @@
 	}
 </script>
 
-<div in:fade={{ duration: 150 }} class="mx-auto flex h-full w-full flex-col md:pl-8">
-	<div class="flex flex-1 flex-col gap-4 md:flex-row">
+<div in:fade={{ duration: 150 }} class="mx-auto flex h-full w-full flex-col">
+	<div class="flex flex-1 flex-col md:flex-row md:gap-4">
 		<SettingsChatDesktopSidebar
-			getHref={getSectionHref ??
-				((section: SettingsSection) => RouterService.settings(section.slug))}
 			isActive={(section: SettingsSection) => section.slug === activeSlug}
+			onSectionChange={handleSectionChange}
 			sections={SETTINGS_CHAT_SECTIONS}
 		/>
 
 		<SettingsChatMobileHeader
 			bind:this={mobileHeader}
-			getHref={getSectionHref ??
-				((section: SettingsSection) => RouterService.settings(section.slug))}
 			isActive={(section: SettingsSection) => section.slug === activeSlug}
+			onSectionChange={handleSectionChange}
 			sections={SETTINGS_CHAT_SECTIONS}
 		/>
 
-		<div class="mx-auto max-w-3xl flex-1">
-			<div class="space-y-6 p-4 md:p-6 md:pt-28">
+		<div class="mx-auto max-w-2xl px-4 flex-1 md:mt-4">
+			<div class="space-y-6 pt-3">
 				<div class="grid">
-					<div class="mb-6 flex items-center gap-2 border-b border-border/30 pb-6 md:flex">
-						<currentSection.icon class="h-5 w-5" />
-
-						<h3 class="text-lg font-semibold">{currentSection.title}</h3>
-					</div>
-
 					{#if currentSection.slug === SETTINGS_SECTION_SLUGS.TOOLS}
 						<SettingsChatToolsTab />
 					{:else if currentSection.slug === SETTINGS_SECTION_SLUGS.IMPORT_EXPORT}
diff --git a/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte b/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte
index 08671da2ff..68a73cc4e8 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte
@@ -1,54 +1,31 @@
 <script lang="ts">
-	import { Settings } from '@lucide/svelte';
 	import { ICON_CLASS_DEFAULT } from '$lib/constants';
 	import type { SettingsSection, SettingsSectionTitle } from '$lib/types';
 
 	interface Props {
 		sections: SettingsSection[];
 		isActive: (section: SettingsSection) => boolean;
-		getHref?: (section: SettingsSection) => string;
 		onSectionChange?: (section: SettingsSectionTitle) => void;
 	}
 
-	let { getHref, isActive, onSectionChange, sections }: Props = $props();
+	let { isActive, onSectionChange, sections }: Props = $props();
 </script>
 
-<div class="sticky top-2 hidden w-64 flex-col self-start bg-background py-4 md:flex gap-6">
-	<div class="flex items-center gap-2 py-2">
-		<Settings class="h-5 w-5 md:h-6 md:w-6" />
-
-		<h1 class="text-xl font-semibold md:text-2xl">Settings</h1>
-	</div>
-
+<div class="sticky top-12 hidden w-64 flex-col self-start bg-background md:flex gap-6">
 	<nav class="space-y-1">
 		{#each sections as section (section.title)}
-			{#if getHref}
-				<a
-					class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm no-underline transition-colors hover:bg-accent {isActive(
-						section
-					)
-						? 'bg-accent text-accent-foreground'
-						: 'text-muted-foreground'}"
-					href={getHref(section)}
-				>
-					<section.icon class={ICON_CLASS_DEFAULT} />
+			<button
+				class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent {isActive(
+					section
+				)
+					? 'bg-accent text-accent-foreground'
+					: 'text-muted-foreground'}"
+				onclick={() => onSectionChange?.(section.title)}
+			>
+				<section.icon class={ICON_CLASS_DEFAULT} />
 
-					<span class="ml-2">{section.title}</span>
-				</a>
-			{:else}
-				<button
-					class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent {isActive(
-						section
-					)
-						? 'bg-accent text-accent-foreground'
-						: 'text-muted-foreground'}"
-					onclick={() => onSectionChange?.(section.title)}
-				>
-					<section.icon class={ICON_CLASS_DEFAULT} />
-
-					<span class="ml-2">{section.title}</span>
-				</button>
-			{/if}
+				<span class="ml-2">{section.title}</span>
+			</button>
 		{/each}
 	</nav>
 </div>
diff --git a/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte b/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte
index 887d28489c..ab85ef5eee 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { Settings } from '@lucide/svelte';
 	import { ScrollCarousel } from '$lib/components/app';
 	import { ICON_CLASS_DEFAULT, UI_DATA_ATTRS } from '$lib/constants';
 	import { BooleanString } from '$lib/enums';
@@ -10,11 +9,10 @@
 	interface Props {
 		sections: SettingsSection[];
 		isActive: (section: SettingsSection) => boolean;
-		getHref?: (section: SettingsSection) => string;
 		onSectionChange?: (section: SettingsSectionTitle) => void;
 	}
 
-	let { getHref, isActive, onSectionChange, sections }: Props = $props();
+	let { isActive, onSectionChange, sections }: Props = $props();
 
 	const carousel = useScrollCarousel();
 
@@ -37,51 +35,26 @@
 	}
 </script>
 
-<div class="sticky top-0 z-10 flex flex-col bg-background md:hidden">
-	<div class="flex items-center gap-2 px-4 pt-4 pb-2 md:pt-6">
-		<Settings class="h-5 w-5 md:h-6 md:w-6" />
-
-		<h1 class="text-xl font-semibold md:text-2xl">Settings</h1>
-	</div>
-
-	<div class="border-b border-border/30 py-2">
+<div class="flex flex-col bg-background md:hidden sticky top-13 z-50">
+	<div class="border-b border-border/30">
 		<ScrollCarousel alwaysShowArrows {carousel} containerClass="py-2" innerClass="gap-2">
 			{#each sections as section (section.title)}
-				{#if getHref}
-					<a
-						class="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm whitespace-nowrap no-underline transition-colors first:ml-4 last:mr-4 hover:bg-accent {isActive(
-							section
-						)
-							? 'bg-accent text-accent-foreground'
-							: 'text-muted-foreground'}"
-						{...{ [UI_DATA_ATTRS.ACTIVE]: isActive(section) }}
-						href={getHref(section)}
-						onclick={(e: MouseEvent) => {
-							carousel.scrollToCenter(e.currentTarget as HTMLElement);
-						}}
-					>
-						<section.icon class="{ICON_CLASS_DEFAULT} flex-shrink-0" />
+				<button
+					class="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm whitespace-nowrap transition-colors first:ml-4 last:mr-4 hover:bg-accent {isActive(
+						section
+					)
+						? 'bg-accent text-accent-foreground'
+						: 'text-muted-foreground'}"
+					{...{ [UI_DATA_ATTRS.ACTIVE]: isActive(section) }}
+					onclick={(e: MouseEvent) => {
+						onSectionChange?.(section.title);
+						carousel.scrollToCenter(e.currentTarget as HTMLElement);
+					}}
+				>
+					<section.icon class="{ICON_CLASS_DEFAULT} flex-shrink-0" />
 
-						<span>{section.title}</span>
-					</a>
-				{:else}
-					<button
-						class="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm whitespace-nowrap transition-colors first:ml-4 last:mr-4 hover:bg-accent {isActive(
-							section
-						)
-							? 'bg-accent text-accent-foreground'
-							: 'text-muted-foreground'}"
-						{...{ [UI_DATA_ATTRS.ACTIVE]: isActive(section) }}
-						onclick={(e: MouseEvent) => {
-							onSectionChange?.(section.title);
-							carousel.scrollToCenter(e.currentTarget as HTMLElement);
-						}}
-					>
-						<section.icon class="{ICON_CLASS_DEFAULT} flex-shrink-0" />
-
-						<span>{section.title}</span>
-					</button>
-				{/if}
+					<span>{section.title}</span>
+				</button>
 			{/each}
 		</ScrollCarousel>
 	</div>
diff --git a/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte b/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte
index 0f59a831f9..04efde9df5 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte
@@ -29,7 +29,7 @@
 	}
 </script>
 
-<div class="sticky bottom-0 mx-auto mt-4 flex w-full justify-between p-6">
+<div class="sticky bottom-0 mx-auto mt-4 flex w-full justify-between pb-4 md:pb-0">
 	<div class="flex gap-2">
 		<Button onclick={handleResetClick} variant="outline">
 			<RotateCcw class="h-3 w-3" />
diff --git a/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte b/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
index 5cbd249f1e..dd4b96c626 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-	import McpLogo from '../mcp/McpLogo.svelte';
-	import { Plus, X } from '@lucide/svelte';
-	import { browser } from '$app/environment';
-	import { goto, replaceState } from '$app/navigation';
+	import { Plus } from '@lucide/svelte';
+	import { replaceState } from '$app/navigation';
 	import { page } from '$app/state';
-	import { ActionIcon, McpServerCard, McpServerCardSkeleton } from '$lib/components/app';
-	import { DialogMcpServerAddNew } from '$lib/components/app/dialogs';
+	import { McpServerCard, McpServerCardSkeleton } from '$lib/components/app';
+	import { DialogMcpResourcesBrowser, DialogMcpServerAddNew } from '$lib/components/app/dialogs';
 	import { Button } from '$lib/components/ui/button';
 	import * as Empty from '$lib/components/ui/empty';
-	import { ROUTES } from '$lib/constants';
 	import { HealthCheckStatus } from '$lib/enums';
 	import { conversationsStore, mcpStore, toolsStore } from '$lib/stores';
 	import { onMount } from 'svelte';
@@ -23,26 +20,7 @@
 	let servers = $derived(mcpStore.getServers());
 
 	let isAddingServer = $state(false);
-
-	let previousRouteId = $state<string | null>(null);
-
-	$effect(() => {
-		const currentId = page.route.id;
-
-		return () => {
-			previousRouteId = currentId;
-		};
-	});
-
-	function handleClose() {
-		const prevIsMcpServers = previousRouteId === '/mcp-servers';
-
-		if (browser && window.history.length > 1 && !prevIsMcpServers) {
-			history.back();
-		} else {
-			goto(ROUTES.START);
-		}
-	}
+	let isResourcesDialogOpen = $state(false);
 
 	onMount(() => {
 		if (page.url.searchParams.has('add')) {
@@ -71,25 +49,13 @@
 	}
 </script>
 
-<div in:fade={{ duration: 150 }} class="flex min-h-[calc(100dvh-4rem)] flex-col">
-	<div class="fixed top-4.5 right-4 z-50 md:hidden">
-		<ActionIcon icon={X} onclick={handleClose} tooltip="Close" />
-	</div>
-
-	<div
-		class="sticky top-0 z-10 mt-4 mb-2 flex items-start gap-4 md:p-4 p-0 px-4 md:justify-between md:px-8"
-	>
-		<div class="flex items-center gap-2">
-			<McpLogo class="h-5 w-5 md:h-6 md:w-6" />
-
-			<h1 class="text-lg font-semibold md:text-2xl">MCP Servers</h1>
-		</div>
-	</div>
-
+<div in:fade={{ duration: 150 }} class="flex flex-col h-full">
 	<DialogMcpServerAddNew bind:open={isAddingServer} />
 
+	<DialogMcpResourcesBrowser bind:open={isResourcesDialogOpen} />
+
 	{#if servers.length === 0}
-		<div class="flex flex-1 items-center justify-center py-16">
+		<div class="flex flex-1 items-center justify-center pb-20 pt-10 my-auto">
 			<Empty.Root class="max-w-md">
 				<Empty.Header>
 					<Empty.Media variant="icon">
@@ -112,8 +78,8 @@
 		</div>
 	{:else}
 		<div
-			class="grid gap-3 {className}"
-			style="grid-template-columns: repeat(auto-fill, minmax(min(32rem, calc(100dvw - 2rem)), 1fr));"
+			class="grid gap-4 {className}"
+			style="grid-template-columns: repeat(auto-fill, minmax(min(25rem, calc(100dvw - 4rem)), 1fr));"
 		>
 			{#each servers as server (server.id)}
 				{#if isServerPending(server.id, server.enabled)}
@@ -121,6 +87,7 @@
 				{:else}
 					<McpServerCard
 						enabled={conversationsStore.preferences.isMcpServerEnabledForChat(server.id)}
+						onBrowseResources={() => (isResourcesDialogOpen = true)}
 						onDelete={() => mcpStore.removeServer(server.id)}
 						onToggle={async () => {
 							const wasEnabled = conversationsStore.preferences.isMcpServerEnabledForChat(
diff --git a/tools/ui/src/lib/components/app/settings/index.ts b/tools/ui/src/lib/components/app/settings/index.ts
index 9318fd4d30..7473e6af8e 100644
--- a/tools/ui/src/lib/components/app/settings/index.ts
+++ b/tools/ui/src/lib/components/app/settings/index.ts
@@ -1,21 +1,21 @@
 /**
  * Full chat settings page layout with sidebar, mobile header, and content area.
  * Manages local configuration state, section navigation, and context setup.
- * Accepts an optional `initialSection` prop to override the URL-based section resolution.
+ * Accepts an optional `initialSection` prop to set the initial active section.
  */
 export { default as SettingsChat } from './SettingsChat/SettingsChat.svelte';
 
 /**
  * Desktop sidebar navigation for chat settings.
  * Displays a list of settings sections with icons and titles.
- * Supports both hash-link navigation (via `getHref`) and in-app section switching (via `onSectionChange`).
+ * Switches sections in-app via `onSectionChange`.
  */
 export { default as SettingsChatDesktopSidebar } from './SettingsChatDesktopSidebar.svelte';
 
 /**
  * Mobile header with a horizontally scrollable section picker for chat settings.
  * Shows chevron buttons for scroll navigation and highlights the active section.
- * Supports both hash-link navigation (via `getHref`) and in-app section switching (via `onSectionChange`).
+ * Switches sections in-app via `onSectionChange`.
  */
 export { default as SettingsChatMobileHeader } from './SettingsChatMobileHeader.svelte';
 
diff --git a/tools/ui/src/lib/constants/routes.constants.ts b/tools/ui/src/lib/constants/routes.constants.ts
index d46acfd780..1f518a7586 100644
--- a/tools/ui/src/lib/constants/routes.constants.ts
+++ b/tools/ui/src/lib/constants/routes.constants.ts
@@ -15,10 +15,6 @@ export const ROUTES = {
 	MCP_SERVERS: '#/mcp-servers',
 	/** Search — mobile-only full-page conversation search. */
 	SEARCH: '#/search',
-	/** Settings base — for dynamic settings URLs use RouterService. */
-	SETTINGS: '#/settings',
-	/** Exit destination for the settings view (fallback when no referrer). */
-	SETTINGS_EXIT: '#/',
 	/** Root — start of the app. */
 	START: '#/'
 } as const;
diff --git a/tools/ui/src/lib/constants/ui.constants.ts b/tools/ui/src/lib/constants/ui.constants.ts
index 0f56b8d560..f40cecfb61 100644
--- a/tools/ui/src/lib/constants/ui.constants.ts
+++ b/tools/ui/src/lib/constants/ui.constants.ts
@@ -1,6 +1,4 @@
-import { ROUTES } from './routes.constants';
 import { Package, Search, Settings, SquarePen } from '@lucide/svelte';
-import McpLogo from '$lib/components/app/mcp/McpLogo.svelte';
 import { SidebarAction, ToolSource } from '$lib/enums';
 import type { DesktopIconStripItem } from '$lib/types';
 
@@ -64,15 +62,8 @@ export const SIDEBAR_ACTIONS_ITEMS: DesktopIconStripItem[] = [
 	},
 	{ icon: Search, keys: ['cmd', 'k'], tooltip: 'Search' },
 	{
-		activeRouteId: '/mcp-servers',
-		icon: McpLogo,
-		route: ROUTES.MCP_SERVERS,
-		tooltip: 'MCP Servers'
-	},
-	{
-		activeUrlIncludes: '#/settings',
+		action: SidebarAction.SETTINGS,
 		icon: Settings,
-		route: `${ROUTES.SETTINGS}/general`,
 		tooltip: 'Settings'
 	}
 ];
diff --git a/tools/ui/src/lib/enums/ui.enums.ts b/tools/ui/src/lib/enums/ui.enums.ts
index 34bbf72c52..4eda1d6911 100644
--- a/tools/ui/src/lib/enums/ui.enums.ts
+++ b/tools/ui/src/lib/enums/ui.enums.ts
@@ -23,7 +23,8 @@ export enum ScrollCarouselVariant {
  * Sidebar icon strip actions handled directly by the sidebar.
  */
 export enum SidebarAction {
-	NEW_CHAT = 'new-chat'
+	NEW_CHAT = 'new-chat',
+	SETTINGS = 'settings'
 }
 
 /**
diff --git a/tools/ui/src/lib/hooks/use-settings-navigation.svelte.ts b/tools/ui/src/lib/hooks/use-settings-navigation.svelte.ts
deleted file mode 100644
index b1b0456a83..0000000000
--- a/tools/ui/src/lib/hooks/use-settings-navigation.svelte.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { beforeNavigate } from '$app/navigation';
-import { page } from '$app/state';
-import { ROUTES } from '$lib/constants';
-import { settingsReferrer } from '$lib/stores';
-
-export interface ChatSettings {
-	reset: () => void;
-}
-
-export function useSettingsNavigation() {
-	const subroute = $state({
-		activePanel: 'chat' as 'chat' | 'settings' | 'mcp',
-		chatSettingsRef: undefined as ChatSettings | undefined
-	});
-	const isSettingsRoute = $derived(!!page.route.id?.startsWith('/settings'));
-
-	beforeNavigate(({ from, to }) => {
-		if (to?.route?.id?.startsWith('/settings') && !from?.route?.id?.startsWith('/settings')) {
-			settingsReferrer.url = window.location.hash || ROUTES.START;
-		}
-	});
-
-	$effect(() => {
-		if (subroute.activePanel === 'settings' && subroute.chatSettingsRef) {
-			subroute.chatSettingsRef.reset();
-		}
-	});
-
-	// Return to chat when navigating to a new route
-	$effect(() => {
-		void page.url;
-
-		subroute.activePanel = 'chat';
-	});
-
-	return {
-		get isSettingsRoute() {
-			return isSettingsRoute;
-		},
-
-		get panel() {
-			return subroute;
-		}
-	};
-}
diff --git a/tools/ui/src/lib/services/index.ts b/tools/ui/src/lib/services/index.ts
index 3175005660..cfd0077acc 100644
--- a/tools/ui/src/lib/services/index.ts
+++ b/tools/ui/src/lib/services/index.ts
@@ -307,7 +307,6 @@ export { SandboxService } from './sandbox.service';
  *
  * **Key Responsibilities:**
  * - Build chat URLs for specific conversations: `RouterService.chat(id)` → `#/chat/:id`
- * - Build settings URLs for sections: `RouterService.settings(section)` → `#/settings/:section`
  *
  * @see ROUTES in constants/routes.ts — static route base paths
  */
diff --git a/tools/ui/src/lib/services/router.service.ts b/tools/ui/src/lib/services/router.service.ts
index 217de38f3a..a16731d6db 100644
--- a/tools/ui/src/lib/services/router.service.ts
+++ b/tools/ui/src/lib/services/router.service.ts
@@ -1,8 +1,7 @@
 /**
  * RouterService - Builds app route paths
  *
- * Returns chat and settings route strings from a single source of truth
- * (ROUTES). No state.
+ * Returns chat route strings from a single source of truth (ROUTES). No state.
  */
 
 import { ROUTES } from '$lib/constants';
@@ -11,8 +10,4 @@ export class RouterService {
 	static chat(id: string): string {
 		return `${ROUTES.CHAT}/${id}`;
 	}
-
-	static settings(section: string): string {
-		return `${ROUTES.SETTINGS}/${section}`;
-	}
 }
diff --git a/tools/ui/src/lib/stores/index.ts b/tools/ui/src/lib/stores/index.ts
index 40ddd10bfd..b571699072 100644
--- a/tools/ui/src/lib/stores/index.ts
+++ b/tools/ui/src/lib/stores/index.ts
@@ -49,8 +49,6 @@ export { uiStore } from './ui.svelte';
 // SETTINGS / UI PREFERENCES
 export { settingsStore } from './settings/index.svelte';
 
-export { settingsReferrer } from './settings/referrer.svelte';
-
 export { permissionsStore } from './permissions.svelte';
 
 // TOOLS
diff --git a/tools/ui/src/lib/stores/settings/referrer.svelte.ts b/tools/ui/src/lib/stores/settings/referrer.svelte.ts
deleted file mode 100644
index d1055cc6e8..0000000000
--- a/tools/ui/src/lib/stores/settings/referrer.svelte.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * settingsReferrer - Remembers the settings route to return to after exit
- *
- * Tracks the last settings section the user was on so the app can return
- * there after a fallback exit. Standalone reactive value, no host.
- */
-
-import { ROUTES } from '$lib/constants';
-
-let _url = $state<string>(ROUTES.SETTINGS_EXIT);
-
-export const settingsReferrer = {
-	get url() {
-		return _url;
-	},
-	set url(value: string) {
-		_url = value;
-	}
-};
diff --git a/tools/ui/src/routes/mcp-servers/+page.svelte b/tools/ui/src/routes/mcp-servers/+page.svelte
deleted file mode 100644
index 1758134c39..0000000000
--- a/tools/ui/src/routes/mcp-servers/+page.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts">
-	import { SettingsMcpServers } from '$lib/components/app/settings';
-</script>
-
-<SettingsMcpServers class="mx-auto w-full p-4 md:p-8 md:py-8" />
diff --git a/tools/ui/src/routes/settings/+layout.svelte b/tools/ui/src/routes/settings/+layout.svelte
deleted file mode 100644
index 1eeb10772a..0000000000
--- a/tools/ui/src/routes/settings/+layout.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { X } from '@lucide/svelte';
-	import { browser } from '$app/environment';
-	import { goto } from '$app/navigation';
-	import { page } from '$app/state';
-	import { ActionIcon } from '$lib/components/app';
-	import { ROUTES } from '$lib/constants';
-
-	let { children } = $props();
-
-	let previousRouteId = $state<string | null>(null);
-
-	$effect(() => {
-		const currentId = page.route.id;
-
-		return () => {
-			previousRouteId = currentId;
-		};
-	});
-
-	function handleClose() {
-		const prevIsSettings = previousRouteId?.startsWith('/settings');
-
-		if (browser && window.history.length > 1 && !prevIsSettings) {
-			history.back();
-		} else {
-			goto(ROUTES.SETTINGS_EXIT);
-		}
-	}
-</script>
-
-<div class="fixed top-4.5 right-4 z-50 md:hidden">
-	<ActionIcon icon={X} onclick={handleClose} tooltip="Close" />
-</div>
-
-<div class="min-h-full">
-	{@render children?.()}
-</div>
diff --git a/tools/ui/src/routes/settings/[[section]]/+page.svelte b/tools/ui/src/routes/settings/[[section]]/+page.svelte
deleted file mode 100644
index d4faae0449..0000000000
--- a/tools/ui/src/routes/settings/[[section]]/+page.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-	import { afterNavigate, replaceState } from '$app/navigation';
-	import { page } from '$app/state';
-	import { SettingsChat } from '$lib/components/app/settings';
-	import { SETTINGS_SECTION_SLUGS } from '$lib/constants';
-	import { RouterService } from '$lib/services';
-
-	afterNavigate(() => {
-		if (!page.params.section) {
-			replaceState(RouterService.settings(SETTINGS_SECTION_SLUGS.GENERAL), {});
-		}
-	});
-</script>
-
-<SettingsChat initialSection={(page.params as Record<string, string | undefined>).section} />