diff --git a/public/static/app/css/home.css b/public/static/app/css/home.css
index 732f8d19..9ca6bfbc 100644
--- a/public/static/app/css/home.css
+++ b/public/static/app/css/home.css
@@ -113,6 +113,7 @@ body #mask {
   opacity: 0.4;
   background-color: #1b1f23;
   z-index: 1;
+  transition: all 1s;
 }
 #login-box {
   display: flex;
@@ -161,4 +162,7 @@ body.fade #login-box {
 body.fade #bg {
   filter: blur(2px);
 }
+body.fade #mask {
+  opacity: 0.7;
+}
 /*# sourceMappingURL=home.css.map */
\ No newline at end of file
diff --git a/public/static/app/css/home.css.map b/public/static/app/css/home.css.map
index f20b66e4..656fb71c 100644
--- a/public/static/app/css/home.css.map
+++ b/public/static/app/css/home.css.map
@@ -1 +1 @@
-{"version":3,"sources":["home.less"],"names":[],"mappings":"AAAA;AAAG,CAAC;AAAS,CAAC;EACZ,sBAAA;;AAGF;EACE,cAAA;;AAGF;AAAG,CAAC;AAAQ,CAAC;AAAS,CAAC;EACrB,qBAAA;;AAGF,CAAC;EACC,mBAAA;;AAGF;AAAO;AAAM;AAAS;AAAK;AAAQ;AAAM;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAQ;AAAM;AAAQ;AAAO;AAAQ;AAAI;AAAM;AAAM;AAAM;AAAK;AAAI;AAAG;AAAS;AAAM;AAAS;AAAO;AAAU;AAAM;AAAI;EACzL,UAAA;EACA,SAAA;EACA,SAAA;EACA,eAAA;;AAGF;EACE,kBAAA;EACA,gBAAA;;AAGF;AAAM;EACJ,WAAA;EACA,SAAA;EACA,UAAA;;AAGF;AAAM,IAAK;EACT,eAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;EACA,QAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,qBAAA;;AAGF;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAsB,4BAAtB;EACA,4BAAA;EACA,sBAAA;EACA,2BAAA;EACA,QAAQ,SAAR;EACA,6CAAA;;AAGF;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,WAAW,qBAAX;EACA,yBAAA;EACA,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;EACA,oBAAA;EACA,mBAAA;EACA,8CAAA;EACA,UAAA;;AAGF;EACE,YAAA;EACA,yBAAA;EACA,UAAA;;AAGF;EACE,aAAA;EACA,sBAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAAA;EACA,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,gDAAA;EACA,oBAAA;EACA,WAAW,QAAX;EACA,UAAA;EACA,UAAA;;AAbF,UAeE;EACE,WAAA;EACA,mBAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;EACA,eAAA;EACA,yBAAA;;AAEA,UATF,MASG;EACC,mBAAA;;AAzBN,UA6BE;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,mBAAA;EACA,kBAAA;EACA,YAAA;EACA,iBAAA;EACA,gBAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;;AAIJ,IAAI,KACF;EACE,UAAA;EACA,WAAW,UAAX;;AAHJ,IAAI,KAKF;EACE,QAAQ,SAAR","file":"home.css"}
\ No newline at end of file
+{"version":3,"sources":["home.less"],"names":[],"mappings":"AAAA;AAAG,CAAC;AAAS,CAAC;EACZ,sBAAA;;AAGF;EACE,cAAA;;AAGF;AAAG,CAAC;AAAQ,CAAC;AAAS,CAAC;EACrB,qBAAA;;AAGF,CAAC;EACC,mBAAA;;AAGF;AAAO;AAAM;AAAS;AAAK;AAAQ;AAAM;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAQ;AAAM;AAAQ;AAAO;AAAQ;AAAI;AAAM;AAAM;AAAM;AAAK;AAAI;AAAG;AAAS;AAAM;AAAS;AAAO;AAAU;AAAM;AAAI;EACzL,UAAA;EACA,SAAA;EACA,SAAA;EACA,eAAA;;AAGF;EACE,kBAAA;EACA,gBAAA;;AAGF;AAAM;EACJ,WAAA;EACA,SAAA;EACA,UAAA;;AAGF;AAAM,IAAK;EACT,eAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;EACA,QAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,qBAAA;;AAGF;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAsB,4BAAtB;EACA,4BAAA;EACA,sBAAA;EACA,2BAAA;EACA,QAAQ,SAAR;EACA,6CAAA;;AAGF;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,WAAW,qBAAX;EACA,yBAAA;EACA,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;EACA,oBAAA;EACA,mBAAA;EACA,8CAAA;EACA,UAAA;;AAGF;EACE,YAAA;EACA,yBAAA;EACA,UAAA;EACA,kBAAA;;AAGF;EACE,aAAA;EACA,sBAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAAA;EACA,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,gDAAA;EACA,oBAAA;EACA,WAAW,QAAX;EACA,UAAA;EACA,UAAA;;AAbF,UAeE;EACE,WAAA;EACA,mBAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;EACA,eAAA;EACA,yBAAA;;AAEA,UATF,MASG;EACC,mBAAA;;AAzBN,UA6BE;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,mBAAA;EACA,kBAAA;EACA,YAAA;EACA,iBAAA;EACA,gBAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;;AAIJ,IAAI,KACF;EACE,UAAA;EACA,WAAW,UAAX;;AAHJ,IAAI,KAKF;EACE,QAAQ,SAAR;;AANJ,IAAI,KAQF;EACE,YAAA","file":"home.css"}
\ No newline at end of file
diff --git a/public/static/app/css/home.less b/public/static/app/css/home.less
index c9fc75d9..0a6cddce 100644
--- a/public/static/app/css/home.less
+++ b/public/static/app/css/home.less
@@ -85,6 +85,7 @@ body, body #mask {
   opacity: .4;
   background-color: #1b1f23;
   z-index: 1;
+  transition: all 1s;
 }
 
 #login-box {
@@ -139,4 +140,7 @@ body.fade {
   #bg {
     filter: blur(2px);
   }
+  #mask {
+    opacity: .7;
+  }
 }