diff --git a/src/iss-components/site-header/progress-bar/progress-bar.vue b/src/iss-components/site-header/progress-bar/progress-bar.vue
index 700556ad..c7edfef7 100644
--- a/src/iss-components/site-header/progress-bar/progress-bar.vue
+++ b/src/iss-components/site-header/progress-bar/progress-bar.vue
@@ -44,7 +44,7 @@ export default {
 
         .progress-bar-header {
             padding-right: 0.3125rem;
-            color: $progress-bar-color;
+            color: $progress-bar-success-color;
             font-weight: 600;
             font-size: 0.875rem;
             line-height: 0.9375rem;
@@ -63,9 +63,10 @@ export default {
             margin-left: 0;
             border-radius: $border-radius-pill;
             overflow: visible;
+            background-color: $progress-bar-background-color;
 
             .progress-bar {
-                background-color: $progress-bar-color;
+                background-color: $progress-bar-success-color;
                 border-radius: $border-radius-pill 0 0 $border-radius-pill;
                 overflow: visible;
 
@@ -78,7 +79,7 @@ export default {
                     margin-top: -1px;
                     border: 0.125rem solid #ffffff;
                     border-radius: 50%;
-                    background-color: $progress-bar-color;
+                    background-color: $progress-bar-success-color;
                     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
                 }
             }
diff --git a/src/styles/client-customizations.scss b/src/styles/client-customizations.scss
index b384870f..26beae9f 100644
--- a/src/styles/client-customizations.scss
+++ b/src/styles/client-customizations.scss
@@ -9,7 +9,8 @@
     $accent-color: #09748b;
     $link: #09748b;
     $svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23
-    $progress-bar-color: #181643;
+    $progress-bar-success-color: #1a1446;
+    $progress-bar-background-color: #ffffff;
 
     svg,
     .modal-text {
@@ -29,15 +30,17 @@
 
     .progress-bar-container {
         .progress-bar-header {
-            color: $progress-bar-color;
+            color: $progress-bar-success-color;
         }
 
         .progress {
+            background-color: $progress-bar-background-color;
+
             .progress-bar {
-                background-color: $progress-bar-color;
+                background-color: $progress-bar-success-color;
 
                 .progress-bar-middle {
-                    background-color: $progress-bar-color;
+                    background-color: $progress-bar-success-color;
                 }
             }
         }
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index d713b8ed..d34f8d8b 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -156,7 +156,8 @@ $border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of
 $border-radius-pill: 50rem;
 
 //Progress Bar Styling
-$progress-bar-color: $green;
+$progress-bar-success-color: $green;
+$progress-bar-background-color: #cacbcc;
 
 //Spacing
 // 8 spacers available instead of the usual 5