diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx
index c50996585fe7..e9528231fcc0 100644
--- a/webview-ui/src/components/modes/ModesView.tsx
+++ b/webview-ui/src/components/modes/ModesView.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback, useRef } from "react"
+import React, { useState, useEffect, useCallback, useRef } from "react"
 import {
 	VSCodeCheckbox,
 	VSCodeRadioGroup,
@@ -30,11 +30,6 @@ import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { Tab, TabContent, TabHeader } from "@src/components/common/Tab"
 import {
 	Button,
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
@@ -67,15 +62,7 @@ function getGroupName(group: GroupEntry): ToolGroup {
 const ModesView = ({ onDone }: ModesViewProps) => {
 	const { t } = useAppTranslation()
 
-	const {
-		customModePrompts,
-		listApiConfigMeta,
-		currentApiConfigName,
-		mode,
-		customInstructions,
-		setCustomInstructions,
-		customModes,
-	} = useExtensionState()
+	const { customModePrompts, mode, customInstructions, setCustomInstructions, customModes } = useExtensionState()
 
 	// Use a local state to track the visually active mode
 	// This prevents flickering when switching modes rapidly by:
@@ -84,8 +71,8 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 	// 3. Still sending the mode change to the backend for persistence
 	const [visualMode, setVisualMode] = useState(mode)
 
-	// Memoize modes to preserve array order
-	const modes = useMemo(() => getAllModes(customModes), [customModes])
+	// Build modes fresh each render so search reflects inline rename updates immediately
+	const modes = getAllModes(customModes)
 
 	const [isDialogOpen, setIsDialogOpen] = useState(false)
 	const [selectedPromptContent, setSelectedPromptContent] = useState("")
@@ -97,6 +84,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 	const [isExporting, setIsExporting] = useState(false)
 	const [isImporting, setIsImporting] = useState(false)
 	const [showImportDialog, setShowImportDialog] = useState(false)
+	const [importLevel, setImportLevel] = useState<"global" | "project">("project")
 	const [hasRulesToExport, setHasRulesToExport] = useState<Record<string, boolean>>({})
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
 	const [modeToDelete, setModeToDelete] = useState<{
@@ -111,9 +99,17 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 	const [searchValue, setSearchValue] = useState("")
 	const searchInputRef = useRef<HTMLInputElement>(null)
 
-	// Local state for mode name input to allow visual emptying
-	const [localModeName, setLocalModeName] = useState<string>("")
-	const [currentEditingModeSlug, setCurrentEditingModeSlug] = useState<string | null>(null)
+	// removed unused local name state (replaced by inline rename UX)
+
+	// Inline rename state for the mode dropdown row
+	const [isRenamingMode, setIsRenamingMode] = useState(false)
+	const [renameInputValue, setRenameInputValue] = useState("")
+	const renameInputRef = useRef<any>(null)
+
+	// Optimistic rename map so search reflects new names immediately
+	const [localRenames, setLocalRenames] = useState<Record<string, string>>({})
+	// Display list that overlays optimistic names
+	const displayModes = (modes || []).map((m) => (localRenames[m.slug] ? { ...m, name: localRenames[m.slug] } : m))
 
 	// Direct update functions
 	const updateAgentPrompt = useCallback(
@@ -204,6 +200,52 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 		searchInputRef.current?.focus()
 	}, [])
 
+	// Focus rename input when entering rename mode
+	useEffect(() => {
+		if (isRenamingMode) {
+			const id = setTimeout(() => renameInputRef.current?.focus(), 0)
+			return () => clearTimeout(id)
+		}
+	}, [isRenamingMode])
+
+	const handleStartRenameMode = useCallback(() => {
+		const customMode = findModeBySlug(visualMode, customModes)
+		if (customMode) {
+			setIsRenamingMode(true)
+			setRenameInputValue(customMode.name)
+		}
+	}, [visualMode, customModes, findModeBySlug])
+
+	const handleCancelRenameMode = useCallback(() => {
+		setIsRenamingMode(false)
+		setRenameInputValue("")
+	}, [])
+
+	const handleSaveRenameMode = useCallback(() => {
+		const customMode = findModeBySlug(visualMode, customModes)
+		const trimmed = renameInputValue.trim()
+		if (!customMode || !trimmed) {
+			setIsRenamingMode(false)
+			return
+		}
+		// Prevent duplicate names against other modes
+		const nameTaken = modes.some(
+			(m) => m.name.toLowerCase() === trimmed.toLowerCase() && m.slug !== customMode.slug,
+		)
+		if (nameTaken) {
+			// simple guard: do nothing if taken
+			return
+		}
+		updateCustomMode(visualMode, {
+			...customMode,
+			name: trimmed,
+			source: customMode.source || "global",
+		})
+		// Optimistically reflect rename in UI/search immediately
+		setLocalRenames((prev) => ({ ...prev, [visualMode]: trimmed }))
+		setIsRenamingMode(false)
+	}, [visualMode, customModes, renameInputValue, modes, updateCustomMode, findModeBySlug])
+
 	// Helper function to get current mode's config
 	const getCurrentMode = useCallback((): ModeConfig | undefined => {
 		const findMode = (m: ModeConfig): boolean => m.slug === visualMode
@@ -226,22 +268,6 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 		}
 	}, [getCurrentMode, checkRulesDirectory, hasRulesToExport])
 
-	// Reset local name state when mode changes
-	useEffect(() => {
-		if (currentEditingModeSlug && currentEditingModeSlug !== visualMode) {
-			setCurrentEditingModeSlug(null)
-			setLocalModeName("")
-		}
-	}, [visualMode, currentEditingModeSlug])
-
-	// Helper function to safely access mode properties
-	const getModeProperty = <T extends keyof ModeConfig>(
-		mode: ModeConfig | undefined,
-		property: T,
-	): ModeConfig[T] | undefined => {
-		return mode?.[property]
-	}
-
 	// State for create mode dialog
 	const [newModeName, setNewModeName] = useState("")
 	const [newModeSlug, setNewModeSlug] = useState("")
@@ -285,6 +311,13 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 		}
 	}, [isCreateModeDialogOpen, resetFormState])
 
