diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 50181faab..6300970e9 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -29,7 +29,7 @@
     position: absolute;
     top: calc(#{$header-height} + var(--title-bar-drag-area-height));
     width: 100%;
-    z-index: 1;
+    z-index: $z-index-base;
 
     @include light-theme() {
       background-color: $color-white;
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 5073212ab..d60b56bb4 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -93,7 +93,7 @@ audio {
   bottom: 0;
 
   opacity: 0.25;
-  z-index: 200;
+  z-index: $z-index-popup-overlay;
 
   @include light-theme {
     background-color: $color-black;
@@ -175,44 +175,6 @@ a {
   }
 }
 
-.banner {
-  z-index: 100;
-
-  background-color: $color-ios-blue-tint;
-  color: $color-black;
-  box-shadow: 0px 3px 5px 0px $color-black-alpha-20;
-
-  position: absolute;
-  top: 25px;
-  right: 30px;
-  left: 30px;
-
-  padding: 5px 25px 5px 10px;
-
-  text-align: center;
-  border-radius: 10px;
-
-  cursor: pointer;
-
-  .warning {
-    width: 18px;
-    height: 18px;
-    display: inline-block;
-    vertical-align: text-bottom;
-    @include color-svg('../images/icons/v2/error-solid-24.svg', black);
-  }
-
-  .dismiss {
-    position: absolute;
-    right: 3px;
-    top: 3px;
-
-    height: 23px;
-    width: 23px;
-    @include color-svg('../images/icons/v2/x-24.svg', black);
-  }
-}
-
 $loading-height: 16px;
 
 .loading {
@@ -267,7 +229,7 @@ $loading-height: 16px;
 }
 
 .app-loading-screen {
-  z-index: 99;
+  z-index: $z-index-on-top-of-everything;
   position: absolute;
   left: 0;
   right: 0;
@@ -323,8 +285,7 @@ $loading-height: 16px;
   bottom: 0;
 
   &.overlay {
-    // .modal, used for the settings view, is 100
-    z-index: 200;
+    z-index: $z-index-popup-overlay;
   }
 
   color: $color-black;
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index 12ece5ffc..ae6cd78d7 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -233,7 +233,7 @@
   right: 8px;
   width: 18px;
   height: 18px;
-  z-index: 2;
+  z-index: $z-index-above-base;
 }
 
 @mixin calling-text-shadow {
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 4df7e1164..bd33261e0 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -10,7 +10,7 @@
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 999;
+  z-index: $z-index-on-top-of-everything;
 }
 
 .module-splash-screen {
@@ -256,7 +256,7 @@
     height: 24px;
     // the z-index here is so that this container is above the message and when
     // clicked on, doesn't propagate the click event to the message.
-    z-index: 2;
+    z-index: $z-index-above-base;
 
     @include light-theme {
       background-color: $color-white;
@@ -1070,7 +1070,7 @@
 .module-message__metadata--with-image-no-caption {
   position: absolute;
   bottom: 9px;
-  z-index: 2;
+  z-index: $z-index-above-base;
 
   width: 100%;
   // Because this is absolutely positioned, we 100% is too big, take it down by parent
@@ -1259,7 +1259,7 @@
 
 .module-message__reactions {
   position: relative;
-  z-index: 2;
+  z-index: $z-index-above-base;
   height: 22px;
   display: flex;
   user-select: none;
@@ -2876,7 +2876,7 @@ button.ConversationDetails__action-button {
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 2;
+  z-index: $z-index-above-base;
 }
 
 .module-image__border-overlay--with-click-handler {
@@ -2998,7 +2998,7 @@ button.module-image__border-overlay:focus {
   );
   position: absolute;
   bottom: 0;
-  z-index: 1;
+  z-index: $z-index-base;
   left: 0;
   right: 0;
 }
@@ -3035,7 +3035,7 @@ button.module-image__border-overlay:focus {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 3;
+  z-index: $z-index-above-above-base;
 
   // This allows click-through to the overlay button behind it
   pointer-events: none;
@@ -3232,7 +3232,7 @@ button.module-image__border-overlay:focus {
   width: 20px;
   height: 20px;
 
-  z-index: 2;
+  z-index: $z-index-above-base;
   @include color-svg('../images/icons/v2/x-24.svg', $color-black);
 
   @include keyboard-mode {
@@ -3560,7 +3560,7 @@ button.module-image__border-overlay:focus {
   top: 0;
   left: 0;
 
-  z-index: 2;
+  z-index: $z-index-above-base;
   height: 100%;
   width: 100%;
 
@@ -3571,7 +3571,7 @@ button.module-image__border-overlay:focus {
   top: 0;
   left: 0;
 
-  z-index: 3;
+  z-index: $z-index-above-above-base;
   height: 100%;
   width: 100%;
 
@@ -3829,7 +3829,7 @@ button.module-image__border-overlay:focus {
     justify-content: center;
     position: absolute;
     width: 100%;
-    z-index: 2;
+    z-index: $z-index-below-popup-overlay;
   }
 
   &__header {
@@ -3893,7 +3893,7 @@ button.module-image__border-overlay:focus {
     @include font-body-1;
     color: $color-white;
     display: flex;
-    z-index: 1;
+    z-index: $z-index-base;
 
     &::before {
       content: '';
@@ -4153,7 +4153,7 @@ button.module-image__border-overlay:focus {
     background: linear-gradient($color-black-alpha-40, transparent);
     top: 0;
     width: 100%;
-    z-index: 2;
+    z-index: $z-index-above-base;
     padding-bottom: 1rem;
   }
 
@@ -4217,7 +4217,7 @@ button.module-image__border-overlay:focus {
         position: absolute;
         transition: opacity 200ms ease-out;
         width: 100%;
-        z-index: 1;
+        z-index: $z-index-base;
 
         &--hidden {
           opacity: 0;
@@ -4331,7 +4331,7 @@ button.module-image__border-overlay:focus {
       position: absolute;
       user-select: none;
       width: 100%;
-      z-index: 2;
+      z-index: $z-index-above-base;
     }
 
     &--contact-name {
@@ -4352,7 +4352,7 @@ button.module-image__border-overlay:focus {
       position: absolute;
       right: 6px;
       width: 14px;
-      z-index: 1;
+      z-index: $z-index-base;
     }
   }
 
@@ -4365,7 +4365,7 @@ button.module-image__border-overlay:focus {
     position: absolute;
     top: 0;
     width: 100%;
-    z-index: -1;
+    z-index: $z-index-negative;
 
     video {
       @include lonely-local-video-preview;
@@ -4384,7 +4384,7 @@ button.module-image__border-overlay:focus {
     display: flex;
     justify-content: space-between;
     width: 100%;
-    z-index: 2;
+    z-index: $z-index-above-base;
 
     &__actions {
       align-items: center;
@@ -4433,7 +4433,7 @@ button.module-image__border-overlay:focus {
         position: absolute;
         right: 6px;
         width: 14px;
-        z-index: 1;
+        z-index: $z-index-base;
       }
     }
   }
@@ -4470,7 +4470,7 @@ button.module-image__border-overlay:focus {
     top: 12px;
     transition: top 200ms ease-out, opacity 200ms ease-out;
     user-select: none;
-    z-index: 3;
+    z-index: $z-index-above-above-base;
 
     &--hidden {
       opacity: 0;
@@ -4500,7 +4500,7 @@ button.module-image__border-overlay:focus {
   height: 158px;
   position: absolute;
   width: 120px;
-  z-index: 2;
+  z-index: $z-index-above-base;
 
   & .module-ongoing-call__group-call-remote-participant {
     border-radius: 0;
@@ -4605,7 +4605,7 @@ button.module-image__border-overlay:focus {
     position: absolute;
     top: 0;
     width: 100vw;
-    z-index: 2;
+    z-index: $z-index-above-base;
   }
 
   &__title {
@@ -4674,7 +4674,7 @@ button.module-image__border-overlay:focus {
 
     height: 16px;
     width: 16px;
-    z-index: 2;
+    z-index: $z-index-above-base;
 
     @include keyboard-mode {
       &:focus {
@@ -5589,7 +5589,7 @@ button.module-image__border-overlay:focus {
   height: 100%;
   right: -8px;
   top: 0;
-  z-index: 2;
+  z-index: $z-index-above-base;
   cursor: col-resize;
 }
 
@@ -5643,7 +5643,7 @@ button.module-image__border-overlay:focus {
   width: 332px;
   border-radius: 8px;
   margin-bottom: 6px;
-  z-index: 2;
+  z-index: $z-index-above-base;
   user-select: none;
   overflow: hidden;
 
@@ -6219,7 +6219,7 @@ button.module-image__border-overlay:focus {
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 1;
+    z-index: $z-index-base;
   }
 
   &__container {
@@ -6469,7 +6469,7 @@ button.module-image__border-overlay:focus {
   padding: 7px 12px;
   border-radius: 8px;
   margin-bottom: 6px;
-  z-index: 1;
+  z-index: $z-index-base;
 
   @include light-theme {
     background: $color-white;
@@ -7164,7 +7164,7 @@ button.module-image__border-overlay:focus {
     padding: 0;
     margin-bottom: 6px;
     border-radius: 8px;
-    z-index: 2;
+    z-index: $z-index-above-base;
     overflow: hidden;
 
     &--scroller {
@@ -7269,7 +7269,7 @@ button.module-image__border-overlay:focus {
 // Module: Scroll Down Button
 
 .module-scroll-down {
-  z-index: 100;
+  z-index: $z-index-scroll-down-button;
   position: absolute;
   right: 20px;
   bottom: 10px;
@@ -7533,9 +7533,7 @@ button.module-image__border-overlay:focus {
   align-items: center;
 
   background-color: $color-black-alpha-40;
-
-  // react-contextmenu uses a z-index of 1000
-  z-index: 2000;
+  z-index: $z-index-above-context-menu;
 }
 
 .module-shortcut-guide-container {
@@ -7722,7 +7720,7 @@ button.module-image__border-overlay:focus {
   right: 5px;
   top: 0;
   width: 24px;
-  z-index: 2;
+  z-index: $z-index-above-base;
 
   @include keyboard-mode {
     &:focus {
@@ -7777,7 +7775,7 @@ button.module-image__border-overlay:focus {
     transform-origin: center;
     transform: rotate(-45deg);
     width: 10px;
-    z-index: 2;
+    z-index: $z-index-above-base;
   }
 }
 
@@ -7897,7 +7895,7 @@ button.module-image__border-overlay:focus {
   position: absolute;
   top: 0;
   width: 100vw;
-  z-index: 2;
+  z-index: $z-index-popup-overlay;
 }
 
 .module-modal-host__container {
@@ -7911,7 +7909,7 @@ button.module-image__border-overlay:focus {
   position: absolute;
   top: 0;
   width: 100vw;
-  z-index: 2;
+  z-index: $z-index-popup-overlay;
 }
 
 // Module: GroupV2 Join Dialog
@@ -8045,7 +8043,7 @@ button.module-image__border-overlay:focus {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 5;
+  z-index: $z-index-popup-overlay;
 }
 
 // Module: Error Modal
@@ -8116,7 +8114,7 @@ button.module-image__border-overlay:focus {
   padding: 8px 21px;
   position: fixed;
   text-align: center;
-  z-index: 999;
+  z-index: $z-index-tooltip;
 
   .module-tooltip-arrow {
     position: absolute;
@@ -8249,7 +8247,7 @@ button.module-image__border-overlay:focus {
 .react-contextmenu--visible {
   opacity: 1;
   visibility: visible;
-  z-index: 1000;
+  z-index: $z-index-context-menu;
 }
 
 .react-contextmenu-item {
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index ac32cc443..6c02cc0e1 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -237,3 +237,24 @@ $header-height: 52px;
 $ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
 
 $calling-background-color: $color-gray-95;
+
+// General
+
+$z-index-negative: -1;
+$z-index-base: 1;
+$z-index-above-base: 2;
+$z-index-above-above-base: 3;
+$z-index-popup-overlay: 99;
+$z-index-popup: 100;
+$z-index-context-menu: 125;
+$z-index-tooltip: 150;
+$z-index-toast: 200;
+$z-index-on-top-of-everything: 9000;
+
+// Component specific
+// The scroll down button should be above everything in the timeline but
+// popups, tooltips, toasts, and other items should stack above it.
+$z-index-scroll-down-button: 10;
+$z-index-below-popup-overlay: 98;
+$z-index-above-popup: 101;
+$z-index-above-context-menu: 126;
diff --git a/stylesheets/components/Avatar.scss b/stylesheets/components/Avatar.scss
index ca4c0fa56..3230e5b78 100644
--- a/stylesheets/components/Avatar.scss
+++ b/stylesheets/components/Avatar.scss
@@ -113,7 +113,7 @@
 
   &__badge {
     position: absolute;
-    z-index: 1;
+    z-index: $z-index-base;
 
     // Positioning should be overridden by JavaScript. These are set defensively.
     bottom: 0;
diff --git a/stylesheets/components/CallingLobby.scss b/stylesheets/components/CallingLobby.scss
index cd00a7ab0..eae8917d4 100644
--- a/stylesheets/components/CallingLobby.scss
+++ b/stylesheets/components/CallingLobby.scss
@@ -4,7 +4,7 @@
 .module-CallingLobby {
   &__local-preview {
     position: absolute;
-    z-index: -1;
+    z-index: $z-index-negative;
 
     &--camera-is-on {
       @include lonely-local-video-preview;
diff --git a/stylesheets/components/ChatColorPicker.scss b/stylesheets/components/ChatColorPicker.scss
index 102da35ae..86f951744 100644
--- a/stylesheets/components/ChatColorPicker.scss
+++ b/stylesheets/components/ChatColorPicker.scss
@@ -72,8 +72,7 @@
     width: 24px;
   }
 
-  // specificity
-  &__modal__body.module-Modal__body {
-    overflow-x: hidden;
+  &__modal__body {
+    overflow-x: hidden !important;
   }
 }
diff --git a/stylesheets/components/GradientDial.scss b/stylesheets/components/GradientDial.scss
index 8df3a6f70..b2e714018 100644
--- a/stylesheets/components/GradientDial.scss
+++ b/stylesheets/components/GradientDial.scss
@@ -17,7 +17,6 @@
       width: 100%;
       overflow: hidden;
       position: relative;
-      z-index: 1;
     }
 
     &--node {
@@ -30,7 +29,6 @@
       top: 50%;
       transform-origin: center;
       width: 4px;
-      z-index: 1;
     }
   }
 
@@ -42,7 +40,7 @@
     margin-top: -20px;
     padding: 2px;
     position: absolute;
-    z-index: 10;
+    z-index: $z-index-base;
 
     &--selected {
       border-color: $color-gray-75;
diff --git a/stylesheets/components/IncomingCallBar.scss b/stylesheets/components/IncomingCallBar.scss
index 7d48e12c0..4d8569239 100644
--- a/stylesheets/components/IncomingCallBar.scss
+++ b/stylesheets/components/IncomingCallBar.scss
@@ -6,7 +6,7 @@
     animation: IncomingCallBar--animation 0.2s forwards ease-out;
     position: fixed;
     width: 100%;
-    z-index: 2;
+    z-index: $z-index-popup;
     padding: {
       left: 1rem;
       right: 1rem;
diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss
index 525537c0c..d048994a6 100644
--- a/stylesheets/components/Lightbox.scss
+++ b/stylesheets/components/Lightbox.scss
@@ -9,7 +9,7 @@
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 10;
+    z-index: $z-index-popup;
   }
 
   &__animated {
@@ -86,7 +86,8 @@
       justify-content: center;
       overflow: hidden;
       position: relative;
-      z-index: 1;
+      // Using this so that the zoom cleanly goes over the footer
+      z-index: $z-index-base;
 
       &--zoom {
         backface-visibility: hidden;
@@ -167,18 +168,20 @@
     text-align: center;
   }
 
-  &__nav-next {
+  &__nav-next,
+  &__nav-prev {
     bottom: 50%;
     position: absolute;
+    // We need this so that the buttons stack above the container
+    z-index: $z-index-above-base;
+  }
+
+  &__nav-next {
     right: 21px;
-    z-index: 2;
   }
 
   &__nav-prev {
-    bottom: 50%;
     left: 21px;
-    position: absolute;
-    z-index: 2;
   }
 
   &__header {
diff --git a/stylesheets/components/MediaEditor.scss b/stylesheets/components/MediaEditor.scss
index 71510df3f..6bf08f715 100644
--- a/stylesheets/components/MediaEditor.scss
+++ b/stylesheets/components/MediaEditor.scss
@@ -11,7 +11,7 @@
   top: 0;
   user-select: none;
   width: 100vw;
-  z-index: 2;
+  z-index: $z-index-popup-overlay;
 
   &__container {
     display: flex;
diff --git a/stylesheets/components/Modal.scss b/stylesheets/components/Modal.scss
index 80ffc19d8..2f55ee510 100644
--- a/stylesheets/components/Modal.scss
+++ b/stylesheets/components/Modal.scss
@@ -133,7 +133,7 @@
       position: sticky;
       right: 0;
       width: 100%;
-      z-index: 10;
+      z-index: $z-index-above-popup;
 
       @include light-theme() {
         background: $color-white;
diff --git a/stylesheets/components/ReactionPickerPicker.scss b/stylesheets/components/ReactionPickerPicker.scss
index 3afaadae0..35d314d30 100644
--- a/stylesheets/components/ReactionPickerPicker.scss
+++ b/stylesheets/components/ReactionPickerPicker.scss
@@ -124,7 +124,7 @@
   }
 
   &--picker-style {
-    z-index: 2;
+    z-index: $z-index-above-base;
 
     #{$root-selector}__button {
       @media (prefers-reduced-motion: no-preference) {
diff --git a/stylesheets/components/Select.scss b/stylesheets/components/Select.scss
index 92261c036..002e23507 100644
--- a/stylesheets/components/Select.scss
+++ b/stylesheets/components/Select.scss
@@ -49,7 +49,6 @@
     transform-origin: center;
     transform: rotate(-45deg);
     width: 10px;
-    z-index: 2;
 
     @include dark-theme {
       border-color: $color-gray-15;
diff --git a/stylesheets/components/TimelineWarnings.scss b/stylesheets/components/TimelineWarnings.scss
index 4bb641b07..d7b4e10e5 100644
--- a/stylesheets/components/TimelineWarnings.scss
+++ b/stylesheets/components/TimelineWarnings.scss
@@ -6,7 +6,7 @@
   position: absolute;
   top: 0;
   width: 100%;
-  z-index: 1;
+  z-index: $z-index-base;
 
   display: flex;
   flex-direction: column;
diff --git a/stylesheets/components/Toast.scss b/stylesheets/components/Toast.scss
index 28f2e3b8b..0f2e75116 100644
--- a/stylesheets/components/Toast.scss
+++ b/stylesheets/components/Toast.scss
@@ -17,7 +17,7 @@
   text-align: center;
   transform: translate(-50%, 0);
   user-select: none;
-  z-index: 100;
+  z-index: $z-index-toast;
 
   @include light-theme {
     background-color: $color-gray-80;
diff --git a/test/index.html b/test/index.html
index f13e48b22..d25d53ca7 100644
--- a/test/index.html
+++ b/test/index.html
@@ -223,11 +223,6 @@
       src="../js/views/inbox_view.js"
       data-cover
     ></script>
-    <script
-      type="text/javascript"
-      src="../js/views/banner_view.js"
-      data-cover
-    ></script>
 
     <script type="text/javascript" src="views/whisper_view_test.js"></script>
     <script type="text/javascript" src="views/list_view_test.js"></script>