From 67d9ebf11fb8cf521956e6086673e3b36506d4e7 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Fri, 27 Feb 2026 16:33:37 +0800
Subject: [PATCH] cenvert to component

---
 .../app/components/fields/styles.module.css   |   5 +-
 frontend/src/app/components/icons/add.jsx     |  33 +++
 frontend/src/app/components/icons/back.jsx    |  38 +++
 frontend/src/app/components/icons/check.jsx   |  24 ++
 frontend/src/app/components/icons/clone.jsx   |  41 +++
 .../src/app/components/icons/download.jsx     |  53 ++++
 frontend/src/app/components/icons/env.jsx     |  45 +++
 frontend/src/app/components/icons/key.jsx     |  23 ++
 .../src/app/components/icons/manageEnv.jsx    |  23 ++
 frontend/src/app/components/icons/menu.jsx    |  41 +++
 frontend/src/app/components/icons/robot.jsx   |  23 ++
 frontend/src/app/components/icons/search.jsx  |  24 ++
 .../src/app/components/sidebar/Sidebar.jsx    |  46 +--
 .../app/components/topHeader/TopHeader.jsx    | 270 ++----------------
 14 files changed, 394 insertions(+), 295 deletions(-)
 create mode 100644 frontend/src/app/components/icons/add.jsx
 create mode 100644 frontend/src/app/components/icons/back.jsx
 create mode 100644 frontend/src/app/components/icons/check.jsx
 create mode 100644 frontend/src/app/components/icons/clone.jsx
 create mode 100644 frontend/src/app/components/icons/download.jsx
 create mode 100644 frontend/src/app/components/icons/env.jsx
 create mode 100644 frontend/src/app/components/icons/key.jsx
 create mode 100644 frontend/src/app/components/icons/manageEnv.jsx
 create mode 100644 frontend/src/app/components/icons/menu.jsx
 create mode 100644 frontend/src/app/components/icons/robot.jsx
 create mode 100644 frontend/src/app/components/icons/search.jsx

diff --git a/frontend/src/app/components/fields/styles.module.css b/frontend/src/app/components/fields/styles.module.css
index d385586..1fd8258 100644
--- a/frontend/src/app/components/fields/styles.module.css
+++ b/frontend/src/app/components/fields/styles.module.css
@@ -19,9 +19,10 @@
   line-height: normal;
   caret-color: #575bc7;
 }
