diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx
index 54376410a..6e298a76e 100644
--- a/ui/litellm-dashboard/src/components/usage.tsx
+++ b/ui/litellm-dashboard/src/components/usage.tsx
@@ -153,6 +153,19 @@ const UsagePage: React.FC<UsagePageProps> = ({
     console.log("End user data updated successfully", newTopUserData);
     setTopUsers(newTopUserData);
   
+  }
+
+  const updateTagSpendData = async (startTime:  Date | undefined, endTime:  Date | undefined) => {
+    if (!startTime || !endTime || !accessToken) {
+      return;
+    }
+
+    let top_tags = await tagsSpendLogsCall(accessToken, startTime.toISOString(), endTime.toISOString());
+    setTopTagsData(top_tags.top_10_tags);
+    console.log("Tag spend data updated successfully");
+
+
+
   }
 
   function formatDate(date: Date) {
@@ -218,7 +231,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
             setTotalSpendPerTeam(total_spend_per_team);
 
             //get top tags
-            const top_tags = await tagsSpendLogsCall(accessToken);
+            const top_tags = await tagsSpendLogsCall(accessToken, dateValue.from?.toISOString(), dateValue.to?.toISOString());
             setTopTagsData(top_tags.top_10_tags);
 
             // get spend per end-user
@@ -459,6 +472,15 @@ const UsagePage: React.FC<UsagePageProps> = ({
             <TabPanel>
             <Grid numItems={2} className="gap-2 h-[75vh] w-full mb-4">
             <Col numColSpan={2}>
+            <DateRangePicker 
+                  className="mb-4"
+                  enableSelect={true} 
+                  value={dateValue} 
+                  onValueChange={(value) => {
+                    setDateValue(value);
+                    updateTagSpendData(value.from, value.to); // Call updateModelMetrics with the new date range
+                  }}
+              />
 
               <Card>
               <Title>Spend Per Tag - Last 30 Days</Title>