diff --git a/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx b/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
index 02058f337..845811f77 100644
--- a/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
+++ b/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
@@ -27,7 +27,7 @@ interface Props {
 }
 function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions, projects }: Props) {
   return (
-    <div className={cn('flex items-start relative py-4 hover border-b px-3 pr-20')}>
+    <div className={cn('flex items-start relative py-4 hover border-b px-3 pr-20 group')}>
       <div className="flex" style={{ width: '20%'}}>
         <Icon name="user-alt" size="16" marginRight="10" />
         { role.name }
@@ -48,7 +48,7 @@ function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions, proj
           ))}
         </div>
 
-        <div className={ cn(stl.actions, 'absolute right-0 top-0 bottom-0 mr-8') }>
+        <div className={ cn(stl.actions, 'absolute right-0 top-0 bottom-0 mr-8 invisible group-hover:visible') }>
           {isAdmin && !!editHandler && 
             <div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => editHandler(role) }>
               <Icon name="edit" size="16" color="teal"/>
diff --git a/frontend/app/components/Client/Roles/components/RoleItem/roleItem.module.css b/frontend/app/components/Client/Roles/components/RoleItem/roleItem.module.css
index e5d3224ba..0944fbff6 100644
--- a/frontend/app/components/Client/Roles/components/RoleItem/roleItem.module.css
+++ b/frontend/app/components/Client/Roles/components/RoleItem/roleItem.module.css
@@ -1,7 +1,7 @@
 .actions {
   /* margin-left: auto; */
   /* opacity: 0; */
-  transition: all 0.4s;
+  /* transition: all 0.4s; */
   display: flex;
   align-items: center;
   & .button {