diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx
index cd9dcc18e..eb5fbd13b 100644
--- a/Client/src/Components/Alert/index.jsx
+++ b/Client/src/Components/Alert/index.jsx
@@ -1,12 +1,11 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import { Box, IconButton, Stack, Typography } from "@mui/material";
+import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
 import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
 import CloseIcon from "@mui/icons-material/Close";
 import "./index.css";
-import Button from "../Button";
 
 /**
  * Icons mapping for different alert variants.
@@ -65,8 +64,8 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
         )}
         {hasIcon && isToast && (
           <Button
-            level="tertiary"
-            label="Dismiss"
+            variant="text"
+            color="info"
             onClick={onClick}
             sx={{
               fontWeight: "600",
@@ -74,15 +73,10 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
               mt: theme.spacing(4),
               padding: 0,
               minWidth: 0,
-              "&:hover": {
-                backgroundColor: "transparent",
-              },
-              "& .MuiTouchRipple-root": {
-                pointerEvents: "none",
-                display: "none",
-              },
             }}
-          ></Button>
+          >
+            Dismiss
+          </Button>
         )}
       </Stack>
       {isToast && (
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index aed322beb..33073d838 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -13,6 +13,7 @@ import {
   Box,
   Typography,
   Stack,
+  Button,
 } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { setRowsPerPage } from "../../Features/UI/uiSlice";
@@ -21,7 +22,6 @@ import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
 import LeftArrow from "../../assets/icons/left-arrow.svg?react";
 import RightArrow from "../../assets/icons/right-arrow.svg?react";
 import SelectorVertical from "../../assets/icons/selector-vertical.svg?react";
-import Button from "../Button";
 import "./index.css";
 /**
  * Component for pagination actions (first, previous, next, last).
@@ -54,37 +54,37 @@ const TablePaginationActions = (props) => {
   return (
     <Box sx={{ flexShrink: 0, ml: "24px" }}>
       <Button
-        level="secondary"
-        label=""
-        img={<LeftArrowDouble />}
+        variant="group"
         onClick={handleFirstPageButtonClick}
         disabled={page === 0}
         aria-label="first page"
-      />
+      >
+        <LeftArrowDouble />
+      </Button>
       <Button
-        level="secondary"
-        label=""
-        img={<LeftArrow />}
+        variant="group"
         onClick={handleBackButtonClick}
         disabled={page === 0}
         aria-label="previous page"
-      />
+      >
+        <LeftArrow />
+      </Button>
       <Button
-        level="secondary"
-        label=""
-        img={<RightArrow />}
+        variant="group"
         onClick={handleNextButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="next page"
-      />
+      >
+        <RightArrow />
+      </Button>
       <Button
-        level="secondary"
-        label=""
-        img={<RightArrowDouble />}
+        variant="group"
         onClick={handleLastPageButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="last page"
-      />
+      >
+        <RightArrowDouble />
+      </Button>
     </Box>
   );
 };
@@ -293,19 +293,10 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
             sx={{
               mt: theme.spacing(6),
               color: theme.palette.text.secondary,
-              "& button.MuiButtonBase-root, & .MuiSelect-select": {
-                border: 1,
-                borderColor: theme.palette.border.light,
-                borderRadius: theme.shape.borderRadius,
-              },
               "& svg path": {
                 stroke: theme.palette.text.tertiary,
                 strokeWidth: 1.3,
               },
-              "& button:not(.Mui-disabled):hover": {
-                backgroundColor: theme.palette.background.fill,
-                borderColor: theme.palette.background.fill,
-              },
             }}
           />
         </Stack>
diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx
index 26d818bdf..8d6b21f73 100644
--- a/Client/src/Components/Fallback/index.jsx
+++ b/Client/src/Components/Fallback/index.jsx
@@ -1,10 +1,9 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import Skeleton from "../../assets/Images/create-placeholder.svg?react";
 import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
 import Background from "../../assets/Images/background-grid.svg?react";
-import Button from "../Button";
 import Check from "../Check/Check";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
@@ -66,11 +65,13 @@ const Fallback = ({ title, checks, link = "/", isAdmin }) => {
       {/* TODO - display a different fallback if user is not an admin*/}
       {isAdmin && (
         <Button
-          level="primary"
-          label={`Let's create your ${title}`}
+          variant="contained"
+          color="primary"
           sx={{ alignSelf: "center" }}
           onClick={() => navigate(link)}
-        />
+        >
+          Let's create your {title}
+        </Button>
       )}
     </Stack>
   );
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 67c48d034..1611db818 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -1,9 +1,8 @@
 import { useTheme } from "@emotion/react";
 import { useRef, useState } from "react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Box, Divider, Modal, Stack, Typography } from "@mui/material";
