diff --git a/resources/assets/js/components/cases/AttachedDocuments.vue b/resources/assets/js/components/home/caseDetail/AttachedDocuments.vue
similarity index 100%
rename from resources/assets/js/components/cases/AttachedDocuments.vue
rename to resources/assets/js/components/home/caseDetail/AttachedDocuments.vue
diff --git a/resources/assets/js/components/cases/CaseSummary.vue b/resources/assets/js/components/home/caseDetail/CaseSummary.vue
similarity index 97%
rename from resources/assets/js/components/cases/CaseSummary.vue
rename to resources/assets/js/components/home/caseDetail/CaseSummary.vue
index d8229d27f..1b863ac3d 100644
--- a/resources/assets/js/components/cases/CaseSummary.vue
+++ b/resources/assets/js/components/home/caseDetail/CaseSummary.vue
@@ -53,7 +53,7 @@
       </div>
       <br />
       <h6 class="card-subtitle mb-2 text-muted">{{ data.titleActions }}</h6>
-      <div v-if=data.btnType class="container v-case-summary-center">
+      <div v-if="data.btnType" class="container v-case-summary-center">
         <button
           type="button"
           class="btn btn-success btn-sm"
diff --git a/resources/assets/js/components/cases/IoDocuments.vue b/resources/assets/js/components/home/caseDetail/IoDocuments.vue
similarity index 98%
rename from resources/assets/js/components/cases/IoDocuments.vue
rename to resources/assets/js/components/home/caseDetail/IoDocuments.vue
index 82000f5a9..313021aaa 100644
--- a/resources/assets/js/components/cases/IoDocuments.vue
+++ b/resources/assets/js/components/home/caseDetail/IoDocuments.vue
@@ -59,6 +59,7 @@ export default {
       icon: {
         pdf: "fas fa-file-pdf",
         doc: "fas fa-file-word",
+        png: "fas fa-picture-o",
       },
     };
   },
diff --git a/resources/assets/js/components/Tabs.vue b/resources/assets/js/components/home/caseDetail/Tabs.vue
similarity index 76%
rename from resources/assets/js/components/Tabs.vue
rename to resources/assets/js/components/home/caseDetail/Tabs.vue
index d3ce226a8..dabc640bf 100644
--- a/resources/assets/js/components/Tabs.vue
+++ b/resources/assets/js/components/home/caseDetail/Tabs.vue
@@ -12,29 +12,30 @@
 </template>
 
 <script>
-import { Tabs, Tab } from 'vue-slim-tabs'
+import { Tabs, Tab } from "vue-slim-tabs";
 
 export default {
   props: {
-    data: Object
+    data: Object,
   },
   components: {
-    Tabs, Tab
+    Tabs,
+    Tab,
   },
   data() {
     return {
-      0: function() {
+      0: function () {
         console.log(this.data.items[0].appUid);
-      }
+      },
     };
   },
   methods: {
     selectedTab(e, index) {
       if (index === 0) {
-        console.log("fabio")
+        console.log("fabio");
       }
-    }
+    },
   },
-}
+};
 </script>
 <style src="vue-slim-tabs/themes/default.css"></style>
\ No newline at end of file
diff --git a/resources/assets/js/home/CaseDetail.vue b/resources/assets/js/home/CaseDetail.vue
index 795f1fddf..5f2cbb73d 100644
--- a/resources/assets/js/home/CaseDetail.vue
+++ b/resources/assets/js/home/CaseDetail.vue
@@ -1,300 +1,339 @@
 <template>
-    <div id="case-detail" ref="case-detail" class="v-container-mycases">
-        <div>
-            <p class="mb-2"><b-icon icon="arrow-left" @click="backSearch()"></b-icon><u>Back to Results</u></p>
-        </div>
-        <div class="row">
-            <div class="col-sm-8">
-                <div id="pending-task" ref="pending-task">
-                    <v-server-table
-                        :data="tableData"
-                        :columns="columns"
-                        :options="options"
-                        ref="vueTable"
-                        style="height:120px"
-                    >
-                        <div slot="task" slot-scope="props">
-                            {{ props.row.TASK }}
-                        </div>
-                        <div slot="case_title" slot-scope="props">
-                            {{ props.row.CASE_TITLE }}
-                        </div>
-                        <div slot="assignee" slot-scope="props">
-                            {{ props.row.ASSIGNEE }}
-                        </div>
-                        <div slot="status" slot-scope="props">
-                            {{ props.row.STATUS }}
-                        </div>
-                        <div slot="due_date" slot-scope="props">
-                            {{ props.row.DUE_DATE }}
-                        </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>
-                    </v-server-table>
-                </div>
-                <Tabs :data="dataTabs"></Tabs>
-                <div>
-                    <p><b>Comments</b></p>
-                    <div class="form-group">
-                        <textarea class="form-control" name="comments" id="comments" cols="80" rows="5"></textarea>
-                        <div class="form-check">
-                            <input type="checkbox" class="form-check-input" id="sendEmail">
-                            <label class="form-check-label" for="sendEmail">Send email to Participants</label>
-                            <button class="btn btn-secondary btn-sm" id="comment" name="comment">Comment</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-sm4">
-                <case-summary :data="dataCaseSummary"></case-summary>
-                <io-documents :data="dataIoDocuments"></io-documents>
-                <attached-documents :data="dataAttachedDocuments"></attached-documents>
-            </div>
-        </div>
+  <div id="case-detail" ref="case-detail" class="v-container-mycases">
+    <div>
+      <p class="mb-2">
+        <b-icon icon="arrow-left" @click="backSearch()"></b-icon
+        ><u>Back to Results</u>
+      </p>
     </div>
