diff --git a/src/assets/img/icons/icon-ablue-next.png b/src/assets/img/icons/icon-ablue-next.png
new file mode 100644
index 00000000..ff8ec863
Binary files /dev/null and b/src/assets/img/icons/icon-ablue-next.png differ
diff --git a/src/assets/img/icons/icon-ablue-previous.png b/src/assets/img/icons/icon-ablue-previous.png
new file mode 100644
index 00000000..ebac34a2
Binary files /dev/null and b/src/assets/img/icons/icon-ablue-previous.png differ
diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index e1d23731..cc4bd3b2 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -58,7 +58,8 @@ const errorMessages = Object.freeze({
     MODEL_REQUIRED: 'Vehicle model is required.',
     STYLE_REQUIRED: 'Vehicle style is required.',
     MOBILE_LOCATION_REQUIRED: 'Please enter your service address',
-    DATE_REQUIRED: 'Please select a date'
+    DATE_REQUIRED: 'Please select a date',
+    TIME_REQUIRED: 'Please select an appointment time.'
 });
 
 export default errorMessages;
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 954451f6..76e87f44 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -2,108 +2,109 @@
     <div
         class="date-picker text-center"
         :class="[calendarViewDirection, { 'has-error': errors.length > 0 }]">
-        <fieldset
-            id="date-picker-fieldset"
-            ref="datePickerFieldset">
+        <fieldset id="date-picker-fieldset">
             <legend class="sr-only">
-                Select a day and time
+                When would you like service?
             </legend>
+            <div class="appointment-date-picker-header">
+                When would you like service?
+            </div>
+            <div class="appointment-estimate-header">
+                Your service will take approximately <span>{{ appointmentEstimate }}</span>
+            </div>
             <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() }}
+                class="appointment-date-picker-container"
+                :class="isMobileView ? 'mobile' : 'desktop'">
+                <div class="header-cell header-start">
+                    <span
+                        v-if="activePageIndex !== 0"
+                        class="span-block-flex"
+                        @click="gotoPreviousPage()">
+                        <img
+                            class="arrow-icon"
+                            src="~@/assets/img/icons/icon-ablue-previous.png"
+                            alt="Left arrow icon" />
+                        Previous
+                    </span>
                 </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 class="header-cell header-middle">
+                    {{ headerDateString }}
                 </div>
-                <div class="separator-line"></div>
-                <div class="nav-back ps-3">
-                    <button></button>
+                <div class="header-cell header-end">
+                    <span
+                        class="span-block-flex"
+                        @click="gotoNextPage()">
+                        More
+                        <img
+                            class="arrow-icon"
+                            src="~@/assets/img/icons/icon-ablue-next.png"
+                            alt="Right arrow icon" />
+                    </span>
                 </div>
-                <div class="nav-forward pe-3">
-                    <button></button>
+                <div class="week-row-container date-picker-row">
+                    <template
+                        v-for="n in daysToAdd"
+                        :key="n">
+                        <div class="day-of-week-header">
+                            <span class="span-block day-of-week-caption">{{ showDayOfWeekForIndex(n - 1) }}</span>
+                            <span class="span-block month-day-caption">{{ showMonthAndDayForIndex(n - 1) }}</span>
+                        </div>
+                    </template>
                 </div>
-                <div class="grid-item caption">
-                    <span class="sr-only">Sunday</span>S
+                <div class="morning-row-container date-picker-row">
+                    <template
+                        v-for="n in daysToAdd"
+                        :key="n">
+                        <div
+                            class="morning-row-cell"
+                            :class="[showMorningAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
+                            , checkIsSelectedDay(n - 1, 'morning') ? 'selected-date' : '']"
+                            @click="showMorningTimes(n - 1)">
+                            <span class="span-block top-caption">Morning</span>
+                            <span class="span-block bottom-caption">
+                                {{ showMorningAvailabilityForIndex(n - 1) }} available
+                            </span>
+                        </div>
+                    </template>
                 </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
