diff --git a/src/iss-components/site-footer/footer-image/footer-image.vue b/src/iss-components/site-footer/footer-image/footer-image.vue
new file mode 100644
index 00000000..8b3ac9e6
--- /dev/null
+++ b/src/iss-components/site-footer/footer-image/footer-image.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="footerImage">
+      <img :src="footerImageURL" />
+    </div>
+</template>
+  <script>
+    export default {
+      name: "footer-image",
+      props: {
+        cmsWidgetName: String,
+    },
+      computed: {
+        footerImageURL() {
+            return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+        },
+      },
+    };
+  </script>
+
+  <style lang="scss" scoped>
+    .footerImage {
+        display: flex;
+        justify-content: center;
+        img {
+            max-width: 375px;
+        }
+    }
+  </style>
diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index e695f422..52ca9273 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -41,14 +41,6 @@
                 </div>
             </div>
         </footer>
-        <div
-            v-if="footerImageURL"
-            id="imgCity"
-            class="footerImage">
-            <img
-                id="siteFooterImage"
-                :src="footerImageURL" />
-        </div>
     </div>
 </template>
 
@@ -61,7 +53,7 @@ export default {
     name: 'site-footer',
     components: {
         textLink,
-        buttonMain
+        buttonMain,
     },
     props: {
         isForwardActionDisabled: Boolean,
@@ -88,7 +80,10 @@ export default {
                 : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
         },
         footerImageURL() {
-            return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+            //return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+            const output = this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+            console.log("original image", output);
+            return output;
         },
         includeFooterImage() {
             const currentPageName = this.getPageNameByQueryString();
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index bd1e0162..e66bb65e 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -3,442 +3,477 @@
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit">
-      <div class="page-container-grouped-styles">
-          <div class="fade-on-route-transition position-relative">
-              <loadingModal
-                ref="loadingModal"
-                :textSlides="loadingText" />
-              <siteHeader
-                ref="siteHeader"
-                cmsWidgetName="SiteHeaderWidget" />
-              <div class="select-car">
-                  <div class="container-fluid pb-2">
-                      <div class="row px-3">
-                          <div class="col">
-                              <div class="pb-1 mt-4">
-                                  <h5
-                                    ref="siteSubHeader"
-                                    class="text-center text-black"
-                                    v-html="coverageStatementSubHeader">
-                                  </h5>
-                                  <div
-                                    ref="explanatoryText"
-                                    class="body-text text-center mt-2"
-                                    v-html="explanatoryText">
-                                  </div>
-                                  <div
-                                    ref="secondaryText"
-                                    class="text-center mt-4 mb-1 fw-bold text-black"
-                                    v-html="secondaryText">
-                                  </div>
-                                  <div
-                                    v-if="verifiedDeductible"
-                                    class="d-flex justify-content-center cost">
-                                    {{ deductibleForDisplay }}
-                                  </div>
-                                  <div
-                                    v-if="isQuoteDisplayed"
-                                    class="d-flex justify-content-center cost mb-0">
-                                    {{ servicePriceForDisplay }}
-                                  </div>
-                                  <div
-                                    v-if="verifiedITAC"
-                                    class="d-flex justify-content-center mb-4 deductible-text">
-                                    {{ deductibleText }}&nbsp;
-                                    <span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
-                                  </div>
-                                  <alert
-                                    v-if="verifiedITAC"
-                                    ref="verifiedITACAlert"
-                                    class="mb-5"
-                                    cmsWidgetName="VerifiedITACAlert"
-                                    :manualHeadline="verifiedItacAlertHeader"
-                                    :manualCopy="verifiedItacAlertBody"
-                                    alertClass="alert-success"
-                                    :isDismissible="false">
-                                  </alert>
-                                  <div
-                                    class="fw-bold text-black mt-5 mb-2"
-                                    v-html="nextStepsHeader">
-                                  </div>
-                                  <div
-                                    class="body-text"
-                                    v-html="nextStepsBody">
-                                  </div>
-                                <buttonQuestion
-                                    v-if="isQuoteDisplayed"
-                                    v-model="selectedProvider"
-                                    cmsWidgetName="ServiceProviderQuestion"
-                                    :questionText="serviceProviderQuestionText"
-                                    :answers="serviceProviderQuestionAnswers"
-                                    groupName="ServiceProviderQuestionOption"
-                                    buttonTypeString="listButton"
-                                    isRequired
-                                    :validationRules="rules.selectionRequired">
-                                </buttonQuestion>
-                                <text-block
-                                    v-if="isQuoteDisplayed"
-                                    cmsWidgetName="DisclaimerWidget"
-                                    typeStyle="caption" />
-                              </div>
-                              <siteFooter
-                                ref="siteFooter"
-                                class="mt-5"
-                                cmsWidgetName="SiteFooterWidget"
-                                :isForwardActionDisabled="!meta.valid"
-                                @backClicked="navigateBackByVehicleQuestions"
-                                @forwardClicked="navigateForward" />
-                          </div>
-                      </div>
-                  </div>
-              </div>
-          </div>
+    @invalidSubmit="onInvalidSubmit"
+  >
+    <div class="container-fluid fade-on-route-transition">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <loadingModal ref="loadingModal" :textSlides="loadingText" />
+          <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
+        </div>
       </div>
-      <recalModal
-        ref="RecalModal"
-        cmsWidgetName="RecalModal" />
-      <contentGroupModal
-        ref="DeductibleModal"
-        cmsWidgetName="DeductibleModal"
-        class="deductible-modal" />
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <h5
+            ref="siteSubHeader"
+            class="text-center text-black"
+            v-html="coverageStatementSubHeader"
+          ></h5>
+          <div
+            ref="explanatoryText"
+            class="body-text text-center mt-2"
+            v-html="explanatoryText"
+          ></div>
+          <div
+            ref="secondaryText"
+            class="text-center mt-4 mb-1 fw-bold text-black"
+            v-html="secondaryText"
+          ></div>
+          <div
+            v-if="verifiedDeductible"
+            class="d-flex justify-content-center cost"
+          >
+            {{ deductibleForDisplay }}
+          </div>
+          <div
+            v-if="isQuoteDisplayed"
+            class="d-flex justify-content-center cost mb-0"
+          >
+            {{ servicePriceForDisplay }}
+          </div>
+          <div
+            v-if="verifiedITAC"
+            class="d-flex justify-content-center mb-4 deductible-text"
+          >
+            {{ deductibleText }}&nbsp;
+            <span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
+          </div>
+          <alert
+            v-if="verifiedITAC"
+            ref="verifiedITACAlert"
+            class="mb-5"
+            cmsWidgetName="VerifiedITACAlert"
+            :manualHeadline="verifiedItacAlertHeader"
+            :manualCopy="verifiedItacAlertBody"
+            alertClass="alert-success"
+            :isDismissible="false"
+          >
+          </alert>
+          <div
+            class="fw-bold text-black mt-5 mb-2"
+            v-html="nextStepsHeader"
+          ></div>
+          <div class="body-text" v-html="nextStepsBody"></div>
+          <buttonQuestion
+            v-if="isQuoteDisplayed"
+            v-model="selectedProvider"
+            cmsWidgetName="ServiceProviderQuestion"
+            :questionText="serviceProviderQuestionText"
+            :answers="serviceProviderQuestionAnswers"
+            groupName="ServiceProviderQuestionOption"
+            buttonTypeString="listButton"
+            isRequired
+            :validationRules="rules.selectionRequired"
+          >
+          </buttonQuestion>
+          <text-block
+            v-if="isQuoteDisplayed"
+            cmsWidgetName="DisclaimerWidget"
+            typeStyle="caption"
+          />
+        </div>
+        <siteFooter
+          ref="siteFooter"
+          class="mt-5"
+          cmsWidgetName="SiteFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          @backClicked="navigateBackByVehicleQuestions"
+          @forwardClicked="navigateForward"
+        />
+      </div>
+    </div>
+    <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
+    <contentGroupModal
+      ref="DeductibleModal"
+      cmsWidgetName="DeductibleModal"
+      class="deductible-modal"
+    />
   </Form>
 </template>
 <script>
-
 // Import Component
-import { Form } from 'vee-validate';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
-import alert from '@/ux-components/alert/alert.vue';
-import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
-import buttonQuestion from '@/digital-components/button-question/button-question.vue';
-import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
-import textBlock from '@/digital-components/text-block/text-block.vue';
+import { Form } from "vee-validate";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal.vue";
+import alert from "@/ux-components/alert/alert.vue";
+import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal.vue";
+import buttonQuestion from "@/digital-components/button-question/button-question.vue";
+import loadingModal from "@/iss-components/loading-modal/loading-modal.vue";
+import textBlock from "@/digital-components/text-block/text-block.vue";
 
 // Import Supporting Files
-import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper.js';
-import settleAllPromises from '@/helpers/layout-helper.js';
-import { getDamageString } from '@/helpers/damage-helper.js';
-import { useMainStore } from '@/store/index.js';
-import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
-import globalRules from '@/constants/global-rules.js';
-import baseFormMixin from '@/mixins/base-form-mixin.js';
-import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
-import issPageValues from '@/router/router-constants/issPage-values';
-import bailoutMessage from '@/constants/bailoutMessage';
-import coverageStatuses from '@/constants/coverage-statuses';
-import widgetFields from '@/constants/cms-widget-fields.js';
-import getPriceOfLineItems from '@/helpers/price-calculator.js';
-import { formatAmountInDollars } from '@/helpers/text-helper.js';
+import {
+  fetchCmsContentForPage,
+  setupModalLinks,
+  processIfStatements,
+} from "@/helpers/cms-content-helper.js";
+import settleAllPromises from "@/helpers/layout-helper.js";
+import { getDamageString } from "@/helpers/damage-helper.js";
+import { useMainStore } from "@/store/index.js";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin.js";
+import globalRules from "@/constants/global-rules.js";
+import baseFormMixin from "@/mixins/base-form-mixin.js";
+import navigationScenarios from "@/router/router-constants/navigation-scenarios.js";
+import issPageValues from "@/router/router-constants/issPage-values";
+import bailoutMessage from "@/constants/bailoutMessage";
+import coverageStatuses from "@/constants/coverage-statuses";
+import widgetFields from "@/constants/cms-widget-fields.js";
+import getPriceOfLineItems from "@/helpers/price-calculator.js";
+import { formatAmountInDollars } from "@/helpers/text-helper.js";
 
-const SAFELITE_PROVIDER = 'Safelite';
+const SAFELITE_PROVIDER = "Safelite";
 
 export default {
-    name: 'coverage-statement',
-    components: {
-        siteFooter,
-        siteHeader,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        recalModal,
-        alert,
-        contentGroupModal,
-        buttonQuestion,
-        loadingModal,
-        textBlock
-    },
-    mixins: [baseFormMixin, vehicleQuestionsMixin],
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
-        const supportingItemsPromise = await useMainStore().getSupportingItems();
+  name: "coverage-statement",
+  components: {
+    siteFooter,
+    siteHeader,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    recalModal,
+    alert,
+    contentGroupModal,
+    buttonQuestion,
+    loadingModal,
+    textBlock,
+  },
+  mixins: [baseFormMixin, vehicleQuestionsMixin],
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
+    const supportingItemsPromise = await useMainStore().getSupportingItems();
 
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            },
-            {
-                resultKey: 'supportingItems',
-                promise: supportingItemsPromise
-            }
-        ];
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "supportingItems",
+        promise: supportingItemsPromise,
+      },
+    ];
 
-        const resultMap = await settleAllPromises(promiseResultMap);
-        const clonedGlassParts = useMainStore().lineItems.glassParts
-            ? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts))
-            : [];
-        const availableLineItems = [
-            ...(resultMap.supportingItems ?? []),
-            ...(clonedGlassParts ?? [])
-        ];
+    const resultMap = await settleAllPromises(promiseResultMap);
+    const clonedGlassParts = useMainStore().lineItems.glassParts
+      ? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts))
+      : [];
+    const availableLineItems = [
+      ...(resultMap.supportingItems ?? []),
+      ...(clonedGlassParts ?? []),
+    ];
 
