diff --git a/ui/litellm-dashboard/src/components/user_agent_activity.test.tsx b/ui/litellm-dashboard/src/components/user_agent_activity.test.tsx
index 7b67720e9e5..f673d1dea0c 100644
--- a/ui/litellm-dashboard/src/components/user_agent_activity.test.tsx
+++ b/ui/litellm-dashboard/src/components/user_agent_activity.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach, beforeAll } from "vitest";
 import UserAgentActivity from "./user_agent_activity";
 import * as networking from "./networking";
@@ -146,6 +147,7 @@ describe("UserAgentActivity", () => {
   });
 
   it("should switch between DAU, WAU, and MAU tabs", async () => {
+    const user = userEvent.setup();
     render(<UserAgentActivity {...defaultProps} />);
 
     // Wait for data to load
@@ -158,20 +160,16 @@ describe("UserAgentActivity", () => {
     // Check default DAU tab content
     expect(screen.getByText("Daily Active Users - Last 7 Days")).toBeInTheDocument();
 
-    // Find all WAU tab buttons (there might be multiple)
-    const wauTabs = screen.getAllByText("WAU");
-    fireEvent.click(wauTabs[0]);
+    // Switch to WAU tab (use role=tab to target the actual Radix tab trigger)
+    await user.click(screen.getByRole("tab", { name: /^WAU$/ }));
 
-    // Check WAU tab content
     await waitFor(() => {
       expect(screen.getByText("Weekly Active Users - Last 7 Weeks")).toBeInTheDocument();
     });
 
-    // Find all MAU tab buttons
-    const mauTabs = screen.getAllByText("MAU");
-    fireEvent.click(mauTabs[0]);
+    // Switch to MAU tab
+    await user.click(screen.getByRole("tab", { name: /^MAU$/ }));
 
-    // Check MAU tab content
     await waitFor(() => {
       expect(screen.getByText("Monthly Active Users - Last 7 Months")).toBeInTheDocument();
     });
diff --git a/ui/litellm-dashboard/src/components/user_agent_activity.tsx b/ui/litellm-dashboard/src/components/user_agent_activity.tsx
index 456bbe90b2c..3002685569d 100644
--- a/ui/litellm-dashboard/src/components/user_agent_activity.tsx
+++ b/ui/litellm-dashboard/src/components/user_agent_activity.tsx
@@ -1,27 +1,37 @@
-import React, { useState, useEffect } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
+import React, { useEffect, useMemo, useState } from "react";
+import { X } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
 import {
-  Card,
-  Title,
-  Text,
-  Grid,
-  BarChart,
-  Metric,
-  Subtitle,
-  Tab,
-  TabGroup,
-  TabList,
-  TabPanel,
-  TabPanels,
-} from "@tremor/react";
-import { Select, Tooltip } from "antd";
-import { userAgentSummaryCall, tagDauCall, tagWauCall, tagMauCall, tagDistinctCall } from "./networking";
-import PerUserUsage from "./per_user_usage";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Tooltip as ShTooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import { DateRangePickerValue } from "@tremor/react";
+import { BarChart, DateRangePickerValue } from "@tremor/react";
+
+import {
+  userAgentSummaryCall,
+  tagDauCall,
+  tagWauCall,
+  tagMauCall,
+  tagDistinctCall,
+} from "./networking";
+import PerUserUsage from "./per_user_usage";
 import { ChartLoader } from "./shared/chart_loader";
 
-// New interfaces for the updated API response
 interface TagActiveUsersResponse {
   tag: string;
   active_users: number;
@@ -52,41 +62,120 @@ interface DistinctTagResponse {
   tag: string;
 }
 
-interface DistinctTagsResponse {
-  results: DistinctTagResponse[];
-}
-
 interface UserAgentActivityProps {
   accessToken: string | null;
   userRole: string | null;
   dateValue: DateRangePickerValue;
-  onDateChange?: (value: DateRangePickerValue) => void; // Optional - not used anymore
+  onDateChange?: (value: DateRangePickerValue) => void;
 }
 
-const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, userRole, dateValue, onDateChange }) => {
-  // Maximum number of categories to show in charts to prevent color palette overflow
+/**
+ * shadcn Select + badge chip multi-select for tag filtering.
+ */
+function TagMultiSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+}: {
+  value: string[];
+  onChange: (next: string[]) => void;
+  options: { label: string; value: string; title?: string }[];
+  placeholder: string;
+}) {
+  const selected = useMemo(() => value ?? [], [value]);
+  const remaining = useMemo(
+    () => options.filter((o) => !selected.includes(o.value)),
+    [options, selected],
+  );
+
+  return (
+    <div className="space-y-2">
+      <Select
+        value=""
+        onValueChange={(v) => {
+          if (v) onChange([...selected, v]);
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder={placeholder} />
+        </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} title={opt.title}>
+                {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 max-w-[240px]"
+              >
+                <span className="truncate">{opt?.label ?? v}</span>
+                <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 UserAgentActivity: React.FC<UserAgentActivityProps> = ({
+  accessToken,
+  userRole,
+  dateValue,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onDateChange,
+}) => {
   const MAX_CATEGORIES = 10;
 
-  // Separate state for each endpoint
-  const [dauData, setDauData] = useState<ActiveUsersAnalyticsResponse>({ results: [] });
-  const [wauData, setWauData] = useState<ActiveUsersAnalyticsResponse>({ results: [] });
-  const [mauData, setMauData] = useState<ActiveUsersAnalyticsResponse>({ results: [] });
-  const [summaryData, setSummaryData] = useState<TagSummaryResponse>({ results: [] });
+  const [dauData, setDauData] = useState<ActiveUsersAnalyticsResponse>({
+    results: [],
+  });
+  const [wauData, setWauData] = useState<ActiveUsersAnalyticsResponse>({
+    results: [],
+  });
+  const [mauData, setMauData] = useState<ActiveUsersAnalyticsResponse>({
+    results: [],
+  });
+  const [summaryData, setSummaryData] = useState<TagSummaryResponse>({
+    results: [],
+  });
 
-  const [userAgentFilter, setUserAgentFilter] = useState<string>("");
+  const [userAgentFilter] = useState<string>("");
 
-  // Tag filtering state
   const [availableTags, setAvailableTags] = useState<string[]>([]);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [tagsLoading, setTagsLoading] = useState(false);
 
-  // Separate loading states for each endpoint
   const [dauLoading, setDauLoading] = useState(false);
   const [wauLoading, setWauLoading] = useState(false);
   const [mauLoading, setMauLoading] = useState(false);
   const [summaryLoading, setSummaryLoading] = useState(false);
 
-  // Use today's date as the end date for all API calls
   const today = new Date();
 
   const fetchAvailableTags = async () => {
@@ -179,12 +268,11 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
     }
   };
 
-  // Effect to fetch available tags on mount
   useEffect(() => {
     fetchAvailableTags();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [accessToken]);
 
-  // Effect for DAU/WAU/MAU data (independent of date picker)
   useEffect(() => {
     if (!accessToken) return;
 
@@ -195,9 +283,9 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
     }, 50);
 
     return () => clearTimeout(timeoutId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [accessToken, userAgentFilter, selectedTags]);
 
-  // Effect for summary data (depends on date picker)
   useEffect(() => {
     if (!dateValue.from || !dateValue.to) return;
 
@@ -206,9 +294,9 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
     }, 50);
 
     return () => clearTimeout(timeoutId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [accessToken, dateValue, selectedTags]);
 
-  // Helper function to extract user agent from tag
   const extractUserAgent = (tag: string): string => {
     if (tag.startsWith("User-Agent: ")) {
       return tag.replace("User-Agent: ", "");
@@ -216,7 +304,6 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
     return tag;
   };
 
-  // Helper function to truncate user agent name (used with Ant Design Tooltip)
   const truncateUserAgent = (userAgent: string): string => {
     if (userAgent.length > 15) {
       return userAgent.substring(0, 15) + "...";
@@ -224,9 +311,7 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
     return userAgent;
   };
 
-  // Get all user agents for each chart type based on their specific data
   const getAllTagsForData = (data: TagActiveUsersResponse[]) => {
-    // Aggregate total active users per tag
     const tagTotals = data.reduce(
       (acc, item) => {
         acc[item.tag] = (acc[item.tag] || 0) + item.active_users;
@@ -235,7 +320,6 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
       {} as Record<string, number>,
     );
 
-    // Sort by total active users and return all tags
     return Object.entries(tagTotals)
       .sort(([, a], [, b]) => b - a)
       .map(([tag]) => tag);
@@ -245,20 +329,17 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
   const allWauTags = getAllTagsForData(wauData.results).slice(0, MAX_CATEGORIES);
   const allMauTags = getAllTagsForData(mauData.results).slice(0, MAX_CATEGORIES);
 
-  // Prepare daily chart data (DAU) - always show last 7 days
   const generateDailyChartData = () => {
     const chartData: any[] = [];
     const endDate = new Date();
 
-    // Generate all 7 days
     for (let i = 6; i >= 0; i--) {
       const date = new Date(endDate);
       date.setDate(date.getDate() - i);
-      const dateStr = date.toISOString().split("T")[0]; // YYYY-MM-DD format
+      const dateStr = date.toISOString().split("T")[0];
 
       const dayEntry: any = { date: dateStr };
 
-      // Initialize all user agents to 0
       allDauTags.forEach((tag) => {
         const userAgent = extractUserAgent(tag);
         dayEntry[userAgent] = 0;
@@ -267,7 +348,6 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
       chartData.push(dayEntry);
     }
 
-    // Fill in actual data
     dauData.results.forEach((item) => {
       const userAgent = extractUserAgent(item.tag);
       const dayEntry = chartData.find((d) => d.date === item.date);
@@ -281,15 +361,12 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
 
   const dailyChartData = generateDailyChartData();
 
-  // Prepare weekly chart data (WAU) - always show all 7 weeks
   const generateWeeklyChartData = () => {
     const chartData: any[] = [];
 
-    // Generate all 7 weeks (Week 1 through Week 7)
     for (let weekNum = 1; weekNum <= 7; weekNum++) {
       const weekEntry: any = { week: `Week ${weekNum}` };
 
-      // Initialize all user agents to 0
       allWauTags.forEach((tag) => {
         const userAgent = extractUserAgent(tag);
         weekEntry[userAgent] = 0;
@@ -298,10 +375,8 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
       chartData.push(weekEntry);
     }
 
-    // Fill in actual data
     wauData.results.forEach((item) => {
       const userAgent = extractUserAgent(item.tag);
-      // Extract week number from the date field (e.g., "Week 1 (Jul 27)" -> "Week 1")
       const weekMatch = item.date.match(/Week (\d+)/);
       if (weekMatch) {
         const weekLabel = `Week ${weekMatch[1]}`;
@@ -317,15 +392,12 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
 
   const weeklyChartData = generateWeeklyChartData();
 
-  // Prepare monthly chart data (MAU) - always show all 7 months
   const generateMonthlyChartData = () => {
     const chartData: any[] = [];
 
-    // Generate all 7 months (Month 1 through Month 7)
     for (let monthNum = 1; monthNum <= 7; monthNum++) {
       const monthEntry: any = { month: `Month ${monthNum}` };
 
-      // Initialize all user agents to 0
       allMauTags.forEach((tag) => {
         const userAgent = extractUserAgent(tag);
         monthEntry[userAgent] = 0;
@@ -334,10 +406,8 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
       chartData.push(monthEntry);
     }
 
-    // Fill in actual data
     mauData.results.forEach((item) => {
       const userAgent = extractUserAgent(item.tag);
-      // Extract month number from the date field (e.g., "Month 1 (Jul)" -> "Month 1")
       const monthMatch = item.date.match(/Month (\d+)/);
       if (monthMatch) {
         const monthLabel = `Month ${monthMatch[1]}`;
@@ -353,8 +423,10 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
 
   const monthlyChartData = generateMonthlyChartData();
 
-  // Format numbers with K, M abbreviations
-  const formatAbbreviatedNumber = (value: number, decimalPlaces: number = 0): string => {
+  const formatAbbreviatedNumber = (
+    value: number,
+    decimalPlaces: number = 0,
+  ): string => {
     if (value >= 100000000) {
       return (value / 1000000).toFixed(decimalPlaces) + "M";
     } else if (value >= 10000000) {
@@ -370,197 +442,228 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
     }
   };
 
+  const tagOptions = availableTags.map((tag) => {
+    const userAgent = extractUserAgent(tag);
+    const displayName =
+      userAgent.length > 50 ? `${userAgent.substring(0, 50)}...` : userAgent;
+    return { label: displayName, value: tag, title: userAgent };
+  });
+
   return (
     <div className="space-y-6 mt-6">
       {/* Summary Section Card */}
-      <Card>
+      <Card className="p-6">
         <div className="space-y-6">
           <div className="flex justify-between items-start">
             <div>
-              <Title>Summary by User Agent</Title>
-              <Subtitle>Performance metrics for different user agents</Subtitle>
+              <h2 className="text-2xl font-semibold m-0">
+                Summary by User Agent
+              </h2>
+              <p className="text-sm text-muted-foreground m-0">
+                Performance metrics for different user agents
+              </p>
             </div>
 
-            {/* User Agent Filter */}
             <div className="w-96">
-              <Text className="text-sm font-medium block mb-2">Filter by User Agents</Text>
-              <Select
-                mode="multiple"
-                placeholder="All User Agents"
+              <Label className="text-sm font-medium block mb-2">
+                Filter by User Agents
+              </Label>
+              <TagMultiSelect
                 value={selectedTags}
                 onChange={setSelectedTags}
-                style={{ width: "100%" }}
-                showSearch={true}
-                allowClear={true}
-                loading={tagsLoading}
-                optionFilterProp="label"
-                className="rounded-md"
-                maxTagCount="responsive"
-              >
-                {availableTags.map((tag) => {
-                  const userAgent = extractUserAgent(tag);
-                  const displayName = userAgent.length > 50 ? `${userAgent.substring(0, 50)}...` : userAgent;
-                  return (
-                    <Select.Option key={tag} value={tag} label={displayName} title={userAgent}>
-                      {displayName}
-                    </Select.Option>
-                  );
-                })}
-              </Select>
+                options={tagOptions}
+                placeholder="All User Agents"
+              />
             </div>
           </div>
 
-          {/* Date Range Picker is controlled by parent component */}
-
           {/* Top 4 User Agents Cards */}
           {summaryLoading ? (
             <ChartLoader isDateChanging={false} />
           ) : (
-            <Grid numItems={4} className="gap-4">
+            <div className="grid grid-cols-4 gap-4">
               {(summaryData.results || []).slice(0, 4).map((tag, index) => {
                 const userAgent = extractUserAgent(tag.tag);
                 const displayName = truncateUserAgent(userAgent);
                 return (
-                  <Card key={index}>
-                    <Tooltip title={userAgent} placement="top">
-                      <Title className="truncate">{displayName}</Title>
-                    </Tooltip>
+                  <Card key={index} className="p-4">
+                    <TooltipProvider>
+                      <ShTooltip>
+                        <TooltipTrigger asChild>
+                          <h3 className="text-lg font-semibold truncate">
+                            {displayName}
+                          </h3>
+                        </TooltipTrigger>
+                        <TooltipContent>{userAgent}</TooltipContent>
+                      </ShTooltip>
+                    </TooltipProvider>
                     <div className="mt-4 space-y-3">
                       <div>
-                        <Text className="text-sm text-gray-600">Success Requests</Text>
-                        <Metric className="text-lg">{formatAbbreviatedNumber(tag.successful_requests)}</Metric>
+                        <span className="text-sm text-muted-foreground">
+                          Success Requests
+                        </span>
+                        <div className="text-lg font-semibold">
+                          {formatAbbreviatedNumber(tag.successful_requests)}
+                        </div>
                       </div>
                       <div>
-                        <Text className="text-sm text-gray-600">Total Tokens</Text>
-                        <Metric className="text-lg">{formatAbbreviatedNumber(tag.total_tokens)}</Metric>
+                        <span className="text-sm text-muted-foreground">
+                          Total Tokens
+                        </span>
+                        <div className="text-lg font-semibold">
+                          {formatAbbreviatedNumber(tag.total_tokens)}
+                        </div>
                       </div>
                       <div>
-                        <Text className="text-sm text-gray-600">Total Cost</Text>
-                        <Metric className="text-lg">${formatAbbreviatedNumber(tag.total_spend, 4)}</Metric>
+                        <span className="text-sm text-muted-foreground">
+                          Total Cost
+                        </span>
+                        <div className="text-lg font-semibold">
+                          ${formatAbbreviatedNumber(tag.total_spend, 4)}
+                        </div>
                       </div>
                     </div>
                   </Card>
                 );
               })}
-              {/* Fill remaining slots if less than 4 agents */}
-              {Array.from({ length: Math.max(0, 4 - (summaryData.results || []).length) }).map((_, index) => (
-                <Card key={`empty-${index}`}>
-                  <Title>No Data</Title>
+              {Array.from({
+                length: Math.max(0, 4 - (summaryData.results || []).length),
+              }).map((_, index) => (
+                <Card key={`empty-${index}`} className="p-4">
+                  <h3 className="text-lg font-semibold">No Data</h3>
                   <div className="mt-4 space-y-3">
                     <div>
-                      <Text className="text-sm text-gray-600">Success Requests</Text>
-                      <Metric className="text-lg">-</Metric>
+                      <span className="text-sm text-muted-foreground">
+                        Success Requests
+                      </span>
+                      <div className="text-lg font-semibold">-</div>
                     </div>
                     <div>
-                      <Text className="text-sm text-gray-600">Total Tokens</Text>
-                      <Metric className="text-lg">-</Metric>
+                      <span className="text-sm text-muted-foreground">
+                        Total Tokens
+                      </span>
+                      <div className="text-lg font-semibold">-</div>
                     </div>
                     <div>
-                      <Text className="text-sm text-gray-600">Total Cost</Text>
-                      <Metric className="text-lg">-</Metric>
+                      <span className="text-sm text-muted-foreground">
+                        Total Cost
+                      </span>
+                      <div className="text-lg font-semibold">-</div>
                     </div>
                   </div>
                 </Card>
               ))}
-            </Grid>
+            </div>
           )}
         </div>
       </Card>
 
-      {/* Main TabGroup for DAU/WAU/MAU vs Per User Usage */}
-      <Card>
-        <TabGroup>
-          <TabList className="mb-6">
-            <Tab>DAU/WAU/MAU</Tab>
-            <Tab>Per User Usage (Last 30 Days)</Tab>
-          </TabList>
+      {/* Main Tabs for DAU/WAU/MAU vs Per User Usage */}
+      <Card className="p-6">
+        <Tabs defaultValue="dau-wau-mau">
+          <TabsList className="mb-6">
+            <TabsTrigger value="dau-wau-mau">DAU/WAU/MAU</TabsTrigger>
+            <TabsTrigger value="per-user">
+              Per User Usage (Last 30 Days)
+            </TabsTrigger>
+          </TabsList>
 
-          <TabPanels>
-            {/* DAU/WAU/MAU Tab Panel */}
-            <TabPanel>
-              <div className="mb-6">
-                <Title>DAU, WAU & MAU per Agent</Title>
-                <Subtitle>Active users across different time periods</Subtitle>
-              </div>
+          <TabsContent value="dau-wau-mau">
+            <div className="mb-6">
+              <h2 className="text-2xl font-semibold m-0">
+                DAU, WAU & MAU per Agent
+              </h2>
+              <p className="text-sm text-muted-foreground m-0">
+                Active users across different time periods
+              </p>
+            </div>
 
-              <TabGroup>
-                <TabList className="mb-6">
-                  <Tab>DAU</Tab>
-                  <Tab>WAU</Tab>
-                  <Tab>MAU</Tab>
-                </TabList>
+            <Tabs defaultValue="dau">
+              <TabsList className="mb-6">
+                <TabsTrigger value="dau">DAU</TabsTrigger>
+                <TabsTrigger value="wau">WAU</TabsTrigger>
+                <TabsTrigger value="mau">MAU</TabsTrigger>
+              </TabsList>
 
-                <TabPanels>
-                  <TabPanel>
-                    <div className="mb-4">
-                      <Title className="text-lg">Daily Active Users - Last 7 Days</Title>
-                    </div>
-                    {dauLoading ? (
-                      <ChartLoader isDateChanging={false} />
-                    ) : (
-                      <BarChart
-                        data={dailyChartData}
-                        index="date"
-                        categories={allDauTags.map(extractUserAgent)}
-                        valueFormatter={(value: number) => formatAbbreviatedNumber(value)}
-                        yAxisWidth={60}
-                        showLegend={true}
-                        stack={true}
-                      />
-                    )}
-                  </TabPanel>
+              <TabsContent value="dau">
+                <div className="mb-4">
+                  <h3 className="text-lg font-semibold">
+                    Daily Active Users - Last 7 Days
+                  </h3>
+                </div>
+                {dauLoading ? (
+                  <ChartLoader isDateChanging={false} />
+                ) : (
+                  <BarChart
+                    data={dailyChartData}
+                    index="date"
+                    categories={allDauTags.map(extractUserAgent)}
+                    valueFormatter={(value: number) =>
+                      formatAbbreviatedNumber(value)
+                    }
+                    yAxisWidth={60}
+                    showLegend={true}
+                    stack={true}
+                  />
+                )}
+              </TabsContent>
 
-                  <TabPanel>
-                    <div className="mb-4">
-                      <Title className="text-lg">Weekly Active Users - Last 7 Weeks</Title>
-                    </div>
-                    {wauLoading ? (
-                      <ChartLoader isDateChanging={false} />
-                    ) : (
-                      <BarChart
-                        data={weeklyChartData}
-                        index="week"
-                        categories={allWauTags.map(extractUserAgent)}
-                        valueFormatter={(value: number) => formatAbbreviatedNumber(value)}
-                        yAxisWidth={60}
-                        showLegend={true}
-                        stack={true}
-                      />
-                    )}
-                  </TabPanel>
+              <TabsContent value="wau">
+                <div className="mb-4">
+                  <h3 className="text-lg font-semibold">
+                    Weekly Active Users - Last 7 Weeks
+                  </h3>
+                </div>
+                {wauLoading ? (
+                  <ChartLoader isDateChanging={false} />
+                ) : (
+                  <BarChart
+                    data={weeklyChartData}
+                    index="week"
+                    categories={allWauTags.map(extractUserAgent)}
+                    valueFormatter={(value: number) =>
+                      formatAbbreviatedNumber(value)
+                    }
+                    yAxisWidth={60}
+                    showLegend={true}
+                    stack={true}
+                  />
+                )}
+              </TabsContent>
 
-                  <TabPanel>
-                    <div className="mb-4">
-                      <Title className="text-lg">Monthly Active Users - Last 7 Months</Title>
-                    </div>
-                    {mauLoading ? (
-                      <ChartLoader isDateChanging={false} />
-                    ) : (
-                      <BarChart
-                        data={monthlyChartData}
-                        index="month"
-                        categories={allMauTags.map(extractUserAgent)}
-                        valueFormatter={(value: number) => formatAbbreviatedNumber(value)}
-                        yAxisWidth={60}
-                        showLegend={true}
-                        stack={true}
-                      />
-                    )}
-                  </TabPanel>
-                </TabPanels>
-              </TabGroup>
-            </TabPanel>
+              <TabsContent value="mau">
+                <div className="mb-4">
+                  <h3 className="text-lg font-semibold">
+                    Monthly Active Users - Last 7 Months
+                  </h3>
+                </div>
+                {mauLoading ? (
+                  <ChartLoader isDateChanging={false} />
+                ) : (
+                  <BarChart
+                    data={monthlyChartData}
+                    index="month"
+                    categories={allMauTags.map(extractUserAgent)}
+                    valueFormatter={(value: number) =>
+                      formatAbbreviatedNumber(value)
+                    }
+                    yAxisWidth={60}
+                    showLegend={true}
+                    stack={true}
+                  />
+                )}
+              </TabsContent>
+            </Tabs>
+          </TabsContent>
 
-            {/* Per User Usage Tab Panel */}
-            <TabPanel>
-              <PerUserUsage
-                accessToken={accessToken}
-                selectedTags={selectedTags}
-                formatAbbreviatedNumber={formatAbbreviatedNumber}
-              />
-            </TabPanel>
-          </TabPanels>
-        </TabGroup>
+          <TabsContent value="per-user">
+            <PerUserUsage
+              accessToken={accessToken}
+              selectedTags={selectedTags}
+              formatAbbreviatedNumber={formatAbbreviatedNumber}
+            />
+          </TabsContent>
+        </Tabs>
       </Card>
     </div>
   );
diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx
index 1c1dfa85c80..fcd691463e9 100644
--- a/ui/litellm-dashboard/src/components/view_users.tsx
+++ b/ui/litellm-dashboard/src/components/view_users.tsx
@@ -1,10 +1,12 @@
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
 import React, { useEffect, useState } from "react";
 
-import { Button } from "antd";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import BulkEditUserModal from "./BulkEditUsers";
 import { CreateUserButton } from "./CreateUserButton";
+import DefaultUserSettings from "./DefaultUserSettings";
 import EditUserModal from "./edit_user";
 import {
   getPossibleUserRoles,
@@ -20,17 +22,12 @@ import { updateExistingKeys } from "@/utils/dataUtils";
 import { isAdminRole, isProxyAdminRole } from "@/utils/roles";
 import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Typography } from "antd";
 import DeleteResourceModal from "./common_components/DeleteResourceModal";
 import NotificationsManager from "./molecules/notifications_manager";
 import { modelAvailableCall, userDeleteCall } from "./networking";
-import DefaultUserSettings from "./DefaultUserSettings";
 import { columns } from "./view_users/columns";
 import { UserDataTable } from "./view_users/table";
 import { UserInfo } from "./view_users/types";
-import { Skeleton } from "antd";
-
-const { Text, Title } = Typography;
 
 interface ViewUserDashboardProps {
   accessToken: string | null;
@@ -40,7 +37,9 @@ interface ViewUserDashboardProps {
   userID: string | null;
   teams: any[] | null;
   setKeys: React.Dispatch<React.SetStateAction<object[] | null>>;
-  orgAdminOrgIds?: Array<{organization_id: string, organization_alias: string}> | null;
+  orgAdminOrgIds?:
+    | Array<{ organization_id: string; organization_alias: string }>
+    | null;
 }
 
 interface FilterState {
@@ -71,7 +70,14 @@ const initialFilters: FilterState = {
   sort_order: "desc",
 };
 
-const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, token, userRole, userID, teams, orgAdminOrgIds }) => {
+const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
+  accessToken,
+  token,
+  userRole,
+  userID,
+  teams,
+  orgAdminOrgIds,
+}) => {
   const isProxyAdmin = userRole ? isProxyAdminRole(userRole) : false;
   const queryClient = useQueryClient();
   const [currentPage, setCurrentPage] = useState(1);
@@ -80,11 +86,15 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isDeletingUser, setIsDeletingUser] = useState(false);
   const [userToDelete, setUserToDelete] = useState<UserInfo | null>(null);
-  const [activeTab, setActiveTab] = useState("users");
   const [filters, setFilters] = useState<FilterState>(initialFilters);
-  const [debouncedFilters, setDebouncedFilters, debouncer] = useDebouncedState(filters, { wait: 300 });
-  const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] = useState(false);
-  const [invitationLinkData, setInvitationLinkData] = useState<InvitationLink | null>(null);
+  const [debouncedFilters, setDebouncedFilters, debouncer] = useDebouncedState(
+    filters,
+    { wait: 300 },
+  );
+  const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] =
+    useState(false);
+  const [invitationLinkData, setInvitationLinkData] =
+    useState<InvitationLink | null>(null);
   const [baseUrl, setBaseUrl] = useState<string | null>(null);
   const [selectedUsers, setSelectedUsers] = useState<UserInfo[]>([]);
   const [isBulkEditModalVisible, setIsBulkEditModalVisible] = useState(false);
@@ -106,7 +116,6 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
     setBaseUrl(getProxyBaseUrl());
   }, []);
 
-  // Fetch available models for bulk edit
   useEffect(() => {
     const fetchUserModels = async () => {
       try {
@@ -114,8 +123,14 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
           return;
         }
 
-        const model_available = await modelAvailableCall(accessToken, userID, userRole);
-        let available_model_names = model_available["data"].map((element: { id: string }) => element.id);
+        const model_available = await modelAvailableCall(
+          accessToken,
+          userID,
+          userRole,
+        );
+        let available_model_names = model_available["data"].map(
+          (element: { id: string }) => element.id,
+        );
         console.log("available_model_names:", available_model_names);
         setUserModels(available_model_names);
       } catch (error) {
@@ -159,12 +174,16 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
         setIsDeletingUser(true);
         await userDeleteCall(accessToken, [userToDelete.user_id]);
 
-        // Update the user list after deletion
-        queryClient.setQueriesData<UserListResponse>({ queryKey: ["userList"] }, (previousData) => {
-          if (previousData === undefined) return previousData;
-          const updatedUsers = previousData.users.filter((user) => user.user_id !== userToDelete.user_id);
-          return { ...previousData, users: updatedUsers };
-        });
+        queryClient.setQueriesData<UserListResponse>(
+          { queryKey: ["userList"] },
+          (previousData) => {
+            if (previousData === undefined) return previousData;
+            const updatedUsers = previousData.users.filter(
+              (user) => user.user_id !== userToDelete.user_id,
+            );
+            return { ...previousData, users: updatedUsers };
+          },
+        );
 
         NotificationsManager.success("User deleted successfully");
       } catch (error) {
@@ -197,25 +216,29 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
 
     try {
       const response = await userUpdateUserCall(accessToken, editedUser, null);
-      queryClient.setQueriesData<UserListResponse>({ queryKey: ["userList"] }, (previousData) => {
-        if (previousData === undefined) return previousData;
-        const updatedUsers = previousData.users.map((user) => {
-          if (user.user_id === response.data.user_id) {
-            return updateExistingKeys(user, response.data);
-          }
-          return user;
-        });
+      queryClient.setQueriesData<UserListResponse>(
+        { queryKey: ["userList"] },
+        (previousData) => {
+          if (previousData === undefined) return previousData;
+          const updatedUsers = previousData.users.map((user) => {
+            if (user.user_id === response.data.user_id) {
+              return updateExistingKeys(user, response.data);
+            }
+            return user;
+          });
 
-        return { ...previousData, users: updatedUsers };
-      });
+          return { ...previousData, users: updatedUsers };
+        },
+      );
 
-      NotificationsManager.success(`User ${editedUser.user_id} updated successfully`);
+      NotificationsManager.success(
+        `User ${editedUser.user_id} updated successfully`,
+      );
     } catch (error) {
       console.error("There was an error updating the user", error);
     }
     setSelectedUser(null);
     setEditModalVisible(false);
-    // Close the modal
   };
 
   const handlePageChange = async (newPage: number) => {
@@ -241,14 +264,16 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
   };
 
   const handleBulkEditSuccess = () => {
-    // Refresh the user list
     queryClient.invalidateQueries({ queryKey: ["userList"] });
     setSelectedUsers([]);
     setSelectionMode(false);
   };
 
   const userListQuery = useQuery({
-    queryKey: ["userList", { debouncedFilter: debouncedFilters, currentPage, orgAdminOrgIds }],
+    queryKey: [
+      "userList",
+      { debouncedFilter: debouncedFilters, currentPage, orgAdminOrgIds },
+    ],
     queryFn: async () => {
       if (!accessToken) throw new Error("Access token required");
 
@@ -263,7 +288,9 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
         debouncedFilters.sso_user_id || null,
         debouncedFilters.sort_by,
         debouncedFilters.sort_order,
-        orgAdminOrgIds ? orgAdminOrgIds.map((o) => o.organization_id) : null,
+        orgAdminOrgIds
+          ? orgAdminOrgIds.map((o) => o.organization_id)
+          : null,
       );
     },
     enabled: Boolean(accessToken && token && userRole && userID),
@@ -290,27 +317,60 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
     },
     handleDelete,
     handleResetPassword,
-    () => { }, // placeholder function, will be overridden in UserDataTable
+    () => {}, // placeholder function, will be overridden in UserDataTable
   );
 
+  const dataTableProps = {
+    data: userListQuery.data?.users || [],
+    columns: tableColumns,
+    isLoading: userListQuery.isLoading,
+    accessToken,
+    userRole,
+    onSortChange: handleSortChange,
+    currentSort: {
+      sortBy: filters.sort_by,
+      sortOrder: filters.sort_order,
+    },
+    possibleUIRoles,
+    handleEdit: (user: UserInfo) => {
+      setSelectedUser(user);
+      setEditModalVisible(true);
+    },
+    handleDelete,
+    handleResetPassword,
+    onSelectionChange: handleSelectionChange,
+    filters,
+    updateFilters,
+    initialFilters,
+    teams,
+    userListResponse,
+    currentPage,
+    handlePageChange,
+  };
+
   return (
     <div className="w-full p-8 overflow-hidden">
       <div className="flex items-center justify-between mb-4">
         <div className="flex space-x-3">
           {userListQuery.isLoading ? (
             <>
-              <Skeleton.Button active size="default" shape="default" style={{ width: 110, height: 36 }} />
-              <Skeleton.Button active size="default" shape="default" style={{ width: 145, height: 36 }} />
-              <Skeleton.Button active size="default" shape="default" style={{ width: 110, height: 36 }} />
+              <Skeleton className="h-9 w-[110px]" />
+              <Skeleton className="h-9 w-[145px]" />
+              <Skeleton className="h-9 w-[110px]" />
             </>
           ) : userID && accessToken ? (
             <>
-              <CreateUserButton userID={userID} accessToken={accessToken} teams={teams} possibleUIRoles={possibleUIRoles} />
+              <CreateUserButton
+                userID={userID}
+                accessToken={accessToken}
+                teams={teams}
+                possibleUIRoles={possibleUIRoles}
+              />
 
               {isProxyAdmin && (
                 <Button
                   onClick={handleToggleSelectionMode}
-                  type={selectionMode ? "primary" : "default"}
+                  variant={selectionMode ? "default" : "outline"}
                   className="flex items-center"
                 >
                   {selectionMode ? "Cancel Selection" : "Select Users"}
@@ -318,7 +378,11 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
               )}
 
               {isProxyAdmin && selectionMode && (
-                <Button type="primary" onClick={handleBulkEdit} disabled={selectedUsers.length === 0} className="flex items-center">
+                <Button
+                  onClick={handleBulkEdit}
+                  disabled={selectedUsers.length === 0}
+                  className="flex items-center"
+                >
                   Bulk Edit ({selectedUsers.length} selected)
                 </Button>
               )}
@@ -328,90 +392,43 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
       </div>
 
       {isProxyAdmin ? (
-        <TabGroup defaultIndex={0} onIndexChange={(index) => setActiveTab(index === 0 ? "users" : "settings")}>
-          <TabList className="mb-4">
-            <Tab>Users</Tab>
-            <Tab>Default User Settings</Tab>
-          </TabList>
+        <Tabs defaultValue="users">
+          <TabsList className="mb-4">
+            <TabsTrigger value="users">Users</TabsTrigger>
+            <TabsTrigger value="settings">Default User Settings</TabsTrigger>
+          </TabsList>
 
-          <TabPanels>
-            <TabPanel>
-              <UserDataTable
-                data={userListQuery.data?.users || []}
-                columns={tableColumns}
-                isLoading={userListQuery.isLoading}
+          <TabsContent value="users">
+            <UserDataTable
+              {...dataTableProps}
+              enableSelection={selectionMode}
+              selectedUsers={selectedUsers}
+            />
+          </TabsContent>
+
+          <TabsContent value="settings">
+            {!userID || !userRole || !accessToken ? (
+              <div className="flex flex-col gap-3 p-6">
+                <Skeleton className="h-6 w-48" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-3/4" />
+              </div>
+            ) : (
+              <DefaultUserSettings
                 accessToken={accessToken}
-                userRole={userRole}
-                onSortChange={handleSortChange}
-                currentSort={{
-                  sortBy: filters.sort_by,
-                  sortOrder: filters.sort_order,
-                }}
                 possibleUIRoles={possibleUIRoles}
-                handleEdit={(user) => {
-                  setSelectedUser(user);
-                  setEditModalVisible(true);
-                }}
-                handleDelete={handleDelete}
-                handleResetPassword={handleResetPassword}
-                enableSelection={selectionMode}
-                selectedUsers={selectedUsers}
-                onSelectionChange={handleSelectionChange}
-                filters={filters}
-                updateFilters={updateFilters}
-                initialFilters={initialFilters}
-                teams={teams}
-                userListResponse={userListResponse}
-                currentPage={currentPage}
-                handlePageChange={handlePageChange}
+                userID={userID}
+                userRole={userRole}
               />
-            </TabPanel>
-
-            <TabPanel>
-              {!userID || !userRole || !accessToken ? (
-                <div className="flex justify-center items-center h-64">
-                  <Skeleton active paragraph={{ rows: 4 }} />
-                </div>
-              ) : (
-                <DefaultUserSettings
-                  accessToken={accessToken}
-                  possibleUIRoles={possibleUIRoles}
-                  userID={userID}
-                  userRole={userRole}
-                />
-              )}
-            </TabPanel>
-          </TabPanels>
-        </TabGroup>
+            )}
+          </TabsContent>
+        </Tabs>
       ) : (
         <UserDataTable
-          data={userListQuery.data?.users || []}
-          columns={tableColumns}
-          isLoading={userListQuery.isLoading}
-          accessToken={accessToken}
-          userRole={userRole}
-          onSortChange={handleSortChange}
-          currentSort={{
-            sortBy: filters.sort_by,
-            sortOrder: filters.sort_order,
-          }}
-          possibleUIRoles={possibleUIRoles}
-          handleEdit={(user) => {
-            setSelectedUser(user);
-            setEditModalVisible(true);
-          }}
-          handleDelete={handleDelete}
-          handleResetPassword={handleResetPassword}
+          {...dataTableProps}
           enableSelection={false}
           selectedUsers={[]}
-          onSelectionChange={handleSelectionChange}
-          filters={filters}
-          updateFilters={updateFilters}
-          initialFilters={initialFilters}
-          teams={teams}
-          userListResponse={userListResponse}
-          currentPage={currentPage}
-          handlePageChange={handlePageChange}
         />
       )}
 
@@ -435,7 +452,10 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
           {
             label: "Global Proxy Role",
             value:
-              (userToDelete && possibleUIRoles?.[userToDelete.user_role]?.ui_label) || userToDelete?.user_role || "-",
+              (userToDelete &&
+                possibleUIRoles?.[userToDelete.user_role]?.ui_label) ||
+              userToDelete?.user_role ||
+              "-",
           },
           { label: "Total Spend (USD)", value: userToDelete?.spend?.toFixed(2) },
         ]}
diff --git a/ui/litellm-dashboard/src/components/view_users/user_info_view.test.tsx b/ui/litellm-dashboard/src/components/view_users/user_info_view.test.tsx
index 481a2c6668d..5afdd61579f 100644
--- a/ui/litellm-dashboard/src/components/view_users/user_info_view.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_users/user_info_view.test.tsx
@@ -90,8 +90,15 @@ describe("UserInfoView", () => {
   });
 
   it("should render the user alias after loading", async () => {
+    const user = userEvent.setup();
     render(<UserInfoView {...defaultProps} />);
 
+    // The user alias is shown on the Details tab; activate it first.
+    await waitFor(() => {
+      expect(screen.getByRole("tab", { name: /details/i })).toBeInTheDocument();
+    });
+    await user.click(screen.getByRole("tab", { name: /details/i }));
+
     const aliases = await screen.findAllByText("Test Alias");
     expect(aliases.length).toBeGreaterThan(0);
   });
@@ -203,9 +210,13 @@ describe("UserInfoView", () => {
       expect(screen.getByText("Remove from Team")).toBeInTheDocument();
     });
 
-    // The DeleteResourceModal's OK button has text "Delete" - find it within the modal
-    const modal = screen.getByText("Remove from Team").closest(".ant-modal") as HTMLElement;
-    const deleteConfirmButton = within(modal).getByRole("button", { name: /delete/i });
+    // The DeleteResourceModal's OK button has text "Delete" - find it within the alert dialog
+    const modal = screen
+      .getByText("Remove from Team")
+      .closest('[role="alertdialog"]') as HTMLElement;
+    const deleteConfirmButton = within(modal).getByRole("button", {
+      name: /delete/i,
+    });
     await user.click(deleteConfirmButton);
 
     await waitFor(() => {
diff --git a/ui/litellm-dashboard/src/components/view_users/user_info_view.tsx b/ui/litellm-dashboard/src/components/view_users/user_info_view.tsx
index 21b55306f0b..8739248f229 100644
--- a/ui/litellm-dashboard/src/components/view_users/user_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/view_users/user_info_view.tsx
@@ -1,10 +1,47 @@
 import React, { useState } from "react";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
-  Card, Text, Button, Grid, Tab, TabList, TabGroup, TabPanel, TabPanels, Title,
-  Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell,
-} from "@tremor/react";
-import { ArrowLeft as ArrowLeftIcon, Trash2 as TrashIcon, RefreshCcw as RefreshIcon, Plus as PlusIcon } from "lucide-react";
+  ArrowLeft as ArrowLeftIcon,
+  Trash2 as TrashIcon,
+  RefreshCcw as RefreshIcon,
+  Plus as PlusIcon,
+  Copy as CopyIcon,
+  Check as CheckIcon,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
 import {
   userGetInfoV2,
   UserInfoV2Response,
@@ -19,12 +56,13 @@ import {
   teamMemberDeleteCall,
   Member,
 } from "../networking";
-import { Button as AntdButton, Modal, Select as AntdSelect, Form, Tooltip } from "antd";
 import { rolesWithWriteAccess } from "../../utils/roles";
 import { UserEditView } from "../user_edit_view";
 import OnboardingModal, { InvitationLink } from "../onboarding_link";
-import { formatNumberWithCommas, copyToClipboard as utilCopyToClipboard } from "@/utils/dataUtils";
-import { CopyIcon, CheckIcon } from "lucide-react";
+import {
+  formatNumberWithCommas,
+  copyToClipboard as utilCopyToClipboard,
+} from "@/utils/dataUtils";
 import NotificationsManager from "../molecules/notifications_manager";
 import { getBudgetDurationLabel } from "../common_components/budget_duration_dropdown";
 import DeleteResourceModal from "../common_components/DeleteResourceModal";
@@ -63,18 +101,26 @@ export default function UserInfoView({
   const [isLoading, setIsLoading] = useState(true);
   const [isEditing, setIsEditing] = useState(startInEditMode);
   const [userModels, setUserModels] = useState<string[]>([]);
-  const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] = useState(false);
-  const [invitationLinkData, setInvitationLinkData] = useState<InvitationLink | null>(null);
+  const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] =
+    useState(false);
+  const [invitationLinkData, setInvitationLinkData] =
+    useState<InvitationLink | null>(null);
   const [baseUrl, setBaseUrl] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState(initialTab);
+  const [activeTab, setActiveTab] = useState(
+    initialTab === 1 ? "details" : "overview",
+  );
   const [copiedStates, setCopiedStates] = useState<Record<string, boolean>>({});
   const [isTeamsExpanded, setIsTeamsExpanded] = useState(false);
   const [isAddTeamModalOpen, setIsAddTeamModalOpen] = useState(false);
   const [isRemoveTeamModalOpen, setIsRemoveTeamModalOpen] = useState(false);
-  const [teamToRemove, setTeamToRemove] = useState<TeamDisplayInfo | null>(null);
+  const [teamToRemove, setTeamToRemove] = useState<TeamDisplayInfo | null>(
+    null,
+  );
   const [isAddingTeam, setIsAddingTeam] = useState(false);
   const [isRemovingTeam, setIsRemovingTeam] = useState(false);
-  const [allTeams, setAllTeams] = useState<Array<{ team_id: string; team_alias: string }>>([]);
+  const [allTeams, setAllTeams] = useState<
+    Array<{ team_id: string; team_alias: string }>
+  >([]);
   const [selectedTeamId, setSelectedTeamId] = useState<string>("");
   const [selectedRole, setSelectedRole] = useState<string>("user");
   const [isLoadingTeams, setIsLoadingTeams] = useState(false);
@@ -84,14 +130,15 @@ export default function UserInfoView({
   }, []);
 
   React.useEffect(() => {
-    console.log(`userId: ${userId}, userRole: ${userRole}, accessToken: ${accessToken}`);
+    console.log(
+      `userId: ${userId}, userRole: ${userRole}, accessToken: ${accessToken}`,
+    );
     const fetchData = async () => {
       try {
         if (!accessToken) return;
         const data = await userGetInfoV2(accessToken, userId);
         setUserData(data);
 
-        // Fetch team details for display (team aliases)
         if (data.teams && data.teams.length > 0) {
           try {
             const teamPromises = data.teams.map(async (teamId: string) => {
@@ -108,14 +155,23 @@ export default function UserInfoView({
             const teams = await Promise.all(teamPromises);
             setTeamDetails(teams);
           } catch {
-            // Fall back to just team IDs
-            setTeamDetails(data.teams.map((id: string) => ({ team_id: id, team_alias: null })));
+            setTeamDetails(
+              data.teams.map((id: string) => ({
+                team_id: id,
+                team_alias: null,
+              })),
+            );
           }
         }
 
-        // Fetch available models
-        const modelDataResponse = await modelAvailableCall(accessToken, userId, userRole || "");
-        const availableModels = modelDataResponse.data.map((model: any) => model.id);
+        const modelDataResponse = await modelAvailableCall(
+          accessToken,
+          userId,
+          userRole || "",
+        );
+        const availableModels = modelDataResponse.data.map(
+          (model: any) => model.id,
+        );
         setUserModels(availableModels);
       } catch (error) {
         console.error("Error fetching user data:", error);
@@ -139,7 +195,7 @@ export default function UserInfoView({
         (teams || []).map((t: any) => ({
           team_id: t.team_id,
           team_alias: t.team_alias || t.team_id,
-        }))
+        })),
       );
     } catch (error) {
       console.error("Error fetching teams:", error);
@@ -155,7 +211,30 @@ export default function UserInfoView({
     fetchAllTeams();
   };
 
-  const handleAddTeamSubmit = async () => {
+  const refreshTeams = async () => {
+    if (!accessToken) return;
+    const data = await userGetInfoV2(accessToken, userId);
+    setUserData(data);
+    if (data.teams && data.teams.length > 0) {
+      const teamPromises = data.teams.map(async (teamId: string) => {
+        try {
+          const teamData = await teamInfoCall(accessToken, teamId);
+          return {
+            team_id: teamId,
+            team_alias: teamData?.team_info?.team_alias || null,
+          };
+        } catch {
+          return { team_id: teamId, team_alias: null };
+        }
+      });
+      setTeamDetails(await Promise.all(teamPromises));
+    } else {
+      setTeamDetails([]);
+    }
+  };
+
+  const handleAddTeamSubmit = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
     if (!accessToken || !selectedTeamId) return;
     setIsAddingTeam(true);
     try {
@@ -166,25 +245,12 @@ export default function UserInfoView({
       await teamMemberAddCall(accessToken, selectedTeamId, member);
       NotificationsManager.success("User added to team successfully");
       setIsAddTeamModalOpen(false);
-      // Re-fetch user data to refresh teams
-      const data = await userGetInfoV2(accessToken, userId);
-      setUserData(data);
-      if (data.teams && data.teams.length > 0) {
-        const teamPromises = data.teams.map(async (teamId: string) => {
-          try {
-            const teamData = await teamInfoCall(accessToken, teamId);
-            return { team_id: teamId, team_alias: teamData?.team_info?.team_alias || null };
-          } catch {
-            return { team_id: teamId, team_alias: null };
-          }
-        });
-        setTeamDetails(await Promise.all(teamPromises));
-      } else {
-        setTeamDetails([]);
-      }
+      await refreshTeams();
     } catch (error: any) {
       console.error("Error adding user to team:", error);
-      NotificationsManager.fromBackend(error?.message || "Failed to add user to team");
+      NotificationsManager.fromBackend(
+        error?.message || "Failed to add user to team",
+      );
     } finally {
       setIsAddingTeam(false);
     }
@@ -207,25 +273,12 @@ export default function UserInfoView({
       NotificationsManager.success("User removed from team successfully");
       setIsRemoveTeamModalOpen(false);
       setTeamToRemove(null);
-      // Re-fetch user data to refresh teams
-      const data = await userGetInfoV2(accessToken, userId);
-      setUserData(data);
-      if (data.teams && data.teams.length > 0) {
-        const teamPromises = data.teams.map(async (teamId: string) => {
-          try {
-            const teamData = await teamInfoCall(accessToken, teamId);
-            return { team_id: teamId, team_alias: teamData?.team_info?.team_alias || null };
-          } catch {
-            return { team_id: teamId, team_alias: null };
-          }
-        });
-        setTeamDetails(await Promise.all(teamPromises));
-      } else {
-        setTeamDetails([]);
-      }
+      await refreshTeams();
     } catch (error: any) {
       console.error("Error removing user from team:", error);
-      NotificationsManager.fromBackend(error?.message || "Failed to remove user from team");
+      NotificationsManager.fromBackend(
+        error?.message || "Failed to remove user from team",
+      );
     } finally {
       setIsRemovingTeam(false);
     }
@@ -237,7 +290,7 @@ export default function UserInfoView({
   };
 
   const availableTeamsForAdd = allTeams.filter(
-    (t) => !teamDetails.some((td) => td.team_id === t.team_id)
+    (t) => !teamDetails.some((td) => td.team_id === t.team_id),
   );
 
   const handleResetPassword = async () => {
@@ -282,9 +335,9 @@ export default function UserInfoView({
     try {
       if (!accessToken || !userData) return;
 
-      const response = await userUpdateUserCall(accessToken, formValues, null);
+      // Response is unused here; local state is updated from form values
+      await userUpdateUserCall(accessToken, formValues, null);
 
-      // Update local state with new values
       setUserData({
         ...userData,
         user_email: formValues.user_email ?? userData.user_email,
@@ -306,10 +359,15 @@ export default function UserInfoView({
   if (isLoading) {
     return (
       <div className="p-4">
-        <Button icon={ArrowLeftIcon} variant="light" onClick={onClose} className="mb-4">
+        <Button
+          variant="ghost"
+          onClick={onClose}
+          className="mb-4 flex items-center gap-1"
+        >
+          <ArrowLeftIcon className="h-4 w-4" />
           Back to Users
         </Button>
-        <Text>Loading user data...</Text>
+        <span>Loading user data...</span>
       </div>
     );
   }
@@ -317,10 +375,15 @@ export default function UserInfoView({
   if (!userData) {
     return (
       <div className="p-4">
-        <Button icon={ArrowLeftIcon} variant="light" onClick={onClose} className="mb-4">
+        <Button
+          variant="ghost"
+          onClick={onClose}
+          className="mb-4 flex items-center gap-1"
+        >
+          <ArrowLeftIcon className="h-4 w-4" />
           Back to Users
         </Button>
-        <Text>User not found</Text>
+        <span>User not found</span>
       </div>
     );
   }
@@ -335,7 +398,6 @@ export default function UserInfoView({
     }
   };
 
-  // Build a legacy-compatible shape for UserEditView
   const userDataForEdit = {
     user_id: userData.user_id,
     user_info: {
@@ -353,36 +415,56 @@ export default function UserInfoView({
     <div className="p-4">
       <div className="flex justify-between items-center mb-6">
         <div>
-          <Button icon={ArrowLeftIcon} variant="light" onClick={onClose} className="mb-4">
+          <Button
+            variant="ghost"
+            onClick={onClose}
+            className="mb-4 flex items-center gap-1"
+          >
+            <ArrowLeftIcon className="h-4 w-4" />
             Back to Users
           </Button>
-          <Title>{userData.user_email || "User"}</Title>
+          <h2 className="text-2xl font-semibold m-0">
+            {userData.user_email || "User"}
+          </h2>
           <div className="flex items-center cursor-pointer">
-            <Text className="text-gray-500 font-mono">{userData.user_id}</Text>
-            <AntdButton
-              type="text"
-              size="small"
-              icon={copiedStates["user-id"] ? <CheckIcon size={12} /> : <CopyIcon size={12} />}
+            <span className="text-muted-foreground font-mono">
+              {userData.user_id}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
               onClick={() => copyToClipboard(userData.user_id, "user-id")}
-              className={`left-2 z-10 transition-all duration-200 ${
+              className={`ml-2 z-10 h-7 w-7 p-0 transition-all duration-200 ${
                 copiedStates["user-id"]
-                  ? "text-green-600 bg-green-50 border-green-200"
-                  : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
+                  ? "text-green-600 bg-green-50 border-green-200 dark:bg-green-950/30"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted"
               }`}
-            />
+              aria-label="Copy user id"
+            >
+              {copiedStates["user-id"] ? (
+                <CheckIcon size={12} />
+              ) : (
+                <CopyIcon size={12} />
+              )}
+            </Button>
           </div>
         </div>
         {userRole && rolesWithWriteAccess.includes(userRole) && (
           <div className="flex items-center space-x-2">
-            <Button icon={RefreshIcon} variant="secondary" onClick={handleResetPassword} className="flex items-center">
+            <Button
+              variant="outline"
+              onClick={handleResetPassword}
+              className="flex items-center"
+            >
+              <RefreshIcon className="h-4 w-4 mr-1" />
               Reset Password
             </Button>
             <Button
-              icon={TrashIcon}
-              variant="secondary"
+              variant="outline"
               onClick={() => setIsDeleteModalOpen(true)}
-              className="flex items-center text-red-500 border-red-500 hover:text-red-600 hover:border-red-600"
+              className="flex items-center text-destructive border-destructive hover:text-destructive hover:border-destructive"
             >
+              <TrashIcon className="h-4 w-4 mr-1" />
               Delete User
             </Button>
           </div>
@@ -400,7 +482,8 @@ export default function UserInfoView({
           {
             label: "Global Proxy Role",
             value:
-              (userData.user_role && possibleUIRoles?.[userData.user_role]?.ui_label) ||
+              (userData.user_role &&
+                possibleUIRoles?.[userData.user_role]?.ui_label) ||
               userData.user_role ||
               "-",
           },
@@ -417,228 +500,263 @@ export default function UserInfoView({
         confirmLoading={isDeletingUser}
       />
 
-      <TabGroup defaultIndex={activeTab} onIndexChange={setActiveTab}>
-        <TabList className="mb-4">
-          <Tab>Overview</Tab>
-          <Tab>Details</Tab>
-        </TabList>
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList className="mb-4">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="details">Details</TabsTrigger>
+        </TabsList>
 
-        <TabPanels>
-          {/* Overview Panel */}
-          <TabPanel>
-            <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-6">
-              <Card>
-                <Text>Spend</Text>
-                <div className="mt-2">
-                  <Title>${formatNumberWithCommas(userData.spend || 0, 4)}</Title>
-                  <Text>
-                    of{" "}
-                    {userData.max_budget !== null
-                      ? `$${formatNumberWithCommas(userData.max_budget, 4)}`
-                      : "Unlimited"}
-                  </Text>
-                </div>
-              </Card>
+        <TabsContent value="overview">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            <Card className="p-4">
+              <span>Spend</span>
+              <div className="mt-2">
+                <h3 className="text-xl font-semibold m-0">
+                  ${formatNumberWithCommas(userData.spend || 0, 4)}
+                </h3>
+                <span>
+                  of{" "}
+                  {userData.max_budget !== null
+                    ? `$${formatNumberWithCommas(userData.max_budget, 4)}`
+                    : "Unlimited"}
+                </span>
+              </div>
+            </Card>
 
-              <Card>
-                <div className="flex justify-between items-center mb-2">
-                  <Text>Teams</Text>
-                  {isProxyAdmin && (
-                    <Button
-                      icon={PlusIcon}
-                      variant="light"
-                      size="xs"
-                      onClick={handleOpenAddTeamModal}
-                    >
-                      Add Team
-                    </Button>
-                  )}
-                </div>
-                <div className="mt-2">
-                  {teamDetails.length > 0 ? (
-                    <div className="max-h-60 overflow-y-auto">
-                    <Table>
-                      <TableHead>
-                        <TableRow>
-                          <TableHeaderCell>Team Name</TableHeaderCell>
-                          {isProxyAdmin && <TableHeaderCell className="text-right">Actions</TableHeaderCell>}
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        {teamDetails.slice(0, isTeamsExpanded ? teamDetails.length : 20).map((team) => (
-                          <TableRow key={team.team_id}>
-                            <TableCell>{team.team_alias || team.team_id}</TableCell>
-                            {isProxyAdmin && (
-                              <TableCell className="text-right">
-                                <Button
-                                  icon={TrashIcon}
-                                  variant="light"
-                                  size="xs"
-                                  color="red"
-                                  onClick={() => handleOpenRemoveTeamModal(team)}
-                                />
-                              </TableCell>
-                            )}
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                    </div>
-                  ) : (
-                    <Text>No teams</Text>
-                  )}
-                  {!isTeamsExpanded && teamDetails.length > 20 && (
-                    <Button
-                      variant="light"
-                      size="xs"
-                      className="mt-2"
-                      onClick={() => setIsTeamsExpanded(true)}
-                    >
-                      +{teamDetails.length - 20} more
-                    </Button>
-                  )}
-                  {isTeamsExpanded && teamDetails.length > 20 && (
-                    <Button
-                      variant="light"
-                      size="xs"
-                      className="mt-2"
-                      onClick={() => setIsTeamsExpanded(false)}
-                    >
-                      Show Less
-                    </Button>
-                  )}
-                </div>
-              </Card>
-
-              <Card>
-                <Text>Personal Models</Text>
-                <div className="mt-2">
-                  {userData.models?.length && userData.models?.length > 0 ? (
-                    userData.models?.map((model, index) => <Text key={index}>{model}</Text>)
-                  ) : (
-                    <Text>All proxy models</Text>
-                  )}
-                </div>
-              </Card>
-            </Grid>
-          </TabPanel>
-
-          {/* Details Panel */}
-          <TabPanel>
-            <Card>
-              <div className="flex justify-between items-center mb-4">
-                <Title>User Settings</Title>
-                {!isEditing && userRole && rolesWithWriteAccess.includes(userRole) && (
-                  <Button onClick={() => setIsEditing(true)}>Edit Settings</Button>
+            <Card className="p-4">
+              <div className="flex justify-between items-center mb-2">
+                <span>Teams</span>
+                {isProxyAdmin && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleOpenAddTeamModal}
+                    className="h-7 gap-1"
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    Add Team
+                  </Button>
                 )}
               </div>
-
-              {isEditing && userData ? (
-                <UserEditView
-                  userData={userDataForEdit}
-                  onCancel={() => setIsEditing(false)}
-                  onSubmit={handleUserUpdate}
-                  teams={teamDetails}
-                  accessToken={accessToken}
-                  userID={userId}
-                  userRole={userRole}
-                  userModels={userModels}
-                  possibleUIRoles={possibleUIRoles}
-                />
-              ) : (
-                <div className="space-y-4">
-                  <div>
-                    <Text className="font-medium">User ID</Text>
-                    <div className="flex items-center cursor-pointer">
-                      <Text className="font-mono">{userData.user_id}</Text>
-                      <AntdButton
-                        type="text"
-                        size="small"
-                        icon={copiedStates["user-id"] ? <CheckIcon size={12} /> : <CopyIcon size={12} />}
-                        onClick={() => copyToClipboard(userData.user_id, "user-id")}
-                        className={`left-2 z-10 transition-all duration-200 ${
-                          copiedStates["user-id"]
-                            ? "text-green-600 bg-green-50 border-green-200"
-                            : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
-                        }`}
-                      />
-                    </div>
+              <div className="mt-2">
+                {teamDetails.length > 0 ? (
+                  <div className="max-h-60 overflow-y-auto">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Team Name</TableHead>
+                          {isProxyAdmin && (
+                            <TableHead className="text-right">
+                              Actions
+                            </TableHead>
+                          )}
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {teamDetails
+                          .slice(
+                            0,
+                            isTeamsExpanded ? teamDetails.length : 20,
+                          )
+                          .map((team) => (
+                            <TableRow key={team.team_id}>
+                              <TableCell>
+                                {team.team_alias || team.team_id}
+                              </TableCell>
+                              {isProxyAdmin && (
+                                <TableCell className="text-right">
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() =>
+                                      handleOpenRemoveTeamModal(team)
+                                    }
+                                    aria-label={`Remove ${team.team_alias || team.team_id}`}
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                  >
+                                    <TrashIcon className="h-4 w-4" />
+                                  </Button>
+                                </TableCell>
+                              )}
+                            </TableRow>
+                          ))}
+                      </TableBody>
+                    </Table>
                   </div>
+                ) : (
+                  <span>No teams</span>
+                )}
+                {!isTeamsExpanded && teamDetails.length > 20 && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="mt-2"
+                    onClick={() => setIsTeamsExpanded(true)}
+                  >
+                    +{teamDetails.length - 20} more
+                  </Button>
+                )}
+                {isTeamsExpanded && teamDetails.length > 20 && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="mt-2"
+                    onClick={() => setIsTeamsExpanded(false)}
+                  >
+                    Show Less
+                  </Button>
+                )}
+              </div>
+            </Card>
 
-                  <div>
-                    <Text className="font-medium">Email</Text>
-                    <Text>{userData.user_email || "Not Set"}</Text>
-                  </div>
+            <Card className="p-4">
+              <span>Personal Models</span>
+              <div className="mt-2">
+                {userData.models?.length && userData.models?.length > 0 ? (
+                  userData.models?.map((model, index) => (
+                    <div key={index}>{model}</div>
+                  ))
+                ) : (
+                  <span>All proxy models</span>
+                )}
+              </div>
+            </Card>
+          </div>
+        </TabsContent>
 
-                  <div>
-                    <Text className="font-medium">User Alias</Text>
-                    <Text>{userData.user_alias || "Not Set"}</Text>
-                  </div>
+        <TabsContent value="details">
+          <Card className="p-6">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-semibold m-0">User Settings</h3>
+              {!isEditing &&
+                userRole &&
+                rolesWithWriteAccess.includes(userRole) && (
+                  <Button onClick={() => setIsEditing(true)}>
+                    Edit Settings
+                  </Button>
+                )}
+            </div>
 
-                  <div>
-                    <Text className="font-medium">Global Proxy Role</Text>
-                    <Text>{userData.user_role || "Not Set"}</Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Created</Text>
-                    <Text>
-                      {userData.created_at
-                        ? new Date(userData.created_at).toLocaleString()
-                        : "Unknown"}
-                    </Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Last Updated</Text>
-                    <Text>
-                      {userData.updated_at
-                        ? new Date(userData.updated_at).toLocaleString()
-                        : "Unknown"}
-                    </Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Personal Models</Text>
-                    <div className="flex flex-wrap gap-2 mt-1">
-                      {userData.models?.length && userData.models?.length > 0 ? (
-                        userData.models?.map((model, index) => (
-                          <span key={index} className="px-2 py-1 bg-blue-100 rounded text-xs">
-                            {model}
-                          </span>
-                        ))
+            {isEditing && userData ? (
+              <UserEditView
+                userData={userDataForEdit}
+                onCancel={() => setIsEditing(false)}
+                onSubmit={handleUserUpdate}
+                teams={teamDetails}
+                accessToken={accessToken}
+                userID={userId}
+                userRole={userRole}
+                userModels={userModels}
+                possibleUIRoles={possibleUIRoles}
+              />
+            ) : (
+              <div className="space-y-4">
+                <div>
+                  <span className="font-medium block">User ID</span>
+                  <div className="flex items-center cursor-pointer">
+                    <span className="font-mono">{userData.user_id}</span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() =>
+                        copyToClipboard(userData.user_id, "user-id-details")
+                      }
+                      className={`ml-2 z-10 h-7 w-7 p-0 transition-all duration-200 ${
+                        copiedStates["user-id-details"]
+                          ? "text-green-600 bg-green-50 border-green-200 dark:bg-green-950/30"
+                          : "text-muted-foreground hover:text-foreground hover:bg-muted"
+                      }`}
+                      aria-label="Copy user id"
+                    >
+                      {copiedStates["user-id-details"] ? (
+                        <CheckIcon size={12} />
                       ) : (
-                        <Text>All proxy models</Text>
+                        <CopyIcon size={12} />
                       )}
-                    </div>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Max Budget</Text>
-                    <Text>
-                      {userData.max_budget !== null && userData.max_budget !== undefined
-                        ? `$${formatNumberWithCommas(userData.max_budget, 4)}`
-                        : "Unlimited"}
-                    </Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Budget Reset</Text>
-                    <Text>{getBudgetDurationLabel(userData.budget_duration ?? null)}</Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Metadata</Text>
-                    <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto mt-1">
-                      {JSON.stringify(userData.metadata || {}, null, 2)}
-                    </pre>
+                    </Button>
                   </div>
                 </div>
-              )}
-            </Card>
-          </TabPanel>
-        </TabPanels>
-      </TabGroup>
+
+                <div>
+                  <span className="font-medium block">Email</span>
+                  <span>{userData.user_email || "Not Set"}</span>
+                </div>
+
+                <div>
+                  <span className="font-medium block">User Alias</span>
+                  <span>{userData.user_alias || "Not Set"}</span>
+                </div>
+
+                <div>
+                  <span className="font-medium block">Global Proxy Role</span>
+                  <span>{userData.user_role || "Not Set"}</span>
+                </div>
+
+                <div>
+                  <span className="font-medium block">Created</span>
+                  <span>
+                    {userData.created_at
+                      ? new Date(userData.created_at).toLocaleString()
+                      : "Unknown"}
+                  </span>
+                </div>
+
+                <div>
+                  <span className="font-medium block">Last Updated</span>
+                  <span>
+                    {userData.updated_at
+                      ? new Date(userData.updated_at).toLocaleString()
+                      : "Unknown"}
+                  </span>
+                </div>
+
+                <div>
+                  <span className="font-medium block">Personal Models</span>
+                  <div className="flex flex-wrap gap-2 mt-1">
+                    {userData.models?.length && userData.models?.length > 0 ? (
+                      userData.models?.map((model, index) => (
+                        <span
+                          key={index}
+                          className="px-2 py-1 bg-blue-100 dark:bg-blue-950/50 text-blue-800 dark:text-blue-300 rounded text-xs"
+                        >
+                          {model}
+                        </span>
+                      ))
+                    ) : (
+                      <span>All proxy models</span>
+                    )}
+                  </div>
+                </div>
+
+                <div>
+                  <span className="font-medium block">Max Budget</span>
+                  <span>
+                    {userData.max_budget !== null &&
+                    userData.max_budget !== undefined
+                      ? `$${formatNumberWithCommas(userData.max_budget, 4)}`
+                      : "Unlimited"}
+                  </span>
+                </div>
+
+                <div>
+                  <span className="font-medium block">Budget Reset</span>
+                  <span>
+                    {getBudgetDurationLabel(userData.budget_duration ?? null)}
+                  </span>
+                </div>
+
+                <div>
+                  <span className="font-medium block">Metadata</span>
+                  <pre className="bg-muted p-2 rounded text-xs overflow-auto mt-1">
+                    {JSON.stringify(userData.metadata || {}, null, 2)}
+                  </pre>
+                </div>
+              </div>
+            )}
+          </Card>
+        </TabsContent>
+      </Tabs>
+
       <OnboardingModal
         isInvitationLinkModalVisible={isInvitationLinkModalVisible}
         setIsInvitationLinkModalVisible={setIsInvitationLinkModalVisible}
@@ -655,7 +773,10 @@ export default function UserInfoView({
         message="Are you sure you want to remove this user from the team? This action cannot be undone."
         resourceInformationTitle="Team Membership"
         resourceInformation={[
-          { label: "Team", value: teamToRemove?.team_alias || teamToRemove?.team_id },
+          {
+            label: "Team",
+            value: teamToRemove?.team_alias || teamToRemove?.team_id,
+          },
           { label: "User ID", value: userData?.user_id, code: true },
           { label: "Email", value: userData?.user_email },
         ]}
@@ -665,68 +786,100 @@ export default function UserInfoView({
       />
 
       {/* Add to Team Modal */}
-      <Modal
-        title="Add User to Team"
+      <Dialog
         open={isAddTeamModalOpen}
-        onCancel={() => setIsAddTeamModalOpen(false)}
-        footer={null}
-        width={500}
-        maskClosable={!isAddingTeam}
+        onOpenChange={(o) =>
+          !isAddingTeam && !o ? setIsAddTeamModalOpen(false) : undefined
+        }
       >
-        <Form
-          layout="vertical"
-          onFinish={handleAddTeamSubmit}
-        >
-          <Form.Item label="Team" required>
-            <AntdSelect
-              showSearch
-              value={selectedTeamId || undefined}
-              onChange={setSelectedTeamId}
-              placeholder="Select a team"
-              filterOption={(input, option) => {
-                const team = availableTeamsForAdd.find((t) => t.team_id === option?.value);
-                if (!team) return false;
-                return team.team_alias.toLowerCase().includes(input.toLowerCase());
-              }}
-              loading={isLoadingTeams}
-            >
-              {availableTeamsForAdd.map((team) => (
-                <AntdSelect.Option key={team.team_id} value={team.team_id}>
-                  {team.team_alias}
-                </AntdSelect.Option>
-              ))}
-            </AntdSelect>
-          </Form.Item>
+        <DialogContent className="max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>Add User to Team</DialogTitle>
+            <DialogDescription className="sr-only">
+              Add the user to an existing team.
+            </DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleAddTeamSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="add-team-team">
+                Team <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={selectedTeamId}
+                onValueChange={setSelectedTeamId}
+                disabled={isLoadingTeams}
+              >
+                <SelectTrigger id="add-team-team">
+                  <SelectValue placeholder="Select a team" />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableTeamsForAdd.map((team) => (
+                    <SelectItem key={team.team_id} value={team.team_id}>
+                      {team.team_alias}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
 
-          <Form.Item label="Member Role">
-            <AntdSelect value={selectedRole} onChange={setSelectedRole}>
-              <AntdSelect.Option value="user">
-                <Tooltip title="Can view team info, but not manage it">
-                  <span className="font-medium">user</span>
-                  <span className="ml-2 text-gray-500 text-sm">- Can view team info, but not manage it</span>
-                </Tooltip>
-              </AntdSelect.Option>
-              <AntdSelect.Option value="admin">
-                <Tooltip title="Can create team keys, add members, and manage settings">
-                  <span className="font-medium">admin</span>
-                  <span className="ml-2 text-gray-500 text-sm">- Can create team keys, add members, and manage settings</span>
-                </Tooltip>
-              </AntdSelect.Option>
-            </AntdSelect>
-          </Form.Item>
+            <div className="space-y-2">
+              <Label htmlFor="add-team-role">Member Role</Label>
+              <Select value={selectedRole} onValueChange={setSelectedRole}>
+                <SelectTrigger id="add-team-role">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="user">
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span>
+                            <span className="font-medium">user</span>
+                            <span className="ml-2 text-muted-foreground text-sm">
+                              - Can view team info, but not manage it
+                            </span>
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          Can view team info, but not manage it
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </SelectItem>
+                  <SelectItem value="admin">
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span>
+                            <span className="font-medium">admin</span>
+                            <span className="ml-2 text-muted-foreground text-sm">
+                              - Can create team keys, add members, and manage
+                              settings
+                            </span>
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          Can create team keys, add members, and manage
+                          settings
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
 
-          <div className="text-right mt-4">
-            <AntdButton
-              type="primary"
-              htmlType="submit"
-              loading={isAddingTeam}
-              disabled={!selectedTeamId}
-            >
-              {isAddingTeam ? "Adding..." : "Add to Team"}
-            </AntdButton>
-          </div>
-        </Form>
-      </Modal>
+            <DialogFooter>
+              <Button
+                type="submit"
+                disabled={!selectedTeamId || isAddingTeam}
+              >
+                {isAddingTeam ? "Adding..." : "Add to Team"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }