diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js
index f680233ae..63e4870a4 100644
--- a/app/assets/javascripts/projects/index.js
+++ b/app/assets/javascripts/projects/index.js
@@ -576,8 +576,34 @@
     });
   }
 
-  function initCardsFilter() {
-    dropdownSelector.init($('.assignee-filter'));
+  function initProjectsFilter() {
+    let $projectsFilter = $('#projectsToolbar .projects-filters');
+    let $membersFilter = $('.assignee-filter', $projectsFilter);
+    let $foldersCB = $('#folder_search', $projectsFilter);
+    let $createdOnFilter = $('#calendarStartDate', $projectsFilter);
+    let $dueFilter = $('#calendarDueDate', $projectsFilter);
+
+    dropdownSelector.init($membersFilter);
+
+    // Clear filters
+    $('.clear-button', $projectsFilter).click((e) => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      dropdownSelector.clearData($membersFilter);
+      $createdOnFilter.data('DateTimePicker').clear();
+      $dueFilter.data('DateTimePicker').clear();
+      $foldersCB.prop('checked', false);
+    });
+
+    // Prevent filter window close
+    $($projectsFilter).click((e) => {
+      if (!$(e.target).is('input')) {
+        e.stopPropagation();
+        e.preventDefault();
+        dropdownSelector.closeDropdown($membersFilter);
+      }
+    });
   }
 
   // Updates "Select all" control in a data table
@@ -792,5 +818,5 @@
   initProjectsViewModeSwitch();
   initSorting();
   loadCardsView();
-  initCardsFilter();
+  initProjectsFilter();
 }(window));
diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss
index 79549555e..cfe16bc7d 100644
--- a/app/assets/stylesheets/projects.scss
+++ b/app/assets/stylesheets/projects.scss
@@ -912,7 +912,7 @@ li.module-hover {
 
 .projects-toolbar {
   .filter-container {
-    .current-tasks-filters {
+    .projects-filters {
       padding: 0;
       width: 230px;
 
@@ -994,7 +994,7 @@ li.module-hover {
 
     @media (min-width: 768px) {
 
-      .current-tasks-filters {
+      .projects-filters {
         width: 460px;
       }
 
diff --git a/app/views/projects/index/_toolbar.html.erb b/app/views/projects/index/_toolbar.html.erb
index cb5b184b5..dcb4f2f9e 100644
--- a/app/views/projects/index/_toolbar.html.erb
+++ b/app/views/projects/index/_toolbar.html.erb
@@ -48,7 +48,7 @@
         <!-- project filter -->
         <div class="filter-container dropdown">
           <div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>
-          <div class="dropdown-menu dropdown-menu-right current-tasks-filters" role="menu" data-team-id="<%= current_team.id %>">
+          <div class="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>">
             <div class="header">
               <div class="title"><%= t("projects.index.filters_modal.title") %></div>
               <div class="btn btn-light clear-button">