diff --git a/test/api/v3/integration/user/auth/POST-register_local.test.js b/test/api/v3/integration/user/auth/POST-register_local.test.js
index e435d77dd0..896e20a0c0 100644
--- a/test/api/v3/integration/user/auth/POST-register_local.test.js
+++ b/test/api/v3/integration/user/auth/POST-register_local.test.js
@@ -326,24 +326,6 @@ describe('POST /user/auth/local/register', () => {
       });
     });
 
-    it('requires minimum length for the password', async () => {
-      const username = generateRandomUserName();
-      const email = `${username}@example.com`;
-      const password = '1234567';
-      const confirmPassword = '1234567';
-
-      await expect(api.post('/user/auth/local/register', {
-        username,
-        email,
-        password,
-        confirmPassword,
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('invalidReqParams'),
-      });
-    });
-
     it('requires a username', async () => {
       const email = `${generateRandomUserName()}@example.com`;
       const password = 'password';
diff --git a/test/api/v3/integration/user/auth/PUT-user_update_password.test.js b/test/api/v3/integration/user/auth/PUT-user_update_password.test.js
index 94fbd4f3e2..a46eb0f916 100644
--- a/test/api/v3/integration/user/auth/PUT-user_update_password.test.js
+++ b/test/api/v3/integration/user/auth/PUT-user_update_password.test.js
@@ -82,20 +82,6 @@ describe('PUT /user/auth/update-password', async () => {
     });
   });
 
-  it('returns an error when newPassword is too short', async () => {
-    const body = {
-      password,
-      newPassword: '1234567',
-      confirmPassword: '1234567',
-    };
-
-    await expect(user.put(ENDPOINT, body)).to.eventually.be.rejected.and.eql({
-      code: 400,
-      error: 'BadRequest',
-      message: t('invalidReqParams'),
-    });
-  });
-
   it('returns an error when confirmPassword is missing', async () => {
     const body = {
       password,
diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss
index 0a2220a215..bc649e1dc5 100644
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -20,7 +20,7 @@
     @include btn-focus-hover-shadow();
   }
 
-  &:hover:not(.btn-flat):not(.disabled):not(:disabled) {
+  &:hover:not(.btn-flat):not(.disabled) {
     @include btn-focus-hover-shadow();
     border-color: transparent;
   }
@@ -49,7 +49,7 @@
     background: $purple-200;
   }
 
-  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled), &:focus:not(:disabled):not(.disabled) {
+  &:hover:not(:disabled), &:active, &.active, &:focus {
     background: #5d3b9c !important;
     color: $white;
   }
@@ -59,7 +59,7 @@
   color: $gray-50;
   background: $white !important;
 
-  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled), &:focus:not(:disabled):not(.disabled) {
+  &:hover:not(:disabled):not(.disabled), &:active, &.active, &:focus {
     color: $purple-200 !important;
   }
 
@@ -80,7 +80,7 @@
     background: $green-100;
   }
 
-  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
+  &:hover:not(:disabled), &:active, &.active {
     background: $green-50;
   }
 }
@@ -96,12 +96,8 @@
     background: $blue-50;
   }
 
-  &:hover:not(:disabled):not(.disabled) {
-    background-color: $blue-100;
-  }
-
-  &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
-    background: $blue-50;
+  &:hover:not(:disabled), &:active, &.active {
+    background: $blue-100;
   }
 }
 
@@ -112,11 +108,7 @@
     background: $red-50;
   }
 
-  &:hover:not(:disabled):not(.disabled) {
-    background: $red-100;
-  }
-
-  &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
+  &:hover:not(:disabled), &:active, &.active {
     background: $red-100;
   }
 }
diff --git a/website/client/src/assets/scss/form.scss b/website/client/src/assets/scss/form.scss
index 2e5934f5d5..78b7e5397a 100644
--- a/website/client/src/assets/scss/form.scss
+++ b/website/client/src/assets/scss/form.scss
@@ -65,7 +65,6 @@ input, textarea, input.form-control, textarea.form-control {
     padding-right: 40px;
     background-image: url(~@/assets/svg/for-css/alert.svg);
     background-size: 16px 16px;
-    border-color: $red-100 !important;
   }
 }
 
