diff --git a/powerdnsadmin/routes/index.py b/powerdnsadmin/routes/index.py
index 98664d6..cd93181 100644
--- a/powerdnsadmin/routes/index.py
+++ b/powerdnsadmin/routes/index.py
@@ -400,7 +400,7 @@ def login():
             desc_prop = Setting().get('oidc_oauth_account_description_property')
 
             account_to_add = []
-	    #If the name_property and desc_property exist in me (A variable that contains all the userinfo from the IdP).
+      #If the name_property and desc_property exist in me (A variable that contains all the userinfo from the IdP).
             if name_prop in me and desc_prop in me:
                 accounts_name_prop = [me[name_prop]] if type(me[name_prop]) is not list else me[name_prop]
                 accounts_desc_prop = [me[desc_prop]] if type(me[desc_prop]) is not list else me[desc_prop]
@@ -415,7 +415,7 @@ def login():
                     account_to_add.append(account)
                 user_accounts = user.get_accounts()
 
-		# Add accounts
+    # Add accounts
                 for account in account_to_add:
                     if account not in user_accounts:
                         account.add_user(user)
@@ -651,55 +651,73 @@ def logout():
 
 @index_bp.route('/register', methods=['GET', 'POST'])
 def register():
-    CAPTCHA_ENABLE = current_app.config.get('CAPTCHA_ENABLE')
-    if Setting().get('signup_enabled'):
-        if request.method == 'GET':
-            return render_template('register.html', captcha_enable=CAPTCHA_ENABLE)
-        elif request.method == 'POST':
-            username = request.form.get('username', '').strip()
-            password = request.form.get('password', '')
-            firstname = request.form.get('firstname', '').strip()
-            lastname = request.form.get('lastname', '').strip()
-            email = request.form.get('email', '').strip()
-            rpassword = request.form.get('rpassword', '')
+  CAPTCHA_ENABLE = current_app.config.get('CAPTCHA_ENABLE')
+  if Setting().get('signup_enabled'):
+    if current_user.is_authenticated:
+      return redirect(url_for('index.index'))
+    if request.method == 'GET':
+      return render_template('register.html', captcha_enable=CAPTCHA_ENABLE)
+    elif request.method == 'POST':
+      username = request.form.get('username', '').strip()
+      password = request.form.get('password', '')
+      firstname = request.form.get('firstname', '').strip()
+      lastname = request.form.get('lastname', '').strip()
+      email = request.form.get('email', '').strip()
+      rpassword = request.form.get('rpassword', '')
 
-            if not username or not password or not email:
-                return render_template(
-                    'register.html', error='Please input required information', captcha_enable=CAPTCHA_ENABLE)
+      is_valid_email = re.compile(r'[\w\.-]+@[\w\.-]+')
 
-            if password != rpassword:
-                return render_template(
-                    'register.html',
-                    error="Password confirmation does not match", captcha_enable=CAPTCHA_ENABLE)
+      error_messages = {}
+      if not firstname:
+        error_messages['firstname'] = 'First Name is required'
+      if not lastname:
+        error_messages['lastname'] = 'Last Name is required'
+      if not username:
+        error_messages['username'] = 'Username is required'
+      if not password:
+        error_messages['password'] = 'Password is required'
+      if not rpassword:
+        error_messages['rpassword'] = 'Password confirmation is required'
+      if not email:
+        error_messages['email'] = 'Email is required'
+      if not is_valid_email.match(email):
+        error_messages['email'] = 'Invalid email address'
+      if password != rpassword:
+        error_messages['password'] = 'Password confirmation does not match'
+        error_messages['rpassword'] = 'Password confirmation does not match'
 
-            if not captcha.validate():
-                return render_template(
-                    'register.html', error='Invalid CAPTCHA answer', captcha_enable=CAPTCHA_ENABLE)
+      if not captcha.validate():
+        return render_template(
+          'register.html', error='Invalid CAPTCHA answer', error_messages=error_messages, captcha_enable=CAPTCHA_ENABLE)
 
-            user = User(username=username,
-                        plain_text_password=password,
-                        firstname=firstname,
-                        lastname=lastname,
-                        email=email)
+      if error_messages:
+        return render_template('register.html', error_messages=error_messages, captcha_enable=CAPTCHA_ENABLE)
 
-            try:
-                result = user.create_local_user()
-                if result and result['status']:
-                    if Setting().get('verify_user_email'):
-                        send_account_verification(email)
-                    if Setting().get('otp_force') and Setting().get('otp_field_enabled'):
-                        user.update_profile(enable_otp=True)
-                        prepare_welcome_user(user.id)
-                        return redirect(url_for('index.welcome'))
-                    else:
-                        return redirect(url_for('index.login'))
-                else:
-                    return render_template('register.html',
-                                           error=result['msg'], captcha_enable=CAPTCHA_ENABLE)
-            except Exception as e:
-                return render_template('register.html', error=e, captcha_enable=CAPTCHA_ENABLE)
+      user = User(username=username,
+        plain_text_password=password,
+        firstname=firstname,
+        lastname=lastname,
+        email=email
+      )
+
+      try:
+        result = user.create_local_user()
+        if result and result['status']:
+          if Setting().get('verify_user_email'):
+            send_account_verification(email)
+          if Setting().get('otp_force') and Setting().get('otp_field_enabled'):
+            user.update_profile(enable_otp=True)
+            prepare_welcome_user(user.id)
+            return redirect(url_for('index.welcome'))
+          else:
+            return redirect(url_for('index.login'))
+        else:
+          return render_template('register.html',
+            error=result['msg'], captcha_enable=CAPTCHA_ENABLE)
+      except Exception as e:
+        return render_template('register.html', error=e, captcha_enable=CAPTCHA_ENABLE)
     else:
-        return render_template('errors/404.html'), 404
+      return render_template('errors/404.html'), 404
 
 
 # Show welcome page on first login if otp_force is enabled
diff --git a/powerdnsadmin/templates/admin_edit_account.html b/powerdnsadmin/templates/admin_edit_account.html
index 0fc0b30..62ccf26 100644
--- a/powerdnsadmin/templates/admin_edit_account.html
+++ b/powerdnsadmin/templates/admin_edit_account.html
@@ -1,9 +1,14 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_accounts" %}
-{% block title %}<title>Edit Account - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+<title>
+  Edit Account - {{ SITE_NAME }}
+</title>
+{% endblock %}
 
 {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
   <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
@@ -30,7 +35,7 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-4">
-        <div class="card card-primary">
+        <div class="card shadow">
           <div class="card-header with-border">
             <h3 class="card-title">{% if create %}Add{% else %}Edit{% endif %} account</h3>
           </div>
@@ -107,8 +112,8 @@
           </form>
         </div>
       </div>
-      <div class="col-6">
-        <div class="card card-primary">
+      <div class="col-8">
+        <div class="card shadow">
           <div class="card-header with-border">
             <h3 class="card-title">Help with creating a new account</h3>
           </div>
diff --git a/powerdnsadmin/templates/admin_edit_key.html b/powerdnsadmin/templates/admin_edit_key.html
index a0e7a88..1d8e696 100644
--- a/powerdnsadmin/templates/admin_edit_key.html
+++ b/powerdnsadmin/templates/admin_edit_key.html
@@ -1,12 +1,17 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_keys" %}
+
 {% if (key is not none and key.role.name != "User") %}{% set hide_opts = True %}{%else %}{% set hide_opts = False %}{% endif %}
+
 {% block title %}
-<title>Edit Key - {{ SITE_NAME }}</title>
+  <title>
+    Edit Key - {{ SITE_NAME }}
+  </title>
 {% endblock %}
+
 {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
-<div class="content-header">
+  <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
         <div class="col-sm-6">
@@ -25,61 +30,59 @@
       </div>
     </div>
   </div>
-
 {% endblock %}
 
 {% block content %}
 <section class="content">
+  <div class="container-fluid">
   <div class="row">
     <div class="col-4">
-            <div class="card card-primary">
-                <div class="card-header with-border">
-                    <h3 class="card-title">{% if create %}Add{% else %}Edit{% endif %} Key</h3>
-                </div>
-                <!-- /.box-header -->
-                <!-- form start -->
-                <form role="form" method="post"
-                    action="{% if create %}{{ url_for('admin.edit_key') }}{% else %}{{ url_for('admin.edit_key', key_id=key.id) }}{% endif %}">
-                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-                    <input type="hidden" name="create" value="{{ create }}">
-                    <div class="card-body">
-                        <div class="form-group has-feedback">
-                            <label class="control-label" for="role">Role</label>
-                            <select class="key_role form-control" id="key_role" name="key_role">
-                                {% for role in roles %}
-                                <option value="{{ role.name }}"
-                                {% if (key is not none) and (role.id==key.role.id) %}selected{% endif %}
-                                {% if (key is none) and (role.name=="User") %}selected{% endif %}
-                                >{{ role.name }}</option>
-                                {% endfor %}
-                            </select>
-                        </div>
-                        <div class="form-group has-feedback">
-                            <label class="control-label" for="description">Description</label>
-                            <input type="text" class="form-control" placeholder="Description" name="description"
-                                {% if key is not none %} value="{{ key.description }}" {% endif %}> <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 %}>
-                      <h3 class="card-title">Accounts Access Control</h3>
-                    </div>
-                    <div class="card-body key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
-                      <p>This key will be linked to the accounts on the right,</p>
-                      <p>thus granting access to domains owned by the selected accounts.</p>
-                      <p>Click on accounts to move between the columns.</p>
-                      <div class="form-group col-2">
-                          <select multiple="multiple" class="form-control" id="key_multi_account"
-                              name="key_multi_account">
-                              {% for account in accounts %}
-                                  <option {% if key and account in key.accounts %}selected{% endif %} value="{{ account.name }}">{{ account.name }}</option>
-                              {% endfor %}
-                          </select>
-                      </div>
-                    </div>
-                    <div class="card-header with-border key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
-                        <h3 class="card-title">Domain Access Control</h3>
-                    </div>
+      <div class="card card-primary">
+        <div class="card-header with-border">
+          <h3 class="card-title">{% if create %}Add{% else %}Edit{% endif %} Key</h3>
+        </div>
+        <form role="form" method="post"
+        action="{% if create %}{{ url_for('admin.edit_key') }}{% else %}{{ url_for('admin.edit_key', key_id=key.id) }}{% endif %}">
+          <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+          <input type="hidden" name="create" value="{{ create }}">
+          <div class="card-body">
+            <div class="form-group has-feedback">
+              <label class="control-label" for="role">Role</label>
+              <select class="key_role form-control" id="key_role" name="key_role">
+                {% for role in roles %}
+                  <option value="{{ role.name }}"
+                  {% if (key is not none) and (role.id==key.role.id) %}selected{% endif %}
+                  {% if (key is none) and (role.name=="User") %}selected{% endif %}>
+                    {{ role.name }}
+                  </option>
+                {% endfor %}
+              </select>
+            </div>
+            <div class="form-group has-feedback">
+              <label class="control-label" for="description">Description</label>
+                <input type="text" class="form-control" placeholder="Description" name="description"
+                {% if key is not none %} value="{{ key.description }}" {% endif %}>
+                <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 %}>
+              <h3 class="card-title">Accounts Access Control</h3>
+            </div>
+            <div class="card-body key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
+              <p>This key will be linked to the accounts on the right,</p>
+              <p>thus granting access to domains owned by the selected accounts.</p>
+              <p>Click on accounts to move between the columns.</p>
+              <div class="form-group col-2">
+                <select multiple="multiple" class="form-control" id="key_multi_account" name="key_multi_account">
+                  {% for account in accounts %}
+                    <option {% if key and account in key.accounts %}selected{% endif %} value="{{ account.name }}">{{ account.name }}</option>
+                  {% endfor %}
+                </select>
+              </div>
+            </div>
+            <div class="card-header with-border 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 %}>
                         <p>This key will have acess to the domains on the right.</p>
                         <p>Click on domains to move between the columns.</p>
