diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css
index 528ec1b92..8b1378917 100644
--- a/Client/src/Pages/Monitors/Details/index.css
+++ b/Client/src/Pages/Monitors/Details/index.css
@@ -1,4 +1 @@
-.monitor-details p.MuiTypography-root,
-.monitor-details p.MuiTypography-root span.MuiTypography-root {
-  font-size: var(--env-var-font-size-small-plus);
-}
+
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 20979d863..4c8eced23 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -27,58 +27,12 @@ import UptimeIcon from "../../../assets/icons/uptime-icon.svg?react";
 import ResponseTimeIcon from "../../../assets/icons/response-time-icon.svg?react";
 import AverageResponseIcon from "../../../assets/icons/average-response-icon.svg?react";
 import IncidentsIcon from "../../../assets/icons/incidents.svg?react";
+import HistoryIcon from "../../../assets/icons/history-icon.svg?react";
 import PaginationTable from "./PaginationTable";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
-import { ChartBox, IconBox } from "./styled";
-
-const StatBox = ({ title, value }) => {
-  const theme = useTheme();
-  return (
-    <Box
-      className="stat-box"
-      flex="20%"
-      minWidth="100px"
-      px={theme.spacing(8)}
-      py={theme.spacing(4)}
-      border={1}
-      borderColor={theme.palette.border.light}
-      borderRadius={theme.shape.borderRadius}
-      backgroundColor={theme.palette.background.main}
-    >
-      <Typography
-        variant="h6"
-        mb={theme.spacing(2)}
-        fontSize={14}
-        fontWeight={500}
-        color={theme.palette.primary.main}
-        sx={{
-          "& span": {
-            color: theme.palette.text.accent,
-            fontSize: 13,
-            fontStyle: "italic",
-          },
-        }}
-      >
-        {title}
-      </Typography>
-      <Typography
-        variant="h4"
-        fontWeight={500}
-        fontSize={13}
-        color={theme.palette.text.secondary}
-      >
-        {value}
-      </Typography>
-    </Box>
-  );
-};
-
-StatBox.propTypes = {
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
+import { AlertBox, ChartBox, IconBox } from "./styled";
 
 /**
  * Renders a skeleton layout.
@@ -233,7 +187,7 @@ const DetailsPage = ({ isAdmin }) => {
               { name: "details", path: `/monitors/${monitorId}` },
             ]}
           />
-          <Stack gap={theme.spacing(16)} mt={theme.spacing(10)}>
+          <Stack gap={theme.spacing(12)} mt={theme.spacing(10)}>
             <Stack direction="row" gap={theme.spacing(2)}>
               <Box>
                 <Typography
@@ -284,6 +238,7 @@ const DetailsPage = ({ isAdmin }) => {
                   <Typography
                     ml={theme.spacing(6)}
                     lineHeight="20px"
+                    fontSize={12}
                     position="relative"
                     color={theme.palette.text.tertiary}
                     sx={{
@@ -337,8 +292,9 @@ const DetailsPage = ({ isAdmin }) => {
                   slotProps={{
                     paper: {
                       sx: {
-                        py: 4,
-                        px: 6,
+                        mt: theme.spacing(4),
+                        py: theme.spacing(2),
+                        px: theme.spacing(4),
                         width: 140,
                         backgroundColor: theme.palette.background.accent,
                       },
@@ -376,14 +332,46 @@ const DetailsPage = ({ isAdmin }) => {
                 )}
               </Stack>
             </Stack>
+            <Stack direction="row" gap={theme.spacing(8)}>
+              <AlertBox>
+                <Typography component="h2">up for</Typography>
+                <Typography>
+                  {formatDurationRounded(monitor?.uptimeDuration)}
+                </Typography>
+              </AlertBox>
+              <AlertBox>
+                <Typography component="h2">last check</Typography>
+                <Typography>
+                  {formatDurationRounded(monitor?.lastChecked)}
+                  <Typography component="span">ago</Typography>
+                </Typography>
+              </AlertBox>
+              <AlertBox>
+                <Typography component="h2">last response time</Typography>
+                <Typography>
+                  {monitor?.latestResponseTime}
+                  <Typography component="span">ms</Typography>
+                </Typography>
+              </AlertBox>
+            </Stack>
             <Box>
               <Stack
                 direction="row"
-                alignItems="center"
+                justifyContent="space-between"
+                alignItems="flex-end"
                 gap={theme.spacing(4)}
-                mb={theme.spacing(10)}
+                mb={theme.spacing(8)}
               >
-                <ButtonGroup sx={{ height: 30 }}>
+                <Typography fontSize={12} color={theme.palette.text.tertiary}>
+                  Showing statistics for past{" "}
+                  {dateRange === "day"
+                    ? "24 hours"
+                    : dateRange === "week"
+                    ? "7 days"
+                    : "30 days"}
+                  .
+                </Typography>
+                <ButtonGroup sx={{ height: 32 }}>
                   <Button
                     variant="group"
                     filled={(dateRange === "day").toString()}
@@ -406,15 +394,6 @@ const DetailsPage = ({ isAdmin }) => {
                     Month
                   </Button>
                 </ButtonGroup>
-                <Typography color={theme.palette.text.tertiary}>
-                  Showing statistics for past{" "}
-                  {dateRange === "day"
-                    ? "24 hours"
-                    : dateRange === "week"
-                    ? "7 days"
-                    : "30 days"}
-                  .
-                </Typography>
               </Stack>
               <Stack direction="row" flexWrap="wrap" gap={theme.spacing(8)}>
                 <ChartBox>
@@ -466,117 +445,38 @@ const DetailsPage = ({ isAdmin }) => {
                     </IconBox>
                     <Typography component="h2">Response Times</Typography>
                   </Stack>
+                  <Box>
+                    {/* <MonitorDetailsAreaChart
+                  checks={[...monitor.checks].reverse()}
+                /> */}
+                  </Box>
+                </ChartBox>
+                <ChartBox
+                  gap={theme.spacing(8)}
+                  sx={{
+                    flex: "100%",
+                    height: "fit-content",
+                    "& nav": { mt: theme.spacing(12) },
+                  }}
+                >
+                  <Stack mb={theme.spacing(8)}>
+                    <IconBox>
+                      <HistoryIcon />
+                    </IconBox>
+                    <Typography
+                      component="h2"
+                      color={theme.palette.text.secondary}
+                    >
+                      History
+                    </Typography>
+                  </Stack>
+                  <PaginationTable
+                    monitorId={monitorId}
+                    dateRange={dateRange}
+                  />
                 </ChartBox>
               </Stack>
             </Box>
