diff --git a/ui/litellm-dashboard/docs/BLOCKERS.md b/ui/litellm-dashboard/docs/BLOCKERS.md
index b154880db38..67f8eba5354 100644
--- a/ui/litellm-dashboard/docs/BLOCKERS.md
+++ b/ui/litellm-dashboard/docs/BLOCKERS.md
@@ -31,3 +31,12 @@ stay on antd for phase 1 and will be addressed in a targeted follow-up.
   with Switch/InputNumber/Select controls. Defer until shared section
   unblocks.
 - `src/components/add_pass_through.tsx`: same dependency chain.
+- `src/components/team/TeamInfo.tsx` (1724 LoC): team detail/edit page with a
+  deeply coupled antd `Form` — `Form.List` + inline Promise validators for
+  per-model rate limits, `Form.useWatch` hooks driving dependent rendering,
+  `shouldUpdate` patterns, hidden form fields registered via `Form.Item`,
+  antd `Select.OptGroup` with a custom `tagRender` for guardrails, and the
+  Tremor `Accordion` still required by the settings panel. Migration
+  exceeds the two-attempt budget for this batch. Defer until Tremor
+  `Accordion` has a shadcn replacement adopted and the antd Form surface
+  can be broken into sub-forms.
diff --git a/ui/litellm-dashboard/src/components/team/EditMembership.tsx b/ui/litellm-dashboard/src/components/team/EditMembership.tsx
index 8725e201c20..c0ce768d052 100644
--- a/ui/litellm-dashboard/src/components/team/EditMembership.tsx
+++ b/ui/litellm-dashboard/src/components/team/EditMembership.tsx
@@ -1,13 +1,12 @@
-import { Form, Select } from "antd";
+import React, { useEffect, useMemo, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import React, { useEffect, useState } from "react";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { X } from "lucide-react";
 import NumericalInput from "../shared/numerical_input";
 
 interface BaseMember {
@@ -16,6 +15,18 @@ interface BaseMember {
   role: string;
 }
 
+interface AdditionalField {
+  name: string;
+  label: string | React.ReactNode;
+  type: "input" | "select" | "numerical" | "multi-select";
+  options?: Array<{ label: string; value: string }>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rules?: any[];
+  step?: number;
+  min?: number;
+  placeholder?: string;
+}
+
 interface ModalConfig {
   title: string;
   roleOptions: Array<{
@@ -25,17 +36,7 @@ interface ModalConfig {
   defaultRole?: string;
   showEmail?: boolean;
   showUserId?: boolean;
-  additionalFields?: Array<{
-    name: string;
-    label: string | React.ReactNode;
-    type: "input" | "select" | "numerical" | "multi-select";
-    options?: Array<{ label: string; value: string }>;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    rules?: any[];
-    step?: number;
-    min?: number;
-    placeholder?: string;
-  }>;
+  additionalFields?: AdditionalField[];
 }
 
 interface MemberModalProps<T extends BaseMember> {
@@ -47,6 +48,79 @@ interface MemberModalProps<T extends BaseMember> {
   config: ModalConfig;
 }
 
+type FormValues = {
+  user_email?: string;
+  user_id?: string;
+  role: string;
+  max_budget_in_team?: number | string | null;
+  tpm_limit?: number | string | null;
+  rpm_limit?: number | string | null;
+  allowed_models?: string[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+};
+
+function MultiSelectField({
+  value,
+  onChange,
+  options,
+  placeholder,
+}: {
+  value: string[];
+  onChange: (next: string[]) => void;
+  options: Array<{ label: string; value: string }>;
+  placeholder?: string;
+}) {
+  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={placeholder || "Select options"} />
+        </SelectTrigger>
+        <SelectContent>
+          {remaining.length === 0 ? (
+            <div className="py-2 px-3 text-sm text-muted-foreground">No more options</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>
+  );
+}
+
 const MemberModal = <T extends BaseMember>({
   visible,
   onCancel,
@@ -55,47 +129,56 @@ const MemberModal = <T extends BaseMember>({
   mode,
   config,
 }: MemberModalProps<T>) => {
-  const [form] = Form.useForm();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // Reset form and set initial values when modal becomes visible or initialData changes
-  useEffect(() => {
-    if (visible) {
-      if (mode === "edit" && initialData) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const d = initialData as any;
-        const formValues = {
-          ...initialData,
-          role: initialData.role || config.defaultRole,
-          max_budget_in_team: d.max_budget_in_team || null,
-          tpm_limit: d.tpm_limit || null,
-          rpm_limit: d.rpm_limit || null,
-          allowed_models: d.allowed_models || [],
-        };
-        form.setFieldsValue(formValues);
-      } else {
-        // For add mode, reset to defaults
-        form.resetFields();
-        form.setFieldsValue({
-          role: config.defaultRole || config.roleOptions[0]?.value,
-        });
-      }
-    }
-  }, [visible, initialData, mode, form, config.defaultRole, config.roleOptions]);
+  const defaultValues = useMemo<FormValues>(
+    () => ({
+      user_email: "",
+      user_id: "",
+      role: config.defaultRole || config.roleOptions[0]?.value || "",
+      max_budget_in_team: null,
+      tpm_limit: null,
+      rpm_limit: null,
+      allowed_models: [],
+    }),
+    [config.defaultRole, config.roleOptions],
+  );
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleSubmit = async (values: any) => {
+  const {
+    register,
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<FormValues>({
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (!visible) return;
+    if (mode === "edit" && initialData) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const d = initialData as any;
+      reset({
+        ...initialData,
+        role: initialData.role || config.defaultRole || "",
+        max_budget_in_team: d.max_budget_in_team ?? null,
+        tpm_limit: d.tpm_limit ?? null,
+        rpm_limit: d.rpm_limit ?? null,
+        allowed_models: d.allowed_models ?? [],
+      });
+    } else {
+      reset(defaultValues);
+    }
+  }, [visible, initialData, mode, reset, config.defaultRole, defaultValues]);
+
+  const submit = handleSubmit(async (values) => {
     try {
       setIsSubmitting(true);
       const formData = Object.entries(values).reduce((acc, [key, value]) => {
         if (typeof value === "string") {
           const trimmedValue = value.trim();
-          if (
-            trimmedValue === "" &&
-            (key === "max_budget_in_team" ||
-              key === "tpm_limit" ||
-              key === "rpm_limit")
-          ) {
+          if (trimmedValue === "" && (key === "max_budget_in_team" || key === "tpm_limit" || key === "rpm_limit")) {
             return { ...acc, [key]: null };
           }
           return { ...acc, [key]: trimmedValue };
@@ -104,59 +187,84 @@ const MemberModal = <T extends BaseMember>({
       }, {}) as T;
 
       await Promise.resolve(onSubmit(formData));
-      form.resetFields();
+      reset(defaultValues);
     } catch (error) {
       console.error("Form submission error:", error);
     } finally {
       setIsSubmitting(false);
     }
-  };
+  });
 
-  // Helper function to get role label from value
   const getRoleLabel = (value: string) => {
     return config.roleOptions.find((option) => option.value === value)?.label || value;
   };
 
-  const renderField = (field: {
-    name: string;
-    label: string | React.ReactNode;
-    type: "input" | "select" | "numerical" | "multi-select";
-    options?: Array<{ label: string; value: string }>;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    rules?: any[];
-    step?: number;
-    min?: number;
-    placeholder?: string;
-  }) => {
+  const orderedRoleOptions = useMemo(() => {
+    if (mode === "edit" && initialData) {
+      return [
+        ...config.roleOptions.filter((o) => o.value === initialData.role),
+        ...config.roleOptions.filter((o) => o.value !== initialData.role),
+      ];
+    }
+    return config.roleOptions;
+  }, [mode, initialData, config.roleOptions]);
+
+  const renderField = (field: AdditionalField) => {
     switch (field.type) {
       case "input":
-        return <Input placeholder={field.placeholder} />;
+        return <Input id={`field-${field.name}`} placeholder={field.placeholder} {...register(field.name)} />;
       case "numerical":
         return (
-          <NumericalInput
-            step={field.step || 1}
-            min={field.min || 0}
-            style={{ width: "100%" }}
-            placeholder={field.placeholder || "Enter a numerical value"}
+          <Controller
+            control={control}
+            name={field.name}
+            render={({ field: rhfField }) => (
+              <NumericalInput
+                id={`field-${field.name}`}
+                step={field.step || 1}
+                min={field.min || 0}
+                style={{ width: "100%" }}
+                placeholder={field.placeholder || "Enter a numerical value"}
+                value={rhfField.value as number | string | null | undefined}
+                onChange={(v: number | null) => rhfField.onChange(v)}
+              />
+            )}
           />
         );
       case "select":
         return (
-          <Select>
-            {field.options?.map((option) => (
-              <Select.Option key={option.value} value={option.value}>
-                {option.label}
-              </Select.Option>
-            ))}
-          </Select>
+          <Controller
+            control={control}
+            name={field.name}
+            render={({ field: rhfField }) => (
+              <Select value={(rhfField.value as string) || ""} onValueChange={(v) => rhfField.onChange(v)}>
+                <SelectTrigger id={`field-${field.name}`}>
+                  <SelectValue placeholder={field.placeholder} />
+                </SelectTrigger>
+                <SelectContent>
+                  {field.options?.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          />
         );
       case "multi-select":
         return (
-          <Select
-            mode="multiple"
-            placeholder={field.placeholder || "Select options"}
-            options={field.options}
-            allowClear
+          <Controller
+            control={control}
+            name={field.name}
+            render={({ field: rhfField }) => (
+              <MultiSelectField
+                value={(rhfField.value as string[]) || []}
+                onChange={(v) => rhfField.onChange(v)}
+                options={field.options || []}
+                placeholder={field.placeholder}
+              />
+            )}
           />
         );
       default:
@@ -168,28 +276,29 @@ const MemberModal = <T extends BaseMember>({
     <Dialog open={visible} onOpenChange={(o) => (!o ? onCancel() : undefined)}>
       <DialogContent className="max-w-[1000px]">
         <DialogHeader>
-          <DialogTitle>
-            {config.title || (mode === "add" ? "Add Member" : "Edit Member")}
-          </DialogTitle>
+          <DialogTitle>{config.title || (mode === "add" ? "Add Member" : "Edit Member")}</DialogTitle>
         </DialogHeader>
-        <Form
-          form={form}
-          onFinish={handleSubmit}
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 16 }}
-          labelAlign="left"
-        >
+        <form onSubmit={submit}>
           {config.showEmail && (
-            <Form.Item
-              label="Email"
-              name="user_email"
-              className="mb-4"
-              rules={[
-                { type: "email", message: "Please enter a valid email!" },
-              ]}
-            >
-              <Input placeholder="user@example.com" />
-            </Form.Item>
+            <div className="grid grid-cols-3 gap-4 items-start mb-4">
+              <Label htmlFor="user_email" className="pt-2">
+                Email
+              </Label>
+              <div className="col-span-2 space-y-1">
+                <Input
+                  id="user_email"
+                  placeholder="user@example.com"
+                  {...register("user_email", {
+                    validate: (value) => {
+                      if (!value) return true;
+                      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                      return emailRegex.test(value) || "Please enter a valid email!";
+                    },
+                  })}
+                />
+                {errors.user_email && <p className="text-sm text-destructive">{errors.user_email.message as string}</p>}
+              </div>
+            </div>
           )}
 
           {config.showEmail && config.showUserId && (
@@ -199,68 +308,60 @@ const MemberModal = <T extends BaseMember>({
           )}
 
           {config.showUserId && (
-            <Form.Item label="User ID" name="user_id" className="mb-4">
-              <Input placeholder="user_123" />
-            </Form.Item>
+            <div className="grid grid-cols-3 gap-4 items-start mb-4">
+              <Label htmlFor="user_id" className="pt-2">
+                User ID
+              </Label>
+              <div className="col-span-2">
+                <Input id="user_id" placeholder="user_123" {...register("user_id")} />
+              </div>
+            </div>
           )}
 
-          <Form.Item
-            label={
+          <div className="grid grid-cols-3 gap-4 items-start mb-4">
+            <Label htmlFor="role" className="pt-2">
               <div className="flex items-center gap-2">
                 <span>Role</span>
                 {mode === "edit" && initialData && (
-                  <span className="text-muted-foreground text-sm">
-                    (Current: {getRoleLabel(initialData.role)})
-                  </span>
+                  <span className="text-muted-foreground text-sm">(Current: {getRoleLabel(initialData.role)})</span>
                 )}
               </div>
-            }
-            name="role"
-            className="mb-4"
-            rules={[{ required: true, message: "Please select a role!" }]}
-          >
-            <Select>
-              {mode === "edit" && initialData
-                ? [
-                    ...config.roleOptions.filter(
-                      (option) => option.value === initialData.role,
-                    ),
-                    ...config.roleOptions.filter(
-                      (option) => option.value !== initialData.role,
-                    ),
-                  ].map((option) => (
-                    <Select.Option key={option.value} value={option.value}>
-                      {option.label}
-                    </Select.Option>
-                  ))
-                : config.roleOptions.map((option) => (
-                    <Select.Option key={option.value} value={option.value}>
-                      {option.label}
-                    </Select.Option>
-                  ))}
-            </Select>
-          </Form.Item>
+            </Label>
+            <div className="col-span-2 space-y-1">
+              <Controller
+                control={control}
+                name="role"
+                rules={{ required: "Please select a role!" }}
+                render={({ field }) => (
+                  <Select value={field.value || ""} onValueChange={(v) => field.onChange(v)}>
+                    <SelectTrigger id="role">
+                      <SelectValue placeholder="Select a role" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {orderedRoleOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              {errors.role && <p className="text-sm text-destructive">{errors.role.message as string}</p>}
+            </div>
+          </div>
 
           {config.additionalFields?.map((field) => (
-            <Form.Item
-              key={field.name}
-              label={field.label}
-              name={field.name}
-              className="mb-4"
-              rules={field.rules}
-            >
-              {renderField(field)}
-            </Form.Item>
+            <div key={field.name} className="grid grid-cols-3 gap-4 items-start mb-4">
+              <Label htmlFor={`field-${field.name}`} className="pt-2">
+                {field.label}
+              </Label>
+              <div className="col-span-2">{renderField(field)}</div>
+            </div>
           ))}
 
           <div className="text-right mt-6">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={onCancel}
-              className="mr-2"
-              disabled={isSubmitting}
-            >
+            <Button type="button" variant="outline" onClick={onCancel} className="mr-2" disabled={isSubmitting}>
               Cancel
             </Button>
             <Button type="submit" disabled={isSubmitting}>
@@ -273,7 +374,7 @@ const MemberModal = <T extends BaseMember>({
                   : "Save Changes"}
             </Button>
           </div>
-        </Form>
+        </form>
       </DialogContent>
     </Dialog>
   );
diff --git a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx
index d2d7cc65f89..0848eb3b54d 100644
--- a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx
+++ b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx
@@ -1,25 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable react/no-unescaped-entities */
 import React from "react";
-import { Select } from "antd";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Ban, Info, Plus, Settings, Trash2 } from "lucide-react";
-import {
-  callbackInfo,
-  callback_map,
-  mapDisplayToInternalNames,
-} from "../callback_info_helpers";
-import NumericalInput from "../shared/numerical_input";
-
-const { Option } = Select;
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Ban, Info, Plus, Settings, Trash2, X } from "lucide-react";
+import { callbackInfo, callback_map, mapDisplayToInternalNames } from "../callback_info_helpers";
 
 interface LoggingConfig {
   callback_name: string;
@@ -34,6 +23,33 @@ interface LoggingSettingsProps {
   onDisabledCallbacksChange?: (disabledCallbacks: string[]) => void;
 }
 
+function CallbackLogo({ name, size = "sm" }: { name: string; size?: "sm" | "md" }) {
+  const logo = callbackInfo[name]?.logo;
+  const dims = size === "md" ? "w-5 h-5" : "w-4 h-4";
+  if (!logo) {
+    return (
+      <div className={`${dims} rounded-full bg-muted flex items-center justify-center text-xs`}>{name.charAt(0)}</div>
+    );
+  }
+  return (
+    <img
+      src={logo}
+      alt={name}
+      className={`${dims} object-contain`}
+      onError={(e) => {
+        const target = e.target as HTMLImageElement;
+        const parent = target.parentElement;
+        if (parent) {
+          const fallbackDiv = document.createElement("div");
+          fallbackDiv.className = `${dims} rounded-full bg-muted flex items-center justify-center text-xs`;
+          fallbackDiv.textContent = name.charAt(0);
+          parent.replaceChild(fallbackDiv, target);
+        }
+      }}
+    />
+  );
+}
+
 const LoggingSettings: React.FC<LoggingSettingsProps> = ({
   value = [],
   onChange,
@@ -53,11 +69,21 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
   };
 
   const handleDisabledCallbacksChange = (newDisabledCallbacks: string[]) => {
-    // Map display names to internal callback values
     const mappedDisabledCallbacks = mapDisplayToInternalNames(newDisabledCallbacks);
     onDisabledCallbacksChange?.(mappedDisabledCallbacks);
   };
 
+  const addDisabledCallback = (name: string) => {
+    if (!name || disabledCallbacks.includes(name)) return;
+    handleDisabledCallbacksChange([...disabledCallbacks, name]);
+  };
+
+  const removeDisabledCallback = (name: string) => {
+    handleDisabledCallbacksChange(disabledCallbacks.filter((n) => n !== name));
+  };
+
+  const remainingDisabledOptions = allCallbacks.filter((c) => !disabledCallbacks.includes(c));
+
   const addLoggingConfig = () => {
     const newConfig: LoggingConfig = {
       callback_name: "",
@@ -80,7 +106,6 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
   ) => {
     const updatedConfigs = [...value];
     if (field === "callback_name") {
-      // Convert display name to callback value and reset callback_vars when callback changes
       const callbackValue = callback_map[newValue] || newValue;
       updatedConfigs[index] = {
         ...updatedConfigs[index],
@@ -111,8 +136,7 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
   const renderDynamicParams = (config: LoggingConfig, configIndex: number) => {
     if (!config.callback_name) return null;
 
-    // Find the display name for the callback
-    const callbackDisplayName = Object.entries(callback_map).find(([_, value]) => value === config.callback_name)?.[0];
+    const callbackDisplayName = Object.entries(callback_map).find(([_, v]) => v === config.callback_name)?.[0];
 
     if (!callbackDisplayName) return null;
 
@@ -126,9 +150,7 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
           <div className="w-3 h-3 bg-blue-100 dark:bg-blue-950/30 rounded-full flex items-center justify-center">
             <div className="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
           </div>
-          <span className="text-sm font-medium text-foreground">
-            Integration Parameters
-          </span>
+          <span className="text-sm font-medium text-foreground">Integration Parameters</span>
         </div>
         <div className="grid grid-cols-1 gap-4">
           {Object.entries(dynamicParams).map(([paramName, paramType]) => (
@@ -141,8 +163,7 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
                       <Info className="h-3 w-3 text-muted-foreground cursor-help" />
                     </TooltipTrigger>
                     <TooltipContent>
-                      Environment variable reference recommended:
-                      os.environ/{paramName.toUpperCase()}
+                      Environment variable reference recommended: os.environ/{paramName.toUpperCase()}
                     </TooltipContent>
                   </Tooltip>
                 </TooltipProvider>
@@ -158,29 +179,23 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
                 )}
               </label>
               {paramType === "number" && (
-                <span className="text-xs text-muted-foreground">
-                  Value must be between 0 and 1
-                </span>
+                <span className="text-xs text-muted-foreground">Value must be between 0 and 1</span>
               )}
               {paramType === "number" ? (
-                <NumericalInput
+                <Input
+                  type="number"
                   step={0.01}
-                  width={400}
                   placeholder={`os.environ/${paramName.toUpperCase()}`}
                   value={config.callback_vars[paramName] || ""}
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  onChange={(e: any) =>
-                    updateCallbackVar(configIndex, paramName, e.target.value)
-                  }
+                  onChange={(e) => updateCallbackVar(configIndex, paramName, e.target.value)}
+                  onWheel={(event) => (event.currentTarget as HTMLInputElement).blur()}
                 />
               ) : (
                 <Input
                   type={paramType === "password" ? "password" : "text"}
                   placeholder={`os.environ/${paramName.toUpperCase()}`}
                   value={config.callback_vars[paramName] || ""}
-                  onChange={(e) =>
-                    updateCallbackVar(configIndex, paramName, e.target.value)
-                  }
+                  onChange={(e) => updateCallbackVar(configIndex, paramName, e.target.value)}
                 />
               )}
             </div>
@@ -196,70 +211,59 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
       <div className="space-y-4">
         <div className="flex items-center space-x-2">
           <Ban className="w-5 h-5 text-destructive" />
-          <span className="text-base font-semibold text-foreground">
-            Disabled Callbacks
-          </span>
+          <span className="text-base font-semibold text-foreground">Disabled Callbacks</span>
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Info className="h-4 w-4 text-muted-foreground cursor-help" />
               </TooltipTrigger>
               <TooltipContent className="max-w-xs">
-                Select callbacks to disable for this key. Disabled callbacks
-                will not receive any logging data.
+                Select callbacks to disable for this key. Disabled callbacks will not receive any logging data.
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
         </div>
 
         <div className="space-y-2">
-          <label className="text-sm font-medium text-foreground">
-            Disabled Callbacks
-          </label>
-          <Select
-            mode="multiple"
-            placeholder="Select callbacks to disable"
-            value={disabledCallbacks}
-            onChange={handleDisabledCallbacksChange}
-            style={{ width: "100%" }}
-            optionLabelProp="label"
-          >
-            {allCallbacks.map((callbackName) => {
-              const logo = callbackInfo[callbackName]?.logo;
-              return (
-                <Option
-                  key={callbackName}
-                  value={callbackName}
-                  label={callbackName}
-                >
-                  <div className="flex items-center space-x-2">
-                    {logo && (
-                      <img
-                        src={logo}
-                        alt={callbackName}
-                        className="w-4 h-4 object-contain"
-                        onError={(e) => {
-                          const target = e.target as HTMLImageElement;
-                          const parent = target.parentElement;
-                          if (parent) {
-                            const fallbackDiv = document.createElement("div");
-                            fallbackDiv.className =
-                              "w-4 h-4 rounded-full bg-muted flex items-center justify-center text-xs";
-                            fallbackDiv.textContent = callbackName.charAt(0);
-                            parent.replaceChild(fallbackDiv, target);
-                          }
-                        }}
-                      />
-                    )}
-                    <span>{callbackName}</span>
-                  </div>
-                </Option>
-              );
-            })}
+          <label className="text-sm font-medium text-foreground">Disabled Callbacks</label>
+          <Select value="" onValueChange={(v) => addDisabledCallback(v)}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select callbacks to disable" />
+            </SelectTrigger>
+            <SelectContent>
+              {remainingDisabledOptions.length === 0 ? (
+                <div className="py-2 px-3 text-sm text-muted-foreground">No more callbacks available</div>
+              ) : (
+                remainingDisabledOptions.map((callbackName) => (
+                  <SelectItem key={callbackName} value={callbackName}>
+                    <div className="flex items-center space-x-2">
+                      <CallbackLogo name={callbackName} />
+                      <span>{callbackName}</span>
+                    </div>
+                  </SelectItem>
+                ))
+              )}
+            </SelectContent>
           </Select>
+          {disabledCallbacks.length > 0 && (
+            <div className="flex flex-wrap gap-1 pt-1">
+              {disabledCallbacks.map((name) => (
+                <Badge key={name} variant="secondary" className="flex items-center gap-1">
+                  {name}
+                  <button
+                    type="button"
+                    onClick={() => removeDisabledCallback(name)}
+                    className="inline-flex items-center justify-center rounded-full hover:bg-muted-foreground/20"
+                    aria-label={`Remove ${name}`}
+                  >
+                    <X size={12} />
+                  </button>
+                </Badge>
+              ))}
+            </div>
+          )}
           <div className="text-xs text-muted-foreground">
-            Select callbacks that should be disabled for this key. These
-            callbacks will not receive any logging data.
+            Select callbacks that should be disabled for this key. These callbacks will not receive any logging data.
           </div>
         </div>
       </div>
@@ -270,17 +274,13 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
       <div className="flex justify-between items-center">
         <div className="flex items-center space-x-2">
           <Settings className="w-5 h-5 text-blue-500" />
-          <span className="text-base font-semibold text-foreground">
-            Logging Integrations
-          </span>
+          <span className="text-base font-semibold text-foreground">Logging Integrations</span>
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Info className="h-4 w-4 text-muted-foreground cursor-help" />
               </TooltipTrigger>
-              <TooltipContent>
-                Configure callback logging integrations for this team.
-              </TooltipContent>
+              <TooltipContent>Configure callback logging integrations for this team.</TooltipContent>
             </Tooltip>
           </TooltipProvider>
         </div>
@@ -299,9 +299,8 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
       <div className="space-y-4">
         {value.map((config, index) => {
           const callbackDisplayName = config.callback_name
-            ? Object.entries(callback_map).find(([_, value]) => value === config.callback_name)?.[0]
+            ? Object.entries(callback_map).find(([_, v]) => v === config.callback_name)?.[0]
             : undefined;
-          const logoUrl = callbackDisplayName ? callbackInfo[callbackDisplayName]?.logo : null;
 
           return (
             <Card
@@ -310,16 +309,8 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
             >
               <div className="flex justify-between items-start mb-4">
                 <div className="flex items-center space-x-2">
-                  {logoUrl && (
-                    <img
-                      src={logoUrl}
-                      alt={callbackDisplayName}
-                      className="w-5 h-5 object-contain"
-                    />
-                  )}
-                  <span className="text-sm font-medium">
-                    {callbackDisplayName || "New Integration"} Configuration
-                  </span>
+                  {callbackDisplayName && <CallbackLogo name={callbackDisplayName} size="md" />}
+                  <span className="text-sm font-medium">{callbackDisplayName || "New Integration"} Configuration</span>
                 </div>
                 <Button
                   variant="ghost"
@@ -335,85 +326,56 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
               <div className="space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-foreground">
-                      Integration Type
-                    </label>
+                    <label className="text-sm font-medium text-foreground">Integration Type</label>
                     <Select
-                      value={callbackDisplayName}
-                      placeholder="Select integration"
-                      onChange={(value) =>
-                        updateLoggingConfig(index, "callback_name", value)
-                      }
-                      className="w-full"
-                      optionLabelProp="label"
+                      value={callbackDisplayName || ""}
+                      onValueChange={(v) => updateLoggingConfig(index, "callback_name", v)}
                     >
-                      {supportedCallbacks.map((callbackName) => {
-                        const logo = callbackInfo[callbackName]?.logo;
-                        return (
-                          <Option
-                            key={callbackName}
-                            value={callbackName}
-                            label={callbackName}
-                          >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select integration" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {supportedCallbacks.map((callbackName) => (
+                          <SelectItem key={callbackName} value={callbackName}>
                             <div className="flex items-center space-x-2">
-                              {logo && (
-                                <img
-                                  src={logo}
-                                  alt={callbackName}
-                                  className="w-4 h-4 object-contain"
-                                  onError={(e) => {
-                                    const target =
-                                      e.target as HTMLImageElement;
-                                    const parent = target.parentElement;
-                                    if (parent) {
-                                      const fallbackDiv =
-                                        document.createElement("div");
-                                      fallbackDiv.className =
-                                        "w-4 h-4 rounded-full bg-muted flex items-center justify-center text-xs";
-                                      fallbackDiv.textContent =
-                                        callbackName.charAt(0);
-                                      parent.replaceChild(fallbackDiv, target);
-                                    }
-                                  }}
-                                />
-                              )}
+                              <CallbackLogo name={callbackName} />
                               <span>{callbackName}</span>
                             </div>
-                          </Option>
-                        );
-                      })}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
                     </Select>
                   </div>
 
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-foreground">
-                      Event Type
-                    </label>
+                    <label className="text-sm font-medium text-foreground">Event Type</label>
                     <Select
                       value={config.callback_type}
-                      onChange={(value) =>
-                        updateLoggingConfig(index, "callback_type", value)
-                      }
-                      className="w-full"
+                      onValueChange={(v) => updateLoggingConfig(index, "callback_type", v)}
                     >
-                      <Option value="success">
-                        <div className="flex items-center space-x-2">
-                          <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
-                          <span>Success Only</span>
-                        </div>
-                      </Option>
-                      <Option value="failure">
-                        <div className="flex items-center space-x-2">
-                          <div className="w-2 h-2 bg-red-500 rounded-full"></div>
-                          <span>Failure Only</span>
-                        </div>
-                      </Option>
-                      <Option value="success_and_failure">
-                        <div className="flex items-center space-x-2">
-                          <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
-                          <span>Success & Failure</span>
-                        </div>
-                      </Option>
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="success">
+                          <div className="flex items-center space-x-2">
+                            <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
+                            <span>Success Only</span>
+                          </div>
+                        </SelectItem>
+                        <SelectItem value="failure">
+                          <div className="flex items-center space-x-2">
+                            <div className="w-2 h-2 bg-red-500 rounded-full"></div>
+                            <span>Failure Only</span>
+                          </div>
+                        </SelectItem>
+                        <SelectItem value="success_and_failure">
+                          <div className="flex items-center space-x-2">
+                            <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                            <span>Success & Failure</span>
+                          </div>
+                        </SelectItem>
+                      </SelectContent>
                     </Select>
                   </div>
                 </div>
@@ -428,9 +390,7 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
       {value.length === 0 && (
         <div className="text-center py-12 text-muted-foreground border-2 border-dashed border-border rounded-lg bg-muted/50">
           <Settings className="w-12 h-12 text-muted-foreground/60 mb-3 mx-auto" />
-          <div className="text-base font-medium mb-1">
-            No logging integrations configured
-          </div>
+          <div className="text-base font-medium mb-1">No logging integrations configured</div>
           <div className="text-sm text-muted-foreground/80">
             Click "Add Integration" to configure logging for this team
           </div>
diff --git a/ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.tsx b/ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.tsx
index 553e2ee28a8..a2fd46b5150 100644
--- a/ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.tsx
+++ b/ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.tsx
@@ -2,8 +2,15 @@
 
 "use client";
 import { useKeys } from "@/app/(dashboard)/hooks/keys/useKeys";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { formatNumberWithCommas } from "@/utils/dataUtils";
-import { ChevronDown as ChevronDownIcon, ChevronRight as ChevronRightIcon, ChevronUp as ChevronUpIcon, ChevronsUpDown as SwitchVerticalIcon } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { ChevronDown, ChevronRight, ChevronUp, ChevronsUpDown, Info } from "lucide-react";
 import {
   ColumnDef,
   flexRender,
@@ -12,30 +19,14 @@ import {
   SortingState,
   useReactTable,
 } from "@tanstack/react-table";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import {
-  Badge,
-  Button,
-  Icon,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-  Text,
-} from "@tremor/react";
-import { Info as InfoCircleOutlined } from "lucide-react";
-import { Popover, Skeleton, Tooltip } from "antd";
+import { useQuery } from "@tanstack/react-query";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { fetchTeamFilterOptions } from "../key_team_helpers/filter_helpers";
 import { getModelDisplayName } from "../key_team_helpers/fetch_available_models_team_key";
 import { KeyResponse, Team } from "../key_team_helpers/key_list";
 import FilterComponent, { FilterOption } from "../molecules/filter";
 import { Organization } from "../networking";
 import KeyInfoView from "../templates/key_info_view";
-import { useQuery } from "@tanstack/react-query";
-import { fetchTeamFilterOptions } from "../key_team_helpers/filter_helpers";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 interface TeamVirtualKeysTableProps {
   teamId: string;
@@ -43,6 +34,25 @@ interface TeamVirtualKeysTableProps {
   organization: Organization | null;
 }
 
+/**
+ * Cell that renders a truncated value with a tooltip showing the full value.
+ */
+function TruncatedCell({ value, width }: { value: string | null | undefined; width: number }) {
+  const displayValue = value ?? "-";
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="font-mono text-xs truncate block" style={{ maxWidth: width, overflow: "hidden" }}>
+            {displayValue}
+          </span>
+        </TooltipTrigger>
+        {value ? <TooltipContent>{displayValue}</TooltipContent> : null}
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
 /**
  * TeamVirtualKeysTable – variant of VirtualKeysTable scoped to a single team.
  * Displays all virtual keys belonging to the team with same format and styling.
@@ -50,9 +60,7 @@ interface TeamVirtualKeysTableProps {
 export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVirtualKeysTableProps) {
   const { accessToken } = useAuthorized();
   const [selectedKey, setSelectedKey] = useState<KeyResponse | null>(null);
-  const [sorting, setSorting] = useState<SortingState>([
-    { id: "created_at", desc: true },
-  ]);
+  const [sorting, setSorting] = useState<SortingState>([{ id: "created_at", desc: true }]);
   const [tablePagination, setTablePagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 50,
@@ -173,9 +181,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
           const { organizationIds } = teamFilterOptions;
           if (!organizationIds.length) return [];
           const lower = searchText.toLowerCase();
-          const filtered = lower
-            ? organizationIds.filter((id) => id.toLowerCase().includes(lower))
-            : organizationIds;
+          const filtered = lower ? organizationIds.filter((id) => id.toLowerCase().includes(lower)) : organizationIds;
           return filtered.map((id) => ({ label: id, value: id }));
         },
       },
@@ -186,9 +192,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
         searchFn: async (searchText: string) => {
           const { keyAliases } = teamFilterOptions;
           const lower = searchText.toLowerCase();
-          const filtered = lower
-            ? keyAliases.filter((alias) => alias.toLowerCase().includes(lower))
-            : keyAliases;
+          const filtered = lower ? keyAliases.filter((alias) => alias.toLowerCase().includes(lower)) : keyAliases;
           return filtered.map((alias) => ({ label: alias, value: alias }));
         },
       },
@@ -200,10 +204,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
           const { userIds } = teamFilterOptions;
           const lower = searchText.toLowerCase();
           const filtered = lower
-            ? userIds.filter(
-                (u) =>
-                  u.id.toLowerCase().includes(lower) || u.email.toLowerCase().includes(lower),
-              )
+            ? userIds.filter((u) => u.id.toLowerCase().includes(lower) || u.email.toLowerCase().includes(lower))
             : userIds;
           return filtered.map((u) => ({
             label: u.email ? `${u.id} (${u.email})` : u.id,
@@ -227,17 +228,21 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
           const value = info.getValue() as string;
           const width = info.cell.column.getSize();
           return (
-            <Tooltip title={value}>
-              <Button
-                size="xs"
-                variant="light"
-                className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate block"
-                style={{ maxWidth: width, overflow: "hidden" }}
-                onClick={() => setSelectedKey(info.row.original)}
-              >
-                {value ?? "-"}
-              </Button>
-            </Tooltip>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className="font-mono text-primary bg-primary/10 hover:bg-primary/20 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate block rounded"
+                    style={{ maxWidth: width }}
+                    onClick={() => setSelectedKey(info.row.original)}
+                  >
+                    {value ?? "-"}
+                  </button>
+                </TooltipTrigger>
+                {value ? <TooltipContent>{value}</TooltipContent> : null}
+              </Tooltip>
+            </TooltipProvider>
           );
         },
       },
@@ -247,20 +252,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
         header: "Key Alias",
         size: 150,
         enableSorting: true,
-        cell: (info) => {
-          const value = info.getValue() as string;
-          const width = info.cell.column.getSize();
-          return (
-            <Tooltip title={value}>
-              <span
-                className="font-mono text-xs truncate block"
-                style={{ maxWidth: width, overflow: "hidden" }}
-              >
-                {value ?? "-"}
-              </span>
-            </Tooltip>
-          );
-        },
+        cell: (info) => <TruncatedCell value={info.getValue() as string} width={info.cell.column.getSize()} />,
       },
       {
         id: "key_name",
@@ -286,18 +278,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
         enableSorting: false,
         cell: (info) => {
           const user = info.getValue() as { user_email?: string } | undefined;
-          const value = user?.user_email;
-          const width = info.cell.column.getSize();
-          return (
-            <Tooltip title={value}>
-              <span
-                className="font-mono text-xs truncate block"
-                style={{ maxWidth: width, overflow: "hidden" }}
-              >
-                {value ?? "-"}
-              </span>
-            </Tooltip>
-          );
+          return <TruncatedCell value={user?.user_email} width={info.cell.column.getSize()} />;
         },
       },
       {
@@ -309,17 +290,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
         cell: (info) => {
           const userId = info.getValue() as string | null;
           const displayValue = userId === "default_user_id" ? "Default Proxy Admin" : userId;
-          const width = info.cell.column.getSize();
-          return (
-            <Tooltip title={displayValue}>
-              <span
-                className="font-mono text-xs truncate block"
-                style={{ maxWidth: width, overflow: "hidden" }}
-              >
-                {displayValue ?? "-"}
-              </span>
-            </Tooltip>
-          );
+          return <TruncatedCell value={displayValue} width={info.cell.column.getSize()} />;
         },
       },
       {
@@ -342,17 +313,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
         cell: (info) => {
           const value = info.getValue() as string | null;
           const displayValue = value === "default_user_id" ? "Default Proxy Admin" : value;
-          const width = info.cell.column.getSize();
-          return (
-            <Tooltip title={displayValue}>
-              <span
-                className="font-mono text-xs truncate block"
-                style={{ maxWidth: width, overflow: "hidden" }}
-              >
-                {displayValue ?? "-"}
-              </span>
-            </Tooltip>
-          );
+          return <TruncatedCell value={displayValue} width={info.cell.column.getSize()} />;
         },
       },
       {
@@ -372,11 +333,15 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
         header: () => (
           <span className="flex items-center gap-1">
             Last Active
-            <Popover
-              content="This is a new field and is not backfilled. Only new key usage will update this value."
-              trigger="hover"
-            >
-              <InfoCircleOutlined className="text-gray-400 text-xs cursor-help" />
+            <Popover>
+              <PopoverTrigger asChild>
+                <button type="button" className="inline-flex items-center" aria-label="Last Active info">
+                  <Info className="h-3 w-3 text-muted-foreground cursor-help" />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent className="text-xs max-w-xs">
+                This is a new field and is not backfilled. Only new key usage will update this value.
+              </PopoverContent>
             </Popover>
           </span>
         ),
@@ -387,9 +352,19 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
           if (!value) return "Unknown";
           const date = new Date(value as string);
           return (
-            <Tooltip title={date.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "long" })}>
-              <span>{date.toLocaleDateString()}</span>
-            </Tooltip>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span>{date.toLocaleDateString()}</span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {date.toLocaleString(undefined, {
+                    dateStyle: "medium",
+                    timeStyle: "long",
+                  })}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           );
         },
       },
@@ -443,80 +418,74 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
         enableSorting: false,
         cell: (info) => {
           const models = info.getValue() as string[];
+          if (!Array.isArray(models)) return null;
+          if (models.length === 0) {
+            return (
+              <Badge variant="destructive" className="mb-1">
+                All Proxy Models
+              </Badge>
+            );
+          }
           return (
             <div className="flex flex-col py-2">
-              {Array.isArray(models) ? (
-                <div className="flex flex-col">
-                  {models.length === 0 ? (
-                    <Badge size="xs" className="mb-1" color="red">
-                      <Text>All Proxy Models</Text>
+              <div className="flex items-start">
+                {models.length > 3 && (
+                  <button
+                    type="button"
+                    className="cursor-pointer mr-1"
+                    onClick={() =>
+                      setExpandedAccordions((prev) => ({
+                        ...prev,
+                        [info.row.id]: !prev[info.row.id],
+                      }))
+                    }
+                    aria-label={expandedAccordions[info.row.id] ? "Collapse" : "Expand"}
+                  >
+                    {expandedAccordions[info.row.id] ? (
+                      <ChevronDown className="h-3 w-3" />
+                    ) : (
+                      <ChevronRight className="h-3 w-3" />
+                    )}
+                  </button>
+                )}
+                <div className="flex flex-wrap gap-1">
+                  {models.slice(0, 3).map((model, index) =>
+                    model === "all-proxy-models" ? (
+                      <Badge key={index} variant="destructive">
+                        All Proxy Models
+                      </Badge>
+                    ) : (
+                      <Badge key={index} variant="secondary">
+                        {model.length > 30
+                          ? `${getModelDisplayName(model).slice(0, 30)}...`
+                          : getModelDisplayName(model)}
+                      </Badge>
+                    ),
+                  )}
+                  {models.length > 3 && !expandedAccordions[info.row.id] && (
+                    <Badge variant="outline" className="cursor-pointer">
+                      +{models.length - 3} {models.length - 3 === 1 ? "more model" : "more models"}
                     </Badge>
-                  ) : (
-                    <>
-                      <div className="flex items-start">
-                        {models.length > 3 && (
-                          <div>
-                            <Icon
-                              icon={expandedAccordions[info.row.id] ? ChevronDownIcon : ChevronRightIcon}
-                              className="cursor-pointer"
-                              size="xs"
-                              onClick={() =>
-                                setExpandedAccordions((prev) => ({
-                                  ...prev,
-                                  [info.row.id]: !prev[info.row.id],
-                                }))
-                              }
-                            />
-                          </div>
-                        )}
-                        <div className="flex flex-wrap gap-1">
-                          {models.slice(0, 3).map((model, index) =>
-                            model === "all-proxy-models" ? (
-                              <Badge key={index} size="xs" color="red">
-                                <Text>All Proxy Models</Text>
-                              </Badge>
-                            ) : (
-                              <Badge key={index} size="xs" color="blue">
-                                <Text>
-                                  {model.length > 30
-                                    ? `${getModelDisplayName(model).slice(0, 30)}...`
-                                    : getModelDisplayName(model)}
-                                </Text>
-                              </Badge>
-                            ),
-                          )}
-                          {models.length > 3 && !expandedAccordions[info.row.id] && (
-                            <Badge size="xs" color="gray" className="cursor-pointer">
-                              <Text>
-                                +{models.length - 3} {models.length - 3 === 1 ? "more model" : "more models"}
-                              </Text>
-                            </Badge>
-                          )}
-                          {expandedAccordions[info.row.id] && (
-                            <div className="flex flex-wrap gap-1">
-                              {models.slice(3).map((model, index) =>
-                                model === "all-proxy-models" ? (
-                                  <Badge key={index + 3} size="xs" color="red">
-                                    <Text>All Proxy Models</Text>
-                                  </Badge>
-                                ) : (
-                                  <Badge key={index + 3} size="xs" color="blue">
-                                    <Text>
-                                      {model.length > 30
-                                        ? `${getModelDisplayName(model).slice(0, 30)}...`
-                                        : getModelDisplayName(model)}
-                                    </Text>
-                                  </Badge>
-                                ),
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </>
+                  )}
+                  {expandedAccordions[info.row.id] && (
+                    <div className="flex flex-wrap gap-1">
+                      {models.slice(3).map((model, index) =>
+                        model === "all-proxy-models" ? (
+                          <Badge key={index + 3} variant="destructive">
+                            All Proxy Models
+                          </Badge>
+                        ) : (
+                          <Badge key={index + 3} variant="secondary">
+                            {model.length > 30
+                              ? `${getModelDisplayName(model).slice(0, 30)}...`
+                              : getModelDisplayName(model)}
+                          </Badge>
+                        ),
+                      )}
+                    </div>
                   )}
                 </div>
-              ) : null}
+              </div>
             </div>
           );
         },
@@ -542,8 +511,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
 
   const handleSortingChange = useCallback(
     (updaterOrValue: React.SetStateAction<SortingState>) => {
-      const newSorting =
-        typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
+      const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
       setSorting(newSorting);
       if (newSorting?.length > 0) {
         const sortState = newSorting[0];
@@ -599,35 +567,37 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
           <div className="flex items-center justify-end w-full mb-4">
             <div className="inline-flex items-center gap-2">
               {isLoading || isFetching ? (
-                <Skeleton.Node active style={{ width: 74, height: 20 }} />
+                <Skeleton className="h-5 w-[74px]" />
               ) : (
-                <span className="text-sm text-gray-700">
+                <span className="text-sm text-muted-foreground">
                   Page {pageIndex + 1} of {table.getPageCount()}
                 </span>
               )}
 
               {isLoading || isFetching ? (
-                <Skeleton.Button active size="small" style={{ width: 84, height: 30 }} />
+                <Skeleton className="h-8 w-[84px]" />
               ) : (
-                <button
+                <Button
+                  variant="outline"
+                  size="sm"
                   onClick={() => table.previousPage()}
                   disabled={isLoading || isFetching || !table.getCanPreviousPage()}
-                  className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   Previous
-                </button>
+                </Button>
               )}
 
               {isLoading || isFetching ? (
-                <Skeleton.Button active size="small" style={{ width: 58, height: 30 }} />
+                <Skeleton className="h-8 w-[58px]" />
               ) : (
-                <button
+                <Button
+                  variant="outline"
+                  size="sm"
                   onClick={() => table.nextPage()}
                   disabled={isLoading || isFetching || !table.getCanNextPage()}
-                  className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   Next
-                </button>
+                </Button>
               )}
             </div>
           </div>
@@ -635,16 +605,16 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
             <div className="rounded-lg custom-border relative">
               <div className="overflow-x-auto">
                 <Table className="[&_td]:py-0.5 [&_th]:py-1" style={{ width: table.getCenterTotalSize() }}>
-                  <TableHead>
+                  <TableHeader>
                     {table.getHeaderGroups().map((headerGroup) => (
                       <TableRow key={headerGroup.id}>
                         {headerGroup.headers.map((header) => (
-                          <TableHeaderCell
+                          <TableHead
                             key={header.id}
                             data-header-id={header.id}
-                            className={`py-1 h-8 relative hover:bg-gray-50 ${
+                            className={`py-1 h-8 relative hover:bg-muted ${
                               header.id === "actions"
-                                ? "sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)]"
+                                ? "sticky right-0 bg-background shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)]"
                                 : ""
                             }`}
                             style={{
@@ -653,23 +623,15 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
                               cursor: header.column.getCanSort() ? "pointer" : "default",
                             }}
                             onMouseEnter={() => {
-                              const resizer = document.querySelector(
-                                `[data-header-id="${header.id}"] .resizer`,
-                              );
+                              const resizer = document.querySelector(`[data-header-id="${header.id}"] .resizer`);
                               if (resizer) (resizer as HTMLElement).style.opacity = "0.5";
                             }}
                             onMouseLeave={() => {
-                              const resizer = document.querySelector(
-                                `[data-header-id="${header.id}"] .resizer`,
-                              );
+                              const resizer = document.querySelector(`[data-header-id="${header.id}"] .resizer`);
                               if (resizer && !header.column.getIsResizing())
                                 (resizer as HTMLElement).style.opacity = "0";
                             }}
-                            onClick={
-                              header.column.getCanSort()
-                                ? header.column.getToggleSortingHandler()
-                                : undefined
-                            }
+                            onClick={header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined}
                           >
                             <div className="flex items-center justify-between gap-2">
                               <div className="flex items-center">
@@ -681,11 +643,11 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
                                 <div className="w-4">
                                   {header.column.getIsSorted() ? (
                                     {
-                                      asc: <ChevronUpIcon className="h-4 w-4 text-blue-500" />,
-                                      desc: <ChevronDownIcon className="h-4 w-4 text-blue-500" />,
+                                      asc: <ChevronUp className="h-4 w-4 text-primary" />,
+                                      desc: <ChevronDown className="h-4 w-4 text-primary" />,
                                     }[header.column.getIsSorted() as string]
                                   ) : (
-                                    <SwitchVerticalIcon className="h-4 w-4 text-gray-400" />
+                                    <ChevronsUpDown className="h-4 w-4 text-muted-foreground" />
                                   )}
                                 </div>
                               )}
@@ -702,7 +664,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
                                   top: 0,
                                   height: "100%",
                                   width: "5px",
-                                  background: header.column.getIsResizing() ? "#3b82f6" : "transparent",
+                                  background: header.column.getIsResizing() ? "hsl(var(--primary))" : "transparent",
                                   cursor: "col-resize",
                                   userSelect: "none",
                                   touchAction: "none",
@@ -710,16 +672,16 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
                                 }}
                               />
                             </div>
-                          </TableHeaderCell>
+                          </TableHead>
                         ))}
                       </TableRow>
                     ))}
-                  </TableHead>
+                  </TableHeader>
                   <TableBody>
                     {isLoading || isFetching ? (
                       <TableRow>
                         <TableCell colSpan={columns.length} className="h-8 text-center">
-                          <div className="text-center text-gray-500">
+                          <div className="text-center text-muted-foreground">
                             <p>Loading keys...</p>
                           </div>
                         </TableCell>
@@ -752,7 +714,7 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
                     ) : (
                       <TableRow>
                         <TableCell colSpan={columns.length} className="h-8 text-center">
-                          <div className="text-center text-gray-500">
+                          <div className="text-center text-muted-foreground">
                             <p>No keys found</p>
                           </div>
                         </TableCell>