@@ -115,8 +118,10 @@
             </div>
         </div>
     </div>
+    </div>
 </section>
 {% endblock %}
+
 {% block extrascripts %}
 <script>
     $('form').submit(function (e) {
diff --git a/powerdnsadmin/templates/admin_global_search.html b/powerdnsadmin/templates/admin_global_search.html
index 815230c..4161ad3 100644
--- a/powerdnsadmin/templates/admin_global_search.html
+++ b/powerdnsadmin/templates/admin_global_search.html
@@ -1,210 +1,201 @@
 {% extends "base.html" %}
-{% set active_page = "admin_global_search" %}
-{% block title %}
-<title>Global Search - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
-<section class="content-header">
-    <h1>
-        Global Search <small>Search for domains, records and comments directly from PDNS API</small>
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li class="active">Global Search</li>
-    </ol>
-</section>
 
-<div class="content-header">
+{% set active_page = "admin_global_search" %}
+
+{% block title %}
+  <title>
+    Global Search - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
+  <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
         <div class="col-sm-6">
           <h1 class="m-0 text-dark">
-            Dashboard
-            <small>Control panel</small>
+            Global Search
+            <small>Search for domains, records and comments directly from PDNS API</small>
           </h1>
         </div>
         <div class="col-sm-6">
           <ol class="breadcrumb float-sm-right">
-            <li class="breadcrumb-item"><a href="#">Home</a></li>
-            <li class="breadcrumb-item active">Dashboard v1</li>
+            <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
+            <li class="breadcrumb-item active">Global Search</li>
           </ol>
         </div>
       </div>
     </div>
   </div>
-
-{% endblock %} {% block content %}
-<section class="content">
-    <div class="row">
-        <div class="col-xs-12">
-            <div class="box-body">
-                <!-- search form -->
-                <form action="" method="get">
-                    <div class="input-group">
-                        <input type="text" name="q" class="form-control" placeholder="Your keyword...">
-                        <div class="input-group-btn">
-                            <button type="submit" class="btn btn-success"><i class="fa fa-search"></i></button>
-                        </div>
-                    </div>
-                </form>
-                <div>
-                    <p><b>Hints:</b> The * character can be used in your keyword as a wildcard character and the ? character can be used as
-                        a wildcard for a
-                        single character.</p>
-                </div>
-                <!-- /.search form -->
-            </div>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Domains ({{ domains|length }})</h3>
-                </div>
-                <div class="box-body">
-                    <table id="tbl_domain" class="table table-bordered table-striped">
-                        <thead>
-                            <tr>
-                                <th>Domain</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for domain in domains %}
-                            <tr class="odd gradeX">
-                                <td>
-                                    <a href="{{ url_for('domain.domain', domain_name=domain['name']) }}">{{ domain['name'] }}</a>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-                <!-- /.box-body -->
-            </div>
-            <!-- /.box -->
-        </div>
-        <!-- /.col -->
-    </div>
-
-    <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Records ({{ records|length }})</h3>
-                </div>
-                <div class="box-body">
-                    <table id="tbl_record" class="table table-bordered table-striped">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Status</th>
-                                <th>TTL</th>
-                                <th>Data</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for record in records %}
-                            <tr class="odd gradeX">
-                                <td>
-                                    <a href="{{ url_for('domain.domain', domain_name=record['zone_id']) }}">{{ record['name'] }}</a>
-                                </td>
-                                <td>{{ record['type'] }}</td>
-                                <td>{{ 'Disabled' if record['disabled'] else 'Active' }}</td>
-                                <td>{{ record['ttl'] }}</td>
-                                <td>{{ record['content'] }}</td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-                <!-- /.box-body -->
-            </div>
-            <!-- /.box -->
-        </div>
-        <!-- /.col -->
-    </div>
-
-    <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Comments ({{ comments|length }})</h3>
-                </div>
-                <div class="box-body">
-                    <table id="tbl_comment" class="table table-bordered table-striped">
-                        <thead>
-                            <tr>
-                                <th>Comment</th>
-                                <th>Record</th>
-                                <th>Domain</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for comment in comments %}
-                            <tr class="odd gradeX">
-                                <td>{{ comment['content'] }}</td>
-                                <td>{{ comment['name'] }}</td>
-                                <td>
-                                    <a href="{{ url_for('domain.domain', domain_name=comment['zone_id']) }}">{{ comment['zone_id'] }}</a>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-                <!-- /.box-body -->
-            </div>
-            <!-- /.box -->
-        </div>
-        <!-- /.col -->
-    </div>
-</section>
 {% endblock %}
+
+{% block content %}
+  <section class="content">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card shadow">
+            <div class="card-header">
+              <h3 class="card-title">Global Search</h3>
+            </div>
+            <div class="card-body">
+              <form action="" method="get">
+                <div class="input-group">
+                  <input type="text" name="q" class="form-control" placeholder="Your keyword...">
+                  <div class="input-group-btn">
+                    <button type="submit" class="btn btn-success"><i class="fa fa-search"></i></button>
+                  </div>
+                </div>
+              </form>
+              <div>
+                <p><b>Hints:</b> The * character can be used in your keyword as a wildcard character and the ? character can be used as
+                  a wildcard for a
+                  single character.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12">
+          <div class="card shadow">
+            <div class="card-header">
+              <h3 class="card-title">Domains ({{ domains|length }})</h3>
+            </div>
+            <div class="card-body">
+              <table id="tbl_domain" class="table table-bordered table-striped">
+                <thead>
+                  <tr>
+                    <th>Domain</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for domain in domains %}
+                    <tr class="odd gradeX">
+                      <td>
+                        <a href="{{ url_for('domain.domain', domain_name=domain['name']) }}">{{ domain['name'] }}</a>
+                      </td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12">
+          <div class="card shadow">
+            <div class="card-header">
+              <h3 class="card-title">Records ({{ records|length }})</h3>
+            </div>
+            <div class="card-body">
+              <table id="tbl_record" class="table table-bordered table-striped">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th>Status</th>
+                    <th>TTL</th>
+                    <th>Data</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for record in records %}
+                    <tr class="odd gradeX">
+                      <td>
+                        <a href="{{ url_for('domain.domain', domain_name=record['zone_id']) }}">{{ record['name'] }}</a>
+                      </td>
+                      <td>{{ record['type'] }}</td>
+                      <td>{{ 'Disabled' if record['disabled'] else 'Active' }}</td>
+                      <td>{{ record['ttl'] }}</td>
+                      <td>{{ record['content'] }}</td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12">
+          <div class="card shadow">
+            <div class="card-header">
+              <h3 class="card-title">Comments ({{ comments|length }})</h3>
+            </div>
+            <div class="card-body">
+              <table id="tbl_comment" class="table table-bordered table-striped">
+                <thead>
+                  <tr>
+                    <th>Comment</th>
+                    <th>Record</th>
+                    <th>Domain</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for comment in comments %}
+                    <tr class="odd gradeX">
+                      <td>{{ comment['content'] }}</td>
+                      <td>{{ comment['name'] }}</td>
+                      <td>
+                        <a href="{{ url_for('domain.domain', domain_name=comment['zone_id']) }}">{{ comment['zone_id'] }}</a>
+                      </td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+{% endblock %}
+
 {% block extrascripts %}
-<script>
+  <script>
     // set up domain result data table
     $("#tbl_domain").DataTable({
-        "paging": false,
-        "lengthChange": false,
-        "searching": false,
-        "ordering": true,
-        "info": false,
-        "autoWidth": false,
-        "order": [
-            [0, "asc"]
-        ]
+      "paging": false,
+      "lengthChange": false,
+      "searching": false,
+      "ordering": true,
+      "info": false,
+      "autoWidth": false,
+      "order": [
+        [0, "asc"]
+      ]
     });
-</script>
 
-<script>
     // set up domain result data table
     $("#tbl_record").DataTable({
-        "paging": false,
-        "lengthChange": false,
-        "searching": false,
-        "ordering": true,
-        "info": false,
-        "autoWidth": false,
-        "order": [
-            [0, "asc"]
-        ]
+      "paging": false,
+      "lengthChange": false,
+      "searching": false,
+      "ordering": true,
+      "info": false,
+      "autoWidth": false,
+      "order": [
+        [0, "asc"]
+      ]
     });
-</script>
 
-<script>
     // set up domain result data table
     $("#tbl_comment").DataTable({
-        "paging": false,
-        "lengthChange": false,
-        "searching": false,
-        "ordering": true,
-        "info": false,
-        "autoWidth": false,
-        "order": [
-            [0, "asc"]
-        ]
+      "paging": false,
+      "lengthChange": false,
+      "searching": false,
+      "ordering": true,
+      "info": false,
+      "autoWidth": false,
+      "order": [
+        [0, "asc"]
+      ]
     });
-</script>
+  </script>
 {% endblock %}
