diff --git a/resources/assets/js/api/Menu.js b/resources/assets/js/api/Menu.js
index aa1a1be45..e7467c530 100644
--- a/resources/assets/js/api/Menu.js
+++ b/resources/assets/js/api/Menu.js
@@ -40,9 +40,27 @@ export let menu = {
             headers: {
                 'Authorization': 'Bearer ' + window.config.SYS_CREDENTIALS.accessToken,
                 "Accept-Language": window.config.SYS_LANG
-              }
+            }
         });
     },
+    /**
+     * Get the counter of a specific custom case list
+     * @param {Object} data 
+     * @returns 
+     */
+    getTooltipCaseList(data) {
+        return axios.get(
+            window.config.SYS_SERVER_API +
+            '/api/1.0/' +
+            window.config.SYS_WORKSPACE +
+            '/home/' + data.page + '/counter/caseList/' + data.id, {
+                headers: {
+                    'Authorization': 'Bearer ' + window.config.SYS_CREDENTIALS.accessToken,
+                    "Accept-Language": window.config.SYS_LANG
+                }
+            }
+        );
+    },
     /**
      * Get the highlight
      * @returns 
diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCard.vue b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
index 2183d77dd..075894476 100644
--- a/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="pm-vue-card">
     <div class="card pm-vue-card-inside" style="width: 20rem" @dblclick="dblClick">
-      <div class="card-body">
+      <div class="card-view-body">
         <slot> </slot>
       </div>
     </div>
@@ -42,7 +42,7 @@ export default {
 .pm-vue-card-inside:hover {
   background-color: #cfd9e4;
 }
-.card-body {
+.card-view-body {
   height: 266px;
   overflow-x: hidden;
 }
diff --git a/resources/assets/js/components/headers/MultiviewHeader.vue b/resources/assets/js/components/headers/MultiviewHeader.vue
index 9c8e4257a..006383ce1 100644
--- a/resources/assets/js/components/headers/MultiviewHeader.vue
+++ b/resources/assets/js/components/headers/MultiviewHeader.vue
@@ -14,19 +14,20 @@
           </div>
         </b-col>
         <b-col sm="4" class="pm-multiview-header-actions-buttons">
-          <button
+          <b-button
             v-for="action in data.actions"
             :key="action.id"
             @click="action.onClick(action)"
             class="pm-multiview-header-button"
             :title="action.title"
+            variant="primary"
           >
             <div>
               <span>
                 <i :class="action.icon"></i>
               </span>
             </div>
-          </button>
+          </b-button>
         </b-col>
       </b-row>
     </div>
diff --git a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
index 1e528adff..849862eba 100644
--- a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
+++ b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
@@ -39,20 +39,26 @@
                         "
                     >
                         <span :class="item.specialType != 'header'?'vsm--title': 'vsm--header vsm--title--header'">
-                            <template v-if="itemTaskList">
-                                <custom-tooltip
-                                    :data="item"
-                                    ref="tooltip"
-                                ></custom-tooltip>
-                            </template>
-                            <template v-else>
-                                <span> {{ item.title }} </span>
-                            </template>
-                            <b-icon
-                                v-if="item.sortable"
-                                :icon="item.sortIcon"
-                                @click="onClickSortSettings"
-                            ></b-icon>
+                            <custom-tooltip
+                                :data="item"
+                                ref="tooltip"
+                            ></custom-tooltip>
+                            <span v-if="item.sortable">
+                                <b-icon
+                                    :id="`gear-${item.id}`"
+                                    :icon="item.sortIcon"
+                                    @click="onClickSortSettings"
+                                    @mouseover="hoverHandler"
+                                    @mouseleave="unhoverHandler"
+                                    v-bind:style="{color: sortColor}"
+                                ></b-icon>
+                                <b-tooltip
+                                    :target="`gear-${item.id}`"
+                                    triggers="hover"
+                                >
+                                    {{ $t("ID_CASES_LIST_SETTINGS") }}
+                                </b-tooltip>
+                            </span>
                         </span>
                     </template>
                 </transition>
@@ -238,6 +244,7 @@ export default {
                 CASES_PAUSED: "paused",
                 CASES_SELFSERVICE: "unassigned"
             },
+            sortColor: "white",
         };
     },
     mounted() {
@@ -568,6 +575,12 @@ export default {
             event.stopPropagation();
             this.$refs["modal"].show();
         },
+        hoverHandler() {
+            this.sortColor = '#02feff';
+        },
+        unhoverHandler() {
+            this.sortColor = 'white';
+        }
     },
     inject: ["emitActiveShow", "emitItemClick", "emitItemUpdate"],
 };
diff --git a/resources/assets/js/components/utils/CustomTooltip.vue b/resources/assets/js/components/utils/CustomTooltip.vue
index 399faa9b6..f3640a8ea 100644
--- a/resources/assets/js/components/utils/CustomTooltip.vue
+++ b/resources/assets/js/components/utils/CustomTooltip.vue
@@ -12,6 +12,9 @@
             v-if="showTooltip"
         >
             {{ labelTooltip }}
+            <p v-if="labelDescription !== ''">
+                {{ labelDescription }}
+            </p>
         </b-tooltip>
     </span>
 </template>
@@ -27,6 +30,7 @@ export default {
     data() {
         return {
             labelTooltip: "",
+            labelDescription: "",
             hovering: "",
             show: false,
             menuMap: {
@@ -54,6 +58,7 @@ export default {
          */
         unhoverHandler() {
             this.labelTooltip = "";
+            this.labelDescription = "";
             this.showTooltip = false;
             this.isLoading = false;
             clearTimeout(this.hovering);
@@ -63,11 +68,21 @@ export default {
          */
         setTooltip() {
             let that = this;
-            api.menu.getTooltip(that.data.page).then((response) => {
-                that.showTooltip = true;
-                that.isLoading = false;
-                that.labelTooltip = response.data.label;
-            });
+            if (this.menuMap[this.data.id]) {
+                api.menu.getTooltip(that.data.page).then((response) => {
+                    that.showTooltip = true;
+                    that.isLoading = false;
+                    that.labelTooltip = response.data.label;
+                });
+            } else {
+                api.menu.getTooltipCaseList(that.data)
+                .then((response) => {
+                    that.showTooltip = true;
+                    that.isLoading = false;
+                    that.labelTooltip = response.data.label;
+                    that.labelDescription = response.data.description;
+                });
+            }
         },
         /**
          * Set bold the label 
diff --git a/resources/assets/js/home/CustomCaseList/CustomCaseList.vue b/resources/assets/js/home/CustomCaseList/CustomCaseList.vue
index dc746c53b..d58cd9a3b 100644
--- a/resources/assets/js/home/CustomCaseList/CustomCaseList.vue
+++ b/resources/assets/js/home/CustomCaseList/CustomCaseList.vue
@@ -673,7 +673,7 @@ export default {
              that.$emit("updateSettings", {
                 data: data,
                 key: "orderBy",
-                parent: that.data.pageParent,
+                page: that.data.pageParent,
                 type: "custom",
                 id: that.data.customListId
             });
@@ -687,7 +687,7 @@ export default {
                 this.$emit("updateSettings", {
                     data: val,
                     key: "columns",
-                    parent: this.data.pageParent,
+                    page: this.data.pageParent,
                     type: "custom",
                     id: this.data.customListId
                 });
@@ -1024,7 +1024,7 @@ export default {
             this.$emit("updateSettings", {
                 data: newFilters,
                 key: "filters",
-                parent: this.data.pageParent,
+                page: this.data.pageParent,
                 type: "custom",
                 id: this.data.customListId
             });
diff --git a/resources/assets/js/home/Draft/Draft.vue b/resources/assets/js/home/Draft/Draft.vue
index 2bea8e1f0..69de1090b 100644
--- a/resources/assets/js/home/Draft/Draft.vue
+++ b/resources/assets/js/home/Draft/Draft.vue
@@ -2,6 +2,15 @@
   <div id="v-draft" ref="v-draft" class="v-container-draft">
     <button-fleft :data="newCase"></button-fleft>
     <modal-new-request ref="newRequest"></modal-new-request>
+    <b-alert
+        :show="dataAlert.dismissCountDown"
+        dismissible
+        :variant="dataAlert.variant"
+        @dismissed="dataAlert.dismissCountDown = 0"
+        @dismiss-count-down="countDownChanged"
+    >
+        {{ dataAlert.message }}
+    </b-alert>
     <CasesFilter
       :filters="filters"
       :title="$t('ID_DRAFT')"
@@ -186,6 +195,10 @@
         </span>
       </div>
     </VueListView>
+    <ModalComments
+        ref="modal-comments"
+        @postNotes="onPostNotes"
+    ></ModalComments>
   </div>
 </template>
 
@@ -193,6 +206,7 @@
 import HeaderCounter from "../../components/home/HeaderCounter.vue";
 import ButtonFleft from "../../components/home/ButtonFleft.vue";
 import ModalNewRequest from "../ModalNewRequest.vue";
+import ModalComments from "../modal/ModalComments.vue";
 import CasesFilter from "../../components/search/CasesFilter";
 import TaskCell from "../../components/vuetable/TaskCell.vue";
 import api from "../../api/index";
@@ -216,12 +230,19 @@ export default {
     Ellipsis,
     MultiviewHeader,
     VueCardView,
-    VueListView
+    VueListView,
+    ModalComments
   },
   props: ["defaultOption", "settings"],
   data() {
     let that = this;
     return {
+      dataAlert: {
+          dismissSecs: 5,
+          dismissCountDown: 0,
+          message: "",
+          variant: "info",
+      },
       columMap: {
           case_number: "APP_NUMBER",
           case_title: "DEL_TITLE",
@@ -326,7 +347,7 @@ export default {
       that.$emit("updateSettings", {
         data: data,
         key: "orderBy",
-        parent: this.page,
+        page: "draft",
         type: "normal",
         id: this.id
       });
@@ -337,7 +358,7 @@ export default {
       this.$emit("updateSettings", {
         data: val,
         key: "columns",
-        parent: this.page,
+        page: "draft",
         type: "normal",
         id: this.id
       });
@@ -562,7 +583,7 @@ export default {
           this.$emit("updateSettings", {
             data: newFilters,
             key: "filters",
-            parent: this.page,
+            page: "draft",
             type: "normal",
             id: this.id
           });
@@ -624,13 +645,48 @@ export default {
               name: "case note",
               icon: "far fa-comments",
               fn: function() {
-                that.openCaseDetail(data);
+                that.openComments(data);
               }
             },
           }
         }
       }
     },
+    /**
+     * Show the alert message
+     * @param {string} message - message to be displayen in the body
+     * @param {string} type - alert type
+     */
+    showAlert(message, type) {
+        this.dataAlert.message = message;
+        this.dataAlert.variant = type || "info";
+        this.dataAlert.dismissCountDown = this.dataAlert.dismissSecs;
+    },
+    /**
+     * Updates the alert dismiss value to update
+     * dismissCountDown and decrease
+     * @param {mumber}
+     */
+    countDownChanged(dismissCountDown) {
+        this.dataAlert.dismissCountDown = dismissCountDown;
+    },
+    /**
+     * Open the case notes modal
+     * @param {object} data - needed to create the data
+     */
+    openComments(data) {
+        let that = this;
+        api.cases.open(_.extend({ ACTION: "todo" }, data)).then(() => {
+            that.$refs["modal-comments"].dataCase = data;
+            that.$refs["modal-comments"].show();
+        });
+    },
+    /**
+     * Post notes event handler
+     */
+    onPostNotes() {
+        this.$refs["vueTable"].getData();
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 84e2e3072..255e430ec 100755
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -127,13 +127,19 @@ export default {
             parseInt(window.config.FORMATS.casesListRefreshTime) * 1000
         );
         // adding eventBus listener
-         eventBus.$on('sort-menu', (data) => {
+        eventBus.$on('sort-menu', (data) => {
+            let page;
             let newData = [];
-            data.forEach(item => newData.push({id: item.id}));
+            data.forEach(item => {
+                newData.push({id: item.id});
+                if (!page) {
+                    page = item.page;
+                }
+            });
             that.updateSettings({
                 data: newData,
                 key: "customCaseListOrder",
-                parent: this.page,
+                page: page,
                 type: "normal",
                 id: this.id
             });
@@ -227,21 +233,21 @@ export default {
          */
         updateSettings (params){
             if (params.type === "custom") {
-                if (!this.config.setting[params.parent]) {
-                    this.config.setting[params.parent] = {};
+                if (!this.config.setting[params.page]) {
+                    this.config.setting[params.page] = {};
                 }
-                if (!this.config.setting[params.parent]["customCaseList"]) {
-                    this.config.setting[params.parent]["customCaseList"] = {};
+                if (!this.config.setting[params.page]["customCaseList"]) {
+                    this.config.setting[params.page]["customCaseList"] = {};
                 }
-                if (!this.config.setting[params.parent].customCaseList[params.id]) {
-                    this.config.setting[params.parent].customCaseList[params.id] = {}
+                if (!this.config.setting[params.page].customCaseList[params.id]) {
+                    this.config.setting[params.page].customCaseList[params.id] = {}
                 }
-                this.config.setting[params.parent].customCaseList[params.id][params.key] = params.data;
+                this.config.setting[params.page].customCaseList[params.id][params.key] = params.data;
             } else {
-                if (!this.config.setting[this.page]) {
-                    this.config.setting[this.page] = {};
+                if (!this.config.setting[params.page]) {
+                    this.config.setting[params.page] = {};
                 }
-                this.config.setting[this.page][params.key] = params.data;
+                this.config.setting[params.page][params.key] = params.data;
             }
             api.config
                 .put(this.config)
@@ -308,9 +314,9 @@ export default {
                 if (data[i].customCasesList)  {
                     data[i]["child"] = this.sortCustomCasesList(
                         data[i].customCasesList,
-                        this.config.setting[this.page] &&
-                            this.config.setting[this.page].customCaseListOrder
-                            ? this.config.setting[this.page].customCaseListOrder
+                        this.config.setting[data[i]["page"]] &&
+                            this.config.setting[data[i]["page"]].customCaseListOrder
+                            ? this.config.setting[data[i]["page"]].customCaseListOrder
                             : []
                     );
                     data[i]["sortable"] = data[i].customCasesList.length > 1;
diff --git a/resources/assets/js/home/Inbox/Inbox.vue b/resources/assets/js/home/Inbox/Inbox.vue
index 8305dc258..7b83217e9 100644
--- a/resources/assets/js/home/Inbox/Inbox.vue
+++ b/resources/assets/js/home/Inbox/Inbox.vue
@@ -4,6 +4,15 @@
     <modal-new-request ref="newRequest"></modal-new-request>
     <ModalPauseCase ref="modal-pause-case"></ModalPauseCase>
     <ModalReassignCase ref="modal-reassign-case"></ModalReassignCase>
+    <b-alert
+        :show="dataAlert.dismissCountDown"
+        dismissible
+        :variant="dataAlert.variant"
+        @dismissed="dataAlert.dismissCountDown = 0"
+        @dismiss-count-down="countDownChanged"
+    >
+        {{ dataAlert.message }}
+    </b-alert>
     <CasesFilter
       :filters="filters"
       :title="$t('ID_INBOX')"
@@ -209,6 +218,10 @@
         </span>
       </div>
     </VueListView>
+    <ModalComments
+        ref="modal-comments"
+        @postNotes="onPostNotes"
+    ></ModalComments>
   </div>
 </template>
 
@@ -227,6 +240,7 @@ import defaultMixins from "./defaultMixins";
 import Ellipsis from '../../components/utils/ellipsis.vue';
 import ModalPauseCase from '../modal/ModalPauseCase.vue';
 import ModalReassignCase from '../modal/ModalReassignCase.vue';
+import ModalComments from "../modal/ModalComments.vue";
 import { Event } from 'vue-tables-2';
 import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
 
@@ -246,11 +260,18 @@ export default {
     ModalPauseCase,
     ModalReassignCase,
     CurrentUserCell,
+    ModalComments
   },
   props: ["defaultOption", "settings"],
   data() {
     let that = this;
     return {
+      dataAlert: {
+          dismissSecs: 5,
+          dismissCountDown: 0,
+          message: "",
+          variant: "info",
+      },
       columMap: {
           case_number: "APP_NUMBER",
           case_title: "DEL_TITLE",
@@ -361,7 +382,7 @@ export default {
       that.$emit("updateSettings", {
         data: data,
         key: "orderBy",
-        parent: this.page,
+        page: "inbox",
         type: "normal",
         id: this.id
       });
@@ -375,7 +396,7 @@ export default {
       this.$emit("updateSettings", {
         data: val,
         key: "columns",
-        parent: this.page,
+        page: "inbox",
         type: "normal",
         id: this.id
       });
@@ -637,7 +658,7 @@ export default {
           this.$emit("updateSettings", {
             data: newFilters,
             key: "filters",
-            parent: this.page,
+            page: "inbox",
             type: "normal",
             id: this.id
           });
@@ -716,7 +737,7 @@ export default {
                 name: "case note",
                 icon: "far fa-comments",
                 fn: function() {
-                  that.openCaseDetail(data);
+                  that.openComments(data);
                 }
               },
               reassign: {
@@ -737,6 +758,41 @@ export default {
           }
         }
       },
+      /**
+       * Show the alert message
+       * @param {string} message - message to be displayen in the body
+       * @param {string} type - alert type
+       */
+      showAlert(message, type) {
+          this.dataAlert.message = message;
+          this.dataAlert.variant = type || "info";
+          this.dataAlert.dismissCountDown = this.dataAlert.dismissSecs;
+      },
+      /**
+       * Updates the alert dismiss value to update
+       * dismissCountDown and decrease
+       * @param {mumber}
+       */
+      countDownChanged(dismissCountDown) {
+          this.dataAlert.dismissCountDown = dismissCountDown;
+      },
+      /**
+       * Open the case notes modal
+       * @param {object} data - needed to create the data
+       */
+      openComments(data) {
+          let that = this;
+          api.cases.open(_.extend({ ACTION: "todo" }, data)).then(() => {
+              that.$refs["modal-comments"].dataCase = data;
+              that.$refs["modal-comments"].show();
+          });
+      },
+      /**
+       * Post notes event handler
+       */
+      onPostNotes() {
+          this.$refs["vueTable"].getData();
+      },
   },
 };
 </script>
diff --git a/resources/assets/js/home/MyCases/MyCases.vue b/resources/assets/js/home/MyCases/MyCases.vue
index c5906e98b..338b82ef6 100644
--- a/resources/assets/js/home/MyCases/MyCases.vue
+++ b/resources/assets/js/home/MyCases/MyCases.vue
@@ -236,7 +236,7 @@ export default {
             that.$emit("updateSettings", {
                 data: data,
                 key: "orderBy",
-                parent: this.page,
+                page: "MyCases",
                 type: "normal",
                 id: this.id
             });
@@ -247,7 +247,7 @@ export default {
             this.$emit("updateSettings", {
                 data: val,
                 key: "columns",
-                parent: this.page,
+                page: "MyCases",
                 type: "normal",
                 id: this.id
             });
@@ -674,7 +674,7 @@ export default {
             this.$emit("updateSettings", {
                 data: newFilters,
                 key: "filters",
-                parent: this.page,
+                page: "MyCases",
                 type: "normal",
                 id: this.id
             });
diff --git a/resources/assets/js/home/Paused/Paused.vue b/resources/assets/js/home/Paused/Paused.vue
index 16d42471b..27fd6827f 100644
--- a/resources/assets/js/home/Paused/Paused.vue
+++ b/resources/assets/js/home/Paused/Paused.vue
@@ -3,6 +3,15 @@
     <button-fleft :data="newCase"></button-fleft>
     <modal-new-request ref="newRequest"></modal-new-request>
     <ModalReassignCase ref="modal-reassign-case"></ModalReassignCase>
+    <b-alert
+        :show="dataAlert.dismissCountDown"
+        dismissible
+        :variant="dataAlert.variant"
+        @dismissed="dataAlert.dismissCountDown = 0"
+        @dismiss-count-down="countDownChanged"
+    >
+        {{ dataAlert.message }}
+    </b-alert>
     <CasesFilter
       :filters="filters"
       :title="$t('ID_PAUSED')"
@@ -208,6 +217,10 @@
         </span>
       </div>
     </VueListView>
+     <ModalComments
+        ref="modal-comments"
+        @postNotes="onPostNotes"
+    ></ModalComments>
     <ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
   </div>
 </template>
@@ -227,6 +240,7 @@ import VueListView from "../../components/dataViews/vueListView/VueListView.vue"
 import defaultMixins from "./defaultMixins";
 import Ellipsis from '../../components/utils/ellipsis.vue';
 import ModalReassignCase from '../modal/ModalReassignCase.vue';
+import ModalComments from "../modal/ModalComments.vue";
 import { Event } from 'vue-tables-2';
 import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
 
@@ -246,11 +260,18 @@ export default {
     VueListView,
     ModalReassignCase,
     CurrentUserCell,
+    ModalComments
   },
   props: ["defaultOption", "settings"],
   data() {
     let that = this;
     return {
+      dataAlert: {
+          dismissSecs: 5,
+          dismissCountDown: 0,
+          message: "",
+          variant: "info",
+      },
       columMap: {
           case_number: "APP_NUMBER",
           case_title: "DEL_TITLE",
@@ -360,7 +381,7 @@ export default {
       that.$emit("updateSettings", {
         data: data,
         key: "orderBy",
-        parent: this.page,
+        page: "paused",
         type: "normal",
         id: this.id
       });
@@ -371,7 +392,7 @@ export default {
       this.$emit("updateSettings", {
         data: val,
         key: "columns",
-        parent: this.page,
+        page: "paused",
         type: "normal",
         id: this.id
       });
@@ -632,7 +653,7 @@ export default {
           this.$emit("updateSettings", {
             data: newFilters,
             key: "filters",
-            parent: this.page,
+            page: "paused",
             type: "normal",
             id: this.id
           });
@@ -695,7 +716,7 @@ export default {
               name: "case note",
               icon: "far fa-comments",
               fn: function() {
-                that.openCaseDetail(data);
+                that.openComments(data);
               }
             },
             play: {
@@ -716,6 +737,41 @@ export default {
         }
       }
     },
+    /**
+     * Show the alert message
+     * @param {string} message - message to be displayen in the body
+     * @param {string} type - alert type
+     */
+    showAlert(message, type) {
+        this.dataAlert.message = message;
+        this.dataAlert.variant = type || "info";
+        this.dataAlert.dismissCountDown = this.dataAlert.dismissSecs;
+    },
+    /**
+     * Updates the alert dismiss value to update
+     * dismissCountDown and decrease
+     * @param {mumber}
+     */
+    countDownChanged(dismissCountDown) {
+        this.dataAlert.dismissCountDown = dismissCountDown;
+    },
+    /**
+     * Open the case notes modal
+     * @param {object} data - needed to create the data
+     */
+    openComments(data) {
+        let that = this;
+        api.cases.open(_.extend({ ACTION: "todo" }, data)).then(() => {
+            that.$refs["modal-comments"].dataCase = data;
+            that.$refs["modal-comments"].show();
+        });
+    },
+    /**
+     * Post notes event handler
+     */
+    onPostNotes() {
+        this.$refs["vueTable"].getData();
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
index 3f31e202c..0af8c0be8 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
@@ -268,7 +268,6 @@ export default {
 
       //Update the labels
       this.dataProcesses = data;
-      this.updateLabels(data);
     },
     /**
      * Change the options in TOTAL CASES BY PROCESS
diff --git a/resources/assets/js/home/Unassigned/Unassigned.vue b/resources/assets/js/home/Unassigned/Unassigned.vue
index f6d347401..581b3a07c 100644
--- a/resources/assets/js/home/Unassigned/Unassigned.vue
+++ b/resources/assets/js/home/Unassigned/Unassigned.vue
@@ -9,6 +9,15 @@
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
+     <b-alert
+        :show="dataAlert.dismissCountDown"
+        dismissible
+        :variant="dataAlert.variant"
+        @dismissed="dataAlert.dismissCountDown = 0"
+        @dismiss-count-down="countDownChanged"
+    >
+        {{ dataAlert.message }}
+    </b-alert>
     <multiview-header
       :data="dataMultiviewHeader"
       :dataSubtitle="dataSubtitle"
@@ -203,6 +212,10 @@
         </span>
       </div>
     </VueListView>
+    <ModalComments
+        ref="modal-comments"
+        @postNotes="onPostNotes"
+    ></ModalComments>
     <ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
     <ModalPauseCase ref="modal-pause-case"></ModalPauseCase>
   </div>
@@ -223,6 +236,7 @@ import VueCardView from "../../components/dataViews/vueCardView/VueCardView.vue"
 import VueListView from "../../components/dataViews/vueListView/VueListView.vue";
 import defaultMixins from "./defaultMixins";
 import ModalPauseCase from '../modal/ModalPauseCase.vue';
+import ModalComments from "../modal/ModalComments.vue";
 import { Event } from 'vue-tables-2';
 import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
 
@@ -242,11 +256,18 @@ export default {
     VueListView,
     ModalPauseCase,
     CurrentUserCell,
+    ModalComments
   },
   props: ["defaultOption", "settings"],
   data() {
     let that = this;
     return {
+      dataAlert: {
+          dismissSecs: 5,
+          dismissCountDown: 0,
+          message: "",
+          variant: "info",
+      },
       columMap: {
           case_number: "APP_NUMBER",
           case_title: "DEL_TITLE",
@@ -352,8 +373,7 @@ export default {
       that.$emit("updateSettings", {
         data: data,
         key: "orderBy",
-        parent: this.page,
-        type: "normal",
+        page: "unassigned",
         id: this.id
       });
     });
@@ -363,7 +383,7 @@ export default {
       this.$emit("updateSettings", {
         data: val,
         key: "columns",
-        parent: this.page,
+        page: "unassigned",
         type: "normal",
         id: this.id
       });
@@ -602,7 +622,7 @@ export default {
           this.$emit("updateSettings", {
             data: newFilters,
             key: "filters",
-            parent: this.page,
+            page: "unassigned",
             type: "normal",
             id: this.id
           });
@@ -665,7 +685,7 @@ export default {
               name: "case note",
               icon: "far fa-comments",
               fn: function() {
-                that.openCaseDetail(data);
+                that.openComments(data);
               }
             },
             pause: {
@@ -686,6 +706,41 @@ export default {
         }
       }
     },
+    /**
+     * Show the alert message
+     * @param {string} message - message to be displayen in the body
+     * @param {string} type - alert type
+     */
+    showAlert(message, type) {
+        this.dataAlert.message = message;
+        this.dataAlert.variant = type || "info";
+        this.dataAlert.dismissCountDown = this.dataAlert.dismissSecs;
+    },
+    /**
+     * Updates the alert dismiss value to update
+     * dismissCountDown and decrease
+     * @param {mumber}
+     */
+    countDownChanged(dismissCountDown) {
+        this.dataAlert.dismissCountDown = dismissCountDown;
+    },
+    /**
+     * Open the case notes modal
+     * @param {object} data - needed to create the data
+     */
+    openComments(data) {
+        let that = this;
+        api.cases.open(_.extend({ ACTION: "todo" }, data)).then(() => {
+            that.$refs["modal-comments"].dataCase = data;
+            that.$refs["modal-comments"].show();
+        });
+    },
+    /**
+     * Post notes event handler
+     */
+    onPostNotes() {
+        this.$refs["vueTable"].getData();
+    },
   },
 };
 </script>
diff --git a/workflow/engine/content/translations/english/processmaker.en.po b/workflow/engine/content/translations/english/processmaker.en.po
index 4cd66d203..4a411730b 100755
--- a/workflow/engine/content/translations/english/processmaker.en.po
+++ b/workflow/engine/content/translations/english/processmaker.en.po
@@ -3767,6 +3767,12 @@ msgstr "Case List Fields"
 msgid "Loading Cases List, please wait..."
 msgstr "Loading Cases List, please wait..."
 
+# TRANSLATION
+# LABEL/ID_CASES_LIST_SETTINGS
+#: LABEL/ID_CASES_LIST_SETTINGS
+msgid "Cases List Settings"
+msgstr "Cases List Settings"
+
 # TRANSLATION
 # LABEL/ID_CASES_LIST_SETUP
 #: LABEL/ID_CASES_LIST_SETUP
diff --git a/workflow/engine/data/mysql/insert.sql b/workflow/engine/data/mysql/insert.sql
index f82e75482..7a3db69d3 100755
--- a/workflow/engine/data/mysql/insert.sql
+++ b/workflow/engine/data/mysql/insert.sql
@@ -57439,6 +57439,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_CASES_LIST','en','Cases Lists','2015-04-28') ,
 ( 'LABEL','ID_CASES_LIST_FIELDS','en','Case List Fields','2017-02-21') ,
 ( 'LABEL','ID_CASES_LIST_GRID_LOADING','en','Loading Cases List, please wait...','2014-01-15') ,
+( 'LABEL','ID_CASES_LIST_SETTINGS','en','Cases List Settings','2021-09-20') ,
 ( 'LABEL','ID_CASES_LIST_SETUP','en','Case Lists','2017-02-21') ,
 ( 'LABEL','ID_CASES_MENU_ADMIN','en','Process Supervisor','2014-01-15') ,
 ( 'LABEL','ID_CASES_MENU_FOLDERS','en','Cases','2014-01-15') ,
diff --git a/workflow/engine/methods/cases/cases_CatchExecute.php b/workflow/engine/methods/cases/cases_CatchExecute.php
index 0cf3cf475..941cfe0d6 100644
--- a/workflow/engine/methods/cases/cases_CatchExecute.php
+++ b/workflow/engine/methods/cases/cases_CatchExecute.php
@@ -42,7 +42,7 @@ $appDelegation = new AppDelegation();
 $delegation = $appDelegation->load($appUid, $delIndex);
 
 // if there are no user in the delegation row, this case is still in selfservice
-if (empty($delegation['USR_UID'])) {
+if ($delegation['USR_UID'] == "") {
     $case->setCatchUser($_SESSION['APPLICATION'], $_SESSION['INDEX'], $_SESSION['USER_LOGGED']);
     /*----------------------------------********---------------------------------*/
     $licensedFeatures = PMLicensedFeatures::getSingleton();
@@ -71,7 +71,13 @@ if (empty($delegation['USR_UID'])) {
         </script>');
     }
 } else {
-    G::SendMessageText(G::LoadTranslation('ID_CASE_ALREADY_DERIVATED'), 'error');
+    $hideMessage = false;
+    if (isset($_REQUEST['hideMessage'])) {
+        $hideMessage = $_REQUEST['hideMessage'] === 'true' ? true : false;
+    }
+    if ($hideMessage === false) {
+        G::SendMessageText(G::LoadTranslation('ID_CASE_ALREADY_DERIVATED'), 'error');
+    }
 }
 
 $validation = (SYS_SKIN != 'uxs') ? 'true' : 'false';
diff --git a/workflow/engine/src/ProcessMaker/Model/Delegation.php b/workflow/engine/src/ProcessMaker/Model/Delegation.php
index c34b79e25..42038116a 100644
--- a/workflow/engine/src/ProcessMaker/Model/Delegation.php
+++ b/workflow/engine/src/ProcessMaker/Model/Delegation.php
@@ -2015,7 +2015,7 @@ class Delegation extends Model
         $results = $query->get();
         $results->transform(function ($item) {
             $abs = new AbstractCases();
-            $item['TAS_COLOR'] = $abs->getTaskColor($item['DEL_TASK_DUE_DATE']);
+            $item['TAS_COLOR'] = $abs->getTaskColor($item['DEL_TASK_DUE_DATE'], $item['DEL_THREAD_STATUS']);
             $item['TAS_COLOR_LABEL'] = AbstractCases::TASK_COLORS[$item['TAS_COLOR']];
             $item['UNASSIGNED'] = ($item['TAS_ASSIGN_TYPE'] === 'SELF_SERVICE' ? true : false);
             $userInfo = User::getInformation($item['USR_ID']);
diff --git a/workflow/engine/templates/cases/open.js b/workflow/engine/templates/cases/open.js
index adca3bdf9..1e4a91057 100644
--- a/workflow/engine/templates/cases/open.js
+++ b/workflow/engine/templates/cases/open.js
@@ -457,7 +457,7 @@ Ext.onReady(function(){
      */
     function claimCase() {
         Ext.Ajax.request({
-            url: 'cases_CatchExecute',
+            url: 'cases_CatchExecute?hideMessage=true',
             success: function (response, opts) {
                 Ext.Ajax.request({
                     url: 'ajaxListener',