-        let hasBailedOut = false;
-        let pricingResults = [];
-        if (useMainStore().policy.policyLookupSuccessful && useMainStore().vehicle.policyVehicleId >= 0) {
-            await useMainStore().getFinalDeductible();
-            pricingResults = await useMainStore().getPriceOrderItems(availableLineItems)
-                .catch((err) => {
-                    useMainStore().setBailout(bailoutMessage.pricingResponseError(
-                        availableLineItems.map((li) => li.partNumber),
-                        { code: err.code, message: err.message, data: err.data }
-                    ));
-                    hasBailedOut = true;
-                    next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
-                });
-        }
-
-        if (!hasBailedOut) {
-            // Call the "next" function to complete the transition to this page.
-            next((vm) => {
-                vm.setCmsContent(resultMap.cmsContent);
-                vm.setSupportingItems(resultMap.supportingItems);
-                // eslint-disable-next-line no-param-reassign
-                vm.setBaseServiceLineItems(pricingResults);
-                vm.$refs.loadingModal.showModal();
-                vm.initializeComponent();
-                if (!vm.unverified) {
-                    useMainStore().disableKeyFields();
-                }
-            });
-        }
-    },
-    data() {
-        const { isRepair } = useMainStore().damage;
-        const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
-        return {
-            isRepair,
-            policyLookupSuccessful,
-            isNoComp: noCoverage ?? false,
-            baseServiceLineItems: [],
-            selectedProvider: '',
-            deductibleText: 'Your deductible is',
-            // TODO update when design team gives appropriate text
-            loadingText: [
-                'Connecting to your insurance company',
-                'Nearly there',
-                'Finishing up'
-            ],
-            rules: {
-                selectionRequired: globalRules.OPTION_REQUIRED
-            },
-            supportingItems: null,
-            widget: {
-                subheader: 'SiteSubHeaderWidget',
-                verifiedItacAlert: 'VerifiedITACAlert',
-                explanatoryText: 'ExplanatoryTextWidget',
-                nextStep: 'NextStepsWidget',
-                serviceProviderQuestion: 'ServiceProviderQuestion'
-            }
-        };
-    },
-    computed: {
-        coverageStatementSubHeader() {
-            return this.getTextFromCmsWithCustomIfStatements(
-                this.widget.subheader,
-                widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
-            );
-        },
-        verifiedItacAlertHeader() {
-            return this.getCmsContent(
-                this.widget.verifiedItacAlert,
-                widgetFields.ALERT_WIDGET.HEADLINE_TEXT
-            );
-        },
-        verifiedItacAlertBody() {
-            return this.getCmsContent(
-                this.widget.verifiedItacAlert,
-                widgetFields.ALERT_WIDGET.BODY_TEXT
-            )?.replaceAll('{custom:costSavings}', this.itacCostSavingsForDisplay);
-        },
-        secondaryText() {
-            return this.getTextFromCmsWithCustomIfStatements(
-                this.widget.subheader,
-                widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
-            );
-        },
-        explanatoryText() {
-            return this.getTextFromCmsWithCustomIfStatements(
-                this.widget.explanatoryText,
-                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
-            );
-        },
-        nextStepsHeader() {
-            return this.getTextFromCmsWithCustomIfStatements(
-                this.widget.nextStep,
-                widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
-            );
-        },
-        nextStepsBody() {
-            return this.getTextFromCmsWithCustomIfStatements(
-                this.widget.nextStep,
-                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
-            )?.replaceAll('{custom:damage}', this.damageText);
-        },
-        damageText() {
-            const damageString = getDamageString();
-            return damageString === 'match' ? '' : damageString;
-        },
-        deductibleValue() {
-            return useMainStore().order.currentDeductible;
-        },
-        deductibleForDisplay() {
-            return formatAmountInDollars(this.deductibleValue);
-        },
-        registerClaimSuccessful() {
-            return useMainStore().payment.insuranceCoverage.isVerified;
-        },
-        verifiedNoComp() {
-            return this.policyLookupSuccessful && this.isNoComp;
-        },
-        verifiedITAC() {
-            return this.policyLookupSuccessful
-                && !this.isNoComp
-                && this.deductibleValue > this.totalServicePrice;
-        },
-        coveredAndServicePriceAboveOrEqualDeductible() {
-            return !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue;
-        },
-        verifiedDeductible() {
-            return useMainStore().isClaimRegistrationRequired
-                ? this.registerClaimSuccessful
-                    && this.coveredAndServicePriceAboveOrEqualDeductible
-                    && this.deductibleValue !== null
-                : this.policyLookupSuccessful
-                    && this.coveredAndServicePriceAboveOrEqualDeductible;
-        },
-        unverified() {
-            return !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp;
-        },
-        isADAS() {
-            const parts = useMainStore().order.lineItems.glassParts;
-            return parts !== null && !!parts.find((part) => part.requiresRecalibration);
-        },
-        totalServicePrice() {
-            return getPriceOfLineItems(this.baseServiceLineItems);
-        },
-        servicePriceForDisplay() {
-            return formatAmountInDollars(this.totalServicePrice);
-        },
-        itacCostSavings() {
-            return this.deductibleValue - this.totalServicePrice;
-        },
-        itacCostSavingsForDisplay() {
-            return formatAmountInDollars(this.itacCostSavings);
-        },
-        serviceProviderQuestionText() {
-            return this.getCmsContent(
-                this.widget.serviceProviderQuestion,
-                widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
-            );
-        },
-        serviceProviderQuestionAnswers() {
-            return this.getCmsContent(
-                this.widget.serviceProviderQuestion,
-                widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
-            );
-        },
-        isQuoteDisplayed() {
-            return this.verifiedITAC || this.verifiedNoComp;
-        },
-        shouldRegisterClaim() {
-            return this.policyLookupSuccessful
-                && useMainStore().vehicle.policyVehicleId != null
-                && useMainStore().vehicle.policyVehicleId >= 0
-                && useMainStore().isClaimRegistrationRequired
-                && !useMainStore().isClaimAlreadyRegistered
-                && (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC);
-        }
-    },
-    watch: {
-        selectedProvider() {
-            const buttonText = this.selectedProvider === SAFELITE_PROVIDER ? 'Continue with Safelite' : 'Safelite';
-            this.$refs.siteFooter.updateButtonText(buttonText);
-        },
-        nextStepsBody(newValue, oldValue) {
-            if (newValue !== oldValue) {
-                setupModalLinks(this, 'RecalModal');
-                setupModalLinks(this, 'DeductibleModal');
-            }
-        }
-    },
-    mounted() {
-        setupModalLinks(this);
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            return !!useMainStore().vehicle.carId;
-        },
-        async initializeComponent() {
-            useMainStore().updatePolicyITACFlag(this.verifiedITAC);
-            const coverageStatus = this.verifiedITAC || this.verifiedNoComp
-                ? coverageStatuses.VERIFIED
-                : coverageStatuses.PENDING;
-            useMainStore().updateCoverageStatus(coverageStatus);
-            if (this.shouldRegisterClaim) {
-                await useMainStore().registerClaim()?.catch(() => {});
-            }
-            this.$refs.loadingModal.hideModal();
-        },
-        async navigateForward() {
-            if (this.unverified || this.verifiedDeductible) {
-                useMainStore().updateSupportingItems(this.supportingItems);
-                this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
-            } else if (this.verifiedITAC || this.verifiedNoComp) {
-                useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
-                if (this.selectedProvider === SAFELITE_PROVIDER) {
-                    useMainStore().updateSupportingItems(this.supportingItems);
-                    this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
-                } else {
-                    useMainStore().setBailout(bailoutMessage.RequestCallback());
-                    this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
-                }
-            } else {
-                useMainStore().setBailout(bailoutMessage.coverageStatementInvalidState());
-                this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
-            }
-        },
-        navigateWithScenario(scenario) {
-            this.$router.navigate(scenario, this.$route);
-        },
-        getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
-            const rawText = this.getCmsContent(widgetName, widgetField);
-            return processIfStatements(rawText, 'custom', this.getCustomValueFromString);
-        },
-        getCustomValueFromString(str) {
-            switch (str) {
-                case 'coverageUnverified':
-                    return this.unverified;
-                case 'verifiedDeductible':
-                    return this.verifiedDeductible;
-                case 'verifiedITAC':
-                    return this.verifiedITAC;
-                case 'verifiedNoComp':
-                    return this.verifiedNoComp;
-                case 'ADASReplace':
-                    return !this.isRepair && this.isADAS;
-                case 'nonADASReplace':
-                    return !this.isRepair && !this.isADAS;
-                case 'nonADASRepair':
-                    return this.isRepair;
-                case 'deductibleOverZero':
-                    return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
-                case 'isDeductibleZero':
-                    return this.verifiedDeductible && this.deductibleValue === 0;
-                default:
-                    return null;
-            }
-        },
-        setSupportingItems(newSupportingItems) {
-            this.supportingItems = newSupportingItems;
-        },
-        setBaseServiceLineItems(lineItems) {
-            this.baseServiceLineItems = lineItems;
-        }
+    let hasBailedOut = false;
+    let pricingResults = [];
+    if (
+      useMainStore().policy.policyLookupSuccessful &&
+      useMainStore().vehicle.policyVehicleId >= 0
+    ) {
+      await useMainStore().getFinalDeductible();
+      pricingResults = await useMainStore()
+        .getPriceOrderItems(availableLineItems)
+        .catch((err) => {
+          useMainStore().setBailout(
+            bailoutMessage.pricingResponseError(
+              availableLineItems.map((li) => li.partNumber),
+              { code: err.code, message: err.message, data: err.data }
+            )
+          );
+          hasBailedOut = true;
+          next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
+        });
     }
+
+    if (!hasBailedOut) {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.setCmsContent(resultMap.cmsContent);
+        vm.setSupportingItems(resultMap.supportingItems);
+        // eslint-disable-next-line no-param-reassign
+        vm.setBaseServiceLineItems(pricingResults);
+        vm.$refs.loadingModal.showModal();
+        vm.initializeComponent();
+        if (!vm.unverified) {
+          useMainStore().disableKeyFields();
+        }
+      });
+    }
+  },
+  data() {
+    const { isRepair } = useMainStore().damage;
+    const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
+    return {
+      isRepair,
+      policyLookupSuccessful,
+      isNoComp: noCoverage ?? false,
+      baseServiceLineItems: [],
+      selectedProvider: "",
+      deductibleText: "Your deductible is",
+      // TODO update when design team gives appropriate text
+      loadingText: [
+        "Connecting to your insurance company",
+        "Nearly there",
+        "Finishing up",
+      ],
+      rules: {
+        selectionRequired: globalRules.OPTION_REQUIRED,
+      },
+      supportingItems: null,
+      widget: {
+        subheader: "SiteSubHeaderWidget",
+        verifiedItacAlert: "VerifiedITACAlert",
+        explanatoryText: "ExplanatoryTextWidget",
+        nextStep: "NextStepsWidget",
+        serviceProviderQuestion: "ServiceProviderQuestion",
+      },
+    };
+  },
+  computed: {
+    coverageStatementSubHeader() {
+      return this.getTextFromCmsWithCustomIfStatements(
+        this.widget.subheader,
+        widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
+      );
+    },
+    verifiedItacAlertHeader() {
+      return this.getCmsContent(
+        this.widget.verifiedItacAlert,
+        widgetFields.ALERT_WIDGET.HEADLINE_TEXT
+      );
+    },
+    verifiedItacAlertBody() {
+      return this.getCmsContent(
+        this.widget.verifiedItacAlert,
+        widgetFields.ALERT_WIDGET.BODY_TEXT
+      )?.replaceAll("{custom:costSavings}", this.itacCostSavingsForDisplay);
+    },
+    secondaryText() {
+      return this.getTextFromCmsWithCustomIfStatements(
+        this.widget.subheader,
+        widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
+      );
+    },
+    explanatoryText() {
+      return this.getTextFromCmsWithCustomIfStatements(
+        this.widget.explanatoryText,
+        widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+      );
+    },
+    nextStepsHeader() {
+      return this.getTextFromCmsWithCustomIfStatements(
+        this.widget.nextStep,
+        widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
+      );
+    },
+    nextStepsBody() {
+      return this.getTextFromCmsWithCustomIfStatements(
+        this.widget.nextStep,
+        widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+      )?.replaceAll("{custom:damage}", this.damageText);
+    },
+    damageText() {
+      const damageString = getDamageString();
+      return damageString === "match" ? "" : damageString;
+    },
+    deductibleValue() {
+      return useMainStore().order.currentDeductible;
+    },
+    deductibleForDisplay() {
+      return formatAmountInDollars(this.deductibleValue);
+    },
+    registerClaimSuccessful() {
+      return useMainStore().payment.insuranceCoverage.isVerified;
+    },
+    verifiedNoComp() {
+      return this.policyLookupSuccessful && this.isNoComp;
+    },
+    verifiedITAC() {
+      return (
+        this.policyLookupSuccessful &&
+        !this.isNoComp &&
+        this.deductibleValue > this.totalServicePrice
+      );
+    },
+    coveredAndServicePriceAboveOrEqualDeductible() {
+      return (
+        !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue
+      );
+    },
+    verifiedDeductible() {
+      return useMainStore().isClaimRegistrationRequired
+        ? this.registerClaimSuccessful &&
+            this.coveredAndServicePriceAboveOrEqualDeductible &&
+            this.deductibleValue !== null
+        : this.policyLookupSuccessful &&
+            this.coveredAndServicePriceAboveOrEqualDeductible;
+    },
+    unverified() {
+      return (
+        !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp
+      );
+    },
+    isADAS() {
+      const parts = useMainStore().order.lineItems.glassParts;
+      return (
+        parts !== null && !!parts.find((part) => part.requiresRecalibration)
+      );
+    },
+    totalServicePrice() {
+      return getPriceOfLineItems(this.baseServiceLineItems);
+    },
+    servicePriceForDisplay() {
+      return formatAmountInDollars(this.totalServicePrice);
+    },
+    itacCostSavings() {
+      return this.deductibleValue - this.totalServicePrice;
+    },
+    itacCostSavingsForDisplay() {
+      return formatAmountInDollars(this.itacCostSavings);
+    },
+    serviceProviderQuestionText() {
+      return this.getCmsContent(
+        this.widget.serviceProviderQuestion,
+        widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
+      );
+    },
+    serviceProviderQuestionAnswers() {
+      return this.getCmsContent(
+        this.widget.serviceProviderQuestion,
+        widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
+      );
+    },
+    isQuoteDisplayed() {
+      return this.verifiedITAC || this.verifiedNoComp;
+    },
+    shouldRegisterClaim() {
+      return (
+        this.policyLookupSuccessful &&
+        useMainStore().vehicle.policyVehicleId != null &&
+        useMainStore().vehicle.policyVehicleId >= 0 &&
+        useMainStore().isClaimRegistrationRequired &&
+        !useMainStore().isClaimAlreadyRegistered &&
+        (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)
+      );
+    },
+  },
+  watch: {
+    selectedProvider() {
+      const buttonText =
+        this.selectedProvider === SAFELITE_PROVIDER
+          ? "Continue with Safelite"
+          : "Safelite";
+      this.$refs.siteFooter.updateButtonText(buttonText);
+    },
+    nextStepsBody(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        setupModalLinks(this, "RecalModal");
+        setupModalLinks(this, "DeductibleModal");
+      }
+    },
+  },
+  mounted() {
+    setupModalLinks(this);
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      return !!useMainStore().vehicle.carId;
+    },
+    async initializeComponent() {
+      useMainStore().updatePolicyITACFlag(this.verifiedITAC);
+      const coverageStatus =
+        this.verifiedITAC || this.verifiedNoComp
+          ? coverageStatuses.VERIFIED
+          : coverageStatuses.PENDING;
+      useMainStore().updateCoverageStatus(coverageStatus);
+      if (this.shouldRegisterClaim) {
+        await useMainStore()
+          .registerClaim()
+          ?.catch(() => {});
+      }
+      this.$refs.loadingModal.hideModal();
+    },
+    async navigateForward() {
+      if (this.unverified || this.verifiedDeductible) {
+        useMainStore().updateSupportingItems(this.supportingItems);
+        this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
+      } else if (this.verifiedITAC || this.verifiedNoComp) {
+        useMainStore().updateIsSafeliteProvider(
+          this.selectedProvider === SAFELITE_PROVIDER
+        );
+        if (this.selectedProvider === SAFELITE_PROVIDER) {
+          useMainStore().updateSupportingItems(this.supportingItems);
+          this.navigateWithScenario(
+            navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE
+          );
+        } else {
+          useMainStore().setBailout(bailoutMessage.RequestCallback());
+          this.navigateWithScenario(
+            navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
+          );
+        }
+      } else {
+        useMainStore().setBailout(
+          bailoutMessage.coverageStatementInvalidState()
+        );
+        this.navigateWithScenario(
+          navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE
+        );
+      }
+    },
+    navigateWithScenario(scenario) {
+      this.$router.navigate(scenario, this.$route);
+    },
+    getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
+      const rawText = this.getCmsContent(widgetName, widgetField);
+      return processIfStatements(
+        rawText,
+        "custom",
+        this.getCustomValueFromString
+      );
+    },
+    getCustomValueFromString(str) {
+      switch (str) {
+        case "coverageUnverified":
+          return this.unverified;
+        case "verifiedDeductible":
+          return this.verifiedDeductible;
+        case "verifiedITAC":
+          return this.verifiedITAC;
+        case "verifiedNoComp":
+          return this.verifiedNoComp;
+        case "ADASReplace":
+          return !this.isRepair && this.isADAS;
+        case "nonADASReplace":
+          return !this.isRepair && !this.isADAS;
+        case "nonADASRepair":
+          return this.isRepair;
+        case "deductibleOverZero":
+          return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
+        case "isDeductibleZero":
+          return this.verifiedDeductible && this.deductibleValue === 0;
+        default:
+          return null;
+      }
+    },
+    setSupportingItems(newSupportingItems) {
+      this.supportingItems = newSupportingItems;
+    },
+    setBaseServiceLineItems(lineItems) {
+      this.baseServiceLineItems = lineItems;
+    },
+  },
 };
 </script>
 
@@ -451,26 +486,26 @@ export default {
 }
 
 .deductible-text {
-    line-height: 1.5rem;
+  line-height: 1.5rem;
 }
 
 :deep p {
-    line-height: 1.5rem;
-    font-size: 0.875rem;
-    margin-bottom: 0.5rem;
-    strong {
-        color: $black;
-    }
+  line-height: 1.5rem;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+  strong {
+    color: $black;
+  }
 }
 
 :deep .question-text {
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    & > span {
-        text-align: left;
-    }
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  & > span {
+    text-align: left;
+  }
 }
 
 :deep .deductible-modal {
@@ -490,7 +525,6 @@ export default {
   }
 }
 .modal {
-    overflow: hidden;
+  overflow: hidden;
 }
