diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index a083fdf844..e8d05a43b4 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -15,7 +15,7 @@ import {
 } from "@tremor/react";
 import { TabPanel, TabPanels, TabGroup, TabList, Tab, TextInput, Icon } from "@tremor/react";
 import { Select, SelectItem, MultiSelect, MultiSelectItem } from "@tremor/react";
-import { modelInfoCall, userGetRequesedtModelsCall, modelMetricsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall } from "./networking";
+import { modelInfoCall, userGetRequesedtModelsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall } from "./networking";
 import { BarChart } from "@tremor/react";
 import {
   Button as Button2,
@@ -78,7 +78,6 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   userID,
 }) => {
   const [modelData, setModelData] = useState<any>({ data: [] });
-  const [modelMetrics, setModelMetrics] = useState<any[]>([]);
   const [pendingRequests, setPendingRequests] = useState<any[]>([]);
   const [form] = Form.useForm();
   const [modelMap, setModelMap] = useState<any>(null);
@@ -136,14 +135,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
         console.log("Model data response:", modelDataResponse.data);
         setModelData(modelDataResponse);
 
-        const modelMetricsResponse = await modelMetricsCall(
-          accessToken,
-          userID,
-          userRole
-        );
-
-        console.log("Model metrics response:", modelMetricsResponse);
-        setModelMetrics(modelMetricsResponse);
+       
 
         // if userRole is Admin, show the pending requests
         if (userRole === "Admin" && accessToken) {
@@ -484,30 +476,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
             </TableBody>
           </Table>
         </Card>
-        <Card>
-          <Title>Model Statistics (Number Requests)</Title>
-              <BarChart
-                data={modelMetrics}
-                index="model"
-                categories={["num_requests"]}
-                colors={["blue"]}
-                yAxisWidth={400}
-                layout="vertical"
-                tickGap={5}
-              />
-        </Card>
-        <Card>
-          <Title>Model Statistics (Latency)</Title>
-              <BarChart
-                data={modelMetrics}
-                index="model"
-                categories={["avg_latency_seconds"]}
-                colors={["red"]}
-                yAxisWidth={400}
-                layout="vertical"
-                tickGap={5}
-              />
-        </Card>
+
       </Grid>
       </TabPanel>
       <TabPanel className="h-full">
diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx
index 8900a25995..fa0c0fd024 100644
--- a/ui/litellm-dashboard/src/components/usage.tsx
+++ b/ui/litellm-dashboard/src/components/usage.tsx
@@ -11,7 +11,8 @@ import {
   adminTopKeysCall,
   adminTopModelsCall,
   teamSpendLogsCall,
-  tagsSpendLogsCall
+  tagsSpendLogsCall,
+  modelMetricsCall,
 } from "./networking";
 import { start } from "repl";
 
@@ -143,6 +144,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
   const [topTagsData, setTopTagsData] = useState<any[]>([]);
   const [uniqueTeamIds, setUniqueTeamIds] = useState<any[]>([]);
   const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
+  const [modelMetrics, setModelMetrics] = useState<any[]>([]);
 
   const firstDay = new Date(
     currentDate.getFullYear(),
@@ -223,6 +225,8 @@ const UsagePage: React.FC<UsagePageProps> = ({
             //get top tags
             const top_tags = await tagsSpendLogsCall(accessToken);
             setTopTagsData(top_tags.top_10_tags);
+
+            
           } else if (userRole == "App Owner") {
             await userSpendLogsCall(
               accessToken,
@@ -259,6 +263,15 @@ const UsagePage: React.FC<UsagePageProps> = ({
               }
             });
           }
+
+          const modelMetricsResponse = await modelMetricsCall(
+            accessToken,
+            userID,
+            userRole
+          );
+  
+          console.log("Model metrics response:", modelMetricsResponse);
+          setModelMetrics(modelMetricsResponse);
         } catch (error) {
           console.error("There was an error fetching the data", error);
           // Optionally, update your UI to reflect the error state here as well
@@ -281,6 +294,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
           <Tab>All Up</Tab>
           <Tab>Team Based Usage</Tab>
            <Tab>Tag Based Usage</Tab>
+           <Tab>Model Based Usage</Tab>
         </TabList>
         <TabPanels>
           <TabPanel>
@@ -420,6 +434,33 @@ const UsagePage: React.FC<UsagePageProps> = ({
               </Col>
             </Grid>
             </TabPanel>
+            <Card>
+          <Title>Model Statistics (Number Requests)</Title>
+              <BarChart
+                data={modelMetrics}
+                index="model"
+                categories={["num_requests"]}
+                colors={["blue"]}
+                yAxisWidth={400}
+                layout="vertical"
+                tickGap={5}
+              />
+        </Card>
+        <Card>
+          <Title>Model Statistics (Latency)</Title>
+              <BarChart
+                data={modelMetrics}
+                index="model"
+                categories={["avg_latency_seconds"]}
+                colors={["red"]}
+                yAxisWidth={400}
+                layout="vertical"
+                tickGap={5}
+              />
+        </Card>
+            <TabPanel>
+
+            </TabPanel>
         </TabPanels>
       </TabGroup>
     </div>