diff --git a/mfa/templates/MFA.html b/mfa/templates/MFA.html
index afcc59d..37a1648 100644
--- a/mfa/templates/MFA.html
+++ b/mfa/templates/MFA.html
@@ -40,86 +40,95 @@
     <script src="{% static 'mfa/js/bootstrap-toggle.min.js'%}"></script>
 {% endblock %}
 {% block content %}
-{{block.super}}
-    <br/>
-    <br/>
-    <div class="container">
-    <div class="row">
-        <div class="offset-5 col-2" style="text-align: center">
-            <div class="btn-group">
-            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">
-                Add Method&nbsp;<span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu">
-                {% if not 'TOTP' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a class="dropdown-item" href="{% url 'start_new_otop' %}">{% if 'TOTP' in RENAME_METHODS.keys %}{{ RENAME_METHODS.TOTP }}{% else %}Authenticator app{% endif %}</a></li>
-                {% endif %}
-                {% if not 'Email' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a class="dropdown-item" href="{% url 'start_email' %}">{% if 'Email' in RENAME_METHODS.keys %}{{ RENAME_METHODS.Email }}{% else %}Email Token{% endif %}</a></li>
-                {% endif %}
-                {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a class="dropdown-item" href="{% url 'start_u2f' %}">{% if 'U2F' in RENAME_METHODS.keys %}{{ RENAME_METHODS.U2F }}{% else %}Security Key{% endif %}</a></li>
-                {% endif %}
-                {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a class="dropdown-item" href="{% url 'start_fido2' %}">{% if 'FIDO2' in RENAME_METHODS.keys %}{{ RENAME_METHODS.FIDO2 }}{% else %}FIDO2 Security Key{% endif %}</a></li>
-                {% endif %}
-                {% if not 'Trusted_Devices' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a class="dropdown-item" href="{% url 'start_td' %}">{% if 'Trusted_Devices' in  RENAME_METHODS.keys %}{{ RENAME_METHODS.Trusted_Devices }}{% else %}Trusted Device{% endif %}</a></li>
-                {% endif %}
-            </ul>
+{% block content %}
+
+
+    <div class="col-lg-8 col-md-8 col-12 mx-auto">
+    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+      <span class="mask  bg-gradient-primary  opacity-6"></span>
+    </div>
+    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
+                <div class="card-body">
+                        <div class="" style="text-align: center">
+                            <div class="btn-group">
+                            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">
+                                Add Method&nbsp;<span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu">
+                                {% if not 'TOTP' in UNALLOWED_AUTHEN_METHODS %}
+                                    <li><a class="dropdown-item" href="{% url 'start_new_otop' %}">{% if 'TOTP' in RENAME_METHODS.keys %}{{ RENAME_METHODS.TOTP }}{% else %}Authenticator app{% endif %}</a></li>
+                                {% endif %}
+                                {% if not 'Email' in UNALLOWED_AUTHEN_METHODS %}
+                                    <li><a class="dropdown-item" href="{% url 'start_email' %}">{% if 'Email' in RENAME_METHODS.keys %}{{ RENAME_METHODS.Email }}{% else %}Email Token{% endif %}</a></li>
+                                {% endif %}
+                                {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
+                                    <li><a class="dropdown-item" href="{% url 'start_u2f' %}">{% if 'U2F' in RENAME_METHODS.keys %}{{ RENAME_METHODS.U2F }}{% else %}Security Key{% endif %}</a></li>
+                                {% endif %}
+                                {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
+                                    <li><a class="dropdown-item" href="{% url 'start_fido2' %}">{% if 'FIDO2' in RENAME_METHODS.keys %}{{ RENAME_METHODS.FIDO2 }}{% else %}FIDO2 Security Key{% endif %}</a></li>
+                                {% endif %}
+                                {% if not 'Trusted_Devices' in UNALLOWED_AUTHEN_METHODS %}
+                                    <li><a class="dropdown-item" href="{% url 'start_td' %}">{% if 'Trusted_Devices' in  RENAME_METHODS.keys %}{{ RENAME_METHODS.Trusted_Devices }}{% else %}Trusted Device{% endif %}</a></li>
+                                {% endif %}
+                            </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                       <table class="table table-striped">
+                           <tr>
+                
+                               <th>Type</th>
+                               <th>Date Added</th>
+                               <th>Expires On</th>
+                               <th>Device</th>
+                               <th>Last Used</th>
+                               <th>Status</th>
+                               <th>Delete</th>
+                           </tr>
+                        {% if keys %}
+                            {% for key in keys %}
+                            <tr>
+                
+                                <td>{{ key.name }}</td>
+                                <td>{{ key.added_on }}</td>
+                                <td>{% if key.expires %}{{ key.expires }}{% else %}N/A{% endif %}</td>
+                                <td>{% if key.device %}{{ key.device }}{% endif %}</td>
+                                <td>{% if key.last_used %}{{ key.last_used }}{% else %}Never{% endif %}</td>
+                                    {% if key.key_type in HIDE_DISABLE %}
+                                        <td>{% if key.enabled %}On{% else %} Off{% endif %}</td>
+                                    {% else %}
+                                        <td><input type="checkbox" id="toggle_{{ key.id }}" {% if key.enabled %}checked{% endif %} data-onstyle="success" data-offstyle="danger"  onchange="toggleKey({{ key.id }})" data-toggle="toggle" class="status_chk"></td>
+                                    {% endif %}
+                                <td>{% if key.key_type in HIDE_DISABLE %}
+                                    ----
+                                    {% else %}
+                                        <a href="javascript:void(0)" onclick="deleteKey({{ key.id }},'{{ key.key_type }}')"> <span class="fa fa-trash fa-solid fa-trash-can bi bi-trash-fill"></span></a></td>
+                                        {% endif %}
+                            </tr>
+                            {% endfor %}
+                            {% if "RECOVERY" not in UNALLOWED_AUTHEN_METHODS %}
+                            <tr>
+                
+                                <td>{{ recovery.name }}</td>
+                                <td>{{ recovery.added_on }}</td>
+                                <td>N/A</td>
+                                <td>N/A</td>
+                                <td>{% if recovery.last_used %}{{ recovery.last_used }}{% else %}Never{% endif %}</td>
+                                <td>On</td>
+                                <td><a href="{% url 'manage_recovery_codes' %}"> <span class="fa fa-wrench fa-solid fa-wrench bi bi-wrench-fill"></span></a></td>
+                            </tr>
+                            {% endif %}
+                        {% else %}
+                           <tr><td colspan="7" align="center">You didn't have any keys yet.</td> </tr>
+                       {% endif %}
+                        </table>
+                    </div>
+                </div>          
+
             </div>
-        </div>
-    </div>
-    <br/>
-       <table class="table table-striped">
-           <tr>
 
-               <th>Type</th>
-               <th>Date Added</th>
-               <th>Expires On</th>
-               <th>Device</th>
-               <th>Last Used</th>
-               <th>Status</th>
-               <th>Delete</th>
-           </tr>
-        {% if keys %}
-            {% for key in keys %}
-            <tr>
+</div>
 
-                <td>{{ key.name }}</td>
-                <td>{{ key.added_on }}</td>
-                <td>{% if key.expires %}{{ key.expires }}{% else %}N/A{% endif %}</td>
-                <td>{% if key.device %}{{ key.device }}{% endif %}</td>
-                <td>{% if key.last_used %}{{ key.last_used }}{% else %}Never{% endif %}</td>
-                    {% if key.key_type in HIDE_DISABLE %}
-                        <td>{% if key.enabled %}On{% else %} Off{% endif %}</td>
-                    {% else %}
-                        <td><input type="checkbox" id="toggle_{{ key.id }}" {% if key.enabled %}checked{% endif %} data-onstyle="success" data-offstyle="danger"  onchange="toggleKey({{ key.id }})" data-toggle="toggle" class="status_chk"></td>
-                    {% endif %}
-                <td>{% if key.key_type in HIDE_DISABLE %}
-                    ----
-                    {% else %}
-                        <a href="javascript:void(0)" onclick="deleteKey({{ key.id }},'{{ key.key_type }}')"> <span class="fa fa-trash fa-solid fa-trash-can bi bi-trash-fill"></span></a></td>
-                        {% endif %}
-            </tr>
-            {% endfor %}
-            {% if "RECOVERY" not in UNALLOWED_AUTHEN_METHODS %}
-            <tr>
-
-                <td>{{ recovery.name }}</td>
-                <td>{{ recovery.added_on }}</td>
-                <td>N/A</td>
-                <td>N/A</td>
-                <td>{% if recovery.last_used %}{{ recovery.last_used }}{% else %}Never{% endif %}</td>
-                <td>On</td>
-                <td><a href="{% url 'manage_recovery_codes' %}"> <span class="fa fa-wrench fa-solid fa-wrench bi bi-wrench-fill"></span></a></td>
-            </tr>
-            {% endif %}
-        {% else %}
-           <tr><td colspan="7" align="center">You didn't have any keys yet.</td> </tr>
-       {% endif %}
-        </table>
-    </div>
-    </div>
-    {% include "modal.html" %}
+{% include "modal.html" %}
 {% endblock %}