diff --git a/web/pages/components/chart.tsx b/web/pages/components/chart.tsx
new file mode 100644
index 000000000..3412331c9
--- /dev/null
+++ b/web/pages/components/chart.tsx
@@ -0,0 +1,58 @@
+import { LineChart, XAxis, YAxis, Line, Tooltip, Legend } from "recharts";
+import { timeFormat } from "d3-time-format";
+
+export default function Chart({ data, color, unit }) {
+  const CustomizedTooltip = (props) => {
+    const { active, payload } = props;
+    if (active && payload && payload[0]) {
+      const time = payload[0].payload
+        ? timeFormat("%I:%M")(new Date(payload[0].payload.time), {
+            nearestTo: 1,
+          })
+        : "";
+      return (
+        <div className="custom-tooltip">
+          <p className="label">
+            <strong>{time}</strong> {payload[0].payload.value} %
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  const timeFormatter = (tick) => {
+    return timeFormat("%I:%M")(new Date(tick), {
+      nearestTo: 1,
+    });
+  };
+
+  return (
+    <LineChart width={1200} height={400} data={data}>
+      <XAxis
+        dataKey="time"
+        // type="number"
+        tickFormatter={timeFormatter}
+        interval="preserveStartEnd"
+        tickCount={5}
+        minTickGap={15}
+        domain={["dataMin", "dataMax"]}
+      />
+      <YAxis
+        dataKey="value"
+        interval="preserveStartEnd"
+        unit={unit}
+        domain={["dataMin", "dataMax"]}
+      />
+      <Tooltip content={<CustomizedTooltip />} />
+      <Legend />
+      <Line
+        type="monotone"
+        dataKey="value"
+        stroke={color}
+        dot={null}
+        strokeWidth={3}
+      />
+    </LineChart>
+  );
+}
diff --git a/web/pages/hardware-info.tsx b/web/pages/hardware-info.tsx
index f26c0aeee..76ac091e4 100644
--- a/web/pages/hardware-info.tsx
+++ b/web/pages/hardware-info.tsx
@@ -1,18 +1,14 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
+import { timeFormat } from "d3-time-format";
 import { HARDWARE_STATS, fetchData, FETCH_INTERVAL } from './utils/apis';
-import { BroadcastStatusContext } from './utils/broadcast-status-context';
+import Chart from './components/chart.tsx'
 
 export default function HardwareInfo() {
-  const context = useContext(BroadcastStatusContext);
-  const { broadcastActive } = context || {};
-
   const [hardwareStatus, setHardwareStatus] = useState({});
 
   const getHardwareStatus = async () => {
     try {
       const result = await fetchData(HARDWARE_STATS);
-      console.log("hardare result", result)
-
       setHardwareStatus({ ...result });
 
     } catch (error) {
@@ -24,7 +20,7 @@ export default function HardwareInfo() {
     let getStatusIntervalId = null;
 
     getHardwareStatus();
-    getStatusIntervalId = setInterval(getHardwareStatus, FETCH_INTERVAL); //runs every 1 min.
+    getStatusIntervalId = setInterval(getHardwareStatus, FETCH_INTERVAL); // runs every 1 min.
   
     // returned function will be called on component unmount 
     return () => {
@@ -32,14 +28,39 @@ export default function HardwareInfo() {
     }
   }, []);
 
-  return (
-    <div>
-      <h2>Hardware Info</h2>
-      <p>cpu:[], disk: [], memory: [];  value = %age.</p>
-      <p>the times should be the same for each, though milliseconds differ</p>
-      <div style={{border: '1px solid blue', height: '300px', width: '100%', overflow:'auto'}}>
-        {JSON.stringify(hardwareStatus)}
+ 
+
+  if (!hardwareStatus.cpu) {
+    return null;
+  }
+
+    return (
+      <div>
+        <div>
+          <h2>Hardware Info</h2>
+          <div className="chart-container">
+            <h3>CPU</h3>
+            <Chart data={hardwareStatus.cpu} color="#FF7700" unit="%" />
+            <h3>Memory</h3>
+            <Chart data={hardwareStatus.memory} color="#004777" unit="%" />
+            <h3>Disk</h3>
+            <Chart data={hardwareStatus.disk} color="#A9E190" unit="%" />
+          </div>
+        </div>
+        <p>cpu:[], disk: [], memory: []; value = %age.</p>
+        <p>the times should be the same for each, though milliseconds differ</p>
+        <div
+          style={{
+            border: "1px solid blue",
+            height: "300px",
+            width: "100%",
+            overflow: "auto",
+          }}
+        >
+          {JSON.stringify(hardwareStatus)}
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  
+  
+}
\ No newline at end of file
diff --git a/web/pages/viewer-info.tsx b/web/pages/viewer-info.tsx
index 7e5a482bd..dc3a46c83 100644
--- a/web/pages/viewer-info.tsx
+++ b/web/pages/viewer-info.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
-import {timeFormat} from 'd3-time-format';
-import { LineChart, XAxis, YAxis, Line, Tooltip } from 'recharts';
+import Chart from "./components/chart.tsx";
 import { BroadcastStatusContext } from './utils/broadcast-status-context';
 
 import { VIEWERS_OVER_TIME, fetchData } from './utils/apis';
@@ -66,19 +65,19 @@ export default function ViewersOverTime() {
     <div>
       <h2>Current Viewers</h2>
       <div className="chart-container">
-        <LineChart width={800} height={400} data={viewerInfo}>
-          <XAxis dataKey="time" tickFormatter={timeFormatter}/>
-          <YAxis dataKey="value"/>
-          <Tooltip
-            content={<CustomizedTooltip />}
-          />
+        <Chart data={viewerInfo} color="#ff84d8" unit="" />
+
+        {/* <LineChart width={800} height={400} data={viewerInfo}>
+          <XAxis dataKey="time" tickFormatter={timeFormatter} />
+          <YAxis dataKey="value" />
+          <Tooltip content={<CustomizedTooltip />} />
           <Line
             type="monotone"
             dataKey="value"
-            stroke="#ff84d8" 
-            dot={{ stroke: 'red', strokeWidth: 2 }} 
+            stroke="#ff84d8"
+            dot={{ stroke: "red", strokeWidth: 2 }}
           />
-        </LineChart>
+        </LineChart> */}
       </div>
     </div>
   );