Repository: ProcessMaker/modeler
Pull request #1564 (2023-05-26 15:47:10)

Summer 2023
ci:deploy


Patch:
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..068f5a68
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,12 @@
+{
+  "include": [
+    "./src/**/*.js",
+    "./src/**/*.vue"
+  ],
+  "compilerOptions": {
+      "baseUrl": ".",
+      "paths": {
+          "@/*": ["src/*"]
+      }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 53b06be8..82100404 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.30.2",
+  "version": "1.30.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@processmaker/modeler",
-      "version": "1.30.2",
+      "version": "1.30.1",
       "dependencies": {
         "@babel/plugin-proposal-private-methods": "^7.12.1",
         "@fortawesome/fontawesome-free": "^5.11.2",
@@ -36,7 +36,9 @@
         "tinycolor2": "^1.4.2",
         "vue": "^2.6.12",
         "vue-deepset": "^0.6.3",
+        "vue-inline-svg": "^2.1.3",
         "vue-monaco": "^1.2.1",
+        "vue-popperjs": "^2.3.0",
         "vue-upload-component": "^2.8.20",
         "vuex": "^3.5.1"
       },
@@ -19522,7 +19524,6 @@
       "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"
       }
@@ -26571,6 +26572,11 @@
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
     },
+    "node_modules/vue-inline-svg": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/vue-inline-svg/-/vue-inline-svg-2.1.3.tgz",
+      "integrity": "sha512-rLuN4NBsCkUVhEUB5L9i3aMxZ4XuBHMZk6Ga5EXtN6S415QedKN9SrcXR7Wbntyh53JtC1QaTlcDSvIjD7cRpw=="
+    },
     "node_modules/vue-jest": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.7.tgz",
@@ -26826,6 +26832,16 @@
         "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",
@@ -43529,8 +43545,7 @@
     "opencollective-postinstall": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
-      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
-      "dev": true
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
     },
     "opener": {
       "version": "1.5.2",
@@ -49050,6 +49065,11 @@
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
     },
+    "vue-inline-svg": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/vue-inline-svg/-/vue-inline-svg-2.1.3.tgz",
+      "integrity": "sha512-rLuN4NBsCkUVhEUB5L9i3aMxZ4XuBHMZk6Ga5EXtN6S415QedKN9SrcXR7Wbntyh53JtC1QaTlcDSvIjD7cRpw=="
+    },
     "vue-jest": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.7.tgz",
@@ -49240,6 +49260,15 @@
         "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",
diff --git a/package.json b/package.json
index 8676730f..83212f4a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.30.2",
+  "version": "1.30.1",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",
@@ -64,7 +64,9 @@
     "tinycolor2": "^1.4.2",
     "vue": "^2.6.12",
     "vue-deepset": "^0.6.3",
+    "vue-inline-svg": "^2.1.3",
     "vue-monaco": "^1.2.1",
+    "vue-popperjs": "^2.3.0",
     "vue-upload-component": "^2.8.20",
     "vuex": "^3.5.1"
   },
@@ -159,4 +161,4 @@
     "npm": ">=8",
     "node": ">=16 <18"
   }
-}
+}
\ No newline at end of file
diff --git a/src/ModelerApp.vue b/src/ModelerApp.vue
index 0b2fc543..9458d7ef 100644
--- a/src/ModelerApp.vue
+++ b/src/ModelerApp.vue
@@ -1,29 +1,31 @@
 <template>
-  <b-container id="modeler-app" class="h-100 container position-relative p-0">
+  <b-container fluid id="modeler-app" class="h-100 position-relative p-0">
 
     <b-card no-body class="h-100 rounded-0">
-      <b-card-header class="d-flex align-items-center header">
-        <b-card-text class="m-0 font-weight-bolder">
-          {{ $t('ProcessMaker Modeler') }}
-        </b-card-text>
+      <!--   TODO Remove me when the time comes   -->
+      <!--      <b-card-header class="d-flex align-items-center header">-->
+      <!--        <b-card-text class="m-0 font-weight-bolder">-->
+      <!--          {{ $t('ProcessMaker Modeler') }}-->
+      <!--        </b-card-text>-->
 
-        <div class="ml-auto">
-          <b-btn variant="secondary" size="sm" v-b-modal="'uploadmodal'" class="mr-2">
-            <i class="fas fa-upload mr-1"/>
-            {{ $t('Upload XML') }}
-          </b-btn>
-        </div>
-      </b-card-header>
+      <!--        <div class="ml-auto">-->
+      <!--          <b-btn variant="secondary" size="sm" v-b-modal="'uploadmodal'" class="mr-2">-->
+      <!--            <i class="fas fa-upload mr-1"/>-->
+      <!--            {{ $t('Upload XML') }}-->
+      <!--          </b-btn>-->
+      <!--        </div>-->
+      <!--      </b-card-header>-->
       <b-card-body class="overflow-hidden position-relative p-0 vh-100">
         <modeler ref="modeler" @set-xml-manager="xmlManager = $event" @validate="validationErrors = $event" @warnings="warnings = $event" :decorations="decorations" />
       </b-card-body>
-      <validation-status ref="validationStatus"
-        :validation-errors="validationErrors"
-        :warnings="warnings"
-        :xml-manager="xmlManager"
-      >
-        <component v-for="(component, index) in validationBar" :key="index" :is="component" />
-      </validation-status>
+      <!--   TODO remove me when the time comes   -->
+      <!--      <validation-status ref="validationStatus"-->
+      <!--        :validation-errors="validationErrors"-->
+      <!--        :warnings="warnings"-->
+      <!--        :xml-manager="xmlManager"-->
+      <!--      >-->
+      <!--        <component v-for="(component, index) in validationBar" :key="index" :is="component" />-->
+      <!--      </validation-status>-->
     </b-card>
 
     <b-modal
@@ -50,7 +52,6 @@
 <script>
 import Modeler from './components/modeler/Modeler.vue';
 import FileUpload from 'vue-upload-component';
-import ValidationStatus from '@/components/validationStatus/ValidationStatus';
 import undoRedoStore from '@/undoRedoStore';
 
 const reader = new FileReader();