-                        :aria-label="getDateLabel(date, month)"
-                        :for="`${month.monthLabel}-${date.dateNum.toString()}`">
-                        <span aria-hidden="true">{{ date.dateNum.toString() }}</span>
-                    </label>
+                <div class="afternoon-row-container date-picker-row">
+                    <template
+                        v-for="n in daysToAdd"
+                        :key="n">
+                        <div
+                            class="afternoon-row-cell"
+                            :class="[showAfternoonAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
+                            , checkIsSelectedDay(n - 1, 'afternoon') ? 'selected-date' : '']"
+                            @click="showAfternoonTimes(n - 1)">
+                            <span class="span-block top-caption">Afternoon</span>
+                            <span class="span-block bottom-caption">
+                                {{ showAfternoonAvailabilityForIndex(n - 1) }} available
+                            </span>
+                        </div>
+                    </template>
                 </div>
             </div>
             <div
-                id="date-of-month-error"
-                class="row form-test-error">
-                <ErrorMessage
-                    :name="customComponentId"
-                    class="small mt-1">
-                </ErrorMessage>
+                v-if="selectedDate"
+                class="appointment-time-picker-container"
+                :class="isMobileView ? 'mobile' : 'desktop'">
+                <div class="appointment-time-picker-header">
+                    Available Times:
+                </div>
+                <div
+                    v-for="timeSlot in selectableTimeSlotsData"
+                    :key="timeSlot.startTime"
+                    class="time-slot-button"
+                    :class="checkIsSelectedTimeSlot(timeSlot) ? 'selected-time-slot' : ''"
+                    @click="selectTimeSlotForDay(timeSlot)">
+                    {{ displayTimeSlotTime(timeSlot.startTime) }}
+                </div>
+            </div>
+            <div class="row form-test-error">
+                <div v-if="showTimeSlotError">
+                    {{ displayErrorMessage }}
+                </div>
             </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>
@@ -111,24 +112,21 @@
 <script>
 // Supporting files
 import { useMainStore } from '@/store';
-import { useField, ErrorMessage } from 'vee-validate';
+import { useField } from 'vee-validate';
 import { deepClone } from '@/helpers/object-helper';
 import {
-    convertDateStringToDate,
-    convertDateToDateString
+    convertDateToDateString,
+    convertDateToShortMonth,
+    convertDateToTwoDigitDay,
+    convertDateToTwoDigitMonth,
+    militaryToTwelveHourTime
 } from '@/helpers/date-helper';
