diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/cost_results.tsx b/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/cost_results.tsx
index 4f5fa2a0fa1..03d5ca0e518 100644
--- a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/cost_results.tsx
+++ b/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/cost_results.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useRef, useEffect } from "react";
-import { Text, Button } from "@tremor/react";
+import React from "react";
+import { Text } from "@tremor/react";
 import { Card, Statistic, Row, Col, Divider, Spin } from "antd";
-import { DollarOutlined, LoadingOutlined, DownloadOutlined, FilePdfOutlined, FileExcelOutlined } from "@ant-design/icons";
+import { DollarOutlined, LoadingOutlined } from "@ant-design/icons";
 import { CostEstimateResponse } from "../types";
 import { formatNumberWithCommas } from "@/utils/dataUtils";
-import { exportToPDF, exportToCSV } from "./export_utils";
+import ExportDropdown from "./export_dropdown";
 
 interface CostResultsProps {
   result: CostEstimateResponse | null;
@@ -24,65 +24,6 @@ const formatRequests = (value: number | null | undefined): string => {
   return formatNumberWithCommas(value, 0, true);
 };
 
-const ExportDropdown: React.FC<{ result: CostEstimateResponse }> = ({ result }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-
-  return (
-    <div className="relative inline-block" ref={menuRef}>
-      <Button
-        size="xs"
-        variant="secondary"
-        icon={DownloadOutlined}
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        Export
-      </Button>
-
-      {isOpen && (
-        <div className="absolute right-0 mt-1 w-44 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
-          <button
-            className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
-            onClick={() => {
-              exportToPDF(result);
-              setIsOpen(false);
-            }}
-          >
-            <FilePdfOutlined className="mr-3 text-red-500" />
-            Export as PDF
-          </button>
-          <button
-            className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
-            onClick={() => {
-              exportToCSV(result);
-              setIsOpen(false);
-            }}
-          >
-            <FileExcelOutlined className="mr-3 text-green-600" />
-            Export as CSV
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
-
 const CostResults: React.FC<CostResultsProps> = ({ result, loading }) => {
   if (!result && !loading) {
     return (
diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/export_dropdown.tsx b/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/export_dropdown.tsx
new file mode 100644
index 00000000000..e8a681021d6
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/export_dropdown.tsx
@@ -0,0 +1,71 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Button } from "@tremor/react";
+import { DownloadOutlined, FilePdfOutlined, FileExcelOutlined } from "@ant-design/icons";
+import { CostEstimateResponse } from "../types";
+import { exportToPDF, exportToCSV } from "./export_utils";
+
+interface ExportDropdownProps {
+  result: CostEstimateResponse;
+}
+
+const ExportDropdown: React.FC<ExportDropdownProps> = ({ result }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <div className="relative inline-block" ref={menuRef}>
+      <Button
+        size="xs"
+        variant="secondary"
+        icon={DownloadOutlined}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        Export
+      </Button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-1 w-44 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
+          <button
+            className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+            onClick={() => {
+              exportToPDF(result);
+              setIsOpen(false);
+            }}
+          >
+            <FilePdfOutlined className="mr-3 text-red-500" />
+            Export as PDF
+          </button>
+          <button
+            className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+            onClick={() => {
+              exportToCSV(result);
+              setIsOpen(false);
+            }}
+          >
+            <FileExcelOutlined className="mr-3 text-green-600" />
+            Export as CSV
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ExportDropdown;
+