diff --git a/powerdnsadmin/templates/admin_setting_authentication.html b/powerdnsadmin/templates/admin_setting_authentication.html
index 0509cbb..e0e3a3f 100644
--- a/powerdnsadmin/templates/admin_setting_authentication.html
+++ b/powerdnsadmin/templates/admin_setting_authentication.html
@@ -1,9 +1,14 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_settings" %}
+
 {% block title %}
-<title>Authentication Settings - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
+  <title>
+    Authentication Settings - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
   <div class="content-header">
     <div class="container-fluid">
       <div class="row mb-2">
@@ -19,45 +24,28 @@
             <li class="breadcrumb-item">Settings</li>
             <li class="breadcrumb-item active">Authentication</li>
           </ol>
-          <script>
-            function ldapSelection() {
-                if (document.getElementById('ldap').checked) {
-                    document.getElementById('ldap_openldap_fields').style.display = 'block';
-                    document.getElementById('ldap_openldap_group_filters').style.display = 'block';
-                    document.getElementById('ldap_ad_fields').style.display = 'none';
-                } else {
-                    document.getElementById('ldap_openldap_fields').style.display = 'none';
-                    document.getElementById('ldap_openldap_group_filters').style.display = 'none';
-                    document.getElementById('ldap_ad_fields').style.display = 'block';
-                }
-            }
-    
-            window.onload = function() {
-                ldapSelection();
-            }
-        </script>
         </div>
       </div>
     </div>
   </div>
-
 {% endblock %}
+
 {% block content %}
 <section class="content">
+  <div class="container-fluid">
     <div class="row">
-        <div class="col-lg-12">
-            <div class="box box-primary">
-                <div class="box-header with-border">
-                    <h3 class="box-title">Authentication Settings</h3>
+        <div class="col-12">
+            <div class="card shadow">
+                <div class="card-header">
+                    <h3 class="card-title">Authentication Settings</h3>
                 </div>
-                <div class="box-body">
+                <div class="card-body">
                     {% if result %}
                     <div class="alert {% if result['status'] %}alert-success{% else %}alert-danger{% endif%} alert-dismissible">
                         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                         {{ result['msg'] }}
                     </div>
                     {% endif %}
-                    <!-- Custom Tabs -->
                     <div class="nav-tabs-custom" id="tabs">
                         <ul class="nav nav-tabs">
                             <li class="active"><a href="#tabs-general" data-toggle="tab">General</a></li>
@@ -88,7 +76,7 @@
                             </div>
                             <div class="tab-pane" id="tabs-ldap">
                                 <div class="row">
-                                    <div class="col-md-4">
+                                    <div class="col-4">
                                         {% if error %}
                                                 <div class="alert alert-danger alert-dismissible">
                                                     <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
@@ -249,7 +237,7 @@
                                             </div>
                                         </form>
                                     </div>
-                                    <div class="col-md-8">
+                                    <div class="col-8">
                                         <legend>Help</legend>
                                         <dl class="dl-horizontal">
                                             <dt>Enable LDAP Authentication</dt>
@@ -343,7 +331,7 @@
                             </div>
                             <div class="tab-pane" id="tabs-google">
                                 <div class="row">
-                                    <div class="col-md-4">
+                                    <div class="col-4">
                                         <form role="form" method="post" data-toggle="validator">
                                             <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                                             <input type="hidden" value="google" name="config_tab" />
@@ -392,7 +380,7 @@
                                             </div>
                                         </form>
                                     </div>
