diff --git a/src/constants/dynamic-strings.js b/src/constants/dynamic-strings.js
index b81c0f30..1cff1d26 100644
--- a/src/constants/dynamic-strings.js
+++ b/src/constants/dynamic-strings.js
@@ -2,7 +2,8 @@ const dynamicStrings = {
     GLOBAL_STATE: "globalState",
     CUSTOM: "custom",
     ROUTER_LINK: "routerLink:",
-    MODAL_LINK: "modalLink"
+    MODAL_LINK: "modalLink",
+    TEXT_LINK: 'textLink'
   };
   
   export { dynamicStrings };
\ No newline at end of file
diff --git a/src/digital-components/button-question/button-question.spec.js b/src/digital-components/button-question/button-question.spec.js
index 427faa99..e4a25764 100644
--- a/src/digital-components/button-question/button-question.spec.js
+++ b/src/digital-components/button-question/button-question.spec.js
@@ -2,22 +2,6 @@ import { shallowMount } from "@vue/test-utils";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 
-describe("buttonQuestion.vue", () => {
-    it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
-        // Act
-        const wrapper = shallowMount(buttonQuestion, {
-            propsData: {
-                isOverflowScrollable: true,
-                groupName: "group-name",
-            },
-        });
-
-        // Assert
-        const fieldSet = wrapper.find("fieldset");
-        expect(fieldSet.classes()).toContain("overflow-scroll");
-    });
-});
-
 describe("buttonQuestion.vue", () => {
     it("Fieldset classes should contain row if button type is listCard", () => {
         // Act
diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index b401a6a6..d36cac83 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -4,16 +4,15 @@
         :class="
             isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
         ">
-        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex px-5" 
+        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex"
             :class="{'small-question-text': isSmallQuestionText,'small-question-label-text':isSmallQuestionLabelText}">
             <span class="fw-bold w-100">{{ questionText }}</span>
         </div>
 
         <div class="w-100 d-flex justify-content-center">
             <fieldset
-                class="w-100 px-5"
+                class="w-100"
                 :aria-required="isRequired"
-                :class="getFieldSetClasses"
                 :role="isMultiSelect ? 'group' : 'radiogroup'"
                 :aria-labelledby="formatString(groupName)">
                 <legend
@@ -68,7 +67,7 @@
                 </div>
             </fieldset>
         </div>
-        <div class="row form-test-error mt-1 px-5">
+        <div class="row form-test-error mt-1">
             <error-message
                 :name="formatString(groupName)"
                 v-if="!suppressError"></error-message>
@@ -145,7 +144,7 @@ export default {
 
             const SmallQuestionTextClass = this.isSmallQuestionText
                 ? baseClasses + "small-question-text"
-                : baseClasses;            
+                : baseClasses;
 
             const SmallQuestionLabelText = this.isSmallQuestionLabelText
                 ? SmallQuestionTextClass + "small-question-label-text"
@@ -234,16 +233,6 @@ export default {
 </script>
 
 <style lang="scss">
-.button-question-overflow {
-    height: calc(100vh - 274px);
-
-    .overflow-scroll {
-        // Height will be determined by overall height of content above list
-        height: calc(100% - 400px);
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch;
-    }
-}
 .button-question {
     color: $black;
 
diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js
index 2664accf..e4d8692d 100644
--- a/src/digital-components/modal/modal.spec.js
+++ b/src/digital-components/modal/modal.spec.js
@@ -1,68 +1,255 @@
+jest.mock("vee-validate", () => ({
+    useForm: jest.fn(),
+}));
+
+const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue }));
+const mockMeta = (returnValue) => jest.fn(async () => Promise.resolve(returnValue));
+
 import { shallowMount } from "@vue/test-utils";
-import Modal from "./modal";
+import modal from "./modal";
+import crypto from "crypto";
+import { useForm } from "vee-validate";
+import { Modal } from "bootstrap";
+
+const footerButtonText = "Sample footer text here.";
+const headerText = "Sample header text here.";
+
+global.crypto = crypto;
 
 describe("modal.vue", () => {
-    it("Should display header text when HeaderText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
+    it("Should display modal header text when headerText is defined", async () => {
+        // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+
+        const wrapper = shallowMount(modal, {
             props: {
-                cmsWidgetName: "test",
+                headerText: headerText,
+                footerButtonText: footerButtonText,
             },
             attachTo: document.body,
         });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
+
+        // Assert
+        expect(wrapper.html()).toEqual(expect.stringContaining(headerText));
     });
 
-    it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
+    it("Should display footer button text when footerButtonText is defined", async () => {
+        // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+        const wrapper = shallowMount(modal, {
             props: {
-                cmsWidgetName: "test",
+                footerButtonText: footerButtonText,
             },
             attachTo: document.body,
         });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"]));
+
+        // Assert
+        expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText));
     });
 
-    it("Should insert image url when Image is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
+    it("Should emit 'footer-button-event' if the form is valid", async () => {
+        // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
             props: {
-                cmsWidgetName: "test",
+                footerButtonText: footerButtonText,
+                headerText: headerText,
             },
             attachTo: document.body,
         });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"]));
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Act
+        const buttonMain = wrapper.findComponent({ ref: "modalButtonMain" });
+        await buttonMain.trigger("click-event");
+
+        // Assert
+        expect(wrapper.emitted("footer-button-event")).toBeTruthy();
     });
 
-    it("Should display body text when BodyText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
+    it("Should not emit 'footer-button-event' if the form is invalid", async () => {
+        // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: false,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(false),
+        });
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
             props: {
-                cmsWidgetName: "test",
+                footerButtonText: footerButtonText,
+                headerText: headerText,
             },
             attachTo: document.body,
         });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Act
+        const buttonMain = wrapper.findComponent({ ref: "modalButtonMain" });
+        await buttonMain.trigger("click-event");
+
+        // Assert
+        expect(wrapper.emitted("footer-button-event")).toBeFalsy();
+    });
+
+    it("Should have a disabled footer button when the form has not been touched", async () => {
+        // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
+            props: {
+                footerButtonText: footerButtonText,
+                headerText: headerText,
+            },
+            attachTo: document.body,
+        });
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Assert
+        expect(wrapper.vm.isFooterButtonDisabled).toBe(true);
+    });
+
+    it("Should have a disabled footer button when the form is invalid", async () => {
+        // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
+            props: {
+                footerButtonText: footerButtonText,
+                headerText: headerText,
+            },
+            attachTo: document.body,
+        });
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Assert
+        expect(wrapper.vm.isFooterButtonDisabled).toBe(true);
+    });
+
+    it("Should call bootstrap Modal method 'show' when calling 'openModal'", async () => {
+        // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+
+        const showMock = jest.spyOn(Modal.prototype, "show");
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
+            props: {
+                footerButtonText: footerButtonText,
+                headerText: headerText,
+            },
+            attachTo: document.body,
+        });
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Act
+        wrapper.vm.openModal();
+
+        // Assert
+        expect(showMock).toHaveBeenCalled();
+    });
+
+    it("Should call bootstrap Modal method 'hide' when calling 'closeModal'", async () => {
+        // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+        const hideMock = jest.spyOn(Modal.prototype, "hide");
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
+            props: {
+                footerButtonText: footerButtonText,
+                headerText: headerText,
+            },
+            attachTo: document.body,
+        });
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Act
+        wrapper.vm.openModal();
+        wrapper.vm.closeModal();
+
+        // Assert
+        expect(hideMock).toHaveBeenCalled();
     });
 });
-
-const mockMixin = {
-    methods: {
-        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-            return mockCmsContent[cmsFieldName];
-        }),
-    },
-};
-
-const mockCmsContent = {
-    HeaderText: "Sample header text here.",
-    SubheaderText: "Sample subheader text here.",
-    Image: "https://www.sampleImage.sample",
-    BodyText: "Sample body text here.",
-    FooterText: "Sample footer text here.",
-};
diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 8d961830..fb06197d 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -2,39 +2,38 @@
     <!-- Modal -->
     <div
         class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
-        :id="cmsWidgetName"
+        v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"
+        :id="modalId"
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
         aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header mb-2 mt-2">
+                    <label
+                        v-if="headerText"
+                        class="modal-title d-flex justify-content-center pb-0 w-100">
+                        {{ headerText }}
+                    </label>
                     <button
+                        ref="closeButton"
                         type="button"
                         class="btn-close"
-                        data-bs-dismiss="modal"
+                        @mousedown="closeModal"
                         aria-label="Close"></button>
                 </div>
-                <div class="modal-body ps-4 pe-4 pt-5 pb-4">
-                    <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
-                    <h5 class="mb-4" v-html="ModalHeadline"></h5>
-                    <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
-                    <p class="mb-0" v-html="ModalBodyText"></p>
-                    <p
-                        class="my-4 caption modal-sub-body"
-                        v-if="ModalSubBodyText"
-                        v-html="ModalSubBodyText"></p>
+                <div class="modal-body ps-5 pe-5 pb-4 pt-0">
+                    <slot></slot>
                 </div>
                 <div class="modal-footer px-5 py-4">
-                    <buttonMain
+                    <modalButtonMain
                         isPrimary
                         class="w-100"
-                        ref="buttonMain"
-                        suppressLoader
-                        :buttonText="ModalCloseButtonText"
-                        @click-event="buttonClick"
-                        data-bs-dismiss="modal" />
+                        ref="modalButtonMain"
+                        loaderColor="white"
+                        :buttonText="footerButtonText"
+                        @click-event="validateAndEmit"
+                        :class="isFooterButtonDisabled && 'form-test-invalid'" />
                 </div>
             </div>
         </div>
@@ -42,46 +41,80 @@
 </template>
 
 <script>
