From ae8b10cf8d00e6d41f8251b8639f2c1bc282237b Mon Sep 17 00:00:00 2001
From: cursor <cursor@cursor.com>
Date: Fri, 24 Apr 2026 07:57:27 +0000
Subject: [PATCH] feat(ui): migrate agents subtree to shadcn

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 ui/litellm-dashboard/.eslintrc.json           |    1 +
 .../src/components/agents/add_agent_form.tsx  | 1442 +++++++++++------
 .../components/agents/agent_form_fields.tsx   |  785 ++++++---
 .../src/components/agents/agent_info.tsx      |  402 +++--
 .../components/agents/cost_config_fields.tsx  |   41 +-
 .../agents/dynamic_agent_form_fields.tsx      |  219 ++-
 6 files changed, 1923 insertions(+), 967 deletions(-)

diff --git a/ui/litellm-dashboard/.eslintrc.json b/ui/litellm-dashboard/.eslintrc.json
index e0d553ac384..d9efd3808ab 100644
--- a/ui/litellm-dashboard/.eslintrc.json
+++ b/ui/litellm-dashboard/.eslintrc.json
@@ -52,6 +52,7 @@
         "src/components/common_components/AutoRotationView.tsx",
         "src/components/agents/agent_card.tsx",
         "src/components/agents/agent_table.tsx",
+        "src/components/agents/add_agent_form.tsx",
         "src/components/view_users/columns.tsx",
         "src/components/Projects/ProjectsPage.tsx",
         "src/components/pass_through_settings.tsx",
diff --git a/ui/litellm-dashboard/src/components/agents/add_agent_form.tsx b/ui/litellm-dashboard/src/components/agents/add_agent_form.tsx
index 891e9c574d8..826bd123a81 100644
--- a/ui/litellm-dashboard/src/components/agents/add_agent_form.tsx
+++ b/ui/litellm-dashboard/src/components/agents/add_agent_form.tsx
@@ -1,9 +1,47 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Form, Select, Input, Steps, Radio, Tag, Divider, Switch, InputNumber, Collapse } from "antd";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
+import {
+  Controller,
+  FormProvider,
+  useForm,
+  UseFormReturn,
+} from "react-hook-form";
 import MessageManager from "@/components/molecules/message_manager";
