diff --git a/ui/litellm-dashboard/.eslintrc.json b/ui/litellm-dashboard/.eslintrc.json
index d9efd3808ab..08f0156a619 100644
--- a/ui/litellm-dashboard/.eslintrc.json
+++ b/ui/litellm-dashboard/.eslintrc.json
@@ -86,6 +86,7 @@
         "src/components/AIHub/forms/MakeAgentPublicForm.tsx",
         "src/components/AIHub/forms/MakeMCPPublicForm.tsx",
         "src/components/AIHub/forms/MakeModelPublicForm.tsx",
+        "src/components/AIHub/ModelHubTable.tsx",
         "src/components/policies/policy_test_panel.tsx",
         "src/components/mcp_tools/McpCrudPermissionPanel.tsx",
         "src/components/mcp_tools/OAuthFormFields.tsx",
diff --git a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx
index 94aeae4617a..a292a9452c3 100644
--- a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx
@@ -23,10 +23,17 @@ import {
 } from "@/components/networking";
 import PublicModelHub from "@/components/public_model_hub";
 import { isAdminRole } from "@/utils/roles";
-// eslint-disable-next-line litellm-ui/no-banned-ui-imports
-import { Copy as CopyOutlined } from "lucide-react";
-import { Badge, Button, Card, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title } from "@tremor/react";
-import { Modal } from "antd";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
 import { Copy } from "lucide-react";
 import { useRouter } from "next/navigation";
 import React, { useCallback, useEffect, useState } from "react";
@@ -61,6 +68,26 @@ interface ModelGroupInfo {
   [key: string]: any;
 }
 
+const BADGE_COLOR_CLASSES: Record<string, string> = {
+  blue: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300",
+  green:
+    "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300",
+  purple:
+    "bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300",
+  orange:
+    "bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300",
+  red: "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300",
+  yellow:
+    "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300",
+  gray: "bg-muted text-muted-foreground",
+};
+
+const colorBadge = (
+  color: keyof typeof BADGE_COLOR_CLASSES | string,
+  extra?: string,
+) =>
+  cn(BADGE_COLOR_CLASSES[color] ?? BADGE_COLOR_CLASSES.gray, extra);
+
 const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage, premiumUser, userRole }) => {
   const [publicPageAllowed, setPublicPageAllowed] = useState<boolean>(false);
   const [modelHubData, setModelHubData] = useState<ModelGroupInfo[] | null>(null);
@@ -258,8 +285,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
     if (!accessToken) {
       return;
     }
-
-    // Show the modal for selecting models to make public
     setIsMakePublicModalVisible(true);
   };
 
@@ -267,8 +292,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
     if (!accessToken) {
       return;
     }
-
-    // Show the modal for selecting agents to make public
     setIsMakeAgentPublicModalVisible(true);
   };
 
@@ -276,22 +299,10 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
     if (!accessToken) {
       return;
     }
-
-    // Show the modal for selecting MCP servers to make public
     setIsMakeMcpPublicModalVisible(true);
   };
 
