diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index 32cbaa45a1..aff3627d0f 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -12,13 +12,11 @@ import {
 	mainlandQwenModels,
 	ModelInfo,
 	nebiusModels,
-	sapAiCoreModels,
 } from "@shared/api"
 import { EmptyRequest, StringRequest } from "@shared/proto/common"
-import { OpenAiModelsRequest, UpdateApiConfigurationRequest } from "@shared/proto/models"
+import { UpdateApiConfigurationRequest } from "@shared/proto/models"
 import { convertApiConfigurationToProto } from "@shared/proto-conversions/models/api-configuration-conversion"
 import {
-	VSCodeButton,
 	VSCodeCheckbox,
 	VSCodeDropdown,
 	VSCodeLink,
@@ -27,7 +25,7 @@ import {
 	VSCodeRadioGroup,
 	VSCodeTextField,
 } from "@vscode/webview-ui-toolkit/react"
-import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { Fragment, memo, useCallback, useEffect, useMemo, useState } from "react"
 import { useInterval } from "react-use"
 import styled from "styled-components"
 import * as vscodemodels from "vscode"
@@ -56,6 +54,7 @@ import { FireworksProvider } from "./providers/FireworksProvider"
 import { XaiProvider } from "./providers/XaiProvider"
 import { CerebrasProvider } from "./providers/CerebrasProvider"
 import { OllamaProvider } from "./providers/OllamaProvider"
+import { SapAiCoreProvider } from "./providers/SapAiCoreProvider"
 
 interface ApiOptionsProps {
 	showModelOptions: boolean
@@ -1174,69 +1173,13 @@ const ApiOptions = ({
 				/>
 			)}
 
-			{selectedProvider === "sapaicore" && (
-				<div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
-					<VSCodeTextField
-						value={apiConfiguration?.sapAiCoreClientId || ""}
-						style={{ width: "100%" }}
-						type="password"
-						onInput={handleInputChange("sapAiCoreClientId")}
-						placeholder="Enter AI Core Client Id...">
-						<span style={{ fontWeight: 500 }}>AI Core Client Id</span>
-					</VSCodeTextField>
-					{apiConfiguration?.sapAiCoreClientId && (
-						<p style={{ fontSize: "12px", color: "var(--vscode-descriptionForeground)" }}>
-							Client Id is set. To change it, please re-enter the value.
-						</p>
-					)}
-					<VSCodeTextField
-						value={apiConfiguration?.sapAiCoreClientSecret ? "********" : ""}
-						style={{ width: "100%" }}
-						type="password"
-						onInput={handleInputChange("sapAiCoreClientSecret")}
-						placeholder="Enter AI Core Client Secret...">
-						<span style={{ fontWeight: 500 }}>AI Core Client Secret</span>
-					</VSCodeTextField>
-					{apiConfiguration?.sapAiCoreClientSecret && (
-						<p style={{ fontSize: "12px", color: "var(--vscode-descriptionForeground)" }}>
-							Client Secret is set. To change it, please re-enter the value.
-						</p>
-					)}
-					<VSCodeTextField
-						value={apiConfiguration?.sapAiCoreBaseUrl || ""}
-						style={{ width: "100%" }}
-						onInput={handleInputChange("sapAiCoreBaseUrl")}
-						placeholder="Enter AI Core Base URL...">
-						<span style={{ fontWeight: 500 }}>AI Core Base URL</span>
-					</VSCodeTextField>
-					<VSCodeTextField
-						value={apiConfiguration?.sapAiCoreTokenUrl || ""}
-						style={{ width: "100%" }}
-						onInput={handleInputChange("sapAiCoreTokenUrl")}
-						placeholder="Enter AI Core Auth URL...">
-						<span style={{ fontWeight: 500 }}>AI Core Auth URL</span>
-					</VSCodeTextField>
-					<VSCodeTextField
-						value={apiConfiguration?.sapAiResourceGroup || ""}
-						style={{ width: "100%" }}
-						onInput={handleInputChange("sapAiResourceGroup")}
-						placeholder="Enter AI Core Resource Group...">
-						<span style={{ fontWeight: 500 }}>AI Core Resource Group</span>
-					</VSCodeTextField>
-					<p
-						style={{
-							fontSize: "12px",
-							marginTop: "5px",
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						These credentials are stored locally and only used to make API requests from this extension.
-						<VSCodeLink
-							href="https://help.sap.com/docs/sap-ai-core/sap-ai-core-service-guide/access-sap-ai-core-via-api"
-							style={{ display: "inline" }}>
-							You can find more information about SAP AI Core API access here.
-						</VSCodeLink>
-					</p>
-				</div>
+			{apiConfiguration && selectedProvider === "sapaicore" && (
+				<SapAiCoreProvider
+					apiConfiguration={apiConfiguration}
+					handleInputChange={handleInputChange}
+					showModelOptions={showModelOptions}
+					isPopup={isPopup}
+				/>
 			)}
 
 			{apiErrorMessage && (
@@ -1323,6 +1266,7 @@ const ApiOptions = ({
 				selectedProvider !== "fireworks" &&
 				selectedProvider !== "xai" &&
 				selectedProvider !== "cerebras" &&
+				selectedProvider !== "sapaicore" &&
 				showModelOptions && (
 					<>
 						<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 2} className="dropdown-container">
@@ -1335,7 +1279,6 @@ const ApiOptions = ({
 									apiConfiguration?.qwenApiLine === "china" ? mainlandQwenModels : internationalQwenModels,
 								)}
 							{selectedProvider === "nebius" && createDropdown(nebiusModels)}
-							{selectedProvider === "sapaicore" && createDropdown(sapAiCoreModels)}
 						</DropdownContainer>
 
 						{SUPPORTED_THINKING_MODELS[selectedProvider]?.includes(selectedModelId) && (
diff --git a/webview-ui/src/components/settings/providers/SapAiCoreProvider.tsx b/webview-ui/src/components/settings/providers/SapAiCoreProvider.tsx
new file mode 100644
index 0000000000..1dd195b92b
--- /dev/null
+++ b/webview-ui/src/components/settings/providers/SapAiCoreProvider.tsx
@@ -0,0 +1,105 @@
+import { ApiConfiguration, sapAiCoreModels } from "@shared/api"
+import { VSCodeTextField, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import { ModelSelector } from "../common/ModelSelector"
+import { ModelInfoView } from "../common/ModelInfoView"
+import { normalizeApiConfiguration } from "../utils/providerUtils"
+
+/**
+ * Props for the SapAiCoreProvider component
+ */
+interface SapAiCoreProviderProps {
+	apiConfiguration: ApiConfiguration
+	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
+	showModelOptions: boolean
+	isPopup?: boolean
+}
+
+/**
+ * The SAP AI Core provider configuration component
+ */
+export const SapAiCoreProvider = ({ apiConfiguration, handleInputChange, showModelOptions, isPopup }: SapAiCoreProviderProps) => {
+	const { selectedModelId, selectedModelInfo } = normalizeApiConfiguration(apiConfiguration)
+
+	return (
+		<div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+			<VSCodeTextField
+				value={apiConfiguration?.sapAiCoreClientId || ""}
+				style={{ width: "100%" }}
+				type="password"
+				onInput={handleInputChange("sapAiCoreClientId")}
+				placeholder="Enter AI Core Client Id...">
+				<span style={{ fontWeight: 500 }}>AI Core Client Id</span>
+			</VSCodeTextField>
+			{apiConfiguration?.sapAiCoreClientId && (
+				<p style={{ fontSize: "12px", color: "var(--vscode-descriptionForeground)" }}>
+					Client Id is set. To change it, please re-enter the value.
+				</p>
+			)}
+
+			<VSCodeTextField
+				value={apiConfiguration?.sapAiCoreClientSecret ? "********" : ""}
+				style={{ width: "100%" }}
+				type="password"
+				onInput={handleInputChange("sapAiCoreClientSecret")}
+				placeholder="Enter AI Core Client Secret...">
+				<span style={{ fontWeight: 500 }}>AI Core Client Secret</span>
+			</VSCodeTextField>
+			{apiConfiguration?.sapAiCoreClientSecret && (
+				<p style={{ fontSize: "12px", color: "var(--vscode-descriptionForeground)" }}>
+					Client Secret is set. To change it, please re-enter the value.
+				</p>
+			)}
+
+			<VSCodeTextField
+				value={apiConfiguration?.sapAiCoreBaseUrl || ""}
+				style={{ width: "100%" }}
+				onInput={handleInputChange("sapAiCoreBaseUrl")}
+				placeholder="Enter AI Core Base URL...">
+				<span style={{ fontWeight: 500 }}>AI Core Base URL</span>
+			</VSCodeTextField>
+
+			<VSCodeTextField
+				value={apiConfiguration?.sapAiCoreTokenUrl || ""}
+				style={{ width: "100%" }}
+				onInput={handleInputChange("sapAiCoreTokenUrl")}
+				placeholder="Enter AI Core Auth URL...">
+				<span style={{ fontWeight: 500 }}>AI Core Auth URL</span>
+			</VSCodeTextField>
+
+			<VSCodeTextField
+				value={apiConfiguration?.sapAiResourceGroup || ""}
+				style={{ width: "100%" }}
+				onInput={handleInputChange("sapAiResourceGroup")}
+				placeholder="Enter AI Core Resource Group...">
+				<span style={{ fontWeight: 500 }}>AI Core Resource Group</span>
+			</VSCodeTextField>
+
+			<p
+				style={{
+					fontSize: "12px",
+					marginTop: "5px",
+					color: "var(--vscode-descriptionForeground)",
+				}}>
+				These credentials are stored locally and only used to make API requests from this extension.
+				<VSCodeLink
+					href="https://help.sap.com/docs/sap-ai-core/sap-ai-core-service-guide/access-sap-ai-core-via-api"
+					style={{ display: "inline" }}>
+					You can find more information about SAP AI Core API access here.
+				</VSCodeLink>
+			</p>
+
+			{showModelOptions && (
+				<>
+					<ModelSelector
+						models={sapAiCoreModels}
+						selectedModelId={selectedModelId}
+						onChange={handleInputChange("apiModelId")}
+						label="Model"
+					/>
+
+					<ModelInfoView selectedModelId={selectedModelId} modelInfo={selectedModelInfo} isPopup={isPopup} />
+				</>
+			)}
+		</div>
+	)
+}