diff --git a/src/Components/StandardContainer/index.jsx b/src/Components/StandardContainer/index.jsx
index d0ade6805..c736b3ecc 100644
--- a/src/Components/StandardContainer/index.jsx
+++ b/src/Components/StandardContainer/index.jsx
@@ -17,7 +17,6 @@ const Container = ({ children, direction, backgroundColor, sx }) => {
gap={theme.spacing(2)}
border={1}
borderColor={theme.palette.primary.lowContrast}
- borderStyle="solid"
borderRadius={theme.spacing(4)}
backgroundColor={bgColor}
sx={{ ...sx }}
diff --git a/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx b/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx
new file mode 100644
index 000000000..332ae812e
--- /dev/null
+++ b/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx
@@ -0,0 +1,84 @@
+// Components
+import { ColContainer } from "../../../../../Components/StandardContainer";
+import { Stack, Typography } from "@mui/material";
+import PulseDot from "../../../../../Components/Animated/PulseDot";
+import LastUpdate from "../LastUpdate";
+
+// Utils
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+const StatusHeader = ({ monitor, connectionStatus }) => {
+ console.log(monitor);
+
+ const theme = useTheme();
+
+ const COLOR_MAP = {
+ up: theme.palette.distributedStatusHeader.up,
+ down: theme.palette.distributedStatusHeader.down,
+ };
+
+ const MSG_MAP = {
+ up: "All Systems Operational",
+ down: "Last Check Failed",
+ };
+
+ const PULSE_COLOR = {
+ up: theme.palette.success.main,
+ down: theme.palette.error.main,
+ };
+
+ let bgColor = COLOR_MAP[connectionStatus];
+
+ return (
+
+
+
+
+
+
+ {MSG_MAP[connectionStatus]}
+
+
+ Uptime: {(monitor.totalUptime * 100).toFixed(2)}%
+
+
+
+ Last updated{" "}
+
+
+
+
+
+ );
+};
+
+StatusHeader.propTypes = {
+ monitor: PropTypes.object,
+ connectionStatus: PropTypes.string,
+};
+
+export default StatusHeader;
diff --git a/src/Pages/DistributedUptimeStatus/Status/index.jsx b/src/Pages/DistributedUptimeStatus/Status/index.jsx
index e4e54f272..a714f6976 100644
--- a/src/Pages/DistributedUptimeStatus/Status/index.jsx
+++ b/src/Pages/DistributedUptimeStatus/Status/index.jsx
@@ -12,10 +12,10 @@ import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
import GenericFallback from "../../../Components/GenericFallback";
import Dialog from "../../../Components/Dialog";
import SkeletonLayout from "./Components/Skeleton";
-import StatBox from "../../../Components/StatBox";
import UptLogo from "../../../assets/icons/upt_logo.png";
import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
import InfoBox from "../../../Components/InfoBox";
+import StatusHeader from "../../DistributedUptime/Details/Components/StatusHeader";
//Utils
import { useTheme } from "@mui/material/styles";
@@ -150,6 +150,11 @@ const DistributedUptimeStatus = () => {
type="distributed"
/>
+
+