diff --git a/powerdnsadmin/templates/admin_history.html b/powerdnsadmin/templates/admin_history.html
index 5b96c09..21c2758 100644
--- a/powerdnsadmin/templates/admin_history.html
+++ b/powerdnsadmin/templates/admin_history.html
@@ -1,11 +1,15 @@
 {% extends "base.html" %}
-{% set active_page = "admin_history" %}
-{% block title %}
-<title>History - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
 
-<div class="content-header">
+{% set active_page = "admin_history" %}
+
+{% block title %}
+  <title>
+    History - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
+  <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
         <div class="col-sm-6">
@@ -23,17 +27,14 @@
       </div>
     </div>
   </div>
-
 {% endblock %} 
+
 {% block content %}
 {% import 'applied_change_macro.html' as applied_change_macro %}
-
-
-
 <section class="content">
   <div class="container-fluid">
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-12">
         <div class="card card-outline card-secondary">
           <div class="card-header with-border">
             <h3 class="card-title">History Management</h3>
diff --git a/powerdnsadmin/templates/admin_history_table.html b/powerdnsadmin/templates/admin_history_table.html
index 537ba2a..146e7db 100644
--- a/powerdnsadmin/templates/admin_history_table.html
+++ b/powerdnsadmin/templates/admin_history_table.html
@@ -6,7 +6,7 @@
   </p>
 {% endif %}
 
-<div class="box-body"></div>
+<div class="card-body"></div>
   <table id="tbl_history" class="table table-bordered table-striped">
     <thead>
       <tr>
diff --git a/powerdnsadmin/templates/admin_manage_account.html b/powerdnsadmin/templates/admin_manage_account.html
index e56705c..f0c79cc 100644
--- a/powerdnsadmin/templates/admin_manage_account.html
+++ b/powerdnsadmin/templates/admin_manage_account.html
@@ -1,9 +1,15 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_accounts" %}
+
 {% block title %}
-<title>Account Management - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<div class="content-header">
+  <title>
+    Account Management - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
+  <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
         <div class="col-sm-6">
@@ -21,12 +27,13 @@
       </div>
     </div>
   </div>
+{% endblock %}
 
-{% endblock %} {% block content %}
+{% block content %}
 <section class="content">
   <div class="container-fluid">
     <div class="row">
-      <div class="col-xs-12 col-md-12">
+      <div class="col-12">
         <div class="card card-primary">
           <div class="card-header with-border">
             <h3 class="card-title">Account Management</h3>
@@ -133,8 +140,8 @@
                 <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">Delete</button>
+                <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>
             </div>
         </div>
         <!-- /.modal-content -->
diff --git a/powerdnsadmin/templates/admin_manage_keys.html b/powerdnsadmin/templates/admin_manage_keys.html
index 9f2c682..e303cd6 100644
--- a/powerdnsadmin/templates/admin_manage_keys.html
+++ b/powerdnsadmin/templates/admin_manage_keys.html
@@ -1,9 +1,15 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_keys" %}
+
 {% block title %}
-<title>Key Management - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<div class="content-header">
+  <title>
+    Key Management - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
+  <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
         <div class="col-sm-6">
@@ -21,7 +27,9 @@
       </div>
     </div>
   </div>
-{% endblock %} {% block content %}
+{% endblock %}
+
+{% block content %}
 <section class="content">
   <div class="container-fluid">
     <div class="card">
@@ -74,63 +82,62 @@
   </div>
 </section>
 {% endblock %}
+
 {% block extrascripts %}
-<script>
+  <script>
     // set up key data table
     $("#tbl_keys").DataTable({
-        "paging": true,
-        "lengthChange": true,
-        "searching": true,
-        "ordering": true,
-        "info": false,
-        "autoWidth": false,
-        "lengthMenu": [
-            [10, 25, 50, 100, -1],
-            [10, 25, 50, 100, "All"]
-        ],
-        "pageLength": 10
+      "paging": true,
+      "lengthChange": true,
+      "searching": true,
+      "ordering": true,
+      "info": false,
+      "autoWidth": false,
+      "lengthMenu": [
+        [10, 25, 50, 100, -1],
+        [10, 25, 50, 100, "All"]
+      ],
+      "pageLength": 10
     });
 
     // handle deletion of keys
     $(document.body).on('click', '.button_delete', function () {
-        var modal = $("#modal_delete");
-        var key_id = $(this).prop('id');
-        var info = "Are you sure you want to delete key #" + key_id + "?";
-        modal.find('.modal-body p').text(info);
-        modal.find('#button_delete_confirm').click(function () {
-            var postdata = {
-                'action': 'delete_key',
-                'data': key_id,
-                '_csrf_token': '{{ csrf_token() }}'
-            }
-            applyChanges(postdata, $SCRIPT_ROOT + '/admin/manage-keys', false, true);
-            modal.modal('hide');
-        })
-        modal.modal('show');
-
+      var modal = $("#modal_delete");
+      var key_id = $(this).prop('id');
+      var info = "Are you sure you want to delete key #" + key_id + "?";
+      modal.find('.modal-body p').text(info);
+      modal.find('#button_delete_confirm').click(function () {
+        var postdata = {
+          'action': 'delete_key',
+          'data': key_id,
+          '_csrf_token': '{{ csrf_token() }}'
+        }
+        applyChanges(postdata, $SCRIPT_ROOT + '/admin/manage-keys', false, true);
+        modal.modal('hide');
+      })
+      modal.modal('show');
     });
-</script>
+  </script>
 {% endblock %}
+
 {% block modals %}
-<div class="modal fade modal-warning" id="modal_delete">
+  <div class="modal fade modal-warning" 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">
-                    <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">Delete</button>
-            </div>
+      <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">Confirmation</h4>
         </div>
-        <!-- /.modal-content -->
+        <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>
+        </div>
+      </div>
     </div>
-    <!-- /.modal-dialog -->
-</div>
+  </div>
 {% endblock %}
diff --git a/powerdnsadmin/templates/admin_manage_user.html b/powerdnsadmin/templates/admin_manage_user.html
index 94c6aaf..154acac 100644
--- a/powerdnsadmin/templates/admin_manage_user.html
+++ b/powerdnsadmin/templates/admin_manage_user.html
@@ -1,9 +1,15 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_users" %}
+
 {% block title %}
-<title>User Management - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<div class="content-header">
+  <title>
+    User Management - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
+  <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
         <div class="col-sm-6">
@@ -21,196 +27,195 @@
       </div>
     </div>
   </div>
-{% endblock %} {% block content %}
-<section class="content">
-  <div class="container-fluid">
-    <div class="row">
-        <div class="col-sm-12">
-            <div class="card">
-                <div class="card-header with-border">
-                    <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-flat btn-primary pull-left button_add_user">
-                            Add User&nbsp;<i class="fa fa-plus"></i>
-                        </button>
-                    </a>
-                </div>
-                <div class="card-body">
-                    <table id="tbl_users" class="table table-bordered table-striped">
-                        <thead>
-                            <tr>
-                                <th>Username</th>
-                                <th>First Name</th>
-                                <th>Last Name</th>
-                                <th>Email</th>
-                                <th>Role</th>
-                                <th>Privileges</th>
-                                <th>Action</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for user in users %}
-                            <tr class="odd gradeX">
-                                <td>{{ user.username }}</td>
-                                <td>{{ user.firstname }}</td>
-                                <td>{{ user.lastname }}</td>
-                                <td>{{ user.email }}</td>
-                                <td>
-                                    <select id="{{ user.username }}" class="user_role"
-                                        {% if user.username==current_user.username or (current_user.role.name=='Operator' and user.role.name=='Administrator') %}disabled{% endif %}>
-                                        {% for role in roles %}
-                                        <option value="{{ role.name }}"
-                                            {% if role.id==user.role.id %}selected{% endif %}>{{ role.name }}</option>
-                                        {% endfor %}
-                                    </select>
-                                </td>
-                                <td width="6%">
-                                    <button type="button" class="btn btn-flat btn-warning button_revoke"
-                                        id="{{ user.username }}"
-                                        {% if current_user.role.name=='Operator' and user.role.name=='Administrator' %}disabled{% endif %}>
-                                        Revoke&nbsp;<i class="fa fa-lock"></i>
-                                    </button>
-                                </td>
-                                <td width="15%">
-                                    <button type="button" class="btn btn-flat btn-success button_edit"
-                                        onclick="window.location.href='{{ url_for('admin.edit_user', user_username=user.username) }}'"
-                                        {% if current_user.role.name=='Operator' and user.role.name=='Administrator' %}disabled{% endif %}>
-                                        Edit&nbsp;<i class="fa fa-lock"></i>
-                                    </button>
-                                    <button type="button" class="btn btn-flat 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 %}>
-                                        Delete&nbsp;<i class="fa fa-trash"></i>
-                                    </button>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-                <!-- /.box-body -->
-            </div>
-            <!-- /.box -->
-        </div>
-        <!-- /.col -->
-    </div>
-    <!-- /.row -->
-    </div>
-</section>
 {% endblock %}
