From 0a2bae59ff3dd13c84daa7e16f59b3be3cbd7d41 Mon Sep 17 00:00:00 2001
From: benzbarquilla <benzzbarquilla@gmail.com>
Date: Tue, 3 Mar 2026 20:42:12 +0800
Subject: [PATCH] imported components

---
 .../components/permissions/Permissions.jsx    |  71 +---------
 frontend/src/app/roles/[rolesId]/page.jsx     |  70 ++--------
 .../src/app/roles/[rolesId]/styles.module.css | 128 +-----------------
 frontend/src/app/roles/add/page.jsx           |  44 +-----
 frontend/src/app/roles/add/styles.module.css  | 123 +----------------
 frontend/src/app/users/[usersId]/page.jsx     |  59 +-------
 .../src/app/users/[usersId]/styles.module.css | 127 -----------------
 frontend/src/app/users/add/page.jsx           |  42 +-----
 frontend/src/app/users/add/styles.module.css  |  96 +------------
 9 files changed, 37 insertions(+), 723 deletions(-)

diff --git a/frontend/src/app/components/permissions/Permissions.jsx b/frontend/src/app/components/permissions/Permissions.jsx
index 620b368..51a0519 100644
--- a/frontend/src/app/components/permissions/Permissions.jsx
+++ b/frontend/src/app/components/permissions/Permissions.jsx
@@ -1,3 +1,6 @@
+import ActionButton from "../actionButton/ActionButton";
+import DeleteIcon from "../icons/delete";
+import FileIcon from "../icons/file";
 import editUserStyle from "./styles.module.css";
 import React from "react";
 
