diff --git a/ui/components/role/index.js b/ui/components/role/index.js
index 8ba78c5..fa297aa 100644
--- a/ui/components/role/index.js
+++ b/ui/components/role/index.js
@@ -64,6 +64,8 @@ export default class Role extends React.Component<RoleProps, RoleState> {
       base: Color(color).hsl().string()
     }
 
+    const name = (this.props.role.name !== '') ? this.props.role.name : <>&nbsp;</>
+
     return <RoleStyled
       active={this.props.active}
       disabled={this.props.disabled}
@@ -73,7 +75,7 @@ export default class Role extends React.Component<RoleProps, RoleState> {
       colors={roleColors}
       title={(this.props.disabled) ? 'This role has unsafe permissions.' : null}
     >
-      {this.props.role.name}
+      {name}
       { (this.props.disabled && this.state.hovering) && <Tooltip>This role has unsafe permissions.</Tooltip> }
     </RoleStyled>
   }
diff --git a/ui/stores/roles.js b/ui/stores/roles.js
index 7e8eb82..095e94e 100644
--- a/ui/stores/roles.js
+++ b/ui/stores/roles.js
@@ -65,7 +65,7 @@ const getUncategorized = (roleMap: OrderedMap<RenderedRole>, allCategories: Set)
     name: 'Uncategorized',
     position: -1,
     roles: rolesLeft,
-    _roles: rolesLeft.map(v => roleMap.get(v)).filter(v => v != null),
+    _roles: rolesLeft.map(v => roleMap.get(v)).filter(v => v != null).sortBy(v => -v.position),
     hidden: true,
     type: 'multi'
   }