diff --git a/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue b/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
index cebf88d51..a7c6ab199 100644
--- a/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
+++ b/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
@@ -285,6 +285,7 @@
                                             ></i>
                                         </b-button>
                                     </div>
+                                    <div slot="sort"><i class="fa fa-align-justify handle sort-handle"></i></div>
                                 </v-client-table>
                             </b-form-group>
                         </b-col>
@@ -307,13 +308,17 @@
 </template>
 <script>
 import Multiselect from "vue-multiselect";
+import draggable from "vuedraggable";
+import eventBus from "../../../home/EventBus/eventBus";
 import Api from "./Api/CaseList";
 import IconPicker from "../../../components/iconPicker/IconPicker.vue";
 import ModalPreview from "../../Modals/ModalPreview.vue";
+import _ from 'lodash';
 
 export default {
     name: "CaseListSketh",
     components: {
+        draggable,
         Multiselect,
         IconPicker,
         IconPicker,
@@ -322,6 +327,8 @@ export default {
     props: ["params", "module"],
     data() {
         return {
+            enabled: true,
+            dragging: false,
             icon: "fas fa-user-cog",
             isLoading: false,
             isButtonDisabled: false,
@@ -349,6 +356,7 @@ export default {
                 texts: {
                     count: "",
                 },
+                isDraggable: false,
             },
             dataCaseList: [],
             columnsCaseList: [
@@ -359,6 +367,7 @@ export default {
                 "typeSearch",
                 "enableFilter",
                 "action",
+                "sort",
             ],
             caseListOptions: {
                 headings: {
@@ -368,6 +377,7 @@ export default {
                     typeSearch: this.$i18n.t("ID_TYPE_OF_SEARCHING"),
                     enableFilter: this.$i18n.t("ID_ENABLE_SEARCH_FILTER"),
                     action: "",
+                    sort: "",
                 },
                 filterable: false,
                 perPage: 1000,
@@ -376,6 +386,7 @@ export default {
                 texts: {
                     count: "",
                 },
+                isDraggable: true,
             },
             defaultCaseList: [],
             isValidName: null,
@@ -390,10 +401,15 @@ export default {
         },
     },
     mounted() {
+        let that = this;
         this.getDefaultColumns(this.module.key);
         if(this.params.id) {
             this.editMode();
         }
+
+        eventBus.$on("sort-case-list", (data) => {
+            that.sortCaseList(data);
+        });
     },
     methods: {
         /**
@@ -745,6 +761,12 @@ export default {
         disabledField(field){
             const fields = [ "due_date" , "process_category" , "process_name" , "priority" ];
             return !(fields.indexOf(field) == -1);
+        },
+        sortCaseList(data) {
+            let auxList = _.cloneDeep(this.dataCaseList);
+            let aux = auxList.splice(data.oldIndex, 1);
+            auxList.splice(data.newIndex, 0, aux[0]);
+            this.dataCaseList = auxList;
         }
     },
 };
@@ -781,4 +803,7 @@ export default {
 .invalid .typo__label {
     color: #f04124;
 }
+.sort-handle {
+    color: gray
+}
 </style>
diff --git a/resources/assets/js/admin/settings/customCaseList/main.js b/resources/assets/js/admin/settings/customCaseList/main.js
index ae267b604..b5f6866b2 100644
--- a/resources/assets/js/admin/settings/customCaseList/main.js
+++ b/resources/assets/js/admin/settings/customCaseList/main.js
@@ -4,6 +4,7 @@ import VueSidebarMenu from "vue-sidebar-menu";
 import VueI18n from 'vue-i18n';
 import { BootstrapVue } from 'bootstrap-vue';
 import { ServerTable, Event, ClientTable} from 'vue-tables-2';
+import VtTableBody from '../../../components/vuetable/extends/VtTableBody';
 import "@fortawesome/fontawesome-free/css/all.css";
 import 'bootstrap/dist/css/bootstrap-grid.css';
 import 'bootstrap/dist/css/bootstrap.min.css'
@@ -18,7 +19,9 @@ Vue.use(VueSidebarMenu);
 Vue.use(BootstrapVue);
 Vue.use(VueI18n);
 Vue.use(ServerTable, {}, false, 'bootstrap3', {});
-Vue.use(ClientTable, {}, false, 'bootstrap3', {});
+Vue.use(ClientTable, {}, false, 'bootstrap3', {
+    tableBody: VtTableBody
+});
 window.ProcessMaker = {
     apiClient: require('axios')
 };
diff --git a/resources/assets/js/components/vuetable/extends/VtTableBody.vue b/resources/assets/js/components/vuetable/extends/VtTableBody.vue
new file mode 100644
index 000000000..e738c5b8c
--- /dev/null
+++ b/resources/assets/js/components/vuetable/extends/VtTableBody.vue
@@ -0,0 +1,84 @@
+<template>
+    <draggable
+        tag="tbody"
+        v-if="props.opts.isDraggable"
+        v-model="props.data"
+        handle=".handle"
+        @end="checkMove"
+        @start="dragging = true"
+    >
+        <vnodes :vnodes="props.slots.prependBody"/>
+        <vt-no-results-row v-if="props.data.length === 0"/>
+            <table-rows v-for="(row,index) in props.data"
+                :row="row"
+                :index="props.initialIndex + index + 1"
+                :renderChildRow="props.hasChildRow && props.openChildRows.includes(row[props.uniqueRowId])"
+                :key="index"
+            />
+
+        <vnodes :vnodes="props.slots.appendBody"/>
+    </draggable>
+    <tbody v-else>
+        <vnodes :vnodes="props.slots.prependBody"/>
+        <vt-no-results-row v-if="props.data.length === 0"/>
+        <table-rows v-for="(row,index) in props.data"
+            :row="row"
+            :index="props.initialIndex + index + 1"
+            :renderChildRow="props.hasChildRow && props.openChildRows.includes(row[props.uniqueRowId])"
+            :key="index"
+        />
+        <vnodes :vnodes="props.slots.appendBody"/>
+    </tbody>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+import eventBus from "../../../home/EventBus/eventBus";
+import VtNoResultsRow from 'vue-tables-2/compiled/components/VtNoResultsRow'
+import VtTableRow from 'vue-tables-2/compiled/components/VtTableRow'
+import VtChildRow from 'vue-tables-2/compiled/components/VtChildRow'
+
+export default {
+    name: "MyTableBody",
+    props: ['props'],
+    components: {
+        draggable,
+        VtNoResultsRow,
+        VtTableRow,
+        VtChildRow,
+        vnodes: {
+            functional: true,
+                render: (h, ctx) => ctx.props.vnodes
+            },
+        TableRows: {
+            functional: true,
+            render(h, ctx) {
+                let props = ctx.data.attrs,
+                    data = [
+                    h('vt-table-row', {
+                        props
+                    })
+                ];
+                if (props.renderChildRow) {
+                    data.push(h('vt-child-row', {
+                        props
+                    }))
+                }
+                return data
+            }
+        }
+    },
+    data() {
+        return {
+            enabled: true,
+            dragging: false,
+        }
+    },
+    methods: {
+        checkMove (e) {
+            this.dragging = false;
+            eventBus.$emit("sort-case-list", e);
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/workflow/engine/src/ProcessMaker/Model/CaseList.php b/workflow/engine/src/ProcessMaker/Model/CaseList.php
index 818311e1c..f1c78ce33 100644
--- a/workflow/engine/src/ProcessMaker/Model/CaseList.php
+++ b/workflow/engine/src/ProcessMaker/Model/CaseList.php
@@ -172,6 +172,8 @@ class CaseList extends Model
         }
         $attributes['CAL_COLUMNS'] = json_encode($attributes['CAL_COLUMNS']);
 
+        self::checkColumnsConfigurationChanges($id, $attributes['CAL_TYPE'], $attributes['CAL_COLUMNS']);
+
         $caseList = CaseList::where('CAL_ID', '=', $id);
         $caseList->update($attributes);
         $model = $caseList->get()->first();
@@ -181,6 +183,45 @@ class CaseList extends Model
         return $model;
     }
 
+    /**
+     * Check if the columns configuration has changed.
+     * @param int $calId
+     * @param string $type
+     * @param string $newColumns
+     * @return void
+     */
+    private function checkColumnsConfigurationChanges(int $calId, string $type, string $newColumns): void
+    {
+        $caseList = CaseList::where('CAL_ID', '=', $calId)->first();
+        if ($caseList->CAL_COLUMNS === $newColumns) {
+            return;
+        }
+
+        $listUserConfig = UserConfig::where('USC_NAME', '=', 'userConfig')
+            ->select()
+            ->get();
+        foreach ($listUserConfig as $userConfig) {
+            if (empty($userConfig->USC_SETTING)) {
+                continue;
+            }
+            $uscSetting = json_decode($userConfig->USC_SETTING);
+            if (!property_exists($uscSetting, $type)) {
+                continue;
+            }
+            if (!property_exists($uscSetting->{$type}, 'customCaseList')) {
+                continue;
+            }
+            if (!property_exists($uscSetting->{$type}->customCaseList, $calId)) {
+                continue;
+            }
+            if (!property_exists($uscSetting->{$type}->customCaseList->{$calId}, 'columns')) {
+                continue;
+            }
+            $uscSetting->{$type}->customCaseList->{$calId}->columns = ['detail', 'actions'];
+            UserConfig::editSetting($userConfig->USR_ID, 'userConfig', (array) $uscSetting);
+        }
+    }
+
     /**
      * Delete this model.
      * @param int $id
@@ -523,7 +564,7 @@ class CaseList extends Model
         //merge with stored information
         $result = [];
         foreach ($default as &$column) {
-            foreach ($storedColumns as $storedColumn) {
+            foreach ($storedColumns as $keyStoredColumn => $storedColumn) {
                 if (!is_object($storedColumn)) {
                     continue;
                 }
@@ -538,12 +579,25 @@ class CaseList extends Model
                     if (isset($storedColumn['set'])) {
                         $column['set'] = $storedColumn['set'];
                     }
+                    //for column ordering, this will be removed later
+                    $column['sortIndex'] = $keyStoredColumn;
                     break;
                 }
             }
             $result[] = $column;
         }
 
+        //sort columns by 'sortIndex', then 'sortIndex' will be removed.
+        $n = count($result);
+        usort($result, function ($a, $b) use ($n) {
+            $a1 = isset($a['sortIndex']) ? $a['sortIndex'] : $n;
+            $b1 = isset($b['sortIndex']) ? $b['sortIndex'] : $n;
+            return $a1 - $b1;
+        });
+        foreach ($result as &$value) {
+            unset($value['sortIndex']);
+        }
+
         return $result;
     }