From 4a3c61da1bcb846ed15bde5ec5776929654b4686 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 10 Apr 2023 13:27:34 -0400
Subject: [PATCH] WIP more pages updated to non-sticky header.

---
 .../site-header/menu-modal/menu-modal.vue     |   2 +-
 src/layouts/address-lookup/address-lookup.vue | 502 ++++++++--------
 .../coverage-statement/coverage-statement.vue | 265 ++++-----
 .../license-plate-lookup.vue                  | 534 +++++++++---------
 .../policy-holder-details.vue                 |   2 +-
 .../provider-preference.vue                   | 214 +++----
 .../service-location/service-location.vue     | 139 +++--
 src/layouts/vehicle-damage/vehicle-damage.vue |   3 +-
 src/layouts/vehicle-lookup/vehicle-lookup.vue | 190 +++----
 src/layouts/vehicle-make/vehicle-make.vue     |  22 +-
 src/layouts/vehicle-model/vehicle-model.vue   |  22 +-
 src/layouts/vehicle-style/vehicle-style.vue   |  22 +-
 src/layouts/vehicle-year/vehicle-year.vue     |  22 +-
 src/layouts/vin-lookup/vin-lookup.vue         | 250 ++++----
 src/layouts/welcome-page/welcome-page.vue     |   2 +-
 15 files changed, 1129 insertions(+), 1062 deletions(-)

diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index 319143ed..b6577fc8 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@@ -78,7 +78,7 @@ export default {
         show() {
             this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
             this.isActive = true;
-            document.querySelector('.fade-on-route-transition','.page-container-grouped-styles').scrollTo({
+            document.querySelector('.page-container-grouped-styles').scrollTo({
                 top: 0,  behavior: 'instant'
             });
         },
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index bc790f71..543e7676 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -1,60 +1,65 @@
 <template>
-    <Form
-        @submit="onSubmit"
-        @invalid-submit="onInvalidSubmit"
-        ref="theForm"
-        v-slot="{ meta }"
-        autocomplete="off">
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
         <div class="page-container-grouped-styles">
-            <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
-            <div class="fade-on-route-transition sub-container overflow-scroll px-5">
-                <vehicleBanner
-                    class="mb-3"
-                    cmsWidgetName="VehicleBannerWidget"
-                    ref="vehicleBanner"
-                    :displayGenericVehicleImage="false" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
-                <alert
-                    ref="alertVinNotFound"
-                    v-if="displayVinNotFoundAlert"
-                    class="mb-4 mt-4"
-                    cmsWidgetName="AlertVinNotFoundWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-                <alert
-                    ref="alertMatchedDifferentVehicle"
-                    v-if="displayMatchedDifferentVehicleAlert"
-                    class="mb-4 mt-4"
-                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
-                    :manualCopy="AlertMatchedDifferentVehicleBody"
-                    alertClass="alert-warning"
-                    v-bind:isDismissible="false" />
-                <alert
-                        ref="alertMatchedTwoIdenticalYMMVehicle"
-                        v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
-                        class="mb-4 mt-4"
-                        cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
-                        :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
-                        :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
-                        alertClass="alert-warning"
-                        v-bind:isDismissible="false" />
-                <alert
-                    ref="alertVinLookupsByHomeAddressNotAllowed"
-                    v-if="displayVinLookupByHomeAddressNotAllowedAlert"
-                    class="mb-4 mt-4"
-                    cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner
+                                    class="mb-3"
+                                    cmsWidgetName="VehicleBannerWidget"
+                                    ref="vehicleBanner"
+                                    :displayGenericVehicleImage="false" />
+                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
+                                    <alert
+                                    ref="alertVinNotFound"
+                                    v-if="displayVinNotFoundAlert"
+                                    class="mb-4 mt-4"
+                                    cmsWidgetName="AlertVinNotFoundWidget"
+                                    alertClass="alert-danger"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedDifferentVehicle"
+                                    v-if="displayMatchedDifferentVehicleAlert"
+                                    class="mb-4 mt-4"
+                                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                                    :manualCopy="AlertMatchedDifferentVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedTwoIdenticalYMMVehicle"
+                                    v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+                                    class="mb-4 mt-4"
+                                    cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+                                    :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
+                                    :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertVinLookupsByHomeAddressNotAllowed"
+                                    v-if="displayVinLookupByHomeAddressNotAllowedAlert"
+                                    class="mb-4 mt-4"
+                                    cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
+                                    alertClass="alert-danger"
+                                    v-bind:isDismissible="false" />
 
-                <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
+                                    <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
 
-                <siteFooter
-                    cmsWidgetName="SiteFooterWidget"
-                    ref="siteFooter"
-                    :isDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @back-clicked="backButtonAction"
-                    :isForwardActionDisabled="!meta.valid" />
+                                    <siteFooter
+                                    cmsWidgetName="SiteFooterWidget"
+                                    ref="siteFooter"
+                                    :isDisabled="!meta.valid"
+                                    @ForwardClicked="forwardButtonAction"
+                                    @back-clicked="backButtonAction"
+                                    :isForwardActionDisabled="!meta.valid" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </Form>
@@ -147,211 +152,218 @@ export default {
             let vehicleInfoToCommit = {};
 
             const vinLookupResponse = useMainStore().lookupVinByAddress ({
-                    licenseLastName: this.customerQuestions.lastName,
-                    licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress,
-                    licenseZip: this.customerQuestions.addressQuestions.zipCode,
-                    licenseState: this.customerQuestions.addressQuestions.state,
-                }
-            );
-
-            // Settle promises and get results
-            const promiseResultMap = [
-                {
-                    resultKey: "vinLookupResponse",
-                    promise: vinLookupResponse,
-                }
-            ];
-
-            const resultMap = await settleAllPromises(promiseResultMap);
-            // If VIN Lookup by address is forbidden by State Restrictions then show an alert
-            if (!resultMap.vinLookupResponse.isStatePermissible) {
-                // State Restrictions forbid lookup by address
-                this.displayVinLookupByHomeAddressNotAllowedAlert = true;
-                this.$refs.siteFooter.disableForwardButton();
-                return this.$refs.siteFooter.removeLoader();
+                licenseLastName: this.customerQuestions.lastName,
+                licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress,
+                licenseZip: this.customerQuestions.addressQuestions.zipCode,
+                licenseState: this.customerQuestions.addressQuestions.state,
             }
+        );
 
-            const carsFound = resultMap.vinLookupResponse.vinVehicles;
-
-            // Handle cases for different amounts of VINS found for the address.
-            if (carsFound.length == 1) {
-                // Single VIN found
-                const carFound = carsFound[0].vehicle;
-
-                this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
-                if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
-                    // Display Alert
-                    this.previouslyEnteredCarId = carFound.carId;
-                    this.customAlertData.vehicleInfo = carFound;
-                    if(this.isTwoIdenticalYMMVehicleFound){
-                        this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
-                        this.forwardButtonCarStyle= carFound.style;
-                    }
-                    else{
-                        this.displayMatchedDifferentVehicleAlert = true;
-                    }
-
-                    this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-                        carFound.carId
-                    );
-
-                    // Update button "Continue with..."
-                    this.$refs.siteFooter.updateButtonText(
-                        `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
-                    );
-                    return this.$refs.siteFooter.removeLoader();
-                }
-
-                // update data
-                vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
-            } else if (carsFound.length > 1) {
-
-                // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
-                const matchingCars = carsFound.filter(
-                    (vin) => vin.vehicle.carId === this.mainStore.order.vehicle.carId
-                );
-
-                if (matchingCars.length === 1) {
-                    vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {
-                        vin: matchingCars[0].vin,
-                    });
-                }
-            } else {
-                // No VINS found.
-                this.displayVinNotFoundAlert = true;
-                this.$refs.siteFooter.disableForwardButton();
-                return this.$refs.siteFooter.removeLoader();
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "vinLookupResponse",
+                promise: vinLookupResponse,
             }
+        ];
 
-            // Save vehicle, customer, service and registration information
-            await useMainStore().saveRegistrationAddressLookup(
-                {
-                    isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
-                    vehicleInfo:
-                        Object.keys(vehicleInfoToCommit).length === 0
-                            ? useMainStore().order.vehicle
-                            : vehicleInfoToCommit,
-                    registrationInfo: {
-                        firstName: this.customerQuestions.firstName,
-                        lastName: this.customerQuestions.lastName,
-                        address: this.customerQuestions.addressQuestions.streetAddress,
-                        city: this.customerQuestions.addressQuestions.city,
-                        state: this.customerQuestions.addressQuestions.state,
-                        zipCode: this.customerQuestions.addressQuestions.zipCode,
-                    },
-                },
-                false
-            );
-
-            return await this.navigateForward(carsFound);
-        },
-        async navigateForward(carsFound) {
-            // Match vehicles found to vehicles in state.
-            const matchingCars = carsFound.filter(
-                (car) => car.vehicle.carId === useMainStore().order.vehicle.carId
-            );
-
-            // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
-            // display vehicle changed alert on that page.
-            if (
-                this.isCarIdDifferent &&
-                !this.isSelectedGlassAvailableForVehicle
-            ) {
-                this.$router.navigate(
-                    this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-                    this.$route,
-                    {},
-                    { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
-                );
-            } else if (matchingCars.length === 1) {
-                await this.navigateForwardWithSingleCarMatch();
-            } else {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
-                    this.$route,
-                    {},
-                    {},
-                    carsFound
-                );
-            }
-        },
-        resetWarningsAndErrors() {
-            this.displayVinNotFoundAlert = false;
-            this.displayMatchedDifferentVehicleAlert = false;
-            this.displayVinLookupByHomeAddressNotAllowedAlert = false;
-            this.$refs.siteFooter.enableForwardAction();
-        },
-    },
-    mounted() {
-        this.attachCustomEvents();
-
-    },
-    computed: {
-        AlertMatchedDifferentVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedDifferentVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-        },
-        AlertMatchedDifferentVehicleBody() {
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-
-            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
-                .replaceAll("{custom:damage}", getDamageString())
-                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
-                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
-        },
-        AlertMatchedTwoIdenticalYMMVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedTwoIdenticalYMMVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-        },
-        AlertMatchedTwoIdenticalYMMVehicleBody() {
-            const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
-            const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
-
-            return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
-                .replaceAll("{custom:damage}", getDamageString())
-                .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
-                .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
-        },
-        isTwoIdenticalYMMVehicleFound(){
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        const resultMap = await settleAllPromises(promiseResultMap);
+        // If VIN Lookup by address is forbidden by State Restrictions then show an alert
+        if (!resultMap.vinLookupResponse.isStatePermissible) {
+            // State Restrictions forbid lookup by address
+            this.displayVinLookupByHomeAddressNotAllowedAlert = true;
+            this.$refs.siteFooter.disableForwardButton();
+            return this.$refs.siteFooter.removeLoader();
         }
-    },
-    watch: {
-        customerQuestions: {
-            handler(newValue) {
-                // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote"
+
+        const carsFound = resultMap.vinLookupResponse.vinVehicles;
+
+        // Handle cases for different amounts of VINS found for the address.
+        if (carsFound.length == 1) {
+            // Single VIN found
+            const carFound = carsFound[0].vehicle;
+
+            this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
+            if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
+                // Display Alert
+                this.previouslyEnteredCarId = carFound.carId;
+                this.customAlertData.vehicleInfo = carFound;
+                if(this.isTwoIdenticalYMMVehicleFound){
+                    this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
+                    this.forwardButtonCarStyle= carFound.style;
+                }
+                else{
+                    this.displayMatchedDifferentVehicleAlert = true;
+                }
+
+                this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+                    carFound.carId
+                );
+
+                // Update button "Continue with..."
                 this.$refs.siteFooter.updateButtonText(
-                    this.getCmsContent("siteFooterWidget", "ForwardButtonText")
+                    `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
                 );
-                this.resetWarningsAndErrors();
+                return this.$refs.siteFooter.removeLoader();
+            }
+
+            // update data
+            vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
+        } else if (carsFound.length > 1) {
+
+            // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
+            const matchingCars = carsFound.filter(
+                (vin) => vin.vehicle.carId === this.mainStore.order.vehicle.carId
+            );
+
+            if (matchingCars.length === 1) {
+                vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {
+                    vin: matchingCars[0].vin,
+                });
+            }
+        } else {
+            // No VINS found.
+            this.displayVinNotFoundAlert = true;
+            this.$refs.siteFooter.disableForwardButton();
+            return this.$refs.siteFooter.removeLoader();
+        }
+
+        // Save vehicle, customer, service and registration information
+        await useMainStore().saveRegistrationAddressLookup(
+            {
+                isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
+                vehicleInfo:
+                Object.keys(vehicleInfoToCommit).length === 0
+                ? useMainStore().order.vehicle
+                : vehicleInfoToCommit,
+                registrationInfo: {
+                    firstName: this.customerQuestions.firstName,
+                    lastName: this.customerQuestions.lastName,
+                    address: this.customerQuestions.addressQuestions.streetAddress,
+                    city: this.customerQuestions.addressQuestions.city,
+                    state: this.customerQuestions.addressQuestions.state,
+                    zipCode: this.customerQuestions.addressQuestions.zipCode,
+                },
             },
-            deep: true,
+            false
+        );
+
+        return await this.navigateForward(carsFound);
+    },
+    async navigateForward(carsFound) {
+        // Match vehicles found to vehicles in state.
+        const matchingCars = carsFound.filter(
+            (car) => car.vehicle.carId === useMainStore().order.vehicle.carId
+        );
+
+        // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
+        // display vehicle changed alert on that page.
+        if (
+            this.isCarIdDifferent &&
+            !this.isSelectedGlassAvailableForVehicle
+        ) {
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                this.$route,
+                {},
+                { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+            );
+        } else if (matchingCars.length === 1) {
+            await this.navigateForwardWithSingleCarMatch();
+        } else {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
+                this.$route,
+                {},
+                {},
+                carsFound
+            );
         }
     },
