diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index c317c9b90..64703d682 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",
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 52fa6d877..019ac2310 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",
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..ec7b165a0 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -86,7 +86,7 @@ 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";
 
 export default {
     name: "buttonQuestion",
@@ -128,6 +128,29 @@ export default {
         valueToLogType: String,
         additionalButtonStyling: String,
         isSmallQuestionText: Boolean,
+        customButtonQuestionId: String,
+    },
+    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 +249,11 @@ export default {
             this.$emit(`buttonEvent.${eventName}`, event.args);
         },
     },
+    watch: {
+        modelValue() {
+            this.resetField();
+        },
+    },
     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 3bd0721f2..cec960fa1 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -59,7 +59,6 @@ export default {
     },
     setup() {
         const modalId = `modal-${crypto.randomUUID()}`;
-
         const { meta, validate, resetForm } = useForm();
 
         return {
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/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..6260df9d1 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,7 @@
     <transition name="fade" mode="out-in">
         <div class="appointment-type-question" aria-live="polite">
             <buttonQuestion
+                customButtonQuestionId="appointmentTypeQuestion"
                 :questionText="questionText"
                 :answers="answersToDisplay"
                 :groupName="groupName"
@@ -44,7 +45,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 = [];
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 acc0c9787..4b0a4a1ac 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
@@ -1,7 +1,7 @@
 <template>
     <transition name="fade" mode="out-in">
         <div class="mobile-location-questions">
-            <div class="text-center">
+            <div class="text-center" :id="componentId">
                 <label
                     for="mobileLocationLinkPromptId"
                     :aria-label="mobileLocationLinkPromptText"
@@ -21,6 +21,11 @@
                     :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>
             </div>
             <modal
                 :ref="modalName"
@@ -61,12 +66,14 @@ import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location
 
 // Helpers
 import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
-
 import {
     getPricedMobileFeePart,
     getServiceabilityDetails,
 } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
+// Validation
+import { useField } from "vee-validate";
+
 export default {
     name: "mobile-location-modal-questions",
     emits: ["update:modelValue", "updated-mobile-fee-part", "updated-contains-military-base"],
@@ -76,6 +83,35 @@ export default {
             displayInvalidZipAlert: false,
         };
     },
+    setup(props) {
+        const componentId = !props.customComponentId
+            ? `component-${crypto.randomUUID()}`
+            : props.customComponentId;
+
+        // Integrate this component as a single field with an object for it's value into the page level validation
+        const modelValue = deepClone(props).modelValue;
+        const initialValue = modelValue;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue: initialValue,
+        };
+
+        const { errorMessage, handleChange, meta, validate, errors } = useField(
+            componentId,
+            props.validationRules,
+            fieldOptions
+        );
+
+        return {
+            componentId,
+            errorMessage,
+            handleChange,
+            validate,
+            meta,
+            errors,
+        };
+    },
     props: {
         modelValue: {
             type: Object,
@@ -98,6 +134,8 @@ export default {
         modalWidgetName: String,
         alertNonServiceableZipWidgetName: String,
         alertInvalidZipWidgetName: String,
+        customComponentId: String,
+        validationRules: String,
     },
     computed: {
         mobileLocationLinkPromptText() {
@@ -161,7 +199,7 @@ export default {
         },
         onModalClosed() {
             this.internalModel = deepClone(this.modelValue);
-            this.resetAlerts();
+            this.resetValidation();
         },
         resetComponent(updatedServiceZipCodeInfo) {
             // Reset the validation form, setting the initial values
@@ -180,8 +218,18 @@ export default {
         resetModalButtonStyle() {
             this.$refs[this.modalName].resetButtonStyle();
         },
-        resetAlerts() {
+        resetValidation() {
             this.$refs.addressQuestions.resetAlerts();
+
+            this.$refs[this.modalName].resetForm({
+                values: {
+                    autocomplete: this.internalModel.addressQuestions.streetAddress,
+                    city: this.internalModel.addressQuestions.city,
+                    state: this.internalModel.addressQuestions.state,
+                    zipCode: this.internalModel.addressQuestions.zipCode,
+                    isVehicleProtected: this.internalModel.isVehicleProtected,
+                },
+            });
         },
         async setMobileLocation() {
             // Validate the Zip Code
@@ -217,6 +265,8 @@ export default {
             handler(newValue) {
                 this.internalModel = deepClone(newValue);
 
+                this.handleChange(newValue);
+
                 this.resetComponent({
                     streetAddress: newValue.addressQuestions.streetAddress,
                     city: newValue.addressQuestions.city,
@@ -240,6 +290,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.mobile-location-questions {
+    .center-error-message {
+        justify-content: center !important;
+    }
+}
+
 .update-zip-text-link::before {
     content: "";
     display: inline-block;
diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
index 3589596df..6f2443a49 100644
--- a/src/layouts/service-location/service-location.spec.js
+++ b/src/layouts/service-location/service-location.spec.js
@@ -260,7 +260,11 @@ describe("service-location.vue", () => {
             const { wrapper } = setupMocks({
                 mixins: [mockMixin],
             });
-            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
+
+            const mobileLocationQuestionsComponent = wrapper.findComponent({
+                ref: "mobileLocationQuestions",
+            });
+            mobileLocationQuestionsComponent.resetComponent = jest.fn();
 
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
@@ -281,8 +285,16 @@ describe("service-location.vue", () => {
         test("resets mobile location when service zip code is updated", () => {
             // Arrange
             const { wrapper } = setupMocks({});
-            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
-            wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
+
+            const mobileLocationQuestionsComponent = wrapper.findComponent({
+                ref: "mobileLocationQuestions",
+            });
+            mobileLocationQuestionsComponent.resetComponent = jest.fn();
+
+            const serviceZipCodeComponent = wrapper.findComponent({
+                ref: "serviceZipCodeQuestion",
+            });
+            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
 
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
@@ -312,10 +324,6 @@ describe("service-location.vue", () => {
                 isVehicleProtected: null,
             };
 
-            const serviceZipCodeComponent = wrapper.findComponent({
-                ref: "serviceZipCodeQuestion",
-            });
-
             // Act
             serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
 
@@ -326,8 +334,16 @@ describe("service-location.vue", () => {
         test("resets appointment type selection when service zip code is updated by service zip modal", () => {
             // Arrange
             const { wrapper } = setupMocks({});
-            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
-            wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
+
+            const mobileLocationQuestionsComponent = wrapper.findComponent({
+                ref: "mobileLocationQuestions",
+            });
+            mobileLocationQuestionsComponent.resetComponent = jest.fn();
+
+            const serviceZipCodeComponent = wrapper.findComponent({
+                ref: "serviceZipCodeQuestion",
+            });
+            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
 
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
@@ -336,10 +352,6 @@ describe("service-location.vue", () => {
 
             wrapper.vm.selectedAppointmentType = "Inshop";
 
-            const serviceZipCodeComponent = wrapper.findComponent({
-                ref: "serviceZipCodeQuestion",
-            });
-
             // Act
             serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
 
@@ -350,7 +362,17 @@ describe("service-location.vue", () => {
         test("displays military zip message when zip is updated", () => {
             // Arrange
             const { wrapper } = setupMocks({});
-            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
+
+            const mobileLocationQuestionsComponent = wrapper.findComponent({
+                ref: "mobileLocationQuestions",
+            });
+            mobileLocationQuestionsComponent.resetComponent = jest.fn();
+
+            const serviceZipCodeComponent = wrapper.findComponent({
+                ref: "serviceZipCodeQuestion",
+            });
+            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
+
             expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
 
             const newServiceZipCodeQuestion = {
@@ -358,10 +380,6 @@ describe("service-location.vue", () => {
                 state: "OH",
             };
 
-            const serviceZipCodeComponent = wrapper.findComponent({
-                ref: "serviceZipCodeQuestion",
-            });
-
             // Act
             serviceZipCodeComponent.vm.$emit("updated-contains-military-base", true);
 
@@ -371,10 +389,23 @@ describe("service-location.vue", () => {
     });
 
     describe("updating mobile location", () => {
-        test("updates the page model after providing the mobile location", () => {
+        test("updates the page model after providing the mobile location", async () => {
             // Arrange
             const { wrapper } = setupMocks({});
-            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
+
+            await wrapper.setData({
+                selectedAppointmentType: "Mobile",
+            });
+
+            const mobileLocationQuestionsComponent = wrapper.findComponent({
+                ref: "mobileLocationQuestions",
+            });
+            mobileLocationQuestionsComponent.resetComponent = jest.fn();
+
+            const serviceZipCodeComponent = wrapper.findComponent({
+                ref: "serviceZipCodeQuestion",
+            });
+            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
 
             const mobileLocationQuestions = {
                 addressQuestions: {
@@ -399,12 +430,11 @@ describe("service-location.vue", () => {
                 isVehicleProtected: true,
             };
 
-            const mobileLocationComponent = wrapper.findComponent({
-                ref: "mobileLocationModalQuestions",
-            });
-
             // Act
-            mobileLocationComponent.vm.$emit("update:modelValue", newMobileLocationQuestions);
+            mobileLocationQuestionsComponent.vm.$emit(
+                "update:modelValue",
+                newMobileLocationQuestions
+            );
 
             // Assert
             expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
@@ -413,8 +443,20 @@ describe("service-location.vue", () => {
         test("resets service zip code when mobile location is updated", async () => {
             // Arrange
             const { wrapper } = setupMocks({});
-            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
-            wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
+
+            await wrapper.setData({
+                selectedAppointmentType: "Mobile",
+            });
+
+            const mobileLocationQuestionsComponent = wrapper.findComponent({
+                ref: "mobileLocationQuestions",
+            });
+            mobileLocationQuestionsComponent.resetComponent = jest.fn();
+
+            const serviceZipCodeComponent = wrapper.findComponent({
+                ref: "serviceZipCodeQuestion",
+            });
+            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
 
             const mobileLocationQuestions = {
                 addressQuestions: {
@@ -441,10 +483,6 @@ describe("service-location.vue", () => {
                 mobileFeePart: null,
             };
 
-            const mobileLocationComponent = wrapper.findComponent({
-                ref: "mobileLocationModalQuestions",
-            });
-
             wrapper.vm.serviceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
@@ -456,29 +494,38 @@ describe("service-location.vue", () => {
             };
 
             // Act
-            mobileLocationComponent.vm.$emit("update:modelValue", newMobileLocationQuestions);
+            mobileLocationQuestionsComponent.vm.$emit(
+                "update:modelValue",
+                newMobileLocationQuestions
+            );
 
             // Assert
             expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo);
         });
 
-        test("resets appointment type selection when service zip code is updated by mobile location modal when Mobile is not selected", () => {
+        test("resets appointment type selection when service zip code is updated by mobile location modal when Mobile is not selected", async () => {
             // Arrange
             const { wrapper } = setupMocks({});
-            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
-            wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
+
+            await wrapper.setData({
+                selectedAppointmentType: "Dropoff",
+            });
+
+            const mobileLocationQuestionsComponent = wrapper.findComponent({
+                ref: "mobileLocationQuestions",
+            });
+            mobileLocationQuestionsComponent.resetComponent = jest.fn();
+
+            const serviceZipCodeComponent = wrapper.findComponent({
+                ref: "serviceZipCodeQuestion",
+            });
+            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
 
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
             };
 
-            wrapper.vm.selectedAppointmentType = "Dropoff";
-
-            const serviceZipCodeComponent = wrapper.findComponent({
-                ref: "serviceZipCodeQuestion",
-            });
-
             // Act
             serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
 
@@ -486,12 +533,23 @@ describe("service-location.vue", () => {
             expect(wrapper.vm.selectedAppointmentType).toStrictEqual(null);
         });
 
-        test("does not reset appointment type selection when service zip code is updated by mobile location modal when Mobile is selected", () => {
+        test("does not reset appointment type selection when service zip code is updated by mobile location modal when Mobile is selected", async () => {
             // Arrange
             const { wrapper } = setupMocks({});
-            const appointmentTypeMobile = "Mobile";
-            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
-            wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
+
+            await wrapper.setData({
+                selectedAppointmentType: "Mobile",
+            });
+
+            const mobileLocationQuestionsComponent = wrapper.findComponent({
+                ref: "mobileLocationQuestions",
+            });
+            mobileLocationQuestionsComponent.resetComponent = jest.fn();
+
+            const serviceZipCodeComponent = wrapper.findComponent({
+                ref: "serviceZipCodeQuestion",
+            });
+            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
 
             const mobileLocationQuestions = {
                 addressQuestions: {
@@ -504,17 +562,11 @@ describe("service-location.vue", () => {
                 isVehicleProtected: "YesAnswer",
             };
 
-            wrapper.vm.selectedAppointmentType = "Mobile";
-
-            const mobileLocationComponent = wrapper.findComponent({
-                ref: "mobileLocationModalQuestions",
-            });
-
             // Act
-            mobileLocationComponent.vm.$emit("update:modelValue", mobileLocationQuestions);
+            mobileLocationQuestionsComponent.vm.$emit("update:modelValue", mobileLocationQuestions);
 
             // Assert
-            expect(wrapper.vm.selectedAppointmentType).toStrictEqual(appointmentTypeMobile);
+            expect(wrapper.vm.selectedAppointmentType).toStrictEqual("Mobile");
         });
     });
 
@@ -893,6 +945,34 @@ 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({});
+
+                // 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.", () => {
@@ -1028,53 +1108,17 @@ 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({});
 
@@ -1087,82 +1131,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);
             });
         });
 
@@ -1331,54 +1302,11 @@ 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,
                     })
                 );
@@ -1403,6 +1331,15 @@ 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({});
 
                 // Act
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index bbc6b96c9..27c1f53ca 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -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-if="!displayNoShopsAlert"
                 :isServiceableMobile="isServiceableMobile"
                 :isServiceableInshop="isServiceableInshop"
                 ref="appointmentTypeQuestion"
@@ -53,27 +54,22 @@
                 cmsWidgetName="AppointmentTypeQuestionWidget"
                 validationRules="option-required" />
             <mobileLocationModalQuestions
-                v-show="selectedAppointmentType === 'Mobile'"
+                customComponentId="mobileLocationQuestions"
+                v-if="selectedAppointmentType === 'Mobile'"
                 v-model="mobileLocationQuestions"
                 :mobileFeePart="mobileFeePart"
                 @updated-mobile-fee-part="setMobileFeePart"
                 @updated-serviceability="setServiceabilityDetails"
                 @updated-contains-military-base="setContainsMilitaryBase"
-                ref="mobileLocationModalQuestions"
+                validationRules="mobile-location-required"
+                ref="mobileLocationQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
-            <textboxQuestion
-                v-show="selectedAppointmentType === 'Mobile'"
-                ref="mobileLocationQuestionsError"
-                v-model="mobileLocationValidationField"
-                validationRules="mobile-location-required"
-                hideInput
-                centerErrorMessage />
             <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid"
+                :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -90,8 +86,7 @@ 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";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form, defineRule } from "vee-validate";
-import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import { Form } from "vee-validate";
 import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 
 // Supporting files
@@ -105,10 +100,24 @@ import {
     getServiceabilityDetails,
 } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 import store from "@/store";
-import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
 
-defineRule("mobile-location-required", required(errorMessages.MOBILE_LOCATION_REQUIRED));
+// Validation
+import { defineRule } from "vee-validate";
+import { errorMessages } from "@/constants/error-messages";
+
+// DEFINE VALIDATION RULES
+defineRule("mobile-location-required", (value) => {
+    if (
+        value.addressQuestions.streetAddress == "" ||
+        value.addressQuestions.city == "" ||
+        value.addressQuestions.state == "" ||
+        value.addressQuestions.zipCode == "" ||
+        value.isVehicleProtected == null
+    ) {
+        return errorMessages.MOBILE_LOCATION_REQUIRED;
+    }
+    return true;
+});
 
 export default {
     name: "service-location",
@@ -126,8 +135,8 @@ export default {
             isRecalibrationServiceableMobile: null,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
-            selectedAppointmentType: null,
-            mobileLocationValidationField: null,
+            selectedAppointmentType: "",
+            providerNumber: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -185,10 +194,13 @@ export default {
                 if (newValue.zipCode !== this.zipCode) {
                     this.resetMobileLocation();
                     this.selectedAppointmentType = null;
+                    this.providerNumber = null;
                 }
 
                 this.state = newValue.state;
                 this.zipCode = newValue.zipCode;
+
+                this.$nextTick();
             },
         },
         mobileLocationQuestions: {
@@ -213,13 +225,11 @@ export default {
                 this.zipCode = newValue.addressQuestions.zipCode;
                 this.isVehicleProtected = newValue.isVehicleProtected;
 
-                this.mobileLocationValidationField = "isValid";
-
-                if (
-                    newValue.zipCode !== this.zipCode &&
-                    !this.selectedAppointmentType == "Mobile"
-                ) {
-                    this.selectedAppointmentType = null;
+                if (newValue.zipCode !== this.zipCode) {
+                    if (!this.selectedAppointmentType == "Mobile") {
+                        this.selectedAppointmentType = null;
+                    }
+                    this.providerNumber = null;
                 }
             },
         },
@@ -237,15 +247,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 (
@@ -343,7 +354,6 @@ export default {
         funnelSubHeader,
         Form,
         loadingModal,
-        textboxQuestion,
         contentGroupModal,
     },
 };
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..7d3211f08 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,7 +18,22 @@
                             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">
+                    <div class="col">
+                        <alert
+                            cmsWidgetName="AlertVinScanFailed"
+                            v-if="displayVinScanFailedAlert"
+                            alertClass="alert-danger" />
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -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/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 e9d872db0..024f14587 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,
@@ -928,23 +938,19 @@ export const actions = {
     },
 
     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));
-        // return globalMethods.callHttpClient({
-        //     method: endpoints.GetServiceabilityDetails.method,
-        //     endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}`,
-        // });
     },
 
     getSupportingItems(context) {
@@ -1501,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;
 
@@ -1516,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;
 
@@ -1698,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;