diff --git a/public/css/site-2020Styling.css b/public/css/site-2020Styling.css
index a605df285..e47350565 100644
--- a/public/css/site-2020Styling.css
+++ b/public/css/site-2020Styling.css
@@ -194,16 +194,6 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
   margin-bottom: 2px;
 }
 
-@media (min-width: 500px) {
-  .form-group {
-    width: 80%;
-  }
-}
-@media (min-width: 800px) {
-  .form-group {
-    width: 60%;
-  }
-}
 .list-group {
   margin-bottom: 20px;
   padding-left: 0;
diff --git a/public/scss/site-2020Styling.scss b/public/scss/site-2020Styling.scss
index ec72ae1b9..3ae80dcb0 100644
--- a/public/scss/site-2020Styling.scss
+++ b/public/scss/site-2020Styling.scss
@@ -188,16 +188,16 @@
     margin-bottom: 2px;
   }
   
-  @media (min-width: 500px) {
-    .form-group {
-      width: 80%;
-    }
-  }
-  @media (min-width: 800px) {
-    .form-group {
-      width: 60%;
-    }
-  }
+  // @media (min-width: 500px) {
+  //   .form-group {
+  //     width: 80%;
+  //   }
+  // }
+  // @media (min-width: 800px) {
+  //   .form-group {
+  //     width: 60%;
+  //   }
+  // }
   
   .list-group {
     margin-bottom: 20px;
diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 050dcdea0..6dd12f82a 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -7,7 +7,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
         ">
         <div
             v-if="questionText && answers && answers.length > 0"
-            class="question-text d-flex"
+            class="question-text"
             :class="{ 'small-question-text': isSmallQuestionText }">
             <span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']">
                 {{ questionText }}
@@ -76,10 +76,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                 </div>
             </fieldset>
         </div>
-        <div
-            id="form-test-error"
-            class="row form-test-error"
-            :class="isErrorCentered ? 'text-center' : ''">
+        <div id="form-test-error" class="row form-test-error">
             <error-message
                 role="comment"
                 aria-atomic="true"
@@ -249,12 +246,6 @@ export default {
 
             return classes;
         },
-        isErrorCentered() {
-            if (this.buttonTypeString == "listCard" && this.buttonsInfo.length <= 2) {
-                return true;
-            }
-            return false;
-        },
         buttonsInfo() {
             return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
                 buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
diff --git a/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
index 41f9d2d8a..e05ff408a 100644
--- a/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
+++ b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
@@ -66,19 +66,18 @@ export default {
 .btn {
     &.btn-primary {
         position: relative;
-        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+        background: $red;
         border: none;
-        border-radius: $border-radius-lg;
         color: $white;
         justify-content: center;
         font-weight: 500;
         @media (hover: hover) {
-            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+            background: $red;
         }
         &:focus {
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -86,27 +85,26 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             color: $white;
-            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+            background: $red;
         }
         &:disabled {
             background: $gray-200 !important;
-            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
+            background: $red !important;
             color: $gray-600 !important;
             font-weight: 400;
             height: 48px;
             border: none;
-            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            background: $blue-700;
+            background: $red;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             pointer-events: none;
         }
         &.delay {
@@ -117,8 +115,7 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $blue;
-        border-radius: $border-radius-lg;
+        border: 1px solid $red;
         color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
@@ -133,7 +130,7 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             color: $white;
             @include blue-gradient;
         }
@@ -142,14 +139,12 @@ export default {
             color: $gray-550 !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $gray-550;
-            border-radius: $border-radius-lg;
+            border: 1px solid $red;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            @include blue-gradient;
             pointer-events: none;
         }
         &.delay {
diff --git a/src/fmg-components/funnel-footer/funnel-footer.vue b/src/fmg-components/funnel-footer/funnel-footer.vue
index ca8be5bf0..9f205597b 100644
--- a/src/fmg-components/funnel-footer/funnel-footer.vue
+++ b/src/fmg-components/funnel-footer/funnel-footer.vue
@@ -1,15 +1,5 @@
 <template>
     <div class="funnel-footer">
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col d-flex justify-content-center justify-content-md-start">
-                    <img class="skyline" src="~@/assets/img/skyline-van.svg" alt="" />
-                </div>
-                <div class="col d-none d-md-flex justify-content-end align-items-end">
-                    <img class="neighborhood" src="~@/assets/img/neighborhood.svg" alt="" />
-                </div>
-            </div>
-        </div>
         <div class="footer-inner-wrapper">
             <textLink
                 linkType="newWindowLink"
@@ -64,13 +54,6 @@ export default {
     margin-top: auto;
     padding: 0 0 2rem 0;
 
-    .skyline {
-        height: 96px;
-    }
-    .neighborhood {
-        height: 48px;
-    }
-
     p {
         font-size: 0.875rem;
         margin-top: 0.25rem;
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index f7d55b354..036dfc302 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -1,7 +1,13 @@
 <template>
     <div class="funnel-header" v-if="imageSrc">
-        <div class="d-flex justify-content-between align-items-center">
-            <div class="button-container">
+        <div class="d-flex w-100">
+            <progress-bar :page="$route.name" />
+        </div>
+        <div class="container d-flex">
+            <div class="site-logo">
+                <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
+            </div>
+            <div class="button-container webchat">
                 <span class="webchat">
                     <button
                         v-show="shouldShowWebchatButton"
@@ -10,18 +16,10 @@
                         class="chat-button"></button>
                 </span>
             </div>
-            <div class="site-logo">
-                <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-            </div>
             <div class="button-container">
-                <!-- // 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. -->
             </div>
         </div>
-        <div class="d-flex w-100">
-            <progress-bar :page="$route.name" />
-        </div>
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
         <transition name="fade" mode="out-in">
@@ -197,23 +195,39 @@ export default {
 
 <style lang="scss" scoped>
 .funnel-header {
+    .container {
+        padding: 1rem 0.75rem;
+        display: flex;
+        align-items: center;
+        @include media-breakpoint-up(md) {
+            padding: 2rem 0.75rem;
+        }
+    }
     position: relative;
-    padding: 1rem 0;
+    padding: 0 0 1rem 0;
 
     .button-container {
-        width: 1.5rem;
-        height: 1.625rem;
+        &.webchat {
+            margin-right: 1rem;
+            @include media-breakpoint-up(md) {
+                margin-right: 2rem;
+            }
+        }
+    }
+
+    .site-logo {
+        margin-right: auto;
     }
 
     .logo-image {
-        width: auto;
-        height: 1.1875rem;
+        width: 100px;
+        height: auto;
         margin: 0 auto;
+        @include media-breakpoint-up(md) {
+            width: 165px;
+        }
     }
 
-    :deep(.menu-modal-container) {
-        display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
-    }
     .webchat {
         .chat-button {
             width: 1.5rem;
diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index 8f68ab6e9..0073baefe 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -6,9 +6,12 @@
             :class="[isActive ? 'active' : '']"
             @click="toggleModal"
             aria-label="Hamburger Menu (modal window)">
-            <div class="bar1"></div>
-            <div class="bar2"></div>
-            <div class="bar3"></div>
+            <span class="step-numbers">Step 1 of 4</span>
+            <div class="bars">
+                <div class="bar1"></div>
+                <div class="bar2"></div>
+                <div class="bar3"></div>
+            </div>
         </button>
     </div>
     <div
@@ -111,35 +114,56 @@ export default {
     button {
         border: none;
         &.menu-button {
-            width: 1.5rem;
-            height: 1.5rem;
-            border-radius: 50%;
+            width: auto;
+            height: auto;
+            border-radius: 1.5rem;
             box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
             background-color: $white;
             position: relative;
             display: flex;
-            flex-direction: column;
+            flex-direction: row;
             justify-content: center;
             align-items: center;
-            padding: 0; //Required to prevent 'squish' on iPhone
+            padding: 0.15rem 0.5rem; //Required to prevent 'squish' on iPhone
             z-index: 1050;
-            .bar1,
-            .bar2,
-            .bar3 {
-                width: 14px;
-                height: 2px;
-                background-color: $blue;
-                margin: 1px 0;
-                transition: 0.25s;
+            @include media-breakpoint-up(md) {
+                padding: 0.25rem 1rem;
             }
             &.active .bar1 {
-                transform: rotate(-45deg) translate(-3px, 3px);
+                transform: rotate(-45deg) translate(-3px, 8px);
             }
             &.active .bar2 {
                 opacity: 0;
             }
             &.active .bar3 {
-                transform: rotate(45deg) translate(-3px, -3px);
+                transform: rotate(45deg) translate(-3px, -8px);
+            }
+            .bars {
+                width: 1.5rem;
+                height: 1.5rem;
+                display: flex;
+                justify-content: space-around;
+                flex-direction: column;
+                scale: 0.75;
+                @include media-breakpoint-up(md) {
+                    scale: 1;
+                }
+                .bar1,
+                .bar2,
+                .bar3 {
+                    width: 1.5rem;
+                    height: 2px;
+                    background-color: $blue;
+                    margin: 1px 0;
+                    transition: 0.25s;
+                }
+            }
+            .step-numbers {
+                font-size: 0.875rem;
+                margin-right: 0.5rem;
+                @include media-breakpoint-up(md) {
+                    font-size: 1rem;
+                }
             }
         }
     }
@@ -147,11 +171,15 @@ export default {
 .modal {
     &.menu-modal {
         //left: auto;
-        height: calc(100% - 56px);
-        top: 56px;
+        height: calc(100% - 68px);
+        top: 68px;
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
+        @include media-breakpoint-up(md) {
+            height: calc(100% - 104px);
+            top: 104px;
+        }
         .modal-body {
             padding: 2rem;
             .ccpa-icon {
@@ -190,23 +218,30 @@ export default {
                     align-items: center;
                     padding: 0; //Required to prevent 'squish' on iPhone
                     z-index: 1056;
-                    .bar1,
-                    .bar2,
-                    .bar3 {
-                        width: 14px;
-                        height: 2px;
-                        background-color: $blue;
-                        margin: 1px 0;
-                        transition: 0.25s;
-                    }
-                    &.active .bar1 {
-                        transform: rotate(-45deg) translate(-3px, 3px);
-                    }
-                    &.active .bar2 {
-                        opacity: 0;
-                    }
-                    &.active .bar3 {
-                        transform: rotate(45deg) translate(-3px, -3px);
+                    .bars {
+                        width: 1.5rem;
+                        height: 1.5rem;
+                        display: flex;
+                        justify-content: space-around;
+                        flex-direction: column;
+                        .bar1,
+                        .bar2,
+                        .bar3 {
+                            width: 1.5rem;
+                            height: 2px;
+                            background-color: $blue;
+                            margin: 1px 0;
+                            transition: 0.25s;
+                        }
+                        &.active .bar1 {
+                            transform: rotate(-45deg) translate(-3px, 8px);
+                        }
+                        &.active .bar2 {
+                            opacity: 0;
+                        }
+                        &.active .bar3 {
+                            transform: rotate(45deg) translate(-3px, -8px);
+                        }
                     }
                 }
             }
diff --git a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
index f8b654e7f..dc1cf4634 100644
--- a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
+++ b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
@@ -55,50 +55,33 @@ export default {
 <style lang="scss">
 .progress-bar-outer {
     background: $blue-100;
-    height: 10px;
+    height: 5px;
     position: relative;
-    border-radius: 10px;
+    border-radius: 0;
     width: 100%;
-    margin-top: 1rem;
+    margin-top: 0;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
     .progress-bar-inner {
         transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
         will-change: width;
-        height: 10px;
-        background-color: $blue;
+        height: 5px;
+        background-color: $red;
         position: absolute;
         top: 0;
         left: 0;
-        border-radius: 10px;
+        border-radius: 0;
     }
 
     progress {
-        height: 10px;
+        height: 5px;
         width: 100%;
 
         /* Firefox */
         appearance: none;
-        background-color: $blue-100;
+        background-color: $gray-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/fmg-components/funnel-sub-header/funnel-sub-header.vue b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
index f42a90972..88d38d3a8 100644
--- a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,9 +1,7 @@
 <template>
     <div class="funnel-sub-header">
-        <div
-            class="d-flex align-items-center container-fluid overflow-hidden"
-            :class="[textAlignment]">
-            <h5 class="text-center fw-normal mb-0" :class="headerColor">
+        <div class="d-flex align-items-center overflow-hidden">
+            <h5 class="fw-normal mb-0" :class="headerColor">
                 <span>
                     {{ text }}
                 </span>
@@ -13,10 +11,8 @@
                     @click-event="clickEvent" />
             </h5>
         </div>
-        <div
-            v-if="subText"
-            class="d-flex align-items-center justify-content-center container-fluid overflow-hidden mt-1">
-            <p class="text-center small fw-normal sub-text">
+        <div v-if="subText" class="d-flex align-items-center overflow-hidden mt-1">
+            <p class="small fw-normal sub-text">
                 <span>
                     {{ subText }}
                 </span>
@@ -37,10 +33,6 @@ export default {
             type: String,
             default: "dark-header",
         },
-        leftAlignHeader: {
-            type: Boolean,
-            default: false,
-        },
     },
     components: {
         buttonBack,
@@ -49,9 +41,6 @@ export default {
         text() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
-        textAlignment() {
-            return this.leftAlignHeader ? "justify-content-start" : "justify-content-center";
-        },
         subText() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
         },
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index f473aa50b..b2547d5e6 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -1,13 +1,9 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
                     <textboxQuestion
                         isRequired
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 77ae4b54b..806a67448 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal notFullScreen ref="loadingModal" />
-        <div class="container-fluid payment-method">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container payment-method">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <hr class="my-0" />
diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index 3a9fc4cd0..e266a7c07 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -1,15 +1,10 @@
 <template>
     <Form>
         <loadingModal notFullScreen ref="loadingModal" />
-        <div class="container-fluid">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 p-0">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-md-8">
                     <div>
                         <alert
                             ref="piaCCErrorAlert"
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index e7039da54..e9ffc8807 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -1,16 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div
-            class="container-fluid page-container-grouped-styles quote-page"
-            :class="showSaveProgressPopup ? 'show-save-progress-popup' : ''">
-            <div class="row justify-content-center funnel-header-wrapper">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+                <div class="col-md-6">
                     <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
                     <cashOrInsuranceQuestion
                         ref="cashOrInsurance"
@@ -919,6 +913,11 @@ export default {
 .text-block {
     display: block;
 }
+:deep(.container .funnel-sub-header) {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
 :deep(.promo-modal-question a) {
     @include responsive-font-size-md(0.875rem, 1rem);
 }
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 98f5d60ea..90143017f 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles page-schedule">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
                     <template v-if="ChangeShopLink.length">
                         <textBlock
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index ccb2c7866..da39e4590 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <serviceZipModalQuestion
@@ -69,8 +65,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="selectedAppointmentType"
                         v-show="isAppointmentTypeDisplayed"
@@ -87,8 +83,8 @@
                         labelBold="true" />
                 </div>
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <div class="text-center">
                         <textBlock
                             v-if="mobileFeeApplies && isMobileSelected"
@@ -809,10 +805,6 @@ export default {
             @include media-breakpoint-up(md) {
                 padding: 0 0.75rem;
             }
-            @include media-breakpoint-up(xl) {
-                width: 33.3333333%;
-                flex: 0 0 auto;
-            }
         }
     }
 }
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index 5e7aa73e4..c8ba6d57b 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="text-center">
+    <div class="text-left">
         <div class="update-zip-text-link">
             <textLink
                 id="serviceZipLinkPromptId"
diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
index 20accf43b..871f8d326 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -2,11 +2,11 @@
     <transition name="fade" mode="out-in">
         <baseInputButton
             v-bind="$props"
-            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+            buttonWrapperClasses="list-group base-input-button rounded-pill list-button d-flex flex-column w-100 mb-2"
             v-model="selectedValue">
             <div
                 :aria-label="buttonLabel"
-                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
+                class="button-content list-button-content rounded-pill d-flex flex-column justify-content-center py-3 px-4 p-md-4">
                 <div class="row-one">
                     <span class="m-0 button-label-copy text-truncate" :class="textPosition">
                         {{ buttonLabel }}
@@ -144,7 +144,6 @@ export default {
     position: relative;
     background: $white;
     transition: all 150ms linear;
-    border-radius: $border-radius-lg;
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
@@ -163,6 +162,7 @@ export default {
         display: flex;
         align-items: center;
         line-height: 1.5rem;
+        justify-content: center;
 
         .button-label-copy {
             font-weight: 500;
@@ -232,7 +232,7 @@ export default {
     }
 
     .row-two {
-        text-align: left;
+        text-align: center;
     }
 }
 </style>
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 5a9278d78..a6c5e71c8 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -16,7 +16,7 @@
                 :questionText="questionText"
                 :answers="answers"
                 groupName="chooseShop"
-                textPosition="text-start"
+                textPosition="text-center"
                 v-model="selectedProviderNumber"
                 isRequired
                 validationRules="option-required" />
diff --git a/src/layouts/service-zip/service-zip.vue b/src/layouts/service-zip/service-zip.vue
index df1cb4e65..1e1bc2f74 100644
--- a/src/layouts/service-zip/service-zip.vue
+++ b/src/layouts/service-zip/service-zip.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
                         <textboxQuestion
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 7096bd08c..ca77900fa 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,13 +1,9 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="container-fluid page-container-grouped-styles vehicle-damage">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                     <alert
                         ref="vehicleChangeAlert"
@@ -18,7 +14,7 @@
                         :isDismissible="false" />
                 </div>
             </div>
-            <div class="row justify-content-center">
+            <div class="row">
                 <div class="col-md-6">
                     <damageLocationQuestion
                         ref="damageLocation"
@@ -27,8 +23,8 @@
                         groupName="DamageLocationQuestion" />
                 </div>
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+            <div class="row">
+                <div class="col-md-6">
                     <windshieldOptions
                         class="windshield-options"
                         ref="windshieldOptions"
@@ -61,8 +57,8 @@
                         validationRules="replace-options-required" />
                 </div>
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+            <div class="row">
+                <div class="col-md-6">
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         :isForwardActionDisabled="!isContinueEnabled"
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 0820c0c5a..3bc2d8565 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -1,13 +1,9 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
                     <vehicleQuestion
                         ref="vehicleYearQuestion"
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index d1b534be4..3051ed00a 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -202,21 +202,21 @@ html {
 
     .form-test-invalid {
         &.btn.btn-primary {
-            color: $gray-600;
-            background: $gray-200;
+            color: $white;
+            background: $red;
             cursor: pointer;
             pointer-events: all;
             font-weight: $font-weight-normal;
         }
         &.btn.btn-primary:hover,
         &.btn.btn-primary:focus {
-            background: $gray-200;
+            background: $red;
             box-shadow: none;
         }
         &.btn.btn-primary:focus-visible {
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $gray-700;
+                0 0 0 5.5px $red;
         }
     }
 }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 3aa8580cb..c619196fa 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -8,13 +8,10 @@ body {
         display: flex;
         flex-direction: column;
         min-height: 100dvh;
-        form {
-            > .container-fluid {
-                margin-bottom: -1rem;
-                @media screen and (min-width: 1090px) {
-                    margin-bottom: -5rem;
-                }
-            }
+    }
+    .container {
+        @include media-breakpoint-up(xl) {
+            max-width: 1020px;
         }
     }
     .container-fluid {
@@ -90,7 +87,7 @@ body {
     }
 }
 .modal-open:not(.prevent-modal-scroll) {
-    .container-fluid {
+    .container {
         &.page-container-grouped-styles {
             overflow: hidden;
             height: auto;
diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss
index 07329fc71..14497ddc0 100644
--- a/src/styles/shared-input-button-styles.scss
+++ b/src/styles/shared-input-button-styles.scss
@@ -1,3 +1,23 @@
+
+.base-input-button {
+    &.rounded-pill {
+        &:not(.has-error):hover {
+            cursor: pointer;
+
+            &.list-button,
+            &.list-button-horizontal,
+            &.list-card {
+                &:not(.selected) {
+                    position: relative;
+                    z-index: 5;
+                    @include box-shadow-hover($blue-300);
+                    border-radius: 50rem;
+                }
+            }
+        }
+    }
+}
+
 .base-input-button {
     &:not(.has-error):hover {
         cursor: pointer;
@@ -9,7 +29,7 @@
                 position: relative;
                 z-index: 5;
                 @include box-shadow-hover($blue-300);
-                border-radius: 0.5rem;
+                border-radius: .5rem;
             }
         }
     }
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 69ba0d7ac..732d1165e 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -121,8 +121,8 @@ $body-color: $gray-600;
 
 //Fonts
 $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
-$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
+$font-family-monospace:
+    UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 // stylelint-enable value-keyword-case
 $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;
@@ -199,6 +199,7 @@ $enable-important-utilities: false;
 $grid-breakpoints: (
     xs: 0,
     md: 768px,
+    lg: 992px,
     xl: 1200px,
     xxl: 1440px,
 );
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 982e7bb1b..ccf9b97a9 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,7 +1,7 @@
 <template>
     <button
         :aria-disabled="isDisabled"
-        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
+        class="btn rounded-pill d-flex align-items-center justify-content-center py-3 px-6 delay"
         :class="[
             isPrimary ? 'btn-primary' : 'btn-secondary',
             isFloat ? 'float-end' : '',
@@ -65,19 +65,18 @@ export default {
 .btn {
     &.btn-primary {
         position: relative;
-        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+        background: $red;
         border: none;
-        border-radius: $border-radius-lg;
         color: $white;
         justify-content: center;
         font-weight: 500;
         @media (hover: hover) {
-            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+            background: $red;
         }
         &:focus {
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -85,27 +84,26 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             color: $white;
-            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+            background: $red;
         }
         &:disabled {
             background: $gray-200 !important;
-            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
-            color: $gray-600 !important;
+            background: $red !important;
+            color: $white !important;
             font-weight: 400;
             height: 48px;
             border: none;
-            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            background: $blue-700;
+            background: $red;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             pointer-events: auto;
         }
         &.delay {
@@ -116,15 +114,13 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $blue;
-        border-radius: $border-radius-lg;
-        color: $blue;
+        border: 1px solid $red;
+        color: $red;
         font-weight: 500;
         transition: all 150ms linear;
         height: 3rem;
         &:hover {
             color: $white;
-            @include blue-gradient;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -132,23 +128,20 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             color: $white;
-            @include blue-gradient;
         }
         &:disabled {
             background: transparent;
-            color: $gray-550 !important;
+            color: $red !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $gray-550;
-            border-radius: $border-radius-lg;
+            border: 1px solid $red;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            @include blue-gradient;
             pointer-events: none;
         }
         &.delay {
@@ -160,7 +153,6 @@ export default {
         position: relative;
         background: $green-100;
         border: 1px solid $green-400;
-        border-radius: $border-radius-lg;
         color: $black;
         font-weight: 500;
         transition: all 150ms linear;
@@ -185,13 +177,11 @@ export default {
             font-weight: 400;
             height: 48px;
             border: 1px solid $gray-550;
-            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            @include blue-gradient;
             pointer-events: none;
         }
         &.delay {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index fa06970ac..f4e1540d8 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,7 +1,7 @@
 <template>
     <baseInputButton
         v-bind="$props"
-        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-pill d-flex flex-column w-100 mb-2"
         v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
@@ -102,7 +102,6 @@ export default {
     position: relative;
     background: $white;
     transition: all 150ms linear;
-    border-radius: $border-radius-lg;
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;