diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css
index 92d4dfe23..ebf065a7e 100644
--- a/Client/src/Pages/Settings/index.css
+++ b/Client/src/Pages/Settings/index.css
@@ -21,19 +21,20 @@
 .delete-profile-form__wrapper h1.MuiTypography-root,
 .edit-password-form__wrapper h1.MuiTypography-root,
 .edit-team-form__wrapper h1.MuiTypography-root {
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
   font-weight: 600;
 }
 .edit-profile-form__wrapper p.MuiTypography-root,
 .delete-profile-form__wrapper p.MuiTypography-root {
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
   opacity: 0.6;
 }
 #modal-delete-account,
-#modal-edit-org-name {
-  font-size: 16px;
+#modal-edit-org-name,
+#modal-invite-member {
+  font-size: var(--env-var-font-size-large);
   color: var(--env-var-color-2);
   font-weight: 600;
 }
@@ -42,10 +43,15 @@
 .edit-team-form__wrapper:not(:first-of-type) {
   margin-top: 40px;
 }
+.edit-team-form__wrapper.compact {
+  margin-top: 30px;
+  color: var(--env-var-color-16);
+}
 .edit-profile-form__wrapper input,
 .edit-password-form__wrapper input,
-#edit-organization-name {
-  font-size: 13px;
+#edit-organization-name,
+#input-team-member {
+  font-size: var(--env-var-font-size-medium);
   padding: 10px;
 }
 
@@ -73,7 +79,7 @@
   fill: var(--env-var-color-15) !important;
 }
 
-.edit-team-form .Mui-disabled {
+#org-name-flex-container .Mui-disabled {
   color: var(--env-var-color-2) !important;
 }
 
@@ -89,7 +95,7 @@
   padding-left: 20px;
 }
 .edit-team-form__wrapper td {
-  font-size: 13px;
+  font-size: (--env-var-font-size-medium);
   color: var(--env-var-color-16);
 }
 
@@ -100,7 +106,6 @@
   padding-right: 50px;
   line-height: 1.75;
 }
-
 .MuiInputBase-root:has(#select-actions) fieldset,
 .MuiInputBase-root:has(#select-role) fieldset {
   border-color: #a1a7b1;
@@ -111,3 +116,18 @@
 .MuiInputBase-root:has(#select-role):hover fieldset {
   border-color: var(--env-var-color-2);
 }
+
+.members-query{
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 6px;
+  padding: 2px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--env-var-color-3);
+  background-color: #e0e9fd;
+  min-width: 22px;
+  min-height: 22px;
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 9cf52f379..6909f863f 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -164,7 +164,6 @@ const Settings = () => {
   //TODO - implement delete profile picture function
   const handleDeletePicture = () => {
     setIsLoading(true);
-
     setTimeout(() => {
       setIsLoading(false);
     }, 2000);
@@ -176,7 +175,6 @@ const Settings = () => {
   //TODO - implement delete account function
   const handleDeleteAccount = () => {
     setIsLoading(true);
-
     setTimeout(() => {
       setIsLoading(false);
       setIsOpen(false);
@@ -184,7 +182,6 @@ const Settings = () => {
   };
   const handleSaveProfile = () => {
     setIsLoading(true);
-
     setTimeout(() => {
       setIsLoading(false);
       setIsOpen(false);
@@ -220,31 +217,54 @@ const Settings = () => {
     }, 2000);
   };
 
-  const [teamStates, setTeamStates] = useState(teamConfig);
+  const [teamStates, setTeamStates] = useState({
+    members: teamConfig,
+    filter: "",
+  });
   const handleCellChecked = (id) => {
-    const updatedTeamStates = [...teamStates];
+    const updatedTeamStates = [...teamStates.members];
     updatedTeamStates[id] = {
       ...updatedTeamStates[id],
       isChecked: !updatedTeamStates[id].isChecked,
     };
-    setTeamStates(updatedTeamStates);
+    setTeamStates((prev) => ({
+      ...prev,
+      members: updatedTeamStates,
+    }));
+  };
+  const handleFilter = (filter) => {
+    setTeamStates((prev) => ({
+      ...prev,
+      filter: filter,
+    }));
   };
   const handleApplyActionSelect = () => {
     setIsLoading(true);
-
     setTimeout(() => {
       setIsLoading(false);
-      setIsOpen(false);
     }, 2000);
   };
   const handleApplyRoleSelect = () => {
     setIsLoading(true);
-
     setTimeout(() => {
       setIsLoading(false);
-      setIsOpen(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
@@ -521,6 +541,7 @@ const Settings = () => {
                 </Typography>
               </Stack>
               <Stack
+                id="org-name-flex-container"
                 direction="row"
                 justifyContent="flex-end"
                 gap="8px"
@@ -528,7 +549,7 @@ const Settings = () => {
               >
                 <ButtonSpinner
                   level="tertiary"
-                  label={!orgStates.isLoading && orgStates.name}
+                  label={!orgStates.isLoading ? orgStates.name : ""}
                   disabled
                   onClick={() => toggleOrgModal(true)}
                   isLoading={orgStates.isLoading}
@@ -547,7 +568,52 @@ const Settings = () => {
                 Team members
               </Typography>
             </div>
-            <div className="edit-team-form__wrapper">
+            <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={{
@@ -565,7 +631,7 @@ const Settings = () => {
                         fontSize: "13px",
                         color: theme.palette.secondary.main,
                       }}
-                      inputProps={{id: "select-actions-input"}}
+                      inputProps={{ id: "select-actions-input" }}
                     >
                       {actionsConfig.map((action) => (
                         <MenuItem
@@ -598,7 +664,7 @@ const Settings = () => {
                         fontSize: "13px",
                         color: theme.palette.secondary.main,
                       }}
-                      inputProps={{id: "select-role-input"}}
+                      inputProps={{ id: "select-role-input" }}
                     >
                       {roleConfig.map((role) => (
                         <MenuItem
@@ -627,6 +693,7 @@ const Settings = () => {
                 <Table
                   sx={{
                     borderTop: `1px solid ${theme.palette.section.borderColor}`,
+                    tableLayout: "fixed",
                   }}
                 >
                   <TableHead>
@@ -649,33 +716,38 @@ const Settings = () => {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {teamStates.map((cell) => (
-                      <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>
-                    ))}
+                    {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>
@@ -692,7 +764,7 @@ const Settings = () => {
                 <ButtonSpinner
                   level="primary"
                   label="Save"
-                  onClick={handleSaveProfile}
+                  onClick={handleSaveTeam}
                   isLoading={isLoading}
                   loadingText="Saving..."
                   sx={{
@@ -831,6 +903,74 @@ const Settings = () => {
           </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>
   );
 };
diff --git a/Client/src/index.css b/Client/src/index.css
index 3f7a64315..167dc5c43 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;