diff --git a/resources/assets/js/admin/Modals/ModalPreview.vue b/resources/assets/js/admin/Modals/ModalPreview.vue
new file mode 100644
index 000000000..837dd74f9
--- /dev/null
+++ b/resources/assets/js/admin/Modals/ModalPreview.vue
@@ -0,0 +1,269 @@
+<template>
+    <b-modal
+        ref="modal-preview"
+        scrollable
+        size="xl"
+    >
+        <template v-slot:modal-title></template>
+        <b-container fluid>
+            <v-server-table
+                :data="tableData"
+                :columns="columns"
+                :options="options"
+                ref="table-preview"
+                name="preview"
+            >
+                <div slot="detail">
+                    <i class="fas fa-info-circle"></i>
+                </div>
+                <div slot="case_number" slot-scope="props">
+                    {{ props.row.CASE_NUMBER }}
+                </div>
+                <div slot="case_title" slot-scope="props">
+                    {{ props.row.CASE_TITLE }}
+                </div>
+                <div slot="process_name" slot-scope="props">
+                    {{ props.row.PROCESS_NAME }}
+                </div>
+                <div slot="task" slot-scope="props">
+                    <TaskCell :data="props.row.TASK" />
+                </div>
+                <div slot="send_by" slot-scope="props">
+                    <CurrentUserCell :data="props.row.USER_DATA" />
+                </div>
+                <div slot="current_user" slot-scope="props">
+                    {{ props.row.USERNAME_DISPLAY_FORMAT }}
+                </div>
+                <div slot="due_date" slot-scope="props">
+                    {{ props.row.DUE_DATE }}
+                </div>
+                <div slot="delegation_date" slot-scope="props">
+                    {{ props.row.DELEGATION_DATE }}
+                </div>
+                <div slot="priority" slot-scope="props">
+                    {{ props.row.PRIORITY }}
+                </div>
+                <div slot="actions">
+                    <i class="fas fa-ellipsis-v"></i>
+                </div>
+            </v-server-table>
+        </b-container>
+        <template #modal-footer>
+            <b-button
+                variant="danger"
+                data-dismiss="modal"
+                @click="cancel"
+            >
+                {{ $t("ID_CANCEL") }}
+            </b-button>
+        </template>
+    </b-modal>
+</template>
+<script>
+import api from "../../api/index";
+import utils from "../../utils/utils";
+import TaskCell from "../../components/vuetable/TaskCell.vue";
+import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue"
+
+export default {
+    name: "ModalPreview",
+    props: [],
+    components: {
+        TaskCell,
+        CurrentUserCell,
+    },
+    data() {
+        return {
+            type: null,
+            columns: null,
+            tableData: [],
+            options: {
+                filterable: false,
+                pagination: {
+                  show: false
+                },
+                headings: {
+                    detail: this.$i18n.t("ID_DETAIL_CASE"),
+                    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"),
+                    send_by: this.$i18n.t("ID_SEND_BY"),
+                    due_date: this.$i18n.t("ID_DUE_DATE"),
+                    delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
+                    priority: this.$i18n.t("ID_PRIORITY"),
+                    actions: "",
+                },
+                requestFunction(data) {
+                    return this.$parent.$parent.$parent.$parent.getCasesForPreview(data)
+                },
+            },
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        show() {
+            this.$refs["modal-preview"].show();
+        },
+        cancel() {
+            this.$refs["modal-preview"].hide();
+        },
+        /**
+         * Get cases data
+         */
+        getCasesForPreview(data) {
+            let that = this,
+                dt,
+                paged,
+                limit = data.limit,
+                start = data.page === 1 ? 0 : limit * (data.page - 1),
+                filters = {},
+                sort = "";
+            paged = start + "," + limit;
+            filters = {
+                paged: paged,
+            }
+            _.forIn(this.filters, function (item, key) {
+                if(filters && item.value) {
+                    filters[item.filterVar] = item.value;
+                }
+            });
+            if (sort) {
+              filters["sort"] = sort;
+            }
+            return new Promise((resolutionFunc, rejectionFunc) => {
+                switch (that.type) {
+                    case 'inbox':
+                        api.cases
+                        .todo(filters)
+                        .then((response) => {
+                            dt = that.formatDataResponse(response.data.data);
+                            resolutionFunc({
+                                data: dt,
+                                count: response.data.total,
+                            });
+                        })
+                        .catch((e) => {
+                            rejectionFunc(e);
+                        });
+                        break;
+                    case 'draft':
+                        api.cases
+                        .draft(filters)
+                        .then((response) => {
+                            dt = that.formatDataResponse(response.data.data);
+                            resolutionFunc({
+                                data: dt,
+                                count: response.data.total,
+                            });
+                        })
+                        .catch((e) => {
+                            rejectionFunc(e);
+                        });
+                        break;
+                    case 'paused':
+                        api.cases
+                        .paused(filters)
+                        .then((response) => {
+                            dt = that.formatDataResponse(response.data.data);
+                            resolutionFunc({
+                                data: dt,
+                                count: response.data.total,
+                            });
+                        })
+                        .catch((e) => {
+                            rejectionFunc(e);
+                        });
+                        break;
+                    case 'unassigned':
+                        api.cases
+                        .unassigned(filters)
+                        .then((response) => {
+                            dt = that.formatDataResponse(response.data.data);
+                            resolutionFunc({
+                                data: dt,
+                                count: response.data.total,
+                            });
+                        })
+                        .catch((e) => {
+                            rejectionFunc(e);
+                        });
+                        break;
+                }
+            });
+        },
+        /**
+         * Format Response API to grid todo and columns
+         */
+        formatDataResponse(response) {
+            let data = [];
+            _.forEach(response, (v) => {
+                data.push({
+                    CASE_NUMBER: v.APP_NUMBER,
+                    CASE_TITLE: v.DEL_TITLE,
+                    PROCESS_NAME: v.PRO_TITLE,
+                    TASK: [{
+                        TITLE: v.TAS_TITLE,
+                        CODE_COLOR: v.TAS_COLOR,
+                        COLOR: v.TAS_COLOR_LABEL,
+                        DELAYED_TITLE:
+                        v.TAS_STATUS === "OVERDUE"
+                            ? this.$i18n.t("ID_DELAYED") + ":"
+                            : this.statusTitle[v.TAS_STATUS],
+                        DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : "",
+                    }],
+                    USER_DATA: this.formatUser(v.SEND_BY_INFO),
+                    USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
+                        userName: v.USR_LASTNAME,
+                        firstName: v.USR_LASTNAME,
+                        lastName: v.USR_LASTNAME,
+                        format: window.config.FORMATS.format || null,
+                    }),
+                    DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
+                    DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
+                    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;
+        },
+        /**
+         * Set the format to show user's information
+         * @return {array} dataFormat
+         */
+        formatUser(data) {
+          var dataFormat = [],
+              userDataFormat;
+              userDataFormat = utils.userNameDisplayFormat({
+                  userName: data.user_tooltip.usr_firstname,
+                  firstName: data.user_tooltip.usr_lastname,
+                  lastName: data.user_tooltip.usr_username,
+                  format: window.config.FORMATS.format || null
+              });
+              dataFormat.push({
+                  USERNAME_DISPLAY_FORMAT: userDataFormat,
+                  EMAIL: data.user_tooltip.usr_email,
+                  POSITION: data.user_tooltip.usr_position,
+                  AVATAR: userDataFormat !== "" ? window.config.SYS_SERVER_AJAX +
+                      window.config.SYS_URI +
+                      `users/users_ViewPhotoGrid?pUID=${data.user_tooltip.usr_id}` : "",
+                  UNASSIGNED: userDataFormat !== "" ? true : false
+              });    
+          return dataFormat;
+        }
+    }
+}
+</script>
+<style>
+.VueTables__limit-field {
+    display: none;
+}
+.table-responsive {
+  margin-top: -1rem;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/admin/settings/customCaseList/Tables.vue b/resources/assets/js/admin/settings/customCaseList/Tables.vue
index d02c764e0..1843f3d5a 100644
--- a/resources/assets/js/admin/settings/customCaseList/Tables.vue
+++ b/resources/assets/js/admin/settings/customCaseList/Tables.vue
@@ -1,6 +1,7 @@
 <template>
 <div id="people">
     <ModalDeleteCaseList ref="modal-delete-list"></ModalDeleteCaseList>
+    <ModalPreview ref="modal-preview"></ModalPreview>
     <button-fleft :data="newList"></button-fleft>
     <button-fleft :data="importList"></button-fleft>
     <v-server-table 
@@ -16,11 +17,9 @@
         </div>
         <div slot="owner" slot-scope="props">
                 <OwnerCell :data="props.row.owner" />
-            </div>
+        </div>
     </v-server-table>
 </div>
-
-
 </template>
 <script>
 import Api from "./Api/CaseList";
@@ -29,6 +28,7 @@ import Ellipsis from "../../../components/utils/ellipsis.vue";
 import utils from "../../../utils/utils";
 import OwnerCell from "../../../components/vuetable/OwnerCell";
 import ModalDeleteCaseList from "./../../Modals/ModalDeleteCaseList.vue";
+import ModalPreview from "./../../Modals/ModalPreview.vue";
 import download from "downloadjs";
 
 export default {
@@ -38,7 +38,8 @@ export default {
         ButtonFleft,
         Ellipsis,
         OwnerCell,
-        ModalDeleteCaseList
+        ModalDeleteCaseList,
+        ModalPreview,
     },
     data() {
         return {
@@ -105,7 +106,8 @@ export default {
                     return this.$parent.$parent.getCasesForVueTable(data);
                 },
            
-            }
+            },
+            customColumns: [],
         };
     },
     methods: {
@@ -184,8 +186,33 @@ export default {
             this.$refs["modal-delete-list"].data = data;
             this.$refs["modal-delete-list"].show();
         },
+        /**
+         * Show modal preview
+         * @param {object} data
+         */
         showPreview(data) {
-
+            this.$refs["modal-preview"].columns = this.getColumns(data);
+            this.$refs["modal-preview"].type = data.type;
+            this.$refs["modal-preview"].show();
+        },
+        /**
+         * Get columns to show in the preview
+         * @param {Object} data
+         * @returns {Array} columns
+         */
+        getColumns(data) {
+            var columns = [],
+                auxColumn,
+                i;
+            for (i = 0; i < data.columns.length; i += 1) {
+                auxColumn = data.columns[i];
+                if (auxColumn.set) {
+                    columns.push(auxColumn.field);
+                }
+            }
+            columns.push('actions');
+            columns.unshift('detail');
+            return columns
         },
         editCustomCaseList(data) {
             this.$emit("showSketch", {
@@ -212,49 +239,49 @@ export default {
             download(JSON.stringify(data), fileName + ".json", typeMime);
         },
         /**
-     * Show options in the ellipsis 
-     * @param {objec} data
-     */
-    updateDataEllipsis(data) {
-        let that = this;
-        this.showEllipsis = !this.showEllipsis;
-        if (this.showEllipsis) {
-          this.dataEllipsis = {
-            buttons: {
-              open: {
-                name: "delete",
-                icon: "far fa-trash-alt",
-                color: "red",
-                fn: function() {
-                  that.showModalDelete(data);
+        * Show options in the ellipsis 
+        * @param {objec} data
+        */
+        updateDataEllipsis(data) {
+            let that = this;
+            this.showEllipsis = !this.showEllipsis;
+            if (this.showEllipsis) {
+                this.dataEllipsis = {
+                    buttons: {
+                        open: {
+                            name: "delete",
+                            icon: "far fa-trash-alt",
+                            color: "red",
+                            fn: function() {
+                                that.showModalDelete(data);
+                            }
+                        },
+                        note: {
+                            name: "edit",
+                            icon: "far fa-edit",
+                            fn: function() {
+                                that.editCustomCaseList(data);
+                            }
+                        },
+                        reassign: {
+                            name: "download",
+                            icon: "fas fa-arrow-circle-down",
+                            fn: function() {
+                                that.downloadCaseList(data);
+                            }
+                        },
+                        pause: {
+                            name: "preview",
+                            icon: "fas fa-tv",
+                            color: "green",
+                            fn: function() {
+                                that.showPreview(data);
+                            }
+                        }
+                    }
                 }
-              },
-              note: {
-                name: "edit",
-                icon: "far fa-edit",
-                fn: function() {
-                  that.editCustomCaseList(data);
-                }
-              },
-              reassign: {
-                name: "download",
-                icon: "fas fa-arrow-circle-down",
-                fn: function() {
-                  that.downloadCaseList(data);
-                }
-              },
-              pause: {
-                name: "preview",
-                icon: "fas fa-tv",
-                color: "green",
-                fn: function() {
-                  that.showPreview(data);
-                }
-              }
             }
-          }
-        }
-      },
+        },
     }
 };
 </script>
\ No newline at end of file