diff --git a/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.test.tsx
index 220db23338e..f11edd7023d 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import AdminPanel from "./AdminPanel";
@@ -323,3 +323,73 @@ describe("AdminPanel", () => {
     });
   });
 });
+
+describe("AdminPanel add allowed IP form", () => {
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    mockUseAuthorized.mockReturnValue({
+      premiumUser: true,
+      accessToken: "test-token",
+      userId: "user-1",
+    });
+    mockGetSSOSettings.mockResolvedValue({ values: {} });
+    mockGetAllowedIPs.mockResolvedValue(["10.0.0.1"]);
+    mockAddAllowedIP.mockResolvedValue({});
+
+    const user = userEvent.setup();
+    render(<AdminPanel />);
+    await user.click(screen.getByRole("tab", { name: /security settings/i }));
+    await user.click(screen.getByRole("button", { name: /allowed ips/i }));
+    const manageDialog = await screen.findByRole("dialog", { name: /manage allowed ip addresses/i });
+    await user.click(within(manageDialog).getByRole("button", { name: /add ip address/i }));
+    await screen.findByPlaceholderText("Enter IP address");
+  });
+
+  const ipField = () => screen.getByPlaceholderText("Enter IP address") as HTMLInputElement;
+
+  const submitAddIP = async (user: ReturnType<typeof userEvent.setup>) => {
+    const addIpForm = ipField().form as HTMLFormElement;
+    await user.click(within(addIpForm).getByText("Add IP Address"));
+  };
+
+  it("sends the access token and the typed IP address", async () => {
+    const user = userEvent.setup();
+
+    await user.type(ipField(), "192.168.1.50");
+    await submitAddIP(user);
+
+    await waitFor(() => {
+      expect(mockAddAllowedIP).toHaveBeenCalledWith("test-token", "192.168.1.50");
+    });
+    expect(mockAddAllowedIP).toHaveBeenCalledTimes(1);
+  });
+
+  it("blocks the submit and shows the required message when no IP is typed", async () => {
+    const user = userEvent.setup();
+
+    await submitAddIP(user);
+
+    expect(await screen.findByText("Please enter an IP address")).toBeInTheDocument();
+    expect(mockAddAllowedIP).not.toHaveBeenCalled();
+  });
+
+  it("submits on Enter from the IP field", async () => {
+    const user = userEvent.setup();
+
+    await user.type(ipField(), "172.16.0.9{Enter}");
+
+    await waitFor(() => {
+      expect(mockAddAllowedIP).toHaveBeenCalledWith("test-token", "172.16.0.9");
+    });
+  });
+
+  it("refreshes the allowed IP list after a successful add", async () => {
+    const user = userEvent.setup();
+    mockGetAllowedIPs.mockResolvedValue(["10.0.0.1", "192.168.1.50"]);
+
+    await user.type(ipField(), "192.168.1.50");
+    await submitAddIP(user);
+
+    expect(await screen.findByText("192.168.1.50")).toBeInTheDocument();
+  });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.tsx
index 9c1343ccbea..3f3f7fb5db7 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.tsx
@@ -14,7 +14,7 @@ import {
   TableHeaderCell,
   TableRow,
 } from "@tremor/react";
-import { Alert, Button as Button2, Form, Input, Modal, Space, Tabs, Typography } from "antd";
+import { Alert, Modal, Space, Tabs, Typography } from "antd";
 import React, { useEffect, useState } from "react";
 import NewBadge from "@/components/common_components/NewBadge";
 import { useBaseUrl } from "@/components/constants";
@@ -28,17 +28,51 @@ import UserBannerSettings from "@/components/Settings/AdminSettings/UserBannerSe
 import HashicorpVault from "@/components/Settings/AdminSettings/HashicorpVault/HashicorpVault";
 import PluginSettings from "@/components/Settings/AdminSettings/PluginSettings/PluginSettings";
 import SSOModals from "@/components/SSOModals";
+import {
+  emptySSOSettingsFormValues,
+  useSSOSettingsForm,
+  type SSOSettingsFormValues,
+} from "@/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm";
 import UIAccessControlForm from "@/components/UIAccessControlForm";
+import { z } from "zod/v4";
+import { FieldGroup } from "@/components/shared/form/field";
+import { FormField } from "@/components/shared/form/FormField";
+import { Button as ShadcnButton } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useZodForm } from "@/lib/forms/useZodForm";
 
 const { Title, Paragraph, Text } = Typography;
 
