diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 947ed4aa..89f0024e 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -4,7 +4,7 @@
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
       <div class="fade-on-route-transition sub-container make-tall overflow-scroller px-5">
-        <div v-html="ProviderPreferenceHeaderText"  class="text-center mb-4 modal-link" ></div>
+        <div v-html="ProviderPreferenceHeaderText"  class="text-center mb-5 modal-link" ></div>
         <div
             v-html="ProviderPreferenceBodyText"
             class="mt-0 body-text" 
@@ -123,16 +123,16 @@ export default {
     overflow-X: hidden !important;   
 }
 #sub-header span{
-color: #000000;
+color: $black;
 }
-.body-text p{
-  margin-bottom: 0.5rem;
+.body-text {
+color: $darker-gray;
+p, li {
+margin-bottom: 0.5rem;
 }
-.body-text li{
-  margin-bottom: 0.5rem;
 }
 .modal-link a{
-  color:#06577C;
+  color: $blue-700;
   font-size: 14px;
   line-height: 24px;
   font-weight: 500;
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index d9b462af..67c4c414 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -68,6 +68,9 @@ $orange: #fd7e14;
 $teal: #20c997;
 $cyan: #0dcaf0;
 
+// Darker gray
+$darker-gray: #525656;
+
 // scss-docs-start colors-map
 $colors: (
     "blue": $blue,
@@ -83,6 +86,7 @@ $colors: (
     "white": $white,
     "gray": $gray,
     "gray-dark": $gray-500,
+    "darker-gray":$darker-gray,
 );
 
 // scss-docs-start theme-color-variables