diff --git a/src/pages/ClusterDetail.tsx b/src/pages/ClusterDetail.tsx
index 6ae6f6a..60d2292 100644
--- a/src/pages/ClusterDetail.tsx
+++ b/src/pages/ClusterDetail.tsx
@@ -11,12 +11,12 @@ import {
   Shield, 
   Users,
   TrendingUp,
-  AlertTriangle,
   CheckCircle,
   Clock,
   Server,
   Zap
 } from 'lucide-react'
+import { useEffect, useState } from 'react'
 
 interface Cluster {
   id: string
@@ -26,39 +26,43 @@ interface Cluster {
   version: string
   alerts: string
   endpoint: string
+  health: health
+}
+interface health {
+  NodesHealthy : number,
+	NodesTotal    : number,
+	PodsRunning   : number,
+	PodsTotal     : number,
+	Alerts        : number,
+	Warnings      : number,
+	Status       :string
 }
 
-function getCluster(id: string): Cluster | null {
-  const raw = localStorage.getItem('clusters')
-  const list: Cluster[] = raw ? JSON.parse(raw) : []
-  console.log('Looking for cluster with ID:', id)
-  console.log('Available clusters:', list)
-  return list.find((c) => c.id === id) || null
-}
+async function getCluster(id: string): Promise<Cluster | null> {
+  try {
+    const res = await fetch("http://localhost:8082/cluster_stats?cluster_name=" + id, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `${localStorage.getItem('auth:token') || ''}`
+      }
+    });
 
-function getAllClusters(): Cluster[] {
-  const raw = localStorage.getItem('clusters')
-  return raw ? JSON.parse(raw) : []
-}
-
-function createTestCluster() {
-  const testCluster: Cluster = {
-    id: 'test-cluster-1',
-    name: 'test-cluster',
-    clusterId: 'test123',
-    status: 'Healthy',
-    version: 'v1.28.0',
-    alerts: '0',
-    endpoint: 'https://test-cluster.example.com'
+    if (res.ok) {
+      const data = await res.json();
+      console.log('Cluster data:', data);
+      return data; // Return the cluster data
+    } else {
+      console.error("Error fetching cluster data");
+      return null;
+    }
+  } catch (e) {
+    console.error("Error fetching cluster:", e);
+    return null;
   }
-  
-  const existingClusters = getAllClusters()
-  const updatedClusters = [...existingClusters, testCluster]
-  localStorage.setItem('clusters', JSON.stringify(updatedClusters))
-  console.log('Created test cluster:', testCluster)
-  window.location.reload()
 }
 
+
 const resourceTypes = [
   { name: 'Namespaces', icon: Box, count: 4, color: 'bg-blue-500' },
   { name: 'Nodes', icon: Cpu, count: 3, color: 'bg-green-500' },
@@ -102,48 +106,28 @@ const clusterStats = {
 }
 
 export default function ClusterDetail() {
-  const params = useParams<{ id: string }>()
-  const cluster = params.id ? getCluster(params.id) : null
-  const allClusters = getAllClusters()
+    const [cluster, setCluster] = useState<Cluster | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const params = useParams<{ id: string }>();
+
+  useEffect(() => {
+    const fetchCluster = async () => {
+      if (params.id) {
+        const fetchedCluster = await getCluster(params.id);
+        setCluster(fetchedCluster);
+        setLoading(false);
+      }
+    };
+    fetchCluster();
+  }, [params.id]);
+  
+    // Add a loading state check
+  if (loading) {
+    return <div>Loading...</div>; // You can customize the loading screen as needed
+  }
 
   if (!cluster) {
-    return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <div className="text-center">
-          <div className="text-lg font-medium text-gray-900 mb-2">Cluster not found</div>
-          <div className="text-sm text-gray-600 mb-4">The requested cluster could not be located.</div>
-          <div className="text-xs text-gray-500 mb-4">Debug: Looking for ID: {params.id}</div>
-          
-          {/* Debug Information */}
-          <div className="bg-gray-50 p-4 rounded-lg mb-4 text-left">
-            <div className="text-sm font-medium text-gray-700 mb-2">Available Clusters:</div>
-            {allClusters.length === 0 ? (
-              <div className="text-sm text-gray-600">No clusters found in localStorage</div>
-            ) : (
-              <div className="space-y-1">
-                {allClusters.map((c) => (
-                  <div key={c.id} className="text-sm text-gray-600">
-                    ID: {c.id} | Name: {c.name} | ClusterID: {c.clusterId}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-          
-          <div className="space-x-2">
-            <button 
-              onClick={createTestCluster}
-              className="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm"
-            >
-              Create Test Cluster
-            </button>
-            <Link to="/app/create-cluster" className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm">
-              Back to clusters
-            </Link>
-          </div>
-        </div>
-      </div>
-    )
+    return <div>Error: Cluster not found.</div>;
   }
 
   return (
@@ -151,9 +135,9 @@ export default function ClusterDetail() {
       {/* Header */}
       <div className="flex items-center justify-between w-full">
         <div>
-          <h1 className="text-3xl font-bold text-gray-900">{cluster.name}</h1>
+          <h1 className="text-3xl font-bold text-gray-900">{params.id}</h1>
           <div className="flex items-center gap-4 mt-1 text-sm text-gray-600">
-            <span>Cluster ID: {cluster.clusterId}</span>
+            <span>Cluster ID: {params.id}</span>
             <span>•</span>
             <span>Status: {cluster.status}</span>
             <span>•</span>
@@ -188,7 +172,7 @@ export default function ClusterDetail() {
             <div>
               <div className="flex justify-between text-sm mb-1">
                 <span className="text-gray-600">CPU</span>
-                <span className="font-medium">{clusterStats.resourceUsage.cpu.used}/{clusterStats.resourceUsage.cpu.total} {clusterStats.resourceUsage.cpu.unit}</span>
+                <span className="font-medium">{cluster.resourceUsage.cpu.used}/{clusterStats.resourceUsage.cpu.total} {clusterStats.resourceUsage.cpu.unit}</span>
               </div>
               <div className="w-full bg-gray-200 rounded-full h-2">
                 <div className="bg-blue-600 h-2 rounded-full" style={{ width: `${(clusterStats.resourceUsage.cpu.used / clusterStats.resourceUsage.cpu.total) * 100}%` }}></div>