-
 </style>
diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue
index 4a842ba1..6df58973 100644
--- a/src/layouts/duplicate-check/duplicate-check.vue
+++ b/src/layouts/duplicate-check/duplicate-check.vue
@@ -1,210 +1,235 @@
 <template>
-    <Form
-        ref="duplicate-check-form"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition">
-                <siteHeader
-                    ref="siteHeader"
-                    :cmsWidgetName="widget.siteHeader" />
-                <div class="container-fluid px-6">
-                    <siteSubHeader
-                        id="sub-header"
-                        ref="siteSubHeader"
-                        class="mt-5 duplicate-check-subheader"
-                        :cmsWidgetName="widget.siteSubHeader" />
-                    <buttonQuestion
-                        ref="buttonQuestion"
-                        v-model="selectedAnswer"
-                        class="duplicate-check-question"
-                        :cmsWidgetName="widget.existingOrNewQuestion"
-                        :questionText="questionText"
-                        :answers="answers"
-                        groupName="existingOrNewQuestionOption"
-                        buttonTypeString="listButton"
-                        isRequired
-                        :validationRules="rules.selectionRequired">
-                    </buttonQuestion>
-                    <siteFooter
-                        ref="siteFooter"
-                        class="my-5"
-                        :cmsWidgetName="widget.siteFooter"
-                        :isForwardActionDisabled="!meta.valid"
-                        @forwardClicked="forwardButtonAction"
-                        @backClicked="navigateBack" />
-                </div>
-            </div>
+  <Form
+    ref="duplicate-check-form"
+    v-slot="{ meta }"
+    @submit="onSubmit"
+    @invalidSubmit="onInvalidSubmit"
+  >
+    <div class="container-fluid fade-on-route-transition">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <siteHeader ref="siteHeader" :cmsWidgetName="widget.siteHeader" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <siteSubHeader
+            id="sub-header"
+            ref="siteSubHeader"
+            class="mt-5 duplicate-check-subheader"
+            :cmsWidgetName="widget.siteSubHeader"
+          />
+          <buttonQuestion
+            ref="buttonQuestion"
+            v-model="selectedAnswer"
+            class="duplicate-check-question"
+            :cmsWidgetName="widget.existingOrNewQuestion"
+            :questionText="questionText"
+            :answers="answers"
+            groupName="existingOrNewQuestionOption"
+            buttonTypeString="listButton"
+            isRequired
+            :validationRules="rules.selectionRequired"
+          />
+          <siteFooter
+            ref="siteFooter"
+            class="my-5"
+            :cmsWidgetName="widget.siteFooter"
+            :isForwardActionDisabled="!meta.valid"
+            @forwardClicked="forwardButtonAction"
+            @backClicked="navigateBack"
+          />
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 
 <script>
 // Components
-import { Form } from 'vee-validate';
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+import { Form } from "vee-validate";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import buttonQuestion from "@/digital-components/button-question/button-question.vue";
 
 // Supporting files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import { useMainStore } from '@/store/index.js';
-import globalRules from '@/constants/global-rules.js';
-import { toTitleCase } from '@/helpers/text-helper.js';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper.js";
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import { useMainStore } from "@/store/index.js";
+import globalRules from "@/constants/global-rules.js";
+import { toTitleCase } from "@/helpers/text-helper.js";
 
 export default {
-    name: 'duplicate-check',
-    components: {
-        siteHeader,
-        siteSubHeader,
-        buttonQuestion,
-        siteFooter,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form
-    },
-    mixins: [BaseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        const cmsContent = await fetchCmsContentForPage(to.query.issPage);
+  name: "duplicate-check",
+  components: {
+    siteHeader,
+    siteSubHeader,
+    buttonQuestion,
+    siteFooter,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+  },
+  mixins: [BaseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    const cmsContent = await fetchCmsContentForPage(to.query.issPage);
 
-        next((vm) => {
-            vm.setCmsContent(cmsContent);
-        });
+    next((vm) => {
+      vm.setCmsContent(cmsContent);
+    });
+  },
+  data() {
+    return {
+      selectedAnswer: null,
+      widget: {
+        siteHeader: "SiteHeaderWidget",
+        siteSubHeader: "SiteSubHeaderWidget",
+        existingOrNewQuestion: "ExistingOrNewQuestion",
+        siteFooter: "SiteFooterWidget",
+      },
+      rules: {
+        selectionRequired: globalRules.OPTION_REQUIRED,
+      },
+    };
+  },
+  computed: {
+    questionText() {
+      return this.getCmsContent(
+        this.widget.existingOrNewQuestion,
+        "QuestionText"
+      );
     },
-    data() {
-        return {
-            selectedAnswer: null,
-            widget: {
-                siteHeader: 'SiteHeaderWidget',
-                siteSubHeader: 'SiteSubHeaderWidget',
-                existingOrNewQuestion: 'ExistingOrNewQuestion',
-                siteFooter: 'SiteFooterWidget'
-            },
-            rules: {
-                selectionRequired: globalRules.OPTION_REQUIRED
-            }
-        };
+    answersFromCms() {
+      return (
+        this.getCmsContent(this.widget.existingOrNewQuestion, "Answers") ?? []
+      );
     },
-    computed: {
-        questionText() {
-            return this.getCmsContent(this.widget.existingOrNewQuestion, 'QuestionText');
-        },
-        answersFromCms() {
-            return this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers') ?? [];
-        },
-        getNewOrderSelectionName() {
-            return this.answersFromCms?.[0]?.Name ?? '';
-        },
-        duplicateOrders() {
-            const duplicateOrderText = 'Finish Existing Claim';
-            const orders = useMainStore().applicationUser.duplicateOrders;
-            return orders?.map((o) => {
-                const vehicle = !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
-                    ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
-                    : null;
-
-                const dateOfLoss = o.responseDate == null ? '' : new Date(o.responseDate).toLocaleDateString();
-                const subtext = vehicle && o.responseDate
-                    ? `${vehicle}, ${dateOfLoss}`
-                    : (vehicle ?? '').concat(dateOfLoss);
-
-                return {
-                    Text: duplicateOrderText,
-                    Name: o.referralNumber,
-                    SubText: toTitleCase(subtext),
-                    value: o
-                };
-            }) ?? [];
-        },
-        answers() {
-            return [...this.duplicateOrders, ...this.answersFromCms];
-        }
+    getNewOrderSelectionName() {
+      return this.answersFromCms?.[0]?.Name ?? "";
     },
-    methods: {
-        /**
-         * @summary Steps to perform when forward button clicked.
-         */
-        async forwardButtonAction() {
-            if (this.selectedAnswer !== null && typeof this.selectedAnswer === 'object') {
-                await useMainStore().loadSession(this.selectedAnswer)
-                    .catch(() => {})
-                    .finally(() => {
-                        this.navigateForward();
-                    });
-                return;
-            }
+    duplicateOrders() {
+      const duplicateOrderText = "Finish Existing Claim";
+      const orders = useMainStore().applicationUser.duplicateOrders;
+      return (
+        orders?.map((o) => {
+          const vehicle =
+            !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
+              ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
+              : null;
 
+          const dateOfLoss =
+            o.responseDate == null
+              ? ""
+              : new Date(o.responseDate).toLocaleDateString();
+          const subtext =
+            vehicle && o.responseDate
+              ? `${vehicle}, ${dateOfLoss}`
+              : (vehicle ?? "").concat(dateOfLoss);
+
+          return {
+            Text: duplicateOrderText,
+            Name: o.referralNumber,
+            SubText: toTitleCase(subtext),
+            value: o,
+          };
+        }) ?? []
+      );
+    },
+    answers() {
+      return [...this.duplicateOrders, ...this.answersFromCms];
+    },
+  },
+  methods: {
+    /**
+     * @summary Steps to perform when forward button clicked.
+     */
+    async forwardButtonAction() {
+      if (
+        this.selectedAnswer !== null &&
+        typeof this.selectedAnswer === "object"
+      ) {
+        await useMainStore()
+          .loadSession(this.selectedAnswer)
+          .catch(() => {})
+          .finally(() => {
             this.navigateForward();
-        },
-        navigateForward() {
-            if (!this.mainStore.order.policy.policyLookupSuccessful) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-                    this.$route
-                );
-                return;
-            }
+          });
+        return;
+      }
 
-            const policyVehicles = useMainStore().order.policy.vehicles ?? [];
-            if (!this.mainStore.order.loadedFromDupeCheck) {
-                if (policyVehicles.length !== 0) {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
-                        this.$route
-                    );
-                } else {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
-                        this.$route
-                    );
-                }
-                return;
-            }
+      this.navigateForward();
+    },
+    navigateForward() {
+      if (!this.mainStore.order.policy.policyLookupSuccessful) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+          this.$route
+        );
+        return;
+      }
 
-            if (this.mainStore.order.vehicle.vin) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE,
-                    this.$route
-                );
-            } else if (policyVehicles.length !== 0) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE,
-                    this.$route
-                );
-            } else {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES,
-                    this.$route
-                );
-            }
+      const policyVehicles = useMainStore().order.policy.vehicles ?? [];
+      if (!this.mainStore.order.loadedFromDupeCheck) {
+        if (policyVehicles.length !== 0) {
+          this.$router.navigate(
+            this.navigationScenarios
+              .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+            this.$route
+          );
+        } else {
+          this.$router.navigate(
+            this.navigationScenarios
+              .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+            this.$route
+          );
         }
-    }
+        return;
+      }
+
+      if (this.mainStore.order.vehicle.vin) {
+        this.$router.navigate(
+          this.navigationScenarios
+            .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE,
+          this.$route
+        );
+      } else if (policyVehicles.length !== 0) {
+        this.$router.navigate(
+          this.navigationScenarios
+            .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE,
+          this.$route
+        );
+      } else {
+        this.$router.navigate(
+          this.navigationScenarios
+            .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES,
+          this.$route
+        );
+      }
+    },
+  },
 };
 </script>
 
 <style lang="scss">
 .duplicate-check-subheader {
-    .subheader-secondary {
-        margin-top: map-get($spacers, 2);
-    }
-    p {
-        span {
-            font-size: $h6-font-size;
-        }
+  .subheader-secondary {
+    margin-top: map-get($spacers, 2);
+  }
+  p {
+    span {
+      font-size: $h6-font-size;
     }
+  }
 }
 .duplicate-check-question {
-    .question-text {
-        justify-content: left;
-        display: inline-flex !important;
-        margin-top: map-get($spacers, 4);
-        margin-bottom: map-get($spacers, 2);
-    }
-    .form-test-error{
-        margin-top: 0 !important;
-    }
+  .question-text {
+    justify-content: left;
+    display: inline-flex !important;
+    margin-top: map-get($spacers, 4);
+    margin-bottom: map-get($spacers, 2);
+  }
+  .form-test-error {
+    margin-top: 0 !important;
+  }
 }
-
 </style>
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index ae63de7e..b2024550 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -1,278 +1,298 @@
 <template>
-    <Form
-        ref="theForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader
-                    class="mb-2 header"
-                    cmsWidgetName="SiteHeaderWidget" />
-                <div class="select-car">
-                    <div class="container-fluid pb-2 px-5">
-                        <div class="row">
-                            <div class="col">
-                                <div class="select-car-form rounded text-center">
-                                    <vehicleBanner
-                                        cmsWidgetName="VehicleBannerWidget"
-                                        :displayGenericVehicleImage="displayGeneric"
-                                        class="mt-2 mb-4" />
-                                    <policyVehiclesQuestion
-                                        v-model="selectedVehicleVin"
-                                        class="px-4"
-                                        cmsWidgetName="PolicyVehiclesQuestion"
-                                        :vehicles="VehiclesForQuestions"
-                                        :validationRules="rules.optionRequired" />
-                                    <siteFooter
-                                        ref="siteFooter"
-                                        cmsWidgetName="SiteFooterWidget"
-                                        :isForwardActionDisabled="!meta.valid"
-                                        @ForwardClicked="forwardButtonAction"
-                                        @backClicked="backButtonAction" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <Form
+    ref="theForm"
+    v-slot="{ meta }"
+    @submit="onSubmit"
+    @invalidSubmit="onInvalidSubmit"
+  >
+    <div class="container-fluid fade-on-route-transition">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+            <div class="select-car-form rounded text-center">
+              <vehicleBanner
+                cmsWidgetName="VehicleBannerWidget"
+                :displayGenericVehicleImage="displayGeneric"
+                class="mt-2 mb-4"
+              />
+              <policyVehiclesQuestion
+                v-model="selectedVehicleVin"
+                cmsWidgetName="PolicyVehiclesQuestion"
+                :vehicles="VehiclesForQuestions"
+                :validationRules="rules.optionRequired"
+              />
+              <siteFooter
+                ref="siteFooter"
+                cmsWidgetName="SiteFooterWidget"
+                :isForwardActionDisabled="!meta.valid"
+                @ForwardClicked="forwardButtonAction"
+                @backClicked="backButtonAction"
+              />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 <script>
 // Components
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import policyVehiclesQuestion from '@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue';
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
+import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue";
 // Supporting files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
-import { Form } from 'vee-validate';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import vehicleSelectionOptions from '@/constants/vehicle-selection-options.js';
-import endorsementOptions from '@/constants/endorsement-options.js';
-import globalRules from '@/constants/global-rules.js';
-import { useMainStore } from '@/store/index.js';
-import bailoutMessage from '@/constants/bailoutMessage';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper.js";
+import { Form } from "vee-validate";
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import vehicleSelectionOptions from "@/constants/vehicle-selection-options.js";
+import endorsementOptions from "@/constants/endorsement-options.js";
+import globalRules from "@/constants/global-rules.js";
+import { useMainStore } from "@/store/index.js";
+import bailoutMessage from "@/constants/bailoutMessage";
 import {
-    deductibleForSelectedVehicle, endorsementsForSelectedVehicle,
-    noCoverageForSelectedVehicle,
-    repairWaivedForSelectedVehicle
-} from '@/helpers/policy-vehicle-helper';
+  deductibleForSelectedVehicle,
+  endorsementsForSelectedVehicle,
+  noCoverageForSelectedVehicle,
+  repairWaivedForSelectedVehicle,
+} from "@/helpers/policy-vehicle-helper";
 
 export default {
-    name: 'policy-vehicles',
-    components: {
-        siteHeader,
-        siteFooter,
-        vehicleBanner,
-        policyVehiclesQuestion,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+  name: "policy-vehicles",
+  components: {
+    siteHeader,
+    siteFooter,
+    vehicleBanner,
+    policyVehiclesQuestion,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+  },
+  mixins: [BaseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
+    next((vm) => {
+      vm.setCmsContent(cmsContentPromise);
+    });
+  },
+  setup() {
+    const mainStore = useMainStore();
+    return { mainStore };
+  },
+  data() {
+    const policyVehicles = useMainStore().order.policy.vehicles;
+    return {
+      policyVehicles,
+      selectedVehicleVin: "",
+      selectedPolicyVehicle: null,
+      displayGeneric: true,
+      policyVinFound: true,
+      rules: {
+        optionRequired: globalRules.OPTION_REQUIRED,
+      },
+    };
+  },
+  computed: {
+    VehiclesForQuestions() {
+      // Map API result data, to address-vehicles data structure
+      const vehicles = this.policyVehicles;
+      const mappedData =
+        vehicles?.map((v) => {
+          const maskSymbol = "X";
+          const vinStart = maskSymbol.repeat(v.vin.length - 6);
+          const vinEnd = v.vin.substring(v.vin.length - 6);
+          return {
+            vin: v.vin,
+            vehicle: v,
+            Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
+            Name: v.vin,
+            SubText: `VIN ${vinStart}${vinEnd}`,
+          };
+        }) ?? [];
+      return mappedData;
     },
-    mixins: [BaseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
-        next((vm) => {
-            vm.setCmsContent(cmsContentPromise);
+    noCoverageForSelectedVehicle() {
+      return noCoverageForSelectedVehicle(this.selectedPolicyVehicle);
+    },
+    deductibleForSelectedVehicle() {
+      return deductibleForSelectedVehicle(this.selectedPolicyVehicle);
+    },
+    endorsementsForSelectedVehicle() {
+      return endorsementsForSelectedVehicle(this.selectedPolicyVehicle);
+    },
+    repairWaivedForSelectedVehicle() {
+      return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
+    },
+    selectedVehicle() {
+      const vehicle = this.mainStore.lookupVehicleByVin(
+        this.selectedVehicleVin
+      );
+      return vehicle;
+    },
+  },
+  watch: {
+    async selectedVehicleVin(value) {
+      if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
+        // clear previously selected vehicle and image
+        this.mainStore.resetVehicleState();
+        this.displayGeneric = true;
+        this.selectedPolicyVehicle = null;
+      } else {
+        // get vehicle details from selected VIN
+        const vehicle = await this.lookupVehicleByVin(value);
+
+        // handle error in case vehicle info doesn't come back for selected VIN
+        if (vehicle?.error === true) {
+          this.mainStore.resetVehicleState();
+          this.displayGeneric = true;
+          this.selectedPolicyVehicle = null;
+          return;
+        }
+        if (vehicle) {
+          // save selected vehicle to the store
+          this.mainStore.updateVehicle(vehicle.data);
+          this.displayGeneric = false;
+          this.selectedPolicyVehicle = this.policyVehicles.find(
+            (p) => p.vin === value
+          );
+        }
+      }
+    },
+  },
+  beforeMount() {
+    if (this.mainStore.order.vehicle.vin) {
+      this.selectedVehicleVin = this.mainStore.order.vehicle.vin;
+    } else if (this.policyVehicles?.length === 1) {
+      this.selectedVehicleVin = this.policyVehicles[0]?.vin;
+    }
+  },
+  methods: {
+    backButtonAction() {
+      useMainStore().issConfig.disabledFields.policyNumber = true;
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    async forwardButtonAction() {
+      if (
+        this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED
+      ) {
+        const vehicleLookupResponse = await this.lookupVehicleByVin(
+          this.selectedVehicleVin
+        );
+        const vehicle = this.policyVehicles.find(
+          (pv) => pv.vin === this.selectedVehicleVin
+        );
+
+        if (vehicleLookupResponse.error) {
+          if (vehicleLookupResponse.status === 404) {
+            this.mainStore.resetVehicleState();
+            useMainStore().updateVehicle({
+              policyVehicleId: vehicle.id,
+              carId: "0",
+              category: "",
+              year: vehicle.vehicleYear || "",
+              make: vehicle.vehicleMake || "",
+              model: vehicle.vehicleModel || "",
+              style: vehicle.vehicleStyle || "",
+              vin: vehicle.vin,
+              noCoverage: this.noCoverageForSelectedVehicle,
+              deductible: this.deductibleForSelectedVehicle,
+              repairWaived: this.repairWaivedForSelectedVehicle,
+            });
+            this.policyVinFound = false;
+            return this.navigateForward();
+          }
+
+          this.mainStore.setBailout(
+            bailoutMessage.vehicleLookupError(
+              vehicle.vin,
+              vehicleLookupResponse.data
+            )
+          );
+          return this.navigateForward();
+        }
+
+        this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
+          policyVehicleId: vehicle.id,
+          vin: this.selectedVehicleVin,
+          noCoverage: this.noCoverageForSelectedVehicle,
+          deductible: this.deductibleForSelectedVehicle,
+          repairWaived: this.repairWaivedForSelectedVehicle,
+          endorsements: this.endorsementsForSelectedVehicle,
         });
+
+        useMainStore().updateVehicle(this.vehicleFromLookup);
+      }
+      return this.navigateForward();
     },
-    setup() {
-        const mainStore = useMainStore();
-        return { mainStore };
+    navigateForward() {
+      if (this.mainStore.isBailout) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+          this.$route,
+          {},
+          {}
+        );
+      } else if (
+        this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED
+      ) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
+          this.$route,
+          {},
+          {}
+        );
+      } else if (
+        this.endorsementsForSelectedVehicle?.length > 0 &&
+        (this.endorsementsForSelectedVehicle?.includes(
+          endorsementOptions.PARKING_GUARD
+        ) ||
+          this.endorsementsForSelectedVehicle?.includes(
+            endorsementOptions.EDUCATOR
+          ))
+      ) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
+          this.$route
+        );
+      } else if (!this.policyVinFound) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
+          this.$route,
+          {},
+          {}
+        );
+      } else {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
+          this.$route,
+          {},
+          {}
+        );
+      }
     },
