diff --git a/client/Accounts/UserMgmt/userInfoModal.html b/client/Accounts/UserMgmt/userInfoModal.html
index 0ef88a5..8d8e441 100644
--- a/client/Accounts/UserMgmt/userInfoModal.html
+++ b/client/Accounts/UserMgmt/userInfoModal.html
@@ -1,25 +1,24 @@
 <template name="userInfoModal">
-    <div id="userInfoModal" class="modal">
+    <div id="userInfoModal" class="modal modal-fixed-footer">
         <div class="modal-content">
-            <div class="row">
-                <div class="col s12 m12 12">
-                    <h4>Password Reset</h4>
-                </div>
-                <div class="row">
-                    <div class="col s12 m6 l6 input-field">
-                        <input type="password" class="newPass" id="newPass" />
-                        <label for="newPass">Enter New Password</label>
-                    </div>
-                    <div class="col s12 m6 l6 input-field">
-                        <input type="password" class="newPassConf" style="{{#if $eq passMatch false}}background: red;{{/if}}" id="newPassConf" />
-                        <label for="newPassConf">Enter New Password</label>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <a href="#" id="closePass" class="modal-close waves-effect waves-orange btn-flat white-text">Cancel</a>
-                <a href="#" id="chPass" class="waves-effect waves-green btn-flat white-text">change Password</a>
+            <div>
+                <h4>Password Reset</h4>
             </div>
+            <form class="row" style="gap: 1em;">
+                <div class="col s12 m6 l6 input-field outlined">
+                    <input type="password" class="newPass" id="newPass" />
+                    <label for="newPass">Enter New Password</label>
+                </div>
+                <div class="col s12 m6 l6 input-field outlined">
+                    <input type="password" class="newPassConf {{#if $eq passMatch false}}red lighten-3{{/if}}" id="newPassConf" />
+                    <label for="newPassConf">Enter New Password</label>
+                    {{#if $eq passMatch false}}<p class="red-text">Passwords do not match!</p>{{/if}}
+                </div>
+            </form>
+        </div>
+        <div class="modal-footer">
+            <a class="modal-close btn waves-effect waves-light filled orange white-text">Cancel</a>
+            <a id="chPass" class="btn waves-effect waves-light filled green white-text modal-close">Change Password</a>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/client/Accounts/UserMgmt/userInfoModal.js b/client/Accounts/UserMgmt/userInfoModal.js
index 5fac19d..9505e68 100644
--- a/client/Accounts/UserMgmt/userInfoModal.js
+++ b/client/Accounts/UserMgmt/userInfoModal.js
@@ -1,3 +1,5 @@
+import { M } from '../../lib/assets/materialize.js';
+
 Template.userInfoModal.onCreated(function() {
 
 });
@@ -5,7 +7,8 @@ Template.userInfoModal.onCreated(function() {
 Template.userInfoModal.onRendered(function() {
     Session.set("passMatch", true);
     Session.set("passErr", false);
-    $('.modal').modal();
+    var elems = document.querySelectorAll('.modal');
+    var instances = M.Modal.init(elems, {});
 });
 
 Template.userInfoModal.helpers({
diff --git a/client/Accounts/UserMgmt/userMgmt.html b/client/Accounts/UserMgmt/userMgmt.html
index 9cd438a..83314de 100644
--- a/client/Accounts/UserMgmt/userMgmt.html
+++ b/client/Accounts/UserMgmt/userMgmt.html
@@ -20,8 +20,8 @@
                                 <td>{{userRole}}</td>
                                 <td>
                                     <div class="input-field">
-                                        <i class="material-icons modal-trigger clickable deleteUser">delete</i>
-                                        <i class="material-icons clickable editUser">edit</i>
+                                        <i class="material-icons modal-trigger clickable deleteUser" data-target="modalDelete">delete</i>
+                                        <i class="material-icons clickable editUser modal-trigger" data-target="userInfoModal">edit</i>
                                     </div>
                                 </td>
                             </tr>
diff --git a/client/Accounts/UserMgmt/userMgmt.js b/client/Accounts/UserMgmt/userMgmt.js
index 3052211..95cc9ae 100644
--- a/client/Accounts/UserMgmt/userMgmt.js
+++ b/client/Accounts/UserMgmt/userMgmt.js
@@ -1,12 +1,15 @@
-
+import { M } from '../../lib/assets/materialize.js';
 
 Template.userMgmt.onCreated(function() {
     this.subscribe("userList");
 });
 
 Template.userMgmt.onRendered(function() {
-    $('select').formSelect();
-    $('.modal').modal();
+    var elems = document.querySelectorAll('select');
+    var instances = M.FormSelect.init(elems, {});
+
+    var elemm = document.querySelectorAll('.modal');
+    var instancem = M.Modal.init(elemm, {});;
 });
 
 Template.userMgmt.helpers({
@@ -31,7 +34,6 @@ Template.userMgmt.events({
         let userId = this._id;
         // take action
         Session.set("usersId", userId);
-        $("#userInfoModal").modal('open');
     },
     "click .deleteUser" (event) {
         event.preventDefault();
@@ -43,6 +45,5 @@ Template.userMgmt.events({
         Session.set("item", "User");
         Session.set("view", "Users");
         Session.set("method", "delete.userFromSys");
-        $('#modalDelete').modal('open');
     }
 });
\ No newline at end of file
diff --git a/client/ListItems/listItemsForm.html b/client/ListItems/listItemsForm.html
index 24d7eb8..15220e0 100644
--- a/client/ListItems/listItemsForm.html
+++ b/client/ListItems/listItemsForm.html
@@ -40,7 +40,7 @@
       <label for="findListItems">Item...</label>
     </div>
     <div class="col s4 m3 l2">
-      <a class="waves-effect waves-light btn saveListItem green right">Add</a>
+      <a class="waves-effect waves-light btn saveListItem green white-text right">Add</a>
     </div>
   </div>
   {{/if}}