diff --git a/packages/console/src/components/Guide/ModalFooter/index.module.scss b/packages/console/src/components/Guide/ModalFooter/index.module.scss
index bf335686b..39754a73f 100644
--- a/packages/console/src/components/Guide/ModalFooter/index.module.scss
+++ b/packages/console/src/components/Guide/ModalFooter/index.module.scss
@@ -7,7 +7,7 @@
   padding: _.unit(4) _.unit(6);
   background-color: var(--color-layer-1);
   box-shadow: var(--shadow-3);
-  z-index: 1;
+  @include _.z-index(front);
 
   .wrapper {
     display: flex;
diff --git a/packages/console/src/components/Guide/index.module.scss b/packages/console/src/components/Guide/index.module.scss
index 887a6ef53..c1fb96bef 100644
--- a/packages/console/src/components/Guide/index.module.scss
+++ b/packages/console/src/components/Guide/index.module.scss
@@ -74,7 +74,7 @@
   padding: _.unit(4) _.unit(6);
   background-color: var(--color-layer-1);
   box-shadow: var(--shadow-3);
-  z-index: 1;
+  @include _.z-index(front);
 
   .layout {
     margin: 0 auto;
diff --git a/packages/console/src/ds-components/Button/index.module.scss b/packages/console/src/ds-components/Button/index.module.scss
index 5837a35ec..b44432fb1 100644
--- a/packages/console/src/ds-components/Button/index.module.scss
+++ b/packages/console/src/ds-components/Button/index.module.scss
@@ -257,7 +257,7 @@
         position: absolute;
         inset: 0;
         background-color: var(--color-layer-1);
-        z-index: -1;
+        @include _.z-index(behind);
       }
     }
   }
diff --git a/packages/console/src/ds-components/CodeEditor/index.module.scss b/packages/console/src/ds-components/CodeEditor/index.module.scss
index aa195112f..99f5415a7 100644
--- a/packages/console/src/ds-components/CodeEditor/index.module.scss
+++ b/packages/console/src/ds-components/CodeEditor/index.module.scss
@@ -25,7 +25,7 @@
     right: _.unit(3);
     opacity: 0%;
     transition: opacity 0.2s ease-in-out;
-    z-index: 1;
+    @include _.z-index(front);
     cursor: pointer;
   }
 
diff --git a/packages/console/src/ds-components/ConfirmModal/index.module.scss b/packages/console/src/ds-components/ConfirmModal/index.module.scss
index 29165f829..6c3fdec49 100644
--- a/packages/console/src/ds-components/ConfirmModal/index.module.scss
+++ b/packages/console/src/ds-components/ConfirmModal/index.module.scss
@@ -1,7 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .overlay {
-  z-index: 1000;
+  @include _.z-index(confirm-modal);
 }
 
 .content {
diff --git a/packages/console/src/ds-components/Dropdown/index.module.scss b/packages/console/src/ds-components/Dropdown/index.module.scss
index d21ca31a1..5ec221d91 100644
--- a/packages/console/src/ds-components/Dropdown/index.module.scss
+++ b/packages/console/src/ds-components/Dropdown/index.module.scss
@@ -28,5 +28,5 @@
   background: transparent;
   position: fixed;
   inset: 0;
-  z-index: 102;
+  @include _.z-index(dropdown);
 }
diff --git a/packages/console/src/ds-components/Tip/TipBubble/index.module.scss b/packages/console/src/ds-components/Tip/TipBubble/index.module.scss
index 9920be027..7cde76f8a 100644
--- a/packages/console/src/ds-components/Tip/TipBubble/index.module.scss
+++ b/packages/console/src/ds-components/Tip/TipBubble/index.module.scss
@@ -10,7 +10,7 @@
   font: var(--font-body-2);
   max-width: 300px;
   white-space: pre-wrap;
-  z-index: 200;
+  @include _.z-index(tooltip);
 
   &.successful {
     background: var(--color-success-60);
diff --git a/packages/console/src/pages/ApiResourceDetails/components/GuideDrawer/index.module.scss b/packages/console/src/pages/ApiResourceDetails/components/GuideDrawer/index.module.scss
index 49557344d..511d91114 100644
--- a/packages/console/src/pages/ApiResourceDetails/components/GuideDrawer/index.module.scss
+++ b/packages/console/src/pages/ApiResourceDetails/components/GuideDrawer/index.module.scss
@@ -15,7 +15,7 @@
   font: var(--font-title-2);
   color: var(--color-text);
   box-shadow: var(--shadow-1);
-  z-index: 1;
+  @include _.z-index(front);
 
   .separator {
     border-left: 1px solid var(--color-border);
diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/GuideDrawer/index.module.scss b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/GuideDrawer/index.module.scss
index 49557344d..511d91114 100644
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/GuideDrawer/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/GuideDrawer/index.module.scss
@@ -15,7 +15,7 @@
   font: var(--font-title-2);
   color: var(--color-text);
   box-shadow: var(--shadow-1);
-  z-index: 1;
+  @include _.z-index(front);
 
   .separator {
     border-left: 1px solid var(--color-border);
diff --git a/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.module.scss b/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.module.scss
index 79911a65b..f5e4abf71 100644
--- a/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.module.scss
@@ -70,7 +70,7 @@
   padding: _.unit(4) _.unit(6);
   background-color: var(--color-layer-1);
   box-shadow: var(--shadow-3);
-  z-index: 1;
+  @include _.z-index(front);
 
   .layout {
     margin: 0 auto;
diff --git a/packages/console/src/pages/Applications/components/GuideLibrary/index.module.scss b/packages/console/src/pages/Applications/components/GuideLibrary/index.module.scss
index 8472cd136..6525c5919 100644
--- a/packages/console/src/pages/Applications/components/GuideLibrary/index.module.scss
+++ b/packages/console/src/pages/Applications/components/GuideLibrary/index.module.scss
@@ -56,7 +56,7 @@
     position: absolute;
     right: -2px;
     bottom: 0;
-    z-index: 1;
+    @include _.z-index(front);
   }
 }
 
diff --git a/packages/console/src/scss/_underscore.scss b/packages/console/src/scss/_underscore.scss
index 6813f7680..030023380 100644
--- a/packages/console/src/scss/_underscore.scss
+++ b/packages/console/src/scss/_underscore.scss
@@ -96,3 +96,23 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+$allowed-z-indexes: (
+  base: 0,
+  front: 1,
+  behind: -1,
+  modal-backdrop: 100,
+  modal: 101,
+  confirm-modal: 102,
+  dropdown: 199,
+  tooltip: 200,
+);
+
+@mixin z-index($index) {
+  @if map-has-key($allowed-z-indexes, $index) {
+    z-index: map-get($allowed-z-indexes, $index);
+  }
+  @else {
+    @error 'Invalid z-index value. Allowed values are #{map-keys($allowed-z-indexes)}';
+  }
+}