diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index bef4e45f20..d34baae8f1 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -16,8 +16,10 @@ import {
 import { vscode } from "@src/utils/vscode"
 import { validateApiConfiguration, validateModelId } from "@src/utils/validate"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
+
 import { useRouterModels } from "@src/components/ui/hooks/useRouterModels"
 import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@src/components/ui"
 
 import {
@@ -122,7 +124,12 @@ const ApiOptions = ({
 		info: selectedModelInfo,
 	} = useSelectedModel(apiConfiguration)
 
-	const { data: routerModels, refetch: refetchRouterModels } = useRouterModels()
+	const { routerModels: contextRouterModels } = useExtensionState()
+	const { data: queryRouterModels, refetch: refetchRouterModels } = useRouterModels()
+
+	// Router providers use context system, others use React Query system
+	const isRouterProvider = ["openrouter", "requesty", "glama", "unbound", "litellm"].includes(selectedProvider)
+	const routerModels = isRouterProvider ? contextRouterModels : queryRouterModels
 
 	// Update `apiModelId` whenever `selectedModelId` changes.
 	useEffect(() => {
diff --git a/webview-ui/src/components/ui/hooks/useSelectedModel.ts b/webview-ui/src/components/ui/hooks/useSelectedModel.ts
index f656c702dd..d0b00a9097 100644
--- a/webview-ui/src/components/ui/hooks/useSelectedModel.ts
+++ b/webview-ui/src/components/ui/hooks/useSelectedModel.ts
@@ -34,22 +34,26 @@ import {
 
 import { useRouterModels } from "./useRouterModels"
 import { useOpenRouterModelProviders } from "./useOpenRouterModelProviders"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
 
 export const useSelectedModel = (apiConfiguration?: ProviderSettings) => {
 	const provider = apiConfiguration?.apiProvider || "anthropic"
 	const openRouterModelId = provider === "openrouter" ? apiConfiguration?.openRouterModelId : undefined
 
-	const routerModels = useRouterModels()
+	const { routerModels: contextRouterModels } = useExtensionState()
+	const queryRouterModels = useRouterModels()
 	const openRouterModelProviders = useOpenRouterModelProviders(openRouterModelId)
 
+	// Router providers use context system, others use React Query system
+	const isRouterProvider = ["openrouter", "requesty", "glama", "unbound", "litellm"].includes(provider)
+	const routerModels = isRouterProvider ? contextRouterModels : queryRouterModels.data
+
 	const { id, info } =
-		apiConfiguration &&
-		typeof routerModels.data !== "undefined" &&
-		typeof openRouterModelProviders.data !== "undefined"
+		apiConfiguration && typeof routerModels !== "undefined" && typeof openRouterModelProviders.data !== "undefined"
 			? getSelectedModel({
 					provider,
 					apiConfiguration,
-					routerModels: routerModels.data,
+					routerModels,
 					openRouterModelProviders: openRouterModelProviders.data,
 				})
 			: { id: anthropicDefaultModelId, info: undefined }
@@ -58,8 +62,8 @@ export const useSelectedModel = (apiConfiguration?: ProviderSettings) => {
 		provider,
 		id,
 		info,
-		isLoading: routerModels.isLoading || openRouterModelProviders.isLoading,
-		isError: routerModels.isError || openRouterModelProviders.isError,
+		isLoading: queryRouterModels.isLoading || openRouterModelProviders.isLoading,
+		isError: queryRouterModels.isError || openRouterModelProviders.isError,
 	}
 }