diff --git a/test/css/search.css b/test/css/search.css
new file mode 100644
index 0000000..49771f0
--- /dev/null
+++ b/test/css/search.css
@@ -0,0 +1,156 @@
+* {
+  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 .search-page {
+  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;
+  margin: 0 auto;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+body .search-page .search-bar {
+  display: flex;
+  gap: 10px;
+  padding: 20px 20px 10px 20px;
+  border-radius: 12px 12px 0 0;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #c4c4c4;
+  height: 75px;
+}
+body .search-page .search-bar input[type=text],
+body .search-page .search-bar select {
+  flex: 1;
+  height: 45px;
+  padding: 10px;
+  background-color: rgba(245, 245, 245, 0.9);
+  border: 1px solid rgba(220, 220, 220, 0.8);
+  border-radius: 6px;
+  font-size: 16px;
+}
+body .search-page .search-bar input[type=text]:hover,
+body .search-page .search-bar select:hover {
+  border-color: #007b8a;
+}
+body .search-page .search-bar input[type=text]:focus,
+body .search-page .search-bar select:focus {
+  border-color: #007b8a;
+}
+body .search-page .search-bar select {
+  max-width: 25%;
+}
+body .search-page .search-bar button[type=submit] {
+  padding: 10px 20px;
+  font-size: 16px;
+  height: 45px;
+  background-color: rgba(245, 245, 245, 0.9);
+  color: #4e4e4e;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+body .search-page .search-bar button[type=submit]:hover {
+  background-color: #007b8a;
+  color: #ffffff;
+  border-color: #007b8a;
+}
+body .search-page .search-bar button[type=submit]:active {
+  background-color: rgba(232, 232, 232, 0.9);
+  color: #007b8a;
+  border-color: #007b8a;
+}
+body .search-page .search-results {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px;
+  min-height: 800px;
+}
+body .search-page .search-results .search-result {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 12px 10px;
+  border-radius: 6px;
+  transition: background-color 0.3s;
+  background-color: #e1e1e1;
+}
+body .search-page .search-results .search-result:hover {
+  background-color: #b9b9b9;
+}
+body .search-page .search-results .search-result .details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+body .search-page .search-results .search-result .details .primary-key {
+  font-size: 16px;
+  margin-bottom: 3px;
+}
+body .search-page .search-results .search-result .details .info-row {
+  display: flex;
+  gap: 10px;
+}
+body .search-page .search-results .search-result .details .info-row * {
+  font-size: 15px;
+  color: #666;
+}
+body .search-page .search-results .search-result .actions {
+  display: flex;
+  gap: 8px;
+  align-self: flex-start;
+  visibility: hidden;
+}
+body .search-page .search-results .search-result .actions button {
+  padding: 6px 12px;
+  font-size: 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+body .search-page .search-results .search-result .actions button.edit {
+  background-color: rgba(245, 245, 245, 0.9);
+  color: #4e4e4e;
+}
+body .search-page .search-results .search-result .actions button.edit:hover {
+  background-color: #3b8084;
+}
+body .search-page .search-results .search-result .actions button.delete {
+  background-color: rgba(245, 245, 245, 0.9);
+  color: #4e4e4e;
+}
+body .search-page .search-results .search-result .actions button.delete:hover {
+  background-color: #c96f6f;
+}
+body .search-page .search-results .search-result .actions button:hover {
+  color: #fff;
+}
+body .search-page .search-results .search-result:hover .actions {
+  visibility: visible;
+}
diff --git a/test/html/adduser.html b/test/html/adduser.html
index d8df096..91f58e3 100644
--- a/test/html/adduser.html
+++ b/test/html/adduser.html
@@ -103,7 +103,7 @@
 					<div class="form-group radio-input">
 						<label>Account Status</label>
 						<div class="radio-group">
-							<input type="radio" id="active" name="account_status" value="active">
+							<input type="radio" id="active" name="account_status" value="active" checked>
 							<label class="radio" for="active">Active</label>
 
 							<input type="radio" id="inactive" name="account_status" value="inactive">
diff --git a/test/html/login.html b/test/html/login.html
index f16308c..f06e5ea 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/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/login.css">
+		<link rel="stylesheet" href="../css/login.css">
 		<title>Login Page</title>
 	</head>
 	<body>
 
 		<div class="left-container">
-			<img src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/images/logo2.png" alt="Company Logo" class="logo">
+			<img src="../images/logo2.png" alt="Company Logo" class="logo">
 			<h1>LDAP Manager</h1>
 			<p>User management system</p>
 		</div>
diff --git a/test/html/search.html b/test/html/search.html
new file mode 100644
index 0000000..211c257
--- /dev/null
+++ b/test/html/search.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Search Results</title>
+    <link rel="stylesheet" href="../css/search.css">
+</head>
+<body>
+    <div class="search-page">
+		<form class="search-bar" action="/search-results" method="GET">
+		  <input type="text" name="query" placeholder="Search...">
+		  <select name="filter">
+			<option value="username">Username</option>
+			<option value="employee-id">Employee ID</option>
+			<option value="name">Name</option>
+			<option value="email">Email</option>
+		  </select>
+		  <button type="submit">Search</button>
+		</form>
+	  
+		<ul class="search-results">
+
+			<li class="search-result">
+                <div class="details">
+                    <span class="primary-key username">realobamna</span>
+                    <div class="info-row">
+                        <span class="employee-id">12345</span>
+                        <span class="full-name">John Doe Obama</span>
+                    </div>
+                </div>
+                <div class="actions">
+                    <button class="edit">Edit</button>
+                    <button class="delete">Delete</button>
+                </div>
+            </li>
+
+            <li class="search-result">
+                <div class="details">
+                    <span class="primary-key username">obama</span>
+                    <div class="info-row">
+                        <span class="employee-id">19845</span>
+                        <span class="full-name">Fake Obama</span>
+                    </div>
+                </div>
+                <div class="actions">
+                    <button class="edit">Edit</button>
+                    <button class="delete">Delete</button>
+                </div>
+            </li>
+			<li class="search-result">
+                <div class="details">
+                    <span class="primary-key username">realobamna</span>
+                    <div class="info-row">
+                        <span class="employee-id">12345</span>
+                        <span class="full-name">John Doe Obama</span>
+                    </div>
+                </div>
+                <div class="actions">
+                    <button class="edit">Edit</button>
+                    <button class="delete">Delete</button>
+                </div>
+            </li>
+
+            <li class="search-result">
+                <div class="details">
+                    <span class="primary-key username">obama</span>
+                    <div class="info-row">
+                        <span class="employee-id">19845</span>
+                        <span class="full-name">Fake Obama</span>
+                    </div>
+                </div>
+                <div class="actions">
+                    <button class="edit">Edit</button>
+                    <button class="delete">Delete</button>
+                </div>
+            </li>
+			<li class="search-result">
+                <div class="details">
+                    <span class="primary-key username">realobamna</span>
+                    <div class="info-row">
+                        <span class="employee-id">12345</span>
+                        <span class="full-name">John Doe Obama</span>
+                    </div>
+                </div>
+                <div class="actions">
+                    <button class="edit">Edit</button>
+                    <button class="delete">Delete</button>
+                </div>
+            </li>
+
+            <li class="search-result">
+                <div class="details">
+                    <span class="primary-key username">obama</span>
+                    <div class="info-row">
+                        <span class="employee-id">19845</span>
+                        <span class="full-name">Fake Obama</span>
+                    </div>
+                </div>
+                <div class="actions">
+                    <button class="edit">Edit</button>
+                    <button class="delete">Delete</button>
+                </div>
+            </li>
+		  <!-- Additional search results go here -->
+
+		</ul>
+	  </div>
+	  
+</body>
+</html>
diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss
index 33ccf0c..b7f541b 100644
--- a/test/scss/_colors.scss
+++ b/test/scss/_colors.scss
@@ -22,7 +22,7 @@ $login-button-shadow: rgba(0, 95, 115, 0.3);
 $login-button-active-shadow: rgba(70, 70, 70, 0.2); 
 $login-button-text-color: #fff; 
 
-// Entry Form Page ////////////////////////////////
+// Entry Form Page //////////////////////////////////
 
 // Page  
 $add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient  
@@ -51,9 +51,9 @@ $add-user-clear-button-text-color: #ffffff;
 
 // Check-box buttons  
 // Unchecked  
-$user-form-checkbox-button-color: #007b8a; 
-$user-form-checkbox-button-text-color: #007b8a; 
-$user-form-checkbox-button-border-color: rgba(220, 220, 220, 0.8); 
+$user-form-checkbox-button-color: $add-user-input-background; 
+$user-form-checkbox-button-text-color: $add-user-form-title-color; 
+$user-form-checkbox-button-border-color: $add-user-input-border-color; 
 // Hover  
 $user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9); 
 $user-form-checkbox-button-hover-text-color: #007b8a; 
@@ -86,3 +86,37 @@ $details-closed-summary-color: #b1b1b1;
 $details-summary-hover-color: #636363;
 $details-open-summary-color: #979797;
 $details-summary-border-color: $add-user-input-border-color;
+
+// Search page //////////////////////////////////////
+
+// Search field
+$search-page-search-field-background: $add-user-input-background; 
+$search-page-search-field-border-color: $add-user-input-border-color; 
+$search-page-search-field-hover-border-color: $add-user-input-focus-border-color; 
+$search-page-search-field-focus-border-color: $add-user-input-focus-border-color; 
+
+// Search button normal  
+$search-page-search-button-color: $user-form-checkbox-button-color; 
+$search-page-search-button-text-color: $user-form-checkbox-button-text-color; 
+$search-page-search-button-border-color: $user-form-checkbox-button-border-color; 
+// Search button hover  
+$search-page-search-button-hover-color: $add-user-button-color; 
+$search-page-search-button-hover-text-color: $add-user-button-text-color; 
+$search-page-search-button-hover-border-color: $user-form-checkbox-button-hover-border-color; 
+// Search button clicked  
+$search-page-search-button-active-color: $user-form-checkbox-button-hover-color; 
+$search-page-search-button-active-text-color: $user-form-checkbox-button-hover-text-color; 
+$search-page-search-button-active-border-color: $user-form-checkbox-button-hover-border-color; 
+
+// Search result normal
+$search-res-item-border-color: #e0e0e0;
+$search-res-item-hover-color: #b9b9b9;
+
+// Search res item edit button
+$search-res-edit-item-button-color: $user-form-checkbox-button-color;
+$search-res-edit-item-button-text-color: $user-form-checkbox-button-text-color;
+$search-res-edit-item-button-hover-color: $user-form-checkbox-button-active-color;
+// Search res item delete button
+$search-res-delete-item-button-color: $user-form-checkbox-button-color;
+$search-res-delete-item-button-text-color: $user-form-checkbox-button-text-color;
+$search-res-delete-item-button-hover-color: #c96f6f;
\ No newline at end of file
diff --git a/test/scss/search.scss b/test/scss/search.scss
new file mode 100644
index 0000000..ef8a61b
--- /dev/null
+++ b/test/scss/search.scss
@@ -0,0 +1,171 @@
+@use "common";  // Reset styles
+@use "colors" as *; // Color scheme 
+@use "vars" as *;
+
+body {
+    font-family: 'Arial', sans-serif;
+    background: $add-user-background-color; 
+    display: flex;
+    justify-content: center; // Center the form horizontally
+    align-items: center; // Center the form vertically
+    height: 100%;
+    padding: 20px; // Some padding for mobile responsiveness
+
+	.search-page {
+        background-color: $add-user-form-background; 
+        padding: 40px;
+        border-radius: 12px; // Rounded corners 
+        box-shadow: 0 8px 15px $add-user-form-shadow-color;
+        width: 100%;
+        max-width: 800px; 
+		margin: 0 auto;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+
+		.search-bar {
+			display: flex;
+			gap: 10px;
+			padding: 20px 20px 10px 20px;
+			border-radius: 12px 12px 0 0; // Rounded corners 
+			justify-content: space-between;
+			align-items: center;
+			background-color: #c4c4c4;
+			height: 75px;
+
+			input[type="text"],
+			select {
+				flex: 1;
+				height: 45px;
+				padding: 10px;
+				background-color: $search-page-search-field-background;
+				border: 1px solid $search-page-search-field-border-color;
+				border-radius: $input-field-border-radius;
+				font-size: 16px;
+
+				&:hover {
+					border-color: $search-page-search-field-hover-border-color;
+				}
+
+				&:focus {
+					border-color: $search-page-search-field-focus-border-color;
+				}
+			}
+
+			select {
+				max-width: 25%;
+			}
+
+			button[type="submit"] {
+				padding: 10px 20px;
+				font-size: 16px;
+				height: 45px;
+				background-color: $search-page-search-button-color;
+				color: $search-page-search-button-text-color;
+				border: none;
+				border-radius: 4px;
+				cursor: pointer;
+
+				&:hover {
+					background-color: $search-page-search-button-hover-color;
+					color: $search-page-search-button-hover-text-color;
+					border-color: $search-page-search-button-hover-border-color;
+				}
+				&:active {
+					background-color: $search-page-search-button-active-color;
+					color: $search-page-search-button-active-text-color;
+					border-color: $search-page-search-button-active-border-color;
+				}
+			}
+		}
+
+		.search-results {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+			padding: 20px;
+			min-height: 800px;
+		
+			.search-result {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
+				padding: 12px 10px;
+				border-radius: $input-field-border-radius;
+				transition: background-color 0.3s;
+				background-color: #e1e1e1;
+		
+				&:hover {
+					background-color: $search-res-item-hover-color;
+				}
+		
+				.details {
+					display: flex;
+					flex-direction: column;
+					gap: 4px;
+		
+					.primary-key {
+						font-size: 16px;
+						margin-bottom: 3px;
+					}
+		
+					.info-row {
+						display: flex;
+						gap: 10px;
+		
+						* {
+							font-size: 15px;
+							//font-weight: 500;
+							color: #666;
+						}
+					}
+				}
+		
+				.actions {
+					display: flex;
+					gap: 8px;
+					align-self: flex-start;
+					visibility: hidden;
+		
+					button {
+						padding: 6px 12px;
+						font-size: 12px;
+						border: none;
+						border-radius: 4px;
+						cursor: pointer;
+		
+						&.edit {
+							background-color: $search-res-edit-item-button-color;
+							color: $search-res-edit-item-button-text-color;
+		
+							&:hover {
+								background-color: $search-res-edit-item-button-hover-color;
+							}
+						}
+		
+						&.delete {
+							background-color: $search-res-delete-item-button-color;
+							color: $search-res-delete-item-button-text-color;
+		
+							&:hover {
+								background-color: $search-res-delete-item-button-hover-color;
+							}
+						}
+
+						&:hover {
+							color: #fff;
+						}
+					}
+				}
+		
+				&:hover .actions {
+					visibility: visible;
+				}
+			}
+		}
+	}
+}