From ee1ee633d703b87b5695c9cd4edebe222795ba18 Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Fri, 12 Aug 2022 08:43:01 +1200
Subject: [PATCH] feat(ui): portainer wizard ui change for ce EE-3576 (#7405)

* ui change for wizard
---
 app/assets/css/theme.css                      | 62 +++++++++++++++----
 app/assets/css/vendor-override.css            | 25 ++++++--
 app/assets/ico/agent.svg                      | 11 ++++
 app/assets/ico/api.svg                        |  4 ++
 app/assets/ico/cloud.svg                      |  1 +
 app/assets/ico/edge-agent.svg                 | 11 ++++
 app/assets/ico/import.svg                     | 11 ++++
 app/assets/ico/socket.svg                     |  4 ++
 app/assets/ico/upload-cloud.svg               |  1 +
 app/assets/ico/wizard/agent.svg               | 11 ++++
 app/assets/ico/wizard/api.svg                 |  4 ++
 app/assets/ico/wizard/edge-agent.svg          | 11 ++++
 app/assets/ico/wizard/import.svg              | 11 ++++
 app/assets/ico/wizard/socket.svg              |  4 ++
 app/assets/ico/zap.svg                        |  1 +
 .../BoxSelector/BoxSelectorItem.css           | 12 ++++
 app/react/components/NavTabs/NavTabs.tsx      |  4 +-
 .../components/Stepper/Stepper.module.css     | 30 +++++----
 app/react/components/Svg.tsx                  | 13 ++++
 .../FileUpload/FileUploadField.tsx            |  2 +-
 .../EndpointTypeView.tsx                      |  2 +-
 .../EnvironmentsCreationView.tsx              |  9 +--
 .../WizardAzure/WizardAzure.tsx               | 10 ++-
 .../WizardDocker/APITab/APIForm.tsx           |  9 ++-
 .../AgentTab/DeploymentScripts.tsx            |  4 +-
 .../WizardDocker/SocketTab/SocketForm.tsx     |  9 ++-
 .../WizardDocker/WizardDocker.tsx             |  8 +--
 .../WizardEndpointsList.tsx                   |  2 +-
 .../WizardKubernetes/KubeConfigTeaserForm.tsx | 37 +++++------
 .../WizardKubernetes/WizardKubernetes.tsx     |  6 +-
 .../shared/AgentForm/AgentForm.tsx            |  9 ++-
 .../EdgeAgentForm/EdgeAgentForm.tsx           |  7 ++-
 .../environments/wizard/HomeView/HomeView.tsx |  4 +-
 33 files changed, 272 insertions(+), 77 deletions(-)
 create mode 100644 app/assets/ico/agent.svg
 create mode 100644 app/assets/ico/api.svg
 create mode 100644 app/assets/ico/cloud.svg
 create mode 100644 app/assets/ico/edge-agent.svg
 create mode 100644 app/assets/ico/import.svg
 create mode 100644 app/assets/ico/socket.svg
 create mode 100644 app/assets/ico/upload-cloud.svg
 create mode 100644 app/assets/ico/wizard/agent.svg
 create mode 100644 app/assets/ico/wizard/api.svg
 create mode 100644 app/assets/ico/wizard/edge-agent.svg
 create mode 100644 app/assets/ico/wizard/import.svg
 create mode 100644 app/assets/ico/wizard/socket.svg
 create mode 100644 app/assets/ico/zap.svg

diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index a8a2c1bf6..1c4ae6984 100644
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@@ -102,13 +102,12 @@
   --bg-switch-box-color: var(--ui-gray-5);
   --bg-input-group-addon-color: var(--ui-gray-3);
   --bg-btn-default-color: var(--white-color);
-  --bg-blocklist-hover-color: var(--ui-blue-3);
-  --bg-boxselector-color: var(--white-color);
+  --bg-blocklist-hover-color: var(--ui-blue-2);
+  --bg-boxselector-color: var(--ui-gray-2);
   --bg-table-color: var(--white-color);
   --bg-md-checkbox-color: var(--grey-12);
   --bg-form-control-disabled-color: var(--grey-11);
   --bg-modal-content-color: var(--white-color);
-  --bg-code-color: var(--grey-15);
   --bg-navtabs-color: var(--white-color);
   --bg-navtabs-hover-color: var(--grey-16);
   --bg-table-selected-color: var(--grey-14);
@@ -165,6 +164,12 @@
   --bg-webeditor-color: var(--ui-gray-3);
   --bg-button-group-color: var(--ui-white);
   --bg-pagination-disabled-color: var(--ui-white);
+  --bg-nav-container-color: var(--ui-gray-2);
+  --bg-code-script-color: var(--ui-white);
+  --bg-nav-tabs-active-color: var(--ui-gray-4);
+  --bg-stepper-color: var(--ui-white);
+  --bg-stepper-active-color: var(--ui-blue-1);
+  --bg-code-color: var(--ui-white);
 
   --text-main-color: var(--grey-7);
   --text-body-color: var(--grey-6);
@@ -178,7 +183,7 @@
   --text-blocklist-hover-color: var(--grey-37);
   --text-dashboard-item-color: var(--grey-32);
   --text-danger-color: var(--red-1);
-  --text-code-color: var(--red-2);
+  --text-code-color: var(--ui-gray-9);
   --text-navtabs-color: var(--grey-25);
   --text-cm-default-color: var(--blue-1);
   --text-cm-meta-color: var(--black-color);
@@ -210,6 +215,9 @@
   --text-small-select-color: var(--grey-25);
   --text-bootbox: var(--ui-gray-7);
   --text-button-group-color: var(--ui-gray-9);
+  --text-button-dangerlight-color: var(--ui-error-5);
+  --text-stepper-active-color: var(--ui-blue-8);
+  --text-boxselector-header: var(--ui-black);
 
   --border-color: var(--grey-42);
   --border-widget-color: var(--grey-43);
@@ -224,8 +232,8 @@
   --border-boxselector-color: var(--grey-6);
   --border-md-checkbox-color: var(--grey-19);
   --border-modal-header-color: var(--grey-45);
-  --border-navtabs-color: var(--grey-19);
-  --border-form-section-title-color: var(--grey-26);
+  --border-navtabs-color: var(--ui-white);
+  --border-form-section-title-color: var(--grey-33);
   --border-codemirror-cursor-color: var(--black-color);
   --border-codemirror-gutters-color: var(--grey-19);
   --border-pre-color: var(--grey-43);
@@ -247,6 +255,8 @@
   --border-bootbox: var(--ui-gray-5);
   --border-blocklist: var(--ui-gray-5);
   --border-widget: var(--ui-gray-5);
+  --border-nav-container-color: var(--ui-gray-5);
+  --border-stepper-color: var(--ui-gray-4);
 
   --shadow-box-color: 0 3px 10px -2px var(--grey-50);
   --shadow-boxselector-color: 0 3px 10px -2px var(--grey-50);
@@ -283,8 +293,20 @@
   --bg-card-color: var(--grey-1);
   --bg-main-color: var(--grey-2);
   --bg-body-color: var(--grey-2);
+  --bg-btn-default-color: var(--grey-3);
+  --bg-blocklist-hover-color: var(--grey-iron-10);
+  --bg-boxselector-color: var(--grey-iron-10);
+  --bg-blocklist-item-selected-color: var(--grey-3);
+  --bg-boxselector-wrapper-disabled-color: var(--grey-39);
+  --bg-card-color: var(--grey-1);
   --bg-checkbox-border-color: var(--grey-8);
-  --bg-widget-color: var(--grey-1);
+  --bg-code-color: var(--ui-gray-warm-11);
+  --bg-codemirror-color: var(--ui-gray-warm-11);
+  --bg-codemirror-gutters-color: var(--ui-gray-warm-8);
+  --bg-codemirror-selected-color: var(--ui-gray-warm-7);
+  --bg-dropdown-menu-color: var(--grey-1);
+  --bg-main-color: var(--grey-2);
+  --bg-widget-color: var(--ui-gray-warm-10);
   --bg-widget-header-color: var(--grey-1);
   --bg-widget-table-color: var(--grey-1);
   --bg-header-color: var(--grey-2);
@@ -298,8 +320,7 @@
   --bg-md-checkbox-color: var(--grey-31);
   --bg-form-control-disabled-color: var(--grey-3);
   --bg-modal-content-color: var(--grey-1);
-  --bg-code-color: var(--red-4);
-  --bg-navtabs-color: var(--grey-3);
+  --bg-navtabs-color: var(--ui-gray-warm-11);
   --bg-navtabs-hover-color: var(--grey-3);
   --bg-table-selected-color: var(--grey-3);
   --bg-codemirror-color: var(--ui-gray-warm-11);
@@ -351,6 +372,11 @@
   --bg-webeditor-color: var(--ui-gray-warm-9);
   --bg-button-group-color: var(--ui-black);
   --bg-pagination-disabled-color: var(--grey-1);
+  --bg-nav-container-color: var(--ui-gray-iron-10);
+  --bg-code-script-color: var(--ui-gray-warm-11);
+  --bg-nav-tabs-active-color: var(--ui-gray-warm-9);
+  --bg-stepper-color: var(--ui-gray-iron-10);
+  --bg-stepper-active-color: var(--ui-blue-8);
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);
@@ -398,6 +424,9 @@
   --text-small-select-color: var(--grey-7);
   --text-bootbox: var(--white-color);
   --text-button-group-color: var(--ui-white);
