diff --git a/apps/vscode-e2e/src/suite/extension.test.ts b/apps/vscode-e2e/src/suite/extension.test.ts
index e7a92521cf6..5d59e003eff 100644
--- a/apps/vscode-e2e/src/suite/extension.test.ts
+++ b/apps/vscode-e2e/src/suite/extension.test.ts
@@ -15,8 +15,6 @@ suite("Roo Code Extension", function () {
 			"SidebarProvider.removeView",
 			"activationCompleted",
 			"plusButtonClicked",
-			"mcpButtonClicked",
-			"promptsButtonClicked",
 			"popoutButtonClicked",
 			"openInNewTab",
 			"settingsButtonClicked",
diff --git a/packages/types/src/vscode.ts b/packages/types/src/vscode.ts
index d22ebdab229..98a633671c4 100644
--- a/packages/types/src/vscode.ts
+++ b/packages/types/src/vscode.ts
@@ -30,8 +30,6 @@ export const commandIds = [
 	"activationCompleted",
 
 	"plusButtonClicked",
-	"promptsButtonClicked",
-	"mcpButtonClicked",
 	"historyButtonClicked",
 	"marketplaceButtonClicked",
 	"popoutButtonClicked",
diff --git a/src/activate/registerCommands.ts b/src/activate/registerCommands.ts
index 41c127333d8..ad75642406c 100644
--- a/src/activate/registerCommands.ts
+++ b/src/activate/registerCommands.ts
@@ -101,28 +101,6 @@ const getCommandsMap = ({ context, outputChannel, provider }: RegisterCommandOpt
 		// This ensures the focus happens after the view has switched
 		await visibleProvider.postMessageToWebview({ type: "action", action: "focusInput" })
 	},
-	mcpButtonClicked: () => {
-		const visibleProvider = getVisibleProviderOrLog(outputChannel)
-
-		if (!visibleProvider) {
-			return
-		}
-
-		TelemetryService.instance.captureTitleButtonClicked("mcp")
-
-		visibleProvider.postMessageToWebview({ type: "action", action: "mcpButtonClicked" })
-	},
-	promptsButtonClicked: () => {
-		const visibleProvider = getVisibleProviderOrLog(outputChannel)
-
-		if (!visibleProvider) {
-			return
-		}
-
-		TelemetryService.instance.captureTitleButtonClicked("prompts")
-
-		visibleProvider.postMessageToWebview({ type: "action", action: "promptsButtonClicked" })
-	},
 	popoutButtonClicked: () => {
 		TelemetryService.instance.captureTitleButtonClicked("popout")
 
diff --git a/src/package.json b/src/package.json
index ca8e6e8c148..2f501463f5b 100644
--- a/src/package.json
+++ b/src/package.json
@@ -75,16 +75,6 @@
 				"title": "%command.newTask.title%",
 				"icon": "$(edit)"
 			},
-			{
-				"command": "roo-cline.promptsButtonClicked",
-				"title": "%command.prompts.title%",
-				"icon": "$(organization)"
-			},
-			{
-				"command": "roo-cline.mcpButtonClicked",
-				"title": "%command.mcpServers.title%",
-				"icon": "$(server)"
-			},
 			{
 				"command": "roo-cline.historyButtonClicked",
 				"title": "%command.history.title%",
@@ -229,17 +219,17 @@
 					"when": "view == roo-cline.SidebarProvider"
 				},
 				{
-					"command": "roo-cline.marketplaceButtonClicked",
+					"command": "roo-cline.settingsButtonClicked",
 					"group": "navigation@2",
 					"when": "view == roo-cline.SidebarProvider"
 				},
 				{
-					"command": "roo-cline.settingsButtonClicked",
+					"command": "roo-cline.cloudButtonClicked",
 					"group": "navigation@3",
 					"when": "view == roo-cline.SidebarProvider"
 				},
 				{
-					"command": "roo-cline.cloudButtonClicked",
+					"command": "roo-cline.marketplaceButtonClicked",
 					"group": "navigation@4",
 					"when": "view == roo-cline.SidebarProvider"
 				},
@@ -248,19 +238,9 @@
 					"group": "overflow@1",
 					"when": "view == roo-cline.SidebarProvider"
 				},
-				{
-					"command": "roo-cline.promptsButtonClicked",
-					"group": "overflow@2",
-					"when": "view == roo-cline.SidebarProvider"
-				},
-				{
-					"command": "roo-cline.mcpButtonClicked",
-					"group": "overflow@3",
-					"when": "view == roo-cline.SidebarProvider"
-				},
 				{
 					"command": "roo-cline.popoutButtonClicked",
-					"group": "overflow@4",
+					"group": "overflow@2",
 					"when": "view == roo-cline.SidebarProvider"
 				}
 			],
@@ -271,17 +251,17 @@
 					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
 				},
 				{
-					"command": "roo-cline.marketplaceButtonClicked",
+					"command": "roo-cline.settingsButtonClicked",
 					"group": "navigation@2",
 					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
 				},
 				{
-					"command": "roo-cline.settingsButtonClicked",
+					"command": "roo-cline.cloudButtonClicked",
 					"group": "navigation@3",
 					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
 				},
 				{
-					"command": "roo-cline.cloudButtonClicked",
+					"command": "roo-cline.marketplaceButtonClicked",
 					"group": "navigation@4",
 					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
 				},
@@ -290,19 +270,9 @@
 					"group": "overflow@1",
 					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
 				},
-				{
-					"command": "roo-cline.promptsButtonClicked",
-					"group": "overflow@2",
-					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
-				},
-				{
-					"command": "roo-cline.mcpButtonClicked",
-					"group": "overflow@3",
-					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
-				},
 				{
 					"command": "roo-cline.popoutButtonClicked",
-					"group": "overflow@4",
+					"group": "overflow@2",
 					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
 				}
 			]
diff --git a/src/package.nls.ca.json b/src/package.nls.ca.json
index 22d3f633a64..58d0287423f 100644
--- a/src/package.nls.ca.json
+++ b/src/package.nls.ca.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "Servidors MCP",
-	"command.prompts.title": "Modes",
-	"command.history.title": "Historial",
+	"command.history.title": "Historial de Tasques",
 	"command.marketplace.title": "Mercat",
 	"command.openInEditor.title": "Obrir a l'Editor",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.de.json b/src/package.nls.de.json
index 3931ba000ef..c7266008dea 100644
--- a/src/package.nls.de.json
+++ b/src/package.nls.de.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "MCP Server",
-	"command.prompts.title": "Modi",
-	"command.history.title": "Verlauf",
+	"command.history.title": "Aufgabenverlauf",
 	"command.marketplace.title": "Marktplatz",
 	"command.openInEditor.title": "Im Editor Öffnen",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.es.json b/src/package.nls.es.json
index 0c22cdf9045..1f72ec8db53 100644
--- a/src/package.nls.es.json
+++ b/src/package.nls.es.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "Servidores MCP",
-	"command.prompts.title": "Modos",
-	"command.history.title": "Historial",
+	"command.history.title": "Historial de Tareas",
 	"command.marketplace.title": "Mercado",
 	"command.openInEditor.title": "Abrir en Editor",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.fr.json b/src/package.nls.fr.json
index 422db278202..08c1341d8c1 100644
--- a/src/package.nls.fr.json
+++ b/src/package.nls.fr.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "Serveurs MCP",
-	"command.prompts.title": "Modes",
-	"command.history.title": "Historique",
+	"command.history.title": "Historique des Tâches",
 	"command.marketplace.title": "Marché",
 	"command.openInEditor.title": "Ouvrir dans l'Éditeur",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.hi.json b/src/package.nls.hi.json
index 6337e9e1a33..c67bc5aeb1d 100644
--- a/src/package.nls.hi.json
+++ b/src/package.nls.hi.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "एमसीपी सर्वर",
-	"command.prompts.title": "मोड्स",
-	"command.history.title": "इतिहास",
+	"command.history.title": "कार्य इतिहास",
 	"command.marketplace.title": "मार्केटप्लेस",
 	"command.openInEditor.title": "एडिटर में खोलें",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.id.json b/src/package.nls.id.json
index 1c3025a09d0..8973ef3d404 100644
--- a/src/package.nls.id.json
+++ b/src/package.nls.id.json
@@ -6,9 +6,7 @@
 	"views.activitybar.title": "Roo Code",
 	"views.sidebar.name": "Roo Code",
 	"command.newTask.title": "Tugas Baru",
-	"command.mcpServers.title": "Server MCP",
-	"command.prompts.title": "Mode",
-	"command.history.title": "Riwayat",
+	"command.history.title": "Riwayat Tugas",
 	"command.marketplace.title": "Marketplace",
 	"command.openInEditor.title": "Buka di Editor",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.it.json b/src/package.nls.it.json
index d0c130e00b1..f9db9769952 100644
--- a/src/package.nls.it.json
+++ b/src/package.nls.it.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "Server MCP",
-	"command.prompts.title": "Modi",
-	"command.history.title": "Cronologia",
+	"command.history.title": "Cronologia Attività",
 	"command.marketplace.title": "Marketplace",
 	"command.openInEditor.title": "Apri nell'Editor",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.ja.json b/src/package.nls.ja.json
index 05251f4aed1..55db11397f1 100644
--- a/src/package.nls.ja.json
+++ b/src/package.nls.ja.json
@@ -6,9 +6,7 @@
 	"views.activitybar.title": "Roo Code",
 	"views.sidebar.name": "Roo Code",
 	"command.newTask.title": "新しいタスク",
-	"command.mcpServers.title": "MCPサーバー",
-	"command.prompts.title": "モード",
-	"command.history.title": "履歴",
+	"command.history.title": "タスク履歴",
 	"command.marketplace.title": "マーケットプレイス",
 	"command.openInEditor.title": "エディタで開く",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.json b/src/package.nls.json
index 42443e1716d..4d3520d3319 100644
--- a/src/package.nls.json
+++ b/src/package.nls.json
@@ -6,9 +6,7 @@
 	"views.activitybar.title": "Roo Code",
 	"views.sidebar.name": "Roo Code",
 	"command.newTask.title": "New Task",
-	"command.mcpServers.title": "MCP Servers",
-	"command.prompts.title": "Modes",
-	"command.history.title": "History",
+	"command.history.title": "Task History",
 	"command.marketplace.title": "Marketplace",
 	"command.openInEditor.title": "Open in Editor",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.ko.json b/src/package.nls.ko.json
index dd933733f78..c649d96d139 100644
--- a/src/package.nls.ko.json
+++ b/src/package.nls.ko.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "MCP 서버",
-	"command.prompts.title": "모드",
-	"command.history.title": "기록",
+	"command.history.title": "작업 기록",
 	"command.marketplace.title": "마켓플레이스",
 	"command.openInEditor.title": "에디터에서 열기",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.nl.json b/src/package.nls.nl.json
index c5f52e55712..d4022eae716 100644
--- a/src/package.nls.nl.json
+++ b/src/package.nls.nl.json
@@ -6,9 +6,7 @@
 	"views.activitybar.title": "Roo Code",
 	"views.sidebar.name": "Roo Code",
 	"command.newTask.title": "Nieuwe Taak",
-	"command.mcpServers.title": "MCP Servers",
-	"command.prompts.title": "Modi",
-	"command.history.title": "Geschiedenis",
+	"command.history.title": "Taakgeschiedenis",
 	"command.marketplace.title": "Marktplaats",
 	"command.openInEditor.title": "Openen in Editor",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.pl.json b/src/package.nls.pl.json
index 1178336d684..690438e454f 100644
--- a/src/package.nls.pl.json
+++ b/src/package.nls.pl.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "Serwery MCP",
-	"command.prompts.title": "Tryby",
-	"command.history.title": "Historia",
+	"command.history.title": "Historia Zadań",
 	"command.marketplace.title": "Marketplace",
 	"command.openInEditor.title": "Otwórz w Edytorze",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.pt-BR.json b/src/package.nls.pt-BR.json
index dfed1c8fb13..37b9d88fad8 100644
--- a/src/package.nls.pt-BR.json
+++ b/src/package.nls.pt-BR.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "Servidores MCP",
-	"command.prompts.title": "Modos",
-	"command.history.title": "Histórico",
+	"command.history.title": "Histórico de Tarefas",
 	"command.marketplace.title": "Marketplace",
 	"command.openInEditor.title": "Abrir no Editor",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.ru.json b/src/package.nls.ru.json
index c2284af3695..0feac79e0c4 100644
--- a/src/package.nls.ru.json
+++ b/src/package.nls.ru.json
@@ -6,9 +6,7 @@
 	"views.activitybar.title": "Roo Code",
 	"views.sidebar.name": "Roo Code",
 	"command.newTask.title": "Новая задача",
-	"command.mcpServers.title": "MCP серверы",
-	"command.prompts.title": "Режимы",
-	"command.history.title": "История",
+	"command.history.title": "История задач",
 	"command.marketplace.title": "Маркетплейс",
 	"command.openInEditor.title": "Открыть в редакторе",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.tr.json b/src/package.nls.tr.json
