diff --git a/.gitignore b/.gitignore
index 0cafc1c..49b5f2d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-.venv/
\ No newline at end of file
+.venv/
+test/scripts/csswatch.sh
diff --git a/test/css/adduser.css b/test/css/adduser.css
index be72882..14cecf0 100644
--- a/test/css/adduser.css
+++ b/test/css/adduser.css
@@ -32,7 +32,8 @@ body .form-container h2 {
   color: #4e4e4e;
   font-size: 28px;
   margin-bottom: 20px;
-  text-align: center;
+  text-align: left;
+  display: block;
 }
 body .form-container form {
   display: flex;
@@ -43,7 +44,6 @@ body .form-container form {
 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;
@@ -55,6 +55,9 @@ 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 input[type=number],
+body .form-container form .form-group input[type=datetime-local],
+body .form-container form .form-group input[type=tel],
 body .form-container form .form-group select {
   width: 100%;
   padding: 12px;
@@ -68,30 +71,130 @@ 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 input[type=number]:focus,
+body .form-container form .form-group input[type=datetime-local]:focus,
+body .form-container form .form-group input[type=tel]: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;
+  margin-bottom: 5px;
 }
 body .form-container form .admin-access .checkbox-group {
   display: flex;
-  justify-content: flex-start;
   gap: 10px;
 }
+body .form-container form .admin-access .checkbox-group input[type=checkbox] {
+  display: none;
+}
+body .form-container form .admin-access .checkbox-group label.checkbox {
+  cursor: pointer;
+  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;
+  text-align: center;
+  width: 100%;
+  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+  user-select: none;
+}
+body .form-container form .admin-access .checkbox-group label.checkbox:hover, body .form-container form .admin-access .checkbox-group label.checkbox:focus {
+  background-color: rgba(232, 232, 232, 0.9);
+  border-color: #007b8a;
+}
+body .form-container form .admin-access .checkbox-group input[type=checkbox]:checked + label.checkbox {
+  background-color: #009299;
+  color: #ffffff;
+  border-color: rgba(0, 170, 179, 0.8);
+}
 body .form-container form .role-dropdown {
   flex: 1 1 calc(50% - 20px);
   min-width: 250px;
   padding: 0;
 }
+body .form-container form .radio-group {
+  display: flex;
+  gap: 10px;
+}
+body .form-container form .radio-group input[type=radio] {
+  display: none;
+}
+body .form-container form .radio-group label.radio {
+  cursor: pointer;
+  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;
+  text-align: center;
+  width: 100%;
+  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+  user-select: none;
+}
+body .form-container form .radio-group label.radio:hover, body .form-container form .radio-group label.radio:focus {
+  background-color: rgba(232, 232, 232, 0.9);
+  border-color: #007b8a;
+}
+body .form-container form .radio-group input[type=radio]:checked + label.radio {
+  background-color: #009299;
+  color: #ffffff;
+  border-color: rgba(0, 170, 179, 0.8);
+}
+body .form-container form input[type=range] {
+  width: 100%;
+  height: 45px;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 6px;
+  background-color: rgba(245, 245, 245, 0.9);
+  border: 1px solid rgba(220, 220, 220, 0.8);
+  cursor: pointer;
+  padding: 0;
+  box-sizing: border-box;
+}
+body .form-container form input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  background: linear-gradient(to right, #007b8a 0%, #007b8a var(--value), rgba(245, 245, 245, 0.9) var(--value));
+}
+body .form-container form input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  background: linear-gradient(to right, #007b8a 0%, #007b8a var(--value), rgba(245, 245, 245, 0.9) var(--value));
+}
+body .form-container form input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  background-color: #007b8a;
+  border: 2px solid rgba(220, 220, 220, 0.8);
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+body .form-container form input[type=range]::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #007b8a;
+  border: 2px solid rgba(220, 220, 220, 0.8);
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+body .form-container form input[type=range]:focus {
+  outline: none;
+  border-color: #007b8a;
+}
 body .form-container form .submit-button {
   flex: 1 1 100%;
   display: flex;
@@ -99,7 +202,7 @@ body .form-container form .submit-button {
   margin-top: 20px;
 }
 body .form-container form .submit-button button {
-  width: 30%;
+  width: 40%;
   text-align: center;
   padding: 12px;
   background-color: #007b8a;
diff --git a/test/css/adduser.css.map b/test/css/adduser.css.map
index 6ea369b..023662e 100644
--- a/test/css/adduser.css.map
+++ b/test/css/adduser.css.map
@@ -1 +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
+{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/adduser.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACLJ;EACI;EACA,YCcwB;EDbxB;EACA;EACA;EACA;EACA;;AAGA;EACI,kBCOmB;EDNnB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI,OCFgB;EDGhB;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGA;EACI;EACA,OCxBQ;EDyBR;EACA;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQI;EACA;EACA;EACA;EACA,kBCzCQ;ED0CR;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI,cC5CY;ED6CZ;;AAMR;EACI;EACA,OCxDQ;EDyDR;EACA;;AAGJ;EACI;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA,kBC3EI;ED4EJ;EACA;EACA;EACA;EACA;;AAGA;EAEI,kBC7EY;ED8EZ,cCxEmB;;AD6E3B;EACI,kBCnFiB;EDoFjB,OCjFsB;EDkFtB,cC/EwB;;ADqFpC;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA,kBCzHQ;ED0HR;EACA;EACA;EACA;EACA;;AAGA;EAEI,kBClHa;EDmHb,cC7GoB;;ADkH5B;EACI,kBCxHkB;EDyHlB,OCtHuB;EDuHvB,cCpHyB;;ADyHjC;EACI;EACA;EACA;EACA;EACA;EACA,kBCvJY;EDwJZ;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA,kBChLI;EDiLJ;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EACA;EACA,kBC5LI;ED6LJ;EACA;EACA;EACA;;AAGJ;EACI;EACA,cCtMgB;;AD2MxB;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,kBCpNI;EDqNJ,OCnNS;EDoNT;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBC9NM;;ADiOV;EACI","file":"adduser.css"}
\ No newline at end of file
diff --git a/test/css/login.css.map b/test/css/login.css.map
index 29bb7db..2ab50db 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;;;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
+{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/login.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACNJ;EAEI;EACA,YCL0B;EDM1B;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA,OChCe;EDiCf;;AAIJ;EACI;EACA,OCtCmB;;AD2C3B;EACI,kBC1CgB;ED2ChB;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA,OCnDa;EDoDb;;AAGJ;EACI;EACA;EACA;;AAGA;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA,kBCpEc;EDqEd;;AAEA;AAAA;EACI,cCrEkB;;ADuEtB;AAAA;EACI,cCvEkB;EDwElB,kBC3EkB;ED4ElB;;AAIR;EACI;EACA;EACA,kBC/EK;EDgFL,OC5EU;ED6EV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBCzFO;;AD4FX;EACI;EACA","file":"login.css"}
\ No newline at end of file
diff --git a/test/html/adduser.html b/test/html/adduser.html
index c20fb38..87f6374 100644
--- a/test/html/adduser.html
+++ b/test/html/adduser.html
@@ -1,84 +1,123 @@
 <!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>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/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-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="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="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="passwordconfirm">Confirm password</label>
+					<input type="password" id="passwordconfirm" name="passwordconfirm" placeholder="Re-enter password" 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="designation">Designation</label>
+					<input type="text" id="designation" name="designation" placeholder="Designation" 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>
+				<div class="form-group">
+					<label for="department">Department</label>
+					<input type="text" id="department" name="department" placeholder="Department">
+				</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="mail-quota">Mail Quota (MB)</label>
+					<input type="number" id="mail-quota" name="mail_quota" placeholder="Enter mail quota in MB" value="0" min="0" step="1" required>
+				</div>
+
+				<div class="form-group">
+					<label for="date-joining">Date of Joining</label>
+					<input type="date" id="date-joining" name="date_of_joining" value="2018-07-22" required>
+				</div>
+
+				<div class="form-group">
+					<label for="date-birth">Date of Birth</label>
+					<input type="date" id="date-birth" name="date_of_birth" value="2018-07-22" required>
+				</div>
+
+                <div class="form-group">
+    <label for="mobile_number">Mobile Number</label>
+    <input type="tel" id="mobile_number" name="mobile_number" placeholder="Enter mobile number">
+</div>
 
-            <!-- New input field for testing -->
 <div class="form-group">
-    <label for="department">Department</label>
-    <input type="text" id="department" name="department" placeholder="Department">
+    <label for="experience_level">Experience Level</label>
+    <input type="range" id="experience_level" name="experience_level" min="0" max="10" step="1">
 </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>
+				<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>
 
-        <input type="checkbox" id="edit-access" name="edit_access">
-        <label class="checkbox" for="edit-access">Edit</label>
+				<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="approve-access" name="approve_access">
-        <label class="checkbox" for="approve-access">Approve</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>
+
+		<div class="form-group">
+			<label for="password-expire-at">Password Expire At</label>
+			<input type="datetime-local" id="password-expire-at" name="password_expire_at" value="2018-06-12T19:30">
+		</div>
+
+        <div class="form-group">
+    <label>Account Status</label>
+    <div class="radio-group">
+        <input type="radio" id="active" name="account_status" value="active">
+        <label class="radio" for="active">Active</label>
+
+        <input type="radio" id="inactive" name="account_status" value="inactive">
+        <label class="radio" for="inactive">Inactive</label>
     </div>
 </div>
-            
 
-            <!-- Submit Button -->
-            <div class="form-group submit-button">
-                <button type="submit">Add User</button>
-            </div>
-        </form>
-    </div>
 
-</body>
+				<div class="form-group submit-button">
+					<button type="submit">Add User</button>
+				</div>
+			</form>
+		</div>
+
+	</body>
 </html>
diff --git a/test/html/login.html b/test/html/login.html
index 8954aec..40bf76f 100644
--- a/test/html/login.html
+++ b/test/html/login.html
@@ -3,13 +3,13 @@
 <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/login.css">
+    <link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/login.css">
     <title>Login Page</title>
 </head>
 <body>
 
     <div class="left-container">
-        <img src="/home/lcm/Works/ldapmanager/test/images/logo2.png" alt="Company Logo" class="logo">
+        <img src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/images/logo2.png" alt="Company Logo" class="logo">
         <h1>LDAP Manager</h1>
         <p>User management system</p>
     </div>
diff --git a/test/scripts/csswatch.sh b/test/scripts/csswatch.sh
index 5646349..11ae793 100644
--- a/test/scripts/csswatch.sh
+++ b/test/scripts/csswatch.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
-idir="/home/lcm/Works/ldapmanager/test/scss"
-odir="/home/lcm/Works/ldapmanager/test/css"
+idir="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/scss"
+odir="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css"
 inotifywait -e modify -m -r $idir | while read events; do
     sass $idir/:$odir/
 done;
\ No newline at end of file
diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss
index 0741d12..a172453 100644
--- a/test/scss/_colors.scss
+++ b/test/scss/_colors.scss
@@ -30,4 +30,21 @@ $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
+$user-form-checkbox-button-color: #007b8a; 
+$user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9); 
+$user-form-checkbox-button-active-color: #009299; 
+$user-form-checkbox-button-text-color: #007b8a; 
+$user-form-checkbox-button-hover-text-color: #007b8a; 
+$user-form-checkbox-button-active-text-color: #ffffff; 
+$user-form-checkbox-button-border-color: rgba(220, 220, 220, 0.8); 
+$user-form-checkbox-button-hover-border-color: #007b8a; 
+$user-form-checkbox-button-active-border-color: rgba(0, 170, 179, 0.8); 
+$user-form-radio-button-color: #007b8a; 
+$user-form-radio-button-hover-color: rgba(232, 232, 232, 0.9); 
+$user-form-radio-button-active-color: #009299; 
+$user-form-radio-button-text-color: #007b8a; 
+$user-form-radio-button-hover-text-color: #007b8a; 
+$user-form-radio-button-active-text-color: #ffffff; 
+$user-form-radio-button-border-color: rgba(220, 220, 220, 0.8); 
+$user-form-radio-button-hover-border-color: #007b8a; 
+$user-form-radio-button-active-border-color: rgba(0, 170, 179, 0.8); 
diff --git a/test/scss/_common.scss b/test/scss/_common.scss
index ca527a1..57f388d 100644
--- a/test/scss/_common.scss
+++ b/test/scss/_common.scss
@@ -8,4 +8,4 @@
 // Hide the title
 title {
     display: none;
-  }
\ No newline at end of file
+}
diff --git a/test/scss/adduser.scss b/test/scss/adduser.scss
index 3e938d6..b442b54 100644
--- a/test/scss/adduser.scss
+++ b/test/scss/adduser.scss
@@ -3,132 +3,260 @@
 
 // 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
+    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;
+    // 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 header
+        h2 {
+            color: $add-user-form-title-color; // Form title color
+            font-size: 28px;
+            margin-bottom: 20px;
+            text-align: left; 
+            display: block;
+        }
+
+        // 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
+
+                // 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"],
+                input[type="number"],
+                input[type="datetime-local"], 
+                input[type="tel"],
+                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 {
+                label {
+                    display: block;
+                    color: $add-user-form-title-color;
+                    font-size: 16px;
+                    margin-bottom: 5px;
+                }
+
+                .checkbox-group {
+                    display: flex;
+                    gap: 10px;
+
+                    // Hide the checkboxes
+                    input[type="checkbox"] {
+                        display: none;
+                    }
+
+                    // Style the label as a button to match input fields
+                    label.checkbox {
+                        cursor: pointer;
+                        padding: 12px; // Match the padding with the input fields
+                        border: 1px solid $user-form-checkbox-button-border-color; // Use the same border style
+                        border-radius: 6px; // Match the border radius with other inputs
+                        background-color: $add-user-input-background; // Use the same background color
+                        font-size: 16px; // Font size consistency
+                        text-align: center;
+                        width: 100%; // Make the label full-width
+                        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+                        user-select: none;
+
+                        // Change background when active or focused
+                        &:hover,
+                        &:focus {
+                            background-color: $user-form-checkbox-button-hover-color;
+                            border-color: $user-form-checkbox-button-hover-border-color; // Use focus border color
+                        }
+                    }
+
+                    // Change styles when the checkbox is checked
+                    input[type="checkbox"]:checked + label.checkbox {
+                        background-color: $user-form-checkbox-button-active-color;
+                        color: $user-form-checkbox-button-active-text-color;
+                        border-color: $user-form-checkbox-button-active-border-color;
+                    }
+                }
+            }
+
+            // 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
+            }
+
+            .radio-group {
+                display: flex;
+                gap: 10px;
+
+                // Hide the radio buttons
+                input[type="radio"] {
+                    display: none;
+                }
+
+                // Style the label as a button to match the checkboxes
+                label.radio {
+                    cursor: pointer;
+                    padding: 12px; // Match the padding with the other styled elements
+                    border: 1px solid $add-user-input-border-color;
+                    border-radius: 6px;
+                    background-color: $add-user-input-background;
+                    font-size: 16px;
+                    text-align: center;
+                    width: 100%; // Make the label full-width
+                    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+                    user-select: none;
+
+                    // Change background when active or focused
+                    &:hover,
+                    &:focus {
+                        background-color: $user-form-radio-button-hover-color;
+                        border-color: $user-form-radio-button-hover-border-color;
+                    }
+                }
+
+                // Change styles when the radio button is checked
+                input[type="radio"]:checked + label.radio {
+                    background-color: $user-form-radio-button-active-color;
+                    color: $user-form-radio-button-active-text-color;
+                    border-color: $user-form-radio-button-active-border-color;
+                }
+            }
+
+            // Style the range input to match the other form inputs
+            input[type="range"] {
+                width: 100%; // Full width of the form group
+                height: 45px; // Match the height of the other input fields
+                -webkit-appearance: none; // Remove default styling
+                appearance: none;
+                border-radius: 6px; // Rounded corners, matching other inputs
+                background-color: $add-user-input-background; // Same background color as other inputs
+                border: 1px solid $add-user-input-border-color; // Input field border color
+                cursor: pointer; // Change cursor on hover
+                padding: 0; // Remove any default padding
+                box-sizing: border-box; // Ensure padding is included in total width/height
+
+                // Style the filled portion of the track
+                &::-webkit-slider-runnable-track {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 6px; // Rounded corners
+                    background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value)); // Gradient to indicate value
+                }
+
+                &::-moz-range-track {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 6px;
+                    background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value));
+                }
+
+                // Style the thumb
+                &::-webkit-slider-thumb {
+                    -webkit-appearance: none; // Remove default appearance
+                    appearance: none;
+                    width: 45px; // Thumb size
+                    height: 45px;
+                    border-radius: 50%; // Make the thumb round
+                    background-color: $add-user-button-color; // Thumb color
+                    border: 2px solid $add-user-input-border-color; // Thumb border
+                    cursor: pointer;
+                    //margin-top: -8px; // Center the thumb vertically
+                    margin: 0;
+                    padding: 0;
+                }
+
+                &::-moz-range-thumb {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 50%;
+                    background-color: $add-user-button-color;
+                    border: 2px solid $add-user-input-border-color;
+                    cursor: pointer;
+                    margin: 0;
+                    padding: 0;
+                }
+
+                &:focus {
+                    outline: none; // Remove default focus outline
+                    border-color: $add-user-input-focus-border-color; // Change border color on focus
+                }
+            }
+
+            // 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: 40%;
+                    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
+                    }
+                }
+            }
+        }
     }
