From f88ef87c2ddad51b1bec5143eed16473ac5c5f8c Mon Sep 17 00:00:00 2001
From: sigmaBoei <benzzbarquilla@gmail.com>
Date: Thu, 26 Feb 2026 11:27:20 +0800
Subject: [PATCH] profile dropdown changes

---
 .../header/components/Profile.module.css      |  1 +
 frontend/src/app/users/add/page.jsx           | 17 ++++++++-
 frontend/src/app/users/add/styles.module.css  | 36 +++++++++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/users/add/styles.module.css

diff --git a/frontend/src/app/components/header/components/Profile.module.css b/frontend/src/app/components/header/components/Profile.module.css
index 64ceacd..b041423 100644
--- a/frontend/src/app/components/header/components/Profile.module.css
+++ b/frontend/src/app/components/header/components/Profile.module.css
@@ -86,6 +86,7 @@
   box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
   cursor: pointer;
   position: absolute;
+  z-index: 10;
   top: 100%;
   margin-top: 3px;
 }
diff --git a/frontend/src/app/users/add/page.jsx b/frontend/src/app/users/add/page.jsx
index deebbfb..981a24b 100644
--- a/frontend/src/app/users/add/page.jsx
+++ b/frontend/src/app/users/add/page.jsx
@@ -1,13 +1,28 @@
 import React from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
+import addUserStyle from "./styles.module.css";
 
 const page = () => {
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Add" topbarTitle="Add User" />
+          <TopHeader
+            buttonText="Add"
+            cancelButtonText="Cancel"
+            topbarTitle="Add User"
+            state="add"
+          />
+          <div className={addUserStyle.addUserContainer}>
+            {/* Input fields Container  */}
+            <div className={addUserStyle.inputFieldContainer}>
+              {/* User Details */}
+              <div className={addUserStyle.userDetails}></div>
+              {/* Permissions */}
+              <div className={addUserStyle.userPermissions}></div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/users/add/styles.module.css b/frontend/src/app/users/add/styles.module.css
new file mode 100644
index 0000000..4fa81fd
--- /dev/null
+++ b/frontend/src/app/users/add/styles.module.css
@@ -0,0 +1,36 @@
+.addUserContainer {
+  background-color: red;
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.inputFieldContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.userDetails {
+  display: flex;
+  width: 400px;
+  padding: 24px 24px 48px 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 6px;
+  background: #1d1e2a;
+  background: color(display-p3 0.1137 0.1176 0.1608);
+}
+
+.userPermissions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 6px;
+}