diff --git a/package-lock.json b/package-lock.json
index a673d6128..ea34e5319 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,21 @@
         "regenerator-runtime": "^0.13.2"
       }
     },
+    "@fortawesome/fontawesome": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz",
+      "integrity": "sha512-c0/MtkPVT0fmiFcCyYoPjkG9PkMOvfrZw2+0BaJ+Rh6UEcK1AR/LaRgrHHjUkbAbs9LXxQJhFS8CJ4uSnK2+JA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.1.7"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.1.7",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
+          "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg=="
+        }
+      }
+    },
     "@fortawesome/fontawesome-common-types": {
       "version": "0.2.35",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
diff --git a/package.json b/package.json
index e212a1f75..e9f5bf693 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "vue-template-compiler": "^2.6.10"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.8",
     "@rightbraintechbd/vue-awesome-icon-picker": "^1.1.0",
     "axios": "^0.15.3",
     "bootstrap": "^4.5.3",
diff --git a/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue b/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
index 26999e531..6314c5175 100644
--- a/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
+++ b/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
@@ -91,7 +91,7 @@
                             label="Icon "
                             label-for="icon"
                         >
-                            <icon-picker @selected="onSelectIcon" :color="menuColor"/>
+                            <icon-picker @selected="onSelectIcon" :default="params.iconList"/>
                         </b-form-group>
                         <div>
                              <b-form-group
@@ -99,7 +99,7 @@
                                 label="Menu Color "
                                 label-for="icon"    
                             >  
-                                <verte :value="menuColor" id="icon" @input="onChangeColor" picker="square" menuPosition="left" model="hex">
+                                <verte :value="params.iconColor" id="icon" @input="onChangeColor" picker="square" menuPosition="left" model="hex">
                                         <svg viewBox="0 0 50 50">
                                             <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
                                         </svg> 
@@ -156,7 +156,6 @@ export default {
         return {
              icon: "fas fa-user-cog",
             isLoading: false,
-            menuColor:"#4287f5",
             pmTablesOptions: [],
             columns: ['name', 'code', 'uri'],
             data: utils.getData(),
@@ -179,7 +178,7 @@ export default {
     methods: {
         onSelectIcon(data){
             console.log (data);
-
+            // this.params.iconList = data;
         },
         onChangeColor(color){
             console.log(color);
diff --git a/resources/assets/js/admin/settings/customCaseList/Tables.vue b/resources/assets/js/admin/settings/customCaseList/Tables.vue
index 3da9f4b1c..6490c6138 100644
--- a/resources/assets/js/admin/settings/customCaseList/Tables.vue
+++ b/resources/assets/js/admin/settings/customCaseList/Tables.vue
@@ -59,8 +59,8 @@ export default {
                         name: "Rocko",
                         description: "algo te texto",
                         tableUid: "1234",
-                        iconList: '',
-                        iconColor: '',
+                        iconList: 'far fa-calendar-alt',
+                        iconColor: '#4287f5',
                         iconColorScreen:'',
                         type: this.module
 
diff --git a/resources/assets/js/admin/settings/customCaseList/main.js b/resources/assets/js/admin/settings/customCaseList/main.js
index 74038fec3..f37865be3 100644
--- a/resources/assets/js/admin/settings/customCaseList/main.js
+++ b/resources/assets/js/admin/settings/customCaseList/main.js
@@ -2,25 +2,25 @@ 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 { BootstrapVue } 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";
-
 import Verte from 'verte';
 import 'verte/dist/verte.css';
+import fontawesome from '@fortawesome/fontawesome'
+
+fontawesome.config = { autoReplaceSvg: false }
 // register component globally
 Vue.component('verte', Verte);
-Vue.use(VueRouter);
+Vue.use(VueRouter); 
 Vue.use(VueSidebarMenu);
 Vue.use(BootstrapVue);
 Vue.use(VueI18n);
-Vue.use(BootstrapVueIcons)
 Vue.use(ServerTable, {}, false, 'bootstrap3', {});
 Vue.use(ClientTable, {}, false, 'bootstrap3', {});
 window.ProcessMaker = {
diff --git a/resources/assets/js/components/iconPicker/IconPicker.vue b/resources/assets/js/components/iconPicker/IconPicker.vue
index e77ae6fbd..1ec57175f 100644
--- a/resources/assets/js/components/iconPicker/IconPicker.vue
+++ b/resources/assets/js/components/iconPicker/IconPicker.vue
@@ -1,210 +1,239 @@
-<template>  
-  <div class="rbt-icon-picker">
-
-    <b-button @click="popUpActive = true">  
-      <i ref="icon" v-bind:class="`${selectedIcon.type} fa-${selectedIcon.name}`" v-bind:color="color"></i>
-    </b-button>
-  
+<template>
+    <div class="rbt-icon-picker">
+        <b-button @click="popUpActive = true">
+            <i ref="icon" :class="icon"></i>
+        </b-button>
         <div class="rip-popup-component" :style="popupActiveStyle">
-          <div class="rip-popup-bg"></div>  
-          <div class="rip-popup">
-
-
-            <div class="rip-popup-content">
-              <div class="rip-search">
-                <div class="rip-input">
-                  <label for="ripSearch" style="display: none;">Search for Icon</label>
-                  <input id="ripSearch" placeholder="Search for Icon" v-model="searchText" @input="searchTextChanged">
-                  <span class="input-append">
-                      <i class="fas fa-search"></i>
-                  </span>
+            <div class="rip-popup-bg"></div>
+            <div class="rip-popup">
+                <div class="rip-popup-content">
+                    <div class="rip-search">
+                        <div class="rip-input">
+                            <label for="ripSearch" style="display: none;"
+                                >Search for Icon</label
+                            >
+                            <input
+                                id="ripSearch"
+                                placeholder="Search for Icon"
+                                v-model="searchText"
+                                @input="searchTextChanged"
+                            />
+                            <span class="input-append">
+                                <i class="fas fa-search"></i>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="rip-content">
+                        <div class="rip-not-found" v-show="loading">
+                            <i class="fas fa-spinner fa-pulse"></i>
+                        </div>
+                        <div class="rip-icons" v-show="!loading">
+                            <h4 class="icon-title">
+                                Regular Icons
+                            </h4>
+                            <p
+                                style="text-align: center;"
+                                v-if="regularIcons.length <= 0"
+                            >
+                                <i class="fas fa-eye-slash"></i>
+                                Sorry, No icons found!
+                            </p>
+                            <ul class="rip-row" v-if="regularIcons.length > 0">
+                                <li
+                                    v-for="(icon, index) in regularIcons"
+                                    :key="index"
+                                    class="rip-col"
+                                >
+                                    <div class="icon-content text-center">
+                                        <div
+                                            class="icon-el"
+                                            @click="selectIcon(icon, 'far')"
+                                        >
+                                            <i :class="`far fa-${icon}`"></i>
+                                        </div>
+                                        <div class="icon-title">
+                                            {{ icon }}
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                            <h4 class="icon-title">
+                                Brand Icons
+                            </h4>
+                            <p
+                                style="text-align: center;"
+                                v-if="brandIcons.length <= 0"
+                            >
+                                <i class="fas fa-eye-slash"></i>
+                                Sorry, No Brand icons found!
+                            </p>
+                            <ul class="rip-row" v-if="brandIcons.length > 0">
+                                <li
+                                    v-for="(icon, index) in brandIcons"
+                                    :key="index"
+                                    class="rip-col"
+                                >
+                                    <div class="icon-content text-center">
+                                        <div
+                                            class="icon-el"
+                                            @click="selectIcon(icon, 'fab')"
+                                        >
+                                            <i :class="`fab fa-${icon}`"></i>
+                                        </div>
+                                        <div class="icon-title">
+                                            {{ icon }}
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                            <h4 class="icon-title">
+                                Solid Icons
+                            </h4>
+                            <p
+                                style="text-align: center;"
+                                v-if="solidIcons.length <= 0"
+                            >
+                                <i class="fas fa-eye-slash"></i>
+                                Sorry, No Solid icons found!
+                            </p>
+                            <ul class="rip-row" v-if="solidIcons.length > 0">
+                                <li
+                                    v-for="(icon, index) in solidIcons"
+                                    :key="index"
+                                    class="rip-col"
+                                >
+                                    <div class="icon-content text-center">
+                                        <div
+                                            class="icon-el"
+                                            @click="selectIcon(icon, 'fas')"
+                                        >
+                                            <i :class="`fas fa-${icon}`"></i>
+                                        </div>
+                                        <div class="icon-title">
+                                            {{ icon }}
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                 </div>
-              </div>
-
-              <div class="rip-content">
-                <div class="rip-not-found" v-show="loading">
-                  <i class="fas fa-spinner fa-pulse"></i>
-                </div>
-
-                <div class="rip-icons" v-show="!loading">
-
-                  <h4 class="icon-title">
-                    Regular Icons
-                  </h4>
-                  <p style="text-align: center;" v-if="regularIcons.length <= 0">
-                    <i class="fas fa-eye-slash"></i>
-                    Sorry, No icons found!
-                  </p>
-                  <ul class="rip-row" v-if="regularIcons.length > 0">
-                    <li v-for="(icon, index) in regularIcons" :key="index" class="rip-col">
-                      <div class="icon-content text-center">
-                        <div class="icon-el" @click="selectIcon(icon, 'far')">
-                          <i :class="`far fa-${icon}`"></i>
-                        </div>
-                        <div class="icon-title">
-                          {{ icon }}
-                        </div>
-                      </div>
-                    </li>
-                  </ul>
-
-                  <h4 class="icon-title">
-                    Brand Icons
-                  </h4>
-                  <p style="text-align: center;" v-if="brandIcons.length <= 0">
-                    <i class="fas fa-eye-slash"></i>
-                    Sorry, No Brand icons found!
-                  </p>
-
-                  <ul class="rip-row" v-if="brandIcons.length > 0">
-                    <li v-for="(icon, index) in brandIcons" :key="index" class="rip-col">
-                      <div class="icon-content text-center">
-                        <div class="icon-el" @click="selectIcon(icon, 'fab')">
-                          <i :class="`fab fa-${icon}`"></i>
-                        </div>
-                        <div class="icon-title">
-                          {{ icon }}
-                        </div>
-                      </div>
-                    </li>
-                  </ul>
-
-                  <h4 class="icon-title">
-                    Solid Icons
-                  </h4>
-                  <p style="text-align: center;" v-if="solidIcons.length <= 0">
-                    <i class="fas fa-eye-slash"></i>
-                    Sorry, No Solid icons found!
-                  </p>
-
-                  <ul class="rip-row" v-if="solidIcons.length > 0">
-                    <li v-for="(icon, index) in solidIcons" :key="index" class="rip-col">
-                      <div class="icon-content text-center">
-                        <div class="icon-el" @click="selectIcon(icon, 'fas')">
-                          <i :class="`fas fa-${icon}`"></i>
-                        </div>
-                        <div class="icon-title">
-                          {{ icon }}
-                        </div>
-                      </div>
-                    </li>
-                  </ul>
-
-                </div>
-              </div>
             </div>
-          </div>
         </div>
-  </div>
+    </div>
 </template>
 
 <script>
-  import ripIcons from './assets/icons';
-  export default {
-    name: 'VueAwesomeIconPicker',
+import ripIcons from "./assets/icons";
+export default {
+    name: "VueAwesomeIconPicker",
     props: {
-      button: {
-        type: String,
-        default: 'Pick A Icon'
-      },
-      color: {
-        type: String,
-        default: 'black'
-      },
-      title: {
-        type: String,
-        default: 'Vue Awesome Icon Picker'
-      },
-      iconPreview: {
-        type: Boolean,
-        default: true
-      }
+        button: {
+            type: String,
+            default: "Pick A Icon",
+        },
+        color: {
+            type: String,
+            default: "black",
+        },
+        title: {
+            type: String,
+            default: "Vue Awesome Icon Picker",
+        },
+        iconPreview: {
+            type: Boolean,
+            default: true,
+        },
+        default: {
+            type: String,
+            default: null,
+        },
     },
     data() {
-      return {
-        loading: false,
-        allIcons: {
-            brand: [],
-            regular: [],
-            solid: []
-        },
+        return {
+            loading: false,
+            allIcons: {
+                brand: [],
+                regular: [],
+                solid: [],
+            },
 
-        popUpActive: false,
-        selectedIcon: {
-          name: "list",
-          type: "fas"
-        },
-        searchText: '', 
-
-        searchIconNotFound: false
-      }
+            popUpActive: false,
+            icon: null,
+            searchText: "",
+            searchIconNotFound: false,
+        };
     },
     watch: {
-      color(){
-        console.log("colores");
-      }
+        color() {
+            console.log("colores");
+        },
     },
     methods: {
-      selectIcon(icon, type) {
-        this.selectedIcon.type = type;
-        this.selectedIcon.name = icon;
-        this.popUpActive = false;
-        this.$emit('selected', this.selectedIcon);
-      },
-      searchTextChanged() {
-        this.searchIcon(this.searchText);
-      },
-      setDefaultIcons() {
-        this.allIcons.brand = ripIcons.brand;
-        this.allIcons.regular = ripIcons.regular;
-        this.allIcons.solid = ripIcons.solid;
-      },
-      searchIcon(txt) {
-        this.loading = true;
-        if(txt && txt.length > 0) {
-          setTimeout(() => {
-            this.loading = false;
-          }, 950);
+        selectIcon(icon, type) {
+            this.icon = `${type} fa-${icon}`;
+            this.popUpActive = false;
+            this.$emit("selected", this.icon);
+        },
+        searchTextChanged() {
+            this.searchIcon(this.searchText);
+        },
+        setDefaultIcons() {
+            this.allIcons.brand = ripIcons.brand;
+            this.allIcons.regular = ripIcons.regular;
+            this.allIcons.solid = ripIcons.solid;
+        },
+        searchIcon(txt) {
+            this.loading = true;
+            if (txt && txt.length > 0) {
+                setTimeout(() => {
+                    this.loading = false;
+                }, 950);
 
-          txt = txt.toLowerCase();
-          Object.keys(ripIcons).forEach(key => {
-            setTimeout(() => {
-              let icons = ripIcons[key].filter(ico => ico.indexOf(txt) > -1);
-              if(icons && icons.length > 0) {
-                this.allIcons[key] = icons;
-              } else {
-                this.allIcons[key] = [];
-              }
-            }, 320);
-          });
-        } else {
-          setTimeout(() => {
-            this.setDefaultIcons();
-            this.loading = false;
-          }, 950);
-        }
-      }
+                txt = txt.toLowerCase();
+                Object.keys(ripIcons).forEach((key) => {
+                    setTimeout(() => {
+                        let icons = ripIcons[key].filter(
+                            (ico) => ico.indexOf(txt) > -1
+                        );
+                        if (icons && icons.length > 0) {
+                            this.allIcons[key] = icons;
+                        } else {
+                            this.allIcons[key] = [];
+                        }
+                    }, 320);
+                });
+            } else {
+                setTimeout(() => {
+                    this.setDefaultIcons();
+                    this.loading = false;
+                }, 950);
+            }
+        },
     },
     created() {
-      this.setDefaultIcons();
+        this.setDefaultIcons();
+        if (this.default) {
+            this.icon = this.default;
+        }
     },
     computed: {
-      popupActiveStyle() {
-        return !this.popUpActive ? 'display: none;' : '';
-      },
-      brandIcons() {
-        return this.loading ? [] : this.allIcons.brand;
-      },
-      solidIcons() {
-        return this.loading ? [] : this.allIcons.solid;
-      },
-      regularIcons() {
-        return this.loading ? [] : this.allIcons.regular;
-      }
-    }
-  };
+        popupActiveStyle() {
+            return !this.popUpActive ? "display: none;" : "";
+        },
+        brandIcons() {
+            return this.loading ? [] : this.allIcons.brand;
+        },
+        solidIcons() {
+            return this.loading ? [] : this.allIcons.solid;
+        },
+        regularIcons() {
+            return this.loading ? [] : this.allIcons.regular;
+        },
+    },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "./assets/RbtIconPicker";
+@import "./assets/RbtIconPicker";
 </style>