Repository: ProcessMaker/modeler
Pull request #1548 (2023-05-12 19:26:58)

Four 8401
## Issue & Reproduction Steps

Expected behavior: 

Actual behavior: 

## Solution
-

## How to Test
Test the steps above

## Related Tickets & Packages
- 

## Code Review Checklist
- [ ] I have pulled this code locally and tested it on my instance, along with any associated packages.
- [ ] This code adheres to [ProcessMaker Coding Guidelines](https://github.com/ProcessMaker/processmaker/wiki/Coding-Guidelines).
- [ ] This code includes a unit test or an E2E test that tests its functionality, or is covered by an existing test.
- [ ] This solution fixes the bug reported in the original ticket.
- [ ] This solution does not alter the expected output of a component in a way that would break existing Processes.
- [ ] This solution does not implement any breaking changes that would invalidate documentation or cause existing Processes to fail.
- [ ] This solution has been tested with enterprise packages that rely on its functionality and does not introduce bugs in those packages.
- [ ] This code does not duplicate functionality that already exists in the framework or in ProcessMaker.
- [ ] This ticket conforms to the PRD associated with this part of ProcessMaker.



Patch:
diff --git a/.gitignore b/.gitignore
index 4f4f7235..53bea918 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,7 +18,6 @@ yarn-error.log*
 # Editor directories and files
 .idea
 .vscode
-*.code-workspace
 *.suo
 *.ntvs*
 *.njsproj
diff --git a/package-lock.json b/package-lock.json
index 6165f5b5..c0c5cef3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,20 +1,20 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.30.1",
+  "version": "1.29.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@processmaker/modeler",
-      "version": "1.30.1",
+      "version": "1.29.0",
       "dependencies": {
         "@babel/plugin-proposal-private-methods": "^7.12.1",
         "@fortawesome/fontawesome-free": "^5.11.2",
         "@fortawesome/fontawesome-svg-core": "^1.2.25",
         "@fortawesome/free-solid-svg-icons": "^5.11.2",
         "@fortawesome/vue-fontawesome": "^0.1.8",
-        "@processmaker/screen-builder": "2.70.0",
-        "@processmaker/vue-form-elements": "0.45.0",
+        "@processmaker/screen-builder": "2.29.0",
+        "@processmaker/vue-form-elements": "0.29.1",
         "@processmaker/vue-multiselect": "^2.2.0",
         "acorn": "^6.4.2",
         "bootstrap": "^4.3.1",
@@ -37,7 +37,6 @@
         "vue": "^2.6.12",
         "vue-deepset": "^0.6.3",
         "vue-monaco": "^1.2.1",
-        "vue-popperjs": "^2.3.0",
         "vue-upload-component": "^2.8.20",
         "vuex": "^3.5.1"
       },
@@ -2828,13 +2827,12 @@
       }
     },
     "node_modules/@processmaker/screen-builder": {
-      "version": "2.70.0",
-      "resolved": "https://registry.npmjs.org/@processmaker/screen-builder/-/screen-builder-2.70.0.tgz",
-      "integrity": "sha512-9GzTuRO/EIE6sYSZGKNR72u8MjLmNc9oBhTNuQe2le56Ch1XAXzNewly+B/PR7MVYtuIJY2pRXnNOXOdU1XMIg==",
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/@processmaker/screen-builder/-/screen-builder-2.29.0.tgz",
+      "integrity": "sha512-Vag4ppV/CoJKFwd7iN+dRoNZiqdVvruXGbd3jrdrgTV9tHktfsjbjDyl4vt/cI7rXPObhrEQfwtXIL6NYMRjkA==",
       "dependencies": {
-        "axios-extensions": "^2.0.3",
-        "lodash": "^4.17.21",
-        "lru-cache": "^7.14.0",
+        "is-proxy": "^1.0.6",
+        "lodash": "^4.17.20",
         "moment": "^2.29.1",
         "moment-timezone": "^0.5.27",
         "scrollparent": "^2.0.1",
@@ -2849,7 +2847,7 @@
       },
       "peerDependencies": {
         "@panter/vue-i18next": "^0.15.0",
-        "@processmaker/vue-form-elements": "0.45.0",
+        "@processmaker/vue-form-elements": "0.29.1",
         "i18next": "^15.0.8",
         "vue": "^2.6.12",
         "vuex": "^3.1.1"
@@ -3122,11 +3120,15 @@
       }
     },
     "node_modules/@processmaker/screen-builder/node_modules/lru-cache": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
-      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=10"
       }
     },
     "node_modules/@processmaker/screen-builder/node_modules/postcss-modules-extract-imports": {
@@ -3234,18 +3236,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@processmaker/screen-builder/node_modules/semver/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "peer": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@processmaker/screen-builder/node_modules/serialize-javascript": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
@@ -3431,13 +3421,14 @@
       "peer": true
     },
     "node_modules/@processmaker/vue-form-elements": {
-      "version": "0.45.0",
-      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.45.0.tgz",
-      "integrity": "sha512-VXrNOY9jlKgh1KWoyn5QB8N8OH0wVD4ccQVqU4ZPhigIWr6158KR11RrSs1yBFFpXu6MMBuL1hyT2t1n6GbRqA==",
+      "version": "0.29.1",
+      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.29.1.tgz",
+      "integrity": "sha512-qla4tWiYYZ6NBviJQfD+TP5zOxSWcXEuTl/8rdFuhVXUT/YDfcmCbgPlqcvIoHyrmFb6XfuzBMuYcl3YqVYgag==",
       "dependencies": {
         "@tinymce/tinymce-vue": "2.0.0",
         "bootstrap": "^4.5.3",
         "jquery": "^3.5.1",
+        "luxon": "^1.11.3",
         "moment": "^2.29.1",
         "moment-timezone": "^0.5.26",
         "popper.js": "^1.14.4",
@@ -3446,8 +3437,7 @@
         "v-calendar": "^0.9.7",
         "validatorjs": "^3.22.1",
         "vue": "^2.6.12",
-        "vue-date-pick": "^1.5.1",
-        "vue-uniq-ids": "^1.0.0",
+        "vue-bootstrap-datetimepicker": "^5.0.1",
         "weekstart": "^1.0.0"
       },
       "engines": {
@@ -3805,11 +3795,6 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
-    "node_modules/@types/lru-cache": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/@types/lru-cache/-/lru-cache-4.1.3.tgz",
-      "integrity": "sha512-QjCOmf5kYwekcsfEKhcEHMK8/SvgnneuSDXFERBuC/DPca2KJIO/gpChTsVb35BoWLBpEAJWz1GFVEArSdtKtw=="
-    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -6482,35 +6467,11 @@
       "version": "0.21.4",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
       "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dev": true,
       "dependencies": {
         "follow-redirects": "^1.14.0"
       }
     },
-    "node_modules/axios-extensions": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/axios-extensions/-/axios-extensions-2.0.3.tgz",
-      "integrity": "sha512-KMWSNMth4eVUe1hDER1pfwMgVxeIrt9rstONy1nGHIxYPOiZ7NiwO252RRjUwTANOtUPEWaVbIP/6v3fREY9Eg==",
-      "dependencies": {
-        "@types/lru-cache": "^4.1.0",
-        "axios": "*",
-        "babel-runtime": "^6.26.0",
-        "lru-cache": "^4.1.1"
-      }
-    },
-    "node_modules/axios-extensions/node_modules/lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dependencies": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
-    },
-    "node_modules/axios-extensions/node_modules/yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
-    },
     "node_modules/axios-mock-adapter": {
       "version": "1.21.2",
       "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.21.2.tgz",
@@ -6908,6 +6869,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dev": true,
       "dependencies": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -6918,12 +6880,14 @@
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
       "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
       "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "dev": true,
       "hasInstallScript": true
     },
     "node_modules/babel-runtime/node_modules/regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+      "dev": true
     },
     "node_modules/babel-template": {
       "version": "6.26.0",
@@ -12698,6 +12662,7 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -15044,6 +15009,11 @@
       "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
       "dev": true
     },
+    "node_modules/is-proxy": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/is-proxy/-/is-proxy-1.0.6.tgz",
+      "integrity": "sha512-RzUROKx085vc7tpo9zCinKAmsD7ihAnXJ7HvKdcsc3m0XW/vpJDFSvZgutqMam0aBxpYBmDVYv48+T/+AMYl1g=="
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -18582,9 +18552,9 @@
       }
     },
     "node_modules/moment-timezone": {
-      "version": "0.5.43",
-      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.43.tgz",
-      "integrity": "sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ==",
+      "version": "0.5.41",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.41.tgz",
+      "integrity": "sha512-e0jGNZDOHfBXJGz8vR/sIMXvBIGJJcqFjmlg9lmE+5KX1U7/RZNMswfD8nKnNCnQdKTIj50IaRKwl1fvMLyyRg==",
       "dependencies": {
         "moment": "^2.29.4"
       },
@@ -19523,6 +19493,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
       "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
+      "dev": true,
       "bin": {
         "opencollective-postinstall": "index.js"
       }
@@ -20014,6 +19985,34 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/pc-bootstrap4-datetimepicker": {
+      "version": "4.17.51",
+      "resolved": "https://registry.npmjs.org/pc-bootstrap4-datetimepicker/-/pc-bootstrap4-datetimepicker-4.17.51.tgz",
+      "integrity": "sha512-UQDSKS5d1c43btk2vQ4siiv9YIkscZYQfTE513abeTqh5PIOJiyAeNdoCSTsDTZcpWJtWZHWk15yDXypYSFzcQ==",
+      "dependencies": {
+        "bootstrap": "^4.0.0-beta.2",
+        "jquery": "^1.8.3 || ^2.0 || ^3.0",
+        "moment": "^2.10",
+        "moment-timezone": "^0.4.0"
+      },
+      "peerDependencies": {
+        "bootstrap": "^4.0.0-beta.2",
+        "jquery": "^1.8.3 || ^2.0 || ^3.0",
+        "moment": "^2.10",
+        "moment-timezone": "^0.4.0 || ^0.5.0"
+      }
+    },
+    "node_modules/pc-bootstrap4-datetimepicker/node_modules/moment-timezone": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.4.1.tgz",
+      "integrity": "sha512-5cNPVUwaVJDCe9JM8m/qz17f9SkaI8rpnRUyDJi2K5HAd6EwhuQ3n5nLclZkNC/qJnomKgQH2TIu70Gy2dxFKA==",
+      "dependencies": {
+        "moment": ">= 2.6.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -21729,11 +21728,6 @@
         "teleport": ">=0.2.0"
       }
     },
-    "node_modules/qinu": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/qinu/-/qinu-1.2.0.tgz",
-      "integrity": "sha512-tcTCpRzghKo6jfjkQ8tEWwD8qtyOR4cqoVo0/6waSfYT3NM/lTytRCcYNbISFrK1tu7ttowyhY8XpEjleZWybA=="
-    },
     "node_modules/qs": {
       "version": "6.10.4",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
@@ -26498,6 +26492,21 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-bootstrap-datetimepicker": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/vue-bootstrap-datetimepicker/-/vue-bootstrap-datetimepicker-5.0.1.tgz",
+      "integrity": "sha512-jao7sWXHgKzjbOio97u7kEfB/FJMWJ5rhsc4q8iNTOLCULfSJ5m3AZ2qZh62dNcMA4/uuTW6m6tONYIith/2XQ==",
+      "dependencies": {
+        "pc-bootstrap4-datetimepicker": "^4.17.50"
+      },
+      "engines": {
+        "node": ">= 6.9.0",
+        "npm": ">= 3.10.0"
+      },
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/vue-color": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
@@ -26510,18 +26519,6 @@
         "tinycolor2": "^1.1.2"
       }
     },
-    "node_modules/vue-date-pick": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/vue-date-pick/-/vue-date-pick-1.5.1.tgz",
-      "integrity": "sha512-7IZDRBgrBUWiF7xMgVAEETq49E//djP7mCbMofLtG91D0IZNbLocT0Z+eueVrJ496lf5WSUE1dF3/ZaOGZW++w==",
-      "dependencies": {
-        "vue": "^2.6.0"
-      },
-      "engines": {
-        "node": ">= 6.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
     "node_modules/vue-deepset": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/vue-deepset/-/vue-deepset-0.6.3.tgz",
@@ -26826,16 +26823,6 @@
         "nano-assign": "^1.0.0"
       }
     },
-    "node_modules/vue-popperjs": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/vue-popperjs/-/vue-popperjs-2.3.0.tgz",
-      "integrity": "sha512-925QEeNjlMtb3eDHl5ZlODJzqnQL0nQPEKpr9aQ3XBg21DyqAdfLgD/At4svsPwFeIkpdF1gvHarENon47L9Cg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "opencollective-postinstall": "^2.0.2",
-        "popper.js": "^1.15.0"
-      }
-    },
     "node_modules/vue-simple-uploader": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/vue-simple-uploader/-/vue-simple-uploader-0.7.6.tgz",
@@ -26885,14 +26872,6 @@
       "resolved": "https://registry.npmjs.org/vue-the-mask/-/vue-the-mask-0.11.1.tgz",
       "integrity": "sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ=="
     },
-    "node_modules/vue-uniq-ids": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vue-uniq-ids/-/vue-uniq-ids-1.1.2.tgz",
-      "integrity": "sha512-Jt4BSopBVJskX0iWiN9+lclWW5zXzrf5rkod80RVrp0fmpRC+KUMtQDAh2dyZP5QimWReioY4qqKuIqDMO/6UA==",
-      "dependencies": {
-        "qinu": "^1.1.2"
-      }
-    },
     "node_modules/vue-upload-component": {
       "version": "2.8.23",
       "resolved": "https://registry.npmjs.org/vue-upload-component/-/vue-upload-component-2.8.23.tgz",
@@ -30270,13 +30249,12 @@
       }
     },
     "@processmaker/screen-builder": {
-      "version": "2.70.0",
-      "resolved": "https://registry.npmjs.org/@processmaker/screen-builder/-/screen-builder-2.70.0.tgz",
-      "integrity": "sha512-9GzTuRO/EIE6sYSZGKNR72u8MjLmNc9oBhTNuQe2le56Ch1XAXzNewly+B/PR7MVYtuIJY2pRXnNOXOdU1XMIg==",
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/@processmaker/screen-builder/-/screen-builder-2.29.0.tgz",
+      "integrity": "sha512-Vag4ppV/CoJKFwd7iN+dRoNZiqdVvruXGbd3jrdrgTV9tHktfsjbjDyl4vt/cI7rXPObhrEQfwtXIL6NYMRjkA==",
       "requires": {
-        "axios-extensions": "^2.0.3",
-        "lodash": "^4.17.21",
-        "lru-cache": "^7.14.0",
+        "is-proxy": "^1.0.6",
+        "lodash": "^4.17.20",
         "moment": "^2.29.1",
         "moment-timezone": "^0.5.27",
         "scrollparent": "^2.0.1",
@@ -30512,9 +30490,13 @@
           "peer": true
         },
         "lru-cache": {
-          "version": "7.18.3",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
-          "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA=="
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "peer": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
         },
         "postcss-modules-extract-imports": {
           "version": "3.0.0",
@@ -30580,17 +30562,6 @@
           "peer": true,
           "requires": {
             "lru-cache": "^6.0.0"
-          },
-          "dependencies": {
-            "lru-cache": {
-              "version": "6.0.0",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-              "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-              "peer": true,
-              "requires": {
-                "yallist": "^4.0.0"
-              }
-            }
           }
         },
         "serialize-javascript": {
@@ -30711,13 +30682,14 @@
       }
     },
     "@processmaker/vue-form-elements": {
-      "version": "0.45.0",
-      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.45.0.tgz",
-      "integrity": "sha512-VXrNOY9jlKgh1KWoyn5QB8N8OH0wVD4ccQVqU4ZPhigIWr6158KR11RrSs1yBFFpXu6MMBuL1hyT2t1n6GbRqA==",
+      "version": "0.29.1",
+      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.29.1.tgz",
+      "integrity": "sha512-qla4tWiYYZ6NBviJQfD+TP5zOxSWcXEuTl/8rdFuhVXUT/YDfcmCbgPlqcvIoHyrmFb6XfuzBMuYcl3YqVYgag==",
       "requires": {
         "@tinymce/tinymce-vue": "2.0.0",
         "bootstrap": "^4.5.3",
         "jquery": "^3.5.1",
+        "luxon": "^1.11.3",
         "moment": "^2.29.1",
         "moment-timezone": "^0.5.26",
         "popper.js": "^1.14.4",
@@ -30726,8 +30698,7 @@
         "v-calendar": "^0.9.7",
         "validatorjs": "^3.22.1",
         "vue": "^2.6.12",
-        "vue-date-pick": "^1.5.1",
-        "vue-uniq-ids": "^1.0.0",
+        "vue-bootstrap-datetimepicker": "^5.0.1",
         "weekstart": "^1.0.0"
       }
     },
@@ -31035,11 +31006,6 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
-    "@types/lru-cache": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/@types/lru-cache/-/lru-cache-4.1.3.tgz",
-      "integrity": "sha512-QjCOmf5kYwekcsfEKhcEHMK8/SvgnneuSDXFERBuC/DPca2KJIO/gpChTsVb35BoWLBpEAJWz1GFVEArSdtKtw=="
-    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -33200,37 +33166,11 @@
       "version": "0.21.4",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
       "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dev": true,
       "requires": {
         "follow-redirects": "^1.14.0"
       }
     },
-    "axios-extensions": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/axios-extensions/-/axios-extensions-2.0.3.tgz",
-      "integrity": "sha512-KMWSNMth4eVUe1hDER1pfwMgVxeIrt9rstONy1nGHIxYPOiZ7NiwO252RRjUwTANOtUPEWaVbIP/6v3fREY9Eg==",
-      "requires": {
-        "@types/lru-cache": "^4.1.0",
-        "axios": "*",
-        "babel-runtime": "^6.26.0",
-        "lru-cache": "^4.1.1"
-      },
-      "dependencies": {
-        "lru-cache": {
-          "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-          "requires": {
-            "pseudomap": "^1.0.2",
-            "yallist": "^2.1.2"
-          }
-        },
-        "yallist": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-          "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
-        }
-      }
-    },
     "axios-mock-adapter": {
       "version": "1.21.2",
       "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.21.2.tgz",
@@ -33540,6 +33480,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -33548,12 +33489,14 @@
         "core-js": {
           "version": "2.6.12",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
         },
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+          "dev": true
         }
       }
     },
@@ -38209,7 +38152,8 @@
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "dev": true
     },
     "for-each": {
       "version": "0.3.3",
@@ -39978,6 +39922,11 @@
       "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
       "dev": true
     },
+    "is-proxy": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/is-proxy/-/is-proxy-1.0.6.tgz",
+      "integrity": "sha512-RzUROKx085vc7tpo9zCinKAmsD7ihAnXJ7HvKdcsc3m0XW/vpJDFSvZgutqMam0aBxpYBmDVYv48+T/+AMYl1g=="
+    },
     "is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -42785,9 +42734,9 @@
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
     },
     "moment-timezone": {
-      "version": "0.5.43",
-      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.43.tgz",
-      "integrity": "sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ==",
+      "version": "0.5.41",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.41.tgz",
+      "integrity": "sha512-e0jGNZDOHfBXJGz8vR/sIMXvBIGJJcqFjmlg9lmE+5KX1U7/RZNMswfD8nKnNCnQdKTIj50IaRKwl1fvMLyyRg==",
       "requires": {
         "moment": "^2.29.4"
       }
@@ -43539,7 +43488,8 @@
     "opencollective-postinstall": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
-      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
+      "dev": true
     },
     "opener": {
       "version": "1.5.2",
@@ -43929,6 +43879,27 @@
         "sha.js": "^2.4.8"
       }
     },