-            <Stack
-              direction="row"
-              justifyContent="space-between"
-              gap={theme.spacing(6)}
-              flexWrap="wrap"
-            >
-              <StatBox
-                title="Currently up for"
-                value={formatDuration(monitor?.uptimeDuration)}
-              />
-              <StatBox
-                title="Last check"
-                value={`${formatDurationRounded(monitor?.lastChecked)} ago`}
-              />
-              <StatBox title="Incidents" value={monitor?.incidents} />
-              <StatBox
-                title="Latest response time"
-                value={monitor?.latestResponseTime}
-              />
-              <StatBox
-                title={
-                  <>
-                    Avg. Response Time{" "}
-                    <Typography component="span">(24-hr)</Typography>
-                  </>
-                }
-                value={parseFloat(monitor?.avgResponseTime24hours)
-                  .toFixed(2)
-                  .replace(/\.?0+$/, "")}
-              />
-              <StatBox
-                title={
-                  <>
-                    Uptime <Typography component="span">(24-hr)</Typography>
-                  </>
-                }
-                value={`${parseFloat(monitor?.uptime24Hours)
-                  .toFixed(2)
-                  .replace(/\.?0+$/, "")}%`}
-              />
-              <StatBox
-                title={
-                  <>
-                    Uptime <Typography component="span">(30-day)</Typography>
-                  </>
-                }
-                value={`${parseFloat(monitor?.uptime30Days)
-                  .toFixed(2)
-                  .replace(/\.?0+$/, "")}%`}
-              />
-            </Stack>
-            <Box>
-              <Stack
-                direction="row"
-                justifyContent="space-between"
-                mb={theme.spacing(8)}
-              >
-                <Typography
-                  component="h2"
-                  alignSelf="flex-end"
-                  color={theme.palette.text.secondary}
-                >
-                  Response Times
-                </Typography>
-                <ButtonGroup>
-                  <Button
-                    variant="group"
-                    filled={(dateRange === "day").toString()}
-                    onClick={() => setDateRange("day")}
-                  >
-                    Day
-                  </Button>
-                  <Button
-                    variant="group"
-                    filled={(dateRange === "week").toString()}
-                    onClick={() => setDateRange("week")}
-                  >
-                    Week
-                  </Button>
-                  <Button
-                    variant="group"
-                    filled={(dateRange === "month").toString()}
-                    onClick={() => setDateRange("month")}
-                  >
-                    Month
-                  </Button>
-                </ButtonGroup>
-              </Stack>
-              <Box
-                p={theme.spacing(10)}
-                pb={theme.spacing(2)}
-                backgroundColor={theme.palette.background.main}
-                border={1}
-                borderColor={theme.palette.border.light}
-                borderRadius={theme.shape.borderRadius}
-                sx={{ height: "250px" }}
-              >
-                {/* <MonitorDetailsAreaChart
-                  checks={[...monitor.checks].reverse()}
-                /> */}
-              </Box>
-            </Box>
-            <Stack gap={theme.spacing(8)}>
-              <Typography component="h2" color={theme.palette.text.secondary}>
-                History
-              </Typography>
-              {/* <PaginationTable monitorId={monitorId} dateRange={dateRange} /> */}
-            </Stack>
           </Stack>
         </>
       )}
