diff --git a/frontend/src/app/agents/styles.module.css b/frontend/src/app/agents/styles.module.css
index 05cab2d..2490333 100644
--- a/frontend/src/app/agents/styles.module.css
+++ b/frontend/src/app/agents/styles.module.css
@@ -70,27 +70,6 @@
   font-weight: 500;
   line-height: normal;
 }
-.iconButton {
-  display: flex;
-  padding: 6px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  aspect-ratio: 1/1;
-  background-color: rgba(255, 255, 255, 0);
-  outline: none;
-  border: 1px solid #959aff00;
-  cursor: pointer;
-  border-radius: 50%;
-}
-.iconButton:hover {
-  border: 1px solid #959aff;
-  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-}
-.iconButton:hover path {
-  stroke: white;
-}
 .actions {
   display: flex;
   justify-content: start;
diff --git a/frontend/src/app/components/icons/file.jsx b/frontend/src/app/components/icons/file.jsx
new file mode 100644
index 0000000..f663505
--- /dev/null
+++ b/frontend/src/app/components/icons/file.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+const FileIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default FileIcon;
diff --git a/frontend/src/app/components/toast/success/styles.module.css b/frontend/src/app/components/toast/success/styles.module.css
index 9456a16..bda7ebd 100644
--- a/frontend/src/app/components/toast/success/styles.module.css
+++ b/frontend/src/app/components/toast/success/styles.module.css
@@ -10,6 +10,19 @@
   bottom: 25px;
   z-index: 11;
   right: 20px;
+  animation-name: showToast;
+  animation-duration: 0.15s;
+  animation-timing-function: ease-in-out;
+}
+@keyframes showToast {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0%);
+  }
 }
 .messageContainer {
   display: flex;
diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx
index 46ac643..d764201 100644
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -85,13 +85,11 @@ const TopHeader = (props) => {
           )}
           {editState || props?.requiredButtons?.includes("save") ? (
             <>
-              <div
-                className={styles.button}
+              <PrimaryButton
+                text="Save"
                 onClick={() => setTriggerAlert(!triggerAlert)}
-              >
-                <CheckIcon width={20} height={20} />
-                <p>Save</p>
-              </div>
+                icon={<CheckIcon width={20} height={20} />}
+              />
 
               <SecondaryButton
                 text="Cancel"
diff --git a/frontend/src/app/components/topHeader/styles.module.css b/frontend/src/app/components/topHeader/styles.module.css
index 07d0f2b..2ea4c69 100644
--- a/frontend/src/app/components/topHeader/styles.module.css
+++ b/frontend/src/app/components/topHeader/styles.module.css
@@ -5,6 +5,7 @@
   align-items: center;
   align-self: stretch;
   background: #21232f;
+  transition: all 0.15s;
 }
 .title {
   display: flex;
@@ -53,22 +54,7 @@
   align-items: center;
   gap: 10px;
 }
-.button {
-  display: flex;
-  padding: 7px 15px;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  border-radius: 6px;
-  border-radius: 6px;
-  border: 0.5px solid #8187ff;
-  background: rgba(83, 89, 242, 0.25);
-  color: white;
-  cursor: pointer;
-}
-.button:hover {
-  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
-}
+
 .mngEnvKeyButton {
   display: inline-flex;
   padding: 8px 12px;
@@ -99,22 +85,7 @@
 .mngEnvKeyButton:hover path {
   stroke: white;
 }
-.cancelButton {
-  display: flex;
-  height: 36px;
-  padding: 9px 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: 6px;
-  border: 0.5px solid #4e537e;
-  cursor: pointer;
-}
-.cancelButton:hover {
-  border-radius: 6px;
-  border: 1px solid #8e98e7;
-  background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%);
-}
+
 .menu {
   display: flex;
   width: 36px;
diff --git a/frontend/src/app/organization/styles.module.css b/frontend/src/app/organization/styles.module.css
index 3a0069c..19c934d 100644
--- a/frontend/src/app/organization/styles.module.css
+++ b/frontend/src/app/organization/styles.module.css
@@ -51,24 +51,3 @@
   font-weight: 500;
   line-height: normal;
 }
-.iconButton {
-  display: flex;
-  padding: 6px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  aspect-ratio: 1/1;
-  background-color: rgba(255, 255, 255, 0);
-  outline: none;
-  border: 1px solid #959aff00;
-  cursor: pointer;
-  border-radius: 50%;
-}
-.iconButton:hover {
-  border: 1px solid #959aff;
-  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-}
-.iconButton:hover path {
-  stroke: white;
-}
diff --git a/frontend/src/app/projects/styles.module.css b/frontend/src/app/projects/styles.module.css
index 55253de..efe6f21 100644
--- a/frontend/src/app/projects/styles.module.css
+++ b/frontend/src/app/projects/styles.module.css
@@ -63,27 +63,7 @@
   gap: 10px;
   align-self: stretch;
 }
