diff --git a/templates/base.html b/templates/base.html
index 8744ad9..48ba9c6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -80,7 +80,7 @@
                                 <div class="user actions pull-right">
                                     <a style="color:#777777">شما وارد نشده‌اید</a>
                                     |
-                                    <a href="{% url 'login' %}">ورود</a>
+                                    <a href="#login_modal" data-toggle="modal" data-target="#login_modal">ورود</a>
                                 </div>
                             </div>
 
@@ -134,6 +134,54 @@
 
 </footer>
 {% endblock %}
+
+<div class="modal fade" tabindex="-1" role="dialog" id="login_modal">
+    <form action="{% url 'login' %}" method="post">
+        {% csrf_token %}
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">Login</h4>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group">
+                        <div class="input-group">
+                            <div class="input-group-addon">
+                                <div id="username">Username</div>
+                            </div>
+                            <input type="text" class="form-control" name="username">
+
+                            <div class="input-group-addon">@ce.sharif.edu</div>
+                        </div>
+                        <div>{{ form.errors.username }}</div>
+                    </div>
+                    <div class="form-group">
+                        <div class="input-group">
+                            <div class="input-group-addon">
+                                <div id="password">Password</div>
+                            </div>
+                            <input type="password" class="form-control" name="password">
+                        </div>
+                        <div>{{ form.errors.password }}</div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <div class="form-actions">
+                        <div class="table-row">
+                            <div class="table-cell">
+                                <button type="submit" class="btn btn-primary">Login</button>
+                            </div>
+                            <label class="flush-right table-cell dropdown-toggle"><a id="forgot" href="#">Forgot
+                                Password</a></label>
+                        </div>
+                    </div>
+                </div>
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </form>
+</div><!-- /.modal -->
 </body>
 <script>
     (function (i, s, o, g, r, a, m) {
diff --git a/templates/login.html b/templates/login.html
index 017edee..2ed490e 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -62,6 +62,7 @@
                         </div>
                     </div>
                 </div>
+            </div>
         </form>
     </div>
 </div>