diff --git a/apps/scandic-web/components/DatePicker/Range/mobile.module.css b/apps/scandic-web/components/DatePicker/Range/mobile.module.css
index 8e16cf3fd..c18216f82 100644
--- a/apps/scandic-web/components/DatePicker/Range/mobile.module.css
+++ b/apps/scandic-web/components/DatePicker/Range/mobile.module.css
@@ -1,6 +1,6 @@
 .container {
   --header-height: 72px;
-  --sticky-button-height: 120px;
+  --sticky-button-height: 124px;
 
   display: grid;
   grid-template-areas:
@@ -60,7 +60,7 @@ div.months {
 }
 
 .month:last-of-type {
-  padding-bottom: var(--sticky-button-height);
+  padding-bottom: calc(var(--sticky-button-height) + var(--Spacing-x2));
 }
 
 .monthCaption {
@@ -81,9 +81,10 @@ div.months {
   display: flex;
   grid-area: content;
   padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
-  position: sticky;
-  top: calc(100vh - var(--sticky-button-height));
-  width: 100%;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
   z-index: 10;
 }
 
diff --git a/apps/scandic-web/components/DatePicker/Single/mobile.module.css b/apps/scandic-web/components/DatePicker/Single/mobile.module.css
index fa4b6cf55..d4f76f7a0 100644
--- a/apps/scandic-web/components/DatePicker/Single/mobile.module.css
+++ b/apps/scandic-web/components/DatePicker/Single/mobile.module.css
@@ -1,6 +1,6 @@
 .container {
   --header-height: 72px;
-  --sticky-button-height: 120px;
+  --sticky-button-height: 124px;
 
   display: grid;
   grid-template-areas:
@@ -58,7 +58,7 @@ div.months {
 }
 
 .month:last-of-type {
-  padding-bottom: var(--sticky-button-height);
+  padding-bottom: calc(var(--sticky-button-height) + var(--Spacing-x2));
 }
 
 .monthCaption {
@@ -79,9 +79,10 @@ div.months {
   display: flex;
   grid-area: content;
   padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
-  position: sticky;
-  top: calc(100vh - var(--sticky-button-height));
-  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
   z-index: 10;
 }