@@ -60,7 +61,6 @@ export default {
   components: {
     Modeler,
     FileUpload,
-    ValidationStatus,
   },
   data() {
     return {
diff --git a/src/assets/boundary-event.svg b/src/assets/boundary-event.svg
index 9532dd8e..0211dedc 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="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>
+<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
diff --git a/src/assets/clipboard.svg b/src/assets/clipboard.svg
index 6607bc5b..29ef6527 100644
--- a/src/assets/clipboard.svg
+++ b/src/assets/clipboard.svg
@@ -1,1 +1,3 @@
-<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
+<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
diff --git a/src/assets/cog-solid.svg b/src/assets/cog-solid.svg
new file mode 100644
index 00000000..4d793311
--- /dev/null
+++ b/src/assets/cog-solid.svg
@@ -0,0 +1,1 @@
+<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 f9d1dc68..505ebc16 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="#fff" fill-rule="nonzero"></path>
+                  id="connect-elements" fill="#44494E" 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="#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>
+                  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>
         </g>
     </g>
 </svg>
diff --git a/src/assets/connect-elements.svg b/src/assets/connect-elements.svg
index 4b0c0eaa..79131dcf 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" 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"
+    <g id="Symbols" >
+        <g id="custom/connect-elements" transform="translate(-3.000000, -2.000000)">
+            <path
                   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 d650718e..c2dd2539 100644
--- a/src/assets/copy-regular.svg
+++ b/src/assets/copy-regular.svg
@@ -1,1 +1,3 @@
-<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
+<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
diff --git a/src/assets/default-flow.svg b/src/assets/default-flow.svg
index da950ef7..29ae6574 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="#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" />
+		<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" />
 	</g>
 </svg>
diff --git a/src/assets/lane-below.svg b/src/assets/lane-below.svg
index 795e8e07..9f71c91a 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="#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>
+        <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>
         <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="#FFFFFF"></path>
+              fill="#000000"></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="#FFFFFF"></path>
+              fill="#000000"></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="#FFFFFF"></path>
+              fill="#000000"></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="#FFFFFF"></path>
+              fill="#000000"></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="#FFFFFF"></path>
+              fill="#000000"></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="#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>
+              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>
         <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="#FFFFFF"></path>
+              fill="#000000"></path>
     </g>
 </svg>
diff --git a/src/assets/palette.svg b/src/assets/palette.svg
new file mode 100644
index 00000000..5ec9bc46
--- /dev/null
+++ b/src/assets/palette.svg
@@ -0,0 +1,1 @@
+<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/pin-angle-fill.svg b/src/assets/pin-angle-fill.svg
new file mode 100644
index 00000000..b10a2091
--- /dev/null
+++ b/src/assets/pin-angle-fill.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3284 0.721802C10.461 0.721802 10.5881 0.77448 10.6819 0.868248L15.6317 5.818C15.8269 6.01326 15.8269 6.32984 15.6317 6.5251C15.1513 7.0055 14.5597 7.11349 14.1291 7.11349C13.9517 7.11349 13.7936 7.09548 13.6683 7.07423L10.5348 10.2078C10.5417 10.2357 10.5488 10.2652 10.5559 10.2962C10.6098 10.5298 10.6703 10.8554 10.6947 11.2206C10.7415 11.9231 10.663 12.908 9.97481 13.5962C9.77955 13.7914 9.46296 13.7914 9.2677 13.5962L6.43928 10.7677L3.2573 13.9497C3.06203 14.145 2.03835 14.8521 1.84308 14.6568C1.64782 14.4616 2.35493 13.4379 2.55019 13.2426L5.73217 10.0606L2.90374 7.23221C2.70848 7.03695 2.70848 6.72036 2.90374 6.5251C3.59191 5.83693 4.57677 5.7584 5.27929 5.80524C5.64448 5.82959 5.97016 5.8901 6.20368 5.94399C6.23473 5.95116 6.26426 5.95823 6.29215 5.96512L9.42568 2.83159C9.40444 2.70635 9.38642 2.54824 9.38642 2.37085C9.38642 1.94022 9.49442 1.34864 9.97481 0.868248C10.0686 0.77448 10.1958 0.721802 10.3284 0.721802Z" fill="#5F666D"/>
+</svg>
diff --git a/src/assets/pin-angle.svg b/src/assets/pin-angle.svg
new file mode 100644
index 00000000..1c3bd97a
--- /dev/null
+++ b/src/assets/pin-angle.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3284 0.721802C10.461 0.721802 10.5881 0.77448 10.6819 0.868248L15.6317 5.818C15.8269 6.01326 15.8269 6.32984 15.6317 6.5251C15.1513 7.0055 14.5597 7.11349 14.1291 7.11349C13.9517 7.11349 13.7936 7.09548 13.6683 7.07423L10.5348 10.2078C10.5417 10.2357 10.5488 10.2652 10.5559 10.2962C10.6098 10.5298 10.6703 10.8554 10.6947 11.2206C10.7415 11.9231 10.663 12.908 9.97481 13.5962C9.77955 13.7914 9.46296 13.7914 9.2677 13.5962L6.43928 10.7677L3.2573 13.9497C3.06203 14.145 2.03835 14.8521 1.84308 14.6568C1.64782 14.4616 2.35493 13.4379 2.55019 13.2426L5.73217 10.0606L2.90374 7.23221C2.70848 7.03695 2.70848 6.72036 2.90374 6.5251C3.59191 5.83693 4.57677 5.7584 5.27929 5.80524C5.64448 5.82959 5.97016 5.8901 6.20368 5.94399C6.23473 5.95116 6.26426 5.95823 6.29215 5.96512L9.42568 2.83159C9.40444 2.70635 9.38642 2.54824 9.38642 2.37085C9.38642 1.94022 9.49442 1.34864 9.97481 0.868248C10.0686 0.77448 10.1958 0.721802 10.3284 0.721802ZM10.45 2.83413L10.4493 2.83181L10.45 2.83413ZM10.4493 2.83181L10.45 2.83413C10.5086 3.01308 10.4616 3.20988 10.3284 3.34312L6.79283 6.87866C6.65903 7.01245 6.46118 7.05925 6.28164 6.9996L6.27962 6.99895L6.2665 6.9948C6.25402 6.99091 6.23426 6.9849 6.20796 6.97734C6.1553 6.96221 6.0769 6.94102 5.97882 6.91839C5.78144 6.87284 5.5105 6.82287 5.21277 6.80302C4.791 6.77491 4.37709 6.8108 4.03811 6.95237L9.54755 12.4618C9.68911 12.1228 9.72501 11.7089 9.69689 11.2871C9.67704 10.9894 9.62707 10.7185 9.58153 10.5211C9.55889 10.423 9.5377 10.3446 9.52257 10.2919C9.51501 10.2657 9.509 10.2459 9.50511 10.2334L9.50096 10.2203L9.50047 10.2188C9.44071 10.0392 9.4874 9.84094 9.62126 9.70708L13.1568 6.17155C13.2905 6.03781 13.4883 5.99099 13.6678 6.05053C13.6713 6.05161 13.6786 6.05373 13.6889 6.05653C13.7094 6.06214 13.7424 6.07045 13.7852 6.07901C13.8717 6.09631 13.9927 6.11349 14.1291 6.11349C14.2426 6.11349 14.3588 6.1019 14.472 6.07253L10.4274 2.02792C10.398 2.14114 10.3864 2.25733 10.3864 2.37085C10.3864 2.50717 10.4036 2.6282 10.4209 2.71473C10.4295 2.7575 10.4378 2.79047 10.4434 2.81105C10.4462 2.82131 10.4482 2.82828 10.4493 2.83181Z" fill="#5F666D"/>
+</svg>
diff --git a/src/assets/railBottom/mini-map.svg b/src/assets/railBottom/mini-map.svg
new file mode 100644
index 00000000..27d46cfd
--- /dev/null
+++ b/src/assets/railBottom/mini-map.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 17 17" 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" />
+</svg>
diff --git a/src/assets/railBottom/minus.svg b/src/assets/railBottom/minus.svg
new file mode 100644
index 00000000..59d10459
--- /dev/null
+++ b/src/assets/railBottom/minus.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="4" viewBox="0 0 19 4" xmlns="http://www.w3.org/2000/svg">
+    <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>
diff --git a/src/assets/railBottom/plus.svg b/src/assets/railBottom/plus.svg
new file mode 100644
index 00000000..44f8b073
--- /dev/null
+++ b/src/assets/railBottom/plus.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="15" 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>
diff --git a/src/assets/railBottom/redo.svg b/src/assets/railBottom/redo.svg
new file mode 100644
index 00000000..5a2a209b
--- /dev/null
+++ b/src/assets/railBottom/redo.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="15" viewBox="0 0 12 15" 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.29088 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" />
+    <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" />
+</svg>
diff --git a/src/assets/railBottom/undo.svg b/src/assets/railBottom/undo.svg
new file mode 100644
index 00000000..c449a211
--- /dev/null
+++ b/src/assets/railBottom/undo.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="15" viewBox="0 0 12 15" 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" />
+    <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" />
+</svg>
diff --git a/src/assets/scss/settings/_settings.variables.scss b/src/assets/scss/settings/_settings.variables.scss
index c131cbd5..6ca4a721 100644
--- a/src/assets/scss/settings/_settings.variables.scss
+++ b/src/assets/scss/settings/_settings.variables.scss
@@ -2,7 +2,12 @@
 $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 e063591e..111f472d 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-color;
+  background-color: $primary-white;
   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
new file mode 100644
index 00000000..b277a0b4
--- /dev/null
+++ b/src/assets/toolpanel/conditional-start-event.svg
@@ -0,0 +1,4 @@
+<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="M13.5833 9.45312V6H6.8125C6.36224 6 6 6.27168 6 6.60938V18.3906C6 18.7283 6.36224 19 6.8125 19H18.1875C18.6378 19 19 18.7283 19 18.3906V10.0625H14.3958C13.949 10.0625 13.5833 9.78828 13.5833 9.45312ZM15.75 15.4453C15.75 15.6129 15.5672 15.75 15.3438 15.75H9.65625C9.43281 15.75 9.25 15.6129 9.25 15.4453V15.2422C9.25 15.0746 9.43281 14.9375 9.65625 14.9375H15.3438C15.5672 14.9375 15.75 15.0746 15.75 15.2422V15.4453ZM15.75 13.8203C15.75 13.9879 15.5672 14.125 15.3438 14.125H9.65625C9.43281 14.125 9.25 13.9879 9.25 13.8203V13.6172C9.25 13.4496 9.43281 13.3125 9.65625 13.3125H15.3438C15.5672 13.3125 15.75 13.4496 15.75 13.6172V13.8203ZM15.75 11.9922V12.1953C15.75 12.3629 15.5672 12.5 15.3438 12.5H9.65625C9.43281 12.5 9.25 12.3629 9.25 12.1953V11.9922C9.25 11.8246 9.43281 11.6875 9.65625 11.6875H15.3438C15.5672 11.6875 15.75 11.8246 15.75 11.9922ZM19 9.09512V9.25H14.6667V6H14.8732C15.0898 6 15.2964 6.06348 15.4487 6.17773L18.763 8.66602C18.9154 8.78027 19 8.93516 19 9.09512Z" fill="#00875A"/>
+</svg>
diff --git a/src/assets/toolpanel/data-object.svg b/src/assets/toolpanel/data-object.svg
index 024a2f93..db120240 100644
--- a/src/assets/toolpanel/data-object.svg
+++ b/src/assets/toolpanel/data-object.svg
@@ -1,9 +1,3 @@
-<svg width="36" height="50" viewBox="0 0 36 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-            d="M1,1 L25,1 L35,10 L35,49 L1,49 L1,1 M24,1 L24,10 L35,10"
-            stroke="#788793"
-            stroke-width="1.5"
-            stroke-linejoin="round"
-            stroke-linecap="round"
-    />
+<svg width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11 0.313721H3C1.89543 0.313721 1 1.20915 1 2.31372V14.3137C1 15.4183 1.89543 16.3137 3 16.3137H11C12.1046 16.3137 13 15.4183 13 14.3137C14.1046 14.3137 15 13.4183 15 12.3137V4.31372C15 3.20915 14.1046 2.31372 13 2.31372C13 1.20915 12.1046 0.313721 11 0.313721ZM13 3.31372C13.5523 3.31372 14 3.76144 14 4.31372V12.3137C14 12.866 13.5523 13.3137 13 13.3137V3.31372ZM2 2.31372C2 1.76144 2.44772 1.31372 3 1.31372H11C11.5523 1.31372 12 1.76144 12 2.31372V14.3137C12 14.866 11.5523 15.3137 11 15.3137H3C2.44772 15.3137 2 14.866 2 14.3137V2.31372Z" />
 </svg>
diff --git a/src/assets/toolpanel/data-store.svg b/src/assets/toolpanel/data-store.svg
index e5f68791..ad1b916e 100644
--- a/src/assets/toolpanel/data-store.svg
+++ b/src/assets/toolpanel/data-store.svg
@@ -1,6 +1,3 @@
-<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5 0C6.6594 0 2.08337 1.6475 2.08337 3.75C2.08337 5.85251 6.6594 7.50001 12.5 7.50001C18.3406 7.50001 22.9167 5.85251 22.9167 3.75C22.9167 1.6475 18.3406 0 12.5 0ZM12.5 6.66669C6.97502 6.66669 3.12502 5.12919 3.12502 3.75C3.12502 2.37082 6.97502 0.833321 12.5 0.833321C18.025 0.833321 21.875 2.37082 21.875 3.75C21.875 5.12919 18.025 6.66669 12.5 6.66669Z" fill="#788793"/>
-<path d="M22.4122 5.23438C22.1247 5.23438 21.8913 5.42106 21.8913 5.65106C21.8913 7.03024 18.0413 8.56774 12.5163 8.56774C6.99131 8.56774 3.14131 7.03024 3.14131 5.65106C3.14131 5.42106 2.90796 5.23438 2.62046 5.23438C2.33296 5.23438 2.09961 5.42106 2.09961 5.65106C2.09961 7.75356 6.67563 9.40106 12.5163 9.40106C18.3569 9.40106 22.9329 7.75356 22.9329 5.65106C22.933 5.42106 22.6997 5.23438 22.4122 5.23438Z" fill="#788793"/>
-<path d="M22.4122 7.30473C22.1247 7.30473 21.8913 7.49141 21.8913 7.72141C21.8913 9.10055 18.0413 10.6381 12.5163 10.6381C6.99131 10.6381 3.14131 9.10055 3.14131 7.72137C3.14131 7.49137 2.90796 7.30469 2.62046 7.30469C2.33296 7.30469 2.09961 7.49137 2.09961 7.72137C2.09961 9.82387 6.67563 11.4714 12.5163 11.4714C18.3569 11.4714 22.9329 9.82387 22.9329 7.72137C22.933 7.49137 22.6997 7.30473 22.4122 7.30473Z" fill="#788793"/>
-<path d="M22.3959 3.33331C22.1084 3.33331 21.875 3.51999 21.875 3.74999V16.25C21.875 17.6292 18.025 19.1667 12.5 19.1667C6.97502 19.1667 3.12502 17.6292 3.12502 16.25V3.74999C3.12502 3.51999 2.89167 3.33331 2.60417 3.33331C2.31667 3.33331 2.08337 3.51999 2.08337 3.74999V16.25C2.08337 18.3525 6.6594 20 12.5 20C18.3406 20 22.9167 18.3525 22.9167 16.25V3.74999C22.9167 3.51999 22.6834 3.33331 22.3959 3.33331Z" fill="#788793"/>
+<svg width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.81781 3.00114C5.73441 2.5845 7.03579 2.31372 8.5 2.31372C9.96421 2.31372 11.2656 2.5845 12.1822 3.00114C13.1439 3.43829 13.5 3.94 13.5 4.31372C13.5 4.68744 13.1439 5.18915 12.1822 5.6263C11.2656 6.04294 9.96421 6.31372 8.5 6.31372C7.03579 6.31372 5.73441 6.04294 4.81781 5.6263C3.85608 5.18915 3.5 4.68744 3.5 4.31372C3.5 3.94 3.85608 3.43829 4.81781 3.00114ZM13.5 6.01185V7.31372C13.5 7.68744 13.1439 8.18915 12.1822 8.6263C11.2656 9.04294 9.96421 9.31372 8.5 9.31372C7.03579 9.31372 5.73441 9.04294 4.81781 8.6263C3.85608 8.18915 3.5 7.68744 3.5 7.31372V6.01185C3.77105 6.21418 4.0799 6.38935 4.40401 6.53667C5.47802 7.02486 6.92664 7.31372 8.5 7.31372C10.0734 7.31372 11.522 7.02486 12.596 6.53667C12.9201 6.38935 13.229 6.21418 13.5 6.01185ZM14.5 4.31372C14.5 3.30673 13.6249 2.55844 12.596 2.09077C11.522 1.60258 10.0734 1.31372 8.5 1.31372C6.92664 1.31372 5.47802 1.60258 4.40401 2.09077C3.37513 2.55844 2.5 3.30673 2.5 4.31372V13.3137C2.5 14.3207 3.37513 15.069 4.40401 15.5367C5.47802 16.0249 6.92664 16.3137 8.5 16.3137C10.0734 16.3137 11.522 16.0249 12.596 15.5367C13.6249 15.069 14.5 14.3207 14.5 13.3137V4.31372ZM13.5 9.01185V10.3137C13.5 10.6874 13.1439 11.1892 12.1822 11.6263C11.2656 12.0429 9.96421 12.3137 8.5 12.3137C7.03579 12.3137 5.73441 12.0429 4.81781 11.6263C3.85608 11.1892 3.5 10.6874 3.5 10.3137V9.01185C3.77105 9.21418 4.0799 9.38935 4.40401 9.53667C5.47802 10.0249 6.92664 10.3137 8.5 10.3137C10.0734 10.3137 11.522 10.0249 12.596 9.53667C12.9201 9.38935 13.229 9.21418 13.5 9.01185ZM13.5 12.0118V13.3137C13.5 13.6874 13.1439 14.1892 12.1822 14.6263C11.2656 15.0429 9.96421 15.3137 8.5 15.3137C7.03579 15.3137 5.73441 15.0429 4.81781 14.6263C3.85608 14.1892 3.5 13.6874 3.5 13.3137V12.0118C3.77105 12.2142 4.0799 12.3893 4.40401 12.5367C5.47802 13.0249 6.92664 13.3137 8.5 13.3137C10.0734 13.3137 11.522 13.0249 12.596 12.5367C12.9201 12.3893 13.229 12.2142 13.5 12.0118Z" />
 </svg>
diff --git a/src/assets/toolpanel/end-event.svg b/src/assets/toolpanel/end-event.svg
index a471bc8c..0ef4e2b1 100644
--- a/src/assets/toolpanel/end-event.svg
+++ b/src/assets/toolpanel/end-event.svg
@@ -1,19 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
-    <title>icons/processbuilder/end-event</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <circle id="path-1" cx="29" cy="17" r="11"></circle>
-    </defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Build/Applications/Processes/ProcessBuilder" transform="translate(-18.000000, -307.000000)">
-            <g id="10" transform="translate(0.000000, 301.000000)">
-                <g id="icons/processbuilder/end-event">
-                    <use fill="#FFF1F2" fill-rule="evenodd" xlink:href="#path-1"></use>
-                    <circle stroke="#ED4757" stroke-width="2" cx="29" cy="17" r="10"></circle>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<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="#ED4756" stroke-width="2"/>
+</svg>
diff --git a/src/assets/toolpanel/error-end-event.svg b/src/assets/toolpanel/error-end-event.svg
new file mode 100644
index 00000000..7497f0cc
--- /dev/null
+++ b/src/assets/toolpanel/error-end-event.svg
@@ -0,0 +1,11 @@
+<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="#ED4756" stroke-width="2"/>
+  <g clip-path="url(#clip0_868_6366)">
+  <path d="M17.1195 14.1908C18.5412 11.1267 19.9629 8.06405 21.3846 5C20.246 10.467 19.1086 15.9313 17.9699 21.3969C16.1133 19.1389 14.2566 16.8794 12.3999 14.6215C10.6004 17.0809 8.79952 19.5405 7 22C8.60608 16.9526 10.2109 11.9052 11.817 6.85772C13.584 9.3021 15.3524 11.7465 17.1195 14.1908Z" fill="#ED4756"/>
+  </g>
+  <defs>
+  <clipPath id="clip0_868_6366">
+  <rect width="14.3846" height="17" fill="white" transform="translate(7 5)"/>
+  </clipPath>
+  </defs>
+</svg>
diff --git a/src/assets/toolpanel/event-based-gateway.svg b/src/assets/toolpanel/event-based-gateway.svg
new file mode 100644
index 00000000..0ed39818
--- /dev/null
+++ b/src/assets/toolpanel/event-based-gateway.svg
@@ -0,0 +1,6 @@
+<svg width="31" height="31" viewBox="0 0 31 31" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.5841 2.9168C15.121 2.37983 15.9916 2.37983 16.5286 2.9168L28.1959 14.5841C28.7329 15.121 28.7329 15.9916 28.1959 16.5286L16.5286 28.1959C15.9916 28.7328 15.121 28.7328 14.5841 28.1959L2.91682 16.5286C2.37984 15.9916 2.37984 15.121 2.91682 14.5841L14.5841 2.9168ZM1.94454 13.6118C0.870602 14.6857 0.870602 16.4269 1.94454 17.5009L13.6118 29.1681C14.6857 30.2421 16.427 30.2421 17.5009 29.1681L29.1682 17.5009C30.2421 16.4269 30.2421 14.6857 29.1682 13.6118L17.5009 1.94453C16.427 0.870588 14.6857 0.870588 13.6118 1.94453L1.94454 13.6118Z" />
+    <path d="M15.5 23C19.6421 23 23 19.6421 23 15.5C23 11.3579 19.6421 8 15.5 8C11.3579 8 8 11.3579 8 15.5C8 19.6421 11.3579 23 15.5 23Z" stroke="black" stroke-width="0.8"/>
+    <path d="M15.5513 21.2533C18.7004 21.2533 21.2533 18.7004 21.2533 15.5512C21.2533 12.4021 18.7004 9.84918 15.5513 9.84918C12.4021 9.84918 9.84924 12.4021 9.84924 15.5512C9.84924 18.7004 12.4021 21.2533 15.5513 21.2533Z" stroke="black" stroke-width="0.8"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5074 12.2123L19.0081 14.7631L17.6709 18.8904H13.3439L12.0068 14.7631L15.5074 12.2123Z" stroke="black" stroke-width="0.6"/>
+</svg>
diff --git a/src/assets/toolpanel/exclusive-gateway.svg b/src/assets/toolpanel/exclusive-gateway.svg
new file mode 100644
index 00000000..e582b24f
--- /dev/null
+++ b/src/assets/toolpanel/exclusive-gateway.svg
@@ -0,0 +1,4 @@
+<svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5841 1.9168C14.121 1.37983 14.9916 1.37983 15.5286 1.9168L27.1959 13.5841C27.7329 14.121 27.7329 14.9916 27.1959 15.5286L15.5286 27.1959C14.9916 27.7328 14.121 27.7328 13.5841 27.1959L1.91682 15.5286C1.37984 14.9916 1.37984 14.121 1.91682 13.5841L13.5841 1.9168ZM0.944544 12.6118C-0.129398 13.6857 -0.129398 15.4269 0.944544 16.5009L12.6118 28.1681C13.6857 29.2421 15.427 29.2421 16.5009 28.1681L28.1682 16.5009C29.2421 15.4269 29.2421 13.6857 28.1682 12.6118L16.5009 0.94453C15.427 -0.129412 13.6857 -0.129412 12.6118 0.94453L0.944544 12.6118Z" />
+<path d="M17.3432 14.5L21.6075 10.3956C22.1308 9.89189 22.1308 9.07527 21.6075 8.57119L20.6598 7.659C20.1365 7.15533 19.2881 7.15533 18.7643 7.659L14.5 11.7634L10.2357 7.659C9.71236 7.15533 8.86392 7.15533 8.3402 7.659L7.39247 8.57119C6.86918 9.07486 6.86918 9.89148 7.39247 10.3956L11.6568 14.5L7.39247 18.6044C6.86918 19.1081 6.86918 19.9247 7.39247 20.4288L8.3402 21.341C8.86349 21.8447 9.71236 21.8447 10.2357 21.341L14.5 17.2366L18.7643 21.341C19.2876 21.8447 20.1365 21.8447 20.6598 21.341L21.6075 20.4288C22.1308 19.9251 22.1308 19.1085 21.6075 18.6044L17.3432 14.5Z" />
+</svg>
diff --git a/src/assets/toolpanel/generic-gateway.svg b/src/assets/toolpanel/generic-gateway.svg
index f6b38d8d..bd93725d 100644
--- a/src/assets/toolpanel/generic-gateway.svg
+++ b/src/assets/toolpanel/generic-gateway.svg
@@ -1,14 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="21px" height="22px" viewBox="0 0 21 22" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <title>icons/processbuilder/exlusive-gateway</title>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Build/Applications/Processes/ProcessBuilder" transform="translate(-19.000000, -76.000000)">
-            <g id="3" transform="translate(0.000000, 70.000000)">
-                <g id="icons/processbuilder/exlusive-gateway" transform="translate(19.000000, 6.000000)">
-                    <path d="M0.625628427,10.6725043 C0.458127928,10.8493013 0.458171241,11.1511931 0.625436542,11.3272938 L10.1747502,21.3788402 C10.3282145,21.5403866 10.5717855,21.5403866 10.7252498,21.3788402 L20.274552,11.3266381 C20.441816,11.1505655 20.441816,10.8487669 20.2745635,10.6727062 L10.7252498,0.621159773 C10.5717855,0.459613409 10.3282145,0.459613409 10.1747387,0.621171796 L0.625628427,10.6725043 Z"
-                          id="3" stroke="#788793"/>
-                </g>
-            </g>
-        </g>
-    </g>
+<svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5841 1.9168C14.121 1.37983 14.9916 1.37983 15.5286 1.9168L27.1959 13.5841C27.7329 14.121 27.7329 14.9916 27.1959 15.5286L15.5286 27.1959C14.9916 27.7328 14.121 27.7328 13.5841 27.1959L1.91682 15.5286C1.37984 14.9916 1.37984 14.121 1.91682 13.5841L13.5841 1.9168ZM0.944544 12.6118C-0.129398 13.6857 -0.129398 15.4269 0.944544 16.5009L12.6118 28.1681C13.6857 29.2421 15.427 29.2421 16.5009 28.1681L28.1682 16.5009C29.2421 15.4269 29.2421 13.6857 28.1682 12.6118L16.5009 0.94453C15.427 -0.129412 13.6857 -0.129412 12.6118 0.94453L0.944544 12.6118Z" />
 </svg>
diff --git a/src/assets/toolpanel/generic-intermediate-event.svg b/src/assets/toolpanel/generic-intermediate-event.svg
index 3da1bacb..668059ab 100644
--- a/src/assets/toolpanel/generic-intermediate-event.svg
+++ b/src/assets/toolpanel/generic-intermediate-event.svg
@@ -1,5 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z" fill="#fff4d3"/>
-<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="#fabd2d"/>
-<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="#fabd2d"/>
+<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"/>
 </svg>
diff --git a/src/assets/toolpanel/inclusive-gateway.svg b/src/assets/toolpanel/inclusive-gateway.svg
new file mode 100644
index 00000000..686c7dca
--- /dev/null
+++ b/src/assets/toolpanel/inclusive-gateway.svg
@@ -0,0 +1,4 @@
+<svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5841 1.9168C14.121 1.37983 14.9916 1.37983 15.5286 1.9168L27.1959 13.5841C27.7329 14.121 27.7329 14.9916 27.1959 15.5286L15.5286 27.1959C14.9916 27.7328 14.121 27.7328 13.5841 27.1959L1.91682 15.5286C1.37984 14.9916 1.37984 14.121 1.91682 13.5841L13.5841 1.9168ZM0.944544 12.6118C-0.129398 13.6857 -0.129398 15.4269 0.944544 16.5009L12.6118 28.1681C13.6857 29.2421 15.427 29.2421 16.5009 28.1681L28.1682 16.5009C29.2421 15.4269 29.2421 13.6857 28.1682 12.6118L16.5009 0.94453C15.427 -0.129412 13.6857 -0.129412 12.6118 0.94453L0.944544 12.6118Z" />
+<circle cx="14.5" cy="14.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
new file mode 100644
index 00000000..b51842c6
--- /dev/null
+++ b/src/assets/toolpanel/intermediate-conditional-catch-event.svg
@@ -0,0 +1,5 @@
+<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
new file mode 100644
index 00000000..df29afcd
--- /dev/null
+++ b/src/assets/toolpanel/intermediate-message-catch-event.svg
@@ -0,0 +1,5 @@
+<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 37d4b921..b58b6df6 100644
--- a/src/assets/toolpanel/intermediate-message-throw-event.svg
+++ b/src/assets/toolpanel/intermediate-message-throw-event.svg
@@ -1,6 +1,5 @@
-<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 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>
diff --git a/src/assets/toolpanel/intermediate-signal-catch-event.svg b/src/assets/toolpanel/intermediate-signal-catch-event.svg
new file mode 100644
index 00000000..1b83e4cc
--- /dev/null
+++ b/src/assets/toolpanel/intermediate-signal-catch-event.svg
@@ -0,0 +1,5 @@
+<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" fill="none"/>
+</svg>
diff --git a/src/assets/toolpanel/intermediate-signal-throw-event.svg b/src/assets/toolpanel/intermediate-signal-throw-event.svg
new file mode 100644
index 00000000..c9849748
--- /dev/null
+++ b/src/assets/toolpanel/intermediate-signal-throw-event.svg
@@ -0,0 +1,5 @@
+<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
new file mode 100644
index 00000000..2800b114
--- /dev/null
+++ b/src/assets/toolpanel/intermediate-timer-event.svg
@@ -0,0 +1,5 @@
+<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
new file mode 100644
index 00000000..2351b8f2
--- /dev/null
+++ b/src/assets/toolpanel/manual-task.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" 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" />
+<path d="M17.1776 8.50001C16.5644 8.48828 16.0625 9.00185 16.0625 9.61517V11.9998H15.8438V7.18158C15.8438 6.56826 15.3418 6.05469 14.7286 6.06642C14.1344 6.0778 13.6563 6.56304 13.6563 7.15998V11.9998H13.4375V6.11517C13.4375 5.50185 12.9356 4.98828 12.3224 5.00001C11.7282 5.01139 11.25 5.49663 11.25 6.09357V11.9998H11.0313V7.20892C11.0313 6.5956 10.5293 6.08203 9.91615 6.09376C9.32194 6.10514 8.84375 6.59038 8.84375 7.18732V13.6402L7.97838 12.4503C7.6231 11.9617 6.93907 11.8537 6.45049 12.209C5.96199 12.5643 5.85399 13.2483 6.20926 13.7369L9.64366 18.4593C9.76543 18.6267 9.92507 18.763 10.1095 18.8569C10.294 18.9508 10.4981 18.9998 10.7051 18.9998H16.108C16.717 18.9998 17.2461 18.5808 17.3856 17.9879L18.1104 14.9074C18.2031 14.5133 18.25 14.1098 18.25 13.705V9.59357C18.25 8.99663 17.7718 8.51139 17.1776 8.50001Z" />
+</svg>
diff --git a/src/assets/toolpanel/message-end-event.svg b/src/assets/toolpanel/message-end-event.svg
new file mode 100644
index 00000000..0f26f023
--- /dev/null
+++ b/src/assets/toolpanel/message-end-event.svg
@@ -0,0 +1,4 @@
+<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 f0c101f5..f27284c6 100644
--- a/src/assets/toolpanel/message-start-event.svg
+++ b/src/assets/toolpanel/message-start-event.svg
@@ -1,4 +1,4 @@
-<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 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="M19.7348 11.2172C19.8414 11.1324 20 11.2117 20 11.3457V16.9375C20 17.6621 19.4121 18.25 18.6875 18.25H7.3125C6.58789 18.25 6 17.6621 6 16.9375V11.3484C6 11.2117 6.15586 11.1352 6.26523 11.2199C6.87773 11.6957 7.68984 12.3 10.4789 14.3262C11.0559 14.7473 12.0293 15.6332 13 15.6277C13.9762 15.6359 14.9687 14.7309 15.5238 14.3262C18.3129 12.3 19.1223 11.693 19.7348 11.2172ZM13 14.75C13.6344 14.7609 14.5477 13.9516 15.007 13.618C18.6355 10.9848 18.9117 10.7551 19.7484 10.0988C19.907 9.97578 20 9.78438 20 9.58203V9.0625C20 8.33789 19.4121 7.75 18.6875 7.75H7.3125C6.58789 7.75 6 8.33789 6 9.0625V9.58203C6 9.78438 6.09297 9.97305 6.25156 10.0988C7.08828 10.7523 7.36445 10.9848 10.993 13.618C11.4523 13.9516 12.3656 14.7609 13 14.75Z" fill="#00875A"/>
 </svg>
diff --git a/src/assets/toolpanel/parallel-gateway.svg b/src/assets/toolpanel/parallel-gateway.svg
new file mode 100644
index 00000000..0b3e0854
--- /dev/null
+++ b/src/assets/toolpanel/parallel-gateway.svg
@@ -0,0 +1,4 @@
+<svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5841 1.9168C14.121 1.37983 14.9916 1.37983 15.5286 1.9168L27.1959 13.5841C27.7329 14.121 27.7329 14.9916 27.1959 15.5286L15.5286 27.1959C14.9916 27.7328 14.121 27.7328 13.5841 27.1959L1.91682 15.5286C1.37984 14.9916 1.37984 14.121 1.91682 13.5841L13.5841 1.9168ZM0.944544 12.6118C-0.129398 13.6857 -0.129398 15.4269 0.944544 16.5009L12.6118 28.1681C13.6857 29.2421 15.427 29.2421 16.5009 28.1681L28.1682 16.5009C29.2421 15.4269 29.2421 13.6857 28.1682 12.6118L16.5009 0.94453C15.427 -0.129412 13.6857 -0.129412 12.6118 0.94453L0.944544 12.6118Z" />
+<path d="M22.6429 12.7188H16.5357V7.375C16.5357 6.71928 15.928 6.1875 15.1786 6.1875H13.8214C13.072 6.1875 12.4643 6.71928 12.4643 7.375V12.7188H6.35714C5.60775 12.7188 5 13.2505 5 13.9062V15.0938C5 15.7495 5.60775 16.2812 6.35714 16.2812H12.4643V21.625C12.4643 22.2807 13.072 22.8125 13.8214 22.8125H15.1786C15.928 22.8125 16.5357 22.2807 16.5357 21.625V16.2812H22.6429C23.3923 16.2812 24 15.7495 24 15.0938V13.9062C24 13.2505 23.3923 12.7188 22.6429 12.7188Z" />
+</svg>
diff --git a/src/assets/toolpanel/pool.svg b/src/assets/toolpanel/pool.svg
index a0823934..25eb891d 100644
--- a/src/assets/toolpanel/pool.svg
+++ b/src/assets/toolpanel/pool.svg
@@ -1,11 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="27px" height="18px" viewBox="0 0 27 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
-    <title>custom/processbuilder/pool2</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="custom/processbuilder/pool2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Rectangle" stroke="#333333" fill="#FFFFFF" x="0.5" y="0.5" width="26" height="17"></rect>
-        <rect id="Rectangle-3" fill="#333333" x="7" y="1" width="1" height="16"></rect>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="26" height="22" viewBox="0 0 26 22" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.428589 3.14286C0.428589 1.4071 1.83569 0 3.57145 0H22.4286C24.1643 0 25.5714 1.40711 25.5714 3.14286V18.8571C25.5714 20.5929 24.1643 22 22.4286 22H3.57145C1.83569 22 0.428589 20.5929 0.428589 18.8571V3.14286ZM8.28573 1.57143V20.4286H22.4286C23.2965 20.4286 24 19.725 24 18.8571V3.14286C24 2.27498 23.2965 1.57143 22.4286 1.57143H8.28573ZM6.7143 1.57143H3.57145C2.70357 1.57143 2.00002 2.27498 2.00002 3.14286V18.8571C2.00002 19.725 2.70357 20.4286 3.57145 20.4286H6.7143V1.57143Z" />
+</svg>
diff --git a/src/assets/toolpanel/script-task.svg b/src/assets/toolpanel/script-task.svg
new file mode 100644
index 00000000..d881143b
--- /dev/null
+++ b/src/assets/toolpanel/script-task.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" 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" />
+<path d="M11.101 18.9863L9.76662 18.5024C9.62662 18.4531 9.54787 18.2699 9.58725 18.0949L12.5732 5.23791C12.6126 5.06291 12.7591 4.96447 12.8991 5.01369L14.2335 5.49768C14.3735 5.5469 14.4522 5.7301 14.4129 5.9051L11.4269 18.7621C11.3854 18.9371 11.241 19.0383 11.101 18.9863ZM8.60725 15.9184L9.55881 14.6496C9.65943 14.5156 9.65287 14.3024 9.54131 14.1793L7.55943 12L9.54131 9.82072C9.65287 9.69768 9.66162 9.4844 9.55881 9.35041L8.60725 8.08166C8.50881 7.95041 8.34256 7.94221 8.23537 8.06799L5.08318 11.7594C4.97162 11.8879 4.97162 12.1094 5.08318 12.2379L8.23537 15.9321C8.34256 16.0578 8.50881 16.0524 8.60725 15.9184ZM15.7647 15.9348L18.9169 12.2406C19.0285 12.1121 19.0285 11.8906 18.9169 11.7621L15.7647 8.06526C15.6597 7.94221 15.4935 7.94768 15.3929 8.07893L14.4413 9.34768C14.3407 9.48166 14.3472 9.69494 14.4588 9.81799L16.4407 12L14.4588 14.1793C14.3472 14.3024 14.3385 14.5156 14.4413 14.6496L15.3929 15.9184C15.4913 16.0524 15.6576 16.0578 15.7647 15.9348Z" />
+</svg>
diff --git a/src/assets/toolpanel/signal-end-event.svg b/src/assets/toolpanel/signal-end-event.svg
new file mode 100644
index 00000000..a7484057
--- /dev/null
+++ b/src/assets/toolpanel/signal-end-event.svg
@@ -0,0 +1,4 @@
+<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
new file mode 100644
index 00000000..03eb442f
--- /dev/null
+++ b/src/assets/toolpanel/signal-start-event.svg
@@ -0,0 +1,4 @@
+<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.7595 4.41667 13.2406 4.41667 13.433 4.75L21.2273 18.25C21.4197 18.5833 21.1792 19 20.7943 19H5.20581C4.82091 19 4.58034 18.5833 4.77279 18.25L12.567 4.75Z" stroke="#00875A" fill="none" />
+</svg>
diff --git a/src/assets/toolpanel/start-event.svg b/src/assets/toolpanel/start-event.svg
index 48bd2727..e6a55d40 100644
--- a/src/assets/toolpanel/start-event.svg
+++ b/src/assets/toolpanel/start-event.svg
@@ -1,19 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
-    <title>icons/processbuilder/start-event</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <circle id="path-1" cx="29" cy="17" r="11"></circle>
-    </defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Build/Applications/Processes/ProcessBuilder" transform="translate(-18.000000, -175.000000)">
-            <g id="6" transform="translate(0.000000, 169.000000)">
-                <g id="icons/processbuilder/start-event">
-                    <use fill="#EDFFFC" fill-rule="evenodd" xlink:href="#path-1"></use>
-                    <circle stroke="#00BF9C" stroke-width="1" cx="29" cy="17" r="10.5"></circle>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<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"/>
+</svg>
diff --git a/src/assets/toolpanel/sub-task.svg b/src/assets/toolpanel/sub-task.svg
new file mode 100644
index 00000000..eab24796
--- /dev/null
+++ b/src/assets/toolpanel/sub-task.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" 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" />
+<path d="M20.6429 9.71875H14.5357V4.375C14.5357 3.71928 13.928 3.1875 13.1786 3.1875H11.8214C11.072 3.1875 10.4643 3.71928 10.4643 4.375V9.71875H4.35714C3.60775 9.71875 3 10.2505 3 10.9062V12.0938C3 12.7495 3.60775 13.2812 4.35714 13.2812H10.4643V18.625C10.4643 19.2807 11.072 19.8125 11.8214 19.8125H13.1786C13.928 19.8125 14.5357 19.2807 14.5357 18.625V13.2812H20.6429C21.3923 13.2812 22 12.7495 22 12.0938V10.9062C22 10.2505 21.3923 9.71875 20.6429 9.71875Z" />
+</svg>
diff --git a/src/assets/toolpanel/task.svg b/src/assets/toolpanel/task.svg
index 1ab726d2..9901bc3e 100644
--- a/src/assets/toolpanel/task.svg
+++ b/src/assets/toolpanel/task.svg
@@ -1,14 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="27px" height="18px" viewBox="0 0 27 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
-    <title>icons/processbuilder/task</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Build/Applications/Processes/ProcessBuilder" transform="translate(-16.000000, -12.000000)" stroke="#788793">
-            <g id="1" transform="translate(0.000000, 4.000000)">
-                <rect id="icons/processbuilder/task" x="16.5" y="8.5" width="25.3076923" height="17" rx="2"></rect>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" 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" />
+</svg>
diff --git a/src/assets/toolpanel/terminate-end-event.svg b/src/assets/toolpanel/terminate-end-event.svg
new file mode 100644
index 00000000..9af2950c
--- /dev/null
+++ b/src/assets/toolpanel/terminate-end-event.svg
@@ -0,0 +1,4 @@
+<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/text-annotation.svg b/src/assets/toolpanel/text-annotation.svg
index cfb91ab9..a3851d2d 100644
--- a/src/assets/toolpanel/text-annotation.svg
+++ b/src/assets/toolpanel/text-annotation.svg
@@ -1,17 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="31px" height="18px" viewBox="0 0 31 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
-    <title>icons/processbuilder/text-annotation</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Build/Applications/Processes/ProcessBuilder" transform="translate(-14.000000, -573.000000)" fill="#788793">
-            <g id="18" transform="translate(0.000000, 565.000000)">
-                <g id="icons/processbuilder/text-annotation" transform="translate(14.000000, 7.000000)">
-                    <path d="M2.945435,2.96366812 C3.4877712,2.96366812 3.92733623,2.52423743 3.92733623,1.98190123 C3.92733623,1.43956503 3.48790554,1 2.945435,1 L0.981901229,1 C0.439565032,1 0,1.43956503 0,1.98190123 L0,18.0183675 C0,18.5603006 0.439430691,19 0.981901229,19 L2.945435,19 C3.4877712,19 3.92733623,18.5605693 3.92733623,18.0183675 C3.92733623,17.4760313 3.48790554,17.0363319 2.945435,17.0363319 L1.96366812,17.0363319 L1.96366812,2.96366812 L2.945435,2.96366812 Z" id="Shape" fill-rule="nonzero"></path>
-                    <path d="M8.640625,15 L7.47851562,15 L7.47851562,6.03808594 L4.31347656,6.03808594 L4.31347656,5.00585938 L11.8056641,5.00585938 L11.8056641,6.03808594 L8.640625,6.03808594 L8.640625,15 Z M15.3261719,15.1367188 C14.2187445,15.1367188 13.3448925,14.7994825 12.7045898,14.125 C12.0642872,13.4505175 11.7441406,12.5140034 11.7441406,11.3154297 C11.7441406,10.1077414 12.0415009,9.14844105 12.6362305,8.4375 C13.23096,7.72655895 14.0296174,7.37109375 15.0322266,7.37109375 C15.9710333,7.37109375 16.7138645,7.67984717 17.2607422,8.29736328 C17.8076199,8.91487939 18.0810547,9.72948713 18.0810547,10.7412109 L18.0810547,11.4589844 L12.9199219,11.4589844 C12.9427084,12.3385461 13.1648742,13.0061826 13.5864258,13.4619141 C14.0079774,13.9176455 14.6015587,14.1455078 15.3671875,14.1455078 C16.1738322,14.1455078 16.9713502,13.9768897 17.7597656,13.6396484 L17.7597656,14.6513672 C17.358722,14.8245451 16.9793312,14.9487301 16.621582,15.0239258 C16.2638328,15.0991215 15.8320338,15.1367188 15.3261719,15.1367188 Z M15.0185547,8.32128906 C14.4169892,8.32128906 13.937339,8.51725064 13.5795898,8.90917969 C13.2218407,9.30110873 13.011068,9.84342102 12.9472656,10.5361328 L16.8642578,10.5361328 C16.8642578,9.82063444 16.7047542,9.2726256 16.3857422,8.89208984 C16.0667302,8.51155409 15.6110056,8.32128906 15.0185547,8.32128906 Z M21.5400391,11.1650391 L18.9355469,7.5078125 L20.2275391,7.5078125 L22.203125,10.3789062 L24.171875,7.5078125 L25.4501953,7.5078125 L22.8457031,11.1650391 L25.5869141,15 L24.3017578,15 L22.203125,11.9648438 L20.0839844,15 L18.7988281,15 L21.5400391,11.1650391 Z M29.4902344,14.2001953 C29.6907562,14.2001953 29.8844392,14.1853843 30.0712891,14.1557617 C30.258139,14.1261392 30.4062495,14.0953778 30.515625,14.0634766 L30.515625,14.9316406 C30.3925775,14.9908857 30.211427,15.0398761 29.972168,15.0786133 C29.732909,15.1173505 29.5175791,15.1367188 29.3261719,15.1367188 C27.8769459,15.1367188 27.1523438,14.37338 27.1523438,12.8466797 L27.1523438,8.38964844 L26.0791016,8.38964844 L26.0791016,7.84277344 L27.1523438,7.37109375 L27.6308594,5.77148438 L28.2871094,5.77148438 L28.2871094,7.5078125 L30.4609375,7.5078125 L30.4609375,8.38964844 L28.2871094,8.38964844 L28.2871094,12.7988281 C28.2871094,13.2500023 28.3942047,13.596353 28.6083984,13.8378906 C28.8225922,14.0794283 29.1165346,14.2001953 29.4902344,14.2001953 Z" id="Text"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2.31372C5 2.03758 5.22386 1.81372 5.5 1.81372C6.36189 1.81372 7.07254 2.10072 7.56057 2.3796C7.73384 2.47861 7.88124 2.57782 8 2.66526C8.11876 2.57782 8.26616 2.47861 8.43943 2.3796C8.92746 2.10072 9.63811 1.81372 10.5 1.81372C10.7761 1.81372 11 2.03758 11 2.31372C11 2.58986 10.7761 2.81372 10.5 2.81372C9.86189 2.81372 9.32254 3.02672 8.93557 3.24784C8.74814 3.35495 8.60054 3.46169 8.5 3.54156V7.81372H9C9.27614 7.81372 9.5 8.03758 9.5 8.31372C9.5 8.58986 9.27614 8.81372 9 8.81372H8.5V13.0859C8.60054 13.1658 8.74814 13.2725 8.93557 13.3796C9.32254 13.6007 9.86189 13.8137 10.5 13.8137C10.7761 13.8137 11 14.0376 11 14.3137C11 14.5899 10.7761 14.8137 10.5 14.8137C9.63811 14.8137 8.92746 14.5267 8.43943 14.2478C8.26616 14.1488 8.11876 14.0496 8 13.9622C7.88124 14.0496 7.73384 14.1488 7.56057 14.2478C7.07254 14.5267 6.36189 14.8137 5.5 14.8137C5.22386 14.8137 5 14.5899 5 14.3137C5 14.0376 5.22386 13.8137 5.5 13.8137C6.13811 13.8137 6.67746 13.6007 7.06443 13.3796C7.25186 13.2725 7.39946 13.1658 7.5 13.0859V8.81372H7C6.72386 8.81372 6.5 8.58986 6.5 8.31372C6.5 8.03758 6.72386 7.81372 7 7.81372H7.5V3.54156C7.39946 3.46169 7.25186 3.35495 7.06443 3.24784C6.67746 3.02672 6.13811 2.81372 5.5 2.81372C5.22386 2.81372 5 2.58986 5 2.31372ZM8.35219 3.66864C8.35196 3.66885 8.35197 3.66884 8.35222 3.66861ZM7.64781 12.9588C7.64804 12.9586 7.64803 12.9586 7.64778 12.9588L7.64781 12.9588Z" />
+</svg>
diff --git a/src/assets/toolpanel/timer-start-event.svg b/src/assets/toolpanel/timer-start-event.svg
new file mode 100644
index 00000000..22fcea7f
--- /dev/null
+++ b/src/assets/toolpanel/timer-start-event.svg
@@ -0,0 +1,4 @@
+<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="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="#00875A"/>
+</svg>
diff --git a/src/assets/trash-alt-solid.svg b/src/assets/trash-alt-solid.svg
index b1f0e278..528eb54d 100644
--- a/src/assets/trash-alt-solid.svg
+++ b/src/assets/trash-alt-solid.svg
@@ -1,4 +1,1 @@
-<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>
+<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
diff --git a/src/components/crown/crownButtons/addLaneAboveButton.vue b/src/components/crown/crownButtons/addLaneAboveButton.vue
index 3e32eed2..97750ba2 100644
--- a/src/components/crown/crownButtons/addLaneAboveButton.vue
+++ b/src/components/crown/crownButtons/addLaneAboveButton.vue
@@ -5,16 +5,15 @@
     v-on="$listeners"
     :width="25"
   >
-    <img
-      :src="laneAboveIcon"
-      aria-hidden="true"
-    >
+    <font-awesome-icon :icon="['fpm', 'fa-lane-above']"/>
   </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 },
@@ -23,5 +22,8 @@ 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 401507bb..b59db578 100644
--- a/src/components/crown/crownButtons/addLaneBelowButton.vue
+++ b/src/components/crown/crownButtons/addLaneBelowButton.vue
@@ -5,16 +5,15 @@
     v-on="$listeners"
     :width="25"
   >
-    <img
-      :src="laneBelowIcon"
-      aria-hidden="true"
-    >
+    <font-awesome-icon :icon="['fpm', 'fa-lane-below']"/>
   </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 },
@@ -23,5 +22,8 @@ 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 68b97132..052ddb68 100644
--- a/src/components/crown/crownButtons/cloneButton.vue
+++ b/src/components/crown/crownButtons/cloneButton.vue
@@ -5,14 +5,9 @@
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
     aria-label="Clone Element"
     data-test="clone-button"
-    role="menuitem"
     @click="cloneElement"
   >
-    <img
-      :src="cloneIcon"
-      aria-hidden="true"
-      alt="Clone element icon"
-    >
+    <i class="fas fa-paste"/>
   </crown-button>
   
 </template>
diff --git a/src/components/crown/crownButtons/copyButton.vue b/src/components/crown/crownButtons/copyButton.vue
index c357536e..83b6f377 100644
--- a/src/components/crown/crownButtons/copyButton.vue
+++ b/src/components/crown/crownButtons/copyButton.vue
@@ -8,10 +8,7 @@
     role="menuitem"
     @click="copyElement"
   >
-    <img
-      :src="copyIcon"
-      aria-hidden="true"
-    >
+    <i class="fas fa-clipboard"/>
   </crown-button>
 
 </template>
diff --git a/src/components/crown/crownButtons/crownBoundaryEventDropdown.vue b/src/components/crown/crownButtons/crownBoundaryEventDropdown.vue
index f3d80702..0b6dfaf7 100644
--- a/src/components/crown/crownButtons/crownBoundaryEventDropdown.vue
+++ b/src/components/crown/crownButtons/crownBoundaryEventDropdown.vue
@@ -4,12 +4,14 @@
       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
@@ -41,6 +43,8 @@ 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',
@@ -93,6 +97,7 @@ 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 227fb44a..432f9345 100644
--- a/src/components/crown/crownButtons/crownButton.vue
+++ b/src/components/crown/crownButtons/crownButton.vue
@@ -3,13 +3,14 @@
     v-on="$listeners"
     :id="id"
     :aria-label="ariaLabel"
-    class="btn"
+    class="crown-button"
   >
     <slot>
       <img
         :src="src"
         width="width"
         height="height"
+        class="crown-icon"
       >
     </slot>
   </button>
@@ -33,19 +34,43 @@ export default {
 };
 </script>
 
-<style scoped>
-.btn {
-  border: none;
-  padding: 0;
-  margin-top: 0;
+<style lang="scss" scoped>
+.crown-button {
+  border:none;
   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 10px;
-  height: 15px;
+  margin: 0px 5px;
+  height: 20px;
+  width: 20px;
+  padding:2px;
+  fill: #5faaee;
+}
+.crown-button svg {
+  margin:auto;
 }
-i {
-  margin: 0px 10px;
-  font-size: 15px;
+.crown-button i {
+  margin:auto;
 }
 </style>
diff --git a/src/components/crown/crownButtons/crownColorDropdown.vue b/src/components/crown/crownButtons/crownColorDropdown.vue
index c484db35..e2795673 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 cog-container--button"/>
+      <i class="fas fa-palette "/>
     </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 8640b4b5..279ea912 100644
--- a/src/components/crown/crownButtons/crownDropdown.scss
+++ b/src/components/crown/crownButtons/crownDropdown.scss
@@ -8,13 +8,6 @@ $crown-left-chevron: 0.3rem;
 .cog-container {
   position: relative;
   display: flex;
-
-  &--button {
-    background: none;
-    border: none;
-    color: $primary-white;
-    height: 15px;
-  }
 }
 
 .element-list {
@@ -23,8 +16,10 @@ $crown-left-chevron: 0.3rem;
   top: $element-list-top;
   left: $element-list-left;
   border-radius: 5px;
-  background-color: $primary-color;
+  background-color: $primary-white;
   padding: 0;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+
 
   &::after {
     @include chevron($element-list-top-chevron, $element-list-left-chevron);
@@ -37,7 +32,7 @@ $crown-left-chevron: 0.3rem;
       background: none;
       padding: 0.25rem 0.85rem;
       border: none;
-      color: $primary-white;
+      color: $primary-black;
       font-size: 0.85rem;
 
       &:disabled {
diff --git a/src/components/crown/crownButtons/crownTaskDropdown.vue b/src/components/crown/crownButtons/crownTaskDropdown.vue
index 42a95f09..f716440a 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 cog-container--button" />
+      <i class="fas fa-cog" />
     </crown-button>
 
     <ul class="element-list" v-if="dropdownOpen" role="list">
diff --git a/src/components/crown/crownButtons/deleteButton.vue b/src/components/crown/crownButtons/deleteButton.vue
index 7e14781f..b7fdce01 100644
--- a/src/components/crown/crownButtons/deleteButton.vue
+++ b/src/components/crown/crownButtons/deleteButton.vue
@@ -7,13 +7,7 @@
     @click="isPoolLane ? removePoolLaneShape() : removeShape()"
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
   >
-    <img
-      :src="trashIcon"
-      aria-hidden="true"
-      data-prefix="fas"
-      data-icon="trash-alt"
-      class="fa-trash-alt trash-icon"
-    >
+    <i class="fas fa-trash-alt cog-container--button"/>
   </crown-button>
 </template>
 
diff --git a/src/components/crown/crownButtons/genericFlowButton.vue b/src/components/crown/crownButtons/genericFlowButton.vue
index c37819ef..e717cc0a 100644
--- a/src/components/crown/crownButtons/genericFlowButton.vue
+++ b/src/components/crown/crownButtons/genericFlowButton.vue
@@ -8,10 +8,7 @@
     role="menuitem"
     @click="addSequence"
   >
-    <img
-      :src="sequenceFlow"
-      aria-hidden="true"
-    >
+    <font-awesome-icon :icon="['fpm', 'fa-connect-elements']"/>
   </crown-button>
 </template>
 <script>
@@ -21,6 +18,8 @@ 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 = [
@@ -84,6 +83,7 @@ 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/faAlignBottom.js b/src/components/crown/crownButtons/icons/faAlignBottom.js
new file mode 100644
index 00000000..db801f35
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faAlignBottom.js
@@ -0,0 +1,11 @@
+export const faAlignBottom = {
+  prefix: 'fpm',
+  iconName: 'fa-align-bottom',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M6.637 1.076a1 1 0 0 0-.562.538l-.062.133v10.506l.07.147c.146.307.427.524.755.584.212.039 2.112.039 2.324 0 .328-.06.609-.277.755-.584l.07-.147V1.747l-.07-.147a1.016 1.016 0 0 0-.471-.486l-.178-.087-1.241-.007-1.24-.006-.15.062M1.29 14.051a.507.507 0 0 0-.229.686.707.707 0 0 0 .293.243c.095.026 13.197.026 13.292 0a.707.707 0 0 0 .293-.243.507.507 0 0 0-.229-.686c-.106-.048-.321-.05-6.71-.05s-6.604.002-6.71.05',
+  ],
+};
diff --git a/src/components/crown/crownButtons/icons/faAlignLeft.js b/src/components/crown/crownButtons/icons/faAlignLeft.js
new file mode 100644
index 00000000..1200c96d
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faAlignLeft.js
@@ -0,0 +1,11 @@
+export const faAlignLeft = {
+  prefix: 'fpm',
+  iconName: 'fa-align-left',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M6.637 1.076a1 1 0 0 0-.562.538l-.062.133v10.506l.07.147c.146.307.427.524.755.584.212.039 2.112.039 2.324 0 .328-.06.609-.277.755-.584l.07-.147V1.747l-.07-.147a1.016 1.016 0 0 0-.471-.486l-.178-.087-1.241-.007-1.24-.006-.15.062M1.29 14.051a.507.507 0 0 0-.229.686.707.707 0 0 0 .293.243c.095.026 13.197.026 13.292 0a.707.707 0 0 0 .293-.243.507.507 0 0 0-.229-.686c-.106-.048-.321-.05-6.71-.05s-6.604.002-6.71.05',
+  ],
+};
diff --git a/src/components/crown/crownButtons/icons/faAlignRight.js b/src/components/crown/crownButtons/icons/faAlignRight.js
new file mode 100644
index 00000000..a9c01698
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faAlignRight.js
@@ -0,0 +1,11 @@
+export const faAlignRight = {
+  prefix: 'fpm',
+  iconName: 'fa-align-right',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M14.28 1.058a.433.433 0 0 0-.23.235c-.047.103-.049.359-.049 6.707 0 6.389.002 6.604.05 6.71.114.251.441.36.686.229a.707.707 0 0 0 .243-.293c.026-.095.026-13.197 0-13.292a.625.625 0 0 0-.279-.305.602.602 0 0 0-.421.009M1.734 6.043a.994.994 0 0 0-.718.796c-.039.211-.039 2.111 0 2.323.06.328.277.609.584.755l.147.07h10.506l.147-.07c.307-.146.524-.427.584-.755.039-.212.039-2.112 0-2.323a1 1 0 0 0-.445-.675c-.271-.174.077-.164-5.551-.162-4.405.001-5.128.007-5.254.041',
+  ],
+};
diff --git a/src/components/crown/crownButtons/icons/faAlignTop.js b/src/components/crown/crownButtons/icons/faAlignTop.js
new file mode 100644
index 00000000..d5ce7e07
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faAlignTop.js
@@ -0,0 +1,11 @@
+export const faAlignTop = {
+  prefix: 'fpm',
+  iconName: 'fa-align-top',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M1.451 1.008c-.134.02-.177.039-.265.116a.717.717 0 0 0-.125.139.507.507 0 0 0 .229.686c.106.048.321.05 6.71.05s6.604-.002 6.71-.05c.06-.027.14-.09.178-.14.066-.087.131-.29.112-.352a2.37 2.37 0 0 1-.025-.103c-.017-.08-.15-.244-.239-.295-.043-.025-1.554-.035-6.645-.046-3.623-.007-6.611-.01-6.64-.005m5.186 2.068a1 1 0 0 0-.562.538l-.062.133v10.506l.07.147c.146.307.427.524.755.584.212.039 2.112.039 2.324 0 .328-.06.609-.277.755-.584l.07-.147V3.747l-.07-.147a1.016 1.016 0 0 0-.471-.486l-.178-.087-1.241-.007-1.24-.006-.15.062',
+  ],
+};
diff --git a/src/components/crown/crownButtons/icons/faBoundaryEvent.js b/src/components/crown/crownButtons/icons/faBoundaryEvent.js
new file mode 100644
index 00000000..7b49b3cc
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faBoundaryEvent.js
@@ -0,0 +1,11 @@
+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/faCenterHorizontally.js b/src/components/crown/crownButtons/icons/faCenterHorizontally.js
new file mode 100644
index 00000000..ef810264
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faCenterHorizontally.js
@@ -0,0 +1,11 @@
+export const faCenterHorizontally = {
+  prefix: 'fpm',
+  iconName: 'fa-center-horizontally',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M7.73 1.09c-.238.151-.222-.031-.23 2.596l-.008 2.313-2.366.007-2.366.007-.173.084c-.221.106-.386.27-.491.49l-.083.173v2.48l.075.16c.098.21.303.416.509.511l.163.076 2.366.007 2.366.007.008 2.313c.007 2.287.007 2.314.062 2.419.08.152.262.26.438.26a.515.515 0 0 0 .438-.26c.055-.105.055-.132.062-2.419l.008-2.313 2.366-.007 2.366-.007.163-.076a1.13 1.13 0 0 0 .509-.511l.075-.16V6.76l-.076-.163a1.13 1.13 0 0 0-.511-.509l-.16-.075-2.366-.007-2.366-.007L8.5 3.686c-.006-2.222-.009-2.317-.058-2.416-.123-.248-.468-.335-.712-.18',
+  ],
+};
diff --git a/src/components/crown/crownButtons/icons/faCenterVertically.js b/src/components/crown/crownButtons/icons/faCenterVertically.js
new file mode 100644
index 00000000..748001d5
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faCenterVertically.js
@@ -0,0 +1,11 @@
+export const faCenterVertically = {
+  prefix: 'fpm',
+  iconName: 'fa-center-vertically',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M6.767 2.028a1.044 1.044 0 0 0-.671.559l-.083.173-.007 2.366-.007 2.366-2.313.007-2.313.008-.12.07a.481.481 0 0 0-.169.682.52.52 0 0 0 .183.179c.105.055.132.055 2.419.062l2.313.008.007 2.366.007 2.366.075.16c.098.21.303.416.509.511l.163.076h2.48l.163-.076a1.13 1.13 0 0 0 .509-.511l.075-.16.007-2.366.007-2.366 2.313-.008c2.287-.007 2.314-.007 2.419-.062a.497.497 0 0 0 .01-.865l-.116-.066-2.313-.008-2.313-.007-.007-2.366-.007-2.366-.075-.16a1.13 1.13 0 0 0-.509-.511l-.163-.076-1.187-.004c-.652-.003-1.231.006-1.286.019',
+  ],
+};
diff --git a/src/components/crown/crownButtons/icons/faConnectElements.js b/src/components/crown/crownButtons/icons/faConnectElements.js
new file mode 100644
index 00000000..14f4e3e6
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faConnectElements.js
@@ -0,0 +1,11 @@
+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/faDistributeHorizontally.js b/src/components/crown/crownButtons/icons/faDistributeHorizontally.js
new file mode 100644
index 00000000..131c2801
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faDistributeHorizontally.js
@@ -0,0 +1,11 @@
+export const faDistributeHorizontally = {
+  prefix: 'fpm',
+  iconName: 'fa-distribute-horizontally',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M1.266 1.063a.637.637 0 0 0-.246.292c-.026.094-.026 13.197 0 13.291a.707.707 0 0 0 .243.293.507.507 0 0 0 .686-.229c.048-.106.05-.321.05-6.704.001-7.105.009-6.691-.127-6.841-.133-.148-.445-.2-.606-.102m13.014-.005a.433.433 0 0 0-.23.235c-.047.103-.049.359-.049 6.707 0 6.389.002 6.604.05 6.71.114.251.441.36.686.229a.707.707 0 0 0 .243-.293c.026-.095.026-13.197 0-13.292a.625.625 0 0 0-.279-.305.602.602 0 0 0-.421.009m-7.513.97a1.044 1.044 0 0 0-.671.559l-.083.173v10.48l.075.16c.098.21.303.416.509.511l.163.076h2.48l.163-.076a1.13 1.13 0 0 0 .509-.511l.075-.16V2.76l-.075-.16a1.13 1.13 0 0 0-.509-.511l-.163-.076-1.187-.004c-.652-.003-1.231.006-1.286.019',
+  ],
+};
diff --git a/src/components/crown/crownButtons/icons/faDistributeVertically.js b/src/components/crown/crownButtons/icons/faDistributeVertically.js
new file mode 100644
index 00000000..6e310884
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faDistributeVertically.js
@@ -0,0 +1,11 @@
+export const faDistributeVertically = {
+  prefix: 'fpm',
+  iconName: 'fa-distribute-vertically',
+  icon: [
+    16,
+    16,
+    [],
+    'e001',
+    'M1.293 1.044a.814.814 0 0 0-.233.222c-.13.241-.02.57.23.683.106.048.321.05 6.71.05s6.604-.002 6.71-.05a.507.507 0 0 0 .23-.683.62.62 0 0 0-.255-.224c-.108-.041-13.317-.039-13.392.002m1.474 4.985c-.281.066-.538.28-.671.558l-.083.173v2.48l.076.163c.095.206.301.411.511.509l.16.075h10.48l.16-.075a1.13 1.13 0 0 0 .511-.509l.076-.163V6.76l-.076-.163a1.13 1.13 0 0 0-.511-.509l-.16-.075-5.187-.004c-2.958-.002-5.229.006-5.286.02M1.29 14.051a.507.507 0 0 0-.229.686.707.707 0 0 0 .293.243c.095.026 13.197.026 13.292 0a.707.707 0 0 0 .293-.243.507.507 0 0 0-.229-.686c-.106-.048-.321-.05-6.71-.05s-6.604.002-6.71.05',
+  ],
+};
diff --git a/src/components/crown/crownButtons/icons/faLaneAbove.js b/src/components/crown/crownButtons/icons/faLaneAbove.js
new file mode 100644
index 00000000..2f2a7107
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faLaneAbove.js
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 00000000..9d8b9579
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/faLaneBelow.js
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 00000000..2dafb10c
--- /dev/null
+++ b/src/components/crown/crownButtons/icons/index.js
@@ -0,0 +1,12 @@
+export { faBoundaryEvent } from './faBoundaryEvent.js';
+export { faConnectElements } from './faConnectElements';
+export { faLaneAbove } from './faLaneAbove';
+export { faLaneBelow } from './faLaneBelow';
+export { faCenterHorizontally } from './faCenterHorizontally';
+export { faCenterVertically } from './faCenterVertically';
+export { faAlignLeft } from './faAlignLeft';
+export { faAlignRight } from './faAlignRight';
+export { faAlignBottom } from './faAlignBottom';
+export { faAlignTop } from './faAlignTop';
+export { faDistributeHorizontally } from './faDistributeHorizontally';
+export { faDistributeVertically } from './faDistributeVertically';
diff --git a/src/components/crown/crownConfig/crownConfig.scss b/src/components/crown/crownConfig/crownConfig.scss
index fee403ca..defacdb5 100644
--- a/src/components/crown/crownConfig/crownConfig.scss
+++ b/src/components/crown/crownConfig/crownConfig.scss
@@ -2,18 +2,19 @@ $crown-top-chevron: 0.8rem;
 $crown-left-chevron: 0.3rem;
 
 .crown-config {
-  background-color: $primary-color;
+  background-color: $primary-white;
   position: absolute;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: auto;
-  height: 1.85rem;
+  padding: 0 3px 0 3px;
+  height: 2.5rem;
   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 53da1eba..2733bfe5 100644
--- a/src/components/crown/crownConfig/crownConfig.vue
+++ b/src/components/crown/crownConfig/crownConfig.vue
@@ -222,8 +222,6 @@ export default {
       if (!store.getters.allowSavingElementPosition) {
         return;
       }
-
-      this.$emit('save-state');
     },
     repositionCrown() {
       const shapeView = this.shape.findView(this.paper);
@@ -235,7 +233,7 @@ export default {
       const { x, y, width } = shapeView.getBBox({ useModelGeometry: !this.isTextAnnotation && !this.isFlow });
 
       this.style = {
-        top: `${y - 45}px`,
+        top: `${y - 52}px`,
         left: `${x + width - 20}px`,
         cursor: 'pointer',
       };
diff --git a/src/components/crown/crownMultiselect/crownAlign.scss b/src/components/crown/crownMultiselect/crownAlign.scss
new file mode 100644
index 00000000..5f0605e2
--- /dev/null
+++ b/src/components/crown/crownMultiselect/crownAlign.scss
@@ -0,0 +1,20 @@
+$crown-top-chevron: 1.8rem;
+$crown-right-chevron: 8.1rem;
+
+.crown-align {
+  background-color: $primary-white;
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  padding: 0 3px 0 3px;
+  height: 2.5rem;
+  border-radius: 5px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+
+  &::after {
+    @include chevron($crown-top-chevron, $crown-right-chevron);
+  }
+}
\ No newline at end of file
diff --git a/src/components/crown/crownMultiselect/crownAlign.vue b/src/components/crown/crownMultiselect/crownAlign.vue
new file mode 100644
index 00000000..4f4b0330
--- /dev/null
+++ b/src/components/crown/crownMultiselect/crownAlign.vue
@@ -0,0 +1,302 @@
+<template>
+  <div
+    class="crown-config crown-align"
+    :style="style"
+    v-if="isMultiSelect" role="menu"
+  >
+    <slot />
+
+    <button
+      v-for="button in availableButtons"
+      :key="button.label"
+      :aria-label="button.label"
+      class="crown-button"
+      :title="button.label"
+      :data-test="button.testId"
+      :role="button.role"
+      :disabled="button.disabled"
+      @mousedown.stop.prevent
+      @click.stop.prevent="button.action"
+    >
+      <font-awesome-icon :icon="['fpm', `fa-${button.icon}`]"/>
+    </button>
+  </div>
+</template>
+
+<script>
+import store from '@/store';
+import runningInCypressTest from '@/runningInCypressTest';
+import { getShapesOptions } from '@/components/nodes/utilities/shapeGroup';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faAlignBottom,
+  faAlignTop,
+  faAlignRight,
+  faAlignLeft,
+  faCenterHorizontally,
+  faCenterVertically,
+  faDistributeVertically,
+  faDistributeHorizontally,
+} from '../crownButtons/icons';
+import { get } from 'lodash';
+
+export default {
+  props: {
+    paper: Object,
+    hasPools: Boolean,
+  },
+  data() {
+    return {
+      runningInCypressTest: runningInCypressTest(),
+      showCrown: false,
+      savePositionOnPointerupEventSet: false,
+      style: null,
+      taskDropdownInitiallyOpen: this.paperNotRendered(),
+      showReplaceModal: false,
+      nodeToReplace: null,
+      buttons: [
+        {
+          label: this.$t('Align Left'),
+          icon: 'align-left',
+          testId: 'align-left',
+          role: 'menuitem',
+          action: this.alignLeft,
+          condition: 'align.left',
+          disabled: false,
+        },
+        {
+          label: this.$t('Center Horizontally'),
+          icon: 'center-horizontally',
+          testId: 'align-horizontally',
+          role: 'menuitem',
+          action: this.centerHorizontally,
+          condition: 'align.horizontalCenter',
+          disabled: false,
+        },
+        {
+          label: this.$t('Align Right'),
+          icon: 'align-right',
+          testId: 'align-right',
+          role: 'menuitem',
+          action: this.alignRight,
+          condition: 'align.right',
+          disabled: false,
+        },
+        {
+          label: this.$t('Align Bottom'),
+          icon: 'align-bottom',
+          testId: 'align-bottom',
+          role: 'menuitem',
+          action: this.alignBottom,
+          condition: 'align.bottom',
+          disabled: false,
+        },
+        {
+          label: this.$t('Center Vertically'),
+          icon: 'center-vertically',
+          testId: 'center-vertically',
+          role: 'menuitem',
+          action: this.centerVertically,
+          condition: 'align.verticalCenter',
+          disabled: false,
+        },
+        {
+          label: this.$t('Align Top'),
+          icon: 'align-top',
+          testId: 'align-top',
+          role: 'menuitem',
+          action: this.alignTop,
+          condition: 'align.top',
+          disabled: false,
+        },
+        {
+          label: this.$t('Distribute Horizontally'),
+          icon: 'distribute-horizontally',
+          testId: 'distribute-horizontally',
+          role: 'menuitem',
+          action: this.distributeHorizontally,
+          condition: 'distribute.horizontally',
+          disabled: false,
+        },
+        {
+          label: this.$t('Distribute Vertically'),
+          icon: 'distribute-vertically',
+          testId: 'distribute-vertically',
+          role: 'menuitem',
+          action: this.distributeVertically,
+          condition: 'distribute.vertically',
+          disabled: false,
+        },
+        // add more buttons as necessary
+      ],
+    };
+  },
+  created() {
+    this.$t = this.$t.bind(this);
+    library.add(faAlignRight);
+    library.add(faAlignLeft);
+    library.add(faAlignBottom);
+    library.add(faAlignTop);
+    library.add(faCenterVertically);
+    library.add(faCenterHorizontally);
+    library.add(faDistributeVertically);
+    library.add(faDistributeHorizontally);
+  },
+  watch: {
+    selectedShapes() {
+      this.$root.$emit('bv::hide::tooltip');
+    },
+  },
+  computed: {
+    selectedShapes() {
+      this.disableButtons();
+      return getShapesOptions(store.getters.highlightedShapes);
+    },
+    isMultiSelect() {
+      const countSelected = store.getters.highlightedShapes.length;
+      return countSelected > 1;
+    },
+    highlightedShapes: () => store.getters.highlightedShapes,
+    availableButtons() {
+      const hasPoolsSelected = this.hasPools;
+      return this.buttons.filter(button => {
+        if (button.testId === 'copy-button') {
+          return !hasPoolsSelected;
+        }
+        if (button.testId === 'clone-button') {
+          return !hasPoolsSelected;
+        }
+        return true;
+      });
+    },
+  },
+  methods: {
+    disableButtons() {
+      let shapes = getShapesOptions(store.getters.highlightedShapes);
+      this.buttons.forEach(button => {
+        button.disabled = !get(shapes.can, button.condition, true);
+      });
+    },
+    alignLeft() {
+      this.undoableAction(this.selectedShapes.align.left);
+    },
+    centerHorizontally() {
+      this.undoableAction(this.selectedShapes.align.horizontalCenter);
+    },
+    alignRight() {
+      this.undoableAction(this.selectedShapes.align.right);
+    },
+    alignBottom() {
+      this.undoableAction(this.selectedShapes.align.bottom);
+    },
+    centerVertically() {
+      this.undoableAction(this.selectedShapes.align.verticalCenter);
+    },
+    alignTop() {
+      this.undoableAction(this.selectedShapes.align.top);
+    },
+    distributeHorizontally() {
+      this.undoableAction(this.selectedShapes.distribute.horizontally);
+    },
+    distributeVertically() {
+      this.undoableAction(this.selectedShapes.distribute.vertically);
+    },
+
+    undoableAction(actionFn) {
+      actionFn();
+      this.$emit('save-state');
+      this.disableButtons();
+    },
+
+    paperNotRendered() {
+      return !this.isRendering;
+    },
+    setNodePosition() {
+      this.shape.stopListening(
+        this.paper,
+        'element:pointerup',
+        this.setNodePosition
+      );
+      this.savePositionOnPointerupEventSet = false;
+
+      if (!store.getters.allowSavingElementPosition) {
+        return;
+      }
+
+      this.$emit('save-state');
+    },
+    paperDoneRendering() {
+      if (!this.isRendering) {
+        return;
+      }
+
+      return new Promise((resolve) => this.paper.once('render:done', resolve));
+    },
+    setUpCrownConfig() {
+      this.paper.on(
+        'render:done scale:changed translate:changed',
+        this.repositionCrown
+      );
+    },
+    setUpPositionHandling() {},
+  },
+  async mounted() {
+    await this.$nextTick();
+    await this.paperDoneRendering();
+    this.setUpCrownConfig();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.crown-align {
+  top: -58px;
+  left: -35%;
+  pointer-events: auto;
+}
+.crown-button {
+  border:none;
+  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:disabled {
+  background-color: #eaeaea;
+  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;
+}
+.crown-button i {
+  margin:auto;
+}
+</style>
+
+<style lang="scss" src="./crownAlign.scss" />
diff --git a/src/components/crown/crownMultiselect/crownMultiselect.vue b/src/components/crown/crownMultiselect/crownMultiselect.vue
index 16e1e7f0..0a68dd5a 100644
--- a/src/components/crown/crownMultiselect/crownMultiselect.vue
+++ b/src/components/crown/crownMultiselect/crownMultiselect.vue
@@ -11,29 +11,35 @@
       v-for="button in availableButtons"
       :key="button.label"
       :aria-label="button.label"
-      class="btn"
+      class="crown-button"
       :title="button.label"
       :data-test="button.testId"
       :role="button.role"
-      @mousedown.stop.prevent
-      @click.stop.prevent="button.action"
+      @click="button.action"
     >
-      <i :class="`fa fa-${button.icon} text-white`" />
+      <font-awesome-icon v-if="button.iconPrefix === 'fpm'" :icon="[button.iconPrefix, `fa-${button.icon}`]"/>
+      <i v-else :class="`${button.iconPrefix} fa-${button.icon} text-dark`" />
     </button>
+    <crown-align v-show="showAlignmentButtons" :paper="paper"/>
   </div>
 </template>
 
 <script>
 import store from '@/store';
 import runningInCypressTest from '@/runningInCypressTest';
+import crownAlign from './crownAlign';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCenterVertically } from '../crownButtons/icons';
 
 export default {
   props: {
     paper: Object,
     hasPools: Boolean,
   },
+  components:{ crownAlign },
   data() {
     return {
+      showAlignmentButtons: false,
       runningInCypressTest: runningInCypressTest(),
       showCrown: false,
       savePositionOnPointerupEventSet: false,
@@ -44,6 +50,7 @@ export default {
       buttons: [
         {
           label: 'Copy Selection',
+          iconPrefix: 'fa',
           icon: 'clipboard',
           testId: 'copy-button',
           role: 'menuitem',
@@ -51,13 +58,23 @@ export default {
         },
         {
           label: 'Clone Selection',
+          iconPrefix: 'fa',
           icon: 'copy',
           testId: 'clone-button',
           role: 'menuitem',
           action: this.cloneSelection,
         },
+        {
+          label: 'Align',
+          iconPrefix: 'fpm',
+          icon: 'center-vertically',
+          testId: 'align',
+          role: 'menuitem',
+          action: this.showAlign,
+        },
         {
           label: 'Delete Element',
+          iconPrefix: 'fa',
           icon: 'trash-alt',
           testId: 'delete-button',
           role: 'menuitem',
@@ -69,6 +86,7 @@ export default {
   },
   created() {
     this.$t = this.$t.bind(this);
+    library.add(faCenterVertically);
   },
   computed: {
     isMultiSelect() {
@@ -90,6 +108,9 @@ export default {
     },
   },
   methods: {
+    showAlign() {
+      this.showAlignmentButtons = !this.showAlignmentButtons;
+    },
     copySelection() {
       this.$emit('copy-selection');
     },
@@ -139,24 +160,49 @@ export default {
 };
 </script>
 
-<style scoped>
+
+<style lang="scss" scoped>
 .crown-multiselect {
   top: -38px;
   left: 50%;
   pointer-events: auto;
 }
-.btn {
-  border: none;
-  padding: 0;
-  margin-top: 0;
+.crown-button {
+  border:none;
   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 10px;
-  height: 15px;
+  margin: 0px 5px;
+  height: 20px;
+  width: 20px;
+  padding:2px;
+  fill: #5faaee;
+}
+.crown-button svg {
+  margin:auto;
 }
-i {
-  margin: 0px 10px;
-  font-size: 15px;
+.crown-button i {
+  margin:auto;
 }
 </style>
diff --git a/src/components/miniPaper/MiniPaper.vue b/src/components/miniPaper/MiniPaper.vue
index 65c4df76..70817ca7 100644
--- a/src/components/miniPaper/MiniPaper.vue
+++ b/src/components/miniPaper/MiniPaper.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="mini-paper-container position-absolute" @click="movePaper" :class="isOpen ? 'opened' : 'closed'">
+  <div
+    class="mini-paper-container"
+    @click="movePaper"
+    :class="isOpen ? 'opened' : 'closed'"
+    data-cy="mini-map-box"
+  >
     <div ref="miniPaper" class="mini-paper" />
   </div>
 </template>
@@ -11,6 +16,8 @@ export default {
   data() {
     return {
       miniMapManager: null,
+      newX: 0,
+      newY: 0,
     };
   },
   props: {
@@ -35,10 +42,17 @@ export default {
       const { sx: scaleX, sy: scaleY } = this.paperManager.scale;
       const { clientWidth, clientHeight } = this.paperManager.paper.el;
       const { newX, newY } = this.miniMapManager.calculateNewPaperPosition(offsetX, offsetY, scaleX, scaleY, clientWidth, clientHeight);
-      this.paperManager.translate(newX, newY);
+      this.newX = newX;
+      this.newY = newY;
+
+      this.paperManager.translate(this.newX, this.newY);
     },
   },
   async mounted() {
+    if (window.Cypress) {
+      window.MiniPaper = this;
+    }
+
     await this.$nextTick();
 
     this.miniMapManager = MiniMapManager.factory(this.graph, this.$refs.miniPaper);
diff --git a/src/components/miniPaper/miniPaper.scss b/src/components/miniPaper/miniPaper.scss
index 35b7868a..c5daecc8 100644
--- a/src/components/miniPaper/miniPaper.scss
+++ b/src/components/miniPaper/miniPaper.scss
@@ -1,13 +1,11 @@
-$mini-paper-container-top-position: 4.75rem;
-$mini-paper-container-right-position: 17.5rem;
-$mini-paper-container-right-expanded-position: 2rem;
-$transition: 0.3s;
+$transition: 0.1s;
 
 .mini-paper-container {
-  top: $mini-paper-container-top-position;
-  right: $mini-paper-container-right-position;
-  z-index: 2;
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  position: absolute;
+  bottom: 60px;
+  left: 0;
+  display: flex;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border: 1px solid $border-color;
   cursor: pointer;
 
@@ -15,10 +13,6 @@ $transition: 0.3s;
     pointer-events: none;
   }
 
-  &.expanded {
-    right: $mini-paper-container-right-expanded-position;
-  }
-
   &.closed {
     opacity: 0;
     visibility: hidden;
diff --git a/src/components/modeler/Modeler.vue b/src/components/modeler/Modeler.vue
index 66384b5c..b9a40da0 100644
--- a/src/components/modeler/Modeler.vue
+++ b/src/components/modeler/Modeler.vue
@@ -23,16 +23,10 @@
         :target="getTooltipTarget"
         :title="tooltipTitle"
       />
-
-      <controls
-        :nodeTypes="nodeTypes"
-        :compressed="panelsCompressed"
-        :parent-height="parentHeight"
-        :allowDrop="allowDrop"
-        @drag="validateDropTarget"
-        @handleDrop="handleDrop"
-        class="controls h-100 rounded-0 border-top-0 border-bottom-0 border-left-0"
-        :canvas-drag-position="canvasDragPosition"
+      <explorer-rail
+        :node-types="nodeTypes"
+        @set-cursor="cursor = $event"
+        @onCreateElement="onCreateElementHandler"
       />
       <b-col
         class="paper-container h-100 pr-4"
@@ -44,13 +38,6 @@
         <div ref="paper" data-test="paper" class="main-paper" />
       </b-col>
 
-      <mini-paper
-        :isOpen="miniMapOpen"
-        :paperManager="paperManager"
-        :graph="graph"
-        :class="{ 'expanded' : panelsCompressed }"
-      />
-
       <InspectorPanel
         ref="inspector-panel"
         v-show="!(highlightedNodes.length > 1)"
@@ -111,6 +98,18 @@
         @default-flow="toggleDefaultFlow"
         @shape-resize="shapeResize"
       />
+
+      <RailBottom
+        :nodeTypes="nodeTypes"
+        :paper-manager="paperManager"
+        :graph="graph"
+        :is-rendering="isRendering"
+        @load-xml="loadXML"
+        @clearSelection="clearSelection"
+        @set-cursor="cursor = $event"
+        @onCreateElement="onCreateElementHandler"
+      />
+
       <selection
         v-if="paper"
         ref="selector"
@@ -132,7 +131,7 @@ import _ from 'lodash';
 import { dia } from 'jointjs';
 import boundaryEventConfig from '../nodes/boundaryEvent';
 import BpmnModdle from 'bpmn-moddle';
-import controls from '../controls/controls';
+import ExplorerRail from '../rails/explorer-rail/explorer';
 import pull from 'lodash/pull';
 import remove from 'lodash/remove';
 import store from '@/store';
@@ -144,7 +143,6 @@ import { getNodeIdGenerator } from '../../NodeIdGenerator';
 import Process from '../inspectors/process';
 import runningInCypressTest from '@/runningInCypressTest';
 import getValidationProperties from '@/targetValidationUtils';
-import MiniPaper from '@/components/miniPaper/MiniPaper';
 import { id as laneId } from '@/components/nodes/poolLane/config';
 import { id as processId } from '@/components/inspectors/process';
 import { id as sequenceFlowId } from '../nodes/sequenceFlow';
@@ -176,19 +174,21 @@ 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,
-    controls,
+    ExplorerRail,
     InspectorPanel,
-    MiniPaper,
     ProcessmakerModelerGenericFlow,
     Selection,
+    RailBottom,
   },
   props: {
     owner: Object,
@@ -872,9 +872,15 @@ export default {
     toXML(cb) {
       this.moddle.toXML(this.definitions, { format: true }, cb);
     },
+    onCreateElementHandler({ event, control }) {
+      this.handleDrop({
+        clientX: event.clientX,
+        clientY: event.clientY,
+        control,
+      });
+    },
     async handleDrop({ clientX, clientY, control, nodeThatWillBeReplaced }) {
       this.validateDropTarget({ clientX, clientY, control });
-
       if (!this.allowDrop) {
         return;
       }
@@ -1190,7 +1196,6 @@ 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();
@@ -1202,6 +1207,7 @@ export default {
           this.$refs.selector.stopDrag(event);
         }
       }
+      window.ProcessMaker.EventBus.$emit('custom-pointerclick', event);
       this.isDragging = false;
       this.dragStart = null;
       this.isSelecting = false;
diff --git a/src/components/modeler/Selection.vue b/src/components/modeler/Selection.vue
index 78b07d80..6962c728 100644
--- a/src/components/modeler/Selection.vue
+++ b/src/components/modeler/Selection.vue
@@ -53,6 +53,7 @@ export default {
       isSelecting: false,
       isSelected: false,
       selected: [],
+      conectedLinks:[],
       dragging: false,
       style:  {
         left: '0px',
@@ -96,6 +97,7 @@ export default {
   watch: {
     // whenever selected changes
     selected(newSelected) {
+      this.prepareConectedLinks(newSelected);
       this.addToHighlightedNodes(newSelected);
     },
   },
@@ -294,6 +296,24 @@ 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
@@ -367,7 +387,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);
           }
         }
@@ -475,13 +495,27 @@ 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
@@ -632,12 +666,14 @@ 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');
       }
     },
     /**
@@ -659,6 +695,7 @@ 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();
@@ -734,7 +771,6 @@ export default {
             node: pool.component.node,
             bounds: pool.getBBox(),
           });
-          this.$emit('save-state');
         }
       }
     },
diff --git a/src/components/nodes/boundaryEvent/boundaryEvent.vue b/src/components/nodes/boundaryEvent/boundaryEvent.vue
index b37748d6..5f7de5d3 100644
--- a/src/components/nodes/boundaryEvent/boundaryEvent.vue
+++ b/src/components/nodes/boundaryEvent/boundaryEvent.vue
@@ -218,7 +218,6 @@ 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/endEvent/index.js b/src/components/nodes/endEvent/index.js
index 40f64949..f9d4e041 100644
--- a/src/components/nodes/endEvent/index.js
+++ b/src/components/nodes/endEvent/index.js
@@ -15,6 +15,43 @@ export default {
   icon: require('@/assets/toolpanel/end-event.svg'),
   label: defaultNames[id],
   rank: 30,
+  items: [
+    {
+      icon: require('@/assets/toolpanel/end-event.svg'),
+      label: defaultNames[id],
+      control: true,
+      rank: 31,
+      id: 'processmaker-modeler-end-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/message-end-event.svg'),
+      label: defaultNames['processmaker-modeler-message-end-event'],
+      control: true,
+      rank: 32,
+      id: 'processmaker-modeler-message-end-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/error-end-event.svg'),
+      label: defaultNames['processmaker-modeler-error-end-event'],
+      control: true,
+      rank: 33,
+      id: 'processmaker-modeler-error-end-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/signal-end-event.svg'),
+      label: defaultNames['processmaker-modeler-signal-end-event'],
+      control: true,
+      rank: 34,
+      id: 'processmaker-modeler-signal-end-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/terminate-end-event.svg'),
+      label: defaultNames['processmaker-modeler-terminate-end-event'],
+      control: true,
+      rank: 35,
+      id: 'processmaker-modeler-terminate-end-event',
+    },
+  ],
   definition(moddle, $t) {
     return moddle.create('bpmn:EndEvent', {
       name: $t(defaultNames[id]),
diff --git a/src/components/nodes/exclusiveGateway/index.js b/src/components/nodes/exclusiveGateway/index.js
index 07c30c94..60925a3f 100644
--- a/src/components/nodes/exclusiveGateway/index.js
+++ b/src/components/nodes/exclusiveGateway/index.js
@@ -15,6 +15,36 @@ export default {
   icon: require('@/assets/toolpanel/generic-gateway.svg'),
   label: 'Gateway',
   rank: 50,
+  items: [
+    {
+      icon: require('@/assets/toolpanel/exclusive-gateway.svg'),
+      label: 'Exclusive Gateway',
+      control: true,
+      rank: 51,
+      id: 'processmaker-modeler-exclusive-gateway',
+    },
+    {
+      icon: require('@/assets/toolpanel/inclusive-gateway.svg'),
+      label: 'Inclusive Gateway',
+      control: true,
+      rank: 52,
+      id: 'processmaker-modeler-inclusive-gateway',
+    },
+    {
+      icon: require('@/assets/toolpanel/parallel-gateway.svg'),
+      label: 'Parallel Gateway',
+      control: true,
+      rank: 53,
+      id: 'processmaker-modeler-parallel-gateway',
+    },
+    {
+      icon: require('@/assets/toolpanel/event-based-gateway.svg'),
+      label: 'Event Based Gateway',
+      control: true,
+      rank: 54,
+      id: 'processmaker-modeler-event-based-gateway',
+    },
+  ],
   definition(moddle, $t) {
     return moddle.create('bpmn:ExclusiveGateway', {
       name: $t(defaultNames[id]),
diff --git a/src/components/nodes/intermediateTimerEvent/index.js b/src/components/nodes/intermediateTimerEvent/index.js
index ca42527d..69d7e269 100644
--- a/src/components/nodes/intermediateTimerEvent/index.js
+++ b/src/components/nodes/intermediateTimerEvent/index.js
@@ -17,6 +17,50 @@ export default {
   icon: require('@/assets/toolpanel/generic-intermediate-event.svg'),
   label: 'Intermediate Event',
   rank: 20,
+  items: [
+    {
+      icon: require('@/assets/toolpanel/intermediate-timer-event.svg'),
+      label: 'Intermediate Timer Event',
+      control: true,
+      rank: 21,
+      id: 'processmaker-modeler-intermediate-catch-timer-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/intermediate-signal-catch-event.svg'),
+      label: 'Intermediate Signal Catch Event',
+      control: true,
+      rank: 22,
+      id: 'processmaker-modeler-intermediate-signal-catch-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/intermediate-signal-throw-event.svg'),
+      label: 'Intermediate Signal Throw Event',
+      control: true,
+      rank: 23,
+      id: 'processmaker-modeler-intermediate-signal-throw-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/intermediate-message-catch-event.svg'),
+      label: 'Intermediate Message Catch Event',
+      control: true,
+      rank: 24,
+      id: 'processmaker-modeler-intermediate-message-catch-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/intermediate-message-throw-event.svg'),
+      label: 'Intermediate Message Throw Event',
+      control: true,
+      rank: 25,
+      id: 'processmaker-modeler-intermediate-message-throw-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/intermediate-conditional-catch-event.svg'),
+      label: 'Intermediate Conditional Catch Event',
+      control: true,
+      rank: 26,
+      id: 'processmaker-modeler-intermediate-conditional-catch-event',
+    },
+  ],
   definition(moddle, $t) {
     return moddle.create('bpmn:IntermediateCatchEvent', {
       name: $t(defaultNames[id]),
diff --git a/src/components/nodes/startEvent/index.js b/src/components/nodes/startEvent/index.js
index bcb05721..3d1b6e2c 100644
--- a/src/components/nodes/startEvent/index.js
+++ b/src/components/nodes/startEvent/index.js
@@ -13,6 +13,49 @@ export default merge(cloneDeep(baseStartEventConfig), {
   icon: require('@/assets/toolpanel/start-event.svg'),
   label: defaultNames[id],
   rank: 10,
+  items: [
+    {
+      icon: require('@/assets/toolpanel/start-event.svg'),
+      label: defaultNames[id],
+      control: true,
+      bpmnType: 'bpmn:StartEvent',
+      rank: 10,
+      id: 'processmaker-modeler-start-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/message-start-event.svg'),
+      label: defaultNames['processmaker-modeler-message-start-event'],
+      control: true,
+      bpmnType: 'bpmn:StartEvent',
+      rank: 11,
+      id: 'processmaker-modeler-message-start-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/conditional-start-event.svg'),
+      label: defaultNames['processmaker-modeler-conditional-start-event'],
+      control: true,
+      bpmnType: 'bpmn:StartEvent',
+      rank: 12,
+      id: 'processmaker-modeler-conditional-start-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/signal-start-event.svg'),
+      label: defaultNames['processmaker-modeler-signal-start-event'],
+      control: true,
+      bpmnType: 'bpmn:StartEvent',
+      rank: 13,
+      id: 'processmaker-modeler-signal-start-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/timer-start-event.svg'),
+      label: defaultNames['processmaker-modeler-start-timer-event'],
+      control: true,
+      bpmnType: 'bpmn:StartEvent',
+      rank: 14,
+      id: 'processmaker-modeler-start-timer-event',
+
+    },
+  ],
   definition(moddle, $t) {
     return moddle.create('bpmn:StartEvent', {
       name: $t(defaultNames[id]),
diff --git a/src/components/nodes/task/index.js b/src/components/nodes/task/index.js
index 197044a0..bdafe6c8 100644
--- a/src/components/nodes/task/index.js
+++ b/src/components/nodes/task/index.js
@@ -19,6 +19,36 @@ export default {
   rank: 40,
   icon: require('@/assets/toolpanel/task.svg'),
   label: 'Task',
+  items: [
+    {
+      icon: require('@/assets/toolpanel/task.svg'),
+      label: 'Form Task',
+      control: true,
+      rank: 41,
+      id: 'processmaker-modeler-task',
+    },
+    {
+      icon: require('@/assets/toolpanel/manual-task.svg'),
+      label: 'Manual Task',
+      control: true,
+      rank: 42,
+      id: 'processmaker-modeler-manual-task',
+    },
+    {
+      icon: require('@/assets/toolpanel/script-task.svg'),
+      label: 'Script Task',
+      control: true,
+      rank: 43,
+      id: 'processmaker-modeler-script-task',
+    },
+    {
+      icon: require('@/assets/toolpanel/sub-task.svg'),
+      label: 'Sub Process',
+      control: true,
+      rank: 44,
+      id: 'processmaker-modeler-call-activity',
+    },
+  ],
   definition(moddle, $t) {
     return moddle.create('bpmn:Task', {
       name: $t(defaultNames[id]),
diff --git a/src/components/railBottom/RailBottom.vue b/src/components/railBottom/RailBottom.vue
new file mode 100644
index 00000000..4c57664c
--- /dev/null
+++ b/src/components/railBottom/RailBottom.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="rail-container" data-cy="rail-bottom">
+    <div
+      class="rail-left"
+      :style="[overlap ? { position: 'relative'} : { position: 'absolute' }]"
+      ref="railLeftBox"
+    >
+      <MiniPaperControl
+        :paper-manager="paperManager"
+        :graph="graph"
+      />
+
+      <ZoomControl
+        :paper-manager="paperManager"
+        ref="zoomBox"
+      />
+    </div>
+
+    <div
+      class="rail-center"
+      :style="[overlap ? { width: 'auto'} : { width: '100%'}]"
+    >
+      <UndoRedoControl
+        :is-rendering="isRendering"
+        @load-xml="$emit('load-xml')"
+        @clearSelection="$emit('clearSelection')"
+        ref="undoRedoBox"
+      />
+
+      <Controls
+        :nodeTypes="nodeTypes"
+        @onCreateElement="onCreateElementHandler"
+        @onSetCursor="onSetCursorHandler"
+        ref="controlBox"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { nextTick } from 'vue';
+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,
+    graph: Object,
+    isRendering: Boolean,
+    nodeTypes: Array,
+  },
+  data() {
+    return {
+      overlap: false,
+      widthOverlapControl: 0,
+      leftOverlapUndoRedo: 0,
+      controlObserver: null,
+    };
+  },
+  created() {
+    this.controlObserver = new ResizeObserver(this.onControlObserver);
+  },
+  methods: {
+    onCreateElementHandler(data){
+      this.$emit('onCreateElement', data);
+    },
+    onSetCursorHandler(data) {
+      this.$emit('set-cursor', data);
+    },
+    onControlObserver(entries) {
+      // Control coordinates
+      const controlEl = entries[0].target.getBoundingClientRect();
+      // Zoom coordinates
+      const zoomEl = this.$refs.zoomBox.$el.getBoundingClientRect();
+      // Undo/Redo coordinates
+      const undoRedoEl = this.$refs.undoRedoBox.$el.getBoundingClientRect();
+
+      // Checks overlapping
+      if (this.overlap) {
+        if (controlEl.width < this.widthOverlapControl) {
+          // Get the computed styles of the ZoomControl
+          const zoomStyles = window.getComputedStyle(this.$refs.zoomBox.$el);
+          // Calculate the total padding of the ZoomControl element
+          const zoomPadding = parseInt(zoomStyles.paddingLeft, 10) + parseInt(zoomStyles.paddingRight, 10);
+          // Get the computed styles of the RailLeftBox
+          const railLeftBoxStyles = window.getComputedStyle(this.$refs.railLeftBox);
+          // Calculate the total padding of the RailLeftBox element
+          const railLeftBoxPadding = parseInt(railLeftBoxStyles.paddingLeft, 10) + parseInt(railLeftBoxStyles.paddingRight, 10);
+          // Calculate the left position of the Controls element when it is overlapped with the UndoRedoControl and ZoomControl elements
+          const vLeft = this.leftOverlapUndoRedo + (this.widthOverlapControl - controlEl.width) - zoomPadding - railLeftBoxPadding;
+          // Checks if the left position of the Controls element when it is overlapped with the
+          // UndoRedoControl and ZoomControl elements is greater than the right position of the ZoomControl element
+          if (vLeft > zoomEl.right) {
+            this.overlap = false;
+          }
+        }
+      } else if (undoRedoEl.left < zoomEl.right) {
+        this.overlap = true;
+        this.widthOverlapControl = controlEl.width;
+        this.leftOverlapUndoRedo = undoRedoEl.left;
+      }
+    },
+  },
+  async mounted() {
+    await nextTick();
+
+    this.controlObserver.observe(this.$refs.controlBox.$el);
+  },
+};
+</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
new file mode 100644
index 00000000..6f49f756
--- /dev/null
+++ b/src/components/railBottom/controls/Controls.vue
@@ -0,0 +1,148 @@
+<template>
+  <ul
+    v-if="controls"
+    class="control-list"
+  >
+    <li
+      v-for="item in controls"
+      :class="['control-item', {'active': selectedItem === item.type}]"
+      :id="item.id"
+      :key="item.id"
+      @click.stop="onClickHandler($event, item)"
+    >
+      <SubmenuPopper
+        :data="item"
+        @clickToSubmenu="clickToSubmenuHandler"
+        :selectedItem="selectedSubmenuItem"
+        :popperType="popperType"
+      />
+    </li>
+
+    <li class="control-item">
+      <div
+        :class="{'control-add': true, 'control-active': explorerOpen}"
+        :title="$t('Add')"
+        v-b-tooltip.hover
+        @click="toggleExplorer"
+      >
+        <inline-svg :src="plusIcon" />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import InlineSvg from 'vue-inline-svg';
+import nodeTypesStore from '@/nodeTypesStore';
+import SubmenuPopper from './SubmenuPopper/SubmenuPopper.vue';
+
+export default ({
+  components: {
+    SubmenuPopper,
+    InlineSvg,
+  },
+  props: {
+    nodeTypes: Array,
+  },
+  data() {
+    return {
+      plusIcon: require('@/assets/railBottom/plus.svg'),
+      wasClicked: false,
+      element: null,
+      selectedItem: null,
+      selectedSubmenuItem: null,
+      xOffset: 0,
+      yOffset: 0,
+      movedElement: null,
+      isDragging: false,
+      helperStyles: {
+        backgroundColor:'#ffffff',
+        position: 'absolute',
+        height: '40px',
+        width: '40px',
+        zIndex: '10',
+        opacity: '0.5',
+        pointerEvents: 'none',
+      },
+      popperType: null,
+    };
+  },
+  computed: {
+    controls() {
+      return nodeTypesStore.getters.getPinnedNodeTypes;
+    },
+    explorerOpen() {
+      return nodeTypesStore.getters.getExplorerOpen;
+    },
+  },
+  methods: {
+    clickToSubmenuHandler(data){
+      window.ProcessMaker.EventBus.$off('custom-pointerclick');
+      this.wasClicked = false;
+      this.parent = this.element;
+      this.selectedSubmenuItem = data.control.type;
+      this.onClickHandler(data.event, data.control);
+    },
+    onClickHandler(event, control) {
+      this.createDraggingHelper(event, control);
+      document.addEventListener('mousemove', this.setDraggingPosition);
+      this.setDraggingPosition(event);
+      this.wasClicked = true;
+      this.element = control;
+      this.$emit('onSetCursor', 'crosshair');
+      if (!this.parent) {
+        this.selectedItem = control.type;
+        this.popperType = control.type;
+      }
+      window.ProcessMaker.EventBus.$on('custom-pointerclick', message => {
+        window.ProcessMaker.EventBus.$off('custom-pointerclick');
+        document.removeEventListener('mousemove', this.setDraggingPosition);
+        if (this.movedElement) {
+          document.body.removeChild(this.movedElement);
+        }
+        this.popperType = null;
+        this.selectedSubmenuItem = null;
+        this.selectedItem = null;
+        this.movedElement = null;
+        this.onCreateElement(message);
+      });
+    },
+    onCreateElement(event){
+      if (this.wasClicked && this.element) {
+        if (this.parent) {
+          this.parent = null;
+        }
+        this.$emit('onCreateElement', { event, control: this.element });
+        this.$emit('onSetCursor', 'none');
+        event.preventDefault();
+        this.wasClicked = false;
+      }
+    },
+    setDraggingPosition({ pageX, pageY }) {
+      this.movedElement.style.left = `${pageX}px`;
+      this.movedElement.style.top = `${pageY}px`;
+    },
+    toggleExplorer() {
+      nodeTypesStore.commit('toggleExplorer');
+      nodeTypesStore.commit('clearFilteredNodes');
+    },
+    createDraggingHelper(event, control) {
+      if (this.movedElement) {
+        document.removeEventListener('mousemove', this.setDraggingPosition);
+        document.body.removeChild(this.movedElement);
+        this.movedElement = null;
+      }
+      const sourceElement = event.target;
+      this.movedElement = document.createElement('img');
+      Object.keys(this.helperStyles).forEach((property) => {
+        this.movedElement.style[property] = this.helperStyles[property];
+      });
+      this.movedElement.src = control.icon;
+      document.body.appendChild(this.movedElement);
+      this.xOffset = event.clientX - sourceElement.getBoundingClientRect().left;
+      this.yOffset = event.clientY - sourceElement.getBoundingClientRect().top;
+    },
+  },
+});
+</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
new file mode 100644
index 00000000..d829b43f
--- /dev/null
+++ b/src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue
@@ -0,0 +1,188 @@
+<template>
+  <popper
+    v-if="data.items"
+    trigger="clickToOpen"
+    :options="{
+      placement: 'top',
+      modifiers: { offset: { offset: '0,20px' } }
+    }"
+    :visible-arrow=false
+    :force-show="popperType === data.type"
+  >
+    <div>
+      <ul class="control-submenu">
+        <li v-for="(item, key) in data.items"
+          :class="['control-submenu-list', {'active': selectedItem === item.type}]"
+          :key="key"
+          @click="onClickHandler($event, item)"
+        >
+          <inline-svg :src="item.icon" :alt=item.label />
+          <div class="control-submenu-list-label">
+            {{ item.label }}
+          </div>
+        </li>
+      </ul>
+    </div>
+    <a
+      class="control-submenu-item "
+      slot="reference"
+      :alt=data.label
+      :title="$t(data.label)"
+      v-b-tooltip.hover
+    >
+      <div class="control-submenu-options">
+        <span />
+      </div>
+
+      <inline-svg :src="data.icon" />
+    </a>
+  </popper>
+  <a v-else class="control-submenu-item"
+    :alt=data.label
+    :title="$t(data.label)"
+    v-b-tooltip.hover
+  >
+    <inline-svg :src=data.icon />
+  </a>
+</template>
+
+<script>
+import Popper from 'vue-popperjs';
+import 'vue-popperjs/dist/vue-popper.css';
+import InlineSvg from 'vue-inline-svg';
+
+export default ({
+  props: {
+    data: { type: Object },
+    selectedItem: { type: String },
+    popperType: { type: String },
+  },
+  components: {
+    Popper,
+    InlineSvg,
+  },
+  data() {
+    return {
+      wasClickedSubmenu: false,
+      element: null,
+      wasClicked: false,
+    };
+  },
+  methods: {
+    onClickHandler(event, control) {
+      event.stopPropagation();
+      this.$emit('clickToSubmenu', { event, control });
+    },
+  },
+});
+
+</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;
+  &-item {
+    & > svg {
+      width: 24px;
+      height: 24px;
+    }
+    &.active {
+      background-color: #EBEEF2;
+    }
+  }
+  &-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 12px 5px;
+    gap: 8px;
+    width: 235px;
+    height: 40px;
+    flex: none;
+    order: 0;
+    align-self: stretch;
+    flex-grow: 0;
+
+    &.active {
+      background-color: #DEEBFF;
+
+      & svg {
+        fill: #1264AA;
+      }
+    }
+    &:hover {
+      background-color: #EBEEF2;
+    }
+
+    & > svg {
+      width: 24px;
+      height: 24px;
+    }
+    &-label{
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 21px;
+      letter-spacing: -0.02em;
+      color: #000000;
+    }
+  }
+  &-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;
+    }
+
+    & ~ svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+.is-dragging {
+  background: $primary-color;
+  color: $primary-white;
+  position: absolute;
+  z-index: 10;
+  box-shadow: 5px 5px 8px 0px #0000004a;
+  padding: 0.5rem;
+  pointer-events: none;
+  width: 40px;
+  height: 40px;
+  background: green;
+  &.no-drop {
+    opacity: 0.8;
+    cursor: no-drop;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background-color: $primary-color;
+    color: $primary-white;
+    pointer-events: none;
+  }
+}
+
+</style>
diff --git a/src/components/railBottom/controls/controls.scss b/src/components/railBottom/controls/controls.scss
new file mode 100644
index 00000000..bcb951fe
--- /dev/null
+++ b/src/components/railBottom/controls/controls.scss
@@ -0,0 +1,98 @@
+.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-color: #ebeef2;
+    }
+
+    &.active {
+      background-color: #D4D7F4;
+
+      &::v-deep a > svg {
+        fill: #1264AA;
+      }
+    }
+
+    &-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;
+
+    & > svg {
+      fill: #ffffff;
+    }
+  }
+}
+
+.is-dragging {
+  color: $primary-white;
+  position: absolute;
+  z-index: 10;
+  box-shadow: 5px 5px 8px 0px #0000004a;
+  padding: 0.5rem;
+  pointer-events: none;
+  width: 40px;
+  height: 40px;
+  background-color: green;
+  &.no-drop {
+    opacity: 0.8;
+    cursor: no-drop;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background-color: $primary-color;
+    color: $primary-white;
+    pointer-events: none;
+  }
+}
diff --git a/src/components/railBottom/miniPaperControl/MiniPaperControl.vue b/src/components/railBottom/miniPaperControl/MiniPaperControl.vue
new file mode 100644
index 00000000..4edc98f1
--- /dev/null
+++ b/src/components/railBottom/miniPaperControl/MiniPaperControl.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="mini-paper-box">
+    <button
+      type="button"
+      class="mini-paper-button"
+      :class="miniMapOpen ? 'mini-paper-button-active' : ''"
+      data-cy="mini-paper-button"
+      @click="miniMapOpen = !miniMapOpen"
+      v-b-tooltip.hover
+      :title="miniMapOpen ? $t('Hide Mini-Map') : $t('Show Mini-Map')"
+    >
+      <inline-svg :src="miniMapIcon" />
+    </button>
+
+    <mini-paper
+      :isOpen="miniMapOpen"
+      :paperManager="paperManager"
+      :graph="graph"
+    />
+  </div>
+</template>
+
+<script>
+import InlineSvg from 'vue-inline-svg';
+import MiniPaper from '@/components/miniPaper/MiniPaper.vue';
+
+export default ({
+  components: {
+    InlineSvg,
+    MiniPaper,
+  },
+  props: {
+    paperManager: Object,
+    graph: Object,
+  },
+  data() {
+    return {
+      miniMapOpen: false,
+      miniMapIcon: 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
new file mode 100644
index 00000000..eb0474eb
--- /dev/null
+++ b/src/components/railBottom/miniPaperControl/miniPaperControl.scss
@@ -0,0 +1,45 @@
+.mini-paper {
+  &-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 48px;
+    margin-right: 14px;
+    padding: 6px 4px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    padding: 10px;
+    background-color: #ffffff;
+    border: 0 none;
+    border-radius: 4px;
+    cursor: pointer;
+
+    & > svg {
+      fill: #333344;
+    }
+
+    &:hover:not(.mini-paper-button-active) {
+      background-color: #ebeef2;
+    }
+
+    &:active,
+    &-active {
+      background-color: #DEEBFF;
+
+      & > svg {
+        fill: #1264AA;
+      }
+    }
+  }
+
+}
diff --git a/src/components/railBottom/railBottom.scss b/src/components/railBottom/railBottom.scss
new file mode 100644
index 00000000..f2d8562c
--- /dev/null
+++ b/src/components/railBottom/railBottom.scss
@@ -0,0 +1,28 @@
+.rail {
+  &-container {
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    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
new file mode 100644
index 00000000..9c7103f2
--- /dev/null
+++ b/src/components/railBottom/undoRedoControl/UndoRedoControl.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="ur-box">
+    <button type="button"
+      class="ur-button"
+      data-cy="undo-control"
+      :disabled="!canUndo"
+      v-b-tooltip.hover
+      :title="$t('Undo')"
+      @click="undo"
+    >
+      <inline-svg :src="undoIcon" />
+    </button>
+
+    <button type="button"
+      class="ur-button"
+      data-cy="redo-control"
+      :disabled="!canRedo"
+      v-b-tooltip.hover
+      :title="$t('Redo')"
+      @click="redo"
+    >
+      <inline-svg :src="redoIcon" />
+    </button>
+  </div>
+</template>
+
+<script>
+import InlineSvg from 'vue-inline-svg';
+import undoRedoStore from '@/undoRedoStore';
+
+export default ({
+  components: {
+    InlineSvg,
+  },
+  props: {
+    isRendering: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      undoIcon: require('@/assets/railBottom/undo.svg'),
+      redoIcon: require('@/assets/railBottom/redo.svg'),
+    };
+  },
+  watch: {
+    canUndo(canUndo) {
+      if (!canUndo) {
+        this.$root.$emit('bv::hide::tooltip');
+      }
+    },
+    canRedo(canRedo) {
+      if (!canRedo) {
+        this.$root.$emit('bv::hide::tooltip');
+      }
+    },
+  },
+  computed: {
+    canUndo() {
+      return undoRedoStore.getters.canUndo;
+    },
+    canRedo() {
+      return undoRedoStore.getters.canRedo;
+    },
+  },
+  methods: {
+    undo() {
+      this.$emit('clearSelection');
+      if (this.isRendering) {
+        return;
+      }
+      undoRedoStore
+        .dispatch('undo')
+        .then(() => this.$emit('load-xml'));
+    },
+    redo() {
+      this.$emit('clearSelection');
+      if (this.isRendering) {
+        return;
+      }
+      undoRedoStore
+        .dispatch('redo')
+        .then(() => this.$emit('load-xml'));
+    },
+  },
+});
+</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
new file mode 100644
index 00000000..f29d2ce9
--- /dev/null
+++ b/src/components/railBottom/undoRedoControl/undoRedoControl.scss
@@ -0,0 +1,51 @@
+.ur {
+  &-box {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 6px 4px;
+    background-color: #FFFFFF;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    z-index: 2;
+  }
+
+  &-button {
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    padding: 12px;
+    background-color: #ffffff;
+    border: 0 none;
+    border-radius: 4px;
+    color: #333344;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ebeef2;
+    }
+
+    &:active {
+      background-color: #DEEBFF;
+
+      & > svg {
+        fill: #1264AA;
+      }
+    }
+
+    &:disabled {
+      background-color: #ffffff;
+      color: #7e7e92;
+      cursor: not-allowed;
+    }
+
+    & > svg {
+      width: 24px;
+      height: 24px;
+      fill: #333344;
+    }
+  }
+}
diff --git a/src/components/railBottom/zoomControl/ZoomControl.vue b/src/components/railBottom/zoomControl/ZoomControl.vue
new file mode 100644
index 00000000..c0e42a03
--- /dev/null
+++ b/src/components/railBottom/zoomControl/ZoomControl.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="zoom-box">
+    <button
+      type="button"
+      class="zoom-button"
+      data-cy="zoom-out-control"
+      @click="onClickZoomOut"
+      v-b-tooltip.hover
+      :title="$t('Zoom Out')"
+    >
+      <inline-svg :src="minusIcon" />
+    </button>
+
+    <button
+      v-if="paperManager"
+      @click="onClickReset"
+      class="zoom-button zoom-reset"
+      data-cy="zoom-reset-control"
+      v-b-tooltip.hover
+      :title="$t('Reset to initial scale')"
+    >
+      {{ percentageText }}
+    </button>
+
+    <button
+      type="button"
+      class="zoom-button"
+      data-cy="zoom-in-control"
+      @click="onClickZoomIn"
+      v-b-tooltip.hover
+      :title="$t('Zoom In')"
+    >
+      <inline-svg :src="plusIcon" />
+    </button>
+  </div>
+</template>
+
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default ({
+  components: {
+    InlineSvg,
+  },
+  props: {
+    paperManager: Object,
+  },
+  data() {
+    return {
+      initialScale: 1,
+      minimumScale: 0.2,
+      scaleStep: 0.1,
+      minusIcon: require('@/assets/railBottom/minus.svg'),
+      plusIcon: require('@/assets/railBottom/plus.svg'),
+    };
+  },
+  computed: {
+    percentageText() {
+      return `${Math.round(this.$props.paperManager.scale.sx * 100)}%`;
+    },
+  },
+  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;
+    },
+    onClickReset() {
+      this.paperManager.scale = this.initialScale;
+    },
+  },
+});
+
+</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
new file mode 100644
index 00000000..b93b9b6e
--- /dev/null
+++ b/src/components/railBottom/zoomControl/zoomControl.scss
@@ -0,0 +1,66 @@
+.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 {
+    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;
+    }
+  }
+
+  &-reset {
+    padding: {
+      left: 24px;
+      right: 24px;
+    };
+    font-size: 14px;
+    font-weight: 700;
+    user-select: none;
+
+    &:active {
+      color: #1264AA;
+    }
+  }
+}
diff --git a/src/components/rails/explorer-rail/explorer-rail.scss b/src/components/rails/explorer-rail/explorer-rail.scss
new file mode 100644
index 00000000..624cc706
--- /dev/null
+++ b/src/components/rails/explorer-rail/explorer-rail.scss
@@ -0,0 +1,55 @@
+$controls-column-max-width: 340px;
+$controls-transition: 0.3s;
+$secondary-color-nav: #6c757d;
+
+#explorer-rail {
+	overflow: hidden;
+	max-width: $controls-column-max-width;
+	background-color: white;
+	width: 100%;
+	height: 80%;
+	transition: all $controls-transition ease-out;
+	z-index: 2;
+	border-radius: 4px;
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+	padding-left: 1rem;
+	overflow-y: auto;
+}
+
+.rail-menu {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.5rem 0;
+	.nav-link {
+		color: $secondary-color-nav;
+		&.active {
+			font-weight: bold;
+			border-bottom: 2px solid #1572C2;
+			color: #000;
+		}
+	}
+
+	.close--container {
+		width: 50px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 40px;
+		&:hover {
+			cursor: pointer;
+		}
+	}
+}
+
+.node-types {
+	&__container {
+		padding: 0.5rem 1rem;
+		p {
+			font-size: 13px;
+			line-height: 19px;
+			color: #000;
+		}
+	}
+}
+
diff --git a/src/components/rails/explorer-rail/explorer.vue b/src/components/rails/explorer-rail/explorer.vue
new file mode 100644
index 00000000..9a86906b
--- /dev/null
+++ b/src/components/rails/explorer-rail/explorer.vue
@@ -0,0 +1,93 @@
+<script>
+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',
+  props: {
+    explorerExpanded: {
+      type: Boolean,
+    },
+    nodeTypes: {
+      type: Array,
+    },
+  },
+  components: {
+    FontAwesomeIcon,
+    FilterNodeTypes,
+    NodeTypesLoop,
+  },
+  data() {
+    return {
+      tabs: [{
+        idx: 0,
+        label: 'Add Object',
+      }, {
+        idx: 1,
+        label: 'PM Blocks',
+      }],
+      tabIndex: 0,
+    };
+  },
+  computed: {
+    explorerOpen() {
+      return nodeTypesStore.getters.getExplorerOpen;
+    },
+  },
+  created() {
+    nodeTypesStore.commit('setNodeTypes', this.nodeTypes);
+  },
+  methods: {
+    faTimes() {
+      return faTimes;
+    },
+    /**
+     * @param {string} idx
+     * @return void
+     */
+    setTabIndex(idx) {
+      if (this.tabIndex === idx) return;
+      this.tabIndex = idx;
+      this.clearFilteredObjects();
+    },
+    closeRail() {
+      nodeTypesStore.commit('closeExplorer');
+      this.clearFilteredObjects();
+    },
+    clearFilteredObjects() {
+      nodeTypesStore.commit('clearFilteredNodes');
+    },
+  },
+};
+</script>
+
+<template>
+  <div id="explorer-rail" data-test="explorer-rail" v-if="explorerOpen">
+    <div class="rail-menu">
+      <b-tabs class="tabs--container" :no-nav-style="true">
+        <template v-for="tab in tabs">
+          <b-tab :title="$t(tab.label)" :active="tab.idx === tabIndex"
+            @click="setTabIndex(tab.idx)" :key="tab.idx"
+          />
+        </template>
+      </b-tabs>
+      <div class="close--container" @click="closeRail()">
+        <font-awesome-icon :icon="faTimes()"/>
+      </div>
+    </div>
+    <div class="node-types__container" v-if="tabIndex === 0">
+      <filter-node-types />
+      <node-types-loop
+        v-on="$listeners"
+      />
+    </div>
+    <div class="pm-blocks__container">
+      <!--   Here goes the PM Blocks   -->
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="./explorer-rail.scss"></style>
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..1ebd4cbb
--- /dev/null
+++ b/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue
@@ -0,0 +1,234 @@
+<script>
+import pinIcon from '@/assets/pin-angle.svg';
+import pinFillIcon from '@/assets/pin-angle-fill.svg';
+import nodeTypesStore from '@/nodeTypesStore';
+
+export default {
+  name: 'NodeTypesLoop',
+  data() {
+    return {
+      pinIcon,
+      pinFillIcon,
+      showPin: false,
+      wasClicked: false,
+      element: null,
+      selectedItem: null,
+      xOffset: 0,
+      yOffset: 0,
+      movedElement: null,
+      helperStyles: {
+        backgroundColor:'#ffffff',
+        position: 'absolute',
+        height: '40px',
+        width: '40px',
+        zIndex: '10',
+        opacity: '0.5',
+        pointerEvents: 'none',
+      },
+    };
+  },
+  created() {
+    nodeTypesStore.dispatch('getUserPinnedObjects');
+  },
+  methods: {
+    nodeTypeAlreadyPinned(object, type) {
+      return !!this.pinnedObjects.find(obj => obj.type === type);
+    },
+    unPin(object) {
+      return nodeTypesStore.dispatch('removeUserPinnedObject', object);
+    },
+    addPin(object) {
+      return nodeTypesStore.dispatch('addUserPinnedObject', object);
+    },
+    onClickHandler(event, control) {
+      this.createDraggingHelper(event, control);
+      document.addEventListener('mousemove', this.setDraggingPosition);
+      this.setDraggingPosition(event);
+      // Deselect control on click if same control is already selected
+      if (this.selectedItem === control.type) {
+        document.removeEventListener('mousemove', this.setDraggingPosition);
+        document.body.removeChild(this.movedElement);
+        this.$emit('onSetCursor', 'none');
+        this.selectedItem = null;
+        this.movedElement = null;
+        this.wasClicked = false;
+        return;
+      }
+      this.wasClicked = true;
+      this.element = control;
+      this.$emit('onSetCursor', 'crosshair');
+      this.selectedItem = control.type;
+      window.ProcessMaker.EventBus.$on('custom-pointerclick', message => {
+        window.ProcessMaker.EventBus.$off('custom-pointerclick');
+        document.removeEventListener('mousemove', this.setDraggingPosition);
+        if (this.movedElement) {
+          document.body.removeChild(this.movedElement);
+        }
+        this.selectedItem = null;
+        this.movedElement = null;
+        this.onCreateElement(message);
+      });
+    },
+    createDraggingHelper(event, control) {
+      if (this.movedElement) {
+        document.removeEventListener('mousemove', this.setDraggingPosition);
+        document.body.removeChild(this.movedElement);
+        this.movedElement = null;
+      }
+      const sourceElement = event.target;
+      this.movedElement = document.createElement('img');
+      Object.keys(this.helperStyles).forEach((property) => {
+        this.movedElement.style[property] = this.helperStyles[property];
+      });
+      this.movedElement.src = control.icon;
+      document.body.appendChild(this.movedElement);
+      this.xOffset = event.clientX - sourceElement.getBoundingClientRect().left;
+      this.yOffset = event.clientY - sourceElement.getBoundingClientRect().top;
+    },
+    setDraggingPosition({ pageX, pageY }) {
+      this.movedElement.style.left = pageX  + 'px';
+      this.movedElement.style.top = pageY + 'px';
+    },
+    onCreateElement(event){
+      if (this.wasClicked && this.element) {
+        this.$emit('onCreateElement', { event, control: this.element });
+        this.$emit('onSetCursor', 'none');
+        event.preventDefault();
+        this.wasClicked = false;
+      }
+    },
+  },
+  computed: {
+    pinnedObjects() {
+      return nodeTypesStore.getters.getPinnedNodeTypes;
+    },
+    objects() {
+      return nodeTypesStore.getters.getNodeTypes;
+    },
+    unpinnedObjects() {
+      const objects = this.objects;
+      return objects.filter((obj) => !this.pinnedObjects.some(pinnedObj => pinnedObj.type === obj.type));
+    },
+    filteredNodes() {
+      return nodeTypesStore.getters.getFilteredNodeTypes;
+    },
+    searchTerm() {
+      return nodeTypesStore.getters.getSearchTerm;
+    },
+  },
+};
+</script>
+
+<template>
+  <div id="nodeTypesList">
+    <div id="filteredNodes-container" v-if="filteredNodes.length > 0">
+      <template v-for="object in filteredNodes">
+        <div
+          class="node-types__item"
+          :key="object.id"
+          @mouseover="showPin = true"
+          @mouseleave="showPin = false"
+          @click.stop="onClickHandler($event, object)"
+        >
+          <img class="node-types__item__icon" :src="object.icon" :alt="$t(object.label)">
+          <span>{{ $t(object.label) }}</span>
+          <img
+            v-if="nodeTypeAlreadyPinned(object, object.type)"
+            :src="pinFillIcon"
+            class="pinIcon"
+            alt="Unpin Element"
+            @click="unPin(object)"
+          >
+          <img
+            v-else
+            :src="pinIcon"
+            class="pinIcon"
+            alt="Pin Element"
+            @click="addPin(object)"
+          >
+        </div>
+      </template>
+    </div>
+    <template v-if="filteredNodes.length === 0 && !searchTerm">
+      <div class="pinnedObjects" v-if="pinnedObjects.length > 0">
+        <p>{{ $t('Pinned Objects') }}</p>
+        <template v-for="pinnedObject in pinnedObjects">
+          <div
+            class="node-types__item"
+            :key="pinnedObject.id"
+            @mouseover="showPin = true"
+            @mouseleave="showPin = false"
+            @click.stop="onClickHandler($event, pinnedObject)"
+          >
+            <img class="node-types__item__icon" :src="pinnedObject.icon" :alt="$t(pinnedObject.label)">
+            <span>{{ $t(pinnedObject.label) }}</span>
+            <img
+              :src="pinFillIcon"
+              class="pinIcon"
+              alt="Pin/Unpin Element"
+              @click="unPin(pinnedObject)"
+            >
+          </div>
+        </template>
+      </div>
+      <div class="objectCategory">
+        <p>{{ $t('Object Category') }}</p>
+        <template v-for="nodeType in unpinnedObjects">
+          <div
+            class="node-types__item"
+            :key="nodeType.id"
+            @mouseover="showPin = true"
+            @mouseleave="showPin = false"
+            @click.stop="onClickHandler($event, nodeType)"
+          >
+            <img class="node-types__item__icon" :src="nodeType.icon" :alt="$t(nodeType.label)">
+            <span>{{ $t(nodeType.label) }}</span>
+            <img
+              :src="pinIcon"
+              class="pinIcon"
+              alt="Pin/Unpin Element"
+              @click="addPin(nodeType)"
+            >
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss">
+#nodeTypesList {
+  .pinnedObjects {
+    margin-bottom: 1rem;
+  }
+}
+.node-types {
+  &__item {
+    display: flex;
+    padding: 0.5rem 0.3rem;
+    align-items: center;
+    border-radius: 4px;
+    user-select: none;
+    &:hover {
+      background-color: #EBEEF2;
+      .pinIcon {
+        background-color: #DADDDF;
+      }
+    }
+    &__icon {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    span {
+      margin-left: 0.8rem;
+      font-size: 13px;
+      line-height: 19px;
+    }
+    .pinIcon {
+      margin-left: auto;
+      border-radius: 4px;
+      padding: 0.3rem;
+    }
+  }
+}
+</style>
diff --git a/src/components/rails/explorer-rail/rankConstants.js b/src/components/rails/explorer-rail/rankConstants.js
new file mode 100644
index 00000000..beca552f
--- /dev/null
+++ b/src/components/rails/explorer-rail/rankConstants.js
@@ -0,0 +1,1 @@
+export const BOTTOM = 5000;
diff --git a/src/components/toolbar/ToolBar.vue b/src/components/toolbar/ToolBar.vue
index e30fa5a2..0c7bbb13 100644
--- a/src/components/toolbar/ToolBar.vue
+++ b/src/components/toolbar/ToolBar.vue
@@ -7,62 +7,6 @@
       <div class="mr-3">
         <align-buttons @save-state="$emit('save-state')" />
 
-        <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Undo/redo controls">
-          <b-button
-            class="btn btn-sm btn-secondary btn-undo"
-            :disabled="!canUndo"
-            data-test="undo"
-            v-b-tooltip.hover
-            :title="$t('Undo')"
-            @click="undo"
-          >
-            <font-awesome-icon :icon="undoIcon" />
-          </b-button>
-
-          <b-button
-            class="btn btn-sm btn-secondary btn-redo"
-            :disabled="!canRedo"
-            data-test="redo"
-            v-b-tooltip.hover
-            :title="$t('Redo')"
-            @click="redo"
-          >
-            <font-awesome-icon :icon="redoIcon" />
-          </b-button>
-        </div>
-
-        <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Zoom controls">
-          <b-button
-            class="btn btn-sm btn-secondary"
-            @click="paperManager.scale = paperManager.scale.sx + scaleStep"
-            data-test="zoom-in"
-            v-b-tooltip.hover
-            :title="$t('Zoom In')"
-          >
-            <font-awesome-icon :icon="plusIcon" />
-          </b-button>
-          <b-button
-            class="btn btn-sm btn-secondary"
-            @click="paperManager.scale = Math.max(minimumScale, paperManager.scale.sx -= scaleStep)"
-            data-test="zoom-out"
-            v-b-tooltip.hover
-            :title="$t('Zoom Out')"
-          >
-            <font-awesome-icon :icon="minusIcon" />
-          </b-button>
-          <b-button
-            v-if="paperManager"
-            class="btn btn-sm btn-secondary"
-            @click="paperManager.scale = initialScale"
-            :disabled="paperManager.scale.sx === initialScale"
-            data-test="zoom-reset"
-            v-b-tooltip.hover
-            :title="$t('Reset to initial scale')"
-          >
-            {{ $t('Reset') }}
-          </b-button>
-          <span v-if="paperManager" class="btn btn-sm btn-secondary scale-value">{{ Math.round(paperManager.scale.sx*100) }}%</span>
-        </div>
 
         <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Additional controls">
           <b-button
@@ -74,16 +18,6 @@
           >
             <font-awesome-icon :icon="panelsCompressed ? expandIcon : compressIcon" />
           </b-button>
-
-          <b-button
-            class="btn btn-sm btn-secondary mini-map-btn ml-auto"
-            data-test="mini-map-btn"
-            @click="miniMapOpen = !miniMapOpen"
-            v-b-tooltip.hover
-            :title="miniMapOpen ? $t('Hide Mini-Map') : $t('Show Mini-Map')"
-          >
-            <font-awesome-icon :icon="miniMapOpen ? minusIcon : mapIcon" />
-          </b-button>
         </div>
         <div class="btn-group btn-group-sm" role="group" aria-label="Publish controls">
           <template v-if="isVersionsInstalled">
diff --git a/src/main.js b/src/main.js
index 0f1ced08..da62ab47 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,11 +12,17 @@ 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 1c979c51..1c3a7446 100644
--- a/src/mixins/linkConfig.js
+++ b/src/mixins/linkConfig.js
@@ -118,14 +118,23 @@ export default {
       const targetShape = this.shape.getTargetElement();
       resetShapeColor(targetShape);
 
-      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);
+      this.shape.on('change:vertices', this.onChangeVertices);
 
       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
new file mode 100644
index 00000000..5cec4274
--- /dev/null
+++ b/src/nodeTypesStore.js
@@ -0,0 +1,118 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { uniqueId, uniqBy } from 'lodash';
+import { BOTTOM } from '@/components/rails/explorer-rail/rankConstants';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    nodeTypes: [],
+    pinnedNodeTypes: [],
+    filteredNodeTypes: [],
+    explorerOpen: false,
+    searchTerm: '',
+  },
+  getters: {
+    getNodeTypes: state => state.nodeTypes,
+    getPinnedNodeTypes: state => state.pinnedNodeTypes,
+    getFilteredNodeTypes: state => state.filteredNodeTypes,
+    getExplorerOpen: state => state.explorerOpen,
+    getSearchTerm: state => state.searchTerm,
+  },
+  mutations: {
+    setNodeTypes(state, nodeTypes) {
+      state.nodeTypes = nodeTypes
+        .filter(nodeType => nodeType.control)
+        .map(nodeType => ({
+          id: uniqueId('nodeType_'),
+          type: nodeType.id,
+          icon: nodeType.icon,
+          label: nodeType.label,
+          bpmnType: nodeType.bpmnType,
+          rank: nodeType.rank || BOTTOM,
+          items: nodeType.items?.map(item => ({ ...item, type: item.id })),
+        }))
+        .sort((node1, node2) => node1.rank - node2.rank);
+    },
+    setPinnedNodes(state, payload) {
+      state.pinnedNodeTypes.push(payload);
+      state.pinnedNodeTypes.sort((node1, node2) => node1.rank - node2.rank);
+    },
+    setUnpinNode(state, payload) {
+      state.pinnedNodeTypes = state.pinnedNodeTypes.filter(node => node !== payload);
+    },
+    setFilteredNodeTypes(state, searchTerm) {
+      const pinnedNodeTypes = state.pinnedNodeTypes;
+      const nodeTypes = state.nodeTypes;
+      state.searchTerm = searchTerm;
+      const allNodes = uniqBy([...pinnedNodeTypes, ...nodeTypes], 'id');
+      state.filteredNodeTypes = allNodes.filter(node => {
+        return node.label.toLowerCase().includes(searchTerm.toLowerCase());
+      });
+    },
+    clearFilteredNodes(state) {
+      state.filteredNodeTypes = [];
+      state.searchTerm = '';
+    },
+    closeExplorer(state) {
+      state.explorerOpen = false;
+    },
+    toggleExplorer(state) {
+      state.explorerOpen = !state.explorerOpen;
+    },
+  },
+  actions: {
+    getUserPinnedObjects({ commit }) {
+      if (!window.ProcessMaker.user) {
+        // For standalone version of Modeler
+        const pinnedNodes = localStorage.pinnedNodes ? JSON.parse(localStorage.pinnedNodes) : [] ;
+        pinnedNodes.forEach(node => {
+          commit('setPinnedNodes', node);
+        });
+        return;
+      }
+      const user = window.ProcessMaker.user ? window.ProcessMaker.user.id : '';
+      window.ProcessMaker.apiClient.get(`/users/${user}/get_pinnned_controls`)
+        .then(({ data }) => {
+          data.forEach(node => {
+            commit('setPinnedNodes', node);
+          });
+        })
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        });
+    },
+    addUserPinnedObject({ commit, state }, pinnedNode) {
+      commit('setPinnedNodes', pinnedNode);
+      const pinnedNodes = state.pinnedNodeTypes;
+      if (!window.ProcessMaker.user) {
+        // For standalone version of Modeler
+        localStorage.pinnedNodes = JSON.stringify(pinnedNodes);
+        return;
+      }
+      const user = window.ProcessMaker.user ? window.ProcessMaker.user.id : '';
+      window.ProcessMaker.apiClient.put(`/users/${user}/update_pinned_controls`, { pinnedNodes })
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        });
+    },
+    removeUserPinnedObject({ commit, state }, nodeToUnpin) {
+      commit('setUnpinNode', nodeToUnpin);
+      const pinnedNodes = state.pinnedNodeTypes;
+      if (!window.ProcessMaker.user) {
+        // For standalone version of Modeler
+        localStorage.pinnedNodes = JSON.stringify(pinnedNodes);
+        return;
+      }
+      const user = window.ProcessMaker.user ? window.ProcessMaker.user.id : '';
+      window.ProcessMaker.apiClient.put(`/users/${user}/update_pinned_controls`, { pinnedNodes })
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        });
+    },
+  },
+});


Test patch:
diff --git a/tests/e2e/specs/bottonControlClickAnddrop/CreateElemenyClickAndDrop.spec.js b/tests/e2e/specs/bottonControlClickAnddrop/CreateElemenyClickAndDrop.spec.js
new file mode 100644
index 00000000..345ad567
--- /dev/null
+++ b/tests/e2e/specs/bottonControlClickAnddrop/CreateElemenyClickAndDrop.spec.js
@@ -0,0 +1,23 @@
+
+import {
+  clickAndDropElement,
+  waitToRenderAllShapes,
+} from '../../support/utils';
+import { nodeTypes } from '../../support/constants';
+describe('Create Element' , () => {
+  it('Verify if the number of the created elements is right', () => {
+    const startEventPosition = { x: 100, y: 100 };
+    const taskFormPosition = {
+      x: startEventPosition.x + 200,
+      y: startEventPosition.y,
+    };
+    clickAndDropElement(nodeTypes.task, taskFormPosition);
+    clickAndDropElement(nodeTypes.startEvent, startEventPosition);
+    waitToRenderAllShapes();
+    cy.get('.paper-container')
+      .then(($paper) => {
+        const elements = $paper.find('.joint-element');
+        cy.wrap(elements).should('have.length', 3);
+      });
+  });
+});
\ No newline at end of file
diff --git a/tests/e2e/specs/miniPaperControl/MiniPaperControl.spec.js b/tests/e2e/specs/miniPaperControl/MiniPaperControl.spec.js
new file mode 100644
index 00000000..30b6429a
--- /dev/null
+++ b/tests/e2e/specs/miniPaperControl/MiniPaperControl.spec.js
@@ -0,0 +1,82 @@
+import { waitToRenderAllShapes } from '../../support/utils';
+
+describe('Mini Paper control test', () => {
+  const miniPaperSelector = '[data-cy="mini-paper-button"]';
+  const miniMapSelector = '[data-cy="mini-map-box"]';
+
+  const positions = [
+    {
+      offsetX: 28,
+      offsetY: 30,
+    },
+    {
+      offsetX: 98,
+      offsetY: 140,
+    },
+    {
+      offsetX: 40,
+      offsetY: 60,
+    },
+  ];
+
+  it('should render new mini-paper button', () => {
+    waitToRenderAllShapes();
+
+    cy.get(miniPaperSelector)
+      .should('be.visible')
+      .then(($btn) => {
+        // Checks button style
+        expect($btn).to.have.css('background-color', 'rgb(255, 255, 255)');
+
+        // Checks button icon style
+        const icon = $btn.children('svg');
+        expect(icon).to.have.css('fill', 'rgb(51, 51, 68)');
+
+        // Checks if mini-map is closed
+        cy.get(miniMapSelector).should('have.class', 'closed');
+      });
+  });
+
+  it('should show mini-map', () => {
+    waitToRenderAllShapes();
+
+    cy.get(miniPaperSelector)
+      .should('be.visible')
+      .click()
+      .then(($btn) => {
+        // Checks button active style
+        expect($btn).to.have.css('background-color', 'rgb(222, 235, 255)');
+
+        // Checks if button icon active style
+        const icon = $btn.children('svg');
+        expect(icon).to.have.css('fill', 'rgb(18, 100, 170)');
+
+        // Checks if mini-map is open
+        cy.get(miniMapSelector)
+          .should('have.class', 'opened');
+      });
+  });
+
+  positions.forEach(position => {
+    it(`should update the paper according the mini-paper control (${position.offsetX} - ${position.offsetY}) selection`, () => {
+      waitToRenderAllShapes();
+
+      cy.get(miniPaperSelector)
+        .should('be.visible')
+        .click()
+        .then(() => {
+          // Checks if mini-map is open
+          cy.get(miniMapSelector)
+            .should('have.class', 'opened')
+            .click(position.offsetX, position.offsetY)
+            .then(() => {
+              // Checks if the new coordinates are the correct ones
+              cy.window().then(win => {
+                expect(win.MiniPaper.newX).to.equal(win.store.state.paper.localToPaperPoint().x);
+                expect(win.MiniPaper.newY).to.equal(win.store.state.paper.localToPaperPoint().y);
+              });
+            });
+        });
+    });
+  });
+});
diff --git a/tests/e2e/specs/undoRedoControl/UndoRedoControl.spec.js b/tests/e2e/specs/undoRedoControl/UndoRedoControl.spec.js
new file mode 100644
index 00000000..05c6c57c
--- /dev/null
+++ b/tests/e2e/specs/undoRedoControl/UndoRedoControl.spec.js
@@ -0,0 +1,139 @@
+import { nodeTypes } from '../../support/constants';
+import {
+  dragFromSourceToDest,
+  waitToRenderAllShapes,
+  getGraphElements,
+  getElementAtPosition,
+  getCrownButtonForElement,
+  getLinksConnectedToElement,
+  testNumberOfVertices,
+  connectNodesWithFlow,
+  setBoundaryEvent,
+} from '../../support/utils';
+
+describe('Undo/Redo control test', () => {
+  const undoSelector = '[data-cy="undo-control"]';
+  const redoSelector = '[data-cy="redo-control"]';
+
+  const buttonBgColorDefault = 'rgb(255, 255, 255)';
+  const iconFillColorDefault = 'rgb(51, 51, 68)';
+
+  it('should render new undo/redo controls', () => {
+    cy.get(undoSelector)
+      .should('be.visible')
+      .then($btn => {
+        // Checks button style
+        expect($btn).to.have.css('background-color', buttonBgColorDefault);
+
+        // Checks button icon style
+        const icon = $btn.children('svg');
+        expect(icon).to.have.css('fill', iconFillColorDefault);
+      });
+
+    cy.get(redoSelector)
+      .should('be.visible')
+      .then($btn => {
+        // Checks button style
+        expect($btn).to.have.css('background-color', buttonBgColorDefault);
+
+        // Checks button icon style
+        const icon = $btn.children('svg');
+        expect(icon).to.have.css('fill', iconFillColorDefault);
+      });
+  });
+
+  it('should undo/redo adding a task', () => {
+    const taskPosition = { x: 300, y: 300 };
+
+    dragFromSourceToDest(nodeTypes.task, taskPosition);
+
+    cy.get(undoSelector).click();
+    waitToRenderAllShapes();
+
+    // Only the start element should remain
+    getGraphElements().should('have.length', 1);
+
+    cy.get(redoSelector).click();
+    waitToRenderAllShapes();
+
+    // The task should now be re-added
+    getGraphElements().should('have.length', 2);
+  });
+
+  it('should undo/redo deleting a task', () => {
+    const taskPosition = { x: 300, y: 300 };
+
+    dragFromSourceToDest(nodeTypes.task, taskPosition);
+
+    getElementAtPosition(taskPosition)
+      .click()
+      .then($task => {
+        getCrownButtonForElement($task, 'delete-button').click();
+      });
+
+    // Only the start element should remain
+    getGraphElements().should('have.length', 1);
+
+    cy.get(undoSelector).click();
+
+    waitToRenderAllShapes();
+
+    // The task should now be re-added
+    getGraphElements().should('have.length', 2);
+  });
+
+  it('should undo/redo modifying sequence flow vertices', () => {
+    const startEventPosition = { x: 150, y: 150 };
+    const taskPosition = { x: 300, y: 300 };
+
+    dragFromSourceToDest(nodeTypes.task, taskPosition);
+    connectNodesWithFlow('generic-flow-button', startEventPosition, taskPosition);
+
+    const initialNumberOfWaypoints = 4;
+    testNumberOfVertices(initialNumberOfWaypoints);
+
+    getElementAtPosition(startEventPosition)
+      .then(getLinksConnectedToElement)
+      .then($links => $links[0])
+      .click('topRight', { force: true });
+
+    waitToRenderAllShapes();
+
+    cy.get('[data-tool-name=vertices]').trigger('mousedown', 'topRight');
+    cy.get('[data-tool-name=vertices]').trigger('mousemove', 'bottomLeft', { force: true });
+    cy.get('[data-tool-name=vertices]').trigger('mouseup', 'bottomLeft', { force: true });
+
+    waitToRenderAllShapes();
+
+    const updatedNumberOfWaypoints = 8;
+    testNumberOfVertices(updatedNumberOfWaypoints);
+
+    cy.get(undoSelector).click({ force: true });
+
+    waitToRenderAllShapes();
+
+    testNumberOfVertices(initialNumberOfWaypoints);
+  });
+
+  it('should undo/redo boundary timer event', () => {
+    const taskPosition = { x: 200, y: 200 };
+    dragFromSourceToDest(nodeTypes.task, taskPosition);
+
+    setBoundaryEvent(nodeTypes.boundaryTimerEvent, taskPosition);
+
+    const initialNumberOfElements = 3;
+    const numberOfElementsToRemove = 1;
+
+    getGraphElements().should('have.length', initialNumberOfElements);
+
+    cy.get(undoSelector).click({ force: true });
+    waitToRenderAllShapes();
+
+    getGraphElements().should('have.length', initialNumberOfElements - numberOfElementsToRemove);
+
+    cy.get(redoSelector).click({ force: true });
+    waitToRenderAllShapes();
+
+    getGraphElements().should('have.length', initialNumberOfElements);
+  });
+});
diff --git a/tests/e2e/specs/zoomControl/ZoomControl.spec.js b/tests/e2e/specs/zoomControl/ZoomControl.spec.js
new file mode 100644
index 00000000..2af860a3
--- /dev/null
+++ b/tests/e2e/specs/zoomControl/ZoomControl.spec.js
@@ -0,0 +1,108 @@
+describe('Zoom control test', () => {
+  const zoomOutSelector = '[data-cy="zoom-out-control"]';
+  const zoomInSelector = '[data-cy="zoom-in-control"]';
+  const zoomResetSelector = '[data-cy="zoom-reset-control"]';
+
+  const buttonBgColorDefault = 'rgb(255, 255, 255)';
+  const iconFillColorDefault = 'rgb(51, 51, 68)';
+
+  const initialScale = 1;
+  const scaleStep = 0.1;
+  const numZoomOutTimes = 3;
+  const numZoomInTimes = 8;
+
+  it('should render new zoom-out control', () => {
+    cy.get(zoomOutSelector)
+      .should('be.visible')
+      .then($btn => {
+        // Checks button style
+        expect($btn).to.have.css('background-color', buttonBgColorDefault);
+
+        // Checks button icon style
+        const icon = $btn.children('svg');
+        expect(icon).to.have.css('fill', iconFillColorDefault);
+      });
+  });
+
+  it('should render new zoom-in control', () => {
+    cy.get(zoomInSelector)
+      .should('be.visible')
+      .then($btn => {
+        // Checks button style
+        expect($btn).to.have.css('background-color', buttonBgColorDefault);
+
+        // Checks button icon style
+        const icon = $btn.children('svg');
+        expect(icon).to.have.css('fill', iconFillColorDefault);
+      });
+  });
+
+  it(`should update modeler according (-) zoom-out (${numZoomOutTimes}) times`, () => {
+    const numClicks = Array.from({length: numZoomOutTimes}, (_, index) => index + 1);
+
+    numClicks.forEach(() => {
+      cy.get(zoomOutSelector).click();
+    });
+
+    cy.window()
+      .its('store.state.paper')
+      .then(paper => {
+        const expectedScale = initialScale - (scaleStep * numZoomOutTimes);
+
+        cy.wait(500);
+
+        expect(expectedScale).eq(Math.round(paper.scale().sx * 10) / 10);
+        expect(expectedScale).eq(Math.round(paper.scale().sy * 10) / 10);
+      });
+  });
+
+  it(`should update modeler according (+) zoom-in (${numZoomInTimes}) times`, () => {
+    const numClicks = Array.from({length: numZoomInTimes}, (_, index) => index + 1);
+
+    numClicks.forEach(() => {
+      cy.get(zoomInSelector).click();
+    });
+
+    cy.window()
+      .its('store.state.paper')
+      .then(paper => {
+        const expectedScale = initialScale + (scaleStep * numZoomInTimes);
+
+        cy.wait(500);
+
+        expect(expectedScale).eq(Math.round(paper.scale().sx * 10) / 10);
+        expect(expectedScale).eq(Math.round(paper.scale().sy * 10) / 10);
+      });
+  });
+
+  it(`should reset modeler after (+) zoom-in (${numZoomInTimes}) times`, () => {
+    const numClicks = Array.from({length: numZoomInTimes}, (_, index) => index + 1);
+
+    numClicks.forEach(() => {
+      cy.get(zoomInSelector).click();
+    });
+
+    cy.window()
+      .its('store.state.paper')
+      .then(paper => {
+        const expectedScale = initialScale + (scaleStep * numZoomInTimes);
+
+        cy.wait(500);
+
+        expect(expectedScale).eq(Math.round(paper.scale().sx * 10) / 10);
+        expect(expectedScale).eq(Math.round(paper.scale().sy * 10) / 10);
+      });
+
+    cy.wait(500);
+    cy.get(zoomResetSelector).click();
+
+    cy.window()
+      .its('store.state.paper')
+      .then(paper => {
+        cy.wait(500);
+
+        cy.log(paper.scale().sx);
+        expect(paper.scale().sx).eq(initialScale);
+      });
+  });
+});
diff --git a/tests/unit/rails/__snapshots__/explorer.spec.js.snap b/tests/unit/rails/__snapshots__/explorer.spec.js.snap
new file mode 100644
index 00000000..2c880f2d
--- /dev/null
+++ b/tests/unit/rails/__snapshots__/explorer.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Explorer Rail should render the component 1`] = `<!---->`;
diff --git a/tests/unit/rails/explorer.spec.js b/tests/unit/rails/explorer.spec.js
new file mode 100644
index 00000000..ab6762cf
--- /dev/null
+++ b/tests/unit/rails/explorer.spec.js
@@ -0,0 +1,54 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import explorerRail from '@/components/rails/explorer-rail/explorer';
+import BootstrapVue from 'bootstrap-vue';
+
+const nodeTypes = [
+  {
+    id: 'processmaker-modeler-process',
+    bpmnType: 'bpmn:Process',
+    label: 'Process',
+  },
+];
+
+const localVue = createLocalVue();
+
+localVue.use(BootstrapVue);
+
+describe('Explorer Rail', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(explorerRail, {
+      propsData: {
+        nodeTypes,
+      },
+      mocks: {
+        $t() {},
+      },
+      localVue,
+    });
+  });
+  it('should render the component', () => {
+    expect(wrapper.vm).toBeTruthy();
+    expect(wrapper.vm.$el).toMatchSnapshot();
+  });
+  it('should check for vdata defaults', () => {
+    expect(wrapper.vm.tabs).toHaveLength(2);
+    expect(wrapper.vm.tabIndex).toBe(0);
+  });
+  it('should set the tab index', () => {
+    wrapper.vm.setTabIndex(1);
+    expect(wrapper.vm.tabIndex).toBe(1);
+  });
+  xit('should toggle the rail', () => {
+    expect(wrapper.vm.expanded).toBe(false);
+    wrapper.vm.toggleRail();
+    expect(wrapper.vm.expanded).toBe(true);
+  });
+  xit('should close the rail', () => {
+    // toggling the rail to be opened
+    wrapper.vm.toggleRail();
+    expect(wrapper.vm.expanded).toBe(true);
+    wrapper.vm.closeRail();
+    expect(wrapper.vm.expanded).toBe(false);
+  });
+});