diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue
index 8c100d17..9f9b50bf 100644
--- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue
+++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue
@@ -3,7 +3,7 @@
         <div class="add-to-calendar">
             <button @click="openCalendarModal">
                 <span class="add-to-calendar-span">
-                    <img src="@/assets/img/icons/add-to-calendar.svg" class="add-to-calendar-img" />
+                    <img src="@/assets/img/icons/spinner.svg" class="add-to-calendar-img" />
                     <span class="add-to-calendar-text">Add to calendar</span></span>
             </button>
         </div>
@@ -25,7 +25,7 @@ import { getDateFormat,
     addMinutes } from '@/helpers/date-helper.js';
 import calendarModalQuestion from '@/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue';
 import { AppointmentTypeStrings, RouteCodeFlags } from '@/constants/schedule-constants';
-import store from '@/store';
+import { useMainStore } from '@/store';
 import calendarOptions from '@/constants/calendar-options';
 import calendarStatus from '@/constants/calendar-status';
 import { getCalendarFile, download } from '@/helpers/add-to-calendar-helper';
@@ -51,6 +51,10 @@ export default {
         scheduleStartTime: String,
         scheduleEndTime: String
     },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
     data() {
         return {
             selectedCalendarOption: null
@@ -67,64 +71,64 @@ export default {
                 return obj;
             }
         },
-        IsSameDayDropOff() {
+        isSameDayDropOff() {
             const todaysDate = new Date().toISOString().split('T')[0];
             return this.scheduleDate === todaysDate;
         },
-        AddToCalendar_Mobile_Subject() {
+        addToCalendar_Mobile_Subject() {
             return this.getCmsContent(this.mobileWidgetName, 'HeaderText');
         },
-        AddToCalendar_Mobile_Body() {
+        addToCalendar_Mobile_Body() {
             return this.getCmsContent(this.mobileWidgetName, 'BodyText');
         },
-        AddToCalendar_InShop_Subject() {
+        addToCalendar_InShop_Subject() {
             return this.getCmsContent(this.inShopWidgetName, 'HeaderText');
         },
-        AddToCalendar_InShop_Body() {
+        addToCalendar_InShop_Body() {
             return this.getCmsContent(this.inShopWidgetName, 'BodyText');
         },
-        AddToCalendar_DropOff_Subject() {
+        addToCalendar_DropOff_Subject() {
             return this.getCmsContent(this.dropOffWidgetName, 'HeaderText');
         },
-        AddToCalendar_DropOff_Body() {
+        addToCalendar_DropOff_Body() {
             return this.getCmsContent(this.dropOffWidgetName, 'BodyText');
         },
-        AddToCalendar_OvernightDropOff_Subject() {
+        addToCalendar_OvernightDropOff_Subject() {
             return this.getCmsContent(this.overnightDropOffWidgetName, 'HeaderText');
         },
-        AddToCalendar_OvernightDropOff_Body() {
+        addToCalendar_OvernightDropOff_Body() {
             return this.getCmsContent(this.overnightDropOffWidgetName, 'BodyText');
         },
-        AddToCalendar_AllDayDropOff_Subject() {
+        addToCalendar_AllDayDropOff_Subject() {
             return this.getCmsContent(this.allDayDropOffWidgetName, 'HeaderText');
         },
-        AddToCalendar_AllDayDropOff_Body() {
+        addToCalendar_AllDayDropOff_Body() {
             return this.getCmsContent(this.allDayDropOffWidgetName, 'BodyText');
         },
-        AddToCalendar_SameDayDropOff_Subject() {
+        addToCalendar_SameDayDropOff_Subject() {
             return this.getCmsContent(this.sameDayDropOffWidgetName, 'HeaderText');
         },
-        AddToCalendar_SameDayDropOff_Body() {
+        addToCalendar_SameDayDropOff_Body() {
             return this.getCmsContent(this.sameDayDropOffWidgetName, 'BodyText');
         },
-        UniqueId() {
-            return store.getters.submittedOrder.referralNumber?.toString();
+        uniqueId() {
+            return this.mainStore.order.referralNumber?.toString();
         },
-        ServiceType() {
-            const { isRepair } = store.getters.submittedOrder.damage;
-            const funnelHasRecalibrationPart = store.getters.isRecalibrationOnSubmittedOrder;
+        serviceType() {
+            const { isRepair } = this.mainStore.order.damage.isRepair;
+            const { hasRecalibrationPart } = this.mainStore;
             if (!isRepair) {
-                if (funnelHasRecalibrationPart) {
+                if (hasRecalibrationPart) {
                     return serviceType.REPLACEMENT_AND_RECALIBRATION;
                 }
                 return serviceType.REPLACEMENT;
             }
             return serviceType.REPAIR;
         },
-        RouteCode() {
-            return store.getters.submittedOrder.schedule.routeCode;
+        routeCode() {
+            return this.mainStore.order.schedule.routeCode;
         },
-        Appointment() {
+        appointment() {
             let subject = '';
             let location = '';
             const startDateTime = combineDateAndTime(this.scheduleDate, this.scheduleStartTime);
@@ -136,8 +140,8 @@ export default {
             if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 location = this.serviceLocationFullAddress?.replace('<br/>', '');
                 subject = this.AddToCalendar_Mobile_Subject?.replace(
-                    '{custom:SERVICETYPE}',
-                    this.ServiceType
+                    '{custom:serviceType}',
+                    this.serviceType
                 );
                 body = this.AddToCalendar_Mobile_Body;
             } else {
@@ -165,21 +169,21 @@ export default {
                     // eslint-disable-next-line brace-style
                     } // normal time slot
                     else {
-                        subject = this.AddToCalendar_DropOff_Subject?.replace(
-                            '{custom:SERVICETYPE}',
-                            this.ServiceType
+                        subject = this.addToCalendar_DropOff_Subject?.replace(
+                            '{custom:serviceType}',
+                            this.serviceType
                         );
-                        body = this.AddToCalendar_DropOff_Body?.replace(
-                            '{custom:ADDRESS}',
+                        body = this.addToCalendar_DropOff_Body?.replace(
+                            '{custom:address}',
                             location
                         );
                     }
                 } else {
-                    subject = this.AddToCalendar_InShop_Subject?.replace(
-                        '{custom:SERVICETYPE}',
-                        this.ServiceType
+                    subject = this.addToCalendar_InShop_Subject?.replace(
+                        '{custom:serviceType}',
+                        this.serviceType
                     );
-                    body = this.AddToCalendar_InShop_Body?.replace('{custom:ADDRESS}', location);
+                    body = this.addToCalendar_InShop_Body?.replace('{custom:address}', location);
                 }
                 duration = calculateDuration(startDateTime, endDateTime);
             }
@@ -227,40 +231,40 @@ export default {
             const outlookComTimeSpanFormat = 'yyyy-MM-ddTHH:mm:ss';
             if (type === calendarOptions.OUTLOOKCOM) {
                 URL = `${applicationConfig.OUTLOOK_CALENDAR}&startdt=${encodeURIComponent(
-                    getDateFormat(this.Appointment.StartDate, outlookComTimeSpanFormat)
+                    getDateFormat(this.appointment.startDate, outlookComTimeSpanFormat)
                 )}&enddt=${encodeURIComponent(
-                    getDateFormat(this.Appointment.EndDate, outlookComTimeSpanFormat)
+                    getDateFormat(this.appointment.endDate, outlookComTimeSpanFormat)
                 )}&subject=${encodeURIComponent(
-                    this.Appointment.Subject
-                )}&body=${encodeURIComponent(this.Appointment.Body)}&location=${encodeURIComponent(
-                    this.Appointment.Location
+                    this.appointment.subject
+                )}&body=${encodeURIComponent(this.appointment.body)}&location=${encodeURIComponent(
+                    this.appointment.location
                 )}`;
             }
             if (type === calendarOptions.GOOGLE) {
                 URL = `${applicationConfig.GOOGLE_CALENDAR}&text=${encodeURIComponent(
-                    this.Appointment.Subject
+                    this.appointment.subject
                 )}&dates=${encodeURIComponent(
-                    getDateFormat(this.Appointment.StartDate, dateFormat)
+                    getDateFormat(this.appointment.startDate, dateFormat)
                 )}/${encodeURIComponent(
-                    getDateFormat(this.Appointment.EndDate, dateFormat)
+                    getDateFormat(this.appointment.endDate, dateFormat)
                 )}&details=${encodeURIComponent(
-                    this.Appointment.Body
-                )}&location=${encodeURIComponent(this.Appointment.Location)}&sf=true&output=xml`;
+                    this.appointment.body
+                )}&location=${encodeURIComponent(this.appointment.location)}&sf=true&output=xml`;
             }
             if (type === calendarOptions.YAHOO) {
                 URL = `${applicationConfig.YAHOO_CALENDAR}&TITLE=${encodeURIComponent(
-                    this.Appointment.Subject
-                )}&DESC=${encodeURIComponent(this.Appointment.Body)}&ST=${encodeURIComponent(
-                    getDateFormat(this.Appointment.StartDate, dateFormat)
-                )}&DUR=${this.Appointment.Duration}&in_loc=${encodeURIComponent(
-                    this.Appointment.Location
+                    this.appointment.subject
+                )}&DESC=${encodeURIComponent(this.appointment.body)}&ST=${encodeURIComponent(
+                    getDateFormat(this.appointment.startDate, dateFormat)
+                )}&DUR=${this.appointment.duration}&in_loc=${encodeURIComponent(
+                    this.appointment.location
                 )}`;
             }
             return {
                 url: URL,
                 name: type,
                 // eslint-disable-next-line import/no-dynamic-require, global-require
-                icon: require(`@/assets/img/icons/${type}.svg`)
+                // icon: require(`@/assets/img/icons/${type}.svg`)
             };
         },
         getAppointment() {
@@ -283,7 +287,7 @@ export default {
     }
 };
 </script>
-<style scoped>
+<!-- <style scoped>
 .add-to-calendar-text {
     margin: 0 0 0 7px;
     color: #1574a1;
@@ -310,4 +314,4 @@ export default {
     display: inline;
     width: 20px;
 }
-</style>
+</style> -->
diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue
index 1207cdf7..df22a42a 100644
--- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue
+++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue
@@ -27,7 +27,7 @@ export default {
     mixins: [inputButtonWrapperMixin]
 };
 </script>
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
 .list-button {
     outline: none;
     input[type="radio"],
@@ -78,4 +78,4 @@ export default {
 .position-relative {
     position: relative;
 }
-</style>
+</style> -->
diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue
index 39647d35..8f4cb42e 100644
--- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue
+++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue
@@ -164,7 +164,7 @@ export default {
     }
 };
 </script>
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
 .calendar-modal.modal.modal-component {
     > .modal-dialog > .modal-content {
         margin-top: 24px;
@@ -174,4 +174,4 @@ export default {
         margin-bottom: 0 !important;
     }
 }
-</style>
+</style> -->
diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue
index f1bddf9e..6bf20cb9 100644
--- a/src/layouts/order-confirmation/order-confirmation.vue
+++ b/src/layouts/order-confirmation/order-confirmation.vue
@@ -25,6 +25,19 @@
                             <p>{{ appointmentDateFormatted }}</p>
                             <p>{{ appointmentTimeFormatted }}</p>
                         </div>
+                        <!-- <addToCalendar
+                            mobileWidgetName="addToCalendar_Mobile"
+                            inShopWidgetName="addToCalendar_InShop"
+                            dropOffWidgetName="addToCalendar_DropOff"
+                            overnightDropOffWidgetName="addToCalendar_OvernightDropOff"
+                            allDayDropOffWidgetName="addToCalendar_AllDayDropOff"
+                            sameDayDropOffWidgetName="addToCalendar_SameDayDropOff"
+                            :serviceLocationFullAddress="serviceLocationFullAddress"
+                            :providerFullAddress="providerFullAddress"
+                            :appointmentType="appointmentType"
+                            :scheduleDate="appointmentDate"
+                            :scheduleStartTime="appointmentStartTime"
+                            :scheduleEndTime="appointmentEndTime" /> -->
                         <div
                             class="appointment-text text-center lh-base"
                             v-html="appointmentWordingText">
@@ -52,6 +65,7 @@
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue';
 // Supporting files
 import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
@@ -69,6 +83,7 @@ export default {
         siteHeader,
         vehicleBanner,
         siteFooter,
+        addToCalendar,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -274,7 +289,7 @@ export default {
     }
 };
 </script>
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
 $page-side-padding: 1.5rem;
 
 .page-container-grouped-styles {
@@ -315,4 +330,4 @@ $page-side-padding: 1.5rem;
         color: $black;
     }
 }
-</style>
+</style> -->