-import buttonMain from "@/ux-components/button-main/button-main";
+import modalButtonMain from "@/ux-components/modal-button-main/modal-button-main";
+import { Modal } from "bootstrap";
+import { useForm } from "vee-validate";
 
 export default {
     name: "modal",
     props: {
-        cmsWidgetName: String,
+        modalId: String,
+        headerText: String,
+        footerButtonText: String,
+        onModalOpenedCallback: {
+            type: Function,
+        },
+        onModalClosedCallback: {
+            type: Function,
+        },
     },
-    computed: {
-        ModalHeadline() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
-        },
-        ModalSubheadertext() {
-            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
-        },
-        ModalBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, "BodyText");
-        },
-        ModalSubBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
-        },
-        ModalImage() {
-            return this.getCmsContent(this.cmsWidgetName, "Image");
-        },
-        ModalCloseButtonText() {
-            return this.getCmsContent(this.cmsWidgetName, "FooterText");
-        },
+    setup(props) {
+        const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
+
+        const { meta, validate, resetForm } = useForm();
+
+        return {
+            modalId,
+            meta,
+            validate,
+            resetForm,
+        };
     },
     methods: {
+        async validateAndEmit() {
+            const validationResult = await this.validate();
+            if (validationResult.valid) {
+                this.$emit("footer-button-event");
+            } else {
+                this.resetButtonStyle();
+            }
+        },
         resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
+            this.$refs.modalButtonMain.resetButtonStyle();
+        },
+        onModalOpened() {
+            this.onModalOpenedCallback?.();
+        },
+        onModalClosed() {
+            this.resetButtonStyle();
+            this.onModalClosedCallback?.();
+        },
+        openModal() {
+            const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
+            modal?.show();
+        },
+        closeModal() {
+            const modal = Modal.getInstance(document.getElementById(this.modalId));
+            modal?.hide();
+        },
+    },
+    computed: {
+        isFooterButtonDisabled() {
+            if (!this.meta.touched) {
+                return !this.meta.valid;
+            }
+            return !this.meta.dirty || !this.meta.valid;
         },
     },
     components: {
-        buttonMain,
+        modalButtonMain,
     },
 };
 </script>
 
 <style lang="scss">
 .modal {
+    overflow: hidden;
     top: auto;
     bottom: 0;
     h5,
@@ -92,9 +125,17 @@ export default {
     .modal-header {
         border-bottom: none;
         .btn-close {
+            position: absolute;
+            right: 1rem;
+            top: 1rem;
             background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
             opacity: 1;
         }
+
+        .modal-title {
+            font-weight: 500;
+            color: $black;
+        }
     }
     &.modal-component {
         .modal-dialog {
@@ -141,4 +182,4 @@ body {
         }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/digital-components/question-chain/question-chain.vue b/src/digital-components/question-chain/question-chain.vue
index c66d4dcd..c7076950 100644
--- a/src/digital-components/question-chain/question-chain.vue
+++ b/src/digital-components/question-chain/question-chain.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-for="(q, i) in questions" :key="i">
+    <div v-for="(q, i) in questions" :key="i" class="questionBlock" >
         <transition appear name="fade" mode="out-in">
             <buttonQuestion
                 v-if="q.answerSelected || q.questionSequence === currentQuestionNum"
@@ -161,3 +161,12 @@ export default {
     },
 };
 </script>
+<style lang="scss">
+
+.questionBlock:not(:nth-of-type(1)){
+    .button-question.radioQuestion >div {
+    margin-top: 0.73rem;
+    }
+}
+
+</style>
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 0472be9c..e29e16fd 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -1,4 +1,4 @@
-import { dynamicStrings } from '@/constants/dynamic-strings';
+5import { dynamicStrings } from '@/constants/dynamic-strings';
 import { useMainStore } from '@/store';
 
 export function fetchCmsContentForPage(issPage) {
@@ -223,7 +223,7 @@ function mapStringToState(str) {
     }
   
     return stringBuilder.trimStart();
-  }
+}
 
 function getStoreValueFromString(str) {
     if (!str) return '';
@@ -419,6 +419,19 @@ export function doesCopyContainTextLink(copy) {
     return copy.includes(dynamicStrings.TEXT_LINK);
 }
 
+export function setupModalLinks(context) {
+  context.$nextTick(() => {
+    const elements = document.getElementsByClassName("modal-text")
+    for(let element of elements){
+      const target = element.getAttribute("modalTarget");
+      if(target)
+      {
+        element.addEventListener("click", () => context.$refs[target].openModal() );
+      }
+    };
+  });
+}
+
 export function doesCopyContainRouterLink(copy) {
     return copy.includes(this.dynamicStrings.ROUTER_LINK);
 }
diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js
index 42b5db66..6efc2491 100644
--- a/src/helpers/unit-test-helper.js
+++ b/src/helpers/unit-test-helper.js
@@ -48,6 +48,8 @@ export function getMountOptions(mockData) {
     mocks.queryStrings = queryStrings;
     mocks.$router = mockData?.router;
     mocks.$route = mockData?.route;
+    mocks.GaActions = GaActions;
+    mocks.pushEventToGA = jest.fn();
     mocks.$loadScript = mockData?.loadScript;
     mocks.prependActionToMethod = jest.fn();
   
diff --git a/src/iss-components/address-questions/address-questions.vue b/src/iss-components/address-questions/address-questions.vue
index 0c811ff9..fa4494aa 100644
--- a/src/iss-components/address-questions/address-questions.vue
+++ b/src/iss-components/address-questions/address-questions.vue
@@ -10,7 +10,7 @@
         <alert
             ref="alertNoMatchWarning"
             v-if="displayNoMatchWarning"
-            class="mb-4"
+            class="mb-4 mt-4"
             cmsWidgetName="AlertNoMatchWarningWidget"
             alertClass="alert-warning"
             v-bind:isDismissible="false" />
diff --git a/src/iss-components/content-group-modal/content-group-modal.spec.js b/src/iss-components/content-group-modal/content-group-modal.spec.js
new file mode 100644
index 00000000..cbdf6e18
--- /dev/null
+++ b/src/iss-components/content-group-modal/content-group-modal.spec.js
@@ -0,0 +1,67 @@
+import { mount } from "@vue/test-utils";
+import contentGroupModal from "./content-group-modal";
+import crypto from "crypto";
+
+global.crypto = crypto;
+
+describe("content-group-modal.vue", () => {
+    it("Should display header text when HeaderText is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
+    });
+
+    it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"]));
+    });
+
+    it("Should insert image url when Image is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"]));
+    });
+
+    it("Should display body text when BodyText is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+    });
+});
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            return mockCmsContent[cmsFieldName];
+        }),
+    },
+};
+
+const mockCmsContent = {
+    HeaderText: "Sample header text here.",
+    SubheaderText: "Sample subheader text here.",
+    Image: "https://www.sampleImage.sample",
+    BodyText: "Sample body text here.",
+    FooterText: "Sample footer text here.",
+};
diff --git a/src/iss-components/content-group-modal/content-group-modal.vue b/src/iss-components/content-group-modal/content-group-modal.vue
new file mode 100644
index 00000000..d9d9da93
--- /dev/null
+++ b/src/iss-components/content-group-modal/content-group-modal.vue
@@ -0,0 +1,86 @@
+<template>
+    <modal
+        :ref="ModalName"
+        :modalId="ModalName"
+        :footerButtonText="ModalCloseButtonText"
+        @footer-button-event="footerButtonClick">
+        <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
+        <h5 class="mb-4" v-html="ModalHeadline"></h5>
+        <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
+        <p class="mb-0" v-html="ModalBodyText"></p>
+        <p
+            class="my-4 caption modal-sub-body"
+            v-if="ModalSubBodyText"
+            v-html="ModalSubBodyText"></p>
+    </modal>
+</template>
+
+<script>
+import modal from "@/digital-components/modal/modal";
+
+export default {
+    name: "content-group-modal",
+    props: {
+        cmsWidgetName: String,
+    },
+    computed: {
+        ModalName() {
+            return this.cmsWidgetName;
+        },
+        ModalHeadline() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        ModalSubheadertext() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        ModalBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },
+        ModalSubBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
+        },
+        ModalImage() {
+            return this.getCmsContent(this.cmsWidgetName, "Image");
+        },
+        ModalCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+    },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+
+        footerButtonClick() {
+            this.$refs[this.ModalName].closeModal();
+        },
+    },
+    components: {
+        modal,
+    },
+};
+</script>
+
+<style lang="scss">
+.modal {
+    &.modal-component {
+        .modal-dialog {
+            .modal-content {
+                .modal-body {
+                    .modal-sub-body {
+                        color: $gray-600;
+                    }
+                    ul {
+                        margin-bottom: 0;
+                    }
+                    p {
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/iss-components/questions-page-layout/questions-page-layout.vue b/src/iss-components/questions-page-layout/questions-page-layout.vue
index 526d8de4..be67de5b 100644
--- a/src/iss-components/questions-page-layout/questions-page-layout.vue
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@@ -1,34 +1,43 @@
 <template>
     <div :class="`page-container-grouped-styles questions-page`">
-        <loadingModal ref="loadingModal" />
-        <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <div class="fade-on-route-transition sub-container overflow-scroll">
-        <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
-        <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-            <alert
-                ref="alertFewMoreQuestions"
-                cmsWidgetName="alertWidget"
-                class="m-5"
-                alertClass="alert-warning"
-                :manualHeadline="alertFewMoreQuestionsHeader"
-                :manualCopy="alertFewMoreQuestionsCopy"
-                v-bind:isDismissible="false" />
-            <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
-                <questionChain
-                    ref="questionChain"
-                    v-model="selectedAnswers[questionsDatum.answerKey]"
-                    :questionData="questionsDatum.questions"
-                    :index="i"
-                    v-if="showThisQuestionChain(questionsDatum, i)"
-                    :answerKey="questionsDatum.answerKey"
-                    :validationRules="validationRules" />
+        <div class="fade-on-route-transition position-relative">
+            <loadingModal ref="loadingModal" />
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row px-3">
+                        <div class="col">
+                            <div class="select-car-form rounded">
+                                <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                                <alert
+                                ref="alertFewMoreQuestions"
+                                cmsWidgetName="alertWidget"
+                                alertClass="alert-warning"
+                                :manualHeadline="alertFewMoreQuestionsHeader"
+                                :manualCopy="alertFewMoreQuestionsCopy"
+                                v-bind:isDismissible="false" />
+                                <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
+                                    <questionChain
+                                    ref="questionChain"
+                                    v-model="selectedAnswers[questionsDatum.answerKey]"
+                                    :questionData="questionsDatum.questions"
+                                    :index="i"
+                                    v-if="showThisQuestionChain(questionsDatum, i)"
+                                    :answerKey="questionsDatum.answerKey"
+                                    :validationRules="validationRules" />
+                                </div>
+                                <siteFooter
+                                ref="siteFooter"
+                                cmsWidgetName="SiteFooterWidget"
+                                :isForwardActionDisabled="!isMetaValid"
+                                @back-clicked="handleBackButtonAction"
+                                @ForwardClicked="handleForwardButtonAction" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <siteFooter
-                ref="siteFooter"
-                cmsWidgetName="SiteFooterWidget"
-                :isForwardActionDisabled="!isMetaValid"
-                @back-clicked="handleBackButtonAction"
-                @ForwardClicked="handleForwardButtonAction" />
         </div>
     </div>
 </template>
@@ -95,10 +104,6 @@ export default {
 </script>
 
 <style lang="scss">
- .overflow-scroll {
-        height: calc(100% - 180px);
-        overflow-x: hidden !important;
- }
 .questions-page {
     .question-text {
         margin-bottom: 0.5rem;
diff --git a/src/iss-components/site-header/menu-modal/menu-modal.spec.js b/src/iss-components/site-header/menu-modal/menu-modal.spec.js
index 22f598f5..1b1f9aa5 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.spec.js
+++ b/src/iss-components/site-header/menu-modal/menu-modal.spec.js
@@ -24,12 +24,12 @@ describe("menu-modal.vue", () => {
         expect(modalFooter.text()).toContain("Safelite Group");
     });
 
-    it("Should return Terms of use text link text", async () => {
+    it("Should return Terms of service text link text", async () => {
         // Act
         const wrapper = shallowMount(menuModal);
 
         // Expect
-        expect(wrapper.html()).toContain("Terms of use");
+        expect(wrapper.html()).toContain("Terms of service");
     });
 
     it('Should return "Your privacy choices" text link text', async () => {
diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index d4a4657b..214076d0 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@@ -7,20 +7,7 @@
         </button>
     </div>
     <!-- Modal -->
-    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
-        <div class="menu-modal-container">
-            <button
-            class="menu-button"
-            type="button"
-            :class="[isActive ? 'active' : '']"
-            data-bs-toggle="modal"
-            data-bs-target="#footerModal"
-            aria-label="Hamburger Menu (modal window)">
-            <div class="bar1"></div>
-            <div class="bar2"></div>
-            <div class="bar3"></div>
-        </button>
-    </div>
+    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }">
     <div class="modal-dialog modal-fullscreen">
         <div class="modal-content">
             <div class="modal-header visually-hidden">
@@ -29,7 +16,7 @@
             <div class="modal-body d-flex flex-column">
                 <textLink
                 linkType="navigation"
-                text="Terms of use"
+                text="Terms of service"
                 href="//www.safelite.com/terms-of-use"
                 target="_blank" />
                 <textLink
@@ -78,8 +65,8 @@ export default {
         show() {
             this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
             this.isActive = true;
-            document.querySelector('.page-container-grouped-styles').scrollTo({
-                top: 0,  behavior: 'smooth'
+            document.querySelector('.fade-on-route-transition').scrollTo({
+                top: 0,  behavior: 'instant'
             });
         },
         hide() {
@@ -112,7 +99,7 @@ export default {
             justify-content: center;
             align-items: center;
             padding: 0;//Required to prevent 'squish' on iPhone
-            z-index: 1050;
+            z-index: 1060;
             .bar1,
             .bar2,
             .bar3 {
diff --git a/src/iss-components/steering-text/steering-text.spec.js b/src/iss-components/steering-text/steering-text.spec.js
new file mode 100644
index 00000000..bcce201f
--- /dev/null
+++ b/src/iss-components/steering-text/steering-text.spec.js
@@ -0,0 +1,45 @@
+import { shallowMount } from "@vue/test-utils";
+import steeringTextModal from "./steering-text";
+import { createApp } from 'vue';
+import { createPinia } from "pinia";
+import App from '@/App.vue';
+
+describe("steering-text.vue", () => {
+    test("Should display steering text from CMS for state MA", async () => {
+        // Act
+       
+       const wrapper = shallowMount(steeringTextModal, {
+        mixins: [mockMixin],
+        props: {
+            cmsWidgetName: "MASteeringTextWidget",
+        },
+        attachTo: document.body,
+    });
+    expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+    });
+    
+    
+});
+
+const vueApp = createApp(App);
+const pinia = createPinia();
+vueApp.use(pinia);
+///////////////
+// Constants //
+///////////////
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            return mockCmsContent[cmsFieldName];
+        }),
+    },
+};
+
+
+const mockCmsContent = {
+    BodyText: "MASteeringText",
+   
+};
+
+
diff --git a/src/iss-components/steering-text/steering-text.vue b/src/iss-components/steering-text/steering-text.vue
new file mode 100644
index 00000000..1906c3f1
--- /dev/null
+++ b/src/iss-components/steering-text/steering-text.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>       
+        <textBlock          
+            cmsWidgetName="MASteeringText"         
+            id="SteeringTextContent"
+        />
+        <div>
+            <p class="small" v-if="isStateMA" v-html="MASteeringText" ></p>
+        </div>  
+       
+    </div>
+   
+</template>
+
+<script>
+import { useMainStore } from "@/store";
+
+ export default{
+    name: "steeringTextModal",    
+    computed: {     
+        MASteeringText() {            
+                return this.getCmsContent("MASteeringText", "BodyText");                
+            },
+        isStateMA()
+            {
+                if (this.mainStore.order.customer.address.state=='MA')
+                {
+                    return true
+                }
+            }
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    }
+ }
+</script>
\ No newline at end of file
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index a9664223..a2c345f3 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -1,60 +1,65 @@
 <template>
-    <Form
-        @submit="onSubmit"
-        @invalid-submit="onInvalidSubmit"
-        ref="theForm"
-        v-slot="{ meta }"
-        autocomplete="off">
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
         <div class="page-container-grouped-styles">
-            <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
-            <div class="fade-on-route-transition sub-container overflow-scroll px-5">
-                <vehicleBanner
-                    class="mb-3"
-                    cmsWidgetName="VehicleBannerWidget"
-                    ref="vehicleBanner"
-                    :displayGenericVehicleImage="false" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
-                <alert
-                    ref="alertVinNotFound"
-                    v-if="displayVinNotFoundAlert"
-                    class="mb-4"
-                    cmsWidgetName="AlertVinNotFoundWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-                <alert
-                    ref="alertMatchedDifferentVehicle"
-                    v-if="displayMatchedDifferentVehicleAlert"
-                    class="mb-4"
-                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
-                    :manualCopy="AlertMatchedDifferentVehicleBody"
-                    alertClass="alert-warning"
-                    v-bind:isDismissible="false" />
-                <alert
-                        ref="alertMatchedTwoIdenticalYMMVehicle"
-                        v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
-                        class="mb-4"
-                        cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
-                        :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
-                        :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
-                        alertClass="alert-warning"
-                        v-bind:isDismissible="false" />
-                <alert
-                    ref="alertVinLookupsByHomeAddressNotAllowed"
-                    v-if="displayVinLookupByHomeAddressNotAllowedAlert"
-                    class="mb-4"
-                    cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner
+                                    class="mb-3"
+                                    cmsWidgetName="VehicleBannerWidget"
+                                    ref="vehicleBanner"
+                                    :displayGenericVehicleImage="false" />
+                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
+                                    <alert
+                                    ref="alertVinNotFound"
+                                    v-if="displayVinNotFoundAlert"
+                                    class="mb-4 mt-4"
+                                    cmsWidgetName="AlertVinNotFoundWidget"
+                                    alertClass="alert-danger"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedDifferentVehicle"
+                                    v-if="displayMatchedDifferentVehicleAlert"
+                                    class="mb-4 mt-4"
+                                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                                    :manualCopy="AlertMatchedDifferentVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedTwoIdenticalYMMVehicle"
+                                    v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+                                    class="mb-4 mt-4"
+                                    cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+                                    :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
+                                    :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertVinLookupsByHomeAddressNotAllowed"
+                                    v-if="displayVinLookupByHomeAddressNotAllowedAlert"
+                                    class="mb-4 mt-4"
+                                    cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
+                                    alertClass="alert-danger"
+                                    v-bind:isDismissible="false" />
 
-                <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
+                                    <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
 
-                <siteFooter
-                    cmsWidgetName="SiteFooterWidget"
-                    ref="siteFooter"
-                    :isDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @back-clicked="backButtonAction"
-                    :isForwardActionDisabled="!meta.valid" />
+                                    <siteFooter
+                                    cmsWidgetName="SiteFooterWidget"
+                                    ref="siteFooter"
+                                    :isDisabled="!meta.valid"
+                                    @ForwardClicked="forwardButtonAction"
+                                    @back-clicked="backButtonAction"
+                                    :isForwardActionDisabled="!meta.valid" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </Form>
@@ -147,211 +152,203 @@ export default {
             let vehicleInfoToCommit = {};
 
             const vinLookupResponse = useMainStore().lookupVinByAddress ({
-                    licenseLastName: this.customerQuestions.lastName,
-                    licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress,
-                    licenseZip: this.customerQuestions.addressQuestions.zipCode,
-                    licenseState: this.customerQuestions.addressQuestions.state,
-                }
-            );
-
-            // Settle promises and get results
-            const promiseResultMap = [
-                {
-                    resultKey: "vinLookupResponse",
-                    promise: vinLookupResponse,
-                }
-            ];
-
-            const resultMap = await settleAllPromises(promiseResultMap);
-            // If VIN Lookup by address is forbidden by State Restrictions then show an alert
-            if (!resultMap.vinLookupResponse.isStatePermissible) {
-                // State Restrictions forbid lookup by address
-                this.displayVinLookupByHomeAddressNotAllowedAlert = true;
-                this.$refs.siteFooter.disableForwardButton();
-                return this.$refs.siteFooter.removeLoader();
+                licenseLastName: this.customerQuestions.lastName,
+                licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress,
+                licenseZip: this.customerQuestions.addressQuestions.zipCode,
+                licenseState: this.customerQuestions.addressQuestions.state,
             }
+        );
 
-            const carsFound = resultMap.vinLookupResponse.vinVehicles;
-
-            // Handle cases for different amounts of VINS found for the address.
-            if (carsFound.length == 1) {
-                // Single VIN found
-                const carFound = carsFound[0].vehicle;
-
-                this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
-                if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
-                    // Display Alert
-                    this.previouslyEnteredCarId = carFound.carId;
-                    this.customAlertData.vehicleInfo = carFound;
-                    if(this.isTwoIdenticalYMMVehicleFound){
-                        this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
-                        this.forwardButtonCarStyle= carFound.style;
-                    }
-                    else{
-                        this.displayMatchedDifferentVehicleAlert = true;
-                    }
-
-                    this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-                        carFound.carId
-                    );
-
-                    // Update button "Continue with..."
-                    this.$refs.siteFooter.updateButtonText(
-                        `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
-                    );
-                    return this.$refs.siteFooter.removeLoader();
-                }
-
-                // update data
-                vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
-            } else if (carsFound.length > 1) {
-
-                // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
-                const matchingCars = carsFound.filter(
-                    (vin) => vin.vehicle.carId === this.mainStore.order.vehicle.carId
-                );
-
-                if (matchingCars.length === 1) {
-                    vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {
-                        vin: matchingCars[0].vin,
-                    });
-                }
-            } else {
-                // No VINS found.
-                this.displayVinNotFoundAlert = true;
-                this.$refs.siteFooter.disableForwardButton();
-                return this.$refs.siteFooter.removeLoader();
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "vinLookupResponse",
+                promise: vinLookupResponse,
             }
+        ];
 
-            // Save vehicle, customer, service and registration information
-            await useMainStore().saveRegistrationAddressLookup(
-                {
-                    isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
-                    vehicleInfo:
-                        Object.keys(vehicleInfoToCommit).length === 0
-                            ? useMainStore().order.vehicle
-                            : vehicleInfoToCommit,
-                    registrationInfo: {
-                        firstName: this.customerQuestions.firstName,
-                        lastName: this.customerQuestions.lastName,
-                        address: this.customerQuestions.addressQuestions.streetAddress,
-                        city: this.customerQuestions.addressQuestions.city,
-                        state: this.customerQuestions.addressQuestions.state,
-                        zipCode: this.customerQuestions.addressQuestions.zipCode,
-                    },
-                },
-                false
-            );
-
-            return await this.navigateForward(carsFound);
-        },
-        async navigateForward(carsFound) {
-            // Match vehicles found to vehicles in state.
-            const matchingCars = carsFound.filter(
-                (car) => car.vehicle.carId === useMainStore().order.vehicle.carId
-            );
-
-            // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
-            // display vehicle changed alert on that page.
-            if (
-                this.isCarIdDifferent &&
-                !this.isSelectedGlassAvailableForVehicle
-            ) {
-                this.$router.navigate(
-                    this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-                    this.$route,
-                    {},
-                    { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
-                );
-            } else if (matchingCars.length === 1) {
-                await this.navigateForwardWithSingleCarMatch();
-            } else {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
-                    this.$route,
-                    {},
-                    {},
-                    carsFound
-                );
-            }
-        },
-        resetWarningsAndErrors() {
-            this.displayVinNotFoundAlert = false;
-            this.displayMatchedDifferentVehicleAlert = false;
-            this.displayVinLookupByHomeAddressNotAllowedAlert = false;
-            this.$refs.siteFooter.enableForwardAction();
-        },
-    },
-    mounted() {
-        this.attachCustomEvents();
-
-    },
-    computed: {
-        AlertMatchedDifferentVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedDifferentVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-        },
-        AlertMatchedDifferentVehicleBody() {
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-
-            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
-                .replaceAll("{custom:damage}", getDamageString())
-                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
-                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
-        },
-        AlertMatchedTwoIdenticalYMMVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedTwoIdenticalYMMVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-        },
-        AlertMatchedTwoIdenticalYMMVehicleBody() {
-            const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
-            const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
-
-            return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
-                .replaceAll("{custom:damage}", getDamageString())
-                .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
-                .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
-        },
-        isTwoIdenticalYMMVehicleFound(){
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        const resultMap = await settleAllPromises(promiseResultMap);
+        // If VIN Lookup by address is forbidden by State Restrictions then show an alert
+        if (!resultMap.vinLookupResponse.isStatePermissible) {
+            // State Restrictions forbid lookup by address
+            this.displayVinLookupByHomeAddressNotAllowedAlert = true;
+            this.$refs.siteFooter.disableForwardButton();
+            return this.$refs.siteFooter.removeLoader();
         }
-    },
-    watch: {
-        customerQuestions: {
-            handler(newValue) {
-                // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote"
+
+        const carsFound = resultMap.vinLookupResponse.vinVehicles;
+
+        // Handle cases for different amounts of VINS found for the address.
+        if (carsFound.length == 1) {
+            // Single VIN found
+            const carFound = carsFound[0].vehicle;
+
+            this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
+            if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
+                // Display Alert
+                this.previouslyEnteredCarId = carFound.carId;
+                this.customAlertData.vehicleInfo = carFound;
+                if(this.isTwoIdenticalYMMVehicleFound){
+                    this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
+                    this.forwardButtonCarStyle= carFound.style;
+                }
+                else{
+                    this.displayMatchedDifferentVehicleAlert = true;
+                }
+
+                this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+                    carFound.carId
+                );
+
+                // Update button "Continue with..."
                 this.$refs.siteFooter.updateButtonText(
-                    this.getCmsContent("siteFooterWidget", "ForwardButtonText")
+                    `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
                 );
-                this.resetWarningsAndErrors();
+                return this.$refs.siteFooter.removeLoader();
+            }
+
+            // update data
+            vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
+        } else if (carsFound.length > 1) {
+
+            // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
+            const matchingCars = carsFound.filter(
+                (vin) => vin.vehicle.carId === this.mainStore.order.vehicle.carId
+            );
+
+            if (matchingCars.length === 1) {
+                vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {
+                    vin: matchingCars[0].vin,
+                });
+            }
+        } else {
+            // No VINS found.
+            this.displayVinNotFoundAlert = true;
+            this.$refs.siteFooter.disableForwardButton();
+            return this.$refs.siteFooter.removeLoader();
+        }
+
+        // Save vehicle, customer, service and registration information
+        await useMainStore().saveRegistrationAddressLookup(
+            {
+                isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
+                vehicleInfo:
+                Object.keys(vehicleInfoToCommit).length === 0
+                ? useMainStore().order.vehicle
+                : vehicleInfoToCommit,
+                registrationInfo: {
+                    firstName: this.customerQuestions.firstName,
+                    lastName: this.customerQuestions.lastName,
+                    address: this.customerQuestions.addressQuestions.streetAddress,
+                    city: this.customerQuestions.addressQuestions.city,
+                    state: this.customerQuestions.addressQuestions.state,
+                    zipCode: this.customerQuestions.addressQuestions.zipCode,
+                },
             },
-            deep: true,
+            false
+        );
+
+        return await this.navigateForward(carsFound);
+    },
+    async navigateForward(carsFound) {
+        // Match vehicles found to vehicles in state.
+        const matchingCars = carsFound.filter(
+            (car) => car.vehicle.carId === useMainStore().order.vehicle.carId
+        );
+
+        // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
+        // display vehicle changed alert on that page.
+        if (
+            this.isCarIdDifferent &&
+            !this.isSelectedGlassAvailableForVehicle
+        ) {
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                this.$route,
+                {},
+                { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+            );
+        } else if (matchingCars.length === 1) {
+            await this.navigateForwardWithSingleCarMatch();
+        } else {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
+                this.$route,
+                {},
+                {},
+                carsFound
+            );
         }
     },
-    components: {
-        siteHeader,
-        siteFooter,
-        vehicleBanner,
-        siteSubHeader,
-        customerQuestions,
-        textboxQuestion,
-        alert,
-        Form,
+    resetWarningsAndErrors() {
+        this.displayVinNotFoundAlert = false;
+        this.displayMatchedDifferentVehicleAlert = false;
+        this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+        this.$refs.siteFooter.enableForwardAction();
     },
+},
+mounted() {
+    this.attachCustomEvents();
+
+},
+computed: {
+    AlertMatchedDifferentVehicleHeader() {
+        return this.getCmsContent(
+            "AlertMatchedDifferentVehicleWidget",
+            "HeadlineText"
+        ).replaceAll("{custom:damage}", getDamageString());
+    },
+    AlertMatchedDifferentVehicleBody() {
+        const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+        const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
+        return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+        .replaceAll("{custom:damage}", getDamageString())
+        .replaceAll("{custom:vinYmmFound}", vinYmmFound)
+        .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
+    },
+    AlertMatchedTwoIdenticalYMMVehicleHeader() {
+        return this.getCmsContent(
+            "AlertMatchedTwoIdenticalYMMVehicleWidget",
+            "HeadlineText"
+        ).replaceAll("{custom:damage}", getDamageString());
+    },
+    AlertMatchedTwoIdenticalYMMVehicleBody() {
+        const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
+        const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
+
+        return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
+        .replaceAll("{custom:damage}", getDamageString())
+        .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
+        .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
+    },
+    isTwoIdenticalYMMVehicleFound(){
+        const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+        const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+        return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+    }
+},
+watch: {
+    customerQuestions: {
+        handler(newValue) {
+            // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote"
+            this.$refs.siteFooter.updateButtonText(
+                this.getCmsContent("siteFooterWidget", "ForwardButtonText")
+            );
+            this.resetWarningsAndErrors();
+        },
+        deep: true,
+    }
+},
+components: {
+    siteHeader,
+    siteFooter,
+    vehicleBanner,
+    siteSubHeader,
+    customerQuestions,
+    textboxQuestion,
+    alert,
+    Form,
+},
 };
 </script>
-<style lang="scss">
-
-.overflow-scroll {
-    height: calc(100% - 180px);   
-    overflow-X: hidden !important;
-
-}
-</style>
diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
index 42d13c2d..3e9a3ecb 100644
--- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="px-5">
+    <div>
         <alert
             ref="differentVehicleAlert"
             v-if="displayMatchedDifferentVehicleAlert"
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 11c982da..69593ea4 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -3,18 +3,15 @@
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit"
     ref="theForm"
-    v-slot="{ meta }"
-  >
-    <div class="page-container-grouped-styles ">
+    v-slot="{ meta }">
+    <div class="page-container-grouped-styles">
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <vehicleBanner
-        class="mb-3"
-        cmsWidgetName="VehicleBannerWidget"
-        :displayGenericVehicleImage="false"
-      />
-      <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-
-      <div class="px-5 ">
+      <div class="fade-on-route-transition sub-container overflow-scroll px-5">
+        <vehicleBanner
+          class="mb-3"
+          cmsWidgetName="VehicleBannerWidget"
+          :displayGenericVehicleImage="false" />
+        <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
         <alert
           cmsWidgetName="FoundMultipleVehicles"
           ref="alertFoundMultipleVehicles"
@@ -23,27 +20,19 @@
           :manualHeadline="AlertFoundMultipleVehiclesHeader"
           manualCopy=""
           v-bind:isDismissible="false"
-          id="multiple-vehicles-alert"
-        />
-      </div>
-        <div class="overflow-scroll">
-      <addressVehiclesQuestion
-        ref="addressVehiclesQuestion"
-        cmsWidgetName="VehicleConfirmationQuestion"
-        :vehicles="VehiclesForQuestions"
-        :vehicleSelected ="VehicleSelected"
-        validationRules="vehicle-required"
-        v-model="selectedVehicleVin"
-        :isCarIdDifferent="isCarIdDifferent"
-        :displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
-        :displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert"
-      
-      />
-      
-      <div
-        class="alert-provide-vin my-3 px-5"
-        v-if="splitAlertProvideVinBodyForLink.length"
-      >
+          id="multiple-vehicles-alert" />
+        <addressVehiclesQuestion
+          ref="addressVehiclesQuestion"
+          cmsWidgetName="VehicleConfirmationQuestion"
+          :vehicles="VehiclesForQuestions"
+          :vehicleSelected ="VehicleSelected"
+          validationRules="vehicle-required"
+          v-model="selectedVehicleVin"
+          :isCarIdDifferent="isCarIdDifferent"
+          :displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
+          :displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert" />
+      <div class="alert-provide-vin my-3"
+        v-if="splitAlertProvideVinBodyForLink.length">
         <span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
           <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
             <router-link
@@ -51,21 +40,19 @@
                 query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
                 name: 'root',
               }"
-              >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
-            >
+              >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link >
           </span>
           <span v-else class="m-0 text-body" v-html="copy"></span>
         </span>
       </div>
+      <siteFooter
+        cmsWidgetName="SiteFooterWidget"
+        :isForwardActionDisabled="!meta.valid"
+        @backClicked="backButtonAction"
+        @forwardClicked="forwardButtonAction"
+        ref="siteFooter" />
+      </div>
     </div>
-  </div>
-    <siteFooter
-      cmsWidgetName="SiteFooterWidget"
-      :isForwardActionDisabled="!meta.valid"
-      @backClicked="backButtonAction"
-      @forwardClicked="forwardButtonAction"
-      ref="siteFooter"
-    />
   </Form>
 </template>
 
@@ -303,9 +290,9 @@ export default {
 #multiple-vehicles-alert p {
   margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
 }
+
 .overflow-scroll {    
-    height: calc(100% - 432px);   
+    height: calc(100% - 180px);   
     overflow-X: hidden !important;
-   
 }
 </style>
diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue
new file mode 100644
index 00000000..e5b09827
--- /dev/null
+++ b/src/layouts/contact-details/contact-details.vue
@@ -0,0 +1,81 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <div class="container-fluid pb-2">
+                    <p>Placeholder for contact details page</p>
+                    <siteFooter
+                    cmsWidgetName="SiteFooterWidget"
+                    ref="siteFooter"
+                    :isForwardActionDisabled="!meta.valid"
+                    @ForwardClicked="forwardButtonAction" 
+                    @back-clicked="backButtonAction"
+                    />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header';
+import siteFooter from "@/iss-components/site-footer/site-footer";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { Form } from "vee-validate";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
+
+export default {
+    name: "contact-details",
+    mixins: [BaseFormMixin],
+    data() {
+
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
+    async beforeRouteEnter(to, from, next)
+    {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },];
+
+            //use resultMap to populate layout content.
+            let resultMap = await settleAllPromises(promiseResultMap);
+
+            next((vm) => {
+                vm.setCmsContent(resultMap.cmsContent);
+            });
+        },
+        methods:
+        {
+            backButtonAction() {
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+            },
+
+            forwardButtonAction() {
+            },
+
+            navigateForward() {
+            },
+        },
+        components: {
+            siteHeader,
+            siteFooter,
+            Form,
+        },
+    }
+</script>
+<style lang="scss">
+</style>
diff --git a/src/layouts/coverage-statement/coverage-statement.spec.js b/src/layouts/coverage-statement/coverage-statement.spec.js
index 8469daba..6254f006 100644
--- a/src/layouts/coverage-statement/coverage-statement.spec.js
+++ b/src/layouts/coverage-statement/coverage-statement.spec.js
@@ -8,7 +8,7 @@ import { useMainStore } from "@/store";
 import baseMixin from "@/mixins/base-mixin";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import { applicationConfig } from "@/constants/application-config";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 
 jest.mock("@/helpers/damage-helper", () => ({
@@ -20,9 +20,10 @@ jest.mock("@/helpers/layout-helper.js", () => ({
     settleAllPromises: jest.fn(),
 }));
 
-// Mock fetchCmsContentForPage
+// Mock fetchCmsContentForPage, setupModalLinks
 jest.mock("@/helpers/cms-content-helper", () => ({
     fetchCmsContentForPage: jest.fn(),
+    setupModalLinks: jest.fn(),
 }));
 
 describe("coverage-statement.vue...", () => {
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 706fb52a..6a52f045 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -1,48 +1,48 @@
 <template>
-  <Form
-    @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-    v-slot="{ meta }"
-  >
-    <div class="page-container-grouped-styles">
-      <siteHeader
-        cmsWidgetName="SiteHeaderWidget"
-      />
-      <div class="fade-on-route-transition sub-container overflow-scroll  px-5">
-        <textBlock
-            cmsWidgetName="verifyingCoverageStatement"
-            typeStyle="h5"
-            justifyText="center"
-            class="mt-0 mb-4"
-            id="coverage-statement-text-block"
-        />
-        <div>
-          <p
-            v-html="continueWithSchedulingBodyText"
-            class="mt-0 small" >
-          </p>
-        </div>
-        <textBlock
-            cmsWidgetName="whatHappensNextCopy"
-            class="mt-4 mb-2 fw-bold"
-            id="coverage-statement-text-block"
-        />
-        <div>
-          <p class="small"
-            v-html="bodyText" 
-            ref="coverageStatementBodyText">
-          </p>
-        </div>
-        <recalModal cmsWidgetName="RecalModal" />
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="navigateBack"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
+  <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+      <div class="page-container-grouped-styles">
+          <div class="fade-on-route-transition position-relative">
+              <siteHeader cmsWidgetName="SiteHeaderWidget" />
+              <div class="select-car">
+                  <div class="container-fluid pb-2">
+                      <div class="row px-3">
+                          <div class="col">
+                              <div class="select-car-form rounded">
+                                  <textBlock
+                                  cmsWidgetName="verifyingCoverageStatement"
+                                  typeStyle="h5"
+                                  justifyText="center"
+                                  class="mt-0 mb-4"
+                                  id="coverage-statement-text-block"
+                                  />
+                                  <div>
+                                      <p v-html="continueWithSchedulingBodyText" class="mt-0 small" ></p>
+                                  </div>
+                                  <textBlock
+                                  cmsWidgetName="whatHappensNextCopy"
+                                  class="mt-4 mb-2 fw-bold"
+                                  id="coverage-statement-text-block"
+                                  />
+                                  <div>
+                                      <p class="small" v-html="bodyText" ref="coverageStatementBodyText"></p>
+                                  </div>
+                                  
+                                  <steeringText  cmsWidgetName="MASteeringText" ></steeringText>
+                                  <siteFooter
+                                  cmsWidgetName="SiteFooterWidget"
+                                  :isForwardActionDisabled="!meta.valid"
+                                  @backClicked="navigateBack"
+                                  @forwardClicked="forwardButtonAction"
+                                  ref="siteFooter"
+                                  />
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+          </div>
       </div>
-    </div>
+      <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />	
   </Form>
 </template>
 <script>
@@ -55,9 +55,9 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import textBlock from "@/digital-components/text-block/text-block";
 import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
-
+import steeringText from "@/iss-components/steering-text/steering-text.vue";
 // Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { getDamageString } from '@/helpers/damage-helper.js';
 import { useMainStore } from "@/store";
@@ -67,109 +67,109 @@ export default {
   name: 'coverage-statement',
   mixins: [baseFormMixin, vehicleQuestionsMixin],
   components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-    textBlock,
-    recalModal
+      siteFooter,
+      siteHeader,
+      siteSubHeader,
+      Form,
+      textBlock,
+      recalModal,
+      steeringText
+  },
+  mounted() { 
+    setupModalLinks(this);
   },
   computed: {
-    bodyText() {
-      if (useMainStore().order.damage.isRepair) {
-        return this.unverifiedNonADASRepairBodyText;
-      }
-      else {
-        let parts = useMainStore().order.lineItems.glassParts;
+      bodyText() {
+          if (useMainStore().order.damage.isRepair) {
+              return this.unverifiedNonADASRepairBodyText;
+          }
+          else {
+              let parts = useMainStore().order.lineItems.glassParts;
 
-        // if ADAS, display ADASNextSteps
-        if (parts.filter(part => part.requiresRecalibration).length > 0) {
-          return this.unverifiedADASNextStepsBodyText;
-        }
-        // if non-ADAS, display NonADASNextSteps
-        else {
-          return this.unverifiedNonADASNextStepsBodyText;
-        }
-      }
-    },
-    continueWithSchedulingBodyText() {
-      return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
-    },
-    unverifiedADASNextStepsBodyText() {
-      return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
-    },
-    unverifiedNonADASNextStepsBodyText() {
-      return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
-    },
-    unverifiedNonADASRepairBodyText() {
-      return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
-    },
-    damageText() {
-    var damageString = getDamageString();
-    return damageString == "match" ? "" : damageString;
-    },
+              // if ADAS, display ADASNextSteps
+              if (parts.filter(part => part.requiresRecalibration).length > 0) {
+                  return this.unverifiedADASNextStepsBodyText;
+              }
+              // if non-ADAS, display NonADASNextSteps
+              else {
+                  return this.unverifiedNonADASNextStepsBodyText;
+              }
+          }
+      },
+      continueWithSchedulingBodyText() {
+          return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
+      },
+      unverifiedADASNextStepsBodyText() {
+          return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
+      },
+      unverifiedNonADASNextStepsBodyText() {
+          return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
+      },
+      unverifiedNonADASRepairBodyText() {
+          return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
+      },
+      damageText() {
+          var damageString = getDamageString();
+          return damageString == "match" ? "" : damageString;
+      },
   },
   async beforeRouteEnter(to, from, next) {
-    // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+      // Call APIs
+      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: 'cmsContent',
-        promise: cmsContentPromise,
-      },
-    ];
+      // Settle promises and get results
+      const promiseResultMap = [
+          {
+              resultKey: 'cmsContent',
+              promise: cmsContentPromise,
+          },
+      ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+      const resultMap = await settleAllPromises(promiseResultMap);
 
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
+      next((vm) => {
+          vm.setCmsContent(resultMap.cmsContent);
+      });
   },
   methods: {
-    arePagePrerequisitesValid() {
-      if (useMainStore().order.vehicle.vin) {
-        return true;
-      }
-        return false;
-    },
+      arePagePrerequisitesValid() {
+          if (useMainStore().order.vehicle.vin) {
+              return true;
+          }
+          return false;
+      },
 
-    async forwardButtonAction() {
-      return this.navigateForward();
-    },
+      async forwardButtonAction() {
+          return this.navigateForward();
+      },
 
-    navigateForward() {
-      this.$router.navigate(
-        this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT,
-        this.$route
-      );
-    },
+      navigateForward() {
+          this.$router.navigate(
+              this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT,
+              this.$route
+          );
+      },
   },
 };
 </script>
 
 <style lang="scss">
-.overflow-scroll {    
-    height: calc(100% - 168px);   
-    overflow-X: hidden !important;   
-}
 ol {
-    margin-left: -1rem;
-      li {
-          margin-bottom: .5rem;
+  margin-left: -1rem;
+  li {
+      margin-bottom: .5rem;
+      line-height: 1.5rem;
+      a {
           line-height: 1.5rem;
-          a {
-            line-height: 1.5rem;
-            padding: 0;
-          }
+          padding: 0;
       }
+  }
 }
 #coverage-statement-text-block {
-    color: #000000;
+  color: $black;
 }
 p strong {
-    color: #000000;
-    font-weight: 500;
+  color: $black;
+  font-weight: 500;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js b/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
index 3ab73b9a..0f555171 100644
--- a/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
+++ b/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
@@ -1,10 +1,10 @@
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount, mount } from "@vue/test-utils";
 import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal.vue";
 
 describe("modal.vue", () => {
     it("Should display header text when HeaderText is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
@@ -16,7 +16,7 @@ describe("modal.vue", () => {
 
     it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
@@ -28,7 +28,7 @@ describe("modal.vue", () => {
 
     it("Should insert image url when Image is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
@@ -40,7 +40,7 @@ describe("modal.vue", () => {
 
     it("Should display body text when BodyText is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
index aaed71e6..0a360174 100644
--- a/src/layouts/coverage-statement/recal-modal/recal-modal.vue
+++ b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
@@ -1,55 +1,45 @@
 <template>
-    <!-- Modal -->
-    <div
-        class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
-        :id="cmsWidgetName"
-        tabindex="-1"
-        aria-labelledby="ModalComponentLabel"
-        aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button
-                        type="button"
-                        class="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"></button>
-                </div>
-                <div class="modal-body ps-4 pe-4 pt-0 pb-5">
-                    <h5 class="mb-4 text-center" v-html="ModalHeadline"></h5>
-                    <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
-                    <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
-                    <p class="mb-0 small" v-html="ModalBodyText"></p>
-                    <p
-                        class="my-4 caption modal-sub-body"
-                        v-if="ModalSubBodyText"
-                        v-html="ModalSubBodyText"></p>
-                </div>
-                <div class="modal-footer px-5 py-4">
-                    <buttonMain
-                        isPrimary
-                        class="w-100"
-                        ref="buttonMain"
-                        suppressLoader
-                        :buttonText="ModalCloseButtonText"
-                        @click-event="buttonClick"
-                        data-bs-dismiss="modal" />
-                </div>
-            </div>
+    <modal
+        :ref="ModalName"
+        :modalId="ModalName"
+        :footerButtonText="ModalCloseButtonText" 
+        @footer-button-event="closeModal"
+       >
+        <div class="recal-modal-body ps-4 pe-4 pt-0 pb-5">
+            <h5 class="mb-4 text-center" v-html="ModalHeadline"></h5>
+            <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
+            <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
+            <p class="mb-0 small" v-html="ModalBodyText"></p>
+            <p
+                class="my-4 caption modal-sub-body"
+                v-if="ModalSubBodyText"
+                v-html="ModalSubBodyText">
+            </p>
         </div>
-    </div>
+    </modal>
+
 </template>
 
 <script>
-import buttonMain from "@/ux-components/button-main/button-main";
+import modal from "@/digital-components/modal/modal";
 
 export default {
-    name: "modal",
+    name: "recal-modal",
     props: {
         cmsWidgetName: String,
     },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+        closeModal() {
+            this.$refs[this.ModalName].closeModal();
+        },
+    },
     computed: {
+        ModalName() {
+            return this.cmsWidgetName;
+        },
         ModalHeadline() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
@@ -69,77 +59,30 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
     },
-    methods: {
-        resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
-        },
-    },
     components: {
-        buttonMain,
+        modal,
     },
 };
 </script>
 
 <style lang="scss">
-.modal {
-    top: auto;
-    bottom: 0;
-    overflow: hidden;
-    h5,
-    strong,
-    .subheader-text {
-        color: $black;
-    }
-    .modal-header {
-        border-bottom: none;
-        .btn-close {
-            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-            opacity: 1;
+
+    .recal-modal-body {
+        .modal-sub-body {
+            color: $gray-600;
         }
-    }
-    &.modal-component {
-        .modal-dialog {
-            max-width: 576px;
-            margin: 0 auto;
-            .modal-content {
-                margin: 0 auto;
-                box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
-                border-radius: 1.5rem 1.5rem 0 0;
-                .modal-body {
-                    .modal-sub-body {
-                        color: $gray-600;
-                    }
-                    ul {
-                        margin-bottom: 0;
-                    }
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-            }
-            &.modal-dialog-centered {
-                align-items: flex-end;
-                min-height: 100%;
+        ul {
+            margin-bottom: 0;
+        }
+        p {
+            &:last-child {
+                margin-bottom: 0;
             }
         }
-        .modal-footer {
-            border-top: none;
-            background-color: $gray-100;
-            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
-            button {
-                margin: 0;
-            }
+        .subheader-text {
+            color: $black;
         }
     }
-}
-body {
-    .modal-backdrop {
-        height: 100%;
-        &.show {
-            opacity: 0.4;
-        }
-    }
-}
+          
+
 </style>
\ No newline at end of file
diff --git a/src/layouts/entry-page/entry-page.vue b/src/layouts/entry-page/entry-page.vue
index 50493570..198cc3bc 100644
--- a/src/layouts/entry-page/entry-page.vue
+++ b/src/layouts/entry-page/entry-page.vue
@@ -146,11 +146,11 @@
                             break;
 
                         case "returnurl":
-                            this.mainStore.iisConfig.returnURL = value;
+                            this.mainStore.issConfig.returnURL = value;
                             break;
 
                         case "returnurl2":
-                            this.mainStore.iisConfig.returnURL2 = value;
+                            this.mainStore.issConfig.returnURL2 = value;
                             break;
 
                         // Not stored
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 10e558c1..b1c49299 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,67 +1,71 @@
 <template>
-  <Form
-      @submit="onSubmit"
-      @invalid-submit="onInvalidSubmit"
-      v-slot="{ meta }">
-    <div class="page-container-grouped-styles">
-      <siteHeader cms-widget-name="SiteHeaderWidget" />
-      <div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5">
-        <vehicleBanner
-            class="mb-3"
-            cms-widget-name="VehicleBannerWidget"
-            :display-generic-vehicle-image="false" />
-        <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
-        <alert
-          ref="alertVinNotFound"
-          v-if="displayVinNotFoundAlert"
-          class="mb-4"
-          cmsWidgetName="AlertVinNotFoundWidget"
-          alertClass="alert-danger"
-          v-bind:isDismissible="false" />
-        <alert
-          ref="alertMatchedDifferentVehicle"
-          v-if="displayMatchedDifferentVehicleAlert"
-          class="mb-4"
-          cmsWidgetName="AlertMatchedDifferentVehicleWidget"
-          :manualHeadline="AlertMatchedDifferentVehicleHeader"
-          :manualCopy="AlertMatchedDifferentVehicleBody"
-          alertClass="alert-warning"
-          v-bind:isDismissible="false" />
-          <alert
-          ref="alertMatchedTwoIdenticalYMMVehicle"
-          v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
-          class="mb-4"
-          cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
-          :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
-          :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
-          alertClass="alert-warning"
-          v-bind:isDismissible="false" />
-        <textboxQuestion
-          cmsWidgetName="LicensePlateNumberQuestionWidget"
-          v-model="licensePlate"
-          isRequired
-          disableAutoFill
-          id="license-plate-question-wrapper"
-          inputId="license-plate-question"
-          validationRules="license-plate-required" />
-        <dropdownQuestion
-          cmsWidgetName="StateQuestionWidget"
-          v-model="licenseState"
-          ref="state"
-          inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-          :options="stateOptions"
-          disableAutoFill
-          validationRules="state-required"
-          class="mt-4" />
-        <siteFooter
-          :isForwardActionDisabled="!meta.valid"
-          cms-widget-name="SiteFooterWidget"
-          @back-clicked="backButtonAction"
-          @forward-clicked="forwardButtonAction"
-          ref="siteFooter" />
-      </div>
-    </div>
-  </Form>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
+                                    <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
+                                    <alert
+                                    ref="alertVinNotFound"
+                                    v-if="displayVinNotFoundAlert"
+                                    class="mb-4"
+                                    cmsWidgetName="AlertVinNotFoundWidget"
+                                    alertClass="alert-danger"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedDifferentVehicle"
+                                    v-if="displayMatchedDifferentVehicleAlert"
+                                    class="mb-4"
+                                    cmsWidgetName="AlertMatchedDifferentVehicleWidget"
+                                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                                    :manualCopy="AlertMatchedDifferentVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedTwoIdenticalYMMVehicle"
+                                    v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+                                    class="mb-4"
+                                    cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+                                    :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
+                                    :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <textboxQuestion
+                                    cmsWidgetName="LicensePlateNumberQuestionWidget"
+                                    v-model="licensePlate"
+                                    isRequired
+                                    disableAutoFill
+                                    id="license-plate-question-wrapper"
+                                    inputId="license-plate-question"
+                                    validationRules="license-plate-required" />
+                                    <dropdownQuestion
+                                    cmsWidgetName="StateQuestionWidget"
+                                    v-model="licenseState"
+                                    ref="state"
+                                    inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                                    :options="stateOptions"
+                                    disableAutoFill
+                                    validationRules="state-required"
+                                    class="mt-4" />
+                                    <siteFooter
+                                    :isForwardActionDisabled="!meta.valid"
+                                    cms-widget-name="SiteFooterWidget"
+                                    @back-clicked="backButtonAction"
+                                    @forward-clicked="forwardButtonAction"
+                                    ref="siteFooter" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -92,55 +96,55 @@ defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIR
 defineRule("state-required", required(errorMessages.STATE_REQUIRED));
 
 export default {
-  name: 'license-plate-lookup',
-  mixins: [baseFormMixin, vinPagesMixin],
-  async beforeRouteEnter(to, from, next) {
-    // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    name: 'license-plate-lookup',
+    mixins: [baseFormMixin, vinPagesMixin],
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: 'cmsContent',
-        promise: cmsContentPromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise,
+            },
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-    // Call the "next" function to complete the transition to this page.
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  data() {
-    return {
-      activeVehicleLookupAlertType: null,
-      vehicleFromLookup: null,
-      licensePlate: null,
-      licenseState: useMainStore().order.customer.address.state,
-      displayVinNotFoundAlert: false,
-      displayMatchedDifferentVehicleAlert: false,
-      displayMatchedTwoIdenticalYMMVehicleAlert: false,
-      previouslyEnteredCarId: "",
-      isCarIdDifferent: false,
-      customAlertData: {},
-      isSelectedGlassAvailableForVehicle: true,
-      forwardButtonCarStyle:"",
-   };
-  },
-  methods: {
-    arePagePrerequisitesValid() {
-      return this.mainStore.order.vehicle.carId !== null;
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-    loadDefaultsFromStore() {
-      this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
+    data() {
+        return {
+            activeVehicleLookupAlertType: null,
+            vehicleFromLookup: null,
+            licensePlate: null,
+            licenseState: useMainStore().order.customer.address.state,
+            displayVinNotFoundAlert: false,
+            displayMatchedDifferentVehicleAlert: false,
+            displayMatchedTwoIdenticalYMMVehicleAlert: false,
+            previouslyEnteredCarId: "",
+            isCarIdDifferent: false,
+            customAlertData: {},
+            isSelectedGlassAvailableForVehicle: true,
+            forwardButtonCarStyle:"",
+        };
     },
-    backButtonAction() {
-      // route to move backwards
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-    },
-    attachCustomEvents() {
+    methods: {
+        arePagePrerequisitesValid() {
+            return this.mainStore.order.vehicle.carId !== null;
+        },
+        loadDefaultsFromStore() {
+            this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        attachCustomEvents() {
             this.prependActionToMethod(this, this.forwardButtonAction, () => {
                 this.pushEventToGA(
                     this.$route.query[this.queryStrings.ISS_PAGE],
@@ -149,179 +153,174 @@ export default {
                     true
                 );
             });
-    },
-    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-    async forwardButtonAction() {
-      this.resetWarningsAndErrors();
-
-      // Lookup VIN
-      const vinLookupResponse = await useMainStore().lookupVinByPlate(
-          this.licensePlate, this.licenseState);
-
-      // Settle promises and get results
-      const promiseResultMap = [
-        {
-          resultKey: "vinLookupResponse",
-          promise: vinLookupResponse,
         },
-      ];
+        // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+        async forwardButtonAction() {
+            this.resetWarningsAndErrors();
 
-      const resultMap = await settleAllPromises(promiseResultMap);
+            // Lookup VIN
+            const vinLookupResponse = await useMainStore().lookupVinByPlate(
+                this.licensePlate, this.licenseState);
 
-      // No VIN found
-      if (resultMap.vinLookupResponse.error) {
-        this.displayVinNotFoundAlert = true;
-        this.$refs.siteFooter.disableForwardButton();
-        return this.$refs.siteFooter.removeLoader();
-      };
+                // Settle promises and get results
+                const promiseResultMap = [
+                    {
+                        resultKey: "vinLookupResponse",
+                        promise: vinLookupResponse,
+                    },
+                ];
 
-      // Vehicle found from VIN lookup
-      const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
+                const resultMap = await settleAllPromises(promiseResultMap);
 
-      // Check if the CarId has changed
-      this.isCarIdDifferent =
-          vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
-      // Handle changing car
-      if (
-          this.isCarIdDifferent &&
-          vehicleFromLookup.carId !== this.previouslyEnteredCarId
-      ) {
-          // Display Alert
-          this.previouslyEnteredCarId = vehicleFromLookup.carId;
-          this.customAlertData.vehicleInfo = vehicleFromLookup;
+                // No VIN found
+                if (resultMap.vinLookupResponse.error) {
+                    this.displayVinNotFoundAlert = true;
+                    this.$refs.siteFooter.disableForwardButton();
+                    return this.$refs.siteFooter.removeLoader();
+                };
 
-          if(this.isTwoIdenticalYMMVehicleFound){
-            this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
-            this.forwardButtonCarStyle= vehicleFromLookup.style;
-          }
-          else{
-            this.displayMatchedDifferentVehicleAlert = true;
-          }
+                // Vehicle found from VIN lookup
+                const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
 
-          this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-            vehicleFromLookup.carId
-          );
+                // Check if the CarId has changed
+                this.isCarIdDifferent =
+                vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
+                // Handle changing car
+                if (
+                    this.isCarIdDifferent &&
+                    vehicleFromLookup.carId !== this.previouslyEnteredCarId
+                ) {
+                    // Display Alert
+                    this.previouslyEnteredCarId = vehicleFromLookup.carId;
+                    this.customAlertData.vehicleInfo = vehicleFromLookup;
 
-          // Update button "Continue with..."
-          this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
-          return this.$refs.siteFooter.removeLoader();
-      }
+                    if(this.isTwoIdenticalYMMVehicleFound){
+                        this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
+                        this.forwardButtonCarStyle= vehicleFromLookup.style;
+                    }
+                    else{
+                        this.displayMatchedDifferentVehicleAlert = true;
+                    }
 
-      // Save vehicle, license plate, and registration information
-      await useMainStore().saveRegistrationLicensePlateLookup(
-          {
-              isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
-              vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }),
-              registrationInfo: {
-                  licensePlate: this.licensePlate,
-                  state: this.licenseState,
-              },
-          },
-          false
-      );
+                    this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+                        vehicleFromLookup.carId
+                    );
 
-      return await this.navigateForward();
-    },
-    async navigateForward() {
-      // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
-      // display vehicle changed alert on that page.
-      if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-          this.$route,
-          {},
-          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
-        );
-      } else {
-        await this.navigateForwardWithSingleCarMatch();
-      }
-    },
-    resetWarningsAndErrors() {
-      this.displayVinNotFoundAlert = false;
-      this.displayMatchedDifferentVehicleAlert = false;
-    },
-  },
-  mounted() {
-      this.attachCustomEvents();
-      this.loadDefaultsFromStore();
-  },
-  computed: {
-      AlertMatchedDifferentVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedDifferentVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-      },
-      AlertMatchedDifferentVehicleBody() {
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+                    // Update button "Continue with..."
+                    this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
+                    return this.$refs.siteFooter.removeLoader();
+                }
 
-            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+                // Save vehicle, license plate, and registration information
+                await useMainStore().saveRegistrationLicensePlateLookup(
+                    {
+                        isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
+                        vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }),
+                        registrationInfo: {
+                            licensePlate: this.licensePlate,
+                            state: this.licenseState,
+                        },
+                    },
+                    false
+                );
+
+                return await this.navigateForward();
+            },
+            async navigateForward() {
+                // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
+                // display vehicle changed alert on that page.
+                if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
+                    this.$router.navigate(
+                        this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                        this.$route,
+                        {},
+                        { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+                    );
+                } else {
+                    await this.navigateForwardWithSingleCarMatch();
+                }
+            },
+            resetWarningsAndErrors() {
+                this.displayVinNotFoundAlert = false;
+                this.displayMatchedDifferentVehicleAlert = false;
+            },
+        },
+        mounted() {
+            this.attachCustomEvents();
+            this.loadDefaultsFromStore();
+        },
+        computed: {
+            AlertMatchedDifferentVehicleHeader() {
+                return this.getCmsContent(
+                    "AlertMatchedDifferentVehicleWidget",
+                    "HeadlineText"
+                ).replaceAll("{custom:damage}", getDamageString());
+            },
+            AlertMatchedDifferentVehicleBody() {
+                const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+                const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
+                return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
                 .replaceAll("{custom:damage}", getDamageString())
                 .replaceAll("{custom:vinYmmFound}", vinYmmFound)
                 .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
-      },
-      AlertMatchedTwoIdenticalYMMVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedTwoIdenticalYMMVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-      },
-      AlertMatchedTwoIdenticalYMMVehicleBody() {
-            const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
-            const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
+            },
+            AlertMatchedTwoIdenticalYMMVehicleHeader() {
+                return this.getCmsContent(
+                    "AlertMatchedTwoIdenticalYMMVehicleWidget",
+                    "HeadlineText"
+                ).replaceAll("{custom:damage}", getDamageString());
+            },
+            AlertMatchedTwoIdenticalYMMVehicleBody() {
+                const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
+                const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
 
-            return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
+                return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
                 .replaceAll("{custom:damage}", getDamageString())
                 .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
                 .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
-      },
-      isTwoIdenticalYMMVehicleFound(){
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+            },
+            isTwoIdenticalYMMVehicleFound(){
+                const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+                const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+                return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+            },
+            stateOptions: {
+                get: function () {
+                    return states;
+                },
+            },
         },
-      stateOptions: {
-        get: function () {
-            return states;
+        watch: {
+            licensePlate() {
+                this.$refs.siteFooter.updateButtonText(
+                    this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+                );
+            },
+            registrationZipCode() {
+                this.$refs.siteFooter.updateButtonText(
+                    this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+                );
+            },
         },
-    },
-  },
-  watch: {
-      licensePlate() {
-          this.$refs.siteFooter.updateButtonText(
-              this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
-          );
-      },
-      registrationZipCode() {
-          this.$refs.siteFooter.updateButtonText(
-              this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
-          );
-      },
-  },
-  components: {
-    Form,
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    vehicleBanner,
-    textboxQuestion,
-    dropdownQuestion,
-    alert
-  },
-};
-</script>
+        components: {
+            Form,
+            siteFooter,
+            siteHeader,
+            siteSubHeader,
+            vehicleBanner,
+            textboxQuestion,
+            dropdownQuestion,
+            alert
+        },
+    };
+    </script>
 
-<style>
-
- .overflow-scroll {
-        height: calc(100% - 220px);
-        overflow-x: hidden !important;
- }
-#license-plate-question-wrapper .form-test-error {
-  /**
-  Override extra margin-bottom in the error message in TextboxQuestion
-  */
-  margin-bottom: 0 !important;
-}
-</style>
+    <style lang="scss">
+    #license-plate-question-wrapper .form-test-error {
+        /**
+        Override extra margin-bottom in the error message in TextboxQuestion
+        */
+        margin-bottom: 0 !important;
+    }
+    </style>
diff --git a/src/layouts/part-questions/part-questions.spec.js b/src/layouts/part-questions/part-questions.spec.js
index 5e2b7d47..e2ab3bd7 100644
--- a/src/layouts/part-questions/part-questions.spec.js
+++ b/src/layouts/part-questions/part-questions.spec.js
@@ -350,7 +350,7 @@ function setupMocks({
         ],
         route: {
             query: {
-                fmgPage: "part-questions",
+                issPage: "part-questions",
             },
         },
         data() {
diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index 17fea202..1de675b1 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -1,13 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-        <div class="page-container-grouped-styles  ">
-            <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-            <div class="fade-on-route-transition px-5 overflow-scroll">
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
-                <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
-                <div class="row mt-4 ">
-                    <div class="col">
-                        <textboxQuestion
+        <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-4 px-3">
+                        <div class="col">
+                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
+                            <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
+                            <textboxQuestion
                             inputId="firstNameField"
                             cmsWidgetName="PolicyholderFirstNameQuestion"
                             v-model="customerQuestions.firstName"
@@ -15,11 +16,7 @@
                             ref="policyHolderFirstName"
                             disableAutoFill
                             validationRules="first-name-required" />
-                    </div>        
-                </div>
-                <div class="row mt-4 mb-2">
-                    <div class="col">
-                        <textboxQuestion
+                            <textboxQuestion
                             inputId="lastNameField"
                             cmsWidgetName="PolicyholderLastNameQuestion"
                             v-model="customerQuestions.lastName"
@@ -27,15 +24,16 @@
                             ref="policyHolderLastName"
                             disableAutoFill
                             validationRules="last-name-required" />
-                    </div>        
-                </div>
-                <siteFooter
+                        </div>
+                    </div>
+                    <siteFooter
                     cmsWidgetName="SiteFooterWidget"
                     ref="siteFooter"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
                     @back-clicked="backButtonAction"
-                     />
+                    />
+                </div>
             </div>
         </div>
     </Form>
@@ -60,7 +58,7 @@ import { useMainStore } from '@/store';
 //define validation rules
 defineRule("first-name-required", required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
 defineRule("last-name-required", required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
-    
+
 export default {
     name: "policy-holder-details",
     mixins: [BaseFormMixin],
@@ -73,94 +71,90 @@ export default {
         const mainStore = useMainStore();
         return { mainStore };
     },
-    async beforeRouteEnter(to, from, next) 
+    async beforeRouteEnter(to, from, next)
     {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
         // Settle promises and get results
         const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },];
+
+
+            //use resultMap to populate layout content.
+            let resultMap = await settleAllPromises(promiseResultMap);
+
+            next((vm) => {
+                vm.setCmsContent(resultMap.cmsContent);
+            });
+        },
+        methods:
         {
-            resultKey: "cmsContent",
-            promise: cmsContentPromise,
-        },];
+            backButtonAction() {
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+            },
 
-                
-        //use resultMap to populate layout content.
-        let resultMap = await settleAllPromises(promiseResultMap);
+            forwardButtonAction()
+            {
+                this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
+                return this.navigateForward();
+            },
 
-        next((vm) => {
-           vm.setCmsContent(resultMap.cmsContent);
-        });
-    },
-    methods:
+            navigateForward() {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
+                    this.$route
+                );
+            },
+            getPolicyHolderDetailsFromStore() {
+                return {
+                    addressQuestions :
+                    {
+                        streetAddress: this.mainStore.order.customer.address.streetAddress,
+                        streetAddress2: this.mainStore.order.customer.address.streetAddress2,
+                        city: this.mainStore.order.customer.address.city,
+                        state: this.mainStore.order.customer.address.state,
+                        zipCode: this.mainStore.order.customer.address.zipCode,
+                    },
+                    firstName : this.mainStore.order.customer.firstName,
+                    lastName : this.mainStore.order.customer.lastName,
+                }
+            },
+        },
+        components: {
+            siteHeader,
+            siteSubHeader,
+            textboxQuestion,
+            addressQuestions,
+            siteFooter,
+            Form,
+        },
+    }
+    </script>
+    <style lang="scss">
+    .alert.alert-warning
     {
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-        
-        forwardButtonAction()
-        {
-            this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
-            return this.navigateForward();
-        },
+        margin-top: 20px;
+    }
 
-        navigateForward() {            
-            this.$router.navigate(
-                this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
-                this.$route
-            );
-        },
-        getPolicyHolderDetailsFromStore() {
-            return {
-                addressQuestions :
-                {
-                    streetAddress: this.mainStore.order.customer.address.streetAddress,
-                    streetAddress2: this.mainStore.order.customer.address.streetAddress2,
-                    city: this.mainStore.order.customer.address.city,
-                    state: this.mainStore.order.customer.address.state,
-                    zipCode: this.mainStore.order.customer.address.zipCode,
-                },
-                firstName : this.mainStore.order.customer.firstName,
-                lastName : this.mainStore.order.customer.lastName,
-            }
-        },
-    },
-    components: {
-        siteHeader,
-        siteSubHeader,
-        textboxQuestion,
-        addressQuestions,
-        siteFooter,
-        Form,
-    },
-}
-</script>
-<style lang="scss">
-.overflow-scroll {    
-    height: calc(100% - 168px);   
-    overflow-X: hidden !important;   
-}
-.alert.alert-warning
-{
-    margin-top: 20px;
-}
+    #sub-header p {
+        font-size: 16px;
+        line-height: 26px;
+        color: #4D5151;
+    }
 
-#sub-header p {
-    font-size: 16px;
-    line-height: 26px;
-    color: #4D5151;
-}
+    #address-questions-wrapper {
+        margin-top: 24px;
+    }
 
-#address-questions-wrapper {
-    margin-top: 24px;
-}
+    #address-questions-wrapper .alert.heading  {
+        line-height: 24px;
+    }
 
-#address-questions-wrapper .alert.heading  {
-    line-height: 24px;
-}
-
-#address-questions-wrapper .form-test-error {
-    line-height: 24px;
-}
-</style>
\ No newline at end of file
+    #address-questions-wrapper .form-test-error {
+        line-height: 24px;
+    }
+    </style>
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 618a9625..f4064ffa 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -1,43 +1,56 @@
 <template>
-  <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }">
-    <div class="page-container-grouped-styles overflow-auto">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
-      <div class="fade-on-route-transition sub-container make-tall px-5">
-        <div v-html="ProviderPreferenceHeaderText"  class="text-center mt-4 mb-4" ></div>
-        <div
-            v-html="ProviderPreferenceBodyText"
-            class="mt-0" 
-        ></div>
-        <shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" /> 
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <div v-html="ProviderPreferenceHeaderText"  class="text-center mb-5 modal-link" ></div>
+                                    <div
+                                    v-html="ProviderPreferenceBodyText"
+                                    class="mt-0 body-text"
+                                    ></div>
+                                    
+                                    <buttonQuestion
+                                    cmsWidgetName="ServiceLocationQuestion"
+                                    :questionText="questionText"
+                                    :answers="answersFromCms"
+                                    buttonTypeString="listButton"
+                                    isRequired
+                                    v-model="SelectedshopLocation"
+                                    validationRules="questions-required" />
 
-        <buttonQuestion
-            cmsWidgetName="ServiceLocationQuestion"
-            :questionText="questionText"
-            :answers="answersFromCms"
-            buttonTypeString="listButton"
-            isRequired
-            v-model="SelectedshopLocation"
-            validationRules="questions-required" />
-
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="isForwardActionDisabled"
-          @backClicked="backButtonAction"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
-      </div>
-    </div>
-  </Form>
+                                    <siteFooter
+                                    cmsWidgetName="SiteFooterWidget"
+                                    :isForwardActionDisabled="isForwardActionDisabled"
+                                    @backClicked="backButtonAction"
+                                    @forwardClicked="forwardButtonAction"
+                                    ref="siteFooter"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <contentGroupModal cmsWidgetName="ShopPreferenceDrawer"
+                        ref="ShopPreferenceDrawer"
+                    />
+    </Form>
 </template>
 <script>
 // Import Supporting Files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import buttonQuestion from "@/digital-components/button-question/button-question";
+import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal" 
 
 // Import Component
 import baseFormMixin from "@/mixins/base-form-mixin";
@@ -45,80 +58,100 @@ import { Form,defineRule } from "vee-validate";
 import siteFooter from "@/iss-components/site-footer/site-footer.vue";
 import siteHeader from "@/iss-components/site-header/site-header.vue";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
-import shoppreferenceModal from '@/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue';
 
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
 export default {
-  name: "provider-preference",
-  mixins: [baseFormMixin],
-  
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-    shoppreferenceModal,
-    buttonQuestion
-  },
-  data() {
-    return {
-      SelectedshopLocation : null,
-    };
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-    ];
-    const resultMap = await settleAllPromises(promiseResultMap);
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  computed: {
-    isForwardActionDisabled() {
-      return this.SelectedshopLocation === null;
+    name: "provider-preference",
+    mixins: [baseFormMixin],
+
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        Form,
+        buttonQuestion,
+        contentGroupModal
     },
-    ProviderPreferenceHeaderText(){
-      return this.getCmsContent("ProviderPreference", "HeaderText");
+    data() {
+        return {
+            SelectedshopLocation : null,
+        };
     },
-    ProviderPreferenceBodyText(){
-      return this.getCmsContent("ProviderPreference", "BodyText");   
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-    questionText() {
+    computed: {
+        isForwardActionDisabled() {
+            return this.SelectedshopLocation === null;
+        },
+        ProviderPreferenceHeaderText(){
+            return this.getCmsContent("ProviderPreference", "HeaderText");
+        },
+        ProviderPreferenceBodyText(){
+            return this.getCmsContent("ProviderPreference", "BodyText");
+        },
+        questionText() {
             return this.getCmsContent("ServiceLocationQuestion", "QuestionText");
         },
-    answersFromCms() {
+        answersFromCms() {
             return this.getCmsContent("ServiceLocationQuestion", "Answers");
         },
-      },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
     },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            if(this.SelectedshopLocation == "Schedule with Safelite")
+            {
+                this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
+            }
+        },
+        resetDependentState() {},
     },
-    forwardButtonAction() {
-      if(this.SelectedshopLocation == "Schedule with Safelite")
-      {
-        this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
-      }
-    },
-    resetDependentState() {},
-  },
+    mounted() {
+        setupModalLinks(this);
+    }
 };
 </script>
 <style lang="scss">
 #sub-header span{
-color: #000000;
+    color: $black;
 }
-</style>
\ No newline at end of file
+.body-text {
+    color: $darker-gray;
+    p, li {
+        margin-bottom: 0.5rem;
+    }
+}
+.modal-link a{
+    color: $blue-700;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 500;
+}
+.question-text {
+    margin-top: 0;
+    & > span {
+        text-align: left;
+    }
+}
+</style>
diff --git a/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.spec.js b/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.spec.js
deleted file mode 100644
index 21be705f..00000000
--- a/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import shoppreferenceModal from '@/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue';
-
-describe("modal.vue", () => {
-    it("Should display header text when HeaderText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(shoppreferenceModal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: "test",
-            },
-            attachTo: document.body,
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
-    });
-
-    it("Should display body text when BodyText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(shoppreferenceModal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: "test",
-            },
-            attachTo: document.body,
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
-    });
-});
-    const mockMixin = {
-        methods: {
-            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-                return mockCmsContent[cmsFieldName];
-            }),
-        },
-    };
-    
-    const mockCmsContent = {
-        HeaderText: "Sample header text here.",
-        BodyText: "Sample body text here.",
-        FooterText: "Sample footer text here.",
-    };
\ No newline at end of file
diff --git a/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue b/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue
deleted file mode 100644
index 310637a6..00000000
--- a/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-    <!-- Modal -->
-    <div
-        class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
-        :id="cmsWidgetName"
-        tabindex="-1"
-        aria-labelledby="ModalComponentLabel"
-        aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button
-                        type="button"
-                        class="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"></button>
-                </div>
-                <div class="modal-body ps-4 pe-4 pt-4 pb-4">
-                    <h5 class="mb-4 text-center header-text" v-html="ModalHeadline"></h5>
-                    <p class="mb-0 small" v-html="ModalBodyText"></p>
-                </div>
-                <div class="modal-footer px-5 py-4">
-                    <buttonMain
-                        isPrimary
-                        class="w-100"
-                        ref="buttonMain"
-                        suppressLoader
-                        :buttonText="ModalCloseButtonText"
-                        @click-event="buttonClick"
-                        data-bs-dismiss="modal" />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import buttonMain from "@/ux-components/button-main/button-main";
-
-export default {
-    name: "modal",
-    props: {
-        cmsWidgetName: String,
-    },
-    computed: {
-        ModalHeadline() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
-        },
-        ModalBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, "BodyText");
-        },
-        ModalCloseButtonText() {
-            return this.getCmsContent(this.cmsWidgetName, "FooterText");
-        },
-    },
-    methods: {
-        resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
-        },
-    },
-    components: {
-        buttonMain,
-    },
-};
-</script>
-
-<style lang="scss">
-.modal {
-    top: auto;
-    bottom: 0;
-    h5,
-    strong,
-    .header-text{
-        color: #000000;
-        font-weight: 500;
-
-    }
-    .modal-header {
-        border-bottom: none;
-        .btn-close {
-            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-            opacity: 1;
-        }
-    }
-    &.modal-component {
-        .modal-dialog {
-            max-width: 576px;
-            margin: 0 auto;
-            .modal-content {
-                margin: 0 auto;
-                box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
-                border-radius: 1.5rem 1.5rem 0 0;
-                .modal-body {
-                    .modal-sub-body {
-                        color: $gray-600;
-                    }
-                    ul {
-                        margin-bottom: 0;
-                    }
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-            }
-            &.modal-dialog-centered {
-                align-items: flex-end;
-                min-height: 100%;
-            }
-        }
-        .modal-footer {
-            border-top: none;
-            background-color: $gray-100;
-            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
-            button {
-                margin: 0;
-            }
-        }
-    }
-}
-body {
-    .modal-backdrop {
-        height: 100%;
-        &.show {
-            opacity: 0.4;
-        }
-    }
-}
-</style>
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
new file mode 100644
index 00000000..e54d28ce
--- /dev/null
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -0,0 +1,81 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <div class="container-fluid pb-2">
+                    <p>Placeholder for schedule page</p>
+                    <siteFooter
+                    cmsWidgetName="SiteFooterWidget"
+                    ref="siteFooter"
+                    :isForwardActionDisabled="!meta.valid"
+                    @ForwardClicked="forwardButtonAction"
+                    @back-clicked="backButtonAction"
+                    />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header';
+import siteFooter from "@/iss-components/site-footer/site-footer";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { Form } from "vee-validate";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
+
+export default {
+    name: "schedule-page",
+    mixins: [BaseFormMixin],
+    data() {
+
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
+    async beforeRouteEnter(to, from, next)
+    {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },];
+
+            //use resultMap to populate layout content.
+            let resultMap = await settleAllPromises(promiseResultMap);
+
+            next((vm) => {
+                vm.setCmsContent(resultMap.cmsContent);
+            });
+        },
+        methods:
+        {
+            backButtonAction() {
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+            },
+
+            forwardButtonAction() {
+            },
+
+            navigateForward() {
+            },
+        },
+        components: {
+            siteHeader,
+            siteFooter,
+            Form,
+        },
+    }
+</script>
+<style lang="scss">
+</style>
diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
new file mode 100644
index 00000000..7ec04948
--- /dev/null
+++ b/src/layouts/service-location/service-location.spec.js
@@ -0,0 +1,32 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import serviceLocationModal from "@/layouts/service-location/service-location.vue";
+
+describe("navigation", () => {
+    test("if the back button is clicked, navigate back", async () => {
+        // Arrange
+        
+        const { wrapper } = setupMocks({
+        });
+
+        // Act
+        await wrapper.vm.backButtonAction();
+
+        // Assert
+        expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+    });
+});
+
+
+function setupMocks() 
+{    
+    const wrapper = shallowMount(
+        serviceLocationModal,       
+        getMountOptions({
+            router: {
+                navigate: jest.fn(),
+            },       
+        })
+    );
+    return { wrapper };
+}
\ No newline at end of file
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index a3b5247d..36fe02e1 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,71 +1,152 @@
 <template>
