diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 919b83298..ea7d81ac3 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -43,7 +43,7 @@ import MyDocuments from "./MyDocuments";
 import Todo from "./Inbox/Todo.vue";
 import Paused from "./Paused/Paused.vue";
 import Draft from "./Draft/Draft.vue";
-import Unassigned from "./Unassigned";
+import Unassigned from "./Unassigned/Unassigned.vue";
 import BatchRouting from "./BatchRouting";
 import CaseDetail from "./CaseDetail";
 import XCase from "./XCase";
diff --git a/resources/assets/js/home/Unassigned.vue b/resources/assets/js/home/Unassigned/Unassigned.vue
similarity index 66%
rename from resources/assets/js/home/Unassigned.vue
rename to resources/assets/js/home/Unassigned/Unassigned.vue
index 16e253169..07ed86ff7 100644
--- a/resources/assets/js/home/Unassigned.vue
+++ b/resources/assets/js/home/Unassigned/Unassigned.vue
@@ -8,8 +8,9 @@
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
+    <multiview-header :data="dataMultiviewHeader" />
     <v-server-table
-      :data="tableData"
+      v-if="typeView === 'GRID'"
       :columns="columns"
       :options="options"
       ref="vueTable"
@@ -46,23 +47,140 @@
         </div>
       </div>
     </v-server-table>
+    <VueCardView
+      v-if="typeView === 'CARD'"
+      :options="optionsVueList"
+      ref="vueCardView"
+    >
+      <div slot="detail" slot-scope="props">
+        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
+      <div slot="case_number" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-highlight"
+          >{{ props["headings"][props.column] }} : {{ 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="due_date" 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"]["DUE_DATE"] }}
+        </span>
+      </div>
+      <div slot="delegation_date" 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"]["DELEGATION_DATE"] }}
+        </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>
+    <VueListView
+      v-if="typeView === 'LIST'"
+      :options="optionsVueList"
+      ref="vueListView"
+    >
+      <div slot="detail" slot-scope="props">
+        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
+      <div slot="case_number" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-highlight"
+          >{{ props["headings"][props.column] }} : {{ 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="due_date" 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"]["DUE_DATE"] }}
+        </span>
+      </div>
+      <div slot="delegation_date" 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"]["DELEGATION_DATE"] }}
+        </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>
+    </VueListView>
     <ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
   </div>
 </template>
 
 <script>
-import HeaderCounter from "../components/home/HeaderCounter.vue";
-import ButtonFleft from "../components/home/ButtonFleft.vue";
-import ModalNewRequest from "./ModalNewRequest.vue";
-import TaskCell from "../components/vuetable/TaskCell.vue";
-import CasesFilter from "../components/search/CasesFilter";
-import ModalClaimCase from "./modal/ModalClaimCase.vue";
-import api from "./../api/index";
-import utils from "./../utils/utils";
-import Ellipsis from '../components/utils/ellipsis.vue';
+import HeaderCounter from "../../components/home/HeaderCounter.vue";
+import ButtonFleft from "../../components/home/ButtonFleft.vue";
+import ModalNewRequest from "../ModalNewRequest.vue";
+import TaskCell from "../../components/vuetable/TaskCell.vue";
+import CasesFilter from "../../components/search/CasesFilter";
+import ModalClaimCase from "../modal/ModalClaimCase.vue";
+import api from "../../api/index";
+import utils from "../../utils/utils";
+import Ellipsis from '../../components/utils/ellipsis.vue';
+import MultiviewHeader from "../../components/headers/MultiviewHeader.vue";
+import VueCardView from "../../components/dataViews/vueCardView/VueCardView.vue";
+import VueListView from "../../components/dataViews/vueListView/VueListView.vue";
+import defaultMixins from "./defaultMixins";
 
 export default {
   name: "Unassigned",
+  mixins: [defaultMixins],
   components: {
     HeaderCounter,
     ButtonFleft,
@@ -71,6 +189,9 @@ export default {
     ModalClaimCase,
     CasesFilter,
     Ellipsis,
+    MultiviewHeader,
+    VueCardView,
+    VueListView
   },
   props: ["defaultOption", "filters"],
   data() {
@@ -93,10 +214,8 @@ export default {
         "priority",
         "actions",
       ],
-      tableData: [],
       options: {
         filterable: false,
-        sendInitialRequest: false,
         headings: {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           case_title: this.$i18n.t("ID_CASE_TITLE"),
@@ -327,7 +446,15 @@ export default {
       }
       if (data.refresh) {
         this.$nextTick(() => {
-          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/Unassigned/defaultMixins.js b/resources/assets/js/home/Unassigned/defaultMixins.js
new file mode 100644
index 000000000..be3c636a9
--- /dev/null
+++ b/resources/assets/js/home/Unassigned/defaultMixins.js
@@ -0,0 +1,136 @@
+import api from "../../api/index";
+export default {
+  data() {
+    let that = this;
+    return {
+      typeView: "GRID",
+      dataMultiviewHeader: {
+        actions: [
+          {
+            id: "view-grid",
+            title: "Grid",
+            onClick(action) {
+              that.typeView = "GRID";
+            },
+            icon: "fas fa-table",
+          },
+          {
+            id: "view-list",
+            title: "List",
+            onClick(action) {
+              that.typeView = "LIST";
+            },
+            icon: "fas fa-list",
+          },
+          {
+            id: "view-card",
+            title: "Card",
+            onClick(action) {
+              that.typeView = "CARD";
+            },
+            icon: "fas fa-th",
+          },
+        ],
+      },
+      optionsVueList: {
+        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.getCases(data);
+        },
+        requestFunctionViewMore(data) {
+          return that.getCasesViewMore(data);
+        }
+      }
+    }
+  },
+  created: function () {
+
+  },
+  methods: {
+    /**
+    * Get cases for Vue Card View
+    */
+    getCases(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
+          .unassigned(filters)
+          .then((response) => {
+            dt = that.formatDataResponse(response.data.data);
+            resolutionFunc({
+              data: dt,
+              count: response.data.total,
+            });
+          })
+          .catch((e) => {
+            rejectionFunc(e);
+          });
+      });
+    },
+    /**
+    * Get cases for Vue Card View
+    */
+    getCasesViewMore(data) {
+      let that = this,
+        dt,
+        paged,
+        limit = data.limit,
+        start = data.page === 1 ? 0 : limit * (data.page - 1),
+        filters = {};
+      paged = start + "," + limit;
+
+      filters = {
+        paged: paged,
+      };
+      _.forIn(this.filters, function (item, key) {
+        filters[item.filterVar] = item.value;
+      });
+      return new Promise((resolutionFunc, rejectionFunc) => {
+        api.cases
+          .unassigned(filters)
+          .then((response) => {
+            dt = that.formatDataResponse(response.data.data);
+            resolutionFunc({
+              data: dt,
+              count: response.data.total,
+            });
+          })
+          .catch((e) => {
+            rejectionFunc(e);
+          });
+      });
+    },
+  }
+}
\ No newline at end of file