diff --git a/resources/assets/js/api/Cases.js b/resources/assets/js/api/Cases.js
index 893afe686..cad3ea93d 100644
--- a/resources/assets/js/api/Cases.js
+++ b/resources/assets/js/api/Cases.js
@@ -20,53 +20,61 @@ export let cases = {
     },
     inbox(data) {
         let service = "INBOX_LIST",
-            keys = {};
+            keys = {},
+            params = data;
         if (data && data.id) {
             service = "INBOX_CUSTOM_LIST";
             keys["id"] =  data.id;
+            params = data.filters;
         }
         return Api.get({
             service,
-            params: data,
+            params,
             keys
         });
     },
     draft(data) {
         let service = "DRAFT_LIST",
-            keys = {};
+            keys = {},
+            params = data;
         if (data && data.id) {
             service = "DRAFT_CUSTOM_LIST";
             keys["id"] =  data.id;
+            params = data.filters;
         }
         return Api.get({
             service,
-            params: data,
+            params,
             keys
         });
     },
     paused(data) {
         let service = "PAUSED_LIST",
-            keys = {};
+            keys = {},
+            params = data;
         if (data && data.id) {
             service = "PAUSED_CUSTOM_LIST";
             keys["id"] =  data.id;
+            params = data.filters;
         }
         return Api.get({
             service,
-            params: data,
+            params,
             keys
         });
     },
     unassigned(data) {
         let service = "UNASSIGNED_LIST",
-            keys = {};
+            keys = {},
+            params = data;
         if (data && data.id) {
             service = "UNASSIGNED_CUSTOM_LIST";
             keys["id"] =  data.id;
+            params = data.filters;
         }
         return Api.get({
             service,
-            params: data,
+            params,
             keys
         });
     },
diff --git a/resources/assets/js/components/search/CasesFilter.vue b/resources/assets/js/components/search/CasesFilter.vue
index 32be11108..7bc880c2d 100644
--- a/resources/assets/js/components/search/CasesFilter.vue
+++ b/resources/assets/js/components/search/CasesFilter.vue
@@ -9,7 +9,7 @@
         <b-form-group>
             <b-form-radio-group
                 v-model="selected"
-                :options="filterItems"
+                :options="criteriaItems"
                 value-field="id"
                 text-field="optionLabel"
                 name="flavour-2a"
