diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index f27358e07a0..d0dac5180c5 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -244,6 +244,8 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
             userRole={userRole}
             accessToken={accessToken}
             userSpend={teamSpend}
+            selectedTeam = {selectedTeam ? selectedTeam : null}
+
           />
 
           <ViewKeyTable
diff --git a/ui/litellm-dashboard/src/components/view_user_spend.tsx b/ui/litellm-dashboard/src/components/view_user_spend.tsx
index d4b446e4ea8..eed5efe57df 100644
--- a/ui/litellm-dashboard/src/components/view_user_spend.tsx
+++ b/ui/litellm-dashboard/src/components/view_user_spend.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 import { keyDeleteCall, getTotalSpendCall } from "./networking";
 import { StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
-import { DonutChart } from "@tremor/react";
+import { Accordion, AccordionHeader, AccordionList, DonutChart } from "@tremor/react";
 import {
   Badge,
   Card,
@@ -16,9 +16,13 @@ import {
   Text,
   Title,
   Icon,
+  AccordionBody,
+  List,
+  ListItem,
+
 } from "@tremor/react";
 import { Statistic } from "antd"
-import { spendUsersCall }  from "./networking";
+import { spendUsersCall, modelAvailableCall }  from "./networking";
 
 
 // Define the props type
@@ -32,11 +36,13 @@ interface ViewUserSpendProps {
     userRole: string | null;
     accessToken: string | null;
     userSpend: number | null;  
+    selectedTeam: any | null;
 }
-const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessToken, userSpend }) => {
+const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessToken, userSpend, selectedTeam }) => {
     console.log(`userSpend: ${userSpend}`)
     let [spend, setSpend] = useState(userSpend !== null ? userSpend : 0.0);
     const [maxBudget, setMaxBudget] = useState(0.0);
+    const [userModels, setUserModels] = useState([]);
     useEffect(() => {
       const fetchData = async () => {
         if (!accessToken || !userID || !userRole) {
@@ -62,9 +68,30 @@ const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessT
           }
         }
       };
+      const fetchUserModels = async () => {
+        try {
+          if (userID === null || userRole === null) {
+            return;
+          }
+  
+          if (accessToken !== null) {
+            const model_available = await modelAvailableCall(accessToken, userID, userRole);
+            let available_model_names = model_available["data"].map(
+              (element: { id: string }) => element.id
+            );
+            console.log("available_model_names:", available_model_names);
+            setUserModels(available_model_names);
+          }
+        } catch (error) {
+          console.error("Error fetching user models:", error);
+        }
+      };
     
+      fetchUserModels();
       fetchData();
-    }, [userRole, accessToken]);
+    }, [userRole, accessToken, userID]);
+
+    
 
     useEffect(() => {
       if (userSpend !== null) {
@@ -72,18 +99,50 @@ const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessT
       }
     }, [userSpend])
 
+    // logic to decide what models to display
+    let modelsToDisplay = [];
+    if (selectedTeam && selectedTeam.models) {
+        modelsToDisplay = selectedTeam.models;
+    }
+
+    // check if "all-proxy-models" is in modelsToDisplay
+    if (modelsToDisplay && modelsToDisplay.includes("all-proxy-models")) {
+        console.log("user models:", userModels);
+        modelsToDisplay = userModels;
+    }
+
+
     const displayMaxBudget = maxBudget !== null ? `$${maxBudget} limit` : "No limit";
 
     const roundedSpend = spend !== undefined ? spend.toFixed(4) : null;
 
     console.log(`spend in view user spend: ${spend}`)
     return (
-        <>
-      <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Total Spend </p>
-      <p className="text-2xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">${roundedSpend}</p>
-        
-    </>
-    )
+      <div className="flex items-center">
+        <div>
+          <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
+            Total Spend{" "}
+          </p>
+          <p className="text-2xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">
+            ${roundedSpend}
+          </p>
+        </div>
+        <div className="ml-auto">
+          <Accordion>
+            <AccordionHeader>Models</AccordionHeader>
+            <AccordionBody className="absolute right-0 z-10 bg-white p-2 shadow-lg max-w-xs">
+              <List>
+                {modelsToDisplay.map((model: string) => (
+                  <ListItem key={model}>
+                    <Text>{model}</Text>
+                  </ListItem>
+                ))}
+              </List>
+            </AccordionBody>
+          </Accordion>
+        </div>
+      </div>
+    );
 }
 
 export default ViewUserSpend;