diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css
index 007a63436..92d4dfe23 100644
--- a/Client/src/Pages/Settings/index.css
+++ b/Client/src/Pages/Settings/index.css
@@ -76,3 +76,38 @@
 .edit-team-form .Mui-disabled {
   color: var(--env-var-color-2) !important;
 }
+
+.edit-team-form__wrapper td {
+  padding: 10px 0;
+  padding-top: 20px;
+  vertical-align: text-top;
+}
+.edit-team-form__wrapper th {
+  padding: 14px 0;
+}
+.edit-team-form__wrapper th:first-of-type {
+  padding-left: 20px;
+}
+.edit-team-form__wrapper td {
+  font-size: 13px;
+  color: var(--env-var-color-16);
+}
+
+#select-actions,
+#select-role {
+  padding: 5px 0;
+  padding-left: 15px;
+  padding-right: 50px;
+  line-height: 1.75;
+}
+
+.MuiInputBase-root:has(#select-actions) fieldset,
+.MuiInputBase-root:has(#select-role) fieldset {
+  border-color: #a1a7b1;
+  margin: -1px;
+  border-width: 1px;
+}
+.MuiInputBase-root:has(#select-actions):hover fieldset,
+.MuiInputBase-root:has(#select-role):hover fieldset {
+  border-color: var(--env-var-color-2);
+}
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 2cb6458d2..9cf52f379 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -14,6 +14,15 @@ import {
   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";
@@ -75,6 +84,70 @@ const orgConfig = {
   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 = () => {
   //(tab) 0 - Profile
@@ -146,6 +219,32 @@ const Settings = () => {
       }));
     }, 2000);
   };
+
+  const [teamStates, setTeamStates] = useState(teamConfig);
+  const handleCellChecked = (id) => {
+    const updatedTeamStates = [...teamStates];
+    updatedTeamStates[id] = {
+      ...updatedTeamStates[id],
+      isChecked: !updatedTeamStates[id].isChecked,
+    };
+    setTeamStates(updatedTeamStates);
+  };
+  const handleApplyActionSelect = () => {
+    setIsLoading(true);
+
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsOpen(false);
+    }, 2000);
+  };
+  const handleApplyRoleSelect = () => {
+    setIsLoading(true);
+
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsOpen(false);
+    }, 2000);
+  };
   return (
     <Box
       //TODO - need to figure out document sizing
@@ -433,11 +532,12 @@ const Settings = () => {
                   disabled
                   onClick={() => toggleOrgModal(true)}
                   isLoading={orgStates.isLoading}
+                  sx={{ fontSize: "13px" }}
                 />
                 <Button
                   level="primary"
                   label="Rename"
-                  sx={{ paddingX: "30px" }}
+                  sx={{ paddingX: "30px", fontSize: "13px" }}
                   onClick={() => toggleOrgModal(true)}
                 />
               </Stack>
@@ -447,6 +547,139 @@ const Settings = () => {
                 Team members
               </Typography>
             </div>
+            <div className="edit-team-form__wrapper">
+              <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}`,
+                  }}
+                >
+                  <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.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>
+                    ))}
+                  </TableBody>
+                </Table>
+              </Container>
+            </div>
             <Divider
               aria-hidden="true"
               width="0"
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index 1f4e4de96..d2e7cf585 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -25,6 +25,7 @@ const otherColorsPurple = "#7f56d9";
 const otherColorsWhite = "#fff";
 const otherColorsGraishWhiteLight = "#f2f2f2";
 const otherColorsStrongBlue = "#f2f2f2";
+const otherColorsSlateGray = "#667085";
 
 
 // Global Font Family
@@ -69,6 +70,7 @@ const theme = createTheme({
       white: otherColorsWhite,
       graishWhiteLight: otherColorsGraishWhiteLight,
       strongBlue: otherColorsStrongBlue,
+      slateGray: otherColorsSlateGray,
     },
   },
   font :{
diff --git a/Client/src/index.css b/Client/src/index.css
index 5c0760ecd..3f7a64315 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -31,6 +31,7 @@
   --env-var-color-14: #fecf60;
   --lighter-env-var-color-14: rgba(254, 207, 96, 0.1);
   --env-var-color-15: #f79009;
+  --env-var-color-16: #667085;
 
   --env-var-radius-1: 4px;
   --env-var-radius-2: 8px;