diff --git a/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss b/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss
index ade34c8a76..14b607327b 100644
--- a/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss
+++ b/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss
@@ -33,6 +33,7 @@
     height: 100%;
     left: 0;
     opacity: 0.15;
+    z-index: -1;
     transition: opacity 0.1s;
   }
 }
diff --git a/src/renderer/components/+namespaces/namespace-select-filter.scss b/src/renderer/components/+namespaces/namespace-select-filter.scss
index de82c192a0..f227976b46 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.scss
+++ b/src/renderer/components/+namespaces/namespace-select-filter.scss
@@ -33,6 +33,7 @@
       &::before, &::after {
         content: ' ';
         position: absolute;
+        z-index: 20;
         display: block;
         width: 8px;
         height: var(--font-size);
diff --git a/src/renderer/components/+welcome/welcome.scss b/src/renderer/components/+welcome/welcome.scss
index 6e1ebbbced..0c87c062df 100644
--- a/src/renderer/components/+welcome/welcome.scss
+++ b/src/renderer/components/+welcome/welcome.scss
@@ -7,7 +7,7 @@
   text-align: center;
   width: 100%;
   height: 100%;
-  z-index: var(--z-index-base);
+  z-index: 1;
 
   h2 {
     color: var(--textColorAccent);
diff --git a/src/renderer/components/add-remove-buttons/add-remove-buttons.scss b/src/renderer/components/add-remove-buttons/add-remove-buttons.scss
index ef3951c5e3..b2b462c027 100644
--- a/src/renderer/components/add-remove-buttons/add-remove-buttons.scss
+++ b/src/renderer/components/add-remove-buttons/add-remove-buttons.scss
@@ -9,6 +9,7 @@
   margin-right: $padding * 4;
   bottom: 0;
   right: 0;
+  z-index: 99;
 
   .Button {
     &.remove-button {
diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
index 49ec7426ea..f44d1ee165 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -26,12 +26,6 @@
   --font-weight-normal: 400;
   --font-weight-bold: 500;
   --main-layout-header: 40px;
-
-  --z-index-base: 0;
-  --z-index-above: 1;
-  --z-index-modals: 2;
-  --z-index-menus: 3;
-  --z-index-topmost: 9999;
 }
 
 *, *:before, *:after {
@@ -254,6 +248,19 @@ iframe {
   }
 }
 
+// app's common loading indicator, displaying on the route transitions
+#loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -15px;
+  z-index: 1000;
+
+  &.hidden {
+    display: none;
+  }
+}
+
 // hack-fix: remove crappy yellow background from auto-filled inputs in chrome
 @keyframes autofill-remove-bgc {
   to {
diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss
index 67d17676d0..7644d1f4d3 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.scss
+++ b/src/renderer/components/cluster-manager/cluster-manager.scss
@@ -27,7 +27,7 @@
   }
 
   .error {
-    z-index: var(--z-index-base);
+    z-index: 1;
   }
 
   #lens-views {
diff --git a/src/renderer/components/cluster-manager/cluster-status.module.scss b/src/renderer/components/cluster-manager/cluster-status.module.scss
index a009434196..194ef467db 100644
--- a/src/renderer/components/cluster-manager/cluster-status.module.scss
+++ b/src/renderer/components/cluster-manager/cluster-status.module.scss
@@ -5,6 +5,7 @@
   min-width: 350px;
   margin: auto;
   text-align: center;
+  z-index: 1;
   background: var(--mainBackground);
   width: 100%;
   height: 100%;
diff --git a/src/renderer/components/dialog/dialog.scss b/src/renderer/components/dialog/dialog.scss
index ddc7590915..4efb628881 100644
--- a/src/renderer/components/dialog/dialog.scss
+++ b/src/renderer/components/dialog/dialog.scss
@@ -12,7 +12,7 @@
   width: 100%;
   height: 100%;
   padding: $unit * 5;
-  z-index: var(--z-index-modals);
+  z-index: $zIndex-dialog;
   overscroll-behavior: none; // prevent swiping with touch-pad on MacOSX
   overflow: auto;
 
diff --git a/src/renderer/components/dock/dock-tabs.module.scss b/src/renderer/components/dock/dock-tabs.module.scss
index 48edc4d22c..4a68a00c8a 100644
--- a/src/renderer/components/dock/dock-tabs.module.scss
+++ b/src/renderer/components/dock/dock-tabs.module.scss
@@ -44,7 +44,7 @@
       content: "\00A0";
       position: sticky;
       min-width: 8px;
-      z-index: var(--z-index-base);
+      z-index: 1;
     }
 
     &::before {
diff --git a/src/renderer/components/dock/dock.scss b/src/renderer/components/dock/dock.scss
index 2db21de66f..365d74bad1 100644
--- a/src/renderer/components/dock/dock.scss
+++ b/src/renderer/components/dock/dock.scss
@@ -26,7 +26,7 @@
       right: 0;
       left: 0;
       bottom: 0;
-      z-index: var(--z-index-base);
+      z-index: 100;
     }
   }
 
diff --git a/src/renderer/components/drawer/drawer.scss b/src/renderer/components/drawer/drawer.scss
index cb2944beeb..2ef81a82dc 100644
--- a/src/renderer/components/drawer/drawer.scss
+++ b/src/renderer/components/drawer/drawer.scss
@@ -11,7 +11,7 @@
   position: absolute;
   background: var(--contentColor);
   box-shadow: 0 0 $unit * 2 var(--boxShadow);
-  z-index: var(--z-index-above);
+  z-index: $zIndex-drawer;
   height: 100%;
 
   &.left {
diff --git a/src/renderer/components/editable-list/editable-list.scss b/src/renderer/components/editable-list/editable-list.scss
index cb61178099..089c92bce0 100644
--- a/src/renderer/components/editable-list/editable-list.scss
+++ b/src/renderer/components/editable-list/editable-list.scss
@@ -37,6 +37,7 @@
         &::before, &::after {
           content: ' ';
           position: absolute;
+          z-index: 20;
           display: block;
           width: 8px;
           height: var(--font-size);
diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss
index 9d09e04c1a..d92e325350 100644
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@@ -12,7 +12,6 @@
   padding-top: 1px;
   width: var(--hotbar-width);
   overflow: hidden;
-  isolation: isolate;
 
   &.draggingOver::after {
     content: " ";
diff --git a/src/renderer/components/hotbar/hotbar-selector.module.scss b/src/renderer/components/hotbar/hotbar-selector.module.scss
index 1318b30d1f..a8154c4579 100644
--- a/src/renderer/components/hotbar/hotbar-selector.module.scss
+++ b/src/renderer/components/hotbar/hotbar-selector.module.scss
@@ -40,7 +40,7 @@
     }
 
     &:focus-visible {
-      z-index: var(--z-index-base);
+      z-index: 1;
     }
   }
 }
diff --git a/src/renderer/components/kube-object-details/kube-object-details.scss b/src/renderer/components/kube-object-details/kube-object-details.scss
index 58676aff2e..678652a244 100644
--- a/src/renderer/components/kube-object-details/kube-object-details.scss
+++ b/src/renderer/components/kube-object-details/kube-object-details.scss
@@ -4,6 +4,8 @@
  */
 
 .KubeObjectDetails {
+  z-index: $zIndex-drawer + 1 !important;
+
   .drawer-title {
     .Menu {
       border: none;
diff --git a/src/renderer/components/layout/main-layout.module.scss b/src/renderer/components/layout/main-layout.module.scss
index d12331cb3b..e882310427 100644
--- a/src/renderer/components/layout/main-layout.module.scss
+++ b/src/renderer/components/layout/main-layout.module.scss
@@ -11,7 +11,7 @@
   grid-template-rows: [contents] 1fr [footer] auto;
   grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr;
   width: 100%;
-  z-index: var(--z-index-base);
+  z-index: 1;
   height: 100%;
 }
 
diff --git a/src/renderer/components/layout/setting-layout.scss b/src/renderer/components/layout/setting-layout.scss
index 611fd0aa7b..b37a68a569 100644
--- a/src/renderer/components/layout/setting-layout.scss
+++ b/src/renderer/components/layout/setting-layout.scss
@@ -10,7 +10,7 @@
   display: grid;
   color: var(--settingsColor);
   position: fixed;
-  z-index: var(--z-index-modals);
+  z-index: 13!important;
   left: 0;
   top: 0;
   right: 0;
diff --git a/src/renderer/components/layout/top-bar/top-bar.module.scss b/src/renderer/components/layout/top-bar/top-bar.module.scss
index acb0d51b09..7b3646dec3 100644
--- a/src/renderer/components/layout/top-bar/top-bar.module.scss
+++ b/src/renderer/components/layout/top-bar/top-bar.module.scss
@@ -5,7 +5,7 @@
 
 .topBar {
   background-color: var(--layoutBackground);
-  z-index: var(--z-index-above);
+  z-index: 2;
   grid-area: topbar;
   height: var(--main-layout-header);
 
diff --git a/src/renderer/components/markdown-viewer/markdown-viewer.scss b/src/renderer/components/markdown-viewer/markdown-viewer.scss
index e38ccda5c8..62397dba24 100644
--- a/src/renderer/components/markdown-viewer/markdown-viewer.scss
+++ b/src/renderer/components/markdown-viewer/markdown-viewer.scss
@@ -658,7 +658,7 @@
 
   :checked + .radio-label {
     position: relative;
-    z-index: var(--z-index-base);
+    z-index: 1;
     border-color: #4078c0;
   }
 
diff --git a/src/renderer/components/menu/menu.scss b/src/renderer/components/menu/menu.scss
index baee399b7f..30e92d2a75 100644
--- a/src/renderer/components/menu/menu.scss
+++ b/src/renderer/components/menu/menu.scss
@@ -12,7 +12,7 @@
   background: var(--bgc);
   list-style: none;
   border: 1px solid var(--borderColor);
-  z-index: var(--z-index-menus);
+  z-index: 101;
   box-shadow: rgb(0 0 0 / 17%) 0px 6px 9px 0px;
   border-radius: 4px;
 
diff --git a/src/renderer/components/notifications/notifications.scss b/src/renderer/components/notifications/notifications.scss
index 82d1246b4f..f91ebde44c 100644
--- a/src/renderer/components/notifications/notifications.scss
+++ b/src/renderer/components/notifications/notifications.scss
@@ -11,7 +11,7 @@
   top: 0;
   padding: $padding * 2;
   max-height: 100vh;
-  z-index: var(--z-index-topmost);
+  z-index: 100000;
   height: min-content!important;
 
   &:empty {
diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.scss b/src/renderer/components/resizing-anchor/resizing-anchor.scss
index 4abfd4e933..bcdb159a43 100644
--- a/src/renderer/components/resizing-anchor/resizing-anchor.scss
+++ b/src/renderer/components/resizing-anchor/resizing-anchor.scss
@@ -13,7 +13,7 @@ body.resizing {
   $dimension: 12px;
 
   position: absolute;
-  z-index: var(--z-index-above);
+  z-index: 10;
 
   &::after {
     content: " ";
diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss
index 68532e844c..1cc50a2c00 100644
--- a/src/renderer/components/select/select.scss
+++ b/src/renderer/components/select/select.scss
@@ -145,7 +145,7 @@ html {
   //-- Themes
 
   .Select__menu {
-    z-index: var(--z-index-menus); // render at the top when used inside dialog
+    z-index: $zIndex-select-portal; // render at the top when used inside dialog
   }
 
   .Select, .Select__menu {
diff --git a/src/renderer/components/table/table-head.scss b/src/renderer/components/table/table-head.scss
index e926d5e1f0..ff9c6afec7 100644
--- a/src/renderer/components/table/table-head.scss
+++ b/src/renderer/components/table/table-head.scss
@@ -15,7 +15,9 @@
   }
 
   &.sticky {
+    position: -webkit-sticky; // safari
     position: sticky;
+    z-index: 1;
     top: 0;
   }
 
diff --git a/src/renderer/components/tooltip/tooltip.scss b/src/renderer/components/tooltip/tooltip.scss
index 38af5f709e..10b7669679 100644
--- a/src/renderer/components/tooltip/tooltip.scss
+++ b/src/renderer/components/tooltip/tooltip.scss
@@ -24,7 +24,7 @@
   text-align: center;
   pointer-events: none;
   transition: opacity 150ms 150ms ease-in-out;
-  z-index: var(--z-index-topmost);
+  z-index: 100000;
   box-shadow: 0 8px 16px rgba(0,0,0,0.24);
   left: 0;
   top: 0;
diff --git a/src/renderer/components/vars.scss b/src/renderer/components/vars.scss
index b22341d572..2a4deb6f30 100755
--- a/src/renderer/components/vars.scss
+++ b/src/renderer/components/vars.scss
@@ -21,6 +21,12 @@ $font-weight-thin: var(--font-weight-thin);
 $font-weight-normal: var(--font-weight-normal);
 $font-weight-bold: var(--font-weight-bold);
 
+// Z-index correlations
+$zIndex-sidebar-hover: 500;
+$zIndex-select-portal: 300;
+$zIndex-dialog: 200;
+$zIndex-drawer: 100;
+
 // Animation timing functions
 $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);