diff --git a/resources/assets/js/api/Cases.js b/resources/assets/js/api/Cases.js
index bd0793142..392ef762e 100644
--- a/resources/assets/js/api/Cases.js
+++ b/resources/assets/js/api/Cases.js
@@ -95,6 +95,16 @@ export let cases = {
             window.config.SYS_URI +
             `appProxy/getNotesList`, params);
     },
+    pendingtask(data){
+        return axios.get(window.config.SYS_SERVER +
+            '/api/1.0/' +
+            window.config.SYS_WORKSPACE +
+            '/home/' + data.APP_NUMBER + '/pending-tasks', {
+                headers: {
+                    'Authorization': 'Bearer ' + window.config.SYS_CREDENTIALS.accessToken
+                }
+            });
+    },
     start(dt) {
         var params = new URLSearchParams();
         params.append('action', 'startCase');
diff --git a/resources/assets/js/home/AdvancedSearch.vue b/resources/assets/js/home/AdvancedSearch.vue
index fc7b7b6c3..bd6645f7a 100644
--- a/resources/assets/js/home/AdvancedSearch.vue
+++ b/resources/assets/js/home/AdvancedSearch.vue
@@ -347,6 +347,7 @@ export default {
             this.$parent.dataCase = {
                 APP_UID: item.APP_UID,
                 DEL_INDEX: item.DEL_INDEX,
+                APP_NUMBER: item.CASE_NUMBER
             };
             this.$parent.page = "case-detail";
         },
diff --git a/resources/assets/js/home/CaseDetail.vue b/resources/assets/js/home/CaseDetail.vue
index 79ee69d1d..4c5343549 100644
--- a/resources/assets/js/home/CaseDetail.vue
+++ b/resources/assets/js/home/CaseDetail.vue
@@ -17,11 +17,12 @@
             :data="tableData"
             :columns="columns"
             :options="options"
+            v-show="showTable"
             ref="vueTable"
             style="height: 120px"
           >
             <div slot="task" slot-scope="props">
-              {{ props.row.TASK }}
+              <TaskCell :data="props.row.TASK" />
             </div>
             <div slot="case_title" slot-scope="props">
               {{ props.row.CASE_TITLE }}
@@ -37,8 +38,6 @@
             </div>
             <div slot="actions">
               <div class="btn-default">
-                <i class="fas fa-comments"></i>
-                <span class="badge badge-light">9</span>
                 <span class="sr-only">Continue</span>
               </div>
             </div>
@@ -93,6 +92,7 @@ import TabsCaseDetail from "../home/TabsCaseDetail.vue";
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalCancelCase from "../home/modal/ModalCancelCase.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
+import TaskCell from "../components/vuetable/TaskCell.vue";
 
 import Api from "../api/index";
 export default {
@@ -107,6 +107,7 @@ export default {
     ModalCancelCase,
     ButtonFleft,
     ModalNewRequest,
+    TaskCell
   },
   props: {},
   data() {
@@ -127,15 +128,8 @@ export default {
         "due_date",
         "actions",
       ],
-      tableData: [
-        {
-          task: "Approve Art",
-          case_title: "Case Title A",
-          assignee: "User 1",
-          status: "To Do",
-          due_date: "3 days",
-        },
-      ],
+      showTable: true,
+      tableData: [],
       options: {
         headings: {
           task: this.$i18n.t("ID_TASK"),
@@ -154,6 +148,9 @@ export default {
           programmatic: false,
         },
         filterable: false,
+        requestFunction() {
+          return this.$parent.$parent.getCasesForVueTable();
+        },
       },
       dataCaseSummary: null,
       dataCaseSummaryTab: null,
@@ -384,6 +381,43 @@ export default {
 
       this.dataCaseSummaryTab = sections;
     },
+    getCasesForVueTable() {
+      let that = this,
+        dt;
+      return new Promise((resolutionFunc, rejectionFunc) => {
+        Api.cases
+        .pendingtask(that.$parent.dataCase)
+        .then((response) => {
+          dt = that.formatDataResponse(response.data);
+          resolutionFunc({
+            data: dt,
+            count: response.data.length
+          });
+          that.showTable = response.data.length > 0 ? true : false;
+        })
+        .catch((err) => {
+          throw new Error(err);
+        });
+      });
+    },
+    formatDataResponse(response) {
+      let data = [];
+      _.forEach(response, (v) => {
+        data.push({
+          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,
+          DUE_DATE: v.DEL_TASK_DUE_DATE,
+          TASK_COLOR: v.TAS_COLOR_LABEL
+        });        
+      });
+      return data;
+    }
   },
 };
 </script>
diff --git a/resources/assets/js/home/Draft.vue b/resources/assets/js/home/Draft.vue
index 847d86ae6..8776beec3 100644
--- a/resources/assets/js/home/Draft.vue
+++ b/resources/assets/js/home/Draft.vue
@@ -219,6 +219,7 @@ export default {
           DEL_INDEX: item.DEL_INDEX,
           PRO_UID: item.PRO_UID,
           TAS_UID: item.TAS_UID,
+          APP_NUMBER: item.CASE_NUMBER
         });
         that.$emit("onUpdatePage", "case-detail");
       });
diff --git a/resources/assets/js/home/Paused.vue b/resources/assets/js/home/Paused.vue
index 4e23b58a5..a614ecd5e 100644
--- a/resources/assets/js/home/Paused.vue
+++ b/resources/assets/js/home/Paused.vue
@@ -233,6 +233,7 @@ export default {
           DEL_INDEX: item.DEL_INDEX,
           PRO_UID: item.PRO_UID,
           TAS_UID: item.TAS_UID,
+          APP_NUMBER: item.CASE_NUMBER
         });
         that.$emit("onUpdatePage", "case-detail");
       });
diff --git a/resources/assets/js/home/Todo.vue b/resources/assets/js/home/Todo.vue
index 3b269ae72..71d395c72 100644
--- a/resources/assets/js/home/Todo.vue
+++ b/resources/assets/js/home/Todo.vue
@@ -241,6 +241,7 @@ export default {
           DEL_INDEX: item.DEL_INDEX,
           PRO_UID: item.PRO_UID,
           TAS_UID: item.TAS_UID,
+          APP_NUMBER: item.CASE_NUMBER
         });
         that.$emit("onUpdatePage", "case-detail");
       });
diff --git a/resources/assets/js/home/Unassigned.vue b/resources/assets/js/home/Unassigned.vue
index 7710d47b7..25a4b963e 100644
--- a/resources/assets/js/home/Unassigned.vue
+++ b/resources/assets/js/home/Unassigned.vue
@@ -246,6 +246,7 @@ export default {
           DEL_INDEX: item.DEL_INDEX,
           PRO_UID: item.PRO_UID,
           TAS_UID: item.TAS_UID,
+          APP_NUMBER: item.CASE_NUMBER
         });
         that.$emit("onUpdatePage", "case-detail");
       });