diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 6893ad9b4..f9787a0e0 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -107,14 +107,27 @@
                         @setMobileLocation="setMobileLocationQuestions"
                         @set-mobile-location-invalid="setMobileLocationInValid" />
 
-                    <shopQuestion
+                    <!-- <shopQuestion
                         ref="shopQuestion"
                         v-show="isShopQuestionDisplayed"
                         v-model="selectedProvider"
                         :selectedAppointmentType="selectedAppointmentType"
                         :shopProviderData="shopProviderData"
                         :isDisplayed="isShopQuestionDisplayed"
-                        cmsWidgetName="ShopQuestionWidget" />
+                        cmsWidgetName="YourSafeliteShopWidget" /> -->
+
+                    <!-- <div>
+
+                            </div> -->
+
+                    <shopQuestionPopup
+                        modalWidgetName="ShopQuestionPopupWidget"
+                        :selectedAppointmentType="selectedAppointmentType"
+                        :shopProviderData="shopProviderData"
+                        @shop-selected="onShopSelected"
+                        v-model="selectedProvider"
+                        :isDisplayed="isShopQuestionDisplayed"
+                        cmsWidgetName="YourSafeliteShopWidget" />
 
                     <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
 
@@ -137,6 +150,7 @@ import serviceZipModalQuestion from "@/layouts/service-location/service-zip-moda
 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 shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
 
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
@@ -763,6 +777,13 @@ export default {
         setMobileLocationInValid(isMobileLocationInValid) {
             this.isMobileAddressValid = !isMobileLocationInValid;
         },
+        onShopSelected(providerNumber) {
+            // Find the provider object from your shopProviderData
+            const selectedProvider = this.shopProviderData.shopProviders.find(
+                (p) => p.providerNumber === providerNumber
+            );
+            this.selectedProvider = selectedProvider;
+        },
     },
     watch: {
         zipCode: {
@@ -814,7 +835,8 @@ export default {
         Form,
         loadingModal,
         contentGroupModal,
-        shopQuestion,
+        //shopQuestion,
+        shopQuestionPopup,
     },
 };
 </script>
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index 5e7aa73e4..0bbfbadf4 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -49,6 +49,7 @@ import textLink from "@/ux-components/text-link/text-link";
 import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
 import modal from "@/digital-components/modal/modal";
 import alert from "@/ux-components/alert/alert";
+import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
 
 import {
     getPricedMobileFeePart,
@@ -245,6 +246,7 @@ export default {
         serviceZipQuestion,
         modal,
         alert,
+        // shopQuestion
     },
 };
 </script>
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue
index 9841c5b16..a0a43dc14 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue
@@ -8,8 +8,8 @@
         cornerStyle="rounded"
         mask="#####"
         :displayQuestionText="false"
-        isRequired
-        validationRules="zip-required|zip-format" />
+        :isRequired="isRequired"
+        :validationRules="computedValidationRules" />
 </template>
 
 <script>
@@ -31,6 +31,10 @@ export default {
             serviceZipCode: String,
         },
         cmsWidgetName: String,
+        isRequired: {
+            type: Boolean,
+            default: true,
+        },
     },
     computed: {
         value: {
@@ -41,6 +45,9 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
+        computedValidationRules() {
+            return this.isRequired ? "zip-required|zip-format" : "zip-format";
+        },
     },
     components: {
         textboxQuestion,
diff --git a/src/layouts/service-location/shop-question/shop-question-popup.vue b/src/layouts/service-location/shop-question/shop-question-popup.vue
new file mode 100644
index 000000000..c3ea91faf
--- /dev/null
+++ b/src/layouts/service-location/shop-question/shop-question-popup.vue
@@ -0,0 +1,615 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div v-if="isDisplayed" 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="selectedProviderNumber"
+                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(1)"
+                :aria-label="showMoreShopsLinkText" /> -->
+            <div class="modal-link">
+                <text-link
+                    linkType="text"
+                    :text="shopQuestionLinkText"
+                    :shopProviderData="shopProviderData"
+                    href="#!"
+                    @click-event="openModal"></text-link>
+            </div>
+        </div>
+    </transition>
+    <modal
+        ref="shopQuestionModal"
+        :headerText="modalHeaderText"
+        :footerButtonText="modalFooterText"
+        @footer-button-event="onSaveShop">
+        <serviceZipQuestion
+            ref="serviceZipQuestion"
+            customInputId="serviceZipCode"
+            v-model="internalModel.zipCode"
+            v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
+            cmsWidgetName="ServiceZipQuestionWidget"
+            :isRequired="false" />
+        <alert
+            ref="alertMilitaryBaseZip"
+            class="my-5"
+            cmsWidgetName="AlertMilitaryBaseZipWidget"
+            v-if="displayMilitaryZipAlert"
+            alertClass="alert-warning" />
+
+        <alert
+            ref="alertMobileOnly"
+            class="my-5"
+            cmsWidgetName="AlertMobileOnlyWidget"
+            v-if="displayServiceableMobileOnly"
+            alertClass="alert-warning" />
+
+        <alert
+            ref="alertRecalNoMobile"
+            class="my-5"
+            cmsWidgetName="AlertRecalNoMobileWidget"
+            v-if="displayRecalibrationWarning"
+            @text-link-clicked="openModalAction"
+            alertClass="alert-warning" />
+
+        <alert
+            ref="alertInshopOnly"
+            class="my-5"
+            cmsWidgetName="AlertInshopOnlyWidget"
+            v-if="displayServiceableInshopOnly"
+            alertClass="alert-warning" />
+
+        <alert
+            ref="alertNoShops"
+            class="my-5"
+            cmsWidgetName="AlertNoShopsWidget"
+            v-if="displayNoShopsAlert"
+            alertClass="alert-warning" />
+        <alert
+            ref="alertMobileFeeFree"
+            class="my-5"
+            cmsWidgetName="AlertMobileFeeFreeWidget"
+            v-if="showMobileFreeAlert"
+            alertClass="alert-success" />
+        <buttonQuestion
+            ref="buttonQuestion"
+            buttonTypeString="shopListButton"
+            :buttonTypeObject="shopListButton"
+            class="radioQuestion"
+            :questionText="questionText"
+            :answers="answers"
+            groupName="chooseShop"
+            textPosition="text-start"
+            v-model="selectedProviderNumber"
+            isRequired
+            validationRules="option-required" />
+        <input
+            type="hidden"
+            name="selectedProviderNumber"
+            :value="selectedProviderNumber"
+            v-validate="'required'" />
+        <textLink
+            v-if="displaySeeMoreLocationsLink"
+            ref="showMoreShopsLink"
+            class="show-more-shops-link"
+            id="showMoreShopsId2"
+            cmsWidgetName="ShowMoreShopsLinkWidget"
+            linkType="text"
+            :text="showMoreShopsLinkText"
+            href="#!"
+            @click-event="getNextShopsFromList(3)"
+            :aria-label="showMoreShopsLinkText" />
+    </modal>
+</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 shopQuestion from "@/layouts/service-location/shop-question/shop-question.vue";
+import modal from "@/digital-components/modal/modal";
+import textLink from "@/ux-components/text-link/text-link.vue";
+import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue";
+import buttonQuestion from "@/digital-components/button-question/button-question.vue";
+import alert from "@/ux-components/alert/alert.vue";
+import shopListButton from "./shop-list-button/shop-list-button";
+//import input from "@/ux-components/input/input.vue";
+
+// 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";
+import { nextTick } from "vue";
+
+import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+
+import { Provider } from "@/layouts/service-location/classes/provider";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "shop-question",
+    mixins: [baseMixin],
+    data() {
+        return {
+            isShopQuestionDisplayed: true,
+            internalModel: this.copyModel(this.modelValue),
+            answers: [],
+            shopListButton: shopListButton,
+            shopIndex: 0,
+            displaySeeMoreLocationsLink: false,
+        };
+    },
+    props: {
+        // modelValue: {
+        //     type: Object,
+        //     default: () => null,
+        // },
+        selectedAppointmentType: String,
+        shopProviderData: Object,
+        modelValue: {
+            type: Object,
+            default: () => ({
+                state: "",
+                zipCode: "",
+            }),
+        },
+        // cmsWidgetName: String,
+        // validationRules: String,
+        isDisplayed: Boolean,
+        modelWidgetName: {
+            type: String,
+            required: true,
+        },
+    },
+    // computed: {
+    //     questionText() {
+    //         return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+    //     },
+    //     shopProviders() {
+    //         return this.shopProviderData?.shopProviders ?? [];
+    //     },
+    //     selectedValue: {
+    //         get: function () {
+    //             return this.modelValue;
+    //         },
+    //         set: function (newValue) {
+    //             this.$emit("update:modelValue", newValue);
+    //         },
+    //     },
+    //     selectedProviderNumber: {
+    //         get: function () {
+    //             return this.selectedValue?.providerNumber;
+    //         },
+    //         set: function (newValue) {
+    //             // Button Question only supports Number, or String data types so we must get the full object to emit
+    //             this.selectedValue = this.getSelectedProviderObject(newValue);
+    //         },
+    //     },
+    //     displayDropoffInformation() {
+    //         return this.selectedAppointmentType == "Dropoff";
+    //     },
+    //     showMoreShopsLinkText() {
+    //         return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
+    //     },
+    //     additionalButtonData() {
+    //         const startDate = new Date();
+    //         const endDate = new Date();
+    //         endDate.setDate(startDate.getDate() + 6);
+
+    //         const formattedStartDate = startDate.toISOString().split("T")[0];
+    //         const formattedEndDate = endDate.toISOString().split("T")[0];
+
+    //         return {
+    //             availabilityRatingCallback: getAvailabilityRating,
+    //             startDate: formattedStartDate,
+    //             endDate: formattedEndDate,
+    //             shopAppointmentType: this.selectedAppointmentType,
+    //         };
+    //     },
+    // },
+    // methods: {
+    //     async getNextShopsFromList(numberToGet = 3) {
+    //         const logFirstShopsDisplayed = this.shopIndex == 0;
+
+    //         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.shopProviders.length;
+    //                 return part;
+    //             };
+    //         };
+
+    //         const toTitleCase = (str) => {
+    //             return str.replace(/\w\S*/g, function (txt) {
+    //                 return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+    //             });
+    //         };
+
+    //         const nextShop = shopIterator(this.shopProviders, numberToGet);
+
+    //         // Map API result data
+    //         const mappedData = nextShop().map((shopProvider) => {
+    //             const streetAddress = toTitleCase(shopProvider.address.streetAddress);
+    //             const city = toTitleCase(shopProvider.address.city);
+    //             const state = shopProvider.address.state;
+    //             const zipCode = shopProvider.address.zipCode;
+    //             const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
+
+    //             return {
+    //                 buttonLabel: city,
+    //                 buttonLabelSubCopy: `${distanceInMiles} mi`,
+    //                 buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
+    //                 additionalButtonData: this.additionalButtonData,
+    //                 value: shopProvider.providerNumber,
+    //             };
+    //         });
+
+    //         var gaAction = this.GaActions.MORE_LOCATIONS_CLICKED;
+    //         if (logFirstShopsDisplayed) {
+    //             gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED;
+    //         }
+    //         if (
+    //             this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP ||
+    //             this.selectedAppointmentType === AppointmentTypeStrings.DROP_OFF
+    //         ) {
+    //             var shops = mappedData.map((shop) => {
+    //                 if (shop.value.length > 5 && shop.value.startsWith("00")) {
+    //                     return shop.value.substring(1);
+    //                 } else {
+    //                     return shop.value;
+    //                 }
+    //             });
+
+    //             var joinedShops = shops.join(",");
+    //             if (!joinedShops) {
+    //                 joinedShops = "no-shops";
+    //             }
+
+    //             this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, gaAction, joinedShops, true);
+    //         }
+
+    //         if (this.answers.length === 0) {
+    //             this.answers = mappedData;
+    //         } else {
+    //             mappedData.forEach((shop) => {
+    //                 this.answers.push(shop);
+    //             });
+    //         }
+
+    //         await nextTick();
+
+    //         if (this.shopIndex == this.shopProviders.length) {
+    //             this.displaySeeMoreLocationsLink = false;
+    //         } else {
+    //             this.displaySeeMoreLocationsLink = true;
+    //         }
+
+    //         await nextTick();
+
+    //         this.scrollToPageBottom();
+    //     },
+    // resetAnswers() {
+    //     this.answers = [];
+    //     this.shopIndex = 0;
+    // },
+    //     getSelectedProviderObject(providerNumber) {
+    //         const provider =
+    //             this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ??
+    //             new Provider();
+
+    //         return provider;
+    //     },
+    //     getSelectedProviderIndex(providers, selectedProviderNumber) {
+    //         const index = providers.findIndex(
+    //             (provider) => provider.providerNumber == selectedProviderNumber
+    //         );
+
+    //         return index;
+    //     },
+    //     async handleUpdate(selectedShopIndex = null) {
+    //         this.resetAnswers();
+    //         if (selectedShopIndex >= 3) {
+    //             await this.getNextShopsFromList(selectedShopIndex + 1);
+    //         } else {
+    //             await this.getNextShopsFromList();
+    //             await nextTick();
+    //         }
+    //     },
+    // },
+    computed: {
+        shopQuestionLinkText() {
+            return this.getCmsContent("ChangeMyLocationLinkWidget", "Text");
+        },
+        modalName() {
+            return this.modelWidgetName;
+        },
+        modalHeaderText() {
+            return this.getCmsContent("ShopQuestionWidget", "QuestionText");
+        },
+        modal() {
+            return this.$refs[this.modalWidgetName];
+        },
+        shopProviders() {
+            console.log("shopProviders", this.shopProviderData?.shopProviders);
+            return this.shopProviderData?.shopProviders ?? [];
+        },
+        modalFooterText() {
+            return "Save store location";
+        },
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        selectedProviderNumber: {
+            get: function () {
+                return this.selectedValue?.providerNumber;
+            },
+            set: function (newValue) {
+                // Button Question only supports Number, or String data types so we must get the full object to emit
+                this.selectedValue = this.getSelectedProviderObject(newValue);
+            },
+        },
+        showMoreShopsLinkText() {
+            return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
+        },
+    },
+    methods: {
+        openModal(event) {
+            if (event) event.preventDefault();
+            if (
+                !this.shopProviderData ||
+                !this.shopProviderData.shopProviders ||
+                !this.shopProviderData.shopProviders.length
+            ) {
+                // Optionally show a loading message or disable the link
+                return;
+            }
+            this.$refs.shopQuestionModal.openModal();
+        },
+        getSelectedProviderObject(providerNumber) {
+            const provider =
+                this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ??
+                new Provider();
+
+            return provider;
+        },
+        async getNextShopsFromList(numberToGet = 3) {
+            const logFirstShopsDisplayed = this.shopIndex == 0;
+
+            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.shopProviders.length;
+                    return part;
+                };
+            };
+
+            const toTitleCase = (str) => {
+                return str.replace(/\w\S*/g, function (txt) {
+                    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+                });
+            };
+
+            const nextShop = shopIterator(this.shopProviders, numberToGet);
+
+            // Map API result data
+            const mappedData = nextShop().map((shopProvider) => {
+                const streetAddress = toTitleCase(shopProvider.address.streetAddress);
+                const city = toTitleCase(shopProvider.address.city);
+                const state = shopProvider.address.state;
+                const zipCode = shopProvider.address.zipCode;
+                const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
+
+                return {
+                    buttonLabel: city,
+                    buttonLabelSubCopy: `${distanceInMiles} mi`,
+                    buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
+                    additionalButtonData: this.additionalButtonData,
+                    value: shopProvider.providerNumber,
+                };
+            });
+
+            var gaAction = this.GaActions.MORE_LOCATIONS_CLICKED;
+            if (logFirstShopsDisplayed) {
+                gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED;
+            }
+            if (
+                this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP ||
+                this.selectedAppointmentType === AppointmentTypeStrings.DROP_OFF
+            ) {
+                var shops = mappedData.map((shop) => {
+                    if (shop.value.length > 5 && shop.value.startsWith("00")) {
+                        return shop.value.substring(1);
+                    } else {
+                        return shop.value;
+                    }
+                });
+
+                var joinedShops = shops.join(",");
+                if (!joinedShops) {
+                    joinedShops = "no-shops";
+                }
+
+                this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, gaAction, joinedShops, true);
+            }
+
+            if (this.answers.length === 0) {
+                this.answers = mappedData;
+            } else {
+                mappedData.forEach((shop) => {
+                    this.answers.push(shop);
+                });
+            }
+
+            console.log("this.answers" + this.answers);
+
+            await nextTick();
+
+            if (this.shopIndex == this.shopProviders.length) {
+                this.displaySeeMoreLocationsLink = false;
+            } else {
+                this.displaySeeMoreLocationsLink = true;
+            }
+
+            await nextTick();
+
+            this.scrollToPageBottom();
+        },
+        async handleUpdate(selectedShopIndex = null) {
+            this.resetAnswers();
+            if (selectedShopIndex >= 3) {
+                await this.getNextShopsFromList(selectedShopIndex + 1);
+            } else {
+                await this.getNextShopsFromList();
+                await nextTick();
+            }
+        },
+        copyModel(modelToCopy) {
+            return {
+                state: modelToCopy.state,
+                zipCode: modelToCopy.zipCode,
+            };
+        },
+        resetAnswers() {
+            this.answers = [];
+            this.shopIndex = 0;
+        },
+        onSaveShop() {
+            // Emit the selected provider number or object to the parent
+            this.$emit("shop-selected", this.selectedProviderNumber);
+            // Optionally close the modal here if not handled by the modal itself
+            this.$refs.shopQuestionModal.closeModal?.();
+        },
+        async updateShopsForZip(zipCode) {
+            if (!zipCode || !this.shopProviders.length) {
+                // fallback to default behavior
+                this.handleUpdate();
+                return;
+            }
+            // You need a helper to sort/filter shops by distance to zipCode
+            // Example: const sortedShops = getShopsByZip(zipCode, this.shopProviders);
+            // For now, let's assume you have such a helper:
+           // const sortedShops = getShopsByZip(zipCode, this.shopProviders); // implement or import this
+
+            // Map sortedShops to the format expected by buttonQuestion
+            //const mappedData = sortedShops.map(shopProvider => {
+                // ...mapping logic as in getNextShopsFromList
+                // (copy from your getNextShopsFromList method)
+            // });
+            // this.answers = mappedData;
+        }
+    },
+    watch: {
+        selectedAppointmentType: {
+            // Question: Does it matter if this fires when clicking Mobile? Ideally it should not, but it doesn't seem to effect anything
+            //           What we DON'T want to do here is create a dependency by checking if the selectedAppointmentType is Mobile as that has
+            //           nothing to do with this component. We could mitigate this by showing / hiding this component with v-if but that messes
+            //           up the component initialization on page load.
+            async handler() {
+                this.handleUpdate();
+            },
+        },
+        shopProviders: {
+            async handler(newValue) {
+                const selectedShopIndex = this.getSelectedProviderIndex(
+                    newValue,
+                    this.selectedProviderNumber
+                );
+                this.handleUpdate(selectedShopIndex);
+            },
+        },
+        
+        'internalModel.zipCode': {
+            handler(newZip) {
+                this.updateShopsForZip(newZip);
+            },
+            immediate: false
+        },
+    },
+    components: {
+        //shopQuestion,
+        modal,
+        textLink,
+        serviceZipQuestion,
+        buttonQuestion,
+        alert,
+    },
+    mounted() {
+        this.handleUpdate();
+    },
+};
+</script>
+
+<style lang="scss">
+.shop-question {
+    margin-top: 1rem;
+    text-align: center;
+
+    a {
+        @include responsive-font-size-md(0.875rem, 1rem);
+    }
+
+    .button-question {
+        .question-text {
+            margin-top: 0.5rem;
+        }
+    }
+}
+
+.drop-off-alert {
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-size: 0.75rem;
+    background-position: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
+    gap: 0.25rem;
+
+    .alert-heading {
+        text-align: left;
+        font-size: 0.75rem;
+        line-height: 1.25rem;
+    }
+}
+.modal-link {
+    text-align: center;
+}
+</style>
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 5a9278d78..d1dc3a24c 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -20,7 +20,7 @@
                 v-model="selectedProviderNumber"
                 isRequired
                 validationRules="option-required" />
