diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx
index 5fac80f84..5e9e0b592 100644
--- a/Client/src/Pages/Details/index.jsx
+++ b/Client/src/Pages/Details/index.jsx
@@ -1,20 +1,29 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import CustomizedTables from "../../Components/CustomizedTables";
 import { Box, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import axiosInstance from "../../Utils/axiosConfig";
 
 /**
  * Details page component displaying monitor details and related information.
  * @component
  */
 const DetailsPage = () => {
-  const monitorState = useSelector((state) => state.monitors);
+  const [monitor, setMonitor] = useState({});
   const { monitorId } = useParams();
-
-  const monitor = monitorState.monitors.find(
-    (monitor) => monitor._id === monitorId
-  );
+  const { authToken } = useSelector((state) => state.auth);
+  useEffect(() => {
+    const fetchMonitor = async () => {
+      const res = await axiosInstance.get(`/monitors/${monitorId}`, {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+        },
+      });
+      setMonitor(res.data.data);
+    };
+    fetchMonitor();
+  }, [monitorId, authToken]);
 
   const theme = useTheme();
 
diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js
index 4c9e19095..87af9adfe 100644
--- a/Server/db/MongoDB.js
+++ b/Server/db/MongoDB.js
@@ -272,7 +272,9 @@ const getAllMonitors = async (req, res) => {
 const getMonitorById = async (req, res) => {
   try {
     const monitor = await Monitor.findById(req.params.monitorId);
-    const checks = await Check.find({ monitorId: monitor._id });
+    const checks = await Check.find({ monitorId: monitor._id }).sort({
+      createdAt: -1,
+    });
     const monitorWithChecks = { ...monitor.toObject(), checks };
     return monitorWithChecks;
   } catch (error) {