diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js
index c116e8ea6..ec6540cc8 100644
--- a/frontend/src/utils/form/datepicker.js
+++ b/frontend/src/utils/form/datepicker.js
@@ -3,6 +3,7 @@ import { Utility } from '../../core/utility';
 import moment from 'moment';
 
 const KEYCODE_ESCAPE = 27;
+const Z_INDEX_MODAL = 9999;
 
 // INTERNAL (Uni2work specific) formats for formatting dates and/or times
 const FORM_DATE_FORMAT = {
@@ -42,9 +43,6 @@ const DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
 
 const DATEPICKER_CONFIG = {
   'global': {
-    // minimize overlaps with other date inputs
-    position: 'right',
-
     // set default time to 00:00:00
     timeHours: 0,
     timeMinutes: 0,
@@ -131,6 +129,14 @@ export class Datepicker {
     // initialize tail.datetime (datepicker) instance
     this.datepickerInstance = datetime(this._element, { ...datepickerGlobalConfig, ...datepickerConfig });
 
+    // insert the datepicker element (dt) after the form
+    this._element.form.parentNode.insertBefore(this.datepickerInstance.dt, this._element.form.nextSibling);
+
+    // if the input element is in any open modal, increase the z-index of the datepicker
+    if (this._element.closest('.modal--open')) {
+      this.datepickerInstance.dt.style.zIndex = Z_INDEX_MODAL;
+    }
+
     // register this datepicker instance with the formID of the given element in the datepicker collection
     const formID = this._element.form.id;
     const elemID = this._element.id;
@@ -233,4 +239,4 @@ export class Datepicker {
     // return the (possibly changed) FormData
     return formData;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/utils/modal/modal.scss b/frontend/src/utils/modal/modal.scss
index 50054aaaf..e9cd70494 100644
--- a/frontend/src/utils/modal/modal.scss
+++ b/frontend/src/utils/modal/modal.scss
@@ -27,7 +27,6 @@
   border-radius: 2px;
   z-index: -1;
   color: var(--color-font);
-  padding: 0 40px;
   overflow: auto;
   overscroll-behavior: contain;
   pointer-events: none;
@@ -114,6 +113,6 @@ div.modal__trigger {
 }
 
 .modal__content {
-  margin: 20px 0;
+  margin: 20px 40px;
   width: 100%;
 }
diff --git a/package-lock.json b/package-lock.json
index 6b03a7be3..353adfe1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15317,7 +15317,7 @@
       }
     },
     "tail.datetime": {
-      "version": "git+https://github.com/uni2work/tail.DateTime.git#d3256920fcedbf32c84b8065e77628097c7f2410",
+      "version": "git+https://github.com/uni2work/tail.DateTime.git#57e4feb2d6a53c7e1d3630a2da7eb9a213fa288d",
       "from": "git+https://github.com/uni2work/tail.DateTime.git#master"
     },
     "tapable": {
diff --git a/src/Handler/Exam/Form.hs b/src/Handler/Exam/Form.hs
index 441b0daf6..1604a4207 100644
--- a/src/Handler/Exam/Form.hs
+++ b/src/Handler/Exam/Form.hs
@@ -163,8 +163,8 @@ examOccurrenceForm prev = wFormToAForm $ do
       (eofNameRes, eofNameView) <- mpreq (textField & cfStrip & cfCI) ("" & addName (nudge "name")) (eofName <$> mPrev)
       (eofRoomRes, eofRoomView) <- mpreq (textField & cfStrip) ("" & addName (nudge "room")) (eofRoom <$> mPrev)
       (eofCapacityRes, eofCapacityView) <- mpreq (natFieldI MsgExamRoomCapacityNegative) ("" & addName (nudge "capacity")) (eofCapacity <$> mPrev)
-      (eofStartRes, eofStartView) <- mpreq utcTimeField ("" & addName (nudge "start") & addDatepickerPositionAttr DPBottom) (eofStart <$> mPrev)
-      (eofEndRes, eofEndView) <- mopt utcTimeField ("" & addName (nudge "end") & addDatepickerPositionAttr DPBottom) (eofEnd <$> mPrev)
+      (eofStartRes, eofStartView) <- mpreq utcTimeField ("" & addName (nudge "start")) (eofStart <$> mPrev)
+      (eofEndRes, eofEndView) <- mopt utcTimeField ("" & addName (nudge "end")) (eofEnd <$> mPrev)
       (eofDescRes, eofDescView) <- mopt htmlFieldSmall ("" & addName (nudge "description")) (eofDescription <$> mPrev)
 
       return ( ExamOccurrenceForm