diff --git a/website/client/src/assets/scss/form.scss b/website/client/src/assets/scss/form.scss
index 53c843ebf6..a7b0f3863c 100644
--- a/website/client/src/assets/scss/form.scss
+++ b/website/client/src/assets/scss/form.scss
@@ -19,21 +19,20 @@ label small {
 // Inputs and textareas
 
 input, textarea, input.form-control, textarea.form-control {
-  border-radius: 3px;
+  padding: 10px 12px;
+  border-radius: 2px;
   font-size: 14px;
-  line-height: 1.714;
-  padding: 4px 12px;
+  line-height: 1.43;
   color: $gray-50;
   border: 1px solid $gray-400;
 
-  &:hover:not(:disabled):not(:read-only):not(:focus):not(:disabled):not(.input-valid):not(.input-invalid):not(.dark) {
-    border-color: $gray-200;
+  &:hover:not(:disabled):not(:read-only) {
+    border-color: $gray-300;
   }
 
-  &:active:not(:disabled):not(:read-only), &:focus:not(:disabled):not(:read-only),
-  &:active:not(:disabled):not(:read-only).dark, &:focus:not(:disabled):not(:read-only).dark {
-    border: 1px solid $purple-400;
-    outline: 1px solid $purple-400;
+  &:active:not(:disabled):not(:read-only), &:focus:not(:disabled):not(:read-only) {
+    border-color: $purple-400;
+    outline: 0;
     box-shadow: none;
   }
 
@@ -64,68 +63,13 @@ input, textarea, input.form-control, textarea.form-control {
     padding-right: 27px;
     background-image: url(@/assets/svg/for-css/check.svg);
     background-size: 1rem;
-    border-color: $green-10;
   }
 
-  &.input-invalid, .input-invalid:hover {
+  &.input-invalid {
     padding-right: 40px;
     background-image: url(@/assets/svg/for-css/alert.svg);
     background-size: 16px 16px;
-    border-color: $red-100;
-  }
-
-  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-    color: $gray-200;
-  }
-  &::-moz-placeholder { /* Firefox 19+ */
-    color: $gray-200;
-  }
-  &:-ms-input-placeholder { /* IE 10+ */
-    color: $gray-200;
-  }
-  &:-moz-placeholder { /* Firefox 18- */
-    color: $gray-200;
-  }
-  &::placeholder { //  Standard browsers
-    color: $gray-200;
-  }
-
-  .input-invalid.input-with-error {
-    margin-bottom: 0.5em;
-  }
-
-  &.dark {
-    background-color: $purple-100;
-    color: $white;
-
-    &:not(.input-valid):not(.input-invalid) {
-      border: 1px solid $purple-300;
-    }
-
-    &:focus {
-      background-color: $purple-100;
-      color: $white;
-    }
-
-    &:hover:not(:focus):not(:disabled):not(.input-valid):not(.input-invalid) {
-      border-color: $purple-400;
-    }
-
-    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-      color: $purple-500;
-    }
-    &::-moz-placeholder { /* Firefox 19+ */
-      color: $purple-500;
-    }
-    &:-ms-input-placeholder { /* IE 10+ */
-      color: $purple-500;
-    }
-    &:-moz-placeholder { /* Firefox 18- */
-      color: $purple-500;
-    }
-    &::placeholder { //  Standard browsers
-      color: $purple-500;
-    }
+    border-color: $red-100 !important;
   }
 }
 
@@ -235,7 +179,8 @@ input, textarea, input.form-control, textarea.form-control {
 .input-error {
   font-size: 12px;
   line-height: 1.33;
-  color: $maroon-500;
+
+  color: $maroon-10;
 }
 
 .input-group-spaced {
@@ -284,17 +229,9 @@ $bg-disabled-control: $gray-10;
   }
 
   .custom-control-input {
-    &:hover~.custom-control-label::before {
-      border-color: $gray-100;
-    }
+    opacity: 0;
 
     &:checked~.custom-control-label::before {
-      background-color: $purple-300;
-      border-color: $purple-300;
-    }
-
-    &:hover:checked:not(:disabled)~.custom-control-label::before,
-    &:active:not(:disabled)~.custom-control-label::before {
       background-color: $purple-400;
       border-color: $purple-400;
     }
@@ -306,46 +243,36 @@ $bg-disabled-control: $gray-10;
       background-size: 13px 10px;
     }
 
-    &:checked:disabled~.custom-control-label::after {
-      background-image: url(@/assets/svg/for-css/checkbox-gray.svg);
-    }
-
     &:active~.custom-control-label::before {
       background-color: inherit;
     }
 
-    &:focus~.custom-control-label::before,
-    &:active~.custom-control-label::before  {
-      border-color: $purple-400;
-      box-shadow: none;
+    &:focus:not(:checked):not(:disabled)~.custom-control-label::before,
+    &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
+      border: 2px solid $gray-300;
+      box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
     }
 
-    &:disabled~.custom-control-label::before, &:disabled:checked~.custom-control-label::before {
+    &:focus:checked:not(:disabled)~.custom-control-label::before,
+    &:active:checked:not(:disabled)~.custom-control-label::before  {
+      box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
+      border-color: 2 px solid $purple-400;
+      background-color: $purple-400;
+    }
+
+    &:focus:disabled~.custom-control-label::before,
+    &:active:disabled~.custom-control-label::before  {
+      box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
+    }
+
+    &:disabled:checked~.custom-control-label::before {
       border-color: $gray-400;
       background-color: $gray-400;
     }
 
-    &.dark {
-      ~.custom-control-label::before {
-        border-color: $purple-100;
-      }
-      &:hover~.custom-control-label::before,
-      &:active~.custom-control-label::before {
-        border-color: $purple-50;
-      }
-      &:checked~.custom-control-label::before {
-        background-color: $purple-100;
-        border-color: $purple-100;
-      }
-      &:focus~.custom-control-label::before,
-      &:active~.custom-control-label::before  {
-        border-color: $purple-400;
-        box-shadow: none;
-      }
-      &:disabled~.custom-control-label::before, &:disabled:checked~.custom-control-label::before {
-        border-color: $gray-400;
-        background-color: $gray-400;
-      }
+    &:disabled:not(:checked)~.custom-control-label::before {
+      border-color: $gray-400;
+      background-color: transparent;
     }
   }
 }
diff --git a/website/client/src/assets/scss/forms.scss b/website/client/src/assets/scss/forms.scss
new file mode 100644
index 0000000000..477c4514d2
--- /dev/null
+++ b/website/client/src/assets/scss/forms.scss
@@ -0,0 +1,168 @@
+// Inputs and textareas
+
+input, textarea, input.form-control, textarea.form-control {
+  border-radius: 3px;
+  font-size: 14px;
+  line-height: 1.714;
+  padding: 4px 12px;
+  color: $gray-50;
+  border: 1px solid $gray-400;
+
+  &:hover:not(:disabled):not(:read-only):not(:focus):not(:disabled):not(.input-valid):not(.input-invalid):not(.dark) {
+    border-color: $gray-200;
+  }
+
+  &:active:not(:disabled):not(:read-only), &:focus:not(:disabled):not(:read-only),
+  &:active:not(:disabled):not(:read-only).dark, &:focus:not(:disabled):not(:read-only).dark {
+    border: 1px solid $purple-400;
+    outline: 1px solid $purple-400;
+    box-shadow: none;
+  }
+
+  &.input-valid {
+    padding-right: 27px;
+    background-image: url(@/assets/svg/for-css/check.svg);
+    background-size: 1rem;
+    border-color: $green-10;
+  }
+
+  &.input-invalid, .input-invalid:hover {
+    padding-right: 40px;
+    background-image: url(@/assets/svg/for-css/alert.svg);
+    background-size: 16px 16px;
+    border-color: $red-100;
+  }
+
+  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $gray-200;
+  }
+  &::-moz-placeholder { /* Firefox 19+ */
+    color: $gray-200;
+  }
+  &:-ms-input-placeholder { /* IE 10+ */
+    color: $gray-200;
+  }
+  &:-moz-placeholder { /* Firefox 18- */
+    color: $gray-200;
+  }
+  &::placeholder { //  Standard browsers
+    color: $gray-200;
+  }
+
+  .input-invalid.input-with-error {
+    margin-bottom: 0.5em;
+  }
+
+  &.dark {
+    background-color: $purple-100;
+    color: $white;
+
+    &:not(.input-valid):not(.input-invalid) {
+      border: 1px solid $purple-300;
+    }
+
+    &:focus {
+      background-color: $purple-100;
+      color: $white;
+    }
+
+    &:hover:not(:focus):not(:disabled):not(.input-valid):not(.input-invalid) {
+      border-color: $purple-400;
+    }
+
+    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      color: $purple-500;
+    }
+    &::-moz-placeholder { /* Firefox 19+ */
+      color: $purple-500;
+    }
+    &:-ms-input-placeholder { /* IE 10+ */
+      color: $purple-500;
+    }
+    &:-moz-placeholder { /* Firefox 18- */
+      color: $purple-500;
+    }
+    &::placeholder { //  Standard browsers
+      color: $purple-500;
+    }
+  }
+}
+
+.input-error {
+  font-size: 12px;
+  line-height: 1.33;
+  color: $maroon-500;
+}
+
+// checkboxes
+.custom-checkbox {
+  .custom-control-label::before {
+    border-radius: 2px;
+  }
+
+  .custom-control-input {
+    &:hover~.custom-control-label::before {
+      border-color: $gray-100;
+    }
+
+    &:checked~.custom-control-label::before {
+      background-color: $purple-300;
+      border-color: $purple-300;
+    }
+
+    &:hover:checked:not(:disabled)~.custom-control-label::before,
+    &:active:not(:disabled)~.custom-control-label::before {
+      background-color: $purple-400;
+      border-color: $purple-400;
+    }
+
+    &:checked~.custom-control-label::after {
+      width: 18px;
+      height: 18px;
+      background-image: url(@/assets/svg/for-css/checkbox-white.svg);
+      background-size: 13px 10px;
+    }
+
+    &:checked:disabled~.custom-control-label::after {
+      background-image: url(@/assets/svg/for-css/checkbox-gray.svg);
+    }
+
+    &:active~.custom-control-label::before {
+      background-color: inherit;
+    }
+
+    &:focus~.custom-control-label::before,
+    &:active~.custom-control-label::before  {
+      border-color: $purple-400;
+      box-shadow: none;
+    }
+
+    &:disabled~.custom-control-label::before, &:disabled:checked~.custom-control-label::before {
+      border-color: $gray-400;
+      background-color: $gray-400;
+    }
+
+    &.dark {
+      ~.custom-control-label::before {
+        border-color: $purple-100;
+      }
+      &:hover~.custom-control-label::before,
+      &:active~.custom-control-label::before {
+        border-color: $purple-50;
+      }
+      &:checked~.custom-control-label::before {
+        background-color: $purple-100;
+        border-color: $purple-100;
+      }
+      &:focus~.custom-control-label::before,
+      &:active~.custom-control-label::before  {
+        border-color: $purple-400;
+        box-shadow: none;
+      }
+      &:disabled~.custom-control-label::before, &:disabled:checked~.custom-control-label::before {
+        border-color: $gray-400;
+        background-color: $gray-400;
+      }
+    }
+  }
+}
diff --git a/website/client/src/components/auth/registerUsername.vue b/website/client/src/components/auth/registerUsername.vue
index cb5f7efee8..6ce38c845e 100644
--- a/website/client/src/components/auth/registerUsername.vue
+++ b/website/client/src/components/auth/registerUsername.vue
@@ -101,16 +101,24 @@
 <style lang="scss" scoped>
   @import '@/assets/scss/colors.scss';
   @import '@/assets/scss/privacy.scss';
+  @import '@/assets/scss/forms.scss';
+
+  p.purple-600 {
+    line-height: 1.714;
+  }
+
+  .custom-checkbox {
+    .custom-control-label::before {
+      border-radius: 2px;
+      margin-top: 2px;
+    }
+  }
 
   .gradient-bg {
     background: linear-gradient(to bottom, $purple-200, $purple-300);
     height: 700px;
   }
 
-  p.purple-600 {
-    line-height: 1.714;
-  }
-
   .input-error {
     font-size: 90%;
     width: 100%;
diff --git a/website/client/src/components/static/home.vue b/website/client/src/components/static/home.vue
index 1f2a94bbdc..9eede2f960 100644
--- a/website/client/src/components/static/home.vue
+++ b/website/client/src/components/static/home.vue
@@ -360,6 +360,7 @@
 <style lang="scss" scoped>
 @import '@/assets/scss/colors.scss';
 @import '@/assets/scss/privacy.scss';
+@import '@/assets/scss/forms.scss';
 
 @import url('https://fonts.googleapis.com/css?family=Varela+Round');
 
diff --git a/website/common/locales/en/front.json b/website/common/locales/en/front.json
index ea218f6661..e964931692 100644
--- a/website/common/locales/en/front.json
+++ b/website/common/locales/en/front.json
@@ -187,5 +187,5 @@
   "learnMore": "Learn More",
   "translateHabitica": "Translate Habitica",
   "whatToCallYou": "What should we call you?",
-  "acceptPrivacyTOS": "You agree to our <a href='/static/terms' target='_blank'>Terms of Service</a> and have read our <a href='/static/privacy' target='_blank'>Privacy Policy</a>"
+  "acceptPrivacyTOS": "You confirm that you are at least 18 years old, and that you have read and agree to our <a href='/static/terms' target='_blank'>Terms of Service</a> and <a href='/static/privacy' target='_blank'>Privacy Policy</a>"
 }