-import {
-    TIMINGFUNC_MAP,
-    BUFFER_OFFSET,
-    MONTHS_OF_YEAR
-} from './mixins/constants';
-import { selectableDaysOptions, requiredParameter } from './mixins/helpers';
+import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
+import errorMessages from '@/constants/error-messages.js';
+import { selectableDaysOptions } from './mixins/helpers';
 
 export default {
     name: 'date-picker',
-    components: {
-        ErrorMessage
-    },
     props: {
         customComponentId: String,
         selectableDatesSetting: {
@@ -152,12 +150,16 @@ export default {
                 return [];
             }
         },
+        showTimeSlotError: {
+            type: Boolean,
+            default: false
+        },
         validationRules: {
             type: String,
             default: ''
         }
     },
-    emits: ['update:modelValue', 'date-clicked'],
+    emits: ['update:modelValue', 'dateSelected', 'timeSlotSelected'],
     setup(props) {
         const uuid = crypto.randomUUID();
         const componentId = !props.customComponentId
@@ -169,6 +171,10 @@ export default {
         const { modelValue } = deepClone(props);
         const initialValue = modelValue;
 
+        console.log('DatePicker setup called with modelValue: ');
+        console.log(modelValue);
+        console.log(props.validationRules);
+
         const fieldOptions = {
             value: modelValue,
             initialValue
@@ -199,209 +205,221 @@ export default {
     data() {
         return {
             isLoading: true,
-            months: null,
-            disableViewMoreDatesButton: false,
             selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
-            hideSomeDaysForInitialView: null
+            selectableTimeSlotsData: [],
+            selectedTimeOfDayGrouping: null,
+            selectedDate: null,
+            selectedTimeSlot: null,
+            activeDate: new Date(),
+            activePageIndex: 0,
+            todaysDate: new Date(),
+            mql: null,
+            daysInViewMobile: 3,
+            daysInViewStandard: 5,
+            daysLoaded: 0,
+            initialDaysToLoad: 15,
+            isMobileView: false
         };
     },
     computed: {
+        appointmentEstimate() {
+            return '1.5 - 2 hours.';
+        },
+        daysToAdd() {
+            return this.isMobileView ? this.daysInViewMobile : this.daysInViewStandard;
+        },
+        displayErrorMessage() {
+            return errorMessages.TIME_REQUIRED;
+        },
+        headerDateString() {
+            const dayOffset = this.activePageIndex * this.daysToAdd;
+            const startDateToShow = new Date(this.activeDate);
+            startDateToShow.setDate(startDateToShow.getDate() + dayOffset);
+            const startMonthDisplay = convertDateToShortMonth(startDateToShow);
+            const endDateToShow = new Date(startDateToShow);
+            endDateToShow.setDate(endDateToShow.getDate() + (this.daysToAdd - 1));
+            const endMonthDisplay = convertDateToShortMonth(endDateToShow);
+
+            if (startMonthDisplay !== endMonthDisplay) {
+                return `${startMonthDisplay}. ${startDateToShow.getDate()} - ${endMonthDisplay}. ${endDateToShow.getDate()}`;
+            }
+            return `${startMonthDisplay}. ${startDateToShow.getDate()}-${endDateToShow.getDate()}`;
+        },
+        shortMonth() {
+            return this.todaysDate.toLocaleString('en-US', { month: 'short' });
+        },
         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');
+        selectedTimeSlot(newValue, oldValue) {
+            if (newValue !== oldValue) {
+                this.$emit('timeSlotSelected', newValue);
             }
+        },
+        selectedDate(newValue, oldValue) {
+            if (newValue !== oldValue) {
+                this.$emit('dateSelected', newValue);
+            }
+        }
+    },
+    mounted() {
+        this.mql = window.matchMedia('(min-width: 1200px)');
+        this.isMobileView = !this.mql.matches;
+        this.mql.addEventListener('change', this.handleMqlChange);
+    },
+    unmounted() {
+        if (this.mql) {
+            this.mql.removeEventListener('change', () => {});
         }
     },
     methods: {
         initializeComponent(initialData) {
             this.setCalendarData(initialData);
         },
-        fireDateSelectedEvent(event) {
-            // Ignore if arrow key selected radioButton
-            if (event.screenX === 0 && event.screenY === 0) {
+        handleMqlChange(e) {
+            this.isMobileView = !e.matches;
+            this.activePageIndex = 0;
+            this.selectedDate = null;
+            this.selectedTimeOfDayGrouping = null;
+            this.selectedTimeSlot = null;
+            this.findFirstAvailableDateInView();
+        },
+        displayTimeSlotTime(militaryTime) {
+            return militaryToTwelveHourTime(militaryTime);
+        },
+        findFirstAvailableDateInView() {
+            for (let i = 0; i < this.daysToAdd; i += 1) {
+                const dateInView = this.getDateToShow(i);
+                const dateInViewString = convertDateToDateString(dateInView);
+                const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === dateInViewString);
+                if (selectableDateObj && selectableDateObj.timeSlots && selectableDateObj.timeSlots.length > 0) {
+                    if (selectableDateObj.morningTimeSlots && selectableDateObj.morningTimeSlots.length > 0) {
+                        this.showMorningTimes(i);
+                    } else {
+                        this.showAfternoonTimes(i);
+                    }
+                    break;
+                }
+            }
+        },
+        getDateToShow(index) {
+            const dayOffset = this.activePageIndex * this.daysToAdd;
+            const dateToShow = new Date(this.activeDate);
+            dateToShow.setDate(dateToShow.getDate() + index + dayOffset);
+            return dateToShow;
+        },
+        getDateToShowString(index) {
+            const dateToShow = this.getDateToShow(index);
+            return convertDateToDateString(dateToShow);
+        },
+        gotoNextPage() {
+            const maxPageIndex = Math.floor((this.daysLoaded - 1) / this.daysToAdd);
+            if (this.activePageIndex >= maxPageIndex) {
+                // do not go to next page right away if at end of loaded days
+                this.loadMoreDays(maxPageIndex, this.daysToAdd, this.initialDaysToLoad).then(() => {
+                    this.daysLoaded += this.initialDaysToLoad;
+                    this.activePageIndex += 1;
+                    this.selectedDate = null;
+                    this.selectedTimeSlot = null;
+                    this.findFirstAvailableDateInView();
+                });
                 return;
             }
-            this.$emit('date-clicked');
+            this.activePageIndex += 1;
+            this.selectedDate = null;
+            this.selectedTimeSlot = null;
+            this.findFirstAvailableDateInView();
         },
-        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);
+        gotoPreviousPage() {
+            this.activePageIndex -= 1;
+            this.selectedDate = null;
+            this.selectedTimeSlot = null;
+            this.findFirstAvailableDateInView();
         },
-        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);
+        checkIsSelectedDay(index, timeOfDayGrouping) {
+            const dateToShowString = this.getDateToShowString(index);
+            return this.selectedDate === dateToShowString && this.selectedTimeOfDayGrouping === timeOfDayGrouping;
         },
-        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;
-                            }
-                        });
-                    }
-                }
+        checkIsSelectedTimeSlot(timeSlot) {
+            if (!this.selectedTimeSlot) {
+                return false;
+            }
+            return this.selectedTimeSlot.startTime === timeSlot.startTime;
+        },
+        selectTimeSlotForDay(timeSlot) {
+            if (timeSlot) {
+                this.selectedTimeSlot = timeSlot;
+            }
+        },
+        showDayOfWeekForIndex(index) {
+            const dateToShow = this.getDateToShow(index);
+            return dateToShow.toLocaleDateString('en-US', { weekday: 'short' });
+        },
+        showMonthAndDayForIndex(index) {
+            const dateToShow = this.getDateToShow(index);
+            return `${convertDateToTwoDigitMonth(dateToShow)}/${convertDateToTwoDigitDay(dateToShow)}`;
+        },
+        showMorningAvailabilityForIndex(index) {
+            const morningDateString = this.getDateToShowString(index);
+            const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === morningDateString);
+            if (selectableDateObj && selectableDateObj.morningTimeSlots && selectableDateObj.morningTimeSlots.length > 0) {
+                return selectableDateObj.morningTimeSlots.length;
+            }
+            return 0;
+        },
+        showMorningTimes(index) {
+            const morningDateString = this.getDateToShowString(index);
+            const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === morningDateString);
+            if (selectableDateObj && selectableDateObj.morningTimeSlots && selectableDateObj.morningTimeSlots.length > 0) {
+                if (this.selectedDate === morningDateString && this.selectedTimeOfDayGrouping === 'morning') {
+                    // already selected, do nothing
+                    return;
+                }
+                this.selectedDate = morningDateString;
+                this.selectedTimeOfDayGrouping = 'morning';
+                this.selectableTimeSlotsData = selectableDateObj.morningTimeSlots;
+                this.selectedTimeSlot = null;
+            }
+        },
+        showAfternoonAvailabilityForIndex(index) {
+            const afternoonDateString = this.getDateToShowString(index);
+            const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === afternoonDateString);
+            if (selectableDateObj && selectableDateObj.afternoonTimeSlots && selectableDateObj.afternoonTimeSlots.length > 0) {
+                return selectableDateObj.afternoonTimeSlots.length;
+            }
+            return 0;
+        },
+        showAfternoonTimes(index) {
+            const afternoonDateString = this.getDateToShowString(index);
+            const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === afternoonDateString);
+            if (selectableDateObj && selectableDateObj.afternoonTimeSlots && selectableDateObj.afternoonTimeSlots.length > 0) {
+                if (this.selectedDate === afternoonDateString
+                    && this.selectedTimeOfDayGrouping === 'afternoon') {
+                    // already selected, do nothing
+                    return;
+                }
+                this.selectedDate = afternoonDateString;
+                this.selectedTimeOfDayGrouping = 'afternoon';
+                this.selectableTimeSlotsData = selectableDateObj.afternoonTimeSlots;
+                this.selectedTimeSlot = null;
             }
