diff --git a/src/constants/analytics.js b/src/constants/analytics.js
index eed7da2fe..b5b24660d 100644
--- a/src/constants/analytics.js
+++ b/src/constants/analytics.js
@@ -19,6 +19,7 @@ const GaActions = {
     CLICKED: "Clicked",
     VIF: "vif",
     SUBMITTED: "Submitted",
+    DISPLAYED: "Displayed",
 };
 
 const GaLabels = {
diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index aaf221bd2..08f429b5e 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -54,6 +54,10 @@ const endpoints = {
         url: "/vehicle/api/v1/vehicle/lookup-vin-by-address",
         method: "POST",
     },
+    LookupVinByImage: {
+        url: "/vehicle/api/v1/vehicle/vins-by-image",
+        method: "POST",
+    },
     IsVinByAddressPermissible: {
         url: "/vehicle/api/v1/vehicle/is-vin-by-address-permissible",
         method: "GET",
@@ -86,6 +90,10 @@ const endpoints = {
         url: "/parts/api/v1/parts/supporting-items",
         method: "POST",
     },
+    GetProviderLocations: {
+        url: "/location/api/v1/location/providers",
+        method: "GET",
+    },
     GetCapabilityQuestions: {
         url: "/parts/api/v1/parts/capability-questions",
         method: "GET",
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 3fc664413..db15e9854 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -20,6 +20,7 @@ const storeActions = {
     LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
     LOOKUP_VIN_BY_PLATE: "lookupVinByPlate",
     LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress",
+    LOOKUP_VIN_BY_IMAGE: "lookupVinByImage",
     GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
     GET_PARTS: "getParts",
     GET_WIPERS: "getWipers",
@@ -30,6 +31,7 @@ const storeActions = {
     GET_MOLDING_QUESTIONS: "getMoldingQuestions",
     GET_MOBILE_FEE_PART: "getMobileFeePart",
     GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
+    GET_PROVIDER_LOCATIONS: "getProviderLocations",
     SAVE_SESSION: "saveSession",
     LOAD_SESSION: "loadSession",
     UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse",
diff --git a/src/digital-components/button-question/button-question.spec.js b/src/digital-components/button-question/button-question.spec.js
index e9e1d70a4..ce8d87fab 100644
--- a/src/digital-components/button-question/button-question.spec.js
+++ b/src/digital-components/button-question/button-question.spec.js
@@ -1,6 +1,9 @@
 import { shallowMount, mount } from "@vue/test-utils";
 import buttonQuestion from "./button-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import crypto from "crypto";
+
+global.crypto = crypto;
 
 describe("buttonQuestion.vue", () => {
     it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 44a427275..e98ef2901 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -86,7 +86,8 @@ import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
-import { ErrorMessage } from "vee-validate";
+import { useField, ErrorMessage } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
     name: "buttonQuestion",
@@ -128,6 +129,34 @@ export default {
         valueToLogType: String,
         additionalButtonStyling: String,
         isSmallQuestionText: Boolean,
+        availability: String,
+        customButtonQuestionId: String,
+        logDisplayedValuesEvent: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup(props) {
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue: modelValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
+            useField(props.groupName, props.validationRules, fieldOptions);
+
+        return {
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+            resetField,
+        };
     },
     beforeMount() {
         if (this.buttonTypeObject) {
@@ -226,6 +255,36 @@ export default {
             this.$emit(`buttonEvent.${eventName}`, event.args);
         },
     },
+    watch: {
+        modelValue(newValue) {
+            this.resetField({
+                value: newValue,
+            });
+        },
+        answers() {
+            //once we get the answers to display from parent, see if we need a GA event to log what we showed
+            if (this.logDisplayedValuesEvent && this.answers.length > 0) {
+                var eventLabel = "";
+                //build comma separated list of all items in button list that we are going to display on page
+                this.answers.forEach((item) => {
+                    if (item.Name) {
+                        eventLabel += item.Name + ",";
+                    }
+                    if (item.buttonLabel) {
+                        eventLabel += item.buttonLabel + ",";
+                    }
+                });
+
+                eventLabel = eventLabel.slice(0, -1); //remove the last comma
+                this.pushEventToGA(
+                    this.$route.query[queryStrings.FMG_PAGE],
+                    this.GaActions.DISPLAYED,
+                    eventLabel,
+                    true
+                );
+            }
+        },
+    },
     components: {
         listButton,
         listButtonHorizontal,
diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue
index e122837c4..5c32b298c 100644
--- a/src/digital-components/dropdown-question/dropdown-question.vue
+++ b/src/digital-components/dropdown-question/dropdown-question.vue
@@ -3,15 +3,15 @@
         class="dropdown-question"
         :class="(errors && errors.length) || hasError ? 'has-error' : ''">
         <label
-            :for="inputId"
+            :for="dropdownId"
             :aria-label="questionText"
             class="form-label"
             v-html="questionText"></label>
         <select
             v-model="selectedOption"
             class="form-select"
-            :id="inputId"
-            :name="inputId"
+            :id="dropdownId"
+            :name="dropdownId"
             :aria-disabled="isDisabled"
             :disabled="isDisabled"
             :aria-required="isRequired"
@@ -46,11 +46,12 @@ export default {
         cmsWidgetName: String,
         hasError: Boolean,
         placeHolderText: String,
+        customDropdownId: String,
     },
     setup(props) {
-        const inputId = !props.customInputId
+        const dropdownId = !props.customDropdownId
             ? `dropdown-${crypto.randomUUID()}`
-            : props.customInputId;
+            : props.customDropdownId;
 
         const propsClone = Object.assign({}, props);
         const modelValue = propsClone.modelValue;
@@ -72,13 +73,13 @@ export default {
         };
 
         const { errorMessage, handleBlur, handleChange, meta, errors } = useField(
-            inputId,
+            dropdownId,
             props.validationRules,
             fieldOptions
         );
 
         return {
-            inputId,
+            dropdownId,
             errorMessage,
             handleBlur,
             handleChange,
diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index cec960fa1..e1f3fb462 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -170,6 +170,9 @@ export default {
             }
         }
     }
+    &.show .modal-dialog {
+        transform: translateY(0);
+    }
 }
 body {
     .modal-backdrop {
diff --git a/src/digital-components/textbox-question/textbox-question.spec.js b/src/digital-components/textbox-question/textbox-question.spec.js
index dba54d544..aea563624 100644
--- a/src/digital-components/textbox-question/textbox-question.spec.js
+++ b/src/digital-components/textbox-question/textbox-question.spec.js
@@ -161,4 +161,252 @@ describe("textboxQuestion.vue", () => {
         // Assert
         expect(wrapper.vm.handleChange).toHaveBeenCalled;
     });
+
+    it("Should not display camera or spinner icon when disabled", () => {
+        // Arrange
+        const inputId = "test";
+
+        const wrapper = shallowMount(textboxQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            propsData: {
+                modelValue: "",
+                includeImageQuestion: true,
+                inputId: inputId,
+                isDisabled: true,
+            },
+            mixins: [mockMixin],
+            attachTo: document.body,
+        });
+
+        // Act
+        const cameraIcon = wrapper.find('[data-test="image-upload"]');
+        const loadingIcon = wrapper.findComponent("loader");
+
+        // Assert
+        expect(cameraIcon.exists()).toBe(false);
+        expect(loadingIcon.exists()).toBe(false);
+    });
+
+    describe("Image Uploading", () => {
+        it("Should call this.handleChange & emit update when fully valid image is submitted.", async () => {
+            // Arrange
+            const inputId = "test";
+            const responseValue = "testResponse";
+
+            const imageHandler = jest.fn().mockImplementation(
+                () =>
+                    new Promise((resolve, reject) => {
+                        resolve({
+                            data: [responseValue],
+                        });
+                    })
+            );
+
+            const wrapper = shallowMount(textboxQuestion, {
+                global: {
+                    directives: {
+                        maska: maska,
+                    },
+                },
+                propsData: {
+                    modelValue: "",
+                    "onUpdate:modelValue": (v) => wrapper.setProps({ modelValue: v }),
+                    includeImageQuestion: true,
+                    inputId: inputId,
+                    imageQuestionSubmitHandler: imageHandler,
+                },
+                mixins: [mockMixin],
+                attachTo: document.body,
+            });
+
+            wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+            wrapper.vm.isImageValid = jest.fn().mockImplementation(() => true);
+
+            // Act
+            const imageUploadField = wrapper.find('[data-test="image-upload"]');
+
+            await imageUploadField.trigger("change");
+
+            await wrapper.vm.$nextTick();
+
+            // Assert
+
+            expect(wrapper.vm.imageQuestionSubmitHandler).toHaveBeenCalled();
+            expect(wrapper.vm.handleChange).toHaveBeenCalled();
+            expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+        });
+
+        it("Should not call handler and emit image-lookup-error when image is invalid.", async () => {
+            // Arrange
+            const inputId = "test";
+            const responseValue = "testResponse";
+
+            const imageHandler = jest.fn().mockImplementation(
+                () =>
+                    new Promise((resolve, reject) => {
+                        resolve({
+                            data: [responseValue],
+                        });
+                    })
+            );
+
+            const wrapper = shallowMount(textboxQuestion, {
+                global: {
+                    directives: {
+                        maska: maska,
+                    },
+                },
+                propsData: {
+                    modelValue: "",
+                    "onUpdate:modelValue": (v) => wrapper.setProps({ modelValue: v }),
+                    includeImageQuestion: true,
+                    inputId: inputId,
+                    imageQuestionSubmitHandler: imageHandler,
+                },
+                mixins: [mockMixin],
+                attachTo: document.body,
+            });
+
+            wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+            wrapper.vm.isImageValid = jest.fn().mockImplementation(() => false);
+
+            // Act
+            const imageUploadField = wrapper.find('[data-test="image-upload"]');
+
+            await imageUploadField.trigger("change");
+
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.imageQuestionSubmitHandler).not.toHaveBeenCalled();
+            expect(wrapper.vm.handleChange).not.toHaveBeenCalled();
+            expect(wrapper.emitted()).toHaveProperty("imageValidityError");
+        });
+
+        it("Should emit image-lookup-error when image lookup responds with an error.", async () => {
+            // Arrange
+            const inputId = "test";
+
+            const imageHandler = jest.fn().mockImplementation(
+                () =>
+                    new Promise((resolve, reject) => {
+                        reject({});
+                    })
+            );
+
+            const wrapper = shallowMount(textboxQuestion, {
+                global: {
+                    directives: {
+                        maska: maska,
+                    },
+                },
+                propsData: {
+                    modelValue: "",
+                    "onUpdate:modelValue": (v) => wrapper.setProps({ modelValue: v }),
+                    includeImageQuestion: true,
+                    inputId: inputId,
+                    imageQuestionSubmitHandler: imageHandler,
+                },
+                mixins: [mockMixin],
+                attachTo: document.body,
+            });
+
+            wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+            wrapper.vm.isImageValid = jest.fn().mockImplementation(() => true);
+
+            // Act
+            const imageUploadField = wrapper.find('[data-test="image-upload"]');
+
+            await imageUploadField.trigger("change");
+
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.imageQuestionSubmitHandler).toHaveBeenCalled();
+            expect(wrapper.vm.handleChange).not.toHaveBeenCalled();
+            expect(wrapper.emitted()).toHaveProperty("imageLookupError");
+        });
+    });
+
+    describe("Image Validation", () => {
+        it("Should return true if a valid image is tested.", () => {
+            // Arrange
+            const wrapper = shallowMount(textboxQuestion, {
+                global: {
+                    directives: {
+                        maska: maska,
+                    },
+                },
+                propsData: {
+                    inputId: "input ID",
+                    maxFileSize: 5140 * 1028,
+                },
+                mixins: [mockMixin],
+            });
+
+            const image = {
+                size: 100 * 1028,
+            };
+
+            // Act
+            const result = wrapper.vm.isImageValid(image);
+
+            // Assert
+            expect(result).toBeTruthy();
+        });
+
+        it("Should return false if null image is tested.", () => {
+            // Arrange
+            const wrapper = shallowMount(textboxQuestion, {
+                global: {
+                    directives: {
+                        maska: maska,
+                    },
+                },
+                propsData: {
+                    inputId: "input ID",
+                    maxFileSize: 5140 * 1028,
+                },
+                mixins: [mockMixin],
+            });
+
+            const image = null;
+
+            // Act
+            const result = wrapper.vm.isImageValid(image);
+
+            // Assert
+            expect(result).toBeFalsy();
+        });
+
+        it("Should return false if oversized image is tested.", () => {
+            // Arrange
+            const wrapper = shallowMount(textboxQuestion, {
+                global: {
+                    directives: {
+                        maska: maska,
+                    },
+                },
+                propsData: {
+                    inputId: "input ID",
+                    maxFileSize: 5140 * 1028,
+                },
+                mixins: [mockMixin],
+            });
+
+            const image = {
+                size: 10000000 * 1028,
+            };
+
+            // Act
+            const result = wrapper.vm.isImageValid(image);
+
+            // Assert
+            expect(result).toBeFalsy();
+        });
+    });
 });
diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 335c47a60..a4de11254 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -15,7 +15,12 @@
                 hideInput ? 'hide-input' : '',
             ]"
             v-html="questionText"></label>
-        <div class="input-wrapper" :class="[includeSearchIcon ? 'has-search-icon' : '']">
+        <div
+            class="input-wrapper"
+            :class="[
+                includeSearchIcon ? 'has-search-icon' : '',
+                includeImageQuestion ? 'has-camera-icon' : '',
+            ]">
             <input
                 class="form-control"
                 v-model.trim="value"
@@ -41,6 +46,23 @@
                 :maxlength="maxLength ? maxLength : '999'"
                 @focus="$emit('focus', $event.target.value)" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
+            <template v-if="includeImageQuestion">
+                <template v-if="!isDisabled">
+                    <label class="camera-icon-input" v-show="!isImageProcessing">
+                        <input
+                            type="file"
+                            id="vin-input"
+                            accept="image/jpeg,image/png"
+                            aria-label="Camera icon/button"
+                            data-test="image-upload"
+                            @change="imageChanged" />
+                    </label>
+                    <loader
+                        v-show="isImageProcessing"
+                        loaderColor="blue"
+                        class="loading-icon"></loader>
+                </template>
+            </template>
         </div>
         <div v-show="errorMessage" class="row my-1 form-test-error">
             <span
@@ -55,6 +77,9 @@
 
 <script>
 import { useField, validate } from "vee-validate";
+import { storeActions } from "@/constants/store-actions";
+import loader from "@/ux-components/loader/loader.vue";
+import { ref } from "vue";
 
 export default {
     name: "textbox-question",
@@ -88,6 +113,9 @@ export default {
         questionAlignment: String, // Left or center. Left is default.
         cornerStyle: String, // Rounded or square. Square is default.
         includeSearchIcon: Boolean,
+        includeImageQuestion: Boolean,
+        imageQuestionSubmitHandler: Function,
+        maxFileSize: Number,
         hideInput: Boolean,
         centerErrorMessage: Boolean,
     },
@@ -97,6 +125,7 @@ export default {
         const propsClone = Object.assign({}, props);
         const modelValue = propsClone.modelValue;
         let initialValue;
+        let isImageProcessing = ref(false);
 
         switch (typeof modelValue) {
             case "number":
@@ -127,8 +156,37 @@ export default {
             validate,
             meta,
             errors,
+            isImageProcessing,
         };
     },
+    methods: {
+        async imageChanged(e) {
+            let file = e.target.files[0];
+
+            if (!this.isImageValid(file)) {
+                this.$emit("imageValidityError");
+                return;
+            }
+
+            this.isImageProcessing = true;
+
+            try {
+                this.value = await this.imageQuestionSubmitHandler(file);
+
+                await this.$nextTick();
+
+                document.getElementById(this.inputId).dispatchEvent(new Event("change"));
+            } catch (error) {
+                this.$emit("imageLookupError");
+            }
+
+            this.isImageProcessing = false;
+        },
+
+        isImageValid(imageFile) {
+            return imageFile && imageFile.size < this.maxFileSize;
+        },
+    },
     computed: {
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
@@ -153,6 +211,9 @@ export default {
             }
         },
     },
+    components: {
+        loader,
+    },
 };
 </script>
 
@@ -191,6 +252,38 @@ export default {
                 display: flex;
             }
         }
+        &.has-camera-icon {
+            label {
+                &.camera-icon-input {
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    right: 1rem;
+                    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9774 16.5228C17.3559 16.5228 15.1864 18.6621 15.1864 21.3476C15.1864 24.0331 17.3107 26.1724 19.9774 26.1724C22.6441 26.1724 24.7684 24.0331 24.7684 21.3476C24.7684 18.6621 22.6441 16.5228 19.9774 16.5228Z' fill='%231574A1'/%3E%3Cpath d='M38.4181 7.23725H29.8701C29.1469 2.64 24.7684 0 19.9774 0C15.1864 0 10.8531 2.64 10.0847 7.23725H1.58192C0.723164 7.23725 0 7.96553 0 8.83035V33.7738C0 34.6387 0.723164 35.3669 1.58192 35.3669H38.4181C39.2768 35.3669 40 34.6387 40 33.7738V8.83035C40 7.96553 39.2768 7.23725 38.4181 7.23725ZM19.9774 29.7683C15.3672 29.7683 11.5706 25.9904 11.5706 21.3021C11.5706 16.6138 15.3672 12.8814 19.9774 12.8814C24.5876 12.8814 28.3842 16.6593 28.3842 21.3476C28.3842 26.0359 24.6328 29.7683 19.9774 29.7683ZM36.565 14.5655H33.0395V11.0152H36.565V14.5655Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+                    background-repeat: no-repeat;
+                    background-position: center;
+                    width: 1rem;
+                    height: 100%;
+                    display: flex;
+                    border: none;
+                    background-color: transparent;
+                    &:hover {
+                        cursor: pointer;
+                    }
+                    input[type="file"] {
+                        position: absolute;
+                        left: -9999px;
+                    }
+                }
+            }
+
+            .loading-icon {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: 1rem;
+            }
+        }
     }
     input {
         &.has-icon {
diff --git a/src/global-methods.js b/src/global-methods.js
index 14e5cca0e..2df5c29af 100644
--- a/src/global-methods.js
+++ b/src/global-methods.js
@@ -7,10 +7,16 @@ import { GaCategories, GaActions, GaLabels } from "@/constants/analytics";
 import { headerKeys } from "@/constants/header-keys";
 
 export default {
-    callHttpClient({ method, endpoint, payload, logApiCall = true }) {
+    callHttpClient({ method, endpoint, payload, logApiCall = true, isFormData = false }) {
         return new Promise((resolve, reject) => {
             const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
-            const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
+            let payloadAndAnalyticsData = {};
+            if (isFormData) {
+                payloadAndAnalyticsData = payload;
+                payloadAndAnalyticsData.append("AppName", "FixMyGlass");
+            } else {
+                Object.assign(payloadAndAnalyticsData, payload, { AppName: "FixMyGlass" });
+            }
             const headers = {
                 [headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
             };
diff --git a/src/helpers/damage-helper.js b/src/helpers/damage-helper.js
index 22e312939..727825d9d 100644
--- a/src/helpers/damage-helper.js
+++ b/src/helpers/damage-helper.js
@@ -1,6 +1,7 @@
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
+import { damageLocationsSelected as glassLocations } from "@/constants/damage-locations-selected";
 
 export function getDamageString() {
     // If it's a repair it's always a windshield.
@@ -45,6 +46,14 @@ export function getIsWindshieldOnly() {
     return returnString;
 }
 
+export function includesWindshieldReplacement() {
+    const windshieldMatches =
+        store.getters.order.damage.glassToReplace?.filter(
+            (glassToReplace) => glassToReplace.glassLocation === glassLocations.WINDSHIELD
+        ) ?? [];
+    return windshieldMatches.length > 0;
+}
+
 export async function isGlassAvailableForCarId(carId) {
     const newGlassOptions = await baseMixin.methods.dispatchStoreAction(
         storeActions.GET_DAMAGE_OPTIONS,
diff --git a/src/helpers/heritage-integration/navigation-helper.js b/src/helpers/heritage-integration/navigation-helper.js
index 0e756a8a4..913fbcb1b 100644
--- a/src/helpers/heritage-integration/navigation-helper.js
+++ b/src/helpers/heritage-integration/navigation-helper.js
@@ -7,6 +7,7 @@ import { storeActions } from "@/constants/store-actions.js";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import experimentMixin from "@/mixins/experiment-mixin";
 import { experimentSettings } from "@/constants/experiments";
+import { includesWindshieldReplacement } from "@/helpers/damage-helper";
 import store from "@/store";
 import router from "@/router";
 
@@ -73,6 +74,7 @@ export async function skipVinLookup() {
     return (
         store.getters.damage.isRepair ||
         isVinOptionalVehicle ||
+        !includesWindshieldReplacement() ||
         experimentMixin.methods.hasSettingEqualTo(experimentSettings.SUPPRESS_VIN_CAPTURE, "true")
     );
 }
@@ -85,6 +87,7 @@ export async function skipVinLookupNotRepair() {
     return (
         !store.getters.damage.isRepair &&
         (isVinOptionalVehicle ||
+            !includesWindshieldReplacement() ||
             experimentMixin.methods.hasSettingEqualTo(
                 experimentSettings.SUPPRESS_VIN_CAPTURE,
                 "true"
diff --git a/src/helpers/heritage-integration/navigation-helper.spec.js b/src/helpers/heritage-integration/navigation-helper.spec.js
index 67a5055c8..d08ce92ec 100644
--- a/src/helpers/heritage-integration/navigation-helper.spec.js
+++ b/src/helpers/heritage-integration/navigation-helper.spec.js
@@ -135,7 +135,7 @@ describe("getPageToRouteExistingOrderTo", () => {
         expect(result).toBe(fmgPageValues.VEHICLE_DAMAGE);
     });
 
-    test("user has YMMS and no vehicle questions > should return vin-lookup", async () => {
+    test("user has YMMS and no vehicle questions > should return estimate", async () => {
         // Arrange
         const toRoute = {
             query: {},
@@ -172,7 +172,7 @@ describe("getPageToRouteExistingOrderTo", () => {
         const result = await getPageToRouteExistingOrderTo(toRoute, false);
 
         //Assert
-        expect(result).toBe(fmgPageValues.VIN_LOOKUP);
+        expect(result).toBe(fmgPageValues.ESTIMATE);
     });
 
     test("user has YMMS but no questions or carId > should return estimate", async () => {
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 9dc35f3d3..9842d42c3 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -45,7 +45,7 @@
             <div class="row mb-4" v-show="showAddressFields" aria-live="polite">
                 <div class="col">
                     <dropdownQuestion
-                        customInputId="state"
+                        customDropdownId="state"
                         cmsWidgetName="StateQuestionWidget"
                         v-model="addressModel.state"
                         ref="state"
@@ -115,6 +115,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        preserveCityAndStateOnReset: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -390,8 +394,10 @@ export default {
                     this.displayNoMatchWarning = true;
 
                     this.addressModel.city = "";
-                    this.addressModel.state = "";
-                    this.addressModel.zipCode = "";
+                    if (!this.preserveCityAndStateOnReset) {
+                        this.addressModel.state = "";
+                        this.addressModel.zipCode = "";
+                    }
                     this.showAddressFields = true;
                     this.displayVerificationWarning = false;
 
diff --git a/src/layouts/estimate/estimate.spec.js b/src/layouts/estimate/estimate.spec.js
index 4a0a3f434..462287851 100644
--- a/src/layouts/estimate/estimate.spec.js
+++ b/src/layouts/estimate/estimate.spec.js
@@ -101,6 +101,9 @@ describe("estimate.vue", () => {
         //Arrange
         const { wrapper } = setupMocks({});
 
+        delete window.location;
+        window.location = { search: "?fmgPage=estimate&zipcode=43015" };
+
         //Act
         estimate.beforeRouteEnter.call(
             wrapper.vm,
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index 0671c1015..1ca0c9d48 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -18,7 +18,8 @@
                         buttonTypeString="listButton"
                         v-model="selectedVinLookupMethod"
                         isRequired
-                        validationRules="option-required" />
+                        validationRules="option-required"
+                        :logDisplayedValuesEvent="true" />
                 </div>
                 <div v-else>
                     <alert
@@ -147,11 +148,17 @@ export default {
 
         const queryString = window.location.search;
         const urlParams = new URLSearchParams(queryString);
-        const hasZip = urlParams.has(queryStrings.ZIP_CODE);
-        const zip = urlParams.get(queryStrings.ZIP_CODE);
+        const lowerCaseParams = new URLSearchParams();
+        for (const [name, value] of urlParams) {
+            lowerCaseParams.append(name.toLowerCase(), value);
+        }
+
+        const zip = lowerCaseParams.get(queryStrings.ZIP_CODE)
+            ? lowerCaseParams.get(queryStrings.ZIP_CODE)
+            : store.getters.order.serviceLocation.zipCode;
 
         var vinByAddressPromise;
-        if (hasZip) {
+        if (zip) {
             vinByAddressPromise = baseMixin.methods.dispatchStoreAction(
                 storeActions.IS_VIN_BY_ADDRESS_PERMISSIBLE,
                 zip,
@@ -191,7 +198,7 @@ export default {
                 }
             }
 
-            if (zip && resultMap.vinByAddress === false) {
+            if (!zip || resultMap.vinByAddress === false) {
                 var indexToRemove = resultMap.cmsContent.VinLookupMethod.Answers.findIndex(
                     (answer) => answer.Name === "HomeAddress"
                 );
@@ -199,6 +206,7 @@ export default {
                     resultMap.cmsContent.VinLookupMethod.Answers.splice(indexToRemove, 1);
                 }
             }
+
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
index b23f5c101..bf5751637 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
@@ -525,7 +525,6 @@ describe("license-plate-lookup.vue", () => {
             });
             const registrationZip = "12345";
             const serviceZip = "12345";
-            console.log("this is the test I care about");
 
             wrapper.vm.navigateForward = jest.fn();
             const vinLookup = { data: { vehicle: { carId: "TESTID1" } } };
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index efda89c97..03b56a4cb 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -7,7 +7,7 @@
                 :displayGenericVehicleImage="false" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container make-tall">
-                <div class="row my-2">
+                <div class="row mt-2 mb-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="LicensePlateNumberQuestionWidget"
@@ -17,7 +17,7 @@
                             validationRules="license-plate-required" />
                     </div>
                 </div>
-                <div class="row my-2">
+                <div class="row mt-0 mb-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="RegistrationZipQuestionWidget"
@@ -27,7 +27,7 @@
                             validationRules="zip-required|zip-format" />
                     </div>
                 </div>
-                <div class="row mt-2">
+                <div class="row mt-0">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="EmailAddressQuestionWidget"
diff --git a/src/layouts/quote/service-package-question/service-package-question.vue b/src/layouts/quote/service-package-question/service-package-question.vue
index b94d21dce..29e6a9a9e 100644
--- a/src/layouts/quote/service-package-question/service-package-question.vue
+++ b/src/layouts/quote/service-package-question/service-package-question.vue
@@ -7,7 +7,8 @@
         :buttonTypeObject="servicePackageRadio"
         v-model="selectedPackageName"
         :validationRules="validationRules"
-        :isRequired="isRequired" />
+        :isRequired="isRequired"
+        :logDisplayedValuesEvent="true" />
 </template>
 
 <script>
diff --git a/src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js b/src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js
index cdbe474a2..65fba87f2 100644
--- a/src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js
+++ b/src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js
@@ -21,7 +21,7 @@ const mockCmsContent = {
         },
         {
             AnswerImageUrl: "",
-            Name: "DropOff",
+            Name: "Dropoff",
             SubText: "",
             SubWidgetName: "",
             Text: "Drop-off",
@@ -75,7 +75,7 @@ describe("appointment-type-question.vue", () => {
             },
             {
                 AnswerImageUrl: "",
-                Name: "DropOff",
+                Name: "Dropoff",
                 SubText: "",
                 SubWidgetName: "",
                 Text: "Drop-off",
@@ -108,7 +108,7 @@ describe("appointment-type-question.vue", () => {
             },
             {
                 AnswerImageUrl: "",
-                Name: "DropOff",
+                Name: "Dropoff",
                 SubText: "",
                 SubWidgetName: "",
                 Text: "Drop-off",
diff --git a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
index 0394b8a84..d6711f363 100644
--- a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
+++ b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
@@ -2,6 +2,8 @@
     <transition name="fade" mode="out-in">
         <div class="appointment-type-question" aria-live="polite">
             <buttonQuestion
+                ref="buttonQuestion"
+                customButtonQuestionId="appointmentTypeQuestion"
                 :questionText="questionText"
                 :answers="answersToDisplay"
                 :groupName="groupName"
@@ -44,7 +46,7 @@ export default {
                 filteredAnswers = this.answersFromCms.filter((answer) => answer.Name == "Mobile");
             } else if (this.isServiceableInshop) {
                 filteredAnswers = this.answersFromCms.filter(
-                    (answer) => answer.Name == "Inshop" || answer.Name == "DropOff"
+                    (answer) => answer.Name == "Inshop" || answer.Name == "Dropoff"
                 );
             } else {
                 filteredAnswers = [];
@@ -65,12 +67,22 @@ export default {
         },
     },
     watch: {
+        answersToDisplay: {
+            handler(newValue) {
+                // If there is only one option to display and that option is 'Mobile' then select it
+                if (
+                    newValue.length == 1 &&
+                    newValue.findIndex((answer) => answer.Name == "Mobile") != -1
+                ) {
+                    this.selectedValues = "Mobile";
+                }
+            },
+            immediate: true,
+        },
         isMobileOnly: {
             handler(newValue) {
                 if (newValue) {
                     this.selectedValues = "Mobile";
-                } else {
-                    this.selectedValues = null;
                 }
             },
         },
diff --git a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.spec.js b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.spec.js
index 061fd6bcd..cb075c38f 100644
--- a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.spec.js
+++ b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.spec.js
@@ -48,7 +48,7 @@ describe("service-location-helper.js", () => {
     it("Should return null if no service zip code is passed in", async () => {
         // Arrange
         const serviceZipCode = null;
-        const serviceType = "Replace";
+        const damageType = "Replace";
         const parentAccountNumber = 167132;
         const billToAccountNumber = 1234;
         const expected = null;
@@ -56,7 +56,7 @@ describe("service-location-helper.js", () => {
         // Act
         const result = await getPricedMobileFeePart(
             serviceZipCode,
-            serviceType,
+            damageType,
             parentAccountNumber,
             billToAccountNumber
         );
@@ -68,7 +68,7 @@ describe("service-location-helper.js", () => {
     it("Should return the priced mobile fee part", async () => {
         // Arrange
         const serviceZipCode = "43235";
-        const serviceType = "Replace";
+        const damageType = "Replace";
         const parentAccountNumber = 167132;
         const billToAccountNumber = 1234;
 
@@ -84,7 +84,7 @@ describe("service-location-helper.js", () => {
         // Act
         const result = await getPricedMobileFeePart(
             serviceZipCode,
-            serviceType,
+            damageType,
             parentAccountNumber,
             billToAccountNumber
         );
diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index 4b0a4a1ac..b92c14bc9 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -17,15 +17,15 @@
                         @click-event="openModal"
                         aria-label="Modal window" />
                 </div>
-                <textBlock
-                    :customText="mobileFeeText"
-                    cmsWidgetName="MobileFeeDisclaimerWidget"
-                    typeStyle="caption" />
                 <div v-show="errorMessage" class="row my-1 form-test-error">
                     <span class="d-inline-flex small mt-0 center-error-message" role="alert">
                         {{ errorMessage }}
                     </span>
                 </div>
+                <textBlock
+                    :customText="mobileFeeText"
+                    cmsWidgetName="MobileFeeDisclaimerWidget"
+                    typeStyle="caption" />
             </div>
             <modal
                 :ref="modalName"
@@ -37,7 +37,8 @@
                 <addressQuestions
                     ref="addressQuestions"
                     v-model="internalModel.addressQuestions"
-                    captureApartmentNumberOrBusinessName="true" />
+                    captureApartmentNumberOrBusinessName="true"
+                    preserveCityAndStateOnReset="true" />
                 <vehicleProtectedQuestion
                     ref="vehicleProtectedQuestion"
                     v-model="internalModel.isVehicleProtected"
diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
index d7f5348b9..dcb176919 100644
--- a/src/layouts/service-location/service-location.spec.js
+++ b/src/layouts/service-location/service-location.spec.js
@@ -191,6 +191,8 @@ describe("service-location.vue", () => {
             // Arrange
             const { wrapper } = setupMocks({});
 
+            wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
             const mobileFeePart = {
                 partNumber: "MOBILE FEE",
                 description: "MOBILE FEE",
@@ -586,6 +588,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -612,6 +616,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -638,6 +644,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -664,6 +672,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -690,6 +700,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -717,6 +729,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -744,6 +758,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -771,6 +787,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -798,6 +816,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -825,6 +845,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -852,6 +874,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -879,6 +903,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -906,6 +932,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -933,6 +961,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -946,6 +976,36 @@ describe("service-location.vue", () => {
                 expect(wrapper.vm.isServiceableInshop).toEqual(true);
                 expect(wrapper.vm.displayServiceableInshopOnly).toEqual(false);
             });
+
+            test("displayServiceableInshopOnly should be false in the dual/static recalibration scenario", async () => {
+                // Arrange
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: true,
+                        isGlassServiceableMobile: true,
+                        isRecalibrationServiceableMobile: false,
+                    })
+                );
+
+                const { wrapper } = setupMocks({});
+
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                expect(wrapper.vm.isServiceableMobile).toEqual(false);
+                expect(wrapper.vm.isServiceableInshop).toEqual(true);
+                expect(wrapper.vm.displayServiceableInshopOnly).toEqual(false);
+                expect(wrapper.vm.displayRecalibrationWarning).toEqual(true);
+            });
         });
 
         describe("should be based only on glass serviceability if recalibration is not defined.", () => {
@@ -962,6 +1022,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -988,6 +1050,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1014,6 +1078,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1041,6 +1107,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1068,6 +1136,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1081,56 +1151,22 @@ describe("service-location.vue", () => {
                 expect(wrapper.vm.isServiceableInshop).toEqual(true);
                 expect(wrapper.vm.displayServiceableMobileOnly).toEqual(false);
             });
-        });
 
-        describe("should check for dual or static recalibration", () => {
-            test("isDualOrStaticRecalibration should be true if dual recalibration is present", async () => {
+            test("requiresInshopRecalibration should not be true if recalibration info is null.", async () => {
                 // Arrange
-                store.getters = {
-                    lineItems: {
-                        supportingItems: [
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "SUPPLIES-REPAIR",
-                                partType: "REPAIR FEE",
-                                sellingPrice: 7.99,
-                            },
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "RECAL DUAL",
-                                partType: "RECALIBRATION",
-                                sellingPrice: 0,
-                            },
-                        ],
-                    },
-                    order: {
-                        serviceLocation: {
-                            zipCode: "43235",
-                            state: "OH",
-                        },
-                    },
-                    damage: {
-                        isRepair: false,
-                    },
-                    payment: {
-                        isInsurance: false,
-                    },
-                    vehicle: {
-                        registration: {
-                            address: "5555 Sulgrave Dr",
-                            city: "New Albany",
-                            state: "OH",
-                            zipCode: "43054",
-                        },
-                    },
-                };
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: null,
+                        isGlassServiceableMobile: true,
+                        isRecalibrationServiceableMobile: null,
+                    })
+                );
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1140,82 +1176,9 @@ describe("service-location.vue", () => {
                 );
 
                 // Assert
-                expect(wrapper.vm.isDualOrStaticRecalibration).toBe(true);
-            });
-
-            test("isDualOrStaticRecalibration should be true if static recalibration is present", async () => {
-                // Arrange
-                store.getters = {
-                    lineItems: {
-                        supportingItems: [
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "SUPPLIES-REPAIR",
-                                partType: "REPAIR FEE",
-                                sellingPrice: 7.99,
-                            },
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "RECAL STATIC",
-                                partType: "RECALIBRATION",
-                                sellingPrice: 0,
-                            },
-                        ],
-                    },
-                    order: {
-                        serviceLocation: {
-                            zipCode: "43235",
-                            state: "OH",
-                        },
-                    },
-                    damage: {
-                        isRepair: false,
-                    },
-                    payment: {
-                        isInsurance: false,
-                    },
-                    vehicle: {
-                        registration: {
-                            address: "5555 Sulgrave Dr",
-                            city: "New Albany",
-                            state: "OH",
-                            zipCode: "43054",
-                        },
-                    },
-                };
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                await serviceLocation.beforeRouteEnter.call(
-                    wrapper.vm,
-                    { query: { fmgPage: "serviceLocation" } },
-                    undefined,
-                    (c) => c(wrapper.vm)
-                );
-
-                // Assert
-                expect(wrapper.vm.isDualOrStaticRecalibration).toBe(true);
-            });
-
-            test("isDualOrStaticRecalibration should be false if neither are present.", async () => {
-                // Arrange
-                const { wrapper } = setupMocks({});
-
-                // Act
-                await serviceLocation.beforeRouteEnter.call(
-                    wrapper.vm,
-                    { query: { fmgPage: "serviceLocation" } },
-                    undefined,
-                    (c) => c(wrapper.vm)
-                );
-
-                // Assert
-                expect(wrapper.vm.isDualOrStaticRecalibration).toBe(false);
+                expect(wrapper.vm.isServiceableMobile).toEqual(true);
+                expect(wrapper.vm.isServiceableInshop).toEqual(true);
+                expect(wrapper.vm.requiresInshopRecalibration).toEqual(false);
             });
         });
 
@@ -1233,6 +1196,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1260,6 +1225,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1287,6 +1254,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1314,6 +1283,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1341,6 +1312,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1368,6 +1341,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1384,60 +1359,19 @@ describe("service-location.vue", () => {
 
             test("Should not show inshop-only error if dual or static recalibration, but should show that error instead.", async () => {
                 // Arrange
-                store.getters = {
-                    lineItems: {
-                        supportingItems: [
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "SUPPLIES-REPAIR",
-                                partType: "REPAIR FEE",
-                                sellingPrice: 7.99,
-                            },
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "RECAL STATIC",
-                                partType: "RECALIBRATION",
-                                sellingPrice: 0,
-                            },
-                        ],
-                    },
-                    order: {
-                        serviceLocation: {
-                            zipCode: "43235",
-                            state: "OH",
-                        },
-                    },
-                    damage: {
-                        isRepair: false,
-                    },
-                    payment: {
-                        isInsurance: false,
-                    },
-                    vehicle: {
-                        registration: {
-                            address: "5555 Sulgrave Dr",
-                            city: "New Albany",
-                            state: "OH",
-                            zipCode: "43054",
-                        },
-                    },
-                };
-
                 getServiceabilityDetails.mockImplementation(() =>
                     Promise.resolve({
-                        isGlassServiceableInshop: false,
-                        isRecalibrationServiceableInshop: false,
-                        isGlassServiceableMobile: false,
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: true,
+                        isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: false,
                     })
                 );
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1456,8 +1390,19 @@ describe("service-location.vue", () => {
 
             test("Should not show dual/static recalibration error if not those recalibration types", async () => {
                 // Arrange
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: true,
+                        isGlassServiceableMobile: true,
+                        isRecalibrationServiceableMobile: true,
+                    })
+                );
+
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 1e5ffa384..db8f0ab30 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
             <serviceZipModalQuestion
                 v-model="serviceZipCodeQuestion"
                 ref="serviceZipCodeQuestion"
@@ -15,37 +15,38 @@
                 modalWidgetName="ServiceZipModalWidget" />
             <alert
                 ref="alertMilitaryBaseZip"
-                class="my-4"
+                class="my-5"
                 cmsWidgetName="AlertMilitaryBaseZipWidget"
                 v-if="displayMilitaryZipAlert"
                 alertClass="alert-warning" />
             <alert
                 ref="alertMobileOnly"
-                class="my-4"
+                class="my-5"
                 cmsWidgetName="AlertMobileOnlyWidget"
                 v-if="displayServiceableMobileOnly"
                 alertClass="alert-warning" />
             <alert
                 ref="alertRecalNoMobile"
-                class="my-4"
+                class="my-5"
                 cmsWidgetName="AlertRecalNoMobileWidget"
                 v-if="displayRecalibrationWarning"
                 @text-link-clicked="openModalAction"
                 alertClass="alert-warning" />
             <alert
                 ref="alertInshopOnly"
-                class="my-4"
+                class="my-5"
                 cmsWidgetName="AlertInshopOnlyWidget"
                 v-if="displayServiceableInshopOnly"
                 alertClass="alert-warning" />
             <alert
                 ref="alertNoShops"
-                class="my-4"
+                class="my-5"
                 cmsWidgetName="AlertNoShopsWidget"
                 v-if="displayNoShopsAlert"
                 alertClass="alert-warning" />
             <appointmentTypeQuestion
                 v-model="selectedAppointmentType"
+                v-show="!displayNoShopsAlert"
                 :isServiceableMobile="isServiceableMobile"
                 :isServiceableInshop="isServiceableInshop"
                 ref="appointmentTypeQuestion"
@@ -64,11 +65,23 @@
                 ref="mobileLocationQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
+            <Transition name="fade" mode="out-in">
+                <shopQuestion
+                    ref="shopQuestion"
+                    v-show="
+                        selectedAppointmentType === 'Inshop' ||
+                        selectedAppointmentType === 'Dropoff'
+                    "
+                    v-model="providerNumber"
+                    :serviceZipCode="zipCode"
+                    :selectedAppointmentType="selectedAppointmentType"
+                    cmsWidgetName="ShopQuestionWidget" />
+            </Transition>
             <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid"
+                :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -81,6 +94,8 @@ import alert from "@/ux-components/alert/alert";
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
 import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
 import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
+import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
+
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
@@ -132,10 +147,10 @@ export default {
             isRecalibrationServiceableInshop: null,
             isGlassServiceableMobile: null,
             isRecalibrationServiceableMobile: null,
-            mobileFeePart: null,
-            zipContainsMilitaryBase: false,
             selectedAppointmentType: null,
             providerNumber: null,
+            mobileFeePart: null,
+            zipContainsMilitaryBase: false,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -149,6 +164,8 @@ export default {
 
         const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
 
+        const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData();
+
         // Settle promises and get results
         const promiseResultMap = [
             {
@@ -167,6 +184,10 @@ export default {
                 resultKey: "zipCodeData",
                 promise: getZipCodeData,
             },
+            {
+                resultKey: "shopQuestionInitialData",
+                promise: shopQuestionInitialDataPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -179,6 +200,7 @@ export default {
                 resultMap.serviceabilityDetails,
                 resultMap.mobileFeePart
             );
+            vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
         });
     },
     computed: {
@@ -198,6 +220,8 @@ export default {
 
                 this.state = newValue.state;
                 this.zipCode = newValue.zipCode;
+
+                this.$nextTick();
             },
         },
         mobileLocationQuestions: {
@@ -244,15 +268,16 @@ export default {
                 return this.isGlassServiceableInshop;
             }
         },
-        isDualOrStaticRecalibration() {
-            const supportingItems = store.getters.lineItems.supportingItems;
-
-            return supportingItems.some(
-                (item) => item.partNumber === "RECAL STATIC" || item.partNumber === "RECAL DUAL"
+        // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
+        requiresInshopRecalibration() {
+            return (
+                this.isServiceableInshop &&
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile === false
             );
         },
         displayRecalibrationWarning() {
-            return this.isDualOrStaticRecalibration;
+            return this.requiresInshopRecalibration;
         },
         displayServiceableInshopOnly() {
             return (
@@ -279,7 +304,7 @@ export default {
                 store.getters.payment.isInsurance !== null
             );
         },
-        setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
+        setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopQuestionData) {
             if (zipCodeData) {
                 this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
             }
@@ -351,6 +376,7 @@ export default {
         Form,
         loadingModal,
         contentGroupModal,
+        shopQuestion,
     },
 };
 </script>
diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.spec.js b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.spec.js
new file mode 100644
index 000000000..b9eb6299b
--- /dev/null
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.spec.js
@@ -0,0 +1,70 @@
+import { mount } from "@vue/test-utils";
+import shopListButton from "./shop-list-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+
+describe("service-package-radio.vue", () => {
+    it("Should include buttonLabel in html", async () => {
+        // Arrange
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: mockProps,
+            },
+        });
+
+        // Act
+        const outputHtml = wrapper.html();
+
+        // Assert
+        expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabel"]));
+    });
+
+    it("Should include buttonLabelSubCopy in html", async () => {
+        // Arrange
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: mockProps,
+            },
+        });
+
+        // Act
+        const outputHtml = wrapper.html();
+
+        // Assert
+        expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelSubCopy"]));
+    });
+
+    it("Should include buttonLabelAuxillaryCopy in html", async () => {
+        // Arrange
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: mockProps,
+            },
+        });
+
+        // Act
+        const outputHtml = wrapper.html();
+
+        // Assert
+        expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelAuxillaryCopy"]));
+    });
+});
+
+const mockProps = {
+    buttonLabel: "buttonLabel test copy",
+    buttonLabelSubCopy: "buttonLabelSubCopy test copy",
+    buttonBodyCopy:
+        "<ul><li>buttonBodyCopy test copy</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>",
+    buttonLabelAuxillaryCopy: "buttonLabelAuxillaryCopy test copy",
+    value: 0,
+    modelValue: 0,
+    groupName: "mockGroup",
+};
+
+function setupMocks({ mountOptionsMockData = {} }) {
+    const wrapper = mount(shopListButton, {
+        ...mountOptionsMockData,
+        mixins: [inputButtonWrapperMixin],
+    });
+
+    return { wrapper };
+}
diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
new file mode 100644
index 000000000..b8003148f
--- /dev/null
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -0,0 +1,179 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <baseInputButton
+            v-bind="$props"
+            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+            v-model="selectedValue">
+            <div
+                :aria-label="buttonLabel"
+                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+                <div class="row-one">
+                    <span class="m-0 button-label-copy" :class="textPosition">{{
+                        buttonLabel
+                    }}</span>
+                    <span class="m-0 button-label-sub-copy" :class="textPosition">{{
+                        buttonLabelSubCopy
+                    }}</span>
+                    <div
+                        class="availability-indicator"
+                        :class="availability === 'high' ? 'green' : 'red'">
+                        <span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
+                    </div>
+                </div>
+                <span
+                    v-if="buttonBodyCopy"
+                    class="m-0 button-label-sub-copy small"
+                    :class="textPosition"
+                    v-html="buttonBodyCopy"></span>
+                <span v-if="screenReaderOnlyText" class="sr-only">
+                    {{ screenReaderOnlyText }}
+                </span>
+                <loader
+                    v-if="isLoaderDisplayed && selectingInitiatesLoad"
+                    :class="[this.loaderColor, this.loaderPosition]" />
+            </div>
+        </baseInputButton>
+    </transition>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+
+export default {
+    name: "shopListButton",
+    mixins: [inputButtonWrapperMixin],
+    props: {
+        loaderColor: String,
+        loaderPosition: {
+            type: String,
+            default: "right",
+        },
+    },
+    data() {
+        return {
+            isLoaderDisplayed: false,
+            availability: "low",
+        };
+    },
+    methods: {
+        displayLoader() {
+            this.isLoaderDisplayed = true;
+        },
+        preHandleAnswerChange() {
+            if (this.selectingInitiatesLoad) {
+                this.displayLoader();
+            }
+        },
+    },
+    components: {
+        loader,
+        baseInputButton,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.loader {
+    position: absolute;
+}
+.list-button {
+    outline: none;
+    input[type="radio"],
+    input[type="checkbox"] {
+        position: static; //override bootstrap
+
+        &:focus-visible + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content {
+            color: $black;
+            font-weight: 500;
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+        }
+        &:checked:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content p,
+        &:checked + .list-button-content span {
+            font-weight: 500;
+        }
+        &:checked + .list-button-content span:nth-child(2) {
+            font-weight: 400;
+            color: $gray-600;
+        }
+    }
+}
+.list-button-content {
+    color: $gray-600;
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid $gray-500;
+    width: 100%;
+    outline: none;
+
+    span {
+        &.small {
+            font-size: 0.75rem;
+            color: $gray-550;
+        }
+    }
+}
+.button-content {
+    .row-one {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.25rem !important;
+
+        .button-label-copy {
+            flex-grow: 0;
+            line-height: 1.5rem;
+            font-weight: 500;
+        }
+
+        .button-label-sub-copy {
+            flex-grow: 1;
+            line-height: 1.25rem !important;
+            font-weight: 400;
+            font-size: 0.75rem;
+            color: #727676;
+            padding-left: 0.25rem;
+        }
+
+        .availability-indicator {
+            display: none;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0.125rem 1.5rem;
+            gap: 0.25rem;
+            background: #e3f2ea;
+            border-radius: 4.5rem;
+
+            .button-auxillary-copy {
+                justify-content: right;
+                line-height: 1.25rem !important;
+                font-weight: 400;
+                font-size: 0.75rem;
+            }
+
+            .green {
+                color: #006a36;
+                background: #e3f2ea;
+            }
+
+            .red {
+                color: #ac160b;
+                background: #e3f2ea;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/layouts/service-location/shop-question/shop-question.spec.js b/src/layouts/service-location/shop-question/shop-question.spec.js
new file mode 100644
index 000000000..8b26dfee6
--- /dev/null
+++ b/src/layouts/service-location/shop-question/shop-question.spec.js
@@ -0,0 +1,555 @@
+import { shallowMount } from "@vue/test-utils";
+import { storeActions } from "@/constants/store-actions";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import shopQuestion from "./shop-question";
+
+jest.mock("@/mixins/base-mixin", () => ({
+    methods: {
+        dispatchStoreAction(action, items, encode) {
+            if (action === mockGetProviderLocationsStoreAction) {
+                return new Promise((resolve) => {
+                    resolve(mockNewShopList);
+                });
+            }
+        },
+        scrollToPageBottom() {},
+    },
+}));
+
+const mockGetProviderLocationsStoreAction = storeActions.GET_PROVIDER_LOCATIONS;
+const mockNewShopList = {
+    data: [
+        {
+            city: "Far",
+            country: "United States",
+            distance: 100,
+            providerNumber: "129",
+            state: "OH",
+            streetAddress: "555 First Capital Ln",
+            zipCode: "45601",
+        },
+        {
+            city: "Farther",
+            country: "United States",
+            distance: 200,
+            providerNumber: "130",
+            state: "OH",
+            streetAddress: "5486 N Grove Rd",
+            zipCode: "43215",
+        },
+        {
+            city: "Farthest (Ever)",
+            country: "United States",
+            distance: 380.5,
+            providerNumber: "131",
+            state: "OH",
+            streetAddress: "1670 Bongo Ave D",
+            zipCode: "43223",
+        },
+    ],
+};
+
+const mockCmsContent = {
+    QuestionText: "Select a shop:",
+};
+
+const cmsWidgetName = "AppointmentTypeQuestionWidget";
+const shopQuestionInitialData = [
+    {
+        city: "Worthington",
+        country: "United States",
+        distance: 1.5,
+        providerNumber: "123",
+        state: "OH",
+        streetAddress: "760 Dearborn Park Ln",
+        zipCode: "43085",
+    },
+    {
+        city: "Columbus",
+        country: "United States",
+        distance: 4.5,
+        providerNumber: "124",
+        state: "OH",
+        streetAddress: "5486 N Hamilton Rd",
+        zipCode: "43230",
+    },
+    {
+        city: "Powell",
+        country: "United States",
+        distance: 7,
+        providerNumber: "125",
+        state: "OH",
+        streetAddress: "1670 Harmon Ave C",
+        zipCode: "43223",
+    },
+    {
+        city: "Chillicothe",
+        country: "United States",
+        distance: 41.5,
+        providerNumber: "126",
+        state: "OH",
+        streetAddress: "555 First Capital Ln",
+        zipCode: "45601",
+    },
+    {
+        city: "Grove City",
+        country: "United States",
+        distance: 4.5,
+        providerNumber: "127",
+        state: "OH",
+        streetAddress: "5486 N Grove Rd",
+        zipCode: "43215",
+    },
+    {
+        city: "Dayton",
+        country: "United States",
+        distance: 80.5,
+        providerNumber: "128",
+        state: "OH",
+        streetAddress: "1670 Bongo Ave D",
+        zipCode: "43223",
+    },
+    {
+        city: "Far",
+        country: "United States",
+        distance: 100,
+        providerNumber: "129",
+        state: "OH",
+        streetAddress: "555 First Capital Ln",
+        zipCode: "45601",
+    },
+    {
+        city: "Farther",
+        country: "United States",
+        distance: 200,
+        providerNumber: "130",
+        state: "OH",
+        streetAddress: "5486 N Grove Rd",
+        zipCode: "43215",
+    },
+    {
+        city: "Farthest (Ever)",
+        country: "United States",
+        distance: 380.5,
+        providerNumber: "131",
+        state: "OH",
+        streetAddress: "1670 Bongo Ave D",
+        zipCode: "43223",
+    },
+];
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            if (widgetName === cmsWidgetName) {
+                return mockCmsContent[cmsFieldName];
+            }
+
+            return null;
+        }),
+    },
+};
+
+describe("shop-question.vue", () => {
+    it("Should display first three shops when an appointment type has already been selected", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: null,
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers).toEqual([
+            {
+                Name: "123",
+                buttonLabel: "Worthington",
+                buttonLabelSubCopy: "1.5 mi",
+                buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
+            },
+            {
+                Name: "124",
+                buttonLabel: "Columbus",
+                buttonLabelSubCopy: "4.5 mi",
+                buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
+            },
+            {
+                Name: "125",
+                buttonLabel: "Powell",
+                buttonLabelSubCopy: "7 mi",
+                buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
+            },
+        ]);
+    });
+
+    it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: null,
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+        // Assert
+        expect(showMoreShopsLink.exists()).toBe(true);
+    });
+
+    it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const alsoShopQuestionInitialData = [
+            {
+                city: "Worthington",
+                country: "United States",
+                distance: 1.5,
+                providerNumber: "123",
+                state: "OH",
+                streetAddress: "760 Dearborn Park Ln",
+                zipCode: "43085",
+            },
+            {
+                city: "Columbus",
+                country: "United States",
+                distance: 4.5,
+                providerNumber: "124",
+                state: "OH",
+                streetAddress: "5486 N Hamilton Rd",
+                zipCode: "43230",
+            },
+            {
+                city: "Powell",
+                country: "United States",
+                distance: 7,
+                providerNumber: "125",
+                state: "OH",
+                streetAddress: "1670 Harmon Ave C",
+                zipCode: "43223",
+            },
+        ];
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: null,
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(alsoShopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+        // Assert
+        expect(showMoreShopsLink.exists()).toBe(false);
+    });
+
+    it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const displayedAnswers = [
+            {
+                Name: "123",
+                buttonLabel: "Worthington",
+                buttonLabelSubCopy: "1.5 mi",
+                buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
+            },
+            {
+                Name: "124",
+                buttonLabel: "Columbus",
+                buttonLabelSubCopy: "4.5 mi",
+                buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
+            },
+            {
+                Name: "125",
+                buttonLabel: "Powell",
+                buttonLabelSubCopy: "7 mi",
+                buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
+            },
+        ];
+
+        // Arrange/Act
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: null,
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+
+        wrapper.vm.shops = shopQuestionInitialData;
+        wrapper.vm.answers = displayedAnswers;
+        wrapper.vm.shopIndex = 3;
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+        showMoreShopsLink.trigger("click");
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toBe(6);
+        expect(wrapper.vm.answers).toEqual([
+            {
+                Name: "123",
+                buttonLabel: "Worthington",
+                buttonLabelSubCopy: "1.5 mi",
+                buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
+            },
+            {
+                Name: "124",
+                buttonLabel: "Columbus",
+                buttonLabelSubCopy: "4.5 mi",
+                buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
+            },
+            {
+                Name: "125",
+                buttonLabel: "Powell",
+                buttonLabelSubCopy: "7 mi",
+                buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
+            },
+            {
+                Name: "126",
+                buttonLabel: "Chillicothe",
+                buttonLabelSubCopy: "41.5 mi",
+                buttonBodyCopy: "555 First Capital Ln, Chillicothe, OH 45601",
+            },
+            {
+                Name: "127",
+                buttonLabel: "Grove City",
+                buttonLabelSubCopy: "4.5 mi",
+                buttonBodyCopy: "5486 N Grove Rd, Grove City, OH 43215",
+            },
+            {
+                Name: "128",
+                buttonLabel: "Dayton",
+                buttonLabelSubCopy: "80.5 mi",
+                buttonBodyCopy: "1670 Bongo Ave D, Dayton, OH 43223",
+            },
+        ]);
+    });
+
+    it("Should display the number of shops necessary to show a previously selected shop", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: "127",
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toEqual(5);
+    });
+
+    it("Should reset the answers when the selected appointment type changes", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: "127",
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        wrapper.setProps({
+            selectedAppointmentType: "Inshop",
+        });
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toEqual(3);
+    });
+
+    it("Should reload the shops when the service zip code changes", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: "127",
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.shops = shopQuestionInitialData;
+
+        await wrapper.vm.$nextTick();
+
+        wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => {
+            return new Promise((resolve) => {
+                resolve(newShopList);
+            });
+        });
+        await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054");
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.shops.length).toEqual(3);
+        expect(wrapper.vm.shops).toEqual(mockNewShopList.data);
+    });
+
+    it("Should clear the existing answers when the service zip code changes", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: "127",
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        wrapper.setProps({
+            selectedAppointmentType: "Inshop",
+        });
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toEqual(3);
+    });
+});
+
+function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
+    const resultingMountOptions = getMountOptions({
+        ...mountOptions,
+        mixins,
+    });
+
+    if (props) resultingMountOptions.propsData = props;
+
+    const wrapper = isShallowMount
+        ? shallowMount(shopQuestion, resultingMountOptions)
+        : mount(shopQuestion, resultingMountOptions);
+
+    return { wrapper };
+}
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
new file mode 100644
index 000000000..cbe022d5e
--- /dev/null
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -0,0 +1,222 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div class="shop-question" aria-live="polite">
+            <alert
+                ref="alertDropoffInformation"
+                v-if="displayDropoffInformation"
+                class="mb-4 drop-off-alert"
+                cmsWidgetName="AlertDropoffInformationWidget"
+                alertClass="alert-info"
+                v-bind:isDismissible="false" />
+            <buttonQuestion
+                ref="buttonQuestion"
+                buttonTypeString="shopListButton"
+                :buttonTypeObject="shopListButton"
+                class="radioQuestion"
+                :questionText="questionText"
+                :answers="answers"
+                groupName="chooseShop"
+                textPosition="text-start"
+                v-model="selectedValue"
+                isRequired
+                validationRules="option-required" />
+            <textLink
+                v-if="displaySeeMoreLocationsLink"
+                ref="showMoreShopsLink"
+                class="show-more-shops-link"
+                id="showMoreShopsId"
+                cmsWidgetName="ShowMoreShopsLinkWidget"
+                linkType="text"
+                :text="showMoreShopsLinkText"
+                href="#!"
+                @click-event="getNextShopsFromList"
+                :aria-label="showMoreShopsLinkText" />
+        </div>
+    </transition>
+</template>
+
+<script>
+// Components
+import alert from "@/ux-components/alert/alert";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import shopListButton from "./shop-list-button/shop-list-button";
+import textLink from "@/ux-components/text-link/text-link";
+
+import { storeActions } from "@/constants/store-actions.js";
+
+// Supporting files
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import baseMixin from "@/mixins/base-mixin.js";
+
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "shop-question",
+    mixins: [baseMixin],
+    data() {
+        return {
+            shops: [],
+            shopListButton: shopListButton,
+            answers: [],
+            shopIndex: 0,
+            displaySeeMoreLocationsLink: false,
+        };
+    },
+    props: {
+        modelValue: String,
+        serviceZipCode: String,
+        selectedAppointmentType: String,
+        cmsWidgetName: String,
+        validationRules: String,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        displayDropoffInformation() {
+            return this.selectedAppointmentType == "Dropoff";
+        },
+        showMoreShopsLinkText() {
+            return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
+        },
+    },
+    methods: {
+        loadInitialData() {
+            return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
+                serviceZipCode: this.serviceZipCode,
+            });
+        },
+        initializeComponent(shopQuestionInitialData) {
+            this.shops = shopQuestionInitialData;
+        },
+        async getNextShopsFromList(numberToGet = 3) {
+            const shopIterator = (array, n) => {
+                const l = array.length;
+                return () => {
+                    const end = this.shopIndex + n;
+                    const part = array.slice(this.shopIndex, end);
+                    this.shopIndex = end < l ? end : this.shops.length;
+                    return part;
+                };
+            };
+
+            const nextShop = shopIterator(this.shops, numberToGet);
+
+            // Map API result data
+            const mappedData = nextShop().map((shop) => {
+                return {
+                    Name: shop.providerNumber,
+                    buttonLabel: shop.city,
+                    buttonLabelSubCopy: `${shop.distance} mi`,
+                    buttonBodyCopy: `${shop.streetAddress}, ${shop.city}, ${shop.state} ${shop.zipCode}`,
+                };
+            });
+
+            if (this.answers.length === 0) {
+                this.answers = mappedData;
+            } else {
+                mappedData.forEach((shop) => {
+                    this.answers.push(shop);
+                });
+            }
+
+            await this.$nextTick();
+
+            if (this.shopIndex == this.shops.length) {
+                this.displaySeeMoreLocationsLink = false;
+            } else {
+                this.displaySeeMoreLocationsLink = true;
+            }
+
+            await this.$nextTick();
+
+            this.scrollToPageBottom();
+        },
+        resetShopList() {
+            this.answers = [];
+            this.shopIndex = 0;
+            this.selectedValue = "";
+            this.$refs.buttonQuestion.resetField();
+        },
+        async reloadShopData(serviceZipCode) {
+            const result = await this.loadInitialData(serviceZipCode);
+            this.initializeComponent(result.data);
+            this.resetShopList();
+        },
+    },
+    watch: {
+        serviceZipCode: {
+            async handler(newValue) {
+                await this.reloadShopData(newValue);
+            },
+        },
+        selectedAppointmentType: {
+            async handler(newValue) {
+                // If the validation has been previously triggered, clear it before displaying the component
+                this.$refs.buttonQuestion.resetField();
+
+                this.resetShopList();
+                await this.getNextShopsFromList();
+
+                await this.$nextTick();
+
+                this.scrollToPageBottom();
+            },
+        },
+        shops: {
+            handler(newValue) {
+                this.$refs.buttonQuestion.resetField();
+                const selectedShopIndex = newValue.findIndex(
+                    (provider) => provider.providerNumber == this.modelValue
+                );
+
+                if (selectedShopIndex >= 3) {
+                    this.getNextShopsFromList(selectedShopIndex + 1);
+                } else {
+                    this.getNextShopsFromList();
+                }
+            },
+        },
+    },
+    components: {
+        alert,
+        buttonQuestion,
+        textLink,
+    },
+};
+</script>
+
+<style lang="scss">
+.shop-question {
+    margin-top: 1rem !important;
+    text-align: center !important;
+
+    .button-question {
+        .question-text {
+            margin-top: 0.5rem !important;
+        }
+    }
+}
+
+.drop-off-alert {
+    .alert-heading {
+        text-align: left;
+        font-size: 0.75rem !important;
+        line-height: 1.25rem !important;
+    }
+
+    margin-top: 0.5rem !important;
+    padding-left: 1.5rem !important;
+    padding-right: 0.5rem !important;
+}
+</style>
diff --git a/src/layouts/vin-lookup/vin-information/vin-information.vue b/src/layouts/vin-lookup/vin-information/vin-information.vue
index 9571cb5eb..a0eaf9536 100644
--- a/src/layouts/vin-lookup/vin-information/vin-information.vue
+++ b/src/layouts/vin-lookup/vin-information/vin-information.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="vin-information">
-        <div class="vin-toggle mt-2" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+        <div class="vin-toggle" :class="[isActive ? 'active' : '']" @click="toggleClass()">
             <textLink linkType="text" href="#!" :text="WhereCanIFindMyVINHeadline" />
         </div>
         <div class="vin-info">
diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js
index fc15d3667..f47fdfb36 100644
--- a/src/layouts/vin-lookup/vin-lookup.spec.js
+++ b/src/layouts/vin-lookup/vin-lookup.spec.js
@@ -242,6 +242,97 @@ describe("vin-lookup.vue", () => {
             // Assert
             expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(0);
         });
+
+        test("Error emitted by textbox-question element => VinScanFailed alert shown.", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const vinLookup = wrapper.findComponent('[data-test="vin-lookup-component"]');
+            vinLookup.trigger("imageLookupError");
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(1);
+        });
+    });
+
+    describe("getVinFromImage", () => {
+        test("GetVinFromImage resolves with first valid VIN when any vins are returned.", async () => {
+            // Arrange
+            const responseValue = "testResponse";
+            const lookup = jest.fn().mockImplementation(() => {
+                return new Promise((resolve, reject) => resolve([responseValue]));
+            });
+
+            const image = {};
+
+            const storeMixin = {
+                methods: {
+                    dispatchStoreAction: lookup,
+                },
+            };
+
+            const { wrapper } = setupMocks({
+                mixins: [storeMixin],
+            });
+
+            // Act
+            const response = await wrapper.vm.getVinFromImage(image);
+
+            // Assert
+            expect(lookup).toHaveBeenCalled();
+            expect(response).toEqual(responseValue);
+        });
+
+        test("GetVinFromImage rejects if no vins are returned.", async () => {
+            // Arrange
+            const lookup = jest.fn().mockImplementation(() => {
+                return new Promise((resolve, reject) => resolve([]));
+            });
+
+            const image = {};
+
+            const storeMixin = {
+                methods: {
+                    dispatchStoreAction: lookup,
+                },
+            };
+
+            const { wrapper } = setupMocks({
+                mixins: [storeMixin],
+            });
+
+            // Act
+            const promise = wrapper.vm.getVinFromImage(image);
+
+            // Assert
+            await expect(promise).rejects.toEqual("No VINs detected.");
+        });
+
+        test("GetVinFromImage rejects if an error occurs.", async () => {
+            const lookup = jest.fn().mockImplementation(() => {
+                return new Promise((resolve, reject) => reject());
+            });
+
+            const image = {};
+
+            const storeMixin = {
+                methods: {
+                    dispatchStoreAction: lookup,
+                },
+            };
+
+            const { wrapper } = setupMocks({
+                mixins: [storeMixin],
+            });
+
+            // Act
+            const promise = wrapper.vm.getVinFromImage(image);
+
+            // Assert
+            await expect(promise).rejects.toEqual("An error occurred during the lookup.");
+        });
     });
 });
 
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 9188d7202..578f3f72d 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -8,7 +8,7 @@
                 :displayGenericVehicleImage="false" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container make-tall">
-                <div class="row mt-2">
+                <div class="row mb-2">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="VinNumberQuestionWidget"
@@ -18,15 +18,30 @@
                             validationRules="vin-required|vin-format"
                             :isDisabled="vinPopulatedOnPageLoad"
                             maxLength="17"
-                            :mask="vinMask" />
+                            :mask="vinMask"
+                            includeImageQuestion
+                            :imageQuestionSubmitHandler="getVinFromImage"
+                            :maxFileSize="imageUploadMaxFileSize"
+                            @image-lookup-error="displayVinScanAlert"
+                            @image-validity-error="displayVinScanAlert"
+                            data-test="vin-lookup-field"
+                            ref="vinLookupQuestion" />
                     </div>
                 </div>
-                <div class="row mb-2">
+                <div class="row">
+                    <div class="col">
+                        <alert
+                            cmsWidgetName="AlertVinScanFailed"
+                            v-if="displayVinScanFailedAlert"
+                            alertClass="alert-danger" />
+                    </div>
+                </div>
+                <div class="row">
                     <div class="col">
                         <vinInformation />
                     </div>
                 </div>
-                <div class="row my-2">
+                <div class="row mb-0 mt-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="ServiceZipQuestionWidget"
@@ -37,7 +52,7 @@
                             validationRules="zip-required|zip-format" />
                     </div>
                 </div>
-                <div class="row mt-2">
+                <div class="row mt-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="EmailAddressQuestionWidget"
@@ -184,6 +199,7 @@ export default {
             displayNonServiceableZipAlert: false,
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
+            displayVinScanFailedAlert: false,
         };
     },
     methods: {
@@ -381,11 +397,30 @@ export default {
                 await this.navigateForwardWithSingleCarMatch();
             }
         },
+        displayVinScanAlert() {
+            this.displayVinScanFailedAlert = true;
+        },
+        getVinFromImage(image) {
+            return new Promise((resolve, reject) => {
+                this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, image)
+                    .then((response) => {
+                        if (response.data.length > 0) {
+                            resolve(response.data[0]);
+                        } else {
+                            reject("No VINs detected.");
+                        }
+                    })
+                    .catch(() => {
+                        reject("An error occurred during the lookup.");
+                    });
+            });
+        },
         resetAlerts() {
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayNonServiceableZipAlert = false;
             this.displayInvalidZipAlert = false;
             this.displayVinNotFoundAlert = false;
+            this.displayVinScanFailedAlert = false;
         },
     },
     mounted() {
@@ -446,10 +481,16 @@ export default {
                 return "XXXXXXXXXXXXXXXXX";
             }
         },
+        imageUploadMaxFileSize() {
+            let kiloBytes = 5140;
+
+            return kiloBytes * 1028;
+        },
     },
     watch: {
         vin() {
             this.displayVinNotFoundAlert = false;
+            this.displayVinScanFailedAlert = false;
             this.$refs.funnelFooter.updateButtonText(
                 this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
             );
diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js
index 3fbc9501d..29eb76c3d 100644
--- a/src/mixins/analytics-mixin.js
+++ b/src/mixins/analytics-mixin.js
@@ -146,18 +146,18 @@ export default {
                 false
             );
 
-            if (response.data) {
-                if (response.data.sessionKey && skey === 0) {
+            if (response?.data) {
+                if (response?.data.sessionKey && skey === 0) {
                     setCookieProperties(
-                        { [cookieNames.SESSION_KEY]: response.data.sessionKey },
+                        { [cookieNames.SESSION_KEY]: response?.data.sessionKey },
                         {
                             useDefaultFunnelCookieAttributes: false,
                         }
                     );
                 }
-                if (response.data.sessionId && sid === "00000000-0000-0000-0000-000000000000") {
+                if (response?.data.sessionId && sid === "00000000-0000-0000-0000-000000000000") {
                     setCookieProperties(
-                        { [cookieNames.SESSION_ID]: response.data.sessionId },
+                        { [cookieNames.SESSION_ID]: response?.data.sessionId },
                         {
                             maxAge: 60 * 30, // 30 minutes
                         }
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 43ce4c132..488500639 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -99,6 +99,14 @@ export default {
         getTotalLineItemPrice(lineItem) {
             return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
         },
+        scrollToPageTop() {
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
+            container.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+        },
+        scrollToPageBottom() {
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
+            container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
+        },
     },
     computed: {
         storeActions() {
diff --git a/src/router/index.js b/src/router/index.js
index 7f0a20b80..3abfa058d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -161,6 +161,11 @@ const routes = [
 const router = createRouter({
     history: createWebHistory("/fmg/"),
     routes,
+    //Cause "page" to begin at the top when route chanages.
+    scrollBehavior(to, from, savedPosition) {
+        // always scroll to top
+        return { top: 0 };
+    },
 });
 
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------
diff --git a/src/store/index.js b/src/store/index.js
index 0549ed8c4..420248024 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -532,6 +532,16 @@ export const actions = {
             },
         });
     },
+    lookupVinByImage(context, image) {
+        const data = new FormData();
+        data.append("vinImage", image);
+        return globalMethods.callHttpClient({
+            method: endpoints.LookupVinByImage.method,
+            endpoint: endpoints.LookupVinByImage.url,
+            payload: data,
+            isFormData: true,
+        });
+    },
     isVinByAddressPermissible(context, zip) {
         return globalMethods.callHttpClient({
             method: endpoints.IsVinByAddressPermissible.method,
@@ -717,12 +727,21 @@ export const actions = {
             experimentsForUser: experimentsForUser,
         };
 
-        return globalMethods.callHttpClient({
-            method: endpoints.LogPageView.method,
-            endpoint: endpoints.LogPageView.url,
-            payload: payload,
-            logApiCall: false,
-        });
+        return globalMethods
+            .callHttpClient({
+                method: endpoints.LogPageView.method,
+                endpoint: endpoints.LogPageView.url,
+                payload: payload,
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
     logCustomEvent(
         context,
@@ -753,12 +772,21 @@ export const actions = {
             experimentsForUser: experimentsForUser,
         };
 
-        return globalMethods.callHttpClient({
-            method: endpoints.LogCustomEvent.method,
-            endpoint: endpoints.LogCustomEvent.url,
-            payload: payload,
-            logApiCall: false,
-        });
+        return globalMethods
+            .callHttpClient({
+                method: endpoints.LogCustomEvent.method,
+                endpoint: endpoints.LogCustomEvent.url,
+                payload: payload,
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
     initializeSession(context, { userId, sessionId, userAgent, referrer }) {
         var payload = {
@@ -772,12 +800,21 @@ export const actions = {
             referrer: referrer,
         };
 
-        return globalMethods.callHttpClient({
-            method: endpoints.InitializeSession.method,
-            endpoint: endpoints.InitializeSession.url,
-            payload: payload,
-            logApiCall: false,
-        });
+        return globalMethods
+            .callHttpClient({
+                method: endpoints.InitializeSession.method,
+                endpoint: endpoints.InitializeSession.url,
+                payload: payload,
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
 
     // Misc Actions
@@ -917,48 +954,38 @@ export const actions = {
     },
 
     getMobileFeePart(context) {
-        const serviceType = context.getters.damage.isRepair ? "Repair" : "Replace";
+        const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
         const parentAccountNumber = context.getters.payment.parentAccountNumber;
         const billToAccountNumber = 87291; // TODO: MAKE THIS REAL
 
         return globalMethods.callHttpClient({
             method: endpoints.GetMobileFeePart.method,
-            endpoint: `${endpoints.GetMobileFeePart.url}/${serviceType}/${parentAccountNumber}/${billToAccountNumber}`,
+            endpoint: `${endpoints.GetMobileFeePart.url}/${damageType}/${parentAccountNumber}/${billToAccountNumber}`,
         });
     },
 
     getServiceabilityDetails(context, { serviceZipCode }) {
-        return globalMethods.callMockHttpClient({
+        const lineItemsWithOnlyPartNumbers = context.getters.order.lineItems.supportingItems.map(
+            (lineItem) => ({
+                partNumber: lineItem.partNumber,
+            })
+        );
+        const lineItemsToSend = buildQueryStringParameterFromArrayOfComplexObjects(
+            lineItemsWithOnlyPartNumbers,
+            "lineItems"
+        );
+        return globalMethods.callHttpClient({
             method: endpoints.GetServiceabilityDetails.method,
-            //TODO: Remove Mocky Endpoints
-            //endpoint: "https://run.mocky.io/v3/59e1a644-cf16-4f08-8069-1ab2a1e38f79", // NoShopsAvailable
-            //endpoint: "https://run.mocky.io/v3/4fe1fb89-dd56-4e4a-9af2-96bd1ab77847", // ForcedInshop
-            //endpoint: "https://run.mocky.io/v3/e2eaa097-6ea5-4906-af53-901edaa94939", // ForcedMobile
-            endpoint: "https://run.mocky.io/v3/1811a1fe-12a7-48f3-939e-d10a9b77dd25", // All Options
+            endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&${lineItemsToSend}`,
         });
+    },
 
-        // TODO: Restore this when CSR-1104 is 100% complete
-        // const lineItems = context.getters.order.lineItems;
-        // const lineItemsToSend = [...lineItems.supportingItems];
-        // const encodedLineItems = encodeURIComponent(JSON.stringify(lineItemsToSend));
-
-        //TODO: Restore this when CSR-1204 is 100% complete. Line# 958 to 961 should be removed Begin
-        // const vehicle = context.getters.vehicle;
-        // const carId = vehicle.carId;
-        // const damage = context.getters.damage;
-        // const glassArray = damage.glassToReplace;
-        // // create a new array to avoid mutating state
-        // const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
-        // return globalMethods.callHttpClient({
-        //     method: endpoints.GetServiceabilityDetails.method,
-        //     endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}&carId=${carId}&glassPieces=${glassArrayForPayload}`,
-        // });
-        //TODO: Restore this when CSR-1204 is 100% complete End
-
-        // return globalMethods.callHttpClient({
-        //     method: endpoints.GetServiceabilityDetails.method,
-        //     endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}`,
-        // });
+    getProviderLocations(context, { serviceZipCode }) {
+        return globalMethods.callMockHttpClient({
+            method: endpoints.GetProviderLocations.method,
+            //TODO: Remove Mocky Endpoints
+            endpoint: "https://run.mocky.io/v3/abf2fa63-8287-4e46-b169-f5bec65c8dff",
+        });
     },
 
     getSupportingItems(context) {
@@ -972,7 +999,7 @@ export const actions = {
             endpoint: endpoints.GetSupportingItems.url,
             payload: {
                 carId: carId,
-                serviceType: isRepair ? "Repair" : "Replace",
+                damageType: isRepair ? "Repair" : "Replace",
                 parentAccountNumber: applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
                 parts: glassPartsArray,
                 numberOfRepairChips: isRepair ? numberOfChips : 0,
@@ -1480,9 +1507,16 @@ export const actions = {
         const ctuToUse = serviceZipCodeCtu
             ? serviceZipCodeCtu
             : context.getters.order.serviceLocation.zipCodeCtu;
-
+        const flattenedLineItemsWithChildParts =
+            getFlattenedArrayOfLineItemsWithChildParts(availableLineItems);
+        const lineItemsWithOnlyPartNumbers = flattenedLineItemsWithChildParts.map((lineItem) => ({
+            partNumber: lineItem.partNumber,
+        }));
         const availableLineItemsFormattedForRequest =
-            getLineItemQueryStringForPricing(availableLineItems);
+            buildQueryStringParameterFromArrayOfComplexObjects(
+                lineItemsWithOnlyPartNumbers,
+                "lineItems"
+            );
 
         const vehicle = context.getters.order.vehicle;
 
@@ -1495,7 +1529,7 @@ export const actions = {
             `&Year=${vehicle.year}` +
             `&EON=${context.getters.order.eon}` +
             `&ZipCode=${zipCodeToUse}` +
-            `${availableLineItemsFormattedForRequest}`;
+            `&${availableLineItemsFormattedForRequest}`;
 
         const lineItemServerData = context.getters.order.lineItems.serverData;
 
@@ -1677,14 +1711,28 @@ function addPricesToLineItems(lineItems, pricingLineItems) {
     });
     return lineItems;
 }
-function getLineItemQueryStringForPricing(lineItems) {
-    return lineItems
-        .map((lineItem) => {
-            let queryStringSnippet = `&LineItems=${lineItem.partNumber}`;
-            if (lineItem.childParts) {
-                queryStringSnippet += getLineItemQueryStringForPricing(lineItem.childParts);
-            }
-            return queryStringSnippet;
-        })
-        .join("");
+
+function getFlattenedArrayOfLineItemsWithChildParts(lineItems) {
+    let flattenedArray = [];
+    lineItems.forEach((lineItem) => {
+        flattenedArray.push(lineItem);
+        if (lineItem.childParts) {
+            flattenedArray = [
+                ...flattenedArray,
+                ...getFlattenedArrayOfLineItemsWithChildParts(lineItem.childParts),
+            ];
+        }
+    });
+    return flattenedArray;
+}
+
+function buildQueryStringParameterFromArrayOfComplexObjects(arrayOfObjects, parameterName) {
+    let queryStringParameter = "";
+    for (let i = 0; i < arrayOfObjects.length; i++) {
+        for (const [key, value] of Object.entries(arrayOfObjects[i])) {
+            queryStringParameter += `${parameterName}[${i}].${key}=${value}&`;
+        }
+    }
+    // Remove trailing &
+    return queryStringParameter.slice(0, -1);
 }
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 8eb947e73..6913c0527 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -403,6 +403,39 @@ describe("Actions", () => {
         expect(response.data).toEqual({ carId: "C00000001" });
     });
 
+    it("lookupVinByImage action, should return list of vins", async () => {
+        // Arrange
+        const context = state;
+        const dummyImage = {};
+
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: ["1C6JJTAG3NL134044"] });
+        });
+
+        // Act
+        const response = await actions.lookupVinByImage(context, dummyImage);
+
+        // Assert
+        expect(response.data).toEqual(["1C6JJTAG3NL134044"]);
+    });
+
+    it("lookupVinByImage action, should reject if error in calling API", async () => {
+        // Arrange
+        const context = state;
+        const dummyImage = {};
+
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.reject("An error occurred");
+        });
+
+        // Act
+
+        // Assert
+        await expect(actions.lookupVinByImage(context, dummyImage)).rejects.toEqual(
+            "An error occurred"
+        );
+    });
+
     it("getVehicleMakes action, should return makes list", async () => {
         // Arrange
         const context = state;