diff --git a/src/assets/img/icons/calendar-icon-black.svg b/src/assets/img/icons/calendar-icon-black.svg
new file mode 100644
index 000000000..9c66862ac
--- /dev/null
+++ b/src/assets/img/icons/calendar-icon-black.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.65567 6.44287H13.35" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.4256 2V3.97449" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.57864 2V3.97449" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5427 2.94792H5.4625C3.70011 2.94792 2.60001 3.92933 2.60001 5.73323V11.1637C2.60001 12.9962 3.70011 14.0003 5.4625 14.0003H10.5375C12.3051 14.0003 13.4001 13.0137 13.4001 11.2091V5.73323C13.4052 3.92933 12.3103 2.94792 10.5427 2.94792Z" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/icons/calendar-icon-grey.svg b/src/assets/img/icons/calendar-icon-grey.svg
new file mode 100644
index 000000000..5a67d0eae
--- /dev/null
+++ b/src/assets/img/icons/calendar-icon-grey.svg
@@ -0,0 +1,6 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.15567 6.44287H13.85" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.9256 2V3.97449" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.07864 2V3.97449" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0427 2.94791H5.9625C4.20011 2.94791 3.10001 3.92931 3.10001 5.73321V11.1637C3.10001 12.9962 4.20011 14.0003 5.9625 14.0003H11.0375C12.8051 14.0003 13.9001 13.0137 13.9001 11.2091V5.73321C13.9052 3.92931 12.8103 2.94791 11.0427 2.94791Z" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/icons/info-circle.svg b/src/assets/img/icons/info-circle.svg
new file mode 100644
index 000000000..7f176afd2
--- /dev/null
+++ b/src/assets/img/icons/info-circle.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12C3 16.9699 7.02908 21 12 21C16.9709 21 21 16.9699 21 12C21 7.02908 16.9709 3 12 3C7.02908 3 3 7.02908 3 12Z" stroke="#0070D1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.0057 15.6932V11.3936M12 8.35426V8.29102" stroke="#0070D1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/icons/payment-icon-green.svg b/src/assets/img/icons/payment-icon-green.svg
new file mode 100644
index 000000000..931226bee
--- /dev/null
+++ b/src/assets/img/icons/payment-icon-green.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 13.8143H13.5894" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.20013 2.88802L3.08796 7.00022C2.09364 7.99456 2.17407 9.32289 3.17099 10.3198L5.86013 13.0096C6.85706 14.0065 8.18213 14.0896 9.18039 13.092L13.2919 8.98042C14.2901 7.98222 14.2065 6.6571 13.2095 5.66018L10.5197 2.97039C9.52286 1.97348 8.19773 1.89046 7.20013 2.88802Z" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.6315 10.782L10.9809 3.4326" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.51559 11.2542L8.72786 10.042" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/icons/payment-icon-grey.svg b/src/assets/img/icons/payment-icon-grey.svg
new file mode 100644
index 000000000..bef98d2de
--- /dev/null
+++ b/src/assets/img/icons/payment-icon-grey.svg
@@ -0,0 +1,6 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 13.8143H14.0894" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70014 2.88802L3.58797 7.00022C2.59365 7.99456 2.67408 9.32289 3.671 10.3198L6.36014 13.0096C7.35707 14.0065 8.68214 14.0896 9.68041 13.092L13.7919 8.98042C14.7901 7.98222 14.7065 6.6571 13.7095 5.66018L11.0197 2.97039C10.0229 1.97348 8.69774 1.89046 7.70014 2.88802Z" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.13152 10.782L11.4809 3.43262" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.01558 11.2543L9.22785 10.042" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
new file mode 100644
index 000000000..98ae07992
--- /dev/null
+++ b/src/constants/progress-bar-mapper.js
@@ -0,0 +1,26 @@
+const pagePercentageMapper = {
+    vehicle: 4,
+    "vehicle-damage": 16,
+    estimate: 28,
+    "service-zip": 32,
+    "vin-lookup": 32,
+    "license-plate-lookup": 32,
+    "address-lookup": 32,
+    "address-vehicles": 36,
+    "part-questions": 40,
+    "molding-questions": 40,
+    "vehicle-parts": 40,
+    "capability-questions": 40,
+    quote: 48,
+    "insurance-company": 52,
+    "service-location": 60,
+    schedule: 72,
+    "customer-details": 84,
+    "payment-method": 92,
+    payment: 96,
+    confirmation: 100,
+};
+
+export const getProgressBarPercentage = (page) => {
+    return pagePercentageMapper[page] || 0;
+};
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 71c09bbbf..0d0ef066d 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="date-picker text-center" :class="calendarViewDirection">
+    <div
+        class="date-picker text-center"
+        :class="`${calendarViewDirection} ${isPricingByDayClass} ${showPricingByDayClass}`">
         <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
             <legend class="sr-only">Select a day and time</legend>
             <div
@@ -60,18 +62,24 @@
                         date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
                         date.dayClasses,
                         date.isSelectable ? 'selectable-day' : '',
+                        date.isPricingByDayUpchargeDay ? 'upch-day' : '',
                     ]">
                     <input
                         :disabled="!date.isSelectable"
                         type="radio"
                         name="day-of-month"
                         v-model="selectedDate"
-                        @click="fireDateSelectedEvent"
-                        @keypress.enter="fireDateSelectedEvent"
+                        @click="fireDateSelectedEvent($event, date)"
+                        @keypress.enter="fireDateSelectedEvent($event, date)"
                         :value="date.inputValue"
                         :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
                     <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
                         <span>{{ date.dateNum.toString() }}</span>
+                        <span
+                            v-if="isPricingByDayExperiment && showPricingByDay && date.isSelectable"
+                            class="price">
+                            {{ date.priceString }}
+                        </span>
                     </label>
                 </div>
             </div>
@@ -99,8 +107,17 @@
 // Supporting files
 import loader from "@/ux-components/loader/loader";
 import store from "@/store";