-    <div>
-      <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }">
-    <div class="page-container-grouped-styles overflow-auto">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-      <div class="fade-on-route-transition sub-container make-tall px-5">
-        <p>Placeholder for service-location page</p>
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="backButtonAction"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
-      </div>
-    </div>
-  </Form>
-    </div>
-  </template>
-  <script>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">  
+            <siteHeader cmsWidgetName="SiteHeaderWidget" class="siteHeader"/>
+            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" /> 
+            <div class="fade-on-route-transition position-relative px-5 choose-option">
+
+                <buttonQuestion 
+                    cmsWidgetName="ServiceTypeQuestionWidget" 
+                    :questionText="questionText" 
+                    :answers="answersFromCms" 
+                    buttonTypeString="listCard" 
+                    isRequired 
+                    v-model="selectedValues" 
+                    validationRules="selection-required"/>
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <siteFooter
+                                    cmsWidgetName="SiteFooterWidget"
+                                    :isForwardActionDisabled="!meta.valid"
+                                    @backClicked="backButtonAction"
+                                    @forwardClicked="forwardButtonAction"
+                                    ref="siteFooter"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
   // Import Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+
 // Import Component
 import baseFormMixin from "@/mixins/base-form-mixin";
-import { Form } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
 import siteFooter from "@/iss-components/site-footer/site-footer.vue";
 import siteHeader from "@/iss-components/site-header/site-header.vue";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+