+  --text-button-dangerlight-color: var(--ui-error-7);
+  --text-stepper-active-color: var(--ui-white);
+  --text-boxselector-header: var(--ui-white);
 
   --border-color: var(--grey-3);
   --border-widget-color: var(--grey-1);
@@ -434,6 +463,8 @@
   --border-blocklist: var(--ui-gray-9);
   --border-widget: var(--ui-gray-9);
   --border-pagination-color: var(--grey-1);
+  --border-nav-container-color: var(--ui-gray-neutral-8);
+  --border-stepper-color: var(--ui-gray-warm-9);
 
   --blue-color: var(--blue-2);
   --button-close-color: var(--white-color);
@@ -513,11 +544,9 @@
   --bg-pre-color: var(--grey-2);
   --bg-navtabs-hover-color: var(--grey-3);
   --bg-btn-default-color: var(--black-color);
-  --bg-code-color: var(--red-4);
   --bg-navtabs-color: var(--black-color);
   --bg-input-autofill-color: var(--black-color);
-  --bg-code-color: var(--grey-2);
-  --bg-navtabs-color: var(--grey-2);
+  --bg-code-color: var(--ui-black);
   --bg-navtabs-hover-color: var(--grey-3);
   --bg-btn-default-hover-color: var(--grey-3);
   --bg-btn-default-color: var(--black-color);
@@ -536,6 +565,11 @@
   --bg-webeditor-color: var(--ui-gray-warm-9);
   --bg-pagination-disabled-color: var(--ui-black);
   --bg-pagination-hover-color: var(--ui-black);
+  --bg-nav-container-color: var(--ui-black);
+  --bg-code-script-color: var(--ui-black);
+  --bg-nav-tabs-active-color: var(--ui-black);
+  --bg-stepper-active-color: var(--ui-blue-8);
+  --bg-stepper-color: var(--ui-black);
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);
@@ -578,6 +612,8 @@
   --text-pagination-span-color: var(--ui-white);
   --text-bootbox: var(--white-color);
   --text-pagination-span-hover-color: var(--ui-white);
+  --text-stepper-active-color: var(--ui-white);
+  --text-boxselector-header: var(--ui-white);
 
   --border-color: var(--grey-55);
   --border-widget-color: var(--white-color);
@@ -610,6 +646,8 @@
   --border-bootbox: var(--black-color);
   --border-blocklist: var(--white-color);
   --border-widget: var(--white-color);
+  --border-nav-container-color: var(--ui-white);
+  --border-stepper-color: var(--ui-gray-warm-9);
 
   --shadow-box-color: none;
   --shadow-boxselector-color: none;
