diff --git a/frontend/app/components/Client/Roles/Roles.tsx b/frontend/app/components/Client/Roles/Roles.tsx
index 75469d3cf..293ff28d0 100644
--- a/frontend/app/components/Client/Roles/Roles.tsx
+++ b/frontend/app/components/Client/Roles/Roles.tsx
@@ -27,8 +27,7 @@ interface Props {
 }
 
 function Roles(props: Props) {
-    const { loading, instance, roles, init, edit, deleteRole, account, permissionsMap, projectsMap, removeErrors } = props;
-    // const [showModal, setShowmModal] = useState(false);
+    const { loading, roles, init, edit, deleteRole, account, permissionsMap, projectsMap, removeErrors } = props;
     const { showModal, hideModal } = useModal();
     const isAdmin = account.admin || account.superAdmin;
 
@@ -47,17 +46,6 @@ function Roles(props: Props) {
         };
     }, [removeErrors]);
 
-    // const closeModal = (showToastMessage: boolean) => {
-    //     if (showToastMessage) {
-    //         toast.success(showToastMessage);
-    //         props.fetchList();
-    //     }
-    //     // setShowmModal(false);
-    //     setTimeout(() => {
-    //         init();
-    //     }, 100);
-    // };
-
     const editHandler = (role: any) => {
         init(role);
         showModal(<RoleForm closeModal={hideModal} permissionsMap={permissionsMap} deleteHandler={deleteHandler} />, { right: true });
@@ -103,6 +91,7 @@ function Roles(props: Props) {
                             </div>
                             {roles.map((role) => (
                                 <RoleItem
+                                    key={role.roleId}
                                     role={role}
                                     isAdmin={isAdmin}
                                     permissions={permissionsMap}
diff --git a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
index 93a320d54..f189c09ec 100644
--- a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
+++ b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
@@ -32,16 +32,16 @@ const RoleForm = (props: Props) => {
         });
     };
 
-    const write = ({ target: { value, name } }) => edit({ [name]: value });
+    const write = ({ target: { value, name } }: any) => edit({ [name]: value });
 
-    const onChangePermissions = (e) => {
+    const onChangePermissions = (e: any) => {
         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 onChangeProjects = (e: any) => {
         const { projects } = role;
         const index = projects.indexOf(e);
         const _projects = index === -1 ? projects.push(e) : projects.remove(index);
@@ -111,7 +111,7 @@ const RoleForm = (props: Props) => {
                                 />
                                 {role.projects.size > 0 && (
                                     <div className="flex flex-row items-start flex-wrap mt-4">
-                                        {role.projects.map((p) => OptionLabel(projectsMap, p, onChangeProjects))}
+                                        {role.projects.map((p: any) => OptionLabel(projectsMap, p, onChangeProjects))}
                                     </div>
                                 )}
                             </>
@@ -129,7 +129,7 @@ const RoleForm = (props: Props) => {
                         />
                         {role.permissions.size > 0 && (
                             <div className="flex flex-row items-start flex-wrap mt-4">
-                                {role.permissions.map((p) => OptionLabel(permissionsMap, p, onChangePermissions))}
+                                {role.permissions.map((p: any) => OptionLabel(permissionsMap, p, onChangePermissions))}
                             </div>
                         )}
                     </Form.Field>
@@ -185,7 +185,7 @@ export default connect(
 
 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 className="px-2 py-1 rounded bg-gray-lightest mr-2 mb-2 border flex items-center justify-between" key={p.roleId}>
             <div>{nameMap[p]}</div>
             <div className="cursor-pointer ml-2" onClick={() => onChangeOption(p)}>
                 <Icon name="close" size="12" />
diff --git a/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx b/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
index b3d76b20e..c84d30966 100644
--- a/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
+++ b/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
@@ -18,30 +18,29 @@ function PermisionLabelLinked({ label, route }: any) {
 
 interface Props {
     role: any;
-    deleteHandler?: (role: any) => void;
     editHandler?: (role: any) => void;
     permissions: any;
     isAdmin: boolean;
     projects: any;
 }
-function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions, projects }: Props) {
+function RoleItem({ role, editHandler, isAdmin, permissions, projects }: Props) {
     return (
         <div className={cn('flex items-start relative py-4 hover border-b last:border-none px-5 pr-20 group')}>
             <div className="flex" style={{ width: '20%' }}>
-                <Icon name="user-alt" size="16" marginRight="10" />
+                <Icon name="user-alt" size="16" className="mr-2" />
                 {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]} />)
+                    role.projects.map((p: any) => <PermisionLabel label={projects[p]} />)
                 )}
             </div>
             <div className="flex items-start flex-wrap" style={{ width: '50%' }}>
                 <div className="flex items-center flex-wrap">
                     {role.permissions.map((permission: any) => (
-                        <PermisionLabel label={permissions[permission]} key={permission.id} />
+                        <PermisionLabel label={permissions[permission]} key={permission} />
                     ))}
                 </div>
 
diff --git a/frontend/app/duck/roles.js b/frontend/app/duck/roles.js
index 139e3c29e..3015d556c 100644
--- a/frontend/app/duck/roles.js
+++ b/frontend/app/duck/roles.js
@@ -5,7 +5,7 @@ import { reduceDucks } from 'Duck/tools';
 import { createListUpdater } from './funcTools/tools';
 
 const crudDuck = crudDuckGenerator('client/role', Role, { idKey: 'roleId' });
-export const { fetchList, init, edit, remove, } = crudDuck.actions;
+export const { fetchList, init, edit, remove } = crudDuck.actions;
 
 const RESET_ERRORS = 'roles/RESET_ERRORS';
 
@@ -18,23 +18,24 @@ const initialState = Map({
     { text: 'Dashboard', value: 'METRICS' },
     { text: 'Assist (Live)', value: 'ASSIST_LIVE' },
     { text: 'Assist (Call)', value: 'ASSIST_CALL' },
-  ])
+  ]),
 });
 
 // const name = "role";
-const idKey = "roleId";
+const idKey = 'roleId';
 
 const updateItemInList = createListUpdater(idKey);
-const updateInstance = (state, instance) => state.getIn([ "instance", idKey ]) === instance[ idKey ]
-	? state.mergeIn([ "instance" ], instance)
-	: state;
+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 updateItemInList(updateInstance(state, action.data), Role(action.data));
   }
   return state;
 };
@@ -42,14 +43,17 @@ const reducer = (state = initialState, action = {}) => {
 export function save(instance) {
   return {
     types: crudDuck.actionTypes.SAVE.toArray(),
-    call: client => instance.roleId ? client.post(`/client/roles/${ instance.roleId }`, instance.toData()) : client.put(`/client/roles`, instance.toData()),
+    call: (client) =>
+      instance.roleId
+        ? client.post(`/client/roles/${instance.roleId}`, instance.toData())
+        : client.put(`/client/roles`, instance.toData()),
   };
 }
 
 export function resetErrors() {
   return {
     type: RESET_ERRORS,
-  }
+  };
 }
 
 export default reduceDucks(crudDuck, { initialState, reducer }).reducer;
diff --git a/frontend/app/duck/site.js b/frontend/app/duck/site.js
index 08d04b70e..82fabf706 100644
--- a/frontend/app/duck/site.js
+++ b/frontend/app/duck/site.js
@@ -54,7 +54,6 @@ const reducer = (state = initialState, action = {}) => {
 		case FETCH_GDPR_SUCCESS:
 			return state.mergeIn([ 'instance', 'gdpr' ], action.data);
 		case success(SAVE):
-			console.log(action)
 			const newSite = Site(action.data);
 			return updateItemInList(state, newSite)
 				.set('siteId', newSite.get('id'))