diff --git a/apps/scandic-web/components/DatePicker/Range/Mobile.tsx b/apps/scandic-web/components/DatePicker/Range/Mobile.tsx
index efedc4bb0..a477bb97a 100644
--- a/apps/scandic-web/components/DatePicker/Range/Mobile.tsx
+++ b/apps/scandic-web/components/DatePicker/Range/Mobile.tsx
@@ -1,5 +1,6 @@
 "use client"
-import { DayPicker } from "react-day-picker"
+import { useEffect, useRef, useState } from "react"
+import { type DateRange, DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -29,15 +30,39 @@ export default function DatePickerRangeMobile({
 
   /** English is default language and doesn't need to be imported */
   const locale = lang === Lang.en ? undefined : locales[lang]
+  const monthsRef = useRef<HTMLDivElement | null>(null)
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true)
+
   const currentDate = dt().toDate()
   const startOfCurrentMonth = dt(currentDate).set("date", 1).toDate()
   const yesterday = dt(currentDate).subtract(1, "day").toDate()
+  useEffect(() => {
+    if (!monthsRef.current || !selectedRange?.from || !autoScrollEnabled) return
+
+    const selectedDay = monthsRef.current.querySelector(
+      'td[aria-selected="true"]:not([data-outside="true"])'
+    )
+
+    const targetMonth = selectedDay?.closest(`.${styles.month}`)
+
+    if (targetMonth) {
+      targetMonth.scrollIntoView({ block: "start" })
+    }
+  }, [selectedRange, autoScrollEnabled])
+
+  function handleSelectWrapper(
+    dateRange: DateRange | undefined,
+    selectedDay: Date
+  ) {
+    setAutoScrollEnabled(false)
+    handleOnSelect(dateRange, selectedDay)
+  }
 
   // Max future date allowed to book kept same as of existing prod.
   const endDate = dt().add(395, "day").toDate()
   const endOfLastMonth = dt(endDate).endOf("month").toDate()
   return (
-    <div className={styles.container}>
+    <div className={styles.container} ref={monthsRef}>
       <header className={styles.header}>
         <button className={styles.close} onClick={close} type="button">
           <MaterialIcon icon="close" />
@@ -76,7 +101,9 @@ export default function DatePickerRangeMobile({
         mode="range"
         /** Showing full year or what's left of it */
         numberOfMonths={13}
-        onSelect={handleOnSelect}
+        onSelect={(dateRange, selectedDay) =>
+          handleSelectWrapper(dateRange, selectedDay)
+        }
         required
         selected={selectedRange}
         startMonth={currentDate}
diff --git a/apps/scandic-web/components/DatePicker/Range/mobile.module.css b/apps/scandic-web/components/DatePicker/Range/mobile.module.css
index c18216f82..34a2d86c7 100644
--- a/apps/scandic-web/components/DatePicker/Range/mobile.module.css
+++ b/apps/scandic-web/components/DatePicker/Range/mobile.module.css
@@ -56,6 +56,7 @@ div.months {
 .month {
   display: grid;
   justify-items: center;
+  padding-top: var(--Space-x3);
   scroll-snap-align: start;
 }
 
diff --git a/apps/scandic-web/components/DatePicker/index.tsx b/apps/scandic-web/components/DatePicker/index.tsx
index 6e9f6742c..0a3d921e1 100644
--- a/apps/scandic-web/components/DatePicker/index.tsx
+++ b/apps/scandic-web/components/DatePicker/index.tsx
@@ -176,17 +176,19 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
               : undefined,
           }}
         />
-        <DatePickerRangeMobile
-          close={close}
-          handleOnSelect={handleSelectDate}
-          // DayPicker lib needs Daterange in form as below to show appropriate UI
-          selectedRange={{
-            from: dt(selectedDate.fromDate).toDate(),
-            to: selectedDate.toDate
-              ? dt(selectedDate.toDate).toDate()
-              : undefined,
-          }}
-        />
+        {isOpen && (
+          <DatePickerRangeMobile
+            close={close}
+            handleOnSelect={handleSelectDate}
+            // DayPicker lib needs Daterange in form as below to show appropriate UI
+            selectedRange={{
+              from: dt(selectedDate.fromDate).toDate(),
+              to: selectedDate.toDate
+                ? dt(selectedDate.toDate).toDate()
+                : undefined,
+            }}
+          />
+        )}
       </div>
     </div>
   )