+    <div class="row">
+      <div class="col-sm-8">
+        <div id="pending-task" ref="pending-task">
+          <v-server-table
+            :data="tableData"
+            :columns="columns"
+            :options="options"
+            ref="vueTable"
+            style="height: 120px"
+          >
+            <div slot="task" slot-scope="props">
+              {{ props.row.TASK }}
+            </div>
+            <div slot="case_title" slot-scope="props">
+              {{ props.row.CASE_TITLE }}
+            </div>
+            <div slot="assignee" slot-scope="props">
+              {{ props.row.ASSIGNEE }}
+            </div>
+            <div slot="status" slot-scope="props">
+              {{ props.row.STATUS }}
+            </div>
+            <div slot="due_date" slot-scope="props">
+              {{ props.row.DUE_DATE }}
+            </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>
+          </v-server-table>
+        </div>
+        <Tabs :data="dataTabs"></Tabs>
+        <div>
+          <p><b>Comments</b></p>
+          <div class="form-group">
+            <textarea
+              class="form-control"
+              name="comments"
+              id="comments"
+              cols="80"
+              rows="5"
+            ></textarea>
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input" id="sendEmail" />
+              <label class="form-check-label" for="sendEmail"
+                >Send email to Participants</label
+              >
+              <button
+                class="btn btn-secondary btn-sm"
+                id="comment"
+                name="comment"
+              >
+                Comment
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm4">
+        <case-summary :data="dataCaseSummary"></case-summary>
+        <io-documents :data="dataIoDocuments"></io-documents>
+        <attached-documents :data="dataAttachedDocuments"></attached-documents>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import Tabs from '../components/Tabs.vue';
-import IoDocuments from '../components/cases/IoDocuments.vue';
-import CaseSummary from '../components/cases/CaseSummary.vue';
-import AttachedDocuments from '../components/cases/AttachedDocuments.vue';
+import Tabs from "../components/home/caseDetail/Tabs.vue";
+import IoDocuments from "../components/home/caseDetail/IoDocuments.vue";
+import CaseSummary from "../components/home/caseDetail/CaseSummary.vue";
+import AttachedDocuments from "../components/home/caseDetail/AttachedDocuments.vue";
 
 export default {
-    name: "CaseDetail",
-    components: {
-        Tabs,
-        IoDocuments,
-        CaseSummary,
-        AttachedDocuments
+  name: "CaseDetail",
+  components: {
+    Tabs,
+    IoDocuments,
+    CaseSummary,
+    AttachedDocuments,
+  },
+  props: {},
+  data() {
+    return {
+      columns: [
+        "task",
+        "case_title",
+        "assignee",
+        "status",
+        "due_date",
+        "actions",
+      ],
+      tableData: [
+        {
+          task: "Approve Art",
+          case_title: "Case Title A",
+          assignee: "User 1",
+          status: "To Do",
+          due_date: "3 days",
+        },
+      ],
+      options: {
+        headings: {
+          task: this.$i18n.t("ID_TASK"),
+          case_title: this.$i18n.t("ID_CASE_TITLE"),
+          assignee: this.$i18n.t("ID_ASSIGNEE"),
+          status: this.$i18n.t("ID_STATUS"),
+          due_date: this.$i18n.t("ID_DUE_DATE"),
+          actions: this.$i18n.t("ID_ACTIONS"),
+        },
+        selectable: {
+          mode: "single", // or 'multiple'
+          only: function (row) {
+            return true; // any condition
+          },
+          selectAllMode: "all", // or 'page',
+          programmatic: false,
+        },
+        filterable: false,
+      },
+      dataCaseSummary: {
+        title: "Case Summary",
+        titleActions: "Actions",
+        btnLabel: "Cancel Request",
+        btnType: false,
+        onClick: () => {
+          console.log("acitons");
+        },
+        label: {
+          numberCase: "Case #",
+          process: "Process",
+          status: "Status",
+          caseTitle: "Case title",
+          created: "Created",
+          delegationDate: "Delegation Date",
+          duration: "Duration",
+        },
+        text: {
+          numberCase: "",
+          process: "",
+          status: "",
+          caseTitle: "",
+          created: "",
+          delegationDate: "",
+          duration: "",
+        },
+      },
+      dataIoDocuments: {
+        titleInput: "Input Document",
+        inputDocuments: [
+          {
+            title: "Invoice January 2018.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+        ],
+        titleOutput: "Output Document",
+        outputDocuments: [
+          {
+            title: "Invoice January 2018.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+        ],
+      },
+      dataAttachedDocuments: {
+        title: "Attached Documents",
+        items: [
+          {
+            title: "Invoice January 2018.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+        ],
+      },
+      dataTabs: {
+        items: [
+          {
+            title: "Request Summary",
+            data: {
+              firstName: "Jason",
+              lastName: "Burne",
+              userName: "jburne@processmaker.com",
+            },
+          },
+          {
+            title: "Process Map",
+            data: [
+              {
+                pro_uid: "123dit",
+              },
+            ],
+          },
+          {
+            title: "Case History",
+          },
+          {
+            title: "Change Log",
+          },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    let that = this;
+    this.$el.getElementsByClassName("VuePagination__count")[0].remove();
+    this.getDataCaseSummary();
+    this.getDataIODocuments();
+  },
+  methods: {
+    getDataCaseSummary() {
+      var data = new FormData();
+      data.append("appUid", APP_UID);
+      data.append("delIndex", DEL_INDEX);
+      data.append("action", "todo");
+
+      ProcessMaker.apiClient
+        .post("../../../appProxy/getSummary", data)
+        .then((response) => {
+          var data = response.data;
+          this.dataCaseSummary = {
+            title: "Case Summary",
+            titleActions: "Actions",
+            btnLabel: "Cancel Request",
+            btnType: false,
+            onClick: () => {
+              console.log("acitons");
+            },
+            label: {
+              numberCase: data[2].label,
+              process: data[0].label,
+              status: data[3].label,
+              caseTitle: data[1].label,
+              created: data[6].label,
+              delegationDate: response.data[11].label,
+              duration: "Duration",
+            },
+            text: {
+              numberCase: data[2].value,
+              process: data[0].value,
+              status: data[3].value,
+              caseTitle: data[1].value,
+              created: data[6].value,
+              delegationDate: response.data[11].value.split(" ")[0],
+              duration: response.data[11].value.split(" ")[1],
+            },
+          };
+        })
+        .catch((err) => {
+          throw new Error(err);
+        });
     },
-    props: {},
-    data () {
-        return {
-                columns: ["task", "case_title", "assignee", "status", "due_date", "actions"],
-                tableData:[{
-                    task: "Approve Art",
-                    case_title: "Case Title A",
-                    assignee: "User 1",
-                    status: "To Do",
-                    due_date: "3 days",
-                    
-                }],
-                options: {
-                    headings: {
-                        task: this.$i18n.t("ID_TASK"),
-                        case_title: this.$i18n.t("ID_CASE_TITLE"),
-                        assignee: this.$i18n.t("ID_ASSIGNEE"),
-                        status: this.$i18n.t("ID_STATUS"),
-                        due_date: this.$i18n.t("ID_DUE_DATE"),
-                        actions: this.$i18n.t("ID_ACTIONS")
-                    },
-                    selectable: {
-                        mode: 'single', // or 'multiple'
-                        only: function (row) {
-                            return true // any condition
-                        },
-                        selectAllMode: 'all',// or 'page',
-                        programmatic: false,
-                    },
-                    filterable: false
-                    
-                },
-                dataCaseSummary: {
-                    title: "Case Summary",
-                    titleActions: "Actions",
-                    btnLabel: "Cancel Request",
-                    btnType: false,
-                    onClick: () => {
-                        console.log("acitons");
-                    },
-                    label: {
-                        numberCase: "Case #",
-                        process: "Process",
-                        status: "Status",
-                        caseTitle: "Case title",
-                        created: "Created",
-                        delegationDate: "Delegation Date",
-                        duration: "Duration",
-                    },
-                    text: {
-                        numberCase: "",
-                        process: "",
-                        status: "",
-                        caseTitle: "",
-                        created: "",
-                        delegationDate: "",
-                        duration: "",
-                    },
-                },
-                dataIoDocuments: {
-                  titleInput: "Input Document",
-                  inputDocuments: [
-                    {
-                      title: "Invoice January 2018.pdf",
-                      extension: "pdf",
-                      onClick: () => {
-                        console.log("Attached document");
-                      }
-                    }
-                  ],
-                  titleOutput: "Output Document",
-                  outputDocuments: [
-                    {
-                      title: "Invoice January 2018.pdf",
-                      extension: "pdf",
-                      onClick: () => {
-                        console.log("Attached document");
-                      }
-                    }
-                  ],
-                },
-                dataAttachedDocuments: {
-                  title: "Attached Documents",
-                  items: [
-                    {
-                      title: "Invoice January 2018.pdf",
-                      extension: "pdf",
-                      onClick: () => {
-                        console.log("Attached document");
-                      },
-                    }
-                  ],
-                },
-                dataTabs: {
-                  items: [
-                    {
-                      title: "Request Summary",
-                      data: {
-                        firstName: "Jason",
-                        lastName: "Burne",
-                        userName: "jburne@processmaker.com",
-                      }
-                    },
-                    {
-                      title: "Process Map",
-                      data: [
-                        {
-                          pro_uid: "123dit"
-                        }
-                      ]
-                    },
-                    {
-                      title: "Case History"
-                    },
-                    {
-                      title: "Change Log"
-                    }
-                  ]
-                }
-            };
-        },
-    
-    mounted() {
-        let that = this;
-        this.$el.getElementsByClassName('VuePagination__count')[0].remove();
-        this.getDataCaseSummary();
-        this.getDataIODocuments();
+    getDataIODocuments() {
+      this.getInputDocuments();
+      this.getOutputDocuments();
     },
-    methods: {
-        getDataCaseSummary() {
-            var data = new FormData();
-            data.append('appUid', APP_UID);
-            data.append('delIndex', DEL_INDEX);
-            data.append('action', 'todo');
+    getInputDocuments() {
+      var data = new FormData();
+      data.append("appUid", APP_UID);
+      data.append("delIndex", DEL_INDEX);
+      ProcessMaker.apiClient
+        .post(
+          "../../../cases/cases_Ajax.php?action=getCasesInputDocuments",
+          data
+        )
+        .then((response) => {
+          var data = response.data,
+            document = data.data,
+            i,
+            info;
 
-            ProcessMaker.apiClient.post('../../../appProxy/getSummary', data).then((response) => {
-                var data = response.data;
-                this.dataCaseSummary = {
-                    title: "Case Summary",
-                    titleActions: "Actions",
-                    btnLabel: "Cancel Request",
-                    btnType: false,
-                    onClick: () => {
-                        console.log("acitons");
-                    },
-                    label: {
-                        numberCase: data[2].label,
-                        process: data[0].label,
-                        status: data[3].label,
-                        caseTitle: data[1].label,
-                        created: data[6].label,
-                        delegationDate: response.data[11].label,
-                        duration: "Duration",
-                    },
-                    text: {
-                        numberCase: data[2].value,
-                        process: data[0].value,
-                        status: data[3].value,
-                        caseTitle: data[1].value,
-                        created: data[6].value,
-                        delegationDate: response.data[11].value.split(" ")[0],
-                        duration: response.data[11].value.split(" ")[1],
-                    },
-                }  
-            }).catch((err) => {
-                throw new Error(err);
-            });
-        },
-        getDataIODocuments() {
-            this.getInputDocuments();
-            this.getOutputDocuments();
-        },
-        getInputDocuments() {
-            var data = new FormData();
-            data.append ('appUid', APP_UID);
-            data.append ('delIndex', DEL_INDEX);
-            ProcessMaker.apiClient.post('../../../cases/cases_Ajax.php?action=getCasesInputDocuments',data).then((response) => {
-                var data = response.data,
-                    document = data.data,
-                    i,
-                    info;
+          if (data.totalCount > 0 && document !== []) {
+            this.dataIoDocuments.inputDocuments = [];
+            for (i = 0; i < data.totalCount; i += 1) {
+              info = {
+                title: document[i].TITLE,
+                extension: document[i].TITLE.split(".")[1],
+                onClick: document[i].DOWNLOAD_LINK,
+              };
+              this.dataIoDocuments.inputDocuments.push(info);
+            }
+          }
+        })
+        .catch((err) => {
+          throw new Error(err);
+        });
+    },
+    getOutputDocuments() {
+      var data = new FormData();
+      data.append("appUid", APP_UID);
+      data.append("delIndex", DEL_INDEX);
+      ProcessMaker.apiClient
+        .post(
+          "../../../cases/cases_Ajax.php?action=getCasesOutputDocuments",
+          data
+        )
+        .then((response) => {
+          var data = response.data,
+            document = data.data,
+            i,
+            info;
 
-                if (data.totalCount > 0 && document !== []) {
-                    this.dataIoDocuments.inputDocuments = [];
-                    for (i = 0; i < data.totalCount; i += 1) {
-                        info = {
-                            "title" : document[i].TITLE,
-                            "extension" : document[i].TITLE.split(".")[1],
-                            "onClick" : document[i].DOWNLOAD_LINK
-                        };
-                    this.dataIoDocuments.inputDocuments.push(info);
-                    }
-                }
-            }).catch((err) => {
-                throw new Error(err);
-            });
-        },
-        getOutputDocuments() {
-            var data = new FormData();
-            data.append ('appUid', APP_UID);
-            data.append ('delIndex', DEL_INDEX);
-            ProcessMaker.apiClient.post('../../../cases/cases_Ajax.php?action=getCasesOutputDocuments',data).then((response) => {
-                var data = response.data,
-                    document = data.data,
-                    i,
-                    info;
-
-                if (data.totalCount > 0 && document !== []) {
-                    this.dataIoDocuments.outputDocuments = [];
-                    for (i = 0; i < data.totalCount; i += 1) {
-                        info = {
-                            "title" : document[i].TITLE,
-                            "extension" : document[i].TITLE.split(".")[1],
-                            "onClick" : document[i].DOWNLOAD_LINK
-                        };
-                    this.dataIoDocuments.outputDocuments.push(info);
-                    }
-                }
-            }).catch((err) => {
-                throw new Error(err);
-            });
-        },
-    }
-}
+          if (data.totalCount > 0 && document !== []) {
+            this.dataIoDocuments.outputDocuments = [];
+            for (i = 0; i < data.totalCount; i += 1) {
+              info = {
+                title: document[i].TITLE,
+                extension: document[i].TITLE.split(".")[1],
+                onClick: document[i].DOWNLOAD_LINK,
+              };
+              this.dataIoDocuments.outputDocuments.push(info);
+            }
+          }
+        })
+        .catch((err) => {
+          throw new Error(err);
+        });
+    },
+  },
+};
 </script>
\ No newline at end of file
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 044e879f2..624a387b5 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -28,9 +28,10 @@ import Draft from "./Draft";
 import Paused from "./Paused";
 import Unassigned from "./Unassigned";
 import BatchRouting from "./BatchRouting";
+import CaseDetail from "./CaseDetail";
 import XCase from "./XCase";
 import TaskReassignments from "./TaskReassignments";
-import AdvancedSearch from "./AdvancedSearch"
+import AdvancedSearch from "./AdvancedSearch";
 
 export default {
   name: "Home",
@@ -46,6 +47,7 @@ export default {
     Draft,
     Paused,
     Unassigned,
+    CaseDetail,
   },
   data() {
     return {
@@ -88,10 +90,10 @@ export default {
     /**
      * Toggle sidebar handler
      * @param {Boolean} collapsed - if sidebar is collapsed true|false
-     *  
+     *
      */
     onToggleCollapse(collapsed) {
-        this.collapsed = collapsed;
+      this.collapsed = collapsed;
     },
   },
 };
diff --git a/resources/assets/js/home/Todo.vue b/resources/assets/js/home/Todo.vue
index 3e07995d4..bbddf36bc 100644
--- a/resources/assets/js/home/Todo.vue
+++ b/resources/assets/js/home/Todo.vue
@@ -9,6 +9,11 @@
       :options="options"
       ref="vueTable"
     >
+      <div slot="detail" slot-scope="props">
+        <div class="btn-default" @click="openCaseDetail(props)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
       <div slot="case_number" slot-scope="props">
         {{ props.row.CASE_NUMBER }}
       </div>
@@ -74,6 +79,7 @@ export default {
         },
       },
       columns: [
+        "detail",
         "case_number",
         "case_title",
         "process_name",
@@ -216,6 +222,19 @@ export default {
       };
       this.$parent.page = "XCase";
     },
+    /**
+     * Open case detail
+     *
+     * @param {object} item
+     */
+    openCaseDetail(item) {
+      this.$parent.dataCase = {
+        APP_UID: item.APP_UID,
+        DEL_INDEX: item.DEL_INDEX,
+        ACTION: "todo",
+      };
+      this.$parent.page = "case-detail";
+    },
   },
 };
 </script>