-import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
-import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
+import {
+    TIMINGFUNC_MAP,
+    BUFFER_OFFSET,
+    MONTHS_OF_YEAR,
+    DAYS_OF_WEEK,
+} from "@/digital-components/date-picker/mixins/constants";
+import {
+    selectableDaysOptions,
+    requiredParameter,
+    forceTwoDigitString,
+} from "@/digital-components/date-picker/mixins/helpers";
 import {
     convertDateToDateString,
     convertDateStringToDate,
@@ -148,6 +165,10 @@ export default {
             type: String,
             default: "",
         },
+        showPricingByDay: Boolean,
+        pricingByDayBasePrice: Number,
+        pricingByDayUpcharge: Number,
+        isPricingByDayExperiment: Boolean,
     },
     setup(props) {
         const uuid = uuidv4();
@@ -199,6 +220,12 @@ export default {
             if (this.selectableDatesSetting === "custom") return "future";
             return "past";
         },
+        isPricingByDayClass() {
+            return this.isPricingByDayExperiment ? "pricing-by-day" : "";
+        },
+        showPricingByDayClass() {
+            return this.showPricingByDay ? "show-pricing-by-day" : "";
+        },
         selectedDate: {
             get() {
                 return this.modelValue;
@@ -212,12 +239,12 @@ export default {
         initializeComponent(initialData) {
             this.setCalendarData(initialData);
         },
-        fireDateSelectedEvent(event) {
+        fireDateSelectedEvent(event, date) {
             // Ignore if arrow key selected radioButton
             if (event.screenX === 0 && event.screenY === 0) {
                 return;
             }
-            this.$emit("date-clicked");
+            this.$emit("date-clicked", date);
         },
         getWeekStartDate(dateString) {
             const date = convertDateStringToDate(dateString);
@@ -440,6 +467,8 @@ export default {
                 initialViewEndDate: config.initialViewEndDate,
                 hideSecondMonth: hideSecondMonth,
                 preSelectedDate: config.preSelectedDate,
+                pricingByDayBasePrice: config.pricingByDayBasePrice,
+                pricingByDayUpcharge: config.pricingByDayUpcharge,
             };
             if (direction === "future") {
                 // first 0, then 1
@@ -573,6 +602,17 @@ export default {
                     ("0" + monthNum).slice(-2) +
                     "-" +
                     ("0" + i).slice(-2);
+                const dayIndex = convertDateStringToDate(dateString).getDay();
+                const dayObject = DAYS_OF_WEEK[dayIndex];
+                const isSelectable =
+                    this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
+                        ? true
+                        : false;
+                const isPricingByDayUpchargeDay = dayObject.isPricingByDayUpchargeDay;
+                const displayPrice = isPricingByDayUpchargeDay
+                    ? options.pricingByDayBasePrice + options.pricingByDayUpcharge
+                    : options.pricingByDayBasePrice;
+                const priceString = "$" + displayPrice;
 
                 if (offset === 0 && i === this.todayDateNum) {
                     dayClasses += " current-day";
@@ -583,8 +623,8 @@ export default {
                 if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
                     dayClasses += " unavailable-day";
                 }
-                if (convertDateStringToDate(dateString).getDay() === 0) {
-                    dayClasses += " sunday";
+                if (dayIndex === 0) {
+                    dayClasses += " " + dayObject.cssClass;
                 }
                 if (
                     this.hideSomeDaysForInitialView &&
@@ -598,10 +638,9 @@ export default {
                     dateNum: i,
                     dayClasses: dayClasses,
                     inputValue: dateString,
-                    isSelectable:
-                        this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
-                            ? true
-                            : false,
+                    priceString: priceString,
+                    isSelectable: isSelectable,
+                    isPricingByDayUpchargeDay: isPricingByDayUpchargeDay,
                 };
                 dates.push(dateObject);
             }
@@ -897,7 +936,6 @@ export default {
                     }
                 }
 
-                &:hover,
                 &:checked {
                     @include media-breakpoint-up(sm) {
                         box-shadow: 0 0 0 4px transparent;
@@ -924,9 +962,7 @@ export default {
 
             &.selectable-day {
                 label {
-                    color: $blue;
                     background-color: $blue-100;
-                    border: 1px solid $blue;
                     min-width: 2.5rem;
                     width: 2.5rem;
                     border-radius: 50%;
@@ -934,12 +970,11 @@ export default {
             }
             &.unavailable-day {
                 label {
-                    color: $gray-500;
-                    background-color: $gray-100;
                     border: none;
                     pointer-events: none;
                 }
             }
+            //NEEDED?
             &.unavailable-day:not(&.sunday) {
                 label {
                     &::before {
@@ -949,7 +984,6 @@ export default {
                         left: -1rem;
                         width: 1rem;
                         height: 2.5rem;
-                        background: $gray-100;
                     }
                 }
             }
@@ -1056,7 +1090,107 @@ export default {
             }
         }
     }
+    // pricing by day override styles
+    &.pricing-by-day {
+        .calendar-grid-container .grid-item {
+            margin: 0 0 0.15rem 0;
+        }
+        .month-year {
+            grid-area: 1 / 1 / 2 / 8;
+        }
+        .legend {
+            display: none;
+        }
+        .radio-wrapper {
+            align-items: flex-start;
+            width: 100%;
+            height: 2.5rem;
+            color: $black;
+
+            input[type="radio"] {
+                &:focus-visible + label {
+                    box-shadow: none;
+                }
+
+                &:focus + label,
+                &:checked:focus + label {
+                    box-shadow: none;
+                    background-color: $white;
+                    color: $black;
+                }
+                &:checked + label {
+                    background: $blue-100;
+                    border: 2px solid $blue;
+                    border-radius: 0.25rem;
+                    color: $black;
+                    span {
+                        font-family: AvertaSemibold;
+                        font-weight: 400;
+                    }
+                }
+            }
+            label {
+                flex-direction: column;
+                height: 2.5rem;
+                width: 100%;
+                font-size: 0.75rem;
+                line-height: 1.2;
+                justify-content: center;
+                padding: 0.25rem;
+            }
+            &.selectable-day {
+                label {
+                    color: $black;
+                    background-color: $blue-100;
+                    min-width: 2.5rem;
+                    width: 2.5rem;
+                    border-radius: 0.25rem;
+                }
+            }
+            &.current-day {
+                label:after {
+                    margin-top: 0.2rem;
+                    position: relative;
+                    top: 0;
+                }
+            }
+        }
+        &.show-pricing-by-day {
+            .radio-wrapper {
+                &.selectable-day label span {
+                    text-decoration: none;
+                    color: $black;
+                    font-weight: 400;
+                    font-family: "AvertaSemibold";
+
+                    &.price {
+                        font-family: "AvertaRegular";
+                        font-weight: 400;
+                    }
+                }
+                &.upch-day label span.price {
+                    color: $gray-600;
+                    font-weight: 400;
+                    font-family: $font-family-sans-serif;
+                }
+                input[type="radio"] {
+                    &:focus + label,
+                    &:checked:focus + label {
+                        color: $gray-600;
+                    }
+                    &:checked + label {
+                        color: $blue;
+                        span {
+                            font-weight: 400;
+                            font-family: "AvertaSemibold";
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
+
 .btn-link {
     display: block;
     position: relative;
diff --git a/src/experiment-components/date-picker-for-pricing-by-day.vue b/src/experiment-components/date-picker-for-pricing-by-day.vue
deleted file mode 100644
index cad976cf7..000000000
--- a/src/experiment-components/date-picker-for-pricing-by-day.vue
+++ /dev/null
@@ -1,1221 +0,0 @@
-<template>
-    <div
-        class="date-picker text-center"
-        :class="`${calendarViewDirection} ${isPricingByDayClass} ${showPricingByDayClass}`">
-        <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
-            <legend class="sr-only">Select a day and time</legend>
-            <div
-                v-for="month in months"
-                :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
-                :id="`${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"
-                    :key="date.inputValue"
-                    :id="date.inputValue"
-                    class="grid-item radio-wrapper"
-                    :class="[
-                        date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
-                        date.dayClasses,
-                        date.isSelectable ? 'selectable-day' : '',
-                        date.isPricingByDayUpchargeDay ? 'upch-day' : '',
-                    ]">
-                    <input
-                        :disabled="!date.isSelectable"
-                        type="radio"
-                        name="day-of-month"
-                        v-model="selectedDate"
-                        @click="fireDateSelectedEvent($event, date)"
-                        @keypress.enter="fireDateSelectedEvent($event, date)"
-                        :value="date.inputValue"
-                        :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
-                    <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
-                        <span>{{ date.dateNum.toString() }}</span>
-                        <span
-                            v-if="isPricingByDayExperiment && showPricingByDay && date.isSelectable"
-                            class="price">
-                            {{ date.priceString }}
-                        </span>
-                    </label>
-                </div>
-            </div>
-            <loader
-                :class="[!isLoading ? 'date-picker-hidden' : '']"
-                loaderColor="blue"
-                loaderPosition="center" />
-            <div class="row form-test-error" id="date-of-month-error">
-                <ErrorMessage :name="customComponentId" class="small mt-1"></ErrorMessage>
-            </div>
-            <button
-                v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
-                type="button"
-                class="btn btn-link"
-                id="viewMoreDates"
-                :disabled="isLoading"
-                @click="showAnotherMonth">
-                View more dates
-            </button>
-        </fieldset>
-    </div>
-</template>
-
-<script>
-// Supporting files
-import loader from "@/ux-components/loader/loader";
-import store from "@/store";
-import {
-    TIMINGFUNC_MAP,
-    BUFFER_OFFSET,
-    MONTHS_OF_YEAR,
-    DAYS_OF_WEEK,
-} from "@/digital-components/date-picker/mixins/constants";
-import {
-    selectableDaysOptions,
-    requiredParameter,
-    forceTwoDigitString,
-} from "@/digital-components/date-picker/mixins/helpers";
-import {
-    convertDateToDateString,
-    convertDateStringToDate,
-} from "@/layouts/schedule/helpers/schedule-helper";
-import { useField, ErrorMessage } from "vee-validate";
-
-import { deepClone } from "@/helpers/object-helper";
-import { v4 as uuidv4 } from "uuid";
-
-export default {
-    name: "datePickerForPricingByDay",
-    data() {
-        return {
-            isLoading: true,
-            months: null,
-            disableViewMoreDatesButton: false,
-            selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
-            hideSomeDaysForInitialView: null,
-        };
-    },
-    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: "",
-        },
-        showPricingByDay: Boolean,
-        pricingByDayBasePrice: Number,
-        pricingByDayUpcharge: Number,
-        isPricingByDayExperiment: Boolean,
-    },
-    setup(props) {
-        const uuid = uuidv4();
-        const componentId = !props.customComponentId
-            ? `component-${uuid}`
-            : props.customComponentId;
-
-        const modelValue = deepClone(props).modelValue;
-        const initialValue = modelValue;
-
-        const fieldOptions = {
-            value: modelValue,
-            initialValue: initialValue,
-        };
-
-        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
-            useField(componentId, props.validationRules, fieldOptions);
-
-        return {
-            componentId,
-            errorMessage,
-            handleBlur,
-            handleChange,
-            validate,
-            meta,
-            errors,
-            resetField,
-        };
-    },
-    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";
-        },
-        isPricingByDayClass() {
-            return this.isPricingByDayExperiment ? "pricing-by-day" : "";
-        },
-        showPricingByDayClass() {
-            return this.showPricingByDay ? "show-pricing-by-day" : "";
-        },
-        selectedDate: {
-            get() {
-                return this.modelValue;
-            },
-            set(newSelectedDate) {
-                this.$emit("update:modelValue", newSelectedDate);
-            },
-        },
-    },
-    methods: {
-        initializeComponent(initialData) {
-            this.setCalendarData(initialData);
-        },
-        fireDateSelectedEvent(event, date) {
-            // Ignore if arrow key selected radioButton
-            if (event.screenX === 0 && event.screenY === 0) {
-                return;
-            }
-            this.$emit("date-clicked", date);
-        },
-        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]), 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) {
-                let 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: weekStartDate,
-                        weekEndDate: 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: weekStartDate,
-                        weekEndDate: 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) => {
-                    return week.weekStartDate.split("-")[1] !== week.weekEndDate.split("-")[1]
-                        ? true
-                        : false;
-                };
-                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 = 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,
-                    store.getters.order.serviceLocation.appointmentType,
-                    store.getters.order.serviceLocation.provider.providerNumber
-                );
-                resolve(response);
-            });
-
-            return loadInitialDataPromise.then((response) => {
-                const initialData = {
-                    todayDate: todayDateString,
-                    initialViewStartDate: initialViewStartDate,
-                    initialViewEndDate: initialViewEndDate,
-                    calendarViewDirection: calendarViewDirection,
-                    initialShopTimeSlotsResponse: response,
-                    hideSomeDaysForInitialView: hideSomeDaysForInitialView,
-                    hideSecondMonth: hideSecondMonth,
-                    preSelectedDate: config.preSelectedDate,
-                };
-                return initialData;
-            });
-        },
-        async setCalendarData(config = {}) {
-            this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
-            const hideSecondMonth = config.hideSecondMonth;
-            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: monthsBeforeToLoadOffset,
-                monthsAfterToLoadOffset: monthsAfterToLoadOffset,
-                initialViewStartDate: config.initialViewStartDate,
-                initialViewEndDate: config.initialViewEndDate,
-                hideSecondMonth: hideSecondMonth,
-                preSelectedDate: config.preSelectedDate,
-                pricingByDayBasePrice: config.pricingByDayBasePrice,
-                pricingByDayUpcharge: config.pricingByDayUpcharge,
-            };
-            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.calendarViewDirection;
-            if (calendarViewDirection === "future" && offset > 0) {
-                while (monthNum > 12) {
-                    monthNum = monthNum - 12;
-                    yearNum++;
-                }
-            } else if (calendarViewDirection === "past" && offset < 0) {
-                while (monthNum < 1) {
-                    monthNum = 12 + monthNum;
-                    yearNum--;
-                }
-            }
-            const initialViewEndDate = options.initialViewEndDate;
-            // const initialViewStartDate = options.initialViewStartDate; // TODO: to be used for past calendarViewDirection
-            const hideSecondMonth = options.hideSecondMonth;
-            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 = monthClass + " month-preselected";
-                } else if (monthStartDate > preSelectedDateObj) {
-                    monthClass = 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 = monthClass + " last-available-month";
-            }
-            if (
-                Math.abs(offset) === options.monthsBeforeToLoadOffset &&
-                calendarViewDirection === "past"
-            ) {
-                // TODO - re-check this logic if past direction
-                monthClass = 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);
-                const dayIndex = convertDateStringToDate(dateString).getDay();
-                const dayObject = DAYS_OF_WEEK[dayIndex];
-                const isSelectable =
-                    this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
-                        ? true
-                        : false;
-                const isPricingByDayUpchargeDay = dayObject.isPricingByDayUpchargeDay;
-                const displayPrice = isPricingByDayUpchargeDay
-                    ? options.pricingByDayBasePrice + options.pricingByDayUpcharge
-                    : options.pricingByDayBasePrice;
-                const priceString = "$" + displayPrice;
-
-                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 (dayIndex === 0) {
-                    dayClasses += " " + dayObject.cssClass;
-                }
-                if (
-                    this.hideSomeDaysForInitialView &&
-                    convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum &&
-                    convertDateStringToDate(initialViewEndDate).getDate() < i
-                ) {
-                    dayClasses += " day-hidden";
-                    isMonthThatHidesSomeDaysForInitialView = true;
-                }
-                const dateObject = {
-                    dateNum: i,
-                    dayClasses: dayClasses,
-                    inputValue: dateString,
-                    priceString: priceString,
-                    isSelectable: isSelectable,
-                    isPricingByDayUpchargeDay: isPricingByDayUpchargeDay,
-                };
-                dates.push(dateObject);
-            }
-
-            const monthToAdd = {
-                monthLabel: MONTHS_OF_YEAR[monthNum - 1],
-                monthIndex: monthNum,
-                monthString: MONTHS_OF_YEAR[monthNum - 1] + "-" + yearNum?.toString(),
-                yearNum: yearNum,
-                dates: dates,
-                startDateDayIndex: startDateDayIndex,
-                monthClass: monthClass,
-                isMonthThatHidesSomeDaysForInitialView: 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) {
-            const moreSelectableDates = await this.customSelectableDatesCallback(
-                monthStart,
-                monthEnd,
-                this.$store.getters.order.serviceLocation.appointmentType,
-                this.$store.getters.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);
-        },
-    },
-    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");
-            }
-        },
-    },
-    components: {
-        loader,
-        ErrorMessage,
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-.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;
-                    }
-                }
-
-                &: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("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");
-                    }
-                }
-            }
-            .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("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");
-                    }
-                }
-            }
-            .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;
-                    }
-                }
-            }
-        }
-    }
-
-    &.pricing-by-day {
-        // pricing by day override styles
-        .calendar-grid-container .grid-item {
-            margin: 0;
-        }
-        .month-year {
-            grid-area: 1 / 1 / 2 / 8;
-        }
-        .legend {
-            display: none;
-        }
-        .radio-wrapper {
-            align-items: flex-start;
-            width: 100%;
-            height: 3rem;
-            color: $gray-500;
-            background-color: $gray-100;
-
-            input[type="radio"] {
-                &:focus-visible + label {
-                    box-shadow: none;
-                }
-
-                &:focus + label,
-                &:checked:focus + label {
-                    box-shadow: none;
-                    background-color: $white;
-                    color: $blue;
-                }
-                &:checked + label {
-                    background: $blue-100;
-                    border: 2px solid $blue;
-                    border-radius: 4px;
-                    color: $blue;
-                }
-            }
-            label {
-                flex-direction: column;
-                height: 3rem;
-                width: 100%;
-                font-size: 0.75rem;
-                line-height: 1.2;
-                justify-content: flex-start;
-                padding: 0.25rem;
-
-                span {
-                    margin-top: 0.25rem;
-                }
-            }
-            &.selectable-day {
-                background-color: $white;
-                label {
-                    background-color: $white;
-                    border: none;
-                    min-width: 100%;
-                    width: 100%;
-                    height: -webkit-fill-available;
-                    border-radius: 0;
-                    cursor: pointer;
-
-                    span {
-                        text-decoration: underline;
-                    }
-                }
-            }
-            &.current-day {
-                label:after {
-                    margin-top: 0.2rem;
-                    position: relative;
-                    top: 0;
-                }
-            }
-        }
-    }
-
-    &.date-picker.show-pricing-by-day {
-        .radio-wrapper {
-            &.selectable-day label span {
-                text-decoration: none;
-                color: $gray-600;
-                font-weight: 400;
-                font-family: "AvertaSemibold";
-
-                &.price {
-                    color: $green;
-                }
-            }
-            &.upch-day label span.price {
-                color: $gray-600;
-                font-weight: 400;
-                font-family: $font-family-sans-serif;
-            }
-            input[type="radio"] {
-                &:focus + label,
-                &:checked:focus + label {
-                    color: $gray-600;
-                }
-                &:checked + label {
-                    color: $blue;
-                }
-            }
-        }
-    }
-}
-
-.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/fmg-components/funnel-footer/funnel-footer.vue b/src/fmg-components/funnel-footer/funnel-footer.vue
index 89db470f0..ca8be5bf0 100644
--- a/src/fmg-components/funnel-footer/funnel-footer.vue
+++ b/src/fmg-components/funnel-footer/funnel-footer.vue
@@ -32,17 +32,13 @@
                 linkType="navigation"
                 text="Cookie preferences"
                 href="javascript:OneTrust.ToggleInfoDisplay();" />
