From 1bbdbcad7d355d22407bf208abe4d4197f1c94c5 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 30 Mar 2024 14:00:22 -0700
Subject: [PATCH] (ui) fix models page

---
 .../src/components/model_dashboard.tsx        | 41 ++++++++-----------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index ee87f15ca18..93d93ca43b7 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -6,9 +6,11 @@ import {
   Table,
   TableHead,
   TableRow,
+  TableHeaderCell,
   TableCell,
   TableBody,
   Metric,
+  Text,
   Grid,
 } from "@tremor/react";
 import { modelInfoCall, userGetRequesedtModelsCall, modelMetricsCall } from "./networking";
@@ -146,39 +148,32 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
           <Table className="mt-5">
             <TableHead>
               <TableRow>
-                <TableCell>
-                  <Title>Model Name </Title>
-                </TableCell>
-                <TableCell>
-                  <Title>Provider</Title>
-                </TableCell>
+
+                  <TableHeaderCell>Model Name </TableHeaderCell>
+
+                <TableHeaderCell>
+                  Provider
+                </TableHeaderCell>
                 {
                   userRole === "Admin" && (
-                    <TableCell>
-                      <Title>API Base</Title>
-                    </TableCell>
+                    <TableHeaderCell>
+                      API Base
+                    </TableHeaderCell>
                   )
                 }
-                
-                <TableCell>
-                  <Title>Access</Title>
-                </TableCell>
-                <TableCell>
-                  <Title>Input Price per token ($)</Title>
-                </TableCell>
-                <TableCell>
-                  <Title>Output Price per token ($)</Title>
-                </TableCell>
-                <TableCell>
-                  <Title>Max Tokens</Title>
-                </TableCell>
+                <TableHeaderCell>
+                  Access
+                </TableHeaderCell>
+                <TableHeaderCell>Input Price per token ($)</TableHeaderCell>
+                <TableHeaderCell>Output Price per token ($)</TableHeaderCell>
+                <TableHeaderCell>Max Tokens</TableHeaderCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {modelData.data.map((model: any) => (
                 <TableRow key={model.model_name}>
                   <TableCell>
-                    <Title>{model.model_name}</Title>
+                    <Text>{model.model_name}</Text>
                   </TableCell>
                   <TableCell>{model.provider}</TableCell>
                   {