+import { Box, Button, Divider, Modal, Stack, Typography } from "@mui/material";
 import ButtonSpinner from "../../ButtonSpinner";
-import Button from "../../Button";
 import Avatar from "../../Avatar";
 import Field from "../../Inputs/Field";
 import ImageField from "../../Inputs/Image";
@@ -292,19 +291,12 @@ const ProfilePanel = () => {
               }
               sx={{ mr: "8px" }}
             />
-            <Button
-              level="tertiary"
-              label="Delete"
-              onClick={handleDeletePicture}
-            />
-            <Button
-              level="tertiary"
-              label="Update"
-              onClick={openPictureModal}
-              sx={{
-                color: theme.palette.primary.main,
-              }}
-            />
+            <Button variant="text" color="info" onClick={handleDeletePicture}>
+              Delete
+            </Button>
+            <Button variant="text" color="primary" onClick={openPictureModal}>
+              Update
+            </Button>
           </Stack>
         </Stack>
         <Divider
@@ -339,13 +331,8 @@ const ProfilePanel = () => {
           borderColor: theme.palette.border.light,
         }}
       />
-      <Stack
-        component="form"
-        noValidate
-        spellCheck="false"
-        gap={theme.spacing(4)}
-      >
-        <Box>
+      <Box component="form" noValidate spellCheck="false">
+        <Box mb={theme.spacing(6)}>
           <Typography component="h1">Delete account</Typography>
           <Typography component="p" sx={{ opacity: 0.6 }}>
             Note that deleting your account will remove all data from our