+// DEFINE VALIDATION RULES
+defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
 export default {
-  name: "provider-preference",
-  mixins: [baseFormMixin],
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-  },
-  data() {
-    return {};
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-    ];
-    const resultMap = await settleAllPromises(promiseResultMap);
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
+    name: "service-location",
+    mixins: [baseFormMixin],
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        buttonQuestion,
+        Form,
     },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    data() {
+        return {};
+    },
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        // Settle promises and get results
+        const promiseResultMap = [{
+            resultKey: "cmsContent",
+            promise: cmsContentPromise,
+        }, ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
+        },        
+    },
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+             * this.navigationScenarios comes from base-mixin
+             */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        async forwardButtonAction() {},
+        resetDependentState() {},
     },
-    async forwardButtonAction() {},
-    resetDependentState() {},
-  },
 };
-  </script>
\ No newline at end of file
+</script>
+
+<style lang="scss">
+.fade-on-route-transition {
+    margin-bottom: 100px;
+}
+.page-container-grouped-styles {
+    overflow: auto;
+}
+
+.modal-open {
+    .page-container-grouped-styles {
+        overflow: hidden;
+    }
+}
+#sub-header span {
+    color: $black;
+}
+.question-text {
+   & > span {
+        line-height: 1.500rem;
+    }
+}
+.list-card-content p {
+    &:first-of-type {
+    line-height: 1.5rem;
+    }
+    &:not(:nth-of-type(1)){
+    line-height: 1.250rem;
+    }
+}
+.siteHeader{
+    .site-header{
+        margin-bottom: 1.25rem !important;
+    }
+    
+}
+.choose-option{
+        .button-question >div {
+            &:first-of-type {
+        margin-bottom: 0.95rem;
+        line-height: 1.500rem;
+            }
+    }
+}
+.button-question{
+    .row.form-test-error{
+        line-height:1.500rem;
+        padding-left: 0rem !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/service-packages/service-package-question/service-package-question.vue b/src/layouts/service-packages/service-package-question/service-package-question.vue
index ca759639..ede27160 100644
--- a/src/layouts/service-packages/service-package-question/service-package-question.vue
+++ b/src/layouts/service-packages/service-package-question/service-package-question.vue
@@ -10,17 +10,16 @@
 </template>
 
 <script>
-    import buttonQuestion            from '@/digital-components/button-question/button-question';
-    import baseMixin                 from '@/mixins/base-mixin.js';
-    import { processIfStatements }   from '@/helpers/cms-content-helper';
+    import buttonQuestion from '@/digital-components/button-question/button-question';
+    import { processIfStatements } from '@/helpers/cms-content-helper';
     import { damageLocationsSelected as glassLocations } from '@/constants/damage-locations-selected';
-    import servicePackageRadio       from './service-package-radio/service-package-radio';
-    import { partTypeStrings }       from '@/constants/part-type-strings';
-    import { useMainStore }          from '@/store';
+    import servicePackageRadio from './service-package-radio/service-package-radio';
+    import { partTypeStrings } from '@/constants/part-type-strings';
+    import { useMainStore } from '@/store';
 
     const packageNames = {
-        TIER_ONE:   'TierOne',
-        TIER_TWO:   'TierTwo',
+        TIER_ONE: 'TierOne',
+        TIER_TWO: 'TierTwo',
         TIER_THREE: 'TierThree',
     };
     export default {
@@ -52,7 +51,6 @@
         },
         computed: {
             nullSafeAvailableLineItems() {
-                console.log('Available Line Items = ' + this.availableLineItems)
                 return this.availableLineItems ?? [];
             },
             servicePackageAnswers() {
@@ -76,22 +74,22 @@
                     return {};
                 }
                 const modifiedAnswers = cmsAnswersContent.map((answer) => ({
-                        value:               answer.Name,
-                        buttonLabel:         this.getHeaderTextFromCms(answer.cmsWidgetName),
-                        buttonLabelSubCopy:  this.getSubheaderTextFromCms(answer.cmsWidgetName),
-                        buttonBodyCopy:      this.getBodyTextFromCms(answer.cmsWidgetName),
+                        value: answer.Name,
+                        buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
+                        buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
+                        buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName),
                         buttonAuxiliaryCopy: this.getPackagePriceString(answer.Name),
-                        buttonFooterCopy:    this.getFooterTextFromCms(answer.cmsWidgetName)
+                        buttonFooterCopy: this.getFooterTextFromCms(answer.cmsWidgetName)
                     }
                 ));
                 return modifiedAnswers;
             },
             frontWipersApplicableForTierTwo() {
-                const store                   = useMainStore();
+                const store = useMainStore();
                 const frontWipersAreAvailable = this.lineItemsContainsPartType(
                     partTypeStrings.FRONT_WIPER
                 );
-                const isRepair                         = store.order.damage.isRepair;
+                const isRepair = store.order.damage.isRepair;
                 const glassToReplaceContainsWindshield = this.glassToReplaceContainsGlassLocation(
                     glassLocations.WINDSHIELD
                 );
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index 13f67a47..52451d69 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -20,10 +20,10 @@
                            typeStyle="caption"
                            style="margin-bottom: 6rem;"
                            class="mt-2 mx-6" />
-                <!--<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
+                <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                 <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
                 <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
-                <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />-->
+                <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
                 <siteFooter cmsWidgetName="SiteFooterWidget"
                             :isForwardActionDisabled="!meta.valid"
                             @back-clicked="backButtonAction"
@@ -40,6 +40,7 @@
     import siteSubHeader              from '@/iss-components/site-sub-header/site-sub-header';
     import servicePackageQuestion     from './service-package-question/service-package-question';
     import textBlock                  from '@/digital-components/text-block/text-block';
+    import contentGroupModal          from '@/iss-components/content-group-modal/content-group-modal';
     import loadingModal               from '@/iss-components/loading-modal/loading-modal.vue';
     import { settleAllPromises }      from '@/helpers/layout-helper';
     import { useMainStore }           from "@/store";
@@ -142,7 +143,8 @@
             Form, /* eslint-disable-line */
             textBlock,
             servicePackageQuestion,
-            loadingModal
+            loadingModal,
+            contentGroupModal
         }
     };
 </script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 8d525fa7..daf6b9a1 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,58 +1,64 @@
 <template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles vehicle-damage">
