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 014af7c5..ebd7eb47 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
@@ -296,7 +296,7 @@ export default {
 </script>
 <style scoped>
 .add-to-calendar-text {
-    margin: 0 0 0 7px;
+    margin: 0 0 0 0.4375rem;
     color: #1574a1;
     vertical-align: middle;
     font-weight: 500;
@@ -320,6 +320,6 @@ export default {
 }
 .calendar-section .add-to-calendar .add-to-calendar-img {
     display: inline;
-    width: 20px;
+    width: 1.25rem;
 }
 </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..814d10fe 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
@@ -65,13 +65,13 @@ export default {
     background: $white;
     transition: all 150ms linear;
     border-radius: $border-radius-lg;
-    border: 1px solid $gray-500;
+    border: 0.063rem solid $gray-500;
     width: 100%;
     outline: none;
 
     span.calendar-text {
-        margin-left: 5px;
-        padding: 2px 8px;
+        margin-left: 0.313rem;
+        padding: 0.125rem 0.5rem;
     }
 }
 
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 4a02b72d..702abf1b 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
@@ -168,7 +168,7 @@ export default {
 <style lang="scss" scoped>
 .calendar-modal.modal.modal-component {
     > .modal-dialog > .modal-content {
-        margin-top: 24px;
+        margin-top: 1.5rem;
     }
     .modal-header {
         padding-bottom: 0;
diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue
index f0364062..7ee31d95 100644
--- a/src/layouts/order-confirmation/order-confirmation.vue
+++ b/src/layouts/order-confirmation/order-confirmation.vue
@@ -312,8 +312,8 @@ $page-side-padding: 1.5rem;
 .appointment-details {
     margin-bottom: 1.5rem;
     padding: 1rem 1.5rem 1.5rem;
-    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
-    border-radius: 5px;
+    box-shadow: 0 0.188rem 0.625rem rgb(0 0 0 / 0.2);
+    border-radius: 0.313rem;
 }
 
 .appointment-date-time P {