diff --git a/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.test.tsx b/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.test.tsx
index 5dca1f65874..cfcbd841f63 100644
--- a/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.test.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.test.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 // eslint-disable-next-line no-restricted-imports -- exercising KeyLifecycleSettings requires hosting it in a real antd Form (the component it's built on)
 import { Form } from "antd";
-import userEvent from "@testing-library/user-event";
+import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
 import { describe, expect, it, vi, beforeEach } from "vitest";
 import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
 import KeyLifecycleSettings from "./KeyLifecycleSettings";
@@ -22,16 +22,17 @@ const Harness: React.FC<HarnessProps> = ({ isCreateMode = true, onFinish = () =>
 
   return (
     <Form form={form} onFinish={onFinish}>
-      <KeyLifecycleSettings
-        form={form}
-        autoRotationEnabled={autoRotationEnabled}
-        onAutoRotationChange={setAutoRotationEnabled}
-        rotationInterval={rotationInterval}
-        onRotationIntervalChange={setRotationInterval}
-        isCreateMode={isCreateMode}
-        neverExpire={neverExpire}
-        onNeverExpireChange={setNeverExpire}
-      />
+      <Form.Item name="duration" initialValue="" noStyle>
+        <KeyLifecycleSettings
+          autoRotationEnabled={autoRotationEnabled}
+          onAutoRotationChange={setAutoRotationEnabled}
+          rotationInterval={rotationInterval}
+          onRotationIntervalChange={setRotationInterval}
+          isCreateMode={isCreateMode}
+          neverExpire={neverExpire}
+          onNeverExpireChange={setNeverExpire}
+        />
+      </Form.Item>
       <button type="submit">submit</button>
       <button type="button" onClick={() => form.resetFields()}>
         reset
@@ -58,6 +59,12 @@ describe("KeyLifecycleSettings", () => {
     expect(getDurationInput()).toBeInTheDocument();
   });
 
+  it("gives the duration input and the Never Expire checkbox their own labels", () => {
+    renderWithProviders(<Harness isCreateMode={false} />);
+    expect(screen.getByLabelText("Expire Key")).toBe(getDurationInput(false));
+    expect(screen.getByRole("checkbox", { name: "Never Expire" })).toBeInTheDocument();
+  });
+
   it("uses the create-mode placeholder in create mode", () => {
     renderWithProviders(<Harness isCreateMode={true} />);
     expect(screen.getByPlaceholderText(CREATE_PLACEHOLDER)).toBeInTheDocument();
@@ -194,7 +201,7 @@ describe("KeyLifecycleSettings", () => {
     });
 
     it("hides the custom input and propagates the value when switching back to a predefined interval", async () => {
-      const user = userEvent.setup();
+      const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
       renderWithProviders(<Harness />);
 
       await user.click(screen.getByRole("switch"));
diff --git a/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx b/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx
index 8e88fab1095..ee582013d9d 100644
--- a/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx
@@ -1,23 +1,50 @@
 import React, { useState } from "react";
-import { Select, Tooltip, Divider, Switch, Checkbox, Form } from "antd";
-import { InfoCircleOutlined } from "@ant-design/icons";
-import { TextInput } from "@tremor/react";
+import { CircleHelp } from "lucide-react";
 
-const { Option } = Select;
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+const PREDEFINED_INTERVALS = ["7d", "30d", "90d", "180d", "365d"] as const;
+
+const INTERVAL_LABELS: Record<string, string> = {
+  "7d": "7 days",
+  "30d": "30 days",
+  "90d": "90 days",
+  "180d": "180 days",
+  "365d": "365 days",
+  custom: "Custom interval",
+};
 
 interface KeyLifecycleSettingsProps {
-  form: any; // Form instance from parent
+  value?: string;
+  onChange?: (value: string) => void;
   autoRotationEnabled: boolean;
   onAutoRotationChange: (enabled: boolean) => void;
   rotationInterval: string;
   onRotationIntervalChange: (interval: string) => void;
-  isCreateMode?: boolean; // If true, shows "leave empty to never expire" instead of "-1 to never expire"
+  isCreateMode?: boolean;
   neverExpire?: boolean;
   onNeverExpireChange?: (checked: boolean) => void;
+  id?: string;
 }
 
+const hintIcon = (hint: string): React.ReactNode => (
+  <Tooltip>
+    <TooltipTrigger
+      render={<CircleHelp className="size-3.5 shrink-0 cursor-help text-muted-foreground" />}
+      aria-label={hint}
+    />
+    <TooltipContent>{hint}</TooltipContent>
+  </Tooltip>
+);
+
 const KeyLifecycleSettings: React.FC<KeyLifecycleSettingsProps> = ({
-  form,
+  value,
+  onChange,
   autoRotationEnabled,
   onAutoRotationChange,
   rotationInterval,
@@ -25,145 +52,151 @@ const KeyLifecycleSettings: React.FC<KeyLifecycleSettingsProps> = ({
   isCreateMode = false,
   neverExpire = false,
   onNeverExpireChange,
+  id,
 }) => {
-  // Predefined intervals
-  const predefinedIntervals = ["7d", "30d", "90d", "180d", "365d"];
-
-  // Check if current interval is custom
-  const isCustomInterval = rotationInterval && !predefinedIntervals.includes(rotationInterval);
+  const isCustomInterval = Boolean(rotationInterval) && !PREDEFINED_INTERVALS.includes(rotationInterval as never);
 
   const [showCustomInput, setShowCustomInput] = useState(isCustomInterval);
   const [customInterval, setCustomInterval] = useState(isCustomInterval ? rotationInterval : "");
 
-  const handleIntervalChange = (value: string) => {
-    if (value === "custom") {
+  const durationId = id ?? "key-lifecycle-duration";
+
+  const handleIntervalChange = (next: string) => {
+    if (next === "custom") {
       setShowCustomInput(true);
-      // Don't change the actual interval yet, wait for custom input
-    } else {
-      setShowCustomInput(false);
-      setCustomInterval("");
-      onRotationIntervalChange(value);
+      return;
+    }
+    setShowCustomInput(false);
+    setCustomInterval("");
+    onRotationIntervalChange(next);
+  };
+
+  const handleCustomIntervalChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setCustomInterval(event.target.value);
+    onRotationIntervalChange(event.target.value);
+  };
+
+  const handleNeverExpireChange = (checked: boolean) => {
+    onNeverExpireChange?.(checked);
+    if (checked) {
+      onChange?.("");
     }
   };
 
-  const handleCustomIntervalChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setCustomInterval(value);
-    onRotationIntervalChange(value);
-  };
-
   return (
-    <div className="space-y-6">
-      {/* Key Expiry Section */}
-      <div className="space-y-4">
-        <span className="text-sm font-medium text-gray-700">Key Expiry Settings</span>
+    <TooltipProvider>
+      <div className="space-y-6">
+        <div className="space-y-4">
+          <span className="text-sm font-medium text-foreground">Key Expiry Settings</span>
 
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-gray-700 flex items-center space-x-1">
-            <span>Expire Key</span>
-            <Tooltip title="Set when this key should expire. Format: 30s (seconds), 30m (minutes), 30h (hours), 30d (days). Leave empty to keep the current expiry unchanged.">
-              <InfoCircleOutlined className="text-gray-400 cursor-help text-xs" />
-            </Tooltip>
-            {!isCreateMode && onNeverExpireChange && (
-              <Checkbox
-                checked={neverExpire}
-                onChange={(e) => {
-                  const checked = e.target.checked;
-                  onNeverExpireChange(checked);
-                  if (checked) {
-                    if (form && typeof form.setFieldValue === "function") {
-                      form.setFieldValue("duration", "");
-                    } else if (form && typeof form.setFieldsValue === "function") {
-                      form.setFieldsValue({ duration: "" });
-                    }
-                  }
-                }}
-                className="ml-2 text-sm font-normal text-gray-600"
-              >
-                Never Expire
-              </Checkbox>
-            )}
-          </label>
-          <Form.Item name="duration" noStyle initialValue="">
-            <TextInput
+          <div className="space-y-2">
+            <div className="flex items-center space-x-1 text-sm font-medium text-foreground">
+              <label htmlFor={durationId}>Expire Key</label>
+              {hintIcon(
+                "Set when this key should expire. Format: 30s (seconds), 30m (minutes), 30h (hours), 30d (days). Leave empty to keep the current expiry unchanged.",
+              )}
+              {!isCreateMode && onNeverExpireChange && (
+                <span className="ml-2 flex items-center gap-2 text-sm font-normal text-muted-foreground">
+                  <Checkbox
+                    id={`${durationId}-never-expire`}
+                    checked={neverExpire}
+                    onCheckedChange={handleNeverExpireChange}
+                  />
+                  <label htmlFor={`${durationId}-never-expire`} className="cursor-pointer">
+                    Never Expire
+                  </label>
+                </span>
+              )}
+            </div>
+            <Input
+              id={durationId}
+              value={value ?? ""}
+              onChange={(event) => onChange?.(event.target.value)}
               placeholder={isCreateMode ? "e.g., 30d or leave empty to never expire" : "e.g., 30d"}
               className="w-full"
               disabled={!isCreateMode && neverExpire}
             />
-          </Form.Item>
+          </div>
         </div>
-      </div>
 
-      <Divider />
+        <Separator />
 
-      {/* Auto-Rotation Section */}
-      <div className="space-y-4">
-        <span className="text-sm font-medium text-gray-700">Auto-Rotation Settings</span>
+        <div className="space-y-4">
+          <span className="text-sm font-medium text-foreground">Auto-Rotation Settings</span>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-gray-700 flex items-center space-x-1">
-              <span>Enable Auto-Rotation</span>
-              <Tooltip title="Key will automatically regenerate at the specified interval for enhanced security.">
-                <InfoCircleOutlined className="text-gray-400 cursor-help text-xs" />
-              </Tooltip>
-            </label>
-            <Switch
-              checked={autoRotationEnabled}
-              onChange={onAutoRotationChange}
-              size="default"
-              className={autoRotationEnabled ? "" : "bg-gray-400"}
-            />
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <label className="flex items-center space-x-1 text-sm font-medium text-foreground">
+                <span>Enable Auto-Rotation</span>
+                {hintIcon("Key will automatically regenerate at the specified interval for enhanced security.")}
+              </label>
+              <Switch checked={autoRotationEnabled} onCheckedChange={onAutoRotationChange} />
+            </div>
+
+            {autoRotationEnabled && (
+              <div className="space-y-2">
+                <label className="flex items-center space-x-1 text-sm font-medium text-foreground">
+                  <span>Rotation Interval</span>
+                  {hintIcon(
+                    "How often the key should be automatically rotated. Choose the interval that best fits your security requirements.",
+                  )}
+                </label>
+                <div className="space-y-2">
+                  <Select
+                    value={showCustomInput ? "custom" : rotationInterval || null}
+                    onValueChange={(next: string | null) => next !== null && handleIntervalChange(next)}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select interval">
+                        {(selected: string | null) =>
+                          selected === null ? (
+                            "Select interval"
+                          ) : (
+                            <span title={INTERVAL_LABELS[selected] ?? selected}>
+                              {INTERVAL_LABELS[selected] ?? selected}
+                            </span>
+                          )
+                        }
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {PREDEFINED_INTERVALS.map((interval) => (
+                        <SelectItem key={interval} value={interval} title={INTERVAL_LABELS[interval]}>
+                          {INTERVAL_LABELS[interval]}
+                        </SelectItem>
+                      ))}
+                      <SelectItem value="custom" title={INTERVAL_LABELS.custom}>
+                        {INTERVAL_LABELS.custom}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+
+                  {showCustomInput && (
+                    <div className="space-y-1">
+                      <Input
+                        value={customInterval}
+                        onChange={handleCustomIntervalChange}
+                        placeholder="e.g., 1s, 5m, 2h, 14d"
+                      />
+                      <div className="text-xs text-muted-foreground">
+                        Supported formats: seconds (s), minutes (m), hours (h), days (d)
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
           </div>
 
           {autoRotationEnabled && (
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-gray-700 flex items-center space-x-1">
-                <span>Rotation Interval</span>
-                <Tooltip title="How often the key should be automatically rotated. Choose the interval that best fits your security requirements.">
-                  <InfoCircleOutlined className="text-gray-400 cursor-help text-xs" />
-                </Tooltip>
-              </label>
-              <div className="space-y-2">
-                <Select
-                  value={showCustomInput ? "custom" : rotationInterval}
-                  onChange={handleIntervalChange}
-                  className="w-full"
-                  placeholder="Select interval"
-                >
-                  <Option value="7d">7 days</Option>
-                  <Option value="30d">30 days</Option>
-                  <Option value="90d">90 days</Option>
-                  <Option value="180d">180 days</Option>
-                  <Option value="365d">365 days</Option>
-                  <Option value="custom">Custom interval</Option>
-                </Select>
-
-                {showCustomInput && (
-                  <div className="space-y-1">
-                    <TextInput
-                      value={customInterval}
-                      onChange={handleCustomIntervalChange}
-                      placeholder="e.g., 1s, 5m, 2h, 14d"
-                    />
-                    <div className="text-xs text-gray-500">
-                      Supported formats: seconds (s), minutes (m), hours (h), days (d)
-                    </div>
-                  </div>
-                )}
-              </div>
+            <div className="rounded-md bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-950 dark:text-blue-300">
+              When rotation occurs, you&apos;ll receive a notification with the new key. The old key will be deactivated
+              after a brief grace period.
             </div>
           )}
         </div>
-
-        {autoRotationEnabled && (
-          <div className="bg-blue-50 p-3 rounded-md text-sm text-blue-700">
-            When rotation occurs, you&apos;ll receive a notification with the new key. The old key will be deactivated
-            after a brief grace period.
-          </div>
-        )}
       </div>
-    </div>
+    </TooltipProvider>
   );
 };
 
diff --git a/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.tsx b/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.tsx
index e3524bb8f49..a4f0a774ba0 100644
--- a/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.tsx
@@ -1,109 +1,127 @@
 import React from "react";
-import { Form, Select, Tooltip } from "antd";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { CircleHelp } from "lucide-react";
 
-const { Option } = Select;
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+type RateLimitType = "tpm" | "rpm";
+
+interface RateLimitTypeOption {
+  value: string;
+  label: string;
+  description: string;
+}
 
 interface RateLimitTypeFormItemProps {
   /** The type of rate limit - either 'tpm' or 'rpm' */
-  type: "tpm" | "rpm";
+  type: RateLimitType;
   /** The form field name */
   name: string;
   /** Whether to show detailed descriptions (default: true) */
   showDetailedDescriptions?: boolean;
   /** Additional CSS classes */
   className?: string;
-  /** Initial value for the field */
-  initialValue?: string | null;
-  /** Form instance for setting field values */
-  form?: any;
+  value?: string | null;
   /** Custom onChange handler */
   onChange?: (value: string) => void;
+  id?: string;
+  disabled?: boolean;
+  "aria-invalid"?: true | undefined;
+  "aria-describedby"?: string | undefined;
 }
 
+const rateLimitTypeOptions = (type: RateLimitType): RateLimitTypeOption[] => {
+  const upper = type.toUpperCase();
+  const lower = type.toLowerCase();
+  return [
+    {
+      value: "best_effort_throughput",
+      label: "Default",
+      description: `Best effort throughput - no error if we're overallocating ${lower} (Team/Key Limits checked at runtime).`,
+    },
+    {
+      value: "guaranteed_throughput",
+      label: "Guaranteed throughput",
+      description: `Guaranteed throughput - raise an error if we're overallocating ${lower} (also checks model-specific limits)`,
+    },
+    {
+      value: "dynamic",
+      label: "Dynamic",
+      description: `If the key has a set ${upper} (e.g. 2 ${upper}) and there are no 429 errors, it can dynamically exceed the limit when the model being called is not erroring.`,
+    },
+  ];
+};
+
+const plainLabels: Record<string, string> = {
+  best_effort_throughput: "Best effort throughput",
+  guaranteed_throughput: "Guaranteed throughput",
+  dynamic: "Dynamic",
+};
+
+const rateLimitTypeLabelText = (type: RateLimitType): string => `${type.toUpperCase()} Rate Limit Type`;
+
+const rateLimitTypeTooltip = (type: RateLimitType): string =>
+  `Select 'guaranteed_throughput' to prevent overallocating ${type.toUpperCase()} limit when the key belongs to a Team with specific ${type.toUpperCase()} limits.`;
+
 export const RateLimitTypeFormItem: React.FC<RateLimitTypeFormItemProps> = ({
   type,
   name,
   showDetailedDescriptions = true,
   className = "",
-  initialValue = null,
-  form,
+  value,
   onChange,
+  id,
+  disabled,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
 }) => {
-  const limitTypeUpper = type.toUpperCase();
-  const limitTypeLower = type.toLowerCase();
-
-  const handleChange = (value: string) => {
-    if (form) {
-      form.setFieldValue(name, value);
-    }
-    if (onChange) {
-      onChange(value);
-    }
-  };
-
-  const tooltipTitle = `Select 'guaranteed_throughput' to prevent overallocating ${limitTypeUpper} limit when the key belongs to a Team with specific ${limitTypeUpper} limits.`;
+  const controlId = id ?? `rate-limit-type-${name}`;
+  const options = rateLimitTypeOptions(type);
 
   return (
-    <Form.Item
-      label={
-        <span>
-          {limitTypeUpper} Rate Limit Type{" "}
-          <Tooltip title={tooltipTitle}>
-            <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+    <div className={className}>
+      <TooltipProvider>
+        <label htmlFor={controlId} className="mb-2 flex items-center gap-1 text-sm text-foreground">
+          {rateLimitTypeLabelText(type)}
+          <Tooltip>
+            <TooltipTrigger
+              render={<CircleHelp className="size-3.5 shrink-0 cursor-help text-muted-foreground" />}
+              aria-label={rateLimitTypeTooltip(type)}
+            />
+            <TooltipContent>{rateLimitTypeTooltip(type)}</TooltipContent>
           </Tooltip>
-        </span>
-      }
-      name={name}
-      initialValue={initialValue}
-      className={className}
-    >
+        </label>
+      </TooltipProvider>
       <Select
-        defaultValue={showDetailedDescriptions ? "default" : undefined}
-        placeholder="Select rate limit type"
-        style={{ width: "100%" }}
-        optionLabelProp={showDetailedDescriptions ? "label" : undefined}
-        onChange={handleChange}
+        value={value ?? null}
+        onValueChange={(next: string | null) => next !== null && onChange?.(next)}
+        disabled={disabled}
       >
-        {showDetailedDescriptions ? (
-          <>
-            <Option value="best_effort_throughput" label="Default">
-              <div style={{ padding: "4px 0" }}>
-                <div style={{ fontWeight: 500 }}>Default</div>
-                <div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
-                  Best effort throughput - no error if we&apos;re overallocating {limitTypeLower} (Team/Key Limits
-                  checked at runtime).
-                </div>
-              </div>
-            </Option>
-            <Option value="guaranteed_throughput" label="Guaranteed throughput">
-              <div style={{ padding: "4px 0" }}>
-                <div style={{ fontWeight: 500 }}>Guaranteed throughput</div>
-                <div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
-                  Guaranteed throughput - raise an error if we&apos;re overallocating {limitTypeLower} (also checks
-                  model-specific limits)
-                </div>
-              </div>
-            </Option>
-            <Option value="dynamic" label="Dynamic">
-              <div style={{ padding: "4px 0" }}>
-                <div style={{ fontWeight: 500 }}>Dynamic</div>
-                <div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
-                  If the key has a set {limitTypeUpper} (e.g. 2 {limitTypeUpper}) and there are no 429 errors, it can
-                  dynamically exceed the limit when the model being called is not erroring.
-                </div>
-              </div>
-            </Option>
-          </>
-        ) : (
-          <>
-            <Option value="best_effort_throughput">Best effort throughput</Option>
-            <Option value="guaranteed_throughput">Guaranteed throughput</Option>
-            <Option value="dynamic">Dynamic</Option>
-          </>
-        )}
+        <SelectTrigger id={controlId} className="w-full" aria-invalid={ariaInvalid} aria-describedby={ariaDescribedBy}>
+          <SelectValue placeholder="Select rate limit type">
+            {(selected: string | null) =>
+              selected === null ? "Select rate limit type" : plainLabels[selected] ?? selected
+            }
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) =>
+            showDetailedDescriptions ? (
+              <SelectItem key={option.value} value={option.value} title={option.label}>
+                <span className="flex flex-col py-1">
+                  <span className="font-medium">{option.label}</span>
+                  <span className="mt-0.5 text-[11px] text-muted-foreground">{option.description}</span>
+                </span>
+              </SelectItem>
+            ) : (
+              <SelectItem key={option.value} value={option.value} title={plainLabels[option.value]}>
+                {plainLabels[option.value]}
+              </SelectItem>
+            ),
+          )}
+        </SelectContent>
       </Select>
-    </Form.Item>
+    </div>
   );
 };
 
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx
new file mode 100644
index 00000000000..feea216e4ff
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx
@@ -0,0 +1,171 @@
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
+import CreateKey from "./create_key_button";
+
+const { mockKeyCreateCall } = vi.hoisted(() => ({
+  mockKeyCreateCall: vi.fn().mockResolvedValue({ key: "sk-created", soft_budget: null }),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({
+  default: () => ({ accessToken: "test-token", userId: "test-user-id", userRole: "Admin", premiumUser: true }),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/useCan", () => ({ default: () => false }));
+
+vi.mock("@/app/(dashboard)/hooks/keys/useKeys", () => ({ keyKeys: { lists: () => ["keys"] } }));
+
+vi.mock("@/app/(dashboard)/hooks/organizations/useOrganizations", () => ({
+  useOrganizations: () => ({ data: [], isLoading: false }),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/projects/useProjects", () => ({
+  useProjects: () => ({ data: [], isLoading: false }),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/uiSettings/useUISettings", () => ({
+  useUISettings: () => ({ data: { values: {} } }),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/tags/useTags", () => ({ useTags: () => ({ data: {} }) }));
+
+vi.mock("@/app/(dashboard)/hooks/teams/useTeams", () => ({
+  useInfiniteTeams: () => ({ data: { pages: [{ teams: [] }] }, fetchNextPage: vi.fn(), hasNextPage: false }),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/accessGroups/useAccessGroups", () => ({
+  useAccessGroups: () => ({ data: [], isLoading: false, isError: false }),
+}));
+
+vi.mock("../networking", () => ({
+  keyCreateCall: mockKeyCreateCall,
+  keyCreateServiceAccountCall: vi.fn().mockResolvedValue({ key: "sk-sa", soft_budget: null }),
+  modelAvailableCall: vi.fn().mockResolvedValue({ data: [{ id: "gpt-4" }] }),
+  getGuardrailsList: vi.fn().mockResolvedValue({ guardrails: [] }),
+  getPoliciesList: vi.fn().mockResolvedValue({ policies: [] }),
+  getPromptsList: vi.fn().mockResolvedValue({ prompts: [] }),
+  getPossibleUserRoles: vi.fn().mockResolvedValue({}),
+  userFilterUICall: vi.fn().mockResolvedValue([]),
+  fetchMCPAccessGroups: vi.fn().mockResolvedValue([]),
+  getAgentsList: vi.fn().mockResolvedValue({ agents: [] }),
+  getPassThroughEndpointsCall: vi.fn().mockResolvedValue({ endpoints: [] }),
+  proxyBaseUrl: "http://localhost:4000",
+}));
+
+vi.mock("../agent_management/AgentSelector", () => ({ default: () => null }));
+vi.mock("../common_components/check_openapi_schema", () => ({ default: () => null }));
+vi.mock("../common_components/PremiumLoggingSettings", () => ({ default: () => null }));
+vi.mock("../common_components/RouterSettingsAccordion", () => ({ default: () => null }));
+vi.mock("../mcp_server_management/MCPServerSelector", () => ({ default: () => null }));
+vi.mock("../mcp_server_management/MCPToolPermissions", () => ({ default: () => null }));
+vi.mock("../vector_store_management/VectorStoreSelector", () => ({ default: () => null }));
+vi.mock("../CreateUserButton", () => ({ CreateUserButton: () => null }));
+
+const MINIMAL_CREATE_PAYLOAD = {
+  organization_id: undefined,
+  team_id: null,
+  key_alias: "probe-key",
+  models: [],
+  key_type: "llm_api",
+  user_id: "test-user-id",
+  duration: null,
+  metadata: "{}",
+};
+
+describe("CreateKey submit payload contract", () => {
+  beforeEach(() => {
+    mockKeyCreateCall.mockClear();
+  });
+
+  const openModal = async () => {
+    renderWithProviders(<CreateKey team={null} teams={[]} data={[]} addKey={() => {}} />);
+    await userEvent.click(screen.getAllByTestId("create-key-button")[0]);
+    await screen.findByRole("button", { name: /create key/i });
+  };
+
+  it("sends exactly the bound form fields for a minimal create", async () => {
+    await openModal();
+
+    await userEvent.type(screen.getByLabelText(/Key Name/), "probe-key");
+    await userEvent.click(screen.getByRole("button", { name: /create key/i }));
+
+    await waitFor(() => {
+      expect(mockKeyCreateCall).toHaveBeenCalled();
+    });
+    expect(mockKeyCreateCall.mock.calls[0][2]).toStrictEqual(MINIMAL_CREATE_PAYLOAD);
+  });
+
+  it("keeps a collapsed Optional Settings section out of the payload entirely", async () => {
+    await openModal();
+
+    await userEvent.type(screen.getByLabelText(/Key Name/), "probe-key");
+    await userEvent.click(screen.getByRole("button", { name: /create key/i }));
+
+    await waitFor(() => {
+      expect(mockKeyCreateCall).toHaveBeenCalled();
+    });
+    const payload = mockKeyCreateCall.mock.calls[0][2];
+    expect(payload).not.toHaveProperty("tpm_limit_type");
+    expect(payload).not.toHaveProperty("rpm_limit_type");
+    expect(payload).not.toHaveProperty("max_budget");
+  });
+
+  it("carries the shared rate-limit-type control into the payload once its section is open", async () => {
+    await openModal();
+
+    await userEvent.type(screen.getByLabelText(/Key Name/), "probe-key");
+    await userEvent.click(screen.getByText("Optional Settings"));
+
+    await userEvent.click(await screen.findByLabelText(/TPM Rate Limit Type/));
+    await userEvent.click(await screen.findByText("Guaranteed throughput"));
+
+    await userEvent.click(screen.getByRole("button", { name: /create key/i }));
+
+    await waitFor(() => {
+      expect(mockKeyCreateCall).toHaveBeenCalled();
+    });
+    expect(mockKeyCreateCall.mock.calls[0][2]).toMatchObject({
+      tpm_limit_type: "guaranteed_throughput",
+      rpm_limit_type: null,
+    });
+  });
+
+  it("carries the shared lifecycle expiry into the payload once its section is open", async () => {
+    await openModal();
+
+    await userEvent.type(screen.getByLabelText(/Key Name/), "probe-key");
+    await userEvent.click(screen.getByText("Optional Settings"));
+    await userEvent.click(await screen.findByText("Key Lifecycle"));
+
+    await userEvent.type(await screen.findByLabelText("Expire Key"), "45d");
+
+    await userEvent.click(screen.getByRole("button", { name: /create key/i }));
+
+    await waitFor(() => {
+      expect(mockKeyCreateCall).toHaveBeenCalled();
+    });
+    expect(mockKeyCreateCall.mock.calls[0][2]).toMatchObject({ duration: "45d" });
+  });
+
+  it("preserves a value typed in a section that is collapsed and reopened before submit", async () => {
+    await openModal();
+
+    await userEvent.type(screen.getByLabelText(/Key Name/), "probe-key");
+    await userEvent.click(screen.getByText("Optional Settings"));
+
+    const maxBudget = await screen.findByLabelText(/Max Budget/);
+    await userEvent.type(maxBudget, "150.75");
+
+    await userEvent.click(screen.getByText("Optional Settings"));
+    await userEvent.click(screen.getByText("Optional Settings"));
+
+    expect(await screen.findByLabelText(/Max Budget/)).toHaveValue(150.75);
+
+    await userEvent.click(screen.getByRole("button", { name: /create key/i }));
+
+    await waitFor(() => {
+      expect(mockKeyCreateCall).toHaveBeenCalled();
+    });
+    expect(mockKeyCreateCall.mock.calls[0][2]).toMatchObject({ max_budget: "150.75" });
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
index d8cd537bc8a..ab0e381bbd8 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -1128,14 +1128,9 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
                   >
                     <NumericalInput step={1} width={400} />
                   </Form.Item>
-                  <RateLimitTypeFormItem
-                    type="tpm"
-                    name="tpm_limit_type"
-                    className="mt-4"
-                    initialValue={null}
-                    form={form}
-                    showDetailedDescriptions={true}
-                  />
+                  <Form.Item name="tpm_limit_type" initialValue={null} noStyle>
+                    <RateLimitTypeFormItem type="tpm" name="tpm_limit_type" className="mt-4" showDetailedDescriptions />
+                  </Form.Item>
                   <Form.Item
                     className="mt-4"
                     label={
@@ -1160,14 +1155,9 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
                   >
                     <NumericalInput step={1} width={400} />
                   </Form.Item>
-                  <RateLimitTypeFormItem
-                    type="rpm"
-                    name="rpm_limit_type"
-                    className="mt-4"
-                    initialValue={null}
-                    form={form}
-                    showDetailedDescriptions={true}
-                  />
+                  <Form.Item name="rpm_limit_type" initialValue={null} noStyle>
+                    <RateLimitTypeFormItem type="rpm" name="rpm_limit_type" className="mt-4" showDetailedDescriptions />
+                  </Form.Item>
                   <Form.Item
                     className="mt-4"
                     label={
@@ -1633,14 +1623,15 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
                     </AccordionHeader>
                     <AccordionBody>
                       <div className="mt-4">
-                        <KeyLifecycleSettings
-                          form={form}
-                          autoRotationEnabled={autoRotationEnabled}
-                          onAutoRotationChange={setAutoRotationEnabled}
-                          rotationInterval={rotationInterval}
-                          onRotationIntervalChange={setRotationInterval}
-                          isCreateMode={true}
-                        />
+                        <Form.Item name="duration" initialValue="" noStyle>
+                          <KeyLifecycleSettings
+                            autoRotationEnabled={autoRotationEnabled}
+                            onAutoRotationChange={setAutoRotationEnabled}
+                            rotationInterval={rotationInterval}
+                            onRotationIntervalChange={setRotationInterval}
+                            isCreateMode={true}
+                          />
+                        </Form.Item>
                       </div>
                     </AccordionBody>
                   </Accordion>
diff --git a/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx b/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx
index a570ba66d75..56357acdbfa 100644
--- a/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx
@@ -1649,4 +1649,135 @@ describe("KeyEditView", () => {
       expect(screen.getByLabelText("Estimated Output Tokens Per Model")).toBeEnabled();
     });
   });
+
+  const UNTOUCHED_SAVE_PAYLOAD = {
+    key_alias: "asdasdas",
+    models: [],
+    max_budget: 0,
+    budget_duration: "30d",
+    tpm_limit: 10,
+    tpm_limit_type: null,
+    rpm_limit: 10,
+    rpm_limit_type: null,
+    throttle_on_budget_exceeded: false,
+    enable_prompt_caching: false,
+    max_parallel_requests: 10,
+    model_tpm_limit: undefined,
+    model_rpm_limit: undefined,
+    guardrails: undefined,
+    disable_global_guardrails: false,
+    policies: undefined,
+    tags: ["test-tag"],
+    prompts: undefined,
+    access_group_ids: [],
+    allowed_passthrough_routes: undefined,
+    vector_stores: [],
+    mcp_servers_and_groups: { servers: [], accessGroups: [], toolsets: [] },
+    mcp_tool_permissions: {},
+    agents_and_groups: { agents: [], accessGroups: [] },
+    organization_id: null,
+    team_id: null,
+    logging_settings: [],
+    metadata: "{}",
+    duration: "30d",
+    token: "test-token-123",
+    disabled_callbacks: [],
+    auto_rotate: false,
+    rotation_interval: undefined,
+    tag_rpm_limit: {},
+  };
+
+  describe("submit payload contract", () => {
+    const renderForPayload = (
+      onSubmit: (values: Record<string, unknown>) => Promise<void>,
+      keyData: KeyResponse = MOCK_KEY_DATA,
+    ) =>
+      renderWithProviders(
+        <KeyEditView
+          keyData={keyData}
+          onCancel={() => {}}
+          onSubmit={onSubmit}
+          accessToken={"test-token"}
+          userID={"test-user"}
+          userRole={"Admin"}
+          premiumUser={true}
+        />,
+      );
+
+    it("sends exactly the bound form fields on an untouched save, and no server-only key data", async () => {
+      const onSubmitMock = vi.fn().mockResolvedValue(undefined);
+      renderForPayload(onSubmitMock);
+      await screen.findByRole("button", { name: /save changes/i });
+
+      await userEvent.click(screen.getByRole("button", { name: /save changes/i }));
+
+      await waitFor(() => {
+        expect(onSubmitMock).toHaveBeenCalled();
+      });
+      expect(onSubmitMock.mock.calls[0][0]).toStrictEqual(UNTOUCHED_SAVE_PAYLOAD);
+    });
+
+    it("drops the policy and prompt keys entirely for a role that cannot see those fields", async () => {
+      const onSubmitMock = vi.fn().mockResolvedValue(undefined);
+      renderWithProviders(
+        <KeyEditView
+          keyData={MOCK_KEY_DATA}
+          onCancel={() => {}}
+          onSubmit={onSubmitMock}
+          accessToken={"test-token"}
+          userID={"test-user"}
+          userRole={"Internal User"}
+          premiumUser={true}
+        />,
+      );
+      await screen.findByRole("button", { name: /save changes/i });
+
+      await userEvent.click(screen.getByRole("button", { name: /save changes/i }));
+
+      await waitFor(() => {
+        expect(onSubmitMock).toHaveBeenCalled();
+      });
+      const payload = onSubmitMock.mock.calls[0][0];
+      expect(payload).not.toHaveProperty("policies");
+      expect(payload).not.toHaveProperty("prompts");
+      expect(payload).toHaveProperty("guardrails");
+    });
+
+    it("routes the shared lifecycle and rate-limit-type controls into their own payload keys", async () => {
+      const onSubmitMock = vi.fn().mockResolvedValue(undefined);
+      renderForPayload(onSubmitMock);
+      await screen.findByRole("button", { name: /save changes/i });
+
+      const duration = screen.getByPlaceholderText("e.g., 30d");
+      await userEvent.clear(duration);
+      await userEvent.type(duration, "45d");
+
+      await userEvent.click(screen.getByLabelText(/TPM Rate Limit Type/));
+      await userEvent.click(await screen.findByTitle("Guaranteed throughput"));
+
+      await userEvent.click(screen.getByRole("button", { name: /save changes/i }));
+
+      await waitFor(() => {
+        expect(onSubmitMock).toHaveBeenCalled();
+      });
+      const payload = onSubmitMock.mock.calls[0][0];
+      expect(payload.duration).toBe("45d");
+      expect(payload.tpm_limit_type).toBe("guaranteed_throughput");
+      expect(payload.rpm_limit_type).toBeNull();
+    });
+
+    it("blanks duration rather than dropping the key when Never Expire is ticked", async () => {
+      const onSubmitMock = vi.fn().mockResolvedValue(undefined);
+      renderForPayload(onSubmitMock, { ...MOCK_KEY_DATA, expires: "2026-01-01T00:00:00Z" });
+      await screen.findByRole("button", { name: /save changes/i });
+
+      await userEvent.click(screen.getByRole("checkbox", { name: /never expire/i }));
+      await userEvent.click(screen.getByRole("button", { name: /save changes/i }));
+
+      await waitFor(() => {
+        expect(onSubmitMock).toHaveBeenCalled();
+      });
+      expect(onSubmitMock.mock.calls[0][0]).toHaveProperty("duration", null);
+    });
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx b/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
index b510ebbb447..a39989153f4 100644
--- a/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
@@ -493,13 +493,17 @@ export function KeyEditView({
         <NumericalInput min={0} />
       </Form.Item>
 
-      <RateLimitTypeFormItem type="tpm" name="tpm_limit_type" showDetailedDescriptions={false} />
+      <Form.Item name="tpm_limit_type" initialValue={null} noStyle>
+        <RateLimitTypeFormItem type="tpm" name="tpm_limit_type" showDetailedDescriptions={false} />
+      </Form.Item>
 
       <Form.Item label="RPM Limit" name="rpm_limit">
         <NumericalInput min={0} />
       </Form.Item>
 
-      <RateLimitTypeFormItem type="rpm" name="rpm_limit_type" showDetailedDescriptions={false} />
+      <Form.Item name="rpm_limit_type" initialValue={null} noStyle>
+        <RateLimitTypeFormItem type="rpm" name="rpm_limit_type" showDetailedDescriptions={false} />
+      </Form.Item>
 
       <Form.Item
         label={
@@ -840,15 +844,16 @@ export function KeyEditView({
 
       {/* Auto-Rotation Settings */}
       <div className="mb-4">
-        <KeyLifecycleSettings
-          form={form}
-          autoRotationEnabled={autoRotationEnabled}
-          onAutoRotationChange={setAutoRotationEnabled}
-          rotationInterval={rotationInterval}
-          onRotationIntervalChange={setRotationInterval}
-          neverExpire={neverExpire}
-          onNeverExpireChange={setNeverExpire}
-        />
+        <Form.Item name="duration" initialValue="" noStyle>
+          <KeyLifecycleSettings
+            autoRotationEnabled={autoRotationEnabled}
+            onAutoRotationChange={setAutoRotationEnabled}
+            rotationInterval={rotationInterval}
+            onRotationIntervalChange={setRotationInterval}
+            neverExpire={neverExpire}
+            onNeverExpireChange={setNeverExpire}
+          />
+        </Form.Item>
       </div>
 
       {/* Hidden form field for token */}