diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index be7da7c2b42..ed72e784a35 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -4,11 +4,6 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupBaseForm.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    }
-  },
   "src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupEditModal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -33,7 +28,7 @@
       "count": 3
     },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "react-hooks/set-state-in-effect": {
       "count": 2
@@ -58,12 +53,6 @@
   "src/app/(dashboard)/agents/_components/agent_form_fields.tsx": {
     "local/filename-pascal-case": {
       "count": 1
-    },
-    "no-nested-ternary": {
-      "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 2
     }
   },
   "src/app/(dashboard)/agents/_components/agent_info.tsx": {
@@ -73,11 +62,8 @@
     "local/no-complex-jsx-arrow": {
       "count": 1
     },
-    "no-nested-ternary": {
-      "count": 1
-    },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "react-hooks/immutability": {
       "count": 1
@@ -94,20 +80,11 @@
   "src/app/(dashboard)/agents/_components/cost_config_fields.tsx": {
     "local/filename-pascal-case": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "src/app/(dashboard)/agents/_components/dynamic_agent_form_fields.tsx": {
     "local/filename-pascal-case": {
       "count": 1
-    },
-    "no-nested-ternary": {
-      "count": 2
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "src/app/(dashboard)/budgets/_components/budget_modal.tsx": {
@@ -115,7 +92,7 @@
       "count": 1
     },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "src/app/(dashboard)/budgets/_components/budget_panel.tsx": {
@@ -128,7 +105,7 @@
       "count": 1
     },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "src/app/(dashboard)/caching/_components/cache_dashboard.tsx": {
@@ -147,16 +124,6 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/caching/_components/cache_settings/CacheFormField.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/caching/_components/cache_settings/cacheSettingsFields.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/app/(dashboard)/caching/_components/cache_settings/index.tsx": {
     "local/filename-pascal-case": {
       "count": 1
@@ -165,22 +132,9 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/caching/_components/coordination_redis_settings/CoordinationRedisFormField.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/caching/_components/coordination_redis_settings/coordinationRedisFields.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/app/(dashboard)/caching/_components/coordination_redis_settings/index.tsx": {
     "local/filename-pascal-case": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "src/app/(dashboard)/caching/_components/response_time_indicator.tsx": {
@@ -383,7 +337,7 @@
       "count": 1
     },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "react-hooks/set-state-in-effect": {
       "count": 3
@@ -1204,18 +1158,7 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/projects/_components/ProjectModals/ProjectBaseForm.test.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/app/(dashboard)/projects/_components/ProjectModals/ProjectBaseForm.tsx": {
-    "local/no-complex-jsx-arrow": {
-      "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 2
-    },
     "react-hooks/set-state-in-effect": {
       "count": 2
     }
@@ -1286,7 +1229,7 @@
       "count": 3
     },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "react-hooks/set-state-in-effect": {
       "count": 2
@@ -1354,12 +1297,12 @@
       "count": 1
     },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "src/app/(dashboard)/tag-management/_components/components/CreateTagModal.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "src/app/(dashboard)/tag-management/_components/index.tsx": {
@@ -1475,9 +1418,6 @@
     "local/filename-pascal-case": {
       "count": 1
     },
-    "local/no-complex-jsx-arrow": {
-      "count": 1
-    },
     "no-restricted-imports": {
       "count": 1
     },
@@ -1645,11 +1585,6 @@
       "count": 1
     }
   },
-  "src/components/SSOModals.test.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/SSOModals.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1691,11 +1626,6 @@
       "count": 1
     }
   },
-  "src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.test.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.test.tsx": {
     "max-nested-callbacks": {
       "count": 1
@@ -2098,14 +2028,6 @@
       "count": 1
     }
   },
-  "src/components/common_components/KeyLifecycleSettings.tsx": {
-    "local/no-complex-jsx-arrow": {
-      "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/common_components/MetadataKeyValueFields.test.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2136,11 +2058,6 @@
       "count": 1
     }
   },
-  "src/components/common_components/RateLimitTypeFormItem.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/common_components/budget_duration_dropdown.tsx": {
     "local/filename-pascal-case": {
       "count": 1
@@ -3150,4 +3067,4 @@
       "count": 1
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx
index 34f6a879b1e..5e828537475 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx
@@ -3,10 +3,10 @@ import { Modal, Select, Steps, Tag } from "antd";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { toast } from "@/lib/toast";
 import { Logo } from "@/components/molecules/logo/Logo";
-import { Button } from "@tremor/react";
 import { CheckCircleFilled, KeyOutlined, RobotOutlined, AppstoreOutlined } from "@ant-design/icons";
 import CreatedKeyDisplay from "@/components/shared/CreatedKeyDisplay";
-import { Button as ShadButton } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
+import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Separator } from "@/components/ui/separator";
@@ -1025,9 +1025,9 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({ visible, onClose, accessTok
           <div className="mt-6 flex items-center justify-between border-t border-border pt-6">
             <div>
               {currentStep > 0 && currentStep < 4 && (
-                <ShadButton type="button" variant="outline" onClick={handleBack}>
+                <Button type="button" variant="outline" onClick={handleBack}>
                   ← Back
-                </ShadButton>
+                </Button>
               )}
             </div>
             <div className="flex gap-3">
@@ -1036,21 +1036,14 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({ visible, onClose, accessTok
                   Cancel
                 </Button>
               )}
-              {currentStep < 3 && (
-                <Button variant="primary" onClick={handleNext}>
-                  Next →
-                </Button>
-              )}
+              {currentStep < 3 && <Button onClick={handleNext}>Next →</Button>}
               {currentStep === 3 && (
-                <Button variant="primary" loading={isSubmitting} onClick={handleCreateAgent}>
+                <Button disabled={isSubmitting} aria-busy={isSubmitting} onClick={handleCreateAgent}>
+                  {isSubmitting && <UiLoadingSpinner className="size-4" />}
                   {isSubmitting ? "Creating..." : "Create Agent →"}
                 </Button>
               )}
-              {currentStep === 4 && (
-                <Button variant="primary" onClick={handleClose}>
-                  Done
-                </Button>
-              )}
+              {currentStep === 4 && <Button onClick={handleClose}>Done</Button>}
             </div>
           </div>
         </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.test.tsx
new file mode 100644
index 00000000000..0936b8e13db
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.test.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import AgentInfoView from "./agent_info";
+import * as networking from "@/components/networking";
+import type { Agent } from "@/components/agents/types";
+
+vi.mock("@/components/networking", () => ({
+  getAgentInfo: vi.fn(),
+  getAgentCreateMetadata: vi.fn(),
+  patchAgentCall: vi.fn(),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/keys/useKeys", () => ({
+  useKeys: () => ({ data: { keys: [] }, isLoading: false, refetch: vi.fn() }),
+}));
+
+vi.mock("./agent_card_discovery", () => ({
+  default: () => <div data-testid="agent-card-discovery" />,
+}));
+
+vi.mock("./agent_form_fields", () => ({
+  default: () => <div data-testid="agent-form-fields" />,
+  unmountedA2AFieldNames: () => [],
+}));
+
+const agent = {
+  agent_id: "agent-1",
+  agent_name: "support-agent",
+  agent_card_params: {
+    name: "Support Agent",
+    description: "Answers support questions",
+    url: "http://localhost:9999/",
+    version: "1.0.0",
+    protocolVersion: "1.0",
+    capabilities: { streaming: false },
+    skills: [],
+  },
+  tpm_limit: 100,
+} as unknown as Agent;
+
+describe("AgentInfoView settings", () => {
+  beforeEach(() => {
+    vi.mocked(networking.getAgentInfo).mockReset().mockResolvedValue(agent);
+    vi.mocked(networking.getAgentCreateMetadata).mockReset().mockResolvedValue([]);
+    vi.mocked(networking.patchAgentCall).mockReset().mockResolvedValue({});
+  });
+
+  it("submits the edited agent when Save Changes is pressed", async () => {
+    render(<AgentInfoView agentId="agent-1" onClose={vi.fn()} accessToken="sk-test" isAdmin={true} />);
+
+    fireEvent.click(await screen.findByRole("tab", { name: "Settings" }));
+    fireEvent.click(screen.getByRole("button", { name: "Edit Settings" }));
+
+    const tpmLimit = await screen.findByLabelText("TPM Limit");
+    fireEvent.change(tpmLimit, { target: { value: "42" } });
+
+    fireEvent.click(screen.getByRole("button", { name: /Save Changes/ }));
+
+    await waitFor(() => expect(networking.patchAgentCall).toHaveBeenCalledTimes(1));
+    const [token, agentId, payload] = vi.mocked(networking.patchAgentCall).mock.calls[0];
+    expect(token).toBe("sk-test");
+    expect(agentId).toBe("agent-1");
+    expect(payload.tpm_limit).toBe(42);
+  });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.tsx
index 88b4c3238fc..d37065317c2 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.tsx
@@ -1,15 +1,16 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Card, Title, Text, Button as TremorButton, Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
 import { Spin, Descriptions } from "antd";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { Field, FieldGroup, FieldLabel } from "@/components/shared/form/field";
 import { toast } from "@/lib/toast";
-import { ArrowLeftIcon } from "@heroicons/react/outline";
+import { ArrowLeft } from "lucide-react";
 import { getAgentInfo, patchAgentCall, getAgentCreateMetadata, AgentCreateInfo } from "@/components/networking";
 import { Agent } from "@/components/agents/types";
 import { KeyResponse } from "@/components/key_team_helpers/key_list";
@@ -46,6 +47,7 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({ agentId, onClose, accessT
   const agentKeys = keysData?.keys ?? [];
   const [isLoading, setIsLoading] = useState(true);
   const [isEditing, setIsEditing] = useState(false);
+  const [activeTab, setActiveTab] = useState("overview");
   const [isSaving, setIsSaving] = useState(false);
   const form = useForm<AgentFormValues>({ defaultValues: {} });
   const panels = useCollapsiblePanels([AGENT_FORM_CONFIG.basic.key]);
@@ -203,9 +205,9 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({ agentId, onClose, accessT
     return (
       <div className="p-4">
         <div className="text-center">Agent not found</div>
-        <TremorButton onClick={onClose} className="mt-4">
+        <Button onClick={onClose} className="mt-4">
           Back to Agents List
-        </TremorButton>
+        </Button>
       </div>
     );
   }
@@ -251,22 +253,29 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({ agentId, onClose, accessT
   return (
     <div className="p-4">
       <div>
-        <TremorButton icon={ArrowLeftIcon} variant="light" onClick={onClose} className="mb-4">
+        <Button variant="ghost" onClick={onClose} className="mb-4">
+          <ArrowLeft className="size-4" />
           Back to Agents
-        </TremorButton>
-        <Title>{agent.agent_name || "Unnamed Agent"}</Title>
-        <Text className="text-gray-500 font-mono">{agent.agent_id}</Text>
+        </Button>
+        <h1 className="text-2xl font-semibold">{agent.agent_name || "Unnamed Agent"}</h1>
+        <p className="text-sm text-gray-500 font-mono">{agent.agent_id}</p>
       </div>
 
-      <TabGroup>
-        <TabList className="mb-4">
-          <Tab key="overview">Overview</Tab>
-          {isAdmin ? <Tab key="settings">Settings</Tab> : <></>}
-        </TabList>
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList variant="line" className="mb-4 h-auto w-full justify-start rounded-none border-b p-0">
+          <TabsTrigger value="overview" className="flex-none rounded-none px-4 py-2">
+            Overview
+          </TabsTrigger>
+          {isAdmin && (
+            <TabsTrigger value="settings" className="flex-none rounded-none px-4 py-2">
+              Settings
+            </TabsTrigger>
+          )}
+        </TabsList>
 
-        <TabPanels>
+        <div>
           {/* Overview Panel */}
-          <TabPanel>
+          <TabsContent value="overview" keepMounted>
             <Descriptions bordered column={1}>
               <Descriptions.Item label="Agent ID">{agent.agent_id}</Descriptions.Item>
               <Descriptions.Item label="Agent Name">{agent.agent_name}</Descriptions.Item>
@@ -321,7 +330,7 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({ agentId, onClose, accessT
                 (agent.object_permission.mcp_tool_permissions &&
                   Object.keys(agent.object_permission.mcp_tool_permissions).length > 0)) && (
                 <div style={{ marginTop: 24 }}>
-                  <Title>MCP Tool Permissions</Title>
+                  <h3 className="text-lg font-medium">MCP Tool Permissions</h3>
                   <Descriptions bordered column={1} style={{ marginTop: 16 }}>
                     {agent.object_permission.mcp_servers && agent.object_permission.mcp_servers.length > 0 && (
                       <Descriptions.Item label="MCP Servers">
@@ -355,7 +364,7 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({ agentId, onClose, accessT
 
             {agent.agent_card_params?.skills && agent.agent_card_params.skills.length > 0 && (
               <div style={{ marginTop: 24 }}>
-                <Title>Skills</Title>
+                <h3 className="text-lg font-medium">Skills</h3>
                 <Descriptions bordered column={1} style={{ marginTop: 16 }}>
                   {agent.agent_card_params.skills.map((skill: any, index: number) => (
                     <Descriptions.Item label={skill.name || `Skill ${index + 1}`} key={index}>
@@ -381,23 +390,23 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({ agentId, onClose, accessT
                 </Descriptions>
               </div>
             )}
-          </TabPanel>
+          </TabsContent>
 
           {/* Settings Panel (only for admins) */}
           {isAdmin && (
-            <TabPanel>
-              <Card>
+            <TabsContent value="settings" keepMounted>
+              <Card className="block p-6">
                 <div className="flex justify-between items-center mb-4">
-                  <Title>Agent Settings</Title>
+                  <h3 className="text-lg font-medium">Agent Settings</h3>
                   {!isEditing && (
-                    <TremorButton
+                    <Button
                       onClick={() => {
                         setAppliedDiscoveredSelection(null);
                         setIsEditing(true);
                       }}
                     >
                       Edit Settings
-                    </TremorButton>
+                    </Button>
                   )}
                 </div>
 
@@ -430,7 +439,7 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({ agentId, onClose, accessT
                         )}
 
                         <Separator className="my-6" />
-                        <Title className="mb-4">Rate Limits</Title>
+                        <h3 className="text-lg font-medium mb-4">Rate Limits</h3>
                         <div className="grid grid-cols-2 gap-4">
                           {rateLimitField("tpm_limit", "TPM Limit")}
                           {rateLimitField("rpm_limit", "RPM Limit")}
@@ -452,8 +461,8 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({ agentId, onClose, accessT
                           >
                             Cancel
                           </Button>
-                          <Button type="submit" disabled={isSaving}>
-                            {isSaving && <UiLoadingSpinner />}
+                          <Button type="submit" disabled={isSaving} aria-busy={isSaving}>
+                            {isSaving && <UiLoadingSpinner className="size-4" />}
                             Save Changes
                           </Button>
                         </div>
@@ -461,13 +470,13 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({ agentId, onClose, accessT
                     </FormProvider>
                   </TooltipProvider>
                 ) : (
-                  <Text>Click &quot;Edit Settings&quot; to modify agent configuration.</Text>
+                  <p>Click &quot;Edit Settings&quot; to modify agent configuration.</p>
                 )}
               </Card>
-            </TabPanel>
+            </TabsContent>
           )}
-        </TabPanels>
-      </TabGroup>
+        </div>
+      </Tabs>
     </div>
   );
 };
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx
index eca1cf4df8a..320e0b5baef 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx
@@ -299,4 +299,30 @@ describe("Guardrail Info", () => {
     expect(secondCallArgs.litellm_params.patterns).toEqual(["new_pattern"]);
     expect(secondCallArgs.litellm_params.blocked_words).toEqual(["new_word"]);
   });
+
+  it("keeps the settings panel mounted while the overview tab is active", async () => {
+    vi.mocked(networking.getGuardrailInfo).mockResolvedValue({
+      guardrail_id: "123",
+      guardrail_name: "Test Guardrail",
+      litellm_params: { guardrail: "presidio", mode: "pre_call", default_on: true },
+      created_at: "2024-01-01T00:00:00Z",
+      updated_at: "2024-01-01T00:00:00Z",
+      guardrail_definition_location: "database",
+    });
+    vi.mocked(networking.getGuardrailUISettings).mockResolvedValue({
+      supported_entities: [],
+      supported_actions: [],
+      pii_entity_categories: [],
+      supported_modes: ["pre_call"],
+    });
+    vi.mocked(networking.getGuardrailProviderSpecificParams).mockResolvedValue({});
+
+    const { findByRole, getByRole, getByText } = render(
+      <GuardrailInfoView guardrailId="123" onClose={() => {}} accessToken="123" isAdmin={true} />,
+    );
+
+    expect(await findByRole("tab", { name: "Overview" })).toHaveAttribute("aria-selected", "true");
+    expect(getByRole("tab", { name: "Settings" })).toHaveAttribute("aria-selected", "false");
+    expect(getByText("Guardrail Settings")).toBeInTheDocument();
+  });
 });
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx
index f8d7bede021..caac09a1c83 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx
@@ -6,10 +6,11 @@ import {
 } from "@/components/networking";
 import { copyToClipboard as utilCopyToClipboard } from "@/utils/dataUtils";
 import { CodeOutlined, EyeInvisibleOutlined, InfoCircleOutlined, StopOutlined } from "@ant-design/icons";
-import { ArrowLeftIcon } from "@heroicons/react/outline";
-import { Badge, Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title } from "@tremor/react";
 import { Button as AntdButton, Tooltip } from "antd";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { ArrowLeft, CheckIcon, CopyIcon } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import React, { useCallback, useEffect, useLayoutEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "@/lib/toast";
@@ -509,12 +510,12 @@ const GuardrailInfoView: React.FC<GuardrailInfoProps> = ({ guardrailId, onClose,
   return (
     <div className="p-4">
       <div>
-        <AntdButton type="text" icon={<ArrowLeftIcon className="w-4 h-4" />} onClick={onClose} className="mb-4">
+        <AntdButton type="text" icon={<ArrowLeft className="w-4 h-4" />} onClick={onClose} className="mb-4">
           Back to Guardrails
         </AntdButton>
-        <Title>{guardrailData.guardrail_name || "Unnamed Guardrail"}</Title>
+        <h1 className="text-2xl font-semibold">{guardrailData.guardrail_name || "Unnamed Guardrail"}</h1>
         <div className="flex items-center cursor-pointer">
-          <Text className="text-muted-foreground font-mono">{guardrailData.guardrail_id}</Text>
+          <p className="text-muted-foreground font-mono">{guardrailData.guardrail_id}</p>
 
           <AntdButton
             type="text"
@@ -530,49 +531,55 @@ const GuardrailInfoView: React.FC<GuardrailInfoProps> = ({ guardrailId, onClose,
         </div>
       </div>
 
-      <TabGroup>
-        <TabList className="mb-4">
-          <Tab key="overview">Overview</Tab>
-          {isAdmin ? <Tab key="settings">Settings</Tab> : <></>}
-        </TabList>
+      <Tabs defaultValue="overview">
+        <TabsList variant="line" className="mb-4 h-auto w-full justify-start rounded-none border-b p-0">
+          <TabsTrigger value="overview" className="flex-none rounded-none px-4 py-2">
+            Overview
+          </TabsTrigger>
+          {isAdmin && (
+            <TabsTrigger value="settings" className="flex-none rounded-none px-4 py-2">
+              Settings
+            </TabsTrigger>
+          )}
+        </TabsList>
 
-        <TabPanels>
+        <div>
           {/* Overview Panel */}
-          <TabPanel>
-            <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-6">
-              <Card>
-                <Text>Provider</Text>
+          <TabsContent value="overview" keepMounted>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              <Card className="block p-6">
+                <p>Provider</p>
                 <div className="mt-2 flex items-center space-x-2">
                   <Logo src={logo} label={displayName} className="w-6 h-6" />
-                  <Title>{displayName}</Title>
+                  <h3 className="text-lg font-medium">{displayName}</h3>
                 </div>
               </Card>
 
-              <Card>
-                <Text>Mode</Text>
+              <Card className="block p-6">
+                <p>Mode</p>
                 <div className="mt-2">
-                  <Title>{guardrailData.litellm_params?.mode || "-"}</Title>
-                  <Badge color={guardrailData.litellm_params?.default_on ? "green" : "gray"}>
+                  <h3 className="text-lg font-medium">{guardrailData.litellm_params?.mode || "-"}</h3>
+                  <Badge variant={guardrailData.litellm_params?.default_on ? "secondary" : "outline"}>
                     {guardrailData.litellm_params?.default_on ? "Default On" : "Default Off"}
                   </Badge>
                 </div>
               </Card>
 
-              <Card>
-                <Text>Created At</Text>
+              <Card className="block p-6">
+                <p>Created At</p>
                 <div className="mt-2">
-                  <Title>{formatDate(guardrailData.created_at)}</Title>
-                  <Text>Last Updated: {formatDate(guardrailData.updated_at)}</Text>
+                  <h3 className="text-lg font-medium">{formatDate(guardrailData.created_at)}</h3>
+                  <p>Last Updated: {formatDate(guardrailData.updated_at)}</p>
                 </div>
               </Card>
-            </Grid>
+            </div>
 
             {guardrailData.litellm_params?.pii_entities_config &&
               Object.keys(guardrailData.litellm_params.pii_entities_config).length > 0 && (
-                <Card className="mt-6">
+                <Card className="block mt-6 p-6">
                   <div className="flex justify-between items-center">
-                    <Text className="font-medium">PII Protection</Text>
-                    <Badge color="blue">
+                    <p className="font-medium">PII Protection</p>
+                    <Badge variant="secondary">
                       {Object.keys(guardrailData.litellm_params.pii_entities_config).length} PII entities configured
                     </Badge>
                   </div>
@@ -581,18 +588,18 @@ const GuardrailInfoView: React.FC<GuardrailInfoProps> = ({ guardrailId, onClose,
 
             {guardrailData.litellm_params?.pii_entities_config &&
               Object.keys(guardrailData.litellm_params.pii_entities_config).length > 0 && (
-                <Card className="mt-6">
-                  <Text className="mb-4 text-lg font-semibold">PII Entity Configuration</Text>
+                <Card className="block mt-6 p-6">
+                  <p className="mb-4 text-lg font-semibold">PII Entity Configuration</p>
                   <div className="border rounded-lg overflow-hidden shadow-xs">
                     <div className="bg-muted px-5 py-3 border-b flex">
-                      <Text className="flex-1 font-semibold text-foreground">Entity Type</Text>
-                      <Text className="flex-1 font-semibold text-foreground">Configuration</Text>
+                      <p className="flex-1 font-semibold text-foreground">Entity Type</p>
+                      <p className="flex-1 font-semibold text-foreground">Configuration</p>
                     </div>
                     <div className="max-h-[400px] overflow-y-auto">
                       {Object.entries(guardrailData.litellm_params?.pii_entities_config).map(([key, value]) => (
                         <div key={key} className="px-5 py-3 flex border-b hover:bg-muted/50 transition-colors">
-                          <Text className="flex-1 font-medium text-foreground">{key}</Text>
-                          <Text className="flex-1">
+                          <p className="flex-1 font-medium text-foreground">{key}</p>
+                          <p className="flex-1">
                             <span
                               className={`inline-flex items-center gap-1.5 ${
                                 value === "MASK" ? "text-blue-600" : "text-red-600"
@@ -601,7 +608,7 @@ const GuardrailInfoView: React.FC<GuardrailInfoProps> = ({ guardrailId, onClose,
                               {value === "MASK" ? <EyeInvisibleOutlined /> : <StopOutlined />}
                               {String(value)}
                             </span>
-                          </Text>
+                          </p>
                         </div>
                       ))}
                     </div>
@@ -610,18 +617,18 @@ const GuardrailInfoView: React.FC<GuardrailInfoProps> = ({ guardrailId, onClose,
               )}
 
             {guardrailData.litellm_params?.guardrail === "tool_permission" && (
-              <Card className="mt-6">
+              <Card className="block mt-6 p-6">
                 <ToolPermissionRulesEditor value={toolPermissionConfig} disabled />
               </Card>
             )}
 
             {/* Custom Code Display */}
             {guardrailData.litellm_params?.guardrail === "custom_code" && guardrailData.litellm_params?.custom_code && (
-              <Card className="mt-6">
+              <Card className="block mt-6 p-6">
                 <div className="flex justify-between items-center mb-4">
                   <div className="flex items-center gap-2">
                     <CodeOutlined className="text-blue-500" />
-                    <Text className="font-medium text-lg">Custom Code</Text>
+                    <p className="font-medium text-lg">Custom Code</p>
                   </div>
                   {isAdmin && !isConfigGuardrail && (
                     <AntdButton size="small" icon={<CodeOutlined />} onClick={() => setCustomCodeModalVisible(true)}>
@@ -647,14 +654,14 @@ const GuardrailInfoView: React.FC<GuardrailInfoProps> = ({ guardrailId, onClose,
               isEditing={false}
               accessToken={accessToken}
             />
-          </TabPanel>
+          </TabsContent>
 
           {/* Settings Panel (only for admins) */}
           {isAdmin && (
-            <TabPanel>
-              <Card>
+            <TabsContent value="settings" keepMounted>
+              <Card className="block p-6">
                 <div className="flex justify-between items-center mb-4">
-                  <Title>Guardrail Settings</Title>
+                  <h3 className="text-lg font-medium">Guardrail Settings</h3>
                   {isConfigGuardrail && (
                     <Tooltip title="Guardrail is defined in the config file and cannot be edited.">
                       <InfoCircleOutlined />
@@ -831,24 +838,24 @@ const GuardrailInfoView: React.FC<GuardrailInfoProps> = ({ guardrailId, onClose,
                 ) : (
                   <div className="space-y-4">
                     <div>
-                      <Text className="font-medium">Guardrail ID</Text>
+                      <p className="font-medium">Guardrail ID</p>
                       <div className="font-mono">{guardrailData.guardrail_id}</div>
                     </div>
                     <div>
-                      <Text className="font-medium">Guardrail Name</Text>
+                      <p className="font-medium">Guardrail Name</p>
                       <div>{guardrailData.guardrail_name || "Unnamed Guardrail"}</div>
                     </div>
                     <div>
-                      <Text className="font-medium">Provider</Text>
+                      <p className="font-medium">Provider</p>
                       <div>{displayName}</div>
                     </div>
                     <div>
-                      <Text className="font-medium">Mode</Text>
+                      <p className="font-medium">Mode</p>
                       <div>{guardrailData.litellm_params?.mode || "-"}</div>
                     </div>
                     <div>
-                      <Text className="font-medium">Default On</Text>
-                      <Badge color={guardrailData.litellm_params?.default_on ? "green" : "gray"}>
+                      <p className="font-medium">Default On</p>
+                      <Badge variant={guardrailData.litellm_params?.default_on ? "secondary" : "outline"}>
                         {guardrailData.litellm_params?.default_on ? "Yes" : "No"}
                       </Badge>
                     </div>
@@ -856,9 +863,9 @@ const GuardrailInfoView: React.FC<GuardrailInfoProps> = ({ guardrailId, onClose,
                     {guardrailData.litellm_params?.pii_entities_config &&
                       Object.keys(guardrailData.litellm_params.pii_entities_config).length > 0 && (
                         <div>
-                          <Text className="font-medium">PII Protection</Text>
+                          <p className="font-medium">PII Protection</p>
                           <div className="mt-2">
-                            <Badge color="blue">
+                            <Badge variant="secondary">
                               {Object.keys(guardrailData.litellm_params.pii_entities_config).length} PII entities
                               configured
                             </Badge>
@@ -867,11 +874,11 @@ const GuardrailInfoView: React.FC<GuardrailInfoProps> = ({ guardrailId, onClose,
                       )}
 
                     <div>
-                      <Text className="font-medium">Created At</Text>
+                      <p className="font-medium">Created At</p>
                       <div>{formatDate(guardrailData.created_at)}</div>
                     </div>
                     <div>
-                      <Text className="font-medium">Last Updated</Text>
+                      <p className="font-medium">Last Updated</p>
                       <div>{formatDate(guardrailData.updated_at)}</div>
                     </div>
 
@@ -881,10 +888,10 @@ const GuardrailInfoView: React.FC<GuardrailInfoProps> = ({ guardrailId, onClose,
                   </div>
                 )}
               </Card>
-            </TabPanel>
+            </TabsContent>
           )}
-        </TabPanels>
-      </TabGroup>
+        </div>
+      </Tabs>
 
       {/* Custom Code Editor Modal */}
       <CustomCodeModal
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_attachment_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_attachment_form.tsx
index cdb8c7ffab9..292d22f23e6 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_attachment_form.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_attachment_form.tsx
@@ -417,12 +417,23 @@ const AddAttachmentForm: React.FC<AddAttachmentFormProps> = ({
               Cancel
             </Button>
             {scopeType === "specific" && (
-              <Button type="button" variant="secondary" onClick={handlePreviewImpact} disabled={isEstimating}>
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={handlePreviewImpact}
+                disabled={isEstimating}
+                aria-busy={isEstimating}
+              >
                 {isEstimating && <UiLoadingSpinner className="size-4" />}
                 Estimate Impact
               </Button>
             )}
-            <Button type="button" onClick={form.handleSubmit(handleSubmit)} disabled={isSubmitting}>
+            <Button
+              type="button"
+              onClick={form.handleSubmit(handleSubmit)}
+              disabled={isSubmitting}
+              aria-busy={isSubmitting}
+            >
               {isSubmitting && <UiLoadingSpinner className="size-4" />}
               Create Attachment
             </Button>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.tsx
index a08ae1d9f98..cc0a85eedb9 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.tsx
@@ -546,7 +546,12 @@ const AddPolicyForm: React.FC<AddPolicyFormProps> = ({
             <Button type="button" variant="outline" onClick={handleClose}>
               Cancel
             </Button>
-            <Button type="button" onClick={form.handleSubmit(handleSubmit)} disabled={isSubmitting}>
+            <Button
+              type="button"
+              onClick={form.handleSubmit(handleSubmit)}
+              disabled={isSubmitting}
+              aria-busy={isSubmitting}
+            >
               {isSubmitting && <UiLoadingSpinner className="size-4" />}
               {isEditing ? "Update Policy" : "Create Policy"}
             </Button>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_test_panel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_test_panel.tsx
index 82cb3932e21..90642d23a46 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_test_panel.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_test_panel.tsx
@@ -218,7 +218,7 @@ const PolicyTestPanel: React.FC<PolicyTestPanelProps> = ({ accessToken }) => {
             </FormField>
           </FieldGroup>
           <div className="flex space-x-2 mt-4">
-            <Button type="button" onClick={handleTest} disabled={isLoading || !accessToken}>
+            <Button type="button" onClick={handleTest} disabled={isLoading || !accessToken} aria-busy={isLoading}>
               {isLoading && <UiLoadingSpinner className="size-4" />}
               Simulate
             </Button>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.test.tsx
new file mode 100644
index 00000000000..bb29f12ac42
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.test.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import PromptInfoView from "./prompt_info";
+import * as networking from "@/components/networking";
+
+vi.mock("@/components/networking", () => ({
+  getPromptInfo: vi.fn(),
+  getPromptVersions: vi.fn(),
+  deletePromptCall: vi.fn(),
+}));
+
+vi.mock("./prompt_editor_view/PromptCodeSnippets", () => ({
+  default: () => <div data-testid="prompt-code-snippets" />,
+}));
+
+const promptWithoutTemplate = {
+  prompt_spec: {
+    prompt_id: "support-reply",
+    version: 1,
+    litellm_params: { prompt_id: "support-reply" },
+    prompt_info: { prompt_type: "dotprompt" },
+    created_by: "admin",
+    created_at: "2024-01-01T00:00:00Z",
+    updated_at: "2024-01-01T00:00:00Z",
+  },
+  raw_prompt_template: null,
+  environments: [],
+};
+
+describe("PromptInfoView tabs", () => {
+  beforeEach(() => {
+    vi.mocked(networking.getPromptInfo).mockReset().mockResolvedValue(promptWithoutTemplate);
+    vi.mocked(networking.getPromptVersions).mockReset().mockResolvedValue({ prompts: [] });
+  });
+
+  it("shows the raw API response for a prompt that has no template", async () => {
+    const user = userEvent.setup();
+    render(<PromptInfoView promptId="support-reply" onClose={vi.fn()} accessToken="sk-test" isAdmin={true} />);
+
+    expect(await screen.findByRole("tab", { name: "Raw JSON" })).toBeInTheDocument();
+    expect(screen.queryByRole("tab", { name: "Prompt Template" })).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("tab", { name: "Raw JSON" }));
+
+    expect(screen.getByText("Raw API Response")).toBeVisible();
+    expect(screen.getByText(/"prompt_id": "support-reply"/)).toBeVisible();
+  });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.tsx b/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.tsx
index 5335ba06060..cf29280ea51 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.tsx
@@ -1,25 +1,10 @@
 import React, { useState, useEffect, useRef } from "react";
-import {
-  Card,
-  Title,
-  Text,
-  Grid,
-  Badge,
-  Button as TremorButton,
-  Tab,
-  TabGroup,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-} from "@tremor/react";
-import { Button, Modal } from "antd";
-import { ArrowLeftIcon, TrashIcon, PencilIcon } from "@heroicons/react/outline";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button as AntButton, Modal } from "antd";
 import {
   getPromptInfo,
   getPromptVersions,
@@ -28,7 +13,7 @@ import {
   deletePromptCall,
 } from "@/components/networking";
 import { copyToClipboard as utilCopyToClipboard } from "@/utils/dataUtils";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { ArrowLeft, CheckIcon, CopyIcon, Pencil, Trash2 } from "lucide-react";
 import { toast } from "@/lib/toast";
 import PromptCodeSnippets from "./prompt_editor_view/PromptCodeSnippets";
 import { extractModel, extractTemplateVariables, getBasePromptId, getCurrentVersion } from "./prompt_utils";
@@ -197,15 +182,16 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
   return (
     <div className="p-4">
       <div>
-        <TremorButton icon={ArrowLeftIcon} variant="light" onClick={onClose} className="mb-4">
+        <Button variant="ghost" onClick={onClose} className="mb-4">
+          <ArrowLeft className="size-4" />
           Back to Prompts
-        </TremorButton>
+        </Button>
         <div className="flex justify-between items-start mb-4">
           <div>
-            <Title>Prompt Details</Title>
+            <h1 className="text-2xl font-semibold">Prompt Details</h1>
             <div className="flex items-center cursor-pointer">
-              <Text className="text-gray-500 font-mono">{basePromptId}</Text>
-              <Button
+              <p className="text-sm text-gray-500 font-mono">{basePromptId}</p>
+              <AntButton
                 type="text"
                 size="small"
                 icon={copiedStates["prompt-id"] ? <CheckIcon size={12} /> : <CopyIcon size={12} />}
@@ -226,23 +212,15 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
               accessToken={accessToken}
               version={currentVersion}
             />
-            <TremorButton
-              icon={PencilIcon}
-              variant="primary"
-              onClick={() => onEdit?.(rawApiResponse)}
-              className="flex items-center"
-            >
+            <Button onClick={() => onEdit?.(rawApiResponse)} className="flex items-center">
+              <Pencil />
               Prompt Studio
-            </TremorButton>
+            </Button>
             {isAdmin && (
-              <TremorButton
-                icon={TrashIcon}
-                variant="secondary"
-                onClick={handleDeleteClick}
-                className="flex items-center"
-              >
+              <Button variant="secondary" onClick={handleDeleteClick} className="flex items-center">
+                <Trash2 />
                 Delete Prompt
-              </TremorButton>
+              </Button>
             )}
           </div>
         </div>
@@ -285,81 +263,89 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
       {/* Old version banner */}
       {isViewingOldVersion && (
         <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-center justify-between">
-          <Text className="text-amber-800">
+          <p className="text-sm text-amber-800">
             Viewing v{selectedVersion} — not the latest version (v{latestVersion})
-          </Text>
-          <TremorButton
-            variant="light"
-            size="xs"
+          </p>
+          <Button
+            variant="ghost"
+            size="sm"
             onClick={() => {
               const latest = versionHistory.find((v) => v.version === latestVersion);
               if (latest) handleVersionClick(latest);
             }}
           >
             Go to latest
-          </TremorButton>
+          </Button>
         </div>
       )}
 
-      <TabGroup>
-        <TabList className="mb-4">
-          <Tab key="overview">Overview</Tab>
-          {promptTemplate ? <Tab key="prompt-template">Prompt Template</Tab> : <></>}
-          <Tab key="raw-json">Raw JSON</Tab>
-        </TabList>
+      <Tabs defaultValue="overview">
+        <TabsList variant="line" className="mb-4 h-auto w-full justify-start rounded-none border-b p-0">
+          <TabsTrigger value="overview" className="flex-none rounded-none px-4 py-2">
+            Overview
+          </TabsTrigger>
+          {promptTemplate && (
+            <TabsTrigger value="prompt-template" className="flex-none rounded-none px-4 py-2">
+              Prompt Template
+            </TabsTrigger>
+          )}
+          <TabsTrigger value="raw-json" className="flex-none rounded-none px-4 py-2">
+            Raw JSON
+          </TabsTrigger>
+        </TabsList>
 
-        <TabPanels>
+        <div>
           {/* Overview Panel */}
-          <TabPanel>
-            <Grid numItems={1} numItemsSm={2} numItemsLg={4} className="gap-4">
-              <Card>
-                <Text>Version</Text>
+          <TabsContent value="overview" keepMounted>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+              <Card className="block p-6">
+                <p>Version</p>
                 <div className="mt-2">
-                  <Title>{currentVersion}</Title>
-                  <Badge color="blue" className="mt-1">
+                  <h3 className="text-lg font-medium">{currentVersion}</h3>
+                  <Badge variant="secondary" className="mt-1">
                     v{currentVersion}
                   </Badge>
                 </div>
               </Card>
 
-              <Card>
-                <Text>Prompt Type</Text>
+              <Card className="block p-6">
+                <p>Prompt Type</p>
                 <div className="mt-2">
-                  <Title>{promptData.prompt_info?.prompt_type || "-"}</Title>
+                  <h3 className="text-lg font-medium">{promptData.prompt_info?.prompt_type || "-"}</h3>
                 </div>
               </Card>
 
-              <Card>
-                <Text>Created By</Text>
+              <Card className="block p-6">
+                <p>Created By</p>
                 <div className="mt-2">
-                  <Title className="text-sm">{promptData.created_by || "-"}</Title>
+                  <h3 className="text-sm font-medium">{promptData.created_by || "-"}</h3>
                 </div>
               </Card>
 
-              <Card>
-                <Text>Created At</Text>
+              <Card className="block p-6">
+                <p>Created At</p>
                 <div className="mt-2">
-                  <Title className="text-sm">{formatDate(promptData.created_at)}</Title>
-                  <Text className="text-xs">Updated: {formatDate(promptData.updated_at)}</Text>
+                  <h3 className="text-sm font-medium">{formatDate(promptData.created_at)}</h3>
+                  <p className="text-xs">Updated: {formatDate(promptData.updated_at)}</p>
                 </div>
               </Card>
-            </Grid>
+            </div>
 
             {/* Version History Table */}
-            <Card className="mt-6">
-              <Title className="mb-3">Version History — {selectedEnv}</Title>
+            <Card className="block mt-6 p-6">
+              <h3 className="text-lg font-medium mb-3">Version History — {selectedEnv}</h3>
               {loadingVersions ? (
-                <Text>Loading versions...</Text>
+                <p>Loading versions...</p>
               ) : versionHistory.length > 0 ? (
                 <Table>
-                  <TableHead>
+                  <TableHeader>
                     <TableRow>
-                      <TableHeaderCell>Version</TableHeaderCell>
-                      <TableHeaderCell>Created By</TableHeaderCell>
-                      <TableHeaderCell>Date</TableHeaderCell>
-                      <TableHeaderCell>Actions</TableHeaderCell>
+                      <TableHead>Version</TableHead>
+                      <TableHead>Created By</TableHead>
+                      <TableHead>Date</TableHead>
+                      <TableHead>Actions</TableHead>
                     </TableRow>
-                  </TableHead>
+                  </TableHeader>
                   <TableBody>
                     {versionHistory.map((v) => {
                       const vNum = v.version || 1;
@@ -376,7 +362,7 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
                           <TableCell>
                             <span className={isSelected ? "font-bold" : ""}>v{vNum}</span>
                             {isLatest && (
-                              <Badge color="blue" className="ml-2" size="xs">
+                              <Badge variant="secondary" className="ml-2">
                                 latest
                               </Badge>
                             )}
@@ -388,10 +374,9 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
                             <span className="text-sm">{formatDate(v.created_at)}</span>
                           </TableCell>
                           <TableCell>
-                            <TremorButton
-                              icon={PencilIcon}
-                              variant="light"
-                              size="xs"
+                            <Button
+                              variant="ghost"
+                              size="sm"
                               onClick={(e) => {
                                 e.stopPropagation();
                                 // Build a response-like object for the editor
@@ -406,8 +391,9 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
                                 onEdit?.(editData);
                               }}
                             >
+                              <Pencil />
                               Edit
-                            </TremorButton>
+                            </Button>
                           </TableCell>
                         </TableRow>
                       );
@@ -415,18 +401,18 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
                   </TableBody>
                 </Table>
               ) : (
-                <Text className="text-gray-400">No versions found in {selectedEnv}</Text>
+                <p className="text-gray-400">No versions found in {selectedEnv}</p>
               )}
             </Card>
-          </TabPanel>
+          </TabsContent>
 
           {/* Prompt Template Panel */}
           {promptTemplate && (
-            <TabPanel>
-              <Card>
+            <TabsContent value="prompt-template" keepMounted>
+              <Card className="block p-6">
                 <div className="flex justify-between items-center mb-4">
-                  <Title>Prompt Template</Title>
-                  <Button
+                  <h3 className="text-lg font-medium">Prompt Template</h3>
+                  <AntButton
                     type="text"
                     size="small"
                     icon={copiedStates["prompt-content"] ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
@@ -438,19 +424,19 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
                     }`}
                   >
                     {copiedStates["prompt-content"] ? "Copied!" : "Copy Content"}
-                  </Button>
+                  </AntButton>
                 </div>
 
                 <div className="space-y-4">
                   <div>
-                    <Text className="font-medium">Template ID</Text>
+                    <p className="font-medium">Template ID</p>
                     <div className="font-mono text-sm bg-gray-50 p-2 rounded-sm">
                       {promptTemplate.litellm_prompt_id}
                     </div>
                   </div>
 
                   <div>
-                    <Text className="font-medium">Content</Text>
+                    <p className="font-medium">Content</p>
                     <div className="mt-2 p-4 bg-gray-50 rounded-md border overflow-auto max-h-96">
                       <pre className="text-sm text-gray-800 whitespace-pre-wrap">{promptTemplate.content}</pre>
                     </div>
@@ -458,7 +444,7 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
 
                   {promptTemplate.metadata && Object.keys(promptTemplate.metadata).length > 0 && (
                     <div>
-                      <Text className="font-medium">Template Metadata</Text>
+                      <p className="font-medium">Template Metadata</p>
                       <div className="mt-2 p-3 bg-gray-50 rounded-md border">
                         <pre className="text-xs text-gray-800 whitespace-pre-wrap overflow-auto max-h-64">
                           {JSON.stringify(promptTemplate.metadata, null, 2)}
@@ -468,15 +454,15 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
                   )}
                 </div>
               </Card>
-            </TabPanel>
+            </TabsContent>
           )}
 
           {/* Raw JSON Panel */}
-          <TabPanel>
-            <Card>
+          <TabsContent value="raw-json" keepMounted>
+            <Card className="block p-6">
               <div className="flex justify-between items-center mb-4">
-                <Title>Raw API Response</Title>
-                <Button
+                <h3 className="text-lg font-medium">Raw API Response</h3>
+                <AntButton
                   type="text"
                   size="small"
                   icon={copiedStates["raw-json"] ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
@@ -488,7 +474,7 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
                   }`}
                 >
                   {copiedStates["raw-json"] ? "Copied!" : "Copy JSON"}
-                </Button>
+                </AntButton>
               </div>
 
               <div className="p-4 bg-gray-50 rounded-md border overflow-auto">
@@ -497,9 +483,9 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
                 </pre>
               </div>
             </Card>
-          </TabPanel>
-        </TabPanels>
-      </TabGroup>
+          </TabsContent>
+        </div>
+      </Tabs>
 
       {/* Delete Confirmation Modal */}
       <Modal
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/add_plugin_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/add_plugin_form.tsx
index 0496d916171..4fa0fed9eee 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/add_plugin_form.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/add_plugin_form.tsx
@@ -375,7 +375,7 @@ const AddPluginForm: React.FC<AddPluginFormProps> = ({ visible, onClose, accessT
             <Button type="button" variant="outline" onClick={handleCancel} disabled={isSubmitting}>
               Cancel
             </Button>
-            <Button type="submit" disabled={isSubmitting}>
+            <Button type="submit" disabled={isSubmitting} aria-busy={isSubmitting}>
               {isSubmitting && <UiLoadingSpinner className="size-4" />}
               {isSubmitting ? "Adding..." : "Add Skill"}
             </Button>