diff --git a/components/DatePicker/Screen/Mobile.tsx b/components/DatePicker/Screen/Mobile.tsx
index f6cfcae15..8494f5c0f 100644
--- a/components/DatePicker/Screen/Mobile.tsx
+++ b/components/DatePicker/Screen/Mobile.tsx
@@ -35,87 +35,75 @@ export default function DatePickerMobile({
   const endDate = dt().add(395, "day").toDate()
   const endOfLastMonth = dt(endDate).endOf("month").toDate()
   return (
-    <DayPicker
-      classNames={{
-        ...classNames,
-        caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
-        day: `${classNames.day} ${styles.day}`,
-        day_button: `${classNames.day_button} ${styles.dayButton}`,
-        footer: styles.footer,
-        month: styles.month,
-        month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
-        months: styles.months,
-        range_end: styles.rangeEnd,
-        range_middle: styles.rangeMiddle,
-        range_start: styles.rangeStart,
-        root: `${classNames.root} ${styles.container}`,
-        week: styles.week,
-        weekday: `${classNames.weekday} ${styles.weekDay}`,
-      }}
-      disabled={[
-        { from: startOfCurrentMonth, to: yesterday },
-        { from: endDate, to: endOfLastMonth },
-      ]}
-      endMonth={endDate}
-      excludeDisabled
-      footer
-      formatters={{
-        formatWeekdayName(weekday) {
-          return dt(weekday).locale(lang).format("ddd")
-        },
-      }}
-      hideNavigation
-      lang={lang}
-      locale={locale}
-      mode="range"
-      /** Showing full year or what's left of it */
-      numberOfMonths={13}
-      onDayClick={handleOnSelect}
-      required
-      selected={selectedDate}
-      startMonth={currentDate}
-      weekStartsOn={1}
-      components={{
-        Footer(props) {
-          return (
-            <footer className={props.className}>
-              <Button
-                className={styles.button}
-                intent="tertiary"
-                onPress={close}
-                size="large"
-                theme="base"
-              >
-                <Body color="white" textTransform="bold" asChild>
-                  <span>{intl.formatMessage({ id: "Select dates" })}</span>
-                </Body>
-              </Button>
-              <div className={styles.backdrop} />
-            </footer>
-          )
-        },
-        MonthCaption(props) {
-          return (
-            <div className={props.className}>
-              <Subtitle asChild type="two">
-                {props.children}
-              </Subtitle>
-            </div>
-          )
-        },
-        Root({ children, ...props }) {
-          return (
-            <div {...props}>
-              <header className={styles.header}>
-                <button className={styles.close} onClick={close} type="button">
-                  <CloseLargeIcon />
-                </button>
-              </header>
-              {children}
-            </div>
-          )
-        },
-      }}
-    />
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <button className={styles.close} onClick={close} type="button">
+          <CloseLargeIcon />
+        </button>
+      </header>
+      <DayPicker
+        classNames={{
+          ...classNames,
+          caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
+          day: `${classNames.day} ${styles.day}`,
+          day_button: `${classNames.day_button} ${styles.dayButton}`,
+          month: styles.month,
+          month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
+          months: styles.months,
+          range_end: styles.rangeEnd,
+          range_middle: styles.rangeMiddle,
+          range_start: styles.rangeStart,
+          root: `${classNames.root} ${styles.root}`,
+          week: styles.week,
+          weekday: `${classNames.weekday} ${styles.weekDay}`,
+        }}
+        disabled={[
+          { from: startOfCurrentMonth, to: yesterday },
+          { from: endDate, to: endOfLastMonth },
+        ]}
+        endMonth={endDate}
+        excludeDisabled
+        formatters={{
+          formatWeekdayName(weekday) {
+            return dt(weekday).locale(lang).format("ddd")
+          },
+        }}
+        hideNavigation
+        lang={lang}
+        locale={locale}
+        mode="range"
+        /** Showing full year or what's left of it */
+        numberOfMonths={13}
+        onDayClick={handleOnSelect}
+        required
+        selected={selectedDate}
+        startMonth={currentDate}
+        weekStartsOn={1}
+        components={{
+          MonthCaption(props) {
+            return (
+              <div className={props.className}>
+                <Subtitle asChild type="two">
+                  {props.children}
+                </Subtitle>
+              </div>
+            )
+          },
+        }}
+      />
+      <footer className={styles.footer}>
+        <Button
+          className={styles.button}
+          intent="tertiary"
+          onPress={close}
+          size="large"
+          theme="base"
+        >
+          <Body color="white" textTransform="bold" asChild>
+            <span>{intl.formatMessage({ id: "Select dates" })}</span>
+          </Body>
+        </Button>
+      </footer>
+    </div>
   )
 }
diff --git a/components/DatePicker/Screen/mobile.module.css b/components/DatePicker/Screen/mobile.module.css
index 5ee03bde5..4fba31592 100644
--- a/components/DatePicker/Screen/mobile.module.css
+++ b/components/DatePicker/Screen/mobile.module.css
@@ -10,6 +10,11 @@
   position: relative;
 }
 
+.root {
+  display: grid;
+  grid-area: content;
+}
+
 .header {
   align-self: flex-end;
   background-color: var(--Main-Grey-White);
@@ -37,7 +42,6 @@
 
 div.months {
   display: grid;
-  grid-area: content;
   overflow-y: scroll;
   scroll-snap-type: y mandatory;
 }
