diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
index 37898ae7d..c5ff0802b 100644
--- a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
+++ b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
@@ -14,7 +14,7 @@
   display: none;
   width: 100%;
   height: 100%;
-  background: rgba(variables.$black, 0.4);
+  background: theme.$modal-backdrop-bg;
   transition: all 0.3s ease;
 }
 
@@ -72,9 +72,11 @@
   .backdrop {
     display: inline-block;
     visibility: hidden;
+    opacity: 0;
 
     &.visible {
       visibility: visible;
+      opacity: 1;
     }
   }
 }