-            <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <div class="fade-on-route-transition sub-container overflow-scroll">
-                <alert
-                    ref="vehicleChangeAlert"
-                    v-if="shouldDisplayVehicleChangeAlert"
-                    class="mt-5 mb-0"
-                    cmsWidgetName="VehicleChangeAlert"
-                    alertClass="alert-warning"
-                    :isDismissible="false" />
-                <vehicleBanner
-                    class="mb-3"
-                    cmsWidgetName="VehicleBannerWidget"
-                    :displayGenericVehicleImage="false" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-                <damageLocationQuestion
-                    ref="damageLocation"
-                    cmsWidgetName="DamageLocationQuestion"
-                    v-model="selectedDamageLocations"
-                    groupName="DamageLocationQuestion" />
-                <windshieldOptions
-                    ref="windshieldOptions"
-                    v-model="selectedWindshieldOptions"
-                    :hasRepairReplaceConflict="hasRepairReplaceConflict"
-                    :hasSplitSingleConflict="hasSplitSingleConflict"
-                    :selectedDamageLocations="selectedDamageLocations" />
-                <alert
-                    v-if="hasRepairReplaceConflict"
-                    class="my-5"
-                    cmsWidgetName="HasReplacementConflict"
-                    alertClass="alert-danger"
-                    :isDismissible="false" />
-                <sideDoorOptions
-                    ref="sideDoorOptions"
-                    cmsWidgetName="SideDoorSideQuestion"
-                    groupName="SideDoorSideQuestion"
-                    v-model="sideDoorOptionsData"
-                    v-show="!hasRepairReplaceConflict"
-                    :selectedDamageLocations="selectedDamageLocations" />
-                <replaceOptionsQuestion
-                    ref="backGlassOptions"
-                    cmsWidgetName="RearReplaceOptionsQuestion"
-                    :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-                    v-model="selectedRearReplaceOptions"
-                    groupName="BackGlassReplaceOptionsQuestion"
-                    validationRules="replace-options-required" />
-                <site-footer
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @backClicked="backButtonAction"
-                    @forwardClicked="forwardButtonAction"
-                    ref="siteFooter"
-                />
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <div class="container-fluid pb-2">
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <alert
+                            ref="vehicleChangeAlert"
+                            v-if="shouldDisplayVehicleChangeAlert"
+                            class="mt-5 mb-0"
+                            cmsWidgetName="VehicleChangeAlert"
+                            alertClass="alert-warning"
+                            :isDismissible="false" />
+                            <vehicleBanner
+                            class="mb-3"
+                            cmsWidgetName="VehicleBannerWidget"
+                            :displayGenericVehicleImage="false" />
+                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                            <damageLocationQuestion
+                            ref="damageLocation"
+                            cmsWidgetName="DamageLocationQuestion"
+                            v-model="selectedDamageLocations"
+                            groupName="DamageLocationQuestion" />
+                            <windshieldOptions
+                            ref="windshieldOptions"
+                            v-model="selectedWindshieldOptions"
+                            :hasRepairReplaceConflict="hasRepairReplaceConflict"
+                            :hasSplitSingleConflict="hasSplitSingleConflict"
+                            :selectedDamageLocations="selectedDamageLocations" />
+                            <alert
+                            v-if="hasRepairReplaceConflict"
+                            class="my-5"
+                            cmsWidgetName="HasReplacementConflict"
+                            alertClass="alert-danger"
+                            :isDismissible="false" />
+                            <sideDoorOptions
+                            ref="sideDoorOptions"
+                            cmsWidgetName="SideDoorSideQuestion"
+                            groupName="SideDoorSideQuestion"
+                            v-model="sideDoorOptionsData"
+                            v-show="!hasRepairReplaceConflict"
+                            :selectedDamageLocations="selectedDamageLocations" />
+                            <replaceOptionsQuestion
+                            ref="backGlassOptions"
+                            cmsWidgetName="RearReplaceOptionsQuestion"
+                            :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
+                            v-model="selectedRearReplaceOptions"
+                            groupName="BackGlassReplaceOptionsQuestion"
+                            validationRules="replace-options-required" />
+                            <site-footer
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            @backClicked="backButtonAction"
+                            @forwardClicked="forwardButtonAction"
+                            ref="siteFooter"
+                            />
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </Form>
@@ -207,7 +213,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.SINGLE
                     );
@@ -222,7 +228,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.DRIVER
                     );
@@ -237,7 +243,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.PASSENGER
                     );
@@ -302,147 +308,147 @@ export default {
 
         async forwardButtonAction() {
             await this.mainStore.saveVehicleDamage(this.isWindshieldRepair,
-                    this.selectedGlassToReplace(),
-                    this.selectedWindshieldOptions.selectedWindshieldChipCount);
-            return this.navigateForward();
-        },
+                this.selectedGlassToReplace(),
+                this.selectedWindshieldOptions.selectedWindshieldChipCount);
+                return this.navigateForward();
+            },
 
-        navigateForward() {
-            if (this.mainStore.damage.isRepair) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
-                    this.$route
-                );
-            }
-            else {
-                // If vin already exists, navigate directly to vin-lookup
-                if (this.mainStore.order.vehicle.vin) {
+            navigateForward() {
+                if (this.mainStore.damage.isRepair) {
                     this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
-                        this.$route
-                    );
-                } else {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+                        this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
                         this.$route
                     );
                 }
-            }
-        },
-
-        selectedGlassToReplace() {
-            const selectedGlassToReplace = [];
-            if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
-                    (wsItem) => {
-                        selectedGlassToReplace.push({
-                            glassLocation: damageLocationsSelected.WINDSHIELD,
-                            glassName: wsItem,
-                        });
+                else {
+                    // If vin already exists, navigate directly to vin-lookup
+                    if (this.mainStore.order.vehicle.vin) {
+                        this.$router.navigate(
+                            this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
+                            this.$route
+                        );
+                    } else {
+                        this.$router.navigate(
+                            this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+                            this.$route
+                        );
                     }
-                );
-            }
+                }
+            },
 
-            if (this.isDriverSideReplace) {
-                this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.DRIVER,
-                        glassName: driverItem,
+            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;
+            },
+        },
+        computed: {
+            isWindshieldDamageLocation() {
+                return this.selectedDamageLocations.some((selectedDamages) => {
+                    return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
                 });
-            }
-
-            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,
+            },
+            isSideDoorDamageLocation() {
+                return this.selectedDamageLocations.some((selectedDamages) => {
+                    return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
                 });
-            }
-
-            return selectedGlassToReplace;
-        },
-    },
-    computed: {
-        isWindshieldDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => {
-                return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
-            });
-        },
-        isSideDoorDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => {
-                return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
-            });
-        },
-        isRearWindowDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => {
-                return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
-            });
-        },
-        isWindshieldRepair() {
-            return (
-                this.isWindshieldDamageLocation &&
-                this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+            },
+            isRearWindowDamageLocation() {
+                return this.selectedDamageLocations.some((selectedDamages) => {
+                    return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
+                });
+            },
+            isWindshieldRepair() {
+                return (
+                    this.isWindshieldDamageLocation &&
+                    this.selectedWindshieldOptions.selectedWindshieldDamageType ===
                     damageLocationsSelected.REPAIR
-            );
-        },
-        isDriverSideReplace() {
-            if (!this.isSideDoorDamageLocation) return false;
+                );
+            },
+            isDriverSideReplace() {
+                if (!this.isSideDoorDamageLocation) return false;
 
-            return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => {
-                return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
-            });
-        },
-        isPassengerSideReplace() {
-            if (!this.isSideDoorDamageLocation) return false;
+                return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => {
+                    return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
+                });
+            },
+            isPassengerSideReplace() {
+                if (!this.isSideDoorDamageLocation) return false;
 
-            return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => {
-                return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
-            });
-        },
-        hasRepairReplaceConflict() {
-            return (
-                this.isWindshieldDamageLocation &&
-                this.selectedDamageLocations.length > 1 &&
-                this.isWindshieldRepair
-            );
-        },
-        hasSplitSingleConflict() {
-            if (
-                !this.selectedDamageLocations?.includes("Windshield") ||
-                this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+                return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => {
+                    return 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
-            )
+                    !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
+                )
                 return false;
 
-            return (
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                    (selectedSingleWindshield) => {
-                        return (
-                            selectedSingleWindshield.toUpperCase() ===
-                            damageLocationsSelected.SINGLE.toUpperCase()
-                        );
-                    }
-                ) &&
-                (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                    (selectedDriverWindshield) => {
-                        return (
-                            selectedDriverWindshield.toUpperCase() ===
-                            damageLocationsSelected.DRIVER.toUpperCase()
-                        );
-                    }
-                ) ||
+                return (
+                    this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                        (selectedSingleWindshield) => {
+                            return (
+                                selectedSingleWindshield.toUpperCase() ===
+                                damageLocationsSelected.SINGLE.toUpperCase()
+                            );
+                        }
+                    ) &&
+                    (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                        (selectedDriverWindshield) => {
+                            return (
+                                selectedDriverWindshield.toUpperCase() ===
+                                damageLocationsSelected.DRIVER.toUpperCase()
+                            );
+                        }
+                    ) ||
                     this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
                         (selectedPassengerWindshield) => {
                             return (
@@ -451,31 +457,24 @@ export default {
                             );
                         }
                     ))