-    data() {
-        const policyVehicles = useMainStore().order.policy.vehicles;
+    async lookupVehicleByVin(vin) {
+      try {
+        return await useMainStore().lookupVehicleByVin(vin);
+      } catch (responseError) {
         return {
-            policyVehicles,
-            selectedVehicleVin: '',
-            selectedPolicyVehicle: null,
-            displayGeneric: true,
-            policyVinFound: true,
-            rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            }
+          error: true,
+          status: responseError.status,
+          data: responseError.data,
         };
+      }
     },
-    computed: {
-        VehiclesForQuestions() {
-            // Map API result data, to address-vehicles data structure
-            const vehicles = this.policyVehicles;
-            const mappedData = vehicles?.map((v) => {
-                const maskSymbol = 'X';
-                const vinStart = maskSymbol.repeat(v.vin.length - 6);
-                const vinEnd = v.vin.substring(v.vin.length - 6);
-                return {
-                    vin: v.vin,
-                    vehicle: v,
-                    Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
-                    Name: v.vin,
-                    SubText: `VIN ${vinStart}${vinEnd}`
-                };
-            }) ?? [];
-            return mappedData;
-        },
-        noCoverageForSelectedVehicle() {
-            return noCoverageForSelectedVehicle(this.selectedPolicyVehicle);
-        },
-        deductibleForSelectedVehicle() {
-            return deductibleForSelectedVehicle(this.selectedPolicyVehicle);
-        },
-        endorsementsForSelectedVehicle() {
-            return endorsementsForSelectedVehicle(this.selectedPolicyVehicle);
-        },
-        repairWaivedForSelectedVehicle() {
-            return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
-        },
-        selectedVehicle() {
-            const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
-            return vehicle;
-        }
-    },
-    watch: {
-        async selectedVehicleVin(value) {
-            if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
-                // clear previously selected vehicle and image
-                this.mainStore.resetVehicleState();
-                this.displayGeneric = true;
-                this.selectedPolicyVehicle = null;
-            } else {
-                // get vehicle details from selected VIN
-                const vehicle = await this.lookupVehicleByVin(value);
-
-                // handle error in case vehicle info doesn't come back for selected VIN
-                if (vehicle?.error === true) {
-                    this.mainStore.resetVehicleState();
-                    this.displayGeneric = true;
-                    this.selectedPolicyVehicle = null;
-                    return;
-                }
-                if (vehicle) {
-                    // save selected vehicle to the store
-                    this.mainStore.updateVehicle(vehicle.data);
-                    this.displayGeneric = false;
-                    this.selectedPolicyVehicle = this.policyVehicles.find((p) => p.vin === value);
-                }
-            }
-        }
-    },
-    beforeMount() {
-        if (this.mainStore.order.vehicle.vin) {
-            this.selectedVehicleVin = this.mainStore.order.vehicle.vin;
-        } else if (this.policyVehicles?.length === 1) {
-            this.selectedVehicleVin = this.policyVehicles[0]?.vin;
-        }
-    },
-    methods:
-        {
-            backButtonAction() {
-                useMainStore().issConfig.disabledFields.policyNumber = true;
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
-            async forwardButtonAction() {
-                if (this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
-                    const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin);
-                    const vehicle = this.policyVehicles.find((pv) => pv.vin === this.selectedVehicleVin);
-
-                    if (vehicleLookupResponse.error) {
-                        if (vehicleLookupResponse.status === 404) {
-                            this.mainStore.resetVehicleState();
-                            useMainStore().updateVehicle({
-                                policyVehicleId: vehicle.id,
-                                carId: '0',
-                                category: '',
-                                year: vehicle.vehicleYear || '',
-                                make: vehicle.vehicleMake || '',
-                                model: vehicle.vehicleModel || '',
-                                style: vehicle.vehicleStyle || '',
-                                vin: vehicle.vin,
-                                noCoverage: this.noCoverageForSelectedVehicle,
-                                deductible: this.deductibleForSelectedVehicle,
-                                repairWaived: this.repairWaivedForSelectedVehicle
-
-                            });
-                            this.policyVinFound = false;
-                            return this.navigateForward();
-                        }
-
-                        this.mainStore.setBailout(bailoutMessage.vehicleLookupError(vehicle.vin, vehicleLookupResponse.data));
-                        return this.navigateForward();
-                    }
-
-                    this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
-                        policyVehicleId: vehicle.id,
-                        vin: this.selectedVehicleVin,
-                        noCoverage: this.noCoverageForSelectedVehicle,
-                        deductible: this.deductibleForSelectedVehicle,
-                        repairWaived: this.repairWaivedForSelectedVehicle,
-                        endorsements: this.endorsementsForSelectedVehicle
-                    });
-
-                    useMainStore().updateVehicle(this.vehicleFromLookup);
-                }
-                return this.navigateForward();
-            },
-            navigateForward() {
-                if (this.mainStore.isBailout) {
-                    this.$router
-                        .navigate(
-                            this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
-                            this.$route,
-                            {},
-                            {}
-                        );
-                } else if (this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
-                    this.$router
-                        .navigate(
-                            this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
-                            this.$route,
-                            {},
-                            {}
-                        );
-                } else if (this.endorsementsForSelectedVehicle?.length > 0
-                    && (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD)
-                    || this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))) {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
-                        this.$route
-                    );
-                } else if (!this.policyVinFound) {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
-                        this.$route,
-                        {},
-                        {}
-                    );
-                } else {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
-                        this.$route,
-                        {},
-                        {}
-                    );
-                }
-            },
-            async lookupVehicleByVin(vin) {
-                try {
-                    return await useMainStore().lookupVehicleByVin(vin);
-                } catch (responseError) {
-                    return {
-                        error: true,
-                        status: responseError.status,
-                        data: responseError.data
-                    };
-                }
-            }
-        }
+  },
 };
 </script>
 <style lang="scss" scoped>