-import { Button } from "@tremor/react";
-import { CheckCircle2 as CheckCircleFilled, Key as KeyOutlined, Bot as RobotOutlined, LayoutGrid as AppstoreOutlined, Info as InfoCircleOutlined } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Check,
+  CheckCircle2,
+  Info,
+  Key as KeyIcon,
+  LayoutGrid,
+  Bot,
+  X,
+} from "lucide-react";
 import CreatedKeyDisplay from "../shared/CreatedKeyDisplay";
 import {
   createAgentCall,
@@ -26,8 +64,6 @@ import MCPServerSelector from "../mcp_server_management/MCPServerSelector";
 import MCPToolPermissions from "../mcp_server_management/MCPToolPermissions";
 import GuardrailSelector from "../guardrails/GuardrailSelector";
 
-const { Step } = Steps;
-
 const CUSTOM_AGENT_TYPE = "custom";
 
 interface AddAgentFormProps {
@@ -38,45 +74,310 @@ interface AddAgentFormProps {
   teams?: Team[] | null;
 }
 
+const STEP_LABELS = [
+  "Configure",
+  "Entitlements",
+  "Governance",
+  "Agent Management",
+  "Ready",
+];
+
+const InfoTip: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Info className="ml-1 inline h-3 w-3 text-muted-foreground" />
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs">{children}</TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+function Stepper({ current, steps }: { current: number; steps: string[] }) {
+  return (
+    <ol className="flex items-center gap-2 mb-8">
+      {steps.map((label, i) => {
+        const active = i === current;
+        const completed = i < current;
+        return (
+          <li
+            key={label}
+            className="flex items-center gap-2 flex-1 min-w-0"
+          >
+            <div
+              className={
+                "flex h-6 w-6 items-center justify-center rounded-full border text-xs font-medium " +
+                (completed
+                  ? "bg-primary text-primary-foreground border-primary"
+                  : active
+                    ? "border-primary text-primary"
+                    : "border-border text-muted-foreground")
+              }
+            >
+              {completed ? <Check className="h-3 w-3" /> : i + 1}
+            </div>
+            <span
+              className={
+                "text-sm truncate " +
+                (active || completed
+                  ? "text-foreground"
+                  : "text-muted-foreground")
+              }
+            >
+              {label}
+            </span>
+            {i < steps.length - 1 && (
+              <div className="h-px flex-1 bg-border" />
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+/**
+ * Shadcn-Select-backed multi-select with chip list under the trigger. Shares
+ * the pattern with AccessGroupBaseForm.tsx.
+ */
+function ChipMultiSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  emptyText = "No options",
+  loading = false,
+}: {
+  value: string[];
+  onChange: (next: string[]) => void;
+  options: { label: string; value: string }[];
+  placeholder: string;
+  emptyText?: string;
+  loading?: boolean;
+}) {
+  const selected = value ?? [];
+  const remaining = options.filter((o) => !selected.includes(o.value));
+  return (
+    <div className="space-y-2">
+      <Select
+        value=""
+        onValueChange={(v) => {
+          if (v) onChange([...selected, v]);
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder={loading ? "Loading…" : placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {loading ? (
+            <div className="py-2 px-3 text-sm text-muted-foreground">
+              Loading…
+            </div>
+          ) : remaining.length === 0 ? (
+            <div className="py-2 px-3 text-sm text-muted-foreground">
+              {emptyText}
+            </div>
+          ) : (
+            remaining.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))
+          )}
+        </SelectContent>
+      </Select>
+      {selected.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {selected.map((v) => {
+            const opt = options.find((o) => o.value === v);
+            return (
+              <Badge
+                key={v}
+                variant="secondary"
+                className="flex items-center gap-1"
+              >
+                {opt?.label ?? v}
+                <button
+                  type="button"
+                  onClick={() => onChange(selected.filter((s) => s !== v))}
+                  className="inline-flex items-center justify-center rounded-full hover:bg-muted-foreground/20"
+                  aria-label={`Remove ${opt?.label ?? v}`}
+                >
+                  <X size={12} />
+                </button>
+              </Badge>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Free-form tag entry (models entitlement accepts arbitrary strings).
+ * Variant that also accepts an options list for suggestions.
+ */
+function FreeformTagsWithOptions({
+  value,
+  onChange,
+  options,
+  placeholder,
+  loading = false,
+}: {
+  value: string[];
+  onChange: (next: string[]) => void;
+  options: { label: string; value: string }[];
+  placeholder: string;
+  loading?: boolean;
+}) {
+  const [draft, setDraft] = useState("");
+  const selected = value ?? [];
+  const remaining = options.filter((o) => !selected.includes(o.value));
+  return (
+    <div className="space-y-2">
+      <div className="flex gap-2">
+        <Input
+          placeholder={placeholder}
+          value={draft}
+          onChange={(e) => {
+            const v = e.target.value;
+            if (v.includes(",")) {
+              const parts = v
+                .split(",")
+                .map((s) => s.trim())
+                .filter((s) => s && !selected.includes(s));
+              if (parts.length > 0) onChange([...selected, ...parts]);
+              setDraft("");
+            } else {
+              setDraft(v);
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              const v = draft.trim();
+              if (v && !selected.includes(v)) {
+                onChange([...selected, v]);
+              }
+              setDraft("");
+            }
+          }}
+          onBlur={() => {
+            const v = draft.trim();
+            if (v && !selected.includes(v)) {
+              onChange([...selected, v]);
+            }
+            setDraft("");
+          }}
+        />
+        <Select
+          value=""
+          onValueChange={(v) => {
+            if (v) onChange([...selected, v]);
+          }}
+        >
+          <SelectTrigger className="w-[160px]">
+            <SelectValue placeholder="Pick…" />
+          </SelectTrigger>
+          <SelectContent>
+            {loading ? (
+              <div className="py-2 px-3 text-sm text-muted-foreground">
+                Loading…
+              </div>
+            ) : remaining.length === 0 ? (
+              <div className="py-2 px-3 text-sm text-muted-foreground">
+                No options
+              </div>
+            ) : (
+              remaining.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))
+            )}
+          </SelectContent>
+        </Select>
+      </div>
+      {selected.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {selected.map((v) => {
+            const opt = options.find((o) => o.value === v);
+            return (
+              <Badge
+                key={v}
+                variant="secondary"
+                className="flex items-center gap-1"
+              >
+                {opt?.label ?? v}
+                <button
+                  type="button"
+                  onClick={() => onChange(selected.filter((s) => s !== v))}
+                  className="inline-flex items-center justify-center rounded-full hover:bg-muted-foreground/20"
+                  aria-label={`Remove ${opt?.label ?? v}`}
+                >
+                  <X size={12} />
+                </button>
+              </Badge>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+type FormValues = Record<string, any>;
+
+const getInitialFormValues = () => ({
+  ...getDefaultFormValues(),
+  allowed_mcp_servers_and_groups: { servers: [], accessGroups: [] },
+  mcp_tool_permissions: {},
+  entitlement_models: [],
+  entitlement_agents: [],
+  guardrails: [],
+});
+
 const AddAgentForm: React.FC<AddAgentFormProps> = ({
   visible,
   onClose,
   accessToken,
   onSuccess,
-  teams,
 }) => {
   const { userId, userRole } = useAuthorized();
-  const [form] = Form.useForm();
+  const form: UseFormReturn<FormValues> = useForm<FormValues>({
+    defaultValues: getInitialFormValues(),
+  });
+  const { register, control, watch, trigger, getValues, reset, formState } =
+    form;
   const [currentStep, setCurrentStep] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [agentType, setAgentType] = useState<string>("a2a");
   const [agentTypeMetadata, setAgentTypeMetadata] = useState<AgentCreateInfo[]>([]);
-  const [loadingMetadata, setLoadingMetadata] = useState(false);
+  const [, setLoadingMetadata] = useState(false);
 
-  // Step 3: key assignment state
   const [keyAssignOption, setKeyAssignOption] = useState<"create_new" | "existing_key" | "skip">("create_new");
   const [newKeyName, setNewKeyName] = useState<string>("");
-  const [newKeyModels, setNewKeyModels] = useState<string[]>([]);
+  const [newKeyModels] = useState<string[]>([]);
   const [existingKeys, setExistingKeys] = useState<any[]>([]);
   const [selectedExistingKey, setSelectedExistingKey] = useState<string | null>(null);
   const [loadingKeys, setLoadingKeys] = useState(false);
   const [availableModels, setAvailableModels] = useState<string[]>([]);
   const [loadingModels, setLoadingModels] = useState(false);
-  const [availableAgents, setAvailableAgents] = useState<{agent_id: string; agent_name: string}[]>([]);
+  const [availableAgents, setAvailableAgents] = useState<
+    { agent_id: string; agent_name: string }[]
+  >([]);
   const [loadingAgents, setLoadingAgents] = useState(false);
 
-  // Step 4: results
   const [createdAgentName, setCreatedAgentName] = useState<string>("");
   const [createdKeyValue, setCreatedKeyValue] = useState<string | null>(null);
   const [assignedKeyAlias, setAssignedKeyAlias] = useState<string | null>(null);
 
-  // Tracing & guardrails state
   const [requireTraceIdInbound, setRequireTraceIdInbound] = useState(false);
   const [requireTraceIdOutbound, setRequireTraceIdOutbound] = useState(false);
   const [maxIterations, setMaxIterations] = useState<number | null>(null);
   const [maxBudgetPerSession, setMaxBudgetPerSession] = useState<number | null>(null);
 
-  // Fetch agent type metadata on mount
   useEffect(() => {
     const fetchMetadata = async () => {
       setLoadingMetadata(true);
@@ -92,7 +393,6 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
     fetchMetadata();
   }, []);
 
-  // Fetch existing keys when Agent Management step becomes active (step 3)
   useEffect(() => {
     if (currentStep === 3 && accessToken && existingKeys.length === 0) {
       const fetchKeys = async () => {
@@ -108,9 +408,8 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
       };
       fetchKeys();
     }
-  }, [currentStep, accessToken]);
+  }, [currentStep, accessToken, existingKeys.length]);
 
-  // Fetch available models when Agent Management step is active (same list as key generation)
   useEffect(() => {
     if ((currentStep !== 1 && currentStep !== 3) || !accessToken || !userId || !userRole) return;
     let cancelled = false;
@@ -155,29 +454,26 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
   }, [currentStep, accessToken]);
 
   const selectedAgentTypeInfo = agentTypeMetadata.find(
-    (info) => info.agent_type === agentType
+    (info) => info.agent_type === agentType,
   );
 
   const handleNext = async () => {
-    try {
-      if (currentStep === 0) {
-        await form.validateFields(["agent_name"]);
-        const agentName = form.getFieldValue("agent_name");
-        if (agentName && !newKeyName) {
-          setNewKeyName(`${agentName}-key`);
-        }
+    if (currentStep === 0) {
+      const ok = await trigger(["agent_name"]);
+      if (!ok) return;
+      const agentName = getValues("agent_name");
+      if (agentName && !newKeyName) {
+        setNewKeyName(`${agentName}-key`);
       }
-      setCurrentStep((s) => s + 1);
-    } catch {
-      // validation failed — stay on current step
     }
+    setCurrentStep((s) => s + 1);
   };
 
   const handleBack = () => {
     setCurrentStep((s) => Math.max(0, s - 1));
   };
 
-  const buildAgentData = (values: any) => {
+  const buildAgentData = (values: FormValues): any => {
     if (agentType === CUSTOM_AGENT_TYPE) {
       return {
         agent_name: values.agent_name,
@@ -206,6 +502,7 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
       for (const field of selectedAgentTypeInfo.credential_fields) {
         const value = values[field.key];
         if (value && field.include_in_litellm_params !== false) {
+          if (!agentData.litellm_params) agentData.litellm_params = {};
           agentData.litellm_params[field.key] = value;
         }
       }
@@ -224,8 +521,12 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
 
     setIsSubmitting(true);
     try {
-      await form.validateFields();
-      const values = { ...form.getFieldsValue(true) };
+      const ok = await trigger();
+      if (!ok) {
+        setIsSubmitting(false);
+        return;
+      }
+      const values = { ...getValues() };
       const agentData = buildAgentData(values);
       if (!agentData) {
         MessageManager.error("Failed to build agent data");
@@ -233,7 +534,6 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
         return;
       }
 
-      // Build object_permission from MCP Tools step (allowed_mcp_servers_and_groups, mcp_tool_permissions)
       const mcpServersAndGroups = values.allowed_mcp_servers_and_groups;
       const mcpToolPermissions = values.mcp_tool_permissions || {};
       const entitlementModels = values.entitlement_models || [];
@@ -262,7 +562,6 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
         }
       }
 
-      // Wire trace-id flags and budget controls into agent litellm_params (before create call)
       if (requireTraceIdInbound || requireTraceIdOutbound) {
         if (!agentData.litellm_params) agentData.litellm_params = {};
         if (requireTraceIdInbound) {
@@ -327,12 +626,11 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
   };
 
   const handleClose = () => {
-    form.resetFields();
+    reset(getInitialFormValues());
     setAgentType("a2a");
     setCurrentStep(0);
     setKeyAssignOption("create_new");
     setNewKeyName("");
-    setNewKeyModels([]);
     setSelectedExistingKey(null);
     setCreatedAgentName("");
     setCreatedKeyValue(null);
@@ -344,129 +642,319 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
     onClose();
   };
 
+  const handleAgentTypeChange = (value: string) => {
+    setAgentType(value);
+    reset(getInitialFormValues());
+  };
+
+  const isCustomAgent = agentType === CUSTOM_AGENT_TYPE;
+  const selectedLogo = isCustomAgent
+    ? null
+    : selectedAgentTypeInfo?.logo_url ||
+      agentTypeMetadata.find((a) => a.agent_type === "a2a")?.logo_url;
+
+  const agentNameError = (formState.errors as any)?.agent_name;
+
+  const renderConfigureStep = () => (
+    <>
+      <div className="space-y-2">
+        <Label>
+          Agent Type <span className="text-destructive">*</span>
+          <InfoTip>Select the type of agent you want to create</InfoTip>
+        </Label>
+        <Select value={agentType} onValueChange={handleAgentTypeChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select an agent type" />
+          </SelectTrigger>
+          <SelectContent>
+            {agentTypeMetadata.map((info) => (
+              <SelectItem key={info.agent_type} value={info.agent_type}>
+                <div className="flex items-center gap-3 py-1">
+                  <img
+                    src={info.logo_url || ""}
+                    alt=""
+                    className="w-4 h-4 object-contain"
+                  />
+                  <div>
+                    <div className="font-medium">
+                      {info.agent_type_display_name}
+                    </div>
+                    {info.description && (
+                      <div className="text-xs text-muted-foreground">
+                        {info.description}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </SelectItem>
+            ))}
+            <div className="px-2 py-1 border-t border-border mt-1">
+              <div className="text-xs text-muted-foreground font-medium mb-1 uppercase tracking-wide px-2">
+                Not listed?
+              </div>
+              <SelectItem value={CUSTOM_AGENT_TYPE}>
+                <div className="flex items-center gap-3">
+                  <LayoutGrid className="h-4 w-4 text-amber-600" />
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-amber-700">
+                        Custom / Other
+                      </span>
+                      <Badge variant="outline" className="text-[10px] px-1 py-0">
+                        GENERIC
+                      </Badge>
+                    </div>
+                    <div className="text-xs text-amber-600">
+                      For agents that don&apos;t follow a standard protocol —
+                      just needs a virtual key
+                    </div>
+                  </div>
+                </div>
+              </SelectItem>
+            </div>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="mt-4">
+        {agentType === CUSTOM_AGENT_TYPE ? (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="custom_agent_name">
+                Agent Name <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="custom_agent_name"
+                placeholder="e.g. my-custom-agent"
+                aria-invalid={!!agentNameError}
+                {...register("agent_name", {
+                  required: "Please enter an agent name",
+                })}
+              />
+              {agentNameError && (
+                <p className="text-sm text-destructive">
+                  {agentNameError.message as string}
+                </p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="custom_description">Description</Label>
+              <Textarea
+                id="custom_description"
+                placeholder="Describe what this agent does…"
+                rows={3}
+                {...register("description")}
+              />
+            </div>
+          </div>
+        ) : agentType === "a2a" ? (
+          <AgentFormFields showAgentName={true} />
+        ) : selectedAgentTypeInfo?.use_a2a_form_fields ? (
+          <>
+            <AgentFormFields showAgentName={true} />
+            {selectedAgentTypeInfo.credential_fields.length > 0 && (
+              <div className="mt-4 p-4 border border-border rounded-lg">
+                <h4 className="text-sm font-medium text-foreground mb-3">
+                  {selectedAgentTypeInfo.agent_type_display_name} Settings
+                </h4>
+                <div className="space-y-4">
+                  {selectedAgentTypeInfo.credential_fields.map((field) => {
+                    const fieldError = (formState.errors as any)?.[field.key];
+                    const inputId = `credential-${field.key}`;
+                    return (
+                      <div key={field.key} className="space-y-2">
+                        <Label htmlFor={inputId}>
+                          {field.label}
+                          {field.required && (
+                            <span className="text-destructive"> *</span>
+                          )}
+                          {field.tooltip ? (
+                            <InfoTip>{field.tooltip}</InfoTip>
+                          ) : null}
+                        </Label>
+                        <Input
+                          id={inputId}
+                          type={
+                            field.field_type === "password" ? "password" : undefined
+                          }
+                          placeholder={field.placeholder || ""}
+                          aria-invalid={!!fieldError}
+                          defaultValue={field.default_value ?? undefined}
+                          {...register(
+                            field.key,
+                            field.required
+                              ? { required: `Please enter ${field.label}` }
+                              : undefined,
+                          )}
+                        />
+                        {fieldError && (
+                          <p className="text-sm text-destructive">
+                            {fieldError.message as string}
+                          </p>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </>
+        ) : selectedAgentTypeInfo ? (
+          <DynamicAgentFormFields agentTypeInfo={selectedAgentTypeInfo} />
+        ) : null}
+      </div>
+    </>
+  );
+
   const renderEntitlementsStep = () => (
     <div className="space-y-4">
-      <p className="text-sm text-gray-600">
-        Configure which models, agents, and MCP tools this agent is allowed to use. Leave fields empty to allow all (subject to key/team permissions).
+      <p className="text-sm text-muted-foreground">
+        Configure which models, agents, and MCP tools this agent is allowed to
+        use. Leave fields empty to allow all (subject to key/team permissions).
       </p>
 
-      <Form.Item
-        label={<span className="text-sm font-medium text-gray-700">Allowed Models</span>}
-        name="entitlement_models"
-        tooltip="Restrict which models this agent can call. Leave empty to allow all."
-      >
-        <Select
-          mode="tags"
-          style={{ width: "100%" }}
-          placeholder={loadingModels ? "Loading models..." : "Select models (leave empty for all)"}
-          tokenSeparators={[","]}
-          loading={loadingModels}
-          showSearch
-          options={availableModels.map((m) => ({
-            label: getModelDisplayName(m),
-            value: m,
-          }))}
-        />
-      </Form.Item>
-
-      <Form.Item
-        label={<span className="text-sm font-medium text-gray-700">Allowed Agents (Sub-Agents)</span>}
-        name="entitlement_agents"
-        tooltip="Restrict which other agents this agent can invoke as sub-agents. Leave empty to allow all."
-      >
-        <Select
-          mode="multiple"
-          style={{ width: "100%" }}
-          placeholder={loadingAgents ? "Loading agents..." : "Select agents (leave empty for all)"}
-          loading={loadingAgents}
-          showSearch
-          filterOption={(input, option) =>
-            (option?.label as string ?? "").toLowerCase().includes(input.toLowerCase())
-          }
-          options={availableAgents.map((a) => ({
-            label: a.agent_name,
-            value: a.agent_id,
-          }))}
-        />
-      </Form.Item>
-
-      <Divider className="my-2" />
-
-      <Form.Item
-        label={
-          <span>
-            Allowed MCP Servers{" "}
-            <InfoCircleOutlined aria-label="Select which MCP servers or access groups this agent can access" className="ml-1 inline h-3 w-3" />
-          </span>
-        }
-        name="allowed_mcp_servers_and_groups"
-        initialValue={{ servers: [], accessGroups: [] }}
-      >
-        <MCPServerSelector
-          onChange={(val: { servers?: string[]; accessGroups?: string[] }) =>
-            form.setFieldValue("allowed_mcp_servers_and_groups", val)
-          }
-          value={form.getFieldValue("allowed_mcp_servers_and_groups") || { servers: [], accessGroups: [] }}
-          accessToken={accessToken ?? ""}
-          placeholder="Select MCP servers or access groups (optional)"
-        />
-      </Form.Item>
-      <Form.Item name="mcp_tool_permissions" initialValue={{}} hidden>
-        <Input type="hidden" />
-      </Form.Item>
-      <Form.Item
-        noStyle
-        shouldUpdate={(prev, curr) =>
-          prev.allowed_mcp_servers_and_groups !== curr.allowed_mcp_servers_and_groups ||
-          prev.mcp_tool_permissions !== curr.mcp_tool_permissions
-        }
-      >
-        {() => (
-          <div className="mt-4">
-            <MCPToolPermissions
-              accessToken={accessToken ?? ""}
-              selectedServers={form.getFieldValue("allowed_mcp_servers_and_groups")?.servers ?? []}
-              toolPermissions={form.getFieldValue("mcp_tool_permissions") ?? {}}
-              onChange={(toolPerms: Record<string, string[]>) => form.setFieldsValue({ mcp_tool_permissions: toolPerms })}
+      <div className="space-y-2">
+        <Label>
+          Allowed Models
+          <InfoTip>
+            Restrict which models this agent can call. Leave empty to allow
+            all.
+          </InfoTip>
+        </Label>
+        <Controller
+          control={control}
+          name="entitlement_models"
+          render={({ field }) => (
+            <FreeformTagsWithOptions
+              value={field.value ?? []}
+              onChange={field.onChange}
+              options={availableModels.map((m) => ({
+                label: getModelDisplayName(m),
+                value: m,
+              }))}
+              placeholder={
+                loadingModels
+                  ? "Loading models..."
+                  : "Type or pick models (leave empty for all)"
+              }
+              loading={loadingModels}
             />
-          </div>
-        )}
-      </Form.Item>
+          )}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label>
+          Allowed Agents (Sub-Agents)
+          <InfoTip>
+            Restrict which other agents this agent can invoke as sub-agents.
+            Leave empty to allow all.
+          </InfoTip>
+        </Label>
+        <Controller
+          control={control}
+          name="entitlement_agents"
+          render={({ field }) => (
+            <ChipMultiSelect
+              value={field.value ?? []}
+              onChange={field.onChange}
+              options={availableAgents.map((a) => ({
+                label: a.agent_name,
+                value: a.agent_id,
+              }))}
+              placeholder={
+                loadingAgents
+                  ? "Loading agents..."
+                  : "Select agents (leave empty for all)"
+              }
+              loading={loadingAgents}
+            />
+          )}
+        />
+      </div>
+
+      <Separator className="my-2" />
+
+      <div className="space-y-2">
+        <Label>
+          Allowed MCP Servers
+          <InfoTip>
+            Select which MCP servers or access groups this agent can access
+          </InfoTip>
+        </Label>
+        <Controller
+          control={control}
+          name="allowed_mcp_servers_and_groups"
+          render={({ field }) => (
+            <MCPServerSelector
+              onChange={(val: { servers?: string[]; accessGroups?: string[] }) =>
+                field.onChange(val)
+              }
+              value={field.value || { servers: [], accessGroups: [] }}
+              accessToken={accessToken ?? ""}
+              placeholder="Select MCP servers or access groups (optional)"
+            />
+          )}
+        />
+      </div>
+
+      <Controller
+        control={control}
+        name="mcp_tool_permissions"
+        render={({ field }) => {
+          const selectedServers =
+            watch("allowed_mcp_servers_and_groups")?.servers ?? [];
+          return (
+            <div className="mt-4">
+              <MCPToolPermissions
+                accessToken={accessToken ?? ""}
+                selectedServers={selectedServers}
+                toolPermissions={field.value ?? {}}
+                onChange={(toolPerms: Record<string, string[]>) =>
+                  field.onChange(toolPerms)
+                }
+              />
+            </div>
+          );
+        }}
+      />
     </div>
   );
 
   const renderObservabilityStep = () => (
     <div className="space-y-6">
       <div>
-        <h4 className="text-sm font-medium text-gray-700 mb-3">Tracing</h4>
+        <h4 className="text-sm font-medium text-foreground mb-3">Tracing</h4>
         <div className="space-y-4">
           <div className="flex items-center justify-between">
             <div>
-              <span className="text-sm font-medium text-gray-700">
+              <span className="text-sm font-medium text-foreground">
                 Require x-litellm-trace-id on calls TO this agent
               </span>
-              <p className="text-xs text-gray-500 mt-1">
-                Only accept this agent being invoked with a trace-id (e.g. when used as a sub-agent).
+              <p className="text-xs text-muted-foreground mt-1">
+                Only accept this agent being invoked with a trace-id (e.g.
+                when used as a sub-agent).
               </p>
             </div>
             <Switch
               checked={requireTraceIdInbound}
-              onChange={setRequireTraceIdInbound}
+              onCheckedChange={setRequireTraceIdInbound}
             />
           </div>
 
           <div className="flex items-center justify-between">
             <div>
-              <span className="text-sm font-medium text-gray-700">
+              <span className="text-sm font-medium text-foreground">
                 Require x-litellm-trace-id on calls BY this agent
               </span>
-              <p className="text-xs text-gray-500 mt-1">
-                Requires LLM/MCP calls made by this agent to include x-litellm-trace-id for session tracking.
+              <p className="text-xs text-muted-foreground mt-1">
+                Requires LLM/MCP calls made by this agent to include
+                x-litellm-trace-id for session tracking.
               </p>
             </div>
             <Switch
               checked={requireTraceIdOutbound}
-              onChange={(checked) => {
+              onCheckedChange={(checked) => {
                 setRequireTraceIdOutbound(checked);
                 if (!checked) {
                   setMaxIterations(null);
@@ -478,351 +966,319 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
         </div>
       </div>
 
-      <Divider className="my-0" />
+      <Separator className="my-0" />
 
       <div>
-        <h4 className="text-sm font-medium text-gray-700 mb-3">Budgets &amp; Rate Limits</h4>
+        <h4 className="text-sm font-medium text-foreground mb-3">
+          Budgets &amp; Rate Limits
+        </h4>
         <div className="space-y-4">
           {!requireTraceIdOutbound && (
             <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg text-sm text-yellow-800">
-              Enable &quot;Require x-litellm-trace-id on calls BY this agent&quot; in Tracing to configure budgets and rate limits.
+              Enable &quot;Require x-litellm-trace-id on calls BY this
+              agent&quot; in Tracing to configure budgets and rate limits.
             </div>
           )}
 
-          <div className="text-sm font-medium text-gray-700">Session Budgets</div>
+          <div className="text-sm font-medium text-foreground">
+            Session Budgets
+          </div>
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="text-sm text-gray-600 block mb-1">Max Iterations</label>
-              <InputNumber
-                className="w-full"
+              <label className="text-sm text-muted-foreground block mb-1">
+                Max Iterations
+              </label>
+              <Input
+                type="number"
                 min={1}
                 placeholder="e.g. 25"
                 disabled={!requireTraceIdOutbound}
-                value={maxIterations}
-                onChange={(val) => setMaxIterations(val)}
+                value={maxIterations ?? ""}
+                onChange={(e) =>
+                  setMaxIterations(
+                    e.target.value === "" ? null : Number(e.target.value),
+                  )
+                }
               />
-              <p className="text-xs text-gray-400 mt-1">Hard cap on LLM calls per session</p>
+              <p className="text-xs text-muted-foreground mt-1">
+                Hard cap on LLM calls per session
+              </p>
             </div>
             <div>
-              <label className="text-sm text-gray-600 block mb-1">Max Budget Per Session ($)</label>
-              <InputNumber
-                className="w-full"
+              <label className="text-sm text-muted-foreground block mb-1">
+                Max Budget Per Session ($)
+              </label>
+              <Input
+                type="number"
                 min={0.01}
                 step={0.5}
                 placeholder="e.g. 5.00"
                 disabled={!requireTraceIdOutbound}
-                value={maxBudgetPerSession}
-                onChange={(val) => setMaxBudgetPerSession(val)}
+                value={maxBudgetPerSession ?? ""}
+                onChange={(e) =>
+                  setMaxBudgetPerSession(
+                    e.target.value === "" ? null : Number(e.target.value),
+                  )
+                }
               />
-              <p className="text-xs text-gray-400 mt-1">Max spend per trace before returning 429</p>
+              <p className="text-xs text-muted-foreground mt-1">
+                Max spend per trace before returning 429
+              </p>
             </div>
           </div>
 
-          <Divider className="my-2" />
+          <Separator className="my-2" />
 
-          <div className="text-sm font-medium text-gray-700">Agent Rate Limits</div>
-          <p className="text-xs text-gray-500">
+          <div className="text-sm font-medium text-foreground">
+            Agent Rate Limits
+          </div>
+          <p className="text-xs text-muted-foreground">
             Global rate limits applied across all callers of this agent.
           </p>
           <div className="grid grid-cols-2 gap-4">
-            <Form.Item label="TPM Limit" name="tpm_limit" className="mb-0">
-              <InputNumber className="w-full" min={0} placeholder="e.g. 100000" disabled={!requireTraceIdOutbound} />
-            </Form.Item>
-            <Form.Item label="RPM Limit" name="rpm_limit" className="mb-0">
-              <InputNumber className="w-full" min={0} placeholder="e.g. 100" disabled={!requireTraceIdOutbound} />
-            </Form.Item>
+            <div className="space-y-2">
+              <Label htmlFor="tpm_limit">TPM Limit</Label>
+              <Input
+                id="tpm_limit"
+                type="number"
+                min={0}
+                placeholder="e.g. 100000"
+                disabled={!requireTraceIdOutbound}
+                {...register("tpm_limit", { valueAsNumber: true })}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="rpm_limit">RPM Limit</Label>
+              <Input
+                id="rpm_limit"
+                type="number"
+                min={0}
+                placeholder="e.g. 100"
+                disabled={!requireTraceIdOutbound}
+                {...register("rpm_limit", { valueAsNumber: true })}
+              />
+            </div>
           </div>
 
-          <div className="text-sm font-medium text-gray-700 mt-4">Per-Session Rate Limits</div>
-          <p className="text-xs text-gray-500">
-            Rate limits per session (x-litellm-trace-id). Each session gets its own counters.
+          <div className="text-sm font-medium text-foreground mt-4">
+            Per-Session Rate Limits
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Rate limits per session (x-litellm-trace-id). Each session gets
+            its own counters.
           </p>
           <div className="grid grid-cols-2 gap-4">
-            <Form.Item label="Session TPM Limit" name="session_tpm_limit" className="mb-0">
-              <InputNumber className="w-full" min={0} placeholder="e.g. 10000" disabled={!requireTraceIdOutbound} />
-            </Form.Item>
-            <Form.Item label="Session RPM Limit" name="session_rpm_limit" className="mb-0">
-              <InputNumber className="w-full" min={0} placeholder="e.g. 20" disabled={!requireTraceIdOutbound} />
-            </Form.Item>
+            <div className="space-y-2">
+              <Label htmlFor="session_tpm_limit">Session TPM Limit</Label>
+              <Input
+                id="session_tpm_limit"
+                type="number"
+                min={0}
+                placeholder="e.g. 10000"
+                disabled={!requireTraceIdOutbound}
+                {...register("session_tpm_limit", { valueAsNumber: true })}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="session_rpm_limit">Session RPM Limit</Label>
+              <Input
+                id="session_rpm_limit"
+                type="number"
+                min={0}
+                placeholder="e.g. 20"
+                disabled={!requireTraceIdOutbound}
+                {...register("session_rpm_limit", { valueAsNumber: true })}
+              />
+            </div>
           </div>
         </div>
       </div>
 
-      <Divider className="my-0" />
+      <Separator className="my-0" />
 
       <div>
-        <h4 className="text-sm font-medium text-gray-700 mb-3">Guardrails</h4>
-        <p className="text-xs text-gray-500 mb-3">
-          Apply guardrails to this agent. Selected guardrails will run on all calls made by this agent.
+        <h4 className="text-sm font-medium text-foreground mb-3">
+          Guardrails
+        </h4>
+        <p className="text-xs text-muted-foreground mb-3">
+          Apply guardrails to this agent. Selected guardrails will run on all
+          calls made by this agent.
         </p>
-        <Form.Item name="guardrails" initialValue={[]}>
-          <GuardrailSelector
-            accessToken={accessToken ?? ""}
-            value={form.getFieldValue("guardrails") ?? []}
-            onChange={(selected: string[]) => form.setFieldsValue({ guardrails: selected })}
-          />
-        </Form.Item>
+        <Controller
+          control={control}
+          name="guardrails"
+          render={({ field }) => (
+            <GuardrailSelector
+              accessToken={accessToken ?? ""}
+              value={field.value ?? []}
+              onChange={(selected: string[]) => field.onChange(selected)}
+            />
+          )}
+        />
       </div>
     </div>
   );
 
-  const handleAgentTypeChange = (value: string) => {
-    setAgentType(value);
-    form.resetFields();
-  };
-
-  const isCustomAgent = agentType === CUSTOM_AGENT_TYPE;
-  const selectedLogo = isCustomAgent
-    ? null
-    : selectedAgentTypeInfo?.logo_url ||
-      agentTypeMetadata.find((a) => a.agent_type === "a2a")?.logo_url;
-
-  const renderConfigureStep = () => (
-    <>
-      <Form.Item
-        label={<span className="text-sm font-medium text-gray-700">Agent Type</span>}
-        required
-        tooltip="Select the type of agent you want to create"
-      >
-        <Select
-          value={agentType}
-          onChange={handleAgentTypeChange}
-          size="large"
-          style={{ width: "100%" }}
-          optionLabelProp="label"
-          dropdownRender={(menu) => (
-            <>
-              {menu}
-              <Divider style={{ margin: "4px 0" }} />
-              <div className="px-2 py-1">
-                <div className="text-xs text-gray-400 font-medium mb-1 uppercase tracking-wide px-2">
-                  Not listed?
-                </div>
-                <div
-                  className={`flex items-center gap-3 px-2 py-2 rounded cursor-pointer transition-colors ${
-                    agentType === CUSTOM_AGENT_TYPE
-                      ? "bg-amber-50"
-                      : "hover:bg-amber-50"
-                  }`}
-                  onClick={() => handleAgentTypeChange(CUSTOM_AGENT_TYPE)}
-                >
-                  <AppstoreOutlined className="text-amber-600 text-lg" />
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <span className="font-medium text-amber-700">Custom / Other</span>
-                      <Tag color="orange" style={{ fontSize: 10, padding: "0 4px" }}>GENERIC</Tag>
-                    </div>
-                    <div className="text-xs text-amber-600">
-                      For agents that don&apos;t follow a standard protocol — just needs a virtual key
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </>
-          )}
-        >
-          {agentTypeMetadata.map((info) => (
-            <Select.Option
-              key={info.agent_type}
-              value={info.agent_type}
-              label={
-                <div className="flex items-center gap-2">
-                  <img src={info.logo_url || ""} alt="" className="w-4 h-4 object-contain" />
-                  <span>{info.agent_type_display_name}</span>
-                </div>
-              }
-            >
-              <div className="flex items-center gap-3 py-1">
-                <img
-                  src={info.logo_url || ""}
-                  alt={info.agent_type_display_name}
-                  className="w-5 h-5 object-contain"
-                />
-                <div>
-                  <div className="font-medium">{info.agent_type_display_name}</div>
-                  {info.description && (
-                    <div className="text-xs text-gray-500">{info.description}</div>
-                  )}
-                </div>
-              </div>
-            </Select.Option>
-          ))}
-        </Select>
-      </Form.Item>
-
-      <div className="mt-4">
-        {agentType === CUSTOM_AGENT_TYPE ? (
-          <div className="space-y-4">
-            <Form.Item
-              label="Agent Name"
-              name="agent_name"
-              rules={[{ required: true, message: "Please enter an agent name" }]}
-            >
-              <Input placeholder="e.g. my-custom-agent" />
-            </Form.Item>
-            <Form.Item
-              label="Description"
-              name="description"
-            >
-              <Input.TextArea placeholder="Describe what this agent does…" rows={3} />
-            </Form.Item>
-          </div>
-        ) : agentType === "a2a" ? (
-          <AgentFormFields showAgentName={true} />
-        ) : selectedAgentTypeInfo?.use_a2a_form_fields ? (
-          <>
-            <AgentFormFields showAgentName={true} />
-            {selectedAgentTypeInfo.credential_fields.length > 0 && (
-              <div className="mt-4 p-4 border border-gray-200 rounded-lg">
-                <h4 className="text-sm font-medium text-gray-700 mb-3">
-                  {selectedAgentTypeInfo.agent_type_display_name} Settings
-                </h4>
-                {selectedAgentTypeInfo.credential_fields.map((field) => (
-                  <Form.Item
-                    key={field.key}
-                    label={field.label}
-                    name={field.key}
-                    rules={
-                      field.required
-                        ? [{ required: true, message: `Please enter ${field.label}` }]
-                        : undefined
-                    }
-                    tooltip={field.tooltip}
-                    initialValue={field.default_value}
-                  >
-                    {field.field_type === "password" ? (
-                      <Input.Password placeholder={field.placeholder || ""} />
-                    ) : (
-                      <Input placeholder={field.placeholder || ""} />
-                    )}
-                  </Form.Item>
-                ))}
-              </div>
-            )}
-          </>
-        ) : selectedAgentTypeInfo ? (
-          <DynamicAgentFormFields agentTypeInfo={selectedAgentTypeInfo} />
-        ) : null}
-      </div>
-
-    </>
-  );
-
   const renderAssignKeyStep = () => {
-    const agentName = form.getFieldValue("agent_name") || "your-agent";
+    const agentName = watch("agent_name") || "your-agent";
     return (
       <div>
-        {/* Agent name chip */}
         <div className="flex justify-center mb-6">
-          <Tag icon={<RobotOutlined />} color="purple" className="px-3 py-1 text-sm">
+          <Badge
+            variant="secondary"
+            className="px-3 py-1 text-sm gap-1 bg-purple-50 text-purple-700 border border-purple-200"
+          >
+            <Bot className="h-4 w-4" />
             {agentName}
-          </Tag>
+          </Badge>
         </div>
 
-        <Form.Item
-          label={<span className="text-sm font-medium text-gray-700">Assign to Team</span>}
-          name="team_id"
-          tooltip="Optionally assign this agent to a team. The agent and its key will belong to the selected team."
+        <div className="space-y-2 mb-4">
+          <Label>
+            Assign to Team
+            <InfoTip>
+              Optionally assign this agent to a team. The agent and its key
+              will belong to the selected team.
+            </InfoTip>
+          </Label>
+          <Controller
+            control={control}
+            name="team_id"
+            render={({ field }) => (
+              <TeamDropdown
+                value={field.value as string | undefined}
+                onChange={field.onChange}
+              />
+            )}
+          />
+        </div>
+
+        <Separator className="my-4" />
+
+        <RadioGroup
+          value={keyAssignOption}
+          onValueChange={(v) =>
+            setKeyAssignOption(v as "create_new" | "existing_key" | "skip")
+          }
         >
-          <TeamDropdown />
-        </Form.Item>
+          <div className="space-y-3">
+            <div
+              className={
+                "p-4 border-2 rounded-lg cursor-pointer transition-colors " +
+                (keyAssignOption === "create_new"
+                  ? "border-primary bg-accent"
+                  : "border-border bg-card hover:border-muted-foreground/30")
+              }
+              onClick={() => setKeyAssignOption("create_new")}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex items-start gap-3 flex-1">
+                  <RadioGroupItem
+                    value="create_new"
+                    id="radio-create-new"
+                    className="mt-1"
+                  />
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <KeyIcon className="h-4 w-4 text-primary" />
+                      <span className="font-medium text-foreground">
+                        Create a new key for this agent
+                      </span>
+                    </div>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      A dedicated key scoped to this agent.
+                    </p>
+                    {keyAssignOption === "create_new" && (
+                      <div
+                        className="mt-3 space-y-3"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <div>
+                          <label className="text-sm text-muted-foreground block mb-1">
+                            Key Name
+                          </label>
+                          <Input
+                            value={newKeyName}
+                            onChange={(e) => setNewKeyName(e.target.value)}
+                            placeholder="e.g. my-agent-key"
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <Badge
+                  variant="secondary"
+                  className="bg-green-50 text-green-700 border border-green-200"
+                >
+                  Recommended
+                </Badge>
+              </div>
+            </div>
 
-        <Divider className="my-4" />
-
-        <div className="space-y-3">
-          {/* Option: Create new key */}
-          <div
-            className={`p-4 border-2 rounded-lg cursor-pointer transition-colors ${
-              keyAssignOption === "create_new"
-                ? "border-indigo-600 bg-indigo-50"
-                : "border-gray-200 bg-white hover:border-gray-300"
-            }`}
-            onClick={() => setKeyAssignOption("create_new")}
-          >
-            <div className="flex items-start justify-between">
-              <div className="flex items-start gap-3 flex-1">
-                <Radio
-                  value="create_new"
-                  checked={keyAssignOption === "create_new"}
-                  onChange={() => setKeyAssignOption("create_new")}
+            <div
+              className={
+                "p-4 border-2 rounded-lg cursor-pointer transition-colors " +
+                (keyAssignOption === "existing_key"
+                  ? "border-primary bg-accent"
+                  : "border-border bg-card hover:border-muted-foreground/30")
+              }
+              onClick={() => setKeyAssignOption("existing_key")}
+            >
+              <div className="flex items-start gap-3">
+                <RadioGroupItem
+                  value="existing_key"
+                  id="radio-existing-key"
+                  className="mt-1"
                 />
                 <div className="flex-1">
                   <div className="flex items-center gap-2">
-                    <KeyOutlined className="text-indigo-600" />
-                    <span className="font-medium text-gray-900">Create a new key for this agent</span>
+                    <KeyIcon className="h-4 w-4 text-muted-foreground" />
+                    <span className="font-medium text-foreground">
+                      Assign an existing key
+                    </span>
                   </div>
-                  <p className="text-sm text-gray-500 mt-1">
-                    A dedicated key scoped to this agent.
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Re-assign a key you already have to this agent.
                   </p>
-                  {keyAssignOption === "create_new" && (
-                    <div className="mt-3 space-y-3" onClick={(e) => e.stopPropagation()}>
-                      <div>
-                        <label className="text-sm text-gray-600 block mb-1">Key Name</label>
-                        <Input
-                          value={newKeyName}
-                          onChange={(e) => setNewKeyName(e.target.value)}
-                          placeholder="e.g. my-agent-key"
-                        />
-                      </div>
+                  {keyAssignOption === "existing_key" && (
+                    <div
+                      className="mt-3"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Select
+                        value={selectedExistingKey ?? ""}
+                        onValueChange={(v) => setSelectedExistingKey(v)}
+                      >
+                        <SelectTrigger>
+                          <SelectValue
+                            placeholder={
+                              loadingKeys
+                                ? "Loading keys…"
+                                : "Search by key name…"
+                            }
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {existingKeys.map((k) => (
+                            <SelectItem key={k.token} value={k.token}>
+                              {k.key_alias || k.token?.slice(0, 12) + "…"}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
                     </div>
                   )}
                 </div>
               </div>
-              <Tag color="green">Recommended</Tag>
             </div>
           </div>
-
-          {/* Option: Assign existing key */}
-          <div
-            className={`p-4 border-2 rounded-lg cursor-pointer transition-colors ${
-              keyAssignOption === "existing_key"
-                ? "border-indigo-600 bg-indigo-50"
-                : "border-gray-200 bg-white hover:border-gray-300"
-            }`}
-            onClick={() => setKeyAssignOption("existing_key")}
-          >
-            <div className="flex items-start gap-3">
-              <Radio
-                value="existing_key"
-                checked={keyAssignOption === "existing_key"}
-                onChange={() => setKeyAssignOption("existing_key")}
-              />
-              <div className="flex-1">
-                <div className="flex items-center gap-2">
-                  <KeyOutlined className="text-gray-500" />
-                  <span className="font-medium text-gray-900">Assign an existing key</span>
-                </div>
-                <p className="text-sm text-gray-500 mt-1">
-                  Re-assign a key you already have to this agent.
-                </p>
-                {keyAssignOption === "existing_key" && (
-                  <div className="mt-3" onClick={(e) => e.stopPropagation()}>
-                    <Select
-                      showSearch
-                      style={{ width: "100%" }}
-                      placeholder="Search by key name…"
-                      loading={loadingKeys}
-                      value={selectedExistingKey}
-                      onChange={(value) => setSelectedExistingKey(value)}
-                      filterOption={(input, option) =>
-                        (option?.label as string ?? "").toLowerCase().includes(input.toLowerCase())
-                      }
-                      options={existingKeys.map((k) => ({
-                        label: k.key_alias || k.token?.slice(0, 12) + "…",
-                        value: k.token,
-                      }))}
-                    />
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
+        </RadioGroup>
 
         <div className="text-center mt-4">
           <button
             type="button"
-            className="text-sm text-gray-500 underline hover:text-gray-700"
+            className="text-sm text-muted-foreground underline hover:text-foreground"
             onClick={() => setKeyAssignOption("skip")}
           >
             Skip for now — I&apos;ll assign a key later
@@ -834,12 +1290,21 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
 
   const renderReadyStep = () => (
     <div className="text-center py-6">
-      <CheckCircleFilled className="text-5xl text-green-500 mb-4" style={{ fontSize: 48 }} />
-      <h3 className="text-xl font-semibold text-gray-900 mb-2">Agent Created!</h3>
+      <CheckCircle2
+        className="mx-auto mb-4 text-green-500"
+        style={{ width: 48, height: 48 }}
+      />
+      <h3 className="text-xl font-semibold text-foreground mb-2">
+        Agent Created!
+      </h3>
       <div className="flex justify-center mb-4">
-        <Tag icon={<RobotOutlined />} color="purple" className="px-3 py-1 text-sm">
+        <Badge
+          variant="secondary"
+          className="px-3 py-1 text-sm gap-1 bg-purple-50 text-purple-700 border border-purple-200"
+        >
+          <Bot className="h-4 w-4" />
           {createdAgentName}
-        </Tag>
+        </Badge>
       </div>
       {createdKeyValue && (
         <div className="mt-4 text-left max-w-md mx-auto">
@@ -847,12 +1312,13 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
         </div>
       )}
       {assignedKeyAlias && (
-        <p className="text-sm text-gray-600 mt-2">
-          Key <span className="font-medium">{assignedKeyAlias}</span> has been assigned to this agent.
+        <p className="text-sm text-muted-foreground mt-2">
+          Key <span className="font-medium">{assignedKeyAlias}</span> has been
+          assigned to this agent.
         </p>
       )}
       {!createdKeyValue && !assignedKeyAlias && keyAssignOption === "skip" && (
-        <p className="text-sm text-gray-500 mt-2">
+        <p className="text-sm text-muted-foreground mt-2">
           No key assigned. You can create one from the Virtual Keys page.
         </p>
       )}
@@ -860,100 +1326,76 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
   );
 
   return (
-    <Modal
-      title={
-        <div className="flex items-center space-x-3 pb-4 border-b border-gray-100">
-          {selectedLogo && currentStep < 1 && (
-            <img src={selectedLogo} alt="Agent" className="w-6 h-6 object-contain" />
-          )}
-          <h2 className="text-xl font-semibold text-gray-900">Add New Agent</h2>
-        </div>
-      }
+    <Dialog
       open={visible}
-      onCancel={handleClose}
-      footer={null}
-      width={900}
-      className="top-8"
-      styles={{
-        body: { padding: "24px" },
-        header: { padding: "24px 24px 0 24px", border: "none" },
+      onOpenChange={(open) => {
+        if (!open) handleClose();
       }}
     >
-      <div className="mt-4">
-        {/* Step indicator */}
-        <Steps current={currentStep} size="small" className="mb-8">
-          <Step title="Configure" />
-          <Step title="Entitlements" />
-          <Step title="Governance" />
-          <Step title="Agent Management" />
-          <Step title="Ready" />
-        </Steps>
+      <DialogContent className="max-w-[900px] top-8 translate-y-0 max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>
+            <div className="flex items-center space-x-3 pb-4 border-b border-border">
+              {selectedLogo && currentStep < 1 && (
+                <img
+                  src={selectedLogo}
+                  alt="Agent"
+                  className="w-6 h-6 object-contain"
+                />
+              )}
+              <span className="text-xl font-semibold text-foreground">
+                Add New Agent
+              </span>
+            </div>
+          </DialogTitle>
+        </DialogHeader>
+        <div className="mt-4">
+          <Stepper current={currentStep} steps={STEP_LABELS} />
 
-        <Form
-          form={form}
-          layout="vertical"
-          initialValues={
-            agentType === "a2a"
-              ? { ...getDefaultFormValues(), allowed_mcp_servers_and_groups: { servers: [], accessGroups: [] }, mcp_tool_permissions: {}, entitlement_models: [], entitlement_agents: [], guardrails: [] }
-              : { allowed_mcp_servers_and_groups: { servers: [], accessGroups: [] }, mcp_tool_permissions: {}, entitlement_models: [], entitlement_agents: [], guardrails: [] }
-          }
-          className="space-y-4"
-        >
-          {currentStep === 0 && renderConfigureStep()}
-          {currentStep === 1 && renderEntitlementsStep()}
-          {currentStep === 2 && renderObservabilityStep()}
-          {currentStep === 3 && renderAssignKeyStep()}
-          {currentStep === 4 && renderReadyStep()}
-        </Form>
+          <FormProvider {...form}>
+            <form onSubmit={(e) => e.preventDefault()} className="space-y-4">
+              {currentStep === 0 && renderConfigureStep()}
+              {currentStep === 1 && renderEntitlementsStep()}
+              {currentStep === 2 && renderObservabilityStep()}
+              {currentStep === 3 && renderAssignKeyStep()}
+              {currentStep === 4 && renderReadyStep()}
+            </form>
+          </FormProvider>
 
-        {/* Footer navigation */}
-        <div className="flex items-center justify-between pt-6 border-t border-gray-100 mt-6">
-          <div>
-            {currentStep > 0 && currentStep < 4 && (
-              <button
-                type="button"
-                onClick={handleBack}
-                className="text-sm text-gray-600 border border-gray-300 rounded px-4 py-2 hover:bg-gray-50"
-              >
-                ← Back
-              </button>
-            )}
-          </div>
-          <div className="flex gap-3">
-            {currentStep < 4 && (
-              <Button variant="secondary" onClick={handleClose}>
-                Cancel
-              </Button>
-            )}
-            {currentStep === 0 && (
-              <Button variant="primary" onClick={handleNext}>
-                Next →
-              </Button>
-            )}
-            {currentStep === 1 && (
-              <Button variant="primary" onClick={handleNext}>
-                Next →
-              </Button>
-            )}
-            {currentStep === 2 && (
-              <Button variant="primary" onClick={handleNext}>
-                Next →
-              </Button>
-            )}
-            {currentStep === 3 && (
-              <Button variant="primary" loading={isSubmitting} onClick={handleCreateAgent}>
-                {isSubmitting ? "Creating..." : "Create Agent →"}
-              </Button>
-            )}
-            {currentStep === 4 && (
-              <Button variant="primary" onClick={handleClose}>
-                Done
-              </Button>
-            )}
+          <div className="flex items-center justify-between pt-6 border-t border-border mt-6">
+            <div>
+              {currentStep > 0 && currentStep < 4 && (
+                <Button type="button" variant="outline" onClick={handleBack}>
+                  ← Back
+                </Button>
+              )}
+            </div>
+            <div className="flex gap-3">
+              {currentStep < 4 && (
+                <Button variant="outline" onClick={handleClose}>
+                  Cancel
+                </Button>
+              )}
+              {currentStep === 0 && (
+                <Button onClick={handleNext}>Next →</Button>
+              )}
+              {currentStep === 1 && (
+                <Button onClick={handleNext}>Next →</Button>
+              )}
+              {currentStep === 2 && (
+                <Button onClick={handleNext}>Next →</Button>
+              )}
+              {currentStep === 3 && (
+                <Button disabled={isSubmitting} onClick={handleCreateAgent}>
+                  {isSubmitting ? "Creating..." : "Create Agent →"}
+                </Button>
+              )}
+              {currentStep === 4 && <Button onClick={handleClose}>Done</Button>}
+            </div>
           </div>
         </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/ui/litellm-dashboard/src/components/agents/agent_form_fields.tsx b/ui/litellm-dashboard/src/components/agents/agent_form_fields.tsx
index d9bfa70f590..9f835c595d6 100644
--- a/ui/litellm-dashboard/src/components/agents/agent_form_fields.tsx
+++ b/ui/litellm-dashboard/src/components/agents/agent_form_fields.tsx
@@ -1,7 +1,16 @@
-import React from "react";
-import { Form, Switch, Collapse, Select } from "antd";
+import React, { useState } from "react";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import {
   Tooltip,
@@ -9,13 +18,10 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { Info, MinusCircle, Plus } from "lucide-react";
+import { Info, MinusCircle, Plus, X } from "lucide-react";
 import { AGENT_FORM_CONFIG, SKILL_FIELD_CONFIG } from "./agent_config";
-
 import CostConfigFields from "./cost_config_fields";
 
-const { Panel } = Collapse;
-
 const InfoTip: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   <TooltipProvider>
     <Tooltip>
@@ -32,286 +38,573 @@ interface AgentFormFieldsProps {
   visiblePanels?: string[];
 }
 
+interface FieldProps {
+  name: string;
+  label: string;
+  required?: boolean;
+  tooltip?: string;
+  placeholder?: string;
+  type?: string;
+  rows?: number;
+}
+
+function TextFieldItem({
+  name,
+  label,
+  required,
+  tooltip,
+  placeholder,
+  type,
+  rows,
+}: FieldProps) {
+  const { register, formState } = useFormContext();
+  const error = (formState.errors as any)?.[name];
+  const inputId = `agent-field-${name}`;
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={inputId}>
+        {label}
+        {required && <span className="text-destructive"> *</span>}
+        {tooltip ? <InfoTip>{tooltip}</InfoTip> : null}
+      </Label>
+      {type === "textarea" ? (
+        <Textarea
+          id={inputId}
+          rows={rows}
+          placeholder={placeholder}
+          aria-invalid={!!error}
+          {...register(
+            name,
+            required
+              ? { required: `Please enter ${label.toLowerCase()}` }
+              : undefined,
+          )}
+        />
+      ) : (
+        <Input
+          id={inputId}
+          placeholder={placeholder}
+          aria-invalid={!!error}
+          {...register(
+            name,
+            required
+              ? { required: `Please enter ${label.toLowerCase()}` }
+              : undefined,
+          )}
+        />
+      )}
+      {error && (
+        <p className="text-sm text-destructive">{error.message as string}</p>
+      )}
+    </div>
+  );
+}
+
+function SwitchFieldItem({ name, label }: { name: string; label: string }) {
+  const { control } = useFormContext();
+  return (
+    <div className="flex items-center justify-between">
+      <Label htmlFor={`agent-switch-${name}`}>{label}</Label>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field }) => (
+          <Switch
+            id={`agent-switch-${name}`}
+            checked={!!field.value}
+            onCheckedChange={field.onChange}
+          />
+        )}
+      />
+    </div>
+  );
+}
+
+/**
+ * Comma-separated tag field. Stored as string[] in the form, rendered as a
+ * single text input that splits on commas, consistent with the prior antd
+ * `getValueFromEvent` behavior.
+ */
+function CommaListField({
+  name,
+  label,
+  required,
+  placeholder,
+}: {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+}) {
+  const { control, formState } = useFormContext();
+  const error = (formState.errors as any)?.[name.split(".")[0]];
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={`agent-list-${name}`}>
+        {label}
+        {required && <span className="text-destructive"> *</span>}
+      </Label>
+      <Controller
+        control={control}
+        name={name}
+        rules={
+          required
+            ? {
+                validate: (v) =>
+                  Array.isArray(v) && v.length > 0 && v.some((s) => s?.trim())
+                    ? true
+                    : "Required",
+              }
+            : undefined
+        }
+        render={({ field }) => (
+          <Input
+            id={`agent-list-${name}`}
+            placeholder={placeholder}
+            value={Array.isArray(field.value) ? field.value.join(", ") : ""}
+            onChange={(e) => {
+              const raw = e.target.value;
+              field.onChange(
+                raw
+                  .split(",")
+                  .map((s) => s.trim())
+                  .filter((s) => s !== "" || required !== true),
+              );
+            }}
+          />
+        )}
+      />
+      {error && (
+        <p className="text-sm text-destructive">
+          {(error as any).message as string}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function SkillsList() {
+  const { control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "skills",
+  });
+  return (
+    <div className="space-y-4">
+      {fields.map((f, index) => (
+        <div
+          key={f.id}
+          className="space-y-4 p-4 border border-border rounded-md"
+        >
+          <TextFieldItem
+            name={`skills.${index}.id`}
+            label={SKILL_FIELD_CONFIG.id.label}
+            required={SKILL_FIELD_CONFIG.id.required}
+            placeholder={SKILL_FIELD_CONFIG.id.placeholder}
+          />
+          <TextFieldItem
+            name={`skills.${index}.name`}
+            label={SKILL_FIELD_CONFIG.name.label}
+            required={SKILL_FIELD_CONFIG.name.required}
+            placeholder={SKILL_FIELD_CONFIG.name.placeholder}
+          />
+          <TextFieldItem
+            name={`skills.${index}.description`}
+            label={SKILL_FIELD_CONFIG.description.label}
+            required={SKILL_FIELD_CONFIG.description.required}
+            placeholder={SKILL_FIELD_CONFIG.description.placeholder}
+            type="textarea"
+            rows={SKILL_FIELD_CONFIG.description.rows}
+          />
+          <CommaListField
+            name={`skills.${index}.tags`}
+            label={SKILL_FIELD_CONFIG.tags.label}
+            required={SKILL_FIELD_CONFIG.tags.required}
+            placeholder={SKILL_FIELD_CONFIG.tags.placeholder}
+          />
+          <CommaListField
+            name={`skills.${index}.examples`}
+            label={SKILL_FIELD_CONFIG.examples.label}
+            placeholder={SKILL_FIELD_CONFIG.examples.placeholder}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            className="text-destructive hover:text-destructive"
+            onClick={() => remove(index)}
+          >
+            <MinusCircle className="h-4 w-4" />
+            Remove Skill
+          </Button>
+        </div>
+      ))}
+      <Button
+        type="button"
+        variant="outline"
+        onClick={() =>
+          append({ id: "", name: "", description: "", tags: [], examples: [] })
+        }
+        className="w-full border-dashed"
+      >
+        <Plus className="h-4 w-4" />
+        Add Skill
+      </Button>
+    </div>
+  );
+}
+
+function StaticHeadersList() {
+  const { control, register } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "static_headers",
+  });
+  return (
+    <div className="space-y-2">
+      {fields.map((f, index) => (
+        <div key={f.id} className="flex items-baseline gap-2 mb-2">
+          <Input
+            placeholder="Header name (e.g. Authorization)"
+            className="w-[220px]"
+            {...register(`static_headers.${index}.header`, {
+              required: "Header name required",
+            })}
+          />
+          <Input
+            placeholder="Value (e.g. Bearer token123)"
+            className="w-[260px]"
+            {...register(`static_headers.${index}.value`, {
+              required: "Value required",
+            })}
+          />
+          <button
+            type="button"
+            onClick={() => remove(index)}
+            className="text-destructive"
+            aria-label="Remove header"
+          >
+            <MinusCircle className="h-4 w-4" />
+          </button>
+        </div>
+      ))}
+      <Button
+        type="button"
+        variant="outline"
+        onClick={() => append({ header: "", value: "" })}
+        className="w-full border-dashed"
+      >
+        <Plus className="h-4 w-4" />
+        Add Static Header
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * Free-form tag input (replacement for `antd.Select mode="tags"`). Stores a
+ * string[] in form state; users type a value and press Enter/comma to add.
+ */
+function FreeformTagsField({
+  name,
+  placeholder,
+}: {
+  name: string;
+  placeholder?: string;
+}) {
+  const { control } = useFormContext();
+  const [draft, setDraft] = useState("");
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => {
+        const values: string[] = Array.isArray(field.value) ? field.value : [];
+        const commitDraft = () => {
+          const parts = draft
+            .split(",")
+            .map((s) => s.trim())
+            .filter((s) => s && !values.includes(s));
+          if (parts.length > 0) {
+            field.onChange([...values, ...parts]);
+          }
+          setDraft("");
+        };
+        return (
+          <div className="space-y-2">
+            <Input
+              placeholder={placeholder}
+              value={draft}
+              onChange={(e) => {
+                const v = e.target.value;
+                if (v.includes(",")) {
+                  const parts = v
+                    .split(",")
+                    .map((s) => s.trim())
+                    .filter((s) => s && !values.includes(s));
+                  if (parts.length > 0) {
+                    field.onChange([...values, ...parts]);
+                  }
+                  setDraft("");
+                } else {
+                  setDraft(v);
+                }
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  commitDraft();
+                }
+              }}
+              onBlur={commitDraft}
+            />
+            {values.length > 0 && (
+              <div className="flex flex-wrap gap-1">
+                {values.map((v) => (
+                  <Badge
+                    key={v}
+                    variant="secondary"
+                    className="flex items-center gap-1"
+                  >
+                    {v}
+                    <button
+                      type="button"
+                      onClick={() =>
+                        field.onChange(values.filter((x) => x !== v))
+                      }
+                      className="inline-flex items-center justify-center rounded-full hover:bg-muted-foreground/20"
+                      aria-label={`Remove ${v}`}
+                    >
+                      <X size={12} />
+                    </button>
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+}
+
 /**
  * Reusable form fields component for agent forms
  * Uses shared configuration from agent_config.ts
  */
-const AgentFormFields: React.FC<AgentFormFieldsProps> = ({ showAgentName = true, visiblePanels }) => {
-  const shouldShow = (key: string) => !visiblePanels || visiblePanels.includes(key);
+const AgentFormFields: React.FC<AgentFormFieldsProps> = ({
+  showAgentName = true,
+  visiblePanels,
+}) => {
+  const shouldShow = (key: string) =>
+    !visiblePanels || visiblePanels.includes(key);
+
+  const defaultOpen: string[] = ["basic"];
+
   return (
-    <>
+    <div className="space-y-4">
       {showAgentName && (
-        <Form.Item
-          label="Agent Name"
+        <TextFieldItem
           name="agent_name"
-          rules={[{ required: true, message: "Please enter a unique agent name" }]}
+          label="Agent Name"
+          required
           tooltip="Unique identifier for the agent"
-        >
-          <Input placeholder="e.g., customer-support-agent" />
-        </Form.Item>
+          placeholder="e.g., customer-support-agent"
+        />
       )}
 
-      <Collapse defaultActiveKey={['basic']} style={{ marginBottom: 16 }}>
+      <Accordion
+        type="multiple"
+        defaultValue={defaultOpen}
+        className="mb-4 space-y-2"
+      >
         {/* Basic Information */}
         {shouldShow(AGENT_FORM_CONFIG.basic.key) && (
-        <Panel header={`${AGENT_FORM_CONFIG.basic.title} (Required)`} key={AGENT_FORM_CONFIG.basic.key}>
-          {AGENT_FORM_CONFIG.basic.fields.map((field) => (
-            <Form.Item
-              key={field.name}
-              label={field.label}
-              name={field.name}
-              rules={field.required ? [{ required: true, message: `Please enter ${field.label.toLowerCase()}` }] : undefined}
-              tooltip={field.tooltip}
-            >
-              {field.type === 'textarea' ? (
-                <Textarea rows={field.rows} placeholder={field.placeholder} />
-              ) : (
-                <Input placeholder={field.placeholder} />
-              )}
-            </Form.Item>
-          ))}
-        </Panel>
+          <AccordionItem
+            value={AGENT_FORM_CONFIG.basic.key}
+            className="border border-border rounded-md px-3"
+          >
+            <AccordionTrigger className="py-2 hover:no-underline">
+              {AGENT_FORM_CONFIG.basic.title} (Required)
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-4">
+                {AGENT_FORM_CONFIG.basic.fields.map((field) => (
+                  <TextFieldItem
+                    key={field.name}
+                    name={field.name}
+                    label={field.label}
+                    required={field.required}
+                    tooltip={field.tooltip}
+                    placeholder={field.placeholder}
+                    type={field.type === "textarea" ? "textarea" : undefined}
+                    rows={field.rows}
+                  />
+                ))}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
         )}
 
         {/* Skills */}
         {shouldShow(AGENT_FORM_CONFIG.skills.key) && (
-        <Panel header={`${AGENT_FORM_CONFIG.skills.title} (Required)`} key={AGENT_FORM_CONFIG.skills.key}>
-          <Form.List name="skills">
-            {(fields, { add, remove }) => (
-              <>
-                {fields.map((field) => (
-                  <div key={field.key} style={{ marginBottom: 16, padding: 16, border: '1px solid #d9d9d9', borderRadius: 4 }}>
-                    <Form.Item
-                      {...field}
-                      label={SKILL_FIELD_CONFIG.id.label}
-                      name={[field.name, 'id']}
-                      rules={[{ required: SKILL_FIELD_CONFIG.id.required, message: 'Required' }]}
-                    >
-                      <Input placeholder={SKILL_FIELD_CONFIG.id.placeholder} />
-                    </Form.Item>
-                    
-                    <Form.Item
-                      {...field}
-                      label={SKILL_FIELD_CONFIG.name.label}
-                      name={[field.name, 'name']}
-                      rules={[{ required: SKILL_FIELD_CONFIG.name.required, message: 'Required' }]}
-                    >
-                      <Input placeholder={SKILL_FIELD_CONFIG.name.placeholder} />
-                    </Form.Item>
-                    
-                    <Form.Item
-                      {...field}
-                      label={SKILL_FIELD_CONFIG.description.label}
-                      name={[field.name, 'description']}
-                      rules={[{ required: SKILL_FIELD_CONFIG.description.required, message: 'Required' }]}
-                    >
-                      <Textarea rows={SKILL_FIELD_CONFIG.description.rows} placeholder={SKILL_FIELD_CONFIG.description.placeholder} />
-                    </Form.Item>
-                    
-                    <Form.Item
-                      {...field}
-                      label={SKILL_FIELD_CONFIG.tags.label}
-                      name={[field.name, 'tags']}
-                      rules={[{ required: SKILL_FIELD_CONFIG.tags.required, message: 'Required' }]}
-                      getValueFromEvent={(e) => e.target.value.split(',').map((s: string) => s.trim())}
-                      getValueProps={(value) => ({ value: Array.isArray(value) ? value.join(', ') : value })}
-                    >
-                      <Input placeholder={SKILL_FIELD_CONFIG.tags.placeholder} />
-                    </Form.Item>
-                    
-                    <Form.Item
-                      {...field}
-                      label={SKILL_FIELD_CONFIG.examples.label}
-                      name={[field.name, 'examples']}
-                      getValueFromEvent={(e) => e.target.value.split(',').map((s: string) => s.trim()).filter((s: string) => s)}
-                      getValueProps={(value) => ({ value: Array.isArray(value) ? value.join(', ') : '' })}
-                    >
-                      <Input placeholder={SKILL_FIELD_CONFIG.examples.placeholder} />
-                    </Form.Item>
-                    
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      className="text-destructive hover:text-destructive"
-                      onClick={() => remove(field.name)}
-                    >
-                      <MinusCircle className="h-4 w-4" />
-                      Remove Skill
-                    </Button>
-                  </div>
-                ))}
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => add()}
-                  className="w-full border-dashed"
-                >
-                  <Plus className="h-4 w-4" />
-                  Add Skill
-                </Button>
-              </>
-            )}
-          </Form.List>
-        </Panel>
+          <AccordionItem
+            value={AGENT_FORM_CONFIG.skills.key}
+            className="border border-border rounded-md px-3"
+          >
+            <AccordionTrigger className="py-2 hover:no-underline">
+              {AGENT_FORM_CONFIG.skills.title} (Required)
+            </AccordionTrigger>
+            <AccordionContent>
+              <SkillsList />
+            </AccordionContent>
+          </AccordionItem>
         )}
 
         {/* Capabilities */}
         {shouldShow(AGENT_FORM_CONFIG.capabilities.key) && (
-        <Panel header={AGENT_FORM_CONFIG.capabilities.title} key={AGENT_FORM_CONFIG.capabilities.key}>
-          {AGENT_FORM_CONFIG.capabilities.fields.map((field) => (
-            <Form.Item
-              key={field.name}
-              label={field.label}
-              name={field.name}
-              valuePropName="checked"
-            >
-              <Switch />
-            </Form.Item>
-          ))}
-        </Panel>
+          <AccordionItem
+            value={AGENT_FORM_CONFIG.capabilities.key}
+            className="border border-border rounded-md px-3"
+          >
+            <AccordionTrigger className="py-2 hover:no-underline">
+              {AGENT_FORM_CONFIG.capabilities.title}
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-4">
+                {AGENT_FORM_CONFIG.capabilities.fields.map((field) => (
+                  <SwitchFieldItem
+                    key={field.name}
+                    name={field.name}
+                    label={field.label}
+                  />
+                ))}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
         )}
 
         {/* Optional Settings */}
         {shouldShow(AGENT_FORM_CONFIG.optional.key) && (
-        <Panel header={AGENT_FORM_CONFIG.optional.title} key={AGENT_FORM_CONFIG.optional.key}>
-          {AGENT_FORM_CONFIG.optional.fields.map((field) => (
-            <Form.Item
-              key={field.name}
-              label={field.label}
-              name={field.name}
-              valuePropName={field.type === 'switch' ? 'checked' : undefined}
-            >
-              {field.type === 'switch' ? <Switch /> : <Input placeholder={field.placeholder} />}
-            </Form.Item>
-          ))}
-        </Panel>
+          <AccordionItem
+            value={AGENT_FORM_CONFIG.optional.key}
+            className="border border-border rounded-md px-3"
+          >
+            <AccordionTrigger className="py-2 hover:no-underline">
+              {AGENT_FORM_CONFIG.optional.title}
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-4">
+                {AGENT_FORM_CONFIG.optional.fields.map((field) =>
+                  field.type === "switch" ? (
+                    <SwitchFieldItem
+                      key={field.name}
+                      name={field.name}
+                      label={field.label}
+                    />
+                  ) : (
+                    <TextFieldItem
+                      key={field.name}
+                      name={field.name}
+                      label={field.label}
+                      placeholder={field.placeholder}
+                    />
+                  ),
+                )}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
         )}
 
         {/* Cost Configuration */}
         {shouldShow(AGENT_FORM_CONFIG.cost.key) && (
-        <Panel header={AGENT_FORM_CONFIG.cost.title} key={AGENT_FORM_CONFIG.cost.key}>
-          <CostConfigFields />
-        </Panel>
+          <AccordionItem
+            value={AGENT_FORM_CONFIG.cost.key}
+            className="border border-border rounded-md px-3"
+          >
+            <AccordionTrigger className="py-2 hover:no-underline">
+              {AGENT_FORM_CONFIG.cost.title}
+            </AccordionTrigger>
+            <AccordionContent>
+              <CostConfigFields />
+            </AccordionContent>
+          </AccordionItem>
         )}
 
         {/* LiteLLM Parameters */}
         {shouldShow(AGENT_FORM_CONFIG.litellm.key) && (
-        <Panel header={AGENT_FORM_CONFIG.litellm.title} key={AGENT_FORM_CONFIG.litellm.key}>
-          {AGENT_FORM_CONFIG.litellm.fields.map((field) => (
-            <Form.Item
-              key={field.name}
-              label={field.label}
-              name={field.name}
-              valuePropName={field.type === 'switch' ? 'checked' : undefined}
-            >
-              {field.type === 'switch' ? <Switch /> : <Input placeholder={field.placeholder} />}
-            </Form.Item>
-          ))}
-        </Panel>
+          <AccordionItem
+            value={AGENT_FORM_CONFIG.litellm.key}
+            className="border border-border rounded-md px-3"
+          >
+            <AccordionTrigger className="py-2 hover:no-underline">
+              {AGENT_FORM_CONFIG.litellm.title}
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-4">
+                {AGENT_FORM_CONFIG.litellm.fields.map((field) =>
+                  field.type === "switch" ? (
+                    <SwitchFieldItem
+                      key={field.name}
+                      name={field.name}
+                      label={field.label}
+                    />
+                  ) : (
+                    <TextFieldItem
+                      key={field.name}
+                      name={field.name}
+                      label={field.label}
+                      placeholder={field.placeholder}
+                    />
+                  ),
+                )}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
         )}
 
         {/* Authentication Headers */}
         {shouldShow("auth_headers") && (
-        <Panel header="Authentication Headers" key="auth_headers">
-          {/* Static Headers */}
-          <Form.Item
-            label={
-              <span>
-                Static Headers{" "}
-                <InfoTip>
-                  Headers always sent to the backend agent, regardless of the
-                  client request. Admin-configured, static wins on conflict.
-                </InfoTip>
-              </span>
-            }
+          <AccordionItem
+            value="auth_headers"
+            className="border border-border rounded-md px-3"
           >
-            <Form.List name="static_headers">
-              {(fields, { add, remove }) => (
-                <>
-                  {fields.map(({ key, name, ...restField }) => (
-                    <div
-                      key={key}
-                      className="flex items-baseline gap-2 mb-2"
-                    >
-                      <Form.Item
-                        {...restField}
-                        name={[name, "header"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: "Header name required",
-                          },
-                        ]}
-                        className="mb-0"
-                      >
-                        <Input
-                          placeholder="Header name (e.g. Authorization)"
-                          className="w-[220px]"
-                        />
-                      </Form.Item>
-                      <Form.Item
-                        {...restField}
-                        name={[name, "value"]}
-                        rules={[
-                          { required: true, message: "Value required" },
-                        ]}
-                        className="mb-0"
-                      >
-                        <Input
-                          placeholder="Value (e.g. Bearer token123)"
-                          className="w-[260px]"
-                        />
-                      </Form.Item>
-                      <button
-                        type="button"
-                        onClick={() => remove(name)}
-                        className="text-destructive"
-                        aria-label="Remove header"
-                      >
-                        <MinusCircle className="h-4 w-4" />
-                      </button>
-                    </div>
-                  ))}
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => add()}
-                    className="w-full border-dashed"
-                  >
-                    <Plus className="h-4 w-4" />
-                    Add Static Header
-                  </Button>
-                </>
-              )}
-            </Form.List>
-          </Form.Item>
+            <AccordionTrigger className="py-2 hover:no-underline">
+              Authentication Headers
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label>
+                    Static Headers
+                    <InfoTip>
+                      Headers always sent to the backend agent, regardless of
+                      the client request. Admin-configured, static wins on
+                      conflict.
+                    </InfoTip>
+                  </Label>
+                  <StaticHeadersList />
+                </div>
 
-          {/* Extra Headers (dynamic forwarding) */}
-          <Form.Item
-            label={
-              <span>
-                Forward Client Headers{" "}
-                <InfoTip>
-                  Header names to extract from the client&apos;s request and
-                  forward to the agent. Type a name and press Enter.
-                </InfoTip>
-              </span>
-            }
-            name="extra_headers"
-          >
-            <Select
-              mode="tags"
-              style={{ width: "100%" }}
-              placeholder="e.g. x-api-key, Authorization"
-              tokenSeparators={[","]}
-            />
-          </Form.Item>
-        </Panel>
+                <div className="space-y-2">
+                  <Label htmlFor="agent-extra-headers">
+                    Forward Client Headers
+                    <InfoTip>
+                      Header names to extract from the client&apos;s request
+                      and forward to the agent. Type a name and press Enter.
+                    </InfoTip>
+                  </Label>
+                  <FreeformTagsField
+                    name="extra_headers"
+                    placeholder="e.g. x-api-key, Authorization"
+                  />
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
         )}
-      </Collapse>
-    </>
+      </Accordion>
+    </div>
   );
 };
 
 export default AgentFormFields;
-
diff --git a/ui/litellm-dashboard/src/components/agents/agent_info.tsx b/ui/litellm-dashboard/src/components/agents/agent_info.tsx
index 44dfa91b2e4..9f112c648ea 100644
--- a/ui/litellm-dashboard/src/components/agents/agent_info.tsx
+++ b/ui/litellm-dashboard/src/components/agents/agent_info.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useCallback } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
-import { Form, Input, InputNumber, Descriptions } from "antd";
+import { FormProvider, useForm } from "react-hook-form";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ArrowLeft, Loader2 } from "lucide-react";
 import MessageManager from "@/components/molecules/message_manager";
 import { getAgentInfo, patchAgentCall, getAgentCreateMetadata, AgentCreateInfo } from "../networking";
@@ -21,6 +22,31 @@ interface AgentInfoViewProps {
   isAdmin: boolean;
 }
 
+function DescRow({
+  label,
+  children,
+}: {
+  label: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-[220px_1fr] border-t border-border first:border-t-0">
+      <dt className="bg-muted px-4 py-3 text-sm font-medium text-foreground border-r border-border">
+        {label}
+      </dt>
+      <dd className="px-4 py-3 text-sm text-foreground">{children}</dd>
+    </div>
+  );
+}
+
+function DescList({ children }: { children: React.ReactNode }) {
+  return (
+    <dl className="border border-border rounded-md overflow-hidden">
+      {children}
+    </dl>
+  );
+}
+
 const AgentInfoView: React.FC<AgentInfoViewProps> = ({
   agentId,
   onClose,
@@ -31,7 +57,8 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({
   const [isLoading, setIsLoading] = useState(true);
   const [isEditing, setIsEditing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
-  const [form] = Form.useForm();
+  const form = useForm<any>({ defaultValues: {} });
+  const { register, reset, handleSubmit } = form;
   const [agentTypeMetadata, setAgentTypeMetadata] = useState<AgentCreateInfo[]>([]);
   const [detectedAgentType, setDetectedAgentType] = useState<string>("a2a");
 
@@ -59,15 +86,15 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({
       setDetectedAgentType(agentType);
 
       if (agentType === "a2a") {
-        form.setFieldsValue(parseAgentForForm(data));
+        reset(parseAgentForForm(data));
       } else {
         const typeInfo = agentTypeMetadata.find(
           (t) => t.agent_type === agentType,
         );
         if (typeInfo) {
-          form.setFieldsValue(parseDynamicAgentForForm(data, typeInfo));
+          reset(parseDynamicAgentForForm(data, typeInfo));
         } else {
-          form.setFieldsValue(parseAgentForForm(data));
+          reset(parseAgentForForm(data));
         }
       }
     } catch (error) {
@@ -76,13 +103,12 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({
     } finally {
       setIsLoading(false);
     }
-  }, [accessToken, agentId, agentTypeMetadata, form]);
+  }, [accessToken, agentId, agentTypeMetadata, reset]);
 
   useEffect(() => {
     fetchAgentInfo();
   }, [fetchAgentInfo]);
 
-  // Re-parse form when metadata is loaded
   useEffect(() => {
     if (agent && agentTypeMetadata.length > 0) {
       const agentType = detectAgentType(agent);
@@ -91,36 +117,32 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({
           (t) => t.agent_type === agentType,
         );
         if (typeInfo) {
-          form.setFieldsValue(parseDynamicAgentForForm(agent, typeInfo));
+          reset(parseDynamicAgentForForm(agent, typeInfo));
         }
       }
     }
-  }, [agentTypeMetadata, agent, form]);
+  }, [agentTypeMetadata, agent, reset]);
 
   const selectedAgentTypeInfo = agentTypeMetadata.find(
     (t) => t.agent_type === detectedAgentType,
   );
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleUpdate = async (values: any) => {
     if (!accessToken || !agent) return;
 
     setIsSaving(true);
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       let updateData: any;
 
-
       if (detectedAgentType === "a2a") {
         updateData = buildAgentDataFromForm(values, agent);
       } else if (selectedAgentTypeInfo) {
         updateData = buildDynamicAgentData(values, selectedAgentTypeInfo);
-        // Preserve the agent_name from form
         updateData.agent_name = values.agent_name;
       } else {
         updateData = buildAgentDataFromForm(values, agent);
       }
-      
+
       await patchAgentCall(accessToken, agentId, updateData);
       MessageManager.success("Agent updated successfully");
       setIsEditing(false);
@@ -154,7 +176,6 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({
     );
   }
 
-  // Format date helper function
   const formatDate = (dateString?: string) => {
     if (!dateString) return "-";
     const date = new Date(dateString);
@@ -174,104 +195,135 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({
         <span className="text-muted-foreground font-mono">{agent.agent_id}</span>
       </div>
 
-      <TabGroup>
-        <TabList className="mb-4">
-          <Tab key="overview">Overview</Tab>
-          {isAdmin ? <Tab key="settings">Settings</Tab> : <></>}
-        </TabList>
+      <Tabs defaultValue="overview" className="mt-4">
+        <TabsList className="mb-4">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          {isAdmin && <TabsTrigger value="settings">Settings</TabsTrigger>}
+        </TabsList>
 
-        <TabPanels>
-          {/* Overview Panel */}
-          <TabPanel>
-            <Descriptions bordered column={1}>
-              <Descriptions.Item label="Agent ID">{agent.agent_id}</Descriptions.Item>
-              <Descriptions.Item label="Agent Name">{agent.agent_name}</Descriptions.Item>
-              <Descriptions.Item label="Display Name">{agent.agent_card_params?.name || "-"}</Descriptions.Item>
-              <Descriptions.Item label="Description">{agent.agent_card_params?.description || "-"}</Descriptions.Item>
-              <Descriptions.Item label="URL">{agent.agent_card_params?.url || "-"}</Descriptions.Item>
-              <Descriptions.Item label="Version">{agent.agent_card_params?.version || "-"}</Descriptions.Item>
-              <Descriptions.Item label="Protocol Version">{agent.agent_card_params?.protocolVersion || "-"}</Descriptions.Item>
-              <Descriptions.Item label="Streaming">
-                {agent.agent_card_params?.capabilities?.streaming ? "Yes" : "No"}
-              </Descriptions.Item>
-              {agent.agent_card_params?.capabilities?.pushNotifications && (
-                <Descriptions.Item label="Push Notifications">Yes</Descriptions.Item>
-              )}
-              {agent.agent_card_params?.capabilities?.stateTransitionHistory && (
-                <Descriptions.Item label="State Transition History">Yes</Descriptions.Item>
-              )}
-              <Descriptions.Item label="Skills">
-                {agent.agent_card_params?.skills?.length || 0} configured
-              </Descriptions.Item>
-              {agent.litellm_params?.model && (
-                <Descriptions.Item label="Model">{agent.litellm_params.model}</Descriptions.Item>
-              )}
-              {agent.litellm_params?.make_public !== undefined && (
-                <Descriptions.Item label="Make Public">{agent.litellm_params.make_public ? "Yes" : "No"}</Descriptions.Item>
-              )}
-              {agent.agent_card_params?.iconUrl && (
-                <Descriptions.Item label="Icon URL">{agent.agent_card_params.iconUrl}</Descriptions.Item>
-              )}
-              {agent.agent_card_params?.documentationUrl && (
-                <Descriptions.Item label="Documentation URL">{agent.agent_card_params.documentationUrl}</Descriptions.Item>
-              )}
-              <Descriptions.Item label="TPM Limit">{agent.tpm_limit ?? "Unlimited"}</Descriptions.Item>
-              <Descriptions.Item label="RPM Limit">{agent.rpm_limit ?? "Unlimited"}</Descriptions.Item>
-              <Descriptions.Item label="Session TPM Limit">{agent.session_tpm_limit ?? "Unlimited"}</Descriptions.Item>
-              <Descriptions.Item label="Session RPM Limit">{agent.session_rpm_limit ?? "Unlimited"}</Descriptions.Item>
-              <Descriptions.Item label="Created At">{formatDate(agent.created_at)}</Descriptions.Item>
-              <Descriptions.Item label="Updated At">{formatDate(agent.updated_at)}</Descriptions.Item>
-            </Descriptions>
+        <TabsContent value="overview">
+          <DescList>
+            <DescRow label="Agent ID">{agent.agent_id}</DescRow>
+            <DescRow label="Agent Name">{agent.agent_name}</DescRow>
+            <DescRow label="Display Name">
+              {agent.agent_card_params?.name || "-"}
+            </DescRow>
+            <DescRow label="Description">
+              {agent.agent_card_params?.description || "-"}
+            </DescRow>
+            <DescRow label="URL">
+              {agent.agent_card_params?.url || "-"}
+            </DescRow>
+            <DescRow label="Version">
+              {agent.agent_card_params?.version || "-"}
+            </DescRow>
+            <DescRow label="Protocol Version">
+              {agent.agent_card_params?.protocolVersion || "-"}
+            </DescRow>
+            <DescRow label="Streaming">
+              {agent.agent_card_params?.capabilities?.streaming ? "Yes" : "No"}
+            </DescRow>
+            {agent.agent_card_params?.capabilities?.pushNotifications && (
+              <DescRow label="Push Notifications">Yes</DescRow>
+            )}
+            {agent.agent_card_params?.capabilities?.stateTransitionHistory && (
+              <DescRow label="State Transition History">Yes</DescRow>
+            )}
+            <DescRow label="Skills">
+              {agent.agent_card_params?.skills?.length || 0} configured
+            </DescRow>
+            {agent.litellm_params?.model && (
+              <DescRow label="Model">{agent.litellm_params.model}</DescRow>
+            )}
+            {agent.litellm_params?.make_public !== undefined && (
+              <DescRow label="Make Public">
+                {agent.litellm_params.make_public ? "Yes" : "No"}
+              </DescRow>
+            )}
+            {agent.agent_card_params?.iconUrl && (
+              <DescRow label="Icon URL">
+                {agent.agent_card_params.iconUrl}
+              </DescRow>
+            )}
+            {agent.agent_card_params?.documentationUrl && (
+              <DescRow label="Documentation URL">
+                {agent.agent_card_params.documentationUrl}
+              </DescRow>
+            )}
+            <DescRow label="TPM Limit">
+              {agent.tpm_limit ?? "Unlimited"}
+            </DescRow>
+            <DescRow label="RPM Limit">
+              {agent.rpm_limit ?? "Unlimited"}
+            </DescRow>
+            <DescRow label="Session TPM Limit">
+              {agent.session_tpm_limit ?? "Unlimited"}
+            </DescRow>
+            <DescRow label="Session RPM Limit">
+              {agent.session_rpm_limit ?? "Unlimited"}
+            </DescRow>
+            <DescRow label="Created At">{formatDate(agent.created_at)}</DescRow>
+            <DescRow label="Updated At">{formatDate(agent.updated_at)}</DescRow>
+          </DescList>
 
-            {agent.object_permission &&
-              (agent.object_permission.mcp_servers?.length ||
-                agent.object_permission.mcp_access_groups?.length ||
-                (agent.object_permission.mcp_tool_permissions &&
-                  Object.keys(agent.object_permission.mcp_tool_permissions).length > 0)) && (
+          {agent.object_permission &&
+            (agent.object_permission.mcp_servers?.length ||
+              agent.object_permission.mcp_access_groups?.length ||
+              (agent.object_permission.mcp_tool_permissions &&
+                Object.keys(agent.object_permission.mcp_tool_permissions)
+                  .length > 0)) && (
               <div className="mt-6">
-                <h2 className="text-lg font-semibold">MCP Tool Permissions</h2>
-                <Descriptions bordered column={1} className="mt-4">
-                  {agent.object_permission.mcp_servers && agent.object_permission.mcp_servers.length > 0 && (
-                    <Descriptions.Item label="MCP Servers">
-                      {agent.object_permission.mcp_servers.join(", ")}
-                    </Descriptions.Item>
-                  )}
-                  {agent.object_permission.mcp_access_groups &&
-                    agent.object_permission.mcp_access_groups.length > 0 && (
-                      <Descriptions.Item label="MCP Access Groups">
-                        {agent.object_permission.mcp_access_groups.join(", ")}
-                      </Descriptions.Item>
-                    )}
-                  {agent.object_permission.mcp_tool_permissions &&
-                    Object.keys(agent.object_permission.mcp_tool_permissions).length > 0 && (
-                      <Descriptions.Item label="Tool permissions per server">
-                        <div className="space-y-1">
-                          {Object.entries(agent.object_permission.mcp_tool_permissions).map(
-                            ([serverId, tools]) => (
+                <h2 className="text-lg font-semibold">
+                  MCP Tool Permissions
+                </h2>
+                <div className="mt-4">
+                  <DescList>
+                    {agent.object_permission.mcp_servers &&
+                      agent.object_permission.mcp_servers.length > 0 && (
+                        <DescRow label="MCP Servers">
+                          {agent.object_permission.mcp_servers.join(", ")}
+                        </DescRow>
+                      )}
+                    {agent.object_permission.mcp_access_groups &&
+                      agent.object_permission.mcp_access_groups.length > 0 && (
+                        <DescRow label="MCP Access Groups">
+                          {agent.object_permission.mcp_access_groups.join(", ")}
+                        </DescRow>
+                      )}
+                    {agent.object_permission.mcp_tool_permissions &&
+                      Object.keys(agent.object_permission.mcp_tool_permissions)
+                        .length > 0 && (
+                        <DescRow label="Tool permissions per server">
+                          <div className="space-y-1">
+                            {Object.entries(
+                              agent.object_permission.mcp_tool_permissions,
+                            ).map(([serverId, tools]) => (
                               <div key={serverId}>
                                 <span className="font-medium">{serverId}:</span>{" "}
-                                {Array.isArray(tools) ? tools.join(", ") : String(tools)}
+                                {Array.isArray(tools)
+                                  ? tools.join(", ")
+                                  : String(tools)}
                               </div>
-                            )
-                          )}
-                        </div>
-                      </Descriptions.Item>
-                    )}
-                </Descriptions>
+                            ))}
+                          </div>
+                        </DescRow>
+                      )}
+                  </DescList>
+                </div>
               </div>
             )}
 
-            <AgentCostView agent={agent} />
+          <AgentCostView agent={agent} />
 
-            {agent.agent_card_params?.skills &&
-              agent.agent_card_params.skills.length > 0 && (
-                <div className="mt-6">
-                  <h2 className="text-lg font-semibold">Skills</h2>
-                  <Descriptions bordered column={1} className="mt-4">
+          {agent.agent_card_params?.skills &&
+            agent.agent_card_params.skills.length > 0 && (
+              <div className="mt-6">
+                <h2 className="text-lg font-semibold">Skills</h2>
+                <div className="mt-4">
+                  <DescList>
                     {agent.agent_card_params.skills.map(
-                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
                       (skill: any, index: number) => (
-                        <Descriptions.Item
+                        <DescRow
                           label={skill.name || `Skill ${index + 1}`}
                           key={index}
                         >
@@ -297,62 +349,106 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({
                               </div>
                             )}
                           </div>
-                        </Descriptions.Item>
+                        </DescRow>
                       ),
                     )}
-                  </Descriptions>
+                  </DescList>
                 </div>
-              )}
-          </TabPanel>
+              </div>
+            )}
+        </TabsContent>
 
-          {/* Settings Panel (only for admins) */}
-          {isAdmin && (
-            <TabPanel>
-              <Card className="p-4">
-                <div className="flex justify-between items-center mb-4">
-                  <h2 className="text-lg font-semibold">Agent Settings</h2>
-                  {!isEditing && (
-                    <Button onClick={() => setIsEditing(true)}>
-                      Edit Settings
-                    </Button>
-                  )}
-                </div>
+        {isAdmin && (
+          <TabsContent value="settings">
+            <Card className="p-4">
+              <div className="flex justify-between items-center mb-4">
+                <h2 className="text-lg font-semibold">Agent Settings</h2>
+                {!isEditing && (
+                  <Button onClick={() => setIsEditing(true)}>
+                    Edit Settings
+                  </Button>
+                )}
+              </div>
 
-                {isEditing ? (
-                  <Form
-                    form={form}
-                    layout="vertical"
-                    onFinish={handleUpdate}
+              {isEditing ? (
+                <FormProvider {...form}>
+                  <form
+                    onSubmit={handleSubmit(handleUpdate)}
+                    className="space-y-4"
                   >
-                    <Form.Item label="Agent ID">
-                      <Input value={agent.agent_id} disabled />
-                    </Form.Item>
+                    <div className="space-y-2">
+                      <Label htmlFor="agent-id-readonly">Agent ID</Label>
+                      <Input
+                        id="agent-id-readonly"
+                        value={agent.agent_id}
+                        disabled
+                        readOnly
+                      />
+                    </div>
 
                     {detectedAgentType === "a2a" ? (
                       <AgentFormFields showAgentName={true} />
                     ) : selectedAgentTypeInfo ? (
-                      <DynamicAgentFormFields agentTypeInfo={selectedAgentTypeInfo} />
+                      <DynamicAgentFormFields
+                        agentTypeInfo={selectedAgentTypeInfo}
+                      />
                     ) : (
-                    <AgentFormFields showAgentName={true} />
+                      <AgentFormFields showAgentName={true} />
                     )}
 
                     <hr className="my-4 border-border" />
                     <h3 className="text-lg font-semibold mb-4">Rate Limits</h3>
                     <div className="grid grid-cols-2 gap-4">
-                      <Form.Item label="TPM Limit" name="tpm_limit">
-                        <InputNumber className="w-full" min={0} placeholder="Unlimited" />
-                      </Form.Item>
-                      <Form.Item label="RPM Limit" name="rpm_limit">
-                        <InputNumber className="w-full" min={0} placeholder="Unlimited" />
-                      </Form.Item>
+                      <div className="space-y-2">
+                        <Label htmlFor="tpm_limit">TPM Limit</Label>
+                        <Input
+                          id="tpm_limit"
+                          type="number"
+                          min={0}
+                          placeholder="Unlimited"
+                          {...register("tpm_limit", { valueAsNumber: true })}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="rpm_limit">RPM Limit</Label>
+                        <Input
+                          id="rpm_limit"
+                          type="number"
+                          min={0}
+                          placeholder="Unlimited"
+                          {...register("rpm_limit", { valueAsNumber: true })}
+                        />
+                      </div>
                     </div>
                     <div className="grid grid-cols-2 gap-4">
-                      <Form.Item label="Session TPM Limit" name="session_tpm_limit">
-                        <InputNumber className="w-full" min={0} placeholder="Unlimited" />
-                      </Form.Item>
-                      <Form.Item label="Session RPM Limit" name="session_rpm_limit">
-                        <InputNumber className="w-full" min={0} placeholder="Unlimited" />
-                      </Form.Item>
+                      <div className="space-y-2">
+                        <Label htmlFor="session_tpm_limit">
+                          Session TPM Limit
+                        </Label>
+                        <Input
+                          id="session_tpm_limit"
+                          type="number"
+                          min={0}
+                          placeholder="Unlimited"
+                          {...register("session_tpm_limit", {
+                            valueAsNumber: true,
+                          })}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="session_rpm_limit">
+                          Session RPM Limit
+                        </Label>
+                        <Input
+                          id="session_rpm_limit"
+                          type="number"
+                          min={0}
+                          placeholder="Unlimited"
+                          {...register("session_rpm_limit", {
+                            valueAsNumber: true,
+                          })}
+                        />
+                      </div>
                     </div>
 
                     <div className="flex justify-end gap-2 mt-6">
@@ -370,21 +466,19 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({
                         {isSaving ? "Saving..." : "Save Changes"}
                       </Button>
                     </div>
-                  </Form>
-                ) : (
-                  <p className="text-muted-foreground">
-                    Click &quot;Edit Settings&quot; to modify agent
-                    configuration.
-                  </p>
-                )}
-              </Card>
-            </TabPanel>
-          )}
-        </TabPanels>
-      </TabGroup>
+                  </form>
+                </FormProvider>
+              ) : (
+                <p className="text-muted-foreground">
+                  Click &quot;Edit Settings&quot; to modify agent configuration.
+                </p>
+              )}
+            </Card>
+          </TabsContent>
+        )}
+      </Tabs>
     </div>
   );
 };
 
 export default AgentInfoView;
-
diff --git a/ui/litellm-dashboard/src/components/agents/cost_config_fields.tsx b/ui/litellm-dashboard/src/components/agents/cost_config_fields.tsx
index c66e0f0e014..d54f4c60e61 100644
--- a/ui/litellm-dashboard/src/components/agents/cost_config_fields.tsx
+++ b/ui/litellm-dashboard/src/components/agents/cost_config_fields.tsx
@@ -1,26 +1,47 @@
 import React from "react";
-import { Form } from "antd";
+import { useFormContext } from "react-hook-form";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Info } from "lucide-react";
 import { AGENT_FORM_CONFIG } from "./agent_config";
 
+const InfoTip: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Info className="ml-1 inline h-3 w-3 text-muted-foreground" />
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs">{children}</TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
 const CostConfigFields: React.FC = () => {
+  const { register } = useFormContext();
   return (
-    <>
+    <div className="space-y-4">
       {AGENT_FORM_CONFIG.cost.fields.map((field) => (
-        <Form.Item
-          key={field.name}
-          label={field.label}
-          name={field.name}
-          tooltip={field.tooltip}
-        >
+        <div key={field.name} className="space-y-2">
+          <Label htmlFor={field.name}>
+            {field.label}
+            {field.tooltip ? <InfoTip>{field.tooltip}</InfoTip> : null}
+          </Label>
           <Input
+            id={field.name}
             placeholder={field.placeholder}
             type="number"
             step="0.000001"
+            {...register(field.name)}
           />
-        </Form.Item>
+        </div>
       ))}
-    </>
+    </div>
   );
 };
 
diff --git a/ui/litellm-dashboard/src/components/agents/dynamic_agent_form_fields.tsx b/ui/litellm-dashboard/src/components/agents/dynamic_agent_form_fields.tsx
index 108309255cd..fb2792851a8 100644
--- a/ui/litellm-dashboard/src/components/agents/dynamic_agent_form_fields.tsx
+++ b/ui/litellm-dashboard/src/components/agents/dynamic_agent_form_fields.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { Form, Input as AntInput, Select } from "antd";
+import React, { useEffect } from "react";
+import { Controller, useFormContext } from "react-hook-form";
 import {
   Accordion,
   AccordionContent,
@@ -7,7 +7,22 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+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 { Info } from "lucide-react";
 import { AgentCreateInfo, AgentCredentialFieldMetadata } from "../networking";
 import { AGENT_FORM_CONFIG } from "./agent_config";
 import CostConfigFields from "./cost_config_fields";
@@ -16,6 +31,17 @@ interface DynamicAgentFormFieldsProps {
   agentTypeInfo: AgentCreateInfo;
 }
 
+const InfoTip: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Info className="ml-1 inline h-3 w-3 text-muted-foreground" />
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs">{children}</TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
 /**
  * Form fields for dynamic agent types (e.g., LangGraph).
  * Renders common fields (agent name, display name, description) plus
@@ -24,66 +50,146 @@ interface DynamicAgentFormFieldsProps {
 const DynamicAgentFormFields: React.FC<DynamicAgentFormFieldsProps> = ({
   agentTypeInfo,
 }) => {
-  return (
-    <>
-      <Form.Item
-        label="Agent Name"
-        name="agent_name"
-        rules={[
-          { required: true, message: "Please enter a unique agent name" },
-        ]}
-        tooltip="Unique identifier for the agent"
-      >
-        <Input placeholder="e.g., my-langgraph-agent" />
-      </Form.Item>
+  const { register, control, setValue, formState, getValues } =
+    useFormContext();
 
-      <Form.Item
-        label="Description"
-        name="description"
-        tooltip="Brief description of what this agent does"
-      >
+  useEffect(() => {
+    for (const field of agentTypeInfo.credential_fields) {
+      if (field.default_value !== undefined) {
+        const current = getValues(field.key);
+        if (current === undefined || current === null || current === "") {
+          setValue(field.key, field.default_value);
+        }
+      }
+    }
+  }, [agentTypeInfo, setValue, getValues]);
+
+  const agentNameError = (formState.errors as any)?.agent_name;
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="agent_name">
+          Agent Name <span className="text-destructive">*</span>
+          <InfoTip>Unique identifier for the agent</InfoTip>
+        </Label>
+        <Input
+          id="agent_name"
+          placeholder="e.g., my-langgraph-agent"
+          aria-invalid={!!agentNameError}
+          {...register("agent_name", {
+            required: "Please enter a unique agent name",
+          })}
+        />
+        {agentNameError && (
+          <p className="text-sm text-destructive">
+            {agentNameError.message as string}
+          </p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="description">
+          Description
+          <InfoTip>Brief description of what this agent does</InfoTip>
+        </Label>
         <Textarea
+          id="description"
           rows={2}
           placeholder="Describe what this agent does..."
+          {...register("description")}
         />
-      </Form.Item>
+      </div>
 
       {agentTypeInfo.credential_fields.map(
-        (field: AgentCredentialFieldMetadata) => (
-          <Form.Item
-            key={field.key}
-            label={field.label}
-            name={field.key}
-            rules={
-              field.required
-                ? [
-                    {
-                      required: true,
-                      message: `Please enter ${field.label}`,
-                    },
-                  ]
-                : undefined
-            }
-            tooltip={field.tooltip}
-            initialValue={field.default_value}
-          >
-            {field.field_type === "password" ? (
-              <AntInput.Password placeholder={field.placeholder || ""} />
-            ) : field.field_type === "textarea" ? (
-              <Textarea rows={3} placeholder={field.placeholder || ""} />
-            ) : field.field_type === "select" && field.options ? (
-              <Select placeholder={field.placeholder || ""}>
-                {field.options.map((opt) => (
-                  <Select.Option key={opt} value={opt}>
-                    {opt}
-                  </Select.Option>
-                ))}
-              </Select>
-            ) : (
-              <Input placeholder={field.placeholder || ""} />
-            )}
-          </Form.Item>
-        ),
+        (field: AgentCredentialFieldMetadata) => {
+          const error = (formState.errors as any)?.[field.key];
+          const inputId = `credential-${field.key}`;
+          return (
+            <div key={field.key} className="space-y-2">
+              <Label htmlFor={inputId}>
+                {field.label}
+                {field.required && (
+                  <span className="text-destructive"> *</span>
+                )}
+                {field.tooltip ? <InfoTip>{field.tooltip}</InfoTip> : null}
+              </Label>
+              {field.field_type === "password" ? (
+                <Input
+                  id={inputId}
+                  type="password"
+                  placeholder={field.placeholder || ""}
+                  aria-invalid={!!error}
+                  {...register(
+                    field.key,
+                    field.required
+                      ? { required: `Please enter ${field.label}` }
+                      : undefined,
+                  )}
+                />
+              ) : field.field_type === "textarea" ? (
+                <Textarea
+                  id={inputId}
+                  rows={3}
+                  placeholder={field.placeholder || ""}
+                  aria-invalid={!!error}
+                  {...register(
+                    field.key,
+                    field.required
+                      ? { required: `Please enter ${field.label}` }
+                      : undefined,
+                  )}
+                />
+              ) : field.field_type === "select" && field.options ? (
+                <Controller
+                  control={control}
+                  name={field.key}
+                  rules={
+                    field.required
+                      ? { required: `Please enter ${field.label}` }
+                      : undefined
+                  }
+                  render={({ field: rhfField }) => (
+                    <Select
+                      value={(rhfField.value as string) ?? ""}
+                      onValueChange={rhfField.onChange}
+                    >
+                      <SelectTrigger id={inputId} aria-invalid={!!error}>
+                        <SelectValue
+                          placeholder={field.placeholder || ""}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {field.options?.map((opt) => (
+                          <SelectItem key={opt} value={opt}>
+                            {opt}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+              ) : (
+                <Input
+                  id={inputId}
+                  placeholder={field.placeholder || ""}
+                  aria-invalid={!!error}
+                  {...register(
+                    field.key,
+                    field.required
+                      ? { required: `Please enter ${field.label}` }
+                      : undefined,
+                  )}
+                />
+              )}
+              {error && (
+                <p className="text-sm text-destructive">
+                  {error.message as string}
+                </p>
+              )}
+            </div>
+          );
+        },
       )}
 
       <Accordion type="single" collapsible className="mb-4">
@@ -99,7 +205,7 @@ const DynamicAgentFormFields: React.FC<DynamicAgentFormFieldsProps> = ({
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-    </>
+    </div>
   );
 };
 
@@ -182,4 +288,3 @@ export const buildDynamicAgentData = (
 };
 
 export default DynamicAgentFormFields;
-