diff --git a/ui/litellm-dashboard/.eslintrc.json b/ui/litellm-dashboard/.eslintrc.json
index c7111b5ee79..b10717340cf 100644
--- a/ui/litellm-dashboard/.eslintrc.json
+++ b/ui/litellm-dashboard/.eslintrc.json
@@ -71,6 +71,7 @@
         "src/components/prompts/prompt_editor_view/PromptEditorHeader.tsx",
         "src/components/prompts/prompt_editor_view/VersionHistorySidePanel.tsx",
         "src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.tsx",
+        "src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx",
         "src/components/prompts/prompt_editor_view/conversation_panel/MessageBubble.tsx",
         "src/components/playground/chat_ui/SessionManagement.tsx",
         "src/components/playground/chat_ui/SearchResultsDisplay.tsx",
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
index f881065d4ab..d459ea56289 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
@@ -1,9 +1,26 @@
-import { Button, Icon, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Text } from "@tremor/react";
-import { Tooltip } from "antd";
+// eslint-disable-next-line litellm-ui/no-banned-ui-imports
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "@tremor/react";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { formatNumberWithCommas } from "@/utils/dataUtils";
-import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
+import { Pencil, Trash2 } from "lucide-react";
 import React from "react";
-import { type KeyResponse, Team } from "@/components/key_team_helpers/key_list";
+import {
+  type KeyResponse,
+  Team,
+} from "@/components/key_team_helpers/key_list";
 import { Member, Organization } from "@/components/networking";
 import ModelsCell from "@/app/(dashboard)/teams/components/TeamsTable/ModelsCell";
 import YourRoleCell from "@/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell";
@@ -61,8 +78,12 @@ const TeamsTable = ({
                 if (!currentOrg) return true;
                 return team.organization_id === currentOrg.organization_id;
               })
-              .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
-              .map((team: any) => (
+              .sort(
+                (a, b) =>
+                  new Date(b.created_at).getTime() -
+                  new Date(a.created_at).getTime(),
+              )
+              .map((team: Team) => (
                 <TableRow key={team.team_id}>
                   <TableCell
                     style={{
@@ -75,20 +96,21 @@ const TeamsTable = ({
                   </TableCell>
                   <TableCell>
                     <div className="overflow-hidden">
-                      <Tooltip title={team.team_id}>
-                        <Button
-                          size="xs"
-                          variant="light"
-                          className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px]"
-                          data-testid="team-id-cell"
-                          onClick={() => {
-                            // Add click handler
-                            setSelectedTeamId(team.team_id);
-                          }}
-                        >
-                          {team.team_id.slice(0, 7)}...
-                        </Button>
-                      </Tooltip>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button
+                              type="button"
+                              data-testid="team-id-cell"
+                              onClick={() => setSelectedTeamId(team.team_id)}
+                              className="font-mono text-blue-500 bg-blue-50 dark:bg-blue-950/30 hover:bg-blue-100 dark:hover:bg-blue-950/60 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px] rounded"
+                            >
+                              {team.team_id.slice(0, 7)}...
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent>{team.team_id}</TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
                     </div>
                   </TableCell>
                   <TableCell
@@ -98,7 +120,9 @@ const TeamsTable = ({
                       overflow: "hidden",
                     }}
                   >
-                    {team.created_at ? new Date(team.created_at).toLocaleDateString() : "N/A"}
+                    {team.created_at
+                      ? new Date(team.created_at).toLocaleDateString()
+                      : "N/A"}
                   </TableCell>
                   <TableCell
                     style={{
@@ -116,43 +140,60 @@ const TeamsTable = ({
                       overflow: "hidden",
                     }}
                   >
-                    {team["max_budget"] !== null && team["max_budget"] !== undefined ? team["max_budget"] : "No limit"}
+                    {team["max_budget"] !== null &&
+                    team["max_budget"] !== undefined
+                      ? team["max_budget"]
+                      : "No limit"}
                   </TableCell>
                   <ModelsCell team={team} />
                   <TableCell>{team.organization_id}</TableCell>
                   <YourRoleCell team={team} userId={userId} />
                   <TableCell>
-                    <Text>
+                    <div className="text-sm">
                       {perTeamInfo &&
                         team.team_id &&
                         perTeamInfo[team.team_id] &&
                         perTeamInfo[team.team_id].keys &&
                         perTeamInfo[team.team_id].keys.length}{" "}
                       Keys
-                    </Text>
-                    <Text>
+                    </div>
+                    <div className="text-sm">
                       {perTeamInfo &&
                         team.team_id &&
                         perTeamInfo[team.team_id] &&
                         perTeamInfo[team.team_id].team_info &&
-                        perTeamInfo[team.team_id].team_info.members_with_roles &&
-                        perTeamInfo[team.team_id].team_info.members_with_roles.length}{" "}
+                        perTeamInfo[team.team_id].team_info
+                          .members_with_roles &&
+                        perTeamInfo[team.team_id].team_info.members_with_roles
+                          .length}{" "}
                       Members
-                    </Text>
+                    </div>
                   </TableCell>
                   <TableCell>
                     {userRole == "Admin" ? (
-                      <>
-                        <Icon
-                          icon={PencilAltIcon}
-                          size="sm"
+                      <div className="flex gap-1">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6"
                           onClick={() => {
                             setSelectedTeamId(team.team_id);
                             setEditTeam(true);
                           }}
-                        />
-                        <Icon onClick={() => onDeleteTeam(team.team_id)} icon={TrashIcon} size="sm" />
-                      </>
+                          aria-label="Edit team"
+                        >
+                          <Pencil className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 text-destructive hover:text-destructive hover:bg-destructive/10"
+                          onClick={() => onDeleteTeam(team.team_id)}
+                          aria-label="Delete team"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
                     ) : null}
                   </TableCell>
                 </TableRow>