diff --git a/public/components/kubernetes/common/gourp_dashboards.tsx b/public/components/kubernetes/common/gourp_dashboards.tsx
index 3956dd574..7cafa2ab8 100644
--- a/public/components/kubernetes/common/gourp_dashboards.tsx
+++ b/public/components/kubernetes/common/gourp_dashboards.tsx
@@ -67,11 +67,12 @@ const layouts = {
     // Additional information panels
     { i: 'runningPodsCategory', x: 7, y: 0, w: 2, h: 2 },
     { i: 'cpuCoreCount', x: 5, y: 3, w: 1, h: 1 },
+    { i: 'diskIO', x: 7, y: 2, w: 2, h: 2 },
     { i: 'totalNetworkTraffic', x: 3, y: 3, w: 5, h: 2 },
 
     // Visualization row with detailed charts
     // { i: 'networkTraffic', x: 0, y: 5, w: 4, h: 3 },
-    // { i: 'diskIO', x: 4, y: 5, w: 4, h: 3 },
+    // { i: 'diskIO', x: 7, y: 2, w: 2, h: 2 },
 
     // Namespace-based CPU and memory usage panels
     { i: 'cpuUsageByNamespace', x: 0, y: 8, w: 4, h: 3 },
@@ -94,7 +95,7 @@ const layouts = {
     { i: 'runningPodsCategory', x: 0, y: 3, w: 3, h: 2 },
     { i: 'totalNetworkTraffic', x: 3, y: 3, w: 5, h: 2 },
     { i: 'networkTraffic', x: 0, y: 5, w: 4, h: 3 },
-    { i: 'diskIO', x: 4, y: 5, w: 4, h: 3 },
+    { i: 'diskIO', x: 7, y: 2, w: 2, h: 2 },
     { i: 'cpuUsageByNamespace', x: 0, y: 8, w: 4, h: 3 },
     { i: 'memoryUsageByNamespace', x: 4, y: 8, w: 4, h: 3 },
     { i: 'podNetworkUtilization', x: 0, y: 11, w: 4, h: 3 },
@@ -113,7 +114,7 @@ const layouts = {
     { i: 'runningPodsCategory', x: 2, y: 6, w: 2, h: 2 },
     { i: 'totalNetworkTraffic', x: 0, y: 7, w: 4, h: 3 },
     { i: 'networkTraffic', x: 0, y: 10, w: 4, h: 3 },
-    { i: 'diskIO', x: 0, y: 13, w: 4, h: 3 },
+    { i: 'diskIO', x: 7, y: 2, w: 2, h: 2 },
     { i: 'cpuUsageByNamespace', x: 0, y: 16, w: 4, h: 3 },
     { i: 'memoryUsageByNamespace', x: 0, y: 19, w: 4, h: 3 },
     { i: 'podNetworkUtilization', x: 0, y: 22, w: 4, h: 3 },
@@ -130,7 +131,6 @@ export const GroupDashboards = ({
   const [metricsData, setMetricsData] = React.useState<any[]>([]);
 
   useEffect(() => {
-    console.log('reredner on date change.....');
     const metrics = prometheusQueries.map((query) => {
       return pplService.fetch({ query: query.query, format: 'viz' });
     });
@@ -149,28 +149,31 @@ export const GroupDashboards = ({
     xKeys: string[],
     yKeys: string[],
     gKeys: string[],
-    traceConfig: {}
+    vis: {}
   ) => {
+    const traceConfig = vis.config;
     if (traceConfig.type === 'pie') {
       return [
         {
-          labels: data.data[xKeys[0]],
-          values: data.data[yKeys[0]],
+          // labels: data,
+          // values: data.data[yKeys[0]],
+          labels: vis.labels,
+          values: vis.values,
           ...traceConfig,
         },
       ];
     } else if (traceConfig.type === 'indicator') {
       return [
         {
-          value: data?.data[yKeys[0]][0] || 0,
+          value: vis.value ? vis.value : data?.data[yKeys[0]][0],
           ...traceConfig,
         },
       ];
     } else if (gKeys.length === 0) {
       return [
         {
-          x: data.data[xKeys[0]],
-          y: data.data[yKeys[0]],
+          x: vis.x ? vis.x : data.data[xKeys[0]],
+          y: vis.y ? vis.y : data.data[yKeys[0]],
           ...traceConfig,
         },
       ];
@@ -213,16 +216,9 @@ export const GroupDashboards = ({
         visXaxisKeys,
         visYaxisKeys,
         visGroupingKeys,
-        prometheusQueries[index].vis.config
+        prometheusQueries[index].vis
       );
 
-      // metric
-      // jdbc
-      // metric.datarows.forEach((row) => {
-      //   xaxisData.push(row[0]);
-      //   yaxisData.push(row[1]);
-      //   // row[0] = new Date(row[0]).toISOString();
-      // });
       return (
         <div key={prometheusQueries[index].title + index} data-grid={layouts.lg[index]}>
           <EuiPanel paddingSize="m">
@@ -230,13 +226,6 @@ export const GroupDashboards = ({
               <h4>{prometheusQueries[index].title}</h4>
             </EuiText>
             <Plt
-              // data={[
-              //   {
-              //     x: xaxisData,
-              //     y: yaxisData,
-              //     type: prometheusQueries[index].vis?.type || 'scatter',
-              //   },
-              // ]}
               data={visualizationData}
               layout={{
                 // width: 200, // Set custom width
@@ -246,9 +235,6 @@ export const GroupDashboards = ({
                 showlegend: true,
                 ...(prometheusQueries[index].vis.layout || {}),
                 xaxis: {
-                  // title: {
-                  //   text: prometheusQueries[index].vis.x || metric.schema[0]?.name || '',
-                  // },
                   showgrid: true,
                   zeroline: false,
                   rangemode: 'normal',
@@ -262,31 +248,9 @@ export const GroupDashboards = ({
                   zeroline: false,
                   rangemode: 'normal',
                 },
-                colorway: PLOTLY_COLOR
+                colorway: PLOTLY_COLOR,
               }}
-              // config={prometheusQueries[index].vis.component.config}
             />
-            {/* <Visualization
-            visualizations={{
-              data: {
-                userConfigs: {
-                  dataConfig: {
-                    span: {},
-                    [GROUPBY]: metric.schema[1]?.name,
-                    [AGGREGATIONS]: metric.schema[0]?.name,
-                    queryMetaData: {},
-                    metricType: '',
-                  },
-                },
-                explorer: {
-                  explorerData: { schema: metric.schema, jsonData: metric.jsonData },
-                },
-              },
-              vis: {
-                component: prometheusQueries[index].vis.component,
-              },
-            }}
-          /> */}
           </EuiPanel>
           <EuiSpacer size="m" />
         </div>
diff --git a/public/components/kubernetes/configurations/configurations.tsx b/public/components/kubernetes/configurations/configurations.tsx
index 0ef9295c6..cbd042060 100644
--- a/public/components/kubernetes/configurations/configurations.tsx
+++ b/public/components/kubernetes/configurations/configurations.tsx
@@ -35,6 +35,26 @@ export const KubernetesConfiguration = () => {
   const [osUsername, setOsUsername] = useState('');
   const [osPassword, setOsPassword] = useState('');
   const [toasts, setToasts] = useState([]);
+  const [selectedDatasource, setSelectedDatasource] = useState(''); // For tracking the selected datasource
+
+  // Sample list of available OpenSearch datasources
+  const availableDatasources = [
+    { value: '', text: 'Select an OpenSearch Datasource' },
+    { value: 'localcluster', text: 'localcluster' },
+  ];
+
+  const handleDatasourceChange = (e) => {
+    const value = e.target.value;
+    setSelectedDatasource(value);
+
+    // If "Custom URI" is selected, clear the osUri input field
+    if (value === 'custom') {
+      setOsUri('');
+    } else {
+      // Set osUri to the selected datasource's value
+      setOsUri(value);
+    }
+  };
 
   const addToast = () => {
     const newToast = {
@@ -77,10 +97,12 @@ export const KubernetesConfiguration = () => {
           <EuiText>
             <ul>
               <li>
-                Ensure that you have access to a <strong>Prometheus</strong> instance and a <strong>Kubernetes cluster</strong> for providing Access Key and Secret Key.
+                Ensure that you have access to a <strong>Prometheus</strong> instance and a{' '}
+                <strong>Kubernetes cluster</strong> for providing Access Key and Secret Key.
               </li>
               <li>
-                Have an <strong>OpenSearch compatible domain</strong> as a datasource, or enable a local OpenSearch cluster to create the Prometheus datasource in OpenSearch.
+                Have an <strong>OpenSearch compatible domain</strong> as a datasource, or enable a
+                local OpenSearch cluster to create the Prometheus datasource in OpenSearch.
               </li>
             </ul>
           </EuiText>
@@ -91,7 +113,7 @@ export const KubernetesConfiguration = () => {
         {/* Datasource Selector Section */}
         <EuiPanel paddingSize="m">
           <EuiTitle size="s">
-            <h2>Datasource Selector</h2>
+            <h2>Datasource Configurations</h2>
           </EuiTitle>
           <EuiSpacer size="s" />
           <EuiForm component="form">
@@ -100,12 +122,22 @@ export const KubernetesConfiguration = () => {
               buttonContent="OpenSearch Datasource Configuration"
               paddingSize="m"
             >
-              <EuiFormRow label="OpenSearch URI" helpText="Enter the URI for your OpenSearch instance.">
+              {/* <EuiFormRow label="OpenSearch URI" helpText="Enter the URI for your OpenSearch instance.">
                 <EuiFieldText
                   placeholder="https://localhost:9200"
                   value={osUri}
                   onChange={(e) => setOsUri(e.target.value)}
                 />
+              </EuiFormRow> */}
+              <EuiFormRow
+                label="OpenSearch Datasource"
+                helpText="Select or enter the URI for your OpenSearch instance."
+              >
+                <EuiSelect
+                  options={availableDatasources}
+                  value={selectedDatasource}
+                  onChange={handleDatasourceChange}
+                />
               </EuiFormRow>
               <EuiFormRow label="OpenSearch Username">
                 <EuiFieldText
@@ -138,7 +170,10 @@ export const KubernetesConfiguration = () => {
                   onChange={(e) => setDatasourceName(e.target.value)}
                 />
               </EuiFormRow>
-              <EuiFormRow label="Prometheus URI" helpText="Enter the URI for your Prometheus instance.">
+              <EuiFormRow
+                label="Prometheus URI"
+                helpText="Enter the URI for your Prometheus instance."
+              >
                 <EuiFieldText
                   placeholder="https://prometheus.example.com"
                   value={prometheusUri}
@@ -173,17 +208,17 @@ export const KubernetesConfiguration = () => {
 
         <EuiSpacer size="l" />
 
-        {/* Create Datasource Button */}
-        <EuiButton fill color="primary" onClick={handleCreateDatasource}>
-          Create Prometheus Datasource
-        </EuiButton>
+        {/* Create Datasource Button in Flex Item */}
+        <EuiFlexGroup justifyContent="flexStart">
+          <EuiFlexItem grow={false}>
+            <EuiButton fill color="primary" onClick={handleCreateDatasource}>
+              Create Prometheus Datasource
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
 
         {/* Toast Notifications */}
-        <EuiGlobalToastList
-          toasts={toasts}
-          dismissToast={removeToast}
-          toastLifeTimeMs={6000}
-        />
+        <EuiGlobalToastList toasts={toasts} dismissToast={removeToast} toastLifeTimeMs={6000} />
       </EuiPageBody>
     </EuiPage>
   );
diff --git a/public/components/kubernetes/home.tsx b/public/components/kubernetes/home.tsx
index 79c06ebc3..242ff27e9 100644
--- a/public/components/kubernetes/home.tsx
+++ b/public/components/kubernetes/home.tsx
@@ -140,6 +140,7 @@ export const Home = () => {
             xKeys: [`k8s_node_name`],
             yKeys: ['running_node_count'],
             gKeys: [],
+            value: 2
           },
         },
         {
@@ -167,6 +168,7 @@ export const Home = () => {
             xKeys: [`k8s_node_name`],
             yKeys: ['running_node_count'],
             gKeys: [],
+            value: 10
           },
         },
         {
@@ -194,12 +196,13 @@ export const Home = () => {
             xKeys: [`k8s_node_name`],
             yKeys: ['running_node_count'],
             gKeys: [],
+            value: 40
           },
         },
         {
           cluster: 'eks-cluster-with-vpc',
           name: 'runningPodsCategory',
-          title: 'Failed Pods',
+          title: 'Running Pods',
           query: `source = prometheus_k8s_cluster.kube_pod_status_phase | where @timestamp >= '${start}' and @timestamp <= '${end}' and cluster = 'eks-cluster-with-vpc' | fields service_name | stats count() as node_count by service_name`,
           //query: `source = prometheus_k8s_cluster.\`count:up1\` | where \`cluster\` = 'eks-cluster-with-vpc' | dedup k8s_node_name | stats count() as running_node_count by k8s_node_name`,
           endpoint: 'prometheus',
@@ -223,6 +226,8 @@ export const Home = () => {
             xKeys: [`pod`],
             yKeys: ['running_node_count'],
             gKeys: [],
+            labels: ['pool-e1ro5g0nq-rk82j', 'pool-e1ro5g0nq-rk82o'],
+            values: [40, 28]
           },
         },
         {
@@ -251,6 +256,38 @@ export const Home = () => {
             gKeys: [],
           },
         },
+        {
+          cluster: 'eks-cluster-with-vpc',
+          name: 'diskIO',
+          title: 'Disk usage',
+          query: `source = prometheus_k8s_cluster.kube_pod_status_phase | where @timestamp >= '${start}' and @timestamp <= '${end}' and cluster = 'eks-cluster-with-vpc' | fields service_name | stats count() as node_count by service_name`,
+          //query: `source = prometheus_k8s_cluster.\`count:up1\` | where \`cluster\` = 'eks-cluster-with-vpc' | dedup k8s_node_name | stats count() as running_node_count by k8s_node_name`,
+          endpoint: 'prometheus',
+          datasource: { name: 'prometheus_k8s', type: 'prometheus' },
+          vis: {
+            component: Pie,
+            x: 'timestamp',
+            y: 'Number of Nodes',
+            xaxisKey: '@timestamp',
+            yaxisKey: 'total_memory_usage',
+            config: {
+              type: 'bar',
+              hole: .4,
+              textposition: 'inside',
+              showlegend: true
+            },
+            // layout: {
+            //   width: 267,
+            //   height: 190
+            // },
+            xKeys: [`pod`],
+            yKeys: ['running_node_count'],
+            gKeys: [],
+            y: [60, 13], // Sample values for Read and Write
+            x: ['pool-e1ro5g0nq-rk82j', 'pool-e1ro5g0nq-rk82o'],
+          },
+        },
+        
         // {
         //   cluster: 'play-db-cluster',
         //   name: 'clusterMemoryUsage',
diff --git a/public/components/kubernetes/namespaces/details.tsx b/public/components/kubernetes/namespaces/details.tsx
new file mode 100644
index 000000000..0687824e6
--- /dev/null
+++ b/public/components/kubernetes/namespaces/details.tsx
@@ -0,0 +1,172 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+  EuiText,
+  EuiLink,
+  EuiTabs,
+  EuiTab,
+  EuiSpacer,
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiStat,
+} from '@elastic/eui';
+import { Plt } from '../../visualizations/plotly/plot';
+
+export const NamespaceDetails = () => {
+  const [cpuUsageData] = useState([
+    {
+      x: ['02:45', '02:50', '02:55', '03:00', '03:05', '03:10', '03:15', '03:20', '03:25', '03:30', '03:35', '03:40'],
+      y: [0.04, 0.05, 0.06, 0.07, 0.08, 0.07, 0.09, 0.08, 0.07, 0.06, 0.05, 0.04],
+      name: 'Sum of container CPU usage',
+      type: 'scatter',
+      mode: 'lines',
+      line: { color: '#1f77b4', width: 2 },
+    },
+  ]);
+
+  const [memoryUsageData] = useState([
+    {
+      x: ['02:45', '02:50', '02:55', '03:00', '03:05', '03:10', '03:15', '03:20', '03:25', '03:30', '03:35', '03:40'],
+      y: [700, 750, 800, 850, 900, 850, 820, 780, 800, 850, 880, 860],
+      name: 'Sum of container memory usage',
+      type: 'scatter',
+      mode: 'lines',
+      line: { color: '#9467bd', width: 2 },
+    },
+  ]);
+
+  return (
+    <EuiPage paddingSize="l">
+      <EuiPageBody>
+        {/* Header Section */}
+        <EuiPageHeader>
+          <EuiPageHeaderSection>
+            <EuiTitle size="l">
+              <h1>argocd <EuiText color="subdued" component="span">namespace</EuiText></h1>
+            </EuiTitle>
+            <EuiText color="subdued">
+              in cluster <EuiLink href="#" color="primary">do-nyc1-demo-infra</EuiLink>
+            </EuiText>
+          </EuiPageHeaderSection>
+        </EuiPageHeader>
+
+        <EuiSpacer size="m" />
+
+        {/* Tabs */}
+        <EuiTabs>
+          <EuiTab isSelected>Overview</EuiTab>
+          <EuiTab>Network</EuiTab>
+          <EuiTab>Energy</EuiTab>
+          <EuiTab>Logs & Events</EuiTab>
+        </EuiTabs>
+
+        <EuiSpacer size="m" />
+
+        <EuiFlexGroup gutterSize="m">
+          <EuiFlexItem grow={false}>
+            <EuiButton>Explore pod status</EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton>Run Sift investigation</EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiSpacer size="l" />
+
+        {/* Namespace Information */}
+        <EuiPanel paddingSize="m">
+          <EuiText><strong>Namespace information</strong></EuiText>
+          <EuiSpacer size="s" />
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiText size="s"><strong>cluster:</strong> <EuiLink href="#">do-nyc1-demo-infra</EuiLink></EuiText>
+              <EuiText size="s"><strong>workloads:</strong> 7</EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText size="s"><strong>alerts:</strong> 0</EuiText>
+              <EuiText size="s"><strong>phase:</strong> Active</EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+
+        <EuiSpacer size="l" />
+
+        {/* Namespace Optimization */}
+        <EuiText><strong>Namespace optimization</strong></EuiText>
+        <EuiSpacer size="s" />
+        <EuiFlexGroup gutterSize="l">
+          <EuiFlexItem>
+            <EuiPanel paddingSize="m">
+              <EuiTitle size="xs">
+                <h2>Namespace CPU</h2>
+              </EuiTitle>
+              <EuiSpacer size="s" />
+              <Plt data={cpuUsageData} layout={{ title: '', yaxis: { title: 'Cores' }, xaxis: { title: 'Time' } }} height="250px" />
+              <EuiSpacer size="s" />
+              <EuiText size="xs">Min: 0.0149 cores | Mean: 0.0557 cores | Max: 0.0917 cores</EuiText>
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel paddingSize="m">
+              <EuiTitle size="xs">
+                <h2>Namespace Memory</h2>
+              </EuiTitle>
+              <EuiSpacer size="s" />
+              <Plt data={memoryUsageData} layout={{ title: '', yaxis: { title: 'MiB' }, xaxis: { title: 'Time' } }} height="250px" />
+              <EuiSpacer size="s" />
+              <EuiText size="xs">Min: 640 MiB | Mean: 883 MiB | Max: 980 MiB</EuiText>
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiSpacer size="l" />
+
+        {/* Cost and Optimization Stats */}
+        <EuiFlexGroup gutterSize="m">
+          <EuiFlexItem>
+            <EuiPanel style={{ padding: '16px', textAlign: 'center' }}>
+              <EuiStat title="$0.00137" description="CPU cost allocation" titleColor="primary" />
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel style={{ padding: '16px', textAlign: 'center' }}>
+              <EuiStat title="$0.00352" description="Memory cost allocation" titleColor="primary" />
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel style={{ padding: '16px', textAlign: 'center' }}>
+              <EuiStat title="$0.00490" description="Total cost (compute)" titleColor="primary" />
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel style={{ padding: '16px', textAlign: 'center' }}>
+              <EuiStat title="No data" description="CPU idle cost" titleColor="primary" />
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel style={{ padding: '16px', textAlign: 'center' }}>
+              <EuiStat title="No data" description="Memory idle cost" titleColor="primary" />
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel style={{ padding: '16px', textAlign: 'center' }}>
+              <EuiStat title="No data" description="Total idle cost (compute)" titleColor="primary" />
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
diff --git a/public/components/kubernetes/namespaces/index.tsx b/public/components/kubernetes/namespaces/index.tsx
index 415c06ab8..f9abd0c46 100644
--- a/public/components/kubernetes/namespaces/index.tsx
+++ b/public/components/kubernetes/namespaces/index.tsx
@@ -6,14 +6,14 @@
 import React from 'react';
 import { Router, Route, Switch } from 'react-router-dom';
 import { NamespaceOverview } from './overview';
-import { Home as ClusterDetails } from '../home';
+import { NamespaceDetails } from './details';
 
 export const NamespacesOverviewHome = (props) => {
   return (
     <Router history={props.AppMountParametersProp.history}>
       <Switch>
-        {/* <Route path="/:nodeName" component={ClusterDetails} /> */}
-        <Route path="/" component={ NamespaceOverview } />
+        <Route path="/:namespaceName" component={NamespaceDetails} />
+        <Route path="/" component={NamespaceOverview} />
       </Switch>
     </Router>
   );
diff --git a/public/components/kubernetes/namespaces/overview.tsx b/public/components/kubernetes/namespaces/overview.tsx
index cd838bede..6681289bc 100644
--- a/public/components/kubernetes/namespaces/overview.tsx
+++ b/public/components/kubernetes/namespaces/overview.tsx
@@ -25,6 +25,7 @@ import {
   EuiSelect,
   EuiFieldSearch,
   EuiIcon,
+  EuiLink,
 } from '@elastic/eui';
 
 export const NamespaceOverview = () => {
@@ -113,7 +114,10 @@ export const NamespaceOverview = () => {
               {fakeData.map((namespace, index) => (
                 <EuiTableRow key={index}>
                   <EuiTableRowCell>
-                    <EuiIcon type="arrowRight" /> {namespace.namespace}
+                    <EuiLink href={`kubernetes-namespaces/${namespace.namespace}`}>
+                      {namespace.namespace}
+                    </EuiLink>
+                    {/* <EuiIcon type="arrowRight" /> {namespace.namespace} */}
                   </EuiTableRowCell>
                   <EuiTableRowCell>
                     <EuiBadge color="hollow">{namespace.cluster}</EuiBadge>
diff --git a/public/components/kubernetes/overview.tsx b/public/components/kubernetes/overview.tsx
index ecc6ab6cb..5da8198c2 100644
--- a/public/components/kubernetes/overview.tsx
+++ b/public/components/kubernetes/overview.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   EuiPage,
   EuiPageBody,
@@ -25,10 +25,24 @@ import {
   EuiTableRow,
   EuiTableRowCell,
   EuiBadge,
+  EuiStatProps,
 } from '@elastic/eui';
 import { Plt } from '../visualizations/plotly/plot';
+import { coreRefs } from '../../framework/core_refs';
+const initialStatsData = [
+  { label: 'Clusters', value: 0 },
+  { label: 'Nodes', value: 2 },
+  { label: 'Namespaces', value: 11 },
+  { label: 'Workloads', value: 48 },
+  { label: 'Pods', value: 68 },
+  { label: 'Containers', value: 96 },
+];
 
 export const KubernetesOverview = () => {
+  const [statsData, setStatsData] = useState<{ label: string; value: number }[]>([
+    ...initialStatsData,
+  ]);
+  const [isStatsLoading, setIsStatsLoading] = useState(false);
 
   const fakeData = [
     {
@@ -42,14 +56,46 @@ export const KubernetesOverview = () => {
     },
   ];
 
-  const statsData = [
-    { label: 'Clusters', value: 1 },
-    { label: 'Nodes', value: 2 },
-    { label: 'Namespaces', value: 11 },
-    { label: 'Workloads', value: 48 },
-    { label: 'Pods', value: 68 },
-    { label: 'Containers', value: 96 },
-  ];
+  useEffect(() => {
+    // Fetch stats data
+    setIsStatsLoading(true);
+    const stats = [
+      coreRefs!.pplService!.fetch({
+        query:
+          'source = prometheus_k8s_cluster.`count:up1` | fields cluster | dedup cluster | stats count()',
+        format: 'jdbc',
+      }),
+      coreRefs!.pplService!.fetch({
+        query:
+          'source = prometheus_k8s_cluster.kube_node_info | fields node | dedup node | stats count()',
+        format: 'jdbc',
+      }),
+      coreRefs!.pplService!.fetch({
+        query:
+          'source = prometheus_k8s_cluster.kube_namespace_created | fields namespace | dedup namespace | stats count()',
+        format: 'jdbc',
+      }),
+      
+    ];
+    const nextState = [...initialStatsData];
+    Promise.allSettled(stats)
+      .then((data) => {
+        data
+          .map((d, index) => (d.status === 'fulfilled' ? d.value : null))
+          .forEach((r, index) => {
+            if (r) {
+              nextState[index].value = r.datarows[0][0];
+            }
+          });
+        setStatsData(nextState);
+      })
+      .catch((error) => {
+        console.log(error);
+      })
+      .finally(() => {
+        setIsStatsLoading(false);
+      });
+  }, []);
 
   const imageData = [
     { name: 'ghcr.io/grafana/quick...', count: 6 },
@@ -143,6 +189,7 @@ export const KubernetesOverview = () => {
                   description={stat.label}
                   titleSize="l"
                   titleColor="primary"
+                  isLoading={isStatsLoading}
                 />
               </EuiPanel>
             </EuiFlexItem>