diff --git a/mfa/templates/TOTP/recheck.html b/mfa/templates/TOTP/recheck.html
index 5fd320f..957c132 100644
--- a/mfa/templates/TOTP/recheck.html
+++ b/mfa/templates/TOTP/recheck.html
@@ -1,77 +1,64 @@
-<script type="application/javascript">
-    function send_totp() {
-        $.ajax({"url":"{% url 'totp_recheck' %}", method:"POST",dataType:"JSON",
-            data:{"csrfmiddlewaretoken":"{{ csrf_token }}","otp":$("#otp").val()},
-         success:function (data) {
-                            if (data["recheck"])
-                                mfa_success_function();
-                            else {
-                                mfa_failed_function();
-                            }
-                        }
-        })
-    }
-</script>
-<div class='container'>
-<div class="row">
+{% extends "mfa_auth_base.html" %}
+{% load static %}
 
-<div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10  col-lg-8 ">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
-	      <strong> One Time Password</strong>
-      </div>
-      <div class="panel-body card-body">
-
-      <FORM METHOD="POST" ACTION="{% url 'totp_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
+{% block content %}
 
 
-      {% csrf_token %}
-          {%  if invalid %}
-          <div class="alert alert-danger">
-              Sorry, The provided token is not valid.
-          </div>
-          {% endif %}
-      {% if quota %}
-          <div class="alert alert-warning">
-              {{ quota }}
-          </div>
-      {% endif %}
-      <fieldset>
-      <div class="row">
-      <div class="col-sm-12 col-md-12">
-        <p>Enter the 6-digits on your authenticator</p>
-      </div>
-      </div>
+    <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">One Time Password</h6>
+                </div>
+                <div class="card-body">
+                    <form METHOD="POST" ACTION="{% url 'totp_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
+                        {% csrf_token %}
+                            {%  if invalid %}
+                            <div class="alert alert-danger">
+                                Sorry, The provided token is not valid.
+                            </div>
+                            {% endif %}
+                        {% if quota %}
+                            <div class="alert alert-warning">
+                                {{ quota }}
+                            </div>
+                        {% endif %}
+                        <fieldset>
 
-      <div class="row">
-	  <div class="col-sm-12 col-md-12">
-	    <div class="form-group">
-	      <div class="input-group input-group-dynamic mb-3">
-		<span class="input-group-addon input-group-text">
-		<i class="glyphicon glyphicon-lock bi bi-lock"></i>
-		</span>
-		<input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
+                            <div class=" text-left">
+                              <p>Enter the 6-digits on your authenticator</p>
+                            </div>
 
-	      </div>
-	    </div>
 
-          <div class="form-group d-grid gap-2">
+                                  <div class="form-group">
+                                    <div class="input-group input-group-dynamic mb-3">
+                                        <span class="input-group-addon input-group-text">
+                                            <i class="glyphicon glyphicon-lock bi bi-lock"></i>
+                                        </span>
+                                        <input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp"  type="text"  id="otp" autofocus>
+                                    </div>
+                                  </div>
+                              
+                                  <div class="form-group d-grid gap-2">
+                                      <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode ==       "recheck" %}onclick="send_totp()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">
+                                  </div>
 
-            <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode == "recheck" %}onclick="send_totp()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">	      </div>
-      </div>
-      </fieldset>
-      </FORM>
-      </div>
-        <div class="row">
-        <div class="col-md-12 mb-3" style="padding-left: 25px">
-            {% if request.session.mfa_methods|length > 1 %}
-                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
-            {% endif %}
-        </div>
-        </div>
-	      </div>
-              </div>
-	      </div>
-	      </div>
+
+                        </fieldset>
+                    </form>
+                    
+
+                    <div class="">
+                        {% if request.session.mfa_methods|length > 1 %}
+                            <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
+                        {% endif %}
+                    </div>
+
+                </div>
+    </div>
 </div>
-{% include "modal.html" %}
\ No newline at end of file
+
+{% include "modal.html" %}
+{% endblock %}