diff --git a/src/styles/components/main.scss b/src/styles/components/main.scss
index c428a67..6d4c27c 100644
--- a/src/styles/components/main.scss
+++ b/src/styles/components/main.scss
@@ -16,6 +16,7 @@ a.has-underline {
     bottom: 10px;
     // to not block the user to click on the last video
     pointer-events: none;
+    z-index: $z-index-messages;
 
     a {
       pointer-events: all;
diff --git a/src/styles/components/menu.scss b/src/styles/components/menu.scss
index 52ea473..3db6440 100644
--- a/src/styles/components/menu.scss
+++ b/src/styles/components/menu.scss
@@ -4,7 +4,7 @@
   top: 0;
   left: 0;
   color: #fff;
-  z-index: 999;
+  z-index: $z-index-menu;
 
   .ui.floating.label.has-update-not {
     top: -5px;
diff --git a/src/styles/constants.scss b/src/styles/constants.scss
new file mode 100644
index 0000000..edadc86
--- /dev/null
+++ b/src/styles/constants.scss
@@ -0,0 +1,3 @@
+$z-index-menu: 999;
+$z-index-messages: $z-index-menu + 1;
+// .ui.dimmer (semantic modal overlay) { z-index: 1000 }
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index b0a5e2a..b1de3ae 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,3 +1,4 @@
+@import './constants.scss';
 @import './colors.scss';
 @import './mixin.scss';
 @import './semantic-reset.scss';