diff --git a/.gitignore b/.gitignore
index 81e5668b6..ff828c1ec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,5 @@ mongo
 node_modules/
 docs/architecture
 docs/reviews
-docs/todo
\ No newline at end of file
+docs/todo
+docs/frontend
\ No newline at end of file
diff --git a/client/src/Components/design-elements/BaseChart.tsx b/client/src/Components/design-elements/BaseChart.tsx
index 569652b20..de87395eb 100644
--- a/client/src/Components/design-elements/BaseChart.tsx
+++ b/client/src/Components/design-elements/BaseChart.tsx
@@ -2,6 +2,7 @@ import { BaseBox } from ".";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import { LAYOUT } from "@/Utils/Theme/constants";
 import type { ResponsiveStyleValue } from "@mui/system";
 
 import { useTheme } from "@mui/material/styles";
@@ -26,7 +27,7 @@ export const BaseChart = ({
 	return (
 		<BaseBox
 			sx={{
-				padding: padding ?? theme.spacing(8),
+				padding: padding ?? theme.spacing(LAYOUT.MD),
 				display: "flex",
 				flex: 1,
 				width: width,
@@ -34,13 +35,13 @@ export const BaseChart = ({
 			}}
 		>
 			<Stack
-				gap={theme.spacing(8)}
+				gap={theme.spacing(LAYOUT.MD)}
 				flex={1}
 			>
 				<Stack
 					direction="row"
 					alignItems={"center"}
-					gap={theme.spacing(4)}
+					gap={theme.spacing(LAYOUT.XS)}
 				>
 					{icon && (
 						<BaseBox
diff --git a/client/src/Components/design-elements/BasePage.tsx b/client/src/Components/design-elements/BasePage.tsx
index cf28da40f..691e770dc 100644
--- a/client/src/Components/design-elements/BasePage.tsx
+++ b/client/src/Components/design-elements/BasePage.tsx
@@ -3,6 +3,7 @@ import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Alert from "@mui/material/Alert";
 import Link from "@mui/material/Link";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
 import {
 	ErrorFallback,
 	EmptyFallback,
@@ -91,7 +92,7 @@ export const BasePage = ({
 
 	return (
 		<Stack
-			spacing={theme.spacing(10)}
+			spacing={theme.spacing(LAYOUT.LG)}
 			{...props}
 		>
 			<Breadcrumb breadcrumbOverride={breadcrumbOverride} />
@@ -220,7 +221,7 @@ export const BaseAuthPage = ({
 	return (
 		<BasePage
 			breadcrumbOverride={[]}
-			gap={theme.spacing(8)}
+			gap={theme.spacing(LAYOUT.MD)}
 			alignItems={"center"}
 			justifyContent={"center"}
 			minHeight="100vh"
@@ -229,7 +230,7 @@ export const BaseAuthPage = ({
 		>
 			<HeaderAuthControls
 				hideLogo
-				py={theme.spacing(4)}
+				py={theme.spacing(LAYOUT.XS)}
 				position={"absolute"}
 				top={0}
 				left={0}
@@ -243,14 +244,14 @@ export const BaseAuthPage = ({
 			<Stack alignItems={"center"}>
 				<Typography
 					variant="h1"
-					mb={theme.spacing(2)}
+					mb={theme.spacing(SPACING.LG)}
 				>
 					{title}
 				</Typography>
 				<Typography variant="h2">{subtitle}</Typography>
 			</Stack>
 			<Stack
-				gap={theme.spacing(8)}
+				gap={theme.spacing(LAYOUT.MD)}
 				width={{
 					xs: "80%",
 					md: "25%",
diff --git a/client/src/Components/design-elements/BulletPointCheck.tsx b/client/src/Components/design-elements/BulletPointCheck.tsx
index 4bd1ddf3c..feb3eae39 100644
--- a/client/src/Components/design-elements/BulletPointCheck.tsx
+++ b/client/src/Components/design-elements/BulletPointCheck.tsx
@@ -2,6 +2,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { Check } from "lucide-react";
 import { useTheme } from "@mui/material/styles";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 export const BulletPointCheck = ({
 	text,
@@ -21,7 +22,7 @@ export const BulletPointCheck = ({
 	return (
 		<Stack
 			direction="row"
-			gap={theme.spacing(6)}
+			gap={theme.spacing(LAYOUT.SM)}
 			alignItems="center"
 		>
 			<Check
diff --git a/client/src/Components/design-elements/SplitBox.tsx b/client/src/Components/design-elements/SplitBox.tsx
index 3a778dbcf..08f245178 100644
--- a/client/src/Components/design-elements/SplitBox.tsx
+++ b/client/src/Components/design-elements/SplitBox.tsx
@@ -3,6 +3,7 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { LAYOUT } from "@/Utils/Theme/constants";
 export const SplitBox = ({
 	left,
 	right,
@@ -18,10 +19,10 @@ export const SplitBox = ({
 			bgcolor={theme.palette.background.paper}
 			border={1}
 			borderColor={theme.palette.divider}
-			borderRadius={theme.spacing(2)}
+			borderRadius={theme.shape.borderRadius}
 		>
 			<Box
-				padding={theme.spacing(15)}
+				padding={theme.spacing(LAYOUT.XXL)}
 				borderRight={isSmall ? 0 : 1}
 				borderBottom={isSmall ? 1 : 0}
 				borderColor={theme.palette.divider}
@@ -37,7 +38,7 @@ export const SplitBox = ({
 			</Box>
 			<Box
 				flex={1}
-				padding={theme.spacing(15)}
+				padding={theme.spacing(LAYOUT.XXL)}
 			>
 				{right}
 			</Box>
@@ -60,7 +61,7 @@ export const ConfigBox = ({
 	return (
 		<SplitBox
 			left={
-				<Stack spacing={theme.spacing(4)}>
+				<Stack spacing={theme.spacing(LAYOUT.XS)}>
 					<Typography
 						textTransform={"capitalize"}
 						component="h2"
diff --git a/client/src/Utils/Theme/constants.ts b/client/src/Utils/Theme/constants.ts
new file mode 100644
index 000000000..8b045f9f6
--- /dev/null
+++ b/client/src/Utils/Theme/constants.ts
@@ -0,0 +1,17 @@
+export const SPACING = {
+	XS: 0.5,
+	SM: 1,
+	MD: 1.5,
+	LG: 2,
+	XL: 2.5,
+	XXL: 3,
+} as const;
+
+export const LAYOUT = {
+	XS: 4,
+	SM: 6,
+	MD: 8,
+	LG: 10,
+	XL: 12,
+	XXL: 16,
+} as const;