diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.characterization.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.characterization.test.tsx
new file mode 100644
index 00000000000..c79d35d46c3
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.characterization.test.tsx
@@ -0,0 +1,231 @@
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import CreateVectorStore from "./CreateVectorStore";
+import * as networking from "@/components/networking";
+import * as fetchModels from "@/components/llm_calls/fetch_models";
+
+vi.mock("@/components/networking", () => ({
+  ragIngestCall: vi.fn(),
+}));
+
+vi.mock("@/components/llm_calls/fetch_models", () => ({
+  fetchAvailableModels: vi.fn(),
+}));
+
+vi.mock("@/components/vector_store_providers", () => ({
+  VectorStoreProviders: {
+    BEDROCK: "Amazon Bedrock",
+    S3Vectors: "AWS S3 Vectors",
+    PGVECTOR: "PG Vector",
+  },
+  vectorStoreProviderMap: {
+    BEDROCK: "bedrock",
+    S3Vectors: "s3_vectors",
+    PGVECTOR: "pg_vector",
+  },
+  vectorStoreProviderLogoMap: {
+    "Amazon Bedrock": "https://example.com/bedrock.png",
+    "AWS S3 Vectors": "https://example.com/aws.png",
+    "PG Vector": "https://example.com/pg.png",
+  },
+  getProviderSpecificFields: vi.fn((provider: string) => {
+    if (provider === "pg_vector") {
+      return [
+        {
+          name: "api_base",
+          label: "API Base",
+          tooltip: "Base URL of the pgvector server",
+          placeholder: "http://localhost:8000",
+          required: true,
+          type: "text",
+        },
+        {
+          name: "api_key",
+          label: "API Key",
+          tooltip: "Secret for the pgvector server",
+          placeholder: "sk-...",
+          required: false,
+          type: "password",
+        },
+        {
+          name: "embedding_model",
+          label: "Embedding Model",
+          tooltip: "Model used to embed documents",
+          placeholder: "text-embedding-3-small",
+          required: false,
+          type: "select",
+        },
+      ];
+    }
+    return [];
+  }),
+}));
+
+const uploadFile = async (name = "test.pdf") => {
+  const file = new File(["test content"], name, { type: "application/pdf" });
+  const uploadInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+  await act(async () => {
+    fireEvent.change(uploadInput, { target: { files: [file] } });
+  });
+  await screen.findByText(/Uploaded Documents \(1\)/);
+};
+
+const pickProvider = async (label: string) => {
+  const user = userEvent.setup();
+  const trigger = screen.getAllByRole("combobox")[0];
+  await user.click(trigger);
+  const option = await screen.findByText(label);
+  await user.click(option);
+};
+
+const clickCreate = async () => {
+  await act(async () => {
+    fireEvent.click(screen.getByRole("button", { name: /Create Vector Store/i }));
+  });
+};
+
+describe("CreateVectorStore submit payload characterization", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(fetchModels.fetchAvailableModels).mockResolvedValue([]);
+    vi.mocked(networking.ragIngestCall).mockResolvedValue({
+      id: "test-id",
+      status: "completed",
+      vector_store_id: "vs_123",
+      file_id: "file_123",
+    });
+  });
+
+  it("sends undefined, not empty string, for an untouched name and description", async () => {
+    render(<CreateVectorStore accessToken="test-token" />);
+    await uploadFile();
+    await clickCreate();
+
+    await waitFor(() => expect(networking.ragIngestCall).toHaveBeenCalledTimes(1));
+    expect(networking.ragIngestCall).toHaveBeenCalledWith(
+      "test-token",
+      expect.any(File),
+      "bedrock",
+      undefined,
+      undefined,
+      undefined,
+      {},
+    );
+  });
+
+  it("forwards the typed name and description verbatim", async () => {
+    render(<CreateVectorStore accessToken="test-token" />);
+    await uploadFile();
+
+    fireEvent.change(screen.getByPlaceholderText("e.g., Product Documentation, Customer Support KB"), {
+      target: { value: "  Product Docs  " },
+    });
+    fireEvent.change(screen.getByPlaceholderText("e.g., Contains all product documentation and user guides"), {
+      target: { value: "All the guides" },
+    });
+    await clickCreate();
+
+    await waitFor(() => expect(networking.ragIngestCall).toHaveBeenCalledTimes(1));
+    expect(networking.ragIngestCall).toHaveBeenCalledWith(
+      "test-token",
+      expect.any(File),
+      "bedrock",
+      undefined,
+      "  Product Docs  ",
+      "All the guides",
+      {},
+    );
+  });
+
+  it("accumulates provider-specific fields into the providerParams argument", async () => {
+    render(<CreateVectorStore accessToken="test-token" />);
+    await uploadFile();
+    await pickProvider("PG Vector");
+
+    fireEvent.change(screen.getByPlaceholderText("http://localhost:8000"), {
+      target: { value: "http://pg.internal:8000" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("sk-..."), { target: { value: "sk-secret" } });
+    await clickCreate();
+
+    await waitFor(() => expect(networking.ragIngestCall).toHaveBeenCalledTimes(1));
+    expect(networking.ragIngestCall).toHaveBeenCalledWith(
+      "test-token",
+      expect.any(File),
+      "pg_vector",
+      undefined,
+      undefined,
+      undefined,
+      { api_base: "http://pg.internal:8000", api_key: "sk-secret" },
+    );
+  });
+
+  it("loads the S3 embedding models, filters them by typing and sends the chosen one", async () => {
+    vi.mocked(fetchModels.fetchAvailableModels).mockResolvedValue([
+      { model_group: "text-embedding-3-small", mode: "embedding" },
+      { model_group: "text-embedding-3-large", mode: "embedding" },
+      { model_group: "gpt-5", mode: "chat" },
+    ] as Awaited<ReturnType<typeof fetchModels.fetchAvailableModels>>);
+    const user = userEvent.setup();
+    render(<CreateVectorStore accessToken="test-token" />);
+    await uploadFile();
+    await pickProvider("AWS S3 Vectors");
+
+    const modelInput = screen.getAllByRole("combobox").at(-1) as HTMLElement;
+    await user.click(modelInput);
+    expect((await screen.findAllByText("text-embedding-3-small")).at(-1)).toBeInTheDocument();
+    expect(screen.queryByText("gpt-5")).not.toBeInTheDocument();
+
+    await user.type(modelInput, "large");
+    await user.click((await screen.findAllByText("text-embedding-3-large")).at(-1) as HTMLElement);
+    await clickCreate();
+
+    await waitFor(() => expect(networking.ragIngestCall).toHaveBeenCalledTimes(1));
+    expect(vi.mocked(networking.ragIngestCall).mock.calls.at(-1)?.[6]).toEqual({
+      embedding_model: "text-embedding-3-large",
+    });
+  });
+
+  it("blocks the submit when a required provider field is missing", async () => {
+    render(<CreateVectorStore accessToken="test-token" />);
+    await uploadFile();
+    await pickProvider("PG Vector");
+    await clickCreate();
+
+    expect(networking.ragIngestCall).not.toHaveBeenCalled();
+  });
+
+  it("renders the password provider field as a masked input", async () => {
+    render(<CreateVectorStore accessToken="test-token" />);
+    await pickProvider("PG Vector");
+
+    expect(screen.getByPlaceholderText("sk-...")).toHaveAttribute("type", "password");
+  });
+
+  it("reuses the vector store id returned by the first ingest for later documents", async () => {
+    render(<CreateVectorStore accessToken="test-token" />);
+
+    const files = [
+      new File(["a"], "a.pdf", { type: "application/pdf" }),
+      new File(["b"], "b.pdf", { type: "application/pdf" }),
+    ];
+    const uploadInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    await act(async () => {
+      fireEvent.change(uploadInput, { target: { files } });
+    });
+    await screen.findByText(/Uploaded Documents \(2\)/);
+    await clickCreate();
+
+    await waitFor(() => expect(networking.ragIngestCall).toHaveBeenCalledTimes(2));
+    expect(vi.mocked(networking.ragIngestCall).mock.calls[0][3]).toBeUndefined();
+    expect(vi.mocked(networking.ragIngestCall).mock.calls[1][3]).toBe("vs_123");
+  });
+
+  it("does not submit at all when no document has been uploaded", async () => {
+    render(<CreateVectorStore accessToken="test-token" />);
+    await clickCreate();
+
+    expect(networking.ragIngestCall).not.toHaveBeenCalled();
+  });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.test.tsx
index 7405fa5c2fc..e0bd4feef59 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.test.tsx
@@ -1,4 +1,5 @@
 import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import CreateVectorStore from "./CreateVectorStore";
 import * as networking from "@/components/networking";
@@ -204,17 +205,10 @@ describe("CreateVectorStore", () => {
     // Find and click the provider dropdown
     const providerSelect = screen.getByRole("combobox");
 
-    await act(async () => {
-      fireEvent.mouseDown(providerSelect);
-    });
+    await userEvent.click(providerSelect);
 
     // Wait for dropdown options to appear
-    await waitFor(() => {
-      const s3Option = screen.queryByText("AWS S3 Vectors");
-      if (s3Option) {
-        fireEvent.click(s3Option);
-      }
-    });
+    await userEvent.click(await screen.findByText("AWS S3 Vectors"));
 
     // Check if S3-specific fields are displayed
     await waitFor(() => {
@@ -244,16 +238,9 @@ describe("CreateVectorStore", () => {
     // Select S3 Vectors provider
     const providerSelect = screen.getByRole("combobox");
 
-    await act(async () => {
-      fireEvent.mouseDown(providerSelect);
-    });
+    await userEvent.click(providerSelect);
 
-    await waitFor(() => {
-      const s3Option = screen.queryByText("AWS S3 Vectors");
-      if (s3Option) {
-        fireEvent.click(s3Option);
-      }
-    });
+    await userEvent.click(await screen.findByText("AWS S3 Vectors"));
 
     // Try to create without filling required fields
     const createButton = screen.getByRole("button", { name: /Create Vector Store/i });
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.tsx
index a0a2759eccb..baa0170c278 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from "react";
 import { Card, Title, Text } from "@tremor/react";
-import { Upload, Button, Select, Form, Alert, Tooltip, Input } from "antd";
+import { Upload, Alert } from "antd";
 import { toast } from "@/lib/toast";
-import { InboxOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { InboxOutlined } from "@ant-design/icons";
 import type { UploadProps } from "antd";
+import { CircleHelp } from "lucide-react";
 import { ragIngestCall } from "@/components/networking";
 import { DocumentUpload, RAGIngestResponse } from "@/components/vector_store_management/types";
 import DocumentsTable from "./DocumentsTable";
@@ -15,24 +16,42 @@ import {
   VectorStoreFieldConfig,
 } from "@/components/vector_store_providers";
 import { Logo } from "@/components/molecules/logo/Logo";
+import { Field, FieldGroup, FieldLabel } from "@/components/shared/form/field";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import S3VectorsConfig from "./S3VectorsConfig";
 
 const { Dragger } = Upload;
 
+const asText = (value: unknown): string => (typeof value === "string" ? value : "");
+
+const labelWithHint = (label: string, hint: string): React.ReactNode => (
+  <>
+    {label}
+    <Tooltip>
+      <TooltipTrigger render={<CircleHelp className="size-3.5 shrink-0 cursor-help text-muted-foreground" />} />
+      <TooltipContent>{hint}</TooltipContent>
+    </Tooltip>
+  </>
+);
+
 interface CreateVectorStoreProps {
   accessToken: string | null;
   onSuccess?: (vectorStoreId: string) => void;
 }
 
 const CreateVectorStore: React.FC<CreateVectorStoreProps> = ({ accessToken, onSuccess }) => {
-  const [form] = Form.useForm();
   const [documents, setDocuments] = useState<DocumentUpload[]>([]);
   const [isCreating, setIsCreating] = useState(false);
   const [selectedProvider, setSelectedProvider] = useState<string>("bedrock");
   const [vectorStoreName, setVectorStoreName] = useState<string>("");
   const [vectorStoreDescription, setVectorStoreDescription] = useState<string>("");
   const [ingestResults, setIngestResults] = useState<RAGIngestResponse[]>([]);
-  const [providerParams, setProviderParams] = useState<Record<string, any>>({});
+  const [providerParams, setProviderParams] = useState<Record<string, unknown>>({});
 
   const uploadProps: UploadProps = {
     name: "file",
@@ -108,11 +127,13 @@ const CreateVectorStore: React.FC<CreateVectorStoreProps> = ({ accessToken, onSu
 
     // S3 Vectors specific validation
     if (selectedProvider === "s3_vectors") {
-      if (providerParams.vector_bucket_name && providerParams.vector_bucket_name.length < 3) {
+      const bucketName = asText(providerParams.vector_bucket_name);
+      const indexName = asText(providerParams.index_name);
+      if (bucketName && bucketName.length < 3) {
         toast.warning("Vector bucket name must be at least 3 characters");
         return;
       }
-      if (providerParams.index_name && providerParams.index_name.length > 0 && providerParams.index_name.length < 3) {
+      if (indexName && indexName.length > 0 && indexName.length < 3) {
         toast.warning("Index name must be at least 3 characters if provided");
         return;
       }
@@ -186,225 +207,165 @@ const CreateVectorStore: React.FC<CreateVectorStoreProps> = ({ accessToken, onSu
   };
 
   return (
-    <div className="space-y-6">
-      <div>
-        <Title>Create Vector Store</Title>
-        <Text className="text-gray-500">
-          Upload documents and select a provider to create a new vector store with embedded content.
-        </Text>
-      </div>
-
-      {/* Upload Area */}
-      <Card>
-        <div className="mb-4">
-          <Text className="font-medium">Step 1: Upload Documents</Text>
-          <Text className="text-sm text-gray-500 block mt-1">
-            Upload one or more documents (PDF, TXT, DOCX, MD). Maximum file size: 50MB per file.
+    <TooltipProvider>
+      <div className="space-y-6">
+        <div>
+          <Title>Create Vector Store</Title>
+          <Text className="text-muted-foreground">
+            Upload documents and select a provider to create a new vector store with embedded content.
           </Text>
         </div>
-        <Dragger {...uploadProps}>
-          <p className="ant-upload-drag-icon">
-            <InboxOutlined style={{ fontSize: "48px", color: "#1890ff" }} />
-          </p>
-          <p className="ant-upload-text">Click or drag files to this area to upload</p>
-          <p className="ant-upload-hint">Support for single or bulk upload. Supported formats: PDF, TXT, DOCX, MD</p>
-        </Dragger>
-      </Card>
 
-      {/* Documents Table */}
-      {documents.length > 0 && (
+        {/* Upload Area */}
         <Card>
           <div className="mb-4">
-            <Text className="font-medium">Uploaded Documents ({documents.length})</Text>
-          </div>
-          <DocumentsTable documents={documents} onRemove={handleRemoveDocument} />
-        </Card>
-      )}
-
-      {/* Provider Selection and Vector Store Details */}
-      <Card>
-        <div className="space-y-4">
-          <div>
-            <Text className="font-medium">Step 2: Configure Vector Store</Text>
-            <Text className="text-sm text-gray-500 block mt-1">
-              Choose the provider and optionally provide a name and description for your vector store.
+            <Text className="font-medium">Step 1: Upload Documents</Text>
+            <Text className="text-sm text-muted-foreground block mt-1">
+              Upload one or more documents (PDF, TXT, DOCX, MD). Maximum file size: 50MB per file.
             </Text>
           </div>
+          <Dragger {...uploadProps}>
+            <p className="ant-upload-drag-icon">
+              <InboxOutlined style={{ fontSize: "48px", color: "#1890ff" }} />
+            </p>
+            <p className="ant-upload-text">Click or drag files to this area to upload</p>
+            <p className="ant-upload-hint">Support for single or bulk upload. Supported formats: PDF, TXT, DOCX, MD</p>
+          </Dragger>
+        </Card>
 
-          <Form form={form} layout="vertical">
-            <Form.Item
-              label={
-                <span>
-                  Vector Store Name{" "}
-                  <Tooltip title="Optional: Give your vector store a meaningful name">
-                    <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                  </Tooltip>
-                </span>
-              }
-            >
-              <Input
-                value={vectorStoreName}
-                onChange={(e) => setVectorStoreName(e.target.value)}
-                placeholder="e.g., Product Documentation, Customer Support KB"
-                size="large"
-                className="rounded-md"
-              />
-            </Form.Item>
+        {/* Documents Table */}
+        {documents.length > 0 && (
+          <Card>
+            <div className="mb-4">
+              <Text className="font-medium">Uploaded Documents ({documents.length})</Text>
+            </div>
+            <DocumentsTable documents={documents} onRemove={handleRemoveDocument} />
+          </Card>
+        )}
 
-            <Form.Item
-              label={
-                <span>
-                  Description{" "}
-                  <Tooltip title="Optional: Describe what this vector store contains">
-                    <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                  </Tooltip>
-                </span>
-              }
-            >
-              <Input.TextArea
-                value={vectorStoreDescription}
-                onChange={(e) => setVectorStoreDescription(e.target.value)}
-                placeholder="e.g., Contains all product documentation and user guides"
-                rows={2}
-                size="large"
-                className="rounded-md"
-              />
-            </Form.Item>
+        {/* Provider Selection and Vector Store Details */}
+        <Card>
+          <div className="space-y-4">
+            <div>
+              <Text className="font-medium">Step 2: Configure Vector Store</Text>
+              <Text className="text-sm text-muted-foreground block mt-1">
+                Choose the provider and optionally provide a name and description for your vector store.
+              </Text>
+            </div>
 
-            <Form.Item
-              label={
-                <span>
-                  Provider{" "}
-                  <Tooltip title="Select the provider for embedding and vector store operations">
-                    <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                  </Tooltip>
-                </span>
-              }
-              required
-            >
-              <Select
-                value={selectedProvider}
-                onChange={setSelectedProvider}
-                placeholder="Select a provider"
-                size="large"
-                style={{ width: "100%" }}
-              >
-                {Object.entries(VectorStoreProviders).map(([providerEnum, providerDisplayName]) => {
-                  return (
-                    <Select.Option key={providerEnum} value={vectorStoreProviderMap[providerEnum]}>
-                      <div className="flex items-center space-x-2">
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="vector-store-name">
+                  {labelWithHint("Vector Store Name", "Optional: Give your vector store a meaningful name")}
+                </FieldLabel>
+                <Input
+                  id="vector-store-name"
+                  value={vectorStoreName}
+                  onChange={(e) => setVectorStoreName(e.target.value)}
+                  placeholder="e.g., Product Documentation, Customer Support KB"
+                />
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="vector-store-description">
+                  {labelWithHint("Description", "Optional: Describe what this vector store contains")}
+                </FieldLabel>
+                <Textarea
+                  id="vector-store-description"
+                  value={vectorStoreDescription}
+                  onChange={(e) => setVectorStoreDescription(e.target.value)}
+                  placeholder="e.g., Contains all product documentation and user guides"
+                  rows={2}
+                />
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="vector-store-provider">
+                  {labelWithHint("Provider", "Select the provider for embedding and vector store operations")}
+                </FieldLabel>
+                <Select
+                  value={selectedProvider}
+                  onValueChange={(value: string | null) => value !== null && setSelectedProvider(value)}
+                >
+                  <SelectTrigger id="vector-store-provider" className="w-full">
+                    <SelectValue placeholder="Select a provider" />
+                  </SelectTrigger>
+                  <SelectContent alignItemWithTrigger={false}>
+                    {Object.entries(VectorStoreProviders).map(([providerEnum, providerDisplayName]) => (
+                      <SelectItem key={providerEnum} value={vectorStoreProviderMap[providerEnum]}>
                         <Logo
                           src={vectorStoreProviderLogoMap[providerDisplayName]}
                           label={providerDisplayName}
                           className="w-5 h-5"
                         />
                         <span>{providerDisplayName}</span>
-                      </div>
-                    </Select.Option>
-                  );
-                })}
-              </Select>
-            </Form.Item>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
 
-            {/* S3 Vectors Configuration */}
-            {selectedProvider === "s3_vectors" && (
-              <S3VectorsConfig
-                accessToken={accessToken}
-                providerParams={providerParams}
-                onParamsChange={setProviderParams}
-              />
-            )}
+              {/* S3 Vectors Configuration */}
+              {selectedProvider === "s3_vectors" && (
+                <S3VectorsConfig
+                  accessToken={accessToken}
+                  providerParams={providerParams}
+                  onParamsChange={setProviderParams}
+                />
+              )}
 
-            {/* Other Provider-specific fields */}
-            {selectedProvider !== "s3_vectors" &&
-              getProviderSpecificFields(selectedProvider).map((field: VectorStoreFieldConfig) => {
-                if (field.type === "select") {
-                  // For embedding model selection, we'd need to fetch available models
-                  // For now, provide a text input as fallback
-                  return (
-                    <Form.Item
-                      key={field.name}
-                      label={
-                        <span>
-                          {field.label}{" "}
-                          <Tooltip title={field.tooltip}>
-                            <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                          </Tooltip>
-                        </span>
-                      }
-                      required={field.required}
-                    >
-                      <Input
-                        value={providerParams[field.name] || ""}
-                        onChange={(e) => setProviderParams((prev) => ({ ...prev, [field.name]: e.target.value }))}
-                        placeholder={field.placeholder}
-                        size="large"
-                        className="rounded-md"
-                      />
-                    </Form.Item>
-                  );
-                }
-
-                return (
-                  <Form.Item
-                    key={field.name}
-                    label={
-                      <span>
-                        {field.label}{" "}
-                        <Tooltip title={field.tooltip}>
-                          <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                        </Tooltip>
-                      </span>
-                    }
-                    required={field.required}
-                  >
+              {/* Other Provider-specific fields */}
+              {selectedProvider !== "s3_vectors" &&
+                getProviderSpecificFields(selectedProvider).map((field: VectorStoreFieldConfig) => (
+                  <Field key={field.name}>
+                    <FieldLabel htmlFor={`vector-store-${field.name}`}>
+                      {labelWithHint(field.label, field.tooltip)}
+                    </FieldLabel>
                     <Input
+                      id={`vector-store-${field.name}`}
                       type={field.type === "password" ? "password" : "text"}
-                      value={providerParams[field.name] || ""}
+                      value={asText(providerParams[field.name])}
                       onChange={(e) => setProviderParams((prev) => ({ ...prev, [field.name]: e.target.value }))}
                       placeholder={field.placeholder}
-                      size="large"
-                      className="rounded-md"
                     />
-                  </Form.Item>
-                );
-              })}
-          </Form>
+                  </Field>
+                ))}
+            </FieldGroup>
 
-          <div className="flex justify-end">
-            <Button
-              type="primary"
-              size="large"
-              onClick={handleCreateVectorStore}
-              loading={isCreating}
-              disabled={documents.length === 0 || !selectedProvider}
-            >
-              {isCreating ? "Creating Vector Store..." : "Create Vector Store"}
-            </Button>
-          </div>
-        </div>
-      </Card>
-
-      {/* Success Message */}
-      {ingestResults.length > 0 && (
-        <Alert
-          message="Vector Store Created Successfully"
-          description={
-            <div>
-              <p>
-                <strong>Vector Store ID:</strong> {ingestResults[0]?.vector_store_id}
-              </p>
-              <p>
-                <strong>Documents Ingested:</strong> {ingestResults.length}
-              </p>
+            <div className="flex justify-end">
+              <Button
+                size="lg"
+                onClick={handleCreateVectorStore}
+                disabled={isCreating || documents.length === 0 || !selectedProvider}
+              >
+                {isCreating && <UiLoadingSpinner className="size-4" />}
+                {isCreating ? "Creating Vector Store..." : "Create Vector Store"}
+              </Button>
             </div>
-          }
-          type="success"
-          showIcon
-          closable
-        />
-      )}
-    </div>
+          </div>
+        </Card>
+
+        {/* Success Message */}
+        {ingestResults.length > 0 && (
+          <Alert
+            message="Vector Store Created Successfully"
+            description={
+              <div>
+                <p>
+                  <strong>Vector Store ID:</strong> {ingestResults[0]?.vector_store_id}
+                </p>
+                <p>
+                  <strong>Documents Ingested:</strong> {ingestResults.length}
+                </p>
+              </div>
+            }
+            type="success"
+            showIcon
+            closable
+          />
+        )}
+      </div>
+    </TooltipProvider>
   );
 };
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/S3VectorsConfig.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/S3VectorsConfig.tsx
index 9f2c8f5e45e..3e286ee9b92 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/S3VectorsConfig.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/S3VectorsConfig.tsx
@@ -1,14 +1,37 @@
 import React, { useState, useEffect } from "react";
-import { Alert, Form, Input, Select, Tooltip } from "antd";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Alert } from "antd";
+import { CircleHelp } from "lucide-react";
 import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
+import { Field, FieldError, FieldLabel } from "@/components/shared/form/field";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/components/ui/combobox";
+import { Input } from "@/components/ui/input";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface S3VectorsConfigProps {
   accessToken: string | null;
-  providerParams: Record<string, any>;
-  onParamsChange: (params: Record<string, any>) => void;
+  providerParams: Record<string, unknown>;
+  onParamsChange: (params: Record<string, unknown>) => void;
 }
 
+const labelWithHint = (label: string, hint: string): React.ReactNode => (
+  <>
+    {label}
+    <Tooltip>
+      <TooltipTrigger render={<CircleHelp className="size-3.5 shrink-0 cursor-help text-muted-foreground" />} />
+      <TooltipContent>{hint}</TooltipContent>
+    </Tooltip>
+  </>
+);
+
+const asText = (value: unknown): string => (typeof value === "string" ? value : "");
+
 const S3VectorsConfig: React.FC<S3VectorsConfigProps> = ({ accessToken, providerParams, onParamsChange }) => {
   const [embeddingModels, setEmbeddingModels] = useState<ModelGroup[]>([]);
   const [isLoadingModels, setIsLoadingModels] = useState(false);
@@ -20,7 +43,6 @@ const S3VectorsConfig: React.FC<S3VectorsConfigProps> = ({ accessToken, provider
       setIsLoadingModels(true);
       try {
         const models = await fetchAvailableModels(accessToken);
-        // Filter for embedding models only
         const embeddingOnly = models.filter((model) => model.mode === "embedding");
         setEmbeddingModels(embeddingOnly);
       } catch (error) {
@@ -40,9 +62,16 @@ const S3VectorsConfig: React.FC<S3VectorsConfigProps> = ({ accessToken, provider
     });
   };
 
+  const bucketName = asText(providerParams.vector_bucket_name);
+  const indexName = asText(providerParams.index_name);
+  const bucketNameError = bucketName && bucketName.length < 3 ? "Bucket name must be at least 3 characters" : undefined;
+  const indexNameError =
+    indexName && indexName.length > 0 && indexName.length < 3
+      ? "Index name must be at least 3 characters if provided"
+      : undefined;
+
   return (
-    <>
-      {/* S3 Vectors Setup Instructions */}
+    <TooltipProvider>
       <Alert
         message="AWS S3 Vectors Setup"
         description={
@@ -70,114 +99,75 @@ const S3VectorsConfig: React.FC<S3VectorsConfigProps> = ({ accessToken, provider
         style={{ marginBottom: "16px" }}
       />
 
-      {/* Vector Bucket Name */}
-      <Form.Item
-        label={
-          <span>
-            Vector Bucket Name{" "}
-            <Tooltip title="S3 bucket name for vector storage (must be at least 3 characters, lowercase letters, numbers, hyphens, and periods only)">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
-          </span>
-        }
-        required
-        validateStatus={
-          providerParams.vector_bucket_name && providerParams.vector_bucket_name.length < 3 ? "error" : undefined
-        }
-        help={
-          providerParams.vector_bucket_name && providerParams.vector_bucket_name.length < 3
-            ? "Bucket name must be at least 3 characters"
-            : undefined
-        }
-      >
+      <Field data-invalid={bucketNameError !== undefined || undefined}>
+        <FieldLabel htmlFor="s3-vector-bucket-name">
+          {labelWithHint(
+            "Vector Bucket Name",
+            "S3 bucket name for vector storage (must be at least 3 characters, lowercase letters, numbers, hyphens, and periods only)",
+          )}
+        </FieldLabel>
         <Input
-          value={providerParams.vector_bucket_name || ""}
+          id="s3-vector-bucket-name"
+          value={bucketName}
           onChange={(e) => handleFieldChange("vector_bucket_name", e.target.value)}
           placeholder="my-vector-bucket (min 3 chars)"
-          size="large"
-          className="rounded-md"
+          aria-invalid={bucketNameError !== undefined || undefined}
         />
-      </Form.Item>
+        <FieldError>{bucketNameError}</FieldError>
+      </Field>
 
-      {/* Index Name (Optional) */}
-      <Form.Item
-        label={
-          <span>
-            Index Name{" "}
-            <Tooltip title="Name for the vector index (optional, will be auto-generated if not provided). If provided, must be at least 3 characters.">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
-          </span>
-        }
-        validateStatus={
-          providerParams.index_name && providerParams.index_name.length > 0 && providerParams.index_name.length < 3
-            ? "error"
-            : undefined
-        }
-        help={
-          providerParams.index_name && providerParams.index_name.length > 0 && providerParams.index_name.length < 3
-            ? "Index name must be at least 3 characters if provided"
-            : undefined
-        }
-      >
+      <Field data-invalid={indexNameError !== undefined || undefined}>
+        <FieldLabel htmlFor="s3-index-name">
+          {labelWithHint(
+            "Index Name",
+            "Name for the vector index (optional, will be auto-generated if not provided). If provided, must be at least 3 characters.",
+          )}
+        </FieldLabel>
         <Input
-          value={providerParams.index_name || ""}
+          id="s3-index-name"
+          value={indexName}
           onChange={(e) => handleFieldChange("index_name", e.target.value)}
           placeholder="my-vector-index (optional, min 3 chars)"
-          size="large"
-          className="rounded-md"
+          aria-invalid={indexNameError !== undefined || undefined}
         />
-      </Form.Item>
+        <FieldError>{indexNameError}</FieldError>
+      </Field>
 
-      {/* AWS Region */}
-      <Form.Item
-        label={
-          <span>
-            AWS Region{" "}
-            <Tooltip title="AWS region where the S3 bucket is located (e.g., us-west-2)">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
-          </span>
-        }
-        required
-      >
+      <Field>
+        <FieldLabel htmlFor="s3-aws-region-name">
+          {labelWithHint("AWS Region", "AWS region where the S3 bucket is located (e.g., us-west-2)")}
+        </FieldLabel>
         <Input
-          value={providerParams.aws_region_name || ""}
+          id="s3-aws-region-name"
+          value={asText(providerParams.aws_region_name)}
           onChange={(e) => handleFieldChange("aws_region_name", e.target.value)}
           placeholder="us-west-2"
-          size="large"
-          className="rounded-md"
         />
-      </Form.Item>
+      </Field>
 
-      {/* Embedding Model */}
-      <Form.Item
-        label={
-          <span>
-            Embedding Model{" "}
-            <Tooltip title="Select the embedding model to use for vector generation">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
-          </span>
-        }
-        required
-      >
-        <Select
-          value={providerParams.embedding_model || undefined}
-          onChange={(value) => handleFieldChange("embedding_model", value)}
-          placeholder="Select an embedding model"
-          size="large"
-          showSearch
-          loading={isLoadingModels}
-          filterOption={(input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase())}
-          options={embeddingModels.map((model) => ({
-            value: model.model_group,
-            label: model.model_group,
-          }))}
-          style={{ width: "100%" }}
-        />
-      </Form.Item>
-    </>
+      <Field>
+        <FieldLabel htmlFor="s3-embedding-model">
+          {labelWithHint("Embedding Model", "Select the embedding model to use for vector generation")}
+        </FieldLabel>
+        <Combobox
+          value={asText(providerParams.embedding_model) || null}
+          onValueChange={(value: string | null) => value !== null && handleFieldChange("embedding_model", value)}
+          items={embeddingModels.map((model) => model.model_group)}
+        >
+          <ComboboxInput id="s3-embedding-model" placeholder="Select an embedding model" />
+          <ComboboxContent>
+            <ComboboxEmpty>{isLoadingModels ? "Loading models..." : "No embedding models found."}</ComboboxEmpty>
+            <ComboboxList>
+              {(model: string) => (
+                <ComboboxItem key={model} value={model}>
+                  {model}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      </Field>
+    </TooltipProvider>
   );
 };