diff --git a/src/Components/Subheader/index.jsx b/src/Components/Subheader/index.jsx
new file mode 100644
index 000000000..f92451e7d
--- /dev/null
+++ b/src/Components/Subheader/index.jsx
@@ -0,0 +1,92 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import { Box, Stack, Typography } from "@mui/material";
+import { RowContainer } from "../StandardContainer";
+
+/**
+
+ *
+ * @component
+ * @example
+ *
+ * @param {string} props.headerText - Header text
+ * @param {number} props.headerLevel - Font characteristic of the header
+ * @param {string} props.subHeaderText - Subheader text
+ * @param {number} props.subHeaderLevel - Font characteristic of the subheader
+ * @param {string} props.rightCatagoryTitle - Message for right section
+ * @param {number} props.rightCatagoryTitleLevel - Font characteristic of the right section header
+ * @param {string} props.rightDescription - Description for right section
+ * @param {number} props.rightDescriptionLevel - Font characteristic of the right section description
+ * @returns {JSX.Element} The rendered component
+ */
+
+const SubHeader = ({
+ headerText='',
+ headerLevel = 1,
+ subHeaderText = '',
+ subHeaderLevel = 1 ,
+ rightCatagoryTitle = '',
+ rightCatagoryTitleLevel = 2,
+ rightDescription='',
+ rightDescriptionLevel = 2
+ }) => {
+ const theme = useTheme();
+
+ return (
+
+
+
+
+ {headerText}
+
+
+
+ {subHeaderText}
+
+
+
+ {rightCatagoryTitle &&
+
+
+ {rightCatagoryTitle}
+
+ {rightDescription}
+
+
+
+ }
+
+
+
+
+ );
+};
+
+SubHeader.propTypes = {
+ headerText:PropTypes.string,
+ headerLevel : PropTypes.number ,
+ subHeaderText :PropTypes.string,
+ subHeaderLevel : PropTypes.number,
+ rightCatagoryTitle :PropTypes.string,
+ rightCatagoryTitleLevel : PropTypes.number,
+ rightDescription:PropTypes.string,
+ rightDescriptionLevel : PropTypes.number
+};
+
+export default SubHeader;
diff --git a/src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx b/src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx
deleted file mode 100644
index 76eb94bb9..000000000
--- a/src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-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/index.jsx b/src/Pages/DistributedUptimeStatus/Status/index.jsx
index 68493ed81..d3568cb4d 100644
--- a/src/Pages/DistributedUptimeStatus/Status/index.jsx
+++ b/src/Pages/DistributedUptimeStatus/Status/index.jsx
@@ -25,15 +25,16 @@ 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 TimeFrameHeader from "./Components/TimeframeHeader";
+import SubHeader from "../../../Components/Subheader";
+
+import { useNavigate, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
-import SubHeader from "../../DistributedUptime/Details/Components/Subheader";
const DistributedUptimeStatus = () => {
const { url } = useParams();
const location = useLocation();
+ const { t } = useTranslation();
const isPublic = location.pathname.startsWith("/status/distributed/public");
const elementToCapture = useRef(null);
@@ -169,23 +170,24 @@ const DistributedUptimeStatus = () => {
elementToCapture={elementToCapture}
/>
-
-
+
+
+