diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
new file mode 100644
index 00000000..9351aff7
--- /dev/null
+++ b/src/layouts/service-location/service-location.vue
@@ -0,0 +1,272 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <serviceZipModalQuestion
+                                        v-model="serviceZipCodeQuestion"
+                                        ref="serviceZipCodeQuestion"
+                                        @updated-serviceability="setServiceabilityDetails"
+                                        @updated-contains-military-base="setContainsMilitaryBase"
+                                        modalWidgetName="ServiceZipModalWidget" />
+                                    <alert
+                                        ref="alertMilitaryBaseZip"
+                                        class="my-5"
+                                        cmsWidgetName="AlertMilitaryBaseZipWidget"
+                                        v-if="displayMilitaryZipAlert"
+                                        alertClass="alert-warning" />
+                                    <buttonQuestion
+                                        cmsWidgetName="ServiceTypeQuestionWidget"
+                                        :questionText="questionText"
+                                        :answers="answersFromCms"
+                                        buttonTypeString="listCard"
+                                        isRequired
+                                        v-model="selectedAppointmentType"
+                                        validationRules="selection-required"
+                                        class="service-location-button-question mb-1"/>
+                                        <div class="select-car">
+                                        <div class="container-fluid pb-2">
+                                            <div class="row px-3">
+                                                <div class="col">
+                                                    <div class="select-car-form rounded">
+                                                        <siteFooter
+                                                        cmsWidgetName="SiteFooterWidget"
+                                                        :isForwardActionDisabled="!meta.valid"
+                                                        @backClicked="backButtonAction"
+                                                        @forwardClicked="forwardButtonAction"
+                                                        ref="siteFooter"
+                                                        />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
+// Import Supporting Files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import { useMainStore } from "@/store";
+import { getServiceabilityDetails, getZipCodeData } from "@/helpers/service-location-helper";
+
+// Import Component
+import alert from "@/ux-components/alert/alert";
+import baseFormMixin from "@/mixins/base-form-mixin";
+import baseMixin from "@/mixins/base-mixin";
+import { Form, defineRule } from "vee-validate";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import serviceZipModalQuestion from '@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue';
+
+// DEFINE VALIDATION RULES
+defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
+export default {
+    name: "service-location",
+    mixins: [baseFormMixin, baseMixin],
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+        const serviceZipCode = useMainStore().order.customer.address.zipCode;
+        const zipCodeData = getZipCodeData(serviceZipCode);
+
+        const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
+        
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "serviceabilityDetails",
+                promise: serviceabilityDetailsPromise,
+            },
+            {
+                resultKey: "zipCodeData",
+                promise: zipCodeData,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+        
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.setData(
+                resultMap.zipCodeData,
+                resultMap.serviceabilityDetails,
+            )
+        });
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
+    data() {
+        return {
+            zipCode: this.mainStore.order.customer.address.zipCode,
+            state: this.mainStore.order.customer.address.state,
+            isServiceZipServiceable: null,
+            isGlassServiceableMobile: null,
+            isRecalibrationServiceableMobile: null,
+            selectedAppointmentType: "",
+            zipContainsMilitaryBase: false,
+        };
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
+        },
+        serviceZipCodeQuestion: {
+            get: function() {
+                return {
+                    zipCode: this.zipCode,
+                    state: this.state,
+                };
+            },
+            set: function (newValue) {
+                if (newValue.zipCode !== this.zipCode) {
+                    this.selectedAppointmentType = null;
+                }
+
+                this.zipCode = newValue.zipCode;
+                this.state = newValue.state;
+
+                this.$nextTick();
+            },
+        },
+        isServiceableMobile() {
+            if (this.isRecalibrationServiceableMobile !== null) {
+                return this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
+            } else {
+                return this.isGlassServiceableMobile;
+            }
+        },
+        displayMilitaryZipAlert() {
+            return this.zipContainsMilitaryBase && this.isServiceableMobile;
+        }        
+    },
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        async forwardButtonAction() {
+            //validate and save data here
+            this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
+        },
+        resetDependentState() {
+
+        },
+        setData(zipCodeData, serviceabilityDetails) {
+            if (zipCodeData) {
+                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
+            }
+            if (serviceabilityDetails) {
+                this.setServiceabilityDetails(serviceabilityDetails);
+            }
+        },
+        setContainsMilitaryBase(val) {
+            if (this.zipContainsMilitaryBase !== val) {
+                this.zipContainsMilitaryBase = val;
+            }
+        },
+        setServiceabilityDetails(serviceabilityDetails) {
+            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
+            this.isRecalibrationServiceableInshop =
+                serviceabilityDetails.isRecalibrationServiceableInshop;
+            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
+            this.isRecalibrationServiceableMobile =
+                serviceabilityDetails.isRecalibrationServiceableMobile;
+        },
+    },
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        buttonQuestion,
+        Form,
+        serviceZipModalQuestion,
+        alert
+    },
+};
+</script>
+
+<style lang="scss">
+
+.page-container-grouped-styles {
+    overflow: auto;
+}
+.modal-open {
+    .page-container-grouped-styles {
+        overflow: hidden;
+    }
+}
+#sub-header span {
+    color: $black;
+}
+.question-text {
+    & > span {
+        line-height: 1.5rem;
+    }
+}
+.list-card-content p {
+    &:first-of-type {
+        line-height: 1.5rem;
+    }
+    &:not(:nth-of-type(1)){
+        line-height: 1.250rem;
+    }
+}
+.siteHeader{
+    .site-header{
+        margin-bottom: 1.25rem !important;
+    }
+
+}
+.choose-option{
+    .button-question >div {
+        &:first-of-type {
+            margin-bottom: 0.95rem;
+            line-height: 1.500rem;
+        }
+    }
+}
+.button-question{
+    .row.form-test-error{
+        line-height:1.500rem;
+        padding-left: 0rem !important;
+    }
+}
+.service-location-button-question {
+    .question-text {
+        margin-top: 1.5rem;
+    }
+}
+</style>