diff --git a/frontend/app/Router.js b/frontend/app/Router.js
index edacf56c5..c3a1721a6 100644
--- a/frontend/app/Router.js
+++ b/frontend/app/Router.js
@@ -102,7 +102,7 @@ class Router extends React.Component {
       this.props.fetchTenants();
     }
 
-    if (!prevProps.isLoggedIn && this.props.isLoggedIn && this.state.destinationPath !== routes.login() && this.state.destinationPath !== '/') {
+    if (this.state.destinationPath && !prevProps.isLoggedIn && this.props.isLoggedIn && this.state.destinationPath !== routes.login() && this.state.destinationPath !== '/') {
       this.props.history.push(this.state.destinationPath);
       this.setState({ destinationPath: null });
     }
diff --git a/frontend/app/components/Client/ManageUsers/ManageUsers.js b/frontend/app/components/Client/ManageUsers/ManageUsers.js
index e157db019..9071ee46b 100644
--- a/frontend/app/components/Client/ManageUsers/ManageUsers.js
+++ b/frontend/app/components/Client/ManageUsers/ManageUsers.js
@@ -33,7 +33,7 @@ const LIMIT_WARNING = 'You have reached users limit.';
   generateInviteLink,
   fetchRoles
 })
-@withPageTitle('Users - OpenReplay Preferences')
+@withPageTitle('Team - OpenReplay Preferences')
 class ManageUsers extends React.PureComponent {
   state = { showModal: false, remaining: this.props.account.limits.teamMember.remaining, invited: false }
 
diff --git a/frontend/app/components/Client/Notifications/Notifications.js b/frontend/app/components/Client/Notifications/Notifications.js
index 08db0a3b9..31e6e3699 100644
--- a/frontend/app/components/Client/Notifications/Notifications.js
+++ b/frontend/app/components/Client/Notifications/Notifications.js
@@ -5,6 +5,7 @@ import { Checkbox } from 'UI'
 import { connect } from 'react-redux'
 import { withRequest } from 'HOCs'
 import { fetch as fetchConfig, edit as editConfig, save as saveConfig } from 'Duck/config'
+import withPageTitle from 'HOCs/withPageTitle';
 
 function Notifications(props) {
   const { config } = props;
@@ -42,4 +43,4 @@ function Notifications(props) {
 
 export default connect(state => ({
   config: state.getIn(['config', 'options'])
-}), { fetchConfig, editConfig, saveConfig })(Notifications)
+}), { fetchConfig, editConfig, saveConfig })(withPageTitle('Notifications - OpenReplay Preferences')(Notifications));
diff --git a/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js b/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js
index fa3d51db9..0c57c1ab7 100644
--- a/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js
+++ b/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js
@@ -68,25 +68,25 @@ function PreferencesMenu({ activeTab, appearance, history, isEnterprise }) {
         />
       </div>
 
-      <div className="mb-4">
-        <SideMenuitem
-          active={ activeTab === CLIENT_TABS.MANAGE_USERS }
-          title="Users"
-          iconName="users"
-          onClick={() => setTab(CLIENT_TABS.MANAGE_USERS) }
-        />
-      </div>
-
       { isEnterprise && (
         <div className="mb-4">
           <SideMenuitem
             active={ activeTab === CLIENT_TABS.MANAGE_ROLES }
-            title="Roles"
-            iconName="shield-lock"
+            title="Roles & Access"
+            iconName="diagram-3"
             onClick={() => setTab(CLIENT_TABS.MANAGE_ROLES) }
           />
         </div> 
       )}
+      
+      <div className="mb-4">
+        <SideMenuitem
+          active={ activeTab === CLIENT_TABS.MANAGE_USERS }
+          title="Team"
+          iconName="users"
+          onClick={() => setTab(CLIENT_TABS.MANAGE_USERS) }
+        />
+      </div>
 
       <div className="mb-4">
         <SideMenuitem
diff --git a/frontend/app/components/Client/Roles/Roles.tsx b/frontend/app/components/Client/Roles/Roles.tsx
index 83a3c3197..91c09056b 100644
--- a/frontend/app/components/Client/Roles/Roles.tsx
+++ b/frontend/app/components/Client/Roles/Roles.tsx
@@ -8,6 +8,7 @@ import { init, edit, fetchList, remove as deleteRole, resetErrors } from 'Duck/r
 import RoleItem from './components/RoleItem'
 import { confirm } from 'UI/Confirmation';
 import { toast } from 'react-toastify';
+import withPageTitle from 'HOCs/withPageTitle';
 
 interface Props {
   loading: boolean
@@ -20,11 +21,12 @@ interface Props {
   account: any,
   permissionsMap: any,
   removeErrors: any,
-  resetErrors: () => void
+  resetErrors: () => void,
+  projectsMap: any,
 }
 
 function Roles(props: Props) {
-  const { loading, instance, roles, init, edit, deleteRole, account, permissionsMap, removeErrors } = props
+  const { loading, instance, roles, init, edit, deleteRole, account, permissionsMap, projectsMap, removeErrors } = props
   const [showModal, setShowmModal] = useState(false)
   const isAdmin = account.admin || account.superAdmin;
 
@@ -72,16 +74,16 @@ function Roles(props: Props) {
     <React.Fragment>
       <Loader loading={ loading }>
         <SlideModal
-          title={ instance.exists() ? "Edit Role" : "Add Role" }
+          title={ instance.exists() ? "Edit Role" : "Create Role" }
           size="small"
           isDisplayed={showModal }
-          content={ showModal && <RoleForm closeModal={closeModal}/> }
+          content={ showModal && <RoleForm closeModal={closeModal} permissionsMap={permissionsMap} deleteHandler={deleteHandler} /> }
           onClose={ closeModal }
         />
         <div className={ stl.wrapper }>
           <div className={ cn(stl.tabHeader, 'flex items-center') }>
             <div className="flex items-center mr-auto">
-              <h3 className={ cn(stl.tabTitle, "text-2xl") }>Manage Roles and Permissions</h3>
+              <h3 className={ cn(stl.tabTitle, "text-2xl") }>Roles and Access</h3>
               <Popup
                 trigger={
                   <div>
@@ -111,11 +113,17 @@ function Roles(props: Props) {
             icon
           >
             <div className={''}>
+              <div className={cn(stl.wrapper, 'flex items-start py-3 border-b px-3 pr-20')}>
+                <div className="flex" style={{ width: '20%'}}>Title</div>
+                <div className="flex" style={{ width: '30%'}}>Project Access</div>
+                <div className="flex" style={{ width: '50%'}}>Feature Access</div>
+              </div>
               {roles.map(role => (
                 <RoleItem
                   role={role}
                   isAdmin={isAdmin}
                   permissions={permissionsMap}
+                  projects={projectsMap}
                   editHandler={editHandler}
                   deleteHandler={deleteHandler}
                 />
@@ -132,14 +140,20 @@ export default connect(state => {
   const permissions = state.getIn(['roles', 'permissions'])
   const permissionsMap = {}
   permissions.forEach(p => {
-    permissionsMap[p.value] = p.name
+    permissionsMap[p.value] = p.text
   });
+  const projects = state.getIn([ 'site', 'list' ])
   return {
     instance: state.getIn(['roles', 'instance']) || null,
     permissionsMap: permissionsMap,
     roles: state.getIn(['roles', 'list']),
     removeErrors: state.getIn(['roles', 'removeRequest', 'errors']),
     loading: state.getIn(['roles', 'fetchRequest', 'loading']),
-    account: state.getIn([ 'user', 'account' ])
+    account: state.getIn([ 'user', 'account' ]),
+    projectsMap: projects.reduce((acc, p) => {
+      acc[ p.get('id') ] = p.get('name')
+      return acc
+    }
+    , {}),
   }
-}, { init, edit, fetchList, deleteRole, resetErrors })(Roles)
\ No newline at end of file
+}, { init, edit, fetchList, deleteRole, resetErrors })(withPageTitle('Roles & Access - OpenReplay Preferences')(Roles))
\ No newline at end of file
diff --git a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
index a999a9edf..ce535c9dd 100644
--- a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
+++ b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react'
 import { connect } from 'react-redux'
 import stl from './roleForm.css'
 import { save, edit } from 'Duck/roles'
-import { Input, Button, Checkbox } from 'UI'
+import { Input, Button, Checkbox, Dropdown, Icon } from 'UI'
 
 interface Permission {
   name: string,
@@ -16,9 +16,14 @@ interface Props {
   closeModal: (toastMessage?: string) => void,
   saving: boolean,
   permissions: Array<Permission>[]
+  projectOptions: Array<any>[],
+  permissionsMap: any,
+  projectsMap: any,
+  deleteHandler: (id: any) => Promise<void>,
 }
 
-const RoleForm = ({ role, closeModal, edit, save, saving, permissions }: Props) => {
+const RoleForm = (props: Props) => {
+  const { role, edit, save, closeModal, saving, permissions, projectOptions, permissionsMap, projectsMap } = props
   let focusElement = useRef<any>(null)
   const _save = () => {
     save(role).then(() => {
@@ -28,13 +33,33 @@ const RoleForm = ({ role, closeModal, edit, save, saving, permissions }: Props)
 
   const write = ({ target: { value, name } }) => edit({ [ name ]: value })
 
-  const onChangeOption = (e) => {
+  const onChangePermissions = (e) => {
     const { permissions } = role
     const index = permissions.indexOf(e)
     const _perms = permissions.contains(e) ? permissions.remove(index) : permissions.push(e)
     edit({ permissions: _perms })
   }
 
+  const onChangeProjects = (e) => {
+    const { projects } = role
+    const index = projects.indexOf(e)
+    const _projects = index === -1 ? projects.push(e) : projects.remove(index)
+    edit({ projects: _projects })
+  }
+
+  const writeOption = (e, { name, value }) => {
+    if (name === 'permissions') {
+      onChangePermissions(value)
+    } else if (name === 'projects') {
+      onChangeProjects(value)
+    }
+  }
+
+  const toggleAllProjects = () => {
+    const { allProjects } = role
+    edit({ allProjects: !allProjects })
+  }
+
   useEffect(() => {
     focusElement && focusElement.current && focusElement.current.focus()
   }, [])
@@ -42,8 +67,8 @@ const RoleForm = ({ role, closeModal, edit, save, saving, permissions }: Props)
   return (
     <div className={ stl.form }>
       <form onSubmit={ _save } >
-        <div className={ stl.formGroup }>
-          <label>{ 'Name' }</label>
+        <div className="form-group">
+          <label>{ 'Title' }</label>
           <Input
             ref={ focusElement }
             name="name"
@@ -51,22 +76,77 @@ const RoleForm = ({ role, closeModal, edit, save, saving, permissions }: Props)
             onChange={ write }
             className={ stl.input }
             id="name-field"
+            placeholder="Ex. Admin"
           />
         </div>
 
-        <div>
-          { permissions.map((permission: any, index) => (
-            <div key={ index } className={ stl.formGroup }>
-              <Checkbox
-                name="permissions"
-                className="font-medium"
-                type="checkbox"
-                checked={ role.permissions.contains(permission.value) }
-                onClick={ () => onChangeOption(permission.value) }
-                label={permission.name}
-              />
+        <div className="form-group flex flex-col">
+          <label>{ 'Project Access' }</label>
+
+          <div className="flex my-3">
+            <Checkbox
+              name="allProjects"
+              className="font-medium"
+              type="checkbox"
+              checked={ role.allProjects }
+              onClick={toggleAllProjects}
+              label={''}
+            />
+            <div className="cursor-pointer" onClick={toggleAllProjects}>
+              <div>All Projects</div>
+              <span className="text-xs text-gray-600">
+                (Uncheck to select specific projects)
+              </span>
             </div>
-          ))}
+          </div>
+          { !role.allProjects && (
+            <>
+              <Dropdown
+                search
+                className="fluid"
+                placeholder="Select"
+                selection
+                options={ projectOptions }
+                name="projects"
+                value={null}
+                onChange={ writeOption }
+                id="change-dropdown"
+                selectOnBlur={false}
+                selectOnNavigation={false}
+              />
+              { role.projects.size > 0 && (
+                <div className="flex flex-row items-start flex-wrap mt-4">
+                  { role.projects.map(p => (
+                    OptionLabel(projectsMap, p, onChangeProjects)
+                  )) }
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="form-group flex flex-col">
+          <label>{ 'Capability Access' }</label>
+          <Dropdown
+            search
+            className="fluid"
+            placeholder="Select"
+            selection
+            options={ permissions }
+            name="permissions"
+            value={null}
+            onChange={ writeOption }
+            id="change-dropdown"
+            selectOnBlur={false}
+            selectOnNavigation={false}
+          />
+          { role.permissions.size > 0 && (
+            <div className="flex flex-row items-start flex-wrap mt-4">
+              { role.permissions.map(p => (
+                OptionLabel(permissionsMap, p, onChangePermissions)
+              )) }
+            </div>
+          )}
         </div>
       </form>
 
@@ -89,13 +169,50 @@ const RoleForm = ({ role, closeModal, edit, save, saving, permissions }: Props)
             { 'Cancel' }
           </Button>
         </div>
+        { role.exists() && (
+          <div>
+            <Button
+              data-hidden={ !role.exists() }
+              onClick={ () => props.deleteHandler(role) }
+              hover
+              noPadding
+            >
+              <Icon name="trash" size="18"/>
+            </Button>
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
-export default connect(state => ({
-  role: state.getIn(['roles', 'instance']),
-  permissions: state.getIn(['roles', 'permissions']),
-  saving: state.getIn([ 'roles', 'saveRequest', 'loading' ]),
-}), { edit, save })(RoleForm);
\ No newline at end of file
+export default connect(state => {
+  const role = state.getIn(['roles', 'instance'])
+  const projects = state.getIn([ 'site', 'list' ])
+  return {
+    role,
+    projectOptions: projects.map(p => ({
+      key: p.get('id'),
+      value: p.get('id'),
+      text: p.get('name'),
+      disabled: role.projects.includes(p.get('id')),
+    })).toJS(),
+    permissions: state.getIn(['roles', 'permissions'])
+      .map(({ text, value }) => ({ text, value, disabled: role.permissions.includes(value) })).toJS(),
+    saving: state.getIn([ 'roles', 'saveRequest', 'loading' ]),
+    projectsMap: projects.reduce((acc, p) => {
+      acc[ p.get('id') ] = p.get('name')
+      return acc
+    }
+    , {}),
+  }
+}, { edit, save })(RoleForm);
+
+function OptionLabel(nameMap: any, p: any, onChangeOption: (e: any) => void) {
+  return <div className="px-2 py-1 rounded bg-gray-lightest mr-2 mb-2 border flex items-center justify-between">
+    <div>{nameMap[p]}</div>
+    <div className="cursor-pointer ml-2" onClick={() => onChangeOption(p)}>
+      <Icon name="close" size="12" />
+    </div>
+  </div>
+}
diff --git a/frontend/app/components/Client/Roles/components/RoleForm/roleForm.css b/frontend/app/components/Client/Roles/components/RoleForm/roleForm.css
index a0c5934c8..eed9e22b4 100644
--- a/frontend/app/components/Client/Roles/components/RoleForm/roleForm.css
+++ b/frontend/app/components/Client/Roles/components/RoleForm/roleForm.css
@@ -1,9 +1,5 @@
 .form {
   padding: 0 20px;
-
-  & .formGroup {
-    margin-bottom: 15px;
-  }
   & label {
     display: block;
     margin-bottom: 5px;
diff --git a/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx b/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
index 2ef271a46..dc67dd42d 100644
--- a/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
+++ b/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
@@ -1,11 +1,19 @@
 import React from 'react'
-import { Icon } from 'UI'
+import { Icon, Link } from 'UI'
 import stl from './roleItem.css'
 import cn from 'classnames'
+import { CLIENT_TABS, client as clientRoute } from 'App/routes';
 
-function PermisionLabel({ permission }: any) {
+
+function PermisionLabel({ label }: any) {
   return (
-    <div className={cn(stl.label)}>{ permission }</div>
+    <div className={cn(stl.label, 'mb-2')}>{ label }</div>
+  );
+}
+
+function PermisionLabelLinked({ label, route }: any) {
+  return (
+    <Link to={route}><div className={cn(stl.label, 'mb-2 bg-active-blue color-teal')}>{ label }</div></Link>
   );
 }
 
@@ -14,28 +22,33 @@ interface Props {
   deleteHandler?: (role: any) => void,
   editHandler?: (role: any) => void,
   permissions: any,
-  isAdmin: boolean
+  isAdmin: boolean,
+  projects: any,
 }
-function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions }: Props) {
+function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions, projects }: Props) {
   return (
-    <div className={cn(stl.wrapper)}>
-      <Icon name="user-alt" size="16" marginRight="10" />
-      <div className="flex items-center">
-        <div className="mr-4">{ role.name }</div>
-        <div className="grid grid-flow-col auto-cols-max">
-          {role.permissions.map((permission: any) => (
-            <PermisionLabel permission={permissions[permission]} key={permission.id} />
-            // <span key={permission.id} className={cn(stl.permission)}>{ permissions[permission].name }</span>
-          ))}
-        </div>
+    <div className={cn(stl.wrapper, 'flex items-start relative py-4 hover border-b px-3 pr-20')}>
+      <div className="flex" style={{ width: '20%'}}>
+        <Icon name="user-alt" size="16" marginRight="10" />
+        { role.name }
       </div>
+      <div className="flex items-start flex-wrap" style={{ width: '30%'}}>
+        {role.allProjects ? (
+          <PermisionLabelLinked label="All projects" route={clientRoute(CLIENT_TABS.SITES)}/>
+        ) : (
+          role.projects.map(p => (
+            <PermisionLabel label={projects[p]} />
+          ))
+        )}
+      </div>
+      <div className="flex items-start flex-wrap" style={{ width: '50%'}}>
+        {role.permissions.map((permission: any) => (
+          <PermisionLabel label={permissions[permission]} key={permission.id} />
+        ))}
+      </div>
+
       { isAdmin && (
-        <div className={ stl.actions }>
-          { !!deleteHandler &&
-            <div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => deleteHandler(role) } id="trash">
-              <Icon name="trash" size="16" color="teal"/>
-            </div>
-          }
+        <div className={ cn(stl.actions, 'absolute right-0 top-0 bottom-0 mr-8') }>
           { !!editHandler && 
             <div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => editHandler(role) }>
               <Icon name="edit" size="16" color="teal"/>
@@ -43,7 +56,6 @@ function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions }: Pr
           }
         </div>
       )}
-
     </div>
   );
 }
diff --git a/frontend/app/components/Client/Roles/components/RoleItem/roleItem.css b/frontend/app/components/Client/Roles/components/RoleItem/roleItem.css
index af0aab35d..e5d3224ba 100644
--- a/frontend/app/components/Client/Roles/components/RoleItem/roleItem.css
+++ b/frontend/app/components/Client/Roles/components/RoleItem/roleItem.css
@@ -1,13 +1,5 @@
-.wrapper {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  border-bottom: solid thin #e6e6e6;
-  padding: 10px 0px;
-}
-
 .actions {
-  margin-left: auto;
+  /* margin-left: auto; */
   /* opacity: 0; */
   transition: all 0.4s;
   display: flex;
@@ -37,11 +29,11 @@
 }
 
 .label {
-  margin-left: 10px;
+  margin-right: 10px;
   padding: 0 5px;
   border-radius: 3px;
   background-color: $gray-lightest;
-  font-size: 10px;
+  font-size: 12px;
   border: solid thin $gray-light;
   width: fit-content;
 }
\ No newline at end of file
diff --git a/frontend/app/components/Client/Sites/Sites.js b/frontend/app/components/Client/Sites/Sites.js
index 9b5e3b9b0..4769815e5 100644
--- a/frontend/app/components/Client/Sites/Sites.js
+++ b/frontend/app/components/Client/Sites/Sites.js
@@ -37,7 +37,7 @@ const GDPR_FORM = 'GDPR_FORM';
   remove,
   fetchGDPR
 })
-@withPageTitle('Sites - OpenReplay Preferences')
+@withPageTitle('Projects - OpenReplay Preferences')
 class Sites extends React.PureComponent {
   state = { 
     showTrackingCode: false, 
diff --git a/frontend/app/components/Errors/Errors.js b/frontend/app/components/Errors/Errors.js
index f9e7b5c9b..4eb671cf5 100644
--- a/frontend/app/components/Errors/Errors.js
+++ b/frontend/app/components/Errors/Errors.js
@@ -9,6 +9,7 @@ import { fetchList as fetchSlackList } from 'Duck/integrations/slack';
 import { errors as errorsRoute, isRoute } from "App/routes";
 import EventFilter from 'Components/BugFinder/EventFilter';
 import DateRange from 'Components/BugFinder/DateRange';
+import withPageTitle from 'HOCs/withPageTitle';
 
 import { SavedSearchList } from 'UI';
 
@@ -43,6 +44,7 @@ function getStatusLabel(status) {
 	applyFilter,
 	fetchSlackList,
 })
+@withPageTitle("Errors - OpenReplay")
 export default class Errors extends React.PureComponent {
 	state = {
 		status: UNRESOLVED,
diff --git a/frontend/app/duck/roles.js b/frontend/app/duck/roles.js
index 874bd9be6..8a8415475 100644
--- a/frontend/app/duck/roles.js
+++ b/frontend/app/duck/roles.js
@@ -2,6 +2,7 @@ import { List, Map } from 'immutable';
 import Role from 'Types/role';
 import crudDuckGenerator from './tools/crudDuck';
 import { reduceDucks } from 'Duck/tools';
+import { array, request, success, failure, createListUpdater, mergeReducers } from './funcTools/tools';
 
 const crudDuck = crudDuckGenerator('client/role', Role, { idKey: 'roleId' });
 export const { fetchList, init, edit, remove, } = crudDuck.actions;
@@ -11,19 +12,29 @@ const RESET_ERRORS = 'roles/RESET_ERRORS';
 const initialState = Map({
   list: List(),
   permissions: List([
-    { name: 'Session Replay', value: 'SESSION_REPLAY' },
-    { name: 'Developer Tools', value: 'DEV_TOOLS' },
-    { name: 'Errors', value: 'ERRORS' },
-    { name: 'Metrics', value: 'METRICS' },
-    { name: 'Assist (Live)', value: 'ASSIST_LIVE' },
-    { name: 'Assist (Call)', value: 'ASSIST_CALL' },
+    { text: 'Session Replay', value: 'SESSION_REPLAY' },
+    { text: 'Developer Tools', value: 'DEV_TOOLS' },
+    { text: 'Errors', value: 'ERRORS' },
+    { text: 'Metrics', value: 'METRICS' },
+    { text: 'Assist (Live)', value: 'ASSIST_LIVE' },
+    { text: 'Assist (Call)', value: 'ASSIST_CALL' },
   ])
 });
 
+const name = "role";
+const idKey = "roleId";
+
+const updateItemInList = createListUpdater(idKey);
+const updateInstance = (state, instance) => state.getIn([ "instance", idKey ]) === instance[ idKey ]
+	? state.mergeIn([ "instance" ], instance)
+	: state;
+
 const reducer = (state = initialState, action = {}) => {
   switch (action.type) {
     case RESET_ERRORS:
       return state.setIn(['removeRequest', 'errors'], null);
+    case crudDuck.actionTypes.SAVE.SUCCESS:
+      return updateItemInList(updateInstance(state, action.data), action.data);
   }
   return state;
 };
diff --git a/frontend/app/routes.js b/frontend/app/routes.js
index 2ca5fd672..cdccc6327 100644
--- a/frontend/app/routes.js
+++ b/frontend/app/routes.js
@@ -59,8 +59,8 @@ export const forgotPassword = () => '/reset-password';
 export const CLIENT_TABS = {
   INTEGRATIONS: 'integrations',
   PROFILE: 'account',
-  MANAGE_USERS: 'manage-users',
-  MANAGE_ROLES: 'manage-roles',
+  MANAGE_USERS: 'team',
+  MANAGE_ROLES: 'roles',
   SITES: 'projects',  
   CUSTOM_FIELDS: 'metadata',
   WEBHOOKS: 'webhooks',
@@ -73,7 +73,7 @@ export const client = (tab = routerClientTabString) => `/client/${ tab }`;
 export const OB_TABS = {
   INSTALLING: 'installing',
   IDENTIFY_USERS: 'identify-users',
-  MANAGE_USERS: 'manage-users',
+  MANAGE_USERS: 'team',
   INTEGRATIONS: 'integrations',
 };
 export const OB_DEFAULT_TAB = OB_TABS.INSTALLING;
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index f27155e36..fc366bc39 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -117,4 +117,10 @@
 .disabled {
   opacity: 0.4;
   pointer-events: none;
+}
+
+.hover {
+  &:hover {
+    background-color: $active-blue;
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/svg/icons/diagram-3.svg b/frontend/app/svg/icons/diagram-3.svg
new file mode 100644
index 000000000..03e448c17
--- /dev/null
+++ b/frontend/app/svg/icons/diagram-3.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-diagram-3" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/types/role.js b/frontend/app/types/role.js
index 52a74d400..d63afa5db 100644
--- a/frontend/app/types/role.js
+++ b/frontend/app/types/role.js
@@ -1,18 +1,21 @@
 import Record from 'Types/Record';
-import { validateName } from 'App/validate';
+import { notEmptyString, validateName } from 'App/validate';
 import { List } from 'immutable';
 
 export default Record({
   roleId: undefined,
   name: '',
+  allProjects: true,
   permissions: List(),
+  projects: List(),
   protected: false,
-  description: ''
+  description: '',
+  permissionOptions: List(),
 }, {
   idKey: 'roleId',
   methods: {
     validate() {
-      return validateName(this.name, { diacritics: true });
+      return notEmptyString(this.name) && validateName(this.name, { diacritics: true }) && (this.allProjects || this.projects.size > 0);
     },
     toData() {
       const js = this.toJS();
@@ -21,10 +24,11 @@ export default Record({
       return js;
     },
   },
-  fromJS({ permissions, ...rest }) {
+  fromJS({ projects = [], permissions = [], ...rest }) {
     return {
       ...rest,
-      permissions: List(permissions)
+      permissions: List(permissions),
+      projects: List(projects),
     }
   },
 });