-.header{
-    margin-bottom: 0rem !important;
+.header {
+  margin-bottom: 0rem !important;
 }
-:deep(.form-test-error){
-    text-align: left;
-    margin-top: 0rem !important;
-    line-height: 1.50rem;
+:deep(.form-test-error) {
+  text-align: left;
+  margin-top: 0rem !important;
+  line-height: 1.5rem;
 }
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 2771b30e..e5bdd97a 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,443 +1,540 @@
 <template>
-    <Form
-        ref="theForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid pb-2">
-                    <div class="row mt-2 px-3">
-                        <div class="col">
-                            <alert
-                                v-if="shouldDisplayVehicleChangeAlert"
-                                ref="vehicleChangeAlert"
-                                class="mt-5 mb-0"
-                                cmsWidgetName="VehicleChangeAlert"
-                                alertClass="alert-warning"
-                                :isDismissible="false" />
-                            <vehicleBanner
-                                class="mb-4"
-                                cmsWidgetName="VehicleBannerWidget"
-                                :displayGenericVehicleImage="false" />
-                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-                            <damageLocationQuestion
-                                ref="damageLocation"
-                                v-model="selectedDamageLocations"
-                                cmsWidgetName="DamageLocationQuestion"
-                                groupName="DamageLocationQuestion" />
-                            <windshieldOptions
-                                ref="windshieldOptions"
-                                v-model="selectedWindshieldOptions"
-                                :hasRepairReplaceConflict="hasRepairReplaceConflict"
-                                :hasSplitSingleConflict="hasSplitSingleConflict"
-                                :selectedDamageLocations="selectedDamageLocations"
-                                class="mb-3" />
-                            <alert
-                                v-if="hasRepairReplaceConflict"
-                                class="my-5"
-                                cmsWidgetName="HasReplacementConflict"
-                                alertClass="alert-danger"
-                                :isDismissible="false" />
-                            <sideDoorOptions
-                                v-show="!hasRepairReplaceConflict"
-                                ref="sideDoorOptions"
-                                v-model="sideDoorOptionsData"
-                                cmsWidgetName="SideDoorSideQuestion"
-                                groupName="SideDoorSideQuestion"
-                                :selectedDamageLocations="selectedDamageLocations"
-                                class="mb-1" />
-                            <replaceOptionsQuestion
-                                ref="backGlassOptions"
-                                v-model="selectedRearReplaceOptions"
-                                cmsWidgetName="RearReplaceOptionsQuestion"
-                                :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-                                groupName="BackGlassReplaceOptionsQuestion"
-                                validationRules="replace-options-required" />
-                            <site-footer
-                                ref="siteFooter"
-                                class="mt-5"
-                                cmsWidgetName="SiteFooterWidget"
-                                :isForwardActionDisabled="!meta.valid"
-                                @backClicked="navigateBack"
-                                @forwardClicked="forwardButtonAction" />
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <Form
+    ref="theForm"
+    v-slot="{ meta }"
+    @submit="onSubmit"
+    @invalidSubmit="onInvalidSubmit"
+  >
+    <div class="container-fluid fade-on-route-transition">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <siteHeader cmsWidgetName="SiteHeaderWidget" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+                <alert
+                  v-if="shouldDisplayVehicleChangeAlert"
+                  ref="vehicleChangeAlert"
+                  class="mt-5 mb-0"
+                  cmsWidgetName="VehicleChangeAlert"
+                  alertClass="alert-warning"
+                  :isDismissible="false"
+                />
+                <vehicleBanner
+                  class="mb-4"
+                  cmsWidgetName="VehicleBannerWidget"
+                  :displayGenericVehicleImage="false"
+                />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                <damageLocationQuestion
+                  ref="damageLocation"
+                  v-model="selectedDamageLocations"
+                  cmsWidgetName="DamageLocationQuestion"
+                  groupName="DamageLocationQuestion"
+                />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                <windshieldOptions
+                  ref="windshieldOptions"
+                  v-model="selectedWindshieldOptions"
+                  :hasRepairReplaceConflict="hasRepairReplaceConflict"
+                  :hasSplitSingleConflict="hasSplitSingleConflict"
+                  :selectedDamageLocations="selectedDamageLocations"
+                  class="mb-3"
+                />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                <alert
+                  v-if="hasRepairReplaceConflict"
+                  class="my-5"
+                  cmsWidgetName="HasReplacementConflict"
+                  alertClass="alert-danger"
+                  :isDismissible="false"
+                />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                <sideDoorOptions
+                  v-show="!hasRepairReplaceConflict"
+                  ref="sideDoorOptions"
+                  v-model="sideDoorOptionsData"
+                  cmsWidgetName="SideDoorSideQuestion"
+                  groupName="SideDoorSideQuestion"
+                  :selectedDamageLocations="selectedDamageLocations"
+                  class="mb-1"
+                />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                <replaceOptionsQuestion
+                  ref="backGlassOptions"
+                  v-model="selectedRearReplaceOptions"
+                  cmsWidgetName="RearReplaceOptionsQuestion"
+                  :isAvailable="
+                    isRearWindowDamageLocation && !hasRepairReplaceConflict
+                  "
+                  groupName="BackGlassReplaceOptionsQuestion"
+                  validationRules="replace-options-required"
+                />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                <site-footer
+                  ref="siteFooter"
+                  class="mt-5"
+                  cmsWidgetName="SiteFooterWidget"
+                  :isForwardActionDisabled="!meta.valid"
+                  @backClicked="navigateBack"
+                  @forwardClicked="forwardButtonAction"
+                />
+              </div>
+            </div>
+          </div>
+  </Form>
 </template>
 
 <script>
 // Components
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import sideDoorOptions from '@/layouts/vehicle-damage/side-door-options/side-door-options.vue';
-import damageLocationQuestion from '@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue';
-import windshieldOptions from '@/layouts/vehicle-damage/windshield-options/windshield-options.vue';
-import replaceOptionsQuestion from '@/layouts/vehicle-damage/replace-options-question/replace-options-question.vue';
-import alert from '@/ux-components/alert/alert.vue';
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options.vue";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options.vue";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question.vue";
+import alert from "@/ux-components/alert/alert.vue";
 
 // Supporting files
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import { Form, defineRule } from 'vee-validate';
-import { required } from '@/helpers/validation-rules';
-import errorMessages from '@/constants/error-messages';
-import damageLocationsCms from '@/constants/damage-locations-cms.js';
-import damageLocationsSelected from '@/constants/damage-locations-selected.js';
-import { useMainStore } from '@/store';
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import errorMessages from "@/constants/error-messages";
+import damageLocationsCms from "@/constants/damage-locations-cms.js";
+import damageLocationsSelected from "@/constants/damage-locations-selected.js";
+import { useMainStore } from "@/store";
 
 // DEFINE VALIDATION RULES
-defineRule('replace-options-required', required(errorMessages.REPLACE_OPTIONS_REQUIRED));
+defineRule(
+  "replace-options-required",
+  required(errorMessages.REPLACE_OPTIONS_REQUIRED)
+);
 
 export default {
-    name: 'vehicle-damage',
+  name: "vehicle-damage",
 
-    components: {
-        siteHeader,
-        siteFooter,
-        vehicleBanner,
-        siteSubHeader,
-        sideDoorOptions,
-        damageLocationQuestion,
-        windshieldOptions,
-        replaceOptionsQuestion,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        alert
+  components: {
+    siteHeader,
+    siteFooter,
+    vehicleBanner,
+    siteSubHeader,
+    sideDoorOptions,
+    damageLocationQuestion,
+    windshieldOptions,
+    replaceOptionsQuestion,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    alert,
+  },
+  mixins: [BaseFormMixin, vehicleQuestionsMixin],
+  async beforeRouteEnter(to, from, next) {
+    const store = useMainStore();
+
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    const damageOptionsPromise = store.getDamageOptions(
+      store.order.vehicle.carId
+    );
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "damageOptions",
+        promise: damageOptionsPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+      vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
+      vm.$refs.sideDoorOptions.initializeComponent(
+        resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
+        resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+      );
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
+      vm.$refs.backGlassOptions.initializeComponent(
+        resultMap.damageOptions.backGlassOptions.availableReplacementOptions
+      );
+    });
+  },
+  setup() {
+    const mainStore = useMainStore();
+
+    return { mainStore };
+  },
+  data() {
+    return {
+      selectedDamageLocations: this.getDamageLocationsFromStore(),
+      sideDoorOptionsData: {
+        selectedDoorSides: this.getDoorSidesFromStore(),
+        selectedDriverSideReplaceOptions:
+          this.getDriverSideReplaceOptionsFromStore(),
+        selectedPassengerSideReplaceOptions:
+          this.getPassengerSideReplaceOptionsFromStore(),
+      },
+      selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
+      selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
+    };
+  },
+  computed: {
+    isWindshieldDamageLocation() {
+      return this.selectedDamageLocations.some(
+        (selectedDamages) =>
+          selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD
+      );
     },
-    mixins: [BaseFormMixin, vehicleQuestionsMixin],
-    async beforeRouteEnter(to, from, next) {
-        const store = useMainStore();
+    isSideDoorDamageLocation() {
+      return this.selectedDamageLocations.some(
+        (selectedDamages) =>
+          selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR
+      );
+    },
+    isRearWindowDamageLocation() {
+      return this.selectedDamageLocations.some(
+        (selectedDamages) =>
+          selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW
+      );
+    },
+    isWindshieldRepair() {
+      return (
+        this.isWindshieldDamageLocation &&
+        this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+          damageLocationsSelected.REPAIR
+      );
+    },
+    isDriverSideReplace() {
+      if (!this.isSideDoorDamageLocation) return false;
 
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId);
+      return this.sideDoorOptionsData.selectedDoorSides.some(
+        (selectedDriverSide) =>
+          selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE
+      );
+    },
+    isPassengerSideReplace() {
+      if (!this.isSideDoorDamageLocation) return false;
 
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            },
-            {
-                resultKey: 'damageOptions',
-                promise: damageOptionsPromise
-            }
-        ];
+      return this.sideDoorOptionsData.selectedDoorSides.some(
+        (selectedPassengerSide) =>
+          selectedPassengerSide.toUpperCase() ===
+          damageLocationsCms.PASSENGERSIDE
+      );
+    },
+    hasRepairReplaceConflict() {
+      return (
+        this.isWindshieldDamageLocation &&
+        this.selectedDamageLocations.length > 1 &&
+        this.isWindshieldRepair
+      );
+    },
+    hasSplitSingleConflict() {
+      if (
+        !this.selectedDamageLocations?.includes("Windshield") ||
+        this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+          damageLocationsSelected.REPAIR ||
+        !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
+      )
+        return false;
 
-        const resultMap = await settleAllPromises(promiseResultMap);
+      return (
+        this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+          (selectedSingleWindshield) =>
+            selectedSingleWindshield.toUpperCase() ===
+            damageLocationsSelected.SINGLE.toUpperCase()
+        ) &&
+        (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+          (selectedDriverWindshield) =>
+            selectedDriverWindshield.toUpperCase() ===
+            damageLocationsSelected.DRIVER.toUpperCase()
+        ) ||
+          this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+            (selectedPassengerWindshield) =>
+              selectedPassengerWindshield.toUpperCase() ===
+              damageLocationsSelected.PASSENGER.toUpperCase()
+          ))
+      );
+    },
+    shouldDisplayVehicleChangeAlert() {
+      return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
+    },
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      if (useMainStore().order.vehicle.carId) {
+        return true;
+      }
+      return false;
+    },
+    getDamageLocationsFromStore() {
+      const glassSelections = [];
 
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
-            vm.$refs.sideDoorOptions.initializeComponent(
-                resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
-                resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
-            );
-            vm.$refs.windshieldOptions.initializeComponent(resultMap.damageOptions.windshieldOptions.availableReplacementOptions);
-            vm.$refs.backGlassOptions.initializeComponent(resultMap.damageOptions.backGlassOptions.availableReplacementOptions);
+      if (
+        this.mainStore.order.damage.glassToReplace?.some(
+          (glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD
+        ) ||
+        this.mainStore.order.damage.isRepair
+      ) {
+        glassSelections.push(damageLocationsSelected.WINDSHIELD);
+      }
+      if (
+        this.mainStore.order.damage.glassToReplace?.some(
+          (glass) =>
+            glass.glassLocation === damageLocationsSelected.DRIVER ||
+            glass.glassLocation === damageLocationsSelected.PASSENGER
+        )
+      ) {
+        glassSelections.push(damageLocationsSelected.SIDEDOOR);
+      }
+
+      if (
+        this.mainStore.order.damage.glassToReplace?.some(
+          (glass) => glass.glassLocation === damageLocationsSelected.REAR
+        )
+      ) {
+        glassSelections.push(damageLocationsSelected.REARWINDOW);
+      }
+
+      return glassSelections;
+    },
+    getWindshieldOptionsFromStore() {
+      const windShieldOptions = {
+        selectedWindshieldDamageType: "",
+        selectedWindshieldChipCount: null,
+        selectedWindshieldReplaceOptions: [],
+      };
+
+      if (this.mainStore.order.damage.isRepair === undefined)
+        return windshieldOptions;
+
+      if (this.mainStore.order.damage.isRepair) {
+        windShieldOptions.selectedWindshieldDamageType =
+          damageLocationsSelected.REPAIR;
+        windShieldOptions.selectedWindshieldChipCount =
+          this.mainStore.order.damage.numberOfChips;
+      } else {
+        if (
+          this.mainStore.order.damage.glassToReplace?.some(
+            (glass) =>
+              glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
+              glass.glassName === damageLocationsSelected.SINGLE
+          )
+        ) {
+          windShieldOptions.selectedWindshieldDamageType =
+            damageLocationsSelected.REPLACE;
+          windShieldOptions.selectedWindshieldReplaceOptions.push(
+            damageLocationsSelected.SINGLE
+          );
+        }
+
+        if (
+          this.mainStore.order.damage.glassToReplace?.some(
+            (glass) =>
+              glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
+              glass.glassName === damageLocationsSelected.DRIVER
+          )
+        ) {
+          windShieldOptions.selectedWindshieldDamageType =
+            damageLocationsSelected.REPLACE;
+          windShieldOptions.selectedWindshieldReplaceOptions.push(
+            damageLocationsSelected.DRIVER
+          );
+        }
+
+        if (
+          this.mainStore.order.damage.glassToReplace?.some(
+            (glass) =>
+              glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
+              glass.glassName === damageLocationsSelected.PASSENGER
+          )
+        ) {
+          windShieldOptions.selectedWindshieldDamageType =
+            damageLocationsSelected.REPLACE;
+          windShieldOptions.selectedWindshieldReplaceOptions.push(
+            damageLocationsSelected.PASSENGER
+          );
+        }
+      }
+
+      return windShieldOptions;
+    },
+    getDoorSidesFromStore() {
+      const doorSides = [];
+      if (
+        this.mainStore.order.damage.glassToReplace?.some(
+          (glass) => glass.glassLocation === damageLocationsSelected.DRIVER
+        )
+      ) {
+        doorSides.push(damageLocationsSelected.DRIVERSIDE);
+      }
+
+      if (
+        this.mainStore.order.damage.glassToReplace?.some(
+          (glass) => glass.glassLocation === damageLocationsSelected.PASSENGER
+        )
+      ) {
+        doorSides.push(damageLocationsSelected.PASSENGERSIDE);
+      }
+
+      return doorSides;
+    },
+    getDriverSideReplaceOptionsFromStore() {
+      const driverSideReplaceOptions = [];
+
+      this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
+        if (glass.glassLocation === damageLocationsSelected.DRIVER) {
+          driverSideReplaceOptions.push(glass.glassName);
+        }
+      });
+
+      return driverSideReplaceOptions;
+    },
+    getPassengerSideReplaceOptionsFromStore() {
+      const passengerSideReplaceOptions = [];
+
+      this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
+        if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
+          passengerSideReplaceOptions.push(glass.glassName);
+        }
+      });
+
+      return passengerSideReplaceOptions;
+    },
+    getRearReplaceOptionsFromStore() {
+      const rearReplaceOptions =
+        this.mainStore.order.damage.glassToReplace?.filter(
+          (glass) => glass.glassLocation === damageLocationsSelected.REAR
+        )[0]?.glassName;
+
+      return rearReplaceOptions;
+    },
+    async forwardButtonAction() {
+      this.mainStore.saveVehicleDamage(
+        this.isWindshieldRepair,
+        this.selectedGlassToReplace(),
+        this.selectedWindshieldOptions.selectedWindshieldChipCount
+      );
+
+      if (this.isWindshieldRepair) {
+        const supportingItems = await useMainStore().getSupportingItems();
+        useMainStore().updateSupportingItems(supportingItems.data);
+      }
+
+      if (this.mainStore.damage.isRepair) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
+          this.$route
+        );
+      } else if (this.mainStore.order.vehicle.vin) {
+        // If vin already exists, navigate directly to vin-lookup
+
+        const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+        if (partsOrQuestionsResponse.error) {
+          // To Do: Need requirement on what to do here
+          window.console.error("Error on retrieving PartsOrQuestions");
+          this.$refs.siteFooter.removeLoader();
+          return null;
+        }
+
+        // Comes from vehicleQuestionsMixin.navigateForward()
+        await this.navigateForward(
+          partsOrQuestionsResponse.data.partsOrQuestions,
+          this
+        );
+      } else {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+          this.$route
+        );
+      }
+
+      return null;
+    },
+    selectedGlassToReplace() {
+      const selectedGlassToReplace = [];
+      if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
+        this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
+          (wsItem) => {
+            selectedGlassToReplace.push({
+              glassLocation: damageLocationsSelected.WINDSHIELD,
+              glassName: wsItem,
+            });
+          }
+        );
+      }
+
+      if (this.isDriverSideReplace) {
+        this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(
+          (driverItem) => {
+            selectedGlassToReplace.push({
+              glassLocation: damageLocationsSelected.DRIVER,
+              glassName: driverItem,
+            });
+          }
+        );
+      }
+
+      if (this.isPassengerSideReplace) {
+        this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
+          (passengerItem) => {
+            selectedGlassToReplace.push({
+              glassLocation: damageLocationsSelected.PASSENGER,
+              glassName: passengerItem,
+            });
+          }
+        );
+      }
+
+      if (this.isRearWindowDamageLocation) {
+        selectedGlassToReplace.push({
+          glassLocation: damageLocationsSelected.REAR,
+          glassName: this.selectedRearReplaceOptions,
         });
+      }
+
+      return selectedGlassToReplace;
     },
