diff --git a/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx b/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx
index 5e473c25869..5e2497d983e 100644
--- a/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx
+++ b/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx
@@ -13,7 +13,7 @@ export default class DisabledPermissionListItem extends Component<IProps, any> {
     return (
       <tr className="gf-form-disabled">
         <td style={{ width: '1%' }}>
-          <i style={{ width: '25px', fontSize: '1.5rem' }} className="gicon gicon-shield" />
+          <i style={{ width: '25px', height: '25px' }} className="gicon gicon-shield" />
         </td>
         <td style={{ width: '90%' }}>
           {item.name}
diff --git a/public/app/core/components/Permissions/PermissionsListItem.tsx b/public/app/core/components/Permissions/PermissionsListItem.tsx
index 229c774c639..ee1108a6998 100644
--- a/public/app/core/components/Permissions/PermissionsListItem.tsx
+++ b/public/app/core/components/Permissions/PermissionsListItem.tsx
@@ -15,10 +15,10 @@ function ItemAvatar({ item }) {
     return <img className="filter-table__avatar" src={item.teamAvatarUrl} />;
   }
   if (item.role === 'Editor') {
-    return <i style={{ width: '25px', fontSize: '1.5rem' }} className="gicon gicon-editor" />;
+    return <i style={{ width: '25px', height: '25px' }} className="gicon gicon-editor" />;
   }
 
-  return <i style={{ width: '25px', fontSize: '1.5rem' }} className="gicon gicon-viewer" />;
+  return <i style={{ width: '25px', height: '25px' }} className="gicon gicon-viewer" />;
 }
 
 function ItemDescription({ item }) {
diff --git a/public/app/stores/PermissionsStore/PermissionsStore.ts b/public/app/stores/PermissionsStore/PermissionsStore.ts
index 7761ecc13c7..833d1bdaac7 100644
--- a/public/app/stores/PermissionsStore/PermissionsStore.ts
+++ b/public/app/stores/PermissionsStore/PermissionsStore.ts
@@ -155,6 +155,8 @@ export const PermissionsStore = types
         try {
           yield updateItems(self, updatedItems);
           self.items.push(newItem);
+          let sortedItems = self.items.sort((a, b) => b.sortRank - a.sortRank || a.name.localeCompare(b.name));
+          self.items = sortedItems;
           resetNewTypeInternal();
         } catch {}
         yield Promise.resolve();
@@ -214,9 +216,11 @@ const updateItems = (self, items) => {
 };
 
 const prepareServerResponse = (response, dashboardId: number, isFolder: boolean, isInRoot: boolean) => {
-  return response.map(item => {
-    return prepareItem(item, dashboardId, isFolder, isInRoot);
-  });
+  return response
+    .map(item => {
+      return prepareItem(item, dashboardId, isFolder, isInRoot);
+    })
+    .sort((a, b) => b.sortRank - a.sortRank || a.name.localeCompare(b.name));
 };
 
 const prepareItem = (item, dashboardId: number, isFolder: boolean, isInRoot: boolean) => {
@@ -233,7 +237,7 @@ const prepareItem = (item, dashboardId: number, isFolder: boolean, isInRoot: boo
     item.icon = 'fa fa-fw fa-street-view';
     item.name = item.role;
     item.sortRank = 30;
-    if (item.role === 'Viewer') {
+    if (item.role === 'Editor') {
       item.sortRank += 1;
     }
   }