-            <textLink
+            <!-- <textLink
                 v-if="displaySeeMoreLocationsLink"
                 ref="showMoreShopsLink"
                 class="show-more-shops-link"
@@ -29,8 +29,8 @@
                 linkType="text"
                 :text="showMoreShopsLinkText"
                 href="#!"
-                @click-event="getNextShopsFromList(3)"
-                :aria-label="showMoreShopsLinkText" />
+                @click-event="getNextShopsFromList(1)"
+                :aria-label="showMoreShopsLinkText" /> -->
         </div>
     </transition>
 </template>
@@ -41,6 +41,8 @@ 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 shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
+//import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
 
 // Supporting files
 import { defineRule } from "vee-validate";
@@ -125,7 +127,7 @@ export default {
         },
     },
     methods: {
-        async getNextShopsFromList(numberToGet = 3) {
+        async getNextShopsFromList(numberToGet = 1) {
             const logFirstShopsDisplayed = this.shopIndex == 0;
 
             const shopIterator = (array, n) => {
@@ -234,6 +236,13 @@ export default {
                 await nextTick();
             }
         },
+        onShopSelectedFromPopup(providerNumber) {
+            // Option 1: Update local state and emit up
+            this.$emit("shop-selected", providerNumber);
+
+            // Option 2: If you want to update local state only, do:
+            // this.pendingSelectedProvider = providerNumber;
+        },
     },
     watch: {
         selectedAppointmentType: {
@@ -258,8 +267,13 @@ export default {
     components: {
         alert,
         buttonQuestion,
-        textLink,
+        //textLink,
+        //shopQuestionPopup,
+        //serviceZipModalQuestion,
     },
+    // mounted(){
+    //     console.log("shopProviderData" + this.shopProviderData);
+    // }
 };
 </script>