diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index bf31e8d27..571f52f31 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -1,10 +1,11 @@
-import { monitorData } from "./data";
 import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import { Stack, Box, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import CustomGauge from "../../../Components/Charts/CustomGauge";
 import AreaChart from "../../../Components/Charts/AreaChart";
+import axios from "axios";
 import {
 	TzTick,
 	PercentTick,
@@ -17,11 +18,18 @@ import PropTypes from "prop-types";
  * @param {number} bytes - Number of bytes to convert
  * @returns {number} Converted value in gigabytes
  */
-const bytesToGB = (bytes) => {
-	if (typeof bytes !== "number") return 0;
-	if (bytes === 0) return 0;
+const bytesToMBorGB = (bytes) => {
+	if (typeof bytes !== "number") return "0 GB";
+	if (bytes === 0) return "0 GB";
+
 	const GB = bytes / (1024 * 1024 * 1024);
-	return Number(GB.toFixed(0));
+	const MB = bytes / (1024 * 1024);
+
+	if (GB >= 1) {
+		return `${Number(GB.toFixed(0))} GB`;
+	} else {
+		return `${Number(MB.toFixed(0))} MB`;
+	}
 };
 
 /**
@@ -130,12 +138,12 @@ const GaugeBox = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo })
 };
 
 GaugeBox.propTypes = {
-	value: PropTypes.number.isRequired,
+	value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 	heading: PropTypes.string.isRequired,
 	metricOne: PropTypes.string.isRequired,
-	valueOne: PropTypes.string.isRequired,
+	valueOne: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 	metricTwo: PropTypes.string.isRequired,
-	valueTwo: PropTypes.string.isRequired,
+	valueTwo: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 };
 
 /**
@@ -145,189 +153,208 @@ GaugeBox.propTypes = {
 const InfrastructureDetails = () => {
 	const theme = useTheme();
 	const { monitorId } = useParams();
-	const testData = monitorData;
-	const latestCheck = testData[testData.length - 1];
 	const navList = [
 		{ name: "infrastructure monitors", path: "/infrastructure" },
 		{ name: "details", path: `/infrastructure/${monitorId}` },
 	];
+	const [monitor, setMonitor] = useState(null);
+
+	useEffect(() => {
+		const fetchData = async () => {
+			try {
+				const response = await axios.get("/dummyData.json", {
+					headers: {
+						"Content-Type": "application/json",
+						"Cache-Control": "no-cache",
+					},
+				});
+				setMonitor(response.data.data);
+			} catch (error) {
+				console.error(error);
+			}
+		};
+		fetchData();
+	}, []);
 
+	console.log(monitor?.checks?.[0]?.memory?.total_bytes);
 	return (
-		<Box>
-			<Breadcrumbs list={navList} />
-			<Stack
-				direction="column"
-				gap={theme.spacing(10)}
-				mt={theme.spacing(10)}
-			>
+		monitor && (
+			<Box>
+				<Breadcrumbs list={navList} />
 				<Stack
-					direction="row"
-					gap={theme.spacing(8)}
+					direction="column"
+					gap={theme.spacing(10)}
+					mt={theme.spacing(10)}
 				>
-					<StatBox
-						heading={"CPU"}
-						subHeading={`${latestCheck.cpu.physical_core} cores`}
-					/>
-					<StatBox
-						heading={"Memory"}
-						subHeading={`${bytesToGB(latestCheck.memory.total_bytes)}GB`}
-					/>
-					<StatBox
-						heading={"Disk"}
-						subHeading={`${bytesToGB(latestCheck.disk[0].total_bytes)}GB`}
-					/>
-					<StatBox
-						heading={"Uptime"}
-						subHeading={"100%"}
-					/>
-					<StatBox
-						heading={"Status"}
-						subHeading={latestCheck.status === true ? "Active" : "Inactive"}
-					/>
-				</Stack>
-				<Stack
-					direction="row"
-					gap={theme.spacing(8)}
-				>
-					<GaugeBox
-						value={latestCheck.cpu.usage_percent * 100}
-						heading={"Memory Usage"}
-						metricOne={"Used"}
-						valueOne={`${bytesToGB(latestCheck.memory.used_bytes)}GB`}
-						metricTwo={"Total"}
-						valueTwo={`${bytesToGB(latestCheck.memory.total_bytes)}GB`}
-					/>
-					<GaugeBox
-						value={latestCheck.cpu.usage_percent * 100}
-						heading={"CPU Usage"}
-						metricOne={"Cores"}
-						valueOne={latestCheck.cpu.physical_core}
-						metricTwo={"Frequency"}
-						valueTwo={`${latestCheck.cpu.frequency} Ghz`}
-					/>
-					{latestCheck.disk.map((disk, idx) => {
-						return (
-							<GaugeBox
-								key={disk._id}
-								value={disk.usage_percent * 100}
-								heading={`Disk${idx} usage`}
-								metricOne={"Used"}
-								valueOne={`${bytesToGB(disk.total_bytes - disk.free_bytes)}GB`}
-								metricTwo={"Total"}
-								valueTwo={`${bytesToGB(disk.total_bytes)}GB`}
-							/>
-						);
-					})}
-				</Stack>
-				<Stack
-					direction={"row"}
-					height={300} // FE team HELP!
-					gap={theme.spacing(8)} // FE team HELP!
-					flexWrap="wrap" // //FE team HELP! Better way to do this?
-					sx={{
-						"& > *": {
-							flexBasis: `calc(50% - ${theme.spacing(8)})`,
-							maxWidth: `calc(50% - ${theme.spacing(8)})`,
-						},
-					}}
-				>
-					<BaseBox>
-						<Typography
-							component="h2"
-							padding={theme.spacing(8)}
-						>
-							Memory usage
-						</Typography>
-						<AreaChart
-							data={testData}
-							dataKey="memory.usage_percent"
-							xKey="createdAt"
-							yKey="memory.usage_percent"
-							customTooltip={({ active, payload, label }) => (
-								<InfrastructureTooltip
-									label={label}
-									yKey="memory.usage_percent"
-									yLabel="Memory Usage"
-									active={active}
-									payload={payload}
-								/>
-							)}
-							xTick={<TzTick />}
-							yTick={<PercentTick />}
-							strokeColor={theme.palette.primary.main}
-							gradient={true}
-							gradientStartColor={theme.palette.primary.main} //FE team HELP!  Not sure what colors to use
-							gradientEndColor="#ffffff" // FE team HELP!
+					<Stack
+						direction="row"
+						gap={theme.spacing(8)}
+					>
+						<StatBox
+							heading={"CPU"}
+							subHeading={`${monitor.checks[0].cpu.physical_core} cores`}
 						/>
-					</BaseBox>
-					<BaseBox>
-						<Typography
-							component="h2"
-							padding={theme.spacing(8)}
-						>
-							CPU usage
-						</Typography>
-						<AreaChart
-							data={testData}
-							dataKey="cpu.usage_percent"
-							xKey="createdAt"
-							yKey="cpu.usage_percent"
-							customTooltip={({ active, payload, label }) => (
-								<InfrastructureTooltip
-									label={label}
-									yKey="cpu.usage_percent"
-									yLabel="CPU Usage"
-									active={active}
-									payload={payload}
-								/>
-							)}
-							xTick={<TzTick />}
-							yTick={<PercentTick />}
-							strokeColor={theme.palette.success.main} // FE team HELP!
-							gradient={true}
-							fill={theme.palette.success.main} // FE team HELP!
-							gradientStartColor={theme.palette.success.main}
-							gradientEndColor="#ffffff"
+						<StatBox
+							heading={"Memory"}
+							subHeading={bytesToMBorGB(monitor.checks[0].memory.total_bytes)}
+						/>
+						<StatBox
+							heading={"Disk"}
+							subHeading={bytesToMBorGB(monitor.checks[0].disk[0].total_bytes)}
+						/>
+						<StatBox
+							heading={"Uptime"}
+							subHeading={"100%"}
+						/>
+						<StatBox
+							heading={"Status"}
+							subHeading={monitor.status === true ? "Active" : "Inactive"}
+						/>
+					</Stack>
+					<Stack
+						direction="row"
+						gap={theme.spacing(8)}
+					>
+						<GaugeBox
+							value={monitor.checks[0].cpu.usage_percent * 100}
+							heading={"Memory Usage"}
+							metricOne={"Used"}
+							valueOne={bytesToMBorGB(monitor.checks[0].memory.used_bytes)}
+							metricTwo={"Total"}
+							valueTwo={bytesToMBorGB(monitor.checks[0].memory.total_bytes)}
 						/>
-					</BaseBox>
-					{latestCheck.disk.map((disk, idx) => {
-						// disk is an array of disks, so we need to map over it
-						return (
-							<BaseBox key={disk._id}>
-								<Typography
-									component="h2"
-									padding={theme.spacing(8)}
-								>
-									{`Disk${idx} usage`}
-								</Typography>
-								<AreaChart
-									data={testData}
-									dataKey={`disk[${idx}].usage_percent`}
-									xKey="createdAt"
-									yKey={`disk[${idx}].usage_percent`} // We are looking for the usage_percent of the current disk in the array
-									customTooltip={({ active, payload, label }) => (
-										<InfrastructureTooltip
-											label={label} // label must be a string
-											yKey={`disk.usage_percent`}
-											yLabel="Disk Usage"
-											yIdx={idx}
-											active={active}
-											payload={payload}
-										/>
-									)}
-									xTick={<TzTick />}
-									yTick={<PercentTick />}
-									strokeColor={theme.palette.warning.main}
-									gradient={true}
-									gradientStartColor={theme.palette.warning.main}
-									gradientEndColor="#ffffff"
+						<GaugeBox
+							value={monitor.checks[0].cpu.usage_percent * 100}
+							heading={"CPU Usage"}
+							metricOne={"Cores"}
+							valueOne={monitor.checks[0].cpu.physical_core}
+							metricTwo={"Frequency"}
+							valueTwo={`${(monitor.checks[0].cpu.frequency / 1000).toFixed(2)} Ghz`}
+						/>
+						{monitor.checks[0].disk.map((disk, idx) => {
+							return (
+								<GaugeBox
+									key={disk._id}
+									value={disk.usage_percent * 100}
+									heading={`Disk${idx} usage`}
+									metricOne={"Used"}
+									valueOne={bytesToMBorGB(disk.total_bytes - disk.free_bytes)}
+									metricTwo={"Total"}
+									valueTwo={bytesToMBorGB(disk.total_bytes)}
 								/>
-							</BaseBox>
-						);
-					})}
+							);
+						})}
+					</Stack>
+					<Stack
+						direction={"row"}
+						height={300} // FE team HELP!
+						gap={theme.spacing(8)} // FE team HELP!
+						flexWrap="wrap" // //FE team HELP! Better way to do this?
+						sx={{
+							"& > *": {
+								flexBasis: `calc(50% - ${theme.spacing(8)})`,
+								maxWidth: `calc(50% - ${theme.spacing(8)})`,
+							},
+						}}
+					>
+						<BaseBox>
+							<Typography
+								component="h2"
+								padding={theme.spacing(8)}
+							>
+								Memory usage
+							</Typography>
+							<AreaChart
+								data={monitor?.checks ?? []}
+								dataKey="memory.usage_percent"
+								xKey="createdAt"
+								yKey="memory.usage_percent"
+								customTooltip={({ active, payload, label }) => (
+									<InfrastructureTooltip
+										label={label}
+										yKey="memory.usage_percent"
+										yLabel="Memory Usage"
+										active={active}
+										payload={payload}
+									/>
+								)}
+								xTick={<TzTick />}
+								yTick={<PercentTick />}
+								strokeColor={theme.palette.primary.main}
+								gradient={true}
+								gradientStartColor={theme.palette.primary.main} //FE team HELP!  Not sure what colors to use
+								gradientEndColor="#ffffff" // FE team HELP!
+							/>
+						</BaseBox>
+						<BaseBox>
+							<Typography
+								component="h2"
+								padding={theme.spacing(8)}
+							>
+								CPU usage
+							</Typography>
+							<AreaChart
+								data={monitor?.checks ?? []}
+								dataKey="cpu.usage_percent"
+								xKey="createdAt"
+								yKey="cpu.usage_percent"
+								customTooltip={({ active, payload, label }) => (
+									<InfrastructureTooltip
+										label={label}
+										yKey="cpu.usage_percent"
+										yLabel="CPU Usage"
+										active={active}
+										payload={payload}
+									/>
+								)}
+								xTick={<TzTick />}
+								yTick={<PercentTick />}
+								strokeColor={theme.palette.success.main} // FE team HELP!
+								gradient={true}
+								fill={theme.palette.success.main} // FE team HELP!
+								gradientStartColor={theme.palette.success.main}
+								gradientEndColor="#ffffff"
+							/>
+						</BaseBox>
+						{monitor?.checks?.[0]?.disk?.map((disk, idx) => {
+							// disk is an array of disks, so we need to map over it
+							return (
+								<BaseBox key={disk._id}>
+									<Typography
+										component="h2"
+										padding={theme.spacing(8)}
+									>
+										{`Disk${idx} usage`}
+									</Typography>
+									<AreaChart
+										data={monitor?.checks ?? []}
+										dataKey={`disk[${idx}].usage_percent`}
+										xKey="createdAt"
+										yKey={`disk[${idx}].usage_percent`} // We are looking for the usage_percent of the current disk in the array
+										customTooltip={({ active, payload, label }) => (
+											<InfrastructureTooltip
+												label={label} // label must be a string
+												yKey={`disk.usage_percent`}
+												yLabel="Disk Usage"
+												yIdx={idx}
+												active={active}
+												payload={payload}
+											/>
+										)}
+										xTick={<TzTick />}
+										yTick={<PercentTick />}
+										strokeColor={theme.palette.warning.main}
+										gradient={true}
+										gradientStartColor={theme.palette.warning.main}
+										gradientEndColor="#ffffff"
+									/>
+								</BaseBox>
+							);
+						})}
+					</Stack>
 				</Stack>
-			</Stack>
-		</Box>
+			</Box>
+		)
 	);
 };