diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
index bd33bf4b9..c9c0ad81a 100644
--- a/src/layouts/scheduling/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -232,7 +232,7 @@ export default {
     &__day-card {
         flex: 1;
         min-width: 0;
-        border: 1px solid $gray-200;
+        border: 1px solid $blue;
         border-radius: $border-radius-lg;
         background: $white;
         padding: 0.625rem 0.25rem;
@@ -242,7 +242,7 @@ export default {
             border-color 150ms ease;
 
         &:hover:not(:disabled):not(.date-picker__day-card--selected) {
-            border-color: $blue;
+            background: $blue-100;
         }
 
         &--selected {
@@ -270,7 +270,7 @@ export default {
     &__day-abbr {
         font-family: $font-family-sans-serif-semibold;
         font-size: $font-size-12;
-        color: $gray-600;
+        color: $blue;
         text-transform: uppercase;
         line-height: 1.2;
     }
@@ -278,7 +278,7 @@ export default {
     &__day-date {
         font-family: $font-family-sans-serif-bold;
         font-size: $font-size-14;
-        color: $gray-700;
+        color: $blue;
         line-height: 1.4;
         white-space: nowrap;
     }
diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index 515c966bb..216f0adbe 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -4,7 +4,7 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
         <div class="container page-container-grouped-styles">
             <div class="row">
-                <div class="col-12">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <h5 class="fw-normal mb-0 dark-header" :class="headerColor">
                         <span>
                             {{ serviceLocationText }}