-            <textLink
-                linkType="newWindowLink"
-                text="Warranty"
-                href="//www.safelite.com/national-lifetime-warranty"
-                target="_blank" />
             <textLink
                 linkType="newWindowLink"
                 text="Notice at collection"
                 href="https://www.safelite.com/ccpa-privacy-policy"
                 target="_blank" />
         </div>
+        <p class="mx-3 my-0 pb-1">&copy; 2025 Safelite Group</p>
     </div>
 </template>
 
@@ -64,8 +60,9 @@ export default {
     flex-direction: column;
     width: 100%;
     background: transparent;
-    align-items: end;
+    align-items: center;
     margin-top: auto;
+    padding: 0 0 2rem 0;
 
     .skyline {
         height: 96px;
@@ -74,22 +71,34 @@ export default {
         height: 48px;
     }
 
+    p {
+        font-size: 0.875rem;
+        margin-top: 0.25rem;
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+            margin-top: 0.5rem;
+        }
+    }
+
     .footer-inner-wrapper {
         display: flex;
         flex-direction: column;
         border-top: 1px solid $gray;
-        padding: 2rem 0;
+        padding: 2rem 0 0 0;
         width: 100%;
         justify-content: center;
         align-items: center;
+        color: $gray-600;
 
         :deep(a) {
             text-decoration: none;
             &.new-window-link {
                 margin: 0 0.75rem;
+                color: $gray-600;
             }
             &.navigation-link {
                 margin: 0 0.75rem;
+                color: $gray-600;
             }
         }
 
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index c6cbb8727..092224551 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -6,6 +6,7 @@
         <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
         <menuModal />
         <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
+        <progressBar />
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
         <transition name="fade" mode="out-in">
@@ -26,6 +27,7 @@ import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
 import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
+import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
 
 // Constants
 const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
@@ -62,6 +64,7 @@ export default {
     components: {
         alert,
         menuModal,
+        progressBar,
     },
     mounted() {
         // Check if alert event is on the bus
diff --git a/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js b/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
new file mode 100644
index 000000000..92e6e15a5
--- /dev/null
+++ b/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
@@ -0,0 +1,84 @@
+import { shallowMount } from "@vue/test-utils";
+import progressBar from "./progress-bar";
+import store from "@/store";
+
+describe("progressBar", () => {
+    test("progress should be 0", () => {
+        // Arrange
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.progress).toBe(0);
+        wrapper.unmount();
+    });
+});
+
+describe("progressBar", () => {
+    test("progress should be 4%", () => {
+        // Arrange
+        store.getters = {
+            applicationUser: {
+                lastPageVisited: "vehicle",
+            },
+        };
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.progress).toBe(4);
+        wrapper.unmount();
+    });
+});
+
+describe("progressBar", () => {
+    test("progress should be 48%", () => {
+        // Arrange
+        store.getters = {
+            applicationUser: {
+                lastPageVisited: "quote",
+            },
+        };
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.progress).toBe(48);
+        wrapper.unmount();
+    });
+});
+
+describe("progressBar", () => {
+    test("progress should be 100%", () => {
+        // Arrange
+        store.getters = {
+            applicationUser: {
+                lastPageVisited: "confirmation",
+            },
+        };
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.progress).toBe(100);
+        wrapper.unmount();
+    });
+});
+
+const mockMixin = {
+    methods: {
+        getProgress: jest.fn(),
+    },
+};
diff --git a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
new file mode 100644
index 000000000..c8d880dab
--- /dev/null
+++ b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
@@ -0,0 +1,60 @@
+<template>
+    <div id="progress-bar-container">
+        <progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%'" />
+    </div>
+</template>
+
+<script>
+import store from "@/store";
+import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
+
+export default {
+    name: "progressBar",
+    data() {
+        return {
+            progress: this.getProgress(),
+        };
+    },
+    methods: {
+        getProgress() {
+            var pageName = store.getters.applicationUser.lastPageVisited;
+            return getProgressBarPercentage(pageName);
+        },
+    },
+};
+</script>
+<style lang="scss">
+#progress-bar-container {
+    padding: 0.75rem 0;
+    width: 100%;
+
+    progress {
+        height: 10px;
+        width: 100%;
+
+        /* Firefox */
+        appearance: none;
+        background-color: $blue-100;
+        border: 0;
+        border-radius: $border-radius-pill;
+        box-shadow: $box-shadow-inset;
+
+        &::-moz-progress-bar {
+            background-color: $blue;
+            border-radius: $border-radius-pill;
+        }
+
+        /* Webkit */
+        -webkit-appearance: none;
+        &::-webkit-progress-bar {
+            background-color: $blue-100;
+            border-radius: $border-radius-pill;
+            box-shadow: $box-shadow-inset;
+        }
+        &::-webkit-progress-value {
+            background-color: $blue;
+            border-radius: $border-radius-pill;
+        }
+    }
+}
+</style>
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index c33ef68e5..44dbaaa5e 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -172,7 +172,7 @@ export default {
             },
             serviceZipCode: this.getServiceZipFromStore(),
             carId: this.getCarIdfromStore(),