+    "pc-bootstrap4-datetimepicker": {
+      "version": "4.17.51",
+      "resolved": "https://registry.npmjs.org/pc-bootstrap4-datetimepicker/-/pc-bootstrap4-datetimepicker-4.17.51.tgz",
+      "integrity": "sha512-UQDSKS5d1c43btk2vQ4siiv9YIkscZYQfTE513abeTqh5PIOJiyAeNdoCSTsDTZcpWJtWZHWk15yDXypYSFzcQ==",
+      "requires": {
+        "bootstrap": "^4.0.0-beta.2",
+        "jquery": "^1.8.3 || ^2.0 || ^3.0",
+        "moment": "^2.10",
+        "moment-timezone": "^0.4.0"
+      },
+      "dependencies": {
+        "moment-timezone": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.4.1.tgz",
+          "integrity": "sha512-5cNPVUwaVJDCe9JM8m/qz17f9SkaI8rpnRUyDJi2K5HAd6EwhuQ3n5nLclZkNC/qJnomKgQH2TIu70Gy2dxFKA==",
+          "requires": {
+            "moment": ">= 2.6.0"
+          }
+        }
+      }
+    },
     "pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -45244,11 +45215,6 @@
       "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
       "dev": true
     },
-    "qinu": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/qinu/-/qinu-1.2.0.tgz",
-      "integrity": "sha512-tcTCpRzghKo6jfjkQ8tEWwD8qtyOR4cqoVo0/6waSfYT3NM/lTytRCcYNbISFrK1tu7ttowyhY8XpEjleZWybA=="
-    },
     "qs": {
       "version": "6.10.4",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
@@ -48997,6 +48963,14 @@
         }
       }
     },
+    "vue-bootstrap-datetimepicker": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/vue-bootstrap-datetimepicker/-/vue-bootstrap-datetimepicker-5.0.1.tgz",
+      "integrity": "sha512-jao7sWXHgKzjbOio97u7kEfB/FJMWJ5rhsc4q8iNTOLCULfSJ5m3AZ2qZh62dNcMA4/uuTW6m6tONYIith/2XQ==",
+      "requires": {
+        "pc-bootstrap4-datetimepicker": "^4.17.50"
+      }
+    },
     "vue-color": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
@@ -49009,14 +48983,6 @@
         "tinycolor2": "^1.1.2"
       }
     },
-    "vue-date-pick": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/vue-date-pick/-/vue-date-pick-1.5.1.tgz",
-      "integrity": "sha512-7IZDRBgrBUWiF7xMgVAEETq49E//djP7mCbMofLtG91D0IZNbLocT0Z+eueVrJ496lf5WSUE1dF3/ZaOGZW++w==",
-      "requires": {
-        "vue": "^2.6.0"
-      }
-    },
     "vue-deepset": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/vue-deepset/-/vue-deepset-0.6.3.tgz",
@@ -49249,15 +49215,6 @@
         "nano-assign": "^1.0.0"
       }
     },
-    "vue-popperjs": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/vue-popperjs/-/vue-popperjs-2.3.0.tgz",
-      "integrity": "sha512-925QEeNjlMtb3eDHl5ZlODJzqnQL0nQPEKpr9aQ3XBg21DyqAdfLgD/At4svsPwFeIkpdF1gvHarENon47L9Cg==",
-      "requires": {
-        "opencollective-postinstall": "^2.0.2",
-        "popper.js": "^1.15.0"
-      }
-    },
     "vue-simple-uploader": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/vue-simple-uploader/-/vue-simple-uploader-0.7.6.tgz",
@@ -49302,14 +49259,6 @@
       "resolved": "https://registry.npmjs.org/vue-the-mask/-/vue-the-mask-0.11.1.tgz",
       "integrity": "sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ=="
     },
-    "vue-uniq-ids": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vue-uniq-ids/-/vue-uniq-ids-1.1.2.tgz",
-      "integrity": "sha512-Jt4BSopBVJskX0iWiN9+lclWW5zXzrf5rkod80RVrp0fmpRC+KUMtQDAh2dyZP5QimWReioY4qqKuIqDMO/6UA==",
-      "requires": {
-        "qinu": "^1.1.2"
-      }
-    },
     "vue-upload-component": {
       "version": "2.8.23",
       "resolved": "https://registry.npmjs.org/vue-upload-component/-/vue-upload-component-2.8.23.tgz",
diff --git a/package.json b/package.json
index 1f114b75..6d882104 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.30.1",
+  "version": "1.29.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",
@@ -41,8 +41,8 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.8",
-    "@processmaker/screen-builder": "2.70.0",
-    "@processmaker/vue-form-elements": "0.45.0",
+    "@processmaker/screen-builder": "2.29.0",
+    "@processmaker/vue-form-elements": "0.29.1",
     "@processmaker/vue-multiselect": "^2.2.0",
     "acorn": "^6.4.2",
     "bootstrap": "^4.3.1",
@@ -65,7 +65,6 @@
     "vue": "^2.6.12",
     "vue-deepset": "^0.6.3",
     "vue-monaco": "^1.2.1",
-    "vue-popperjs": "^2.3.0",
     "vue-upload-component": "^2.8.20",
     "vuex": "^3.5.1"
   },
diff --git a/src/assets/boundary-event.svg b/src/assets/boundary-event.svg
index 0211dedc..9532dd8e 100644
--- a/src/assets/boundary-event.svg
+++ b/src/assets/boundary-event.svg
@@ -1,4 +1,4 @@
 <svg width="20px" height="20px" viewBox="0 0 154 154" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M77 150C117.317 150 150 117.317 150 77C150 36.6832 117.317 4 77 4C36.6832 4 4 36.6832 4 77C4 117.317 36.6832 150 77 150Z" stroke="black" stroke-width="8"/>
-<path d="M77.5 133C108.152 133 133 108.152 133 77.5C133 46.8482 108.152 22 77.5 22C46.8482 22 22 46.8482 22 77.5C22 108.152 46.8482 133 77.5 133Z" stroke="black" stroke-width="8"/>
-</svg>
\ No newline at end of file
+<path d="M77 150C117.317 150 150 117.317 150 77C150 36.6832 117.317 4 77 4C36.6832 4 4 36.6832 4 77C4 117.317 36.6832 150 77 150Z" stroke="white" stroke-width="8"/>
+<path d="M77.5 133C108.152 133 133 108.152 133 77.5C133 46.8482 108.152 22 77.5 22C46.8482 22 22 46.8482 22 77.5C22 108.152 46.8482 133 77.5 133Z" stroke="white" stroke-width="8"/>
+</svg>
diff --git a/src/assets/clipboard.svg b/src/assets/clipboard.svg
index 29ef6527..6607bc5b 100644
--- a/src/assets/clipboard.svg
+++ b/src/assets/clipboard.svg
@@ -1,3 +1,1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="#44494E">
-    <path d="M192 0c-41.8 0-77.4 26.7-90.5 64H64C28.7 64 0 92.7 0 128V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H282.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM112 192H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#fff" d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
\ No newline at end of file
diff --git a/src/assets/cog-solid.svg b/src/assets/cog-solid.svg
deleted file mode 100644
index 4d793311..00000000
--- a/src/assets/cog-solid.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="cog" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-cog fa-w-16 fa-7x"><path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z" class=""></path></svg>
\ No newline at end of file
diff --git a/src/assets/connect-artifacts.svg b/src/assets/connect-artifacts.svg
index 505ebc16..f9d1dc68 100755
--- a/src/assets/connect-artifacts.svg
+++ b/src/assets/connect-artifacts.svg
@@ -3,10 +3,10 @@
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="connect-artifacts" transform="translate(9.000000, 9.000000) scale(-1, 1) translate(-9.000000, -9.000000) ">
             <path d="M1,1 L1,4 L4,4 L4,1 L1,1 Z M0,-2.22044605e-16 L5,-2.22044605e-16 L5,5 L0,5 L0,-2.22044605e-16 Z"
-                  id="connect-elements" fill="#44494E" fill-rule="nonzero"></path>
+                  id="connect-elements" fill="#fff" fill-rule="nonzero"></path>
             <path d="M14,14 L14,17 L17,17 L17,14 L14,14 Z M13,13 L18,13 L18,18 L13,18 L13,13 Z" id="connect-elements"
-                  fill="#44494E" fill-rule="nonzero"></path>
-            <path d="M4.5,4.5 L13.5,13.5" id="Line" stroke="#44494E" stroke-linecap="square" stroke-dasharray="2"></path>
+                  fill="#fff" fill-rule="nonzero"></path>
+            <path d="M4.5,4.5 L13.5,13.5" id="Line" stroke="#fff" stroke-linecap="square" stroke-dasharray="2"></path>
         </g>
     </g>
 </svg>
diff --git a/src/assets/connect-elements.svg b/src/assets/connect-elements.svg
index 79131dcf..4b0c0eaa 100755
--- a/src/assets/connect-elements.svg
+++ b/src/assets/connect-elements.svg
@@ -2,9 +2,9 @@
 <svg width="19px" height="20px" viewBox="0 0 19 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <title>connect-elements</title>
     <desc>Created with Sketch.</desc>
-    <g id="Symbols" >
-        <g id="custom/connect-elements" transform="translate(-3.000000, -2.000000)">
-            <path
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="custom/connect-elements" transform="translate(-3.000000, -2.000000)" fill="#fff">
+            <path fill="#fff"
                   d="M18.5,20 L13,20 L13,5 L8,5 L8,7 L3,7 L3,2 L8,2 L8,4 L14,4 L14,19 L18.5,19 L18.5,17 L21.5,19.5 L18.5,22 L18.5,20 Z M4,3 L4,6 L7,6 L7,3 L4,3 Z"
                   id="connect-elements"/>
         </g>
diff --git a/src/assets/copy-regular.svg b/src/assets/copy-regular.svg
index c2dd2539..d650718e 100644
--- a/src/assets/copy-regular.svg
+++ b/src/assets/copy-regular.svg
@@ -1,3 +1,1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#44494E">
-    <path d="M160 0c-23.7 0-44.4 12.9-55.4 32H48C21.5 32 0 53.5 0 80V400c0 26.5 21.5 48 48 48H192V176c0-44.2 35.8-80 80-80h48V80c0-26.5-21.5-48-48-48H215.4C204.4 12.9 183.7 0 160 0zM272 128c-26.5 0-48 21.5-48 48V448v16c0 26.5 21.5 48 48 48H464c26.5 0 48-21.5 48-48V243.9c0-12.7-5.1-24.9-14.1-33.9l-67.9-67.9c-9-9-21.2-14.1-33.9-14.1H320 272zM160 40a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>
-</svg>
\ No newline at end of file
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#fff" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/default-flow.svg b/src/assets/default-flow.svg
index 29ae6574..da950ef7 100644
--- a/src/assets/default-flow.svg
+++ b/src/assets/default-flow.svg
@@ -2,8 +2,8 @@
   version="1.1" width="16px" height="20px" viewBox="7 7 16 20">
 	<defs />
 	<g>
-		<path d="M 7 27 L 17.93 13.34" fill="none" stroke="#44494E" stroke-miterlimit="10" pointer-events="stroke" />
-		<path d="M 22.3 7.87 L 20.66 15.53 L 15.2 11.15 Z" fill="#44494E" stroke="#44494E" stroke-miterlimit="10" pointer-events="all" />
-		<path d="M 7 20 L 18 20" fill="none" stroke="#44494E" stroke-miterlimit="10" pointer-events="stroke" />
+		<path d="M 7 27 L 17.93 13.34" fill="none" stroke="#ffffff" stroke-miterlimit="10" pointer-events="stroke" />
+		<path d="M 22.3 7.87 L 20.66 15.53 L 15.2 11.15 Z" fill="#ffffff" stroke="#ffffff" stroke-miterlimit="10" pointer-events="all" />
+		<path d="M 7 20 L 18 20" fill="none" stroke="#ffffff" stroke-miterlimit="10" pointer-events="stroke" />
 	</g>
 </svg>
diff --git a/src/assets/lane-below.svg b/src/assets/lane-below.svg
index 9f71c91a..795e8e07 100644
--- a/src/assets/lane-below.svg
+++ b/src/assets/lane-below.svg
@@ -5,24 +5,24 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="custom/processbuilder/pool-above" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Rectangle" stroke="#000000" fill="#000000" x="0.5" y="0.5" width="25" height="11"></rect>
-        <polygon id="Path-3" fill="#000000" points="0 16 1 16 1 17 2 17 2 18 0 18"></polygon>
+        <rect id="Rectangle" stroke="#FFFFFF" fill="#FFFFFF" x="0.5" y="0.5" width="25" height="11"></rect>
+        <polygon id="Path-3" fill="#FFFFFF" points="0 16 1 16 1 17 2 17 2 18 0 18"></polygon>
         <path d="M6,17 L8,17 L8,18 C6.66666667,18 6,18 6,18 C6,18 6,17.6666667 6,17 Z" id="Path-5-Copy"
-              fill="#000000"></path>
+              fill="#FFFFFF"></path>
         <path d="M9,17 L11,17 L11,18 C9.66666667,18 9,18 9,18 C9,18 9,17.6666667 9,17 Z" id="Path-5-Copy-2"
-              fill="#000000"></path>
+              fill="#FFFFFF"></path>
         <path d="M12,17 L14,17 L14,18 C12.6666667,18 12,18 12,18 C12,18 12,17.6666667 12,17 Z" id="Path-5-Copy-3"
-              fill="#000000"></path>
+              fill="#FFFFFF"></path>
         <path d="M15,17 L17,17 L17,18 C15.6666667,18 15,18 15,18 C15,18 15,17.6666667 15,17 Z" id="Path-5-Copy-4"
-              fill="#000000"></path>
+              fill="#FFFFFF"></path>
         <path d="M18,17 L20,17 L20,18 C18.6666667,18 18,18 18,18 C18,18 18,17.6666667 18,17 Z" id="Path-5-Copy-4"
-              fill="#000000"></path>
+              fill="#FFFFFF"></path>
         <path d="M21,17 L23,17 L23,18 C21.6666667,18 21,18 21,18 C21,18 21,17.6666667 21,17 Z" id="Path-5-Copy-4"
-              fill="#000000"></path>
-        <rect id="Rectangle-2" fill="#000000" x="25" y="13" width="1" height="2"></rect>
-        <rect id="Rectangle-2-Copy" fill="#000000" x="0" y="13" width="1" height="2"></rect>
-        <polygon id="Path-4" fill="#000000" points="25 17 25 16 26 16 26 18 24 18 24 17"></polygon>
+              fill="#FFFFFF"></path>
+        <rect id="Rectangle-2" fill="#FFFFFF" x="25" y="13" width="1" height="2"></rect>
+        <rect id="Rectangle-2-Copy" fill="#FFFFFF" x="0" y="13" width="1" height="2"></rect>
+        <polygon id="Path-4" fill="#FFFFFF" points="25 17 25 16 26 16 26 18 24 18 24 17"></polygon>
         <path d="M3,17 L5,17 L5,18 C3.66666667,18 3,18 3,18 C3,18 3,17.6666667 3,17 Z" id="Path-5"
-              fill="#000000"></path>
+              fill="#FFFFFF"></path>
     </g>
 </svg>
diff --git a/src/assets/palette.svg b/src/assets/palette.svg
deleted file mode 100644
index 5ec9bc46..00000000
--- a/src/assets/palette.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="palette" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-palette fa-w-16 fa-7x"><path fill="currentColor" d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z" class=""></path></svg>
\ No newline at end of file
diff --git a/src/assets/railBottom/mini-map.svg b/src/assets/railBottom/mini-map.svg
deleted file mode 100644
index 9b4cb92a..00000000
--- a/src/assets/railBottom/mini-map.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.317 0.740775C16.4328 0.835744 16.5 0.977649 16.5 1.12745V15.1274C16.5 15.3658 16.3318 15.571 16.0981 15.6177L11.0981 16.6177C11.0333 16.6307 10.9667 16.6307 10.9019 16.6177L6 15.6373L1.09806 16.6177C0.95117 16.6471 0.79885 16.6091 0.683006 16.5141C0.567162 16.4191 0.5 16.2772 0.5 16.1274V2.12745C0.5 1.88911 0.66823 1.6839 0.901942 1.63716L5.90194 0.637155C5.96667 0.624209 6.03333 0.624209 6.09806 0.637155L11 1.61754L15.9019 0.637155C16.0488 0.607778 16.2012 0.645805 16.317 0.740775ZM10.5 2.53735L6.5 1.73735V14.7175L10.5 15.5175V2.53735ZM11.5 15.5175L15.5 14.7175V1.73735L11.5 2.53735V15.5175ZM5.5 14.7175V1.73735L1.5 2.53735V15.5175L5.5 14.7175Z" fill="black"/>
-</svg>
diff --git a/src/assets/railBottom/plus-lg-light.svg b/src/assets/railBottom/plus-lg-light.svg
deleted file mode 100644
index 0fbcb039..00000000
--- a/src/assets/railBottom/plus-lg-light.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.00021 0.770294C7.4736 0.770294 7.85735 1.15405 7.85735 1.62744V6.77029H13.0002C13.4736 6.77029 13.8574 7.15405 13.8574 7.62744C13.8574 8.10082 13.4736 8.48458 13.0002 8.48458H7.85735V13.6274C7.85735 14.1008 7.4736 14.4846 7.00021 14.4846C6.52682 14.4846 6.14307 14.1008 6.14307 13.6274V8.48458H1.00021C0.526822 8.48458 0.143066 8.10082 0.143066 7.62744C0.143066 7.15405 0.526822 6.77029 1.00021 6.77029H6.14307V1.62744C6.14307 1.15405 6.52682 0.770294 7.00021 0.770294Z" fill="white"/>
-</svg>
diff --git a/src/assets/railBottom/redo.svg b/src/assets/railBottom/redo.svg
deleted file mode 100644
index 692e3de3..00000000
--- a/src/assets/railBottom/redo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="17" height="20" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.62745C3.23858 3.62745 1 5.86603 1 8.62745C1 11.3889 3.23858 13.6275 6 13.6275C8.76142 13.6275 11 11.3889 11 8.62745C11 7.88202 10.8372 7.17598 10.5457 6.54179C10.4304 6.29089 10.5403 5.99399 10.7912 5.87866C11.0421 5.76333 11.339 5.87324 11.4543 6.12415C11.8048 6.88668 12 7.73496 12 8.62745C12 11.9412 9.31371 14.6275 6 14.6275C2.68629 14.6275 0 11.9412 0 8.62745C0 5.31375 2.68629 2.62745 6 2.62745V3.62745Z" fill="black"/>
-    <path d="M6 5.09369V1.16121C6 0.949255 6.24721 0.833465 6.41005 0.969158L8.76953 2.9354C8.88947 3.03535 8.88947 3.21956 8.76953 3.31951L6.41005 5.28575C6.24721 5.42144 6 5.30565 6 5.09369Z" fill="black"/>
-</svg>
diff --git a/src/assets/railBottom/undo.svg b/src/assets/railBottom/undo.svg
deleted file mode 100644
index 19ae0f39..00000000
--- a/src/assets/railBottom/undo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="17" height="20" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.62742C8.76142 3.62742 11 5.866 11 8.62742C11 11.3888 8.76142 13.6274 6 13.6274C3.23858 13.6274 1 11.3888 1 8.62742C1 7.88199 1.1628 7.17595 1.45431 6.54176C1.56963 6.29085 1.45973 5.99396 1.20882 5.87863C0.957916 5.7633 0.661024 5.87321 0.545694 6.12412C0.195193 6.88665 0 7.73493 0 8.62742C0 11.9411 2.68629 14.6274 6 14.6274C9.31371 14.6274 12 11.9411 12 8.62742C12 5.31371 9.31371 2.62742 6 2.62742V3.62742Z" fill="black"/>
-    <path d="M6 5.09366V1.16118C6 0.949224 5.75279 0.833435 5.58995 0.969128L3.23047 2.93537C3.11053 3.03532 3.11053 3.21953 3.23047 3.31948L5.58995 5.28572C5.75279 5.42141 6 5.30562 6 5.09366Z" fill="black"/>
-</svg>
diff --git a/src/assets/scss/settings/_settings.variables.scss b/src/assets/scss/settings/_settings.variables.scss
index 6ca4a721..c131cbd5 100644
--- a/src/assets/scss/settings/_settings.variables.scss
+++ b/src/assets/scss/settings/_settings.variables.scss
@@ -2,12 +2,7 @@
 $primary-color: #3397E1;
 $error-color: #ED4757;
 $primary-white: #FFFFFF;
