diff --git a/client/src/components/nodeStatusChart.tsx b/client/src/components/nodeStatusChart.tsx
index c45346b..93663f1 100644
--- a/client/src/components/nodeStatusChart.tsx
+++ b/client/src/components/nodeStatusChart.tsx
@@ -1,16 +1,24 @@
-import _ from 'lodash';
 import React from 'react';
-import Chart from './chart';
 import LoadingChart from './loadingChart';
 import {Node} from '../utils/types';
+import PrometheusGraph from '../views/prometheusgraph';
 
 export default function NodeStatusChart({items}: {items?: Node[]}) {
-    const readyCount = _.sumBy(items, x => getReadyStatus(x) === 'True' ? 1 : 0); // eslint-disable-line no-confusing-arrow
-
+    const query = {
+        queryString: 'sum(kube_node_info)',
+        title: 'Node Count',
+        yAxisMin: 0,
+        yAxisUnit: 'Nodes',
+    };
     return (
         <div className='charts_item'>
             {items ? (
-                <Chart used={readyCount} available={items.length} />
+                <PrometheusGraph
+                    queryString={query.queryString}
+                    title={query.title}
+                    yAxisMin={query.yAxisMin}
+                    yAxisUnit={query.yAxisUnit}
+                />
             ) : (
                 <LoadingChart />
             )}
@@ -19,10 +27,3 @@ export default function NodeStatusChart({items}: {items?: Node[]}) {
         </div>
     );
 }
-
-function getReadyStatus({status}: Node) {
-    if (!status.conditions) return null;
-
-    const ready = status.conditions.find(y => y.type === 'Ready');
-    return ready && ready.status;
-}