diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 6b809433d..baebca18d 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -5,8 +5,6 @@ import { useEffect, useState } from "react";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material";
-import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
-import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import { monitorValidation } from "../../../Validation/validation";
 import Select from "../../../Components/Inputs/Select";
@@ -229,8 +227,34 @@ const Configure = () => {
             gap={theme.gap.large}
             flex={1}
           >
-            <Stack direction="row" gap={theme.gap.small}>
-              {monitor?.status ? <GreenCheck /> : <RedCheck />}
+            <Stack direction="row" gap={theme.gap.xs}>
+              <Stack
+                width={theme.gap.large}
+                height={theme.gap.large}
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Box
+                  width="14px"
+                  height="14px"
+                  sx={{
+                    position: "relative",
+                    backgroundColor: monitor?.status
+                      ? theme.label.up.dotColor
+                      : theme.label.down.dotColor,
+                    borderRadius: "50%",
+                    "&::before": {
+                      content: `""`,
+                      position: "absolute",
+                      width: "100%",
+                      height: "100%",
+                      backgroundColor: "inherit",
+                      borderRadius: "50%",
+                      animation: "ripple 1.8s ease-out infinite",
+                    },
+                  }}
+                />
+              </Stack>
               <Box>
                 {parsedUrl?.host ? (
                   <Typography component="h1" mb={theme.gap.xs} lineHeight={1}>
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 4c0807ecb..cdbacb521 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -7,8 +7,6 @@ import { networkService } from "../../../main";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "../../../Components/Button";
-import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
-import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import PaginationTable from "./PaginationTable";
 import {
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index bc759db17..ad1212e65 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -168,8 +168,34 @@ const PageSpeedConfigure = () => {
             flex={1}
             gap={theme.gap.large}
           >
-            <Stack direction="row" gap={theme.gap.small}>
-              {monitor?.status ? <GreenCheck /> : <RedCheck />}
+            <Stack direction="row" gap={theme.gap.xs}>
+              <Stack
+                width={theme.gap.large}
+                height={theme.gap.large}
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Box
+                  width="14px"
+                  height="14px"
+                  sx={{
+                    position: "relative",
+                    backgroundColor: monitor?.status
+                      ? theme.label.up.dotColor
+                      : theme.label.down.dotColor,
+                    borderRadius: "50%",
+                    "&::before": {
+                      content: `""`,
+                      position: "absolute",
+                      width: "100%",
+                      height: "100%",
+                      backgroundColor: "inherit",
+                      borderRadius: "50%",
+                      animation: "ripple 1.8s ease-out infinite",
+                    },
+                  }}
+                />
+              </Stack>
               <Box>
                 <Typography
                   component="h1"
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 41f5892f2..6bb0270ad 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import { Box, Skeleton, Stack, Typography } from "@mui/material";
 import { PieChart } from "@mui/x-charts/PieChart";
 import { useDrawingArea } from "@mui/x-charts";
@@ -9,19 +10,16 @@ import {
   formatDuration,
   formatDurationRounded,
 } from "../../../Utils/timeUtils";
+import { logger } from "../../../Utils/Logger";
 import { networkService } from "../../../main";
 import Button from "../../../Components/Button";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react";
 import ClockIcon from "../../../assets/icons/maintenance.svg?react";
 import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react";
-import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
-import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
-import PropTypes from "prop-types";
-import { logger } from "../../../Utils/Logger";
 
 const StatBox = ({ icon, title, value }) => {
   const theme = useTheme();
@@ -325,8 +323,34 @@ const PageSpeedDetails = () => {
               { name: "details", path: `/pagespeed/${monitorId}` },
             ]}
           />
-          <Stack direction="row" gap={theme.gap.small}>
-            {monitor?.status ? <GreenCheck /> : <RedCheck />}
+          <Stack direction="row" gap={theme.gap.xs}>
+            <Stack
+              width={theme.gap.large}
+              height={theme.gap.large}
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Box
+                width="14px"
+                height="14px"
+                sx={{
+                  position: "relative",
+                  backgroundColor: monitor?.status
+                    ? theme.label.up.dotColor
+                    : theme.label.down.dotColor,
+                  borderRadius: "50%",
+                  "&::before": {
+                    content: `""`,
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: "inherit",
+                    borderRadius: "50%",
+                    animation: "ripple 1.8s ease-out infinite",
+                  },
+                }}
+              />
+            </Stack>
             <Box>
               <Typography
                 component="h1"