-$primary-black: #000000;
 $primary-grey: #555555;
-$crown-icon-neutral: #44494E;
-$crown-icon-active: #1264AA;
-$crown-icon-hover-bg: #EBEEF2;
-$cronw-icon-active-bg: #DEEBFF;
 $border-color: rgba(0, 0, 0, 0.125);
 
 $cursors: default, not-allowed, wait, crosshair;
diff --git a/src/assets/scss/tools/_tools.chevron.scss b/src/assets/scss/tools/_tools.chevron.scss
index 111f472d..e063591e 100644
--- a/src/assets/scss/tools/_tools.chevron.scss
+++ b/src/assets/scss/tools/_tools.chevron.scss
@@ -3,7 +3,7 @@ $chevron-height: 1.25rem;
 
 @mixin chevron($top, $left) {
   content: '';
-  background-color: $primary-white;
+  background-color: $primary-color;
   width: $chevron-width;
   height: $chevron-height;
   position: absolute;
diff --git a/src/assets/toolpanel/conditional-start-event.svg b/src/assets/toolpanel/conditional-start-event.svg
deleted file mode 100644
index f6a792c3..00000000
--- a/src/assets/toolpanel/conditional-start-event.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="13.5" cy="13" r="12.5" fill="#00875A" fill-opacity="0.25" stroke="#00875A"/>
-<path d="M14.0833 9.45312V6H7.31244C6.86218 6 6.49994 6.27168 6.49994 6.60938V18.3906C6.49994 18.7283 6.86218 19 7.31244 19H18.6874C19.1377 19 19.4999 18.7283 19.4999 18.3906V10.0625H14.8958C14.4489 10.0625 14.0833 9.78828 14.0833 9.45312ZM16.2499 15.4453C16.2499 15.6129 16.0671 15.75 15.8437 15.75H10.1562C9.93275 15.75 9.74994 15.6129 9.74994 15.4453V15.2422C9.74994 15.0746 9.93275 14.9375 10.1562 14.9375H15.8437C16.0671 14.9375 16.2499 15.0746 16.2499 15.2422V15.4453ZM16.2499 13.8203C16.2499 13.9879 16.0671 14.125 15.8437 14.125H10.1562C9.93275 14.125 9.74994 13.9879 9.74994 13.8203V13.6172C9.74994 13.4496 9.93275 13.3125 10.1562 13.3125H15.8437C16.0671 13.3125 16.2499 13.4496 16.2499 13.6172V13.8203ZM16.2499 11.9922V12.1953C16.2499 12.3629 16.0671 12.5 15.8437 12.5H10.1562C9.93275 12.5 9.74994 12.3629 9.74994 12.1953V11.9922C9.74994 11.8246 9.93275 11.6875 10.1562 11.6875H15.8437C16.0671 11.6875 16.2499 11.8246 16.2499 11.9922ZM19.4999 9.09512V9.25H15.1666V6H15.3731C15.5898 6 15.7963 6.06348 15.9486 6.17773L19.263 8.66602C19.4153 8.78027 19.4999 8.93516 19.4999 9.09512Z" fill="#00875A"/>
-</svg>
diff --git a/src/assets/toolpanel/exclusive-gateway.svg b/src/assets/toolpanel/exclusive-gateway.svg
deleted file mode 100644
index d23db5d0..00000000
--- a/src/assets/toolpanel/exclusive-gateway.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.5841 2.91686C15.121 2.37989 15.9916 2.37989 16.5286 2.91686L28.1959 14.5841C28.7329 15.1211 28.7329 15.9917 28.1959 16.5287L16.5286 28.1959C15.9916 28.7329 15.121 28.7329 14.5841 28.1959L2.91682 16.5287C2.37984 15.9917 2.37984 15.1211 2.91682 14.5841L14.5841 2.91686ZM1.94454 13.6119C0.870602 14.6858 0.870602 16.427 1.94454 17.5009L13.6118 29.1682C14.6857 30.2421 16.427 30.2421 17.5009 29.1682L29.1682 17.5009C30.2421 16.427 30.2421 14.6858 29.1682 13.6119L17.5009 1.94459C16.427 0.870649 14.6857 0.870649 13.6118 1.94459L1.94454 13.6119Z" fill="#333344"/>
-<path d="M18.3432 15.5L22.6075 11.3956C23.1308 10.8919 23.1308 10.0753 22.6075 9.57119L21.6598 8.659C21.1365 8.15533 20.2881 8.15533 19.7643 8.659L15.5 12.7634L11.2357 8.659C10.7124 8.15533 9.86392 8.15533 9.3402 8.659L8.39247 9.57119C7.86918 10.0749 7.86918 10.8915 8.39247 11.3956L12.6568 15.5L8.39247 19.6044C7.86918 20.1081 7.86918 20.9247 8.39247 21.4288L9.3402 22.341C9.86349 22.8447 10.7124 22.8447 11.2357 22.341L15.5 18.2366L19.7643 22.341C20.2876 22.8447 21.1365 22.8447 21.6598 22.341L22.6075 21.4288C23.1308 20.9251 23.1308 20.1085 22.6075 19.6044L18.3432 15.5Z" fill="#212529"/>
-</svg>
diff --git a/src/assets/toolpanel/inclusive-gateway.svg b/src/assets/toolpanel/inclusive-gateway.svg
deleted file mode 100644
index 33f4abd1..00000000
--- a/src/assets/toolpanel/inclusive-gateway.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.5841 2.91686C15.121 2.37989 15.9916 2.37989 16.5286 2.91686L28.1959 14.5841C28.7329 15.1211 28.7329 15.9917 28.1959 16.5287L16.5286 28.1959C15.9916 28.7329 15.121 28.7329 14.5841 28.1959L2.91682 16.5287C2.37984 15.9917 2.37984 15.1211 2.91682 14.5841L14.5841 2.91686ZM1.94454 13.6119C0.870602 14.6858 0.870602 16.427 1.94454 17.5009L13.6118 29.1682C14.6857 30.2421 16.427 30.2421 17.5009 29.1682L29.1682 17.5009C30.2421 16.427 30.2421 14.6858 29.1682 13.6119L17.5009 1.94459C16.427 0.870649 14.6857 0.870649 13.6118 1.94459L1.94454 13.6119Z" fill="#333344"/>
-<circle cx="15.5" cy="15.5" r="8" stroke="black"/>
-</svg>
diff --git a/src/assets/toolpanel/intermediate-conditional-catch-event.svg b/src/assets/toolpanel/intermediate-conditional-catch-event.svg
deleted file mode 100644
index b51842c6..00000000
--- a/src/assets/toolpanel/intermediate-conditional-catch-event.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="13" cy="13" r="12.5" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<circle cx="12.9997" cy="12.9999" r="8.26471" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<path d="M13.8333 10.6562V8H8.625C8.27865 8 8 8.20898 8 8.46875V17.5312C8 17.791 8.27865 18 8.625 18H17.375C17.7214 18 18 17.791 18 17.5312V11.125H14.4583C14.1146 11.125 13.8333 10.9141 13.8333 10.6562ZM15.5 15.2656C15.5 15.3945 15.3594 15.5 15.1875 15.5H10.8125C10.6406 15.5 10.5 15.3945 10.5 15.2656V15.1094C10.5 14.9805 10.6406 14.875 10.8125 14.875H15.1875C15.3594 14.875 15.5 14.9805 15.5 15.1094V15.2656ZM15.5 14.0156C15.5 14.1445 15.3594 14.25 15.1875 14.25H10.8125C10.6406 14.25 10.5 14.1445 10.5 14.0156V13.8594C10.5 13.7305 10.6406 13.625 10.8125 13.625H15.1875C15.3594 13.625 15.5 13.7305 15.5 13.8594V14.0156ZM15.5 12.6094V12.7656C15.5 12.8945 15.3594 13 15.1875 13H10.8125C10.6406 13 10.5 12.8945 10.5 12.7656V12.6094C10.5 12.4805 10.6406 12.375 10.8125 12.375H15.1875C15.3594 12.375 15.5 12.4805 15.5 12.6094ZM18 10.3809V10.5H14.6667V8H14.8255C14.9922 8 15.151 8.04883 15.2682 8.13672L17.8177 10.0508C17.9349 10.1387 18 10.2578 18 10.3809Z" fill="#FFAB00"/>
-</svg>
diff --git a/src/assets/toolpanel/intermediate-message-catch-event.svg b/src/assets/toolpanel/intermediate-message-catch-event.svg
deleted file mode 100644
index df29afcd..00000000
--- a/src/assets/toolpanel/intermediate-message-catch-event.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="13" cy="13" r="12.5" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<circle cx="12.9997" cy="12.9999" r="8.26471" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<path d="M11.125 12.0625H14.875C15.0822 12.0625 15.25 11.8946 15.25 11.6875V11.3125C15.25 11.1053 15.0822 10.9375 14.875 10.9375H11.125C10.9178 10.9375 10.75 11.1053 10.75 11.3125V11.6875C10.75 11.8946 10.9178 12.0625 11.125 12.0625ZM10.75 13.9375C10.75 14.1446 10.9178 14.3125 11.125 14.3125H14.875C15.0822 14.3125 15.25 14.1446 15.25 13.9375V13.5625C15.25 13.3553 15.0822 13.1875 14.875 13.1875H11.125C10.9178 13.1875 10.75 13.3553 10.75 13.5625V13.9375ZM13 16.7764C12.6152 16.7764 12.2303 16.6578 11.9017 16.4204L7 12.8795V17.875C7 18.4963 7.50367 19 8.125 19H17.875C18.4963 19 19 18.4963 19 17.875V12.8795L14.0983 16.4204C13.7697 16.6576 13.3848 16.7764 13 16.7764ZM18.569 10.8191C18.3616 10.6564 18.1649 10.5034 17.875 10.2845V9.24995C17.875 8.62862 17.3713 8.12495 16.75 8.12495H14.9324C14.8612 8.07339 14.7948 8.02511 14.7205 7.9712C14.3266 7.68362 13.5437 6.99175 13 6.99995C12.4563 6.99175 11.6737 7.68362 11.2795 7.9712C11.2052 8.02511 11.1388 8.07339 11.0676 8.12495H9.25C8.62867 8.12495 8.125 8.62862 8.125 9.24995V10.2845C7.83508 10.5032 7.63844 10.6564 7.43102 10.8191C7.29676 10.9243 7.18818 11.0587 7.11351 11.212C7.03884 11.3654 7.00002 11.5337 7 11.7043V11.9539L9.25 13.5793V9.24995H16.75V13.5793L19 11.9539V11.7043C19 11.3589 18.8411 11.0324 18.569 10.8191Z" fill="#FFAB00"/>
-</svg>
diff --git a/src/assets/toolpanel/intermediate-message-throw-event.svg b/src/assets/toolpanel/intermediate-message-throw-event.svg
index b58b6df6..37d4b921 100644
--- a/src/assets/toolpanel/intermediate-message-throw-event.svg
+++ b/src/assets/toolpanel/intermediate-message-throw-event.svg
@@ -1,5 +1,6 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="13" cy="13" r="12.5" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<circle cx="12.9997" cy="12.9999" r="8.26471" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<path d="M18.7727 11.4719C18.8641 11.3992 19 11.4672 19 11.582V16.375C19 16.9961 18.4961 17.5 17.875 17.5H8.125C7.50391 17.5 7 16.9961 7 16.375V11.5844C7 11.4672 7.13359 11.4016 7.22734 11.4742C7.75234 11.882 8.44844 12.4 10.8391 14.1367C11.3336 14.4977 12.168 15.257 13 15.2523C13.8367 15.2594 14.6875 14.4836 15.1633 14.1367C17.5539 12.4 18.2477 11.8797 18.7727 11.4719ZM13 14.5C13.5437 14.5094 14.3266 13.8156 14.7203 13.5297C17.8305 11.2727 18.0672 11.0758 18.7844 10.5133C18.9203 10.4078 19 10.2437 19 10.0703V9.625C19 9.00391 18.4961 8.5 17.875 8.5H8.125C7.50391 8.5 7 9.00391 7 9.625V10.0703C7 10.2437 7.07969 10.4055 7.21562 10.5133C7.93281 11.0734 8.16953 11.2727 11.2797 13.5297C11.6734 13.8156 12.4563 14.5094 13 14.5Z" fill="#FFAB00"/>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5" y="6" width="12" height="9" fill="black"/>
+<path d="M11 21.5C16.799 21.5 21.5 16.799 21.5 11C21.5 5.20101 16.799 0.5 11 0.5C5.20101 0.5 0.5 5.20101 0.5 11C0.5 16.799 5.20101 21.5 11 21.5Z" stroke="#788793"/>
+<path d="M11 19.5C15.6944 19.5 19.5 15.6944 19.5 11C19.5 6.30558 15.6944 2.5 11 2.5C6.30558 2.5 2.5 6.30558 2.5 11C2.5 15.6944 6.30558 19.5 11 19.5Z" stroke="#788793"/>
+<path d="M15.9298 15.4253H6.07027C5.80048 15.4253 5.56654 15.3359 5.36782 15.1595L8.76914 11.7471C8.85422 11.8084 8.93291 11.8657 9.00387 11.9178C9.25849 12.1059 9.46493 12.2527 9.62351 12.3579C9.78194 12.4633 9.99293 12.5707 10.2565 12.6804C10.52 12.7903 10.7655 12.845 10.9933 12.845H11H11.0067C11.2344 12.845 11.48 12.7902 11.7435 12.6804C12.0069 12.5707 12.2179 12.4633 12.3765 12.3579C12.5351 12.2527 12.7416 12.1059 12.9961 11.9178C13.0708 11.8636 13.1499 11.8067 13.2315 11.748L16.6322 15.1595C16.4334 15.3359 16.1997 15.4253 15.9298 15.4253ZM5.67459 9.61452C6.62031 10.256 7.39064 10.7842 7.98851 11.2008L5 14.1839V9.03448C5.19588 9.2523 5.42087 9.44568 5.67459 9.61452ZM16.3319 9.61451C16.5857 9.44116 16.8084 9.24792 17 9.03448V14.1839L14.0115 11.202C14.6484 10.7581 15.4219 10.2291 16.3319 9.61451ZM15.9285 6C16.2187 6 16.4698 6.10452 16.682 6.31346C16.8938 6.52265 17 6.77382 17 7.06735C17 7.41868 16.8905 7.75445 16.6721 8.07455C16.4533 8.39465 16.181 8.66826 15.8552 8.89499C14.7717 9.64411 13.954 10.2097 13.3989 10.5939C13.0938 10.805 12.8668 10.9621 12.7212 11.0631C12.6996 11.0782 12.6659 11.1021 12.6211 11.1341C12.5728 11.1685 12.5117 11.2123 12.4366 11.2665C12.2915 11.3711 12.1709 11.4556 12.0749 11.5201C11.9788 11.5845 11.8628 11.6568 11.7266 11.7369C11.5904 11.817 11.4621 11.877 11.3416 11.917C11.221 11.957 11.1094 11.977 11.0068 11.977H11.0001H10.9934C10.8908 11.977 10.7792 11.957 10.6586 11.917C10.5381 11.877 10.4097 11.8168 10.2735 11.7369C10.1373 11.6568 10.0211 11.5847 9.92528 11.5201C9.82929 11.4556 9.70877 11.3711 9.56369 11.2665C9.48835 11.2123 9.42728 11.1685 9.37902 11.134C9.33423 11.1021 9.30048 11.0781 9.27902 11.0631C9.09209 10.9321 8.86568 10.7743 8.60314 10.5921C8.29514 10.3781 7.93673 10.1301 7.52458 9.8456C6.7611 9.3187 6.30349 9.00179 6.15174 8.89499C5.87494 8.70823 5.61374 8.45149 5.36826 8.12462C5.12279 7.79762 5 7.4941 5 7.21398C5 6.86719 5.09253 6.57802 5.27789 6.34679C5.4631 6.11568 5.72749 6 6.07137 6H15.9285Z" stroke="#788793"/>
 </svg>
diff --git a/src/assets/toolpanel/intermediate-message-throw-event_bkp.svg b/src/assets/toolpanel/intermediate-message-throw-event_bkp.svg
deleted file mode 100644
index 37d4b921..00000000
--- a/src/assets/toolpanel/intermediate-message-throw-event_bkp.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="5" y="6" width="12" height="9" fill="black"/>
-<path d="M11 21.5C16.799 21.5 21.5 16.799 21.5 11C21.5 5.20101 16.799 0.5 11 0.5C5.20101 0.5 0.5 5.20101 0.5 11C0.5 16.799 5.20101 21.5 11 21.5Z" stroke="#788793"/>
-<path d="M11 19.5C15.6944 19.5 19.5 15.6944 19.5 11C19.5 6.30558 15.6944 2.5 11 2.5C6.30558 2.5 2.5 6.30558 2.5 11C2.5 15.6944 6.30558 19.5 11 19.5Z" stroke="#788793"/>
-<path d="M15.9298 15.4253H6.07027C5.80048 15.4253 5.56654 15.3359 5.36782 15.1595L8.76914 11.7471C8.85422 11.8084 8.93291 11.8657 9.00387 11.9178C9.25849 12.1059 9.46493 12.2527 9.62351 12.3579C9.78194 12.4633 9.99293 12.5707 10.2565 12.6804C10.52 12.7903 10.7655 12.845 10.9933 12.845H11H11.0067C11.2344 12.845 11.48 12.7902 11.7435 12.6804C12.0069 12.5707 12.2179 12.4633 12.3765 12.3579C12.5351 12.2527 12.7416 12.1059 12.9961 11.9178C13.0708 11.8636 13.1499 11.8067 13.2315 11.748L16.6322 15.1595C16.4334 15.3359 16.1997 15.4253 15.9298 15.4253ZM5.67459 9.61452C6.62031 10.256 7.39064 10.7842 7.98851 11.2008L5 14.1839V9.03448C5.19588 9.2523 5.42087 9.44568 5.67459 9.61452ZM16.3319 9.61451C16.5857 9.44116 16.8084 9.24792 17 9.03448V14.1839L14.0115 11.202C14.6484 10.7581 15.4219 10.2291 16.3319 9.61451ZM15.9285 6C16.2187 6 16.4698 6.10452 16.682 6.31346C16.8938 6.52265 17 6.77382 17 7.06735C17 7.41868 16.8905 7.75445 16.6721 8.07455C16.4533 8.39465 16.181 8.66826 15.8552 8.89499C14.7717 9.64411 13.954 10.2097 13.3989 10.5939C13.0938 10.805 12.8668 10.9621 12.7212 11.0631C12.6996 11.0782 12.6659 11.1021 12.6211 11.1341C12.5728 11.1685 12.5117 11.2123 12.4366 11.2665C12.2915 11.3711 12.1709 11.4556 12.0749 11.5201C11.9788 11.5845 11.8628 11.6568 11.7266 11.7369C11.5904 11.817 11.4621 11.877 11.3416 11.917C11.221 11.957 11.1094 11.977 11.0068 11.977H11.0001H10.9934C10.8908 11.977 10.7792 11.957 10.6586 11.917C10.5381 11.877 10.4097 11.8168 10.2735 11.7369C10.1373 11.6568 10.0211 11.5847 9.92528 11.5201C9.82929 11.4556 9.70877 11.3711 9.56369 11.2665C9.48835 11.2123 9.42728 11.1685 9.37902 11.134C9.33423 11.1021 9.30048 11.0781 9.27902 11.0631C9.09209 10.9321 8.86568 10.7743 8.60314 10.5921C8.29514 10.3781 7.93673 10.1301 7.52458 9.8456C6.7611 9.3187 6.30349 9.00179 6.15174 8.89499C5.87494 8.70823 5.61374 8.45149 5.36826 8.12462C5.12279 7.79762 5 7.4941 5 7.21398C5 6.86719 5.09253 6.57802 5.27789 6.34679C5.4631 6.11568 5.72749 6 6.07137 6H15.9285Z" stroke="#788793"/>
-</svg>
diff --git a/src/assets/toolpanel/intermediate-signal-catch-event.svg b/src/assets/toolpanel/intermediate-signal-catch-event.svg
deleted file mode 100644
index b648618c..00000000
--- a/src/assets/toolpanel/intermediate-signal-catch-event.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="13" cy="13" r="12.5" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<circle cx="12.9997" cy="12.9999" r="8.26471" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<path d="M12.5681 6.7327C12.761 6.40195 13.2389 6.40195 13.4319 6.7327L18.6909 15.7481C18.8853 16.0814 18.6449 16.5 18.259 16.5H7.74104C7.35514 16.5 7.11471 16.0814 7.30915 15.7481L12.5681 6.7327Z" stroke="#FFAB00"/>
-</svg>
diff --git a/src/assets/toolpanel/intermediate-signal-throw-event.svg b/src/assets/toolpanel/intermediate-signal-throw-event.svg
deleted file mode 100644
index c9849748..00000000
--- a/src/assets/toolpanel/intermediate-signal-throw-event.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="13" cy="13" r="12.5" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<circle cx="12.9997" cy="12.9999" r="8.26471" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<path d="M12.5681 6.7327C12.761 6.40195 13.2389 6.40195 13.4319 6.7327L18.6909 15.7481C18.8853 16.0814 18.6449 16.5 18.259 16.5H7.74104C7.35514 16.5 7.11471 16.0814 7.30915 15.7481L12.5681 6.7327Z" fill="#FFAB00" stroke="#FFAB00"/>
-</svg>
diff --git a/src/assets/toolpanel/intermediate-timer-event.svg b/src/assets/toolpanel/intermediate-timer-event.svg
deleted file mode 100644
index 2800b114..00000000
--- a/src/assets/toolpanel/intermediate-timer-event.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="13" cy="13" r="12.5" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<circle cx="12.9997" cy="12.9999" r="8.26471" fill="#FFAB00" fill-opacity="0.25" stroke="#FFAB00"/>
-<path d="M13 6.21875C9.25391 6.21875 6.21875 9.25391 6.21875 13C6.21875 16.7461 9.25391 19.7812 13 19.7812C16.7461 19.7812 19.7812 16.7461 19.7812 13C19.7812 9.25391 16.7461 6.21875 13 6.21875ZM15.529 14.7773L14.9821 15.4609C14.9463 15.5058 14.9019 15.5432 14.8516 15.5709C14.8012 15.5986 14.7459 15.6161 14.6888 15.6225C14.6317 15.6288 14.5739 15.6239 14.5187 15.6079C14.4636 15.5919 14.4121 15.5652 14.3672 15.5293L12.5352 14.1698C12.4071 14.0673 12.3038 13.9373 12.2328 13.7895C12.1618 13.6417 12.125 13.4798 12.125 13.3158V9.0625C12.125 8.94647 12.1711 8.83519 12.2531 8.75314C12.3352 8.67109 12.4465 8.625 12.5625 8.625H13.4375C13.5535 8.625 13.6648 8.67109 13.7469 8.75314C13.8289 8.83519 13.875 8.94647 13.875 9.0625V13L15.4609 14.1621C15.5058 14.198 15.5432 14.2424 15.5709 14.2928C15.5986 14.3431 15.6162 14.3985 15.6225 14.4556C15.6288 14.5128 15.6238 14.5706 15.6078 14.6258C15.5917 14.681 15.565 14.7325 15.529 14.7773Z" fill="#FFAB00"/>
-</svg>
diff --git a/src/assets/toolpanel/manual-task.svg b/src/assets/toolpanel/manual-task.svg
deleted file mode 100644
index eeb9c6e8..00000000
--- a/src/assets/toolpanel/manual-task.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.5 3C1.5 2.17157 2.17157 1.5 3 1.5L21 1.5C21.8284 1.5 22.5 2.17157 22.5 3L22.5 21C22.5 21.8284 21.8284 22.5 21 22.5L3 22.5C2.17157 22.5 1.5 21.8284 1.5 21L1.5 3ZM-1.31134e-07 21C-5.87108e-08 22.6569 1.34315 24 3 24L21 24C22.6569 24 24 22.6569 24 21L24 3C24 1.34314 22.6569 -9.90363e-07 21 -9.17939e-07L3 -1.31134e-07C1.34314 -5.87108e-08 -9.90363e-07 1.34315 -9.17939e-07 3L-1.31134e-07 21Z" fill="#333344"/>
-<path d="M17.1776 8.49995C16.5644 8.48822 16.0625 9.00179 16.0625 9.61511V11.9998H15.8438V7.18152C15.8438 6.5682 15.3418 6.05463 14.7286 6.06636C14.1344 6.07773 13.6563 6.56298 13.6563 7.15992V11.9998H13.4375V6.11511C13.4375 5.50179 12.9356 4.98822 12.3224 4.99995C11.7282 5.01133 11.25 5.49657 11.25 6.09351V11.9998H11.0313V7.20886C11.0313 6.59554 10.5293 6.08197 9.91615 6.0937C9.32194 6.10508 8.84375 6.59032 8.84375 7.18726V13.6402L7.97838 12.4502C7.6231 11.9617 6.93907 11.8536 6.45049 12.2089C5.96199 12.5642 5.85399 13.2483 6.20926 13.7368L9.64366 18.4592C9.76543 18.6267 9.92507 18.7629 10.1095 18.8568C10.294 18.9508 10.4981 18.9998 10.7051 18.9998H16.108C16.717 18.9998 17.2461 18.5807 17.3856 17.9879L18.1104 14.9073C18.2031 14.5132 18.25 14.1097 18.25 13.7049V9.59351C18.25 8.99657 17.7718 8.51133 17.1776 8.49995Z" fill="#6C757D"/>
-</svg>
diff --git a/src/assets/toolpanel/message-end-event.svg b/src/assets/toolpanel/message-end-event.svg
deleted file mode 100644
index 0f26f023..00000000
--- a/src/assets/toolpanel/message-end-event.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="14" cy="14" r="13" fill="#D11401" fill-opacity="0.25" stroke="#D11401" stroke-width="2"/>
-<path d="M20.7348 12.2172C20.8414 12.1324 21 12.2117 21 12.3457V17.9375C21 18.6621 20.4121 19.25 19.6875 19.25H8.3125C7.58789 19.25 7 18.6621 7 17.9375V12.3484C7 12.2117 7.15586 12.1352 7.26523 12.2199C7.87773 12.6957 8.68984 13.3 11.4789 15.3262C12.0559 15.7473 13.0293 16.6332 14 16.6277C14.9762 16.6359 15.9688 15.7309 16.5238 15.3262C19.3129 13.3 20.1223 12.693 20.7348 12.2172ZM14 15.75C14.6344 15.7609 15.5477 14.9516 16.007 14.618C19.6355 11.9848 19.9117 11.7551 20.7484 11.0988C20.907 10.9758 21 10.7844 21 10.582V10.0625C21 9.33789 20.4121 8.75 19.6875 8.75H8.3125C7.58789 8.75 7 9.33789 7 10.0625V10.582C7 10.7844 7.09297 10.973 7.25156 11.0988C8.08828 11.7523 8.36445 11.9848 11.993 14.618C12.4523 14.9516 13.3656 15.7609 14 15.75Z" fill="#D11401"/>
-</svg>
diff --git a/src/assets/toolpanel/message-start-event.svg b/src/assets/toolpanel/message-start-event.svg
index 6299b12e..f0c101f5 100644
--- a/src/assets/toolpanel/message-start-event.svg
+++ b/src/assets/toolpanel/message-start-event.svg
@@ -1,4 +1,4 @@
-<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="13.5" cy="13" r="12.5" fill="#00875A" fill-opacity="0.25" stroke="#00875A"/>
-<path d="M20.2347 11.2172C20.3413 11.1324 20.4999 11.2117 20.4999 11.3457V16.9375C20.4999 17.6621 19.912 18.25 19.1874 18.25H7.81244C7.08783 18.25 6.49994 17.6621 6.49994 16.9375V11.3484C6.49994 11.2117 6.6558 11.1352 6.76517 11.2199C7.37767 11.6957 8.18978 12.3 10.9788 14.3262C11.5558 14.7473 12.5292 15.6332 13.4999 15.6277C14.4761 15.6359 15.4687 14.7309 16.0238 14.3262C18.8128 12.3 19.6222 11.693 20.2347 11.2172ZM13.4999 14.75C14.1343 14.7609 15.0476 13.9516 15.507 13.618C19.1355 10.9848 19.4117 10.7551 20.2484 10.0988C20.407 9.97578 20.4999 9.78437 20.4999 9.58203V9.0625C20.4999 8.33789 19.912 7.75 19.1874 7.75H7.81244C7.08783 7.75 6.49994 8.33789 6.49994 9.0625V9.58203C6.49994 9.78437 6.59291 9.97305 6.7515 10.0988C7.58822 10.7523 7.86439 10.9848 11.4929 13.618C11.9523 13.9516 12.8656 14.7609 13.4999 14.75Z" fill="#00875A"/>
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 22C17.299 22 22 17.299 22 11.5C22 5.70101 17.299 1 11.5 1C5.70101 1 1 5.70101 1 11.5C1 17.299 5.70101 22 11.5 22Z" stroke="#00BF9C"/>
+<path d="M16.8407 16H6.15946C5.86719 16 5.61375 15.9052 5.39847 15.718L9.08324 12.0976C9.1754 12.1626 9.26065 12.2233 9.33752 12.2787C9.61336 12.4783 9.837 12.634 10.0088 12.7455C10.1804 12.8574 10.409 12.9714 10.6945 13.0878C10.98 13.2043 11.246 13.2624 11.4928 13.2624H11.5H11.5072C11.754 13.2624 12.02 13.2043 12.3055 13.0878C12.5908 12.9714 12.8194 12.8574 12.9912 12.7455C13.163 12.634 13.3868 12.4782 13.6625 12.2787C13.7434 12.2212 13.8291 12.1607 13.9175 12.0985L17.6015 15.718C17.3862 15.9052 17.133 16 16.8407 16ZM5.73081 9.83492C6.75533 10.5155 7.58985 11.0759 8.23755 11.518L5 14.6829V9.21951C5.2122 9.45061 5.45595 9.65578 5.73081 9.83492ZM17.2762 9.83491C17.5512 9.65098 17.7924 9.44596 18 9.21951V14.6829L14.7625 11.5192C15.4525 11.0483 16.2904 10.4869 17.2762 9.83491ZM16.8392 6C17.1535 6 17.4257 6.11089 17.6555 6.33257C17.885 6.55452 18 6.82101 18 7.13244C18 7.50519 17.8814 7.86143 17.6448 8.20104C17.4077 8.54066 17.1128 8.83095 16.7598 9.07151C15.586 9.86631 14.7002 10.4664 14.0988 10.874C13.7682 11.0979 13.5224 11.2647 13.3646 11.3718C13.3412 11.3878 13.3047 11.4132 13.2562 11.4472C13.2039 11.4837 13.1377 11.5302 13.0563 11.5877C12.8991 11.6986 12.7685 11.7882 12.6645 11.8567C12.5603 11.925 12.4347 12.0017 12.2872 12.0867C12.1396 12.1717 12.0006 12.2353 11.8701 12.2778C11.7394 12.3202 11.6185 12.3415 11.5073 12.3415H11.5001H11.4929C11.3817 12.3415 11.2608 12.3202 11.1302 12.2778C10.9996 12.2353 10.8605 12.1715 10.713 12.0867C10.5654 12.0017 10.4396 11.9252 10.3357 11.8567C10.2317 11.7882 10.1012 11.6986 9.94399 11.5877C9.86238 11.5302 9.79622 11.4837 9.74394 11.447C9.69541 11.4132 9.65885 11.3877 9.6356 11.3718C9.43309 11.2328 9.18782 11.0654 8.90341 10.8721C8.56974 10.645 8.18145 10.3819 7.73496 10.0801C6.90786 9.52105 6.41211 9.18482 6.24772 9.07151C5.94785 8.87337 5.66488 8.60097 5.39895 8.25417C5.13302 7.90723 5 7.5852 5 7.288C5 6.92006 5.10024 6.61326 5.30105 6.36794C5.50169 6.12273 5.78811 6 6.16065 6H16.8392Z" stroke="#00BF9C"/>
 </svg>
diff --git a/src/assets/toolpanel/message-start-event_bkp.svg b/src/assets/toolpanel/message-start-event_bkp.svg
deleted file mode 100644
index f0c101f5..00000000
--- a/src/assets/toolpanel/message-start-event_bkp.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.5 22C17.299 22 22 17.299 22 11.5C22 5.70101 17.299 1 11.5 1C5.70101 1 1 5.70101 1 11.5C1 17.299 5.70101 22 11.5 22Z" stroke="#00BF9C"/>
-<path d="M16.8407 16H6.15946C5.86719 16 5.61375 15.9052 5.39847 15.718L9.08324 12.0976C9.1754 12.1626 9.26065 12.2233 9.33752 12.2787C9.61336 12.4783 9.837 12.634 10.0088 12.7455C10.1804 12.8574 10.409 12.9714 10.6945 13.0878C10.98 13.2043 11.246 13.2624 11.4928 13.2624H11.5H11.5072C11.754 13.2624 12.02 13.2043 12.3055 13.0878C12.5908 12.9714 12.8194 12.8574 12.9912 12.7455C13.163 12.634 13.3868 12.4782 13.6625 12.2787C13.7434 12.2212 13.8291 12.1607 13.9175 12.0985L17.6015 15.718C17.3862 15.9052 17.133 16 16.8407 16ZM5.73081 9.83492C6.75533 10.5155 7.58985 11.0759 8.23755 11.518L5 14.6829V9.21951C5.2122 9.45061 5.45595 9.65578 5.73081 9.83492ZM17.2762 9.83491C17.5512 9.65098 17.7924 9.44596 18 9.21951V14.6829L14.7625 11.5192C15.4525 11.0483 16.2904 10.4869 17.2762 9.83491ZM16.8392 6C17.1535 6 17.4257 6.11089 17.6555 6.33257C17.885 6.55452 18 6.82101 18 7.13244C18 7.50519 17.8814 7.86143 17.6448 8.20104C17.4077 8.54066 17.1128 8.83095 16.7598 9.07151C15.586 9.86631 14.7002 10.4664 14.0988 10.874C13.7682 11.0979 13.5224 11.2647 13.3646 11.3718C13.3412 11.3878 13.3047 11.4132 13.2562 11.4472C13.2039 11.4837 13.1377 11.5302 13.0563 11.5877C12.8991 11.6986 12.7685 11.7882 12.6645 11.8567C12.5603 11.925 12.4347 12.0017 12.2872 12.0867C12.1396 12.1717 12.0006 12.2353 11.8701 12.2778C11.7394 12.3202 11.6185 12.3415 11.5073 12.3415H11.5001H11.4929C11.3817 12.3415 11.2608 12.3202 11.1302 12.2778C10.9996 12.2353 10.8605 12.1715 10.713 12.0867C10.5654 12.0017 10.4396 11.9252 10.3357 11.8567C10.2317 11.7882 10.1012 11.6986 9.94399 11.5877C9.86238 11.5302 9.79622 11.4837 9.74394 11.447C9.69541 11.4132 9.65885 11.3877 9.6356 11.3718C9.43309 11.2328 9.18782 11.0654 8.90341 10.8721C8.56974 10.645 8.18145 10.3819 7.73496 10.0801C6.90786 9.52105 6.41211 9.18482 6.24772 9.07151C5.94785 8.87337 5.66488 8.60097 5.39895 8.25417C5.13302 7.90723 5 7.5852 5 7.288C5 6.92006 5.10024 6.61326 5.30105 6.36794C5.50169 6.12273 5.78811 6 6.16065 6H16.8392Z" stroke="#00BF9C"/>
-</svg>
diff --git a/src/assets/toolpanel/parallel-gateway.svg b/src/assets/toolpanel/parallel-gateway.svg
deleted file mode 100644
index 97a0ff5a..00000000
--- a/src/assets/toolpanel/parallel-gateway.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.5841 2.91686C15.121 2.37989 15.9916 2.37989 16.5286 2.91686L28.1959 14.5841C28.7329 15.1211 28.7329 15.9917 28.1959 16.5287L16.5286 28.1959C15.9916 28.7329 15.121 28.7329 14.5841 28.1959L2.91682 16.5287C2.37984 15.9917 2.37984 15.1211 2.91682 14.5841L14.5841 2.91686ZM1.94454 13.6119C0.870602 14.6858 0.870602 16.427 1.94454 17.5009L13.6118 29.1682C14.6857 30.2421 16.427 30.2421 17.5009 29.1682L29.1682 17.5009C30.2421 16.427 30.2421 14.6858 29.1682 13.6119L17.5009 1.94459C16.427 0.870649 14.6857 0.870649 13.6118 1.94459L1.94454 13.6119Z" fill="#333344"/>
-<path d="M23.6429 13.7188H17.5357V8.375C17.5357 7.71928 16.928 7.1875 16.1786 7.1875H14.8214C14.072 7.1875 13.4643 7.71928 13.4643 8.375V13.7188H7.35714C6.60775 13.7188 6 14.2505 6 14.9062V16.0938C6 16.7495 6.60775 17.2812 7.35714 17.2812H13.4643V22.625C13.4643 23.2807 14.072 23.8125 14.8214 23.8125H16.1786C16.928 23.8125 17.5357 23.2807 17.5357 22.625V17.2812H23.6429C24.3923 17.2812 25 16.7495 25 16.0938V14.9062C25 14.2505 24.3923 13.7188 23.6429 13.7188Z" fill="#212529"/>
-</svg>
diff --git a/src/assets/toolpanel/script-task.svg b/src/assets/toolpanel/script-task.svg
deleted file mode 100644
index 89ab47fd..00000000
--- a/src/assets/toolpanel/script-task.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.5 3C1.5 2.17157 2.17157 1.5 3 1.5L21 1.5C21.8284 1.5 22.5 2.17157 22.5 3L22.5 21C22.5 21.8284 21.8284 22.5 21 22.5L3 22.5C2.17157 22.5 1.5 21.8284 1.5 21L1.5 3ZM-1.31134e-07 21C-5.87108e-08 22.6569 1.34315 24 3 24L21 24C22.6569 24 24 22.6569 24 21L24 3C24 1.34314 22.6569 -9.90363e-07 21 -9.17939e-07L3 -1.31134e-07C1.34314 -5.87108e-08 -9.90363e-07 1.34315 -9.17939e-07 3L-1.31134e-07 21Z" fill="#333344"/>
-<path d="M11.101 18.9863L9.76662 18.5023C9.62662 18.4531 9.54787 18.2699 9.58725 18.0949L12.5732 5.23785C12.6126 5.06285 12.7591 4.96441 12.8991 5.01363L14.2335 5.49762C14.3735 5.54684 14.4522 5.73004 14.4129 5.90504L11.4269 18.7621C11.3854 18.9371 11.241 19.0382 11.101 18.9863ZM8.60725 15.9183L9.55881 14.6496C9.65943 14.5156 9.65287 14.3023 9.54131 14.1793L7.55943 12L9.54131 9.82066C9.65287 9.69762 9.66162 9.48434 9.55881 9.35035L8.60725 8.0816C8.50881 7.95035 8.34256 7.94215 8.23537 8.06793L5.08318 11.7593C4.97162 11.8879 4.97162 12.1093 5.08318 12.2379L8.23537 15.932C8.34256 16.0578 8.50881 16.0523 8.60725 15.9183ZM15.7647 15.9347L18.9169 12.2406C19.0285 12.1121 19.0285 11.8906 18.9169 11.7621L15.7647 8.06519C15.6597 7.94215 15.4935 7.94762 15.3929 8.07887L14.4413 9.34762C14.3407 9.4816 14.3472 9.69488 14.4588 9.81793L16.4407 12L14.4588 14.1793C14.3472 14.3023 14.3385 14.5156 14.4413 14.6496L15.3929 15.9183C15.4913 16.0523 15.6576 16.0578 15.7647 15.9347Z" fill="#6C757D"/>
-</svg>
diff --git a/src/assets/toolpanel/signal-end-event.svg b/src/assets/toolpanel/signal-end-event.svg
deleted file mode 100644
index a7484057..00000000
--- a/src/assets/toolpanel/signal-end-event.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="14" cy="14" r="13" fill="#D11401" fill-opacity="0.25" stroke="#D11401" stroke-width="2"/>
-<path d="M13.567 5.75C13.7594 5.41667 14.2406 5.41667 14.433 5.75L22.2272 19.25C22.4197 19.5833 22.1791 20 21.7942 20H6.20577C5.82087 20 5.58031 19.5833 5.77276 19.25L13.567 5.75Z" fill="#D11401" stroke="#D11401"/>
-</svg>
diff --git a/src/assets/toolpanel/signal-start-event.svg b/src/assets/toolpanel/signal-start-event.svg
deleted file mode 100644
index dc88d741..00000000
--- a/src/assets/toolpanel/signal-start-event.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="13" cy="13" r="12.5" fill="#00875A" fill-opacity="0.25" stroke="#00875A"/>
-<path d="M12.567 4.75C12.7594 4.41667 13.2406 4.41667 13.433 4.75L21.2272 18.25C21.4197 18.5833 21.1791 19 20.7942 19H5.20577C4.82087 19 4.58031 18.5833 4.77276 18.25L12.567 4.75Z" stroke="#00875A"/>
-</svg>
diff --git a/src/assets/toolpanel/terminate-end-event.svg b/src/assets/toolpanel/terminate-end-event.svg
deleted file mode 100644
index 9af2950c..00000000
--- a/src/assets/toolpanel/terminate-end-event.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="14" cy="14" r="13" fill="#D11401" fill-opacity="0.25" stroke="#D11401" stroke-width="2"/>
-<circle cx="13.9997" cy="13.9999" r="8.76471" fill="#D11401" stroke="#D11401" stroke-width="2"/>
-</svg>
diff --git a/src/assets/toolpanel/timer-start-event.svg b/src/assets/toolpanel/timer-start-event.svg
deleted file mode 100644
index 63ac58f5..00000000
--- a/src/assets/toolpanel/timer-start-event.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="13.5" cy="13" r="12.5" fill="#00875A" fill-opacity="0.25" stroke="#00875A"/>
-<path d="M13.4999 6.21875C9.75385 6.21875 6.71869 9.25391 6.71869 13C6.71869 16.7461 9.75385 19.7812 13.4999 19.7812C17.246 19.7812 20.2812 16.7461 20.2812 13C20.2812 9.25391 17.246 6.21875 13.4999 6.21875ZM16.029 14.7773L15.4821 15.4609C15.4462 15.5058 15.4018 15.5432 15.3515 15.5709C15.3012 15.5986 15.2459 15.6161 15.1888 15.6225C15.1317 15.6288 15.0739 15.6239 15.0187 15.6079C14.9635 15.5919 14.912 15.5652 14.8671 15.5293L13.0351 14.1698C12.9071 14.0673 12.8038 13.9373 12.7328 13.7895C12.6618 13.6417 12.6249 13.4798 12.6249 13.3158V9.0625C12.6249 8.94647 12.671 8.83519 12.7531 8.75314C12.8351 8.67109 12.9464 8.625 13.0624 8.625H13.9374C14.0535 8.625 14.1648 8.67109 14.2468 8.75314C14.3288 8.83519 14.3749 8.94647 14.3749 9.0625V13L15.9609 14.1621C16.0058 14.198 16.0431 14.2424 16.0709 14.2928C16.0986 14.3431 16.1161 14.3985 16.1224 14.4556C16.1287 14.5128 16.1237 14.5706 16.1077 14.6258C16.0917 14.681 16.0649 14.7325 16.029 14.7773Z" fill="#00875A"/>
-</svg>
diff --git a/src/assets/trash-alt-solid.svg b/src/assets/trash-alt-solid.svg
index 528eb54d..b1f0e278 100644
--- a/src/assets/trash-alt-solid.svg
+++ b/src/assets/trash-alt-solid.svg
@@ -1,1 +1,4 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="trash-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-trash-alt fa-w-14 fa-7x"><path fill="currentColor" d="M0 84V56c0-13.3 10.7-24 24-24h112l9.4-18.7c4-8.2 12.3-13.3 21.4-13.3h114.3c9.1 0 17.4 5.1 21.5 13.3L312 32h112c13.3 0 24 10.7 24 24v28c0 6.6-5.4 12-12 12H12C5.4 96 0 90.6 0 84zm416 56v324c0 26.5-21.5 48-48 48H80c-26.5 0-48-21.5-48-48V140c0-6.6 5.4-12 12-12h360c6.6 0 12 5.4 12 12zm-272 68c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208zm96 0c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208zm96 0c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208z" class=""></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path fill="#fff"
+          d="M0 84V56c0-13.3 10.7-24 24-24h112l9.4-18.7c4-8.2 12.3-13.3 21.4-13.3h114.3c9.1 0 17.4 5.1 21.5 13.3L312 32h112c13.3 0 24 10.7 24 24v28c0 6.6-5.4 12-12 12H12C5.4 96 0 90.6 0 84zm416 56v324c0 26.5-21.5 48-48 48H80c-26.5 0-48-21.5-48-48V140c0-6.6 5.4-12 12-12h360c6.6 0 12 5.4 12 12zm-272 68c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208zm96 0c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208zm96 0c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208z"/>
+</svg>
diff --git a/src/components/crown/crownButtons/addLaneAboveButton.vue b/src/components/crown/crownButtons/addLaneAboveButton.vue
index 97750ba2..3e32eed2 100644
--- a/src/components/crown/crownButtons/addLaneAboveButton.vue
+++ b/src/components/crown/crownButtons/addLaneAboveButton.vue
@@ -5,15 +5,16 @@
     v-on="$listeners"
     :width="25"
   >
-    <font-awesome-icon :icon="['fpm', 'fa-lane-above']"/>
+    <img
+      :src="laneAboveIcon"
+      aria-hidden="true"
+    >
   </crown-button>
 </template>
 
 <script>
 import laneAboveIcon from '@/assets/lane-above.svg';
 import CrownButton from '@/components/crown/crownButtons/crownButton';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faLaneAbove } from './icons';
 
 export default {
   components: { CrownButton },
@@ -22,8 +23,5 @@ export default {
       laneAboveIcon,
     };
   },