-            isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
+            isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
             displayNonServiceableZipAlert: false,
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
@@ -232,8 +232,8 @@ export default {
         getCarIdfromStore() {
             return store.getters.vehicle.carId;
         },
-        getIsVehicleHeavyTruckFromStore() {
-            return store.getters.isHeavyTruckVehicle;
+        getIsVehicleHeavyTruckServiceableFromStore() {
+            return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
         },
         async findClosestApplicableShops() {
             return await this.dispatchStoreActionWithLogging(
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 49269bcb1..baa8636be 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -56,7 +56,10 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
 
-                    <textBlock cmsWidgetName="DisclaimerCopyWidget" typeStyle="caption" />
+                    <textBlock
+                        class="mb-5"
+                        cmsWidgetName="DisclaimerCopyWidget"
+                        typeStyle="caption" />
                 </div>
             </div>
         </div>
diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue
index 0f7bca7c7..c9409eb71 100644
--- a/src/layouts/insurance-company/insurance-company.vue
+++ b/src/layouts/insurance-company/insurance-company.vue
@@ -203,3 +203,9 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.ui-autocomplete {
+    z-index: 3;
+}
+</style>
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index a359d3a9d..a8c68215a 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -76,7 +76,6 @@
                         :manualCopy="AlertMatchedDifferentVehicleBody"
                         alertClass="alert-warning"
                         v-bind:isDismissible="false" />
-
                     <alert
                         ref="AlertNoService"
                         v-if="displayNoServiceAlert"
@@ -90,7 +89,7 @@
                         cmsWidgetName="FunnelFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
                         @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
+                        @ForwardClicked="forwardButtonAction || displayNoServiceAlert" />
                 </div>
             </div>
         </div>
@@ -167,7 +166,7 @@ export default {
             emailOrSms: this.getEmailOrSmsFromStore(),
             serviceZipCode: this.getServiceZipFromStore(),
             carId: this.getCarIdfromStore(),
-            isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
+            isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
             displayNonServiceableZipAlert: false,
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
@@ -214,8 +213,8 @@ export default {
         getCarIdfromStore() {
             return store.getters.vehicle.carId;
         },
-        getIsVehicleHeavyTruckFromStore() {
-            return store.getters.isHeavyTruckVehicle;
+        getIsVehicleHeavyTruckServiceableFromStore() {
+            return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
         },
         async findClosestApplicableShops() {
             return await this.dispatchStoreActionWithLogging(
diff --git a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
new file mode 100644
index 000000000..06a717289
--- /dev/null
+++ b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
@@ -0,0 +1,259 @@
+<template>
+    <div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
+        <component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
+        <div class="my-4 alert-heading text-center">
+            <span v-html="afterpayHeaderCopy" />
+            &nbsp;
+            <span class="afterpay-amount">{{ this.afterpayPrice }}</span>
+            <br />
+            <span class="alert-sub-heading" v-html="afterpayHeaderSubHeaderCopy" />
+            &nbsp;
+            <img :src="afterPayImageUrl" />
+            &nbsp;
+            <a
+                id="afterpay-learnmore"
+                href="#"
+                data-afterpay-modal="en_US-safelite"
+                data-bind="click:afterpayLearnMore">
+                <img :src="infoIcon" alt="Info Icon" class="info-icon" />
+            </a>
+            <div class="after-pay">
+                <div
+                    class="after-pay-toggle"
+                    :class="[isExpanded ? 'expanded' : '']"
+                    @click="toggleIsExpanded">
+                    <a href="#!" v-html="paymentPlanToggleHeading" />
+                </div>
+                <div class="after-pay-details">
+                    <div class="payment-section">
+                        <div class="payment-card">
+                            <div class="calendar-section">
+                                <div class="icon"><img :src="calendarIcon" /></div>
+                                <div>Today</div>
+                            </div>
+                            <div class="payment-amount-section">
+                                <div class="icon"><img :src="paymentIcon" /></div>
+                                <div class="amount-due">{{ this.afterpayPrice }}</div>
+                            </div>
+                        </div>
+
+                        <div class="payment-card">
+                            <div class="calendar-section">
+                                <div class="icon"><img :src="calendarIcon" /></div>
+                                <div>2 weeks</div>
+                            </div>
+                            <div class="payment-amount-section">
+                                <div class="icon"><img :src="paymentIcon" /></div>
+                                <div class="amount-due">{{ this.afterpayPrice }}</div>
+                            </div>
+                        </div>
+
+                        <div class="payment-card">
+                            <div class="calendar-section">
+                                <div class="icon"><img :src="calendarIcon" /></div>
+                                <div>4 weeks</div>
+                            </div>
+                            <div class="payment-amount-section">
+                                <div class="icon"><img :src="paymentIcon" /></div>
+                                <div class="amount-due">{{ this.afterpayPrice }}</div>
+                            </div>
+                        </div>
+
+                        <div class="payment-card">
+                            <div class="calendar-section">
+                                <div class="icon"><img :src="calendarIcon" /></div>
+                                <div>6 weeks</div>
+                            </div>
+                            <div class="payment-amount-section">
+                                <div class="icon"><img :src="paymentIcon" /></div>
+                                <div class="amount-due">{{ this.afterpayPrice }}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="legend">
+                        <div class="legend-item">
+                            <img :src="calendarKeyIcon" />
+                            <span>Payment Schedule</span>
+                        </div>
+                        <div class="legend-item">
+                            <img :src="paymentKeyIcon" />
+                            <span>Amount Due</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: "afterpay-breakout",
+
+    props: {
+        cmsWidgetName: String,
+        totalAmount: Number,
+    },
+    data() {
+        return { isExpanded: false };
+    },
+    methods: {
+        toggleIsExpanded() {
+            this.isExpanded = !this.isExpanded;
+        },
+    },
+    computed: {
+        afterPayImageUrl() {
+            return this.getCmsContent(this.cmsWidgetName, "Image");
+        },
+        hasImage() {
+            return !!this.imageUrl;
+        },
+        afterpayHeaderCopy() {
+            // Text for Afterpay Breakout experiment
+
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        afterpayHeaderSubHeaderCopy() {
+            // Text for Afterpay Breakout experiment
+
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        afterpayPrice() {
+            const adjusted = (this.totalAmount / 4).toFixed(2);
+            return `$${adjusted}`;
+        },
+        infoIcon() {
+            return require(`@/assets/img/icons/info-circle.svg`);
+        },
+        calendarIcon() {
+            return require(`@/assets/img/icons/calendar-icon-black.svg`);
+        },
+        paymentIcon() {
+            return require(`@/assets/img/icons/payment-icon-green.svg`);
+        },
+        calendarKeyIcon() {
+            return require(`@/assets/img/icons/calendar-icon-grey.svg`);
+        },
+        paymentKeyIcon() {
+            return require(`@/assets/img/icons/payment-icon-grey.svg`);
+        },
+        paymentPlanToggleHeading() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.alert {
+    border-radius: 5px;
+    margin-top: 1rem;
+
+    &.alert-info {
+        .alert-heading {
+            color: #000000;
+            font-weight: 600;
+            margin-left: 0.5rem;
+            margin-right: 0.5rem;
+            @include media-breakpoint-up(md) {
+                margin-left: 1rem;
+                margin-right: 1rem;
+            }
+        }
+    }
+    .afterpay-amount {
+        color: #0c7e47;
+    }
+    .alert-sub-heading {
+        color: #4b4c4e;
+        font-weight: 400;
+    }
+    .after-pay {
+        .after-pay-toggle {
+            cursor: pointer;
+
+            &:after {
+                content: "";
+                transition: all 0.5s ease;
+                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+                background-repeat: no-repeat;
+                background-position: right center;
+                margin-left: 0.5rem;
+                width: 1rem;
+                height: 9px;
+                display: inline-flex;
+            }
+            &.expanded:after {
+                transform: rotate(180deg);
+            }
+            &.expanded + .after-pay-details {
+                max-height: 500px;
+                transition: all 250ms ease-in;
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+        .after-pay-toggle a {
+            font-weight: 600;
+            color: #0070d1;
+            text-decoration: none;
+        }
+        .after-pay-details {
+            max-height: 0;
+            transition: all 250ms ease-out;
+            overflow: hidden;
+            opacity: 0;
+            visibility: hidden;
+        }
+    }
+    .payment-section {
+        display: flex;
+        justify-content: space-around;
+        gap: 0.5rem;
+        margin-top: 1rem;
+        @include media-breakpoint-up(md) {
+            gap: 0rem;
+        }
+    }
+    .payment-card {
+        display: flex;
+        flex-direction: column;
+        border-radius: 6px;
+        border: 0.25px #b3b4b5;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+    .calendar-section {
+        background-color: #fff; /* White background for calendar area */
+        padding: 0.5rem;
+        text-align: center;
+        gap: 2px;
+        font-weight: 700;
+        white-space: nowrap;
+    }
+    .payment-amount-section {
+        background-color: #e0f7e9; /* Light green background for payment area */
+        padding: 0.5rem;
+        text-align: center;
+        font-weight: 700;
+    }
+
+    .amount-due {
+        color: #00723e; /* Green text */
+    }
+    .legend {
+        display: flex;
+        justify-content: center;
+        margin-top: 1rem;
+        gap: 1rem;
+    }
+    .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        white-space: nowrap;
+    }
+    .legend-item span {
+        font-weight: 400;
+    }
+}
+</style>
diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js
index 013916af0..3e31f88c5 100644
--- a/src/layouts/payment-method/payment-method.spec.js
+++ b/src/layouts/payment-method/payment-method.spec.js
@@ -117,6 +117,12 @@ function setupMocks() {
 
                 return "false";
             }),
+            hasSettingEqualTo: jest.fn((settingName) => {
+                if (settingName === experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY) {
+                    return true;
+                }
+                return false;
+            }),
             getCmsContent: jest.fn().mockImplementation(() => {
                 return "test text";
             }),
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 33e070a93..d5c7d93c3 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -39,6 +39,10 @@
                         :isExpandedOnLoad="false"
                         :isMSRFeeApplicable="isMSRFeeApplicable" />
 
+                    <afterpayBreakout
+                        v-if="isAfterpayBreakoutDisplay"
+                        cmsWidgetName="AfterpayBreakoutAlertWidget"
+                        :totalAmount="totalAmountDue" />
                     <hr />
 
                     <div>
@@ -118,6 +122,7 @@ import alert from "@/ux-components/alert/alert";
 import textBlock from "@/digital-components/text-block/text-block";
 import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
 import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
+import afterpayBreakout from "@/layouts/payment-method/afterpay-breakout/afterpay-breakout";
 
 // Supporting Items
 import baseMixin from "@/mixins/base-mixin.js";
@@ -131,7 +136,6 @@ import {
 } from "@/helpers/cms-content-helper";
 import { paymentMethods } from "@/constants/payment-method-constants";
 import { experimentSettings } from "@/constants/experiments";
-import experimentMixin from "@/mixins/experiment-mixin.js";
 import {
     revalidatePromosAndValidateQueryStringPromo,
     buildToastMessagesFromRevalidateOrValidatePromoResponse,
@@ -805,6 +809,18 @@ export default {
         lineItemsCloneForWatcher() {
             return Object.assign({}, this.lineItems);
         },
+        isRecalPriceRemove() {
+            return (
+                this.getSettingValue(experimentSettings.RECAL_PRICE_REMOVE)?.toLowerCase() ===
+                "true"
+            );
+        },
+        isAfterpayBreakoutDisplay() {
+            return (
+                (!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) &&
+                this.hasSettingEqualTo(experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY, "true")
+            );
+        },
     },
     watch: {
         customCtaCopy(newValue) {
@@ -856,6 +872,7 @@ export default {
         textBlock,
         checkboxQuestion,
         contentGroupModal,
+        afterpayBreakout,
     },
 };
 </script>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 42ccfb09a..4a20b4dbc 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -275,8 +275,8 @@ export default {
         const emailFromStore = store.getters.order.customer.emailAddress;
         const isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
         const isPopupSkipped =
-            store.getters.pageData(fmgPageValues.QUOTE).saveProgressPopupSkipped === true;
-        const showSaveProgressPopup = isEmailInStoreOnPageLoad || isPopupSkipped ? false : true;
+            store.getters.pageData(fmgPageValues.QUOTE)?.saveProgressPopupSkipped === true;
+        const showSaveProgressPopup = !(isEmailInStoreOnPageLoad || isPopupSkipped);
         const showSaveProgressModal = isEmailInStoreOnPageLoad ? false : true;
         const shouldSkipToInsurance =
             getBoolFromString(
@@ -891,7 +891,7 @@ export default {
 
     &.funnel-header-wrapper,
     &.save-progress-popup {
-        display: block;
+        display: flex;
     }
 }
 
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 2fd06d312..b30fd88d8 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -18,7 +18,7 @@
                             marginTopSizeOverride="1" />
                     </template>
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
-                    <datePickerForPricingByDay
+                    <datePicker
                         customComponentId="dateQuestion"
                         selectableDatesSetting="custom"
                         ref="datePicker"
@@ -77,7 +77,7 @@ import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form, defineRule } from "vee-validate";
-import datePickerForPricingByDay from "@/experiment-components/date-picker-for-pricing-by-day";
+import datePicker from "@/digital-components/date-picker/date-picker";
 import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
 import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
 import textBlock from "@/digital-components/text-block/text-block";
@@ -298,14 +298,13 @@ export default {
         );
 
         // While Pricing By Day Experiment is active, using the updated datePicker
-        const datePickerInitialDataPromise =
-            await datePickerForPricingByDay.methods.loadInitialData({
-                // setup config options for date-picker
-                selectableDatesSetting: "custom",
-                initialViewRowsToShow: 5,
-                customSelectableDatesCallback: getAvailableDates,
-                preSelectedDate: preSelectedDate,
-            });
+        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
+            // setup config options for date-picker
+            selectableDatesSetting: "custom",
+            initialViewRowsToShow: 5,
+            customSelectableDatesCallback: getAvailableDates,
+            preSelectedDate: preSelectedDate,
+        });
 
         // Get pricingByDayUpcharge needed for Pricing By Day
         const pricingByDayUpchargePartPromise = showPricingByDay
@@ -735,7 +734,7 @@ export default {
         funnelSubHeader,
         Form,
         loadingModal,
-        datePickerForPricingByDay,
+        datePicker,
         locationAlerts,
         timeSlotModalQuestion,
         textBlock,
diff --git a/src/layouts/service-zip/service-zip.vue b/src/layouts/service-zip/service-zip.vue
index 7d53d105d..a991119ef 100644
--- a/src/layouts/service-zip/service-zip.vue
+++ b/src/layouts/service-zip/service-zip.vue
@@ -119,7 +119,7 @@ export default {
             serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
             emailOrSms: this.getEmailOrSmsFromStore(),
             carId: this.getCarIdfromStore(),
-            isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
+            isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
             displayInvalidZipAlert: false,
             displayNonServiceableZipAlert: false,
             displayNoServiceAlert: false,
@@ -198,8 +198,8 @@ export default {
         getCarIdfromStore() {
             return store.getters.vehicle.carId;
         },
-        getIsVehicleHeavyTruckFromStore() {
-            return store.getters.isHeavyTruckVehicle;
+        getIsVehicleHeavyTruckServiceableFromStore() {
+            return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
         },
         async findClosestApplicableShops() {
             return await this.dispatchStoreActionWithLogging(
@@ -208,6 +208,7 @@ export default {
                 "service-zip"
             );
         },
+
         async backButtonAction() {
             const skipVin = await skipVinLookup();
             // route to move backwards
@@ -286,6 +287,16 @@ export default {
                     return this.$refs.navbar.removeLoader();
                 }
             }
+            if (this.isHeavyTruck) {
+                const closestShops = await this.findClosestApplicableShops(
+                    this.serviceZipCode,
+                    this.carId
+                );
+                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                if (this.displayNoServiceAlert) {
+                    return this.$refs.navbar.removeLoader();
+                }
+            }
 
             const payment = this.$store.getters.payment;
             const policy = this.$store.getters.policy;
@@ -344,6 +355,7 @@ export default {
         serviceZipCode() {
             this.displayNonServiceableZipAlert = false;
             this.displayNoServiceAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     components: {
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 788425861..b439b5e5e 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -208,7 +208,7 @@ export default {
             serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
             emailOrSms: this.getEmailOrSmsFromStore(),
             carId: this.getCarIdfromStore(),
-            isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
+            isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
             isCarIdDifferent: false,
             customAlertData: {},
             previouslyEnteredCarId: "",
@@ -264,6 +264,9 @@ export default {
                 );
             }
         },
+        getIsVehicleHeavyTruckServiceableFromStore() {
+            return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
+        },
         async findClosestApplicableShops() {
             return await this.dispatchStoreActionWithLogging(
                 storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
@@ -366,6 +369,18 @@ export default {
                     },
                     false
                 );
+                if (this.isHeavyTruck) {
+                    closestShops = await this.findClosestApplicableShops(
+                        this.serviceZipCode,
+                        this.carId
+                    );
+                    this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                    if (this.displayNoServiceAlert) {
+                        return this.$refs.navbar.removeLoader();
+                    }
+                }
+
+                // if no value due to field being optional, blank both phone and email address
 
                 // if no value due to field being optional, blank both phone and email address
                 if (!this.emailOrSms) {
@@ -430,16 +445,6 @@ export default {
                         false
                     );
                 }
-
-                closestShops = await this.findClosestApplicableShops(
-                    this.serviceZipCode,
-                    this.carId
-                );
-                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
-                if (this.displayNoServiceAlert) {
-                    return this.$refs.navbar.removeLoader();
-                }
-
                 // if no value due to field being optional, blank both phone and email address
                 if (!this.emailOrSms) {
                     await this.dispatchStoreAction(storeActions.SAVE_PHONE_NUMBER, "", false);
@@ -523,6 +528,7 @@ export default {
             this.displayVinNotFoundAlert = false;
             this.displayVinScanFailedAlert = false;
             this.displayNoServiceAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     mounted() {