-            );
+                );
+            },
+            shouldDisplayVehicleChangeAlert() {
+                return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
+            }
         },
-        shouldDisplayVehicleChangeAlert() {
-            return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
-        }
-    },
 
-    components: {
-        siteHeader,
-        siteFooter,
-        vehicleBanner,
-        siteSubHeader,
-        sideDoorOptions,
-        damageLocationQuestion,
-        windshieldOptions,
-        replaceOptionsQuestion,
-        Form,
-        alert,
-    },
-};
-</script>
-<style lang="scss">
-
-.overflow-scroll {
-    height: calc(100% - 180px);
-    overflow-X: hidden !important;
-}
-</style>
+        components: {
+            siteHeader,
+            siteFooter,
+            vehicleBanner,
+            siteSubHeader,
+            sideDoorOptions,
+            damageLocationQuestion,
+            windshieldOptions,
+            replaceOptionsQuestion,
+            Form,
+            alert,
+        },
+    };
+    </script>
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index 7c5b1ea8..6d30d29e 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -1,36 +1,25 @@
 <template>
-  <Form
-    @submit="onSubmit"
-    @invalid-submit="onInvalidSubmit"
-  >
-    <div class="page-container-grouped-styles vehicle-lookup">
-      <SiteHeader
-        cms-widget-name="SiteHeaderWidget"
-      />
-      <div class="fade-on-route-transition sub-container  overflow-scroll container gx-0">
-        <VehicleBanner
-            class="mb-3"
-            cms-widget-name="VehicleBannerWidget"
-            :display-generic-vehicle-image="false"
-        />
-        <SiteSubHeader
-            cms-widget-name="SiteSubHeaderWidget"
-        />
-        <VinLookupMethods
-          v-model="selectedVinLookupMethod"
-          cms-widget-name="VINLookupMethod"
-          group-name="VinLookupMethods"
-          ref="VinLookupMethods"
-        />
-        <SiteFooter
-          cms-widget-name="SiteFooterWidget"
-          :is-forward-action-disabled="isForwardActionDisabled"
-          @back-clicked="backButtonAction"
-          @forward-clicked="forwardButtonAction"
-        />
-      </div>
-    </div>
-  </Form>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit">
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <VehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
+                                    <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" />
+                                    <VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
+                                    <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -49,78 +38,71 @@ import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import VinLookupMethods from './vin-lookup-methods/vin-lookup-methods.vue';
 
 export default {
-  name: 'vehicle-lookup',
-  mixins: [BaseFormMixin],
-  components: {
-    Form,
-    SiteFooter,
-    SiteHeader,
-    SiteSubHeader,
-    VehicleBanner,
-    VinLookupMethods,
-  },
-  data() {
-    return {
-      selectedVinLookupMethod: null,
-    };
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    name: 'vehicle-lookup',
+    mixins: [BaseFormMixin],
+    components: {
+        Form,
+        SiteFooter,
+        SiteHeader,
+        SiteSubHeader,
+        VehicleBanner,
+        VinLookupMethods,
+    },
+    data() {
+        return {
+            selectedVinLookupMethod: null,
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: 'cmsContent',
-        promise: cmsContentPromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise,
+            },
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-      vm.$refs.VinLookupMethods.initializeComponent();
-    });
-  },
-  computed: {
-    isForwardActionDisabled() {
-      return this.selectedVinLookupMethod === null;
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.VinLookupMethods.initializeComponent();
+        });
     },
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
+    computed: {
+        isForwardActionDisabled() {
+            return this.selectedVinLookupMethod === null;
+        },
     },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            switch (this.selectedVinLookupMethod) {
+                case vinLookupMethodSelections.MANUALVIN:
+                useMainStore().updateVehicleVin(null);
+                this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
+                break;
+                case vinLookupMethodSelections.LICENSEPLATE:
+                this.$router.navigate(this.navigationScenarios.SELECTED_LICENSE_PLATE, this.$route);
+                break;
+                case vinLookupMethodSelections.HOMEADDRESS:
+                this.$router.navigate(this.navigationScenarios.SELECTED_HOME_ADDRESS, this.$route);
+                break;
+                default:
+                break;
+            }
+        },
+        resetDependentState() {},
     },
-    forwardButtonAction() {
-      switch (this.selectedVinLookupMethod) {
-        case vinLookupMethodSelections.MANUALVIN:
-          useMainStore().updateVehicleVin(null);
-          this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
-          break;
-        case vinLookupMethodSelections.LICENSEPLATE:
-          this.$router.navigate(this.navigationScenarios.SELECTED_LICENSE_PLATE, this.$route);
-          break;
-        case vinLookupMethodSelections.HOMEADDRESS:
-          this.$router.navigate(this.navigationScenarios.SELECTED_HOME_ADDRESS, this.$route);
-          break;
-        default:
-          break;
-      }
-    },
-    resetDependentState() {},
-  },
 };
 </script>
-<style lang="scss">
-
-.overflow-scroll {
-    height: calc(100% - 180px);   
-    overflow-X: hidden !important;
-}
-</style>
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 2b91a3a7..2c48f36a 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,51 +1,47 @@
 <template>
-    <div class="page-container-grouped-styles">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <div class="select-car">
-        <div class="select-car-form rounded text-center">
-          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
-          <siteSubHeader
-            cmsWidgetName="SiteSubHeaderWidget"
-            :hasBackButton="true"
-            @click-event="backButtonAction"
-          />
-          <div class="fade-on-route-transition">
-            <makeQuestion
-              class="fade-on-route-transition"
-              v-model="selectedMake"
-              ref="makeQuestion"
-              cmsWidgetName="VehicleMakeQuestion"
-            />
-          </div>
-          <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-            @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+    <div class="page-container-grouped-styles position-relative">
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" />
+                                <makeQuestion class="px-4" v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
 </template>
 
 <script>
-      // Components
-    import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
-    import siteHeader from "@/iss-components/site-header/site-header";
-    import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-    import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-    import siteFooter from "@/iss-components/site-footer/site-footer";
+// Components
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import siteHeader from "@/iss-components/site-header/site-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
+import siteFooter from "@/iss-components/site-footer/site-footer";
 
-      // Supporting files
-    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    import { settleAllPromises } from "@/helpers/layout-helper";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 
-    export default {
-        name: 'vehicle-make',
-        data() {
-            return {
-                selectedMake: null,
-                shouldHideForwardButton: true
-            };
-        },
+export default {
+    name: 'vehicle-make',
+    data() {
+        return {
+            selectedMake: null,
+            shouldHideForwardButton: true
+        };
+    },
 
-        async beforeRouteEnter(to, from, next) {
+    async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
         const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
@@ -53,12 +49,12 @@
         // Settle promises and get results
         const promiseResultMap = [
             {
-            resultKey: "cmsContent",
-            promise: cmsContentPromise,
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
             },
             {
-            resultKey: "makeQuestionInitialData",
-            promise: makeQuestionInitialDataPromise,
+                resultKey: "makeQuestionInitialData",
+                promise: makeQuestionInitialDataPromise,
             },
         ];
 
@@ -71,36 +67,36 @@
                 resultMap.makeQuestionInitialData
             );
         });
-        },
-        methods: {
-          backButtonAction() {
+    },
+    methods: {
+        backButtonAction() {
             this.$router.navigate(
-              this.navigationScenarios.CLICKED_BACK,
-              this.$route
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
             );
-          },
-          arePagePrerequisitesValid() {
+        },
+        arePagePrerequisitesValid() {
             if (this.mainStore.order.vehicle.year){
-              return true;
+                return true;
             }
             return false;
-          },
         },
-        components: {
-            makeQuestion,
-            siteHeader,
-            siteSubHeader,
-            vehicleBanner,
-            siteFooter
-        },
-        watch: {
-          selectedMake(make) {
+    },
+    components: {
+        makeQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter
+    },
+    watch: {
+        selectedMake(make) {
             this.mainStore.updateVehicleMake( make );
             this.$router.navigate(
-              this.navigationScenarios.SELECTED_MAKE,
-              this.$route
+                this.navigationScenarios.SELECTED_MAKE,
+                this.$route
             );
-          },
-        }
-    };
+        },
+    }
+};
 </script>
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index cf34cbbd..4fba014f 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -1,80 +1,80 @@
 <template>
-    <div class="page-container-grouped-styles">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <div class="select-car">
-        <div class="select-car-form rounded text-center">
-          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
-          <siteSubHeader
-            cmsWidgetName="SiteSubHeaderWidget"
-            :hasBackButton="true"
-            :backButtonAccessibleText="backButtonAccessibleText"
-            @click-event="backButtonAction"
-          />
-          <div class="fade-on-route-transition">
-            <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
-          </div>
-          <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-            @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+    <div class="page-container-grouped-styles position-relative">
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
+                                <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" class="px-4" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </template>
+</template>
 
-  <script>
-  // Components
-  import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
-  import siteHeader from "@/iss-components/site-header/site-header";
-  import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-  import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-  import siteFooter from "@/iss-components/site-footer/site-footer";
+<script>
+// Components
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import siteHeader from "@/iss-components/site-header/site-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
+import siteFooter from "@/iss-components/site-footer/site-footer";
 
-  // Supporting files
-  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-  import { settleAllPromises } from "@/helpers/layout-helper";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 
-  export default {
+export default {
     name: "vehicle-model",
     data() {
-      return {
-        selectedModel: null,
-        shouldHideForwardButton: true
-      };
+        return {
+            selectedModel: null,
+            shouldHideForwardButton: true
+        };
     },
     async beforeRouteEnter(to, from, next) {
-      // Call APIs
-      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-      const modelQuestionInitialDataPromise =
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const modelQuestionInitialDataPromise =
         modelQuestion.methods.loadInitialData();
 
-      // Settle promises and get results
-      const promiseResultMap = [
-        {
-          resultKey: "cmsContent",
-          promise: cmsContentPromise,
-        },
-        {
-          resultKey: "modelQuestionInitialData",
-          promise: modelQuestionInitialDataPromise,
-        },
-      ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "modelQuestionInitialData",
+                promise: modelQuestionInitialDataPromise,
+            },
+        ];
 
-      const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-      // Call the "next" function to complete the transition to this page.
-      next((vm) => {
-        vm.setCmsContent(resultMap.cmsContent);
-        vm.$refs.modelQuestion.initializeComponent(
-          resultMap.modelQuestionInitialData
-        );
-      });
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.modelQuestion.initializeComponent(
+                resultMap.modelQuestionInitialData
+            );
+        });
     },
 
     methods: {
         backButtonAction() {
-        // route to move backwards
+            // route to move backwards
             this.$router.navigate(
-            this.navigationScenarios.CLICKED_BACK,
-            this.$route
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
             );
         },
         arePagePrerequisitesValid()
@@ -86,26 +86,26 @@
         },
     },
     computed: {
-      backButtonAccessibleText()
-      {
-        return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
-      }
+        backButtonAccessibleText()
+        {
+            return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
+        }
     },
     watch: {
-      selectedModel(model) {
-        this.mainStore.updateVehicleModel( model );
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_MODEL,
-          this.$route
-        );
-      },
+        selectedModel(model) {
+            this.mainStore.updateVehicleModel( model );
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_MODEL,
+                this.$route
+            );
+        },
     },
     components: {
-      modelQuestion,
-      siteHeader,
-      siteSubHeader,
-      vehicleBanner,
-      siteFooter
+        modelQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter
     },
-  };
-  </script>
+};
+</script>
diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js
index 819ddaa4..43f69c74 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js
@@ -127,31 +127,6 @@ describe("glass-part-question.vue", () => {
         // Assert
         expect(wrapper.vm.selectedPartNumber).toBe("DB12209GTYN");
     });
-
-    test("first is selected if more than one option", async () => {
-        // Arrange
-        featureListData.pageData = {
-            partsOrQuestions: [
-                {
-                    glassName: "Stationary",
-                    glassLocation: "Rear",
-                    parts: [
-                        { partNumber: "DB12209GTYN", color: "Green Tint" },
-                        { partNumber: "DB12209GTYNXXX", color: "Green Tint" },
-                    ],
-                },
-            ],
-        };
-        const { wrapper } = setupMocks(featureListData);
-
-        // Act
-        await wrapper.vm.$nextTick();
-        await wrapper.setData({ selectedTint: "Green Tint" });
-        await wrapper.vm.$nextTick();
-
-        // Assert
-        expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
-    });
  
     const partsForSelectedTintTestCases = [
         [
@@ -259,6 +234,6 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV
     const partsOrQuestions = pageData ?? { partsOrQuestions: [{ glassName: "Stationary", glassLocation: "Rear", parts: [] }] };
     useMainStore().pageData = jest.fn();
     useMainStore().pageData.mockReturnValue(partsOrQuestions);
-    document.querySelector = jest.fn().mockReturnValue({checked: false});
+    document.querySelector = jest.fn().mockReturnValue({clicked: false, click: jest.fn()});
     return { wrapper };
 }
diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
index 123d5652..75609fee 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
@@ -4,7 +4,7 @@
     </div>
     <div class="nested-radio">
         <div class="row my-2">
-            <div class="col mx-1">
+            <div class="col">
                 <buttonQuestion
                     v-model="selectedTint"
                     :answers="tintSelectionOptions"
@@ -17,6 +17,7 @@
                     <div class="row my-2" aria-live="polite">
                         <div class="col">
                             <buttonQuestion
+                                id="glass-part-question"
                                 v-model="selectedPartNumber"
                                 buttonTypeString="radio"
                                 class="radioQuestion"
@@ -180,25 +181,27 @@ export default {
             return tintSourceObject.src;
         },
 
-        AutoSelect() {
-            if(this.partsForSelectedTint?.length > 0)
+        // Reset selections when tint changes for the same glass to ensure proper selection.
+        // Also checks if only a single part is present for the tint.
+        ResetTintAndPartSelections() {
+            this.selectedPartNumber = null;
+            this.AutoSelectIfSinglePart();
+        },
+
+        AutoSelectIfSinglePart() {
+            if (this.partsForSelectedTint?.length > 0) 
             {
                 // Check if only a single part is present for the tint and set the v-model if it is.
                 if (this.partsForSelectedTint?.length == 1) {
                     this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber };
+                    
+                    // //select element with matching partNumber
+                    this.$nextTick(() => {
+                        const radioInput = document.querySelector('input[value=' + this.selectedPartNumber + ']');
+                        // Fire a click event on the input so the field is updated
+                        radioInput?.click();
+                    });
                 }
-                else{
-                    // If selected part isn't in the current list or it's null, select the first part
-                    if(!this.selectedPartNumber || this.partsForSelectedTint.filter(x => x.partNumber == this.selectedPartNumber).length === 0)
-                    {
-                        this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber };
-                    }
-                }
-
-                //select element with matching partNumber
-                this.$nextTick(() => {
-                    document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true;
-                });
             }
         },
         
@@ -206,22 +209,16 @@ export default {
         LoadPreselectedValues() {
             this.$nextTick(() => {
                 // Populate button-question model-value if parts data already exists in store
-                if(this.modelValue)
+                if(this.modelValue !== undefined)
                 {
                     this.selectedTint = this.modelValue.color;
                 }
-                else{
-                    // If one item in list, select it
-                    if (this.tintSelectionOptions?.length == 1) {
-                        this.selectedTint = this.tintSelectionOptions[0].value;
-                    }
-                }
             });              
         },
     },
     watch: {
         selectedTint() {
-            this.AutoSelect();
+            this.AutoSelectIfSinglePart();
         },
     },
 };
@@ -243,4 +240,14 @@ export default {
     color: $black;
     font-weight: $font-weight-bold;
 }
+
+#glass-part-question {
+    span.fw-bold.w-100 {
+        margin-top: 0.5rem;
+        margin-bottom: 0;
+    }
+    div.col.radio-button-container {
+        padding-bottom: 0;
+    }
+}
 </style>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index d65a8cfd..7dfa03f5 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,42 +1,53 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="page-container-grouped-styles vehicle-parts">
-            <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
-            <div class="fade-on-route-transition sub-container overflow-scroll px-5">
-                <vehicleBanner
-                    class="mb-3"
-                    ref="vehicleBanner"
-                    cmsWidgetName="VehicleBannerWidget"
-                    :displayGenericVehicleImage="false" />
-                <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
-                <div class="prevent-squish my-5">
-                    <div class="row">
-                        <div class="col">
-                            <alert
-                                class="rounded border-0 shadow-sm"
-                                alertClass="alert-warning"
-                                cmsWidgetName="AlertWidget"
-                                :isDismissible="false" />
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner
+                                    class="mb-3"
+                                    ref="vehicleBanner"
+                                    cmsWidgetName="VehicleBannerWidget"
+                                    :displayGenericVehicleImage="false" />
+                                    <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
+                                    <div class="prevent-squish my-5">
+                                        <div class="row">
+                                            <div class="col">
+                                                <alert
+                                                class="rounded border-0 shadow-sm"
+                                                alertClass="alert-warning"
+                                                cmsWidgetName="AlertWidget"
+                                                :isDismissible="false"
+                                                id="vehicle-parts-alert" />
+                                            </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
+                                    cmsWidgetName="SiteFooterWidget"
+                                    ref="siteFooter"
+                                    :isForwardActionDisabled="isForwardActionDisabled"
+                                    @backClicked="navigateBack"
+                                    @ForwardClicked="forwardButtonAction" />
+                                </div>
+                            </div>
                         </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
-                    cmsWidgetName="SiteFooterWidget"
-                    ref="siteFooter"
-                    :isForwardActionDisabled="isForwardActionDisabled"
-                    @backClicked="navigateBack"
-                    @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
     </Form>
@@ -79,151 +90,152 @@ export default {
 
             // 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,
-                    })
-                );
-        });
+            .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
+        );
     },
-    data() {
-        return {
-            selectedGlassParts: {},
-            alertWidgetData: Object,
-            alreadyPopulatedPartsData: [],
-        };
+    selectedGlassPartNumbers() {
+        // Compile all selected parts from the page.
+        const numberArray = [];
+        for (let glassPart of Object.values(this.selectedGlassParts)) {
+            if (glassPart?.partNumber) {
+                numberArray.push(glassPart.partNumber);
+            }
+        }
+        return numberArray;
     },
-    computed: {
-        isForwardActionDisabled() {
-            return (
-                this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length
-            );
-        },
-        selectedGlassPartNumbers() {
-            // Compile all selected parts from the page.
-            const numberArray = [];
-            for (let glassPart of Object.values(this.selectedGlassParts)) {
-                if (glassPart?.partNumber) {
-                    numberArray.push(glassPart.partNumber);
-                }
-            }
-            return numberArray;
-        },
-        PartsOrQuestions() {
-            const partsData = this.PartsFromApi;
+    PartsOrQuestions() {
+        const partsData = this.PartsFromApi;
 
-            // Map API result data, to vehicle-parts data structure
-            const mappedData = partsData.partsOrQuestions.map((g) => {
-                return {
-                    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";
-        },
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            // Check if isRepair is populated and if the pageData we need is here (Parts data)
-            return (
-                this.mainStore.damage.isRepair != null &&
-                this.mainStore.pageData(issPageValues.VEHICLE_PARTS) &&
-                Object.keys(this.mainStore.pageData(issPageValues.VEHICLE_PARTS)).length !== 0
-            );
-        },
-        async forwardButtonAction() {
-            const matchedParts = [];
-
-            // Match them to the parts from the API.
-            for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
-                for (let [partKey, partValue] of Object.entries(value.parts)) {
-                    const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
-
-                    const isMatched = this.selectedGlassPartNumbers.some(
-                        (p) => p === currentPart.partNumber
-                    );
-
-                    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");
-            }
-
-            await this.mainStore.resetMoldingAndCapabilityQuestionAnswersIfNeeded(matchedParts);
-
-            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].partNumber;
-                    g.parts.forEach((p) => {
-                        if (p.partNumber === partNumber) {
-                            this.selectedGlassParts[g.glassLocation + "-" + g.glassName] = p;
-                        }
+        // Map API result data, to vehicle-parts data structure
+        const mappedData = partsData.partsOrQuestions.map((g) => {
+            return {
+                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";
+    },
+},
+methods: {
+    arePagePrerequisitesValid() {
+        // Check if isRepair is populated and if the pageData we need is here (Parts data)
+        return (
+            this.mainStore.damage.isRepair != null &&
+            this.mainStore.pageData(issPageValues.VEHICLE_PARTS) &&
+            Object.keys(this.mainStore.pageData(issPageValues.VEHICLE_PARTS)).length !== 0
+        );
+    },
+    async forwardButtonAction() {
+        const matchedParts = [];
+
+        // Match them to the parts from the API.
+        for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
+            for (let [partKey, partValue] of Object.entries(value.parts)) {
+                const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+
+                const isMatched = this.selectedGlassPartNumbers.some(
+                    (p) => p === currentPart.partNumber
+                );
+
+                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");
+        }
+
+        await this.mainStore.resetMoldingAndCapabilityQuestionAnswersIfNeeded(matchedParts);
+
+        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].partNumber;
+                g.parts.forEach((p) => {
+                    if (p.partNumber === partNumber) {
+                        this.selectedGlassParts[g.glassLocation + "-" + g.glassName] = p;
+                    }
                 });
             });
-        },
-    },
-    mounted() {
-        this.LoadInitialPartsData();
-    },
-    components: {
-        Form,
-        glassPartQuestion,
-        siteHeader,
-        vehicleBanner,
-        siteSubHeader,
-        siteFooter,
-        alert,
+        });
     },
+},
+mounted() {
+    this.LoadInitialPartsData();
+},
+components: {
+    Form,
+    glassPartQuestion,
+    siteHeader,
+    vehicleBanner,
+    siteSubHeader,
+    siteFooter,
+    alert,
+},
 };
 </script>
 <style lang="scss">
- .overflow-scroll {
-        height: calc(100% - 180px);
-        overflow-x: hidden !important;
- }
- </style>
+#vehicle-parts-alert {
+    .alert-heading {
+        margin-top: 0.25rem !important;
+    }
+}
+</style>
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 893de9d0..fa10e553 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -1,22 +1,20 @@
 <template>