@@ -277,19 +276,3 @@ $bg-disabled-control: #34303a;
 .toggle-switch-container.no-margin {
   margin-top: 0 !important;
 }
-
-
-
-// Disable default style Firefox for invalid elements.
-// Selectors taken from view-source:resource://gre-resources/forms.css on Firefox
-:not(output):-moz-ui-invalid {
-  box-shadow: none;
-}
-
-:not(output):-moz-ui-invalid:-moz-focusring {
-  box-shadow: none;
-}
-
-output:-moz-ui-invalid {
-  color: inherit;
-}
diff --git a/website/client/src/components/auth/authForm.vue b/website/client/src/components/auth/authForm.vue
index 993ed9cb10..7d3fa83e7d 100644
--- a/website/client/src/components/auth/authForm.vue
+++ b/website/client/src/components/auth/authForm.vue
@@ -46,13 +46,6 @@
         :placeholder="$t('usernamePlaceholder')"
         :class="{'input-valid': usernameValid, 'input-invalid': usernameInvalid}"
       >
-      <div
-        v-for="issue in usernameIssues"
-        :key="issue"
-        class="input-error"
-      >
-        {{ issue }}
-      </div>
     </div>
     <div
       v-if="!registering"
@@ -104,17 +97,7 @@
         class="form-control"
         type="password"
         :placeholder="$t(registering ? 'passwordPlaceholder' : 'password')"
-        :class="{
-          'input-valid': registering ? passwordValid : false,
-          'input-invalid': registering ? passwordInvalid: false,
-        }"
       >
-      <div
-        v-if="passwordInvalid && registering"
-        class="input-error"
-      >
-        {{ $t('minPasswordLength') }}
-      </div>
     </div>
     <div
       v-if="registering"
@@ -132,12 +115,6 @@
         :placeholder="$t('confirmPasswordPlaceholder')"
         :class="{'input-invalid': passwordConfirmInvalid, 'input-valid': passwordConfirmValid}"
       >
-      <div
-        v-if="passwordConfirmInvalid"
-        class="input-error"
-      >
-        {{ $t('passwordConfirmationMatch') }}
-      </div>
       <small
         v-once
         class="form-text"
@@ -206,11 +183,8 @@
       text-align: center;
     }
 
-    .input-error {
-      margin-top: 0.25em;
-      font-weight: normal;
-      font-size: 90%;
-      width: 100%;
+    .input-valid {
+      color: #fff;
     }
   }
 </style>
@@ -220,7 +194,7 @@ import hello from 'hellojs';
 import debounce from 'lodash/debounce';
 import isEmail from 'validator/lib/isEmail';
 import { setUpAxios } from '@/libs/auth';
-import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
+
 import facebookSquareIcon from '@/assets/svg/facebook-square.svg';
 import googleIcon from '@/assets/svg/google.svg';
 
@@ -249,7 +223,6 @@ export default {
       return isEmail(this.email);
     },
     emailInvalid () {
-      if (this.email.length <= 3) return false;
       return !this.emailValid;
     },
     usernameValid () {
@@ -257,23 +230,13 @@ export default {
       return this.usernameIssues.length === 0;
     },
     usernameInvalid () {
-      if (this.username.length < 1) return false;
       return !this.usernameValid;
     },
-    passwordValid () {
-      if (this.password.length <= 0) return false;
-      return this.password.length >= MINIMUM_PASSWORD_LENGTH;
-    },
-    passwordInvalid () {
-      if (this.password.length <= 0) return false;
-      return this.password.length < MINIMUM_PASSWORD_LENGTH;
-    },
     passwordConfirmValid () {
       if (this.passwordConfirm.length <= 3) return false;
       return this.passwordConfirm === this.password;
     },
     passwordConfirmInvalid () {
-      if (this.passwordConfirm.length <= 3) return false;
       return !this.passwordConfirmValid;
     },
   },
