diff --git a/extensions/survey/src/survey-preferences-store.ts b/extensions/survey/src/survey-preferences-store.ts
index eda7cf459c..27b42dd869 100644
--- a/extensions/survey/src/survey-preferences-store.ts
+++ b/extensions/survey/src/survey-preferences-store.ts
@@ -1,5 +1,5 @@
 import { Store } from "@k8slens/extensions";
-import { observable, toJS, when } from "mobx";
+import { observable, toJS, when, makeObservable } from "mobx";
 
 export type SurveyPreferencesModel = {
   enabled: boolean;
@@ -18,6 +18,7 @@ export class SurveyPreferencesStore extends Store.ExtensionStore<SurveyPreferenc
         enabled: true
       }
     });
+    makeObservable(this);
   }
 
   protected fromStore({ enabled }: SurveyPreferencesModel): void {
diff --git a/extensions/telemetry/src/telemetry-preferences-store.ts b/extensions/telemetry/src/telemetry-preferences-store.ts
index 747e113e72..3a2f863179 100644
--- a/extensions/telemetry/src/telemetry-preferences-store.ts
+++ b/extensions/telemetry/src/telemetry-preferences-store.ts
@@ -1,5 +1,5 @@
 import { Store } from "@k8slens/extensions";
-import { observable, toJS } from "mobx";
+import { observable, toJS, makeObservable } from "mobx";
 
 export type TelemetryPreferencesModel = {
   enabled: boolean;
@@ -16,6 +16,7 @@ export class TelemetryPreferencesStore extends Store.ExtensionStore<TelemetryPre
         enabled: true
       }
     });