-    components: {
-        siteHeader,
-        siteFooter,
-        vehicleBanner,
-        siteSubHeader,
-        customerQuestions,
-        textboxQuestion,
-        alert,
-        Form,
+    resetWarningsAndErrors() {
+        this.displayVinNotFoundAlert = false;
+        this.displayMatchedDifferentVehicleAlert = false;
+        this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+        this.$refs.siteFooter.enableForwardAction();
     },
+},
+mounted() {
+    this.attachCustomEvents();
+
+},
+computed: {
+    AlertMatchedDifferentVehicleHeader() {
+        return this.getCmsContent(
+            "AlertMatchedDifferentVehicleWidget",
+            "HeadlineText"
+        ).replaceAll("{custom:damage}", getDamageString());
+    },
+    AlertMatchedDifferentVehicleBody() {
+        const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+        const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
+        return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+        .replaceAll("{custom:damage}", getDamageString())
+        .replaceAll("{custom:vinYmmFound}", vinYmmFound)
+        .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
+    },
+    AlertMatchedTwoIdenticalYMMVehicleHeader() {
+        return this.getCmsContent(
+            "AlertMatchedTwoIdenticalYMMVehicleWidget",
+            "HeadlineText"
+        ).replaceAll("{custom:damage}", getDamageString());
+    },
+    AlertMatchedTwoIdenticalYMMVehicleBody() {
+        const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
+        const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
+
+        return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
+        .replaceAll("{custom:damage}", getDamageString())
+        .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
+        .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
+    },
+    isTwoIdenticalYMMVehicleFound(){
+        const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+        const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+        return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+    }
+},
+watch: {
+    customerQuestions: {
+        handler(newValue) {
+            // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote"
+            this.$refs.siteFooter.updateButtonText(
+                this.getCmsContent("siteFooterWidget", "ForwardButtonText")
+            );
+            this.resetWarningsAndErrors();
+        },
+        deep: true,
+    }
+},
+components: {
+    siteHeader,
+    siteFooter,
+    vehicleBanner,
+    siteSubHeader,
+    customerQuestions,
+    textboxQuestion,
+    alert,
+    Form,
+},
 };
 </script>
