diff --git a/base.scss b/base.scss
index daa64e21c..d3e089090 100644
--- a/base.scss
+++ b/base.scss
@@ -13,7 +13,8 @@
 @import "./src/stories/Library/Arrows/arrows";
 @import "./src/stories/Library/Buttons/button/buttons";
 @import "./src/stories/Library/Buttons/button-ui/buttons-ui";
-@import "./src/stories/Library/spacing/spacing";
+@import "./src/stories/Library/layout/spacing";
+@import "./src/stories/Library/layout/z-index";
 @import "./src/stories/Library/tag/tag";
 @import "./src/stories/Library/logo/logo";
 @import "./src/stories/Library/pagefold/pagefold";
diff --git a/src/stories/Blocks/autosuggest/autosuggest.scss b/src/stories/Blocks/autosuggest/autosuggest.scss
index 0b5a84cb4..504ac3edb 100644
--- a/src/stories/Blocks/autosuggest/autosuggest.scss
+++ b/src/stories/Blocks/autosuggest/autosuggest.scss
@@ -5,7 +5,7 @@
   left: 0;
   right: 0;
   top: calc(100% + 1px);
-  z-index: 1;
+  z-index: $z-5;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss
index 2acc8f842..d5d37d7b3 100644
--- a/src/stories/Blocks/header/header.scss
+++ b/src/stories/Blocks/header/header.scss
@@ -8,7 +8,7 @@
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 500ms;
-  z-index: 5000;
+  z-index: $z-20;
 
   @include breakpoint-s {
     grid-template-columns: 1fr 105px;
@@ -217,7 +217,7 @@
 #header__overlay {
   /* stylelint-disable-line */
   display: none;
-  z-index: 5;
+  z-index: $z-20;
   position: fixed;
   top: 0;
   left: 0;
diff --git a/src/stories/Library/Lists/list-reservation/list-reservation.scss b/src/stories/Library/Lists/list-reservation/list-reservation.scss
index 0b52d82b2..67bca455e 100644
--- a/src/stories/Library/Lists/list-reservation/list-reservation.scss
+++ b/src/stories/Library/Lists/list-reservation/list-reservation.scss
@@ -185,7 +185,7 @@ $list-reservation-space-desktop: 24px;
 
     content: " ";
     transform: translateY(8px) scale(0.95);
-    z-index: -1;
+    z-index: $-z-5;
   }
 
   &::before {
@@ -193,7 +193,7 @@ $list-reservation-space-desktop: 24px;
 
     content: " ";
     transform: translateY(16px) scale(0.9);
-    z-index: -2;
+    z-index: $-z-10;
   }
 
   &:hover {
diff --git a/src/stories/Library/Modals/modal-details/modal-details.scss b/src/stories/Library/Modals/modal-details/modal-details.scss
index f891ad1af..899ffa3a3 100644
--- a/src/stories/Library/Modals/modal-details/modal-details.scss
+++ b/src/stories/Library/Modals/modal-details/modal-details.scss
@@ -123,7 +123,7 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px;
   right: 0;
   padding: 34px;
   transition: 0.3s;
-  z-index: 2;
+  z-index: $z-10;
 
   &:hover {
     transform: rotateZ(90deg);
diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss
index 3751f9921..62bebad6b 100644
--- a/src/stories/Library/Modals/modal.scss
+++ b/src/stories/Library/Modals/modal.scss
@@ -71,7 +71,7 @@
   width: 100%;
   height: 100%;
   position: fixed;
-  z-index: 5;
+  z-index: $z-20;
   top: 0;
   left: 0;
   background-color: hsla(0, 0%, 15%, 0.5);
@@ -87,7 +87,7 @@
   right: 0;
   padding: 22.5px;
   transition: 0.3s;
-  z-index: 2;
+  z-index: $z-15;
 
   &.modal-btn-close--offset {
     @include breakpoint-s {
diff --git a/src/stories/Library/spacing/Spacing.stories.tsx b/src/stories/Library/layout/Spacing.stories.tsx
similarity index 100%
rename from src/stories/Library/spacing/Spacing.stories.tsx
rename to src/stories/Library/layout/Spacing.stories.tsx
diff --git a/src/stories/Library/spacing/Spacing.tsx b/src/stories/Library/layout/Spacing.tsx
similarity index 100%
rename from src/stories/Library/spacing/Spacing.tsx
rename to src/stories/Library/layout/Spacing.tsx
diff --git a/src/stories/Library/spacing/spacing.scss b/src/stories/Library/layout/spacing.scss
similarity index 100%
rename from src/stories/Library/spacing/spacing.scss
rename to src/stories/Library/layout/spacing.scss
diff --git a/src/stories/Library/layout/z-index.scss b/src/stories/Library/layout/z-index.scss
new file mode 100644
index 000000000..b0d8ff755
--- /dev/null
+++ b/src/stories/Library/layout/z-index.scss
@@ -0,0 +1,8 @@
+$-z-10: -10;
+$-z-5: -5;
+$z-5: 5;
+$z-10: 10;
+$z-15: 15;
+$z-20: 20;
+$z-25: 25;
+