diff --git a/templates/include/messages.html b/templates/include/messages.html
new file mode 100644
index 0000000..194e3b5
--- /dev/null
+++ b/templates/include/messages.html
@@ -0,0 +1,9 @@
+{% if messages %}
+    {% for message in messages %}
+{#        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}></li>#}
+        <div class="alert alert-warning alert-dismissible fade show" role="alert">
+            <span> {{ message }} </span>
+          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    {% endfor %}
+{% endif %}
diff --git a/templates/registration/login.html b/templates/registration/login.html
old mode 100644
new mode 100755
index d7b988b..5fcf18b
--- a/templates/registration/login.html
+++ b/templates/registration/login.html
@@ -1,53 +1,134 @@
-{% extends "base_generic.html" %}
+{% load static %}
 
-{% block content %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Login</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-5.1.3-dist/css/bootstrap.min.css' %}">
+    <link href="{% static 'bootstrap-icons-1.7.2/bootstrap-icons.css' %}" rel="stylesheet">
+    <script src="{% static 'jquery-3.6.0.min.js' %}"></script>
+    <script src="{% static 'bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js' %}"></script>
+    <link rel="stylesheet" type="text/css" href="{% static 'login/css/util.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'login/css/main.css' %}">
+    <link href="{% static 'fonts.css' %}" rel="stylesheet">
+    <link href="{% static 'main.css' %}" rel="stylesheet">
+    <!--===============================================================================================-->
+</head>
+<body>
+<div class="limiter">
+    <div class="container-login100">
+        <div class="wrap-login100 p-t-50 p-b-90">
+{#            <div class="text-center pb-5">#}
+{#                <img src="{% static 'image/arian_saeed.png' %}" class="img-fluid">#}
+{#            </div>#}
+            <div class="card">
+                <div class="card-body">
+                    <form class="login100-form validate-form flex-sb flex-w" method="post" action="{% url 'login' %}">
+                        {% csrf_token %}
 
-    {% if form.errors %}
-        <p>Your phone number and otp didn't match. Please try again.</p>
-    {% endif %}
 
-    {% if next %}
-        {% if user.is_authenticated %}
-            <p>Your account doesn't have access to this page. To proceed,
-                please login with an account that has access.</p>
-        {% else %}
-            <p>Please login to see this page.</p>
-        {% endif %}
-    {% endif %}
+                        <div class="input-group mb-3">
+                            <span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span>
+                            <input id="id_phone_number"
+                                   name="phone_number" type="text" class="form-control"
+                                   placeholder="Mobile or Username" aria-label="Username"
+                                   aria-describedby="basic-addon1">
+                            <button class="btn btn-primary" type="button" id="request-otp">OTP
+                            </button>
+                        </div>
+                        <div class="wrap-input100 validate-input m-b-16">
+                            <div class="progress">
+                                <div id="ttl" class="progress-bar" role="progressbar" style="width: 0%;"
+                                     aria-valuenow="300"
+                                     aria-valuemin="0"
+                                     aria-valuemax="300">
+                                </div>
+                            </div>
+                        </div>
 
-    <form method="post" action="{% url 'login' %}">
-        {% csrf_token %}
-        <table>
+                        <div class="input-group mb-3">
+                            <span class="input-group-text" id="basic-addon2"><i class="bi bi-lock-fill"></i></span>
+                            <input type="password" name="otp" placeholder="OTP" class="form-control"
+                                   aria-label="OTP"
+                                   aria-describedby="basic-addon2">
+                        </div>
 
-            <tr>
-                <td>{{ form.phone_number.label_tag }}</td>
-                <td>{{ form.phone_number }}</td>
-                <td id="request-otp"><a class="btn btn-default">requet otp</a></td>
-                <td id="otp-result"></td>
-            </tr>
+                            <div class="row-cols-auto col text-center">
+                                <button class="btn btn-block btn-primary text-center w-50">
+                                    ورود
+                                </button>
+                            </div>
+                    </form>
+                    <div class="text-center mt-3" dir="rtl">
+                        {% include "include/messages.html" %}
+                        <div class="" id="alert_placeholder"></div>
+                    </div>
+                </div>
+            </div>
 
-            <tr>
-                <td>{{ form.otp.label_tag }}</td>
-                <td>{{ form.otp }}</td>
-            </tr>
-        </table>
 
-        <input type="submit" value="login"/>
-        <input type="hidden" name="next" value="{{ next }}"/>
-    </form>
+        </div>
+    </div>
+</div>
+<script>
+    bootstrap_alert = function () {
+    }
+    bootstrap_alert.warning = function (message) {
+        $('#alert_placeholder').html('<div class="alert alert-warning alert-dismissible fade show"><span>' + message + '</span></div>')
+    }
+    bootstrap_alert.info = function (message) {
+        $('#alert_placeholder').html('<div class="alert alert-info alert-dismissible fade show"><span>' + message + '</span></div>')
+    }
 
-    <script>
-        $("#request-otp").click(
-             function () {
-                 var phoneNumber = $('#id_phone_number')[0].value;
+    $("#request-otp").click(
+        function () {
+            console.log('otp requested')
+            var phoneNumber = $('#id_phone_number')[0].value;
+            console.log(phoneNumber)
 
-                 $.post("/request_otp/",{'phone_number': phoneNumber},function (result) {
-                        console.log(result);
-                        $("#otp-result")[0].innerHTML = 'otp expire: ' + result['otp_expire'] ;
-                });
-             }
-        );
+            var phoneNumberRegex = new RegExp('^(\\+98|0)?9\\d{9}$');
 
-    </script>
+            //if (phoneNumberRegex.test(phoneNumber)) {
+                var data = {'phone_number': phoneNumber}
+            //} else {
+            //    var data = {'username': mobileNumberOrUsername}
+            //}
 
-{% endblock %}
\ No newline at end of file
+            $.post("/request_otp/", data).done(
+                function (result) {
+                    console.log(result);
+                    if (result.hasOwnProperty('ttl')) {
+
+                        bootstrap_alert.info('رمز یکبار مصرف ارسال شد');
+                        $("#request-otp").prop('disabled', true)
+
+
+                        var i = result['ttl'];
+                        var counterBack = setInterval(function () {
+                            i--;
+                            if (i >= 0) {
+                                document.getElementById("ttl").style.width = (i + 1) / 3 + "%";
+                            } else {
+                                $("#request-otp").prop('disabled', false)
+                                document.getElementById("ttl").style.width = "0%";
+                                clearTimeout(counterBack);
+                            }
+
+                        }, 1000);
+                    } else {
+                        console.log(result)
+                    }
+
+                }
+            ).fail(function (result) {
+                bootstrap_alert.warning(result.responseJSON[Object.keys(result.responseJSON)[0]]);
+                console.log(result.responseJSON)
+            });
+        }
+    );
+</script>
+
+</body>
+</html>

{{ form.phone_number.label_tag }}	{{ form.phone_number }}	requet otp
{{ form.otp.label_tag }}	{{ form.otp }}