From 2e47d6b9ed1f8c48c846a69106fdf019175b3698 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 10 Apr 2023 16:47:13 -0400
Subject: [PATCH 1/5] Consolidate CSS. Remove comments. Set scroll to auto vs
 scroll.

---
 .../button-question/button-question.vue       | 10 ------
 .../questions-page-layout.vue                 | 14 +-------
 src/layouts/address-lookup/address-lookup.vue | 14 --------
 .../coverage-statement/coverage-statement.vue | 14 +-------
 .../license-plate-lookup.vue                  | 14 +-------
 .../policy-holder-details.vue                 | 11 -------
 .../provider-preference.vue                   | 32 ++++++-------------
 .../service-location/service-location.vue     | 15 ---------
 src/layouts/vehicle-damage/vehicle-damage.vue | 15 ---------
 src/layouts/vehicle-lookup/vehicle-lookup.vue | 15 ---------
 src/layouts/vehicle-make/vehicle-make.vue     | 15 ---------
 src/layouts/vehicle-model/vehicle-model.vue   | 18 -----------
 src/layouts/vehicle-parts/vehicle-parts.vue   | 15 +--------
 src/layouts/vehicle-style/vehicle-style.vue   | 18 -----------
 src/layouts/vehicle-year/vehicle-year.vue     | 15 ---------
 src/layouts/vin-lookup/vin-lookup.vue         | 15 ---------
 src/layouts/welcome-page/welcome-page.vue     | 14 +-------
 src/styles/common-styles.scss                 | 12 +++++++
 18 files changed, 27 insertions(+), 249 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 89727170..68653049 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -233,16 +233,6 @@ export default {
 </script>
 
 <style lang="scss">
-// .button-question-overflow {
-//     height: calc(100vh - 274px);
-//
-//     .overflow-scroll {
-//         // Height will be determined by overall height of content above list
-//         height: calc(100% - 400px);
-//         overflow-x: hidden !important;
-//         -webkit-overflow-scrolling: touch;
-//     }
-// }
 .button-question {
     color: $black;
 
diff --git a/src/iss-components/questions-page-layout/questions-page-layout.vue b/src/iss-components/questions-page-layout/questions-page-layout.vue
index d6857fcb..be67de5b 100644
--- a/src/iss-components/questions-page-layout/questions-page-layout.vue
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@@ -103,19 +103,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 100px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
+<style lang="scss">
 .questions-page {
     .question-text {
         margin-bottom: 0.5rem;
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index da2de16c..a2c345f3 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -352,17 +352,3 @@ components: {
 },
 };
 </script>
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 100px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
-</style>
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 8a7cb5f5..5f7a886a 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -149,19 +149,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 100px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
+<style lang="scss">
 ol {
     margin-left: -1rem;
     li {
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index d2557d7e..b1c49299 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -316,19 +316,7 @@ export default {
     };
     </script>
 
-    <style lang="scss" scoped>
-    .fade-on-route-transition {
-        margin-bottom: 100px;
-    }
-    .page-container-grouped-styles {
-        overflow: auto;
-    }
-
-    .modal-open {
-        .page-container-grouped-styles {
-            overflow: hidden;
-        }
-    }
+    <style lang="scss">
     #license-plate-question-wrapper .form-test-error {
         /**
         Override extra margin-bottom in the error message in TextboxQuestion
diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index 28d82c2e..1de675b1 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -135,17 +135,6 @@ export default {
     }
     </script>
     <style lang="scss">
-    .fade-on-route-transition {
-        height: calc(100% - 120px);
-        overflow: scroll;
-        overflow-x: hidden;
-    }
-
-    .modal-open {
-        .fade-on-route-transition {
-            overflow: hidden;
-        }
-    }
     .alert.alert-warning
     {
         margin-top: 20px;
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 2a637266..e5d75533 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -125,33 +125,21 @@ export default {
     },
 };
 </script>
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 100px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
+<style lang="scss">
 #sub-header span{
-color: $black;
+    color: $black;
 }
 .body-text {
-color: $darker-gray;
-p, li {
-margin-bottom: 0.5rem;
-}
+    color: $darker-gray;
+    p, li {
+        margin-bottom: 0.5rem;
+    }
 }
 .modal-link a{
-  color: $blue-700;
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: 500;
+    color: $blue-700;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 500;
 }
 .question-text {
     margin-top: 0;
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index ae932ac0..9b7b8115 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -76,18 +76,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 100px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
-</style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index fdf75458..daf6b9a1 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -478,18 +478,3 @@ export default {
         },
     };
     </script>
-
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 100px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
-</style>
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index 81f42102..6d30d29e 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -106,18 +106,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 100px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
-</style>
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 5f70480d..2c48f36a 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -100,18 +100,3 @@ export default {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 80px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
-</style>
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 9fe5dc57..4fba014f 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -109,21 +109,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss" scoped>
-.container-fluid {
-    margin-bottom: 80px;
-}
-.fade-on-route-transition {
-    margin-bottom: 80px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
-</style>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 6ad6ad82..7dfa03f5 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -232,20 +232,7 @@ components: {
 },
 };
 </script>
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 100px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
-
+<style lang="scss">
 #vehicle-parts-alert {
     .alert-heading {
         margin-top: 0.25rem !important;
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 07ab0f78..fa10e553 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -122,21 +122,3 @@ export default {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-.container-fluid {
-    margin-bottom: 80px;
-}
-.fade-on-route-transition {
-    margin-bottom: 80px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
-</style>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 1241ab63..fe9b41fa 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -99,18 +99,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 80px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
-</style>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index a7eca68b..8221c7c6 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -254,18 +254,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss" scoped>
-.fade-on-route-transition {
-    margin-bottom: 100px;
-}
-.page-container-grouped-styles {
-    overflow: auto;
-}
-
-.modal-open {
-    .page-container-grouped-styles {
-        overflow: hidden;
-    }
-}
-</style>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 8d7e7814..372a3553 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -348,19 +348,7 @@ export default {
 </script>
 
 <style lang="scss">
-
-.fade-on-route-transition {
-    height: calc(100% - 80px);
-    overflow: scroll;
-}
-
-.modal-open {
-    .fade-on-route-transition {
-        overflow: hidden;
-    }
-}
-.my-2
-{
+.my-2 {
     margin-bottom: 0rem !important;
 }
 @-moz-document url-prefix() {
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 2b3acb36..80b49a12 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -57,4 +57,16 @@ body {
       height: calc(100% - 72px);
     }
 
+    // Scroll page when modal isn't open
+    .fade-on-route-transition {
+        height: calc(100% - 80px);
+        overflow: auto;
+    }
+    // Prevent scroll when modal is open
+    .modal-open {
+        .fade-on-route-transition {
+            overflow: hidden;
+        }
+    }
+
   }

From 0c459bc408c6358ca92f637bce8fbf1cf6045b57 Mon Sep 17 00:00:00 2001
From: Jethe <Manjiri.Jethe@safelite.com>
Date: Tue, 11 Apr 2023 14:25:06 +0530
Subject: [PATCH 2/5] Front End of service-location page

SSR-370
---
 .../service-location/service-location.vue     | 93 +++++++++++++++----
 1 file changed, 76 insertions(+), 17 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index ae932ac0..76a6c34b 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,14 +1,23 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+        <div class="page-container-grouped-styles">  
+            <siteHeader cmsWidgetName="SiteHeaderWidget" class="siteHeader"/>
+            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" /> 
+            <div class="fade-on-route-transition position-relative px-5 choose-option">
+
+                <buttonQuestion 
+                    cmsWidgetName="ServiceTypeQuestionWidget" 
+                    :questionText="questionText" 
+                    :answers="answersFromCms" 
+                    buttonTypeString="listCard" 
+                    isRequired 
+                    v-model="selectedValues" 
+                    validationRules="selection-required"/>
                 <div class="select-car">
                     <div class="container-fluid pb-2">
                         <div class="row px-3">
                             <div class="col">
                                 <div class="select-car-form rounded">
-                                    <p>Placeholder for service-location page</p>
                                     <siteFooter
                                     cmsWidgetName="SiteFooterWidget"
                                     :isForwardActionDisabled="!meta.valid"
@@ -26,22 +35,30 @@
     </Form>
 </template>
 <script>
-// Import Supporting Files
+  // Import Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+
 // Import Component
 import baseFormMixin from "@/mixins/base-form-mixin";
-import { Form } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
 import siteFooter from "@/iss-components/site-footer/site-footer.vue";
 import siteHeader from "@/iss-components/site-header/site-header.vue";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+
+// DEFINE VALIDATION RULES
+defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
 export default {
-    name: "provider-preference",
+    name: "service-location",
     mixins: [baseFormMixin],
     components: {
         siteFooter,
         siteHeader,
         siteSubHeader,
+        buttonQuestion,
         Form,
     },
     data() {
@@ -50,25 +67,31 @@ export default {
     async beforeRouteEnter(to, from, next) {
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
         // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-        ];
+        const promiseResultMap = [{
+            resultKey: "cmsContent",
+            promise: cmsContentPromise,
+        }, ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+    computed: {
+        questionText() {
+            return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
+        },        
+    },
     methods: {
         arePagePrerequisiteValid() {
             return true;
         },
         backButtonAction() {
             /**
-            * this.navigationScenarios comes from base-mixin
-            */
+             * this.navigationScenarios comes from base-mixin
+             */
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {},
@@ -77,7 +100,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .fade-on-route-transition {
     margin-bottom: 100px;
 }
@@ -90,4 +113,40 @@ export default {
         overflow: hidden;
     }
 }
-</style>
+#sub-header span {
+    color:#000000;
+}
+.question-text {
+   & > span {
+        line-height: 1.500rem;
+    }
+}
+.list-card-content p {
+    &:first-of-type {
+    line-height: 1.5rem;
+    }
+    &:not(:nth-of-type(1)){
+    line-height: 1.250rem;
+    }
+}
+.siteHeader{
+    .site-header{
+        margin-bottom: 1.25rem !important;
+    }
+    
+}
+.choose-option{
+        .button-question >div {
+            &:first-of-type {
+        margin-bottom: 0.95rem;
+        line-height: 1.500rem;
+            }
+    }
+}
+.button-question{
+    .row.form-test-error{
+        line-height:1.500rem;
+        padding-left: 0rem !important;
+    }
+}
+</style>
\ No newline at end of file

From a9c431c125fa1b9d420a7df9c66adc4083a0211e Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 11 Apr 2023 09:14:31 -0400
Subject: [PATCH 3/5] Format CSS. Remove whitespace.

---
 src/styles/common-styles.scss | 72 ++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 39 deletions(-)

diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 80b49a12..92f3478d 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -5,58 +5,53 @@ body {
     background-color: #fff;
     color: #4D5151;
     .container-fluid {
-      max-width: 576px; //Remove once desktop app is complete
-      &.container-shadow {
-        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
-      }
-      &.make-tall {
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-      }
-      .prevent-squish{
-        overflow-x: unset;
-      }
+        max-width: 576px; //Remove once desktop app is complete
+        &.container-shadow {
+            box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
+        }
+        &.make-tall {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .prevent-squish{
+            overflow-x: unset;
+        }
     }
     .pointer {
-      cursor: pointer;
+        cursor: pointer;
     }
     .container,
     .container-fluid {
-      overflow: hidden;
+        overflow: hidden;
     }
-
     .sub-container{
-      &.make-tall {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow-x: hidden;
-      }
+        &.make-tall {
+            height: 100%;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow-x: hidden;
+        }
     }
-
     .sr-only {
-      position: absolute;
-      left: -10000px;
-      top: auto;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
+        position: absolute;
+        left: -10000px;
+        top: auto;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
     }
-
     .page-container-grouped-styles {
-      @extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
+        @extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
     }
-
     //Footer modal backdrop adjustments for positioning
     .modal-backdrop {
-      left: 50%;
-      transform: translateX(-50%);
-      max-width: 576px;
-      height: calc(100% - 72px);
+        left: 50%;
+        transform: translateX(-50%);
+        max-width: 576px;
+        height: calc(100% - 72px);
     }
-
     // Scroll page when modal isn't open
     .fade-on-route-transition {
         height: calc(100% - 80px);
@@ -68,5 +63,4 @@ body {
             overflow: hidden;
         }
     }
-
-  }
+}

From 86073a18410f6fbce258e4cfd36e0b3f577adb6d Mon Sep 17 00:00:00 2001
From: Jethe <Manjiri.Jethe@safelite.com>
Date: Tue, 11 Apr 2023 18:52:36 +0530
Subject: [PATCH 4/5] Updated ux-variables

SSR-370
---
 src/layouts/service-location/service-location.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 76a6c34b..36fe02e1 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -114,7 +114,7 @@ export default {
     }
 }
 #sub-header span {
-    color:#000000;
+    color: $black;
 }
 .question-text {
    & > span {

From 40b763cc2a82552f053d1ea050e098a11d0a281c Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 11 Apr 2023 11:26:39 -0400
Subject: [PATCH 5/5] Reinsert mistakenly deleted subheader.

---
 src/layouts/provider-preference/provider-preference.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index e5d75533..11bf45f7 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -3,12 +3,13 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
                 <div class="select-car">
                     <div class="container-fluid pb-2">
                         <div class="row px-3">
                             <div class="col">
                                 <div class="select-car-form rounded">
-                                    <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"