diff --git a/scm-ui/public/locales/de/config.json b/scm-ui/public/locales/de/config.json
index d26552c30d..3fc61a9b47 100644
--- a/scm-ui/public/locales/de/config.json
+++ b/scm-ui/public/locales/de/config.json
@@ -9,30 +9,26 @@
   "repositoryRole": {
     "navLink": "Berechtigungsrollen",
     "title": "Berechtigungsrollen",
-    "noPermissionRoles": "Keine Berechtigungsrollen gefunden.",
-    "system": "System",
-    "createButton": "Berechtigungsrolle erstellen",
+    "errorTitle": "Fehler",
+    "errorSubtitle": "Unbekannter Berechtigungsrollen Fehler",
+    "createSubtitle": "Berechtigungsrolle erstellen",
+    "editSubtitle": "Berechtigungsrolle bearbeiten",
+    "overview": {
+      "title": "Übersicht aller verfügbaren Berechtigungsrollen",
+      "noPermissionRoles": "Keine Berechtigungsrollen gefunden.",
+      "createButton": "Berechtigungsrolle erstellen"
+    },
+    "editButton": "Bearbeiten",
     "name": "Name",
     "type": "Typ",
     "verbs": "Berechtigungen",
-    "button": {
-      "edit": "Bearbeiten"
-    },
-    "create": {
-      "name": "Name"
-    },
-    "edit": "Berechtigungsrolle bearbeiten",
+    "system": "System",
     "form": {
-      "subtitle": "Berechtigungsrolle bearbeiten",
       "name": "Name",
       "permissions": "Berechtigungen",
       "submit": "Speichern"
     }
   },