+    makeObservable(this);
   }
 
   protected fromStore({ enabled }: TelemetryPreferencesModel): void {
diff --git a/src/common/base-store.ts b/src/common/base-store.ts
index 91d3ef8312..923c1f5052 100644
--- a/src/common/base-store.ts
+++ b/src/common/base-store.ts
@@ -2,7 +2,7 @@ import path from "path";
 import Config from "conf";
 import { Options as ConfOptions } from "conf/dist/source/types";
 import { app, ipcMain, IpcMainEvent, ipcRenderer, IpcRendererEvent, remote } from "electron";
-import { IReactionOptions, observable, reaction, runInAction, when } from "mobx";
+import { IReactionOptions, observable, reaction, runInAction, when, makeObservable } from "mobx";
 import Singleton from "./utils/singleton";
 import { getAppVersion } from "./utils/app-version";
 import logger from "../main/logger";
@@ -27,6 +27,7 @@ export abstract class BaseStore<T = any> extends Singleton {
 
   protected constructor(protected params: BaseStoreParams) {
     super();
+    makeObservable(this);
     this.params = {
       autoLoad: false,
       syncEnabled: true,
diff --git a/src/common/catalog-category-registry.ts b/src/common/catalog-category-registry.ts
index d8d65564de..27bbffc41f 100644
--- a/src/common/catalog-category-registry.ts
+++ b/src/common/catalog-category-registry.ts
@@ -1,9 +1,13 @@
-import { action, computed, observable, toJS } from "mobx";
+import { action, computed, observable, toJS, makeObservable } from "mobx";
 import { CatalogCategory, CatalogEntityData } from "./catalog-entity";
 
 export class CatalogCategoryRegistry {
   @observable protected categories: CatalogCategory[] = [];
 
+  constructor() {
+    makeObservable(this);
+  }
+
   @action add(category: CatalogCategory) {
     this.categories.push(category);
   }
diff --git a/src/common/catalog-entities/kubernetes-cluster.ts b/src/common/catalog-entities/kubernetes-cluster.ts
index 78b99d3f5c..df01b22b03 100644
--- a/src/common/catalog-entities/kubernetes-cluster.ts
+++ b/src/common/catalog-entities/kubernetes-cluster.ts
@@ -1,5 +1,5 @@
 import { EventEmitter } from "events";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { catalogCategoryRegistry } from "../catalog-category-registry";
 import { CatalogCategory, CatalogEntity, CatalogEntityActionContext, CatalogEntityContextMenuContext, CatalogEntityData, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog-entity";
 import { clusterDisconnectHandler } from "../cluster-ipc";
@@ -23,6 +23,7 @@ export class KubernetesCluster implements CatalogEntity {
   @observable public spec: KubernetesClusterSpec;
 
   constructor(data: CatalogEntityData) {
+    makeObservable(this);
     this.metadata = data.metadata;
     this.status = data.status as KubernetesClusterStatus;
     this.spec = data.spec as KubernetesClusterSpec;
diff --git a/src/common/catalog-entities/web-link.ts b/src/common/catalog-entities/web-link.ts
index db52fe0eb6..86a1a991c2 100644
--- a/src/common/catalog-entities/web-link.ts
+++ b/src/common/catalog-entities/web-link.ts
@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { CatalogCategory, CatalogEntity, CatalogEntityData, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog-entity";
 import { catalogCategoryRegistry } from "../catalog-category-registry";
 
@@ -18,6 +18,7 @@ export class WebLink implements CatalogEntity {
   @observable public spec: WebLinkSpec;
 
   constructor(data: CatalogEntityData) {
+    makeObservable(this);
     this.metadata = data.metadata;
     this.status = data.status as WebLinkStatus;
     this.spec = data.spec as WebLinkSpec;
diff --git a/src/common/catalog-entity-registry.ts b/src/common/catalog-entity-registry.ts
index 28afa55bac..0080ceb4d5 100644
--- a/src/common/catalog-entity-registry.ts
+++ b/src/common/catalog-entity-registry.ts
@@ -1,9 +1,13 @@
-import { action, computed, observable, IObservableArray } from "mobx";
+import { action, computed, observable, IObservableArray, makeObservable } from "mobx";
 import { CatalogEntity } from "./catalog-entity";
 
 export class CatalogEntityRegistry {
   protected sources = observable.map<string, IObservableArray<CatalogEntity>>([], { deep: true });
 
+  constructor() {
+    makeObservable(this);
+  }
+
   @action addSource(id: string, source: IObservableArray<CatalogEntity>) {
     this.sources.set(id, source);
   }
diff --git a/src/common/cluster-store.ts b/src/common/cluster-store.ts
index f50dea67cb..65512f0504 100644
--- a/src/common/cluster-store.ts
+++ b/src/common/cluster-store.ts
@@ -1,7 +1,7 @@
 import path from "path";
 import { app, ipcRenderer, remote, webFrame } from "electron";
 import { unlink } from "fs-extra";
-import { action, comparer, computed, observable, reaction, toJS } from "mobx";
+import { action, comparer, computed, observable, reaction, toJS, makeObservable } from "mobx";
 import { BaseStore } from "./base-store";
 import { Cluster, ClusterState } from "../main/cluster";
 import migrations from "../migrations/cluster-store";
@@ -122,6 +122,8 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
       migrations,
     });
 
+    makeObservable(this);
+
     this.pushStateToViewsAutomatically();
   }
 
diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts
index 11f4bfc301..b7fd656f84 100644
--- a/src/common/hotbar-store.ts
+++ b/src/common/hotbar-store.ts
@@ -1,4 +1,4 @@
-import { action, comparer, observable, toJS } from "mobx";
+import { action, comparer, observable, toJS, makeObservable } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/hotbar-store";
 
@@ -32,6 +32,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
       },
       migrations,
     });
+    makeObservable(this);
   }
 
   @action protected async fromStore(data: Partial<HotbarStoreModel> = {}) {
diff --git a/src/common/libs-config.ts b/src/common/libs-config.ts
index d0d304721e..2910e5d0ba 100644
--- a/src/common/libs-config.ts
+++ b/src/common/libs-config.ts
@@ -5,7 +5,8 @@ import { enableMapSet, setAutoFreeze } from "immer";
 
 // Mobx
 configure({
-  enforceActions: "never", // allows to skip using @action when class-method updates some state
+  isolateGlobalState: true, // might allow to use different versions of mobx in extensions
+  enforceActions: "never", // skip usage of @action for class methods
 });
 
 // Immer
diff --git a/src/common/search-store.ts b/src/common/search-store.ts
index c4e34ba5a2..01d38bce9d 100644
--- a/src/common/search-store.ts
+++ b/src/common/search-store.ts
@@ -1,4 +1,4 @@
-import { action, computed, observable,reaction } from "mobx";
+import { action, computed, observable, reaction, makeObservable } from "mobx";
 import { dockStore } from "../renderer/components/dock/dock.store";
 import { autobind } from "../renderer/utils";
 
@@ -33,6 +33,7 @@ export class SearchStore {
   @observable activeOverlayIndex = -1;
 
   constructor() {
+    makeObservable(this);
     reaction(() => dockStore.selectedTabId, () => {
       searchStore.reset();
     });
diff --git a/src/common/user-store.ts b/src/common/user-store.ts
index ad2ff5de5c..81b218c9d2 100644
--- a/src/common/user-store.ts
+++ b/src/common/user-store.ts
@@ -2,7 +2,7 @@ import type { ThemeId } from "../renderer/theme.store";
 import { app, remote } from "electron";
 import semver from "semver";
 import { readFile } from "fs-extra";
-import { action, observable, reaction, toJS } from "mobx";
+import { action, observable, reaction, toJS, makeObservable } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/user-store";
 import { getAppVersion } from "./utils/app-version";
@@ -42,6 +42,8 @@ export class UserStore extends BaseStore<UserStoreModel> {
       migrations,
     });
 
+    makeObservable(this);
+
     this.handleOnLoad();
   }
 
diff --git a/src/extensions/cluster-feature.ts b/src/extensions/cluster-feature.ts
index ad3a258b0e..68c4aa9423 100644
--- a/src/extensions/cluster-feature.ts
+++ b/src/extensions/cluster-feature.ts
@@ -1,7 +1,7 @@
 import fs from "fs";
 import path from "path";
 import hb from "handlebars";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { ResourceApplier } from "../main/resource-applier";
 import { KubernetesCluster } from "./core-api/stores";
 import logger from "../main/logger";
@@ -22,7 +22,6 @@ export interface ClusterFeatureStatus {
 }
 
 export abstract class ClusterFeature {
-
   /**
    * this field sets the template parameters that are to be applied to any templated kubernetes resources that are to be installed for the feature.
    * See the renderTemplates() method for more details
@@ -75,6 +74,10 @@ export abstract class ClusterFeature {
    */
   abstract updateStatus(cluster: KubernetesCluster): Promise<ClusterFeatureStatus>;
 
+  constructor() {
+    makeObservable(this);
+  }
+
   /**
    * this is a helper method that conveniently applies kubernetes resources to the cluster.
    *
diff --git a/src/extensions/core-api/catalog.ts b/src/extensions/core-api/catalog.ts
index a1dfcb41d0..e048f4bd76 100644
--- a/src/extensions/core-api/catalog.ts
+++ b/src/extensions/core-api/catalog.ts
@@ -1,10 +1,8 @@
-
-import { computed } from "mobx";
 import { CatalogEntity } from "../../common/catalog-entity";
 import { catalogEntityRegistry as registry } from "../../common/catalog-entity-registry";
 
 export class CatalogEntityRegistry {
-  @computed getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string): T[] {
+  getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string): T[] {
     return registry.getItemsForApiKind<T>(apiVersion, kind);
   }
 }
diff --git a/src/extensions/extension-discovery.ts b/src/extensions/extension-discovery.ts
index a963918ffc..4379d4e4f0 100644
--- a/src/extensions/extension-discovery.ts
+++ b/src/extensions/extension-discovery.ts
@@ -2,7 +2,7 @@ import { watch } from "chokidar";
 import { ipcRenderer } from "electron";
 import { EventEmitter } from "events";
 import fs from "fs-extra";
-import { observable, reaction, toJS, when } from "mobx";
+import { observable, reaction, toJS, when, makeObservable } from "mobx";
 import os from "os";
 import path from "path";
 import { broadcastMessage, handleRequest, requestMain, subscribeToBroadcast } from "../common/ipc";
@@ -67,6 +67,7 @@ export class ExtensionDiscovery {
   public events: EventEmitter;
 
   constructor() {
+    makeObservable(this);
     this.events = new EventEmitter();
   }
 
@@ -351,7 +352,7 @@ export class ExtensionDiscovery {
     const userExtensions = await this.loadFromFolder(this.localFolderPath);
 
     for (const extension of userExtensions) {
-      if (await fs.pathExists(extension.manifestPath) === false) {
+      if ((await fs.pathExists(extension.manifestPath)) === false) {
         await this.installPackage(extension.absolutePath);
       }
     }
diff --git a/src/extensions/extension-loader.ts b/src/extensions/extension-loader.ts
index 26dee5aa05..c1c6e4c240 100644
--- a/src/extensions/extension-loader.ts
+++ b/src/extensions/extension-loader.ts
@@ -1,7 +1,7 @@
 import { app, ipcRenderer, remote } from "electron";
 import { EventEmitter } from "events";
 import { isEqual } from "lodash";
-import { action, computed, observable, reaction, toJS, when } from "mobx";
+import { action, computed, observable, reaction, toJS, when, makeObservable } from "mobx";
 import path from "path";
 import { getHostedCluster } from "../common/cluster-store";
 import { broadcastMessage, handleRequest, requestMain, subscribeToBroadcast } from "../common/ipc";
@@ -40,6 +40,10 @@ export class ExtensionLoader {
   @observable isLoaded = false;
   whenLoaded = when(() => this.isLoaded);
 
+  constructor() {
+    makeObservable(this);
+  }
+
   @computed get userExtensions(): Map<LensExtensionId, InstalledExtension> {
     const extensions = toJS(this.extensions);
 
@@ -234,7 +238,7 @@ export class ExtensionLoader {
     const cluster = getHostedCluster();
 
     this.autoInitExtensions(async (extension: LensRendererExtension) => {
-      if (await extension.isEnabledForCluster(cluster) === false) {
+      if ((await extension.isEnabledForCluster(cluster)) === false) {
         return [];
       }
 
diff --git a/src/extensions/extensions-store.ts b/src/extensions/extensions-store.ts
index d0852779e5..7967de61d8 100644
--- a/src/extensions/extensions-store.ts
+++ b/src/extensions/extensions-store.ts
@@ -1,6 +1,6 @@
 import type { LensExtensionId } from "./lens-extension";
 import { BaseStore } from "../common/base-store";
-import { action, computed, observable, toJS } from "mobx";
+import { action, computed, observable, toJS, makeObservable } from "mobx";
 
 export interface LensExtensionsStoreModel {
   extensions: Record<LensExtensionId, LensExtensionState>;
@@ -16,6 +16,7 @@ export class ExtensionsStore extends BaseStore<LensExtensionsStoreModel> {
     super({
       configName: "lens-extensions",
     });
+    makeObservable(this);
   }
 
   @computed
diff --git a/src/extensions/lens-extension.ts b/src/extensions/lens-extension.ts
index a00e289e17..980c393878 100644
--- a/src/extensions/lens-extension.ts
+++ b/src/extensions/lens-extension.ts
@@ -1,5 +1,5 @@
 import type { InstalledExtension } from "./extension-discovery";
-import { action, observable, reaction } from "mobx";
+import { action, observable, reaction, makeObservable } from "mobx";
 import { filesystemProvisionerStore } from "../main/extension-filesystem";
 import logger from "../main/logger";
 import { ProtocolHandlerRegistration } from "./registries/protocol-handler-registry";
@@ -27,6 +27,7 @@ export class LensExtension {
   @observable private isEnabled = false;
 
   constructor({ id, manifest, manifestPath, isBundled }: InstalledExtension) {
+    makeObservable(this);
     this.id = id;
     this.manifest = manifest;
     this.manifestPath = manifestPath;
diff --git a/src/extensions/registries/base-registry.ts b/src/extensions/registries/base-registry.ts
index 052a483cbd..6bc4894e63 100644
--- a/src/extensions/registries/base-registry.ts
+++ b/src/extensions/registries/base-registry.ts
@@ -1,10 +1,14 @@
 // Base class for extensions-api registries
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { LensExtension } from "../lens-extension";
 
 export class BaseRegistry<T, I = T> {
   private items = observable.map<T, I>();
 
+  constructor() {
+    makeObservable(this);
+  }
+
   getItems(): I[] {
     return Array.from(this.items.values());
   }
diff --git a/src/extensions/registries/command-registry.ts b/src/extensions/registries/command-registry.ts
index fdb76487e7..df09469112 100644
--- a/src/extensions/registries/command-registry.ts
+++ b/src/extensions/registries/command-registry.ts
@@ -1,7 +1,7 @@
 // Extensions API -> Commands
 
 import { BaseRegistry } from "./base-registry";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { LensExtension } from "../lens-extension";
 import { CatalogEntity } from "../../common/catalog-entity";
 
@@ -20,6 +20,12 @@ export interface CommandRegistration {
 export class CommandRegistry extends BaseRegistry<CommandRegistration> {
   @observable activeEntity: CatalogEntity;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   add(items: CommandRegistration | CommandRegistration[], extension?: LensExtension) {
     const itemArray = [items].flat();
 
diff --git a/src/extensions/registries/page-menu-registry.ts b/src/extensions/registries/page-menu-registry.ts
index 8fe5b68b3b..b9f8c42ac0 100644
--- a/src/extensions/registries/page-menu-registry.ts
+++ b/src/extensions/registries/page-menu-registry.ts
@@ -2,7 +2,7 @@
 import type { IconProps } from "../../renderer/components/icon";
 import type React from "react";
 import type { PageTarget, RegisteredPage } from "./page-registry";
-import { action } from "mobx";
+import { action, makeObservable } from "mobx";
 import { BaseRegistry } from "./base-registry";
 import { LensExtension } from "../lens-extension";
 
@@ -22,7 +22,12 @@ export interface PageMenuComponents {
 }
 
 export class PageMenuRegistry<T extends PageMenuRegistration> extends BaseRegistry<T> {
-  @action
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   add(items: T[], ext: LensExtension) {
     const normalizedItems = items.map(menuItem => {
       menuItem.target = {
diff --git a/src/main/cluster-manager.ts b/src/main/cluster-manager.ts
index 4a484fdff2..548a5261be 100644
--- a/src/main/cluster-manager.ts
+++ b/src/main/cluster-manager.ts
@@ -1,7 +1,7 @@
 import "../common/cluster-ipc";
 import type http from "http";
 import { ipcMain } from "electron";
-import { action, autorun, observable, reaction, toJS } from "mobx";
+import { action, autorun, observable, reaction, toJS, makeObservable } from "mobx";
 import { clusterStore, getClusterIdFromHost } from "../common/cluster-store";
 import { Cluster } from "./cluster";
 import logger from "./logger";
@@ -19,6 +19,8 @@ export class ClusterManager extends Singleton {
   constructor(public readonly port: number) {
     super();
 
+    makeObservable(this);
+
     catalogEntityRegistry.addSource("lens:kubernetes-clusters", this.catalogSource);
     // auto-init clusters
     reaction(() => clusterStore.enabledClustersList, (clusters) => {
diff --git a/src/main/cluster.ts b/src/main/cluster.ts
index c1485d6337..77956fd9d5 100644
--- a/src/main/cluster.ts
+++ b/src/main/cluster.ts
@@ -1,9 +1,9 @@
 import { ipcMain } from "electron";
 import type { ClusterId, ClusterMetadata, ClusterModel, ClusterPreferences, ClusterPrometheusPreferences } from "../common/cluster-store";
 import type { IMetricsReqParams } from "../renderer/api/endpoints/metrics.api";
-import { action, comparer, computed, observable, reaction, toJS, when } from "mobx";
+import { action, comparer, computed, makeObservable, observable, reaction, toJS, when } from "mobx";
 import { apiKubePrefix } from "../common/vars";
-import { broadcastMessage, InvalidKubeconfigChannel, ClusterListNamespaceForbiddenChannel } from "../common/ipc";
+import { broadcastMessage, ClusterListNamespaceForbiddenChannel, InvalidKubeconfigChannel } from "../common/ipc";
 import { ContextHandler } from "./context-handler";
 import { AuthorizationV1Api, CoreV1Api, HttpError, KubeConfig, V1ResourceAttributes } from "@kubernetes/client-node";
 import { Kubectl } from "./kubectl";
@@ -251,16 +251,17 @@ export class Cluster implements ClusterModel, ClusterState {
   }
 
   constructor(model: ClusterModel) {
+    makeObservable(this);
     this.updateModel(model);
 
     try {
       const kubeconfig = this.getKubeconfig();
 
-      validateKubeConfig(kubeconfig, this.contextName, { validateCluster: true, validateUser: false, validateExec: false});
+      validateKubeConfig(kubeconfig, this.contextName, { validateCluster: true, validateUser: false, validateExec: false });
       this.apiUrl = kubeconfig.getCluster(kubeconfig.getContextObject(this.contextName).cluster).server;
-    } catch(err) {
+    } catch (err) {
       logger.error(err);
-      logger.error(`[CLUSTER] Failed to load kubeconfig for the cluster '${this.name || this.contextName}' (context: ${this.contextName}, kubeconfig: ${this.kubeConfigPath}).`);
+      logger.error(`[CLUSTER] Failed to load kubeconfig for the cluster '${this.name || this.contextName}' (context: ${this.contextName}, kubeconfig: ${this.kubeConfigPath}).`);
       broadcastMessage(InvalidKubeconfigChannel, model.id);
     }
   }
diff --git a/src/main/extension-filesystem.ts b/src/main/extension-filesystem.ts
index 311369da86..945b866ab5 100644
--- a/src/main/extension-filesystem.ts
+++ b/src/main/extension-filesystem.ts
@@ -2,7 +2,7 @@ import { randomBytes } from "crypto";
 import { SHA256 } from "crypto-js";
 import { app, remote } from "electron";
 import fse from "fs-extra";
-import { action, observable, toJS } from "mobx";
+import { action, observable, toJS, makeObservable } from "mobx";
 import path from "path";
 import { BaseStore } from "../common/base-store";
 import { LensExtensionId } from "../extensions/lens-extension";
@@ -19,6 +19,7 @@ export class FilesystemProvisionerStore extends BaseStore<FSProvisionModel> {
       configName: "lens-filesystem-provisioner-store",
       accessPropertiesByDotNotation: false, // To make dots safe in cluster context names
     });
+    makeObservable(this);
   }
 
   /**
diff --git a/src/main/index.ts b/src/main/index.ts
index 652b28338c..4a5208903c 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,7 +1,7 @@
 // Main process
 
 import "../common/system-ca";
-import "../common/libs-config"
+import "../common/libs-config";
 import "../common/prometheus-providers";
 import * as Mobx from "mobx";
 import * as LensExtensions from "../extensions/core-api";
diff --git a/src/main/protocol-handler/router.ts b/src/main/protocol-handler/router.ts
index 20962372b2..73402ad6ab 100644
--- a/src/main/protocol-handler/router.ts
+++ b/src/main/protocol-handler/router.ts
@@ -3,7 +3,7 @@ import * as proto from "../../common/protocol-handler";
 import Url from "url-parse";
 import { LensExtension } from "../../extensions/lens-extension";
 import { broadcastMessage } from "../../common/ipc";
-import { observable, when } from "mobx";
+import { observable, when, makeObservable } from "mobx";
 
 export interface FallbackHandler {
   (name: string): Promise<boolean>;
@@ -15,6 +15,12 @@ export class LensProtocolRouterMain extends proto.LensProtocolRouter {
   @observable rendererLoaded = false;
   @observable extensionsLoaded = false;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   /**
    * Find the most specific registered handler, if it exists, and invoke it.
    *
diff --git a/src/main/window-manager.ts b/src/main/window-manager.ts
index afd6b03670..13fd54b02f 100644
--- a/src/main/window-manager.ts
+++ b/src/main/window-manager.ts
@@ -1,5 +1,5 @@
 import type { ClusterId } from "../common/cluster-store";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { app, BrowserWindow, dialog, shell, webContents } from "electron";
 import windowStateKeeper from "electron-window-state";
 import { appEventBus } from "../common/event-bus";
@@ -21,6 +21,7 @@ export class WindowManager extends Singleton {
 
   constructor(protected proxyPort: number) {
     super();
+    makeObservable(this);
     this.bindEvents();
     this.initMenu();
     this.initTray();
diff --git a/src/renderer/api/api-manager.ts b/src/renderer/api/api-manager.ts
index 90e63f692b..f30e0816ed 100644
--- a/src/renderer/api/api-manager.ts
+++ b/src/renderer/api/api-manager.ts
@@ -1,6 +1,6 @@
 import type { KubeObjectStore } from "../kube-object.store";
 
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { autobind } from "../utils";
 import { KubeApi, parseKubeApi } from "./kube-api";
 
@@ -9,6 +9,10 @@ export class ApiManager {
   private apis = observable.map<string, KubeApi>();
   private stores = observable.map<string, KubeObjectStore>();
 
+  constructor() {
+    makeObservable(this);
+  }
+
   getApi(pathOrCallback: string | ((api: KubeApi) => boolean)) {
     if (typeof pathOrCallback === "string") {
       return this.apis.get(pathOrCallback) || this.apis.get(parseKubeApi(pathOrCallback).apiBase);
diff --git a/src/renderer/api/catalog-entity-registry.ts b/src/renderer/api/catalog-entity-registry.ts
index afed7a88cf..ed0956297c 100644
--- a/src/renderer/api/catalog-entity-registry.ts
+++ b/src/renderer/api/catalog-entity-registry.ts
@@ -1,13 +1,15 @@
-import { action, observable } from "mobx";
+import "../../common/catalog-entities";
+import { action, observable, makeObservable } from "mobx";
 import { broadcastMessage, subscribeToBroadcast } from "../../common/ipc";
 import { CatalogCategory, CatalogEntity, CatalogEntityData } from "../../common/catalog-entity";
 import { catalogCategoryRegistry, CatalogCategoryRegistry } from "../../common/catalog-category-registry";
-import "../../common/catalog-entities";
 
 export class CatalogEntityRegistry {
   @observable protected _items: CatalogEntity[] = observable.array([], { deep: true });
 
-  constructor(private categoryRegistry: CatalogCategoryRegistry) {}
+  constructor(private categoryRegistry: CatalogCategoryRegistry) {
+    makeObservable(this);
+  }
 
   init() {
     subscribeToBroadcast("catalog:items", (ev, items: CatalogEntityData[]) => {
diff --git a/src/renderer/api/kube-watch-api.ts b/src/renderer/api/kube-watch-api.ts
index f2f50193db..4599626c08 100644
--- a/src/renderer/api/kube-watch-api.ts
+++ b/src/renderer/api/kube-watch-api.ts
@@ -5,7 +5,7 @@ import type { KubeObjectStore } from "../kube-object.store";
 import type { ClusterContext } from "../components/context";
 
 import plimit from "p-limit";
-import { comparer, IReactionDisposer, observable, reaction, when } from "mobx";
+import { comparer, IReactionDisposer, observable, reaction, when, makeObservable } from "mobx";
 import { autobind, noop } from "../utils";
 import { KubeApi } from "./kube-api";
 import { KubeJsonApiData } from "./kube-json-api";
@@ -35,6 +35,10 @@ export class KubeWatchApi {
 
   contextReady = when(() => Boolean(this.context));
 
+  constructor() {
+    makeObservable(this);
+  }
+
   isAllowedApi(api: KubeApi): boolean {
     return Boolean(this.context?.cluster.isAllowedResource(api.kind));
   }
diff --git a/src/renderer/api/websocket-api.ts b/src/renderer/api/websocket-api.ts
index 79a92cf99e..26dc005d53 100644
--- a/src/renderer/api/websocket-api.ts
+++ b/src/renderer/api/websocket-api.ts
@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { EventEmitter } from "../../common/event-emitter";
 
 interface IParams {
@@ -45,6 +45,7 @@ export class WebSocketApi {
   };
 
   constructor(protected params: IParams) {
+    makeObservable(this);
     this.params = Object.assign({}, WebSocketApi.defaultParams, params);
     const { autoConnect, pingIntervalSeconds } = this.params;
 
diff --git a/src/renderer/components/+add-cluster/add-cluster.tsx b/src/renderer/components/+add-cluster/add-cluster.tsx
index b9392e2b95..5166d7fe64 100644
--- a/src/renderer/components/+add-cluster/add-cluster.tsx
+++ b/src/renderer/components/+add-cluster/add-cluster.tsx
@@ -2,7 +2,7 @@ import "./add-cluster.scss";
 import os from "os";
 import React from "react";
 import { observer } from "mobx-react";
-import { action, observable, runInAction } from "mobx";
+import { action, observable, runInAction, makeObservable } from "mobx";
 import { remote } from "electron";
 import { KubeConfig } from "@kubernetes/client-node";
 import { Select, SelectOption } from "../select";
@@ -43,6 +43,11 @@ export class AddCluster extends React.Component {
   @observable isWaiting = false;
   @observable showSettings = false;
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     clusterStore.setActive(null);
     this.setKubeConfig(userStore.kubeConfigPath);
diff --git a/src/renderer/components/+apps-helm-charts/helm-chart-details.tsx b/src/renderer/components/+apps-helm-charts/helm-chart-details.tsx
index d31efc5438..78b590f978 100644
--- a/src/renderer/components/+apps-helm-charts/helm-chart-details.tsx
+++ b/src/renderer/components/+apps-helm-charts/helm-chart-details.tsx
@@ -2,7 +2,7 @@ import "./helm-chart-details.scss";
 
 import React, { Component } from "react";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
-import { observable, autorun } from "mobx";
+import { observable, autorun, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
 import { autobind, stopPropagation } from "../../utils";
@@ -28,6 +28,11 @@ export class HelmChartDetails extends Component<Props> {
 
   private chartPromise: CancelablePromise<{ readme: string; versions: HelmChart[] }>;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentWillUnmount() {
     this.chartPromise?.cancel();
   }
diff --git a/src/renderer/components/+apps-helm-charts/helm-chart.store.ts b/src/renderer/components/+apps-helm-charts/helm-chart.store.ts
index 78d4c677bf..afd13665e4 100644
--- a/src/renderer/components/+apps-helm-charts/helm-chart.store.ts
+++ b/src/renderer/components/+apps-helm-charts/helm-chart.store.ts
@@ -1,5 +1,5 @@
 import semver from "semver";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
 import { ItemStore } from "../../item.store";
@@ -14,6 +14,12 @@ export interface IChartVersion {
 export class HelmChartStore extends ItemStore<HelmChart> {
   @observable versions = observable.map<string, IChartVersion[]>();
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   loadAll() {
     return this.loadItems(() => helmChartsApi.list());
   }
diff --git a/src/renderer/components/+apps-releases/release-details.tsx b/src/renderer/components/+apps-releases/release-details.tsx
index d28ded12eb..cfa32ef673 100644
--- a/src/renderer/components/+apps-releases/release-details.tsx
+++ b/src/renderer/components/+apps-releases/release-details.tsx
@@ -3,7 +3,7 @@ import "./release-details.scss";
 import React, { Component } from "react";
 import groupBy from "lodash/groupBy";
 import isEqual from "lodash/isEqual";
-import { observable, reaction, toJS } from "mobx";
+import { observable, reaction, toJS, makeObservable } from "mobx";
 import { Link } from "react-router-dom";
 import kebabCase from "lodash/kebabCase";
 import { HelmRelease, helmReleasesApi, IReleaseDetails } from "../../api/endpoints/helm-releases.api";
@@ -61,6 +61,11 @@ export class ReleaseDetails extends Component<Props> {
     this.releaseSecret = secret;
   });
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async loadDetails() {
     const { release } = this.props;
 
diff --git a/src/renderer/components/+apps-releases/release-rollback-dialog.tsx b/src/renderer/components/+apps-releases/release-rollback-dialog.tsx
index 4aef4ec356..ce9dbb6843 100644
--- a/src/renderer/components/+apps-releases/release-rollback-dialog.tsx
+++ b/src/renderer/components/+apps-releases/release-rollback-dialog.tsx
@@ -1,7 +1,7 @@
 import "./release-rollback-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class ReleaseRollbackDialog extends React.Component<Props> {
   @observable revision: IReleaseRevision;
   @observable revisions = observable.array<IReleaseRevision>();
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(release: HelmRelease) {
     ReleaseRollbackDialog.isOpen = true;
     ReleaseRollbackDialog.release = release;
diff --git a/src/renderer/components/+apps-releases/release.store.ts b/src/renderer/components/+apps-releases/release.store.ts
index fb8a2d907e..4ec1d82d98 100644
--- a/src/renderer/components/+apps-releases/release.store.ts
+++ b/src/renderer/components/+apps-releases/release.store.ts
@@ -1,5 +1,13 @@
 import isEqual from "lodash/isEqual";
-import { action, IReactionDisposer, observable, reaction, toJS, when } from "mobx";
+import {
+  action,
+  IReactionDisposer,
+  observable,
+  reaction,
+  toJS,
+  when,
+  makeObservable,
+} from "mobx";
 import { autobind } from "../../utils";
 import { HelmRelease, helmReleasesApi, IReleaseCreatePayload, IReleaseUpdatePayload } from "../../api/endpoints/helm-releases.api";
 import { ItemStore } from "../../item.store";
@@ -15,6 +23,7 @@ export class ReleaseStore extends ItemStore<HelmRelease> {
 
   constructor() {
     super();
+    makeObservable(this);
     when(() => secretsStore.isLoaded, () => {
       this.releaseSecrets = this.getReleaseSecrets();
     });
diff --git a/src/renderer/components/+catalog/catalog-entity.store.ts b/src/renderer/components/+catalog/catalog-entity.store.ts
index 2c867ca02b..732c52ec82 100644
--- a/src/renderer/components/+catalog/catalog-entity.store.ts
+++ b/src/renderer/components/+catalog/catalog-entity.store.ts
@@ -1,4 +1,4 @@
-import { action, computed, IReactionDisposer, observable, reaction } from "mobx";
+import { action, computed, IReactionDisposer, observable, reaction, makeObservable } from "mobx";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { CatalogEntity, CatalogEntityActionContext } from "../../api/catalog-entity";
 import { ItemObject, ItemStore } from "../../item.store";
@@ -6,7 +6,9 @@ import { autobind } from "../../utils";
 import { CatalogCategory } from "../../../common/catalog-entity";
 
 export class CatalogEntityItem implements ItemObject {
-  constructor(public entity: CatalogEntity) {}
+  constructor(public entity: CatalogEntity) {
+    makeObservable(this);
+  }
 
   get name() {
     return this.entity.metadata.name;
@@ -58,6 +60,12 @@ export class CatalogEntityItem implements ItemObject {
 export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
   @observable activeCategory: CatalogCategory;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @computed get entities() {
     if (!this.activeCategory) return [];
 
diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx
index ebd17fd676..df0bdd2db1 100644
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/src/renderer/components/+catalog/catalog.tsx
@@ -2,7 +2,7 @@ import "./catalog.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ItemListLayout } from "../item-object-list";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store";
 import { navigate } from "../../navigation";
 import { kebabCase } from "lodash";
@@ -30,6 +30,11 @@ export class Catalog extends React.Component {
   @observable.deep private contextMenu: CatalogEntityContextMenuContext;
   @observable activeTab: string;
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     this.contextMenu = {
       menuItems: [],
diff --git a/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx b/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
index d1ad7dbeef..61f7f96ac1 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
 import { SubTitle } from "../../layout/sub-title";
 import { EditableList } from "../../editable-list";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 
 interface Props {
   cluster: Cluster;
@@ -13,6 +13,11 @@ interface Props {
 export class ClusterAccessibleNamespaces extends React.Component<Props> {
   @observable namespaces = new Set(this.props.cluster.accessibleNamespaces);
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   render() {
     return (
       <>
diff --git a/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx
index 10aabf3ff7..b6f90f1045 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { observable, autorun } from "mobx";
+import { observable, autorun, makeObservable } from "mobx";
 import { observer, disposeOnUnmount } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
 import { Input } from "../../input";
@@ -13,6 +13,11 @@ interface Props {
 export class ClusterHomeDirSetting extends React.Component<Props> {
   @observable directory = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this,
       autorun(() => {
diff --git a/src/renderer/components/+cluster-settings/components/cluster-metrics-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-metrics-setting.tsx
index bc51ddf061..1cdb168c84 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-metrics-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-metrics-setting.tsx
@@ -7,7 +7,7 @@ import { Icon } from "../../icon/icon";
 import { Button } from "../../button/button";
 import { SubTitle } from "../../layout/sub-title";
 import { Cluster } from "../../../../main/cluster";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 
 interface Props {
   cluster: Cluster;
@@ -30,6 +30,11 @@ export enum ResourceType {
 export class ClusterMetricsSetting extends React.Component<Props> {
   @observable hiddenMetrics = observable.set<string>();
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.hiddenMetrics = observable.set<string>(this.props.cluster.preferences.hiddenMetrics ?? []);
 
diff --git a/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx
index 9d953ef9ca..45a7e3c87f 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Cluster } from "../../../../main/cluster";
 import { Input } from "../../input";
-import { observable, autorun } from "mobx";
+import { observable, autorun, makeObservable } from "mobx";
 import { observer, disposeOnUnmount } from "mobx-react";
 import { SubTitle } from "../../layout/sub-title";
 import { isRequired } from "../../input/input_validators";
@@ -14,6 +14,11 @@ interface Props {
 export class ClusterNameSetting extends React.Component<Props> {
   @observable name = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this,
       autorun(() => {
diff --git a/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
index 937f2feed4..a8bb602694 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
@@ -5,7 +5,7 @@ import { Cluster } from "../../../../main/cluster";
 import { SubTitle } from "../../layout/sub-title";
 import { Select, SelectOption } from "../../select";
 import { Input } from "../../input";
-import { observable, computed, autorun } from "mobx";
+import { observable, computed, autorun, makeObservable } from "mobx";
 
 const options: SelectOption<string>[] = [
   { value: "", label: "Auto detect" },
@@ -21,6 +21,11 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
   @observable path = "";
   @observable provider = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get canEditPrometheusPath() {
     if (this.provider === "" || this.provider === "lens") return false;
 
diff --git a/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
index eb122ac444..5c859d37fe 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { observable, autorun } from "mobx";
+import { observable, autorun, makeObservable } from "mobx";
 import { observer, disposeOnUnmount } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
 import { Input, InputValidators } from "../../input";
@@ -13,6 +13,11 @@ interface Props {
 export class ClusterProxySetting extends React.Component<Props> {
   @observable proxy = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this,
       autorun(() => {
diff --git a/src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx b/src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx
index 2d509c490f..8a56afc730 100644
--- a/src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx
+++ b/src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { clusterStore } from "../../../../common/cluster-store";
 import { Cluster } from "../../../../main/cluster";
@@ -12,6 +13,11 @@ interface Props {
 
 @observer
 export class RemoveClusterButton extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   confirmRemoveCluster() {
     const { cluster } = this.props;
diff --git a/src/renderer/components/+cluster-settings/components/show-metrics.tsx b/src/renderer/components/+cluster-settings/components/show-metrics.tsx
index a3e071182f..8f2b88515a 100644
--- a/src/renderer/components/+cluster-settings/components/show-metrics.tsx
+++ b/src/renderer/components/+cluster-settings/components/show-metrics.tsx
@@ -3,7 +3,7 @@ import "./cluster-metrics-setting.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { Badge } from "../../badge/badge";
 import { Icon } from "../../icon/icon";
 
@@ -15,6 +15,11 @@ interface Props {
 export class ShowMetricsSetting extends React.Component<Props> {
   @observable hiddenMetrics = observable.set<string>();
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.hiddenMetrics = observable.set<string>(this.props.cluster.preferences.hiddenMetrics ?? []);
 
diff --git a/src/renderer/components/+cluster/cluster-issues.tsx b/src/renderer/components/+cluster/cluster-issues.tsx
index 913c78167c..acd3863b0d 100644
--- a/src/renderer/components/+cluster/cluster-issues.tsx
+++ b/src/renderer/components/+cluster/cluster-issues.tsx
@@ -2,7 +2,7 @@ import "./cluster-issues.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { Icon } from "../icon";
 import { SubHeader } from "../layout/sub-header";
 import { Table, TableCell, TableHead, TableRow } from "../table";
@@ -40,6 +40,11 @@ export class ClusterIssues extends React.Component<Props> {
     [sortBy.age]: (warning: IWarning) => warning.age || "",
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get warnings() {
     const warnings: IWarning[] = [];
 
diff --git a/src/renderer/components/+cluster/cluster-overview.store.ts b/src/renderer/components/+cluster/cluster-overview.store.ts
index 0158b405d0..500039762f 100644
--- a/src/renderer/components/+cluster/cluster-overview.store.ts
+++ b/src/renderer/components/+cluster/cluster-overview.store.ts
@@ -1,4 +1,4 @@
-import { action, observable, reaction, when } from "mobx";
+import { action, observable, reaction, when, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { Cluster, clusterApi, IClusterMetrics } from "../../api/endpoints";
 import { autobind, createStorage } from "../../utils";
@@ -51,6 +51,7 @@ export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements Cl
 
   constructor() {
     super();
+    makeObservable(this);
     this.init();
   }
 
diff --git a/src/renderer/components/+config-maps/config-map-details.tsx b/src/renderer/components/+config-maps/config-map-details.tsx
index f33d32c7e5..5849cc407f 100644
--- a/src/renderer/components/+config-maps/config-map-details.tsx
+++ b/src/renderer/components/+config-maps/config-map-details.tsx
@@ -1,7 +1,7 @@
 import "./config-map-details.scss";
 
 import React from "react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerTitle } from "../drawer";
 import { Notifications } from "../notifications";
@@ -45,6 +45,11 @@ export class ConfigMapDetails extends React.Component<Props> {
     }
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   render() {
     const { object: configMap } = this.props;
 
diff --git a/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx b/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx
index 95f50c935b..c7d3a24502 100644
--- a/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx
+++ b/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx
@@ -1,7 +1,7 @@
 import "./add-quota-dialog.scss";
 
 import React from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -51,6 +51,11 @@ export class AddQuotaDialog extends React.Component<Props> {
   @observable namespace = this.defaultNamespace;
   @observable quotas = AddQuotaDialog.defaultQuotas;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     AddQuotaDialog.isOpen = true;
   }
diff --git a/src/renderer/components/+config-secrets/add-secret-dialog.tsx b/src/renderer/components/+config-secrets/add-secret-dialog.tsx
index 2fae17d30d..f0608510f9 100644
--- a/src/renderer/components/+config-secrets/add-secret-dialog.tsx
+++ b/src/renderer/components/+config-secrets/add-secret-dialog.tsx
@@ -1,7 +1,7 @@
 import "./add-secret-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -40,6 +40,11 @@ type ISecretField = keyof ISecretTemplate;
 export class AddSecretDialog extends React.Component<Props> {
   @observable static isOpen = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     AddSecretDialog.isOpen = true;
   }
diff --git a/src/renderer/components/+config-secrets/secret-details.tsx b/src/renderer/components/+config-secrets/secret-details.tsx
index ab7bc59e46..3b59ed3d4f 100644
--- a/src/renderer/components/+config-secrets/secret-details.tsx
+++ b/src/renderer/components/+config-secrets/secret-details.tsx
@@ -2,7 +2,7 @@ import "./secret-details.scss";
 
 import React from "react";
 import isEmpty from "lodash/isEmpty";
-import { autorun, observable } from "mobx";
+import { autorun, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Input } from "../input";
@@ -25,6 +25,11 @@ export class SecretDetails extends React.Component<Props> {
   @observable data: { [name: string]: string } = {};
   @observable revealSecret: { [name: string]: boolean } = {};
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     disposeOnUnmount(this, [
       autorun(() => {
diff --git a/src/renderer/components/+custom-resources/crd-list.tsx b/src/renderer/components/+custom-resources/crd-list.tsx
index 57959fa1d0..cf6a5d9c07 100644
--- a/src/renderer/components/+custom-resources/crd-list.tsx
+++ b/src/renderer/components/+custom-resources/crd-list.tsx
@@ -1,7 +1,7 @@
 import "./crd-list.scss";
 
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { stopPropagation } from "../../utils";
@@ -29,6 +29,11 @@ enum columnId {
 
 @observer
 export class CrdList extends React.Component {
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   get selectedGroups(): string[] {
     return crdGroupsUrlParam.get();
   }
diff --git a/src/renderer/components/+custom-resources/crd-resource-details.tsx b/src/renderer/components/+custom-resources/crd-resource-details.tsx
index b322524e3e..605eddd7a9 100644
--- a/src/renderer/components/+custom-resources/crd-resource-details.tsx
+++ b/src/renderer/components/+custom-resources/crd-resource-details.tsx
@@ -3,7 +3,7 @@ import "./crd-resource-details.scss";
 import React from "react";
 import jsonPath from "jsonpath";
 import { observer } from "mobx-react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { cssNames } from "../../utils";
 import { Badge } from "../badge";
 import { DrawerItem } from "../drawer";
@@ -39,6 +39,11 @@ function convertSpecValue(value: any): any {
 
 @observer
 export class CrdResourceDetails extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get crd() {
     return crdStore.getByObject(this.props.object);
   }
diff --git a/src/renderer/components/+custom-resources/crd-resources.tsx b/src/renderer/components/+custom-resources/crd-resources.tsx
index c60a93f063..0a3ee3bfe2 100644
--- a/src/renderer/components/+custom-resources/crd-resources.tsx
+++ b/src/renderer/components/+custom-resources/crd-resources.tsx
@@ -7,7 +7,7 @@ import { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../kube-object";
 import { KubeObject } from "../../api/kube-object";
 import { ICRDRouteParams } from "./crd.route";
-import { autorun, computed } from "mobx";
+import { autorun, computed, makeObservable } from "mobx";
 import { crdStore } from "./crd.store";
 import { TableSortCallback } from "../table";
 import { apiManager } from "../../api/api-manager";
@@ -24,6 +24,11 @@ enum columnId {
 
 @observer
 export class CrdResources extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this, [
       autorun(() => {
diff --git a/src/renderer/components/+custom-resources/crd.store.ts b/src/renderer/components/+custom-resources/crd.store.ts
index 86af0b9a6b..2ccaee549e 100644
--- a/src/renderer/components/+custom-resources/crd.store.ts
+++ b/src/renderer/components/+custom-resources/crd.store.ts
@@ -1,4 +1,4 @@
-import { computed, reaction, toJS } from "mobx";
+import { computed, reaction, toJS, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
 import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
@@ -25,6 +25,8 @@ export class CRDStore extends KubeObjectStore<CustomResourceDefinition> {
   constructor() {
     super();
 
+    makeObservable(this);
+
     // auto-init stores for crd-s
     reaction(() => toJS(this.items), items => items.forEach(initStore));
   }
diff --git a/src/renderer/components/+events/events.tsx b/src/renderer/components/+events/events.tsx
index 4b7b64dd15..78adcc1c70 100644
--- a/src/renderer/components/+events/events.tsx
+++ b/src/renderer/components/+events/events.tsx
@@ -1,7 +1,7 @@
 import "./events.scss";
 
 import React, { Fragment } from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { orderBy } from "lodash";
 import { TabLayout } from "../layout/tab-layout";
@@ -60,6 +60,11 @@ export class Events extends React.Component<Props> {
     onSort: params => this.sorting = params,
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get store(): EventStore {
     return eventStore;
   }
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index c14a6988b6..da21a46387 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -1,6 +1,6 @@
 import { remote, shell } from "electron";
 import fse from "fs-extra";
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import os from "os";
 import path from "path";
@@ -50,6 +50,11 @@ export class Extensions extends React.Component {
     }
   };
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   get extensionStateStore() {
     return ExtensionStateStore.getInstance<ExtensionStateStore>();
   }
diff --git a/src/renderer/components/+namespaces/add-namespace-dialog.tsx b/src/renderer/components/+namespaces/add-namespace-dialog.tsx
index 1ad2efae59..c62d93e628 100644
--- a/src/renderer/components/+namespaces/add-namespace-dialog.tsx
+++ b/src/renderer/components/+namespaces/add-namespace-dialog.tsx
@@ -1,7 +1,7 @@
 import "./add-namespace-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -21,6 +21,11 @@ export class AddNamespaceDialog extends React.Component<Props> {
   @observable static isOpen = false;
   @observable namespace = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     AddNamespaceDialog.isOpen = true;
   }
diff --git a/src/renderer/components/+namespaces/namespace-details.tsx b/src/renderer/components/+namespaces/namespace-details.tsx
index d43b348ce5..e4e7909b10 100644
--- a/src/renderer/components/+namespaces/namespace-details.tsx
+++ b/src/renderer/components/+namespaces/namespace-details.tsx
@@ -1,7 +1,7 @@
 import "./namespace-details.scss";
 
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { cssNames } from "../../utils";
@@ -19,6 +19,11 @@ interface Props extends KubeObjectDetailsProps<Namespace> {
 
 @observer
 export class NamespaceDetails extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get quotas() {
     const namespace = this.props.object.getName();
 
diff --git a/src/renderer/components/+namespaces/namespace-select.tsx b/src/renderer/components/+namespaces/namespace-select.tsx
index d398f91f0a..9fa8570238 100644
--- a/src/renderer/components/+namespaces/namespace-select.tsx
+++ b/src/renderer/components/+namespaces/namespace-select.tsx
@@ -1,7 +1,7 @@
 import "./namespace-select.scss";
 
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Select, SelectOption, SelectProps } from "../select";
 import { cssNames } from "../../utils";
@@ -36,6 +36,11 @@ function GradientValueContainer<T>({children, ...rest}: ValueContainerProps<T>)
 export class NamespaceSelect extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this, [
       kubeWatchApi.subscribeStores([namespaceStore], {
diff --git a/src/renderer/components/+namespaces/namespace.store.ts b/src/renderer/components/+namespaces/namespace.store.ts
index 4415f416b9..ffe0271086 100644
--- a/src/renderer/components/+namespaces/namespace.store.ts
+++ b/src/renderer/components/+namespaces/namespace.store.ts
@@ -1,4 +1,13 @@
-import { action, comparer, computed, IReactionDisposer, IReactionOptions, observable, reaction } from "mobx";
+import {
+  action,
+  comparer,
+  computed,
+  IReactionDisposer,
+  IReactionOptions,
+  observable,
+  reaction,
+  makeObservable,
+} from "mobx";
 import { autobind, createStorage } from "../../utils";
 import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
 import { Namespace, namespacesApi } from "../../api/endpoints/namespaces.api";
@@ -35,6 +44,7 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
 
   constructor() {
     super();
+    makeObservable(this);
     this.init();
   }
 
diff --git a/src/renderer/components/+network-endpoints/endpoint-subset-list.tsx b/src/renderer/components/+network-endpoints/endpoint-subset-list.tsx
index 7dbcc81c59..07d97d0aef 100644
--- a/src/renderer/components/+network-endpoints/endpoint-subset-list.tsx
+++ b/src/renderer/components/+network-endpoints/endpoint-subset-list.tsx
@@ -1,6 +1,7 @@
 import "./endpoint-subset-list.scss";
 
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { EndpointSubset, Endpoint, EndpointAddress} from "../../api/endpoints";
 import { Table, TableCell, TableHead, TableRow } from "../table";
@@ -16,6 +17,10 @@ interface Props {
 
 @observer
 export class EndpointSubsetList extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
 
   getAddressTableRow(ip: string) {
     const { subset } = this.props;
diff --git a/src/renderer/components/+network-ingresses/ingress.store.ts b/src/renderer/components/+network-ingresses/ingress.store.ts
index 37156c2741..a80599fdcd 100644
--- a/src/renderer/components/+network-ingresses/ingress.store.ts
+++ b/src/renderer/components/+network-ingresses/ingress.store.ts
@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
 import { IIngressMetrics, Ingress, ingressApi } from "../../api/endpoints";
@@ -9,6 +9,12 @@ export class IngressStore extends KubeObjectStore<Ingress> {
   api = ingressApi;
   @observable metrics: IIngressMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   async loadMetrics(ingress: Ingress) {
     this.metrics = await this.api.getMetrics(ingress.getName(), ingress.getNs());
   }
diff --git a/src/renderer/components/+network-services/service-port-component.tsx b/src/renderer/components/+network-services/service-port-component.tsx
index 77070390e0..044f580b9e 100644
--- a/src/renderer/components/+network-services/service-port-component.tsx
+++ b/src/renderer/components/+network-services/service-port-component.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { Service, ServicePort } from "../../api/endpoints";
 import { apiBase } from "../../api";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Spinner } from "../spinner";
@@ -18,6 +18,11 @@ interface Props {
 export class ServicePortComponent extends React.Component<Props> {
   @observable waiting = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async portForward() {
     const { service, port } = this.props;
 
diff --git a/src/renderer/components/+nodes/nodes.store.ts b/src/renderer/components/+nodes/nodes.store.ts
index b301015747..362ae378ac 100644
--- a/src/renderer/components/+nodes/nodes.store.ts
+++ b/src/renderer/components/+nodes/nodes.store.ts
@@ -1,5 +1,5 @@
 import { sum } from "lodash";
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
 import { clusterApi, IClusterMetrics, INodeMetrics, Node, nodesApi } from "../../api/endpoints";
 import { autobind } from "../../utils";
 import { KubeObjectStore } from "../../kube-object.store";
@@ -14,6 +14,12 @@ export class NodesStore extends KubeObjectStore<Node> {
   @observable metricsLoading = false;
   @observable metricsLoaded = false;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @action
   async loadUsageMetrics() {
     this.metricsLoading = true;
diff --git a/src/renderer/components/+preferences/add-helm-repo-dialog.tsx b/src/renderer/components/+preferences/add-helm-repo-dialog.tsx
index a0ede38ece..13fdb5636b 100644
--- a/src/renderer/components/+preferences/add-helm-repo-dialog.tsx
+++ b/src/renderer/components/+preferences/add-helm-repo-dialog.tsx
@@ -2,7 +2,7 @@ import "./add-helm-repo-dialog.scss";
 
 import React from "react";
 import { remote, FileFilter } from "electron";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -34,6 +34,11 @@ export class AddHelmRepoDialog extends React.Component<Props> {
 
   @observable static isOpen = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     AddHelmRepoDialog.isOpen = true;
   }
diff --git a/src/renderer/components/+preferences/helm-charts.tsx b/src/renderer/components/+preferences/helm-charts.tsx
index 1b0d80bf26..14fe5138a6 100644
--- a/src/renderer/components/+preferences/helm-charts.tsx
+++ b/src/renderer/components/+preferences/helm-charts.tsx
@@ -1,7 +1,7 @@
 import "./helm-charts.scss";
 
 import React from "react";
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
 
 import { HelmRepo, repoManager } from "../../../main/helm/helm-repo-manager";
 import { Button } from "../button";
@@ -17,6 +17,11 @@ export class HelmCharts extends React.Component {
   @observable repos: HelmRepo[] = [];
   @observable addedRepos = observable.map<string, HelmRepo>();
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get options(): SelectOption<HelmRepo>[] {
     return this.repos.map(repo => ({
       label: repo.name,
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index 3eb98cc4d7..b6035629a0 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -1,7 +1,7 @@
 import "./preferences.scss";
 
 import React from "react";
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 
 import { userStore } from "../../../common/user-store";
@@ -33,6 +33,11 @@ export class Preferences extends React.Component {
   @observable shell = userStore.preferences.shell || "";
   @observable activeTab = Pages.Application;
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get themeOptions(): SelectOption<string>[] {
     return themeStore.themes.map(theme => ({
       label: theme.name,
diff --git a/src/renderer/components/+storage-volume-claims/volume-claim.store.ts b/src/renderer/components/+storage-volume-claims/volume-claim.store.ts
index 8c4baaaf76..41b4f3bcc6 100644
--- a/src/renderer/components/+storage-volume-claims/volume-claim.store.ts
+++ b/src/renderer/components/+storage-volume-claims/volume-claim.store.ts
@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
 import { IPvcMetrics, PersistentVolumeClaim, pvcApi } from "../../api/endpoints";
@@ -9,6 +9,12 @@ export class VolumeClaimStore extends KubeObjectStore<PersistentVolumeClaim> {
   api = pvcApi;
   @observable metrics: IPvcMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @action
   async loadMetrics(pvc: PersistentVolumeClaim) {
     this.metrics = await pvcApi.getMetrics(pvc.getName(), pvc.getNs());
diff --git a/src/renderer/components/+storage-volumes/volume-details-list.tsx b/src/renderer/components/+storage-volumes/volume-details-list.tsx
index a9fb091050..58d1e75824 100644
--- a/src/renderer/components/+storage-volumes/volume-details-list.tsx
+++ b/src/renderer/components/+storage-volumes/volume-details-list.tsx
@@ -1,6 +1,7 @@
 import "./volume-details-list.scss";
 
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { PersistentVolume } from "../../api/endpoints/persistent-volume.api";
 import { autobind } from "../../../common/utils/autobind";
@@ -33,6 +34,11 @@ export class VolumeDetailsList extends React.Component<Props> {
     [sortBy.status]: (volume: PersistentVolume) => volume.getStatus(),
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   getTableRow(uid: string) {
     const { persistentVolumes } = this.props;
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
index e7a676365c..d06e5b8e53 100644
--- 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
@@ -1,7 +1,7 @@
 import "./add-role-binding-dialog.scss";
 
 import React from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -35,6 +35,11 @@ export class AddRoleBindingDialog extends React.Component<Props> {
   @observable static isOpen = false;
   @observable static data: RoleBinding = null;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(roleBinding?: RoleBinding) {
     AddRoleBindingDialog.isOpen = true;
     AddRoleBindingDialog.data = roleBinding;
diff --git a/src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx b/src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx
index e72463d184..eb28725422 100644
--- a/src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx
+++ b/src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx
@@ -9,7 +9,7 @@ import { ConfirmDialog } from "../confirm-dialog";
 import { DrawerTitle } from "../drawer";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { roleBindingsStore } from "./role-bindings.store";
 import { AddRoleBindingDialog } from "./add-role-binding-dialog";
 import { KubeObjectDetailsProps } from "../kube-object";
@@ -23,6 +23,11 @@ interface Props extends KubeObjectDetailsProps<RoleBinding> {
 export class RoleBindingDetails extends React.Component<Props> {
   @observable selectedSubjects = observable.array<IRoleBindingSubject>([], { deep: false });
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     disposeOnUnmount(this, [
       reaction(() => this.props.object, () => {
diff --git a/src/renderer/components/+user-management-roles/add-role-dialog.tsx b/src/renderer/components/+user-management-roles/add-role-dialog.tsx
index 555a6e6c84..1b39762563 100644
--- a/src/renderer/components/+user-management-roles/add-role-dialog.tsx
+++ b/src/renderer/components/+user-management-roles/add-role-dialog.tsx
@@ -1,7 +1,7 @@
 import "./add-role-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -22,6 +22,11 @@ export class AddRoleDialog extends React.Component<Props> {
   @observable roleName = "";
   @observable namespace = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     AddRoleDialog.isOpen = true;
   }
diff --git a/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx b/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx
index e9a27979cf..8ebb871e37 100644
--- a/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx
+++ b/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx
@@ -1,7 +1,7 @@
 import "./create-service-account-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
   @observable name = "";
   @observable namespace = "default";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     CreateServiceAccountDialog.isOpen = true;
   }
diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx b/src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx
index 0a45b5a2f9..e7a91fb385 100644
--- a/src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx
+++ b/src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx
@@ -1,7 +1,7 @@
 import "./service-accounts-details.scss";
 
 import React from "react";
-import { autorun, observable } from "mobx";
+import { autorun, observable, makeObservable } from "mobx";
 import { Spinner } from "../spinner";
 import { ServiceAccountsSecret } from "./service-accounts-secret";
 import { DrawerItem, DrawerTitle } from "../drawer";
@@ -45,6 +45,11 @@ export class ServiceAccountsDetails extends React.Component<Props> {
     this.imagePullSecrets = await Promise.all(imagePullSecrets);
   });
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   renderSecrets() {
     const { secrets } = this;
 
diff --git a/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx b/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx
index e8a561ea0e..65df8abea4 100644
--- a/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx
+++ b/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx
@@ -1,7 +1,7 @@
 import "./cronjob-trigger-dialog.scss";
 
 import React, { Component } from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class CronJobTriggerDialog extends Component<Props> {
 
   @observable ready = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(cronjob: CronJob) {
     CronJobTriggerDialog.isOpen = true;
     CronJobTriggerDialog.data = cronjob;
diff --git a/src/renderer/components/+workloads-daemonsets/daemonsets.store.ts b/src/renderer/components/+workloads-daemonsets/daemonsets.store.ts
index b8c8dee573..fd41192fee 100644
--- a/src/renderer/components/+workloads-daemonsets/daemonsets.store.ts
+++ b/src/renderer/components/+workloads-daemonsets/daemonsets.store.ts
@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
 import { DaemonSet, daemonSetApi, IPodMetrics, Pod, podsApi, PodStatus } from "../../api/endpoints";
@@ -11,6 +11,12 @@ export class DaemonSetStore extends KubeObjectStore<DaemonSet> {
 
   @observable metrics: IPodMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   async loadMetrics(daemonSet: DaemonSet) {
     const pods = this.getChildPods(daemonSet);
 
diff --git a/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx b/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx
index 41ad886eee..f452a849bf 100644
--- a/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx
+++ b/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx
@@ -1,7 +1,7 @@
 import "./deployment-scale-dialog.scss";
 
 import React, { Component } from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class DeploymentScaleDialog extends Component<Props> {
   @observable currentReplicas = 0;
   @observable desiredReplicas = 0;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(deployment: Deployment) {
     DeploymentScaleDialog.isOpen = true;
     DeploymentScaleDialog.data = deployment;
diff --git a/src/renderer/components/+workloads-deployments/deployments.store.ts b/src/renderer/components/+workloads-deployments/deployments.store.ts
index b9dc85eae5..bf9c8e41d3 100644
--- a/src/renderer/components/+workloads-deployments/deployments.store.ts
+++ b/src/renderer/components/+workloads-deployments/deployments.store.ts
@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { Deployment, deploymentApi, IPodMetrics, podsApi, PodStatus } from "../../api/endpoints";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
@@ -10,6 +10,12 @@ export class DeploymentStore extends KubeObjectStore<Deployment> {
   api = deploymentApi;
   @observable metrics: IPodMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   protected sortItems(items: Deployment[]) {
     return super.sortItems(items, [
       item => item.getReplicas(),
diff --git a/src/renderer/components/+workloads-overview/overview-statuses.tsx b/src/renderer/components/+workloads-overview/overview-statuses.tsx
index bc0484dadc..0bbb938d6b 100644
--- a/src/renderer/components/+workloads-overview/overview-statuses.tsx
+++ b/src/renderer/components/+workloads-overview/overview-statuses.tsx
@@ -1,6 +1,7 @@
 import "./overview-statuses.scss";
 
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { OverviewWorkloadStatus } from "./overview-workload-status";
 import { Link } from "react-router-dom";
@@ -23,6 +24,11 @@ const resources: KubeResource[] = [
 
 @observer
 export class OverviewStatuses extends React.Component {
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   renderWorkload(resource: KubeResource): React.ReactElement {
     const store = workloadStores[resource];
diff --git a/src/renderer/components/+workloads-overview/overview-workload-status.tsx b/src/renderer/components/+workloads-overview/overview-workload-status.tsx
index cb2accb09c..0426ea1932 100644
--- a/src/renderer/components/+workloads-overview/overview-workload-status.tsx
+++ b/src/renderer/components/+workloads-overview/overview-workload-status.tsx
@@ -3,7 +3,7 @@ import "./overview-workload-status.scss";
 import React from "react";
 import capitalize from "lodash/capitalize";
 import { findDOMNode } from "react-dom";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { PieChart } from "../chart";
 import { cssVar } from "../../utils";
@@ -24,6 +24,11 @@ interface Props {
 export class OverviewWorkloadStatus extends React.Component<Props> {
   @observable elem: HTMLElement;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     // eslint-disable-next-line react/no-find-dom-node
     this.elem = findDOMNode(this) as HTMLElement;
diff --git a/src/renderer/components/+workloads-pods/pod-container-port.tsx b/src/renderer/components/+workloads-pods/pod-container-port.tsx
index 4f2124ec3d..261453744b 100644
--- a/src/renderer/components/+workloads-pods/pod-container-port.tsx
+++ b/src/renderer/components/+workloads-pods/pod-container-port.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { Pod } from "../../api/endpoints";
 import { apiBase } from "../../api";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Spinner } from "../spinner";
@@ -22,6 +22,11 @@ interface Props {
 export class PodContainerPort extends React.Component<Props> {
   @observable waiting = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async portForward() {
     const { pod, port } = this.props;
 
diff --git a/src/renderer/components/+workloads-pods/pod-details-list.tsx b/src/renderer/components/+workloads-pods/pod-details-list.tsx
index c5d9023334..f4a4542f4c 100644
--- a/src/renderer/components/+workloads-pods/pod-details-list.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details-list.tsx
@@ -2,7 +2,7 @@ import "./pod-details-list.scss";
 
 import React from "react";
 import kebabCase from "lodash/kebabCase";
-import { reaction } from "mobx";
+import { reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { podsStore } from "./pods.store";
 import { Pod } from "../../api/endpoints";
@@ -50,6 +50,11 @@ export class PodDetailsList extends React.Component<Props> {
     [sortBy.memory]: (pod: Pod) => podsStore.getPodKubeMetrics(pod).memory,
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.metricsWatcher.start(true);
     disposeOnUnmount(this, [
diff --git a/src/renderer/components/+workloads-pods/pod-details-secrets.tsx b/src/renderer/components/+workloads-pods/pod-details-secrets.tsx
index b2c7cd14c3..ee5efb05fa 100644
--- a/src/renderer/components/+workloads-pods/pod-details-secrets.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details-secrets.tsx
@@ -2,7 +2,7 @@ import "./pod-details-secrets.scss";
 
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { autorun, observable } from "mobx";
+import { autorun, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Pod, Secret, secretsApi } from "../../api/endpoints";
 import { getDetailsUrl } from "../kube-object";
@@ -29,6 +29,11 @@ export class PodDetailsSecrets extends Component<Props> {
     secrets.forEach(secret => secret && this.secrets.set(secret.getName(), secret));
   });
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   render() {
     const { pod } = this.props;
 
diff --git a/src/renderer/components/+workloads-pods/pod-details.tsx b/src/renderer/components/+workloads-pods/pod-details.tsx
index 6736e1e326..49056c0ae5 100644
--- a/src/renderer/components/+workloads-pods/pod-details.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Link } from "react-router-dom";
-import { autorun, observable, reaction, toJS } from "mobx";
+import { autorun, observable, reaction, toJS, makeObservable } from "mobx";
 import { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi } from "../../api/endpoints";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
@@ -34,6 +34,11 @@ export class PodDetails extends React.Component<Props> {
 
   private watcher = interval(60, () => this.loadMetrics());
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this, [
       autorun(() => {
diff --git a/src/renderer/components/+workloads-pods/pods.store.ts b/src/renderer/components/+workloads-pods/pods.store.ts
index 5a535cec66..6ae56e5066 100644
--- a/src/renderer/components/+workloads-pods/pods.store.ts
+++ b/src/renderer/components/+workloads-pods/pods.store.ts
@@ -1,5 +1,5 @@
 import countBy from "lodash/countBy";
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind, cpuUnitsToNumber, unitsToBytes } from "../../utils";
 import { IPodMetrics, Pod, PodMetrics, podMetricsApi, podsApi } from "../../api/endpoints";
@@ -13,6 +13,12 @@ export class PodsStore extends KubeObjectStore<Pod> {
   @observable metrics: IPodMetrics = null;
   @observable kubeMetrics = observable.array<PodMetrics>([]);
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @action
   async loadMetrics(pod: Pod) {
     this.metrics = await podsApi.getMetrics([pod], pod.getNs());
diff --git a/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx b/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx
index 3a21c7116f..e39fee2f0c 100644
--- a/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx
+++ b/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx
@@ -1,7 +1,7 @@
 import "./replicaset-scale-dialog.scss";
 
 import React, { Component } from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class ReplicaSetScaleDialog extends Component<Props> {
   @observable currentReplicas = 0;
   @observable desiredReplicas = 0;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(replicaSet: ReplicaSet) {
     ReplicaSetScaleDialog.isOpen = true;
     ReplicaSetScaleDialog.data = replicaSet;
diff --git a/src/renderer/components/+workloads-replicasets/replicasets.store.ts b/src/renderer/components/+workloads-replicasets/replicasets.store.ts
index ca58006930..fbcb4f878b 100644
--- a/src/renderer/components/+workloads-replicasets/replicasets.store.ts
+++ b/src/renderer/components/+workloads-replicasets/replicasets.store.ts
@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import { KubeObjectStore } from "../../kube-object.store";
 import { Deployment, IPodMetrics, podsApi, ReplicaSet, replicaSetApi } from "../../api/endpoints";
@@ -11,6 +11,12 @@ export class ReplicaSetStore extends KubeObjectStore<ReplicaSet> {
   api = replicaSetApi;
   @observable metrics: IPodMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   async loadMetrics(replicaSet: ReplicaSet) {
     const pods = this.getChildPods(replicaSet);
 
diff --git a/src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx b/src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx
index 38c7cd4898..d65b205f51 100644
--- a/src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx
+++ b/src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx
@@ -2,7 +2,7 @@ import "./statefulset-scale-dialog.scss";
 
 import { StatefulSet, statefulSetApi } from "../../api/endpoints";
 import React, { Component } from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class StatefulSetScaleDialog extends Component<Props> {
   @observable currentReplicas = 0;
   @observable desiredReplicas = 0;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(statefulSet: StatefulSet) {
     StatefulSetScaleDialog.isOpen = true;
     StatefulSetScaleDialog.data = statefulSet;
diff --git a/src/renderer/components/+workloads-statefulsets/statefulset.store.ts b/src/renderer/components/+workloads-statefulsets/statefulset.store.ts
index 6ee4bb5c28..2faed90fb1 100644
--- a/src/renderer/components/+workloads-statefulsets/statefulset.store.ts
+++ b/src/renderer/components/+workloads-statefulsets/statefulset.store.ts
@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import { KubeObjectStore } from "../../kube-object.store";
 import { IPodMetrics, podsApi, PodStatus, StatefulSet, statefulSetApi } from "../../api/endpoints";
@@ -10,6 +10,12 @@ export class StatefulSetStore extends KubeObjectStore<StatefulSet> {
   api = statefulSetApi;
   @observable metrics: IPodMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   async loadMetrics(statefulSet: StatefulSet) {
     const pods = this.getChildPods(statefulSet);
 
diff --git a/src/renderer/components/ace-editor/ace-editor.tsx b/src/renderer/components/ace-editor/ace-editor.tsx
index 180c142ffd..bc977361d4 100644
--- a/src/renderer/components/ace-editor/ace-editor.tsx
+++ b/src/renderer/components/ace-editor/ace-editor.tsx
@@ -3,6 +3,7 @@
 import "./ace-editor.scss";
 
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import AceBuild, { Ace } from "ace-builds";
 import { autobind, cssNames, noop } from "../../utils";
@@ -44,6 +45,7 @@ export class AceEditor extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
+    makeObservable(this);
     require("ace-builds/src-noconflict/mode-yaml");
     require("ace-builds/src-noconflict/theme-terminal");
     require("ace-builds/src-noconflict/ext-searchbox");
diff --git a/src/renderer/components/animate/animate.tsx b/src/renderer/components/animate/animate.tsx
index e114e0bbb7..4006d25c5b 100644
--- a/src/renderer/components/animate/animate.tsx
+++ b/src/renderer/components/animate/animate.tsx
@@ -1,6 +1,6 @@
 import "./animate.scss";
 import React from "react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { autobind, cssNames, noop } from "../../utils";
 
@@ -30,6 +30,11 @@ export class Animate extends React.Component<AnimateProps> {
     leave: false
   };
 
+  constructor(props: AnimateProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   get contentElem() {
     return React.Children.only(this.props.children) as React.ReactElement<React.HTMLAttributes<any>>;
   }
diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx
index 2110898885..446cc6725e 100755
--- a/src/renderer/components/app.tsx
+++ b/src/renderer/components/app.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Redirect, Route, Router, Switch } from "react-router";
 import { history } from "../navigation";
@@ -53,6 +53,11 @@ import { clusterContext } from "./context";
 
 @observer
 export class App extends React.Component {
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   static async init() {
     const frameId = webFrame.routingId;
     const clusterId = getHostedClusterId();
diff --git a/src/renderer/components/cluster-manager/cluster-status.tsx b/src/renderer/components/cluster-manager/cluster-status.tsx
index 3e17eb3e4c..235f94f67c 100644
--- a/src/renderer/components/cluster-manager/cluster-status.tsx
+++ b/src/renderer/components/cluster-manager/cluster-status.tsx
@@ -4,7 +4,7 @@ import "./cluster-status.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { ipcRenderer } from "electron";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { requestMain, subscribeToBroadcast } from "../../../common/ipc";
 import { Icon } from "../icon";
 import { Button } from "../button";
@@ -24,6 +24,11 @@ export class ClusterStatus extends React.Component<Props> {
   @observable authOutput: KubeAuthProxyLog[] = [];
   @observable isReconnecting = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get cluster(): Cluster {
     return clusterStore.getById(this.props.clusterId);
   }
diff --git a/src/renderer/components/command-palette/command-container.tsx b/src/renderer/components/command-palette/command-container.tsx
index 140523bc61..308eda85ca 100644
--- a/src/renderer/components/command-palette/command-container.tsx
+++ b/src/renderer/components/command-palette/command-container.tsx
@@ -1,6 +1,6 @@
 
 import "./command-container.scss";
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { Dialog } from "../dialog";
@@ -29,6 +29,11 @@ export class CommandOverlay {
 export class CommandContainer extends React.Component<{ clusterId?: string }> {
   @observable.ref commandComponent: React.ReactElement;
 
+  constructor(props: { clusterId?: string }) {
+    super(props);
+    makeObservable(this);
+  }
+
   private escHandler(event: KeyboardEvent) {
     if (event.key === "Escape") {
       event.stopPropagation();
diff --git a/src/renderer/components/command-palette/command-dialog.tsx b/src/renderer/components/command-palette/command-dialog.tsx
index c784612345..f10599f368 100644
--- a/src/renderer/components/command-palette/command-dialog.tsx
+++ b/src/renderer/components/command-palette/command-dialog.tsx
@@ -1,6 +1,6 @@
 
 import { Select } from "../select";
-import { computed, observable, toJS } from "mobx";
+import { computed, observable, toJS, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { commandRegistry } from "../../../extensions/registries/command-registry";
@@ -14,6 +14,11 @@ import { clusterViewURL } from "../cluster-manager/cluster-view.route";
 export class CommandDialog extends React.Component {
   @observable menuIsOpen = true;
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get options() {
     const context = {
       entity: commandRegistry.activeEntity
diff --git a/src/renderer/components/confirm-dialog/confirm-dialog.tsx b/src/renderer/components/confirm-dialog/confirm-dialog.tsx
index 721ee36e45..f86525bb0d 100644
--- a/src/renderer/components/confirm-dialog/confirm-dialog.tsx
+++ b/src/renderer/components/confirm-dialog/confirm-dialog.tsx
@@ -1,7 +1,7 @@
 import "./confirm-dialog.scss";
 
 import React, { ReactNode } from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames, noop, prevDefault } from "../../utils";
 import { Button, ButtonProps } from "../button";
@@ -28,6 +28,11 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
 
   @observable isSaving = false;
 
+  constructor(props: ConfirmDialogProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(params: ConfirmDialogParams) {
     ConfirmDialog.isOpen = true;
     ConfirmDialog.params = params;
diff --git a/src/renderer/components/dock/create-resource.tsx b/src/renderer/components/dock/create-resource.tsx
index 01e6002309..9a701074fc 100644
--- a/src/renderer/components/dock/create-resource.tsx
+++ b/src/renderer/components/dock/create-resource.tsx
@@ -2,7 +2,7 @@ import "./create-resource.scss";
 
 import React from "react";
 import jsYaml from "js-yaml";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { createResourceStore } from "./create-resource.store";
@@ -22,6 +22,11 @@ interface Props {
 export class CreateResource extends React.Component<Props> {
   @observable error = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get tabId() {
     return this.props.tab.id;
   }
diff --git a/src/renderer/components/dock/dock-tab.tsx b/src/renderer/components/dock/dock-tab.tsx
index 104fdcc15c..bcee911757 100644
--- a/src/renderer/components/dock/dock-tab.tsx
+++ b/src/renderer/components/dock/dock-tab.tsx
@@ -7,7 +7,7 @@ import { dockStore, IDockTab } from "./dock.store";
 import { Tab, TabProps } from "../tabs";
 import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 
 export interface DockTabProps extends TabProps<IDockTab> {
   moreActions?: React.ReactNode;
@@ -17,6 +17,11 @@ export interface DockTabProps extends TabProps<IDockTab> {
 export class DockTab extends React.Component<DockTabProps> {
   @observable menuVisible = false;
 
+  constructor(props: DockTabProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   get tabId() {
     return this.props.value.id;
   }
diff --git a/src/renderer/components/dock/dock.store.ts b/src/renderer/components/dock/dock.store.ts
index 3a8ab4333c..ece3dc334d 100644
--- a/src/renderer/components/dock/dock.store.ts
+++ b/src/renderer/components/dock/dock.store.ts
@@ -1,5 +1,5 @@
 import MD5 from "crypto-js/md5";
-import { action, computed, IReactionOptions, observable, reaction } from "mobx";
+import { action, computed, IReactionOptions, observable, reaction, makeObservable } from "mobx";
 import { autobind, createStorage } from "../../utils";
 import throttle from "lodash/throttle";
 
@@ -81,6 +81,7 @@ export class DockStore implements DockStorageState {
   }
 
   constructor() {
+    makeObservable(this);
     this.init();
   }
 
diff --git a/src/renderer/components/dock/edit-resource.tsx b/src/renderer/components/dock/edit-resource.tsx
index b84d8f9103..077de845ba 100644
--- a/src/renderer/components/dock/edit-resource.tsx
+++ b/src/renderer/components/dock/edit-resource.tsx
@@ -1,7 +1,7 @@
 import "./edit-resource.scss";
 
 import React from "react";
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import jsYaml from "js-yaml";
 import { IDockTab } from "./dock.store";
@@ -22,6 +22,11 @@ interface Props {
 export class EditResource extends React.Component<Props> {
   @observable error = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get tabId() {
     return this.props.tab.id;
   }
diff --git a/src/renderer/components/dock/editor-panel.tsx b/src/renderer/components/dock/editor-panel.tsx
index d0ddcf56c6..b194e5bb39 100644
--- a/src/renderer/components/dock/editor-panel.tsx
+++ b/src/renderer/components/dock/editor-panel.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import jsYaml from "js-yaml";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { AceEditor } from "../ace-editor";
@@ -23,6 +23,11 @@ export class EditorPanel extends React.Component<Props> {
 
   @observable yamlError = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     // validate and run callback with optional error
     this.onChange(this.props.value || "");
diff --git a/src/renderer/components/dock/info-panel.tsx b/src/renderer/components/dock/info-panel.tsx
index c4f4c22d1b..0faed9dc6f 100644
--- a/src/renderer/components/dock/info-panel.tsx
+++ b/src/renderer/components/dock/info-panel.tsx
@@ -1,7 +1,7 @@
 import "./info-panel.scss";
 
 import React, { Component, ReactNode } from "react";
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { Button } from "../button";
@@ -44,6 +44,11 @@ export class InfoPanel extends Component<Props> {
   @observable error = "";
   @observable waiting = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this, [
       reaction(() => this.props.tabId, () => {
diff --git a/src/renderer/components/dock/install-chart.store.ts b/src/renderer/components/dock/install-chart.store.ts
index 7a11deb65a..ca9f34adaf 100644
--- a/src/renderer/components/dock/install-chart.store.ts
+++ b/src/renderer/components/dock/install-chart.store.ts
@@ -1,4 +1,4 @@
-import { action, autorun } from "mobx";
+import { action, autorun, makeObservable } from "mobx";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
 import { DockTabStore } from "./dock-tab.store";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
@@ -24,6 +24,7 @@ export class InstallChartStore extends DockTabStore<IChartInstallData> {
     super({
       storageKey: "install_charts"
     });
+    makeObservable(this);
     autorun(() => {
       const { selectedTab, isOpen } = dockStore;
 
diff --git a/src/renderer/components/dock/install-chart.tsx b/src/renderer/components/dock/install-chart.tsx
index 4f651f7a3a..c146ba32e6 100644
--- a/src/renderer/components/dock/install-chart.tsx
+++ b/src/renderer/components/dock/install-chart.tsx
@@ -1,7 +1,7 @@
 import "./install-chart.scss";
 
 import React, { Component } from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { dockStore, IDockTab } from "./dock.store";
 import { InfoPanel } from "./info-panel";
@@ -29,6 +29,11 @@ export class InstallChart extends Component<Props> {
   @observable error = "";
   @observable showNotes = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get values() {
     return this.chartData.values;
   }
diff --git a/src/renderer/components/dock/log-list.tsx b/src/renderer/components/dock/log-list.tsx
index fc6efacdfa..fa73c0a73b 100644
--- a/src/renderer/components/dock/log-list.tsx
+++ b/src/renderer/components/dock/log-list.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import AnsiUp from "ansi_up";
 import DOMPurify from "dompurify";
 import debounce from "lodash/debounce";
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Align, ListOnScrollProps } from "react-window";
 
@@ -35,6 +35,11 @@ export class LogList extends React.Component<Props> {
   private virtualListRef = React.createRef<VirtualList>(); // A reference for VirtualList component
   private lineHeight = 18; // Height of a log line. Should correlate with styles in pod-log-list.scss
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.scrollToBottom();
   }
diff --git a/src/renderer/components/dock/log.store.ts b/src/renderer/components/dock/log.store.ts
index ec80cf4d58..4e5376e7d1 100644
--- a/src/renderer/components/dock/log.store.ts
+++ b/src/renderer/components/dock/log.store.ts
@@ -1,4 +1,4 @@
-import { autorun, computed, observable } from "mobx";
+import { autorun, computed, observable, makeObservable } from "mobx";
 
 import { IPodLogsQuery, Pod, podsApi } from "../../api/endpoints";
 import { autobind, interval } from "../../utils";
@@ -21,6 +21,7 @@ export class LogStore {
   @observable podLogs = observable.map<TabId, PodLogLine[]>();
 
   constructor() {
+    makeObservable(this);
     autorun(() => {
       const { selectedTab, isOpen } = dockStore;
 
diff --git a/src/renderer/components/dock/logs.tsx b/src/renderer/components/dock/logs.tsx
index 0aa31f95fb..281c740162 100644
--- a/src/renderer/components/dock/logs.tsx
+++ b/src/renderer/components/dock/logs.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 
 import { searchStore } from "../../../common/search-store";
@@ -24,6 +24,11 @@ export class Logs extends React.Component<Props> {
 
   private logListElement = React.createRef<LogList>(); // A reference for VirtualList component
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this,
       reaction(() => this.props.tab.id, this.reload, { fireImmediately: true })
diff --git a/src/renderer/components/dock/terminal-tab.tsx b/src/renderer/components/dock/terminal-tab.tsx
index 1e84a9501e..cd1de7b1a9 100644
--- a/src/renderer/components/dock/terminal-tab.tsx
+++ b/src/renderer/components/dock/terminal-tab.tsx
@@ -7,13 +7,18 @@ import { DockTab, DockTabProps } from "./dock-tab";
 import { Icon } from "../icon";
 import { terminalStore } from "./terminal.store";
 import { dockStore } from "./dock.store";
-import { reaction } from "mobx";
+import { reaction, makeObservable } from "mobx";
 
 interface Props extends DockTabProps {
 }
 
 @observer
 export class TerminalTab extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     reaction(() => this.isDisconnected === true, () => {
       dockStore.closeTab(this.tabId);
diff --git a/src/renderer/components/dock/upgrade-chart.store.ts b/src/renderer/components/dock/upgrade-chart.store.ts
index 78fb4d5072..2f3a72d575 100644
--- a/src/renderer/components/dock/upgrade-chart.store.ts
+++ b/src/renderer/components/dock/upgrade-chart.store.ts
@@ -1,4 +1,4 @@
-import { action, autorun, IReactionDisposer, reaction } from "mobx";
+import { action, autorun, IReactionDisposer, reaction, makeObservable } from "mobx";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
 import { DockTabStore } from "./dock-tab.store";
 import { HelmRelease, helmReleasesApi } from "../../api/endpoints/helm-releases.api";
@@ -19,6 +19,8 @@ export class UpgradeChartStore extends DockTabStore<IChartUpgradeData> {
       storageKey: "chart_releases"
     });
 
+    makeObservable(this);
+
     autorun(() => {
       const { selectedTab, isOpen } = dockStore;
 
diff --git a/src/renderer/components/dock/upgrade-chart.tsx b/src/renderer/components/dock/upgrade-chart.tsx
index c5253cb5b1..90787fc79f 100644
--- a/src/renderer/components/dock/upgrade-chart.tsx
+++ b/src/renderer/components/dock/upgrade-chart.tsx
@@ -1,7 +1,7 @@
 import "./upgrade-chart.scss";
 
 import React from "react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { IDockTab } from "./dock.store";
@@ -26,6 +26,11 @@ export class UpgradeChart extends React.Component<Props> {
   @observable versions = observable.array<IChartVersion>();
   @observable version: IChartVersion;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.loadVersions();
 
diff --git a/src/renderer/components/editable-list/editable-list.tsx b/src/renderer/components/editable-list/editable-list.tsx
index 3c6309b344..c2eaa703f7 100644
--- a/src/renderer/components/editable-list/editable-list.tsx
+++ b/src/renderer/components/editable-list/editable-list.tsx
@@ -3,7 +3,7 @@ import "./editable-list.scss";
 import React from "react";
 import { Icon } from "../icon";
 import { Input } from "../input";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { autobind } from "../../utils";
 
@@ -28,6 +28,11 @@ 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);
+  }
+
   @autobind()
   onSubmit(val: string) {
     const { add } = this.props;
diff --git a/src/renderer/components/file-picker/file-picker.tsx b/src/renderer/components/file-picker/file-picker.tsx
index 1a52fe4973..5cdb9b3b17 100644
--- a/src/renderer/components/file-picker/file-picker.tsx
+++ b/src/renderer/components/file-picker/file-picker.tsx
@@ -5,7 +5,7 @@ import fse from "fs-extra";
 import path from "path";
 import { Icon } from "../icon";
 import { Spinner } from "../spinner";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import _ from "lodash";
 
@@ -81,6 +81,11 @@ export class FilePicker extends React.Component<Props> {
   @observable status = FileInputStatus.CLEAR;
   @observable errorText?: string;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   handleFileCount(files: File[]): File[] {
     const { limit: [minLimit, maxLimit] = [0, Infinity], onOverLimit } = this.props;
 
diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index 201bc2df02..8d05f11a08 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-icon.tsx
@@ -8,7 +8,7 @@ import { Avatar } from "@material-ui/core";
 import { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../../common/catalog-entity";
 import { Menu, MenuItem } from "../menu";
 import { Icon } from "../icon";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { navigate } from "../../navigation";
 import { hotbarStore } from "../../../common/hotbar-store";
 import { ConfirmDialog } from "../confirm-dialog";
@@ -26,6 +26,11 @@ export class HotbarIcon extends React.Component<Props> {
   @observable.deep private contextMenu: CatalogEntityContextMenuContext;
   @observable menuOpen = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.contextMenu = {
       menuItems: [],
diff --git a/src/renderer/components/input/drop-file-input.tsx b/src/renderer/components/input/drop-file-input.tsx
index a462a117d3..81cbb2d5f9 100644
--- a/src/renderer/components/input/drop-file-input.tsx
+++ b/src/renderer/components/input/drop-file-input.tsx
@@ -1,7 +1,7 @@
 import "./drop-file-input.scss";
 import React from "react";
 import { autobind, cssNames, IClassName } from "../../utils";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import logger from "../../../main/logger";
 
@@ -19,6 +19,11 @@ export interface DropFileMeta<T extends HTMLElement = any> {
 export class DropFileInput<T extends HTMLElement = any> extends React.Component<DropFileInputProps> {
   @observable dropAreaActive = false;
 
+  constructor(props: DropFileInputProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   onDragEnter() {
     this.dropAreaActive = true;
diff --git a/src/renderer/components/input/search-input-url.tsx b/src/renderer/components/input/search-input-url.tsx
index c0e00d6e56..efc4d9345b 100644
--- a/src/renderer/components/input/search-input-url.tsx
+++ b/src/renderer/components/input/search-input-url.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import debounce from "lodash/debounce";
-import { autorun, observable } from "mobx";
+import { autorun, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { InputProps } from "./input";
 import { SearchInput } from "./search-input";
@@ -42,6 +42,11 @@ export class SearchInputUrl extends React.Component<Props> {
     }
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   render() {
     const { inputVal } = this;
 
diff --git a/src/renderer/components/input/search-input.tsx b/src/renderer/components/input/search-input.tsx
index 144cf10ada..4c2615eb54 100644
--- a/src/renderer/components/input/search-input.tsx
+++ b/src/renderer/components/input/search-input.tsx
@@ -1,6 +1,7 @@
 import "./search-input.scss";
 
 import React, { createRef } from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames } from "../../utils";
 import { Icon } from "../icon";
@@ -28,6 +29,11 @@ export class SearchInput extends React.Component<Props> {
 
   private inputRef = createRef<Input>();
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     if (!this.props.bindGlobalFocusHotkey) return;
     window.addEventListener("keydown", this.onGlobalKey);
diff --git a/src/renderer/components/item-object-list/item-list-layout.tsx b/src/renderer/components/item-object-list/item-list-layout.tsx
index 5c7db4cd41..7f65a47591 100644
--- a/src/renderer/components/item-object-list/item-list-layout.tsx
+++ b/src/renderer/components/item-object-list/item-list-layout.tsx
@@ -2,7 +2,7 @@ import "./item-list-layout.scss";
 import groupBy from "lodash/groupBy";
 
 import React, { ReactNode } from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
 import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table";
@@ -102,6 +102,11 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     showFilters: false, // setup defaults
   });
 
+  constructor(props: ItemListLayoutProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   get showFilters(): boolean {
     return this.storage.get().showFilters;
   }
diff --git a/src/renderer/components/item-object-list/page-filters-select.tsx b/src/renderer/components/item-object-list/page-filters-select.tsx
index af9768f149..a1fb209657 100644
--- a/src/renderer/components/item-object-list/page-filters-select.tsx
+++ b/src/renderer/components/item-object-list/page-filters-select.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { GroupSelectOption, Select, SelectOption, SelectProps } from "../select";
 import { FilterType, pageFilters } from "./page-filters.store";
 import { namespaceStore } from "../+namespaces/namespace.store";
@@ -26,6 +26,11 @@ export class PageFiltersSelect extends React.Component<Props> {
     disableFilters: {},
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get groupedOptions() {
     const options: GroupSelectOption<SelectOptionFilter>[] = [];
     const { disableFilters } = this.props;
diff --git a/src/renderer/components/item-object-list/page-filters.store.ts b/src/renderer/components/item-object-list/page-filters.store.ts
index 933a94c06b..ef07fafab3 100644
--- a/src/renderer/components/item-object-list/page-filters.store.ts
+++ b/src/renderer/components/item-object-list/page-filters.store.ts
@@ -1,4 +1,4 @@
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import { searchUrlParam } from "../input/search-input-url";
 
@@ -22,6 +22,7 @@ export class PageFiltersStore {
   }
 
   constructor() {
+    makeObservable(this);
     this.syncWithGlobalSearch();
   }
 
diff --git a/src/renderer/components/kube-object-status-icon/kube-object-status-icon.tsx b/src/renderer/components/kube-object-status-icon/kube-object-status-icon.tsx
index 386255d1eb..f6e8ebfd7e 100644
--- a/src/renderer/components/kube-object-status-icon/kube-object-status-icon.tsx
+++ b/src/renderer/components/kube-object-status-icon/kube-object-status-icon.tsx
@@ -6,13 +6,18 @@ import { KubeObject } from "../../api/kube-object";
 import { cssNames, formatDuration } from "../../utils";
 import { KubeObjectStatusRegistration, kubeObjectStatusRegistry } from "../../../extensions/registries/kube-object-status-registry";
 import { KubeObjectStatus, KubeObjectStatusLevel } from "../../..//extensions/renderer-api/k8s-api";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 
 interface Props {
   object: KubeObject;
 }
 
 export class KubeObjectStatusIcon extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get objectStatuses() {
     const { object } = this.props;
     const registrations = kubeObjectStatusRegistry.getItemsForKind(object.kind, object.apiVersion);
diff --git a/src/renderer/components/kube-object/kube-object-details.tsx b/src/renderer/components/kube-object/kube-object-details.tsx
index b07b0753fb..caaa2da864 100644
--- a/src/renderer/components/kube-object/kube-object-details.tsx
+++ b/src/renderer/components/kube-object/kube-object-details.tsx
@@ -2,7 +2,7 @@ import "./kube-object-details.scss";
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { createPageParam, navigation } from "../../navigation";
 import { Drawer } from "../drawer";
 import { KubeObject } from "../../api/kube-object";
@@ -70,6 +70,11 @@ export class KubeObjectDetails extends React.Component {
   @observable isLoading = false;
   @observable.ref loadingError: React.ReactNode;
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get path() {
     return kubeDetailsUrlParam.get();
   }
diff --git a/src/renderer/components/kube-object/kube-object-list-layout.tsx b/src/renderer/components/kube-object/kube-object-list-layout.tsx
index 0ecb602c16..d518498300 100644
--- a/src/renderer/components/kube-object/kube-object-list-layout.tsx
+++ b/src/renderer/components/kube-object/kube-object-list-layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { KubeObject } from "../../api/kube-object";
@@ -17,6 +17,11 @@ export interface KubeObjectListLayoutProps extends ItemListLayoutProps {
 
 @observer
 export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutProps> {
+  constructor(props: KubeObjectListLayoutProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get selectedItem() {
     return this.props.store.getByPath(kubeSelectedUrlParam.get());
   }
diff --git a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
index 21684549e1..c8d2fe34a9 100644
--- a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
+++ b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
@@ -1,7 +1,7 @@
 import "./kubeconfig-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import jsYaml from "js-yaml";
 import { AceEditor } from "../ace-editor";
@@ -30,6 +30,11 @@ export class KubeConfigDialog extends React.Component<Props> {
   @observable.ref configTextArea: HTMLTextAreaElement; // required for coping config text
   @observable config = ""; // parsed kubeconfig in yaml format
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(data: IKubeconfigDialogData) {
     KubeConfigDialog.isOpen = true;
     KubeConfigDialog.data = data;
diff --git a/src/renderer/components/layout/page-layout.tsx b/src/renderer/components/layout/page-layout.tsx
index bbec97acdd..9009e107c7 100644
--- a/src/renderer/components/layout/page-layout.tsx
+++ b/src/renderer/components/layout/page-layout.tsx
@@ -1,6 +1,7 @@
 import "./page-layout.scss";
 
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { navigation } from "../../navigation";
@@ -27,6 +28,11 @@ const defaultProps: Partial<PageLayoutProps> = {
 export class PageLayout extends React.Component<PageLayoutProps> {
   static defaultProps = defaultProps as object;
 
+  constructor(props: PageLayoutProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   back(evt?: React.MouseEvent | KeyboardEvent) {
     if (this.props.back) {
@@ -64,7 +70,7 @@ export class PageLayout extends React.Component<PageLayoutProps> {
 
     return (
       <div {...elemProps} className={className}>
-        { navigation && (
+        {navigation && (
           <nav className="sidebarRegion">
             <div className="sidebar">
               {navigation}
@@ -76,7 +82,7 @@ export class PageLayout extends React.Component<PageLayoutProps> {
             {children}
           </div>
           <div className="toolsRegion">
-            { this.props.provideBackButtonNavigation && (
+            {this.props.provideBackButtonNavigation && (
               <div className="fixedTools">
                 <div className="closeBtn" role="button" aria-label="Close" onClick={this.back}>
                   <Icon material="close"/>
diff --git a/src/renderer/components/layout/sidebar-item.tsx b/src/renderer/components/layout/sidebar-item.tsx
index 64956842aa..573d657f96 100644
--- a/src/renderer/components/layout/sidebar-item.tsx
+++ b/src/renderer/components/layout/sidebar-item.tsx
@@ -1,7 +1,7 @@
 import "./sidebar-item.scss";
 
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { cssNames, prevDefault } from "../../utils";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
@@ -32,6 +32,11 @@ interface SidebarItemProps {
 export class SidebarItem extends React.Component<SidebarItemProps> {
   static displayName = "SidebarItem";
 
+  constructor(props: SidebarItemProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   get id(): string {
     return this.props.id;
   }
diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index 531c9db1a0..0af37ee6f4 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -2,7 +2,7 @@ import "./sidebar.scss";
 import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
 import { cssNames } from "../../utils";
@@ -41,6 +41,11 @@ interface Props {
 export class Sidebar extends React.Component<Props> {
   static displayName = "Sidebar";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     crdStore.reloadAll();
   }
diff --git a/src/renderer/components/menu/menu-actions.tsx b/src/renderer/components/menu/menu-actions.tsx
index d6d044f3bb..6415018d95 100644
--- a/src/renderer/components/menu/menu-actions.tsx
+++ b/src/renderer/components/menu/menu-actions.tsx
@@ -1,7 +1,7 @@
 import "./menu-actions.scss";
 
 import React, { isValidElement } from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames } from "../../utils";
 import { ConfirmDialog } from "../confirm-dialog";
@@ -38,6 +38,11 @@ export class MenuActions extends React.Component<MenuActionsProps> {
     this.isOpen = !this.isOpen;
   };
 
+  constructor(props: MenuActionsProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   remove() {
     const { removeAction } = this.props;
diff --git a/src/renderer/components/notifications/notifications.store.tsx b/src/renderer/components/notifications/notifications.store.tsx
index 45c1eb9a6b..d1c18d2e19 100644
--- a/src/renderer/components/notifications/notifications.store.tsx
+++ b/src/renderer/components/notifications/notifications.store.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import uniqueId from "lodash/uniqueId";
 import { JsonApiErrorParsed } from "../../api/json-api";
@@ -27,6 +27,10 @@ export class NotificationsStore {
 
   protected autoHideTimers = new Map<NotificationId, number>();
 
+  constructor() {
+    makeObservable(this);
+  }
+
   getById(id: NotificationId): Notification | null {
     return this.notifications.find(item => item.id === id) ?? null;
   }
diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.tsx b/src/renderer/components/resizing-anchor/resizing-anchor.tsx
index 464e357b96..97374ad161 100644
--- a/src/renderer/components/resizing-anchor/resizing-anchor.tsx
+++ b/src/renderer/components/resizing-anchor/resizing-anchor.tsx
@@ -1,6 +1,6 @@
 import "./resizing-anchor.scss";
 import React from "react";
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import _ from "lodash";
 import { cssNames, noop } from "../../utils";
 
@@ -165,6 +165,8 @@ export class ResizingAnchor extends React.PureComponent<Props> {
   constructor(props: Props) {
     super(props);
 
+    makeObservable(this);
+
     if (props.maxExtent < props.minExtent) {
       throw new Error("maxExtent must be >= minExtent");
     }
diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx
index e816633804..ccd8294d49 100644
--- a/src/renderer/components/select/select.tsx
+++ b/src/renderer/components/select/select.tsx
@@ -3,7 +3,7 @@
 import "./select.scss";
 
 import React, { ReactNode } from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames } from "../../utils";
 import ReactSelect, { ActionMeta, components, Props as ReactSelectProps, Styles } from "react-select";
@@ -39,6 +39,11 @@ export class Select extends React.Component<SelectProps> {
     menuPlacement: "auto",
   };
 
+  constructor(props: SelectProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get theme() {
     return this.props.themeName || themeStore.activeTheme.type;
   }
diff --git a/src/renderer/components/table/table.tsx b/src/renderer/components/table/table.tsx
index e15bfabad2..a9d626b5c3 100644
--- a/src/renderer/components/table/table.tsx
+++ b/src/renderer/components/table/table.tsx
@@ -11,7 +11,7 @@ import { VirtualList } from "../virtual-list";
 import { createPageParam } from "../../navigation";
 import { ItemObject } from "../../item.store";
 import { getSortParams, setSortParams } from "./table.storage";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 
 export type TableSortBy = string;
 export type TableOrderBy = "asc" | "desc" | string;
@@ -64,6 +64,11 @@ export class Table extends React.Component<TableProps> {
     sortSyncWithUrl: true,
   };
 
+  constructor(props: TableProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     const { sortable, tableId } = this.props;
 
diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx
index 922d25130a..69a88aabe4 100644
--- a/src/renderer/components/tooltip/tooltip.tsx
+++ b/src/renderer/components/tooltip/tooltip.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { createPortal } from "react-dom";
 import { observer } from "mobx-react";
 import { autobind, cssNames, IClassName } from "../../utils";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 
 export enum TooltipPosition {
   TOP = "top",
@@ -51,6 +51,11 @@ export class Tooltip extends React.Component<TooltipProps> {
   @observable activePosition: TooltipPosition;
   @observable isVisible = !!this.props.visible;
 
+  constructor(props: TooltipProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   get targetElem(): HTMLElement {
     return document.getElementById(this.props.targetId);
   }
diff --git a/src/renderer/item.store.ts b/src/renderer/item.store.ts
index 5c6d04b278..5726984c94 100644
--- a/src/renderer/item.store.ts
+++ b/src/renderer/item.store.ts
@@ -1,6 +1,6 @@
 import orderBy from "lodash/orderBy";
 import { autobind, noop } from "./utils";
-import { action, computed, observable, toJS, when } from "mobx";
+import { action, computed, observable, toJS, when, makeObservable } from "mobx";
 
 export interface ItemObject {
   getId(): string;
@@ -18,6 +18,10 @@ export abstract class ItemStore<T extends ItemObject = ItemObject> {
   @observable items = observable.array<T>([], { deep: false });
   @observable selectedItemsIds = observable.map<string, boolean>();
 
+  constructor() {
+    makeObservable(this);
+  }
+
   @computed get selectedItems(): T[] {
     return this.items.filter(item => this.selectedItemsIds.get(item.getId()));
   }
diff --git a/src/renderer/kube-object.store.ts b/src/renderer/kube-object.store.ts
index bd6313e7cb..b53a205c76 100644
--- a/src/renderer/kube-object.store.ts
+++ b/src/renderer/kube-object.store.ts
@@ -1,6 +1,6 @@
 import type { ClusterContext } from "./components/context";
 
-import { action, computed, observable, reaction, when } from "mobx";
+import { action, computed, observable, reaction, when, makeObservable } from "mobx";
 import { autobind } from "./utils";
 import { KubeObject, KubeStatus } from "./api/kube-object";
 import { IKubeWatchEvent } from "./api/kube-watch-api";
@@ -27,6 +27,7 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
 
   constructor() {
     super();
+    makeObservable(this);
     this.bindWatchEventsUpdater();
   }
 
diff --git a/src/renderer/theme.store.ts b/src/renderer/theme.store.ts
index 1d08885ede..fbc3265b61 100644
--- a/src/renderer/theme.store.ts
+++ b/src/renderer/theme.store.ts
@@ -1,4 +1,4 @@
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { autobind } from "./utils";
 import { userStore } from "../common/user-store";
 import logger from "../main/logger";
@@ -43,6 +43,7 @@ export class ThemeStore {
   }
 
   constructor() {
+    makeObservable(this);
     // auto-apply active theme
     reaction(() => this.activeThemeId, async themeId => {
       try {
diff --git a/src/renderer/utils/storageHelper.ts b/src/renderer/utils/storageHelper.ts
index 7b284edce0..347d102985 100755
--- a/src/renderer/utils/storageHelper.ts
+++ b/src/renderer/utils/storageHelper.ts
@@ -1,6 +1,6 @@
 // Helper for working with storages (e.g. window.localStorage, NodeJS/file-system, etc.)
 
-import { action, comparer, CreateObservableOptions, IObservableValue, observable, reaction, toJS, when } from "mobx";
+import { action, comparer, CreateObservableOptions, IObservableValue, makeObservable, observable, reaction, toJS, when } from "mobx";
 import produce, { Draft } from "immer";
 import { isEqual, isFunction, isPlainObject, merge } from "lodash";
 import logger from "../../main/logger";
@@ -42,6 +42,7 @@ export class StorageHelper<T> {
   }
 
   constructor(readonly key: string, private options: StorageHelperOptions<T>) {
+    makeObservable(this);
     this.options = merge({}, StorageHelper.defaultOptions, options);
     this.observeData();