-<style lang="scss">
-
-.overflow-scroll {
-    height: calc(100% - 180px);   
-    overflow-X: hidden !important;
+<style lang="scss" scoped>
+.fade-on-route-transition {
+    margin-bottom: 100px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    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 cae7d1f4..e46f4c34 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -1,50 +1,48 @@
 <template>
-  <Form
-    @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-    v-slot="{ meta }"
-  >
-    <div class="page-container-grouped-styles">
-      <siteHeader
-        cmsWidgetName="SiteHeaderWidget"
-      />
-      <div class="fade-on-route-transition sub-container overflow-scroll  px-5">
-        <textBlock
-            cmsWidgetName="verifyingCoverageStatement"
-            typeStyle="h5"
-            justifyText="center"
-            class="mt-0 mb-4"
-            id="coverage-statement-text-block"
-        />
-        <div>
-          <p
-            v-html="continueWithSchedulingBodyText"
-            class="mt-0 small" >
-          </p>
+    <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="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <textBlock
+                                    cmsWidgetName="verifyingCoverageStatement"
+                                    typeStyle="h5"
+                                    justifyText="center"
+                                    class="mt-0 mb-4"
+                                    id="coverage-statement-text-block"
+                                    />
+                                    <div>
+                                        <p v-html="continueWithSchedulingBodyText" class="mt-0 small" ></p>
+                                    </div>
+                                    <textBlock
+                                    cmsWidgetName="whatHappensNextCopy"
+                                    class="mt-4 mb-2 fw-bold"
+                                    id="coverage-statement-text-block"
+                                    />
+                                    <div>
+                                        <p class="small" v-html="bodyText" ref="coverageStatementBodyText"></p>
+                                    </div>
+                                    <recalModal cmsWidgetName="RecalModal" />
+                                    <steeringText  cmsWidgetName="MASteeringText" ></steeringText>
+                                    <siteFooter
+                                    cmsWidgetName="SiteFooterWidget"
+                                    :isForwardActionDisabled="!meta.valid"
+                                    @backClicked="navigateBack"
+                                    @forwardClicked="forwardButtonAction"
+                                    ref="siteFooter"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-        <textBlock
-            cmsWidgetName="whatHappensNextCopy"
-            class="mt-4 mb-2 fw-bold"
-            id="coverage-statement-text-block"
-        />
-        <div>
-          <p class="small"
-            v-html="bodyText" 
-            ref="coverageStatementBodyText">
-          </p>
-        </div>
-        <recalModal cmsWidgetName="RecalModal" />
-        <steeringText  cmsWidgetName="MASteeringText" ></steeringText>
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="navigateBack"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 <script>
 
@@ -65,107 +63,116 @@ import { useMainStore } from "@/store";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 
 export default {
-  name: 'coverage-statement',
-  mixins: [baseFormMixin, vehicleQuestionsMixin],
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-    textBlock,
-    recalModal,
-    steeringText
-},
-  computed: {
-    bodyText() {
-      if (useMainStore().order.damage.isRepair) {
-        return this.unverifiedNonADASRepairBodyText;
-      }
-      else {
-        let parts = useMainStore().order.lineItems.glassParts;
+    name: 'coverage-statement',
+    mixins: [baseFormMixin, vehicleQuestionsMixin],
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        Form,
+        textBlock,
+        recalModal,
+        steeringText
+    },
+    computed: {
+        bodyText() {
+            if (useMainStore().order.damage.isRepair) {
+                return this.unverifiedNonADASRepairBodyText;
+            }
+            else {
+                let parts = useMainStore().order.lineItems.glassParts;
 
-        // if ADAS, display ADASNextSteps
-        if (parts.filter(part => part.requiresRecalibration).length > 0) {
-          return this.unverifiedADASNextStepsBodyText;
-        }
-        // if non-ADAS, display NonADASNextSteps
-        else {
-          return this.unverifiedNonADASNextStepsBodyText;
-        }
-      }
+                // if ADAS, display ADASNextSteps
+                if (parts.filter(part => part.requiresRecalibration).length > 0) {
+                    return this.unverifiedADASNextStepsBodyText;
+                }
+                // if non-ADAS, display NonADASNextSteps
+                else {
+                    return this.unverifiedNonADASNextStepsBodyText;
+                }
+            }
+        },
+        continueWithSchedulingBodyText() {
+            return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
+        },
+        unverifiedADASNextStepsBodyText() {
+            return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
+        },
+        unverifiedNonADASNextStepsBodyText() {
+            return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
+        },
+        unverifiedNonADASRepairBodyText() {
+            return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
+        },
+        damageText() {
+            var damageString = getDamageString();
+            return damageString == "match" ? "" : damageString;
+        },
     },
-    continueWithSchedulingBodyText() {
-      return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
-    },
-    unverifiedADASNextStepsBodyText() {
-      return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
-    },
-    unverifiedNonADASNextStepsBodyText() {
-      return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
-    },
-    unverifiedNonADASRepairBodyText() {
-      return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
-    },
-    damageText() {
-    var damageString = getDamageString();
-    return damageString == "match" ? "" : damageString;
-    },
-  },
-  async beforeRouteEnter(to, from, next) {
-    // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: 'cmsContent',
-        promise: cmsContentPromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise,
+            },
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  methods: {
-    arePagePrerequisitesValid() {
-      if (useMainStore().order.vehicle.vin) {
-        return true;
-      }
-        return false;
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
+    methods: {
+        arePagePrerequisitesValid() {
+            if (useMainStore().order.vehicle.vin) {
+                return true;
+            }
+            return false;
+        },
 
-    async forwardButtonAction() {
-      return this.navigateForward();
-    },
+        async forwardButtonAction() {
+            return this.navigateForward();
+        },
 
-    navigateForward() {
-      this.$router.navigate(
-        this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT,
-        this.$route
-      );
+        navigateForward() {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT,
+                this.$route
+            );
+        },
     },
-  },
 };
 </script>
 
-<style lang="scss">
-.overflow-scroll {    
-    height: calc(100% - 168px);   
-    overflow-X: hidden !important;   
+<style lang="scss" scoped>
+.fade-on-route-transition {
+    margin-bottom: 100px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    overflow: auto;
+}
+
+.modal-open {
+    .page-container-grouped-styles {
+        overflow: hidden;
+    }
 }
 ol {
     margin-left: -1rem;
-      li {
-          margin-bottom: .5rem;
-          line-height: 1.5rem;
-          a {
+    li {
+        margin-bottom: .5rem;
+        line-height: 1.5rem;
+        a {
             line-height: 1.5rem;
             padding: 0;
-          }
-      }
+        }
+    }
 }
 #coverage-statement-text-block {
     color: #000000;
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 10e558c1..25cc5da0 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,67 +1,71 @@
 <template>
-  <Form
-      @submit="onSubmit"
-      @invalid-submit="onInvalidSubmit"
-      v-slot="{ meta }">
-    <div class="page-container-grouped-styles">
-      <siteHeader cms-widget-name="SiteHeaderWidget" />
-      <div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5">
-        <vehicleBanner
-            class="mb-3"
-            cms-widget-name="VehicleBannerWidget"
-            :display-generic-vehicle-image="false" />
-        <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
-        <alert
-          ref="alertVinNotFound"
-          v-if="displayVinNotFoundAlert"
-          class="mb-4"
-          cmsWidgetName="AlertVinNotFoundWidget"
-          alertClass="alert-danger"
-          v-bind:isDismissible="false" />
-        <alert
-          ref="alertMatchedDifferentVehicle"
-          v-if="displayMatchedDifferentVehicleAlert"
-          class="mb-4"
-          cmsWidgetName="AlertMatchedDifferentVehicleWidget"
-          :manualHeadline="AlertMatchedDifferentVehicleHeader"
-          :manualCopy="AlertMatchedDifferentVehicleBody"
-          alertClass="alert-warning"
-          v-bind:isDismissible="false" />
-          <alert
-          ref="alertMatchedTwoIdenticalYMMVehicle"
-          v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
-          class="mb-4"
-          cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
-          :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
-          :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
-          alertClass="alert-warning"
-          v-bind:isDismissible="false" />
-        <textboxQuestion
-          cmsWidgetName="LicensePlateNumberQuestionWidget"
-          v-model="licensePlate"
-          isRequired
-          disableAutoFill
-          id="license-plate-question-wrapper"
-          inputId="license-plate-question"
-          validationRules="license-plate-required" />
-        <dropdownQuestion
-          cmsWidgetName="StateQuestionWidget"
-          v-model="licenseState"
-          ref="state"
-          inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-          :options="stateOptions"
-          disableAutoFill
-          validationRules="state-required"
-          class="mt-4" />
-        <siteFooter
-          :isForwardActionDisabled="!meta.valid"
-          cms-widget-name="SiteFooterWidget"
-          @back-clicked="backButtonAction"
-          @forward-clicked="forwardButtonAction"
-          ref="siteFooter" />
-      </div>
-    </div>
-  </Form>
+    <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="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
+                                    <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
+                                    <alert
+                                    ref="alertVinNotFound"
+                                    v-if="displayVinNotFoundAlert"
+                                    class="mb-4"
+                                    cmsWidgetName="AlertVinNotFoundWidget"
+                                    alertClass="alert-danger"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedDifferentVehicle"
+                                    v-if="displayMatchedDifferentVehicleAlert"
+                                    class="mb-4"
+                                    cmsWidgetName="AlertMatchedDifferentVehicleWidget"
+                                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                                    :manualCopy="AlertMatchedDifferentVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedTwoIdenticalYMMVehicle"
+                                    v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+                                    class="mb-4"
+                                    cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+                                    :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
+                                    :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <textboxQuestion
+                                    cmsWidgetName="LicensePlateNumberQuestionWidget"
+                                    v-model="licensePlate"
+                                    isRequired
+                                    disableAutoFill
+                                    id="license-plate-question-wrapper"
+                                    inputId="license-plate-question"
+                                    validationRules="license-plate-required" />
+                                    <dropdownQuestion
+                                    cmsWidgetName="StateQuestionWidget"
+                                    v-model="licenseState"
+                                    ref="state"
+                                    inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                                    :options="stateOptions"
+                                    disableAutoFill
+                                    validationRules="state-required"
+                                    class="mt-4" />
+                                    <siteFooter
+                                    :isForwardActionDisabled="!meta.valid"
+                                    cms-widget-name="SiteFooterWidget"
+                                    @back-clicked="backButtonAction"
+                                    @forward-clicked="forwardButtonAction"
+                                    ref="siteFooter" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -92,55 +96,55 @@ defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIR
 defineRule("state-required", required(errorMessages.STATE_REQUIRED));
 
 export default {
-  name: 'license-plate-lookup',
-  mixins: [baseFormMixin, vinPagesMixin],
-  async beforeRouteEnter(to, from, next) {
-    // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    name: 'license-plate-lookup',
+    mixins: [baseFormMixin, vinPagesMixin],
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: 'cmsContent',
-        promise: cmsContentPromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise,
+            },
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-    // Call the "next" function to complete the transition to this page.
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  data() {
-    return {
-      activeVehicleLookupAlertType: null,
-      vehicleFromLookup: null,
-      licensePlate: null,
-      licenseState: useMainStore().order.customer.address.state,
-      displayVinNotFoundAlert: false,
-      displayMatchedDifferentVehicleAlert: false,
-      displayMatchedTwoIdenticalYMMVehicleAlert: false,
-      previouslyEnteredCarId: "",
-      isCarIdDifferent: false,
-      customAlertData: {},
-      isSelectedGlassAvailableForVehicle: true,
-      forwardButtonCarStyle:"",
-   };
-  },
-  methods: {
-    arePagePrerequisitesValid() {
-      return this.mainStore.order.vehicle.carId !== null;
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-    loadDefaultsFromStore() {
-      this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
+    data() {
+        return {
+            activeVehicleLookupAlertType: null,
+            vehicleFromLookup: null,
+            licensePlate: null,
+            licenseState: useMainStore().order.customer.address.state,
+            displayVinNotFoundAlert: false,
+            displayMatchedDifferentVehicleAlert: false,
+            displayMatchedTwoIdenticalYMMVehicleAlert: false,
+            previouslyEnteredCarId: "",
+            isCarIdDifferent: false,
+            customAlertData: {},
+            isSelectedGlassAvailableForVehicle: true,
+            forwardButtonCarStyle:"",
+        };
     },
-    backButtonAction() {
-      // route to move backwards
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-    },
-    attachCustomEvents() {
+    methods: {
+        arePagePrerequisitesValid() {
+            return this.mainStore.order.vehicle.carId !== null;
+        },
+        loadDefaultsFromStore() {
+            this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        attachCustomEvents() {
             this.prependActionToMethod(this, this.forwardButtonAction, () => {
                 this.pushEventToGA(
                     this.$route.query[this.queryStrings.ISS_PAGE],
@@ -149,179 +153,187 @@ export default {
                     true
                 );
             });
-    },
-    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-    async forwardButtonAction() {
-      this.resetWarningsAndErrors();
-
-      // Lookup VIN
-      const vinLookupResponse = await useMainStore().lookupVinByPlate(
-          this.licensePlate, this.licenseState);
-
-      // Settle promises and get results
-      const promiseResultMap = [
-        {
-          resultKey: "vinLookupResponse",
-          promise: vinLookupResponse,
         },
-      ];
+        // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+        async forwardButtonAction() {
+            this.resetWarningsAndErrors();
 
-      const resultMap = await settleAllPromises(promiseResultMap);
+            // Lookup VIN
+            const vinLookupResponse = await useMainStore().lookupVinByPlate(
+                this.licensePlate, this.licenseState);
 
-      // No VIN found
-      if (resultMap.vinLookupResponse.error) {
-        this.displayVinNotFoundAlert = true;
-        this.$refs.siteFooter.disableForwardButton();
-        return this.$refs.siteFooter.removeLoader();
-      };
+                // Settle promises and get results
+                const promiseResultMap = [
+                    {
+                        resultKey: "vinLookupResponse",
+                        promise: vinLookupResponse,
+                    },
+                ];
 
-      // Vehicle found from VIN lookup
-      const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
+                const resultMap = await settleAllPromises(promiseResultMap);
 
-      // Check if the CarId has changed
-      this.isCarIdDifferent =
-          vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
-      // Handle changing car
-      if (
-          this.isCarIdDifferent &&
-          vehicleFromLookup.carId !== this.previouslyEnteredCarId
-      ) {
-          // Display Alert
-          this.previouslyEnteredCarId = vehicleFromLookup.carId;
-          this.customAlertData.vehicleInfo = vehicleFromLookup;
+                // No VIN found
+                if (resultMap.vinLookupResponse.error) {
+                    this.displayVinNotFoundAlert = true;
+                    this.$refs.siteFooter.disableForwardButton();
+                    return this.$refs.siteFooter.removeLoader();
+                };
 
-          if(this.isTwoIdenticalYMMVehicleFound){
-            this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
-            this.forwardButtonCarStyle= vehicleFromLookup.style;
-          }
-          else{
-            this.displayMatchedDifferentVehicleAlert = true;
-          }
+                // Vehicle found from VIN lookup
+                const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
 
-          this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-            vehicleFromLookup.carId
-          );
+                // Check if the CarId has changed
+                this.isCarIdDifferent =
+                vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
+                // Handle changing car
+                if (
+                    this.isCarIdDifferent &&
+                    vehicleFromLookup.carId !== this.previouslyEnteredCarId
+                ) {
+                    // Display Alert
+                    this.previouslyEnteredCarId = vehicleFromLookup.carId;
+                    this.customAlertData.vehicleInfo = vehicleFromLookup;
 
-          // Update button "Continue with..."
-          this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
-          return this.$refs.siteFooter.removeLoader();
-      }
+                    if(this.isTwoIdenticalYMMVehicleFound){
+                        this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
+                        this.forwardButtonCarStyle= vehicleFromLookup.style;
+                    }
+                    else{
+                        this.displayMatchedDifferentVehicleAlert = true;
+                    }
 
-      // Save vehicle, license plate, and registration information
-      await useMainStore().saveRegistrationLicensePlateLookup(
-          {
-              isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
-              vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }),
-              registrationInfo: {
-                  licensePlate: this.licensePlate,
-                  state: this.licenseState,
-              },
-          },
-          false
-      );
+                    this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+                        vehicleFromLookup.carId
+                    );
 
-      return await this.navigateForward();
-    },
-    async navigateForward() {
-      // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
-      // display vehicle changed alert on that page.
-      if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-          this.$route,
-          {},
-          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
-        );
-      } else {
-        await this.navigateForwardWithSingleCarMatch();
-      }
-    },
-    resetWarningsAndErrors() {
-      this.displayVinNotFoundAlert = false;
-      this.displayMatchedDifferentVehicleAlert = false;
-    },
-  },
-  mounted() {
-      this.attachCustomEvents();
-      this.loadDefaultsFromStore();
-  },
-  computed: {
-      AlertMatchedDifferentVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedDifferentVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-      },
-      AlertMatchedDifferentVehicleBody() {
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+                    // Update button "Continue with..."
+                    this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
+                    return this.$refs.siteFooter.removeLoader();
+                }
 
-            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+                // Save vehicle, license plate, and registration information
+                await useMainStore().saveRegistrationLicensePlateLookup(
+                    {
+                        isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
+                        vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }),
+                        registrationInfo: {
+                            licensePlate: this.licensePlate,
+                            state: this.licenseState,
+                        },
+                    },
+                    false
+                );
+
+                return await this.navigateForward();
+            },
+            async navigateForward() {
+                // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
+                // display vehicle changed alert on that page.
+                if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
+                    this.$router.navigate(
+                        this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                        this.$route,
+                        {},
+                        { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+                    );
+                } else {
+                    await this.navigateForwardWithSingleCarMatch();
+                }
+            },
+            resetWarningsAndErrors() {
+                this.displayVinNotFoundAlert = false;
+                this.displayMatchedDifferentVehicleAlert = false;
+            },
+        },
+        mounted() {
+            this.attachCustomEvents();
+            this.loadDefaultsFromStore();
+        },
+        computed: {
+            AlertMatchedDifferentVehicleHeader() {
+                return this.getCmsContent(
+                    "AlertMatchedDifferentVehicleWidget",
+                    "HeadlineText"
+                ).replaceAll("{custom:damage}", getDamageString());
+            },
+            AlertMatchedDifferentVehicleBody() {
+                const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+                const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
+                return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
                 .replaceAll("{custom:damage}", getDamageString())
                 .replaceAll("{custom:vinYmmFound}", vinYmmFound)
                 .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
-      },
-      AlertMatchedTwoIdenticalYMMVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedTwoIdenticalYMMVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-      },
-      AlertMatchedTwoIdenticalYMMVehicleBody() {
-            const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
-            const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
+            },
+            AlertMatchedTwoIdenticalYMMVehicleHeader() {
+                return this.getCmsContent(
+                    "AlertMatchedTwoIdenticalYMMVehicleWidget",
+                    "HeadlineText"
+                ).replaceAll("{custom:damage}", getDamageString());
+            },
+            AlertMatchedTwoIdenticalYMMVehicleBody() {
+                const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
+                const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
 
-            return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
+                return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
                 .replaceAll("{custom:damage}", getDamageString())
                 .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
                 .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
-      },
-      isTwoIdenticalYMMVehicleFound(){
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+            },
+            isTwoIdenticalYMMVehicleFound(){
+                const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+                const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+                return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+            },
+            stateOptions: {
+                get: function () {
+                    return states;
+                },
+            },
         },