+
+{% block content %}
+  <section class="content">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header with-border">
+              <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>
+              </a>
+            </div>
+            <div class="card-body">
+              <table id="tbl_users" class="table table-bordered table-striped">
+                <thead>
+                  <tr>
+                    <th>Username</th>
+                    <th>First Name</th>
+                    <th>Last Name</th>
+                    <th>Email</th>
+                    <th>Role</th>
+                    <th>Privileges</th>
+                    <th>Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for user in users %}
+                    <tr class="odd gradeX">
+                      <td>{{ user.username }}</td>
+                      <td>{{ user.firstname }}</td>
+                      <td>{{ user.lastname }}</td>
+                      <td>{{ user.email }}</td>
+                      <td>
+                        <select id="{{ user.username }}" class="user_role"
+                          {% if user.username==current_user.username or (current_user.role.name=='Operator' and user.role.name=='Administrator') %}disabled{% endif %}>
+                          {% for role in roles %}
+                            <option value="{{ role.name }}"
+                              {% if role.id==user.role.id %}selected{% endif %}>
+                                {{ role.name }}
+                            </option>
+                          {% endfor %}
+                        </select>
+                      </td>
+                      <td width="6%">
+                        <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
+                        </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) }}'"
+                          {% 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>
+                      </td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+{% endblock %}
+
 {% block extrascripts %}
-<script>
+  <script>
     // set up user data table
     $("#tbl_users").DataTable({
-        "paging": true,
-        "lengthChange": true,
-        "searching": true,
-        "ordering": true,
-        "info": false,
-        "autoWidth": false,
-        "lengthMenu": [
-            [10, 25, 50, 100, -1],
-            [10, 25, 50, 100, "All"]
-        ],
-        "pageLength": 10
+      "paging": true,
+      "lengthChange": true,
+      "searching": true,
+      "ordering": true,
+      "info": false,
+      "autoWidth": false,
+      "lengthMenu": [
+        [10, 25, 50, 100, -1],
+        [10, 25, 50, 100, "All"]
+      ],
+      "pageLength": 10
     });
 
     // handle revocation of privileges
     $(document.body).on('click', '.button_revoke', function () {
-        var modal = $("#modal_revoke");
-        var username = $(this).prop('id');
-        var info = "Are you sure you want to revoke all privileges for " + username +
-            ". They will not able to access any domain.";
-        modal.find('.modal-body p').text(info);
-        modal.find('#button_revoke_confirm').click(function () {
-            var postdata = {
-                'action': 'revoke_user_privileges',
-                'data': username,
-                '_csrf_token': '{{ csrf_token() }}'
-            }
-            applyChanges(postdata, $SCRIPT_ROOT + '/admin/manage-user', true);
-            modal.modal('hide');
-        })
-        modal.modal('show');
+      var modal = $("#modal_revoke");
+      var username = $(this).prop('id');
+      var info = "Are you sure you want to revoke all privileges for user " + username +
+        "? They will not able to access any domain.";
+      modal.find('.modal-body p').text(info);
+      modal.find('#button_revoke_confirm').click(function () {
+        var postdata = {
+          'action': 'revoke_user_privileges',
+          'data': username,
+          '_csrf_token': '{{ csrf_token() }}'
+        }
+        applyChanges(postdata, $SCRIPT_ROOT + '/admin/manage-user', true);
+        modal.modal('hide');
+      })
+      modal.modal('show');
     });
+
     // handle deletion of user
     $(document.body).on('click', '.button_delete', function () {
-        var modal = $("#modal_delete");
-        var username = $(this).prop('id');
-        var info = "Are you sure you want to delete " + username + "?";
-        modal.find('.modal-body p').text(info);
-        modal.find('#button_delete_confirm').click(function () {
-            var postdata = {
-                'action': 'delete_user',
-                'data': username,
-                '_csrf_token': '{{ csrf_token() }}'
-            }
-            applyChanges(postdata, $SCRIPT_ROOT + '/admin/manage-user', false, true);
-            modal.modal('hide');
-        })
-        modal.modal('show');
-
+      var modal = $("#modal_delete");
+      var username = $(this).prop('id');
+      var info = "Are you sure you want to delete user " + username + "?";
+      modal.find('.modal-body p').text(info);
+      modal.find('#button_delete_confirm').click(function () {
+        var postdata = {
+          'action': 'delete_user',
+          'data': username,
+          '_csrf_token': '{{ csrf_token() }}'
+        }
+        applyChanges(postdata, $SCRIPT_ROOT + '/admin/manage-user', false, true);
+        modal.modal('hide');
+      })
+      modal.modal('show');
     });
 
     // handle user role changing
     $(document.body).on('change', '.user_role', function () {
-        var role_name = this.value;
-        var username = $(this).prop('id');
-        var postdata = {
-            'action': 'update_user_role',
-            'data': {
-                'username': username,
-                'role_name': role_name
-            },
-            '_csrf_token': '{{ csrf_token() }}'
-        };
-        applyChanges(postdata, $SCRIPT_ROOT + '/admin/manage-user', showResult = true);
+      var role_name = this.value;
+      var username = $(this).prop('id');
+      var postdata = {
+        'action': 'update_user_role',
+        'data': {
+          'username': username,
+          'role_name': role_name
+        },
+        '_csrf_token': '{{ csrf_token() }}'
+      };
+      applyChanges(postdata, $SCRIPT_ROOT + '/admin/manage-user', showResult = true);
     });
-</script>
+  </script>
 {% endblock %}
+
 {% block modals %}
-<div class="modal fade modal-warning" id="modal_revoke">
+  <div class="modal fade modal-warning" id="modal_revoke">
     <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">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_revoke_confirm">Revoke</button>
-            </div>
+      <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>
         </div>
-        <!-- /.modal-content -->
+        <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-danger" id="button_revoke_confirm">Revoke</button>
+        </div>
+      </div>
     </div>
-    <!-- /.modal-dialog -->
-</div>
-<div class="modal fade modal-warning" id="modal_delete">
+  </div>
+
+  <div class="modal fade modal-warning" 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">
-                    <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">Delete</button>
-            </div>
+      <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>
         </div>
-        <!-- /.modal-content -->
+        <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-danger" id="button_delete_confirm">Delete</button>
+        </div>
+      </div>
     </div>
-    <!-- /.modal-dialog -->
-</div>
+  </div>
 {% endblock %}
diff --git a/powerdnsadmin/templates/admin_pdns_stats.html b/powerdnsadmin/templates/admin_pdns_stats.html
index 84a1ec6..bc49831 100644
--- a/powerdnsadmin/templates/admin_pdns_stats.html
+++ b/powerdnsadmin/templates/admin_pdns_stats.html
@@ -1,136 +1,127 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_console" %}
-{% block title %}<title>Admin Console - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    Admin Console - {{ SITE_NAME }}
+  </title>
+{% endblock %}
 
 {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
-<section class="content-header">
-    <h1>
-        PowerDNS server configuration & statistics
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li class="active">Admin Console</li>
-    </ol>
-</section>
-
-<div class="content-header">
+  <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
         <div class="col-sm-6">
           <h1 class="m-0 text-dark">
-            Dashboard
-            <small>Control panel</small>
+            PowerDNS
+            <small>Server Statistics & Configuration</small>
           </h1>
         </div>
         <div class="col-sm-6">
           <ol class="breadcrumb float-sm-right">
-            <li class="breadcrumb-item"><a href="#">Home</a></li>
-            <li class="breadcrumb-item active">Dashboard v1</li>
+            <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
+            <li class="breadcrumb-item active">PowerDNS Server Statistics & Configuration</li>
           </ol>
         </div>
       </div>
     </div>
   </div>
-
 {% endblock %}
 
 {% block content %}
-<section class="content">
-    <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">PDNS Statistics</h3>
-                </div>
-                <div class="box-body">
-                    <table id="tbl_statistics" class="table table-bordered table-striped">
-                        <thead>
-                            <tr>
-                                <th width="6%">Docs</th>
-                                <th>Statistic</th>
-                                <th>Value</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for statistic in statistics %}
-                            <tr class="odd gradeX">
-                                <td><a href="https://doc.powerdns.com/authoritative/search.html?q={{ statistic['name'] }}"
-                                        target="_blank" class="btn btn-flat btn-xs blue"><i
-                                            class="fa fa-search"></i></a></td>
-                                <td>{{ statistic['name'] }}</td>
-                                <td>{{ statistic['value'] }}</td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-                <!-- /.box-body -->
+  <section class="content">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h3 class="card-title">PowerDNS Server Statistics</h3>
             </div>
-            <!-- /.box -->
-        </div>
-        <!-- /.col -->
-    </div>
-    <!-- /.row -->
-    <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">PDNS Configuration</h3>
-                </div>
-                <div class="box-body">
-                    <table id="tbl_configuration" class="table table-bordered table-striped">
-                        <thead>
-                            <tr>
-                                <th width="6%">Docs</th>
-                                <th>Statistic</th>
-                                <th>Value</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for config in configs %}
-                            <tr class="odd gradeX">
-                                <td><a href="https://doc.powerdns.com/authoritative/search.html?q={{ config['name'] }}"
-                                        target="_blank" class="btn btn-flat btn-xs blue"><i
-                                            class="fa fa-search"></i></a></td>
-                                <td>{{ config['name'] }}</td>
-                                <td>
-                                    {{ config['value'] }}
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-                <!-- /.box-body -->
+            <div class="card-body">
+              <table id="tbl_statistics" class="table table-bordered table-striped">
+                <thead>
+                  <tr>
+                    <th width="30%">Statistic</th>
+                    <th>Value</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for statistic in statistics %}
+                    <tr class="odd gradeX">
+                      <td>
+                        <a href="https://doc.powerdns.com/authoritative/search.html?q={{ statistic['name'] }}"
+                        target="_blank" class="btn btn-primary">
+                          <i class="fa fa-search"></i>&nbsp;{{ statistic['name'] }}
+                        </a>
+                      </td>
+                      <td>{{ statistic['value'] }}</td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
             </div>
-            <!-- /.box -->
+          </div>
         </div>
-        <!-- /.col -->
+      </div>
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h3 class="card-title">PowerDNS Server Configuration</h3>
+            </div>
+            <div class="card-body">
+              <table id="tbl_configuration" class="table table-bordered table-striped">
+                <thead>
+                  <tr>
+                    <th width="30%">Configuration</th>
+                    <th>Value</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for config in configs %}
+                    <tr class="odd gradeX">
+                      <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'] }}
+                        </a>
+                      </td>
+                      <td>
+                        {{ config['value'] }}
+                      </td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    <!-- /.row -->
-</section>
+  </section>
 {% endblock %}
+
 {% block extrascripts %}
 <script>
-    // set up statistics data table
-    $("#tbl_statistics").DataTable({
-        "paging": true,
-        "lengthChange": false,
-        "searching": true,
-        "ordering": true,
-        "info": true,
-        "autoWidth": false
-    });
+  // set up statistics data table
+  $("#tbl_statistics").DataTable({
+    "paging": true,
+    "lengthChange": true,
+    "searching": true,
+    "ordering": true,
+    "info": true,
+    "autoWidth": false
+  });
 
-    // set up configuration data table
-    $("#tbl_configuration").DataTable({
-        "paging": true,
-        "lengthChange": false,
-        "searching": true,
-        "ordering": true,
-        "info": true,
-        "autoWidth": false
-    });
+  // set up configuration data table
+  $("#tbl_configuration").DataTable({
+    "paging": true,
+    "lengthChange": true,
+    "searching": true,
+    "ordering": true,
+    "info": true,
+    "autoWidth": false
+  });
 </script>
 {% endblock %}
diff --git a/powerdnsadmin/templates/admin_setting_basic.html b/powerdnsadmin/templates/admin_setting_basic.html
index 3df8fc0..dcfb298 100644
--- a/powerdnsadmin/templates/admin_setting_basic.html
+++ b/powerdnsadmin/templates/admin_setting_basic.html
@@ -1,9 +1,14 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_settings" %}
+
 {% block title %}
