diff --git a/app/(admin)/adminDashboard/page.tsx b/app/(admin)/adminDashboard/page.tsx
index 244aa57..fad03ac 100644
--- a/app/(admin)/adminDashboard/page.tsx
+++ b/app/(admin)/adminDashboard/page.tsx
@@ -184,7 +184,7 @@ const AdminDashboard = () => {
           </div>
 
           <div>
-            <KPI_Table siteData={currentSiteDetails} />
+            <KPI_Table siteId={siteIdMap[selectedSite]} month="2025-07" />
           </div>
         </div>
 
@@ -199,9 +199,6 @@ const AdminDashboard = () => {
         </div>
 
         <div className="flex flex-col md:flex-row gap-4 justify-center">
-          <button onClick={handleCSVExport} className="text-sm lg:text-lg btn-primary">
-            Export Raw Data to CSV
-          </button>
           <button onClick={handlePDFExport} className="text-sm lg:text-lg btn-primary">
             Export Chart Images to PDF
           </button>
diff --git a/components/dashboards/KPIStatus.tsx b/components/dashboards/KPIStatus.tsx
index 13cb83e..dd9dea2 100644
--- a/components/dashboards/KPIStatus.tsx
+++ b/components/dashboards/KPIStatus.tsx
@@ -1,82 +1,99 @@
-// components/KPI_Table.tsx
-import React from 'react';
-import { SiteDetails } from '@/types/SiteData'; // Adjust import path as necessary
+import React, { useEffect, useState } from 'react';
 
 interface KPI_TableProps {
-    siteData: SiteDetails | null; // Pass the selected site's data as a prop
+  siteId: string;
+  month: string; // format: "YYYY-MM"
 }
 
-const KPI_Table: React.FC<KPI_TableProps> = ({ siteData }) => {
+interface MonthlyKPI {
+  site: string;
+  month: string;
+  yield_kwh: number | null;
+  consumption_kwh: number | null;
+  grid_draw_kwh: number | null;
+  efficiency: number | null;
+}
 
-    if (!siteData) {
-        return (
-            <div>
-                <h2 className="text-lg font-bold mb-2">Monthly KPI</h2>
-                <p className="text-white/70">Select a site to view KPIs.</p>
-                <div className="min-h-[275px] w-full flex items-center justify-center border">
-                    <p>No data available</p>
-                </div>
-            </div>
-        );
-    }
+const KPI_Table: React.FC<KPI_TableProps> = ({ siteId, month }) => {
+  const [kpiData, setKpiData] = useState<MonthlyKPI | null>(null);
+  const [loading, setLoading] = useState(false);
 
-    // --- KPI Calculations ---
-    const monthlyYield = siteData.generationData.reduce((sum, daily) => sum + daily, 0);
-    const monthlyConsumption = siteData.consumptionData.reduce((sum, daily) => sum + daily, 0);
+  useEffect(() => {
+    const fetchKPI = async () => {
+      setLoading(true);
+      try {
+        const res = await fetch(`http://localhost:8000/kpi/monthly?site=${siteId}&month=${month}`);
+        const data = await res.json();
+        setKpiData(data);
+      } catch (err) {
+        console.error('Failed to fetch KPI:', err);
+        setKpiData(null); // fallback
+      } finally {
+        setLoading(false);
+      }
+    };
 
-    // Calculate Grid Draw/Export
-    let monthlyGridDraw = 0;
-    let monthlySolarExport = 0;
-
-    // A simplistic model for grid draw/export:
-    // If generation > consumption, excess is exported.
-    // If consumption > generation, deficit is drawn from grid.
-    // Note: This is highly simplified. Real-world calculations involve time-of-use, battery storage, etc.
-    const netEnergy = monthlyYield - monthlyConsumption;
-    if (netEnergy > 0) {
-        monthlySolarExport = netEnergy;
-    } else {
-        monthlyGridDraw = Math.abs(netEnergy);
-    }
-    
-    const selfConsumption = Math.min(monthlyYield, monthlyConsumption);
-    const savingsFromSelfConsumption = selfConsumption * siteData.gridImportPrice_RM_per_kWh;
-    const revenueFromExport = monthlySolarExport * siteData.solarExportTariff_RM_per_kWh;
-    const monthlySaved = savingsFromSelfConsumption + revenueFromExport;
-    const efficiency = siteData.theoreticalMaxGeneration_kWh && siteData.theoreticalMaxGeneration_kWh > 0
-        ? (monthlyYield / siteData.theoreticalMaxGeneration_kWh) * 100
-        : 0; // Default to 0 or 'N/A' if theoretical max is not set or zero
-
-    const data = [
-        { kpi: 'Monthly Yield', value: `${monthlyYield.toFixed(0)} kWh` },
-        { kpi: 'Monthly Consumption', value: `${monthlyConsumption.toFixed(0)} kWh` },
-        { kpi: 'Monthly Grid Draw', value: `${monthlyGridDraw.toFixed(0)} kWh` },
-        // { kpi: 'Monthly Solar Export', value: `${monthlySolarExport.toFixed(0)} kWh` }, // Can add this if desired
-        { kpi: 'Efficiency', value: `${efficiency.toFixed(1)}%` },
-        { kpi: 'Monthly Saved', value: `RM ${monthlySaved.toFixed(2)}` },
-    ];
+    if (siteId && month) fetchKPI();
+  }, [siteId, month]);
 
+  if (!siteId) {
     return (
-        <div>
-            <h2 className="text-lg font-bold mb-2">Monthly KPI</h2>
-            <table className="min-h-[275px] w-full border-collapse border border-gray-700 text-black bg-white">
-                <thead>
-                    <tr className="bg-gray-800">
-                        <th className="border border-gray-700 p-3 text-left">KPI</th>
-                        <th className="border border-gray-700 p-3 text-left">Value</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {data.map((row) => (
-                        <tr key={row.kpi} className="">
-                            <td className="border border-gray-700 p-3">{row.kpi}</td>
-                            <td className="border border-gray-700 p-3">{row.value}</td>
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
+      <div>
+        <h2 className="text-lg font-bold mb-2">Monthly KPI</h2>
+        <div className="min-h-[275px] w-full flex items-center justify-center border">
+          <p>No site selected</p>
         </div>
+      </div>
     );
+  }
+
+  if (loading) {
+    return (
+      <div>
+        <h2 className="text-lg font-bold mb-2">Monthly KPI</h2>
+        <div className="min-h-[275px] w-full flex items-center justify-center border">
+          <p>Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Use optional chaining and nullish coalescing to safely default values to 0
+  const yield_kwh = kpiData?.yield_kwh ?? 0;
+  const consumption_kwh = kpiData?.consumption_kwh ?? 0;
+  const grid_draw_kwh = kpiData?.grid_draw_kwh ?? 0;
+  const efficiency = kpiData?.efficiency ?? 0;
+
+  const data = [
+    { kpi: 'Monthly Yield', value: `${yield_kwh.toFixed(0)} kWh` },
+    { kpi: 'Monthly Consumption', value: `${consumption_kwh.toFixed(0)} kWh` },
+    { kpi: 'Monthly Grid Draw', value: `${grid_draw_kwh.toFixed(0)} kWh` },
+    { kpi: 'Efficiency', value: `${efficiency.toFixed(1)}%` },
+  ];
+
+  return (
+    <div>
+      <h2 className="text-lg font-bold mb-2">Monthly KPI</h2>
+      <table className="min-h-[275px] w-full border-collapse border border-gray-700 text-black bg-white">
+        <thead>
+          <tr className="bg-gray-800 text-black">
+            <th className="border border-gray-700 p-3 text-left">KPI</th>
+            <th className="border border-gray-700 p-3 text-left">Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row) => (
+            <tr key={row.kpi}>
+              <td className="border border-gray-700 p-3">{row.kpi}</td>
+              <td className="border border-gray-700 p-3">{row.value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
 };
 
 export default KPI_Table;
+
+