diff --git a/website/client/src/components/auth/registerLoginReset.vue b/website/client/src/components/auth/registerLoginReset.vue
index 9074a36a32..e76d1a902d 100644
--- a/website/client/src/components/auth/registerLoginReset.vue
+++ b/website/client/src/components/auth/registerLoginReset.vue
@@ -6,7 +6,8 @@
     <form
       v-if="!forgotPassword && !resetPasswordSetNewOne"
       id="login-form"
-      @submit.prevent.stop="handleSubmit"
+      @submit.prevent="handleSubmit"
+      @keyup.enter="handleSubmit"
     >
       <div class="text-center">
         <div>
@@ -68,7 +69,7 @@
         <input
           id="usernameInput"
           v-model="username"
-          class="form-control input-with-error"
+          class="form-control"
           type="text"
           :placeholder="$t('usernamePlaceholder')"
           :class="{'input-valid': usernameValid, 'input-invalid': usernameInvalid}"
@@ -131,17 +132,7 @@
           class="form-control"
           type="password"
           :placeholder="$t(registering ? 'passwordPlaceholder' : 'password')"
-          :class="{
-            'input-invalid input-with-error': registering && passwordInvalid,
-            'input-valid': registering && passwordValid
-          }"
         >
-        <div
-          v-if="passwordInvalid && registering"
-          class="input-error"
-        >
-          {{ $t('minPasswordLength') }}
-        </div>
       </div>
       <div
         v-if="registering"
@@ -154,17 +145,11 @@
         <input
           id="confirmPasswordInput"
           v-model="passwordConfirm"
-          class="form-control input-with-error"
+          class="form-control"
           type="password"
           :placeholder="$t('confirmPasswordPlaceholder')"
           :class="{'input-invalid': passwordConfirmInvalid, 'input-valid': passwordConfirmValid}"
         >
-        <div
-          v-if="passwordConfirmInvalid"
-          class="input-error"
-        >
-          {{ $t('passwordConfirmationMatch') }}
-        </div>
         <small
           v-once
           class="form-text"
@@ -172,22 +157,22 @@
         ></small>
       </div>
       <div class="text-center">
-        <button
+        <div
           v-if="registering"
-          type="submit"
+          v-once
           class="btn btn-info"
-          :disabled="signupFormInvalid"
+          @click="register()"
         >
           {{ $t('joinHabitica') }}
-        </button>
-        <button
+        </div>
+        <div
           v-if="!registering"
           v-once
-          type="submit"
           class="btn btn-info"
+          @click="login()"
         >
           {{ $t('login') }}
-        </button>
+        </div>
         <div class="toggle-links">
           <router-link
             v-if="registering"
@@ -441,14 +426,10 @@
       color: $white;
     }
 
-    .input-with-error.input-invalid {
+    #usernameInput.input-invalid {
       margin-bottom: 0.5em;
     }
 
-    #confirmPasswordInput + .input-error {
-      margin-bottom: 2em;
-    }
-
     .form-text {
       font-size: 14px;
       color: $white;
@@ -499,7 +480,7 @@
       background-image: url('~@/assets/images/auth/seamless_mountains_demo.png');
       background-repeat: repeat-x;
       width: 100%;
-      height: 300px;
+      height: 500px;
       position: absolute;
       z-index: 0;
       bottom: 0;
@@ -531,6 +512,7 @@
     color: #fff;
     font-size: 90%;
     width: 100%;
+    text-align: center;
   }
 </style>
 
@@ -540,7 +522,6 @@ import hello from 'hellojs';
 import debounce from 'lodash/debounce';
 import isEmail from 'validator/lib/isEmail';
 
-import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import gryphon from '@/assets/svg/gryphon.svg';
 import habiticaIcon from '@/assets/svg/habitica-logo.svg';
 import facebookSquareIcon from '@/assets/svg/facebook-square.svg';
@@ -599,14 +580,6 @@ export default {
       if (this.username.length < 1) return false;
       return !this.usernameValid;
     },
