diff --git a/webapps/src/main/resources/locale/portlet/taskManagement_en.properties b/webapps/src/main/resources/locale/portlet/taskManagement_en.properties
index db8a77a62..3673cfeab 100644
--- a/webapps/src/main/resources/locale/portlet/taskManagement_en.properties
+++ b/webapps/src/main/resources/locale/portlet/taskManagement_en.properties
@@ -116,6 +116,7 @@ label.label.titleProject=Project title
 label.untitledTask=Untitled Task
 label.description=Description
 label.noDescription=No description available
+label.project.card.tasksCount={0} tasks
 label.inviteManagers=Invite Managers
 label.inviteParticipant=@mention someone
 label.searchPlaceholder=Start typing to search
@@ -395,6 +396,7 @@ label.project.filter.all=All Projects
 label.project.filter.managed=I manage
 label.project.filter.collaborated=I collaborate to
 label.project.filter.with_tasks=With tasks
+label.project.filter.favorites=Favorites
 label.project.filter.hidden=Hidden
 #timeConvert
 task.timeConvert.Less_Than_A_Minute=less than a minute ago
diff --git a/webapps/src/main/webapp/WEB-INF/gatein-resources.xml b/webapps/src/main/webapp/WEB-INF/gatein-resources.xml
index f55e08b43..a6c54e460 100644
--- a/webapps/src/main/webapp/WEB-INF/gatein-resources.xml
+++ b/webapps/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -260,6 +260,9 @@
       <depends>
         <module>taskCommentsDrawer</module>
       </depends>
+      <depends>
+        <module>applicationToolbarComponent</module>
+      </depends>
       <depends>
         <module>ExtendedDomPurify</module>
       </depends>
diff --git a/webapps/src/main/webapp/skin/css/tasks.less b/webapps/src/main/webapp/skin/css/tasks.less
index 797985dde..90e0e7ab9 100644
--- a/webapps/src/main/webapp/skin/css/tasks.less
+++ b/webapps/src/main/webapp/skin/css/tasks.less
@@ -23,6 +23,99 @@
 
 /*----------------------Tasks Management ---------------------*/
 
