diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss
index 0a2220a215..482e731700 100644
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -1,92 +1,193 @@
-@mixin btn-focus-hover-shadow () {
-  box-shadow: 0 4px 4px 0 rgba($black, 0.16), 0 1px 8px 0 rgba($black, 0.12);
-}
-
 .btn {
   cursor: pointer;
-  font-family: 'Roboto Condensed', sans-serif;
-  font-size: 16px;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
   font-weight: bold;
-  line-height: 1.5;
-  border: 1px solid transparent !important;
-  padding: 7.5px 15.5px;
+  line-height: 1.71;
+  border: 1px solid transparent;
+  padding: 0.25rem 1rem;
   border-radius: 2px;
-  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+  box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
   color: $white;
 
-  &:focus:not(.btn-flat) {
-    outline: none;
+  &:hover, &:focus {
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+
+    &:disabled, &.disabled, &.btn-flat {
+      box-shadow: none;
+    }
+  }
+
+  &:focus {
     border-color: $purple-400;
-    @include btn-focus-hover-shadow();
   }
 
-  &:hover:not(.btn-flat):not(.disabled):not(:disabled) {
-    @include btn-focus-hover-shadow();
-    border-color: transparent;
+  &:active, &.active:not(.btn-flat), &:disabled, &.disabled {
+    box-shadow: none;
   }
 
-  &:active:not(.btn-flat), &.active:not(.btn-flat) {
-    box-shadow: none !important;
-    border: 1px solid transparent;
+  &:disabled, &.disabled {
+    cursor: default;
+    opacity: 0.75;
   }
 }
 
-.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
-  color: $white !important;
-}
-
-.btn:disabled, .btn.disabled {
-  box-shadow: none;
-  cursor: default;
-  opacity: 0.64;
-  border-color: transparent;
+.btn-front {
+  font-size: 16px;
+  line-height: 1.5;
+  padding: 7.5px 15.5px;
 }
 
 .btn-primary {
   background: $purple-200;
+  border: 1px solid transparent;
 
-  &:disabled {
+  &:hover:not(:disabled):not(.disabled) {
+    background: #5d3b9c;
+    border: 1px solid transparent;
+  }
+
+  &:focus {
     background: $purple-200;
+    border-color: $purple-400;
   }
 
-  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled), &:focus:not(:disabled):not(.disabled) {
-    background: #5d3b9c !important;
-    color: $white;
-  }
-}
-
-.btn-secondary, .dropdown > .btn-secondary {
-  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) {
-    color: $purple-200 !important;
+  &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
+    box-shadow: none;
+    border-color: $purple-400;
   }
 
-  &:active, &:focus, &.active {
-    border-color: $purple-500 !important;
+  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
+    background: $purple-200;
+    border: 1px solid transparent;
   }
 
   &:disabled, &.disabled {
-    background: $gray-500 !important;
-    color: $gray-100 !important;
+    background: $purple-200;
+    border: 1px solid transparent;
+    cursor: default;
+    opacity: 0.75;
+  }
+}
+
+.btn-secondary,
+.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
+.show > .btn-secondary.dropdown-toggle:not(.btn-success)
+{
+  background: $white;
+  border: 1px solid transparent;
+  color: $gray-50;
+
+  &:focus, &:active {
+    color: $gray-50;
+    background: $white;
+    border-color: $purple-400;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    &:active:focus,
+    &.active:focus {
+      color: $purple-300;
+      box-shadow: none;
+      border-color: $purple-400;
+    }
+
+    &:active,
+    &.active {
+      color: $purple-300;
+
+      &.dropdown-toggle {
+        color: $gray-50;
+      }
+
+
+      background: $white;
+      border: 1px solid transparent;
+    }
+
+    &:hover {
+      color: $purple-300;
+
+      &.dropdown-toggle {
+        color: $gray-50;
+      }
+
+      background: $white !important;
+      border: 1px solid transparent;
+    }
+  }
+
+  &:disabled, &.disabled {
+    color: $gray-50;
+    background: $white;
+    border: 1px solid transparent;
+    cursor: default;
+    opacity: 0.75;
+  }
+}
+
+.btn-danger {
+  background: $maroon-100;
+  border: 1px solid transparent;
+
+  &:hover:not(:disabled):not(.disabled) {
+    background: #e14e4e;
+    border: 1px solid transparent;
+  }
+
+  &:focus {
+    background: $maroon-100;
+    border-color: $purple-400;
+  }
+
+  &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
+    box-shadow: none;
+    border-color: $purple-400;
+  }
+
+  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
+    background: $maroon-100;
+    border: 1px solid transparent;
+  }
+
+  &:disabled, &.disabled {
+    background: $maroon-100;
+    border: 1px solid transparent;
+    cursor: default;
+    opacity: 0.75;
   }
 }
 
 .btn-success {
-  background: $green-100;
-
-  &:disabled {
-    background: $green-100;
-  }
-
-  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
-    background: $green-50;
-  }
-}
-
-.show > .btn-success.dropdown-toggle {
   background: $green-50;
+  border: 1px solid transparent;
+
+  &:hover:not(:disabled):not(.disabled) {
+    background: #32bd8a;
+    border: 1px solid transparent;
+  }
+
+  &:focus {
+    background: $green-50;
+    border-color: $purple-400;
+  }
+
+  &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
+    box-shadow: none;
+    border-color: $purple-400;
+  }
+
+  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
+    background: $green-50;
+    border: 1px solid transparent;
+  }
+
+  &:disabled, &.disabled {
+    background: $green-50;
+    border: 1px solid transparent;
+    cursor: default;
+    opacity: 0.75;
+  }
 }
 
 .btn-info {
@@ -105,22 +206,6 @@
   }
 }
 
