diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCard.vue b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
index c94a7a0e7..c0d9c1ac2 100644
--- a/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="pm-vue-card">
-    <div class="card pm-vue-card-inside" style="width: 20rem">
+    <div class="card pm-vue-card-inside" style="width: 20rem" @dblclick="dblClick">
       <div class="card-body">
         <slot> </slot>
       </div>
@@ -11,7 +11,7 @@
 <script>
 export default {
   name: "VueCardView",
-  props: ["columns", "item"],
+  props: ["options", "item"],
   data() {
     return {};
   },
@@ -19,6 +19,9 @@ export default {
     classBtn(cls) {
       return "btn btn-slim btn-force-radius v-btn-header " + cls;
     },
+    dblClick(event){
+      this.options.dblClick(event, this.item, this.options);
+    }
   },
 };
 </script>
diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue b/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
index 26c4ed368..34d9d176c 100644
--- a/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
@@ -5,7 +5,7 @@
         class="pm-vue-card-view-body"
         :style="{height: height + 'px'}"
       >
-        <vue-card v-for="item in data" :key="item.id">
+        <vue-card v-for="item in data" :key="item.id" :item="item" :options="options">
           <slot
             v-for="column in options.columns"
             :name="column"
diff --git a/resources/assets/js/components/dataViews/vueListView/VueList.vue b/resources/assets/js/components/dataViews/vueListView/VueList.vue
index 759f3a967..f420b8cb9 100644
--- a/resources/assets/js/components/dataViews/vueListView/VueList.vue
+++ b/resources/assets/js/components/dataViews/vueListView/VueList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="pm-vue-list">
-    <div class="card pm-vue-list-inside">
+    <div class="card pm-vue-list-inside" @dblclick.prevent="dblClick">
       <div class="card-body">
         <slot> </slot>
       </div>
@@ -11,7 +11,7 @@
 <script>
 export default {
   name: "VueCardView",
-  props: ["columns", "item"],
+  props: ["item","options"],
   data() {
     return {};
   },
@@ -19,6 +19,9 @@ export default {
     classBtn(cls) {
       return "btn btn-slim btn-force-radius v-btn-header " + cls;
     },
+    dblClick(event){
+      this.options.dblClick(event, this.item, this.options);
+    }
   },
 };
 </script>
diff --git a/resources/assets/js/components/dataViews/vueListView/VueListView.vue b/resources/assets/js/components/dataViews/vueListView/VueListView.vue
index 71fd252ae..130fb40e8 100644
--- a/resources/assets/js/components/dataViews/vueListView/VueListView.vue
+++ b/resources/assets/js/components/dataViews/vueListView/VueListView.vue
@@ -5,7 +5,7 @@
         class="pm-vue-list-view-body"
         :style="{height: height + 'px'}"
       >
-        <vue-list v-for="item in data" :key="item.id">
+        <vue-list v-for="item in data" :key="item.id" :item="item" :options="options"> 
           <slot
             v-for="column in options.columns"
             :name="column"
diff --git a/resources/assets/js/home/Draft/Draft.vue b/resources/assets/js/home/Draft/Draft.vue
index 6f8e8f01b..ff081e560 100644
--- a/resources/assets/js/home/Draft/Draft.vue
+++ b/resources/assets/js/home/Draft/Draft.vue
@@ -41,9 +41,9 @@
         </div>
       </div>
     </v-server-table>
-        <VueCardView
+    <VueCardView
       v-if="typeView === 'CARD'"
-      :options="optionsVueCardView"
+      :options="optionsVueView"
       ref="vueCardView"
     >
       <div slot="detail" slot-scope="props">
@@ -100,7 +100,7 @@
     </VueCardView>
     <VueListView
       v-if="typeView === 'LIST'"
-      :options="optionsVueCardView"
+      :options="optionsVueView"
       ref="vueListView"
     >
       <div slot="detail" slot-scope="props">