+/* The shared application-toolbar keeps a 16px .v-toolbar__content padding even
+   with px-0; remove it on the Projects/Tasks list toolbars so the Add button
+   and the right-hand controls line up with the cards' edges. */
+#projectListToolbar > .v-toolbar__content,
+#tasksListToolbar > .v-toolbar__content {
+  /* Flush with the content on both edges. The project grid uses a symmetric
+     column gutter (row mx-n2 + col px-2), so cards align to the container edges
+     and the toolbar lines up without any extra padding. */
+  padding-inline-start: 0 !important;
+  padding-inline-end: 0 !important;
+}
+
+/* Redesigned project card (single face, colored initials monogram). */
+.projectCardItem {
+  position: relative;
+  height: 175px;
+  border-radius: 8px;
+  text-align: start;
+  overflow: hidden;
+  .projectCardColorBar {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    border: 0 !important;
+  }
+  .projectMonogramDefault {
+    background: var(--allPagesPrimaryColor, #476A9C);
+  }
+  .projectCardTitle {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.3;
+    text-align: start;
+  }
+  .projectCardDescription {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    min-height: 36px;
+    font-size: 13px;
+    color: @greyColorLighten1;
+    text-align: start;
+  }
+  .projectCardHeading {
+    text-align: start;
+  }
+  .projectCardFooter {
+    border-top: 1px solid @borderColor;
+  }
+  .projectCardProgress {
+    .projectCardProgressBar {
+      width: 72px;
+      height: 6px;
+      border-radius: 3px;
+      overflow: hidden;
+      background-color: #e0e0e0;
+    }
+    .projectCardProgressSegment {
+      height: 100%;
+      min-width: 2px;
+    }
+  }
+}
+
+/* The shared user-avatars-list lifts the hovered avatar with .mt-n1 (margin-top
+   -4px). A negative margin reflows the flex line, so the row/card footer (and the
+   progress bar) shifted with it. Keep the visual lift but do it via transform
+   (no layout impact) so only the avatar moves, not its neighbours. */
+.v-application .taskListItemView .mt-n1,
+.v-application .projectCardItem .mt-n1 {
+  margin-top: 0 !important;
+  transform: translateY(-4px) !important;
+}
+/* The task row's assignee cell carries Vuetify's `v-avatar` class (overflow:hidden
+   + rounded), which clipped the lifted/overlapping avatars. Let them overflow. */
+.v-application .taskListItemView .taskAssignee {
+  overflow: visible !important;
+}
+
+/* Placeholder cards shown while the first page of projects is loading. */
+.projectCardSkeleton.v-skeleton-loader {
+  height: 175px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid @borderColor;
+  .v-skeleton-loader__article {
+    padding-top: 16px;
+  }
+}
+
 .addProjectDrawer {
   hr.my-0.v-divider.theme--light{
     margin-top: 5px!important;
@@ -129,91 +222,6 @@
         color: @textLightColor;
       }
       .listOfManager,.listOfParticipant {
-
-        .listOfParticipantavatar{
-          margin-right: -2px ~'!important; /** orientation=lt */ ';
-          margin-left: -2px ~'!important; /** orientation=rt */ ';
-        }
-        .listOfManageravatar{
-          a.flex-nowrap.flex-shrink-0.d-flex {
-            margin-right: 17px ~'; /** orientation=lt */ ';
-            margin-left: 17px ~'; /** orientation=rt */ ';
-          }
-        }
-        .listOfParticipantavatar{
-          a.flex-nowrap.flex-shrink-0.d-flex {
-            margin-right: 10px ~'; /** orientation=lt */ ';
-            margin-left: 10px ~'; /** orientation=rt */ ';
-          }
-          .seeMoreAvatars{
-            margin-right: 7px ~'; /** orientation=lt */ ';
-            margin-left: 7px ~'; /** orientation=rt */ ';
-          }
-        }
-
-        .listOfManageravatar,.listOfParticipantavatar{
-          float: left ~'; /** orientation=lt */ ';
-          float: right ~'; /** orientation=rt */ ';
-          display: flex;
-          margin-right: 5px ~'; /** orientation=lt */ ';
-          margin-left: 5px ~'; /** orientation=rt */ ';
-          .seeMoreAvatars {
-            .seeMoreItem {
-              position: relative;
-              margin-top: 5px;
-              &:before {
-                content: "";
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                background: @baseColorMedium;
-                border-radius: 50%;
-                opacity: .5;
-                z-index: 1;
-              }
-              .v-avatar{
-                height: 30px!important;
-                min-width: 30px!important;
-                width: 30px!important;
-              }
-              .seeMoreAvatarList {
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                text-align: center;
-                width: 30px;
-                height: 30px;
-                color: white;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                font-size: 15px;
-                font-weight: bold;
-                z-index: 1;
-              }
-            }
-          }
-        }
-        a.flex-nowrap.flex-shrink-0.d-flex {
-          .v-avatar.pull-left.my-auto {
-            height: 30px;
-            min-width: 30px;
-            width: 30px;
-          }
-          .peopleInfoIcon {
-            z-index: 9999;
-            background: #fff;
-            height: 19px;
-            width: 19px;
-            margin-top: 23px;
-            margin-left: -13px ~'!important; /** orientation=lt */ ';
-            margin-right: -14px ~'!important; /** orientation=lt */ ';
-            margin-right: -13px ~'!important; /** orientation=rt */ ';
-            margin-left: -14px ~'!important; /** orientation=rt */ ';
-          }
-        }
         .editManager,.editParticipant {
           margin-left: 10px ~'; /** orientation=lt */ ';
           margin-right: 10px ~'; /** orientation=rt */ ';
@@ -603,470 +611,9 @@
     margin-right: 19px ~'; /** orientation=rt */ ';
     display: block
   }
-  .tasksToolbar {
-    .inputTasksFilter {
-      max-width: 250px;
-      .v-input__slot {
-        margin-bottom: 0!important;
-        .v-text-field__slot {
-          input {
-            max-height: 22px!important;
-          }
-        }
-      }
-      .v-input__append-inner {
-        button.mdi-close {
-          font-size: 18px;
-          margin-top: 14px;
-        }
-      }
-    }
-    .taskFilterMobile {
-      color: @greyColorLighten1!important;
-      font-size: 16px!important;
-      margin-left: 12px ~'; /** orientation=lt */ ';
-      margin-right: 12px ~'; /** orientation=rt */ ';
-      display: none;
-    }
-    .inputTasksFilterMobile {
-      display: flex!important;
-      width: 90%;
-      max-width: 90%;
-      position: absolute;
-      top: 50px;
-      .v-input__append-outer {
-        margin-left: -25px ~'!important; /** orientation=lt */ ';
-        margin-right: -25px ~'!important; /** orientation=rt */ ';
-      }
-    }
-    .tasksFilterMobile {
-      display: none!important;
-    }
-    .selectPrimaryFilter {
-      width: auto;
-      height: 38px;
-      color: @greyColorLighten1;
-      &:focus {
-        outline: none;
-        box-shadow: none;
-      }
-    }
-
-    #widthTmpSelectTaskFilter {
-      display:none;
-      visibility:hidden;
-      width: inherit!important;
-    }
-
-    .selectTasksFilter {
-      height: 40px;
-      width: auto;
-      padding-right: 20px ~'; /** orientation=lt */ ';
-      padding-left: 20px ~'; /** orientation=rt */ ';
-      &:focus {
-        outline: none;
-        box-shadow: none;
-      }
-    }
-    .taskDisplay {
-      .uiIcon {
-        font-style: normal;
-        font-size: 16px;
-        padding-right: 10px ~'; /** orientation=lt */ ';
-        padding-left: 10px ~'; /** orientation=rt */ ';
-      }
-      .uiIconCards {
-        .far();
-        .fa-clipboard();
-      }
-      .uiIconList {
-        .fas();
-        .fa-list();
-      }
-    }
-    .v-tabs-slider-wrapper {
-      display: none;
-    }
-    .taskTabCards {
-      border: 1px solid @borderColor;
-      border-radius: 5px 0 0 5px;
-      height: 38px;
-      min-height: 38px;
-    }
-    .taskTabList {
-      border: 1px solid @borderColor;
-      border-radius: 0 5px 5px 0;
-      height: 38px;
-      min-height: 38px;
-    }
-    .v-tab.v-tab--active {
-      border: 1px solid @primaryColor!important;
-      background-color: @tabNormalLinkBackground!important;
-    }
-    .filterTasksSetting {
-      .uiIconFilterSetting {
-        .fa();
-        .fa-sliders-h();
-        font-style: normal;
-        font-size: 16px;
-        color: @primaryColor;
-      }
-    }
-  }
   .tasksListContainer {
     .projectItem {
       position: relative;
-      .taskCardFlip {
-        transition: 0.6s;
-        transform-style: preserve-3d;
-        position: relative;
-        min-height: @taskCardParentMaxHeight;
-        padding: 0;
-        .taskCardFront {
-          z-index: 2;
-          transform: rotateY(0deg);
-          -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-          position: absolute;
-          top: 0;
-          left: 0 ~'; /** orientation=lt */ ';
-          right: 0 ~'; /** orientation=rt */ ';
-          height: @taskCardMaxHeight;
-          max-height: @taskCardMaxHeight;
-          width: 100%;
-          max-width: 100%;
-          .asparagus_border_bottom {
-            border-bottom-color: #909958 !important;
-          }
-          .laurel_green_border_bottom {
-            border-bottom-color: #BED67E !important;
-          }
-          .moss_green_border_bottom {
-            border-bottom-color: #98CC81 !important;
-          }
-          .munsell_blue_border_bottom {
-            border-bottom-color: #319AB3 !important;
-          }
-          .sky_blue_border_bottom {
-            border-bottom-color: #4DBED9 !important;
-          }
-          .powder_blue_border_bottom {
-            border-bottom-color: #9EE4F5 !important;
-          }
-          .baby_blue_border_bottom {
-            border-bottom-color: #B2E2FF !important;
-          }
-          .navy_blue_border_bottom {
-            border-bottom-color: #4273C8 !important;
-          }
-          .blue_gray_border_bottom {
-            border-bottom-color: #8EB0EA !important;
-          }
-          .light_blue_border_bottom {
-            border-bottom-color: #B3CFFF !important;
-          }
-          .light_gray_border_bottom {
-            border-bottom-color: #CDCDCD !important;
-          }
-          .purple_border_bottom {
-            border-bottom-color: #774EA9 !important;
-          }
-          .light_purple_border_bottom {
-            border-bottom-color: #BC99E7 !important;
-          }
-          .pink_border_bottom {
-            border-bottom-color: #FFC8F0 !important;
-          }
-          .beige_border_bottom {
-            border-bottom-color: #FFE1BE !important;
-          }
-          .hot_pink_border_bottom {
-            border-bottom-color: #F97575 !important;
-          }
-          .light_brown_border_bottom {
-            border-bottom-color: #C5B294 !important;
-          }
-          .gray_border_bottom {
-            border-bottom-color: #A39594 !important;
-          }
-          .plum_border_bottom {
-            border-bottom-color: #CEA6AC !important;
-          }
-          .Orange_border_bottom {
-            border-bottom-color: #FFA500 !important;
-          }
-          .green_border_bottom {
-            border-bottom-color: #4CAF50 !important;
-          }
-          .red_border_bottom {
-            border-bottom-color: #F44336 !important;
-          }
-          .yellow_border_bottom {
-            border-bottom-color: #ffeb3b !important;
-          }
-          .brown_border_bottom {
-            border-bottom-color: #795548 !important;
-          }
-          .tasksCardItem {
-            height: @taskCardMaxHeight;
-            max-height: @taskCardMaxHeight;
-            flex-direction: column;
-            border: 1px solid @borderColor;
-            background-color: transparent!important;
-            border-bottom-width: 5px;
-            border-bottom-style: solid;
-            .taskItemToolbar {
-              background-color: transparent !important;
-              i {
-                color: @greyColorLighten1!important;
-              }
-              .projectCardTitle {
-                color: @textColor!important;
-                padding-left: 8px ~'; /** orientation=lt */ ';
-                padding-right: 8px ~'; /** orientation=rt */ ';
-              }
-              .uiIconInformation {
-                font-size: 20px;
-                margin-top: -3px;
-              }
-              .uiIconVerticalDots {
-                font-size: 16px;
-                margin-top: -3px;
-              }
-              .projectCardTitle {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                max-width: 75%;
-                width: 75%;
-                cursor: pointer;
-              }
-            }
-            .noProjectColor {
-              background: @lightGrey;
-              .toolbarNoColor {
-                color: @baseColorLight;
-              }
-            }
-            .taskItemInfo {
-              padding: 8px!important;
-              .taskItemDescription {
-                min-height: 70px;
-                display: -webkit-box;
-                -webkit-line-clamp: 4;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                max-height: 50%;
-                cursor: pointer;
-                p {
-                  margin-bottom: 0;
-                  color: @borderColorLight;
-                }
-                .noProjectDescription {
-                  color: @borderColorLight;
-                  font-size: @textFontSize;
-                }
-              }
-              .largeDescriptionArea {
-                margin-bottom: 0!important;
-              }
-              .ProjectSpace {
-                .v-list-item {
-                  min-height: 38px!important;
-                  .noSpaceProjectIcon {
-                    height: 28px;
-                    min-width: 28px;
-                    width: 28px;
-                    background: @greyColor;
-                    color: white;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                  }
-                  .noSpaceLabel {
-                    color: @greyColorLighten1;
-                  }
-                }
-              }
-            }
-            .SpaceAdmin {
-              position: absolute;
-              bottom: 0;
-              width: 100%;
-              padding: 0 10px;
-              .v-list-item {
-                min-height: 38px!important;
-              }
-              .spaceAdminWrapper {
-                position: relative;
-                z-index: 2;
-                .managerAvatarsList {
-                  .seeMoreAvatars {
-                    .seeMoreItem {
-                      position: relative;
-                      &:before {
-                        content: "";
-                        width: 100%;
-                        height: 100%;
-                        position: absolute;
-                        background: @baseColorMedium;
-                        border-radius: 50%;
-                        opacity: .5;
-                        z-index: 1;
-                      }
-                      .seeMoreAvatarList {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        text-align: center;
-                        width: 30px;
-                        height: 30px;
-                        color: white;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        cursor: pointer;
-                        font-size: 15px;
-                        font-weight: bold;
-                        z-index: 1;
-                      }
-                    }
-                  }
-                }
-                .AllManagerAvatar {
-                  box-shadow: 0 0 2px 1px @greyColor;
-                  border-radius: 25px;
-                  z-index: 1;
-                  background: white;
-                  .uiIconArrowBack {
-                    font-size: 12px;
-                    padding-top: 6px;
-                    padding-left: 4px ~'; /** orientation=lt */ ';
-                    padding-right: 4px ~'; /** orientation=rt */ ';
-                    cursor: pointer;
-                  }
-                }
-              }
-            }
-          }
-        }
-        .tasksCardBack {
-          transform: rotateY(180deg);
-          backface-visibility: hidden;
-          -webkit-backface-visibility: hidden;
-          position: absolute;
-          top: 0;
-          left: 0 ~'; /** orientation=lt */ ';
-          right: 0 ~'; /** orientation=rt */ ';
-          height: @taskCardMaxHeight;
-          max-height: @taskCardMaxHeight;
-          width: 100%;
-          max-width: 100%;
-          .tasksCardItem {
-            height: @taskCardMaxHeight;
-            max-height: @taskCardMaxHeight;
-            flex-direction: column;
-            border: 1px solid @borderColor;
-            position: relative;
-            background-color: transparent!important;
-            border-bottom-width: 5px!important;
-            border-bottom-style: solid;
-            .projectDetailsReverse {
-              position: relative;
-              .reverseInfoIcon {
-                position: absolute;
-                top: 12px;
-                color: @greyColorLighten1;
-                font-size: 20px;
-              }
-            }
-            .noTasksProject {
-              height: 80%;
-              text-align: center;
-              padding-top: 50px;
-              padding-bottom: 24px;
-
-              .noTasksProjectIcon {
-                .uiIconTask {
-                  color: @greyColor;
-                  font-size: 40px;
-                  padding-bottom: 10px;
-                }
-              }
-            }
-            .echartStatsContent {
-              justify-content: space-evenly;
-              .echartAndLabel {
-                position: relative;
-                .projectTasksTotalNumber {
-                  position: absolute;
-                  left: 60px ~'; /** orientation=lt */ ';
-                  right: 60px ~'; /** orientation=rt */ ';
-                  top: 35%;
-                  span {
-                    display: block;
-                    text-align: center;
-                  }
-                  .totalNumber {
-                    font-size: 1.5rem;
-                  }
-                }
-              }
-              .projectStatusNumber{
-                width: 40%;
-                p {
-                  position: relative;
-                  &:before {
-                    position: absolute;
-                    content: '';
-                    width: 7px;
-                    height: 7px;
-                    border-radius: 50%;
-                    margin-left: -15px ~'; /** orientation=lt */ ';
-                    margin-right: -15px ~'; /** orientation=rt */ ';
-                    top: 5px;
-                  }
-                }
-                .blueLabel {
-                  &:before {
-                    background: @infoColor;
-                  }
-                }
-                .yellowLabel {
-                  &:before {
-                    background: @warningColor;
-                  }
-                }
-                .redLabel {
-                  &:before {
-                    background: @errorColor;
-                  }
-                }
-                .greenLabel {
-                  &:before {
-                    background: @successColor;
-                  }
-                }
-                .purpleLabel {
-                  &:before {
-                    background: #9834eb;
-                  }
-                }                                         
-                .grayLabel {
-                  &:before {
-                    background: @baseColorMedium;
-                  }
-                }                     
-              }
-            }
-          }
-        }
-      }
-      .taskCardFlipped {
-        transform: rotateY(180deg);
-      }
       .projectActionMenu {
         right: 27px ~'; /** orientation=lt */ ';
         left: 27px ~'; /** orientation=rt */ ';
@@ -1226,8 +773,15 @@
               border-color: var(--allPagesPrimaryColor, #476A9C) !important;
               color: var(--allPagesPrimaryColor, #476A9C);
               border: thin solid rgba(0, 0, 0, 0.12);
-              width: 28px;
+              /* Grow with the digit count (min-width keeps the 2-digit pill shape;
+                 padding + nowrap let 3+ digit counts like 105 fit without clipping). */
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              min-width: 28px;
               height: 21px;
+              padding: 0 6px;
+              white-space: nowrap;
               margin-left: 5px ~'; /** orientation=lt */ ';
               margin-right: 5px ~'; /** orientation=rt */ ';
               text-align: center;
@@ -1388,56 +942,10 @@
       text-align: end;
     }
   }
-  .taskAssignee {
-    .assigneDetails {
-      padding-top: 2px;
-      padding-bottom: 2px;
-      padding-right: 4px ~'; /** orientation=lt */ ';
-      padding-left: 4px ~'; /** orientation=rt */ ';
-      padding-left: 0 ~'; /** orientation=lt */ ';
-      padding-right: 0 ~'; /** orientation=rt */ ';
-    }
-  }
   .hideTaskAssignee {
     height: 0!important;
     min-height: 0!important;
   }
-  .taskAssigneeAndLabels {
-    .taskAssignee {
-      height: 35px;
-      min-height: 35px;
-      .assigneDetails {
-        padding-top: 2px;
-        padding-bottom: 2px;
-        padding-right: 4px ~'; /** orientation=lt */ ';
-        padding-left: 4px ~'; /** orientation=rt */ ';
-        padding-left: 0 ~'; /** orientation=lt */ ';
-        padding-right: 0 ~'; /** orientation=rt */ ';
-      }
-    }
-  }
-  .taskActionsAndProject {
-    .taskProject {
-      max-width: 70%;
-      width: 70%;
-      .projectSpaceDetails {
-        align-items: center;
-        max-width: 80%;
-        display: inherit;
-        .taskProjectNameChip {
-          max-width: 100%;
-          width: 100%;
-          .v-chip.v-size--small {
-            height: auto!important;
-          }
-        }
-      }
-    }
-  }
-}
-.smallTaskCard {
-  min-height: 170px!important;
-  height: 170px!important;
 }
 .taskViewCard {
   min-height: inherit;
@@ -1515,47 +1023,6 @@
 .taskAssignee {
   //padding: 2px 4px;
   //padding-left: 0;
-  .taskWorkerAvatar {
-    background-position: center;
-    background-size: cover;
-    border-radius: 50%;
-    width: 26px;
-    height: 26px;
-    img {
-      display: none;
-    }
-  }
-  .seeMoreAvatars {
-    .seeMoreItem {
-      position: relative;
-      &:before {
-        content: "";
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        background: @baseColorMedium;
-        border-radius: 50%;
-        opacity: .5;
-        z-index: 1;
-      }
-      .seeMoreAvatarList {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        text-align: center;
-        height: 27px;
-        color: white;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        font-size: 15px;
-        font-weight: bold;
-        z-index: 1;
-      }
-    }
-  }
 }
 .taskCard {
   .v-divider {
@@ -1622,41 +1089,6 @@
     height: 50vh;
     text-align: center;
     padding-top: 10%;
-    .noTasksProjectIcon {
-      i {
-        font-size: 70px;
-        color: @greyColor;
-        padding-bottom: 20px;
-      }
-      .uiIconClipboard{
-        &:after {
-          content: '\e9d0';
-          font-size: 29.5px;
-          position: absolute;
-          bottom: 12px;
-          right: -5px ~'; /** orientation=lt */ ';
-          background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
-        }
-      }
-      .uiIconTask {
-        &:after {
-          content: '\e9d0';
-          font-size: 29.5px;
-          position: absolute;
-          bottom: 12px;
-          right: -5px ~'; /** orientation=lt */ ';
-          background: white;
-        }
-      }
-    }
-    .noTasksProjectLabel {
-      font-size: 18px;
-      color: @greyColorLighten1;
-    }
-    .noTasksProjectLink {
-      font-size: 1.1rem;
-      padding-top: 12px;
-    }
   }
   .tasksCardsContainer {
     /* Zooming exits */
@@ -1812,6 +1244,12 @@
         background-color: @tableBackgroundAccent;
         border: 1px solid @tableBorder;
         border-radius: 4px;
+        cursor: pointer;
+        transition: box-shadow .15s ease, border-color .15s ease;
+        &:hover {
+          border-color: @primaryColor;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
+        }
         .taskCheckBox {
           max-width: 3%;
           width: 3%;
@@ -1838,8 +1276,8 @@
           .strikethrough{
             text-decoration: line-through;
           }
-          max-width: 40%;
-          width: 40%;
+          max-width: 30%;
+          width: 30%;
           text-align: start;
           flex: 1 1 100%;
           overflow: hidden;
@@ -1858,31 +1296,25 @@
           }
         }
         .taskProject {
-          max-width: 10%;
-          width: 10%;
+          max-width: 22%;
+          width: 22%;
           text-align: start;
           .projectSpaceDetails {
             cursor: pointer;
-            .spaceAvatar {
-              //min-width: 30px;
+            min-width: 0;
+            .projectColorDot {
+              width: 10px;
+              height: 10px;
+              border-radius: 50%;
+              border: 0 !important;
+              /* default for projects with no colour; the project colour classes
+                 (.red, .munsell_blue, …) override this via their !important bg. */
+              background-color: @greyColorLighten1;
             }
-            .taskProjectNameChip {
-              max-width: 72%;
-              .v-chip.v-size--small {
-                height: auto!important;
-                cursor: pointer;
-              }
+            .taskProjectNameLabel {
+              font-size: 13px;
+              color: @textColor;
             }
-            .taskProjectNameChipSpace {
-              max-width: 47%;
-              .v-chip.v-size--small {
-                height: auto!important;
-                cursor: pointer;
-              }
-            }
-          }
-          .taskProjectName {
-            max-width: 160px;
           }
         }
         .taskAssignee {
@@ -1915,8 +1347,8 @@
           cursor: pointer;
         }
         .taskStat {
-          max-width: 7%;
-          width: 7%;
+          max-width: 11%;
+          width: 11%;
           cursor: pointer;
           text-align: start;
           flex: 1 1 100%;
@@ -1968,9 +1400,12 @@
       }
     }
     .tasksViewList {
+      .taskListItemView {
+        cursor: pointer;
+      }
       .taskTitle {
-        width: 59%!important;
-        max-width: 59%!important;
+        width: 55%!important;
+        max-width: 55%!important;
       }
       .taskAssignee {
         max-width: 5%!important;
@@ -1989,8 +1424,8 @@
         width: 6%!important;
       }
       .taskStat {
-        max-width: 10%!important;
-        width: 10%!important;
+        max-width: 14%!important;
+        width: 14%!important;
       }
       .taskDueDate {
         max-width: 7%!important;
@@ -1998,161 +1433,12 @@
       }
     }
   }
-  .taskProject {
-    .taskProjectName {
-      flex: 1 1 auto;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: inline-block;
-    }
-    .taskProjectNameCard {
-      width: 120px;
-    }
-    .spaceAvatar {
-      .spaceAvatarImg {
-        border-radius: 4px;
-      }
-    }
-    .noSpaceAvatar {
-      background: white;
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .noSpaceProjectIcon {
-        color: @greyColor;
-      }
-    }
-    .noProjectColor {
-      background: @baseColorLight!important;
-      border: 2px solid @baseColorLight;
-    }
-    .beige {
-      background: #FFE1BE!important;
-      border: 2px solid #FFE1BE;
-    }
-    .asparagus {
-      background: #909958!important;
-      border: 2px solid #909958;
-    }
-    .laurel_green {
-      background: #BED67E!important;
-      border: 2px solid #BED67E;
-    }
-    .moss_green {
-      background: #98CC81!important;
-      border: 2px solid #98CC81;
-    }
-    .munsell_blue {
-      background: #319AB3!important;
-      border: 2px solid #319AB3;
-    }
-    .sky_blue {
-      background: #4DBED9!important;
-      border: 2px solid #4DBED9;
-    }
-    .powder_blue {
-      background: #9EE4F5!important;
-      border: 2px solid #9EE4F5;
-    }
-    .baby_blue {
-      background: #B2E2FF!important;
-      border: 2px solid #B2E2FF;
-    }
-    .navy_blue {
-      background: #4273C8!important;
-      border: 2px solid #4273C8;
-    }
-    .blue_gray {
-      background: #8EB0EA!important;
-      border: 2px solid #8EB0EA;
-    }
-    .light_blue {
-      background: #B3CFFF!important;
-      border: 2px solid #B3CFFF;
-    }
-    .light_gray {
-      background: #CDCDCD!important;
-      border: 2px solid #CDCDCD;
-    }
-    .purple {
-      background: #774EA9!important;
-      border: 2px solid #774EA9;
-    }
-    .light_purple {
-      background: #BC99E7!important;
-      border: 2px solid #BC99E7;
-    }
-    .pink {
-      background: #FFC8F0!important;
-      border: 2px solid #FFC8F0;
-    }
-    .hot_pink {
-      background: #F97575!important;
-      border: 2px solid #F97575;
-    }
-    .Orange {
-      background: #FFA500!important;
-      border: 2px solid #FFA500;
-    }
-    .light_brown {
-      background: #C5B294!important;
-      border: 2px solid #C5B294;
-    }
-    .gray {
-      background: #A39594!important;
-      border: 2px solid #A39594;
-    }
-    .plum {
-      background: #CEA6AC!important;
-      border: 2px solid #CEA6AC;
-    }
-  }
   .taskLabels {
     .labelText {
       background: @greyColor;
       padding: 2px 4px;
       cursor: pointer;
     }
-    .noLabelText {
-      color: @greyColorLighten1;
-    }
-  }
-  .AllAssigneeAvatar {
-    box-shadow: 0 0 2px 1px @greyColor;
-    border-radius: 25px;
-    width: auto!important;
-    display: inline-flex!important;
-    padding: 2px 4px;
-    padding-left: 0 ~'; /** orientation=lt */ ';
-    padding-right: 0 ~'; /** orientation=rt */ ';
-    .uiIconArrowBack {
-      font-size: 12px;
-      padding-top: 6px;
-      padding-left: 4px ~'; /** orientation=lt */ ';
-      padding-right: 4px ~'; /** orientation=rt */ ';
-      cursor: pointer;
-    }
-  }
-  #TasksListToolbar {
-    height: auto!important;
-    .v-toolbar__content {
-      height: auto!important;
-      padding: 0;
-    }
-  }
-  .toolbarLarge {
-    .v-toolbar__content {
-      padding-bottom: 50px!important;
-    }
-  }
-}
-#ProjectListToolbar {
-  height: auto!important;
-  .v-toolbar__content {
-    height: auto!important;
-    padding: 0;
   }
 }
 
@@ -2216,21 +1502,6 @@
 
 /*----------- Task Snapshot CSS ---------------*/
 
-.flexCard {
-  flex: 1 1 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.btn-show{
-  color: @primaryColor!important;
-  margin-block-end: 5px;
-  border:none!important;
-}
-.btn-show:hover {
-  color: @primaryColor!important;
-  background-color: #f2f2f2!important;
-}
 .projectCard {
   border-radius: 15px 15px 15px 15px;
   margin-right: 10px ~'; /** orientation=lt */ ';
@@ -2266,9 +1537,6 @@
   margin-left: 25px ~'; /** orientation=rt */ ';
 }
 
-.color-title {
-  color: @greyColorLighten1;
-}
 .taskTitle {
   color: black;
   flex: 1 1 100%;
@@ -2287,51 +1555,12 @@
   margin-top: 5px;
   margin-block-end: 5px;
 }
-.iconlarge {
-  font-size: 40px;
-  color:@successColorLight;
-}
-.noTasks {
-  display: flex;
-  height: 370px;
-  align-items: center;
-  justify-content: center;
-  .noTasksContent {
-    text-align: center;
-    margin: auto;
-    .uiNoTaskIcon {
-      color: #6d7d9821;
-      font-size: 60px;
-      font-style: normal;
-      font-weight: normal;
-      .fa();
-      .fa-clipboard-list();
-    }
-    .noTasksTitle {
-      color: #4d5466;
-      font-weight: normal;
-      font-size: 22px;
-    }
-    p {
-      font-weight: normal;
-      font-size: 15px;
-      color: @greyColorLighten1;
-    }
-  }
-}
 .list-item {
   display: flex;
   width: 100%;
   margin-right: 10px ~'; /** orientation=lt */ ';
   margin-left: 10px ~'; /** orientation=rt */ ';
 }
-.list-leave-active {
-  transition: all 1s;
-}
-.list-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
 
 /*---------------------Responsive Style ---------------------------*/
 
@@ -2367,204 +1596,14 @@
   }
 }
 
-@media (max-width: @maxMobileWidth) {
-  #TasksParentContainer {
-    #TasksManagementPortlet {
-      .projectAndTasksContainer {
-        .tasksListContainer {
-          .projectItem {
-            .taskCardFlip {
-              min-height: 190px !important;
-              margin-bottom: 16px;
-              .taskCardFront {
-                height: auto;
-                max-height: inherit;
-                .tasksCardItem {
-                  height: 190px!important;
-                  max-height: 190px!important;
-                  background-color: transparent!important;
-                  border-bottom-width: 5px;
-                  border-bottom-style: solid;
-                  .taskItemToolbar {
-                    background-color: transparent !important;
-                    i {
-                      color: @greyColorLighten1!important;
-                    }
-                    .projectCardTitle {
-                      color: @textColor!important;
-                      padding-left: 8px ~'; /** orientation=lt */ ';
-                      padding-right: 8px ~'; /** orientation=rt */ ';
-                    }
-                  }
-                  .taskItemInfo {
-                    padding: 8px!important;
-                    .descriptionDivider {
-                      display: none!important;
-                    }
-                    .taskItemDescription {
-                      min-height: inherit;
-                    }
-                    .largeDescriptionAreaSpace{
-                      -webkit-line-clamp: 2;
-                    }
-                  }
-                }
-              }
-              .tasksCardBack {
-                height: auto;
-                max-height: inherit;
-                .tasksCardItem {
-                  height: auto;
-                  max-height: inherit;
-                  .noTasksProject {
-                    padding-top: 24px;
-                    padding-bottom: 24px;
-                    .noTasksProjectIcon {
-                      .uiIconTask {
-                        font-size: 30px;
-                      }
-                    }
-                  }
-                  .echartStatsContent {
-                    .echartAndLabel {
-                      margin-left: -35px;
-                    }
-                    .projectStatusNumber{
-                      margin-left: -25px
-                    }
-                    .echartPieContent {
-                      height: 130px!important;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      .projectTasksDashboard {
-        .tasksViewBoard {
-          .projectTaskItem {
-            flex: 1 1 100%!important;
-            width: 100%!important;
-          }
-        }
-      }
-    }
-  }
-  .taskDisplay {
-    display: none!important;
-  }
-}
 
-@media (max-width: @maxLargeTabletWidth) {
-  #TasksParentContainer {
-    .projectAndTasksContainer {
-      .tasksList {
-        .tasksListItem {
-          .taskListItemView {
-            .taskAssignee {
-              width: 15%!important;
-              max-width: 15%!important;
-              padding-right: 12px;
-            }
-            .taskLabels {
-              .v-chip.v-size--small {
-                max-width: 80%;
-                padding: 0 4px;
-                margin: 0!important;
-              }
-            }
-          }
-        }
-      }
-    }
-    #taskCardItem {
-      .taskTitle {
-        cursor: pointer;
-        width: 80%;
-        max-width: 80%;
-        .strikethrough{
-          text-decoration: line-through;
-        }
-        .taskCardViewTitle{
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            cursor: pointer;
-        }
-      }
-    }
-    #TasksManagementPortlet {
-      .projectAndTasksContainer {
-        .projectTasksDashboard {
-          .tasksViewBoard {
-            .projectTaskItem {
-              flex: 1 1 50%;
-              width: 50%;
-            }
-          }
-        }
-      }
-    }
-  }
-}
 
-@media (max-width: 599px) {
-  #TasksManagementPortlet .projectAndTasksContainer .tasksToolbar{
-    /*.v-input__icon.v-input__icon--prepend-inner {
-      display: none;
-    }*/
-    .inputTasksFilter {
-      display: none;
-    }
-    .taskFilterMobile {
-      display: block;
-    }
-    .v-toolbar__title {
-      min-width: 40px!important;
-      margin-right: 5px;
-    }
-    button.btn.px-2.btn-primary.addNewProjectButton.v-btn.v-btn--contained.theme--light.v-size--default {
-      min-width: auto!important;
-    }
-    button.btn.px-2.btn-primary.filterTasksSetting.v-btn.v-btn--depressed.v-btn--flat.v-btn--outlined.theme--light.v-size--default {
-      min-width: auto!important;
-    }
-  }
-}
 @media (max-width: 399px) {
   .taskDrawer {
     .drawerTitle .taskProjectName .projectName {
       max-width: 120px !important;
     }
   }
-  #TasksManagementPortlet {
-    .projectAndTasksContainer {
-      .tasksToolbar  {
-        .selectPrimaryFilter {
-          width: 120px!important;
-          max-width: 120px!important;
-          text-overflow: ellipsis;
-        }
-        .selectTasksFilter {
-          width: 120px!important;
-          max-width: 120px!important;
-          text-overflow: ellipsis;
-        }
-        .taskFilterMobile {
-          margin-left: 2px;
-        }
-        .filterTasksSetting {
-          .uiIconFilterSetting {
-            padding-right: 0px !important;
-          }
-        }
-      }
-    }
-  }
 }
 
 
@@ -2688,11 +1727,6 @@
 .Orange {
   background-color: #FFA500 !important;
 }
-.CalendarTableColor {
-  .Orange {
-    background-color: #FFA500 !important;
-  }
-}
 .light_brown {
   background: #C5B294 !important;
   &:hover {
@@ -2712,78 +1746,6 @@
   }
 }
 
-.asparagus_border {
-  border-color: #909958 !important;
-}
-.laurel_green_border {
-  border-color: #BED67E !important;
-}
-.moss_green_border {
-  border-color: #98CC81 !important;
-}
-.munsell_blue_border {
-  border-color: #319AB3 !important;
-}
-.sky_blue_border {
-  border-color: #4DBED9 !important;
-}
-.powder_blue_border {
-  border-color: #9EE4F5 !important;
-}
-.baby_blue_border {
-  border-color: #B2E2FF !important;
-}
-.navy_blue_border {
-  border-color: #4273C8 !important;
-}
-.blue_gray_border {
-  border-color: #8EB0EA !important;
-}
-.light_blue_border {
-  border-color: #B3CFFF !important;
-}
-.light_gray_border {
-  border-color: #CDCDCD !important;
-}
-.purple_border {
-  border-color: #774EA9 !important;
-}
-.light_purple_border {
-  border-color: #BC99E7 !important;
-}
-.pink_border {
-  border-color: #FFC8F0 !important;
-}
-.beige_border {
-  border-color: #FFE1BE !important;
-}
-.hot_pink_border {
-  border-color: #F97575 !important;
-}
-.light_brown_border {
-  border-color: #C5B294 !important;
-}
-.gray_border {
-  border-color: #A39594 !important;
-}
-.plum_border {
-  border-color: #CEA6AC !important;
-}
-.Orange_border {
-  border-color: #FFA500 !important;
-}
-.green_border {
-  border-color: #4CAF50 !important;
-}
-.red_border {
-  border-color: #F44336 !important;
-}
-.yellow_border {
-  border-color: #ffeb3b !important;
-}
-.brown_border {
-  border-color: #795548 !important;
-}
 
 @keyframes beginDrag {
     from {
@@ -2820,9 +1782,6 @@
 .labelsActionMenu {
    max-width: 180px !important;
    min-width: 160px !important;
-  .label-edit-name{
-    max-width: 136px;
-  }
   .label-btn {
     cursor: pointer;
   }
@@ -2881,48 +1840,8 @@
                      GANTT CHART STYLE
 -----------------------------------------------------------*/
 .gantt-wrapper {
-  .unscheduled-task-container {
-    position: absolute;
-    z-index: 999;
-    top: 50%;
-    left: 30px;
-    .unscheduled-task-btn {
-      background-color: @greyColor!important;
-      .mdi-calendar-range {
-        color: @baseColorLight!important;
-      }
-      .unscheduled-task-badge {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        top: -5px;
-        right: 1px;
-        background: @warningColor;
-        font-size: 10px;
-        border-radius: 50%;
-        width: 18px;
-        height: 18px;
-    }
-    }
-  }
   .gantt-chart-container {
     padding-top: 20px;
-    .gantt-tasks-title {
-      margin-top: 60px;
-      min-height: calc(~"100vh - 180px");
-      height: calc(~"100vh - 180px");
-      overflow: hidden;
-      min-width: 180px;
-      p {
-        max-width: 180px;
-        margin-bottom: 0!important;
-        padding-top: 10px;
-        padding-right: 10px;
-        height: 27px;
-        border-bottom: 1px solid #ebeff2;
-      }
-    }
   }
   
   .gantt {
diff --git a/webapps/src/main/webapp/vue-app/task-favorite-menu/extensions.js b/webapps/src/main/webapp/vue-app/task-favorite-menu/extensions.js
index b3358ee06..251b8da8a 100644
--- a/webapps/src/main/webapp/vue-app/task-favorite-menu/extensions.js
+++ b/webapps/src/main/webapp/vue-app/task-favorite-menu/extensions.js
@@ -27,13 +27,6 @@ extensionRegistry.registerComponent('TaskProjectBoard', 'task-board-header', {
   vueComponent: Vue.options.components['project-favorite-board-header-action'],
 });
 
-// Favorite toggle as a menu row, used in the project card 3-dots menu
-// (ProjectCardFront.vue) and the board header overflow 3-dots when collapsed.
-extensionRegistry.registerComponent('TaskProjectMenu', 'task-project-menu', {
-  id: 'project-favorite',
-  rank: 5,
-  vueComponent: Vue.options.components['project-favorite-menu-action'],
-});
 
 // Add the favorite toggle inside the task drawer 3-dots menu
 // (consumed by TaskDrawer.vue via loadExtensions('Task', 'task-menu')).
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCard.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCard.vue
index 4d6b006b6..fe6140070 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCard.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCard.vue
@@ -15,23 +15,12 @@
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <div id="projectCard">
-    <v-flex :class="flipCard && 'taskCardFlip taskCardFlipped' || 'taskCardFlip'">
-      <div class="taskCardFront py-3 pe-4">
-        <project-card-front
-          :project="project"
-          @openDrawer="openEditDrawer"
-          @closed="onCloseDrawer"
-          @refreshProjects="refreshProjects"
-          @flip="flipCard = true; flip()" />
-      </div>
-      <div class="tasksCardBack py-3 pe-4">
-        <project-card-Reverse
-          ref="reversCard"
-          :project="project"
-          @flip="flipCard = false; flip()" />
-      </div>
-    </v-flex>
+  <div id="projectCard" class="py-3">
+    <project-card-front
+      :project="project"
+      @openDrawer="openEditDrawer"
+      @closed="onCloseDrawer"
+      @refreshProjects="refreshProjects" />
   </div>
 </template>
 <script>
@@ -42,11 +31,6 @@ export default {
       default: () => ({}),
     }
   },
-  data () {
-    return {
-      flipCard: false,
-    };
-  },
   methods: {
     openEditDrawer() {
       this.$root.$emit('open-project-drawer', this.project);
@@ -57,11 +41,6 @@ export default {
     refreshProjects: function(){
       this.$emit('refreshProjects');
     },
-    flip: function(){
-      if (this.flipCard){
-        this.$refs.reversCard.getStats(this.project);
-      }
-    }
   }
 };
 </script>
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardFront.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardFront.vue
index 72a5fb280..d54178e97 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardFront.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardFront.vue
@@ -15,141 +15,150 @@
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <v-card 
-    :class="project.color && project.color+'_border_bottom' || ''"
-    class="tasksCardItem"
+  <v-card
+    :id="`project-${project.id}`"
+    class="projectCardItem d-flex flex-column"
     flat
     outlined
     hover>
-    <div class="taskItemToolbar d-flex px-2 align-center font-weight-bold">
-      <i
-        :class="project.color && 'white--text' || 'toolbarNoColor'"
-        icon
-        small
-        class="uiIconInformation taskInfoIcon d-flex"
-        @click="$emit('flip')">
-      </i>
-      <div class="spacer d-none d-sm-inline"></div>
-      <span
-        :class="project.color && 'white--text' || 'toolbarNoColor'"
-        class="projectCardTitle py-3"
-        @click="showProjectTasksDetails(project)">
-        {{ project.name }}
-      </span>
-      <v-spacer />
-      <i
-        v-if="project.canManage"
-        :class="project.color && 'white--text' || 'toolbarNoColor'"
-        icon
-        small
-        class="uiIconVerticalDots taskInfoIcon d-flex"
-        @click="displayActionMenu = true">
-      </i>
-      <v-menu
-        v-model="displayActionMenu"
-        :attach="`#project-${project.id}`"
-        transition="slide-x-reverse-transition"
-        content-class="projectActionMenu"
-        offset-y>
-        <v-list class="pa-0" dense>
-          <v-list-item class="menu-list" @click="openEditDrawer()">
-            <v-list-item-title class="subtitle-2">
-              <i class="uiIcon uiIconEdit pe-1"></i>
-              <span>{{ $t('label.edit') }}</span>
-            </v-list-item-title>
-          </v-list-item>
-          <extension-registry-components
-            :params="{
-              project,
-            }"
-            name="TaskProjectMenu"
-            type="task-project-menu"
-            parent-element="div"
-            element="div" />
-          <v-list-item class="draftButton" @click="confirmDeleteProject()">
-            <v-list-item-title class="subtitle-2">
-              <i class="uiIcon uiIconTrash pe-1"></i>
-              <span>{{ $t('label.delete') }}</span>
-            </v-list-item-title>
-          </v-list-item>
-          <v-list-item class="clone" @click="confirmCloneProject()">
-            <v-list-item-title class="subtitle-2">
-              <i class="uiIcon uiIconCloneNode pe-1"></i>
-              <span>{{ $t('label.clone') }}</span>
-            </v-list-item-title>
-          </v-list-item>
-          <v-list-item class="px-2 noColorLabel">
-            <v-list-item-title class="noColorLabel caption text-center text&#45;&#45;secondary">
-              <span @click="changeColorProject(project,'')">{{ $t('label.noColor') }}</span>
-            </v-list-item-title>
-          </v-list-item>
-          <v-list-item>
-            <v-list-item-title class="subtitle-2 row projectColorPicker mx-auto my-2">
-              <span
-                v-for="(color, i) in projectColors"
-                :key="i"
-                :class="[ color.class , color.class === project.color ? 'isSelected' : '']"
-                class="projectColorCell"
-                @click="changeColorProject(project,color.class)"></span>
-            </v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </div>
-    <div class="taskItemInfo pa-3">
+    <!-- Left accent bar carrying the project color -->
+    <div
+      :class="project.color || 'projectMonogramDefault'"
+      class="projectCardColorBar"></div>
+    <!-- Header: project name/space + favorite & actions (identity carried by the left color bar) -->
+    <div class="d-flex align-start px-3 pt-3">
       <div
-        :class="getClassDescription()"
-        class="taskItemDescription"
+        class="projectCardHeading flex-grow-1 text-truncate pointer"
         @click="showProjectTasksDetails(project)">
-        <p
-          v-if="project.description">
-          {{ getDescription() }}
-        </p>
-        <div v-else>
-          <span class="noProjectDescription">{{ $t('label.noDescription') }}</span>
+        <div class="projectCardTitle text-truncate">{{ project.name }}</div>
+        <div
+          v-if="!isInSpace && project.space && projectSpace && projectSpace.displayName"
+          class="d-flex align-center text-truncate mt-1">
+          <exo-space-avatar
+            :space="space"
+            :size="18"
+            link-style />
         </div>
       </div>
-      <div class="ProjectSpace">
-        <div v-if="project.space">
-          <exo-space-avatar 
-            :space="space" 
-            :size="28"
-            link-style
-            popover />
-        </div>
+      <div class="d-flex align-center flex-shrink-0">
+        <favorite-button
+          v-if="objectId"
+          :id="objectId"
+          :favorite="isFavorite"
+          :space-id="favoriteSpaceId"
+          type="project"
+          type-label="project" />
+        <v-btn
+          v-if="project.canManage"
+          class="px-0 ms-1"
+          icon
+          small
+          @click="displayActionMenu = true">
+          <v-icon size="18" class="text-light-color">fa-ellipsis-v</v-icon>
+        </v-btn>
+        <v-menu
+          v-model="displayActionMenu"
+          :attach="`#project-${project.id}`"
+          transition="slide-x-reverse-transition"
+          content-class="projectActionMenu"
+          offset-y>
+          <v-list class="pa-0" dense>
+            <v-list-item class="menu-list" @click="openEditDrawer()">
+              <v-list-item-title class="subtitle-2">
+                <i class="uiIcon uiIconEdit pe-1"></i>
+                <span>{{ $t('label.edit') }}</span>
+              </v-list-item-title>
+            </v-list-item>
+            <extension-registry-components
+              :params="{
+                project,
+              }"
+              name="TaskProjectMenu"
+              type="task-project-menu"
+              parent-element="div"
+              element="div" />
+            <v-list-item class="draftButton" @click="confirmDeleteProject()">
+              <v-list-item-title class="subtitle-2">
+                <i class="uiIcon uiIconTrash pe-1"></i>
+                <span>{{ $t('label.delete') }}</span>
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item class="clone" @click="confirmCloneProject()">
+              <v-list-item-title class="subtitle-2">
+                <i class="uiIcon uiIconCloneNode pe-1"></i>
+                <span>{{ $t('label.clone') }}</span>
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item class="px-2 noColorLabel">
+              <v-list-item-title class="noColorLabel caption text-center text--secondary">
+                <span @click="changeColorProject(project,'')">{{ $t('label.noColor') }}</span>
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title class="subtitle-2 row projectColorPicker mx-auto my-2">
+                <span
+                  v-for="(color, i) in projectColors"
+                  :key="i"
+                  :class="[ color.class , color.class === project.color ? 'isSelected' : '']"
+                  class="projectColorCell"
+                  @click="changeColorProject(project,color.class)"></span>
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
       </div>
     </div>
-    <div class="SpaceAdmin">
-      <v-divider />
-      <div class="spaceAdminContainer">
-        <div class="spaceAdminWrapper">
-          <exo-user-avatar 
-            v-if="avatarToDisplay && avatarToDisplay.length === 1"
-            :profile-id="avatarToDisplay[0].userName"
-            :size="28"
-            :extra-class="'my-2'"
-            link-style
-            popover />
-          <div
-            v-else
-            :class="showAllAvatarList && 'AllManagerAvatar'"
-            :style="`min-height:${avatarSize}px`"
-            class="managerAvatarsList d-flex flex-nowrap my-2">
-            <exo-user-avatars-list
-              :users="avatarToDisplay"
-              :max="5"
-              :icon-size="avatarSize"
-              :margin-left="avatarToDisplay.length > 1 && 'ml-n4' || ''"
-              :compact="avatarToDisplay.length > 1"
-              extra-class="position-absolute"
-              clickable="'false'"
-              avatar-overlay-position
-              retrieve-extra-information
-              @open-detail="$root.$emit('displayProjectManagers', avatarToDisplay)" />
-          </div>
+
+    <!-- Description -->
+    <div
+      class="px-3 mt-3 projectCardDescription pointer"
+      @click="showProjectTasksDetails(project)">
+      <span v-if="hasDescription">{{ getDescription() }}</span>
+      <span v-else class="text-light-color font-italic">{{ $t('label.noDescription') }}</span>
+    </div>
+
+    <v-spacer />
+
+    <!-- Footer: member avatars + task count -->
+    <div class="px-3 pt-3 pb-2 mt-3 d-flex align-center projectCardFooter">
+      <exo-user-avatars-list
+        v-if="avatarToDisplay.length"
+        :users="avatarToDisplay"
+        :max="4"
+        :icon-size="28"
+        :margin-left="avatarToDisplay.length > 1 && 'ml-n3' || ''"
+        :compact="avatarToDisplay.length > 1"
+        retrieve-extra-information
+        @open-detail="$root.$emit('displayProjectManagers', avatarToDisplay)" />
+      <span v-else class="caption text-light-color">{{ $t('message.noManager') }}</span>
+      <v-spacer />
+      <div
+        v-if="tasksCount"
+        class="projectCardProgress d-flex align-center flex-shrink-0">
+        <span class="caption text-light-color me-2">{{ tasksCount }}</span>
+        <div class="projectCardProgressBar d-flex">
+          <v-tooltip
+            v-for="segment in statusSegments"
+            :key="segment.name"
+            bottom>
+            <template #activator="{ on, attrs }">
+              <div
+                class="projectCardProgressSegment"
+                :style="{ width: `${segment.pct}%`, backgroundColor: segment.color }"
+                v-bind="attrs"
+                v-on="on"></div>
+            </template>
+            <span>{{ segment.value }} - {{ segment.name }}</span>
+          </v-tooltip>
         </div>
       </div>
+      <span
+        v-else-if="tasksCount === 0"
+        class="caption text-light-color flex-shrink-0">
+        {{ $t('label.project.card.tasksCount', {0: 0}) }}
+      </span>
     </div>
+
     <exo-confirm-dialog
       ref="CancelSavingChangesDialog"
       :message="$t('popup.msg.delete', {0: project.name})"
@@ -178,6 +187,13 @@ export default {
     return {
       displayActionMenu: false,
       waitTimeUntilCloseMenu: 200,
+      tasksCount: null,
+      statusStats: [],
+      statusRanks: {},
+      // Palette for the per-status progress segments, indexed by the status
+      // column rank so a given status keeps the same colour on every card:
+      // ToDo (slate) -> InProgress (blue) -> WaitingOn (amber) -> Done (green).
+      statusPalette: ['#94a3b8', '#60a5fa', '#fbbf24', '#34d399', '#a78bfa', '#f87171'],
       projectColors: [
         { class: 'asparagus' },
         { class: 'munsell_blue' },
@@ -206,10 +222,22 @@ export default {
       ],
       managerIdentities: this.project && this.project.managerIdentities,
       projectSpace: {},
-      avatarSize: 28
     };
   },
   computed: {
+    hasDescription() {
+      return !!(this.project && this.project.description && this.getDescription().trim().length);
+    },
+    objectId() {
+      return this.project && this.project.id && String(this.project.id);
+    },
+    isFavorite() {
+      return !!(this.project && this.project.favorite);
+    },
+    favoriteSpaceId() {
+      return this.project && this.project.spaceDetails && this.project.spaceDetails.id
+        && String(this.project.spaceDetails.id);
+    },
     avatarToDisplay () {
       const projectManagersList = [];
       if ( this.managerIdentities && this.managerIdentities.length ) {
@@ -222,7 +250,30 @@ export default {
     },
     space() {
       return this.projectSpace;
-    }
+    },
+    isInSpace() {
+      // When the portlet is displayed inside a space, every project belongs to
+      // that space, so the per-card space chip is redundant.
+      return !!(eXo.env.portal.spaceId);
+    },
+    statusSegments() {
+      if (!this.tasksCount) {
+        return [];
+      }
+      return this.statusStats
+        .filter(stat => stat.value > 0)
+        .map(stat => {
+          const rank = this.statusRanks[stat.name] || 0;
+          return {
+            name: stat.name,
+            value: stat.value,
+            rank,
+            pct: Math.round((stat.value / this.tasksCount) * 100),
+            color: this.statusPalette[rank % this.statusPalette.length],
+          };
+        })
+        .sort((a, b) => a.rank - b.rank);
+    },
   },
   created() {
     $(document).on('mousedown', () => {
@@ -235,10 +286,31 @@ export default {
     this.$root.$on('update-projects-list-avatar',managerIdentities =>{
       this.project.managerIdentities=managerIdentities;
     });
-    if (this.project && this.project.space && this.project.spaceDetails ) {
+    if (!this.isInSpace && this.project && this.project.space && this.project.spaceDetails ) {
       this.retrieveSpaceInformation(this.project.spaceDetails.id);
     }
   },
+  mounted() {
+    if (this.project && this.project.id && this.$projectService && this.$projectService.getProjectStats) {
+      // Order the status segments by their column rank so the bar mirrors the
+      // board's left-to-right workflow; counts come from the statistics endpoint.
+      // Both are awaited together so the ranks are known on the first render of
+      // the segments (otherwise re-sorting after a late ranks fetch wouldn't
+      // reorder the keyed v-tooltip nodes already in the DOM).
+      const statusesPromise = this.$tasksService && this.$tasksService.getStatusesByProjectId
+        ? this.$tasksService.getStatusesByProjectId(this.project.id).catch(() => [])
+        : Promise.resolve([]);
+      Promise.all([statusesPromise, this.$projectService.getProjectStats(this.project.id)])
+        .then(([statuses, data]) => {
+          const ranks = {};
+          (statuses || []).forEach(status => ranks[status.name] = status.rank);
+          this.statusRanks = ranks;
+          this.tasksCount = data && data.totalNumberTasks || 0;
+          this.statusStats = data && data.statusStats || [];
+        })
+        .catch(() => this.tasksCount = null);
+    }
+  },
   methods: {
     showProjectTasksDetails(project) {
       document.dispatchEvent(new CustomEvent('showProjectTasks', {detail: project}));
@@ -285,19 +357,11 @@ export default {
       text = div.textContent || div.innerText || '';
       return text;
     },
-    getClassDescription(){
-      if (this.project && !this.project.space){
-        return 'largeDescriptionArea';
-      } else if (this.project && this.project.space){
-        return 'largeDescriptionAreaSpace';
-      }
-    },
     retrieveSpaceInformation(spaceId) {
       this.$spaceService.getSpaceById(spaceId, 'favorite').then(space => {
         this.projectSpace = space;
       });
     }
   },
-
 };
 </script>
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardList.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardList.vue
index fbaabc229..270f220bb 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardList.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardList.vue
@@ -37,20 +37,42 @@
         </span>
       </v-btn>
     </div>
+    <div v-else-if="showSkeleton">
+      <v-card flat class="transparent">
+        <v-container class="full-width pa-0 py-4">
+          <v-row class="mx-n2 my-0 border-box-sizing">
+            <v-col
+              v-for="n in skeletonCount"
+              :key="`project-skeleton-${n}`"
+              cols="12"
+              md="6"
+              lg="4"
+              xl="4"
+              class="px-2 py-0 projectItem">
+              <div class="py-3">
+                <v-skeleton-loader
+                  type="article"
+                  class="projectCardSkeleton" />
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+    </div>
     <div v-else>
       <v-card flat class="transparent">
         <v-item-group class="py-4">
           <v-container class="full-width pa-0">
-            <v-row class="ma-0 border-box-sizing">
+            <v-row class="mx-n2 my-0 border-box-sizing">
               <v-col
-                v-for="project in projects"
+                v-for="project in displayedProjects"
                 :key="project.id"
                 :id="`project-${project.id}`"
                 cols="12"
                 md="6"
                 lg="4"
                 xl="4"
-                class="pa-0 projectItem">
+                class="px-2 py-0 projectItem">
                 <project-card
                   :project="project"
                   @refreshProjects="searchProjects" />
@@ -110,12 +132,27 @@ export default {
     };
   },
   computed: {
+    displayedProjects() {
+      // The backend has no "favorites" filter, so filter the loaded list by the
+      // favorite flag client-side when that option is selected.
+      if (this.projectFilterSelected === 'FAVORITES') {
+        return this.projects.filter(project => project.favorite);
+      }
+      return this.projects;
+    },
     canShowMore() {
       return this.loadingProjects || this.projects.length >= this.limitToFetch;
     },
     showPlaceholder() {
       return !this.projects?.length && !this.loadingProjects;
     },
+    showSkeleton() {
+      // Initial load: show placeholder cards until the first page arrives.
+      return this.loadingProjects && !this.projects?.length;
+    },
+    skeletonCount() {
+      return Math.min(this.limit, 6);
+    },
     showPlaceholderResetSearch() {
       return this.projectFilterSelected !== 'ALL' || this.keyword?.length;
     },
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardReverse.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardReverse.vue
deleted file mode 100644
index 043bda8ad..000000000
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardReverse.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<!--
-  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.
--->
-<template>
-  <v-card 
-    class="tasksCardItem" 
-    flat
-    outlined
-    hover>
-    <div class="projectDetailsReverse pa-3">
-      <i
-        icon
-        small
-        class="uiIconInformation taskInfoIcon reverseInfoIcon d-flex"
-        @click="$emit('flip')">
-      </i>
-      <div class="projectDetails d-flex">
-        <p class="font-weight-bold ma-auto ">{{ $t('label.projectDetail') }}</p>
-      </div>
-    </div>
-    <div 
-      v-if=" totalLeftTasks > 0 "
-      class="echartStatsContent d-flex justify-space-evently align-center px-2"
-      style="margin:auto;">
-      <div class="echartAndLabel">
-        <div 
-          :id="'echartProjectTasks'+project.id" 
-          class="echartPieContent" 
-          style="width:160px; height:200px;"></div>
-        <div class="projectTasksTotalNumber">
-          <span class="totalNumber font-weight-bold">{{ totalLeftTasks }}</span>
-          <span class="text-body-2 totalLabel">{{ $t('exo.tasks.label.leftTasks') }}</span>
-        </div>
-      </div>
-
-      <div v-if="statistics" class="projectStatusNumber ps-4">
-        <p 
-          v-for="(item , index) in statistics"
-          :key="item.name" 
-          class="d-flex justify-space-between mb-1"
-          :class="statusStyle[index]">
-          <span class="caption text-truncate">{{ item.name }}</span>
-          <span>{{ item.value }}</span>
-        </p> 
-      </div>
-    </div>
-    <div v-else class="noTasksProject">
-      <div class="noTasksProjectIcon"><i class="uiIcon uiIconTask"></i></div>
-      <div class="noTasksProjectLabel"><span>{{ $t('label.noTasks') }}</span></div>
-    </div>
-  </v-card>
-</template>
-<script>
-export default {
-  props: {
-    project: {
-      type: Object,
-      default: null,
-    }
-  },
-  data() {
-    return {
-      statusStyle: ['blueLabel','greenLabel','redLabel','yellowLabel','purpleLabel', 'grayLabel'],
-      statusColors: ['#476a9c', '#2eb58c', '#bc4343', '#ffb441', '#9834eb', '#808080'],      
-      totalLeftTasks: 0,
-      statistics: [],
-      option: {
-        tooltip: {
-          trigger: 'item',
-          position: function (point) {
-            return { left: point[0] - 100};
-          },
-          formatter: '{b}:<br/> {c} ({d}%)'
-        },
-        series: [
-          {
-            type: 'pie',
-            center: ['50%', '50%'],
-            radius: ['80%', '75%'],
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: 'center'
-            },
-            emphasis: {
-              label: {
-                show: false,
-                fontSize: '15',
-                fontWeight: 'bold'
-              }
-            },
-            labelLine: {
-              show: false
-            },
-            data: [],
-          }
-        ],
-        color: this.statusColors
-      }
-    };
-  },
-
-  methods: {
-    initChart(option) {
-      const holder_chart = $(`#echartProjectTasks${this.project.id}`)[0];
-      if (holder_chart){
-        const chart = echarts.init(holder_chart);
-        chart.setOption(option, true);
-      }
-    },
-    getStats(project){
-      this.$projectService.getProjectStats(project.id).then(data => {
-        this.totalLeftTasks = data.totalNumberTasks || 0;
-        let otherTasksCount = 0;
-        this.statistics = data.statusStats.sort((a, b) => b.value - a.value).map(item => {
-          return { ...item, name: this.getI18N(item.name) };
-        });        
-        if (data.statusStats.length>5){
-          otherTasksCount= data.statusStats.length-5;
-          this.statistics.splice(5,otherTasksCount,{ 'name': this.$t('Others'), 'value': otherTasksCount });
-        }
-        if (this.statistics?.length) {
-          this.option.series[0].data = this.statistics;
-          this.option.color = this.statusColors;
-          window.setTimeout(() => {
-            this.initChart(this.option);
-          },200);
-        }
-      });
-    },
-    getI18N(label){
-      const fieldLabelI18NKey = `tasks.status.${label}`;
-      const fieldLabelI18NValue = this.$t(fieldLabelI18NKey);
-      return  fieldLabelI18NValue === fieldLabelI18NKey ? label : fieldLabelI18NValue;
-    } 
-  }
-};
-</script>
\ No newline at end of file
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectListToolbar.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectListToolbar.vue
index ead2d774e..8d975c0a5 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectListToolbar.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectListToolbar.vue
@@ -15,67 +15,34 @@
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <div id="projectBoardToolbar">
-    <v-toolbar
-      id="ProjectListToolbar"
-      :class="showMobileTaskFilter && 'toolbarLarge'"
-      flat
-      class="tasksToolbar pb-3 transparent">
-      <v-toolbar-title v-if="enableCreateButton">
-        <v-btn
-          class="btn px-2 btn-primary addNewProjectButton"
-          @click="openDrawer">
-          <!--<i class="uiIcon uiIconPlus"></i>-->
-          <v-icon dark class="d-block d-sm-none">mdi-plus</v-icon>
-          <span class="d-none font-weight-regular d-sm-flex align-center">
-            <i class="uiIcon uiIconPlus"></i>
-            <span class="ms-2 addProject">{{ $t('label.addProject') }}</span> 
-          </span>
-        </v-btn>
-      </v-toolbar-title>
-      <v-scale-transition>
-        <v-icon
-          size="20"
-          class="taskFilterMobile"
-          :class="showMobileTaskFilter && 'tasksFilterMobile'"
-          @click="showMobileTaskFilter = !showMobileTaskFilter">
-          fas fa-filter
-        </v-icon>
-      </v-scale-transition>
-      <v-spacer />
-      <v-scale-transition>
-        <v-text-field
-          v-model="keyword"
-          :placeholder="$t('label.filterProject')"
-          prepend-inner-icon="fa-filter"
-          :append-outer-icon="showMobileTaskFilter && 'mdi-close'"
-          class="inputTasksFilter inputProjectFilter pa-0 ms-3 me-3 my-auto"
-          :class="showMobileTaskFilter && 'inputTasksFilterMobile'"
-          @click:append-outer="clearMessage"
-          :clearable="!showMobileTaskFilter" />
-      </v-scale-transition>
-      <v-scale-transition v-if="!spaceName">
-        <select
-          id="filterTaskSelect"
-          v-model="projectFilterSelected"
-          name="projectFilter"
-          class="selectTasksFilter my-auto me-2 subtitle-1 ignore-vuetify-classes d-sm-inline"
-          @change="changeProjectFilter">
-          <option
-            v-for="item in projectFilter"
-            :key="item.name"
-            :value="item.name">
-            {{ $t('label.project.filter.'+item.name.toLowerCase()) }}
-          </option>
-        </select>
-      </v-scale-transition>
-      <v-scale-transition>
-        <select id="widthTmpSelectTaskFilter">
-          <option id="widthTmpSelectOption"></option>
-        </select>
-      </v-scale-transition>
-    </v-toolbar>
-  </div>
+  <application-toolbar
+    id="projectListToolbar"
+    compact
+    :right-text-filter="{
+      minCharacters: 1,
+      placeholder: $t('label.filterProject'),
+      tooltip: $t('label.filterProject'),
+    }"
+    :right-select-box="{
+      hide: !!spaceName,
+      selected: projectFilterSelected,
+      items: projectFilterItems,
+    }"
+    @filter-text-input-end-typing="onKeyword"
+    @filter-select-change="onFilterChange">
+    <template #left>
+      <!-- The slot itself is always declared (ApplicationToolbar reads $slots.left
+           non-reactively); the create button is gated inside so it appears once the
+           async space permission resolves, e.g. when displayed inside a space. -->
+      <v-btn
+        v-if="enableCreateButton"
+        class="btn btn-primary addNewProjectButton text-none"
+        @click="openDrawer">
+        <v-icon size="16" dark class="me-2">fa-plus</v-icon>
+        <span>{{ $t('label.addProject') }}</span>
+      </v-btn>
+    </template>
+  </application-toolbar>
 </template>
 <script>
 export default {
@@ -96,32 +63,24 @@ export default {
   data () {
     return {
       projectFilter: [
-        {name: 'ALL'},{name: 'MANAGED'},{name: 'COLLABORATED'},{name: 'WITH_TASKS'}
+        {name: 'ALL'},{name: 'MANAGED'},{name: 'COLLABORATED'},{name: 'WITH_TASKS'},{name: 'FAVORITES'}
       ],
-      showMobileTaskFilter: false,
       currentSpace: false,
     };
   },
-  watch: {
-    keyword() {
-      this.$emit('keyword-changed', this.keyword);
-    },
-    projectFilterSelected() {
-      this.$emit('filter-changed', this.projectFilterSelected);
-    }
-  },
-  created() {
-    this.retrieveCurrentSpace();
-  },
   computed: {
     enableCreateButton() {
       return eXo.env.portal.spaceId ? this.currentSpace && this.currentSpace.canEdit : true;
-    }
+    },
+    projectFilterItems() {
+      return this.projectFilter.map(item => ({
+        value: item.name,
+        text: this.$t(`label.project.filter.${item.name.toLowerCase()}`),
+      }));
+    },
   },
-  mounted() {
-    $('#widthTmpSelectOption').html($('#filterTaskSelect option:selected').text());
-    const widthElem = $('#widthTmpSelectTaskFilter').width() + 40;
-    $('#filterTaskSelect').width(widthElem);
+  created() {
+    this.retrieveCurrentSpace();
   },
   methods: {
     retrieveCurrentSpace() {
@@ -134,14 +93,11 @@ export default {
     openDrawer() {
       this.$root.$emit('open-project-drawer', {});
     },
-    clearMessage() {
-      this.keyword = '';
-      this.showMobileTaskFilter = !this.showMobileTaskFilter;
+    onKeyword(term) {
+      this.$emit('keyword-changed', term);
     },
-    changeProjectFilter() {
-      $('#widthTmpSelectOption').html($('#filterTaskSelect option:selected').text());
-      const widthElem = $('#widthTmpSelectTaskFilter').width() + 40;
-      $('#filterTaskSelect').width(widthElem);   
+    onFilterChange(value) {
+      this.$emit('filter-changed', value);
     }
   }
 };
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TaskViewListItem.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TaskViewListItem.vue
index 99ce6d8a2..87a0cd002 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TaskViewListItem.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TaskViewListItem.vue
@@ -17,30 +17,31 @@
 <template>
   <div
     :class="[getTaskPriorityColor(task.task.priority), removeCompletedTask && 'completedTask' || '']"
-    class="taskListItemView px-4 py-3 d-flex align-center">
+    class="taskListItemView px-4 py-3 d-flex align-center"
+    @click="openTaskDrawer()">
     <div class="taskCheckBox">
       <v-switch
         ref="autoFocusInput2"
         class="d-none"
         true-value="true"
         false-value="false" />
-      <i 
-        :title="$t(getTaskCompletedTitle())" 
-        :class="getTaskCompleted()" 
-        @click="updateCompleted"></i>
+      <i
+        :title="$t(getTaskCompletedTitle())"
+        :class="getTaskCompleted()"
+        @click.stop="updateCompleted"></i>
     </div>
     <div class="taskTitle pe-10">
       <a
         ref="tooltip"
         :class="getTitleTaskClass()"
         class="text-truncate"
-        :title="task.task.title"
-        @click="openTaskDrawer()">{{ task.task.title }}
+        :title="task.task.title">{{ task.task.title }}
       </a>
     </div>
     <div
       class="taskAssignee d-flex v-avatar flex-nowrap me-2 justify-start position-relative"
-      :style="`min-height:${avatarSize+4}px`">
+      :style="`min-height:${avatarSize+4}px`"
+      @click.stop>
       <exo-user-avatars-list
         :users="avatarToDisplay"
         :max="1"
@@ -53,7 +54,7 @@
         retrieve-extra-information
         @open-detail="$root.$emit('displayTasksAssigneeAndCoworker', avatarToDisplay)" />
     </div>
-    <div class="taskLabels pe-7" @click="openTaskDrawer()">
+    <div class="taskLabels pe-7">
       <v-chip
         v-if="task.labels && task.labels.length == 1"
         :color="task.labels[0].color"
@@ -73,13 +74,13 @@
         <span class="taskAttachNumber caption">{{ task.labels.length }}</span>
       </div>
     </div>
-    <div class="taskActions d-flex justify-center align-center pe-9" @click="openTaskDrawer()">
+    <div class="taskActions d-flex justify-center align-center pe-9">
       <div v-if="task.commentCount" class="taskComment d-flex align-center">
         <i class="far fa-comment uiCommentIcon"></i>
         <span class="taskCommentNumber caption">{{ task.commentCount }}</span>
       </div>
     </div>
-    <div class="taskStat d-lg-block d-md-none pe-9" @click="openTaskDrawer()">
+    <div class="taskStat d-lg-block d-md-none pe-2">
       <span
         v-if="task && task.task && task.task.status && task.task.status"
         :title="getTaskStatusLabel(task.task.status.name)"
@@ -87,7 +88,7 @@
         {{ getTaskStatusLabel(task.task.status.name) }}
       </span>
     </div>
-    <div class="taskDueDate" @click="openTaskDrawer()">
+    <div class="taskDueDate">
       <div v-if="taskDueDate" :class="getOverdueTask(taskDueDate) ? 'error-color' : ''">
         <date-format :value="taskDueDate" :format="dateTimeFormat" />
       </div>
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue
index e10e629bd..e1e6053f6 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewGantt.vue
@@ -28,19 +28,9 @@
     </div>
   </div>
   <div v-else class="gantt-wrapper">
-    <div class="unscheduled-task-container">
-      <v-btn
-        :title="$t('label.noWorkPlan.tasks')"
-        class="unscheduled-task-btn"
-        fab
-        small
-        dark
-        @click="$root.$emit('displayTasksUnscheduledDrawer', unscheduledTaskList)">
-        <v-icon>mdi-calendar-range</v-icon>
-        <span class="unscheduled-task-badge">{{ unscheduledTaskList.length }}</span>
-      </v-btn>
-    </div>
-    <div 
+    <!-- The unscheduled-tasks button now lives in the board toolbar (after the
+         extension icons), so the floating button over the gantt was removed. -->
+    <div
       id="gantt-chart"
       class="gantt-chart-container">
     </div>
@@ -103,6 +93,9 @@ export default {
           this.initGanttChart(this.tasksToDisplay);
         }
       }
+      // Publish the unscheduled list so the toolbar button (which replaced the
+      // floating button) shows the right count on the initial gantt display.
+      this.$root.$emit('refresh-unscheduled-gantt', this.unscheduledTaskList);
     });
     this.$root.$on('refresh-gantt', taskItems => {
       this.unscheduledTaskList = [];
@@ -337,6 +330,44 @@ export default {
       this.gantt.change_view_mode(this.ganttScale);
       this.isGanttDisplayed = true;
       this.addScrollToDateArea();
+      this.bindGanttPopupRepositioning();
+    },
+    bindGanttPopupRepositioning() {
+      const chart = document.getElementById('gantt-chart');
+      if (!chart || chart.dataset.popupBound) {
+        return;
+      }
+      chart.dataset.popupBound = 'true';
+      // frappe-gantt positions its hover popup in a mixed coordinate space, so it
+      // lands far from the bar. Reposition it just below the hovered bar in our own
+      // code (after the library has positioned it) instead of patching the library.
+      // This listener is on the container, so it runs in the bubbling phase AFTER
+      // the library's own bar-level handler has positioned the popup. Repositioning
+      // synchronously here overwrites that position before the browser paints, so
+      // there is no wrong-position flash / flicker.
+      chart.addEventListener('mouseover', event => {
+        const bar = event.target.closest && event.target.closest('.bar-wrapper');
+        if (bar) {
+          this.repositionGanttPopup(bar);
+        }
+      });
+    },
+    repositionGanttPopup(bar) {
+      const popup = document.querySelector('#gantt-chart .popup-wrapper');
+      if (!popup || !popup.offsetParent) {
+        return;
+      }
+      const barRect = bar.getBoundingClientRect();
+      // The popup's offsetParent is the scrolling grid, with offsets that are hard
+      // to model directly. Calibrate instead: park the popup at (0,0), read where it
+      // actually lands, then offset from there to just below the bar. Robust to the
+      // grid's scroll. getBoundingClientRect forces layout but not paint, so the
+      // intermediate (0,0) position is never shown.
+      popup.style.left = '0px';
+      popup.style.top = '0px';
+      const base = popup.getBoundingClientRect();
+      popup.style.left = `${barRect.left - base.left}px`;
+      popup.style.top = `${barRect.bottom - base.top + 8}px`;
     }
   }
 };
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 a7d99987a..c3d28c549 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
@@ -50,6 +50,16 @@
           parent-element="div"
           element="div"
           class="boardHeaderExtensions d-flex align-center flex-shrink-0" />
+        <v-btn
+          v-if="taskViewTabName === 'gantt'"
+          :title="$t('label.noWorkPlan.tasks')"
+          class="flex-shrink-0"
+          max-width="36"
+          max-height="36"
+          icon
+          @click="$root.$emit('displayTasksUnscheduledDrawer', unscheduledTaskList)">
+          <v-icon size="20" class="text-light-color">fa-calendar-alt</v-icon>
+        </v-btn>
         <tasks-view-switcher
           v-if="!$root.isMobile"
           :view="taskViewTabName"
@@ -126,6 +136,7 @@ export default {
       taskViewTabName: 'board',
       searchOpen: false,
       searchTimer: null,
+      unscheduledTaskList: [],
     };
   },
   created() {
@@ -135,6 +146,10 @@ export default {
       this.keyword = null;
       this.searchOpen = false;
     });
+    // The Plan/Gantt view broadcasts its unscheduled tasks; mirror the list so the
+    // toolbar button can show the count and open the drawer (replaces the floating
+    // button that used to overlay the gantt).
+    this.$root.$on('refresh-unscheduled-gantt', list => this.unscheduledTaskList = list || []);
   },
   methods: {
     openSearch() {
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue
index cdec4b2fa..0a4fc6786 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListItem.vue
@@ -44,7 +44,7 @@
         </a>
       </div>
     </div>
-    <div class="taskTitle pe-14 d-lg-block d-md-none" @click="openTaskDrawer()">
+    <div class="taskTitle pe-6 d-lg-block d-md-none" @click="openTaskDrawer()">
       <a
         ref="tooltip"
         :class="getTitleTaskClass()"
@@ -53,39 +53,36 @@
         {{ task.task.title }}
       </a>
     </div>
-    <div class="taskProject pe-10">
+    <div class="taskProject pe-6">
       <div
         v-if="!isPersonnalTask"
-        class="projectSpaceDetails d-flex align-center TasksListViewProject">
-        <div class="spaceAvatar pe-1 d-lg-block d-md-none">
-          <a
-            v-if="task.space!==null"
-            :href="spaceUrl(task.space.id)">
-            <v-avatar
-              :size="30"
-              tile>
-              <v-img
-                :src="task.space.avatarUrl"
-                :height="30"
-                :width="30"
-                :max-height="30"
-                :max-width="30"
-                class="mx-auto spaceAvatarImg" />
-            </v-avatar>
-          </a>
-        </div>
-        <div :class="task.space ? 'taskProjectNameChipSpace' : 'taskProjectNameChip'">
-          <v-chip
-            :color="getTaskColor()"
-            text-color="white"
-            class="font-weight-bold"
-            small
-            @click="showProjectTasksDetails()">
-            <span class="text-truncate" :title="getNameProject()">
-              {{ getNameProject() }}
-            </span>
-          </v-chip>
-        </div>
+        class="projectSpaceDetails d-flex align-center TasksListViewProject"
+        @click="showProjectTasksDetails()">
+        <v-tooltip v-if="task.space" bottom>
+          <template #activator="{ on, attrs }">
+            <a
+              :href="spaceUrl(task.space.id)"
+              v-bind="attrs"
+              v-on="on"
+              class="spaceAvatar me-2 d-lg-block d-md-none flex-shrink-0">
+              <v-avatar :size="24" tile>
+                <img
+                  :src="task.space.avatarUrl"
+                  :alt="task.space.displayName"
+                  class="object-fit-cover">
+              </v-avatar>
+            </a>
+          </template>
+          <span>{{ task.space.displayName }}</span>
+        </v-tooltip>
+        <span
+          class="projectColorDot flex-shrink-0 me-2"
+          :class="getTaskColor()"></span>
+        <span
+          class="taskProjectNameLabel text-truncate"
+          :title="getNameProject()">
+          {{ getNameProject() }}
+        </span>
       </div>
     </div>
     <div class="taskAssignee v-avatar d-flex pe-7 flex-nowrap">
@@ -126,7 +123,7 @@
         <span class="taskCommentNumber caption">{{ task.commentCount }}</span>
       </div>
     </div>
-    <div class="taskStat pe-9 d-lg-block d-md-none " @click="openTaskDrawer()">
+    <div class="taskStat pe-4 d-lg-block d-md-none " @click="openTaskDrawer()">
       <span
         v-if="task && task.task && task.task.status && task.task.status"
         :title="getTaskStatusLabel(task.task.status.name)"
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListToolbar.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListToolbar.vue
index e15f63318..386c277a3 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListToolbar.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/tasks/TasksListToolbar.vue
@@ -16,75 +16,30 @@
 -->
 <template>
   <div id="TasksToolbar">
-    <v-toolbar
-      id="TasksListToolbar"
-      :class="showMobileTaskFilter && 'toolbarLarge'"
-      flat
-      class="tasksToolbar">
-      <v-toolbar-title>
-        <v-btn
-          class="btn px-2 btn-primary addNewProjectButton"
-          @click="openTaskDrawer()">
-          <v-icon dark class="d-block d-sm-none">mdi-plus</v-icon>
-          <span class="d-none font-weight-regular d-sm-inline">
-            + {{ $t('label.addTask') }}
-          </span>
-        </v-btn>
-      </v-toolbar-title>
-      <v-scale-transition>
-        <v-icon
-          size="20"
-          class="taskFilterMobile"
-          :class="showMobileTaskFilter && 'tasksFilterMobile'"
-          @click="showMobileTaskFilter = !showMobileTaskFilter">
-          fas fa-filter
-        </v-icon>
-      </v-scale-transition>
-      <v-spacer />
-      <v-spacer />
-      <v-scale-transition>
-        <v-text-field
-          v-model="keyword"
-          :placeholder=" $t('label.filterTask') "
-          prepend-inner-icon="fa-filter"
-          :append-outer-icon="showMobileTaskFilter && 'mdi-close'"
-          class="inputTasksFilter pa-0 ms-3 me-3 my-auto"
-          :class="showMobileTaskFilter && 'inputTasksFilterMobile'"
-          @click:append-outer="clearMessage"
-          :clearable="!showMobileTaskFilter" />
-      </v-scale-transition>
-      <v-scale-transition>
-        <select
-          id="filterTaskSelect"
-          v-model="primaryFilterSelected"
-          name="primaryFilter"
-          class="selectPrimaryFilter input-block-level ignore-vuetify-classes  pa-0 me-3 my-auto"
-          @change="changePrimaryFilter">
-          <option
-            v-for="item in primaryFilter"
-            :key="item.name"
-            :value="item.name">
-            {{ $t('label.dueDate.'+item.name.toLowerCase()) }}
-          </option>
-        </select>
-      </v-scale-transition>
-      <v-scale-transition>
-        <select id="widthTmpSelectTaskFilter">
-          <option id="widthTmpSelectOption"></option>
-        </select>
-      </v-scale-transition>
-      <v-scale-transition>
-        <v-btn
-          class="btn px-2 btn-primary filterTasksSetting"
-          outlined
-          @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-btn>
-      </v-scale-transition>
-    </v-toolbar>
+    <application-toolbar
+      id="tasksListToolbar"
+      :left-button="{
+        icon: 'fa-plus',
+        text: $t('label.addTask'),
+      }"
+      :right-text-filter="{
+        minCharacters: 1,
+        placeholder: $t('label.filterTask'),
+        tooltip: $t('label.filterTask'),
+      }"
+      :right-select-box="{
+        selected: primaryFilterSelected,
+        items: primaryFilterItems,
+      }"
+      :right-filter-button="{
+        text: $t('label.filter'),
+        displayText: !$root.isMobile,
+      }"
+      :filters-count="filterNumber"
+      @left-button-click="openTaskDrawer"
+      @filter-text-input-end-typing="onKeyword"
+      @filter-select-change="onPrimaryFilterChange"
+      @filter-button-click="openDrawer" />
     <tasks-filter-drawer
       ref="filterTasksDrawer"
       :query="keyword"
@@ -115,49 +70,47 @@ export default {
     return {
       tasks: null,
       keyword: null,
-      awaitingSearch: false,
-      searchOnKeyChange: true,
       filterNumber: 0,
       primaryFilterSelected: 'ALL',
-      drawer: null,
-      showMobileTaskFilter: false,
       primaryFilter: [
         {name: 'ALL'},{name: 'ASSIGNED'},{name: 'COLLABORATED'},{name: 'OVERDUE'},{name: 'TODAY'},{name: 'TOMORROW'},{name: 'UPCOMING'}
       ],
     };
   },
+  computed: {
+    primaryFilterItems() {
+      return this.primaryFilter.map(item => ({
+        value: item.name,
+        text: this.$t(`label.dueDate.${item.name.toLowerCase()}`),
+      }));
+    },
+  },
   watch: {
     filterNumber() {
       this.$emit('filter-count-changed', this.filterNumber);
     },
-    keyword() {
-      if (!this.awaitingSearch) {
-        const searchOnKeyChange = this.searchOnKeyChange;
-        setTimeout(() => {
-          this.$emit('keyword-changed', this.keyword,searchOnKeyChange);
-          this.awaitingSearch = false;
-        }, 1000);
-      }
-      this.awaitingSearch = true;  
-      this.searchOnKeyChange= true;
-    },
   },
   created() {
-    this.primaryFilterSelected = localStorage.getItem('primary-filter-tasks');
+    this.primaryFilterSelected = localStorage.getItem('primary-filter-tasks') || 'ALL';
     localStorage.setItem('primary-filter-tasks', 'ALL');
   },
   mounted() {
-    $('#widthTmpSelectOption').html($('#filterTaskSelect option:selected').text());
-    const widthElem = $('#widthTmpSelectTaskFilter').width() + 40;
-    $('#filterTaskSelect').width(widthElem);
-    this.changePrimaryFilter();
+    this.$emit('primary-filter-task', this.primaryFilterSelected);
   },
   methods: {
+    onKeyword(term) {
+      this.keyword = term;
+      this.$emit('keyword-changed', term, true);
+    },
+    onPrimaryFilterChange(value) {
+      this.primaryFilterSelected = value;
+      this.keyword = '';
+      this.$emit('primary-filter-task', value);
+    },
     resetFilterTask(){
       this.$emit('reset-filter-task-dashboard');
     },
     filterTaskquery(e, filterGroupSort, filterLabels) {
-      this.searchOnKeyChange = false;
       this.keyword = e.query;
       this.$emit('filter-task-query', e, filterGroupSort, filterLabels);
     },
@@ -178,32 +131,13 @@ export default {
       };
       this.$root.$emit('open-task-drawer', defaultTask);
     },
-    changePrimaryFilter(){  
-      this.searchOnKeyChange=false; 
-      this.keyword='';   
-      this.$emit('primary-filter-task', this.primaryFilterSelected);
-      $('#widthTmpSelectOption').html($('#filterTaskSelect option:selected').text());
-      const widthElem = $('#widthTmpSelectTaskFilter').width() + 40;
-      $('#filterTaskSelect').width(widthElem);   
-    },
     resetFields(activeField){
-      this.searchOnKeyChange=false;
       this.keyword='';
       this.$refs.filterTasksDrawer.resetFields(activeField);
     },
     filterNumChanged(filtersnumber){
       this.filterNumber=filtersnumber;
     },
-    getFilterNum(){
-      if (this.filterNumber>0){
-        return `(${this.filterNumber})`;
-      } return '';
-    },
-    clearMessage() {
-      this.keyword = '';
-      this.showMobileTaskFilter = !this.showMobileTaskFilter;
-    }
-
   }
 };
 </script>
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 c42a78282..a51236a4f 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/initComponents.js
+++ b/webapps/src/main/webapp/vue-app/tasks-management/initComponents.js
@@ -20,7 +20,6 @@ import ProjectDashboard from './components/Project/ProjectDashboard.vue';
 import ProjectListToolbar from './components/Project/ProjectListToolbar.vue';
 import ProjectCard from './components/Project/ProjectCard.vue';
 import ProjectCardFront from './components/Project/ProjectCardFront.vue';
-import ProjectCardReverse from './components/Project/ProjectCardReverse.vue';
 import AddProjectDrawer from './components/Project/AddProjectDrawer.vue';
 import ExoTaskEditor from './components/Project/ExoTaskEditor.vue';
 import ProjectManagersDrawer from './components/Project/ProjectManagersDrawer.vue';
@@ -67,7 +66,6 @@ const components = {
   'project-card-list': ProjectCardList,
   'project-card': ProjectCard,
   'project-card-front': ProjectCardFront,
-  'project-card-Reverse': ProjectCardReverse,
   'add-project-drawer': AddProjectDrawer,
   'exo-task-editor': ExoTaskEditor,
   'project-manager-drawer': ProjectManagersDrawer,