diff --git a/client/src/Components/design-elements/Table.tsx b/client/src/Components/design-elements/Table.tsx
index 35cd4512f..505f79fea 100644
--- a/client/src/Components/design-elements/Table.tsx
+++ b/client/src/Components/design-elements/Table.tsx
@@ -29,6 +29,7 @@ import type { TablePaginationOwnProps } from "@mui/material/TablePagination";
 import { useTranslation } from "react-i18next";
 import { useState, Fragment, useEffect } from "react";
 import { useTheme } from "@mui/material/styles";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import type { SxProps, Theme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
@@ -90,20 +91,20 @@ export function DataTable<
 	// Return stack of cards for small screens
 	if (isSmall && cardsOnSmallScreens) {
 		return (
-			<Stack spacing={theme.spacing(4)}>
+			<Stack spacing={theme.spacing(LAYOUT.XS)}>
 				{data.map((row) => {
 					const key = row.id || row._id || Math.random();
 					keys.push(key);
 					return (
 						<Stack
 							onClick={() => (onRowClick ? onRowClick(row) : null)}
-							spacing={theme.spacing(4)}
+							spacing={theme.spacing(LAYOUT.XS)}
 							sx={{
 								borderStyle: "solid",
 								borderWidth: 1,
 								borderColor: theme.palette.divider,
 								borderRadius: theme.shape.borderRadius,
-								padding: theme.spacing(4),
+								padding: theme.spacing(LAYOUT.XS),
 								cursor: onRowClick ? "pointer" : "default",
 							}}
 							key={key}
@@ -155,7 +156,7 @@ export function DataTable<
 			<Table
 				sx={{
 					"&.MuiTable-root  :is(.MuiTableHead-root, .MuiTableBody-root) :is(th, td)": {
-						paddingLeft: theme.spacing(8),
+						paddingLeft: theme.spacing(LAYOUT.MD),
 					},
 					"& .MuiTableCell-root": {
 						borderBottom: `1px solid ${theme.palette.divider}`,
@@ -168,13 +169,13 @@ export function DataTable<
 						color: theme.palette.text.secondary,
 						fontWeight: 500,
 						textTransform: "uppercase",
-						padding: `${theme.spacing(2)} ${theme.spacing(8)}`,
+						padding: `${theme.spacing(SPACING.LG)} ${theme.spacing(LAYOUT.MD)}`,
 						fontSize: theme.typography.fontSize,
 					},
 					"& :is(td)": {
 						backgroundColor: theme.palette.background.paper,
 						color: theme.palette.text.secondary,
-						padding: `${theme.spacing(7)} ${theme.spacing(8)}`,
+						padding: `${theme.spacing(LAYOUT.MD)} ${theme.spacing(LAYOUT.MD)}`,
 						fontSize: theme.typography.fontSize,
 						overflowX: "hidden",
 					},
@@ -514,7 +515,7 @@ export const Pagination = ({ ...props }: PaginationProps) => {
 							display: "grid",
 							gridTemplateColumns: "1fr 1fr",
 							gridAutoRows: "auto",
-							rowGap: theme.spacing(1),
+							rowGap: theme.spacing(SPACING.SM),
 							alignItems: "center",
 							justifyItems: "center",
 							paddingLeft: 0,
@@ -556,8 +557,8 @@ const EmptyView = ({ text, positive }: { text?: string; positive?: boolean }) =>
 			alignItems={"center"}
 			justifyContent={"center"}
 			sx={{
-				py: theme.spacing(12),
-				px: theme.spacing(4),
+				py: theme.spacing(LAYOUT.XL),
+				px: theme.spacing(LAYOUT.XS),
 				borderWidth: 1,
 				borderStyle: "solid",
 				borderColor: theme.palette.divider,
@@ -574,7 +575,7 @@ const EmptyView = ({ text, positive }: { text?: string; positive?: boolean }) =>
 					display: "flex",
 					alignItems: "center",
 					justifyContent: "center",
-					mb: theme.spacing(2),
+					mb: theme.spacing(SPACING.LG),
 				}}
 			>
 				<Icon
diff --git a/client/src/Pages/CreateMonitor/index.tsx b/client/src/Pages/CreateMonitor/index.tsx
index 4d6c7dfeb..34e141795 100644
--- a/client/src/Pages/CreateMonitor/index.tsx
+++ b/client/src/Pages/CreateMonitor/index.tsx
@@ -29,6 +29,7 @@ import {
 	SliderWithLabel,
 	Dialog,
 } from "@/Components/inputs";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import { useGet, usePost, usePatch, useDelete } from "@/Hooks/UseApi";
 import { useMonitorForm } from "@/Hooks/useMonitorForm";
 import type { Monitor, MonitorType, GamesMap } from "@/Types/Monitor";
@@ -281,7 +282,7 @@ const CreateMonitorPage = () => {
 								<FormControl error={!!fieldState.error}>
 									<RadioGroup
 										{...field}
-										sx={{ gap: theme.spacing(6) }}
+										sx={{ gap: theme.spacing(LAYOUT.MD) }}
 									>
 										<RadioWithDescription
 											value="http"
@@ -337,7 +338,7 @@ const CreateMonitorPage = () => {
 				title={t("pages.createMonitor.form.general.title")}
 				subtitle={t(`pages.createMonitor.form.general.description.${watchedType}`)}
 				rightContent={
-					<Stack spacing={theme.spacing(8)}>
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						{/* URL/Host/Container field - not shown for hardware */}
 						{generalSettingsConfig.showUrl && (
 							<Controller
@@ -556,7 +557,7 @@ const CreateMonitorPage = () => {
 					title={t("pages.createMonitor.form.thresholds.title")}
 					subtitle={t("pages.createMonitor.form.thresholds.description")}
 					rightContent={
-						<Stack spacing={theme.spacing(8)}>
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
 							<Controller
 								name="cpuAlertThreshold"
 								control={control}
@@ -638,7 +639,7 @@ const CreateMonitorPage = () => {
 				title={t("pages.createMonitor.form.incidents.title")}
 				subtitle={t("pages.createMonitor.form.incidents.description")}
 				rightContent={
-					<Stack spacing={theme.spacing(12)}>
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						<Controller
 							name="statusWindowSize"
 							control={control}
@@ -690,7 +691,7 @@ const CreateMonitorPage = () => {
 								(field.value ?? []).includes(n.id)
 							);
 							return (
-								<Stack spacing={theme.spacing(4)}>
+								<Stack spacing={theme.spacing(LAYOUT.MD)}>
 									<Autocomplete
 										multiple
 										options={notificationOptions}
@@ -753,7 +754,7 @@ const CreateMonitorPage = () => {
 								<Stack
 									direction="row"
 									alignItems="center"
-									spacing={theme.spacing(2)}
+									spacing={theme.spacing(SPACING.LG)}
 								>
 									<Switch
 										checked={field.value ?? false}
@@ -774,7 +775,7 @@ const CreateMonitorPage = () => {
 					title={t("pages.createMonitor.form.advanced.title")}
 					subtitle={t("pages.createMonitor.form.advanced.description")}
 					rightContent={
-						<Stack spacing={theme.spacing(8)}>
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
 							<Controller
 								name="useAdvancedMatching"
 								control={control}
@@ -782,7 +783,7 @@ const CreateMonitorPage = () => {
 									<Stack
 										direction="row"
 										alignItems="center"
-										spacing={theme.spacing(2)}
+										spacing={theme.spacing(SPACING.LG)}
 									>
 										<Switch
 											checked={field.value ?? false}
@@ -797,7 +798,7 @@ const CreateMonitorPage = () => {
 								)}
 							/>
 							{watchedUseAdvancedMatching && (
-								<Stack spacing={theme.spacing(8)}>
+								<Stack spacing={theme.spacing(LAYOUT.MD)}>
 									<Controller
 										name="matchMethod"
 										control={control}
@@ -889,7 +890,7 @@ const CreateMonitorPage = () => {
 					title={t("pages.createMonitor.form.geoChecks.title")}
 					subtitle={t("pages.createMonitor.form.geoChecks.description")}
 					rightContent={
-						<Stack spacing={theme.spacing(8)}>
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
 							<Controller
 								name="geoCheckEnabled"
 								control={control}
@@ -897,7 +898,7 @@ const CreateMonitorPage = () => {
 									<Stack
 										direction="row"
 										alignItems="center"
-										spacing={theme.spacing(2)}
+										spacing={theme.spacing(SPACING.LG)}
 									>
 										<Switch
 											checked={field.value ?? false}
@@ -910,7 +911,7 @@ const CreateMonitorPage = () => {
 								)}
 							/>
 							{watchGeoCheckEnabled && (
-								<Stack spacing={theme.spacing(8)}>
+								<Stack spacing={theme.spacing(LAYOUT.MD)}>
 									<Controller
 										name="geoCheckLocations"
 										control={control}
@@ -926,7 +927,7 @@ const CreateMonitorPage = () => {
 												(field.value ?? []).includes(loc.id)
 											);
 											return (
-												<Stack spacing={theme.spacing(4)}>
+												<Stack spacing={theme.spacing(LAYOUT.MD)}>
 													<Autocomplete
 														multiple
 														options={locationOptions}