diff --git a/frontend/src/app/components/actionButton/styles.module.css b/frontend/src/app/components/actionButton/styles.module.css
index b5cdff5..3ed40de 100644
--- a/frontend/src/app/components/actionButton/styles.module.css
+++ b/frontend/src/app/components/actionButton/styles.module.css
@@ -1,6 +1,6 @@
 .iconButton {
   display: flex;
-  padding: 6px;
+  padding: 3px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
diff --git a/frontend/src/app/components/icons/logo.jsx b/frontend/src/app/components/icons/logo.jsx
new file mode 100644
index 0000000..9065927
--- /dev/null
+++ b/frontend/src/app/components/icons/logo.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+const LogoIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="37"
+      height="36"
+      viewBox="0 0 37 36"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M15.465 11.0234C13.7773 12.2949 12.0608 13.7836 10.3874 15.457C2.90925 22.9352 -0.879626 31.2707 1.92467 34.0751C4.72895 36.8792 13.0645 33.0904 20.5426 25.6123C22.2161 23.9388 23.7048 22.2224 24.9762 20.5347"
+        stroke="#969AF9"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ strokeOpacity: 1 }}
+        fill="none"
+      />
+      <path
+        d="M24.9762 20.5353C29.3864 26.3895 31.1822 31.8988 29.0053 34.0757C26.201 36.88 17.8655 33.091 10.3874 25.6129C2.90925 18.1348 -0.879626 9.79927 1.92467 6.99498C4.10141 4.81824 9.61081 6.61397 15.465 11.0241"
+        stroke="#969AF9"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ strokeOpacity: 1 }}
+        fill="none"
+      />
+      <path
+        d="M14.1504 20.5347C14.1504 21.261 14.7391 21.8497 15.4654 21.8497C16.1916 21.8497 16.7804 21.261 16.7804 20.5347C16.7804 19.8085 16.1916 19.2197 15.4654 19.2197C14.7391 19.2197 14.1504 19.8085 14.1504 20.5347Z"
+        stroke="#969AF9"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ strokeOpacity: 1 }}
+        fill="none"
+      />
+      <path
+        d="M20.7505 9.08429C19.9243 8.94056 19.9243 7.75456 20.7505 7.61083C23.7436 7.09012 26.124 4.81039 26.7737 1.84263L26.8236 1.61514C27.0022 0.798617 28.1649 0.793535 28.3509 1.60847L28.4114 1.87358C29.0849 4.82732 31.4661 7.0878 34.4509 7.60707C35.2814 7.75154 35.2814 8.94358 34.4509 9.08805C31.4661 9.60732 29.0849 11.8678 28.4114 14.8216L28.3509 15.0867C28.1649 15.9016 27.0022 15.8965 26.8236 15.08L26.7737 14.8525C26.124 11.8848 23.7436 9.605 20.7505 9.08429Z"
+        stroke="#969AF9"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ strokeOpacity: 1 }}
+        fill="none"
+      />
+    </svg>
+  );
+};
+
+export default LogoIcon;
diff --git a/frontend/src/app/components/sidebar/Sidebar.jsx b/frontend/src/app/components/sidebar/Sidebar.jsx
index 1fdf896..fa6bb22 100644
--- a/frontend/src/app/components/sidebar/Sidebar.jsx
+++ b/frontend/src/app/components/sidebar/Sidebar.jsx
@@ -11,6 +11,7 @@ import RolesIcon from "../icons/roles";
 import CredentialsIcon from "../icons/credentials";
 import AgentIcon from "../icons/agent";
 import DownloadIcon from "../icons/download";
+import LogoIcon from "../icons/logo";
 
 const Sidebar = () => {
   const router = useRouter();
@@ -45,50 +46,7 @@ const Sidebar = () => {
         <div className={styles.logoContainer}>
           <div>
             <div className={styles.logoIconContainer}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="37"
-                height="36"
-                viewBox="0 0 37 36"
-                fill="none"
-              >
-                <path
-                  d="M15.465 11.0234C13.7773 12.2949 12.0608 13.7836 10.3874 15.457C2.90925 22.9352 -0.879626 31.2707 1.92467 34.0751C4.72895 36.8792 13.0645 33.0904 20.5426 25.6123C22.2161 23.9388 23.7048 22.2224 24.9762 20.5347"
-                  stroke="#969AF9"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                  fill="none"
-                />
-                <path
-                  d="M24.9762 20.5353C29.3864 26.3895 31.1822 31.8988 29.0053 34.0757C26.201 36.88 17.8655 33.091 10.3874 25.6129C2.90925 18.1348 -0.879626 9.79927 1.92467 6.99498C4.10141 4.81824 9.61081 6.61397 15.465 11.0241"
-                  stroke="#969AF9"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                  fill="none"
-                />
-                <path
-                  d="M14.1504 20.5347C14.1504 21.261 14.7391 21.8497 15.4654 21.8497C16.1916 21.8497 16.7804 21.261 16.7804 20.5347C16.7804 19.8085 16.1916 19.2197 15.4654 19.2197C14.7391 19.2197 14.1504 19.8085 14.1504 20.5347Z"
-                  stroke="#969AF9"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                  fill="none"
-                />
-                <path
-                  d="M20.7505 9.08429C19.9243 8.94056 19.9243 7.75456 20.7505 7.61083C23.7436 7.09012 26.124 4.81039 26.7737 1.84263L26.8236 1.61514C27.0022 0.798617 28.1649 0.793535 28.3509 1.60847L28.4114 1.87358C29.0849 4.82732 31.4661 7.0878 34.4509 7.60707C35.2814 7.75154 35.2814 8.94358 34.4509 9.08805C31.4661 9.60732 29.0849 11.8678 28.4114 14.8216L28.3509 15.0867C28.1649 15.9016 27.0022 15.8965 26.8236 15.08L26.7737 14.8525C26.124 11.8848 23.7436 9.605 20.7505 9.08429Z"
-                  stroke="#969AF9"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                  fill="none"
-                />
-              </svg>
+              <LogoIcon />
             </div>
             <div className={styles.logoDescription}>
               <p>Internal Developer Platform</p>
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index dbc2dcb..120a0f5 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -42,7 +42,7 @@ a {
   }
 }
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
   height: 8px;
   background-color: transparent;
 }
diff --git a/frontend/src/app/projects/view/[servicesId]/page.jsx b/frontend/src/app/projects/view/[servicesId]/page.jsx
index 07f46d2..0dc3ed6 100644
--- a/frontend/src/app/projects/view/[servicesId]/page.jsx
+++ b/frontend/src/app/projects/view/[servicesId]/page.jsx
@@ -11,6 +11,7 @@ import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal"
 import CustomCheckbox from "@/app/components/checkbox/CheckBox";
 import DeleteIcon from "@/app/components/icons/delete";
 import SelectField from "@/app/components/select/SelectField";
+import ActionButton from "@/app/components/actionButton/ActionButton";
 const AddServices = () => {
   const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
@@ -331,7 +332,7 @@ const AddServices = () => {
                             <div className={variableStyles.variable} key={key}>
                               <p>{data.key}</p>
                               <p>{data.value}</p>
-                              <DeleteIcon />
+                              <ActionButton icon={<DeleteIcon />} />
                             </div>
                           );
                         })}