diff --git a/src/scss/themes/standard.scss b/src/scss/themes/standard.scss
index a9231e2..25f4a66 100644
--- a/src/scss/themes/standard.scss
+++ b/src/scss/themes/standard.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:math";
 @import "./../variables";
 @import "./../mixins";
 @import "./../reset";
@@ -86,7 +87,7 @@ $breakpoint-mobile: 535px;
     top: 0;
     left: 0;
     width: 100vw;
-    height: 100vh;
+    height: 100dvh;
     background-color: rgb(0 0 0 / 60%);
     cursor: pointer;
     opacity: 0;
@@ -109,8 +110,15 @@ $breakpoint-mobile: 535px;
 
 #cn-wrapper {
     @extend %reset-styles;
+
+    position: fixed;
     // * Display over BS elements
     z-index: $cn-cookie-button-z-index;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100dvh;
+    pointer-events: none;
 
     // * BIG COOKIE BTN
     #cn-cookie-btn {
@@ -125,6 +133,7 @@ $breakpoint-mobile: 535px;
         background-color: $ck-btn-background-color;
         box-shadow: $ck-shadow-color;
         cursor: pointer;
+        pointer-events: auto;
 
         @media (min-width: $breakpoint-mobile) {
             right: $cn-cookie-button-position-right-h;
@@ -163,14 +172,13 @@ $breakpoint-mobile: 535px;
 
     // * COOKIE BANNER MODAL
     #cn-banner {
-        position: fixed;
+        position: absolute;
         z-index: $cn-cookie-button-z-index;
         top: 0;
         bottom: 0;
         left: 0;
         display: flex;
         width: 100vw;
-        height: fit-content;
         max-height: $cn-cookie-modal-max-height-mobile;
         flex-direction: column;
         align-items: center;
@@ -215,10 +223,14 @@ $breakpoint-mobile: 535px;
             bottom: calc(#{$cn-cookie-button-position-bottom} + 60px);
             left: $cn-cookie-animation-left;
             width: $cn-cookie-modal-width;
-            height: fit-content;
-            max-height: $cn-cookie-modal-max-height-desktop;
+            max-height: math.max(26rem, $cn-cookie-modal-max-height-desktop - 12rem);
             border-radius: 0.5rem;
+
+            &.cn-modal-page {
+                max-height: $cn-cookie-modal-max-height-desktop;
+            }
         }
+
     }
 
     #cn-li-template {
@@ -235,6 +247,11 @@ $breakpoint-mobile: 535px;
         padding: 0.8rem;
         overflow-y: auto;
 
+        @media (min-width: $breakpoint-mobile) {
+            flex-grow: 0;
+        }
+
+
         // * 1rst Page BANNER
         .cn-banner-content {
             display: flex;
@@ -480,11 +497,6 @@ $breakpoint-mobile: 535px;
             }
         }
     }
-
-    @media (min-width: $breakpoint-mobile) {
-        width: 100%;
-        height: 100%;
-    }
 }
 
 // * SHOW CN BANNER MODAL
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 46a2f25..7c70cd1 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -52,6 +52,6 @@ $cn-button-line-height: 1 !default;
 $cn-button-height: 3rem !default;
 
 // Dimensions modal
-$cn-cookie-modal-max-height-mobile: 100vh;
+$cn-cookie-modal-max-height-mobile: 100dvh;
 $cn-cookie-modal-max-height-desktop: 38rem;
 $cn-cookie-modal-width: 30rem !default;
diff --git a/src/ts/index.ts b/src/ts/index.ts
index a07ad33..f43fd5f 100644
--- a/src/ts/index.ts
+++ b/src/ts/index.ts
@@ -605,6 +605,7 @@ export default class CookieNotice {
         this.resetCookieModal();
         this.bannerContent.classList.add("d-none");
         this.modalContainer.classList.remove("d-none");
+        this.bannerContainer.classList.add("cn-modal-page");
 
         // Scroll to the top of the cookies list
         this.modalWrapper.scrollTop = 0;
@@ -619,6 +620,12 @@ export default class CookieNotice {
         this.updateRestrictCloseModal();
         if (!this.restrictCloseModal) {
             document.body.classList.remove("cn-open");
+            if (!this.isOnBannerPage()) {
+                // * Make toggle page to banner on closing
+                this.bannerContent.classList.toggle("d-none");
+                this.modalContainer.classList.toggle("d-none");
+                this.bannerContainer.classList.remove("cn-modal-page");
+            }
             this.unsetTabIndex();
             this.setupCookieModalList();
         } else {
@@ -687,6 +694,7 @@ export default class CookieNotice {
     resetCookieModal() {
         this.bannerContent.classList.remove("d-none");
         this.modalContainer.classList.add("d-none");
+        this.bannerContainer.classList.remove("cn-modal-page");
         if (!this.customizeBtn.dataset.openModal) {
             throw new Error("Cannot find attribut data-open-modal");
         }
@@ -801,7 +809,9 @@ export default class CookieNotice {
     toggleCookieModalPages() {
         this.bannerContent.classList.toggle("d-none");
         this.modalContainer.classList.toggle("d-none");
-        if (!this.modalContainer.classList.contains("d-none")) {
+        this.bannerContainer.classList.toggle("cn-modal-page");
+        if (!this.isOnBannerPage()) {
+            this.bannerContainer.classList.add("cn-modal-page");
             this.denyAllWaitingCookies();
         }
         this.setTabIndex();
@@ -825,6 +835,13 @@ export default class CookieNotice {
             this.customizeBtn.title = customizeBtnBannerDataset.closeModal as string;
         }
     }
+
+    /**
+     * Get the actual page: banner or modal (with cookie choices)
+     */
+    isOnBannerPage(): boolean {
+        return this.modalContainer.classList.contains("d-none");
+    }
 }
 
 enum CookieStatus {