diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 31f61a2c196..dd84b7af869 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -62,7 +62,7 @@ $critical: #ec2128;
 // -------------------------
 
 $body-bg: $gray-7;
-$page-bg: $gray-6;
+$page-bg: $gray-7;
 $body-color: $gray-1;
 $text-color: $gray-1;
 $text-color-strong: $dark-2;
@@ -402,6 +402,6 @@ $panel-grid-placeholder-shadow: 0 0 4px $blue-light;
 $logs-color-unkown: $gray-5;
 
 // toggle-group
-$button-toggle-group-btn-active-bg: linear-gradient(90deg, $yellow, $red);
-$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+$button-toggle-group-btn-active-bg: $brand-primary;
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $white;
 $button-toggle-group-btn-seperator-border: 1px solid $gray-6;
diff --git a/public/sass/components/_toggle_button_group.scss b/public/sass/components/_toggle_button_group.scss
index 73ebf61778e..ae1bb621d16 100644
--- a/public/sass/components/_toggle_button_group.scss
+++ b/public/sass/components/_toggle_button_group.scss
@@ -8,13 +8,13 @@
     font-weight: $font-weight-semi-bold;
     font-size: $font-size-sm;
     border-radius: 0;
-    color: $text-color;
     border-right: $button-toggle-group-btn-seperator-border;
 
     &.active {
       background: $button-toggle-group-btn-active-bg;
       box-shadow: $button-toggle-group-btn-active-shadow;
       border-right: 0;
+      color: $white;
 
       &:hover {
         cursor: default;