diff --git a/powerdnsadmin/templates/admin_edit_account.html b/powerdnsadmin/templates/admin_edit_account.html
index 62ccf26..10ff01f 100644
--- a/powerdnsadmin/templates/admin_edit_account.html
+++ b/powerdnsadmin/templates/admin_edit_account.html
@@ -14,15 +14,15 @@
       <div class="row mb-2">
         <div class="col-sm-6">
           <h1 class="m-0 text-dark">
-            Account
-            <small>{% if create %}New account{% else %}{{ account.name }}{% endif %}</small>
+            {% if create %}Add Account{% else %}Edit Account{% endif %}
+            <small>{% if create %}Account{% else %}{{ account.name }}{% endif %}</small>
           </h1>
         </div>
         <div class="col-sm-6">
           <ol class="breadcrumb float-sm-right">
             <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Home</a></li>
             <li class="breadcrumb-item"><a href="{{ url_for('admin.manage_account') }}">Accounts</a></li>
-            <li class="breadcrumb-item active">{% if create %}Add{% else %}Edit{% endif %} account</li>
+            <li class="breadcrumb-item active">{% if create %}Add Account{% else %}Edit Account: {{ account.name }}{% endif %}</li>
           </ol>
         </div>
       </div>
@@ -35,9 +35,9 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-4">
-        <div class="card shadow">
-          <div class="card-header with-border">
-            <h3 class="card-title">{% if create %}Add{% else %}Edit{% endif %} account</h3>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">{% if create %}Add{% else %}Edit{% endif %} Account</h3>
           </div>
           <form role="form" method="post" action="{% if create %}{{ url_for('admin.edit_account') }}{% else %}{{ url_for('admin.edit_account', account_name=account.name) }}{% endif %}">
             <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
@@ -46,7 +46,7 @@
               {% if error %}
                 <div class="alert alert-danger alert-dismissible">
                   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-                  <h4><i class="icon fa fa-ban"></i> Error!</h4>
+                  <h4><i class="fa-solid fa-ban"></i> Error!</h4>
                   {{ error }}
                 </div>
                 <span class="help-block">{{ error }}</span>
@@ -55,36 +55,36 @@
                 <label class="control-label" for="accountname">Name</label>
                 <input type="text" class="form-control" placeholder="Account Name (required)"
                   name="accountname" {% if account %}value="{{ account.name }}" {% endif %}
-                  {% if not create %}disabled{% endif %}>
-                <span class="fa fa-cog form-control-feedback"></span>
+                  {% if not create %}disabled{% endif %} required>
+                <span class="form-control-feedback"></span>
                 {% if invalid_accountname %}
-                  <span class="help-block">Cannot be blank and must only contain alphanumeric
+                  <span class="help-block text-danger">Cannot be blank and must only contain alphanumeric
                     characters{% if SETTING.get('account_name_extra_chars') %}, dots, hyphens or underscores{% endif %}.
                   </span>
                 {% elif duplicate_accountname %}
-                  <span class="help-block">Account name already in use.</span>
+                  <span class="help-block text-danger">Account name already in use.</span>
                 {% endif %}
               </div>
               <div class="form-group has-feedback">
                 <label class="control-label" for="accountdescription">Description</label>
                 <input type="text" class="form-control" placeholder="Account Description (optional)"
                   name="accountdescription" {% if account %}value="{{ account.description }}" {% endif %}>
-                <span class="fa fa-industry form-control-feedback"></span>
+                <span class="orm-control-feedback"></span>
               </div>
               <div class="form-group has-feedback">
                 <label class="control-label" for="accountcontact">Contact Person</label>
                 <input type="text" class="form-control" placeholder="Contact Person (optional)"
                   name="accountcontact" {% if account %}value="{{ account.contact }}" {% endif %}>
-                <span class="fa fa-user form-control-feedback"></span>
+                <span class="form-control-feedback"></span>
               </div>
               <div class="form-group has-feedback">
                 <label class="control-label" for="accountmail">Mail Address</label>
                 <input type="email" class="form-control" placeholder="Mail Address (optional)"
                   name="accountmail" {% if account %}value="{{ account.mail }}" {% endif %}>
-                <span class="fa fa-envelope form-control-feedback"></span>
+                <span class="form-control-feedback"></span>
               </div>
             </div>
-            <div class="card-header with-border">
+            <div class="card-header">
               <h3 class="card-title">Access Control</h3>
             </div>
             <div class="card-body">
@@ -104,17 +104,19 @@
               </div>
             </div>
             <div class="card-footer">
-              <button type="submit"
-                class="btn btn-flat btn-primary">{% if create %}Create{% else %}Update{% endif %}
-                Account
+              <button type="button" class="btn btn-secondary float-left" onclick="window.location.href='{{ url_for('admin.manage_account') }}'">
+                Cancel
+              </button>
+              <button type="submit" class="btn btn-primary float-right">
+                {% if create %}Create{% else %}Update{% endif %} Account
               </button>
             </div>
           </form>
         </div>
       </div>
       <div class="col-8">
-        <div class="card shadow">
-          <div class="card-header with-border">
+        <div class="card">
+          <div class="card-header">
             <h3 class="card-title">Help with creating a new account</h3>
           </div>
           <div class="card-body">
diff --git a/powerdnsadmin/templates/admin_edit_key.html b/powerdnsadmin/templates/admin_edit_key.html
index 1d8e696..23f58d3 100644
--- a/powerdnsadmin/templates/admin_edit_key.html
+++ b/powerdnsadmin/templates/admin_edit_key.html
@@ -37,8 +37,8 @@
   <div class="container-fluid">
   <div class="row">
     <div class="col-4">
-      <div class="card card-primary">
-        <div class="card-header with-border">
+      <div class="card ">
+        <div class="card-header">
           <h3 class="card-title">{% if create %}Add{% else %}Edit{% endif %} Key</h3>
         </div>
         <form role="form" method="post"
@@ -65,7 +65,7 @@
                 <span class="glyphicon glyphicon-pencil form-control-feedback"></span>
               </div>
             </div>
-            <div class="card-header with-border key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
+            <div class="card-header key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
               <h3 class="card-title">Accounts Access Control</h3>
             </div>
             <div class="card-body key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
@@ -80,7 +80,7 @@
                 </select>
               </div>
             </div>
-            <div class="card-header with-border key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
+            <div class="card-header key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
               <h3 class="card-title">Domain Access Control</h3>
             </div>
                     <div class="card-body key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
@@ -96,16 +96,19 @@
                         </div>
                     </div>
                     <div class="card-footer">
-                        <button type="submit"
-                            class="btn btn-flat btn-primary float-right" id="key_submit">{% if create %}Create{% else %}Update{% endif %}
-                            Key</button>
+                      <button type="button" class="btn btn-secondary float-left" onclick="window.location.href='{{ url_for('admin.manage_keys') }}'">
+                        <i class="fa-solid fa-window-close"></i>&nbsp;Cancel
+                      </button>
+                      <button type="submit" class="btn btn-primary float-right" id="key_submit">
+                        <i class="fa-solid fa-save"></i>&nbsp;{% if create %}Create{% else %}Update{% endif %} Key
+                      </button>
                     </div>
                 </form>
             </div>
         </div>
         <div class="col-8">
-            <div class="card card-primary">
-                <div class="card-header with-border">
+            <div class="card">
+                <div class="card-header">
                     <h3 class="card-title">Help with {% if create %}creating a new{% else%}updating a{% endif %} key
                     </h3>
                 </div>