-  const handleOk = () => {
-    setIsModalVisible(false);
-    setIsPublicPageModalVisible(false);
-    setSelectedModel(null);
-    setIsAgentModalVisible(false);
-    setSelectedAgent(null);
-    setIsMcpModalVisible(false);
-    setSelectedMcpServer(null);
-  };
-
-  const handleCancel = () => {
+  const closeDetailDialogs = () => {
     setIsModalVisible(false);
     setIsPublicPageModalVisible(false);
     setSelectedModel(null);
@@ -307,7 +318,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
   };
 
   const formatCapabilityName = (key: string) => {
-    // Remove 'supports_' prefix and convert snake_case to Title Case
     return key
       .replace(/^supports_/, "")
       .split("_")
@@ -316,7 +326,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
   };
 
   const getModelCapabilities = (model: ModelGroupInfo) => {
-    // Find all properties that start with 'supports_' and are true
     return Object.entries(model)
       .filter(([key, value]) => key.startsWith("supports_") && value === true)
       .map(([key]) => key);
@@ -327,7 +336,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
   };
 
   const handleMakePublicSuccess = () => {
-    // Refresh the model hub data after successful public operation
     if (accessToken) {
       const fetchData = async () => {
         try {
@@ -342,7 +350,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
   };
 
   const handleMakeAgentPublicSuccess = () => {
-    // Refresh the agent hub data after successful public operation
     if (accessToken) {
       const fetchAgentData = async () => {
         try {
@@ -363,7 +370,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
   };
 
   const handleMakeMcpPublicSuccess = () => {
-    // Refresh the MCP hub data after successful public operation
     if (accessToken) {
       const fetchMcpData = async () => {
         try {
@@ -396,25 +402,25 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
           {/* Header with Title, Description and URL */}
           <div className="flex justify-between items-center mb-6">
             <div className="flex flex-col items-start">
-              <Title className="text-center">AI Hub</Title>
+              <h2 className="text-2xl font-semibold m-0">AI Hub</h2>
               {isAdminRole(userRole || "") ? (
-                <p className="text-sm text-gray-600">
+                <p className="text-sm text-muted-foreground">
                   Make models, agents, and MCP servers public for developers to know what&apos;s available.
                 </p>
               ) : (
-                <p className="text-sm text-gray-600">A list of all public model names personally available to you.</p>
+                <p className="text-sm text-muted-foreground">A list of all public model names personally available to you.</p>
               )}
             </div>
             <div className="flex items-center space-x-4">
-              <Text>Model Hub URL:</Text>
-              <div className="flex items-center bg-gray-200 px-2 py-1 rounded">
-                <Text className="mr-2">{`${getProxyBaseUrl()}/ui/model_hub_table`}</Text>
+              <span className="text-sm">Model Hub URL:</span>
+              <div className="flex items-center bg-muted px-2 py-1 rounded">
+                <span className="mr-2 text-sm">{`${getProxyBaseUrl()}/ui/model_hub_table`}</span>
                 <button
                   onClick={() => copyToClipboard(`${getProxyBaseUrl()}/ui/model_hub_table`)}
-                  className="p-1 hover:bg-gray-300 rounded transition-colors"
+                  className="p-1 hover:bg-muted-foreground/10 rounded transition-colors"
                   title="Copy URL"
                 >
-                  <Copy size={16} className="text-gray-600" />
+                  <Copy size={16} className="text-muted-foreground" />
                 </button>
               </div>
             </div>
@@ -428,278 +434,271 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
           )}
 
           {/* Tab System for Model Hub, Agent Hub, MCP Hub, and Plugin Marketplace */}
-          <TabGroup>
-            <TabList className="mb-4">
-              <Tab>Model Hub</Tab>
-              <Tab>Agent Hub</Tab>
-              <Tab>MCP Hub</Tab>
-              <Tab>Skill Hub</Tab>
-            </TabList>
+          <Tabs defaultValue="models" className="w-full">
+            <TabsList className="mb-4">
+              <TabsTrigger value="models">Model Hub</TabsTrigger>
+              <TabsTrigger value="agents">Agent Hub</TabsTrigger>
+              <TabsTrigger value="mcp">MCP Hub</TabsTrigger>
+              <TabsTrigger value="skills">Skill Hub</TabsTrigger>
+            </TabsList>
 
-            <TabPanels>
-              {/* Model Hub Tab */}
-              <TabPanel>
-                {/* Model Filters and Table */}
-                <Card>
-                  {/* Header with Make Public Button */}
-                  {publicPage == false && isAdminRole(userRole || "") && (
-                    <div className="flex justify-end mb-4">
-                      <Button onClick={() => handleMakePublicPage()}>Select Models to Make Public</Button>
-                    </div>
-                  )}
-
-                  {/* Filters */}
-                  <ModelFilters modelHubData={modelHubData || []} onFilteredDataChange={handleFilteredDataChange} />
-
-                  {/* Model Table */}
-                  <ModelDataTable
-                    columns={modelHubColumns(showModal, copyToClipboard, publicPage)}
-                    data={filteredData}
-                    isLoading={loading}
-                    defaultSorting={[{ id: "model_group", desc: false }]}
-                  />
-                </Card>
-
-                <div className="mt-4 text-center space-y-2">
-                  <Text className="text-sm text-gray-600">
-                    Showing {filteredData.length} of {modelHubData?.length || 0} models
-                  </Text>
-                </div>
-              </TabPanel>
-
-              {/* Agent Hub Tab */}
-              <TabPanel>
-                <Card>
-                  {/* Header with Make Public Button */}
-                  {publicPage == false && isAdminRole(userRole || "") && (
-                    <div className="flex justify-end mb-4">
-                      <Button onClick={() => handleMakeAgentPublicPage()}>Select Agents to Make Public</Button>
-                    </div>
-                  )}
-
-                  {/* Agent Table */}
-                  <ModelDataTable
-                    columns={getAgentHubTableColumns(showAgentModal, copyToClipboard, publicPage)}
-                    data={agentHubData || []}
-                    isLoading={agentLoading}
-                    defaultSorting={[{ id: "name", desc: false }]}
-                  />
-                </Card>
-
-                <div className="mt-4 text-center space-y-2">
-                  <Text className="text-sm text-gray-600">
-                    Showing {agentHubData?.length || 0} agent{agentHubData?.length !== 1 ? "s" : ""}
-                  </Text>
-                </div>
-              </TabPanel>
-
-              {/* MCP Hub Tab */}
-              <TabPanel>
-                <Card>
-                  {/* Header with Make Public Button */}
-                  {publicPage == false && isAdminRole(userRole || "") && (
-                    <div className="flex justify-end mb-4">
-                      <Button onClick={() => handleMakeMcpPublicPage()}>Select MCP Servers to Make Public</Button>
-                    </div>
-                  )}
-
-                  {/* MCP Server Table */}
-                  <ModelDataTable
-                    columns={mcpHubColumns(showMcpModal, copyToClipboard, publicPage)}
-                    data={mcpHubData || []}
-                    isLoading={mcpLoading}
-                    defaultSorting={[{ id: "server_name", desc: false }]}
-                  />
-                </Card>
-
-                <div className="mt-4 text-center space-y-2">
-                  <Text className="text-sm text-gray-600">
-                    Showing {mcpHubData?.length || 0} MCP server{mcpHubData?.length !== 1 ? "s" : ""}
-                  </Text>
-                </div>
-              </TabPanel>
-
-              {/* Skill Hub Tab */}
-              <TabPanel>
+            {/* Model Hub Tab */}
+            <TabsContent value="models">
+              <Card className="p-6">
                 {publicPage == false && isAdminRole(userRole || "") && (
                   <div className="flex justify-end mb-4">
-                    <Button onClick={() => setIsMakeSkillPublicModalVisible(true)}>
-                      Select Skills to Make Public
-                    </Button>
+                    <Button onClick={() => handleMakePublicPage()}>Select Models to Make Public</Button>
                   </div>
                 )}
-                <SkillHubDashboard
-                  skills={skillHubData}
-                  isLoading={skillLoading}
-                  isAdmin={isAdminRole(userRole || "")}
-                  accessToken={accessToken}
-                  publicPage={publicPage}
-                  onPublishSuccess={async () => {
-                    const response = await getClaudeCodePluginsList(accessToken || "", publicPage);
-                    setSkillHubData(response.plugins);
-                  }}
+
+                <ModelFilters modelHubData={modelHubData || []} onFilteredDataChange={handleFilteredDataChange} />
+
+                <ModelDataTable
+                  columns={modelHubColumns(showModal, copyToClipboard, publicPage)}
+                  data={filteredData}
+                  isLoading={loading}
+                  defaultSorting={[{ id: "model_group", desc: false }]}
                 />
-              </TabPanel>
-            </TabPanels>
-          </TabGroup>
+              </Card>
+
+              <div className="mt-4 text-center space-y-2">
+                <span className="text-sm text-muted-foreground">
+                  Showing {filteredData.length} of {modelHubData?.length || 0} models
+                </span>
+              </div>
+            </TabsContent>
+
+            {/* Agent Hub Tab */}
+            <TabsContent value="agents">
+              <Card className="p-6">
+                {publicPage == false && isAdminRole(userRole || "") && (
+                  <div className="flex justify-end mb-4">
+                    <Button onClick={() => handleMakeAgentPublicPage()}>Select Agents to Make Public</Button>
+                  </div>
+                )}
+
+                <ModelDataTable
+                  columns={getAgentHubTableColumns(showAgentModal, copyToClipboard, publicPage)}
+                  data={agentHubData || []}
+                  isLoading={agentLoading}
+                  defaultSorting={[{ id: "name", desc: false }]}
+                />
+              </Card>
+
+              <div className="mt-4 text-center space-y-2">
+                <span className="text-sm text-muted-foreground">
+                  Showing {agentHubData?.length || 0} agent{agentHubData?.length !== 1 ? "s" : ""}
+                </span>
+              </div>
+            </TabsContent>
+
+            {/* MCP Hub Tab */}
+            <TabsContent value="mcp">
+              <Card className="p-6">
+                {publicPage == false && isAdminRole(userRole || "") && (
+                  <div className="flex justify-end mb-4">
+                    <Button onClick={() => handleMakeMcpPublicPage()}>Select MCP Servers to Make Public</Button>
+                  </div>
+                )}
+
+                <ModelDataTable
+                  columns={mcpHubColumns(showMcpModal, copyToClipboard, publicPage)}
+                  data={mcpHubData || []}
+                  isLoading={mcpLoading}
+                  defaultSorting={[{ id: "server_name", desc: false }]}
+                />
+              </Card>
+
+              <div className="mt-4 text-center space-y-2">
+                <span className="text-sm text-muted-foreground">
+                  Showing {mcpHubData?.length || 0} MCP server{mcpHubData?.length !== 1 ? "s" : ""}
+                </span>
+              </div>
+            </TabsContent>
+
+            {/* Skill Hub Tab */}
+            <TabsContent value="skills">
+              {publicPage == false && isAdminRole(userRole || "") && (
+                <div className="flex justify-end mb-4">
+                  <Button onClick={() => setIsMakeSkillPublicModalVisible(true)}>
+                    Select Skills to Make Public
+                  </Button>
+                </div>
+              )}
+              <SkillHubDashboard
+                skills={skillHubData}
+                isLoading={skillLoading}
+                isAdmin={isAdminRole(userRole || "")}
+                accessToken={accessToken}
+                publicPage={publicPage}
+                onPublishSuccess={async () => {
+                  const response = await getClaudeCodePluginsList(accessToken || "", publicPage);
+                  setSkillHubData(response.plugins);
+                }}
+              />
+            </TabsContent>
+          </Tabs>
         </div>
       ) : (
-        <Card className="mx-auto max-w-xl mt-10">
-          <Text className="text-xl text-center mb-2 text-black">Public Model Hub not enabled.</Text>
-          <p className="text-base text-center text-slate-800">Ask your proxy admin to enable this on their Admin UI.</p>
+        <Card className="mx-auto max-w-xl mt-10 p-6">
+          <p className="text-xl text-center mb-2 text-foreground">Public Model Hub not enabled.</p>
+          <p className="text-base text-center text-muted-foreground">
+            Ask your proxy admin to enable this on their Admin UI.
+          </p>
         </Card>
       )}
 
       {/* Public Page Modal */}
-      <Modal
-        title="Public Model Hub"
-        width={600}
+      <Dialog
         open={isPublicPageModalVisible}
-        footer={null}
-        onOk={handleOk}
-        onCancel={handleCancel}
+        onOpenChange={(o) => (!o ? closeDetailDialogs() : undefined)}
       >
-        <div className="pt-5 pb-5">
-          <div className="flex justify-between mb-4">
-            <Text className="text-base mr-2">Shareable Link:</Text>
-            <Text className="max-w-sm ml-2 bg-gray-200 pr-2 pl-2 pt-1 pb-1 text-center rounded">
-              {`${getProxyBaseUrl()}/ui/model_hub_table`}
-            </Text>
+        <DialogContent className="max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>Public Model Hub</DialogTitle>
+          </DialogHeader>
+          <div className="pt-5 pb-5">
+            <div className="flex justify-between mb-4">
+              <span className="text-base mr-2">Shareable Link:</span>
+              <span className="max-w-sm ml-2 bg-muted pr-2 pl-2 pt-1 pb-1 text-center rounded text-sm">
+                {`${getProxyBaseUrl()}/ui/model_hub_table`}
+              </span>
+            </div>
+            <div className="flex justify-end">
+              <Button onClick={goToPublicModelPage}>See Page</Button>
+            </div>
           </div>
-          <div className="flex justify-end">
-            <Button onClick={goToPublicModelPage}>See Page</Button>
-          </div>
-        </div>
-      </Modal>
+        </DialogContent>
+      </Dialog>
 
       {/* Model Details Modal */}
-      <Modal
-        title={selectedModel?.model_group || "Model Details"}
-        width={1000}
+      <Dialog
         open={isModalVisible}
-        footer={null}
-        onOk={handleOk}
-        onCancel={handleCancel}
+        onOpenChange={(o) => (!o ? closeDetailDialogs() : undefined)}
       >
-        {selectedModel && (
-          <div className="space-y-6">
-            {/* Model Overview */}
-            <div>
-              <Text className="text-lg font-semibold mb-4">Model Overview</Text>
-              <div className="grid grid-cols-2 gap-4 mb-4">
-                <div>
-                  <Text className="font-medium">Model Group:</Text>
-                  <Text>{selectedModel.model_group}</Text>
+        <DialogContent className="max-w-[1000px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{selectedModel?.model_group || "Model Details"}</DialogTitle>
+          </DialogHeader>
+          {selectedModel && (
+            <div className="space-y-6">
+              {/* Model Overview */}
+              <div>
+                <p className="text-lg font-semibold mb-4">Model Overview</p>
+                <div className="grid grid-cols-2 gap-4 mb-4">
+                  <div>
+                    <p className="font-medium">Model Group:</p>
+                    <p>{selectedModel.model_group}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Mode:</p>
+                    <p>{selectedModel.mode || "Not specified"}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Providers:</p>
+                    <div className="flex flex-wrap gap-1 mt-1">
+                      {selectedModel.providers.map((provider) => (
+                        <Badge key={provider} className={colorBadge("blue")}>
+                          {provider}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
                 </div>
-                <div>
-                  <Text className="font-medium">Mode:</Text>
-                  <Text>{selectedModel.mode || "Not specified"}</Text>
+              </div>
+
+              {/* Token and Cost Information */}
+              <div>
+                <p className="text-lg font-semibold mb-4">Token & Cost Information</p>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="font-medium">Max Input Tokens:</p>
+                    <p>{selectedModel.max_input_tokens?.toLocaleString() || "Not specified"}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Max Output Tokens:</p>
+                    <p>{selectedModel.max_output_tokens?.toLocaleString() || "Not specified"}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Input Cost per 1M Tokens:</p>
+                    <p>
+                      {selectedModel.input_cost_per_token
+                        ? formatCost(selectedModel.input_cost_per_token)
+                        : "Not specified"}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Output Cost per 1M Tokens:</p>
+                    <p>
+                      {selectedModel.output_cost_per_token
+                        ? formatCost(selectedModel.output_cost_per_token)
+                        : "Not specified"}
+                    </p>
+                  </div>
                 </div>
+              </div>
+
+              {/* Capabilities */}
+              <div>
+                <p className="text-lg font-semibold mb-4">Capabilities</p>
+                <div className="flex flex-wrap gap-2">
+                  {(() => {
+                    const capabilities = getModelCapabilities(selectedModel);
+                    const colors = ["green", "blue", "purple", "orange", "red", "yellow"];
+
+                    if (capabilities.length === 0) {
+                      return <p className="text-muted-foreground">No special capabilities listed</p>;
+                    }
+
+                    return capabilities.map((capability, index) => (
+                      <Badge key={capability} className={colorBadge(colors[index % colors.length])}>
+                        {formatCapabilityName(capability)}
+                      </Badge>
+                    ));
+                  })()}
+                </div>
+              </div>
+
+              {/* Rate Limits */}
+              {(selectedModel.tpm || selectedModel.rpm) && (
                 <div>
-                  <Text className="font-medium">Providers:</Text>
-                  <div className="flex flex-wrap gap-1 mt-1">
-                    {selectedModel.providers.map((provider) => (
-                      <Badge key={provider} color="blue">
-                        {provider}
+                  <p className="text-lg font-semibold mb-4">Rate Limits</p>
+                  <div className="grid grid-cols-2 gap-4">
+                    {selectedModel.tpm && (
+                      <div>
+                        <p className="font-medium">Tokens per Minute:</p>
+                        <p>{selectedModel.tpm.toLocaleString()}</p>
+                      </div>
+                    )}
+                    {selectedModel.rpm && (
+                      <div>
+                        <p className="font-medium">Requests per Minute:</p>
+                        <p>{selectedModel.rpm.toLocaleString()}</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Supported OpenAI Parameters */}
+              {selectedModel.supported_openai_params && (
+                <div>
+                  <p className="text-lg font-semibold mb-4">Supported OpenAI Parameters</p>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedModel.supported_openai_params.map((param) => (
+                      <Badge key={param} className={colorBadge("green")}>
+                        {param}
                       </Badge>
                     ))}
                   </div>
                 </div>
-              </div>
-            </div>
+              )}
 
-            {/* Token and Cost Information */}
-            <div>
-              <Text className="text-lg font-semibold mb-4">Token & Cost Information</Text>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <Text className="font-medium">Max Input Tokens:</Text>
-                  <Text>{selectedModel.max_input_tokens?.toLocaleString() || "Not specified"}</Text>
-                </div>
-                <div>
-                  <Text className="font-medium">Max Output Tokens:</Text>
-                  <Text>{selectedModel.max_output_tokens?.toLocaleString() || "Not specified"}</Text>
-                </div>
-                <div>
-                  <Text className="font-medium">Input Cost per 1M Tokens:</Text>
-                  <Text>
-                    {selectedModel.input_cost_per_token
-                      ? formatCost(selectedModel.input_cost_per_token)
-                      : "Not specified"}
-                  </Text>
-                </div>
-                <div>
-                  <Text className="font-medium">Output Cost per 1M Tokens:</Text>
-                  <Text>
-                    {selectedModel.output_cost_per_token
-                      ? formatCost(selectedModel.output_cost_per_token)
-                      : "Not specified"}
-                  </Text>
-                </div>
-              </div>
-            </div>
-
-            {/* Capabilities */}
-            <div>
-              <Text className="text-lg font-semibold mb-4">Capabilities</Text>
-              <div className="flex flex-wrap gap-2">
-                {(() => {
-                  const capabilities = getModelCapabilities(selectedModel);
-                  const colors = ["green", "blue", "purple", "orange", "red", "yellow"];
-
-                  if (capabilities.length === 0) {
-                    return <Text className="text-gray-500">No special capabilities listed</Text>;
-                  }
-
-                  return capabilities.map((capability, index) => (
-                    <Badge key={capability} color={colors[index % colors.length]}>
-                      {formatCapabilityName(capability)}
-                    </Badge>
-                  ));
-                })()}
-              </div>
-            </div>
-
-            {/* Rate Limits */}
-            {(selectedModel.tpm || selectedModel.rpm) && (
+              {/* Usage Example */}
               <div>
-                <Text className="text-lg font-semibold mb-4">Rate Limits</Text>
-                <div className="grid grid-cols-2 gap-4">
-                  {selectedModel.tpm && (
-                    <div>
-                      <Text className="font-medium">Tokens per Minute:</Text>
-                      <Text>{selectedModel.tpm.toLocaleString()}</Text>
-                    </div>
-                  )}
-                  {selectedModel.rpm && (
-                    <div>
-                      <Text className="font-medium">Requests per Minute:</Text>
-                      <Text>{selectedModel.rpm.toLocaleString()}</Text>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-
-            {/* Supported OpenAI Parameters */}
-            {selectedModel.supported_openai_params && (
-              <div>
-                <Text className="text-lg font-semibold mb-4">Supported OpenAI Parameters</Text>
-                <div className="flex flex-wrap gap-2">
-                  {selectedModel.supported_openai_params.map((param) => (
-                    <Badge key={param} color="green">
-                      {param}
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Usage Example */}
-            <div>
-              <Text className="text-lg font-semibold mb-4">Usage Example</Text>
-              <SyntaxHighlighter language="python" className="text-sm">
-                {`import openai
+                <p className="text-lg font-semibold mb-4">Usage Example</p>
+                <SyntaxHighlighter language="python" className="text-sm">
+                  {`import openai
 
 client = openai.OpenAI(
     api_key="your_api_key",
@@ -717,324 +716,333 @@ response = client.chat.completions.create(
 )
 
 print(response.choices[0].message.content)`}
-              </SyntaxHighlighter>
+                </SyntaxHighlighter>
+              </div>
             </div>
-          </div>
-        )}
-      </Modal>
+          )}
+        </DialogContent>
+      </Dialog>
 
       {/* Agent Details Modal */}
-      <Modal
-        title={selectedAgent?.name || "Agent Details"}
-        width={1000}
+      <Dialog
         open={isAgentModalVisible}
-        footer={null}
-        onOk={handleOk}
-        onCancel={handleCancel}
+        onOpenChange={(o) => (!o ? closeDetailDialogs() : undefined)}
       >
-        {selectedAgent && (
-          <div className="space-y-6">
-            {/* Agent Overview */}
-            <div>
-              <Text className="text-lg font-semibold mb-4">Agent Overview</Text>
-              <div className="grid grid-cols-2 gap-4 mb-4">
-                <div>
-                  <Text className="font-medium">Name:</Text>
-                  <Text>{selectedAgent.name}</Text>
-                </div>
-                <div>
-                  <Text className="font-medium">Version:</Text>
-                  <Badge color="blue">v{selectedAgent.version}</Badge>
-                </div>
-                <div>
-                  <Text className="font-medium">Protocol Version:</Text>
-                  <Text>{selectedAgent.protocolVersion}</Text>
-                </div>
-                <div>
-                  <Text className="font-medium">URL:</Text>
-                  <div className="flex items-center space-x-2">
-                    <Text className="truncate">{selectedAgent.url}</Text>
-                    <CopyOutlined
-                      onClick={() => copyToClipboard(selectedAgent.url)}
-                      className="cursor-pointer text-gray-500 hover:text-blue-500"
-                    />
+        <DialogContent className="max-w-[1000px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{selectedAgent?.name || "Agent Details"}</DialogTitle>
+          </DialogHeader>
+          {selectedAgent && (
+            <div className="space-y-6">
+              {/* Agent Overview */}
+              <div>
+                <p className="text-lg font-semibold mb-4">Agent Overview</p>
+                <div className="grid grid-cols-2 gap-4 mb-4">
+                  <div>
+                    <p className="font-medium">Name:</p>
+                    <p>{selectedAgent.name}</p>
                   </div>
-                </div>
-              </div>
-              <div>
-                <Text className="font-medium">Description:</Text>
-                <Text className="mt-1">{selectedAgent.description}</Text>
-              </div>
-            </div>
-
-            {/* Capabilities */}
-            {selectedAgent.capabilities && Object.keys(selectedAgent.capabilities).length > 0 && (
-              <div>
-                <Text className="text-lg font-semibold mb-4">Capabilities</Text>
-                <div className="flex flex-wrap gap-2">
-                  {Object.entries(selectedAgent.capabilities)
-                    .filter(([_, value]) => value === true)
-                    .map(([key]) => (
-                      <Badge key={key} color="green">
-                        {key}
-                      </Badge>
-                    ))}
-                </div>
-              </div>
-            )}
-
-            {/* Input/Output Modes */}
-            <div>
-              <Text className="text-lg font-semibold mb-4">Input/Output Modes</Text>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <Text className="font-medium">Input Modes:</Text>
-                  <div className="flex flex-wrap gap-1 mt-1">
-                    {selectedAgent.defaultInputModes?.map((mode) => (
-                      <Badge key={mode} color="blue">
-                        {mode}
-                      </Badge>
-                    )) || <Text>Not specified</Text>}
+                  <div>
+                    <p className="font-medium">Version:</p>
+                    <Badge className={colorBadge("blue")}>v{selectedAgent.version}</Badge>
+                  </div>
+                  <div>
+                    <p className="font-medium">Protocol Version:</p>
+                    <p>{selectedAgent.protocolVersion}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium">URL:</p>
+                    <div className="flex items-center space-x-2">
+                      <span className="truncate">{selectedAgent.url}</span>
+                      <Copy
+                        size={14}
+                        onClick={() => copyToClipboard(selectedAgent.url)}
+                        className="cursor-pointer text-muted-foreground hover:text-primary"
+                      />
+                    </div>
                   </div>
                 </div>
                 <div>
-                  <Text className="font-medium">Output Modes:</Text>
-                  <div className="flex flex-wrap gap-1 mt-1">
-                    {selectedAgent.defaultOutputModes?.map((mode) => (
-                      <Badge key={mode} color="purple">
-                        {mode}
-                      </Badge>
-                    )) || <Text>Not specified</Text>}
+                  <p className="font-medium">Description:</p>
+                  <p className="mt-1">{selectedAgent.description}</p>
+                </div>
+              </div>
+
+              {/* Capabilities */}
+              {selectedAgent.capabilities && Object.keys(selectedAgent.capabilities).length > 0 && (
+                <div>
+                  <p className="text-lg font-semibold mb-4">Capabilities</p>
+                  <div className="flex flex-wrap gap-2">
+                    {Object.entries(selectedAgent.capabilities)
+                      .filter(([_, value]) => value === true)
+                      .map(([key]) => (
+                        <Badge key={key} className={colorBadge("green")}>
+                          {key}
+                        </Badge>
+                      ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Input/Output Modes */}
+              <div>
+                <p className="text-lg font-semibold mb-4">Input/Output Modes</p>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="font-medium">Input Modes:</p>
+                    <div className="flex flex-wrap gap-1 mt-1">
+                      {selectedAgent.defaultInputModes?.map((mode) => (
+                        <Badge key={mode} className={colorBadge("blue")}>
+                          {mode}
+                        </Badge>
+                      )) || <p>Not specified</p>}
+                    </div>
+                  </div>
+                  <div>
+                    <p className="font-medium">Output Modes:</p>
+                    <div className="flex flex-wrap gap-1 mt-1">
+                      {selectedAgent.defaultOutputModes?.map((mode) => (
+                        <Badge key={mode} className={colorBadge("purple")}>
+                          {mode}
+                        </Badge>
+                      )) || <p>Not specified</p>}
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
 
-            {/* Skills */}
-            {selectedAgent.skills && selectedAgent.skills.length > 0 && (
-              <div>
-                <Text className="text-lg font-semibold mb-4">Skills</Text>
-                <div className="space-y-4">
-                  {selectedAgent.skills.map((skill) => (
-                    <div key={skill.id} className="border border-gray-200 rounded p-4">
-                      <div className="flex justify-between items-start mb-2">
-                        <div>
-                          <Text className="font-medium text-base">{skill.name}</Text>
-                          <Text className="text-xs text-gray-500">ID: {skill.id}</Text>
+              {/* Skills */}
+              {selectedAgent.skills && selectedAgent.skills.length > 0 && (
+                <div>
+                  <p className="text-lg font-semibold mb-4">Skills</p>
+                  <div className="space-y-4">
+                    {selectedAgent.skills.map((skill) => (
+                      <div key={skill.id} className="border border-border rounded p-4">
+                        <div className="flex justify-between items-start mb-2">
+                          <div>
+                            <p className="font-medium text-base">{skill.name}</p>
+                            <p className="text-xs text-muted-foreground">ID: {skill.id}</p>
+                          </div>
+                          {skill.tags && skill.tags.length > 0 && (
+                            <div className="flex flex-wrap gap-1">
+                              {skill.tags.map((tag) => (
+                                <Badge key={tag} className={colorBadge("purple", "text-[10px]")}>
+                                  {tag}
+                                </Badge>
+                              ))}
+                            </div>
+                          )}
                         </div>
-                        {skill.tags && skill.tags.length > 0 && (
-                          <div className="flex flex-wrap gap-1">
-                            {skill.tags.map((tag) => (
-                              <Badge key={tag} color="purple" size="xs">
-                                {tag}
-                              </Badge>
-                            ))}
+                        <p className="text-sm mb-2">{skill.description}</p>
+                        {skill.examples && skill.examples.length > 0 && (
+                          <div>
+                            <p className="text-xs font-medium text-foreground">Examples:</p>
+                            <div className="flex flex-wrap gap-1 mt-1">
+                              {skill.examples.map((example, idx) => (
+                                <Badge key={idx} className={colorBadge("gray", "text-[10px]")}>
+                                  {example}
+                                </Badge>
+                              ))}
+                            </div>
                           </div>
                         )}
                       </div>
-                      <Text className="text-sm mb-2">{skill.description}</Text>
-                      {skill.examples && skill.examples.length > 0 && (
-                        <div>
-                          <Text className="text-xs font-medium text-gray-700">Examples:</Text>
-                          <div className="flex flex-wrap gap-1 mt-1">
-                            {skill.examples.map((example, idx) => (
-                              <Badge key={idx} color="gray" size="xs">
-                                {example}
-                              </Badge>
-                            ))}
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  ))}
+                    ))}
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
 
-            {/* Additional Properties */}
-            {selectedAgent.supportsAuthenticatedExtendedCard && (
-              <div>
-                <Text className="text-lg font-semibold mb-4">Additional Features</Text>
-                <Badge color="green">Supports Authenticated Extended Card</Badge>
-              </div>
-            )}
-          </div>
-        )}
-      </Modal>
+              {/* Additional Properties */}
+              {selectedAgent.supportsAuthenticatedExtendedCard && (
+                <div>
+                  <p className="text-lg font-semibold mb-4">Additional Features</p>
+                  <Badge className={colorBadge("green")}>Supports Authenticated Extended Card</Badge>
+                </div>
+              )}
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
 
       {/* MCP Server Details Modal */}
-      <Modal
-        title={selectedMcpServer?.server_name || "MCP Server Details"}
-        width={1000}
+      <Dialog
         open={isMcpModalVisible}
-        footer={null}
-        onOk={handleOk}
-        onCancel={handleCancel}
+        onOpenChange={(o) => (!o ? closeDetailDialogs() : undefined)}
       >
-        {selectedMcpServer && (
-          <div className="space-y-6">
-            {/* Server Overview */}
-            <div>
-              <Text className="text-lg font-semibold mb-4">Server Overview</Text>
-              <div className="grid grid-cols-2 gap-4 mb-4">
-                <div>
-                  <Text className="font-medium">Server Name:</Text>
-                  <Text>{selectedMcpServer.server_name}</Text>
-                </div>
-                <div>
-                  <Text className="font-medium">Server ID:</Text>
-                  <div className="flex items-center space-x-2">
-                    <Text className="text-xs truncate">{selectedMcpServer.server_id}</Text>
-                    <CopyOutlined
-                      onClick={() => copyToClipboard(selectedMcpServer.server_id)}
-                      className="cursor-pointer text-gray-500 hover:text-blue-500"
-                    />
+        <DialogContent className="max-w-[1000px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{selectedMcpServer?.server_name || "MCP Server Details"}</DialogTitle>
+          </DialogHeader>
+          {selectedMcpServer && (
+            <div className="space-y-6">
+              {/* Server Overview */}
+              <div>
+                <p className="text-lg font-semibold mb-4">Server Overview</p>
+                <div className="grid grid-cols-2 gap-4 mb-4">
+                  <div>
+                    <p className="font-medium">Server Name:</p>
+                    <p>{selectedMcpServer.server_name}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Server ID:</p>
+                    <div className="flex items-center space-x-2">
+                      <span className="text-xs truncate">{selectedMcpServer.server_id}</span>
+                      <Copy
+                        size={14}
+                        onClick={() => copyToClipboard(selectedMcpServer.server_id)}
+                        className="cursor-pointer text-muted-foreground hover:text-primary"
+                      />
+                    </div>
+                  </div>
+                  {selectedMcpServer.alias && (
+                    <div>
+                      <p className="font-medium">Alias:</p>
+                      <p>{selectedMcpServer.alias}</p>
+                    </div>
+                  )}
+                  <div>
+                    <p className="font-medium">Transport:</p>
+                    <Badge className={colorBadge("blue")}>{selectedMcpServer.transport}</Badge>
+                  </div>
+                  <div>
+                    <p className="font-medium">Auth Type:</p>
+                    <Badge
+                      className={colorBadge(
+                        selectedMcpServer.auth_type === "none" ? "gray" : "green",
+                      )}
+                    >
+                      {selectedMcpServer.auth_type}
+                    </Badge>
+                  </div>
+                  <div>
+                    <p className="font-medium">Status:</p>
+                    <Badge
+                      className={colorBadge(
+                        selectedMcpServer.status === "active" || selectedMcpServer.status === "healthy"
+                          ? "green"
+                          : selectedMcpServer.status === "inactive" || selectedMcpServer.status === "unhealthy"
+                            ? "red"
+                            : "gray",
+                      )}
+                    >
+                      {selectedMcpServer.status || "unknown"}
+                    </Badge>
                   </div>
                 </div>
-                {selectedMcpServer.alias && (
-                  <div>
-                    <Text className="font-medium">Alias:</Text>
-                    <Text>{selectedMcpServer.alias}</Text>
+                {selectedMcpServer.description && (
+                  <div className="mt-2">
+                    <p className="font-medium">Description:</p>
+                    <p className="mt-1">{selectedMcpServer.description}</p>
                   </div>
                 )}
-                <div>
-                  <Text className="font-medium">Transport:</Text>
-                  <Badge color="blue">{selectedMcpServer.transport}</Badge>
-                </div>
-                <div>
-                  <Text className="font-medium">Auth Type:</Text>
-                  <Badge color={selectedMcpServer.auth_type === "none" ? "gray" : "green"}>
-                    {selectedMcpServer.auth_type}
-                  </Badge>
-                </div>
-                <div>
-                  <Text className="font-medium">Status:</Text>
-                  <Badge
-                    color={
-                      selectedMcpServer.status === "active" || selectedMcpServer.status === "healthy"
-                        ? "green"
-                        : selectedMcpServer.status === "inactive" || selectedMcpServer.status === "unhealthy"
-                          ? "red"
-                          : "gray"
-                    }
-                  >
-                    {selectedMcpServer.status || "unknown"}
-                  </Badge>
+              </div>
+
+              {/* Connection Details */}
+              <div>
+                <p className="text-lg font-semibold mb-4">Connection Details</p>
+                <div className="space-y-2">
+                  <div>
+                    <p className="font-medium">URL:</p>
+                    <div className="flex items-center space-x-2 mt-1">
+                      <span className="text-sm break-all bg-muted p-2 rounded flex-1">{selectedMcpServer.url}</span>
+                      <Copy
+                        size={14}
+                        onClick={() => copyToClipboard(selectedMcpServer.url)}
+                        className="cursor-pointer text-muted-foreground hover:text-primary flex-shrink-0"
+                      />
+                    </div>
+                  </div>
+                  {selectedMcpServer.command && (
+                    <div>
+                      <p className="font-medium">Command:</p>
+                      <p className="text-sm bg-muted p-2 rounded mt-1 font-mono">{selectedMcpServer.command}</p>
+                    </div>
+                  )}
                 </div>
               </div>
-              {selectedMcpServer.description && (
-                <div className="mt-2">
-                  <Text className="font-medium">Description:</Text>
-                  <Text className="mt-1">{selectedMcpServer.description}</Text>
+
+              {/* Tools */}
+              {selectedMcpServer.allowed_tools && selectedMcpServer.allowed_tools.length > 0 && (
+                <div>
+                  <p className="text-lg font-semibold mb-4">Allowed Tools</p>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedMcpServer.allowed_tools.map((tool, idx) => (
+                      <Badge key={idx} className={colorBadge("purple")}>
+                        {tool}
+                      </Badge>
+                    ))}
+                  </div>
                 </div>
               )}
-            </div>
 
-            {/* Connection Details */}
-            <div>
-              <Text className="text-lg font-semibold mb-4">Connection Details</Text>
-              <div className="space-y-2">
+              {/* Teams */}
+              {selectedMcpServer.teams && selectedMcpServer.teams.length > 0 && (
                 <div>
-                  <Text className="font-medium">URL:</Text>
-                  <div className="flex items-center space-x-2 mt-1">
-                    <Text className="text-sm break-all bg-gray-100 p-2 rounded flex-1">{selectedMcpServer.url}</Text>
-                    <CopyOutlined
-                      onClick={() => copyToClipboard(selectedMcpServer.url)}
-                      className="cursor-pointer text-gray-500 hover:text-blue-500 flex-shrink-0"
-                    />
+                  <p className="text-lg font-semibold mb-4">Teams</p>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedMcpServer.teams.map((team, idx) => (
+                      <Badge key={idx} className={colorBadge("blue")}>
+                        {team}
+                      </Badge>
+                    ))}
                   </div>
                 </div>
-                {selectedMcpServer.command && (
-                  <div>
-                    <Text className="font-medium">Command:</Text>
-                    <Text className="text-sm bg-gray-100 p-2 rounded mt-1 font-mono">{selectedMcpServer.command}</Text>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Tools */}
-            {selectedMcpServer.allowed_tools && selectedMcpServer.allowed_tools.length > 0 && (
-              <div>
-                <Text className="text-lg font-semibold mb-4">Allowed Tools</Text>
-                <div className="flex flex-wrap gap-2">
-                  {selectedMcpServer.allowed_tools.map((tool, idx) => (
-                    <Badge key={idx} color="purple">
-                      {tool}
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Teams */}
-            {selectedMcpServer.teams && selectedMcpServer.teams.length > 0 && (
-              <div>
-                <Text className="text-lg font-semibold mb-4">Teams</Text>
-                <div className="flex flex-wrap gap-2">
-                  {selectedMcpServer.teams.map((team, idx) => (
-                    <Badge key={idx} color="blue">
-                      {team}
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Access Groups */}
-            {selectedMcpServer.mcp_access_groups && selectedMcpServer.mcp_access_groups.length > 0 && (
-              <div>
-                <Text className="text-lg font-semibold mb-4">Access Groups</Text>
-                <div className="flex flex-wrap gap-2">
-                  {selectedMcpServer.mcp_access_groups.map((group, idx) => (
-                    <Badge key={idx} color="green">
-                      {group}
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Metadata */}
-            <div>
-              <Text className="text-lg font-semibold mb-4">Metadata</Text>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <Text className="font-medium">Created By:</Text>
-                  <Text>{selectedMcpServer.created_by}</Text>
-                </div>
-                <div>
-                  <Text className="font-medium">Updated By:</Text>
-                  <Text>{selectedMcpServer.updated_by}</Text>
-                </div>
-                <div>
-                  <Text className="font-medium">Created At:</Text>
-                  <Text className="text-sm">{new Date(selectedMcpServer.created_at).toLocaleString()}</Text>
-                </div>
-                <div>
-                  <Text className="font-medium">Updated At:</Text>
-                  <Text className="text-sm">{new Date(selectedMcpServer.updated_at).toLocaleString()}</Text>
-                </div>
-                {selectedMcpServer.last_health_check && (
-                  <div>
-                    <Text className="font-medium">Last Health Check:</Text>
-                    <Text className="text-sm">{new Date(selectedMcpServer.last_health_check).toLocaleString()}</Text>
-                  </div>
-                )}
-              </div>
-              {selectedMcpServer.health_check_error && (
-                <div className="mt-2 p-2 bg-red-50 rounded">
-                  <Text className="font-medium text-red-700">Health Check Error:</Text>
-                  <Text className="text-sm text-red-600 mt-1">{selectedMcpServer.health_check_error}</Text>
-                </div>
               )}
-            </div>
 
-            {/* Usage Example */}
-            <div>
-              <Text className="text-lg font-semibold mb-4">Usage Example</Text>
-              <SyntaxHighlighter language="python" className="text-sm">
-                {`from fastmcp import Client
+              {/* Access Groups */}
+              {selectedMcpServer.mcp_access_groups && selectedMcpServer.mcp_access_groups.length > 0 && (
+                <div>
+                  <p className="text-lg font-semibold mb-4">Access Groups</p>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedMcpServer.mcp_access_groups.map((group, idx) => (
+                      <Badge key={idx} className={colorBadge("green")}>
+                        {group}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Metadata */}
+              <div>
+                <p className="text-lg font-semibold mb-4">Metadata</p>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="font-medium">Created By:</p>
+                    <p>{selectedMcpServer.created_by}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Updated By:</p>
+                    <p>{selectedMcpServer.updated_by}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Created At:</p>
+                    <p className="text-sm">{new Date(selectedMcpServer.created_at).toLocaleString()}</p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Updated At:</p>
+                    <p className="text-sm">{new Date(selectedMcpServer.updated_at).toLocaleString()}</p>
+                  </div>
+                  {selectedMcpServer.last_health_check && (
+                    <div>
+                      <p className="font-medium">Last Health Check:</p>
+                      <p className="text-sm">{new Date(selectedMcpServer.last_health_check).toLocaleString()}</p>
+                    </div>
+                  )}
+                </div>
+                {selectedMcpServer.health_check_error && (
+                  <div className="mt-2 p-2 bg-red-50 dark:bg-red-950/30 rounded">
+                    <p className="font-medium text-red-700 dark:text-red-300">Health Check Error:</p>
+                    <p className="text-sm text-red-600 dark:text-red-400 mt-1">{selectedMcpServer.health_check_error}</p>
+                  </div>
+                )}
+              </div>
+
+              {/* Usage Example */}
+              <div>
+                <p className="text-lg font-semibold mb-4">Usage Example</p>
+                <SyntaxHighlighter language="python" className="text-sm">
+                  {`from fastmcp import Client
 import asyncio
 
 # Standard MCP configuration
@@ -1067,11 +1075,12 @@ async def main():
 
 if __name__ == "__main__":
     asyncio.run(main())`}
-              </SyntaxHighlighter>
+                </SyntaxHighlighter>
+              </div>
             </div>
-          </div>
-        )}
-      </Modal>
+          )}
+        </DialogContent>
+      </Dialog>
 
       {/* Make Model Public Form */}
       <MakeModelPublicForm
diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.test.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.test.tsx
index 67c6d7d6cc9..93883f9bfce 100644
--- a/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.test.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.test.tsx
@@ -12,68 +12,6 @@ vi.mock("../../networking", () => ({
 import { makeAgentsPublicCall } from "../../networking";
 const mockMakeAgentsPublicCall = vi.mocked(makeAgentsPublicCall);
 
-// Mock antd components
-vi.mock("antd", () => ({
-  Modal: ({ open, title, children, onCancel, footer }: any) =>
-    open ? (
-      <div data-testid="modal">
-        <div>{title}</div>
-        {children}
-        {footer}
-      </div>
-    ) : null,
-  Form: Object.assign(({ children, form }: any) => <form data-testid="form">{children}</form>, {
-    useForm: () => [
-      {
-        resetFields: vi.fn(),
-        validateFields: vi.fn(),
-        getFieldsValue: vi.fn(),
-        setFieldsValue: vi.fn(),
-      },
-      vi.fn(),
-    ],
-    Item: ({ children }: any) => <div>{children}</div>,
-  }),
-  Steps: Object.assign(
-    ({ children, current, className }: any) => (
-      <div data-testid="steps" className={className}>
-        {children}
-      </div>
-    ),
-    {
-      Step: ({ title }: any) => <div>{title}</div>,
-    },
-  ),
-  Button: ({ children, onClick, disabled, loading, ...props }: any) => (
-    <button onClick={onClick} disabled={disabled || loading} data-loading={loading} {...props}>
-      {children}
-    </button>
-  ),
-  Checkbox: ({ checked, indeterminate, onChange, children, disabled }: any) => (
-    <label>
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={(e) => onChange({ target: { checked: e.target.checked } })}
-        disabled={disabled}
-        data-indeterminate={indeterminate}
-      />
-      {children}
-    </label>
-  ),
-}));
-
-// Mock @tremor/react components
-vi.mock("@tremor/react", () => ({
-  Text: ({ children, className }: any) => <span className={className}>{children}</span>,
-  Title: ({ children }: any) => <h3>{children}</h3>,
-  Badge: ({ children, color, size }: any) => (
-    <span data-color={color} data-size={size}>
-      {children}
-    </span>
-  ),
-}));
-
 describe("MakeAgentPublicForm", () => {
   const mockProps = {
     visible: true,
@@ -123,15 +61,13 @@ describe("MakeAgentPublicForm", () => {
   it("should initialize with correct state", () => {
     render(<MakeAgentPublicForm {...mockProps} />);
 
-    // Check that the component renders with the correct title and content
     expect(screen.getByText("Make Agents Public")).toBeInTheDocument();
     expect(screen.getByText("Select Agents to Make Public")).toBeInTheDocument();
 
-    // Check that all agent checkboxes are present
+    // Select all + 2 agents
     const checkboxes = screen.getAllByRole("checkbox");
-    expect(checkboxes).toHaveLength(3); // Select all + 2 agents
+    expect(checkboxes).toHaveLength(3);
 
-    // Check that the Next button is enabled (agents are preselected)
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).not.toBeDisabled();
   });
@@ -139,25 +75,20 @@ describe("MakeAgentPublicForm", () => {
   it("should handle agent selection and navigation", async () => {
     render(<MakeAgentPublicForm {...mockProps} />);
 
-    // Initially on step 1
     expect(screen.getByText("Select Agents to Make Public")).toBeInTheDocument();
 
-    // Select all agents using the select all checkbox
     const selectAllCheckbox = screen.getByLabelText("Select All (2)");
     await act(async () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // Verify Next button is enabled
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).not.toBeDisabled();
 
-    // Click Next
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Should move to step 2
     await waitFor(() => {
       expect(screen.getByText("Confirm Making Agents Public")).toBeInTheDocument();
     });
@@ -168,24 +99,20 @@ describe("MakeAgentPublicForm", () => {
 
     render(<MakeAgentPublicForm {...mockProps} />);
 
-    // Select all agents
     const selectAllCheckbox = screen.getByLabelText("Select All (2)");
     await act(async () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // Navigate to confirm step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Wait for navigation to complete
     await waitFor(() => {
       expect(screen.getByText("Confirm Making Agents Public")).toBeInTheDocument();
     });
 
-    // Submit
     const submitButton = screen.getByRole("button", { name: "Make Public" });
     await act(async () => {
       fireEvent.click(submitButton);
@@ -209,7 +136,6 @@ describe("MakeAgentPublicForm", () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // All checkboxes should be checked
     checkboxes.forEach((checkbox) => {
       expect(checkbox).toBeChecked();
     });
@@ -219,7 +145,6 @@ describe("MakeAgentPublicForm", () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // All checkboxes should be unchecked except the indeterminate state
     expect(checkboxes[0]).not.toBeChecked();
     expect(checkboxes[1]).not.toBeChecked();
     expect(checkboxes[2]).not.toBeChecked();
@@ -228,20 +153,20 @@ describe("MakeAgentPublicForm", () => {
   it("should show error when no agents selected", async () => {
     render(<MakeAgentPublicForm {...mockProps} />);
 
-    // Deselect all agents first
     const checkboxes = screen.getAllByRole("checkbox");
     await act(async () => {
-      fireEvent.click(checkboxes[0]); // Click select all to select all
-      fireEvent.click(checkboxes[0]); // Click select all again to deselect all
+      fireEvent.click(checkboxes[0]); // select all
+    });
+    await act(async () => {
+      fireEvent.click(checkboxes[0]); // deselect all
     });
 
-    // Try to go to next step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Should stay on same step
+    // Stays on same step
     expect(screen.getByText("Select Agents to Make Public")).toBeInTheDocument();
   });
 
@@ -255,11 +180,9 @@ describe("MakeAgentPublicForm", () => {
 
     expect(screen.getByText("No agents available.")).toBeInTheDocument();
 
-    // Select All checkbox should be disabled
     const selectAllCheckbox = screen.getByLabelText("Select All");
     expect(selectAllCheckbox).toBeDisabled();
 
-    // Next button should be disabled
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).toBeDisabled();
   });
@@ -267,54 +190,46 @@ describe("MakeAgentPublicForm", () => {
   it("should handle Cancel button functionality", async () => {
     render(<MakeAgentPublicForm {...mockProps} />);
 
-    // Click Cancel button
     const cancelButton = screen.getByRole("button", { name: "Cancel" });
     await act(async () => {
       fireEvent.click(cancelButton);
     });
 
-    // Should call onClose
     expect(mockProps.onClose).toHaveBeenCalled();
   });
 
   it("should handle Previous button functionality", async () => {
     render(<MakeAgentPublicForm {...mockProps} />);
 
-    // Navigate to step 1
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Verify we're on step 1
     await waitFor(() => {
       expect(screen.getByText("Confirm Making Agents Public")).toBeInTheDocument();
     });
 
-    // Click Previous button
     const previousButton = screen.getByRole("button", { name: "Previous" });
     await act(async () => {
       fireEvent.click(previousButton);
     });
 
-    // Should go back to step 0
     expect(screen.getByText("Select Agents to Make Public")).toBeInTheDocument();
   });
 
   it("should handle individual agent selection", async () => {
     render(<MakeAgentPublicForm {...mockProps} />);
 
-    // Get all checkboxes (select all + individual agents)
     const checkboxes = screen.getAllByRole("checkbox");
-    expect(checkboxes).toHaveLength(3); // Select all + 2 agents
+    expect(checkboxes).toHaveLength(3);
 
-    // Initially, agent-2 should be selected (it's already public)
-    const agent1Checkbox = checkboxes[1]; // First agent checkbox
-    const agent2Checkbox = checkboxes[2]; // Second agent checkbox
+    const agent1Checkbox = checkboxes[1];
+    const agent2Checkbox = checkboxes[2];
 
-    expect(agent2Checkbox).toBeChecked(); // agent-2 is already public
+    // agent-2 preselected (already public)
+    expect(agent2Checkbox).toBeChecked();
 
-    // Select agent-1
     await act(async () => {
       fireEvent.click(agent1Checkbox);
     });
@@ -322,7 +237,6 @@ describe("MakeAgentPublicForm", () => {
     expect(agent1Checkbox).toBeChecked();
     expect(agent2Checkbox).toBeChecked();
 
-    // Deselect agent-2
     await act(async () => {
       fireEvent.click(agent2Checkbox);
     });
@@ -330,9 +244,9 @@ describe("MakeAgentPublicForm", () => {
     expect(agent1Checkbox).toBeChecked();
     expect(agent2Checkbox).not.toBeChecked();
 
-    // Select all should be indeterminate now
+    // Select all should be indeterminate (Radix uses data-state)
     const selectAllCheckbox = checkboxes[0];
-    expect(selectAllCheckbox).toHaveAttribute("data-indeterminate", "true");
+    expect(selectAllCheckbox).toHaveAttribute("data-state", "indeterminate");
   });
 
   it("should display skills overflow text when agent has more than 3 skills", () => {
@@ -354,12 +268,9 @@ describe("MakeAgentPublicForm", () => {
 
     render(<MakeAgentPublicForm {...propsWithManySkills} />);
 
-    // Should show first 3 skills as badges
     expect(screen.getByText("Skill 1")).toBeInTheDocument();
     expect(screen.getByText("Skill 2")).toBeInTheDocument();
     expect(screen.getByText("Skill 3")).toBeInTheDocument();
-
-    // Should show "+2 more" text for the remaining skills
     expect(screen.getByText("+2 more")).toBeInTheDocument();
   });
 
@@ -369,7 +280,6 @@ describe("MakeAgentPublicForm", () => {
 
     render(<MakeAgentPublicForm {...mockProps} />);
 
-    // Navigate to confirm step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
@@ -379,18 +289,15 @@ describe("MakeAgentPublicForm", () => {
       expect(screen.getByText("Confirm Making Agents Public")).toBeInTheDocument();
     });
 
-    // Submit
     const submitButton = screen.getByRole("button", { name: "Make Public" });
     await act(async () => {
       fireEvent.click(submitButton);
     });
 
-    // Should handle error and show error notification
     await waitFor(() => {
       expect(mockMakeAgentsPublicCall).toHaveBeenCalledWith("test-token", ["agent-2"]);
     });
 
-    // Should not call onSuccess or onClose on error
     expect(mockProps.onSuccess).not.toHaveBeenCalled();
     expect(mockProps.onClose).not.toHaveBeenCalled();
   });
@@ -404,7 +311,6 @@ describe("MakeAgentPublicForm", () => {
 
     render(<MakeAgentPublicForm {...mockProps} />);
 
-    // Navigate to confirm step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
@@ -414,17 +320,14 @@ describe("MakeAgentPublicForm", () => {
       expect(screen.getByText("Confirm Making Agents Public")).toBeInTheDocument();
     });
 
-    // Submit
-    const submitButton = screen.getByRole("button", { name: "Make Public" });
     await act(async () => {
-      fireEvent.click(submitButton);
+      fireEvent.click(screen.getByRole("button", { name: "Make Public" }));
     });
 
-    // Check loading state
-    expect(submitButton).toHaveAttribute("data-loading", "true");
-    expect(submitButton).toBeDisabled();
+    const loadingButton = screen.getByRole("button", { name: "Making Public..." });
+    expect(loadingButton).toHaveAttribute("data-loading", "true");
+    expect(loadingButton).toBeDisabled();
 
-    // Resolve the promise
     resolvePromise({});
     await waitFor(() => {
       expect(mockProps.onSuccess).toHaveBeenCalled();
@@ -440,13 +343,10 @@ describe("MakeAgentPublicForm", () => {
 
     render(<MakeAgentPublicForm {...invisibleProps} />);
 
-    // Modal should not be rendered
-    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
     expect(screen.queryByText("Make Agents Public")).not.toBeInTheDocument();
   });
 
   it("should preselect already public agents when modal opens", () => {
-    // Test data where one agent is public and one is not
     const mixedPublicProps = {
       ...mockProps,
       agentHubData: [
@@ -456,7 +356,7 @@ describe("MakeAgentPublicForm", () => {
           description: "Description 1",
           url: "http://example.com/agent1",
           version: "1.0",
-          is_public: false, // Not public
+          is_public: false,
           skills: [],
           protocolVersion: "1.0",
         },
@@ -466,7 +366,7 @@ describe("MakeAgentPublicForm", () => {
           description: "Description 2",
           url: "http://example.com/agent2",
           version: "2.0",
-          is_public: true, // Already public
+          is_public: true,
           skills: [],
           protocolVersion: "1.0",
         },
@@ -476,7 +376,7 @@ describe("MakeAgentPublicForm", () => {
           description: "Description 3",
           url: "http://example.com/agent3",
           version: "3.0",
-          is_public: true, // Already public
+          is_public: true,
           skills: [],
           protocolVersion: "1.0",
         },
@@ -485,21 +385,18 @@ describe("MakeAgentPublicForm", () => {
 
     render(<MakeAgentPublicForm {...mixedPublicProps} />);
 
-    // Check that the correct checkboxes are selected
     const checkboxes = screen.getAllByRole("checkbox");
-    expect(checkboxes).toHaveLength(4); // Select all + 3 agents
+    expect(checkboxes).toHaveLength(4);
 
-    // agent-2 and agent-3 should be checked (they're already public)
     const agent1Checkbox = checkboxes[1];
     const agent2Checkbox = checkboxes[2];
     const agent3Checkbox = checkboxes[3];
 
-    expect(agent1Checkbox).not.toBeChecked(); // agent-1 is not public
-    expect(agent2Checkbox).toBeChecked(); // agent-2 is public
-    expect(agent3Checkbox).toBeChecked(); // agent-3 is public
+    expect(agent1Checkbox).not.toBeChecked();
+    expect(agent2Checkbox).toBeChecked();
+    expect(agent3Checkbox).toBeChecked();
 
-    // Select all should be indeterminate
     const selectAllCheckbox = checkboxes[0];
-    expect(selectAllCheckbox).toHaveAttribute("data-indeterminate", "true");
+    expect(selectAllCheckbox).toHaveAttribute("data-state", "indeterminate");
   });
 });
diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.tsx
index 8cdc1c95218..7dc1d046caa 100644
--- a/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeAgentPublicForm.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { Form, Steps } from "antd";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -10,12 +9,11 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
 import { makeAgentsPublicCall } from "../../networking";
 import NotificationsManager from "../../molecules/notifications_manager";
 import { AgentHubData } from "@/components/AIHub/AgentHubTableColumns";
 
-const { Step } = Steps;
-
 interface MakeAgentPublicFormProps {
   visible: boolean;
   onClose: () => void;
@@ -24,6 +22,49 @@ interface MakeAgentPublicFormProps {
   onSuccess: () => void;
 }
 
+function Stepper({ current, steps }: { current: number; steps: string[] }) {
+  return (
+    <ol className="flex items-center gap-2 mb-6">
+      {steps.map((label, i) => {
+        const active = i === current;
+        const completed = i < current;
+        return (
+          <li
+            key={label}
+            className="flex items-center gap-2 flex-1 min-w-0"
+          >
+            <div
+              className={cn(
+                "flex h-6 w-6 items-center justify-center rounded-full border text-xs font-medium",
+                completed
+                  ? "bg-primary text-primary-foreground border-primary"
+                  : active
+                    ? "border-primary text-primary"
+                    : "border-border text-muted-foreground",
+              )}
+            >
+              {completed ? <Check className="h-3 w-3" /> : i + 1}
+            </div>
+            <span
+              className={cn(
+                "text-sm truncate",
+                active || completed
+                  ? "text-foreground"
+                  : "text-muted-foreground",
+              )}
+            >
+              {label}
+            </span>
+            {i < steps.length - 1 && (
+              <div className="h-px flex-1 bg-border" />
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
 const MakeAgentPublicForm: React.FC<MakeAgentPublicFormProps> = ({
   visible,
   onClose,
@@ -34,12 +75,10 @@ const MakeAgentPublicForm: React.FC<MakeAgentPublicFormProps> = ({
   const [currentStep, setCurrentStep] = useState(0);
   const [selectedAgents, setSelectedAgents] = useState<Set<string>>(new Set());
   const [loading, setLoading] = useState(false);
-  const [form] = Form.useForm();
 
   const handleClose = () => {
     setCurrentStep(0);
     setSelectedAgents(new Set());
-    form.resetFields();
     onClose();
   };
 
@@ -314,7 +353,11 @@ const MakeAgentPublicForm: React.FC<MakeAgentPublicFormProps> = ({
           )}
 
           {currentStep === 1 && (
-            <Button onClick={handleSubmit} disabled={loading}>
+            <Button
+              onClick={handleSubmit}
+              disabled={loading}
+              data-loading={loading ? "true" : undefined}
+            >
               {loading ? "Making Public..." : "Make Public"}
             </Button>
           )}
@@ -332,15 +375,9 @@ const MakeAgentPublicForm: React.FC<MakeAgentPublicFormProps> = ({
         <DialogHeader>
           <DialogTitle>Make Agents Public</DialogTitle>
         </DialogHeader>
-        <Form form={form} layout="vertical">
-          <Steps current={currentStep} className="mb-6">
-            <Step title="Select Agents" />
-            <Step title="Confirm" />
-          </Steps>
-
-          {renderStepContent()}
-          {renderStepButtons()}
-        </Form>
+        <Stepper current={currentStep} steps={["Select Agents", "Confirm"]} />
+        {renderStepContent()}
+        {renderStepButtons()}
       </DialogContent>
     </Dialog>
   );
diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.test.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.test.tsx
index b0228e9e868..f9c2b6f124d 100644
--- a/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.test.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.test.tsx
@@ -12,72 +12,6 @@ vi.mock("../../networking", () => ({
 import { makeMCPPublicCall } from "../../networking";
 const mockMakeMCPPublicCall = vi.mocked(makeMCPPublicCall);
 
-// Mock antd components
-vi.mock("antd", () => ({
-  Modal: ({ open, title, children, onCancel, footer }: any) =>
-    open ? (
-      <div data-testid="modal">
-        <div>{title}</div>
-        {children}
-        {footer}
-      </div>
-    ) : null,
-  Form: Object.assign(({ children, form }: any) => <form data-testid="form">{children}</form>, {
-    useForm: () => [
-      {
-        resetFields: vi.fn(),
-        validateFields: vi.fn(),
-        getFieldsValue: vi.fn(),
-        setFieldsValue: vi.fn(),
-      },
-      vi.fn(),
-    ],
-    Item: ({ children }: any) => <div>{children}</div>,
-  }),
-  Steps: Object.assign(
-    ({ children, current, className }: any) => (
-      <div data-testid="steps" className={className}>
-        {children}
-      </div>
-    ),
-    {
-      Step: ({ title }: any) => <div>{title}</div>,
-    },
-  ),
-  Button: ({ children, onClick, disabled, loading, ...props }: any) => (
-    <button onClick={onClick} disabled={disabled || loading} data-loading={loading} {...props}>
-      {children}
-    </button>
-  ),
-  Checkbox: ({ checked, indeterminate, onChange, children, disabled }: any) => (
-    <label>
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={(e) => onChange({ target: { checked: e.target.checked } })}
-        disabled={disabled}
-        data-indeterminate={indeterminate}
-      />
-      {children}
-    </label>
-  ),
-}));
-
-// Additional @tremor/react mocks (Button is already mocked globally)
-vi.mock("@tremor/react", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@tremor/react")>();
-  return {
-    ...actual,
-    Text: ({ children, className }: any) => <span className={className}>{children}</span>,
-    Title: ({ children }: any) => <h3>{children}</h3>,
-    Badge: ({ children, color, size }: any) => (
-      <span data-color={color} data-size={size}>
-        {children}
-      </span>
-    ),
-  };
-});
-
 describe("MakeMCPPublicForm", () => {
   const mockProps = {
     visible: true,
@@ -150,15 +84,12 @@ describe("MakeMCPPublicForm", () => {
   it("should initialize with correct state", () => {
     render(<MakeMCPPublicForm {...mockProps} />);
 
-    // Check that the component renders with the correct title and content
     expect(screen.getByText("Make MCP Servers Public")).toBeInTheDocument();
     expect(screen.getByText("Select MCP Servers to Make Public")).toBeInTheDocument();
 
-    // Check that all server checkboxes are present
     const checkboxes = screen.getAllByRole("checkbox");
-    expect(checkboxes).toHaveLength(3); // Select all + 2 servers
+    expect(checkboxes).toHaveLength(3);
 
-    // Check that the Next button is enabled (servers are preselected)
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).not.toBeDisabled();
   });
@@ -166,25 +97,20 @@ describe("MakeMCPPublicForm", () => {
   it("should handle server selection and navigation", async () => {
     render(<MakeMCPPublicForm {...mockProps} />);
 
-    // Initially on step 1
     expect(screen.getByText("Select MCP Servers to Make Public")).toBeInTheDocument();
 
-    // Select all servers using the select all checkbox
     const selectAllCheckbox = screen.getByLabelText("Select All (2)");
     await act(async () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // Verify Next button is enabled
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).not.toBeDisabled();
 
-    // Click Next
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Should move to step 2
     await waitFor(() => {
       expect(screen.getByText("Confirm Making MCP Servers Public")).toBeInTheDocument();
     });
@@ -195,24 +121,20 @@ describe("MakeMCPPublicForm", () => {
 
     render(<MakeMCPPublicForm {...mockProps} />);
 
-    // Select all servers
     const selectAllCheckbox = screen.getByLabelText("Select All (2)");
     await act(async () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // Navigate to confirm step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Wait for navigation to complete
     await waitFor(() => {
       expect(screen.getByText("Confirm Making MCP Servers Public")).toBeInTheDocument();
     });
 
-    // Submit
     const submitButton = screen.getByRole("button", { name: "Make Public" });
     await act(async () => {
       fireEvent.click(submitButton);
@@ -231,22 +153,18 @@ describe("MakeMCPPublicForm", () => {
     const checkboxes = screen.getAllByRole("checkbox");
     const selectAllCheckbox = checkboxes[0];
 
-    // Select all
     await act(async () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // All checkboxes should be checked
     checkboxes.forEach((checkbox) => {
       expect(checkbox).toBeChecked();
     });
 
-    // Deselect all
     await act(async () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // All checkboxes should be unchecked except the indeterminate state
     expect(checkboxes[0]).not.toBeChecked();
     expect(checkboxes[1]).not.toBeChecked();
     expect(checkboxes[2]).not.toBeChecked();
@@ -255,20 +173,19 @@ describe("MakeMCPPublicForm", () => {
   it("should show error when no servers selected", async () => {
     render(<MakeMCPPublicForm {...mockProps} />);
 
-    // Deselect all servers first
     const checkboxes = screen.getAllByRole("checkbox");
     await act(async () => {
-      fireEvent.click(checkboxes[0]); // Click select all to select all
-      fireEvent.click(checkboxes[0]); // Click select all again to deselect all
+      fireEvent.click(checkboxes[0]);
+    });
+    await act(async () => {
+      fireEvent.click(checkboxes[0]);
     });
 
-    // Try to go to next step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Should stay on same step
     expect(screen.getByText("Select MCP Servers to Make Public")).toBeInTheDocument();
   });
 
@@ -282,11 +199,9 @@ describe("MakeMCPPublicForm", () => {
 
     expect(screen.getByText("No MCP servers available.")).toBeInTheDocument();
 
-    // Select All checkbox should be disabled
     const selectAllCheckbox = screen.getByLabelText("Select All");
     expect(selectAllCheckbox).toBeDisabled();
 
-    // Next button should be disabled
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).toBeDisabled();
   });
@@ -294,54 +209,45 @@ describe("MakeMCPPublicForm", () => {
   it("should handle Cancel button functionality", async () => {
     render(<MakeMCPPublicForm {...mockProps} />);
 
-    // Click Cancel button
     const cancelButton = screen.getByRole("button", { name: "Cancel" });
     await act(async () => {
       fireEvent.click(cancelButton);
     });
 
-    // Should call onClose
     expect(mockProps.onClose).toHaveBeenCalled();
   });
 
   it("should handle Previous button functionality", async () => {
     render(<MakeMCPPublicForm {...mockProps} />);
 
-    // Navigate to step 1
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Verify we're on step 1
     await waitFor(() => {
       expect(screen.getByText("Confirm Making MCP Servers Public")).toBeInTheDocument();
     });
 
-    // Click Previous button
     const previousButton = screen.getByRole("button", { name: "Previous" });
     await act(async () => {
       fireEvent.click(previousButton);
     });
 
-    // Should go back to step 0
     expect(screen.getByText("Select MCP Servers to Make Public")).toBeInTheDocument();
   });
 
   it("should handle individual server selection", async () => {
     render(<MakeMCPPublicForm {...mockProps} />);
 
-    // Get all checkboxes (select all + individual servers)
     const checkboxes = screen.getAllByRole("checkbox");
-    expect(checkboxes).toHaveLength(3); // Select all + 2 servers
+    expect(checkboxes).toHaveLength(3);
 
-    // Initially, server-2 should be selected (it's already public)
-    const server1Checkbox = checkboxes[1]; // First server checkbox
-    const server2Checkbox = checkboxes[2]; // Second server checkbox
+    const server1Checkbox = checkboxes[1];
+    const server2Checkbox = checkboxes[2];
 
-    expect(server2Checkbox).toBeChecked(); // server-2 is already public
+    expect(server2Checkbox).toBeChecked();
 
-    // Select server-1
     await act(async () => {
       fireEvent.click(server1Checkbox);
     });
@@ -349,7 +255,6 @@ describe("MakeMCPPublicForm", () => {
     expect(server1Checkbox).toBeChecked();
     expect(server2Checkbox).toBeChecked();
 
-    // Deselect server-2
     await act(async () => {
       fireEvent.click(server2Checkbox);
     });
@@ -357,9 +262,8 @@ describe("MakeMCPPublicForm", () => {
     expect(server1Checkbox).toBeChecked();
     expect(server2Checkbox).not.toBeChecked();
 
-    // Select all should be indeterminate now
     const selectAllCheckbox = checkboxes[0];
-    expect(selectAllCheckbox).toHaveAttribute("data-indeterminate", "true");
+    expect(selectAllCheckbox).toHaveAttribute("data-state", "indeterminate");
   });
 
   it("should display tools overflow text when server has more than 3 tools", () => {
@@ -375,12 +279,9 @@ describe("MakeMCPPublicForm", () => {
 
     render(<MakeMCPPublicForm {...propsWithManyTools} />);
 
-    // Should show first 3 tools as badges
     expect(screen.getByText("tool-1")).toBeInTheDocument();
     expect(screen.getByText("tool-2")).toBeInTheDocument();
     expect(screen.getByText("tool-3")).toBeInTheDocument();
-
-    // Should show "+2 more" text for the remaining tools
     expect(screen.getByText("+2 more")).toBeInTheDocument();
   });
 
@@ -390,7 +291,6 @@ describe("MakeMCPPublicForm", () => {
 
     render(<MakeMCPPublicForm {...mockProps} />);
 
-    // Navigate to confirm step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
@@ -400,18 +300,15 @@ describe("MakeMCPPublicForm", () => {
       expect(screen.getByText("Confirm Making MCP Servers Public")).toBeInTheDocument();
     });
 
-    // Submit
     const submitButton = screen.getByRole("button", { name: "Make Public" });
     await act(async () => {
       fireEvent.click(submitButton);
     });
 
-    // Should handle error and show error notification
     await waitFor(() => {
       expect(mockMakeMCPPublicCall).toHaveBeenCalledWith("test-token", ["server-2"]);
     });
 
-    // Should not call onSuccess or onClose on error
     expect(mockProps.onSuccess).not.toHaveBeenCalled();
     expect(mockProps.onClose).not.toHaveBeenCalled();
   });
@@ -425,7 +322,6 @@ describe("MakeMCPPublicForm", () => {
 
     render(<MakeMCPPublicForm {...mockProps} />);
 
-    // Navigate to confirm step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
@@ -435,17 +331,14 @@ describe("MakeMCPPublicForm", () => {
       expect(screen.getByText("Confirm Making MCP Servers Public")).toBeInTheDocument();
     });
 
-    // Submit
-    const submitButton = screen.getByRole("button", { name: "Make Public" });
     await act(async () => {
-      fireEvent.click(submitButton);
+      fireEvent.click(screen.getByRole("button", { name: "Make Public" }));
     });
 
-    // Check loading state
-    expect(submitButton).toHaveAttribute("data-loading", "true");
-    expect(submitButton).toBeDisabled();
+    const loadingButton = screen.getByRole("button", { name: "Making Public..." });
+    expect(loadingButton).toHaveAttribute("data-loading", "true");
+    expect(loadingButton).toBeDisabled();
 
-    // Resolve the promise
     resolvePromise({});
     await waitFor(() => {
       expect(mockProps.onSuccess).toHaveBeenCalled();
@@ -461,13 +354,10 @@ describe("MakeMCPPublicForm", () => {
 
     render(<MakeMCPPublicForm {...invisibleProps} />);
 
-    // Modal should not be rendered
-    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
     expect(screen.queryByText("Make MCP Servers Public")).not.toBeInTheDocument();
   });
 
   it("should preselect already public servers when modal opens", () => {
-    // Test data where one server is public and one is not
     const mixedPublicProps = {
       ...mockProps,
       mcpHubData: [
@@ -478,7 +368,7 @@ describe("MakeMCPPublicForm", () => {
           url: "http://example.com/server1",
           transport: "http",
           status: "active",
-          mcp_info: { is_public: false }, // Not public
+          mcp_info: { is_public: false },
           allowed_tools: [],
           auth_type: "bearer",
           credentials: {},
@@ -500,7 +390,7 @@ describe("MakeMCPPublicForm", () => {
           url: "http://example.com/server2",
           transport: "websocket",
           status: "inactive",
-          mcp_info: { is_public: true }, // Already public
+          mcp_info: { is_public: true },
           allowed_tools: [],
           auth_type: "none",
           credentials: {},
@@ -522,7 +412,7 @@ describe("MakeMCPPublicForm", () => {
           url: "http://example.com/server3",
           transport: "sse",
           status: "healthy",
-          mcp_info: { is_public: true }, // Already public
+          mcp_info: { is_public: true },
           allowed_tools: [],
           auth_type: "oauth",
           credentials: {},
@@ -542,21 +432,18 @@ describe("MakeMCPPublicForm", () => {
 
     render(<MakeMCPPublicForm {...mixedPublicProps} />);
 
-    // Check that the correct checkboxes are selected
     const checkboxes = screen.getAllByRole("checkbox");
-    expect(checkboxes).toHaveLength(4); // Select all + 3 servers
+    expect(checkboxes).toHaveLength(4);
 
-    // server-2 and server-3 should be checked (they're already public)
     const server1Checkbox = checkboxes[1];
     const server2Checkbox = checkboxes[2];
     const server3Checkbox = checkboxes[3];
 
-    expect(server1Checkbox).not.toBeChecked(); // server-1 is not public
-    expect(server2Checkbox).toBeChecked(); // server-2 is public
-    expect(server3Checkbox).toBeChecked(); // server-3 is public
+    expect(server1Checkbox).not.toBeChecked();
+    expect(server2Checkbox).toBeChecked();
+    expect(server3Checkbox).toBeChecked();
 
-    // Select all should be indeterminate
     const selectAllCheckbox = checkboxes[0];
-    expect(selectAllCheckbox).toHaveAttribute("data-indeterminate", "true");
+    expect(selectAllCheckbox).toHaveAttribute("data-state", "indeterminate");
   });
 });
diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.tsx
index 5a44885fa42..78951d6cd73 100644
--- a/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { Form, Steps } from "antd";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -10,12 +9,11 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
 import { makeMCPPublicCall } from "../../networking";
 import NotificationsManager from "../../molecules/notifications_manager";
 import { MCPServerData } from "@/components/mcp_hub_table_columns";
 
-const { Step } = Steps;
-
 interface MakeMCPPublicFormProps {
   visible: boolean;
   onClose: () => void;
@@ -34,6 +32,49 @@ const STATUS_BADGE_CLASSES = (status?: string): string => {
   return "bg-muted text-muted-foreground";
 };
 
+function Stepper({ current, steps }: { current: number; steps: string[] }) {
+  return (
+    <ol className="flex items-center gap-2 mb-6">
+      {steps.map((label, i) => {
+        const active = i === current;
+        const completed = i < current;
+        return (
+          <li
+            key={label}
+            className="flex items-center gap-2 flex-1 min-w-0"
+          >
+            <div
+              className={cn(
+                "flex h-6 w-6 items-center justify-center rounded-full border text-xs font-medium",
+                completed
+                  ? "bg-primary text-primary-foreground border-primary"
+                  : active
+                    ? "border-primary text-primary"
+                    : "border-border text-muted-foreground",
+              )}
+            >
+              {completed ? <Check className="h-3 w-3" /> : i + 1}
+            </div>
+            <span
+              className={cn(
+                "text-sm truncate",
+                active || completed
+                  ? "text-foreground"
+                  : "text-muted-foreground",
+              )}
+            >
+              {label}
+            </span>
+            {i < steps.length - 1 && (
+              <div className="h-px flex-1 bg-border" />
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
 const MakeMCPPublicForm: React.FC<MakeMCPPublicFormProps> = ({
   visible,
   onClose,
@@ -46,12 +87,10 @@ const MakeMCPPublicForm: React.FC<MakeMCPPublicFormProps> = ({
     new Set(),
   );
   const [loading, setLoading] = useState(false);
-  const [form] = Form.useForm();
 
   const handleClose = () => {
     setCurrentStep(0);
     setSelectedServers(new Set());
-    form.resetFields();
     onClose();
   };
 
@@ -361,7 +400,11 @@ const MakeMCPPublicForm: React.FC<MakeMCPPublicFormProps> = ({
           )}
 
           {currentStep === 1 && (
-            <Button onClick={handleSubmit} disabled={loading}>
+            <Button
+              onClick={handleSubmit}
+              disabled={loading}
+              data-loading={loading ? "true" : undefined}
+            >
               {loading ? "Making Public..." : "Make Public"}
             </Button>
           )}
@@ -379,15 +422,9 @@ const MakeMCPPublicForm: React.FC<MakeMCPPublicFormProps> = ({
         <DialogHeader>
           <DialogTitle>Make MCP Servers Public</DialogTitle>
         </DialogHeader>
-        <Form form={form} layout="vertical">
-          <Steps current={currentStep} className="mb-6">
-            <Step title="Select Servers" />
-            <Step title="Confirm" />
-          </Steps>
-
-          {renderStepContent()}
-          {renderStepButtons()}
-        </Form>
+        <Stepper current={currentStep} steps={["Select Servers", "Confirm"]} />
+        {renderStepContent()}
+        {renderStepButtons()}
       </DialogContent>
     </Dialog>
   );
diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.test.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.test.tsx
index 2b57535f3ad..14a19b812ef 100644
--- a/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.test.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.test.tsx
@@ -29,68 +29,6 @@ vi.mock("../../networking", () => ({
 import { makeModelGroupPublic } from "../../networking";
 const mockMakeModelGroupPublic = vi.mocked(makeModelGroupPublic);
 
-// Mock antd components
-vi.mock("antd", () => ({
-  Modal: ({ open, title, children, onCancel, footer }: any) =>
-    open ? (
-      <div data-testid="modal">
-        <div>{title}</div>
-        {children}
-        {footer}
-      </div>
-    ) : null,
-  Form: Object.assign(({ children, form }: any) => <form data-testid="form">{children}</form>, {
-    useForm: () => [
-      {
-        resetFields: vi.fn(),
-        validateFields: vi.fn(),
-        getFieldsValue: vi.fn(),
-        setFieldsValue: vi.fn(),
-      },
-      vi.fn(),
-    ],
-    Item: ({ children }: any) => <div>{children}</div>,
-  }),
-  Steps: Object.assign(
-    ({ children, current, className }: any) => (
-      <div data-testid="steps" className={className}>
-        {children}
-      </div>
-    ),
-    {
-      Step: ({ title }: any) => <div>{title}</div>,
-    },
-  ),
-  Button: ({ children, onClick, disabled, loading, ...props }: any) => (
-    <button onClick={onClick} disabled={disabled || loading} data-loading={loading} {...props}>
-      {children}
-    </button>
-  ),
-  Checkbox: ({ checked, indeterminate, onChange, children, disabled }: any) => (
-    <label>
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={(e) => onChange({ target: { checked: e.target.checked } })}
-        disabled={disabled}
-        data-indeterminate={indeterminate}
-      />
-      {children}
-    </label>
-  ),
-}));
-
-// Mock @tremor/react components
-vi.mock("@tremor/react", () => ({
-  Text: ({ children, className }: any) => <span className={className}>{children}</span>,
-  Title: ({ children }: any) => <h3>{children}</h3>,
-  Badge: ({ children, color, size }: any) => (
-    <span data-color={color} data-size={size}>
-      {children}
-    </span>
-  ),
-}));
-
 // Mock ModelFilters component
 vi.mock("../../model_filters", () => ({
   default: ({ onFilteredDataChange, modelHubData }: any) => (
@@ -102,14 +40,6 @@ vi.mock("../../model_filters", () => ({
   ),
 }));
 
-// Mock NotificationsManager
-vi.mock("../../molecules/notifications_manager", () => ({
-  default: {
-    fromBackend: vi.fn(),
-    success: vi.fn(),
-  },
-}));
-
 describe("MakeModelPublicForm", () => {
   const mockProps = {
     visible: true,
@@ -170,15 +100,12 @@ describe("MakeModelPublicForm", () => {
   it("should initialize with correct state", () => {
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Check that the component renders with the correct title and content
     expect(screen.getByText("Make Models Public")).toBeInTheDocument();
     expect(screen.getByText("Select Models to Make Public")).toBeInTheDocument();
 
-    // Check that all model checkboxes are present
     const checkboxes = screen.getAllByRole("checkbox");
-    expect(checkboxes).toHaveLength(3); // Select all + 2 models
+    expect(checkboxes).toHaveLength(3);
 
-    // Check that the Next button is enabled (models are preselected)
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).not.toBeDisabled();
   });
@@ -186,25 +113,20 @@ describe("MakeModelPublicForm", () => {
   it("should handle model selection and navigation", async () => {
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Initially on step 1
     expect(screen.getByText("Select Models to Make Public")).toBeInTheDocument();
 
-    // Select all models using the select all checkbox
     const selectAllCheckbox = screen.getByLabelText("Select All (2)");
     await act(async () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // Verify Next button is enabled
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).not.toBeDisabled();
 
-    // Click Next
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Should move to step 2
     await waitFor(() => {
       expect(screen.getByText("Confirm Making Models Public")).toBeInTheDocument();
     });
@@ -215,24 +137,20 @@ describe("MakeModelPublicForm", () => {
 
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Select all models
     const selectAllCheckbox = screen.getByLabelText("Select All (2)");
     await act(async () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // Navigate to confirm step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Wait for navigation to complete
     await waitFor(() => {
       expect(screen.getByText("Confirm Making Models Public")).toBeInTheDocument();
     });
 
-    // Submit
     const submitButton = screen.getByRole("button", { name: "Make Public" });
     await act(async () => {
       fireEvent.click(submitButton);
@@ -251,22 +169,18 @@ describe("MakeModelPublicForm", () => {
     const checkboxes = screen.getAllByRole("checkbox");
     const selectAllCheckbox = checkboxes[0];
 
-    // Select all
     await act(async () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // All checkboxes should be checked
     checkboxes.forEach((checkbox) => {
       expect(checkbox).toBeChecked();
     });
 
-    // Deselect all
     await act(async () => {
       fireEvent.click(selectAllCheckbox);
     });
 
-    // All checkboxes should be unchecked except the indeterminate state
     expect(checkboxes[0]).not.toBeChecked();
     expect(checkboxes[1]).not.toBeChecked();
     expect(checkboxes[2]).not.toBeChecked();
@@ -275,20 +189,19 @@ describe("MakeModelPublicForm", () => {
   it("should show error when no models selected", async () => {
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Deselect all models first
     const checkboxes = screen.getAllByRole("checkbox");
     await act(async () => {
-      fireEvent.click(checkboxes[0]); // Click select all to select all
-      fireEvent.click(checkboxes[0]); // Click select all again to deselect all
+      fireEvent.click(checkboxes[0]);
+    });
+    await act(async () => {
+      fireEvent.click(checkboxes[0]);
     });
 
-    // Try to go to next step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Should stay on same step
     expect(screen.getByText("Select Models to Make Public")).toBeInTheDocument();
   });
 
@@ -302,11 +215,9 @@ describe("MakeModelPublicForm", () => {
 
     expect(screen.getByText("No models match the current filters.")).toBeInTheDocument();
 
-    // Select All checkbox should be disabled
     const selectAllCheckbox = screen.getByLabelText("Select All");
     expect(selectAllCheckbox).toBeDisabled();
 
-    // Next button should be disabled
     const nextButton = screen.getByRole("button", { name: "Next" });
     expect(nextButton).toBeDisabled();
   });
@@ -314,54 +225,45 @@ describe("MakeModelPublicForm", () => {
   it("should handle Cancel button functionality", async () => {
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Click Cancel button
     const cancelButton = screen.getByRole("button", { name: "Cancel" });
     await act(async () => {
       fireEvent.click(cancelButton);
     });
 
-    // Should call onClose
     expect(mockProps.onClose).toHaveBeenCalled();
   });
 
   it("should handle Previous button functionality", async () => {
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Navigate to step 1
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
     });
 
-    // Verify we're on step 1
     await waitFor(() => {
       expect(screen.getByText("Confirm Making Models Public")).toBeInTheDocument();
     });
 
-    // Click Previous button
     const previousButton = screen.getByRole("button", { name: "Previous" });
     await act(async () => {
       fireEvent.click(previousButton);
     });
 
-    // Should go back to step 0
     expect(screen.getByText("Select Models to Make Public")).toBeInTheDocument();
   });
 
   it("should handle individual model selection", async () => {
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Get all checkboxes (select all + individual models)
     const checkboxes = screen.getAllByRole("checkbox");
-    expect(checkboxes).toHaveLength(3); // Select all + 2 models
+    expect(checkboxes).toHaveLength(3);
 
-    // Initially, gpt-3.5-turbo should be selected (it's already public)
-    const gpt4Checkbox = checkboxes[1]; // First model checkbox
-    const gpt35Checkbox = checkboxes[2]; // Second model checkbox
+    const gpt4Checkbox = checkboxes[1];
+    const gpt35Checkbox = checkboxes[2];
 
-    expect(gpt35Checkbox).toBeChecked(); // gpt-3.5-turbo is already public
+    expect(gpt35Checkbox).toBeChecked();
 
-    // Select gpt-4
     await act(async () => {
       fireEvent.click(gpt4Checkbox);
     });
@@ -369,7 +271,6 @@ describe("MakeModelPublicForm", () => {
     expect(gpt4Checkbox).toBeChecked();
     expect(gpt35Checkbox).toBeChecked();
 
-    // Deselect gpt-3.5-turbo
     await act(async () => {
       fireEvent.click(gpt35Checkbox);
     });
@@ -377,22 +278,17 @@ describe("MakeModelPublicForm", () => {
     expect(gpt4Checkbox).toBeChecked();
     expect(gpt35Checkbox).not.toBeChecked();
 
-    // Select all should be indeterminate now
     const selectAllCheckbox = checkboxes[0];
-    expect(selectAllCheckbox).toHaveAttribute("data-indeterminate", "true");
+    expect(selectAllCheckbox).toHaveAttribute("data-state", "indeterminate");
   });
 
   it("should display model badges and information", () => {
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Should show model names
     expect(screen.getByText("gpt-4")).toBeInTheDocument();
     expect(screen.getByText("gpt-3.5-turbo")).toBeInTheDocument();
 
-    // Should show mode badges
     expect(screen.getAllByText("chat")).toHaveLength(2);
-
-    // Should show provider badges
     expect(screen.getAllByText("openai")).toHaveLength(2);
   });
 
@@ -402,7 +298,6 @@ describe("MakeModelPublicForm", () => {
 
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Navigate to confirm step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
@@ -412,18 +307,15 @@ describe("MakeModelPublicForm", () => {
       expect(screen.getByText("Confirm Making Models Public")).toBeInTheDocument();
     });
 
-    // Submit
     const submitButton = screen.getByRole("button", { name: "Make Public" });
     await act(async () => {
       fireEvent.click(submitButton);
     });
 
-    // Should handle error and show error notification
     await waitFor(() => {
       expect(mockMakeModelGroupPublic).toHaveBeenCalledWith("test-token", ["gpt-3.5-turbo"]);
     });
 
-    // Should not call onSuccess or onClose on error
     expect(mockProps.onSuccess).not.toHaveBeenCalled();
     expect(mockProps.onClose).not.toHaveBeenCalled();
   });
@@ -437,7 +329,6 @@ describe("MakeModelPublicForm", () => {
 
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Navigate to confirm step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
@@ -447,17 +338,14 @@ describe("MakeModelPublicForm", () => {
       expect(screen.getByText("Confirm Making Models Public")).toBeInTheDocument();
     });
 
-    // Submit
-    const submitButton = screen.getByRole("button", { name: "Make Public" });
     await act(async () => {
-      fireEvent.click(submitButton);
+      fireEvent.click(screen.getByRole("button", { name: "Make Public" }));
     });
 
-    // Check loading state
-    expect(submitButton).toHaveAttribute("data-loading", "true");
-    expect(submitButton).toBeDisabled();
+    const loadingButton = screen.getByRole("button", { name: "Making Public..." });
+    expect(loadingButton).toHaveAttribute("data-loading", "true");
+    expect(loadingButton).toBeDisabled();
 
-    // Resolve the promise
     resolvePromise({});
     await waitFor(() => {
       expect(mockProps.onSuccess).toHaveBeenCalled();
@@ -473,13 +361,10 @@ describe("MakeModelPublicForm", () => {
 
     render(<MakeModelPublicForm {...invisibleProps} />);
 
-    // Modal should not be rendered
-    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
     expect(screen.queryByText("Make Models Public")).not.toBeInTheDocument();
   });
 
   it("should preselect already public models when modal opens", () => {
-    // Test data where one model is public and one is not
     const mixedPublicProps = {
       ...mockProps,
       modelHubData: [
@@ -506,36 +391,36 @@ describe("MakeModelPublicForm", () => {
 
     render(<MakeModelPublicForm {...mixedPublicProps} />);
 
-    // Check that the correct checkboxes are selected
     const checkboxes = screen.getAllByRole("checkbox");
-    expect(checkboxes).toHaveLength(4); // Select all + 3 models
+    expect(checkboxes).toHaveLength(4);
 
-    // private-model should not be checked, public models should be checked
     const privateModelCheckbox = checkboxes[1];
     const publicModelCheckbox = checkboxes[2];
     const anotherPublicModelCheckbox = checkboxes[3];
 
-    expect(privateModelCheckbox).not.toBeChecked(); // private-model is not public
-    expect(publicModelCheckbox).toBeChecked(); // public-model is public
-    expect(anotherPublicModelCheckbox).toBeChecked(); // another-public-model is public
+    expect(privateModelCheckbox).not.toBeChecked();
+    expect(publicModelCheckbox).toBeChecked();
+    expect(anotherPublicModelCheckbox).toBeChecked();
 
-    // Select all should be indeterminate
     const selectAllCheckbox = checkboxes[0];
-    expect(selectAllCheckbox).toHaveAttribute("data-indeterminate", "true");
+    expect(selectAllCheckbox).toHaveAttribute("data-state", "indeterminate");
   });
 
   it("should show selected count", () => {
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Should show that 1 model is selected (gpt-3.5-turbo is preselected)
-    expect(screen.getByText("1")).toBeInTheDocument();
-    expect(screen.getByText("model selected")).toBeInTheDocument();
+    // "1 model selected" is rendered as `<strong>1</strong> model selected`
+    const banner = screen.getByText((_content, node) => {
+      if (!node) return false;
+      if (node.tagName !== "P") return false;
+      return (node.textContent ?? "").trim().replace(/\s+/g, " ") === "1 model selected";
+    });
+    expect(banner).toBeInTheDocument();
   });
 
   it("should show confirmation step with selected models", async () => {
     render(<MakeModelPublicForm {...mockProps} />);
 
-    // Navigate to confirm step
     const nextButton = screen.getByRole("button", { name: "Next" });
     await act(async () => {
       fireEvent.click(nextButton);
@@ -545,13 +430,9 @@ describe("MakeModelPublicForm", () => {
       expect(screen.getByText("Confirm Making Models Public")).toBeInTheDocument();
     });
 
-    // Should show the selected model
     expect(screen.getByText("gpt-3.5-turbo")).toBeInTheDocument();
 
-    // Should show the warning message
     expect(screen.getByText(/Warning:/)).toBeInTheDocument();
     expect(screen.getByText(/model_hub_table/)).toBeInTheDocument();
-
-    // Should show total count (already verified by checking the presence of the confirmation step)
   });
 });
diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.tsx
index 95ef399f1a2..69417793582 100644
--- a/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useCallback, useEffect } from "react";
-import { Form, Steps } from "antd";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -9,12 +8,12 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
 import { makeModelGroupPublic } from "../../networking";
 import ModelFilters from "../../model_filters";
 import NotificationsManager from "../../molecules/notifications_manager";
 
-const { Step } = Steps;
-
 interface ModelGroupInfo {
   model_group: string;
   providers: string[];
@@ -42,6 +41,49 @@ interface MakeModelPublicFormProps {
   onSuccess: () => void;
 }
 
+function Stepper({ current, steps }: { current: number; steps: string[] }) {
+  return (
+    <ol className="flex items-center gap-2 mb-6">
+      {steps.map((label, i) => {
+        const active = i === current;
+        const completed = i < current;
+        return (
+          <li
+            key={label}
+            className="flex items-center gap-2 flex-1 min-w-0"
+          >
+            <div
+              className={cn(
+                "flex h-6 w-6 items-center justify-center rounded-full border text-xs font-medium",
+                completed
+                  ? "bg-primary text-primary-foreground border-primary"
+                  : active
+                    ? "border-primary text-primary"
+                    : "border-border text-muted-foreground",
+              )}
+            >
+              {completed ? <Check className="h-3 w-3" /> : i + 1}
+            </div>
+            <span
+              className={cn(
+                "text-sm truncate",
+                active || completed
+                  ? "text-foreground"
+                  : "text-muted-foreground",
+              )}
+            >
+              {label}
+            </span>
+            {i < steps.length - 1 && (
+              <div className="h-px flex-1 bg-border" />
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
 const MakeModelPublicForm: React.FC<MakeModelPublicFormProps> = ({
   visible,
   onClose,
@@ -53,13 +95,11 @@ const MakeModelPublicForm: React.FC<MakeModelPublicFormProps> = ({
   const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set());
   const [filteredData, setFilteredData] = useState<ModelGroupInfo[]>([]);
   const [loading, setLoading] = useState(false);
-  const [form] = Form.useForm();
 
   const handleClose = () => {
     setCurrentStep(0);
     setSelectedModels(new Set());
     setFilteredData([]);
-    form.resetFields();
     onClose();
   };
 
@@ -181,7 +221,6 @@ const MakeModelPublicForm: React.FC<MakeModelPublicFormProps> = ({
           Users will still require a valid Virtual Key to use these models.
         </p>
 
-        {/* Filters */}
         <ModelFilters
           modelHubData={modelHubData}
           onFilteredDataChange={handleFilteredDataChange}
@@ -332,7 +371,11 @@ const MakeModelPublicForm: React.FC<MakeModelPublicFormProps> = ({
           )}
 
           {currentStep === 1 && (
-            <Button onClick={handleSubmit} disabled={loading}>
+            <Button
+              onClick={handleSubmit}
+              disabled={loading}
+              data-loading={loading ? "true" : undefined}
+            >
               {loading ? "Making Public..." : "Make Public"}
             </Button>
           )}
@@ -350,15 +393,9 @@ const MakeModelPublicForm: React.FC<MakeModelPublicFormProps> = ({
         <DialogHeader>
           <DialogTitle>Make Models Public</DialogTitle>
         </DialogHeader>
-        <Form form={form} layout="vertical">
-          <Steps current={currentStep} className="mb-6">
-            <Step title="Select Models" />
-            <Step title="Confirm" />
-          </Steps>
-
-          {renderStepContent()}
-          {renderStepButtons()}
-        </Form>
+        <Stepper current={currentStep} steps={["Select Models", "Confirm"]} />
+        {renderStepContent()}
+        {renderStepButtons()}
       </DialogContent>
     </Dialog>
   );