diff --git a/src/renderer/components/+add-cluster/add-cluster.tsx b/src/renderer/components/+add-cluster/add-cluster.tsx
index 7ee8529492..df73ee9fe9 100644
--- a/src/renderer/components/+add-cluster/add-cluster.tsx
+++ b/src/renderer/components/+add-cluster/add-cluster.tsx
@@ -148,3 +148,5 @@ export class AddCluster extends React.Component {
     );
   }
 }
+
+export default AddCluster;
diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx
index 76339e79a3..96e1cc762f 100644
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/src/renderer/components/+catalog/catalog.tsx
@@ -285,7 +285,7 @@ export class Catalog extends React.Component<Props> {
 
     return (
       <MainLayout sidebar={this.renderNavigation()}>
-        <div className="p-6 h-full">
+        <div className="h-full p-6">
           { this.renderCategoryList() }
         </div>
         {
@@ -302,3 +302,5 @@ export class Catalog extends React.Component<Props> {
     );
   }
 }
+
+export default Catalog;
diff --git a/src/renderer/components/+entity-settings/entity-settings.tsx b/src/renderer/components/+entity-settings/entity-settings.tsx
index ad0713e342..f9c432a06a 100644
--- a/src/renderer/components/+entity-settings/entity-settings.tsx
+++ b/src/renderer/components/+entity-settings/entity-settings.tsx
@@ -145,3 +145,5 @@ export class EntitySettings extends React.Component<Props> {
     );
   }
 }
+
+export default EntitySettings;
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index b135487343..ffe57795c4 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -388,7 +388,7 @@ async function attemptInstall(request: InstallRequest, d?: ExtendableDisposer):
 
     // otherwise confirmation required (re-install / update)
     const removeNotification = Notifications.info(
-      <div className="InstallingExtensionNotification flex gaps align-center">
+      <div className="flex InstallingExtensionNotification gaps align-center">
         <div className="flex column gaps">
           <p>Install extension <b>{name}@{version}</b>?</p>
           <p>Description: <em>{description}</em></p>
@@ -545,3 +545,5 @@ export class Extensions extends React.Component<Props> {
     );
   }
 }
+
+export default Extensions;
diff --git a/src/renderer/components/+preferences/index.tsx b/src/renderer/components/+preferences/index.tsx
index 11ee65ea78..01e81f470a 100644
--- a/src/renderer/components/+preferences/index.tsx
+++ b/src/renderer/components/+preferences/index.tsx
@@ -18,5 +18,5 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-
 export * from "./preferences";
+
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index 9bf82f9e4f..1c72ceeb9e 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -269,3 +269,5 @@ export class Preferences extends React.Component {
     );
   }
 }
