diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx
index 09cd237f19..dba2c27dc4 100644
--- a/webview-ui/src/components/modes/ModesView.tsx
+++ b/webview-ui/src/components/modes/ModesView.tsx
@@ -70,11 +70,11 @@ const ModesView = () => {
 	const {
 		customModePrompts,
 		listApiConfigMeta,
-		currentApiConfigName,
 		mode,
 		customInstructions,
 		setCustomInstructions,
 		customModes,
+		modeApiConfigs,
 	} = useExtensionState()
 
 	// Use a local state to track the visually active mode
@@ -910,33 +910,43 @@ const ModesView = () => {
 						)}
 					</div>
 
-					{/* API Configuration - Moved Here */}
+					{/* API Configuration - Per Mode */}
 					<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}
+								value={modeApiConfigs?.[visualMode] || "-"}
 								onValueChange={(value) => {
+									const newConfigId = value === "-" ? "" : value
 									vscode.postMessage({
-										type: "loadApiConfiguration",
-										text: value,
+										type: "updateSettings",
+										updatedSettings: {
+											modeApiConfigs: {
+												...modeApiConfigs,
+												[visualMode]: newConfigId,
+											},
+										},
 									})
 								}}>
-								<SelectTrigger className="w-full">
-									<SelectValue placeholder={t("settings:common.select")} />
+								<SelectTrigger className="w-full" data-testid="mode-api-config-select">
+									<SelectValue placeholder={t("prompts:apiConfiguration.useCurrentConfig")} />
 								</SelectTrigger>
 								<SelectContent>
+									<SelectItem value="-">{t("prompts:apiConfiguration.useCurrentConfig")}</SelectItem>
 									{(listApiConfigMeta || []).map((config) => (
-										<SelectItem key={config.id} value={config.name}>
+										<SelectItem
+											key={config.id}
+											value={config.id}
+											data-testid={`${config.id}-option`}>
 											{config.name}
 										</SelectItem>
 									))}
 								</SelectContent>
 							</Select>
 						</div>
+						<div className="text-sm text-vscode-descriptionForeground">
+							{t("prompts:apiConfiguration.description")}
+						</div>
 					</div>
 				</div>
 
diff --git a/webview-ui/src/i18n/locales/en/prompts.json b/webview-ui/src/i18n/locales/en/prompts.json
index 19837c6b2c..df00b399fd 100644
--- a/webview-ui/src/i18n/locales/en/prompts.json
+++ b/webview-ui/src/i18n/locales/en/prompts.json
@@ -14,7 +14,9 @@
 	},
 	"apiConfiguration": {
 		"title": "API Configuration",
-		"select": "Select which API configuration to use for this mode"
+		"select": "Select which API configuration to use for this mode",
+		"useCurrentConfig": "Use currently selected API configuration",
+		"description": "You can select an API configuration to always use for this mode, or just use whatever is currently selected"
 	},
 	"tools": {
 		"title": "Available Tools",