diff --git a/resources/assets/js/admin/settings/customCaseList/Api/CaseList.js b/resources/assets/js/admin/settings/customCaseList/Api/CaseList.js
new file mode 100644
index 000000000..44f52c64e
--- /dev/null
+++ b/resources/assets/js/admin/settings/customCaseList/Api/CaseList.js
@@ -0,0 +1,42 @@
+import axios from "axios";
+import Api from "../../../../api/Api";
+import Services from "./Services";
+
+class caseListApi extends Api {
+    constructor(services) {
+    // Here, it calls the parent class' constructor with lengths
+    // provided for the Polygon's width and height
+        super(services, services);
+    }
+    /**
+     * Get the case list
+     * @param {object} data 
+     * @param {string} module 
+     */
+    getCaseList(data, module) {
+        let service = "CASE_LIST_TODO";
+        switch (module) {
+            case 'inbox' :
+                service = "CASE_LIST_TODO";
+                break;
+            case 'draft' :
+                service = "CASE_LIST_DRAFT";
+                break;
+            case 'unassigned' :
+                service = "CASE_LIST_UNASSIGNED";
+                break;
+            case 'paused' :
+                service = "CASE_LIST_PAUSED";
+                break;
+        }
+        
+        return this.get({
+            service: service,
+            params: data,
+            keys: {}
+        });
+    }
+}
+let api = new caseListApi(Services);
+
+export default api;
diff --git a/resources/assets/js/admin/settings/customCaseList/Api/Services.js b/resources/assets/js/admin/settings/customCaseList/Api/Services.js
new file mode 100644
index 000000000..2fee94841
--- /dev/null
+++ b/resources/assets/js/admin/settings/customCaseList/Api/Services.js
@@ -0,0 +1,6 @@
+export default {
+    CASE_LIST_TODO: "/caseList/inbox",
+    CASE_LIST_DRAFT: "/caseList/draft",
+    CASE_LIST_UNASSIGNED: "/caseList/unassigned",
+    CASE_LIST_PAUSED: "/caseList/paused"
+};
diff --git a/resources/assets/js/admin/settings/customCaseList/CustomCaseList.vue b/resources/assets/js/admin/settings/customCaseList/CustomCaseList.vue
new file mode 100644
index 000000000..5f85979d0
--- /dev/null
+++ b/resources/assets/js/admin/settings/customCaseList/CustomCaseList.vue
@@ -0,0 +1,67 @@
+<template>
+    <div
+        id="home"
+    >
+        <div class="demo">
+            <div class="container">
+                <h5 >{{ $t("ID_CUSTOM_CASES_LISTS") }}</h5>
+                <div class="x_content">
+                    <b-container fluid>
+                        <b-tabs content-class="mt-3">
+                            <b-tab :title="$t('TO_DO')" active>
+                                <Tables module="inbox"/>
+                            </b-tab>
+                            <b-tab :title="$t('ID_DRAFT')" lazy>
+                                <Tables module="draft"/>
+                            </b-tab>
+                            <b-tab :title="$t('ID_UNASSIGNED')" lazy>
+                                <Tables module="unassigned"/>
+                            </b-tab>
+                             <b-tab :title="$t('ID_PAUSED')" lazy>
+                                <Tables module="paused"/>
+                            </b-tab>
+                        </b-tabs> 
+                    </b-container>
+                  
+                </div> 
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Tables from "./Tables";
+export default {
+    name: "CustomCaseList",
+    components: {
+        Tables
+    },
+    data() {
+        return {
+            
+        };
+    },
+    mounted() {
+       
+    },
+    methods: {
+        
+    }
+};
+</script>
+
+<style lang="scss">
+#home {
+    padding-left: 0px;
+    transition: 0.3s;
+}
+#home.collapsed {
+    padding-left: 50px;
+}
+#home.onmobile {
+    padding-left: 50px;
+}
+
+.container {
+    max-width: 1500px;
+}
+</style>
diff --git a/resources/assets/js/admin/settings/customCaseList/Tables.vue b/resources/assets/js/admin/settings/customCaseList/Tables.vue
new file mode 100644
index 000000000..9c1170769
--- /dev/null
+++ b/resources/assets/js/admin/settings/customCaseList/Tables.vue
@@ -0,0 +1,141 @@
+<template>
+<div id="people">
+    <button-fleft :data="newList"></button-fleft>
+    <button-fleft :data="importList"></button-fleft>
+    <v-server-table 
+        :data="tableData"
+        :columns="columns"
+        :options="options"
+        ref="table" 
+    >
+         <div slot="actions" slot-scope="props">
+            <div>
+            <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            </div>
+        </div>
+    </v-server-table>
+</div>
+
+
+</template>
+<script>
+import Api from "./Api/CaseList";
+import ButtonFleft from "../../../components/home/ButtonFleft.vue";
+import Ellipsis from '../../../components/utils/ellipsis.vue';
+export default {
+    name: "Tables",
+    props: ["module"],
+    components: {
+        ButtonFleft,
+        Ellipsis
+    },
+    data() {
+        return {
+            dataEllipsis: {
+                buttons: {
+                    open: {
+                    name: "edit",
+                    icon: "far fa-edit",
+                    fn: function() {console.log("Edit");}
+                    },
+                    note: {
+                    name: "case note",
+                    icon: "far fa-comments",
+                    fn: function() {console.log("comments");}
+                    },
+                }
+        },
+            newList: {
+                title: this.$i18n.t("New List"),
+                class: "btn-success",
+                onClick: () => {
+                    //TODO button
+                }
+            },
+            importList: {
+                title: this.$i18n.t("Import List"),
+                class: "btn-success",   
+                onClick: () => {
+                    //TODO button
+                }
+            },
+            columns: [
+                "name",
+                "process",
+                "tableName",
+                "owner",
+                "createDate",
+                "updateDate",
+                "actions"
+            ],
+            tableData: [],
+            options: {
+                perPage:25,
+                perPageValues:[25],
+                filterable: true,
+                headings: {
+                    name: this.$i18n.t("ID_NAME"),
+                    process: this.$i18n.t("ID_PROCESS"),
+                    tableName: this.$i18n.t("ID_PM_TABLE"),
+                    owner: this.$i18n.t("ID_OWNER"),
+                    createDate: this.$i18n.t("ID_DATE_CREATED"),
+                    updateDate: this.$i18n.t("ID_DATE_UPDATED"),
+                    actions: ""
+                },
+                texts: {
+                    count: this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
+                    first: this.$i18n.t("ID_FIRST"),
+                    last: this.$i18n.t("ID_LAST"),
+                    filter: this.$i18n.t("ID_FILTER") + ":",
+                    limit: this.$i18n.t("ID_RECORDS") + ":",
+                    page: this.$i18n.t("ID_PAGE") + ":",
+                    noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS"),
+                },
+                requestFunction(data) {
+                    return this.$parent.$parent.getCasesForVueTable(data);
+                },
+           
+            }
+        };
+    },
+    methods: {
+        /**
+         * Get cases data by module
+         * @param {object} datas
+         * @returns {object}
+         */
+        getCasesForVueTable(data) {
+            let that = this,
+                dt,
+                paged,
+                limit = data.limit,
+                start = data.page === 1 ? 0 : limit * (data.page - 1),
+                filters = {};
+            filters = {
+                offset: start,
+                limit: limit
+            };
+            if (data && data.query) {
+                filters["search"] = data.query;
+            }
+            _.forIn(this.filters, function (item, key) {
+                if(filters && item.value) {
+                    filters[item.filterVar] = item.value;
+                }
+            });
+            return new Promise((resolutionFunc, rejectionFunc) => {
+                Api.getCaseList(filters, that.module)
+                .then((response) => {       
+                    resolutionFunc({
+                        data: response.data.data,        
+                        count: response.data.total
+                    });
+                })
+                .catch((e) => {
+                    rejectionFunc(e);
+                });
+            });
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/admin/settings/customCaseList/main.js b/resources/assets/js/admin/settings/customCaseList/main.js
new file mode 100644
index 000000000..3187c2b6b
--- /dev/null
+++ b/resources/assets/js/admin/settings/customCaseList/main.js
@@ -0,0 +1,52 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import VueSidebarMenu from "vue-sidebar-menu";
+import VueI18n from 'vue-i18n';
+import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
+import { ServerTable, Event, ClientTable} from 'vue-tables-2';
+import Sortable from 'sortablejs';
+import "@fortawesome/fontawesome-free/css/all.css";
+import "@fortawesome/fontawesome-free/js/all.js";
+import 'bootstrap/dist/css/bootstrap-grid.css';
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import CustomCaseList from "./CustomCaseList";
+Vue.use(VueRouter);
+Vue.use(VueSidebarMenu);
+Vue.use(BootstrapVue);
+Vue.use(BootstrapVueIcons);
+Vue.use(VueI18n);
+
+Vue.use(ServerTable, {}, false, 'bootstrap3', {});
+Vue.use(ClientTable, {}, false, 'bootstrap3', {});
+window.ProcessMaker = {
+    apiClient: require('axios')
+};
+window.ProcessMaker.pluginBase = "/sysworkflow/en/neoclassic/viena/index.php";
+window.ProcessMaker.apiClient.defaults.baseURL = '/sysworkflow/en/neoclassic/viena/index.php/api/';
+window.ProcessMaker.SYS_SYS = "workflow";
+window.ProcessMaker.SYS_LANG = "en";
+window.ProcessMaker.SYS_SKIN = "neoclassic";
+
+let messages = {};
+messages[config.SYS_LANG] = config.TRANSLATIONS;
+const i18n = new VueI18n({
+    locale: config.SYS_LANG, // set locale
+    messages, // set locale messages
+});
+
+// Define routes
+const routes = [];
+
+const router = new VueRouter({
+    routes, // short for `routes: routes`,
+});
+
+new Vue({
+    i18n,
+    // eslint-disable-line no-new
+    el: "#customCaseList",
+    router,
+    render: (h) => h(CustomCaseList),
+});
\ No newline at end of file
diff --git a/resources/assets/js/api/Api.js b/resources/assets/js/api/Api.js
index 44bd22d48..e1c4577a7 100644
--- a/resources/assets/js/api/Api.js
+++ b/resources/assets/js/api/Api.js
@@ -1,85 +1,14 @@
 import _ from "lodash";
 import axios from "axios";
 const urlBase = "{server}/api/1.0/{workspace}{service}";
-const services = {
-    AUTHENTICATE_USER: "/oauth2/token",
-    USER_DATA: "/light/user/data",
-    GET_MAIN_MENU_COUNTERS: "/light/counters",
-    GET_NOTES: "/cases/{app_uid}/notes/paged?files={files}",
-    GET_PROCESS_MAP: "/light/project/{prj_uid}/case/{app_uid}",
-    GET_LIST_UNASSIGNED: "/light/unassigned{suffix}",
-    GET_LISTS_PARTICIPATED: "/light/participated{suffix}",
-    GET_LISTS_DRAFT: "/light/draft{suffix}",
-    GET_LISTS_PAUSED: "/light/paused",
-    GET_LISTS_COMPLETED: "/light/completed",
-    GET_USERS_PICTURES: "/light/users/data",
-    FORMS_ARRAY: "/light/project/{pro_uid}/activity/{act_uid}/steps",
-    GET_NEW_CASES: "/case/start-cases?type_view=category",
-    GET_HISTORY_CASES: "/light/history/{app_uid}",
-    LOGOUT_USER: "/light/logout",
-    UPLOAD_LOCATION: "/light/case/{app_uid}/upload/location",
-    GET_FORM_ID_TO_UPLOAD: "/light/case/{app_uid}/upload",
-    UPLOAD_FILE: "/light/case/{app_uid}/upload/{app_doc_uid}",
-    GET_CASE_INFO: "/light/{type}/case/{app_uid}",
-    REQUEST_PAUSE_CASE: "/light/cases/{app_uid}/pause",
-    UNPAUSE_CASE: "/cases/{app_uid}/unpause",
-    CANCEL_CASE: "/cases/{app_uid}/cancel",
-    REQUEST_SYS_CONFIG: "/light/config",
-    REQUEST_SYS_CONFIG_V2: "/light/config?fileLimit=true",
-    ROUTE_CASE: "/light/cases/{app_uid}/route-case",
-    CLAIM_CASE: "/case/{app_uid}/claim",
-    GET_FILE_VERSIONS: "/cases/{app_uid}/input-document/{app_doc_uid}/versions",
-    REGISTER: "https:trial32.processmaker.com/syscolosa/en/neoclassic_pro/9893000714bdb2d52ecc317052629917/Trial_RequestPostMobile.php",
-    POST_NOTE: "/case/{app_uid}/note",
-    LAST_OPEN_INDEX: "/light/lastopenindex/case/{app_uid}",
-    REGISTER_WITH_GOOGLE_FAKE_URL: "fakeurl",
-    SIGN_IN_TO_PM_WITH_GOOGLE: "/authentication/gmail",
-    GET_CASE_VARIABLES: "/light/{app_uid}/variables?pro_uid={pro_uid}&act_uid={act_uid}&app_index={del_index}",
-    REGISTER_DEVICE_TOKEN_FOR_NOTIFICATIONS: "/light/notification",
-    UNREGISTER_DEVICE_TOKEN_FOR_NOTIFICATIONS: "/light/notification/{dev_uid}",
-    GET_ASSIGMENT_USERS: "/light/task/{act_uid}/case/{app_uid}/{del_index}/assignment",
-    GET_CASE_INPUT_FILES: "/cases/{app_uid}/input-documents",
-    GET_CASE_OUTPUT_FILES: "/cases/{app_uid}/output-documents",
-    DOWNLOAD_IMAGE_BASE64: "/light/case/{app_uid}/download64",
-    DOWNLOAD_INPUT_FILE: "/cases/{app_uid}/input-document/{app_doc_uid}/file?v=1",
-    DOWNLOAD_OUTPUT_FILE: "/cases/{app_uid}/output-document/{app_doc_uid}/file?v=1",
-    VERIFY_CASE_NOT_ROUTED: "/light/case/{app_uid}/{del_index}",
-    GET_FORM_DEFINITION: "/light/project/{prj_uid}/dynaform/{dyn_uid}",
-    GET_FORM_DEFINITION_PREPROCESSED: "/light/project/{prj_uid}/dynaformprocessed/{dyn_uid}?app_uid={app_uid}&del_index={del_index}",
-    START_CASE: "/light/process/{pro_uid}/task/{task_uid}/start-case",
-    GET_FORM_DEFINITIONS: "/cases/{app_uid}/input-document/{app_doc_uid}/file?v={version}",
-    SAVE_FORM_DATA: "/light/{app_uid}/variable?dyn_uid={dyn_uid}&del_index={del_index}",
-    EXECUTE_TRIGGERS_AFTER: "/light/process/{pro_uid}/task/{act_uid}/case/{app_uid}/step/{step_uid}/execute-trigger/after",
-    EXECUTE_QUERY: "/project/{prj_uid}/process-variable/{var_name}/execute-query",
-    EXECUTE_QUERY_SUGGEST: "/project/{prj_uid}/process-variable/{var_name}/execute-query-suggest",
-    CHECK: "/light/{listType}/check",
-    GET_NEXT_STEP: "/light/get-next-step/{app_uid}",
-    REQUEST_SQLITE_DATABASE_TABLES: "/pmtable?offline=1",
-    REQUEST_SQLITE_DATABASE_TABLES_DATA: "/pmtable/offline/data?compress=false",
-    MY_CASES: "/home/mycases",
-    TODO_LIST: "/home/todo",
-    DRAFT_LIST: "/home/draft",
-    PAUSED_LIST: "/home/paused",
-    UNASSIGNED_LIST: "/home/unassigned",
-    MY_FILTERS: "/cases/advanced-search/filters",
-    POST_MY_FILTERS: "/cases/advanced-search/filter",
-    PUT_MY_FILTERS: "/cases/advanced-search/filter/",
-    DELETE_MY_FILTERS: "/cases/advanced-search/filter/",
-    SEARCH: "/home/search",
-    PROCESSES: "/home/processes",
-    USERS: "/home/users",
-    TASKS: "/home/tasks",
-    CATEGORIES: "/home/categories",
-    DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
-    PAUSE_CASE: "/cases/{app_uid}/pause",
-    REASSIGN_CASE: "/cases/{app_uid}/reassign-case",
-    REASSIGN_USERS: "/light/userstoreassign/{task_uid}"
-};
+class Api {
+	constructor(services) {
+		this.services = services;
+	}
 
-export default {
     getUrl(keys, service) {
         let k;
-        let url = urlBase.replace(/{service}/, services[service]);
+        let url = urlBase.replace(/{service}/, this.services[service]);
         let index;
         let reg;
 
@@ -98,7 +27,7 @@ export default {
             }
         }
         return url;
-    },
+    }
     /**
      * options.method = "post|get"
      * options.service = "ENDPOINT ALIAS"
@@ -128,7 +57,7 @@ export default {
                 "Accept-Language": lang
             }
         });
-    },
+    }
     get(options) {
         let service = options.service || "",
             params = options.params || {},
@@ -151,7 +80,7 @@ export default {
                 "Accept-Language": lang
             }
         });
-    },
+    }
     post(options) {
         let service = options.service || "",
             params = options.params || {},
@@ -177,7 +106,7 @@ export default {
                 "Accept-Language": lang
             }, headers)
         });
-    },
+    }
 
     postFiles(options) {
         let service = options.service || "",
@@ -201,7 +130,7 @@ export default {
                 "Authorization": `Bearer ` + credentials.accessToken
             }, headers)
         });
-    },
+    }
 
     delete(options) {
         let service = options.service || "",
@@ -224,7 +153,7 @@ export default {
                 "Accept-Language": lang
             }
         });
-    },
+    }
     put(options) {
         let service = options.service || "",
             params = options.params || {},
@@ -249,7 +178,7 @@ export default {
                 "Authorization": `Bearer ` + credentials.accessToken
             }
         });
-    },
+    }
     /**
      * Put action in AXIOS
      * @param {*} options 
@@ -280,4 +209,6 @@ export default {
             }
         });
     }
-};
+}
+
+export default Api;
diff --git a/resources/assets/js/api/CaseNotes.js b/resources/assets/js/api/CaseNotes.js
index 624210c17..d37d020bf 100644
--- a/resources/assets/js/api/CaseNotes.js
+++ b/resources/assets/js/api/CaseNotes.js
@@ -1,6 +1,7 @@
 import axios from "axios";
-import Api from "./Api.js";
-
+import ApiInstance from "./Api.js";
+import Services from "./Services";
+let Api = new ApiInstance( Services );
 export let caseNotes = {
     post(data) {
         var params = new FormData();
diff --git a/resources/assets/js/api/Cases.js b/resources/assets/js/api/Cases.js
index af84bf068..ea0003d1f 100644
--- a/resources/assets/js/api/Cases.js
+++ b/resources/assets/js/api/Cases.js
@@ -1,5 +1,7 @@
 import axios from "axios";
-import Api from "./Api.js";
+import ApiInstance from "./Api.js";
+import Services from "./Services";
+let Api = new ApiInstance( Services );
 
 export let cases = {
     myCases(data) {
diff --git a/resources/assets/js/api/Filters.js b/resources/assets/js/api/Filters.js
index 644674cc1..cac153fa5 100644
--- a/resources/assets/js/api/Filters.js
+++ b/resources/assets/js/api/Filters.js
@@ -1,5 +1,7 @@
 import axios from "axios";
-import Api from "./Api.js";
+import ApiInstance from "./Api.js";
+import Services from "./Services";
+let Api = new ApiInstance( Services );
 export let filters = {
     get(data) {
         return Api.get({
diff --git a/resources/assets/js/api/Process.js b/resources/assets/js/api/Process.js
index f83f0b0a3..ed4ef4d83 100644
--- a/resources/assets/js/api/Process.js
+++ b/resources/assets/js/api/Process.js
@@ -1,4 +1,6 @@
-import Api from "./Api.js";
+import ApiInstance from "./Api.js";
+import Services from "./Services";
+let Api = new ApiInstance( Services );
 
 export let process = {
     list: {
diff --git a/resources/assets/js/api/Services.js b/resources/assets/js/api/Services.js
new file mode 100644
index 000000000..95bcdcedb
--- /dev/null
+++ b/resources/assets/js/api/Services.js
@@ -0,0 +1,71 @@
+ export default {
+    AUTHENTICATE_USER: "/oauth2/token",
+    USER_DATA: "/light/user/data",
+    GET_MAIN_MENU_COUNTERS: "/light/counters",
+    GET_NOTES: "/cases/{app_uid}/notes/paged?files={files}",
+    GET_PROCESS_MAP: "/light/project/{prj_uid}/case/{app_uid}",
+    GET_LIST_UNASSIGNED: "/light/unassigned{suffix}",
+    GET_LISTS_PARTICIPATED: "/light/participated{suffix}",
+    GET_LISTS_DRAFT: "/light/draft{suffix}",
+    GET_LISTS_PAUSED: "/light/paused",
+    GET_LISTS_COMPLETED: "/light/completed",
+    GET_USERS_PICTURES: "/light/users/data",
+    FORMS_ARRAY: "/light/project/{pro_uid}/activity/{act_uid}/steps",
+    GET_NEW_CASES: "/case/start-cases?type_view=category",
+    GET_HISTORY_CASES: "/light/history/{app_uid}",
+    LOGOUT_USER: "/light/logout",
+    UPLOAD_LOCATION: "/light/case/{app_uid}/upload/location",
+    GET_FORM_ID_TO_UPLOAD: "/light/case/{app_uid}/upload",
+    UPLOAD_FILE: "/light/case/{app_uid}/upload/{app_doc_uid}",
+    GET_CASE_INFO: "/light/{type}/case/{app_uid}",
+    REQUEST_PAUSE_CASE: "/light/cases/{app_uid}/pause",
+    UNPAUSE_CASE: "/cases/{app_uid}/unpause",
+    CANCEL_CASE: "/cases/{app_uid}/cancel",
+    REQUEST_SYS_CONFIG: "/light/config",
+    REQUEST_SYS_CONFIG_V2: "/light/config?fileLimit=true",
+    ROUTE_CASE: "/light/cases/{app_uid}/route-case",
+    CLAIM_CASE: "/case/{app_uid}/claim",
+    GET_FILE_VERSIONS: "/cases/{app_uid}/input-document/{app_doc_uid}/versions",
+    REGISTER: "https:trial32.processmaker.com/syscolosa/en/neoclassic_pro/9893000714bdb2d52ecc317052629917/Trial_RequestPostMobile.php",
+    POST_NOTE: "/case/{app_uid}/note",
+    LAST_OPEN_INDEX: "/light/lastopenindex/case/{app_uid}",
+    REGISTER_WITH_GOOGLE_FAKE_URL: "fakeurl",
+    SIGN_IN_TO_PM_WITH_GOOGLE: "/authentication/gmail",
+    GET_CASE_VARIABLES: "/light/{app_uid}/variables?pro_uid={pro_uid}&act_uid={act_uid}&app_index={del_index}",
+    REGISTER_DEVICE_TOKEN_FOR_NOTIFICATIONS: "/light/notification",
+    UNREGISTER_DEVICE_TOKEN_FOR_NOTIFICATIONS: "/light/notification/{dev_uid}",
+    GET_ASSIGMENT_USERS: "/light/task/{act_uid}/case/{app_uid}/{del_index}/assignment",
+    GET_CASE_INPUT_FILES: "/cases/{app_uid}/input-documents",
+    GET_CASE_OUTPUT_FILES: "/cases/{app_uid}/output-documents",
+    DOWNLOAD_IMAGE_BASE64: "/light/case/{app_uid}/download64",
+    DOWNLOAD_INPUT_FILE: "/cases/{app_uid}/input-document/{app_doc_uid}/file?v=1",
+    DOWNLOAD_OUTPUT_FILE: "/cases/{app_uid}/output-document/{app_doc_uid}/file?v=1",
+    VERIFY_CASE_NOT_ROUTED: "/light/case/{app_uid}/{del_index}",
+    GET_FORM_DEFINITION: "/light/project/{prj_uid}/dynaform/{dyn_uid}",
+    GET_FORM_DEFINITION_PREPROCESSED: "/light/project/{prj_uid}/dynaformprocessed/{dyn_uid}?app_uid={app_uid}&del_index={del_index}",
+    START_CASE: "/light/process/{pro_uid}/task/{task_uid}/start-case",
+    GET_FORM_DEFINITIONS: "/cases/{app_uid}/input-document/{app_doc_uid}/file?v={version}",
+    SAVE_FORM_DATA: "/light/{app_uid}/variable?dyn_uid={dyn_uid}&del_index={del_index}",
+    EXECUTE_TRIGGERS_AFTER: "/light/process/{pro_uid}/task/{act_uid}/case/{app_uid}/step/{step_uid}/execute-trigger/after",
+    EXECUTE_QUERY: "/project/{prj_uid}/process-variable/{var_name}/execute-query",
+    EXECUTE_QUERY_SUGGEST: "/project/{prj_uid}/process-variable/{var_name}/execute-query-suggest",
+    CHECK: "/light/{listType}/check",
+    GET_NEXT_STEP: "/light/get-next-step/{app_uid}",
+    REQUEST_SQLITE_DATABASE_TABLES: "/pmtable?offline=1",
+    REQUEST_SQLITE_DATABASE_TABLES_DATA: "/pmtable/offline/data?compress=false",
+    MY_CASES: "/home/mycases",
+    TODO_LIST: "/home/todo",
+    DRAFT_LIST: "/home/draft",
+    PAUSED_LIST: "/home/paused",
+    UNASSIGNED_LIST: "/home/unassigned",
+    MY_FILTERS: "/cases/advanced-search/filters",
+    POST_MY_FILTERS: "/cases/advanced-search/filter",
+    PUT_MY_FILTERS: "/cases/advanced-search/filter/",
+    DELETE_MY_FILTERS: "/cases/advanced-search/filter/",
+    SEARCH: "/home/search",
+    PROCESSES: "/home/processes",
+    USERS: "/home/users",
+    TASKS: "/home/tasks",
+    CATEGORIES: "/home/categories",
+    DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}"
+};
\ No newline at end of file
diff --git a/resources/views/admin/settings/customCasesList.blade.php b/resources/views/admin/settings/customCasesList.blade.php
new file mode 100644
index 000000000..8865ba9d3
--- /dev/null
+++ b/resources/views/admin/settings/customCasesList.blade.php
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>{{G::Loadtranslation('ID_')}}</title>
+    <link rel="stylesheet" href="/webapp/css/app.css">
+</head>
+
+<body>
+    {{ ScriptVariables::render() }}
+    <div id="customCaseList">
+    </div>
+</body>
+<script type="text/javascript" src="/webapp/js/admin/settings/customCaseList/main.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/webpack.mix.js b/webpack.mix.js
index 5d11439cd..94a53898c 100755
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -15,4 +15,5 @@ mix.setPublicPath('workflow/public_html/webapp/')
     .setResourceRoot('/webapp/')
     .js('resources/assets/js/home/main.js', 'js/home')
     .sass('resources/assets/sass/app.scss', 'css/app.css')
+    .js('resources/assets/js/admin/settings/customCaseList/main.js', 'js/admin/settings/customCaseList')
     .version();
\ No newline at end of file
diff --git a/workflow/engine/content/translations/english/processmaker.en.po b/workflow/engine/content/translations/english/processmaker.en.po
index 8b8587534..9f9b15371 100755
--- a/workflow/engine/content/translations/english/processmaker.en.po
+++ b/workflow/engine/content/translations/english/processmaker.en.po
@@ -5675,6 +5675,12 @@ msgstr "Data List is not available for old version."
 msgid "DATE"
 msgstr "DATE"
 
+# TRANSLATION
+# LABEL/ID_DATE_CREATED
+#: LABEL/ID_DATE_CREATED
+msgid "Date Created"
+msgstr "Date Created"
+
 # TRANSLATION
 # LABEL/ID_DATE_FORMAT
 #: LABEL/ID_DATE_FORMAT
@@ -5795,6 +5801,12 @@ msgstr "Date"
 msgid "The value '{0}' is not a valid date for the format '{1}'."
 msgstr "The value '{0}' is not a valid date for the format '{1}'."
 
+# TRANSLATION
+# LABEL/ID_DATE_UPDATED
+#: LABEL/ID_DATE_UPDATED    
+msgid "Date Created"
+msgstr "Date Created"
+
 # TRANSLATION
 # LABEL/ID_DAY
 #: LABEL/ID_DAY
diff --git a/workflow/engine/data/mysql/insert.sql b/workflow/engine/data/mysql/insert.sql
index afd611e48..c711385dc 100755
--- a/workflow/engine/data/mysql/insert.sql
+++ b/workflow/engine/data/mysql/insert.sql
@@ -57770,6 +57770,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_DATA_CORRECT','en','The configuration is correct.','2015-02-23') ,
 ( 'LABEL','ID_DATA_LIST_NOT_AVAILABLE_FOR_OLDVER','en','Data List is not available for old version.','2014-01-15') ,
 ( 'LABEL','ID_DATE','en','DATE','2014-01-15') ,
+( 'LABEL','ID_DATE_CREATED','en','Date Created','2021-07-26') ,
 ( 'LABEL','ID_DATE_FORMAT','en','Date Format','2014-01-15') ,
 ( 'LABEL','ID_DATE_FORMAT_1','en','Y-m-d H:i:s','2014-01-15') ,
 ( 'LABEL','ID_DATE_FORMAT_10','en','D d M, Y','2014-01-15') ,
@@ -57790,6 +57791,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_DATE_FORMAT_9','en','D M j G:i:s T Y','2014-01-15') ,
 ( 'LABEL','ID_DATE_LABEL','en','Date','2014-01-15') ,
 ( 'LABEL','ID_DATE_NOT_VALID','en','The value ''{0}'' is not a valid date for the format ''{1}''.','2014-05-29') ,
+( 'LABEL','ID_DATE_UPDATED','en','Date Updated','2021-07-26') ,
 ( 'LABEL','ID_DAY','en','Day','2014-01-15') ,
 ( 'LABEL','ID_DAYS','en','Days','2014-01-15') ,
 ( 'LABEL','ID_DAY_DAYS','en','Day(s)','2020-10-02') ,
diff --git a/workflow/engine/methods/cases/casesListSetup.php b/workflow/engine/methods/cases/casesListSetup.php
index cb89ab15a..729189c9d 100644
--- a/workflow/engine/methods/cases/casesListSetup.php
+++ b/workflow/engine/methods/cases/casesListSetup.php
@@ -1,4 +1,9 @@
 <?php
+use Eusebiu\JavaScript\Facades\ScriptVariables;
+use Illuminate\Support\Facades\View;
+use ProcessMaker\Core\System;
+
+global $translation;
 global $RBAC;
 
 if ($RBAC->userCanAccess("PM_SETUP") != 1 || $RBAC->userCanAccess("PM_SETUP_ADVANCE") != 1) {
@@ -15,4 +20,14 @@ $oHeadPublisher->addContent('cases/casesListSetup'); //adding a html file  .html
 $oHeadPublisher->assignNumber("pageSize", 20); //sending the page size
 $oHeadPublisher->assignNumber("availableFields", G::json_encode($availableFields));
 
-G::RenderPage("publish", "extJs");
+$userCanAccess = 1;
+
+$pmDynaform = new PmDynaform();
+ScriptVariables::add('SYS_CREDENTIALS', $pmDynaform->getCredentials());
+ScriptVariables::add('SYS_SERVER_API', System::getHttpServerHostnameRequestsFrontEnd());
+ScriptVariables::add('SYS_SERVER_AJAX', System::getServerProtocolHost());
+ScriptVariables::add('SYS_WORKSPACE', config("system.workspace"));
+ScriptVariables::add('SYS_URI', SYS_URI);
+ScriptVariables::add('SYS_LANG', SYS_LANG);
+ScriptVariables::add('TRANSLATIONS', $translation);
+echo View::make('Views::admin.settings.customCasesList', compact("userCanAccess"))->render();
\ No newline at end of file