diff --git a/webview-ui/src/components/common/ApiKeyInput.tsx b/webview-ui/src/components/common/ApiKeyInput.tsx
new file mode 100644
index 00000000000..a4cfd1b6d99
--- /dev/null
+++ b/webview-ui/src/components/common/ApiKeyInput.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react"
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+
+type ApiKeyInputProps = {
+	value: string
+	onInput: (event: Event | React.FormEvent<HTMLElement>) => void
+	placeholder: string
+	label: string
+	className?: string
+	name?: string
+	children?: React.ReactNode
+}
+
+export const ApiKeyInput = ({ value, onInput, placeholder, label, className, name, children }: ApiKeyInputProps) => {
+	const [showApiKey, setShowApiKey] = useState(false)
+
+	return (
+		<div className={`relative w-full ${className || ""}`}>
+			<VSCodeTextField
+				name={name}
+				value={value}
+				type={showApiKey ? "text" : "password"}
+				onInput={onInput}
+				placeholder={placeholder}
+				className="w-full pr-10">
+				<label className="block font-medium mb-1">{label}</label>
+				{children}
+			</VSCodeTextField>
+			<div
+				className="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer"
+				style={{ top: "1.5rem" }}
+				onClick={() => setShowApiKey(!showApiKey)}>
+				{showApiKey ? (
+					<span className="codicon codicon-eye"></span>
+				) : (
+					<span className="codicon codicon-eye-closed"></span>
+				)}
+			</div>
+		</div>
+	)
+}
diff --git a/webview-ui/src/components/settings/providers/Anthropic.tsx b/webview-ui/src/components/settings/providers/Anthropic.tsx
index f340e73f729..7996acdb889 100644
--- a/webview-ui/src/components/settings/providers/Anthropic.tsx
+++ b/webview-ui/src/components/settings/providers/Anthropic.tsx
@@ -6,6 +6,7 @@ import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform, noTransform } from "../transforms"
 
@@ -32,14 +33,12 @@ export const Anthropic = ({ apiConfiguration, setApiConfigurationField }: Anthro
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.apiKey || ""}
-				type="password"
 				onInput={handleInputChange("apiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.anthropicApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.anthropicApiKey")}
+			/>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Bedrock.tsx b/webview-ui/src/components/settings/providers/Bedrock.tsx
index 1839298f9b6..9a3565f27cc 100644
--- a/webview-ui/src/components/settings/providers/Bedrock.tsx
+++ b/webview-ui/src/components/settings/providers/Bedrock.tsx
@@ -6,6 +6,7 @@ import { type ProviderSettings, type ModelInfo, BEDROCK_REGIONS } from "@roo-cod
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StandardTooltip } from "@src/components/ui"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform, noTransform } from "../transforms"
 
@@ -59,30 +60,24 @@ export const Bedrock = ({ apiConfiguration, setApiConfigurationField, selectedMo
 				</VSCodeTextField>
 			) : (
 				<>
-					<VSCodeTextField
+					<ApiKeyInput
 						value={apiConfiguration?.awsAccessKey || ""}
-						type="password"
 						onInput={handleInputChange("awsAccessKey")}
 						placeholder={t("settings:placeholders.accessKey")}
-						className="w-full">
-						<label className="block font-medium mb-1">{t("settings:providers.awsAccessKey")}</label>
-					</VSCodeTextField>
-					<VSCodeTextField
+						label={t("settings:providers.awsAccessKey")}
+					/>
+					<ApiKeyInput
 						value={apiConfiguration?.awsSecretKey || ""}
-						type="password"
 						onInput={handleInputChange("awsSecretKey")}
 						placeholder={t("settings:placeholders.secretKey")}
-						className="w-full">
-						<label className="block font-medium mb-1">{t("settings:providers.awsSecretKey")}</label>
-					</VSCodeTextField>
-					<VSCodeTextField
+						label={t("settings:providers.awsSecretKey")}
+					/>
+					<ApiKeyInput
 						value={apiConfiguration?.awsSessionToken || ""}
-						type="password"
 						onInput={handleInputChange("awsSessionToken")}
 						placeholder={t("settings:placeholders.sessionToken")}
-						className="w-full">
-						<label className="block font-medium mb-1">{t("settings:providers.awsSessionToken")}</label>
-					</VSCodeTextField>
+						label={t("settings:providers.awsSessionToken")}
+					/>
 				</>
 			)}
 			<div>