-      stateOptions: {
-        get: function () {
-            return states;
+        watch: {
+            licensePlate() {
+                this.$refs.siteFooter.updateButtonText(
+                    this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+                );
+            },
+            registrationZipCode() {
+                this.$refs.siteFooter.updateButtonText(
+                    this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+                );
+            },
         },
-    },
-  },
-  watch: {
-      licensePlate() {
-          this.$refs.siteFooter.updateButtonText(
-              this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
-          );
-      },
-      registrationZipCode() {
-          this.$refs.siteFooter.updateButtonText(
-              this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
-          );
-      },
-  },
-  components: {
-    Form,
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    vehicleBanner,
-    textboxQuestion,
-    dropdownQuestion,
-    alert
-  },
-};
-</script>
+        components: {
+            Form,
+            siteFooter,
+            siteHeader,
+            siteSubHeader,
+            vehicleBanner,
+            textboxQuestion,
+            dropdownQuestion,
+            alert
+        },
+    };
+    </script>
 
-<style>
+    <style lang="scss" scoped>
+    .fade-on-route-transition {
+        margin-bottom: 100px;
+    }
+    .page-container-grouped-styles {
+        //height: calc(100% - 80px);
+        overflow: auto;
+    }
 
- .overflow-scroll {
-        height: calc(100% - 220px);
-        overflow-x: hidden !important;
- }
-#license-plate-question-wrapper .form-test-error {
-  /**
-  Override extra margin-bottom in the error message in TextboxQuestion
-  */
-  margin-bottom: 0 !important;
-}
-</style>
+    .modal-open {
+        .page-container-grouped-styles {
+            overflow: hidden;
+        }
+    }
+    #license-plate-question-wrapper .form-test-error {
+        /**
+        Override extra margin-bottom in the error message in TextboxQuestion
+        */
+        margin-bottom: 0 !important;
+    }
+    </style>
diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index 43650316..28d82c2e 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-                <div class="container-fluid">
+                <div class="container-fluid pb-2">
                     <div class="row mt-4 px-3">
                         <div class="col">
                             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 947ed4aa..e582d979 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -1,35 +1,44 @@
 <template>
