diff --git a/scm-ui-components/packages/ui-components/src/forms/Radio.js b/scm-ui-components/packages/ui-components/src/forms/Radio.js
index 2b1c626d7b..6460e67070 100644
--- a/scm-ui-components/packages/ui-components/src/forms/Radio.js
+++ b/scm-ui-components/packages/ui-components/src/forms/Radio.js
@@ -22,8 +22,7 @@ class Radio extends React.Component<Props> {
 
   render() {
     return (
-      <div className="field is-grouped">
-        <div className="control">
+
           <label className="radio" disabled={this.props.disabled}>
             <input
               type="radio"
@@ -36,8 +35,6 @@ class Radio extends React.Component<Props> {
             {this.props.label}
             {this.renderHelp()}
           </label>
-        </div>
-      </div>
     );
   }
 }
diff --git a/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.js b/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.js
index a3ba8616c9..46e68ad72f 100644
--- a/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.js
+++ b/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.js
@@ -2,7 +2,7 @@
 import React from "react";
 import { translate } from "react-i18next";
 import type { Permission } from "@scm-manager/ui-types";
-import { confirmAlert, DeleteButton } from "@scm-manager/ui-components";
+import { confirmAlert } from "@scm-manager/ui-components";
 
 type Props = {
   permission: Permission,
@@ -54,18 +54,18 @@ class DeletePermissionButton extends React.Component<Props> {
   };
 
   render() {
-    const { confirmDialog, loading, t } = this.props;
+    const { confirmDialog } = this.props;
     const action = confirmDialog ? this.confirmDelete : this.deletePermission;
 
     if (!this.isDeletable()) {
       return null;
     }
     return (
-      <DeleteButton
-        label={t("permission.delete-permission-button.label")}
-        action={action}
-        loading={loading}
-      />
+      <a className="level-item" onClick={action}>
+        <span className="icon is-small">
+          <i className="fas fa-trash" />
+        </span>
+      </a>
     );
   }
 }
diff --git a/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.test.js b/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.test.js
index 811c9dc335..03eebe3c50 100644
--- a/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.test.js
+++ b/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.test.js
@@ -29,7 +29,7 @@ describe("DeletePermissionButton", () => {
     expect(navLink.text()).toBe("");
   });
 
-  it("should render the navLink", () => {
+  it("should render the delete icon", () => {
     const permission = {
       _links: {
         delete: {
@@ -38,14 +38,14 @@ describe("DeletePermissionButton", () => {
       }
     };
 
-    const navLink = mount(
+    const deleteIcon = mount(
       <DeletePermissionButton
         permission={permission}
         deletePermission={() => {}}
       />,
       options.get()
     );
-    expect(navLink.text()).not.toBe("");
+    expect(deleteIcon.html()).not.toBe("");
   });
 
   it("should open the confirm dialog on button click", () => {
@@ -64,7 +64,7 @@ describe("DeletePermissionButton", () => {
       />,
       options.get()
     );
-    button.find("button").simulate("click");
+    button.find(".fa-trash").simulate("click");
 
     expect(confirmAlert.mock.calls.length).toBe(1);
   });
@@ -91,7 +91,7 @@ describe("DeletePermissionButton", () => {
       />,
       options.get()
     );
-    button.find("button").simulate("click");
+    button.find(".fa-trash").simulate("click");
 
     expect(calledUrl).toBe("/permission");
   });
diff --git a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
index 643e2150e5..cc662e5f06 100644
--- a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
+++ b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
@@ -50,18 +50,20 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
       <SubmitButton label={t("permission.advanced.dialog.submit")} />
     ) : null;
 
+    const body = <>{verbSelectBoxes}</>;
 
-    const body = (
-      <>
-        <div className="content">{verbSelectBoxes}</div>
-        <form onSubmit={this.onSubmit}>
-          {submitButton}
-          <Button
-            label={t("permission.advanced.dialog.abort")}
-            action={onClose}
-          />
-        </form>
-      </>
+    const footer = (
+      <form onSubmit={this.onSubmit}>
+        <div className="field is-grouped">
+          <p className="control">{submitButton}</p>
+          <p className="control">
+            <Button
+              label={t("permission.advanced.dialog.abort")}
+              action={onClose}
+            />
+          </p>
+        </div>
+      </form>
     );
 
     return (
@@ -69,6 +71,7 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
         title={t("permission.advanced.dialog.title")}
         closeFunction={() => onClose()}
         body={body}
+        footer={footer}
         active={true}
       />
     );
diff --git a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
index 362b4aa48a..1432b95382 100644
--- a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
@@ -5,7 +5,8 @@ import {
   Autocomplete,
   SubmitButton,
   Button,
-  LabelWithHelpIcon
+  LabelWithHelpIcon,
+  Radio
 } from "@scm-manager/ui-components";
 import RoleSelector from "../components/RoleSelector";
 import type {
@@ -54,14 +55,11 @@ class CreatePermissionForm extends React.Component<Props, State> {
   permissionScopeChanged = event => {
     const groupPermission = event.target.value === "GROUP_PERMISSION";
     this.setState({
+      value: undefined,
+      name: "",
       groupPermission: groupPermission,
-      valid: validator.isPermissionValid(
-        this.state.name,
-        groupPermission,
-        this.props.currentPermissions
-      )
+      valid: false
     });
-    this.setState({ ...this.state, groupPermission });
   };
 
   loadUserAutocompletion = (inputValue: string) => {
@@ -98,7 +96,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
         <Autocomplete
           loadSuggestions={this.loadGroupAutocompletion}
           valueSelected={this.groupOrUserSelected}
-          value={this.state.value}
+          value={this.state.value ? this.state.value : ""}
           label={t("permission.group")}
           noOptionsMessage={t("permission.autocomplete.no-group-options")}
           loadingMessage={t("permission.autocomplete.loading")}
@@ -110,7 +108,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
       <Autocomplete
         loadSuggestions={this.loadUserAutocompletion}
         valueSelected={this.groupOrUserSelected}
-        value={this.state.value}
+        value={this.state.value ? this.state.value : ""}
         label={t("permission.user")}
         noOptionsMessage={t("permission.autocomplete.no-user-options")}
         loadingMessage={t("permission.autocomplete.loading")}
@@ -158,36 +156,31 @@ class CreatePermissionForm extends React.Component<Props, State> {
         </h2>
         {advancedDialog}
         <form onSubmit={this.submit}>
-          <div className="control">
-            <label className="radio">
-              <input
-                type="radio"
+          <div className="field is-grouped">
+            <div className="control">
+              <Radio
                 name="permission_scope"
-                checked={!this.state.groupPermission}
                 value="USER_PERMISSION"
+                checked={!this.state.groupPermission}
+                label={t("permission.user-permission")}
                 onChange={this.permissionScopeChanged}
               />
-              {t("permission.user-permission")}
-            </label>
-            <label className="radio">
-              <input
-                type="radio"
+              <Radio
                 name="permission_scope"
                 value="GROUP_PERMISSION"
                 checked={this.state.groupPermission}
+                label={t("permission.group-permission")}
                 onChange={this.permissionScopeChanged}
               />
-              {t("permission.group-permission")}
-            </label>
+            </div>
           </div>
-
           <div className="columns">
-            <div className="column is-two-thirds">
+            <div className="column is-three-fifths">
               {this.renderAutocompletionField()}
             </div>
-            <div className="column is-one-third">
+            <div className="column is-two-fifths">
               <div className="columns">
-                <div className="column is-half">
+                <div className="column is-narrow">
                   <RoleSelector
                     availableRoles={availableRoleNames}
                     label={t("permission.role")}
@@ -196,7 +189,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
                     role={matchingRole}
                   />
                 </div>
-                <div className="column is-half">
+                <div className="column">
                   <LabelWithHelpIcon
                     label={t("permission.permissions")}
                     helpText={t("permission.help.permissionsHelpText")}
@@ -252,13 +245,16 @@ class CreatePermissionForm extends React.Component<Props, State> {
     this.setState({
       name: "",
       verbs: this.props.availablePermissions.availableRoles[0].verbs,
-      groupPermission: false,
-      valid: true
+      valid: true,
+      value: undefined
     });
   };
 
   handleRoleChange = (role: string) => {
     const selectedRole = this.findAvailableRole(role);
+    if (!selectedRole) {
+      return;
+    }
     this.setState({
       verbs: selectedRole.verbs
     });
diff --git a/scm-ui/src/repos/permissions/containers/Permissions.js b/scm-ui/src/repos/permissions/containers/Permissions.js
index 38afea441b..6fd9cbab38 100644
--- a/scm-ui/src/repos/permissions/containers/Permissions.js
+++ b/scm-ui/src/repos/permissions/containers/Permissions.js
@@ -74,6 +74,7 @@ type Props = {
   history: History
 };
 
+
 class Permissions extends React.Component<Props> {
   componentDidMount() {
     const {
@@ -154,12 +155,6 @@ class Permissions extends React.Component<Props> {
                   helpText={t("permission.help.nameHelpText")}
                 />
               </th>
-              <th className="is-hidden-mobile">
-                <LabelWithHelpIcon
-                  label={t("permission.group-permission")}
-                  helpText={t("permission.help.groupPermissionHelpText")}
-                />
-              </th>
               <th>
                 <LabelWithHelpIcon
                   label={t("permission.role")}
diff --git a/scm-ui/src/repos/permissions/containers/SinglePermission.js b/scm-ui/src/repos/permissions/containers/SinglePermission.js
index b16d26e903..e5a9c604a6 100644
--- a/scm-ui/src/repos/permissions/containers/SinglePermission.js
+++ b/scm-ui/src/repos/permissions/containers/SinglePermission.js
@@ -14,15 +14,21 @@ import {
 } from "../modules/permissions";
 import { connect } from "react-redux";
 import type { History } from "history";
-import { Button, Checkbox } from "@scm-manager/ui-components";
+import { Button } from "@scm-manager/ui-components";
 import DeletePermissionButton from "../components/buttons/DeletePermissionButton";
 import RoleSelector from "../components/RoleSelector";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
+import classNames from "classnames";
+import injectSheet from "react-jss";
 
 type Props = {
   availablePermissions: AvailableRepositoryPermissions,
   submitForm: Permission => void,
-  modifyPermission: (permission: Permission, namespace: string, name: string) => void,
+  modifyPermission: (
+    permission: Permission,
+    namespace: string,
+    name: string
+  ) => void,
   permission: Permission,
   t: string => string,
   namespace: string,
@@ -30,8 +36,13 @@ type Props = {
   match: any,
   history: History,
   loading: boolean,
-  deletePermission: (permission: Permission, namespace: string, name: string) => void,
-  deleteLoading: boolean
+  deletePermission: (
+    permission: Permission,
+    namespace: string,
+    name: string
+  ) => void,
+  deleteLoading: boolean,
+  classes: any
 };
 
 type State = {
@@ -40,6 +51,19 @@ type State = {
   showAdvancedDialog: boolean
 };
 
+const styles = {
+  iconColor: {
+    color: "#9a9a9a"
+  },
+  centerMiddle: {
+    display: "table-cell",
+    verticalAlign: "middle !important"
+  },
+  columnWidth: {
+    width: "100%"
+  }
+};
+
 class SinglePermission extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -96,7 +120,8 @@ class SinglePermission extends React.Component<Props, State> {
       availablePermissions,
       loading,
       namespace,
-      repoName
+      repoName,
+      classes
     } = this.props;
     const availableRoleNames = availablePermissions.availableRoles.map(
       r => r.name
@@ -125,23 +150,26 @@ class SinglePermission extends React.Component<Props, State> {
       />
     ) : null;
 
+    const iconType =
+      permission && permission.groupPermission ? (
+        <i title={t("permission.group")} className={classNames("fas fa-user-friends", classes.iconColor)} />
+      ) : (
+        <i title={t("permission.user")} className={classNames("fas fa-user", classes.iconColor)} />
+      );
+
     return (
-      <tr>
-        <td>{permission.name}</td>
-        <td>
-          <Checkbox
-            checked={permission ? permission.groupPermission : false}
-            disabled={true}
-          />
+      <tr className={classes.columnWidth}>
+        <td className={classes.centerMiddle}>
+          {iconType} {permission.name}
         </td>
         {roleSelector}
-        <td>
+        <td className={classes.centerMiddle}>
           <Button
             label={t("permission.advanced-button.label")}
             action={this.handleDetailedPermissionsPressed}
           />
         </td>
-        <td>
+        <td className={classes.centerMiddle}>
           <DeletePermissionButton
             permission={permission}
             namespace={namespace}
@@ -253,4 +281,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(SinglePermission));
+)(translate("repos")(injectSheet(styles)(SinglePermission)));
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index df42781c64..fc5d423fa3 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -240,7 +240,7 @@ $fa-font-path: "webfonts";
 }
 
 // forms
-.field:not(.is-grouped) {
+form .field:not(.is-grouped) {
   margin-bottom: 1rem;
 }
 .input,
@@ -250,6 +250,15 @@ $fa-font-path: "webfonts";
   box-shadow: none;
 }
 
+// label with help-icon compensation
+.label-icon-spacing {
+  margin-top: 30px;
+
+  @media screen and (max-width: 768px) {
+    margin-top: 0;
+  }
+}
+
 // pagination
 .pagination-next,
 .pagination-link,