diff --git a/Client/src/Pages/Monitors/Details/styled.jsx b/Client/src/Pages/Monitors/Details/styled.jsx
index a5bec8f39..479c82d0e 100644
--- a/Client/src/Pages/Monitors/Details/styled.jsx
+++ b/Client/src/Pages/Monitors/Details/styled.jsx
@@ -13,6 +13,7 @@ export const ChartBox = styled(Box)(({ theme }) => ({
   "& h2": {
     color: theme.palette.text.secondary,
     fontSize: 15,
+    fontWeight: 500,
   },
   "& p": {
     color: theme.palette.text.tertiary,
@@ -59,3 +60,30 @@ export const IconBox = styled(Box)(({ theme }) => ({
     },
   },
 }));
+
+export const AlertBox = styled(Box)(({ theme }) => ({
+  padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
+  minWidth: 200,
+  width: 225,
+  border: 1,
+  borderStyle: "solid",
+  borderColor: theme.palette.border.light,
+  borderRadius: 4,
+  backgroundColor: theme.palette.background.main,
+  "& h2": {
+    fontSize: 13,
+    fontWeight: 500,
+    color: theme.palette.text.secondary,
+    textTransform: "uppercase",
+  },
+  "& p": {
+    fontSize: 18,
+    color: theme.palette.text.primary,
+    marginTop: theme.spacing(2),
+    "& span": {
+      opacity: 0.8,
+      marginLeft: theme.spacing(3),
+      fontSize: 15,
+    },
+  },
+}));
diff --git a/Client/src/assets/icons/history-icon.svg b/Client/src/assets/icons/history-icon.svg
new file mode 100644
index 000000000..7343455ec
--- /dev/null
+++ b/Client/src/assets/icons/history-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.07598 7.48282L7.36402 10.5457C7.58715 10.705 7.69872 10.7847 7.81548 10.8031C7.91821 10.8192 8.02343 10.8029 8.11648 10.7565C8.22223 10.7037 8.30449 10.594 8.46901 10.3747L9.37511 9.16652C9.42164 9.10448 9.4449 9.07347 9.47224 9.04671C9.49652 9.02295 9.52315 9.00173 9.55173 8.98338C9.58392 8.9627 9.61935 8.94696 9.6902 8.91546L13.5588 7.19609C13.7192 7.12482 13.7993 7.08918 13.8598 7.03352C13.9133 6.9843 13.9554 6.924 13.9832 6.85684C14.0146 6.78091 14.0204 6.69336 14.0321 6.51826L14.3154 2.2694M13.5 13.5L16.116 14.6211C16.4195 14.7512 16.5713 14.8163 16.6517 14.9243C16.7222 15.0191 16.7569 15.1358 16.7496 15.2537C16.7413 15.3881 16.6497 15.5255 16.4665 15.8002L15.2375 17.6438C15.1507 17.774 15.1072 17.8391 15.0499 17.8863C14.9991 17.928 14.9406 17.9593 14.8777 17.9784C14.8067 18 14.7284 18 14.5719 18H12.5766C12.3693 18 12.2656 18 12.1774 17.9653C12.0995 17.9347 12.0305 17.885 11.9768 17.8208C11.916 17.7481 11.8832 17.6497 11.8177 17.453L11.1048 15.3144C11.0661 15.1983 11.0468 15.1403 11.0417 15.0814C11.0372 15.0291 11.0409 14.9764 11.0528 14.9253C11.0662 14.8677 11.0935 14.813 11.1482 14.7036L11.6897 13.6206C11.7997 13.4005 11.8547 13.2905 11.9395 13.2222C12.0141 13.162 12.1046 13.1246 12.1999 13.1143C12.3081 13.1027 12.4248 13.1416 12.6582 13.2194L13.5 13.5ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="black" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>