-.btn-danger {
-  background: $red-50;
-
-  &:disabled {
-    background: $red-50;
-  }
-
-  &:hover:not(:disabled):not(.disabled) {
-    background: $red-100;
-  }
-
-  &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
-    background: $red-100;
-  }
-}
-
 .btn-show-more {
   display: block;
   width: 50%;
diff --git a/website/client/src/assets/scss/task.scss b/website/client/src/assets/scss/task.scss
index f969a41015..d651a574e7 100644
--- a/website/client/src/assets/scss/task.scss
+++ b/website/client/src/assets/scss/task.scss
@@ -1,34 +1,56 @@
+@mixin habit-controls($disabled-color, $active-color) {
+  &-habit-control-disabled {
+    .habit-option-button {
+      border: 2px solid $disabled-color;
+    }
+    &:hover {
+      .habit-option-button {
+        border: 2px solid $active-color;
+      }
+      .habit-option-icon, .habit-option-label { color: $active-color !important; }
+    }
+  }
+}
+
+@mixin modal-text-input($color) {
+  &-text::placeholder { color: $color !important; }
+  &-input {
+    border: 0 !important;
+
+    &:focus, &:active {
+      box-shadow: 0 0 0 1px $color !important;
+    }
+  }
+}
+
 .task {
   &-worst { // dark red
     &-control {
       &-bg {
         background: $maroon-100 !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
-      &-bg-noninteractive {
-        background: $maroon-100 !important;
-      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: $maroon-500 !important; }
-      &-checkbox { color: $maroon-100 !important; }
-      &-icon { color: #6c0406 !important; }
+      &-bg-noninteractive { background: $maroon-100 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($red-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $red-1 !important; }
     }
 
     &-modal {
       &-bg { background: $maroon-100 !important; }
       &-icon { color: $maroon-100 !important; }
-      &-text { color: $maroon-50 !important; }
+      &-text { color: $red-1 !important; }
+      &-content {
+        --svg-color: #{$maroon-100};
+      }
+      @include modal-text-input($red-1);
       &-option-disabled:hover {
         .svg-icon { color: $maroon-100 !important; }
         .option-item-label { color: $maroon-50 !important; }
       }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $maroon-100 !important; }
-        .option-item-label { color: $maroon-50 !important; }
-      }
+      @include habit-controls($gray-300, $maroon-100);
     }
   }
 
@@ -36,32 +58,30 @@
     &-control {
       &-bg {
         background: $red-100 !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
-      &-bg-noninteractive {
-        background: $red-100 !important;
-      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: $red-500 !important; }
-      &-checkbox { color: $red-100 !important; }
-      &-icon { color: #6c0406 !important; }
+      &-bg-noninteractive { background: $red-100 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($red-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $red-1 !important; }
     }
 
     &-modal {
       &-bg { background: $red-100 !important; }
       &-icon { color: $red-100 !important; }
-      &-text { color: $red-10 !important; }
+      &-text { color: $red-1 !important; }
+      &-content {
+        --svg-color: #{$red-100};
+      }
+      @include modal-text-input($red-1);
       &-option-disabled:hover {
         .svg-icon { color: $red-100 !important; }
         .option-item-label { color: $red-10 !important; }
       }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $red-100 !important; }
-        .option-item-label { color: $red-10 !important; }
-      }
+
+      @include habit-controls($gray-300, $red-100);
     }
   }
 
@@ -69,43 +89,30 @@
     &-control {
       &-bg {
         background: $orange-100 !important;
-
-        &:hover {
-          .habit-control { background: #b75a1c !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($orange-1, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
-      &-bg-noninteractive {
-        background: $orange-100 !important;
-      }
-      &-inner-habit { background: rgba(183, 90, 28, 0.4) !important; }
-      &-inner-daily-todo { background: $orange-500 !important; }
-      &-checkbox { color: $orange-100 !important; }
-      &-icon { color: #7f3300 !important; }
+      &-bg-noninteractive { background: $orange-100 !important; }
+      &-inner-habit { background: rgba($orange-1, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($orange-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $orange-1 !important; }
     }
 
     &-modal {
-      &-bg {
-        background: $orange-100 !important;
-
-        .form-control {
-          background: rgba(183, 90, 28, 0.4) !important;
-
-          &:focus, &:active, &:hover {
-            background-color: #b75a1c !important;
-          }
-        }
-      }
+      &-bg { background: $orange-100 !important; }
       &-icon { color: $orange-100 !important; }
-      &-text { color: #b75a1c !important; }
+      &-text { color: $orange-1 !important; }
+      &-content {
+        --svg-color: #{$orange-100};
+      }
+      @include modal-text-input($orange-1);
       &-option-disabled:hover {
         .svg-icon { color: $orange-100 !important; }
-        .option-item-label { color: #b75a1c !important; }
-      }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $orange-100 !important; }
-        .option-item-label { color: #b75a1c !important; }
+        .option-item-label { color: $orange-1 !important; }
       }
+
+      @include habit-controls($gray-300, $orange-100);
     }
   }
 
@@ -113,42 +120,30 @@
     &-control {
       &-bg {
         background: $yellow-100 !important;
-        &:hover {
-          .habit-control { background: #bf7d1a !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($yellow-1, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
-      &-bg-noninteractive {
-        background: $yellow-100 !important;
-      }
-      &-inner-habit { background: rgba(183, 90, 28, 0.32) !important; }
-      &-inner-daily-todo { background: $yellow-500 !important; }
-      &-checkbox { color: $yellow-100 !important; }
-      &-icon { color: #794b00 !important; }
+      &-bg-noninteractive { background: $yellow-100 !important; }
+      &-inner-habit { background: rgba($yellow-1, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($yellow-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $yellow-1 !important; }
     }
 
     &-modal {
-      &-bg {
-        background: $yellow-100 !important;
-
-        .form-control {
-          background: rgba(183, 90, 28, 0.4) !important;
-
-          &:focus, &:active, &:hover {
-            background-color: #bf7d1a !important;
-          }
-        }
-      }
+      &-bg { background: $yellow-100 !important; }
       &-icon { color: $yellow-100 !important; }
-      &-text { color: #bf7d1a !important; }
+      &-text { color: $yellow-1 !important; }
+      @include modal-text-input($yellow-1);
       &-option-disabled:hover {
         .svg-icon { color: $yellow-100 !important; }
         .option-item-label { color: #bf7d1a !important; }
       }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $yellow-100 !important; }
-        .option-item-label { color: #bf7d1a !important; }
+      &-content {
+        --svg-color: #{$yellow-100};
       }
+
+      @include habit-controls($gray-300, $yellow-100);
     }
   }
 
@@ -156,32 +151,31 @@
     &-control {
       &-bg {
         background: $green-100 !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
-      &-bg-noninteractive {
-        background: $green-100 !important;
-      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: #77f4c7 !important; }
-      &-checkbox { color: $green-10 !important; }
-      &-icon { color: #005737 !important; }
+      &-bg-noninteractive { background: $green-100 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($green-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $green-1 !important; }
     }
 
     &-modal {
       &-bg { background: $green-100 !important; }
       &-icon { color: $green-10 !important; }
-      &-text { color: #1ca372 !important; }
+      &-text { color: $green-1 !important; }
+      &-content {
+        --svg-color: #{$green-100};
+      }
+
+      @include modal-text-input($green-1);
       &-option-disabled:hover {
         .svg-icon { color: $green-10 !important; }
         .option-item-label { color: #1ca372 !important; }
       }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $green-10 !important; }
-        .option-item-label { color: #1ca372 !important; }
-      }
+
+      @include habit-controls($gray-300, $green-100);
     }
   }
 
@@ -189,32 +183,30 @@
     &-control {
       &-bg {
         background: $teal-100 !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
-      &-bg-noninteractive {
-        background: $teal-100 !important;
-      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: #8dedf6 !important; }
-      &-checkbox { color: $teal-100 !important; }
-      &-icon { color: #005158 !important; }
+      &-bg-noninteractive { background: $teal-100 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($teal-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $teal-1 !important; }
     }
 
     &-modal {
       &-bg { background: $teal-100 !important; }
       &-icon { color: $teal-100 !important; }
-      &-text { color: $teal-10 !important; }
+      &-text { color: $teal-1 !important; }
+      &-content {
+        --svg-color: #{$teal-100};
+      }
+      @include modal-text-input($teal-1);
       &-option-disabled:hover {
         .svg-icon { color: $teal-100 !important; }
         .option-item-label { color: $teal-10 !important; }
       }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $teal-100 !important; }
-        .option-item-label { color: $teal-10 !important; }
-      }
+
+      @include habit-controls($gray-300, $teal-100);
     }
   }
 
@@ -222,32 +214,31 @@
     &-control {
       &-bg {
         background: $blue-100 !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
-      &-bg-noninteractive {
-        background: $blue-100 !important;
-      }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: $blue-500 !important; }
-      &-checkbox { color: $blue-100 !important; }
-      &-icon { color: #033f5e !important; }
+      &-bg-noninteractive { background: $blue-100 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-habit-noninteractive { border: 1px solid rgba($blue-1, 0.5) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
+      &-checkbox, &-icon { color: $blue-1 !important; }
     }
 
     &-modal {
       &-bg { background: $blue-100 !important; }
       &-icon { color: $blue-100 !important; }
-      &-text { color: $blue-10 !important; }
+      &-text { color: $blue-1 !important; }
+      &-content {
+        --svg-color: #{$blue-100};
+      }
+
+      @include modal-text-input($blue-1);
       &-option-disabled:hover {
         .svg-icon { color: $blue-50 !important; }
         .option-item-label { color: $blue-10 !important; }
       }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $blue-50 !important; }
-        .option-item-label { color: $blue-10 !important; }
-      }
+
+      @include habit-controls($gray-300, $blue-100);
     }
   }
 
@@ -255,42 +246,43 @@
     &-control {
       &-bg {
         background: $purple-task !important;
-        &:hover {
-          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
-          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-        }
+        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
-      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
-      &-inner-daily-todo { background: #ffffff80 !important; }
+      &-inner-habit { background: rgba($black, 0.25) !important; }
+      &-inner-daily-todo { background: rgba($white, 0.5) !important; }
       &-checkbox { color: $purple-task !important; }
     }
 
     &-modal {
       &-bg { background: $purple-300 !important; }
       &-icon { color: $purple-300 !important; }
-      &-text { color: $purple-200 !important; }
+      &-text { color: $black !important; }
+      &-content {
+        --svg-color: #{$purple-300};
+      }
+
+      @include modal-text-input($black);
       &-option-disabled:hover {
         .svg-icon { color: $purple-300 !important; }
         .option-item-label { color: $purple-200 !important; }
       }
-      &-habit-control-disabled:hover {
-        .habit-control { background: $purple-300 !important; }
-        .option-item-label { color: $purple-200 !important; }
-      }
+
+      @include habit-controls($gray-300, $purple-300);
     }
   }
 
   &-reward {
     &-control {
       &-bg {
-        background: rgba(255, 217, 160, 0.32) !important;
-        .small-text { color: $orange-10 !important; }
+        background: rgba($yellow-100, 0.15) !important;
+        .small-text { color: $yellow-1 !important; }
 
-        &:hover { background: rgba(255, 217, 160, 0.48) !important; }
+        &:hover { background: rgba($yellow-100, 0.25) !important; }
       }
       &-bg-noninteractive {
-        background: rgba(255, 217, 160, 0.32) !important;
-        .small-text { color: $orange-10 !important; }
+        background: rgba($yellow-100, 0.15) !important;
+        .small-text { color: $yellow-1 !important; }
       }
     }
   }
@@ -300,8 +292,12 @@
       &-control {
         &-bg { background: $gray-600; }
         &-inner {
-          color: rgba(26, 24, 29, 0.12) !important;
-          border: 1px solid rgba(26, 24, 29, 0.12);
+          border: 1px solid $gray-300;
+          opacity: 0.75;
+
+          .negative, .positive {
+            color: $gray-200;
+          }
         }
       }
     }
@@ -309,13 +305,14 @@
     &-daily-todo {
       &-control {
         &-bg {
-          background: $gray-400 !important;
-          &:hover {
-            .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
-          }
+          background: $gray-200 !important;
+          .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
         }
-        &-inner { background: $gray-500 !important; }
-        &-checkbox { color: $gray-400 !important; }
+        &-bg-noninteractive {
+          background: $gray-200 !important;
+        }
+        &-inner { background: rgba($white, 0.5) !important; }
+        &-checkbox { color: $gray-10 !important; }
         &-content {
           background: $gray-600;
 
@@ -337,6 +334,24 @@
   border-radius: 100px;
   color: $white;
 
+  &-negative {
+    &-enabled {
+      padding-top: 13px;
+    }
+    &-disabled {
+      padding-top: 12px;
+    }
+  }
+
+  &-positive {
+    &-enabled {
+      padding-top: 9px;
+    }
+    &-disabled {
+      padding-top: 8px;
+    }
+  }
+
   .svg-icon {
     width: 10px;
     height: 10px;
@@ -347,14 +362,10 @@
     margin-top: 7px;
     height: 12px;
     width: 10px;
-  }
 
-  .positive {
-    margin-top: 9px;
-  }
-
-  .negative {
-    margin-top: 13px;
+    &.disabled {
+      color: $gray-10;
+    }
   }
 }
 
diff --git a/website/client/src/components/tasks/task.vue b/website/client/src/components/tasks/task.vue
index b345a9f421..076ee7c87e 100644
--- a/website/client/src/components/tasks/task.vue
+++ b/website/client/src/components/tasks/task.vue
@@ -25,13 +25,16 @@
         >
           <div
             class="task-control habit-control"
-            :class="controlClass.up.inner"
+            :class="[{
+              'habit-control-positive-enabled': task.up && isUser,
+              'habit-control-positive-disabled': !task.up && isUser,
+            }, controlClass.up.inner]"
             @click="(isUser && task.up) ? score('up') : null"
           >
             <div
-              v-if="task.group.id && !isUser"
+              v-if="!isUser"
               class="svg-icon lock"
-              :class="controlClass.up.icon"
+              :class="task.up ? controlClass.up.icon : 'positive'"
               v-html="icons.lock"
             ></div>
             <div
@@ -55,7 +58,7 @@
             @click="isUser ? score(task.completed ? 'down' : 'up') : null"
           >
             <div
-              v-if="task.group.id && !isUser && !task.completed"
+              v-if="!isUser"
               class="svg-icon lock"
               :class="controlClass.icon"
               v-html="icons.lock"
@@ -186,7 +189,7 @@
               v-if="!task.collapseChecklist"
               :key="item.id"
               class="custom-control custom-checkbox checklist-item"
-              :class="{'checklist-item-done': item.completed}"
+              :class="{'checklist-item-done': item.completed, 'cursor-auto': !isUser}"
             >
               <!-- eslint-enable vue/no-use-v-if-with-v-for -->
               <input
@@ -307,13 +310,16 @@
         >
           <div
             class="task-control habit-control"
-            :class="controlClass.down.inner"
+            :class="[{
+              'habit-control-negative-enabled': task.down && isUser,
+              'habit-control-negative-disabled': !task.down && isUser,
+            }, controlClass.down.inner]"
             @click="(isUser && task.down) ? score('down') : null"
           >
             <div
               v-if="task.group.id && !isUser"
               class="svg-icon lock"
-              :class="controlClass.down.icon"
+              :class="task.down ? controlClass.down.icon : 'negative'"
               v-html="icons.lock"
             ></div>
             <div
@@ -353,15 +359,18 @@
   @import '~@/assets/scss/colors.scss';
 
   .control-bottom-box {
-    border-bottom-left-radius: 0px !important;
-    border-bottom-right-radius: 0px !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
   }
 
   .control-top-box {
-    border-top-left-radius: 0px !important;
-    border-top-right-radius: 0px !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
   }
 
+  .cursor-auto {
+    cursor: auto;
+  }
 
   .task {
     margin-bottom: 2px;
diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index 737d937b9f..a7d508e54a 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -11,58 +11,80 @@
     <div
       v-if="task"
       slot="modal-header"
-      class="task-modal-header"
+      class="task-modal-header p-4"
       :class="cssClass('bg')"
       @click="handleClick($event)"
     >
-      <div class="clearfix">
-        <h1 class="float-left">
+      <div class="d-flex align-items-center mb-3">
+        <h2
+          class="my-auto"
+          :class="cssClassHeadings"
+        >
           {{ title }}
-        </h1>
-        <div class="float-right d-flex align-items-center">
+        </h2>
+        <div class="ml-auto d-flex align-items-center">
           <span
-            v-once
-            class="cancel-task-btn mr-2"
+            class="cancel-task-btn mr-3"
+            :class="cssClassHeadings"
             @click="cancel()"
           >{{ $t('cancel') }}</span>
-          <button
-            v-once
-            class="btn btn-secondary"
+          <div
+            class="btn btn-secondary d-flex align-items-center justify-content-center"
+            :class="{disabled: !canSave}"
             @click="submit()"
           >
-            {{ $t('save') }}
-          </button>
+            <div
+              class="m-auto"
+              v-if="purpose === 'edit'"
+            >
+              {{ $t('save') }}
+            </div>
+            <div
+              class="m-auto"
+              v-if="purpose === 'create'"
+            >
+              {{ $t('create') }}
+            </div>
+          </div>
         </div>
       </div>
       <div class="form-group">
-        <label v-once>{{ `${$t('text')}*` }}</label>
+        <label
+          :class="cssClassHeadings"
+          class="mb-1"
+        >{{ `${$t('text')}*` }}</label>
         <input
           ref="inputToFocus"
           v-model="task.text"
-          class="form-control title-input"
+          class="form-control input-title"
+          :class="cssClass('input')"
           type="text"
           required="required"
           spellcheck="true"
           :disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
+          :placeholder="$t('addATitle')"
         >
       </div>
-      <div class="form-group">
+      <div class="form-group mb-0">
         <label
-          v-once
-          class="d-flex align-items-center justify-content-between"
+          class="d-flex align-items-center justify-content-between mb-1"
         >
-          <span>{{ $t('notes') }}</span>
-          <small v-once>
+          <span
+            :class="cssClassHeadings"
+          >{{ $t('notes') }}</span>
+          <small>
             <a
               target="_blank"
               href="http://habitica.fandom.com/wiki/Markdown_Cheat_Sheet"
+              :class="cssClassHeadings"
             >{{ $t('markdownHelpLink') }}</a>
           </small>
         </label>
         <textarea
           v-model="task.notes"
-          class="form-control"
-          rows="3"
+          class="form-control input-notes"
+          :class="cssClass('input')"
+          :placeholder="$t('addNotes')"
         ></textarea>
       </div>
     </div>
@@ -147,49 +169,49 @@
           class="d-flex justify-content-center"
         >
           <div
-            class="option-item habit-control"
-            :class="task.up ? 'habit-control-enabled' : cssClass('habit-control-disabled')"
+            class="habit-option-container no-transition
+              d-flex flex-column justify-content-center align-items-center"
             @click="toggleUpDirection()"
+            :class="!task.up ? cssClass('habit-control-disabled') : ''"
           >
             <div
-              class="option-item-box"
+              class="habit-option-button no-transition
+                d-flex justify-content-center align-items-center mb-2"
               :class="task.up ? cssClass('bg') : ''"
             >
-              <div class="task-control habit-control">
-                <div
-                  class="svg-icon positive"
-                  :class="task.up ? cssClass('icon') : ''"
-                  v-html="icons.positive"
-                ></div>
-              </div>
+              <div
+                class="habit-option-icon svg-icon no-transition"
+                :class="task.up ? '' : 'disabled'"
+                v-html="icons.positive"
+              ></div>
             </div>
             <div
-              class="option-item-label"
-              :class="task.up ? cssClass('text') : ''"
+              class="habit-option-label no-transition"
+              :class="task.up ? cssClass('icon') : 'disabled'"
             >
               {{ $t('positive') }}
             </div>
           </div>
           <div
-            class="option-item habit-control"
-            :class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')"
+            class="habit-option-container no-transition
+              d-flex flex-column justify-content-center align-items-center"
             @click="toggleDownDirection()"
+            :class="!task.down ? cssClass('habit-control-disabled') : ''"
           >
             <div
-              class="option-item-box"
+              class="habit-option-button no-transition
+                d-flex justify-content-center align-items-center mb-2"
               :class="task.down ? cssClass('bg') : ''"
             >
-              <div class="task-control habit-control">
-                <div
-                  class="svg-icon negative"
-                  :class="task.down ? cssClass('icon') : ''"
-                  v-html="icons.negative"
-                ></div>
-              </div>
+              <div
+                class="habit-option-icon no-transition svg-icon negative mx-auto"
+                :class="task.down ? '' : 'disabled'"
+                v-html="icons.negative"
+              ></div>
             </div>
             <div
-              class="option-item-label"
-              :class="task.down ? cssClass('text') : ''"
+              class="habit-option-label no-transition"
+              :class="task.down ? cssClass('icon') : 'disabled'"
             >
               {{ $t('negative') }}
             </div>
@@ -600,7 +622,7 @@
           </div>
         </div>
         <div
-          v-if="task.type !== 'reward'"
+          v-if="advancedSettingsAvailable"
           class="advanced-settings"
         >
           <div
@@ -718,10 +740,10 @@
           @click="destroy()"
         >
           <div
-            class="svg-icon d-inline-b"
+            class="svg-icon d-inline-b mt-1 mb-1"
             v-html="icons.destroy"
           ></div>
-          <span>{{ $t('deleteTask') }}</span>
+          <span class="delete-text mt-1 mb-1">{{ $t('deleteTask') }}</span>
         </div>
       </form>
     </div>
@@ -731,19 +753,14 @@
       @click="handleClick($event)"
     >
       <div
-        v-once
-        class="cancel-task-btn"
-        @click="cancel()"
-      >
-        {{ $t('cancel') }}
-      </div>
-      <button
-        v-once
-        class="btn btn-primary"
+        v-if="purpose === 'create'"
+        class="btn btn-primary btn-footer
+          d-flex align-items-center justify-content-center mt-2 mb-2"
+        :class="{disabled: !canSave}"
         @click="submit()"
       >
-        {{ $t('save') }}
-      </button>
+        {{ $t('create') }}
+      </div>
     </div>
   </b-modal>
 </template>
@@ -756,27 +773,29 @@
       max-width: 448px;
     }
 
-    label {
-      font-weight: bold;
+    .no-transition {
+      transition: none;
     }
 
-    .input-group > * {
-      height: 40px;
+    .form-control:not(.input-title):not(.input-notes):not(.checklist-item) {
+      height: 40px !important; // until the new changes of teams-2020 are applied
+    }
+
+    // until the new changes of teams-2020 are applied
+    .vdp-datepicker {
+      .input-group-append {
+        height: 40px !important;
+      }
     }
 
     input, textarea {
-      border: none;
-      background: rgba(0, 0, 0, 0.24);
-      color: rgba($white, 0.64) !important;
-      transition-property: border-color, box-shadow, color, background;
-
-      &:focus, &:active {
-        color: $white !important;
-        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32);
+      &:not(:host-context(.tags-popup)) {
+        border: none;
       }
-
+      transition-property: border-color, box-shadow, color, background;
+      background-color: rgba(255, 255, 255, 0.5);
       &:focus, &:active, &:hover {
-        background-color: rgba(0, 0, 0, 0.40);
+        background-color: rgba(255, 255, 255, 0.75);
       }
     }
 
@@ -785,6 +804,12 @@
       border: none;
     }
 
+    .modal-body {
+      // the body has a margin/padding that can't be found
+      // if found please remove that padding and this style
+      margin-bottom: -1rem;
+    }
+
     .modal-header, .modal-body, .modal-footer {
       padding: 0px;
       border: none;
@@ -795,6 +820,10 @@
       padding-right: 23px;
     }
 
+    .cursor-auto {
+      cursor: auto;
+    }
+
     .task-modal-header {
       color: $white;
       width: 100%;
@@ -803,7 +832,7 @@
       padding-top: 16px;
       padding-bottom: 24px;
 
-      h1 {
+      h2 {
         color: $white;
       }
     }
@@ -894,25 +923,6 @@
       }
     }
 
-    .habit-control {
-      .option-item-box {
-        background: $white;
-        border: 2px solid $gray-600;
-
-        .habit-control { background: $gray-300; }
-        .svg-icon { color: $white; }
-      }
-
-      &-enabled {
-        .option-item-box {
-          border: 2px solid transparent;
-          transition-property: none;
-
-          .habit-control { background: $white !important; }
-        }
-      }
-    }
-
     .category-wrap {
       cursor: pointer;
       margin-top: 0px;
@@ -1070,27 +1080,44 @@
       }
     }
 
-    .delete-task-btn, .cancel-task-btn {
+        .delete-task-btn, .cancel-task-btn {
       cursor: pointer;
-
       &:hover, &:focus, &:active {
         text-decoration: underline;
       }
     }
-
     .delete-task-btn {
       margin-top: 32px;
       margin-bottom: 8px;
-      color: $red-50;
-
+      height: 1.5rem;
+      align-items: center;
+      &:hover, &:focus, &:active {
+        text-decoration: underline;
+        text-decoration-color: $maroon-50;
+      }
+      .delete-text {
+        font-size: 14px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.71;
+        letter-spacing: normal;
+        color: $maroon-50;
+        height: 1.5rem;
+      }
       .svg-icon {
-        width: 14px;
-        height: 16px;
-        margin-right: 8.5px;
+        svg {
+          height: 1rem;
+          width: 1rem;
+          object-fit: contain;
+        }
+        margin-right: 0.5rem;
+        color: $maroon-50;
       }
     }
 
     .task-modal-footer {
+      margin: 0;
       padding: 16px 24px;
       width: 100%;
 
@@ -1147,10 +1174,69 @@
 </style>
 
 <style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
   .gold {
     width: 24px;
     margin: 0 7px;
   }
+
+  .habit-option {
+    &-container {
+      min-width: 3rem;
+      cursor: pointer;
+      &:first-of-type {
+        margin-right: 2rem;
+      }
+    }
+    &-button {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 50%;
+    }
+    &-icon {
+      width: 10px;
+      height: 10px;
+      color: $white;
+      &.disabled {
+        color: $gray-200;
+      }
+      &.negative {
+        margin-top: 0.5rem;
+      }
+    }
+    &-label {
+      font-size: 12px;
+      font-weight: bold;
+      text-align: center;
+      &.disabled {
+        color: $gray-100;
+        font-weight: normal;
+      }
+    }
+  }
+
+  input, textarea, input.form-control, textarea.form-control {
+    padding: 0.25rem 0.75rem;
+    line-height: 1.71;
+  }
+  .input-title {
+    height: 2rem;
+  }
+  .input-notes {
+    height: 3.5rem;
+  }
+  label {
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 1.71;
+  }
+  .flex-group {
+    display: flex;
+    .flex {
+      flex: 1;
+    }
+  }
 </style>
 
 <script>
@@ -1237,6 +1323,15 @@ export default {
       dayMapping: 'constants.DAY_MAPPING',
       ATTRIBUTES: 'constants.ATTRIBUTES',
     }),
+    advancedSettingsAvailable () {
+      if (
+        this.task.type === 'reward'
+        || this.task.type === 'todo'
+        || this.purpose === 'create'
+        || !this.isUserTask
+      ) return false;
+      return true;
+    },
     groupAccessRequiredAndOnPersonalPage () {
       if (!this.groupId && this.task.group && this.task.group.id) return true;
       return false;
@@ -1261,6 +1356,9 @@ export default {
     canDelete () {
       return this.purpose !== 'create' && this.canDeleteTask(this.task);
     },
+    canSave () {
+      return this.task && this.task.text && this.task.text.length > 0;
+    },
     title () {
       const type = this.$t(this.task.type);
       return this.$t(this.purpose === 'edit' ? 'editATask' : 'createTask', { type });
@@ -1305,6 +1403,11 @@ export default {
     remainingSelectedTags () {
       return this.selectedTags.slice(this.maxTags);
     },
+    cssClassHeadings () {
+      const textClass = this.cssClass('text');
+      if (textClass.indexOf('purple') !== -1 || textClass.indexOf('worst') !== -1) return null;
+      return textClass;
+    },
   },
   watch: {
     task () {
@@ -1359,6 +1462,10 @@ export default {
       this.syncTask();
     },
     cssClass (suffix) {
+      if (!this.task) {
+        return '';
+      }
+
       return this.getTaskClasses(this.task, `${this.purpose === 'edit' ? 'edit' : 'create'}-modal-${suffix}`);
     },
     closeTagsPopup () {
@@ -1434,6 +1541,7 @@ export default {
       }
     },
     async submit () {
+      if (!this.canSave) return;
       if (this.newChecklistItem) this.addChecklistItem();
 
       // TODO Fix up permissions on task.group so we don't have to keep doing these hacks
diff --git a/website/client/src/store/getters/tasks.js b/website/client/src/store/getters/tasks.js
index 0390a5342e..6b9a24e4fb 100644
--- a/website/client/src/store/getters/tasks.js
+++ b/website/client/src/store/getters/tasks.js
@@ -108,6 +108,11 @@ export function canEdit (store) {
   };
 }
 
+function _nonInteractive (task) {
+  return (task.group && task.group.id && !task.userId)
+    || (task.challenge && task.challenge.id && !task.userId);
+}
+
 export function getTaskClasses (store) {
   const userPreferences = store.state.user.data.preferences;
 
@@ -123,10 +128,16 @@ export function getTaskClasses (store) {
     switch (purpose) {
       case 'edit-modal-bg':
         return `task-${color}-modal-bg`;
+      case 'edit-modal-content':
+        return `task-${color}-modal-content`;
+      case 'create-modal-content':
+        return 'task-purple-modal-content';
       case 'edit-modal-text':
         return `task-${color}-modal-text`;
       case 'edit-modal-icon':
         return `task-${color}-modal-icon`;
+      case 'edit-modal-input':
+        return `task-${color}-modal-text task-${color}-modal-input`;
       case 'edit-modal-option-disabled':
         return `task-${color}-modal-option-disabled`;
       case 'edit-modal-habit-control-disabled':
@@ -135,6 +146,8 @@ export function getTaskClasses (store) {
         return 'task-purple-modal-bg';
       case 'create-modal-text':
         return 'task-purple-modal-text';
+      case 'create-modal-input':
+        return 'task-purple-modal-text task-purple-modal-input';
       case 'create-modal-icon':
         return 'task-purple-modal-icon';
       case 'create-modal-option-disabled':
@@ -146,7 +159,7 @@ export function getTaskClasses (store) {
         if (type === 'todo' || type === 'daily') {
           if (task.completed || (!shouldDo(dueDate, task, userPreferences) && type === 'daily')) {
             return {
-              bg: 'task-disabled-daily-todo-control-bg',
+              bg: _nonInteractive(task) ? 'task-disabled-daily-todo-control-bg-noninteractive' : 'task-disabled-daily-todo-control-bg',
               checkbox: 'task-disabled-daily-todo-control-checkbox',
               inner: 'task-disabled-daily-todo-control-inner',
               content: 'task-disabled-daily-todo-control-content',
@@ -154,22 +167,30 @@ export function getTaskClasses (store) {
           }
 
           return {
-            bg: task.group && task.group.id && !task.userId ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`,
+            bg: _nonInteractive(task) ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`,
             checkbox: `task-${color}-control-checkbox`,
             inner: `task-${color}-control-inner-daily-todo`,
             icon: `task-${color}-control-icon`,
           };
         } if (type === 'reward') {
           return {
-            bg: task.group && task.group.id && !task.userId ? 'task-reward-control-bg-noninteractive' : 'task-reward-control-bg',
+            bg: _nonInteractive(task) ? 'task-reward-control-bg-noninteractive' : 'task-reward-control-bg',
           };
         } if (type === 'habit') {
           return {
             up: task.up
-              ? { bg: task.group && task.group.id && !task.userId ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`, inner: `task-${color}-control-inner-habit`, icon: `task-${color}-control-icon` }
+              ? {
+                bg: _nonInteractive(task) ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`,
+                inner: _nonInteractive(task) ? `task-${color}-control-inner-habit-noninteractive` : `task-${color}-control-inner-habit`,
+                icon: `task-${color}-control-icon`,
+              }
               : { bg: 'task-disabled-habit-control-bg', inner: 'task-disabled-habit-control-inner', icon: `task-${color}-control-icon` },
             down: task.down
-              ? { bg: task.group && task.group.id && !task.userId ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`, inner: `task-${color}-control-inner-habit`, icon: `task-${color}-control-icon` }
+              ? {
+                bg: _nonInteractive(task) ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`,
+                inner: _nonInteractive(task) ? `task-${color}-control-inner-habit-noninteractive` : `task-${color}-control-inner-habit`,
+                icon: `task-${color}-control-icon`,
+              }
               : { bg: 'task-disabled-habit-control-bg', inner: 'task-disabled-habit-control-inner', icon: `task-${color}-control-icon` },
           };
         }
diff --git a/website/common/locales/en/tasks.json b/website/common/locales/en/tasks.json
index e08980abc8..6c88e5c29e 100644
--- a/website/common/locales/en/tasks.json
+++ b/website/common/locales/en/tasks.json
@@ -8,7 +8,8 @@
   "addMultipleTip": "<strong>Tip:</strong> To add multiple <%= taskType %>, separate each one using a line break (Shift + Enter) and then press \"Enter.\"",
   "addsingle": "Add Single",
   "addATask": "Add a <%= type %>",
-  "editATask": "Edit a <%= type %>",
+  "addATitle": "Add a title",
+  "editATask": "Edit <%= type %>",
   "createTask": "Create <%= type %>",
   "addTaskToUser": "Add Task",
   "scheduled": "Scheduled",
@@ -33,6 +34,7 @@
   "text": "Title",
   "extraNotes": "Extra Notes",
   "notes": "Notes",
+  "addNotes": "Add notes",
   "direction/Actions": "Direction/Actions",
   "advancedSettings": "Advanced Settings",
   "taskAlias": "Task Alias",