diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCard.vue b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
index ba086a600..6c330f762 100644
--- a/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
@@ -2,14 +2,7 @@
   <div class="pm-vue-card">
     <div class="card" style="width: 18rem">
       <div class="card-body">
-        <h5 class="card-title">Card title</h5>
-        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
-        <span v-for="column in columns" :key="column">
-          <slot :name="column" :item="item"></slot>
-        </span>
-
-        <a href="#" class="card-link">Card link</a>
-        <a href="#" class="card-link">Another link</a>
+        <slot> </slot>
       </div>
     </div>
   </div>
@@ -21,18 +14,6 @@ export default {
   props: ["columns", "item"],
   data() {
     return {
-      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"),
-        actions: "",
-      },
     };
   },
   methods: {
diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue b/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
index 8f5c12c2c..94d42edd7 100644
--- a/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
@@ -1,8 +1,16 @@
 <template>
   <div class="pm-vue-card-view">
     <div class="pm-vue-card-view-container">
-      <div v-for="item in data" :columns="columns" :key="item" :data="item">
-        asdasd {{item}}
+      <div>
+        <vue-card v-for="item in data" :key="item.id">
+          <slot
+            v-for="column in options.columns"
+            :name="column"
+            :item="item"
+            :column="column"
+            :headings="options.headings"
+          ></slot>
+        </vue-card>
       </div>
     </div>
   </div>
@@ -10,29 +18,21 @@
 
 <script>
 import VueCard from "./VueCard.vue";
+import DefaultMixins from "./VueCardViewMixins";
 export default {
   name: "VueCardView",
+  mixins: [DefaultMixins],
   components: {
     VueCard,
   },
-  props: ["data"],
+  props: ["options"],
   data() {
     return {
-      columns: [
-        "detail",
-        "case_number",
-        "case_title",
-        "process_name",
-        "task",
-        "due_date",
-        "delegation_date",
-        "priority",
-        "actions",
-      ],
+ 
     };
   },
-  mounted(){
-    console.log(this.data);
+  mounted() {
+
   },
   methods: {
     classBtn(cls) {
diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js b/resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js
index e69de29bb..bb8438e2f 100644
--- a/resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js
@@ -0,0 +1,41 @@
+export default {
+  data() {
+    let that = this;
+    return {
+      config: {
+        page: 1
+      },
+      data: []
+    }
+  },
+  mounted: function () {
+    console.log("jonas");
+    this.getData();
+  },
+  methods: {
+    /**
+     * Get data similar to vue Table
+     */
+    getData() {
+      let options = _.extend({}, this.config, this.options),
+        that = this;
+      console.log("GETTTTTTTTTT");
+
+      this.options.requestFunction(options)
+        .then((data) => {
+          console.log("jonas vue car view");
+          that.data = data.data;
+        })
+        .catch(() => {
+
+        });
+    },
+    /**
+     * Get data when press the button more view
+     */
+    viewMore() {
+
+    }
+  }
+}
+
diff --git a/resources/assets/js/home/Inbox/Todo.vue b/resources/assets/js/home/Inbox/Todo.vue
index acfc8150a..05eba261b 100644
--- a/resources/assets/js/home/Inbox/Todo.vue
+++ b/resources/assets/js/home/Inbox/Todo.vue
@@ -51,7 +51,20 @@
         </button>
       </div>
     </v-server-table>
-    <VueCardView v-if="typeView === 'CARD'" :data="tableData">
+    <VueCardView v-if="typeView === 'CARD'" :options="optionsVueCardView">
+      <div slot="case_number" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark">{{ props["headings"][props.column]}} :</span> <span class="v-card-text-light">{{ props["item"]["CASE_NUMBER"]}} </span>
+      </div>
+      <div slot="case_title" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark">{{ props["headings"][props.column]}} :</span> <span class="v-card-text-light">{{ props["item"]["CASE_TITLE"]}} </span>
+      </div>
+      <div slot="process_name" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark">{{ props["headings"][props.column]}} :</span> <span class="v-card-text-light">{{ props["item"]["PROCESS_NAME"]}} </span>
+      </div>
+      <div slot="task" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark">{{ props["headings"][props.column]}} :</span> <span class="v-card-text-light"> <TaskCell :data="props.item.TASK" /> </span>
+      </div>
+      
 
     </VueCardView>
   </div>
@@ -377,4 +390,22 @@ export default {
 .VueTables__limit {
   display: none;
 }
+
+.v-card-text-dark{
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.5;
+  display: inline-block;
+}
+
+.v-card-text-light{
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  display: inline-block;
+}
+
+.v-card-text{
+  line-height: 0;
+}
 </style>
\ No newline at end of file
diff --git a/resources/assets/js/home/Inbox/defaultMixins.js b/resources/assets/js/home/Inbox/defaultMixins.js
index 26eea2676..f70575eab 100644
--- a/resources/assets/js/home/Inbox/defaultMixins.js
+++ b/resources/assets/js/home/Inbox/defaultMixins.js
@@ -1,3 +1,4 @@
+import api from "../../api/index";
 export default {
   data() {
     let that = this;
@@ -30,6 +31,35 @@ export default {
             icon: "fas fa-th",
           },
         ],
+      },
+      optionsVueCardView: {
+        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"),
+          actions: "",
+        },
+        columns: [
+          "detail",
+          "case_number",
+          "case_title",
+          "process_name",
+          "task",
+          "due_date",
+          "delegation_date",
+          "priority",
+          "actions",
+        ],
+        requestFunction(data){
+          return that.getCasesVueCarView(data);
+        }
       }
     }
   },
@@ -37,7 +67,37 @@ export default {
 
   },
   methods: {
+    /**
+    * Get cases for Vue Card View
+    */
+    getCasesVueCarView(data) {
+      let that = this,
+        dt,
+        start = 0,
+        limit = data.limit,
+        filters = {};
+      filters = {
+        paged: "0," + limit,
+      };
 
+      _.forIn(this.filters, function (item, key) {
+        filters[item.filterVar] = item.value;
+      });
+      return new Promise((resolutionFunc, rejectionFunc) => {
+        api.cases
+          .todo(filters)
+          .then((response) => {
+            dt = that.formatDataResponse(response.data.data);
+            resolutionFunc({
+              data: dt,
+              count: response.data.total,
+            });
+          })
+          .catch((e) => {
+            rejectionFunc(e);
+          });
+      });
+    },
   }
 }