-<title>Basic Settings - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
+  <title>
+    Basic Settings - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
   <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
@@ -22,8 +27,9 @@
       </div>
     </div>
   </div>
+{% endblock %}
 
-{% endblock %} {% block content %}
+{% block content %}
 <section class="content">
   <div class="container-fluid">
     <div class="card">
@@ -34,9 +40,9 @@
         <table id="tbl_settings" class="table table-bordered table-striped">
           <thead>
             <tr>
-              <th>Name</th>
-              <th>Value</th>
-              <th>Change</th>
+              <th>Setting Name</th>
+              <th>Current Value</th>
+              <th>Action</th>
             </tr>
           </thead>
           <tbody>
@@ -45,12 +51,18 @@
                 <td>
                   {{ setting }}
                 </td>
-                {% if SETTING.get(setting) in [True, False] %}
+                {% if SETTING.get(setting) in [False] %}
                   <td>{{ SETTING.get(setting)|display_setting_state }}</td>
                   <td width="6%">
-                    <button type="button" class="btn btn-warning setting-toggle-button" id="{{ setting }}">
-                      Toggle
-                      <i class="fa fa-info"></i>
+                    <button type="button" class="btn btn-success setting-toggle-button" id="{{ setting }}">
+                      <i class="fas fa-toggle-on"></i>&nbsp;Turn On
+                    </button>
+                  </td>
+                {% elif SETTING.get(setting) in [True] %}
+                  <td>{{ SETTING.get(setting)|display_setting_state }}</td>
+                  <td width="6%">
+                    <button type="button" class="btn btn-danger setting-toggle-button" id="{{ setting }}">
+                      <i class="fas fa-toggle-off"></i>&nbsp;Turn Off
                     </button>
                   </td>
                 {% else %}
@@ -58,9 +70,8 @@
                     <input name="value" id="value" value="{{ SETTING.get(setting) }}">
                   </td>
                   <td width="6%">
-                    <button type="button" class="btn btn-warning setting-save-button" id="{{ setting }}">
-                      Save
-                      <i class="fa fa-info"></i>
+                    <button type="button" class="btn btn-primary setting-save-button" id="{{ setting }}">
+                      <i class="fas fa-save"></i>&nbsp;Save
                     </button>
                   </td>
                 {% endif %}
@@ -73,32 +84,33 @@
   </div>
 </section>
 {% endblock %}
+
 {% block extrascripts %}
-<script>
+  <script>
     // set up history data table
     $("#tbl_settings").DataTable({
-        "paging": false,
-        "lengthChange": false,
-        "searching": true,
-        "ordering": true,
-        "info": true,
-        "autoWidth": false
+      "paging": false,
+      "lengthChange": false,
+      "searching": true,
+      "ordering": true,
+      "info": true,
+      "autoWidth": false
     });
     $(document.body).on('click', '.setting-toggle-button', function () {
-        var setting = $(this).prop('id');
-        applyChanges({
-            '_csrf_token': '{{ csrf_token() }}'
-        }, $SCRIPT_ROOT + '/admin/setting/basic/' + setting + '/toggle', false, true)
+      var setting = $(this).prop('id');
+      applyChanges({
+        '_csrf_token': '{{ csrf_token() }}'
+      }, $SCRIPT_ROOT + '/admin/setting/basic/' + setting + '/toggle', false, true)
     });
 
     $(document.body).on('click', '.setting-save-button', function () {
-        var setting = $(this).prop('id');
-        var value = $(this).parents('tr').find('#value')[0].value;
-        var postdata = {
-            'value': value,
-            '_csrf_token': '{{ csrf_token() }}'
-        };
-        applyChanges(postdata, $SCRIPT_ROOT + '/admin/setting/basic/' + setting + '/edit', false, true)
+      var setting = $(this).prop('id');
+      var value = $(this).parents('tr').find('#value')[0].value;
+      var postdata = {
+        'value': value,
+        '_csrf_token': '{{ csrf_token() }}'
+      };
+      applyChanges(postdata, $SCRIPT_ROOT + '/admin/setting/basic/' + setting + '/edit', false, true)
     });
-</script>
-{% endblock %}
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/powerdnsadmin/templates/admin_setting_pdns.html b/powerdnsadmin/templates/admin_setting_pdns.html
index 08b42f1..2b1f7ef 100644
--- a/powerdnsadmin/templates/admin_setting_pdns.html
+++ b/powerdnsadmin/templates/admin_setting_pdns.html
@@ -1,93 +1,108 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_settings" %}
+
 {% block title %}
-<title>PDNS Settings - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
-<div class="content-header">
-    <h1>
-        Settings <small>PowerDNS-Admin settings</small>
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li><a href="#">Setting</a></li>
-        <li class="active">PDNS</li>
-    </ol>
-</div>
+  <title>
+    PDNS Settings - {{ SITE_NAME }}
+  </title>
 {% endblock %}
-{% block content %}
-<section class="content">
-    <div class="row">
-        <div class="col-md-4">
-            <div class="box box-primary">
-                <div class="box-header with-border">
-                    <h3 class="box-title">PDNS Settings</h3>
-                </div>
-                <!-- /.box-header -->
-                <!-- form start -->
-                <form role="form" method="post" data-toggle="validator">
-                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-                    <div class="box-body">
-                        {% if not SETTING.get('pdns_api_url') or not SETTING.get('pdns_api_key') or not SETTING.get('pdns_version') %}
-                        <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>
-                            Please complete your PowerDNS API configuration before continuing
-                        </div>
-                        {% endif %}
-                        <div class="form-group has-feedback">
-                            <label class="control-label" for="pdns_api_url">PDNS API URL</label>
-                            <input type="url" class="form-control" placeholder="PowerDNS API url" name="pdns_api_url"
-                                data-error="Please input a valid PowerDNS API URL" required value="{{ pdns_api_url }}">
-                            <span class="help-block with-errors"></span>
-                        </div>
-                        <div class="form-group has-feedback">
-                            <label class="control-label" for="pdns_api_key">PDNS API KEY</label>
-                            <input type="password" class="form-control" placeholder="PowerDNS API key"
-                                name="pdns_api_key" data-error="Please input a valid PowerDNS API key" required
-                                value="{{ pdns_api_key }}">
-                            <span class="help-block with-errors"></span>
-                        </div>
-                        <div class="form-group has-feedback">
-                            <label class="control-label" for="pdns_version">PDNS VERSION</label>
-                            <input type="text" class="form-control" placeholder="PowerDNS version" name="pdns_version"
-                                data-error="Please input PowerDNS version" required value="{{ pdns_version }}">
-                            <span class="help-block with-errors"></span>
-                        </div>
-                    </div>
-                    <div class="box-footer">
-                        <button type="submit" class="btn btn-flat btn-primary">Update</button>
-                    </div>
-                </form>
-            </div>
+
+{% block dashboard_stat %}
+  <div class="content-header">
+    <div class="container-fluid">
+      <div class="row mb-2">
+        <div class="col-sm-6">
+          <h1 class="m-0 text-dark">
+            Settings
+            <small>PowerDNS Authoritative Server</small>
+          </h1>
         </div>