@@ -239,7 +242,7 @@
     {% if plain_key %}
     $(document.body).ready(function () {
         var modal = $("#modal_show_key");
-        var info = "{{ plain_key }}";
+        var info = "Please copy this key to a secure location. You will be unable to view it again once you close this window: {{ plain_key }}";
         modal.find('.modal-body p').text(info);
         modal.find('#button_key_confirm').click(redirect_modal);
         modal.find('#button_close_modal').click(redirect_modal);
@@ -255,45 +258,46 @@
 {% endblock %}
 {% block modals %}
 <div class="modal fade" id="modal_show_key">
-    <div class="modal-dialog">
-        <div class="modal-content modal-sm">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="button_close_modal">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-                <h4 class="modal-title">Your API key</h4>
-            </div>
-            <div class="modal-body">
-                <p></p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-primary center-block" id="button_key_confirm">
-                    Confirm</button>
-            </div>
-        </div>
-        <!-- /.modal-content -->
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">New API Key</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="button_close_modal">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p></p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary" id="button_key_confirm">
+          Confirm
+        </button>
+      </div>
     </div>
-    <!-- /.modal-dialog -->
+  </div>
 </div>
 <div class="modal fade" id="modal_warning">
   <div class="modal-dialog">
-      <div class="modal-content modal-sm">
-          <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="button_close_warn_modal">
-                  <span aria-hidden="true">&times;</span>
-              </button>
-              <h4 class="modal-title">WARNING</h4>
-          </div>
-          <div class="modal-body">
-              <p></p>
-          </div>
-          <div class="modal-footer">
-              <button type="button" class="btn btn-flat btn-primary center-block" id="button_key_confirm_warn">
-                  OK</button>
-          </div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">WARNING</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="button_close_warn_modal">
+          <span aria-hidden="true">&times;</span>
+        </button>
       </div>
-      <!-- /.modal-content -->
+      <div class="modal-body">
+        <p></p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary close" data-dismiss="modal" id="button_close_modal">
+          Close
+        </button>
+        <button type="button" class="btn btn-primary" id="button_key_confirm_warn">
+          OK
+        </button>
+      </div>
+    </div>
   </div>
-  <!-- /.modal-dialog -->
 </div>
 {% endblock %}
diff --git a/powerdnsadmin/templates/admin_edit_user.html b/powerdnsadmin/templates/admin_edit_user.html
index b871b31..9e954fe 100644
--- a/powerdnsadmin/templates/admin_edit_user.html
+++ b/powerdnsadmin/templates/admin_edit_user.html
@@ -47,7 +47,7 @@
               {% if error %}
                 <div class="alert alert-danger alert-dismissible">
                   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-                  <h4><i class="icon fa fa-ban"></i> Error!</h4>
+                  <h4><i class="fa-solid fa-ban"></i> Error!</h4>
                   {{ error }}
                 </div>
                 <span class="help-block">{{ error }}</span>
@@ -56,19 +56,19 @@
                 <label class="control-label" for="firstname">First Name</label>
                 <input type="text" class="form-control" placeholder="First Name" name="firstname"
                   {% if user %}value="{{ user.firstname }}" {% endif %}>
-                <span class="glyphicon glyphicon-user form-control-feedback"></span>
+                <span class="form-control-feedback"></span>
               </div>
               <div class="form-group has-feedback">
                 <label class="control-label" for="lastname">Last Name</label>
                 <input type="text" class="form-control" placeholder="Last name" name="lastname"
                   {% if user %}value="{{ user.lastname }}" {% endif %}>
-                <span class="glyphicon glyphicon-user form-control-feedback"></span>
+                <span class="form-control-feedback"></span>
               </div>
               <div class="form-group has-feedback">
                 <label class="control-label" for="email">E-mail address</label>
                 <input type="email" class="form-control" placeholder="Email" name="email" id="email"
                   {% if user %}value="{{ user.email }}" {% endif %}>
-                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+                <span class="form-control-feedback"></span>
               </div>
               <p class="login-box-msg">Enter the account details below</p>
               <div class="form-group has-feedback">
@@ -76,14 +76,14 @@
                 <input type="text" class="form-control" placeholder="Username" name="username"
                   {% if user %}value="{{ user.username }}" {% endif %}
                   {% if not create %}disabled{% endif %}>
-                <span class="glyphicon glyphicon-user form-control-feedback"></span>
+                <span class="form-control-feedback"></span>
               </div>
               <div class="form-group has-feedback {% if blank_password %}has-error{% endif %}">
                 <label class="control-label" for="username">Password</label>
                 <input type="password" class="form-control"
                   placeholder="Password {% if create %}(Required){% else %}(Leave blank to keep unchanged){% endif %}"
                   name="password">
-                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+                <span class="form-control-feedback"></span>
                 {% if blank_password %}
                   <span class="help-block">The password cannot be blank.</span>
                 {% endif %}
@@ -98,8 +98,8 @@
         </div>
         {% if not create %}
           {% if user.otp_secret %}
-            <div class="card card-secondary">
-              <div class="card-header with-border">
+            <div class="card">
+              <div class="card-header">
                 <h3 class="card-title">Two Factor Authentication</h3>
               </div>
               <div class="card-body">
@@ -119,8 +119,8 @@
         {% endif %}
       </div>
       <div class="col-8">
-        <div class="card card-secondary">
-          <div class="card-header with-border">
+        <div class="card">
+          <div class="card-header">
             <h3 class="card-title">
               Help with {% if create %}creating a new{% else%}editing a{% endif %} user
             </h3>
@@ -168,18 +168,21 @@
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <h4 class="modal-title">Confirmation</h4>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
-                <h4 class="modal-title">Confirmation</h4>
             </div>
             <div class="modal-body">
                 <p></p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-left" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-danger" id="button_otp_disable_confirm">Disable Two Factor
-                    Authentication</button>
+                <button type="button" class="btn btn-default" data-dismiss="modal">
+                  Close
+                </button>
+                <button type="button" class="btn btn-danger float-right" id="button_otp_disable_confirm">
+                  Disable Two Factor Authentication
+                </button>
             </div>
         </div>
     </div>
diff --git a/powerdnsadmin/templates/admin_global_search.html b/powerdnsadmin/templates/admin_global_search.html
index 4161ad3..dfe14a6 100644
--- a/powerdnsadmin/templates/admin_global_search.html
+++ b/powerdnsadmin/templates/admin_global_search.html
@@ -34,7 +34,7 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-12">
-          <div class="card shadow">
+          <div class="card">
             <div class="card-header">
               <h3 class="card-title">Global Search</h3>
             </div>
@@ -60,7 +60,7 @@
 
       <div class="row">
         <div class="col-12">
-          <div class="card shadow">
+          <div class="card">
             <div class="card-header">
               <h3 class="card-title">Domains ({{ domains|length }})</h3>
             </div>
@@ -88,7 +88,7 @@
 
       <div class="row">
         <div class="col-12">
-          <div class="card shadow">
+          <div class="card">
             <div class="card-header">
               <h3 class="card-title">Records ({{ records|length }})</h3>
             </div>
@@ -124,7 +124,7 @@
 
       <div class="row">
         <div class="col-12">
-          <div class="card shadow">
+          <div class="card">
             <div class="card-header">
               <h3 class="card-title">Comments ({{ comments|length }})</h3>
             </div>
diff --git a/powerdnsadmin/templates/admin_history.html b/powerdnsadmin/templates/admin_history.html
index 21c2758..f2a8619 100644
--- a/powerdnsadmin/templates/admin_history.html
+++ b/powerdnsadmin/templates/admin_history.html
@@ -40,7 +40,7 @@
             <h3 class="card-title">History Management</h3>
             {% if current_user.role.name != 'User' %}
               <button type="button" class="btn btn-danger float-right" data-toggle="modal" data-target="#modal_clear_history" {% if current_user.role.name != 'Administrator' %}disabled{% endif %}>
-                <i class="fas fa-trash"></i>  
+                <i class="fa-solid fa-trash"></i>  
                 &nbsp;Clear History
               </button>
             {% endif %}
diff --git a/powerdnsadmin/templates/admin_history_table.html b/powerdnsadmin/templates/admin_history_table.html
index 146e7db..8f1d25f 100644
--- a/powerdnsadmin/templates/admin_history_table.html
+++ b/powerdnsadmin/templates/admin_history_table.html
@@ -37,7 +37,7 @@
               {% if history.detailed_msg == "" and history.change_set is none %}
                 style="visibility: hidden;"
               {% endif %} value="{{ loop.index0 }}">
-              <i class="fa fa-info"></i>
+              <i class="fa-solid fa-info"></i>
               &nbsp;Info
             </button>
           </td>
diff --git a/powerdnsadmin/templates/admin_manage_account.html b/powerdnsadmin/templates/admin_manage_account.html
index f0c79cc..c02a18c 100644
--- a/powerdnsadmin/templates/admin_manage_account.html
+++ b/powerdnsadmin/templates/admin_manage_account.html
@@ -34,14 +34,12 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-12">
-        <div class="card card-primary">
-          <div class="card-header with-border">
+        <div class="card">
+          <div class="card-header">
             <h3 class="card-title">Account Management</h3>
-          </div>
-          <div class="card-body">
             <a href="{{ url_for('admin.edit_account') }}">
-              <button type="button" class="btn btn-flat btn-primary pull-left button_add_account">
-                Add Account&nbsp;<i class="fa fa-plus"></i>
+              <button type="button" class="btn btn-primary float-right button_add_account">
+                <i class="fa-solid fa-plus"></i>&nbsp;Add Account
               </button>
             </a>
           </div>
@@ -68,12 +66,22 @@
                     <td>{{ account.user_num }}</td>
                     <td>{{ account.domains|length }}</td>
                     <td width="15%">
-                      <button type="button" class="btn btn-flat btn-success" onclick="window.location.href='{{ url_for('admin.edit_account', account_name=account.name) }}'">
-                        Edit&nbsp;<i class="fa fa-cog"></i>
-                      </button>
-                      <button type="button" class="btn btn-flat btn-danger button_delete" id="{{ account.name }}">
-                        Delete&nbsp;<i class="fa fa-trash"></i>
-                      </button>
+                      <div class="dropdown">
+                        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fa-solid fa-bars"></i>&nbsp;Actions
+                        </button>
+                        <div class="dropdown-menu" aria-labelledby="dropdownMenu">
+                          <button type="button" class="dropdown-item btn-warning" onclick="window.location.href='{{ url_for('admin.edit_account', account_name=account.name) }}'">
+                            <i class="fa-solid fa-edit"></i>&nbsp;Edit Account
+                          </button>
+                          <div class="dropdown-divider"></div>
+                          <button type="button"class="dropdown-item btn-secondary button_delete" id="{{ account.name }}">
+                            <font color="red">
+                              <i class="fa-solid fa-trash"></i>&nbsp;Delete Account
+                            </font>
+                          </button>
+                         </div>
+                      </div>
                     </td>
                   </tr>
                 {% endfor %}
@@ -127,20 +135,20 @@
 </script>
 {% endblock %}
 {% block modals %}
-<div class="modal fade modal-warning" id="modal_delete">
+<div class="modal fade" id="modal_delete">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <h4 class="modal-title">Confirmation</h4>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
-                <h4 class="modal-title">Confirmation</h4>
             </div>
             <div class="modal-body">
                 <p></p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-default float-left" data-dismiss="modal">Close</button>
                 <button type="button" class="btn btn-danger" id="button_delete_confirm">Delete</button>
             </div>
         </div>
diff --git a/powerdnsadmin/templates/admin_manage_keys.html b/powerdnsadmin/templates/admin_manage_keys.html
index e303cd6..87a36b0 100644
--- a/powerdnsadmin/templates/admin_manage_keys.html
+++ b/powerdnsadmin/templates/admin_manage_keys.html
@@ -35,11 +35,9 @@
     <div class="card">
       <div class="card-header with-border">
         <h3 class="card-title">Key Management</h3>
-      </div>
-      <div class="card-body">
         <a href="{{ url_for('admin.edit_key') }}">
-          <button type="button" class="btn btn-primary pull-left button_add_key">
-            Add Key&nbsp;<i class="fa fa-plus"></i>
+          <button type="button" class="btn btn-primary float-right button_add_key">
+            <i class="fa-solid fa-plus"></i>&nbsp;Add Key
           </button>
         </a>
       </div>
@@ -52,7 +50,7 @@
               <th>Description</th>
               <th>Domains</th>
               <th>Accounts</th>
-              <th>Action</th>
+              <th>Actions</th>
             </tr>
           </thead>
           <tbody>
@@ -64,14 +62,22 @@
                 <td>{% for domain in key.domains %}{{ domain.name }}{% if not loop.last %}, {% endif %}{% endfor %}</td>
                 <td>{% for account in key.accounts %}{{ account.name }}{% if not loop.last %}, {% endif %}{% endfor %}</td>
                 <td width="15%">
-                  <button type="button" class="btn btn-flat btn-success button_edit"
-                    onclick="window.location.href='{{ url_for('admin.edit_key', key_id=key.id) }}'">
-                    Edit&nbsp;<i class="fa fa-lock"></i>
-                  </button>
-                  <button type="button" class="btn btn-flat btn-danger button_delete"
-                    id="{{ key.id }}">
-                    Delete&nbsp;<i class="fa fa-trash"></i>
-                  </button>
+                  <div class="dropdown">
+                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <i class="fa-solid fa-bars"></i>&nbsp;Actions
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenu">
+                      <button type="button" class="dropdown-item btn-warning" onclick="window.location.href='{{ url_for('admin.edit_key', key_id=key.id) }}'">
+                        <i class="fa-solid fa-edit"></i>&nbsp;Edit API Key
+                      </button>
+                      <div class="dropdown-divider"></div>
+                      <button type="button"class="dropdown-item btn-secondary button_delete" id="{{ key.id }}">
+                        <font color="red">
+                          <i class="fa-solid fa-trash"></i>&nbsp;Delete API Key
+                        </font>
+                      </button>
+                     </div>
+                  </div>
                 </td>
               </tr>
             {% endfor %}
@@ -125,17 +131,21 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
+          <h4 class="modal-title">Confirmation</h4>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
-          <h4 class="modal-title">Confirmation</h4>
         </div>
         <div class="modal-body">
           <p></p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-default float-left" data-dismiss="modal">Close</button>
-          <button type="button" class="btn btn-danger" id="button_delete_confirm">Delete</button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">
+            Close
+          </button>
+          <button type="button" class="btn btn-danger" id="button_delete_confirm">
+            Delete
+          </button>
         </div>
       </div>
     </div>
diff --git a/powerdnsadmin/templates/admin_manage_user.html b/powerdnsadmin/templates/admin_manage_user.html
index 154acac..ba978a1 100644
--- a/powerdnsadmin/templates/admin_manage_user.html
+++ b/powerdnsadmin/templates/admin_manage_user.html
@@ -35,13 +35,11 @@
       <div class="row">
         <div class="col-12">
           <div class="card">
-            <div class="card-header with-border">
+            <div class="card-header">
               <h3 class="card-title">User Management</h3>
-            </div>
-            <div class="card-body">
               <a href="{{ url_for('admin.edit_user') }}">
-                <button type="button" class="btn btn-primary pull-left button_add_user">
-                  <i class="fa fa-plus"></i>&nbsp;Add User
+                <button type="button" class="btn btn-primary float-right button_add_user">
+                  <i class="fa-solid fa-plus"></i>&nbsp;Add User
                 </button>
               </a>
             </div>
@@ -80,20 +78,30 @@
                         <button type="button" class="btn btn-warning button_revoke"
                           id="{{ user.username }}"
                           {% if current_user.role.name=='Operator' and user.role.name=='Administrator' %}disabled{% endif %}>
-                            <i class="fa fa-lock"></i>&nbsp;Revoke
+                            <i class="fa-solid fa-link-slash"></i>&nbsp;Revoke
                         </button>
                       </td>
                       <td width="15%">
-                        <button type="button" class="btn btn-success button_edit"
-                          onclick="window.location.href='{{ url_for('admin.edit_user', user_username=user.username) }}'"
+
+                        <div class="dropdown">
+                          <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                           {% if current_user.role.name=='Operator' and user.role.name=='Administrator' %}disabled{% endif %}>
-                            <i class="fa fa-lock"></i>&nbsp;Edit
-                        </button>
-                        <button type="button" class="btn btn-danger button_delete"
-                          id="{{ user.username }}"
-                          {% if user.username==current_user.username or (current_user.role.name=='Operator' and user.role.name=='Administrator') %}disabled{% endif %}>
-                            <i class="fa fa-trash"></i>&nbsp;Delete
-                        </button>
+                            <i class="fa-solid fa-bars"></i>&nbsp;Actions
+                          </button>
+                          <div class="dropdown-menu" aria-labelledby="dropdownMenu">
+                            <button type="button" class="dropdown-item btn-warning" onclick="window.location.href='{{ url_for('admin.edit_user', user_username=user.username) }}'">
+                              <i class="fa-solid fa-edit"></i>&nbsp;Edit User
+                            </button>
+                            {% if not user.username==current_user.username or (current_user.role.name=='Operator' and user.role.name=='Administrator') %}
+                              <div class="dropdown-divider"></div>
+                              <button type="button"class="dropdown-item btn-secondary button_delete" id="{{ user.username }}">
+                                <font color="red">
+                                  <i class="fa-solid fa-trash"></i>&nbsp;Delete User
+                                </font>
+                              </button>
+                            {% endif %}
+                           </div>
+                        </div>
                       </td>
                     </tr>
                   {% endfor %}
@@ -179,7 +187,7 @@
 {% endblock %}
 
 {% block modals %}
-  <div class="modal fade modal-warning" id="modal_revoke">
+  <div class="modal fade" id="modal_revoke">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
@@ -192,14 +200,18 @@
           <p></p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
-          <button type="button" class="btn btn-danger" id="button_revoke_confirm">Revoke</button>
+          <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">
+            Close
+          </button>
+          <button type="button" class="btn btn-danger float-right" id="button_revoke_confirm">
+            Revoke
+          </button>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="modal fade modal-warning" id="modal_delete">
+  <div class="modal fade" id="modal_delete">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
@@ -212,8 +224,12 @@
           <p></p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
-          <button type="button" class="btn btn-danger" id="button_delete_confirm">Delete</button>
+          <button type="button" class="btn btn-default float-right" data-dismiss="modal">
+            Close
+          </button>
+          <button type="button" class="btn btn-danger float-right" id="button_delete_confirm">
+            Delete
+          </button>
         </div>
       </div>
     </div>
diff --git a/powerdnsadmin/templates/admin_pdns_stats.html b/powerdnsadmin/templates/admin_pdns_stats.html
index 1c51129..b0e52f4 100644
--- a/powerdnsadmin/templates/admin_pdns_stats.html
+++ b/powerdnsadmin/templates/admin_pdns_stats.html
@@ -84,7 +84,7 @@
                       <td>
                         <a href="https://doc.powerdns.com/authoritative/search.html?q={{ config['name'] }}"
                         target="_blank" class="btn btn-primary">
-                          <i class="fa fa-search"></i>&nbsp;{{ config['name'] }}
+                          <i class="fa-solid fa-search"></i>&nbsp;{{ config['name'] }}
                         </a>
                       </td>
                       <td>
diff --git a/powerdnsadmin/templates/admin_setting_basic.html b/powerdnsadmin/templates/admin_setting_basic.html
index f62d43a..bb801e3 100644
--- a/powerdnsadmin/templates/admin_setting_basic.html
+++ b/powerdnsadmin/templates/admin_setting_basic.html
@@ -55,14 +55,14 @@
                   <td><i class="fas fa-toggle-off"></i>&nbsp;Off</td>
                   <td width="20%">
                     <button type="button" class="btn btn-success setting-toggle-button" id="{{ setting }}">
-                      <i class="fas fa-toggle-on"></i>&nbsp;Turn On
+                      <i class="fa-solid fa-toggle-on"></i>&nbsp;Turn On
                     </button>
                   </td>
                 {% elif SETTING.get(setting) in [True] %}
                   <td><i class="fas fa-toggle-on"></i>&nbsp;On</td>
                   <td width="20%">
                     <button type="button" class="btn btn-danger setting-toggle-button" id="{{ setting }}">
-                      <i class="fas fa-toggle-off"></i>&nbsp;Turn Off
+                      <i class="fa-solid fa-toggle-off"></i>&nbsp;Turn Off
                     </button>
                   </td>
                 {% else %}
@@ -71,7 +71,7 @@
                   </td>
                   <td width="20%">
                     <button type="button" class="btn btn-primary setting-save-button" id="{{ setting }}">
-                      <i class="fas fa-save"></i>&nbsp;Save
+                      <i class="fa-solid fa-save"></i>&nbsp;Save
                     </button>
                   </td>
                 {% endif %}
diff --git a/powerdnsadmin/templates/admin_setting_pdns.html b/powerdnsadmin/templates/admin_setting_pdns.html
index 03cd273..c4b8947 100644
--- a/powerdnsadmin/templates/admin_setting_pdns.html
+++ b/powerdnsadmin/templates/admin_setting_pdns.html
@@ -69,7 +69,9 @@
                 </div>
               </div>
               <div class="card-footer">
-                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i>&nbsp;Update</button>
+                <button type="submit" class="btn btn-primary float-right">
+                  <i class="fa-solid fa-save"></i>&nbsp;Save
+                </button>
               </div>
             </form>
           </div>
diff --git a/powerdnsadmin/templates/admin_setting_records.html b/powerdnsadmin/templates/admin_setting_records.html
index 0803e41..3fea6a5 100644
--- a/powerdnsadmin/templates/admin_setting_records.html
+++ b/powerdnsadmin/templates/admin_setting_records.html
@@ -34,8 +34,8 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-5">
-        <div class="card card-primary">
-          <div class="card-header with-border">
+        <div class="card">
+          <div class="card-header">
             <h3 class="card-title">DNS record Settings</h3>
           </div>
           <form role="form" method="post">
@@ -66,14 +66,16 @@
               </table>
             </div>
             <div class="card-footer">
-              <button type="submit" class="btn btn-flat btn-primary">Update</button>
+              <button type="submit" class="btn btn-primary float-right">
+                <i class="fa-solid fa-save"></i>&nbsp;Save
+              </button>
             </div>
           </form>
         </div>
       </div>
       <div class="col-7">
-        <div class="card card-primary">
-          <div class="card-header with-border">
+        <div class="card">
+          <div class="card-header">
             <h3 class="card-title">Help</h3>
           </div>
           <div class="card-body">
diff --git a/powerdnsadmin/templates/base.html b/powerdnsadmin/templates/base.html
index 49e4d30..54bb019 100644
--- a/powerdnsadmin/templates/base.html
+++ b/powerdnsadmin/templates/base.html
@@ -14,7 +14,6 @@
     <!--  Get Google Fonts we like -->
     <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/source_sans_pro.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/roboto_mono.css') }}">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
     <!-- Tell the browser to be responsive to screen width -->
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <!-- Tell Safari to not recognise telephone numbers -->
@@ -28,56 +27,24 @@
   {% endblock %}
 </head>
 
-<body class="hold-transition sidebar-mini text-sm {% if not SETTING.get('fullscreen_layout') %}layout-boxed{% endif %}">
+<body class="hold-transition sidebar-mini {% if not SETTING.get('fullscreen_layout') %}layout-boxed{% endif %}">
   {% set user_image_url = url_for('user.image', username=current_user.username) %}
   <div class="wrapper">
   {% block pageheader %}
-    <nav class="main-header navbar navbar-expand navbar-dark">
+    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
       <!-- Header Navbar: style can be found in header.less -->
       <!-- Sidebar toggle button-->
       <ul class="navbar-nav">
         <li class="nav-item">
           <a class="nav-link" data-widget="pushmenu" href="#" role="button">
-            <i class="fas fa-bars"></i>
+            <i class="fa-solid fa-bars"></i>
           </a>
         </li>
-        {% if current_user.id is defined %}
-          <li class="nav-item d-none d-inline-block">
-            <a class="nav-link" href="{{ url_for('index.logout') }}">
-              Logout
-            </a>
-          </li>
-        {% endif %}
       </ul>
-
         <ul class="navbar-nav ml-auto">
-<!--          {% if current_user.id is defined %}
-          <li class="nav-item dropdown user-menu">
-            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
-              <img src="{{ user_image_url }}" class="user-image img-circle elevation-2" alt="User Image"/>
-              <span class="d-none d-md-inline">
-                {{ current_user.firstname }} {{ current_user.lastname }}
-              </span>
-            </a>
-            <ul class="dropdown-menu">
-              <li class="user-header bg-dark">
-                <img src="{{ user_image_url }}" class="img-circle elevation-2" alt="User Image"/>
-                <p>
-                  {{ current_user.firstname }} {{ current_user.lastname }}
-                  <small>{{ current_user.role.name }}</small>
-                </p>
-              </li>
-              <li class="user-footer">
-                <a href="{{ url_for('user.profile') }}" class="btn btn-primary">My Profile</a>
-                <a href="{{ url_for('index.logout') }}" class="btn btn-warning float-right">Log out</a>
-              </li>
-            </ul>
-          </li>
-          {% endif %}
--->          
         <li class="nav-item">
           <a class="nav-link" data-widget="fullscreen" href="#" role="button">
-            <i class="fas fa-expand-arrows-alt"></i>
+            <i class="fa-solid fa-expand-arrows-alt"></i>
           </a>
         </li>
       </ul>
@@ -88,6 +55,7 @@
   <aside class="main-sidebar sidebar-dark-primary">
     <!-- Logo -->
     <a href="{{ url_for('index.index') }}" class="brand-link">
+      <img src="{{ url_for('static', filename='img/favicon.png') }}" alt="PowerDNS-Admin FavIcon" class="brand-image img-circle elevation-3" style="opacity: .8">
       <span class="brand-text font-weight-light">
         {% if SETTING.get('site_name') %}
           <b>{{ SITE_NAME }}</b>
@@ -109,17 +77,29 @@
       </div>
       <!-- sidebar menu: : style can be found in sidebar.less -->
       <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">
-        <li class="nav-header">USER ACTIONS</li>
+        <li class="{{ 'nav-item active' if active_page == 'user_profile' else 'nav-item' }}">
+          <a href="{{ url_for('user.profile') }}" class="nav-link">
+            <i class="nav-icon fa-solid fa-user"></i>
+            <p>Profile</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="{{ url_for('index.logout') }}" class="nav-link">
+            <i class="nav-icon fa-solid fa-sign-out-alt"></i>
+            <p>Logout</p>
+          </a>
+        </li>
+        <li class="nav-header">Zone Management</li>
         <li class="{{ 'nav-item active' if active_page == 'nav-item dashboard' else 'nav-item' }}">
           <a href="{{ url_for('dashboard.dashboard') }}" class="nav-link">
-            <i class="nav-icon fas fa-tachometer-alt"></i>
+            <i class="nav-icon fa-solid fa-tachometer-alt"></i>
             <p>Dashboard</p>
           </a>
         </li>
         {% if SETTING.get('allow_user_create_domain') or current_user.role.name in ['Administrator', 'Operator'] %}
         <li class="{{ 'nav-item active' if active_page == 'nav-item new_domain' else 'nav-item' }}">
           <a href="{{ url_for('domain.add') }}" class="nav-link">
-            <i class="nav-icon fas fa-plus"></i>
+            <i class="nav-icon fa-solid fa-plus"></i>
             <p>New Domain</p>
           </a>
         </li>
@@ -127,86 +107,86 @@
         {% if SETTING.get('allow_user_remove_domain') or current_user.role.name in ['Administrator', 'Operator'] %}
         <li class="{{ 'nav-item active' if active_page == 'remove_domain' else 'nav-item' }}">
           <a href="{{ url_for('domain.remove') }}" class="nav-link">
-            <i class="nav-icon fas fa-trash-alt"></i>
+            <i class="nav-icon fa-solid fa-trash-alt"></i>
             <p>Remove Domain</p>
           </a>
         </li>
         {% endif %}
         {% if current_user.role.name in ['Administrator', 'Operator'] %}
-        <li class="nav-header">ADMINISTRATION</li>
+        <li class="nav-header">Administration</li>
         <li class="{{ 'nav-item active' if active_page == 'admin_console' else 'nav-item' }}">
           <a href="{{ url_for('admin.pdns_stats') }}" class="nav-link">
-            <i class="nav-icon fas fa-info-circle"></i>
+            <i class="nav-icon fa-solid fa-info-circle"></i>
             <p>PowerDNS Info</p>
           </a>
         </li>
         <li class="{{ 'nav-item active' if active_page == 'admin_global_search' else 'nav-item' }}">
           <a href="{{ url_for('admin.global_search') }}" class="nav-link">
-            <i class="nav-icon fas fa-search"></i>
+            <i class="nav-icon fa-solid fa-search"></i>
             <p>Global Search</p>
           </a>
         </li>
         <li class="{{ 'nav-item active' if active_page == 'admin_history' else 'nav-item' }}">
           <a href="{{ url_for('admin.history') }}" class="nav-link">
-            <i class="nav-icon fas fa-calendar-alt"></i>
+            <i class="nav-icon fa-solid fa-calendar-alt"></i>
             <p>History</p>
           </a>
         </li>
         <li class="{{ 'nav-item active' if active_page == 'admin_domain_template' else 'nav-item' }}">
           <a href="{{ url_for('admin.templates') }}" class="nav-link">
-            <i class="nav-icon fas fa-clone"></i>
+            <i class="nav-icon fa-solid fa-clone"></i>
             <p>Domain Templates</p>
           </a>
         </li>
         <li class="{{ 'nav-item active' if active_page == 'admin_accounts' else 'nav-item' }}">
           <a href="{{ url_for('admin.manage_account') }}" class="nav-link">
-            <i class="nav-icon fas fa-industry"></i>
+            <i class="nav-icon fa-solid fa-industry"></i>
             <p>Accounts</p>
           </a>
         </li>
         <li class="{{ 'nav-item active' if active_page == 'admin_users' else 'nav-item' }}">
           <a href="{{ url_for('admin.manage_user') }}" class="nav-link">
-            <i class="nav-icon fas fa-users"></i>
+            <i class="nav-icon fa-solid fa-users"></i>
             <p>Users</p>
           </a>
         </li>
         <li class="{{ 'nav-item active' if active_page == 'admin_keys' else 'nav-item' }}">
           <a href="{{ url_for('admin.manage_keys') }}" class="nav-link">
-            <i class="nav-icon fas fa-key"></i>
+            <i class="nav-icon fa-solid fa-key"></i>
             <p>API Keys</p>
           </a>
         </li>
         <li class="{{ 'nav-item active' if active_page == 'admin_settings' else 'nav-item' }}">
           <a href="#" class="nav-link">
-            <i class="nav-icon fas fa-cog"></i>
+            <i class="nav-icon fa-solid fa-cog"></i>
             <p>
               Settings
-              <i class="right fas fa-angle-left"></i>
+              <i class="right fa-solid fa-angle-left"></i>
             </p>
           </a>
           <ul class="nav nav-treeview" {% if active_page == 'admin_settings' %}style="display: block;"{% endif %}>
             <li class="nav-item">
               <a href="{{ url_for('admin.setting_basic') }}" class="nav-link">
-                <i class="nav-icon far fa-circle"></i>
+                <i class="nav-icon fa-solid fa-circle"></i>
                 <p>Basic</p>
               </a>
             </li>
             <li class="nav-item">
               <a href="{{ url_for('admin.setting_records') }}" class="nav-link">
-                <i class="nav-icon far fa-circle"></i>
+                <i class="nav-icon fa-solid fa-circle"></i>
                 <p>Records</p>
               </a>
             </li>
             {% if current_user.role.name == 'Administrator' %}
               <li class="nav-item">
                 <a href="{{ url_for('admin.setting_pdns') }}" class="nav-link">
-                  <i class="nav-icon far fa-circle"></i>
+                  <i class="nav-icon fa-solid fa-circle"></i>
                   <p>PowerDNS Connection</p>
                 </a>
               </li>
               <li class="nav-item">
                 <a href="{{ url_for('admin.setting_authentication') }}" class="nav-link">
-                  <i class="nav-icon far fa-circle"></i>
+                  <i class="nav-icon fa-solid fa-circle"></i>
                   <p>Authentication</p>
                 </a>
               </li>
@@ -214,10 +194,10 @@
           </ul>
         </li>
         {% elif SETTING.get('allow_user_view_history') %}
-        <li class="nav-header">ADMINISTRATION</li>
+        <li class="nav-header">Administration</li>
         <li class="{{ 'nav-item active' if active_page == 'admin_history' else 'nav-item' }}">
           <a href="{{ url_for('admin.history') }}" class="nav-link">
-            <i class="nav-icon fas fa-calendar-alt"></i>
+            <i class="nav-icon fa-solid fa-calendar-alt"></i>
             <p>History</p>
           </a>
         </li>
@@ -383,49 +363,43 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"
-          aria-label="Close">
+        <h4 class="modal-title">Error</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Error</h4>
       </div>
       <div class="modal-body">
         <p></p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-flat btn-default pull-right"
-          data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">
+          Close
+        </button>
       </div>
     </div>
-    <!-- /.modal-content -->
   </div>
-  <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->
 <div class="modal fade modal-success" id="modal_success">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"
-          aria-label="Close">
+        <h4 class="modal-title">Success</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Success</h4>
       </div>
       <div class="modal-body">
         <p></p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-flat btn-default pull-right"
-          data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">
+          Close
+        </button>
       </div>
     </div>
-    <!-- /.modal-content -->
   </div>
-  <!-- /.modal-dialog -->
 </div>
-<!-- /.modal -->
-<!-- /.session-warning-modal -->
 <div class="modal fade modal-warning" data-backdrop="static" id="modal_session_warning">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -438,17 +412,16 @@
         <p>To coninue your ssession, select <strong>Stay Signed In</strong></p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-flat btn-danger pull-left button_stay_signed_in"
-          data-dismiss="modal">Stay Signed In</button>
-        <button type="button" class="btn btn-flat btn-default pull-right button_sign_out"
-          data-dismiss="modal">Sign Out</button>
+        <button type="button" class="btn btn-success float-right button_stay_signed_in" data-dismiss="modal">
+          Stay Signed In
+        </button>
+        <button type="button" class="btn btn-danger float-left button_sign_out" data-dismiss="modal">
+          Sign Out
+        </button>
       </div>
     </div>
-    <!-- /.session-warning-modal-content -->
   </div>
-  <!-- /.session-warning-modal-dialog -->
 </div>
-<!-- /.session-warning-modal -->
 {% endblock %}
 {% block modals %}
 {% endblock %}
diff --git a/powerdnsadmin/templates/dashboard.html b/powerdnsadmin/templates/dashboard.html
index 727f5b5..ddf3697 100755
--- a/powerdnsadmin/templates/dashboard.html
+++ b/powerdnsadmin/templates/dashboard.html
@@ -36,7 +36,7 @@
       {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
         <div class="row">
           <div class="col-3">
-            <div class="card shadow card-outline card-secondary">
+            <div class="card">
               <div class="card-header">
                 <h3 class="card-title">Statistics</h3>
               </div>
@@ -50,7 +50,7 @@
                         <p>{% if domain_count > 1 %}Domains{% else %}Domain{% endif %}</p>
                       </div>
                       <div class="icon">
-                        <i class="fa fa-book"></i>
+                        <i class="fa-solid fa-book"></i>
                       </div>
                     </div>
                   </div>
@@ -63,7 +63,7 @@
                             <p>{% if user_num > 1 %}Users{% else %}User{% endif %}</p>
                           </div>
                           <div class="icon">
-                            <i class="fa fa-users"></i>
+                            <i class="fa-solid fa-users"></i>
                           </div>
                         </div>
                       </a>
@@ -79,7 +79,7 @@
                           <p>{% if history_number > 1 %}Histories{% else %}History{% endif %}</p>
                         </div>
                         <div class="icon">
-                          <i class="fa fa-calendar"></i>
+                          <i class="fa-solid fa-calendar"></i>
                         </div>
                       </div>
                     </a>
@@ -93,7 +93,7 @@
                             <p>Uptime</p>
                           </div>
                           <div class="icon">
-                            <i class="fa fa-clock"></i>
+                            <i class="fa-solid fa-clock"></i>
                           </div>
                         </div>
                       </a>
@@ -104,7 +104,7 @@
             </div>
           </div>
           <div class="col-9">
-            <div class="card shadow card-outline card-secondary">
+            <div class="card">
               <div class="card-header">
                 <h3 class="card-title">Recent History</h3>
               </div>
@@ -139,7 +139,7 @@
                             {% if history.detailed_msg == "" and history.change_set is none %}
                               style="visibility: hidden;"
                             {% endif %} value="{{ loop.index0 }}">
-                            &nbsp;Info
+                            <i class="fa-solid fa-info-circle"></i>&nbsp;Info
                           </button>
                         </td>
                       </tr>
@@ -153,56 +153,59 @@
       {% endif %}
       <div class="row">
         <div class="col-12">
-          <div class="card shadow card-outline card-secondary">
+          <div class="card">
             <div class="card-header">
               <div class="nav-tabs-custom">
-                <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist">
+                <ul class="nav nav-tabs card-header-tabs" id="custom-content-below-tab" role="tablist">
                   <li class="nav-item">
                     <a class="nav-link active" href="#tab_{{custom_boxes.order[0]}}" data-toggle="pill" role="tab">
                       Hosted Domains <b>{{custom_boxes.boxes[custom_boxes.order[0]][0]}}</b>
                     </a>
                   </li>
                   {% for boxId in custom_boxes.order[1:] %}
-                    <li class="nav-item" >
-                      <a class="nav-link" href="#tab_{{boxId}}" data-toggle="pill" role="tab">Hosted Domains <b>{{custom_boxes.boxes[boxId][0]}}</b></a>
-                    </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="#tab_{{boxId}}" data-toggle="pill" role="tab">Hosted Domains <b>{{custom_boxes.boxes[boxId][0]}}</b></a>
+                  </li>
                   {% endfor %}
                 </ul>
-                <div class="tab-content">
-                  {% for boxId in custom_boxes.order %}
-                    <div class="tab-pane fade show" id='tab_{{boxId}}'>
-                      <div class="card-header">
-                        <h3 class="card-title">Hosted Domains <b>{{custom_boxes.boxes[boxId][0]}}</b></h3>
-                        {% if show_bg_domain_button %}
-                          <button type="button" class="btn btn-primary refresh-bg-button float-right">
-                            <i class="fas fa-sync"></i>
-                            &nbsp;Sync domains
-                          </button>
-                        {% endif %}
-                      </div>
-                      <div class="card-body">
-                        <table id='tbl_domain_list_{{boxId}}' class="table table-bordered table-striped">
-                          <thead>
-                            <tr>
-                              <th>Name</th>
-                              <th>DNSSEC</th>
-                              <th>Type</th>
-                              <th>Serial</th>
-                              <th>Master</th>
-                              <th>Account</th>
-                              <th>Actions</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  {% endfor %}
+              </div>
+            </div>
+            <div class="card-body">
+              <div class="tab-content">
+                {% for boxId in custom_boxes.order %}
+                <div class="tab-pane fade show" id='tab_{{boxId}}'>
+                  <div class="card-header">
+                    <h3 class="card-title">Hosted Domains <b>{{custom_boxes.boxes[boxId][0]}}</b></h3>
+                    {% if show_bg_domain_button %}
+                    <button type="button" class="btn btn-primary refresh-bg-button float-right">
+                      <i class="fa-solid fa-sync"></i>
+                      &nbsp;Sync Domains
+                    </button>
+                    {% endif %}
+                  </div>
+                  <div class="card-body">
+                    <table id='tbl_domain_list_{{boxId}}' class="table table-bordered table-striped">
+                      <thead>
+                        <tr>
+                          <th>Name</th>
+                          <th>DNSSEC</th>
+                          <th>Type</th>
+                          <th>Serial</th>
+                          <th>Primary</th>
+                          <th>Account</th>
+                          <th>Actions</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
+                {% endfor %}
               </div>
             </div>
           </div>
+
         </div>
       </div>
     </div>
@@ -304,117 +307,112 @@
     });
 
     {% if current_user.role.name in ['Administrator', 'Operator'] or not SETTING.get('dnssec_admins_only') %}
-    $(document.body).on("click", ".button_dnssec", function() {
+      $(document.body).on("click", ".button_dnssec", function() {
         var domain = $(this).prop('id');
         getdnssec($SCRIPT_ROOT + '/domain/' + domain + '/dnssec', domain);
-    });
+      });
 
-    $(document.body).on("click", ".button_dnssec_enable", function() {
+      $(document.body).on("click", ".button_dnssec_enable", function() {
         var domain = $(this).prop('id');
         enable_dns_sec($SCRIPT_ROOT + '/domain/' + domain + '/dnssec/enable', '{{ csrf_token() }}');
+      });
 
-    });
-
-    $(document.body).on("click", ".button_dnssec_disable", function() {
+      $(document.body).on("click", ".button_dnssec_disable", function() {
         var domain = $(this).prop('id');
         enable_dns_sec($SCRIPT_ROOT + '/domain/' + domain + '/dnssec/disable', '{{ csrf_token() }}');
-
-    });
+      });
     {% endif %}
 </script>
 {% endblock %}
+
 {% block modals %}
 <div class="modal fade" id="modal_history_info">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal"
-                    aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-                <h4 class="modal-title">History Details</h4>
-            </div>
-            <div class="modal-body">
-              <div id="modal-info-content"></div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-right"
-                    data-dismiss="modal">Close</button>
-            </div>
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">History Details</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div id="modal-info-content">
         </div>
-        <!-- /.modal-content -->
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">
+          Close
+        </button>
+      </div>
     </div>
-    <!-- /.modal-dialog -->
+  </div>
 </div>
-<div class="modal fade modal-primary" id="modal_template">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal"
-                    aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-                <h4 class="modal-title">Clone to template</h4>
-            </div>
-            <div class="modal-body">
-                <p></p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-left"
-                    id="button_close" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-primary" id="button_save">Save</button>
-            </div>
-        </div>
-        <!-- /.modal-content -->
-    </div>
-    <!-- /.modal-dialog -->
-</div>
-<!-- /.modal -->
-<div class="modal fade" id="modal_dnssec_info">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-              <h4 class="modal-title">DNSSEC</h4>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
-            </div>
-            <div class="modal-body">
-                <p></p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-right"
-                    data-dismiss="modal">Close</button>
-            </div>
-        </div>
-        <!-- /.modal-content -->
-    </div>
-    <!-- /.modal-dialog -->
-</div>
-<!-- /.modal -->
-<div class="modal fade" id="modal_bg_reload">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal"
-                    aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-                <h4 class="modal-title">Sync domains from nameserver</h4>
-            </div>
-            <div class="modal-body">
 
-                <div class="overlay">
-                  <div id="modal_bg_reload_content"><i class="fa fa-refresh fa-spin"></i> Update in progress ..</div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-right"
-                    data-dismiss="modal">Close</button>
-            </div>
-        </div>
-        <!-- /.modal-content -->
+<div class="modal fade modal-primary" id="modal_template">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Clone to template</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p></p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary float-right" id="button_close" data-dismiss="modal">
+          Close
+        </button>
+        <button type="button" class="btn btn-primary float-right" id="button_save">
+          Save
+        </button>
+      </div>
     </div>
-    <!-- /.modal-dialog -->
+  </div>
+</div>
+
+<div class="modal fade" id="modal_dnssec_info">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">DNSSEC</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p></p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="modal_bg_reload">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Sync Domains from backend</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div id="modal_bg_reload_content">
+          <i class="fa fa-refresh fa-spin"></i> Update in progress ..
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
 </div>
 {% endblock %}
diff --git a/powerdnsadmin/templates/dashboard_domain.html b/powerdnsadmin/templates/dashboard_domain.html
index 86338a9..a7df38c 100644
--- a/powerdnsadmin/templates/dashboard_domain.html
+++ b/powerdnsadmin/templates/dashboard_domain.html
@@ -4,9 +4,9 @@
 
 {% macro dnssec(domain) %}
   {% if domain.dnssec %}
-  <td><span style="cursor:pointer" class="btn btn-lg btn-success button_dnssec" id="{{ domain.name }}"><i class="fa fa-lock"></i>&nbsp;Enabled</span></td>
+  <td><span style="cursor:pointer" class="badge badge-success button_dnssec" id="{{ domain.name }}"><i class="fa-solid fa-lock"></i>&nbsp;Enabled</span></td>
   {% else %}
-  <td><span style="cursor:pointer" class="btn btn-sm btn-danger button_dnssec" id="{{ domain.name }}"><i class="fa fa-unlock-alt"></i>&nbsp;Disabled</span></td>
+  <td><span style="cursor:pointer" class="badge badge-danger button_dnssec" id="{{ domain.name }}"><i class="fa-solid fa-lock-open"></i>&nbsp;Disabled</span></td>
   {% endif %}
 {% endmacro %}
 
@@ -31,30 +31,45 @@
 {% macro actions(domain) %}
 <td width="6%">
   <div class="dropdown">
-    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      Options
+    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <i class="fa-solid fa-bars"></i>&nbsp;Actions
     </button>
     <div class="dropdown-menu" aria-labelledby="dropdownMenu">
       {% if current_user.role.name in ['Administrator', 'Operator'] %}
         <button class="dropdown-item btn-success button_template" id="{{ domain.name }}" type="button">
-          <i class="fa fa-clone"></i>&nbsp;Clone to Template
+          <i class="fa-solid fa-clone"></i>&nbsp;Clone to Template
         </button>
         <button class="dropdown-item btn-success" type="button" onclick="window.location.href='{{ url_for('domain.domain', domain_name=domain.name) }}'">
-          <i class="fa fa-cog"></i>&nbsp;Manage Domain
+          <i class="fa-solid fa-cog"></i>&nbsp;Manage Domain
         </button>
         <button class="dropdown-item btn-danger" type="button" onclick="window.location.href='{{ url_for('domain.setting', domain_name=domain.name) }}'">
-          <i class="fa fa-cog"></i>&nbsp;Admin Settings
+          <i class="fa-solid fa-cog"></i>&nbsp;Admin Settings
         </button>
         <button class="dropdown-item btn-primary" type="button" onclick="window.location.href='{{ url_for('domain.changelog', domain_name=domain.name) }}'">
-          <i class="fa fa-history" aria-hidden="true"></i>&nbsp;Domain Changelog
+          <i class="fa-solid fa-history" aria-hidden="true"></i>&nbsp;Domain Changelog
         </button>
+        <div class="dropdown-divider"></div>
+        <button type="button"class="dropdown-item btn-secondary button_delete" onclick="window.location.href='{{ url_for('domain.remove') }}'">
+          <font color="red">
+            <i class="fa-solid fa-trash"></i>&nbsp;Remove Domain
+          </font>
+        </button>
+       </div>
       {% else %}
         <button class="dropdown-item btn-success" type="button" onclick="window.location.href='{{ url_for('domain.domain', domain_name=domain.name) }}'">
-          <i class="fa fa-cog"></i>&nbsp;Manage Domain
+          <i class="fa-solid fa-cog"></i>&nbsp;Manage Domain
         </button>
         {% if allow_user_view_history %}
           <button class="dropdown-item btn-primary" type="button" onclick="window.location.href='{{ url_for('domain.changelog', domain_name=domain.name) }}'">
-            <i class="fa fa-history" aria-hidden="true"></i>&nbsp;Domain Changelog
+            <i class="fa-solid fa-history" aria-hidden="true"></i>&nbsp;Domain Changelog
+          </button>
+        {% endif %}
+        {% if allow_user_remove_domain %}
+          <div class="dropdown-divider"></div>
+          <button type="button"class="dropdown-item btn-secondary button_delete" onclick="window.location.href='{{ url_for('domain.remove') }}'">
+            <font color="red">
+              <i class="fa-solid fa-trash"></i>&nbsp;Remove Domain
+            </font>
           </button>
         {% endif %}
       {% endif %}  
diff --git a/powerdnsadmin/templates/domain.html b/powerdnsadmin/templates/domain.html
index 4c03a97..4cd1c15 100755
--- a/powerdnsadmin/templates/domain.html
+++ b/powerdnsadmin/templates/domain.html
@@ -33,30 +33,30 @@
       <div class="col-12">
         <div class="card">
           <div class="card-header">
-            {% if domain.type != 'Secondary' %}
+            {% if domain.type != 'Slave' %}
               <button type="button" style="position: relative; margin-left: 20px" class="btn btn-primary float-left button_add_record" id="{{ domain.name }}">
-                <i class="fas fa-plus"></i>
+                <i class="fa-solid fa-plus"></i>
                 &nbsp;Add Record
               </button>
               <button type="button" style="position: relative; margin-left: 20px" class="btn btn-primary float-right button_apply_changes" id="{{ domain.name }}" value="{{ domain.serial }}">
-                <i class="fas fa-save"></i>
+                <i class="fa-solid fa-save"></i>
                 &nbsp;Apply Changes
               </button>
             {% else %}
               <button type="button" style="position: relative; margin-left: 20px" class="btn btn-primary float-left button_update_from_primary" id="{{ domain.name }}">
-                <i class="fas fa-download"></i>
+                <i class="fa-solid fa-sync"></i>
                 &nbsp;Update from Primary
               </button>
             {% endif %}
             {% if current_user.role.name in ['Administrator', 'Operator'] %}
               <button type="button" style="position: relative; margin-left: 20px" class="btn btn-primary float-left btn-danger" onclick="window.location.href='{{ url_for('domain.setting', domain_name=domain.name) }}'">
-                <i class="fas fa-cog"></i>
+                <i class="fa-solid fa-toolbox"></i>
                 &nbsp;Admin
               </button>
             {% endif %}
             {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
               <button type="button" style="position: relative; margin-left: 20px" class="btn btn-primary button_changelog" id="{{ domain.name }}">
-                <i class="fas fa-history" aria-hidden="true"></i>
+                <i class="fa-solid fa-history" aria-hidden="true"></i>
                 &nbsp;Changelog
               </button>
             {% endif %}
@@ -70,7 +70,7 @@
                   <th>Status</th>
                   <th>TTL</th>
                   <th>Data</th>
-                  {% if domain.type != 'Secondary' %}
+                  {% if domain.type != 'Slave' %}
                     <th>Comment</th>
                     <th>Edit</th>
                     <th>Delete</th>
@@ -95,23 +95,25 @@
                       <td width="6%">
                         {% if record.is_allowed_edit() %}
                           <button type="button" class="btn btn-warning button_edit">
-                            <i class="fa fa-edit"></i>
+                            <i class="fa-solid fa-edit"></i>
                           </button>
                         {% else %}
                           <button type="button" class="btn btn-warning">
-                            <i class="fa fa-exclamation-circle"></i>
+                            <i class="fa-solid fa-exclamation-circle"></i>
                           </button>
                         {% endif %}
                       </td>
                       <td width="6%">
                         {% if record.is_allowed_delete() %}
-                          <button type="button" class="btn btn-danger button_delete"><i class="fa fa-trash"></i></button>
+                          <button type="button" class="btn btn-danger button_delete">
+                            <i class="fa-solid fa-trash"></i>
+                          </button>
                         {% endif %}
                       </td>
                       {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
                         <td width="6%">
                           <button type="button" onclick="show_record_changelog('{{record.name}}','{{record.type}}',event)" class="btn btn-primary">
-                            <i class="fa fa-history" aria-hidden="true"></i>
+                            <i class="fa-solid fa-history" aria-hidden="true"></i>
                           </button>
                         </td>
                       {% endif %}
@@ -171,7 +173,7 @@
                 // hidden column so that we can add new records on top
                 // regardless of whatever sorting is done. See orderFixed
                 visible: false,
-                {% if domain.type != 'Secondary' %}
+                {% if domain.type != 'Slave' %}
                   {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
                     targets: [ 9 ]
                   {% else %}
@@ -186,7 +188,7 @@
                 targets: [ 4, 5 ]
             }
         ],
-        {% if domain.type != 'Secondary' %}
+        {% if domain.type != 'Slave' %}
           {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
             "orderFixed": [[9, 'asc']]
           {% else %}
@@ -229,7 +231,7 @@
         });
     });
     // handle edit button and record click
