diff --git a/web-ui/src/api/roles.js b/web-ui/src/api/roles.js
index 2013011a12..82c73ced56 100644
--- a/web-ui/src/api/roles.js
+++ b/web-ui/src/api/roles.js
@@ -41,9 +41,16 @@ export const addNewRole = async (role, cookie) => {
   return resolve({
     method: "POST",
     url: roleURL,
-    data: {
-      role: role,
-    },
+    data: role,
     headers: { "X-CSRF-Header": cookie, "Accept": "application/json", "Content-Type": "application/json;charset=UTF-8" },
   });
 };
+
+export const updateRole = async (role, cookie) => {
+  return resolve({
+    method: "PUT",
+    url: roleURL,
+    data: role,
+    headers: { "X-CSRF-Header": cookie, "Accept": "application/json", "Content-Type": "application/json;charset=UTF-8" },
+  });
+};
\ No newline at end of file
diff --git a/web-ui/src/components/admin/roles/RoleUserCards.jsx b/web-ui/src/components/admin/roles/RoleUserCards.jsx
index bbe9aca4b1..c3c332e2d7 100644
--- a/web-ui/src/components/admin/roles/RoleUserCards.jsx
+++ b/web-ui/src/components/admin/roles/RoleUserCards.jsx
@@ -11,45 +11,45 @@ import {
   Typography,
 } from "@mui/material";
 
