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 14b607327b..ade34c8a76 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,7 +33,6 @@
     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 f227976b46..de82c192a0 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.scss
+++ b/src/renderer/components/+namespaces/namespace-select-filter.scss
@@ -33,7 +33,6 @@
       &::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 0c87c062df..6e1ebbbced 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: 1;
+  z-index: var(--z-index-base);
 
   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 b2b462c027..ef3951c5e3 100644
--- a/src/renderer/components/add-remove-buttons/add-remove-buttons.scss
+++ b/src/renderer/components/add-remove-buttons/add-remove-buttons.scss
@@ -9,7 +9,6 @@
   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 434159eee0..5b29352609 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -27,6 +27,13 @@
   --font-weight-normal: 400;
   --font-weight-bold: 500;
   --main-layout-header: 40px;
+
+  --z-index-base: 1;
+  --z-index-topmost: 9999;
+  --z-index-behind: -1;
+  --z-index-base-above: 2;
+  --z-index-middle: 3;
+  --z-index-menus: 4;
 }
 
 *, *:before, *:after {
@@ -250,17 +257,17 @@ iframe {
 }
 
 // app's common loading indicator, displaying on the route transitions
-#loading {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin: -15px;
-  z-index: 1000;
+// #loading {
+//   position: absolute;
+//   left: 50%;
+//   top: 50%;
+//   margin: -15px;
+//   // z-index: 1000;
 
-  &.hidden {
-    display: none;
-  }
-}
+//   &.hidden {
+//     display: none;
+//   }
+// }
 
 // hack-fix: remove crappy yellow background from auto-filled inputs in chrome
 @keyframes autofill-remove-bgc {
diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss
index 7644d1f4d3..67d17676d0 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: 1;
+    z-index: var(--z-index-base);
   }
 
   #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 194ef467db..a009434196 100644
--- a/src/renderer/components/cluster-manager/cluster-status.module.scss
+++ b/src/renderer/components/cluster-manager/cluster-status.module.scss
@@ -5,7 +5,6 @@
   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 4efb628881..0585a14bc0 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: $zIndex-dialog;
+  z-index: var(--z-index-middle);
   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 4a68a00c8a..48edc4d22c 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: 1;
+      z-index: var(--z-index-base);
     }
 
     &::before {
diff --git a/src/renderer/components/dock/dock.scss b/src/renderer/components/dock/dock.scss
index 365d74bad1..2db21de66f 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: 100;
+      z-index: var(--z-index-base);
     }
   }
 
diff --git a/src/renderer/components/drawer/drawer.scss b/src/renderer/components/drawer/drawer.scss
index 2ef81a82dc..1715eda991 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: $zIndex-drawer;
+  z-index: var(--z-index-base-above);
   height: 100%;
 
   &.left {
diff --git a/src/renderer/components/editable-list/editable-list.scss b/src/renderer/components/editable-list/editable-list.scss
index 089c92bce0..cb61178099 100644
--- a/src/renderer/components/editable-list/editable-list.scss
+++ b/src/renderer/components/editable-list/editable-list.scss
@@ -37,7 +37,6 @@
         &::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 d92e325350..9d09e04c1a 100644
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@@ -12,6 +12,7 @@
   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 a8154c4579..1318b30d1f 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: 1;
+      z-index: var(--z-index-base);
     }
   }
 }
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 678652a244..58676aff2e 100644
--- a/src/renderer/components/kube-object-details/kube-object-details.scss
+++ b/src/renderer/components/kube-object-details/kube-object-details.scss
@@ -4,8 +4,6 @@
  */
 
 .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 e882310427..d12331cb3b 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: 1;
+  z-index: var(--z-index-base);
   height: 100%;
 }
 
diff --git a/src/renderer/components/layout/setting-layout.scss b/src/renderer/components/layout/setting-layout.scss
index b37a68a569..3ace54a17c 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: 13!important;
+  z-index: var(--z-index-middle);
   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 7b3646dec3..368fe22f05 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: 2;
+  z-index: var(--z-index-base-above);
   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 62397dba24..e38ccda5c8 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: 1;
+    z-index: var(--z-index-base);
     border-color: #4078c0;
   }
 
diff --git a/src/renderer/components/menu/menu.scss b/src/renderer/components/menu/menu.scss
index 30e92d2a75..baee399b7f 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: 101;
+  z-index: var(--z-index-menus);
   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 f91ebde44c..82d1246b4f 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: 100000;
+  z-index: var(--z-index-topmost);
   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 bcdb159a43..7e18e789c5 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: 10;
+  z-index: var(--z-index-base);
 
   &::after {
     content: " ";
diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss
index 1cc50a2c00..68532e844c 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: $zIndex-select-portal; // render at the top when used inside dialog
+    z-index: var(--z-index-menus); // 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 381fb68b9c..0cc294440b 100644
--- a/src/renderer/components/table/table-head.scss
+++ b/src/renderer/components/table/table-head.scss
@@ -19,9 +19,7 @@
   }
 
   &.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 10b7669679..38af5f709e 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: 100000;
+  z-index: var(--z-index-topmost);
   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 2a4deb6f30..b22341d572 100755
--- a/src/renderer/components/vars.scss
+++ b/src/renderer/components/vars.scss
@@ -21,12 +21,6 @@ $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);