diff --git a/app/assets/javascripts/repositories/index.js b/app/assets/javascripts/repositories/index.js
index 354dd74ea..2c56c38c0 100644
--- a/app/assets/javascripts/repositories/index.js
+++ b/app/assets/javascripts/repositories/index.js
@@ -105,6 +105,7 @@
         }],
         fnInitComplete: function(e) {
           initActionToolbar();
+
           window.actionToolbarComponent.setReloadCallback(() =>
             initRepositoriesDataTable('#repositoriesList', archived));
           window.actionToolbarComponent.setBottomOffset(68);
diff --git a/app/assets/javascripts/repositories/repository_datatable.js b/app/assets/javascripts/repositories/repository_datatable.js
index 6fcf35f30..61a74a3e0 100644
--- a/app/assets/javascripts/repositories/repository_datatable.js
+++ b/app/assets/javascripts/repositories/repository_datatable.js
@@ -791,6 +791,7 @@ var RepositoryDatatable = (function(global) {
       fnInitComplete: function() {
         window.initActionToolbar();
         window.actionToolbarComponent.setBottomOffset(68);
+
         initHeaderTooltip();
         disableCheckboxToggleOnCheckboxPreview();
 
diff --git a/app/assets/stylesheets/shared/datetime_picker.scss b/app/assets/stylesheets/shared/datetime_picker.scss
index ed858e8ce..f72562316 100644
--- a/app/assets/stylesheets/shared/datetime_picker.scss
+++ b/app/assets/stylesheets/shared/datetime_picker.scss
@@ -3,9 +3,10 @@
 .dp--menu-wrapper {
   font-weight: normal;
 
-  .dp__menu {
+  .dp__menu,
+  &.dp__menu {
     border: 0;
-    box-shadow: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
+    box-shadow: 0px 4px 16px rgba(35, 31, 32, 0.15)
   }
 
   .dp__action_buttons {
@@ -26,17 +27,34 @@
   }
 
   .dp__month_year_row {
-    margin-bottom: 1rem;
+    margin-bottom: .5rem;
   }
 
   .dp__menu_inner {
-    border-bottom: 1px solid var(--sn-light-grey);
-    margin: 0 1rem 1rem;
+    margin: 0 1rem;
     padding: 1rem 0;
   }
 
+  .dp__time_picker_overlay_container {
+    padding-bottom: .5rem;
+  }
+
+  .dp__button_bottom {
+    background-color: var(--sn-white);
+    margin-bottom: .5rem;
+  }
+
   .dp--tp-wrap {
-    padding: 0 1rem 1rem;
+    border-top: 1px solid var(--sn-light-grey);
+    padding: .5rem 1rem;
+
+    .dp__time_display {
+      margin: .5rem 0;
+    }
+
+    .dp__button_bottom {
+      margin-bottom: 0;
+    }
   }
 
   .dp__action_cancel {
@@ -61,19 +79,14 @@
     justify-content: center;
   }
 
-
   .dp__btn:hover {
     .dp__tp_inline_btn_bar {
       background-color: var(--sn-science-blue);
     }
   }
 
-  .dp--overlay-absolute {
-    padding: 1rem 1rem 0;
-  }
-
-  .dp__overlay_action {
-    width: calc(100% - 2rem);
+  .dp__overlay_container {
+    padding-bottom: .5rem;
   }
 
   .dp--arrow-btn-nav {
@@ -102,6 +115,16 @@
   }
 }
 
+.dp__main.only-time {
+  .dp--tp-wrap {
+    border-top: none;
+  }
+
+  .dp__overlay_container {
+    padding-bottom: 0;
+  }
+}
+
 
 .dp__theme_light {
   --dp-background-color: var(--sn-white);
@@ -148,11 +171,11 @@
   --dp-cell-padding: 0rem; /*Padding in the cell*/
   --dp-common-padding: 1rem; /*Common padding used*/
   --dp-input-padding: .3em 2rem .3rem 1rem; /*Padding in the input*/
-  --dp-menu-min-width: 342px; /*Adjust the min width of the menu*/
+  --dp-menu-min-width: 276px; /*Adjust the min width of the menu*/
   --dp-action-row-padding: 0 1rem 1rem; /*Adjust padding for the action row*/
   --dp-action-buttons-padding: 0 .625rem; /*Adjust padding for the action buttons in action row*/
   --dp-action-button-height: 1.875rem; /*Adjust height for the action buttons in action row*/
-  --dp-row-margin:  .25rem 0; /*Adjust the spacing between rows in the calendar*/
+  --dp-row-margin: 2px 0; /*Adjust the spacing between rows in the calendar*/
   --dp-calendar-header-cell-padding:  .5rem; /*Adjust padding in calendar header cells*/
   --dp-two-calendars-spacing:  .75rem; /*Space between multiple calendars*/
   --dp-overlay-col-padding:  .25rem; /*Padding in the overlay column*/
@@ -163,7 +186,7 @@
   /*Font sizes*/
   --dp-font-size: .875rem; /*Default font-size*/
   --dp-preview-font-size: .75rem; /*Font size of the date preview in the action row*/
-  --dp-time-font-size: 3rem; /*Font size in the time picker*/
+  --dp-time-font-size: 1.875rem; /*Font size in the time picker*/
 
   /*Transitions*/
   --dp-animation-duration: 0.1s; /*Transition duration*/
diff --git a/app/controllers/my_modules_controller.rb b/app/controllers/my_modules_controller.rb
index a5007aaaa..0d14b0e3e 100644
--- a/app/controllers/my_modules_controller.rb
+++ b/app/controllers/my_modules_controller.rb
@@ -488,6 +488,16 @@ class MyModulesController < ApplicationController
 
   def my_module_params
     permitted_params = params.require(:my_module).permit(:name, :description, :started_on, :due_date, :archived)
+
+    if permitted_params[:started_on].present?
+      permitted_params[:started_on] =
+        Time.zone.strptime(permitted_params[:started_on], '%Y/%m/%d %H:%M')
+    end
+    if permitted_params[:due_date].present?
+      permitted_params[:due_date] =
+        Time.zone.strptime(permitted_params[:due_date], '%Y/%m/%d %H:%M')
+    end
+
     permitted_params
   end
 
diff --git a/app/javascript/packs/vue/action_toolbar.js b/app/javascript/packs/vue/action_toolbar.js
index 1a85db360..68f2a382a 100644
--- a/app/javascript/packs/vue/action_toolbar.js
+++ b/app/javascript/packs/vue/action_toolbar.js
@@ -5,11 +5,14 @@ import ActionToolbar from '../../vue/components/action_toolbar.vue';
 import { mountWithTurbolinks } from './helpers/turbolinks.js';
 
 window.initActionToolbar = () => {
+  if (window.actionToolbarComponent) return;
 
   if (notTurbolinksPreview()) {
     const app = createApp({});
     app.component('ActionToolbar', ActionToolbar);
     app.config.globalProperties.i18n = window.I18n;
-    mountWithTurbolinks(app, '#actionToolbar');
+    mountWithTurbolinks(app, '#actionToolbar', () => {
+      window.actionToolbarComponent = null
+    });
   }
 }
diff --git a/app/javascript/packs/vue/helpers/turbolinks.js b/app/javascript/packs/vue/helpers/turbolinks.js
index e55491baf..259ceb4c8 100644
--- a/app/javascript/packs/vue/helpers/turbolinks.js
+++ b/app/javascript/packs/vue/helpers/turbolinks.js
@@ -1,9 +1,12 @@
-function mountWithTurbolinks(app, target) {
+function mountWithTurbolinks(app, target, callback = null) {
   const originalHtml = document.querySelector(target).innerHTML;
 
   document.addEventListener('turbolinks:before-cache', () => {
     app.unmount();
-    document.querySelector(target).innerHTML = originalHtml;
+    if (document.querySelector(target)) {
+      document.querySelector(target).innerHTML = originalHtml;
+    }
+    if (callback) callback();
   }, { once: true });
 
   return app.mount(target);
diff --git a/app/javascript/packs/vue/legacy/datetime_picker.js b/app/javascript/packs/vue/legacy/datetime_picker.js
index 8acdfa231..490fec4f5 100644
--- a/app/javascript/packs/vue/legacy/datetime_picker.js
+++ b/app/javascript/packs/vue/legacy/datetime_picker.js
@@ -18,14 +18,15 @@ window.initDateTimePickerComponent = (id) => {
     },
     mounted() {
       if (this.$refs.input.dataset.default) {
-        const defaultDate = new Date(this.$refs.input.dataset.default.replace(/-/g, '/')); // Safari fix
+        const defaultDate = new Date(this.$refs.input.dataset.default.replace(/([^!\s])-/g, '$1/')); // Safari fix
         this.date = this.formatDate(defaultDate);
+        this.$refs.vueDateTime.manualUpdate = true;
         this.$refs.vueDateTime.datetime = defaultDate;
       } else if (this.date) {
+        this.$refs.vueDateTime.manualUpdate = true;
         this.$refs.vueDateTime.datetime = new Date(this.date);
       }
 
-
       $(this.$refs.input).data('dateTimePicker', this);
       $(this.$el.parentElement).parent().trigger('dp:ready');
     },
@@ -50,6 +51,7 @@ window.initDateTimePickerComponent = (id) => {
       },
       setDate(date) {
         this.date = this.formatDate(date);
+        this.$refs.vueDateTime.manualUpdate = true;
         this.$refs.vueDateTime.datetime = date;
         this.$nextTick(() => {
           if (this.onChange) this.onChange(date);
diff --git a/app/javascript/vue/shared/date_time_picker.vue b/app/javascript/vue/shared/date_time_picker.vue
index bddd44800..7af5a2ce7 100644
--- a/app/javascript/vue/shared/date_time_picker.vue
+++ b/app/javascript/vue/shared/date_time_picker.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="date-time-picker grow">
     <VueDatePicker
+      :class="{
+        'only-time': mode == 'time',
+      }"
       v-model="compDatetime"
       :teleport="teleport"
       :text-input="true"
@@ -12,7 +15,6 @@
       :auto-apply="true"
       :partial-flow="true"
       :markers="markers"
-      :time-picker-inline="mode == 'datetime'"
       :enable-time-picker="mode == 'datetime'"
       :time-picker="mode == 'time'"
       :placeholder="placeholder" >
@@ -22,12 +24,24 @@
         <template #arrow-left>
             <img class="slot-icon" src="/images/calendar/navigate_before.svg"/>
         </template>
-        <template #input-icon>
+        <template v-if="mode == 'time'" #input-icon>
+            <img class="input-slot-image" src="/images/calendar/clock.svg"/>
+        </template>
+        <template v-else #input-icon>
             <img class="input-slot-image" src="/images/calendar/calendar.svg"/>
         </template>
         <template #clock-icon>
             <img class="slot-icon" src="/images/calendar/clock.svg"/>
         </template>
+        <template #calendar-icon>
+            <img class="slot-icon" src="/images/calendar/calendar.svg"/>
+        </template>
+        <template #arrow-up>
+            <img class="slot-icon" src="/images/calendar/up.svg"/>
+        </template>
+        <template #arrow-down>
+            <img class="slot-icon" src="/images/calendar/down.svg"/>
+        </template>
     </VueDatePicker>
   </div>
 </template>
@@ -46,6 +60,7 @@
     },
     data() {
       return {
+        manualUpdate: false,
         datetime: this.defaultValue,
         time: null,
         markers: [
@@ -77,6 +92,11 @@
         }
       },
       datetime: function () {
+        if (this.manualUpdate) {
+          this.manualUpdate = false;
+          return;
+        }
+
         if (this.mode == 'time') {
           this.time = {
             hours: this.datetime ? this.datetime.getHours() : 0,
@@ -94,6 +114,11 @@
         }
       },
       time: function () {
+        if (this.manualUpdate) {
+          this.manualUpdate = false;
+          return;
+        }
+
         if (this.mode != 'time') return;
 
         let newDate;
diff --git a/app/views/experiments/_table_due_date.html.erb b/app/views/experiments/_table_due_date.html.erb
index 7ac00a44f..2f0004a66 100644
--- a/app/views/experiments/_table_due_date.html.erb
+++ b/app/views/experiments/_table_due_date.html.erb
@@ -11,8 +11,8 @@
     </span>
     <% if due_date_editable %>
       <div class="datetime-picker-container vue-date-time-picker h-full" id="calendarDueDateContainer<%= my_module.id %>">
-        <input ref="input" type="hidden" v-model="date" id="calendarDueDate<%= my_module.id %>" data-default="<%= my_module.due_date %>" />
-        <date-time-picker class="opacity-0" ref="vueDateTime" @change="updateDate" mode="date" placeholder="<%= t('my_modules.details.no_due_date_placeholder') %>"></date-time-picker>
+        <input ref="input" type="hidden" data-simple-format="true"  v-model="date" id="calendarDueDate<%= my_module.id %>" data-default="<%= my_module.due_date %>" />
+        <date-time-picker class="opacity-0" ref="vueDateTime" @change="updateDate" mode="datetime" placeholder="<%= t('my_modules.details.no_due_date_placeholder') %>"></date-time-picker>
       </div>
       <div class="sn-icon sn-icon-close clear-date <%= 'tw-hidden' if !my_module.due_date %>"
            data-toggle='clear-date-time-picker'
diff --git a/app/views/my_modules/_due_date.html.erb b/app/views/my_modules/_due_date.html.erb
index e1902b01a..b5f8bc608 100644
--- a/app/views/my_modules/_due_date.html.erb
+++ b/app/views/my_modules/_due_date.html.erb
@@ -3,7 +3,7 @@
     <%= t('my_modules.due_date.label') %>
   </label>
   <div  id="date-time-picker" class="vue-date-time-picker">
-    <input ref="input" type="hidden" v-model="date" name="my_module[due_date]" data-default="<%= @my_module.due_date %>" />
-    <date-time-picker class="w-64" @cleared="clearDate" ref="vueDateTime" @change="updateDate" mode="date"></date-time-picker>
+    <input ref="input" type="hidden" v-model="date" data-simple-format="true"  name="my_module[due_date]" data-default="<%= l(@my_module.due_date, format: :full) if @my_module.due_date %>" />
+    <date-time-picker class="w-64" @cleared="clearDate" ref="vueDateTime" @change="updateDate" mode="datetime"></date-time-picker>
   </div>
 <% end %>
diff --git a/app/views/my_modules/_module_header_due_date.html.erb b/app/views/my_modules/_module_header_due_date.html.erb
index cd152986f..d684f41d9 100644
--- a/app/views/my_modules/_module_header_due_date.html.erb
+++ b/app/views/my_modules/_module_header_due_date.html.erb
@@ -7,7 +7,8 @@
   <% if due_date_editable %>
     <div class="datetime-picker-container" id="due-date">
       <div id="calendarDueDateContainer">
-        <input type="hidden" ref="input" v-model="date" id="calendarDueDate" data-default="<%= my_module.due_date %>" />
+        <input type="hidden" ref="input" v-model="date" data-simple-format="true" id="calendarDueDate" data-default="<%= l(my_module.due_date, format: :full) if my_module.due_date %>
+        " />
         <date-time-picker class="w-full" ref="vueDateTime" :teleport="false" @change="updateDate" mode="datetime" :placeholder="'<%= t('my_modules.details.no_due_date_placeholder') %>'"></date-time-picker>
       </div>
       <span class="sn-icon sn-icon-close clear-date" data-toggle='clear-date-time-picker' data-target='calendarDueDate'></span>
diff --git a/app/views/my_modules/_module_header_start_date.html.erb b/app/views/my_modules/_module_header_start_date.html.erb
index 290582292..093769830 100644
--- a/app/views/my_modules/_module_header_start_date.html.erb
+++ b/app/views/my_modules/_module_header_start_date.html.erb
@@ -7,7 +7,7 @@
   <% if start_date_editable %>
     <div class="datetime-picker-container" id="start-date">
       <div id="calendarStartDateContainer">
-        <input type="hidden" ref="input" v-model="date" id="calendarStartDate" data-default="<%= my_module.started_on %>" />
+        <input type="hidden" ref="input" v-model="date" data-simple-format="true" id="calendarStartDate" data-default="<%= l(my_module.started_on, format: :full) if my_module.started_on %>" />
         <date-time-picker class="w-full" ref="vueDateTime" :teleport="false" @change="updateDate" mode="datetime" :placeholder="'<%= t('my_modules.details.no_start_date_placeholder') %>'"></date-time-picker>
       </div>
       <span class="sn-icon sn-icon-close clear-date" data-toggle='clear-date-time-picker' data-target='calendarStartDate'></span>
diff --git a/app/views/my_modules/modals/_new_modal.html.erb b/app/views/my_modules/modals/_new_modal.html.erb
index 406e1e814..047b2bbe5 100644
--- a/app/views/my_modules/modals/_new_modal.html.erb
+++ b/app/views/my_modules/modals/_new_modal.html.erb
@@ -23,7 +23,7 @@
                 <div class="my-module-due-date-container">
                   <label class="sci-label" for="my_module_due_date"><%= t('experiments.canvas.new_my_module_modal.due_date') %></label>
                   <div  id="date-time-picker-my-module" class="vue-date-time-picker w-full">
-                    <input ref="input" type="hidden" class="calendar-input" id="date-time-picker-input" v-model="date" name="my_module[due_date]"  />
+                    <input ref="input" type="hidden" data-simple-format="true"  class="calendar-input" id="date-time-picker-input" v-model="date" name="my_module[due_date]"  />
                     <date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" placeholder="<%= t('experiments.canvas.new_my_module_modal.due_date_placeholder') %>" @change="updateDate" mode="datetime"></date-time-picker>
                   </div>
                 </div>
diff --git a/public/images/calendar/down.svg b/public/images/calendar/down.svg
new file mode 100644
index 000000000..efb41bc1e
--- /dev/null
+++ b/public/images/calendar/down.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="down">
+<path id="down_2" d="M7.02502 9.69999L7.72502 8.99999L12.685 13.96L17.635 8.99999L18.335 9.69999L12.685 15.36L7.02502 9.69999Z" fill="#1D2939"/>
+</g>
+</svg>
diff --git a/public/images/calendar/up.svg b/public/images/calendar/up.svg
new file mode 100644
index 000000000..1304ef08b
--- /dev/null
+++ b/public/images/calendar/up.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.335 14.135L17.635 14.835L12.675 9.87498L7.72502 14.835L7.02502 14.135L12.675 8.47498L18.335 14.135Z" fill="#1D2939"/>
+</svg>