-    setup() {
-        const mainStore = useMainStore();
-
-        return { mainStore };
-    },
-    data() {
-        return {
-            selectedDamageLocations: this.getDamageLocationsFromStore(),
-            sideDoorOptionsData: {
-                selectedDoorSides: this.getDoorSidesFromStore(),
-                selectedDriverSideReplaceOptions: this.getDriverSideReplaceOptionsFromStore(),
-                selectedPassengerSideReplaceOptions: this.getPassengerSideReplaceOptionsFromStore()
-            },
-            selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
-            selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore()
-        };
-    },
-    computed: {
-        isWindshieldDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD);
-        },
-        isSideDoorDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR);
-        },
-        isRearWindowDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW);
-        },
-        isWindshieldRepair() {
-            return (
-                this.isWindshieldDamageLocation
-                && this.selectedWindshieldOptions.selectedWindshieldDamageType
-                === damageLocationsSelected.REPAIR
-            );
-        },
-        isDriverSideReplace() {
-            if (!this.isSideDoorDamageLocation) return false;
-
-            return this
-                .sideDoorOptionsData.selectedDoorSides
-                .some((selectedDriverSide) => selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE);
-        },
-        isPassengerSideReplace() {
-            if (!this.isSideDoorDamageLocation) return false;
-
-            return this
-                .sideDoorOptionsData.selectedDoorSides
-                .some((selectedPassengerSide) => selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE);
-        },
-        hasRepairReplaceConflict() {
-            return (
-                this.isWindshieldDamageLocation
-                && this.selectedDamageLocations.length > 1
-                && this.isWindshieldRepair
-            );
-        },
-        hasSplitSingleConflict() {
-            if (
-                !this.selectedDamageLocations?.includes('Windshield')
-                || this.selectedWindshieldOptions.selectedWindshieldDamageType
-                === damageLocationsSelected.REPAIR
-                || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
-            ) return false;
-
-            return (
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedSingleWindshield) => (
-                    selectedSingleWindshield.toUpperCase()
-                            === damageLocationsSelected.SINGLE.toUpperCase()
-                ))
-                && (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedDriverWindshield) => (
-                    selectedDriverWindshield.toUpperCase()
-                            === damageLocationsSelected.DRIVER.toUpperCase()
-                ))
-                || this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedPassengerWindshield) => (
-                    selectedPassengerWindshield.toUpperCase()
-                            === damageLocationsSelected.PASSENGER.toUpperCase()
-                )))
-            );
-        },
-        shouldDisplayVehicleChangeAlert() {
-            return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
-        }
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            if (useMainStore().order.vehicle.carId) {
-                return true;
-            }
-            return false;
-        },
-        getDamageLocationsFromStore() {
-            const glassSelections = [];
-
-            if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD)
-                || this.mainStore.order.damage.isRepair
-            ) {
-                glassSelections.push(damageLocationsSelected.WINDSHIELD);
-            }
-            if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => (
-                    glass.glassLocation === damageLocationsSelected.DRIVER
-                        || glass.glassLocation === damageLocationsSelected.PASSENGER
-                ))
-            ) {
-                glassSelections.push(damageLocationsSelected.SIDEDOOR);
-            }
-
-            if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.REAR)
-            ) {
-                glassSelections.push(damageLocationsSelected.REARWINDOW);
-            }
-
-            return glassSelections;
-        },
-        getWindshieldOptionsFromStore() {
-            const windShieldOptions = {
-                selectedWindshieldDamageType: '',
-                selectedWindshieldChipCount: null,
-                selectedWindshieldReplaceOptions: []
-            };
-
-            if (this.mainStore.order.damage.isRepair === undefined) return windshieldOptions;
-
-            if (this.mainStore.order.damage.isRepair) {
-                windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
-                windShieldOptions.selectedWindshieldChipCount = this.mainStore.order.damage.numberOfChips;
-            } else {
-                if (
-                    this.mainStore.order.damage.glassToReplace?.some((glass) => (
-                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
-                            && glass.glassName === damageLocationsSelected.SINGLE
-                    ))
-                ) {
-                    windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
-                }
-
-                if (
-                    this.mainStore.order.damage.glassToReplace?.some((glass) => (
-                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
-                            && glass.glassName === damageLocationsSelected.DRIVER
-                    ))
-                ) {
-                    windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
-                }
-
-                if (
-                    this.mainStore.order.damage.glassToReplace?.some((glass) => (
-                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
-                            && glass.glassName === damageLocationsSelected.PASSENGER
-                    ))
-                ) {
-                    windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
-                }
-            }
-
-            return windShieldOptions;
-        },
-        getDoorSidesFromStore() {
-            const doorSides = [];
-            if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.DRIVER)
-            ) {
-                doorSides.push(damageLocationsSelected.DRIVERSIDE);
-            }
-
-            if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.PASSENGER)
-            ) {
-                doorSides.push(damageLocationsSelected.PASSENGERSIDE);
-            }
-
-            return doorSides;
-        },
-        getDriverSideReplaceOptionsFromStore() {
-            const driverSideReplaceOptions = [];
-
-            this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
-                if (glass.glassLocation === damageLocationsSelected.DRIVER) {
-                    driverSideReplaceOptions.push(glass.glassName);
-                }
-            });
-
-            return driverSideReplaceOptions;
-        },
-        getPassengerSideReplaceOptionsFromStore() {
-            const passengerSideReplaceOptions = [];
-
-            this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
-                if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
-                    passengerSideReplaceOptions.push(glass.glassName);
-                }
-            });
-
-            return passengerSideReplaceOptions;
-        },
-        getRearReplaceOptionsFromStore() {
-            const rearReplaceOptions = this.mainStore.order.damage
-                .glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
-
-            return rearReplaceOptions;
-        },
-        async forwardButtonAction() {
-            this.mainStore.saveVehicleDamage(
-                this.isWindshieldRepair,
-                this.selectedGlassToReplace(),
-                this.selectedWindshieldOptions.selectedWindshieldChipCount
-            );
-
-            if (this.isWindshieldRepair) {
-                const supportingItems = await useMainStore().getSupportingItems();
-                useMainStore().updateSupportingItems(supportingItems.data);
-            }
-
-            if (this.mainStore.damage.isRepair) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
-                    this.$route
-                );
-            } else if (this.mainStore.order.vehicle.vin) {
-                // If vin already exists, navigate directly to vin-lookup
-
-                const partsOrQuestionsResponse = await this.getPartsOrQuestions();
-                if (partsOrQuestionsResponse.error) {
-                    // To Do: Need requirement on what to do here
-                    window.console.error('Error on retrieving PartsOrQuestions');
-                    this.$refs.siteFooter.removeLoader();
-                    return null;
-                }
-
-                // Comes from vehicleQuestionsMixin.navigateForward()
-                await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
-            } else {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
-                    this.$route
-                );
-            }
-
-            return null;
-        },
-        selectedGlassToReplace() {
-            const selectedGlassToReplace = [];
-            if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach((wsItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.WINDSHIELD,
-                        glassName: wsItem
-                    });
-                });
-            }
-
-            if (this.isDriverSideReplace) {
-                this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.DRIVER,
-                        glassName: driverItem
-                    });
-                });
-            }
-
-            if (this.isPassengerSideReplace) {
-                this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach((passengerItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.PASSENGER,
-                        glassName: passengerItem
-                    });
-                });
-            }
-
-            if (this.isRearWindowDamageLocation) {
-                selectedGlassToReplace.push({
-                    glassLocation: damageLocationsSelected.REAR,
-                    glassName: this.selectedRearReplaceOptions
-                });
-            }
-
-            return selectedGlassToReplace;
-        }
-    }
+  },
 };
 </script>
 
 <style lang="scss">
 .replace-options-question {
-    .two-list-card-width {
-        width: 100%;
-        flex: 0 auto;
-    }
+  .two-list-card-width {
+    width: 100%;
+    flex: 0 auto;
+  }
 }
 </style>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index f74e1c96..d8b4aac1 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,244 +1,251 @@
 <template>
-    <Form
-        ref="theForm"
-        @submit="onSubmit"
-        @invalidSubmit="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
-                                    ref="vehicleBanner"
-                                    class="mt-2 mb-4"
-                                    cmsWidgetName="VehicleBannerWidget"
-                                    :displayGenericVehicleImage="false" />
-                                    <siteSubHeader
-                                        ref="siteSubHeader"
-                                        cmsWidgetName="SiteSubHeaderWidget" />
-                                    <div class="prevent-squish my-5">
-                                        <div class="row">
-                                            <div class="col">
-                                                <alert
-                                                id="vehicle-parts-alert"
-                                                class="rounded border-0 shadow-sm"
-                                                alertClass="alert-warning"
-                                                cmsWidgetName="AlertWidget"
-                                                :isDismissible="false" />
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div
-                                        v-for="(item, i) in PartsOrQuestions"
-                                        :key="i">
-                                        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-                                        <hr v-if="i > 0" />
-                                        <glassPartQuestion
-                                        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-                                        v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
-                                        :glassLocation="item.glassLocation"
-                                        :glassName="item.glassName"
-                                        :colorAnswers="item.colorAnswers"
-                                        :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
-                                    </div>
-                                    <siteFooter
-                                    ref="siteFooter"
-                                    class="mt-5"
-                                    cmsWidgetName="SiteFooterWidget"
-                                    :isForwardActionDisabled="isForwardActionDisabled"
-                                    @backClicked="navigateBackByVehicleQuestions"
-                                    @ForwardClicked="forwardButtonAction" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
+    <div class="container-fluid fade-on-route-transition">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <siteHeader cmsWidgetName="SiteHeaderWidget" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <vehicleBanner
+            ref="vehicleBanner"
+            class="mt-2 mb-4"
+            cmsWidgetName="VehicleBannerWidget"
+            :displayGenericVehicleImage="false"
+          />
+          <siteSubHeader
+            ref="siteSubHeader"
+            cmsWidgetName="SiteSubHeaderWidget"
+          />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <alert
+            id="vehicle-parts-alert"
+            class="mt-3 mb-3"
+            alertClass="alert-warning"
+            cmsWidgetName="AlertWidget"
+            :isDismissible="false"
+          />
+          <div v-for="(item, i) in PartsOrQuestions" :key="i">
+            <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+            <hr v-if="i > 0" />
+            <glassPartQuestion
+              :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+              v-model="
+                selectedGlassParts[item.glassLocation + '-' + item.glassName]
+              "
+              :glassLocation="item.glassLocation"
+              :glassName="item.glassName"
+              :colorAnswers="item.colorAnswers"
+              :alreadyPopulatedPartsData="alreadyPopulatedPartsData"
+            />
+          </div>
+          <siteFooter
+            ref="siteFooter"
+            class="mt-5"
+            cmsWidgetName="SiteFooterWidget"
+            :isForwardActionDisabled="isForwardActionDisabled"
+            @backClicked="navigateBackByVehicleQuestions"
+            @ForwardClicked="forwardButtonAction"
+          />
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 
 <script>
 // Components
-import glassPartQuestion from '@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue';
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import alert from '@/ux-components/alert/alert.vue';
+import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import alert from "@/ux-components/alert/alert.vue";
 
 // Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import issPageValues from '@/router/router-constants/issPage-values';
-import { Form } from 'vee-validate';
-import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import { useMainStore } from '@/store';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import issPageValues from "@/router/router-constants/issPage-values";
+import { Form } from "vee-validate";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import { useMainStore } from "@/store";
 
 export default {
-    name: 'vehicle-parts',
-    components: {
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        glassPartQuestion,
-        siteHeader,
-        vehicleBanner,
-        siteSubHeader,
-        siteFooter,
-        alert
+  name: "vehicle-parts",
+  components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    glassPartQuestion,
+    siteHeader,
+    vehicleBanner,
+    siteSubHeader,
+    siteFooter,
+    alert,
+  },
+  mixins: [BaseFormMixin, vehicleQuestionsMixin],
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
+    const resultMap = await settleAllPromises(promiseResultMap);
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+
+      // Glass Part Question dynamic component
+      Object.keys(vm.$refs)
+        .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
+        .forEach((c) =>
+          vm.$refs[c][0].initializeComponent({
+            ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+            FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+          })
+        );
+    });
+  },
+  data() {
+    return {
+      selectedGlassParts: {},
+      alertWidgetData: Object,
+      alreadyPopulatedPartsData: [],
+    };
+  },
+  computed: {
+    isForwardActionDisabled() {
+      return (
+        this.selectedGlassPartNumbers?.length !==
+        this.PartsFromApi.partsOrQuestions?.length
+      );
     },
-    mixins: [BaseFormMixin, vehicleQuestionsMixin],
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
-        ];
-        const resultMap = await settleAllPromises(promiseResultMap);
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-
-            // Glass Part Question dynamic component
-            Object.keys(vm.$refs)
-                .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
-                .forEach((c) =>
-                    vm.$refs[c][0].initializeComponent({
-                        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-                        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget
-                    }));
-        });
-    },
-    data() {
-        return {
-            selectedGlassParts: {},
-            alertWidgetData: Object,
-            alreadyPopulatedPartsData: []
-        };
-    },
-    computed: {
-        isForwardActionDisabled() {
-            return this.selectedGlassPartNumbers?.length !== this.PartsFromApi.partsOrQuestions?.length;
-        },
-        selectedGlassPartNumbers() {
-        // Compile all selected parts from the page.
-            const numberArray = [];
-            // eslint-disable-next-line no-restricted-syntax
-            for (const glassPart of Object.values(this.selectedGlassParts)) {
-                if (glassPart?.partNumber) {
-                    numberArray.push(glassPart.partNumber);
-                }
-            }
-            return numberArray;
-        },
-        PartsOrQuestions() {
-            const partsData = this.PartsFromApi;
-
-            // Map API result data, to vehicle-parts data structure
-            const mappedData = partsData.partsOrQuestions?.map((g) => ({
-                glassName: g.glassName,
-                glassLocation: g.glassLocation,
-                colorAnswers: g.parts?.reduce((arr, p) => {
-                    arr.push({
-                        ColorAnswerText: p.color,
-                        FeatureAnswers: [
-                            {
-                                FeatureAnswerText:
-                                p.description === '' ? p.color : p.description,
-                                PartNumber: p.partNumber
-                            }
-                        ]
-                    });
-                    return arr;
-                }, [])
-            }));
-
-            return mappedData;
-        },
-
-        PartsFromApi() {
-            return this.mainStore.pageData(issPageValues.VEHICLE_PARTS);
-        },
-
-        RefPrefix() {
-            return 'partQuestion';
+    selectedGlassPartNumbers() {
+      // Compile all selected parts from the page.
+      const numberArray = [];
+      // eslint-disable-next-line no-restricted-syntax
+      for (const glassPart of Object.values(this.selectedGlassParts)) {
+        if (glassPart?.partNumber) {
+          numberArray.push(glassPart.partNumber);
         }
+      }
+      return numberArray;
     },
-    mounted() {
-        this.LoadInitialPartsData();
+    PartsOrQuestions() {
+      const partsData = this.PartsFromApi;
+
+      // Map API result data, to vehicle-parts data structure
+      const mappedData = partsData.partsOrQuestions?.map((g) => ({
+        glassName: g.glassName,
+        glassLocation: g.glassLocation,
+        colorAnswers: g.parts?.reduce((arr, p) => {
+          arr.push({
+            ColorAnswerText: p.color,
+            FeatureAnswers: [
+              {
+                FeatureAnswerText:
+                  p.description === "" ? p.color : p.description,
+                PartNumber: p.partNumber,
+              },
+            ],
+          });
+          return arr;
+        }, []),
+      }));
+
+      return mappedData;
     },
-    methods: {
-        arePagePrerequisitesValid() {
-        // Check if isRepair is populated and if the pageData we need is here (Parts data)
-            return (
-                useMainStore().damage.isRepair != null
-            && useMainStore().pageData(issPageValues.VEHICLE_PARTS)
-            && Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS)).length !== 0
-            );
-        },
-        async forwardButtonAction() {
-            const matchedParts = [];
 
-            // Match them to the parts from the API.
-            // eslint-disable-next-line no-restricted-syntax
-            for (const [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
-                // eslint-disable-next-line no-restricted-syntax
-                for (const [partKey, partValue] of Object.entries(value.parts)) {
-                    const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+    PartsFromApi() {
+      return this.mainStore.pageData(issPageValues.VEHICLE_PARTS);
+    },
 
-                    const isMatched = this.selectedGlassPartNumbers.some((p) => p === currentPart.partNumber);
+    RefPrefix() {
+      return "partQuestion";
+    },
+  },
+  mounted() {
+    this.LoadInitialPartsData();
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      // Check if isRepair is populated and if the pageData we need is here (Parts data)
+      return (
+        useMainStore().damage.isRepair != null &&
+        useMainStore().pageData(issPageValues.VEHICLE_PARTS) &&
+        Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS))
+          .length !== 0
+      );
+    },
+    async forwardButtonAction() {
+      const matchedParts = [];
 
-                    if (isMatched) {
-                        matchedParts.push({
-                            glassLocation: value.glassLocation,
-                            glassName: value.glassName,
-                            parts: [currentPart]
-                        });
-                    }
-                }
-            }
-            // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
-            if (this.isForwardActionDisabled) {
-                this.$refs.siteFooter.removeLoader();
-                throw new Error('Could not match any parts to the selected parts');
-            }
+      // Match them to the parts from the API.
+      // eslint-disable-next-line no-restricted-syntax
+      for (const [key, value] of Object.entries(
+        this.PartsFromApi.partsOrQuestions
+      )) {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const [partKey, partValue] of Object.entries(value.parts)) {
+          const currentPart =
+            this.PartsFromApi.partsOrQuestions[key].parts[partKey];
 
-            this.navigateForward(matchedParts, null);
-        },
+          const isMatched = this.selectedGlassPartNumbers.some(
+            (p) => p === currentPart.partNumber
+          );
 
-        LoadInitialPartsData() {
-            const partsData = this.PartsFromApi;
-            this.alreadyPopulatedPartsData = this.mainStore.lineItems.glassParts === null
-                ? []
-                : this.mainStore.lineItems.glassParts;
-
-            partsData.partsOrQuestions.map((g) => {
-            // If the part is already populated, use the value from the store and populate the v-model.
-                Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
-                    const { partNumber } = this.alreadyPopulatedPartsData[key];
-                    g.parts.forEach((p) => {
-                        if (p.partNumber === partNumber) {
-                            this.selectedGlassParts[`${g.glassLocation}-${g.glassName}`] = p;
-                        }
-                    });
-                });
+          if (isMatched) {
+            matchedParts.push({
+              glassLocation: value.glassLocation,
+              glassName: value.glassName,
+              parts: [currentPart],
             });
+          }
         }
-    }
+      }
+      // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
+      if (this.isForwardActionDisabled) {
+        this.$refs.siteFooter.removeLoader();
+        throw new Error("Could not match any parts to the selected parts");
+      }
+
+      this.navigateForward(matchedParts, null);
+    },
+
+    LoadInitialPartsData() {
+      const partsData = this.PartsFromApi;
+      this.alreadyPopulatedPartsData =
+        this.mainStore.lineItems.glassParts === null
+          ? []
+          : this.mainStore.lineItems.glassParts;
+
+      partsData.partsOrQuestions.map((g) => {
+        // If the part is already populated, use the value from the store and populate the v-model.
+        Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
+          const { partNumber } = this.alreadyPopulatedPartsData[key];
+          g.parts.forEach((p) => {
+            if (p.partNumber === partNumber) {
+              this.selectedGlassParts[`${g.glassLocation}-${g.glassName}`] = p;
+            }
+          });
+        });
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
 #vehicle-parts-alert {
-    .alert-heading {
-        margin-top: 0.25rem !important;
-    }
+  .alert-heading {
+    margin-top: 0.25rem !important;
+  }
 }
 </style>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index e8a6bddb..15ba5d02 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,412 +1,413 @@
 <template>