-  created() {
-    library.add(faLaneAbove);
-  },
 };
 </script>
diff --git a/src/components/crown/crownButtons/addLaneBelowButton.vue b/src/components/crown/crownButtons/addLaneBelowButton.vue
index b59db578..401507bb 100644
--- a/src/components/crown/crownButtons/addLaneBelowButton.vue
+++ b/src/components/crown/crownButtons/addLaneBelowButton.vue
@@ -5,15 +5,16 @@
     v-on="$listeners"
     :width="25"
   >
-    <font-awesome-icon :icon="['fpm', 'fa-lane-below']"/>
+    <img
+      :src="laneBelowIcon"
+      aria-hidden="true"
+    >
   </crown-button>
 </template>
 
 <script>
 import laneBelowIcon from '@/assets/lane-below.svg';
 import CrownButton from '@/components/crown/crownButtons/crownButton';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faLaneBelow } from './icons';
 
 export default {
   components: { CrownButton },
@@ -22,8 +23,5 @@ export default {
       laneBelowIcon,
     };
   },
-  created() {
-    library.add(faLaneBelow);
-  },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/crown/crownButtons/associationFlowButton.vue b/src/components/crown/crownButtons/associationFlowButton.vue
index e4b91019..89fc0827 100644
--- a/src/components/crown/crownButtons/associationFlowButton.vue
+++ b/src/components/crown/crownButtons/associationFlowButton.vue
@@ -20,8 +20,6 @@ import connectIcon from '@/assets/connect-artifacts.svg';
 import CrownButton from '@/components/crown/crownButtons/crownButton';
 import { direction } from '@/components/nodes/association/associationConfig';
 import Node from '@/components/nodes/node';
