profile dropdown changes

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;
 }

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>

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;
+}