diff --git a/src/Viewer/components/modals/CalendarModal/DatetimePicker.jsx b/src/Viewer/components/modals/CalendarModal/DatetimePicker.jsx
index 027883ec..d653bfa4 100644
--- a/src/Viewer/components/modals/CalendarModal/DatetimePicker.jsx
+++ b/src/Viewer/components/modals/CalendarModal/DatetimePicker.jsx
@@ -44,9 +44,15 @@ const DateTimePicker = ({onChange, value}) => {
                 <DateCalendar
                     {...commonProps}
                     sx={{
-                        height: "300px",
-                        minWidth: "260px",
-                        borderRight: "1px solid rgba(0, 0, 0, 0.2)",
+                        ".MuiMonthCalendar-root": {
+                            width: "100%",
+                        },
+                        ".MuiYearCalendar-root": {
+                            width: "100%",
+                        },
+                        "borderRight": "1px solid rgba(0, 0, 0, 0.2)",
+                        "height": "320px",
+                        "minWidth": "260px",
                     }}
                     views={[
                         "year",
@@ -60,7 +66,7 @@ const DateTimePicker = ({onChange, value}) => {
                     timeSteps={{hours: 1, minutes: 1, seconds: 1}}
                     sx={{
                         ".MuiMultiSectionDigitalClockSection-root": {
-                            maxHeight: "300px",
+                            maxHeight: "320px",
                             width: "72px",
                         },
                         "borderBottom": "0",