-import store from '@/store';
-import { V } from 'jointjs';
 
 export default {
   components: { CrownButton },
@@ -31,23 +29,12 @@ export default {
       connectIcon,
     };
   },
-  computed: {
-    paper: () => store.getters.paper,
-  },
   methods: {
     addAssociation(cellView, evt, x, y) {
       this.$emit('toggle-crown-state', false);
-      const { clientX, clientY } = cellView;
-      let point = null;
-      if (cellView){
-        point = V(this.paper.viewport).toLocalPoint(clientX, clientY);
-      }
       const associationLink = this.moddle.create('bpmn:Association', {
         sourceRef: this.shape.component.node.definition,
-        targetRef: {
-          x: x ? x : point.x,
-          y: y ? y : point.y,
-        },
+        targetRef: { x, y },
         associationDirection: direction.none,
       });
 
diff --git a/src/components/crown/crownButtons/cloneButton.vue b/src/components/crown/crownButtons/cloneButton.vue
index 052ddb68..68b97132 100644
--- a/src/components/crown/crownButtons/cloneButton.vue
+++ b/src/components/crown/crownButtons/cloneButton.vue
@@ -5,9 +5,14 @@
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
     aria-label="Clone Element"
     data-test="clone-button"
+    role="menuitem"
     @click="cloneElement"
   >
-    <i class="fas fa-paste"/>
+    <img
+      :src="cloneIcon"
+      aria-hidden="true"
+      alt="Clone element icon"
+    >
   </crown-button>
   
 </template>
diff --git a/src/components/crown/crownButtons/copyButton.vue b/src/components/crown/crownButtons/copyButton.vue
index 83b6f377..c357536e 100644
--- a/src/components/crown/crownButtons/copyButton.vue
+++ b/src/components/crown/crownButtons/copyButton.vue
@@ -8,7 +8,10 @@
     role="menuitem"
     @click="copyElement"
   >
-    <i class="fas fa-clipboard"/>
+    <img
+      :src="copyIcon"
+      aria-hidden="true"
+    >
   </crown-button>
 
 </template>
diff --git a/src/components/crown/crownButtons/crownBoundaryEventDropdown.vue b/src/components/crown/crownButtons/crownBoundaryEventDropdown.vue
index 0b6dfaf7..f3d80702 100644
--- a/src/components/crown/crownButtons/crownBoundaryEventDropdown.vue
+++ b/src/components/crown/crownButtons/crownBoundaryEventDropdown.vue
@@ -4,14 +4,12 @@
       id="dropdown-button"
       aria-label="Select a boundary event"
       v-on="$listeners"
+      :src="boundaryEventIcon"
       @click="$emit('toggle-dropdown-state', !dropdownOpen)"
       data-test="boundary-event-dropdown"
       v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
       :title="$t('Boundary Events')"
-      role="menuitem"
-    >
-      <font-awesome-icon :icon="['fpm', 'fa-boundary-event']"/>
-    </crown-button>
+    />
 
     <ul class="element-list" v-if="dropdownOpen" role="list">
       <li
@@ -43,8 +41,6 @@ import { getEmptyBoundaryEventPositionsForShape } from '@/portsUtils';
 import { canAddBoundaryEventToTarget } from '@/boundaryEventValidation';
 import store from '@/store';
 import Node from '@/components/nodes/node';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faBoundaryEvent } from './icons';
 
 export default {
   name: 'CrownBoundaryEventDropdown',
@@ -97,7 +93,6 @@ export default {
   },
   created() {
     this.$t = this.$t.bind(this);
-    library.add(faBoundaryEvent);
   },
 };
 </script>
diff --git a/src/components/crown/crownButtons/crownButton.vue b/src/components/crown/crownButtons/crownButton.vue
index 432f9345..227fb44a 100644
--- a/src/components/crown/crownButtons/crownButton.vue
+++ b/src/components/crown/crownButtons/crownButton.vue
@@ -3,14 +3,13 @@
     v-on="$listeners"
     :id="id"
     :aria-label="ariaLabel"
-    class="crown-button"
+    class="btn"
   >
     <slot>
       <img
         :src="src"
         width="width"
         height="height"
-        class="crown-icon"
       >
     </slot>
   </button>
@@ -34,43 +33,19 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.crown-button {
-  border:none;
+<style scoped>
+.btn {
+  border: none;
+  padding: 0;
+  margin-top: 0;
   display: flex;
-  background-color: $primary-white;
-  border-radius: 4px;
-  color: $crown-icon-neutral;
-  width: 35px;
-  height: 35px;
-  font-size: 20px;
-  padding: 4px;
 }
-.crown-button:hover {
-  background-color: $crown-icon-hover-bg;
-  color: $crown-icon-neutral;
-}
-.crown-button:active {
-  background-color: $cronw-icon-active-bg;
-  color: $crown-icon-active;
-}
-
-.crown-button:focus {
-  background-color: #DEEBFF;
-  color: $crown-icon-active;
-}
-
 img {
-  margin: 0px 5px;
-  height: 20px;
-  width: 20px;
-  padding:2px;
-  fill: #5faaee;
-}
-.crown-button svg {
-  margin:auto;
+  margin: 0px 10px;
+  height: 15px;
 }
-.crown-button i {
-  margin:auto;
+i {
+  margin: 0px 10px;
+  font-size: 15px;
 }
 </style>
diff --git a/src/components/crown/crownButtons/crownColorDropdown.vue b/src/components/crown/crownButtons/crownColorDropdown.vue
index e2795673..c484db35 100644
--- a/src/components/crown/crownButtons/crownColorDropdown.vue
+++ b/src/components/crown/crownButtons/crownColorDropdown.vue
@@ -8,7 +8,7 @@
       @click="$emit('toggle-dropdown-state', !dropdownOpen)"
       data-test="picker-dropdown-button"
     >
-      <i class="fas fa-palette "/>
+      <i class="fas fa-palette cog-container--button"/>
     </crown-button>
 
     <div class="element-list color-list" v-if="dropdownOpen">
diff --git a/src/components/crown/crownButtons/crownDropdown.scss b/src/components/crown/crownButtons/crownDropdown.scss
index 279ea912..8640b4b5 100644
--- a/src/components/crown/crownButtons/crownDropdown.scss
+++ b/src/components/crown/crownButtons/crownDropdown.scss
@@ -8,6 +8,13 @@ $crown-left-chevron: 0.3rem;
 .cog-container {
   position: relative;
   display: flex;
+
+  &--button {
+    background: none;
+    border: none;
+    color: $primary-white;
+    height: 15px;
+  }
 }
 
 .element-list {
@@ -16,10 +23,8 @@ $crown-left-chevron: 0.3rem;
   top: $element-list-top;
   left: $element-list-left;
   border-radius: 5px;
-  background-color: $primary-white;
+  background-color: $primary-color;
   padding: 0;
-  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
-
 
   &::after {
     @include chevron($element-list-top-chevron, $element-list-left-chevron);
@@ -32,7 +37,7 @@ $crown-left-chevron: 0.3rem;
       background: none;
       padding: 0.25rem 0.85rem;
       border: none;
-      color: $primary-black;
+      color: $primary-white;
       font-size: 0.85rem;
 
       &:disabled {
diff --git a/src/components/crown/crownButtons/crownTaskDropdown.vue b/src/components/crown/crownButtons/crownTaskDropdown.vue
index f716440a..42a95f09 100644
--- a/src/components/crown/crownButtons/crownTaskDropdown.vue
+++ b/src/components/crown/crownButtons/crownTaskDropdown.vue
@@ -7,7 +7,7 @@
       v-on="$listeners"
       @click="$emit('toggle-dropdown-state', !dropdownOpen)"
     >
-      <i class="fas fa-cog" />
+      <i class="fas fa-cog cog-container--button" />
     </crown-button>
 
     <ul class="element-list" v-if="dropdownOpen" role="list">
diff --git a/src/components/crown/crownButtons/dataAssociationFlowButton.vue b/src/components/crown/crownButtons/dataAssociationFlowButton.vue
index 889a2e1b..e0bb69f2 100644
--- a/src/components/crown/crownButtons/dataAssociationFlowButton.vue
+++ b/src/components/crown/crownButtons/dataAssociationFlowButton.vue
@@ -22,8 +22,6 @@ import Node from '@/components/nodes/node';
 import * as dataOutputConfig from '@/components/nodes/dataOutputAssociation/config';
 import * as dataInputConfig from '@/components/nodes/dataInputAssociation/config';
 import DataAssociation from '@/components/nodes/genericFlow/DataAssociation';
-import store from '@/store';
-import { V } from 'jointjs';
 
 export default {
   components: { CrownButton },
@@ -34,19 +32,14 @@ export default {
     };
   },
   computed: {
-    paper: () => store.getters.paper,
     allowOutgoingDataAssociationFlow() {
       return DataAssociation.isADataNode(this.node);
     },
   },
   methods: {
-    addDataAssociation(cellView, x, y) {
+    addDataAssociation() {
       this.$emit('toggle-crown-state', false);
-      const { clientX, clientY } = cellView;
-      let point = null;
-      if (cellView){
-        point = V(this.paper.viewport).toLocalPoint(clientX, clientY);
-      }
+
       const comingFromDataStoreOrDataObject = this.node.isBpmnType('bpmn:DataStoreReference', 'bpmn:DataObjectReference');
 
       const dataAssociationConfig = comingFromDataStoreOrDataObject
@@ -63,10 +56,7 @@ export default {
 
       node.dataAssociationProps = {
         sourceShape: this.shape,
-        targetCoords: {
-          x: x ? x : point.x,
-          y: y ? y : point.y,
-        },
+        targetCoords: { x: undefined, y: undefined },
       };
 
       this.$emit('add-node', node);
diff --git a/src/components/crown/crownButtons/deleteButton.vue b/src/components/crown/crownButtons/deleteButton.vue
index b7fdce01..7e14781f 100644
--- a/src/components/crown/crownButtons/deleteButton.vue
+++ b/src/components/crown/crownButtons/deleteButton.vue
@@ -7,7 +7,13 @@
     @click="isPoolLane ? removePoolLaneShape() : removeShape()"
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
   >
-    <i class="fas fa-trash-alt cog-container--button"/>
+    <img
+      :src="trashIcon"
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="trash-alt"
+      class="fa-trash-alt trash-icon"
+    >
   </crown-button>
 </template>
 
diff --git a/src/components/crown/crownButtons/genericFlowButton.vue b/src/components/crown/crownButtons/genericFlowButton.vue
index e717cc0a..258fc7bf 100644
--- a/src/components/crown/crownButtons/genericFlowButton.vue
+++ b/src/components/crown/crownButtons/genericFlowButton.vue
@@ -8,7 +8,10 @@
     role="menuitem"
     @click="addSequence"
   >
-    <font-awesome-icon :icon="['fpm', 'fa-connect-elements']"/>
+    <img
+      :src="sequenceFlow"
+      aria-hidden="true"
+    >
   </crown-button>
 </template>
 <script>
@@ -16,10 +19,6 @@ import Flow from '@/assets/connect-elements.svg';
 import CrownButton from '@/components/crown/crownButtons/crownButton';
 import Node from '@/components/nodes/node';
 import { id as genericFlowId } from '@/components/nodes/genericFlow/config';
-import store from '@/store';
-import { V } from 'jointjs';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faConnectElements } from './icons';
 
 // Don't show the magic flow button on:
 const dontShowOn = [
@@ -43,7 +42,6 @@ export default {
     };
   },
   computed: {
-    paper: () => store.getters.paper,
     sequenceFlowConfig() {
       return this.nodeRegistry[genericFlowId];
     },
@@ -60,18 +58,10 @@ export default {
   methods: {
     addSequence(cellView, evt, x, y) {
       this.$emit('toggle-crown-state', false);
-      const { clientX, clientY } = cellView;
-      let point = null;
-      if (cellView){
-        point = V(this.paper.viewport).toLocalPoint(clientX, clientY);
-      }
       const flowPlaceholderDefinition = this.moddle.create('bpmn:SequenceFlow', {
         name: '',
         sourceRef: this.node.definition,
-        targetRef: {
-          x: x ? x : point.x,
-          y: y ? y : point.y,
-        },
+        targetRef: { x, y },
       });
 
       this.$emit('add-node', new Node(
@@ -83,7 +73,6 @@ export default {
   },
   created() {
     this.$t = this.$t.bind(this);
-    library.add(faConnectElements);
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/crown/crownButtons/icons/faBoundaryEvent.js b/src/components/crown/crownButtons/icons/faBoundaryEvent.js
deleted file mode 100644
index 7b49b3cc..00000000
--- a/src/components/crown/crownButtons/icons/faBoundaryEvent.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const faBoundaryEvent = {
-  prefix: 'fpm',
-  iconName: 'fa-boundary-event',
-  icon: [
-    112,
-    112,
-    [],
-    'e001',
-    'M51.739 2.056c-13.026.848-25.131 6.341-34.43 15.625C10.84 24.139 6.603 30.987 3.72 39.642.81 48.38.051 56.948 1.392 65.92c.932 6.232 3.501 13.807 6.441 18.991 8.903 15.7 23.772 25.701 41.487 27.903 2.517.312 9.393.312 11.911 0 17.703-2.201 32.617-12.231 41.488-27.903 2.943-5.2 5.508-12.763 6.439-18.991 1.698-11.359-.064-22.783-5.13-33.257-4.913-10.156-13.314-18.932-23.21-24.247-7.159-3.845-14.191-5.854-22.286-6.365-3.224-.204-3.584-.204-6.793.005m8.216 4.091c8.319.827 15.946 3.548 22.891 8.165 3.153 2.096 5.414 3.998 8.35 7.021 7.582 7.807 12.34 17.536 14.049 28.731.423 2.764.572 9.015.29 12.1-.962 10.515-4.848 20.143-11.415 28.286-1.857 2.303-5.901 6.293-8.136 8.029a50.9 50.9 0 0 1-23.544 10.144c-3.182.489-11.148.489-14.33 0-5.812-.893-11.669-2.875-16.75-5.668-11.303-6.213-20.134-17.022-24.092-29.49-3.259-10.266-3.259-21.647 0-31.913a51.37 51.37 0 0 1 11.995-20.128c2.834-2.93 5.301-5.008 8.426-7.097a49.964 49.964 0 0 1 22.654-8.169c2.192-.225 7.401-.231 9.612-.011m-9.053 12.099c-20.419 2.322-35.641 19.091-35.641 39.263 0 14.657 8.112 27.984 21.217 34.859 14.221 7.46 31.65 5.768 44.132-4.283 14.219-11.449 18.699-30.977 10.879-47.42-5.522-11.611-16.451-19.808-29.421-22.068-2.55-.444-8.659-.636-11.166-.351m6.979 3.906c1.382.105 3.214.321 4.071.481 12.854 2.394 23.482 11.579 27.55 23.808 4.141 12.449 1.019 26.046-8.153 35.508-5.615 5.792-12.307 9.26-20.584 10.667-2.565.436-8.414.436-10.98 0-11.016-1.872-19.998-7.889-25.586-17.14-5.178-8.573-6.354-19.406-3.15-29.035 4.492-13.506 16.952-23.186 31.248-24.278 2.856-.218 2.85-.218 5.584-.011',
-  ],
-};
diff --git a/src/components/crown/crownButtons/icons/faConnectElements.js b/src/components/crown/crownButtons/icons/faConnectElements.js
deleted file mode 100644
index 14f4e3e6..00000000
--- a/src/components/crown/crownButtons/icons/faConnectElements.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const faConnectElements = {
-  prefix: 'fpm',
-  iconName: 'fa-connect-elements',
-  icon: [
-    20,
-    20,
-    [],
-    'e002',
-    'M0 2.502v2.501h5.003V3.008h5.004v15.01h5.478V19c0 .54.011.981.024.981.053-.001 2.989-2.477 2.964-2.499a203.517 203.517 0 0 0-2.942-2.429c-.04-.016-.046.116-.046.967v.985h-4.497V1.995H5.003V0H0v2.502m3.99.016v1.504H1.013V1.013H3.99v1.505',
-  ],
-};
diff --git a/src/components/crown/crownButtons/icons/faLaneAbove.js b/src/components/crown/crownButtons/icons/faLaneAbove.js
deleted file mode 100644
index 2f2a7107..00000000
--- a/src/components/crown/crownButtons/icons/faLaneAbove.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const faLaneAbove = {
-  prefix: 'fpm',
-  iconName: 'fa-lane-above',
-  icon: [
-    26,
-    18,
-    [],
-    'e003',
-    'M0 .997v.996h.997V.997h1.04V0H0v.997M2.99.498v.499h2.037V0H2.99v.498m2.99 0v.499h2.037V0H5.98v.498m3.033 0v.499h1.994V0H9.013v.498m2.99 0v.499h1.994V0h-1.994v.498m2.99 0v.499h1.994V0h-1.994v.498m2.99 0v.499h2.037V0h-2.037v.498m2.99 0v.499h2.037V0h-2.037v.498m2.99 0v.499h1.04v.996H26V0h-2.037v.498M0 3.987v.996h.997V2.99H0v.997m25.003 0v.996H26V2.99h-.997v.997M0 11.982v6.001h26V5.98H0v6.002',
-  ],
-};
diff --git a/src/components/crown/crownButtons/icons/faLaneBelow.js b/src/components/crown/crownButtons/icons/faLaneBelow.js
deleted file mode 100644
index 9d8b9579..00000000
--- a/src/components/crown/crownButtons/icons/faLaneBelow.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const faLaneBelow = {
-  prefix: 'fpm',
-  iconName: 'fa-lane-below',
-  icon: [
-    26,
-    18,
-    [],
-    'e004',
-    'M0 6.002v6.001h26V0H0v6.002m0 7.995v.996h.997V13H0v.997m25.003 0v.996H26V13h-.997v.997M0 16.987v.996h2.037v-.996H.997v-.997H0v.997m25.003-.499v.499h-1.04v.996H26V15.99h-.997v.498m-22.013.997v.498h2.037v-.996H2.99v.498m2.99 0v.498h2.037v-.996H5.98v.498m3.033 0v.498h1.994v-.996H9.013v.498m2.99 0v.498h1.994v-.996h-1.994v.498m2.99 0v.498h1.994v-.996h-1.994v.498m2.99 0v.498h2.037v-.996h-2.037v.498m2.99 0v.498h2.037v-.996h-2.037v.498',
-  ],
-};
diff --git a/src/components/crown/crownButtons/icons/index.js b/src/components/crown/crownButtons/icons/index.js
deleted file mode 100644
index c246627e..00000000
--- a/src/components/crown/crownButtons/icons/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { faBoundaryEvent } from './faBoundaryEvent.js';
-export { faConnectElements } from './faConnectElements';
-export { faLaneAbove } from './faLaneAbove';
-export { faLaneBelow } from './faLaneBelow';
diff --git a/src/components/crown/crownConfig/crownConfig.scss b/src/components/crown/crownConfig/crownConfig.scss
index defacdb5..fee403ca 100644
--- a/src/components/crown/crownConfig/crownConfig.scss
+++ b/src/components/crown/crownConfig/crownConfig.scss
@@ -2,19 +2,18 @@ $crown-top-chevron: 0.8rem;
 $crown-left-chevron: 0.3rem;
 
 .crown-config {
-  background-color: $primary-white;
+  background-color: $primary-color;
   position: absolute;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0 3px 0 3px;
-  height: 2.5rem;
+  height: 1.85rem;
   border-radius: 5px;
-  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
 
   &::after {
     @include chevron($crown-top-chevron, $crown-left-chevron);
   }
-}
\ No newline at end of file
+}
+
diff --git a/src/components/crown/crownConfig/crownConfig.vue b/src/components/crown/crownConfig/crownConfig.vue
index 2733bfe5..53da1eba 100644
--- a/src/components/crown/crownConfig/crownConfig.vue
+++ b/src/components/crown/crownConfig/crownConfig.vue
@@ -222,6 +222,8 @@ export default {
       if (!store.getters.allowSavingElementPosition) {
         return;
       }
+
+      this.$emit('save-state');
     },
     repositionCrown() {
       const shapeView = this.shape.findView(this.paper);
@@ -233,7 +235,7 @@ export default {
       const { x, y, width } = shapeView.getBBox({ useModelGeometry: !this.isTextAnnotation && !this.isFlow });
 
       this.style = {
-        top: `${y - 52}px`,
+        top: `${y - 45}px`,
         left: `${x + width - 20}px`,
         cursor: 'pointer',
       };
diff --git a/src/components/modeler/Modeler.vue b/src/components/modeler/Modeler.vue
index b32d364c..da93ad7d 100644
--- a/src/components/modeler/Modeler.vue
+++ b/src/components/modeler/Modeler.vue
@@ -103,11 +103,6 @@
         @default-flow="toggleDefaultFlow"
         @shape-resize="shapeResize"
       />
-
-      <RailBottom
-        :paper-manager="paperManager"
-      />
-
       <selection
         v-if="paper"
         ref="selector"
@@ -150,12 +145,6 @@ import { id as messageFlowId } from '../nodes/messageFlow/config';
 import { id as dataOutputAssociationFlowId } from '../nodes/dataOutputAssociation/config';
 import { id as dataInputAssociationFlowId } from '../nodes/dataInputAssociation/config';
 import { id as genericFlowId } from '@/components/nodes/genericFlow/config';
-import { id as boundaryErrorEventId } from '@/components/nodes/boundaryErrorEvent';
-import { id as boundaryConditionalEventId } from '@/components/nodes/boundaryConditionalEvent';
-import { id as boundaryEscalationEventId } from '@/components/nodes/boundaryEscalationEvent';
-import { id as boundaryMessageEventId } from '@/components/nodes/boundaryMessageEvent';
-import { id as boundarySignalEventId } from '@/components/nodes/boundarySignalEvent';
-import { id as boundaryTimerEventId } from '@/components/nodes/boundaryTimerEvent';
 
 import PaperManager from '../paperManager';
 import registerInspectorExtension from '@/components/InspectorExtensionManager';
@@ -173,13 +162,11 @@ import { getInvalidNodes } from '@/components/modeler/modelerUtils';
 import { NodeMigrator } from '@/components/modeler/NodeMigrator';
 import addLoopCharacteristics from '@/setup/addLoopCharacteristics';
 import cloneSelection from '../../mixins/cloneSelection';
-import RailBottom from '@/components/railBottom/RailBottom.vue';
 
 import ProcessmakerModelerGenericFlow from '@/components/nodes/genericFlow/genericFlow';
 
 import Selection from './Selection';
 
-
 export default {
   components: {
     ToolBar,
@@ -188,7 +175,6 @@ export default {
     MiniPaper,
     ProcessmakerModelerGenericFlow,
     Selection,
-    RailBottom,
   },
   props: {
     owner: Object,
@@ -342,15 +328,7 @@ export default {
         genericFlowId,
         processId,
       ];
-      const boundaryEvents = [
-        boundaryErrorEventId,
-        boundaryConditionalEventId,
-        boundaryEscalationEventId,
-        boundaryMessageEventId,
-        boundarySignalEventId,
-        boundaryTimerEventId,
-      ];
-      if (this.highlightedNodes.length === 1 && (flows.includes(this.highlightedNodes[0].type) || boundaryEvents.includes(this.highlightedNodes[0].type))) return;
+      if (this.highlightedNodes.length === 1 && flows.includes(this.highlightedNodes[0].type)) return;
       store.commit('setCopiedElements', this.cloneNodesSelection());
       this.$bvToast.toast(this.$t('Object(s) have been copied'), { noCloseButton:true, variant: 'success', solid: true, toaster: 'b-toaster-top-center' });
     },
@@ -1172,7 +1150,6 @@ export default {
     },
     pointerMoveHandler(event) {
       const { clientX: x, clientY: y } = event;
-      if (this.isGrabbing) return;
       if (this.dragStart && (Math.abs(x - this.dragStart.x) > 5 || Math.abs(y - this.dragStart.y) > 5)) {
         this.isDragging = true;
         this.dragStart = null;
@@ -1190,6 +1167,7 @@ export default {
       if (!this.isDragging && this.dragStart) {
         // is clicked over the shape
         if (cellView) {
+          this.$refs.selector.stopDrag(event);
           this.$refs.selector.selectElement(cellView, event.shiftKey);
         } else {
           this.clearSelection();
@@ -1267,16 +1245,6 @@ export default {
       this.isOverShape = false;
       this.pointerDownHandler(event);
     }, this);
-
-    this.paperManager.addEventHandler('cell:mouseover element:mouseover', ({ model: shape }) => {
-      if (this.isBpmnNode(shape) && shape.attr('body/cursor') !== 'default' && !this.isGrabbing) {
-        shape.attr('body/cursor', 'move');
-      }
-      // If the user is panning the Paper while hovering an element, ignore the default move cursor
-      if (this.isGrabbing && this.isBpmnNode(shape)) {
-        shape.attr('body/cursor', 'grabbing');
-      }
-    });
     this.paperManager.addEventHandler('blank:pointerup', (event) => {
       this.canvasDragPosition = null;
       this.activeNode = null;
@@ -1313,9 +1281,6 @@ export default {
         return;
       }
 
-      // ignore click event if the user is Grabbing the paper
-      if (this.isGrabbing) return;
-
       shape.component.$emit('click', event);
     });
 
@@ -1323,30 +1288,11 @@ export default {
       if (!this.isBpmnNode(shape)) {
         return;
       }
-      // If the user is pressing Space (grabbing) and clicking on a Cell, return
-      if (this.isGrabbing) {
-        return;
-      }
       this.setShapeStacking(shape);
       this.activeNode = shape.component.node;
       this.isOverShape = true;
       this.pointerDowInShape(event, shape);
     });
-    // If the user is grabbing the paper while he clicked in a cell, move the paper and not the cell
-    this.paperManager.addEventHandler('cell:pointermove', (_, event, x, y) => {
-      if (this.isGrabbing) {
-        if (!this.canvasDragPosition) {
-          const scale = this.paperManager.scale;
-          this.canvasDragPosition = { x: x * scale.sx, y: y * scale.sy };
-        }
-        if (this.canvasDragPosition && !this.clientLeftPaper) {
-          this.paperManager.translate(
-            event.offsetX - this.canvasDragPosition.x,
-            event.offsetY - this.canvasDragPosition.y
-          );
-        }
-      }
-    });
 
     /* Register custom nodes */
     window.ProcessMaker.EventBus.$emit('modeler-start', {
diff --git a/src/components/modeler/Selection.vue b/src/components/modeler/Selection.vue
index cc20e951..620d1fa8 100644
--- a/src/components/modeler/Selection.vue
+++ b/src/components/modeler/Selection.vue
@@ -53,7 +53,6 @@ export default {
       isSelecting: false,
       isSelected: false,
       selected: [],
-      conectedLinks:[],
       dragging: false,
       style:  {
         left: '0px',
@@ -97,7 +96,6 @@ export default {
   watch: {
     // whenever selected changes
     selected(newSelected) {
-      this.prepareConectedLinks(newSelected);
       this.addToHighlightedNodes(newSelected);
     },
   },
@@ -296,24 +294,6 @@ export default {
       });
       return elements;
     },
-    /**
-     * Prepare the conectedLinks collection
-     * @param {Array} shapes 
-     */
-    prepareConectedLinks(shapes){
-      const { paper } = this.paperManager;
-      this.conectedLinks = [];
-      shapes.forEach((shape) => {
-        const conectedLinks = this.graph.getConnectedLinks(shape.model);
-        conectedLinks.forEach((link) => {
-          const linkView = paper.findViewByModel(link);
-          if (!this.conectedLinks.some(obj => obj.id === linkView.id)) {
-            this.conectedLinks.push(linkView);
-          }
-        });
- 
-      });
-    },
     /**
      * Return the bounding box of the selected elements,
      * @param {Array} selected
@@ -387,7 +367,7 @@ export default {
         // remove from selection the selected flows that belongs to a selected pools
         if (shape.model.component  && flowTypes.includes(shape.model.component.node.type)) {
           const parent = shape.model.getParentCell();
-          if (parent && parent.component && parent.component.node.pool) {
+          if (parent.component && parent.component.node.pool) {
             return !selectedPoolsIds.includes(parent.component.node.pool.component.node.id);
           }
         }
@@ -495,27 +475,13 @@ export default {
      * @param {Object} event
      */
     stopDrag() {
+      this.overPoolStopDrag();
+      this.$emit('save-state');
       this.dragging = false;
       this.stopForceMove = false;
       // Readjusts the selection box, taking into consideration elements
       // that are anchored and did not move, such as boundary events. 
       this.updateSelectionBox();
-      this.updateFlowsWaypoint();
-      this.overPoolStopDrag();
-    },
-    /**
-     * Selector will update the waypoints of the related flows
-     */
-    updateFlowsWaypoint(){
-      this.conectedLinks.forEach((link)=> {
-        if (link.model.component && link.model.get('type') === 'standard.Link'){
-          const start = link.sourceAnchor;
-          const end = link.targetAnchor;
-          link.model.component.node.diagram.waypoint = [start,
-            ...link.model.component.shape.vertices(),
-            end].map(point => link.model.component.moddle.create('dc:Point', point));
-        }
-      });
     },
     /**
      * Translate the Selected shapes adding some custom validations
@@ -666,14 +632,12 @@ export default {
      */
     overPoolStopDrag(){
       if (this.isNotPoolChilds(this.selected)) {
-        this.$emit('save-state');
         return;
       }
       if (this.isOutOfThePool) {
         this.rollbackSelection();
       } else {
         this.expandToFitElement(this.selected);
-        this.$emit('save-state');
       }
     },
     /**
@@ -695,7 +659,6 @@ export default {
           shape.model.translate(deltaX/scale.sx, deltaY/scale.sy);
         });
       this.isOutOfThePool = false;
-      this.updateFlowsWaypoint();
       await store.commit('allowSavingElementPosition');
       this.paperManager.setStateValid();
       await this.$nextTick();
@@ -771,6 +734,7 @@ export default {
             node: pool.component.node,
             bounds: pool.getBBox(),
           });
+          this.$emit('save-state');
         }
       }
     },
diff --git a/src/components/modeler/modeler.scss b/src/components/modeler/modeler.scss
index 963b1278..46258326 100644
--- a/src/components/modeler/modeler.scss
+++ b/src/components/modeler/modeler.scss
@@ -21,10 +21,6 @@
     user-select: none;
   }
 
-  .joint-element {
-    cursor: default;
-  }
-
   .joint-marker-vertex:hover {
     fill: $error-color;
     cursor: url('../../assets/delete-icon-vertex.png') 0 0, pointer;
diff --git a/src/components/modeler/setUpSelectionBox.js b/src/components/modeler/setUpSelectionBox.js
new file mode 100644
index 00000000..b8a08f5a
--- /dev/null
+++ b/src/components/modeler/setUpSelectionBox.js
@@ -0,0 +1,146 @@
+import { g, shapes } from 'jointjs';
+import store from '@/store';
+import { canMoveProgrammatically } from '@/components/nodes/utilities/shapeMovement';
+
+const shapesToNotTranslate = [
+  'processmaker.modeler.bpmn.pool',
+  'PoolLane',
+  'processmaker.components.nodes.boundaryEvent.Shape',
+];
+
+export default function setUpSelectionBox(setCursor, resetCursor, paperManager, graph) {
+  let initialPosition;
+  let shiftKeyPressed = false;
+  let selectionBox;
+  let selectionboxMousedownPosition;
+
+  document.addEventListener('keydown', shiftKeyDownListener);
+  document.addEventListener('keyup', shiftKeyUpListener);
+  document.addEventListener('mousedown', mousedownListener);
+  document.addEventListener('mouseup', mouseupListener);
+  document.addEventListener('mousemove', mousemoveListener);
+  paperManager.addEventHandler('cell:pointerdown', cellView => {
+    if (!cellView.model.component) {
+      return;
+    }
+
+    initialPosition = cellView.model.position();
+    cellView.model.on('change:position', moveAllOtherHighlightedShapes);
+  });
+  paperManager.addEventHandler('cell:pointerup link:pointerup element:pointerup blank:pointerup', cellView => {
+    if (!cellView.model) {
+      return;
+    }
+
+    cellView.model.off('change:position', moveAllOtherHighlightedShapes);
+  });
+
+  function resetMultiSelect() {
+    resetCursor();
+    shiftKeyPressed = false;
+    paperManager.preventTranslate = false;
+    paperManager.paper.setInteractivity(graph.get('interactiveFunc'));
+  }
+
+  function shiftKeyDownListener(event) {
+    if (event.shiftKey && (event.ctrlKey || event.altKey || event.metaKey)) {
+      resetMultiSelect();
+      return;
+    }
+
+    if (event.key !== 'Shift' || shiftKeyPressed) {
+      return;
+    }
+
+    setCursor();
+    shiftKeyPressed = true;
+    paperManager.preventTranslate = true;
+    paperManager.paper.setInteractivity(false);
+  }
+
+  function shiftKeyUpListener({ key }) {
+    if (key !== 'Shift' || !shiftKeyPressed) {
+      return;
+    }
+    resetMultiSelect();
+  }
+
+  function mousedownListener({ clientX, clientY }) {
+    if (!shiftKeyPressed) {
+      return;
+    }
+
+    selectionboxMousedownPosition = paperManager.clientToGridPoint(clientX, clientY);
+  }
+
+  function mousemoveListener({ clientX, clientY }) {
+    if (!selectionboxMousedownPosition) {
+      return;
+    }
+
+    if (selectionBox) {
+      graph.removeCells(selectionBox);
+    }
+
+    const { x, y } = paperManager.clientToGridPoint(clientX, clientY);
+    selectionBox = createSelectionBox(selectionboxMousedownPosition, { x, y });
+    graph.addCell(selectionBox);
+  }
+
+  function mouseupListener() {
+    selectionboxMousedownPosition = null;
+
+    if (!selectionBox) {
+      return;
+    }
+
+    const selectedNodes = paperManager.paper
+      .findViewsInArea(selectionBox.getBBox(), { strict: true })
+      .filter(shape => shape.model.component)
+      .map(shape => shape.model.component.node);
+
+    store.commit('addToHighlightedNodes', selectedNodes);
+
+    graph.removeCells(selectionBox);
+    selectionBox = null;
+  }
+
+  function moveAllOtherHighlightedShapes(element, newPosition, { movedWithArrowKeys }) {
+    if (
+      movedWithArrowKeys ||
+      !canMoveProgrammatically(element) ||
+      !store.getters.highlightedShapes.includes(element) ||
+      element.component.node.pool
+    ) {
+      return;
+    }
+
+    const { x, y } = initialPosition;
+    const dx = newPosition.x - x;
+    const dy = newPosition.y - y;
+
+    store.getters.highlightedShapes
+      .filter(shape => shape !== element && !shapesToNotTranslate.includes(shape.get('type')))
+      .forEach(shape => shape.translate(dx, dy));
+
+    initialPosition = newPosition;
+  }
+
+  function createSelectionBox(p1, p2) {
+    const { x, y, width, height } = new g.Line(p1, p2).bbox();
+
+    return new shapes.standard.Rectangle({
+      position: { x, y },
+      size: { width, height },
+      type: 'selectionBox',
+      attrs: {
+        body: {
+          fill: 'lightblue',
+          opacity: 0.3,
+          stroke: 'blue',
+          strokeWidth: 1,
+        },
+      },
+    });
+  }
+}
diff --git a/src/components/nodes/boundaryConditionalEvent/index.js b/src/components/nodes/boundaryConditionalEvent/index.js
index be123fba..878e31e8 100644
--- a/src/components/nodes/boundaryConditionalEvent/index.js
+++ b/src/components/nodes/boundaryConditionalEvent/index.js
@@ -7,10 +7,9 @@ import advancedAccordionConfig from '@/components/inspectors/advancedAccordionCo
 import documentationAccordionConfig from '@/components/inspectors/documentationAccordionConfig';
 import { default as eventDefinition, inspector } from '../conditionalEventDefinition';
 
-export const id = 'processmaker-modeler-boundary-conditional-event';
 export default merge(cloneDeep(boundaryEventConfig), {
   ...eventDefinition,
-  id,
+  id: 'processmaker-modeler-boundary-conditional-event',
   component,
   control: false,
   label: 'Boundary Conditional Event',
diff --git a/src/components/nodes/boundaryEvent/boundaryEvent.vue b/src/components/nodes/boundaryEvent/boundaryEvent.vue
index 5f7de5d3..b37748d6 100644
--- a/src/components/nodes/boundaryEvent/boundaryEvent.vue
+++ b/src/components/nodes/boundaryEvent/boundaryEvent.vue
@@ -218,6 +218,7 @@ export default {
     this.updateShapePosition(task);
 
     this.shape.on('change:position', this.turnInvalidTargetRed);
+    this.shape.listenTo(this.paper, 'element:pointerdown', this.attachToValidTarget);
   },
 };
 </script>
diff --git a/src/components/nodes/boundaryTimerEvent/index.js b/src/components/nodes/boundaryTimerEvent/index.js
index 339d776f..435f9162 100644
--- a/src/components/nodes/boundaryTimerEvent/index.js
+++ b/src/components/nodes/boundaryTimerEvent/index.js
@@ -9,10 +9,8 @@ import documentationAccordionConfig from '@/components/inspectors/documentationA
 
 export const defaultDurationValue = 'PT1H';
 
-export const id = 'processmaker-modeler-boundary-timer-event';
-
 export default merge(cloneDeep(boundaryEventConfig), {
-  id,
+  id: 'processmaker-modeler-boundary-timer-event',
   component,
   control: false,
   label: 'Boundary Timer Event',
diff --git a/src/components/railBottom/RailBottom.vue b/src/components/railBottom/RailBottom.vue
deleted file mode 100644
index bbe11a31..00000000
--- a/src/components/railBottom/RailBottom.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="rail-container" data-cy="rail-bottom">
-    <div class="rail-left">
-      <MiniPaperControl />
-
-      <ZoomControl
-        :paper-manager="paperManager"
-      />
-    </div>
-
-    <div class="rail-center">
-      <UndoRedoControl />
-
-      <Controls />
-    </div>
-  </div>
-</template>
-
-<script>
-import MiniPaperControl from '@/components/railBottom/miniPaperControl/MiniPaperControl.vue';
-import ZoomControl from '@/components/railBottom/zoomControl/ZoomControl.vue';
-import UndoRedoControl from '@/components/railBottom/undoRedoControl/UndoRedoControl.vue';
-import Controls from '@/components/railBottom/controls/Controls.vue';
-
-export default {
-  components: {
-    MiniPaperControl,
-    ZoomControl,
-    UndoRedoControl,
-    Controls,
-  },
-  props: {
-    paperManager: Object,
-  },
-};
-</script>
-
-<style lang="scss" scoped src="./railBottom.scss"></style>
diff --git a/src/components/railBottom/controls/Controls.vue b/src/components/railBottom/controls/Controls.vue
deleted file mode 100644
index 2efd23a5..00000000
--- a/src/components/railBottom/controls/Controls.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <ul class="control-list">
-
-    <li v-for="(item, key) in controlList" class="control-item" :id="item.id" :key="key">
-      <SubmenuPopper :data="item"/>
-    </li>
-
-    <li class="control-item">
-      <div class="control-add" :title="$t('Add')" v-b-tooltip.hover>
-        <img :src="plusIcon" :alt="$t('Add')">
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script>
-import SubmenuPopper from './SubmenuPopper/SubmenuPopper.vue';
-export default ({
-  components: {
-    SubmenuPopper,
-  },
-  data() {
-    return {
-      controlList:[
-        {
-          iconSrc: require('@/assets/toolpanel/start-event.svg'),
-          label: this.$t('Start Event'),
-          id: 'startEvent',
-          items: [
-            {
-              iconSrc: require('@/assets/toolpanel/start-event.svg'),
-              label: this.$t('Start Event'),
-              id: 'genericStartEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/message-start-event.svg'),
-              label: this.$t('Message Start Event'),
-              id: 'messageStartEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/conditional-start-event.svg'),
-              label: this.$t('Conditional Start Event'),
-              id: 'conditionalStartEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/signal-start-event.svg'),
-              label: this.$t('Signal Start Event'),
-              id: 'signalStartEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/timer-start-event.svg'),
-              label: this.$t('Start Timer Event'),
-              id: 'timerStartEvent',
-            },
-          ],
-        },
-        {
-          iconSrc: require('@/assets/toolpanel/generic-intermediate-event.svg'),
-          label: this.$t('Intermediate Event'),
-          id: 'intermediateEvent',
-          items: [
-            {
-              iconSrc: require('@/assets/toolpanel/intermediate-timer-event.svg'),
-              label: this.$t('Intermediate Timer Event'),
-              id: 'intermediateTimerEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/intermediate-signal-catch-event.svg'),
-              label: this.$t('Intermediate Signal Catch Event'),
-              id: 'intermediateSignalCatchEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/intermediate-signal-throw-event.svg'),
-              label: this.$t('Intermediate Signal Throw Event'),
-              id: 'intermediateSignalThrowEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/intermediate-message-catch-event.svg'),
-              label: this.$t('Intermediate Message Catch Event'),
-              id: 'intermediateMessageCatchEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/intermediate-message-throw-event.svg'),
-              label: this.$t('Intermediate Message Throw Event'),
-              id: 'intermediateMessageThrowEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/intermediate-conditional-catch-event.svg'),
-              label: this.$t('Intermediate Conditional Catch Event'),
-              id: 'intermediateConditionalCatchEvent',
-            },
-          ],
-        },
-        {
-          iconSrc: require('@/assets/toolpanel/end-event.svg'),
-          label: this.$t('End Event'),
-          id: 'endEvent',
-          items: [
-            {
-              iconSrc: require('@/assets/toolpanel/end-event.svg'),
-              label: this.$t('End Event'),
-              id: 'genericEndEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/message-end-event.svg'),
-              label: this.$t('Message End Event'),
-              id: 'messageEndEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/end-event.svg'),
-              label: this.$t('Error End Event'),
-              id: 'errorEndEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/signal-end-event.svg'),
-              label: this.$t('Signal End Event'),
-              id: 'signalEndEvent',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/terminate-end-event.svg'),
-              label: this.$t('Terminate End Event'),
-              id: 'terminateEndEvent',
-            },
-          ],
-        },
-        {
-          iconSrc: require('@/assets/toolpanel/task.svg'),
-          label: this.$t('Form Task'),
-          id: 'task',
-          items: [
-            {
-              iconSrc: require('@/assets/toolpanel/task.svg'),
-              label: this.$t('Form Task'),
-              id: 'formTask',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/manual-task.svg'),
-              label: this.$t('Manual Task'),
-              id: 'manualTask',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/script-task.svg'),
-              label: this.$t('Script Task'),
-              id: 'script',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/task.svg'),
-              label: this.$t('Sub Process'),
-              id: 'subProcess',
-            },
-          ],
-        },
-        {
-          iconSrc: require('@/assets/toolpanel/generic-gateway.svg'),
-          label: this.$t('Gateway'),
-          id: 'gateway',
-          items: [
-            {
-              iconSrc: require('@/assets/toolpanel/exclusive-gateway.svg'),
-              label: this.$t('Exclusive Gateway'),
-              id: 'exclusiveGateway',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/inclusive-gateway.svg'),
-              label: this.$t('Inclusive Gateway'),
-              id: 'inclusiveGateway',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/parallel-gateway.svg'),
-              label: this.$t('Parallel Gateway'),
-              id: 'parallelGateway',
-            },
-            {
-              iconSrc: require('@/assets/toolpanel/generic-gateway.svg'),
-              label: this.$t('Event Based Gateway'),
-              id: 'eventBasedGateway',
-            },
-
-          ],
-        },
-
-        {
-          iconSrc: require('@/assets/toolpanel/pool.svg'),
-          label: this.$t('Pool'),
-          id: 'pool',
-        },
-      ],
-      plusIcon: require('@/assets/railBottom/plus-lg-light.svg'),
-    };
-  },
-});
-
-</script>
-
-<style lang="scss" scoped src="./controls.scss"></style>
diff --git a/src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue b/src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue
deleted file mode 100644
index 4868b852..00000000
--- a/src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <popper
-    trigger="clickToToggle"
-    :options="{
-      placement: 'top',
-      modifiers: { offset: { offset: '0,20px' } }
-    }"
-    :visible-arrow=false
-  >
-    <div v-if="data.items">
-      <ul class="control-submenu">
-        <li v-for="(item, key) in data.items" class="control-submenu-list"  :key="key">
-          <img :src=item.iconSrc :alt=item.label>
-          <div>
-            {{ item.label }}
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div slot="reference">
-      <div class="control-submenu-options">
-        <span />
-      </div>
-      <img
-        :src=data.iconSrc
-        :alt=data.label
-        :title="$t(data.label)"
-        v-b-tooltip.hover
-      >
-    </div>
-  </popper>
-</template>
-
-<script>
-import Popper from 'vue-popperjs';
-import 'vue-popperjs/dist/vue-popper.css';
-export default ({
-  props: {
-    data: { type: Object },
-  },
-  components: {
-    Popper,
-  },
-});
-
-</script>
-
-<style lang="scss" scoped>
-.control-submenu {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 10px;
-  width: 255px;
-  left: 616px;
-  background: #FFFFFF;
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  list-style: none;
-  &-list {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 12px 2px;
-    gap: 8px;
-    width: 235px;
-    height: 40px;
-    flex: none;
-    order: 0;
-    align-self: stretch;
-    flex-grow: 0;
-    &:hover {
-      background: #EBEEF2;
-    }
-
-    & > img {
-      width: 24px;
-      height: 24px;
-    }
-  }
-  &-options {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 3px;
-    transform: rotate(47.59deg);
-    cursor: pointer;
-
-    & > span {
-      display: block;
-      width: 4px;
-      height: 3px;
-      background-color: #44494e;
-      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-      clip-path: padding-box;
-    }
-
-  }
-}
-
-</style>
diff --git a/src/components/railBottom/controls/controls.scss b/src/components/railBottom/controls/controls.scss
deleted file mode 100644
index 51755211..00000000
--- a/src/components/railBottom/controls/controls.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.control {
-
-  &-list {
-    display: flex;
-    align-items: center;
-    margin: 0px;
-    padding: 4px;
-    background-color: #ffffff;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    list-style: none;
-  }
-
-  &-item {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 40px;
-    height: 40px;
-    margin-right: 12px;
-    border-radius: 4px;
-    cursor: pointer;
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    &:hover {
-      background: #ebeef2;
-    }
-
-
-    &-options {
-      position: absolute;
-      top: 0;
-      right: 0;
-      padding: 3px;
-      transform: rotate(47.59deg);
-      cursor: pointer;
-
-      & > span {
-        display: block;
-        width: 4px;
-        height: 3px;
-        background-color: #44494e;
-        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-        clip-path: padding-box;
-      }
-    }
-  }
-
-  &-add {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 24px;
-    height: 24px;
-    background-color: #00AD73;
-    border-radius: 2px;
-    font-size: 13px;
-    color: #ffffff;
-  }
-
-  & > img {
-    width: 24px;
-    height: 24px;
-  }
-}
diff --git a/src/components/railBottom/icons/MinusIcon.vue b/src/components/railBottom/icons/MinusIcon.vue
deleted file mode 100644
index 8f28ea54..00000000
--- a/src/components/railBottom/icons/MinusIcon.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 3">
-    <path d="M0.356934 1.62744C0.356934 1.07516 0.868608 0.627441 1.49979 0.627441H17.4998C18.131 0.627441 18.6427 1.07516 18.6427 1.62744C18.6427 2.17973 18.131 2.62744 17.4998 2.62744H1.49979C0.868608 2.62744 0.356934 2.17973 0.356934 1.62744Z" />
-  </svg>
-</template>
diff --git a/src/components/railBottom/icons/PlusIcon.vue b/src/components/railBottom/icons/PlusIcon.vue
deleted file mode 100644
index 7f3cbfe3..00000000
--- a/src/components/railBottom/icons/PlusIcon.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <svg viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.00021 0.770294C7.4736 0.770294 7.85735 1.15405 7.85735 1.62744V6.77029H13.0002C13.4736 6.77029 13.8574 7.15405 13.8574 7.62744C13.8574 8.10082 13.4736 8.48458 13.0002 8.48458H7.85735V13.6274C7.85735 14.1008 7.4736 14.4846 7.00021 14.4846C6.52682 14.4846 6.14307 14.1008 6.14307 13.6274V8.48458H1.00021C0.526822 8.48458 0.143066 8.10082 0.143066 7.62744C0.143066 7.15405 0.526822 6.77029 1.00021 6.77029H6.14307V1.62744C6.14307 1.15405 6.52682 0.770294 7.00021 0.770294Z" />
-  </svg>
-</template>
diff --git a/src/components/railBottom/icons/index.js b/src/components/railBottom/icons/index.js
deleted file mode 100644
index 9f5a6ed7..00000000
--- a/src/components/railBottom/icons/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as MinusIcon } from './MinusIcon.vue';
-export { default as PlusIcon } from './PlusIcon.vue';
diff --git a/src/components/railBottom/miniPaperControl/MiniPaperControl.vue b/src/components/railBottom/miniPaperControl/MiniPaperControl.vue
deleted file mode 100644
index 95265d41..00000000
--- a/src/components/railBottom/miniPaperControl/MiniPaperControl.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div class="mini-paper-box">
-    <button type="button" class="mini-paper-button">
-      <img :src="mapIcon" alt="Mini Paper" >
-    </button>
-  </div>
-</template>
-
-<script>
-
-export default ({
-  data() {
-    return {
-      mapIcon: require('@/assets/railBottom/mini-map.svg'),
-    };
-  },
-});
-
-</script>
-
-<style lang="scss" scoped src="./miniPaperControl.scss"></style>
diff --git a/src/components/railBottom/miniPaperControl/miniPaperControl.scss b/src/components/railBottom/miniPaperControl/miniPaperControl.scss
deleted file mode 100644
index 64d64be6..00000000
--- a/src/components/railBottom/miniPaperControl/miniPaperControl.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.mini-paper {
-  &-box {
-    display: flex;
-    margin-right: 14px;
-    background-color: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    overflow: auto;
-  }
-
-  &-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 48px;
-    padding: 16px 14px;
-    background-color: transparent;
-    border: 0 none;
-    color: #333344;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #DEEEFA;
-    }
-  }
-
-}
diff --git a/src/components/railBottom/railBottom.scss b/src/components/railBottom/railBottom.scss
deleted file mode 100644
index 767d4148..00000000
--- a/src/components/railBottom/railBottom.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.rail {
-  &-container {
-    position: relative;
-    bottom: 126px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 48px;
-    max-height: 48px;
-    z-index: 2;
-  }
-
-  &-left {
-    position: absolute;
-    display: flex;
-    width: auto;
-    padding: 0 35px;
-  }
-
-  &-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    column-gap: 22px;
-    width: 100%;
-  }
-}
diff --git a/src/components/railBottom/undoRedoControl/UndoRedoControl.vue b/src/components/railBottom/undoRedoControl/UndoRedoControl.vue
deleted file mode 100644
index 30090914..00000000
--- a/src/components/railBottom/undoRedoControl/UndoRedoControl.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="ur-box">
-    <button type="button"
-      class="ur-button"
-      data-test="undo"
-      v-b-tooltip.hover
-      :title="$t('Undo')"
-    >
-      <img :src="undoIcon" :alt="$t('Undo')" >
-    </button>
-
-    <div class="ur-divider" />
-
-    <button type="button"
-      class="ur-button"
-      data-test="redo"
-      v-b-tooltip.hover
-      :title="$t('Redo')"
-    >
-      <img :src="redoIcon" :alt="$t('Redo')" >
-    </button>
-  </div>
-</template>
-
-<script>
-
-export default ({
-  data() {
-    return {
-      undoIcon: require('@/assets/railBottom/undo.svg'),
-      redoIcon: require('@/assets/railBottom/redo.svg'),
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped src="./undoRedoControl.scss"></style>
diff --git a/src/components/railBottom/undoRedoControl/undoRedoControl.scss b/src/components/railBottom/undoRedoControl/undoRedoControl.scss
deleted file mode 100644
index d4608585..00000000
--- a/src/components/railBottom/undoRedoControl/undoRedoControl.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.ur {
-  &-box {
-    display: flex;
-    align-items: center;
-    background-color: #FFFFFF;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-  }
-
-  &-button {
-    justify-content: center;
-    display: flex;
-    align-items: center;
-    padding: 16px;
-    background-color: #ffffff;
-    border: 0 none;
-    border-radius: 4px;
-    color: #333344;
-    cursor: pointer;
-    outline: none;
-
-    &:disabled {
-      background-color: #ffffff;
-      color: #7e7e92;
-      cursor: default;
-    }
-  }
-
-  &-divider {
-    width: 1px;
-    height: 28px;
-    border-right: thin solid #B6BFC6;
-  }
-}
diff --git a/src/components/railBottom/zoomControl/ZoomControl.vue b/src/components/railBottom/zoomControl/ZoomControl.vue
deleted file mode 100644
index 847948dc..00000000
--- a/src/components/railBottom/zoomControl/ZoomControl.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div class="zoom-box">
-    <button
-      type="button"
-      class="zoom-button"
-      data-test="zoom-out"
-      @click="onClickZoomOut"
-      v-b-tooltip.hover
-      :title="$t('Zoom Out')"
-    >
-      <MinusIcon />
-    </button>
-
-    <div v-if="paperManager" class="zoom-text">
-      {{ Math.round(paperManager.scale.sx*100) }}%
-    </div>
-
-    <button
-      type="button"
-      class="zoom-button"
-      data-test="zoom-in"
-      @click="onClickZoomIn"
-      v-b-tooltip.hover
-      :title="$t('Zoom In')"
-    >
-      <PlusIcon />
-    </button>
-  </div>
-</template>
-
-<script>
-import { MinusIcon, PlusIcon } from '@/components/railBottom/icons';
-
-export default ({
-  components: {
-    MinusIcon,
-    PlusIcon,
-  },
-  props: {
-    paperManager: Object,
-  },
-  data() {
-    return {
-      initialScale: 1,
-      minimumScale: 0.2,
-      scaleStep: 0.1,
-    };
-  },
-  methods: {
-    onClickZoomOut() {
-      this.paperManager.scale = Math.max(
-        this.minimumScale, 
-        this.paperManager.scale.sx -= this.scaleStep
-      );
-    },
-    onClickZoomIn() {
-      this.paperManager.scale = this.paperManager.scale.sx + this.scaleStep;
-    },
-  },
-});
-
-</script>
-
-<style lang="scss" scoped src="./zoomControl.scss"></style>
diff --git a/src/components/railBottom/zoomControl/zoomControl.scss b/src/components/railBottom/zoomControl/zoomControl.scss
deleted file mode 100644
index aa8a4105..00000000
--- a/src/components/railBottom/zoomControl/zoomControl.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.zoom {
-  &-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 48px;
-    padding: 6px 4px;
-    background-color: #FFFFFF;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-  }
-
-  &-button,
-  &-text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 40px;
-    height: 40px;
-    padding: 12px;
-    border: 0 none;
-    border-radius: 4px;
-    background-color: #ffffff;
-    color: #333344;
-    cursor: pointer;
-    outline: none;
-    user-select: none;
-
-    &:first-child {
-      margin-right: 4px;
-    }
-
-    &:last-child {
-      margin-left: 4px;
-    }
-
-    & > svg {
-      fill: #333344;
-    }
-  }
-
-  &-button:hover {
-    background-color: #ebeef2;
-  }
-
-  &-button:active {
-    background-color: #DEEBFF;
-
-    & > svg {
-      fill: #1264AA;
-    }
-  }
-
-  &-text {
-    height: 28px;
-    margin-right: 0;
-    padding: {
-      left: 30px;
-      right: 30px;
-    };
-    border: {
-      left: thin solid #B6BFC6;
-      right: thin solid #B6BFC6;
-    };
-    border-radius: 0;
-    font-size: 14px;
-    font-weight: 700;
-    user-select: none;
-  }
-}
diff --git a/src/components/rails/explorer-rail/explorer-rail.scss b/src/components/rails/explorer-rail/explorer-rail.scss
index b56432ef..b436e0aa 100644
--- a/src/components/rails/explorer-rail/explorer-rail.scss
+++ b/src/components/rails/explorer-rail/explorer-rail.scss
@@ -47,19 +47,4 @@ $secondary-color-nav: #6c757d;
 			color: #000;
 		}
 	}
-
-	&__item {
-		display: flex;
-		margin-bottom: 1rem;
-		align-items: center;
-		img {
-			height: 1.5rem;
-			width: 1.5rem;
-		}
-		span {
-			margin-left: 0.8rem;
-			font-size: 13px;
-			line-height: 19px;
-		}
-	}
 }
diff --git a/src/components/rails/explorer-rail/explorer.vue b/src/components/rails/explorer-rail/explorer.vue
index 64c0372d..8fa2ce61 100644
--- a/src/components/rails/explorer-rail/explorer.vue
+++ b/src/components/rails/explorer-rail/explorer.vue
@@ -2,6 +2,8 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import nodeTypesStore from '@/nodeTypesStore';
+import FilterNodeTypes from '@/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue';
+import NodeTypesLoop from '@/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue';
 
 export default {
   name: 'ExplorerRail',
@@ -12,6 +14,8 @@ export default {
   },
   components: {
     FontAwesomeIcon,
+    FilterNodeTypes,
+    NodeTypesLoop,
   },
   data() {
     return {
@@ -34,6 +38,9 @@ export default {
     pinnedObjects() {
       return nodeTypesStore.getters.getPinnedNodeTypes;
     },
+    filteredNodes() {
+      return nodeTypesStore.getters.getFilteredNodeTypes;
+    },
   },
   created() {
     nodeTypesStore.commit('setNodeTypes', this.nodeTypes);
@@ -70,23 +77,19 @@ export default {
       </div>
     </div>
     <div class="node-types__container" v-if="tabIndex === 0">
-      <template v-if="pinnedObjects.length > 0">
-        <p>{{ $t('Pinned Objects') }}</p>
-        <template v-for="pinnedObject in pinnedObjects">
-          <div class="node-types__item" :key="pinnedObject.id">
-            <img :src="pinnedObject.icon" :alt="$t(pinnedObject.label)">
-            <span>{{ $t(pinnedObject.label) }}</span>
-          </div>
-        </template>
+      <filter-node-types />
+      <template v-if="filteredNodes.length > 0">
+        <node-types-loop :nodeTypes="filteredNodes" />
       </template>
-      <template v-if="objects.length > 0">
-        <p>{{ $t('Object Category') }}</p>
-        <template v-for="object in objects">
-          <div class="node-types__item" :key="object.id">
-            <img :src="object.icon" :alt="$t(object.label)">
-            <span>{{ $t(object.label) }}</span>
-          </div>
-        </template>
+      <template v-else>
+        <node-types-loop  v-if="pinnedObjects.length > 0" 
+          label="Pinned Objects"
+          :nodeTypes="pinnedObjects"
+        />
+        <node-types-loop v-if="objects.length > 0"
+          label="Object Category"
+          :nodeTypes="objects"
+        />
       </template>
     </div>
     <div class="pm-blocks__container">
diff --git a/src/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue b/src/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue
new file mode 100644
index 00000000..e3b478df
--- /dev/null
+++ b/src/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue
@@ -0,0 +1,54 @@
+<script>
+import nodeTypesStore from '@/nodeTypesStore';
+export default {
+  name: 'FilterNodeTypes',
+  data() {
+    return {
+      searchTerm: '',
+      placeholder: this.$t('Seach Objects'),
+    };
+  },
+  watch: {
+    searchTerm(value) {
+      if (value.length === 0) nodeTypesStore.commit('clearFilteredNodes');
+      if (value.length > 0) nodeTypesStore.commit('setFilteredNodeTypes', value);
+    },
+  },
+  computed: {
+    nodeTypes() {
+      const pinnedNodeTypes = nodeTypesStore.getters.getPinnedNodeTypes;
+      const nodeTypes = nodeTypesStore.getters.getNodeTypes;
+      return [...pinnedNodeTypes, ...nodeTypes];
+    },
+  },
+};
+</script>
+
+<template>
+  <div id="searchNodeTypes">
+    <label class="position-relative d-block">
+      <i class="fas fa-search position-absolute h-100 text-muted ml-2" />
+      <b-input :placeholder="placeholder" v-model="searchTerm" />
+    </label>
+  </div>
+
+</template>
+
+<style lang="scss" scoped>
+#searchNodeTypes {
+  i {
+    top: 27%;
+  }
+  input {
+    border: 1px solid #5F666D;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    font-size: 14px;
+    line-height: 21px;
+    padding-left: 30px;
+    &::placeholder {
+      color: #929FAC;
+    }
+  }
+}
+</style>
diff --git a/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue b/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue
new file mode 100644
index 00000000..c5289e65
--- /dev/null
+++ b/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue
@@ -0,0 +1,44 @@
+<script>
+export default {
+  name: 'NodeTypesLoop',
+  props: {
+    label: {
+      type: String,
+    },
+    nodeTypes: {
+      type: Array,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <p>{{ $t(label) }}</p>
+    <template v-for="nodeType in nodeTypes">
+      <div class="node-types__item" :key="nodeType.id">
+        <img :src="nodeType.icon" :alt="$t(nodeType.label)">
+        <span>{{ $t(nodeType.label) }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss">
+.node-types {
+  &__item {
+    display: flex;
+    margin-bottom: 1rem;
+    align-items: center;
+    img {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+    span {
+      margin-left: 0.8rem;
+      font-size: 13px;
+      line-height: 19px;
+    }
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index da62ab47..0f1ced08 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,17 +12,11 @@ import ScreenBuilder from '@processmaker/screen-builder';
 import Multiselect from '@processmaker/vue-multiselect/src/Multiselect';
 
 import '@fortawesome/fontawesome-free/css/all.min.css';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faBoundaryEvent } from '@/components/crown/crownButtons/icons';
-
-library.add(faBoundaryEvent);
 
 Vue.use(BootstrapVue);
 Vue.use(VueDeepSet);
 Vue.use(VueI18Next);
 Vue.use(ScreenBuilder);
-Vue.component('font-awesome-icon', FontAwesomeIcon);
 Vue.component('Multiselect', Multiselect);
 
 Vue.config.productionTip = false;
diff --git a/src/mixins/linkConfig.js b/src/mixins/linkConfig.js
index 1c3a7446..1c979c51 100644
--- a/src/mixins/linkConfig.js
+++ b/src/mixins/linkConfig.js
@@ -118,23 +118,14 @@ export default {
       const targetShape = this.shape.getTargetElement();
       resetShapeColor(targetShape);
 
-      this.shape.on('change:vertices', this.onChangeVertices);
+      this.shape.listenTo(this.sourceShape, 'change:position', this.updateWaypoints);
+      this.shape.listenTo(targetShape, 'change:position', this.updateWaypoints);
+      this.shape.on('change:vertices change:source change:target', this.updateWaypoints);
 
       const sourceShape = this.shape.getSourceElement();
       sourceShape.embed(this.shape);
       this.$emit('set-shape-stacking', sourceShape);
     },
-    /**
-     * On Change vertices handler
-     * @param {Object} link 
-     * @param {Array} vertices 
-     * @param {Object} options 
-     */
-    onChangeVertices(link, vertices, options){
-      if (options && options.ui) {
-        this.updateWaypoints();
-      }
-    },
     updateWaypoints() {
       const linkView = this.shape.findView(this.paper);
       const start = linkView.sourceAnchor;
diff --git a/src/nodeTypesStore.js b/src/nodeTypesStore.js
index 5ce86293..a98d026d 100644
--- a/src/nodeTypesStore.js
+++ b/src/nodeTypesStore.js
@@ -8,10 +8,12 @@ export default new Vuex.Store({
   state: {
     nodeTypes: [],
     pinnedNodeTypes: [],
+    filteredNodeTypes: [],
   },
   getters: {
     getNodeTypes: state => state.nodeTypes,
     getPinnedNodeTypes: state => state.pinnedNodeTypes,
+    getFilteredNodeTypes: state => state.filteredNodeTypes,
   },
   mutations: {
     setNodeTypes(state, nodeTypes) {
@@ -29,6 +31,17 @@ export default new Vuex.Store({
     setPinnedNodes(state, payload) {
       state.pinnedNodeTypes = payload;
     },
+    setFilteredNodeTypes(state, searchTerm) {
+      const pinnedNodeTypes = state.pinnedNodeTypes;
+      const nodeTypes = state.nodeTypes;
+      const allNodes = [...pinnedNodeTypes, ...nodeTypes];
+      state.filteredNodeTypes = allNodes.filter(node => {
+        return node.label.toLowerCase().includes(searchTerm.toLowerCase());
+      });
+    },
+    clearFilteredNodes(state) {
+      state.filteredNodeTypes.length = 0;
+    },
   },
   actions: {
     // eslint-disable-next-line no-unused-vars
diff --git a/src/store.js b/src/store.js
index 4e432c90..deb48a5d 100644
--- a/src/store.js
+++ b/src/store.js
@@ -40,7 +40,6 @@ export default new Vuex.Store({
   },
   getters: {
     nodes: state => state.nodes,
-    paper: state => state.paper,
     highlightedNodes: state => state.highlightedNodes,
     nodeShape: state => node => {
       return state.graph.getCells().find(cell => cell.component && cell.component.node === node);


Test patch:
diff --git a/tests/e2e/specs/bottomControlsRail/VerifyNewControlRailLayout.spec.js b/tests/e2e/specs/bottomControlsRail/VerifyNewControlRailLayout.spec.js
deleted file mode 100644
index cccd8279..00000000
--- a/tests/e2e/specs/bottomControlsRail/VerifyNewControlRailLayout.spec.js
+++ /dev/null
@@ -1,39 +0,0 @@
-
-describe('Bottom Controls layout', () => {
-  it('Verify if bottom rail is well formed', () => {
-    cy.get('[data-cy="rail-bottom"]').should(($div) => {
-      expect($div).to.have.length(1);
-      const className = $div[0].className;
-      
-      expect(className).to.match(/rail-container/);
-      const children = $div[0].children;
-      expect(children).to.have.length(2);
-      const firstChildClassName = children[0].className;
-      expect(firstChildClassName).to.match(/rail-left/);
-      const secondChildClassName = children[1].className;
-      expect(secondChildClassName).to.match(/rail-center/);
-    });
-  });
-  it('Verify if left bottom rail is well formed', () => {
-    cy.get('[data-cy="rail-bottom"] [class="rail-left"]').should(($div) => {
-      expect($div).to.have.length(1);
-      const children = $div[0].children;
-      expect(children).to.have.length(2);
-      const firstChildClassName = children[0].className;
-      expect(firstChildClassName).to.match(/mini-paper-box/);
-      const secondChildClassName = children[1].className;
-      expect(secondChildClassName).to.match(/zoom-box/);
-    });
-  });
-  it('Verify if center bottom rail is well formed', () => {
-    cy.get('[data-cy="rail-bottom"] [class="rail-center"]').should(($div) => {
-      expect($div).to.have.length(1);
-      const children = $div[0].children;
-      expect(children).to.have.length(2);
-      const firstChildClassName = children[0].className;
-      expect(firstChildClassName).to.match(/ur-box/);
-      const secondChildClassName = children[1].className;
-      expect(secondChildClassName).to.match(/control-list/);
-    });
-  });
-});
\ No newline at end of file
diff --git a/tests/unit/rails/__snapshots__/explorer.spec.js.snap b/tests/unit/rails/__snapshots__/explorer.spec.js.snap
index 5045a0bc..b55cf7a0 100644
--- a/tests/unit/rails/__snapshots__/explorer.spec.js.snap
+++ b/tests/unit/rails/__snapshots__/explorer.spec.js.snap
@@ -34,6 +34,8 @@ exports[`Explorer Rail should render the component 1`] = `
   <div
     class="node-types__container"
   >
+    <filter-node-types-stub />
+     
     <!---->
      
     <!---->