@@ -353,12 +340,13 @@ const ProfilePanel = () => {
           </Typography>
         </Box>
         <Button
-          level="error"
-          label="Delete account"
+          variant="contained"
+          color="error"
           onClick={() => setIsOpen("delete")}
-          sx={{ width: "fit-content", mt: theme.spacing(4) }}
-        />
-      </Stack>
+        >
+          Delete account
+        </Button>
+      </Box>
       {/* TODO - Update ModalPopup Component with @mui for reusability */}
       <Modal
         aria-labelledby="modal-delete-account"
@@ -400,11 +388,9 @@ const ProfilePanel = () => {
             mt={theme.spacing(5)}
             justifyContent="flex-end"
           >
-            <Button
-              level="tertiary"
-              label="Cancel"
-              onClick={() => setIsOpen("")}
-            />
+            <Button variant="text" color="info" onClick={() => setIsOpen("")}>
+              Cancel
+            </Button>
             <ButtonSpinner
               level="error"
               label="Delete account"
@@ -480,15 +466,19 @@ const ProfilePanel = () => {
             justifyContent="flex-end"
           >
             <Button
-              level="secondary"
-              label="Edit"
+              variant="outlined"
+              color="secondary"
               disabled
               sx={{ mr: "auto" }}
-            />
-            <Button level="tertiary" label="Remove" onClick={removePicture} />
+            >
+              Edit
+            </Button>
+            <Button variant="text" color="info" onClick={removePicture}>
+              Remove
+            </Button>
             <Button
-              level="primary"
-              label="Update"
+              variant="contained"
+              color="primary"
               onClick={handleUpdatePicture}
               disabled={
                 (Object.keys(errors).length !== 0 && errors?.picture) ||
@@ -496,7 +486,9 @@ const ProfilePanel = () => {
                   ? true
                   : false
               }
-            />
+            >
+              Update
+            </Button>
           </Stack>
         </Stack>
       </Modal>
diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx
index 0936a1b2f..88bc1983c 100644
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/Client/src/Pages/Auth/CheckEmail.jsx
@@ -1,11 +1,10 @@
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router";
 import { createToast } from "../../Utils/toastUtils";
 import { forgotPassword } from "../../Features/Auth/authSlice";
-import Button from "../../Components/Button";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import EmailIcon from "../../assets/icons/email.svg?react";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
@@ -92,7 +91,7 @@ const CheckEmail = () => {
         "& h1": {
           color: theme.palette.primary.main,
           fontWeight: 600,
-          fontSize: 26,
+          fontSize: 22,
         },
         "& p": {
           fontSize: 14,
@@ -150,14 +149,16 @@ const CheckEmail = () => {
             </Typography>
           </Box>
           <Button
-            level="primary"
-            label="Open email app"
+            variant="contained"
+            color="primary"
             onClick={openMail}
             sx={{
               width: "100%",
               maxWidth: 400,
             }}
-          />
+          >
+            Open email app
+          </Button>
           <Typography sx={{ alignSelf: "center", mb: theme.spacing(6) }}>
             Didn&apos;t receive the email?{" "}
             <Typography
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index 6e741d4c7..c8946b7fb 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -1,12 +1,11 @@
 import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { credentials } from "../../Validation/validation";
 import { login } from "../../Features/Auth/authSlice";
 import { useDispatch, useSelector } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
-import Button from "../../Components/Button";
 import { networkService } from "../../main";
 import Field from "../../Components/Inputs/Field";
 import background from "../../assets/Images/background_pattern_decorative.png";
@@ -40,17 +39,22 @@ const LandingPage = ({ onContinue }) => {
         </Box>
         <Box width="100%">
           <Button
-            level="secondary"
-            label="Continue with Email"
-            img={<Mail />}
+            variant="outlined"
+            color="info"
             onClick={onContinue}
             sx={{
               width: "100%",
               "& svg": {
                 mr: theme.spacing(4),
+                "& path": {
+                  stroke: theme.palette.other.icon,
+                },
               },
             }}
-          />
+          >
+            <Mail />
+            Continue with Email
+          </Button>
         </Box>
         <Box maxWidth={400}>
           <Typography className="tos-p">
@@ -151,27 +155,29 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
         </Box>
         <Stack direction="row" justifyContent="space-between">
           <Button
-            level="secondary"
-            label="Back"
-            animate="slideLeft"
-            img={<ArrowBackRoundedIcon />}
+            variant="outlined"
+            color="info"
             onClick={onBack}
             sx={{
-              mb: theme.spacing(6),
-              px: theme.spacing(8),
+              px: theme.spacing(5),
               "& svg.MuiSvgIcon-root": {
-                mr: theme.spacing(2),
+                mr: theme.spacing(3),
               },
             }}
             props={{ tabIndex: -1 }}
-          />
+          >
+            <ArrowBackRoundedIcon />
+            Back
+          </Button>
           <Button
-            level="primary"
-            label="Continue"
+            variant="contained"
+            color="primary"
             onClick={onSubmit}
             disabled={errors.email && true}
             sx={{ width: "30%" }}
-          />
+          >
+            Continue
+          </Button>
         </Stack>
       </Stack>
     </>
@@ -219,6 +225,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
     <>
       <Stack
         gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        position="relative"
         textAlign="center"
       >
         <Box>
@@ -243,29 +250,39 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
         </Box>
         <Stack direction="row" justifyContent="space-between">
           <Button
-            level="secondary"
-            label="Back"
-            animate="slideLeft"
-            img={<ArrowBackRoundedIcon />}
+            variant="outlined"
+            color="info"
             onClick={onBack}
             sx={{
-              mb: theme.spacing(6),
-              px: theme.spacing(8),
+              px: theme.spacing(5),
               "& svg.MuiSvgIcon-root": {
-                mr: theme.spacing(2),
+                mr: theme.spacing(3),
               },
             }}
             props={{ tabIndex: -1 }}
-          />
+          >
+            <ArrowBackRoundedIcon />
+            Back
+          </Button>
           <Button
-            level="primary"
-            label="Continue"
+            variant="contained"
+            color="primary"
             onClick={onSubmit}
             disabled={errors.password && true}
             sx={{ width: "30%" }}
-          />
+          >
+            Continue
+          </Button>
         </Stack>
-        <Box textAlign="center">
+        <Box
+          textAlign="center"
+          sx={{
+            position: "absolute",
+            top: "103%",
+            left: "50%",
+            transform: "translateX(-50%)"
+          }}
+        >
           <Typography
             className="forgot-p"
             display="inline-block"
diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
index 2d07de23e..7be6d325d 100644
--- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
@@ -1,10 +1,9 @@
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router";
 import { useDispatch } from "react-redux";
 import { clearAuthState } from "../../Features/Auth/authSlice";
 import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import Button from "../../Components/Button";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import ConfirmIcon from "../../assets/icons/confirm-icon.svg?react";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
@@ -85,14 +84,16 @@ const NewPasswordConfirmed = () => {
             </Typography>
           </Box>
           <Button
-            level="primary"
-            label="Continue"
+            variant="contained"
+            color="primary"
             onClick={() => navigate("/monitors")}
             sx={{
               width: "100%",
               maxWidth: 400,
             }}
-          />
+          >
+            Continue
+          </Button>
         </Stack>
       </Stack>
       <Box textAlign="center" p={theme.spacing(12)}>
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 8de08e2d3..e454b355f 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import { useDispatch } from "react-redux";
 import { credentials } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
@@ -13,11 +13,9 @@ import Logo from "../../../assets/icons/bwu-icon.svg?react";
 import Mail from "../../../assets/icons/mail.svg?react";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import Check from "../../../Components/Check/Check";
-import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import { networkService } from "../../../main";
 import "../index.css";
-import { logger } from "../../../Utils/Logger";
 
 /**
  * Displays the initial landing page.
@@ -46,17 +44,22 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => {
         </Box>
         <Box width="100%">
           <Button
-            level="secondary"
-            label="Sign up with Email"
-            img={<Mail />}
+            variant="outlined"
+            color="info"
             onClick={onSignup}
             sx={{
               width: "100%",
               "& svg": {
                 mr: theme.spacing(4),
+                "& path": {
+                  stroke: theme.palette.other.icon,
+                },
               },
             }}
-          />
+          >
+            <Mail />
+            Sign up with Email
+          </Button>
         </Box>
         <Box maxWidth={400}>
           <Typography className="tos-p">
@@ -180,26 +183,29 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
         </Box>
         <Stack direction="row" justifyContent="space-between">
           <Button
-            level="secondary"
-            label="Back"
-            animate="slideLeft"
-            img={<ArrowBackRoundedIcon />}
+            variant="outlined"
+            color="info"
             onClick={onBack}
             sx={{
-              px: theme.spacing(8),
+              px: theme.spacing(5),
               "& svg.MuiSvgIcon-root": {
-                mr: theme.spacing(2),
+                mr: theme.spacing(3),
               },
             }}
             props={{ tabIndex: -1 }}
-          />
+          >
+            <ArrowBackRoundedIcon />
+            Back
+          </Button>
           <Button
-            level="primary"
-            label="Continue"
+            variant="contained"
+            color="primary"
             onClick={onSubmit}
             disabled={(errors.firstName || errors.lastName) && true}
             sx={{ width: "30%" }}
-          />
+          >
+            Continue
+          </Button>
         </Stack>
       </Stack>
     </>
@@ -270,26 +276,29 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
         </Box>
         <Stack direction="row" justifyContent="space-between">
           <Button
-            level="secondary"
-            label="Back"
-            animate="slideLeft"
-            img={<ArrowBackRoundedIcon />}
+            variant="outlined"
+            color="info"
             onClick={onBack}
             sx={{
-              px: theme.spacing(8),
+              px: theme.spacing(5),
               "& svg.MuiSvgIcon-root": {
-                mr: theme.spacing(2),
+                mr: theme.spacing(3),
               },
             }}
             props={{ tabIndex: -1 }}
-          />
+          >
+            <ArrowBackRoundedIcon />
+            Back
+          </Button>
           <Button
-            level="primary"
-            label="Continue"
+            variant="contained"
+            color="primary"
             onClick={onSubmit}
             disabled={errors.email && true}
             sx={{ width: "30%" }}
-          />
+          >
+            Continue
+          </Button>
         </Stack>
       </Stack>
     </>
@@ -443,26 +452,29 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
         </Box>
         <Stack direction="row" justifyContent="space-between">
           <Button
-            level="secondary"
-            label="Back"
-            animate="slideLeft"
-            img={<ArrowBackRoundedIcon />}
+            variant="outlined"
+            color="info"
             onClick={onBack}
             sx={{
-              px: theme.spacing(8),
+              px: theme.spacing(5),
               "& svg.MuiSvgIcon-root": {
-                mr: theme.spacing(2),
+                mr: theme.spacing(3),
               },
             }}
             props={{ tabIndex: -1 }}
-          />
+          >
+            <ArrowBackRoundedIcon />
+            Back
+          </Button>
           <Button
-            level="primary"
-            label="Continue"
+            variant="contained"
+            color="primary"
             onClick={onSubmit}
             disabled={errors.email && true}
             sx={{ width: "30%" }}
-          />
+          >
+            Continue
+          </Button>
         </Stack>
       </Stack>
     </>
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 75e8fb174..5d756298e 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -1,7 +1,12 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import { ButtonGroup, Stack, Skeleton, Typography } from "@mui/material";
-import Button from "../../Components/Button";
+import {
+  ButtonGroup,
+  Stack,
+  Skeleton,
+  Typography,
+  Button,
+} from "@mui/material";
 import { networkService } from "../../main";
 import { useTheme } from "@emotion/react";
 import Select from "../../Components/Inputs/Select";
@@ -78,11 +83,7 @@ const Incidents = () => {
   };
 
   return (
-    <Stack
-      className="incidents"
-      pt={theme.spacing(21)}
-      gap={theme.spacing(12)}
-    >
+    <Stack className="incidents" pt={theme.spacing(21)} gap={theme.spacing(12)}>
       {loading ? (
         <SkeletonLayout />
       ) : (
@@ -114,38 +115,26 @@ const Incidents = () => {
               }}
             >
               <Button
-                level="secondary"
-                label="All"
+                variant="group"
+                filled={(filter === "all").toString()}
                 onClick={() => setFilter("all")}
-                sx={{
-                  backgroundColor:
-                    filter === "all"
-                      ? theme.palette.background.fill
-                      : theme.palette.background.main,
-                }}
-              />
+              >
+                All
+              </Button>
               <Button
-                level="secondary"
-                label="Down"
+                variant="group"
+                filled={(filter === "down").toString()}
                 onClick={() => setFilter("down")}
-                sx={{
-                  backgroundColor:
-                    filter === "down"
-                      ? theme.palette.background.fill
-                      : theme.palette.background.main,
-                }}
-              />
+              >
+                Down
+              </Button>
               <Button
-                level="secondary"
-                label="Cannot Resolve"
+                variant="group"
+                filled={(filter === "resolve").toString()}
                 onClick={() => setFilter("resolve")}
-                sx={{
-                  backgroundColor:
-                    filter === "resolve"
-                      ? theme.palette.background.fill
-                      : theme.palette.background.main,
-                }}
-              />
+              >
+                Cannot Resolve
+              </Button>
             </ButtonGroup>
           </Stack>
           <IncidentTable
diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx
index 0e3bd71b9..d292d1aa2 100644
--- a/Client/src/Pages/Integrations/index.jsx
+++ b/Client/src/Pages/Integrations/index.jsx
@@ -1,6 +1,5 @@
 import PropTypes from "prop-types";
-import { Stack, Typography, Grid } from "@mui/material";
-import Button from "../../Components/Button";
+import { Stack, Typography, Grid, Button } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import Discord from "../../assets/icons/discord-icon.svg?react";
 import Slack from "../../assets/icons/slack-icon.svg?react";
@@ -47,12 +46,14 @@ const IntegrationsComponent = ({ icon, header, info, onClick }) => {
           </Typography>
         </Stack>
         <Button
-          label="Add"
-          level="primary"
+          variant="contained"
+          color="primary"
           onClick={onClick}
           sx={{ alignSelf: "center" }}
           disabled={true}
-        />
+        >
+          Add
+        </Button>
       </Stack>
     </Grid>
   );
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index c4b142e2a..43102ac21 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -1,7 +1,6 @@
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import "./index.css";
 import { useState } from "react";
-import Button from "../../../Components/Button";
 import Back from "../../../assets/icons/left-arrow-long.svg?react";
 import Select from "../../../Components/Inputs/Select";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
@@ -230,18 +229,17 @@ const CreateNewMaintenanceWindow = () => {
     <div className="create-maintenance-window">
       <Stack gap={theme.spacing(10)}>
         <Button
-          id="btn-back"
+          variant="contained"
+          color="secondary"
           sx={{
             width: "100px",
             height: "30px",
             gap: "10px",
-            backgroundColor: theme.palette.background.fill,
-            color: theme.palette.text.secondary,
           }}
-          label="Back"
-          level="tertiary"
-          img={<Back />}
-        />
+        >
+          <Back />
+          Back
+        </Button>
         <Box>
           <Typography
             sx={{
@@ -278,26 +276,19 @@ const CreateNewMaintenanceWindow = () => {
         </Stack>
         <Stack justifyContent="end" direction="row" marginTop={3}>
           <Button
+            variant="text"
+            color="info"
             sx={{
               "&:hover": {
                 backgroundColor: "transparent",
-                boxShadow: "none",
               },
             }}
-            level="tertiary"
-            label="Cancel"
-          />
-          <Button
-            sx={{
-              "&:hover": {
-                backgroundColor: "#1570EF",
-                boxShadow: "none",
-              },
-            }}
-            level="primary"
-            label="Create"
-            onClick={handleSubmit}
-          />
+          >
+            Cancel
+          </Button>
+          <Button variant="contained" color="primary" onClick={handleSubmit}>
+            Create
+          </Button>
         </Stack>
       </Stack>
     </div>
diff --git a/Client/src/Pages/Monitors/Home/actionsMenu.jsx b/Client/src/Pages/Monitors/Home/actionsMenu.jsx
index 272aeb6fd..7d342f5d7 100644
--- a/Client/src/Pages/Monitors/Home/actionsMenu.jsx
+++ b/Client/src/Pages/Monitors/Home/actionsMenu.jsx
@@ -4,6 +4,7 @@ import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { createToast } from "../../../Utils/toastUtils";
 import {
+  Button,
   IconButton,
   Menu,
   MenuItem,
@@ -16,7 +17,6 @@ import {
   getUptimeMonitorsByTeamId,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Settings from "../../../assets/icons/settings-bold.svg?react";
-import Button from "../../../Components/Button";
 import PropTypes from "prop-types";
 
 const ActionsMenu = ({ monitor, isAdmin }) => {
@@ -189,21 +189,25 @@ const ActionsMenu = ({ monitor, isAdmin }) => {
             justifyContent="flex-end"
           >
             <Button
-              level="tertiary"
-              label="Cancel"
+              variant="text"
+              color="info"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsOpen(false);
               }}
-            />
+            >
+              Cancel
+            </Button>
             <Button
-              level="error"
-              label="Delete"
+              variant="contained"
+              color="error"
               onClick={(e) => {
                 e.stopPropagation(e);
                 handleRemove(e);
               }}
-            />
+            >
+              Delete
+            </Button>
           </Stack>
         </Stack>
       </Modal>
diff --git a/Client/src/Pages/Monitors/Home/fallback.jsx b/Client/src/Pages/Monitors/Home/fallback.jsx
index c5d41ee48..f9a444e7c 100644
--- a/Client/src/Pages/Monitors/Home/fallback.jsx
+++ b/Client/src/Pages/Monitors/Home/fallback.jsx
@@ -1,6 +1,5 @@
-import { Stack, Typography } from "@mui/material";
+import { Button, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import Button from "../../../Components/Button";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 
@@ -25,13 +24,15 @@ const Fallback = ({ isAdmin }) => {
       </Typography>
       {isAdmin && (
         <Button
-          level="primary"
-          label="Create your first monitor"
+          variant="primary"
+          color="primary"
           onClick={() => {
             navigate("/monitors/create");
           }}
           sx={{ mt: theme.spacing(12) }}
-        />
+        >
+          Create your first monitor
+        </Button>
       )}
     </Stack>
   );
diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx
index 17949ce4f..7d7adf149 100644
--- a/Client/src/Pages/NotFound/index.jsx
+++ b/Client/src/Pages/NotFound/index.jsx
@@ -1,8 +1,7 @@
-import Button from "../../Components/Button";
 import React from "react";
 import PropTypes from "prop-types";
 import NotFoundSvg from "../../../src/assets/Images/sushi_404.svg";
-import { Stack, Typography } from "@mui/material";
+import { Button, Stack, Typography } from "@mui/material";
 import { useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
 
@@ -48,11 +47,13 @@ const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
         </Typography>
         <Typography fontSize={13}>{desc}</Typography>
         <Button
-          label="Go to the main dashboard"
-          level="primary"
+          variant="contained"
+          color="primary"
           sx={{ mt: theme.spacing(10) }}
           onClick={() => navigate("/")}
-        />
+        >
+          Go to the main dashboard
+        </Button>
       </Stack>
     </Stack>
   );
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 756e52d2b..92dd5bb36 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, Modal, Skeleton, Stack, Typography } from "@mui/material";
+import { Box, Button, Modal, Skeleton, Stack, Typography } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router";
 import {
@@ -11,7 +11,6 @@ import {
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
-import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
@@ -197,29 +196,33 @@ const PageSpeedConfigure = () => {
               </Box>
               <Box alignSelf="flex-end" ml="auto">
                 <Button
-                  level="tertiary"
-                  label="Pause"
-                  animate="rotate180"
-                  img={<PauseCircleOutlineIcon />}
+                  variant="contained"
+                  color="secondary"
                   sx={{
-                    backgroundColor: theme.palette.background.fill,
                     pl: theme.spacing(4),
                     pr: theme.spacing(6),
                     "& svg": {
                       mr: theme.spacing(2),
+                      "& path": {
+                        stroke: theme.palette.other.icon,
+                        strokeWidth: 0.1,
+                      },
                     },
                   }}
-                />
+                >
+                  <PauseCircleOutlineIcon />
+                  Pause
+                </Button>
                 <Button
-                  level="error"
-                  label="Remove"
+                  variant="contained"
+                  color="error"
+                  onClick={() => setIsOpen(true)}
                   sx={{
-                    boxShadow: "none",
-                    px: theme.spacing(8),
                     ml: theme.spacing(6),
                   }}
-                  onClick={() => setIsOpen(true)}
-                />
+                >
+                  Remove
+                </Button>
               </Box>
             </Stack>
             <Stack
@@ -321,11 +324,13 @@ const PageSpeedConfigure = () => {
             <Stack direction="row" justifyContent="flex-end" mt="auto">
               <Button
                 type="submit"
-                level="primary"
-                label="Save"
+                variant="contained"
+                color="primary"
                 onClick={handleSave}
-                sx={{ px: theme.spacing(12), mt: theme.spacing(12) }}
-              />
+                sx={{ px: theme.spacing(12) }}
+              >
+                Save
+              </Button>
             </Stack>
           </Stack>
         </>
@@ -376,11 +381,15 @@ const PageSpeedConfigure = () => {
             justifyContent="flex-end"
           >
             <Button
-              level="tertiary"
-              label="Cancel"
+              variant="text"
+              color="info"
               onClick={() => setIsOpen(false)}
-            />
-            <Button level="error" label="Delete" onClick={handleRemove} />
+            >
+              Cancel
+            </Button>
+            <Button variant="contained" color="error" onClick={handleRemove}>
+              Delete
+            </Button>
           </Stack>
         </Stack>
       </Modal>
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
index 4ac8d4a10..4b46fd3f0 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
@@ -22,6 +22,7 @@
 .create-page-speed .section-disabled {
   opacity: 0.4;
   padding: 10px;
+  margin-right: -5px;
   border-radius: 8px;
   user-select: none;
   pointer-events: none;
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index 342eefc71..00c02a362 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -1,11 +1,10 @@
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
-import Button from "../../../Components/Button";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
@@ -229,11 +228,13 @@ const CreatePageSpeed = () => {
         <Stack direction="row" justifyContent="flex-end" mt="auto">
           <Button
             type="submit"
-            level="primary"
-            label="Create"
+            variant="contained"
+            color="primary"
             onClick={handleCreate}
             sx={{ px: theme.spacing(12), mt: theme.spacing(12) }}
-          />
+          >
+            Create
+          </Button>
         </Stack>
       </Stack>
     </Stack>
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index f63af43db..29c0b72e0 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { Box, Skeleton, Stack, Typography } from "@mui/material";
+import { Box, Button, Skeleton, Stack, Typography } from "@mui/material";
 import { PieChart } from "@mui/x-charts/PieChart";
 import { useDrawingArea } from "@mui/x-charts";
 import { useEffect, useState } from "react";
@@ -12,7 +12,6 @@ import {
 } from "../../../Utils/timeUtils";
 import { logger } from "../../../Utils/Logger";
 import { networkService } from "../../../main";
-import Button from "../../../Components/Button";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react";
 import ClockIcon from "../../../assets/icons/maintenance.svg?react";
@@ -398,28 +397,24 @@ const PageSpeedDetails = () => {
               </Typography>
             </Box>
             <Button
-              level="tertiary"
-              label="Configure"
-              animate="rotate90"
-              img={
-                <SettingsIcon
-                  style={{
-                    width: theme.spacing(10),
-                    height: theme.spacing(10),
-                  }}
-                />
-              }
+              variant="contained"
+              color="secondary"
               onClick={() => navigate(`/pagespeed/configure/${monitorId}`)}
               sx={{
                 ml: "auto",
                 alignSelf: "flex-end",
-                backgroundColor: theme.palette.background.fill,
-                px: theme.spacing(6),
+                px: theme.spacing(5),
                 "& svg": {
-                  mr: "6px",
+                  mr: theme.spacing(3),
+                  "& path": {
+                    stroke: theme.palette.other.icon,
+                  },
                 },
               }}
-            />
+            >
+              <SettingsIcon />
+              Configure
+            </Button>
           </Stack>
           <Stack
             direction="row"
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index c0295b572..688c6d92f 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -1,6 +1,5 @@
 import { useTheme } from "@emotion/react";
-import { Box, Stack, styled, Typography } from "@mui/material";
-import Button from "../../Components/Button";
+import { Box, Button, Stack, styled, Typography } from "@mui/material";
 import ButtonSpinner from "../../Components/ButtonSpinner";
 import Field from "../../Components/Inputs/Field";
 import Link from "../../Components/Link";
@@ -156,10 +155,12 @@ const Settings = ({ isAdmin }) => {
         </ConfigBox>
         <Stack direction="row" justifyContent="flex-end">
           <Button
-            level="primary"
-            label="Save"
+            variant="contained"
+            color="primary"
             sx={{ px: theme.spacing(12), mt: theme.spacing(20) }}
-          />
+          >
+            Save
+          </Button>
         </Stack>
       </Stack>
     </Box>
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index 92481a4df..49f864e53 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -29,7 +29,7 @@ const lightTheme = createTheme({
     border: border,
     info: {
       text: text.primary,
-      main: text.secondary,
+      main: text.tertiary,
       bg: background.main,
       light: background.main,
       border: border.dark,