diff --git a/core/components/atoms/backdrop/Backdrop.tsx b/core/components/atoms/backdrop/Backdrop.tsx
index 2d8bc952e5..f0d908d54c 100644
--- a/core/components/atoms/backdrop/Backdrop.tsx
+++ b/core/components/atoms/backdrop/Backdrop.tsx
@@ -31,21 +31,17 @@ export const Backdrop: React.FC<BackdropProps> = props => {
   }, className);
 
   const disableBodyScroll = () => {
-    if (savedBodyOverflow) {
-      return;
-    }
-
-    setBodyOverflow(document.body.style.overflow);
-    document.body.style.overflow = 'hidden';
+    document.body.style.setProperty('overflow', 'hidden', 'important');
   };
 
   const enableBodyScroll = () => {
-    document.body.style.overflow = savedBodyOverflow || 'auto';
+    document.body.style.overflow = savedBodyOverflow || '';
     setBodyOverflow(null);
   };
 
   useEffect(() => {
     if (props.open) {
+      setBodyOverflow(document.body.style.overflow);
       disableBodyScroll();
       setOpen(true);
       setAnimate(true);
@@ -55,11 +51,8 @@ export const Backdrop: React.FC<BackdropProps> = props => {
         setOpen(false);
       }, 120);
       setAnimate(false);
-    }
-
-    return () => {
       enableBodyScroll();
-    };
+    }
   }, [props.open]);
 
   const BackdropElement = ReactDOM.createPortal(
diff --git a/core/utils/__tests__/__snapshots__/TS.test.tsx.snap b/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
index ba0331f41b..6ee1b8ea44 100644
--- a/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
+++ b/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`TS renders children 1`] = `
               class="Heading Heading--s Heading--default"
               data-test="DesignSystem-Heading"
             >
-              Jan
+              Feb
             </h5>
           </span>
            
@@ -173,34 +173,6 @@ exports[`TS renders children 1`] = `
           <div
             class="Calendar-valueRow"
           >
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value Calendar-value--dummy"
-              />
-            </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value Calendar-value--dummy"
-              />
-            </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value Calendar-value--dummy"
-              />
-            </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value Calendar-value--dummy"
-              />
-            </div>
             <div
               class="Calendar-valueWrapper"
             >
@@ -236,10 +208,6 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
-          </div>
-          <div
-            class="Calendar-valueRow"
-          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -296,6 +264,10 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
+          </div>
+          <div
+            class="Calendar-valueRow"
+          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -338,10 +310,6 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
-          </div>
-          <div
-            class="Calendar-valueRow"
-          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -398,6 +366,10 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
+          </div>
+          <div
+            class="Calendar-valueRow"
+          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -440,10 +412,6 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
-          </div>
-          <div
-            class="Calendar-valueRow"
-          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -500,6 +468,10 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
+          </div>
+          <div
+            class="Calendar-valueRow"
+          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -542,10 +514,6 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
-          </div>
-          <div
-            class="Calendar-valueRow"
-          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -602,48 +570,6 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value"
-              >
-                <span
-                  class="Text Text--default Text--regular"
-                  data-test="DesignSystem-Text"
-                >
-                  28
-                </span>
-              </span>
-            </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value"
-              >
-                <span
-                  class="Text Text--default Text--regular"
-                  data-test="DesignSystem-Text"
-                >
-                  29
-                </span>
-              </span>
-            </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value"
-              >
-                <span
-                  class="Text Text--default Text--regular"
-                  data-test="DesignSystem-Text"
-                >
-                  30
-                </span>
-              </span>
-            </div>
           </div>
           <div
             class="Calendar-valueRow"
@@ -658,7 +584,7 @@ exports[`TS renders children 1`] = `
                   class="Text Text--default Text--regular"
                   data-test="DesignSystem-Text"
                 >
-                  31
+                  28
                 </span>
               </span>
             </div>
@@ -1702,7 +1628,7 @@ exports[`TS renders children 1`] = `
               class="Heading Heading--s Heading--default"
               data-test="DesignSystem-Heading"
             >
-              Jan
+              Feb
             </h5>
           </span>
            
@@ -1777,34 +1703,6 @@ exports[`TS renders children 1`] = `
           <div
             class="Calendar-valueRow"
           >
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value Calendar-value--dummy"
-              />
-            </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value Calendar-value--dummy"
-              />
-            </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value Calendar-value--dummy"
-              />
-            </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value Calendar-value--dummy"
-              />
-            </div>
             <div
               class="Calendar-valueWrapper"
             >
@@ -1840,10 +1738,6 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
-          </div>
-          <div
-            class="Calendar-valueRow"
-          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -1900,6 +1794,10 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
+          </div>
+          <div
+            class="Calendar-valueRow"
+          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -1942,10 +1840,6 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
-          </div>
-          <div
-            class="Calendar-valueRow"
-          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -2002,6 +1896,10 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
+          </div>
+          <div
+            class="Calendar-valueRow"
+          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -2044,10 +1942,6 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
-          </div>
-          <div
-            class="Calendar-valueRow"
-          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -2104,6 +1998,10 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
+          </div>
+          <div
+            class="Calendar-valueRow"
+          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -2146,10 +2044,6 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
-          </div>
-          <div
-            class="Calendar-valueRow"
-          >
             <div
               class="Calendar-valueWrapper"
             >
@@ -2206,48 +2100,6 @@ exports[`TS renders children 1`] = `
                 </span>
               </span>
             </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value"
-              >
-                <span
-                  class="Text Text--default Text--regular"
-                  data-test="DesignSystem-Text"
-                >
-                  28
-                </span>
-              </span>
-            </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value"
-              >
-                <span
-                  class="Text Text--default Text--regular"
-                  data-test="DesignSystem-Text"
-                >
-                  29
-                </span>
-              </span>
-            </div>
-            <div
-              class="Calendar-valueWrapper"
-            >
-              <span
-                class="Calendar-value"
-              >
-                <span
-                  class="Text Text--default Text--regular"
-                  data-test="DesignSystem-Text"
-                >
-                  30
-                </span>
-              </span>
-            </div>
           </div>
           <div
             class="Calendar-valueRow"
@@ -2262,7 +2114,7 @@ exports[`TS renders children 1`] = `
                   class="Text Text--default Text--regular"
                   data-test="DesignSystem-Text"
                 >
-                  31
+                  28
                 </span>
               </span>
             </div>