-const RoleUserCards = ({ role, roleToMemberMap, removeFromRole }) => {
-  roleToMemberMap[role].sort((a, b) => a.name.localeCompare(b.name));
-  return roleToMemberMap[role].map(
-    (member) =>
-      member && (
-        <div key={member.id}>
-          <ListItem className="roles-list-item">
-            <ListItemAvatar>
-              <Avatar
-                alt={`${member.name}'s avatar`}
-                className="large"
-                src={getAvatarURL(member.workEmail)}
-              />
-            </ListItemAvatar>
-            <ListItemText
-              primary={
-                <Typography variant="h5" component="h2">
-                  {member.name}
-                </Typography>
-              }
-              secondary={
-                <Typography color="textSecondary" component="h3">
-                  {member.title}
-                </Typography>
-              }
+const RoleUserCards = ({ roleMembers, onRemove, memberQuery }) => {
+  roleMembers?.sort((a, b) => a.name?.localeCompare(b.name) || -1);
+  return roleMembers?.map((member) =>
+    member &&
+    ((memberQuery && memberQuery.trim())
+      ? member.name.toLowerCase().includes(memberQuery.trim().toLowerCase())
+      : true) && (
+      <div key={member.id}>
+        <ListItem className="roles-list-item">
+          <ListItemAvatar>
+            <Avatar
+              alt={`${member.name}'s avatar`}
+              className="large"
+              src={getAvatarURL(member.workEmail)}
             />
-            <div
-              className="icon"
-              onClick={() => {
-                removeFromRole(member, role);
-              }}
-            >
-              <DeleteIcon />
-            </div>
-          </ListItem>
-          <Divider variant="inset" component="li" />
-        </div>
-      )
-  );
+          </ListItemAvatar>
+          <ListItemText
+            primary={
+              <Typography variant="h5" component="h2">
+                {member.name}
+              </Typography>
+            }
+            secondary={
+              <Typography color="textSecondary" component="h3">
+                {member.title}
+              </Typography>
+            }
+          />
+          <div
+            className="icon"
+            onClick={() => onRemove(member)}
+          >
+            <DeleteIcon />
+          </div>
+        </ListItem>
+        <Divider variant="inset" component="li" style={{ marginRight: "2rem" }} />
+      </div>
+    )
+  ) || null;
 };
 
 export default RoleUserCards;
diff --git a/web-ui/src/components/admin/roles/Roles.css b/web-ui/src/components/admin/roles/Roles.css
index 6a33dd51b1..57beadb291 100644
--- a/web-ui/src/components/admin/roles/Roles.css
+++ b/web-ui/src/components/admin/roles/Roles.css
@@ -1,6 +1,14 @@
-.role-buttons {
+.role-header {
   display: flex;
-  justify-content: flex-end;
+  flex-direction: row;
+  align-items: center;
+  height: 100px;
+  justify-content: space-between;
+  padding: 0 1rem 0 1rem;
+}
+
+.role-header-title {
+  width: 50%;
 }
 
 .role-modal {
@@ -43,20 +51,17 @@
 
 .roles-content {
   margin-left: 1rem;
-}
-
-.roles-header {
-  display: flex;
-  justify-content: center;
+  margin-right: 1rem;
 }
 
 .roles-content .icon {
-  padding-right: 2rem;
   cursor: pointer;
 }
 
 .roles-content .roles-list-item {
   align-items: center;
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
 .roles-content .roles-search {
@@ -86,30 +91,77 @@
   overflow: scroll;
 }
 
-.roles-content .roles .role-buttons .role-add {
+.role-header-buttons {
+  display: flex;
+  flex-direction: row;
+}
+
+.roles-content .roles .role-header-buttons .role-add {
   cursor: pointer;
   display: flex;
   align-items: center;
   margin-left: 0.5rem;
 }
 
-.roles-content .roles .role-buttons .role-edit {
+.roles-content .roles .role-header-buttons .role-edit {
   cursor: pointer;
   display: flex;
   align-items: center;
   margin-left: 0.5rem;
 }
 
-.roles-content .roles .role-buttons span {
+.roles-content .roles .role-header-buttons span {
   margin-right: 0.5rem;
 }
 
 .roles-content .roles .roles-bot {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
 }
 
 .roles-content .roles .roles-top {
   display: flex;
   justify-content: space-between;
-  margin-left: 16px;
 }
+
+.roles-content .roles .roles-top .roles-top-left {
+  display: flex;
+}
+.roles-content .roles .roles-top .roles-top-right {
+  display: flex;
+}
+
+.roles-content .roles .roles-top-search-fields {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.roles-content .roles .roles-top-search-fields .role-select {
+  width: 50%;
+  margin-right: 2rem;
+}
+
+.roles-content .roles .roles-top-search-fields .member-role-search {
+  width: 50%;
+}
+
+@media screen and (max-width: 600px) {
+
+  .roles-content .roles .roles-top .roles-top-search-fields {
+    flex-direction: column;
+  }
+
+  .roles-content .roles .roles-top .roles-top-search-fields .role-select {
+    width: 300px;
+    margin-top: 0;
+    margin-right: 0;
+  }
+
+  .roles-content .roles .roles-top .roles-top-search-fields .member-role-search {
+    width: 300px;
+    margin-bottom: 1rem;
+  }
+
+}
\ No newline at end of file
diff --git a/web-ui/src/components/admin/roles/Roles.jsx b/web-ui/src/components/admin/roles/Roles.jsx
index 75502155b0..0279fb0ca0 100644
--- a/web-ui/src/components/admin/roles/Roles.jsx
+++ b/web-ui/src/components/admin/roles/Roles.jsx
@@ -1,15 +1,15 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, {useContext, useEffect, useState} from "react";
 
-import { AppContext } from "../../../context/AppContext";
+import {AppContext} from "../../../context/AppContext";
 import {
-  UPDATE_ROLES,
+  SET_ROLES,
   SET_USER_ROLES,
   UPDATE_TOAST,
 } from "../../../context/actions";
 import {
   addUserToRole,
   addNewRole,
-  removeUserFromRole,
+  removeUserFromRole, updateRole,
 } from "../../../api/roles";
 
 import RoleUserCards from "./RoleUserCards";
@@ -19,59 +19,76 @@ import {
   Card,
   CardActions,
   CardContent,
-  CardHeader,
   List,
+  ListSubheader,
   Modal,
   TextField,
   Typography,
+  Autocomplete,
+  InputAdornment,
+  FormControl,
+  InputLabel,
+  Select,
+  OutlinedInput,
+  MenuItem,
+  Checkbox,
+  ListItemText,
+  FormHelperText,
+  Divider
 } from "@mui/material";
 import PersonAddIcon from "@mui/icons-material/PersonAdd";
-import Autocomplete from '@mui/material/Autocomplete';
+import SearchIcon from "@mui/icons-material/Search";
+import AddIcon from "@mui/icons-material/Add";
 
-import { isArrayPresent } from './../../../helpers/checks';
+import {isArrayPresent} from './../../../helpers/checks';
 
 import "./Roles.css";
+import EditIcon from "@mui/icons-material/Edit";
 
 const Roles = () => {
-  const { state, dispatch } = useContext(AppContext);
-  const { csrf, memberProfiles, roles, userRoles } = state;
+  const {state, dispatch} = useContext(AppContext);
+  const {csrf, memberProfiles, roles, userRoles} = state;
 
   const [showAddUser, setShowAddUser] = useState(false);
-  const [showAddRole, setShowAddRole] = useState(false);
-  const [newRole, setNewRole] = useState("");
-  // const [editRole, setEditRole] = useState(false);
+  const [showEditRole, setShowEditRole] = useState(false);
+  const [editedRole, setEditedRole] = useState(null);
   const [searchText, setSearchText] = useState("");
   const [selectedMember, setSelectedMember] = useState({});
+  const [selectedRoles, setSelectedRoles] = useState([]);
   const [roleToMemberMap, setRoleToMemberMap] = useState({});
-  const [selectedRole, setSelectedRole] = useState("");
+  const [currentRole, setCurrentRole] = useState("");
 
   memberProfiles?.sort((a, b) => a.name.localeCompare(b.name));
 
   useEffect(() => {
-      const memberMap = {};
-      if(memberProfiles && memberProfiles.length > 0) {
-        for (const member of memberProfiles) {
-          memberMap[member.id] = member;
-        }
+    if (roles) {
+      setSelectedRoles(roles.map(roleObj => roleObj.role));
+    }
+  }, [roles]);
+
+  useEffect(() => {
+    const memberMap = {};
+    if (memberProfiles && memberProfiles.length > 0) {
+      for (const member of memberProfiles) {
+        memberMap[member.id] = member;
       }
+    }
 
-      const newRoleToMemberMap = {};
-      for (const userRole of userRoles || []) {
-        const role = roles.find((role) => role.id === userRole?.memberRoleId?.roleId);
-        if(role) {
-          let memberList = newRoleToMemberMap[role.role];
-          if (!memberList) {
-            memberList = newRoleToMemberMap[role.role] = [];
-          }
-          if (memberMap[userRole?.memberRoleId?.memberId] !== undefined) {
-            memberList.push({ ...memberMap[userRole?.memberRoleId?.memberId], roleId: role.id });
-          }
+    const newRoleToMemberMap = {};
+    for (const userRole of userRoles || []) {
+      const role = roles.find((role) => role.id === userRole?.memberRoleId?.roleId);
+      if (role) {
+        let memberList = newRoleToMemberMap[role.role];
+        if (!memberList) {
+          memberList = newRoleToMemberMap[role.role] = [];
+        }
+        if (memberMap[userRole?.memberRoleId?.memberId] !== undefined) {
+          memberList.push({...memberMap[userRole?.memberRoleId?.memberId], roleId: role.id});
         }
       }
-      setRoleToMemberMap(newRoleToMemberMap);
-    }, [userRoles, memberProfiles, roles]);
-
-  const uniqueRoles = Object.keys(roleToMemberMap);
+    }
+    setRoleToMemberMap(newRoleToMemberMap);
+  }, [userRoles, memberProfiles, roles]);
 
   const getRoleStats = (role) => {
     let members = roleToMemberMap[role];
@@ -80,7 +97,7 @@ const Roles = () => {
 
   const removeFromRole = async (member, role) => {
     const members = roleToMemberMap[role];
-    const { roleId } = members.find((m) => member.id === m.id);
+    const {roleId} = members.find((m) => member.id === m.id);
     let res = await removeUserFromRole(roleId, member.id, csrf);
     let data =
       res.payload && res.payload.status === 200 && !res.error
@@ -104,7 +121,7 @@ const Roles = () => {
   };
 
   const addToRole = async (member) => {
-    const role = roles.find((role) => role.role === selectedRole);
+    const role = roles.find((role) => role.role === currentRole.role);
     let res = await addUserToRole(role.id, member.id, csrf);
     let data =
       res.payload && res.payload.data && !res.error ? res.payload.data : null;
@@ -118,28 +135,29 @@ const Roles = () => {
         type: UPDATE_TOAST,
         payload: {
           severity: "success",
-          toast: `${member.name} added to ${selectedRole}s`,
+          toast: `${member.name} added to ${currentRole.role}s`,
         },
       });
     }
     setSelectedMember({});
   };
 
-  const addRole = async (member, role) => {
-    let res = await addNewRole(selectedRole, member.id, csrf);
+  const saveRole = async (role) => {
+    let res = role.id ? await updateRole(role, csrf) : await addNewRole(role, csrf);
     let data =
       res.payload && res.payload.data && !res.error ? res.payload.data : null;
     if (data) {
-      setShowAddRole(false);
+      setShowEditRole(false);
+      const updatedRoles = [...roles.filter((role) => role?.id !== data.id), data];
       dispatch({
-        type: UPDATE_ROLES,
-        payload: data,
+        type: SET_ROLES,
+        payload: updatedRoles,
       });
       window.snackDispatch({
         type: UPDATE_TOAST,
         payload: {
           severity: "success",
-          toast: `${member.name} added to ${selectedRole}s`,
+          toast: `Role Updated: ${role.role}`,
         },
       });
     }
@@ -149,152 +167,183 @@ const Roles = () => {
     setShowAddUser(false);
   };
 
-  const closeAddRole = () => {
-    setShowAddRole(false);
+  const closeEditRole = () => {
+    setShowEditRole(false);
   };
 
-  // const closeEditRole = () => {
-  //   setEditRole(false);
-  // };
+  const setRoleName = (event) => {
+    setEditedRole({...editedRole, role: event?.target?.value});
+  }
+
+  const setRoleDescription = (event) => {
+    setEditedRole({...editedRole, description: event?.target?.value});
+  }
 
   return (
     <div className="roles-content">
       <div className="roles">
         <div className="roles-top">
           <div className="roles-top-left">
-            <h2>Roles</h2>
-            <TextField
-              className="role-search"
-              label="Search Roles"
-              placeholder="Role"
-              fullWidth={true}
-              value={searchText}
-              onChange={(e) => {
-                setSearchText(e.target.value);
+            <div className="roles-top-search-fields">
+              <FormControl className="role-select">
+                <InputLabel id="roles-select-label">Roles</InputLabel>
+                <Select
+                  labelId="roles-select-label"
+                  multiple
+                  value={selectedRoles}
+                  onChange={(event) => {
+                    const value = event.target.value;
+                    setSelectedRoles(typeof value === "string" ? value.split(",") : value)
+                  }}
+                  input={<OutlinedInput label="Roles"/>}
+                  renderValue={(selected) => selected.join(", ")}
+                >
+                  {roles?.map((roleObj) => (
+                    <MenuItem key={roleObj.role} value={roleObj.role}>
+                      <Checkbox checked={selectedRoles.indexOf(roleObj.role) > -1}/>
+                      <ListItemText primary={roleObj.role}/>
+                    </MenuItem>
+                  ))}
+                </Select>
+                <FormHelperText>{`Showing ${selectedRoles.length}/${roles?.length} roles`}</FormHelperText>
+              </FormControl>
+              <TextField
+                className="member-role-search"
+                label="Search members"
+                placeholder="Member Name"
+                value={searchText}
+                onChange={(e) => {
+                  setSearchText(e.target.value);
+                }}
+                InputProps={{
+                  endAdornment: <InputAdornment color="gray" position="end"><SearchIcon/></InputAdornment>
+                }}
+              />
+            </div>
+          </div>
+          <div className="roles-top-right">
+            <Button
+              className="role-add"
+              color="primary"
+              endIcon={<AddIcon/>}
+              onClick={() => {
+                setShowEditRole(true);
+                setEditedRole({});
               }}
-            />
+            >
+              Add Role
+            </Button>
           </div>
-          {/* <Button color="primary" onClick={() => setShowAddRole(true)}>
-            Add New Role
-          </Button> */}
         </div>
-        <div className="roles-bot">
-          {uniqueRoles.map((role) =>
-            role.toLowerCase().includes(searchText.toLowerCase()) ? (
-              <Card className="role" key={role}>
-                <CardHeader
-                  title={
-                    <div className="role-header">
-                      <Typography variant="h4" component="h3">
-                        {role}
-                      </Typography>
-                      <Typography variant="h5" component="h5">
-                        {role.description || ""}
-                      </Typography>
-                      <Typography variant="h5" component="h5">
-                        {getRoleStats(role)} Users
-                      </Typography>
-                    </div>
-                  }
-                  subheader={
-                    <div>
-                      <div className="role-buttons">
-                        <Button
-                          className="role-add"
-                          color="primary"
-                          onClick={() => {
-                            setShowAddUser(true);
-                            setSelectedRole(role);
-                          }}
-                        >
-                          <span>Add User</span>
-                          <PersonAddIcon />
-                        </Button>
-                        {/* <Button className="role-edit" color="primary">
-                        <span>Edit Role</span> <EditIcon />
-                      </Button> */}
-                      </div>
-                    </div>
-                  }
+        <Modal open={showAddUser} onClose={closeAddUser}>
+          <div className="role-modal">
+            <Autocomplete
+              options={memberProfiles?.filter((member) => {
+                return !roleToMemberMap[currentRole.role]?.find((m)=>m.id === member.id);
+              }) || []}
+              value={selectedMember}
+              onChange={(event, newValue) =>
+                setSelectedMember(newValue)
+              }
+              getOptionLabel={(option) => option.name || ""}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  className="fullWidth"
+                  label="User To Add"
+                  placeholder={`Select User to add to ${currentRole.role}s`}
                 />
+              )}
+            />
+            <Button
+              color="primary"
+              onClick={() => addToRole(selectedMember)}
+            >
+              Save
+            </Button>
+          </div>
+        </Modal>
+        <div className="roles-bot">
+          {roles?.map((roleObj) =>
+            selectedRoles.includes(roleObj.role) ? (
+              <Card className="role" key={`${roleObj.role}-card`}>
                 <CardContent className="role-card">
-                  {
-                    <List>
+                  <List style={{paddingTop: 0}}>
+                    <div>
+                      <ListSubheader style={{padding: 0}}>
+                        <div className="role-header">
+                          <div className="role-header-title">
+                            <Typography variant="h4" color="black">
+                              {roleObj.role}
+                            </Typography>
+                            <Typography variant="subtitle1" style={{
+                              whiteSpace: "nowrap",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                            }}>
+                              {roleObj.description || ""}
+                            </Typography>
+                            <Typography variant="subtitle2" style={{fontSize: "0.75rem"}}>
+                              {getRoleStats(roleObj.role)} Users
+                            </Typography>
+                          </div>
+                          <div className="role-header-buttons">
+                            <Button
+                              className="role-add"
+                              color="primary"
+                              onClick={() => {
+                                setShowAddUser(true);
+                                setCurrentRole(roleObj);
+                              }}
+                            >
+                              <PersonAddIcon/>
+                            </Button>
+                            <Button
+                              className="role-edit"
+                              color="secondary"
+                              onClick={() => {
+                                setShowEditRole(true);
+                                setEditedRole(roleObj);
+                              }}
+                            >
+                              <EditIcon/>
+                            </Button>
+                          </div>
+                        </div>
+                        <Divider/>
+                      </ListSubheader>
                       <RoleUserCards
-                        role={role}
-                        roleToMemberMap={roleToMemberMap}
-                        removeFromRole={removeFromRole}
+                        roleMembers={roleToMemberMap[roleObj.role]}
+                        onRemove={(member) => removeFromRole(member, roleObj.role)}
+                        memberQuery={searchText}
                       />
-                    </List>
-                  }
+                    </div>
+                  </List>
                 </CardContent>
                 <CardActions>
-                  <Modal open={showAddUser} onClose={closeAddUser}>
+                  <Modal open={showEditRole} onClose={closeEditRole}>
                     <div className="role-modal">
-                      <Autocomplete
-                        options={memberProfiles?.filter(
-                          (member) => !roleToMemberMap[role].includes(member.id)
-                        ) || []}
-                        value={selectedMember}
-                        onChange={(event, newValue) =>
-                          setSelectedMember(newValue)
-                        }
-                        getOptionLabel={(option) => option.name || ""}
-                        renderInput={(params) => (
-                          <TextField
-                            {...params}
-                            className="fullWidth"
-                            label="User To Add"
-                            placeholder={`Select User to add to ${selectedRole}s`}
-                          />
-                        )}
+                      <TextField
+                        className="fullWidth"
+                        label="Role Name"
+                        placeholder="Set new role name"
+                        onChange={setRoleName}
+                        value={editedRole?.role || ""}
+                        variant="outlined"
                       />
-                      <Button
-                        color="primary"
-                        onClick={() => addToRole(selectedMember)}
-                      >
-                        Save
-                      </Button>
-                    </div>
-                  </Modal>
-                  <Modal open={showAddRole} onClose={closeAddRole}>
-                    <div className="role-modal">
                       <TextField
                         className="fullWidth"
                         label="Role Description"
                         placeholder="Set new role description"
-                        onChange={setNewRole}
-                        value={newRole ? newRole : ""}
+                        onChange={setRoleDescription}
+                        value={editedRole?.description || ""}
                         variant="outlined"
                       />
-                      <Button color="primary" onClick={() => addRole(newRole)}>
+                      <Button color="primary" onClick={() => saveRole(editedRole)}>
                         Save
                       </Button>
                     </div>
                   </Modal>
-                  {/* <Modal open={} onClose={closeEditRole}>
-                  <div className="edit-role-modal">
-                    <TextField
-                      id="role-description"
-                      label="description"
-                      required
-                      className="halfWidth"
-                      placeholder="Pdl Description"
-                      value={
-                        editedMember.firstName ? editedMember.firstName : ""
-                      }
-                      onChange={(e) =>
-                        setMember({
-                          ...editedMember,
-                          firstName: e.target.value,
-                        })
-                      }
-                    />
-                    <Button onClick={() => addToRole(selectedMember)}>
-                      Save
-                    </Button>
-                  </div>
-                </Modal> */}
                 </CardActions>
               </Card>
             ) : null
diff --git a/web-ui/src/components/admin/roles/__snapshots__/Roles.test.jsx.snap b/web-ui/src/components/admin/roles/__snapshots__/Roles.test.jsx.snap
index fd0bae68d6..b23dd48c92 100644
--- a/web-ui/src/components/admin/roles/__snapshots__/Roles.test.jsx.snap
+++ b/web-ui/src/components/admin/roles/__snapshots__/Roles.test.jsx.snap
@@ -14,50 +14,346 @@ exports[`renders correctly 1`] = `
         <div
           class="roles-top-left"
         >
-          <h2>
-            Roles
-          </h2>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root role-search css-wb57ya-MuiFormControl-root-MuiTextField-root"
+            class="roles-top-search-fields"
           >
-            <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
-              data-shrink="false"
-              for=":r0:"
-              id=":r0:-label"
+            <div
+              class="MuiFormControl-root role-select css-1nrlq1o-MuiFormControl-root"
             >
-              Search Roles
-            </label>
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
+                data-shrink="true"
+                id="roles-select-label"
+              >
+                Roles
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root"
+              >
+                <div
+                  aria-controls=":r0:"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-labelledby="roles-select-label"
+                  class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+                  role="combobox"
+                  tabindex="0"
+                >
+                  ADMIN, PDL
+                </div>
+                <input
+                  aria-hidden="true"
+                  aria-invalid="false"
+                  class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
+                  tabindex="-1"
+                  value="ADMIN,PDL"
+                />
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
+                  data-testid="ArrowDropDownIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="css-14lo706"
+                  >
+                    <span>
+                      Roles
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+              <p
+                class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled css-1wc848c-MuiFormHelperText-root"
+              >
+                Showing 2/2 roles
+              </p>
+            </div>
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiFormControl-root MuiTextField-root member-role-search css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
             >
-              <input
-                aria-invalid="false"
-                class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r0:"
-                placeholder="Role"
-                type="text"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
+                data-shrink="false"
+                for=":r1:"
+                id=":r1:-label"
+              >
+                Search members
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root"
               >
-                <legend
-                  class="css-yjsfm1"
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+                  id=":r1:"
+                  placeholder="Member Name"
+                  type="text"
+                  value=""
+                />
+                <div
+                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
+                  color="gray"
                 >
-                  <span>
-                    Search Roles
-                  </span>
-                </legend>
-              </fieldset>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                    data-testid="SearchIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
+                    />
+                  </svg>
+                </div>
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="css-yjsfm1"
+                  >
+                    <span>
+                      Search members
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
             </div>
           </div>
         </div>
+        <div
+          class="roles-top-right"
+        >
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary role-add css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+            tabindex="0"
+            type="button"
+          >
+            Add Role
+            <span
+              class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-9tj150-MuiButton-endIcon"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                data-testid="AddIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </button>
+        </div>
       </div>
       <div
         class="roles-bot"
-      />
+      >
+        <div
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root role css-bhp9pd-MuiPaper-root-MuiCard-root"
+        >
+          <div
+            class="MuiCardContent-root role-card css-46bh2p-MuiCardContent-root"
+          >
+            <ul
+              class="MuiList-root MuiList-padding css-h4y409-MuiList-root"
+              style="padding-top: 0px;"
+            >
+              <div>
+                <li
+                  class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky css-uob957-MuiListSubheader-root"
+                  style="padding: 0px;"
+                >
+                  <div
+                    class="role-header"
+                  >
+                    <div
+                      class="role-header-title"
+                    >
+                      <h4
+                        class="MuiTypography-root MuiTypography-h4 css-1pbf2mx-MuiTypography-root"
+                      >
+                        ADMIN
+                      </h4>
+                      <h6
+                        class="MuiTypography-root MuiTypography-subtitle1 css-10wpov9-MuiTypography-root"
+                        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+                      />
+                      <h6
+                        class="MuiTypography-root MuiTypography-subtitle2 css-ati914-MuiTypography-root"
+                        style="font-size: 0.75rem;"
+                      >
+                        0
+                         Users
+                      </h6>
+                    </div>
+                    <div
+                      class="role-header-buttons"
+                    >
+                      <button
+                        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary role-add css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                          data-testid="PersonAddIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m-9-2V7H4v3H1v2h3v3h2v-3h3v-2zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
+                          />
+                        </svg>
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
+                      <button
+                        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary role-edit css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                          data-testid="EditIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
+                          />
+                        </svg>
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                  <hr
+                    class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
+                  />
+                </li>
+              </div>
+            </ul>
+          </div>
+          <div
+            class="MuiCardActions-root MuiCardActions-spacing css-dnrpxu-MuiCardActions-root"
+          />
+        </div>
+        <div
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root role css-bhp9pd-MuiPaper-root-MuiCard-root"
+        >
+          <div
+            class="MuiCardContent-root role-card css-46bh2p-MuiCardContent-root"
+          >
+            <ul
+              class="MuiList-root MuiList-padding css-h4y409-MuiList-root"
+              style="padding-top: 0px;"
+            >
+              <div>
+                <li
+                  class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky css-uob957-MuiListSubheader-root"
+                  style="padding: 0px;"
+                >
+                  <div
+                    class="role-header"
+                  >
+                    <div
+                      class="role-header-title"
+                    >
+                      <h4
+                        class="MuiTypography-root MuiTypography-h4 css-1pbf2mx-MuiTypography-root"
+                      >
+                        PDL
+                      </h4>
+                      <h6
+                        class="MuiTypography-root MuiTypography-subtitle1 css-10wpov9-MuiTypography-root"
+                        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+                      />
+                      <h6
+                        class="MuiTypography-root MuiTypography-subtitle2 css-ati914-MuiTypography-root"
+                        style="font-size: 0.75rem;"
+                      >
+                        0
+                         Users
+                      </h6>
+                    </div>
+                    <div
+                      class="role-header-buttons"
+                    >
+                      <button
+                        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary role-add css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                          data-testid="PersonAddIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m-9-2V7H4v3H1v2h3v3h2v-3h3v-2zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
+                          />
+                        </svg>
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
+                      <button
+                        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary role-edit css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                          data-testid="EditIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
+                          />
+                        </svg>
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                  <hr
+                    class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
+                  />
+                </li>
+              </div>
+            </ul>
+          </div>
+          <div
+            class="MuiCardActions-root MuiCardActions-spacing css-dnrpxu-MuiCardActions-root"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/web-ui/src/context/actions.js b/web-ui/src/context/actions.js
index d9b6fbbf2d..658539e691 100644
--- a/web-ui/src/context/actions.js
+++ b/web-ui/src/context/actions.js
@@ -18,7 +18,7 @@ export const UPDATE_CHECKIN = "@@check-ins/update_checkin";
 export const UPDATE_CHECKINS = "@@check-ins/update_checkins";
 export const UPDATE_MEMBER_PROFILES = "@@check-ins/update_member_profiles";
 export const UPDATE_MEMBER_SKILLS = "@@check-ins/update_member_skills";
-export const UPDATE_ROLES = "@@check-ins/update_roles";
+export const ADD_ROLE = "@@check-ins/add_role";
 export const UPDATE_SKILL = "@@check-ins/update_skill";
 export const UPDATE_SKILLS = "@@check-ins/update_skills";
 export const UPDATE_TEAM_MEMBERS = "@@check-ins/update_team_members";
diff --git a/web-ui/src/context/reducer.js b/web-ui/src/context/reducer.js
index ddd032fc58..4902c91dba 100644
--- a/web-ui/src/context/reducer.js
+++ b/web-ui/src/context/reducer.js
@@ -21,7 +21,7 @@ import {
   UPDATE_SKILLS,
   UPDATE_GUILD,
   UPDATE_GUILDS,
-  UPDATE_ROLES,
+  ADD_ROLE,
   UPDATE_TEAMS,
   UPDATE_TEAM_MEMBERS,
   UPDATE_TOAST,
@@ -209,7 +209,7 @@ export const reducer = (state, action) => {
     case DELETE_ROLE:
       state.roles = state.roles.filter((role) => role.id !== action.payload);
       break;
-    case UPDATE_ROLES:
+    case ADD_ROLE:
       state.roles = [...state.roles, action.payload];
       break;
     case ADD_GUILD: