diff --git a/website/client/assets/scss/task.scss b/website/client/assets/scss/task.scss
index 2c9d271482..7ed5d819a3 100644
--- a/website/client/assets/scss/task.scss
+++ b/website/client/assets/scss/task.scss
@@ -168,7 +168,7 @@
   &-better { // teal
     &-control {
       &-bg { 
-        background: $teal-50 !important;
+        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; }
@@ -176,19 +176,19 @@
       }
       &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
       &-inner-daily-todo { background: #8dedf6 !important; }
-      &-checkbox { color: $teal-50 !important; }
+      &-checkbox { color: $teal-100 !important; }
     }
 
     &-modal {
-      &-bg { background: $teal-50 !important; }
-      &-icon { color: $teal-50 !important; }
+      &-bg { background: $teal-100 !important; }
+      &-icon { color: $teal-100 !important; }
       &-text { color: $teal-10 !important; }
       &-option-disabled:hover {
-        .svg-icon { color: $teal-50 !important; }
+        .svg-icon { color: $teal-100 !important; }
         .option-item-label { color: $teal-10 !important; }
       }
       &-habit-control-disabled:hover {
-        .habit-control { background: $teal-50 !important; }
+        .habit-control { background: $teal-100 !important; }
         .option-item-label { color: $teal-10 !important; }
       }
     }