diff --git a/app/assets/css/vendor-override.css b/app/assets/css/vendor-override.css
index a28609942..03f2dbcbb 100644
--- a/app/assets/css/vendor-override.css
+++ b/app/assets/css/vendor-override.css
@@ -427,12 +427,29 @@ fieldset[disabled] .btn {
 }
 
 .nav-tabs > li.active > a {
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
-  border-bottom: 3px solid red;
+  border: 0px;
 }
 
 .label-default {
   line-height: 11px;
 }
+
+/* Code Script Style */
+.code-script {
+  background-color: var(--bg-code-script-color);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 5px;
+}
+
+.nav-container {
+  border: 1px solid var(--border-nav-container-color);
+  background-color: var(--bg-nav-container-color);
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.nav-tabs > li {
+  background-color: var(--bg-nav-tabs-active-color);
+  border-top-right-radius: 8px;
+}
diff --git a/app/assets/ico/agent.svg b/app/assets/ico/agent.svg
new file mode 100644
index 000000000..31274e7f4
--- /dev/null
+++ b/app/assets/ico/agent.svg
@@ -0,0 +1,11 @@
+<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
+<g clip-path="url(#clip0_9538_418895)">
+<path d="M15.0049 13.2509L8.75488 20.7509H14.3799L13.7549 25.7509L20.0049 18.2509H14.3799L15.0049 13.2509Z" stroke="#0086C9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_9538_418895">
+<rect width="15" height="15" fill="white" transform="translate(6.87988 12.0009)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/app/assets/ico/api.svg b/app/assets/ico/api.svg
new file mode 100644
index 000000000..2ed7748bf
--- /dev/null
+++ b/app/assets/ico/api.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
+<path d="M9.32758 23.1544V23.0281C9.32758 21.9669 9.32758 21.4364 9.53409 21.0311C9.71574 20.6746 10.0056 20.3847 10.3621 20.2031C10.7674 19.9966 11.298 19.9966 12.3591 19.9966H16.4011C17.4622 19.9966 17.9928 19.9966 18.3981 20.2031C18.7546 20.3847 19.0444 20.6746 19.2261 21.0311C19.4326 21.4364 19.4326 21.9669 19.4326 23.0281V23.1544M9.32758 23.1544C8.62997 23.1544 8.06445 23.7199 8.06445 24.4175C8.06445 25.1151 8.62997 25.6806 9.32758 25.6806C10.0252 25.6806 10.5907 25.1151 10.5907 24.4175C10.5907 23.7199 10.0252 23.1544 9.32758 23.1544ZM19.4326 23.1544C18.735 23.1544 18.1695 23.7199 18.1695 24.4175C18.1695 25.1151 18.735 25.6806 19.4326 25.6806C20.1302 25.6806 20.6957 25.1151 20.6957 24.4175C20.6957 23.7199 20.1302 23.1544 19.4326 23.1544ZM14.3801 23.1544C13.6825 23.1544 13.117 23.7199 13.117 24.4175C13.117 25.1151 13.6825 25.6806 14.3801 25.6806C15.0777 25.6806 15.6432 25.1151 15.6432 24.4175C15.6432 23.7199 15.0777 23.1544 14.3801 23.1544ZM14.3801 23.1544V16.8388M10.5907 16.8388H18.1695C18.758 16.8388 19.0523 16.8388 19.2844 16.7426C19.5939 16.6144 19.8398 16.3685 19.968 16.059C20.0641 15.8269 20.0641 15.5326 20.0641 14.9441C20.0641 14.3555 20.0641 14.0613 19.968 13.8291C19.8398 13.5196 19.5939 13.2737 19.2844 13.1455C19.0523 13.0494 18.758 13.0494 18.1695 13.0494H10.5907C10.0022 13.0494 9.70789 13.0494 9.47576 13.1455C9.16626 13.2737 8.92036 13.5196 8.79217 13.8291C8.69602 14.0613 8.69602 14.3555 8.69602 14.9441C8.69602 15.5326 8.69602 15.8269 8.79217 16.059C8.92036 16.3685 9.16626 16.6144 9.47576 16.7426C9.70789 16.8388 10.0022 16.8388 10.5907 16.8388Z" stroke="#0086C9" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/assets/ico/cloud.svg b/app/assets/ico/cloud.svg
new file mode 100644
index 000000000..e4d541039
--- /dev/null
+++ b/app/assets/ico/cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
\ No newline at end of file
diff --git a/app/assets/ico/edge-agent.svg b/app/assets/ico/edge-agent.svg
new file mode 100644
index 000000000..a3e45f36a
--- /dev/null
+++ b/app/assets/ico/edge-agent.svg
@@ -0,0 +1,11 @@
+<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
+<g clip-path="url(#clip0_9538_418898)">
+<path d="M18.1297 18.2509H17.3422C17.1084 17.3452 16.6252 16.5233 15.9476 15.8786C15.27 15.2339 14.4252 14.7921 13.509 14.6035C12.5929 14.415 11.6423 14.4871 10.7651 14.8118C9.88797 15.1366 9.11948 15.7008 8.54699 16.4405C7.9745 17.1801 7.62095 18.0655 7.52652 18.9961C7.4321 19.9266 7.60058 20.865 8.01282 21.7046C8.42506 22.5442 9.06453 23.2513 9.85857 23.7456C10.6526 24.2399 11.5694 24.5016 12.5047 24.5009H18.1297C18.9585 24.5009 19.7534 24.1716 20.3394 23.5856C20.9255 22.9995 21.2547 22.2047 21.2547 21.3759C21.2547 20.5471 20.9255 19.7522 20.3394 19.1661C19.7534 18.5801 18.9585 18.2509 18.1297 18.2509Z" stroke="#0086C9" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_9538_418898">
+<rect width="15" height="15" fill="white" transform="translate(6.87988 12.0009)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/app/assets/ico/import.svg b/app/assets/ico/import.svg
new file mode 100644
index 000000000..570da8ed2
--- /dev/null
+++ b/app/assets/ico/import.svg
@@ -0,0 +1,11 @@
+<svg width="37" height="40" viewBox="0 0 37 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8817 5.28003C22.6592 5.28003 28.9649 11.5865 28.9649 19.365C28.9649 27.1435 22.6592 33.45 14.8817 33.45C7.10065 33.4535 0.794922 27.1435 0.794922 19.365C0.794922 11.5865 7.10065 5.28003 14.8817 5.28003Z" fill="#E0F2FE"/>
+<g clip-path="url(#clip0_9540_418847)">
+<path d="M17.3803 22.0008L14.8803 19.5008M14.8803 19.5008L12.3803 22.0008M14.8803 19.5008V25.1258M20.124 23.4946C20.7336 23.1623 21.2152 22.6364 21.4927 22C21.7702 21.3636 21.8279 20.6529 21.6567 19.98C21.4854 19.3072 21.095 18.7105 20.547 18.2842C19.9989 17.858 19.3246 17.6263 18.6303 17.6258H17.8428C17.6536 16.8941 17.301 16.2148 16.8115 15.639C16.322 15.0631 15.7083 14.6058 15.0166 14.3012C14.3249 13.9967 13.5731 13.8529 12.8179 13.8808C12.0626 13.9086 11.3235 14.1073 10.656 14.4619C9.98859 14.8165 9.41023 15.3178 8.96442 15.9281C8.51862 16.5384 8.21697 17.2418 8.08215 17.9855C7.94733 18.7291 7.98285 19.4937 8.18604 20.2216C8.38924 20.9496 8.75481 21.622 9.25529 22.1883" stroke="#0086C9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_9540_418847">
+<rect width="15" height="15" fill="white" transform="translate(7.37988 12.0009)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/app/assets/ico/socket.svg b/app/assets/ico/socket.svg
new file mode 100644
index 000000000..b3974e2bc
--- /dev/null
+++ b/app/assets/ico/socket.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
+<path d="M14.3797 23.5025C16.98 23.5025 19.0879 21.3946 19.0879 18.7943L19.0879 16.3519L16.7331 16.3519M14.3797 23.5025C11.7795 23.5025 9.67156 21.3946 9.67156 18.7943L9.67156 16.3519L16.7331 16.3519M14.3797 23.5025C14.3797 24.9593 14.3797 26.5726 16.7331 26.5726L17.7794 26.5726M16.7331 16.3519L16.7331 13.4274M12.0216 16.3519L12.0216 13.4274" stroke="#0086C9" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/assets/ico/upload-cloud.svg b/app/assets/ico/upload-cloud.svg
new file mode 100644
index 000000000..419c88656
--- /dev/null
+++ b/app/assets/ico/upload-cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
\ No newline at end of file
diff --git a/app/assets/ico/wizard/agent.svg b/app/assets/ico/wizard/agent.svg
new file mode 100644
index 000000000..31274e7f4
--- /dev/null
+++ b/app/assets/ico/wizard/agent.svg
@@ -0,0 +1,11 @@
+<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
+<g clip-path="url(#clip0_9538_418895)">
+<path d="M15.0049 13.2509L8.75488 20.7509H14.3799L13.7549 25.7509L20.0049 18.2509H14.3799L15.0049 13.2509Z" stroke="#0086C9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_9538_418895">
+<rect width="15" height="15" fill="white" transform="translate(6.87988 12.0009)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/app/assets/ico/wizard/api.svg b/app/assets/ico/wizard/api.svg
new file mode 100644
index 000000000..2ed7748bf
--- /dev/null
+++ b/app/assets/ico/wizard/api.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
+<path d="M9.32758 23.1544V23.0281C9.32758 21.9669 9.32758 21.4364 9.53409 21.0311C9.71574 20.6746 10.0056 20.3847 10.3621 20.2031C10.7674 19.9966 11.298 19.9966 12.3591 19.9966H16.4011C17.4622 19.9966 17.9928 19.9966 18.3981 20.2031C18.7546 20.3847 19.0444 20.6746 19.2261 21.0311C19.4326 21.4364 19.4326 21.9669 19.4326 23.0281V23.1544M9.32758 23.1544C8.62997 23.1544 8.06445 23.7199 8.06445 24.4175C8.06445 25.1151 8.62997 25.6806 9.32758 25.6806C10.0252 25.6806 10.5907 25.1151 10.5907 24.4175C10.5907 23.7199 10.0252 23.1544 9.32758 23.1544ZM19.4326 23.1544C18.735 23.1544 18.1695 23.7199 18.1695 24.4175C18.1695 25.1151 18.735 25.6806 19.4326 25.6806C20.1302 25.6806 20.6957 25.1151 20.6957 24.4175C20.6957 23.7199 20.1302 23.1544 19.4326 23.1544ZM14.3801 23.1544C13.6825 23.1544 13.117 23.7199 13.117 24.4175C13.117 25.1151 13.6825 25.6806 14.3801 25.6806C15.0777 25.6806 15.6432 25.1151 15.6432 24.4175C15.6432 23.7199 15.0777 23.1544 14.3801 23.1544ZM14.3801 23.1544V16.8388M10.5907 16.8388H18.1695C18.758 16.8388 19.0523 16.8388 19.2844 16.7426C19.5939 16.6144 19.8398 16.3685 19.968 16.059C20.0641 15.8269 20.0641 15.5326 20.0641 14.9441C20.0641 14.3555 20.0641 14.0613 19.968 13.8291C19.8398 13.5196 19.5939 13.2737 19.2844 13.1455C19.0523 13.0494 18.758 13.0494 18.1695 13.0494H10.5907C10.0022 13.0494 9.70789 13.0494 9.47576 13.1455C9.16626 13.2737 8.92036 13.5196 8.79217 13.8291C8.69602 14.0613 8.69602 14.3555 8.69602 14.9441C8.69602 15.5326 8.69602 15.8269 8.79217 16.059C8.92036 16.3685 9.16626 16.6144 9.47576 16.7426C9.70789 16.8388 10.0022 16.8388 10.5907 16.8388Z" stroke="#0086C9" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/assets/ico/wizard/edge-agent.svg b/app/assets/ico/wizard/edge-agent.svg
new file mode 100644
index 000000000..a3e45f36a
--- /dev/null
+++ b/app/assets/ico/wizard/edge-agent.svg
@@ -0,0 +1,11 @@
+<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
+<g clip-path="url(#clip0_9538_418898)">
+<path d="M18.1297 18.2509H17.3422C17.1084 17.3452 16.6252 16.5233 15.9476 15.8786C15.27 15.2339 14.4252 14.7921 13.509 14.6035C12.5929 14.415 11.6423 14.4871 10.7651 14.8118C9.88797 15.1366 9.11948 15.7008 8.54699 16.4405C7.9745 17.1801 7.62095 18.0655 7.52652 18.9961C7.4321 19.9266 7.60058 20.865 8.01282 21.7046C8.42506 22.5442 9.06453 23.2513 9.85857 23.7456C10.6526 24.2399 11.5694 24.5016 12.5047 24.5009H18.1297C18.9585 24.5009 19.7534 24.1716 20.3394 23.5856C20.9255 22.9995 21.2547 22.2047 21.2547 21.3759C21.2547 20.5471 20.9255 19.7522 20.3394 19.1661C19.7534 18.5801 18.9585 18.2509 18.1297 18.2509Z" stroke="#0086C9" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_9538_418898">
+<rect width="15" height="15" fill="white" transform="translate(6.87988 12.0009)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/app/assets/ico/wizard/import.svg b/app/assets/ico/wizard/import.svg
new file mode 100644
index 000000000..570da8ed2
--- /dev/null
+++ b/app/assets/ico/wizard/import.svg
@@ -0,0 +1,11 @@
+<svg width="37" height="40" viewBox="0 0 37 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8817 5.28003C22.6592 5.28003 28.9649 11.5865 28.9649 19.365C28.9649 27.1435 22.6592 33.45 14.8817 33.45C7.10065 33.4535 0.794922 27.1435 0.794922 19.365C0.794922 11.5865 7.10065 5.28003 14.8817 5.28003Z" fill="#E0F2FE"/>
+<g clip-path="url(#clip0_9540_418847)">
+<path d="M17.3803 22.0008L14.8803 19.5008M14.8803 19.5008L12.3803 22.0008M14.8803 19.5008V25.1258M20.124 23.4946C20.7336 23.1623 21.2152 22.6364 21.4927 22C21.7702 21.3636 21.8279 20.6529 21.6567 19.98C21.4854 19.3072 21.095 18.7105 20.547 18.2842C19.9989 17.858 19.3246 17.6263 18.6303 17.6258H17.8428C17.6536 16.8941 17.301 16.2148 16.8115 15.639C16.322 15.0631 15.7083 14.6058 15.0166 14.3012C14.3249 13.9967 13.5731 13.8529 12.8179 13.8808C12.0626 13.9086 11.3235 14.1073 10.656 14.4619C9.98859 14.8165 9.41023 15.3178 8.96442 15.9281C8.51862 16.5384 8.21697 17.2418 8.08215 17.9855C7.94733 18.7291 7.98285 19.4937 8.18604 20.2216C8.38924 20.9496 8.75481 21.622 9.25529 22.1883" stroke="#0086C9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_9540_418847">
+<rect width="15" height="15" fill="white" transform="translate(7.37988 12.0009)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/app/assets/ico/wizard/socket.svg b/app/assets/ico/wizard/socket.svg
new file mode 100644
index 000000000..b3974e2bc
--- /dev/null
+++ b/app/assets/ico/wizard/socket.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
+<path d="M14.3797 23.5025C16.98 23.5025 19.0879 21.3946 19.0879 18.7943L19.0879 16.3519L16.7331 16.3519M14.3797 23.5025C11.7795 23.5025 9.67156 21.3946 9.67156 18.7943L9.67156 16.3519L16.7331 16.3519M14.3797 23.5025C14.3797 24.9593 14.3797 26.5726 16.7331 26.5726L17.7794 26.5726M16.7331 16.3519L16.7331 13.4274M12.0216 16.3519L12.0216 13.4274" stroke="#0086C9" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/assets/ico/zap.svg b/app/assets/ico/zap.svg
new file mode 100644
index 000000000..7689bf45d
--- /dev/null
+++ b/app/assets/ico/zap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
\ No newline at end of file
diff --git a/app/react/components/BoxSelector/BoxSelectorItem.css b/app/react/components/BoxSelector/BoxSelectorItem.css
index 723b8d592..37f6a7f28 100644
--- a/app/react/components/BoxSelector/BoxSelectorItem.css
+++ b/app/react/components/BoxSelector/BoxSelectorItem.css
@@ -10,6 +10,8 @@
   margin-bottom: 5px;
   font-weight: bold;
   user-select: none;
+  color: var(--text-boxselector-header);
+  padding: 0px 10px;
 }
 
 .boxselector_header .fa,
