Small font change

Client/src/Pages/Monitors/Details/index.css

@@ -6,8 +6,7 @@
 .monitor-details h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
 }
-.monitor-details h2.MuiTypography-root,
-.monitor-details h4.MuiTypography-root {
+.monitor-details h2.MuiTypography-root{
   font-weight: 600;
 }
 .monitor-details h2.MuiTypography-root,
@@ -45,11 +44,10 @@
   font-size: var(--env-var-font-size-medium-plus);
 }
 .monitor-details h6.MuiTypography-root span.MuiTypography-root {
-  text-transform: none;
   font-style: italic;
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-5);
-  opacity: 0.8;
+  opacity: 0.7;
 }
 .monitor-details button.MuiButtonBase-root,
 .monitor-details .stat-box {

Client/src/Pages/Monitors/Details/index.jsx

@@ -22,14 +22,12 @@ import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails6
 const StatBox = ({ title, value }) => {
   return (
     <Box className="stat-box">
-      <Typography
-        variant="h6"
-        mb="5px"
-        sx={{ fontWeight: 500, textTransform: "uppercase" }}
-      >
+      <Typography variant="h6" mb={1} fontWeight={500}>
         {title}
       </Typography>
-      <Typography variant="h4">{value}</Typography>
+      <Typography variant="h4" fontWeight={500}>
+        {value}
+      </Typography>
     </Box>
   );
 };
@@ -180,7 +178,7 @@ const DetailsPage = () => {
               },
             }}
           />
-          <Stack gap={theme.gap.xl}>
+          <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
             <Stack
               direction="row"
               gap={theme.gap.small}
@@ -259,7 +257,7 @@ const DetailsPage = () => {
               <StatBox
                 title={
                   <>
-                    Avg Response Time{" "}
+                    Avg. Response Time{" "}
                     <Typography component="span">(24-hr)</Typography>
                   </>
                 }