diff --git a/frontend/src/assets/scss/base.scss b/frontend/src/assets/scss/base.scss
index d55ffdc8..83be8649 100644
--- a/frontend/src/assets/scss/base.scss
+++ b/frontend/src/assets/scss/base.scss
@@ -252,10 +252,6 @@
     }
   }
 
-  .mini_success {
-    background-color: #f3f3f3;
-  }
-
   .no-decoration {
     color: black;
     text-decoration: none;
@@ -266,10 +262,6 @@
     text-decoration: none;
   }
 
-  .mini_error {
-    background-color: #ffbbbb;
-  }
-
   .btn-white {
     background-color: white;
     border: 1px solid #d8d8d8;
diff --git a/frontend/src/assets/scss/layout.scss b/frontend/src/assets/scss/layout.scss
index 2840c637..1fb837d0 100644
--- a/frontend/src/assets/scss/layout.scss
+++ b/frontend/src/assets/scss/layout.scss
@@ -18,6 +18,22 @@ A:HOVER {
   color: darken($text-color, 30%) !important;
 }
 
+.day-success {
+  background-color: $day-success-background;
+}
+
+.day-success:HOVER {
+  background-color: lighten($day-success-background, 2%) !important;
+}
+
+.day-error {
+  background-color: $day-error-background;
+}
+
+.day-error:HOVER {
+  background-color: lighten($day-error-background, 2%) !important;
+}
+
 .contain-card {
 
   .card-header {
@@ -82,7 +98,7 @@ A:HOVER {
 }
 
 .list-group-item:HOVER {
-  background-color: darken($group-list-background, 12%) !important;
+  background-color: lighten($group-list-background, 2%) !important;
 }
 
 .list-group-item A {
diff --git a/frontend/src/assets/scss/variables.scss b/frontend/src/assets/scss/variables.scss
index 20f9f9c7..80cdaa1b 100644
--- a/frontend/src/assets/scss/variables.scss
+++ b/frontend/src/assets/scss/variables.scss
@@ -1,25 +1,28 @@
 /*    Index Page      */
-$background-color: #313131;
-$container-color: #494949;
-$text-color: #e3e3e3;
+$background-color: #f5f5f5;
+$container-color: #ffffff;
+$text-color: #1d1d1d;
 $max-width: 860px;
-$title-color: #ffffff;
-$description-color: #d2d2d2;
+$title-color: #4e4e4e;
+$description-color: #828282;
 $subtitle-color: #747474;
 $mobile-card-shadow: 2px 3px 10px #b7b7b7;
-$group-list-background: #282828;
-$group-list-title: #ea8114;
-$navbar-color: #ea8114;
-$navbar-background: #323232;
-$input-background: #323232;
-$input-color: #f5821c;
-$input-border: 1px solid #e78033;
+
+$group-list-background: #fafafa;
+$group-list-title: #474747;
+$navbar-color: #1c1c1c;
+$navbar-background: #ffffff;
+$input-background: #fdfdfd;
+$input-color: #4e4e4e;
+$input-border: 1px solid #c9c9c9;
+$day-success-background: #18ce08;
+$day-error-background: #d50a0a;
 
 /*    Status Container   */
-$card-background: #2a2a2a;
-$card-border: 1px solid rgba(0,0,0,.125);
+$card-background: #fcfcfc;
+$card-border: 1px solid rgba(76, 76, 76, 0.12);
 $card-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.08);
-$service-title: #f17833;
+$service-title: #3e3e3e;
 $service-title-size: 1.8rem;
 $service-stats-color: #4f4f4f;
 $service-description-color: #fff;
diff --git a/frontend/src/components/Index/GroupServiceFailures.vue b/frontend/src/components/Index/GroupServiceFailures.vue
index 72ad7bda..50f8d2cb 100644
--- a/frontend/src/components/Index/GroupServiceFailures.vue
+++ b/frontend/src/components/Index/GroupServiceFailures.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="d-flex mt-3 mb-2">
-            <div class="flex-fill service_day" v-for="(d, index) in failureData" :class="{'mini_error': d.amount > 0, 'mini_success': d.amount === 0}">
+            <div class="flex-fill service_day" v-for="(d, index) in failureData" :class="{'day-error': d.amount > 0, 'day-success': d.amount === 0}">
                 <span v-if="d.amount != 0" class="small">{{d.amount}}</span>
             </div>
         </div>
diff --git a/frontend/src/forms/Notifier.vue b/frontend/src/forms/Notifier.vue
index c7b52a17..1e1c2d0a 100644
--- a/frontend/src/forms/Notifier.vue
+++ b/frontend/src/forms/Notifier.vue
@@ -128,11 +128,11 @@
                         </button>
                     </div>
                     <div class="col-12 col-md-4 mb-2 mb-sm-0 mt-2 mt-sm-0">
-                        <button @click.prevent="testNotifier('success')" :disabled="loadingTest" class="btn btn-outline-dark btn-block text-capitalize test-notifier">
+                        <button @click.prevent="testNotifier('success')" :disabled="loadingTest" class="btn btn-secondary btn-block text-capitalize test-notifier">
                             <font-awesome-icon v-if="loadingTest" icon="circle-notch" class="mr-2" spin/>{{loadingTest ? "Loading..." : "Test Success"}}</button>
                     </div>
                     <div class="col-12 col-md-4 mb-2 mb-sm-0 mt-2 mt-sm-0">
-                        <button @click.prevent="testNotifier('failure')" :disabled="loadingTest" class="btn btn-outline-dark btn-block text-capitalize test-notifier">
+                        <button @click.prevent="testNotifier('failure')" :disabled="loadingTest" class="btn btn-secondary btn-block text-capitalize test-notifier">
                             <font-awesome-icon v-if="loadingTest" icon="circle-notch" class="mr-2" spin/>{{loadingTest ? "Loading..." : "Test Failure"}}</button>
                     </div>
                 </div>