@@ -115,6 +117,16 @@
   padding-left: 20px;
 }
 
+.boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
+.box-selector-item input[type='radio']:not(:disabled) ~ label {
+  background-color: var(--bg-boxselector-color);
+}
+
+.boxselector_img_container {
+  line-height: 90px;
+  margin-bottom: 0;
+}
+
 .box-selector-item p {
   margin-bottom: 0;
 }
diff --git a/app/react/components/NavTabs/NavTabs.tsx b/app/react/components/NavTabs/NavTabs.tsx
index 4d7740d5d..2c2d2257d 100644
--- a/app/react/components/NavTabs/NavTabs.tsx
+++ b/app/react/components/NavTabs/NavTabs.tsx
@@ -19,7 +19,7 @@ export function NavTabs({ options, selectedId, onSelect = () => {} }: Props) {
   const selected = options.find((option) => option.id === selectedId);
 
   return (
-    <>
+    <div className="nav-container">
       <ul className="nav nav-tabs">
         {options.map((option) => (
           <li
@@ -49,7 +49,7 @@ export function NavTabs({ options, selectedId, onSelect = () => {} }: Props) {
       {selected && selected.children && (
         <div className="tab-content">{selected.children}</div>
       )}
-    </>
+    </div>
   );
 
   function handleSelect(option: Option) {
diff --git a/app/react/components/Stepper/Stepper.module.css b/app/react/components/Stepper/Stepper.module.css
index f74c1cc8f..4dba12795 100644
--- a/app/react/components/Stepper/Stepper.module.css
+++ b/app/react/components/Stepper/Stepper.module.css
@@ -18,18 +18,18 @@
   position: absolute;
   content: '';
   width: 100%;
-  top: 20px;
+  top: 15px;
   left: -100%;
   z-index: 2;
-  border-bottom: 5px solid var(--bg-stepper-item-counter);
+  border-bottom: 3px solid var(--border-stepper-color);
 }
 
 .step-wrapper::after {
   position: absolute;
   content: '';
-  border-bottom: 5px solid var(--bg-stepper-item-counter);
+  border-bottom: 3px solid var(--border-stepper-color);
   width: 100%;
-  top: 20px;
+  top: 15px;
   left: 0;
   z-index: 2;
 }
@@ -46,11 +46,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
-  background: var(--bg-stepper-item-counter);
+  /* background: var(--ui-white); */
+  background: var(--bg-stepper-color);
   margin-bottom: 6px;
+  border: 1px solid var(--ui-gray-6);
 }
 
 .step-wrapper.active {
@@ -59,27 +61,29 @@
 }
 
 .step-wrapper.active .step {
-  background: #337ab7;
+  background: var(--bg-stepper-active-color);
+  border: 2px solid var(--ui-blue-8);
 }
 
 .step-wrapper.active .step-counter {
-  color: #fff;
+  color: var(--text-stepper-active-color);
 }
 
 .step-wrapper.completed .step {
-  background-color: #48b400;
+  background: var(--bg-stepper-active-color);
+  border: 2px solid var(--ui-blue-8);
 }
 
 .step-wrapper.completed .step-counter {
-  color: #fff;
+  color: var(--text-stepper-active-color);
 }
 
 .step-wrapper.completed::after {
   position: absolute;
   content: '';
-  border-bottom: 5px solid #48b400;
+  border-bottom: 3px solid var(--ui-blue-8);
   width: 100%;
-  top: 20px;
+  top: 15px;
   left: 0;
   z-index: 3;
 }
diff --git a/app/react/components/Svg.tsx b/app/react/components/Svg.tsx
index e96d8d9f3..0c93335ad 100644
--- a/app/react/components/Svg.tsx
+++ b/app/react/components/Svg.tsx
@@ -3,6 +3,12 @@ import automode from '@/assets/ico/theme/auto.svg?c';
 import darkmode from '@/assets/ico/theme/darkmode.svg?c';
 import lightmode from '@/assets/ico/theme/lightmode.svg?c';
 import highcontrastmode from '@/assets/ico/theme/highcontrastmode.svg?c';
+// wizard icons
+import agent from '@/assets/ico/wizard/agent.svg?c';
+import api from '@/assets/ico/wizard/api.svg?c';
+import edgeagent from '@/assets/ico/wizard/edge-agent.svg?c';
+import cloudimport from '@/assets/ico/wizard/import.svg?c';
+import socket from '@/assets/ico/wizard/socket.svg?c';
 // general icons
 import arrowsupdown from '@/assets/ico/arrows-updown.svg?c';
 import arrowright from '@/assets/ico/arrow-right-long.svg?c';
@@ -25,6 +31,7 @@ import heartbeat from '@/assets/ico/heartbeat.svg?c';
 import laptop from '@/assets/ico/laptop.svg?c';
 import laptopcode from '@/assets/ico/laptop-code.svg?c';
 import ldap from '@/assets/ico/ldap.svg?c';
+import magic from '@/assets/ico/magic.svg?c';
 import magicwand from '@/assets/ico/magic-wand.svg?c';
 import memory from '@/assets/ico/memory.svg?c';
 import objectgroup from '@/assets/ico/object-group.svg?c';
@@ -71,6 +78,11 @@ import internal from '@/assets/ico/vendor/internal.svg?c';
 const placeholder = Placeholder;
 
 export const SvgIcons = {
+  agent,
+  api,
+  edgeagent,
+  cloudimport,
+  socket,
   automode,
   darkmode,
   lightmode,
@@ -96,6 +108,7 @@ export const SvgIcons = {
   laptop,
   laptopcode,
   ldap,
+  magic,
   magicwand,
   memory,
   objectgroup,
diff --git a/app/react/components/form-components/FileUpload/FileUploadField.tsx b/app/react/components/form-components/FileUpload/FileUploadField.tsx
index fb7dc076d..2b7179be2 100644
--- a/app/react/components/form-components/FileUpload/FileUploadField.tsx
+++ b/app/react/components/form-components/FileUpload/FileUploadField.tsx
@@ -46,7 +46,7 @@ export function FileUploadField({
       </Button>
 
       <span className="vertical-center">
-        {value ? value.name : <Icon icon="x" feather mode="danger" />}
+        {value ? value.name : <Icon icon="x-circle" feather mode="danger" />}
       </span>
     </div>
   );
diff --git a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx
index 8ee8726ae..e4de5573b 100644
--- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx
@@ -33,7 +33,7 @@ export function EnvironmentTypeSelectView() {
       <div className="row">
         <div className="col-sm-12">
           <Widget>
-            <WidgetTitle icon="fa-magic" title="Environment Wizard" />
+            <WidgetTitle icon="svg-magic" title="Environment Wizard" />
             <WidgetBody>
               <EnvironmentSelector
                 value={types}
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx
index 38376e6ad..051d94e0f 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx
@@ -12,6 +12,7 @@ import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
 import { PageHeader } from '@@/PageHeader';
 import { Button } from '@@/buttons';
 import { FormSection } from '@@/form-components/FormSection';
+import { Icon } from '@@/Icon';
 
 import { environmentTypes } from '../EnvironmentTypeSelectView/environment-types';
 import { EnvironmentSelectorValue } from '../EnvironmentTypeSelectView/EnvironmentSelector';
@@ -65,7 +66,7 @@ export function EnvironmentCreationView() {
 
       <div className={styles.wizardWrapper}>
         <Widget>
-          <WidgetTitle icon="fa-magic" title="Environment Wizard" />
+          <WidgetTitle icon="svg-magic" title="Environment Wizard" />
           <WidgetBody>
             <Stepper steps={steps} currentStep={currentStepIndex + 1} />
 
@@ -83,11 +84,11 @@ export function EnvironmentCreationView() {
                   )}
                 >
                   <Button disabled={isFirstStep} onClick={onPreviousClick}>
-                    <i className="fas fa-arrow-left space-right" /> Previous
+                    <Icon icon="arrow-left" feather /> Previous
                   </Button>
                   <Button onClick={onNextClick}>
-                    {isLastStep ? 'Finish' : 'Next'}
-                    <i className="fas fa-arrow-right space-left" />
+                    {isLastStep ? 'Close' : 'Next'}
+                    <Icon icon="arrow-right" feather />
                   </Button>
                 </div>
               </FormSection>
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardAzure/WizardAzure.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardAzure/WizardAzure.tsx
index 641aac38e..16cba1141 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardAzure/WizardAzure.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardAzure/WizardAzure.tsx
@@ -12,6 +12,7 @@ import { LoadingButton } from '@@/buttons/LoadingButton';
 import { Input } from '@@/form-components/Input';
 import { FormControl } from '@@/form-components/FormControl';
 import { BoxSelector } from '@@/BoxSelector';
+import { Icon } from '@@/Icon';
 
 import { NameField, nameValidation } from '../shared/NameField';
 import { AnalyticsStateKey } from '../types';
@@ -37,7 +38,7 @@ const initialValues: FormValues = {
   },
 };
 
-const options = [buildOption('api', 'fa fa-bolt', 'API', '', 'api')];
+const options = [buildOption('api', 'svg-api', 'API', '', 'api')];
 
 interface Props {
   onCreate(environment: Environment, analytics: AnalyticsStateKey): void;
@@ -116,11 +117,16 @@ export function WizardAzure({ onCreate }: Props) {
             <div className="row">
               <div className="col-sm-12">
                 <LoadingButton
+                  className="vertical-center"
                   loadingText="Connecting environment..."
                   isLoading={mutation.isLoading}
                   disabled={!dirty || !isValid}
                 >
-                  <i className="fa fa-plug" aria-hidden="true" /> Connect
+                  <Icon
+                    icon="svg-plug"
+                    className="icon icon-sm vertical-center"
+                  />{' '}
+                  Connect
                 </LoadingButton>
               </div>
             </div>
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx
index 679afd1d8..f595856cc 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx
@@ -12,6 +12,7 @@ import {
 import { LoadingButton } from '@@/buttons/LoadingButton';
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
+import { Icon } from '@@/Icon';
 
 import { NameField } from '../../shared/NameField';
 import { MoreSettingsSection } from '../../shared/MoreSettingsSection';
@@ -76,12 +77,16 @@ export function APIForm({ onCreate }: Props) {
           <div className="form-group">
             <div className="col-sm-12">
               <LoadingButton
-                className="wizard-connect-button"
+                className="wizard-connect-button vertical-center"
                 loadingText="Connecting environment..."
                 isLoading={mutation.isLoading}
                 disabled={!dirty || !isValid}
               >
-                <i className="fa fa-plug" aria-hidden="true" /> Connect
+                <Icon
+                  icon="svg-plug"
+                  className="icon icon-sm vertical-center"
+                />{' '}
+                Connect
               </LoadingButton>
             </div>
           </div>
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx
index 7ff66d7f5..dae3187a0 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx
@@ -59,7 +59,9 @@ function DeployCode({ code }: DeployCodeProps) {
       <span className="text-muted small">
         CLI script for installing agent on your environment with Docker Swarm:
       </span>
-      <Code>{code}</Code>
+      <div className="code-script">
+        <Code>{code}</Code>
+      </div>
       <CopyButton copyText={code}>Copy command</CopyButton>
     </>
   );
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx
index f716a7f05..62cd2590a 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx
@@ -10,6 +10,7 @@ import { LoadingButton } from '@@/buttons/LoadingButton';
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
 import { SwitchField } from '@@/form-components/SwitchField';
+import { Icon } from '@@/Icon';
 
 import { NameField } from '../../shared/NameField';
 import { MoreSettingsSection } from '../../shared/MoreSettingsSection';
@@ -54,12 +55,16 @@ export function SocketForm({ onCreate }: Props) {
           <div className="form-group">
             <div className="col-sm-12">
               <LoadingButton
-                className="wizard-connect-button"
+                className="wizard-connect-button vertical-center"
                 loadingText="Connecting environment..."
                 isLoading={mutation.isLoading}
                 disabled={!dirty || !isValid}
               >
-                <i className="fa fa-plug" aria-hidden="true" /> Connect
+                <Icon
+                  icon="svg-plug"
+                  className="icon icon-sm vertical-center"
+                />{' '}
+                Connect
               </LoadingButton>
             </div>
           </div>
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx
index 2c8a366e0..a0397f6c9 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx
@@ -22,28 +22,28 @@ const defaultOptions: BoxSelectorOption<
 >[] = [
   {
     id: 'agent',
-    icon: 'fa fa-bolt',
+    icon: 'svg-agent',
     label: 'Agent',
     description: '',
     value: 'agent',
   },
   {
     id: 'api',
-    icon: 'fa fa-cloud',
+    icon: 'svg-api',
     label: 'API',
     description: '',
     value: 'api',
   },
   {
     id: 'socket',
-    icon: 'fab fa-docker',
+    icon: 'svg-socket',
     label: 'Socket',
     description: '',
     value: 'socket',
   },
   {
     id: 'edgeAgent',
-    icon: 'fa fa-cloud', // Todo cloud with docker
+    icon: 'svg-edgeagent',
     label: 'Edge Agent',
     description: '',
     value: 'edgeAgent',
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.tsx
index a927b531c..f77c68544 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.tsx
@@ -44,7 +44,7 @@ export function WizardEndpointsList({ environmentIds }: Props) {
 
   return (
     <Widget>
-      <WidgetTitle icon="fa-plug" title="New Environments" />
+      <WidgetTitle icon="svg-plug" title="New Environments" />
       <WidgetBody>
         {environments.map((environment) => (
           <div className={styles.wizardListWrapper} key={environment.Id}>
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
index 6fa4e4477..d36f15e35 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
@@ -5,6 +5,7 @@ import { FormControl } from '@@/form-components/FormControl';
 import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 import { Input } from '@@/form-components/Input';
 import { Button } from '@@/buttons';
+import { TextTip } from '@@/Tip/TextTip';
 
 const initialValues = {
   kubeConfig: '',
@@ -24,26 +25,22 @@ export function KubeConfigTeaserForm() {
 
           <div className="form-group">
             <div className="col-sm-12">
-              <span className="text-primary">
-                <i
-                  className="fa fa-exclamation-circle space-right"
-                  aria-hidden="true"
-                />
-              </span>
-              <span className="text-muted small">
-                Import the
-                <a
-                  href="https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/"
-                  target="_blank"
-                  className="space-right space-left"
-                  rel="noreferrer"
-                >
-                  kubeconfig file
-                </a>
-                of an existing Kubernetes cluster located on-premise or on a
-                cloud platform. This will create a corresponding environment in
-                Portainer and install the agent on the cluster. Please ensure:
-              </span>
+              <TextTip color="blue">
+                <span className="text-muted">
+                  <a
+                    href="https://docs.portainer.io/start/install/agent/kubernetes/import"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="mx-1"
+                  >
+                    Import the kubeconfig file
+                  </a>
+                  of an existing Kubernetes cluster located on-premise or on a
+                  cloud platform. This will create a corresponding environment
+                  in Portainer and install the agent on the cluster. Please
+                  ensure:
+                </span>
+              </TextTip>
             </div>
             <div className="col-sm-12 text-muted small">
               <ul className="p-2 pl-4">
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx
index ac5f1f15f..5f18aefa5 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx
@@ -25,14 +25,14 @@ interface Props {
 const defaultOptions: BoxSelectorOption<EnvironmentCreationTypes>[] = [
   {
     id: 'agent_endpoint',
-    icon: 'fa fa-bolt',
+    icon: 'svg-agent',
     label: 'Agent',
     value: EnvironmentCreationTypes.AgentEnvironment,
     description: '',
   },
   {
     id: 'edgeAgent',
-    icon: 'fa fa-cloud', // Todo cloud with docker
+    icon: 'svg-edgeagent',
     label: 'Edge Agent',
     description: '',
     value: EnvironmentCreationTypes.EdgeAgentEnvironment,
@@ -40,7 +40,7 @@ const defaultOptions: BoxSelectorOption<EnvironmentCreationTypes>[] = [
   },
   {
     id: 'kubeconfig_endpoint',
-    icon: 'fas fa-cloud-upload-alt',
+    icon: 'svg-cloudimport',
     label: 'Import',
     value: EnvironmentCreationTypes.KubeConfigEnvironment,
     description: 'Import an existing Kubernetes config',
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
index dee69639c..b20b6dab7 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
@@ -7,6 +7,7 @@ import { Environment } from '@/portainer/environments/types';
 import { CreateAgentEnvironmentValues } from '@/portainer/environments/environment.service/create';
 
 import { LoadingButton } from '@@/buttons/LoadingButton';
+import { Icon } from '@@/Icon';
 
 import { NameField } from '../NameField';
 import { MoreSettingsSection } from '../MoreSettingsSection';
@@ -53,12 +54,16 @@ export function AgentForm({ onCreate, showGpus = false }: Props) {
           <div className="form-group">
             <div className="col-sm-12">
               <LoadingButton
-                className="wizard-connect-button"
+                className="wizard-connect-button vertical-center"
                 loadingText="Connecting environment..."
                 isLoading={mutation.isLoading}
                 disabled={!dirty || !isValid}
               >
-                <i className="fa fa-plug" aria-hidden="true" /> Connect
+                <Icon
+                  icon="svg-plug"
+                  className="icon icon-sm vertical-center"
+                />{' '}
+                Connect
               </LoadingButton>
             </div>
           </div>
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx
index ca6c818c6..df8569e91 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx
@@ -8,6 +8,7 @@ import { useCreateEdgeDeviceParam } from '@/react/portainer/environments/wizard/
 
 import { FormSection } from '@@/form-components/FormSection';
 import { LoadingButton } from '@@/buttons/LoadingButton';
+import { Icon } from '@@/Icon';
 
 import { MoreSettingsSection } from '../../MoreSettingsSection';
 import { Hardware } from '../../Hardware/Hardware';
@@ -55,11 +56,15 @@ export function EdgeAgentForm({ onCreate, readonly, showGpus = false }: Props) {
             <div className="row">
               <div className="col-sm-12">
                 <LoadingButton
+                  className="vertical-center"
                   isLoading={createMutation.isLoading}
                   loadingText="Creating environment..."
                   disabled={!isValid}
                 >
-                  <i className="fa fa-plug space-right" />
+                  <Icon
+                    icon="svg-plug"
+                    className="icon icon-sm vertical-center"
+                  />
                   Create
                 </LoadingButton>
               </div>
diff --git a/app/react/portainer/environments/wizard/HomeView/HomeView.tsx b/app/react/portainer/environments/wizard/HomeView/HomeView.tsx
index f271c015f..23f61eb0f 100644
--- a/app/react/portainer/environments/wizard/HomeView/HomeView.tsx
+++ b/app/react/portainer/environments/wizard/HomeView/HomeView.tsx
@@ -23,7 +23,7 @@ export function HomeView() {
       <div className="row">
         <div className="col-sm-12">
           <Widget>
-            <WidgetTitle title="Environment Wizard" icon="fa-magic" />
+            <WidgetTitle title="Environment Wizard" icon="svg-magic" />
             <WidgetBody>
               <div className="row">
                 <div className="col-sm-12 form-section-title">
@@ -32,7 +32,7 @@ export function HomeView() {
                 <div className="text-muted small">
                   {localEnvironmentAdded.status === 'success' && (
                     <p>
-                      We have connected your local environment of
+                      We have connected your local environment of{' '}
                       {getTypeLabel(localEnvironmentAdded.type)} to Portainer.
                     </p>
                   )}