diff --git a/assets/js/theme/nav/responsive.js b/assets/js/theme/nav/responsive.js
index 6cd03ca4780a525bc4c24a1a804d0d1da8844eac..aca9dad135886028b177be88c9191fca3bf94675 100644
--- a/assets/js/theme/nav/responsive.js
+++ b/assets/js/theme/nav/responsive.js
@@ -1,6 +1,7 @@
 const events = ['load', 'resize'];
 let navBtn = document.querySelector('nav[role="navigation"] button'),
     menuHeader = document.querySelector('.menu'),
+    bodyOverlay = document.querySelector('body'),
     dropdownBtns = document.querySelectorAll('.has-children a[role="button"]'),
     breckpointMd = 768,
     classMobile = 'show';
@@ -18,6 +19,7 @@ events.forEach((event) => {
                     navBtn.setAttribute('aria-expanded', 'true')
                 }
                 menuHeader.classList.toggle(classMobile)
+                bodyOverlay.classList.toggle('has-overlay')
             });
             
             dropdownBtns.forEach((dropdownBtn) => {
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index 960874a20c9c9370cf19c6e5e3876dad76d12982..c1fc4e3e5cbbe369ebf93f984b43a0710a194254 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -12,6 +12,14 @@ body
     &:not(.is-loaded)
         *
             transition-duration: 0s !important
+    &.has-overlay
+        &::after
+            animation-name: showIn
+            background-color: rgba(0,0,0,.3)
+            content: ""
+            display: block
+            inset: 82px 0 0 0
+            position: fixed
 
 figure
     margin: 0
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 181218480368fc607a82f013e54520d256300271..beb9e644d1991d147a3461597d62816cd13bfa10 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -75,6 +75,9 @@
         a
             text-decoration: none
         .nav-level-1
+            li 
+                a
+                    padding: 1rem 0
             > li:not(:last-child) 
                 border-bottom: 1px solid #adb5bd
             li.has-children
@@ -82,7 +85,6 @@
                     align-items: center
                     display: flex
                     justify-content: space-between
-                    padding: 1rem 0
                     @include icon("caret-bottom", after)
                     &::after
                         font-size: .375rem