@@ -90,7 +90,7 @@ import api from "./../../api/index";
 
 export default {
   name: "Cases",
-  props: ["filters", "title", "icon"],
+  props: ["filters", "title", "icon" , "hiddenItems"],
   components: {
     SearchPopover,
     CaseNumber,
@@ -245,25 +245,34 @@ export default {
         byProcessName: ""
     };
   },
-  mounted() {
-    // Force to load filters when mounted the component
-    let fils= this.filters;
-    if(_.isArray(this.filters)){
-      _.forEach(fils,(o)=>{
-        o.autoShow = false;
-      });
-      this.setFilters(fils);
-      this.dataLoaded = true;
+  computed: {
+    // a computed getter
+    criteriaItems: function () {
+      let found,
+          criteria = [];
+      if (this.hiddenItems && this.hiddenItems.length) {
+          this.filterItems.forEach(item =>  {
+              found = this.hiddenItems.find( elem  => elem !== item.id);
+              if (found) {
+                  criteria.push(item);
+              }
+          });
+          return criteria;
+      } else {
+          return this.filterItems;
+      }
     }
   },
+  mounted() {
+  },
   watch: {
     filters: { 
         immediate: true, 
-        handler(newVal, oldVal) { 
+        handler(newVal, oldVal) {
             this.searchTags = [];
             this.selected = [];
             //Prevent show popover at the first time
-            if (newVal.length && this.dataLoaded) {
+            if (newVal.length) {
                 this.setFilters(newVal, oldVal);
                 this.searchClickHandler();
             }
@@ -275,7 +284,7 @@ export default {
      * Add filter criteria save button handler
      */
     onOk() {
-        let self = this,
+        let self = this,  
             element,
             initialFilters = [],
             item;
@@ -313,7 +322,8 @@ export default {
                     fieldId: id,
                     value:  '',
                     label: "",
-                    options: []
+                    options: [],
+                    autoShow: true
                 };
                 initialFilters.push(item);
             }
@@ -332,12 +342,9 @@ export default {
         });
         if (component) {
             self.searchTags.push(component.id);
-            self.selected.push(component.id);
+            self.selected = component.id;
             self.itemModel[component.id] = component;
             self.itemModel[component.id].autoShow = typeof item.autoShow !== "undefined" ? item.autoShow : true;
-            if (oldVal && !oldVal.length) {
-                self.updateSearchTag(item);
-            }
         }
         if(item.fieldId === "processName") {
             self.searchTags.push(self.processName.id);
diff --git a/resources/assets/js/home/CustomCaseList/CustomCaseList.vue b/resources/assets/js/home/CustomCaseList/CustomCaseList.vue
index d126c7302..e8b32fdbb 100644
--- a/resources/assets/js/home/CustomCaseList/CustomCaseList.vue
+++ b/resources/assets/js/home/CustomCaseList/CustomCaseList.vue
@@ -504,16 +504,7 @@ export default {
                     id: this.data.customListId
                 });
             }
-        },
-        filters: function(val) {
-            this.$emit("updateSettings", {
-                data: val,
-                key: "filters",
-                parent: this.data.pageParent,
-                type: "custom",
-                id: this.data.customListId
-            });
-        },
+        }
     },
     computed: {
         /**
@@ -778,8 +769,37 @@ export default {
             });
         },
         onRemoveFilter(data) {},
+        /**
+         * Prepare the data to be updated
+         * @param {object} data
+         */
+        prepareAndUpdate(data) {
+            let canUpdate = false,
+                newFilters = [];
+            data.params.forEach(item =>  {
+                const container  = {...item};
+                container.autoShow = false;
+                if (item.value !== "") {
+                    newFilters.push(container);
+                    canUpdate = true;
+                }
+            });
+            if (data.params.length == 0) {
+            canUpdate = true;
+            } 
+            if (canUpdate) {
+            this.$emit("updateSettings", {
+                data: newFilters,
+                key: "filters",
+                parent: this.data.pageParent,
+                type: "custom",
+                id: this.data.customListId
+            });
+            }
+        },
         onUpdateFilters(data) {
             this.filters = data.params;
+            this.prepareAndUpdate(data);
             if (data.refresh) {
                 this.$nextTick(() => {
                     if (this.typeView === "GRID") {
@@ -801,7 +821,7 @@ export default {
             this.isFistTime = true;
             this.typeView = "GRID";
             // force to update component id
-            if (newData){
+            if (newData) {
                 if(newData.customListId) {
                     this.data.customListId = newData.customListId;
                 }
@@ -810,6 +830,7 @@ export default {
                     icon: newData.pageIcon,
                     color: newData.color
                 }
+                this.filters = newData.settings && newData.settings.filters ? newData.settings.filters : {};
             }
             if (this.typeView === "GRID" && this.$refs["vueTable"]) {
                 this.$refs["vueTable"].getData();
diff --git a/resources/assets/js/home/CustomCaseList/defaultMixins.js b/resources/assets/js/home/CustomCaseList/defaultMixins.js
index 36aa9505c..8ec583439 100644
--- a/resources/assets/js/home/CustomCaseList/defaultMixins.js
+++ b/resources/assets/js/home/CustomCaseList/defaultMixins.js
@@ -112,15 +112,14 @@ export default {
     getCasesViewMore(data) {
       let that = this,
         dt,
-        paged,
         typeList = that.data.pageParent == "inbox"? "todo": that.data.pageParent,
         limit = data.limit,
         start = data.page === 1 ? 0 : limit * (data.page - 1),
         filters = {};
-      paged = start + "," + limit;
 
       filters = {
-        paged: paged,
+        limit: limit,
+        offset: start
       };
       _.forIn(this.filters, function (item, key) {
         if (filters && item.value) {
diff --git a/resources/assets/js/home/Draft/Draft.vue b/resources/assets/js/home/Draft/Draft.vue
index 5ef6b2fe9..65f74f8b3 100644
--- a/resources/assets/js/home/Draft/Draft.vue
+++ b/resources/assets/js/home/Draft/Draft.vue
@@ -6,6 +6,7 @@
       :filters="filters"
       :title="$t('ID_DRAFT')"
       :icon="icon"
+      :hiddenItems="hiddenItems"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
@@ -303,7 +304,8 @@ export default {
         buttons: {}
       },
       showEllipsis: false,
-      dataSubtitle: null
+      dataSubtitle: null,
+      hiddenItems: ['bySendBy']
     };
   },
   created() {
@@ -332,16 +334,7 @@ export default {
         type: "normal",
         id: this.id
       });
-    },  
-    filters: function (val) {
-      this.$emit("updateSettings", {
-        data: val,
-        key: "filters",
-        parent: this.page,
-        type: "normal",
-        id: this.id
-      });
-    },
+    }
   },
   computed: {
     /**
@@ -540,8 +533,41 @@ export default {
       });
     },
     onRemoveFilter(data) {},
+    /**
+     * Prepare the data to be updated
+     * @param {object} data
+     */
+    prepareAndUpdate(data) {
+        let canUpdate = false,
+            newFilters = [];
+        data.params.forEach(item =>  {
+            const container  = {...item};
+            container.autoShow = false;
+            if (item.value !== "") {
+                newFilters.push(container);
+                canUpdate = true;
+            }
+        });
+        if (data.params.length == 0) {
+          canUpdate = true;
+        } 
+        if (canUpdate) {
+          this.$emit("updateSettings", {
+            data: newFilters,
+            key: "filters",
+            parent: this.page,
+            type: "normal",
+            id: this.id
+          });
+        }
+    },
+    /**
+     * Update event handler
+     * @param {object} data
+     */
     onUpdateFilters(data) {
       this.filters = data.params;
+      this.prepareAndUpdate(data);
       if (data.refresh) {
         this.$nextTick(() => {
           if (this.typeView === "GRID") {
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 6683a9e62..a13a97cad 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -396,19 +396,21 @@ export default {
                 this.settings = this.config.setting[this.page];
                 if (!this.menuMap[item.item.id]) {
                     this.page = "custom-case-list";
+                    if (this.config.setting[item.item.page] && this.config.setting[item.item.page]["customCaseList"]) {
+                        this.settings = this.config.setting[item.item.page]["customCaseList"][item.item.id];
+                    } else {
+                        this.settings = {};
+                    }
                     this.pageData = {
                         pageUri: item.item.pageUri,
                         pageParent: item.item.page,
                         pageName: item.item.title,
                         pageIcon: item.item.icon,
                         customListId: item.item.id,
-                        color: item.item.colorScreen
-                    }
-                    if (this.config.setting[item.item.page] && this.config.setting[item.item.page]["customCaseList"]) {
-                        this.settings = this.config.setting[item.item.page]["customCaseList"][item.item.id];
-                    } else {
-                        this.settings = {};
+                        color: item.item.colorScreen,
+                        settings: this.settings
                     }
+                    
                 }
                 if (this.page === this.lastPage
                     && this.$refs["component"]
diff --git a/resources/assets/js/home/Inbox/Inbox.vue b/resources/assets/js/home/Inbox/Inbox.vue
index ad6743867..42155e9b7 100644
--- a/resources/assets/js/home/Inbox/Inbox.vue
+++ b/resources/assets/js/home/Inbox/Inbox.vue
@@ -376,16 +376,7 @@ export default {
         type: "normal",
         id: this.id
       });
-    },  
-    filters: function (val) {
-      this.$emit("updateSettings", {
-        data: val,
-        key: "filters",
-        parent: this.page,
-        type: "normal",
-        id: this.id
-      });
-    },
+    }
   },
   computed: {
     /**
@@ -621,8 +612,41 @@ export default {
       });
     },
     onRemoveFilter(data) {},
+    /**
+     * Prepare the data to be updated
+     * @param {object} data
+     */
+    prepareAndUpdate(data) {
+        let canUpdate = false,
+            newFilters = [];
+        data.params.forEach(item =>  {
+            const container  = {...item};
+            container.autoShow = false;
+            if (item.value !== "") {
+                newFilters.push(container);
+                canUpdate = true;
+            }
+        });
+        if (data.params.length == 0) {
+          canUpdate = true;
+        } 
+        if (canUpdate) {
+          this.$emit("updateSettings", {
+            data: newFilters,
+            key: "filters",
+            parent: this.page,
+            type: "normal",
+            id: this.id
+          });
+        }
+    },
+    /**
+     * Update event handler
+     * @param {object} data
+     */
     onUpdateFilters(data) {
       this.filters = data.params;
+      this.prepareAndUpdate(data);
       if (data.refresh) {
         this.$nextTick(() => {
           if (this.typeView === "GRID") {
diff --git a/resources/assets/js/home/MyCases/MyCases.vue b/resources/assets/js/home/MyCases/MyCases.vue
index 2bdf5adb8..a424d961a 100644
--- a/resources/assets/js/home/MyCases/MyCases.vue
+++ b/resources/assets/js/home/MyCases/MyCases.vue
@@ -251,16 +251,7 @@ export default {
                 type: "normal",
                 id: this.id
             });
-        },  
-        filters: function (val) {
-            this.$emit("updateSettings", {
-                data: val,
-                key: "filters",
-                parent: this.page,
-                type: "normal",
-                id: this.id
-            });
-        },
+        }
     },
     computed: {
         /**
@@ -666,8 +657,37 @@ export default {
             });
         },
         onRemoveFilter(data) {},
+        /**
+         * Prepare the data to be updated
+         * @param {object} data
+         */
+        prepareAndUpdate(data) {
+            let canUpdate = false,
+                newFilters = [];
+            data.params.forEach(item =>  {
+                const container  = {...item};
+                container.autoShow = false;
+                if (item.value !== "") {
+                    newFilters.push(container);
+                    canUpdate = true;
+                }
+            });
+            if (data.params.length == 0) {
+            canUpdate = true;
+            } 
+            if (canUpdate) {
+            this.$emit("updateSettings", {
+                data: newFilters,
+                key: "filters",
+                parent: this.page,
+                type: "normal",
+                id: this.id
+            });
+            }
+        },
         onUpdateFilters(data) {
             this.filters = data.params;
+            this.prepareAndUpdate(data);
             if (data.refresh) {
                 this.$nextTick(() => {
                     this.$refs["vueTable"].getData();
diff --git a/resources/assets/js/home/Paused/Paused.vue b/resources/assets/js/home/Paused/Paused.vue
index c19daa7cf..16d42471b 100644
--- a/resources/assets/js/home/Paused/Paused.vue
+++ b/resources/assets/js/home/Paused/Paused.vue
@@ -375,16 +375,7 @@ export default {
         type: "normal",
         id: this.id
       });
-    },  
-    filters: function (val) {
-      this.$emit("updateSettings", {
-        data: val,
-        key: "filters",
-        parent: this.page,
-        type: "normal",
-        id: this.id
-      });
-    },
+    }
   },
   computed: {
     /**
@@ -619,8 +610,41 @@ export default {
       this.$refs["modal-unpause-case"].show();
     },
     onRemoveFilter(data) {},
+    /**
+     * Prepare the data to be updated
+     * @param {object} data
+     */
+    prepareAndUpdate(data) {
+        let canUpdate = false,
+            newFilters = [];
+        data.params.forEach(item =>  {
+            const container  = {...item};
+            container.autoShow = false;
+            if (item.value !== "") {
+                newFilters.push(container);
+                canUpdate = true;
+            }
+        });
+        if (data.params.length == 0) {
+          canUpdate = true;
+        } 
+        if (canUpdate) {
+          this.$emit("updateSettings", {
+            data: newFilters,
+            key: "filters",
+            parent: this.page,
+            type: "normal",
+            id: this.id
+          });
+        }
+    },
+    /**
+     * Update event handler
+     * @param {object} data
+     */
     onUpdateFilters(data) {
       this.filters = data.params;
+      this.prepareAndUpdate(data);
       if (data.refresh) {
         this.$nextTick(() => {
           if (this.typeView === "GRID") {
diff --git a/resources/assets/js/home/Unassigned/Unassigned.vue b/resources/assets/js/home/Unassigned/Unassigned.vue
index d856e93d7..22b78b6a6 100644
--- a/resources/assets/js/home/Unassigned/Unassigned.vue
+++ b/resources/assets/js/home/Unassigned/Unassigned.vue
@@ -367,16 +367,7 @@ export default {
         type: "normal",
         id: this.id
       });
-    },  
-    filters: function (val) {
-      this.$emit("updateSettings", {
-        data: val,
-        key: "filters",
-        parent: this.page,
-        type: "normal",
-        id: this.id
-      });
-    },
+    }
   },
   computed: {
     /**
@@ -589,10 +580,41 @@ export default {
       });
     },
     onRemoveFilter(data) {},
+    /**
+     * Prepare the data to be updated
+     * @param {object} data
+     */
+    prepareAndUpdate(data) {
+        let canUpdate = false,
+            newFilters = [];
+        data.params.forEach(item =>  {
+            const container  = {...item};
+            container.autoShow = false;
+            if (item.value !== "") {
+                newFilters.push(container);
+                canUpdate = true;
+            }
+        });
+        if (data.params.length == 0) {
+          canUpdate = true;
+        } 
+        if (canUpdate) {
+          this.$emit("updateSettings", {
+            data: newFilters,
+            key: "filters",
+            parent: this.page,
+            type: "normal",
+            id: this.id
+          });
+        }
+    },
+    /**
+     * Update event handler
+     * @param {object} data
+     */
     onUpdateFilters(data) {
-      if (data.params) {
-        this.filters = data.params;
-      }
+      this.filters = data.params;
+      this.prepareAndUpdate(data);
       if (data.refresh) {
         this.$nextTick(() => {
           if (this.typeView === "GRID") {