diff --git a/test/css/adduser.css b/test/css/adduser.css
new file mode 100644
index 0000000..be72882
--- /dev/null
+++ b/test/css/adduser.css
@@ -0,0 +1,122 @@
+* {
+  all: unset;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+title {
+  display: none;
+}
+
+body {
+  font-family: "Arial", sans-serif;
+  background: linear-gradient(135deg, #283e4a, #1c2e38);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 20px;
+}
+body .form-container {
+  background-color: rgba(255, 255, 255, 0.92);
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
+  width: 100%;
+  max-width: 800px;
+  text-align: left;
+  margin: auto;
+}
+body .form-container h2 {
+  color: #4e4e4e;
+  font-size: 28px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+body .form-container form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+body .form-container form .form-group {
+  flex: 1 1 calc(50% - 20px);
+  min-width: 250px;
+  margin-bottom: 20px;
+}
+body .form-container form .form-group label {
+  display: block;
+  color: #4e4e4e;
+  font-size: 16px;
+  margin-bottom: 5px;
+}
+body .form-container form .form-group input[type=text],
+body .form-container form .form-group input[type=password],
+body .form-container form .form-group input[type=email],
+body .form-container form .form-group input[type=date],
+body .form-container form .form-group select {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid rgba(220, 220, 220, 0.8);
+  border-radius: 6px;
+  background-color: rgba(245, 245, 245, 0.9);
+  font-size: 16px;
+  transition: border-color 0.3s, background-color 0.3s;
+}
+body .form-container form .form-group input[type=text]:focus,
+body .form-container form .form-group input[type=password]:focus,
+body .form-container form .form-group input[type=email]:focus,
+body .form-container form .form-group input[type=date]:focus,
+body .form-container form .form-group select:focus {
+  border-color: #007b8a;
+  outline: none;
+}
+body .form-container form .admin-access {
+  flex: 1 1 100%;
+  margin-bottom: 20px;
+}
+body .form-container form .admin-access label {
+  display: block;
+  color: #4e4e4e;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+body .form-container form .admin-access .checkbox-group {
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+}
+body .form-container form .role-dropdown {
+  flex: 1 1 calc(50% - 20px);
+  min-width: 250px;
+  padding: 0;
+}
+body .form-container form .submit-button {
+  flex: 1 1 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+body .form-container form .submit-button button {
+  width: 30%;
+  text-align: center;
+  padding: 12px;
+  background-color: #007b8a;
+  color: #ffffff;
+  border: none;
+  border-radius: 6px;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
+  box-shadow: 0 4px 10px rgba(0, 123, 138, 0.3);
+}
+body .form-container form .submit-button button:hover {
+  background-color: #006b7a;
+}
+body .form-container form .submit-button button:active {
+  transform: translateY(2px);
+}
+
+/*# sourceMappingURL=adduser.css.map */
diff --git a/test/css/adduser.css.map b/test/css/adduser.css.map
new file mode 100644
index 0000000..6ea369b
--- /dev/null
+++ b/test/css/adduser.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/adduser.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACLJ;EACE;EACA,YCc0B;EDb1B;EACA;EACA;EACA;EACA;;AAGA;EACE,kBCOuB;EDNvB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE,OCFsB;EDGtB;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGA;EACE;EACA,OCxBkB;EDyBlB;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA,kBCtCkB;EDuClB;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE,cCzCwB;ED0CxB;;AAMN;EACE;EACA;;AAEA;EACE;EACA,OCzDkB;ED0DlB;EACA;;AAIF;EACE;EACA;EACA;;AAKJ;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACI;EACA;EACF;EACA,kBCpFc;EDqFd,OCnFmB;EDoFnB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBC9FkB;;ADiGpB;EACE","file":"adduser.css"}
\ No newline at end of file
diff --git a/test/css/login.css.map b/test/css/login.css.map
index 85ca0af..29bb7db 100644
--- a/test/css/login.css.map
+++ b/test/css/login.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/login.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;ACAJ;EACE;;;AAGF;EAEE;EACA,YCV4B;EDW5B;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAKF;EACE;EACA,OCrCqB;EDsCrB;;AAIF;EACE;EACA,OC3CyB;;ADgD7B;EACE,kBC/CoB;EDgDpB;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA,OCxDmB;EDyDnB;;AAGF;EACE;EACA;EACA;;AAGA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,kBCzEsB;ED0EtB;;AAEA;AAAA;EACI,cC1E0B;;AD4E9B;AAAA;EACE,cC5E4B;ED6E5B,kBChF4B;EDiF5B;;AAIJ;EACE;EACA;EACA,kBCpFa;EDqFb,OCjFkB;EDkFlB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBC9FiB;;ADiGnB;EACE;EACA","file":"login.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/login.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACNJ;EAEE;EACA,YCL4B;EDM5B;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAKF;EACE;EACA,OChCqB;EDiCrB;;AAIF;EACE;EACA,OCtCyB;;AD2C7B;EACE,kBC1CoB;ED2CpB;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA,OCnDmB;EDoDnB;;AAGF;EACE;EACA;EACA;;AAGA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,kBCpEsB;EDqEtB;;AAEA;AAAA;EACI,cCrE0B;;ADuE9B;AAAA;EACE,cCvE4B;EDwE5B,kBC3E4B;ED4E5B;;AAIJ;EACE;EACA;EACA,kBC/Ea;EDgFb,OC5EkB;ED6ElB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBCzFiB;;AD4FnB;EACE;EACA","file":"login.css"}
\ No newline at end of file
diff --git a/test/html/adduser.html b/test/html/adduser.html
new file mode 100644
index 0000000..c20fb38
--- /dev/null
+++ b/test/html/adduser.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/home/lcm/Works/ldapmanager/test/css/adduser.css">
+    <title>Add New User</title>
+</head>
+<body>
+
+    <div class="form-container">
+        <h2>Add New User</h2>
+        <form action="/add_user" method="post">
+            <div class="form-group">
+                <label for="full-name">Full Name</label>
+                <input type="text" id="full-name" name="full_name" placeholder="Full Name" required>
+            </div>
+
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" placeholder="Username" required>
+            </div>
+
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" placeholder="Password" required>
+            </div>
+
+            <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" placeholder="Email Address" required>
+            </div>
+
+            <div class="form-group">
+                <label for="date-joining">Date of Joining</label>
+                <input type="date" id="date-joining" name="date_of_joining" required>
+            </div>
+
+            <div class="form-group">
+                <label for="date-birth">Date of Birth</label>
+                <input type="date" id="date-birth" name="date_of_birth" required>
+            </div>
+            
+            <div class="form-group role-dropdown">
+                <label for="role">User Role</label>
+                <select id="role" name="role" required>
+                    <option value="" class="placeholder-option">--Select Role--</option>
+                    <option value="admin">Admin</option>
+                    <option value="user">User</option>
+                    <option value="moderator">Moderator</option>
+                </select>
+            </div>
+
+            <!-- New input field for testing -->
+<div class="form-group">
+    <label for="department">Department</label>
+    <input type="text" id="department" name="department" placeholder="Department">
+</div>
+
+
+<div class="form-group admin-access">
+    <label>Admin Access</label>
+    <div class="checkbox-group">
+        <input type="checkbox" id="add-access" name="add_access">
+        <label class="checkbox" for="add-access">Add</label>
+
+        <input type="checkbox" id="edit-access" name="edit_access">
+        <label class="checkbox" for="edit-access">Edit</label>
+
+        <input type="checkbox" id="approve-access" name="approve_access">
+        <label class="checkbox" for="approve-access">Approve</label>
+    </div>
+</div>
+            
+
+            <!-- Submit Button -->
+            <div class="form-group submit-button">
+                <button type="submit">Add User</button>
+            </div>
+        </form>
+    </div>
+
+</body>
+</html>
diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss
index 97cecc1..0741d12 100644
--- a/test/scss/_colors.scss
+++ b/test/scss/_colors.scss
@@ -16,3 +16,18 @@ $login-button-hover-color: #2f798a;
 $login-button-shadow: rgba(0, 95, 115, 0.3); 
 $login-button-active-shadow: rgba(70, 70, 70, 0.2); 
 $login-button-text-color: #fff; 
+
+// Add New User Page Colors
+$add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient
+$add-user-header-color: #ffffff; // Header text color (white for contrast)
+$add-user-form-background: rgba(255, 255, 255, 0.92); // Form background color
+$add-user-form-shadow-color: rgba(0, 0, 0, 0.25); // Form shadow color
+$add-user-form-title-color: #4e4e4e; // Form title color
+$add-user-input-background: rgba(245, 245, 245, 0.9); // Input field background color
+$add-user-input-border-color: rgba(220, 220, 220, 0.8); // Input field border color
+$add-user-input-focus-border-color: #007b8a; // Focus border color for inputs
+$add-user-button-color: #007b8a; // Primary button color
+$add-user-button-hover-color: #006b7a; // Button hover color
+$add-user-button-text-color: #ffffff; // Button text color
+$add-user-button-shadow: rgba(0, 123, 138, 0.3); // Button shadow color
+$add-user-description-color: rgba(220, 220, 220, 0.8); // Description text color
diff --git a/test/scss/_common.scss b/test/scss/_common.scss
index 1f2d385..ca527a1 100644
--- a/test/scss/_common.scss
+++ b/test/scss/_common.scss
@@ -3,4 +3,9 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-}
\ No newline at end of file
+}
+
+// Hide the title
+title {
+    display: none;
+  }
\ No newline at end of file
diff --git a/test/scss/adduser.scss b/test/scss/adduser.scss
new file mode 100644
index 0000000..3e938d6
--- /dev/null
+++ b/test/scss/adduser.scss
@@ -0,0 +1,134 @@
+@use "common";  // Reset styles
+@use "colors" as *; // Color scheme for Add New User page
+
+// Basic styling for the body
+body {
+  font-family: 'Arial', sans-serif;
+  background: $add-user-background-color; // Use background gradient for the page
+  display: flex;
+  justify-content: center; // Center the form horizontally
+  align-items: center; // Center the form vertically
+  height: 100%;
+  padding: 20px; // Add some padding for mobile responsiveness
+
+  // Container for the form
+  .form-container {
+    background-color: $add-user-form-background; // Form background color
+    padding: 40px;
+    border-radius: 12px; // Rounded corners for the form
+    box-shadow: 0 8px 15px $add-user-form-shadow-color;
+    width: 100%;
+    max-width: 800px; // Increase the maximum width for a wider form
+    text-align: left; // Left-align text
+    margin: auto;
+
+    // Form header
+    h2 {
+      color: $add-user-form-title-color; // Form title color
+      font-size: 28px;
+      margin-bottom: 20px;
+      text-align: center; // Center the title
+    }
+
+    // Form element
+    form {
+      display: flex;
+      flex-wrap: wrap; // Allow wrapping for form groups
+      gap: 20px; // Add consistent gap between elements
+      margin-bottom: 20px; // Add space below the form for submit button
+
+      // Form groups for each input
+      .form-group {
+        flex: 1 1 calc(50% - 20px); // Take up half the row, accounting for gap
+        min-width: 250px; // Minimum width to prevent shrinking too much
+        margin-bottom: 20px; // Spacing between fields
+
+        // Label styling
+        label {
+          display: block;
+          color: $add-user-form-title-color;
+          font-size: 16px;
+          margin-bottom: 5px;
+        }
+
+        // Input and select styling
+        input[type="text"],
+        input[type="password"],
+        input[type="email"],
+        input[type="date"],
+        select {
+          width: 100%; // Full width of the form group
+          padding: 12px;
+          border: 1px solid $add-user-input-border-color; // Input field border color
+          border-radius: 6px;
+          background-color: $add-user-input-background; // Input background color
+          font-size: 16px;
+          transition: border-color 0.3s, background-color 0.3s;
+
+          &:focus {
+            border-color: $add-user-input-focus-border-color; // Focus border color
+            outline: none;
+          }
+        }
+      }
+
+      // Admin Access Checkboxes
+      .admin-access {
+        flex: 1 1 100%; // Full width for admin access checkboxes
+        margin-bottom: 20px; // Space below the checkboxes
+
+        label {
+          display: block; // Ensure label occupies full line
+          color: $add-user-form-title-color;
+          font-size: 16px;
+          margin-bottom: 10px; // Space below the main label
+        }
+
+        // Container for checkboxes
+        .checkbox-group {
+          display: flex; // Use flex for checkboxes
+          justify-content: flex-start; // Align items to the start
+          gap: 10px; // Space between each checkbox label
+        }
+      }
+
+      // Dropdown Menu for Admin Role
+      .role-dropdown {
+        flex: 1 1 calc(50% - 20px); // Explicitly set to half width, considering gap
+        min-width: 250px; // Minimum width to avoid shrinking too much
+        padding: 0; // Reset any padding
+      }
+
+      // Submit button styling
+      .submit-button {
+        flex: 1 1 100%; // Full width for the submit button
+        display: flex; // Use flex to center the button
+        justify-content: center; // Center the button
+        margin-top: 20px; // Space above the button
+
+        button {
+            width: 30%;
+            text-align: center;
+          padding: 12px; // Padding for button
+          background-color: $add-user-button-color; // Primary button color
+          color: $add-user-button-text-color;
+          border: none;
+          border-radius: 6px;
+          font-size: 18px;
+          font-weight: bold;
+          cursor: pointer;
+          transition: background-color 0.3s, transform 0.3s;
+          box-shadow: 0 4px 10px $add-user-button-shadow;
+
+          &:hover {
+            background-color: $add-user-button-hover-color; // Button hover color
+          }
+
+          &:active {
+            transform: translateY(2px); // Subtle press effect
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/test/scss/login.scss b/test/scss/login.scss
index aa6c1c5..ff89187 100644
--- a/test/scss/login.scss
+++ b/test/scss/login.scss
@@ -1,11 +1,6 @@
 @use "common";  // Reset styles
 @use "colors" as *; // Color scheme
 
-// Hide the title
-title {
-  display: none;
-}
-
 body {
   // Page background
   font-family: 'Arial', sans-serif;