diff --git a/ui/litellm-dashboard/src/components/top_key_view.tsx b/ui/litellm-dashboard/src/components/top_key_view.tsx
new file mode 100644
index 00000000000..97a0c8ead6f
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/top_key_view.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import { BarChart } from "@tremor/react";
+import KeyInfoView from "./key_info_view";
+import { keyInfoCall } from "./networking";
+
+interface TopKeyViewProps {
+  topKeys: any[];
+  accessToken: string | null;
+  userID: string | null;
+  userRole: string | null;
+  teams: any[] | null;
+}
+
+const TopKeyView: React.FC<TopKeyViewProps> = ({ 
+  topKeys, 
+  accessToken, 
+  userID, 
+  userRole,
+  teams
+}) => {
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const [keyData, setKeyData] = useState<any | undefined>(undefined);
+
+  const handleKeyClick = async (item: any) => {
+    if (!accessToken || !item.key) return;
+    
+    try {
+      // Get the full key data using the API key
+      const keyInfo = await keyInfoCall(accessToken, [item.key]);
+      if (keyInfo && keyInfo.keys && keyInfo.keys.length > 0) {
+        setKeyData(keyInfo.keys[0]);
+        setSelectedKey(item.key);
+      }
+    } catch (error) {
+      console.error("Error fetching key info:", error);
+    }
+  };
+
+  const handleClose = () => {
+    setSelectedKey(null);
+    setKeyData(undefined);
+  };
+
+  if (selectedKey && keyData) {
+    return (
+      <KeyInfoView
+        keyId={selectedKey}
+        onClose={handleClose}
+        keyData={keyData}
+        accessToken={accessToken}
+        userID={userID}
+        userRole={userRole}
+        teams={teams}
+      />
+    );
+  }
+
+  return (
+    <BarChart
+      className="mt-4 h-40 cursor-pointer"
+      data={topKeys}
+      index="key"
+      categories={["spend"]}
+      colors={["cyan"]}
+      yAxisWidth={80}
+      tickGap={5}
+      layout="vertical"
+      showXAxis={false}
+      showLegend={false}
+      valueFormatter={(value) => `$${value.toFixed(2)}`}
+      onValueChange={(item) => handleKeyClick(item)}
+    />
+  );
+};
+
+export default TopKeyView;
diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx
index 053f69c256f..d95f8bd9e16 100644
--- a/ui/litellm-dashboard/src/components/usage.tsx
+++ b/ui/litellm-dashboard/src/components/usage.tsx
@@ -39,6 +39,7 @@ import {
   getProxyUISettings
 } from "./networking";
 import { start } from "repl";
+import TopKeyView from "./top_key_view";
 console.log("process.env.NODE_ENV", process.env.NODE_ENV);
 const isLocal = process.env.NODE_ENV === "development";
 const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
@@ -656,18 +657,11 @@ const UsagePage: React.FC<UsagePageProps> = ({
               <Col numColSpan={1}>
                 <Card>
                   <Title>Top API Keys</Title>
-                  <BarChart
-                    className="mt-4 h-40"
-                    data={topKeys}
-                    index="key"
-                    categories={["spend"]}
-                    colors={["cyan"]}
-                    yAxisWidth={80}
-                    tickGap={5}
-                    layout="vertical"
-                    showXAxis={false}
-                    showLegend={false}
-                    valueFormatter={(value) => `$${value.toFixed(2)}`}
+                  <TopKeyView
+                    topKeys={topKeys}
+                    accessToken={accessToken}
+                    userID={userID}
+                    userRole={userRole}
                   />
                 </Card>
               </Col>