+const allowedIPSchema = z.object({
+  ip: z.string().min(1, "Please enter an IP address"),
+});
+
+type AllowedIPFormValues = z.infer<typeof allowedIPSchema>;
+
+const AddAllowedIPForm = ({ onSubmit }: { onSubmit: (values: AllowedIPFormValues) => Promise<void> }) => {
+  const form = useZodForm(allowedIPSchema, { defaultValues: { ip: "" } });
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <FieldGroup>
+        <FormField control={form.control} name="ip">
+          {({ ref, ...field }) => <Input ref={ref} placeholder="Enter IP address" {...field} />}
+        </FormField>
+        <div>
+          <ShadcnButton type="submit">Add IP Address</ShadcnButton>
+        </div>
+      </FieldGroup>
+    </form>
+  );
+};
+
 interface AdminPanelProps {
   proxySettings?: any;
 }
 
 const AdminPanel: React.FC<AdminPanelProps> = ({ proxySettings }) => {
   const { premiumUser, accessToken, userId: userID } = useAuthorized();
-  const [form] = Form.useForm();
+  const form = useSSOSettingsForm("admin-panel");
   const [isAddSSOModalVisible, setIsAddSSOModalVisible] = useState(false);
   const [isInstructionsModalVisible, setIsInstructionsModalVisible] = useState(false);
   const [isAllowedIPModalVisible, setIsAllowedIPModalVisible] = useState(false);
@@ -141,7 +175,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({ proxySettings }) => {
 
   const handleAddSSOOk = () => {
     setIsAddSSOModalVisible(false);
-    form.resetFields();
+    form.reset(emptySSOSettingsFormValues);
     if (accessToken && premiumUser) {
       checkSSOConfiguration();
     }
@@ -149,10 +183,10 @@ const AdminPanel: React.FC<AdminPanelProps> = ({ proxySettings }) => {
 
   const handleAddSSOCancel = () => {
     setIsAddSSOModalVisible(false);
-    form.resetFields();
+    form.reset(emptySSOSettingsFormValues);
   };
 
-  const handleShowInstructions = (formValues: Record<string, any>) => {
+  const handleShowInstructions = (formValues: SSOSettingsFormValues) => {
     setIsAddSSOModalVisible(false);
     setIsInstructionsModalVisible(true);
   };
@@ -293,14 +327,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({ proxySettings }) => {
               onCancel={() => setIsAddIPModalVisible(false)}
               footer={null}
             >
-              <Form onFinish={handleAddIP}>
-                <Form.Item name="ip" rules={[{ required: true, message: "Please enter an IP address" }]}>
-                  <Input placeholder="Enter IP address" />
-                </Form.Item>
-                <Form.Item>
-                  <Button2 htmlType="submit">Add IP Address</Button2>
-                </Form.Item>
-              </Form>
+              <AddAllowedIPForm onSubmit={handleAddIP} />
             </Modal>
 
             <Modal
diff --git a/ui/litellm-dashboard/src/components/SCIM.test.tsx b/ui/litellm-dashboard/src/components/SCIM.test.tsx
new file mode 100644
index 00000000000..4e3a9fd260d
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/SCIM.test.tsx
@@ -0,0 +1,137 @@
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "../../tests/test-utils";
+import SCIMConfig from "./SCIM";
+import { keyCreateCall } from "./networking";
+import { toast } from "@/lib/toast";
+
+vi.mock("./networking", () => ({
+  keyCreateCall: vi.fn(),
+}));
+
+vi.mock("@/lib/toast", () => ({
+  toast: { success: vi.fn(), fromError: vi.fn() },
+}));
+
+const ACCESS_TOKEN = "sk-access-token";
+const USER_ID = "user-1234";
+
+const renderSCIM = (props?: { accessToken?: string | null; userID?: string | null }) =>
+  renderWithProviders(
+    <SCIMConfig
+      accessToken={props?.accessToken === undefined ? ACCESS_TOKEN : props.accessToken}
+      userID={props?.userID === undefined ? USER_ID : props.userID}
+      proxySettings={{ PROXY_BASE_URL: "https://proxy.example.com" }}
+    />,
+  );
+
+describe("SCIMConfig", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("sends exactly the SCIM key payload when a token name is submitted", async () => {
+    vi.mocked(keyCreateCall).mockResolvedValue({ key: "sk-scim-generated" });
+    const user = userEvent.setup();
+    renderSCIM();
+
+    await user.type(screen.getByLabelText("Token Name"), "My SCIM Token");
+    await user.click(screen.getByRole("button", { name: /create scim token/i }));
+
+    await waitFor(() => {
+      expect(keyCreateCall).toHaveBeenCalledWith(ACCESS_TOKEN, USER_ID, {
+        key_alias: "My SCIM Token",
+        team_id: null,
+        models: [],
+        allowed_routes: ["/scim/*"],
+      });
+    });
+  });
+
+  it("blocks the submit and shows the required message when the token name is empty", async () => {
+    const user = userEvent.setup();
+    renderSCIM();
+
+    await user.click(screen.getByRole("button", { name: /create scim token/i }));
+
+    expect(await screen.findByText("Please enter a name for your token")).toBeInTheDocument();
+    expect(keyCreateCall).not.toHaveBeenCalled();
+  });
+
+  it("submits on Enter from the token name field", async () => {
+    vi.mocked(keyCreateCall).mockResolvedValue({ key: "sk-scim-generated" });
+    const user = userEvent.setup();
+    renderSCIM();
+
+    await user.type(screen.getByLabelText("Token Name"), "Entered With Return{Enter}");
+
+    await waitFor(() => {
+      expect(keyCreateCall).toHaveBeenCalledWith(ACCESS_TOKEN, USER_ID, {
+        key_alias: "Entered With Return",
+        team_id: null,
+        models: [],
+        allowed_routes: ["/scim/*"],
+      });
+    });
+  });
+
+  it("reveals the created token and hides the creation form on success", async () => {
+    vi.mocked(keyCreateCall).mockResolvedValue({ key: "sk-scim-generated" });
+    const user = userEvent.setup();
+    renderSCIM();
+
+    await user.type(screen.getByLabelText("Token Name"), "My SCIM Token");
+    await user.click(screen.getByRole("button", { name: /create scim token/i }));
+
+    expect(await screen.findByText("Your SCIM Token")).toBeInTheDocument();
+    expect(screen.queryByLabelText("Token Name")).not.toBeInTheDocument();
+    expect(toast.success).toHaveBeenCalledWith("SCIM token created successfully");
+  });
+
+  it("returns to the creation form when creating another token", async () => {
+    vi.mocked(keyCreateCall).mockResolvedValue({ key: "sk-scim-generated" });
+    const user = userEvent.setup();
+    renderSCIM();
+
+    await user.type(screen.getByLabelText("Token Name"), "My SCIM Token");
+    await user.click(screen.getByRole("button", { name: /create scim token/i }));
+    await user.click(await screen.findByRole("button", { name: /create another token/i }));
+
+    expect(await screen.findByLabelText("Token Name")).toBeInTheDocument();
+  });
+
+  it("does not call the API when there is no access token", async () => {
+    const user = userEvent.setup();
+    renderSCIM({ accessToken: null });
+
+    await user.type(screen.getByLabelText("Token Name"), "My SCIM Token");
+    await user.click(screen.getByRole("button", { name: /create scim token/i }));
+
+    await waitFor(() => {
+      expect(toast.fromError).toHaveBeenCalledWith("You need to be logged in to create a SCIM token");
+    });
+    expect(keyCreateCall).not.toHaveBeenCalled();
+  });
+
+  it("surfaces a creation failure and keeps the form mounted", async () => {
+    vi.mocked(keyCreateCall).mockRejectedValue(new Error("boom"));
+    const user = userEvent.setup();
+    renderSCIM();
+
+    await user.type(screen.getByLabelText("Token Name"), "My SCIM Token");
+    await user.click(screen.getByRole("button", { name: /create scim token/i }));
+
+    await waitFor(() => {
+      expect(toast.fromError).toHaveBeenCalledWith("Failed to create SCIM token: boom");
+    });
+    expect(screen.getByLabelText("Token Name")).toBeInTheDocument();
+  });
+
+  it("shows the SCIM tenant URL derived from the proxy base url", () => {
+    renderSCIM();
+
+    expect(screen.getByDisplayValue("https://proxy.example.com/scim/v2")).toBeInTheDocument();
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/SCIM.tsx b/ui/litellm-dashboard/src/components/SCIM.tsx
index 6b8cd5ead97..4110db4daba 100644
--- a/ui/litellm-dashboard/src/components/SCIM.tsx
+++ b/ui/litellm-dashboard/src/components/SCIM.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Card, Title, Text, Grid, Button as TremorButton, Callout, TextInput, Divider } from "@tremor/react";
-import { Form } from "antd";
+import { Card, Title, Text, Grid, Callout, Divider } from "@tremor/react";
+import { z } from "zod/v4";
 import { keyCreateCall } from "./networking";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import {
@@ -12,6 +12,12 @@ import {
 } from "@ant-design/icons";
 import { parseErrorMessage } from "./shared/errorUtils";
 import { toast } from "@/lib/toast";
+import { FieldGroup } from "@/components/shared/form/field";
+import { FormField } from "@/components/shared/form/FormField";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
+import { useZodForm } from "@/lib/forms/useZodForm";
 
 interface SCIMConfigProps {
   accessToken: string | null;
@@ -19,8 +25,14 @@ interface SCIMConfigProps {
   proxySettings: any;
 }
 
+const scimTokenSchema = z.object({
+  key_alias: z.string().min(1, "Please enter a name for your token"),
+});
+
+type SCIMTokenFormValues = z.infer<typeof scimTokenSchema>;
+
 const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySettings }) => {
-  const [form] = Form.useForm();
+  const form = useZodForm(scimTokenSchema, { defaultValues: { key_alias: "" } });
   const [isCreatingToken, setIsCreatingToken] = useState(false);
   const [tokenData, setTokenData] = useState<any>(null);
   const [baseUrl, setBaseUrl] = useState("<your_proxy_base_url>");
@@ -40,7 +52,7 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
 
   const scimBaseUrl = `${baseUrl}/scim/v2`;
 
-  const handleCreateSCIMToken = async (values: any) => {
+  const handleCreateSCIMToken = async (values: SCIMTokenFormValues) => {
     if (!accessToken || !userID) {
       toast.fromError("You need to be logged in to create a SCIM token");
       return;
@@ -73,7 +85,7 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
         <div className="flex items-center mb-4">
           <Title>SCIM Configuration</Title>
         </div>
-        <Text className="text-gray-600">
+        <Text className="text-muted-foreground">
           System for Cross-domain Identity Management (SCIM) allows you to automatically provision and manage users and
           groups in LiteLLM.
         </Text>
@@ -84,7 +96,7 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
           {/* Step 1: SCIM URL */}
           <div>
             <div className="flex items-center mb-2">
-              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 mr-2">
+              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300 mr-2">
                 1
               </div>
               <Title className="text-lg flex items-center">
@@ -92,16 +104,16 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
                 SCIM Tenant URL
               </Title>
             </div>
-            <Text className="text-gray-600 mb-3">
+            <Text className="text-muted-foreground mb-3">
               Use this URL in your identity provider SCIM integration settings.
             </Text>
             <div className="flex items-center">
-              <TextInput value={scimBaseUrl} disabled={true} className="grow" />
+              <Input value={scimBaseUrl} disabled={true} readOnly className="grow" />
               <CopyToClipboard text={scimBaseUrl} onCopy={() => toast.success("URL copied to clipboard")}>
-                <TremorButton variant="primary" className="ml-2 flex items-center">
+                <Button type="button" className="ml-2 flex items-center">
                   <CopyOutlined className="h-4 w-4 mr-1" />
                   Copy
-                </TremorButton>
+                </Button>
               </CopyToClipboard>
             </div>
           </div>
@@ -109,7 +121,7 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
           {/* Step 2: SCIM Token */}
           <div>
             <div className="flex items-center mb-2">
-              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 mr-2">
+              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300 mr-2">
                 2
               </div>
               <Title className="text-lg flex items-center">
@@ -124,50 +136,52 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
             </Callout>
 
             {!tokenData ? (
-              <div className="bg-gray-50 p-4 rounded-lg">
-                <Form form={form} onFinish={handleCreateSCIMToken} layout="vertical">
-                  <Form.Item
-                    name="key_alias"
-                    label="Token Name"
-                    rules={[{ required: true, message: "Please enter a name for your token" }]}
-                  >
-                    <TextInput placeholder="SCIM Access Token" />
-                  </Form.Item>
-                  <Form.Item>
-                    <TremorButton
-                      variant="primary"
-                      type="submit"
-                      loading={isCreatingToken}
-                      className="flex items-center"
-                    >
-                      <KeyOutlined className="h-4 w-4 mr-1" />
-                      Create SCIM Token
-                    </TremorButton>
-                  </Form.Item>
-                </Form>
+              <div className="bg-muted p-4 rounded-lg">
+                <form onSubmit={form.handleSubmit(handleCreateSCIMToken)}>
+                  <FieldGroup>
+                    <FormField control={form.control} name="key_alias" label="Token Name">
+                      {({ ref, ...field }) => <Input {...field} ref={ref} placeholder="SCIM Access Token" />}
+                    </FormField>
+                    <div>
+                      <Button type="submit" disabled={isCreatingToken} className="flex items-center">
+                        {isCreatingToken ? (
+                          <UiLoadingSpinner className="size-4 mr-1" />
+                        ) : (
+                          <KeyOutlined className="h-4 w-4 mr-1" />
+                        )}
+                        Create SCIM Token
+                      </Button>
+                    </div>
+                  </FieldGroup>
+                </form>
               </div>
             ) : (
-              <Card className="border border-yellow-300 bg-yellow-50">
-                <div className="flex items-center mb-2 text-yellow-800">
+              <Card className="border border-yellow-300 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-950">
+                <div className="flex items-center mb-2 text-yellow-800 dark:text-yellow-300">
                   <ExclamationCircleOutlined className="h-5 w-5 mr-2" />
-                  <Title className="text-lg text-yellow-800">Your SCIM Token</Title>
+                  <Title className="text-lg text-yellow-800 dark:text-yellow-300">Your SCIM Token</Title>
                 </div>
-                <Text className="text-yellow-800 mb-4 font-medium">
+                <Text className="text-yellow-800 dark:text-yellow-300 mb-4 font-medium">
                   Make sure to copy this token now. You will not be able to see it again.
                 </Text>
                 <div className="flex items-center">
-                  <TextInput value={tokenData.key} className="grow mr-2 bg-white" type="password" disabled={true} />
+                  <Input value={tokenData.key} className="grow mr-2" type="password" disabled={true} readOnly />
                   <CopyToClipboard text={tokenData.key} onCopy={() => toast.success("Token copied to clipboard")}>
-                    <TremorButton variant="primary" className="flex items-center">
+                    <Button type="button" className="flex items-center">
                       <CopyOutlined className="h-4 w-4 mr-1" />
                       Copy
-                    </TremorButton>
+                    </Button>
                   </CopyToClipboard>
                 </div>
-                <TremorButton className="mt-4 flex items-center" variant="secondary" onClick={() => setTokenData(null)}>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  className="mt-4 flex items-center"
+                  onClick={() => setTokenData(null)}
+                >
                   <PlusCircleOutlined className="h-4 w-4 mr-1" />
                   Create Another Token
-                </TremorButton>
+                </Button>
               </Card>
             )}
           </div>
diff --git a/ui/litellm-dashboard/src/components/SSOModals.test.tsx b/ui/litellm-dashboard/src/components/SSOModals.test.tsx
index 47b1851459b..bee5f13c626 100644
--- a/ui/litellm-dashboard/src/components/SSOModals.test.tsx
+++ b/ui/litellm-dashboard/src/components/SSOModals.test.tsx
@@ -1,7 +1,10 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { Form, type FormInstance } from "antd";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import SSOModals from "./SSOModals";
+import { useSSOSettingsForm } from "./Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm";
+
+const user = () => userEvent.setup({ pointerEventsCheck: 0 });
 
 // Mock the networking functions
 vi.mock("./networking", () => ({
@@ -20,7 +23,7 @@ import { getSSOSettings, updateSSOSettings } from "./networking";
 describe("SSOModals", () => {
   it("should render the SSOModals component", () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("admin-panel");
 
       return (
         <SSOModals
@@ -44,7 +47,7 @@ describe("SSOModals", () => {
 
   it("should show validation error if proxy base url is not a valid URL", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("admin-panel");
       return (
         <SSOModals
           isAddSSOModalVisible={true}
@@ -64,11 +67,10 @@ describe("SSOModals", () => {
     render(<TestWrapper />);
 
     // Find and interact with the SSO provider select
-    const ssoProviderSelect = screen.getByLabelText("SSO Provider");
-    fireEvent.mouseDown(ssoProviderSelect);
+    await user().click(screen.getByLabelText("SSO Provider"));
     // Wait for dropdown and select Google
     const googleOption = await screen.findByText("Google SSO");
-    fireEvent.click(googleOption);
+    await user().click(googleOption);
 
     // Fill in the email field
     const emailInput = screen.getByLabelText("Proxy Admin Email");
@@ -94,7 +96,7 @@ describe("SSOModals", () => {
 
   it("should show validation error if proxy base url ends with trailing slash", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("admin-panel");
       return (
         <SSOModals
           isAddSSOModalVisible={true}
@@ -114,11 +116,10 @@ describe("SSOModals", () => {
     render(<TestWrapper />);
 
     // Find and interact with the SSO provider select
-    const ssoProviderSelect = screen.getByLabelText("SSO Provider");
-    fireEvent.mouseDown(ssoProviderSelect);
+    await user().click(screen.getByLabelText("SSO Provider"));
     // Wait for dropdown and select Google
     const googleOption = await screen.findByText("Google SSO");
-    fireEvent.click(googleOption);
+    await user().click(googleOption);
 
     // Fill in the email field
     const emailInput = screen.getByLabelText("Proxy Admin Email");
@@ -139,7 +140,7 @@ describe("SSOModals", () => {
 
   it("should allow typing https:// without interfering with slashes", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("admin-panel");
       return (
         <SSOModals
           isAddSSOModalVisible={true}
@@ -189,7 +190,7 @@ describe("SSOModals", () => {
 
   it("should only show URL format error for incomplete URLs, not trailing slash error", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("admin-panel");
       return (
         <SSOModals
           isAddSSOModalVisible={true}
@@ -209,11 +210,10 @@ describe("SSOModals", () => {
     render(<TestWrapper />);
 
     // Find and interact with the SSO provider select
-    const ssoProviderSelect = screen.getByLabelText("SSO Provider");
-    fireEvent.mouseDown(ssoProviderSelect);
+    await user().click(screen.getByLabelText("SSO Provider"));
     // Wait for dropdown and select Google
     const googleOption = await screen.findByText("Google SSO");
-    fireEvent.click(googleOption);
+    await user().click(googleOption);
 
     // Fill in the email field
     const emailInput = screen.getByLabelText("Proxy Admin Email");
@@ -258,7 +258,7 @@ describe("SSOModals", () => {
     (getSSOSettings as any).mockResolvedValue(mockSSOData);
 
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("admin-panel");
 
       return (
         <SSOModals
@@ -303,10 +303,10 @@ describe("SSOModals", () => {
     // Mock getSSOSettings to return empty data so form starts clean
     (getSSOSettings as any).mockResolvedValue({ values: {} });
 
-    let formInstance: any = null;
+    let formInstance: ReturnType<typeof useSSOSettingsForm> | null = null;
 
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("admin-panel");
       formInstance = form;
 
       return (
@@ -333,16 +333,16 @@ describe("SSOModals", () => {
     });
 
     // Set the provider directly using the form to trigger conditional rendering
-    formInstance.setFieldsValue({ sso_provider: "okta" });
+    formInstance!.setValue("sso_provider", "okta");
 
     // Wait for the "Use Role Mappings" checkbox to appear
     await waitFor(() => {
-      expect(screen.getByLabelText("Use Role Mappings")).toBeInTheDocument();
+      expect(screen.getAllByLabelText("Use Role Mappings")[0]).toBeInTheDocument();
     });
 
     // Enable role mappings
-    const roleMappingsCheckbox = screen.getByLabelText("Use Role Mappings");
-    fireEvent.click(roleMappingsCheckbox);
+    const roleMappingsCheckbox = screen.getAllByLabelText("Use Role Mappings")[0];
+    await user().click(roleMappingsCheckbox);
 
     // Fill required fields
     const emailInput = screen.getByLabelText("Proxy Admin Email");
@@ -411,10 +411,10 @@ describe("SSOModals", () => {
     vi.mocked(updateSSOSettings).mockResolvedValue({});
     vi.mocked(getSSOSettings).mockResolvedValue({ values: {} });
 
-    let formInstance: FormInstance | null = null;
+    let formInstance: ReturnType<typeof useSSOSettingsForm> | null = null;
 
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("admin-panel");
       formInstance = form;
 
       return (
@@ -439,7 +439,7 @@ describe("SSOModals", () => {
       expect(getSSOSettings).toHaveBeenCalledWith("test-token");
     });
 
-    formInstance?.setFieldsValue({ sso_provider: "saml" });
+    formInstance!.setValue("sso_provider", "saml");
 
     await waitFor(() => {
       expect(screen.getByLabelText("IdP Metadata URL")).toBeInTheDocument();
@@ -457,7 +457,7 @@ describe("SSOModals", () => {
     fireEvent.change(screen.getByLabelText("SP Entity ID"), {
       target: { value: "https://proxy.example.com/sso/saml/metadata" },
     });
-    fireEvent.click(screen.getByLabelText("Allow IdP-initiated (unsolicited) responses"));
+    await user().click(screen.getAllByLabelText("Allow IdP-initiated (unsolicited) responses")[0]);
 
     fireEvent.click(screen.getByText("Save"));
 
@@ -482,7 +482,7 @@ describe("SSOModals", () => {
     (toast.success as any).mockImplementation(() => {});
 
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("admin-panel");
 
       return (
         <SSOModals
@@ -544,7 +544,7 @@ describe("SSOModals", () => {
 
   it("renders provider logos in the SSO provider dropdown", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("admin-panel");
       return (
         <SSOModals
           isAddSSOModalVisible={true}
@@ -563,7 +563,7 @@ describe("SSOModals", () => {
 
     render(<TestWrapper />);
 
-    fireEvent.mouseDown(screen.getByLabelText("SSO Provider"));
+    await user().click(screen.getByLabelText("SSO Provider"));
 
     await waitFor(() => {
       expect(screen.getAllByAltText("Google SSO logo").length).toBeGreaterThan(0);
diff --git a/ui/litellm-dashboard/src/components/SSOModals.tsx b/ui/litellm-dashboard/src/components/SSOModals.tsx
index 6c7c68e326f..4a156c3b30a 100644
--- a/ui/litellm-dashboard/src/components/SSOModals.tsx
+++ b/ui/litellm-dashboard/src/components/SSOModals.tsx
@@ -1,22 +1,34 @@
 import React, { useEffect, useState } from "react";
-import { Modal, Form, Button as Button2, Select, Checkbox } from "antd";
-import { Text, TextInput } from "@tremor/react";
+import { FormProvider, useWatch, type UseFormReturn } from "react-hook-form";
+import { Modal } from "antd";
+import { Text } from "@tremor/react";
 import { getSSOSettings, updateSSOSettings } from "./networking";
 import { toast } from "@/lib/toast";
 import { parseErrorMessage } from "./shared/errorUtils";
-import { Logo } from "@/components/molecules/logo/Logo";
-import { ssoProviderDisplayNames, ssoProviderLogoMap } from "./Settings/AdminSettings/SSOSettings/constants";
-import { renderProviderFields } from "./Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm";
+import { Button } from "@/components/ui/button";
+import { FieldGroup } from "@/components/shared/form/field";
+import {
+  GroupClaimField,
+  MappingToggleField,
+  ProxyAdminEmailField,
+  ProxyBaseUrlField,
+  RoleMappingTeamFields,
+  SSOProviderSelectField,
+  emptySSOSettingsFormValues,
+  renderProviderFields,
+  submitMountedSSOValues,
+  type SSOSettingsFormValues,
+} from "./Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm";
 
 interface SSOModalsProps {
   isAddSSOModalVisible: boolean;
   isInstructionsModalVisible: boolean;
   handleAddSSOOk: () => void;
   handleAddSSOCancel: () => void;
-  handleShowInstructions: (formValues: Record<string, any>) => void;
+  handleShowInstructions: (formValues: SSOSettingsFormValues) => void;
   handleInstructionsOk: () => void;
   handleInstructionsCancel: () => void;
-  form: any; // Replace with proper Form type if available
+  form: UseFormReturn<SSOSettingsFormValues>;
   accessToken: string | null;
   ssoConfigured?: boolean; // Add optional prop to indicate if SSO is configured
 }
@@ -45,6 +57,9 @@ const SSOModals: React.FC<SSOModalsProps> = ({
   ssoConfigured = false, // Default to false if not provided
 }) => {
   const [isClearConfirmModalVisible, setIsClearConfirmModalVisible] = useState(false);
+  const provider = useWatch({ control: form.control, name: "sso_provider" });
+  const useRoleMappings = useWatch({ control: form.control, name: "use_role_mappings" });
+  const showRoleMappingToggle = provider === "okta" || provider === "generic";
 
   // Load existing SSO settings when modal opens
   useEffect(() => {
@@ -79,20 +94,29 @@ const SSOModals: React.FC<SSOModalsProps> = ({
             }
 
             // Set form values with existing data (excluding UI access control fields)
-            const formValues = {
-              sso_provider: selectedProvider,
+            const formValues: SSOSettingsFormValues = {
+              sso_provider: selectedProvider ?? "",
               proxy_base_url: ssoData.values.proxy_base_url,
               user_email: ssoData.values.user_email,
-              ...ssoData.values,
+              google_client_id: ssoData.values.google_client_id,
+              google_client_secret: ssoData.values.google_client_secret,
+              microsoft_client_id: ssoData.values.microsoft_client_id,
+              microsoft_client_secret: ssoData.values.microsoft_client_secret,
+              microsoft_tenant: ssoData.values.microsoft_tenant,
+              generic_client_id: ssoData.values.generic_client_id,
+              generic_client_secret: ssoData.values.generic_client_secret,
+              generic_authorization_endpoint: ssoData.values.generic_authorization_endpoint,
+              generic_token_endpoint: ssoData.values.generic_token_endpoint,
+              generic_userinfo_endpoint: ssoData.values.generic_userinfo_endpoint,
+              generic_scope: ssoData.values.generic_scope,
+              saml_idp_metadata_url: ssoData.values.saml_idp_metadata_url,
+              saml_idp_metadata_xml: ssoData.values.saml_idp_metadata_xml,
+              saml_sp_entity_id: ssoData.values.saml_sp_entity_id,
               ...roleMappingFields,
               saml_allow_unsolicited: ssoData.values.saml_allow_unsolicited === "true",
             };
 
-            // Clear form first, then set values with a small delay to ensure proper initialization
-            form.resetFields();
-            setTimeout(() => {
-              form.setFieldsValue(formValues);
-            }, 100);
+            form.reset({ ...emptySSOSettingsFormValues, ...formValues });
           }
         } catch (error) {
           console.error("Failed to load SSO settings:", error);
@@ -104,7 +128,7 @@ const SSOModals: React.FC<SSOModalsProps> = ({
   }, [isAddSSOModalVisible, accessToken, form]);
 
   // Enhanced form submission handler
-  const handleFormSubmit = async (formValues: Record<string, any>) => {
+  const handleFormSubmit = async (formValues: SSOSettingsFormValues) => {
     if (!accessToken) {
       toast.fromError("No access token available");
       return;
@@ -122,7 +146,7 @@ const SSOModals: React.FC<SSOModalsProps> = ({
         ...rest
       } = formValues;
 
-      const payload: any = {
+      const payload: Record<string, unknown> = {
         ...rest,
       };
 
@@ -152,7 +176,7 @@ const SSOModals: React.FC<SSOModalsProps> = ({
         payload.role_mappings = {
           provider: "generic",
           group_claim,
-          default_role: defaultRoleMapping[default_role] || "internal_user",
+          default_role: (default_role ? defaultRoleMapping[default_role] : undefined) || "internal_user",
           roles: {
             proxy_admin: splitTeams(proxy_admin_teams),
             proxy_admin_viewer: splitTeams(admin_viewer_teams),
@@ -206,7 +230,7 @@ const SSOModals: React.FC<SSOModalsProps> = ({
       await updateSSOSettings(accessToken, clearSettings);
 
       // Clear the form
-      form.resetFields();
+      form.reset(emptySSOSettingsFormValues);
 
       // Close the confirmation modal
       setIsClearConfirmModalVisible(false);
@@ -232,186 +256,36 @@ const SSOModals: React.FC<SSOModalsProps> = ({
         onOk={handleAddSSOOk}
         onCancel={handleAddSSOCancel}
       >
-        <Form
-          form={form}
-          onFinish={handleFormSubmit}
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 16 }}
-          labelAlign="left"
-        >
-          <>
-            <Form.Item
-              label="SSO Provider"
-              name="sso_provider"
-              rules={[{ required: true, message: "Please select an SSO provider" }]}
-            >
-              <Select>
-                {Object.entries(ssoProviderLogoMap).map(([value, logo]) => (
-                  <Select.Option key={value} value={value}>
-                    <div style={{ display: "flex", alignItems: "center", padding: "4px 0" }}>
-                      {logo && (
-                        <Logo
-                          src={logo}
-                          label={ssoProviderDisplayNames[value] || value}
-                          className="h-6 w-6 mr-3 object-contain"
-                        />
-                      )}
-                      <span>
-                        {ssoProviderDisplayNames[value] || value.charAt(0).toUpperCase() + value.slice(1) + " SSO"}
-                      </span>
-                    </div>
-                  </Select.Option>
-                ))}
-              </Select>
-            </Form.Item>
-
-            <Form.Item
-              noStyle
-              shouldUpdate={(prevValues, currentValues) => prevValues.sso_provider !== currentValues.sso_provider}
-            >
-              {({ getFieldValue }) => {
-                const provider = getFieldValue("sso_provider");
-                return provider ? renderProviderFields(provider) : null;
-              }}
-            </Form.Item>
-
-            <Form.Item
-              label="Proxy Admin Email"
-              name="user_email"
-              rules={[{ required: true, message: "Please enter the email of the proxy admin" }]}
-            >
-              <TextInput />
-            </Form.Item>
-            <Form.Item
-              label="Proxy Base URL"
-              name="proxy_base_url"
-              normalize={(value) => value?.trim()}
-              rules={[
-                { required: true, message: "Please enter the proxy base url" },
-                {
-                  pattern: /^https?:\/\/.+/,
-                  message: "URL must start with http:// or https://",
-                },
-                {
-                  validator: (_, value) => {
-                    // Only check for trailing slash if the URL starts with http:// or https://
-                    if (value && /^https?:\/\/.+/.test(value) && value.endsWith("/")) {
-                      return Promise.reject("URL must not end with a trailing slash");
-                    }
-                    return Promise.resolve();
-                  },
-                },
-              ]}
-            >
-              <TextInput placeholder="https://example.com" />
-            </Form.Item>
-
-            <Form.Item
-              noStyle
-              shouldUpdate={(prevValues, currentValues) => prevValues.sso_provider !== currentValues.sso_provider}
-            >
-              {({ getFieldValue }) => {
-                const provider = getFieldValue("sso_provider");
-                return provider === "okta" || provider === "generic" ? (
-                  <Form.Item label="Use Role Mappings" name="use_role_mappings" valuePropName="checked">
-                    <Checkbox />
-                  </Form.Item>
-                ) : null;
-              }}
-            </Form.Item>
-
-            <Form.Item
-              noStyle
-              shouldUpdate={(prevValues, currentValues) =>
-                prevValues.use_role_mappings !== currentValues.use_role_mappings
-              }
-            >
-              {({ getFieldValue }) => {
-                const useRoleMappings = getFieldValue("use_role_mappings");
-                return useRoleMappings ? (
-                  <Form.Item
-                    label="Group Claim"
-                    name="group_claim"
-                    rules={[{ required: true, message: "Please enter the group claim" }]}
-                  >
-                    <TextInput />
-                  </Form.Item>
-                ) : null;
-              }}
-            </Form.Item>
-
-            <Form.Item
-              noStyle
-              shouldUpdate={(prevValues, currentValues) =>
-                prevValues.use_role_mappings !== currentValues.use_role_mappings
-              }
-            >
-              {({ getFieldValue }) => {
-                const useRoleMappings = getFieldValue("use_role_mappings");
-                return useRoleMappings ? (
-                  <>
-                    <Form.Item label="Default Role" name="default_role" initialValue="Internal User">
-                      <Select>
-                        <Select.Option value="internal_user_viewer">Internal Viewer</Select.Option>
-                        <Select.Option value="internal_user">Internal User</Select.Option>
-                        <Select.Option value="proxy_admin_viewer">Admin Viewer</Select.Option>
-                        <Select.Option value="proxy_admin">Proxy Admin</Select.Option>
-                      </Select>
-                    </Form.Item>
-
-                    <Form.Item label="Proxy Admin Teams" name="proxy_admin_teams">
-                      <TextInput />
-                    </Form.Item>
-
-                    <Form.Item label="Admin Viewer Teams" name="admin_viewer_teams">
-                      <TextInput />
-                    </Form.Item>
-
-                    <Form.Item label="Internal User Teams" name="internal_user_teams">
-                      <TextInput />
-                    </Form.Item>
-
-                    <Form.Item label="Internal Viewer Teams" name="internal_viewer_teams">
-                      <TextInput />
-                    </Form.Item>
-                  </>
-                ) : null;
-              }}
-            </Form.Item>
-          </>
-          <div
-            style={{
-              textAlign: "right",
-              marginTop: "10px",
-              display: "flex",
-              justifyContent: "flex-end",
-              alignItems: "center",
-              gap: "8px",
+        <FormProvider {...form}>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              submitMountedSSOValues(form, "admin-panel", handleFormSubmit)();
             }}
           >
-            {ssoConfigured && (
-              <Button2
-                onClick={() => setIsClearConfirmModalVisible(true)}
-                style={{
-                  backgroundColor: "#6366f1",
-                  borderColor: "#6366f1",
-                  color: "white",
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.backgroundColor = "#5558eb";
-                  e.currentTarget.style.borderColor = "#5558eb";
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.backgroundColor = "#6366f1";
-                  e.currentTarget.style.borderColor = "#6366f1";
-                }}
-              >
-                Clear
-              </Button2>
-            )}
-            <Button2 htmlType="submit">Save</Button2>
-          </div>
-        </Form>
+            <FieldGroup>
+              <SSOProviderSelectField />
+              {provider ? renderProviderFields(provider) : null}
+              <ProxyAdminEmailField />
+              <ProxyBaseUrlField />
+              {showRoleMappingToggle && <MappingToggleField name="use_role_mappings" label="Use Role Mappings" />}
+              {useRoleMappings && (
+                <>
+                  <GroupClaimField />
+                  <RoleMappingTeamFields />
+                </>
+              )}
+            </FieldGroup>
+            <div className="mt-4 flex items-center justify-end gap-2">
+              {ssoConfigured && (
+                <Button type="button" variant="secondary" onClick={() => setIsClearConfirmModalVisible(true)}>
+                  Clear
+                </Button>
+              )}
+              <Button type="submit">Save</Button>
+            </div>
+          </form>
+        </FormProvider>
       </Modal>
 
       {/* Clear Confirmation Modal */}
@@ -448,7 +322,9 @@ const SSOModals: React.FC<SSOModalsProps> = ({
         <Text className="mt-2">3. Confirm your SSO is configured correctly and you can login on the new Tab</Text>
         <Text className="mt-2">4. If Step 3 is successful, you can close this tab</Text>
         <div style={{ textAlign: "right", marginTop: "10px" }}>
-          <Button2 onClick={handleInstructionsOk}>Done</Button2>
+          <Button type="button" onClick={handleInstructionsOk}>
+            Done
+          </Button>
         </div>
       </Modal>
     </>
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.test.tsx
new file mode 100644
index 00000000000..2eb2137ab6d
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.test.tsx
@@ -0,0 +1,190 @@
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "../../../../../tests/test-utils";
+import EditHashicorpVaultModal from "./EditHashicorpVaultModal";
+import { useHashicorpVaultConfig } from "@/app/(dashboard)/hooks/configOverrides/useHashicorpVaultConfig";
+import { useUpdateHashicorpVaultConfig } from "@/app/(dashboard)/hooks/configOverrides/useUpdateHashicorpVaultConfig";
+
+vi.mock("@/app/(dashboard)/hooks/configOverrides/useHashicorpVaultConfig", () => ({
+  useHashicorpVaultConfig: vi.fn(),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/configOverrides/useUpdateHashicorpVaultConfig", () => ({
+  useUpdateHashicorpVaultConfig: vi.fn(),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({
+  default: () => ({ accessToken: "sk-access-token" }),
+}));
+
+vi.mock("@/lib/toast", () => ({
+  toast: { success: vi.fn(), fromError: vi.fn() },
+}));
+
+const ALL_FIELDS = [
+  "vault_addr",
+  "vault_namespace",
+  "vault_mount_name",
+  "vault_path_prefix",
+  "vault_token",
+  "approle_role_id",
+  "approle_secret_id",
+  "approle_mount_path",
+  "client_cert",
+  "client_key",
+  "vault_cert_role",
+] as const;
+
+const propertiesFor = (fields: readonly string[]) =>
+  Object.fromEntries(fields.map((name) => [name, { description: `${name} description` }]));
+
+const mutate = vi.fn();
+
+const setup = (options?: { values?: Record<string, unknown>; fields?: readonly string[] }) => {
+  vi.mocked(useHashicorpVaultConfig).mockReturnValue({
+    data: {
+      field_schema: { properties: propertiesFor(options?.fields ?? ALL_FIELDS) },
+      values: options?.values ?? {},
+    },
+  } as unknown as ReturnType<typeof useHashicorpVaultConfig>);
+
+  vi.mocked(useUpdateHashicorpVaultConfig).mockReturnValue({
+    mutate,
+    isPending: false,
+  } as unknown as ReturnType<typeof useUpdateHashicorpVaultConfig>);
+};
+
+const renderModal = (onSuccess = vi.fn(), onCancel = vi.fn()) =>
+  renderWithProviders(<EditHashicorpVaultModal isVisible={true} onCancel={onCancel} onSuccess={onSuccess} />);
+
+const save = async (user: ReturnType<typeof userEvent.setup>) =>
+  user.click(screen.getByRole("button", { name: "Save" }));
+
+describe("EditHashicorpVaultModal", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("clears untouched non-sensitive fields and omits untouched sensitive fields", async () => {
+    setup({
+      values: {
+        vault_addr: "https://vault.example.com",
+        vault_namespace: "team-ns",
+        vault_token: "super-secret-token",
+        approle_secret_id: "super-secret-id",
+      },
+    });
+    const user = userEvent.setup();
+    renderModal();
+
+    await save(user);
+
+    await waitFor(() => {
+      expect(mutate).toHaveBeenCalledTimes(1);
+    });
+    expect(mutate.mock.calls[0][0]).toEqual({
+      vault_addr: "https://vault.example.com",
+      vault_namespace: "team-ns",
+      vault_mount_name: "",
+      vault_path_prefix: "",
+      approle_role_id: "",
+      approle_mount_path: "",
+      client_cert: "",
+      vault_cert_role: "",
+    });
+  });
+
+  it("sends a sensitive field only once it is typed into", async () => {
+    setup({ values: { vault_addr: "https://vault.example.com", vault_token: "super-secret-token" } });
+    const user = userEvent.setup();
+    renderModal();
+
+    await user.type(screen.getByLabelText("Token"), "rotated-token");
+    await save(user);
+
+    await waitFor(() => {
+      expect(mutate).toHaveBeenCalledTimes(1);
+    });
+    expect(mutate.mock.calls[0][0]).toMatchObject({ vault_token: "rotated-token" });
+  });
+
+  it("never seeds a stored secret into its input", () => {
+    setup({ values: { vault_token: "super-secret-token", approle_secret_id: "super-secret-id" } });
+    renderModal();
+
+    expect(screen.getByLabelText("Token")).toHaveValue("");
+    expect(screen.getByLabelText("Secret ID")).toHaveValue("");
+  });
+
+  it("renders only the fields the schema declares, and sends only those", async () => {
+    setup({ fields: ["vault_addr", "vault_token"], values: { vault_addr: "https://vault.example.com" } });
+    const user = userEvent.setup();
+    renderModal();
+
+    expect(screen.queryByLabelText("Namespace")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Role ID")).not.toBeInTheDocument();
+
+    await save(user);
+
+    await waitFor(() => {
+      expect(mutate).toHaveBeenCalledTimes(1);
+    });
+    expect(mutate.mock.calls[0][0]).toEqual({ vault_addr: "https://vault.example.com" });
+  });
+
+  it("blocks the submit when the vault address does not start with http", async () => {
+    setup({ values: {} });
+    const user = userEvent.setup();
+    renderModal();
+
+    await user.type(screen.getByLabelText("Vault Address"), "vault.example.com");
+    await save(user);
+
+    expect(await screen.findByText("Must start with http:// or https://")).toBeInTheDocument();
+    expect(mutate).not.toHaveBeenCalled();
+  });
+
+  it("accepts an empty vault address, because the pattern rule is not a required rule", async () => {
+    setup({ values: {} });
+    const user = userEvent.setup();
+    renderModal();
+
+    await save(user);
+
+    await waitFor(() => {
+      expect(mutate).toHaveBeenCalledTimes(1);
+    });
+    expect(mutate.mock.calls[0][0]).toMatchObject({ vault_addr: "" });
+  });
+
+  it("tells the admin a stored secret is kept when the field is left blank", () => {
+    setup({ values: { vault_token: "super-secret-token" } });
+    renderModal();
+
+    expect(screen.getByLabelText("Token")).toHaveAttribute(
+      "placeholder",
+      "Leave blank to keep existing (super-secret-token)",
+    );
+  });
+
+  it("falls back to the schema description when no secret is stored yet", () => {
+    setup({ values: {} });
+    renderModal();
+
+    expect(screen.getByLabelText("Token")).toHaveAttribute("placeholder", "vault_token description");
+  });
+
+  it("closes without saving when cancelled", async () => {
+    setup({ values: {} });
+    const onCancel = vi.fn();
+    const user = userEvent.setup();
+    renderModal(vi.fn(), onCancel);
+
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    expect(mutate).not.toHaveBeenCalled();
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.tsx
index 4904fa016a9..0658f28611a 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.tsx
@@ -4,17 +4,26 @@ import { useHashicorpVaultConfig } from "@/app/(dashboard)/hooks/configOverrides
 import { useUpdateHashicorpVaultConfig } from "@/app/(dashboard)/hooks/configOverrides/useUpdateHashicorpVaultConfig";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { toast } from "@/lib/toast";
-import { Button, Divider, Form, Input, Modal, Space, Typography } from "antd";
-import React, { useEffect } from "react";
+import { Modal } from "antd";
+import React, { useMemo } from "react";
+import { z } from "zod/v4";
+import { FieldGroup } from "@/components/shared/form/field";
+import { FormField } from "@/components/shared/form/FormField";
+import { PasswordInput } from "@/components/shared/PasswordInput";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
+import { Separator } from "@/components/ui/separator";
+import { useZodForm } from "@/lib/forms/useZodForm";
 import { SENSITIVE_FIELDS, FIELD_LABELS } from "./constants";
 
-interface FieldGroup {
+interface VaultFieldGroup {
   title: string;
   subtitle?: string;
   fields: string[];
 }
 
-const FIELD_GROUPS: FieldGroup[] = [
+const FIELD_GROUPS: VaultFieldGroup[] = [
   {
     title: "Connection",
     fields: ["vault_addr", "vault_namespace", "vault_mount_name", "vault_path_prefix"],
@@ -36,6 +45,22 @@ const FIELD_GROUPS: FieldGroup[] = [
   },
 ];
 
+type VaultFormValues = Record<string, string>;
+
+const buildSchema = (fields: readonly string[]): z.ZodType<VaultFormValues, VaultFormValues> =>
+  z.object(
+    Object.fromEntries(
+      fields.map((name) => [
+        name,
+        name === "vault_addr"
+          ? z.string().refine((value) => value.length === 0 || /^https?:\/\/.+/.test(value), {
+              message: "Must start with http:// or https://",
+            })
+          : z.string(),
+      ]),
+    ),
+  ) as unknown as z.ZodType<VaultFormValues, VaultFormValues>;
+
 interface EditHashicorpVaultModalProps {
   isVisible: boolean;
   onCancel: () => void;
@@ -43,41 +68,40 @@ interface EditHashicorpVaultModalProps {
 }
 
 const EditHashicorpVaultModal: React.FC<EditHashicorpVaultModalProps> = ({ isVisible, onCancel, onSuccess }) => {
-  const [form] = Form.useForm();
   const { accessToken } = useAuthorized();
   const { data } = useHashicorpVaultConfig();
   const { mutate, isPending } = useUpdateHashicorpVaultConfig(accessToken);
 
-  const schema = data?.field_schema;
-  const properties = schema?.properties ?? {};
-  const rawValues = data?.values ?? {};
+  const properties: Record<string, { description?: string }> = useMemo(
+    () => data?.field_schema?.properties ?? {},
+    [data],
+  );
+  const rawValues: Record<string, unknown> = useMemo(() => data?.values ?? {}, [data]);
 
-  useEffect(() => {
-    if (isVisible && data) {
-      form.resetFields();
-      // Only set non-sensitive fields — sensitive ones show as placeholders
-      const formValues: Record<string, any> = {};
-      for (const [key, value] of Object.entries(rawValues)) {
-        if (!SENSITIVE_FIELDS.has(key)) {
-          formValues[key] = value;
-        }
-      }
-      form.setFieldsValue(formValues);
-    }
-  }, [isVisible, data, form]);
+  const visibleFields = useMemo(
+    () => FIELD_GROUPS.flatMap((group) => group.fields).filter((name) => properties[name] !== undefined),
+    [properties],
+  );
 
-  const handleSubmit = (formValues: Record<string, any>) => {
-    const config: Record<string, any> = {};
-    for (const [key, value] of Object.entries(formValues)) {
-      if (value !== undefined && value !== null && value !== "") {
-        // Non-empty value → update
-        config[key] = value;
-      } else if (!SENSITIVE_FIELDS.has(key)) {
-        // Non-sensitive field cleared → send "" to clear it on the backend
-        config[key] = "";
-      }
-      // Sensitive field left blank → omit from payload (keep existing)
-    }
+  const seededValues = useMemo(
+    () =>
+      Object.fromEntries(
+        visibleFields.map((name) => [name, SENSITIVE_FIELDS.has(name) ? "" : ((rawValues[name] ?? "") as string)]),
+      ),
+    [visibleFields, rawValues],
+  );
+
+  const schema = useMemo(() => buildSchema(visibleFields), [visibleFields]);
+  const form = useZodForm(schema, { values: seededValues });
+
+  const handleSubmit = (formValues: VaultFormValues) => {
+    const config: Record<string, string> = Object.fromEntries(
+      Object.entries(formValues).flatMap(([key, value]) => {
+        if (value !== undefined && value !== null && value !== "") return [[key, value]];
+        if (!SENSITIVE_FIELDS.has(key)) return [[key, ""]];
+        return [];
+      }),
+    );
 
     mutate(config, {
       onSuccess: () => {
@@ -91,7 +115,7 @@ const EditHashicorpVaultModal: React.FC<EditHashicorpVaultModalProps> = ({ isVis
   };
 
   const handleCancel = () => {
-    form.resetFields();
+    form.reset(seededValues);
     onCancel();
   };
 
@@ -99,20 +123,21 @@ const EditHashicorpVaultModal: React.FC<EditHashicorpVaultModalProps> = ({ isVis
     const fieldSchema = properties[fieldName];
     if (!fieldSchema) return null;
 
-    const rules =
-      fieldName === "vault_addr"
-        ? [{ pattern: /^https?:\/\/.+/, message: "Must start with http:// or https://" }]
-        : undefined;
-
     const isSensitive = SENSITIVE_FIELDS.has(fieldName);
     const existingValue = rawValues[fieldName];
     const hasExistingValue = isSensitive && existingValue != null && existingValue !== "";
     const placeholder = hasExistingValue ? `Leave blank to keep existing (${existingValue})` : fieldSchema?.description;
 
     return (
-      <Form.Item key={fieldName} name={fieldName} label={FIELD_LABELS[fieldName] ?? fieldName} rules={rules}>
-        {isSensitive ? <Input.Password placeholder={placeholder} /> : <Input placeholder={fieldSchema?.description} />}
-      </Form.Item>
+      <FormField key={fieldName} control={form.control} name={fieldName} label={FIELD_LABELS[fieldName] ?? fieldName}>
+        {({ ref, ...field }) =>
+          isSensitive ? (
+            <PasswordInput ref={ref} placeholder={placeholder} {...field} />
+          ) : (
+            <Input ref={ref} placeholder={fieldSchema?.description} {...field} />
+          )
+        }
+      </FormField>
     );
   };
 
@@ -122,33 +147,28 @@ const EditHashicorpVaultModal: React.FC<EditHashicorpVaultModalProps> = ({ isVis
       open={isVisible}
       width={700}
       footer={
-        <Space>
-          <Button onClick={handleCancel} disabled={isPending}>
+        <div className="flex items-center justify-end gap-2">
+          <Button type="button" variant="outline" onClick={handleCancel} disabled={isPending}>
             Cancel
           </Button>
-          <Button type="primary" loading={isPending} onClick={() => form.submit()}>
+          <Button type="button" disabled={isPending} onClick={() => void form.handleSubmit(handleSubmit)()}>
+            {isPending && <UiLoadingSpinner className="size-4 mr-1" />}
             {isPending ? "Saving..." : "Save"}
           </Button>
-        </Space>
+        </div>
       }
       onCancel={handleCancel}
     >
-      <Form form={form} layout="vertical" onFinish={handleSubmit}>
+      <form onSubmit={form.handleSubmit(handleSubmit)}>
         {FIELD_GROUPS.map((group, index) => (
           <div key={group.title}>
-            {index > 0 && <Divider />}
-            <Typography.Title level={5} style={{ marginBottom: 4 }}>
-              {group.title}
-            </Typography.Title>
-            {group.subtitle && (
-              <Typography.Paragraph type="secondary" style={{ marginBottom: 16 }}>
-                {group.subtitle}
-              </Typography.Paragraph>
-            )}
-            {group.fields.map(renderField)}
+            {index > 0 && <Separator className="my-6" />}
+            <h5 className="mb-1 text-base font-semibold text-foreground">{group.title}</h5>
+            {group.subtitle && <p className="mb-4 text-sm text-muted-foreground">{group.subtitle}</p>}
+            <FieldGroup>{group.fields.map(renderField)}</FieldGroup>
           </div>
         ))}
-      </Form>
+      </form>
     </Modal>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/AddSSOSettingsModal.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/AddSSOSettingsModal.tsx
index a1f62ea4939..fcbb6300d70 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/AddSSOSettingsModal.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/AddSSOSettingsModal.tsx
@@ -2,9 +2,16 @@
 
 import { toast } from "@/lib/toast";
 import { parseErrorMessage } from "@/components/shared/errorUtils";
-import { Button, Form, Modal, Space } from "antd";
+import { Modal } from "antd";
 import React from "react";
-import BaseSSOSettingsForm from "./BaseSSOSettingsForm";
+import BaseSSOSettingsForm, {
+  emptySSOSettingsFormValues,
+  submitMountedSSOValues,
+  useSSOSettingsForm,
+  type SSOSettingsFormValues,
+} from "./BaseSSOSettingsForm";
+import { Button } from "@/components/ui/button";
+import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { useEditSSOSettings } from "@/app/(dashboard)/hooks/sso/useEditSSOSettings";
 import { processSSOSettingsPayload } from "../utils";
 
@@ -15,11 +22,10 @@ interface AddSSOSettingsModalProps {
 }
 
 const AddSSOSettingsModal: React.FC<AddSSOSettingsModalProps> = ({ isVisible, onCancel, onSuccess }) => {
-  const [form] = Form.useForm();
+  const form = useSSOSettingsForm("sso-settings");
   const { mutateAsync, isPending } = useEditSSOSettings();
 
-  // Enhanced form submission handler
-  const handleFormSubmit = async (formValues: Record<string, any>) => {
+  const handleFormSubmit = async (formValues: SSOSettingsFormValues) => {
     const payload = processSSOSettingsPayload(formValues);
 
     await mutateAsync(payload, {
@@ -34,7 +40,7 @@ const AddSSOSettingsModal: React.FC<AddSSOSettingsModalProps> = ({ isVisible, on
   };
 
   const handleCancel = () => {
-    form.resetFields();
+    form.reset(emptySSOSettingsFormValues);
     onCancel();
   };
 
@@ -44,14 +50,19 @@ const AddSSOSettingsModal: React.FC<AddSSOSettingsModalProps> = ({ isVisible, on
       open={isVisible}
       width={800}
       footer={
-        <Space>
-          <Button onClick={handleCancel} disabled={isPending}>
+        <div className="flex items-center justify-end gap-2">
+          <Button type="button" variant="outline" onClick={handleCancel} disabled={isPending}>
             Cancel
           </Button>
-          <Button loading={isPending} onClick={() => form.submit()}>
+          <Button
+            type="button"
+            disabled={isPending}
+            onClick={submitMountedSSOValues(form, "sso-settings", handleFormSubmit)}
+          >
+            {isPending && <UiLoadingSpinner className="size-4 mr-1" />}
             {isPending ? "Adding..." : "Add SSO"}
           </Button>
-        </Space>
+        </div>
       }
       onCancel={handleCancel}
     >
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.test.tsx
index 8043e41a2de..54566e1d75a 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.test.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.test.tsx
@@ -1,8 +1,20 @@
-import { Form } from "antd";
 import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { renderWithProviders } from "../../../../../../tests/test-utils";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import BaseSSOSettingsForm, { renderProviderFields, ssoProviderConfigs } from "./BaseSSOSettingsForm";
+import BaseSSOSettingsForm, {
+  emptySSOSettingsFormValues,
+  renderProviderFields,
+  ssoProviderConfigs,
+  submitMountedSSOValues,
+  useSSOSettingsForm,
+} from "./BaseSSOSettingsForm";
+
+const user = () => userEvent.setup({ pointerEventsCheck: 0 });
+
+const openProviderDropdown = async () => {
+  await user().click(screen.getByLabelText("SSO Provider"));
+};
 
 describe("BaseSSOSettingsForm", () => {
   afterEach(() => {
@@ -11,7 +23,7 @@ describe("BaseSSOSettingsForm", () => {
 
   it("should render", () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       const handleSubmit = vi.fn();
 
       return <BaseSSOSettingsForm form={form} onFormSubmit={handleSubmit} />;
@@ -26,7 +38,7 @@ describe("BaseSSOSettingsForm", () => {
 
   it("should render provider fields when provider is selected", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       const handleSubmit = vi.fn();
 
       return <BaseSSOSettingsForm form={form} onFormSubmit={handleSubmit} />;
@@ -34,13 +46,10 @@ describe("BaseSSOSettingsForm", () => {
 
     renderWithProviders(<TestWrapper />);
 
-    const providerSelect = screen.getByLabelText("SSO Provider");
-    await act(async () => {
-      fireEvent.mouseDown(providerSelect);
-    });
+    await openProviderDropdown();
 
     const googleOption = await screen.findByText(/google sso/i);
-    fireEvent.click(googleOption);
+    await user().click(googleOption);
 
     await waitFor(() => {
       expect(screen.getByText("Google Client ID")).toBeInTheDocument();
@@ -50,7 +59,7 @@ describe("BaseSSOSettingsForm", () => {
 
   it("should show role mappings fields for okta provider", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       const handleSubmit = vi.fn();
 
       return <BaseSSOSettingsForm form={form} onFormSubmit={handleSubmit} />;
@@ -58,13 +67,10 @@ describe("BaseSSOSettingsForm", () => {
 
     renderWithProviders(<TestWrapper />);
 
-    const providerSelect = screen.getByLabelText("SSO Provider");
-    await act(async () => {
-      fireEvent.mouseDown(providerSelect);
-    });
+    await openProviderDropdown();
 
     const oktaOption = await screen.findByText(/okta/i);
-    fireEvent.click(oktaOption);
+    await user().click(oktaOption);
 
     await waitFor(() => {
       expect(screen.getByText("Use Role Mappings")).toBeInTheDocument();
@@ -73,7 +79,7 @@ describe("BaseSSOSettingsForm", () => {
 
   it("should validate proxy base url format", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       const handleSubmit = vi.fn();
 
       return <BaseSSOSettingsForm form={form} onFormSubmit={handleSubmit} />;
@@ -94,7 +100,7 @@ describe("BaseSSOSettingsForm", () => {
 
   it("should validate proxy base url trailing slash", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       const handleSubmit = vi.fn();
 
       return <BaseSSOSettingsForm form={form} onFormSubmit={handleSubmit} />;
@@ -115,7 +121,7 @@ describe("BaseSSOSettingsForm", () => {
 
   it("should show role mappings fields when use_role_mappings is checked for generic provider", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       const handleSubmit = vi.fn();
 
       return <BaseSSOSettingsForm form={form} onFormSubmit={handleSubmit} />;
@@ -123,22 +129,16 @@ describe("BaseSSOSettingsForm", () => {
 
     renderWithProviders(<TestWrapper />);
 
-    const providerSelect = screen.getByLabelText("SSO Provider");
-    await act(async () => {
-      fireEvent.mouseDown(providerSelect);
-    });
+    await openProviderDropdown();
 
     const genericOption = await screen.findByText(/generic sso/i);
-    fireEvent.click(genericOption);
+    await user().click(genericOption);
 
     await waitFor(() => {
       expect(screen.getByText("Use Role Mappings")).toBeInTheDocument();
     });
 
-    const checkbox = screen.getByLabelText("Use Role Mappings");
-    await act(async () => {
-      fireEvent.click(checkbox);
-    });
+    await user().click(screen.getAllByLabelText("Use Role Mappings")[0]);
 
     await waitFor(() => {
       expect(screen.getByText("Group Claim")).toBeInTheDocument();
@@ -148,7 +148,7 @@ describe("BaseSSOSettingsForm", () => {
 
   it("should show team mappings checkbox for okta provider", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       const handleSubmit = vi.fn();
 
       return <BaseSSOSettingsForm form={form} onFormSubmit={handleSubmit} />;
@@ -156,13 +156,10 @@ describe("BaseSSOSettingsForm", () => {
 
     renderWithProviders(<TestWrapper />);
 
-    const providerSelect = screen.getByLabelText("SSO Provider");
-    await act(async () => {
-      fireEvent.mouseDown(providerSelect);
-    });
+    await openProviderDropdown();
 
     const oktaOption = await screen.findByText(/okta/i);
-    fireEvent.click(oktaOption);
+    await user().click(oktaOption);
 
     await waitFor(() => {
       expect(screen.getByText("Use Team Mappings")).toBeInTheDocument();
@@ -171,7 +168,7 @@ describe("BaseSSOSettingsForm", () => {
 
   it("should show team mappings checkbox for generic provider", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       const handleSubmit = vi.fn();
 
       return <BaseSSOSettingsForm form={form} onFormSubmit={handleSubmit} />;
@@ -179,13 +176,10 @@ describe("BaseSSOSettingsForm", () => {
 
     renderWithProviders(<TestWrapper />);
 
-    const providerSelect = screen.getByLabelText("SSO Provider");
-    await act(async () => {
-      fireEvent.mouseDown(providerSelect);
-    });
+    await openProviderDropdown();
 
     const genericOption = await screen.findByText(/generic sso/i);
-    fireEvent.click(genericOption);
+    await user().click(genericOption);
 
     await waitFor(() => {
       expect(screen.getByText("Use Team Mappings")).toBeInTheDocument();
@@ -194,7 +188,7 @@ describe("BaseSSOSettingsForm", () => {
 
   it("should show team IDs JWT field when use_team_mappings is checked for okta provider", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       const handleSubmit = vi.fn();
 
       return <BaseSSOSettingsForm form={form} onFormSubmit={handleSubmit} />;
@@ -202,22 +196,16 @@ describe("BaseSSOSettingsForm", () => {
 
     renderWithProviders(<TestWrapper />);
 
-    const providerSelect = screen.getByLabelText("SSO Provider");
-    await act(async () => {
-      fireEvent.mouseDown(providerSelect);
-    });
+    await openProviderDropdown();
 
     const oktaOption = await screen.findByText(/okta/i);
-    fireEvent.click(oktaOption);
+    await user().click(oktaOption);
 
     await waitFor(() => {
       expect(screen.getByText("Use Team Mappings")).toBeInTheDocument();
     });
 
-    const checkbox = screen.getByLabelText("Use Team Mappings");
-    await act(async () => {
-      fireEvent.click(checkbox);
-    });
+    await user().click(screen.getAllByLabelText("Use Team Mappings")[0]);
 
     await waitFor(() => {
       expect(screen.getByText("Team IDs JWT Field")).toBeInTheDocument();
@@ -226,7 +214,7 @@ describe("BaseSSOSettingsForm", () => {
 
   it("should not show team mappings checkbox for google provider", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       const handleSubmit = vi.fn();
 
       return <BaseSSOSettingsForm form={form} onFormSubmit={handleSubmit} />;
@@ -234,13 +222,10 @@ describe("BaseSSOSettingsForm", () => {
 
     renderWithProviders(<TestWrapper />);
 
-    const providerSelect = screen.getByLabelText("SSO Provider");
-    await act(async () => {
-      fireEvent.mouseDown(providerSelect);
-    });
+    await openProviderDropdown();
 
     const googleOption = await screen.findByText(/google sso/i);
-    fireEvent.click(googleOption);
+    await user().click(googleOption);
 
     await waitFor(() => {
       expect(screen.getByText("Google Client ID")).toBeInTheDocument();
@@ -297,9 +282,9 @@ describe("renderProviderFields", () => {
     // to the provider default. Dropping the field from ssoProviderConfigs must
     // fail here rather than silently in production.
     const handleSubmit = vi.fn();
-    let form: any;
+    let form!: ReturnType<typeof useSSOSettingsForm>;
     const TestWrapper = () => {
-      const [formInstance] = Form.useForm();
+      const formInstance = useSSOSettingsForm("sso-settings");
       form = formInstance;
       return <BaseSSOSettingsForm form={formInstance} onFormSubmit={handleSubmit} />;
     };
@@ -308,7 +293,8 @@ describe("renderProviderFields", () => {
 
     // Mirror EditSSOSettingsModal hydrating the form from the GET response.
     await act(async () => {
-      form.setFieldsValue({
+      form.reset({
+        ...emptySSOSettingsFormValues,
         sso_provider: "generic",
         generic_client_id: "client-id",
         generic_client_secret: "client-secret",
@@ -323,8 +309,8 @@ describe("renderProviderFields", () => {
 
     // The admin edits something else entirely and saves.
     await act(async () => {
-      form.setFieldsValue({ generic_token_endpoint: "https://idp.example.com/token/v2" });
-      form.submit();
+      form.setValue("generic_token_endpoint", "https://idp.example.com/token/v2");
+      submitMountedSSOValues(form, "sso-settings", handleSubmit)();
     });
 
     await waitFor(() => {
@@ -339,15 +325,13 @@ describe("renderProviderFields", () => {
 
   it("renders provider logos in the dropdown and falls back to a letter avatar on load error", async () => {
     const TestWrapper = () => {
-      const [form] = Form.useForm();
+      const form = useSSOSettingsForm("sso-settings");
       return <BaseSSOSettingsForm form={form} onFormSubmit={vi.fn()} />;
     };
 
     renderWithProviders(<TestWrapper />);
 
-    await act(async () => {
-      fireEvent.mouseDown(screen.getByLabelText("SSO Provider"));
-    });
+    await openProviderDropdown();
 
     await waitFor(() => {
       expect(screen.getAllByAltText("Google SSO logo").length).toBeGreaterThan(0);
@@ -372,4 +356,50 @@ describe("renderProviderFields", () => {
       expect(screen.getByText("O")).toBeInTheDocument();
     });
   });
+
+  it("blocks the submit and names the missing provider credential", async () => {
+    const handleSubmit = vi.fn();
+    let form!: ReturnType<typeof useSSOSettingsForm>;
+    const TestWrapper = () => {
+      const formInstance = useSSOSettingsForm("sso-settings");
+      form = formInstance;
+      return <BaseSSOSettingsForm form={formInstance} onFormSubmit={handleSubmit} />;
+    };
+
+    renderWithProviders(<TestWrapper />);
+
+    await act(async () => {
+      form.reset({
+        ...emptySSOSettingsFormValues,
+        sso_provider: "google",
+        google_client_secret: "a-secret",
+        user_email: "admin@example.com",
+        proxy_base_url: "https://gateway.example.com",
+      });
+    });
+
+    await act(async () => {
+      submitMountedSSOValues(form, "sso-settings", handleSubmit)();
+    });
+
+    expect(await screen.findByText("Please enter the google client id")).toBeInTheDocument();
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows the effective default role on an untouched form", async () => {
+    let form!: ReturnType<typeof useSSOSettingsForm>;
+    const TestWrapper = () => {
+      const formInstance = useSSOSettingsForm("sso-settings");
+      form = formInstance;
+      return <BaseSSOSettingsForm form={formInstance} onFormSubmit={vi.fn()} />;
+    };
+
+    renderWithProviders(<TestWrapper />);
+
+    await act(async () => {
+      form.reset({ ...emptySSOSettingsFormValues, sso_provider: "okta", use_role_mappings: true });
+    });
+
+    expect(await screen.findByLabelText("Default Role")).toHaveTextContent("Internal User");
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.tsx
index 7deac9cbbbc..26d0785529c 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.tsx
@@ -1,29 +1,65 @@
 "use client";
 
-import { TextInput } from "@tremor/react";
-import { Checkbox, Form, Input, Select } from "antd";
 import React from "react";
+import { FormProvider, useFormContext, useWatch, type UseFormReturn } from "react-hook-form";
+import { z } from "zod/v4";
 import { ssoProviderLogoMap, ssoProviderDisplayNames } from "../constants";
 import { Logo } from "@/components/molecules/logo/Logo";
+import { FieldGroup } from "@/components/shared/form/field";
+import { FormField } from "@/components/shared/form/FormField";
+import { PasswordInput } from "@/components/shared/PasswordInput";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { useZodForm } from "@/lib/forms/useZodForm";
 
-export interface BaseSSOSettingsFormProps {
-  form: any; // Replace with proper Form type if available
-  onFormSubmit: (formValues: Record<string, any>) => Promise<void>;
+export interface SSOSettingsFormValues {
+  sso_provider?: string;
+  google_client_id?: string;
+  google_client_secret?: string;
+  microsoft_client_id?: string;
+  microsoft_client_secret?: string;
+  microsoft_tenant?: string;
+  generic_client_id?: string;
+  generic_client_secret?: string;
+  generic_authorization_endpoint?: string;
+  generic_token_endpoint?: string;
+  generic_userinfo_endpoint?: string;
+  generic_scope?: string;
+  saml_idp_metadata_url?: string;
+  saml_idp_metadata_xml?: string;
+  saml_sp_entity_id?: string;
+  saml_allow_unsolicited?: boolean;
+  user_email?: string;
+  proxy_base_url?: string;
+  use_role_mappings?: boolean;
+  group_claim?: string;
+  default_role?: string;
+  proxy_admin_teams?: string;
+  admin_viewer_teams?: string;
+  internal_user_teams?: string;
+  internal_viewer_teams?: string;
+  use_team_mappings?: boolean;
+  team_ids_jwt_field?: string;
+}
+
+export interface BaseSSOSettingsFormProps {
+  form: UseFormReturn<SSOSettingsFormValues>;
+  onFormSubmit: (formValues: SSOSettingsFormValues) => Promise<void>;
 }
 
-// Define the SSO provider configuration type
 export interface SSOProviderConfig {
   envVarMap: Record<string, string>;
   fields: Array<{
     label: string;
-    name: string;
+    name: keyof SSOSettingsFormValues;
     placeholder?: string;
     required?: boolean;
     type?: "password" | "textarea" | "checkbox";
   }>;
 }
 
-// Define configurations for each SSO provider
 export const ssoProviderConfigs: Record<string, SSOProviderConfig> = {
   google: {
     envVarMap: {
@@ -128,224 +164,381 @@ export const ssoProviderConfigs: Record<string, SSOProviderConfig> = {
   },
 };
 
-// Helper function to render provider fields
+const ROLE_MAPPING_TEAM_FIELDS = [
+  "proxy_admin_teams",
+  "admin_viewer_teams",
+  "internal_user_teams",
+  "internal_viewer_teams",
+] as const;
+
+const supportsMappings = (provider: string | undefined): boolean => provider === "okta" || provider === "generic";
+
+const providerFieldNames = (provider: string | undefined): readonly string[] =>
+  provider ? ssoProviderConfigs[provider]?.fields.map((field) => field.name) ?? [] : [];
+
+export type SSOFormVariant = "sso-settings" | "admin-panel";
+
+export const mountedSSOFieldNames = (values: SSOSettingsFormValues, variant: SSOFormVariant): readonly string[] => {
+  const provider = values.sso_provider;
+  const showMappingToggles = supportsMappings(provider);
+  const roleFieldsVisible =
+    variant === "sso-settings"
+      ? Boolean(values.use_role_mappings) && showMappingToggles
+      : Boolean(values.use_role_mappings);
+  const teamFieldsVisible = variant === "sso-settings" && Boolean(values.use_team_mappings) && showMappingToggles;
+
+  return [
+    "sso_provider",
+    ...providerFieldNames(provider),
+    "user_email",
+    "proxy_base_url",
+    ...(showMappingToggles ? ["use_role_mappings"] : []),
+    ...(roleFieldsVisible ? ["group_claim", "default_role", ...ROLE_MAPPING_TEAM_FIELDS] : []),
+    ...(variant === "sso-settings" && showMappingToggles ? ["use_team_mappings"] : []),
+    ...(teamFieldsVisible ? ["team_ids_jwt_field"] : []),
+  ];
+};
+
+export const pickMountedSSOValues = (values: SSOSettingsFormValues, variant: SSOFormVariant): SSOSettingsFormValues =>
+  Object.fromEntries(
+    mountedSSOFieldNames(values, variant).map((name) => [name, values[name as keyof SSOSettingsFormValues]]),
+  );
+
+export const submitMountedSSOValues =
+  (
+    form: UseFormReturn<SSOSettingsFormValues>,
+    variant: SSOFormVariant,
+    onFormSubmit: (formValues: SSOSettingsFormValues) => Promise<void> | void,
+  ) =>
+  () =>
+    void form.handleSubmit((values) => onFormSubmit(pickMountedSSOValues(values, variant)))();
+
+const REQUIRED_MESSAGES: Record<string, string> = {
+  sso_provider: "Please select an SSO provider",
+  user_email: "Please enter the email of the proxy admin",
+  proxy_base_url: "Please enter the proxy base url",
+  group_claim: "Please enter the group claim",
+  team_ids_jwt_field: "Please enter the team IDs JWT field",
+};
+
+const isBlank = (value: unknown): boolean => value === undefined || value === null || value === "";
+
+export const buildSSOSettingsSchema = (variant: SSOFormVariant) =>
+  z.custom<SSOSettingsFormValues>().superRefine((values, ctx) => {
+    const mounted = new Set(mountedSSOFieldNames(values, variant));
+
+    const requireField = (name: string) => {
+      if (mounted.has(name) && isBlank(values[name as keyof SSOSettingsFormValues])) {
+        ctx.addIssue({ code: "custom", path: [name], message: REQUIRED_MESSAGES[name] });
+      }
+    };
+
+    requireField("sso_provider");
+    requireField("user_email");
+    requireField("group_claim");
+    requireField("team_ids_jwt_field");
+
+    const providerConfig = values.sso_provider ? ssoProviderConfigs[values.sso_provider] : undefined;
+    providerConfig?.fields.forEach((field) => {
+      if (field.required === false) return;
+      if (!isBlank(values[field.name])) return;
+      ctx.addIssue({
+        code: "custom",
+        path: [field.name],
+        message: `Please enter the ${field.label.toLowerCase()}`,
+      });
+    });
+
+    const proxyBaseUrl = values.proxy_base_url;
+    if (isBlank(proxyBaseUrl)) {
+      ctx.addIssue({ code: "custom", path: ["proxy_base_url"], message: REQUIRED_MESSAGES.proxy_base_url });
+      return;
+    }
+    if (!/^https?:\/\/.+/.test(proxyBaseUrl as string)) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["proxy_base_url"],
+        message: "URL must start with http:// or https://",
+      });
+      return;
+    }
+    if ((proxyBaseUrl as string).endsWith("/")) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["proxy_base_url"],
+        message: "URL must not end with a trailing slash",
+      });
+    }
+  });
+
+export const emptySSOSettingsFormValues: SSOSettingsFormValues = {
+  sso_provider: "",
+  google_client_id: "",
+  google_client_secret: "",
+  microsoft_client_id: "",
+  microsoft_client_secret: "",
+  microsoft_tenant: "",
+  generic_client_id: "",
+  generic_client_secret: "",
+  generic_authorization_endpoint: "",
+  generic_token_endpoint: "",
+  generic_userinfo_endpoint: "",
+  user_email: "",
+  proxy_base_url: "",
+  default_role: "internal_user",
+};
+
+export const useSSOSettingsForm = (
+  variant: SSOFormVariant,
+  values?: SSOSettingsFormValues,
+): UseFormReturn<SSOSettingsFormValues> =>
+  useZodForm(buildSSOSettingsSchema(variant), {
+    mode: "onChange",
+    defaultValues: emptySSOSettingsFormValues,
+    ...(values ? { values } : {}),
+  });
+
+const SSOProviderField = ({ field }: { field: SSOProviderConfig["fields"][number] }) => {
+  const { control } = useFormContext<SSOSettingsFormValues>();
+
+  if (field.type === "checkbox") {
+    return (
+      <FormField control={control} name={field.name} label={field.label}>
+        {({ value, onChange, onBlur, id, ...rest }) => (
+          <Checkbox
+            id={id}
+            checked={Boolean(value)}
+            onCheckedChange={onChange}
+            onBlur={onBlur}
+            aria-invalid={rest["aria-invalid"]}
+            aria-describedby={rest["aria-describedby"]}
+          />
+        )}
+      </FormField>
+    );
+  }
+
+  return (
+    <FormField control={control} name={field.name} label={field.label}>
+      {({ ref, value, ...rest }) => {
+        const shared = { placeholder: field.placeholder, value: (value as string) ?? "", ...rest };
+        if (field.type === "textarea") return <Textarea ref={ref} rows={4} {...shared} />;
+        if (field.type === "password" || field.name.includes("client")) return <PasswordInput ref={ref} {...shared} />;
+        return <Input ref={ref} {...shared} />;
+      }}
+    </FormField>
+  );
+};
+
 export const renderProviderFields = (provider: string) => {
   const config = ssoProviderConfigs[provider];
   if (!config) return null;
 
-  return config.fields.map((field) => {
-    const isRequired = field.required !== false;
-    const rules = isRequired ? [{ required: true, message: `Please enter the ${field.label.toLowerCase()}` }] : [];
-    let control: React.ReactNode;
-    if (field.type === "checkbox") {
-      control = <Checkbox />;
-    } else if (field.type === "textarea") {
-      control = <Input.TextArea rows={4} placeholder={field.placeholder} />;
-    } else if (field.type === "password" || field.name.includes("client")) {
-      control = <Input.Password />;
-    } else {
-      control = <TextInput placeholder={field.placeholder} />;
-    }
-    return (
-      <Form.Item
-        key={field.name}
-        label={field.label}
-        name={field.name}
-        rules={rules}
-        valuePropName={field.type === "checkbox" ? "checked" : undefined}
-      >
-        {control}
-      </Form.Item>
-    );
-  });
+  return config.fields.map((field) => <SSOProviderField key={field.name} field={field} />);
 };
 
-const BaseSSOSettingsForm: React.FC<BaseSSOSettingsFormProps> = ({ form, onFormSubmit }) => {
+export const SSOProviderSelectField = () => {
+  const { control } = useFormContext<SSOSettingsFormValues>();
+
   return (
-    <div>
-      <Form form={form} onFinish={onFormSubmit} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} labelAlign="left">
-        <Form.Item
-          label="SSO Provider"
-          name="sso_provider"
-          rules={[{ required: true, message: "Please select an SSO provider" }]}
-        >
-          <Select>
-            {Object.entries(ssoProviderLogoMap).map(([value, logo]) => (
-              <Select.Option key={value} value={value}>
-                <div style={{ display: "flex", alignItems: "center", padding: "4px 0" }}>
+    <FormField control={control} name="sso_provider" label="SSO Provider">
+      {({ value, onChange, onBlur, id, ...rest }) => (
+        <Select value={(value as string) ?? ""} onValueChange={onChange}>
+          <SelectTrigger
+            id={id}
+            onBlur={onBlur}
+            aria-invalid={rest["aria-invalid"]}
+            aria-describedby={rest["aria-describedby"]}
+            className="w-full"
+          >
+            <SelectValue>{(provider: string) => (provider ? providerOptionLabel(provider) : "")}</SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(ssoProviderLogoMap).map(([optionValue, logo]) => (
+              <SelectItem key={optionValue} value={optionValue}>
+                <span className="flex items-center py-1">
                   {logo && (
                     <Logo
                       src={logo}
-                      label={ssoProviderDisplayNames[value] || value}
+                      label={ssoProviderDisplayNames[optionValue] || optionValue}
                       className="h-6 w-6 mr-3 object-contain"
                     />
                   )}
-                  <span>
-                    {ssoProviderDisplayNames[value] || value.charAt(0).toUpperCase() + value.slice(1) + " SSO"}
-                  </span>
-                </div>
-              </Select.Option>
+                  <span>{providerOptionLabel(optionValue)}</span>
+                </span>
+              </SelectItem>
             ))}
+          </SelectContent>
+        </Select>
+      )}
+    </FormField>
+  );
+};
+
+export const ProxyAdminEmailField = () => {
+  const { control } = useFormContext<SSOSettingsFormValues>();
+
+  return (
+    <FormField control={control} name="user_email" label="Proxy Admin Email">
+      {({ ref, value, ...rest }) => <Input ref={ref} value={(value as string) ?? ""} {...rest} />}
+    </FormField>
+  );
+};
+
+export const ProxyBaseUrlField = () => {
+  const { control } = useFormContext<SSOSettingsFormValues>();
+
+  return (
+    <FormField control={control} name="proxy_base_url" label="Proxy Base URL">
+      {({ ref, value, onChange, ...rest }) => (
+        <Input
+          ref={ref}
+          placeholder="https://example.com"
+          value={(value as string) ?? ""}
+          onChange={(event) => onChange(event.target.value.trim())}
+          {...rest}
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const MappingToggleField = ({
+  name,
+  label,
+}: {
+  name: "use_role_mappings" | "use_team_mappings";
+  label: string;
+}) => {
+  const { control } = useFormContext<SSOSettingsFormValues>();
+
+  return (
+    <FormField control={control} name={name} label={label}>
+      {({ value, onChange, onBlur, id, ...rest }) => (
+        <Checkbox
+          id={id}
+          checked={Boolean(value)}
+          onCheckedChange={onChange}
+          onBlur={onBlur}
+          aria-invalid={rest["aria-invalid"]}
+          aria-describedby={rest["aria-describedby"]}
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const GroupClaimField = () => {
+  const { control } = useFormContext<SSOSettingsFormValues>();
+
+  return (
+    <FormField control={control} name="group_claim" label="Group Claim">
+      {({ ref, value, ...rest }) => <Input ref={ref} value={(value as string) ?? ""} {...rest} />}
+    </FormField>
+  );
+};
+
+const DEFAULT_ROLE_OPTIONS: ReadonlyArray<{ value: string; label: string }> = [
+  { value: "internal_user_viewer", label: "Internal Viewer" },
+  { value: "internal_user", label: "Internal User" },
+  { value: "proxy_admin_viewer", label: "Admin Viewer" },
+  { value: "proxy_admin", label: "Proxy Admin" },
+];
+
+const providerOptionLabel = (value: string) =>
+  ssoProviderDisplayNames[value] || value.charAt(0).toUpperCase() + value.slice(1) + " SSO";
+
+export const RoleMappingTeamFields = () => {
+  const { control } = useFormContext<SSOSettingsFormValues>();
+
+  return (
+    <>
+      <FormField control={control} name="default_role" label="Default Role">
+        {({ value, onChange, onBlur, id, ...rest }) => (
+          <Select value={(value as string) ?? ""} onValueChange={onChange}>
+            <SelectTrigger
+              id={id}
+              onBlur={onBlur}
+              aria-invalid={rest["aria-invalid"]}
+              aria-describedby={rest["aria-describedby"]}
+              className="w-full"
+            >
+              <SelectValue>
+                {(role: string) => DEFAULT_ROLE_OPTIONS.find((option) => option.value === role)?.label ?? role}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {DEFAULT_ROLE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
           </Select>
-        </Form.Item>
+        )}
+      </FormField>
 
-        <Form.Item
-          noStyle
-          shouldUpdate={(prevValues, currentValues) => prevValues.sso_provider !== currentValues.sso_provider}
-        >
-          {({ getFieldValue }) => {
-            const provider = getFieldValue("sso_provider");
-            return provider ? renderProviderFields(provider) : null;
+      <FormField control={control} name="proxy_admin_teams" label="Proxy Admin Teams">
+        {({ ref, value, ...rest }) => <Input ref={ref} value={(value as string) ?? ""} {...rest} />}
+      </FormField>
+
+      <FormField control={control} name="admin_viewer_teams" label="Admin Viewer Teams">
+        {({ ref, value, ...rest }) => <Input ref={ref} value={(value as string) ?? ""} {...rest} />}
+      </FormField>
+
+      <FormField control={control} name="internal_user_teams" label="Internal User Teams">
+        {({ ref, value, ...rest }) => <Input ref={ref} value={(value as string) ?? ""} {...rest} />}
+      </FormField>
+
+      <FormField control={control} name="internal_viewer_teams" label="Internal Viewer Teams">
+        {({ ref, value, ...rest }) => <Input ref={ref} value={(value as string) ?? ""} {...rest} />}
+      </FormField>
+    </>
+  );
+};
+
+export const TeamIdsJwtFieldField = () => {
+  const { control } = useFormContext<SSOSettingsFormValues>();
+
+  return (
+    <FormField control={control} name="team_ids_jwt_field" label="Team IDs JWT Field">
+      {({ ref, value, ...rest }) => <Input ref={ref} value={(value as string) ?? ""} {...rest} />}
+    </FormField>
+  );
+};
+
+const BaseSSOSettingsForm: React.FC<BaseSSOSettingsFormProps> = ({ form, onFormSubmit }) => {
+  const provider = useWatch({ control: form.control, name: "sso_provider" });
+  const useRoleMappings = useWatch({ control: form.control, name: "use_role_mappings" });
+  const useTeamMappings = useWatch({ control: form.control, name: "use_team_mappings" });
+  const showMappingToggles = supportsMappings(provider);
+
+  return (
+    <div>
+      <FormProvider {...form}>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            submitMountedSSOValues(form, "sso-settings", onFormSubmit)();
           }}
-        </Form.Item>
-
-        <Form.Item
-          label="Proxy Admin Email"
-          name="user_email"
-          rules={[{ required: true, message: "Please enter the email of the proxy admin" }]}
         >
-          <TextInput />
-        </Form.Item>
-        <Form.Item
-          label="Proxy Base URL"
-          name="proxy_base_url"
-          normalize={(value) => value?.trim()}
-          rules={[
-            { required: true, message: "Please enter the proxy base url" },
-            {
-              pattern: /^https?:\/\/.+/,
-              message: "URL must start with http:// or https://",
-            },
-            {
-              validator: (_, value) => {
-                // Only check for trailing slash if the URL starts with http:// or https://
-                if (value && /^https?:\/\/.+/.test(value) && value.endsWith("/")) {
-                  return Promise.reject("URL must not end with a trailing slash");
-                }
-                return Promise.resolve();
-              },
-            },
-          ]}
-        >
-          <TextInput placeholder="https://example.com" />
-        </Form.Item>
-
-        <Form.Item
-          noStyle
-          shouldUpdate={(prevValues, currentValues) => prevValues.sso_provider !== currentValues.sso_provider}
-        >
-          {({ getFieldValue }) => {
-            const provider = getFieldValue("sso_provider");
-            return provider === "okta" || provider === "generic" ? (
-              <Form.Item label="Use Role Mappings" name="use_role_mappings" valuePropName="checked">
-                <Checkbox />
-              </Form.Item>
-            ) : null;
-          }}
-        </Form.Item>
-
-        <Form.Item
-          noStyle
-          shouldUpdate={(prevValues, currentValues) =>
-            prevValues.use_role_mappings !== currentValues.use_role_mappings ||
-            prevValues.sso_provider !== currentValues.sso_provider
-          }
-        >
-          {({ getFieldValue }) => {
-            const useRoleMappings = getFieldValue("use_role_mappings");
-            const provider = getFieldValue("sso_provider");
-            const supportsRoleMappings = provider === "okta" || provider === "generic";
-            return useRoleMappings && supportsRoleMappings ? (
-              <Form.Item
-                label="Group Claim"
-                name="group_claim"
-                rules={[{ required: true, message: "Please enter the group claim" }]}
-              >
-                <TextInput />
-              </Form.Item>
-            ) : null;
-          }}
-        </Form.Item>
-
-        <Form.Item
-          noStyle
-          shouldUpdate={(prevValues, currentValues) =>
-            prevValues.use_role_mappings !== currentValues.use_role_mappings ||
-            prevValues.sso_provider !== currentValues.sso_provider
-          }
-        >
-          {({ getFieldValue }) => {
-            const useRoleMappings = getFieldValue("use_role_mappings");
-            const provider = getFieldValue("sso_provider");
-            const supportsRoleMappings = provider === "okta" || provider === "generic";
-            return useRoleMappings && supportsRoleMappings ? (
+          <FieldGroup>
+            <SSOProviderSelectField />
+            {provider ? renderProviderFields(provider) : null}
+            <ProxyAdminEmailField />
+            <ProxyBaseUrlField />
+            {showMappingToggles && <MappingToggleField name="use_role_mappings" label="Use Role Mappings" />}
+            {useRoleMappings && showMappingToggles && (
               <>
-                <Form.Item label="Default Role" name="default_role" initialValue="Internal User">
-                  <Select>
-                    <Select.Option value="internal_user_viewer">Internal Viewer</Select.Option>
-                    <Select.Option value="internal_user">Internal User</Select.Option>
-                    <Select.Option value="proxy_admin_viewer">Admin Viewer</Select.Option>
-                    <Select.Option value="proxy_admin">Proxy Admin</Select.Option>
-                  </Select>
-                </Form.Item>
-
-                <Form.Item label="Proxy Admin Teams" name="proxy_admin_teams">
-                  <TextInput />
-                </Form.Item>
-
-                <Form.Item label="Admin Viewer Teams" name="admin_viewer_teams">
-                  <TextInput />
-                </Form.Item>
-
-                <Form.Item label="Internal User Teams" name="internal_user_teams">
-                  <TextInput />
-                </Form.Item>
-
-                <Form.Item label="Internal Viewer Teams" name="internal_viewer_teams">
-                  <TextInput />
-                </Form.Item>
+                <GroupClaimField />
+                <RoleMappingTeamFields />
               </>
-            ) : null;
-          }}
-        </Form.Item>
-
-        <Form.Item
-          noStyle
-          shouldUpdate={(prevValues, currentValues) => prevValues.sso_provider !== currentValues.sso_provider}
-        >
-          {({ getFieldValue }) => {
-            const provider = getFieldValue("sso_provider");
-            return provider === "okta" || provider === "generic" ? (
-              <Form.Item label="Use Team Mappings" name="use_team_mappings" valuePropName="checked">
-                <Checkbox />
-              </Form.Item>
-            ) : null;
-          }}
-        </Form.Item>
-
-        <Form.Item
-          noStyle
-          shouldUpdate={(prevValues, currentValues) =>
-            prevValues.use_team_mappings !== currentValues.use_team_mappings ||
-            prevValues.sso_provider !== currentValues.sso_provider
-          }
-        >
-          {({ getFieldValue }) => {
-            const useTeamMappings = getFieldValue("use_team_mappings");
-            const provider = getFieldValue("sso_provider");
-            const supportsTeamMappings = provider === "okta" || provider === "generic";
-            return useTeamMappings && supportsTeamMappings ? (
-              <Form.Item
-                label="Team IDs JWT Field"
-                name="team_ids_jwt_field"
-                rules={[{ required: true, message: "Please enter the team IDs JWT field" }]}
-              >
-                <TextInput />
-              </Form.Item>
-            ) : null;
-          }}
-        </Form.Item>
-      </Form>
+            )}
+            {showMappingToggles && <MappingToggleField name="use_team_mappings" label="Use Team Mappings" />}
+            {useTeamMappings && showMappingToggles && <TeamIdsJwtFieldField />}
+          </FieldGroup>
+        </form>
+      </FormProvider>
     </div>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.integration.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.integration.test.tsx
new file mode 100644
index 00000000000..cfc99c0fa76
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.integration.test.tsx
@@ -0,0 +1,69 @@
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "../../../../../../tests/test-utils";
+import EditSSOSettingsModal from "./EditSSOSettingsModal";
+import { useSSOSettings } from "@/app/(dashboard)/hooks/sso/useSSOSettings";
+import { useEditSSOSettings } from "@/app/(dashboard)/hooks/sso/useEditSSOSettings";
+
+vi.mock("@/app/(dashboard)/hooks/sso/useSSOSettings", () => ({ useSSOSettings: vi.fn() }));
+vi.mock("@/app/(dashboard)/hooks/sso/useEditSSOSettings", () => ({ useEditSSOSettings: vi.fn() }));
+
+const mutateAsync = vi.fn().mockResolvedValue({});
+
+const storedGoogleConfig = {
+  google_client_id: "stored-client-id",
+  google_client_secret: "stored-client-secret",
+  user_email: "admin@example.com",
+  proxy_base_url: "https://gateway.example.com",
+};
+
+const seed = (values: Record<string, unknown> = storedGoogleConfig) => {
+  vi.mocked(useSSOSettings).mockReturnValue({
+    data: { values },
+    isLoading: false,
+    error: null,
+  } as unknown as ReturnType<typeof useSSOSettings>);
+  vi.mocked(useEditSSOSettings).mockReturnValue({
+    mutateAsync,
+    isPending: false,
+  } as unknown as ReturnType<typeof useEditSSOSettings>);
+};
+
+const saveButton = () => screen.getByRole("button", { name: "Save" });
+
+describe("EditSSOSettingsModal (real form tree)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    seed();
+  });
+
+  it("blocks the save when a required credential is cleared", async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+    renderWithProviders(<EditSSOSettingsModal isVisible={true} onCancel={vi.fn()} onSuccess={vi.fn()} />);
+
+    await user.clear(await screen.findByLabelText("Google Client ID"));
+    await user.click(saveButton());
+
+    expect(await screen.findByText("Please enter the google client id")).toBeInTheDocument();
+    expect(mutateAsync).not.toHaveBeenCalled();
+  });
+
+  it("sends only the mounted fields when the form is valid", async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+    renderWithProviders(<EditSSOSettingsModal isVisible={true} onCancel={vi.fn()} onSuccess={vi.fn()} />);
+
+    await user.clear(await screen.findByLabelText("Google Client ID"));
+    await user.type(screen.getByLabelText("Google Client ID"), "rotated-client-id");
+    await user.click(saveButton());
+
+    await waitFor(() => expect(mutateAsync).toHaveBeenCalledTimes(1));
+    expect(mutateAsync.mock.calls[0][0]).toEqual({
+      sso_provider: "google",
+      google_client_id: "rotated-client-id",
+      google_client_secret: "stored-client-secret",
+      user_email: "admin@example.com",
+      proxy_base_url: "https://gateway.example.com",
+    });
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.test.tsx
index 664d7cc5373..0e289c12c5b 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.test.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.test.tsx
@@ -1,6 +1,8 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor, within } from "@testing-library/react";
 import { describe, it, expect, vi, beforeEach, Mock } from "vitest";
-import EditSSOSettingsModal from "./EditSSOSettingsModal";
+import EditSSOSettingsModal, { toSSOFormValues } from "./EditSSOSettingsModal";
+import { ssoProviderConfigs } from "./BaseSSOSettingsForm";
+import type { SSOSettingsValues } from "@/app/(dashboard)/hooks/sso/useSSOSettings";
 import { useSSOSettings } from "@/app/(dashboard)/hooks/sso/useSSOSettings";
 import { useEditSSOSettings } from "@/app/(dashboard)/hooks/sso/useEditSSOSettings";
 import { toast } from "@/lib/toast";
@@ -35,14 +37,6 @@ const TEST_IDS = {
   TRIGGER_FORM_SUBMIT: "trigger-form-submit",
 } as const;
 
-// Mock form instance
-const mockForm = {
-  resetFields: vi.fn(),
-  setFieldsValue: vi.fn(),
-  getFieldsValue: vi.fn(),
-  submit: vi.fn(),
-};
-
 // Types
 type SSOData = {
   values: Record<string, any>;
@@ -129,6 +123,8 @@ const createMockHooks = (): {
   },
 });
 
+let lastSeededForm: any;
+
 vi.mock("antd", () => ({
   Modal: ({ children, open, title, footer, onCancel, width, ...props }: any) => (
     <div data-testid={TEST_IDS.MODAL} data-open={open} data-title={title} data-width={width} {...props}>
@@ -137,29 +133,20 @@ vi.mock("antd", () => ({
       <button data-testid="modal-cancel" onClick={onCancel} />
     </div>
   ),
-  Button: ({ children, onClick, loading, disabled, ...props }: any) => (
-    <button data-testid={TEST_IDS.BUTTON} onClick={onClick} data-loading={loading} disabled={disabled} {...props}>
-      {children}
-    </button>
-  ),
-  Form: {
-    useForm: () => [mockForm],
-  },
-  Space: ({ children, ...props }: any) => (
-    <div data-testid="space" {...props}>
-      {children}
-    </div>
-  ),
 }));
 
-vi.mock("./BaseSSOSettingsForm", () => ({
-  default: ({ form, onFormSubmit }: any) => (
-    <div data-testid={TEST_IDS.BASE_SSO_FORM}>
-      <button data-testid={TEST_IDS.TRIGGER_FORM_SUBMIT} onClick={() => onFormSubmit({ testField: "testValue" })}>
-        Trigger Form Submit
-      </button>
-    </div>
-  ),
+vi.mock("./BaseSSOSettingsForm", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./BaseSSOSettingsForm")>()),
+  default: ({ form, onFormSubmit }: any) => {
+    lastSeededForm = form;
+    return (
+      <div data-testid={TEST_IDS.BASE_SSO_FORM}>
+        <button data-testid={TEST_IDS.TRIGGER_FORM_SUBMIT} onClick={() => onFormSubmit({ testField: "testValue" })}>
+          Trigger Form Submit
+        </button>
+      </div>
+    );
+  },
 }));
 
 vi.mock("@/app/(dashboard)/hooks/sso/useSSOSettings", () => ({
@@ -212,10 +199,12 @@ const renderComponent = (props: Partial<React.ComponentProps<typeof EditSSOSetti
   };
 };
 
-const getButtons = () => screen.getAllByTestId(TEST_IDS.BUTTON);
+const getButtons = () => within(screen.getByTestId("modal-footer")).getAllByRole("button");
 const getCancelButton = () => getButtons()[0];
 const getSaveButton = () => getButtons()[1];
 
+const seededValuesFor = (ssoData: SSOData) => toSSOFormValues(ssoData.values as SSOSettingsValues);
+
 describe("EditSSOSettingsModal", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -259,16 +248,24 @@ describe("EditSSOSettingsModal", () => {
 
       fireEvent.click(getCancelButton());
 
-      expect(mockForm.resetFields).toHaveBeenCalled();
       expect(mockOnCancel).toHaveBeenCalled();
     });
 
-    it("calls form.submit when save button is clicked", () => {
+    it("calls form.submit when save button is clicked", async () => {
+      const mockMutateAsync = vi.fn().mockResolvedValue({ success: true });
+      (processSSOSettingsPayload as any).mockReturnValue({ processed: "payload" });
+      setupMocks({
+        useSSOSettings: { data: createGoogleSSOData({ proxy_base_url: "https://proxy.example.com" }) },
+        useEditSSOSettings: { mutateAsync: mockMutateAsync, isPending: false },
+      });
+
       renderComponent();
 
       fireEvent.click(getSaveButton());
 
-      expect(mockForm.submit).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalled();
+      });
     });
 
     describe("Loading States", () => {
@@ -289,7 +286,7 @@ describe("EditSSOSettingsModal", () => {
 
         renderComponent();
 
-        expect(getSaveButton()).toHaveAttribute("data-loading", "true");
+        expect(getSaveButton()).toBeDisabled();
         expect(getSaveButton()).toHaveTextContent(TEST_DATA.BUTTON_TEXT.SAVING);
       });
     });
@@ -378,9 +375,8 @@ describe("EditSSOSettingsModal", () => {
           renderComponent();
 
           await waitFor(() => {
-            expect(mockForm.setFieldsValue).toHaveBeenCalledWith({
+            expect(seededValuesFor(ssoData)).toMatchObject({
               sso_provider: expectedProvider,
-              ...ssoData.values,
             });
           });
         });
@@ -420,9 +416,8 @@ describe("EditSSOSettingsModal", () => {
         renderComponent();
 
         await waitFor(() => {
-          expect(mockForm.setFieldsValue).toHaveBeenCalledWith({
+          expect(seededValuesFor(ssoData)).toMatchObject({
             sso_provider: SSO_PROVIDERS.GOOGLE,
-            ...ssoData.values,
             use_role_mappings: true,
             group_claim: "groups",
             default_role: "internal_user",
@@ -448,9 +443,8 @@ describe("EditSSOSettingsModal", () => {
         renderComponent();
 
         await waitFor(() => {
-          expect(mockForm.setFieldsValue).toHaveBeenCalledWith({
+          expect(seededValuesFor(ssoData)).toMatchObject({
             sso_provider: SSO_PROVIDERS.GOOGLE,
-            ...ssoData.values,
             use_role_mappings: true,
             group_claim: "groups",
             default_role: "internal_user",
@@ -474,8 +468,7 @@ describe("EditSSOSettingsModal", () => {
         renderComponent();
 
         await waitFor(() => {
-          expect(mockForm.resetFields).toHaveBeenCalled();
-          expect(mockForm.setFieldsValue).toHaveBeenCalled();
+          expect(seededValuesFor(ssoData).sso_provider).toBe(SSO_PROVIDERS.GOOGLE);
         });
       });
 
@@ -488,7 +481,7 @@ describe("EditSSOSettingsModal", () => {
 
         renderComponent({ isVisible: false });
 
-        expect(mockForm.setFieldsValue).not.toHaveBeenCalled();
+        expect(screen.getByTestId(TEST_IDS.MODAL)).toHaveAttribute("data-open", "false");
       });
 
       it("skips initialization when SSO data is unavailable", () => {
@@ -498,7 +491,7 @@ describe("EditSSOSettingsModal", () => {
 
         renderComponent();
 
-        expect(mockForm.setFieldsValue).not.toHaveBeenCalled();
+        expect(screen.getByTestId(TEST_IDS.BASE_SSO_FORM)).toBeInTheDocument();
       });
     });
   });
@@ -564,9 +557,8 @@ describe("EditSSOSettingsModal", () => {
       renderComponent();
 
       await waitFor(() => {
-        expect(mockForm.setFieldsValue).toHaveBeenCalledWith({
+        expect(seededValuesFor(ssoData)).toMatchObject({
           sso_provider: SSO_PROVIDERS.GOOGLE,
-          ...ssoData.values,
           use_role_mappings: true,
           group_claim: "groups",
           default_role: "internal_user",
@@ -590,9 +582,8 @@ describe("EditSSOSettingsModal", () => {
       renderComponent();
 
       await waitFor(() => {
-        expect(mockForm.setFieldsValue).toHaveBeenCalledWith({
+        expect(seededValuesFor(ssoData)).toMatchObject({
           sso_provider: SSO_PROVIDERS.GENERIC,
-          ...ssoData.values,
           use_team_mappings: true,
           team_ids_jwt_field: "teams",
         });
@@ -611,9 +602,8 @@ describe("EditSSOSettingsModal", () => {
       renderComponent();
 
       await waitFor(() => {
-        expect(mockForm.setFieldsValue).toHaveBeenCalledWith({
+        expect(seededValuesFor(ssoData)).toMatchObject({
           sso_provider: SSO_PROVIDERS.GENERIC,
-          ...ssoData.values,
           use_team_mappings: true,
           team_ids_jwt_field: "custom_teams_field",
         });
@@ -644,9 +634,8 @@ describe("EditSSOSettingsModal", () => {
       renderComponent();
 
       await waitFor(() => {
-        expect(mockForm.setFieldsValue).toHaveBeenCalledWith({
+        expect(seededValuesFor(ssoData)).toMatchObject({
           sso_provider: SSO_PROVIDERS.GENERIC,
-          ...ssoData.values,
           use_role_mappings: true,
           group_claim: "groups",
           default_role: "internal_user",
@@ -670,7 +659,7 @@ describe("EditSSOSettingsModal", () => {
       renderComponent();
 
       await waitFor(() => {
-        const callArgs = mockForm.setFieldsValue.mock.calls[0][0];
+        const callArgs = seededValuesFor(ssoData);
         expect(callArgs.use_team_mappings).toBeUndefined();
         expect(callArgs.team_ids_jwt_field).toBeUndefined();
       });
@@ -690,9 +679,8 @@ describe("EditSSOSettingsModal", () => {
       renderComponent();
 
       await waitFor(() => {
-        expect(mockForm.setFieldsValue).toHaveBeenCalledWith({
+        expect(seededValuesFor(ssoData)).toMatchObject({
           sso_provider: SSO_PROVIDERS.GENERIC,
-          ...ssoData.values,
         });
       });
     });
@@ -715,4 +703,48 @@ describe("EditSSOSettingsModal", () => {
       expect(processSSOSettingsPayload).toHaveBeenCalled();
     });
   });
+
+  describe("Reseeding", () => {
+    it("replaces every field when reopened against a different stored config", async () => {
+      const first = createGoogleSSOData({
+        google_client_id: "first-tenant-id",
+        proxy_base_url: "https://first.example.com",
+        user_email: "first-admin@example.com",
+      });
+      setupMocks({ useSSOSettings: { data: first, isLoading: false, error: null } });
+      const { rerender } = renderComponent();
+
+      await waitFor(() => {
+        expect(lastSeededForm.getValues().google_client_id).toBe("first-tenant-id");
+      });
+
+      const second = createGoogleSSOData({
+        google_client_id: "second-tenant-id",
+        proxy_base_url: "https://second.example.com",
+        user_email: "second-admin@example.com",
+      });
+      setupMocks({ useSSOSettings: { data: second, isLoading: false, error: null } });
+      rerender(<EditSSOSettingsModal isVisible={true} onCancel={vi.fn()} onSuccess={vi.fn()} />);
+
+      await waitFor(() => {
+        expect(lastSeededForm.getValues().google_client_id).toBe("second-tenant-id");
+      });
+      expect(JSON.stringify(lastSeededForm.getValues())).not.toContain("first");
+    });
+  });
+
+  describe("Seeding completeness", () => {
+    it("seeds every field the provider forms can mount", () => {
+      const allFields = Object.values(ssoProviderConfigs).flatMap((config) => config.fields);
+      const textFieldNames = Array.from(
+        new Set(allFields.filter((field) => field.type !== "checkbox").map((field) => field.name)),
+      );
+      const stored = Object.fromEntries(textFieldNames.map((name) => [name, `stored-${name}`]));
+
+      const seeded = toSSOFormValues({ ...stored, saml_allow_unsolicited: "true" } as unknown as SSOSettingsValues);
+
+      expect(textFieldNames.filter((name) => seeded[name] !== `stored-${name}`)).toEqual([]);
+      expect(seeded.saml_allow_unsolicited).toBe(true);
+    });
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.tsx
index 3d968996037..364fb68fd91 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.tsx
@@ -1,12 +1,19 @@
 "use client";
 
-import { Button, Form, Modal, Space } from "antd";
-import React, { useEffect } from "react";
-import BaseSSOSettingsForm from "./BaseSSOSettingsForm";
+import { Modal } from "antd";
+import React, { useMemo } from "react";
+import BaseSSOSettingsForm, {
+  emptySSOSettingsFormValues,
+  submitMountedSSOValues,
+  useSSOSettingsForm,
+  type SSOSettingsFormValues,
+} from "./BaseSSOSettingsForm";
+import { Button } from "@/components/ui/button";
+import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { toast } from "@/lib/toast";
 import { parseErrorMessage } from "@/components/shared/errorUtils";
 import { detectSSOProvider, processSSOSettingsPayload } from "../utils";
-import { useSSOSettings } from "@/app/(dashboard)/hooks/sso/useSSOSettings";
+import { useSSOSettings, type SSOSettingsValues } from "@/app/(dashboard)/hooks/sso/useSSOSettings";
 import { useEditSSOSettings } from "@/app/(dashboard)/hooks/sso/useEditSSOSettings";
 
 interface EditSSOSettingsModalProps {
@@ -15,31 +22,39 @@ interface EditSSOSettingsModalProps {
   onSuccess: () => void;
 }
 
-const EditSSOSettingsModal: React.FC<EditSSOSettingsModalProps> = ({ isVisible, onCancel, onSuccess }) => {
-  const [form] = Form.useForm();
+const joinTeams = (teams: string[] | undefined): string => {
+  if (!teams || teams.length === 0) return "";
+  return teams.join(", ");
+};
 
-  // Use react-query hooks for SSO settings
-  const ssoSettings = useSSOSettings();
-  const { mutateAsync, isPending } = useEditSSOSettings();
-  useEffect(() => {
-    if (isVisible && ssoSettings.data && ssoSettings.data.values) {
-      const ssoData = ssoSettings.data;
+export const toSSOFormValues = (values: SSOSettingsValues): SSOSettingsFormValues => {
+  const roleMappings = values.role_mappings;
+  const teamMappings = values.team_mappings;
 
-      // Determine which SSO provider is configured
-      const selectedProvider = detectSSOProvider(ssoData.values);
-
-      // Extract role mappings if they exist
-      let roleMappingFields = {};
-      if (ssoData.values.role_mappings) {
-        const roleMappings = ssoData.values.role_mappings;
-
-        // Helper function to join arrays into comma-separated strings
-        const joinTeams = (teams: string[] | undefined): string => {
-          if (!teams || teams.length === 0) return "";
-          return teams.join(", ");
-        };
-
-        roleMappingFields = {
+  return {
+    ...emptySSOSettingsFormValues,
+    sso_provider: detectSSOProvider(values) ?? "",
+    google_client_id: values.google_client_id ?? "",
+    google_client_secret: values.google_client_secret ?? "",
+    microsoft_client_id: values.microsoft_client_id ?? "",
+    microsoft_client_secret: values.microsoft_client_secret ?? "",
+    microsoft_tenant: values.microsoft_tenant ?? "",
+    generic_client_id: values.generic_client_id ?? "",
+    generic_client_secret: values.generic_client_secret ?? "",
+    generic_authorization_endpoint: values.generic_authorization_endpoint ?? "",
+    generic_token_endpoint: values.generic_token_endpoint ?? "",
+    generic_userinfo_endpoint: values.generic_userinfo_endpoint ?? "",
+    generic_scope: values.generic_scope ?? undefined,
+    saml_idp_metadata_url: values.saml_idp_metadata_url ?? undefined,
+    saml_idp_metadata_xml: values.saml_idp_metadata_xml ?? undefined,
+    saml_sp_entity_id: values.saml_sp_entity_id ?? undefined,
+    user_email: values.user_email ?? "",
+    proxy_base_url: values.proxy_base_url ?? "",
+    ...(values.saml_allow_unsolicited != null
+      ? { saml_allow_unsolicited: values.saml_allow_unsolicited === "true" }
+      : {}),
+    ...(roleMappings
+      ? {
           use_role_mappings: true,
           group_claim: roleMappings.group_claim,
           default_role: roleMappings.default_role || "internal_user",
@@ -47,40 +62,29 @@ const EditSSOSettingsModal: React.FC<EditSSOSettingsModalProps> = ({ isVisible,
           admin_viewer_teams: joinTeams(roleMappings.roles?.proxy_admin_viewer),
           internal_user_teams: joinTeams(roleMappings.roles?.internal_user),
           internal_viewer_teams: joinTeams(roleMappings.roles?.internal_user_viewer),
-        };
-      }
-
-      // Extract team mappings if they exist
-      let teamMappingFields = {};
-      if (ssoData.values.team_mappings) {
-        const teamMappings = ssoData.values.team_mappings;
-        teamMappingFields = {
+        }
+      : {}),
+    ...(teamMappings
+      ? {
           use_team_mappings: true,
           team_ids_jwt_field: teamMappings.team_ids_jwt_field,
-        };
-      }
+        }
+      : {}),
+  };
+};
 
-      // Set form values with existing data (excluding UI access control fields)
-      const formValues = {
-        sso_provider: selectedProvider,
-        ...ssoData.values,
-        ...roleMappingFields,
-        ...teamMappingFields,
-        ...(ssoData.values.saml_allow_unsolicited != null
-          ? { saml_allow_unsolicited: ssoData.values.saml_allow_unsolicited === "true" }
-          : {}),
-      };
+const EditSSOSettingsModal: React.FC<EditSSOSettingsModalProps> = ({ isVisible, onCancel, onSuccess }) => {
+  const ssoSettings = useSSOSettings();
+  const { mutateAsync, isPending } = useEditSSOSettings();
 
-      // Clear form first, then set values with a small delay to ensure proper initialization
-      form.resetFields();
-      setTimeout(() => {
-        form.setFieldsValue(formValues);
-      }, 100);
-    }
-  }, [isVisible, ssoSettings.data, form]);
+  const seededValues = useMemo(
+    () => (ssoSettings.data?.values ? toSSOFormValues(ssoSettings.data.values) : emptySSOSettingsFormValues),
+    [ssoSettings.data],
+  );
 
-  // Enhanced form submission handler
-  const handleFormSubmit = async (formValues: Record<string, any>) => {
+  const form = useSSOSettingsForm("sso-settings", seededValues);
+
+  const handleFormSubmit = async (formValues: SSOSettingsFormValues) => {
     try {
       const payload = processSSOSettingsPayload(formValues);
 
@@ -94,13 +98,12 @@ const EditSSOSettingsModal: React.FC<EditSSOSettingsModalProps> = ({ isVisible,
         },
       });
     } catch (error) {
-      // Handle processing errors gracefully
       toast.fromError("Failed to process SSO settings: " + parseErrorMessage(error));
     }
   };
 
   const handleCancel = () => {
-    form.resetFields();
+    form.reset(seededValues);
     onCancel();
   };
 
@@ -110,14 +113,19 @@ const EditSSOSettingsModal: React.FC<EditSSOSettingsModalProps> = ({ isVisible,
       open={isVisible}
       width={800}
       footer={
-        <Space>
-          <Button onClick={handleCancel} disabled={isPending}>
+        <div className="flex items-center justify-end gap-2">
+          <Button type="button" variant="outline" onClick={handleCancel} disabled={isPending}>
             Cancel
           </Button>
-          <Button loading={isPending} onClick={() => form.submit()}>
+          <Button
+            type="button"
+            disabled={isPending}
+            onClick={submitMountedSSOValues(form, "sso-settings", handleFormSubmit)}
+          >
+            {isPending && <UiLoadingSpinner className="size-4 mr-1" />}
             {isPending ? "Saving..." : "Save"}
           </Button>
-        </Space>
+        </div>
       }
       onCancel={handleCancel}
     >