-    passwordValid () {
-      if (this.password.length <= 0) return false;
-      return this.password.length >= MINIMUM_PASSWORD_LENGTH;
-    },
-    passwordInvalid () {
-      if (this.password.length <= 0) return false;
-      return this.password.length < MINIMUM_PASSWORD_LENGTH;
-    },
     passwordConfirmValid () {
       if (this.passwordConfirm.length <= 3) return false;
       return this.passwordConfirm === this.password;
@@ -615,12 +588,6 @@ export default {
       if (this.passwordConfirm.length <= 3) return false;
       return !this.passwordConfirmValid;
     },
-    signupFormInvalid () {
-      return this.usernameInvalid
-        || this.emailInvalid
-        || this.passwordInvalid
-        || this.passwordConfirmInvalid;
-    },
   },
   watch: {
     $route: {
diff --git a/website/client/src/components/static/home.vue b/website/client/src/components/static/home.vue
index 2f1919cbd6..ed3cb2d511 100644
--- a/website/client/src/components/static/home.vue
+++ b/website/client/src/components/static/home.vue
@@ -53,9 +53,9 @@
             <div class="strike">
               <span>{{ $t('or') }}</span>
             </div>
-            <form
+            <div
               class="form"
-              @submit.prevent.stop="register()"
+              @keyup.enter="register()"
             >
               <p class="form-text">
                 {{ $t('usernameLimitations') }}
@@ -63,7 +63,7 @@
               <input
                 id="usernameInput"
                 v-model="username"
-                class="form-control input-with-error"
+                class="form-control"
                 type="text"
                 :placeholder="$t('username')"
                 :class="{'input-valid': usernameValid, 'input-invalid': usernameInvalid}"
@@ -85,49 +85,32 @@
               >
               <input
                 v-model="password"
-                class="form-control input-with-error"
+                class="form-control"
                 type="password"
                 :placeholder="$t('password')"
-                :class="{
-                  'input-valid': passwordValid,
-                  'input-invalid': passwordInvalid,
-                }"
+                :class="{'input-valid': password.length > 3}"
               >
-              <div
-                v-if="passwordInvalid"
-                class="input-error"
-              >
-                {{ $t('minPasswordLength') }}
-              </div>
               <input
                 v-model="passwordConfirm"
-                class="form-control input-with-error"
+                class="form-control"
                 type="password"
                 :placeholder="$t('confirmPassword')"
                 :class="{
                   'input-invalid': passwordConfirmInvalid,
                   'input-valid': passwordConfirmValid}"
               >
-              <div
-                v-if="passwordConfirmInvalid"
-                class="input-error"
-              >
-                {{ $t('passwordConfirmationMatch') }}
-              </div>
               <p
                 v-once
                 class="form-text"
                 v-html="$t('termsAndAgreement')"
               ></p>
               <button
-                class="btn btn-block btn-info sign-up"
-                :disabled="signupFormInvalid"
-                type="submit"
+                class="sign-up"
                 @click="register()"
               >
                 {{ $t('signup') }}
               </button>
-            </form>
+            </div>
           </div>
           <div class="col-12">
             <div
@@ -536,7 +519,7 @@
       transition: border .5s, color .5s;
     }
 
-    .input-invalid.input-with-error {
+    #usernameInput.input-invalid {
       margin-bottom: 0.5em;
     }
 
@@ -554,9 +537,21 @@
       background-color: #36205d;
     }
 
-    .sign-up {
-      padding-top: 11px;
-      padding-bottom: 11px;
+    button.sign-up {
+      width: 100%;
+      height: 48px;
+      color: #fff;
+      border: none;
+      border-radius: 2px;
+      background-color: #2995cd;
+      font-size: 16px;
+      transition: all .5s ease;
+    }
+
+    .sign-up:hover {
+      background-color: #50b5e9;
+      box-shadow: 0 4px 4px 0 rgba(26, 24, 29, 0.16), 0 1px 8px 0 rgba(26, 24, 29, 0.12);
+      cursor: pointer;
     }
 
     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
@@ -774,6 +769,7 @@
     color: #fff;
     font-size: 90%;
     width: 100%;
+    text-align: center;
     margin-bottom: 1em;
   }
 </style>