index 21d9a1db93b..2cfc82d3f87 100644
--- a/src/package.nls.tr.json
+++ b/src/package.nls.tr.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "MCP Sunucuları",
-	"command.prompts.title": "Modlar",
-	"command.history.title": "Geçmiş",
+	"command.history.title": "Görev Geçmişi",
 	"command.marketplace.title": "Marketplace",
 	"command.openInEditor.title": "Düzenleyicide Aç",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.vi.json b/src/package.nls.vi.json
index 795f8549cf4..0f15b0a546d 100644
--- a/src/package.nls.vi.json
+++ b/src/package.nls.vi.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "Máy Chủ MCP",
-	"command.prompts.title": "Chế Độ",
-	"command.history.title": "Lịch Sử",
+	"command.history.title": "Lịch Sử Tác Vụ",
 	"command.marketplace.title": "Marketplace",
 	"command.openInEditor.title": "Mở trong Trình Soạn Thảo",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.zh-CN.json b/src/package.nls.zh-CN.json
index 1112abab7d6..a9d92a06ea2 100644
--- a/src/package.nls.zh-CN.json
+++ b/src/package.nls.zh-CN.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "MCP 服务器",
-	"command.prompts.title": "模式",
-	"command.history.title": "历史记录",
+	"command.history.title": "任务历史记录",
 	"command.marketplace.title": "应用市场",
 	"command.openInEditor.title": "在编辑器中打开",
 	"command.cloud.title": "Cloud",
diff --git a/src/package.nls.zh-TW.json b/src/package.nls.zh-TW.json
index a212a7a3538..78e5510f5a3 100644
--- a/src/package.nls.zh-TW.json
+++ b/src/package.nls.zh-TW.json
@@ -19,9 +19,7 @@
 	"views.contextMenu.label": "Roo Code",
 	"views.terminalMenu.label": "Roo Code",
 	"views.sidebar.name": "Roo Code",
-	"command.mcpServers.title": "MCP 伺服器",
-	"command.prompts.title": "模式",
-	"command.history.title": "歷史記錄",
+	"command.history.title": "工作歷史記錄",
 	"command.marketplace.title": "應用市場",
 	"command.openInEditor.title": "在編輯器中開啟",
 	"command.cloud.title": "Cloud",
diff --git a/src/shared/ExtensionMessage.ts b/src/shared/ExtensionMessage.ts
index 53327df7202..b9108fb8e65 100644
--- a/src/shared/ExtensionMessage.ts
+++ b/src/shared/ExtensionMessage.ts
@@ -140,10 +140,8 @@ export interface ExtensionMessage {
 	}
 	action?:
 		| "chatButtonClicked"
-		| "mcpButtonClicked"
 		| "settingsButtonClicked"
 		| "historyButtonClicked"
-		| "promptsButtonClicked"
 		| "marketplaceButtonClicked"
 		| "cloudButtonClicked"
 		| "didBecomeVisible"
diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx
index f9eb5605c26..62490a11158 100644
--- a/webview-ui/src/App.tsx
+++ b/webview-ui/src/App.tsx
@@ -17,9 +17,7 @@ import HistoryView from "./components/history/HistoryView"
 import SettingsView, { SettingsViewRef } from "./components/settings/SettingsView"
 import WelcomeView from "./components/welcome/WelcomeView"
 import WelcomeViewProvider from "./components/welcome/WelcomeViewProvider"
-import McpView from "./components/mcp/McpView"
 import { MarketplaceView } from "./components/marketplace/MarketplaceView"
-import ModesView from "./components/modes/ModesView"
 import { HumanRelayDialog } from "./components/human-relay/HumanRelayDialog"
 import { CheckpointRestoreDialog } from "./components/chat/CheckpointRestoreDialog"
 import { DeleteMessageDialog, EditMessageDialog } from "./components/chat/MessageModificationConfirmationDialog"
@@ -29,7 +27,7 @@ import { useAddNonInteractiveClickListener } from "./components/ui/hooks/useNonI
 import { TooltipProvider } from "./components/ui/tooltip"
 import { STANDARD_TOOLTIP_DELAY } from "./components/ui/standard-tooltip"
 
