diff --git a/package-lock.json b/package-lock.json
index 7778e7513..87253413e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@vuelidate/validators": "^2.0.0",
         "@vueuse/core": "^10.3.0",
         "@webitel/flow-ui-sdk": "^0.1.14",
-        "@webitel/ui-sdk": "^23.12.91",
+        "@webitel/ui-sdk": "^23.12.92",
         "axios": "^0.27.1",
         "clipboard-copy": "^4.0.1",
         "cron-validator": "^1.3.1",
@@ -1372,9 +1372,9 @@
       }
     },
     "node_modules/@webitel/ui-sdk": {
-      "version": "23.12.91",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.91.tgz",
-      "integrity": "sha512-6JyqPQfiLd7cs9goMri3GB9/0AYTXWMSEaqWy6GhMoakXqr9CwoiALb9gcVEk6xAO6cladBoki/utJ2G8TtclQ==",
+      "version": "23.12.92",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.92.tgz",
+      "integrity": "sha512-oZO19Y++PuX3UnAVYEnRBdEVccP2l26+NinISRbCFRXIATWN39czVI12CqWxu/wyRL76sn2kNW+vxuO18LJX7A==",
       "dependencies": {
         "@floating-ui/vue": "^1.0.1",
         "@vuelidate/core": "^2.0.3",
@@ -9252,9 +9252,9 @@
       }
     },
     "@webitel/ui-sdk": {
-      "version": "23.12.91",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.91.tgz",
-      "integrity": "sha512-6JyqPQfiLd7cs9goMri3GB9/0AYTXWMSEaqWy6GhMoakXqr9CwoiALb9gcVEk6xAO6cladBoki/utJ2G8TtclQ==",
+      "version": "23.12.92",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.92.tgz",
+      "integrity": "sha512-oZO19Y++PuX3UnAVYEnRBdEVccP2l26+NinISRbCFRXIATWN39czVI12CqWxu/wyRL76sn2kNW+vxuO18LJX7A==",
       "requires": {
         "@floating-ui/vue": "^1.0.1",
         "@vuelidate/core": "^2.0.3",
diff --git a/package.json b/package.json
index df112d9bc..0b71a7309 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^10.3.0",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^23.12.91",
+    "@webitel/ui-sdk": "^23.12.92",
     "axios": "^0.27.1",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",
diff --git a/src/app/components/utils/code-editor.vue b/src/app/components/utils/code-editor.vue
index c2a5a4c42..60cbc4c5d 100644
--- a/src/app/components/utils/code-editor.vue
+++ b/src/app/components/utils/code-editor.vue
@@ -26,6 +26,7 @@
 <script>
 import { editor, languages } from 'monaco-editor';
 import { markRaw } from 'vue';
+import { mapState } from 'vuex';
 
 // https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html
 
@@ -40,7 +41,6 @@ const fullscreenSizeConfig = {
 const config = {
   ...defaultSizeConfig,
   language: 'json',
-  theme: 'vs',
   wordWrap: 'off',
   autoClosingQuotes: true,
   autoClosingBrackets: true,
@@ -81,6 +81,9 @@ export default {
     isFullscreen: false,
   }),
   computed: {
+    ...mapState('appearance', {
+      theme: (state) => state.theme,
+    }),
     fullscreenIcon() {
       return this.isFullscreen ? 'collapse' : 'expand';
     },
@@ -101,6 +104,14 @@ export default {
         }
       }
     },
+    theme: {
+      handler() {
+        this.theme === 'dark'
+          ? editor.setTheme('vs-dark')
+          : editor.setTheme('vs');
+      },
+      immediate: true,
+    },
   },
   mounted() {
     this.initEditor();
@@ -122,8 +133,6 @@ export default {
         }
       });
 