diff --git a/webview-ui/src/components/settings/providers/Chutes.tsx b/webview-ui/src/components/settings/providers/Chutes.tsx
index c51479421a9..89c6b9ed166 100644
--- a/webview-ui/src/components/settings/providers/Chutes.tsx
+++ b/webview-ui/src/components/settings/providers/Chutes.tsx
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +30,12 @@ export const Chutes = ({ apiConfiguration, setApiConfigurationField }: ChutesPro
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.chutesApiKey || ""}
-				type="password"
 				onInput={handleInputChange("chutesApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.chutesApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.chutesApiKey")}
+			/>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/DeepSeek.tsx b/webview-ui/src/components/settings/providers/DeepSeek.tsx
index 6f0ac2d92af..080e38c92d1 100644
--- a/webview-ui/src/components/settings/providers/DeepSeek.tsx
+++ b/webview-ui/src/components/settings/providers/DeepSeek.tsx
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +30,12 @@ export const DeepSeek = ({ apiConfiguration, setApiConfigurationField }: DeepSee
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.deepSeekApiKey || ""}
-				type="password"
 				onInput={handleInputChange("deepSeekApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.deepSeekApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.deepSeekApiKey")}
+			/>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Gemini.tsx b/webview-ui/src/components/settings/providers/Gemini.tsx
index 21056f12d53..a01266b027b 100644
--- a/webview-ui/src/components/settings/providers/Gemini.tsx
+++ b/webview-ui/src/components/settings/providers/Gemini.tsx
@@ -6,6 +6,7 @@ import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 
@@ -34,14 +35,12 @@ export const Gemini = ({ apiConfiguration, setApiConfigurationField }: GeminiPro
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.geminiApiKey || ""}
-				type="password"
 				onInput={handleInputChange("geminiApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.geminiApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.geminiApiKey")}
+			/>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Glama.tsx b/webview-ui/src/components/settings/providers/Glama.tsx
index ca1c6590ef4..74deefa1988 100644
--- a/webview-ui/src/components/settings/providers/Glama.tsx
+++ b/webview-ui/src/components/settings/providers/Glama.tsx
@@ -8,6 +8,7 @@ import type { RouterModels } from "@roo/api"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { getGlamaAuthUrl } from "@src/oauth/urls"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -44,14 +45,12 @@ export const Glama = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.glamaApiKey || ""}
-				type="password"
 				onInput={handleInputChange("glamaApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.glamaApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.glamaApiKey")}
+			/>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Groq.tsx b/webview-ui/src/components/settings/providers/Groq.tsx
index a8a910d1ace..26113f1ba1e 100644
--- a/webview-ui/src/components/settings/providers/Groq.tsx
+++ b/webview-ui/src/components/settings/providers/Groq.tsx
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +30,12 @@ export const Groq = ({ apiConfiguration, setApiConfigurationField }: GroqProps)
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.groqApiKey || ""}
-				type="password"
 				onInput={handleInputChange("groqApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.groqApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.groqApiKey")}
