diff --git a/ell-studio/src/components/invocations/InvocationsAnalyticsSidePanel.js b/ell-studio/src/components/invocations/InvocationsAnalyticsSidePanel.js
index 377871e4..076db775 100644
--- a/ell-studio/src/components/invocations/InvocationsAnalyticsSidePanel.js
+++ b/ell-studio/src/components/invocations/InvocationsAnalyticsSidePanel.js
@@ -1,25 +1,21 @@
 import React from 'react';
+import { FiZap, FiClock, FiHash, FiUsers, FiPercent, FiBox } from 'react-icons/fi';
 import SidePanel from '../common/SidePanel';
 import StatItem from '../common/StatItem';
 import MetricCard from '../common/MetricCard';
-import { FiZap, FiClock, FiHash, FiUsers, FiPercent, FiBox } from 'react-icons/fi';
 
 const InvocationsAnalyticsSidePanel = ({ aggregateData, sidebarMetrics }) => {
-  if (!aggregateData) return null;
-
-  const statsData = [
-    { icon: FiZap, label: "Total Invocations", value: aggregateData.total_invocations },
-    { icon: FiClock, label: "Avg Latency", value: `${aggregateData.avg_latency.toFixed(2)}ms` },
-    { icon: FiHash, label: "Total Tokens", value: aggregateData.total_tokens },
-    { icon: FiUsers, label: "Unique LMPs", value: aggregateData.unique_lmps },
-  ];
+  if (!aggregateData || !sidebarMetrics) return null;
 
   return (
     <SidePanel title="Invocations Analytics">
-      <div className="bg-[#21242c] p-3 rounded-md shadow-sm mb-4">
-        {statsData.map((stat, index) => (
-          <StatItem key={index} icon={stat.icon} label={stat.label} value={stat.value} />
-        ))}
+      <div className="bg-card p-3 rounded-md shadow-sm mb-4">
+        <StatItem icon={FiZap} label="Total Invocations" value={sidebarMetrics.totalInvocations} />
+        <StatItem icon={FiClock} label="Avg. Latency" value={`${sidebarMetrics.avgLatency.toFixed(2)}ms`} />
+        <StatItem icon={FiHash} label="Total Tokens" value={sidebarMetrics.totalTokens} />
+        <StatItem icon={FiUsers} label="Unique LMPs" value={sidebarMetrics.uniqueLMPs} />
+        <StatItem icon={FiPercent} label="Success Rate" value={`${sidebarMetrics.successRate.toFixed(2)}%`} />
+        <StatItem icon={FiBox} label="Avg Tokens per Invocation" value={(sidebarMetrics.totalTokens / sidebarMetrics.totalInvocations).toFixed(2)} />
       </div>
 
       <MetricCard
@@ -48,26 +44,20 @@ const InvocationsAnalyticsSidePanel = ({ aggregateData, sidebarMetrics }) => {
         yAxisLabel="Tokens"
       />
 
-      <div className="bg-[#21242c] p-3 rounded-md shadow-sm mt-4">
-        <h3 className="text-sm font-medium text-gray-300 mb-2">Top 5 LMPs</h3>
+      <div className="bg-card p-3 rounded-md shadow-sm mt-4">
+        <h3 className="text-sm font-medium text-card-foreground mb-2">Top 5 LMPs</h3>
         <ul className="space-y-1">
           {sidebarMetrics.topLMPs.map(([lmp, count], index) => (
             <li key={lmp} className="flex justify-between items-center text-xs">
-              <span className="text-gray-400">
-                <span className="text-blue-400 mr-1">{index + 1}.</span>
+              <span className="text-muted-foreground">
+                <span className="text-primary mr-1">{index + 1}.</span>
                 {lmp}
               </span>
-              <span className="text-gray-500">{count} invocations</span>
+              <span className="text-muted-foreground">{count} invocations</span>
             </li>
           ))}
         </ul>
       </div>
-
-      <div className="bg-[#21242c] p-3 rounded-md shadow-sm mt-4">
-        <h3 className="text-sm font-medium text-gray-300 mb-2">Additional Metrics</h3>
-        <StatItem icon={FiPercent} label="Success Rate" value={`${aggregateData.success_rate?.toFixed(2)}%`} />
-        <StatItem icon={FiBox} label="Avg Tokens per Invocation" value={(aggregateData.total_tokens / aggregateData.total_invocations).toFixed(2)} />
-      </div>
     </SidePanel>
   );
 };