-        <div class="col-md-8">
-            <div class="box box-primary">
-                <div class="box-header with-border">
-                    <h3 class="box-title">Help</h3>
-                </div>
-                <div class="box-body">
-                    <dl class="dl-horizontal">
-                        <p>You must configure the API connection information before PowerDNS-Admin can query your
-                            PowerDNS data. Following fields are required:</p>
-                        <dt>PDNS API URL</dt>
-                        <dd>Your PowerDNS API URL (eg. http://127.0.0.1:8081/).</dd>
-                        <dt>PDNS API KEY</dt>
-                        <dd>Your PowerDNS API key.</dd>
-                        <dt>PDNS VERSION</dt>
-                        <dd>Your PowerDNS version number (eg. 4.1.1).</dd>
-                    </dl>
-                    <p>Find more details at <a
-                            href="https://doc.powerdns.com/md/httpapi/README/">https://doc.powerdns.com/md/httpapi/README/</a>
-                    </p>
-                </div>
-            </div>
+        <div class="col-sm-6">
+          <ol class="breadcrumb float-sm-right">
+            <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
+            <li class="breadcrumb-item active">Settings - PowerDNS Authoritative Server</li>
+          </ol>
         </div>
+      </div>
     </div>
-</section>
+  </div>
 {% endblock %}
+
+{% block content %}
+  <section class="content">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-4">
+          <div class="card card-primary">
+            <div class="card-header with-border">
+              <h3 class="card-title">PDNS Settings</h3>
+            </div>
+            <form role="form" method="post" data-toggle="validator">
+              <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+              <div class="card-body">
+                {% if not SETTING.get('pdns_api_url') or not SETTING.get('pdns_api_key') or not SETTING.get('pdns_version') %}
+                  <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>
+                    Please complete your PowerDNS API configuration before continuing
+                  </div>
+                {% endif %}
+                <div class="form-group has-feedback">
+                  <label class="control-label" for="pdns_api_url">PowerDNS API URL</label>
+                  <input type="url" class="form-control" placeholder="PowerDNS API URL" name="pdns_api_url"
+                  data-error="Please input a valid PowerDNS API URL" required value="{{ pdns_api_url }}">
+                  <span class="help-block with-errors"></span>
+                </div>
+                <div class="form-group has-feedback">
+                  <label class="control-label" for="pdns_api_key">PowerDNS API Key</label>
+                  <input type="password" class="form-control" placeholder="PowerDNS API Key"
+                  name="pdns_api_key" data-error="Please input a valid PowerDNS API key" required
+                  value="{{ pdns_api_key }}">
+                  <span class="help-block with-errors"></span>
+                </div>
+                <div class="form-group has-feedback">
+                  <label class="control-label" for="pdns_version">PowerDNS Version</label>
+                  <input type="text" class="form-control" placeholder="PowerDNS Version" name="pdns_version"
+                  data-error="Please input PowerDNS version" required value="{{ pdns_version }}">
+                  <span class="help-block with-errors"></span>
+                </div>
+              </div>
+              <div class="card-footer">
+                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i>&nbsp;Update</button>
+              </div>
+            </form>
+          </div>
+        </div>
+        <div class="col-8">
+          <div class="card card-primary">
+            <div class="card-header with-border">
+              <h3 class="card-title">Help</h3>
+            </div>
+            <div class="card-body">
+              <dl class="dl-horizontal">
+                <p>You must configure the API connection information before PowerDNS-Admin can query your
+                  PowerDNS data. Following fields are required:</p>
+                <dt>PowerDNS API URL</dt>
+                <dd>Your PowerDNS API URL (eg. http://127.0.0.1:8081/).</dd>
+                <dt>PowerDNS API Key</dt>
+                <dd>Your PowerDNS API key.</dd>
+                <dt>PowerDNS Version</dt>
+                <dd>Your PowerDNS version number (eg. 4.1.1).</dd>
+              </dl>
+              <p>Find more details at
+                <a href="https://doc.powerdns.com/md/httpapi/README/">https://doc.powerdns.com/md/httpapi/README/</a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+{% endblock %}
+
 {% block extrascripts %}
-{% assets "js_validation" -%}
-<script type="text/javascript" src="{{ ASSET_URL }}"></script>
-{%- endassets %}
+  {% assets "js_validation" -%}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+  {%- endassets %}
 {% endblock %}
diff --git a/powerdnsadmin/templates/admin_setting_records.html b/powerdnsadmin/templates/admin_setting_records.html
index b4c920b..0803e41 100644
--- a/powerdnsadmin/templates/admin_setting_records.html
+++ b/powerdnsadmin/templates/admin_setting_records.html
@@ -1,83 +1,99 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_settings" %}
+
 {% block title %}
-<title>DNS Records Settings - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
-<section class="content-header">
-    <h1>
-        Settings <small>PowerDNS-Admin settings</small>
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li><a href="#">Setting</a></li>
-        <li class="active">Records</li>
-    </ol>
-</section>
+  <title>
+    DNS Records Settings - {{ SITE_NAME }}
+  </title>
 {% endblock %}
+
+{% block dashboard_stat %}
+  <div class="content-header">
+    <div class="container-fluid">
+      <div class="row mb-2">
+        <div class="col-sm-6">
+          <h1 class="m-0 text-dark">
+            Settings
+            <small>Records</small>
+          </h1>
+        </div>
+        <div class="col-sm-6">
+          <ol class="breadcrumb float-sm-right">
+            <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
+            <li class="breadcrumb-item active">Settings - Records </li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}
+
 {% block content %}
 <section class="content">
+  <div class="container-fluid">
     <div class="row">
-        <div class="col-md-5">
-            <div class="box box-primary">
-                <div class="box-header with-border">
-                    <h3 class="box-title">DNS record Settings</h3>
-                </div>
-                <!-- /.box-header -->
-                <!-- form start -->
-                <form role="form" method="post">
-                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-                    <input type="hidden" name="create" value="{{ create }}">
-                    <div class="box-body">
-                        <table class="table table-bordered">
-                            <tr>
-                                <th style="width: 10px">#</th>
-                                <th style="width: 40px">Record</th>
-                                <th>Forward Zone</th>
-                                <th>Reverse Zone</th>
-                            </tr>
-                            {% for record in f_records %}
-                            <tr>
-                                <td>{{ loop.index }}</td>
-                                <td>{{ record }}</td>
-                                <td>
-                                    <input type="checkbox" id="fr_{{ record|lower }}" name="fr_{{ record|lower }}"
-                                        class="checkbox" {% if f_records[record] %}checked{% endif %}>
-                                </td>
-                                <td>
-                                    <input type="checkbox" id="rr_{{ record|lower }}" name="rr_{{ record|lower }}"
-                                        class="checkbox" {% if r_records[record] %}checked{% endif %}>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </table>
-                    </div>
-                    <div class="box-footer">
-                        <button type="submit" class="btn btn-flat btn-primary">Update</button>
-                    </div>
-                </form>
+      <div class="col-5">
+        <div class="card card-primary">
+          <div class="card-header with-border">
+            <h3 class="card-title">DNS record Settings</h3>
+          </div>
+          <form role="form" method="post">
+            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+            <input type="hidden" name="create" value="{{ create }}">
+            <div class="card-body">
+              <table class="table table-bordered">
+                <tr>
+                  <th style="width: 10px">#</th>
+                  <th style="width: 40px">Record</th>
+                  <th>Forward Zone</th>
+                  <th>Reverse Zone</th>
+                </tr>
+                {% for record in f_records %}
+                  <tr>
+                    <td>{{ loop.index }}</td>
+                    <td>{{ record }}</td>
+                    <td>
+                      <input type="checkbox" id="fr_{{ record|lower }}" name="fr_{{ record|lower }}"
+                      class="checkbox" {% if f_records[record] %}checked{% endif %}>
+                    </td>
+                    <td>
+                      <input type="checkbox" id="rr_{{ record|lower }}" name="rr_{{ record|lower }}"
+                      class="checkbox" {% if r_records[record] %}checked{% endif %}>
+                    </td>
+                  </tr>
+                {% endfor %}
+              </table>
             </div>
-        </div>
-        <div class="col-md-7">
-            <div class="box box-primary">
-                <div class="box-header with-border">
-                    <h3 class="box-title">Help</h3>
-                </div>
-                <div class="box-body">
-                    <p>Select record types you allow user to edit in the forward zone and reverse zone. Take a look at
-                        <a href="https://doc.powerdns.com/authoritative/appendices/types.html">PowerDNS docs</a> for
-                        full list of supported record types.</p>
-                </div>
+            <div class="card-footer">
+              <button type="submit" class="btn btn-flat btn-primary">Update</button>
             </div>
+          </form>
         </div>
+      </div>
+      <div class="col-7">
+        <div class="card card-primary">
+          <div class="card-header with-border">
+            <h3 class="card-title">Help</h3>
+          </div>
+          <div class="card-body">
+            <p>Select record types you allow user to edit in the forward zone and reverse zone. Take a look at
+              <a href="https://doc.powerdns.com/authoritative/appendices/types.html">PowerDNS docs</a> for
+              full list of supported record types.
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </section>
 {% endblock %}
+
 {% block extrascripts %}
-<script>
+  <script>
     $('.checkbox').iCheck({
-        checkboxClass: 'icheckbox_square-blue',
-        increaseArea: '20%'
+      checkboxClass: 'icheckbox_square-blue',
+      increaseArea: '20%'
     })
-</script>
+  </script>
 {% endblock %}
diff --git a/powerdnsadmin/templates/base.html b/powerdnsadmin/templates/base.html
index 6c4a81a..49e4d30 100644
--- a/powerdnsadmin/templates/base.html
+++ b/powerdnsadmin/templates/base.html
@@ -137,7 +137,7 @@
         <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>
-            <p>PDNS</p>
+            <p>PowerDNS Info</p>
           </a>
         </li>
         <li class="{{ 'nav-item active' if active_page == 'admin_global_search' else 'nav-item' }}">
@@ -201,7 +201,7 @@
               <li class="nav-item">
                 <a href="{{ url_for('admin.setting_pdns') }}" class="nav-link">
                   <i class="nav-icon far fa-circle"></i>
-                  <p>PDNS</p>
+                  <p>PowerDNS Connection</p>
                 </a>
               </li>
               <li class="nav-item">
diff --git a/powerdnsadmin/templates/dashboard.html b/powerdnsadmin/templates/dashboard.html
index aca87ad..888d05d 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">
+            <div class="card shadow card-outline card-secondary">
               <div class="card-header">
                 <h3 class="card-title">Statistics</h3>
               </div>
@@ -104,7 +104,7 @@
             </div>
           </div>
           <div class="col-9">
-            <div class="card">
+            <div class="card shadow card-outline card-secondary">
               <div class="card-header">
                 <h3 class="card-title">Recent History</h3>
               </div>
@@ -151,35 +151,34 @@
           </div>
         </div>
       {% endif %}
-      <!--SYBPATCH START-->
-      <row>
-        <div class="nav-tabs-custom">
-          <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist">
-            <li class="nav-link">
-              <a 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-link" >
-                <a 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" id='tab_{{boxId}}'>
-                <div class="row">
-                  <div class="col-12">
-                    <div class="card">
+      <div class="row">
+        <div class="col-12">
+          <div class="card shadow card-outline card-secondary">
+            <div class="card-header">
+              <div class="nav-tabs-custom">
+                <ul class="nav nav-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>
+                  {% endfor %}
+                </ul>
+                <div class="tab-content">
+                  {% for boxId in custom_boxes.order %}
+                    <div class="tab-pane" 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 %}
+                        <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">
@@ -191,23 +190,22 @@
                               <th>Serial</th>
                               <th>Master</th>
                               <th>Account</th>
-                              <th>Action</th>
+                              <th>Actions</th>
                             </tr>
                           </thead>
                           <tbody>
                           </tbody>
                         </table>
                       </div>
-                  </div>
-                </div>
+                    </div>
+                  {% endfor %}
                 </div>
               </div>
-            {% endfor %}
-          </div><!-- /.tab-content -->
-        </div><!-- custom tabs -->
-        <!--SYBPATCH END-->
-      </row>
-  </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </section>
 {% endblock %}
 
