diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index e467ddc5ec4..bc23c2433d3 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -16,7 +16,7 @@
   },
   "src/app/(dashboard)/admin-panel/_components/AdminPanel.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "react-hooks/set-state-in-effect": {
       "count": 1
@@ -1647,9 +1647,6 @@
     }
   },
   "src/components/SCIM.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    },
     "react-hooks/set-state-in-effect": {
       "count": 1
     }
@@ -1661,7 +1658,7 @@
   },
   "src/components/SSOModals.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.tsx": {
@@ -1705,11 +1702,6 @@
       "count": 1
     }
   },
-  "src/components/Settings/AdminSettings/SSOSettings/Modals/BaseSSOSettingsForm.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    }
-  },
   "src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.test.tsx": {
     "max-nested-callbacks": {
       "count": 1
@@ -1760,7 +1752,7 @@
   },
   "src/components/Settings/RouterSettings/Fallbacks/FallbackSelectionForm.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "react-hooks/set-state-in-effect": {
       "count": 1
@@ -2024,10 +2016,7 @@
       "count": 1
     },
     "no-nested-ternary": {
-      "count": 4
-    },
-    "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "src/components/bulk_create_users_button.tsx": {
@@ -2091,7 +2080,7 @@
       "count": 1
     },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "no-restricted-syntax": {
       "count": 3
@@ -2461,7 +2450,7 @@
       "count": 1
     },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "src/components/organisms/RegenerateKeyModal.tsx": {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.tsx
index 3f3f7fb5db7..48eaa62e37b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.tsx
@@ -3,18 +3,12 @@
  * Use this to avoid sharing master key with others
  */
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import {
-  Button,
-  Callout,
-  Card,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-} from "@tremor/react";
-import { Alert, Modal, Space, Tabs, Typography } from "antd";
+import { Alert, AlertDescription, AlertTitle } from "@/components/shared/Alert";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Alert as AntdAlert, Modal, Space, Tabs, Typography } from "antd";
+import { Info } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import NewBadge from "@/components/common_components/NewBadge";
 import { useBaseUrl } from "@/components/constants";
@@ -37,7 +31,6 @@ import UIAccessControlForm from "@/components/UIAccessControlForm";
 import { z } from "zod/v4";
 import { FieldGroup } from "@/components/shared/form/field";
 import { FormField } from "@/components/shared/form/FormField";
-import { Button as ShadcnButton } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useZodForm } from "@/lib/forms/useZodForm";
 