+	// Ensure import dialog defaults to "project" each open
+	useEffect(() => {
+		if (showImportDialog) {
+			setImportLevel("project")
+		}
+	}, [showImportDialog])
+
 	// Helper function to generate a unique slug from a name
 	const generateSlug = useCallback((name: string, attempt = 0): string => {
 		const baseSlug = name
@@ -354,6 +387,8 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 		}
 
 		updateCustomMode(newModeSlug, newMode)
+		// Immediately select the newly created mode in the UI
+		setVisualMode(newModeSlug)
 		switchMode(newModeSlug)
 		setIsCreateModeDialogOpen(false)
 		resetFormState()
@@ -466,6 +501,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 						console.error("Failed to import mode:", message.error)
 					}
 				}
+				// Note: Auto-select after import will be handled by PR #9003
 			} else if (message.type === "checkRulesDirectoryResult") {
 				setHasRulesToExport((prev) => ({
 					...prev,
@@ -487,7 +523,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 
 		window.addEventListener("message", handler)
 		return () => window.removeEventListener("message", handler)
-	}, []) // Empty dependency array - only register once
+	}, [checkRulesDirectory, switchMode])
 
 	const handleAgentReset = (
 		modeSlug: string,
@@ -517,11 +553,6 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 					<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">
-							<StandardTooltip content={t("prompts:modes.createNewMode")}>
-								<Button variant="ghost" size="icon" onClick={openCreateModeDialog}>
-									<span className="codicon codicon-add"></span>
-								</Button>
-							</StandardTooltip>
 							<div className="relative inline-block">
 								<StandardTooltip content={t("prompts:modes.editModesConfig")}>
 									<Button
@@ -594,6 +625,18 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 									<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>
 
@@ -611,577 +654,568 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 					</div>
 
 					<div className="flex items-center gap-1 mb-3">
-						<Popover open={open} onOpenChange={onOpenChange}>
-							<PopoverTrigger asChild>
-								<Button
-									variant="combobox"
-									role="combobox"
-									aria-expanded={open}
-									className="justify-between w-full"
-									data-testid="mode-select-trigger">
-									<div className="truncate">
-										{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}
+						{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="ghost"
+										size="icon"
+										disabled={!renameInputValue.trim()}
+										onClick={handleSaveRenameMode}
+										data-testid="save-mode-rename-button">
+										<span className="codicon codicon-check" />
+									</Button>
+								</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>
+												)}
 											</div>