-      editor.setTheme('vs-dark');
-
       // eslint-disable-next-line no-unused-vars
       this.editor.onDidChangeModelDecorations((event) => {
         this.checkSyntaxError();
diff --git a/src/modules/application-hub/components/application-hub.vue b/src/modules/application-hub/components/application-hub.vue
index 13c111702..8677945ab 100644
--- a/src/modules/application-hub/components/application-hub.vue
+++ b/src/modules/application-hub/components/application-hub.vue
@@ -277,7 +277,7 @@ $transition: 0.4s;
 // title text
 .application-link__title {
   @extend %typo-body-1;
-  color: var(--text-main-color);
+  color: var(--white);
 }
 
 // specific @hover toggled styles (hovered)
diff --git a/src/modules/directory/modules/license/components/all-licenses/all-licenses.vue b/src/modules/directory/modules/license/components/all-licenses/all-licenses.vue
index 18b0e6138..c19eb5d3f 100644
--- a/src/modules/directory/modules/license/components/all-licenses/all-licenses.vue
+++ b/src/modules/directory/modules/license/components/all-licenses/all-licenses.vue
@@ -95,7 +95,7 @@
 
         <template #status="{ item }">
           <wt-chip
-            :class="statusClass(item.notAfter)"
+            :color="statusColor(item.notAfter)"
             class="license-status"
           >
             {{ statusText(item.notAfter) }}
@@ -160,25 +160,18 @@ export default {
       return daysLeft + this.$t('objects.directory.license.daysToExpire.days');
     },
 
-    statusClass(endDate) {
+    statusColor(endDate) {
       const daysLeft = Math.ceil((endDate - Date.now()) / 1000 / 60 / 60 / 24);
-      if (daysLeft <= 0) return 'days0';
-      if (daysLeft < 30) return 'days30';
-      if (daysLeft < 90) return 'days90';
-      return 'valid';
+      if (daysLeft <= 0) return 'error';
+      if (daysLeft < 30) return 'warning';
+      if (daysLeft < 90) return 'success';
+      return 'success';
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.all-licenses {
-  --license--valid: var(--success-color);
-  --license--90: var(--success-color);
-  --license--30: var(--warning-color);
-  --license--0: var(--error-color);
-}
-
 .all-licenses__product-cell {
   display: flex;
   align-items: center;
@@ -196,21 +189,5 @@ export default {
   align-self: flex-end;
   width: 93px;
   text-align: center;
-
-  &.valid {
-    background: var(--license--valid);
-  }
-
-  &.days90 {
-    background: var(--license--90);
-  }
-
-  &.days30 {
-    background: var(--license--30);
-  }
-
-  &.days0 {
-    background: var(--license--0);
-  }
 }
 </style>
diff --git a/src/modules/routing/modules/flow/assets/code-section-dark.svg b/src/modules/routing/modules/flow/assets/code-section-dark.svg
new file mode 100644
index 000000000..45e0e419d
--- /dev/null
+++ b/src/modules/routing/modules/flow/assets/code-section-dark.svg
@@ -0,0 +1,15 @@
+<svg width="150" height="80" viewBox="0 0 150 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M76.7059 3H27.2941C25.4748 3 24 5.07068 24 7.625C24 10.1793 25.4748 12.25 27.2941 12.25H76.7059C78.5252 12.25 80 10.1793 80 7.625C80 5.07068 78.5252 3 76.7059 3Z" fill="#232734"/>
+<path d="M84.5144 6.35214C84.5144 6.73031 84.4501 7.01624 84.3215 7.20994C84.1929 7.40363 83.9851 7.54199 83.6982 7.625C83.9851 7.70801 84.1929 7.84637 84.3215 8.04006C84.4501 8.23376 84.5144 8.51969 84.5144 8.89786V10.0778C84.5144 10.7973 84.8804 11.157 85.6125 11.157H85.9835V12.25H85.3306C84.5886 12.25 84.0296 12.0748 83.6537 11.7243C83.2777 11.383 83.0898 10.8757 83.0898 10.2024V8.87019C83.0898 8.40901 82.8672 8.17842 82.422 8.17842H81.9026V7.07158H82.422C82.8672 7.07158 83.0898 6.84099 83.0898 6.37981V5.04765C83.0898 4.37432 83.2777 3.86702 83.6537 3.52575C84.0296 3.17525 84.5886 3 85.3306 3H85.9835V4.093H85.6125C84.8804 4.093 84.5144 4.45272 84.5144 5.17217V6.35214Z" fill="#C0239D"/>
+<path d="M109.336 19.3023C109.336 19.6805 109.272 19.9664 109.143 20.1601C109.015 20.3538 108.807 20.4922 108.52 20.5752C108.807 20.6582 109.015 20.7966 109.143 20.9903C109.272 21.184 109.336 21.4699 109.336 21.8481V23.028C109.336 23.7475 109.702 24.1072 110.434 24.1072H110.805V25.2002H110.152C109.41 25.2002 108.851 25.0249 108.475 24.6744C108.099 24.3332 107.911 23.8259 107.911 23.1525V21.8204C107.911 21.3592 107.689 21.1286 107.244 21.1286H106.724V20.0218H107.244C107.689 20.0218 107.911 19.7912 107.911 19.33V17.9978C107.911 17.3245 108.099 16.8172 108.475 16.4759C108.851 16.1254 109.41 15.9502 110.152 15.9502H110.805V17.0432H110.434C109.702 17.0432 109.336 17.4029 109.336 18.1224V19.3023Z" fill="#C0239D"/>
+<path d="M25.4691 71.1021C25.4691 71.4803 25.5334 71.7662 25.662 71.9599C25.7907 72.1536 25.9984 72.292 26.2853 72.375C25.9984 72.458 25.7907 72.5964 25.662 72.7901C25.5334 72.9838 25.4691 73.2697 25.4691 73.6479V74.8278C25.4691 75.5473 25.1031 75.907 24.371 75.907H24V77H24.6529C25.3949 77 25.9539 76.8248 26.3298 76.4743C26.7058 76.133 26.8937 75.6257 26.8937 74.9524V73.6202C26.8937 73.159 27.1163 72.9284 27.5615 72.9284H28.0809V71.8216H27.5615C27.1163 71.8216 26.8937 71.591 26.8937 71.1298V69.7976C26.8937 69.1243 26.7058 68.617 26.3298 68.2757C25.9539 67.9252 25.3949 67.75 24.6529 67.75H24V68.843H24.371C25.1031 68.843 25.4691 69.2027 25.4691 69.9222V71.1021Z" fill="#C0239D"/>
+<path d="M37.8732 58.1521C37.8732 58.5303 37.9376 58.8162 38.0662 59.0099C38.1948 59.2036 38.4025 59.342 38.6894 59.425C38.4025 59.508 38.1948 59.6464 38.0662 59.8401C37.9376 60.0337 37.8732 60.3197 37.8732 60.6979V61.8778C37.8732 62.5973 37.5072 62.957 36.7751 62.957H36.4041V64.05H37.0571C37.799 64.05 38.358 63.8747 38.734 63.5242C39.1099 63.183 39.2979 62.6757 39.2979 62.0023V60.6702C39.2979 60.209 39.5205 59.9784 39.9657 59.9784H40.485V58.8716H39.9657C39.5205 58.8716 39.2979 58.641 39.2979 58.1798V56.8476C39.2979 56.1743 39.1099 55.667 38.734 55.3257C38.358 54.9752 37.799 54.8 37.0571 54.8H36.4041V55.893H36.7751C37.5072 55.893 37.8732 56.2527 37.8732 56.9722V58.1521Z" fill="#C0239D"/>
+<path d="M103.773 18.7304C103.485 18.7304 103.239 18.6446 103.033 18.4731C102.827 18.2925 102.724 18.0668 102.724 17.7959C102.724 17.5341 102.827 17.3174 103.033 17.1459C103.239 16.9653 103.485 16.875 103.773 16.875C104.061 16.875 104.303 16.9608 104.498 17.1323C104.694 17.3039 104.792 17.5251 104.792 17.7959C104.792 18.0668 104.689 18.2925 104.483 18.4731C104.288 18.6446 104.051 18.7304 103.773 18.7304Z" fill="#AFB6CA"/>
+<path d="M103.773 24.2802C103.485 24.2802 103.239 24.1944 103.033 24.0229C102.827 23.8423 102.724 23.6166 102.724 23.3457C102.724 23.0839 102.827 22.8672 103.033 22.6957C103.239 22.5151 103.485 22.4248 103.773 22.4248C104.061 22.4248 104.303 22.5106 104.498 22.6821C104.694 22.8537 104.792 23.0749 104.792 23.3457C104.792 23.6166 104.689 23.8423 104.483 24.0229C104.288 24.1944 104.051 24.2802 103.773 24.2802Z" fill="#AFB6CA"/>
+<path d="M97.1123 15.95H48.2347C46.2679 15.95 44.6735 18.0207 44.6735 20.575C44.6735 23.1293 46.2679 25.2 48.2347 25.2H97.1123C99.0791 25.2 100.674 23.1293 100.674 20.575C100.674 18.0207 99.0791 15.95 97.1123 15.95Z" fill="#232734"/>
+<path d="M117.621 29H68.3786C66.5126 29 65 31.0147 65 33.5C65 35.9853 66.5126 38 68.3786 38H117.621C119.487 38 121 35.9853 121 33.5C121 31.0147 119.487 29 117.621 29Z" fill="#232734"/>
+<path d="M117.621 42H68.3786C66.5126 42 65 44.0147 65 46.5C65 48.9853 66.5126 51 68.3786 51H117.621C119.487 51 121 48.9853 121 46.5C121 44.0147 119.487 42 117.621 42Z" fill="#232734"/>
+<path d="M124.719 31.6748C124.996 31.6748 125.223 31.767 125.401 31.9515C125.589 32.1268 125.683 32.3481 125.683 32.6156C125.683 32.754 125.663 32.8877 125.624 33.0168C125.594 33.146 125.53 33.3443 125.431 33.6118L124.733 35.5349H123.798L124.348 33.4734C124.16 33.4089 124.006 33.3028 123.887 33.1552C123.779 32.9984 123.724 32.8185 123.724 32.6156C123.724 32.3389 123.818 32.1129 124.006 31.9377C124.194 31.7624 124.432 31.6748 124.719 31.6748Z" fill="#AFB6CA"/>
+<path d="M31.1963 70.525C31.4733 70.525 31.7008 70.6172 31.8789 70.8017C32.0669 70.977 32.1609 71.1983 32.1609 71.4658C32.1609 71.6042 32.1411 71.7379 32.1015 71.867C32.0718 71.9962 32.0075 72.1945 31.9086 72.462L31.2111 74.3851H30.2762L30.8253 72.3236C30.6373 72.259 30.484 72.153 30.3653 72.0054C30.2564 71.8486 30.202 71.6687 30.202 71.4658C30.202 71.1891 30.296 70.9631 30.484 70.7879C30.672 70.6126 30.9094 70.525 31.1963 70.525Z" fill="#AFB6CA"/>
+<path d="M43.6005 57.575C43.8775 57.575 44.105 57.6672 44.2831 57.8517C44.4711 58.027 44.5651 58.2483 44.5651 58.5158C44.5651 58.6542 44.5453 58.7879 44.5057 58.9171C44.476 59.0462 44.4117 59.2445 44.3128 59.512L43.6153 61.4351H42.6804L43.2295 59.3736C43.0415 59.3091 42.8882 59.203 42.7694 59.0554C42.6606 58.8986 42.6062 58.7187 42.6062 58.5158C42.6062 58.2391 42.7002 58.0131 42.8882 57.8379C43.0761 57.6626 43.3136 57.575 43.6005 57.575Z" fill="#AFB6CA"/>
+</svg>
diff --git a/src/modules/routing/modules/flow/assets/code-section-light.svg b/src/modules/routing/modules/flow/assets/code-section-light.svg
new file mode 100644
index 000000000..fd62e579c
--- /dev/null
+++ b/src/modules/routing/modules/flow/assets/code-section-light.svg
@@ -0,0 +1,15 @@
+<svg width="150" height="80" viewBox="0 0 150 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M76.7059 3H27.2941C25.4748 3 24 5.07068 24 7.625C24 10.1793 25.4748 12.25 27.2941 12.25H76.7059C78.5252 12.25 80 10.1793 80 7.625C80 5.07068 78.5252 3 76.7059 3Z" fill="#E7E9EF"/>
+<path d="M84.5144 6.35214C84.5144 6.73031 84.4501 7.01624 84.3215 7.20994C84.1929 7.40363 83.9851 7.54199 83.6982 7.625C83.9851 7.70801 84.1929 7.84637 84.3215 8.04006C84.4501 8.23376 84.5144 8.51969 84.5144 8.89786V10.0778C84.5144 10.7973 84.8804 11.157 85.6125 11.157H85.9835V12.25H85.3306C84.5886 12.25 84.0296 12.0748 83.6537 11.7243C83.2777 11.383 83.0898 10.8757 83.0898 10.2024V8.87019C83.0898 8.40901 82.8672 8.17842 82.422 8.17842H81.9026V7.07158H82.422C82.8672 7.07158 83.0898 6.84099 83.0898 6.37981V5.04765C83.0898 4.37432 83.2777 3.86702 83.6537 3.52575C84.0296 3.17525 84.5886 3 85.3306 3H85.9835V4.093H85.6125C84.8804 4.093 84.5144 4.45272 84.5144 5.17217V6.35214Z" fill="#C0239D"/>
+<path d="M109.336 19.3023C109.336 19.6805 109.272 19.9664 109.143 20.1601C109.015 20.3538 108.807 20.4922 108.52 20.5752C108.807 20.6582 109.015 20.7966 109.143 20.9903C109.272 21.184 109.336 21.4699 109.336 21.8481V23.028C109.336 23.7475 109.702 24.1072 110.434 24.1072H110.805V25.2002H110.152C109.41 25.2002 108.851 25.0249 108.475 24.6744C108.099 24.3332 107.911 23.8259 107.911 23.1525V21.8204C107.911 21.3592 107.689 21.1286 107.244 21.1286H106.724V20.0218H107.244C107.689 20.0218 107.911 19.7912 107.911 19.33V17.9978C107.911 17.3245 108.099 16.8172 108.475 16.4759C108.851 16.1254 109.41 15.9502 110.152 15.9502H110.805V17.0432H110.434C109.702 17.0432 109.336 17.4029 109.336 18.1224V19.3023Z" fill="#C0239D"/>
+<path d="M25.4691 71.1021C25.4691 71.4803 25.5334 71.7662 25.662 71.9599C25.7907 72.1536 25.9984 72.292 26.2853 72.375C25.9984 72.458 25.7907 72.5964 25.662 72.7901C25.5334 72.9838 25.4691 73.2697 25.4691 73.6479V74.8278C25.4691 75.5473 25.1031 75.907 24.371 75.907H24V77H24.6529C25.3949 77 25.9539 76.8248 26.3298 76.4743C26.7058 76.133 26.8937 75.6257 26.8937 74.9524V73.6202C26.8937 73.159 27.1163 72.9284 27.5615 72.9284H28.0809V71.8216H27.5615C27.1163 71.8216 26.8937 71.591 26.8937 71.1298V69.7976C26.8937 69.1243 26.7058 68.617 26.3298 68.2757C25.9539 67.9252 25.3949 67.75 24.6529 67.75H24V68.843H24.371C25.1031 68.843 25.4691 69.2027 25.4691 69.9222V71.1021Z" fill="#C0239D"/>
+<path d="M37.8732 58.1521C37.8732 58.5303 37.9376 58.8162 38.0662 59.0099C38.1948 59.2036 38.4025 59.342 38.6894 59.425C38.4025 59.508 38.1948 59.6464 38.0662 59.8401C37.9376 60.0338 37.8732 60.3197 37.8732 60.6979V61.8778C37.8732 62.5973 37.5072 62.957 36.7751 62.957H36.4041V64.05H37.0571C37.799 64.05 38.358 63.8748 38.734 63.5243C39.1099 63.183 39.2979 62.6757 39.2979 62.0024V60.6702C39.2979 60.209 39.5205 59.9784 39.9657 59.9784H40.485V58.8716H39.9657C39.5205 58.8716 39.2979 58.641 39.2979 58.1798V56.8477C39.2979 56.1743 39.1099 55.667 38.734 55.3258C38.358 54.9753 37.799 54.8 37.0571 54.8H36.4041V55.893H36.7751C37.5072 55.893 37.8732 56.2527 37.8732 56.9722V58.1521Z" fill="#C0239D"/>
+<path d="M103.773 18.7304C103.485 18.7304 103.239 18.6446 103.033 18.4731C102.827 18.2925 102.724 18.0668 102.724 17.7959C102.724 17.5341 102.827 17.3174 103.033 17.1459C103.239 16.9653 103.485 16.875 103.773 16.875C104.061 16.875 104.303 16.9608 104.498 17.1323C104.694 17.3039 104.792 17.5251 104.792 17.7959C104.792 18.0668 104.689 18.2925 104.483 18.4731C104.288 18.6446 104.051 18.7304 103.773 18.7304Z" fill="#313749"/>
+<path d="M103.773 24.2802C103.485 24.2802 103.239 24.1944 103.033 24.0229C102.827 23.8423 102.724 23.6166 102.724 23.3457C102.724 23.0839 102.827 22.8672 103.033 22.6957C103.239 22.5151 103.485 22.4248 103.773 22.4248C104.061 22.4248 104.303 22.5106 104.498 22.6821C104.694 22.8537 104.792 23.0749 104.792 23.3457C104.792 23.6166 104.689 23.8423 104.483 24.0229C104.288 24.1944 104.051 24.2802 103.773 24.2802Z" fill="#313749"/>
+<path d="M97.1123 15.95H48.2347C46.2679 15.95 44.6735 18.0207 44.6735 20.575C44.6735 23.1293 46.2679 25.2 48.2347 25.2H97.1123C99.0791 25.2 100.674 23.1293 100.674 20.575C100.674 18.0207 99.0791 15.95 97.1123 15.95Z" fill="#E7E9EF"/>
+<path d="M117.621 29H68.3786C66.5126 29 65 31.0147 65 33.5C65 35.9853 66.5126 38 68.3786 38H117.621C119.487 38 121 35.9853 121 33.5C121 31.0147 119.487 29 117.621 29Z" fill="#E7E9EF"/>
+<path d="M117.621 42H68.3786C66.5126 42 65 44.0147 65 46.5C65 48.9853 66.5126 51 68.3786 51H117.621C119.487 51 121 48.9853 121 46.5C121 44.0147 119.487 42 117.621 42Z" fill="#E7E9EF"/>
+<path d="M124.719 31.6748C124.996 31.6748 125.223 31.767 125.401 31.9515C125.589 32.1268 125.683 32.3481 125.683 32.6156C125.683 32.754 125.663 32.8877 125.624 33.0168C125.594 33.146 125.53 33.3443 125.431 33.6118L124.733 35.5349H123.798L124.348 33.4734C124.16 33.4089 124.006 33.3028 123.887 33.1552C123.779 32.9984 123.724 32.8185 123.724 32.6156C123.724 32.3389 123.818 32.1129 124.006 31.9377C124.194 31.7624 124.432 31.6748 124.719 31.6748Z" fill="#313749"/>
+<path d="M31.1963 70.525C31.4733 70.525 31.7008 70.6172 31.8789 70.8017C32.0669 70.977 32.1609 71.1983 32.1609 71.4658C32.1609 71.6042 32.1411 71.7379 32.1015 71.867C32.0718 71.9962 32.0075 72.1945 31.9086 72.462L31.2111 74.3851H30.2762L30.8253 72.3236C30.6373 72.259 30.484 72.153 30.3653 72.0054C30.2564 71.8486 30.202 71.6687 30.202 71.4658C30.202 71.1891 30.296 70.9631 30.484 70.7879C30.672 70.6126 30.9094 70.525 31.1963 70.525Z" fill="#313749"/>
+<path d="M43.6005 57.575C43.8775 57.575 44.105 57.6672 44.2831 57.8517C44.4711 58.027 44.5651 58.2483 44.5651 58.5158C44.5651 58.6542 44.5453 58.7879 44.5057 58.917C44.476 59.0462 44.4117 59.2445 44.3128 59.512L43.6153 61.4351H42.6804L43.2295 59.3736C43.0415 59.309 42.8882 59.203 42.7694 59.0554C42.6606 58.8986 42.6062 58.7187 42.6062 58.5158C42.6062 58.2391 42.7002 58.0131 42.8882 57.8379C43.0761 57.6626 43.3136 57.575 43.6005 57.575Z" fill="#313749"/>
+</svg>
diff --git a/src/modules/routing/modules/flow/assets/code-selection-pic.svg b/src/modules/routing/modules/flow/assets/code-selection-pic.svg
deleted file mode 100644
index 6498bda6d..000000000
--- a/src/modules/routing/modules/flow/assets/code-selection-pic.svg
+++ /dev/null
@@ -1,138 +0,0 @@
-<svg width="206" height="136" viewBox="0 0 206 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g filter="url(#filter0_dii_337_8098)">
-        <path d="M104.706 31H55.2941C53.4748 31 52 33.0707 52 35.625C52 38.1793 53.4748 40.25 55.2941 40.25H104.706C106.525 40.25 108 38.1793 108 35.625C108 33.0707 106.525 31 104.706 31Z"
-              fill="#F7F7F7"/>
-    </g>
-    <path d="M112.514 34.3521C112.514 34.7303 112.45 35.0162 112.321 35.2099C112.193 35.4036 111.985 35.542 111.698 35.625C111.985 35.708 112.193 35.8464 112.321 36.0401C112.45 36.2338 112.514 36.5197 112.514 36.8979V38.0778C112.514 38.7973 112.88 39.157 113.613 39.157H113.984V40.25H113.331C112.589 40.25 112.03 40.0748 111.654 39.7243C111.278 39.383 111.09 38.8757 111.09 38.2024V36.8702C111.09 36.409 110.867 36.1784 110.422 36.1784H109.903V35.0716H110.422C110.867 35.0716 111.09 34.841 111.09 34.3798V33.0476C111.09 32.3743 111.278 31.867 111.654 31.5257C112.03 31.1752 112.589 31 113.331 31H113.984V32.093H113.613C112.88 32.093 112.514 32.4527 112.514 33.1722V34.3521Z"
-          fill="#C0239D"/>
-    <path d="M137.336 47.3023C137.336 47.6805 137.272 47.9664 137.143 48.1601C137.015 48.3538 136.807 48.4922 136.52 48.5752C136.807 48.6582 137.015 48.7966 137.143 48.9903C137.272 49.184 137.336 49.4699 137.336 49.8481V51.028C137.336 51.7475 137.702 52.1072 138.434 52.1072H138.805V53.2002H138.152C137.41 53.2002 136.851 53.0249 136.475 52.6744C136.099 52.3332 135.911 51.8259 135.911 51.1525V49.8204C135.911 49.3592 135.689 49.1286 135.244 49.1286H134.724V48.0218H135.244C135.689 48.0218 135.911 47.7912 135.911 47.33V45.9978C135.911 45.3245 136.099 44.8172 136.475 44.4759C136.851 44.1254 137.41 43.9502 138.152 43.9502H138.805V45.0432H138.434C137.702 45.0432 137.336 45.4029 137.336 46.1224V47.3023Z"
-          fill="#C0239D"/>
-    <path d="M53.4691 99.1021C53.4691 99.4803 53.5334 99.7662 53.662 99.9599C53.7907 100.154 53.9984 100.292 54.2853 100.375C53.9984 100.458 53.7907 100.596 53.662 100.79C53.5334 100.984 53.4691 101.27 53.4691 101.648V102.828C53.4691 103.547 53.1031 103.907 52.371 103.907H52V105H52.6529C53.3949 105 53.9539 104.825 54.3298 104.474C54.7058 104.133 54.8937 103.626 54.8937 102.952V101.62C54.8937 101.159 55.1163 100.928 55.5615 100.928H56.0809V99.8216H55.5615C55.1163 99.8216 54.8937 99.591 54.8937 99.1298V97.7976C54.8937 97.1243 54.7058 96.617 54.3298 96.2757C53.9539 95.9252 53.3949 95.75 52.6529 95.75H52V96.843H52.371C53.1031 96.843 53.4691 97.2027 53.4691 97.9222V99.1021Z"
-          fill="#C0239D"/>
-    <path d="M65.8732 86.1521C65.8732 86.5303 65.9376 86.8162 66.0662 87.0099C66.1948 87.2036 66.4025 87.342 66.6894 87.425C66.4025 87.508 66.1948 87.6464 66.0662 87.8401C65.9376 88.0338 65.8732 88.3197 65.8732 88.6979V89.8778C65.8732 90.5973 65.5072 90.957 64.7751 90.957H64.4041V92.05H65.0571C65.799 92.05 66.358 91.8748 66.734 91.5243C67.1099 91.183 67.2979 90.6757 67.2979 90.0024V88.6702C67.2979 88.209 67.5205 87.9784 67.9657 87.9784H68.485V86.8716H67.9657C67.5205 86.8716 67.2979 86.641 67.2979 86.1798V84.8476C67.2979 84.1743 67.1099 83.667 66.734 83.3257C66.358 82.9752 65.799 82.8 65.0571 82.8H64.4041V83.893H64.7751C65.5072 83.893 65.8732 84.2527 65.8732 84.9722V86.1521Z"
-          fill="#C0239D"/>
-    <path d="M131.773 46.7304C131.485 46.7304 131.239 46.6446 131.033 46.4731C130.827 46.2925 130.724 46.0668 130.724 45.7959C130.724 45.5341 130.827 45.3174 131.033 45.1459C131.239 44.9653 131.485 44.875 131.773 44.875C132.061 44.875 132.303 44.9608 132.498 45.1323C132.694 45.3039 132.792 45.5251 132.792 45.7959C132.792 46.0668 132.689 46.2925 132.483 46.4731C132.288 46.6446 132.051 46.7304 131.773 46.7304Z"
-          fill="#030302"/>
-    <path d="M131.773 52.2802C131.485 52.2802 131.239 52.1944 131.033 52.0229C130.827 51.8423 130.724 51.6166 130.724 51.3457C130.724 51.0839 130.827 50.8672 131.033 50.6957C131.239 50.5151 131.485 50.4248 131.773 50.4248C132.061 50.4248 132.303 50.5106 132.498 50.6821C132.694 50.8537 132.792 51.0749 132.792 51.3457C132.792 51.6166 132.689 51.8423 132.483 52.0229C132.288 52.1944 132.051 52.2802 131.773 52.2802Z"
-          fill="#030302"/>
-    <g filter="url(#filter1_dii_337_8098)">
-        <path d="M125.112 43.95H76.2347C74.2679 43.95 72.6735 46.0207 72.6735 48.575C72.6735 51.1293 74.2679 53.2 76.2347 53.2H125.112C127.079 53.2 128.674 51.1293 128.674 48.575C128.674 46.0207 127.079 43.95 125.112 43.95Z"
-              fill="#F7F7F7"/>
-    </g>
-    <g filter="url(#filter2_dii_337_8098)">
-        <path d="M145.621 57H96.3786C94.5126 57 93 59.0147 93 61.5C93 63.9853 94.5126 66 96.3786 66H145.621C147.487 66 149 63.9853 149 61.5C149 59.0147 147.487 57 145.621 57Z"
-              fill="#F7F7F7"/>
-    </g>
-    <g filter="url(#filter3_dii_337_8098)">
-        <path d="M145.621 70H96.3786C94.5126 70 93 72.0147 93 74.5C93 76.9853 94.5126 79 96.3786 79H145.621C147.487 79 149 76.9853 149 74.5C149 72.0147 147.487 70 145.621 70Z"
-              fill="#F7F7F7"/>
-    </g>
-    <path d="M152.719 59.6748C152.996 59.6748 153.223 59.767 153.401 59.9515C153.589 60.1268 153.683 60.3481 153.683 60.6156C153.683 60.754 153.663 60.8877 153.624 61.0168C153.594 61.146 153.53 61.3443 153.431 61.6118L152.733 63.5349H151.798L152.348 61.4734C152.16 61.4089 152.006 61.3028 151.888 61.1552C151.779 60.9984 151.724 60.8185 151.724 60.6156C151.724 60.3389 151.818 60.1129 152.006 59.9377C152.194 59.7624 152.432 59.6748 152.719 59.6748Z"
-          fill="#030302"/>
-    <path d="M59.1963 98.525C59.4733 98.525 59.7009 98.6172 59.879 98.8017C60.0669 98.977 60.1609 99.1983 60.1609 99.4658C60.1609 99.6042 60.1411 99.7379 60.1015 99.867C60.0719 99.9962 60.0076 100.194 59.9086 100.462L59.2112 102.385H58.2763L58.8253 100.324C58.6374 100.259 58.484 100.153 58.3653 100.005C58.2565 99.8486 58.2021 99.6687 58.2021 99.4658C58.2021 99.1891 58.296 98.9631 58.484 98.7879C58.672 98.6126 58.9094 98.525 59.1963 98.525Z"
-          fill="#030302"/>
-    <path d="M71.6004 85.575C71.8774 85.575 72.105 85.6672 72.2831 85.8517C72.471 86.027 72.565 86.2483 72.565 86.5158C72.565 86.6542 72.5452 86.7879 72.5057 86.917C72.476 87.0462 72.4117 87.2445 72.3127 87.512L71.6153 89.4351H70.6804L71.2294 87.3736C71.0415 87.309 70.8881 87.203 70.7694 87.0554C70.6606 86.8986 70.6062 86.7187 70.6062 86.5158C70.6062 86.2391 70.7002 86.0131 70.8881 85.8379C71.0761 85.6626 71.3135 85.575 71.6004 85.575Z"
-          fill="#030302"/>
-    <defs>
-        <filter id="filter0_dii_337_8098" x="22" y="11" width="116" height="69.25" filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dy="10"/>
-            <feGaussianBlur stdDeviation="15"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.446597 0 0 0 0 0.461019 0 0 0 0 0.536736 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_337_8098"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_337_8098" result="shape"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="-1" dy="-1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_337_8098"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="1" dy="1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
-            <feBlend mode="normal" in2="effect2_innerShadow_337_8098" result="effect3_innerShadow_337_8098"/>
-        </filter>
-        <filter id="filter1_dii_337_8098" x="42.6735" y="23.95" width="116" height="69.25" filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dy="10"/>
-            <feGaussianBlur stdDeviation="15"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.446597 0 0 0 0 0.461019 0 0 0 0 0.536736 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_337_8098"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_337_8098" result="shape"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="-1" dy="-1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_337_8098"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="1" dy="1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
-            <feBlend mode="normal" in2="effect2_innerShadow_337_8098" result="effect3_innerShadow_337_8098"/>
-        </filter>
-        <filter id="filter2_dii_337_8098" x="63" y="37" width="116" height="69" filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dy="10"/>
-            <feGaussianBlur stdDeviation="15"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.446597 0 0 0 0 0.461019 0 0 0 0 0.536736 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_337_8098"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_337_8098" result="shape"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="-1" dy="-1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_337_8098"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="1" dy="1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
-            <feBlend mode="normal" in2="effect2_innerShadow_337_8098" result="effect3_innerShadow_337_8098"/>
-        </filter>
-        <filter id="filter3_dii_337_8098" x="63" y="50" width="116" height="69" filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dy="10"/>
-            <feGaussianBlur stdDeviation="15"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.446597 0 0 0 0 0.461019 0 0 0 0 0.536736 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_337_8098"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_337_8098" result="shape"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="-1" dy="-1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_337_8098"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="1" dy="1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
-            <feBlend mode="normal" in2="effect2_innerShadow_337_8098" result="effect3_innerShadow_337_8098"/>
-        </filter>
-    </defs>
-</svg>
diff --git a/src/modules/routing/modules/flow/assets/diagram-section-dark.svg b/src/modules/routing/modules/flow/assets/diagram-section-dark.svg
new file mode 100644
index 000000000..d967f2fe1
--- /dev/null
+++ b/src/modules/routing/modules/flow/assets/diagram-section-dark.svg
@@ -0,0 +1,20 @@
+<svg width="150" height="80" viewBox="0 0 150 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="12" y="45" width="32" height="32" rx="4" fill="#2B3040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 61V61C34 64.3333 31.3333 67 28 67V67C24.6667 67 22 64.3333 22 61V61C22 57.6667 24.6667 55 28 55V55C31.3333 55 34 57.6667 34 61Z" stroke="#169C18" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.4667 59.0667L29.9334 60.5334C30.2667 60.7334 30.2667 61.2667 29.9334 61.4667L27.4667 62.9334C27.1334 63.1334 26.6667 62.8667 26.6667 62.4667V59.5334C26.6667 59.1334 27.1334 58.8667 27.4667 59.0667Z" stroke="#169C18" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="59" y="3" width="32" height="32" rx="4" fill="#2B3040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.1667 23C73.1667 22.7239 73.3905 22.5 73.6667 22.5H76.3333C76.6095 22.5 76.8333 22.7239 76.8333 23C76.8333 23.2761 76.6095 23.5 76.3333 23.5H73.6667C73.3905 23.5 73.1667 23.2761 73.1667 23Z" fill="#F65855"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.5 14.3333C70.5 13.3239 71.3239 12.5 72.3333 12.5H77.6667C78.707 12.5 79.5 13.3558 79.5 14.4667V15.3333C79.5 15.6946 79.406 16.0698 79.1333 16.4333L79.129 16.4391L77.0986 19.0667L79.1122 21.6726C79.4316 22.0127 79.5 22.4953 79.5 22.8V23.6667C79.5 24.6761 78.6761 25.5 77.6667 25.5H72.3333C71.3239 25.5 70.5 24.6761 70.5 23.6667V22.7333C70.5 22.3388 70.6814 21.9099 70.8506 21.656C70.8544 21.6503 70.8583 21.6447 70.8623 21.6392L72.7818 19L70.8643 16.3635C70.5935 16.001 70.5 15.6268 70.5 15.2667V14.3333ZM72.3333 13.5C71.8761 13.5 71.5 13.8761 71.5 14.3333V15.2667C71.5 15.4388 71.5393 15.5969 71.6667 15.7667L71.6711 15.7725L73.8044 18.7059C73.9319 18.8812 73.9319 19.1188 73.8044 19.2941L71.6778 22.2181C71.5825 22.3647 71.5 22.5969 71.5 22.7333V23.6667C71.5 24.1239 71.8761 24.5 72.3333 24.5H77.6667C78.1239 24.5 78.5 24.1239 78.5 23.6667V22.8C78.5 22.5792 78.4387 22.4125 78.3798 22.3536C78.3647 22.3385 78.3507 22.3225 78.3377 22.3057L76.071 19.3724C75.9319 19.1923 75.9319 18.941 76.071 18.7609L78.3353 15.8307C78.4611 15.6619 78.5 15.5046 78.5 15.3333V14.4667C78.5 13.8442 78.093 13.5 77.6667 13.5H72.3333Z" fill="#F65855"/>
+<rect x="106" y="45" width="32" height="32" rx="4" fill="#2B3040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M126.667 64.0666L126.133 63.5333C125.6 62.9999 124.8 62.9999 124.267 63.5333L124 63.7999C123.8 63.9999 123.467 64.0666 123.2 63.9333C122.333 63.5333 121.533 62.9999 120.8 62.2666C120.067 61.5333 119.533 60.7333 119.133 59.8666C119 59.5999 119.067 59.2666 119.267 58.9999L119.533 58.7333C120.067 58.1999 120.067 57.3999 119.533 56.8666L119 56.3333C118.467 55.7999 117.667 55.7999 117.133 56.3333L116.667 56.7999C116.2 57.2666 115.933 57.9999 116.133 58.7333C116.467 60.4666 117.467 62.3999 119.133 63.9999C120.733 65.5999 122.667 66.6666 124.4 66.9999C125.133 67.1333 125.8 66.9333 126.333 66.3999L126.8 65.9333C127.133 65.4666 127.133 64.5999 126.667 64.0666Z" stroke="#3D56F5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M128 55L124 59" stroke="#3D56F5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M128 59L124 55" stroke="#3D56F5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="59.5" cy="19" r="1.5" stroke="#169C18"/>
+<circle cx="2" cy="2" r="1.5" transform="matrix(-1 0 0 1 93 17)" stroke="#2083DF"/>
+<circle cx="44" cy="58" r="1.5" stroke="#169C18"/>
+<circle cx="2" cy="2" r="1.5" transform="matrix(-1 0 0 1 108 59)" stroke="#2083DF"/>
+<circle cx="44" cy="64" r="1.5" transform="rotate(-180 44 64)" stroke="#C9981D"/>
+<path d="M76.3536 64.3536C76.5488 64.1583 76.5488 63.8417 76.3536 63.6464L73.1716 60.4645C72.9763 60.2692 72.6597 60.2692 72.4645 60.4645C72.2692 60.6597 72.2692 60.9763 72.4645 61.1716L75.2929 64L72.4645 66.8284C72.2692 67.0237 72.2692 67.3403 72.4645 67.5355C72.6597 67.7308 72.9763 67.7308 73.1716 67.5355L76.3536 64.3536ZM46 64.5L46.9375 64.5L46.9375 63.5L46 63.5L46 64.5ZM48.8125 64.5L50.6875 64.5L50.6875 63.5L48.8125 63.5L48.8125 64.5ZM52.5625 64.5L54.4375 64.5L54.4375 63.5L52.5625 63.5L52.5625 64.5ZM56.3125 64.5L58.1875 64.5L58.1875 63.5L56.3125 63.5L56.3125 64.5ZM60.0625 64.5L61.9375 64.5L61.9375 63.5L60.0625 63.5L60.0625 64.5ZM63.8125 64.5L65.6875 64.5L65.6875 63.5L63.8125 63.5L63.8125 64.5ZM67.5625 64.5L69.4375 64.5L69.4375 63.5L67.5625 63.5L67.5625 64.5ZM71.3125 64.5L73.1875 64.5L73.1875 63.5L71.3125 63.5L71.3125 64.5ZM75.0625 64.5L76 64.5L76 63.5L75.0625 63.5L75.0625 64.5Z" fill="#C9981D"/>
+<path d="M58 19V19C54.6863 19 52 21.6863 52 25V51.5C52 55.0898 49.0899 58 45.5 58V58" stroke="#169C18"/>
+<path d="M92.5 19V19C95.8137 19 98.5 21.6863 98.5 25V54.5C98.5 58.0899 101.41 61 105 61V61" stroke="#2083DF"/>
+</svg>
diff --git a/src/modules/routing/modules/flow/assets/diagram-section-light.svg b/src/modules/routing/modules/flow/assets/diagram-section-light.svg
new file mode 100644
index 000000000..f4d94e09f
--- /dev/null
+++ b/src/modules/routing/modules/flow/assets/diagram-section-light.svg
@@ -0,0 +1,20 @@
+<svg width="150" height="80" viewBox="0 0 150 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="12" y="45" width="32" height="32" rx="4" fill="#F3F4F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 61V61C34 64.3333 31.3333 67 28 67V67C24.6667 67 22 64.3333 22 61V61C22 57.6667 24.6667 55 28 55V55C31.3333 55 34 57.6667 34 61Z" stroke="#169C18" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.4667 59.0667L29.9334 60.5334C30.2667 60.7334 30.2667 61.2667 29.9334 61.4667L27.4667 62.9334C27.1334 63.1334 26.6667 62.8667 26.6667 62.4667V59.5334C26.6667 59.1334 27.1334 58.8667 27.4667 59.0667Z" stroke="#169C18" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="59" y="3" width="32" height="32" rx="4" fill="#F3F4F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.1667 23C73.1667 22.7239 73.3905 22.5 73.6667 22.5H76.3333C76.6095 22.5 76.8333 22.7239 76.8333 23C76.8333 23.2761 76.6095 23.5 76.3333 23.5H73.6667C73.3905 23.5 73.1667 23.2761 73.1667 23Z" fill="#F65855"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.5 14.3333C70.5 13.3239 71.3239 12.5 72.3333 12.5H77.6667C78.707 12.5 79.5 13.3558 79.5 14.4667V15.3333C79.5 15.6946 79.406 16.0698 79.1333 16.4333L79.129 16.4391L77.0986 19.0667L79.1122 21.6726C79.4316 22.0127 79.5 22.4953 79.5 22.8V23.6667C79.5 24.6761 78.6761 25.5 77.6667 25.5H72.3333C71.3239 25.5 70.5 24.6761 70.5 23.6667V22.7333C70.5 22.3388 70.6814 21.9099 70.8506 21.656C70.8544 21.6503 70.8583 21.6447 70.8623 21.6392L72.7818 19L70.8643 16.3635C70.5935 16.001 70.5 15.6268 70.5 15.2667V14.3333ZM72.3333 13.5C71.8761 13.5 71.5 13.8761 71.5 14.3333V15.2667C71.5 15.4388 71.5393 15.5969 71.6667 15.7667L71.6711 15.7725L73.8044 18.7059C73.9319 18.8812 73.9319 19.1188 73.8044 19.2941L71.6778 22.2181C71.5825 22.3647 71.5 22.5969 71.5 22.7333V23.6667C71.5 24.1239 71.8761 24.5 72.3333 24.5H77.6667C78.1239 24.5 78.5 24.1239 78.5 23.6667V22.8C78.5 22.5792 78.4387 22.4125 78.3798 22.3536C78.3647 22.3385 78.3507 22.3225 78.3377 22.3057L76.071 19.3724C75.9319 19.1923 75.9319 18.941 76.071 18.7609L78.3353 15.8307C78.4611 15.6619 78.5 15.5046 78.5 15.3333V14.4667C78.5 13.8442 78.093 13.5 77.6667 13.5H72.3333Z" fill="#F65855"/>
+<rect x="106" y="45" width="32" height="32" rx="4" fill="#F3F4F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M126.667 64.0666L126.133 63.5333C125.6 62.9999 124.8 62.9999 124.267 63.5333L124 63.7999C123.8 63.9999 123.467 64.0666 123.2 63.9333C122.333 63.5333 121.533 62.9999 120.8 62.2666C120.067 61.5333 119.533 60.7333 119.133 59.8666C119 59.5999 119.067 59.2666 119.267 58.9999L119.533 58.7333C120.067 58.1999 120.067 57.3999 119.533 56.8666L119 56.3333C118.467 55.7999 117.667 55.7999 117.133 56.3333L116.667 56.7999C116.2 57.2666 115.933 57.9999 116.133 58.7333C116.467 60.4666 117.467 62.3999 119.133 63.9999C120.733 65.5999 122.667 66.6666 124.4 66.9999C125.133 67.1333 125.8 66.9333 126.333 66.3999L126.8 65.9333C127.133 65.4666 127.133 64.5999 126.667 64.0666Z" stroke="#3D56F5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M128 55L124 59" stroke="#3D56F5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M128 59L124 55" stroke="#3D56F5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="59.5" cy="19" r="1.5" stroke="#169C18"/>
+<circle cx="2" cy="2" r="1.5" transform="matrix(-1 0 0 1 93 17)" stroke="#2083DF"/>
+<circle cx="44" cy="58" r="1.5" stroke="#169C18"/>
+<circle cx="2" cy="2" r="1.5" transform="matrix(-1 0 0 1 108 59)" stroke="#2083DF"/>
+<circle cx="44" cy="64" r="1.5" transform="rotate(-180 44 64)" stroke="#FAB404"/>
+<path d="M76.3536 64.3536C76.5488 64.1583 76.5488 63.8417 76.3536 63.6464L73.1716 60.4645C72.9763 60.2692 72.6597 60.2692 72.4645 60.4645C72.2692 60.6597 72.2692 60.9763 72.4645 61.1716L75.2929 64L72.4645 66.8284C72.2692 67.0237 72.2692 67.3403 72.4645 67.5355C72.6597 67.7308 72.9763 67.7308 73.1716 67.5355L76.3536 64.3536ZM46 64.5L46.9375 64.5L46.9375 63.5L46 63.5L46 64.5ZM48.8125 64.5L50.6875 64.5L50.6875 63.5L48.8125 63.5L48.8125 64.5ZM52.5625 64.5L54.4375 64.5L54.4375 63.5L52.5625 63.5L52.5625 64.5ZM56.3125 64.5L58.1875 64.5L58.1875 63.5L56.3125 63.5L56.3125 64.5ZM60.0625 64.5L61.9375 64.5L61.9375 63.5L60.0625 63.5L60.0625 64.5ZM63.8125 64.5L65.6875 64.5L65.6875 63.5L63.8125 63.5L63.8125 64.5ZM67.5625 64.5L69.4375 64.5L69.4375 63.5L67.5625 63.5L67.5625 64.5ZM71.3125 64.5L73.1875 64.5L73.1875 63.5L71.3125 63.5L71.3125 64.5ZM75.0625 64.5L76 64.5L76 63.5L75.0625 63.5L75.0625 64.5Z" fill="#FAB404"/>
+<path d="M58 19V19C54.6863 19 52 21.6863 52 25V51.5C52 55.0898 49.0899 58 45.5 58V58" stroke="#169C18"/>
+<path d="M92.5 19V19C95.8137 19 98.5 21.6863 98.5 25V54.5C98.5 58.0899 101.41 61 105 61V61" stroke="#2083DF"/>
+</svg>
diff --git a/src/modules/routing/modules/flow/assets/diagram-selection-pic.svg b/src/modules/routing/modules/flow/assets/diagram-selection-pic.svg
deleted file mode 100644
index 54045fe05..000000000
--- a/src/modules/routing/modules/flow/assets/diagram-selection-pic.svg
+++ /dev/null
@@ -1,122 +0,0 @@
-<svg width="206" height="136" viewBox="0 0 206 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_337_8062)">
-        <g filter="url(#filter0_dii_337_8062)">
-            <rect x="40" y="73" width="32" height="32" rx="4" fill="#F7F7F7"/>
-            <path fill-rule="evenodd" clip-rule="evenodd"
-                  d="M62 89V89C62 92.3333 59.3333 95 56 95V95C52.6667 95 50 92.3333 50 89V89C50 85.6667 52.6667 83 56 83V83C59.3333 83 62 85.6667 62 89Z"
-                  stroke="#2BA329" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-            <path fill-rule="evenodd" clip-rule="evenodd"
-                  d="M55.4667 87.0667L57.9333 88.5334C58.2667 88.7334 58.2667 89.2667 57.9333 89.4667L55.4667 90.9334C55.1333 91.1334 54.6667 90.8667 54.6667 90.4667V87.5334C54.6667 87.1334 55.1333 86.8667 55.4667 87.0667Z"
-                  stroke="#2BA329" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </g>
-        <g filter="url(#filter1_dii_337_8062)">
-            <rect x="87" y="31" width="32" height="32" rx="4" fill="#F7F7F7"/>
-            <path fill-rule="evenodd" clip-rule="evenodd"
-                  d="M101.167 51C101.167 50.7239 101.391 50.5 101.667 50.5H104.333C104.609 50.5 104.833 50.7239 104.833 51C104.833 51.2761 104.609 51.5 104.333 51.5H101.667C101.391 51.5 101.167 51.2761 101.167 51Z"
-                  fill="#E63E1A"/>
-            <path fill-rule="evenodd" clip-rule="evenodd"
-                  d="M98.5 42.3333C98.5 41.3239 99.3239 40.5 100.333 40.5H105.667C106.707 40.5 107.5 41.3558 107.5 42.4667V43.3333C107.5 43.6946 107.406 44.0698 107.133 44.4333L107.129 44.4391L105.099 47.0667L107.112 49.6726C107.432 50.0127 107.5 50.4953 107.5 50.8V51.6667C107.5 52.6761 106.676 53.5 105.667 53.5H100.333C99.3239 53.5 98.5 52.6761 98.5 51.6667V50.7333C98.5 50.3388 98.6814 49.9099 98.8506 49.656C98.8544 49.6503 98.8583 49.6447 98.8623 49.6392L100.782 47L98.8643 44.3635C98.5935 44.001 98.5 43.6268 98.5 43.2667V42.3333ZM100.333 41.5C99.8761 41.5 99.5 41.8761 99.5 42.3333V43.2667C99.5 43.4388 99.5393 43.5969 99.6667 43.7667L99.6711 43.7725L101.804 46.7059C101.932 46.8812 101.932 47.1188 101.804 47.2941L99.6778 50.2181C99.5825 50.3647 99.5 50.5969 99.5 50.7333V51.6667C99.5 52.1239 99.8761 52.5 100.333 52.5H105.667C106.124 52.5 106.5 52.1239 106.5 51.6667V50.8C106.5 50.5792 106.439 50.4125 106.38 50.3536C106.365 50.3385 106.351 50.3225 106.338 50.3057L104.071 47.3724C103.932 47.1923 103.932 46.941 104.071 46.7609L106.335 43.8307C106.461 43.6619 106.5 43.5046 106.5 43.3333V42.4667C106.5 41.8442 106.093 41.5 105.667 41.5H100.333Z"
-                  fill="#E63E1A"/>
-        </g>
-        <g filter="url(#filter2_dii_337_8062)">
-            <rect x="134" y="73" width="32" height="32" rx="4" fill="#F7F7F7"/>
-            <path fill-rule="evenodd" clip-rule="evenodd"
-                  d="M154.667 92.0666L154.133 91.5333C153.6 90.9999 152.8 90.9999 152.267 91.5333L152 91.7999C151.8 91.9999 151.467 92.0666 151.2 91.9333C150.333 91.5333 149.533 90.9999 148.8 90.2666C148.067 89.5333 147.533 88.7333 147.133 87.8666C147 87.5999 147.067 87.2666 147.267 86.9999L147.533 86.7333C148.067 86.1999 148.067 85.3999 147.533 84.8666L147 84.3333C146.467 83.7999 145.667 83.7999 145.133 84.3333L144.667 84.7999C144.2 85.2666 143.933 85.9999 144.133 86.7333C144.467 88.4666 145.467 90.3999 147.133 91.9999C148.733 93.5999 150.667 94.6666 152.4 94.9999C153.133 95.1333 153.8 94.9333 154.333 94.3999L154.8 93.9333C155.133 93.4666 155.133 92.5999 154.667 92.0666Z"
-                  stroke="#6B89F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M156 83L152 87" stroke="#6B89F6" stroke-width="1.5" stroke-linecap="round"
-                  stroke-linejoin="round"/>
-            <path d="M156 87L152 83" stroke="#6B89F6" stroke-width="1.5" stroke-linecap="round"
-                  stroke-linejoin="round"/>
-        </g>
-        <circle cx="87.5" cy="47" r="1.5" stroke="#A8D7A7"/>
-        <circle r="1.5" transform="matrix(-1 0 0 1 119 47)" stroke="#B6C3F0"/>
-        <circle cx="72" cy="86" r="1.5" stroke="#A8D7A7"/>
-        <circle r="1.5" transform="matrix(-1 0 0 1 134 89)" stroke="#B6C3F0"/>
-        <circle cx="72" cy="92" r="1.5" transform="rotate(-180 72 92)" stroke="#FFC000"/>
-        <path d="M104.354 92.3536C104.549 92.1583 104.549 91.8417 104.354 91.6464L101.172 88.4645C100.976 88.2692 100.66 88.2692 100.464 88.4645C100.269 88.6597 100.269 88.9763 100.464 89.1716L103.293 92L100.464 94.8284C100.269 95.0237 100.269 95.3403 100.464 95.5355C100.66 95.7308 100.976 95.7308 101.172 95.5355L104.354 92.3536ZM74 92.5L74.9375 92.5L74.9375 91.5L74 91.5L74 92.5ZM76.8125 92.5L78.6875 92.5L78.6875 91.5L76.8125 91.5L76.8125 92.5ZM80.5625 92.5L82.4375 92.5L82.4375 91.5L80.5625 91.5L80.5625 92.5ZM84.3125 92.5L86.1875 92.5L86.1875 91.5L84.3125 91.5L84.3125 92.5ZM88.0625 92.5L89.9375 92.5L89.9375 91.5L88.0625 91.5L88.0625 92.5ZM91.8125 92.5L93.6875 92.5L93.6875 91.5L91.8125 91.5L91.8125 92.5ZM95.5625 92.5L97.4375 92.5L97.4375 91.5L95.5625 91.5L95.5625 92.5ZM99.3125 92.5L101.187 92.5L101.188 91.5L99.3125 91.5L99.3125 92.5ZM103.062 92.5L104 92.5L104 91.5L103.063 91.5L103.062 92.5Z"
-              fill="#FFC000"/>
-        <path d="M86 47V47C82.6863 47 80 49.6863 80 53V79.5C80 83.0898 77.0899 86 73.5 86V86" stroke="#A8D7A7"/>
-        <path d="M120.5 47V47C123.814 47 126.5 49.6863 126.5 53V82.5C126.5 86.0899 129.41 89 133 89V89"
-              stroke="#B6C3F0"/>
-    </g>
-    <defs>
-        <filter id="filter0_dii_337_8062" x="10" y="53" width="92" height="92" filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dy="10"/>
-            <feGaussianBlur stdDeviation="15"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.446597 0 0 0 0 0.461019 0 0 0 0 0.536736 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_337_8062"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_337_8062" result="shape"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="-1" dy="-1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_337_8062"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="1" dy="1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
-            <feBlend mode="normal" in2="effect2_innerShadow_337_8062" result="effect3_innerShadow_337_8062"/>
-        </filter>
-        <filter id="filter1_dii_337_8062" x="57" y="11" width="92" height="92" filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dy="10"/>
-            <feGaussianBlur stdDeviation="15"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.446597 0 0 0 0 0.461019 0 0 0 0 0.536736 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_337_8062"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_337_8062" result="shape"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="-1" dy="-1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_337_8062"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="1" dy="1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
-            <feBlend mode="normal" in2="effect2_innerShadow_337_8062" result="effect3_innerShadow_337_8062"/>
-        </filter>
-        <filter id="filter2_dii_337_8062" x="104" y="53" width="92" height="92" filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dy="10"/>
-            <feGaussianBlur stdDeviation="15"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.446597 0 0 0 0 0.461019 0 0 0 0 0.536736 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_337_8062"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_337_8062" result="shape"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="-1" dy="-1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.1 0"/>
-            <feBlend mode="normal" in2="shape" result="effect2_innerShadow_337_8062"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                           result="hardAlpha"/>
-            <feOffset dx="1" dy="1"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
-            <feBlend mode="normal" in2="effect2_innerShadow_337_8062" result="effect3_innerShadow_337_8062"/>
-        </filter>
-        <clipPath id="clip0_337_8062">
-            <rect width="206" height="136" fill="white"/>
-        </clipPath>
-    </defs>
-</svg>
diff --git a/src/modules/routing/modules/flow/components/create-flow-popup.vue b/src/modules/routing/modules/flow/components/create-flow-popup.vue
index 35c2b2236..586d5fa84 100644
--- a/src/modules/routing/modules/flow/components/create-flow-popup.vue
+++ b/src/modules/routing/modules/flow/components/create-flow-popup.vue
@@ -42,12 +42,15 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import { EngineRoutingSchemaType } from 'webitel-sdk';
 import SelectionPopup from '../../../../../app/components/utils/selection-popup/selection-popup.vue';
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
-import codeSelectionPic from '../assets/code-selection-pic.svg';
-import diagramSelectionPic from '../assets/diagram-selection-pic.svg';
+
+import CodeSectionDark from '../assets/code-section-dark.svg';
+import CodeSectionLight from '../assets/code-section-light.svg';
+import DiagramSectionDark from '../assets/diagram-section-dark.svg';
+import DiagramSectionLight from '../assets/diagram-section-light.svg';
 import FlowEditor from '../enums/FlowEditor.enum';
 
 export default {
@@ -66,19 +69,22 @@ export default {
     })),
   }),
   computed: {
+    ...mapState('appearance', {
+      theme: (state) => state.theme,
+    }),
     editorOptions() {
       const diagram = {
         value: FlowEditor.DIAGRAM,
         title: this.$t('objects.routing.flow.diagram.diagram'),
         description: this.$t('objects.routing.flow.diagram.description'),
-        image: diagramSelectionPic,
+        image: this.theme === 'dark' ? DiagramSectionDark : DiagramSectionLight,
         alt: this.$t('objects.routing.flow.diagram.diagram'),
       };
       const code = {
         value: FlowEditor.CODE,
         title: this.$t('objects.routing.flow.code.code'),
         description: this.$t('objects.routing.flow.code.description'),
-        image: codeSelectionPic,
+        image: this.theme === 'dark' ? CodeSectionDark : CodeSectionLight,
         alt: this.$t('objects.routing.flow.code.code'),
       };
       return [diagram, code];
@@ -128,8 +134,8 @@ export default {
 
 <style lang="scss" scoped>
 // setup pic width and height to prevent layout shift after pic load
-$pic-width: 206px;
-$pic-height: 136px;
+$pic-width: 150px;
+$pic-height: 80px;
 
 //Change some selection-popup styles
 .selection-popup {
@@ -168,8 +174,11 @@ $pic-height: 136px;
   }
 
   .popup-flow-editor__img-wrapper {
+    box-sizing: content-box;
     width: $pic-width;
     height: $pic-height;
+    margin: 0 auto;
+    padding: var(--spacing-md);
   }
 
   &__title {