-    <Form
-        ref="theForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles welcome">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader
-                    cmsWidgetName="SiteSubHeaderWidget"
-                    class="mt-4" />
-                <div class="container-fluid px-5">
-                    <div class="row mt-5">
-                        <div class="col">
-                            <textboxQuestion
-                                ref="policyNumber"
-                                v-model="welcomePageModel.policyNumber"
-                                inputId="policyNumberField"
-                                cmsWidgetName="PolicyNumberQuestion"
-                                isRequired
-                                disableAutoFill
-                                :isDisabled="isPolicyHolderDisabled"
-                                :validationRules="rules.policyNumber" />
-                        </div>
-                    </div>
-                    <div
-                        class="row mt-4">
-                        <div class="col">
-                            <textboxQuestion
-                                ref="policyZip"
-                                v-model="welcomePageModel.policyZipCode"
-                                inputId="policyZipCode"
-                                cmsWidgetName="PolicyZipQuestion"
-                                isRequired
-                                mask="#####"
-                                :isDisabled="isPolicyZipDisabled"
-                                :validationRules="rules.policyZip" />
-                        </div>
-                    </div>
-                    <div class="row mt-4">
-                        <div class="col">
-                            <textboxQuestion
-                                ref="dateOfLoss"
-                                v-model="welcomePageModel.dateOfLoss"
-                                type="date"
-                                cmsWidgetName="DateOfLossQuestion"
-                                inputId="dateOfLossField"
-                                isRequired
-                                :isDisabled="isDateOfLossDisabled"
-                                disableAutoFill
-                                :max="new Date().toJSON().slice(0, 10)"
-                                :min="'1972-12-01'"
-                                :validationRules="rules.lossDate" />
-                        </div>
-                    </div>
-                    <div class="row px-4">
-                        <div class="col px-0">
-                            <textBlock
-                                cmsWidgetName="DamageDateEstimateWidget"
-                                typeStyle="small"
-                                class="mt-2" />
-                        </div>
-                    </div>
-                    <div class="row mt-4">
-                        <div class="col">
-                            <dropdownQuestion
-                                id="welcomeDropdown"
-                                ref="damageCause"
-                                v-model="welcomePageModel.damageCause"
-                                cmsWidgetName="DamageCauseQuestion"
-                                inputId="damageCauseQuestionField"
-                                :options="DamageCauseOptions"
-                                disableAutoFill
-                                :validationRules="rules.damageOption"
-                                placeHolderText="Select an option" />
-                        </div>
-                    </div>
-                    <div class="row mt-4">
-                        <div class="col">
-                            <textboxQuestion
-                                ref="phoneNumber"
-                                v-model="welcomePageModel.phoneNumber"
-                                inputId="phoneNumberField"
-                                cmsWidgetName="PhoneNumberQuestion"
-                                :validationRules="rules.phoneNumber"
-                                isRequired
-                                :mask="phoneMask"
-                                disableAutoFill />
-                        </div>
-                    </div>
-                    <div class="row mt-4">
-                        <div class="col">
-                            <textboxQuestion
-                                ref="email"
-                                v-model="welcomePageModel.email"
-                                inputId="emailField"
-                                cmsWidgetName="EmailAddressQuestion"
-                                :validationRules="rules.email"
-                                isRequired
-                                disableAutoFill />
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <textboxQuestion
-                                v-if="displayDamageCityQuestion"
-                                ref="damageCity"
-                                v-model="welcomePageModel.damageCity"
-                                class="mt-4"
-                                inputId="damageCityField"
-                                cmsWidgetName="DamageCityQuestion"
-                                isRequired
-                                disableAutoFill
-                                :validationRules="rules.lossCity" />
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <dropdownQuestion
-                                v-if="displayDamageStateQuestion"
-                                id="welcomeDropdown"
-                                ref="state"
-                                v-model="welcomePageModel.damageState"
-                                class="mt-4"
-                                cmsWidgetName="DamageStateQuestion"
-                                inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-                                :options="getStates"
-                                :validationRules="rules.lossState"
-                                isRequired
-                                disableAutoFill
-                                placeHolderText="Select an option" />
-                        </div>
-                    </div>
-                    <div class="row mb-3">
-                        <buttonQuestion
-                            v-if="displayGlassOnlyQuestion"
-                            ref="glassOnlyDamage"
-                            v-model="welcomePageModel.isDamageGlassOnly"
-                            class="px-0 mt-4"
-                            cmsWidgetName="GlassOnlyQuestion"
-                            inputId="isDamageGlassOnly"
-                            :answers="DamageGlassOnlyOptions"
-                            :questionText="DamageGlassOnlyQuestion"
-                            groupName="glassOnlyDamageOption"
-                            buttonTypeString="listButtonHorizontal"
-                            :validationRules="rules.damageOption"
-                            isRequired
-                            isSmallQuestionLabelText
-                            disableAutoFill />
-                    </div>
-                    <div
-                        id="welcomeFooter"
-                        class="row position-sticky top-100">
-                        <div class="col">
-                            <alert
-                                v-if="displayInvalidZipAlert"
-                                ref="alertInvalidZip"
-                                class="my-4"
-                                cmsWidgetName="AlertInvalidZipWidget"
-                                alertClass="alert-danger"
-                                :isDismissible="false" />
-                            <siteFooter
-                                ref="siteFooter"
-                                class="mt-3"
-                                cmsWidgetName="SiteFooterWidget"
-                                :isForwardActionDisabled="!meta.valid"
-                                @ForwardClicked="forwardButtonAction" />
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <Form
+    ref="theForm"
+    v-slot="{ meta }"
+    @submit="onSubmit"
+    @invalidSubmit="onInvalidSubmit"
+  >
+    <div class="container-fluid fade-on-route-transition">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <siteHeader cmsWidgetName="SiteHeaderWidget" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4" />
+          <textboxQuestion
+            ref="policyNumber"
+            v-model="welcomePageModel.policyNumber"
+            inputId="policyNumberField"
+            cmsWidgetName="PolicyNumberQuestion"
+            isRequired
+            disableAutoFill
+            :isDisabled="isPolicyHolderDisabled"
+            :validationRules="rules.policyNumber"
+          />
+          <textboxQuestion
+            ref="policyZip"
+            v-model="welcomePageModel.policyZipCode"
+            inputId="policyZipCode"
+            cmsWidgetName="PolicyZipQuestion"
+            isRequired
+            mask="#####"
+            :isDisabled="isPolicyZipDisabled"
+            :validationRules="rules.policyZip"
+          />
+          <textboxQuestion
+            ref="dateOfLoss"
+            v-model="welcomePageModel.dateOfLoss"
+            type="date"
+            cmsWidgetName="DateOfLossQuestion"
+            inputId="dateOfLossField"
+            isRequired
+            :isDisabled="isDateOfLossDisabled"
+            disableAutoFill
+            :max="new Date().toJSON().slice(0, 10)"
+            :min="'1972-12-01'"
+            :validationRules="rules.lossDate"
+          />
+          <textBlock
+            cmsWidgetName="DamageDateEstimateWidget"
+            typeStyle="small"
+            class="mt-2"
+          />
+          <dropdownQuestion
+            id="welcomeDropdown"
+            ref="damageCause"
+            v-model="welcomePageModel.damageCause"
+            cmsWidgetName="DamageCauseQuestion"
+            inputId="damageCauseQuestionField"
+            :options="DamageCauseOptions"
+            disableAutoFill
+            :validationRules="rules.damageOption"
+            placeHolderText="Select an option"
+          />
+          <textboxQuestion
+            ref="phoneNumber"
+            v-model="welcomePageModel.phoneNumber"
+            inputId="phoneNumberField"
+            cmsWidgetName="PhoneNumberQuestion"
+            :validationRules="rules.phoneNumber"
+            isRequired
+            :mask="phoneMask"
+            disableAutoFill
+          />
+          <textboxQuestion
+            ref="email"
+            v-model="welcomePageModel.email"
+            inputId="emailField"
+            cmsWidgetName="EmailAddressQuestion"
+            :validationRules="rules.email"
+            isRequired
+            disableAutoFill
+          />
+          <textboxQuestion
+            v-if="displayDamageCityQuestion"
+            ref="damageCity"
+            v-model="welcomePageModel.damageCity"
+            class="mt-4"
+            inputId="damageCityField"
+            cmsWidgetName="DamageCityQuestion"
+            isRequired
+            disableAutoFill
+            :validationRules="rules.lossCity"
+          />
+          <dropdownQuestion
+            v-if="displayDamageStateQuestion"
+            id="welcomeDropdown"
+            ref="state"
+            v-model="welcomePageModel.damageState"
+            class="mt-4"
+            cmsWidgetName="DamageStateQuestion"
+            inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+            :options="getStates"
+            :validationRules="rules.lossState"
+            isRequired
+            disableAutoFill
+            placeHolderText="Select an option"
+          />
+          <buttonQuestion
+            v-if="displayGlassOnlyQuestion"
+            ref="glassOnlyDamage"
+            v-model="welcomePageModel.isDamageGlassOnly"
+            class="px-0 mt-4"
+            cmsWidgetName="GlassOnlyQuestion"
+            inputId="isDamageGlassOnly"
+            :answers="DamageGlassOnlyOptions"
+            :questionText="DamageGlassOnlyQuestion"
+            groupName="glassOnlyDamageOption"
+            buttonTypeString="listButtonHorizontal"
+            :validationRules="rules.damageOption"
+            isRequired
+            isSmallQuestionLabelText
+            disableAutoFill
+          />
+          <div id="welcomeFooter" class="row">
+            <alert
+              v-if="displayInvalidZipAlert"
+              ref="alertInvalidZip"
+              class="my-4"
+              cmsWidgetName="AlertInvalidZipWidget"
+              alertClass="alert-danger"
+              :isDismissible="false"
+            />
+            <siteFooter
+              ref="siteFooter"
+              class="mt-3"
+              cmsWidgetName="SiteFooterWidget"
+              :isForwardActionDisabled="!meta.valid"
+              @ForwardClicked="forwardButtonAction"
+            />
+          </div>
+        </div>
+      </div>
+      <footerImage
+        cmsWidgetName="SiteFooterWidget" />
+    </div>
+  </Form>
 </template>
 
 <script>
 // Components
-import { Form, defineRule } from 'vee-validate';
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import alert from '@/ux-components/alert/alert.vue';
-import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
-import buttonQuestion from '@/digital-components/button-question/button-question.vue';
-import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
-import textBlock from '@/digital-components/text-block/text-block.vue';
+import { Form, defineRule } from "vee-validate";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import alert from "@/ux-components/alert/alert.vue";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
+import buttonQuestion from "@/digital-components/button-question/button-question.vue";
+import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question.vue";
+import textBlock from "@/digital-components/text-block/text-block.vue";
+import footerImage from "@/iss-components/site-footer/footer-image/footer-image.vue";
 
 // Supporting files
-import { fetchCmsContentForPage, fetchGlobalCmsContent, updateCmsSiteHeader } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import { required } from '@/helpers/validation-rules';
-import errorMessages from '@/constants/error-messages';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import { useMainStore } from '@/store';
-import states from '@/constants/states';
-import globalRules from '@/constants/global-rules';
-import routerParams from '@/router/router-constants/router-params';
-import MaskaFormattedMasks from '@/constants/maska-masks';
+import {
+  fetchCmsContentForPage,
+  fetchGlobalCmsContent,
+  updateCmsSiteHeader,
+} from "@/helpers/cms-content-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import { required } from "@/helpers/validation-rules";
+import errorMessages from "@/constants/error-messages";
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import { useMainStore } from "@/store";
+import states from "@/constants/states";
+import globalRules from "@/constants/global-rules";
+import routerParams from "@/router/router-constants/router-params";
+import MaskaFormattedMasks from "@/constants/maska-masks";
 
 // define validation rules