-            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;
+            const calendarViewDirection = 'future';
+            const initialDays = 15;
 
             if (this.todayString) {
                 todayDateString = this.todayString;
@@ -410,47 +428,13 @@ export default {
             } 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;
+            const initialEndDate = new Date();
+            initialEndDate.setDate(initialEndDate.getDate() + (initialDays - 1));
+            const initialViewEndDate = convertDateToDateString(initialEndDate);
 
-            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 loadInitialDataPromise = new Promise((resolve) => {
                 const response = config.customSelectableDatesCallback(
                     initialViewStartDate,
                     initialViewEndDate,
@@ -467,317 +451,84 @@ export default {
                     initialViewEndDate,
                     calendarViewDirection,
                     initialShopTimeSlotsResponse: response,
-                    hideSomeDaysForInitialView,
-                    hideSecondMonth,
-                    preSelectedDate: config.preSelectedDate
+                    preSelectedDate: config.preSelectedDate,
+                    initialDaysLoaded: initialDays
                 };
+
                 return initialData;
             });
         },
         async setCalendarData(config = {}) {
-            this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
-            const { hideSecondMonth } = config;
-            const direction = config.calendarViewDirection;
-            const monthsAfterToLoadOffset = 6;
-            const monthsBeforeToLoadOffset = 36;
+            console.log('DatePicker: setCalendarData called:');
+            console.log(config);
             config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
-                this.selectableDatesData.push(selectableDate);
+                const dateObjectToPush = {
+                    date: selectableDate.date,
+                    timeSlots: selectableDate.timeSlots,
+                    morningTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
+                        const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
+                        return timeHour < 12;
+                    }),
+                    afternoonTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
+                        const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
+                        return timeHour >= 12;
+                    }),
+                    isSelected: false
+                };
+                this.selectableDatesData.push(dateObjectToPush);
             });
 
