diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
index 9f3fec67aa..62088983bc 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
@@ -400,15 +400,15 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
         const pageData = await userDailyActivityCall(accessToken, startTime, endTime, page, effectiveUserId);
         allResults.push(...pageData.results);
         if (pageData.metadata) {
-          aggregatedMetadata.total_spend += pageData.metadata.total_spend || 0;
-          aggregatedMetadata.total_api_requests += pageData.metadata.total_api_requests || 0;
-          aggregatedMetadata.total_successful_requests += pageData.metadata.total_successful_requests || 0;
-          aggregatedMetadata.total_failed_requests += pageData.metadata.total_failed_requests || 0;
-          aggregatedMetadata.total_tokens += pageData.metadata.total_tokens || 0;
-          aggregatedMetadata.total_prompt_tokens += pageData.metadata.total_prompt_tokens || 0;
-          aggregatedMetadata.total_completion_tokens += pageData.metadata.total_completion_tokens || 0;
-          aggregatedMetadata.total_cache_read_input_tokens += pageData.metadata.total_cache_read_input_tokens || 0;
-          aggregatedMetadata.total_cache_creation_input_tokens += pageData.metadata.total_cache_creation_input_tokens || 0;
+          aggregatedMetadata.total_spend = (aggregatedMetadata.total_spend || 0) + (pageData.metadata.total_spend || 0);
+          aggregatedMetadata.total_api_requests = (aggregatedMetadata.total_api_requests || 0) + (pageData.metadata.total_api_requests || 0);
+          aggregatedMetadata.total_successful_requests = (aggregatedMetadata.total_successful_requests || 0) + (pageData.metadata.total_successful_requests || 0);
+          aggregatedMetadata.total_failed_requests = (aggregatedMetadata.total_failed_requests || 0) + (pageData.metadata.total_failed_requests || 0);
+          aggregatedMetadata.total_tokens = (aggregatedMetadata.total_tokens || 0) + (pageData.metadata.total_tokens || 0);
+          aggregatedMetadata.total_prompt_tokens = (aggregatedMetadata.total_prompt_tokens || 0) + (pageData.metadata.total_prompt_tokens || 0);
+          aggregatedMetadata.total_completion_tokens = (aggregatedMetadata.total_completion_tokens || 0) + (pageData.metadata.total_completion_tokens || 0);
+          aggregatedMetadata.total_cache_read_input_tokens = (aggregatedMetadata.total_cache_read_input_tokens || 0) + (pageData.metadata.total_cache_read_input_tokens || 0);
+          aggregatedMetadata.total_cache_creation_input_tokens = (aggregatedMetadata.total_cache_creation_input_tokens || 0) + (pageData.metadata.total_cache_creation_input_tokens || 0);
         }
       }
 
@@ -659,40 +659,32 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
                           </Card>
                         </Grid>
                         {showTokenBreakdown && (
-                          <div className="flex justify-center gap-4 mt-4">
-                            <div className="flex-1 max-w-[20%]">
-                              <Card>
-                                <Title>Input Tokens</Title>
-                                <Text className="text-2xl font-bold mt-2 text-blue-600">
-                                  {userSpendData.metadata?.total_prompt_tokens?.toLocaleString() || 0}
-                                </Text>
-                              </Card>
-                            </div>
-                            <div className="flex-1 max-w-[20%]">
-                              <Card>
-                                <Title>Output Tokens</Title>
-                                <Text className="text-2xl font-bold mt-2 text-cyan-600">
-                                  {userSpendData.metadata?.total_completion_tokens?.toLocaleString() || 0}
-                                </Text>
-                              </Card>
-                            </div>
-                            <div className="flex-1 max-w-[20%]">
-                              <Card>
-                                <Title>Cache Read Tokens</Title>
-                                <Text className="text-2xl font-bold mt-2 text-green-600">
-                                  {userSpendData.metadata?.total_cache_read_input_tokens?.toLocaleString() || 0}
-                                </Text>
-                              </Card>
-                            </div>
-                            <div className="flex-1 max-w-[20%]">
-                              <Card>
-                                <Title>Cache Write Tokens</Title>
-                                <Text className="text-2xl font-bold mt-2 text-purple-600">
-                                  {userSpendData.metadata?.total_cache_creation_input_tokens?.toLocaleString() || 0}
-                                </Text>
-                              </Card>
-                            </div>
-                          </div>
+                          <Grid numItems={4} className="gap-4 mt-4">
+                            <Card>
+                              <Title>Input Tokens</Title>
+                              <Text className="text-2xl font-bold mt-2 text-blue-600">
+                                {userSpendData.metadata?.total_prompt_tokens?.toLocaleString() || 0}
+                              </Text>
+                            </Card>
+                            <Card>
+                              <Title>Output Tokens</Title>
+                              <Text className="text-2xl font-bold mt-2 text-cyan-600">
+                                {userSpendData.metadata?.total_completion_tokens?.toLocaleString() || 0}
+                              </Text>
+                            </Card>
+                            <Card>
+                              <Title>Cache Read Tokens</Title>
+                              <Text className="text-2xl font-bold mt-2 text-green-600">
+                                {userSpendData.metadata?.total_cache_read_input_tokens?.toLocaleString() || 0}
+                              </Text>
+                            </Card>
+                            <Card>
+                              <Title>Cache Write Tokens</Title>
+                              <Text className="text-2xl font-bold mt-2 text-purple-600">
+                                {userSpendData.metadata?.total_cache_creation_input_tokens?.toLocaleString() || 0}
+                              </Text>
+                            </Card>
+                          </Grid>
                         )}
                       </Card>
                     </Col>