-  <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }">
-    <div class="page-container-grouped-styles overflow-auto">
-      <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="ProviderPreferenceBodyText"
-            class="mt-0 body-text" 
-        ></div>
-        <shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" /> 
+    <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="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="ProviderPreferenceBodyText"
+                                    class="mt-0 body-text"
+                                    ></div>
+                                    <shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" />
 
-        <buttonQuestion
-            cmsWidgetName="ServiceLocationQuestion"
-            :questionText="questionText"
-            :answers="answersFromCms"
-            buttonTypeString="listButton"
-            isRequired
-            v-model="SelectedshopLocation"
-            validationRules="questions-required" />
+                                    <buttonQuestion
+                                    cmsWidgetName="ServiceLocationQuestion"
+                                    :questionText="questionText"
+                                    :answers="answersFromCms"
+                                    buttonTypeString="listButton"
+                                    isRequired
+                                    v-model="SelectedshopLocation"
+                                    validationRules="questions-required" />
 
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="isForwardActionDisabled"
-          @backClicked="backButtonAction"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
-      </div>
-    </div>
-  </Form>
+                                    <siteFooter
+                                    cmsWidgetName="SiteFooterWidget"
+                                    :isForwardActionDisabled="isForwardActionDisabled"
+                                    @backClicked="backButtonAction"
+                                    @forwardClicked="forwardButtonAction"
+                                    ref="siteFooter"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -50,97 +59,106 @@ import shoppreferenceModal from '@/layouts/provider-preference/shoppreference-mo
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
 export default {
-  name: "provider-preference",
-  mixins: [baseFormMixin],
-  
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-    shoppreferenceModal,
-    buttonQuestion
-  },
-  data() {
-    return {
-      SelectedshopLocation : null,
-    };
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-    ];
-    const resultMap = await settleAllPromises(promiseResultMap);
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  computed: {
-    isForwardActionDisabled() {
-      return this.SelectedshopLocation === null;
+    name: "provider-preference",
+    mixins: [baseFormMixin],
+
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        Form,
+        shoppreferenceModal,
+        buttonQuestion
     },
-    ProviderPreferenceHeaderText(){
-      return this.getCmsContent("ProviderPreference", "HeaderText");
+    data() {
+        return {
+            SelectedshopLocation : null,
+        };
     },
-    ProviderPreferenceBodyText(){
-      return this.getCmsContent("ProviderPreference", "BodyText");   
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-    questionText() {
+    computed: {
+        isForwardActionDisabled() {
+            return this.SelectedshopLocation === null;
+        },
+        ProviderPreferenceHeaderText(){
+            return this.getCmsContent("ProviderPreference", "HeaderText");
+        },
+        ProviderPreferenceBodyText(){
+            return this.getCmsContent("ProviderPreference", "BodyText");
+        },
+        questionText() {
             return this.getCmsContent("ServiceLocationQuestion", "QuestionText");
         },
-    answersFromCms() {
+        answersFromCms() {
             return this.getCmsContent("ServiceLocationQuestion", "Answers");
         },
-      },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
     },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            if(this.SelectedshopLocation == "Schedule with Safelite")
+            {
+                this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
+            }
+        },
+        resetDependentState() {},
     },
-    forwardButtonAction() {
-      if(this.SelectedshopLocation == "Schedule with Safelite")
-      {
-        this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
-      }
-    },
-    resetDependentState() {},
-  },
 };
 </script>