-            // 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.daysLoaded = config.initialDaysLoaded || this.initialDaysToLoad;
+
+            this.findFirstAvailableDateInView();
             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)
+        async loadMoreDays(maxPageIndex, daysInView, daysToFetch) {
+            showIssLoadingModal(true);
 
-                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 startDateForFetch = new Date(this.activeDate);
+            startDateForFetch.setDate(startDateForFetch.getDate() + (maxPageIndex + 1) * daysInView);
+            const startDateToFetchString = convertDateToDateString(startDateForFetch);
+            const endDateForFetch = new Date(startDateForFetch);
+            endDateForFetch.setDate(endDateForFetch.getDate() + (daysToFetch - 1));
+            const endDateToFetchString = convertDateToDateString(endDateForFetch);
+            // make new API call with this month's start and end dates
+            await this.updateSelectableDates(
+                startDateToFetchString,
+                endDateToFetchString
             );
-            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;
+            showIssLoadingModal(false);
         },
-        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) {
+        async updateSelectableDates(dateStart, dateEnd) {
             const moreSelectableDates =
                 await this.customSelectableDatesCallback(
-                    monthStart,
-                    monthEnd,
+                    dateStart,
+                    dateEnd,
                     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('.fade-on-route-transition');
-            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);
+                if (index === -1) {
+                    const dateObjectToPush = {
+                        date: selectableDate.date,
+                        timeSlots: selectableDate.timeSlots,
+                        morningTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
+                            const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
+                            return timeHour < 12;
+                        }),
+                        afternoonTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
+                            const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
+                            return timeHour >= 12;
+                        }),
+                        isSelected: false
+                    };
+
+                    this.selectableDatesData.push(dateObjectToPush);
                 }
-            };
-            window.requestAnimationFrame(step);
-        },
-        getDateLabel(date, month) {
-            const dateStr = `${month.yearNum?.toString()}-${month.monthIndex?.toString()}-${date.dateNum.toString()}`;
-            const dateObj = convertDateStringToDate(dateStr);
-            const labelOptions = {
-                weekday: 'long',
-                month: 'long',
-                day: 'numeric',
-                year: 'numeric'
-            };
-            let label = dateObj.toLocaleDateString('en-US', labelOptions);
-            date.isSelectable ? label += ', available' : label += ', unavailable';
-            return label;
+            });
         }
     }
 };