+			/>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/LiteLLM.tsx b/webview-ui/src/components/settings/providers/LiteLLM.tsx
index a2467b3c0b1..f8df2e21edf 100644
--- a/webview-ui/src/components/settings/providers/LiteLLM.tsx
+++ b/webview-ui/src/components/settings/providers/LiteLLM.tsx
@@ -10,6 +10,7 @@ import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Button } from "@src/components/ui"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -98,14 +99,12 @@ export const LiteLLM = ({
 				<label className="block font-medium mb-1">{t("settings:providers.litellmBaseUrl")}</label>
 			</VSCodeTextField>
 
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.litellmApiKey || ""}
-				type="password"
 				onInput={handleInputChange("litellmApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.litellmApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.litellmApiKey")}
+			/>
 
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
diff --git a/webview-ui/src/components/settings/providers/Mistral.tsx b/webview-ui/src/components/settings/providers/Mistral.tsx
index 666d1421c31..154551a61b7 100644
--- a/webview-ui/src/components/settings/providers/Mistral.tsx
+++ b/webview-ui/src/components/settings/providers/Mistral.tsx
@@ -7,6 +7,7 @@ import type { RouterModels } from "@roo/api"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 
@@ -32,14 +33,12 @@ export const Mistral = ({ apiConfiguration, setApiConfigurationField }: MistralP
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.mistralApiKey || ""}
-				type="password"
 				onInput={handleInputChange("mistralApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<span className="font-medium">{t("settings:providers.mistralApiKey")}</span>
-			</VSCodeTextField>
+				label={t("settings:providers.mistralApiKey")}
+			/>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Moonshot.tsx b/webview-ui/src/components/settings/providers/Moonshot.tsx
index db5f162a9d6..1f6e397275b 100644
--- a/webview-ui/src/components/settings/providers/Moonshot.tsx
+++ b/webview-ui/src/components/settings/providers/Moonshot.tsx
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 import { cn } from "@/lib/utils"
@@ -45,14 +46,12 @@ export const Moonshot = ({ apiConfiguration, setApiConfigurationField }: Moonsho
 				</VSCodeDropdown>
 			</div>
 			<div>
-				<VSCodeTextField
+				<ApiKeyInput
 					value={apiConfiguration?.moonshotApiKey || ""}
-					type="password"
 					onInput={handleInputChange("moonshotApiKey")}
 					placeholder={t("settings:placeholders.apiKey")}
-					className="w-full">
-					<label className="block font-medium mb-1">{t("settings:providers.moonshotApiKey")}</label>
-				</VSCodeTextField>
+					label={t("settings:providers.moonshotApiKey")}
+				/>
 				<div className="text-sm text-vscode-descriptionForeground">
 					{t("settings:providers.apiKeyStorageNotice")}
 				</div>
diff --git a/webview-ui/src/components/settings/providers/OpenAI.tsx b/webview-ui/src/components/settings/providers/OpenAI.tsx
index e2f7857fe09..4f25c181ba0 100644
--- a/webview-ui/src/components/settings/providers/OpenAI.tsx
+++ b/webview-ui/src/components/settings/providers/OpenAI.tsx
@@ -6,6 +6,7 @@ import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 
@@ -56,14 +57,12 @@ export const OpenAI = ({ apiConfiguration, setApiConfigurationField }: OpenAIPro
 					/>
 				</>
 			)}
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.openAiNativeApiKey || ""}
-				type="password"
 				onInput={handleInputChange("openAiNativeApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.openAiApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.openAiApiKey")}
+			/>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/OpenAICompatible.tsx b/webview-ui/src/components/settings/providers/OpenAICompatible.tsx
index 736b0253c43..81c38e0db55 100644
--- a/webview-ui/src/components/settings/providers/OpenAICompatible.tsx
+++ b/webview-ui/src/components/settings/providers/OpenAICompatible.tsx
@@ -16,6 +16,7 @@ import { ExtensionMessage } from "@roo/ExtensionMessage"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Button, StandardTooltip } from "@src/components/ui"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { convertHeadersToObject } from "../utils/headers"
 import { inputEventTransform, noTransform } from "../transforms"
@@ -129,14 +130,12 @@ export const OpenAICompatible = ({
 				className="w-full">
 				<label className="block font-medium mb-1">{t("settings:providers.openAiBaseUrl")}</label>
 			</VSCodeTextField>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.openAiApiKey || ""}
-				type="password"
 				onInput={handleInputChange("openAiApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.apiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.apiKey")}
+			/>
 			<ModelPicker
 				apiConfiguration={apiConfiguration}
 				setApiConfigurationField={setApiConfigurationField}
diff --git a/webview-ui/src/components/settings/providers/OpenRouter.tsx b/webview-ui/src/components/settings/providers/OpenRouter.tsx
index f6cad36bf85..6a20ad16c6a 100644
--- a/webview-ui/src/components/settings/providers/OpenRouter.tsx
+++ b/webview-ui/src/components/settings/providers/OpenRouter.tsx
@@ -10,6 +10,7 @@ import type { RouterModels } from "@roo/api"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { getOpenRouterAuthUrl } from "@src/oauth/urls"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform, noTransform } from "../transforms"
 
@@ -53,14 +54,12 @@ export const OpenRouter = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.openRouterApiKey || ""}
-				type="password"
 				onInput={handleInputChange("openRouterApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
+				label={t("settings:providers.openRouterApiKey")}>
 				<div className="flex justify-between items-center mb-1">
-					<label className="block font-medium">{t("settings:providers.openRouterApiKey")}</label>
 					{apiConfiguration?.openRouterApiKey && (
 						<OpenRouterBalanceDisplay
 							apiKey={apiConfiguration.openRouterApiKey}
@@ -68,7 +67,7 @@ export const OpenRouter = ({
 						/>
 					)}
 				</div>
-			</VSCodeTextField>
+			</ApiKeyInput>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Requesty.tsx b/webview-ui/src/components/settings/providers/Requesty.tsx
index ac9e2735e96..ef2d9b8867c 100644
--- a/webview-ui/src/components/settings/providers/Requesty.tsx
+++ b/webview-ui/src/components/settings/providers/Requesty.tsx
@@ -9,6 +9,7 @@ import { vscode } from "@src/utils/vscode"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 import { Button } from "@src/components/ui"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -48,19 +49,17 @@ export const Requesty = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.requestyApiKey || ""}
-				type="password"
 				onInput={handleInputChange("requestyApiKey")}
 				placeholder={t("settings:providers.getRequestyApiKey")}
-				className="w-full">
+				label={t("settings:providers.requestyApiKey")}>
 				<div className="flex justify-between items-center mb-1">
-					<label className="block font-medium">{t("settings:providers.requestyApiKey")}</label>
 					{apiConfiguration?.requestyApiKey && (
 						<RequestyBalanceDisplay apiKey={apiConfiguration.requestyApiKey} />
 					)}
 				</div>
-			</VSCodeTextField>
+			</ApiKeyInput>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Unbound.tsx b/webview-ui/src/components/settings/providers/Unbound.tsx
index 001ebf058e6..405ec97df1c 100644
--- a/webview-ui/src/components/settings/providers/Unbound.tsx
+++ b/webview-ui/src/components/settings/providers/Unbound.tsx
@@ -10,6 +10,7 @@ import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 import { vscode } from "@src/utils/vscode"
 import { Button } from "@src/components/ui"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -135,14 +136,12 @@ export const Unbound = ({
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.unboundApiKey || ""}
-				type="password"
 				onInput={handleInputChange("unboundApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.unboundApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.unboundApiKey")}
+			/>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
diff --git a/webview-ui/src/components/settings/providers/Vertex.tsx b/webview-ui/src/components/settings/providers/Vertex.tsx
index 19a136927a2..5d725a3429d 100644
--- a/webview-ui/src/components/settings/providers/Vertex.tsx
+++ b/webview-ui/src/components/settings/providers/Vertex.tsx
@@ -5,6 +5,7 @@ import { type ProviderSettings, VERTEX_REGIONS } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@src/components/ui"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 
@@ -53,13 +54,12 @@ export const Vertex = ({ apiConfiguration, setApiConfigurationField }: VertexPro
 					</VSCodeLink>
 				</div>
 			</div>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.vertexJsonCredentials || ""}
 				onInput={handleInputChange("vertexJsonCredentials")}
 				placeholder={t("settings:placeholders.credentialsJson")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.googleCloudCredentials")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.googleCloudCredentials")}
+			/>
 			<VSCodeTextField
 				value={apiConfiguration?.vertexKeyFile || ""}
 				onInput={handleInputChange("vertexKeyFile")}
diff --git a/webview-ui/src/components/settings/providers/XAI.tsx b/webview-ui/src/components/settings/providers/XAI.tsx
index 619f2239013..4bccb5d1ffd 100644
--- a/webview-ui/src/components/settings/providers/XAI.tsx
+++ b/webview-ui/src/components/settings/providers/XAI.tsx
@@ -5,6 +5,7 @@ import type { ProviderSettings } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { ApiKeyInput } from "@src/components/common/ApiKeyInput"
 
 import { inputEventTransform } from "../transforms"
 
@@ -29,14 +30,12 @@ export const XAI = ({ apiConfiguration, setApiConfigurationField }: XAIProps) =>
 
 	return (
 		<>
-			<VSCodeTextField
+			<ApiKeyInput
 				value={apiConfiguration?.xaiApiKey || ""}
-				type="password"
 				onInput={handleInputChange("xaiApiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full">
-				<label className="block font-medium mb-1">{t("settings:providers.xaiApiKey")}</label>
-			</VSCodeTextField>
+				label={t("settings:providers.xaiApiKey")}
+			/>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>