-                                    <div class="col-md-8">
+                                    <div class="col-8">
                                         <legend>Help</legend>
                                         <p>Fill in all the fields in the left form.</p>
                                         <p>Make sure you add PDA redirection URI (e.g http://localhost:9191/google/authorized) to your Google App Credentials Restriction.</p>
@@ -401,7 +389,7 @@
                             </div>
                             <div class="tab-pane" id="tabs-github">
                                 <div class="row">
-                                    <div class="col-md-4">
+                                    <div class="col-4">
                                         <form role="form" method="post" data-toggle="validator">
                                             <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                                             <input type="hidden" value="github" name="config_tab" />
@@ -450,7 +438,7 @@
                                             </div>
                                         </form>
                                     </div>
-                                    <div class="col-md-8">
+                                    <div class="col-8">
                                         <legend>Help</legend>
                                         <p>Fill in all the fields in the left form.</p>
                                     </div>
@@ -458,7 +446,7 @@
                             </div>
                             <div class="tab-pane" id="tabs-azure">
                                 <div class="row">
-                                    <div class="col-md-4">
+                                    <div class="col-4">
                                         <form role="form" method="post" data-toggle="validator">
                                             <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                                             <input type="hidden" value="azure" name="config_tab" />
@@ -572,7 +560,7 @@
                                             </div>
                                         </form>
                                     </div>
-                                    <div class="col-md-8">
+                                    <div class="col-8">
                                         <legend>Help</legend>
                                         <p>Fill in all the fields in the left form.</p>
                                         <p>You first need to define an Application Registration in your Azure Active Directory, with the appropriate HTTPS URL for this endpoint, and with the appropriate rights, as explained in the documentation.</p>
@@ -594,7 +582,7 @@
                             </div>
                             <div class="tab-pane" id="tabs-oidc">
                                 <div class="row">
-                                    <div class="col-md-4">
+                                    <div class="col-4">
                                         <form role="form" method="post" data-toggle="validator">
                                             <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                                             <input type="hidden" value="oidc" name="config_tab" />
@@ -681,7 +669,7 @@
                                             </div>
                                         </form>
                                     </div>
-                                    <div class="col-md-8">
+                                    <div class="col-8">
                                         <legend>Help</legend>
                                         <p>Fill in all the fields in the left form.</p>
                                     </div>
@@ -693,14 +681,31 @@
             </div>
         </div>
     </div>
+  </div>
 </section>
 {% endblock %}
+
 {% block extrascripts %}
 {% assets "js_validation" -%}
   <script type="text/javascript" src="{{ ASSET_URL }}"></script>
 {%- endassets %}
 
 <script>
+            function ldapSelection() {
+                if (document.getElementById('ldap').checked) {
+                    document.getElementById('ldap_openldap_fields').style.display = 'block';
+                    document.getElementById('ldap_openldap_group_filters').style.display = 'block';
+                    document.getElementById('ldap_ad_fields').style.display = 'none';
+                } else {
+                    document.getElementById('ldap_openldap_fields').style.display = 'none';
+                    document.getElementById('ldap_openldap_group_filters').style.display = 'none';
+                    document.getElementById('ldap_ad_fields').style.display = 'block';
+                }
+            }
+    
+            window.onload = function() {
+                ldapSelection();
+            }
     
     $(function() {
         $('#tabs').tabs({
diff --git a/powerdnsadmin/templates/domain_setting.html b/powerdnsadmin/templates/domain_setting.html
index 21d49b6..364b938 100644
--- a/powerdnsadmin/templates/domain_setting.html
+++ b/powerdnsadmin/templates/domain_setting.html
@@ -9,44 +9,58 @@
 {% block dashboard_stat %}
 
 {% if status %}
-{% if status.get('status') == 'ok' %}
-<div class="alert alert-success">
-    <strong>Success!</strong> {{ status.get('msg') }}
-</div>
-{% elif status.get('status') == 'error' %}
-<div class="alert alert-danger">
-    {% if status.get('msg') != None %}
-    <strong>Error!</strong> {{ status.get('msg') }}
-    {% else %}
-    <strong>Error!</strong> An undefined error occurred.
-    {% endif %}
-</div>
+  {% if status.get('status') == 'ok' %}
+    <div class="alert alert-success">
+      <strong>Success!</strong> {{ status.get('msg') }}
+    </div>
+  {% elif status.get('status') == 'error' %}
+    <div class="alert alert-danger">
+      {% if status.get('msg') != None %}
+        <strong>Error!</strong>
+        {{ status.get('msg') }}
+      {% else %}
+        <strong>Error!</strong>
+        An undefined error occurred.
+      {% endif %}
+    </div>
+  {% endif %}
 {% endif %}
-{% endif %}
-<section class="content-header">
-    <h1>
-        Manage domain <small>{{ domain.name | pretty_domain_name }}</small>
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li class="active">Domain Management</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">
+          Domain Settings
+          <small>{{ domain.name | pretty_domain_name }}</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">Domain Settings: {{ domain.name | pretty_domain_name }}</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+
 {% endblock %}
 
 {% block content %}
 <section class="content">
+    <div class="container-fluid">
     <div class="row">
         <div class="col-12">
-            <div class="box">
+            <div class="card">
                 <form method="post" action="{{ url_for('domain.setting', domain_name=domain.name) }}">
                     <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-                    <div class="box-header">
-                        <h3 class="box-title">Domain Access Control</h3>
+                    <div class="card-header">
+                        <h3 class="card-title">Domain Access Control</h3>
                     </div>
-                    <div class="box-body">
+                    <div class="card-body">
                         <div class="row">
-                            <div class="col-xs-2">
+                            <div class="col-2">
                                 <p>Users on the right have access to manage the records in
                                     the {{ domain.name | pretty_domain_name }} domain.</p>
                                 <p>Click on users to move from between columns.</p>
@@ -55,7 +69,7 @@
                                     and already have access to <b>ALL</b> domains.
                                 </p>
                             </div>
-                            <div class="form-group col-xs-2">
+                            <div class="form-group col-2">
                                 <select multiple="multiple" class="form-control" id="domain_multi_user"
                                     name="domain_multi_user[]">
                                     {% for user in users %}
@@ -66,10 +80,10 @@
                                 </select>
                             </div>
                         </div>
-                        <div class="box-body">
-                            <div class="col-xs-offset-2">
+                        <div class="card-body">
+                            <div class="col-offset-2">
                                 <div class="form-group">
-                                    <button type="submit" class="btn btn-flat btn-primary"><i class="fa fa-check"></i>
+                                    <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i>
                                         Save</button>
                                 </div>
                             </div>
@@ -80,13 +94,13 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Account</h3>
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Account</h3>
                 </div>
-                <div class="box-body">
-                    <div class="col-xs-12">
+                <div class="card-body">
+                    <div class="col-12">
                         <div class="form-group">
                             <form method="post"
                                 action="{{ url_for('domain.change_account', domain_name=domain.name) }}">
@@ -110,12 +124,12 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Auto PTR creation</h3>
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Auto PTR creation</h3>
                 </div>
-                <div class="box-body">
+                <div class="card-body">
                     <p><input type="checkbox" id="{{ domain.name }}" class="auto_ptr_toggle"
                             {% for setting in domain.settings %}{% if setting.setting=='auto_ptr' and setting.value=='True' %}checked{% endif %}{% endfor %}
                             {% if SETTING.get('auto_ptr') %}disabled="True" {% endif %}>
@@ -129,12 +143,12 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">DynDNS 2 Settings</h3>
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">DynDNS 2 Settings</h3>
                 </div>
-                <div class="box-body">
+                <div class="card-body">
                     <p><input type="checkbox" id="{{ domain.name }}" class="dyndns_on_demand_toggle"
                             {% for setting in domain.settings %}{% if setting.setting=='create_via_dyndns' and setting.value=='True' %}checked{% endif %}{% endfor %}>
                         &nbsp;Allow on-demand creation of records via DynDNS updates?</p>
@@ -143,12 +157,12 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Change Type</h3>
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Change Type</h3>
                 </div>
-                <div class="box-body">
+                <div class="card-body">
                     <p>The type decides how the domain will be replicated across multiple DNS servers.</p>
                     <ul>
                         <li>
@@ -178,7 +192,7 @@
                                 id="domain_master_address"
                                 placeholder="Enter valid master ip addresses (separated by commas)">
                         </div>
-                        <button type="submit" class="btn btn-flat btn-primary" id="change_type">
+                        <button type="submit" class="btn btn-primary" id="change_type">
                             <i class="fa fa-check"></i>&nbsp;Change type for {{ domain.name | pretty_domain_name }}
                         </button>
                     </form>
@@ -187,12 +201,12 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Change SOA-EDIT-API</h3>
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Change SOA-EDIT-API</h3>
                 </div>
-                <div class="box-body">
+                <div class="card-body">
                     <p>The SOA-EDIT-API setting defines how the SOA serial number will be updated after a change is made
                         to the domain.</p>
                     <ul>
@@ -221,7 +235,7 @@
                             <option>EPOCH</option>
                             <option>OFF</option>
                         </select><br />
-                        <button type="submit" class="btn btn-flat btn-primary" id="change_soa_edit_api">
+                        <button type="submit" class="btn btn-primary" id="change_soa_edit_api">
                             <i class="fa fa-check"></i>&nbsp;Change SOA-EDIT-API setting for {{ domain.name | pretty_domain_name }}
                         </button>
                     </form>
@@ -230,16 +244,16 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Domain Deletion</h3>
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Domain Deletion</h3>
                 </div>
-                <div class="box-body">
+                <div class="card-body">
                     <p>This function is used to remove a domain from PowerDNS-Admin <b>AND</b> PowerDNS. All records and
                         user privileges associated with this domain will also be removed. This change cannot be
                         reverted.</p>
-                    <button type="button" class="btn btn-flat btn-danger pull-left delete_domain"
+                    <button type="button" class="btn btn-danger pull-left delete_domain"
                         id="{{ domain.name }}">
                         <i class="fa fa-trash"></i>&nbsp;DELETE DOMAIN {{ domain.name | pretty_domain_name }}
                     </button>
@@ -247,6 +261,7 @@
             </div>
         </div>
     </div>
+    </div>
 </section>
 {% endblock %}
 {% block extrascripts %}
diff --git a/powerdnsadmin/templates/template.html b/powerdnsadmin/templates/template.html
index a37187e..08d2d28 100644
--- a/powerdnsadmin/templates/template.html
+++ b/powerdnsadmin/templates/template.html
@@ -94,11 +94,11 @@
                     <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>
+                          <i class="fa fa-edit"></i>&nbsp;Edit
                         </button>
                       </a>
                       <button type="button" class="btn btn-danger button_delete" id="{{template.name}}">
-                        Delete&nbsp;<i class="fa fa-trash"></i>
+                        <i class="fa fa-trash"></i>&nbsp;Delete
                       </button>
                     </td>
                   </tr>
diff --git a/powerdnsadmin/templates/template_add.html b/powerdnsadmin/templates/template_add.html
index f713d8f..0120ebc 100644
--- a/powerdnsadmin/templates/template_add.html
+++ b/powerdnsadmin/templates/template_add.html
@@ -31,69 +31,70 @@
 
 {% block content %}
 <section class="content">
-  {% 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 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-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"
+      {% endif %}
+    {% endwith %}
+    <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"
+              </div>
+              <div class="form-group">
+                <input type="text" class="form-control" name="description" id="description"
                 placeholder="Enter a template description (optional)">
+              </div>
             </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"
+            <div class="card-footer">
+              <button type="submit" class="btn btn-primary">Submit</button>
+              <button type="button" class="btn btn-default"
               onclick="window.location.href='{{ url_for('admin.templates') }}'">Cancel</button>
-          </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>
+          </form>
         </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 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>
diff --git a/powerdnsadmin/templates/template_edit.html b/powerdnsadmin/templates/template_edit.html
index b4281b3..2632172 100644
--- a/powerdnsadmin/templates/template_edit.html
+++ b/powerdnsadmin/templates/template_edit.html
@@ -9,36 +9,44 @@
 {% endblock %}
 
 {% block dashboard_stat %}
-<section class="content-header">
-    <h1>
-        Edit template <small>{{ template }}</small>
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ url_for('dashboard.dashboard') }}"><i
-                class="fa fa-dashboard"></i> Home</a></li>
-        <li>Templates</li>
-        <li class="active">{{ template }}</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">
+            Template Edit
+            <small>{{ template }}</small>
+          </h1>
+        </div>
+        <div class="col-sm-6">
+          <ol class="breadcrumb float-sm-right">
+            <li class="breadcrumb-item"><a href="{{ url_for('admin.templates') }}">Templates</a></li>
+            <li class="breadcrumb-item active">Template Edit: {{ template }}</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
 {% endblock %}
 
 {% block content %}
 <section class="content">
+  <div class="container-fluid">
     <div class="row">
         <div class="col-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Manage Template Records for {{ template }}</h3>
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Manage Template Records for {{ template }}</h3>
                 </div>
-                <div class="box-body">
-                    <button type="button" class="btn btn-flat btn-primary pull-left button_add_record" id="{{ template }}">
-                        Add Record&nbsp;<i class="fa fa-plus"></i>
+                <div class="card-body">
+                    <button type="button" class="btn btn-primary pull-left button_add_record" id="{{ template }}">
+                        <i class="fa fa-plus"></i>&nbsp;Add Record
                     </button>
-                    <button type="button" class="btn btn-flat btn-primary pull-right button_apply_changes" id="{{ template }}">
-                        Apply Changes&nbsp;<i class="fa fa-floppy-o"></i>
+                    <button type="button" class="btn btn-primary pull-right button_apply_changes" id="{{ template }}">
+                        <i class="fa fa-save"></i>&nbsp;Apply Changes
                     </button>
                 </div>
-                <div class="box-body">
+                <div class="card-body">
                     <table id="tbl_records" class="table table-bordered table-striped">
                         <thead>
                             <tr>
@@ -75,17 +83,17 @@
                                         {{ record.comment }}
                                     </td>
                                     <td width="6%">
-                                         <button type="button" class="btn btn-flat btn-warning button_edit">
-                                            Edit&nbsp;<i class="fa fa-edit"></i>
+                                         <button type="button" class="btn btn-warning button_edit">
+                                            <i class="fa fa-edit"></i>&nbsp;Edit
                                         </button>
                                     </td>
                                     <td width="6%">
-                                        <button type="button" class="btn btn-flat btn-danger button_delete">
-                                            Delete&nbsp;<i class="fa fa-trash"></i>
+                                        <button type="button" class="btn btn-danger button_delete">
+                                            <i class="fa fa-trash"></i>&nbsp;Delete
                                         </button>
                                     </td>
                                     <td>
-                                    	{{ record.id }}
+                                      {{ record.id }}
                                     </td>
                                     </td>
                                 </tr>
@@ -96,6 +104,7 @@
             </div>
         </div>
     </div>
+  </div>
 </section>
 {% endblock %}
 {% block extrascripts %}
diff --git a/powerdnsadmin/templates/user_profile.html b/powerdnsadmin/templates/user_profile.html
index 1ccc245..2b1b476 100644
--- a/powerdnsadmin/templates/user_profile.html
+++ b/powerdnsadmin/templates/user_profile.html
@@ -29,6 +29,7 @@
 
 {% block content %}
 <section class="content">
+    <div class="container-fluid">
     <div class="row">
         <div class="col-12">
             <div class="card card-primary">
@@ -70,7 +71,7 @@
                                             {%  if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
                                     </div>{%  if session['authentication_type'] == 'LOCAL' %}
                                     <div class="form-group">
-                                        <button type="submit" class="btn btn-flat btn-primary">Submit</button>
+                                        <button type="submit" class="btn btn-primary">Submit</button>
                                     </div>{% endif %}
                                 </form>
                             </div>
@@ -139,6 +140,7 @@
             </div>
         </div>
     </div>
+    </div>
 </section>
 {% endblock %}
 {% block extrascripts %}