@@ -792,9 +543,176 @@ export default {
 }
 .date-picker {
     position: relative;
-    flex-grow: 0;
-    display: flex;
-    flex-direction: column;
+
+    .appointment-date-picker-header {
+        font-weight: 600;
+        color: #000;
+        font-size: 1rem;
+        text-align: left;
+        margin-top: 1.25rem;
+    }
+
+    .appointment-estimate-header {
+        font-weight: 400;
+        color: #525656;
+        font-size: 1rem;
+        text-align: left;
+        margin-top: 0.25rem;
+
+        span {
+            font-weight: 600;
+            color:#000;
+        }
+    }
+
+    .appointment-date-picker-container {
+        display: grid;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px;
+
+        margin-top: 1.25rem;
+        border-radius: .3125rem;
+        box-shadow: 0 0 .625rem 0 rgba(0, 0, 0, 0.2);
+
+        @include media-breakpoint-up(xs) {
+            grid-template-columns: repeat(3, 33.33%);
+        }
+        @include media-breakpoint-up(xl) {
+            grid-template-columns: repeat(5, 20%);
+        }
+        .date-picker-row {
+            display: contents;
+        }
+        .header-cell {
+            font-size: 1rem;
+            padding: .3125rem;
+
+            .span-block-flex {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+        .header-end {
+            text-align: end;
+
+            .span-block-flex {
+                justify-content: flex-end;
+
+                img {
+                    margin-left: 0.25rem;
+                }
+            }
+        }
+        .header-middle {
+            font-weight: 600;
+            @include media-breakpoint-up(xs) {
+                grid-column: 2 / span 1;
+            }
+            @include media-breakpoint-up(xl) {
+                grid-column: 2 / span 3;
+            }
+
+            text-align: center;
+        }
+        .header-start {
+            text-align: start;
+
+            .span-block-flex {
+                justify-content: flex-start;
+
+                img {
+                    margin-right: 0.25rem;
+                }
+            }
+        }
+        .day-of-week-header {
+            background-color: #0070d1;
+            color: $white;
+            padding: 0.5rem 0.25rem;
+            line-height: 1.5rem;
+
+            .day-of-week-caption {
+                font-weight: 600;
+                font-size: 1rem;
+            }
+            .month-day-caption {
+                font-weight: 300;
+                font-size: 0.8125rem;
+            }
+        }
+        .morning-row-cell, .afternoon-row-cell {
+            padding: 0.8125rem 0.25rem;
+            line-height: 1.5rem;
+            border: solid 1px #cacbcc;
+
+            .top-caption {
+                font-weight: 400;
+                font-size: 1rem;
+                color: #000;
+            }
+            .bottom-caption {
+                font-weight: 400;
+                font-size: 0.75rem;
+            }
+
+            &.has-appointments {
+                &:hover {
+                    border: solid 1px #0070d1;
+                    cursor: pointer;
+                }
+
+                .bottom-caption {
+                    color: #1574a1;
+                    font-weight: 500;
+                }
+            }
+
+            &.selected-date {
+                background-color: #e7f1f6;
+                border: solid 1px #0070d1;
+            }
+
+        }
+        .span-block {
+            display: block;
+        }
+    }
+
+    .appointment-time-picker-container {
+        margin-top: 1rem;
+        margin-bottom: 0.5rem;
+
+        .appointment-time-picker-header {
+            font-weight: 600;
+            color: #000;
+            font-size: 1rem;
+            text-align: left;
+        }
+
+        .time-slot-button {
+            width: 100%;
+            border: 1px solid #b3b4b5;
+            border-radius: 1.375rem;
+            box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
+            color: #525656;
+            padding: 0.5rem 0;
+            margin-top: 0.625rem;
+            text-align: center;
+            cursor: pointer;
+
+            &.selected-time-slot {
+                background-color: #e7f1f6;
+                border: solid 1px #0070d1;
+                color:#000;
+                font-weight: 500;
+            }
+        }
+    }
 
     fieldset {
         flex-grow: 1;
@@ -1115,8 +1033,10 @@ export default {
 }
 
 .form-test-error {
-    margin: 0 auto;
-    max-width: 414px;
     text-align: left;
+    margin-top: 0;
+    color: #db0020;
+    font-weight: 400;
+    font-size: 1rem;
 }
 </style>
diff --git a/src/helpers/date-helper.js b/src/helpers/date-helper.js
index c1ef3093..bedf9ca2 100644
--- a/src/helpers/date-helper.js
+++ b/src/helpers/date-helper.js
@@ -17,6 +17,21 @@ export function convertDateToDateString(date) {
     );
 }
 
+export function convertDateToTwoDigitDay(date) {
+    if (date instanceof Date !== true) return null;
+    return (`0${date.getDate()}`).slice(-2);
+}
+
+export function convertDateToTwoDigitMonth(date) {
+    if (date instanceof Date !== true) return null;
+    return (`0${date.getMonth() + 1}`).slice(-2);
+}
+
+export function convertDateToShortMonth(date) {
+    if (date instanceof Date !== true) return null;
+    return date.toLocaleString('en-US', { month: 'short' });
+}
+
 export function convertDateStringToDate(dateString) {
     // dateString must be YYYY-MM-DD format
     if (typeof dateString !== 'string') return null;
@@ -163,9 +178,11 @@ export function combineDateAndTime(date, time) {
     // Return the new date object
     return newDate;
 }
+
 export function addMinutes(date, minutes) {
     return new Date(date.getTime() + minutes * 60000);
 }
+
 export function shortTimeString(date) {
     // Use a ternary operator to check if the input is a valid date object
     return date instanceof Date
diff --git a/src/layouts/schedule-page/schedule-page.spec.js b/src/layouts/schedule-page/schedule-page.spec.js
index ad18458e..280a0547 100644
--- a/src/layouts/schedule-page/schedule-page.spec.js
+++ b/src/layouts/schedule-page/schedule-page.spec.js
@@ -290,27 +290,6 @@ describe('schedule-page.vue', () => {
             // Assert
             expect(testValue).toStrictEqual('01234');
         });
-        test('getDisplayTextForMilitaryTime should return the correctly formatted string', () => {
-            // Arrange
-            const { wrapper } = getShallowMountedComponent();
-            wrapper.vm.selectableDatesData = {
-                days: []
-            };
-            const timeInput1 = '15:00';
-            const timeInput2 = '15:30';
-
-            // Act
-            const testOutput1 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1);
-            const testOutput2 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2);
-            const testOutput3 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1, true);
-            const testOutput4 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2, true);
-
-            // Assert
-            expect(testOutput1).toBe('3:00 PM');
-            expect(testOutput2).toBe('3:30 PM');
-            expect(testOutput3).toBe('3 PM');
-            expect(testOutput4).toBe('3:30 PM');
-        });
     });
     test('forwardButtonAction should call route method navigateWithoutSaving', async () => {
         // Arrange
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index 38a5b1b1..5505cdcf 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -1,7 +1,6 @@
 <template>
     <Form
         ref="theForm"
-        v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
         <div class="fade-on-route-transition">
@@ -16,56 +15,27 @@
                         cmsWidgetName="ScheduleSubHeaderWidget"
                         secondaryTextClasses="text-center small sub-text"
                         class="mt-4" />
-                    <template v-if="ChangeShopLink.length">
-                        <textBlock
-                            cmsWidgetName="ChangeShopLink"
-                            justifyText="center"
-                            class="mb-5 text-link-small change-shop-link"
-                            :marginTopSizeOverride="1" />
-                    </template>
                     <div class="main-content-container">
                         <locationAlerts
                             ref="locationAlerts"
                             cmsWidgetPrefix="LocationAlert-" />
                         <datePicker
                             ref="datePicker"
-                            v-model="selectedDate"
+                            v-model="selectedTimeSlotInfo"
                             customComponentId="dateQuestion"
                             selectableDatesSetting="custom"
                             class="text-link-small"
+                            :showTimeSlotError="showDatePickerError"
                             :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"
-                            @timeSlotSelected="forwardButtonAction" />
+                            @dateSelected="dateSelectedFromPicker"
+                            @timeSlotSelected="timeSlotSelectedFromPicker" />
                         <siteFooter
                             ref="navbar"
                             class="mt-5"
                             cmsWidgetName="SiteFooterWidget"
-                            :isForwardActionDisabled="!meta.valid"
+                            :isForwardButtonNavigationDisabled="!isFormValid"
                             @backClicked="navigateBack"
                             @forwardClicked="forwardButtonAction" />
                     </div>
@@ -80,9 +50,7 @@ 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 {
@@ -97,25 +65,13 @@ import {
 } from '@/helpers/cms-content-helper';
 import {
     calcDaysBetweenDates,
-    convertDateStringToDate,
     sumDateString
 } from '@/helpers/date-helper';
 import settleAllPromises from '@/helpers/layout-helper';
-import { Form, defineRule } from 'vee-validate';
+import { Form } 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)
 
@@ -132,8 +88,6 @@ const getAvailableDates = async (
     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;
 
@@ -232,9 +186,7 @@ export default {
         siteSubHeader,
         locationAlerts,
         datePicker,
-        timeSlotModalQuestion,
         siteFooter,
-        textBlock,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -300,7 +252,6 @@ export default {
                 resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
                 resultMap.premiumFeeWithPrice
             );
-            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
         });
     },
     setup() {
@@ -312,6 +263,7 @@ export default {
             selectedDate: this.getSelectedDate(),
             selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
             selectableDatesData: [],
+            showDatePickerError: false,
             mobilePremiumAppointmentFee: null
         };
     },
@@ -325,38 +277,16 @@ export default {
         appointmentType() {
             return useMainStore().order.serviceLocation.appointmentType;
         },
-        timeSlotsForSelectedDate() {
-            if (!this.selectedDate) {
-                return null;
-            }
-
-            return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
+        isFormValid() {
+            console.log('isFormValid called');
+            console.log(this.selectedTimeSlotInfo);
+            const hasTimeSlotSelected = this.selectedTimeSlotInfo?.id != null;
+            return hasTimeSlotSelected;
         },
         supportingItems() {
             return useMainStore().lineItems.supportingItems;
         }
     },
-    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() {
@@ -400,8 +330,8 @@ export default {
         getServiceZipCtuCodeFromStore() {
             return this.mainStore.order.serviceLocation.zipCodeCtu;
         },
-        openInshopTimeSlotsModal() {
-            this.$refs.timeSlotModalQuestion.openModal();
+        dateTimeSelected() {
+            console.log('dateTimeSelected called');
         },
         getSelectedDate() {
             return this.mainStore.order.schedule.date;
@@ -420,62 +350,24 @@ export default {
 
             return selectedTimeSlotInfo;
         },
-        timeSlotModalClosed() {
-            // Clear the selectedDate if no timeSlot has been selected
-            if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
-                this.selectedDate = null;
-            }
+        dateSelectedFromPicker(date) {
+            console.log('schedule-page: dateSelectedFromPicker called');
+            console.log(date);
+            this.selectedDate = date;
+            this.showDatePickerError = false;
         },
-        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}`;
+        timeSlotSelectedFromPicker(timeSlot) {
+            console.log('schedule-page: timeSlotSelectedFromPicker called');
+            console.log(timeSlot);
+            this.selectedTimeSlotInfo = timeSlot;
+            this.showDatePickerError = false;
         },
         forwardButtonAction() {
+            console.log('forwardButtonAction called');
+            if (!this.isFormValid) {
+                this.showDatePickerError = true;
+                return;
+            }
             this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
 
             this.$router.navigate(
diff --git a/src/router/index.js b/src/router/index.js
index c0cb576b..e353b125 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -136,6 +136,7 @@ const router = createRouter({
 router.beforeEach(async (to, from) => {
     const fromQueryPage = from.query?.issPage;
     if (fromQueryPage === undefined) {
+        console.log('router.beforeEach: showing loading modal');
         showIssLoadingModal(true);
     }
 
@@ -288,6 +289,7 @@ function navigate(
     }
 
     if (forceSpinner) {
+        console.log('navigate: showing loading modal');
         showIssLoadingModal(true);
     }