From af7609d856d51fe589b3f57764636185bab39d67 Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <rcrabbe@berkeley.edu>
Date: Mon, 9 Mar 2026 14:06:53 -0700
Subject: [PATCH] fix: putting new cards in the same place as the current ones,
 fixing spacing

---
 .../UsagePage/components/UsagePageView.tsx    | 72 ++++++++++---------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
index 60d10bde082..1de28e3de37 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
@@ -630,12 +630,6 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
                               {userSpendData.metadata?.total_failed_requests?.toLocaleString() || 0}
                             </Text>
                           </Card>
-                          <Card>
-                            <Title>Total Tokens</Title>
-                            <Text className="text-2xl font-bold mt-2">
-                              {userSpendData.metadata?.total_tokens?.toLocaleString() || 0}
-                            </Text>
-                          </Card>
                           <Card>
                             <Title>Average Cost per Request</Title>
                             <Text className="text-2xl font-bold mt-2">
@@ -646,39 +640,47 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
                               )}
                             </Text>
                           </Card>
-                        </Grid>
-                      </Card>
-                    </Col>
-
-                    <Col numColSpan={2}>
-                      <Card>
-                        <Title>Token Breakdown</Title>
-                        <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}
+                            <Title>Total Tokens</Title>
+                            <Text className="text-2xl font-bold mt-2">
+                              {userSpendData.metadata?.total_tokens?.toLocaleString() || 0}
                             </Text>
                           </Card>
                         </Grid>
+                        <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>
                       </Card>
                     </Col>