+
+export default Preferences;
diff --git a/src/renderer/components/+welcome/welcome.tsx b/src/renderer/components/+welcome/welcome.tsx
index 2b06d8d255..3d0d3b65f4 100644
--- a/src/renderer/components/+welcome/welcome.tsx
+++ b/src/renderer/components/+welcome/welcome.tsx
@@ -30,7 +30,7 @@ import { WelcomeMenuRegistry } from "../../../extensions/registries";
 export class Welcome extends React.Component {
   render() {
     return (
-      <div className="Welcome flex justify-center align-center">
+      <div className="flex justify-center Welcome align-center">
         <div className="box">
           <Icon svg="logo-lens" className="logo" />
 
@@ -54,3 +54,5 @@ export class Welcome extends React.Component {
     );
   }
 }
+
+export default Welcome;
diff --git a/src/renderer/components/cluster-manager/bottom-bar.tsx b/src/renderer/components/cluster-manager/bottom-bar.tsx
index 0f61a03833..25bf0ac1d5 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.tsx
+++ b/src/renderer/components/cluster-manager/bottom-bar.tsx
@@ -45,7 +45,7 @@ export class BottomBar extends React.Component {
     }
 
     return (
-      <div className="extensions box grow flex gaps justify-flex-end">
+      <div className="flex extensions box grow gaps justify-flex-end">
         {items.map((registration, index) => {
           if (!registration?.item && !registration?.components?.Item) {
             return null;
@@ -63,9 +63,11 @@ export class BottomBar extends React.Component {
 
   render() {
     return (
-      <div className="BottomBar flex gaps">
+      <div className="flex BottomBar gaps">
         {this.renderRegisteredItems()}
       </div>
     );
   }
 }
+
+export default BottomBar;
diff --git a/src/renderer/components/cluster-manager/catalog-topbar.tsx b/src/renderer/components/cluster-manager/catalog-topbar.tsx
index 7e70834ae3..3b7c5e0995 100644
--- a/src/renderer/components/cluster-manager/catalog-topbar.tsx
+++ b/src/renderer/components/cluster-manager/catalog-topbar.tsx
@@ -39,3 +39,5 @@ export function CatalogTopbar() {
     </TopBar>
   );
 }
+
+export default CatalogTopbar;
diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx
index df5ae5d486..30b51b955e 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.tsx
+++ b/src/renderer/components/cluster-manager/cluster-manager.tsx
@@ -21,52 +21,65 @@
 
 import "./cluster-manager.scss";
 
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import { Redirect, Route, Switch } from "react-router";
 import { observer } from "mobx-react";
-import { BottomBar } from "./bottom-bar";
-import { Catalog } from "../+catalog";
-import { Preferences } from "../+preferences";
-import { AddCluster } from "../+add-cluster";
-import { ClusterView } from "./cluster-view";
 import { GlobalPageRegistry } from "../../../extensions/registries/page-registry";
-import { Extensions } from "../+extensions";
-import { HotbarMenu } from "../hotbar/hotbar-menu";
-import { EntitySettings } from "../+entity-settings";
-import { Welcome } from "../+welcome";
-import { ClusterTopbar } from "./cluster-topbar";
-import { CatalogTopbar } from "./catalog-topbar";
 import * as routes from "../../../common/routes";
 
+
+const Catalog = lazy(() => import("../+catalog/catalog"));
+const ClusterTopbar = lazy(() => import("./cluster-topbar"));
+const CatalogTopbar = lazy(() => import("./catalog-topbar"));
+
+const Welcome = lazy(() => import("../+welcome/welcome"));
+const Preferences = lazy(() => import("../+preferences/preferences"));
+const Extensions = lazy(() => import("../+extensions/extensions"));
+const AddCluster = lazy(() => import("../+add-cluster/add-cluster"));
+const ClusterView = lazy(() => import("./cluster-view"));
+const EntitySettings = lazy(() => import("../+entity-settings/entity-settings"));
+
+const BottomBar = lazy(() => import("./bottom-bar"));
+const HotbarMenu = lazy(() => import("../hotbar/hotbar-menu"));
+
 @observer
 export class ClusterManager extends React.Component {
   render() {
     return (
       <div className="ClusterManager">
-        <Route component={CatalogTopbar} {...routes.catalogRoute} />
-        <Route component={ClusterTopbar} {...routes.clusterViewRoute} />
+        <Suspense fallback={<div></div>}>
+          <Route component={CatalogTopbar} {...routes.catalogRoute} />
+          <Route component={ClusterTopbar} {...routes.clusterViewRoute} />
+        </Suspense>
         <main>
           <div id="lens-views"/>
-          <Switch>
-            <Route component={Welcome} {...routes.welcomeRoute} />
-            <Route component={Catalog} {...routes.catalogRoute} />
-            <Route component={Preferences} {...routes.preferencesRoute} />
-            <Route component={Extensions} {...routes.extensionsRoute} />
-            <Route component={AddCluster} {...routes.addClusterRoute} />
-            <Route component={ClusterView} {...routes.clusterViewRoute} />
-            <Route component={EntitySettings} {...routes.entitySettingsRoute} />
-            {
-              GlobalPageRegistry.getInstance().getItems()
-                .map(({ url, components: { Page } }) => (
-                  <Route key={url} path={url} component={Page} />
-                ))
-            }
-            <Redirect exact to={routes.welcomeURL()}/>
-          </Switch>
+          <Suspense fallback={<div></div>}>
+            <Switch>
+              <Route component={Welcome} {...routes.welcomeRoute} />
+              <Route component={Catalog} {...routes.catalogRoute} />
+              <Route component={Preferences} {...routes.preferencesRoute} />
+              <Route component={Extensions} {...routes.extensionsRoute} />
+              <Route component={AddCluster} {...routes.addClusterRoute} />
+              <Route component={ClusterView} {...routes.clusterViewRoute} />
+              <Route component={EntitySettings} {...routes.entitySettingsRoute} />
+              {
+                GlobalPageRegistry.getInstance().getItems()
+                  .map(({ url, components: { Page } }) => (
+                    <Route key={url} path={url} component={Page} />
+                  ))
+              }
+              <Redirect exact to={routes.welcomeURL()} />
+            </Switch>
+          </Suspense>
+
         </main>
-        <HotbarMenu/>
-        <BottomBar/>
+        <Suspense fallback={<div></div>}>
+          <HotbarMenu />
+          <BottomBar />
+        </Suspense>
       </div>
     );
   }
 }
+
+export default ClusterManager;
diff --git a/src/renderer/components/cluster-manager/cluster-topbar.tsx b/src/renderer/components/cluster-manager/cluster-topbar.tsx
index 20a6120ba1..6ac6726785 100644
--- a/src/renderer/components/cluster-manager/cluster-topbar.tsx
+++ b/src/renderer/components/cluster-manager/cluster-topbar.tsx
@@ -59,3 +59,5 @@ export const ClusterTopbar = observer((props: Props) => {
     </TopBar>
   );
 });
+
+export default ClusterTopbar;
diff --git a/src/renderer/components/cluster-manager/cluster-view.tsx b/src/renderer/components/cluster-manager/cluster-view.tsx
index db48e051c8..ebbe049c76 100644
--- a/src/renderer/components/cluster-manager/cluster-view.tsx
+++ b/src/renderer/components/cluster-manager/cluster-view.tsx
@@ -103,9 +103,11 @@ export class ClusterView extends React.Component<Props> {
 
   render() {
     return (
-      <div className="ClusterView flex column align-center">
+      <div className="flex ClusterView column align-center">
         {this.renderStatus()}
       </div>
     );
   }
 }
+
+export default ClusterView;
diff --git a/src/renderer/components/command-palette/command-container.tsx b/src/renderer/components/command-palette/command-container.tsx
index b95d177891..10066d75a2 100644
--- a/src/renderer/components/command-palette/command-container.tsx
+++ b/src/renderer/components/command-palette/command-container.tsx
@@ -113,3 +113,5 @@ export class CommandContainer extends React.Component<CommandContainerProps> {
     );
   }
 }
+
+export default CommandContainer;
diff --git a/src/renderer/components/confirm-dialog/confirm-dialog.tsx b/src/renderer/components/confirm-dialog/confirm-dialog.tsx
index 47e7eab665..f9ec0f1ce0 100644
--- a/src/renderer/components/confirm-dialog/confirm-dialog.tsx
+++ b/src/renderer/components/confirm-dialog/confirm-dialog.tsx
@@ -150,3 +150,5 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
     );
   }
 }
