diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index 685663695..392779f4a 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -29,7 +29,12 @@ const Status = ({ monitor }) => {
 		<Stack>
 			<Typography
 				variant="h1"
-				className="monitor-name-text"
+				sx={{
+					maxWidth: "45vw",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+				}}
 			>
 				{monitor?.name}
 			</Typography>
@@ -41,8 +46,14 @@ const Status = ({ monitor }) => {
 				<PulseDot color={statusColor[determineState(monitor)]} />
 				<Typography
 					variant="h2"
-					style={{ fontFamily: "monospace", fontWeight: "bolder" }}
-					className="monitor-url-text"
+					sx={{
+						fontFamily: "monospace",
+						fontWeight: "bolder",
+						maxWidth: "60vw",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+					}}
 				>
 					{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
 				</Typography>
diff --git a/client/src/Components/MonitorStatusHeader/index.jsx b/client/src/Components/MonitorStatusHeader/index.jsx
index 71ce80679..c7ae57c0b 100644
--- a/client/src/Components/MonitorStatusHeader/index.jsx
+++ b/client/src/Components/MonitorStatusHeader/index.jsx
@@ -23,7 +23,12 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
 			<Stack>
 				<Typography
 					variant="h1"
-					className="monitor-name-text"
+					sx={{
+						maxWidth: "60vw",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+					}}
 				>
 					{monitor?.name}
 				</Typography>
@@ -36,7 +41,14 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
 					<Typography
 						component="h2"
 						variant="h2"
-						className="monitor-url-text"
+						sx={{
+							fontFamily: "monospace",
+							fontWeight: "bolder",
+							maxWidth: "60vw",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+						}}
 					>
 						{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
 					</Typography>
diff --git a/client/src/Pages/PageSpeed/Configure/index.jsx b/client/src/Pages/PageSpeed/Configure/index.jsx
index 5305f8b59..2ac6d27c0 100644
--- a/client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/client/src/Pages/PageSpeed/Configure/index.jsx
@@ -203,7 +203,12 @@ const PageSpeedConfigure = () => {
 								<Typography
 									component="h1"
 									variant="h1"
-									className="monitor-name-text"
+									sx={{
+										maxWidth: "60vw",
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap",
+									}}
 								>
 									{monitor.name}
 								</Typography>
@@ -236,7 +241,12 @@ const PageSpeedConfigure = () => {
 									<Typography
 										component="h2"
 										variant="h2"
-										className="monitor-url-text"
+										sx={{
+											maxWidth: "60vw",
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+										}}
 									>
 										{monitor.url?.replace(/^https?:\/\//, "") || "..."}
 									</Typography>
diff --git a/client/src/Pages/Uptime/Configure/index.jsx b/client/src/Pages/Uptime/Configure/index.jsx
index 09cdbc0b9..16eb37492 100644
--- a/client/src/Pages/Uptime/Configure/index.jsx
+++ b/client/src/Pages/Uptime/Configure/index.jsx
@@ -249,7 +249,12 @@ const Configure = () => {
 								<Typography
 									component="h1"
 									variant="h1"
-									className="monitor-name-text"
+									sx={{
+										maxWidth: "60vw",
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap",
+									}}
 								>
 									{monitor.name}
 								</Typography>
@@ -282,7 +287,12 @@ const Configure = () => {
 									<Typography
 										component="h2"
 										variant="h2"
-										className="monitor-url-text"
+										sx={{
+											maxWidth: "60vw",
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+										}}
 									>
 										{monitor.url?.replace(/^https?:\/\//, "") || "..."}
 									</Typography>
diff --git a/client/src/index.css b/client/src/index.css
index 8ede1627d..f83cdc461 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -84,21 +84,6 @@ html {
 	display: none;
 }
 
-/*adding the classes for handling the overflow of url and name for monitors in one place*/
-.monitor-url-text {
-	max-width: 70vh;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.monitor-name-text {
-	max-width: 70vh;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 @keyframes ripple {
 	from {
 		opacity: 1;