@@ -59,7 +52,7 @@ const AddAllowedIPForm = ({ onSubmit }: { onSubmit: (values: AllowedIPFormValues
           {({ ref, ...field }) => <Input ref={ref} placeholder="Enter IP address" {...field} />}
         </FormField>
         <div>
-          <ShadcnButton type="submit">Add IP Address</ShadcnButton>
+          <Button type="submit">Add IP Address</Button>
         </div>
       </FieldGroup>
     </form>
@@ -228,9 +221,9 @@ const AdminPanel: React.FC<AdminPanelProps> = ({ proxySettings }) => {
       label: "Security Settings",
       children: (
         <>
-          <Card>
+          <Card className="block p-6">
             <Title level={4}> ✨ Security Settings</Title>
-            <Alert
+            <AntdAlert
               message="SSO Configuration Deprecated"
               description="Editing SSO Settings on this page is deprecated and will be removed in a future version. Please use the SSO Settings tab for SSO configuration."
               type="warning"
@@ -298,19 +291,19 @@ const AdminPanel: React.FC<AdminPanelProps> = ({ proxySettings }) => {
               ]}
             >
               <Table>
-                <TableHead>
+                <TableHeader>
                   <TableRow>
-                    <TableHeaderCell>IP Address</TableHeaderCell>
-                    <TableHeaderCell className="text-right">Action</TableHeaderCell>
+                    <TableHead>IP Address</TableHead>
+                    <TableHead className="text-right">Action</TableHead>
                   </TableRow>
-                </TableHead>
+                </TableHeader>
                 <TableBody>
                   {allowedIPs.map((ip, index) => (
                     <TableRow key={index}>
                       <TableCell>{ip}</TableCell>
                       <TableCell className="text-right">
                         {ip !== all_ip_address_allowed && (
-                          <Button onClick={() => handleDeleteIP(ip)} color="red" size="xs">
+                          <Button onClick={() => handleDeleteIP(ip)} variant="destructive" size="sm">
                             Delete
                           </Button>
                         )}
@@ -365,12 +358,16 @@ const AdminPanel: React.FC<AdminPanelProps> = ({ proxySettings }) => {
               />
             </Modal>
           </div>
-          <Callout title="Login without SSO" color="teal">
-            If you need to login without sso, you can access{" "}
-            <a href={nonSssoUrl} target="_blank" rel="noopener noreferrer">
-              <b>{nonSssoUrl}</b>{" "}
-            </a>
-          </Callout>
+          <Alert variant="info">
+            <Info />
+            <AlertTitle>Login without SSO</AlertTitle>
+            <AlertDescription>
+              If you need to login without sso, you can access{" "}
+              <a href={nonSssoUrl} target="_blank" rel="noopener noreferrer">
+                <b>{nonSssoUrl}</b>{" "}
+              </a>
+            </AlertDescription>
+          </Alert>
         </>
       ),
     },
diff --git a/ui/litellm-dashboard/src/components/SCIM.tsx b/ui/litellm-dashboard/src/components/SCIM.tsx
index 4110db4daba..6663ab0aed0 100644
--- a/ui/litellm-dashboard/src/components/SCIM.tsx
+++ b/ui/litellm-dashboard/src/components/SCIM.tsx
@@ -1,21 +1,17 @@
 import React, { useState, useEffect } from "react";
-import { Card, Title, Text, Grid, Callout, Divider } from "@tremor/react";
 import { z } from "zod/v4";
 import { keyCreateCall } from "./networking";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import {
-  LinkOutlined,
-  KeyOutlined,
-  CopyOutlined,
-  ExclamationCircleOutlined,
-  PlusCircleOutlined,
-} from "@ant-design/icons";
+import { CircleAlert, CirclePlus, Copy, Info, KeyRound, Link } from "lucide-react";
 import { parseErrorMessage } from "./shared/errorUtils";
 import { toast } from "@/lib/toast";
+import { Alert, AlertDescription, AlertTitle } from "@/components/shared/Alert";
 import { FieldGroup } from "@/components/shared/form/field";
 import { FormField } from "@/components/shared/form/FormField";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { useZodForm } from "@/lib/forms/useZodForm";
 
@@ -80,114 +76,121 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
   };
 
   return (
-    <Grid numItems={1}>
+    <div className="grid grid-cols-1">
       <Card>
-        <div className="flex items-center mb-4">
-          <Title>SCIM Configuration</Title>
-        </div>
-        <Text className="text-muted-foreground">
-          System for Cross-domain Identity Management (SCIM) allows you to automatically provision and manage users and
-          groups in LiteLLM.
-        </Text>
-
-        <Divider />
-
-        <div className="space-y-8">
-          {/* Step 1: SCIM URL */}
-          <div>
-            <div className="flex items-center mb-2">
-              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300 mr-2">
-                1
-              </div>
-              <Title className="text-lg flex items-center">
-                <LinkOutlined className="h-5 w-5 mr-2" />
-                SCIM Tenant URL
-              </Title>
-            </div>
-            <Text className="text-muted-foreground mb-3">
-              Use this URL in your identity provider SCIM integration settings.
-            </Text>
-            <div className="flex items-center">
-              <Input value={scimBaseUrl} disabled={true} readOnly className="grow" />
-              <CopyToClipboard text={scimBaseUrl} onCopy={() => toast.success("URL copied to clipboard")}>
-                <Button type="button" className="ml-2 flex items-center">
-                  <CopyOutlined className="h-4 w-4 mr-1" />
-                  Copy
-                </Button>
-              </CopyToClipboard>
-            </div>
+        <CardContent>
+          <div className="flex items-center mb-4">
+            <CardTitle>SCIM Configuration</CardTitle>
           </div>
+          <p className="text-muted-foreground">
+            System for Cross-domain Identity Management (SCIM) allows you to automatically provision and manage users
+            and groups in LiteLLM.
+          </p>
 
-          {/* Step 2: SCIM Token */}
-          <div>
-            <div className="flex items-center mb-2">
-              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300 mr-2">
-                2
+          <Separator className="my-6" />
+
+          <div className="space-y-8">
+            {/* Step 1: SCIM URL */}
+            <div>
+              <div className="flex items-center mb-2">
+                <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300 mr-2">
+                  1
+                </div>
+                <h3 className="text-lg font-medium flex items-center">
+                  <Link className="h-5 w-5 mr-2" />
+                  SCIM Tenant URL
+                </h3>
+              </div>
+              <p className="text-muted-foreground mb-3">
+                Use this URL in your identity provider SCIM integration settings.
+              </p>
+              <div className="flex items-center">
+                <Input value={scimBaseUrl} disabled={true} readOnly className="grow" />
+                <CopyToClipboard text={scimBaseUrl} onCopy={() => toast.success("URL copied to clipboard")}>
+                  <Button type="button" className="ml-2 flex items-center">
+                    <Copy />
+                    Copy
+                  </Button>
+                </CopyToClipboard>
               </div>
-              <Title className="text-lg flex items-center">
-                <KeyOutlined className="h-5 w-5 mr-2" />
-                Authentication Token
-              </Title>
             </div>
 
-            <Callout title="Using SCIM" color="blue" className="mb-4">
-              You need a SCIM token to authenticate with the SCIM API. Create one below and use it in your SCIM provider
-              configuration.
-            </Callout>
+            {/* Step 2: SCIM Token */}
+            <div>
+              <div className="flex items-center mb-2">
+                <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300 mr-2">
+                  2
+                </div>
+                <h3 className="text-lg font-medium flex items-center">
+                  <KeyRound className="h-5 w-5 mr-2" />
+                  Authentication Token
+                </h3>
+              </div>
 
-            {!tokenData ? (
-              <div className="bg-muted p-4 rounded-lg">
-                <form onSubmit={form.handleSubmit(handleCreateSCIMToken)}>
-                  <FieldGroup>
-                    <FormField control={form.control} name="key_alias" label="Token Name">
-                      {({ ref, ...field }) => <Input {...field} ref={ref} placeholder="SCIM Access Token" />}
-                    </FormField>
-                    <div>
-                      <Button type="submit" disabled={isCreatingToken} className="flex items-center">
-                        {isCreatingToken ? (
-                          <UiLoadingSpinner className="size-4 mr-1" />
-                        ) : (
-                          <KeyOutlined className="h-4 w-4 mr-1" />
-                        )}
-                        Create SCIM Token
+              <Alert variant="info" className="mb-4">
+                <Info />
+                <AlertTitle>Using SCIM</AlertTitle>
+                <AlertDescription>
+                  You need a SCIM token to authenticate with the SCIM API. Create one below and use it in your SCIM
+                  provider configuration.
+                </AlertDescription>
+              </Alert>
+
+              {!tokenData ? (
+                <div className="bg-muted p-4 rounded-lg">
+                  <form onSubmit={form.handleSubmit(handleCreateSCIMToken)}>
+                    <FieldGroup>
+                      <FormField control={form.control} name="key_alias" label="Token Name">
+                        {({ ref, ...field }) => <Input {...field} ref={ref} placeholder="SCIM Access Token" />}
+                      </FormField>
+                      <div>
+                        <Button
+                          type="submit"
+                          disabled={isCreatingToken}
+                          aria-busy={isCreatingToken}
+                          className="flex items-center"
+                        >
+                          {isCreatingToken ? <UiLoadingSpinner className="size-4" /> : <KeyRound />}
+                          Create SCIM Token
+                        </Button>
+                      </div>
+                    </FieldGroup>
+                  </form>
+                </div>
+              ) : (
+                <Card className="block p-6 border border-yellow-300 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-950">
+                  <div className="flex items-center mb-2 text-yellow-800 dark:text-yellow-300">
+                    <CircleAlert className="h-5 w-5 mr-2" />
+                    <h4 className="text-lg font-medium text-yellow-800 dark:text-yellow-300">Your SCIM Token</h4>
+                  </div>
+                  <p className="text-yellow-800 dark:text-yellow-300 mb-4 font-medium">
+                    Make sure to copy this token now. You will not be able to see it again.
+                  </p>
+                  <div className="flex items-center">
+                    <Input value={tokenData.key} className="grow mr-2" type="password" disabled={true} readOnly />
+                    <CopyToClipboard text={tokenData.key} onCopy={() => toast.success("Token copied to clipboard")}>
+                      <Button type="button" className="flex items-center">
+                        <Copy />
+                        Copy
                       </Button>
-                    </div>
-                  </FieldGroup>
-                </form>
-              </div>
-            ) : (
-              <Card className="border border-yellow-300 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-950">
-                <div className="flex items-center mb-2 text-yellow-800 dark:text-yellow-300">
-                  <ExclamationCircleOutlined className="h-5 w-5 mr-2" />
-                  <Title className="text-lg text-yellow-800 dark:text-yellow-300">Your SCIM Token</Title>
-                </div>
-                <Text className="text-yellow-800 dark:text-yellow-300 mb-4 font-medium">
-                  Make sure to copy this token now. You will not be able to see it again.
-                </Text>
-                <div className="flex items-center">
-                  <Input value={tokenData.key} className="grow mr-2" type="password" disabled={true} readOnly />
-                  <CopyToClipboard text={tokenData.key} onCopy={() => toast.success("Token copied to clipboard")}>
-                    <Button type="button" className="flex items-center">
-                      <CopyOutlined className="h-4 w-4 mr-1" />
-                      Copy
-                    </Button>
-                  </CopyToClipboard>
-                </div>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  className="mt-4 flex items-center"
-                  onClick={() => setTokenData(null)}
-                >
-                  <PlusCircleOutlined className="h-4 w-4 mr-1" />
-                  Create Another Token
-                </Button>
-              </Card>
-            )}
+                    </CopyToClipboard>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    className="mt-4 flex items-center"
+                    onClick={() => setTokenData(null)}
+                  >
+                    <CirclePlus />
+                    Create Another Token
+                  </Button>
+                </Card>
+              )}
+            </div>
           </div>
-        </div>
+        </CardContent>
       </Card>
-    </Grid>
+    </div>
   );
 };
 
diff --git a/ui/litellm-dashboard/src/components/SSOModals.tsx b/ui/litellm-dashboard/src/components/SSOModals.tsx
index 4a156c3b30a..2bcc7849449 100644
--- a/ui/litellm-dashboard/src/components/SSOModals.tsx
+++ b/ui/litellm-dashboard/src/components/SSOModals.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { FormProvider, useWatch, type UseFormReturn } from "react-hook-form";
 import { Modal } from "antd";
-import { Text } from "@tremor/react";
 import { getSSOSettings, updateSSOSettings } from "./networking";
 import { toast } from "@/lib/toast";
 import { parseErrorMessage } from "./shared/errorUtils";
@@ -317,10 +316,10 @@ const SSOModals: React.FC<SSOModalsProps> = ({
         onCancel={handleInstructionsCancel}
       >
         <p>Follow these steps to complete the SSO setup:</p>
-        <Text className="mt-2">1. DO NOT Exit this TAB</Text>
-        <Text className="mt-2">2. Open a new tab, visit your proxy base url</Text>
-        <Text className="mt-2">3. Confirm your SSO is configured correctly and you can login on the new Tab</Text>
-        <Text className="mt-2">4. If Step 3 is successful, you can close this tab</Text>
+        <p className="text-sm mt-2">1. DO NOT Exit this TAB</p>
+        <p className="text-sm mt-2">2. Open a new tab, visit your proxy base url</p>
+        <p className="text-sm mt-2">3. Confirm your SSO is configured correctly and you can login on the new Tab</p>
+        <p className="text-sm mt-2">4. If Step 3 is successful, you can close this tab</p>
         <div style={{ textAlign: "right", marginTop: "10px" }}>
           <Button type="button" onClick={handleInstructionsOk}>
             Done
diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackSelectionForm.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackSelectionForm.tsx
index 53880a7f795..10bbcd9ba3b 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackSelectionForm.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackSelectionForm.tsx
@@ -4,7 +4,7 @@
  * Decoupled from form submission logic
  */
 
-import { Button } from "@tremor/react";
+import { Button } from "@/components/ui/button";
 import { Tabs } from "antd";
 import { Plus } from "lucide-react";
 import React, { useEffect, useState } from "react";
@@ -98,7 +98,8 @@ export function FallbackSelectionForm({
     return (
       <div className="text-center py-12 bg-gray-50 rounded-lg border border-dashed border-gray-300">
         <p className="text-gray-500 mb-4">No fallback groups configured</p>
-        <Button variant="primary" onClick={handleAddGroup} icon={() => <Plus className="w-4 h-4" />}>
+        <Button onClick={handleAddGroup}>
+          <Plus className="w-4 h-4" />
           Create First Group
         </Button>
       </div>
diff --git a/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx b/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx
index 89eee83374a..f9b9765f59e 100644
--- a/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx
+++ b/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx
@@ -174,9 +174,7 @@ describe("DynamicForm change notifications", () => {
     const user = userEvent.setup();
     const { handleResetField } = renderForm();
 
-    const row = screen.getByText("region_name").closest("tr");
-    const reset = row?.querySelector(".tremor-Icon-root");
-    await user.click(reset as Element);
+    await user.click(screen.getByRole("button", { name: "Reset region_name" }));
 
     expect(handleResetField).toHaveBeenCalledWith("region_name", 1);
   });
diff --git a/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx b/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
index 1ee3833c1b9..0b7924d5599 100644
--- a/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
+++ b/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
@@ -1,8 +1,11 @@
 import React from "react";
 import { useForm } from "react-hook-form";
-import { TrashIcon, CheckCircleIcon } from "@heroicons/react/outline";
-import { Button, Badge, Icon, Text, TableRow, TableCell, Switch } from "@tremor/react";
+import { CircleCheck, Trash2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { TableCell, TableRow } from "@/components/ui/table";
 
 interface AlertingSetting {
   field_name: string;
@@ -71,7 +74,13 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
       );
     }
     if (setting.field_type === "Boolean") {
-      return <Switch checked={setting.field_value} onChange={(checked) => handleToggle(setting, checked)} />;
+      return (
+        <Switch
+          aria-label={setting.field_name}
+          checked={setting.field_value}
+          onCheckedChange={(checked) => handleToggle(setting, checked)}
+        />
+      );
     }
     return <Input value={setting.field_value ?? ""} onChange={(event) => handleTextChange(setting, event)} />;
   };
@@ -80,8 +89,8 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
     <form onSubmit={form.handleSubmit(onFinish)} noValidate>
       {alertingSettings.map((value, index) => (
         <TableRow key={index}>
-          <TableCell align="center">
-            <Text>{value.field_name}</Text>
+          <TableCell>
+            <p className="text-sm">{value.field_name}</p>
             <p className="mt-1 text-[0.65rem] italic text-muted-foreground">{value.field_description}</p>
           </TableCell>
           {value.premium_field && !premiumUser ? (
@@ -97,19 +106,27 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
           )}
           <TableCell>
             {value.stored_in_db == true ? (
-              <Badge icon={CheckCircleIcon} className="text-white">
+              <Badge variant="secondary">
+                <CircleCheck />
                 In DB
               </Badge>
             ) : value.stored_in_db == false ? (
-              <Badge className="text-gray bg-background outline-solid">In Config</Badge>
+              <Badge variant="outline">In Config</Badge>
             ) : (
-              <Badge className="text-gray bg-background outline-solid">Not Set</Badge>
+              <Badge variant="outline">Not Set</Badge>
             )}
           </TableCell>
           <TableCell>
-            <Icon icon={TrashIcon} color="red" onClick={() => handleResetField(value.field_name, index)}>
-              Reset
-            </Icon>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label={`Reset ${value.field_name}`}
+              onClick={() => handleResetField(value.field_name, index)}
+              className="text-red-500"
+            >
+              <Trash2 className="size-5" />
+            </Button>
           </TableCell>
         </TableRow>
       ))}
diff --git a/ui/litellm-dashboard/src/components/cloudzero_export_modal.tsx b/ui/litellm-dashboard/src/components/cloudzero_export_modal.tsx
index 7a937d32b3e..24aa0d9d1b8 100644
--- a/ui/litellm-dashboard/src/components/cloudzero_export_modal.tsx
+++ b/ui/litellm-dashboard/src/components/cloudzero_export_modal.tsx
@@ -1,13 +1,16 @@
 import React, { useState, useEffect } from "react";
-import { Text, Button, Callout } from "@tremor/react";
 import { Modal, Spin, Select } from "antd";
+import { CircleCheck, FileDown } from "lucide-react";
 import { z } from "zod/v4";
 import { getGlobalLitellmHeaderName } from "@/components/networking";
 import { toast } from "@/lib/toast";
+import { Alert, AlertDescription, AlertTitle } from "@/components/shared/Alert";
 import { PasswordInput } from "@/components/shared/PasswordInput";
 import { FieldGroup } from "@/components/shared/form/field";
 import { FormField } from "@/components/shared/form/FormField";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { useZodForm } from "@/lib/forms/useZodForm";
 
 const cloudZeroSettingsSchema = z.object({
@@ -242,7 +245,7 @@ const CloudZeroExportModal: React.FC<CloudZeroExportModalProps> = ({ isOpen, onC
       <div className="space-y-4">
         {/* Export Type Selection */}
         <div>
-          <Text className="font-medium mb-2 block">Export Destination</Text>
+          <p className="text-sm font-medium mb-2 block">Export Destination</p>
           <Select value={exportType} onChange={setExportType} options={exportOptions} className="w-full" size="large" />
         </div>
 
@@ -256,27 +259,15 @@ const CloudZeroExportModal: React.FC<CloudZeroExportModalProps> = ({ isOpen, onC
             ) : (
               <>
                 {existingSettings && (
-                  <Callout
-                    title="Existing CloudZero Configuration"
-                    icon={() => (
-                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                        />
-                      </svg>
-                    )}
-                    color="green"
-                    className="mb-4"
-                  >
-                    <Text>
+                  <Alert className="mb-4">
+                    <CircleCheck />
+                    <AlertTitle>Existing CloudZero Configuration</AlertTitle>
+                    <AlertDescription>
                       API Key: {existingSettings.api_key_masked}
                       <br />
                       Connection ID: {existingSettings.connection_id}
-                    </Text>
-                  </Callout>
+                    </AlertDescription>
+                  </Alert>
                 )}
 
                 {!existingSettings && (
@@ -303,25 +294,27 @@ const CloudZeroExportModal: React.FC<CloudZeroExportModalProps> = ({ isOpen, onC
 
         {/* CSV Export Info */}
         {exportType === "csv" && (
-          <Callout
-            title="CSV Export"
-            icon={() => (
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-              </svg>
-            )}
-            color="blue"
-          >
-            <Text>Export your usage data as a CSV file for analysis in spreadsheet applications.</Text>
-          </Callout>
+          <Alert variant="info">
+            <FileDown />
+            <AlertTitle>CSV Export</AlertTitle>
+            <AlertDescription>
+              Export your usage data as a CSV file for analysis in spreadsheet applications.
+            </AlertDescription>
+          </Alert>
         )}
 
         {/* Action Buttons */}
         <div className="flex justify-end space-x-2 pt-4">
-          <Button variant="secondary" onClick={handleModalClose}>
+          <Button type="button" variant="secondary" onClick={handleModalClose}>
             Cancel
           </Button>
-          <Button onClick={handleExport} loading={loading || exportLoading} disabled={loading || exportLoading}>
+          <Button
+            type="button"
+            onClick={handleExport}
+            disabled={loading || exportLoading}
+            aria-busy={loading || exportLoading}
+          >
+            {(loading || exportLoading) && <UiLoadingSpinner className="size-4" />}
             {exportType === "cloudzero" ? "Export to CloudZero" : "Export CSV"}
           </Button>
         </div>
diff --git a/ui/litellm-dashboard/src/components/onboarding_link.tsx b/ui/litellm-dashboard/src/components/onboarding_link.tsx
index f25811719c1..82c99119cf4 100644
--- a/ui/litellm-dashboard/src/components/onboarding_link.tsx
+++ b/ui/litellm-dashboard/src/components/onboarding_link.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { Button, Modal, Typography } from "antd";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Text } from "@tremor/react";
 import { toast } from "@/lib/toast";
 
 export interface InvitationLink {
@@ -90,14 +89,12 @@ export default function OnboardingModal({
           : "Copy and send the generated link to the user to reset their password."}
       </Paragraph>
       <div className="flex justify-between pt-5 pb-2">
-        <Text className="text-base">User ID</Text>
-        <Text>{invitationLinkData?.user_id}</Text>
+        <p className="text-base">User ID</p>
+        <p className="text-sm">{invitationLinkData?.user_id}</p>
       </div>
       <div className="flex justify-between pt-5 pb-2">
-        <Text>{modalType === "invitation" ? "Invitation Link" : "Reset Password Link"}</Text>
-        <Text>
-          <Text>{getInvitationUrl()}</Text>
-        </Text>
+        <p className="text-sm">{modalType === "invitation" ? "Invitation Link" : "Reset Password Link"}</p>
+        <p className="text-sm">{getInvitationUrl()}</p>
       </div>
       <div className="flex justify-end mt-5">
         <CopyToClipboard text={getInvitationUrl()} onCopy={() => toast.success("Copied!")}>