diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 72bdcb093..fa8c9d218 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -7,7 +7,6 @@
             <textBlock
                 v-show="durationTextBlockCopy"
                 :customText="durationTextBlockCopy"
-                justifyText="center"
                 typeStyle="small"
                 marginTopSizeOverride="0"
                 class="duration-text-block" />
@@ -1027,6 +1026,10 @@ export default {
     display: flex;
     flex-direction: column;
 
+    .duration-text-block {
+        text-align: left;
+    }
+
     .date-picker-header {
         margin-bottom: 1.5rem;
     }
@@ -1050,7 +1053,6 @@ export default {
     }
     .calendar-grid-container {
         margin: 0 auto 1rem auto;
-        max-width: 360px;
         position: relative;
         transition:
             height ease 2s,
@@ -1188,8 +1190,6 @@ export default {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                min-width: 2.5rem;
-                width: 2.5rem;
                 height: 2.5rem;
                 border: 2px solid transparent;
 
@@ -1227,14 +1227,8 @@ export default {
             &.selectable-day {
                 label {
                     background-color: $blue-100;
-                    min-width: 2.75rem;
-                    width: 2.75rem;
                     border-radius: 50%;
                     cursor: pointer;
-                    @include media-breakpoint-up(md) {
-                        min-width: 3rem;
-                        width: 3rem;
-                    }
                     &:hover {
                         border: 2px solid $blue;
                     }
@@ -1413,18 +1407,13 @@ export default {
                 line-height: 1.2;
                 justify-content: center;
                 padding: 0.25rem;
+                margin: 0.15rem;
             }
             &.selectable-day {
                 label {
                     color: $black;
                     background-color: $blue-100;
-                    min-width: 2.75rem;
-                    width: 2.75rem;
                     border-radius: 0.25rem;
-                    @include media-breakpoint-up(md) {
-                        min-width: 3rem;
-                        width: 3rem;
-                    }
                 }
             }
             &.current-day {
@@ -1432,7 +1421,6 @@ export default {
                     font-weight: 600;
                     font-family: "UrbanistSemibold";
                     color: $black;
-                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
                 }
             }
         }
@@ -1443,7 +1431,6 @@ export default {
                     color: $black;
                     font-weight: 400;
                     font-family: "UrbanistSemibold";
-                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
 
                     &.price {
                         font-weight: 400;
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 0e68cb458..0be89d4dd 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -60,8 +60,8 @@
                         alertClass="alert-success" />
                 </div>
             </div>
-            <div class="row justify-content-center appointment-type">
-                <div class="col-md-6">
+            <div class="row appointment-type">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <appointmentTypeQuestion
                         v-model="appointmentTypeFromAppointmentTypeQuestion"
                         v-show="isAppointmentTypeDisplayed"
@@ -78,9 +78,9 @@
                 </div>
             </div>
             <div
-                class="row justify-content-center your-shop-location"
+                class="row your-shop-location"
                 v-if="appointmentType && appointmentType !== appointmentTypeStrings.MOBILE">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <button-question
                         class="shop-question-button"
                         ref="buttonQuestion"
@@ -91,9 +91,8 @@
                         :questionText="questionText"
                         buttonTypeString="shopListButton"
                         :buttonTypeObject="shopListButton"
-                        groupName="chooseShop"
-                        textPosition="text-start" />
-                    <div class="text-center">
+                        groupName="chooseShop" />
+                    <div>
                         <textBlock
                             v-if="mobileFeeApplies && isMobileSelected"
                             :customText="mobileFeeText"
@@ -113,8 +112,8 @@
                     <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
                 </div>
             </div>
-            <div class="row justify-content-center date-picker-wrapper">
-                <div class="col-md-6 col-xl-4">
+            <div class="row date-picker-wrapper">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
                     <datePicker
                         :currentZip="zipCode"
@@ -1748,7 +1747,7 @@ export default {
 </script>
 
 <style lang="scss">
-.container-fluid {
+.container {
     &.page-schedule {
         padding: 0 1rem;
         .text-link-small {
@@ -1785,6 +1784,10 @@ export default {
             padding: 0 0.75rem;
         }
     }
+    .question-text > span {
+        display: flex;
+        justify-content: flex-start;
+    }
 }
 .shop-question-button .list-button-content {
     background: $blue-100;