diff --git a/app/assets/javascripts/experiments/table.js b/app/assets/javascripts/experiments/table.js
index 5ad779dfa..1a05dca2d 100644
--- a/app/assets/javascripts/experiments/table.js
+++ b/app/assets/javascripts/experiments/table.js
@@ -494,9 +494,9 @@ var ExperimnetTable = {
     }
   },
   selectDate: function($field) {
-    var datePicker = $field.data('DateTimePicker');
-    if (datePicker && datePicker.date()) {
-      return datePicker.date()._d.toUTCString();
+    var datePicker = $field.data('dateTimePicker');
+    if (datePicker && datePicker.date) {
+      return datePicker.date.toString();
     }
     return null;
   },
@@ -733,9 +733,7 @@ ExperimnetTable.filters.push({
   },
   active: (value) => { return value; },
   clearFilter: ($container) => {
-    if ($('.due-date-filter .from-date', $container).data('DateTimePicker')) {
-      $('.due-date-filter .from-date', $container).data('DateTimePicker').clear();
-    }
+    $('.due-date-filter .from-date', $container).data('dateTimePicker')?.clearDate();
   }
 });
 
@@ -748,9 +746,7 @@ ExperimnetTable.filters.push({
   },
   active: (value) => { return value; },
   clearFilter: ($container) => {
-    if ($('.due-date-filter .to-date', $container).data('DateTimePicker')) {
-      $('.due-date-filter .to-date', $container).data('DateTimePicker').clear();
-    }
+    $('.due-date-filter .to-date', $container).data('dateTimePicker')?.clearDate();
   }
 });
 
@@ -763,9 +759,7 @@ ExperimnetTable.filters.push({
   },
   active: (value) => { return value; },
   clearFilter: ($container) => {
-    if ($('.archived-on-filter .from-date', $container).data('DateTimePicker')) {
-      $('.archived-on-filter .from-date', $container).data('DateTimePicker').clear();
-    }
+    $('.archived-on-filter .from-date', $container).data('dateTimePicker')?.clearDate();
   }
 });
 
@@ -778,9 +772,7 @@ ExperimnetTable.filters.push({
   },
   active: (value) => { return value; },
   clearFilter: ($container) => {
-    if ($('.archived-on-filter .to-date', $container).data('DateTimePicker')) {
-      $('.archived-on-filter  .to-date', $container).data('DateTimePicker').clear();
-    }
+    $('.archived-on-filter  .to-date', $container).data('dateTimePicker')?.clearDate();
   }
 });
 
diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js
index ffb96ab65..603ce84ac 100644
--- a/app/assets/javascripts/projects/index.js
+++ b/app/assets/javascripts/projects/index.js
@@ -13,7 +13,6 @@
 
 var ProjectsIndex = (function() {
   var projectsWrapper = '#projectsWrapper';
-  var toolbarWrapper = '#toolbarWrapper';
   var cardsWrapper = '#cardsWrapper';
   var editProjectModal = '#edit-modal';
   var moveToModal = '#move-to-modal';
@@ -448,22 +447,13 @@ var ProjectsIndex = (function() {
       data: { ...requestParams, ...{ page: 1 } },
       success: function(data) {
         $(projectsWrapper).find('.projects-title').html(data.title_html);
-        $(toolbarWrapper).html(data.toolbar_html);
-        initProjectsViewModeSwitch();
+
         initCardData(viewContainer, data);
 
         selectedProjects.length = 0;
         selectedProjectFolders.length = 0;
 
         updateProjectsToolbar();
-        initProjectsFilters();
-        initSorting();
-
-        // set current sort item
-        if (projectsCurrentSort) {
-          $('#sortMenuDropdown a').removeClass('selected');
-          $(`#sortMenuDropdown a[data-sort="${projectsCurrentSort}"]`).addClass('selected');
-        }
 
         if (data.filtered) {
           $(projectsWrapper).find('.project-list-end-placeholder').remove();
@@ -546,9 +536,9 @@ var ProjectsIndex = (function() {
   }
 
   function selectDate($field) {
-    var datePicker = $field.data('DateTimePicker');
-    if (datePicker && datePicker.date()) {
-      return datePicker.date()._d.toUTCString();
+    let datePicker = $field.data('dateTimePicker');
+    if (datePicker && datePicker.date) {
+      return datePicker.date.toString();
     }
     return null;
   }
@@ -574,32 +564,6 @@ var ProjectsIndex = (function() {
       projectsViewSearch = $textFilter.val();
     }
 
-    function saveCurrentFilters() {
-      getFilterValues();
-
-      currentFilters = {
-        createdOnFromFilter: $createdOnFromFilter.val(),
-        createdOnToFilter: $createdOnToFilter.val(),
-        membersFilter: membersFilter,
-        lookInsideFolders: lookInsideFolders,
-        archivedOnFromFilter: $archivedOnFromFilter.val(),
-        archivedOnToFilter: $archivedOnToFilter.val(),
-        projectsViewSearch: projectsViewSearch
-      };
-    }
-
-    function loadCurrentFilters() {
-      if (!currentFilters) return;
-
-      $createdOnFromFilter.val(currentFilters.createdOnFromFilter);
-      $createdOnToFilter.val(currentFilters.createdOnToFilter);
-      $foldersCB.attr('checked', !!currentFilters.lookInsideFolders);
-      dropdownSelector.setData($('.members-filter'), currentFilters.membersFilter);
-      $archivedOnFromFilter.val(currentFilters.archivedOnFromFilter);
-      $archivedOnToFilter.val(currentFilters.archivedOnToFilter);
-      $textFilter.val(currentFilters.projectsViewSearch);
-    }
-
     function filtersEnabled() {
       getFilterValues();
 
@@ -638,7 +602,6 @@ var ProjectsIndex = (function() {
     });
 
     $filterDropdown.on('filter:apply', function() {
-      saveCurrentFilters();
       appliedFiltersMark();
       loadCardsView();
     });
@@ -648,12 +611,11 @@ var ProjectsIndex = (function() {
       currentFilters = null;
 
       dropdownSelector.clearData($membersFilter);
-      $createdOnFromFilter.val('');
-      $createdOnToFilter.val('');
-      $createdOnFromFilter.val('');
-      $createdOnToFilter.val('');
-      $archivedOnFromFilter.val('');
-      $archivedOnToFilter.val('');
+
+      $createdOnFromFilter.data('dateTimePicker').clearDate();
+      $createdOnToFilter.data('dateTimePicker').clearDate();
+      $archivedOnFromFilter.data('dateTimePicker').clearDate();
+      $archivedOnToFilter.data('dateTimePicker').clearDate();
       $foldersCB.prop('checked', false);
       $textFilter.val('');
     });
@@ -666,7 +628,6 @@ var ProjectsIndex = (function() {
       $('#folderSearchInfo').hide();
     });
 
-    loadCurrentFilters();
     appliedFiltersMark();
   }
 
@@ -708,10 +669,12 @@ var ProjectsIndex = (function() {
     initArchiveRestoreToolbarButtons();
     initEditButton();
     initMoveButton();
-    initProjectsViewModeSwitch();
     initSelectAllCheckbox();
     initArchiveRestoreButton();
     loadCardsView();
+    initProjectsViewModeSwitch();
+    initProjectsFilters();
+    initSorting();
     AsyncDropdown.init($(projectsWrapper));
 
     $(projectsWrapper).on('click', '.folder-card-selector', function() {
diff --git a/app/assets/javascripts/projects/show.js b/app/assets/javascripts/projects/show.js
index 854800866..887c1bd2a 100644
--- a/app/assets/javascripts/projects/show.js
+++ b/app/assets/javascripts/projects/show.js
@@ -132,9 +132,9 @@
   }
 
   function selectDate($field) {
-    var datePicker = $field.data('DateTimePicker');
-    if (datePicker && datePicker.date()) {
-      return datePicker.date()._d.toUTCString();
+    let datePicker = $field.data('dateTimePicker');
+    if (datePicker && datePicker.date) {
+      return datePicker.date.toString();
     }
     return null;
   }
@@ -186,12 +186,12 @@
     // Clear filters
     $filterDropdown.on('filter:clear', function() {
       $(this).find('input').val('');
-      if ($startedOnFromFilter.data('DateTimePicker')) $startedOnFromFilter.data('DateTimePicker').clear();
-      if ($startedOnToFilter.data('DateTimePicker')) $startedOnToFilter.data('DateTimePicker').clear();
-      if ($modifiedOnFromFilter.data('DateTimePicker')) $modifiedOnFromFilter.data('DateTimePicker').clear();
-      if ($modifiedOnToFilter.data('DateTimePicker')) $modifiedOnToFilter.data('DateTimePicker').clear();
-      if ($archivedOnFromFilter.data('DateTimePicker')) $archivedOnFromFilter.data('DateTimePicker').clear();
-      if ($archivedOnToFilter.data('DateTimePicker')) $archivedOnToFilter.data('DateTimePicker').clear();
+      $startedOnFromFilter.data('dateTimePicker').clearDate();
+      $startedOnToFilter.data('dateTimePicker').clearDate();
+      $modifiedOnFromFilter.data('dateTimePicker').clearDate();
+      $modifiedOnToFilter.data('dateTimePicker').clearDate();
+      $archivedOnFromFilter.data('dateTimePicker').clearDate();
+      $archivedOnToFilter.data('dateTimePicker').clearDate();
     });
   }
 
diff --git a/app/assets/javascripts/protocols/index.js b/app/assets/javascripts/protocols/index.js
index f6498ef4e..73a88c9d6 100644
--- a/app/assets/javascripts/protocols/index.js
+++ b/app/assets/javascripts/protocols/index.js
@@ -47,9 +47,9 @@ var ProtocolsIndex = (function() {
   }
 
   function selectDate($field) {
-    var datePicker = $field.data('DateTimePicker');
-    if (datePicker && datePicker.date()) {
-      return datePicker.date()._d.toUTCString();
+    var datePicker = $field.data('dateTimePicker');
+    if (datePicker && datePicker.date) {
+      return datePicker.date.toString();
     }
     return null;
   }
@@ -129,12 +129,12 @@ var ProtocolsIndex = (function() {
       dropdownSelector.clearData($accessByFilter);
 
       $(this).find('input').val('');
-      if ($publishedOnFromFilter.data('DateTimePicker')) $publishedOnFromFilter.data('DateTimePicker').clear();
-      if ($publishedOnToFilter.data('DateTimePicker')) $publishedOnToFilter.data('DateTimePicker').clear();
-      if ($modifiedOnFromFilter.data('DateTimePicker')) $modifiedOnFromFilter.data('DateTimePicker').clear();
-      if ($modifiedOnToFilter.data('DateTimePicker')) $modifiedOnToFilter.data('DateTimePicker').clear();
-      if ($archivedOnFromFilter.data('DateTimePicker')) $archivedOnFromFilter.data('DateTimePicker').clear();
-      if ($archivedOnToFilter.data('DateTimePicker')) $archivedOnToFilter.data('DateTimePicker').clear();
+      $publishedOnFromFilter.data('dateTimePicker')?.clearDate();
+      $publishedOnToFilter.data('dateTimePicker')?.clearDate();
+      $modifiedOnFromFilter.data('dateTimePicker')?.clearDate();
+      $modifiedOnToFilter.data('dateTimePicker')?.clearDate();
+      $archivedOnFromFilter.data('dateTimePicker')?.clearDate();
+      $archivedOnToFilter.data('dateTimePicker')?.clearDate();
       $hasDraft.prop('checked', false);
       $textFilter.val('');
     });
diff --git a/app/assets/javascripts/sitewide/filter_dropdown.js b/app/assets/javascripts/sitewide/filter_dropdown.js
index 7d9198cc8..cd6fd8f5b 100644
--- a/app/assets/javascripts/sitewide/filter_dropdown.js
+++ b/app/assets/javascripts/sitewide/filter_dropdown.js
@@ -131,6 +131,14 @@ var filterDropdown = (function() {
     });
   }
 
+  function initDateTimePickerComponent() {
+    const dateTimePickers = document.querySelectorAll('.vue-date-time-picker-filter');
+    dateTimePickers.forEach((dateTimePicker) => {
+      $((`#${dateTimePicker.id}`)).removeClass('vue-date-time-picker-filter');
+      window.initDateTimePickerComponent(`#${dateTimePicker.id}`);
+    });
+  }
+
   return {
     init: function(filtersEnabledFunction) {
       $filterContainer = $('.filter-container');
@@ -138,6 +146,7 @@ var filterDropdown = (function() {
       preventDropdownClose();
       initApplyButton();
       initCloseButton();
+      initDateTimePickerComponent();
       initSearchField(filtersEnabledFunction);
       this.toggleFilterMark($filterContainer, filtersEnabled)
       return $filterContainer;
diff --git a/app/assets/stylesheets/shared/datetime_picker.scss b/app/assets/stylesheets/shared/datetime_picker.scss
index cfc6d1564..bd87f19f7 100644
--- a/app/assets/stylesheets/shared/datetime_picker.scss
+++ b/app/assets/stylesheets/shared/datetime_picker.scss
@@ -63,7 +63,7 @@
   --dp-menu-padding: .5rem; /*Menu padding*/
 
   /*Font sizes*/
-  --dp-font-size: 1rem; /*Default font-size*/
+  --dp-font-size: .875rem; /*Default font-size*/
   --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
   --dp-time-font-size: 3rem; /*Font size in the time picker*/
 
diff --git a/app/assets/stylesheets/shared/filter_dropdown.scss b/app/assets/stylesheets/shared/filter_dropdown.scss
index e527cacba..fde85b818 100644
--- a/app/assets/stylesheets/shared/filter_dropdown.scss
+++ b/app/assets/stylesheets/shared/filter_dropdown.scss
@@ -79,11 +79,6 @@
       }
     }
 
-    .datetime-picker-container {
-      display: inline-block;
-      width: 46%;
-    }
-
     .connect-line {
       display: inline-block;
       margin: 0 11px;
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index e487264cc..f7afbf919 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -69,7 +69,6 @@ class ProjectsController < ApplicationController
         projects_cards_url: projects_cards_url,
         title_html: title_html,
         next_page: cards.next_page,
-        toolbar_html: render_to_string(partial: 'projects/index/toolbar'),
         cards_html: render_to_string(
           partial: 'projects/index/team_projects',
           locals: { cards: cards, view_mode: params[:view_mode] }
diff --git a/app/javascript/packs/vue/legacy/datetime_picker.js b/app/javascript/packs/vue/legacy/datetime_picker.js
index 38c074d5e..afcbf34b4 100644
--- a/app/javascript/packs/vue/legacy/datetime_picker.js
+++ b/app/javascript/packs/vue/legacy/datetime_picker.js
@@ -22,7 +22,11 @@ window.initDateTimePickerComponent = (id) => {
         let defaultDate =  new Date(this.$refs.input.dataset.default);
         this.date = defaultDate.toISOString();
         this.$refs.vueDateTime.datetime = defaultDate;
+      } else if (this.date) {
+        this.$refs.vueDateTime.datetime = new Date(this.date);
       }
+
+
       $(this.$refs.input).data('dateTimePicker', this);
       $(this.$el.parentElement).parent().trigger('dp:ready');
     },
diff --git a/app/views/projects/index/_header.html.erb b/app/views/projects/index/_header.html.erb
index a3bf63d9b..0e0dfd026 100644
--- a/app/views/projects/index/_header.html.erb
+++ b/app/views/projects/index/_header.html.erb
@@ -20,5 +20,6 @@
     </h1>
   </div>
   <div id="toolbarWrapper" class="toolbar-row" data-width-breakpoint="750">
+    <%= render partial: 'projects/index/toolbar' %>
   </div>
 </div>
diff --git a/app/views/shared/filter_dropdown/_datetime_search.html.erb b/app/views/shared/filter_dropdown/_datetime_search.html.erb
index f757f3f61..a779c43cf 100644
--- a/app/views/shared/filter_dropdown/_datetime_search.html.erb
+++ b/app/views/shared/filter_dropdown/_datetime_search.html.erb
@@ -2,35 +2,18 @@
     <div class="created-on-label">
       <label class="sci-label"><%= label %></label>
     </div>
-    <div class="flex items-center gap-5">
+    <div class="flex items-center gap-4">
       <div class="datetime-picker-container flex">
-        <span class="sn-icon sn-icon-calendar"></span>
-        <input type="datetime"
-              id="<%= "#{container_class}_from" %>"
-              data-linked-max="#<%= "#{container_class}_to" %>"
-              data-toggle='date-time-picker'
-              class="form-control calendar-input from-date"
-              readonly
-              placeholder="<%= t('filters_modal.from_placeholder') %>"
-              data-date-format="<%= datetime_picker_format_full %>"
-              data-date-locale="<%= I18n.locale %>"
-              data-date-use-current="false"
-              value=""/>
+        <div id="<%= "#{container_class}_from_container" %>" class="vue-date-time-picker-filter grow">
+          <input ref="input" class="from-date" type="hidden" v-model="date" id="<%= "#{container_class}_from" %>" />
+          <date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" @change="updateDate" mode="datetime" placeholder="<%= t('filters_modal.from_placeholder') %>"></date-time-picker>
+        </div>
       </div>
       <div class="datetime-picker-container flex">
-        <span class="sn-icon sn-icon-calendar"></span>
-        <input type="datetime"
-              data-toggle='date-time-picker'
-              id="<%= "#{container_class}_to" %>"
-              data-linked-min="#<%= "#{container_class}_from" %>"
-              class="form-control calendar-input to-date"
-              readonly
-              placeholder="<%= t('filters_modal.to_placeholder') %>"
-              data-date-format="<%= datetime_picker_format_full %>"
-              data-date-locale="<%= I18n.locale %>"
-              data-date-use-current="false"
-              data-date-orientation="left"
-              value=""/>
+        <div id="<%= "#{container_class}_to_container" %>" class="vue-date-time-picker-filter grow">
+          <input ref="input" class="to-date" type="hidden" v-model="date" id="<%= "#{container_class}_to" %>" />
+          <date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" @change="updateDate" mode="datetime" placeholder="<%= t('filters_modal.to_placeholder') %>"></date-time-picker>
+        </div>
       </div>
     </div>
 </div>