@@ -146,6 +146,32 @@ export const stories: Record<string, Story> = {
 			</AppProviders>
 		)
 	},
+	"api-provider-dropdown": async () => {
+		const [{ AppProviders }, { default: ApiOptions }, { providerIdentifiers }] = await Promise.all([
+			import("../AppProviders"),
+			import("@/components/settings/ApiOptions"),
+			import("@roo-code/types"),
+		])
+		const apiConfiguration: import("@roo-code/types").ProviderSettings = {
+			apiProvider: providerIdentifiers.anthropic,
+			apiKey: "sk-ant-example-key",
+		}
+		return (
+			<AppProviders initialState={{ apiConfiguration }}>
+				<div
+					className="w-[480px] p-4 bg-vscode-editor-background text-vscode-foreground"
+					data-testid="api-provider-dropdown-story">
+					<ApiOptions
+						uriScheme="vscode"
+						apiConfiguration={apiConfiguration}
+						setApiConfigurationField={() => undefined}
+						errorMessage={undefined}
+						setErrorMessage={() => undefined}
+					/>
+				</div>
+			</AppProviders>
+		)
+	},
 	"auto-approve-settings": async () => {
 		const { AutoApproveSettingsStory } =
 			await import("@/components/settings/__tests__/AutoApproveSettings.visual.fixture")
 
@@ -435,6 +435,12 @@ const ApiOptions = ({
 			}
 		}
 
+		const zooGatewayIndex = options.findIndex((opt) => opt.value === providerIdentifiers.zooGateway)
+		if (zooGatewayIndex > 0) {
+			const [zooGatewayOption] = options.splice(zooGatewayIndex, 1)
+			options.unshift(zooGatewayOption)
+		}
+
 		return options
 	}, [organizationAllowList, apiConfiguration.apiProvider, fromWelcomeView])
 
 
@@ -11,6 +11,11 @@ import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel"
 import ApiOptions from "../ApiOptions"
 import { MODELS_BY_PROVIDER, PROVIDERS } from "../constants"
 
+type ProviderOption = {
+	value: string
+	label: string
+}
+
 // Mock the extension state context
 vi.mock("@src/context/ExtensionStateContext", () => ({
 	ExtensionStateContextProvider: ({ children }: any) => children,
@@ -113,6 +118,11 @@ describe("ApiOptions Provider Filtering", () => {
 		return renderWithExtensionState(<ApiOptions {...props} />)
 	}
 
+	const getProviderOptions = (): ProviderOption[] => {
+		const selectElement = screen.getByTestId("provider-select")
+		return JSON.parse(selectElement.getAttribute("data-options") || "[]") as ProviderOption[]
+	}
+
 	beforeEach(() => {
 		vi.clearAllMocks()
 		vi.mocked(useSelectedModel).mockReturnValue({
@@ -190,6 +200,64 @@ describe("ApiOptions Provider Filtering", () => {
 		expect(providerValues).toContain("ollama") // dynamic provider
 	})
 
+	it("pins Zoo Gateway first while preserving alphabetical order for the remaining providers", () => {
+		renderWithProviders()
+
+		const options = getProviderOptions()
+		const remainingLabels = options.slice(1).map(({ label }) => label)
+
+		expect(options[0]?.value).toBe(providerIdentifiers.zooGateway)
+		expect(remainingLabels).toEqual([...remainingLabels].sort((a, b) => a.localeCompare(b)))
+	})
+
+	it("pins Zoo Gateway first and OpenRouter second in the welcome view", () => {
+		renderWithProviders({ ...defaultProps, fromWelcomeView: true })
+
+		const providerValues = getProviderOptions().map(({ value }) => value)
+
+		expect(providerValues.slice(0, 2)).toEqual([providerIdentifiers.zooGateway, providerIdentifiers.openrouter])
+	})
+
+	it("does not reintroduce Zoo Gateway when an organization allow list excludes it", () => {
+		vi.mocked(useExtensionState).mockReturnValueOnce({
+			...useExtensionState(),
+			organizationAllowList: {
+				allowAll: false,
+				providers: {
+					[providerIdentifiers.anthropic]: { allowAll: true },
+					[providerIdentifiers.openrouter]: { allowAll: true },
+				},
+			},
+		})
+
+		renderWithProviders()
+
+		expect(getProviderOptions().map(({ value }) => value)).toEqual([
+			providerIdentifiers.anthropic,
+			providerIdentifiers.openrouter,
+		])
+	})
+
+	it("keeps Zoo Gateway first when an organization allow list includes it", () => {
+		vi.mocked(useExtensionState).mockReturnValueOnce({
+			...useExtensionState(),
+			organizationAllowList: {
+				allowAll: false,
+				providers: {
+					[providerIdentifiers.anthropic]: { allowAll: true },
+					[providerIdentifiers.zooGateway]: { allowAll: true },
+				},
+			},
+		})
+
+		renderWithProviders()
+
+		expect(getProviderOptions().map(({ value }) => value)).toEqual([
+			providerIdentifiers.zooGateway,
+			providerIdentifiers.anthropic,
+		])
+	})
+
 	it("should hide static providers with empty models", () => {
 		// Mock MODELS_BY_PROVIDER to have an empty provider
 		const _originalModels = { ...MODELS_BY_PROVIDER }
 
@@ -0,0 +1,13 @@
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { mountedStory } from "../../../../playwright/mounted-story"
+
+test("renders the open provider dropdown with Zoo Gateway first", async ({ mount, page }) => {
+	await page.setViewportSize({ width: 520, height: 720 })
+	// The full provider bundle leaves bare Zod references after gallery tree-shaking.
+	await page.evaluate(() => Object.assign(globalThis, { z: undefined, z$1: undefined }))
+	const component = mountedStory(await mount("api-provider-dropdown"))
+
+	await component.getByTestId("provider-select").click()
+	await expect(page.getByRole("listbox")).toBeVisible()
+	await expect(page).toHaveScreenshot("api-provider-dropdown-open.png")
+})
Original file line number	Diff line number	Diff line change
`@@ -435,6 +435,12 @@ const ApiOptions = ({`
`435`	`435`	`}`
`436`	`436`	`}`
`437`	`437`
	`438`	`+ const zooGatewayIndex = options.findIndex((opt) => opt.value === providerIdentifiers.zooGateway)`
	`439`	`+ if (zooGatewayIndex > 0) {`
	`440`	`+ const [zooGatewayOption] = options.splice(zooGatewayIndex, 1)`
	`441`	`+ options.unshift(zooGatewayOption)`
	`442`	`+ }`
	`443`	`+`
`438`	`444`	`return options`
`439`	`445`	`}, [organizationAllowList, apiConfiguration.apiProvider, fromWelcomeView])`
`440`	`446`