diff --git a/website/client/components/auth/authForm.vue b/website/client/components/auth/authForm.vue
index 5f4854d78e..471474156c 100644
--- a/website/client/components/auth/authForm.vue
+++ b/website/client/components/auth/authForm.vue
@@ -82,6 +82,7 @@
 import hello from 'hellojs';
 import { setUpAxios } from 'client/libs/auth';
 import debounce from 'lodash/debounce';
+import validator from 'validator';
 
 import facebookSquareIcon from 'assets/svg/facebook-square.svg';
 import googleIcon from 'assets/svg/google.svg';
@@ -115,13 +116,13 @@ export default {
   computed: {
     emailValid () {
       if (this.email.length <= 3) return false;
-      return this.validateEmail(this.email);
+      return validator.isEmail(this.email);
     },
     emailInvalid () {
       return !this.emailValid;
     },
     usernameValid () {
-      if (this.username.length <= 3) return false;
+      if (this.username.length < 1) return false;
       return this.usernameIssues.length === 0;
     },
     usernameInvalid () {
@@ -143,7 +144,7 @@ export default {
   methods: {
     // eslint-disable-next-line func-names
     validateUsername: debounce(function (username) {
-      if (username.length <= 3) {
+      if (username.length < 1) {
         return;
       }
       this.$store.dispatch('auth:verifyUsername', {
@@ -156,10 +157,6 @@ export default {
         }
       });
     }, 500),
-    validateEmail (email) {
-      let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      return re.test(email);
-    },
     // @TODO: Abstract hello in to action or lib
     async socialAuth (network) {
       try {
diff --git a/website/client/components/auth/registerLoginReset.vue b/website/client/components/auth/registerLoginReset.vue
index 88ea5b249d..c0f42c2870 100644
--- a/website/client/components/auth/registerLoginReset.vue
+++ b/website/client/components/auth/registerLoginReset.vue
@@ -295,6 +295,7 @@
 import axios from 'axios';
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
+import validator from 'validator';
 
 import gryphon from 'assets/svg/gryphon.svg';
 import habiticaIcon from 'assets/svg/habitica-logo.svg';
@@ -340,18 +341,18 @@ export default {
     },
     emailValid () {
       if (this.email.length <= 3) return false;
-      return this.validateEmail(this.email);
+      return validator.isEmail(this.email);
     },
     emailInvalid () {
       if (this.email.length <= 3) return false;
       return !this.emailValid;
     },
     usernameValid () {
-      if (this.username.length <= 3) return false;
+      if (this.username.length < 1) return false;
       return this.usernameIssues.length === 0;
     },
     usernameInvalid () {
-      if (this.username.length <= 3) return false;
+      if (this.username.length < 1) return false;
       return !this.usernameValid;
     },
     passwordConfirmValid () {
@@ -415,10 +416,6 @@ export default {
         }
       });
     }, 500),
-    validateEmail (email) {
-      let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      return re.test(email);
-    },
     async register () {
       // @TODO do not use alert
       if (!this.email) {
diff --git a/website/client/components/settings/verifyUsername.vue b/website/client/components/settings/verifyUsername.vue
index da3babcf85..024b1f190e 100644
--- a/website/client/components/settings/verifyUsername.vue
+++ b/website/client/components/settings/verifyUsername.vue
@@ -54,9 +54,6 @@
       padding-right: 2rem;
     }
     .modal-dialog   {
-      -webkit-transform: translate(-5%, calc(50vh - 60%));
-      -ms-transform: translate(0, 50vh) translate(-5%, -60%);
-      -o-transform: translate(-5%, calc(50vh - 60%));
       transform: translate(0, 50vh) translate(-5%, -60%);
     }
   }
@@ -162,23 +159,23 @@
         user: 'user.data',
       }),
       displayNameInvalid () {
-        if (this.temporaryDisplayName.length <= 1) return false;
+        if (this.temporaryDisplayName.length < 1) return false;
         return !this.displayNameValid;
       },
       displayNameValid () {
-        if (this.temporaryDisplayName.length <= 1) return false;
+        if (this.temporaryDisplayName.length < 1) return false;
         return this.displayNameIssues.length === 0;
       },
       usernameCannotSubmit () {
-        if (this.temporaryUsername.length <= 1) return true;
+        if (this.temporaryUsername.length < 1) return true;
         return !this.usernameValid || !this.displayNameValid;
       },
       usernameInvalid () {
-        if (this.temporaryUsername.length <= 1) return false;
+        if (this.temporaryUsername.length < 1) return false;
         return !this.usernameValid;
       },
       usernameValid () {
-        if (this.temporaryUsername.length <= 1) return false;
+        if (this.temporaryUsername.length < 1) return false;
         return this.usernameIssues.length === 0;
       },
     },
diff --git a/website/client/components/static/home.vue b/website/client/components/static/home.vue
index 7050a08e32..27dfdc702b 100644
--- a/website/client/components/static/home.vue
+++ b/website/client/components/static/home.vue
@@ -560,6 +560,7 @@
 <script>
   import hello from 'hellojs';
   import debounce from 'lodash/debounce';
+  import validator from 'validator';
   import googlePlay from 'assets/images/home/google-play-badge.svg';
   import iosAppStore from 'assets/images/home/ios-app-store.svg';
   import iphones from 'assets/images/home/iphones.svg';
@@ -626,18 +627,18 @@
     computed: {
       emailValid () {
         if (this.email.length <= 3) return false;
-        return this.validateEmail(this.email);
+        return validator.isEmail(this.email);
       },
       emailInvalid () {
         if (this.email.length <= 3) return false;
-        return !this.validateEmail(this.email);
+        return !validator.isEmail(this.email);
       },
       usernameValid () {
-        if (this.username.length <= 3) return false;
+        if (this.username.length < 1) return false;
         return this.usernameIssues.length === 0;
       },
       usernameInvalid () {
-        if (this.username.length <= 3) return false;
+        if (this.username.length < 1) return false;
         return !this.usernameValid;
       },
       passwordConfirmValid () {
@@ -655,13 +656,9 @@
       },
     },
     methods: {
-      validateEmail (email) {
-        let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        return re.test(email);
-      },
       // eslint-disable-next-line func-names
       validateUsername: debounce(function (username) {
-        if (username.length <= 3) {
+        if (username.length < 1) {
           return;
         }
         this.$store.dispatch('auth:verifyUsername', {
diff --git a/website/client/components/yesterdailyModal.vue b/website/client/components/yesterdailyModal.vue
index cff077257c..6b258b860a 100644
--- a/website/client/components/yesterdailyModal.vue
+++ b/website/client/components/yesterdailyModal.vue
@@ -25,9 +25,6 @@
 <style lang="scss">
   #yesterdaily___BV_modal_outer_ {
     .modal-dialog   {
-      -webkit-transform: translate(-5%, calc(50vh - 60%));
-      -ms-transform: translate(0, 50vh) translate(-5%, -60%);
-      -o-transform: translate(-5%, calc(50vh - 60%));
       transform: translate(0, 50vh) translate(-5%, -60%);
     }
   }