-  "role": {
-    "name": "Name",
-    "system": "System"
-  },
   "deleteRole" : {
     "button": "Löschen",
     "subtitle": "Berechtigungsrolle löschen",
diff --git a/scm-ui/public/locales/en/config.json b/scm-ui/public/locales/en/config.json
index b2f6e77e0d..d7ffa3d229 100644
--- a/scm-ui/public/locales/en/config.json
+++ b/scm-ui/public/locales/en/config.json
@@ -9,31 +9,27 @@
   "repositoryRole": {
     "navLink": "Permission Roles",
     "title": "Permission Roles",
-    "noPermissionRoles": "No permission roles found.",
-    "system": "System",
-    "createButton": "Create Permission Role",
+    "errorTitle": "Error",
+    "errorSubtitle": "Unknown Permission Role Error",
+    "createSubtitle": "Create Permission Role",
+    "editSubtitle": "Edit Permission Role",
+    "overview": {
+      "title": "Overview of all permission roles",
+      "noPermissionRoles": "No permission roles found.",
+      "createButton": "Create Permission Role"
+    },
+    "editButton": "Edit",
     "name": "Name",
     "type": "Type",
     "verbs": "Permissions",
-    "edit": "Edit Permission Role",
-    "button": {
-      "edit": "Edit"
-    },
-    "create": {
-      "name": "Name"
-    },
+    "system": "System",
     "form": {
-      "subtitle": "Edit Permission Role",
       "name": "Name",
       "permissions": "Permissions",
       "submit": "Save"
     }
   },
-  "role": {
-    "name": "Name",
-    "system": "System"
-  },
-  "deleteRole" : {
+  "deleteRole": {
     "button": "Delete",
     "subtitle": "Delete Permission Role",
     "confirmAlert": {
diff --git a/scm-ui/src/config/containers/Config.js b/scm-ui/src/config/containers/Config.js
index 496dce4611..53f00ea3dc 100644
--- a/scm-ui/src/config/containers/Config.js
+++ b/scm-ui/src/config/containers/Config.js
@@ -74,7 +74,6 @@ class Config extends React.Component<Props> {
                 path={`${url}/roles/create`}
                 render={() => (
                   <CreateRepositoryRole
-                    disabled={false}
                     history={this.props.history}
                   />
                 )}
@@ -104,6 +103,7 @@ class Config extends React.Component<Props> {
                   to={`${url}/roles/`}
                   label={t("repositoryRole.navLink")}
                   activeWhenMatch={this.matchesRoles}
+                  activeOnlyWhenExact={false}
                 />
                 <ExtensionPoint
                   name="config.navigation"
diff --git a/scm-ui/src/config/roles/components/AvailableVerbs.js b/scm-ui/src/config/roles/components/AvailableVerbs.js
index dbe0b50a77..d544557644 100644
--- a/scm-ui/src/config/roles/components/AvailableVerbs.js
+++ b/scm-ui/src/config/roles/components/AvailableVerbs.js
@@ -1,13 +1,15 @@
 //@flow
 import React from "react";
-import type { RepositoryRole } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
 import { compose } from "redux";
 import injectSheet from "react-jss";
+import { translate } from "react-i18next";
+import type { RepositoryRole } from "@scm-manager/ui-types";
 
 type Props = {
   role: RepositoryRole,
+
   // context props
+  classes: any,
   t: string => string
 };
 
diff --git a/scm-ui/src/config/roles/components/PermissionRoleDetails.js b/scm-ui/src/config/roles/components/PermissionRoleDetails.js
index 1977ddde2a..610bc98b6a 100644
--- a/scm-ui/src/config/roles/components/PermissionRoleDetails.js
+++ b/scm-ui/src/config/roles/components/PermissionRoleDetails.js
@@ -2,9 +2,9 @@
 import React from "react";
 import { translate } from "react-i18next";
 import type { RepositoryRole } from "@scm-manager/ui-types";
-import ExtensionPoint from "@scm-manager/ui-extensions/lib/ExtensionPoint";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import PermissionRoleDetailsTable from "./PermissionRoleDetailsTable";
-import { Button, Subtitle } from "@scm-manager/ui-components";
+import { Button } from "@scm-manager/ui-components";
 
 type Props = {
   role: RepositoryRole,
@@ -20,7 +20,7 @@ class PermissionRoleDetails extends React.Component<Props> {
     if (!!this.props.role._links.update) {
       return (
         <Button
-          label={t("repositoryRole.button.edit")}
+          label={t("repositoryRole.editButton")}
           link={`${url}/edit`}
           color="primary"
         />
@@ -33,18 +33,16 @@ class PermissionRoleDetails extends React.Component<Props> {
     const { role } = this.props;
 
     return (
-      <div>
+      <>
         <PermissionRoleDetailsTable role={role} />
         <hr />
         {this.renderEditButton()}
-        <div className="content">
-          <ExtensionPoint
-            name="repositoryRole.role-details.information"
-            renderAll={true}
-            props={{ role }}
-          />
-        </div>
-      </div>
+        <ExtensionPoint
+          name="repositoryRole.role-details.information"
+          renderAll={true}
+          props={{ role }}
+        />
+      </>
     );
   }
 }
diff --git a/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js b/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js
index dd0502cb02..28ab5e1f14 100644
--- a/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js
+++ b/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js
@@ -6,6 +6,7 @@ import AvailableVerbs from "./AvailableVerbs";
 
 type Props = {
   role: RepositoryRole,
+
   // context props
   t: string => string
 };
@@ -16,18 +17,18 @@ class PermissionRoleDetailsTable extends React.Component<Props> {
     return (
       <table className="table content">
         <tbody>
-          <tr>
-            <th>{t("repositoryRole.name")}</th>
-            <td>{role.name}</td>
-          </tr>
-          <tr>
-            <th>{t("repositoryRole.type")}</th>
-            <td>{role.type}</td>
-          </tr>
-          <tr>
-            <th>{t("repositoryRole.verbs")}</th>
-            <AvailableVerbs role={role} />
-          </tr>
+        <tr>
+          <th>{t("repositoryRole.name")}</th>
+          <td>{role.name}</td>
+        </tr>
+        <tr>
+          <th>{t("repositoryRole.type")}</th>
+          <td>{role.type}</td>
+        </tr>
+        <tr>
+          <th>{t("repositoryRole.verbs")}</th>
+          <AvailableVerbs role={role} />
+        </tr>
         </tbody>
       </table>
     );
diff --git a/scm-ui/src/config/roles/components/PermissionRoleTable.js b/scm-ui/src/config/roles/components/PermissionRoleTable.js
index bb98f7c3e9..13c5d775d1 100644
--- a/scm-ui/src/config/roles/components/PermissionRoleTable.js
+++ b/scm-ui/src/config/roles/components/PermissionRoleTable.js
@@ -8,6 +8,7 @@ type Props = {
   baseUrl: string,
   roles: RepositoryRole[],
 
+  // context props
   t: string => string
 };
 
@@ -17,16 +18,16 @@ class PermissionRoleTable extends React.Component<Props> {
     return (
       <table className="card-table table is-hoverable is-fullwidth">
         <thead>
-          <tr>
-            <th>{t("repositoryRole.form.name")}</th>
-          </tr>
+        <tr>
+          <th>{t("repositoryRole.name")}</th>
+        </tr>
         </thead>
         <tbody>
-          {roles.map((role, index) => {
-            return (
-              <PermissionRoleRow key={index} baseUrl={baseUrl} role={role} />
-            );
-          })}
+        {roles.map((role, index) => {
+          return (
+            <PermissionRoleRow key={index} baseUrl={baseUrl} role={role} />
+          );
+        })}
         </tbody>
       </table>
     );
diff --git a/scm-ui/src/config/roles/components/SystemRoleTag.js b/scm-ui/src/config/roles/components/SystemRoleTag.js
index 0f6b87addc..8aad57eddc 100644
--- a/scm-ui/src/config/roles/components/SystemRoleTag.js
+++ b/scm-ui/src/config/roles/components/SystemRoleTag.js
@@ -6,6 +6,8 @@ import { translate } from "react-i18next";
 
 type Props = {
   system?: boolean,
+
+  // context props
   classes: any,
   t: string => string
 };
@@ -24,7 +26,7 @@ class SystemRoleTag extends React.Component<Props> {
     if (system) {
       return (
         <span className={classNames("tag is-dark", classes.tag)}>
-          {t("role.system")}
+          {t("repositoryRole.system")}
         </span>
       );
     }
diff --git a/scm-ui/src/config/roles/containers/CreateRepositoryRole.js b/scm-ui/src/config/roles/containers/CreateRepositoryRole.js
index 88f42f8353..55b141469f 100644
--- a/scm-ui/src/config/roles/containers/CreateRepositoryRole.js
+++ b/scm-ui/src/config/roles/containers/CreateRepositoryRole.js
@@ -3,7 +3,7 @@ import React from "react";
 import RepositoryRoleForm from "./RepositoryRoleForm";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
-import { ErrorNotification, Title } from "@scm-manager/ui-components";
+import {ErrorNotification, Subtitle, Title} from "@scm-manager/ui-components";
 import {
   createRole,
   getCreateRoleFailure,
@@ -15,11 +15,12 @@ import {
   getRepositoryRolesLink,
   getRepositoryVerbsLink
 } from "../../../modules/indexResource";
+import type {History} from "history";
 
 type Props = {
-  disabled: boolean,
   repositoryRolesLink: string,
   error?: Error,
+  history: History,
 
   //dispatch function
   addRole: (link: string, role: RepositoryRole, callback?: () => void) => void,
@@ -50,8 +51,8 @@ class CreateRepositoryRole extends React.Component<Props> {
     return (
       <>
         <Title title={t("repositoryRole.title")} />
+        <Subtitle subtitle={t("repositoryRole.createSubtitle")} />
         <RepositoryRoleForm
-          disabled={this.props.disabled}
           submitForm={role => this.createRepositoryRole(role)}
         />
       </>
diff --git a/scm-ui/src/config/roles/containers/EditRepositoryRole.js b/scm-ui/src/config/roles/containers/EditRepositoryRole.js
index f63a2f3e50..15e3bee6ae 100644
--- a/scm-ui/src/config/roles/containers/EditRepositoryRole.js
+++ b/scm-ui/src/config/roles/containers/EditRepositoryRole.js
@@ -8,8 +8,9 @@ import {
   isModifyRolePending,
   modifyRole
 } from "../modules/roles";
-import { ErrorNotification } from "@scm-manager/ui-components";
+import { ErrorNotification, Subtitle } from "@scm-manager/ui-components";
 import type { RepositoryRole } from "@scm-manager/ui-types";
+import type { History } from "history";
 import DeleteRepositoryRole from "./DeleteRepositoryRole";
 
 type Props = {
@@ -18,26 +19,25 @@ type Props = {
   repositoryRolesLink: string,
   error?: Error,
 
+  // context objects
+  t: string => string,
+  history: History,
+
   //dispatch function
-  updateRole: (
-    link: string,
-    role: RepositoryRole,
-    callback?: () => void
-  ) => void
+  updateRole: (role: RepositoryRole, callback?: () => void) => void
 };
 
 class EditRepositoryRole extends React.Component<Props> {
-  repositoryRoleUpdated = (role: RepositoryRole) => {
-    const { history } = this.props;
-    history.push("/config/roles/");
+  repositoryRoleUpdated = () => {
+    this.props.history.push("/config/roles/");
   };
 
   updateRepositoryRole = (role: RepositoryRole) => {
-    this.props.updateRole(role, () => this.repositoryRoleUpdated(role));
+    this.props.updateRole(role, this.repositoryRoleUpdated);
   };
 
   render() {
-    const { error } = this.props;
+    const { error, t } = this.props;
 
     if (error) {
       return <ErrorNotification error={error} />;
@@ -45,8 +45,8 @@ class EditRepositoryRole extends React.Component<Props> {
 
     return (
       <>
+        <Subtitle subtitle={t("repositoryRole.editSubtitle")} />
         <RepositoryRoleForm
-          nameDisabled={true}
           role={this.props.role}
           submitForm={role => this.updateRepositoryRole(role)}
         />
@@ -58,7 +58,7 @@ class EditRepositoryRole extends React.Component<Props> {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const loading = isModifyRolePending(state);
+  const loading = isModifyRolePending(state, ownProps.role.name);
   const error = getModifyRoleFailure(state, ownProps.role.name);
 
   return {
diff --git a/scm-ui/src/config/roles/containers/RepositoryRoleForm.js b/scm-ui/src/config/roles/containers/RepositoryRoleForm.js
index 43d901a285..9269af3838 100644
--- a/scm-ui/src/config/roles/containers/RepositoryRoleForm.js
+++ b/scm-ui/src/config/roles/containers/RepositoryRoleForm.js
@@ -19,7 +19,6 @@ import {
 type Props = {
   role?: RepositoryRole,
   loading?: boolean,
-  nameDisabled: boolean,
   availableVerbs: string[],
   verbsLink: string,
   submitForm: RepositoryRole => void,
@@ -103,7 +102,7 @@ class RepositoryRoleForm extends React.Component<Props, State> {
   };
 
   render() {
-    const { loading, availableVerbs, nameDisabled, t } = this.props;
+    const { loading, availableVerbs, t } = this.props;
     const { role } = this.state;
 
     const verbSelectBoxes = !availableVerbs
@@ -119,28 +118,25 @@ class RepositoryRoleForm extends React.Component<Props, State> {
 
     return (
       <form onSubmit={this.submit}>
-        <div className="columns">
-          <div className="column">
-            <InputField
-              name="name"
-              label={t("repositoryRole.create.name")}
-              onChange={this.handleNameChange}
-              value={role.name ? role.name : ""}
-              disabled={nameDisabled}
-            />
-          </div>
+        <InputField
+          name="name"
+          label={t("repositoryRole.form.name")}
+          onChange={this.handleNameChange}
+          value={role.name ? role.name : ""}
+          disabled={!!this.props.role}
+        />
+        <div className="field">
+          <label className="label">
+            {t("repositoryRole.form.permissions")}
+          </label>
+          {verbSelectBoxes}
         </div>
-        <>{verbSelectBoxes}</>
         <hr />
-        <div className="columns">
-          <div className="column">
-            <SubmitButton
-              loading={loading}
-              label={t("repositoryRole.form.submit")}
-              disabled={!this.isValid()}
-            />
-          </div>
-        </div>
+        <SubmitButton
+          loading={loading}
+          label={t("repositoryRole.form.submit")}
+          disabled={!this.isValid()}
+        />
       </form>
     );
   }
diff --git a/scm-ui/src/config/roles/containers/RepositoryRoles.js b/scm-ui/src/config/roles/containers/RepositoryRoles.js
index f148b120e0..2de1d3d74c 100644
--- a/scm-ui/src/config/roles/containers/RepositoryRoles.js
+++ b/scm-ui/src/config/roles/containers/RepositoryRoles.js
@@ -7,6 +7,7 @@ import type { History } from "history";
 import type { RepositoryRole, PagedCollection } from "@scm-manager/ui-types";
 import {
   Title,
+  Subtitle,
   Loading,
   Notification,
   LinkPaginator,
@@ -22,7 +23,8 @@ import {
   getFetchRolesFailure
 } from "../modules/roles";
 import PermissionRoleTable from "../components/PermissionRoleTable";
-import { getRolesLink } from "../../../modules/indexResource";
+import { getRepositoryRolesLink } from "../../../modules/indexResource";
+
 type Props = {
   baseUrl: string,
   roles: RepositoryRole[],
@@ -36,6 +38,7 @@ type Props = {
   // context objects
   t: string => string,
   history: History,
+  location: any,
 
   // dispatch functions
   fetchRolesByPage: (link: string, page: number) => void
@@ -61,8 +64,7 @@ class RepositoryRoles extends React.Component<Props> {
       if (page !== statePage || prevProps.location.search !== location.search) {
         fetchRolesByPage(
           rolesLink,
-          page,
-          urls.getQueryStringFromLocation(location)
+          page
         );
       }
     }
@@ -76,11 +78,12 @@ class RepositoryRoles extends React.Component<Props> {
     }
 
     return (
-      <div>
+      <>
         <Title title={t("repositoryRole.title")} />
+        <Subtitle subtitle={t("repositoryRole.overview.title")} />
         {this.renderPermissionsTable()}
         {this.renderCreateButton()}
-      </div>
+      </>
     );
   }
 
@@ -96,7 +99,7 @@ class RepositoryRoles extends React.Component<Props> {
     }
     return (
       <Notification type="info">
-        {t("repositoryRole.noPermissionRoles")}
+        {t("repositoryRole.overview.noPermissionRoles")}
       </Notification>
     );
   }
@@ -106,7 +109,7 @@ class RepositoryRoles extends React.Component<Props> {
     if (canAddRoles) {
       return (
         <CreateButton
-          label={t("repositoryRole.createButton")}
+          label={t("repositoryRole.overview.createButton")}
           link={`${baseUrl}/create`}
         />
       );
@@ -123,7 +126,7 @@ const mapStateToProps = (state, ownProps) => {
   const page = urls.getPageFromMatch(match);
   const canAddRoles = isPermittedToCreateRoles(state);
   const list = selectListAsCollection(state);
-  const rolesLink = getRolesLink(state);
+  const rolesLink = getRepositoryRolesLink(state);
 
   return {
     roles,
diff --git a/scm-ui/src/config/roles/containers/SingleRepositoryRole.js b/scm-ui/src/config/roles/containers/SingleRepositoryRole.js
index 3bb951ac1a..4aec3b0b06 100644
--- a/scm-ui/src/config/roles/containers/SingleRepositoryRole.js
+++ b/scm-ui/src/config/roles/containers/SingleRepositoryRole.js
@@ -81,26 +81,22 @@ class SingleRepositoryRole extends React.Component<Props> {
     return (
       <>
         <Title title={t("repositoryRole.title")} />
-        <div className="columns">
-          <div className="column is-three-quarters">
-            <Route
-              path={`${url}/info`}
-              component={() => <PermissionRoleDetail role={role} url={url} />}
-            />
-            <Route
-              path={`${url}/edit`}
-              exact
-              component={() => (
-                <EditRepositoryRole role={role} history={this.props.history} />
-              )}
-            />
-            <ExtensionPoint
-              name="roles.route"
-              props={extensionProps}
-              renderAll={true}
-            />
-          </div>
-        </div>
+        <Route
+          path={`${url}/info`}
+          component={() => <PermissionRoleDetail role={role} url={url} />}
+        />
+        <Route
+          path={`${url}/edit`}
+          exact
+          component={() => (
+            <EditRepositoryRole role={role} history={this.props.history} />
+          )}
+        />
+        <ExtensionPoint
+          name="roles.route"
+          props={extensionProps}
+          renderAll={true}
+        />
       </>
     );
   }
diff --git a/scm-ui/src/modules/indexResource.js b/scm-ui/src/modules/indexResource.js
index 2c6805d207..12126e4841 100644
--- a/scm-ui/src/modules/indexResource.js
+++ b/scm-ui/src/modules/indexResource.js
@@ -159,10 +159,6 @@ export function getSvnConfigLink(state: Object) {
   return getLink(state, "svnConfig");
 }
 
-export function getRolesLink(state: Object) {
-  return getLink(state, "repositoryRoles");
-}
-
 export function getUserAutoCompleteLink(state: Object): string {
   const link = getLinkCollection(state, "autocomplete").find(
     i => i.name === "users"