diff --git a/src/addons/panel.scss b/src/addons/panel.scss
index 57de7408..d114fa3a 100644
--- a/src/addons/panel.scss
+++ b/src/addons/panel.scss
@@ -2,7 +2,7 @@
   --op-panel-width: 40%;
 
   position: absolute;
-  z-index: var(--op-z-index-drawer);
+  z-index: var(--op-z-index-sidebar);
   right: calc(-1 * var(--op-panel-width)); // this pushes the panel off the sceen to the right
   width: var(--op-panel-width);
   height: 100vh;
diff --git a/src/components/sidebar.scss b/src/components/sidebar.scss
index 884a10a7..35091415 100644
--- a/src/components/sidebar.scss
+++ b/src/components/sidebar.scss
@@ -69,6 +69,7 @@
   --__op-sidebar-width: var(--_op-sidebar-drawer-width);
   --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
 
+  z-index: var(--op-z-index-sidebar);
   display: flex;
   width: var(--__op-sidebar-width);
   min-width: var(--__op-sidebar-width);
diff --git a/src/core/tokens/base_tokens.scss b/src/core/tokens/base_tokens.scss
index 3382ff57..ad1ca521 100644
--- a/src/core/tokens/base_tokens.scss
+++ b/src/core/tokens/base_tokens.scss
@@ -297,7 +297,7 @@ $breakpoint-x-large: 1440px; // medium laptop
   */
   --op-z-index-header: 500;
   --op-z-index-footer: 500;
-  --op-z-index-drawer: 700;
+  --op-z-index-sidebar: 700;
   --op-z-index-dialog: 800;
   --op-z-index-dialog-backdrop: 801;
   --op-z-index-dialog-content: 802;