diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
index 3c11affa6..26e405463 100644
--- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
@@ -1,8 +1,7 @@
 import TabPanel from "@mui/lab/TabPanel";
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
-import { Box, Stack, Typography } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
+import { Box, Stack, Typography, Button } from "@mui/material";
 import { PasswordEndAdornment } from "../../Inputs/TextInput/Adornments";
 import TextInput from "../../Inputs/TextInput";
 import { credentials } from "../../../Validation/validation";
@@ -226,7 +225,7 @@ const PasswordPanel = () => {
 					direction="row"
 					justifyContent="flex-end"
 				>
-					<LoadingButton
+					<Button
 						variant="contained"
 						color="accent"
 						type="submit"
@@ -242,7 +241,7 @@ const PasswordPanel = () => {
 						}}
 					>
 						Save
-					</LoadingButton>
+					</Button>
 				</Stack>
 			</Stack>
 		</TabPanel>
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index e20cb13a4..fdd34d686 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -14,7 +14,6 @@ import { formatBytes } from "../../../Utils/fileUtils";
 import { clearUptimeMonitorState } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
-import LoadingButton from "@mui/lab/LoadingButton";
 import { GenericDialog } from "../../Dialog/genericDialog";
 import Dialog from "../../Dialog";
 
@@ -344,7 +343,7 @@ const ProfilePanel = () => {
 					justifyContent="flex-end"
 				>
 					<Box width="fit-content">
-						<LoadingButton
+						<Button
 							variant="contained"
 							color="accent"
 							onClick={handleSaveProfile}
@@ -354,7 +353,7 @@ const ProfilePanel = () => {
 							sx={{ px: theme.spacing(12) }}
 						>
 							Save
-						</LoadingButton>
+						</Button>
 					</Box>
 				</Stack>
 			</Stack>
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 7b8143356..b7174c337 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -8,7 +8,6 @@ import { networkService } from "../../../main";
 import { createToast } from "../../../Utils/toastUtils";
 import { useSelector } from "react-redux";
 import Select from "../../Inputs/Select";
-import LoadingButton from "@mui/lab/LoadingButton";
 import { GenericDialog } from "../../Dialog/genericDialog";
 import DataTable from "../../Table/";
 /**
@@ -229,14 +228,13 @@ const TeamPanel = () => {
 							</Button>
 						</ButtonGroup>
 					</Stack>
-					<LoadingButton
-						loading={isSendingInvite}
+					<Button
 						variant="contained"
 						color="accent"
 						onClick={() => setIsOpen(true)}
 					>
 						Invite a team member
-					</LoadingButton>
+					</Button>
 				</Stack>
 
 				<DataTable
@@ -287,15 +285,15 @@ const TeamPanel = () => {
 					mt={theme.spacing(8)}
 					justifyContent="flex-end"
 				>
-					<LoadingButton
+					<Button
 						loading={isSendingInvite}
 						variant="contained" // CAIO_REVIEW
 						color="error"
 						onClick={closeInviteModal}
 					>
 						Cancel
-					</LoadingButton>
-					<LoadingButton
+					</Button>
+					<Button
 						variant="contained"
 						color="accent"
 						onClick={handleInviteMember}
@@ -303,7 +301,7 @@ const TeamPanel = () => {
 						disabled={isDisabled}
 					>
 						Send invite
-					</LoadingButton>
+					</Button>
 				</Stack>
 			</GenericDialog>
 		</TabPanel>
diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index 487a0e5e5..61234db73 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -1,4 +1,4 @@
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography, Button } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { createToast } from "../../Utils/toastUtils";
 import { useDispatch, useSelector } from "react-redux";
@@ -10,7 +10,6 @@ import TextInput from "../../Components/Inputs/TextInput";
 import Logo from "../../assets/icons/checkmate-icon.svg?react";
 import Key from "../../assets/icons/key.svg?react";
 import Background from "../../assets/Images/background-grid.svg?react";
-import LoadingButton from "@mui/lab/LoadingButton";
 import IconBox from "../../Components/IconBox";
 import "./index.css";
 
@@ -185,7 +184,7 @@ const ForgotPassword = () => {
 							error={errors.email ? true : false}
 							helperText={errors.email}
 						/>
-						<LoadingButton
+						<Button
 							variant="contained"
 							color="accent"
 							loading={isLoading}
@@ -197,7 +196,7 @@ const ForgotPassword = () => {
 							}}
 						>
 							Send instructions
-						</LoadingButton>
+						</Button>
 					</Box>
 				</Stack>
 			</Stack>
diff --git a/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx b/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx
index 298a1d105..0b8142161 100644
--- a/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx
+++ b/Client/src/Pages/Auth/Login/Components/PasswordStep.jsx
@@ -1,7 +1,6 @@
 import { useRef, useEffect } from "react";
 import { Box, Button, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import LoadingButton from "@mui/lab/LoadingButton";
 import { useSelector } from "react-redux";
 import TextInput from "../../../../Components/Inputs/TextInput";
 import { PasswordEndAdornment } from "../../../../Components/Inputs/TextInput/Adornments";
@@ -90,7 +89,7 @@ const PasswordStep = ({ form, errors, onSubmit, onChange, onBack }) => {
 							<ArrowBackRoundedIcon />
 							{t("commonBack")}{" "}
 						</Button>
-						<LoadingButton
+						<Button
 							variant="contained"
 							color="accent"
 							type="submit"
@@ -106,7 +105,7 @@ const PasswordStep = ({ form, errors, onSubmit, onChange, onBack }) => {
 							}}
 						>
 							{t("continue")}
-						</LoadingButton>
+						</Button>
 					</Stack>
 				</Box>
 			</Stack>
diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx
index 630ca23f0..4467a4adf 100644
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -3,8 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import { useTheme } from "@emotion/react";
-import { Box, Stack, Typography } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
+import { Box, Stack, Typography, Button } from "@mui/material";
 import { setNewPassword } from "../../Features/Auth/authSlice";
 import { createToast } from "../../Utils/toastUtils";
 import { credentials } from "../../Validation/validation";
@@ -232,7 +231,7 @@ const SetNewPassword = () => {
 							/>
 						</Stack>
 					</Box>
-					<LoadingButton
+					<Button
 						variant="contained"
 						color="accent"
 						loading={isLoading}
@@ -245,7 +244,7 @@ const SetNewPassword = () => {
 						sx={{ width: "100%", maxWidth: 400 }}
 					>
 						{t("authSetNewPasswordResetPassword")}
-					</LoadingButton>
+					</Button>
 				</Stack>
 			</Stack>
 			<Box
diff --git a/Client/src/Pages/DistributedUptime/Create/index.jsx b/Client/src/Pages/DistributedUptime/Create/index.jsx
index 0afefb207..6a1d0b292 100644
--- a/Client/src/Pages/DistributedUptime/Create/index.jsx
+++ b/Client/src/Pages/DistributedUptime/Create/index.jsx
@@ -1,6 +1,5 @@
 // Components
 import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
 
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import ConfigBox from "../../../Components/ConfigBox";
@@ -328,15 +327,15 @@ const CreateDistributedUptime = () => {
 					direction="row"
 					justifyContent="flex-end"
 				>
-					<LoadingButton
+					<Button
 						variant="contained"
-						color="primary"
+						color="accent"
 						onClick={() => handleCreateMonitor()}
 						disabled={!Object.values(errors).every((value) => value === undefined)}
 						loading={isLoading}
 					>
 						{isCreate ? "Create monitor" : "Configure monitor"}
-					</LoadingButton>
+					</Button>
 				</Stack>
 			</Stack>
 		</Box>
diff --git a/Client/src/Pages/Infrastructure/Create/index.jsx b/Client/src/Pages/Infrastructure/Create/index.jsx
index 464bdeceb..c2a692702 100644
--- a/Client/src/Pages/Infrastructure/Create/index.jsx
+++ b/Client/src/Pages/Infrastructure/Create/index.jsx
@@ -11,7 +11,6 @@ import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
 
 // MUI
 import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
 
 //Components
 import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -405,14 +404,14 @@ const CreateInfrastructureMonitor = () => {
 					direction="row"
 					justifyContent="flex-end"
 				>
-					<LoadingButton
+					<Button
 						variant="contained"
 						color="accent"
 						onClick={handleCreateInfrastructureMonitor}
 						loading={monitorState?.isLoading}
 					>
 						Create infrastructure monitor
-					</LoadingButton>
+					</Button>
 				</Stack>
 			</Stack>
 		</Box>
diff --git a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
index 444c0fa4b..04121df9c 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
@@ -9,7 +9,6 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
 import { maintenanceWindowValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
-import LoadingButton from "@mui/lab/LoadingButton";
 
 import dayjs from "dayjs";
 import Select from "../../../Components/Inputs/Select";
@@ -552,7 +551,7 @@ const CreateMaintenance = () => {
 					>
 						Cancel
 					</Button>
-					<LoadingButton
+					<Button
 						loading={isLoading}
 						variant="contained"
 						color="accent"
@@ -564,7 +563,7 @@ const CreateMaintenance = () => {
 								? "Create maintenance"
 								: "Edit maintenance"
 						}`}
-					</LoadingButton>
+					</Button>
 				</Box>
 			</Stack>
 		</Box>
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index a76f496cb..3d0f4b711 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
-import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Stack, Tooltip, Typography, Button } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router";
 import {
@@ -20,7 +20,6 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
-import LoadingButton from "@mui/lab/LoadingButton";
 import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
 import SkeletonLayout from "./skeleton";
 import useUtils from "../../Uptime/Monitors/Hooks/useUtils";
@@ -265,7 +264,7 @@ const PageSpeedConfigure = () => {
 								alignSelf="flex-end"
 								ml="auto"
 							>
-								<LoadingButton
+								<Button
 									onClick={handlePause}
 									loading={isLoading}
 									variant="contained"
@@ -293,8 +292,8 @@ const PageSpeedConfigure = () => {
 											Resume
 										</>
 									)}
-								</LoadingButton>
-								<LoadingButton
+								</Button>
+								<Button
 									loading={isLoading}
 									variant="contained"
 									color="error"
@@ -304,7 +303,7 @@ const PageSpeedConfigure = () => {
 									}}
 								>
 									Remove
-								</LoadingButton>
+								</Button>
 							</Box>
 						</Stack>
 						<ConfigBox>
@@ -422,7 +421,7 @@ const PageSpeedConfigure = () => {
 							justifyContent="flex-end"
 							mt="auto"
 						>
-							<LoadingButton
+							<Button
 								loading={isLoading}
 								type="submit"
 								variant="contained"
@@ -431,7 +430,7 @@ const PageSpeedConfigure = () => {
 								sx={{ px: theme.spacing(12) }}
 							>
 								Save
-							</LoadingButton>
+							</Button>
 						</Stack>
 					</Stack>
 				</>
diff --git a/Client/src/Pages/PageSpeed/Create/index.jsx b/Client/src/Pages/PageSpeed/Create/index.jsx
index 925d077df..008741afd 100644
--- a/Client/src/Pages/PageSpeed/Create/index.jsx
+++ b/Client/src/Pages/PageSpeed/Create/index.jsx
@@ -14,7 +14,6 @@ import { parseDomainName } from "../../../Utils/monitorUtils";
 // MUI
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
 
 //Components
 import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -335,7 +334,7 @@ const CreatePageSpeed = () => {
 					direction="row"
 					justifyContent="flex-end"
 				>
-					<LoadingButton
+					<Button
 						variant="contained"
 						color="accent"
 						onClick={handleCreateMonitor}
@@ -343,7 +342,7 @@ const CreatePageSpeed = () => {
 						loading={isLoading}
 					>
 						Create monitor
-					</LoadingButton>
+					</Button>
 				</Stack>
 			</Stack>
 		</Box>
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 40331fad6..ad783ac9a 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -3,7 +3,6 @@ import { Box, Stack, Typography, Button, Switch } from "@mui/material";
 import TextInput from "../../Components/Inputs/TextInput";
 import Link from "../../Components/Link";
 import Select from "../../Components/Inputs/Select";
-import LoadingButton from "@mui/lab/LoadingButton";
 import { useIsAdmin } from "../../Hooks/useIsAdmin";
 import Dialog from "../../Components/Dialog";
 import ConfigBox from "../../Components/ConfigBox";
@@ -328,7 +327,7 @@ const Settings = () => {
 						<Stack gap={theme.spacing(20)}>
 							<Box>
 								<Typography>Add demo monitors</Typography>
-								<LoadingButton
+								<Button
 									variant="contained"
 									color="accent"
 									loading={isLoading || authIsLoading || checksIsLoading}
@@ -336,11 +335,11 @@ const Settings = () => {
 									sx={{ mt: theme.spacing(4) }}
 								>
 									Add demo monitors
-								</LoadingButton>
+								</Button>
 							</Box>
 							<Box>
 								<Typography>Remove all monitors</Typography>
-								<LoadingButton
+								<Button
 									variant="contained"
 									color="error"
 									loading={isLoading || authIsLoading || checksIsLoading}
@@ -350,7 +349,7 @@ const Settings = () => {
 									sx={{ mt: theme.spacing(4) }}
 								>
 									Remove all monitors
-								</LoadingButton>
+								</Button>
 							</Box>
 						</Stack>
 						<Dialog
@@ -404,7 +403,7 @@ const Settings = () => {
 					direction="row"
 					justifyContent="flex-end"
 				>
-					<LoadingButton
+					<Button
 						loading={isLoading || authIsLoading || checksIsLoading}
 						disabled={Object.keys(errors).length > 0}
 						variant="contained"
@@ -413,7 +412,7 @@ const Settings = () => {
 						onClick={handleSave}
 					>
 						Save
-					</LoadingButton>
+					</Button>
 				</Stack>
 			</Stack>
 		</Box>
diff --git a/Client/src/Pages/Uptime/Configure/index.jsx b/Client/src/Pages/Uptime/Configure/index.jsx
index 4f281a763..4839fd6f7 100644
--- a/Client/src/Pages/Uptime/Configure/index.jsx
+++ b/Client/src/Pages/Uptime/Configure/index.jsx
@@ -2,7 +2,7 @@ import { useNavigate, useParams } from "react-router";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
-import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Stack, Tooltip, Typography, Button } from "@mui/material";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
@@ -22,7 +22,6 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import SkeletonLayout from "./skeleton";
-import LoadingButton from "@mui/lab/LoadingButton";
 import "./index.css";
 import Dialog from "../../../Components/Dialog";
 
@@ -292,7 +291,7 @@ const Configure = () => {
 									ml: "auto",
 								}}
 							>
-								<LoadingButton
+								<Button
 									variant="contained"
 									color="secondary"
 									loading={isLoading}
@@ -323,8 +322,8 @@ const Configure = () => {
 											Resume
 										</>
 									)}
-								</LoadingButton>
-								<LoadingButton
+								</Button>
+								<Button
 									loading={isLoading}
 									variant="contained"
 									color="error"
@@ -332,7 +331,7 @@ const Configure = () => {
 									onClick={() => setIsOpen(true)}
 								>
 									Remove
-								</LoadingButton>
+								</Button>
 							</Box>
 						</Stack>
 						<ConfigBox>
@@ -347,7 +346,11 @@ const Configure = () => {
 								<TextInput
 									type={monitor?.type === "http" ? "url" : "text"}
 									https={protocol === "https"}
-									startAdornment={monitor?.type === "http" && <HttpAdornment https={protocol === "https"} />}
+									startAdornment={
+										monitor?.type === "http" && (
+											<HttpAdornment https={protocol === "https"} />
+										)
+									}
 									id="monitor-url"
 									label="URL to monitor"
 									placeholder="google.com"
@@ -443,7 +446,7 @@ const Configure = () => {
 							justifyContent="flex-end"
 							mt="auto"
 						>
-							<LoadingButton
+							<Button
 								variant="contained"
 								color="accent"
 								loading={isLoading}
@@ -451,7 +454,7 @@ const Configure = () => {
 								onClick={handleSubmit}
 							>
 								Save
-							</LoadingButton>
+							</Button>
 						</Stack>
 					</Stack>
 				</>
diff --git a/Client/src/Pages/Uptime/Create/index.jsx b/Client/src/Pages/Uptime/Create/index.jsx
index a0fcce43b..3526550a4 100644
--- a/Client/src/Pages/Uptime/Create/index.jsx
+++ b/Client/src/Pages/Uptime/Create/index.jsx
@@ -13,7 +13,6 @@ import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMoni
 
 // MUI
 import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
 
 //Components
 import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -143,8 +142,8 @@ const CreateMonitor = () => {
 			...monitor,
 			[formName]: value,
 		};
-		if (formName === 'type') {
-			newMonitor.url = '';
+		if (formName === "type") {
+			newMonitor.url = "";
 		}
 		setMonitor(newMonitor);
 
@@ -405,7 +404,7 @@ const CreateMonitor = () => {
 					direction="row"
 					justifyContent="flex-end"
 				>
-					<LoadingButton
+					<Button
 						variant="contained"
 						color="accent"
 						onClick={handleCreateMonitor}
@@ -413,7 +412,7 @@ const CreateMonitor = () => {
 						loading={isLoading}
 					>
 						Create monitor
-					</LoadingButton>
+					</Button>
 				</Stack>
 			</Stack>
 		</Box>
diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js
index 02bf6a1c0..c521cb117 100644
--- a/Client/src/Utils/Theme/globalTheme.js
+++ b/Client/src/Utils/Theme/globalTheme.js
@@ -132,7 +132,7 @@ const baseTheme = (palette) => ({
 						backgroundColor: theme.palette.secondary.main,
 						color: theme.palette.primary.contrastText,
 					},
-					"&.MuiLoadingButton-root": {
+					"&.MuiButton-root": {
 						"&:disabled": {
 							backgroundColor: theme.palette.secondary.main,
 							color: theme.palette.primary.contrastText,
@@ -141,12 +141,13 @@ const baseTheme = (palette) => ({
 							boxShadow: `0 0 0 1px ${theme.palette.accent.main}`, // CAIO_REVIEW, this should really have a solid BG color
 						},
 					},
-					"&.MuiLoadingButton-loading": {
-						"& .MuiLoadingButton-label": {
+					"&.MuiButton-loading": {
+						"&:disabled": {
 							color: "transparent",
 						},
-						"& .MuiLoadingButton-loadingIndicator": {
-							color: "inherit",
+
+						"& .MuiButton-loadingIndicator": {
+							color: theme.palette.primary.contrastText,
 						},
 					},
 				}),