@@ -217,7 +215,7 @@
     function setUpDomainList(id ,url){
         $(id).DataTable({
             "paging" : true,
-            "lengthChange" : false,
+            "lengthChange" : true,
             language: {
                 searchPlaceholder: "Use ^ and $ for start and end",
             },
diff --git a/powerdnsadmin/templates/domain_add.html b/powerdnsadmin/templates/domain_add.html
index d5003bc..2e233d3 100644
--- a/powerdnsadmin/templates/domain_add.html
+++ b/powerdnsadmin/templates/domain_add.html
@@ -33,8 +33,8 @@
 <section class="content">
   <div class="container-fluid">
     <div class="row">
-      <div class="col-md-4">
-        <div class="card card-outline card-secondary">
+      <div class="col-4">
+        <div class="card shadow card-outline card-secondary">
           <div class="card-header with-border">
             <h3 class="card-title">Create new domain</h3>
           </div>
@@ -128,8 +128,8 @@
           </form>
         </div>
       </div>
-      <div class="col-md-8">
-        <div class="card card-outline card-secondary">
+      <div class="col-8">
+        <div class="card shadow card-outline card-secondary">
           <div class="card-header with-border">
             <h3 class="card-title">Help with creating a new domain</h3>
           </div>
diff --git a/powerdnsadmin/templates/domain_changelog.html b/powerdnsadmin/templates/domain_changelog.html
index 27b5bc4..056fa28 100644
--- a/powerdnsadmin/templates/domain_changelog.html
+++ b/powerdnsadmin/templates/domain_changelog.html
@@ -1,5 +1,10 @@
 {% extends "base.html" %}
-{% block title %}<title>{{ domain.name | pretty_domain_name }} - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    {{ domain.name | pretty_domain_name }} - {{ SITE_NAME }}
+  </title>
+{% endblock %}
 
 {% block dashboard_stat %}
 <div class="content-header">
@@ -31,7 +36,7 @@
 <section class="content">
   <div class="container-fluid">
     <div class="row">
-      <div class="col-xs-12">
+      <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 }}">
diff --git a/powerdnsadmin/templates/domain_remove.html b/powerdnsadmin/templates/domain_remove.html
index 5c20f13..2dccd6f 100644
--- a/powerdnsadmin/templates/domain_remove.html
+++ b/powerdnsadmin/templates/domain_remove.html
@@ -33,9 +33,9 @@
 <section class="content">
   <div class="container-fluid">
     <div class="row">
-      <div class="col-md-4">
-        <div class="card card-outline card-secondary">
-          <div class="card-header with-border">
+      <div class="col-4">
+        <div class="card shadow card-outline card-secondary">
+          <div class="card-header">
             <h3 class="card-title">Remove domain</h3>
           </div>
           <form role="form" method="post" action="{{ url_for('domain.remove') }}">
@@ -58,9 +58,9 @@
           </form>
         </div>
       </div>
-      <div class="col-md-8">
-        <div class="card card-outline card-secondary">
-          <div class="card-header with-border">
+      <div class="col-8">
+        <div class="card shadow card-outline card-secondary">
+          <div class="card-header">
             <h3 class="card-title">Help with removing a new domain</h3>
           </div>
           <div class="card-body">
diff --git a/powerdnsadmin/templates/domain_setting.html b/powerdnsadmin/templates/domain_setting.html
index 91358c8..21d49b6 100644
--- a/powerdnsadmin/templates/domain_setting.html
+++ b/powerdnsadmin/templates/domain_setting.html
@@ -1,7 +1,13 @@
 {% extends "base.html" %}
-{% block title %}<title>Domain Management - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    Domain Management - {{ SITE_NAME }}
+  </title>
+{% endblock %}
 
 {% block dashboard_stat %}
+
 {% if status %}
 {% if status.get('status') == 'ok' %}
 <div class="alert alert-success">
@@ -31,7 +37,7 @@
 {% block content %}
 <section class="content">
     <div class="row">
-        <div class="col-xs-12">
+        <div class="col-12">
             <div class="box">
                 <form method="post" action="{{ url_for('domain.setting', domain_name=domain.name) }}">
                     <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
diff --git a/powerdnsadmin/templates/register.html b/powerdnsadmin/templates/register.html
index e5001b4..631d54b 100644
--- a/powerdnsadmin/templates/register.html
+++ b/powerdnsadmin/templates/register.html
@@ -28,98 +28,121 @@
         </div>
         <div class="card-body">
           {% if error %}
-            <div class="alert alert-danger alert-dismissible">
-              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-              {{ error }}
-            </div>
+          <div class="alert alert-danger alert-dismissible">
+            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+            {{ error }}
+          </div>
           {% endif %}
           <p class="login-box-msg">Enter your personal details below</p>
-          <form action="{{ url_for('index.register') }}" method="post" class="needs-validation" novalidate>
+          <form action="{{ url_for('index.register') }}" method="post" novalidate>
             <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
             
-            <div class="input-group mb-3">
-              <input type="text" class="form-control" placeholder="First Name" name="firstname" id="firstname" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-user"></span>
+            <div class="form-group">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-user"></i>
+                  </span>
                 </div>
-              </div>
-              <div class="invalid-feedback">
-                Please input your first name
+                <input type="text" class="form-control {{ 'is-invalid' if 'firstname' in error_messages else '' }}" placeholder="First Name" name="firstname" id="firstname" value="{{ request.form.firstname }}" required>
+                {% if 'firstname' in error_messages %}
+                  <div class="invalid-feedback">
+                    {{ error_messages['firstname'] }}
+                  </div>
+                {% endif %}
               </div>
             </div>
 
-            <div class="input-group mb-3">
-              <input type="text" class="form-control" placeholder="Last name" name="lastname" id="lastname" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-user"></span>
+            <div class="form-group">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-user"></i>
+                  </span>
                 </div>
-              </div>
-              <div class="invalid-feedback">
-                Please input your last name
+                <input type="text" class="form-control {{ 'is-invalid' if 'lastname' in error_messages else '' }}" placeholder="Last name" name="lastname" id="lastname" value="{{ request.form.lastname }}" required>
+                {% if 'lastname' in error_messages %}
+                  <div class="invalid-feedback">
+                    {{ error_messages['lastname'] }}
+                  </div>
+                {% endif %}
               </div>
             </div>
 
-            <div class="input-group mb-3">
-              <input type="email" class="form-control" placeholder="Email" name="email" id="email" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-envelope"></span>
+            <div class="form-group">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-envelope"></i>
+                  </span>
                 </div>
-              </div>
-              <div class="invalid-feedback">
-                Please input a valid email address
+                <input type="email" class="form-control {{ 'is-invalid' if 'email' in error_messages else '' }}" placeholder="Email" name="email" id="email" value="{{ request.form.email }}" required>
+                {% if 'email' in error_messages %}
+                  <div class="invalid-feedback">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    {{ error_messages['email'] }}
+                  </div>
+                {% endif %}
               </div>
             </div>
 
             <p class="login-box-msg">Enter your account details below</p>
 
-            <div class="input-group mb-3">
-              <input type="text" class="form-control" placeholder="Username" name="username" id="username" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-user"></span>
+            <div class="form-group">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-user"></i>
+                  </span>
                 </div>
-              </div>
-              <div class="invalid-feedback">
-                Please input desired username
+                <input type="text" class="form-control {{ 'is-invalid' if 'username' in error_messages else '' }}" placeholder="Username" name="username" id="username" value="{{ request.form.username }}" required>
+                {% if 'email' in error_messages %}
+                  <div class="invalid-feedback">
+                    {{ error_messages['username'] }}
+                  </div>
+                {% endif %}
               </div>
             </div>
 
-            <div class="input-group mb-3">
-              <input type="password" class="form-control" placeholder="Password" id="password" name="password" id="password" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-lock"></span>
+            <div class="form-group">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-lock"></i>
+                  </span>
                 </div>
-              </div>
-              <div class="invalid-feedback">
-                Please input desired username
+                <input type="password" class="form-control {{ 'is-invalid' if 'password' in error_messages else '' }}" placeholder="Password" id="password" name="password" required>
+                {% if 'email' in error_messages %}
+                  <div class="invalid-feedback">
+                    {{ error_messages['password'] }}
+                  </div>
+                {% endif %}
               </div>
             </div>
 
+            <div class="form-group">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-lock"></i>
+                  </span>
+                </div>
+                <input type="password" class="form-control {{ 'is-invalid' if 'rpassword' in error_messages else '' }}" placeholder="Retype password" id="rpassword" name="rpassword" required>
+                {% if 'rpassword' in error_messages %}
+                  <div class="invalid-feedback">
+                    {{ error_messages['rpassword'] }}
+                  </div>
+                {% endif %}
+              </div>
+            </div>
 
-          <div class="form-group has-feedback">
-            <input type="password" class="form-control" placeholder="Retype password" name="rpassword" data-match="#password" data-match-error="Password confirmation does not match" required>
-            <span class="fas fa-lock form-control-feedback"></span>
-            <span class="help-block with-errors"></span>
-          </div>
-
-          {% if captcha_enable %}
-            <div class="input-group mb-3">
-              <p class="login-box-msg">Please complete the CAPTCHA below</p>
+            {% if captcha_enable %}
+            <p class="login-box-msg">Please complete the CAPTCHA below</p>
+            <div class="form-group has-feedback">
               {{ captcha() }}
-              <br>
-              <input type="text" class="form-control" placeholder="CAPTCHA" id="captcha" name="captcha" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-lock"></span>
-                </div>
-              </div>
-              <div class="invalid-feedback">
-                Please complete the CAPTCHA
-              </div>
+              <input type="text" class="form-control" placeholder="CAPTCHA"  name="captcha"
+                data-error="Please complete the CAPTCHA" required>
+              <span class="help-block with-errors"></span>
             </div>
           {% endif %}
 
@@ -133,7 +156,7 @@
           </div>
         </form>
       </div>
-      <div class="login--footer">
+      <div class="login-box-footer">
         <center>
           <p>Powered by <a href="https://github.com/PowerDNS-Admin/PowerDNS-Admin">PowerDNS-Admin</a></p>
         </center>
@@ -151,24 +174,6 @@
           window.location.href = '{{ url_for('index.login') }}';
         })
       });
-      (function() {
-  'use strict';
-  window.addEventListener('load', function() {
-    // Fetch all the forms we want to apply custom Bootstrap validation styles to
-    var forms = document.getElementsByClassName('needs-validation');
-    // Loop over them and prevent submission
-    var validation = Array.prototype.filter.call(forms, function(form) {
-      form.addEventListener('submit', function(event) {
-        if (form.checkValidity() === false) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-        form.classList.add('was-validated');
-      }, false);
-    });
-  }, false);
-})();
-
     </script>
   </body>
 </html>