-    {% if domain.type != 'Secondary' %}
+    {% if domain.type != 'Slave' %}
       $(document.body).on("click", ".button_edit{% if quick_edit %}, .row_record{% endif %}", function(e) {
          e.stopPropagation();
          if ($(this).is('tr')) {
@@ -296,9 +298,9 @@
             // add new row
             var default_type = records_allow_edit[0]
             {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
-          var nRow = jQuery('#tbl_records').dataTable().fnAddData(['', default_type, 'Active', window.ttl_options[0][0], '', '', '', '', '', '0']);
+              var nRow = jQuery('#tbl_records').dataTable().fnAddData(['', default_type, 'Active', window.ttl_options[0][0], '', '', '', '', '', '0']);
             {% else %}
-            var nRow = jQuery('#tbl_records').dataTable().fnAddData(['', default_type, 'Active', window.ttl_options[0][0], '', '', '', '', '0']);
+              var nRow = jQuery('#tbl_records').dataTable().fnAddData(['', default_type, 'Active', window.ttl_options[0][0], '', '', '', '', '0']);
             {% endif %}
             editRow($("#tbl_records").DataTable(), nRow);
             document.getElementById("edit-row-focus").focus();
@@ -563,11 +565,16 @@
         }
     });
     {% endif %}
+
+    window.onload = function() {
+    document.getElementById("loading-spinner").style.display = "none";
+  }
+
 </script>
 {% endblock %}
 
 {% block modals %}
-  <div class="modal fade modal-warning" id="modal_delete">
+  <div class="modal fade" id="modal_delete">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
@@ -580,14 +587,18 @@
           <p></p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-primary pull-left" id="button_delete_cancel" data-dismiss="modal">Close</button>
-          <button type="button" class="btn btn-danger" id="button_delete_confirm">Delete</button>
+          <button type="button" class="btn btn-secondary pull-left" id="button_delete_cancel" data-dismiss="modal">
+            <i class="fa-solid fa-window-close"></i>&nbsp;Close
+          </button>
+          <button type="button" class="btn btn-danger" id="button_delete_confirm">
+            <i class="fa-solid fa-trash"></i>&nbsp;Delete
+          </button>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="modal fade modal-primary" id="modal_apply_changes">
+  <div class="modal fade" id="modal_apply_changes">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
@@ -600,14 +611,18 @@
           <p></p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
-          <button type="button" class="btn btn-success" id="button_apply_confirm">Apply</button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">
+            <i class="fa-solid fa-window-close"></i>&nbsp;Close
+          </button>
+          <button type="button" class="btn btn-success" id="button_apply_confirm">
+            <i class="fa-solid fa-save"></i>&nbsp;Apply Changes
+          </button>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="modal fade modal-primary" id="modal_custom_record">
+  <div class="modal fade bg-primary" id="modal_custom_record">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
@@ -620,7 +635,12 @@
           <p></p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-primary" id="button_save">Save</button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">
+            <i class="fa-solid fa-window-close"></i>&nbsp;Close
+          </button>
+          <button type="button" class="btn btn-success" id="button_save">
+            <i class="fa-solid fa-save"></i>&nbsp;Save
+          </button>
         </div>
       </div>
     </div>
diff --git a/powerdnsadmin/templates/domain_add.html b/powerdnsadmin/templates/domain_add.html
index d736ca8..3f85257 100644
--- a/powerdnsadmin/templates/domain_add.html
+++ b/powerdnsadmin/templates/domain_add.html
@@ -34,8 +34,8 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-4">
-        <div class="card shadow card-outline card-secondary">
-          <div class="card-header with-border">
+        <div class="card">
+          <div class="card-header">
             <h3 class="card-title">Create new domain</h3>
           </div>
           <form role="form" method="post" action="{{ url_for('domain.add') }}">
@@ -118,19 +118,19 @@
               </div>
             </div>
             <div class="card-footer">
-              <button type="submit" class="btn btn-primary">
-                Submit
+              <button type="button" class="btn btn-secondary" onclick="window.location.href='{{ url_for('dashboard.dashboard') }}'">
+                <i class="fa-solid fa-window-close"></i>&nbsp;Cancel
               </button>
-              <button type="button" class="btn btn-default" onclick="window.location.href='{{ url_for('dashboard.dashboard') }}'">
-                Cancel
+              <button type="submit" class="btn btn-primary float-right">
+                <i class="fa-solid fa-save"></i>&nbsp;Create
               </button>
             </div>
           </form>
         </div>
       </div>
       <div class="col-8">
-        <div class="card shadow card-outline card-secondary">
-          <div class="card-header with-border">
+        <div class="card">
+          <div class="card-header">
             <h3 class="card-title">Help with creating a new domain</h3>
           </div>
           <div class="card-body">
@@ -218,18 +218,18 @@
     <div class="modal-dialog">
       <div class="modal-content modal-sm">
         <div class="modal-header alert-danger">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="button_close_warn_modal">
-            <span aria-hidden="true">&times;</span>
-          </button>
           <h4 class="modal-title">
             WARNING
           </h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="button_close_warn_modal">
+            <span aria-hidden="true">&times;</span>
+          </button>
         </div>
         <div class="modal-body">
           <p></p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-flat btn-primary center-block" data-dismiss="modal" id="button_confirm_warn_modal">
+          <button type="button" class="btn btn-primary center-block" data-dismiss="modal" id="button_confirm_warn_modal">
             CLOSE
           </button>
         </div>
diff --git a/powerdnsadmin/templates/domain_changelog.html b/powerdnsadmin/templates/domain_changelog.html
index 056fa28..6fdea69 100644
--- a/powerdnsadmin/templates/domain_changelog.html
+++ b/powerdnsadmin/templates/domain_changelog.html
@@ -39,9 +39,9 @@
       <div class="col-12">
         <div class="card">
           <div class="card-body">
-            <button type="button" class="btn btn-primary pull-left button_show_records" id="{{ domain.name }}">
-              <i class="fas fa-arrow-left"></i>          
-              &nbsp;Manage
+            <button type="button" class="btn btn-primary float-left button_show_records" id="{{ domain.name }}">
+              <i class="fa-solid fa-arrow-left"></i>          
+              &nbsp;Manage Domain {{ domain.name }}
             </button>
           </div>
           <div class="card-body">
diff --git a/powerdnsadmin/templates/domain_remove.html b/powerdnsadmin/templates/domain_remove.html
index 2dccd6f..a2da906 100644
--- a/powerdnsadmin/templates/domain_remove.html
+++ b/powerdnsadmin/templates/domain_remove.html
@@ -34,9 +34,9 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-4">
-        <div class="card shadow card-outline card-secondary">
+        <div class="card">
           <div class="card-header">
-            <h3 class="card-title">Remove domain</h3>
+            <h3 class="card-title">Remove Domain</h3>
           </div>
           <form role="form" method="post" action="{{ url_for('domain.remove') }}">
             <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
@@ -50,23 +50,25 @@
               <br />
             </div>
             <div class="card-footer">
-              <button type="button" class="btn btn-default" onclick="window.location.href='{{ url_for('dashboard.dashboard') }}'">
-                Cancel
+              <button type="button" class="btn btn-secondary" onclick="window.location.href='{{ url_for('dashboard.dashboard') }}'">
+                <i class="fa-solid fa-window-close"></i>&nbsp;Cancel
+              </button>
+              <button type="button" class="btn btn-danger button_delete float-right">
+                <i class="fa-solid fa-trash-alt"></i>&nbsp;Remove
               </button>
-              <button type="button" class="btn btn-danger button_delete float-right">Remove</button>
             </div>
           </form>
         </div>
       </div>
       <div class="col-8">
-        <div class="card shadow card-outline card-secondary">
+        <div class="card">
           <div class="card-header">
-            <h3 class="card-title">Help with removing a new domain</h3>
+            <h3 class="card-title">Help with removing a domain</h3>
           </div>
           <div class="card-body">
             <dl class="dl-horizontal">
-              <dt>Domain name</dt>
-              <dd>Select domain you wish to remove from DNS.</dd>
+              <dt>Domain Name</dt>
+              <dd>Select the domain you wish to remove from the system.</dd>
             </dl>
             <p>Find more details at <a href="https://docs.powerdns.com/md/">https://docs.powerdns.com/md/</a></p>
           </div>
@@ -122,11 +124,11 @@
         <p></p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" id="button_delete_cancel" data-dismiss="modal">
-          Close
+        <button type="button" class="btn btn-secondary" id="button_delete_cancel" data-dismiss="modal">
+          <i class="fa-solid fa-window-close"></i>&nbsp;Cancel
         </button>
         <button type="button" class="btn btn-danger float-right" id="button_delete_confirm">
-          Delete
+          <i class="fa-solid fa-trash-alt"></i>&nbsp;Remove
         </button>
       </div>
     </div>
diff --git a/powerdnsadmin/templates/domain_setting.html b/powerdnsadmin/templates/domain_setting.html
index cc677d4..1d68388 100644
--- a/powerdnsadmin/templates/domain_setting.html
+++ b/powerdnsadmin/templates/domain_setting.html
@@ -83,8 +83,10 @@
                         <div class="card-body">
                             <div class="col-offset-2">
                                 <div class="form-group">
-                                    <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i>
-                                        Save</button>
+                                    <button type="submit" class="btn btn-primary">
+                                      <i class="fa-solid fa-check"></i>
+                                      Save
+                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -114,7 +116,7 @@
                                     {% endfor %}
                                 </select><br />
                                 <button type="submit" class="btn btn-flat btn-primary" id="change_soa_edit_api">
-                                    <i class="fa fa-check"></i>&nbsp;Change account for {{ domain.name | pretty_domain_name }}
+                                    <i class="fa-solid fa-check"></i>&nbsp;Change account for {{ domain.name | pretty_domain_name }}
                                 </button>
                             </form>
                         </div>
@@ -193,7 +195,7 @@
                                 placeholder="Enter valid Primary Server IP addresses (separated by commas)">
                         </div>
                         <button type="submit" class="btn btn-primary" id="change_type">
-                            <i class="fa fa-check"></i>&nbsp;Change type for {{ domain.name | pretty_domain_name }}
+                            <i class="fa-solid fa-check"></i>&nbsp;Change type for {{ domain.name | pretty_domain_name }}
                         </button>
                     </form>
                 </div>
@@ -236,7 +238,7 @@
                             <option>OFF</option>
                         </select><br />
                         <button type="submit" class="btn btn-primary" id="change_soa_edit_api">
-                            <i class="fa fa-check"></i>&nbsp;Change SOA-EDIT-API setting for {{ domain.name | pretty_domain_name }}
+                            <i class="fa-solid fa-check"></i>&nbsp;Change SOA-EDIT-API setting for {{ domain.name | pretty_domain_name }}
                         </button>
                     </form>
                 </div>
@@ -253,9 +255,9 @@
                     <p>This function is used to remove a domain from PowerDNS-Admin <b>AND</b> PowerDNS. All records and
                         user privileges associated with this domain will also be removed. This change cannot be
                         reverted.</p>
-                    <button type="button" class="btn btn-danger pull-left delete_domain"
+                    <button type="button" class="btn btn-danger float-left delete_domain"
                         id="{{ domain.name }}">
-                        <i class="fa fa-trash"></i>&nbsp;DELETE DOMAIN {{ domain.name | pretty_domain_name }}
+                        <i class="fa-solid fa-trash"></i>&nbsp;DELETE DOMAIN {{ domain.name | pretty_domain_name }}
                     </button>
                 </div>
             </div>
@@ -370,26 +372,24 @@
 </script>
 {% endblock %}
 {% block modals %}
-<div class="modal fade modal-warning" id="modal_delete_domain">
+<div class="modal fade" id="modal_delete_domain">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
+              <h4 class="modal-title">Confirmation</h4>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
                 </button>
-                <h4 class="modal-title">Confirmation</h4>
             </div>
             <div class="modal-body">
                 <p></p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-left" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-danger" id="button_delete_confirm">
+                <button type="button" class="btn btn-secondary float-left" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-danger" id="button_delete_confirm">
                     Delete</button>
             </div>
         </div>
-        <!-- /.modal-content -->
     </div>
-    <!-- /.modal-dialog -->
 </div>
 {% endblock %}
diff --git a/powerdnsadmin/templates/login.html b/powerdnsadmin/templates/login.html
index 02f3e41..e84bb8e 100644
--- a/powerdnsadmin/templates/login.html
+++ b/powerdnsadmin/templates/login.html
@@ -8,7 +8,6 @@
     <!-- Tell the browser to be responsive to screen width -->
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <META HTTP-EQUIV="REFRESH" CONTENT="{{ 60 * SETTING.get('session_timeout') }}">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
     {% assets "css_login" -%}
       <link rel="stylesheet" href="{{ ASSET_URL }}">
     {%- endassets %}
@@ -103,25 +102,25 @@
               {% endif %}
               {% if SETTING.get('oidc_oauth_enabled') %}
                 <a href="{{ url_for('index.oidc_login') }}" class="btn btn-block btn-social btn-openid btn-flat">
-                  <i class="fa fa-openid"></i>
+                  <i class="fa-brands fa-openid"></i>
                   Sign in using OpenID Connect
                 </a>
               {% endif %}
               {% if SETTING.get('github_oauth_enabled') %}
                 <a href="{{ url_for('index.github_login') }}" class="btn btn-block btn-social btn-github btn-flat">
-                  <i class="fa fa-github"></i>
+                  <i class="fa-brands fa-github"></i>
                   Sign in using Github
                 </a>
               {% endif %}
               {% if SETTING.get('google_oauth_enabled') %}
                 <a href="{{ url_for('index.google_login') }}" class="btn btn-block btn-social btn-google btn-flat">
-                  <i class="fa fa-google"></i>
+                  <i class="fa-brands fa-google"></i>
                   Sign in using Google
                 </a>
               {% endif %}
               {% if SETTING.get('azure_oauth_enabled') %}
                 <a href="{{ url_for('index.azure_login') }}" class="btn btn-block btn-social btn-microsoft btn-flat">
-                  <i class="fa fa-windows"></i>
+                  <i class="fa-brands fa-windows"></i>
                   Sign in using Microsoft Azure
                 </a>
               {% endif %}
diff --git a/powerdnsadmin/templates/register.html b/powerdnsadmin/templates/register.html
index 9257d75..81c833f 100644
--- a/powerdnsadmin/templates/register.html
+++ b/powerdnsadmin/templates/register.html
@@ -34,11 +34,11 @@
           </div>
           {% endif %}
           <p class="login-box-msg">Enter your personal details below</p>
-          <form action="{{ url_for('index.register') }}" method="post" novalidate>
+          <form action="{{ url_for('index.register') }}" method="post" validator>
             <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
             
             <div class="form-group">
-              <div class="input-group mb-3">
+              <div class="input-group">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <i class="fas fa-user"></i>
@@ -55,7 +55,7 @@
             </div>
 
             <div class="form-group">
-              <div class="input-group mb-3">
+              <div class="input-group">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <i class="fas fa-user"></i>
@@ -72,7 +72,7 @@
             </div>
 
             <div class="form-group">
-              <div class="input-group mb-3">
+              <div class="input-group">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <i class="fas fa-envelope"></i>
@@ -91,7 +91,7 @@
             <p class="login-box-msg">Enter your account details below</p>
 
             <div class="form-group">
-              <div class="input-group mb-3">
+              <div class="input-group">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <i class="fas fa-user"></i>
@@ -108,7 +108,7 @@
             </div>
 
             <div class="form-group">
-              <div class="input-group mb-3">
+              <div class="input-group">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <i class="fas fa-lock"></i>
@@ -125,7 +125,7 @@
             </div>
 
             <div class="form-group">
-              <div class="input-group mb-3">
+              <div class="input-group">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <i class="fas fa-lock"></i>
@@ -145,7 +145,7 @@
             <p class="login-box-msg">Please complete the CAPTCHA below</p>
             <div class="form-group">
               {{ captcha() }}
-              <div class="input-group mb-3">
+              <div class="input-group">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <i class="fas fa-shield-alt"></i>
@@ -164,7 +164,7 @@
           <div class="row">
             <div class="d-flex justify-content-between mx-auto mt-3">
               <button type="button" class="btn btn-secondary" id="button_back">Back</button>
-              <button type="submit" class="btn btn-primary mx-3">Register</button>
+              <button type="submit" class="btn btn-primary btn-block mx-3">Register</button>
             </div>
           </div>
         </form>
diff --git a/powerdnsadmin/templates/register_otp.html b/powerdnsadmin/templates/register_otp.html
index 87ec027..2e84786 100755
--- a/powerdnsadmin/templates/register_otp.html
+++ b/powerdnsadmin/templates/register_otp.html
@@ -69,7 +69,7 @@
           </div>
           <div class="row">
             <div class="col-xs-4">
-              <button type="submit" class="btn btn-flat btn-primary btn-block">Continue</button>
+              <button type="submit" class="btn btn-primary btn-block">Continue</button>
             </div>
           </div>
         </form>
diff --git a/powerdnsadmin/templates/template.html b/powerdnsadmin/templates/template.html
index 08d2d28..165d828 100644
--- a/powerdnsadmin/templates/template.html
+++ b/powerdnsadmin/templates/template.html
@@ -41,7 +41,7 @@
             <div class="alert alert-danger alert-dismissible">
               <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
               <h4>
-                <i class="icon fa fa-ban"></i> Error!
+                <i class="fa-solid fa-ban"></i> Error!
               </h4>
               <div class="alert-message block-message error">
                 <a class="close" href="#">x</a>
@@ -58,12 +58,12 @@
     {% endwith %}
     <div class="row">
       <div class="col-12">
-        <div class="card shadow card-outline card-secondary">
+        <div class="card">
           <div class="card-header">
             <h3 class="card-title">Templates</h3>
             <a href="{{ url_for('admin.create_template') }}">
               <button type="button" class="btn btn-primary float-right">
-                <i class="fa fa-plus"></i>&nbsp;Create Template
+                <i class="fa-solid fa-plus"></i>&nbsp;Create Template
               </button>
             </a>
           </div>
@@ -74,7 +74,7 @@
                   <th>Name</th>
                   <th>Description</th>
                   <th>Number of Records</th>
-                  <th width="20%">Action</th>
+                  <th width="20%">Actions</th>
                 </tr>
               </thead>
               <tbody>
@@ -92,14 +92,22 @@
                       {{ template.records|count }}
                     </td>
                     <td>
-                      <a href="{{ url_for('admin.edit_template', template=template.name) }}">
-                        <button type="button" class="btn btn-warning button_edit" id="btn_edit">
-                          <i class="fa fa-edit"></i>&nbsp;Edit
+                      <div class="dropdown">
+                        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fa-solid fa-bars"></i>&nbsp;Actions
                         </button>
-                      </a>
-                      <button type="button" class="btn btn-danger button_delete" id="{{template.name}}">
-                        <i class="fa fa-trash"></i>&nbsp;Delete
-                      </button>
+                        <div class="dropdown-menu" aria-labelledby="dropdownMenu">
+                          <button type="button" class="dropdown-item btn-warning" onclick="window.location.href='{{ url_for('admin.edit_template', template=template.name) }}'">
+                            <i class="fa-solid fa-edit"></i>&nbsp;Edit Template
+                          </button>
+                          <div class="dropdown-divider"></div>
+                          <button type="button"class="dropdown-item btn-secondary button_delete" id="{{template.name}}">
+                            <font color="red">
+                              <i class="fa-solid fa-trash"></i>&nbsp;Delete Template
+                            </font>
+                          </button>
+                         </div>
+                      </div>
                     </td>
                   </tr>
                 {% endfor %}
diff --git a/powerdnsadmin/templates/template_add.html b/powerdnsadmin/templates/template_add.html
index 8bbedc3..6b06ccf 100644
--- a/powerdnsadmin/templates/template_add.html
+++ b/powerdnsadmin/templates/template_add.html
@@ -39,7 +39,7 @@
             <div class="alert alert-danger alert-dismissible">
               <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
               <h4>
-                <i class="icon fa fa-ban"></i> Error!
+                <i class="fa-solid fa-ban"></i> Error!
               </h4>
               <div class="alert-message block-message error">
                 <a class="close" href="#">x</a>
@@ -55,8 +55,8 @@
     {% endwith %}
     <div class="row">
       <div class="col-4">
-        <div class="card card-primary">
-          <div class="card-header with-border">
+        <div class="card">
+          <div class="card-header">
             <h3 class="card-title">Create new template</h3>
           </div>
           <form role="form" method="post" action="{{ url_for('admin.create_template') }}">
@@ -72,16 +72,19 @@
               </div>
             </div>
             <div class="card-footer">
-              <button type="submit" class="btn btn-primary">Submit</button>
-              <button type="button" class="btn btn-default"
-              onclick="window.location.href='{{ url_for('admin.templates') }}'">Cancel</button>
+              <button type="button" class="btn btn-secondary float-left" onclick="window.location.href='{{ url_for('admin.templates') }}'">
+                Cancel
+              </button>
+              <button type="submit" class="btn btn-primary float-right">
+                <i class="fa-solid fa-save"></i>&nbsp;Save
+              </button>
             </div>
           </form>
         </div>
       </div>
       <div class="col-8">
-        <div class="card card-primary">
-          <div class="card-header with-border">
+        <div class="card">
+          <div class="card-header">
             <h3 class="card-title">Help with creating a new template</h3>
           </div>
           <div class="card-body">
diff --git a/powerdnsadmin/templates/template_edit.html b/powerdnsadmin/templates/template_edit.html
index 2632172..92addf1 100644
--- a/powerdnsadmin/templates/template_edit.html
+++ b/powerdnsadmin/templates/template_edit.html
@@ -39,11 +39,11 @@
                     <h3 class="card-title">Manage Template Records for {{ template }}</h3>
                 </div>
                 <div class="card-body">
-                    <button type="button" class="btn btn-primary pull-left button_add_record" id="{{ template }}">
-                        <i class="fa fa-plus"></i>&nbsp;Add Record
+                    <button type="button" class="btn btn-primary float-left button_add_record" id="{{ template }}">
+                        <i class="fa-solid fa-plus"></i>&nbsp;Add Record
                     </button>
-                    <button type="button" class="btn btn-primary pull-right button_apply_changes" id="{{ template }}">
-                        <i class="fa fa-save"></i>&nbsp;Apply Changes
+                    <button type="button" class="btn btn-primary float-right button_apply_changes" id="{{ template }}">
+                        <i class="fa-solid fa-save"></i>&nbsp;Save Changes
                     </button>
                 </div>
                 <div class="card-body">
@@ -84,12 +84,12 @@
                                     </td>
                                     <td width="6%">
                                          <button type="button" class="btn btn-warning button_edit">
-                                            <i class="fa fa-edit"></i>&nbsp;Edit
+                                            <i class="fa-solid fa-edit"></i>&nbsp;Edit
                                         </button>
                                     </td>
                                     <td width="6%">
                                         <button type="button" class="btn btn-danger button_delete">
-                                            <i class="fa fa-trash"></i>&nbsp;Delete
+                                            <i class="fa-solid fa-trash"></i>&nbsp;Delete
                                         </button>
                                     </td>
                                     <td>
@@ -110,8 +110,8 @@
 {% block extrascripts %}
 <script>
     // superglobals
-    window.records_allow_edit = {{ editable_records|tojson }};
-    window.ttl_options = {{ ttl_options|tojson }};
+    window.records_allow_edit = {{ editable_records | tojson }};
+    window.ttl_options = {{ ttl_options | tojson }};
     window.nEditing = null;
     window.nNew = false;
 
@@ -238,7 +238,7 @@
 
             // add new row
             var default_type = records_allow_edit[0]
-            var nRow = jQuery('#tbl_records').dataTable().fnAddData(['', default_type, 'Active', 3600, '', '', '', '', '0']);
+            var nRow = jQuery('#tbl_records').dataTable().fnAddData(['', default_type, 'Active', window.ttl_options[0][0], '', '', '', '', '0']);
             editRow($("#tbl_records").DataTable(), nRow);
             document.getElementById("edit-row-focus").focus();
             nEditing = nRow;
@@ -430,67 +430,67 @@
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal"
+              <h4 class="modal-title">Confirmation</h4>
+              <button type="button" class="close" data-dismiss="modal"
                     aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
-                <h4 class="modal-title">Confirmation</h4>
             </div>
             <div class="modal-body">
                 <p></p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-left" id="button_delete_cancel"
-                    data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-danger" id="button_delete_confirm">Delete</button>
+                <button type="button" class="btn btn-secondary float-left" id="button_delete_cancel" data-dismiss="modal">
+                  Close
+                </button>
+                <button type="button" class="btn btn-danger" id="button_delete_confirm">
+                  Delete
+                </button>
             </div>
         </div>
-        <!-- /.modal-content -->
     </div>
-    <!-- /.modal-dialog -->
 </div>
 <div class="modal fade modal-primary" id="modal_apply_changes">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal"
+              <h4 class="modal-title">Confirmation</h4>
+              <button type="button" class="close" data-dismiss="modal"
                     aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
-                <h4 class="modal-title">Confirmation</h4>
             </div>
             <div class="modal-body">
                 <p></p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-left"
-                    data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-primary" id="button_apply_confirm">Apply</button>
+                <button type="button" class="btn btn-secondary float-left" data-dismiss="modal">
+                  Close
+                </button>
+                <button type="button" class="btn btn-primary" id="button_apply_confirm">
+                  Apply
+                </button>
             </div>
         </div>
-        <!-- /.modal-content -->
     </div>
-    <!-- /.modal-dialog -->
 </div>
 <div class="modal fade modal-primary" id="modal_custom_record">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal"
+              <h4 class="modal-title">Custom Record</h4>
+              <button type="button" class="close" data-dismiss="modal"
                     aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
-                <h4 class="modal-title">Custom Record</h4>
             </div>
             <div class="modal-body">
                 <p></p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-primary" id="button_save">Save</button>
+                <button type="button" class="btn btn-primary" id="button_save">Save</button>
             </div>
         </div>
-        <!-- /.modal-content -->
     </div>
-    <!-- /.modal-dialog -->
 </div>
 {% endblock %}
diff --git a/powerdnsadmin/templates/user_profile.html b/powerdnsadmin/templates/user_profile.html
index 286760e..b7bf69f 100644
--- a/powerdnsadmin/templates/user_profile.html
+++ b/powerdnsadmin/templates/user_profile.html
@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 
+{% set active_page = "user_profile" %}
+
 {% block title %}
   <title>
     My Profile - {{ SITE_NAME }}
@@ -31,38 +33,39 @@
 <section class="content">
   <div class="container-fluid">
     <div class="row">
-      <div class="col-12">
-        <div class="card card-primary">
-          <div class="card-header with-border">
-            <h3 class="card-title">
-              Edit my profile {%  if session['authentication_type'] != 'LOCAL' %} [Disabled - Authenticated externally]{% endif %}
-            </h3>
-          </div>
-          <div class="card-body">
+      <div class="col-6">
+        <div class="card">
+          <div class="card-header">
             <div class="nav-tabs-custom">
               <ul class="nav nav-tabs" role="tablist">
                 <li class="nav-item">
-                  <a class="nav-link active" href="#tabs-personal" data-toggle="tab">Personal Info</a>
+                  <a class="nav-link active" href="#tabs-personal" data-toggle="tab">
+                    Personal Info
+                  </a>
                 </li>
                 {%  if session['authentication_type'] == 'LOCAL' %}
                   <li class="nav-item">
-                    <a class="nav-link" href="#tabs-password" data-toggle="tab">Change Password</a>
+                    <a class="nav-link" href="#tabs-password" data-toggle="tab">
+                      Change Password
+                    </a>
                   </li>
                 {% endif %}
                 {%  if session['authentication_type'] in ['LOCAL', 'LDAP'] %}
                   <li class="nav-item">
-                    <a class="nav-link" href="#tabs-authentication" data-toggle="tab">Authentication</a>
+                    <a class="nav-link" href="#tabs-authentication" data-toggle="tab">
+                      Authentication
+                    </a>
                   </li>
                 {% endif %}
               </ul>
+              <div class="card-body">
               <div class="tab-content">
                 <div class="tab-pane fade show active" id="tabs-personal">
                   <form role="form" method="post" action="{{ user_profile }}">
                     <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                     <div class="form-group">
                       <label for="firstname">First Name</label>
-                      <input type="text" class="form-control" name="firstname" id="firstname"
-                      placeholder="{{ current_user.firstname }}"
+                      <input type="text" class="form-control" name="firstname" id="firstname" placeholder="{{ current_user.firstname }}"
                       {%  if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
                     </div>
                     <div class="form-group">
@@ -71,12 +74,14 @@
                       {%  if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
                     </div>
                     <div class="form-group">
-                      <label for="email">E-mail</label> <input type="email" class="form-control" name="email" id="email" placeholder="{{ current_user.email }}"
+                      <label for="email">E-Mail</label> <input type="email" class="form-control" name="email" id="email" placeholder="{{ current_user.email }}"
                       {%  if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
                     </div>
                     {%  if session['authentication_type'] == 'LOCAL' %}
                       <div class="form-group">
-                        <button type="submit" class="btn btn-primary">Submit</button>
+                        <button type="submit" class="btn btn-primary">
+                          <i class="fa-solid fa-floppy-disk"></i>&nbsp;Save
+                        </button>
                       </div>
                     {% endif %}
                   </form>
@@ -89,14 +94,17 @@
                       <form action="{{ user_profile }}" method="post">
                         <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                         <div class="form-group">
-                          <label for="password">New Password</label> <input type="password" class="form-control" name="password" id="newpassword">
+                          <label for="password">New Password</label>
+                          <input type="password" class="form-control" name="password" id="newpassword">
                         </div>
                         <div class="form-group">
                           <label for="rpassword">Re-type New Password</label>
                           <input type="password" class="form-control" name="rpassword" id="rpassword">
                         </div>
                         <div class="form-group">
-                          <button type="submit" class="btn btn-primary">Change Password</button>
+                          <button type="submit" class="btn btn-primary">
+                            <i class="fa-solid fa-floppy-disk"></i>&nbsp;Save
+                          </button>
                         </div>
                       </form>
                     {% endif %}
@@ -118,17 +126,19 @@
                             <br />
                               <form>
                                 <input type=text id="otp_secret" value={{current_user.otp_secret}} readonly>
-                                <button type=button style="position:relative; right:28px" onclick="copy_otp_secret_to_clipboard()"> <i class="fa fa-clipboard"></i> </button>
+                                <button type=button style="position:relative; right:28px" onclick="copy_otp_secret_to_clipboard()">
+                                  <i class="fa-solid fa-clipboard"></i>
+                                </button>
                                 <br />
                                 <font color="red" id="copy_tooltip" style="visibility:collapse">Copied.</font>
                               </form>
                           </div>
                           You can use Google Authenticator 
-                          (<a target="_blank" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a>
-                          - <a target="_blank" href="https://apps.apple.com/us/app/google-authenticator/id388497605">iOS</a>)
+                          (<a target="_blank" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"><i class="fa-brands fa-google-play"></i>Android</a>
+                          - <a target="_blank" href="https://apps.apple.com/us/app/google-authenticator/id388497605"><i class="fa-brands fa-app-store-ios"></i>iOS</a>)
                            or FreeOTP 
-                           (<a target="_blank" href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en">Android</a>
-                           - <a target="_blank" href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8">iOS</a>) 
+                           (<a target="_blank" href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en"><i class="fa-brands fa-google-play"></i>Android</a>
+                           - <a target="_blank" href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8"><i class="fa-brands fa-app-store-ios"></i>iOS</a>) 
                            on your smartphone to scan the QR code.
                            <br />
                           <font color="red">
@@ -153,19 +163,7 @@
 </section>
 {% endblock %}
 {% block extrascripts %}
-<!-- TODO: add password and password confirmation comparison check -->
 <script>
-    $(function () {
-        $('#tabs').tabs({
-            // add url anchor tags
-            activate: function (event, ui) {
-                window.location.hash = ui.newPanel.attr('id');
-            }
-        });
-        // re-set active tab (ui)
-        var activeTabIdx = $('#tabs').tabs('option', 'active');
-        $('#tabs li:eq(' + activeTabIdx + ')').tab('show')
-    });
 
     // initialize pretty checkboxes
     $('.otp_toggle').iCheck({
@@ -174,16 +172,19 @@
     });
 
     // handle checkbox toggling
-    $('.otp_toggle').on('ifToggled', function (event) {
-        var enable_otp = $(this).prop('checked');
-        var postdata = {
-            'action': 'enable_otp',
-            'data': {
-                'enable_otp': enable_otp
-            },
-            '_csrf_token': '{{ csrf_token() }}'
-        };
-        applyChanges(postdata, $SCRIPT_ROOT + '/user/profile', false, true);
+    $('.otp_toggle').on('ifToggled', function(event) {
+    var enable_otp = $(this).prop('checked');
+    var postdata = {
+        'action': 'enable_otp',
+        'data': {
+            'enable_otp': enable_otp
+        },
+        '_csrf_token': '{{ csrf_token() }}'
+    };
+    applyChanges(postdata, $SCRIPT_ROOT + '/user/profile', false, true, function() {
+        window.location.reload();
+        $('#tabs li:eq(2) a').tab('show');
     });
+  });
 </script>
 {% endblock %}