diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index 54781ffa3..3574377d8 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -56,7 +56,7 @@ const Field = forwardRef(
 
     return (
       <Stack
-        gap={theme.gap.xs}
+        gap={theme.spacing(2)}
         className={`field field-${type}`}
         sx={{
           "& fieldset": {
@@ -127,8 +127,8 @@ const Field = forwardRef(
               ? {
                   "& .MuiInputBase-root": { padding: 0 },
                   "& .MuiStack-root": {
-                    borderTopLeftRadius: `${theme.shape.borderRadius}px`,
-                    borderBottomLeftRadius: `${theme.shape.borderRadius}px`,
+                    borderTopLeftRadius: theme.shape.borderRadius,
+                    borderBottomLeftRadius: theme.shape.borderRadius,
                   },
                 }
               : {}
@@ -140,9 +140,9 @@ const Field = forwardRef(
                 alignItems="center"
                 height="100%"
                 sx={{
-                  borderRight: `solid 1px ${theme.palette.section.borderColor}`,
+                  borderRight: `solid 1px ${theme.palette.border.dark}`,
                   backgroundColor: "#f9f9fa",
-                  pl: theme.gap.medium,
+                  pl: theme.spacing(6),
                 }}
               >
                 <Typography
@@ -161,8 +161,8 @@ const Field = forwardRef(
                   onClick={() => setVisible((show) => !show)}
                   tabIndex={-1}
                   sx={{
-                    color: theme.palette.section.borderColor,
-                    padding: `calc(${theme.gap.xs} / 2)`,
+                    color: theme.palette.border.dark,
+                    padding: theme.spacing(1),
                     "&:focus": {
                       outline: "none",
                     },
@@ -183,7 +183,7 @@ const Field = forwardRef(
             component="span"
             className="input-error"
             color={theme.palette.error.text}
-            mt={theme.gap.xs}
+            mt={theme.spacing(2)}
             sx={{
               opacity: 0.8,
             }}
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 627e508de..1d4a0fa41 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -92,9 +92,7 @@ const TeamPanel = () => {
               id: idx,
               data: (
                 <Stack>
-                  <Typography
-                    style={{ color: theme.palette.otherColors.blackish }}
-                  >
+                  <Typography style={{ color: theme.palette.text.secondary }}>
                     {member.firstName + " " + member.lastName}
                   </Typography>
                   <Typography>
@@ -247,7 +245,7 @@ const TeamPanel = () => {
               },
             }}
             inputProps={{
-              sx: { textAlign: "end", padding: theme.gap.small },
+              sx: { textAlign: "end", padding: theme.spacing(4) },
             }}
           />
           <Button
@@ -257,8 +255,8 @@ const TeamPanel = () => {
             onClick={() => toggleEdit()}
             sx={{
               minWidth: 0,
-              paddingX: theme.gap.small,
-              ml: orgStates.isEdit ? theme.gap.small : 0,
+              paddingX: theme.spacing(4),
+              ml: orgStates.isEdit ? theme.spacing(4) : 0,
             }}
           />
         </Stack>
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index e756f66bd..4560966c0 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -381,7 +381,7 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
             />
           </Box>
           <Stack
-            gap={theme.gap.small}
+            gap={theme.spacing(4)}
             mb={{ xs: theme.spacing(6), sm: theme.spacing(8) }}
           >
             <Check
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index cd0216f9e..510eeeaaf 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -18,7 +18,7 @@ const SkeletonLayout = () => {
 
   return (
     <>
-      <Stack direction="row" alignItems="center" gap={theme.gap.medium}>
+      <Stack direction="row" alignItems="center" gap={theme.spacing(6)}>
         <Skeleton variant="rounded" width={150} height={34} />
         <Skeleton variant="rounded" width="15%" height={34} />
         <Skeleton
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index 501384364..342eefc71 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -211,7 +211,7 @@ const CreatePageSpeed = () => {
                 label="Notify via email to following emails"
                 isChecked={false}
               />
-              <Box mx={`calc(${theme.gap.ml} * 2)`}>
+              <Box mx={theme.spacing(16)}>
                 <Field
                   id="notify-emails-list"
                   placeholder="notifications@gmail.com"
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index f2603e39d..a96eefe3b 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -157,7 +157,7 @@ const PageSpeed = ({ isAdmin }) => {
   return (
     <Box
       className="page-speed"
-      pt={theme.gap.xl}
+      pt={theme.spacing(20)}
       sx={{
         ':has(> [class*="fallback__"])': {
           position: "relative",
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index d3b3aab01..d908e33c1 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -62,7 +62,7 @@ const Settings = () => {
               timezone of your server.
             </Typography>
           </Box>
-          <Stack gap={theme.gap.xl}>
+          <Stack gap={theme.spacing(20)}>
             <Select
               id="display-timezone"
               label="Display timezone"
@@ -87,7 +87,7 @@ const Settings = () => {
               remove all past data.
             </Typography>
           </Box>
-          <Stack gap={theme.gap.xl}>
+          <Stack gap={theme.spacing(20)}>
             <Field
               type="text"
               id="history-monitoring"
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index 00efdbadd..4f8ede4d0 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -54,6 +54,15 @@ const theme = createTheme({
     },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     other: {},
+    primary: {
+      main: "#1570EF",
+    },
+    secondary: {
+      main: "#475467",
+    },
+    tertiary: {
+      main: "#475467",
+    },
   },
   spacing: 2,
   components: {},