-
-    // 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 ff89187..cba41f2 100644
--- a/test/scss/login.scss
+++ b/test/scss/login.scss
@@ -2,113 +2,113 @@
 @use "colors" as *; // Color scheme
 
 body {
-  // Page background
-  font-family: 'Arial', sans-serif;
-  background: $login-page-background-color;
-  display: flex;
-  align-items: center;
-  height: 100vh;
-  padding-right: 50px; 
-
-  // The left side, with the logo
-  .left-container {
-    flex: 1; // Take available space on the left
-    padding-left: 50px; // Space from the left edge
-    text-align: left; // Align text to the left
+    // Page background
+    font-family: 'Arial', sans-serif;
+    background: $login-page-background-color;
     display: flex;
-    flex-direction: column; // Stack elements vertically
-    justify-content: center; // Center elements vertically
+    align-items: center;
+    height: 100vh;
+    padding-right: 50px; 
 
-    // App or organization logo
-    .logo {
-      height: 190px; // Set logo height
-      max-width: 100%; // Ensure the logo doesn't exceed the container's width
-      width: auto; // Maintain aspect ratio
-      margin-bottom: 20px; // Space below the logo, above the title
-      align-self: flex-start; // Align logo to the start (left) of the container
-      //box-shadow: -3px 3px 15px 3px $login-page-logo-shadow-color;
-    }
+    // The left side, with the logo
+    .left-container {
+        flex: 1; // Take available space on the left
+        padding-left: 50px; // Space from the left edge
+        text-align: left; // Align text to the left
+        display: flex;
+        flex-direction: column; // Stack elements vertically
+        justify-content: center; // Center elements vertically
 
-    // Application name
-    h1 {
-      font-size: 36px; 
-      color: $login-page-appname-color;
-      margin-bottom: 10px; // Space below the heading
-    }
-
-    // App description
-    p {
-      font-size: 18px; 
-      color: $login-page-description-color; 
-    }
-  }
-
-  // The login form container
-  .login-container {
-    background-color: $login-form-background;
-    padding: 40px;  // Spaces
-    border-radius: 12px;  // Round corners
-    box-shadow: -3px 3px 15px 3px $login-form-shadow-color;
-    width: 350px;
-    text-align: center;
-
-    // The heading ("Login")
-    h2 {
-      display: block;
-      margin-bottom: 20px; // Add space below the heading
-      color: $login-form-title-color; 
-      font-size: 26px;
-    }
-
-    form {
-      display: flex;
-      flex-direction: column;
-      align-items: center; // Center the form elements
-
-      // The input fields
-      input[type="text"],
-      input[type="password"] {
-        width: 100%; // Make the inputs full width of the form
-        padding: 12px;  // Spaces
-        margin-bottom: 15px;
-        border: 1px solid $login-form-input-border-color; 
-        border-radius: 6px; // Round corners
-        font-size: 16px;
-        background-color: $login-form-input-background; 
-        transition: border-color 0.3s, background-color 0.3s;
-
-        &:hover {
-            border-color: $login-form-input-hover-border-color;
-        }
-        &:focus {
-          border-color: $login-form-input-focus-border-color; 
-          background-color: $login-form-input-focused-background;
-          outline: none;
-        }
-      }
-
-      button {
-        width: 100%; // Full width of the form
-        padding: 12px;  // Spaces
-        background-color: $login-button-color; 
-        color: $login-button-text-color;
-        border: none;
-        border-radius: 6px; // Round corners
-        font-size: 18px;
-        font-weight: bold;
-        cursor: pointer;
-        transition: background-color 0.3s, transform 0.3s;
-        box-shadow: 0 4px 10px $login-button-shadow; 
-
-        &:hover {
-          background-color: $login-button-hover-color; 
+        // App or organization logo
+        .logo {
+            height: 190px; // Set logo height
+            max-width: 100%; // Ensure the logo doesn't exceed the container's width
+            width: auto; // Maintain aspect ratio
+            margin-bottom: 20px; // Space below the logo, above the title
+            align-self: flex-start; // Align logo to the start (left) of the container
+            //box-shadow: -3px 3px 15px 3px $login-page-logo-shadow-color;
         }
 
-        &:active {
-          transform: translateY(0);
-          box-shadow: 0 2px 6px $login-button-active-shadow;
+        // Application name
+        h1 {
+            font-size: 36px; 
+            color: $login-page-appname-color;
+            margin-bottom: 10px; // Space below the heading
+        }
+
+        // App description
+        p {
+            font-size: 18px; 
+            color: $login-page-description-color; 
+        }
+    }
+
+    // The login form container
+    .login-container {
+        background-color: $login-form-background;
+        padding: 40px;  // Spaces
+        border-radius: 12px;  // Round corners
+        box-shadow: -3px 3px 15px 3px $login-form-shadow-color;
+        width: 350px;
+        text-align: center;
+
+        // The heading ("Login")
+        h2 {
+            display: block;
+            margin-bottom: 20px; // Add space below the heading
+            color: $login-form-title-color; 
+            font-size: 26px;
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            align-items: center; // Center the form elements
+
+            // The input fields
+            input[type="text"],
+            input[type="password"] {
+                width: 100%; // Make the inputs full width of the form
+                padding: 12px;  // Spaces
+                margin-bottom: 15px;
+                border: 1px solid $login-form-input-border-color; 
+                border-radius: 6px; // Round corners
+                font-size: 16px;
+                background-color: $login-form-input-background; 
+                transition: border-color 0.3s, background-color 0.3s;
+
+                &:hover {
+                    border-color: $login-form-input-hover-border-color;
+                }
+                &:focus {
+                    border-color: $login-form-input-focus-border-color; 
+                    background-color: $login-form-input-focused-background;
+                    outline: none;
+                }
+            }
+
+            button {
+                width: 100%; // Full width of the form
+                padding: 12px;  // Spaces
+                background-color: $login-button-color; 
+                color: $login-button-text-color;
+                border: none;
+                border-radius: 6px; // Round corners
+                font-size: 18px;
+                font-weight: bold;
+                cursor: pointer;
+                transition: background-color 0.3s, transform 0.3s;
+                box-shadow: 0 4px 10px $login-button-shadow; 
+
+                &:hover {
+                    background-color: $login-button-hover-color; 
+                }
+
+                &:active {
+                    transform: translateY(0);
+                    box-shadow: 0 2px 6px $login-button-active-shadow;
+                }
+            }
         }
-      }
     }
-  }
 }