From 4fd6465ae2fe59e46d95ed05e9c12ae2c0ec0de3 Mon Sep 17 00:00:00 2001
From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com>
Date: Tue, 23 Jul 2024 05:31:15 -0400
Subject: [PATCH 01/17] Add screenshot, fix wording

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 16d5232c9..812dc13f0 100644
--- a/README.md
+++ b/README.md
@@ -8,9 +8,12 @@
 
 ![]()
 
+![bluewave-uptime-screenshot](https://github.com/user-attachments/assets/765bf060-e734-45e6-bd00-2a2eb37c9c02)
+
+
 # BlueWave Uptime
 
-BlueWave Uptime is an open source server monitoring application. It is used to track the operational status and performance of servers and websites. It regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
+BlueWave Uptime is an open source server monitoring application used to track the operational status and performance of servers and websites. It regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
 
 ## Contributing
 

From 838018741e78d3e02ea99c338192abaf07cf2874 Mon Sep 17 00:00:00 2001
From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com>
Date: Wed, 24 Jul 2024 06:04:28 -0400
Subject: [PATCH 02/17] Update README.md

---
 README.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 812dc13f0..be4705986 100644
--- a/README.md
+++ b/README.md
@@ -6,13 +6,16 @@
 ![](https://img.shields.io/github/issues-pr/bluewave-labs/bluewave-uptime)
 ![](https://img.shields.io/github/issues/bluewave-labs/bluewave-uptime)
 
-![]()
+
+<h1 align="center"><a href="https://bluewavelabs.ca" target="_blank">BlueWave Uptime</a></h1>
+
+<p align="center"><strong>An open source server monitoring application</strong></p>
+
+
 
 ![bluewave-uptime-screenshot](https://github.com/user-attachments/assets/765bf060-e734-45e6-bd00-2a2eb37c9c02)
 
 
-# BlueWave Uptime
-
 BlueWave Uptime is an open source server monitoring application used to track the operational status and performance of servers and websites. It regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
 
 ## Contributing

From 879ff4c558a4944977fcd7cfb9680eef42954d49 Mon Sep 17 00:00:00 2001
From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com>
Date: Sun, 28 Jul 2024 17:34:23 -0400
Subject: [PATCH 03/17] Update README.md

---
 README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/README.md b/README.md
index be4705986..b0d0ee597 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,24 @@
 
 BlueWave Uptime is an open source server monitoring application used to track the operational status and performance of servers and websites. It regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
 
+## Features
+
+* Completely open source, deployable on your servers
+* Website monitoring
+* Port monitoring
+* Ping monitoring
+* Incidents at a glance
+* Status pages
+* Page speed monitoring (in the works)
+* 3rd party integrations (todo)
+
+## Tech stack
+
+* ReactJs
+* MUI (React framework)
+* Node.js
+* MongoDB
+
 ## Contributing
 
 You are welcome to provide contributions to the project. It uses React on the FE, and Nodejs and MongoDB on the BE, hence if you are comfortable with working with those technologies, you are encouraged to send your PRs. Please read [Contributor's guideline](https://github.com/bluewave-labs/bluewave-uptime/blob/master/CONTRIBUTING.md). Once you start contributing, we can also add you to our weekly team calls (every Thursday).

From 344e0e624f6ffc50799710b5cc7ecc3b445f7629 Mon Sep 17 00:00:00 2001
From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com>
Date: Sun, 28 Jul 2024 17:36:54 -0400
Subject: [PATCH 04/17] Update README.md

---
 README.md | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index b0d0ee597..0fbf584f4 100644
--- a/README.md
+++ b/README.md
@@ -27,14 +27,18 @@ BlueWave Uptime is an open source server monitoring application used to track th
 * Incidents at a glance
 * Status pages
 * Page speed monitoring (in the works)
-* 3rd party integrations (todo)
+
+**Roadmap:**
+* 3rd party integrations
+* Domain monitoring
+* SSL monitoring
 
 ## Tech stack
 
-* ReactJs
-* MUI (React framework)
-* Node.js
-* MongoDB
+* [ReactJs](https://react.dev/)
+* [MUI (React framework)](https://mui.com/)
+* [Node.js](https://nodejs.org/en)
+* [MongoDB](https://mongodb.com)
 
 ## Contributing
 

From 52fcdb0aedbfc8f4d6150e8c34ee4165324cef7a Mon Sep 17 00:00:00 2001
From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com>
Date: Sun, 28 Jul 2024 18:12:38 -0400
Subject: [PATCH 05/17] Add repo contribution chart (repobeats), better
 contribution wording

---
 README.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 0fbf584f4..a4c0f1296 100644
--- a/README.md
+++ b/README.md
@@ -42,14 +42,21 @@ BlueWave Uptime is an open source server monitoring application used to track th
 
 ## Contributing
 
-You are welcome to provide contributions to the project. It uses React on the FE, and Nodejs and MongoDB on the BE, hence if you are comfortable with working with those technologies, you are encouraged to send your PRs. Please read [Contributor's guideline](https://github.com/bluewave-labs/bluewave-uptime/blob/master/CONTRIBUTING.md). Once you start contributing, we can also add you to our weekly team calls (every Thursday).
+We love contributors. Here's how you can contribute:
 
-Note that We have a Figma file that includes:
+* Check [Contributor's guideline](https://github.com/bluewave-labs/bluewave-uptime/blob/master/CONTRIBUTING.md).
+* Have a look at our Figma designs [here](https://www.figma.com/design/RPSfaw66HjzSwzntKcgDUV/Uptime-Genie?node-id=0-1&t=WqOFv9jqNTFGItpL-1). We encourage you to copy to your own Figma page, then work on it as it is read-only.
+* Open an issue if you believe you've encountered a bug
+* Make a pull request to add new features/make quality-of-life improvements/fix bugs.
 
-- All the dashboard elements and components
-- The design guideline for the app
+<a href="https://github.com/bluewave-labs/bluewave-uptime/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=bluewave-labs/bluewave-uptime" />
+</a>
+
+Made with [contrib.rocks](https://contrib.rocks).
+
+![Alt](https://repobeats.axiom.co/api/embed/050f9ecd32cfe5c37a5ba119647a68eee69493d4.svg "Repobeats analytics image")
 
-You can see the designs [here](https://www.figma.com/design/RPSfaw66HjzSwzntKcgDUV/Uptime-Genie?node-id=0-1&t=WqOFv9jqNTFGItpL-1). Since it is read-only, we encourage you to copy to your own Figma page, then work on it.
 
 ## Getting Started
 
@@ -1970,10 +1977,3 @@ const myRoute = async(req, res, next) => {
 
 Errors should not be handled at the controller level and should be left to the middleware to handle.
 
-## Contributors
-
-<a href="https://github.com/bluewave-labs/bluewave-uptime/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=bluewave-labs/bluewave-uptime" />
-</a>
-
-Made with [contrib.rocks](https://contrib.rocks).

From 6ac70a570cbdc1ee0f2d5fc9fcb4be363902b922 Mon Sep 17 00:00:00 2001
From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com>
Date: Sun, 28 Jul 2024 19:42:19 -0400
Subject: [PATCH 06/17] Show develop branch stats

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a4c0f1296..8a94c72d4 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ We love contributors. Here's how you can contribute:
 
 Made with [contrib.rocks](https://contrib.rocks).
 
-![Alt](https://repobeats.axiom.co/api/embed/050f9ecd32cfe5c37a5ba119647a68eee69493d4.svg "Repobeats analytics image")
+![Alt](https://repobeats.axiom.co/api/embed/c35d999c82dbb31e967427ea4166c14da4172e73.svg "Repobeats analytics image")
 
 
 ## Getting Started

From 7e8c81c18afb820546afbfb1dbec71c944a45e87 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 11:27:15 -0700
Subject: [PATCH 07/17] Updated coderabbit.yaml

---
 .coderabbit.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.coderabbit.yaml b/.coderabbit.yaml
index 873db5cfe..fa3f25484 100644
--- a/.coderabbit.yaml
+++ b/.coderabbit.yaml
@@ -2,11 +2,11 @@ language: "en-CA"
 tone_instructions: "His palms are sweaty, knees weak, arms are heavy There’s vomit on his sweater already, mom’s spaghetti"
 early_access: false
 reviews:
-  profile: "assertive"
+  profile: "chill"
   request_changes_workflow: false
   high_level_summary: false
   poem: false
-  review_status: true
+  review_status: false
   auto_review:
     enabled: true
     drafts: false

From dd834fc2c55df1ea0c95e1d81155f707b1d3bf1a Mon Sep 17 00:00:00 2001
From: Daniel C <122758391+danielcj2@users.noreply.github.com>
Date: Tue, 30 Jul 2024 16:09:46 -0400
Subject: [PATCH 08/17] Removed box shadow and fixed button width (#491)

---
 Client/src/Components/Button/index.jsx        | 5 +++++
 Client/src/Components/ButtonSpinner/index.jsx | 5 +++++
 Client/src/Pages/Monitors/Configure/index.jsx | 9 ++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index c53ece09e..5b4953f5e 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -60,10 +60,15 @@ const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
       onClick={onClick}
       disableRipple
       sx={{
+        boxShadow: "none",
         textTransform: "none",
         "&:focus": {
           outline: "none",
         },
+        "&:hover": {
+          boxShadow: "none",
+          transition: "none"
+        },
         ...sx,
       }}
     >
diff --git a/Client/src/Components/ButtonSpinner/index.jsx b/Client/src/Components/ButtonSpinner/index.jsx
index 2d940c539..62cfae477 100644
--- a/Client/src/Components/ButtonSpinner/index.jsx
+++ b/Client/src/Components/ButtonSpinner/index.jsx
@@ -72,10 +72,15 @@ const ButtonSpinner = ({
       loading={isLoading}
       disableRipple
       sx={{
+        boxShadow: "none",
         textTransform: "none",
         "&:focus": {
           outline: "none",
         },
+        "&:hover": {
+          boxShadow: "none",
+          transition: "none"
+        },
         ...sx,
       }}
     >
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 2f694c07c..ebdb61ab2 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -268,7 +268,14 @@ const Configure = () => {
           </Stack>
         </Stack>
         <Stack direction="row" justifyContent="flex-end">
-          <Button level="primary" label="Save" sx={{ px: theme.gap.ml }} />
+          <Button
+            type="submit"
+            level="primary"
+            label="Save"
+            sx={{
+              minWidth: "80px",
+            }}
+          />
         </Stack>
       </form>
     </Box>

From a7c93aee3935e7971bd6f54d52fdffbd65b37312 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:19:37 -0700
Subject: [PATCH 09/17] Add DB operations for notifications

---
 Server/db/mongo/modules/notificationModule.js | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 Server/db/mongo/modules/notificationModule.js

diff --git a/Server/db/mongo/modules/notificationModule.js b/Server/db/mongo/modules/notificationModule.js
new file mode 100644
index 000000000..7ed2d2064
--- /dev/null
+++ b/Server/db/mongo/modules/notificationModule.js
@@ -0,0 +1,41 @@
+const Notification = require("../../../models/Notification");
+const Notification = require("../../../models/Notification");
+
+/**
+ * Creates a new notification.
+ * @param {Object} notificationData - The data for the new notification.
+ * @param {mongoose.Types.ObjectId} notificationData.monitorId - The ID of the monitor.
+ * @param {string} notificationData.type - The type of the notification (e.g., "email", "sms").
+ * @param {string} [notificationData.address] - The address for the notification (if applicable).
+ * @param {string} [notificationData.phone] - The phone number for the notification (if applicable).
+ * @returns {Promise<Object>} The created notification.
+ * @throws Will throw an error if the notification cannot be created.
+ */
+const createNotification = async (notificationData) => {
+  try {
+    const notification = await new Notification({ ...notificationData }).save();
+    return notification;
+  } catch (error) {
+    throw error;
+  }
+};
+
+/**
+ * Retrieves notifications by monitor ID.
+ * @param {mongoose.Types.ObjectId} monitorId - The ID of the monitor.
+ * @returns {Promise<Array<Object>>} An array of notifications.
+ * @throws Will throw an error if the notifications cannot be retrieved.
+ */
+const getNotificationsByMonitorId = async (monitorId) => {
+  try {
+    const notifications = await Notification.find({ monitorId });
+    return notifications;
+  } catch (error) {
+    throw error;
+  }
+};
+
+module.exports = {
+  createNotification,
+  getNotificationsByMonitorId,
+};

From 03ee67cfca51a680fcc7ff741872d59729d7ffc4 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:23:14 -0700
Subject: [PATCH 10/17] Add methods to MongoDB

---
 Server/controllers/monitorController.js | 1 +
 Server/db/mongo/MongoDB.js              | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index 5e3899005..c22bf50c3 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -158,6 +158,7 @@ const deleteMonitor = async (req, res, next) => {
     await req.jobQueue.deleteJob(monitor);
     await req.db.deleteChecks(monitor._id);
     await req.db.deleteAlertByMonitorId(monitor._id);
+    await req.db.deleteNotificationByMonitorId(monitor._id);
     /**
      * TODO
      * We should remove all checks and alerts associated with this monitor
diff --git a/Server/db/mongo/MongoDB.js b/Server/db/mongo/MongoDB.js
index de2b3466e..c03e2db1a 100644
--- a/Server/db/mongo/MongoDB.js
+++ b/Server/db/mongo/MongoDB.js
@@ -120,6 +120,11 @@ const {
   deleteMaintenanceWindowByUserId,
 } = require("./modules/maintenaceWindowModule");
 
+const {
+  createNotification,
+  getNotificationsByMonitorId,
+} = require("./modules/notificationModule");
+
 module.exports = {
   connect,
   insertUser,
@@ -162,4 +167,6 @@ module.exports = {
   deleteMaintenaceWindowById,
   deleteMaintenanceWindowByMonitorId,
   deleteMaintenanceWindowByUserId,
+  createNotification,
+  getNotificationsByMonitorId,
 };

From 1664bc09eaa9e99b6c5a889a348bdccf05505f6b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:25:56 -0700
Subject: [PATCH 11/17] Add delete method

---
 Server/db/mongo/MongoDB.js                    |  6 ++----
 Server/db/mongo/modules/notificationModule.js | 11 ++++++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/Server/db/mongo/MongoDB.js b/Server/db/mongo/MongoDB.js
index c03e2db1a..2813a3c00 100644
--- a/Server/db/mongo/MongoDB.js
+++ b/Server/db/mongo/MongoDB.js
@@ -65,8 +65,6 @@ const {
   getAllMonitors,
   getMonitorById,
   getMonitorsByUserId,
-  getMonitorByIdForIncidents,
-  getMonitorsByUserIdForIncidents,
   createMonitor,
   deleteMonitor,
   deleteAllMonitors,
@@ -123,6 +121,7 @@ const {
 const {
   createNotification,
   getNotificationsByMonitorId,
+  deleteNotificationsByMonitorId,
 } = require("./modules/notificationModule");
 
 module.exports = {
@@ -141,8 +140,6 @@ module.exports = {
   getAllMonitors,
   getMonitorById,
   getMonitorsByUserId,
-  getMonitorByIdForIncidents,
-  getMonitorsByUserIdForIncidents,
   createMonitor,
   deleteMonitor,
   deleteAllMonitors,
@@ -169,4 +166,5 @@ module.exports = {
   deleteMaintenanceWindowByUserId,
   createNotification,
   getNotificationsByMonitorId,
+  deleteNotificationsByMonitorId,
 };
diff --git a/Server/db/mongo/modules/notificationModule.js b/Server/db/mongo/modules/notificationModule.js
index 7ed2d2064..f5c8708f4 100644
--- a/Server/db/mongo/modules/notificationModule.js
+++ b/Server/db/mongo/modules/notificationModule.js
@@ -1,5 +1,4 @@
 const Notification = require("../../../models/Notification");
-const Notification = require("../../../models/Notification");
 
 /**
  * Creates a new notification.
@@ -35,7 +34,17 @@ const getNotificationsByMonitorId = async (monitorId) => {
   }
 };
 
+const deleteNotificationsByMonitorId = async (monitorId) => {
+  try {
+    const result = await Notification.deleteMany({ monitorId });
+    return result.deletedCount;
+  } catch (error) {
+    throw error;
+  }
+};
+
 module.exports = {
   createNotification,
   getNotificationsByMonitorId,
+  deleteNotificationsByMonitorId,
 };

From 8220fdce948b06de5696f9408ed717bce12a496c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:36:53 -0700
Subject: [PATCH 12/17] Add better error handling

---
 Server/controllers/monitorController.js | 33 ++++++++++++++++++-------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index c22bf50c3..0b5523c8a 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -9,7 +9,6 @@ const {
 
 const SERVICE_NAME = "monitorController";
 const { errorMessages, successMessages } = require("../utils/messages");
-const { error } = require("winston");
 
 /**
  * Returns all monitors
@@ -47,7 +46,8 @@ const getMonitorById = async (req, res, next) => {
     await getMonitorByIdQueryValidation.validateAsync(req.query);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
     return;
   }
@@ -83,6 +83,16 @@ const getMonitorsByUserId = async (req, res, next) => {
   try {
     await getMonitorsByUserIdValidation.validateAsync(req.params);
     await getMonitorsByUserIdQueryValidation.validateAsync(req.query);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+
+  try {
     const userId = req.params.userId;
     const monitors = await req.db.getMonitorsByUserId(req, res);
 
@@ -112,7 +122,9 @@ const createMonitor = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+
     next(error);
     return;
   }
@@ -143,22 +155,24 @@ const createMonitor = async (req, res, next) => {
 
 const deleteMonitor = async (req, res, next) => {
   try {
-    await getMonitorByIdValidation.validateAsync(req.params);
+    await getMonitorByIdParamValidation.validateAsync(req.params);
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
     return;
   }
 
   try {
     const monitor = await req.db.deleteMonitor(req, res, next);
-    // Delete associated checks and alerts
+    // Delete associated checks,alerts,and notifications
     await req.jobQueue.deleteJob(monitor);
     await req.db.deleteChecks(monitor._id);
     await req.db.deleteAlertByMonitorId(monitor._id);
-    await req.db.deleteNotificationByMonitorId(monitor._id);
+    await req.db.deleteNotificationsByMonitorId(monitor._id);
+
     /**
      * TODO
      * We should remove all checks and alerts associated with this monitor
@@ -196,12 +210,13 @@ const deleteAllMonitors = async (req, res) => {
  */
 const editMonitor = async (req, res, next) => {
   try {
-    await getMonitorByIdValidation.validateAsync(req.params);
+    await getMonitorByIdParamValidation.validateAsync(req.params);
     await editMonitorBodyValidation.validateAsync(req.body);
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
     return;
   }

From 5a1aaf5132b20d857a9f5d4ca5307fb847850090 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:54:30 -0700
Subject: [PATCH 13/17] AuthController error handling, cleanup

---
 Server/controllers/alertController.js |  18 +++--
 Server/controllers/authController.js  | 112 ++++++++++++++++++++------
 2 files changed, 98 insertions(+), 32 deletions(-)

diff --git a/Server/controllers/alertController.js b/Server/controllers/alertController.js
index cd2fa01ac..93d165469 100644
--- a/Server/controllers/alertController.js
+++ b/Server/controllers/alertController.js
@@ -27,7 +27,8 @@ const createAlert = async (req, res, next) => {
     await createAlertBodyValidation.validateAsync(req.body);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
@@ -58,7 +59,8 @@ const getAlertsByUserId = async (req, res, next) => {
     await getAlertsByUserIdParamValidation.validateAsync(req.params);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
@@ -82,7 +84,8 @@ const getAlertsByMonitorId = async (req, res, next) => {
     await getAlertsByMonitorIdParamValidation.validateAsync(req.params);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
@@ -106,7 +109,8 @@ const getAlertById = async (req, res, next) => {
     await getAlertByIdParamValidation.validateAsync(req.params);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
@@ -132,7 +136,8 @@ const editAlert = async (req, res, next) => {
   } catch (error) {
     console.log(error);
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
@@ -156,7 +161,8 @@ const deleteAlert = async (req, res, next) => {
     await deleteAlertParamValidation.validateAsync(req.params);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js
index 88a7c7f71..6d3e757a5 100644
--- a/Server/controllers/authController.js
+++ b/Server/controllers/authController.js
@@ -54,7 +54,8 @@ const registerController = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
     return;
   }
@@ -115,14 +116,20 @@ const registerController = async (req, res, next) => {
  */
 const loginController = async (req, res, next) => {
   try {
-    // Validate input
     await loginValidation.validateAsync(req.body);
-
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+  try {
     // Check if user exists
     const user = await req.db.getUserByEmail(req, res);
 
     // Compare password
-
     const match = await user.comparePassword(req.body.password);
     if (match !== true) {
       throw new Error(errorMessages.AUTH_INCORRECT_PASSWORD);
@@ -157,7 +164,8 @@ const userEditController = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
     return;
   }
@@ -216,8 +224,18 @@ const inviteController = async (req, res, next) => {
     // Only admins can invite
     const token = getTokenFromHeaders(req.headers);
     const { role, firstname } = jwt.decode(token);
-    await inviteRoleValidation.validateAsync({ roles: role });
-    await inviteBodyValidation.validateAsync(req.body);
+    try {
+      await inviteRoleValidation.validateAsync({ roles: role });
+      await inviteBodyValidation.validateAsync(req.body);
+    } catch (error) {
+      error.status = 422;
+      error.service = SERVICE_NAME;
+      error.message =
+        error.details?.[0]?.message || error.message || "Validation Error";
+      next(error);
+      return;
+    }
+
     const inviteToken = await req.db.requestInviteToken(req, res);
     req.emailService.buildAndSendEmail(
       "employeeActivationTemplate",
@@ -242,6 +260,16 @@ const inviteController = async (req, res, next) => {
 const inviteVerifyController = async (req, res, next) => {
   try {
     await inviteVerifciationBodyValidation.validateAsync(req.body);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+
+  try {
     const invite = await req.db.getInviteToken(req, res);
 
     res
@@ -289,6 +317,16 @@ const checkAdminController = async (req, res) => {
 const recoveryRequestController = async (req, res, next) => {
   try {
     await recoveryValidation.validateAsync(req.body);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+
+  try {
     const user = await req.db.getUserByEmail(req, res);
     if (user) {
       const recoveryToken = await req.db.requestRecoveryToken(req, res);
@@ -328,6 +366,16 @@ const recoveryRequestController = async (req, res, next) => {
 const validateRecoveryTokenController = async (req, res, next) => {
   try {
     await recoveryTokenValidation.validateAsync(req.body);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+
+  try {
     await req.db.validateRecoveryToken(req, res);
     // TODO Redirect user to reset password after validating token
     return res.status(200).json({
@@ -354,6 +402,15 @@ const validateRecoveryTokenController = async (req, res, next) => {
 const resetPasswordController = async (req, res, next) => {
   try {
     await newPasswordValidation.validateAsync(req.body);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+  try {
     const user = await req.db.resetPassword(req, res);
     const token = issueToken(user._doc);
     res.status(200).json({
@@ -392,9 +449,18 @@ const deleteUserController = async (req, res, next) => {
     };
 
     // Validate user
-    await deleteUserParamValidation.validateAsync(
-      decodedTokenCastedAsRequest.body
-    );
+    try {
+      await deleteUserParamValidation.validateAsync(
+        decodedTokenCastedAsRequest.body
+      );
+    } catch (error) {
+      error.status = 422;
+      error.service = SERVICE_NAME;
+      error.message =
+        error.details?.[0]?.message || error.message || "Validation Error";
+      next(error);
+      return;
+    }
 
     // Check if the user exists
     const user = await req.db.getUserByEmail(decodedTokenCastedAsRequest);
@@ -408,25 +474,19 @@ const deleteUserController = async (req, res, next) => {
     );
 
     if (monitors) {
-      // 2. Delete jobs associated with each monitor
-      for (const monitor of monitors) {
-        await req.jobQueue.deleteJob(monitor);
-      }
+      //2.  Remove all jobs, delete checks and alerts
+      await Promise.all(
+        monitors.map(async (monitor) => {
+          await req.jobQueue.deleteJob(monitor);
+          await req.db.deleteChecks(monitor._id);
+          await req.db.deleteAlertByMonitorId(monitor._id);
+        })
+      );
 
-      // 3. Delete all checks associated with each monitor
-      for (const monitor of monitors) {
-        await req.db.deleteChecks(monitor._id);
-      }
-
-      // 4. Delete all alerts associated with each monitor
-      for (const monitor of monitors) {
-        await req.db.deleteAlertByMonitorId(monitor._id);
-      }
-
-      // 5. Delete each monitor
+      // 3. Delete each monitor
       await req.db.deleteMonitorsByUserId(user._id);
 
-      // 6. Delete the user by id
+      // 4. Delete the user by id
       await req.db.deleteUser(decodedTokenCastedAsRequest);
 
       return res.status(200).json({

From abf0b5856b7c11f5fdc1ef467f0a3c60bb3957f8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:55:22 -0700
Subject: [PATCH 14/17] CheckController error handling

---
 Server/controllers/checkController.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/Server/controllers/checkController.js b/Server/controllers/checkController.js
index 391ae2700..3379f5d17 100644
--- a/Server/controllers/checkController.js
+++ b/Server/controllers/checkController.js
@@ -14,9 +14,9 @@ const createCheck = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
-    return;
   }
 
   try {
@@ -37,9 +37,9 @@ const getChecks = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
-    return;
   }
 
   try {
@@ -59,20 +59,18 @@ const deleteChecks = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
-    return;
   }
 
   try {
     const deletedCount = await req.db.deleteChecks(req.params.monitorId);
-    return res
-      .status(200)
-      .json({
-        success: true,
-        msg: successMessages.CHECK_DELETE,
-        data: { deletedCount },
-      });
+    return res.status(200).json({
+      success: true,
+      msg: successMessages.CHECK_DELETE,
+      data: { deletedCount },
+    });
   } catch (error) {
     error.service = SERVICE_NAME;
     next(error);

From c478298631083bf5c1f8cea96dbd7ec42a7dd0a8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:56:38 -0700
Subject: [PATCH 15/17] MaintenanceWindowController error handling

---
 .../maintenanceWindowController.js            | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/Server/controllers/maintenanceWindowController.js b/Server/controllers/maintenanceWindowController.js
index d94746fe3..41b160fe2 100644
--- a/Server/controllers/maintenanceWindowController.js
+++ b/Server/controllers/maintenanceWindowController.js
@@ -15,9 +15,9 @@ const createMaintenanceWindow = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
-    return;
   }
 
   try {
@@ -48,7 +48,14 @@ const getMaintenanceWindowsByUserId = async (req, res, next) => {
     await getMaintenanceWindowsByUserIdParamValidation.validateAsync(
       req.params
     );
-
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+  }
+  try {
     const maintenanceWindows = await req.db.getMaintenanceWindowsByUserId(
       req.params.userId
     );
@@ -69,7 +76,15 @@ const getMaintenanceWindowsByMonitorId = async (req, res, next) => {
     await getMaintenanceWindowsByMonitorIdParamValidation.validateAsync(
       req.params
     );
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+  }
 
+  try {
     const maintenanceWindows = await req.db.getMaintenanceWindowsByMonitorId(
       req.params.monitorId
     );

From aaa63a81cdb492f3f4600cb3ada55726c242eda3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 14:00:19 -0700
Subject: [PATCH 16/17] MaintenanceWindowController error handling

---
 Server/controllers/checkController.js         |  3 ++
 .../maintenanceWindowController.js            |  3 ++
 .../controllers/pageSpeedCheckController.js   | 42 ++++++++++++-------
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/Server/controllers/checkController.js b/Server/controllers/checkController.js
index 3379f5d17..f3c85352f 100644
--- a/Server/controllers/checkController.js
+++ b/Server/controllers/checkController.js
@@ -17,6 +17,7 @@ const createCheck = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
 
   try {
@@ -40,6 +41,7 @@ const getChecks = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
 
   try {
@@ -62,6 +64,7 @@ const deleteChecks = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
 
   try {
diff --git a/Server/controllers/maintenanceWindowController.js b/Server/controllers/maintenanceWindowController.js
index 41b160fe2..5fe8ab7db 100644
--- a/Server/controllers/maintenanceWindowController.js
+++ b/Server/controllers/maintenanceWindowController.js
@@ -18,6 +18,7 @@ const createMaintenanceWindow = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
 
   try {
@@ -54,6 +55,7 @@ const getMaintenanceWindowsByUserId = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
   try {
     const maintenanceWindows = await req.db.getMaintenanceWindowsByUserId(
@@ -82,6 +84,7 @@ const getMaintenanceWindowsByMonitorId = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
 
   try {
diff --git a/Server/controllers/pageSpeedCheckController.js b/Server/controllers/pageSpeedCheckController.js
index 7cc8696fc..eb290ad6e 100644
--- a/Server/controllers/pageSpeedCheckController.js
+++ b/Server/controllers/pageSpeedCheckController.js
@@ -1,4 +1,3 @@
-const PageSpeedCheck = require("../models/PageSpeedCheck");
 const PageSpeedService = require("../service/pageSpeedService");
 const { successMessages } = require("../utils/messages");
 const pageSpeedService = new PageSpeedService();
@@ -22,12 +21,19 @@ const getPageSpeedChecks = async (req, res, next) => {
   try {
     // Validate monitorId parameter
     await getPageSpeedCheckParamValidation.validateAsync(req.params);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
 
+  try {
     return res.status(200).json({ msg: "Hit getPageSpeedChecks" });
   } catch (error) {
-    if (error.isJoi) {
-      return res.status(400).json({ error: error.details[0].message });
-    }
+    error.service = SERVICE_NAME;
     next(error);
   }
 };
@@ -42,12 +48,18 @@ const getPageSpeedChecks = async (req, res, next) => {
  */
 const createPageSpeedCheck = async (req, res, next) => {
   try {
-    // Validate monitorId parameter
     await createPageSpeedCheckParamValidation.validateAsync(req.params);
-
-    // Validate request body
     await createPageSpeedCheckBodyValidation.validateAsync(req.body);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
 
+  try {
     const { monitorId } = req.params;
     const { url } = req.body;
 
@@ -74,9 +86,6 @@ const createPageSpeedCheck = async (req, res, next) => {
       data: newPageSpeedCheck,
     });
   } catch (error) {
-    if (error.isJoi) {
-      return res.status(400).json({ error: error.details[0].message });
-    }
     error.service = SERVICE_NAME;
     next(error);
   }
@@ -94,12 +103,17 @@ const deletePageSpeedCheck = async (req, res, next) => {
   try {
     // Validate monitorId parameter
     await deletePageSpeedCheckParamValidation.validateAsync(req.params);
-
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+  try {
     return res.status(200).json({ msg: "Hit deletePageSpeedCheck" });
   } catch (error) {
-    if (error.isJoi) {
-      return res.status(400).json({ error: error.details[0].message });
-    }
     error.service = SERVICE_NAME;
     next(error);
   }

From a0f54c191e58f3db6b1dae0c47813b8e5272eab3 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 30 Jul 2024 19:36:37 -0400
Subject: [PATCH 17/17] Added some basic button svg animations

---
 Client/src/Components/Button/index.css        | 33 +++++++++++++++++++
 Client/src/Components/Button/index.jsx        | 18 ++++++++--
 Client/src/Pages/Monitors/Configure/index.css |  3 +-
 Client/src/Pages/Monitors/Configure/index.jsx |  7 ++--
 .../Pages/Monitors/CreateMonitor/index.css    |  1 +
 .../Pages/Monitors/CreateMonitor/index.jsx    |  4 ++-
 Client/src/Pages/Monitors/Details/index.css   |  9 +++--
 Client/src/Pages/Monitors/Details/index.jsx   | 24 ++++++++++----
 8 files changed, 84 insertions(+), 15 deletions(-)

diff --git a/Client/src/Components/Button/index.css b/Client/src/Components/Button/index.css
index e69de29bb..63791d46b 100644
--- a/Client/src/Components/Button/index.css
+++ b/Client/src/Components/Button/index.css
@@ -0,0 +1,33 @@
+.MuiButtonBase-root.button-rotate90 svg {
+  transition: transform 500ms ease;
+}
+.MuiButtonBase-root.button-rotate90:hover svg {
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+
+.MuiButtonBase-root.button-rotate180 svg {
+  transition: transform 700ms ease;
+}
+.MuiButtonBase-root.button-rotate180:hover svg {
+  transform: rotate(180deg);
+  transform-origin: center;
+}
+
+.MuiButtonBase-root.button-slideLeft {
+  padding-left: 45px;
+}
+.MuiButtonBase-root.button-slideLeft svg {
+  position: absolute;
+  left: 15px;
+  transition: left 250ms cubic-bezier(0.65, 0, 0.076, 1);
+}
+.MuiButtonBase-root.button-slideLeft:hover svg {
+  left: 11px;
+}
+
+.MuiButtonBase-root.button-slideLeft:hover,
+.MuiButtonBase-root.button-rotate180:hover,
+.MuiButtonBase-root.button-rotate90:hover {
+  background-color: rgba(71, 84, 103, 0.08);
+}
diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index 5b4953f5e..9078e2497 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -1,5 +1,6 @@
 import { Button as MuiButton } from "@mui/material";
 import PropTypes from "prop-types";
+import "./index.css";
 
 const levelConfig = {
   primary: {
@@ -48,11 +49,22 @@ const levelConfig = {
  * <Button type="submit" level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
  */
 
-const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
+const Button = ({
+  id,
+  animate,
+  type,
+  level,
+  label,
+  disabled,
+  img,
+  onClick,
+  sx,
+}) => {
   const { variant, color } = levelConfig[level];
   return (
     <MuiButton
       id={id}
+      className={`button-${animate}`}
       type={type}
       variant={variant}
       color={color}
@@ -60,6 +72,7 @@ const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
       onClick={onClick}
       disableRipple
       sx={{
+        lineHeight: 1,
         boxShadow: "none",
         textTransform: "none",
         "&:focus": {
@@ -67,13 +80,12 @@ const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
         },
         "&:hover": {
           boxShadow: "none",
-          transition: "none"
         },
         ...sx,
       }}
     >
       {img && img}
-      {label}
+      <span>{label}</span>
     </MuiButton>
   );
 };
diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index 3d3ed04f2..005c97188 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -38,6 +38,7 @@
   padding-bottom: 60px;
   border: 1px solid var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
+  background-color: var(--env-var-color-8);
 }
 .configure-monitor .config-box .MuiBox-root,
 .configure-monitor .config-box .MuiStack-root {
@@ -74,4 +75,4 @@
 body:has(.configure-monitor) .select-dropdown .MuiMenuItem-root,
 .configure-monitor .select-wrapper .select-component > .MuiSelect-select {
   text-transform: lowercase;
-}
\ No newline at end of file
+}
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index ebdb61ab2..b50942e89 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -106,6 +106,7 @@ const Configure = () => {
       <Button
         level="tertiary"
         label="Back"
+        animate="slideLeft"
         img={<WestRoundedIcon />}
         onClick={() => navigate(-1)}
         sx={{
@@ -113,7 +114,8 @@ const Configure = () => {
           mb: theme.gap.medium,
           px: theme.gap.ml,
           "& svg.MuiSvgIcon-root": {
-            pr: theme.gap.small,
+            mr: theme.gap.small,
+            fill: theme.palette.otherColors.slateGray,
           },
         }}
       />
@@ -151,13 +153,14 @@ const Configure = () => {
             <Button
               level="tertiary"
               label="Pause"
+              animate="rotate180"
               img={<PauseCircleOutlineIcon />}
               sx={{
                 backgroundColor: "#f4f4f4",
                 pl: theme.gap.small,
                 pr: theme.gap.medium,
                 "& svg": {
-                  pr: theme.gap.xs,
+                  mr: theme.gap.xs,
                 },
               }}
             />
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.css b/Client/src/Pages/Monitors/CreateMonitor/index.css
index fbf4c4f14..d379bb602 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.css
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.css
@@ -48,6 +48,7 @@
   border-radius: var(--env-var-radius-1);
   flex-direction: row;
   gap: var(--env-var-spacing-4);
+  background-color: var(--env-var-color-8);
 }
 .create-monitor .config-box .MuiBox-root,
 .create-monitor .config-box .MuiStack-root {
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index de370971a..c63599d7f 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -145,6 +145,7 @@ const CreateMonitor = () => {
       <Button
         level="tertiary"
         label="Back"
+        animate="slideLeft"
         img={<WestRoundedIcon />}
         onClick={() => navigate("/monitors")}
         sx={{
@@ -152,7 +153,8 @@ const CreateMonitor = () => {
           mb: theme.gap.medium,
           px: theme.gap.ml,
           "& svg.MuiSvgIcon-root": {
-            pr: theme.gap.small,
+            mr: theme.gap.small,
+            fill: theme.palette.otherColors.slateGray,
           },
         }}
       />
diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css
index 1abd12ef9..f58ff7088 100644
--- a/Client/src/Pages/Monitors/Details/index.css
+++ b/Client/src/Pages/Monitors/Details/index.css
@@ -37,13 +37,18 @@
 .monitor-details .stat-box {
   flex: 1;
   min-width: 100px;
-  border: solid 1px var(--env-var-color-4);
+  border: solid 1px;
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
+  background-color: var(--env-var-color-8);
 }
 .monitor-details .stat-box:not(:first-of-type) {
   margin-left: var(--env-var-spacing-2);
 }
 .monitor-details .stat-box h6.MuiTypography-root {
   margin-bottom: var(--env-var-spacing-1);
-}
\ No newline at end of file
+}
+.monitor-details button.MuiButtonBase-root,
+.monitor-details .stat-box {
+  border-color: var(--env-var-color-16);
+}
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 1ee258cd4..d5d8cb0c1 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -147,6 +147,7 @@ const DetailsPage = () => {
       <Button
         level="tertiary"
         label="Back to Monitors"
+        animate="slideLeft"
         img={<WestRoundedIcon />}
         onClick={() => navigate("/monitors")}
         sx={{
@@ -154,7 +155,8 @@ const DetailsPage = () => {
           mb: theme.gap.medium,
           px: theme.gap.ml,
           "& svg.MuiSvgIcon-root": {
-            pr: theme.gap.small,
+            mr: theme.gap.small,
+            fill: theme.palette.otherColors.slateGray,
           },
         }}
       />
@@ -184,15 +186,16 @@ const DetailsPage = () => {
           <Button
             level="tertiary"
             label="Configure"
+            animate="rotate90"
             img={<SettingsIcon />}
             onClick={() => navigate(`/monitors/configure/${monitorId}`)}
             sx={{
               ml: "auto",
               alignSelf: "flex-end",
               backgroundColor: "#f4f4f4",
-              px: theme.gap.ml,
+              px: theme.gap.medium,
               "& svg": {
-                pr: theme.gap.xs,
+                mr: "6px",
               },
             }}
           />
@@ -222,19 +225,28 @@ const DetailsPage = () => {
                 level="secondary"
                 label="Day"
                 onClick={() => setFilter("day")}
-                sx={{ backgroundColor: filter === "day" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "day" && theme.palette.otherColors.fillGray,
+                }}
               />
               <Button
                 level="secondary"
                 label="Week"
                 onClick={() => setFilter("week")}
-                sx={{ backgroundColor: filter === "week" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "week" && theme.palette.otherColors.fillGray,
+                }}
               />
               <Button
                 level="secondary"
                 label="Month"
                 onClick={() => setFilter("month")}
-                sx={{ backgroundColor: filter === "month" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "month" && theme.palette.otherColors.fillGray,
+                }}
               />
             </ButtonGroup>
           </Stack>