+
+export default ConfirmDialog;
diff --git a/src/renderer/components/hotbar/hotbar-menu.tsx b/src/renderer/components/hotbar/hotbar-menu.tsx
index 56fa7a25fc..8b001f27a6 100644
--- a/src/renderer/components/hotbar/hotbar-menu.tsx
+++ b/src/renderer/components/hotbar/hotbar-menu.tsx
@@ -188,7 +188,7 @@ export class HotbarMenu extends React.Component<Props> {
 
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
-        <div className="HotbarItems flex column gaps">
+        <div className="flex HotbarItems column gaps">
           <DragDropContext onDragEnd={this.onDragEnd.bind(this)}>
             {this.renderGrid()}
           </DragDropContext>
@@ -198,3 +198,5 @@ export class HotbarMenu extends React.Component<Props> {
     );
   }
 }
+
+export default HotbarMenu;
diff --git a/src/renderer/components/notifications/notifications.tsx b/src/renderer/components/notifications/notifications.tsx
index c940ec469a..33ca96dcd6 100644
--- a/src/renderer/components/notifications/notifications.tsx
+++ b/src/renderer/components/notifications/notifications.tsx
@@ -99,7 +99,7 @@ export class Notifications extends React.Component {
     const { notifications, remove, addAutoHideTimer, removeAutoHideTimer } = notificationsStore;
 
     return (
-      <div className="Notifications flex column align-flex-end" ref={e => this.elem = e}>
+      <div className="flex Notifications column align-flex-end" ref={e => this.elem = e}>
         {notifications.map(notification => {
           const { id, status, onClose } = notification;
           const msgText = this.getMessage(notification);
@@ -131,3 +131,5 @@ export class Notifications extends React.Component {
     );
   }
 }
+
+export default Notifications;
diff --git a/src/renderer/lens-app.tsx b/src/renderer/lens-app.tsx
index 35151dcee2..34f27ccffa 100644
--- a/src/renderer/lens-app.tsx
+++ b/src/renderer/lens-app.tsx
@@ -20,23 +20,24 @@
  */
 
 import "../common/system-ca";
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import { Route, Router, Switch } from "react-router";
 import { observer } from "mobx-react";
 import { history } from "./navigation";
-import { ClusterManager } from "./components/cluster-manager";
 import { ErrorBoundary } from "./components/error-boundary";
-import { Notifications } from "./components/notifications";
-import { ConfirmDialog } from "./components/confirm-dialog";
 import { ExtensionLoader } from "../extensions/extension-loader";
 import { broadcastMessage } from "../common/ipc";
-import { CommandContainer } from "./components/command-palette/command-container";
 import { bindProtocolAddRouteHandlers, LensProtocolRouterRenderer } from "./protocol-handler";
 import { registerIpcHandlers } from "./ipc";
 import { ipcRenderer } from "electron";
 import { IpcRendererNavigationEvents } from "./navigation/events";
 import { catalogEntityRegistry } from "./api/catalog-entity-registry";
 
+const Notifications = lazy(() => import("./components/notifications/notifications"));
+const ConfirmDialog = lazy(() => import("./components/confirm-dialog/confirm-dialog"));
+const CommandContainer = lazy(() => import("./components/command-palette/command-container"));
+const ClusterManager = lazy(() => import("./components/cluster-manager/cluster-manager"));
+
 @observer
 export class LensApp extends React.Component {
   static async init() {
@@ -59,13 +60,15 @@ export class LensApp extends React.Component {
     return (
       <Router history={history}>
         <ErrorBoundary>
-          <Switch>
-            <Route component={ClusterManager} />
-          </Switch>
+          <Suspense fallback={<div></div>}>
+            <Switch>
+              <Route component={ClusterManager} />
+            </Switch>
+            <Notifications />
+            <ConfirmDialog />
+            <CommandContainer />
+          </Suspense>
         </ErrorBoundary>
-        <Notifications />
-        <ConfirmDialog />
-        <CommandContainer />
       </Router>
     );
   }