diff --git a/mfa/templates/FIDO2/Add.html b/mfa/templates/FIDO2/Add.html
index 2b8071d..31894ef 100644
--- a/mfa/templates/FIDO2/Add.html
+++ b/mfa/templates/FIDO2/Add.html
@@ -61,21 +61,24 @@
 
 {% endblock %}
 {% block content %}
-      <br/>
-    <br/>
-     <div class="container">
-     <div class="panel panel-default card">
-      <div class="panel-heading card-header">
-	      <strong> Adding a New {{ method.name }}</strong>
-      </div>
-      <div class="panel-body card-body">
-
-
-    <div class="row alert alert-pr" id="res" align="center">
-    <p style="color: green">Your browser should ask you to confirm you identity.</p>
-
+    <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-header pb-0 p-3">
+            <h6 class="mb-0"><strong> Adding a New {{ method.name }}</strong></h6>
+          </div>
+        <div class="card-body">
+
+            <div class="row alert alert-pr" id="res" align="center">
+                <p style="color: green">Your browser should ask you to confirm you identity.</p>
+            
+            </div>
+
+            
+
         </div>
-    </div>
+</div>
     {% include "modal.html" %}
 {% endblock %}