diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index 88398e786668adefd7430b603de9f13c727ef320..d464752e3791857c6b19d014a5612dda0bab73de 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -120,10 +120,6 @@ $brown-60: mix($brown, #fff, 60%); // #ca9eaf
 $brown-40: mix($brown, #fff, 40%); // #dcbeb4
 $brown-20: mix($brown, #fff, 20%); // #edded9
 
-// $fieldset-header: $content-color-20;
-$fieldset-header: $dark-gray-color-10;
-$fieldset-border: $base-color-20;
-
 // contrast colors
 $contrast-content-white: text-contrast($content-color, #ffffff, #000000);
 $contrast-content-gray: text-contrast($content-color, $dark-gray-color, #000000 , 67);
@@ -271,6 +267,9 @@ $color--table-border: $color--gray-6;
 $color--table-focus: $color--gray-6;
 $color--table-hover: $color--gray-6;
 
+$color--fieldset-header: $color--gray-6;
+$color--fieldset-border: $color--gray-5;
+
 $color--button-background: $color--white;
 $color--button-border: $color--blue-1;
 $color--button-focus: $color--blue-1;
diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss
index 12dedc836b9d6db650b62666e542d6d53291796f..7b81dca37084f138e7b28fa70c0674df97daf09d 100644
--- a/resources/assets/stylesheets/scss/forms.scss
+++ b/resources/assets/stylesheets/scss/forms.scss
@@ -201,15 +201,15 @@ form.default {
     fieldset {
         box-sizing: border-box;
         border: none;
-        border: solid 1px var(--content-color-40);
+        border: solid 1px var(--color--fieldset-border);
         margin: 0 0 15px;
         min-width: auto;
         padding: 0 0 10px 0;
 
         > legend {
             box-sizing: border-box;
-            background-color: var(--fieldset-header);
-            border: solid 1px var(--content-color-40);
+            background-color: var(--color--fieldset-header);
+            border: solid 1px var(--color--fieldset-border);
             border-bottom: 0;
             font-size: $font-size-h3;
             padding: 10px;
diff --git a/resources/assets/stylesheets/scss/tables.scss b/resources/assets/stylesheets/scss/tables.scss
index 094a0d6b568f7e07890de7b0403df60244c19395..85e09f3f8c4ed696231d5b0b5c8d0cd6c70065f0 100644
--- a/resources/assets/stylesheets/scss/tables.scss
+++ b/resources/assets/stylesheets/scss/tables.scss
@@ -891,7 +891,7 @@ table.course-search {
 
     caption.legend {
         box-sizing: border-box;
-        background-color: $fieldset-header;
+        background-color: var(--color--table-header);
         border: 1px solid var(--color--table-border);
         border-bottom: 0;
         color: var(--brand-color-dark);
@@ -962,7 +962,7 @@ table.show-tree {
             }
 
             a:hover {
-                background-color: $fieldset-header !important;
+                background-color: var(--color--table-header) !important;
                 color: var(--base-color) !important;
             }
         }
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 5df903d60901bba26e32873c3c1dcf55d8f1d5d9..889d5f2e23f78744d64c329ce0f641e47be64b1b 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -123,8 +123,6 @@ $grid-gap: 0;
     #{"--"}dark-violet-40: $dark-violet-40;
     #{"--"}dark-violet-60: $dark-violet-60;
     #{"--"}dark-violet-80: $dark-violet-80;
-    #{"--"}fieldset-border: $fieldset-border;
-    #{"--"}fieldset-header: $fieldset-header;
     #{"--"}green: $green;
     #{"--"}green-20: $green-20;
     #{"--"}green-40: $green-40;
@@ -236,6 +234,9 @@ $grid-gap: 0;
     #{"--"}color--table-focus: $color--table-focus;
     #{"--"}color--table-hover: $color--table-hover;
 
+    #{"--"}color--fieldset-border: $color--fieldset-border;
+    #{"--"}color--fieldset-header: $color--fieldset-header;
+
     #{"--"}color--button-background: $color--button-background;
     #{"--"}color--button-border: $color--button-border;
     #{"--"}color--button-focus: $color--button-focus;