diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
index fc9ad5b53..2b3ca2ee8 100644
--- a/backend/src/main/resources/i18n/messages.properties
+++ b/backend/src/main/resources/i18n/messages.properties
@@ -492,10 +492,13 @@ label.by=By
 label.source=Metadata Source
 label.provider=Metadata Provider
 
+
+
 message.user-role-admin-group=Cannot change group for ROLE_ADMIN users.
 
 label.roles-management=Role Management
 label.new-role=New Role
+label.edit-role=Edit Role
 label.role-name=Role Name
 label.role-description=Role Description
 label.role=Role
diff --git a/ui/src/app/admin/container/EditRole.js b/ui/src/app/admin/container/EditRole.js
index cc8d802ed..16b503aed 100644
--- a/ui/src/app/admin/container/EditRole.js
+++ b/ui/src/app/admin/container/EditRole.js
@@ -27,7 +27,7 @@ export function EditRole() {
 
     async function save(role) {
         let toast;
-        const resp = await put(``, role);
+        const resp = await put(`/${role.resourceId}`, role);
         if (response.ok) {
             gotoDetail({ refresh: true });
             toast = createNotificationAction(`Updated role successfully.`, NotificationTypes.SUCCESS);
diff --git a/ui/src/app/admin/container/RoleList.js b/ui/src/app/admin/container/RoleList.js
index e48851f90..96278d0b4 100644
--- a/ui/src/app/admin/container/RoleList.js
+++ b/ui/src/app/admin/container/RoleList.js
@@ -46,20 +46,22 @@ export function RoleList({ roles, onDelete }) {
                                         <tbody>
                                             {(roles?.length > 0) ? roles.map((role, i) =>
                                                 <tr key={i}>
-                                                    <td>{role.name}</td>
+                                                    <td className="align-middle">{role.name}</td>
                                                     <td className="text-right">
-                                                        <Link to={`../roles/${role.resourceId}/edit`} className="btn btn-link text-primary">
-                                                            <FontAwesomeIcon icon={faEdit} size="lg" />
-                                                            <span className="sr-only">
-                                                                <Translate value="action.edit">Edit</Translate>
-                                                            </span>
-                                                        </Link>
-                                                        <Button variant="link" className="text-danger" onClick={() => block(() => remove(role.resourceId))}>
-                                                            <FontAwesomeIcon icon={faTrash} size="lg" />
-                                                            <span className="sr-only">
-                                                                <Translate value="action.delete">Delete</Translate>
-                                                            </span>
-                                                        </Button>
+                                                        <React.Fragment>
+                                                            <Link disabled={role.name === 'ROLE_ADMIN'} to={`../roles/${role.resourceId}/edit`} className={`btn btn-link text-primary ${role.name === 'ROLE_ADMIN' ? 'disabled' : ''}`}>
+                                                                <FontAwesomeIcon icon={faEdit} size="lg" />
+                                                                <span className="sr-only">
+                                                                    <Translate value="action.edit">Edit</Translate>
+                                                                </span>
+                                                            </Link>
+                                                            <Button disabled={role.name === 'ROLE_ADMIN'} variant="link" className="text-danger" onClick={() => block(() => remove(role.resourceId))}>
+                                                                <FontAwesomeIcon icon={faTrash} size="lg" />
+                                                                <span className="sr-only">
+                                                                    <Translate value="action.delete">Delete</Translate>
+                                                                </span>
+                                                            </Button>
+                                                        </React.Fragment>
                                                     </td>
                                                 </tr>
                                             ) : <tr>
diff --git a/ui/src/app/admin/hoc/RoleProvider.js b/ui/src/app/admin/hoc/RoleProvider.js
index 091ac1bd6..dbe0feea2 100644
--- a/ui/src/app/admin/hoc/RoleProvider.js
+++ b/ui/src/app/admin/hoc/RoleProvider.js
@@ -3,13 +3,13 @@ import { useRole } from '../hooks';
 
 export function RoleProvider({ id, children }) {
 
-    const [role, setRole] = React.useState({id: 'foo'});
+    const [role, setRole] = React.useState();
     const { get, response } = useRole(id);
 
     async function loadRole() {
-        const role = await get(``);
+        const r = await get(``);
         if (response.ok) {
-            setRole(role);
+            setRole(r);
         }
     }