-defineRule('damage-option-required', required(errorMessages.DAMAGE_OPTION_REQUIRED));
+defineRule(
+  "damage-option-required",
+  required(errorMessages.DAMAGE_OPTION_REQUIRED)
+);
 
 export default {
-    name: 'welcome-page',
-    components: {
-        siteHeader,
-        siteSubHeader,
-        alert,
-        buttonQuestion,
-        textboxQuestion,
-        dropdownQuestion,
-        siteFooter,
-        textBlock,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+  name: "welcome-page",
+  components: {
+    siteHeader,
+    siteSubHeader,
+    footerImage,
+    alert,
+    buttonQuestion,
+    textboxQuestion,
+    dropdownQuestion,
+    siteFooter,
+    textBlock,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+  },
+  mixins: [BaseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    const cmsGlobalSiteHeaderContentPromise =
+      fetchGlobalCmsContent("iss-siteheader");
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "globalSiteHeaderCmsContent",
+        promise: cmsGlobalSiteHeaderContentPromise,
+      },
+    ];
+
+    // use resultMap to populate layout content.
+    const resultMap = await settleAllPromises(promiseResultMap);
+    next((vm) => {
+      updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent);
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  setup() {
+    const mainStore = useMainStore();
+
+    // Set order account number from the issConfig.
+    mainStore.order.accountNumber = mainStore.issConfig.parentAccountNumber;
+
+    return { mainStore };
+  },
+  data() {
+    return {
+      welcomePageModel: this.getWelcomePageModelFromStore(),
+      displayInvalidZipAlert: false,
+      duplicates: [],
+      rules: {
+        damageOption: "damage-option-required",
+        email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+        lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
+        // eslint-disable-next-line max-len
+        lossDate: `${globalRules.DATE_OF_LOSS_REQUIRED}|${globalRules.DATE_OF_LOSS_NOT_TEN_YEARS_PAST}|${globalRules.DATE_OF_LOSS_NOT_FUTURE}`,
+        lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
+        policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
+        policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
+        phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
+      },
+    };
+  },
+  computed: {
+    DamageCauseOptions() {
+      const damageCauseAnswers = this.getCmsContent(
+        "DamageCauseQuestion",
+        "Answers"
+      );
+      const damageCauseAnswersObj = {};
+      if (damageCauseAnswers) {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const answer of Object.values(damageCauseAnswers)) {
+          if (answer?.Name) {
+            damageCauseAnswersObj[answer.Name] = answer.Name;
+          }
+        }
+      }
+      return damageCauseAnswersObj;
     },
-    mixins: [BaseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const cmsGlobalSiteHeaderContentPromise = fetchGlobalCmsContent('iss-siteheader');
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            },
-            {
-                resultKey: 'globalSiteHeaderCmsContent',
-                promise: cmsGlobalSiteHeaderContentPromise
-            }
-        ];
-
-        // use resultMap to populate layout content.
-        const resultMap = await settleAllPromises(promiseResultMap);
-        next((vm) => {
-            updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent);
-            vm.setCmsContent(resultMap.cmsContent);
+    DamageGlassOnlyOptions() {
+      return this.getCmsContent("GlassOnlyQuestion", "Answers");
+    },
+    DamageGlassOnlyQuestion() {
+      return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
+    },
+    displayDamageCityQuestion() {
+      return !!this.getCmsContent("DamageCityQuestion", "QuestionText");
+    },
+    displayDamageStateQuestion() {
+      return !!this.getCmsContent("DamageStateQuestion", "QuestionText");
+    },
+    displayGlassOnlyQuestion() {
+      return !!this.getCmsContent("GlassOnlyQuestion", "QuestionText");
+    },
+    getStates() {
+      return states;
+    },
+    isPolicyHolderDisabled() {
+      return !!this.mainStore.issConfig.disabledFields.policyNumber;
+    },
+    isPolicyZipDisabled() {
+      return !!this.mainStore.issConfig.disabledFields.policyZipCode;
+    },
+    isDateOfLossDisabled() {
+      return !!this.mainStore.issConfig.disabledFields.dateOfLoss;
+    },
+    isCoverageEnabled() {
+      return this.mainStore.issConfig.isCoverageEnabled;
+    },
+    maxCoverageLookupAttemptsReached() {
+      return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
+    },
+    phoneMask() {
+      return MaskaFormattedMasks.PHONE_NUMBER;
+    },
+  },
+  methods: {
+    async forwardButtonAction() {
+      await this.mainStore
+        .validateZip({ zip: this.welcomePageModel.policyZipCode })
+        .then(async (zipInfo) => {
+          if (zipInfo?.data?.isValid === true) {
+            this.mainStore.updatePolicyData(this.welcomePageModel);
+            await this.mainStore
+              .getDuplicateReferrals()
+              .then(
+                () => {},
+                () => {}
+              )
+              .finally(async () => {
+                if (
+                  this.isCoverageEnabled &&
+                  !this.maxCoverageLookupAttemptsReached
+                ) {
+                  await this.mainStore.getCoveragePolicyInfo()?.then(
+                    () => {},
+                    () => {}
+                  );
+                } else {
+                  this.mainStore.order.policy.policyLookupSuccessful = false;
+                }
+                this.navigateForward();
+              });
+          } else {
+            this.displayInvalidZipAlert = true;
+            this.$refs.siteFooter.removeLoader();
+          }
         });
     },
-    setup() {
-        const mainStore = useMainStore();
-
-        // Set order account number from the issConfig.
-        mainStore.order.accountNumber = mainStore.issConfig.parentAccountNumber;
-
-        return { mainStore };
-    },
-    data() {
-        return {
-            welcomePageModel: this.getWelcomePageModelFromStore(),
-            displayInvalidZipAlert: false,
-            duplicates: [],
-            rules: {
-                damageOption: 'damage-option-required',
-                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
-                lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
-                // eslint-disable-next-line max-len
-                lossDate: `${globalRules.DATE_OF_LOSS_REQUIRED}|${globalRules.DATE_OF_LOSS_NOT_TEN_YEARS_PAST}|${globalRules.DATE_OF_LOSS_NOT_FUTURE}`,
-                lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
-                policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
-                policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
-                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
-            }
-        };
-    },
-    computed: {
-        DamageCauseOptions() {
-            const damageCauseAnswers = this.getCmsContent('DamageCauseQuestion', 'Answers');
-            const damageCauseAnswersObj = {};
-            if (damageCauseAnswers) {
-                // eslint-disable-next-line no-restricted-syntax
-                for (const answer of Object.values(damageCauseAnswers)) {
-                    if (answer?.Name) {
-                        damageCauseAnswersObj[answer.Name] = answer.Name;
-                    }
-                }
-            }
-            return damageCauseAnswersObj;
-        },
-        DamageGlassOnlyOptions() {
-            return this.getCmsContent('GlassOnlyQuestion', 'Answers');
-        },
-        DamageGlassOnlyQuestion() {
-            return this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
-        },
-        displayDamageCityQuestion() {
-            return !!this.getCmsContent('DamageCityQuestion', 'QuestionText');
-        },
-        displayDamageStateQuestion() {
-            return !!this.getCmsContent('DamageStateQuestion', 'QuestionText');
-        },
-        displayGlassOnlyQuestion() {
-            return !!this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
-        },
-        getStates() {
-            return states;
-        },
-        isPolicyHolderDisabled() {
-            return !!this.mainStore.issConfig.disabledFields.policyNumber;
-        },
-        isPolicyZipDisabled() {
-            return !!this.mainStore.issConfig.disabledFields.policyZipCode;
-        },
-        isDateOfLossDisabled() {
-            return !!this.mainStore.issConfig.disabledFields.dateOfLoss;
-        },
-        isCoverageEnabled() {
-            return this.mainStore.issConfig.isCoverageEnabled;
-        },
-        maxCoverageLookupAttemptsReached() {
-            return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
-        },
-        phoneMask() {
-            return MaskaFormattedMasks.PHONE_NUMBER;
+    navigateForward() {
+      if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
+          this.$route,
+          {},
+          { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+        );
+      } else if (this.mainStore.policy.policyLookupSuccessful) {
+        if (this.mainStore.order.policy.vehicles?.length > 0 ?? false) {
+          // navigate to policy-vehicles page
+          this.$router.navigate(
+            this.navigationScenarios
+              .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+            this.$route,
+            {},
+            { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+          );
+        } else {
+          // navigate to vehicle-selection page (manual entry)
+          this.$router.navigate(
+            this.navigationScenarios
+              .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+            this.$route,
+            {},
+            { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+          );
         }
+      } else {
+        // if policy lookup is unsuccessful, navigate to policy-holder-details page
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+          this.$route,
+          {},
+          { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+        );
+      }
     },
-    methods: {
-        async forwardButtonAction() {
-            await this.mainStore.validateZip({ zip: this.welcomePageModel.policyZipCode })
-                .then(async (zipInfo) => {
-                    if (zipInfo?.data?.isValid === true) {
-                        this.mainStore.updatePolicyData(this.welcomePageModel);
-                        await this.mainStore.getDuplicateReferrals()
-                            .then(() => {}, () => {})
-                            .finally(async () => {
-                                if (this.isCoverageEnabled && !this.maxCoverageLookupAttemptsReached) {
-                                    await this.mainStore.getCoveragePolicyInfo()?.then(() => {}, () => {});
-                                } else {
-                                    this.mainStore.order.policy.policyLookupSuccessful = false;
-                                }
-                                this.navigateForward();
-                            });
-                    } else {
-                        this.displayInvalidZipAlert = true;
-                        this.$refs.siteFooter.removeLoader();
-                    }
-                });
-        },
-        navigateForward() {
-            if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
-                    this.$route,
-                    {},
-                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                );
-            } else if (this.mainStore.policy.policyLookupSuccessful) {
-                if (this.mainStore.order.policy.vehicles?.length > 0 ?? false) {
-                    // navigate to policy-vehicles page
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
-                        this.$route,
-                        {},
-                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                    );
-                } else {
-                    // navigate to vehicle-selection page (manual entry)
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
-                        this.$route,
-                        {},
-                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                    );
-                }
-            } else {
-                // if policy lookup is unsuccessful, navigate to policy-holder-details page
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-                    this.$route,
-                    {},
-                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                );
-            }
-        },
-        getWelcomePageModelFromStore() {
-            return {
-                policyNumber: this.mainStore.order.policy.policyNumber,
-                policyZipCode: this.mainStore.order.policy.policyZipCode,
-                dateOfLoss: this.mainStore.order.policy.dateOfLoss,
-                damageCause: this.mainStore.order.policy.damageCause,
-                damageState: this.mainStore.order.policy.damageState,
-                damageCity: this.mainStore.order.policy.damageCity,
-                isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
-                phoneNumber: this.mainStore.order.customer.phoneNumber,
-                email: this.mainStore.order.customer.emailAddress,
-                isPolicyNumberDisabled: this.mainStore.order.policy.isPolicyNumberDisabled
-            };
-        }
-    }
+    getWelcomePageModelFromStore() {
+      return {
+        policyNumber: this.mainStore.order.policy.policyNumber,
+        policyZipCode: this.mainStore.order.policy.policyZipCode,
+        dateOfLoss: this.mainStore.order.policy.dateOfLoss,
+        damageCause: this.mainStore.order.policy.damageCause,
+        damageState: this.mainStore.order.policy.damageState,
+        damageCity: this.mainStore.order.policy.damageCity,
+        isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
+        phoneNumber: this.mainStore.order.customer.phoneNumber,
+        email: this.mainStore.order.customer.emailAddress,
+        isPolicyNumberDisabled:
+          this.mainStore.order.policy.isPolicyNumberDisabled,
+      };
+    },
+  },
 };
 </script>
 
-<style lang="scss">
-.page-container-grouped-styles.welcome {
-    height: auto;
+<style lang="scss" scoped>
+.container-fluid {
+    height: 100dvh;
 }
 @-moz-document url-prefix() {
-    // Temporary solution that prevents the Continue button from being hidden in Firefox
-    #welcomeFooter {
-        position: static !important;
-    }
-    // Fixes Firefox styling defect for placeholder text in dropdown fields
-    #welcomeDropdown {
-        .form-select {
-            padding: 0.75rem 1rem;
-        }
+  // Temporary solution that prevents the Continue button from being hidden in Firefox
+  #welcomeFooter {
+    position: static !important;
+  }
+  // Fixes Firefox styling defect for placeholder text in dropdown fields
+  #welcomeDropdown {
+    .form-select {
+      padding: 0.75rem 1rem;
     }
+  }
 }
 </style>
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 357c14d1..4c8b7c67 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -1,35 +1,52 @@
 // Common/Global Styles
 // Use this file for global styles that don't or won't have their own stylesheet
+html, body {
+    height: 100%;
+}
 body {
     font-size: 16px;
     background-color: #fff;
-    color: #4D5151;
-
+    color: #4d5151;
     .container-fluid {
-        max-width: 576px; //Remove once desktop app is complete
-
-        &.container-shadow {
-            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15); //Use instead of Bootstrap's helper
-        }
-
-        &.make-tall {
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-
         .prevent-squish {
             overflow-x: unset;
         }
+        &.page-container-grouped-styles {
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        // Set max-width on columns to prevent overly-wide
+        // components on extra wide screens.
+        .col-md-6 {
+            max-width: 472px;
+            @include media-breakpoint-up(xl) {
+                max-width: 708px;
+            }
+            .col {
+                max-width: 236px;
+                &.one-list-card-width {
+                    max-width: 472px;
+                    @include media-breakpoint-up(xl) {
+                        max-width: 66.6666666%;
+                    }
+                }
+            }
+        }
+        .col-xl-4 {
+            max-width: 472px;
+            .col {
+                max-width: 100%;
+            }
+        }
+        //END set max-width on columns
     }
-
     .pointer {
         cursor: pointer;
     }
-
     .container,
     .container-fluid {
-        overflow: hidden;
+        overflow-x: hidden;
     }
 
     .sub-container {
@@ -38,7 +55,6 @@ body {
             width: 100%;
             display: flex;
             flex-direction: column;
-            overflow-x: hidden;
         }
     }
 
@@ -50,50 +66,12 @@ body {
         height: 1px;
         overflow: hidden;
     }
-
-    .pac-container {
-        z-index: 10000 !important;
-    }
-
-    .page-container-grouped-styles {
-        @extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
-    }
-
-    //Footer modal backdrop adjustments for positioning
-    .modal-backdrop {
-        left: 50%;
-        transform: translateX(-50%);
-        max-width: 576px;
-
-        &.show {
-            opacity: 0.4;
-        }
-    }
-
-    // Scroll page when modal isn't open
-    .fade-on-route-transition {
-        height: calc(100% - 10px);
-        overflow: auto;
-    }
-
-    // Prevent scroll when modal is open
-    &.modal-open {
-        div.page-container-grouped-styles {
-            overflow: hidden;
-        }
-
-        .fade-on-route-transition {
+}
+.modal-open {
+    .container-fluid {
+        &.page-container-grouped-styles {
             overflow: hidden;
+            height: auto;
         }
     }
-
-    .modal-text {
-        display: inline;
-        color: $blue;
-        cursor: pointer;
-        border: none;
-        font-size: 14px;
-        line-height: 24px;
-        font-weight: 500;
-    }
-}
\ No newline at end of file
+}
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index fc4b50ee..82b6648a 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -180,13 +180,12 @@ $spacers: (
 //Line Height
 
 
-//Grid breakpoints
+//Bootstrap Grid Breakpoints - Use these breakpoints only
 $grid-breakpoints: (
     xs: 0,
-    sm: 576px,
-    md: 838px,
-    lg: 1074px,
-    xl: 1416px,
+    md: 768px,
+    xl: 1200px,
+    xxl: 1440px,
 );
 
 //Shadow