-<style lang="scss">
-.overflow-scroller {    
-    height: calc(100% - 220px) !important;   
-    overflow-X: hidden !important;   
+<style lang="scss" scoped>
+.fade-on-route-transition {
+    margin-bottom: 100px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    overflow: auto;
+}
+
+.modal-open {
+    .page-container-grouped-styles {
+        overflow: hidden;
+    }
 }
 #sub-header span{
-color: #000000;
+    color: #000000;
 }
 .body-text p{
-  margin-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
 }
 .body-text li{
-  margin-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
 }
 .modal-link a{
-  color:#06577C;
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: 500;
+    color:#06577C;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 500;
 }
 .question-text {
-  margin-top: 0;
+    margin-top: 0;
     & > span {
         text-align: left;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index a3b5247d..f17a8742 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,25 +1,32 @@
 <template>
-    <div>
-      <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }">
-    <div class="page-container-grouped-styles overflow-auto">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-      <div class="fade-on-route-transition sub-container make-tall px-5">
-        <p>Placeholder for service-location page</p>
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="backButtonAction"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
-      </div>
-    </div>
-  </Form>
-    </div>
-  </template>
-  <script>
-  // Import Supporting Files
+    <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="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"
+                                    @backClicked="backButtonAction"
+                                    @forwardClicked="forwardButtonAction"
+                                    ref="siteFooter"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
+// Import Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 // Import Component
@@ -29,43 +36,59 @@ 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";
 export default {
-  name: "provider-preference",
-  mixins: [baseFormMixin],
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-  },
-  data() {
-    return {};
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-    ];
-    const resultMap = await settleAllPromises(promiseResultMap);
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
+    name: "provider-preference",
+    mixins: [baseFormMixin],
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        Form,
     },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    data() {
+        return {};
+    },
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        async forwardButtonAction() {},
+        resetDependentState() {},
     },
-    async forwardButtonAction() {},
-    resetDependentState() {},
-  },
 };
-  </script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.fade-on-route-transition {
+    margin-bottom: 100px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    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 717f3369..b4ff938e 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-                <div class="container-fluid">
+                <div class="container-fluid pb-2">
                     <div class="row mt-4 px-3">
                         <div class="col">
                             <alert
@@ -478,6 +478,7 @@ export default {
         },
     };
     </script>
+    
 <style lang="scss" scoped>
 .fade-on-route-transition {
     margin-bottom: 100px;
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index 45f603da..4b44ad95 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -1,36 +1,25 @@
 <template>
-  <Form
-    @submit="onSubmit"
-    @invalid-submit="onInvalidSubmit"
-  >
-    <div class="page-container-grouped-styles vehicle-lookup">
-      <SiteHeader
-        cms-widget-name="SiteHeaderWidget"
-      />
-      <div class="fade-on-route-transition sub-container overflow-scroll container gx-0 px-5">
-        <VehicleBanner
-            class="mb-3"
-            cms-widget-name="VehicleBannerWidget"
-            :display-generic-vehicle-image="false"
-        />
-        <SiteSubHeader
-            cms-widget-name="SiteSubHeaderWidget"
-        />
-        <VinLookupMethods
-          v-model="selectedVinLookupMethod"
-          cms-widget-name="VINLookupMethod"
-          group-name="VinLookupMethods"
-          ref="VinLookupMethods"
-        />
-        <SiteFooter
-          cms-widget-name="SiteFooterWidget"
-          :is-forward-action-disabled="isForwardActionDisabled"
-          @back-clicked="backButtonAction"
-          @forward-clicked="forwardButtonAction"
-        />
-      </div>
-    </div>
-  </Form>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit">
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <VehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
+                                    <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" />
+                                    <VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
+                                    <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -49,78 +38,87 @@ import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import VinLookupMethods from './vin-lookup-methods/vin-lookup-methods.vue';
 
 export default {
-  name: 'vehicle-lookup',
-  mixins: [BaseFormMixin],
-  components: {
-    Form,
-    SiteFooter,
-    SiteHeader,
-    SiteSubHeader,
-    VehicleBanner,
-    VinLookupMethods,
-  },
-  data() {
-    return {
-      selectedVinLookupMethod: null,
-    };
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    name: 'vehicle-lookup',
+    mixins: [BaseFormMixin],
+    components: {
+        Form,
+        SiteFooter,
+        SiteHeader,
+        SiteSubHeader,
+        VehicleBanner,
+        VinLookupMethods,
+    },
+    data() {
+        return {
+            selectedVinLookupMethod: null,
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: 'cmsContent',
-        promise: cmsContentPromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise,
+            },
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-      vm.$refs.VinLookupMethods.initializeComponent();
-    });
-  },
-  computed: {
-    isForwardActionDisabled() {
-      return this.selectedVinLookupMethod === null;
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.VinLookupMethods.initializeComponent();
+        });
     },
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
+    computed: {
+        isForwardActionDisabled() {
+            return this.selectedVinLookupMethod === null;
+        },
     },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            switch (this.selectedVinLookupMethod) {
+                case vinLookupMethodSelections.MANUALVIN:
+                useMainStore().updateVehicleVin(null);
+                this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
+                break;
+                case vinLookupMethodSelections.LICENSEPLATE:
+                this.$router.navigate(this.navigationScenarios.SELECTED_LICENSE_PLATE, this.$route);
+                break;
+                case vinLookupMethodSelections.HOMEADDRESS:
+                this.$router.navigate(this.navigationScenarios.SELECTED_HOME_ADDRESS, this.$route);
+                break;
+                default:
+                break;
+            }
+        },
+        resetDependentState() {},
     },
-    forwardButtonAction() {
-      switch (this.selectedVinLookupMethod) {
-        case vinLookupMethodSelections.MANUALVIN:
-          useMainStore().updateVehicleVin(null);
-          this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
-          break;
-        case vinLookupMethodSelections.LICENSEPLATE:
-          this.$router.navigate(this.navigationScenarios.SELECTED_LICENSE_PLATE, this.$route);
-          break;
-        case vinLookupMethodSelections.HOMEADDRESS:
-          this.$router.navigate(this.navigationScenarios.SELECTED_HOME_ADDRESS, this.$route);
-          break;
-        default:
-          break;
-      }
-    },
-    resetDependentState() {},
-  },
 };
 </script>
-<style lang="scss">
 