-.input:focus {
+.input:focus,
+.input:active {
   border-radius: 6px;
-  border: 1px solid #a8aac1;
+  border: 1px solid #959aff;
   background: rgba(75, 79, 109, 0.25);
 }
 .input:hover {
diff --git a/frontend/src/app/components/icons/add.jsx b/frontend/src/app/components/icons/add.jsx
new file mode 100644
index 0000000..f9690a1
--- /dev/null
+++ b/frontend/src/app/components/icons/add.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+const AddIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M10 4.41016V15.5907"
+        stroke="currentColor"
+        strokeOpacity={1}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.41016 10H15.5907"
+        stroke="currentColor"
+        strokeOpacity={1}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default AddIcon;
diff --git a/frontend/src/app/components/icons/back.jsx b/frontend/src/app/components/icons/back.jsx
new file mode 100644
index 0000000..d56d2f3
--- /dev/null
+++ b/frontend/src/app/components/icons/back.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+const BackIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M5 12H19"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 12L11 18"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 12L11 6"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default BackIcon;
diff --git a/frontend/src/app/components/icons/check.jsx b/frontend/src/app/components/icons/check.jsx
new file mode 100644
index 0000000..510727f
--- /dev/null
+++ b/frontend/src/app/components/icons/check.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const CheckIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
+        stroke="white"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CheckIcon;
diff --git a/frontend/src/app/components/icons/clone.jsx b/frontend/src/app/components/icons/clone.jsx
new file mode 100644
index 0000000..d58a222
--- /dev/null
+++ b/frontend/src/app/components/icons/clone.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+const CloneIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M7.20898 9.76388C7.20898 9.08602 7.47826 8.43593 7.95758 7.95661C8.4369 7.47729 9.087 7.20801 9.76486 7.20801H18.0698C18.7476 7.20801 19.3977 7.47729 19.8771 7.95661C20.3564 8.43593 20.6257 9.08602 20.6257 9.76388V18.0688C20.6257 18.7467 20.3564 19.3968 19.8771 19.8761C19.3977 20.3554 18.7476 20.6247 18.0698 20.6247H9.76486C9.087 20.6247 8.4369 20.3554 7.95758 19.8761C7.47826 19.3968 7.20898 18.7467 7.20898 18.0688V9.76388Z"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.34483 16.5396C4.05062 16.3725 3.80591 16.1304 3.63557 15.838C3.46523 15.5456 3.37533 15.2134 3.375 14.875V5.29167C3.375 4.2375 4.2375 3.375 5.29167 3.375H14.875C15.5938 3.375 15.9848 3.74396 16.3125 4.33333"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.041 13.917H16.791"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.916 11.042V16.792"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CloneIcon;
diff --git a/frontend/src/app/components/icons/download.jsx b/frontend/src/app/components/icons/download.jsx
new file mode 100644
index 0000000..62a520c
--- /dev/null
+++ b/frontend/src/app/components/icons/download.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+const DownloadIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <g clipPath="url(#clip0_306_15402)">
+        <path
+          d="M7.98047 13.6074L11.9983 17.6253L16.0162 13.6074"
+          stroke="#8287FF"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+        <path
+          d="M12 17.625V6.375"
+          stroke="#8287FF"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+        <path
+          d="M11.9992 22.4466C17.7686 22.4466 22.4456 17.7696 22.4456 12.0001C22.4456 6.23074 17.7686 1.55371 11.9992 1.55371C6.22976 1.55371 1.55273 6.23074 1.55273 12.0001C1.55273 17.7696 6.22976 22.4466 11.9992 22.4466Z"
+          stroke="#8287FF"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_306_15402">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            style={{ fillOpacity: 1 }}
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default DownloadIcon;
diff --git a/frontend/src/app/components/icons/env.jsx b/frontend/src/app/components/icons/env.jsx
new file mode 100644
index 0000000..0d5edb6
--- /dev/null
+++ b/frontend/src/app/components/icons/env.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+const EnviromentIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M10.3723 16.8874C9.70785 17.0716 8.90927 16.7502 8.70885 15.9223C8.65958 15.719 8.563 15.5301 8.42695 15.3712C8.29091 15.2122 8.11925 15.0876 7.92596 15.0075C7.73266 14.9274 7.52319 14.8941 7.31458 14.9103C7.10598 14.9265 6.90414 14.9917 6.7255 15.1006C5.5361 15.8252 4.17404 14.4639 4.89862 13.2737C5.00739 13.0952 5.07249 12.8934 5.08862 12.685C5.10476 12.4765 5.07148 12.2672 4.99149 12.074C4.9115 11.8808 4.78705 11.7093 4.62827 11.5732C4.46949 11.4372 4.28085 11.3406 4.07769 11.2911C2.7241 10.9628 2.7241 9.03723 4.07769 8.70885C4.28103 8.65958 4.46987 8.563 4.62883 8.42695C4.78779 8.29091 4.91239 8.11925 4.99247 7.92596C5.07255 7.73266 5.10586 7.52319 5.08969 7.31458C5.07352 7.10598 5.00832 6.90414 4.8994 6.7255C4.17481 5.5361 5.5361 4.17404 6.72627 4.89862C7.4971 5.36729 8.4961 4.95258 8.70885 4.07769C9.03723 2.7241 10.9628 2.7241 11.2911 4.07769C11.3404 4.28103 11.437 4.46987 11.573 4.62883C11.7091 4.78779 11.8807 4.91239 12.074 4.99247C12.2673 5.07255 12.4768 5.10586 12.6854 5.08969C12.894 5.07352 13.0959 5.00832 13.2745 4.8994C14.4639 4.17481 15.826 5.5361 15.1014 6.72627C14.9926 6.90484 14.9275 7.10655 14.9114 7.31501C14.8952 7.52347 14.9285 7.7328 15.0085 7.92598C15.0885 8.11916 15.2129 8.29074 15.3717 8.42677C15.5305 8.5628 15.7191 8.65945 15.9223 8.70885C16.7548 8.91081 17.0755 9.7171 16.8835 10.3839"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.084 15.3955H17.709"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.3965 13.083V17.708"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.6875 10C7.6875 10.6133 7.93114 11.2015 8.36482 11.6352C8.79849 12.0689 9.38669 12.3125 10 12.3125C10.6133 12.3125 11.2015 12.0689 11.6352 11.6352C12.0689 11.2015 12.3125 10.6133 12.3125 10C12.3125 9.38669 12.0689 8.79849 11.6352 8.36482C11.2015 7.93114 10.6133 7.6875 10 7.6875C9.38669 7.6875 8.79849 7.93114 8.36482 8.36482C7.93114 8.79849 7.6875 9.38669 7.6875 10Z"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default EnviromentIcon;
diff --git a/frontend/src/app/components/icons/key.jsx b/frontend/src/app/components/icons/key.jsx
new file mode 100644
index 0000000..485f68c
--- /dev/null
+++ b/frontend/src/app/components/icons/key.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const KeyIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M14.875 9.12482H14.8846M16.3652 4.18269L19.8171 7.63461C20.0732 7.89064 20.2763 8.1946 20.4149 8.52913C20.5535 8.86367 20.6248 9.22223 20.6248 9.58434C20.6248 9.94644 20.5535 10.305 20.4149 10.6395C20.2763 10.9741 20.0732 11.278 19.8171 11.5341L17.2843 14.0669C17.0282 14.323 16.7243 14.5261 16.3897 14.6647C16.0552 14.8033 15.6966 14.8746 15.3345 14.8746C14.9724 14.8746 14.6139 14.8033 14.2793 14.6647C13.9448 14.5261 13.6408 14.323 13.3848 14.0669L13.0963 13.7785L6.81158 20.0632C6.49315 20.3816 6.07278 20.5777 5.62421 20.6171L5.4565 20.6248H4.33333C4.09861 20.6248 3.87205 20.5386 3.69664 20.3826C3.52123 20.2267 3.40917 20.0117 3.38171 19.7786L3.375 19.6665V18.5433C3.37511 18.0933 3.53354 17.6577 3.82254 17.3128L3.93658 17.1882L4.33333 16.7915H6.25V14.8748H8.16667V12.9581L10.2213 10.9035L9.93287 10.615C9.67681 10.359 9.47368 10.055 9.3351 9.7205C9.19651 9.38596 9.12518 9.0274 9.12518 8.66529C9.12518 8.30319 9.19651 7.94463 9.3351 7.61009C9.47368 7.27556 9.67681 6.97159 9.93287 6.71557L12.4657 4.18269C12.7218 3.92662 13.0257 3.7235 13.3603 3.58491C13.6948 3.44633 14.0534 3.375 14.4155 3.375C14.7776 3.375 15.1361 3.44633 15.4707 3.58491C15.8052 3.7235 16.1092 3.92662 16.3652 4.18269Z"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default KeyIcon;
diff --git a/frontend/src/app/components/icons/manageEnv.jsx b/frontend/src/app/components/icons/manageEnv.jsx
new file mode 100644
index 0000000..563040e
--- /dev/null
+++ b/frontend/src/app/components/icons/manageEnv.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const ManageEnvIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M6.25065 11.9997C5.74232 11.9997 5.25481 11.7977 4.89536 11.4383C4.53592 11.0789 4.33398 10.5913 4.33398 10.083C4.33398 9.57468 4.53592 9.08716 4.89536 8.72772C5.25481 8.36828 5.74232 8.16634 6.25065 8.16634M6.25065 11.9997C6.75898 11.9997 7.24649 11.7977 7.60594 11.4383C7.96538 11.0789 8.16732 10.5913 8.16732 10.083C8.16732 9.57468 7.96538 9.08716 7.60594 8.72772C7.24649 8.36828 6.75898 8.16634 6.25065 8.16634M6.25065 11.9997L6.25065 19.6663M6.25065 8.16634L6.25065 4.33301M13.1497 14.2987C12.9066 14.1167 12.6238 13.9951 12.3246 13.9439C12.0253 13.8926 11.7182 13.9132 11.4284 14.0039C11.1387 14.0946 10.8746 14.2528 10.658 14.4655C10.4414 14.6783 10.2784 14.9394 10.1825 15.2275C10.0865 15.5156 10.0604 15.8223 10.1063 16.1225C10.1521 16.4226 10.2686 16.7075 10.4462 16.9538C10.6237 17.2001 10.8573 17.4007 11.1275 17.5391C11.3978 17.6774 11.697 17.7496 12.0007 17.7497V19.6663M12.0007 4.33301V13.9163M17.7507 9.12467C17.2423 9.12467 16.7548 8.92274 16.3954 8.5633C16.0359 8.20385 15.834 7.71634 15.834 7.20801C15.834 6.69968 16.0359 6.21216 16.3954 5.85272C16.7548 5.49328 17.2423 5.29134 17.7507 5.29134M17.7507 9.12467C18.259 9.12467 18.7465 8.92274 19.1059 8.5633C19.4654 8.20385 19.6673 7.71634 19.6673 7.20801C19.6673 6.69968 19.4654 6.21216 19.1059 5.85272C18.7465 5.49328 18.259 5.29134 17.7507 5.29134M17.7507 9.12467V11.5205M17.7507 5.29134V4.33301M18.7099 20.6247C18.4582 20.6247 18.209 20.5751 17.9765 20.4788C17.7439 20.3825 17.5326 20.2413 17.3547 20.0633C17.1767 19.8853 17.0355 19.674 16.9392 19.4415C16.8429 19.2089 16.7933 18.9597 16.7933 18.708C16.7933 18.4563 16.8429 18.2071 16.9392 17.9745C17.0355 17.742 17.1767 17.5307 17.3547 17.3527C17.5326 17.1747 17.7439 17.0336 17.9765 16.9372C18.209 16.8409 18.4582 16.7913 18.7099 16.7913M18.7099 20.6247C18.9616 20.6247 19.2109 20.5751 19.4434 20.4788C19.676 20.3825 19.8873 20.2413 20.0652 20.0633C20.2432 19.8853 20.3844 19.674 20.4807 19.4415C20.577 19.2089 20.6266 18.9597 20.6266 18.708C20.6266 18.4563 20.577 18.2071 20.4807 17.9745C20.3844 17.742 20.2432 17.5307 20.0652 17.3527C19.8873 17.1747 19.676 17.0336 19.4434 16.9372C19.2109 16.8409 18.9616 16.7913 18.7099 16.7913M18.7099 20.6247V22.0622M18.7099 16.7913V15.3538M21.6147 17.0309L20.3698 17.7497M17.0511 19.6663L15.8052 20.3851M15.8052 17.0309L17.0511 17.7497M20.3698 19.6663L21.6156 20.3851"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ManageEnvIcon;
diff --git a/frontend/src/app/components/icons/menu.jsx b/frontend/src/app/components/icons/menu.jsx
new file mode 100644
index 0000000..55cda06
--- /dev/null
+++ b/frontend/src/app/components/icons/menu.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+const MenuIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M9.20117 9.99978C9.20117 10.1047 9.22183 10.2085 9.26196 10.3054C9.3021 10.4023 9.36092 10.4903 9.43508 10.5645C9.50924 10.6386 9.59728 10.6975 9.69417 10.7376C9.79106 10.7777 9.89491 10.7984 9.99978 10.7984C10.1047 10.7984 10.2085 10.7777 10.3054 10.7376C10.4023 10.6975 10.4903 10.6386 10.5645 10.5645C10.6386 10.4903 10.6975 10.4023 10.7376 10.3054C10.7777 10.2085 10.7984 10.1047 10.7984 9.99978C10.7984 9.89491 10.7777 9.79106 10.7376 9.69417C10.6975 9.59728 10.6386 9.50924 10.5645 9.43508C10.4903 9.36092 10.4023 9.3021 10.3054 9.26196C10.2085 9.22183 10.1047 9.20117 9.99978 9.20117C9.89491 9.20117 9.79106 9.22183 9.69417 9.26196C9.59728 9.3021 9.50924 9.36092 9.43508 9.43508C9.36092 9.50924 9.3021 9.59728 9.26196 9.69417C9.22183 9.79106 9.20117 9.89491 9.20117 9.99978Z"
+        fill="#8287FF"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.20117 15.5906C9.20117 15.6955 9.22183 15.7993 9.26196 15.8962C9.3021 15.9931 9.36092 16.0811 9.43508 16.1553C9.50924 16.2295 9.59728 16.2883 9.69417 16.3284C9.79106 16.3686 9.89491 16.3892 9.99978 16.3892C10.1047 16.3892 10.2085 16.3686 10.3054 16.3284C10.4023 16.2883 10.4903 16.2295 10.5645 16.1553C10.6386 16.0811 10.6975 15.9931 10.7376 15.8962C10.7777 15.7993 10.7984 15.6955 10.7984 15.5906C10.7984 15.4857 10.7777 15.3819 10.7376 15.285C10.6975 15.1881 10.6386 15.1001 10.5645 15.0259C10.4903 14.9517 10.4023 14.8929 10.3054 14.8528C10.2085 14.8126 10.1047 14.792 9.99978 14.792C9.89491 14.792 9.79106 14.8126 9.69417 14.8528C9.59728 14.8929 9.50924 14.9517 9.43508 15.0259C9.36092 15.1001 9.3021 15.1881 9.26196 15.285C9.22183 15.3819 9.20117 15.4857 9.20117 15.5906Z"
+        fill="#8287FF"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.20117 4.40994C9.20117 4.51481 9.22183 4.61866 9.26196 4.71555C9.3021 4.81245 9.36092 4.90048 9.43508 4.97464C9.50924 5.0488 9.59728 5.10763 9.69417 5.14776C9.79106 5.18789 9.89491 5.20855 9.99978 5.20855C10.1047 5.20855 10.2085 5.18789 10.3054 5.14776C10.4023 5.10763 10.4903 5.0488 10.5645 4.97464C10.6386 4.90048 10.6975 4.81245 10.7376 4.71555C10.7777 4.61866 10.7984 4.51481 10.7984 4.40994C10.7984 4.30506 10.7777 4.20122 10.7376 4.10432C10.6975 4.00743 10.6386 3.91939 10.5645 3.84524C10.4903 3.77108 10.4023 3.71225 10.3054 3.67212C10.2085 3.63198 10.1047 3.61133 9.99978 3.61133C9.89491 3.61133 9.79106 3.63198 9.69417 3.67212C9.59728 3.71225 9.50924 3.77108 9.43508 3.84524C9.36092 3.91939 9.3021 4.00743 9.26196 4.10432C9.22183 4.20122 9.20117 4.30506 9.20117 4.40994Z"
+        fill="#8287FF"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default MenuIcon;
diff --git a/frontend/src/app/components/icons/robot.jsx b/frontend/src/app/components/icons/robot.jsx
new file mode 100644
index 0000000..4afe437
--- /dev/null
+++ b/frontend/src/app/components/icons/robot.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const RobotIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M8.16667 3.375L10.0833 6.25M15.8333 3.375L13.9167 6.25M9.125 12.9583V11.0417M14.875 11.0417V12.9583M3.375 10.0833C3.375 9.06667 3.77887 8.09165 4.49776 7.37276C5.21665 6.65387 6.19167 6.25 7.20833 6.25H16.7917C17.8083 6.25 18.7834 6.65387 19.5022 7.37276C20.2211 8.09165 20.625 9.06667 20.625 10.0833V15.8333C20.625 16.85 20.2211 17.825 19.5022 18.5439C18.7834 19.2628 17.8083 19.6667 16.7917 19.6667H7.20833C6.19167 19.6667 5.21665 19.2628 4.49776 18.5439C3.77887 17.825 3.375 16.85 3.375 15.8333V10.0833Z"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RobotIcon;
diff --git a/frontend/src/app/components/icons/search.jsx b/frontend/src/app/components/icons/search.jsx
new file mode 100644
index 0000000..5212c02
--- /dev/null
+++ b/frontend/src/app/components/icons/search.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const SearchIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
+        stroke="#858699"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default SearchIcon;
diff --git a/frontend/src/app/components/sidebar/Sidebar.jsx b/frontend/src/app/components/sidebar/Sidebar.jsx
index 26f30a8..1fdf896 100644
--- a/frontend/src/app/components/sidebar/Sidebar.jsx
+++ b/frontend/src/app/components/sidebar/Sidebar.jsx
@@ -10,6 +10,7 @@ import UserIcon from "../icons/user";
 import RolesIcon from "../icons/roles";
 import CredentialsIcon from "../icons/credentials";
 import AgentIcon from "../icons/agent";
+import DownloadIcon from "../icons/download";
 
 const Sidebar = () => {
   const router = useRouter();
@@ -153,50 +154,7 @@ const Sidebar = () => {
         <div>
           <div>
             <p>Download ICTL v3</p>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <g clipPath="url(#clip0_306_15402)">
-                <path
-                  d="M7.98047 13.6074L11.9983 17.6253L16.0162 13.6074"
-                  stroke="#8287FF"
-                  strokeWidth={1.5}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                />
-                <path
-                  d="M12 17.625V6.375"
-                  stroke="#8287FF"
-                  strokeWidth={1.5}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                />
-                <path
-                  d="M11.9992 22.4466C17.7686 22.4466 22.4456 17.7696 22.4456 12.0001C22.4456 6.23074 17.7686 1.55371 11.9992 1.55371C6.22976 1.55371 1.55273 6.23074 1.55273 12.0001C1.55273 17.7696 6.22976 22.4466 11.9992 22.4466Z"
-                  stroke="#8287FF"
-                  strokeWidth={1.5}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_306_15402">
-                  <rect
-                    width="24"
-                    height="24"
-                    fill="white"
-                    style={{ fillOpacity: 1 }}
-                  />
-                </clipPath>
-              </defs>
-            </svg>
+            <DownloadIcon />
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx
index af3d355..0373e35 100644
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -2,6 +2,16 @@
 import React, { useState } from "react";
 import styles from "./styles.module.css";
 import { usePathname, useRouter, useParams } from "next/navigation";
+import BackIcon from "../icons/back";
+import SearchIcon from "../icons/search";
+import EnviromentIcon from "../icons/env";
+import AddIcon from "../icons/add";
+import CheckIcon from "../icons/check";
+import MenuIcon from "../icons/menu";
+import CloneIcon from "../icons/clone";
+import RobotIcon from "../icons/robot";
+import KeyIcon from "../icons/key";
+import ManageEnvIcon from "../icons/manageEnv";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -18,35 +28,7 @@ const TopHeader = (props) => {
           params.usersId ||
           params.roleId) && (
           <div onClick={() => router.back()}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M5 12H19"
-                stroke="#8287FF"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M5 12L11 18"
-                stroke="#8287FF"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M5 12L11 6"
-                stroke="#8287FF"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
+            <BackIcon />
           </div>
         )}
         <p>{props.topbarTitle}</p>
@@ -54,61 +36,12 @@ const TopHeader = (props) => {
       <div className={styles.actionBar}>
         {(pathName === "/projects/view" || !props.state) && (
           <div className={styles.searchBarContainer}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={24}
-              height={24}
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
-                stroke="#858699"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
+            <SearchIcon />
           </div>
         )}
         {pathName === "/credentials" ? (
           <div className={styles.mngEnvKeyButton}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={20}
-              height={20}
-              viewBox="0 0 20 20"
-              fill="none"
-            >
-              <path
-                d="M10.3723 16.8874C9.70785 17.0716 8.90927 16.7502 8.70885 15.9223C8.65958 15.719 8.563 15.5301 8.42695 15.3712C8.29091 15.2122 8.11925 15.0876 7.92596 15.0075C7.73266 14.9274 7.52319 14.8941 7.31458 14.9103C7.10598 14.9265 6.90414 14.9917 6.7255 15.1006C5.5361 15.8252 4.17404 14.4639 4.89862 13.2737C5.00739 13.0952 5.07249 12.8934 5.08862 12.685C5.10476 12.4765 5.07148 12.2672 4.99149 12.074C4.9115 11.8808 4.78705 11.7093 4.62827 11.5732C4.46949 11.4372 4.28085 11.3406 4.07769 11.2911C2.7241 10.9628 2.7241 9.03723 4.07769 8.70885C4.28103 8.65958 4.46987 8.563 4.62883 8.42695C4.78779 8.29091 4.91239 8.11925 4.99247 7.92596C5.07255 7.73266 5.10586 7.52319 5.08969 7.31458C5.07352 7.10598 5.00832 6.90414 4.8994 6.7255C4.17481 5.5361 5.5361 4.17404 6.72627 4.89862C7.4971 5.36729 8.4961 4.95258 8.70885 4.07769C9.03723 2.7241 10.9628 2.7241 11.2911 4.07769C11.3404 4.28103 11.437 4.46987 11.573 4.62883C11.7091 4.78779 11.8807 4.91239 12.074 4.99247C12.2673 5.07255 12.4768 5.10586 12.6854 5.08969C12.894 5.07352 13.0959 5.00832 13.2745 4.8994C14.4639 4.17481 15.826 5.5361 15.1014 6.72627C14.9926 6.90484 14.9275 7.10655 14.9114 7.31501C14.8952 7.52347 14.9285 7.7328 15.0085 7.92598C15.0885 8.11916 15.2129 8.29074 15.3717 8.42677C15.5305 8.5628 15.7191 8.65945 15.9223 8.70885C16.7548 8.91081 17.0755 9.7171 16.8835 10.3839"
-                stroke="#8287FF"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M13.084 15.3955H17.709"
-                stroke="#8287FF"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M15.3965 13.083V17.708"
-                stroke="#8287FF"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M7.6875 10C7.6875 10.6133 7.93114 11.2015 8.36482 11.6352C8.79849 12.0689 9.38669 12.3125 10 12.3125C10.6133 12.3125 11.2015 12.0689 11.6352 11.6352C12.0689 11.2015 12.3125 10.6133 12.3125 10C12.3125 9.38669 12.0689 8.79849 11.6352 8.36482C11.2015 7.93114 10.6133 7.6875 10 7.6875C9.38669 7.6875 8.79849 7.93114 8.36482 8.36482C7.93114 8.79849 7.6875 9.38669 7.6875 10Z"
-                stroke="#8287FF"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
+            <EnviromentIcon />
             <p>Manage Env. Key</p>
           </div>
         ) : (
@@ -119,80 +52,20 @@ const TopHeader = (props) => {
             className={styles.button}
             onClick={() => props.trigger(!props.triggerState)}
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-            >
-              <path
-                d="M10 4.41016V15.5907"
-                stroke="currentColor"
-                strokeOpacity={1}
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M4.41016 10H15.5907"
-                stroke="currentColor"
-                strokeOpacity={1}
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
+            <AddIcon />
             <p>{props.buttonText}</p>
           </div>
         )}
         {!props.state && (
           <div className={styles.button} onClick={handleNavigateToAdd}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-            >
-              <path
-                d="M10 4.41016V15.5907"
-                stroke="currentColor"
-                strokeOpacity={1}
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M4.41016 10H15.5907"
-                stroke="currentColor"
-                strokeOpacity={1}
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
+            <AddIcon />
             <p>{props.buttonText}</p>
           </div>
         )}
         {props.state === "add" ? (
           <>
             <div className={styles.button}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width={20}
-                height={20}
-                viewBox="0 0 20 20"
-                fill="none"
-              >
-                <path
-                  d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
-                  stroke="white"
-                  strokeWidth={1.5}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
+              <CheckIcon />
               <p>{props.buttonText}</p>
             </div>
             <div className={styles.cancelButton} onClick={() => router.back()}>
@@ -209,132 +82,31 @@ const TopHeader = (props) => {
             onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
           >
             <div className={styles.dotMenu}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-              >
-                <path
-                  d="M9.20117 9.99978C9.20117 10.1047 9.22183 10.2085 9.26196 10.3054C9.3021 10.4023 9.36092 10.4903 9.43508 10.5645C9.50924 10.6386 9.59728 10.6975 9.69417 10.7376C9.79106 10.7777 9.89491 10.7984 9.99978 10.7984C10.1047 10.7984 10.2085 10.7777 10.3054 10.7376C10.4023 10.6975 10.4903 10.6386 10.5645 10.5645C10.6386 10.4903 10.6975 10.4023 10.7376 10.3054C10.7777 10.2085 10.7984 10.1047 10.7984 9.99978C10.7984 9.89491 10.7777 9.79106 10.7376 9.69417C10.6975 9.59728 10.6386 9.50924 10.5645 9.43508C10.4903 9.36092 10.4023 9.3021 10.3054 9.26196C10.2085 9.22183 10.1047 9.20117 9.99978 9.20117C9.89491 9.20117 9.79106 9.22183 9.69417 9.26196C9.59728 9.3021 9.50924 9.36092 9.43508 9.43508C9.36092 9.50924 9.3021 9.59728 9.26196 9.69417C9.22183 9.79106 9.20117 9.89491 9.20117 9.99978Z"
-                  fill="#8287FF"
-                  stroke="#8287FF"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-                <path
-                  d="M9.20117 15.5906C9.20117 15.6955 9.22183 15.7993 9.26196 15.8962C9.3021 15.9931 9.36092 16.0811 9.43508 16.1553C9.50924 16.2295 9.59728 16.2883 9.69417 16.3284C9.79106 16.3686 9.89491 16.3892 9.99978 16.3892C10.1047 16.3892 10.2085 16.3686 10.3054 16.3284C10.4023 16.2883 10.4903 16.2295 10.5645 16.1553C10.6386 16.0811 10.6975 15.9931 10.7376 15.8962C10.7777 15.7993 10.7984 15.6955 10.7984 15.5906C10.7984 15.4857 10.7777 15.3819 10.7376 15.285C10.6975 15.1881 10.6386 15.1001 10.5645 15.0259C10.4903 14.9517 10.4023 14.8929 10.3054 14.8528C10.2085 14.8126 10.1047 14.792 9.99978 14.792C9.89491 14.792 9.79106 14.8126 9.69417 14.8528C9.59728 14.8929 9.50924 14.9517 9.43508 15.0259C9.36092 15.1001 9.3021 15.1881 9.26196 15.285C9.22183 15.3819 9.20117 15.4857 9.20117 15.5906Z"
-                  fill="#8287FF"
-                  stroke="#8287FF"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-                <path
-                  d="M9.20117 4.40994C9.20117 4.51481 9.22183 4.61866 9.26196 4.71555C9.3021 4.81245 9.36092 4.90048 9.43508 4.97464C9.50924 5.0488 9.59728 5.10763 9.69417 5.14776C9.79106 5.18789 9.89491 5.20855 9.99978 5.20855C10.1047 5.20855 10.2085 5.18789 10.3054 5.14776C10.4023 5.10763 10.4903 5.0488 10.5645 4.97464C10.6386 4.90048 10.6975 4.81245 10.7376 4.71555C10.7777 4.61866 10.7984 4.51481 10.7984 4.40994C10.7984 4.30506 10.7777 4.20122 10.7376 4.10432C10.6975 4.00743 10.6386 3.91939 10.5645 3.84524C10.4903 3.77108 10.4023 3.71225 10.3054 3.67212C10.2085 3.63198 10.1047 3.61133 9.99978 3.61133C9.89491 3.61133 9.79106 3.63198 9.69417 3.67212C9.59728 3.71225 9.50924 3.77108 9.43508 3.84524C9.36092 3.91939 9.3021 4.00743 9.26196 4.10432C9.22183 4.20122 9.20117 4.30506 9.20117 4.40994Z"
-                  fill="#8287FF"
-                  stroke="#8287FF"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
+              <MenuIcon />
             </div>
             {triggerDropDownMenu && (
               <div className={styles.dropDown}>
                 <div>
                   <div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                    >
-                      <path
-                        d="M7.20898 9.76388C7.20898 9.08602 7.47826 8.43593 7.95758 7.95661C8.4369 7.47729 9.087 7.20801 9.76486 7.20801H18.0698C18.7476 7.20801 19.3977 7.47729 19.8771 7.95661C20.3564 8.43593 20.6257 9.08602 20.6257 9.76388V18.0688C20.6257 18.7467 20.3564 19.3968 19.8771 19.8761C19.3977 20.3554 18.7476 20.6247 18.0698 20.6247H9.76486C9.087 20.6247 8.4369 20.3554 7.95758 19.8761C7.47826 19.3968 7.20898 18.7467 7.20898 18.0688V9.76388Z"
-                        stroke="#D2D3E0"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                      <path
-                        d="M4.34483 16.5396C4.05062 16.3725 3.80591 16.1304 3.63557 15.838C3.46523 15.5456 3.37533 15.2134 3.375 14.875V5.29167C3.375 4.2375 4.2375 3.375 5.29167 3.375H14.875C15.5938 3.375 15.9848 3.74396 16.3125 4.33333"
-                        stroke="#D2D3E0"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                      <path
-                        d="M11.041 13.917H16.791"
-                        stroke="#D2D3E0"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                      <path
-                        d="M13.916 11.042V16.792"
-                        stroke="#D2D3E0"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
+                    <CloneIcon />
                     <p>Clone Project</p>
                   </div>
                 </div>
                 <div>
                   <div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                    >
-                      <path
-                        d="M8.16667 3.375L10.0833 6.25M15.8333 3.375L13.9167 6.25M9.125 12.9583V11.0417M14.875 11.0417V12.9583M3.375 10.0833C3.375 9.06667 3.77887 8.09165 4.49776 7.37276C5.21665 6.65387 6.19167 6.25 7.20833 6.25H16.7917C17.8083 6.25 18.7834 6.65387 19.5022 7.37276C20.2211 8.09165 20.625 9.06667 20.625 10.0833V15.8333C20.625 16.85 20.2211 17.825 19.5022 18.5439C18.7834 19.2628 17.8083 19.6667 16.7917 19.6667H7.20833C6.19167 19.6667 5.21665 19.2628 4.49776 18.5439C3.77887 17.825 3.375 16.85 3.375 15.8333V10.0833Z"
-                        stroke="#D2D3E0"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
+                    <RobotIcon />
                     <p>Robots</p>
                   </div>
                 </div>
                 <div>
                   <div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                    >
-                      <path
-                        d="M14.875 9.12482H14.8846M16.3652 4.18269L19.8171 7.63461C20.0732 7.89064 20.2763 8.1946 20.4149 8.52913C20.5535 8.86367 20.6248 9.22223 20.6248 9.58434C20.6248 9.94644 20.5535 10.305 20.4149 10.6395C20.2763 10.9741 20.0732 11.278 19.8171 11.5341L17.2843 14.0669C17.0282 14.323 16.7243 14.5261 16.3897 14.6647C16.0552 14.8033 15.6966 14.8746 15.3345 14.8746C14.9724 14.8746 14.6139 14.8033 14.2793 14.6647C13.9448 14.5261 13.6408 14.323 13.3848 14.0669L13.0963 13.7785L6.81158 20.0632C6.49315 20.3816 6.07278 20.5777 5.62421 20.6171L5.4565 20.6248H4.33333C4.09861 20.6248 3.87205 20.5386 3.69664 20.3826C3.52123 20.2267 3.40917 20.0117 3.38171 19.7786L3.375 19.6665V18.5433C3.37511 18.0933 3.53354 17.6577 3.82254 17.3128L3.93658 17.1882L4.33333 16.7915H6.25V14.8748H8.16667V12.9581L10.2213 10.9035L9.93287 10.615C9.67681 10.359 9.47368 10.055 9.3351 9.7205C9.19651 9.38596 9.12518 9.0274 9.12518 8.66529C9.12518 8.30319 9.19651 7.94463 9.3351 7.61009C9.47368 7.27556 9.67681 6.97159 9.93287 6.71557L12.4657 4.18269C12.7218 3.92662 13.0257 3.7235 13.3603 3.58491C13.6948 3.44633 14.0534 3.375 14.4155 3.375C14.7776 3.375 15.1361 3.44633 15.4707 3.58491C15.8052 3.7235 16.1092 3.92662 16.3652 4.18269Z"
-                        stroke="#D2D3E0"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
+                    <KeyIcon />
                     <p>Init Key</p>
                   </div>
                 </div>
                 <div>
                   <div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                    >
-                      <path
-                        d="M6.25065 11.9997C5.74232 11.9997 5.25481 11.7977 4.89536 11.4383C4.53592 11.0789 4.33398 10.5913 4.33398 10.083C4.33398 9.57468 4.53592 9.08716 4.89536 8.72772C5.25481 8.36828 5.74232 8.16634 6.25065 8.16634M6.25065 11.9997C6.75898 11.9997 7.24649 11.7977 7.60594 11.4383C7.96538 11.0789 8.16732 10.5913 8.16732 10.083C8.16732 9.57468 7.96538 9.08716 7.60594 8.72772C7.24649 8.36828 6.75898 8.16634 6.25065 8.16634M6.25065 11.9997L6.25065 19.6663M6.25065 8.16634L6.25065 4.33301M13.1497 14.2987C12.9066 14.1167 12.6238 13.9951 12.3246 13.9439C12.0253 13.8926 11.7182 13.9132 11.4284 14.0039C11.1387 14.0946 10.8746 14.2528 10.658 14.4655C10.4414 14.6783 10.2784 14.9394 10.1825 15.2275C10.0865 15.5156 10.0604 15.8223 10.1063 16.1225C10.1521 16.4226 10.2686 16.7075 10.4462 16.9538C10.6237 17.2001 10.8573 17.4007 11.1275 17.5391C11.3978 17.6774 11.697 17.7496 12.0007 17.7497V19.6663M12.0007 4.33301V13.9163M17.7507 9.12467C17.2423 9.12467 16.7548 8.92274 16.3954 8.5633C16.0359 8.20385 15.834 7.71634 15.834 7.20801C15.834 6.69968 16.0359 6.21216 16.3954 5.85272C16.7548 5.49328 17.2423 5.29134 17.7507 5.29134M17.7507 9.12467C18.259 9.12467 18.7465 8.92274 19.1059 8.5633C19.4654 8.20385 19.6673 7.71634 19.6673 7.20801C19.6673 6.69968 19.4654 6.21216 19.1059 5.85272C18.7465 5.49328 18.259 5.29134 17.7507 5.29134M17.7507 9.12467V11.5205M17.7507 5.29134V4.33301M18.7099 20.6247C18.4582 20.6247 18.209 20.5751 17.9765 20.4788C17.7439 20.3825 17.5326 20.2413 17.3547 20.0633C17.1767 19.8853 17.0355 19.674 16.9392 19.4415C16.8429 19.2089 16.7933 18.9597 16.7933 18.708C16.7933 18.4563 16.8429 18.2071 16.9392 17.9745C17.0355 17.742 17.1767 17.5307 17.3547 17.3527C17.5326 17.1747 17.7439 17.0336 17.9765 16.9372C18.209 16.8409 18.4582 16.7913 18.7099 16.7913M18.7099 20.6247C18.9616 20.6247 19.2109 20.5751 19.4434 20.4788C19.676 20.3825 19.8873 20.2413 20.0652 20.0633C20.2432 19.8853 20.3844 19.674 20.4807 19.4415C20.577 19.2089 20.6266 18.9597 20.6266 18.708C20.6266 18.4563 20.577 18.2071 20.4807 17.9745C20.3844 17.742 20.2432 17.5307 20.0652 17.3527C19.8873 17.1747 19.676 17.0336 19.4434 16.9372C19.2109 16.8409 18.9616 16.7913 18.7099 16.7913M18.7099 20.6247V22.0622M18.7099 16.7913V15.3538M21.6147 17.0309L20.3698 17.7497M17.0511 19.6663L15.8052 20.3851M15.8052 17.0309L17.0511 17.7497M20.3698 19.6663L21.6156 20.3851"
-                        stroke="#D2D3E0"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
+                    <ManageEnvIcon />
                     <p>Manage Env. Key</p>
                   </div>
                 </div>