diff --git a/resources/assets/js/components/search/AdvancedFilter.vue b/resources/assets/js/components/search/AdvancedFilter.vue
index 32a453bfb..f0db3e859 100644
--- a/resources/assets/js/components/search/AdvancedFilter.vue
+++ b/resources/assets/js/components/search/AdvancedFilter.vue
@@ -104,6 +104,7 @@
                                         :key="tag"
                                         :title="tag"
                                         :variant="tagVariant"
+                                        @click="onClickTag"
                                         class="mr-1"
                                     >   
                                         
@@ -530,6 +531,12 @@ export default {
                 name: this.name,
                 filters: this.filters
             });
+        },
+        /**
+         * On click tag handler
+         */
+        onClickTag() {
+            this.$root.$emit('bv::hide::popover');   
         }
     }
 };
diff --git a/resources/assets/js/components/search/popovers/SearchPopover.vue b/resources/assets/js/components/search/popovers/SearchPopover.vue
index f4ccab5ac..cf3c63e6d 100644
--- a/resources/assets/js/components/search/popovers/SearchPopover.vue
+++ b/resources/assets/js/components/search/popovers/SearchPopover.vue
@@ -8,7 +8,8 @@
             ref="popover"
             triggers="click"
             placement="bottom"
-            class="popovercustom" 
+            class="popovercustom"
+            @show="onshow"
         >
             <template #title>
                 <b-button @click="onClose" class="close" aria-label="Close">
@@ -47,6 +48,12 @@ export default {
          */
         onSave() {
             this.$emit('savePopover');
+        },
+        /**
+         * Show popover event handler
+         */
+        onshow() {
+            this.$root.$emit('bv::hide::popover');   
         }
     }
 };
diff --git a/resources/assets/js/home/AdvancedSearch.vue b/resources/assets/js/home/AdvancedSearch.vue
index 153ffe046..30ae0b6d5 100644
--- a/resources/assets/js/home/AdvancedSearch.vue
+++ b/resources/assets/js/home/AdvancedSearch.vue
@@ -29,7 +29,7 @@
             :data="tableData"
             :columns="columns"
             :options="options"
-            ref="test"
+            ref="vueTable"
         >
             <div slot="info" slot-scope="props">
                 <b-icon
@@ -66,17 +66,19 @@
             <div slot="finish_date" slot-scope="props">
                 {{ props.row.FINISH_DATE }}
             </div>
-              <div slot="duration" slot-scope="props">
+            <div slot="duration" slot-scope="props">
                 {{ props.row.DURATION }}
             </div>
-            <div slot="actions" slot-scope="props">
-                <div class="btn-default">
-                    <i class="fas fa-comments"></i>
-                    <span class="badge badge-light">9</span>
-                    <span class="sr-only">unread messages</span>
+              <div slot="actions" slot-scope="props">
+                <div class="btn-default"  v-bind:style="{ color: props.row.MESSAGE_COLOR}" @click="openComments(props.row)">
+                    <span class="fas fa-comments"></span>
                 </div>
             </div>
         </v-server-table>
+        <ModalComments
+            ref="modal-comments"
+            @postNotes="onPostNotes"
+        ></ModalComments>
     </div>
 </template>
 <script>
@@ -84,6 +86,7 @@ import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
 import AdvancedFilter from "../components/search/AdvancedFilter";
 import TaskCell from "../components/vuetable/TaskCell.vue";
+import ModalComments from "./modal/ModalComments.vue";
 import api from "./../api/index";
 import { Event } from "vue-tables-2";
 
@@ -93,7 +96,8 @@ export default {
         AdvancedFilter,
         ButtonFleft,
         ModalNewRequest,
-        TaskCell
+        TaskCell,
+        ModalComments
     },
     props: ["id", "name", "filters"],
     data() {
@@ -160,7 +164,7 @@ export default {
     },
     watch: {
         id: function() {
-            this.$refs.test.refresh();
+            this.$refs.vueTable.refresh();
         },
     },
     methods: {
@@ -198,7 +202,7 @@ export default {
             });
         },
         /**
-         * Format Response API TODO to grid todo and columns
+         * Format the service response
          */
         formatDataResponse(response) {
             let data = [];
@@ -214,6 +218,9 @@ export default {
                     DURATION: v.DURATION,
                     DEL_INDEX: v.DEL_INDEX,
                     APP_UID: v.APP_UID,
+                    PRO_UID: v.PRO_UID,
+                    TAS_UID: v.TAS_UID,
+                    MESSAGE_COLOR: v.CASE_NOTES_COUNT > 0 ? "black":"silver"
                 });
             });
             return data;
