diff --git a/ui/web/static/css/styles.css b/ui/web/static/css/styles.css
index ff7a6bb7b..013adeeef 100644
--- a/ui/web/static/css/styles.css
+++ b/ui/web/static/css/styles.css
@@ -332,6 +332,7 @@ body .body-button:hover {
   background: transparent;
   border: 0;
   outline: 0;
+  margin-top: 10px;
 }
 
 .login-card .logo {
@@ -540,7 +541,7 @@ button.edit-btn {
   border-radius: var(--border-radius);
   color: #fff;
   font-size: 1rem;
-  border: 1px solid var(--main-color);
+  border: 10px solid var(--main-color);
 }
 
 .domains-table .body-button:hover {
@@ -747,3 +748,31 @@ button.edit-btn {
   margin-right: 5px;
   cursor: pointer;
 }
+
+.custom-select-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.custom-select-wrapper:after {
+  content: "▼";
+  position: absolute;
+  top: 7.5px;
+  right: 15px;
+  pointer-events: none;
+  color: #333;
+}
+
+.custom-select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  padding-right: 30px;
+}
+
+.group-title {
+  color: var(--main-color);
+}
diff --git a/ui/web/templates/bootstrap.html b/ui/web/templates/bootstrap.html
index 7a3161c65..fc099a27d 100644
--- a/ui/web/templates/bootstrap.html
+++ b/ui/web/templates/bootstrap.html
@@ -231,7 +231,7 @@ <h5 class="modal-title" id="editChannelsModalLabel">Edit Channels</h5>
                         size="5"
                         multiple
                       >
-                        <option disabled>select a channel</option>
+                        <option disabled>Select a Channel</option>
                       </select>
                     </div>
                   </div>
diff --git a/ui/web/templates/bootstraps.html b/ui/web/templates/bootstraps.html
index 5718a8605..9fef78ed7 100644
--- a/ui/web/templates/bootstraps.html
+++ b/ui/web/templates/bootstraps.html
@@ -113,7 +113,7 @@ <h1 class="modal-title" id="addBootstrapModalLabel">
                                 size="5"
                                 multiple
                               >
-                                <option disabled>select a channel</option>
+                                <option disabled>Select a Channel</option>
                               </select>
                             </div>
                             <div class="row mb-3">
diff --git a/ui/web/templates/channelgroups.html b/ui/web/templates/channelgroups.html
index e239131cb..50deeb2df 100644
--- a/ui/web/templates/channelgroups.html
+++ b/ui/web/templates/channelgroups.html
@@ -70,7 +70,7 @@ <h1 class="modal-title" id="addGroupModalLabel">Add Group</h1>
                                   size="5"
                                   required
                                 >
-                                  <option disabled>select a group</option>
+                                  <option disabled>Select a Group</option>
                                 </select>
                               </div>
                             </div>
diff --git a/ui/web/templates/channels.html b/ui/web/templates/channels.html
index 273b1e547..834c52710 100644
--- a/ui/web/templates/channels.html
+++ b/ui/web/templates/channels.html
@@ -64,7 +64,7 @@ <h1 class="modal-title" id="addChannelModalLabel">Add Channel</h1>
                                 class="itemsFilter"
                                 name="parentFilter"
                                 id="parentFilter"
-                                placeholder="Filter by parent name"
+                                placeholder="Filter by Parent Name"
                               />
                               <select
                                 class="form-select"
@@ -72,7 +72,7 @@ <h1 class="modal-title" id="addChannelModalLabel">Add Channel</h1>
                                 id="infiniteScroll"
                                 size="5"
                               >
-                                <option disabled>select a channel</option>
+                                <option disabled>Select a Channel</option>
                               </select>
                             </div>
                             <div class="mb-3">
diff --git a/ui/web/templates/channelthings.html b/ui/web/templates/channelthings.html
index 899f052eb..d243761e8 100644
--- a/ui/web/templates/channelthings.html
+++ b/ui/web/templates/channelthings.html
@@ -70,7 +70,7 @@ <h1 class="modal-title" id="addThingModalLabel">Add Thing</h1>
                                   size="5"
                                   required
                                 >
-                                  <option disabled>select a thing</option>
+                                  <option disabled>Select a Thing</option>
                                 </select>
                               </div>
                             </div>
diff --git a/ui/web/templates/channelusers.html b/ui/web/templates/channelusers.html
index 2dea9c22a..35c94c1d7 100644
--- a/ui/web/templates/channelusers.html
+++ b/ui/web/templates/channelusers.html
@@ -22,7 +22,9 @@
                     {{ $shareButton = true }}
                   {{ end }}
                   <div class="d-flex flex-row justify-content-between">
-                    <h4>Channel Users</h4>
+                    <div class="group-title">
+                      <h4>Channel Users</h4>
+                    </div>
                     <button
                       role="button"
                       class="btn body-button"
@@ -62,6 +64,7 @@ <h1 class="modal-title" id="addUserModalLabel">Add User</h1>
                                   name="userFilter"
                                   id="userFilter"
                                   placeholder="Filter by User ID"
+                                  class="ms-5"
                                 />
                                 <select
                                   class="form-select"
@@ -70,7 +73,7 @@ <h1 class="modal-title" id="addUserModalLabel">Add User</h1>
                                   size="5"
                                   required
                                 >
-                                  <option disabled>select a User</option>
+                                  <option disabled>Select a User</option>
                                 </select>
                               </div>
                               <div class="mb-3">
diff --git a/ui/web/templates/group.html b/ui/web/templates/group.html
index f1fa42e8f..71e9c95af 100644
--- a/ui/web/templates/group.html
+++ b/ui/web/templates/group.html
@@ -107,7 +107,7 @@
                           <button
                             type="button"
                             class="edit-btn"
-                            data-bs-toggle="modal"
+                            data-bs-toggle=""
                             data-bs-target="#editMetadataModal"
                             {{ if not $editButton }}disabled{{ end }}
                           >
diff --git a/ui/web/templates/groups.html b/ui/web/templates/groups.html
index 6b743aef5..27c2186d8 100644
--- a/ui/web/templates/groups.html
+++ b/ui/web/templates/groups.html
@@ -65,6 +65,7 @@ <h1 class="modal-title" id="addGroupModalLabel">Add Group</h1>
                                 name="description"
                                 id="description"
                                 placeholder="Group Description"
+                                class="ms-5"
                               />
                             </div>
                             <div class="mb-3">
@@ -74,7 +75,7 @@ <h1 class="modal-title" id="addGroupModalLabel">Add Group</h1>
                                 class="itemsFilter"
                                 name="parentFilter"
                                 id="parentFilter"
-                                placeholder="Filter by parent name"
+                                placeholder="Filter by Parent Name"
                               />
                               <select
                                 class="form-select"
@@ -82,7 +83,7 @@ <h1 class="modal-title" id="addGroupModalLabel">Add Group</h1>
                                 id="infiniteScroll"
                                 size="5"
                               >
-                                <option disabled>select a group</option>
+                                <option disabled>Select a Group</option>
                               </select>
                             </div>
                             <div class="mb-3">
diff --git a/ui/web/templates/groupusers.html b/ui/web/templates/groupusers.html
index 83e19ea2a..bbdc3251b 100644
--- a/ui/web/templates/groupusers.html
+++ b/ui/web/templates/groupusers.html
@@ -22,7 +22,9 @@
                     {{ $shareButton = true }}
                   {{ end }}
                   <div class="d-flex flex-row justify-content-between">
-                    <h4>Group Users</h4>
+                    <div class="group-title">
+                      <h4>Group Users</h4>
+                    </div>
                     <button
                       role="button"
                       class="btn body-button"
@@ -56,21 +58,23 @@ <h1 class="modal-title fs-5" id="addUserModalLabel">Add User</h1>
                           >
                             <div class="modal-body">
                               <div class="mb-3">
-                                <label for="infiniteScroll" class="form-label">User ID</label>
+                                <label for="infiniteScroll" class="form-label">User Name</label>
                                 <input
                                   type="text"
                                   name="userFilter"
                                   id="userFilter"
-                                  placeholder="Filter by User ID"
+                                  placeholder="Filter by User Name"
+                                  class="ms-5"
                                 />
                                 <select
                                   class="form-select"
                                   name="userID"
                                   id="infiniteScroll"
                                   size="5"
+                                  class="ms-5"
                                   required
                                 >
-                                  <option disabled>select a User</option>
+                                  <option disabled>Select a User</option>
                                 </select>
                               </div>
                               <div class="mb-3">
diff --git a/ui/web/templates/invitations.html b/ui/web/templates/invitations.html
index e8159b4ed..094ff555c 100644
--- a/ui/web/templates/invitations.html
+++ b/ui/web/templates/invitations.html
@@ -128,16 +128,17 @@ <h1 class="modal-title" id="invitationModalLabel">Invite User</h1>
               </div>
               <form id="invitation-form">
                 <div class="modal-body">
-                  <div class="mb-3">
+                  <div class="mb-3" id="users-select">
                     <label for="users-scroll" class="form-label">User</label>
                     <input
                       type="text"
                       name="userFilter"
                       id="userFilter"
                       placeholder="Filter by User Name"
+                      class="ms-5"
                     />
                     <select class="form-select" name="userID" id="users-scroll" size="5" required>
-                      <option disabled>select a User</option>
+                      <option disabled>Select a User</option>
                     </select>
                   </div>
                   <div class="mb-3" id="domains-select">
@@ -147,6 +148,7 @@ <h1 class="modal-title" id="invitationModalLabel">Invite User</h1>
                       name="domainFilter"
                       id="domainFilter"
                       placeholder="Filter by Domain"
+                      class="ms-5"
                     />
                     <select
                       class="form-select"
@@ -155,25 +157,27 @@ <h1 class="modal-title" id="invitationModalLabel">Invite User</h1>
                       size="5"
                       required
                     >
-                      <option disabled>select a domain</option>
+                      <option disabled>Select a Domain</option>
                     </select>
                   </div>
                   <div class="mb-3">
                     <label for="relation" class="form-label">Relation</label>
-                    <select
-                      class="form-control"
-                      name="relation"
-                      id="relation"
-                      aria-describedby="relationHelp"
-                      required
-                    >
-                      <option value="" disabled>Select relation</option>
-                      {{ range $i, $r := .Relations }}
-                        <option value="{{ $r }}">
-                          {{ $r }}
-                        </option>
-                      {{ end }}
-                    </select>
+                    <div class="custom-select-wrapper">
+                      <select
+                        class="form-control custom-select"
+                        name="relation"
+                        id="relation"
+                        aria-describedby="relationHelp"
+                        required
+                      >
+                        <option value="" disabled selected>Select relation</option>
+                        {{ range $i, $r := .Relations }}
+                          <option value="{{ $r }}">
+                            {{ $r }}
+                          </option>
+                        {{ end }}
+                      </select>
+                    </div>
                     <div id="relationHelp" class="form-text">Select Relation.</div>
                   </div>
                 </div>
diff --git a/ui/web/templates/login.html b/ui/web/templates/login.html
index eb2aa669a..bb260fcd3 100644
--- a/ui/web/templates/login.html
+++ b/ui/web/templates/login.html
@@ -30,9 +30,9 @@ <h2>Login</h2>
                 <div class="col-md-12">
                   <div class="row mb-3">
                     <div class="col-md-12 input-field email-field">
-                      <i class="fas fa-solid fa-envelope"></i>
+                      <i class="fas fa-solid fa-envelope me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="email"
                         name="email"
                         id="email"
@@ -43,14 +43,15 @@ <h2>Login</h2>
                   </div>
                   <div class="row mb-3">
                     <div class="col-md-12 input-field password-field">
-                      <i class="fas fa-solid fa-lock"></i>
+                      <i class="fas fa-solid fa-lock me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="password"
                         name="password"
                         id="password"
                         placeholder="Password"
                       />
+                      <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                     </div>
                     <div id="passwordError" class="text-danger"></div>
                   </div>
@@ -153,7 +154,8 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
         });
       </script>
       <script>
