diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index e9254c4b9..91b040f54 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -126,3 +126,23 @@ hr {
   background-color: $color-neutral-80;
   height: 1px !important;
 }
+
+#overlay {
+  display: block;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 99;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+  transition-delay: 50ms;
+
+  .dropdown-open & {
+    opacity: 1;
+    transition-delay: 0;
+  }
+}
diff --git a/components/Dropdown.vue b/components/Dropdown.vue
index f47c1cabb..1440170f3 100644
--- a/components/Dropdown.vue
+++ b/components/Dropdown.vue
@@ -36,6 +36,27 @@ export default {
       isPopoverOpen: false
     }
   },
+  watch: {
+    isPopoverOpen: {
+      immediate: true,
+      handler(isOpen) {
+        console.log('isOpen', isOpen)
+        try {
+          if (isOpen) {
+            setTimeout(() => {
+              document
+                .getElementsByTagName('body')[0]
+                .classList.add('dropdown-open')
+            }, 10)
+          } else {
+            document
+              .getElementsByTagName('body')[0]
+              .classList.remove('dropdown-open')
+          }
+        } catch (err) {}
+      }
+    }
+  },
   beforeDestroy() {
     clearTimeout(mouseEnterTimer)
     clearTimeout(mouseLeaveTimer)
diff --git a/layouts/blank.vue b/layouts/blank.vue
index 23a783ac6..140ec9f6e 100644
--- a/layouts/blank.vue
+++ b/layouts/blank.vue
@@ -5,6 +5,7 @@
         <nuxt />
       </div>
     </ds-container>
+    <div id="overlay" />
   </div>
 </template>
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 6bf42691e..e38eaeda8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -72,6 +72,7 @@
         <nuxt />
       </div>
     </ds-container>
+    <div id="overlay" />
   </div>
 </template>