diff --git a/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx b/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx
index 8a7763fa2..8343a9819 100644
--- a/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx
+++ b/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx
@@ -22,11 +22,12 @@ import ButtonSpinner from "../../ButtonSpinner";
  * PasswordPanel component manages the form for editing password.
  *
  * @returns {JSX.Element}
- * 
  */
 
 const PasswordPanel = () => {
   const theme = useTheme();
+  //TODO - use redux loading state
+  //!! - currently all loading buttons are tied to the same state
   const [isLoading, setIsLoading] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
 
diff --git a/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx b/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
index 5b51a0f2b..024b1d499 100644
--- a/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
@@ -19,7 +19,6 @@ import Button from "../../Button";
  * and deleting account.
  *
  * @returns {JSX.Element}
- *
  */
 
 const ProfilePanel = () => {
diff --git a/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx b/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx
new file mode 100644
index 000000000..326dfa2ef
--- /dev/null
+++ b/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx
@@ -0,0 +1,569 @@
+import { useTheme } from "@emotion/react";
+import TabPanel from "@mui/lab/TabPanel";
+import {
+  Box,
+  Checkbox,
+  Container,
+  Divider,
+  MenuItem,
+  Modal,
+  Select,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+} from "@mui/material";
+import ButtonSpinner from "../../ButtonSpinner";
+import Button from "../../Button";
+import { useState } from "react";
+
+/**
+ * TeamPanel component manages the organization and team members,
+ * providing functionalities like renaming the organization, managing team members,
+ * and inviting new members.
+ *
+ * @returns {JSX.Element}
+ */
+
+const teamColumns = [
+  {
+    id: "checkbox",
+    label: "",
+    sx: { minWidth: "20px", width: "40px" },
+  },
+  {
+    id: "name",
+    label: "NAME",
+    sx: { fontSize: "12px" },
+  },
+  { id: "email", label: "EMAIL", sx: { fontSize: "12px" } },
+  { id: "role", label: "ROLE", sx: { fontSize: "12px" } },
+];
+//for testing, will be removed later
+const teamConfig = [
+  {
+    id: 0,
+    isChecked: false,
+    name: "John Connor",
+    email: "john@domain.com",
+    type: "admin",
+    role: "Administrator",
+    createdAt: "10/4/2022",
+  },
+  {
+    id: 1,
+    isChecked: false,
+    name: "Adam McFadden",
+    email: "adam@domain.com",
+    type: "member",
+    role: "Member",
+    createdAt: "10/4/2022",
+  },
+  {
+    id: 2,
+    isChecked: false,
+    name: "Cris Cross",
+    email: "cris@domain.com",
+    type: "member",
+    role: "Member",
+    createdAt: "10/4/2022",
+  },
+  {
+    id: 3,
+    isChecked: false,
+    name: "Prince",
+    email: "prince@domain.com",
+    type: "member",
+    role: "Member",
+    createdAt: "10/4/2022",
+  },
+];
+const actionsConfig = [
+  {
+    value: "bulk",
+    label: "Bulk actions",
+  },
+];
+const roleConfig = [
+  {
+    value: "role",
+    label: "Change role to",
+  },
+];
+
+const TeamPanel = () => {
+  const theme = useTheme();
+  //TODO - use redux loading state
+  //!! - currently all loading buttons are tied to the same state
+  const [isLoading, setIsLoading] = useState(false);
+  const [orgStates, setOrgStates] = useState({
+    name: "Bluewave Labs",
+    isLoading: false,
+    isOpen: false,
+    newName: "",
+  });
+  const toggleOrgModal = (state) => {
+    setOrgStates((prev) => ({
+      ...prev,
+      isOpen: state,
+    }));
+  };
+  const toggleOrgLoading = (state) => {
+    setOrgStates((prev) => ({
+      ...prev,
+      isLoading: state,
+    }));
+  };
+  const handleRenameOrg = () => {
+    toggleOrgLoading(true);
+
+    setTimeout(() => {
+      setOrgStates((prev) => ({
+        ...prev,
+        name: prev.newName !== "" ? prev.newName : prev.name,
+        isLoading: false,
+        isOpen: false,
+        newName: "",
+      }));
+    }, 2000);
+  };
+
+  const [teamStates, setTeamStates] = useState({
+    members: teamConfig,
+    filter: "",
+  });
+  const handleCheckCell = (id) => {
+    const updatedTeamStates = [...teamStates.members];
+    updatedTeamStates[id] = {
+      ...updatedTeamStates[id],
+      isChecked: !updatedTeamStates[id].isChecked,
+    };
+    setTeamStates((prev) => ({
+      ...prev,
+      members: updatedTeamStates,
+    }));
+  };
+  const handleFilter = (filter) => {
+    setTeamStates((prev) => ({
+      ...prev,
+      filter: filter,
+    }));
+  };
+  //TODO - implement select action function
+  const handleSelectActionType = () => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 2000);
+  };
+  //TODO - implement select role function
+  const handleSelectRoleType = () => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 2000);
+  };
+  //TODO - implement save team function
+  const handleSaveTeam = () => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 2000);
+  };
+  const [toggleInviteModal, setToggleInviteModal] = useState(false);
+  const handleInviteMember = () => {};
+  const handleMembersQuery = (type) => {
+    let count = 0;
+    teamStates.members.forEach((member) => {
+      type === "" ? count++ : member.type === type ? count++ : "";
+    });
+    return count;
+  };
+  return (
+    <TabPanel
+      value="2"
+      sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
+    >
+      <form className="edit-team-form" noValidate spellCheck="false">
+        <div className="edit-team-form__wrapper">
+          <Stack
+            direction="column"
+            gap="8px"
+            sx={{ flex: 1, marginRight: "10px" }}
+          >
+            <Typography variant="h4" component="h1">
+              Organization name
+            </Typography>
+          </Stack>
+          <Stack
+            id="org-name-flex-container"
+            direction="row"
+            justifyContent="flex-end"
+            gap="8px"
+            sx={{ flex: 1 }}
+          >
+            <ButtonSpinner
+              level="tertiary"
+              label={!orgStates.isLoading ? orgStates.name : ""}
+              disabled
+              onClick={() => toggleOrgModal(true)}
+              isLoading={orgStates.isLoading}
+              sx={{ fontSize: "13px" }}
+            />
+            <Button
+              level="primary"
+              label="Rename"
+              sx={{ paddingX: "30px", fontSize: "13px" }}
+              onClick={() => toggleOrgModal(true)}
+            />
+          </Stack>
+        </div>
+        <div className="edit-team-form__wrapper">
+          <Typography variant="h4" component="h1">
+            Team members
+          </Typography>
+        </div>
+        <div
+          className="edit-team-form__wrapper compact"
+          style={{ alignItems: "center" }}
+        >
+          <Stack
+            direction="row"
+            gap="20px"
+            alignItems="center"
+            sx={{ flex: 1, fontSize: "14px" }}
+          >
+            <Box onClick={() => handleFilter("")} sx={{ cursor: "pointer" }}>
+              All
+              <span className="members-query">
+                <span>{handleMembersQuery("")}</span>
+              </span>
+            </Box>
+            <Box
+              onClick={() => handleFilter("admin")}
+              sx={{ cursor: "pointer" }}
+            >
+              Administrator
+              <span className="members-query">
+                <span>{handleMembersQuery("admin")}</span>
+              </span>
+            </Box>
+            <Box
+              onClick={() => handleFilter("member")}
+              sx={{ cursor: "pointer" }}
+            >
+              Member
+              <span className="members-query">
+                <span>{handleMembersQuery("member")}</span>
+              </span>
+            </Box>
+          </Stack>
+          <Button
+            level="primary"
+            label="Invite a team member"
+            sx={{ paddingX: "30px", fontSize: "13px" }}
+            onClick={() => setToggleInviteModal(true)}
+          />
+        </div>
+        <div className="edit-team-form__wrapper compact">
+          <Container
+            disableGutters
+            sx={{
+              border: `1px solid ${theme.palette.section.borderColor}`,
+              borderRadius: `${theme.shape.borderRadius}px`,
+              borderBottom: "none",
+            }}
+          >
+            <Stack direction="row" gap="40px" p="20px">
+              <Stack direction="row" gap="10px" alignItems="center">
+                <Select
+                  id="select-actions"
+                  value="bulk"
+                  sx={{
+                    fontSize: "13px",
+                    color: theme.palette.secondary.main,
+                  }}
+                  inputProps={{ id: "select-actions-input" }}
+                >
+                  {actionsConfig.map((action) => (
+                    <MenuItem
+                      value={action.value}
+                      key={action.value}
+                      sx={{ fontSize: "13px" }}
+                    >
+                      {action.label}
+                    </MenuItem>
+                  ))}
+                </Select>
+                <ButtonSpinner
+                  level="secondary"
+                  label="Apply"
+                  onClick={handleSelectActionType}
+                  isLoading={isLoading}
+                  sx={{
+                    height: "fit-content",
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    bgcolor: "#fafafa",
+                  }}
+                />
+              </Stack>
+              <Stack direction="row" gap="10px" alignItems="center">
+                <Select
+                  id="select-role"
+                  value="role"
+                  sx={{
+                    fontSize: "13px",
+                    color: theme.palette.secondary.main,
+                  }}
+                  inputProps={{ id: "select-role-input" }}
+                >
+                  {roleConfig.map((role) => (
+                    <MenuItem
+                      value={role.value}
+                      key={role.value}
+                      sx={{ fontSize: "13px" }}
+                    >
+                      {role.label}
+                    </MenuItem>
+                  ))}
+                </Select>
+                <ButtonSpinner
+                  level="secondary"
+                  label="Apply"
+                  onClick={handleSelectRoleType}
+                  isLoading={isLoading}
+                  sx={{
+                    height: "fit-content",
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    bgcolor: "#fafafa",
+                  }}
+                />
+              </Stack>
+            </Stack>
+            <Table
+              sx={{
+                borderTop: `1px solid ${theme.palette.section.borderColor}`,
+                tableLayout: "fixed",
+              }}
+            >
+              <TableHead>
+                <TableRow
+                  sx={{
+                    bgcolor: "#fafafa",
+                  }}
+                >
+                  {teamColumns.map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      sx={{
+                        ...cell.sx,
+                        color: theme.palette.otherColors.slateGray,
+                      }}
+                    >
+                      {cell.label}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {teamStates.members.map((cell) =>
+                  teamStates.filter === "" ||
+                  teamStates.filter === cell.type ? (
+                    <TableRow key={cell.id}>
+                      <TableCell align="center">
+                        <Checkbox
+                          id={`${cell.id}-${cell.name}`}
+                          checked={cell.isChecked}
+                          onChange={() => handleCheckCell(cell.id)}
+                          inputProps={{ "aria-label": "controlled" }}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <Stack direction="column">
+                          <Box
+                            sx={{
+                              color: theme.palette.otherColors.blackish,
+                              verticalAlign: "top",
+                            }}
+                          >
+                            {cell.name}
+                          </Box>
+                          <Box>Created at {cell.createdAt}</Box>
+                        </Stack>
+                      </TableCell>
+                      <TableCell>{cell.email}</TableCell>
+                      <TableCell>{cell.role}</TableCell>
+                    </TableRow>
+                  ) : (
+                    ""
+                  )
+                )}
+              </TableBody>
+            </Table>
+          </Container>
+        </div>
+        <Divider
+          aria-hidden="true"
+          width="0"
+          sx={{ marginY: theme.spacing(6.25) }}
+        />
+        <Stack direction="row" justifyContent="flex-end">
+          <Box width="fit-content">
+            <ButtonSpinner
+              level="primary"
+              label="Save"
+              onClick={handleSaveTeam}
+              isLoading={isLoading}
+              loadingText="Saving..."
+              sx={{
+                paddingX: "40px",
+                height: "fit-content",
+                fontSize: "13px",
+                "&:focus": {
+                  outline: "none",
+                },
+              }}
+            />
+          </Box>
+        </Stack>
+      </form>
+      <Modal
+        aria-labelledby="modal-edit-org-name"
+        aria-describedby="edit-organization-name"
+        open={orgStates.isOpen}
+        onClose={() => toggleOrgModal(false)}
+        disablePortal
+      >
+        <Stack
+          gap="20px"
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 400,
+            bgcolor: "white",
+            border: "solid 1px #f2f2f2",
+            borderRadius: "4px",
+            boxShadow: 24,
+            p: "30px",
+            "&:focus": {
+              outline: "none",
+            },
+          }}
+        >
+          <Typography id="modal-edit-org-name" variant="h4" component="h1">
+            Rename this organization?
+          </Typography>
+          <TextField
+            id="edit-organization-name"
+            placeholder={orgStates.name}
+            spellCheck="false"
+            value={orgStates.newName}
+            onChange={(event) =>
+              setOrgStates((prev) => ({
+                ...prev,
+                newName: event.target.value,
+              }))
+            }
+          ></TextField>
+          <Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
+            <Button
+              level="tertiary"
+              label="Cancel"
+              onClick={() => toggleOrgModal(false)}
+              sx={{ fontSize: "13px" }}
+            />
+            <ButtonSpinner
+              level="primary"
+              label="Rename"
+              onClick={handleRenameOrg}
+              isLoading={orgStates.isLoading}
+              sx={{ fontSize: "13px", paddingX: "30px" }}
+            />
+          </Stack>
+        </Stack>
+      </Modal>
+      <Modal
+        aria-labelledby="modal-invite-member"
+        aria-describedby="invite-member-to-team"
+        open={toggleInviteModal}
+        onClose={() => setToggleInviteModal(false)}
+        disablePortal
+      >
+        <Stack
+          gap="10px"
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 400,
+            bgcolor: "white",
+            border: "solid 1px #f2f2f2",
+            borderRadius: "4px",
+            boxShadow: 24,
+            p: "30px",
+            "&:focus": {
+              outline: "none",
+            },
+          }}
+        >
+          <Typography id="modal-invite-member" variant="h4" component="h1">
+            Invite new team member
+          </Typography>
+          <Typography
+            id="invite-member-to-team"
+            variant="h5"
+            component="p"
+            sx={{
+              color: theme.palette.secondary.main,
+              fontSize: "13px",
+            }}
+          >
+            When you add a new team member, they will get access to all
+            monitors.
+          </Typography>
+          <TextField
+            id="input-team-member"
+            spellCheck="false"
+            // value={orgStates.newName}
+            // onChange={(event) =>
+            //   setOrgStates((prev) => ({
+            //     ...prev,
+            //     newName: event.target.value,
+            //   }))
+            // }
+          ></TextField>
+          <Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
+            <Button
+              level="tertiary"
+              label="Cancel"
+              onClick={() => setToggleInviteModal(false)}
+              sx={{ fontSize: "13px" }}
+            />
+            <ButtonSpinner
+              level="primary"
+              label="Send invite"
+              onClick={handleInviteMember}
+              isLoading={isLoading}
+              sx={{ fontSize: "13px" }}
+            />
+          </Stack>
+        </Stack>
+      </Modal>
+    </TabPanel>
+  );
+};
+
+TeamPanel.propTypes = {
+  // No props are being passed to this component, hence no specific PropTypes are defined.
+};
+
+export default TeamPanel;
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 465284e72..c49b08a38 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -2,131 +2,26 @@ import PropTypes from "prop-types";
 import { useState } from "react";
 import {
   Box,
-  Typography,
   Tab,
   useTheme,
-  TextField,
-  Stack,
-  Divider,
-  Modal,
-  FormControl,
-  OutlinedInput,
-  InputAdornment,
-  IconButton,
-  Container,
-  Table,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableBody,
-  Checkbox,
-  Select,
-  MenuItem,
 } from "@mui/material";