-        const passwordField = document.querySelector(".password-field");
+        const passwordField = document.getElementById("password");
+        const togglePassword = document.querySelector(".password-toggle-icon i");
         const emailField = document.querySelector(".email-field");
         const loginError = document.getElementById("loginError");
         const pathPrefix = "{{ pathPrefix }}";
@@ -176,11 +178,26 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
                   window.location.href = `${pathPrefix}/tokens/secure`;
                   break;
               }
+
             })
+
             .catch((error) => {
               console.error("error submitting login form: ", error);
             });
         }
+         // Code for toggling the visibility of the password
+        togglePassword.addEventListener("click", function () {
+         if (passwordField.type === "password")  {
+             passwordField.type = "text";
+             togglePassword.classList.remove("fa-eye");
+             togglePassword.classList.add("fa-eye-slash");
+             } else {
+             passwordField.type = "password";
+             togglePassword.classList.remove("fa-eye-slash");
+             togglePassword.classList.add("fa-eye");
+            }
+        })
+
 
         function showError(errorMessage) {
           loginError.innerHTML = errorMessage;
diff --git a/ui/web/templates/members.html b/ui/web/templates/members.html
index 7e07ef37e..5ea517420 100644
--- a/ui/web/templates/members.html
+++ b/ui/web/templates/members.html
@@ -65,7 +65,7 @@ <h1 class="modal-title" id="addMemberModalLabel">Assign User</h1>
                               size="5"
                               required
                             >
-                              <option disabled>select a User</option>
+                              <option disabled>Select a User</option>
                             </select>
                           </div>
                           <div class="mb-3">
diff --git a/ui/web/templates/registration.html b/ui/web/templates/registration.html
index b108f7a2b..5f184f078 100644
--- a/ui/web/templates/registration.html
+++ b/ui/web/templates/registration.html
@@ -43,9 +43,9 @@ <h2>Register</h2>
                   </div>
                   <div class="row mb-3">
                     <div class="col-md-12 input-field email-field">
-                      <i class="fas fa-solid fa-envelope"></i>
+                      <i class="fas fa-solid fa-envelope me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="email"
                         name="email"
                         id="email"
@@ -56,14 +56,15 @@ <h2>Register</h2>
                   </div>
                   <div class="row mb-3">
                     <div class="col-md-12 input-field password-field">
-                      <i class="fas fa-solid fa-lock"></i>
+                      <i class="fas fa-solid fa-lock me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="password"
                         name="password"
                         id="password"
                         placeholder="Password"
                       />
+                      <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                     </div>
                     <div id="passwordError" class="text-danger"></div>
                   </div>
@@ -126,13 +127,26 @@ <h2>Register</h2>
       </script>
       <script>
         const nameField = document.querySelector(".name-field");
-        const passwordField = document.querySelector(".password-field");
+        const passwordField = document.getElementById("password");
+        const togglePassword = document.querySelector(".password-toggle-icon i");
         const emailField = document.querySelector(".email-field");
         const registrationError = document.getElementById("registrationError");
 
         document.getElementById("register-button").addEventListener("click", () => {
           registrationError.innerHTML = "";
         });
+        // Code for toggling the visibility of the password
+        togglePassword.addEventListener("click", function () {
+          if (passwordField.type === "password") {
+            passwordField.type = "text";
+            togglePassword.classList.remove("fa-eye");
+            togglePassword.classList.add("fa-eye-slash");
+          } else {
+            passwordField.type = "password";
+            togglePassword.classList.remove("fa-eye-slash");
+            togglePassword.classList.add("fa-eye");
+          }
+        });
 
         function submitRegistrationForm() {
           event.preventDefault();
diff --git a/ui/web/templates/resetpassword.html b/ui/web/templates/resetpassword.html
index aa3afb06d..5a0ec63c7 100644
--- a/ui/web/templates/resetpassword.html
+++ b/ui/web/templates/resetpassword.html
@@ -30,29 +30,31 @@ <h2>Reset Password</h2>
                 <div class="col-md-12">
                   <div class="row mb-3">
                     <div class="col-md-12 input-field">
-                      <i class="fas fa-solid fa-lock"></i>
+                      <i class="fas fa-solid fa-lock me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="password"
                         name="password"
                         id="password"
                         placeholder="Password"
                         required
                       />
+                      <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                       <div id="passwordError" class="text-danger"></div>
                     </div>
                   </div>
                   <div class="row mb-3">
                     <div class="col-md-12 input-field">
-                      <i class="fas fa-solid fa-lock"></i>
+                      <i class="fas fa-solid fa-lock me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="password"
                         name="confirmPassword"
                         id="confirmPassword"
                         placeholder="confirm Password"
                         required
                       />
+                      <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                       <div id="confirmPasswordError" class="text-danger"></div>
                     </div>
                   </div>
@@ -70,6 +72,9 @@ <h2>Reset Password</h2>
           var password = document.getElementById("password").value;
           var confirmPassword = document.getElementById("confirmPassword").value;
 
+          var passwordError = document.getElementById("passwordError");
+          var confirmPasswordError = document.getElementById("confirmPasswordError");
+
           passwordError.innerHTML = "";
           confirmPasswordError.innerHTML = "";
           var isValid = true;
@@ -84,6 +89,22 @@ <h2>Reset Password</h2>
           }
           return isValid;
         }