-.iconButton {
-  display: flex;
-  padding: 6px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  aspect-ratio: 1/1;
-  background-color: rgba(255, 255, 255, 0);
-  outline: none;
-  border: 1px solid #959aff00;
-  cursor: pointer;
-  border-radius: 50%;
-}
-.iconButton:hover {
-  border: 1px solid #959aff;
-  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-}
-.iconButton:hover path {
-  stroke: white;
-}
+
 .used {
   color: #50d85f;
   font-family: Inter;
diff --git a/frontend/src/app/roles/[rolesId]/page.jsx b/frontend/src/app/roles/[rolesId]/page.jsx
index 892ef68..9b29b38 100644
--- a/frontend/src/app/roles/[rolesId]/page.jsx
+++ b/frontend/src/app/roles/[rolesId]/page.jsx
@@ -3,6 +3,9 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import editRoleStyle from "./styles.module.css";
 import TextField from "@/app/components/fields/textfield";
+import ActionButton from "@/app/components/actionButton/ActionButton";
+import DeleteIcon from "@/app/components/icons/delete";
+import FileIcon from "@/app/components/icons/file";
 
 const page = () => {
   const sampleData = [
@@ -115,77 +118,12 @@ const page = () => {
                     return (
                       <div className={editRoleStyle.permissions} key={index}>
                         <div className={editRoleStyle.permissionsItem}>
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width={24}
-                            height={24}
-                            viewBox="0 0 24 24"
-                            fill="none"
-                          >
-                            <path
-                              d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
-                              stroke="#969AF9"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                            <path
-                              d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
-                              stroke="#969AF9"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                            <path
-                              d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
-                              stroke="#969AF9"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                          </svg>
+                          <FileIcon />
                           <p>{perm.permission}</p>
                         </div>
 
                         <div className={editRoleStyle.deleteBtn}>
-                          <div className={editRoleStyle.deleteSvg}>
-                            {" "}
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width={20}
-                              height={20}
-                              viewBox="0 0 20 20"
-                              fill="none"
-                            >
-                              <path
-                                d="M3.61133 6.00684H16.3891"
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                              <path
-                                d="M8.40234 9.20117V13.9928"
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                              <path
-                                d="M11.5977 9.20117V13.9928"
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                              <path
-                                d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                              <path
-                                d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                            </svg>
-                          </div>
+                          <ActionButton icon={<DeleteIcon />} />
                         </div>
                       </div>
                     );
diff --git a/frontend/src/app/roles/[rolesId]/styles.module.css b/frontend/src/app/roles/[rolesId]/styles.module.css
index b2d6884..3b646d4 100644
--- a/frontend/src/app/roles/[rolesId]/styles.module.css
+++ b/frontend/src/app/roles/[rolesId]/styles.module.css
@@ -215,34 +215,3 @@
   font-weight: 400;
   line-height: normal;
 }
-.deleteBtn {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-}
-.deleteSvg {
-  display: flex;
-  padding: 6px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid #959aff00;
-  color: #969af9;
-  aspect-ratio: 1/1;
-  border-radius: 100px;
-}
-
-.deleteSvg:hover {
-  color: #fff;
-  stroke-width: 1px;
-  stroke: color(display-p3 1 1 1);
-  border-radius: 100px;
-  border: 1px solid #959aff;
-  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
-  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-  background: linear-gradient(
-    180deg,
-    color(display-p3 0.4118 0.4196 0.5725) 0%,
-    color(display-p3 0.1241 0.1265 0.1725) 100%
-  );
-}
diff --git a/frontend/src/app/roles/styles.module.css b/frontend/src/app/roles/styles.module.css
index a1c4f3c..8179aa8 100644
--- a/frontend/src/app/roles/styles.module.css
+++ b/frontend/src/app/roles/styles.module.css
@@ -67,34 +67,3 @@
   gap: 12px;
   align-self: stretch;
 }
-.viewBtn,
-.deleteBtn {
-  display: flex;
-  padding: 6px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  aspect-ratio: 1/1;
-  border-radius: 100px;
-  color: #969af9;
-  border: none;
-  border: 1px solid transparent;
-  background: transparent;
-  outline: none;
-  cursor: pointer;
-}
-
-.viewBtn:hover,
-.deleteBtn:hover {
-  border-radius: 100px;
-  color: #fff;
-  color: color(display-p3 1 1 1);
-  border: 1px solid #959aff;
-  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
-  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-  background: linear-gradient(
-    180deg,
-    color(display-p3 0.4118 0.4196 0.5725) 0%,
-    color(display-p3 0.1241 0.1265 0.1725) 100%
-  );
-}
diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index 643eaed..3850e6c 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -6,6 +6,9 @@ import Prompts from "@/app/components/prompts/Prompts";
 import { useState } from "react";
 import TextField from "@/app/components/fields/textfield";
 import SelectField from "@/app/components/select/SelectField";
+import ActionButton from "@/app/components/actionButton/ActionButton";
+import DeleteIcon from "@/app/components/icons/delete";
+import FileIcon from "@/app/components/icons/file";
 
 const Page = () => {
   const sampleData = [
@@ -136,77 +139,12 @@ const Page = () => {
                     return (
                       <div className={editUserStyle.permissions} key={index}>
                         <div className={editUserStyle.permissionsItem}>
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width={24}
-                            height={24}
-                            viewBox="0 0 24 24"
-                            fill="none"
-                          >
-                            <path
-                              d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
-                              stroke="#969AF9"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                            <path
-                              d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
-                              stroke="#969AF9"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                            <path
-                              d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
-                              stroke="#969AF9"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                          </svg>
+                          <FileIcon />
                           <p>{perm.permission}</p>
                         </div>
 
                         <div className={editUserStyle.deleteBtn}>
-                          <div className={editUserStyle.deleteSvg}>
-                            {" "}
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width={20}
-                              height={20}
-                              viewBox="0 0 20 20"
-                              fill="none"
-                            >
-                              <path
-                                d="M3.61133 6.00684H16.3891"
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                              <path
-                                d="M8.40234 9.20117V13.9928"
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                              <path
-                                d="M11.5977 9.20117V13.9928"
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                              <path
-                                d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                              <path
-                                d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                            </svg>
-                          </div>
+                          <ActionButton icon={<DeleteIcon />} />
                         </div>
                       </div>
                     );
diff --git a/frontend/src/app/users/[usersId]/styles.module.css b/frontend/src/app/users/[usersId]/styles.module.css
index ee01963..9a40897 100644
--- a/frontend/src/app/users/[usersId]/styles.module.css
+++ b/frontend/src/app/users/[usersId]/styles.module.css
@@ -237,34 +237,3 @@
   font-weight: 400;
   line-height: normal;
 }
-.deleteBtn {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-}
-.deleteSvg {
-  display: flex;
-  padding: 6px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid #959aff00;
-  color: #969af9;
-  aspect-ratio: 1/1;
-  border-radius: 100px;
-}
-
-.deleteSvg:hover {
-  color: #fff;
-  stroke-width: 1px;
-  stroke: color(display-p3 1 1 1);
-  border-radius: 100px;
-  border: 1px solid #959aff;
-  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
-  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-  background: linear-gradient(
-    180deg,
-    color(display-p3 0.4118 0.4196 0.5725) 0%,
-    color(display-p3 0.1241 0.1265 0.1725) 100%
-  );
-}
diff --git a/frontend/src/app/users/styles.module.css b/frontend/src/app/users/styles.module.css
index 4bb610e..fc9fb65 100644
--- a/frontend/src/app/users/styles.module.css
+++ b/frontend/src/app/users/styles.module.css
@@ -66,34 +66,3 @@
   gap: 12px;
   align-self: stretch;
 }
-.viewBtn,
-.deleteBtn {
-  display: flex;
-  padding: 6px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  aspect-ratio: 1/1;
-  border-radius: 100px;
-  color: #969af9;
-  border: none;
-  border: 1px solid transparent;
-  background: transparent;
-  outline: none;
-  cursor: pointer;
-}
-
-.viewBtn:hover,
-.deleteBtn:hover {
-  border-radius: 100px;
-  color: #fff;
-  color: color(display-p3 1 1 1);
-  border: 1px solid #959aff;
-  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
-  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-  background: linear-gradient(
-    180deg,
-    color(display-p3 0.4118 0.4196 0.5725) 0%,
-    color(display-p3 0.1241 0.1265 0.1725) 100%
-  );
-}