-type Tab = "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"
+type Tab = "settings" | "history" | "chat" | "marketplace" | "cloud"
 
 interface HumanRelayDialogState {
 	isOpen: boolean
@@ -60,8 +58,6 @@ const MemoizedHumanRelayDialog = React.memo(HumanRelayDialog)
 const tabsByMessageAction: Partial<Record<NonNullable<ExtensionMessage["action"]>, Tab>> = {
 	chatButtonClicked: "chat",
 	settingsButtonClicked: "settings",
-	promptsButtonClicked: "modes",
-	mcpButtonClicked: "mcp",
 	historyButtonClicked: "history",
 	marketplaceButtonClicked: "marketplace",
 	cloudButtonClicked: "cloud",
@@ -271,8 +267,6 @@ const App = () => {
 		)
 	) : (
 		<>
-			{tab === "modes" && <ModesView onDone={() => switchTab("chat")} />}
-			{tab === "mcp" && <McpView onDone={() => switchTab("chat")} />}
 			{tab === "history" && <HistoryView onDone={() => switchTab("chat")} />}
 			{tab === "settings" && (
 				<SettingsView ref={settingsRef} onDone={() => setTab("chat")} targetSection={currentSection} />
diff --git a/webview-ui/src/__tests__/App.spec.tsx b/webview-ui/src/__tests__/App.spec.tsx
index 09db361c126..e62f13f938e 100644
--- a/webview-ui/src/__tests__/App.spec.tsx
+++ b/webview-ui/src/__tests__/App.spec.tsx
@@ -69,23 +69,15 @@ vi.mock("@src/components/history/HistoryView", () => ({
 
 vi.mock("@src/components/mcp/McpView", () => ({
 	__esModule: true,
-	default: function McpView({ onDone }: { onDone: () => void }) {
-		return (
-			<div data-testid="mcp-view" onClick={onDone}>
-				MCP View
-			</div>
-		)
+	default: function McpView() {
+		return <div data-testid="mcp-view">MCP View</div>
 	},
 }))
 
 vi.mock("@src/components/modes/ModesView", () => ({
 	__esModule: true,
-	default: function ModesView({ onDone }: { onDone: () => void }) {
-		return (
-			<div data-testid="prompts-view" onClick={onDone}>
-				Modes View
-			</div>
-		)
+	default: function ModesView() {
+		return <div data-testid="prompts-view">Modes View</div>
 	},
 }))
 
@@ -253,34 +245,6 @@ describe("App", () => {
 		expect(chatView.getAttribute("data-hidden")).toBe("true")
 	})
 
-	it("switches to MCP view when receiving mcpButtonClicked action", async () => {
-		render(<AppWithProviders />)
-
-		act(() => {
-			triggerMessage("mcpButtonClicked")
-		})
-
-		const mcpView = await screen.findByTestId("mcp-view")
-		expect(mcpView).toBeInTheDocument()
-
-		const chatView = screen.getByTestId("chat-view")
-		expect(chatView.getAttribute("data-hidden")).toBe("true")
-	})
-
-	it("switches to prompts view when receiving promptsButtonClicked action", async () => {
-		render(<AppWithProviders />)
-
-		act(() => {
-			triggerMessage("promptsButtonClicked")
-		})
-
-		const promptsView = await screen.findByTestId("prompts-view")
-		expect(promptsView).toBeInTheDocument()
-
-		const chatView = screen.getByTestId("chat-view")
-		expect(chatView.getAttribute("data-hidden")).toBe("true")
-	})
-
 	it("returns to chat view when clicking done in settings view", async () => {
 		render(<AppWithProviders />)
 
@@ -299,7 +263,7 @@ describe("App", () => {
 		expect(screen.queryByTestId("settings-view")).not.toBeInTheDocument()
 	})
 
-	it.each(["history", "mcp", "prompts"])("returns to chat view when clicking done in %s view", async (view) => {
+	it.each(["history"])("returns to chat view when clicking done in %s view", async (view) => {
 		render(<AppWithProviders />)
 
 		act(() => {
diff --git a/webview-ui/src/components/chat/ModeSelector.tsx b/webview-ui/src/components/chat/ModeSelector.tsx
index 3f843344a22..8810850fad9 100644
--- a/webview-ui/src/components/chat/ModeSelector.tsx
+++ b/webview-ui/src/components/chat/ModeSelector.tsx
@@ -306,7 +306,11 @@ export const ModeSelector = ({
 								iconClass="codicon-settings-gear"
 								title={t("chat:modeSelector.settings")}
 								onClick={() => {
-									vscode.postMessage({ type: "switchTab", tab: "modes" })
+									vscode.postMessage({
+										type: "switchTab",
+										tab: "settings",
+										values: { section: "modes" },
+									})
 									setOpen(false)
 								}}
 							/>
diff --git a/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx b/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx
index b7e9951b0fa..eaf3549781c 100644
--- a/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx
+++ b/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx
@@ -195,25 +195,14 @@ export const MarketplaceInstallModal: React.FC<MarketplaceInstallModalProps> = (
 	}
 
 	const handlePostInstallAction = (tab: "mcp" | "modes") => {
-		if (tab === "mcp") {
-			// Navigate to MCP tab
-			window.postMessage(
-				{
-					type: "action",
-					action: "mcpButtonClicked",
-				},
-				"*",
-			)
-		} else {
-			// Navigate to Modes tab
-			window.postMessage(
-				{
-					type: "action",
-					action: "promptsButtonClicked",
-				},
-				"*",
-			)
-		}
+		const section = tab === "mcp" ? "mcp" : "modes"
+
+		vscode.postMessage({
+			type: "switchTab",
+			tab: "settings",
+			values: { section },
+		})
+
 		// Close the modal
 		onClose()
 	}
diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx
index 6f6b752ba89..7c22ad60f85 100644
--- a/webview-ui/src/components/mcp/McpView.tsx
+++ b/webview-ui/src/components/mcp/McpView.tsx
@@ -7,6 +7,7 @@ import {
 	VSCodePanelTab,
 	VSCodePanelView,
 } from "@vscode/webview-ui-toolkit/react"
+import { Webhook } from "lucide-react"
 
 import { McpServer } from "@roo/mcp"
 
@@ -25,19 +26,17 @@ import {
 	StandardTooltip,
 } from "@src/components/ui"
 import { buildDocLink } from "@src/utils/docLinks"
+import { Section } from "@src/components/settings/Section"
+import { SectionHeader } from "@src/components/settings/SectionHeader"
 
-import { Tab, TabContent, TabHeader } from "../common/Tab"
+import { TabContent } from "../common/Tab"
 
 import McpToolRow from "./McpToolRow"
 import McpResourceRow from "./McpResourceRow"
 import McpEnabledToggle from "./McpEnabledToggle"
 import { McpErrorRow } from "./McpErrorRow"
 
-type McpViewProps = {
-	onDone: () => void
-}
-
-const McpView = ({ onDone }: McpViewProps) => {
+const McpView = () => {
 	const {
 		mcpServers: servers,
 		alwaysAllowMcp,
@@ -49,150 +48,156 @@ const McpView = ({ onDone }: McpViewProps) => {
 	const { t } = useAppTranslation()
 
 	return (
-		<Tab>
-			<TabHeader className="flex justify-between items-center">
-				<h3 className="text-vscode-foreground m-0">{t("mcp:title")}</h3>
-				<Button onClick={onDone}>{t("mcp:done")}</Button>
-			</TabHeader>
-
-			<TabContent>
-				<div
-					style={{
-						color: "var(--vscode-foreground)",
-						fontSize: "13px",
-						marginBottom: "10px",
-						marginTop: "5px",
-					}}>
-					<Trans i18nKey="mcp:description">
-						<VSCodeLink
-							href={buildDocLink("features/mcp/using-mcp-in-roo", "mcp_settings")}
-							style={{ display: "inline" }}>
-							Learn More
-						</VSCodeLink>
-					</Trans>
+		<div>
+			<SectionHeader>
+				<div className="flex items-center gap-2">
+					<Webhook className="w-4" />
+					<div>{t("mcp:title")}</div>
 				</div>
+			</SectionHeader>
 
-				<McpEnabledToggle />
+			<Section>
+				<TabContent>
+					<div
+						style={{
+							color: "var(--vscode-foreground)",
+							fontSize: "13px",
+							marginBottom: "10px",
+							marginTop: "5px",
+						}}>
+						<Trans i18nKey="mcp:description">
+							<VSCodeLink
+								href={buildDocLink("features/mcp/using-mcp-in-roo", "mcp_settings")}
+								style={{ display: "inline" }}>
+								Learn More
+							</VSCodeLink>
+						</Trans>
+					</div>
 
-				{mcpEnabled && (
-					<>
-						<div style={{ marginBottom: 15 }}>
-							<VSCodeCheckbox
-								checked={enableMcpServerCreation}
-								onChange={(e: any) => {
-									setEnableMcpServerCreation(e.target.checked)
-									vscode.postMessage({ type: "enableMcpServerCreation", bool: e.target.checked })
-								}}>
-								<span style={{ fontWeight: "500" }}>{t("mcp:enableServerCreation.title")}</span>
-							</VSCodeCheckbox>
-							<div
-								style={{
-									fontSize: "12px",
-									marginTop: "5px",
-									color: "var(--vscode-descriptionForeground)",
-								}}>
-								<Trans i18nKey="mcp:enableServerCreation.description">
-									<VSCodeLink
-										href={buildDocLink(
-											"features/mcp/using-mcp-in-roo#how-to-use-roo-to-create-an-mcp-server",
-											"mcp_server_creation",
-										)}
-										style={{ display: "inline" }}>
-										Learn about server creation
-									</VSCodeLink>
-									<strong>new</strong>
-								</Trans>
-								<p style={{ marginTop: "8px" }}>{t("mcp:enableServerCreation.hint")}</p>
-							</div>
-						</div>
+					<McpEnabledToggle />
 
-						{/* Server List */}
-						{servers.length > 0 && (
-							<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
-								{servers.map((server) => (
-									<ServerRow
-										key={`${server.name}-${server.source || "global"}`}
-										server={server}
-										alwaysAllowMcp={alwaysAllowMcp}
-									/>
-								))}
+					{mcpEnabled && (
+						<>
+							<div style={{ marginBottom: 15 }}>
+								<VSCodeCheckbox
+									checked={enableMcpServerCreation}
+									onChange={(e: any) => {
+										setEnableMcpServerCreation(e.target.checked)
+										vscode.postMessage({ type: "enableMcpServerCreation", bool: e.target.checked })
+									}}>
+									<span style={{ fontWeight: "500" }}>{t("mcp:enableServerCreation.title")}</span>
+								</VSCodeCheckbox>
+								<div
+									style={{
+										fontSize: "12px",
+										marginTop: "5px",
+										color: "var(--vscode-descriptionForeground)",
+									}}>
+									<Trans i18nKey="mcp:enableServerCreation.description">
+										<VSCodeLink
+											href={buildDocLink(
+												"features/mcp/using-mcp-in-roo#how-to-use-roo-to-create-an-mcp-server",
+												"mcp_server_creation",
+											)}
+											style={{ display: "inline" }}>
+											Learn about server creation
+										</VSCodeLink>
+										<strong>new</strong>
+									</Trans>
+									<p style={{ marginTop: "8px" }}>{t("mcp:enableServerCreation.hint")}</p>
+								</div>
 							</div>
-						)}
 
-						{/* Edit Settings Buttons */}
-						<div
-							style={{
-								marginTop: "10px",
-								width: "100%",
-								display: "grid",
-								gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-								gap: "10px",
-							}}>
-							<Button
-								variant="secondary"
-								style={{ width: "100%" }}
-								onClick={() => {
-									vscode.postMessage({ type: "openMcpSettings" })
-								}}>
-								<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
-								{t("mcp:editGlobalMCP")}
-							</Button>
-							<Button
-								variant="secondary"
-								style={{ width: "100%" }}
-								onClick={() => {
-									vscode.postMessage({ type: "openProjectMcpSettings" })
-								}}>
-								<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
-								{t("mcp:editProjectMCP")}
-							</Button>
-							<Button
-								variant="secondary"
-								style={{ width: "100%" }}
-								onClick={() => {
-									vscode.postMessage({ type: "refreshAllMcpServers" })
+							{/* Server List */}
+							{servers.length > 0 && (
+								<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+									{servers.map((server) => (
+										<ServerRow
+											key={`${server.name}-${server.source || "global"}`}
+											server={server}
+											alwaysAllowMcp={alwaysAllowMcp}
+										/>
+									))}
+								</div>
+							)}
+
+							{/* Edit Settings Buttons */}
+							<div
+								style={{
+									marginTop: "10px",
+									width: "100%",
+									display: "grid",
+									gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+									gap: "10px",
 								}}>
-								<span className="codicon codicon-refresh" style={{ marginRight: "6px" }}></span>
-								{t("mcp:refreshMCP")}
-							</Button>
-							<StandardTooltip content={t("mcp:marketplace")}>
 								<Button
 									variant="secondary"
 									style={{ width: "100%" }}
 									onClick={() => {
-										window.postMessage(
-											{
-												type: "action",
-												action: "marketplaceButtonClicked",
-												values: { marketplaceTab: "mcp" },
-											},
-											"*",
-										)
+										vscode.postMessage({ type: "openMcpSettings" })
 									}}>
-									<span className="codicon codicon-extensions" style={{ marginRight: "6px" }}></span>
-									{t("mcp:marketplace")}
+									<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
+									{t("mcp:editGlobalMCP")}
 								</Button>
-							</StandardTooltip>
-						</div>
-						<div
-							style={{
-								marginTop: "15px",
-								fontSize: "12px",
-								color: "var(--vscode-descriptionForeground)",
-							}}>
-							<VSCodeLink
-								href={buildDocLink(
-									"features/mcp/using-mcp-in-roo#editing-mcp-settings-files",
-									"mcp_edit_settings",
-								)}
-								style={{ display: "inline" }}>
-								{t("mcp:learnMoreEditingSettings")}
-							</VSCodeLink>
-						</div>
-					</>
-				)}
-			</TabContent>
-		</Tab>
+								<Button
+									variant="secondary"
+									style={{ width: "100%" }}
+									onClick={() => {
+										vscode.postMessage({ type: "openProjectMcpSettings" })
+									}}>
+									<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
+									{t("mcp:editProjectMCP")}
+								</Button>
+								<Button
+									variant="secondary"
+									style={{ width: "100%" }}
+									onClick={() => {
+										vscode.postMessage({ type: "refreshAllMcpServers" })
+									}}>
+									<span className="codicon codicon-refresh" style={{ marginRight: "6px" }}></span>
+									{t("mcp:refreshMCP")}
+								</Button>
+								<StandardTooltip content={t("mcp:marketplace")}>
+									<Button
+										variant="secondary"
+										style={{ width: "100%" }}
+										onClick={() => {
+											window.postMessage(
+												{
+													type: "action",
+													action: "marketplaceButtonClicked",
+													values: { marketplaceTab: "mcp" },
+												},
+												"*",
+											)
+										}}>
+										<span
+											className="codicon codicon-extensions"
+											style={{ marginRight: "6px" }}></span>
+										{t("mcp:marketplace")}
+									</Button>
+								</StandardTooltip>
+							</div>
+							<div
+								style={{
+									marginTop: "15px",
+									fontSize: "12px",
+									color: "var(--vscode-descriptionForeground)",
+								}}>
+								<VSCodeLink
+									href={buildDocLink(
+										"features/mcp/using-mcp-in-roo#editing-mcp-settings-files",
+										"mcp_edit_settings",
+									)}
+									style={{ display: "inline" }}>
+									{t("mcp:learnMoreEditingSettings")}
+								</VSCodeLink>
+							</div>
+						</>
+					)}
+				</TabContent>
+			</Section>
+		</div>
 	)
 }
 
diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx
index b0091c15b7d..dc9522bc44e 100644
--- a/webview-ui/src/components/modes/ModesView.tsx
+++ b/webview-ui/src/components/modes/ModesView.tsx
@@ -8,7 +8,7 @@ import {
 	VSCodeTextField,
 } from "@vscode/webview-ui-toolkit/react"
 import { Trans } from "react-i18next"
-import { ChevronDown, X, Upload, Download } from "lucide-react"
+import { ChevronDown, X, Upload, Download, MessageSquare } from "lucide-react"
 
 import { ModeConfig, GroupEntry, PromptComponent, ToolGroup, modeConfigSchema } from "@roo-code/types"
 
@@ -28,7 +28,9 @@ import { vscode } from "@src/utils/vscode"
 import { buildDocLink } from "@src/utils/docLinks"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
-import { Tab, TabContent, TabHeader } from "@src/components/common/Tab"
+import { Section } from "@src/components/settings/Section"
+import { SectionHeader } from "@src/components/settings/SectionHeader"
+import { TabContent } from "@src/components/common/Tab"
 import {
 	Button,
 	Select,
@@ -58,16 +60,12 @@ type ModeSource = "global" | "project"
 
 type ImportModeResult = { type: "importModeResult"; success: boolean; slug?: string; error?: string }
 
-type ModesViewProps = {
-	onDone: () => void
-}
-
 // Helper to get group name regardless of format
 function getGroupName(group: GroupEntry): ToolGroup {
 	return Array.isArray(group) ? group[0] : group
 }
 
-const ModesView = ({ onDone }: ModesViewProps) => {
+const ModesView = () => {
 	const { t } = useAppTranslation()
 
 	const {
@@ -595,874 +593,890 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 	}
 
 	return (
-		<Tab>
-			<TabHeader className="flex justify-between items-center">
-				<h3 className="text-vscode-foreground m-0">{t("prompts:title")}</h3>
-				<Button onClick={onDone}>{t("prompts:done")}</Button>
-			</TabHeader>
-
-			<TabContent>
-				<div>
-					<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mb-3">
-						<h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
-						<div className="flex gap-2">
-							<div className="relative inline-block">
-								<StandardTooltip content={t("prompts:modes.editModesConfig")}>
-									<Button
-										variant="ghost"
-										size="icon"
-										className="flex"
-										onClick={(e: React.MouseEvent) => {
-											e.preventDefault()
-											e.stopPropagation()
-											setShowConfigMenu((prev) => !prev)
-										}}
-										onBlur={() => {
-											// Add slight delay to allow menu item clicks to register
-											setTimeout(() => setShowConfigMenu(false), 200)
-										}}>
-										<span className="codicon codicon-json"></span>
-									</Button>
-								</StandardTooltip>
-								{showConfigMenu && (
-									<div
-										onClick={(e) => e.stopPropagation()}
-										onMouseDown={(e) => e.stopPropagation()}
-										className="absolute top-full right-0 w-[200px] mt-1 bg-vscode-editor-background border border-vscode-input-border rounded shadow-md z-[1000]">
-										<div
-											className="p-2 cursor-pointer text-vscode-foreground text-sm"
-											onMouseDown={(e) => {
-												e.preventDefault() // Prevent blur
-												vscode.postMessage({
-													type: "openCustomModesSettings",
-												})
-												setShowConfigMenu(false)
+		<div>
+			<SectionHeader>
+				<div className="flex items-center gap-2">
+					<MessageSquare className="w-4" />
+					<div>{t("prompts:title")}</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				<TabContent>
+					<div>
+						<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mb-3">
+							<h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
+							<div className="flex gap-2">
+								<div className="relative inline-block">
+									<StandardTooltip content={t("prompts:modes.editModesConfig")}>
+										<Button
+											variant="ghost"
+											size="icon"
+											className="flex"
+											onClick={(e: React.MouseEvent) => {
+												e.preventDefault()
+												e.stopPropagation()
+												setShowConfigMenu((prev) => !prev)
 											}}
-											onClick={(e) => e.preventDefault()}>
-											{t("prompts:modes.editGlobalModes")}
-										</div>
+											onBlur={() => {
+												// Add slight delay to allow menu item clicks to register
+												setTimeout(() => setShowConfigMenu(false), 200)
+											}}>
+											<span className="codicon codicon-json"></span>
+										</Button>
+									</StandardTooltip>
+									{showConfigMenu && (
 										<div
-											className="p-2 cursor-pointer text-vscode-foreground text-sm border-t border-vscode-input-border"
-											onMouseDown={(e) => {
-												e.preventDefault() // Prevent blur
-												vscode.postMessage({
-													type: "openFile",
-													text: "./.roomodes",
-													values: {
-														create: true,
-														content: JSON.stringify({ customModes: [] }, null, 2),
-													},
-												})
-												setShowConfigMenu(false)
-											}}
-											onClick={(e) => e.preventDefault()}>
-											{t("prompts:modes.editProjectModes")}
+											onClick={(e) => e.stopPropagation()}
+											onMouseDown={(e) => e.stopPropagation()}
+											className="absolute top-full right-0 w-[200px] mt-1 bg-vscode-editor-background border border-vscode-input-border rounded shadow-md z-[1000]">
+											<div
+												className="p-2 cursor-pointer text-vscode-foreground text-sm"
+												onMouseDown={(e) => {
+													e.preventDefault() // Prevent blur
+													vscode.postMessage({
+														type: "openCustomModesSettings",
+													})
+													setShowConfigMenu(false)
+												}}
+												onClick={(e) => e.preventDefault()}>
+												{t("prompts:modes.editGlobalModes")}
+											</div>
+											<div
+												className="p-2 cursor-pointer text-vscode-foreground text-sm border-t border-vscode-input-border"
+												onMouseDown={(e) => {
+													e.preventDefault() // Prevent blur
+													vscode.postMessage({
+														type: "openFile",
+														text: "./.roomodes",
+														values: {
+															create: true,
+															content: JSON.stringify({ customModes: [] }, null, 2),
+														},
+													})
+													setShowConfigMenu(false)
+												}}
+												onClick={(e) => e.preventDefault()}>
+												{t("prompts:modes.editProjectModes")}
+											</div>
 										</div>
-									</div>
-								)}
-							</div>
-							<StandardTooltip content={t("chat:modeSelector.marketplace")}>
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => {
-										window.postMessage(
-											{
-												type: "action",
-												action: "marketplaceButtonClicked",
-												values: { marketplaceTab: "mode" },
-											},
-											"*",
-										)
-									}}>
-									<span className="codicon codicon-extensions"></span>
-								</Button>
-							</StandardTooltip>
-
-							<StandardTooltip content={t("prompts:modes.importMode")}>
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => setShowImportDialog(true)}
-									disabled={isImporting}
-									title={t("prompts:modes.importMode")}
-									data-testid="import-mode-toolbar-button">
-									<Download className="h-4 w-4" />
-								</Button>
-							</StandardTooltip>
-						</div>
-					</div>
-
-					<div className="text-sm text-vscode-descriptionForeground mb-3">
-						<Trans i18nKey="prompts:modes.createModeHelpText">
-							<VSCodeLink
-								href={buildDocLink("basic-usage/using-modes", "prompts_view_modes")}
-								style={{ display: "inline" }}
-								aria-label="Learn about using modes"></VSCodeLink>
-							<VSCodeLink
-								href={buildDocLink("features/custom-modes", "prompts_view_modes")}
-								style={{ display: "inline" }}
-								aria-label="Learn about customizing modes"></VSCodeLink>
-						</Trans>
-					</div>
-
-					<div className="flex items-center gap-1 mb-3">
-						{isRenamingMode ? (
-							<>
-								<VSCodeTextField
-									ref={renameInputRef}
-									value={renameInputValue}
-									onInput={(e: unknown) => {
-										const target = e as { target: { value: string } }
-										setRenameInputValue(target.target.value)
-									}}
-									className="grow"
-									placeholder={t("prompts:createModeDialog.name.placeholder")}
-								/>
-								<StandardTooltip content={t("settings:common.save")}>
+									)}
+								</div>
+								<StandardTooltip content={t("chat:modeSelector.marketplace")}>
 									<Button
 										variant="ghost"
 										size="icon"
-										disabled={!renameInputValue.trim()}
-										onClick={handleSaveRenameMode}
-										data-testid="save-mode-rename-button">
-										<span className="codicon codicon-check" />
+										onClick={() => {
+											window.postMessage(
+												{
+													type: "action",
+													action: "marketplaceButtonClicked",
+													values: { marketplaceTab: "mode" },
+												},
+												"*",
+											)
+										}}>
+										<span className="codicon codicon-extensions"></span>
 									</Button>
 								</StandardTooltip>
-								<StandardTooltip content={t("settings:common.cancel")}>
+
+								<StandardTooltip content={t("prompts:modes.importMode")}>
 									<Button
 										variant="ghost"
 										size="icon"
-										onClick={handleCancelRenameMode}
-										data-testid="cancel-mode-rename-button">
-										<span className="codicon codicon-close" />
+										onClick={() => setShowImportDialog(true)}
+										disabled={isImporting}
+										title={t("prompts:modes.importMode")}
+										data-testid="import-mode-toolbar-button">
+										<Download className="h-4 w-4" />
 									</Button>
 								</StandardTooltip>
-							</>
-						) : (
-							<>
-								<Popover open={open} onOpenChange={onOpenChange}>
-									<PopoverTrigger asChild>
+							</div>
+						</div>
+
+						<div className="text-sm text-vscode-descriptionForeground mb-3">
+							<Trans i18nKey="prompts:modes.createModeHelpText">
+								<VSCodeLink
+									href={buildDocLink("basic-usage/using-modes", "prompts_view_modes")}
+									style={{ display: "inline" }}
+									aria-label="Learn about using modes"></VSCodeLink>
+								<VSCodeLink
+									href={buildDocLink("features/custom-modes", "prompts_view_modes")}
+									style={{ display: "inline" }}
+									aria-label="Learn about customizing modes"></VSCodeLink>
+							</Trans>
+						</div>
+
+						<div className="flex items-center gap-1 mb-3">
+							{isRenamingMode ? (
+								<>
+									<VSCodeTextField
+										ref={renameInputRef}
+										value={renameInputValue}
+										onInput={(e: unknown) => {
+											const target = e as { target: { value: string } }
+											setRenameInputValue(target.target.value)
+										}}
+										className="grow"
+										placeholder={t("prompts:createModeDialog.name.placeholder")}
+									/>
+									<StandardTooltip content={t("settings:common.save")}>
 										<Button
-											variant="combobox"
-											role="combobox"
-											aria-expanded={open}
-											className="justify-between grow"
-											data-testid="mode-select-trigger">
-											<div className="truncate">
-												{localRenames[visualMode] ??
-													getCurrentMode()?.name ??
-													t("prompts:modes.selectMode")}
-											</div>
-											<ChevronDown className="opacity-50" />
+											variant="ghost"
+											size="icon"
+											disabled={!renameInputValue.trim()}
+											onClick={handleSaveRenameMode}
+											data-testid="save-mode-rename-button">
+											<span className="codicon codicon-check" />
 										</Button>
-									</PopoverTrigger>
-									<PopoverContent className="p-0 w-[var(--radix-popover-trigger-width)]">
-										<Command>
-											<div className="relative">
-												<CommandInput
-													ref={searchInputRef}
-													value={searchValue}
-													onValueChange={setSearchValue}
-													placeholder={t("prompts:modes.selectMode")}
-													className="h-9 mr-4"
-													data-testid="mode-search-input"
-												/>
-												{searchValue.length > 0 && (
-													<div className="absolute right-2 top-0 bottom-0 flex items-center justify-center">
-														<X
-															className="text-vscode-input-foreground opacity-50 hover:opacity-100 size-4 p-0.5 cursor-pointer"
-															onClick={onClearSearch}
-														/>
-													</div>
-												)}
-											</div>
-											<CommandList>
-												<CommandEmpty>
-													{searchValue && (
-														<div className="py-2 px-1 text-sm">
-															{t("prompts:modes.noMatchFound")}
+									</StandardTooltip>
+									<StandardTooltip content={t("settings:common.cancel")}>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={handleCancelRenameMode}
+											data-testid="cancel-mode-rename-button">
+											<span className="codicon codicon-close" />
+										</Button>
+									</StandardTooltip>
+								</>
+							) : (
+								<>
+									<Popover open={open} onOpenChange={onOpenChange}>
+										<PopoverTrigger asChild>
+											<Button
+												variant="combobox"
+												role="combobox"
+												aria-expanded={open}
+												className="justify-between grow"
+												data-testid="mode-select-trigger">
+												<div className="truncate">
+													{localRenames[visualMode] ??
+														getCurrentMode()?.name ??
+														t("prompts:modes.selectMode")}
+												</div>
+												<ChevronDown className="opacity-50" />
+											</Button>
+										</PopoverTrigger>
+										<PopoverContent className="p-0 w-[var(--radix-popover-trigger-width)]">
+											<Command>
+												<div className="relative">
+													<CommandInput
+														ref={searchInputRef}
+														value={searchValue}
+														onValueChange={setSearchValue}
+														placeholder={t("prompts:modes.selectMode")}
+														className="h-9 mr-4"
+														data-testid="mode-search-input"
+													/>
+													{searchValue.length > 0 && (
+														<div className="absolute right-2 top-0 bottom-0 flex items-center justify-center">
+															<X
+																className="text-vscode-input-foreground opacity-50 hover:opacity-100 size-4 p-0.5 cursor-pointer"
+																onClick={onClearSearch}
+															/>
 														</div>
 													)}
-												</CommandEmpty>
-												<CommandGroup>
-													{displayModes
-														.filter((modeConfig) =>
-															searchValue
-																? modeConfig.name
-																		.toLowerCase()
-																		.includes(searchValue.toLowerCase())
-																: true,
-														)
-														.map((modeConfig) => (
-															<CommandItem
-																key={modeConfig.slug}
-																value={`${modeConfig.name} ${modeConfig.slug}`}
-																onSelect={() => {
-																	handleModeSwitch(modeConfig)
-																	setOpen(false)
-																}}
-																data-testid={`mode-option-${modeConfig.slug}`}>
-																<div className="flex items-center justify-between w-full">
-																	<span
-																		style={{
-																			whiteSpace: "nowrap",
-																			overflow: "hidden",
-																			textOverflow: "ellipsis",
-																			flex: 2,
-																			minWidth: 0,
-																		}}>
-																		{modeConfig.name}
-																	</span>
-																	<span
-																		className="text-foreground"
-																		style={{
-																			whiteSpace: "nowrap",
-																			overflow: "hidden",
-																			textOverflow: "ellipsis",
-																			direction: "rtl",
-																			textAlign: "right",
-																			flex: 1,
-																			minWidth: 0,
-																			marginLeft: "0.5em",
-																		}}>
-																		{modeConfig.slug}
-																	</span>
-																</div>
-															</CommandItem>
-														))}
-												</CommandGroup>
-											</CommandList>
-										</Command>
-									</PopoverContent>
-								</Popover>
-
-								{/* New mode (+) moved here from the top bar */}
-								<StandardTooltip content={t("prompts:modes.createNewMode")}>
-									<Button
-										variant="ghost"
-										size="icon"
-										onClick={openCreateModeDialog}
-										data-testid="add-mode-button">
-										<span className="codicon codicon-add" />
-									</Button>
-								</StandardTooltip>
+												</div>
+												<CommandList>
+													<CommandEmpty>
+														{searchValue && (
+															<div className="py-2 px-1 text-sm">
+																{t("prompts:modes.noMatchFound")}
+															</div>
+														)}
+													</CommandEmpty>
+													<CommandGroup>
+														{displayModes
+															.filter((modeConfig) =>
+																searchValue
+																	? modeConfig.name
+																			.toLowerCase()
+																			.includes(searchValue.toLowerCase())
+																	: true,
+															)
+															.map((modeConfig) => (
+																<CommandItem
+																	key={modeConfig.slug}
+																	value={`${modeConfig.name} ${modeConfig.slug}`}
+																	onSelect={() => {
+																		handleModeSwitch(modeConfig)
+																		setOpen(false)
+																	}}
+																	data-testid={`mode-option-${modeConfig.slug}`}>
+																	<div className="flex items-center justify-between w-full">
+																		<span
+																			style={{
+																				whiteSpace: "nowrap",
+																				overflow: "hidden",
+																				textOverflow: "ellipsis",
+																				flex: 2,
+																				minWidth: 0,
+																			}}>
+																			{modeConfig.name}
+																		</span>
+																		<span
+																			className="text-foreground"
+																			style={{
+																				whiteSpace: "nowrap",
+																				overflow: "hidden",
+																				textOverflow: "ellipsis",
+																				direction: "rtl",
+																				textAlign: "right",
+																				flex: 1,
+																				minWidth: 0,
+																				marginLeft: "0.5em",
+																			}}>
+																			{modeConfig.slug}
+																		</span>
+																	</div>
+																</CommandItem>
+															))}
+													</CommandGroup>
+												</CommandList>
+											</Command>
+										</PopoverContent>
+									</Popover>
+
+									{/* New mode (+) moved here from the top bar */}
+									<StandardTooltip content={t("prompts:modes.createNewMode")}>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={openCreateModeDialog}
+											data-testid="add-mode-button">
+											<span className="codicon codicon-add" />
+										</Button>
+									</StandardTooltip>
 
-								{/* Edit (rename) mode - only enabled for custom modes */}
-								<StandardTooltip content={t("settings:providers.renameProfile")}>
+									{/* Edit (rename) mode - only enabled for custom modes */}
+									<StandardTooltip content={t("settings:providers.renameProfile")}>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={handleStartRenameMode}
+											data-testid="rename-mode-button"
+											disabled={!findModeBySlug(visualMode, customModes)}>
+											<span className="codicon codicon-edit" />
+										</Button>
+									</StandardTooltip>
+
+									{/* Delete mode - disabled for built-in modes */}
+									<StandardTooltip content={t("prompts:createModeDialog.deleteMode")}>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={() => {
+												const customMode = findModeBySlug(visualMode, customModes)
+												if (customMode) {
+													setModeToDelete({
+														slug: customMode.slug,
+														name: customMode.name,
+														source: customMode.source || "global",
+													})
+													vscode.postMessage({
+														type: "deleteCustomMode",
+														slug: customMode.slug,
+														checkOnly: true,
+													})
+												}
+											}}
+											data-testid="delete-mode-button"
+											disabled={!findModeBySlug(visualMode, customModes)}>
+											<span className="codicon codicon-trash" />
+										</Button>
+									</StandardTooltip>
+
+									{/* Export mode (kept here to the right of the dropdown) */}
+									<StandardTooltip content={t("prompts:exportMode.title")}>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={() => {
+												const currentMode = getCurrentMode()
+												if (currentMode?.slug && !isExporting) {
+													setIsExporting(true)
+													vscode.postMessage({
+														type: "exportMode",
+														slug: currentMode.slug,
+													})
+												}
+											}}
+											disabled={isExporting}
+											title={t("prompts:exportMode.title")}
+											data-testid="export-mode-toolbar-button">
+											<Upload className="h-4 w-4" />
+										</Button>
+									</StandardTooltip>
+								</>
+							)}
+						</div>
+
+						{/* API Configuration - Moved Here */}
+						<div className="mb-3">
+							<div className="font-bold mb-1">{t("prompts:apiConfiguration.title")}</div>
+							<div className="text-sm text-vscode-descriptionForeground mb-2">
+								{t("prompts:apiConfiguration.select")}
+							</div>
+							<div className="mb-2">
+								<Select
+									value={currentApiConfigName}
+									onValueChange={(value) => {
+										vscode.postMessage({
+											type: "loadApiConfiguration",
+											text: value,
+										})
+									}}>
+									<SelectTrigger className="w-full">
+										<SelectValue placeholder={t("settings:common.select")} />
+									</SelectTrigger>
+									<SelectContent>
+										{(listApiConfigMeta || []).map((config) => (
+											<SelectItem key={config.id} value={config.name}>
+												{config.name}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+							</div>
+						</div>
+					</div>
+
+					{/* Role Definition section */}
+					<div className="mb-4">
+						<div className="flex justify-between items-center mb-1">
+							<div className="font-bold">{t("prompts:roleDefinition.title")}</div>
+							{!findModeBySlug(visualMode, customModes) && (
+								<StandardTooltip content={t("prompts:roleDefinition.resetToDefault")}>
 									<Button
 										variant="ghost"
 										size="icon"
-										onClick={handleStartRenameMode}
-										data-testid="rename-mode-button"
-										disabled={!findModeBySlug(visualMode, customModes)}>
-										<span className="codicon codicon-edit" />
+										onClick={() => {
+											const currentMode = getCurrentMode()
+											if (currentMode?.slug) {
+												handleAgentReset(currentMode.slug, "roleDefinition")
+											}
+										}}
+										data-testid="role-definition-reset">
+										<span className="codicon codicon-discard"></span>
 									</Button>
 								</StandardTooltip>
+							)}
+						</div>
+						<div className="text-sm text-vscode-descriptionForeground mb-2">
+							{t("prompts:roleDefinition.description")}
+						</div>
+						<VSCodeTextArea
+							resize="vertical"
+							value={(() => {
+								const customMode = findModeBySlug(visualMode, customModes)
+								const prompt = customModePrompts?.[visualMode] as PromptComponent
+								return (
+									customMode?.roleDefinition ??
+									prompt?.roleDefinition ??
+									getRoleDefinition(visualMode)
+								)
+							})()}
+							onChange={(e) => {
+								const value =
+									(e as unknown as CustomEvent)?.detail?.target?.value ??
+									((e as any).target as HTMLTextAreaElement).value
+								const customMode = findModeBySlug(visualMode, customModes)
+								if (customMode) {
+									// For custom modes, update the JSON file
+									updateCustomMode(visualMode, {
+										...customMode,
+										roleDefinition: value.trim() || "",
+										source: customMode.source || "global",
+									})
+								} else {
+									// For built-in modes, update the prompts
+									updateAgentPrompt(visualMode, {
+										roleDefinition: value.trim() || undefined,
+									})
+								}
+							}}
+							className="w-full"
+							rows={5}
+							data-testid={`${getCurrentMode()?.slug || "code"}-prompt-textarea`}
+						/>
+					</div>
 
-								{/* Delete mode - disabled for built-in modes */}
-								<StandardTooltip content={t("prompts:createModeDialog.deleteMode")}>
+					{/* Description section */}
+					<div className="mb-4">
+						<div className="flex justify-between items-center mb-1">
+							<div className="font-bold">{t("prompts:description.title")}</div>
+							{!findModeBySlug(visualMode, customModes) && (
+								<StandardTooltip content={t("prompts:description.resetToDefault")}>
 									<Button
 										variant="ghost"
 										size="icon"
 										onClick={() => {
-											const customMode = findModeBySlug(visualMode, customModes)
-											if (customMode) {
-												setModeToDelete({
-													slug: customMode.slug,
-													name: customMode.name,
-													source: customMode.source || "global",
-												})
-												vscode.postMessage({
-													type: "deleteCustomMode",
-													slug: customMode.slug,
-													checkOnly: true,
-												})
+											const currentMode = getCurrentMode()
+											if (currentMode?.slug) {
+												handleAgentReset(currentMode.slug, "description")
 											}
 										}}
-										data-testid="delete-mode-button"
-										disabled={!findModeBySlug(visualMode, customModes)}>
-										<span className="codicon codicon-trash" />
+										data-testid="description-reset">
+										<span className="codicon codicon-discard"></span>
 									</Button>
 								</StandardTooltip>
+							)}
+						</div>
+						<div className="text-sm text-vscode-descriptionForeground mb-2">
+							{t("prompts:description.description")}
+						</div>
+						<VSCodeTextField
+							value={(() => {
+								const customMode = findModeBySlug(visualMode, customModes)
+								const prompt = customModePrompts?.[visualMode] as PromptComponent
+								return customMode?.description ?? prompt?.description ?? getDescription(visualMode)
+							})()}
+							onChange={(e) => {
+								const value =
+									(e as unknown as CustomEvent)?.detail?.target?.value ??
+									((e as any).target as HTMLTextAreaElement).value
+								const customMode = findModeBySlug(visualMode, customModes)
+								if (customMode) {
+									// For custom modes, update the JSON file
+									updateCustomMode(visualMode, {
+										...customMode,
+										description: value.trim() || undefined,
+										source: customMode.source || "global",
+									})
+								} else {
+									// For built-in modes, update the prompts
+									updateAgentPrompt(visualMode, {
+										description: value.trim() || undefined,
+									})
+								}
+							}}
+							className="w-full"
+							data-testid={`${getCurrentMode()?.slug || "code"}-description-textfield`}
+						/>
+					</div>
 
-								{/* Export mode (kept here to the right of the dropdown) */}
-								<StandardTooltip content={t("prompts:exportMode.title")}>
+					{/* When to Use section */}
+					<div className="mb-4">
+						<div className="flex justify-between items-center mb-1">
+							<div className="font-bold">{t("prompts:whenToUse.title")}</div>
+							{!findModeBySlug(visualMode, customModes) && (
+								<StandardTooltip content={t("prompts:whenToUse.resetToDefault")}>
 									<Button
 										variant="ghost"
 										size="icon"
 										onClick={() => {
 											const currentMode = getCurrentMode()
-											if (currentMode?.slug && !isExporting) {
-												setIsExporting(true)
-												vscode.postMessage({
-													type: "exportMode",
-													slug: currentMode.slug,
-												})
+											if (currentMode?.slug) {
+												handleAgentReset(currentMode.slug, "whenToUse")
 											}
 										}}
-										disabled={isExporting}
-										title={t("prompts:exportMode.title")}
-										data-testid="export-mode-toolbar-button">
-										<Upload className="h-4 w-4" />
+										data-testid="when-to-use-reset">
+										<span className="codicon codicon-discard"></span>
 									</Button>
 								</StandardTooltip>
-							</>
-						)}
-					</div>
-
-					{/* API Configuration - Moved Here */}
-					<div className="mb-3">
-						<div className="font-bold mb-1">{t("prompts:apiConfiguration.title")}</div>
+							)}
+						</div>
 						<div className="text-sm text-vscode-descriptionForeground mb-2">
-							{t("prompts:apiConfiguration.select")}
+							{t("prompts:whenToUse.description")}
 						</div>
-						<div className="mb-2">
-							<Select
-								value={currentApiConfigName}
-								onValueChange={(value) => {
-									vscode.postMessage({
-										type: "loadApiConfiguration",
-										text: value,
+						<VSCodeTextArea
+							resize="vertical"
+							value={(() => {
+								const customMode = findModeBySlug(visualMode, customModes)
+								const prompt = customModePrompts?.[visualMode] as PromptComponent
+								return customMode?.whenToUse ?? prompt?.whenToUse ?? getWhenToUse(visualMode)
+							})()}
+							onChange={(e) => {
+								const value =
+									(e as unknown as CustomEvent)?.detail?.target?.value ??
+									((e as any).target as HTMLTextAreaElement).value
+								const customMode = findModeBySlug(visualMode, customModes)
+								if (customMode) {
+									// For custom modes, update the JSON file
+									updateCustomMode(visualMode, {
+										...customMode,
+										whenToUse: value.trim() || undefined,
+										source: customMode.source || "global",
 									})
-								}}>
-								<SelectTrigger className="w-full">
-									<SelectValue placeholder={t("settings:common.select")} />
-								</SelectTrigger>
-								<SelectContent>
-									{(listApiConfigMeta || []).map((config) => (
-										<SelectItem key={config.id} value={config.name}>
-											{config.name}
-										</SelectItem>
-									))}
-								</SelectContent>
-							</Select>
-						</div>
+								} else {
+									// For built-in modes, update the prompts
+									updateAgentPrompt(visualMode, {
+										whenToUse: value.trim() || undefined,
+									})
+								}
+							}}
+							className="w-full"
+							rows={4}
+							data-testid={`${getCurrentMode()?.slug || "code"}-when-to-use-textarea`}
+						/>
 					</div>
-				</div>
 
-				{/* Role Definition section */}
-				<div className="mb-4">
-					<div className="flex justify-between items-center mb-1">
-						<div className="font-bold">{t("prompts:roleDefinition.title")}</div>
-						{!findModeBySlug(visualMode, customModes) && (
-							<StandardTooltip content={t("prompts:roleDefinition.resetToDefault")}>
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => {
+					{/* Mode settings */}
+					<>
+						{/* Show tools for all modes */}
+						<div className="mb-4">
+							<div className="flex justify-between items-center mb-1">
+								<div className="font-bold">{t("prompts:tools.title")}</div>
+								{findModeBySlug(visualMode, customModes) && (
+									<StandardTooltip
+										content={
+											isToolsEditMode
+												? t("prompts:tools.doneEditing")
+												: t("prompts:tools.editTools")
+										}>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={() => setIsToolsEditMode(!isToolsEditMode)}>
+											<span
+												className={`codicon codicon-${isToolsEditMode ? "check" : "edit"}`}></span>
+										</Button>
+									</StandardTooltip>
+								)}
+							</div>
+							{!findModeBySlug(visualMode, customModes) && (
+								<div className="text-sm text-vscode-descriptionForeground mb-2">
+									{t("prompts:tools.builtInModesText")}
+								</div>
+							)}
+							{isToolsEditMode && findModeBySlug(visualMode, customModes) ? (
+								<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2">
+									{availableGroups.map((group) => {
 										const currentMode = getCurrentMode()
-										if (currentMode?.slug) {
-											handleAgentReset(currentMode.slug, "roleDefinition")
-										}
-									}}
-									data-testid="role-definition-reset">
-									<span className="codicon codicon-discard"></span>
-								</Button>
-							</StandardTooltip>
-						)}
-					</div>
-					<div className="text-sm text-vscode-descriptionForeground mb-2">
-						{t("prompts:roleDefinition.description")}
-					</div>
-					<VSCodeTextArea
-						resize="vertical"
-						value={(() => {
-							const customMode = findModeBySlug(visualMode, customModes)
-							const prompt = customModePrompts?.[visualMode] as PromptComponent
-							return customMode?.roleDefinition ?? prompt?.roleDefinition ?? getRoleDefinition(visualMode)
-						})()}
-						onChange={(e) => {
-							const value =
-								(e as unknown as CustomEvent)?.detail?.target?.value ??
-								((e as any).target as HTMLTextAreaElement).value
-							const customMode = findModeBySlug(visualMode, customModes)
-							if (customMode) {
-								// For custom modes, update the JSON file
-								updateCustomMode(visualMode, {
-									...customMode,
-									roleDefinition: value.trim() || "",
-									source: customMode.source || "global",
-								})
-							} else {
-								// For built-in modes, update the prompts
-								updateAgentPrompt(visualMode, {
-									roleDefinition: value.trim() || undefined,
-								})
-							}
-						}}
-						className="w-full"
-						rows={5}
-						data-testid={`${getCurrentMode()?.slug || "code"}-prompt-textarea`}
-					/>
-				</div>
-
-				{/* Description section */}
-				<div className="mb-4">
-					<div className="flex justify-between items-center mb-1">
-						<div className="font-bold">{t("prompts:description.title")}</div>
-						{!findModeBySlug(visualMode, customModes) && (
-							<StandardTooltip content={t("prompts:description.resetToDefault")}>
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => {
+										const isCustomMode = findModeBySlug(visualMode, customModes)
+										const customMode = isCustomMode
+										const isGroupEnabled = isCustomMode
+											? customMode?.groups?.some((g) => getGroupName(g) === group)
+											: currentMode?.groups?.some((g) => getGroupName(g) === group)
+
+										return (
+											<VSCodeCheckbox
+												key={group}
+												checked={isGroupEnabled}
+												onChange={handleGroupChange(group, Boolean(isCustomMode), customMode)}
+												disabled={!isCustomMode}>
+												{t(`prompts:tools.toolNames.${group}`)}
+												{group === "edit" && (
+													<div className="text-xs text-vscode-descriptionForeground mt-0.5">
+														{t("prompts:tools.allowedFiles")}{" "}
+														{(() => {
+															const currentMode = getCurrentMode()
+															const editGroup = currentMode?.groups?.find(
+																(g) =>
+																	Array.isArray(g) &&
+																	g[0] === "edit" &&
+																	g[1]?.fileRegex,
+															)
+															if (!Array.isArray(editGroup)) return t("prompts:allFiles")
+															return (
+																editGroup[1].description ||
+																`/${editGroup[1].fileRegex}/`
+															)
+														})()}
+													</div>
+												)}
+											</VSCodeCheckbox>
+										)
+									})}
+								</div>
+							) : (
+								<div className="text-sm text-vscode-foreground mb-2 leading-relaxed">
+									{(() => {
 										const currentMode = getCurrentMode()
-										if (currentMode?.slug) {
-											handleAgentReset(currentMode.slug, "description")
-										}
-									}}
-									data-testid="description-reset">
-									<span className="codicon codicon-discard"></span>
-								</Button>
-							</StandardTooltip>
-						)}
-					</div>
-					<div className="text-sm text-vscode-descriptionForeground mb-2">
-						{t("prompts:description.description")}
-					</div>
-					<VSCodeTextField
-						value={(() => {
-							const customMode = findModeBySlug(visualMode, customModes)
-							const prompt = customModePrompts?.[visualMode] as PromptComponent
-							return customMode?.description ?? prompt?.description ?? getDescription(visualMode)
-						})()}
-						onChange={(e) => {
-							const value =
-								(e as unknown as CustomEvent)?.detail?.target?.value ??
-								((e as any).target as HTMLTextAreaElement).value
-							const customMode = findModeBySlug(visualMode, customModes)
-							if (customMode) {
-								// For custom modes, update the JSON file
-								updateCustomMode(visualMode, {
-									...customMode,
-									description: value.trim() || undefined,
-									source: customMode.source || "global",
-								})
-							} else {
-								// For built-in modes, update the prompts
-								updateAgentPrompt(visualMode, {
-									description: value.trim() || undefined,
-								})
-							}
-						}}
-						className="w-full"
-						data-testid={`${getCurrentMode()?.slug || "code"}-description-textfield`}
-					/>
-				</div>
+										const enabledGroups = currentMode?.groups || []
 
-				{/* When to Use section */}
-				<div className="mb-4">
-					<div className="flex justify-between items-center mb-1">
-						<div className="font-bold">{t("prompts:whenToUse.title")}</div>
-						{!findModeBySlug(visualMode, customModes) && (
-							<StandardTooltip content={t("prompts:whenToUse.resetToDefault")}>
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => {
-										const currentMode = getCurrentMode()
-										if (currentMode?.slug) {
-											handleAgentReset(currentMode.slug, "whenToUse")
+										// If there are no enabled groups, display translated "None"
+										if (enabledGroups.length === 0) {
+											return t("prompts:tools.noTools")
 										}
-									}}
-									data-testid="when-to-use-reset">
-									<span className="codicon codicon-discard"></span>
-								</Button>
-							</StandardTooltip>
-						)}
-					</div>
-					<div className="text-sm text-vscode-descriptionForeground mb-2">
-						{t("prompts:whenToUse.description")}
-					</div>
-					<VSCodeTextArea
-						resize="vertical"
-						value={(() => {
-							const customMode = findModeBySlug(visualMode, customModes)
-							const prompt = customModePrompts?.[visualMode] as PromptComponent
-							return customMode?.whenToUse ?? prompt?.whenToUse ?? getWhenToUse(visualMode)
-						})()}
-						onChange={(e) => {
-							const value =
-								(e as unknown as CustomEvent)?.detail?.target?.value ??
-								((e as any).target as HTMLTextAreaElement).value
-							const customMode = findModeBySlug(visualMode, customModes)
-							if (customMode) {
-								// For custom modes, update the JSON file
-								updateCustomMode(visualMode, {
-									...customMode,
-									whenToUse: value.trim() || undefined,
-									source: customMode.source || "global",
-								})
-							} else {
-								// For built-in modes, update the prompts
-								updateAgentPrompt(visualMode, {
-									whenToUse: value.trim() || undefined,
-								})
-							}
-						}}
-						className="w-full"
-						rows={4}
-						data-testid={`${getCurrentMode()?.slug || "code"}-when-to-use-textarea`}
-					/>
-				</div>
 
-				{/* Mode settings */}
-				<>
-					{/* Show tools for all modes */}
-					<div className="mb-4">
+										return enabledGroups
+											.map((group) => {
+												const groupName = getGroupName(group)
+												const displayName = t(`prompts:tools.toolNames.${groupName}`)
+												if (Array.isArray(group) && group[1]?.fileRegex) {
+													const description =
+														group[1].description || `/${group[1].fileRegex}/`
+													return `${displayName} (${description})`
+												}
+												return displayName
+											})
+											.join(", ")
+									})()}
+								</div>
+							)}
+						</div>
+					</>
+
+					{/* Role definition for both built-in and custom modes */}
+					<div className="mb-2">
 						<div className="flex justify-between items-center mb-1">
-							<div className="font-bold">{t("prompts:tools.title")}</div>
-							{findModeBySlug(visualMode, customModes) && (
-								<StandardTooltip
-									content={
-										isToolsEditMode ? t("prompts:tools.doneEditing") : t("prompts:tools.editTools")
-									}>
+							<div className="font-bold">{t("prompts:customInstructions.title")}</div>
+							{!findModeBySlug(visualMode, customModes) && (
+								<StandardTooltip content={t("prompts:customInstructions.resetToDefault")}>
 									<Button
 										variant="ghost"
 										size="icon"
-										onClick={() => setIsToolsEditMode(!isToolsEditMode)}>
-										<span
-											className={`codicon codicon-${isToolsEditMode ? "check" : "edit"}`}></span>
+										onClick={() => {
+											const currentMode = getCurrentMode()
+											if (currentMode?.slug) {
+												handleAgentReset(currentMode.slug, "customInstructions")
+											}
+										}}
+										data-testid="custom-instructions-reset">
+										<span className="codicon codicon-discard"></span>
 									</Button>
 								</StandardTooltip>
 							)}
 						</div>
-						{!findModeBySlug(visualMode, customModes) && (
-							<div className="text-sm text-vscode-descriptionForeground mb-2">
-								{t("prompts:tools.builtInModesText")}
-							</div>
-						)}
-						{isToolsEditMode && findModeBySlug(visualMode, customModes) ? (
-							<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2">
-								{availableGroups.map((group) => {
-									const currentMode = getCurrentMode()
-									const isCustomMode = findModeBySlug(visualMode, customModes)
-									const customMode = isCustomMode
-									const isGroupEnabled = isCustomMode
-										? customMode?.groups?.some((g) => getGroupName(g) === group)
-										: currentMode?.groups?.some((g) => getGroupName(g) === group)
-
-									return (
-										<VSCodeCheckbox
-											key={group}
-											checked={isGroupEnabled}
-											onChange={handleGroupChange(group, Boolean(isCustomMode), customMode)}
-											disabled={!isCustomMode}>
-											{t(`prompts:tools.toolNames.${group}`)}
-											{group === "edit" && (
-												<div className="text-xs text-vscode-descriptionForeground mt-0.5">
-													{t("prompts:tools.allowedFiles")}{" "}
-													{(() => {
-														const currentMode = getCurrentMode()
-														const editGroup = currentMode?.groups?.find(
-															(g) =>
-																Array.isArray(g) && g[0] === "edit" && g[1]?.fileRegex,
-														)
-														if (!Array.isArray(editGroup)) return t("prompts:allFiles")
-														return editGroup[1].description || `/${editGroup[1].fileRegex}/`
-													})()}
-												</div>
-											)}
-										</VSCodeCheckbox>
-									)
-								})}
-							</div>
-						) : (
-							<div className="text-sm text-vscode-foreground mb-2 leading-relaxed">
-								{(() => {
-									const currentMode = getCurrentMode()
-									const enabledGroups = currentMode?.groups || []
-
-									// If there are no enabled groups, display translated "None"
-									if (enabledGroups.length === 0) {
-										return t("prompts:tools.noTools")
-									}
-
-									return enabledGroups
-										.map((group) => {
-											const groupName = getGroupName(group)
-											const displayName = t(`prompts:tools.toolNames.${groupName}`)
-											if (Array.isArray(group) && group[1]?.fileRegex) {
-												const description = group[1].description || `/${group[1].fileRegex}/`
-												return `${displayName} (${description})`
-											}
-											return displayName
-										})
-										.join(", ")
-								})()}
-							</div>
-						)}
-					</div>
-				</>
-
-				{/* Role definition for both built-in and custom modes */}
-				<div className="mb-2">
-					<div className="flex justify-between items-center mb-1">
-						<div className="font-bold">{t("prompts:customInstructions.title")}</div>
-						{!findModeBySlug(visualMode, customModes) && (
-							<StandardTooltip content={t("prompts:customInstructions.resetToDefault")}>
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => {
-										const currentMode = getCurrentMode()
-										if (currentMode?.slug) {
-											handleAgentReset(currentMode.slug, "customInstructions")
-										}
-									}}
-									data-testid="custom-instructions-reset">
-									<span className="codicon codicon-discard"></span>
-								</Button>
-							</StandardTooltip>
-						)}
-					</div>
-					<div className="text-[13px] text-vscode-descriptionForeground mb-2">
-						{t("prompts:customInstructions.description", {
-							modeName: getCurrentMode()?.name || "Code",
-						})}
-					</div>
-					<VSCodeTextArea
-						resize="vertical"
-						value={(() => {
-							const customMode = findModeBySlug(visualMode, customModes)
-							const prompt = customModePrompts?.[visualMode] as PromptComponent
-							return (
-								customMode?.customInstructions ??
-								prompt?.customInstructions ??
-								getCustomInstructions(visualMode, customModes)
-							)
-						})()}
-						onChange={(e) => {
-							const value =
-								(e as unknown as CustomEvent)?.detail?.target?.value ??
-								((e as any).target as HTMLTextAreaElement).value
-							const customMode = findModeBySlug(visualMode, customModes)
-							if (customMode) {
-								// For custom modes, update the JSON file
-								updateCustomMode(visualMode, {
-									...customMode,
-									// Preserve empty string; only treat null/undefined as unset
-									customInstructions: value ?? undefined,
-									source: customMode.source || "global",
-								})
-							} else {
-								// For built-in modes, update the prompts
-								const existingPrompt = customModePrompts?.[visualMode] as PromptComponent
-								updateAgentPrompt(visualMode, {
-									...existingPrompt,
-									customInstructions: value.trim() || undefined,
-								})
-							}
-						}}
-						rows={10}
-						className="w-full"
-						data-testid={`${getCurrentMode()?.slug || "code"}-custom-instructions-textarea`}
-					/>
-					<div className="text-xs text-vscode-descriptionForeground mt-1.5">
-						<Trans
-							i18nKey="prompts:customInstructions.loadFromFile"
-							values={{
-								mode: getCurrentMode()?.name || "Code",
-								slug: getCurrentMode()?.slug || "code",
-							}}
-							components={{
-								span: (
-									<span
-										className="text-vscode-textLink-foreground cursor-pointer underline"
-										onClick={() => {
-											const currentMode = getCurrentMode()
-											if (!currentMode) return
-
-											// Open or create an empty file
-											vscode.postMessage({
-												type: "openFile",
-												text: `./.roo/rules-${currentMode.slug}/rules.md`,
-												values: {
-													create: true,
-													content: "",
-												},
-											})
-										}}
-									/>
-								),
-								"0": (
-									<VSCodeLink
-										href={buildDocLink(
-											"features/custom-instructions#global-rules-directory",
-											"prompts_mode_specific_global_rules",
-										)}
-										style={{ display: "inline" }}
-										aria-label="Learn about global custom instructions for modes"
-									/>
-								),
+						<div className="text-[13px] text-vscode-descriptionForeground mb-2">
+							{t("prompts:customInstructions.description", {
+								modeName: getCurrentMode()?.name || "Code",
+							})}
+						</div>
+						<VSCodeTextArea
+							resize="vertical"
+							value={(() => {
+								const customMode = findModeBySlug(visualMode, customModes)
+								const prompt = customModePrompts?.[visualMode] as PromptComponent
+								return (
+									customMode?.customInstructions ??
+									prompt?.customInstructions ??
+									getCustomInstructions(visualMode, customModes)
+								)
+							})()}
+							onChange={(e) => {
+								const value =
+									(e as unknown as CustomEvent)?.detail?.target?.value ??
+									((e as any).target as HTMLTextAreaElement).value
+								const customMode = findModeBySlug(visualMode, customModes)
+								if (customMode) {
+									// For custom modes, update the JSON file
+									updateCustomMode(visualMode, {
+										...customMode,
+										// Preserve empty string; only treat null/undefined as unset
+										customInstructions: value ?? undefined,
+										source: customMode.source || "global",
+									})
+								} else {
+									// For built-in modes, update the prompts
+									const existingPrompt = customModePrompts?.[visualMode] as PromptComponent
+									updateAgentPrompt(visualMode, {
+										...existingPrompt,
+										customInstructions: value.trim() || undefined,
+									})
+								}
 							}}
+							rows={10}
+							className="w-full"
+							data-testid={`${getCurrentMode()?.slug || "code"}-custom-instructions-textarea`}
 						/>
+						<div className="text-xs text-vscode-descriptionForeground mt-1.5">
+							<Trans
+								i18nKey="prompts:customInstructions.loadFromFile"
+								values={{
+									mode: getCurrentMode()?.name || "Code",
+									slug: getCurrentMode()?.slug || "code",
+								}}
+								components={{
+									span: (
+										<span
+											className="text-vscode-textLink-foreground cursor-pointer underline"
+											onClick={() => {
+												const currentMode = getCurrentMode()
+												if (!currentMode) return
+
+												// Open or create an empty file
+												vscode.postMessage({
+													type: "openFile",
+													text: `./.roo/rules-${currentMode.slug}/rules.md`,
+													values: {
+														create: true,
+														content: "",
+													},
+												})
+											}}
+										/>
+									),
+									"0": (
+										<VSCodeLink
+											href={buildDocLink(
+												"features/custom-instructions#global-rules-directory",
+												"prompts_mode_specific_global_rules",
+											)}
+											style={{ display: "inline" }}
+											aria-label="Learn about global custom instructions for modes"
+										/>
+									),
+								}}
+							/>
+						</div>
 					</div>
-				</div>
 
-				<div className="pb-4 border-b border-vscode-input-border">
-					<div className="flex gap-2 mb-4">
-						<Button
-							variant="primary"
-							onClick={() => {
-								const currentMode = getCurrentMode()
-								if (currentMode) {
-									vscode.postMessage({
-										type: "getSystemPrompt",
-										mode: currentMode.slug,
-									})
-								}
-							}}
-							data-testid="preview-prompt-button">
-							{t("prompts:systemPrompt.preview")}
-						</Button>
-						<StandardTooltip content={t("prompts:systemPrompt.copy")}>
+					<div className="pb-4 border-b border-vscode-input-border">
+						<div className="flex gap-2 mb-4">
 							<Button
-								variant="ghost"
-								size="icon"
+								variant="primary"
 								onClick={() => {
 									const currentMode = getCurrentMode()
 									if (currentMode) {
 										vscode.postMessage({
-											type: "copySystemPrompt",
+											type: "getSystemPrompt",
 											mode: currentMode.slug,
 										})
 									}
 								}}
-								data-testid="copy-prompt-button">
-								<span className="codicon codicon-copy"></span>
+								data-testid="preview-prompt-button">
+								{t("prompts:systemPrompt.preview")}
 							</Button>
-						</StandardTooltip>
-					</div>
+							<StandardTooltip content={t("prompts:systemPrompt.copy")}>
+								<Button
+									variant="ghost"
+									size="icon"
+									onClick={() => {
+										const currentMode = getCurrentMode()
+										if (currentMode) {
+											vscode.postMessage({
+												type: "copySystemPrompt",
+												mode: currentMode.slug,
+											})
+										}
+									}}
+									data-testid="copy-prompt-button">
+									<span className="codicon codicon-copy"></span>
+								</Button>
+							</StandardTooltip>
+						</div>
 
-					{/* Advanced Features Disclosure */}
-					<div className="mt-4">
-						<button
-							onClick={() => setIsSystemPromptDisclosureOpen(!isSystemPromptDisclosureOpen)}
-							className="flex items-center text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none"
-							aria-expanded={isSystemPromptDisclosureOpen}>
-							<span
-								className={`codicon codicon-${isSystemPromptDisclosureOpen ? "chevron-down" : "chevron-right"} mr-1`}></span>
-							<span>{t("prompts:advanced.title")}</span>
-						</button>
-
-						{isSystemPromptDisclosureOpen && (
-							<div className="mt-2 ml-5 space-y-4">
-								{/* Override System Prompt Section */}
-								<div>
-									<h4 className="text-xs font-semibold text-vscode-foreground mb-2">
-										Override System Prompt
-									</h4>
-									<div className="text-xs text-vscode-descriptionForeground">
-										<Trans
-											i18nKey="prompts:advancedSystemPrompt.description"
-											values={{
-												slug: getCurrentMode()?.slug || "code",
-											}}
-											components={{
-												span: (
-													<span
-														className="text-vscode-textLink-foreground cursor-pointer underline"
-														onClick={() => {
-															const currentMode = getCurrentMode()
-															if (!currentMode) return
-
-															vscode.postMessage({
-																type: "openFile",
-																text: `./.roo/system-prompt-${currentMode.slug}`,
-																values: {
-																	create: true,
-																	content: "",
-																},
-															})
-														}}
-													/>
-												),
-												"1": (
-													<VSCodeLink
-														href={buildDocLink(
-															"features/footgun-prompting",
-															"prompts_advanced_system_prompt",
-														)}
-														style={{ display: "inline" }}
-														aria-label="Read important information about overriding system prompts"></VSCodeLink>
-												),
-												"2": <strong />,
-											}}
-										/>
+						{/* Advanced Features Disclosure */}
+						<div className="mt-4">
+							<button
+								onClick={() => setIsSystemPromptDisclosureOpen(!isSystemPromptDisclosureOpen)}
+								className="flex items-center text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none"
+								aria-expanded={isSystemPromptDisclosureOpen}>
+								<span
+									className={`codicon codicon-${isSystemPromptDisclosureOpen ? "chevron-down" : "chevron-right"} mr-1`}></span>
+								<span>{t("prompts:advanced.title")}</span>
+							</button>
+
+							{isSystemPromptDisclosureOpen && (
+								<div className="mt-2 ml-5 space-y-4">
+									{/* Override System Prompt Section */}
+									<div>
+										<h4 className="text-xs font-semibold text-vscode-foreground mb-2">
+											Override System Prompt
+										</h4>
+										<div className="text-xs text-vscode-descriptionForeground">
+											<Trans
+												i18nKey="prompts:advancedSystemPrompt.description"
+												values={{
+													slug: getCurrentMode()?.slug || "code",
+												}}
+												components={{
+													span: (
+														<span
+															className="text-vscode-textLink-foreground cursor-pointer underline"
+															onClick={() => {
+																const currentMode = getCurrentMode()
+																if (!currentMode) return
+
+																vscode.postMessage({
+																	type: "openFile",
+																	text: `./.roo/system-prompt-${currentMode.slug}`,
+																	values: {
+																		create: true,
+																		content: "",
+																	},
+																})
+															}}
+														/>
+													),
+													"1": (
+														<VSCodeLink
+															href={buildDocLink(
+																"features/footgun-prompting",
+																"prompts_advanced_system_prompt",
+															)}
+															style={{ display: "inline" }}
+															aria-label="Read important information about overriding system prompts"></VSCodeLink>
+													),
+													"2": <strong />,
+												}}
+											/>
+										</div>
 									</div>
 								</div>
-							</div>
-						)}
+							)}
+						</div>
 					</div>
-				</div>
 
-				<div className="pb-5">
-					<h3 className="text-vscode-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
+					<div className="pb-5">
+						<h3 className="text-vscode-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
 
-					<div className="text-sm text-vscode-descriptionForeground mb-2">
-						<Trans i18nKey="prompts:globalCustomInstructions.description">
-							<VSCodeLink
-								href={buildDocLink(
-									"features/custom-instructions#setting-up-global-rules",
-									"prompts_global_custom_instructions",
-								)}
-								style={{ display: "inline" }}
-								aria-label="Learn more about global custom instructions"></VSCodeLink>
-						</Trans>
-					</div>
-					<VSCodeTextArea
-						resize="vertical"
-						value={customInstructions || ""}
-						onChange={(e) => {
-							const value =
-								(e as unknown as CustomEvent)?.detail?.target?.value ??
-								((e as any).target as HTMLTextAreaElement).value
-							setCustomInstructions(value ?? undefined)
-							vscode.postMessage({
-								type: "customInstructions",
-								text: value ?? undefined,
-							})
-						}}
-						rows={4}
-						className="w-full"
-						data-testid="global-custom-instructions-textarea"
-					/>
-					<div className="text-xs text-vscode-descriptionForeground mt-1.5">
-						<Trans
-							i18nKey="prompts:globalCustomInstructions.loadFromFile"
-							components={{
-								span: (
-									<span
-										className="text-vscode-textLink-foreground cursor-pointer underline"
-										onClick={() =>
-											vscode.postMessage({
-												type: "openFile",
-												text: "./.roo/rules/rules.md",
-												values: {
-													create: true,
-													content: "",
-												},
-											})
-										}
-									/>
-								),
-								"0": (
-									<VSCodeLink
-										href={buildDocLink(
-											"features/custom-instructions#setting-up-global-rules",
-											"prompts_global_rules",
-										)}
-										style={{ display: "inline" }}
-										aria-label="Learn about setting up global custom instructions"
-									/>
-								),
+						<div className="text-sm text-vscode-descriptionForeground mb-2">
+							<Trans i18nKey="prompts:globalCustomInstructions.description">
+								<VSCodeLink
+									href={buildDocLink(
+										"features/custom-instructions#setting-up-global-rules",
+										"prompts_global_custom_instructions",
+									)}
+									style={{ display: "inline" }}
+									aria-label="Learn more about global custom instructions"></VSCodeLink>
+							</Trans>
+						</div>
+						<VSCodeTextArea
+							resize="vertical"
+							value={customInstructions || ""}
+							onChange={(e) => {
+								const value =
+									(e as unknown as CustomEvent)?.detail?.target?.value ??
+									((e as any).target as HTMLTextAreaElement).value
+								setCustomInstructions(value ?? undefined)
+								vscode.postMessage({
+									type: "customInstructions",
+									text: value ?? undefined,
+								})
 							}}
+							rows={4}
+							className="w-full"
+							data-testid="global-custom-instructions-textarea"
 						/>
+						<div className="text-xs text-vscode-descriptionForeground mt-1.5">
+							<Trans
+								i18nKey="prompts:globalCustomInstructions.loadFromFile"
+								components={{
+									span: (
+										<span
+											className="text-vscode-textLink-foreground cursor-pointer underline"
+											onClick={() =>
+												vscode.postMessage({
+													type: "openFile",
+													text: "./.roo/rules/rules.md",
+													values: {
+														create: true,
+														content: "",
+													},
+												})
+											}
+										/>
+									),
+									"0": (
+										<VSCodeLink
+											href={buildDocLink(
+												"features/custom-instructions#setting-up-global-rules",
+												"prompts_global_rules",
+											)}
+											style={{ display: "inline" }}
+											aria-label="Learn about setting up global custom instructions"
+										/>
+									),
+								}}
+							/>
+						</div>
 					</div>
-				</div>
-			</TabContent>
+				</TabContent>
+			</Section>
 
 			{isCreateModeDialogOpen && (
 				<div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]">
@@ -1765,7 +1779,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 					}
 				}}
 			/>
-		</Tab>
+		</div>
 	)
 }
 
diff --git a/webview-ui/src/components/modes/__tests__/ModesView.import-switch.spec.tsx b/webview-ui/src/components/modes/__tests__/ModesView.import-switch.spec.tsx
index b62fc885636..2bd4ea096df 100644
--- a/webview-ui/src/components/modes/__tests__/ModesView.import-switch.spec.tsx
+++ b/webview-ui/src/components/modes/__tests__/ModesView.import-switch.spec.tsx
@@ -30,10 +30,9 @@ const mockExtensionState = {
 }
 
 const renderModesView = (props = {}) => {
-	const mockOnDone = vitest.fn()
 	return render(
 		<ExtensionStateContext.Provider value={{ ...mockExtensionState, ...props } as any}>
-			<ModesView onDone={mockOnDone} />
+			<ModesView />
 		</ExtensionStateContext.Provider>,
 	)
 }
diff --git a/webview-ui/src/components/modes/__tests__/ModesView.spec.tsx b/webview-ui/src/components/modes/__tests__/ModesView.spec.tsx
index 1a30ae079f1..25dc7fb8e16 100644
--- a/webview-ui/src/components/modes/__tests__/ModesView.spec.tsx
+++ b/webview-ui/src/components/modes/__tests__/ModesView.spec.tsx
@@ -29,10 +29,9 @@ const mockExtensionState = {
 }
 
 const renderPromptsView = (props = {}) => {
-	const mockOnDone = vitest.fn()
 	return render(
 		<ExtensionStateContext.Provider value={{ ...mockExtensionState, ...props } as any}>
-			<ModesView onDone={mockOnDone} />
+			<ModesView />
 		</ExtensionStateContext.Provider>,
 	)
 }
@@ -128,7 +127,7 @@ describe("PromptsView", () => {
 		const { unmount } = render(
 			<ExtensionStateContext.Provider
 				value={{ ...mockExtensionState, mode: "code", customModes: [customMode] } as any}>
-				<ModesView onDone={vitest.fn()} />
+				<ModesView />
 			</ExtensionStateContext.Provider>,
 		)
 
@@ -154,7 +153,7 @@ describe("PromptsView", () => {
 		render(
 			<ExtensionStateContext.Provider
 				value={{ ...mockExtensionState, mode: "custom-mode", customModes: [customMode] } as any}>
-				<ModesView onDone={vitest.fn()} />
+				<ModesView />
 			</ExtensionStateContext.Provider>,
 		)
 
@@ -175,7 +174,7 @@ describe("PromptsView", () => {
 		const { unmount } = render(
 			<ExtensionStateContext.Provider
 				value={{ ...mockExtensionState, mode: "code", customModes: [customMode] } as any}>
-				<ModesView onDone={vitest.fn()} />
+				<ModesView />
 			</ExtensionStateContext.Provider>,
 		)
 
@@ -190,7 +189,7 @@ describe("PromptsView", () => {
 		render(
 			<ExtensionStateContext.Provider
 				value={{ ...mockExtensionState, mode: "custom-mode", customModes: [customMode] } as any}>
-				<ModesView onDone={vitest.fn()} />
+				<ModesView />
 			</ExtensionStateContext.Provider>,
 		)
 
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index dc1f1ae5ae0..4e0dc638b7f 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/webview-ui/src/components/settings/SettingsView.tsx
@@ -25,6 +25,9 @@ import {
 	LucideIcon,
 	SquareSlash,
 	Glasses,
+	Plug,
+	Server,
+	Users2,
 } from "lucide-react"
 
 import {
@@ -74,6 +77,8 @@ import { Section } from "./Section"
 import PromptsSettings from "./PromptsSettings"
 import { SlashCommandsSettings } from "./SlashCommandsSettings"
 import { UISettings } from "./UISettings"
+import ModesView from "../modes/ModesView"
+import McpView from "../mcp/McpView"
 
 export const settingsTabsContainer = "flex flex-1 overflow-hidden [&.narrow_.tab-label]:hidden"
 export const settingsTabList =
@@ -95,6 +100,8 @@ const sectionNames = [
 	"notifications",
 	"contextManagement",
 	"terminal",
+	"modes",
+	"mcp",
 	"prompts",
 	"ui",
 	"experimental",
@@ -501,7 +508,9 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 
 	const sections: { id: SectionName; icon: LucideIcon }[] = useMemo(
 		() => [
-			{ id: "providers", icon: Webhook },
+			{ id: "providers", icon: Plug },
+			{ id: "modes", icon: Users2 },
+			{ id: "mcp", icon: Server },
 			{ id: "autoApprove", icon: CheckCheck },
 			{ id: "slashCommands", icon: SquareSlash },
 			{ id: "browser", icon: SquareMousePointer },
@@ -614,7 +623,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 									isSelected // Use manual isSelected for styling
 										? `${settingsTabTrigger} ${settingsTabTriggerActive}`
 										: settingsTabTrigger,
-									"focus:ring-0", // Remove the focus ring styling
+									"cursor-pointer focus:ring-0", // Remove the focus ring styling
 								)}
 								data-testid={`tab-${id}`}
 								data-compact={isCompactMode}>
@@ -802,6 +811,12 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 						/>
 					)}
 
+					{/* Modes Section */}
+					{activeTab === "modes" && <ModesView />}
+
+					{/* MCP Section */}
+					{activeTab === "mcp" && <McpView />}
+
 					{/* Prompts Section */}
 					{activeTab === "prompts" && (
 						<PromptsSettings
diff --git a/webview-ui/src/i18n/locales/ca/settings.json b/webview-ui/src/i18n/locales/ca/settings.json
index 75feccd2ddb..0783e46dc2f 100644
--- a/webview-ui/src/i18n/locales/ca/settings.json
+++ b/webview-ui/src/i18n/locales/ca/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Proveïdors",
+		"modes": "Modes",
+		"mcp": "Servidors MCP",
 		"autoApprove": "Auto-aprovació",
 		"browser": "Accés a l'ordinador",
 		"checkpoints": "Punts de control",
diff --git a/webview-ui/src/i18n/locales/de/settings.json b/webview-ui/src/i18n/locales/de/settings.json
index 2b380115780..537f043e221 100644
--- a/webview-ui/src/i18n/locales/de/settings.json
+++ b/webview-ui/src/i18n/locales/de/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Anbieter",
+		"modes": "Modi",
+		"mcp": "MCP-Server",
 		"autoApprove": "Auto-Genehmigung",
 		"browser": "Computerzugriff",
 		"checkpoints": "Kontrollpunkte",
diff --git a/webview-ui/src/i18n/locales/en/settings.json b/webview-ui/src/i18n/locales/en/settings.json
index 7548d44be19..db0bb510266 100644
--- a/webview-ui/src/i18n/locales/en/settings.json
+++ b/webview-ui/src/i18n/locales/en/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Providers",
+		"modes": "Modes",
+		"mcp": "MCP Servers",
 		"autoApprove": "Auto-Approve",
 		"browser": "Browser",
 		"checkpoints": "Checkpoints",
diff --git a/webview-ui/src/i18n/locales/es/settings.json b/webview-ui/src/i18n/locales/es/settings.json
index 8519938d4af..54249b54515 100644
--- a/webview-ui/src/i18n/locales/es/settings.json
+++ b/webview-ui/src/i18n/locales/es/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Proveedores",
+		"modes": "Modos",
+		"mcp": "Servidores MCP",
 		"autoApprove": "Auto-aprobación",
 		"browser": "Acceso al ordenador",
 		"checkpoints": "Puntos de control",
diff --git a/webview-ui/src/i18n/locales/fr/settings.json b/webview-ui/src/i18n/locales/fr/settings.json
index 13f54eb59fd..82dde2b7769 100644
--- a/webview-ui/src/i18n/locales/fr/settings.json
+++ b/webview-ui/src/i18n/locales/fr/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Fournisseurs",
+		"modes": "Modes",
+		"mcp": "Serveurs MCP",
 		"autoApprove": "Auto-approbation",
 		"browser": "Accès ordinateur",
 		"checkpoints": "Points de contrôle",
diff --git a/webview-ui/src/i18n/locales/hi/settings.json b/webview-ui/src/i18n/locales/hi/settings.json
index b9ceadc55bf..88b61106f33 100644
--- a/webview-ui/src/i18n/locales/hi/settings.json
+++ b/webview-ui/src/i18n/locales/hi/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "प्रदाता",
+		"modes": "मोड",
+		"mcp": "एमसीपी सर्वर",
 		"autoApprove": "अनुमोदन",
 		"browser": "ब्राउज़र",
 		"checkpoints": "चेकपॉइंट",
diff --git a/webview-ui/src/i18n/locales/id/settings.json b/webview-ui/src/i18n/locales/id/settings.json
index 2426f8be3cf..85b73958b2c 100644
--- a/webview-ui/src/i18n/locales/id/settings.json
+++ b/webview-ui/src/i18n/locales/id/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Provider",
+		"modes": "Mode",
+		"mcp": "Server MCP",
 		"autoApprove": "Auto-Approve",
 		"browser": "Browser",
 		"checkpoints": "Checkpoint",
diff --git a/webview-ui/src/i18n/locales/it/settings.json b/webview-ui/src/i18n/locales/it/settings.json
index 752b8a6dd20..960e3358456 100644
--- a/webview-ui/src/i18n/locales/it/settings.json
+++ b/webview-ui/src/i18n/locales/it/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Fornitori",
+		"modes": "Modalità",
+		"mcp": "Server MCP",
 		"autoApprove": "Auto-approvazione",
 		"browser": "Accesso computer",
 		"checkpoints": "Punti di controllo",
diff --git a/webview-ui/src/i18n/locales/ja/settings.json b/webview-ui/src/i18n/locales/ja/settings.json
index 9281f3be15a..e2dbb677b14 100644
--- a/webview-ui/src/i18n/locales/ja/settings.json
+++ b/webview-ui/src/i18n/locales/ja/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "プロバイダー",
+		"modes": "モード",
+		"mcp": "MCPサーバー",
 		"autoApprove": "自動承認",
 		"browser": "コンピューターアクセス",
 		"checkpoints": "チェックポイント",
diff --git a/webview-ui/src/i18n/locales/ko/settings.json b/webview-ui/src/i18n/locales/ko/settings.json
index c555b81f243..4bf7e970429 100644
--- a/webview-ui/src/i18n/locales/ko/settings.json
+++ b/webview-ui/src/i18n/locales/ko/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "공급자",
+		"modes": "모드",
+		"mcp": "MCP 서버",
 		"autoApprove": "자동 승인",
 		"browser": "컴퓨터 접근",
 		"checkpoints": "체크포인트",
diff --git a/webview-ui/src/i18n/locales/nl/settings.json b/webview-ui/src/i18n/locales/nl/settings.json
index 01da609400c..d3e1f3335c5 100644
--- a/webview-ui/src/i18n/locales/nl/settings.json
+++ b/webview-ui/src/i18n/locales/nl/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Providers",
+		"modes": "Modi",
+		"mcp": "MCP-servers",
 		"autoApprove": "Auto-goedkeuren",
 		"browser": "Browser",
 		"checkpoints": "Checkpoints",
diff --git a/webview-ui/src/i18n/locales/pl/settings.json b/webview-ui/src/i18n/locales/pl/settings.json
index a8cf0eca78e..6665556e2f7 100644
--- a/webview-ui/src/i18n/locales/pl/settings.json
+++ b/webview-ui/src/i18n/locales/pl/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Dostawcy",
+		"modes": "Tryby",
+		"mcp": "Serwery MCP",
 		"autoApprove": "Auto-zatwierdzanie",
 		"browser": "Dostęp komputera",
 		"checkpoints": "Punkty kontrolne",
diff --git a/webview-ui/src/i18n/locales/pt-BR/settings.json b/webview-ui/src/i18n/locales/pt-BR/settings.json
index 0cb0c48afd5..faf3bc210c8 100644
--- a/webview-ui/src/i18n/locales/pt-BR/settings.json
+++ b/webview-ui/src/i18n/locales/pt-BR/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Provedores",
+		"modes": "Modos",
+		"mcp": "Servidores MCP",
 		"autoApprove": "Aprovação",
 		"browser": "Navegador",
 		"checkpoints": "Checkpoints",
diff --git a/webview-ui/src/i18n/locales/ru/settings.json b/webview-ui/src/i18n/locales/ru/settings.json
index 69cca8038f5..ded41494f82 100644
--- a/webview-ui/src/i18n/locales/ru/settings.json
+++ b/webview-ui/src/i18n/locales/ru/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Провайдеры",
+		"modes": "Режимы",
+		"mcp": "Серверы MCP",
 		"autoApprove": "Автоодобрение",
 		"browser": "Доступ к компьютеру",
 		"checkpoints": "Контрольные точки",
diff --git a/webview-ui/src/i18n/locales/tr/settings.json b/webview-ui/src/i18n/locales/tr/settings.json
index c4491f618c2..b1a5d8801e5 100644
--- a/webview-ui/src/i18n/locales/tr/settings.json
+++ b/webview-ui/src/i18n/locales/tr/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Sağlayıcılar",
+		"modes": "Modlar",
+		"mcp": "MCP Sunucuları",
 		"autoApprove": "Oto-Onay",
 		"browser": "Bilgisayar Erişimi",
 		"checkpoints": "Kontrol Noktaları",
diff --git a/webview-ui/src/i18n/locales/vi/settings.json b/webview-ui/src/i18n/locales/vi/settings.json
index 8691d3e7db2..af4df2e05f2 100644
--- a/webview-ui/src/i18n/locales/vi/settings.json
+++ b/webview-ui/src/i18n/locales/vi/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "Nhà cung cấp",
+		"modes": "Chế độ",
+		"mcp": "Máy chủ MCP",
 		"autoApprove": "Phê duyệt",
 		"browser": "Trình duyệt",
 		"checkpoints": "Điểm kiểm tra",
diff --git a/webview-ui/src/i18n/locales/zh-CN/settings.json b/webview-ui/src/i18n/locales/zh-CN/settings.json
index 39684435896..03224114b98 100644
--- a/webview-ui/src/i18n/locales/zh-CN/settings.json
+++ b/webview-ui/src/i18n/locales/zh-CN/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "提供商",
+		"modes": "模式",
+		"mcp": "MCP 服务",
 		"autoApprove": "自动批准",
 		"browser": "计算机交互",
 		"checkpoints": "存档点",
diff --git a/webview-ui/src/i18n/locales/zh-TW/settings.json b/webview-ui/src/i18n/locales/zh-TW/settings.json
index 6dc3eada7f9..6047383036f 100644
--- a/webview-ui/src/i18n/locales/zh-TW/settings.json
+++ b/webview-ui/src/i18n/locales/zh-TW/settings.json
@@ -22,6 +22,8 @@
 	},
 	"sections": {
 		"providers": "供應商",
+		"modes": "模式",
+		"mcp": "MCP 伺服器",
 		"autoApprove": "自動核准",
 		"browser": "電腦存取",
 		"checkpoints": "檢查點",