diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index f201efba..06ecde94 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -11,6 +11,22 @@ const endpoints = Object.freeze({
         url: (applicationAbbreviation, pageName) => `/content/api/v1/content/${applicationAbbreviation}/${pageName}`,
         method: 'GET'
     },
+    GetAlertReasons: {
+        url: '/location/api/v1/location/alert-reasons',
+        method: 'GET'
+    },
+    GetShopTimeSlots: {
+        url: '/schedule/api/v1/schedule/shop-time-slots',
+        method: 'POST'
+    },
+    GetMobileTimeSlots: {
+        url: '/schedule/api/v1/schedule/mobile-time-slots',
+        method: 'POST'
+    },
+    GetMobilePremiumFee: {
+        url: '/parts/api/v1/parts/mobile-premium-fee',
+        method: 'GET'
+    },
     GetVehicleYears: {
         url: '/vehicle/api/v1/vehicle/years',
         method: 'GET'
diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 90f6f6f9..0c8d4719 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -41,6 +41,8 @@ const errorMessages = Object.freeze({
     LOSS_STATE_REQUIRED: 'Please select an option',
     LOSS_DATE_REQUIRED:
         'Please select a date. Format must be MM/DD/YYYY and the date must be not in the future',
+    DAMAGE_DATE_REQUIREMENT:
+        'Damage date must be within the past 10 years',
     DAMAGE_OPTION_REQUIRED: 'Please select an option',
 
     POLICYHOLDER_FIRST_NAME_REQUIRED: 'Please enter the policyholder first name',
@@ -51,7 +53,8 @@ const errorMessages = Object.freeze({
     MAKE_REQUIRED: 'Please select your vehicle make',
     MODEL_REQUIRED: 'Please select your vehicle model',
     STYLE_REQUIRED: 'Please select your vehicle style',
-    MOBILE_LOCATION_REQUIRED: 'Please enter your service address'
+    MOBILE_LOCATION_REQUIRED: 'Please enter your service address',
+    DATE_REQUIRED: 'Please select a date'
 });
 
 export default errorMessages;
diff --git a/src/constants/schedule-constants.js b/src/constants/schedule-constants.js
index eaa0d5fa..af0c6206 100644
--- a/src/constants/schedule-constants.js
+++ b/src/constants/schedule-constants.js
@@ -1,6 +1,7 @@
 const AppointmentTypeStrings = {
     IN_SHOP: 'Inshop',
     MOBILE: 'Mobile',
+    MOBILE_NOT_ITAC: 'Mobile-Not-ITAC',
     DROP_OFF: 'Dropoff'
 };
 const PREMIUM_FEE_PART_TYPE = 'EARLY BIRD';
@@ -10,4 +11,14 @@ const RouteCodeFlags = {
     OVERNIGHT_DROP_OFF: 'OVERNIGHT DROP OFF'
 };
 
-export { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE, RouteCodeFlags };
+const GET_SHOP_TIME_SLOTS = 'getShopTimeSlots';
+const GET_MOBILE_TIME_SLOTS = 'getMobileTimeSlots';
+
+export {
+    AppointmentTypeStrings,
+    PREMIUM_TIME_SLOT_ID_FLAG,
+    PREMIUM_FEE_PART_TYPE,
+    RouteCodeFlags,
+    GET_SHOP_TIME_SLOTS,
+    GET_MOBILE_TIME_SLOTS
+};
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
new file mode 100644
index 00000000..b57dcdc1
--- /dev/null
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -0,0 +1,1064 @@
+<template>
+    <div
+        class="date-picker text-center"
+        :class="[calendarViewDirection, { 'has-error': errors.length > 0 }]">
+        <fieldset
+            id="date-picker-fieldset"
+            ref="datePickerFieldset">
+            <legend class="sr-only">
+                Select a day and time
+            </legend>
+            <div
+                v-for="month in months"
+                :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
+                :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
+                class="calendar-grid-container"
+                :class="[
+                    hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
+                    month.monthClass,]">
+                <div class="month-year body-small d-flex align-items-center small">
+                    {{ month.monthLabel }} {{ month.yearNum?.toString() }}
+                </div>
+                <div
+                    v-if="calendarViewDirection === 'future'"
+                    class="legend caption d-flex align-items-center justify-content-end">
+                    <span class="legend-circle me-1"></span> &equals; Available
+                </div>
+                <div class="separator-line"></div>
+                <div class="nav-back ps-3">
+                    <button></button>
+                </div>
+                <div class="nav-forward pe-3">
+                    <button></button>
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Sunday</span>S
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Monday</span>M
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Tuesday</span>T
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Wednesday</span>W
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Thursday</span>T
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Friday</span>F
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Saturday</span>S
+                </div>
+                <div
+                    v-for="date in month.dates"
+                    :id="date.inputValue"
+                    :key="date.inputValue"
+                    class="grid-item radio-wrapper"
+                    :class="[
+                        date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
+                        date.dayClasses,
+                        date.isSelectable ? 'selectable-day' : '',]">
+                    <input
+                        :id="`${month.monthLabel}-${date.dateNum.toString()}`"
+                        v-model="selectedDate"
+                        :disabled="!date.isSelectable"
+                        type="radio"
+                        name="day-of-month"
+                        :value="date.inputValue"
+                        @click="fireDateSelectedEvent"
+                        @keypress.enter="fireDateSelectedEvent" />
+                    <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
+                        <span>{{ date.dateNum.toString() }}</span>
+                    </label>
+                </div>
+            </div>
+            <loader
+                :class="[!isLoading ? 'date-picker-hidden' : '']"
+                loaderColor="blue"
+                loaderPosition="center" />
+            <div
+                id="date-of-month-error"
+                class="row form-test-error">
+                <ErrorMessage
+                    :name="customComponentId"
+                    class="small mt-1">
+                </ErrorMessage>
+            </div>
+            <button
+                v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
+                id="viewMoreDates"
+                type="button"
+                class="btn btn-link"
+                :disabled="isLoading"
+                @click="showAnotherMonth">
+                View more dates
+            </button>
+        </fieldset>
+    </div>
+</template>
+
+<script>
+// Supporting files
+import loader from '@/ux-components/loader/loader.vue';
+import { useMainStore } from '@/store';
+import { useField, ErrorMessage } from 'vee-validate';
+import { deepClone } from '@/helpers/object-helper';
+import {
+    convertDateToDateString,
+    convertDateStringToDate
+} from '@/layouts/schedule-page/helpers/schedule-helper';
+import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from './mixins/constants';
+import { selectableDaysOptions, requiredParameter } from './mixins/helpers';
+
+export default {
+    name: 'date-picker',
+    components: {
+        loader,
+        ErrorMessage
+    },
+    props: {
+        customComponentId: String,
+        selectableDatesSetting: {
+            type: String,
+            validator(value) {
+                return Object.values(selectableDaysOptions).includes(value);
+            },
+            default: selectableDaysOptions.PAST
+        },
+        modelValue: {
+            type: Object
+        },
+        todayOverrideDateString: {
+            // keep for use in unit tests to override today's date
+            type: String,
+            default: null
+        },
+        customSelectableDatesCallback: {
+            type: Function,
+            default() {
+                return [];
+            }
+        },
+        validationRules: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['update:modelValue', 'date-clicked'],
+    setup(props) {
+        const uuid = crypto.randomUUID();
+        const componentId = !props.customComponentId
+            ? `component-${uuid}`
+            : props.customComponentId;
+
+        const mainStore = useMainStore();
+
+        const { modelValue } = deepClone(props);
+        const initialValue = modelValue;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
+            useField(componentId, props.validationRules, fieldOptions);
+
+        return {
+            componentId,
+            mainStore,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+            resetField
+        };
+    },
+    data() {
+        return {
+            isLoading: true,
+            months: null,
+            disableViewMoreDatesButton: false,
+            selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
+            hideSomeDaysForInitialView: null
+        };
+    },
+    computed: {
+        todayString() {
+            return this.todayOverrideDateString || convertDateToDateString(new Date());
+        },
+        todayDayIndex() {
+            return convertDateStringToDate(this.todayString).getDay();
+        },
+        todayDateNum() {
+            return convertDateStringToDate(this.todayString).getDate();
+        },
+        currentWeekStartDateNum() {
+            return this.todayDayIndex >= this.todayDateNum
+                ? 1
+                : this.todayDateNum - this.todayDayIndex;
+        },
+        currentWeekEndDateNum() {
+            return this.todayDateNum + (6 - this.todayDayIndex);
+        },
+        calendarViewDirection() {
+            if (this.selectableDatesSetting === 'custom') return 'future';
+            return 'past';
+        },
+        selectedDate: {
+            get() {
+                return this.modelValue;
+            },
+            set(newSelectedDate) {
+                this.$emit('update:modelValue', newSelectedDate);
+            }
+        }
+    },
+    watch: {
+        modelValue(newValue, oldValue) {
+            this.resetField({
+                value: newValue
+            });
+        },
+        errorMessage(newValue, oldValue) {
+            // Check for changing from no error message to some error message.
+            if (newValue && !oldValue) {
+                this.scrollToElement('date-of-month-error');
+            }
+        }
+    },
+    methods: {
+        initializeComponent(initialData) {
+            this.setCalendarData(initialData);
+        },
+        fireDateSelectedEvent(event) {
+            // Ignore if arrow key selected radioButton
+            if (event.screenX === 0 && event.screenY === 0) {
+                return;
+            }
+            this.$emit('date-clicked');
+        },
+        getWeekStartDate(dateString) {
+            const date = convertDateStringToDate(dateString);
+            const dayOfWeek = date.getDay();
+            // Subtract the day of the week from date to get the date of Sunday
+            const sunday = new Date(date);
+            sunday.setDate(sunday.getDate() - dayOfWeek);
+            return convertDateToDateString(sunday);
+        },
+        getWeekEndDate(dateString) {
+            const date = convertDateStringToDate(dateString);
+            const dayOfWeek = date.getDay();
+            const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday
+            // Clone the given date and add the remaining days until Saturday
+            const saturday = new Date(date);
+            saturday.setDate(date.getDate() + daysUntilSaturday);
+            return convertDateToDateString(saturday);
+        },
+        getNextWeekSunday(dateString) {
+            const date = convertDateStringToDate(dateString);
+            const dayOfWeek = date.getDay();
+            const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday
+            // Clone the given date and add the remaining days until Sunday
+            const nextSunday = new Date(date);
+            nextSunday.setDate(date.getDate() + daysUntilNextSunday);
+            return convertDateToDateString(nextSunday);
+        },
+        getMonthEnd(dateStr) {
+            // convert string to date, do date calc, then return a string back
+            const date = new Date(dateStr.split('-')[0], parseInt(dateStr.split('-')[1], 10), 0);
+            return convertDateToDateString(date);
+        },
+        getInitialViewWeeks(todayString, initialViewRowsToShow, preSelectedDateString) {
+            // TODO: this only is for future direction; need to create logic for past direction
+            const weeks = [];
+            let weekStartDate = this.getWeekStartDate(todayString);
+            let weekEndDate = this.getWeekEndDate(todayString);
+
+            if (preSelectedDateString) {
+                const preSelectedDateMonthEnd = this.getMonthEnd(preSelectedDateString);
+                let weekIncludesPreSelectedMonthEnd = false;
+                let i = 0;
+                while (!weekIncludesPreSelectedMonthEnd) {
+                    if (i > 0) {
+                        weekStartDate = this.getNextWeekSunday(weekEndDate);
+                        weekEndDate = this.getWeekEndDate(weekStartDate);
+
+                        if (
+                            (preSelectedDateMonthEnd > weekStartDate
+                                && preSelectedDateMonthEnd < weekEndDate)
+                            || preSelectedDateMonthEnd === weekStartDate
+                            || preSelectedDateMonthEnd === weekEndDate
+                        ) {
+                            weekEndDate = preSelectedDateMonthEnd;
+                            weekIncludesPreSelectedMonthEnd = true;
+                        }
+                    }
+                    weeks.push({
+                        weekNum: i + 1,
+                        weekStartDate,
+                        weekEndDate
+                    });
+                    i++;
+                }
+            } else {
+                for (let i = 0; i < initialViewRowsToShow; i++) {
+                    if (i > 0) {
+                        weekStartDate = this.getNextWeekSunday(weekEndDate);
+                        weekEndDate = this.getWeekEndDate(weekStartDate);
+                    }
+                    weeks.push({
+                        weekNum: i + 1,
+                        weekStartDate,
+                        weekEndDate
+                    });
+                }
+                // If any of these weeks is split between two months, then make them 2 separate "weeks"
+                // (a week split between two months is considered 2 weeks per business requirements)
+                const hasSplitWeek = (week) => (week.weekStartDate.split('-')[1] !== week.weekEndDate.split('-')[1]);
+                const splitWeekIndex = weeks.findIndex(hasSplitWeek);
+
+                if (splitWeekIndex > -1) {
+                    const week1 = [];
+                    const week2 = [];
+                    let switchToWeek2 = false;
+
+                    for (let j = 0; j < 7; j++) {
+                        const newDate = convertDateStringToDate(weeks[splitWeekIndex].weekStartDate);
+                        newDate.setDate(newDate.getDate() + j);
+                        if (newDate.getDate() === 1) switchToWeek2 = true;
+                        if (switchToWeek2) {
+                            week2.push(convertDateToDateString(newDate));
+                        } else {
+                            week1.push(convertDateToDateString(newDate));
+                        }
+                    }
+
+                    const week1EndDate = week1[week1.length - 1];
+                    const week2StartDate = week2[0];
+
+                    if (week1EndDate < todayString) {
+                        // replace week 1 with week 2
+                        weeks[splitWeekIndex].weekStartDate = week2StartDate;
+                    } else {
+                        const newWeek = {
+                            weekNum: weeks[splitWeekIndex].weekNum,
+                            weekStartDate: week2StartDate,
+                            weekEndDate: weeks[splitWeekIndex].weekEndDate
+                        };
+                        weeks[splitWeekIndex].weekEndDate = week1EndDate;
+                        weeks.splice(splitWeekIndex + 1, 0, newWeek);
+                        weeks.pop();
+                        weeks.forEach((item, index) => {
+                            if (index > splitWeekIndex) {
+                                item.weekNum += 1;
+                            }
+                        });
+                    }
+                }
+            }
+            return weeks;
+        },
+        async loadInitialData(config) {
+            /*
+             ** NOTE: this _could_ be called by a parent before fully loaded, so data or computeds might not be available
+             */
+            let todayDateString;
+            let calendarViewDirection = 'none';
+            let hideSomeDaysForInitialView = false;
+            let hideSecondMonth = false;
+
+            if (this.todayString) {
+                todayDateString = this.todayString;
+            } else if (config.todayOverrideDateString) {
+                todayDateString = config.todayOverrideDateString;
+            } else {
+                todayDateString = convertDateToDateString(new Date());
+            }
+            if (config.selectableDatesSetting === 'past') calendarViewDirection = 'past';
+            if (config.selectableDatesSetting === 'custom') calendarViewDirection = 'future';
+
+            const currentMonthEnd = this.getMonthEnd(todayDateString);
+            // TODO - set up currentMonthStart if direction is PAST:
+            // let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
+            const initialViewWeeks = this.getInitialViewWeeks(
+                todayDateString,
+                config.initialViewRowsToShow,
+                config.preSelectedDate
+            );
+            const initialViewStartDate = todayDateString;
+            const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
+
+            if (!config.preSelectedDate) {
+                const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.split('-')[1];
+                const lastSundayMonth =
+                    initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.split('-')[1];
+
+                if (calendarViewDirection === 'future') {
+                    if (firstSaturdayMonth !== lastSundayMonth) {
+                        hideSomeDaysForInitialView = true;
+                    }
+                    if (initialViewStartDate.split('-')[1] === lastSundayMonth) {
+                        hideSecondMonth = true;
+                        if (currentMonthEnd > initialViewEndDate) {
+                            // should part of 1st month be hidden?
+                            hideSomeDaysForInitialView = true;
+                        }
+                    }
+                }
+                // TODO - NEED TO CREATE OPPOSITE LOGIC FOR "past" DIRECTION LIKE THE ABOVE ^ ^ ^
+            }
+
+            const loadInitialDataPromise = new Promise((resolve, reject) => {
+                const response = config.customSelectableDatesCallback(
+                    initialViewStartDate,
+                    initialViewEndDate,
+                    useMainStore().order.serviceLocation.appointmentType,
+                    useMainStore().order.serviceLocation.provider.providerNumber
+                );
+                resolve(response);
+            });
+
+            return loadInitialDataPromise.then((response) => {
+                const initialData = {
+                    todayDate: todayDateString,
+                    initialViewStartDate,
+                    initialViewEndDate,
+                    calendarViewDirection,
+                    initialShopTimeSlotsResponse: response,
+                    hideSomeDaysForInitialView,
+                    hideSecondMonth,
+                    preSelectedDate: config.preSelectedDate
+                };
+                return initialData;
+            });
+        },
+        async setCalendarData(config = {}) {
+            this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
+            const { hideSecondMonth } = config;
+            const direction = config.calendarViewDirection;
+            const monthsAfterToLoadOffset = 6;
+            const monthsBeforeToLoadOffset = 36;
+            config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
+                this.selectableDatesData.push(selectableDate);
+            });
+
+            // GENERATE MONTHS AND PUSH THEM INTO ARRAY
+            const months = [];
+            const options = {
+                calendarViewDirection: direction,
+                monthsBeforeToLoadOffset,
+                monthsAfterToLoadOffset,
+                initialViewStartDate: config.initialViewStartDate,
+                initialViewEndDate: config.initialViewEndDate,
+                hideSecondMonth,
+                preSelectedDate: config.preSelectedDate
+            };
+            if (direction === 'future') {
+                // first 0, then 1
+                for (let i = 0; i <= monthsAfterToLoadOffset; i++) {
+                    months.push(await this.getMonthData(i, options));
+                }
+            } else if (direction === 'past') {
+                // first 0, then -1
+                for (let i = 0; i >= 0 - monthsBeforeToLoadOffset; i--) {
+                    months.unshift(await this.getMonthData(i, options));
+                }
+            } else {
+                // TODO - IF A CALENDAR WITH BOTH PAST AND FUTURE WAS EVER NEEDED
+                // for (let i = monthsAfterToLoadOffset; i >= monthsBeforeToLoadOffset; i--) {
+                //     months.push(this.getMonthDataPAST(i));
+                // }
+            }
+            this.months = months;
+            this.isLoading = false;
+
+            if (config.preSelectedDate) {
+                this.$nextTick(() => {
+                    // Advance to month
+                    const monthToShow = this.months.find((month) =>
+                        month.monthClass.includes('month-preselected'));
+                    if (
+                        monthToShow.monthClass.includes('month-preselected')
+                        && monthToShow.monthClass.includes('last-available-month')
+                    ) {
+                        // disable View More dates button if the preSelectedDate in the last available month
+                        this.disableViewMoreDatesButton = true;
+                    }
+                    this.scrollToElement(monthToShow.monthString);
+                });
+            }
+        },
+        async getMonthData(offset = requiredParameter(), options) {
+            /*  options will contain:
+                    calendarViewDirection (string)
+                    initialViewStartDateNum (number)
+                    initialViewEndDateNum (number)
+                    monthsBeforeToLoadOffset (number),
+                    monthsAfterToLoadOffset (number),
+                    hideSecondMonth (boolean),
+                    preSelectedDate (string)
+
+                data used:
+                    todayDate (date object)
+                    this.hideSomeDaysForInitialView (string)
+            */
+
+            let monthNum = convertDateStringToDate(this.todayString).getMonth() + offset + 1;
+            let yearNum = convertDateStringToDate(this.todayString).getFullYear();
+            const { calendarViewDirection } = options;
+            if (calendarViewDirection === 'future' && offset > 0) {
+                while (monthNum > 12) {
+                    monthNum -= 12;
+                    yearNum++;
+                }
+            } else if (calendarViewDirection === 'past' && offset < 0) {
+                while (monthNum < 1) {
+                    monthNum = 12 + monthNum;
+                    yearNum--;
+                }
+            }
+            const { initialViewEndDate } = options;
+            // const initialViewStartDate = options.initialViewStartDate; // TODO: to be used for past calendarViewDirection
+            const { hideSecondMonth } = options;
+            const preSelectedDateObj = options.preSelectedDate
+                ? convertDateStringToDate(options.preSelectedDate)
+                : null;
+            const dates = [];
+            const monthEndDate = new Date(yearNum, monthNum, 0);
+            const monthStartDateNum =
+                offset === 0 && calendarViewDirection === 'future'
+                    ? this.currentWeekStartDateNum
+                    : 1;
+            const monthStartDate = new Date(yearNum, monthNum - 1, monthStartDateNum);
+            const startDateDayIndex = monthStartDate.getDay();
+
+            let monthClass = '';
+            let isMonthThatHidesSomeDaysForInitialView;
+            let monthEndDateNum = monthEndDate.getDate();
+
+            if (
+                offset === 0
+                && calendarViewDirection === 'past'
+                && monthEndDateNum > this.currentWeekEndDateNum
+            ) {
+                monthEndDateNum = this.currentWeekEndDateNum;
+            }
+
+            if (options.preSelectedDate) {
+                if (
+                    monthStartDate.getFullYear() === preSelectedDateObj.getFullYear()
+                    && monthStartDate.getMonth() === preSelectedDateObj.getMonth()
+                ) {
+                    monthClass += ' month-preselected';
+                } else if (monthStartDate > preSelectedDateObj) {
+                    monthClass += ' month-hidden';
+                }
+            } else if (Math.abs(offset) === 1 && hideSecondMonth) {
+                monthClass = `${monthClass} month-hidden`;
+            } else if (Math.abs(offset) > 1) {
+                monthClass = `${monthClass} month-hidden`;
+            }
+
+            if (
+                Math.abs(offset) === options.monthsAfterToLoadOffset
+                && calendarViewDirection === 'future'
+            ) {
+                monthClass += ' last-available-month';
+            }
+            if (
+                Math.abs(offset) === options.monthsBeforeToLoadOffset
+                && calendarViewDirection === 'past'
+            ) {
+                // TODO - re-check this logic if past direction
+                monthClass += ' last-available-month';
+            }
+
+            // populate dates array
+            for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
+                let dayClasses = '';
+                const dateString =
+                    `${yearNum.toString()
+                    }-${
+                        (`0${monthNum}`).slice(-2)
+                    }-${
+                        (`0${i}`).slice(-2)}`;
+
+                if (offset === 0 && i === this.todayDateNum) {
+                    dayClasses += ' current-day';
+                }
+                if (offset === 0 && i < this.todayDateNum && calendarViewDirection === 'future') {
+                    dayClasses += ' unavailable-day';
+                }
+                if (offset === 0 && i > this.todayDateNum && calendarViewDirection === 'past') {
+                    dayClasses += ' unavailable-day';
+                }
+                if (convertDateStringToDate(dateString).getDay() === 0) {
+                    dayClasses += ' sunday';
+                }
+                if (
+                    this.hideSomeDaysForInitialView
+                    && convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum
+                    && convertDateStringToDate(initialViewEndDate).getDate() < i
+                ) {
+                    dayClasses += ' day-hidden';
+                    isMonthThatHidesSomeDaysForInitialView = true;
+                }
+                const dateObject = {
+                    dateNum: i,
+                    dayClasses,
+                    inputValue: dateString,
+                    isSelectable:
+                        this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
+                };
+                dates.push(dateObject);
+            }
+
+            const monthToAdd = {
+                monthLabel: MONTHS_OF_YEAR[monthNum - 1],
+                monthIndex: monthNum,
+                monthString: `${MONTHS_OF_YEAR[monthNum - 1]}-${yearNum?.toString()}`,
+                yearNum,
+                dates,
+                startDateDayIndex,
+                monthClass,
+                isMonthThatHidesSomeDaysForInitialView
+            };
+            return monthToAdd;
+        },
+        async showAnotherMonth() {
+            this.isLoading = true;
+            let monthToShow;
+            let monthStartDateNum = 0;
+
+            if (this.hideSomeDaysForInitialView) {
+                monthToShow = this.months.find(({ isMonthThatHidesSomeDaysForInitialView }) =>
+                    isMonthThatHidesSomeDaysForInitialView);
+                // find the first day-hidden to become the next api call start date
+                monthStartDateNum =
+                    monthToShow.dates.find(({ dayClasses }) => dayClasses.includes('day-hidden'))
+                        .dateNum - 1;
+            } else {
+                if (this.calendarViewDirection === 'future') {
+                    monthToShow = this.months.find((month) =>
+                        month.monthClass.includes('month-hidden'));
+                }
+                if (this.calendarViewDirection === 'past') {
+                    // TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
+                    monthToShow = this.months.find((month) =>
+                        month.monthClass.includes('month-hidden'));
+                }
+            }
+            if (monthToShow) {
+                // make new API call with this month's start and end dates
+                await this.updateSelectableDates(
+                    monthToShow.dates[monthStartDateNum].inputValue,
+                    monthToShow.dates[monthToShow.dates.length - 1].inputValue
+                );
+                this.isLoading = false;
+                this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
+                monthToShow.monthClass = monthToShow.monthClass.replace(' month-hidden', '');
+                this.scrollToElement(monthToShow.monthString);
+
+                if (monthToShow.monthClass.includes('last-available-month')) this.disableViewMoreDatesButton = true;
+            }
+        },
+        async updateSelectableDates(monthStart, monthEnd) {
+            console.log(this.mainStore);
+            const moreSelectableDates = await this.customSelectableDatesCallback(
+                monthStart,
+                monthEnd,
+                this.mainStore.order.serviceLocation.appointmentType,
+                this.mainStore.order.serviceLocation.provider.providerNumber
+            );
+
+            moreSelectableDates.days.forEach((selectableDate) => {
+                const index = this.selectableDatesData.findIndex((dateObj) => dateObj.date === selectableDate.date);
+                if (index === -1) this.selectableDatesData.push(selectableDate);
+                this.months.forEach((month) => {
+                    // TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
+                    month.dates.forEach((date) => {
+                        if (date.inputValue === selectableDate.date) {
+                            date.isSelectable = true;
+                        }
+                    });
+                });
+            });
+        },
+        scrollToElement(elementId, duration = 800, easing = 'ease-in-out') {
+            const wrapper = document.querySelector('.page-container-grouped-styles');
+            const target = document.getElementById(elementId);
+            const initY = wrapper.scrollTop;
+            const wrapperRect = wrapper.getBoundingClientRect();
+            const targetRect = target.getBoundingClientRect();
+            const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
+            const timingFunc = TIMINGFUNC_MAP[easing];
+            let start = null;
+            const step = (timestamp) => {
+                start = start || timestamp;
+                const time = Math.min(1, (timestamp - start) / duration);
+                const percentageNew = timingFunc(time);
+                const distanceToGo = targetY;
+                const thisDistance = percentageNew * distanceToGo;
+                wrapper.scrollTo(0, initY + thisDistance);
+                if (percentageNew < 1) {
+                    window.requestAnimationFrame(step);
+                }
+            };
+            window.requestAnimationFrame(step);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/ux-variables-svg-strings.scss";
+
+.date-picker-hidden {
+    opacity: 0;
+    max-height: 0;
+}
+.date-picker {
+    position: relative;
+    flex-grow: 0;
+    display: flex;
+    flex-direction: column;
+
+    fieldset {
+        flex-grow: 1;
+        position: relative;
+    }
+    .loader {
+        height: 2rem;
+        width: calc(100% - 1.5rem);
+
+        &::after {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+    }
+    .calendar-grid-container {
+        margin: 0 auto 2rem auto;
+        max-width: 414px;
+        position: relative;
+        transition: height ease 2s, opacity ease 2s;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        justify-content: center;
+        align-items: center;
+        padding: 0 0.75rem;
+        opacity: 1;
+
+        .grid-item {
+            text-align: center;
+            margin: 10px 3px;
+            font-size: 0.875rem;
+            line-height: 1.5;
+
+            &.first-day-,
+            &.first-day-0 {
+                grid-column-start: 1;
+            }
+            &.first-day-1 {
+                grid-column-start: 2;
+            }
+            &.first-day-2 {
+                grid-column-start: 3;
+            }
+            &.first-day-3 {
+                grid-column-start: 4;
+            }
+            &.first-day-4 {
+                grid-column-start: 5;
+            }
+            &.first-day-5 {
+                grid-column-start: 6;
+            }
+            &.first-day-6 {
+                grid-column-start: 7;
+            }
+        }
+
+        .separator-line {
+            grid-area: 2/1/2/8;
+            border-top: 1px solid $gray-500;
+            margin: 0.5rem 0;
+        }
+
+        .month-year {
+            grid-area: 1 / 1 / 2 / 5;
+            text-transform: uppercase;
+            font-weight: 300;
+            letter-spacing: 0.75px;
+        }
+        .legend {
+            grid-area: 1 / 5 / 2 / 8;
+            .legend-circle {
+                border-radius: 50%;
+                width: 16px;
+                height: 16px;
+                background-color: $blue-100;
+                border: 1px solid $blue;
+            }
+        }
+        .nav-back,
+        .nav-forward {
+            display: none;
+        }
+
+        .radio-wrapper {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            outline: none;
+            height: 1.5rem;
+            opacity: 1;
+            transition: height ease 250ms, opacity ease 250ms;
+
+            input[type="radio"] {
+                position: absolute; //override bootstrap
+                height: 0;
+                opacity: 0;
+
+                &:focus-visible + label {
+                    box-shadow: 0 0 0 2.5px $blue;
+                }
+
+                &:focus + label,
+                &:checked:focus + label {
+                    box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
+                    background-color: $blue;
+                    color: $white;
+                    &.current-day {
+                        &:after {
+                            background-color: $white;
+                        }
+                        .first-day {
+                            color: $white;
+                        }
+                    }
+                }
+
+                &:checked + label {
+                    color: $white;
+                    background: $blue;
+                    &:after {
+                        background-color: $white;
+                    }
+                    .first-day {
+                        color: $white;
+                    }
+                }
+            }
+
+            .first-day {
+                position: absolute;
+                font-size: 9px;
+                font-weight: 500;
+                color: $gray-600;
+                top: 0;
+                z-index: 1;
+            }
+
+            label {
+                position: relative;
+                cursor: pointer;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-width: 2.5rem;
+                width: 2.5rem;
+                height: 2.5rem;
+
+                span {
+                    &.small {
+                        font-size: 0.75rem;
+                        color: $gray-550;
+                    }
+                }
+
+                &:hover,
+                &:checked {
+                    @include media-breakpoint-up(sm) {
+                        box-shadow: 0 0 0 4px transparent;
+                        background-color: $blue;
+                        color: $white;
+                        &:after {
+                            background-color: $white;
+                        }
+                    }
+                    cursor: pointer;
+                    &.current-day {
+                        + .first-day {
+                            color: $white;
+                        }
+                    }
+                    .first-day {
+                        color: $white;
+                    }
+                }
+                + p {
+                    display: none;
+                }
+            }
+
+            &.selectable-day {
+                label {
+                    color: $blue;
+                    background-color: $blue-100;
+                    border: 1px solid $blue;
+                    min-width: 2.5rem;
+                    width: 2.5rem;
+                    border-radius: 50%;
+                }
+            }
+            &.unavailable-day {
+                label {
+                    color: $gray-500;
+                    background-color: $gray-100;
+                    border: none;
+                    pointer-events: none;
+                }
+            }
+            &.unavailable-day:not(&.sunday) {
+                label {
+                    &::before {
+                        content: "";
+                        display: inline-block;
+                        position: absolute;
+                        left: -1rem;
+                        width: 1rem;
+                        height: 2.5rem;
+                        background: $gray-100;
+                    }
+                }
+            }
+            &.current-day {
+                label {
+                    font-weight: 500;
+                    color: $black;
+
+                    &:after {
+                        content: "";
+                        width: 0.25rem;
+                        height: 0.25rem;
+                        border-radius: 50%;
+                        background-color: $black;
+                        position: absolute;
+                        top: 28px;
+                    }
+                    .first-day {
+                        color: $blue;
+                    }
+                }
+            }
+        }
+
+        &.partial-month-initial-view {
+            .day-hidden {
+                opacity: 0;
+                overflow: hidden;
+                display: flex;
+                margin: 0;
+                max-height: 0;
+            }
+        }
+        &.month-hidden {
+            opacity: 0;
+            max-height: 0;
+            margin-bottom: 0;
+            overflow: hidden;
+        }
+    }
+
+    .btn-link {
+        font-weight: 500;
+        text-underline-offset: 4px;
+        flex-grow: 0;
+        &:focus {
+            box-shadow: none;
+        }
+    }
+
+    .past {
+        .calendar-grid-container {
+            .month-year {
+                grid-area: 1 / 1 / 2 / 6;
+            }
+            .nav-forward {
+                grid-area: 1 / 7 / 2 / 8;
+                display: flex;
+                justify-content: flex-end;
+                button {
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        width: 7px;
+                        height: 12px;
+                        background-image: url($svg-date-picker-forward-button);
+                    }
+                }
+            }
+            .nav-back {
+                grid-area: 1 / 6 / 2 / 7;
+                display: flex;
+                justify-content: flex-end;
+                button {
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        width: 7px;
+                        height: 12px;
+                        background-image: url($svg-date-picker-nav-back-button);
+                    }
+                }
+            }
+            .nav-back,
+            .nav-forward {
+                button {
+                    position: relative;
+                    border-radius: 50%;
+                    width: 28px;
+                    height: 28px;
+                    background-color: $blue-100;
+                    border: 1px solid $blue;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    &:focus,
+                    &:focus-visible {
+                        border: 2.5px solid $blue;
+                        box-shadow: none;
+                        background-color: $blue-100;
+                        color: $white;
+                    }
+                }
+            }
+        }
+    }
+}
+.btn-link {
+    display: block;
+    position: relative;
+    height: 2rem;
+    width: 100%;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    font-weight: 500;
+    text-underline-offset: 4px;
+    z-index: 2;
+}
+
+.form-test-error {
+    margin: 0 auto;
+    max-width: 414px;
+    text-align: left;
+}
+</style>
diff --git a/src/digital-components/date-picker/mixins/constants.js b/src/digital-components/date-picker/mixins/constants.js
new file mode 100644
index 00000000..70d4d383
--- /dev/null
+++ b/src/digital-components/date-picker/mixins/constants.js
@@ -0,0 +1,26 @@
+const TIMINGFUNC_MAP = {
+    linear: (t) => t,
+    'ease-in': (t) => t * t,
+    'ease-out': (t) => t * (2 - t),
+    'ease-in-out': (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t)
+};
+const BUFFER_OFFSET = 10;
+
+const MONTHS_OF_YEAR = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+];
+
+const DAYS_OF_WEEK = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+export { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR, DAYS_OF_WEEK };
diff --git a/src/digital-components/date-picker/mixins/helpers.js b/src/digital-components/date-picker/mixins/helpers.js
new file mode 100644
index 00000000..77c61fc9
--- /dev/null
+++ b/src/digital-components/date-picker/mixins/helpers.js
@@ -0,0 +1,10 @@
+const selectableDaysOptions = Object.freeze({
+    CUSTOM: 'custom',
+    PAST: 'past'
+});
+
+const requiredParameter = () => {
+    throw new Error('parameter is required');
+};
+
+export { selectableDaysOptions, requiredParameter };
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 7d03c8fa..b3130ac7 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -271,7 +271,9 @@ function getStoreValueFromString(str) {
     // eslint-disable-next-line no-restricted-syntax
     for (const s of str.split('.')) {
         if (s === 'getters') continue; // For backward compatibility
-        if (typeof storeOrStateObject[s] !== 'undefined') {
+        // TODO: I don't think this next line is doing what they think it's doing.
+        // eslint-disable-next-line eqeqeq, valid-typeof
+        if (typeof storeOrStateObject[s] != undefined) {
             storeOrStateObject = storeOrStateObject[s];
         } else {
             break;
diff --git a/src/helpers/date-helper.js b/src/helpers/date-helper.js
new file mode 100644
index 00000000..ed943174
--- /dev/null
+++ b/src/helpers/date-helper.js
@@ -0,0 +1,12 @@
+const getDateDifferenceInDays = (startDate, endDate) => {
+    const date1 = new Date(endDate);
+    date1.setHours(0, 0, 0, 0);
+    const date2 = new Date(startDate);
+    date2.setHours(0, 0, 0, 0);
+    // To calculate the time difference of two dates
+    const DifferenceInTime = date1.getTime() - date2.getTime();
+    // To calculate the no. of days between two dates
+    return DifferenceInTime / (1000 * 3600 * 24);
+};
+
+export default getDateDifferenceInDays;
diff --git a/src/helpers/service-location-helper.js b/src/helpers/service-location-helper.js
index a8ac5503..63f4c711 100644
--- a/src/helpers/service-location-helper.js
+++ b/src/helpers/service-location-helper.js
@@ -46,15 +46,7 @@ export async function getAvailabilityRating(
     providerNumber
 ) {
     // For a given shop provider number and date range, get the appointment time slots available
-    const shopTimeSlots = await useMainStore().getShopTimeSlots(
-        {
-            providerNumber,
-            startDate,
-            endDate,
-            shopAppointmentType
-        },
-        false
-    );
+    const shopTimeSlots = await useMainStore().getShopTimeSlots(startDate, endDate, shopAppointmentType, providerNumber);
 
     const numberOfDaysToEvaluate = 2;
     const isGoodAvailability =
diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index 3c248abf..ddeee120 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@@ -162,7 +162,7 @@ export default {
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
-        z-index: 2;
+        z-index: 3;
         .modal-body {
             padding: 2rem;
             .ccpa-icon {
diff --git a/src/iss-components/site-sub-header/site-sub-header.vue b/src/iss-components/site-sub-header/site-sub-header.vue
index 4cd0af1d..2c998fb3 100644
--- a/src/iss-components/site-sub-header/site-sub-header.vue
+++ b/src/iss-components/site-sub-header/site-sub-header.vue
@@ -19,7 +19,7 @@
             :class="justifySubheader">
             <p
                 class="fw-normal mb-0"
-                :class="alternateFormatting">
+                :class="[alternateFormatting, subTextClasses]">
                 <span v-html="subText"> </span>
             </p>
         </div>
@@ -49,7 +49,8 @@ export default {
         issContainingPage: String,
         justification: String,
         stripRteStyle: Boolean,
-        subContentProperty: String
+        subContentProperty: String,
+        subTextClasses: String
     },
     emits: ['click-event'],
     computed: {
diff --git a/src/layouts/coverage-statement/coverage-statement.spec.js b/src/layouts/coverage-statement/coverage-statement.spec.js
index d4c000b2..68ce7fd0 100644
--- a/src/layouts/coverage-statement/coverage-statement.spec.js
+++ b/src/layouts/coverage-statement/coverage-statement.spec.js
@@ -795,3 +795,26 @@ describe.skip('coverageStatement.vue', () => {
         });
     });
 });
+
+describe('coverageStatement.vue-working', () => {
+    describe('Navigation', () => {
+        test('Function called on any FORWARD navigation', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    policy: {
+                        isITAC: null
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.mainStore.updatePolicyITACFlag)
+                .toHaveBeenCalledTimes(1);
+        });
+    });
+});
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 9166c994..2c3166d0 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -77,6 +77,10 @@
                                     isRequired
                                     :validationRules="rules.selectionRequired">
                                 </buttonQuestion>
+                                <text-block
+                                    v-if="displayQuote"
+                                    cmsWidgetName="DisclaimerWidget"
+                                    typeStyle="caption" />
                               </div>
                               <siteFooter
                                 ref="siteFooter"
@@ -111,6 +115,7 @@ import alert from '@/ux-components/alert/alert.vue';
 import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
 import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
 
 // Import Supporting Files
 import { fetchCmsContentForPage, setupModalLinks, setupModalLink, processIfStatements } from '@/helpers/cms-content-helper.js';
@@ -134,14 +139,13 @@ export default {
         alert,
         contentGroupModal,
         buttonQuestion,
-        loadingModal
+        loadingModal,
+        textBlock
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
-        const wipersPromise = await useMainStore().getWipers();
-        const rainDefensePromise = await useMainStore().getRainDefense();
         const supportingItemsPromise = await useMainStore().getSupportingItems();
 
         // Settle promises and get results
@@ -150,14 +154,6 @@ export default {
                 resultKey: 'cmsContent',
                 promise: cmsContentPromise
             },
-            {
-                resultKey: 'wipers',
-                promise: wipersPromise
-            },
-            {
-                resultKey: 'rainDefense',
-                promise: rainDefensePromise
-            },
             {
                 resultKey: 'supportingItems',
                 promise: supportingItemsPromise
@@ -169,9 +165,7 @@ export default {
             ? JSON.parse(JSON.stringify(useMainStore().order.lineItems.glassParts))
             : [];
         const availableLineItems = [
-            resultMap.rainDefense,
             ...(resultMap.supportingItems ?? []),
-            ...(resultMap.wipers ?? []),
             ...(clonedGlassParts ?? [])
         ];
 
@@ -335,6 +329,7 @@ export default {
         nextStepsBody(newValue, oldValue) {
             if (newValue !== oldValue) {
                 setupModalLink(this, 'RecalModal');
+                setupModalLink(this, 'DeductibleModal');
             }
         }
     },
@@ -357,6 +352,7 @@ export default {
             return this.navigateForward();
         },
         async navigateForward() {
+            useMainStore().updatePolicyITACFlag(this.verifiedITAC);
             if (this.unverified || this.verifiedDeductible) {
                 this.mainStore.saveSupportingItems(this.supportingItems);
                 this.$router.navigate(
@@ -465,7 +461,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .cost {
   color: $green;
   font-size: 2rem;
@@ -512,5 +507,8 @@ export default {
     margin-top: 0.5rem;
   }
 }
+.modal {
+    overflow: hidden;
+}
 
 </style>
diff --git a/src/layouts/schedule-page/helpers/schedule-helper.js b/src/layouts/schedule-page/helpers/schedule-helper.js
new file mode 100644
index 00000000..6f41d306
--- /dev/null
+++ b/src/layouts/schedule-page/helpers/schedule-helper.js
@@ -0,0 +1,94 @@
+import { useMainStore } from '@/store';
+
+const getAlertReasons = async (ctu) => {
+    const store = useMainStore();
+    const alertReasons = await store.getAlertReasonsByCtu(ctu);
+
+    return Promise.resolve(alertReasons);
+};
+
+// This function will go away after testing.
+// The Service already went through testing and had these removed from it.
+export async function mockGetAlertReasons(ctu) {
+    let retList = [];
+    if (ctu === '01853') { // Ocala, FL 34470
+        retList = [
+            'Hurricane', 'ExtremeTemperature'
+        ];
+    } else if (ctu === '01814') { // Phoenix, AZ 85026
+        retList = [
+            'ExtremeTemperature'
+        ];
+    } else if (ctu === '01845') { // Raleigh, NC 27601
+        retList = [
+            'Hurricane'
+        ];
+    }
+    return Promise.resolve(retList);
+}
+
+export function calcDaysBetweenDates(dateString1, dateString2) {
+    const date1 = new Date(dateString1);
+    const date2 = new Date(dateString2);
+    const timeDifference = Math.abs(date2 - date1); // Calculate the time difference in milliseconds
+    return Math.ceil(timeDifference / (1000 * 60 * 60 * 24)); // Convert milliseconds to days
+}
+
+export function convertDateToDateString(date) {
+    // returns YYYY-MM-DD format
+    if (date instanceof Date !== true) return null;
+    return (
+        `${date.getFullYear()
+        }-${
+            (`0${date.getMonth() + 1}`).slice(-2)
+        }-${
+            (`0${date.getDate()}`).slice(-2)}`
+    );
+}
+
+export function convertDateStringToDate(dateString) {
+    // dateString must be YYYY-MM-DD format
+    if (typeof dateString !== 'string') return null;
+    const dateParts = dateString.split('-');
+    return new Date(dateParts[0], parseInt(dateParts[1], 10) - 1, dateParts[2]);
+}
+
+export function sumDateString(dateString, daysToAdd) {
+    // dateString must be YYYY-MM-DD format
+    if (typeof dateString !== 'string') return null;
+    const date = convertDateStringToDate(dateString);
+    date.setDate(date.getDate() + daysToAdd);
+    return convertDateToDateString(date);
+}
+
+export function militaryToTwelveHourTime(timeString) {
+    // Expected input: "HH:MM"
+    if (typeof timeString !== 'string') return null;
+    let hours = parseInt(timeString.split(':')[0], 10);
+    const minutes = timeString.split(':')[1];
+    const meridianNotation = hours > 11 ? 'PM' : 'AM';
+
+    if (hours > 12) {
+        hours -= 12;
+    }
+
+    return `${hours}:${minutes} ${meridianNotation}`;
+}
+
+export function getDisplayTextForDurationLength(durationMinimum, durationMaximum) {
+    const isLongAppointment = durationMaximum >= 120;
+    const isDurationRange = durationMinimum !== durationMaximum;
+
+    const adjustedMinimum = isLongAppointment ? durationMinimum / 60 : durationMinimum;
+    const adjustedMaximum = isLongAppointment ? durationMaximum / 60 : durationMaximum;
+
+    const durationText = isDurationRange
+        ? `${adjustedMinimum} - ${adjustedMaximum}`
+        : adjustedMinimum;
+
+    const unitText = isLongAppointment ? 'hours' : 'minutes';
+
+    return `${durationText} ${unitText}`;
+}
+
+export default getAlertReasons;
diff --git a/src/layouts/schedule-page/location-alerts/location-alerts.vue b/src/layouts/schedule-page/location-alerts/location-alerts.vue
new file mode 100644
index 00000000..46a84e5c
--- /dev/null
+++ b/src/layouts/schedule-page/location-alerts/location-alerts.vue
@@ -0,0 +1,57 @@
+<template>
+    <alert
+        v-for="alert in prefixedAlertReasons"
+        :key="alert.cmsWidgetName"
+        :ref="alert.cmsWidgetName"
+        class="mt-2 mb-3"
+        :cmsWidgetName="alert.cmsWidgetName"
+        alertClass="alert-warning" />
+</template>
+<script>
+import alert from '@/ux-components/alert/alert.vue';
+import { mockGetAlertReasons } from '@/layouts/schedule-page/helpers/schedule-helper';
+
+export default {
+    name: 'location-alerts',
+    components: {
+        alert
+    },
+    props: {
+        cmsWidgetPrefix: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            alertReasons: []
+        };
+    },
+    computed: {
+        prefixedAlertReasons() {
+            return this.alertReasons.reduce((newObj, alertReason) => {
+                newObj.push({
+                    cmsWidgetName: `${this.cmsWidgetPrefix}${alertReason}`,
+                    alertReason
+                });
+                return newObj;
+            }, []);
+        }
+    },
+    methods: {
+        loadInitialData(serviceLocationCtu, providerCtu) {
+            let ctuToUse = serviceLocationCtu;
+            if (providerCtu) {
+                ctuToUse = providerCtu;
+            }
+            return mockGetAlertReasons(ctuToUse); // Change to getAlertReasons after testing.
+        },
+        initializeComponent(initialData) {
+            this.alertReasons = initialData;
+        },
+        cmsHeadlineTextFound(widgetName) {
+            return this.getCmsContent(widgetName, 'HeadlineText') !== '';
+        }
+    }
+};
+</script>
diff --git a/src/layouts/schedule-page/schedule-page.spec.js b/src/layouts/schedule-page/schedule-page.spec.js
new file mode 100644
index 00000000..1e348080
--- /dev/null
+++ b/src/layouts/schedule-page/schedule-page.spec.js
@@ -0,0 +1,184 @@
+// Components
+import schedule from '@/layouts/schedule-page/schedule-page.vue';
+
+// Supporting Files
+import { createTestingPinia } from '@pinia/testing';
+import { shallowMount } from '@vue/test-utils';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { useMainStore } from '@/store/index.js';
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn().mockImplementation(() => ''),
+        setCmsContent: jest.fn()
+    }
+};
+
+const footerStub = {
+    render: () => {},
+    methods: {
+        updateButtonText: jest.fn()
+    }
+};
+
+const loadingModalStub = {
+    render: () => {},
+    methods: {
+        showModal: jest.fn(),
+        hideModal: jest.fn()
+    }
+};
+
+function getShallowMountedComponent(initialData = {}, methodToRun = () => {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        }
+    });
+
+    // mountOptions.global.mocks["$store"] = store;
+
+    mountOptions.global.stubs = {
+        siteFooter: footerStub,
+        siteHeader: true,
+        recalModal: true,
+        contentGroupModal: true,
+        alert: true,
+        loadingModal: loadingModalStub
+    };
+
+    methodToRun();
+
+    mountOptions.mixins = [mockMixin];
+    mountOptions.data = () => (
+        initialData
+    );
+
+    const wrapper = shallowMount(schedule, mountOptions);
+    return { wrapper };
+}
+
+beforeEach(() => {
+    const testingPinia = createTestingPinia({
+        initialState: {
+            main: {
+                order: {
+                    schedule: {
+                        date: '2019-01-01',
+                        startTime: '09:00',
+                        endTime: '10:00',
+                        routeCode: '000'
+                    },
+                    lineItems: {
+                        glassParts: [
+                            {
+                                partNumber: 'ABC123'
+                            }
+                        ],
+                        supportingItems: []
+                    },
+                    serviceLocation: {
+                        appointmentType: 'Inshop',
+                        zipCode: '12345',
+                        zipCodeCtu: '01234',
+                        provider: {
+                            providerNumber: '123'
+                        }
+                    },
+                    damage: {
+                        isRepair: false
+                    },
+                    referralNumber: '1234567'
+                },
+                payment: {
+                    isInsurance: true
+                },
+                lineItems: {
+                    glassParts: [],
+                    supportingItems: []
+                }
+            }
+        }
+    });
+    useMainStore(testingPinia);
+});
+
+describe('schedule-page.vue', () => {
+    describe('Initial Load', () => {
+        test('Should pass arePagePrerequisitesValid with a mobile order and no providerNumber', () => {
+            // Arrange
+            const { wrapper } = getShallowMountedComponent();
+            wrapper.vm.mainStore.order.serviceLocation.appointmentType = 'Mobile';
+            wrapper.vm.mainStore.order.serviceLocation.provider = null;
+
+            // Act
+            const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            // Assert
+            expect(arePagePrerequisitesValid).toBe(true);
+        });
+        test('Should pass arePagePrerequisitesValid with an inshop order and providerNumber', () => {
+            // Arrange
+            const { wrapper } = getShallowMountedComponent();
+
+            // Act
+            const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            // Assert
+            expect(arePagePrerequisitesValid).toBe(true);
+        });
+        test('Should fail arePagePrerequisitesValid with an inshop order and no providerNumber', () => {
+            // Arrange
+            const { wrapper } = getShallowMountedComponent();
+            wrapper.vm.mainStore.order.serviceLocation.provider.providerNumber = null;
+
+            // Act
+            const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            // Assert
+            expect(arePagePrerequisitesValid).toBeFalsy();
+        });
+        test('Should fail arePagePrerequisitesValid without isInsurance', () => {
+            // Arrange
+            const { wrapper } = getShallowMountedComponent();
+            wrapper.vm.mainStore.payment.isInsurance = null;
+
+            // Act
+            const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            // Assert
+            expect(arePagePrerequisitesValid).toBe(false);
+        });
+        test('Should fail arePagePrerequisitesValid if supportingItems is null', async () => {
+            // Arrange
+            const { wrapper } = getShallowMountedComponent();
+            wrapper.vm.mainStore.order.lineItems.supportingItems = null;
+
+            // Act
+            const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            // Assert
+            expect(arePagePrerequisitesValid).toBe(false);
+        });
+        test('Should fail arePagePrerequisitesValid with an replace with no glass parts', async () => {
+            // Arrange
+            const { wrapper } = getShallowMountedComponent();
+            wrapper.vm.mainStore.order.lineItems.glassParts = [];
+
+            // Act
+            const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            // Assert
+            expect(arePagePrerequisitesValid).toBe(false);
+        });
+    });
+    describe('Rendering', () => {
+        test('Schedule page loads', () => {
+            // Arrange
+            const { wrapper } = getShallowMountedComponent();
+
+            // Assert
+            expect(wrapper).toBeTruthy();
+        });
+    });
+});
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index cbf42097..673f32a0 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -5,18 +5,56 @@
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
         <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid pb-2">
-                    <p>Placeholder for schedule page</p>
-                    <siteFooter
-                        ref="siteFooter"
-                        class="mt-5"
-                        cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
-                        @ForwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
-                </div>
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <siteSubHeader
+                cmsWidgetName="ScheduleSubHeaderWidget"
+                subTextClasses="text-center small sub-text"
+                class="mt-5" />
+            <template v-if="ChangeShopLink.length">
+                <textBlock
+                    cmsWidgetName="ChangeShopLink"
+                    justifyText="center"
+                    class="mb-3 text-link-small"
+                    :marginTopSizeOverride="1" />
+            </template>
+            <div class="main-content-container">
+                <locationAlerts
+                    ref="locationAlerts"
+                    cmsWidgetPrefix="LocationAlert-" />
+                <datePicker
+                    ref="datePicker"
+                    v-model="selectedDate"
+                    customComponentId="dateQuestion"
+                    selectableDatesSetting="custom"
+                    class="text-link-small"
+                    :customSelectableDatesCallback="getAvailableDatesMethod"
+                    validationRules="date-required"
+                    @dateClicked="openInshopTimeSlotsModal" />
+                <timeSlotModalQuestion
+                    ref="timeSlotModalQuestion"
+                    v-model="selectedTimeSlotInfo"
+                    customComponentId="timeSlotModalQuestion"
+                    cmsWidgetName="TimeSlotModalQuestion"
+                    mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
+                    mobileCmsWidgetName="MobileTimeSlotModal"
+                    dropoffCmsWidgetName="DropOffTimeSlotModal"
+                    sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
+                    overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+                    :selectedDate="selectedDate"
+                    :appointmentType="appointmentType"
+                    :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                    :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                    :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
+                    :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
+                    validationRules="time-slot-selection-required"
+                    @timeSlotModalClosed="timeSlotModalClosed" />
+                <siteFooter
+                    ref="navbar"
+                    class="mt-5"
+                    cmsWidgetName="SiteFooterWidget"
+                    :isForwardActionDisabled="!meta.valid"
+                    @backClicked="backButtonAction"
+                    @forwardClicked="forwardButtonAction" />
             </div>
         </div>
     </Form>
@@ -24,41 +62,209 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
+import datePicker from '@/digital-components/date-picker/date-picker.vue';
+import timeSlotModalQuestion from '@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
 
 // Supporting files
-import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import {
+    calcDaysBetweenDates,
+    convertDateStringToDate,
+    sumDateString
+} from '@/layouts/schedule-page/helpers/schedule-helper';
+import {
+    AppointmentTypeStrings,
+    GET_MOBILE_TIME_SLOTS,
+    GET_SHOP_TIME_SLOTS,
+    PREMIUM_FEE_PART_TYPE
+} from '@/constants/schedule-constants.js';
+import { fetchCmsContentForPage, splitCopyOnCMSPlaceHolder } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
-import { Form } from 'vee-validate';
+import { Form, defineRule } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import errorMessages from '@/constants/error-messages';
+import { required } from '@/helpers/validation-rules';
 import { useMainStore } from '@/store';
 
+// DEFINE VALIDATION RULES
+defineRule('date-required', required(errorMessages.DATE_REQUIRED));
+defineRule('time-slot-selection-required', (value) => {
+    if (value?.timeSlot?.routeCode == null) {
+        return errorMessages.DATE_REQUIRED;
+    }
+    return true;
+});
+
+// Define constants
+const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
+
+const getAvailableDates = async (
+    startDateString,
+    endDateString,
+    appointmentType,
+    providerNumber
+) => {
+    const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
+    const difference = calcDaysBetweenDates(startDateString, endDateString);
+    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
+    const storeActionConfigs = [];
+    const timeSlotsData = {};
+    timeSlotsData.days = [];
+    let apiStartDate = startDateString;
+    let apiEndDate = endDateString;
+
+    for (let i = 1; i <= apiCallsCount; i++) {
+        let storeActionConfig;
+
+        if (i > 1) {
+            apiStartDate = sumDateString(apiEndDate, 1);
+            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
+
+            if (i === apiCallsCount) {
+                apiEndDate = endDateString;
+            }
+        } else if (apiEndDate > apiEndDateLimit) {
+            apiEndDate = apiEndDateLimit;
+        }
+
+        if (appointmentType === AppointmentTypeStrings.MOBILE
+            || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC) {
+            storeActionConfig = {
+                storeAction: GET_MOBILE_TIME_SLOTS,
+                payload: {
+                    startDate: apiStartDate,
+                    endDate: apiEndDate
+                }
+            };
+        } else {
+            storeActionConfig = {
+                storeAction: GET_SHOP_TIME_SLOTS,
+                payload: {
+                    startDate: apiStartDate,
+                    endDate: apiEndDate,
+                    shopAppointmentType: appointmentType,
+                    providerNumber
+                }
+            };
+        }
+        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
+    }
+
+    const timeSlotsResponsesData = {
+        days: []
+    };
+
+    function compareDayStrings(a, b) {
+        if (a.date < b.date) return -1;
+        if (a.date > b.date) return 1;
+        return 0;
+    }
+
+    const makeParallelCalls = async () => {
+        await Promise.all(storeActionConfigs.map(async (storeAction) => {
+            let timeSlotsResponse = null;
+            if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
+                timeSlotsResponse = await useMainStore().getShopTimeSlots(
+                    storeAction.payload.startDate,
+                    storeAction.payload.endDate,
+                    storeAction.payload.shopAppointmentType,
+                    storeAction.payload.providerNumber
+                );
+            } else {
+                timeSlotsResponse = await useMainStore().getMobileTimeSlots(storeAction.payload.startDate, storeAction.payload.endDate);
+            }
+
+            timeSlotsResponsesData.estimatedServiceMinutesMinimum = timeSlotsResponse.data.estimatedServiceMinutesMinimum;
+            timeSlotsResponsesData.estimatedServiceMinutesMaximum = timeSlotsResponse.data.estimatedServiceMinutesMaximum;
+            timeSlotsResponsesData.days = [
+                ...timeSlotsResponsesData.days,
+                ...timeSlotsResponse.data.days
+            ];
+        }));
+    };
+
+    return makeParallelCalls().then(() => {
+        // sort days chronologically
+        timeSlotsResponsesData.days.sort(compareDayStrings);
+        return timeSlotsResponsesData;
+    });
+};
+
 export default {
     name: 'schedule-page',
     components: {
         siteHeader,
+        siteSubHeader,
+        locationAlerts,
+        datePicker,
+        timeSlotModalQuestion,
         siteFooter,
+        textBlock,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
         // Call APIs
+        let preSelectedDate = await useMainStore().order.schedule.date;
+        if (!preSelectedDate || preSelectedDate.startTime === null) {
+            preSelectedDate = null;
+        }
+
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
+        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
+            selectableDatesSetting: 'custom',
+            initialViewRowsToShow: 5,
+            customSelectableDatesCallback: getAvailableDates,
+            preSelectedDate
+        });
+
+        const premiumFeePromise = useMainStore().getMobilePremiumFee();
+
+        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
+            if (result.data) {
+                return useMainStore().priceOrderItemsAndSaveServerData(result.data);
+            }
+            return result.data;
+        });
+
+        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
+            useMainStore().order.serviceLocation.zipCodeCtu,
+            useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
+        );
+
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
                 promise: cmsContentPromise
-            }];
+            },
+            {
+                resultKey: 'alertReasons',
+                promise: alertReasonsPromise
+            },
+            {
+                resultKey: 'datePickerInitialData',
+                promise: datePickerInitialDataPromise
+            },
+            {
+                resultKey: 'premiumFeeWithPrice',
+                promise: premiumFeeWithPricePromise
+            }
+        ];
 
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
-
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
+            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
+            vm.setData(resultMap.datePickerInitialData.initialShopTimeSlotsResponse, resultMap.premiumFeeWithPrice);
+            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
         });
     },
     setup() {
@@ -66,15 +272,61 @@ export default {
         return { mainStore };
     },
     data() {
+        return {
+            selectedDate: this.getSelectedDate(),
+            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
+            selectableDatesData: [],
+            mobilePremiumAppointmentFee: null
+        };
+    },
+    computed: {
+        ChangeShopLinkText() {
+            return this.getCmsContent('ChangeShopLink', 'Text');
+        },
+        ChangeShopLink() {
+            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
+        },
+        appointmentType() {
+            return useMainStore().order.serviceLocation.appointmentType;
+        },
+        timeSlotsForSelectedDate() {
+            if (!this.selectedDate) {
+                return null;
+            }
 
+            return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
+        }
+    },
+    watch: {
+        selectedDate(newValue, oldValue) {
+            // Clear time slot selection if date selected changes
+            if (newValue !== oldValue) {
+                this.selectedTimeSlotInfo = {
+                    timeSlot: {
+                        date: null,
+                        routeCode: null,
+                        startTime: null,
+                        endTime: null,
+                        jobMaxMinutes: null,
+                        jobMinMinutes: null
+                    },
+                    isPremiumAppointment: null
+                };
+            }
+        },
+        selectedTimeSlotInfo(newValue) {
+            this.updateFooterButtonText(newValue);
+        }
     },
     methods: {
+        splitCopyOnCMSPlaceHolder,
         arePagePrerequisitesValid() {
             const { serviceLocation } = useMainStore().order;
             const serviceLocationPreReqs = serviceLocation.zipCode
                 && serviceLocation.zipCodeCtu
                 && serviceLocation.appointmentType
-                && (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
+                && ((serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
+                        || serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC)
                     || serviceLocation.provider.providerNumber);
             const paymentInfo = useMainStore().payment.isInsurance !== null;
             const supportingItems = useMainStore().lineItems.supportingItems !== null;
@@ -82,19 +334,167 @@ export default {
                 useMainStore().order.damage.isRepair
                 || (useMainStore().order.lineItems?.glassParts != null
                     && useMainStore().order.lineItems.glassParts.length > 0);
+
             return serviceLocationPreReqs && paymentInfo && supportingItems && damageInfo;
         },
+        setData(initialShopTimeSlotsResponse, premiumFeeWithPriceResponse) {
+            this.selectableDatesData = initialShopTimeSlotsResponse;
+            this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
+                ? premiumFeeWithPriceResponse[0]
+                : null;
+        },
+        async getAvailableDatesMethod(startDate, endDate) {
+            const newShopTimeSlots = await getAvailableDates(
+                startDate,
+                endDate,
+                this.appointmentType,
+                this.mainStore.order.serviceLocation.provider.providerNumber
+            );
+            // ADD API CALL RESULTS TO EXISTING DATE DATA
+            this.selectableDatesData.days = this.selectableDatesData.days.concat(newShopTimeSlots.days);
+            return newShopTimeSlots;
+        },
+        getAvailableDates,
+        getServiceZipCtuCodeFromStore() {
+            return this.mainStore.order.serviceLocation.zipCodeCtu;
+        },
+        openInshopTimeSlotsModal() {
+            this.$refs.timeSlotModalQuestion.openModal();
+        },
+        getSelectedDate() {
+            return this.mainStore.order.schedule.date;
+        },
+        getSelectedTimeSlotInfo() {
+            const supportingItems = this.getSupportingItems();
+            const isPremiumAppointment =
+                !!supportingItems.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE)
+                    .length > 0;
+
+            const selectedTimeSlotInfo = {
+                timeSlot: this.mainStore.order.schedule,
+                isPremiumAppointment
+            };
+
+            return selectedTimeSlotInfo;
+        },
+        getSupportingItems() {
+            return this.mainStore.lineItems.supportingItems;
+        },
+        timeSlotModalClosed() {
+            // Clear the selectedDate if no timeSlot has been selected
+            if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
+                this.selectedDate = null;
+            }
+        },
+        updateFooterButtonText(timeSlotInfo) {
+            let navbarButtonText;
+            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
+                navbarButtonText = 'Continue';
+            } else {
+                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(timeSlotInfo.timeSlot.date)}`;
+                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(timeSlotInfo.timeSlot.startTime)}`;
+                } else if (
+                    this.appointmentType === AppointmentTypeStrings.MOBILE
+                    && !timeSlotInfo.isPremiumAppointment
+                ) {
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.startTime,
+                        true
+                    )} - ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.endTime,
+                        true
+                    )}`;
+                }
+            }
+            this.$refs.navbar.updateButtonText(navbarButtonText);
+        },
+        convertSelectedDateToShortMonthAndDay(selectedDate) {
+            // This conversion ensures we don't get get GMT induced date changes
+            const dateObject = convertDateStringToDate(selectedDate);
+            return dateObject.toLocaleDateString('en-us', { month: 'short', day: 'numeric' });
+        },
+        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
+            // Expected input: "HH:MM"
+            let hours = parseInt(militaryTimeInput.split(':')[0], 10);
+            const minutes = militaryTimeInput.split(':')[1];
+            const meridianNotation = hours > 11 ? 'PM' : 'AM';
+
+            if (hours > 12) {
+                hours -= 12;
+            }
+
+            if (shouldTrimMinutesIfEmpty && minutes === '00') {
+                return `${hours} ${meridianNotation}`;
+            }
+            return `${hours}:${minutes} ${meridianNotation}`;
+        },
+        updateSupportingItems() {
+            const supportingItems = this.getSupportingItems();
+
+            // if we have a premium fee(early bird), then save/update supporting items
+            if (
+                this.appointmentType === AppointmentTypeStrings.MOBILE
+                && this.selectedTimeSlotInfo?.isPremiumAppointment
+            ) {
+                const earlyBirdIndex = supportingItems.findIndex((item) => item.partType === PREMIUM_FEE_PART_TYPE);
+
+                if (earlyBirdIndex >= 0) {
+                    supportingItems[earlyBirdIndex].laborAmount =
+                        this.mobilePremiumAppointmentFee.laborAmount;
+                    supportingItems[earlyBirdIndex].selingPrice =
+                        this.mobilePremiumAppointmentFee.selingPrice;
+                    supportingItems[earlyBirdIndex].kitPrice =
+                        this.mobilePremiumAppointmentFee.kitPrice;
+                } else {
+                    supportingItems.push(this.mobilePremiumAppointmentFee);
+                }
+
+                this.mainStore.saveSupportingItemsSuppressingStateResetting(supportingItems);
+            } else {
+                // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
+                const removeEarlyBirdIndex = supportingItems.findIndex((item) => item.partType === PREMIUM_FEE_PART_TYPE);
+
+                if (removeEarlyBirdIndex >= 0) {
+                    supportingItems.splice(removeEarlyBirdIndex, 1);
+                    this.mainStore.saveSupportingItemsSuppressingStateResetting(supportingItems);
+                }
+            }
+        },
         backButtonAction() {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
-
         forwardButtonAction() {
-            // validate and save here
-            this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
-        },
+            this.updateSupportingItems();
+            this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
 
-        navigateForward() {
+            this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         }
     }
 };
 </script>
+
+<style lang="scss" scoped>
+$page-side-padding: 1.5rem;
+
+.page-container-grouped-styles {
+    overflow: auto;
+
+    .main-content-container {
+        padding: 0 1.5rem !important;
+    }
+}
+
+:deep(.text-link-small) {
+    a, .btn-link {
+        font-size: 0.875rem;
+        line-height: 1.5;
+    }
+}
+
+:deep(.subheader-primary) {
+    h5.dark-header {
+        margin-bottom: 0.25rem !important;
+    }
+}
+</style>
diff --git a/src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue b/src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue
new file mode 100644
index 00000000..c1cfecbf
--- /dev/null
+++ b/src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue
@@ -0,0 +1,118 @@
+<template>
+    <baseInputButton
+        v-bind="$props"
+        v-model="selectedValue"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
+        <div
+            :aria-label="buttonLabel"
+            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+            <span
+                class="m-0 position-relative"
+                :class="textPosition">
+                {{ buttonLabel }}
+                <span
+                    v-if="buttonLabelSubCopy"
+                    class="premium-appointment-price"
+                    :class="textPosition">
+                    {{ formattedButtonLabelSubCopy }}
+                </span>
+            </span>
+            <span
+                v-if="screenReaderOnlyText"
+                class="sr-only">
+                {{ screenReaderOnlyText }}
+            </span>
+        </div>
+    </baseInputButton>
+</template>
+
+<script>
+import baseInputButton from '@/digital-components/base-input-button/base-input-button.vue';
+import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
+
+export default {
+    name: 'time-slot-modal-list-button',
+    components: {
+        baseInputButton
+    },
+    mixins: [inputButtonWrapperMixin],
+    computed: {
+        formattedButtonLabelSubCopy() {
+            return this.buttonLabelSubCopy;
+        }
+    },
+    methods: {
+        displayLoader() {
+            this.isLoaderDisplayed = true;
+        },
+        preHandleAnswerChange() {
+            if (this.selectingInitiatesLoad) {
+                this.displayLoader();
+            }
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.list-button {
+    outline: none;
+    input[type="radio"],
+    input[type="checkbox"] {
+        position: static; //override bootstrap
+
+        &:focus-visible + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content {
+            color: $black;
+            font-weight: 500;
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+            span.premium-appointment-price {
+                background: $green-200;
+            }
+        }
+        &:checked:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content p,
+        &:checked + .list-button-content span {
+            font-weight: 500;
+        }
+        &:checked + .list-button-content span:nth-child(2) {
+            font-weight: 400;
+            color: $gray-600;
+        }
+    }
+}
+.list-button-content {
+    color: $gray-600;
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid $gray-500;
+    width: 100%;
+    outline: none;
+
+    span.premium-appointment-price {
+        position: absolute;
+        background: $green-100;
+        border-radius: 4.5rem;
+        line-height: 1.25rem;
+        color: $green-700;
+        font-size: 0.75rem;
+        margin-left: 4px;
+        padding: 2px 8px;
+        font-weight: 500;
+    }
+}
+
+.position-relative {
+    position: relative;
+}
+</style>
diff --git a/src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue
new file mode 100644
index 00000000..d671bb1b
--- /dev/null
+++ b/src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue
@@ -0,0 +1,525 @@
+<template>
+    <modal
+        :ref="modalName"
+        :headerText="dateSelectedReadableDate"
+        :footerButtonText="footerCloseButtonText"
+        :onModalClosedCallback="onModalClosed"
+        class="time-slots-modal"
+        @isModalOpened="setModalStatus"
+        @footer-button-event="setSelectedTimeSlot">
+        <template v-if="isModalOpened">
+            <textBlock
+                v-show="durationTextBlockCopy"
+                :customText="durationTextBlockCopy"
+                justifyText="center"
+                typeStyle="small"
+                class="duration-text-block" />
+            <buttonQuestion
+                ref="buttonQuestion"
+                v-model="selectedRouteCode"
+                buttonTypeString="timeSlotModalListButton"
+                :buttonTypeObject="timeSlotModalListButton"
+                class="mt-5"
+                :answers="availableTimeSlots"
+                groupName="chooseTimeSlot"
+                textPosition="text-center"
+                isRequired
+                validationRules="time-slot-required" />
+            <div
+                v-if="supplementalInformationBlock"
+                class="mt-1 mb-2 supplemental-information"
+                v-html="supplementalInformationBlock"></div>
+            <textBlock
+                v-show="disclaimerTextBlockCopy"
+                :customText="disclaimerTextBlockCopy"
+                justifyText="left"
+                typeStyle="caption"
+                class="mb-2" />
+        </template>
+    </modal>
+</template>
+
+<script>
+// Components
+import modal from '@/digital-components/modal/modal.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+
+// Helpers
+import { deepClone } from '@/helpers/object-helper';
+
+// Validation
+import { defineRule, useField } from 'vee-validate';
+import errorMessages from '@/constants/error-messages';
+import { required } from '@/helpers/validation-rules';
+
+// Constants
+import {
+    AppointmentTypeStrings,
+    RouteCodeFlags,
+    PREMIUM_TIME_SLOT_ID_FLAG,
+    PREMIUM_FEE_PART_TYPE
+} from '@/constants/schedule-constants';
+import {
+    convertDateStringToDate,
+    militaryToTwelveHourTime,
+    getDisplayTextForDurationLength
+} from '@/layouts/schedule-page/helpers/schedule-helper';
+import timeSlotModalListButton from './time-slot-modal-list-button/time-slot-modal-list-button.vue';
+
+const cmsWidgetFieldMappings = {
+    MODAL_CLOSE_BUTTON: 'FooterText',
+    SUPPLEMENTAL_INFORMATION: 'BodyText',
+    TIME_SLOT_BUTTON: 'HeaderText',
+    DISCLAIMER: 'FooterText',
+    DURATION: 'SubheaderText'
+};
+
+// Validation for the modal button
+defineRule('time-slot-required', required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: 'time-slot-modal-question',
+    components: {
+        modal,
+        textBlock,
+        buttonQuestion
+    },
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({
+                timeSlot: {
+                    routeCode: null,
+                    date: null,
+                    startTime: null,
+                    endTime: null,
+                    jobMaxMinutes: null,
+                    jobMinMinutes: null
+                },
+                isPremiumAppointment: null
+            })
+        },
+        cmsWidgetName: String,
+        mobileCmsWidgetName: String,
+        mobilePremiumCmsWidgetName: String,
+        dropoffCmsWidgetName: String,
+        sameDayDropOffCmsWidgetName: String,
+        overnightDropOffCmsWidgetName: String,
+        appointmentType: String,
+        timeSlotsForSelectedDate: Object,
+        premiumAppointmentFee: Object,
+        estimatedServiceMinutesMinimum: Number,
+        estimatedServiceMinutesMaximum: Number,
+        validationRules: String,
+        customComponentId: String,
+        selectedDate: String
+    },
+    emits: ['update:modelValue', 'time-slot-modal-closed'],
+    setup(props) {
+        const uuid = crypto.randomUUID();
+        const componentId = !props.customComponentId
+            ? `component-${uuid}`
+            : props.customComponentId;
+
+        const { modelValue } = deepClone(props);
+        const initialValue = modelValue;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue
+        };
+
+        const { errorMessage, handleChange, meta, validate, errors } = useField(
+            componentId,
+            props.validationRules,
+            fieldOptions
+        );
+
+        return {
+            componentId,
+            errorMessage,
+            handleChange,
+            validate,
+            meta,
+            errors
+        };
+    },
+    data() {
+        return {
+            isModalOpened: false,
+            selectedRouteCode: this.getSelectedRouteCode(),
+            timeSlotModalListButton
+        };
+    },
+    computed: {
+        modalName() {
+            return 'timeSlots';
+        },
+        modal() {
+            return this.$refs[this.modalName];
+        },
+        supplementalInformationBlock() {
+            let appointmentTypeCmsWidgetName;
+            if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                return null;
+            }
+
+            if (this.appointmentType === AppointmentTypeStrings.MOBILE
+                || this.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC) {
+                appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG)
+                    ? this.mobilePremiumCmsWidgetName
+                    : this.mobileCmsWidgetName;
+            } else {
+                if (!this.selectedRouteCode) {
+                    return null;
+                }
+                appointmentTypeCmsWidgetName =
+                        this.getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
+                            this.selectedRouteCode,
+                            true
+                        );
+            }
+
+            return this.getCmsContent(
+                appointmentTypeCmsWidgetName,
+                cmsWidgetFieldMappings.SUPPLEMENTAL_INFORMATION
+            );
+        },
+        footerCloseButtonText() {
+            return this.getCmsContent(
+                this.cmsWidgetName,
+                cmsWidgetFieldMappings.MODAL_CLOSE_BUTTON
+            );
+        },
+        premiumAppointmentButtonText() {
+            return this.getCmsContent(
+                this.mobilePremiumCmsWidgetName,
+                cmsWidgetFieldMappings.TIME_SLOT_BUTTON
+            );
+        },
+        dropoffButtonText() {
+            return this.getCmsContent(
+                this.dropoffCmsWidgetName,
+                cmsWidgetFieldMappings.TIME_SLOT_BUTTON
+            );
+        },
+        sameDayDropoffButtonText() {
+            return this.getCmsContent(
+                this.sameDayDropOffCmsWidgetName,
+                cmsWidgetFieldMappings.TIME_SLOT_BUTTON
+            );
+        },
+        overnightDropoffButtonText() {
+            return this.getCmsContent(
+                this.overnightDropOffCmsWidgetName,
+                cmsWidgetFieldMappings.TIME_SLOT_BUTTON
+            );
+        },
+        dropoffDisclaimerText() {
+            return this.getCmsContent(this.dropoffCmsWidgetName, cmsWidgetFieldMappings.DISCLAIMER);
+        },
+        sameDayDropOffDisclaimerText() {
+            return this.getCmsContent(
+                this.sameDayDropOffCmsWidgetName,
+                cmsWidgetFieldMappings.DISCLAIMER
+            );
+        },
+        overnightDropOffDisclaimerText() {
+            return this.getCmsContent(
+                this.overnightDropOffCmsWidgetName,
+                cmsWidgetFieldMappings.DISCLAIMER
+            );
+        },
+        disclaimerTextBlockCopy() {
+            if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
+                if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
+                    if (this.isSameDay) {
+                        return this.sameDayDropOffDisclaimerText;
+                    }
+                    return this.dropoffDisclaimerText;
+                } if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                    return this.overnightDropOffDisclaimerText;
+                }
+                return null;
+            }
+            return null;
+        },
+        dropOffDurationText() {
+            return this.getCmsContent(this.dropoffCmsWidgetName, cmsWidgetFieldMappings.DURATION);
+        },
+        sameDayDropoffDurationText() {
+            return this.getCmsContent(
+                this.sameDayDropOffCmsWidgetName,
+                cmsWidgetFieldMappings.DURATION
+            );
+        },
+        overnightDropoffDurationText() {
+            return this.getCmsContent(
+                this.overnightDropOffCmsWidgetName,
+                cmsWidgetFieldMappings.DURATION
+            );
+        },
+        inshopDurationText() {
+            const inshopDurationTextWithoutTime = this.getCmsContent(
+                this.cmsWidgetName,
+                cmsWidgetFieldMappings.DURATION
+            );
+
+            const inshopDurationTime = getDisplayTextForDurationLength(
+                this.estimatedServiceMinutesMinimum,
+                this.estimatedServiceMinutesMaximum
+            );
+
+            return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
+        },
+        durationTextBlockCopy() {
+            if (this.appointmentType === AppointmentTypeStrings.MOBILE
+                || this.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC) {
+                return null;
+            } if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                return this.inshopDurationText;
+            }
+            if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                return this.overnightDropoffDurationText;
+            } if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
+                if (this.isSameDay) {
+                    return this.sameDayDropoffDurationText;
+                }
+                return this.dropOffDurationText;
+            }
+            return null;
+        },
+        isSameDay() {
+            if (!this.timeSlotsForSelectedDate) {
+                return false;
+            }
+
+            const selectedDate = this.timeSlotsForSelectedDate.date;
+            const todaysDate = new Date().toISOString().split('T')[0];
+            return selectedDate === todaysDate;
+        },
+        dateSelectedReadableDate() {
+            if (!this.timeSlotsForSelectedDate) {
+                return null;
+            }
+
+            // This conversion ensures we don't get get GMT induced date changes
+            const dateObject = convertDateStringToDate(this.timeSlotsForSelectedDate.date);
+            // Ex: Tuesday, April 22
+            return dateObject.toLocaleDateString('en-us', {
+                weekday: 'long',
+                month: 'long',
+                day: 'numeric'
+            });
+        },
+        availableTimeSlots() {
+            if (!this.timeSlotsForSelectedDate) {
+                return null;
+            }
+
+            if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
+                return this.getAvailableTimeSlotsForDropOff(this.timeSlotsForSelectedDate.timeSlots);
+            } if (this.appointmentType === AppointmentTypeStrings.MOBILE
+                    || this.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC) {
+                return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
+            }
+            return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);
+        }
+    },
+    watch: {
+        modelValue: {
+            handler(newValue) {
+                this.handleChange(newValue);
+            },
+            deep: true
+        },
+        selectedDate: {
+            handler() {
+                this.selectedRouteCode = null;
+                this.autoSelectTimeSlotIfOnlyOneIsAvailable();
+            }
+        }
+    },
+    methods: {
+        openModal() {
+            this.modal.openModal();
+        },
+        setModalStatus(isOpened) {
+            this.isModalOpened = isOpened;
+        },
+        closeModal() {
+            this.modal.closeModal();
+        },
+        onModalClosed() {
+            this.$emit('time-slot-modal-closed');
+        },
+        async setSelectedTimeSlot() {
+            this.$emit(
+                'update:modelValue',
+                this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
+            );
+            this.closeModal();
+        },
+        getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
+            selectedRouteCode,
+            isSameDayRelevant = false
+        ) {
+            if (selectedRouteCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                return this.overnightDropOffCmsWidgetName;
+            }
+
+            if (selectedRouteCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
+                return this.isSameDay && isSameDayRelevant
+                    ? this.sameDayDropOffCmsWidgetName
+                    : this.dropoffCmsWidgetName;
+            }
+
+            return '';
+        },
+        getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
+            return timeSlotsForSelectedDate.map((timeSlot) => {
+                const readableTime = militaryToTwelveHourTime(timeSlot.startTime);
+                return {
+                    value: timeSlot.id,
+                    buttonLabel: readableTime
+                };
+            });
+        },
+        getAvailableTimeSlotsForDropOff(timeSlotsForSelectedDate) {
+            const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
+                let buttonLabelValue;
+                if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                    buttonLabelValue = this.overnightDropoffButtonText;
+                } else if (this.isSameDay) {
+                    buttonLabelValue = this.sameDayDropoffButtonText;
+                } else {
+                    buttonLabelValue = this.dropoffButtonText;
+                }
+
+                return {
+                    value: timeSlot.id,
+                    buttonLabel: buttonLabelValue
+                };
+            });
+
+            return availableTimeSlots;
+        },
+        getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
+            const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
+                const readableTime = `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(timeSlot.endTime)}`;
+                return {
+                    value: timeSlot.id,
+                    buttonLabel: readableTime
+                };
+            });
+
+            const isPremiumTimeSlot = timeSlotsForSelectedDate[0].offerPremium;
+            const hasPremiumPartAvailable =
+                this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE;
+            if (isPremiumTimeSlot && hasPremiumPartAvailable) {
+                availableTimeSlots.unshift(this.getPremiumAppointmentTimeSlot(timeSlotsForSelectedDate[0]));
+            }
+
+            return availableTimeSlots;
+        },
+        getPremiumAppointmentTimeSlot(timeSlotData) {
+            const formattedPrice =
+                `+$${this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2)}`;
+
+            return {
+                // Unique value is required for each <input> and the premium appoinment shares an id
+                value: this.addPremiumFlagToInput(timeSlotData.id),
+                buttonLabel: this.premiumAppointmentButtonText,
+                buttonLabelSubCopy: formattedPrice,
+                additionalButtonData: {
+                    isPremiumAppointment: true
+                }
+            };
+        },
+        getSelectedRouteCode() {
+            let selectedRouteCode;
+            if (!this.modelValue?.timeSlot) {
+                selectedRouteCode = null;
+            }
+
+            if (this.modelValue?.isPremiumAppointment) {
+                selectedRouteCode = this.addPremiumFlagToInput(this.modelValue?.timeSlot?.routeCode);
+            } else {
+                selectedRouteCode = this.modelValue?.timeSlot?.routeCode;
+            }
+
+            return selectedRouteCode;
+        },
+        autoSelectTimeSlotIfOnlyOneIsAvailable() {
+            const numberOfOptions = this.availableTimeSlots?.length;
+            if (numberOfOptions === 1) {
+                this.selectedRouteCode = this.availableTimeSlots[0].value;
+            }
+        },
+        addPremiumFlagToInput(routeCode) {
+            return (`${routeCode}${PREMIUM_TIME_SLOT_ID_FLAG}`);
+        },
+        removePremiumFlagFromInput(routeCode) {
+            return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, '');
+        },
+        getSelectedTimeSlotInfoObject(routeCode) {
+            let routeCodeToUse = routeCode;
+            const routeCodeIncludesPremium = routeCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
+            if (routeCodeIncludesPremium) {
+                routeCodeToUse = this.removePremiumFlagFromInput(routeCode);
+            }
+
+            const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find((ts) => ts.id === routeCodeToUse);
+
+            if (timeSlot) {
+                return {
+                    timeSlot: {
+                        date: this.timeSlotsForSelectedDate.date,
+                        routeCode: timeSlot.id,
+                        startTime: timeSlot.startTime,
+                        endTime: timeSlot.endTime,
+                        jobMaxMinutes: this.estimatedServiceMinutesMaximum.toString(),
+                        jobMinMinutes: this.estimatedServiceMinutesMinimum.toString()
+                    },
+                    isPremiumAppointment: !!routeCodeIncludesPremium
+                };
+            }
+
+            return {
+                timeSlot: {
+                    date: null,
+                    startTime: null,
+                    endTime: null,
+                    routeCode: null,
+                    jobMaxMinutes: null,
+                    jobMinMinutes: null
+                },
+                isPremiumAppointment: null
+            };
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.time-slots-modal.modal.modal-component {
+    .modal-header {
+        padding-bottom: 0;
+        margin-bottom: 0 !important;
+    }
+    .text-block.duration-text-block {
+        margin-top: 4px !important;
+    }
+    .supplemental-information {
+        line-height: 1.5rem;
+        font-size: 0.875rem;
+        li strong {
+            font-weight: $font-weight-bold;
+        }
+        li:not(:last-child) {
+            margin-bottom: 8px;
+        }
+    }
+}
+</style>
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 25e7a529..dc7dadb2 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
@@ -51,13 +51,15 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
         answersToDisplay() {
-            const shouldShowMobile = this.isServiceableMobile;
+            const shouldShowMobile = this.isServiceableMobile && this.isITAC;
+            const shouldShowMobileNotITAC = this.isServiceableMobile && !this.isITAC;
             const shouldShowInshop = this.isServiceableInshop;
             const shouldShowDropoff = this.isServiceableInshop && !useMainStore().damage.isRepair;
             return this.answersFromCms
                 ? this.answersFromCms.filter((answer) => (
                     (answer.Name === AppointmentTypeStrings.IN_SHOP && shouldShowInshop)
                           || (answer.Name === AppointmentTypeStrings.MOBILE && shouldShowMobile)
+                          || (answer.Name === AppointmentTypeStrings.MOBILE_NOT_ITAC && shouldShowMobileNotITAC)
                           || (answer.Name === AppointmentTypeStrings.DROP_OFF && shouldShowDropoff)
                 ))
                 : [];
@@ -70,6 +72,9 @@ export default {
                 this.$emit('update:modelValue', newValue);
             }
         },
+        isITAC() {
+            return useMainStore().policy.isITAC;
+        },
         isMobileOnly() {
             return this.isServiceableMobile && !this.isServiceableInshop;
         }
@@ -80,9 +85,14 @@ export default {
                 // If there is only one option to display and that option is 'Mobile' then select it
                 if (
                     newValue.length === 1
-                    && newValue.findIndex((answer) => answer.Name === 'Mobile') !== -1
+                    && newValue.findIndex((answer) => (answer.Name === AppointmentTypeStrings.MOBILE
+                    || answer.Name === AppointmentTypeStrings.MOBILE_NOT_ITAC)) !== -1
                 ) {
-                    this.selectedValues = 'Mobile';
+                    if (this.isITAC) {
+                        this.selectedValues = AppointmentTypeStrings.MOBILE;
+                    } else {
+                        this.selectedValues = AppointmentTypeStrings.MOBILE_NOT_ITAC;
+                    }
                 }
             },
             immediate: true
@@ -90,7 +100,11 @@ export default {
         isMobileOnly: {
             handler(newValue) {
                 if (newValue) {
-                    this.selectedValues = 'Mobile';
+                    if (this.isITAC) {
+                        this.selectedValues = AppointmentTypeStrings.MOBILE;
+                    } else {
+                        this.selectedValues = AppointmentTypeStrings.MOBILE_NOT_ITAC;
+                    }
                 }
             }
         }
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 d6d850b6..3829dd76 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
@@ -31,6 +31,7 @@
                     </span>
                 </div>
                 <textBlock
+                    v-if="isITAC"
                     :customText="mobileFeeText"
                     cmsWidgetName="MobileFeeDisclaimerWidget"
                     typeStyle="caption" />
@@ -81,6 +82,7 @@ import addressQuestions from '@/iss-components/address-questions/address-questio
 import vehicleProtectedQuestion from '@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue';
 
 // Helpers
+import { useMainStore } from '@/store';
 import {
     getPricedMobileFeePart,
     getServiceabilityDetails,
@@ -167,6 +169,9 @@ export default {
         };
     },
     computed: {
+        isITAC() {
+            return useMainStore().policy.isITAC;
+        },
         mobileLocationLinkPromptText() {
             return this.getCmsContent(this.linkWidgetName, 'HeaderText');
         },
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 75b735f7..62484df8 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -59,7 +59,7 @@
                     cmsWidgetName="AppointmentTypeQuestionWidget"
                     validationRules="option-required" />
                 <mobileLocationModalQuestions
-                    v-if="selectedAppointmentType === 'Mobile'"
+                    v-if="isMobileLocationDisplayed"
                     ref="mobileLocationQuestions"
                     v-model="mobileLocationQuestions"
                     customComponentId="mobileLocationQuestions"
@@ -94,6 +94,7 @@
 </template>
 <script>
 // Import Supporting Files
+import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { required } from '@/helpers/validation-rules';
@@ -260,7 +261,8 @@ export default {
                 this.isVehicleProtected = newValue.isVehicleProtected;
 
                 if (newValue.zipCode !== this.zipCode) {
-                    if (!this.selectedAppointmentType === 'Mobile') {
+                    if (!(this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
+                        || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC)) {
                         this.selectedAppointmentType = null;
                     }
                     this.selectedProvider = null;
@@ -289,6 +291,10 @@ export default {
         isAppointmentTypeDisplayed() {
             return this.zipCode && !this.displayNoShopsAlert;
         },
+        isMobileLocationDisplayed() {
+            return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
+            || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC;
+        },
         requiresInshopRecalibration() {
             // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
             return (
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 2edeba6c..59ded30c 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -36,7 +36,7 @@
               :text="showMoreShopsLinkText"
               href="#!"
               :aria-label="showMoreShopsLinkText"
-              @click-event="getNextShopsFromList" />
+              @clickEvent="getNextShopsFromList" />
       </div>
   </transition>
 </template>
@@ -48,6 +48,7 @@ import buttonQuestion from '@/digital-components/button-question/button-question
 import textLink from '@/ux-components/text-link/text-link.vue';
 
 // Supporting files
+import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
 import baseMixin from '@/mixins/base-mixin.js';
 import { defineRule } from 'vee-validate';
 import { required } from '@/helpers/validation-rules';
@@ -141,7 +142,7 @@ export default {
 
                 await nextTick();
 
-                if (newValue !== 'Mobile') {
+                if (newValue !== AppointmentTypeStrings.MOBILE && newValue !== AppointmentTypeStrings.MOBILE_NOT_ITAC) {
                     this.getNextShopsFromList();
                 }
             }
@@ -253,6 +254,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "@/styles/ux-variables-svg-strings.scss";
+
 .shop-question {
   margin-top: 1rem;
   text-align: center;
@@ -264,7 +267,7 @@ export default {
   }
 
   .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: url($svg-drop-off-alert);
     background-repeat: no-repeat;
     background-size: 0.75rem;
     background-position: 0.5rem 0.75rem;
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index c4d49845..a1e0b321 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -198,6 +198,16 @@ defineRule(
     'policy-zip-format',
     regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT)
 );
+defineRule('loss-date-gt-10-years', (value) => {
+    const lossDate = new Date(Date.parse(`${value}T00:00:00`));
+    const today = new Date();
+    const tenYearsAgo = new Date(today.getFullYear() - 10, today.getMonth(), today.getDate(), 0, 0, 0, 0);
+    if (lossDate < tenYearsAgo) {
+        return errorMessages.DAMAGE_DATE_REQUIREMENT;
+    }
+
+    return true;
+});
 
 export default {
     name: 'welcome-page',
@@ -247,7 +257,7 @@ export default {
             rules: {
                 policyNumber: 'policy-number-required',
                 policyZip: 'policy-zip-required|policy-zip-format',
-                lossDate: 'loss-date-required',
+                lossDate: 'loss-date-required|loss-date-gt-10-years',
                 damageOption: 'damage-option-required',
                 phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
                 email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index bb067255..ce2bece9 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -54,6 +54,9 @@ const navigationScenarios = Object.freeze({
     CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: 'CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS',
     CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: 'CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS',
 
+    // Schedule
+    CLICKED_CHANGE_LOCATION: 'CLICKED_CHANGE_LOCATION',
+
     // Coverage Statement
     CLICKED_BACK_WITH_REPAIR: 'CLICKED_BACK_WITH_REPAIR',
     CLICKED_FORWARD_WITH_INVALID_STATE: 'CLICKED_FORWARD_WITH_INVALID_STATE',
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 0b40e00b..e125f45f 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -555,6 +555,10 @@ const routingTable = () => [
             {
                 scenario: navigationScenarios.CLICKED_FORWARD,
                 destinationIssPageValue: issPageValues.CONTACT_DETAILS
+            },
+            {
+                scenario: navigationScenarios.CLICKED_CHANGE_LOCATION,
+                destinationIssPageValue: issPageValues.SERVICE_LOCATION
             }
         ]
     },
diff --git a/src/store/index.js b/src/store/index.js
index 90848b05..b920113e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -11,10 +11,24 @@ import applicationConfig from '@/constants/application-config';
 import issPageValues from '@/router/router-constants/issPage-values';
 import damageLocationsSelected from '@/constants/damage-locations-selected';
 import coverageStatuses from '@/constants/coverage-statuses';
-import { PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants';
+import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants';
+import getDateDifferenceInDays from '@/helpers/date-helper';
 
 const storeId = 'main';
 
+function getTimeSlotsAdditionalEventData(
+    provisionalTriggers,
+    zipCode,
+    firstAvailableAppointmentDateString,
+    shopAppointmentType
+) {
+    let numberOfDays = null;
+    if (firstAvailableAppointmentDateString) numberOfDays = getDateDifferenceInDays(new Date(), firstAvailableAppointmentDateString);
+
+    if (shopAppointmentType) return `FirstAvailableAppointment:${numberOfDays},Zip:${zipCode},ShopAppointmentType:${shopAppointmentType},ProvisionalTriggers:${provisionalTriggers.join(',')}`;
+    return `FirstAvailableAppointment:${numberOfDays},Zip:${zipCode},ProvisionalTriggers:${provisionalTriggers.join(',')}`;
+}
+
 const getDefaultState = () => ({
     order: {
         vehicle: {
@@ -60,6 +74,7 @@ const getDefaultState = () => ({
                 repair: null, // numerical value; how much customer owes on deductible in repair case
                 replace: null // numerical value; how much customer owes on deductible in replace case,
             },
+            isITAC: null,
             vehicles: [],
             endorsementQuestionAnswers: null
         },
@@ -106,7 +121,8 @@ const getDefaultState = () => ({
             isInsurance: true, // TODO delete; irrelevant to ISS
             insuranceCoverage: {
                 isVerified: false,
-                coverageStatus: coverageStatuses.PENDING
+                coverageStatus: coverageStatuses.PENDING,
+                claimNumber: null
             },
             parentAccountNumber: 0
         },
@@ -123,7 +139,8 @@ const getDefaultState = () => ({
             startTime: null,
             endTime: null,
             routeCode: null,
-            jobMaxMinutes: null
+            jobMaxMinutes: null,
+            jobMinMinutes: null
         },
         referralNumber: null,
         referralDate: null,
@@ -178,6 +195,9 @@ export const useMainStore = defineStore({
         payment: (state) => state.order.payment,
         policy: (state) => state.order.policy,
         hasAnyNonWindshieldGlassParts: (state) => !state.order.policy.isDamageGlassOnly,
+        isMobileAppointment: (state) => state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
+            || state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC,
+        isDropOffAppointment: (state) => state.order.serviceLocation.appointmentType === AppointmentTypeStrings.DROP_OFF,
         isClaimRegistrationRequired: (state) => state.issConfig.isClaimRegistrationRequired,
         eventBusItem: (state) => (eventCategory, eventSubCategory) => {
             const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventCategory && subCategory === eventSubCategory);
@@ -464,17 +484,20 @@ export const useMainStore = defineStore({
                 }).then((response) => {
                     const registerClaimFailed = response.data.isError;
                     order.payment.insuranceCoverage.isVerified = !registerClaimFailed;
+                    order.payment.insuranceCoverage.claimNumber = null;
                     if (registerClaimFailed) {
                         this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
                     } else if (this.policy.noCoverage) {
                         this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.NO_COMP;
                     } else {
                         this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED;
+                        this.order.payment.insuranceCoverage.claimNumber = response.data.claimNumber;
                     }
                     return resolve(response);
                 }, (error) => {
                     this.order.payment.insuranceCoverage.isVerified = false;
                     this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
+                    this.order.payment.insuranceCoverage.claimNumber = null;
                     return reject(error);
                 });
             });
@@ -608,7 +631,75 @@ export const useMainStore = defineStore({
                 }
             });
         },
+        getMobilePremiumFee() {
+            const damageType = this.damage.isRepair ? 'Repair' : 'Replace';
+            const paymentType = this.order.payment.isInsurance ? 'Insurance' : 'Cash';
 
+            return globalMethods.callHttpClient({
+                method: endpoints.GetMobilePremiumFee.method,
+                endpoint: `${endpoints.GetMobilePremiumFee.url}/${paymentType}/${damageType}`,
+                logApiCall: true
+            });
+        },
+        getMobileTimeSlots(startDate, endDate) {
+            const { order } = this;
+            const { vehicle } = this.order;
+            let lineItems = [
+                ...(order.lineItems.supportingItems ?? []),
+                ...(order.lineItems.vaps ?? []),
+                ...getFlattenedArrayOfLineItemsWithChildParts(order.lineItems.glassParts)
+            ];
+            lineItems = lineItems.map((lineItem) => ({
+                partNumber: lineItem.partNumber,
+                partType: lineItem.partType
+            }));
+            const glassPieces = order.damage.glassToReplace
+                ? convertGlassPieceToBackEndCompatibleFormat(order.damage.glassToReplace)
+                : [];
+            const payload = {
+                startDate,
+                endDate,
+                applicationName: applicationConfig.APPLICATION_NAME,
+                parentAccountNumber: this.issConfig.parentAccountNumber, // this.payment.parentAccountNumber,
+                carId: vehicle.carId,
+                lineItems,
+                glassPieces,
+                eon: order.eon,
+                coverage: {
+                    status: '',
+                    deductible: 0,
+                    additionalAuthFlag: ''
+                },
+                partSelection: {
+                    hasAnsweredPartQuestions: !!order.damage.partQuestionAnswers?.length,
+                    hasAnsweredMoldingQuestions: !!order.damage.moldingQuestionAnswers?.length,
+                    hasAnsweredCapabilityQuestions: !!order.damage.capabilityQuestionAnswers?.length,
+                    hasManuallySelectedParts:
+                        !!this.applicationUser.pageData['vehicle-parts']?.partsOrQuestions
+                            .length
+                },
+                vehicle: {
+                    year: vehicle.year,
+                    make: vehicle.make,
+                    model: vehicle.model,
+                    style: vehicle.style,
+                    vin: vehicle.vin ?? ''
+                },
+                zipCode: order.serviceLocation.zipCode
+            };
+            return globalMethods.callHttpClient({
+                method: endpoints.GetMobileTimeSlots.method,
+                endpoint: endpoints.GetMobileTimeSlots.url,
+                payload,
+                logApiCall: true,
+                additionalSuccessEventDataHandler: (response) =>
+                    getTimeSlotsAdditionalEventData(
+                        response.data.provisionalTriggers,
+                        order.serviceLocation.zipCode,
+                        response.data.days?.[0]?.date
+                    )
+            });
+        },
         getShopTimeSlots(startDate, endDate, shopAppointmentType, providerNumber) {
             const { order } = this;
             const { vehicle } = this.order;
@@ -631,7 +722,7 @@ export const useMainStore = defineStore({
                 endDate,
                 shopAppointmentType,
                 applicationName: applicationConfig.APPLICATION_NAME,
-                parentAccountNumber: this.payment.parentAccountNumber,
+                parentAccountNumber: this.issConfig.parentAccountNumber, // this.payment.parentAccountNumber,
                 carId: vehicle.carId,
                 lineItems,
                 glassPieces,
@@ -645,9 +736,7 @@ export const useMainStore = defineStore({
                     hasAnsweredPartQuestions: !!order.damage.partQuestionAnswers?.length,
                     hasAnsweredMoldingQuestions: !!order.damage.moldingQuestionAnswers?.length,
                     hasAnsweredCapabilityQuestions: !!order.damage.capabilityQuestionAnswers?.length,
-                    hasManuallySelectedParts:
-                        !!this.applicationUser.pageData['vehicle-parts']?.partsOrQuestions
-                            .length
+                    hasManuallySelectedParts: !!this.applicationUser.pageData['vehicle-parts']?.partsOrQuestions.length
                 },
                 vehicle: {
                     year: vehicle.year,
@@ -871,7 +960,8 @@ export const useMainStore = defineStore({
                             policyFirstName: customer.firstName,
                             policyLastName: customer.lastName,
                             policyPhoneNumber: customer.phoneNumber,
-                            policyEmail: customer.emailAddress
+                            policyEmail: customer.emailAddress,
+                            policyState: customer.address.state
                         },
                         policyNumber: policy.policyNumber,
                         policyZipCode: policy.policyZipCode,
@@ -902,7 +992,8 @@ export const useMainStore = defineStore({
                     payment: {
                         InsuranceCoverage: {
                             isVerified: payment.insuranceCoverage?.isVerified ?? false,
-                            coverageStatus: payment.insuranceCoverage?.coverageStatus
+                            coverageStatus: payment.insuranceCoverage?.coverageStatus,
+                            claimNumber: payment.insuranceCoverage?.claimNumber
                         },
                         isInsurance: payment.isInsurance ?? true,
                         parentAccountNumber: this.issConfig.parentAccountNumber
@@ -934,7 +1025,8 @@ export const useMainStore = defineStore({
                         startTime: schedule.startTime,
                         endTime: schedule.endTime,
                         routeCode: schedule.routeCode,
-                        jobMaxMinutes: schedule.jobMaxMinutes
+                        jobMaxMinutes: schedule.jobMaxMinutes,
+                        jobMinMinutes: schedule.jobMinMinutes
                     },
                     referralDate: this.order.referralDate,
                     referralNumber: this.order.referralNumber?.toString(),
@@ -1127,16 +1219,16 @@ export const useMainStore = defineStore({
             this.order.vehicle.registration.lastName = registrationInfo?.lastName;
         },
         updateServiceLocation(serviceLocationInfo) {
-            state.order.serviceLocation.address = serviceLocationInfo.address;
-            state.order.serviceLocation.address2 = serviceLocationInfo.address2;
-            state.order.serviceLocation.city = serviceLocationInfo.city;
-            state.order.serviceLocation.state = serviceLocationInfo.state;
-            state.order.serviceLocation.zipCode = serviceLocationInfo.zipCode;
-            state.order.serviceLocation.zipCodeCtu = serviceLocationInfo.zipCodeCtu;
-            state.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType;
-            state.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected;
+            this.order.serviceLocation.address = serviceLocationInfo.address;
+            this.order.serviceLocation.address2 = serviceLocationInfo.address2;
+            this.order.serviceLocation.city = serviceLocationInfo.city;
+            this.order.serviceLocation.state = serviceLocationInfo.state;
+            this.order.serviceLocation.zipCode = serviceLocationInfo.zipCode;
+            this.order.serviceLocation.zipCodeCtu = serviceLocationInfo.zipCodeCtu;
+            this.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType;
+            this.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected;
 
-            state.order.serviceLocation.provider = {
+            this.order.serviceLocation.provider = {
                 providerNumber: serviceLocationInfo.provider?.providerNumber,
                 address: {
                     streetAddress: serviceLocationInfo.provider?.address?.streetAddress,
@@ -1251,7 +1343,7 @@ export const useMainStore = defineStore({
             this.order.schedule.endTime = null;
             this.order.schedule.routeCode = null;
             this.order.schedule.jobMaxMinutes = null;
-            // this.order.schedule.jobMinMinutes = null;
+            this.order.schedule.jobMinMinutes = null;
 
             // premium appointment fee used on schedule page also needs reset when schedule is reset
             const { supportingItems } = this.order.lineItems;
@@ -1396,6 +1488,9 @@ export const useMainStore = defineStore({
             this.order.customer.lastName = customerQuestions.lastName;
             this.order.serviceLocation.zipCode = customerQuestions.addressQuestions.zipCode;
         },
+        updatePolicyITACFlag(isITAC) {
+            this.order.policy.isITAC = isITAC;
+        },
         savePartQuestionAnswers(partQuestionAnswersArray) {
         // if part question answers have changed, reset subsequent question answers
             const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(this.order.damage.partQuestionAnswers, 'result');
@@ -1453,6 +1548,10 @@ export const useMainStore = defineStore({
             this.order.lineItems.glassParts = glassParts;
         },
         saveSupportingItems(supportingItems) {
+            // TODO: RESET_SERVICE_LOCATION_STATE_AND_DEPENDENCIES
+            this.order.lineItems.supportingItems = supportingItems;
+        },
+        saveSupportingItemsSuppressingStateResetting(supportingItems) {
             this.order.lineItems.supportingItems = supportingItems;
         },
         saveVaps(vaps) {
@@ -1522,6 +1621,31 @@ export const useMainStore = defineStore({
             }
         },
 
+        // Location API Actions
+        getAlertReasonsByCtu(ctu) {
+            return globalMethods.callHttpClient({
+                method: endpoints.GetAlertReasons.method,
+                endpoint: `${endpoints.GetAlertReasons.url}/${ctu}`,
+                payload: {},
+                logApiCall: true
+            });
+        },
+
+        // Schedule Actions
+        saveSchedule(scheduleInfo) {
+            this.updateSchedule(scheduleInfo);
+        },
+        updateSchedule(scheduleInfo) {
+            if (scheduleInfo) {
+                this.order.schedule.date = scheduleInfo.date;
+                this.order.schedule.startTime = scheduleInfo.startTime;
+                this.order.schedule.endTime = scheduleInfo.endTime;
+                this.order.schedule.routeCode = scheduleInfo.routeCode;
+                this.order.schedule.jobMaxMinutes = scheduleInfo.jobMaxMinutes;
+                this.order.schedule.jobMinMinutes = scheduleInfo.jobMinMinutes;
+            }
+        },
+
         // Analytics Actions
         logExperimentExposure({ userId, sessionKey, pageName, experiment }) {
             return globalMethods.callHttpClient({
@@ -1803,6 +1927,7 @@ export const useMainStore = defineStore({
             this.order.policy.damageCause = null;
             this.order.policy.damageCity = null;
             this.order.policy.damageState = null;
+            this.order.policy.isITAC = null;
             this.order.customer.phoneNumber = null;
             this.order.customer.emailAddress = null;
             this.order.customer.firstName = null;
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 964de2f9..2ad734cc 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -4,6 +4,7 @@ import globalMethods from '@/global-methods.js';
 import { getRandomString, getRandomGuid, getRandomInt, getRandomBoolean } from '@/helpers/data-generation.js';
 import coverageStatuses from '@/constants/coverage-statuses.js';
 import { endpoints } from '@/constants/endpoints';
+import { AppointmentTypeStrings } from '@/constants/schedule-constants';
 
 describe('Store', () => {
     let store;
@@ -396,6 +397,7 @@ describe('Store', () => {
             expect(globalMethods.callHttpClient).toHaveBeenCalled();
             expect(store.payment.insuranceCoverage.isVerified).toBe(true);
             expect(store.payment.insuranceCoverage.coverageStatus).toBe(coverageStatuses.NO_COMP);
+            expect(store.payment.insuranceCoverage.claimNumber).toBe(null);
         });
 
         it('successful response with coverage => isVerified true and coverage status verified', async () => {
@@ -422,11 +424,12 @@ describe('Store', () => {
             expect(globalMethods.callHttpClient).toHaveBeenCalled();
             expect(store.payment.insuranceCoverage.isVerified).toBe(true);
             expect(store.payment.insuranceCoverage.coverageStatus).toBe(coverageStatuses.VERIFIED);
+            expect(store.payment.insuranceCoverage.claimNumber).toBe(response.data.claimNumber);
         });
 
         it('Call to client returns exception, resulting in object with error property being returned', async () => {
             // Arrange
-            expect.assertions(4);
+            expect.assertions(5);
             const error = 'this is the error';
             globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.reject(error));
 
@@ -439,6 +442,7 @@ describe('Store', () => {
             expect(globalMethods.callHttpClient).toHaveBeenCalled();
             expect(store.payment.insuranceCoverage.isVerified).toBe(false);
             expect(store.payment.insuranceCoverage.coverageStatus).toBe(coverageStatuses.PENDING);
+            expect(store.payment.insuranceCoverage.claimNumber).toBe(null);
         });
     });
 
@@ -624,6 +628,7 @@ describe('Store', () => {
                 const customerLastName = getRandomString(6, 6);
                 const customerEmail = getRandomString(6, 6);
                 const customerPhoneNumber = getRandomString(6, 6);
+                const customerState = getRandomString(2, 2);
                 const policyNumber = getRandomString(6, 6);
                 const policyZipCode = getRandomString(6, 6);
                 const policyLookupSuccessful = getRandomString(6, 6);
@@ -636,6 +641,7 @@ describe('Store', () => {
                 store.order.customer.lastName = customerLastName;
                 store.order.customer.emailAddress = customerEmail;
                 store.order.customer.phoneNumber = customerPhoneNumber;
+                state.order.customer.address.state = customerState;
                 store.order.policy.policyNumber = policyNumber;
                 store.order.policy.policyZipCode = policyZipCode;
                 store.order.policy.policyLookupSuccessful = policyLookupSuccessful;
@@ -653,7 +659,8 @@ describe('Store', () => {
                                 policyFirstName: customerFirstName,
                                 policyLastName: customerLastName,
                                 policyPhoneNumber: customerPhoneNumber,
-                                policyEmail: customerEmail
+                                policyEmail: customerEmail,
+                                policyState: customerState
                             }),
                             policyNumber,
                             policyZipCode,
@@ -687,6 +694,7 @@ describe('Store', () => {
                 store.order.customer.address.city = city;
                 store.order.customer.address.state = state;
                 store.order.customer.address.zipCode = zipCode;
+
                 globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({}));
 
                 // Act
@@ -720,6 +728,7 @@ describe('Store', () => {
                 store.order.lineItems.glassParts = glassParts;
                 store.order.lineItems.supportingItems = supportingItems;
                 store.order.lineItems.vaps = vaps;
+
                 globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({}));
 
                 // Act
@@ -776,6 +785,7 @@ describe('Store', () => {
                 const state = getRandomString(6, 6);
                 const zipCode = getRandomString(6, 6);
                 const zipCodeCtu = getRandomString(6, 6);
+
                 store.order.contactInfo.notesForTechnician = notesForTechnician;
                 store.order.serviceLocation.address = address;
                 store.order.serviceLocation.city = city;
@@ -810,11 +820,14 @@ describe('Store', () => {
                 const endTime = getRandomString(6, 6);
                 const routeCode = getRandomString(6, 6);
                 const jobMaxMinutes = getRandomString(6, 6);
+                const jobMinMinutes = getRandomString(6, 6);
                 store.order.schedule.date = date;
                 store.order.schedule.startTime = startTime;
                 store.order.schedule.endTime = endTime;
                 store.order.schedule.routeCode = routeCode;
                 store.order.schedule.jobMaxMinutes = jobMaxMinutes;
+                store.order.schedule.jobMinMinutes = jobMinMinutes;
+
                 globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({}));
 
                 // Act
@@ -828,7 +841,8 @@ describe('Store', () => {
                             startTime,
                             endTime,
                             routeCode,
-                            jobMaxMinutes
+                            jobMaxMinutes,
+                            jobMinMinutes
                         })
                     })
                 }));
@@ -1396,4 +1410,101 @@ describe('Store', () => {
             expect(store.applicationUser.duplicateOrders.length).toBe(0);
         });
     });
+
+    describe('updatePolicyITACFlag method', () => {
+        it('updatePolicyITACFlag updates policy.isITAC flag in store', () => {
+            // Arrange
+            const moqIsITAC = getRandomBoolean();
+
+            // Act
+            store.updatePolicyITACFlag(moqIsITAC);
+
+            // Assert
+            expect(store.order.policy.isITAC).toEqual(moqIsITAC);
+        });
+    });
+
+    describe('isMobileAppointment', () => {
+        it('Should return true for mobile appointments', () => {
+            // Arrange
+
+            // Act
+            store.updateServiceLocation({
+                appointmentType: AppointmentTypeStrings.MOBILE
+            });
+
+            // Assert
+            expect(store.isMobileAppointment).toBe(true);
+        });
+
+        it('Should return true for mobile-insurance appointments', () => {
+            // Arrange
+
+            // Act
+            store.updateServiceLocation({
+                appointmentType: AppointmentTypeStrings.MOBILE_NOT_ITAC
+            });
+
+            // Assert
+            expect(store.isMobileAppointment).toBe(true);
+        });
+
+        it('Should return false for non-mobile appointments', () => {
+            // Arrange
+
+            // Act
+            store.updateServiceLocation({
+                appointmentType: AppointmentTypeStrings.IN_SHOP
+            });
+
+            // Assert
+            expect(store.isMobileAppointment).toBe(false);
+        });
+
+        it('Should return false for null appointments', () => {
+            // Arrange
+
+            // Act
+            store.updateServiceLocation({ appointmentType: null });
+
+            // Assert
+            expect(store.isMobileAppointment).toBe(false);
+        });
+    });
+
+    describe('isDropoffAppointment', () => {
+        it('Should return true for drop-off appointments', () => {
+            // Arrange
+
+            // Act
+            store.updateServiceLocation({
+                appointmentType: AppointmentTypeStrings.DROP_OFF
+            });
+
+            // Assert
+            expect(store.isDropOffAppointment).toBe(true);
+        });
+
+        it('Should return false for non-drop-off appointments', () => {
+            // Arrange
+
+            // Act
+            store.updateServiceLocation({
+                appointmentType: AppointmentTypeStrings.MOBILE
+            });
+
+            // Assert
+            expect(store.isDropOffAppointment).toBe(false);
+        });
+
+        it('Should return false for null appointments', () => {
+            // Arrange
+
+            // Act
+            store.updateServiceLocation({ appointmentType: null });
+
+            // Assert
+            expect(store.isDropOffAppointment).toBe(false);
+        });
+    });
 });
diff --git a/src/styles/ux-variables-svg-strings.scss b/src/styles/ux-variables-svg-strings.scss
new file mode 100644
index 00000000..03a80935
--- /dev/null
+++ b/src/styles/ux-variables-svg-strings.scss
@@ -0,0 +1,3 @@
+$svg-date-picker-nav-back-button: "data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A";
+$svg-date-picker-forward-button: "data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A";
+$svg-drop-off-alert: "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";
\ No newline at end of file