+        // Code for toggling the visibility of the password
+        const togglePassword = document.querySelectorAll(".password-toggle-icon i");
+        togglePassword.forEach((icon) => {
+          icon.addEventListener("click", function () {
+            const passwordField = icon.parentElement.previousElementSibling;
+            if (passwordField.type === "password") {
+              passwordField.type = "text";
+              icon.classList.remove("fa-eye");
+              icon.classList.add("fa-eye-slash");
+            } else {
+              passwordField.type = "password";
+              icon.classList.remove("fa-eye-slash");
+              icon.classList.add("fa-eye");
+            }
+          });
+        });
       </script>
     </body>
   </html>
diff --git a/ui/web/templates/thingchannels.html b/ui/web/templates/thingchannels.html
index a3429ed3e..cc5c61803 100644
--- a/ui/web/templates/thingchannels.html
+++ b/ui/web/templates/thingchannels.html
@@ -70,7 +70,7 @@ <h1 class="modal-title" id="addChannelModalLabel">Add Channel</h1>
                                   size="5"
                                   required
                                 >
-                                  <option disabled>select a channel</option>
+                                  <option disabled>Select a Channel</option>
                                 </select>
                               </div>
                             </div>
diff --git a/ui/web/templates/updatepassword.html b/ui/web/templates/updatepassword.html
index 27420c453..04a1bb606 100644
--- a/ui/web/templates/updatepassword.html
+++ b/ui/web/templates/updatepassword.html
@@ -25,29 +25,31 @@ <h2>Update Password</h2>
                   <div class="col-md-12">
                     <div class="row mb-3">
                       <div class="col-md-12 input-field">