@@ -461,7 +461,15 @@ export default {
      * update view in component
      */
     updateView(){
-      this.$refs["vueTable"].getData();
+      if (this.typeView === "GRID") {
+        this.$refs["vueTable"].getData();
+      }
+      if (this.typeView === "CARD") {
+        this.$refs["vueCardView"].getData();
+      }
+      if (this.typeView === "LIST") {
+        this.$refs["vueListView"].getData();
+      }
     },
     /**
      * Show options in the ellipsis 
diff --git a/resources/assets/js/home/Draft/defaultMixins.js b/resources/assets/js/home/Draft/defaultMixins.js
index f3193f9e6..5f998e3db 100644
--- a/resources/assets/js/home/Draft/defaultMixins.js
+++ b/resources/assets/js/home/Draft/defaultMixins.js
@@ -32,8 +32,11 @@ export default {
           },
         ],
       },
-      optionsVueCardView: {
+      optionsVueView: {
         limit: 10,
+        dblClick:(event, item, options)=>{
+          this.openCase(item);
+        },
         headings: {
           detail: "",
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
@@ -56,10 +59,10 @@ export default {
           "task"
         ],
         requestFunction(data) {
-          return that.getCasesVueList(data);
+          return that.getCases(data);
         },
         requestFunctionViewMore(data) {
-          return that.getCasesVueListViewMore(data);
+          return that.getCasesViewMore(data);
         }
       }
     }
@@ -71,7 +74,7 @@ export default {
     /**
     * Get cases for Vue Card View
     */
-    getCasesVueList(data) {
+    getCases(data) {
       let that = this,
         dt,
         start = 0,
@@ -104,7 +107,7 @@ export default {
     /**
     * Get cases for Vue Card View
     */
-    getCasesVueListViewMore(data) {
+    getCasesViewMore(data) {
       let that = this,
         dt,
         paged,
diff --git a/resources/assets/js/home/Inbox/Todo.vue b/resources/assets/js/home/Inbox/Todo.vue
index 5aceed80c..f308ea42c 100644
--- a/resources/assets/js/home/Inbox/Todo.vue
+++ b/resources/assets/js/home/Inbox/Todo.vue
@@ -53,7 +53,7 @@
     </v-server-table>
     <VueCardView
       v-if="typeView === 'CARD'"
-      :options="optionsVueCardView"
+      :options="optionsVueView"
       ref="vueCardView"
     >
       <div slot="detail" slot-scope="props">
@@ -110,7 +110,7 @@
     </VueCardView>
     <VueListView
       v-if="typeView === 'LIST'"
-      :options="optionsVueListView"
+      :options="optionsVueView"
       ref="vueListView"
     >
       <div slot="detail" slot-scope="props">
@@ -484,7 +484,15 @@ export default {
      * update view in component
      */
     updateView() {
-      this.$refs["vueTable"].getData();
+      if (this.typeView === "GRID") {
+        this.$refs["vueTable"].getData();
+      }
+      if (this.typeView === "CARD") {
+        this.$refs["vueCardView"].getData();
+      }
+      if (this.typeView === "LIST") {
+        this.$refs["vueListView"].getData();
+      }
     },
   },
 };
diff --git a/resources/assets/js/home/Inbox/defaultMixins.js b/resources/assets/js/home/Inbox/defaultMixins.js
index ed071edac..bdcd6a7a6 100644
--- a/resources/assets/js/home/Inbox/defaultMixins.js
+++ b/resources/assets/js/home/Inbox/defaultMixins.js
@@ -32,8 +32,11 @@ export default {
           },
         ],
       },
-      optionsVueCardView: {
+      optionsVueView: {
         limit: 10,
+        dblClick:(event, item, options)=>{
+          this.openCase(item);
+        },
         headings: {
           detail: "",
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
@@ -56,40 +59,10 @@ export default {
           "task"
         ],
         requestFunction(data) {
-          return that.getCasesVueCard(data);
+          return that.getCases(data);
         },
         requestFunctionViewMore(data) {
-          return that.getCasesVueCardViewMore(data);
-        }
-      },
-      optionsVueListView: {
-        limit: 10,
-        headings: {
-          detail: "",
-          case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
-          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")
-        },
-        columns: [
-          "detail",
-          "case_number",
-          "case_title",
-          "process_name",
-          "due_date",
-          "delegation_date",
-          "priority",
-          "task"
-        ],
-        requestFunction(data) {
-          return that.getCasesVueCard(data);
-        },
-        requestFunctionViewMore(data) {
-          return that.getCasesVueCardViewMore(data);
+          return that.getCasesViewMore(data);
         }
       }
     }
@@ -101,7 +74,7 @@ export default {
     /**
     * Get cases for Vue Card View
     */
-    getCasesVueCard(data) {
+    getCases(data) {
       let that = this,
         dt,
         start = 0,
@@ -132,7 +105,7 @@ export default {
     /**
     * Get cases for Vue Card View
     */
-    getCasesVueCardViewMore(data) {
+    getCasesViewMore(data) {
       let that = this,
         dt,
         paged,
diff --git a/resources/assets/js/home/Paused/Paused.vue b/resources/assets/js/home/Paused/Paused.vue
index e7ae0e2c5..3a4afba66 100644
--- a/resources/assets/js/home/Paused/Paused.vue
+++ b/resources/assets/js/home/Paused/Paused.vue
@@ -53,7 +53,7 @@
     </v-server-table>
     <VueCardView
       v-if="typeView === 'CARD'"
-      :options="optionsVueCardView"
+      :options="optionsVueView"
       ref="vueCardView"
     >
       <div slot="detail" slot-scope="props">
@@ -110,7 +110,7 @@
     </VueCardView>
     <VueListView
       v-if="typeView === 'LIST'"
-      :options="optionsVueCardView"
+      :options="optionsVueView"
       ref="vueListView"
     >
       <div slot="detail" slot-scope="props">
@@ -492,7 +492,15 @@ export default {
      * update view in component
      */
     updateView(){
-      this.$refs["vueTable"].getData();
+      if (this.typeView === "GRID") {
+        this.$refs["vueTable"].getData();
+      }
+      if (this.typeView === "CARD") {
+        this.$refs["vueCardView"].getData();
+      }
+      if (this.typeView === "LIST") {
+        this.$refs["vueListView"].getData();
+      }
     },
     /**
      * Show options in the ellipsis 
diff --git a/resources/assets/js/home/Paused/defaultMixins.js b/resources/assets/js/home/Paused/defaultMixins.js
index 29ea6a09e..a8bcda545 100644
--- a/resources/assets/js/home/Paused/defaultMixins.js
+++ b/resources/assets/js/home/Paused/defaultMixins.js
@@ -32,8 +32,11 @@ export default {
           },
         ],
       },
-      optionsVueCardView: {
+      optionsVueView: {
         limit: 10,
+        dblClick:(event, item, options)=>{
+          this.openCase(item);
+        },
         headings: {
           detail: "",
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
@@ -56,10 +59,10 @@ export default {
           "task"
         ],
         requestFunction(data) {
-          return that.getCasesVueList(data);
+          return that.getCases(data);
         },
         requestFunctionViewMore(data) {
-          return that.getCasesVueListViewMore(data);
+          return that.getCasesViewMore(data);
         }
       }
     }
@@ -71,7 +74,7 @@ export default {
     /**
     * Get cases for Vue Card View
     */
-    getCasesVueList(data) {
+    getCases(data) {
       let that = this,
         dt,
         start = 0,
@@ -104,7 +107,7 @@ export default {
     /**
     * Get cases for Vue Card View
     */
-    getCasesVueListViewMore(data) {
+    getCasesViewMore(data) {
       let that = this,
         dt,
         paged,