diff --git a/src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx b/src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx
new file mode 100644
index 000000000..76eb94bb9
--- /dev/null
+++ b/src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx
@@ -0,0 +1,71 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import { Box, Stack, Typography } from "@mui/material";
+import { RowContainer } from "../../../../../Components/StandardContainer";
+
+/**
+
+ *
+ * @component
+ * @example
+ *
+ * @param {Object} props
+ * @param {string} props.type - The type of monitor to be displayed in the message
+ * @returns {JSX.Element} The rendered component
+ */
+
+const SubHeader = ({ headerText='', subHeaderText='', rightCatagoryTitle='',rightDescription='' }) => {
+ const theme = useTheme();
+
+ return (
+
+
+
+
+ {headerText}
+
+
+
+ {subHeaderText}
+
+
+
+ {rightCatagoryTitle &&
+
+
+ {rightCatagoryTitle}
+
+ {rightDescription}
+
+
+
+ }
+
+
+
+
+ );
+};
+
+SubHeader.propTypes = {
+ type: PropTypes.string,
+};
+
+export default SubHeader;
diff --git a/src/Pages/DistributedUptimeStatus/Status/Components/Subheader/index.jsx b/src/Pages/DistributedUptimeStatus/Status/Components/Subheader/index.jsx
deleted file mode 100644
index 8a327f0fa..000000000
--- a/src/Pages/DistributedUptimeStatus/Status/Components/Subheader/index.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import PropTypes from "prop-types";
-import { useTheme } from "@emotion/react";
-import { Box, Typography } from "@mui/material";
-import { useDispatch, useSelector } from "react-redux";
-import { useEffect } from "react";
-import { setGreeting } from "../Features/UI/uiSlice";
-
-
-
-/**
-
- *
- * @component
- * @example
- *
- * @param {Object} props
- * @param {string} props.type - The type of monitor to be displayed in the message
- * @returns {JSX.Element} The rendered component
- */
-
-const Greeting = ({ type = "" }) => {
- const theme = useTheme();
- const dispatch = useDispatch();
-
- return (
-
-
-
- Real-time, real-device coverage
-
-
-
- Powered by millions of devices worldwide, view a system's performance by global region, country or city.
-
-
- );
-};
-
-Greeting.propTypes = {
- type: PropTypes.string,
-};
-
-export default Greeting;
diff --git a/src/Pages/DistributedUptimeStatus/Status/index.jsx b/src/Pages/DistributedUptimeStatus/Status/index.jsx
index a1c6b473f..fc3043eda 100644
--- a/src/Pages/DistributedUptimeStatus/Status/index.jsx
+++ b/src/Pages/DistributedUptimeStatus/Status/index.jsx
@@ -24,8 +24,10 @@ import { useParams } from "react-router-dom";
import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails";
import { useStatusPageFetchByUrl } from "./Hooks/useStatusPageFetchByUrl";
import { useStatusPageDelete } from "../../StatusPage/Status/Hooks/useStatusPageDelete";
+
import { useNavigate } from "react-router-dom";
import { useLocation } from "react-router-dom";
+import SubHeader from "../../DistributedUptime/Details/Components/Subheader";
const DistributedUptimeStatus = () => {
const { url } = useParams();
const location = useLocation();
@@ -153,13 +155,21 @@ const DistributedUptimeStatus = () => {
url={url}
type="distributed"
/>
-
+
-
+
+
+
+