@@ -401,6 +408,8 @@ export default {
             this.$parent.dataCase = {
                 APP_UID: item.APP_UID,
                 DEL_INDEX: item.DEL_INDEX,
+                PRO_UID: item.PRO_UID,
+                TAS_UID: item.TAS_UID,
                 APP_NUMBER: item.CASE_NUMBER
             };
             this.$parent.page = "case-detail";
@@ -435,7 +444,7 @@ export default {
          * @param {string} message - message to be displayen in the body
          * @param {string} type - alert type
          */
-        showAlert(message, type) {  
+        showAlert(message, type) {
             this.message = message;
             this.variant = type || "info";
             this.dismissCountDown = this.dismissSecs;
@@ -495,12 +504,29 @@ export default {
          */
         onSearch(params) {
             this.$nextTick(() => {
-                this.$refs.test.refresh();
+                this.$refs.vueTable.refresh();
             });
         },
         onUpdateFilters(params) {
             this.$emit("onUpdateFilters", params);
         },
+        /**
+         * 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>
@@ -512,7 +538,7 @@ export default {
     padding-right: 50px;
 }
 .v-user-cell {
-  display: inline-block;
+    display: inline-block;
 }
 .v-user-cell-ellipsis {
     white-space: nowrap;
diff --git a/resources/assets/js/home/CaseDetail.vue b/resources/assets/js/home/CaseDetail.vue
index 5e8bd5629..91af32dcd 100644
--- a/resources/assets/js/home/CaseDetail.vue
+++ b/resources/assets/js/home/CaseDetail.vue
@@ -445,11 +445,11 @@ export default {
       let data = [];
       _.forEach(response, (v) => {
         data.push({
-          TASK: {
+          TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
-          },
+          }],
           CASE_TITLE: v.DEL_TITLE,
           ASSIGNEE: v.USR_FIRSTNAME + " " + v.USR_LASTNAME,
           STATUS: v.DEL_THREAD_STATUS,
diff --git a/resources/assets/js/home/Draft.vue b/resources/assets/js/home/Draft.vue
index 93de30cd4..3c9ad5725 100644
--- a/resources/assets/js/home/Draft.vue
+++ b/resources/assets/js/home/Draft.vue
@@ -31,10 +31,25 @@
       <div slot="task" slot-scope="props">
         <TaskCell :data="props.row.TASK" />
       </div>
+      <div slot="current_user" slot-scope="props">
+        {{
+          nameFormatCases(
+            props.row.USR_FIRSTNAME,
+            props.row.USR_LASTNAME,
+            props.row.USR_USERNAME
+          )
+        }}
+      </div>
+      <div slot="due_date" slot-scope="props">
+        {{ props.row.DUE_DATE }}
+      </div>
+      <div slot="delegation_date" slot-scope="props">
+        {{ props.row.DELEGATION_DATE }}
+      </div>
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
-        <button class="btn btn-success btn-sm" @click="openCase(props)">
-          Continue
+        <button class="btn btn-success btn-sm" @click="openCase(props.row)">
+          {{ $t("ID_OPEN_CASE") }}
         </button>
       </div>
     </v-server-table>
@@ -69,11 +84,14 @@ export default {
         },
       },
       columns: [
-        "detail",
+       "detail",
         "case_number",
         "case_title",
         "process_name",
         "task",
+        "current_user",
+        "due_date",
+        "delegation_date",
         "priority",
         "actions",
       ],
@@ -86,9 +104,11 @@ export default {
           case_title: this.$i18n.t("ID_CASE_TITLE"),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
           task: this.$i18n.t("ID_TASK"),
+          current_user: this.$i18n.t("ID_CURRENT_USER"),
+          due_date: this.$i18n.t("ID_DUE_DATE"),
+          delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
           priority: this.$i18n.t("ID_PRIORITY"),
           actions: "",
-          detail: "",
         },
         selectable: {
           mode: "single",
@@ -162,11 +182,11 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           CASE_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
-          TASK: {
+          TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
-          },
+          }],
           USR_FIRSTNAME: v.USR_FIRSTNAME,
           USR_LASTNAME: v.USR_LASTNAME,
           USR_USERNAME: v.USR_USERNAME,
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index c0dda6a10..778b8e5b9 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -154,6 +154,7 @@ export default {
                 this.pageName = item.item.title;
             } else {
                 this.filters = [];
+                this.pageId = null;
                 this.page = item.item.id || "MyCases";
             }
         },
diff --git a/resources/assets/js/home/MyCases.vue b/resources/assets/js/home/MyCases.vue
index 921766410..8ccbabff7 100644
--- a/resources/assets/js/home/MyCases.vue
+++ b/resources/assets/js/home/MyCases.vue
@@ -3,7 +3,7 @@
         <button-fleft :data="newCase"></button-fleft>
         <MyCasesFilter
             :filters="filters"
-            :title="$t('ID_MY_CASES')"
+            :title="title"
             @onRemoveFilter="onRemoveFilter"
             @onUpdateFilters="onUpdateFilters"
         />
@@ -39,14 +39,12 @@
                 {{ props.row.DURATION }}
             </div>
             <div slot="actions" slot-scope="props">
-                <div class="btn-default" @click="openComments(props.row)">
-                    <i class="fas fa-comments"></i>
-                    <span class="badge badge-light">{{props.row.CASES_NOTES}}</span>
-                    <span class="sr-only">unread messages</span>
+                <div class="btn-default"  v-bind:style="{ color: props.row.MESSAGE_COLOR}" @click="openComments(props.row)">
+                    <span class="fas fa-comments"></span>
                 </div>
             </div>
         </v-server-table>
-        <ModalComments ref="modal-comments"></ModalComments>
+        <ModalComments ref="modal-comments" @postNotes="onPostNotes"></ModalComments>
     </div>
 </template>
 
@@ -73,6 +71,7 @@ export default {
     data() {
         return {
             metrics: [],
+            title: this.$i18n.t('ID_MY_CASES'),
             filter: "CASES_INBOX",
             allView: [],
             filterHeader: "STARTED",
@@ -203,7 +202,7 @@ export default {
                     APP_UID: v.APP_UID,
                     PRO_UID: v.PRO_UID,
                     TAS_UID: v.TAS_UID,
-                    CASES_NOTES: v.CASE_NOTES_COUNT
+                    MESSAGE_COLOR: v.CASE_NOTES_COUNT > 0 ? "black":"silver"
                 });
             });
             return data;
@@ -403,6 +402,7 @@ export default {
                     item: v.id,
                     icon: info[v.id].icon,
                     onClick: (obj) => {
+                        that.title = obj.title;
                         that.filterHeader = obj.item;
                         that.$refs["vueTable"].getData();
                     },
@@ -411,6 +411,10 @@ export default {
             });
             return data;
         },
+        /**
+         * 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(() => {
@@ -428,6 +432,12 @@ export default {
                 });
             }
         },
+        /**
+         * Post notes event handler
+         */
+        onPostNotes() {
+            this.$refs["vueTable"].getData();
+        }
     },
 };
 </script>
diff --git a/resources/assets/js/home/Paused.vue b/resources/assets/js/home/Paused.vue
index ea5bb1321..fc5362602 100644
--- a/resources/assets/js/home/Paused.vue
+++ b/resources/assets/js/home/Paused.vue
@@ -191,11 +191,11 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           CASE_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
-          TASK: {
+          TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
-          },
+          }],
           USR_FIRSTNAME: v.USR_FIRSTNAME,
           USR_LASTNAME: v.USR_LASTNAME,
           USR_USERNAME: v.USR_USERNAME,
diff --git a/resources/assets/js/home/Todo.vue b/resources/assets/js/home/Todo.vue
index 803be80c6..ea63c6643 100644
--- a/resources/assets/js/home/Todo.vue
+++ b/resources/assets/js/home/Todo.vue
@@ -183,11 +183,11 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           CASE_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
-          TASK: {
+          TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
-          },
+          }],
           USR_FIRSTNAME: v.USR_FIRSTNAME,
           USR_LASTNAME: v.USR_LASTNAME,
           USR_USERNAME: v.USR_USERNAME,
diff --git a/resources/assets/js/home/Unassigned.vue b/resources/assets/js/home/Unassigned.vue
index 270025cbe..cd90cfbe1 100644
--- a/resources/assets/js/home/Unassigned.vue
+++ b/resources/assets/js/home/Unassigned.vue
@@ -188,11 +188,11 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           CASE_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
-          TASK: {
+          TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
-          },
+          }],
           USR_FIRSTNAME: v.USR_FIRSTNAME,
           USR_LASTNAME: v.USR_LASTNAME,
           USR_USERNAME: v.USR_USERNAME,
diff --git a/resources/assets/js/home/modal/ModalComments.vue b/resources/assets/js/home/modal/ModalComments.vue
index f111f034d..d74e170d5 100644
--- a/resources/assets/js/home/modal/ModalComments.vue
+++ b/resources/assets/js/home/modal/ModalComments.vue
@@ -99,6 +99,8 @@ export default {
               that.attachDocuments = false;
               that.dataAttachedDocuments.items = [];
               that.getCasesNotes();
+              this.$refs["modal-comments"].hide();
+              this.$emit("postNotes");
             } else {
               that.showAlert(response.data.message, "danger");
               that.dataAttachedDocuments.items = [];