diff --git a/mfa/templates/TrustedDevices/Add.html b/mfa/templates/TrustedDevices/Add.html
index ec74e16..57217a4 100644
--- a/mfa/templates/TrustedDevices/Add.html
+++ b/mfa/templates/TrustedDevices/Add.html
@@ -25,101 +25,88 @@
     </script>
 {% endblock %}
 {% block content %}
-    <br/>
-    <br/>
-
-<div class="row">
-
-<div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
-	      <strong> Add Trusted Device</strong>
-      </div>
-      <div class="panel-body card-body">
-        {%  if success %}
-            <div class="alert alert-warning">
-                Please check your PC window, to continue the process.
-            </div>
-        {% elif added %}
-            <div class="alert alert-success">
-                Your device is now trusted, please try to <a href="{% url 'login' %}"> login</a>
-            </div>
-
-      {% else %}
-            <div class="alert alert-warning">Please make sure you are not in private (incognito) mode <i class="fal fa-user-secret"></i></div>
-      <FORM METHOD="POST" ACTION="{% url 'add_td' %}" Id="formLogin" onSubmit="return checkFlag()" name="FrontPage_Form1">
-      {% csrf_token %}
-          {%  if invalid %}
-          <div class="alert alert-danger">
-              {{ invalid }}
+    <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> Add Trusted Device</strong>
+            </h6>
           </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>
-      </div>
-      <div class="row">
-	  <div class="col-sm-12 col-md-12">
-	    <div class="form-group">
-	      <div class="input-group mb-3">
-		<span class="input-group-addon input-group-text">
-		<i class="glyphicon glyphicon-user bi bi-person"></i>
-		</span>
-		<input class="form-control" id="username" size="30" MaxLength="30" placeholder="Username" name="username" value="{{ username }}" type="text" autofocus autocomplete="on">
+        <div class="card-body">
+            {%  if success %}
+                <div class="alert alert-warning">
+                    Please check your PC window, to continue the process.
+                </div>
+            {% elif added %}
+                <div class="alert alert-success">
+                    Your device is now trusted, please try to <a href="{% url 'login' %}"> login</a>
+                </div>
+            
+            {% else %}
+                <div class="alert alert-warning text-white">Please make sure you are not in private (incognito) mode <i class="fa fa-user-secret"></i></div>
+                <form METHOD="POST" ACTION="{% url 'add_td' %}" Id="formLogin" onSubmit="return checkFlag()" name="FrontPage_Form1">
+                {% csrf_token %}
+                {%  if invalid %}
+                    <div class="alert alert-danger">
+                        {{ invalid }}
+                    </div>
+                {% endif %}
+                {% if quota %}
+                    <div class="alert alert-warning">
+                        {{ quota }}
+                    </div>
+                {% endif %}
+                    <fieldset>
 
-	      </div>
-	    </div>
-	    <div class="form-group">
-		<div class="input-group mb-3">
-		<span class="input-group-addon input-group-text">
-		<i class="fa fa-key"></i>
-		</span>
-		<input class="form-control" placeholder="e.g GAK-Y2M" id='key' style="text-transform: uppercase" name="key" type="text" size="9" MaxLength="9" value="{{ key }}">
-		</div>
-	    </div>
-           <div class="form-group">
-		<span class="input-group mb-3">
-            <input id='agree' name="agree" type="checkbox"><span style="color: red"> I confirm that this device is mine and it is only used by me.</span>
-
-	    </div>
-      {% comment %}
-	    <div class="form-group">
-	      <div class="input-group mb-3">
-	      <span class="input-group-addon input-group-text">
-
-
-	      <select size="1" name="Institution_Code" style="font-size: 10pt; font-family: Calibri; height: 34px;width: 230px">
-              {%  for ins in institutes %}
-                <option value="{{ ins.institution_code }}">{{ ins.alias }}</option>
-              {% endfor %}
-
-		</select>
-	      </span>
-	      </div>
-	      </div>
-	      {% endcomment %}
-	      <div class="form-group d-grid gap-2">
-	      <input type="submit" class="btn btn-lg btn-success btn-block" value="Trust Device">
-	      </div>
-	      </div>
-	      </div>
-	      </fieldset>
-	      </form>
-      {% endif %}
-	      </div>
-	      <div class="panel-footer card-footer">
-
-
-	      </div>
-              </div>
-	      </div>
-	      </div>
-
-
-  {% endblock %}
+                        <div class="row">
+                            <div>
+                                <div class="form-group">
+                                    <div class="input-group input-group-static mb-3">
+                                        <span class="input-group-addon input-group-text">
+                                            <i class="glyphicon glyphicon-user bi bi-person"></i>
+                                        </span>
+                                        <input class="form-control" id="username" size="30" MaxLength="30" placeholder="Username" name="username" value="{{ username }}" type="text" autofocus autocomplete="on">
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <div class="input-group input-group-static mb-3">
+                                        <span class="input-group-addon input-group-text">
+                                            <i class="fa fa-key"></i>
+                                        </span>
+                                        <input class="form-control" placeholder="e.g GAK-Y2M" id='key' style="text-transform: uppercase" name="key" type="text" size="9" MaxLength="9" value="{{ key }}">
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <span class=" form-check ">
+                                        <input class="form-check-input" id='agree' name="agree" type="checkbox">
+                                            <span style="color: red"> I confirm that this device is mine and it is only used by me.
+                                            </span>
+                                </div>
+                                {% comment %}
+                                <div class="form-group">
+                                    <div class="input-group mb-3">
+                                        <span class="input-group-addon input-group-text">
+                                            <select size="1" name="Institution_Code" style="font-size: 10pt; font-family: Calibri; height: 34px;width: 230px">
+                                                {%  for ins in institutes %}
+                                                  <option value="{{ ins.institution_code }}">{{ ins.alias }}</option>
+                                                {% endfor %}
+                                            </select>
+                                        </span>
+                                    </div>
+                                </div>
+                                {% endcomment %}
+                                <div class="form-group d-grid gap-2 mt-2">
+                                    <input type="submit" class="btn btn-lg btn-success btn-block" value="Trust Device">
+                                </div>
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
+                {% endif %}
+        </div>
+</div>
+    {% include "modal.html" %}
+{% endblock %}