diff --git a/package-lock.json b/package-lock.json
index b364f2218..3ba4535e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10929,11 +10929,6 @@
         "vue-pagination-2": "^3.0"
       }
     },
-    "vue-tabs-component": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/vue-tabs-component/-/vue-tabs-component-1.5.0.tgz",
-      "integrity": "sha512-ld4p+hv49Fimw+zv/7GQqMhbjAHjpbWF3UiJtmMaSnvLKbsB1ysfs9dQH0SZ8NvdYpqqKay/VLIqR9yXgse1Sg=="
-    },
     "vue-template-compiler": {
       "version": "2.6.12",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",
diff --git a/package.json b/package.json
index 50bb5479a..1be50e64c 100644
--- a/package.json
+++ b/package.json
@@ -61,4 +61,4 @@
     "vuetify": "^1.1.4",
     "web-animations-js": "^2.3.2"
   }
-}
\ No newline at end of file
+}
diff --git a/resources/assets/js/api/Cases.js b/resources/assets/js/api/Cases.js
index b4b244afe..eec3dd172 100644
--- a/resources/assets/js/api/Cases.js
+++ b/resources/assets/js/api/Cases.js
@@ -87,8 +87,8 @@ export let cases = {
         var params = new FormData();
         params.append('appUid', data.APP_UID);
         params.append('delIndex', data.DEL_INDEX);
-        params.append('pro', "6161281705fc91129328391060454559");
-        params.append('tas', "2076843175fc911573db050062710755");
+        params.append('pro', data.PRO_UID);
+        params.append('tas', data.TAS_UID);
         params.append('start', "0");
         params.append('limit', "30");
         return axios.post(window.config.SYS_SERVER +
@@ -104,6 +104,11 @@ export let cases = {
             window.config.SYS_URI +
             `cases/casesStartPage_Ajax.php`, params);
     },
+    open(data) {
+        return axios.get(window.config.SYS_SERVER +
+            window.config.SYS_URI +
+            `cases/open?APP_UID=${data.APP_UID}&DEL_INDEX=${data.DEL_INDEX}&action=${data.ACTION}`);
+    },
     //remove this section
     search(data) {
         return new Promise((resolutionFunc, rejectionFunc) => {
diff --git a/resources/assets/js/components/home/caseDetail/CaseHistory.vue b/resources/assets/js/components/home/caseDetail/CaseHistory.vue
new file mode 100644
index 000000000..22884178d
--- /dev/null
+++ b/resources/assets/js/components/home/caseDetail/CaseHistory.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="card v-case-history">
+    <iframe
+      :width="width"
+      ref="IFrameCaseHistory"
+      frameborder="0"
+      :src="path"
+      :height="height"
+      allowfullscreen
+    ></iframe>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CaseHistory",
+  props: {
+    data: Object,
+  },
+  data() {
+    return {
+      height: "500px",
+      width: "100%",
+      diffHeight: 10,
+    };
+  },
+  computed: {
+    path() {
+      let url =
+        window.config.SYS_SERVER +
+        window.config.SYS_URI +
+        `cases/ajaxListener?action=caseHistory`;
+      return url;
+    },
+  },
+  mounted() {},
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.v-case-history {
+  font-size: 13px;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/components/home/caseDetail/ChangeLog.vue b/resources/assets/js/components/home/caseDetail/ChangeLog.vue
new file mode 100644
index 000000000..7587f1104
--- /dev/null
+++ b/resources/assets/js/components/home/caseDetail/ChangeLog.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="card v-case-history">
+    <iframe
+      :width="width"
+      ref="IFrameChangeLog"
+      frameborder="0"
+      :src="path"
+      :height="height"
+      allowfullscreen
+    ></iframe>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChangeLog",
+  props: {
+    data: Object,
+  },
+  data() {
+    return {
+      height: "500px",
+      width: "100%",
+      diffHeight: 10,
+    };
+  },
+  computed: {
+    path() {
+      let url =
+        window.config.SYS_SERVER +
+        window.config.SYS_URI +
+        `cases/ajaxListener?action=changeLogHistory`;
+      return url;
+    },
+  },
+  mounted() {},
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.v-case-history {
+  font-size: 13px;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/Draft.vue b/resources/assets/js/home/Draft.vue
index 02399322d..60beb0617 100644
--- a/resources/assets/js/home/Draft.vue
+++ b/resources/assets/js/home/Draft.vue
@@ -9,6 +9,11 @@
       :options="options"
       ref="vueTable"
     >
+      <div slot="detail" slot-scope="props">
+        <div class="btn-default" @click="openCaseDetail(props.row)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
       <div slot="case_number" slot-scope="props">
         {{ props.row.CASE_NUMBER }}
       </div>
@@ -57,6 +62,7 @@ export default {
         },
       },
       columns: [
+        "detail",
         "case_number",
         "case_title",
         "process_name",
@@ -73,6 +79,7 @@ export default {
           task: this.$i18n.t("ID_TASK"),
           priority: this.$i18n.t("ID_PRIORITY"),
           actions: "",
+          detail: "",
         },
         selectable: {
           mode: "single",
@@ -144,6 +151,10 @@ export default {
           DUE_DATE: v.DEL_TASK_DUE_DATE,
           DELEGATION_DATE: v.DEL_DELEGATE_DATE,
           PRIORITY: v.DEL_PRIORITY_LABEL,
+          PRO_UID: v.PRO_UID,
+          TAS_UID: v.TAS_UID,
+          DEL_INDEX: v.DEL_INDEX,
+          APP_UID: v.APP_UID,
         });
       });
       return data;
@@ -189,10 +200,28 @@ export default {
       this.$parent.dataCase = {
         APP_UID: item.APP_UID,
         DEL_INDEX: item.DEL_INDEX,
+        PRO_UID: item.PRO_UID,
+        TAS_UID: item.TAS_UID,
         ACTION: "draft",
       };
       this.$parent.page = "XCase";
     },
+    /**
+     * Open case detail
+     *
+     * @param {object} item
+     */
+    openCaseDetail(item) {
+      api.cases.open(_.extend({ ACTION: "todo" }, item)).then(() => {
+        this.$parent.dataCase = {
+          APP_UID: item.APP_UID,
+          DEL_INDEX: item.DEL_INDEX,
+          PRO_UID: item.PRO_UID,
+          TAS_UID: item.TAS_UID,
+        };
+        this.$parent.page = "case-detail";
+      });
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TabsCaseDetail.vue b/resources/assets/js/home/TabsCaseDetail.vue
index bdedb7215..20091af7e 100644
--- a/resources/assets/js/home/TabsCaseDetail.vue
+++ b/resources/assets/js/home/TabsCaseDetail.vue
@@ -4,24 +4,14 @@
       <tab :name="$t('ID_SUMMARY')">
         <PmCaseSummary :data="dataCaseSummary"> </PmCaseSummary>
       </tab>
-      <tab name="Second tab">
+      <tab :name="$t('ID_PROCESS_MAP')">
         <ProcessMap :data="dataCase"> </ProcessMap>
       </tab>
-      <tab name="Disabled tab" :is-disabled="true">
-        <h2 class="page-subtitle">Disabled tab</h2>
-        This content will be unavailable while :is-disabled prop set to true
+      <tab :name="$t('ID_CASE_HISTORY')">
+        <CaseHistory :data="dataCase"> </CaseHistory>
       </tab>
-      <tab id="oh-hi-mark" name="Custom fragment">
-        <h2 class="page-subtitle">Custom fragment</h2>
-        The hash that is appended to the url can be customized.
-      </tab>
-      <tab
-        prefix="<span class='prefix'>→</span>"
-        name="Prefix and suffix"
-        suffix="<span class='suffix'>4</span>"
-      >
-        <h2 class="page-subtitle">Prefix and suffix</h2>
-        A prefix and a suffix can be added — HTML allowed.
+      <tab :name="$t('ID_DYNAFORM_HISTORY')">
+        <ChangeLog :data="dataCase"> </ChangeLog>
       </tab>
     </tabs>
   </div>
@@ -32,6 +22,8 @@ import Tabs from "./../components/tabs/Tabs.vue";
 import Tab from "./../components/tabs/Tab.vue";
 import PmCaseSummary from "./../components/home/caseDetail/PmCaseSummary.vue";
 import ProcessMap from "./../components/home/caseDetail/ProcessMap.vue";
+import CaseHistory from "./../components/home/caseDetail/CaseHistory.vue";
+import ChangeLog from "./../components/home/caseDetail/ChangeLog.vue";
 import Api from "../api/index";
 
 export default {
@@ -41,6 +33,8 @@ export default {
     Tab,
     ProcessMap,
     PmCaseSummary,
+    CaseHistory,
+    ChangeLog,
   },
   props: {
     dataCase: Object,
diff --git a/resources/assets/js/home/Todo.vue b/resources/assets/js/home/Todo.vue
index c066d6b02..5816728d5 100644
--- a/resources/assets/js/home/Todo.vue
+++ b/resources/assets/js/home/Todo.vue
@@ -45,7 +45,7 @@
       </div>
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
-        <button class="settings-radio" @click="openCase(props)">
+        <button class="settings-radio" @click="openCase(props.row)">
           Continue
         </button>
       </div>
@@ -175,6 +175,8 @@ export default {
           PRIORITY: v.DEL_PRIORITY_LABEL,
           DEL_INDEX: v.DEL_INDEX,
           APP_UID: v.APP_UID,
+          PRO_UID: v.PRO_UID,
+          TAS_UID: v.TAS_UID,
         });
       });
       return data;
@@ -220,6 +222,8 @@ export default {
       this.$parent.dataCase = {
         APP_UID: item.APP_UID,
         DEL_INDEX: item.DEL_INDEX,
+        PRO_UID: item.PRO_UID,
+        TAS_UID: item.TAS_UID,
         ACTION: "todo",
       };
       this.$parent.page = "XCase";
@@ -230,12 +234,15 @@ export default {
      * @param {object} item
      */
     openCaseDetail(item) {
-      this.$parent.dataCase = {
-        APP_UID: item.APP_UID,
-        DEL_INDEX: item.DEL_INDEX,
-        PRO_UID: "6161281705fc91129328391060454559",
-      };
-      this.$parent.page = "case-detail";
+      api.cases.open(_.extend({ ACTION: "todo" }, item)).then(() => {
+        this.$parent.dataCase = {
+          APP_UID: item.APP_UID,
+          DEL_INDEX: item.DEL_INDEX,
+          PRO_UID: item.PRO_UID,
+          TAS_UID: item.TAS_UID,
+        };
+        this.$parent.page = "case-detail";
+      });
     },
   },
 };