-    <div class="page-container-grouped-styles">
-        <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <div class="select-car">
-            <div class="select-car-form rounded text-center">
-                <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
-                <siteSubHeader
-                    cmsWidgetName="SiteSubHeaderWidget"
-                    :hasBackButton="true"
-                    :backButtonAccessibleText="backButtonAccessibleText"
-                    @click-event="backButtonAction" />
-                <div class="fade-on-route-transition">
-                    <styleQuestion
-                        v-model="selectedStyle"
-                        ref="styleQuestion"
-                        cmsWidgetName="VehicleStyleQuestion" />
+    <div class="page-container-grouped-styles position-relative">
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
+                                <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" class="px-4" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-                    @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
             </div>
         </div>
     </div>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 10ea7b52..fe9b41fa 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,101 +1,101 @@
 <template>
-    <div class="page-container-grouped-styles">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <div class="select-car">
-        <div class="select-car-form rounded text-center">
-          <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
-          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-          <div class="fade-on-route-transition">
-            <yearQuestion
-              class="fade-on-route-transition"
-              v-model="selectedYear"
-              ref="yearQuestion"
-              cmsWidgetName="VehicleYearQuestion"
-            />
-          </div>
-          <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-            @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+    <div class="page-container-grouped-styles position-relative">
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                                <yearQuestion class="px-4" v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </template>
+</template>
 
-  <script>
-  // Components
-  import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-  import siteHeader from "@/iss-components/site-header/site-header";
-  import siteFooter from "@/iss-components/site-footer/site-footer";
-  import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-  import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
+<script>
+// Components
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+import siteHeader from "@/iss-components/site-header/site-header";
+import siteFooter from "@/iss-components/site-footer/site-footer";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
 
-  // Supporting files
-  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-  import { settleAllPromises } from "@/helpers/layout-helper";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 
-  export default {
+export default {
     name: "vehicle-year",
     data() {
-      return {
-        selectedYear: null,
-        shouldHideForwardButton: true
-      };
+        return {
+            selectedYear: null,
+            shouldHideForwardButton: true
+        };
     },
     computed: {},
 
     async beforeRouteEnter(to, from, next) {
-      // Call APIs
-      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-      const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
 
-      // Settle promises and get results
-      const promiseResultMap = [
-        {
-          resultKey: "cmsContent",
-          promise: cmsContentPromise,
-        },
-        {
-          resultKey: "yearQuestionInitialData",
-          promise: yearQuestionInitialDataPromise,
-        },
-      ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "yearQuestionInitialData",
+                promise: yearQuestionInitialDataPromise,
+            },
+        ];
 
-      let resultMap = await settleAllPromises(promiseResultMap);
+        let resultMap = await settleAllPromises(promiseResultMap);
 
-      // Call the "next" function to complete the transition to this page.
-      next((vm) => {
-        vm.setCmsContent(resultMap.cmsContent);
-        vm.$refs.yearQuestion.initializeComponent(
-          resultMap.yearQuestionInitialData
-        );
-      });
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.yearQuestion.initializeComponent(
+                resultMap.yearQuestionInitialData
+            );
+        });
     },
 
     watch: {
-      selectedYear(year) {
-        const parsedYear = parseInt(year);
-        this.mainStore.updateVehicleYear( parsedYear );
+        selectedYear(year) {
+            const parsedYear = parseInt(year);
+            this.mainStore.updateVehicleYear( parsedYear );
 
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_YEAR,
-          this.$route
-        );
-      },
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_YEAR,
+                this.$route
+            );
+        },
     },
     methods: {
-      arePagePrerequisitesValid() {
-        return true;
-      },
-      backButtonAction() {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-      },
+        },
     },
 
     components: {
-      yearQuestion,
-      siteHeader,
-      siteSubHeader,
-      vehicleBanner,
-      siteFooter
+        yearQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter
     },
-  };
-  </script>
+};
+</script>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 602196f0..8221c7c6 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,46 +1,27 @@
 <template>
