diff --git a/application/index/view/index/home.html b/application/index/view/index/home.html
index 1d675e99..7bd93917 100644
--- a/application/index/view/index/home.html
+++ b/application/index/view/index/home.html
@@ -24,8 +24,11 @@
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
 <script>
   $('#login-btn').click(function () {
-    $(this).hide();
-    $('body').addClass('fade')
+    $('#login-box').css('display', 'flex')
+    setTimeout(function () {
+      $(this).hide();
+      $('body').addClass('fade')
+    }.bind(this), 60)
   });
   $('#login').click(function () {
     $.ajax({
diff --git a/public/static/app/css/home.css b/public/static/app/css/home.css
index f3ea19c0..55a2b3d6 100644
--- a/public/static/app/css/home.css
+++ b/public/static/app/css/home.css
@@ -116,7 +116,7 @@ body #mask {
   transition: all 1s;
 }
 #login-box {
-  display: flex;
+  display: none;
   flex-direction: column;
   max-width: 500px;
   max-height: 300px;
diff --git a/public/static/app/css/home.less b/public/static/app/css/home.less
index 53d18000..57f7b55a 100644
--- a/public/static/app/css/home.less
+++ b/public/static/app/css/home.less
@@ -89,7 +89,7 @@ body, body #mask {
 }
 
 #login-box {
-  display: flex;
+  display: none;
   flex-direction: column;
   max-width: 500px;
   max-height: 300px;