@@ -51,75 +54,11 @@ const Permissions = ({ sampleData = [] }) => {
               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/roles/[rolesId]/page.jsx b/frontend/src/app/roles/[rolesId]/page.jsx
index 9b29b38..00df56d 100644
--- a/frontend/src/app/roles/[rolesId]/page.jsx
+++ b/frontend/src/app/roles/[rolesId]/page.jsx
@@ -3,9 +3,7 @@ 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";
+import Permissions from "@/app/components/permissions/Permissions";
 
 const page = () => {
   const sampleData = [
@@ -16,13 +14,13 @@ const page = () => {
     { permission: "robot.create" },
     { permission: "user.delete" },
     { permission: "robot.list" },
-    // { permission: "robot.delete" },
-    // { permission: "project.delete" },
-    // { permission: "project.update" },
-    // { permission: "service.create" },
-    // { permission: "service.list" },
-    // { permission: "service.delete" },
-    // { permission: "service.update" },
+    { permission: "robot.delete" },
+    { permission: "project.delete" },
+    { permission: "project.update" },
+    { permission: "service.create" },
+    { permission: "service.list" },
+    { permission: "service.delete" },
+    { permission: "service.update" },
   ];
   return (
     <div className={globalStyle.section}>
@@ -79,57 +77,7 @@ const page = () => {
               </div>
 
               {/* Permissions */}
-              <div className={editRoleStyle.userPermissions}>
-                {/* Add permissions */}
-                <div className={editRoleStyle.permissionsContainer}>
-                  {/* Header */}
-                  <div className={editRoleStyle.permissionsHeader}>
-                    <p>Permissions</p>
-                    <div className={editRoleStyle.svgContainer}>
-                      <div>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width={24}
-                          height={24}
-                          viewBox="0 0 24 24"
-                          fill="none"
-                        >
-                          <path
-                            d="M12 5.29199V18.7087"
-                            stroke="#333649"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M5.29102 12H18.7077"
-                            stroke="#333649"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* State text (static) */}
-                  {sampleData.map((perm, index) => {
-                    return (
-                      <div className={editRoleStyle.permissions} key={index}>
-                        <div className={editRoleStyle.permissionsItem}>
-                          <FileIcon />
-                          <p>{perm.permission}</p>
-                        </div>
-
-                        <div className={editRoleStyle.deleteBtn}>
-                          <ActionButton icon={<DeleteIcon />} />
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
+              <Permissions sampleData={sampleData} />
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/roles/[rolesId]/styles.module.css b/frontend/src/app/roles/[rolesId]/styles.module.css
index 3b646d4..45b92d1 100644
--- a/frontend/src/app/roles/[rolesId]/styles.module.css
+++ b/frontend/src/app/roles/[rolesId]/styles.module.css
@@ -1,6 +1,6 @@
 .addRoleContainer {
   display: flex;
-  padding: 36px 144px 72px 144px;
+  padding: 0px 144px 0px 144px;
   align-items: flex-start;
   gap: 24px;
   flex: 1 0 0;
@@ -16,7 +16,8 @@
 .userDetails {
   display: flex;
   width: 400px;
-  padding: 24px 24px 48px 24px;
+  padding: 20px 24px 48px 24px;
+  margin-top: 36px;
   flex-direction: column;
   align-items: flex-start;
   border-radius: 6px;
@@ -93,125 +94,6 @@
   align-self: stretch;
 }
 
-.userPermissions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
-  align-self: stretch;
-  border-radius: 6px;
-}
-.permissionsContainer {
-  display: flex;
-  padding: 24px;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-  border-radius: 6px;
-  background: #1d1e2a;
-  background: color(display-p3 0.1138 0.1191 0.1616);
-}
-.permissionsHeader {
-  display: flex;
-  padding-bottom: 24px;
-  align-items: flex-start;
-  gap: 17px;
-  align-self: stretch;
-}
-
-.permissionsHeader > p {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 5px;
-  flex: 1 0 0;
-
-  color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
-  font-family: Inter;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-  width: 163px;
-}
-.svgContainer {
-  display: flex;
-  width: 40px;
-  height: 40px;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 5px;
-  border-radius: 6px;
-  background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
-}
-
-.svgContainer > div {
-  display: flex;
-  padding: 8px;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  border-radius: 6px;
-  background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
-}
-
-.permissionDefaultState {
-  display: flex;
-  height: 43.813px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-}
-.permissionDefaultState p {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  flex: 1 0 0;
-  align-self: stretch;
-  color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-}
-
-.permissions {
-  display: flex;
-  height: 43.813px;
-  padding: 8px 16px;
-  justify-content: space-between;
-  align-items: center;
-  align-self: stretch;
-  border-bottom: 0.5px solid #2e3042;
-  border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
-}
-.permissions:hover {
-  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
-  border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
-  background: rgba(129, 135, 255, 0.05);
-  background: color(display-p3 0.5098 0.5294 1 / 0.05);
-}
-.permissionsItem {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1 0 0;
-  align-self: stretch;
-}
-.permissionsItem > p {
-  color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+.imanginaryDiv {
+  padding: 18px;
 }
diff --git a/frontend/src/app/roles/add/page.jsx b/frontend/src/app/roles/add/page.jsx
index 27e5530..25a0f17 100644
--- a/frontend/src/app/roles/add/page.jsx
+++ b/frontend/src/app/roles/add/page.jsx
@@ -3,6 +3,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import addRoleStyle from "./styles.module.css";
 import TextField from "@/app/components/fields/textfield";
+import Permissions from "@/app/components/permissions/Permissions";
 
 const page = () => {
   return (
@@ -16,7 +17,7 @@ const page = () => {
             state="add"
             requiredButtons={["title", "save"]}
           />
-          <div className={addRoleStyle.addUserContainer}>
+          <div className={addRoleStyle.addRoleContainer}>
             {/* Input fields Container  */}
             <div className={addRoleStyle.inputFieldContainer}>
               {/* User Details */}
@@ -59,46 +60,7 @@ const page = () => {
               </div>
 
               {/* Permissions */}
-              <div className={addRoleStyle.rolePermissions}>
-                {/* Add permissions */}
-                <div className={addRoleStyle.permissionsContainer}>
-                  {/* Header */}
-                  <div className={addRoleStyle.permissionsHeader}>
-                    <p>Permissions</p>
-                    <div className={addRoleStyle.svgContainer}>
-                      <div>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width={24}
-                          height={24}
-                          viewBox="0 0 24 24"
-                          fill="none"
-                        >
-                          <path
-                            d="M12 5.29199V18.7087"
-                            stroke="#333649"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M5.29102 12H18.7077"
-                            stroke="#333649"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* State text (static) */}
-                  <div className={addRoleStyle.permissionDefaultState}>
-                    <p>No permission added yet</p>
-                  </div>
-                </div>
-              </div>
+              <Permissions />
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/roles/add/styles.module.css b/frontend/src/app/roles/add/styles.module.css
index f608cc8..197be8b 100644
--- a/frontend/src/app/roles/add/styles.module.css
+++ b/frontend/src/app/roles/add/styles.module.css
@@ -1,6 +1,6 @@
-.addUserContainer {
+.addRoleContainer {
   display: flex;
-  padding: 36px 144px 72px 144px;
+  padding: 0px 144px 0 144px;
   align-items: flex-start;
   gap: 24px;
   flex: 1 0 0;
@@ -16,7 +16,8 @@
 .roleDetails {
   display: flex;
   width: 400px;
-  padding: 24px 24px 48px 24px;
+  padding: 20px 24px 48px 24px;
+  margin-top: 36px;
   flex-direction: column;
   align-items: flex-start;
   border-radius: 6px;
@@ -92,118 +93,6 @@
   gap: 8px;
   align-self: stretch;
 }
-
-/* Select Role Dropdown */
-.selectField {
-  display: flex;
-  height: 44px;
-  padding: 12px 16px;
-  align-self: stretch;
-  background: none;
-  border-radius: 6px;
-  border: 1px solid #616583;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
-  color: #d2d3e1;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 400;
-  appearance: none;
-}
-
-.selectField:focus {
-  outline: none;
-  border: 1px solid #959aff;
-  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
-  background: rgba(75, 79, 109, 0.25);
-  background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
-}
-
-.rolePermissions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
-  align-self: stretch;
-  border-radius: 6px;
-}
-.permissionsContainer {
-  display: flex;
-  padding: 24px;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-  border-radius: 6px;
-  background: #1d1e2a;
-  background: color(display-p3 0.1138 0.1191 0.1616);
-}
-.permissionsHeader {
-  display: flex;
-  padding-bottom: 24px;
-  align-items: flex-start;
-  gap: 17px;
-  align-self: stretch;
-}
-
-.permissionsHeader > p {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 5px;
-  flex: 1 0 0;
-
-  color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
-  font-family: Inter;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-  width: 163px;
-}
-.svgContainer {
-  display: flex;
-  width: 40px;
-  height: 40px;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 5px;
-  border-radius: 6px;
-  background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
-}
-
-.svgContainer > div {
-  display: flex;
-  padding: 8px;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  border-radius: 6px;
-  background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
-}
-
-.permissionDefaultState {
-  display: flex;
-  height: 43.813px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-}
-.permissionDefaultState p {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  flex: 1 0 0;
-  align-self: stretch;
-  color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+.imanginaryDiv {
+  padding: 18px;
 }
diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index 3850e6c..efa6558 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -6,9 +6,7 @@ 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";
+import Permissions from "@/app/components/permissions/Permissions";
 
 const Page = () => {
   const sampleData = [
@@ -96,61 +94,8 @@ const Page = () => {
                   </div>
                 </form>
               </div>
-
               {/* Permissions */}
-              <div className={editUserStyle.userPermissions}>
-                {/* Add permissions */}
-                <div className={editUserStyle.imanginaryDiv}></div>
-                <div className={editUserStyle.permissionsContainer}>
-                  {/* Header */}
-
-                  <div className={editUserStyle.permissionsHeader}>
-                    <p>Permissions</p>
-                    <div className={editUserStyle.svgContainer}>
-                      <div>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width={24}
-                          height={24}
-                          viewBox="0 0 24 24"
-                          fill="none"
-                        >
-                          <path
-                            d="M12 5.29199V18.7087"
-                            stroke="#333649"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M5.29102 12H18.7077"
-                            stroke="#333649"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* State text (static) */}
-                  {sampleData.map((perm, index) => {
-                    return (
-                      <div className={editUserStyle.permissions} key={index}>
-                        <div className={editUserStyle.permissionsItem}>
-                          <FileIcon />
-                          <p>{perm.permission}</p>
-                        </div>
-
-                        <div className={editUserStyle.deleteBtn}>
-                          <ActionButton icon={<DeleteIcon />} />
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
+              <Permissions sampleData={sampleData} />
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/users/[usersId]/styles.module.css b/frontend/src/app/users/[usersId]/styles.module.css
index 9a40897..af3385d 100644
--- a/frontend/src/app/users/[usersId]/styles.module.css
+++ b/frontend/src/app/users/[usersId]/styles.module.css
@@ -110,130 +110,3 @@
 .imanginaryDiv {
   padding: 18px;
 }
-.userPermissions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
-  align-self: stretch;
-  border-radius: 6px;
-  height: calc(100vh - 175px);
-  position: relative;
-  overflow: auto;
-  scrollbar-width: none;
-}
-
-.permissionsContainer {
-  display: flex;
-  padding: 24px;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-  border-radius: 6px;
-  background: #1d1e2a;
-  background: color(display-p3 0.1138 0.1191 0.1616);
-}
-.permissionsHeader {
-  display: flex;
-  padding-bottom: 24px;
-  align-items: flex-start;
-  gap: 17px;
-  align-self: stretch;
-}
-
-.permissionsHeader > p {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 5px;
-  flex: 1 0 0;
-
-  color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
-  font-family: Inter;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-  width: 163px;
-}
-.svgContainer {
-  display: flex;
-  width: 40px;
-  height: 40px;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 5px;
-  border-radius: 6px;
-  background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
-}
-
-.svgContainer > div {
-  display: flex;
-  padding: 8px;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  border-radius: 6px;
-  background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
-}
-
-.permissionDefaultState {
-  display: flex;
-  height: 43.813px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-}
-.permissionDefaultState p {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  flex: 1 0 0;
-  align-self: stretch;
-  color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-}
-
-.permissions {
-  display: flex;
-  height: 43.813px;
-  padding: 8px 16px;
-  justify-content: space-between;
-  align-items: center;
-  align-self: stretch;
-  border-bottom: 0.5px solid #2e3042;
-  border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
-}
-.permissions:hover {
-  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
-  border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
-  background: rgba(129, 135, 255, 0.05);
-  background: color(display-p3 0.5098 0.5294 1 / 0.05);
-}
-.permissionsItem {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1 0 0;
-  align-self: stretch;
-}
-.permissionsItem > p {
-  color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-}
diff --git a/frontend/src/app/users/add/page.jsx b/frontend/src/app/users/add/page.jsx
index aa8c474..252f2a0 100644
--- a/frontend/src/app/users/add/page.jsx
+++ b/frontend/src/app/users/add/page.jsx
@@ -4,6 +4,7 @@ import globalStyle from "../../globalStyle.module.css";
 import addUserStyle from "./styles.module.css";
 import TextField from "@/app/components/fields/textfield";
 import SelectField from "@/app/components/select/SelectField";
+import Permissions from "@/app/components/permissions/Permissions";
 const page = () => {
   return (
     <div className={globalStyle.section}>
@@ -68,46 +69,7 @@ const page = () => {
               </div>
 
               {/* Permissions */}
-              <div className={addUserStyle.userPermissions}>
-                {/* Add permissions */}
-                <div className={addUserStyle.permissionsContainer}>
-                  {/* Header */}
-                  <div className={addUserStyle.permissionsHeader}>
-                    <p>Permissions</p>
-                    <div className={addUserStyle.svgContainer}>
-                      <div>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width={24}
-                          height={24}
-                          viewBox="0 0 24 24"
-                          fill="none"
-                        >
-                          <path
-                            d="M12 5.29199V18.7087"
-                            stroke="#333649"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M5.29102 12H18.7077"
-                            stroke="#333649"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* State text (static) */}
-                  <div className={addUserStyle.permissionDefaultState}>
-                    <p>No permission added yet</p>
-                  </div>
-                </div>
-              </div>
+              <Permissions />
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/users/add/styles.module.css b/frontend/src/app/users/add/styles.module.css
index 0f33490..6acd5d8 100644
--- a/frontend/src/app/users/add/styles.module.css
+++ b/frontend/src/app/users/add/styles.module.css
@@ -1,6 +1,6 @@
 .addUserContainer {
   display: flex;
-  padding: 36px 144px 72px 144px;
+  padding: 0px 144px 0px 144px;
   align-items: flex-start;
   gap: 24px;
   flex: 1 0 0;
@@ -16,7 +16,8 @@
 .userDetails {
   display: flex;
   width: 400px;
-  padding: 24px 24px 48px 24px;
+  padding: 20px 24px 48px 24px;
+  margin-top: 36px;
   flex-direction: column;
   align-items: flex-start;
   border-radius: 6px;
@@ -92,93 +93,6 @@
   gap: 8px;
   align-self: stretch;
 }
-
-.userPermissions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
-  align-self: stretch;
-  border-radius: 6px;
-}
-.permissionsContainer {
-  display: flex;
-  padding: 24px;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-  border-radius: 6px;
-  background: #1d1e2a;
-  background: color(display-p3 0.1138 0.1191 0.1616);
-}
-.permissionsHeader {
-  display: flex;
-  padding-bottom: 24px;
-  align-items: flex-start;
-  gap: 17px;
-  align-self: stretch;
-}
-
-.permissionsHeader > p {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 5px;
-  flex: 1 0 0;
-
-  color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
-  font-family: Inter;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-  width: 163px;
-}
-.svgContainer {
-  display: flex;
-  width: 40px;
-  height: 40px;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 5px;
-  border-radius: 6px;
-  background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
-}
-
-.svgContainer > div {
-  display: flex;
-  padding: 8px;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  border-radius: 6px;
-  background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
-}
-
-.permissionDefaultState {
-  display: flex;
-  height: 43.813px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-}
-.permissionDefaultState p {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  flex: 1 0 0;
-  align-self: stretch;
-  color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+.imanginaryDiv {
+  padding: 18px;
 }