diff --git a/mfa/templates/TOTP/Add.html b/mfa/templates/TOTP/Add.html
index 86c0040..7520cd0 100644
--- a/mfa/templates/TOTP/Add.html
+++ b/mfa/templates/TOTP/Add.html
@@ -2,11 +2,7 @@
 {% load static %}
 {% block head %}
 <style>
-    #two-factor-steps {
-	border: 1px solid #ccc;
-	border-radius: 3px;
-	padding: 15px;
-    }
+
     .row{
         margin: 0px;
     }
@@ -87,37 +83,34 @@
 <br/>
 <br/>
 <div class="container-fluid px-2 px-md-4">
-  <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/add_user.svg'%}');">
+  <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 card-body mx-3 mx-md-4 mt-n6" id="two-factor-steps">
-    <div class="card-header pb-0 p-3">
-        <h6 class="mb-0">Adding a new {{ method.name }}</h6>
-      </div>
-    <div class="row gx-4 mb-2">
-    </div>
-    <div class="row">
-      <div class="row">
-          <div class="col-12 col-xl-12">
-            <div class="card  h-100">
+  
 
+
+
+            <div class="card mx-3 mx-md-4 mt-n6 h-100" id="two-factor-steps" >
+                <div class="card-header pb-0 p-3">
+                    <h6 class="mb-0">Adding a new {{ method.name }}</h6>
+                </div>
                 <div class="card-body p-3">
                     <div class="row">
 
                         <p>Scan the image below with the two-factor authentication app on your <a href="javascript:void(0)" onclick="showTOTP()">phone/PC</a>. If you can’t use a barcode,
                             <a href="javascript:void(0)" onclick="showKey()">enter this text</a> instead. </p>
                     </div>
-                    <div id="res">
-
-                    </div>
-                    <div class="row" style="text-align: center">
+                        <div id="res">
+                        
+                        </div>
+                        <div class="row" style="text-align: center">
                     
                         <div align="center" style="display: none;text-align: center;align-content: center" id="second_step">
                         
                             <img id="qr"/>
                         
                         </div>
-                    </div>
+                        </div>
                         <div class="row">
                         
                             <p><b>Enter the six-digit code from the application</b></p>
@@ -138,10 +131,8 @@
                     </div>
                 </div>
             </div>
-          </div>
-      </div>   
-    </div>
-  </div>
+
+
 </div>
 {% include "modal.html" %}
 {% endblock %}