diff --git a/Client/src/Components/ButtonSpinner/index.jsx b/Client/src/Components/ButtonSpinner/index.jsx
index 2cfdaad5d..f584d1cac 100644
--- a/Client/src/Components/ButtonSpinner/index.jsx
+++ b/Client/src/Components/ButtonSpinner/index.jsx
@@ -18,25 +18,12 @@ const levelConfig = {
     variant: "contained",
     color: "error",
   },
-  imagePrimary: {
-    color: "primary",
-    variant: "contained",
-  },
-  imageSecondary: {
-    color: "secondary",
-    variant: "outlined",
-  },
-  imageTertiary: {
-    color: "tertiary",
-    variant: "text",
-  },
 };
 
 /**
- * ButtonSpinner component displays a button with loading loadingText capability.
  * @component
  * @param {Object} props
- * @param {'primary' | 'secondary' | 'tertiary' | 'error' | 'imagePrimary' | 'imageSecondary' | 'imageTertiary'} props.level - The style level of the button.
+ * @param {'primary' | 'secondary' | 'tertiary' | 'error'} props.level - The style level of the button.
  * @param {string} props.label - The label text displayed on the button.
  * @param {React.ReactNode} [props.img] - Icon or image element to display within the button.
  * @param {boolean} [props.disabled=false] - Determines if the button is disabled.
diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx
index 583f8bda0..ef6747026 100644
--- a/Client/src/Pages/Demo/Demo.jsx
+++ b/Client/src/Pages/Demo/Demo.jsx
@@ -390,7 +390,7 @@ const Demo = () => {
           isLoading={isLoading}
         />
         <ButtonSpinner
-          level="imagePrimary"
+          level="primary"
           label="Upload"
           position="start"
           img={<UploadIcon/>}
@@ -398,7 +398,7 @@ const Demo = () => {
           isLoading={isLoading}
         />
         <ButtonSpinner
-          level="imageSecondary"
+          level="secondary"
           label="Send"
           position="end"
           img={<SendIcon/>}
diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css
index e69de29bb..1e48dcddf 100644
--- a/Client/src/Pages/Settings/index.css
+++ b/Client/src/Pages/Settings/index.css
@@ -0,0 +1,18 @@
+.edit-profile-form, .delete-profile-form{
+    width: inherit;
+}
+.edit-profile-form__wrapper, .delete-profile-form__wrapper{
+    width: 90%;
+    
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+.edit-profile-form__wrapper:not(:first-of-type){
+    margin-top: 40px;
+}
+.edit-profile-form__wrapper input{
+    font-size: 13px;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 639bbef54..87c5eddb7 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -1,9 +1,295 @@
-import React from 'react'
+import PropTypes from "prop-types";
+import { useState } from "react";
+import {
+  Box,
+  Typography,
+  Tab,
+  useTheme,
+  TextField,
+  Avatar,
+  Stack,
+  Divider,
+} from "@mui/material";
+import TabPanel from "@mui/lab/TabPanel";
+import TabContext from "@mui/lab/TabContext";
+import TabList from "@mui/lab/TabList";
+import "./index.css";
+
+import ButtonSpinner from "../../Components/ButtonSpinner";
+import Button from "../../Components/Button";
+
+const tabList = ["Profile", "Password", "Team"];
 
 const Settings = () => {
-    return (
-        <div>Settings</div>
-    )
-}
+  //(tab) 0 - Profile
+  //(tab) 1 - Password
+  //(tab) 2 - Team
+  const [tab, setTab] = useState("0");
+  const handleTabChange = (event, newTab) => {
+    setTab(newTab);
+  };
 
-export default Settings
\ No newline at end of file
+  const theme = useTheme();
+
+  const [isLoading, setIsLoading] = useState(false);
+  //TODO - implement delete profile picture function
+  const handleDeletePicture = () => {
+    setIsLoading(true);
+
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 2000);
+  };
+  const handleUpdatePicture = () => {};
+  const handleDeleteAccount = () => {
+    setIsLoading(true);
+
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 2000);
+  };
+  return (
+    <Box
+      flexDirection="column"
+      //TODO - need to figure out document sizing
+      //TODO - breakpoints for responsive design
+      height="calc(100vh - 104px)"
+      minWidth={theme.spacing(55)}
+      width="100vw"
+      maxWidth="calc(100vw - 700px)"
+      mt={theme.spacing(8)}
+      pt={theme.spacing(5)}
+      px={theme.spacing(10)}
+    >
+      <TabContext value={tab}>
+        <Box width="100%" sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <TabList onChange={handleTabChange} aria-label="setting tabs">
+            {tabList.map((label, index) => (
+              <Tab
+                label={label}
+                key={index}
+                value={index.toString()}
+                sx={{
+                  fontSize: "13px",
+                  color: theme.palette.secondary.main,
+                  textTransform: "none",
+                  minWidth: "fit-content",
+                  paddingLeft: "0",
+                  paddingY: "8px",
+                  marginRight: "20px",
+                  "&:focus": {
+                    outline: "none",
+                  },
+                }}
+              />
+            ))}
+          </TabList>
+        </Box>
+        <TabPanel
+          value="0"
+          sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
+        >
+          <form className="edit-profile-form" noValidate spellCheck="false">
+            <div className="edit-profile-form__wrapper">
+              <Typography
+                variant="h4"
+                component="h1"
+                sx={{
+                  flex: 1,
+                  color: theme.palette.secondary.main,
+                  fontSize: "13px",
+                  fontWeight: "700",
+                  marginRight: "10px",
+                }}
+              >
+                First Name
+              </Typography>
+              <TextField
+                id="edit-first-name"
+                placeholder="Enter your first name"
+                sx={{
+                  flex: 1,
+                  minWidth: theme.spacing(30),
+                }}
+              ></TextField>
+            </div>
+            <div className="edit-profile-form__wrapper">
+              <Typography
+                variant="h4"
+                component="h1"
+                sx={{
+                  flex: 1,
+                  color: theme.palette.secondary.main,
+                  fontSize: "13px",
+                  fontWeight: "700",
+                  marginRight: "10px",
+                }}
+              >
+                Last Name
+              </Typography>
+              <TextField
+                id="edit-last-name"
+                placeholder="Enter your last name"
+                sx={{
+                  flex: 1,
+                  minWidth: theme.spacing(30),
+                }}
+              ></TextField>
+            </div>
+            <div className="edit-profile-form__wrapper">
+              <Stack
+                direction="column"
+                gap="8px"
+                sx={{
+                  flex: 1,
+                  marginRight: "10px",
+                }}
+              >
+                <Typography
+                  variant="h4"
+                  component="h1"
+                  sx={{
+                    color: theme.palette.secondary.main,
+                    fontSize: "13px",
+                    fontWeight: "700",
+                  }}
+                >
+                  Email
+                </Typography>
+                <Typography
+                  variant="h4"
+                  component="p"
+                  sx={{
+                    color: theme.palette.secondary.main,
+                    opacity: 0.6,
+                    fontSize: "13px",
+                  }}
+                >
+                  After updating, you'll receive a confirmation email.
+                </Typography>
+              </Stack>
+              <TextField
+                id="edit-email"
+                placeholder="Enter your email"
+                sx={{
+                  flex: 1,
+                  minWidth: theme.spacing(30),
+                }}
+              ></TextField>
+            </div>
+            <div className="edit-profile-form__wrapper">
+              <Stack
+                direction="column"
+                gap="8px"
+                sx={{ flex: 1, marginRight: "10px" }}
+              >
+                <Typography
+                  variant="h4"
+                  component="h1"
+                  sx={{
+                    color: theme.palette.secondary.main,
+                    fontSize: "13px",
+                    fontWeight: "700",
+                  }}
+                >
+                  Your Photo
+                </Typography>
+                <Typography
+                  variant="h4"
+                  component="p"
+                  sx={{
+                    color: theme.palette.secondary.main,
+                    opacity: 0.6,
+                    fontSize: "13px",
+                  }}
+                >
+                  This photo will be displayed in your profile page.
+                </Typography>
+              </Stack>
+              <Stack direction="row" alignContent="center" sx={{ flex: 1 }}>
+                {/* TODO - Use Avatar component instead of @mui */}
+                <Avatar
+                  alt="Remy Sharp"
+                  src="/static/images/avatar/2.jpg"
+                  className="icon-button-avatar"
+                  style={{ width: "64px", height: "64px" }}
+                />
+                {/* TODO - delete pfp functionality */}
+                <ButtonSpinner
+                  level="tertiary"
+                  label="Delete"
+                  onClick={handleDeletePicture}
+                  isLoading={isLoading}
+                  sx={{
+                    "&:focus": {
+                      outline: "none",
+                    },
+                  }}
+                />
+                {/* TODO - modal popup for update pfp? */}
+                <Button
+                  level="tertiary"
+                  label="Update"
+                  onClick={handleUpdatePicture}
+                  sx={{
+                    color: theme.palette.primary.main,
+                    "&:focus": {
+                      outline: "none",
+                    },
+                  }}
+                />
+              </Stack>
+            </div>
+          </form>
+          <Divider sx={{ marginY: theme.spacing(6.25) }} />
+          <form className="delete-profile-form" noValidate spellCheck="false">
+            <div className="delete-profile-form__wrapper">
+              <Stack direction="column" gap="15px">
+                <Typography
+                  variant="h4"
+                  component="h1"
+                  sx={{
+                    color: theme.palette.secondary.main,
+                    fontSize: "13px",
+                    fontWeight: "700",
+                  }}
+                >
+                  Delete Account
+                </Typography>
+                <Typography
+                  variant="h4"
+                  component="p"
+                  sx={{
+                    color: theme.palette.secondary.main,
+                    opacity: 0.6,
+                    fontSize: "13px",
+                  }}
+                >
+                  Note that deleting your account will remove all data from our
+                  system. This is permanent and non-recoverable.
+                </Typography>
+                <Box sx={{ mt: theme.spacing(1) }}>
+                  <Button
+                    level="error"
+                    label="Delete Account"
+                    onClick={handleDeleteAccount}
+                    sx={{
+                      fontSize: "13px",
+                      "&:focus": {
+                        outline: "none",
+                      },
+                    }}
+                  />
+                </Box>
+              </Stack>
+            </div>
+          </form>
+        </TabPanel>
+        <TabPanel value="1">Password</TabPanel>
+        <TabPanel value="2">Team</TabPanel>
+      </TabContext>
+    </Box>
+  );
+};
+
+export default Settings;
diff --git a/Client/src/index.css b/Client/src/index.css
index 092992f09..1e84c214f 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -3,9 +3,9 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
+  /* color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #242424; */
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;