diff --git a/webapps/src/main/resources/locale/portlet/taskManagement_en.properties b/webapps/src/main/resources/locale/portlet/taskManagement_en.properties
index d02b54c87..db8a77a62 100644
--- a/webapps/src/main/resources/locale/portlet/taskManagement_en.properties
+++ b/webapps/src/main/resources/locale/portlet/taskManagement_en.properties
@@ -220,6 +220,7 @@ label.permalink=Permalink
 label.listView=List
 label.boardView=Board
 label.ganttView=Plan
+label.viewOptions=View options
 label.cardsView=Cards
 label.start.adding.tasks=Add Tasks
 
diff --git a/webapps/src/main/webapp/skin/css/tasks.less b/webapps/src/main/webapp/skin/css/tasks.less
index a68a9c145..797985dde 100644
--- a/webapps/src/main/webapp/skin/css/tasks.less
+++ b/webapps/src/main/webapp/skin/css/tasks.less
@@ -1125,11 +1125,47 @@
   }
   .projectTasksDashboard {
     min-height: calc(~"100vh - 117px")!important;
-    .projectTasksTabFilter {
-      flex: 0 1 70%;
+    .projectBoardToolbar {
+      /* Match the agenda header height/spacing (its application-toolbar is a
+         default v-toolbar) while staying a plain flex row, so the view-switcher
+         menu is not trapped in a v-toolbar stacking context. */
+      min-height: 64px;
+      margin-bottom: 4px;
+      /* Match the board columns' horizontal padding (px-3 = 12px) so the back
+         arrow lines up with the first column content and the right-hand icons
+         line up with the last column content. */
+      padding-inline: 12px;
+      /* Normalise the favorite/AI extension icons + their hover area to the
+         same size as the view / search / advanced-filter icons (36x36). */
+      .boardHeaderExtensions {
+        .v-icon {
+          font-size: 20px !important;
+        }
+        .v-btn {
+          width: 36px !important;
+          height: 36px !important;
+          /* Drop the components' own horizontal margins (e.g. the AI button's
+             me-2) so all the header icons are evenly spaced. */
+          margin-inline-start: 0 !important;
+          margin-inline-end: 0 !important;
+        }
+      }
+      .tasksViewSwitcher {
+        position: relative;
+      }
+      .tasksViewSwitcherMenu {
+        position: absolute;
+        top: calc(100% + 4px);
+        inset-inline-end: 0;
+        z-index: 1000;
+        min-width: 160px;
+        /* The kanban cards use 3D transforms (rotateY/backface) which put them
+           on compositing layers; promote the menu to its own layer too so it
+           composites above the board instead of being painted behind it. */
+        transform: translateZ(0);
+      }
     }
     .taskViewBreadcrumb {
-      flex: 0 1 30%;
       a {
         i {
           color: @greyColorLighten1;
@@ -1142,43 +1178,6 @@
         }
       }
     }
-    .tasksToolbar {
-      height: auto!important;
-      .v-toolbar__content {
-        height: auto!important;
-        padding: 0!important;
-        .taskDisplay {
-          .projectTasksViewTabs {
-            .v-tabs-bar {
-              height: auto!important;
-              .taskTabBoard {
-                border: 1px solid @borderColor;
-                border-radius: 5px 0 0 5px;
-                height: 38px;
-                min-height: 38px;
-                .uiIconBoard {
-                  .far();
-                  .fa-clipboard();
-                }
-              }
-              .taskTabList {
-                border-radius: 0;
-              }
-              .taskTabGantt {
-                border: 1px solid @borderColor;
-                border-radius: 0 5px 5px 0;
-                height: 38px;
-                min-height: 38px;
-                .uiIconGantt {
-                  .fas();
-                  .fa-stream();
-                }
-              }
-            }
-          }
-        }
-      }
-    }
     .tasksView {
       .projectTaskItem {
         position: relative;
@@ -2536,17 +2535,6 @@
     }
   }
 }
-@media (max-width: 599px) {
-  .projectTasksDashboard {
-    .taskViewBreadcrumb {
-      flex: 0 1 80% !important;
-    }
-    .projectTasksTabFilter{
-      flex: 0 1 20% !important;
-    }
-  }
-}
-
 @media (max-width: 399px) {
   .taskDrawer {
     .drawerTitle .taskProjectName .projectName {
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewDashboard.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewDashboard.vue
index ba6e7b189..3270575fc 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewDashboard.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewDashboard.vue
@@ -26,39 +26,26 @@
       :ok-label="$t('label.ok')"
       :cancel-label="$t('popup.cancel')"
       @ok="deleteConfirm()" />
-    <div class="projectTasksWrapper d-flex justify-space-between">
-      <div class="taskViewBreadcrumb d-flex text-truncate pe-4 pt-1 pb-5">
-        <a
-          :title="project.name"
-          class="text-color text-truncate flex-shrink-1 flex-grow-0"
-          @click="hideProjectDetails()">
-          <i class="uiIcon uiBackIcon"></i>
-          <span>{{ project.name }}</span>
-        </a>
-        <extension-registry-components
-          :params="{
-            project,
-          }"
-          name="TaskProjectBoard"
-          type="task-board-header"
-          parent-element="div"
-          element="div"
-          class="d-flex align-center flex-shrink-0 ms-4" />
-      </div>
-      <div class="projectTasksTabFilter">
-        <tasks-view-toolbar
-          :project="project"
-          :status-list="statusList"
-          :task-card-tab-view="'#tasks-view-board'"
-          :task-list-tab-view="'#tasks-view-list'"
-          :task-gantt-tab-view="'#tasks-view-gantt'"
-          :show-completed-tasks="showCompletedTasks"
-          @keyword-changed="filterByKeyword"
-          @taskViewChangeTab="getChangeTabValue"
-          @filter-task-dashboard="filterTaskDashboard"
-          @reset-filter-task-dashboard="resetFiltertaskDashboard" />
-      </div>
-    </div>
+    <tasks-view-toolbar
+      :project="project"
+      :status-list="statusList"
+      :show-completed-tasks="showCompletedTasks"
+      @keyword-changed="filterByKeyword"
+      @taskViewChangeTab="getChangeTabValue"
+      @filter-task-dashboard="filterTaskDashboard"
+      @reset-filter-task-dashboard="resetFiltertaskDashboard">
+      <template #left>
+        <div class="taskViewBreadcrumb d-flex align-center text-truncate">
+          <a
+            :title="project.name"
+            class="text-color text-truncate flex-shrink-1 flex-grow-0"
+            @click="hideProjectDetails()">
+            <i class="uiIcon uiBackIcon"></i>
+            <span>{{ project.name }}</span>
+          </a>
+        </div>
+      </template>
+    </tasks-view-toolbar>
     <div v-if="filterProjectActive && groupName && groupName.projectName" class="px-0 ">
       <div 
         v-for="(projectItem,i) in groupName.projectName" 
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewSwitcher.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewSwitcher.vue
new file mode 100644
index 000000000..1eb832c26
--- /dev/null
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewSwitcher.vue
@@ -0,0 +1,142 @@
+<!--
+  This file is part of the Meeds project (https://meeds.io/).
+  Copyright (C) 2022 Meeds Association
+  contact@meeds.io
+  This program is free software; you can redistribute it and/or
+  modify it under the terms of the GNU Lesser General Public
+  License as published by the Free Software Foundation; either
+  version 3 of the License, or (at your option) any later version.
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+  Lesser General Public License for more details.
+  You should have received a copy of the GNU Lesser General Public License
+  along with this program; if not, write to the Free Software Foundation,
+  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+-->
+<!-- Compact view selector (Board/List/Plan) styled like agenda's AgendaSwitchView.
+     The dropdown is moved to document.body and positioned with fixed coordinates
+     so it always renders above the kanban board (the board content otherwise
+     paints over an in-place dropdown regardless of z-index). -->
+<template>
+  <div class="tasksViewSwitcher d-flex align-center">
+    <v-btn
+      :title="$t('label.viewOptions')"
+      small
+      min-height="36"
+      elevation="0"
+      class="px-0"
+      @click="toggle">
+      <v-icon
+        v-if="selectedOption"
+        :class="selectedOption.icon"
+        class="text-light-color"
+        size="20" />
+      <v-icon class="ps-2 text-light-color" size="12">fa-chevron-down</v-icon>
+    </v-btn>
+    <v-card
+      ref="menuCard"
+      v-show="menu"
+      class="tasksViewSwitcherMenu"
+      elevation="4">
+      <v-list class="pa-0" dense>
+        <v-list-item
+          v-for="item in viewOptions"
+          :key="item.value"
+          :class="item.value === view && 'background-grey-primary'"
+          dense
+          @click="select(item)">
+          <v-list-item-icon class="me-2 my-0 align-self-center">
+            <v-icon
+              :class="[item.icon, 'text-light-color']"
+              size="16" />
+          </v-list-item-icon>
+          <v-list-item-title>{{ item.label }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    view: {
+      type: String,
+      default: 'board',
+    },
+  },
+  data: () => ({
+    menu: false,
+    cardEl: null,
+  }),
+  computed: {
+    viewOptions() {
+      return [
+        { value: 'board', icon: 'far fa-clipboard', label: this.$t('label.boardView') },
+        { value: 'list', icon: 'fas fa-list', label: this.$t('label.listView') },
+        { value: 'gantt', icon: 'fas fa-stream', label: this.$t('label.ganttView') },
+      ];
+    },
+    selectedOption() {
+      return this.viewOptions.find(o => o.value === this.view) || this.viewOptions[0];
+    },
+  },
+  mounted() {
+    // Relocate the dropdown high in the Vuetify app root so it escapes the
+    // board's stacking context but stays inside .v-application (keeping the
+    // theme background; a plain <body> child would render transparent).
+    this.cardEl = this.$refs.menuCard && this.$refs.menuCard.$el;
+    if (this.cardEl) {
+      this.cardEl.style.position = 'fixed';
+      this.cardEl.style.zIndex = '9999';
+      this.cardEl.style.minWidth = '160px';
+      const appRoot = document.querySelector('.v-application') || document.body;
+      appRoot.appendChild(this.cardEl);
+    }
+    document.addEventListener('click', this.onDocumentClick, true);
+    window.addEventListener('scroll', this.onScroll, true);
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.onDocumentClick, true);
+    window.removeEventListener('scroll', this.onScroll, true);
+    if (this.cardEl && this.cardEl.parentNode) {
+      this.cardEl.parentNode.removeChild(this.cardEl);
+    }
+  },
+  methods: {
+    toggle() {
+      this.menu = !this.menu;
+      if (this.menu) {
+        this.$nextTick(this.positionMenu);
+      }
+    },
+    positionMenu() {
+      if (!this.cardEl) {
+        return;
+      }
+      const rect = this.$el.getBoundingClientRect();
+      const width = this.cardEl.offsetWidth || 160;
+      this.cardEl.style.top = `${Math.round(rect.bottom + 4)}px`;
+      this.cardEl.style.left = `${Math.round(rect.right - width)}px`;
+    },
+    onScroll() {
+      if (this.menu) {
+        this.menu = false;
+      }
+    },
+    onDocumentClick(event) {
+      if (this.menu
+          && !this.$el.contains(event.target)
+          && !(this.cardEl && this.cardEl.contains(event.target))) {
+        this.menu = false;
+      }
+    },
+    select(item) {
+      this.menu = false;
+      if (item.value !== this.view) {
+        this.$emit('change', item.value);
+      }
+    },
+  },
+};
+</script>
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewToolbar.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewToolbar.vue
index d09f6d862..a7d99987a 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewToolbar.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewToolbar.vue
@@ -16,58 +16,81 @@
 -->
 <template>
   <div>
-    <v-toolbar
-      id="TasksDashboardToolbar"
-      flat
-      class="tasksToolbar">
-      <div class="taskDisplay">
-        <v-tabs
-          class="projectTasksViewTabs">
-          <v-tab
-            :href="taskCardTabView"
-            class="taskTabBoard"
-            @change="changeTaskViewTab('board')">
-            <i class="uiIcon uiIconBoard"></i>
-            <span>{{ $t('label.boardView') }}</span>
-          </v-tab>
-          <v-tab
-            :href="taskListTabView"
-            class="taskTabList"
-            @change="changeTaskViewTab('list')">
-            <i class="uiIcon uiIconList"></i>
-            <span>{{ $t('label.listView') }}</span>
-          </v-tab>
-          <v-tab
-            :href="taskGanttTabView"
-            class="taskTabGantt"
-            @change="changeTaskViewTab('gantt')">
-            <i class="uiIcon uiIconGantt"></i>
-            <span>{{ $t('label.ganttView') }}</span>
-          </v-tab>
-        </v-tabs>
-      </div>
-      <v-spacer />
-      <v-scale-transition>
+    <div class="projectBoardToolbar d-flex align-center">
+      <!-- Search expanded: back arrow + full-width input (same scheme as Agenda/Documents) -->
+      <template v-if="searchOpen">
+        <v-btn
+          class="px-0 me-2 flex-shrink-0"
+          small
+          icon
+          @click="closeSearch">
+          <v-icon size="22" class="icon-default-color">fa-arrow-left</v-icon>
+        </v-btn>
         <v-text-field
-          v-if="taskViewTabName != 'gantt'"
+          ref="searchField"
           v-model="keyword"
-          :placeholder=" $t('label.filterTask') "
+          :placeholder="$t('label.filterTask')"
           prepend-inner-icon="fa-filter"
-          class="inputTasksFilter pa-0 me-3 my-auto"
-          clearable />
-      </v-scale-transition>
-      <v-scale-transition>
+          class="flex-grow-1 pa-0 my-auto"
+          autocomplete="off"
+          hide-details
+          clearable
+          @input="onKeyword"
+          @keydown.esc="closeSearch" />
+      </template>
+      <!-- Default: breadcrumb on the left, all actions grouped on the right -->
+      <template v-else>
+        <div class="d-flex align-center text-truncate flex-grow-1">
+          <slot name="left"></slot>
+        </div>
+        <extension-registry-components
+          :params="{ project }"
+          name="TaskProjectBoard"
+          type="task-board-header"
+          parent-element="div"
+          element="div"
+          class="boardHeaderExtensions d-flex align-center flex-shrink-0" />
+        <tasks-view-switcher
+          v-if="!$root.isMobile"
+          :view="taskViewTabName"
+          class="flex-shrink-0"
+          @change="changeTaskViewTab" />
         <v-btn
-          class="btn px-2 btn-primary filterTasksSetting"
-          outlined
+          v-if="taskViewTabName !== 'gantt'"
+          :title="$t('label.filterTask')"
+          class="flex-shrink-0"
+          max-width="36"
+          max-height="36"
+          icon
+          @click="openSearch">
+          <v-icon
+            size="20"
+            :class="keyword && keyword.length && 'primary--text' || 'text-light-color'">
+            fa-filter
+          </v-icon>
+        </v-btn>
+        <v-btn
+          :title="$t('label.filter')"
+          class="flex-shrink-0"
+          max-width="36"
+          max-height="36"
+          icon
           @click="openDrawer">
-          <i class="uiIcon uiIconFilterSetting pe-3"></i>
-          <span class="d-none font-weight-regular caption d-sm-inline">
-            {{ $t('label.filter') }} {{ getFilterNum() }}
-          </span>
+          <v-badge
+            :value="filterNumber > 0"
+            :content="filterNumber"
+            color="primary"
+            overlap
+            bordered>
+            <v-icon
+              size="20"
+              :class="filterNumber > 0 && 'primary--text' || 'text-light-color'">
+              fa-sliders-h
+            </v-icon>
+          </v-badge>
         </v-btn>
-      </v-scale-transition>
-    </v-toolbar>
+      </template>
+    </div>
     <tasks-filter-drawer
       ref="filterTasksDrawer"
       :project="project.id"
@@ -91,18 +114,6 @@ export default {
       type: Array,
       default: () => []
     },
-    taskCardTabView: {
-      type: String,
-      default: ''
-    },
-    taskListTabView: {
-      type: String,
-      default: ''
-    },
-    taskGanttTabView: {
-      type: String,
-      default: ''
-    },
     showCompletedTasks: {
       type: Boolean,
       default: false
@@ -111,35 +122,37 @@ export default {
   data () {
     return {
       keyword: null,
-      awaitingSearch: false,
       filterNumber: 0,
-      searchonkeyChange: true,
       taskViewTabName: 'board',
+      searchOpen: false,
+      searchTimer: null,
     };
   },
-  watch: {        
-    keyword() {  
-      if (!this.awaitingSearch) {
-        const searchonkeyChange = this.searchonkeyChange;
-        setTimeout(() => {
-          this.$emit('keyword-changed', this.keyword,searchonkeyChange);
-          this.awaitingSearch = false;
-        }, 1000);
-      }
-      this.awaitingSearch = true;
-      if (this.searchonkeyChange){
-        this.resetFields('query'); }      
-      this.searchonkeyChange= true;
-    },
-  },
   created() {
+    this.filterNumber = Number(localStorage.getItem('filtersNumber')) || 0;
     this.$root.$on('hide-tasks-project', () => {
-      $('a.v-tab').removeClass('v-tab--active');
-      $('a.taskTabBoard').addClass('v-tab--active');
-      this.keyword = null ;
+      this.taskViewTabName = 'board';
+      this.keyword = null;
+      this.searchOpen = false;
     });
   },
   methods: {
+    openSearch() {
+      this.searchOpen = true;
+      this.$nextTick(() => this.$refs.searchField && this.$refs.searchField.focus());
+    },
+    closeSearch() {
+      this.searchOpen = false;
+    },
+    onKeyword(term) {
+      this.keyword = term;
+      if (this.searchTimer) {
+        clearTimeout(this.searchTimer);
+      }
+      this.searchTimer = setTimeout(() => {
+        this.$emit('keyword-changed', this.keyword, true);
+      }, 600);
+    },
     openDrawer() {
       this.$refs.filterTasksDrawer.open();
     },
@@ -152,13 +165,10 @@ export default {
       this.$root.$emit('open-task-drawer', defaultTask);
     },
     resetFilterTask(){
-      this.searchonkeyChange=false;
-      this.keyword='';
-      this.searchonkeyChange=true;
+      this.keyword = '';
       this.$emit('reset-filter-task-dashboard');
     },
     filterTasks(e) {
-      this.searchonkeyChange = false;
       this.keyword = e.tasks.query;
       this.$emit('filter-task-dashboard', {
         tasks: e.tasks,
@@ -172,26 +182,7 @@ export default {
     filterNumChanged(filtersnumber){
       this.filterNumber=filtersnumber;
     },
-    getFilterNum(){
-      const numOfFilter = localStorage.getItem('filtersNumber');
-      this.filterNumber=Number(numOfFilter);
-      if (this.filterNumber>0){
-        return `(${this.filterNumber})`;
-      } return '';
-    },
     changeTaskViewTab(view){
-      $('a.v-tab').removeClass('v-tab--active');
-      if ( view === 'list') {
-        $('a.taskTabList').addClass('v-tab--active');
-      }
-
-      if ( view === 'board') {
-        $('a.taskTabBoard').addClass('v-tab--active');
-      }
-
-      if ( view === 'gantt') {
-        $('a.taskTabGantt').addClass('v-tab--active');
-      }
       this.taskViewTabName=view;
       this.$emit('taskViewChangeTab', view);
     }
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/initComponents.js b/webapps/src/main/webapp/vue-app/tasks-management/initComponents.js
index 51ee4d655..c42a78282 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/initComponents.js
+++ b/webapps/src/main/webapp/vue-app/tasks-management/initComponents.js
@@ -47,6 +47,7 @@ import TasksSortByProjectDrawer from './components/tasks/TasksSortByProjectDrawe
 
 import TasksViewDashboard from './components/ProjectTasks/TasksViewDashboard.vue';
 import TasksViewToolbar from './components/ProjectTasks/TasksViewToolbar.vue';
+import TasksViewSwitcher from './components/ProjectTasks/TasksViewSwitcher.vue';
 import TasksViewBoard from './components/ProjectTasks/TasksViewBoard.vue';
 import TasksViewList from './components/ProjectTasks/TasksViewList.vue';
 import TasksViewListColumn from './components/ProjectTasks/TasksViewListColumn.vue';
@@ -93,6 +94,7 @@ const components = {
 
   'tasks-view-dashboard': TasksViewDashboard,
   'tasks-view-toolbar': TasksViewToolbar,
+  'tasks-view-switcher': TasksViewSwitcher,
   'tasks-view-board': TasksViewBoard,
   'tasks-view-board-column': TasksViewBoardColumn,
   'tasks-view-list': TasksViewList,