-.overflow-scroll {
-    height: calc(100% - 180px);   
-    overflow-X: hidden !important;
+<style lang="scss" scoped>
+.fade-on-route-transition {
+    margin-bottom: 100px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    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 519ae1fd..9c816291 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,15 +1,17 @@
 <template>
     <div class="page-container-grouped-styles position-relative">
-        <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <div class="select-car">
-            <div class="container-fluid">
-                <div class="row">
-                    <div class="col">
-                        <div class="select-car-form rounded text-center">
-                            <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
-                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" />
-                            <makeQuestion class="px-4" v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
-                            <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" />
+                                <makeQuestion class="px-4" v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 3c65af26..dc0760f9 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -1,15 +1,17 @@
 <template>
     <div class="page-container-grouped-styles position-relative">
-        <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <div class="select-car">
-            <div class="container-fluid">
-                <div class="row">
-                    <div class="col">
-                        <div class="select-car-form rounded text-center">
-                            <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
-                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
-                            <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" class="px-4" />
-                            <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
+                                <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" class="px-4" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 35baf525..3dd9b6ac 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -1,15 +1,17 @@
 <template>
     <div class="page-container-grouped-styles position-relative">
-        <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <div class="select-car">
-            <div class="container-fluid">
-                <div class="row">
-                    <div class="col">
-                        <div class="select-car-form rounded text-center">
-                            <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
-                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
-                            <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" class="px-4" />
-                            <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
+                                <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" class="px-4" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index d83d8911..b9c22d61 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,15 +1,17 @@
 <template>
     <div class="page-container-grouped-styles position-relative">
-        <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <div class="select-car">
-            <div class="container-fluid">
-                <div class="row">
-                    <div class="col">
-                        <div class="select-car-form rounded text-center">
-                            <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
-                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-                            <yearQuestion class="px-4" v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
-                            <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                                <yearQuestion class="px-4" v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 31fe2ec0..8147ba2f 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,47 +1,27 @@
 <template>
-    <Form
-    @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-    v-slot="{ meta }"
-    >
-    <div class="page-container-grouped-styles ">
-        <siteHeader
-        cmsWidgetName="SiteHeaderWidget"
-        />
-        <div class="px-4  overflow-scroll ">
-            <div class="fade-on-route-transition sub-container px-2">
-                <vehicleBanner
-                class="mb-3"
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false"
-                />
-                <siteSubHeader
-                cmsWidgetName="SiteSubHeaderWidget"
-                />
-                <vinLookupAlerts
-                class="mt-5"
-                :activeAlertType="activeVehicleLookupAlertType"
-                />
-
-          <vinQuestion
-            v-model="vin"
-            :mask="vinMask"
-            :isDisabled="vinPopulatedOnPageLoad"
-          />
-
-                <vinLocationInformation />
-
-                <siteFooter
-                cmsWidgetName="SiteFooterWidget"
-                :isForwardActionDisabled="!meta.valid"
-                @backClicked="backButtonAction"
-                @forwardClicked="forwardButtonAction"
-                ref="siteFooter"
-                />
+    <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="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                                    <vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
+                                    <vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
+                                    <vinLocationInformation />
+                                    <siteFooter cmsWidgetName="SiteFooterWidget" :isForwardActionDisabled="!meta.valid" @backClicked="backButtonAction" @forwardClicked="forwardButtonAction" ref="siteFooter" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
-</Form>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -81,25 +61,25 @@ export default {
     setup() {
         const mainStore = useMainStore();
 
-    return { mainStore };
-  },
-  data() {
-    return {
-      activeVehicleLookupAlertType: null,
-      needToLookupVehicle: true,
-      vehicleFromLookup: null,
-      vin: this.getVinFromStore(),
-      forwardButtonCarStyle:"",
-      vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
-    };
-  },
-  provide() {
-    return {
-      vehicleFromLookup: computed(() => this.vehicleFromLookup),
-    };
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        return { mainStore };
+    },
+    data() {
+        return {
+            activeVehicleLookupAlertType: null,
+            needToLookupVehicle: true,
+            vehicleFromLookup: null,
+            vin: this.getVinFromStore(),
+            forwardButtonCarStyle:"",
+            vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
+        };
+    },
+    provide() {
+        return {
+            vehicleFromLookup: computed(() => this.vehicleFromLookup),
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
         // Settle promises and get results
         const promiseResultMap = [
@@ -111,51 +91,51 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  computed: {
-    isCarIdDifferentFromTheStore() {
-      return (
-        this.vehicleFromLookup !== null
-        && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
-      );
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-    isTwoIdenticalYMMVehicleFound(){
-      const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
-      const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-      return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+    computed: {
+        isCarIdDifferentFromTheStore() {
+            return (
+                this.vehicleFromLookup !== null
+                && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
+            );
+        },
+        isTwoIdenticalYMMVehicleFound(){
+            const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        },
+        vinMask() {
+            if (this.vinPopulatedOnPageLoad) {
+                this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
+                this.needToLookupVehicle = false;
+                const lastSixChars = this.vin.substring(11, this.vin.length);
+                return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
+            } else {
+                return "XXXXXXXXXXXXXXXXX";
+            }
+        },
     },
-    vinMask() {
-      if (this.vinPopulatedOnPageLoad) {
-        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
-        this.needToLookupVehicle = false;
-        const lastSixChars = this.vin.substring(11, this.vin.length);
-          return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
-      } else {
-          return "XXXXXXXXXXXXXXXXX";
-      }
-    },
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
-    },
-    getVinFromStore() {
-      return this.mainStore.vehicle.vin;
-    },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-    },
-    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-    async forwardButtonAction() {
-      this.resetActiveAlert();
-      // Temp solution to reset the 'disabled' style on the Continue button
-      this.$refs.siteFooter.enableForwardAction();
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        getVinFromStore() {
+            return this.mainStore.vehicle.vin;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+        async forwardButtonAction() {
+            this.resetActiveAlert();
+            // Temp solution to reset the 'disabled' style on the Continue button
+            this.$refs.siteFooter.enableForwardAction();
 
             if (this.needToLookupVehicle) {
                 const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
@@ -175,18 +155,18 @@ export default {
                 this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
             }
 
-      if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
-        if(this.isTwoIdenticalYMMVehicleFound){
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
-          this.forwardButtonCarStyle = this.vehicleFromLookup.style;
-        }
-        else{
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
-        }
-        
-        const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
-        this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
-        this.$refs.siteFooter.removeLoader();
+            if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
+                if(this.isTwoIdenticalYMMVehicleFound){
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
+                    this.forwardButtonCarStyle = this.vehicleFromLookup.style;
+                }
+                else{
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
+                }
+
+                const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
+                this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
+                this.$refs.siteFooter.removeLoader();
 
                 this.needToLookupVehicle = false;
 
@@ -213,18 +193,18 @@ export default {
                 return;
             }
 
-      // save vehicle to store if it hasn't already been saved
-      if (!this.vinPopulatedOnPageLoad) {
-        this.mainStore.updateVehicle(this.vehicleFromLookup);
-      }
+            // save vehicle to store if it hasn't already been saved
+            if (!this.vinPopulatedOnPageLoad) {
+                this.mainStore.updateVehicle(this.vehicleFromLookup);
+            }
 
-      const partsOrQuestionsResponse = await this.getPartsOrQuestions();
-      if (partsOrQuestionsResponse.error) {
-        // To Do: Need requirement on what to do here
-        console.error('Error on retrieving PartsOrQuestions');
-        this.$refs.siteFooter.removeLoader();
-        return;
-      }
+            const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+            if (partsOrQuestionsResponse.error) {
+                // To Do: Need requirement on what to do here
+                console.error('Error on retrieving PartsOrQuestions');
+                this.$refs.siteFooter.removeLoader();
+                return;
+            }
 
             // Comes from vehicleQuestionsMixin.navigateForward()
             await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
@@ -274,11 +254,19 @@ export default {
     },
 };
 </script>
-<style>
-.overflow-scroll {
-    height: calc(100% - 180px);
-    overflow-X: hidden !important;
+
+<style lang="scss" scoped>
+.fade-on-route-transition {
+    margin-bottom: 100px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    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 e0633b2f..8d7e7814 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -4,7 +4,7 @@
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
                 <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
-                <div class="container-fluid">
+                <div class="container-fluid pb-2">
                     <div class="row mt-4 px-3">
                         <div class="col">
                             <textboxQuestion