-										)}
-									</div>
-									<CommandList>
-										<CommandEmpty>
-											{searchValue && (
-												<div className="py-2 px-1 text-sm">
-													{t("prompts:modes.noMatchFound")}
-												</div>
-											)}
-										</CommandEmpty>
-										<CommandGroup>
-											{modes
-												.filter((modeConfig) =>
-													searchValue
-														? modeConfig.name
-																.toLowerCase()
-																.includes(searchValue.toLowerCase())
-														: true,
-												)
-												.map((modeConfig) => (
-													<CommandItem
-														key={modeConfig.slug}
-														value={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>
+											<CommandList>
+												<CommandEmpty>
+													{searchValue && (
+														<div className="py-2 px-1 text-sm">
+															{t("prompts:modes.noMatchFound")}
 														</div>
-													</CommandItem>
-												))}
-										</CommandGroup>
-									</CommandList>
-								</Command>
-							</PopoverContent>
-						</Popover>
-					</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>
-
-				{/* Name section */}
-				<div className="mb-5">
-					{/* Only show name and delete for custom modes */}
-					{visualMode && findModeBySlug(visualMode, customModes) && (
-						<div className="flex gap-3 mb-4">
-							<div className="flex-1">
-								<div className="font-bold mb-1">{t("prompts:createModeDialog.name.label")}</div>
-								<div className="flex gap-2">
-									<Input
-										type="text"
-										value={
-											currentEditingModeSlug === visualMode
-												? localModeName
-												: (getModeProperty(findModeBySlug(visualMode, customModes), "name") ??
-													"")
-										}
-										onFocus={() => {
-											const customMode = findModeBySlug(visualMode, customModes)
-											if (customMode) {
-												setCurrentEditingModeSlug(visualMode)
-												setLocalModeName(customMode.name)
-											}
-										}}
-										onChange={(e) => {
-											const newName = e.target.value
-											// Allow users to type freely, including emptying the field
-											setLocalModeName(newName)
-										}}
-										onBlur={() => {
-											const customMode = findModeBySlug(visualMode, customModes)
-											if (customMode) {
-												const trimmedName = localModeName.trim()
-												// Only update if the name is not empty
-												if (trimmedName) {
-													updateCustomMode(visualMode, {
-														...customMode,
-														name: trimmedName,
-														source: customMode.source || "global",
-													})
-												} else {
-													// Revert to the original name if empty
-													setLocalModeName(customMode.name)
-												}
-											}
-											// Clear the editing state
-											setCurrentEditingModeSlug(null)
-										}}
-										className="w-full"
-									/>
-									<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",
-													})
-													// First check if rules folder exists
-													vscode.postMessage({
-														type: "deleteCustomMode",
-														slug: customMode.slug,
-														checkOnly: true,
-													})
-												}
-											}}>
-											<span className="codicon codicon-trash"></span>
-										</Button>
-									</StandardTooltip>
-								</div>
-							</div>
-						</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>
 
-					{/* 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")}>
+								{/* Edit (rename) mode - only enabled for custom modes */}
+								<StandardTooltip content={t("settings:providers.renameProfile")}>
 									<Button
 										variant="ghost"
 										size="icon"
-										onClick={() => {
-											const currentMode = getCurrentMode()
-											if (currentMode?.slug) {
-												handleAgentReset(currentMode.slug, "roleDefinition")
-											}
-										}}
-										data-testid="role-definition-reset">
-										<span className="codicon codicon-discard"></span>
+										onClick={handleStartRenameMode}
+										data-testid="rename-mode-button"
+										disabled={!findModeBySlug(visualMode, customModes)}>
+										<span className="codicon codicon-edit" />
 									</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")}>