@@ -800,7 +796,6 @@ import lifehacker from '@/assets/images/home/lifehacker.svg';
 import makeuseof from '@/assets/images/home/make-use-of.svg';
 import thenewyorktimes from '@/assets/images/home/the-new-york-times.svg';
 import * as Analytics from '@/libs/analytics';
-import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 
 export default {
   data () {
@@ -849,14 +844,6 @@ export default {
       if (this.username.length < 1) return false;
       return !this.usernameValid;
     },
-    passwordValid () {
-      if (this.password.length <= 0) return false;
-      return this.password.length >= MINIMUM_PASSWORD_LENGTH;
-    },
-    passwordInvalid () {
-      if (this.password.length <= 0) return false;
-      return this.password.length < MINIMUM_PASSWORD_LENGTH;
-    },
     passwordConfirmValid () {
       if (this.passwordConfirm.length <= 3) return false;
       return this.passwordConfirm === this.password;
@@ -865,12 +852,6 @@ export default {
       if (this.passwordConfirm.length <= 3) return false;
       return this.passwordConfirm !== this.password;
     },
-    signupFormInvalid () {
-      return this.usernameInvalid
-        || this.emailInvalid
-        || this.passwordInvalid
-        || this.passwordConfirmInvalid;
-    },
   },
   watch: {
     username () {
diff --git a/website/client/src/components/static/staticWrapper.vue b/website/client/src/components/static/staticWrapper.vue
index 922a33e840..89cb9fb77c 100644
--- a/website/client/src/components/static/staticWrapper.vue
+++ b/website/client/src/components/static/staticWrapper.vue
@@ -85,6 +85,10 @@
     }
   }
 
+  #bottom-wrap.purple-4 {
+    background-color: #271b3d;
+  }
+
   #purple-footer {
     background-color: #271b3d;
 
@@ -111,6 +115,33 @@
     }
   }
 
+  #bottom-wrap {
+    padding-top: 10em;
+  }
+
+  #bottom-background {
+    position: relative;
+
+    .seamless_mountains_demo_repeat {
+      background-image: url('~@/assets/images/auth/seamless_mountains_demo.png');
+      background-repeat: repeat-x;
+      width: 100%;
+      height: 300px;
+      position: absolute;
+      z-index: 0;
+      bottom: 0;
+    }
+
+    .midground_foreground_extended2 {
+      background-image: url('~@/assets/images/auth/midground_foreground_extended2.png');
+      position: relative;
+      width: 1500px;
+      max-width: 100%;
+      height: 150px;
+      margin: 0 auto;
+    }
+  }
+
   .static-wrapper {
     .container-fluid {
       margin: 5em 2em 2em 2em;
@@ -140,39 +171,6 @@
   }
 </style>
 
-<style lang="scss" scoped>
-  #bottom-wrap.purple-4 {
-    background-color: #271b3d;
-  }
-
-  #bottom-wrap {
-    padding-top: 10em;
-  }
-
-  #bottom-background {
-    position: relative;
-
-    .seamless_mountains_demo_repeat {
-      background-image: url('~@/assets/images/auth/seamless_mountains_demo.png');
-      background-repeat: repeat-x;
-      width: 100%;
-      height: 300px;
-      position: absolute;
-      z-index: 0;
-      bottom: 0;
-    }
-
-    .midground_foreground_extended2 {
-      background-image: url('~@/assets/images/auth/midground_foreground_extended2.png');
-      position: relative;
-      width: 1500px;
-      max-width: 100%;
-      height: 150px;
-      margin: 0 auto;
-    }
-  }
-</style>
-
 <script>
 import AppFooter from '@/components/appFooter';
 import StaticHeader from './header.vue';
