diff --git a/powerdnsadmin/templates/admin_setting_pdns.html b/powerdnsadmin/templates/admin_setting_pdns.html
index c4b8947..f64f9e0 100644
--- a/powerdnsadmin/templates/admin_setting_pdns.html
+++ b/powerdnsadmin/templates/admin_setting_pdns.html
@@ -1,110 +1,122 @@
 {% extends "base.html" %}
-
 {% set active_page = "admin_settings" %}
-
-{% block title %}
-  <title>
-    PDNS Settings - {{ SITE_NAME }}
-  </title>
-{% endblock %}
+{% block title %}<title>Server 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>PowerDNS Authoritative Server</small>
-          </h1>
+    <div class="content-header">
+        <div class="container-fluid">
+            <div class="row mb-2">
+                <div class="col-sm-6">
+                    <h1 class="m-0 text-dark">Server Settings</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">Server Settings</li>
+                    </ol>
+                </div>
+            </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>
-  </div>
 {% endblock %}
 
 {% block content %}
-  <section class="content">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-4">
-          <div class="card shadow card-outline card-secondary">
-            <div class="card-header">
-              <h3 class="card-title">PDNS Settings</h3>
+    <section class="content">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-12 col-sm-6 col-lg-4">
+                    <form role="form" method="post" data-toggle="validator">
+                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+                        <div class="card card-outline card-primary shadow">
+                            <div class="card-header">
+                                <h3 class="card-title">Settings Editor</h3>
+                            </div>
+                            <!-- /.card-header -->
+                            <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" id="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" id="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" id="pdns_version"
+                                           data-error="Please input PowerDNS version" required
+                                           value="{{ pdns_version }}">
+                                    <span class="help-block with-errors"></span>
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                            <div class="card-footer">
+                                <button type="submit" class="btn btn-primary float-right" title="Save Settings">
+                                    <i class="fa-solid fa-save"></i>&nbsp;Save Settings
+                                </button>
+                            </div>
+                            <!-- /.card-footer -->
+                        </div>
+                        <!-- /.card -->
+                    </form>
+                </div>
+                <!-- /.col -->
+
+                <div class="col-12 col-sm-6 col-lg-8">
+                    <div class="card card-outline card-secondary shadow">
+                        <div class="card-header">
+                            <h3 class="card-title">Settings Editor</h3>
+                        </div>
+                        <!-- /.card-header -->
+                        <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.7.0).</dd>
+                            </dl>
+                            <p>Find more details at
+                                <a href="https://doc.powerdns.com/md/httpapi/README/" target="_blank">https://doc.powerdns.com/md/httpapi/README/</a>
+                            </p>
+                        </div>
+                        <!-- /.card-body -->
+                    </div>
+                    <!-- /.card -->
+                </div>
+                <!-- /.col -->
             </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 float-right">
-                  <i class="fa-solid fa-save"></i>&nbsp;Save
-                </button>
-              </div>
-            </form>
-          </div>
+            <!-- /.row -->
         </div>
-        <div class="col-8">
-          <div class="card shadow card-outline card-secondary">
-            <div class="card-header">
-              <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.7.0).</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>
+        <!-- /.container-fluid -->
+    </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 %}