diff --git a/assets/scss/_globals.scss b/assets/scss/_globals.scss
index 364d849..a61c8c8 100644
--- a/assets/scss/_globals.scss
+++ b/assets/scss/_globals.scss
@@ -3,6 +3,9 @@ $bp__m: 40em;
 // layout optomised for larger screens
 $bp__layout: $bp__m;
 
+$z-index__page: 50;
+$z-index__menu: 100;
+
 $site-menu__header-width: 3rem;
 $site-menu__header-height: 3rem;
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 11eed9e..64a0e85 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -45,13 +45,13 @@ export default {
 }
 
 .page {
-  z-index: 50;
+  z-index: $z-index__page;
   position: relative;
   width: 100%;
   height: 100%;
 }
 
 .menu {
-  z-index: 100;
+  z-index: $z-index__menu;
 }
 </style>