diff --git a/website/common/locales/en/front.json b/website/common/locales/en/front.json
index 148da9d038..ccb45f30a0 100644
--- a/website/common/locales/en/front.json
+++ b/website/common/locales/en/front.json
@@ -276,7 +276,6 @@
   "usernameTOSRequirements": "Usernames must conform to our <a href='/static/terms' target='_blank'>Terms of Service</a> and <a href='/static/community-guidelines' target='_blank'>Community Guidelines</a>. If you didn’t previously set a login name, your username was auto-generated.",
   "usernameTaken": "Username already taken.",
   "passwordConfirmationMatch": "Password confirmation doesn't match password.",
-  "minPasswordLength": "Password must be 8 characters or more.",
   "passwordResetPage": "Reset Password",
   "passwordReset": "If we have your email on file, instructions for setting a new password have been sent to your email.",
   "invalidLoginCredentialsLong": "Uh-oh - your email address / username or password is incorrect.\n- Make sure they are typed correctly. Your username and password are case-sensitive.\n- You may have signed up with Facebook or Google-sign-in, not email so double-check by trying them.\n- If you forgot your password, click \"Forgot Password\".",
diff --git a/website/common/script/constants.js b/website/common/script/constants.js
index 29541c23eb..9d4f4137c2 100644
--- a/website/common/script/constants.js
+++ b/website/common/script/constants.js
@@ -24,5 +24,3 @@ export const SUPPORTED_SOCIAL_NETWORKS = [
 export const GUILDS_PER_PAGE = 30; // number of guilds to return per page when using pagination
 
 export const PARTY_LIMIT_MEMBERS = 30;
-
-export const MINIMUM_PASSWORD_LENGTH = 8;
diff --git a/website/common/script/index.js b/website/common/script/index.js
index 3f2ce77b2b..3e12ebd7fe 100644
--- a/website/common/script/index.js
+++ b/website/common/script/index.js
@@ -28,7 +28,6 @@ import {
   CHAT_FLAG_LIMIT_FOR_HIDING,
   CHAT_FLAG_FROM_MOD,
   CHAT_FLAG_FROM_SHADOW_MUTE,
-  MINIMUM_PASSWORD_LENGTH,
 } from './constants';
 
 // TODO under api.libs.statHelpers?
@@ -130,7 +129,6 @@ api.constants = {
   CHAT_FLAG_LIMIT_FOR_HIDING,
   CHAT_FLAG_FROM_MOD,
   CHAT_FLAG_FROM_SHADOW_MUTE,
-  MINIMUM_PASSWORD_LENGTH,
 };
 // TODO Move these under api.constants
 api.maxLevel = MAX_LEVEL;
diff --git a/website/server/controllers/api-v3/auth.js b/website/server/controllers/api-v3/auth.js
index 74dfd427fe..8113eb1c25 100644
--- a/website/server/controllers/api-v3/auth.js
+++ b/website/server/controllers/api-v3/auth.js
@@ -245,10 +245,6 @@ api.updatePassword = {
       },
       newPassword: {
         notEmpty: { errorMessage: res.t('missingNewPassword') },
-        isLength: {
-          options: { min: common.constants.MINIMUM_PASSWORD_LENGTH },
-          errorMessage: res.t('minPasswordLength'),
-        },
       },
       confirmPassword: {
         notEmpty: { errorMessage: res.t('missingNewPassword') },
diff --git a/website/server/libs/auth/index.js b/website/server/libs/auth/index.js
index 495096062e..af5e4522af 100644
--- a/website/server/libs/auth/index.js
+++ b/website/server/libs/auth/index.js
@@ -93,13 +93,8 @@ async function registerLocal (req, res, { isV3 = false }) {
     },
     password: {
       notEmpty: true,
-
       errorMessage: res.t('missingPassword'),
       equals: { options: [req.body.confirmPassword], errorMessage: res.t('passwordConfirmationMatch') },
-      isLength: {
-        options: { min: common.constants.MINIMUM_PASSWORD_LENGTH },
-        errorMessage: res.t('minPasswordLength'),
-      },
     },
   });