diff --git a/powerdnsadmin/templates/template.html b/powerdnsadmin/templates/template.html
index 586874a..a37187e 100644
--- a/powerdnsadmin/templates/template.html
+++ b/powerdnsadmin/templates/template.html
@@ -1,108 +1,121 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_domain_template" %}
-{% block title %}<title>Templates - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    Templates - {{ SITE_NAME }}
+  </title>
+{% endblock %}
 
 {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
-<section class="content-header">
-  <h1>
-    Templates
-    <small>List</small>
-  </h1>
-  <ol class="breadcrumb">
-    <li><a href="{{ url_for('admin.templates') }}"><i class="fa fa-dashboard"></i> Templates</a></li>
-    <li class="active">List</li>
-  </ol>
-</section>
+
+<div class="content-header">
+  <div class="container-fluid">
+    <div class="row mb-2">
+      <div class="col-sm-6">
+        <h1 class="m-0 text-dark">
+          Templates
+          <small>List</small>
+        </h1>
+      </div>
+      <div class="col-sm-6">
+        <ol class="breadcrumb float-sm-right">
+          <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
+          <li class="breadcrumb-item active">Templates - List</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+
 {% endblock %}
+
 {% block content %}
-<!-- Main content -->
 <section class="content">
-  {% with errors = get_flashed_messages(category_filter=["error"]) %} {% if errors %}
-  <div class="row">
-    <div class="col-md-12">
-      <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>
-        <div class="alert-message block-message error">
-          <a class="close" href="#">x</a>
-          <ul>
-            {%- for msg in errors %}
-            <li>{{ msg }}</li> {% endfor -%}
-          </ul>
+  <div class="container-fluid">
+    {% with errors = get_flashed_messages(category_filter=["error"]) %}
+      {% if errors %}
+        <div class="row">
+          <div class="col-12">
+            <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>
+              <div class="alert-message block-message error">
+                <a class="close" href="#">x</a>
+                <ul>
+                  {%- for msg in errors %}
+                    <li>{{ msg }}</li>
+                  {% endfor -%}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      {% endif %}
+    {% endwith %}
+    <div class="row">
+      <div class="col-12">
+        <div class="card shadow card-outline card-secondary">
+          <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
+              </button>
+            </a>
+          </div>
+          <div class="card-body">
+            <table id="tbl_template_list" class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Description</th>
+                  <th>Number of Records</th>
+                  <th width="20%">Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for template in templates %}
+                  <tr>
+                    <td>
+                      <a href="{{ url_for('admin.edit_template', template=template.name) }}">
+                        <strong>{{ template.name }}</strong>
+                      </a>
+                    </td>
+                    <td>
+                      {{ template.description }}
+                    </td>
+                    <td>
+                      {{ 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">
+                          Edit&nbsp;<i class="fa fa-edit"></i>
+                        </button>
+                      </a>
+                      <button type="button" class="btn btn-danger button_delete" id="{{template.name}}">
+                        Delete&nbsp;<i class="fa fa-trash"></i>
+                      </button>
+                    </td>
+                  </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
   </div>
-  {% endif %} {% endwith %}
-  <div class="row">
-    <div class="container-fluid">
-    <div class="col-xs-12">
-      <div class="card">
-        <div class="card-header">
-          <h3 class="card-title">Templates</h3>
-        </div>
-        <div class="card-body">
-          <a href="{{ url_for('admin.create_template') }}">
-            <button type="button" class="btn btn-flat btn-primary pull-left">
-              Create Template&nbsp;<i class="fa fa-plus"></i>
-            </button>
-          </a>
-        </div>
-        <div class="card-body">
-          <table id="tbl_template_list" class="table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Description</th>
-                <th>Number of Records</th>
-                <th width="20%">Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              {% for template in templates %}
-              <tr>
-                <td>
-                  <a
-                    href="{{ url_for('admin.edit_template', template=template.name) }}"><strong>{{ template.name }}</strong></a>
-                </td>
-                <td>
-                  {{ template.description }}
-                </td>
-                <td>
-                  {{ 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">
-                      Edit&nbsp;<i class="fa fa-edit"></i>
-                    </button>
-                  </a>
-                  <button type="button" class="btn btn-danger button_delete" id="{{template.name}}">
-                    Delete&nbsp;<i class="fa fa-trash"></i>
-                  </button>
-                </td>
-              </tr>
-              {% endfor %}
-            </tbody>
-          </table>
-        </div>
-        <!-- /.box-body -->
-      </div>
-      <!-- /.box -->
-    </div>
-    <!-- /.col -->
-  </div>
-  </div>
-  <!-- /.row -->
 </section>
-<!-- /.content -->
 {% endblock %}
+
 {% block extrascripts %}
 <script>
-  // set up history data table
+  // set up template data table
   $("#tbl_template_list").DataTable({
     "paging": true,
     "lengthChange": true,
@@ -111,6 +124,7 @@
     "info": false,
     "autoWidth": false
   });
+
   // handle delete button
   $(document.body).on("click", ".button_delete", function (e) {
     var template = $(this).prop('id');
@@ -119,9 +133,9 @@
     }, function () {
       window.location.href = '{{ url_for('admin.templates') }}';
     });
-
   });
 </script>
 {% endblock %}
+
 {% block modals %}
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/powerdnsadmin/templates/template_add.html b/powerdnsadmin/templates/template_add.html
index 84f96bd..f713d8f 100644
--- a/powerdnsadmin/templates/template_add.html
+++ b/powerdnsadmin/templates/template_add.html
@@ -1,9 +1,14 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_domain_template" %}
-{% block title %}<title>Create Template - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    Create Template - {{ SITE_NAME }}
+  </title>
+{% endblock %}
 
 {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
 <div class="content-header">
   <div class="container-fluid">
     <div class="row mb-2">
@@ -22,91 +27,88 @@
     </div>
   </div>
 </div>
-
 {% endblock %}
 
 {% block content %}
 <section class="content">
-	{% with errors = get_flashed_messages(category_filter=["error"]) %} {%
-if errors %}
-	<div class="row">
-		<div class="col-md-12">
-			<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>
-				<div class="alert-message block-message error">
-					<a class="close" href="#">x</a>
-					<ul>
-						{%- for msg in errors %}
-						<li>{{ msg }}</li> {% endfor -%}
-					</ul>
-				</div>
-			</div>
-		</div>
-	</div>
-	{% endif %} {% endwith %}
+  {% with errors = get_flashed_messages(category_filter=["error"]) %}
+    {% if errors %}
+      <div class="row">
+        <div class="col-12">
+          <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>
+            <div class="alert-message block-message error">
+              <a class="close" href="#">x</a>
+            <ul>
+              {%- for msg in errors %}
+                <li>{{ msg }}</li>
+              {% endfor -%}
+            </ul>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+  {% endwith %}
 
-	<div class="row">
-		<div class="col-md-4">
-			<div class="box box-primary">
-				<div class="box-header with-border">
-					<h3 class="box-title">Create new template</h3>
-				</div>
-				<!-- /.box-header -->
-				<!-- form start -->
-				<form role="form" method="post" action="{{ url_for('admin.create_template') }}">
-					<input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-					<div class="box-body">
-						<div class="form-group">
-							<input type="text" class="form-control" name="name" id="name"
-								placeholder="Enter a valid template name (required)">
-						</div>
-						<div class="form-group">
-							<input type="text" class="form-control" name="description" id="description"
-								placeholder="Enter a template description (optional)">
-						</div>
-					</div>
-					<div class="box-footer">
-						<button type="submit" class="btn btn-flat btn-primary">Submit</button>
-						<button type="button" class="btn btn-flat btn-default"
-							onclick="window.location.href='{{ url_for('admin.templates') }}'">Cancel</button>
-					</div>
-				</form>
-			</div>
-			<!-- /.box -->
-		</div>
-		<div class="col-md-8">
-			<div class="box box-primary">
-				<div class="box-header with-border">
-					<h3 class="box-title">Help with creating a new template</h3>
-				</div>
-				<div class="box-body">
-					<dl class="dl-horizontal">
-						<dt>Template name</dt>
-						<dd>Enter your template name, this is the name of the template that
-							will be shown to users. The name should not have any spaces but
-							can have symbols.</dd>
-						<dt>Template description</dt>
-						<dd>Enter your template description, this is to help better
-							identify the template.</dd>
-					</dl>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="row">
+    <div class="col-4">
+      <div class="card card-primary">
+        <div class="card-header with-border">
+          <h3 class="card-title">Create new template</h3>
+        </div>
+        <form role="form" method="post" action="{{ url_for('admin.create_template') }}">
+          <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+          <div class="box-body">
+            <div class="form-group">
+              <input type="text" class="form-control" name="name" id="name"
+                placeholder="Enter a valid template name (required)">
+            </div>
+            <div class="form-group">
+              <input type="text" class="form-control" name="description" id="description"
+                placeholder="Enter a template description (optional)">
+            </div>
+          </div>
+          <div class="box-footer">
+            <button type="submit" class="btn btn-flat btn-primary">Submit</button>
+            <button type="button" class="btn btn-flat btn-default"
+              onclick="window.location.href='{{ url_for('admin.templates') }}'">Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+    <div class="col-8">
+      <div class="card card-primary">
+        <div class="card-header with-border">
+          <h3 class="card-title">Help with creating a new template</h3>
+        </div>
+        <div class="card-body">
+          <dl class="dl-horizontal">
+            <dt>Template name</dt>
+            <dd>Enter your template name, this is the name of the template that
+              will be shown to users. The name should not have any spaces but
+              can have symbols.</dd>
+            <dt>Template description</dt>
+            <dd>Enter your template description, this is to help better
+              identify the template.</dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  </div>
 </section>
 {% endblock %}
 {% block extrascripts %}
 <script>
-	$("input[name=radio_type]").change(function () {
-		var type = $(this).val();
-		if (type == "slave") {
-			$("#domain_master_address_div").show();
-		} else {
-			$("#domain_master_address_div").hide();
-		}
-	});
+  $("input[name=radio_type]").change(function () {
+    var type = $(this).val();
+    if (type == "slave") {
+      $("#domain_master_address_div").show();
+    } else {
+      $("#domain_master_address_div").hide();
+    }
+  });
 </script>
 {% endblock %}
diff --git a/powerdnsadmin/templates/template_edit.html b/powerdnsadmin/templates/template_edit.html
index 89faebc..b4281b3 100644
--- a/powerdnsadmin/templates/template_edit.html
+++ b/powerdnsadmin/templates/template_edit.html
@@ -1,6 +1,12 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_domain_template" %}
-{% block title %}<title>Edit Template - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    Edit Template - {{ SITE_NAME }}
+  </title>
+{% endblock %}
 
 {% block dashboard_stat %}
 <section class="content-header">
@@ -19,7 +25,7 @@
 {% block content %}
 <section class="content">
     <div class="row">
-        <div class="col-xs-12">
+        <div class="col-12">
             <div class="box">
                 <div class="box-header">
                     <h3 class="box-title">Manage Template Records for {{ template }}</h3>
diff --git a/powerdnsadmin/templates/user_profile.html b/powerdnsadmin/templates/user_profile.html
index 327bfef..1ccc245 100644
--- a/powerdnsadmin/templates/user_profile.html
+++ b/powerdnsadmin/templates/user_profile.html
@@ -30,7 +30,7 @@
 {% block content %}
 <section class="content">
     <div class="row">
-        <div class="col-lg-12">
+        <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 -