-                        <i class="fas fa-solid fa-lock"></i>
+                        <i class="fas fa-solid fa-lock me-2"></i>
                         <input
-                          class="p-3 w-100"
+                          class="p-3 w-100 me-2"
                           type="password"
                           name="oldpass"
                           id="oldpass"
                           placeholder="Old password"
                           required
                         />
+                        <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                         <div id="oldpassError" class="text-danger"></div>
                       </div>
                     </div>
                     <div class="row mb-3">
                       <div class="col-md-12 input-field">
-                        <i class="fas fa-solid fa-lock"></i>
+                        <i class="fas fa-solid fa-lock me-2"></i>
                         <input
-                          class="p-3 w-100"
+                          class="p-3 w-100 me-2"
                           type="password"
                           name="newpass"
                           id="newpass"
                           placeholder="New password"
                           required
                         />
+                        <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                         <div id="newpassError" class="text-danger"></div>
                       </div>
                     </div>
@@ -100,7 +102,22 @@ <h2>Update Password</h2>
               return false;
             });
         }
-
+        // Code for toggling the visibility of the password
+        const togglePassword = document.querySelectorAll(".password-toggle-icon i");
+        togglePassword.forEach((icon) => {
+          icon.addEventListener("click", function () {
+            const passwordField = icon.parentElement.previousElementSibling;
+            if (passwordField.type === "password") {
+              passwordField.type = "text";
+              icon.classList.remove("fa-eye");
+              icon.classList.add("fa-eye-slash");
+            } else {
+              passwordField.type = "password";
+              icon.classList.remove("fa-eye-slash");
+              icon.classList.add("fa-eye");
+            }
+          });
+        });
         function showError(errorMessage) {
           var loginError = document.getElementById("oldpassError");
           loginError.innerHTML = errorMessage;