-    <Form
-    @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-    v-slot="{ meta }"
-    >
-    <div class="page-container-grouped-styles ">
-        <siteHeader
-        cmsWidgetName="SiteHeaderWidget"
-        />
-        <div class="px-4  overflow-scroll ">
-            <div class="fade-on-route-transition sub-container px-2 mt-5">
-                <vehicleBanner
-                class="mb-3"
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false"
-                />
-                <siteSubHeader
-                cmsWidgetName="SiteSubHeaderWidget"
-                />
-                <vinLookupAlerts
-                :activeAlertType="activeVehicleLookupAlertType"
-                />
-
-          <vinQuestion
-            v-model="vin"
-            :mask="vinMask"
-            :isDisabled="vinPopulatedOnPageLoad"
-          />
-
-                <vinLocationInformation />
-
-                <siteFooter
-                cmsWidgetName="SiteFooterWidget"
-                :isForwardActionDisabled="!meta.valid"
-                @backClicked="backButtonAction"
-                @forwardClicked="forwardButtonAction"
-                ref="siteFooter"
-                />
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                                    <vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
+                                    <vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
+                                    <vinLocationInformation />
+                                    <siteFooter cmsWidgetName="SiteFooterWidget" :isForwardActionDisabled="!meta.valid" @backClicked="backButtonAction" @forwardClicked="forwardButtonAction" ref="siteFooter" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
-</Form>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -80,25 +61,25 @@ export default {
     setup() {
         const mainStore = useMainStore();
 
-    return { mainStore };
-  },
-  data() {
-    return {
-      activeVehicleLookupAlertType: null,
-      needToLookupVehicle: true,
-      vehicleFromLookup: null,
-      vin: this.getVinFromStore(),
-      forwardButtonCarStyle:"",
-      vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
-    };
-  },
-  provide() {
-    return {
-      vehicleFromLookup: computed(() => this.vehicleFromLookup),
-    };
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        return { mainStore };
+    },
+    data() {
+        return {
+            activeVehicleLookupAlertType: null,
+            needToLookupVehicle: true,
+            vehicleFromLookup: null,
+            vin: this.getVinFromStore(),
+            forwardButtonCarStyle:"",
+            vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
+        };
+    },
+    provide() {
+        return {
+            vehicleFromLookup: computed(() => this.vehicleFromLookup),
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
         // Settle promises and get results
         const promiseResultMap = [
@@ -110,51 +91,51 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  computed: {
-    isCarIdDifferentFromTheStore() {
-      return (
-        this.vehicleFromLookup !== null
-        && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
-      );
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-    isTwoIdenticalYMMVehicleFound(){
-      const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
-      const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-      return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+    computed: {
+        isCarIdDifferentFromTheStore() {
+            return (
+                this.vehicleFromLookup !== null
+                && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
+            );
+        },
+        isTwoIdenticalYMMVehicleFound(){
+            const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        },
+        vinMask() {
+            if (this.vinPopulatedOnPageLoad) {
+                this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
+                this.needToLookupVehicle = false;
+                const lastSixChars = this.vin.substring(11, this.vin.length);
+                return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
+            } else {
+                return "XXXXXXXXXXXXXXXXX";
+            }
+        },
     },
-    vinMask() {
-      if (this.vinPopulatedOnPageLoad) {
-        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
-        this.needToLookupVehicle = false;
-        const lastSixChars = this.vin.substring(11, this.vin.length);
-          return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
-      } else {
-          return "XXXXXXXXXXXXXXXXX";
-      }
-    },
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
-    },
-    getVinFromStore() {
-      return this.mainStore.vehicle.vin;
-    },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-    },
-    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-    async forwardButtonAction() {
-      this.resetActiveAlert();
-      // Temp solution to reset the 'disabled' style on the Continue button
-      this.$refs.siteFooter.enableForwardAction();
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        getVinFromStore() {
+            return this.mainStore.vehicle.vin;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+        async forwardButtonAction() {
+            this.resetActiveAlert();
+            // Temp solution to reset the 'disabled' style on the Continue button
+            this.$refs.siteFooter.enableForwardAction();
 
             if (this.needToLookupVehicle) {
                 const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
@@ -174,18 +155,18 @@ export default {
                 this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
             }
 
-      if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
-        if(this.isTwoIdenticalYMMVehicleFound){
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
-          this.forwardButtonCarStyle = this.vehicleFromLookup.style;
-        }
-        else{
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
-        }
-        
-        const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
-        this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
-        this.$refs.siteFooter.removeLoader();
+            if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
+                if(this.isTwoIdenticalYMMVehicleFound){
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
+                    this.forwardButtonCarStyle = this.vehicleFromLookup.style;
+                }
+                else{
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
+                }
+
+                const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
+                this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
+                this.$refs.siteFooter.removeLoader();
 
                 this.needToLookupVehicle = false;
 
@@ -212,18 +193,18 @@ export default {
                 return;
             }
 
-      // save vehicle to store if it hasn't already been saved
-      if (!this.vinPopulatedOnPageLoad) {
-        this.mainStore.updateVehicle(this.vehicleFromLookup);
-      }
+            // save vehicle to store if it hasn't already been saved
+            if (!this.vinPopulatedOnPageLoad) {
+                this.mainStore.updateVehicle(this.vehicleFromLookup);
+            }
 
-      const partsOrQuestionsResponse = await this.getPartsOrQuestions();
-      if (partsOrQuestionsResponse.error) {
-        // To Do: Need requirement on what to do here
-        console.error('Error on retrieving PartsOrQuestions');
-        this.$refs.siteFooter.removeLoader();
-        return;
-      }
+            const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+            if (partsOrQuestionsResponse.error) {
+                // To Do: Need requirement on what to do here
+                console.error('Error on retrieving PartsOrQuestions');
+                this.$refs.siteFooter.removeLoader();
+                return;
+            }
 
             // Comes from vehicleQuestionsMixin.navigateForward()
             await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
@@ -273,11 +254,3 @@ export default {
     },
 };
 </script>
-<style>
-.overflow-scroll {
-    height: calc(100% - 180px);
-    overflow-X: hidden !important;
-}
-
-
-</style>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 82fe74a2..372a3553 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,116 +1,115 @@
 <template>
-<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-
-    <div class="page-container-grouped-styles welcome">
-        <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-        <div class="fade-on-route-transition  overflow-scroll container">
-
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="policyNumberField"
-                        cmsWidgetName="PolicyNumberQuestion"
-                        v-model="welcomePageModel.policyNumber"
-                        isRequired
-                        ref="policyNumber"
-                        disableAutoFill
-                        validationRules="policy-number-required" />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        type="date"
-                        cmsWidgetName="DateOfLossQuestion"
-                        v-model="welcomePageModel.dateOfLoss"
-                        inputId="dateOfLossField"
-                        isRequired
-                        ref="dateOfLoss"
-                        disableAutoFill
-                        :max="new Date().toJSON().slice(0,10)"
-                        :min="'1972-12-01'"
-                        validationRules="loss-date-required"                        
-                />
-                </div>
-            </div>
-            <div class="row px-5">
-                <div class="col px-0">
-                    <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <dropdownQuestion
-                        cmsWidgetName="DamageCauseQuestion"
-                        v-model="welcomePageModel.damageCause"
-                        ref="damageCause"
-                        inputId="damageCauseQuestionField"
-                        :options="DamageCauseOptions"
-                        disableAutoFill
-                        validationRules="damage-option-required"
-                        placeHolderText="Select an option"
-                        id="welcomeDropdown"
-                    />
-                </div>
-            </div>  
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="phoneNumberField"
-                        cmsWidgetName="PhoneNumberQuestion"
-                        v-model="welcomePageModel.phoneNumber"
-                        validationRules="phone-number-required|phone-number-format"
-                        isRequired
-                        ref="phoneNumber"
-                        mask="###-###-####"
-                        disableAutoFill />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="emailField"
-                        cmsWidgetName="EmailAddressQuestion"
-                        v-model="welcomePageModel.email"
-                        ref="email"
-                        validationRules="email-address-required|email-address-format"
-                        isRequired
-                        disableAutoFill />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="damageCityField"
-                        cmsWidgetName="DamageCityQuestion"
-                        v-model="welcomePageModel.damageCity"
-                        isRequired
-                        ref="damageCity"
-                        disableAutoFill
-                        v-if="this.displayDamageCityQuestion"
-                        validationRules="loss-city-required" />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <dropdownQuestion
-                        cmsWidgetName="DamageStateQuestion"
-                        v-model="welcomePageModel.damageState"
-                        ref="state"
-                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-                        :options="stateOptions"
-                        validationRules="loss-state-required"
-                        isRequired
-                        disableAutoFill
-                        v-if="this.displayDamageStateQuestion"
-                        placeHolderText="Select an option"
-                        id="welcomeDropdown"
-                    />
-                </div>
-            </div>
-            <div class="row mt-4">
-                    <buttonQuestion
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles welcome">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
+                <div class="container-fluid pb-2">
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="policyNumberField"
+                            cmsWidgetName="PolicyNumberQuestion"
+                            v-model="welcomePageModel.policyNumber"
+                            isRequired
+                            ref="policyNumber"
+                            disableAutoFill
+                            validationRules="policy-number-required" />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            type="date"
+                            cmsWidgetName="DateOfLossQuestion"
+                            v-model="welcomePageModel.dateOfLoss"
+                            inputId="dateOfLossField"
+                            isRequired
+                            ref="dateOfLoss"
+                            disableAutoFill
+                            :max="new Date().toJSON().slice(0,10)"
+                            :min="'1972-12-01'"
+                            validationRules="loss-date-required"
+                            />
+                        </div>
+                    </div>
+                    <div class="row px-5">
+                        <div class="col px-0">
+                            <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <dropdownQuestion
+                            cmsWidgetName="DamageCauseQuestion"
+                            v-model="welcomePageModel.damageCause"
+                            ref="damageCause"
+                            inputId="damageCauseQuestionField"
+                            :options="DamageCauseOptions"
+                            disableAutoFill
+                            validationRules="damage-option-required"
+                            placeHolderText="Select an option"
+                            id="welcomeDropdown"
+                            />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="phoneNumberField"
+                            cmsWidgetName="PhoneNumberQuestion"
+                            v-model="welcomePageModel.phoneNumber"
+                            validationRules="phone-number-required|phone-number-format"
+                            isRequired
+                            ref="phoneNumber"
+                            mask="###-###-####"
+                            disableAutoFill />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="emailField"
+                            cmsWidgetName="EmailAddressQuestion"
+                            v-model="welcomePageModel.email"
+                            ref="email"
+                            validationRules="email-address-required|email-address-format"
+                            isRequired
+                            disableAutoFill />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="damageCityField"
+                            cmsWidgetName="DamageCityQuestion"
+                            v-model="welcomePageModel.damageCity"
+                            isRequired
+                            ref="damageCity"
+                            disableAutoFill
+                            v-if="this.displayDamageCityQuestion"
+                            validationRules="loss-city-required" />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <dropdownQuestion
+                            cmsWidgetName="DamageStateQuestion"
+                            v-model="welcomePageModel.damageState"
+                            ref="state"
+                            inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                            :options="stateOptions"
+                            validationRules="loss-state-required"
+                            isRequired
+                            disableAutoFill
+                            v-if="this.displayDamageStateQuestion"
+                            placeHolderText="Select an option"
+                            id="welcomeDropdown"
+                            />
+                        </div>
+                    </div>
+                    <div class="row mt-4">
+                        <buttonQuestion
                         class="px-0"
                         cmsWidgetName="GlassOnlyQuestion"
                         v-model="welcomePageModel.isDamageGlassOnly"
@@ -124,237 +123,232 @@
                         ref="glassOnlyDamage"
                         v-if="this.displayGlassOnlyQuestion"
                         disableAutoFill/>
-            </div>
-            <div class="row mt-4 position-sticky top-100" id="welcomeFooter">
-                <div class="col">
-                    <site-footer
-                        cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
-                        @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
+                    </div>
+                    <div class="row mt-4 position-sticky top-100" id="welcomeFooter">
+                        <div class="col">
+                            <site-footer
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            @back-clicked="backButtonAction"
+                            @ForwardClicked="forwardButtonAction" />
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</Form>
+    </Form>
 </template>
 
-    <script>
-    // Components
-    import siteHeader from '@/iss-components/site-header/site-header';
-    import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
-    import siteFooter from "@/iss-components/site-footer/site-footer";
-    import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-    import buttonQuestion from "@/digital-components/button-question/button-question";
-    import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
-    import textBlock from "@/digital-components/text-block/text-block";
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
+import siteFooter from "@/iss-components/site-footer/site-footer";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
+import textBlock from "@/digital-components/text-block/text-block";
 
-    // Supporting files
-    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    import { settleAllPromises } from "@/helpers/layout-helper";
-    import { Form, defineRule } from "vee-validate";
-    import { required, regex } from "@/helpers/validation-rules";
-    import { errorMessages } from "@/constants/error-messages";
-    import BaseFormMixin from '@/mixins/base-form-mixin.js';
-    import { useMainStore } from '@/store';
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { Form, defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
 
-    //define validation rules
-    defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
-    defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
-    defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
-    defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
-    defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
-    defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
-    defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
-    defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
-    defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
+//define validation rules
+defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
+defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
+defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
+defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
+defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
+defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
+defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
 
-    defineRule("email-address-format",
-        regex(
-            /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
-            errorMessages.EMAIL_ADDRESS_FORMAT
-        )
-    );
+defineRule("email-address-format",
+regex(
+    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
+    errorMessages.EMAIL_ADDRESS_FORMAT
+)
+);
 
-    defineRule("phone-number-format",
-        regex(
-            /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
-            errorMessages.PHONE_NUMBER_FORMAT
-        )
-    );
+defineRule("phone-number-format",
+regex(
+    /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
+    errorMessages.PHONE_NUMBER_FORMAT
+)
+);
 
-    export default {
-        name: "welcome-page",
-        mixins: [BaseFormMixin],
-        data() {
-            return {
-                welcomePageModel: this.getWelcomePageModelFromStore()                
-            };            
-        },
-        setup() {
-            const mainStore = useMainStore();
+export default {
+    name: "welcome-page",
+    mixins: [BaseFormMixin],
+    data() {
+        return {
+            welcomePageModel: this.getWelcomePageModelFromStore()
+        };
+    },
+    setup() {
+        const mainStore = useMainStore();
 
-            // Set order account number from the issConfig.
-            mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
+        // Set order account number from the issConfig.
+        mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
 
-            return { mainStore };
-        },
-        async beforeRouteEnter(to, from, next)
-        {
-            // Call APIs
-            const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        return { mainStore };
+    },
+    async beforeRouteEnter(to, from, next)
+    {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-            // Settle promises and get results
-            const promiseResultMap = [
+        // Settle promises and get results
+        const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
-                },
-            ];
+            },
+        ];
 
-            //use resultMap to populate layout content.
-            let resultMap = await settleAllPromises(promiseResultMap);
-           
-            next((vm) => {
-                vm.setCmsContent(resultMap.cmsContent);                
-            });
-        },
-        methods:
-        {
-            async forwardButtonAction() {
-                this.mainStore.updatePolicyData(this.welcomePageModel);
-                return this.navigateForward();
-            },
+        //use resultMap to populate layout content.
+        let resultMap = await settleAllPromises(promiseResultMap);
 
-            navigateForward() {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
-                    this.$route
-                );
-            },
-            getWelcomePageModelFromStore() {
-                return {
-                    policyNumber : this.mainStore.order.policy.policyNumber,
-                    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,
-                }
-            },
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    methods:
+    {
+        async forwardButtonAction() {
+            this.mainStore.updatePolicyData(this.welcomePageModel);
+            return this.navigateForward();
         },
-        computed:{
-            DamageCauseOptions() {
-                const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
-                const damageCauseAnswersObj ={};
-                if(damageCauseAnswers)
-                {
-                   for (let 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");
-            },
-            stateOptions: {
-                get: function () {
-                    return {
-                        AL: "Alabama",
-                        AK: "Alaska",
-                        AZ: "Arizona",
-                        AR: "Arkansas",
-                        CA: "California",
-                        CO: "Colorado",
-                        CT: "Connecticut",
-                        DE: "Delaware",
-                        DC: "District Of Columbia",
-                        FL: "Florida",
-                        GA: "Georgia",
-                        HI: "Hawaii",
-                        ID: "Idaho",
-                        IL: "Illinois",
-                        IN: "Indiana",
-                        IA: "Iowa",
-                        KS: "Kansas",
-                        KY: "Kentucky",
-                        LA: "Louisiana",
-                        ME: "Maine",
-                        MD: "Maryland",
-                        MA: "Massachusetts",
-                        MI: "Michigan",
-                        MN: "Minnesota",
-                        MS: "Mississippi",
-                        MO: "Missouri",
-                        MT: "Montana",
-                        NE: "Nebraska",
-                        NV: "Nevada",
-                        NH: "New Hampshire",
-                        NJ: "New Jersey",
-                        NM: "New Mexico",
-                        NY: "New York",
-                        NC: "North Carolina",
-                        ND: "North Dakota",
-                        OH: "Ohio",
-                        OK: "Oklahoma",
-                        OR: "Oregon",
-                        PA: "Pennsylvania",
-                        RI: "Rhode Island",
-                        SC: "South Carolina",
-                        SD: "South Dakota",
-                        TN: "Tennessee",
-                        TX: "Texas",
-                        UT: "Utah",
-                        VT: "Vermont",
-                        VA: "Virginia",
-                        WA: "Washington",
-                        WV: "West Virginia",
-                        WI: "Wisconsin",
-                        WY: "Wyoming",
-                    };
-                },
-            },
-            displayDamageCityQuestion(){
-                return !!this.getCmsContent("DamageCityQuestion","QuestionText");
-            },
-            displayDamageStateQuestion(){                
-                return !!this.getCmsContent("DamageStateQuestion","QuestionText");
-            },
-            displayGlassOnlyQuestion(){
-                return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
+
+        navigateForward() {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
+                this.$route
+            );
+        },
+        getWelcomePageModelFromStore() {
+            return {
+                policyNumber : this.mainStore.order.policy.policyNumber,
+                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,
             }
         },
-        components: {
-            siteHeader,
-            siteSubHeader,
-            buttonQuestion,
-            textboxQuestion,
-            dropdownQuestion,
-            siteFooter,
-            textBlock,
-            Form,
+    },
+    computed:{
+        DamageCauseOptions() {
+            const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
+            const damageCauseAnswersObj ={};
+            if(damageCauseAnswers)
+            {
+                for (let 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");
+        },
+        stateOptions: {
+            get: function () {
+                return {
+                    AL: "Alabama",
+                    AK: "Alaska",
+                    AZ: "Arizona",
+                    AR: "Arkansas",
+                    CA: "California",
+                    CO: "Colorado",
+                    CT: "Connecticut",
+                    DE: "Delaware",
+                    DC: "District Of Columbia",
+                    FL: "Florida",
+                    GA: "Georgia",
+                    HI: "Hawaii",
+                    ID: "Idaho",
+                    IL: "Illinois",
+                    IN: "Indiana",
+                    IA: "Iowa",
+                    KS: "Kansas",
+                    KY: "Kentucky",
+                    LA: "Louisiana",
+                    ME: "Maine",
+                    MD: "Maryland",
+                    MA: "Massachusetts",
+                    MI: "Michigan",
+                    MN: "Minnesota",
+                    MS: "Mississippi",
+                    MO: "Missouri",
+                    MT: "Montana",
+                    NE: "Nebraska",
+                    NV: "Nevada",
+                    NH: "New Hampshire",
+                    NJ: "New Jersey",
+                    NM: "New Mexico",
+                    NY: "New York",
+                    NC: "North Carolina",
+                    ND: "North Dakota",
+                    OH: "Ohio",
+                    OK: "Oklahoma",
+                    OR: "Oregon",
+                    PA: "Pennsylvania",
+                    RI: "Rhode Island",
+                    SC: "South Carolina",
+                    SD: "South Dakota",
+                    TN: "Tennessee",
+                    TX: "Texas",
+                    UT: "Utah",
+                    VT: "Vermont",
+                    VA: "Virginia",
+                    WA: "Washington",
+                    WV: "West Virginia",
+                    WI: "Wisconsin",
+                    WY: "Wyoming",
+                };
+            },
+        },
+        displayDamageCityQuestion(){
+            return !!this.getCmsContent("DamageCityQuestion","QuestionText");
+        },
+        displayDamageStateQuestion(){
+            return !!this.getCmsContent("DamageStateQuestion","QuestionText");
+        },
+        displayGlassOnlyQuestion(){
+            return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
+        }
+    },
+    components: {
+        siteHeader,
+        siteSubHeader,
+        buttonQuestion,
+        textboxQuestion,
+        dropdownQuestion,
+        siteFooter,
+        textBlock,
+        Form,
+    },
+}
 </script>
 
 <style lang="scss">
-
-.overflow-scroll {    
-    height: calc(100% - 165px);   
-    overflow-X: hidden !important;   
-}
-.my-2
-{
+.my-2 {
     margin-bottom: 0rem !important;
 }
 @-moz-document url-prefix() {
diff --git a/src/router/index.js b/src/router/index.js
index 16ea8cc4..22eab52a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -35,7 +35,7 @@ const routes = [
 
                     await runExperiments(to.query.issPage);
                 }
-                   
+
                 // Process ISS cookie.
                 updateOrCreateISSCookie();
 
@@ -54,7 +54,6 @@ const routes = [
                 router.addRoute({
                     path: routeData[0].path, // Always the same path, because we control it with query strings.
                     name: routeData[0].name,
-                    query: to.query,
                     component: routeData[0].component,
                 });
 
@@ -75,7 +74,11 @@ const routes = [
 
 const router = createRouter({
     history: createWebHistory("/"),
-    routes
+    routes,
+    scrollBehavior(to, from, savedPosition) {
+    // always scroll to top
+    return { top: 0 }
+  }
 });
 
 router.afterEach((to, from) => {    /*eslint-disable-line*/
@@ -97,12 +100,12 @@ router.afterEach((to, from) => {    /*eslint-disable-line*/
 // Get route information by page name.
 // This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
 async function GetRouteInfoFromPageName(pageName) {
-    
+
     const response = await useMainStore().getRouteInfo(pageName);
 
     const jsonFromResponse = JSON.parse(response.data.Result);
     let routeData = [];
-  
+
     // Add our route data and return our array.
     Object.keys(jsonFromResponse).forEach((key) => {
       routeData.push({
@@ -139,7 +142,7 @@ router.overrideNavigation = (
 router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
 
     navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
-  
+
   }
 
 // Navigate to the next route, depending on the scenario.
@@ -154,11 +157,11 @@ function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams =
 
     if (!matchingScenarioMap){
         console.error("No matching scenario found. Please review the routing table.");
-        return;        
-    } 
+        return;
+    }
 
     if (matchingScenarioMap.destinationIssPageValue) {
-        
+
         // Update page data to the store for next page if provided. Otherwise, keep existing page data or set to empty object
         const existingPageDataForPage = useMainStore().pageData(matchingScenarioMap.destinationIssPageValue);
         baseMixin.methods.savePageDataToStore(
@@ -189,7 +192,7 @@ function navigateToUrl(url, optionalQuery = {}) {
     for (const queryKey in optionalQuery) {
       externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
     }
-    
+
     window.location.assign(externalUrl);
 };
 
@@ -206,14 +209,14 @@ function getNavigationMap (scenario, currentRoute) {
         );
 
         let maps = matchedQueryValue ? matchedQueryValue.map((m) => m.maps.filter((map) => map.scenario === scenario))[0] : undefined;
-        
+
         return maps ? maps.filter(x => x.filter === true || x.filter === undefined)[0] : undefined;
     }
     catch (e) {
         console.error(e);
         return undefined;
     }
-   
+
 };
 
 function GoToStartOn404(next) {
@@ -262,4 +265,4 @@ async function runExperiments(nextPage) {
     });
 }
 
-export default router;
\ No newline at end of file
+export default router;
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 7a50a394..1d096792 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -439,15 +439,46 @@ const routingTable = function(store) {
         }
       ]
     },
+    {
+      issPageValue: issPageValues.SERVICE_LOCATION,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD,
+          destinationIssPageValue: issPageValues.SERVICE_PACKAGES
+        }
+      ]
+    },
+    {
+      issPageValue: issPageValues.SCHEDULE_PAGE,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.SERVICE_LOCATION
+        }
+      ]
+    },
+    {
+      issPageValue: issPageValues.CONTACT_DETAILS,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.SCHEDULE_PAGE
+        }
+      ]
+    },
     {
       issPageValue: issPageValues.SERVICE_PACKAGE,
-        maps: [
+      maps: [
         {
           scenario: navigationScenarios.CLICKED_BACK,
           destinationIssPageValue: issPageValues.SERVICE_LOCATION
         },
         {
-          scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
+          scenario: navigationScenarios.CLICKED_FORWARD,
           destinationIssPageValue: issPageValues.REVIEW_ORDER
         }
       ]
diff --git a/src/styles/client-customizations.scss b/src/styles/client-customizations.scss
index 87bf3701..5e0db1ec 100644
--- a/src/styles/client-customizations.scss
+++ b/src/styles/client-customizations.scss
@@ -33,9 +33,7 @@ $limu-button-color: #A9E3E9;
                 color: $limu-button-text-color !important;
                 box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $limu-button-color !important;
             }
-            &:focus {
-                box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $limu-button-color !important;
-            }
+            
         }
     }
 
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index a6ffc252..78fcb265 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -160,13 +160,6 @@ html {
       font-weight: 500;
   }
   
-  .vehicle-damage,
-  .vehicle-lookup {
-      .form-test-error {
-          margin: 0;
-          padding: 0 .75rem;
-      }
-  }
 
   .form-test-invalid {
     &.btn.btn-primary {
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 94913982..73e01e30 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -5,56 +5,69 @@ body {
     background-color: #fff;
     color: #4D5151;
     .container-fluid {
-      max-width: 576px; //Remove once desktop app is complete
-      &.container-shadow {
-        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
-      }
-      &.make-tall {
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-      }
-      .prevent-squish{
-        overflow-x: unset;
-      }
+        max-width: 576px; //Remove once desktop app is complete
+        &.container-shadow {
+            box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
+        }
+        &.make-tall {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .prevent-squish{
+            overflow-x: unset;
+        }
     }
     .pointer {
-      cursor: pointer;
+        cursor: pointer;
     }
     .container,
     .container-fluid {
-      overflow: hidden;
+        overflow: hidden;
     }
-
     .sub-container{
-      &.make-tall {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow-x: hidden;
-      }
+        &.make-tall {
+            height: 100%;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow-x: hidden;
+        }
     }
-
     .sr-only {
-      position: absolute;
-      left: -10000px;
-      top: auto;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
+        position: absolute;
+        left: -10000px;
+        top: auto;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
     }
-
     .page-container-grouped-styles {
-      @extend .container-fluid, .shadow, .rounded-3, .p-0, .position-relative, .make-tall;
+        @extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
     }
-
     //Footer modal backdrop adjustments for positioning
     .modal-backdrop {
-      left: 50%;
-      transform: translateX(-50%);
-      max-width: 576px;
-      height: calc(100% - 72px);
+        left: 50%;
+        transform: translateX(-50%);
+        max-width: 576px;
+        height: calc(100% - 72px);
+    }
+    // Scroll page when modal isn't open
+    .fade-on-route-transition {
+        height: calc(100% - 80px);
+        overflow: auto;
+    }
+    // Prevent scroll when modal is open
+    .modal-open {
+        .fade-on-route-transition {
+            overflow: hidden;
+        }
     }
 
-  }
+    .modal-text {
+        display: inline;
+        color: $blue;
+        cursor: pointer;
+        text-decoration: underline;
+      }
+}
\ No newline at end of file
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index d9b462af..67c4c414 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -68,6 +68,9 @@ $orange: #fd7e14;
 $teal: #20c997;
 $cyan: #0dcaf0;
 
+// Darker gray
+$darker-gray: #525656;
+
 // scss-docs-start colors-map
 $colors: (
     "blue": $blue,
@@ -83,6 +86,7 @@ $colors: (
     "white": $white,
     "gray": $gray,
     "gray-dark": $gray-500,
+    "darker-gray":$darker-gray,
 );
 
 // scss-docs-start theme-color-variables
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index eb217eb0..3ff1648d 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -68,10 +68,7 @@ export default {
         @media (hover: hover) {
             background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         }
-        &:focus {
-            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
-        }
-        &:focus, // Mouse, touch, stylus focus
+         // Mouse, touch, stylus focus
     &:focus-visible {
             // Keyboard focus for accessibility
             outline: none;
@@ -93,7 +90,7 @@ export default {
         &.has-loader {
             color: $white;
             background: $blue-700;
-            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+           
         }
         &.delay {
             // fixes flicker while transitioning between states
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 3b7d267d..3ed2ba6a 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -11,7 +11,7 @@ describe("list-button.vue", () => {
                 mockData: {
                     global: {
                         mocks: {
-                            $route: { query: { fmgPage: "page-name" } },
+                            $route: { query: { issPage: "page-name" } },
                             GaActions: GaActions,
                             pushEventToGA: jest.fn(),
                         },
@@ -37,7 +37,7 @@ describe("list-button.vue", () => {
                 mockData: {
                     global: {
                         mocks: {
-                            $route: { query: { fmgPage: "page-name" } },
+                            $route: { query: { issPage: "page-name" } },
                             GaActions: GaActions,
                             pushEventToGA: jest.fn(),
                         },
@@ -64,7 +64,7 @@ describe("list-button.vue", () => {
                 mockData: {
                     global: {
                         mocks: {
-                            $route: { query: { fmgPage: "page-name" } },
+                            $route: { query: { issPage: "page-name" } },
                             GaActions: GaActions,
                             pushEventToGA: jest.fn(),
                         },
diff --git a/src/ux-components/modal-button-main/modal-button-main.spec.js b/src/ux-components/modal-button-main/modal-button-main.spec.js
new file mode 100644
index 00000000..621f3d4c
--- /dev/null
+++ b/src/ux-components/modal-button-main/modal-button-main.spec.js
@@ -0,0 +1,188 @@
+import { shallowMount } from "@vue/test-utils";
+import modalButtonMain from "./modal-button-main";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+
+describe("modal-button-main.vue", () => {
+    it("Should return btn-primary class", () => {
+        // Arrange/Act
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    isPrimary: true,
+                },
+            })
+        );
+        const button = wrapper.find("button");
+
+        // Assert
+        expect(button.attributes("class")).toContain("btn-primary");
+    });
+
+    it("Should return aria-disabled state", () => {
+        // Arrange/Act
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    isDisabled: true,
+                },
+            })
+        );
+        const button = wrapper.find("button");
+
+        // Assert
+        expect(button.attributes()["aria-disabled"]).toEqual("true");
+    });
+
+    it("Should return loader color", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderColor: "blue",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        // Act
+        wrapper.vm.clicked();
+        
+        await nextTick();
+
+        // Assert
+        const loader = wrapper.find("loader-stub");
+        expect(loader.attributes("class")).toContain("blue");
+    });
+
+    it("Should return loader position", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        // Act
+        wrapper.vm.clicked();
+        await nextTick();
+
+        // Assert
+        const loader = wrapper.find("loader-stub");
+        expect(loader.attributes("class")).toContain("right");
+    });
+
+    it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        wrapper.setData({
+            isLoaderDisplayed: true,
+        });
+
+        // Act
+        wrapper.vm.removeLoader();
+        await nextTick();
+
+        // Assert
+        const loader = wrapper.find("loader-stub");
+        expect(wrapper.vm.isLoaderDisplayed).toBe(false);
+    });
+
+    it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        wrapper.setData({
+            isLoaderDisplayed: true,
+        });
+
+        // Act
+        wrapper.vm.resetButtonStyle();
+        await nextTick();
+
+        // Assert
+        expect(wrapper.vm.isLoaderDisplayed).toBe(false);
+    });
+
+    it("Should emit 'click-event' event when clicking if the button is enabled", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                    isDisabled: false,
+                },
+            })
+        );
+
+        const buttonElement = wrapper.find("button");
+
+        // Act
+        buttonElement.trigger("click");
+
+        await nextTick();
+
+        // Assert
+        expect(wrapper.emitted("click-event")).toBeTruthy();
+    });
+
+    it("Should not emit 'click-event' event when clicking if the button is disabled", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                    isDisabled: true,
+                },
+            })
+        );
+
+        const buttonElement = wrapper.find("button");
+
+        // Act
+        buttonElement.trigger("click");
+
+        await nextTick();
+
+        // Assert
+        expect(wrapper.emitted("click-event")).toBeFalsy();
+    });
+});
+
+function setupMocks(mountOptionsMockData = {}) {
+    const defaultMountOptions = { route: { query: { issPage: "page-name" } } };
+    const baseMountOptions = getMountOptions(
+        Object.assign(defaultMountOptions, mountOptionsMockData)
+    );
+    const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+
+    return allMountOptions;
+}
diff --git a/src/ux-components/modal-button-main/modal-button-main.vue b/src/ux-components/modal-button-main/modal-button-main.vue
new file mode 100644
index 00000000..b8255af7
--- /dev/null
+++ b/src/ux-components/modal-button-main/modal-button-main.vue
@@ -0,0 +1,150 @@
+<template>
+    <button
+        type="button"
+        :aria-disabled="isDisabled"
+        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
+        :class="[
+            isPrimary ? 'btn-primary' : 'btn-secondary',
+            isFloat ? 'float-end' : '',
+            isLoaderDisplayed ? 'has-loader' : '',
+        ]"
+        @click="clicked">
+        <span class="m-0">{{ this.buttonText }}</span>
+        <loader
+            class="ms-2"
+            v-if="isLoaderDisplayed && !suppressLoader"
+            v-bind:class="[this.loaderColor, this.loaderPosition]" />
+    </button>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+
+export default {
+    name: "modalButtonMain",
+    props: {
+        isPrimary: Boolean,
+        buttonText: String,
+        isDisabled: Boolean,
+        loaderColor: String,
+        loaderPosition: String,
+        isFloat: Boolean,
+        suppressLoader: Boolean,
+    },
+    data() {
+        return {
+            isLoaderDisplayed: false,
+        };
+    },
+    methods: {
+        removeLoader() {
+            this.isLoaderDisplayed = false;
+        },
+        clicked() {
+            this.pushEventToGA(
+                this.$route.query[this.queryStrings.ISS_PAGE],
+                this.GaActions.CLICKED,
+                this.buttonText,
+                true
+            );
+            if (!this.isDisabled) {
+                this.isLoaderDisplayed = true;
+                this.$emit("click-event");
+            }
+        },
+        resetButtonStyle() {
+            this.isLoaderDisplayed = false;
+        },
+    },
+    components: {
+        loader,
+    },
+};
+</script>
+
+<style lang="scss">
+.btn {
+    &.btn-primary {
+        position: relative;
+        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+        border: none;
+        border-radius: $border-radius-lg;
+        color: $white;
+        justify-content: center;
+        font-weight: 500;
+        @media (hover: hover) {
+            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+        }
+       
+       // Mouse, touch, stylus focus
+    &:focus-visible {
+            // Keyboard focus for accessibility
+            outline: none;
+            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+            color: $white;
+            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+        }
+        &:disabled {
+            background: $gray-200 !important;
+            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
+            color: $gray-600 !important;
+            font-weight: 400;
+            height: 48px;
+            border: none;
+            border-radius: $border-radius-lg;
+            cursor: pointer;
+            pointer-events: all;
+        }
+        &.has-loader {
+            color: $white;
+            background: $blue-700;           
+            pointer-events: none;
+        }
+        &.delay {
+            // fixes flicker while transitioning between states
+            transition: background 0s 0s ease-in-out;
+        }
+    }
+    &.btn-secondary {
+        position: relative;
+        background: transparent;
+        border: 1px solid $blue;
+        border-radius: $border-radius-lg;
+        color: $blue;
+        font-weight: 500;
+        transition: all 150ms linear;
+        height: 3rem;
+        &:hover {
+            color: $white;
+            @include blue-gradient;
+        }
+        &:focus, // Mouse, touch, stylus focus
+    &:focus-visible {
+            // Keyboard focus for accessibility
+            outline: none;
+            box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
+            color: $white;
+            @include blue-gradient;
+        }
+        &:disabled {
+            background: transparent;
+            color: $gray-550 !important;
+            font-weight: 400;
+            height: 48px;
+            border: 1px solid $gray-550;
+            border-radius: $border-radius-lg;
+            cursor: pointer;
+            pointer-events: all;
+        }
+        &.has-loader {
+            color: $white;
+            @include blue-gradient;
+            pointer-events: none;
+        }
+        &.delay {
+            // fixes flicker while transitioning between states
+            transition: background 0s 0s ease-in-out;
+        }
+    }
+}
+</style>