+								{/* Delete mode - disabled for built-in modes */}
+								<StandardTooltip content={t("prompts:createModeDialog.deleteMode")}>
 									<Button
 										variant="ghost"
 										size="icon"
 										onClick={() => {
-											const currentMode = getCurrentMode()
-											if (currentMode?.slug) {
-												handleAgentReset(currentMode.slug, "description")
+											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="description-reset">
-										<span className="codicon codicon-discard"></span>
+										data-testid="delete-mode-button"
+										disabled={!findModeBySlug(visualMode, customModes)}>
+										<span className="codicon codicon-trash" />
 									</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>
 
-					{/* 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")}>
+								{/* 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) {
-												handleAgentReset(currentMode.slug, "whenToUse")
+											if (currentMode?.slug && !isExporting) {
+												setIsExporting(true)
+												vscode.postMessage({
+													type: "exportMode",
+													slug: currentMode.slug,
+												})
 											}
 										}}
-										data-testid="when-to-use-reset">
-										<span className="codicon codicon-discard"></span>
+										disabled={isExporting}
+										title={t("prompts:exportMode.title")}
+										data-testid="export-mode-toolbar-button">
+										<Upload className="h-4 w-4" />
 									</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>
+				</div>
 
-					{/* 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()
-										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">
-									{(() => {
+				{/* 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={() => {
 										const currentMode = getCurrentMode()
-										const enabledGroups = currentMode?.groups || []
+										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>
 
-										// If there are no enabled groups, display translated "None"
-										if (enabledGroups.length === 0) {
-											return t("prompts:tools.noTools")
+				{/* 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 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>
 
-										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>
-					</>
+				{/* 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")
+										}
+									}}
+									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>
 
-					{/* Role definition for both built-in and custom modes */}
-					<div className="mb-2">
+				{/* 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:customInstructions.title")}</div>
-							{!findModeBySlug(visualMode, customModes) && (
-								<StandardTooltip content={t("prompts:customInstructions.resetToDefault")}>
+							<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={() => {
-											const currentMode = getCurrentMode()
-											if (currentMode?.slug) {
-												handleAgentReset(currentMode.slug, "customInstructions")
-											}
-										}}
-										data-testid="custom-instructions-reset">
-										<span className="codicon codicon-discard"></span>
+										onClick={() => setIsToolsEditMode(!isToolsEditMode)}>
+										<span
+											className={`codicon codicon-${isToolsEditMode ? "check" : "edit"}`}></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(mode, 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(),
-									})
-								}
-							}}
-							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
+						{!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)
 
-												// 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",
+									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>
 											)}
-											style={{ display: "inline" }}
-											aria-label="Learn about global custom instructions for modes"
-										/>
-									),
-								}}
-							/>
-						</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>
 				</div>
 
@@ -1220,41 +1254,6 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 						</StandardTooltip>
 					</div>
 
-					{/* Export/Import Mode Buttons */}
-					<div className="flex items-center gap-2">
-						{/* Export button - visible when any mode is selected */}
-						{getCurrentMode() && (
-							<Button
-								variant="default"
-								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-button">
-								<Upload className="h-4 w-4" />
-								{isExporting ? t("prompts:exportMode.exporting") : t("prompts:exportMode.title")}
-							</Button>
-						)}
-						{/* Import button - always visible */}
-						<Button
-							variant="default"
-							onClick={() => setShowImportDialog(true)}
-							disabled={isImporting}
-							title={t("prompts:modes.importMode")}
-							data-testid="import-mode-button">
-							<Download className="h-4 w-4" />
-							{isImporting ? t("prompts:importMode.importing") : t("prompts:modes.importMode")}
-						</Button>
-					</div>
-
 					{/* Advanced Features Disclosure */}
 					<div className="mt-4">
 						<button
@@ -1618,7 +1617,8 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 									name="importLevel"
 									value="project"
 									className="mt-1"
-									defaultChecked
+									checked={importLevel === "project"}
+									onChange={() => setImportLevel("project")}
 								/>
 								<div>
 									<div className="font-medium">{t("prompts:importMode.project.label")}</div>
@@ -1628,7 +1628,14 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 								</div>
 							</label>
 							<label className="flex items-start gap-2 cursor-pointer">
-								<input type="radio" name="importLevel" value="global" className="mt-1" />
+								<input
+									type="radio"
+									name="importLevel"
+									value="global"
+									className="mt-1"
+									checked={importLevel === "global"}
+									onChange={() => setImportLevel("global")}
+								/>
 								<div>
 									<div className="font-medium">{t("prompts:importMode.global.label")}</div>
 									<div className="text-xs text-vscode-descriptionForeground">
@@ -1645,15 +1652,10 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 								variant="default"
 								onClick={() => {
 									if (!isImporting) {
-										const selectedLevel = (
-											document.querySelector(
-												'input[name="importLevel"]:checked',
-											) as HTMLInputElement
-										)?.value as "global" | "project"
 										setIsImporting(true)
 										vscode.postMessage({
 											type: "importMode",
-											source: selectedLevel || "project",
+											source: importLevel,
 										})
 									}
 								}}