diff --git a/src/common/utils/hash-set.ts b/src/common/utils/hash-set.ts
new file mode 100644
index 0000000000..c19bf14685
--- /dev/null
+++ b/src/common/utils/hash-set.ts
@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { action, IInterceptable, IInterceptor, IListenable, ISetWillChange, observable, ObservableMap, ObservableSet } from "mobx";
+
+export * from "./hashers";
+
+export function makeIterable<T>(iterator: Iterator<T>): IterableIterator<T> {
+  (iterator as IterableIterator<T>)[Symbol.iterator] = () => iterator as IterableIterator<T>;
+
+  return iterator as IterableIterator<T>;
+}
+
+export class ObservableHashSet<T> implements Set<T>, IInterceptable<ISetWillChange>, IListenable {
+  #hashmap: ObservableMap<string, T>;
+
+  get interceptors_(): IInterceptor<ISetWillChange<any>>[] {
+    return [];
+  }
+
+  get changeListeners_(): Function[] {
+    return [];
+  }
+
+  constructor(initialValues: Iterable<T>, protected hasher: (item: T) => string) {
+    this.#hashmap = observable.map<string, T>(Array.from(initialValues, value => [this.hasher(value), value]), undefined);
+  }
+
+  @action
+  replace(other: ObservableHashSet<T> | ObservableSet<T> | Set<T> | readonly T[]): this {
+    if (Array.isArray(other)) {
+      this.clear();
+      other.forEach(value => this.add(value));
+    } else if (other instanceof Set || other instanceof ObservableHashSet || other instanceof ObservableSet) {
+      this.clear();
+      other.forEach(value => this.add(value));
+    } else if (other !== null && other !== undefined) {
+      throw new Error(`ObservableHashSet: Cannot initialize set from ${other}`);
+    }
+
+    return this;
+  }
+
+  clear(): void {
+    this.#hashmap.clear();
+  }
+
+  add(value: T): this {
+    this.#hashmap.set(this.hasher(value), value);
+
+    return this;
+  }
+
+  @action
+  toggle(value: T) {
+    const hash = this.hasher(value);
+
+    if (this.#hashmap.has(hash)) {
+      this.#hashmap.delete(hash);
+    } else {
+      this.#hashmap.set(hash, value);
+    }
+  }
+
+  delete(value: T): boolean {
+    return this.#hashmap.delete(this.hasher(value));
+  }
+
+  forEach(callbackfn: (value: T, key: T, set: Set<T>) => void, thisArg?: any): void {
+    this.#hashmap.forEach(value => callbackfn(value, value, thisArg ?? this));
+  }
+
+  has(value: T): boolean {
+    return this.#hashmap.has(this.hasher(value));
+  }
+
+  get size(): number {
+    return this.#hashmap.size;
+  }
+
+  entries(): IterableIterator<[T, T]> {
+    let nextIndex = 0;
+    const keys = Array.from(this.keys());
+    const values = Array.from(this.values());
+
+    return makeIterable<[T, T]>({
+      next() {
+        const index = nextIndex++;
+
+        return index < values.length
+          ? { value: [keys[index], values[index]], done: false }
+          : { done: true, value: undefined };
+      }
+    });
+  }
+
+  keys(): IterableIterator<T> {
+    return this.values();
+  }
+
+  values(): IterableIterator<T> {
+    let nextIndex = 0;
+    const observableValues = Array.from(this.#hashmap.values());
+
+    return makeIterable<T>({
+      next: () => {
+        return nextIndex < observableValues.length
+          ? { value: observableValues[nextIndex++], done: false }
+          : { done: true, value: undefined };
+      }
+    });
+  }
+
+  [Symbol.iterator](): IterableIterator<T> {
+    return this.#hashmap.values();
+  }
+
+  get [Symbol.toStringTag](): string {
+    return "Set";
+  }
+
+  toJSON(): T[] {
+    return Array.from(this);
+  }
+
+  toString(): string {
+    return "[object ObservableSet]";
+  }
+}
diff --git a/src/renderer/components/+user-management-service-accounts/index.ts b/src/common/utils/hashers.ts
similarity index 68%
rename from src/renderer/components/+user-management-service-accounts/index.ts
rename to src/common/utils/hashers.ts
index 7c6de338fa..b815a73a00 100644
--- a/src/renderer/components/+user-management-service-accounts/index.ts
+++ b/src/common/utils/hashers.ts
@@ -19,6 +19,19 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-export * from "./service-accounts";
-export * from "./service-accounts-details";
-export * from "./create-service-account-dialog";
+import { MD5 } from "crypto-js";
+import type { RoleBindingSubject } from "../../renderer/api/endpoints";
+import type { KubeObject } from "../../renderer/api/kube-object";
+
+export function hashKubeObject(k: KubeObject): string {
+  return k.metadata.uid;
+}
+
+export function hashRoleBindingSubject(subject: RoleBindingSubject): string {
+  return MD5(JSON.stringify([
+    ["kind", subject.kind],
+    ["name", subject.name],
+    ["namespace", subject.namespace],
+    ["apiGroup", subject.apiGroup],
+  ])).toString();
+}
diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts
index b1980d3f79..1c2f4c888f 100644
--- a/src/common/utils/index.ts
+++ b/src/common/utils/index.ts
@@ -27,17 +27,17 @@ export * from "./app-version";
 export * from "./autobind";
 export * from "./base64";
 export * from "./camelCase";
-export * from "./toJS";
 export * from "./cloneJson";
 export * from "./debouncePromise";
 export * from "./defineGlobal";
 export * from "./delay";
 export * from "./disposer";
-export * from "./disposer";
 export * from "./downloadFile";
 export * from "./escapeRegExp";
 export * from "./extended-map";
 export * from "./getRandId";
+export * from "./hash-set";
+export * from "./n-fircate";
 export * from "./openExternal";
 export * from "./reject-promise";
 export * from "./saveToAppFiles";
@@ -45,6 +45,7 @@ export * from "./singleton";
 export * from "./splitArray";
 export * from "./tar";
 export * from "./toggle-set";
+export * from "./toJS";
 export * from "./type-narrowing";
 
 import * as iter from "./iter";
diff --git a/src/common/utils/n-fircate.ts b/src/common/utils/n-fircate.ts
new file mode 100644
index 0000000000..5a6350c710
--- /dev/null
+++ b/src/common/utils/n-fircate.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/**
+ * Split an iterable into several arrays with matching fields
+ * @param from The iterable of items to split up
+ * @param field The field of each item to split over
+ * @param parts What each array will be filtered to
+ * @returns A `parts.length` tuple of `T[]` where each array has matching `field` values
+ */
+export function nFircate<T>(from: Iterable<T>, field: keyof T, parts: [T[typeof field]]): [T[]];
+export function nFircate<T>(from: Iterable<T>, field: keyof T, parts: [T[typeof field], T[typeof field]]): [T[], T[]];
+export function nFircate<T>(from: Iterable<T>, field: keyof T, parts: [T[typeof field], T[typeof field], T[typeof field]]): [T[], T[], T[]];
+
+export function nFircate<T>(from: Iterable<T>, field: keyof T, parts: T[typeof field][]): T[][] {
+  const res = Array.from(parts, () => [] as T[]);
+
+  for (const item of from) {
+    const index = parts.indexOf(item[field]);
+
+    if (index < 0) {
+      continue;
+    }
+
+    res[index].push(item);
+  }
+
+  return res;
+}
diff --git a/src/extensions/renderer-api/k8s-api.ts b/src/extensions/renderer-api/k8s-api.ts
index d16dbe83f5..5e939bc54d 100644
--- a/src/extensions/renderer-api/k8s-api.ts
+++ b/src/extensions/renderer-api/k8s-api.ts
@@ -86,8 +86,8 @@ export type { PersistentVolumesStore } from "../../renderer/components/+storage-
 export type { VolumeClaimStore } from "../../renderer/components/+storage-volume-claims/volume-claim.store";
 export type { StorageClassStore } from "../../renderer/components/+storage-classes/storage-class.store";
 export type { NamespaceStore } from "../../renderer/components/+namespaces/namespace.store";
-export type { ServiceAccountsStore } from "../../renderer/components/+user-management-service-accounts/service-accounts.store";
-export type { RolesStore } from "../../renderer/components/+user-management-roles/roles.store";
-export type { RoleBindingsStore } from "../../renderer/components/+user-management-roles-bindings/role-bindings.store";
+export type { ServiceAccountsStore } from "../../renderer/components/+user-management/+service-accounts/store";
+export type { RolesStore } from "../../renderer/components/+user-management/+roles/store";
+export type { RoleBindingsStore } from "../../renderer/components/+user-management/+roles-bindings/store";
 export type { CRDStore } from "../../renderer/components/+custom-resources/crd.store";
 export type { CRDResourceStore } from "../../renderer/components/+custom-resources/crd-resource.store";
diff --git a/src/renderer/api/endpoints/cluster-role-binding.api.ts b/src/renderer/api/endpoints/cluster-role-binding.api.ts
index 6f165316ef..2301e4124d 100644
--- a/src/renderer/api/endpoints/cluster-role-binding.api.ts
+++ b/src/renderer/api/endpoints/cluster-role-binding.api.ts
@@ -18,14 +18,38 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-
-import { RoleBinding } from "./role-binding.api";
 import { KubeApi } from "../kube-api";
+import { KubeObject } from "../kube-object";
 
-export class ClusterRoleBinding extends RoleBinding {
+export type ClusterRoleBindingSubjectKind = "Group" | "ServiceAccount" | "User";
+
+export interface ClusterRoleBindingSubject {
+  kind: ClusterRoleBindingSubjectKind;
+  name: string;
+  apiGroup?: string;
+}
+
+export interface ClusterRoleBinding {
+  subjects?: ClusterRoleBindingSubject[];
+  roleRef: {
+    kind: string;
+    name: string;
+    apiGroup?: string;
+  };
+}
+
+export class ClusterRoleBinding extends KubeObject {
   static kind = "ClusterRoleBinding";
   static namespaced = false;
   static apiBase = "/apis/rbac.authorization.k8s.io/v1/clusterrolebindings";
+
+  getSubjects() {
+    return this.subjects || [];
+  }
+
+  getSubjectNames(): string {
+    return this.getSubjects().map(subject => subject.name).join(", ");
+  }
 }
 
 export const clusterRoleBindingApi = new KubeApi({
diff --git a/src/renderer/api/endpoints/cluster-role.api.ts b/src/renderer/api/endpoints/cluster-role.api.ts
index 6471b9c5e1..55a2f5283d 100644
--- a/src/renderer/api/endpoints/cluster-role.api.ts
+++ b/src/renderer/api/endpoints/cluster-role.api.ts
@@ -19,13 +19,26 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Role } from "./role.api";
 import { KubeApi } from "../kube-api";
+import { KubeObject } from "../kube-object";
 
-export class ClusterRole extends Role {
+export interface ClusterRole {
+  rules: {
+    verbs: string[];
+    apiGroups: string[];
+    resources: string[];
+    resourceNames?: string[];
+  }[];
+}
+
+export class ClusterRole extends KubeObject {
   static kind = "ClusterRole";
   static namespaced = false;
   static apiBase = "/apis/rbac.authorization.k8s.io/v1/clusterroles";
+
+  getRules() {
+    return this.rules || [];
+  }
 }
 
 export const clusterRoleApi = new KubeApi({
diff --git a/src/renderer/api/endpoints/role-binding.api.ts b/src/renderer/api/endpoints/role-binding.api.ts
index 4e53752df1..270495142e 100644
--- a/src/renderer/api/endpoints/role-binding.api.ts
+++ b/src/renderer/api/endpoints/role-binding.api.ts
@@ -24,15 +24,17 @@ import { KubeObject } from "../kube-object";
 import { KubeApi } from "../kube-api";
 import type { KubeJsonApiData } from "../kube-json-api";
 
-export interface IRoleBindingSubject {
-  kind: string;
+export type RoleBindingSubjectKind = "Group" | "ServiceAccount" | "User";
+
+export interface RoleBindingSubject {
+  kind: RoleBindingSubjectKind;
   name: string;
-  namespace?: string;
+  namespace: string;
   apiGroup?: string;
 }
 
 export interface RoleBinding {
-  subjects?: IRoleBindingSubject[];
+  subjects?: RoleBindingSubject[];
   roleRef: {
     kind: string;
     name: string;
diff --git a/src/renderer/components/+namespaces/namespace-select.tsx b/src/renderer/components/+namespaces/namespace-select.tsx
index c35ae72513..c1fe06c258 100644
--- a/src/renderer/components/+namespaces/namespace-select.tsx
+++ b/src/renderer/components/+namespaces/namespace-select.tsx
@@ -32,14 +32,12 @@ import { kubeWatchApi } from "../../api/kube-watch-api";
 
 interface Props extends SelectProps {
   showIcons?: boolean;
-  showClusterOption?: boolean; // show "Cluster" option on the top (default: false)
   showAllNamespacesOption?: boolean; // show "All namespaces" option on the top (default: false)
   customizeOptions?(options: SelectOption[]): SelectOption[];
 }
 
 const defaultProps: Partial<Props> = {
   showIcons: true,
-  showClusterOption: false,
 };
 
 @observer
@@ -61,13 +59,11 @@ export class NamespaceSelect extends React.Component<Props> {
   }
 
   @computed.struct get options(): SelectOption[] {
-    const { customizeOptions, showClusterOption, showAllNamespacesOption } = this.props;
+    const { customizeOptions, showAllNamespacesOption } = this.props;
     let options: SelectOption[] = namespaceStore.items.map(ns => ({ value: ns.getName() }));
 
     if (showAllNamespacesOption) {
       options.unshift({ label: "All Namespaces", value: "" });
-    } else if (showClusterOption) {
-      options.unshift({ label: "Cluster", value: "" });
     }
 
     if (customizeOptions) {
diff --git a/src/renderer/components/+namespaces/namespace.store.ts b/src/renderer/components/+namespaces/namespace.store.ts
index 29098c8a49..f865787d76 100644
--- a/src/renderer/components/+namespaces/namespace.store.ts
+++ b/src/renderer/components/+namespaces/namespace.store.ts
@@ -20,7 +20,7 @@
  */
 
 import { action, comparer, computed, IReactionDisposer, IReactionOptions, makeObservable, reaction, } from "mobx";
-import { autoBind, createStorage } from "../../utils";
+import { autoBind, createStorage, noop } from "../../utils";
 import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
 import { Namespace, namespacesApi } from "../../api/endpoints/namespaces.api";
 import { apiManager } from "../../api/api-manager";
@@ -97,13 +97,16 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
     return this.selectedNamespaces;
   }
 
-  getSubscribeApis() {
-    // if user has given static list of namespaces let's not start watches because watch adds stuff that's not wanted
+  subscribe() {
+    /**
+     * if user has given static list of namespaces let's not start watches
+     * because watch adds stuff that's not wanted or will just fail
+     */
     if (this.context?.cluster.accessibleNamespaces.length > 0) {
-      return [];
+      return noop;
     }
 
-    return super.getSubscribeApis();
+    return super.subscribe();
   }
 
   protected async loadItems(params: KubeObjectStoreLoadingParams) {
diff --git a/src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx b/src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx
deleted file mode 100644
index 273a3c0d51..0000000000
--- a/src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import "./add-role-binding-dialog.scss";
-
-import React from "react";
-import { computed, observable, makeObservable } from "mobx";
-import { observer } from "mobx-react";
-import { Dialog, DialogProps } from "../dialog";
-import { Wizard, WizardStep } from "../wizard";
-import { Select, SelectOption } from "../select";
-import { SubTitle } from "../layout/sub-title";
-import type { IRoleBindingSubject, Role, RoleBinding, ServiceAccount } from "../../api/endpoints";
-import { Icon } from "../icon";
-import { Input } from "../input";
-import { NamespaceSelect } from "../+namespaces/namespace-select";
-import { Checkbox } from "../checkbox";
-import { KubeObject } from "../../api/kube-object";
-import { Notifications } from "../notifications";
-import { rolesStore } from "../+user-management-roles/roles.store";
-import { namespaceStore } from "../+namespaces/namespace.store";
-import { serviceAccountsStore } from "../+user-management-service-accounts/service-accounts.store";
-import { roleBindingsStore } from "./role-bindings.store";
-import { showDetails } from "../kube-object";
-import type { KubeObjectStore } from "../../kube-object.store";
-
-interface BindingSelectOption extends SelectOption {
-  value: string; // binding name
-  item?: ServiceAccount | any;
-  subject?: IRoleBindingSubject; // used for new user/group when users-management-api not available
-}
-
-interface Props extends Partial<DialogProps> {
-}
-
-const dialogState = observable.object({
-  isOpen: false,
-  data: null as RoleBinding,
-});
-
-@observer
-export class AddRoleBindingDialog extends React.Component<Props> {
-  constructor(props: Props) {
-    super(props);
-    makeObservable(this);
-  }
-
-  static open(roleBinding?: RoleBinding) {
-    dialogState.isOpen = true;
-    dialogState.data = roleBinding;
-  }
-
-  static close() {
-    dialogState.isOpen = false;
-  }
-
-  get roleBinding(): RoleBinding {
-    return dialogState.data;
-  }
-
-  @observable isLoading = false;
-  @observable selectedRoleId = "";
-  @observable useRoleForBindingName = true;
-  @observable bindingName = ""; // new role-binding name
-  @observable bindContext = ""; // empty value means "cluster-wide", otherwise bind to namespace
-  @observable selectedAccounts = observable.array<ServiceAccount>([], { deep: false });
-
-  @computed get isEditing() {
-    return !!this.roleBinding;
-  }
-
-  @computed get selectedRole() {
-    return rolesStore.items.find(role => role.getId() === this.selectedRoleId);
-  }
-
-  @computed get selectedBindings() {
-    return [
-      ...this.selectedAccounts,
-    ];
-  }
-
-  close = () => {
-    AddRoleBindingDialog.close();
-  };
-
-  async loadData() {
-    const stores: KubeObjectStore[] = [
-      namespaceStore,
-      rolesStore,
-      serviceAccountsStore,
-    ];
-
-    this.isLoading = true;
-    await Promise.all(stores.map(store => store.reloadAll()));
-    this.isLoading = false;
-  }
-
-  onOpen = async () => {
-    await this.loadData();
-
-    if (this.roleBinding) {
-      const { name, kind } = this.roleBinding.roleRef;
-      const role = rolesStore.items.find(role => role.kind === kind && role.getName() === name);
-
-      if (role) {
-        this.selectedRoleId = role.getId();
-        this.bindContext = role.getNs() || "";
-      }
-    }
-  };
-
-  reset = () => {
-    this.selectedRoleId = "";
-    this.bindContext = "";
-    this.selectedAccounts.clear();
-  };
-
-  onBindContextChange = (namespace: string) => {
-    this.bindContext = namespace;
-    const roleContext = this.selectedRole && this.selectedRole.getNs() || "";
-
-    if (this.bindContext && this.bindContext !== roleContext) {
-      this.selectedRoleId = ""; // reset previously selected role for specific context
-    }
-  };
-
-  createBindings = async () => {
-    const { selectedRole, bindContext: namespace, selectedBindings, bindingName, useRoleForBindingName } = this;
-
-    const subjects = selectedBindings.map((item: KubeObject | IRoleBindingSubject) => {
-      if (item instanceof KubeObject) {
-        return {
-          name: item.getName(),
-          kind: item.kind,
-          namespace: item.getNs(),
-        };
-      }
-
-      return item;
-    });
-
-    try {
-      let roleBinding: RoleBinding;
-
-      if (this.isEditing) {
-        roleBinding = await roleBindingsStore.updateSubjects({
-          roleBinding: this.roleBinding,
-          addSubjects: subjects,
-        });
-      } else {
-        const name = useRoleForBindingName ? selectedRole.getName() : bindingName;
-
-        roleBinding = await roleBindingsStore.create({ name, namespace }, {
-          subjects,
-          roleRef: {
-            name: selectedRole.getName(),
-            kind: selectedRole.kind,
-          }
-        });
-      }
-      showDetails(roleBinding.selfLink);
-      this.close();
-    } catch (err) {
-      Notifications.error(err);
-    }
-  };
-
-  @computed get roleOptions(): BindingSelectOption[] {
-    let roles = rolesStore.items as Role[];
-
-    if (this.bindContext) {
-      // show only cluster-roles or roles for selected context namespace
-      roles = roles.filter(role => !role.getNs() || role.getNs() === this.bindContext);
-    }
-
-    return roles.map(role => {
-      const name = role.getName();
-      const namespace = role.getNs();
-
-      return {
-        value: role.getId(),
-        label: name + (namespace ? ` (${namespace})` : "")
-      };
-    });
-  }
-
-  @computed get serviceAccountOptions(): BindingSelectOption[] {
-    return serviceAccountsStore.items.map(account => {
-      const name = account.getName();
-      const namespace = account.getNs();
-
-      return {
-        item: account,
-        value: name,
-        label: <><Icon small material="account_box"/> {name} ({namespace})</>
-      };
-    });
-  }
-
-  renderContents() {
-    const unwrapBindings = (options: BindingSelectOption[]) => options.map(option => option.item || option.subject);
-
-    return (
-      <>
-        <SubTitle title="Context"/>
-        <NamespaceSelect
-          showClusterOption
-          themeName="light"
-          isDisabled={this.isEditing}
-          value={this.bindContext}
-          onChange={({ value }) => this.onBindContextChange(value)}
-        />
-
-        <SubTitle title="Role"/>
-        <Select
-          key={this.selectedRoleId}
-          themeName="light"
-          placeholder="Select role.."
-          isDisabled={this.isEditing}
-          options={this.roleOptions}
-          value={this.selectedRoleId}
-          onChange={({ value }) => this.selectedRoleId = value}
-        />
-        {
-          !this.isEditing && (
-            <>
-              <Checkbox
-                theme="light"
-                label="Use same name for RoleBinding"
-                value={this.useRoleForBindingName}
-                onChange={v => this.useRoleForBindingName = v}
-              />
-              {
-                !this.useRoleForBindingName && (
-                  <Input
-                    autoFocus
-                    placeholder="Name"
-                    disabled={this.isEditing}
-                    value={this.bindingName}
-                    onChange={v => this.bindingName = v}
-                  />
-                )
-              }
-            </>
-          )
-        }
-
-        <SubTitle title="Binding targets"/>
-        <Select
-          isMulti
-          themeName="light"
-          placeholder="Select service accounts"
-          autoConvertOptions={false}
-          options={this.serviceAccountOptions}
-          onChange={(opts: BindingSelectOption[]) => {
-            if (!opts) opts = [];
-            this.selectedAccounts.replace(unwrapBindings(opts));
-          }}
-          maxMenuHeight={200}
-        />
-      </>
-    );
-  }
-
-  render() {
-    const { ...dialogProps } = this.props;
-    const { isEditing, roleBinding, selectedRole, selectedBindings } = this;
-    const roleBindingName = roleBinding ? roleBinding.getName() : "";
-    const header = (
-      <h5>
-        {roleBindingName
-          ? <>Edit RoleBinding <span className="name">{roleBindingName}</span></>
-          : "Add RoleBinding"
-        }
-      </h5>
-    );
-    const disableNext = this.isLoading || !selectedRole || !selectedBindings.length;
-    const nextLabel = isEditing ? "Update" : "Create";
-
-    return (
-      <Dialog
-        {...dialogProps}
-        className="AddRoleBindingDialog"
-        isOpen={dialogState.isOpen}
-        onOpen={this.onOpen}
-        close={this.close}
-      >
-        <Wizard header={header} done={this.close}>
-          <WizardStep
-            nextLabel={nextLabel} next={this.createBindings}
-            disabledNext={disableNext}
-            loading={this.isLoading}
-          >
-            {this.renderContents()}
-          </WizardStep>
-        </Wizard>
-      </Dialog>
-    );
-  }
-}
diff --git a/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx b/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx
deleted file mode 100644
index db86d37cd6..0000000000
--- a/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import "./role-bindings.scss";
-
-import React from "react";
-import { observer } from "mobx-react";
-import type { RouteComponentProps } from "react-router";
-import type { IRoleBindingsRouteParams } from "../+user-management/user-management.route";
-import type { RoleBinding } from "../../api/endpoints";
-import { roleBindingsStore } from "./role-bindings.store";
-import { KubeObjectListLayout } from "../kube-object";
-import { AddRoleBindingDialog } from "./add-role-binding-dialog";
-import { KubeObjectStatusIcon } from "../kube-object-status-icon";
-
-enum columnId {
-  name = "name",
-  namespace = "namespace",
-  bindings = "bindings",
-  age = "age",
-}
-
-interface Props extends RouteComponentProps<IRoleBindingsRouteParams> {
-}
-
-@observer
-export class RoleBindings extends React.Component<Props> {
-  render() {
-    return (
-      <KubeObjectListLayout
-        isConfigurable
-        tableId="access_role_bindings"
-        className="RoleBindings"
-        store={roleBindingsStore}
-        sortingCallbacks={{
-          [columnId.name]: (binding: RoleBinding) => binding.getName(),
-          [columnId.namespace]: (binding: RoleBinding) => binding.getNs(),
-          [columnId.bindings]: (binding: RoleBinding) => binding.getSubjectNames(),
-          [columnId.age]: (binding: RoleBinding) => binding.getTimeDiffFromNow(),
-        }}
-        searchFilters={[
-          (binding: RoleBinding) => binding.getSearchFields(),
-          (binding: RoleBinding) => binding.getSubjectNames(),
-        ]}
-        renderHeaderTitle="Role Bindings"
-        renderTableHeader={[
-          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
-          { className: "warning", showWithColumn: columnId.name },
-          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
-          { title: "Bindings", className: "bindings", sortBy: columnId.bindings, id: columnId.bindings },
-          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-        ]}
-        renderTableContents={(binding: RoleBinding) => [
-          binding.getName(),
-          <KubeObjectStatusIcon key="icon" object={binding} />,
-          binding.getNs() || "-",
-          binding.getSubjectNames(),
-          binding.getAge(),
-        ]}
-        addRemoveButtons={{
-          onAdd: () => AddRoleBindingDialog.open(),
-          addTooltip: "Create new RoleBinding",
-        }}
-      />
-    );
-  }
-}
diff --git a/src/renderer/components/+user-management-roles/roles.store.ts b/src/renderer/components/+user-management-roles/roles.store.ts
deleted file mode 100644
index a70d3e8abe..0000000000
--- a/src/renderer/components/+user-management-roles/roles.store.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import { clusterRoleApi, Role, roleApi } from "../../api/endpoints";
-import { autoBind } from "../../utils";
-import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
-import { apiManager } from "../../api/api-manager";
-
-export class RolesStore extends KubeObjectStore<Role> {
-  api = clusterRoleApi;
-
-  constructor() {
-    super();
-    autoBind(this);
-  }
-
-  getSubscribeApis() {
-    return [roleApi, clusterRoleApi];
-  }
-
-  protected sortItems(items: Role[]) {
-    return super.sortItems(items, [
-      role => role.kind,
-      role => role.getName(),
-    ]);
-  }
-
-  protected loadItem(params: { name: string; namespace?: string }) {
-    if (params.namespace) return roleApi.get(params);
-
-    return clusterRoleApi.get(params);
-  }
-
-  protected async loadItems(params: KubeObjectStoreLoadingParams): Promise<Role[]> {
-    const items = await Promise.all([
-      super.loadItems({ ...params, api: clusterRoleApi }),
-      super.loadItems({ ...params, api: roleApi }),
-    ]);
-
-    return items.flat();
-  }
-
-  protected async createItem(params: { name: string; namespace?: string }, data?: Partial<Role>) {
-    if (params.namespace) {
-      return roleApi.create(params, data);
-    } else {
-      return clusterRoleApi.create(params, data);
-    }
-  }
-}
-
-export const rolesStore = new RolesStore();
-
-apiManager.registerStore(rolesStore, [
-  roleApi,
-  clusterRoleApi,
-]);
diff --git a/src/renderer/components/+user-management-roles-bindings/role-binding-details.scss b/src/renderer/components/+user-management/+cluster-roles-bindings/details.scss
similarity index 100%
rename from src/renderer/components/+user-management-roles-bindings/role-binding-details.scss
rename to src/renderer/components/+user-management/+cluster-roles-bindings/details.scss
diff --git a/src/renderer/components/+user-management/+cluster-roles-bindings/details.tsx b/src/renderer/components/+user-management/+cluster-roles-bindings/details.tsx
new file mode 100644
index 0000000000..51c43eb6ab
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles-bindings/details.tsx
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./details.scss";
+
+import { observable, reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import React from "react";
+
+import { KubeEventDetails } from "../../+events/kube-event-details";
+import type { ClusterRoleBinding, ClusterRoleBindingSubject } from "../../../api/endpoints";
+import { kubeObjectDetailRegistry } from "../../../api/kube-object-detail-registry";
+import { autoBind, prevDefault } from "../../../utils";
+import { AddRemoveButtons } from "../../add-remove-buttons";
+import { ConfirmDialog } from "../../confirm-dialog";
+import { DrawerTitle } from "../../drawer";
+import type { KubeObjectDetailsProps } from "../../kube-object";
+import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
+import { Table, TableCell, TableHead, TableRow } from "../../table";
+import { ClusterRoleBindingDialog } from "./dialog";
+import { clusterRoleBindingsStore } from "./store";
+
+interface Props extends KubeObjectDetailsProps<ClusterRoleBinding> {
+}
+
+@observer
+export class ClusterRoleBindingDetails extends React.Component<Props> {
+  @observable selectedSubjects = observable.array<ClusterRoleBindingSubject>([], { deep: false });
+
+  constructor(props: Props) {
+    super(props);
+    autoBind(this);
+  }
+
+  async componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => this.props.object, () => {
+        this.selectedSubjects.clear();
+      })
+    ]);
+  }
+
+  selectSubject(subject: ClusterRoleBindingSubject) {
+    const { selectedSubjects } = this;
+    const isSelected = selectedSubjects.includes(subject);
+
+    selectedSubjects.replace(
+      isSelected
+        ? selectedSubjects.filter(sub => sub !== subject) // unselect
+        : selectedSubjects.concat(subject) // select
+    );
+  }
+
+  removeSelectedSubjects() {
+    const { object: clusterRoleBinding } = this.props;
+    const { selectedSubjects } = this;
+
+    ConfirmDialog.open({
+      ok: () => clusterRoleBindingsStore.updateSubjects({ clusterRoleBinding, removeSubjects: selectedSubjects }),
+      labelOk: `Remove`,
+      message: (
+        <p>Remove selected bindings for <b>{clusterRoleBinding.getName()}</b>?</p>
+      )
+    });
+  }
+
+  render() {
+    const { selectedSubjects } = this;
+    const { object: clusterRoleBinding } = this.props;
+
+    if (!clusterRoleBinding) {
+      return null;
+    }
+    const { roleRef } = clusterRoleBinding;
+    const subjects = clusterRoleBinding.getSubjects();
+
+    return (
+      <div className="RoleBindingDetails">
+        <KubeObjectMeta object={clusterRoleBinding} />
+
+        <DrawerTitle title="Reference" />
+        <Table>
+          <TableHead>
+            <TableCell>Kind</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>API Group</TableCell>
+          </TableHead>
+          <TableRow>
+            <TableCell>{roleRef.kind}</TableCell>
+            <TableCell>{roleRef.name}</TableCell>
+            <TableCell>{roleRef.apiGroup}</TableCell>
+          </TableRow>
+        </Table>
+
+        <DrawerTitle title="Bindings" />
+        {subjects.length > 0 && (
+          <Table selectable className="bindings box grow">
+            <TableHead>
+              <TableCell checkbox />
+              <TableCell className="binding">Binding</TableCell>
+              <TableCell className="type">Type</TableCell>
+            </TableHead>
+            {
+              subjects.map((subject, i) => {
+                const { kind, name } = subject;
+                const isSelected = selectedSubjects.includes(subject);
+
+                return (
+                  <TableRow
+                    key={i}
+                    selected={isSelected}
+                    onClick={prevDefault(() => this.selectSubject(subject))}
+                  >
+                    <TableCell checkbox isChecked={isSelected} />
+                    <TableCell className="binding">{name}</TableCell>
+                    <TableCell className="type">{kind}</TableCell>
+                  </TableRow>
+                );
+              })
+            }
+          </Table>
+        )}
+
+        <AddRemoveButtons
+          onAdd={() => ClusterRoleBindingDialog.open(clusterRoleBinding)}
+          onRemove={selectedSubjects.length ? this.removeSelectedSubjects : null}
+          addTooltip={`Add bindings to ${roleRef.name}`}
+          removeTooltip={`Remove selected bindings from ${roleRef.name}`}
+        />
+      </div>
+    );
+  }
+}
+
+kubeObjectDetailRegistry.add({
+  kind: "ClusterRoleBinding",
+  apiVersions: ["rbac.authorization.k8s.io/v1"],
+  components: {
+    Details: (props) => <ClusterRoleBindingDetails {...props} />
+  }
+});
+kubeObjectDetailRegistry.add({
+  kind: "ClusterRoleBinding",
+  apiVersions: ["rbac.authorization.k8s.io/v1"],
+  priority: 5,
+  components: {
+    Details: (props) => <KubeEventDetails {...props} />
+  }
+});
diff --git a/src/renderer/components/+user-management/+cluster-roles-bindings/dialog.scss b/src/renderer/components/+user-management/+cluster-roles-bindings/dialog.scss
new file mode 100644
index 0000000000..08f93a582c
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles-bindings/dialog.scss
@@ -0,0 +1,11 @@
+.AddClusterRoleBindingDialog {
+  .Select + .Select {
+    margin-top: $margin /2;
+  }
+  .Checkbox {
+    margin-top: $margin;
+  }
+  .name {
+    color: #a0a0a0;
+  }
+}
diff --git a/src/renderer/components/+user-management/+cluster-roles-bindings/dialog.tsx b/src/renderer/components/+user-management/+cluster-roles-bindings/dialog.tsx
new file mode 100644
index 0000000000..46320610ac
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles-bindings/dialog.tsx
@@ -0,0 +1,278 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./dialog.scss";
+
+import { computed, makeObservable, observable, reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import React from "react";
+
+import { serviceAccountsStore } from "../+service-accounts/store";
+import { ClusterRole, ClusterRoleBinding, ClusterRoleBindingSubject, ServiceAccount } from "../../../api/endpoints";
+import { Dialog, DialogProps } from "../../dialog";
+import { EditableList } from "../../editable-list";
+import { Icon } from "../../icon";
+import { showDetails } from "../../kube-object";
+import { SubTitle } from "../../layout/sub-title";
+import { Notifications } from "../../notifications";
+import { Select, SelectOption } from "../../select";
+import { Wizard, WizardStep } from "../../wizard";
+import { clusterRoleBindingsStore } from "./store";
+import { clusterRolesStore } from "../+cluster-roles/store";
+import { getRoleRefSelectOption } from "../role-ref-select-option";
+import { ObservableHashSet, hashKubeObject, nFircate } from "../../../utils";
+
+interface BindingSelectOption extends SelectOption {
+  value: string; // binding name
+  item?: ServiceAccount | any;
+  subject?: ClusterRoleBindingSubject; // used for new user/group when users-management-api not available
+}
+
+interface Props extends Partial<DialogProps> {
+}
+
+interface DialogState {
+  isOpen: boolean;
+  data?: ClusterRoleBinding;
+}
+
+@observer
+export class ClusterRoleBindingDialog extends React.Component<Props> {
+  static state = observable.object<DialogState>({
+    isOpen: false,
+  });
+
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => this.isEditing, () => {
+        this.bindingName = ClusterRoleBindingDialog.state.data?.getName();
+      }),
+    ]);
+  }
+
+  static open(roleBinding?: ClusterRoleBinding) {
+    ClusterRoleBindingDialog.state.isOpen = true;
+    ClusterRoleBindingDialog.state.data = roleBinding;
+  }
+
+  static close() {
+    ClusterRoleBindingDialog.state.isOpen = false;
+  }
+
+  get clusterRoleBinding(): ClusterRoleBinding {
+    return ClusterRoleBindingDialog.state.data;
+  }
+
+  @computed get isEditing() {
+    return !!this.clusterRoleBinding;
+  }
+
+  @observable selectedRoleRef: ClusterRole | undefined = undefined;
+  @observable bindingName = "";
+  selectedAccounts = new ObservableHashSet<ServiceAccount>([], hashKubeObject);
+  selectedUsers = observable.set<string>([]);
+  selectedGroups = observable.set<string>([]);
+
+  @computed get selectedBindings(): ClusterRoleBindingSubject[] {
+    const serviceAccounts = Array.from(this.selectedAccounts, sa => ({
+      name: sa.getName(),
+      kind: "ServiceAccount" as const,
+    }));
+    const users = Array.from(this.selectedUsers, user => ({
+      name: user,
+      kind: "User" as const,
+    }));
+    const groups = Array.from(this.selectedGroups, group => ({
+      name: group,
+      kind: "Group" as const,
+    }));
+
+    return [
+      ...serviceAccounts,
+      ...users,
+      ...groups,
+    ];
+  }
+
+  @computed get clusterRoleRefoptions(): SelectOption<ClusterRole>[] {
+    return clusterRolesStore.items.map(getRoleRefSelectOption);
+  }
+
+  @computed get serviceAccountOptions(): BindingSelectOption[] {
+    return serviceAccountsStore.items.map(account => {
+      const name = account.getName();
+      const namespace = account.getNs();
+
+      return {
+        item: account,
+        value: name,
+        label: <><Icon small material="account_box" /> {name} ({namespace})</>
+      };
+    });
+  }
+
+  onOpen = () => {
+    const binding = this.clusterRoleBinding;
+
+    if (!binding) {
+      return this.reset();
+    }
+
+    this.selectedRoleRef = clusterRolesStore
+      .items
+      .find(item => item.getName() === binding.roleRef.name);
+    this.bindingName = this.selectedRoleRef.getName();
+
+    const [saSubjects, uSubjects, gSubjects] = nFircate(binding.getSubjects(), "kind", ["ServiceAccount", "User", "Group"]);
+    const accountNames = new Set(saSubjects.map(acc => acc.name));
+
+    this.selectedAccounts.replace(
+      serviceAccountsStore.items
+        .filter(sa => accountNames.has(sa.getName()))
+    );
+    this.selectedUsers.replace(uSubjects.map(user => user.name));
+    this.selectedGroups.replace(gSubjects.map(group => group.name));
+  };
+
+  reset = () => {
+    this.selectedRoleRef = undefined;
+    this.bindingName = "";
+    this.selectedAccounts.clear();
+    this.selectedUsers.clear();
+    this.selectedGroups.clear();
+  };
+
+  createBindings = async () => {
+    const { selectedRoleRef, selectedBindings, bindingName } = this;
+
+    try {
+      const { selfLink } = this.isEditing
+        ? await clusterRoleBindingsStore.updateSubjects({
+          clusterRoleBinding: this.clusterRoleBinding,
+          addSubjects: selectedBindings,
+        })
+        : await clusterRoleBindingsStore.create({ name: bindingName }, {
+          subjects: selectedBindings,
+          roleRef: {
+            name: selectedRoleRef.getName(),
+            kind: selectedRoleRef.kind,
+          }
+        });
+
+      showDetails(selfLink);
+      ClusterRoleBindingDialog.close();
+    } catch (err) {
+      Notifications.error(err);
+    }
+  };
+
+  renderContents() {
+    return (
+      <>
+        <SubTitle title="Cluster Role" />
+        <Select
+          themeName="light"
+          placeholder="Select cluster role ..."
+          isDisabled={this.isEditing}
+          options={this.clusterRoleRefoptions}
+          value={this.selectedRoleRef}
+          onChange={({ value }) => this.selectedRoleRef = value}
+        />
+
+        <SubTitle title="Binding targets" />
+
+        <b>Users</b>
+        <EditableList
+          placeholder="Bind to User Account ..."
+          add={(newUser) => this.selectedUsers.add(newUser)}
+          items={Array.from(this.selectedUsers)}
+          remove={({ oldItem }) => this.selectedUsers.delete(oldItem)}
+        />
+
+        <b>Groups</b>
+        <EditableList
+          placeholder="Bind to User Group ..."
+          add={(newGroup) => this.selectedGroups.add(newGroup)}
+          items={Array.from(this.selectedGroups)}
+          remove={({ oldItem }) => this.selectedGroups.delete(oldItem)}
+        />
+
+        <b>Service Accounts</b>
+        <Select
+          isMulti
+          themeName="light"
+          placeholder="Select service accounts"
+          autoConvertOptions={false}
+          options={this.serviceAccountOptions}
+          onChange={([{ value }]: SelectOption<ServiceAccount>[]) => {
+            this.selectedAccounts.toggle(value);
+          }}
+          maxMenuHeight={200}
+        />
+      </>
+    );
+  }
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const { isEditing, clusterRoleBinding: roleBinding, selectedRoleRef, selectedBindings } = this;
+    const roleBindingName = roleBinding ? roleBinding.getName() : "";
+    const header = (
+      <h5>
+        {roleBindingName
+          ? <>Edit ClusterRoleBinding <span className="name">{roleBindingName}</span></>
+          : "Add ClusterRoleBinding"
+        }
+      </h5>
+    );
+    const disableNext = !selectedRoleRef || !selectedBindings.length;
+    const nextLabel = isEditing ? "Update" : "Create";
+
+    return (
+      <Dialog
+        {...dialogProps}
+        className="AddClusterRoleBindingDialog"
+        isOpen={ClusterRoleBindingDialog.state.isOpen}
+        close={ClusterRoleBindingDialog.close}
+        onClose={this.reset}
+        onOpen={this.onOpen}
+      >
+        <Wizard
+          header={header}
+          done={ClusterRoleBindingDialog.close}
+        >
+          <WizardStep
+            nextLabel={nextLabel}
+            next={this.createBindings}
+            disabledNext={disableNext}
+          >
+            {this.renderContents()}
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    );
+  }
+}
diff --git a/src/renderer/components/+user-management-roles/index.ts b/src/renderer/components/+user-management/+cluster-roles-bindings/index.ts
similarity index 92%
rename from src/renderer/components/+user-management-roles/index.ts
rename to src/renderer/components/+user-management/+cluster-roles-bindings/index.ts
index 83d42da3b9..b43d4302da 100644
--- a/src/renderer/components/+user-management-roles/index.ts
+++ b/src/renderer/components/+user-management/+cluster-roles-bindings/index.ts
@@ -18,7 +18,6 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-
-export * from "./roles";
-export * from "./role-details";
-export * from "./add-role-dialog";
+export * from "./view";
+export * from "./details";
+export * from "./dialog";
diff --git a/src/renderer/components/+user-management/+cluster-roles-bindings/store.ts b/src/renderer/components/+user-management/+cluster-roles-bindings/store.ts
new file mode 100644
index 0000000000..f70ac9e611
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles-bindings/store.ts
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import difference from "lodash/difference";
+import uniqBy from "lodash/uniqBy";
+
+import { apiManager } from "../../../api/api-manager";
+import { ClusterRoleBinding, clusterRoleBindingApi, ClusterRoleBindingSubject } from "../../../api/endpoints";
+import { KubeObjectStore } from "../../../kube-object.store";
+import { autoBind } from "../../../utils";
+
+export class ClusterRoleBindingsStore extends KubeObjectStore<ClusterRoleBinding> {
+  api = clusterRoleBindingApi;
+
+  constructor() {
+    super();
+    autoBind(this);
+  }
+
+  protected sortItems(items: ClusterRoleBinding[]) {
+    return super.sortItems(items, [
+      clusterRoleBinding => clusterRoleBinding.kind,
+      clusterRoleBinding => clusterRoleBinding.getName()
+    ]);
+  }
+
+  async updateSubjects(params: {
+    clusterRoleBinding: ClusterRoleBinding;
+    addSubjects?: ClusterRoleBindingSubject[];
+    removeSubjects?: ClusterRoleBindingSubject[];
+  }) {
+    const { clusterRoleBinding, addSubjects, removeSubjects } = params;
+    const currentSubjects = clusterRoleBinding.getSubjects();
+    let newSubjects = currentSubjects;
+
+    if (addSubjects) {
+      newSubjects = uniqBy(currentSubjects.concat(addSubjects), ({ kind, name }) => {
+        return [kind, name].join("-");
+      });
+    } else if (removeSubjects) {
+      newSubjects = difference(currentSubjects, removeSubjects);
+    }
+
+    return this.update(clusterRoleBinding, {
+      roleRef: clusterRoleBinding.roleRef,
+      subjects: newSubjects
+    });
+  }
+}
+
+export const clusterRoleBindingsStore = new ClusterRoleBindingsStore();
+
+apiManager.registerStore(clusterRoleBindingsStore);
diff --git a/src/renderer/components/+user-management/+cluster-roles-bindings/view.scss b/src/renderer/components/+user-management/+cluster-roles-bindings/view.scss
new file mode 100644
index 0000000000..17d4a31cb5
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles-bindings/view.scss
@@ -0,0 +1,11 @@
+.ClusterRoleBindings {
+  .help-icon {
+    margin-left: $margin / 2;
+  }
+
+  .TableCell {
+    &.warning {
+      @include table-cell-warning;
+    }
+  }
+}
diff --git a/src/renderer/components/+user-management/+cluster-roles-bindings/view.tsx b/src/renderer/components/+user-management/+cluster-roles-bindings/view.tsx
new file mode 100644
index 0000000000..e9b3565fda
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles-bindings/view.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./view.scss";
+
+import { observer } from "mobx-react";
+import React from "react";
+import type { RouteComponentProps } from "react-router";
+import type { ClusterRoleBinding } from "../../../api/endpoints";
+import { KubeObjectListLayout } from "../../kube-object";
+import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
+import type { ClusterRoleBindingsRouteParams } from "../user-management.route";
+import { ClusterRoleBindingDialog } from "./dialog";
+import { clusterRoleBindingsStore } from "./store";
+import { clusterRolesStore } from "../+cluster-roles/store";
+import { serviceAccountsStore } from "../+service-accounts/store";
+
+enum columnId {
+  name = "name",
+  namespace = "namespace",
+  bindings = "bindings",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<ClusterRoleBindingsRouteParams> {
+}
+
+@observer
+export class ClusterRoleBindings extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <KubeObjectListLayout
+          isConfigurable
+          tableId="access_cluster_role_bindings"
+          className="ClusterRoleBindings"
+          store={clusterRoleBindingsStore}
+          dependentStores={[clusterRolesStore, serviceAccountsStore]}
+          isClusterScoped
+          sortingCallbacks={{
+            [columnId.name]: (binding: ClusterRoleBinding) => binding.getName(),
+            [columnId.bindings]: (binding: ClusterRoleBinding) => binding.getSubjectNames(),
+            [columnId.age]: (binding: ClusterRoleBinding) => binding.getTimeDiffFromNow(),
+          }}
+          searchFilters={[
+            (binding: ClusterRoleBinding) => binding.getSearchFields(),
+            (binding: ClusterRoleBinding) => binding.getSubjectNames(),
+          ]}
+          renderHeaderTitle="Cluster Role Bindings"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Bindings", className: "bindings", sortBy: columnId.bindings, id: columnId.bindings },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          ]}
+          renderTableContents={(binding: ClusterRoleBinding) => [
+            binding.getName(),
+            <KubeObjectStatusIcon key="icon" object={binding} />,
+            binding.getSubjectNames(),
+            binding.getAge(),
+          ]}
+          addRemoveButtons={{
+            onAdd: () => ClusterRoleBindingDialog.open(),
+            addTooltip: "Create new ClusterRoleBinding",
+          }}
+        />
+        <ClusterRoleBindingDialog />
+      </>
+    );
+  }
+}
diff --git a/src/renderer/components/+user-management-roles/add-role-dialog.scss b/src/renderer/components/+user-management/+cluster-roles/add-dialog.scss
similarity index 100%
rename from src/renderer/components/+user-management-roles/add-role-dialog.scss
rename to src/renderer/components/+user-management/+cluster-roles/add-dialog.scss
diff --git a/src/renderer/components/+user-management/+cluster-roles/add-dialog.tsx b/src/renderer/components/+user-management/+cluster-roles/add-dialog.tsx
new file mode 100644
index 0000000000..03adc6eab7
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles/add-dialog.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import "./add-dialog.scss";
+
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import React from "react";
+
+import { Dialog, DialogProps } from "../../dialog";
+import { Input } from "../../input";
+import { showDetails } from "../../kube-object";
+import { SubTitle } from "../../layout/sub-title";
+import { Notifications } from "../../notifications";
+import { Wizard, WizardStep } from "../../wizard";
+import { clusterRolesStore } from "./store";
+
+interface Props extends Partial<DialogProps> {
+}
+
+@observer
+export class AddClusterRoleDialog extends React.Component<Props> {
+  @observable static isOpen = false;
+
+  @observable clusterRoleName = "";
+
+  static open() {
+    AddClusterRoleDialog.isOpen = true;
+  }
+
+  static close() {
+    AddClusterRoleDialog.isOpen = false;
+  }
+
+  close = () => {
+    AddClusterRoleDialog.close();
+  };
+
+  reset = () => {
+    this.clusterRoleName = "";
+  };
+
+  createRole = async () => {
+    try {
+      const role = await clusterRolesStore.create({ name: this.clusterRoleName });
+
+      showDetails(role.selfLink);
+      this.reset();
+      this.close();
+    } catch (err) {
+      Notifications.error(err.toString());
+    }
+  };
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const header = <h5>Create ClusterRole</h5>;
+
+    return (
+      <Dialog
+        {...dialogProps}
+        className="AddRoleDialog"
+        isOpen={AddClusterRoleDialog.isOpen}
+        close={this.close}
+      >
+        <Wizard header={header} done={this.close}>
+          <WizardStep
+            contentClass="flex gaps column"
+            nextLabel="Create"
+            next={this.createRole}
+          >
+            <SubTitle title="ClusterRole Name" />
+            <Input
+              required autoFocus
+              placeholder="Name"
+              iconLeft="supervisor_account"
+              value={this.clusterRoleName}
+              onChange={v => this.clusterRoleName = v}
+            />
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    );
+  }
+}
diff --git a/src/renderer/components/+user-management-roles/role-details.scss b/src/renderer/components/+user-management/+cluster-roles/details.scss
similarity index 100%
rename from src/renderer/components/+user-management-roles/role-details.scss
rename to src/renderer/components/+user-management/+cluster-roles/details.scss
diff --git a/src/renderer/components/+user-management/+cluster-roles/details.tsx b/src/renderer/components/+user-management/+cluster-roles/details.tsx
new file mode 100644
index 0000000000..52bee8dc8e
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles/details.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./details.scss";
+
+import { observer } from "mobx-react";
+import React from "react";
+
+import { KubeEventDetails } from "../../+events/kube-event-details";
+import { kubeObjectDetailRegistry } from "../../../api/kube-object-detail-registry";
+import { DrawerTitle } from "../../drawer";
+import type { KubeObjectDetailsProps } from "../../kube-object";
+import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
+import type { ClusterRole } from "../../../api/endpoints";
+
+interface Props extends KubeObjectDetailsProps<ClusterRole> {
+}
+
+@observer
+export class ClusterRoleDetails extends React.Component<Props> {
+  render() {
+    const { object: clusterRole } = this.props;
+
+    if (!clusterRole) return null;
+    const rules = clusterRole.getRules();
+
+    return (
+      <div className="ClusterRoleDetails">
+        <KubeObjectMeta object={clusterRole}/>
+
+        <DrawerTitle title="Rules"/>
+        {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => {
+          return (
+            <div className="rule" key={index}>
+              {resources && (
+                <>
+                  <div className="name">Resources</div>
+                  <div className="value">{resources.join(", ")}</div>
+                </>
+              )}
+              {verbs && (
+                <>
+                  <div className="name">Verbs</div>
+                  <div className="value">{verbs.join(", ")}</div>
+                </>
+              )}
+              {apiGroups && (
+                <>
+                  <div className="name">Api Groups</div>
+                  <div className="value">
+                    {apiGroups
+                      .map(apiGroup => apiGroup === "" ? `'${apiGroup}'` : apiGroup)
+                      .join(", ")
+                    }
+                  </div>
+                </>
+              )}
+              {resourceNames && (
+                <>
+                  <div className="name">Resource Names</div>
+                  <div className="value">{resourceNames.join(", ")}</div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+kubeObjectDetailRegistry.add({
+  kind: "ClusterRole",
+  apiVersions: ["rbac.authorization.k8s.io/v1"],
+  components: {
+    Details: (props) => <ClusterRoleDetails {...props}/>
+  }
+});
+kubeObjectDetailRegistry.add({
+  kind: "ClusterRole",
+  apiVersions: ["rbac.authorization.k8s.io/v1"],
+  priority: 5,
+  components: {
+    Details: (props) => <KubeEventDetails {...props}/>
+  }
+});
diff --git a/src/renderer/components/+user-management-roles-bindings/index.ts b/src/renderer/components/+user-management/+cluster-roles/index.ts
similarity index 90%
rename from src/renderer/components/+user-management-roles-bindings/index.ts
rename to src/renderer/components/+user-management/+cluster-roles/index.ts
index ca08a30691..e45d58073c 100644
--- a/src/renderer/components/+user-management-roles-bindings/index.ts
+++ b/src/renderer/components/+user-management/+cluster-roles/index.ts
@@ -18,7 +18,6 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-
-export * from "./role-bindings";
-export * from "./role-binding-details";
-export * from "./add-role-binding-dialog";
+export * from "./view";
+export * from "./details";
+export * from "./add-dialog";
diff --git a/src/renderer/components/+user-management/+cluster-roles/store.ts b/src/renderer/components/+user-management/+cluster-roles/store.ts
new file mode 100644
index 0000000000..6fe25a2c42
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles/store.ts
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import { apiManager } from "../../../api/api-manager";
+import { ClusterRole, clusterRoleApi } from "../../../api/endpoints";
+import { KubeObjectStore } from "../../../kube-object.store";
+import { autoBind } from "../../../utils";
+
+export class ClusterRolesStore extends KubeObjectStore<ClusterRole> {
+  api = clusterRoleApi;
+
+  constructor() {
+    super();
+    autoBind(this);
+  }
+
+  protected sortItems(items: ClusterRole[]) {
+    return super.sortItems(items, [
+      clusterRole => clusterRole.kind,
+      clusterRole => clusterRole.getName(),
+    ]);
+  }
+}
+
+export const clusterRolesStore = new ClusterRolesStore();
+
+apiManager.registerStore(clusterRolesStore);
diff --git a/src/renderer/components/+user-management/+cluster-roles/view.scss b/src/renderer/components/+user-management/+cluster-roles/view.scss
new file mode 100644
index 0000000000..2225c17a06
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles/view.scss
@@ -0,0 +1,11 @@
+.ClusterRoles {
+  .help-icon {
+    margin-left: $margin / 2;
+  }
+
+  .TableCell {
+    &.warning {
+      @include table-cell-warning;
+    }
+  }
+}
diff --git a/src/renderer/components/+user-management/+cluster-roles/view.tsx b/src/renderer/components/+user-management/+cluster-roles/view.tsx
new file mode 100644
index 0000000000..e89e66afd4
--- /dev/null
+++ b/src/renderer/components/+user-management/+cluster-roles/view.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./view.scss";
+
+import { observer } from "mobx-react";
+import React from "react";
+import type { RouteComponentProps } from "react-router";
+import type { ClusterRole } from "../../../api/endpoints";
+import { KubeObjectListLayout } from "../../kube-object";
+import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
+import type { ClusterRolesRouteParams } from "../user-management.route";
+import { AddClusterRoleDialog } from "./add-dialog";
+import { clusterRolesStore } from "./store";
+
+enum columnId {
+  name = "name",
+  namespace = "namespace",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<ClusterRolesRouteParams> {
+}
+
+@observer
+export class ClusterRoles extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <KubeObjectListLayout
+          isConfigurable
+          tableId="access_cluster_roles"
+          className="ClusterRoles"
+          store={clusterRolesStore}
+          isClusterScoped
+          sortingCallbacks={{
+            [columnId.name]: (clusterRole: ClusterRole) => clusterRole.getName(),
+            [columnId.age]: (clusterRole: ClusterRole) => clusterRole.getTimeDiffFromNow(),
+          }}
+          searchFilters={[
+            (clusterRole: ClusterRole) => clusterRole.getSearchFields(),
+          ]}
+          renderHeaderTitle="Cluster Roles"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          ]}
+          renderTableContents={(clusterRole: ClusterRole) => [
+            clusterRole.getName(),
+            <KubeObjectStatusIcon key="icon" object={clusterRole} />,
+            clusterRole.getAge(),
+          ]}
+          addRemoveButtons={{
+            onAdd: () => AddClusterRoleDialog.open(),
+            addTooltip: "Create new ClusterRole",
+          }}
+        />
+        <AddClusterRoleDialog/>
+      </>
+    );
+  }
+}
diff --git a/src/renderer/components/+user-management/+roles-bindings/details.scss b/src/renderer/components/+user-management/+roles-bindings/details.scss
new file mode 100644
index 0000000000..805e5e05fe
--- /dev/null
+++ b/src/renderer/components/+user-management/+roles-bindings/details.scss
@@ -0,0 +1,2 @@
+.RoleBindingDetails {
+}
\ No newline at end of file
diff --git a/src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx b/src/renderer/components/+user-management/+roles-bindings/details.tsx
similarity index 62%
rename from src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx
rename to src/renderer/components/+user-management/+roles-bindings/details.tsx
index 3fb14c4bc4..7aa87c5a40 100644
--- a/src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx
+++ b/src/renderer/components/+user-management/+roles-bindings/details.tsx
@@ -19,35 +19,32 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./role-binding-details.scss";
+import "./details.scss";
 
-import React from "react";
-import { AddRemoveButtons } from "../add-remove-buttons";
-import type { IRoleBindingSubject, RoleBinding } from "../../api/endpoints";
-import { boundMethod, prevDefault } from "../../utils";
-import { Table, TableCell, TableHead, TableRow } from "../table";
-import { ConfirmDialog } from "../confirm-dialog";
-import { DrawerTitle } from "../drawer";
-import { KubeEventDetails } from "../+events/kube-event-details";
+import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { observable, reaction, makeObservable } from "mobx";
-import { roleBindingsStore } from "./role-bindings.store";
-import { AddRoleBindingDialog } from "./add-role-binding-dialog";
-import type { KubeObjectDetailsProps } from "../kube-object";
-import { KubeObjectMeta } from "../kube-object/kube-object-meta";
-import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import React from "react";
+import { KubeEventDetails } from "../../+events/kube-event-details";
+import type { RoleBinding, RoleBindingSubject } from "../../../api/endpoints";
+import { kubeObjectDetailRegistry } from "../../../api/kube-object-detail-registry";
+import { prevDefault, boundMethod } from "../../../utils";
+import { AddRemoveButtons } from "../../add-remove-buttons";
+import { ConfirmDialog } from "../../confirm-dialog";
+import { DrawerTitle } from "../../drawer";
+import type { KubeObjectDetailsProps } from "../../kube-object";
+import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
+import { Table, TableCell, TableHead, TableRow } from "../../table";
+import { RoleBindingDialog } from "./dialog";
+import { roleBindingsStore } from "./store";
+import { ObservableHashSet } from "../../../../common/utils/hash-set";
+import { hashRoleBindingSubject } from "../../../../common/utils/hashers";
 
 interface Props extends KubeObjectDetailsProps<RoleBinding> {
 }
 
 @observer
 export class RoleBindingDetails extends React.Component<Props> {
-  @observable selectedSubjects = observable.array<IRoleBindingSubject>([], { deep: false });
-
-  constructor(props: Props) {
-    super(props);
-    makeObservable(this);
-  }
+  selectedSubjects = new ObservableHashSet<RoleBindingSubject>([], hashRoleBindingSubject);
 
   async componentDidMount() {
     disposeOnUnmount(this, [
@@ -57,24 +54,13 @@ export class RoleBindingDetails extends React.Component<Props> {
     ]);
   }
 
-  selectSubject(subject: IRoleBindingSubject) {
-    const { selectedSubjects } = this;
-    const isSelected = selectedSubjects.includes(subject);
-
-    selectedSubjects.replace(
-      isSelected
-        ? selectedSubjects.filter(sub => sub !== subject) // unselect
-        : selectedSubjects.concat(subject) // select
-    );
-  }
-
   @boundMethod
   removeSelectedSubjects() {
     const { object: roleBinding } = this.props;
     const { selectedSubjects } = this;
 
     ConfirmDialog.open({
-      ok: () => roleBindingsStore.updateSubjects({ roleBinding, removeSubjects: selectedSubjects }),
+      ok: () => roleBindingsStore.updateSubjects({ roleBinding, removeSubjects: selectedSubjects.toJSON() }),
       labelOk: `Remove`,
       message: (
         <p>Remove selected bindings for <b>{roleBinding.getName()}</b>?</p>
@@ -94,9 +80,9 @@ export class RoleBindingDetails extends React.Component<Props> {
 
     return (
       <div className="RoleBindingDetails">
-        <KubeObjectMeta object={roleBinding}/>
+        <KubeObjectMeta object={roleBinding} />
 
-        <DrawerTitle title="Reference"/>
+        <DrawerTitle title="Reference" />
         <Table>
           <TableHead>
             <TableCell>Kind</TableCell>
@@ -110,11 +96,11 @@ export class RoleBindingDetails extends React.Component<Props> {
           </TableRow>
         </Table>
 
-        <DrawerTitle title="Bindings"/>
+        <DrawerTitle title="Bindings" />
         {subjects.length > 0 && (
           <Table selectable className="bindings box grow">
             <TableHead>
-              <TableCell checkbox/>
+              <TableCell checkbox />
               <TableCell className="binding">Binding</TableCell>
               <TableCell className="type">Type</TableCell>
               <TableCell className="type">Namespace</TableCell>
@@ -122,14 +108,18 @@ export class RoleBindingDetails extends React.Component<Props> {
             {
               subjects.map((subject, i) => {
                 const { kind, name, namespace } = subject;
-                const isSelected = selectedSubjects.includes(subject);
+                const isSelected = selectedSubjects.has(subject);
 
                 return (
                   <TableRow
-                    key={i} selected={isSelected}
-                    onClick={prevDefault(() => this.selectSubject(subject))}
+                    key={i}
+                    selected={isSelected}
+                    onClick={prevDefault(() => {
+                      console.log("toggling", subject);
+                      this.selectedSubjects.toggle(subject);
+                    })}
                   >
-                    <TableCell checkbox isChecked={isSelected}/>
+                    <TableCell checkbox isChecked={isSelected} />
                     <TableCell className="binding">{name}</TableCell>
                     <TableCell className="type">{kind}</TableCell>
                     <TableCell className="ns">{namespace || "-"}</TableCell>
@@ -141,9 +131,9 @@ export class RoleBindingDetails extends React.Component<Props> {
         )}
 
         <AddRemoveButtons
-          onAdd={() => AddRoleBindingDialog.open(roleBinding)}
-          onRemove={selectedSubjects.length ? this.removeSelectedSubjects : null}
-          addTooltip={`Add bindings to ${roleRef.name}`}
+          onAdd={() => RoleBindingDialog.open(roleBinding)}
+          onRemove={selectedSubjects.size ? this.removeSelectedSubjects : null}
+          addTooltip={`Edit bindings of ${roleRef.name}`}
           removeTooltip={`Remove selected bindings from ${roleRef.name}`}
         />
       </div>
@@ -166,20 +156,3 @@ kubeObjectDetailRegistry.add({
     Details: (props) => <KubeEventDetails {...props} />
   }
 });
-
-
-kubeObjectDetailRegistry.add({
-  kind: "ClusterRoleBinding",
-  apiVersions: ["rbac.authorization.k8s.io/v1"],
-  components: {
-    Details: (props) => <RoleBindingDetails {...props} />
-  }
-});
-kubeObjectDetailRegistry.add({
-  kind: "ClusterRoleBinding",
-  apiVersions: ["rbac.authorization.k8s.io/v1"],
-  priority: 5,
-  components: {
-    Details: (props) => <KubeEventDetails {...props} />
-  }
-});
diff --git a/src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.scss b/src/renderer/components/+user-management/+roles-bindings/dialog.scss
similarity index 100%
rename from src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.scss
rename to src/renderer/components/+user-management/+roles-bindings/dialog.scss
diff --git a/src/renderer/components/+user-management/+roles-bindings/dialog.tsx b/src/renderer/components/+user-management/+roles-bindings/dialog.tsx
new file mode 100644
index 0000000000..e6122578b2
--- /dev/null
+++ b/src/renderer/components/+user-management/+roles-bindings/dialog.tsx
@@ -0,0 +1,304 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./dialog.scss";
+
+import { computed, observable, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import React from "react";
+
+import { rolesStore } from "../+roles/store";
+import { serviceAccountsStore } from "../+service-accounts/store";
+import { NamespaceSelect } from "../../+namespaces/namespace-select";
+import { ClusterRole, Role, roleApi, RoleBinding, RoleBindingSubject, ServiceAccount } from "../../../api/endpoints";
+import { Dialog, DialogProps } from "../../dialog";
+import { EditableList } from "../../editable-list";
+import { Icon } from "../../icon";
+import { showDetails } from "../../kube-object";
+import { SubTitle } from "../../layout/sub-title";
+import { Notifications } from "../../notifications";
+import { Select, SelectOption } from "../../select";
+import { Wizard, WizardStep } from "../../wizard";
+import { roleBindingsStore } from "./store";
+import { clusterRolesStore } from "../+cluster-roles/store";
+import { Input } from "../../input";
+import { getRoleRefSelectOption } from "../role-ref-select-option";
+import { ObservableHashSet, hashKubeObject, nFircate } from "../../../utils";
+
+interface Props extends Partial<DialogProps> {
+}
+
+interface DialogState {
+  isOpen: boolean;
+  data?: RoleBinding;
+}
+
+@observer
+export class RoleBindingDialog extends React.Component<Props> {
+  static state = observable.object<DialogState>({
+    isOpen: false,
+  });
+
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
+  static open(roleBinding?: RoleBinding) {
+    RoleBindingDialog.state.isOpen = true;
+    RoleBindingDialog.state.data = roleBinding;
+  }
+
+  static close() {
+    RoleBindingDialog.state.isOpen = false;
+    RoleBindingDialog.state.data = undefined;
+  }
+
+  get roleBinding(): RoleBinding {
+    return RoleBindingDialog.state.data;
+  }
+
+  @computed get isEditing() {
+    return !!this.roleBinding;
+  }
+
+  @observable.ref selectedRoleRef: Role | ClusterRole | undefined = undefined;
+  @observable bindingName = "";
+  @observable bindingNamespace = "";
+  selectedAccounts = new ObservableHashSet<ServiceAccount>([], hashKubeObject);
+  selectedUsers = observable.set<string>([]);
+  selectedGroups = observable.set<string>([]);
+
+  @computed get selectedBindings(): RoleBindingSubject[] {
+    const serviceAccounts = Array.from(this.selectedAccounts, sa => ({
+      name: sa.getName(),
+      kind: "ServiceAccount" as const,
+      namespace: this.bindingNamespace,
+    }));
+    const users = Array.from(this.selectedUsers, user => ({
+      name: user,
+      kind: "User" as const,
+      namespace: this.bindingNamespace,
+    }));
+    const groups = Array.from(this.selectedGroups, group => ({
+      name: group,
+      kind: "Group" as const,
+      namespace: this.bindingNamespace,
+    }));
+
+    return [
+      ...serviceAccounts,
+      ...users,
+      ...groups,
+    ];
+  }
+
+  @computed get roleRefOptions(): SelectOption<Role | ClusterRole>[] {
+    const roles = rolesStore.items
+      .filter(role => role.getNs() === this.bindingNamespace)
+      .map(getRoleRefSelectOption);
+    const clusterRoles = clusterRolesStore.items
+      .map(getRoleRefSelectOption);
+
+    return [
+      ...roles,
+      ...clusterRoles,
+    ];
+  }
+
+  @computed get serviceAccountOptions(): SelectOption<ServiceAccount>[] {
+    return serviceAccountsStore.items
+      .filter(role => role.getNs() === this.bindingNamespace)
+      .map(account => ({
+        value: account,
+        label: <><Icon small material="account_box" /> {account.getName()}</>
+      }));
+  }
+
+  onOpen = () => {
+    const binding = this.roleBinding;
+
+    if (!binding) {
+      return this.reset();
+    }
+
+    this.selectedRoleRef = (binding.roleRef.kind === roleApi.kind ? rolesStore : clusterRolesStore)
+      .items
+      .find(item => item.getName() === binding.roleRef.name);
+
+    this.bindingName = binding.getName();
+    this.bindingNamespace = binding.getNs();
+
+    const [saSubjects, uSubjects, gSubjects] = nFircate(binding.getSubjects(), "kind", ["ServiceAccount", "User", "Group"]);
+    const accountNames = new Set(saSubjects.map(acc => acc.name));
+
+    this.selectedAccounts.replace(
+      serviceAccountsStore.items
+        .filter(sa => accountNames.has(sa.getName()))
+    );
+    this.selectedUsers.replace(uSubjects.map(user => user.name));
+    this.selectedGroups.replace(gSubjects.map(group => group.name));
+  };
+
+  reset = () => {
+    this.selectedRoleRef = undefined;
+    this.bindingName = "";
+    this.bindingNamespace = "";
+    this.selectedAccounts.clear();
+    this.selectedUsers.clear();
+    this.selectedGroups.clear();
+  };
+
+  createBindings = async () => {
+    const { selectedRoleRef, bindingNamespace: namespace, selectedBindings } = this;
+
+    try {
+      const roleBinding = this.isEditing
+        ? await roleBindingsStore.updateSubjects({
+          roleBinding: this.roleBinding,
+          addSubjects: selectedBindings,
+        })
+        : await roleBindingsStore.create({ name: this.bindingName, namespace }, {
+          subjects: selectedBindings,
+          roleRef: {
+            name: selectedRoleRef.getName(),
+            kind: selectedRoleRef.kind,
+          }
+        });
+
+      showDetails(roleBinding.selfLink);
+      RoleBindingDialog.close();
+    } catch (err) {
+      Notifications.error(err);
+    }
+  };
+
+  renderContents() {
+    return (
+      <>
+        <SubTitle title="Namespace" />
+        <NamespaceSelect
+          themeName="light"
+          isDisabled={this.isEditing}
+          value={this.bindingNamespace}
+          onChange={({ value }) => this.bindingNamespace = value}
+        />
+
+        <SubTitle title="RoleRef" />
+        <Select
+          themeName="light"
+          placeholder="Select role or cluster role ..."
+          isDisabled={this.isEditing}
+          options={this.roleRefOptions}
+          value={this.selectedRoleRef}
+          onChange={({ value }) => {
+            this.selectedRoleRef = value;
+
+            if (this.selectedRoleRef.kind === "Role") {
+              this.bindingNamespace = this.selectedRoleRef.getNs();
+            }
+          }}
+        />
+
+        {!this.isEditing && (
+          <>
+            <SubTitle title="Role Binding Name" />
+            <Input
+              value={this.bindingName}
+              onChange={value => this.bindingName = value}
+            />
+          </>
+        )}
+
+        <SubTitle title="Binding targets" />
+
+        <b>Users</b>
+        <EditableList
+          placeholder="Bind to User Account ..."
+          add={(newUser) => this.selectedUsers.add(newUser)}
+          items={Array.from(this.selectedUsers)}
+          remove={({ oldItem }) => this.selectedUsers.delete(oldItem)}
+        />
+
+        <b>Groups</b>
+        <EditableList
+          placeholder="Bind to User Group ..."
+          add={(newGroup) => this.selectedGroups.add(newGroup)}
+          items={Array.from(this.selectedGroups)}
+          remove={({ oldItem }) => this.selectedGroups.delete(oldItem)}
+        />
+
+        <b>Service Accounts</b>
+        <Select
+          isMulti
+          themeName="light"
+          placeholder="Bind to Service Accounts ..."
+          autoConvertOptions={false}
+          options={this.serviceAccountOptions}
+          onChange={([{ value }]: SelectOption<ServiceAccount>[]) => {
+            this.selectedAccounts.toggle(value);
+          }}
+          maxMenuHeight={200}
+        />
+      </>
+    );
+  }
+
+  render() {
+    const { ...dialogProps } = this.props;
+    const { isEditing, roleBinding, selectedRoleRef, selectedBindings } = this;
+    const roleBindingName = roleBinding ? roleBinding.getName() : "";
+    const header = (
+      <h5>
+        {roleBindingName
+          ? <>Edit RoleBinding <span className="name">{roleBindingName}</span></>
+          : "Add RoleBinding"
+        }
+      </h5>
+    );
+    const disableNext = !selectedRoleRef || !selectedBindings.length;
+    const nextLabel = isEditing ? "Update" : "Create";
+
+    return (
+      <Dialog
+        {...dialogProps}
+        className="AddRoleBindingDialog"
+        isOpen={RoleBindingDialog.state.isOpen}
+        close={RoleBindingDialog.close}
+        onClose={this.reset}
+        onOpen={this.onOpen}
+      >
+        <Wizard
+          header={header}
+          done={RoleBindingDialog.close}
+        >
+          <WizardStep
+            nextLabel={nextLabel}
+            next={this.createBindings}
+            disabledNext={disableNext}
+          >
+            {this.renderContents()}
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    );
+  }
+}
diff --git a/src/renderer/components/+user-management/+roles-bindings/index.ts b/src/renderer/components/+user-management/+roles-bindings/index.ts
new file mode 100644
index 0000000000..b43d4302da
--- /dev/null
+++ b/src/renderer/components/+user-management/+roles-bindings/index.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+export * from "./view";
+export * from "./details";
+export * from "./dialog";
diff --git a/src/renderer/components/+user-management-roles-bindings/role-bindings.store.ts b/src/renderer/components/+user-management/+roles-bindings/store.ts
similarity index 60%
rename from src/renderer/components/+user-management-roles-bindings/role-bindings.store.ts
rename to src/renderer/components/+user-management/+roles-bindings/store.ts
index 25c4285fef..f2a3f65946 100644
--- a/src/renderer/components/+user-management-roles-bindings/role-bindings.store.ts
+++ b/src/renderer/components/+user-management/+roles-bindings/store.ts
@@ -18,25 +18,15 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-
 import difference from "lodash/difference";
 import uniqBy from "lodash/uniqBy";
-import { clusterRoleBindingApi, IRoleBindingSubject, RoleBinding, roleBindingApi } from "../../api/endpoints";
-import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
-import { autoBind } from "../../utils";
-import { apiManager } from "../../api/api-manager";
+
+import { apiManager } from "../../../api/api-manager";
+import { RoleBinding, roleBindingApi, RoleBindingSubject } from "../../../api/endpoints";
+import { KubeObjectStore } from "../../../kube-object.store";
 
 export class RoleBindingsStore extends KubeObjectStore<RoleBinding> {
-  api = clusterRoleBindingApi;
-
-  constructor() {
-    super();
-    autoBind(this);
-  }
-
-  getSubscribeApis() {
-    return [clusterRoleBindingApi, roleBindingApi];
-  }
+  api = roleBindingApi;
 
   protected sortItems(items: RoleBinding[]) {
     return super.sortItems(items, [
@@ -45,33 +35,14 @@ export class RoleBindingsStore extends KubeObjectStore<RoleBinding> {
     ]);
   }
 
-  protected loadItem(params: { name: string; namespace?: string }) {
-    if (params.namespace) return roleBindingApi.get(params);
-
-    return clusterRoleBindingApi.get(params);
-  }
-
-  protected async loadItems(params: KubeObjectStoreLoadingParams): Promise<RoleBinding[]> {
-    const items = await Promise.all([
-      super.loadItems({ ...params, api: clusterRoleBindingApi }),
-      super.loadItems({ ...params, api: roleBindingApi }),
-    ]);
-
-    return items.flat();
-  }
-
-  protected async createItem(params: { name: string; namespace?: string }, data?: Partial<RoleBinding>) {
-    if (params.namespace) {
-      return roleBindingApi.create(params, data);
-    } else {
-      return clusterRoleBindingApi.create(params, data);
-    }
+  protected async createItem(params: { name: string; namespace: string }, data?: Partial<RoleBinding>) {
+    return roleBindingApi.create(params, data);
   }
 
   async updateSubjects(params: {
     roleBinding: RoleBinding;
-    addSubjects?: IRoleBindingSubject[];
-    removeSubjects?: IRoleBindingSubject[];
+    addSubjects?: RoleBindingSubject[];
+    removeSubjects?: RoleBindingSubject[];
   }) {
     const { roleBinding, addSubjects, removeSubjects } = params;
     const currentSubjects = roleBinding.getSubjects();
@@ -94,7 +65,4 @@ export class RoleBindingsStore extends KubeObjectStore<RoleBinding> {
 
 export const roleBindingsStore = new RoleBindingsStore();
 
-apiManager.registerStore(roleBindingsStore, [
-  roleBindingApi,
-  clusterRoleBindingApi,
-]);
+apiManager.registerStore(roleBindingsStore);
diff --git a/src/renderer/components/+user-management-roles-bindings/role-bindings.scss b/src/renderer/components/+user-management/+roles-bindings/view.scss
similarity index 100%
rename from src/renderer/components/+user-management-roles-bindings/role-bindings.scss
rename to src/renderer/components/+user-management/+roles-bindings/view.scss
diff --git a/src/renderer/components/+user-management/+roles-bindings/view.tsx b/src/renderer/components/+user-management/+roles-bindings/view.tsx
new file mode 100644
index 0000000000..5b7de8d77c
--- /dev/null
+++ b/src/renderer/components/+user-management/+roles-bindings/view.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import "./view.scss";
+
+import { observer } from "mobx-react";
+import React from "react";
+import type { RouteComponentProps } from "react-router";
+import type { RoleBinding } from "../../../api/endpoints";
+import { KubeObjectListLayout } from "../../kube-object";
+import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
+import type { RoleBindingsRouteParams } from "../user-management.route";
+import { RoleBindingDialog } from "./dialog";
+import { roleBindingsStore } from "./store";
+import { rolesStore } from "../+roles/store";
+import { clusterRolesStore } from "../+cluster-roles/store";
+import { serviceAccountsStore } from "../+service-accounts/store";
+
+enum columnId {
+  name = "name",
+  namespace = "namespace",
+  bindings = "bindings",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<RoleBindingsRouteParams> {
+}
+
+@observer
+export class RoleBindings extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <KubeObjectListLayout
+          isConfigurable
+          tableId="access_role_bindings"
+          className="RoleBindings"
+          store={roleBindingsStore}
+          dependentStores={[rolesStore, clusterRolesStore, serviceAccountsStore]}
+          sortingCallbacks={{
+            [columnId.name]: (binding: RoleBinding) => binding.getName(),
+            [columnId.namespace]: (binding: RoleBinding) => binding.getNs(),
+            [columnId.bindings]: (binding: RoleBinding) => binding.getSubjectNames(),
+            [columnId.age]: (binding: RoleBinding) => binding.getTimeDiffFromNow(),
+          }}
+          searchFilters={[
+            (binding: RoleBinding) => binding.getSearchFields(),
+            (binding: RoleBinding) => binding.getSubjectNames(),
+          ]}
+          renderHeaderTitle="Role Bindings"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Bindings", className: "bindings", sortBy: columnId.bindings, id: columnId.bindings },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          ]}
+          renderTableContents={(binding: RoleBinding) => [
+            binding.getName(),
+            <KubeObjectStatusIcon key="icon" object={binding} />,
+            binding.getNs() || "-",
+            binding.getSubjectNames(),
+            binding.getAge(),
+          ]}
+          addRemoveButtons={{
+            onAdd: () => RoleBindingDialog.open(),
+            addTooltip: "Create new RoleBinding",
+          }}
+        />
+        <RoleBindingDialog />
+      </>
+    );
+  }
+}
diff --git a/src/renderer/components/+user-management/+roles/add-dialog.scss b/src/renderer/components/+user-management/+roles/add-dialog.scss
new file mode 100644
index 0000000000..536d209040
--- /dev/null
+++ b/src/renderer/components/+user-management/+roles/add-dialog.scss
@@ -0,0 +1,5 @@
+.AddRoleDialog {
+  .AceEditor {
+    min-height: 200px;
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/components/+user-management-roles/add-role-dialog.tsx b/src/renderer/components/+user-management/+roles/add-dialog.tsx
similarity index 87%
rename from src/renderer/components/+user-management-roles/add-role-dialog.tsx
rename to src/renderer/components/+user-management/+roles/add-dialog.tsx
index 43b413dd8b..d3c2acb052 100644
--- a/src/renderer/components/+user-management-roles/add-role-dialog.tsx
+++ b/src/renderer/components/+user-management/+roles/add-dialog.tsx
@@ -19,19 +19,20 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./add-role-dialog.scss";
+import "./add-dialog.scss";
 
 import React from "react";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { Dialog, DialogProps } from "../dialog";
-import { Wizard, WizardStep } from "../wizard";
-import { SubTitle } from "../layout/sub-title";
-import { Notifications } from "../notifications";
-import { rolesStore } from "./roles.store";
-import { Input } from "../input";
-import { NamespaceSelect } from "../+namespaces/namespace-select";
-import { showDetails } from "../kube-object";
+
+import { NamespaceSelect } from "../../+namespaces/namespace-select";
+import { Dialog, DialogProps } from "../../dialog";
+import { Input } from "../../input";
+import { showDetails } from "../../kube-object";
+import { SubTitle } from "../../layout/sub-title";
+import { Notifications } from "../../notifications";
+import { Wizard, WizardStep } from "../../wizard";
+import { rolesStore } from "./store";
 
 interface Props extends Partial<DialogProps> {
 }
diff --git a/src/renderer/components/+user-management/+roles/details.scss b/src/renderer/components/+user-management/+roles/details.scss
new file mode 100644
index 0000000000..464a388ffd
--- /dev/null
+++ b/src/renderer/components/+user-management/+roles/details.scss
@@ -0,0 +1,21 @@
+.ClusterRoleDetails {
+  .rule {
+    display: grid;
+    grid-template-columns: min-content auto;
+    gap: $margin;
+
+    border: 1px solid $borderColor;
+    border-radius: $radius;
+    padding: $padding * 1.5;
+
+    > .name {
+      color: $textColorSecondary;
+      text-align: right;
+      white-space: nowrap;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: $margin * 2;
+    }
+  }
+}
diff --git a/src/renderer/components/+user-management-roles/role-details.tsx b/src/renderer/components/+user-management/+roles/details.tsx
similarity index 80%
rename from src/renderer/components/+user-management-roles/role-details.tsx
rename to src/renderer/components/+user-management/+roles/details.tsx
index 34fb92f816..2cc078f96a 100644
--- a/src/renderer/components/+user-management-roles/role-details.tsx
+++ b/src/renderer/components/+user-management/+roles/details.tsx
@@ -19,16 +19,17 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./role-details.scss";
+import "./details.scss";
 
-import React from "react";
-import { DrawerTitle } from "../drawer";
-import { KubeEventDetails } from "../+events/kube-event-details";
 import { observer } from "mobx-react";
-import type { KubeObjectDetailsProps } from "../kube-object";
-import type { Role } from "../../api/endpoints";
-import { KubeObjectMeta } from "../kube-object/kube-object-meta";
-import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import React from "react";
+
+import { KubeEventDetails } from "../../+events/kube-event-details";
+import type { Role } from "../../../api/endpoints";
+import { kubeObjectDetailRegistry } from "../../../api/kube-object-detail-registry";
+import { DrawerTitle } from "../../drawer";
+import type { KubeObjectDetailsProps } from "../../kube-object";
+import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
 
 interface Props extends KubeObjectDetailsProps<Role> {
 }
@@ -44,7 +45,6 @@ export class RoleDetails extends React.Component<Props> {
     return (
       <div className="RoleDetails">
         <KubeObjectMeta object={role}/>
-
         <DrawerTitle title="Rules"/>
         {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => {
           return (
@@ -101,19 +101,3 @@ kubeObjectDetailRegistry.add({
     Details: (props) => <KubeEventDetails {...props} />
   }
 });
-
-kubeObjectDetailRegistry.add({
-  kind: "ClusterRole",
-  apiVersions: ["rbac.authorization.k8s.io/v1"],
-  components: {
-    Details: (props) => <RoleDetails {...props}/>
-  }
-});
-kubeObjectDetailRegistry.add({
-  kind: "ClusterRole",
-  apiVersions: ["rbac.authorization.k8s.io/v1"],
-  priority: 5,
-  components: {
-    Details: (props) => <KubeEventDetails {...props}/>
-  }
-});
diff --git a/src/renderer/components/+user-management/+roles/index.ts b/src/renderer/components/+user-management/+roles/index.ts
new file mode 100644
index 0000000000..e45d58073c
--- /dev/null
+++ b/src/renderer/components/+user-management/+roles/index.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+export * from "./view";
+export * from "./details";
+export * from "./add-dialog";
diff --git a/src/renderer/components/+user-management/+roles/store.ts b/src/renderer/components/+user-management/+roles/store.ts
new file mode 100644
index 0000000000..43774e8b09
--- /dev/null
+++ b/src/renderer/components/+user-management/+roles/store.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import { apiManager } from "../../../api/api-manager";
+import { Role, roleApi } from "../../../api/endpoints";
+import { KubeObjectStore } from "../../../kube-object.store";
+import { autoBind } from "../../../utils";
+
+export class RolesStore extends KubeObjectStore<Role> {
+  api = roleApi;
+
+  constructor() {
+    super();
+    autoBind(this);
+  }
+
+  protected sortItems(items: Role[]) {
+    return super.sortItems(items, [
+      role => role.kind,
+      role => role.getName(),
+    ]);
+  }
+
+  protected async createItem(params: { name: string; namespace?: string }, data?: Partial<Role>) {
+    return roleApi.create(params, data);
+  }
+}
+
+export const rolesStore = new RolesStore();
+
+apiManager.registerStore(rolesStore);
diff --git a/src/renderer/components/+user-management-roles/roles.scss b/src/renderer/components/+user-management/+roles/view.scss
similarity index 100%
rename from src/renderer/components/+user-management-roles/roles.scss
rename to src/renderer/components/+user-management/+roles/view.scss
diff --git a/src/renderer/components/+user-management-roles/roles.tsx b/src/renderer/components/+user-management/+roles/view.tsx
similarity index 85%
rename from src/renderer/components/+user-management-roles/roles.tsx
rename to src/renderer/components/+user-management/+roles/view.tsx
index ac7385cb2c..aa8bea346f 100644
--- a/src/renderer/components/+user-management-roles/roles.tsx
+++ b/src/renderer/components/+user-management/+roles/view.tsx
@@ -19,17 +19,17 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./roles.scss";
+import "./view.scss";
 
-import React from "react";
 import { observer } from "mobx-react";
+import React from "react";
 import type { RouteComponentProps } from "react-router";
-import type { IRolesRouteParams } from "../+user-management/user-management.route";
-import { rolesStore } from "./roles.store";
-import type { Role } from "../../api/endpoints";
-import { KubeObjectListLayout } from "../kube-object";
-import { AddRoleDialog } from "./add-role-dialog";
-import { KubeObjectStatusIcon } from "../kube-object-status-icon";
+import type { Role } from "../../../api/endpoints";
+import { KubeObjectListLayout } from "../../kube-object";
+import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
+import type { RolesRouteParams } from "../user-management.route";
+import { AddRoleDialog } from "./add-dialog";
+import { rolesStore } from "./store";
 
 enum columnId {
   name = "name",
@@ -37,7 +37,7 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<IRolesRouteParams> {
+interface Props extends RouteComponentProps<RolesRouteParams> {
 }
 
 @observer
@@ -68,7 +68,7 @@ export class Roles extends React.Component<Props> {
           renderTableContents={(role: Role) => [
             role.getName(),
             <KubeObjectStatusIcon key="icon" object={role} />,
-            role.getNs() || "-",
+            role.getNs(),
             role.getAge(),
           ]}
           addRemoveButtons={{
diff --git a/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.scss b/src/renderer/components/+user-management/+service-accounts/create-dialog.scss
similarity index 99%
rename from src/renderer/components/+user-management-service-accounts/create-service-account-dialog.scss
rename to src/renderer/components/+user-management/+service-accounts/create-dialog.scss
index e90adbac4a..9bc4e14087 100644
--- a/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.scss
+++ b/src/renderer/components/+user-management/+service-accounts/create-dialog.scss
@@ -20,4 +20,4 @@
  */
 
 .CreateServiceAccountDialog {
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx b/src/renderer/components/+user-management/+service-accounts/create-dialog.tsx
similarity index 85%
rename from src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx
rename to src/renderer/components/+user-management/+service-accounts/create-dialog.tsx
index 8c07961d18..d29731b074 100644
--- a/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx
+++ b/src/renderer/components/+user-management/+service-accounts/create-dialog.tsx
@@ -19,20 +19,21 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./create-service-account-dialog.scss";
+import "./create-dialog.scss";
 
 import React from "react";
 import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
-import { Dialog, DialogProps } from "../dialog";
-import { Wizard, WizardStep } from "../wizard";
-import { SubTitle } from "../layout/sub-title";
-import { serviceAccountsStore } from "./service-accounts.store";
-import { Input } from "../input";
-import { systemName } from "../input/input_validators";
-import { NamespaceSelect } from "../+namespaces/namespace-select";
-import { Notifications } from "../notifications";
-import { showDetails } from "../kube-object";
+
+import { NamespaceSelect } from "../../+namespaces/namespace-select";
+import { Dialog, DialogProps } from "../../dialog";
+import { Input } from "../../input";
+import { systemName } from "../../input/input_validators";
+import { showDetails } from "../../kube-object";
+import { SubTitle } from "../../layout/sub-title";
+import { Notifications } from "../../notifications";
+import { Wizard, WizardStep } from "../../wizard";
+import { serviceAccountsStore } from "./store";
 
 interface Props extends Partial<DialogProps> {
 }
diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts-details.scss b/src/renderer/components/+user-management/+service-accounts/details.scss
similarity index 99%
rename from src/renderer/components/+user-management-service-accounts/service-accounts-details.scss
rename to src/renderer/components/+user-management/+service-accounts/details.scss
index 54421ead23..8c1793d05f 100644
--- a/src/renderer/components/+user-management-service-accounts/service-accounts-details.scss
+++ b/src/renderer/components/+user-management/+service-accounts/details.scss
@@ -25,4 +25,4 @@
       margin-right: $margin;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx b/src/renderer/components/+user-management/+service-accounts/details.tsx
similarity index 87%
rename from src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx
rename to src/renderer/components/+user-management/+service-accounts/details.tsx
index e4967e5a12..98af4d9c90 100644
--- a/src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx
+++ b/src/renderer/components/+user-management/+service-accounts/details.tsx
@@ -19,27 +19,27 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./service-accounts-details.scss";
+import "./details.scss";
 
-import React from "react";
 import { autorun, observable, makeObservable } from "mobx";
-import { Spinner } from "../spinner";
-import { ServiceAccountsSecret } from "./service-accounts-secret";
-import { DrawerItem, DrawerTitle } from "../drawer";
-import { disposeOnUnmount, observer } from "mobx-react";
-import { secretsStore } from "../+config-secrets/secrets.store";
+import { disposeOnUnmount } from "mobx-react";
+import React from "react";
 import { Link } from "react-router-dom";
-import { Secret, ServiceAccount } from "../../api/endpoints";
-import { KubeEventDetails } from "../+events/kube-event-details";
-import { getDetailsUrl, KubeObjectDetailsProps } from "../kube-object";
-import { KubeObjectMeta } from "../kube-object/kube-object-meta";
-import { Icon } from "../icon";
-import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+
+import { secretsStore } from "../../+config-secrets/secrets.store";
+import { KubeEventDetails } from "../../+events/kube-event-details";
+import { Secret, ServiceAccount } from "../../../api/endpoints";
+import { kubeObjectDetailRegistry } from "../../../api/kube-object-detail-registry";
+import { DrawerItem, DrawerTitle } from "../../drawer";
+import { Icon } from "../../icon";
+import { getDetailsUrl, KubeObjectDetailsProps } from "../../kube-object";
+import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
+import { Spinner } from "../../spinner";
+import { ServiceAccountsSecret } from "./secret";
 
 interface Props extends KubeObjectDetailsProps<ServiceAccount> {
 }
 
-@observer
 export class ServiceAccountsDetails extends React.Component<Props> {
   @observable secrets: Secret[];
   @observable imagePullSecrets: Secret[];
diff --git a/src/renderer/components/+user-management/+service-accounts/index.ts b/src/renderer/components/+user-management/+service-accounts/index.ts
new file mode 100644
index 0000000000..b02c71be28
--- /dev/null
+++ b/src/renderer/components/+user-management/+service-accounts/index.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+export * from "./view";
+export * from "./details";
+export * from "./create-dialog";
diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts-secret.scss b/src/renderer/components/+user-management/+service-accounts/secret.scss
similarity index 100%
rename from src/renderer/components/+user-management-service-accounts/service-accounts-secret.scss
rename to src/renderer/components/+user-management/+service-accounts/secret.scss
diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts-secret.tsx b/src/renderer/components/+user-management/+service-accounts/secret.tsx
similarity index 94%
rename from src/renderer/components/+user-management-service-accounts/service-accounts-secret.tsx
rename to src/renderer/components/+user-management/+service-accounts/secret.tsx
index d57bb8cc05..4eff2b30dd 100644
--- a/src/renderer/components/+user-management-service-accounts/service-accounts-secret.tsx
+++ b/src/renderer/components/+user-management/+service-accounts/secret.tsx
@@ -19,13 +19,14 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./service-accounts-secret.scss";
+import "./secret.scss";
 
-import React from "react";
 import moment from "moment";
-import { Icon } from "../icon";
-import type { Secret } from "../../api/endpoints/secret.api";
-import { prevDefault } from "../../utils";
+import React from "react";
+
+import type { Secret } from "../../../api/endpoints/secret.api";
+import { prevDefault } from "../../../utils";
+import { Icon } from "../../icon";
 
 interface Props {
   secret: Secret;
diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts.store.ts b/src/renderer/components/+user-management/+service-accounts/store.ts
similarity index 87%
rename from src/renderer/components/+user-management-service-accounts/service-accounts.store.ts
rename to src/renderer/components/+user-management/+service-accounts/store.ts
index c0917dab12..51bbabca34 100644
--- a/src/renderer/components/+user-management-service-accounts/service-accounts.store.ts
+++ b/src/renderer/components/+user-management/+service-accounts/store.ts
@@ -19,10 +19,10 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { autoBind } from "../../utils";
-import { ServiceAccount, serviceAccountsApi } from "../../api/endpoints";
-import { KubeObjectStore } from "../../kube-object.store";
-import { apiManager } from "../../api/api-manager";
+import { apiManager } from "../../../api/api-manager";
+import { ServiceAccount, serviceAccountsApi } from "../../../api/endpoints";
+import { KubeObjectStore } from "../../../kube-object.store";
+import { autoBind } from "../../../utils";
 
 export class ServiceAccountsStore extends KubeObjectStore<ServiceAccount> {
   api = serviceAccountsApi;
diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts.scss b/src/renderer/components/+user-management/+service-accounts/view.scss
similarity index 100%
rename from src/renderer/components/+user-management-service-accounts/service-accounts.scss
rename to src/renderer/components/+user-management/+service-accounts/view.scss
diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts.tsx b/src/renderer/components/+user-management/+service-accounts/view.tsx
similarity index 80%
rename from src/renderer/components/+user-management-service-accounts/service-accounts.tsx
rename to src/renderer/components/+user-management/+service-accounts/view.tsx
index dff4d1fe58..442fbe3d77 100644
--- a/src/renderer/components/+user-management-service-accounts/service-accounts.tsx
+++ b/src/renderer/components/+user-management/+service-accounts/view.tsx
@@ -19,22 +19,22 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./service-accounts.scss";
+import "./view.scss";
 
-import React from "react";
 import { observer } from "mobx-react";
-import type { ServiceAccount } from "../../api/endpoints/service-accounts.api";
+import React from "react";
 import type { RouteComponentProps } from "react-router";
-import type { KubeObjectMenuProps } from "../kube-object/kube-object-menu";
-import { MenuItem } from "../menu";
-import { openServiceAccountKubeConfig } from "../kubeconfig-dialog";
-import { Icon } from "../icon";
-import { KubeObjectListLayout } from "../kube-object";
-import type { IServiceAccountsRouteParams } from "../+user-management";
-import { serviceAccountsStore } from "./service-accounts.store";
-import { CreateServiceAccountDialog } from "./create-service-account-dialog";
-import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
-import { KubeObjectStatusIcon } from "../kube-object-status-icon";
+import type { ServiceAccountsRouteParams } from "../user-management.route";
+import { kubeObjectMenuRegistry } from "../../../../extensions/registries/kube-object-menu-registry";
+import type { ServiceAccount } from "../../../api/endpoints/service-accounts.api";
+import { Icon } from "../../icon";
+import { KubeObjectListLayout } from "../../kube-object";
+import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
+import type { KubeObjectMenuProps } from "../../kube-object/kube-object-menu";
+import { openServiceAccountKubeConfig } from "../../kubeconfig-dialog";
+import { MenuItem } from "../../menu";
+import { CreateServiceAccountDialog } from "./create-dialog";
+import { serviceAccountsStore } from "./store";
 
 enum columnId {
   name = "name",
@@ -42,7 +42,7 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<IServiceAccountsRouteParams> {
+interface Props extends RouteComponentProps<ServiceAccountsRouteParams> {
 }
 
 @observer
diff --git a/src/renderer/components/+user-management/role-ref-select-option.tsx b/src/renderer/components/+user-management/role-ref-select-option.tsx
new file mode 100644
index 0000000000..4389ff95b9
--- /dev/null
+++ b/src/renderer/components/+user-management/role-ref-select-option.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import React from "react";
+import type { KubeObject } from "../../api/kube-object";
+import { Icon } from "../icon";
+import type { SelectOption } from "../select";
+import { TooltipPosition } from "../tooltip";
+
+export function getRoleRefSelectOption<T extends KubeObject>(item: T): SelectOption<T> {
+  return {
+    value: item,
+    label: (
+      <>
+        <Icon
+          small
+          material={item.kind === "Role" ? "person" : "people"}
+          tooltip={{
+            preferredPositions: TooltipPosition.LEFT,
+            children: item.kind
+          }}
+        />
+        {" "}
+        {item.getName()}
+      </>
+    ),
+  };
+}
diff --git a/src/renderer/components/+user-management/user-management.route.ts b/src/renderer/components/+user-management/user-management.route.ts
index f6e4def1e8..290e7fa2d4 100644
--- a/src/renderer/components/+user-management/user-management.route.ts
+++ b/src/renderer/components/+user-management/user-management.route.ts
@@ -19,45 +19,62 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import type { RouteProps } from "react-router";
 import { buildURL, IURLParams } from "../../../common/utils/buildUrl";
 
+import type { RouteProps } from "react-router";
+
 // Routes
 export const serviceAccountsRoute: RouteProps = {
   path: "/service-accounts"
 };
+export const podSecurityPoliciesRoute: RouteProps = {
+  path: "/pod-security-policies"
+};
 export const rolesRoute: RouteProps = {
   path: "/roles"
 };
+export const clusterRolesRoute: RouteProps = {
+  path: "/cluster-roles"
+};
 export const roleBindingsRoute: RouteProps = {
   path: "/role-bindings"
 };
-export const podSecurityPoliciesRoute: RouteProps = {
-  path: "/pod-security-policies"
+export const clusterRoleBindingsRoute: RouteProps = {
+  path: "/cluster-role-bindings"
 };
 
 export const usersManagementRoute: RouteProps = {
   path: [
     serviceAccountsRoute,
+    podSecurityPoliciesRoute,
     roleBindingsRoute,
+    clusterRoleBindingsRoute,
     rolesRoute,
-    podSecurityPoliciesRoute
+    clusterRolesRoute,
   ].map(route => route.path.toString())
 };
 
 // Route params
-export interface IServiceAccountsRouteParams {
+export interface ServiceAccountsRouteParams {
 }
 
-export interface IRoleBindingsRouteParams {
+export interface RoleBindingsRouteParams {
 }
 
-export interface IRolesRouteParams {
+export interface ClusterRoleBindingsRouteParams {
+}
+
+export interface RolesRouteParams {
+}
+
+export interface ClusterRolesRouteParams {
 }
 
 // URL-builders
 export const usersManagementURL = (params?: IURLParams) => serviceAccountsURL(params);
-export const serviceAccountsURL = buildURL<IServiceAccountsRouteParams>(serviceAccountsRoute.path);
-export const roleBindingsURL = buildURL<IRoleBindingsRouteParams>(roleBindingsRoute.path);
-export const rolesURL = buildURL<IRoleBindingsRouteParams>(rolesRoute.path);
+export const serviceAccountsURL = buildURL<ServiceAccountsRouteParams>(serviceAccountsRoute.path);
 export const podSecurityPoliciesURL = buildURL(podSecurityPoliciesRoute.path);
+export const roleBindingsURL = buildURL<RoleBindingsRouteParams>(roleBindingsRoute.path);
+export const clusterRoleBindingsURL = buildURL<ClusterRoleBindingsRouteParams>(clusterRoleBindingsRoute.path);
+export const rolesURL = buildURL<RoleBindingsRouteParams>(rolesRoute.path);
+export const clusterRolesURL = buildURL<ClusterRoleBindingsRouteParams>(clusterRolesRoute.path);
diff --git a/src/renderer/components/+user-management/user-management.tsx b/src/renderer/components/+user-management/user-management.tsx
index cb5c5837f3..892e400aab 100644
--- a/src/renderer/components/+user-management/user-management.tsx
+++ b/src/renderer/components/+user-management/user-management.tsx
@@ -20,15 +20,32 @@
  */
 
 import "./user-management.scss";
-import React from "react";
+
 import { observer } from "mobx-react";
-import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
-import { Roles } from "../+user-management-roles";
-import { RoleBindings } from "../+user-management-roles-bindings";
-import { ServiceAccounts } from "../+user-management-service-accounts";
-import { podSecurityPoliciesRoute, podSecurityPoliciesURL, roleBindingsRoute, roleBindingsURL, rolesRoute, rolesURL, serviceAccountsRoute, serviceAccountsURL } from "./user-management.route";
+import React from "react";
+
 import { PodSecurityPolicies } from "../+pod-security-policies";
 import { isAllowedResource } from "../../../common/rbac";
+import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
+import { ClusterRoles } from "./+cluster-roles";
+import { ClusterRoleBindings } from "./+cluster-roles-bindings";
+import { Roles } from "./+roles";
+import { RoleBindings } from "./+roles-bindings";
+import { ServiceAccounts } from "./+service-accounts";
+import {
+  clusterRoleBindingsRoute,
+  clusterRoleBindingsURL,
+  clusterRolesRoute,
+  clusterRolesURL,
+  podSecurityPoliciesRoute,
+  podSecurityPoliciesURL,
+  roleBindingsRoute,
+  roleBindingsURL,
+  rolesRoute,
+  rolesURL,
+  serviceAccountsRoute,
+  serviceAccountsURL,
+} from "./user-management.route";
 
 @observer
 export class UserManagement extends React.Component {
@@ -44,8 +61,16 @@ export class UserManagement extends React.Component {
       });
     }
 
-    if (isAllowedResource("rolebindings") || isAllowedResource("clusterrolebindings")) {
-      // TODO: seperate out these two pages
+    if (isAllowedResource("podsecuritypolicies")) {
+      tabRoutes.push({
+        title: "Pod Security Policies",
+        component: PodSecurityPolicies,
+        url: podSecurityPoliciesURL(),
+        routePath: podSecurityPoliciesRoute.path.toString(),
+      });
+    }
+
+    if (isAllowedResource("rolebindings")) {
       tabRoutes.push({
         title: "Role Bindings",
         component: RoleBindings,
@@ -54,8 +79,16 @@ export class UserManagement extends React.Component {
       });
     }
 
-    if (isAllowedResource("roles") || isAllowedResource("clusterroles")) {
-      // TODO: seperate out these two pages
+    if (isAllowedResource("clusterrolebindings")) {
+      tabRoutes.push({
+        title: "Cluster Role Bindings",
+        component: ClusterRoleBindings,
+        url: clusterRoleBindingsURL(),
+        routePath: clusterRoleBindingsRoute.path.toString(),
+      });
+    }
+
+    if (isAllowedResource("roles")) {
       tabRoutes.push({
         title: "Roles",
         component: Roles,
@@ -64,12 +97,12 @@ export class UserManagement extends React.Component {
       });
     }
 
-    if (isAllowedResource("podsecuritypolicies")) {
+    if (isAllowedResource("clusterroles")) {
       tabRoutes.push({
-        title: "Pod Security Policies",
-        component: PodSecurityPolicies,
-        url: podSecurityPoliciesURL(),
-        routePath: podSecurityPoliciesRoute.path.toString(),
+        title: "Cluster Roles",
+        component: ClusterRoles,
+        url: clusterRolesURL(),
+        routePath: clusterRolesRoute.path.toString(),
       });
     }
 
diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
index b4c15b89fd..4097b1d99b 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -29,7 +29,7 @@
   --unit: 8px;
   --padding: var(--unit);
   --margin: var(--unit);
-  --border-radius: 3px;
+  --border-radius: 5px;
   --font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
   --font-monospace: Lucida Console, Monaco, Consolas, monospace;
   --font-size-small: calc(1.5 * var(--unit));
diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx
index 89a04a58d3..32c654c148 100755
--- a/src/renderer/components/app.tsx
+++ b/src/renderer/components/app.tsx
@@ -20,57 +20,57 @@
  */
 import React from "react";
 import { observable, makeObservable } from "mobx";
+import { webFrame } from "electron";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Redirect, Route, Router, Switch } from "react-router";
-import { history } from "../navigation";
-import { Notifications } from "./notifications";
-import { NotFound } from "./+404";
-import { UserManagement } from "./+user-management/user-management";
-import { ConfirmDialog } from "./confirm-dialog";
-import { usersManagementRoute } from "./+user-management/user-management.route";
-import { clusterRoute, clusterURL } from "./+cluster";
-import { KubeConfigDialog } from "./kubeconfig-dialog/kubeconfig-dialog";
-import { Nodes, nodesRoute } from "./+nodes";
-import { Workloads, workloadsRoute, workloadsURL } from "./+workloads";
-import { Namespaces, namespacesRoute } from "./+namespaces";
-import { Network, networkRoute } from "./+network";
-import { Storage, storageRoute } from "./+storage";
-import { ClusterOverview } from "./+cluster/cluster-overview";
-import { Config, configRoute } from "./+config";
-import { Events } from "./+events/events";
-import { eventRoute } from "./+events";
-import { Apps, appsRoute } from "./+apps";
-import { KubeObjectDetails } from "./kube-object/kube-object-details";
-import { AddRoleBindingDialog } from "./+user-management-roles-bindings";
-import { DeploymentScaleDialog } from "./+workloads-deployments/deployment-scale-dialog";
-import { CronJobTriggerDialog } from "./+workloads-cronjobs/cronjob-trigger-dialog";
-import { CustomResources } from "./+custom-resources/custom-resources";
-import { crdRoute } from "./+custom-resources";
-import { isAllowedResource } from "../../common/rbac";
-import { MainLayout } from "./layout/main-layout";
-import { ErrorBoundary } from "./error-boundary";
-import { Terminal } from "./dock/terminal";
+import whatInput from "what-input";
+
+import { clusterSetFrameIdHandler } from "../../common/cluster-ipc";
 import { getHostedCluster, getHostedClusterId } from "../../common/cluster-store";
-import logger from "../../main/logger";
-import { webFrame } from "electron";
-import { clusterPageRegistry, getExtensionPageUrl } from "../../extensions/registries/page-registry";
-import { ExtensionLoader } from "../../extensions/extension-loader";
 import { appEventBus } from "../../common/event-bus";
 import { requestMain } from "../../common/ipc";
-import whatInput from "what-input";
-import { clusterSetFrameIdHandler } from "../../common/cluster-ipc";
+import { isAllowedResource } from "../../common/rbac";
+import { ExtensionLoader } from "../../extensions/extension-loader";
 import { ClusterPageMenuRegistration, clusterPageMenuRegistry } from "../../extensions/registries";
-import { TabLayout, TabLayoutRoute } from "./layout/tab-layout";
-import { StatefulSetScaleDialog } from "./+workloads-statefulsets/statefulset-scale-dialog";
-import { eventStore } from "./+events/event.store";
-import { nodesStore } from "./+nodes/nodes.store";
-import { podsStore } from "./+workloads-pods/pods.store";
+import { clusterPageRegistry, getExtensionPageUrl } from "../../extensions/registries/page-registry";
+import logger from "../../main/logger";
 import { kubeWatchApi } from "../api/kube-watch-api";
-import { ReplicaSetScaleDialog } from "./+workloads-replicasets/replicaset-scale-dialog";
-import { CommandContainer } from "./command-palette/command-container";
 import { KubeObjectStore } from "../kube-object.store";
-import { clusterContext } from "./context";
+import { history } from "../navigation";
+import { NotFound } from "./+404";
+import { Apps, appsRoute } from "./+apps";
+import { clusterRoute, clusterURL } from "./+cluster";
+import { ClusterOverview } from "./+cluster/cluster-overview";
+import { Config, configRoute } from "./+config";
+import { crdRoute } from "./+custom-resources";
+import { CustomResources } from "./+custom-resources/custom-resources";
+import { eventRoute } from "./+events";
+import { eventStore } from "./+events/event.store";
+import { Events } from "./+events/events";
+import { Namespaces, namespacesRoute } from "./+namespaces";
 import { namespaceStore } from "./+namespaces/namespace.store";
+import { Network, networkRoute } from "./+network";
+import { Nodes, nodesRoute } from "./+nodes";
+import { nodesStore } from "./+nodes/nodes.store";
+import { Storage, storageRoute } from "./+storage";
+import { UserManagement } from "./+user-management/user-management";
+import { usersManagementRoute } from "./+user-management/user-management.route";
+import { Workloads, workloadsRoute, workloadsURL } from "./+workloads";
+import { CronJobTriggerDialog } from "./+workloads-cronjobs/cronjob-trigger-dialog";
+import { DeploymentScaleDialog } from "./+workloads-deployments/deployment-scale-dialog";
+import { podsStore } from "./+workloads-pods/pods.store";
+import { ReplicaSetScaleDialog } from "./+workloads-replicasets/replicaset-scale-dialog";
+import { StatefulSetScaleDialog } from "./+workloads-statefulsets/statefulset-scale-dialog";
+import { CommandContainer } from "./command-palette/command-container";
+import { ConfirmDialog } from "./confirm-dialog";
+import { clusterContext } from "./context";
+import { Terminal } from "./dock/terminal";
+import { ErrorBoundary } from "./error-boundary";
+import { KubeObjectDetails } from "./kube-object/kube-object-details";
+import { KubeConfigDialog } from "./kubeconfig-dialog/kubeconfig-dialog";
+import { MainLayout } from "./layout/main-layout";
+import { TabLayout, TabLayoutRoute } from "./layout/tab-layout";
+import { Notifications } from "./notifications";
 
 @observer
 export class App extends React.Component {
@@ -199,7 +199,6 @@ export class App extends React.Component {
           <ConfirmDialog/>
           <KubeObjectDetails/>
           <KubeConfigDialog/>
-          <AddRoleBindingDialog/>
           <DeploymentScaleDialog/>
           <StatefulSetScaleDialog/>
           <ReplicaSetScaleDialog/>
diff --git a/src/renderer/components/editable-list/editable-list.scss b/src/renderer/components/editable-list/editable-list.scss
index 9bcd266da1..b30fdf7f57 100644
--- a/src/renderer/components/editable-list/editable-list.scss
+++ b/src/renderer/components/editable-list/editable-list.scss
@@ -23,7 +23,7 @@
   .el-contents {
     display: flex;
     flex-direction: column;
-    margin-top: $padding * 2;
+    margin: $padding 0px;
 
     .el-value-remove {
       .Icon {
@@ -35,7 +35,9 @@
       display: grid;
       grid-template-columns: 1fr auto;
       padding: $padding $padding * 2;
-      margin-bottom: 1px;
+      margin-bottom: $padding / 4;
+      backdrop-filter: brightness(0.75);
+      border-radius: var(--border-radius);
 
       :last-child {
         margin-bottom: unset;
@@ -46,4 +48,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/editable-list/editable-list.tsx b/src/renderer/components/editable-list/editable-list.tsx
index 47bfaa8fe5..ec31a2586e 100644
--- a/src/renderer/components/editable-list/editable-list.tsx
+++ b/src/renderer/components/editable-list/editable-list.tsx
@@ -21,11 +21,11 @@
 
 import "./editable-list.scss";
 
+import { observer } from "mobx-react";
 import React from "react";
+
 import { Icon } from "../icon";
 import { Input } from "../input";
-import { observable, makeObservable } from "mobx";
-import { observer } from "mobx-react";
 import { boundMethod } from "../../utils";
 
 export interface Props<T> {
@@ -47,20 +47,14 @@ const defaultProps: Partial<Props<any>> = {
 @observer
 export class EditableList<T> extends React.Component<Props<T>> {
   static defaultProps = defaultProps as Props<any>;
-  @observable currentNewItem = "";
-
-  constructor(props: Props<T>) {
-    super(props);
-    makeObservable(this);
-  }
 
   @boundMethod
-  onSubmit(val: string) {
+  onSubmit(val: string, evt: React.KeyboardEvent) {
     const { add } = this.props;
 
     if (val) {
+      evt.preventDefault();
       add(val);
-      this.currentNewItem = "";
     }
   }
 
@@ -71,17 +65,15 @@ export class EditableList<T> extends React.Component<Props<T>> {
       <div className="EditableList">
         <div className="el-header">
           <Input
-            theme="round-black"
-            value={this.currentNewItem}
+            theme="round"
             onSubmit={this.onSubmit}
             placeholder={placeholder}
-            onChange={val => this.currentNewItem = val}
           />
         </div>
         <div className="el-contents">
           {
             items.map((item, index) => (
-              <div key={`${item}${index}`} className="el-item Badge">
+              <div key={`${item}${index}`} className="el-item">
                 <div>{renderItem(item, index)}</div>
                 <div className="el-value-remove">
                   <Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} />
diff --git a/src/renderer/components/input/input.scss b/src/renderer/components/input/input.scss
index 224fec829c..97ad5c058a 100644
--- a/src/renderer/components/input/input.scss
+++ b/src/renderer/components/input/input.scss
@@ -48,7 +48,7 @@
     --flex-gap: #{$padding / 1.5};
 
     position: relative;
-    padding: $padding /4 * 3 0;
+    padding: $padding / 4 * 3 0;
     border-bottom: 1px solid $halfGray;
     line-height: 1;
 
@@ -110,23 +110,17 @@
   //- Themes
 
   &.theme {
-    &.round-black {
+    &.round {
       &.invalid.dirty {
         label {
           border-color: $colorSoftError;
         }
       }
-
       label {
-        background: var(--inputControlBackground);
-        border: 1px solid var(--inputControlBorder);
-        border-radius: 5px;
-        padding: $padding;
-        color: var(--textColorTertiary);
-
-        &:hover {
-          border-color: var(--inputControlHoverBorder);
-        }
+        border-radius: $radius;
+        border: 1px solid $halfGray;
+        color: inherit;
+        padding: $padding / 4 * 3 $padding / 4 * 3;
 
         &:focus-within {
           border-color: $colorInfo;
@@ -136,6 +130,18 @@
           display: none;
         }
       }
+      &.black {
+        label {
+          background: var(--inputControlBackground);
+          border-color: var(--inputControlBorder);
+          color: var(--textColorTertiary);
+          padding: $padding;
+
+          &:hover {
+            border-color: var(--inputControlHoverBorder);
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/renderer/components/input/input.tsx b/src/renderer/components/input/input.tsx
index 1d0700b846..5de07cb856 100644
--- a/src/renderer/components/input/input.tsx
+++ b/src/renderer/components/input/input.tsx
@@ -41,7 +41,7 @@ type InputElement = HTMLInputElement | HTMLTextAreaElement;
 type InputElementProps = InputHTMLAttributes<InputElement> & TextareaHTMLAttributes<InputElement> & DOMAttributes<InputElement>;
 
 export type InputProps<T = string> = Omit<InputElementProps, "onChange" | "onSubmit"> & {
-  theme?: "round-black";
+  theme?: "round-black" | "round";
   className?: string;
   value?: T;
   autoSelectOnFocus?: boolean
@@ -55,7 +55,7 @@ export type InputProps<T = string> = Omit<InputElementProps, "onChange" | "onSub
   contentRight?: string | React.ReactNode; // Any component of string goes after iconRight
   validators?: InputValidator | InputValidator[];
   onChange?(value: T, evt: React.ChangeEvent<InputElement>): void;
-  onSubmit?(value: T): void;
+  onSubmit?(value: T, evt: React.KeyboardEvent<InputElement>): void;
 };
 
 interface State {
@@ -90,7 +90,7 @@ export class Input extends React.Component<InputProps, State> {
     return this.state.valid;
   }
 
-  setValue(value: string) {
+  setValue(value = "") {
     if (value !== this.getValue()) {
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(this.input.constructor.prototype, "value").set;
 
@@ -236,16 +236,15 @@ export class Input extends React.Component<InputProps, State> {
   }
 
   @boundMethod
-  onChange(evt: React.ChangeEvent<any>) {
-    if (this.props.onChange) {
-      this.props.onChange(evt.currentTarget.value, evt);
-    }
-
+  onChange(evt: React.ChangeEvent<InputElement>) {
+    this.props.onChange?.(evt.currentTarget.value, evt);
     this.validate();
     this.autoFitHeight();
 
     // mark input as dirty for the first time only onBlur() to avoid immediate error-state show when start typing
-    if (!this.state.dirty) this.setState({ dirtyOnBlur: true });
+    if (!this.state.dirty) {
+      this.setState({ dirtyOnBlur: true });
+    }
 
     // re-render component when used as uncontrolled input
     // when used @defaultValue instead of @value changing real input.value doesn't call render()
@@ -255,17 +254,19 @@ export class Input extends React.Component<InputProps, State> {
   }
 
   @boundMethod
-  onKeyDown(evt: React.KeyboardEvent<any>) {
+  onKeyDown(evt: React.KeyboardEvent<InputElement>) {
     const modified = evt.shiftKey || evt.metaKey || evt.altKey || evt.ctrlKey;
 
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(evt);
-    }
+    this.props.onKeyDown?.(evt);
 
     switch (evt.key) {
       case "Enter":
         if (this.props.onSubmit && !modified && !evt.repeat && this.isValid) {
-          this.props.onSubmit(this.getValue());
+          this.props.onSubmit(this.getValue(), evt);
+
+          if (this.isUncontrolled) {
+            this.setValue();
+          }
         }
         break;
     }
@@ -303,6 +304,20 @@ export class Input extends React.Component<InputProps, State> {
     }
   }
 
+  get themeSelection(): Record<string, boolean> {
+    const { theme } = this.props;
+
+    if (!theme) {
+      return {};
+    }
+
+    return {
+      theme: true,
+      round: true,
+      black: theme === "round-black",
+    };
+  }
+
   @boundMethod
   bindRef(elem: InputElement) {
     this.input = elem;
@@ -318,7 +333,7 @@ export class Input extends React.Component<InputProps, State> {
     const { focused, dirty, valid, validating, errors } = this.state;
 
     const className = cssNames("Input", this.props.className, {
-      [`theme ${theme}`]: theme,
+      ...this.themeSelection,
       focused,
       disabled,
       invalid: !valid,
diff --git a/src/renderer/components/kube-object/kube-object-details.tsx b/src/renderer/components/kube-object/kube-object-details.tsx
index 217c7c25c8..46e659b197 100644
--- a/src/renderer/components/kube-object/kube-object-details.tsx
+++ b/src/renderer/components/kube-object/kube-object-details.tsx
@@ -33,6 +33,7 @@ import { crdStore } from "../+custom-resources/crd.store";
 import { CrdResourceDetails } from "../+custom-resources";
 import { KubeObjectMenu } from "./kube-object-menu";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import type { CustomResourceDefinition } from "../../api/endpoints";
 
 /**
  * Used to store `object.selfLink` to show more info about resource in the details panel.
@@ -99,11 +100,7 @@ export class KubeObjectDetails extends React.Component {
   }
 
   @computed get object() {
-    const store = apiManager.getStore(this.path);
-
-    if (store) {
-      return store.getByPath(this.path);
-    }
+    return apiManager.getStore(this.path)?.getByPath(this.path);
   }
 
   @computed get isCrdInstance() {
@@ -151,7 +148,7 @@ export class KubeObjectDetails extends React.Component {
       });
 
       if (isCrdInstance && details.length === 0) {
-        details.push(<CrdResourceDetails object={object}/>);
+        details.push(<CrdResourceDetails object={object as CustomResourceDefinition}/>);
       }
     }
 
diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss
index 55fddec850..286f70c140 100644
--- a/src/renderer/components/select/select.scss
+++ b/src/renderer/components/select/select.scss
@@ -46,16 +46,15 @@ html {
     }
 
     &__control {
-      border: none;
+      border: solid 1px $halfGray;
       border-radius: $radius;
       background: var(--select-menu-bgc);
       min-height: 0;
-      box-shadow: 0 0 0 1px $halfGray;
       cursor: pointer;
       line-height: 1;
 
       &--is-focused {
-        box-shadow: 0 0 0 1px $primary;
+        border-color: $primary;
       }
     }
 
@@ -90,7 +89,7 @@ html {
 
     &__menu {
       background: var(--select-menu-bgc);
-      box-shadow: inset 0 0 0 1px var(--select-menu-border-color);
+      border-color: var(--select-menu-border-color);
       width: max-content;
       min-width: 100%;
 
@@ -171,7 +170,7 @@ html {
       .Select {
         &__multi-value {
           background: none;
-          box-shadow: 0 0 0 1px $textColorSecondary;
+          border-color: $textColorSecondary;
         }
 
         &__option {
@@ -196,7 +195,7 @@ html {
 
     &.theme-outlined {
       .Select__control {
-        box-shadow: 0 0 0 1px $colorVague;
+        border-color: $colorVague;
         color: $primary;
 
         .Select__value-container {
@@ -212,23 +211,23 @@ html {
     &.theme-lens {
       :hover {
         &.Select__control {
-          box-shadow: 0 0 0 1px var(--inputControlHoverBorder);
+          border-color: var(--inputControlHoverBorder);
         }
       }
 
       :focus-within {
         &.Select__control {
-          box-shadow: 0 0 0 1px $colorInfo;
+          border-color: $colorInfo;
         }
       }
 
       &.Select__menu {
-        box-shadow: inset 0 0 0 1px var(--inputControlBorder);
+        border-color: var(--inputControlBorder);
       }
 
       .Select {
         &__control {
-          box-shadow: 0 0 0 1px var(--inputControlBorder);
+          border-color: var(--inputControlBorder);
           background: var(--inputControlBackground);
           border-radius: 5px;
         }
diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx
index 9dd5a61798..af13fecaae 100644
--- a/src/renderer/components/select/select.tsx
+++ b/src/renderer/components/select/select.tsx
@@ -26,10 +26,11 @@ import "./select.scss";
 import React, { ReactNode } from "react";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { boundMethod, cssNames } from "../../utils";
 import ReactSelect, { ActionMeta, components, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
 import Creatable, { CreatableProps } from "react-select/creatable";
+
 import { ThemeStore } from "../../theme.store";
+import { boundMethod, cssNames } from "../../utils";
 
 const { Menu } = components;
 
@@ -65,8 +66,10 @@ export class Select extends React.Component<SelectProps> {
     makeObservable(this);
   }
 
-  @computed get theme() {
-    return this.props.themeName || ThemeStore.getInstance().activeTheme.type;
+  @computed get themeClass() {
+    const themeName = this.props.themeName || ThemeStore.getInstance().activeTheme.type;
+
+    return `theme-${themeName}`;
   }
 
   private styles: Styles<OptionTypeBase, boolean> = {
@@ -128,7 +131,6 @@ export class Select extends React.Component<SelectProps> {
       className, menuClass, isCreatable, autoConvertOptions,
       value, options, components = {}, ...props
     } = this.props;
-    const themeClass = `theme-${this.theme}`;
     const WrappedMenu = components.Menu ?? Menu;
 
     const selectProps: Partial<SelectProps> = {
@@ -138,14 +140,14 @@ export class Select extends React.Component<SelectProps> {
       options: autoConvertOptions ? this.options : options,
       onChange: this.onChange,
       onKeyDown: this.onKeyDown,
-      className: cssNames("Select", themeClass, className),
+      className: cssNames("Select", this.themeClass, className),
       classNamePrefix: "Select",
       components: {
         ...components,
         Menu: props => (
           <WrappedMenu
             {...props}
-            className={cssNames(menuClass, themeClass, props.className)}
+            className={cssNames(menuClass, this.themeClass, props.className)}
           />
         ),
       }
diff --git a/src/renderer/kube-object.store.ts b/src/renderer/kube-object.store.ts
index b7686d168b..ec26f0e2dc 100644
--- a/src/renderer/kube-object.store.ts
+++ b/src/renderer/kube-object.store.ts
@@ -22,7 +22,7 @@
 import type { ClusterContext } from "./components/context";
 
 import { action, computed, makeObservable, observable, reaction, when } from "mobx";
-import { autoBind, bifurcateArray, noop, rejectPromiseBy } from "./utils";
+import { autoBind, noop, rejectPromiseBy } from "./utils";
 import { KubeObject, KubeStatus } from "./api/kube-object";
 import type { IKubeWatchEvent } from "./api/kube-watch-api";
 import { ItemStore } from "./item.store";
@@ -306,51 +306,31 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
     });
   }
 
-  getSubscribeApis(): KubeApi[] {
-    return [this.api];
-  }
-
-  subscribe(apis = this.getSubscribeApis()) {
+  subscribe() {
     const abortController = new AbortController();
-    const [clusterScopedApis, namespaceScopedApis] = bifurcateArray(apis, api => api.isNamespaced);
 
-    for (const api of namespaceScopedApis) {
-      const store = apiManager.getStore(api);
-
-      // This waits for the context and namespaces to be ready or fails fast if the disposer is called
-      Promise.race([rejectPromiseBy(abortController.signal), Promise.all([store.contextReady, store.namespacesReady])])
+    if (this.api.isNamespaced) {
+      Promise.race([rejectPromiseBy(abortController.signal), Promise.all([this.contextReady, this.namespacesReady])])
         .then(() => {
-          if (
-            store.context.cluster.isGlobalWatchEnabled
-            && store.loadedNamespaces.length === 0
-          ) {
-            return store.watchNamespace(api, "", abortController);
+          if (this.context.cluster.isGlobalWatchEnabled && this.loadedNamespaces.length === 0) {
+            return this.watchNamespace("", abortController);
           }
 
           for (const namespace of this.loadedNamespaces) {
-            store.watchNamespace(api, namespace, abortController);
+            this.watchNamespace(namespace, abortController);
           }
         })
         .catch(noop); // ignore DOMExceptions
+    } else {
+      this.watchNamespace("", abortController);
     }
 
-    for (const api of clusterScopedApis) {
-      /**
-       * if the api is cluster scoped then we will never assign to `loadedNamespaces`
-       * and thus `store.namespacesReady` will never resolve. Futhermore, we don't care
-       * about watching namespaces.
-       */
-      apiManager.getStore(api).watchNamespace(api, "", abortController);
-    }
-
-    return () => {
-      abortController.abort();
-    };
+    return () => abortController.abort();
   }
 
-  private watchNamespace(api: KubeApi<T>, namespace: string, abortController: AbortController) {
+  private watchNamespace(namespace: string, abortController: AbortController) {
     let timedRetry: NodeJS.Timeout;
-    const watch = () => api.watch({
+    const watch = () => this.api.watch({
       namespace,
       abortController,
       callback