-import TabPanel from "@mui/lab/TabPanel";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
-import Visibility from "@mui/icons-material/Visibility";
-import VisibilityOff from "@mui/icons-material/VisibilityOff";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
-import ButtonSpinner from "../../Components/ButtonSpinner";
-import Button from "../../Components/Button";
 import "./index.css";
-import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
 import ProfilePanel from "../../Components/TabPanels/ProfileSettings/ProfilePanel";
 import PasswordPanel from "../../Components/TabPanels/ProfileSettings/PasswordPanel";
+import TeamPanel from "../../Components/TabPanels/ProfileSettings/TeamPanel";
+
+/**
+ * Settings component renders a settings page with tabs for Profile, Password, and Team settings.
+ *
+ * @returns {JSX.Element}
+ */
 
 const tabList = ["Profile", "Password", "Team"];
-const passwordConfig = {
-  current_password: {
-    id: "edit-current-password",
-    label: "Current password",
-    type: "input",
-  },
-  password: {
-    id: "edit-password",
-    label: "Password",
-    type: "input",
-  },
-  confirm_password: {
-    id: "notice-confirm-password",
-    label: "Confirm new password",
-    type: "notice",
-  },
-};
-const orgConfig = {
-  name: "Bluewave Labs",
-  isLoading: false,
-  isOpen: false,
-  newName: "",
-};
-const teamColumns = [
-  {
-    id: "checkbox",
-    label: "",
-    sx: { minWidth: "20px", width: "40px" },
-  },
-  {
-    id: "name",
-    label: "NAME",
-    sx: { fontSize: "12px" },
-  },
-  { id: "email", label: "EMAIL", sx: { fontSize: "12px" } },
-  { id: "role", label: "ROLE", sx: { fontSize: "12px" } },
-];
-const teamConfig = [
-  {
-    id: 0,
-    isChecked: false,
-    name: "John Connor",
-    email: "john@domain.com",
-    type: "admin",
-    role: "Administrator",
-    createdAt: "10/4/2022",
-  },
-  {
-    id: 1,
-    isChecked: false,
-    name: "Adam McFadden",
-    email: "adam@domain.com",
-    type: "member",
-    role: "Member",
-    createdAt: "10/4/2022",
-  },
-  {
-    id: 2,
-    isChecked: false,
-    name: "Cris Cross",
-    email: "cris@domain.com",
-    type: "member",
-    role: "Member",
-    createdAt: "10/4/2022",
-  },
-  {
-    id: 3,
-    isChecked: false,
-    name: "Prince",
-    email: "prince@domain.com",
-    type: "member",
-    role: "Member",
-    createdAt: "10/4/2022",
-  },
-];
-const actionsConfig = [
-  {
-    value: "bulk",
-    label: "Bulk actions",
-  },
-];
-const roleConfig = [
-  {
-    value: "role",
-    label: "Change role to",
-  },
-];
 
 const Settings = () => {
+  const theme = useTheme();
   //(tab) 0 - Profile
   //(tab) 1 - Password
   //(tab) 2 - Team
@@ -135,95 +30,6 @@ const Settings = () => {
     setTab(newTab);
   };
 
-  const theme = useTheme();
-
-  const [isLoading, setIsLoading] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  
-  const handleDeleteAccount = () => {
-    setIsLoading(true);
-    setTimeout(() => {
-      setIsLoading(false);
-      setIsOpen(false);
-    }, 2000);
-  };
-  const [showPassword, setShowPassword] = useState(false);
-
-  const [orgStates, setOrgStates] = useState(orgConfig);
-  const toggleOrgModal = (state) => {
-    setOrgStates((prev) => ({
-      ...prev,
-      isOpen: state,
-    }));
-  };
-  const toggleOrgLoading = (state) => {
-    setOrgStates((prev) => ({
-      ...prev,
-      isLoading: state,
-    }));
-  };
-  const handleRenameOrg = () => {
-    toggleOrgLoading(true);
-
-    setTimeout(() => {
-      setOrgStates((prev) => ({
-        ...prev,
-        name: prev.newName !== "" ? prev.newName : prev.name,
-        isLoading: false,
-        isOpen: false,
-        newName: "",
-      }));
-    }, 2000);
-  };
-
-  const [teamStates, setTeamStates] = useState({
-    members: teamConfig,
-    filter: "",
-  });
-  const handleCellChecked = (id) => {
-    const updatedTeamStates = [...teamStates.members];
-    updatedTeamStates[id] = {
-      ...updatedTeamStates[id],
-      isChecked: !updatedTeamStates[id].isChecked,
-    };
-    setTeamStates((prev) => ({
-      ...prev,
-      members: updatedTeamStates,
-    }));
-  };
-  const handleFilter = (filter) => {
-    setTeamStates((prev) => ({
-      ...prev,
-      filter: filter,
-    }));
-  };
-  const handleApplyActionSelect = () => {
-    setIsLoading(true);
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 2000);
-  };
-  const handleApplyRoleSelect = () => {
-    setIsLoading(true);
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 2000);
-  };
-  const handleSaveTeam = () => {
-    setIsLoading(true);
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 2000);
-  };
-  const [toggleInviteModal, setToggleInviteModal] = useState(false);
-  const handleInviteMember = () => {};
-  const handleMembersQuery = (type) => {
-    let count = 0;
-    teamStates.members.forEach((member) => {
-      type === "" ? count++ : member.type === type ? count++ : "";
-    });
-    return count;
-  };
   return (
     <Box
       //TODO - need to figure out document sizing
@@ -262,389 +68,14 @@ const Settings = () => {
         </Box>
         <ProfilePanel />
         <PasswordPanel />
-        <TabPanel
-          value="2"
-          sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
-        >
-          <form className="edit-team-form" noValidate spellCheck="false">
-            <div className="edit-team-form__wrapper">
-              <Stack
-                direction="column"
-                gap="8px"
-                sx={{ flex: 1, marginRight: "10px" }}
-              >
-                <Typography variant="h4" component="h1">
-                  Organization name
-                </Typography>
-              </Stack>
-              <Stack
-                id="org-name-flex-container"
-                direction="row"
-                justifyContent="flex-end"
-                gap="8px"
-                sx={{ flex: 1 }}
-              >
-                <ButtonSpinner
-                  level="tertiary"
-                  label={!orgStates.isLoading ? orgStates.name : ""}
-                  disabled
-                  onClick={() => toggleOrgModal(true)}
-                  isLoading={orgStates.isLoading}
-                  sx={{ fontSize: "13px" }}
-                />
-                <Button
-                  level="primary"
-                  label="Rename"
-                  sx={{ paddingX: "30px", fontSize: "13px" }}
-                  onClick={() => toggleOrgModal(true)}
-                />
-              </Stack>
-            </div>
-            <div className="edit-team-form__wrapper">
-              <Typography variant="h4" component="h1">
-                Team members
-              </Typography>
-            </div>
-            <div
-              className="edit-team-form__wrapper compact"
-              style={{ alignItems: "center" }}
-            >
-              <Stack
-                direction="row"
-                gap="20px"
-                alignItems="center"
-                sx={{ flex: 1, fontSize: "14px" }}
-              >
-                <Box
-                  onClick={() => handleFilter("")}
-                  sx={{ cursor: "pointer" }}
-                >
-                  All
-                  <span className="members-query">
-                    <span>{handleMembersQuery("")}</span>
-                  </span>
-                </Box>
-                <Box
-                  onClick={() => handleFilter("admin")}
-                  sx={{ cursor: "pointer" }}
-                >
-                  Administrator
-                  <span className="members-query">
-                    <span>{handleMembersQuery("admin")}</span>
-                  </span>
-                </Box>
-                <Box
-                  onClick={() => handleFilter("member")}
-                  sx={{ cursor: "pointer" }}
-                >
-                  Member
-                  <span className="members-query">
-                    <span>{handleMembersQuery("member")}</span>
-                  </span>
-                </Box>
-              </Stack>
-              <Button
-                level="primary"
-                label="Invite a team member"
-                sx={{ paddingX: "30px", fontSize: "13px" }}
-                onClick={() => setToggleInviteModal(true)}
-              />
-            </div>
-            <div className="edit-team-form__wrapper compact">
-              <Container
-                disableGutters
-                sx={{
-                  border: `1px solid ${theme.palette.section.borderColor}`,
-                  borderRadius: `${theme.shape.borderRadius}px`,
-                  borderBottom: "none",
-                }}
-              >
-                <Stack direction="row" gap="40px" p="20px">
-                  <Stack direction="row" gap="10px" alignItems="center">
-                    <Select
-                      id="select-actions"
-                      value="bulk"
-                      sx={{
-                        fontSize: "13px",
-                        color: theme.palette.secondary.main,
-                      }}
-                      inputProps={{ id: "select-actions-input" }}
-                    >
-                      {actionsConfig.map((action) => (
-                        <MenuItem
-                          value={action.value}
-                          key={action.value}
-                          sx={{ fontSize: "13px" }}
-                        >
-                          {action.label}
-                        </MenuItem>
-                      ))}
-                    </Select>
-                    <ButtonSpinner
-                      level="secondary"
-                      label="Apply"
-                      onClick={handleApplyActionSelect}
-                      isLoading={isLoading}
-                      sx={{
-                        height: "fit-content",
-                        fontSize: "13px",
-                        fontWeight: 500,
-                        bgcolor: "#fafafa",
-                      }}
-                    />
-                  </Stack>
-                  <Stack direction="row" gap="10px" alignItems="center">
-                    <Select
-                      id="select-role"
-                      value="role"
-                      sx={{
-                        fontSize: "13px",
-                        color: theme.palette.secondary.main,
-                      }}
-                      inputProps={{ id: "select-role-input" }}
-                    >
-                      {roleConfig.map((role) => (
-                        <MenuItem
-                          value={role.value}
-                          key={role.value}
-                          sx={{ fontSize: "13px" }}
-                        >
-                          {role.label}
-                        </MenuItem>
-                      ))}
-                    </Select>
-                    <ButtonSpinner
-                      level="secondary"
-                      label="Apply"
-                      onClick={handleApplyRoleSelect}
-                      isLoading={isLoading}
-                      sx={{
-                        height: "fit-content",
-                        fontSize: "13px",
-                        fontWeight: 500,
-                        bgcolor: "#fafafa",
-                      }}
-                    />
-                  </Stack>
-                </Stack>
-                <Table
-                  sx={{
-                    borderTop: `1px solid ${theme.palette.section.borderColor}`,
-                    tableLayout: "fixed",
-                  }}
-                >
-                  <TableHead>
-                    <TableRow
-                      sx={{
-                        bgcolor: "#fafafa",
-                      }}
-                    >
-                      {teamColumns.map((cell) => (
-                        <TableCell
-                          key={cell.id}
-                          sx={{
-                            ...cell.sx,
-                            color: theme.palette.otherColors.slateGray,
-                          }}
-                        >
-                          {cell.label}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {teamStates.members.map((cell) =>
-                      teamStates.filter === "" ||
-                      teamStates.filter === cell.type ? (
-                        <TableRow key={cell.id}>
-                          <TableCell align="center">
-                            <Checkbox
-                              id={`${cell.id}-${cell.name}`}
-                              checked={cell.isChecked}
-                              onChange={() => handleCellChecked(cell.id)}
-                              inputProps={{ "aria-label": "controlled" }}
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <Stack direction="column">
-                              <Box
-                                sx={{
-                                  color: theme.palette.otherColors.blackish,
-                                  verticalAlign: "top",
-                                }}
-                              >
-                                {cell.name}
-                              </Box>
-                              <Box>Created at {cell.createdAt}</Box>
-                            </Stack>
-                          </TableCell>
-                          <TableCell>{cell.email}</TableCell>
-                          <TableCell>{cell.role}</TableCell>
-                        </TableRow>
-                      ) : (
-                        ""
-                      )
-                    )}
-                  </TableBody>
-                </Table>
-              </Container>
-            </div>
-            <Divider
-              aria-hidden="true"
-              width="0"
-              sx={{ marginY: theme.spacing(6.25) }}
-            />
-            {/* !!! - All save buttons are tied to the same state */}
-            {/* TODO - Implement Save Team function */}
-            <Stack direction="row" justifyContent="flex-end">
-              <Box width="fit-content">
-                <ButtonSpinner
-                  level="primary"
-                  label="Save"
-                  onClick={handleSaveTeam}
-                  isLoading={isLoading}
-                  loadingText="Saving..."
-                  sx={{
-                    paddingX: "40px",
-                    height: "fit-content",
-                    fontSize: "13px",
-                    "&:focus": {
-                      outline: "none",
-                    },
-                  }}
-                />
-              </Box>
-            </Stack>
-          </form>
-        </TabPanel>
+        <TeamPanel />
       </TabContext>
-      <Modal
-        aria-labelledby="modal-edit-org-name"
-        aria-describedby="edit-organization-name"
-        open={orgStates.isOpen}
-        onClose={() => toggleOrgModal(false)}
-        disablePortal
-      >
-        <Stack
-          gap="20px"
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 400,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: "4px",
-            boxShadow: 24,
-            p: "30px",
-            "&:focus": {
-              outline: "none",
-            },
-          }}
-        >
-          <Typography id="modal-edit-org-name" variant="h4" component="h1">
-            Rename this organization?
-          </Typography>
-          <TextField
-            id="edit-organization-name"
-            placeholder={orgStates.name}
-            spellCheck="false"
-            value={orgStates.newName}
-            onChange={(event) =>
-              setOrgStates((prev) => ({
-                ...prev,
-                newName: event.target.value,
-              }))
-            }
-          ></TextField>
-          <Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
-            <Button
-              level="tertiary"
-              label="Cancel"
-              onClick={() => toggleOrgModal(false)}
-              sx={{ fontSize: "13px" }}
-            />
-            <ButtonSpinner
-              level="primary"
-              label="Rename"
-              onClick={handleRenameOrg}
-              isLoading={orgStates.isLoading}
-              sx={{ fontSize: "13px", paddingX: "30px" }}
-            />
-          </Stack>
-        </Stack>
-      </Modal>
-      <Modal
-        aria-labelledby="modal-invite-member"
-        aria-describedby="invite-member-to-team"
-        open={toggleInviteModal}
-        onClose={() => setToggleInviteModal(false)}
-        disablePortal
-      >
-        <Stack
-          gap="10px"
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 400,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: "4px",
-            boxShadow: 24,
-            p: "30px",
-            "&:focus": {
-              outline: "none",
-            },
-          }}
-        >
-          <Typography id="modal-invite-member" variant="h4" component="h1">
-            Invite new team member
-          </Typography>
-          <Typography
-            id="invite-member-to-team"
-            variant="h5"
-            component="p"
-            sx={{
-              color: theme.palette.secondary.main,
-              fontSize: "13px",
-            }}
-          >
-            When you add a new team member, they will get access to all
-            monitors.
-          </Typography>
-          <TextField
-            id="input-team-member"
-            spellCheck="false"
-            // value={orgStates.newName}
-            // onChange={(event) =>
-            //   setOrgStates((prev) => ({
-            //     ...prev,
-            //     newName: event.target.value,
-            //   }))
-            // }
-          ></TextField>
-          <Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
-            <Button
-              level="tertiary"
-              label="Cancel"
-              onClick={() => setToggleInviteModal(false)}
-              sx={{ fontSize: "13px" }}
-            />
-            <ButtonSpinner
-              level="primary"
-              label="Send invite"
-              onClick={handleInviteMember}
-              isLoading={isLoading}
-              sx={{ fontSize: "13px" }}
-            />
-          </Stack>
-        </Stack>
-      </Modal>
     </Box>
   );
 };
 
+Settings.propTypes = {
+  // No props are being passed to this component, hence no specific PropTypes are defined.
+};
+
 export default Settings;