From 2e7f931935d37198577b866116e09c8925ff86c6 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 17 Jul 2025 09:15:15 -0400
Subject: [PATCH] Revert "Merge pull request #2654 from
 Safelite/CASH-1042-header-and-progress-bar-style-updates"

This reverts commit bc6cfd58e0be7145677321e9ee5003e54cd2395c, reversing
changes made to 28390818664b615db25ebdcda531d8f932d22d34.
---
 public/css/site-2020Styling.css               |  10 +
 public/scss/site-2020Styling.scss             |  11 +
 src/constants/progress-bar-mapper.js          | 115 ++------
 .../button-question/button-question.vue       |  13 +-
 .../dropdown-question/dropdown-question.vue   |   1 -
 .../modal-button-main/modal-button-main.vue   |  27 +-
 .../textbox-question/textbox-question.vue     |   1 -
 src/fmg-components/cart/cart.vue              |   6 +-
 .../funnel-footer/funnel-footer.vue           |  21 +-
 .../funnel-header/funnel-header.vue           |  58 ++--
 .../funnel-header/menu-modal/menu-modal.vue   | 252 ++++++------------
 .../progress-bar/progress-bar.vue             |  82 +++---
 .../funnel-sub-header/funnel-sub-header.vue   |  30 ++-
 .../questions-page-layout.vue                 |  32 ++-
 .../save-progress-modal-question.vue          |  22 +-
 src/layouts/address-lookup/address-lookup.vue |  17 +-
 .../customer-details/customer-details.vue     |  16 +-
 src/layouts/estimate/estimate.vue             |  42 ++-
 .../insurance-company/insurance-company.vue   |  12 +-
 .../license-plate-lookup.vue                  |  12 +-
 .../payment-method-list-button.vue            |   1 -
 src/layouts/payment-method/payment-method.vue |  34 ++-
 .../review-dropdown/review-dropdown.vue       |   6 +-
 src/layouts/payment/payment.spec.js           |   2 +-
 src/layouts/payment/payment.vue               |  13 +-
 .../afterpay-modal-banner.vue                 |   5 +-
 src/layouts/quote/quote.vue                   |  49 +---
 src/layouts/return-user/return-user.vue       |  11 +-
 src/layouts/schedule/schedule.vue             |  12 +-
 .../time-slot-modal-list-button.vue           |   1 -
 .../service-location/service-location.vue     |  39 ++-
 .../service-zip-modal-question.vue            |   2 +-
 .../shop-list-button/shop-list-button.vue     |   9 +-
 .../shop-question/shop-question.vue           |   2 +-
 src/layouts/service-zip/service-zip.vue       |  15 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |  24 +-
 src/layouts/vehicle-parts/vehicle-parts.vue   |  34 ++-
 src/layouts/vehicle/vehicle.vue               |  12 +-
 .../vin-information/vin-information.vue       |   6 +-
 src/layouts/vin-lookup/vin-lookup.vue         |  12 +-
 src/styles/common-error-styles.scss           |   8 +-
 src/styles/common-styles.scss                 |  13 +-
 src/styles/shared-input-button-styles.scss    |  19 --
 src/styles/ux-variables.scss                  |   1 -
 src/ux-components/button-main/button-main.vue |  45 ++--
 .../list-button-horizontal.vue                |   1 -
 src/ux-components/list-button/list-button.vue |   5 +-
 src/ux-components/list-card/list-card.vue     |   1 -
 src/ux-components/text-link/text-link.vue     |   8 +-
 49 files changed, 542 insertions(+), 628 deletions(-)

diff --git a/public/css/site-2020Styling.css b/public/css/site-2020Styling.css
index e47350565..a605df285 100644
--- a/public/css/site-2020Styling.css
+++ b/public/css/site-2020Styling.css
@@ -194,6 +194,16 @@ 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 b3b4b21ce..ec72ae1b9 100644
--- a/public/scss/site-2020Styling.scss
+++ b/public/scss/site-2020Styling.scss
@@ -188,6 +188,17 @@
     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/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
index f177b6cf7..50b353151 100644
--- a/src/constants/progress-bar-mapper.js
+++ b/src/constants/progress-bar-mapper.js
@@ -1,95 +1,28 @@
-export const pageProgressMapper = {
-    //Combine progress bar slide percent and button steps
-    vehicle: {
-        percent: 7,
-        step: 1,
-    },
-    "vehicle-damage": {
-        percent: 10,
-        step: 1,
-    },
-    estimate: {
-        percent: 14,
-        step: 1,
-    },
-    "service-zip": {
-        percent: 18,
-        step: 1,
-    },
-    "vin-lookup": {
-        percent: 18,
-        step: 1,
-    },
-    "license-plate-lookup": {
-        percent: 18,
-        step: 1,
-    },
-    "address-lookup": {
-        percent: 18,
-        step: 1,
-    },
-    "address-vehicles": {
-        percent: 25,
-        step: 1,
-    },
-    "part-questions": {
-        percent: 30,
-        step: 1,
-    },
-    "molding-questions": {
-        percent: 30,
-        step: 1,
-    },
-    "vehicle-parts": {
-        percent: 30,
-        step: 1,
-    },
-    "capability-questions": {
-        percent: 30,
-        step: 1,
-    },
-    quote: {
-        percent: 39, //Must be 39
-        step: 2,
-    },
-    "insurance-company": {
-        percent: 52,
-        step: 2,
-    },
-    "service-location": {
-        percent: 60,
-        step: 2,
-    },
-    schedule: {
-        percent: 70.5, //Must be 70.5
-        step: 3,
-    },
-    "mobile-details": {
-        percent: 76,
-        step: 3,
-    },
-    "customer-details": {
-        percent: 84,
-        step: 3,
-    },
-    "payment-method": {
-        percent: 92, //Must be 92
-        step: 3,
-    },
-    payment: {
-        percent: 96,
-        step: 4,
-    },
-    confirmation: {
-        percent: 100,
-        step: 4,
-    },
+const pagePercentageMapper = {
+    vehicle: 4,
+    "vehicle-damage": 16,
+    estimate: 28,
+    "service-zip": 32,
+    "vin-lookup": 32,
+    "license-plate-lookup": 32,
+    "address-lookup": 32,
+    "address-vehicles": 36,
+    "part-questions": 40,
+    "molding-questions": 40,
+    "vehicle-parts": 40,
+    "capability-questions": 40,
+    quote: 48,
+    "insurance-company": 52,
+    // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
+    // "service-location": 60,
+    schedule: 64,
+    "mobile-details": 76,
+    "customer-details": 84,
+    "payment-method": 92,
+    payment: 96,
+    confirmation: 100,
 };
 
 export const getProgressBarPercentage = (page) => {
-    return pageProgressMapper[page]?.percent || 0;
-};
-
-export const getProgressBarStep = (page) => {
-    return pageProgressMapper[page]?.step || 1;
+    return pagePercentageMapper[page] || 0;
 };
diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 82fbf424c..2eaf204ad 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"
+            class="question-text d-flex"
             :class="{ 'small-question-text': isSmallQuestionText }">
             <span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']">
                 {{ questionText }}
@@ -83,7 +83,10 @@ 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">
+        <div
+            id="form-test-error"
+            class="row form-test-error"
+            :class="isErrorCentered ? 'text-center' : ''">
             <error-message
                 role="comment"
                 aria-atomic="true"
@@ -258,6 +261,12 @@ 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/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue
index bb55e61ec..a2ee0b3c1 100644
--- a/src/digital-components/dropdown-question/dropdown-question.vue
+++ b/src/digital-components/dropdown-question/dropdown-question.vue
@@ -152,7 +152,6 @@ export default {
         border: 1px solid $gray-500;
         border-radius: 0.5rem;
         min-height: 3rem;
-        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
         @include media-breakpoint-up(md) {
             min-height: 3.5rem;
         }
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 e05ff408a..41f9d2d8a 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,18 +66,19 @@ export default {
 .btn {
     &.btn-primary {
         position: relative;
-        background: $red;
+        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         border: none;
+        border-radius: $border-radius-lg;
         color: $white;
         justify-content: center;
         font-weight: 500;
         @media (hover: hover) {
-            background: $red;
+            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         }
         &:focus {
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -85,26 +86,27 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             color: $white;
-            background: $red;
+            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
         }
         &:disabled {
             background: $gray-200 !important;
-            background: $red !important;
+            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !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: $red;
+            background: $blue-700;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             pointer-events: none;
         }
         &.delay {
@@ -115,7 +117,8 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $red;
+        border: 1px solid $blue;
+        border-radius: $border-radius-lg;
         color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
@@ -130,7 +133,7 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             color: $white;
             @include blue-gradient;
         }
@@ -139,12 +142,14 @@ export default {
             color: $gray-550 !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $red;
+            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/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 9aa41e64e..7df4436f1 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -337,7 +337,6 @@ export default {
         border-radius: 0.5rem;
         min-height: 3rem;
         padding: 0.75rem 1rem;
-        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
         @include media-breakpoint-up(md) {
             padding: 1rem;
             min-height: 3.5rem;
diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 17e73c03e..fb717d283 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -1316,11 +1316,11 @@ export default {
         &:after {
             content: "";
             transition: all 0.5s ease;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
             background-repeat: no-repeat;
             background-position: right center;
-            width: 24px;
-            height: 24px;
+            width: 16px;
+            height: 9px;
             display: inline-flex;
             position: relative;
             right: 0.75rem;
diff --git a/src/fmg-components/funnel-footer/funnel-footer.vue b/src/fmg-components/funnel-footer/funnel-footer.vue
index a195c446b..ca8be5bf0 100644
--- a/src/fmg-components/funnel-footer/funnel-footer.vue
+++ b/src/fmg-components/funnel-footer/funnel-footer.vue
@@ -1,5 +1,15 @@
 <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"
@@ -54,6 +64,13 @@ 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;
@@ -76,16 +93,12 @@ export default {
         :deep(a) {
             text-decoration: none;
             &.new-window-link {
-                font-family: Urbanist, Arial, Helvetica, sans-serif;
                 margin: 0 0.75rem;
                 color: $gray-600;
-                font-weight: 400;
             }
             &.navigation-link {
-                font-family: Urbanist, Arial, Helvetica, sans-serif;
                 margin: 0 0.75rem;
                 color: $gray-600;
-                font-weight: 400;
             }
         }
 
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index bad77ede5..f7d55b354 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -1,16 +1,8 @@
 <template>
     <div class="funnel-header" v-if="imageSrc">
-        <div class="d-flex w-100">
-            <progress-bar :page="$route.name" />
-        </div>
-        <div class="container d-flex">
-            <div class="site-logo">
-                <a href="https://safelite.com">
-                    <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-                </a>
-            </div>
-            <div class="button-container webchat">
-                <span class="webchat d-flex">
+        <div class="d-flex justify-content-between align-items-center">
+            <div class="button-container">
+                <span class="webchat">
                     <button
                         v-show="shouldShowWebchatButton"
                         v-on:click="webchatClicked"
@@ -18,9 +10,17 @@
                         class="chat-button"></button>
                 </span>
             </div>
-            <div class="button-container">
-                <menuModal />
+            <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">
@@ -197,39 +197,23 @@ 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: 0 0 1rem 0;
+    padding: 1rem 0;
 
     .button-container {
-        &.webchat {
-            margin-right: 1rem;
-            @include media-breakpoint-up(md) {
-                margin-right: 2rem;
-            }
-        }
-    }
-
-    .site-logo {
-        margin-right: auto;
+        width: 1.5rem;
+        height: 1.625rem;
     }
 
     .logo-image {
-        width: 100px;
-        height: auto;
+        width: auto;
+        height: 1.1875rem;
         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 fdb458af3..8f68ab6e9 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -6,13 +6,9 @@
             :class="[isActive ? 'active' : '']"
             @click="toggleModal"
             aria-label="Hamburger Menu (modal window)">
-            <span v-if="isActive">Close</span>
-            <span v-else>Step {{ currentStepNumber }} of 4</span>
-            <div class="bars ms-2">
-                <div class="bar1"></div>
-                <div class="bar2"></div>
-                <div class="bar3"></div>
-            </div>
+            <div class="bar1"></div>
+            <div class="bar2"></div>
+            <div class="bar3"></div>
         </button>
     </div>
     <div
@@ -22,45 +18,47 @@
         tabindex="-1"
         aria-labelledby="footerModalLabel"
         aria-hidden="true"
-        v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }"
-        @click.self="closeModal">
+        v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
         <div class="modal-dialog modal-fullscreen">
             <div class="modal-content">
                 <div class="modal-header visually-hidden">
                     <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
                 </div>
                 <div class="modal-body d-flex flex-column">
-                    <div class="step-grid">
-                        <div class="bar-container">
-                            <progress-bar class="bar-dots" :page="$route.name" :vertical="true" />
-                            <span class="dot1"></span>
-                            <span class="dot2"></span>
-                            <span class="dot3"></span>
-                            <span class="dot4"></span>
-                        </div>
-                        <div class="d-flex flex-column justify-content-between">
-                            <div class="step-containers">
-                                <span class="step-number">Step 1 of 4</span>
-                                <br />
-                                <span class="step-name">Vehicle</span>
-                            </div>
-                            <div class="step-containers">
-                                <span class="step-number">Step 2 of 4</span>
-                                <br />
-                                <span class="step-name">Quote</span>
-                            </div>
-                            <div class="step-containers">
-                                <span class="step-number">Step 3 of 4</span>
-                                <br />
-                                <span class="step-name">Schedule</span>
-                            </div>
-                            <div class="step-containers">
-                                <span class="step-number">Step 4 of 4</span>
-                                <br />
-                                <span class="step-name">Review</span>
-                            </div>
-                        </div>
-                    </div>
+                    <textLink
+                        linkType="newWindowLink"
+                        text="Terms of service"
+                        href="//www.safelite.com/terms-of-service"
+                        target="_blank" />
+                    <textLink
+                        linkType="newWindowLink"
+                        text="Your privacy choices"
+                        href="//www.safelite.com/privacy-center"
+                        target="_blank">
+                        <template v-slot:after-text>
+                            <img
+                                class="ccpa-icon"
+                                src="~@/assets/img/icons/ccpa-icon.svg"
+                                alt="Your privacy choices" />
+                        </template>
+                    </textLink>
+                    <textLink
+                        linkType="navigation"
+                        text="Cookie preferences"
+                        href="javascript:OneTrust.ToggleInfoDisplay();" />
+                    <textLink
+                        linkType="newWindowLink"
+                        text="Warranty"
+                        href="//www.safelite.com/national-lifetime-warranty"
+                        target="_blank" />
+                    <textLink
+                        linkType="newWindowLink"
+                        text="Notice at collection"
+                        href="https://www.safelite.com/ccpa-privacy-policy"
+                        target="_blank" />
+                </div>
+                <div class="modal-footer d-flex justify-content-start">
+                    &copy; {{ new Date().getFullYear() }} Safelite Group
                 </div>
             </div>
         </div>
@@ -68,9 +66,8 @@
 </template>
 
 <script>
+import textLink from "@/ux-components/text-link/text-link";
 import { Modal } from "bootstrap";
-import { getProgressBarStep } from "@/constants/progress-bar-mapper";
-import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
 import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
@@ -103,13 +100,8 @@ export default {
             self.isActive = false;
         },
     },
-    computed: {
-        currentStepNumber() {
-            return getProgressBarStep(this.$route.name);
-        },
-    },
     components: {
-        progressBar,
+        textLink,
     },
 };
 </script>
@@ -119,92 +111,49 @@ export default {
     button {
         border: none;
         &.menu-button {
-            width: auto;
-            height: auto;
-            border-radius: 1.5rem;
-            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+            width: 1.5rem;
+            height: 1.5rem;
+            border-radius: 50%;
+            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
             background-color: $white;
             position: relative;
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
-            padding: 0.15rem 0.5rem; //Required to prevent 'squish' on iPhone
+            padding: 0; //Required to prevent 'squish' on iPhone
             z-index: 1050;
-            @include media-breakpoint-up(md) {
-                padding: 0.25rem 1rem;
+            .bar1,
+            .bar2,
+            .bar3 {
+                width: 14px;
+                height: 2px;
+                background-color: $blue;
+                margin: 1px 0;
+                transition: 0.25s;
             }
             &.active .bar1 {
-                transform: rotate(-45deg) translate(-3px, 8px);
+                transform: rotate(-45deg) translate(-3px, 3px);
             }
             &.active .bar2 {
                 opacity: 0;
             }
             &.active .bar3 {
-                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;
-                .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;
-                }
+                transform: rotate(45deg) translate(-3px, -3px);
             }
         }
     }
 }
 .modal {
     &.menu-modal {
-        .modal-dialog {
-            position: fixed;
-            bottom: 0;
-            right: 0;
-            height: calc(100% - 68px);
-            width: 100vw; // or set a max-width if you want a drawer effect
-            max-width: 294px;
-            margin: 0;
-            transform: translateX(100%);
-            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            z-index: 1050;
-            @include media-breakpoint-up(md) {
-                height: calc(100% - 102px);
-                top: 102px;
-            }
-        }
-        &.show .modal-dialog {
-            transform: translateX(0);
-        }
-        background-color: rgba(0, 0, 0, 0.5);
-        height: calc(100% - 68px);
-        top: 68px;
+        //left: auto;
+        height: calc(100% - 56px);
+        top: 56px;
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
-        @include media-breakpoint-up(md) {
-            height: calc(100% - 102px);
-            top: 102px;
-        }
         .modal-body {
             padding: 2rem;
-            display: flex;
-            align-items: center;
             .ccpa-icon {
                 width: 2.0625rem;
                 height: 1rem;
@@ -213,48 +162,6 @@ export default {
             :deep(.navigation-link) {
                 margin-bottom: 1.5rem;
             }
-            .step-grid {
-                display: grid;
-                max-width: 140px;
-                grid-template-columns: 1fr 1fr;
-                .step-containers {
-                    line-height: 1;
-                }
-                .bar-container {
-                    width: 24px;
-                    position: relative;
-                    .dot1,
-                    .dot2,
-                    .dot3,
-                    .dot4 {
-                        position: absolute;
-                        width: 22px;
-                        height: 22px;
-                        background-color: $white;
-                        border-radius: 50rem;
-                        border: 1px solid $gray;
-                        left: 1px;
-                    }
-                    .dot1 {
-                        top: 1px;
-                    }
-                    .dot2 {
-                        top: 114px;
-                    }
-                    .dot3 {
-                        top: 227px;
-                    }
-                    .dot4 {
-                        top: 332px;
-                    }
-                }
-                .step-number {
-                    font-size: 0.75rem;
-                }
-                .step-name {
-                    font-size: 1.25rem;
-                }
-            }
         }
         .modal-fullscreen {
             width: 100vw;
@@ -283,30 +190,23 @@ export default {
                     align-items: center;
                     padding: 0; //Required to prevent 'squish' on iPhone
                     z-index: 1056;
-                    .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);
-                        }
+                    .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);
                     }
                 }
             }
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 0f6a0bdc7..f8b654e7f 100644
--- a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
+++ b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="barClass">
+    <div class="progress-bar-outer">
         <div class="progress-bar-inner" :style="progressStyle"></div>
     </div>
 </template>
@@ -18,10 +18,6 @@ export default {
             type: String,
             required: true,
         },
-        vertical: {
-            type: Boolean,
-            default: false,
-        },
     },
     data() {
         return {
@@ -49,20 +45,9 @@ export default {
     },
     computed: {
         progressStyle() {
-            if (this.vertical) {
-                return {
-                    height: this.displayedProgress + "%",
-                    width: "100%",
-                };
-            } else {
-                return {
-                    width: this.displayedProgress + "%",
-                    height: "100%",
-                };
-            }
-        },
-        barClass() {
-            return this.vertical ? "progress-bar-outer-vertical" : "progress-bar-outer";
+            return {
+                width: this.displayedProgress + "%",
+            };
         },
     },
 };
@@ -70,43 +55,50 @@ export default {
 <style lang="scss">
 .progress-bar-outer {
     background: $blue-100;
-    height: 5px;
+    height: 10px;
     position: relative;
-    border-radius: 0;
+    border-radius: 10px;
     width: 100%;
-    margin-top: 0;
+    margin-top: 1rem;
     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);
+        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
         will-change: width;
-        height: 100%;
-        background-color: $red;
+        height: 10px;
+        background-color: $blue;
         position: absolute;
         top: 0;
         left: 0;
-        border-radius: 0;
+        border-radius: 10px;
     }
-}
 
-.progress-bar-outer-vertical {
-    background: $blue-100;
-    width: 24px;
-    height: 356px;
-    position: relative;
-    border-radius: 0;
-    margin-top: 0;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-    overflow: hidden;
-    border-radius: 50rem;
-    .progress-bar-inner {
-        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        will-change: height !important;
+    progress {
+        height: 10px;
         width: 100%;
-        background-color: $red;
-        position: absolute;
-        left: 0;
-        top: 0;
-        border-radius: 50rem;
+
+        /* Firefox */
+        appearance: none;
+        background-color: $blue-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 b4bfb7276..f42a90972 100644
--- a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="funnel-sub-header">
-        <div class="d-flex align-items-center overflow-hidden">
-            <h5 class="fw-normal mb-0" :class="headerColor">
+        <div
+            class="d-flex align-items-center container-fluid overflow-hidden"
+            :class="[textAlignment]">
+            <h5 class="text-center fw-normal mb-0" :class="headerColor">
                 <span>
                     {{ text }}
                 </span>
@@ -11,9 +13,13 @@
                     @click-event="clickEvent" />
             </h5>
         </div>
-        <div v-if="subText" class="d-flex align-self-center overflow-hidden mt-1">
-            <p class="small fw-normal sub-text">
-                <span v-html="boldedSubHeaderText"></span>
+        <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">
+                <span>
+                    {{ subText }}
+                </span>
             </p>
         </div>
     </div>
@@ -31,17 +37,21 @@ export default {
             type: String,
             default: "dark-header",
         },
+        leftAlignHeader: {
+            type: Boolean,
+            default: false,
+        },
     },
     components: {
         buttonBack,
     },
     computed: {
-        boldedSubHeaderText() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
-        },
         text() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
+        textAlignment() {
+            return this.leftAlignHeader ? "justify-content-start" : "justify-content-center";
+        },
         subText() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
         },
@@ -58,12 +68,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.bolded-words) {
-    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
-}
 h5 {
     line-height: 32px;
-    font-size: 1.25rem;
 
     button {
         color: inherit;
diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index fca4b91f3..2c4d71803 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -1,15 +1,31 @@
 <template>
     <div :class="`questions-page`">
         <loadingModal ref="loadingModal" />
-        <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">
+        <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">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7 question-chain-wrapper">
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <alert
+                        ref="alertFewMoreQuestions"
+                        cmsWidgetName="alertWidget"
+                        class="my-5"
+                        alertClass="alert-warning"
+                        :manualHeadline="alertFewMoreQuestionsHeader"
+                        :manualCopy="alertFewMoreQuestionsCopy"
+                        v-bind:isDismissible="false" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 question-chain-wrapper">
                     <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                         <questionChain
                             ref="questionChain"
@@ -38,6 +54,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import alert from "@/ux-components/alert/alert";
 import questionChain from "@/digital-components/question-chain/question-chain";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
@@ -79,6 +96,7 @@ export default {
     },
     components: {
         funnelHeader,
+        alert,
         questionChain,
         funnelSubHeader,
         navbar,
@@ -90,7 +108,7 @@ export default {
 <style lang="scss">
 .questions-page {
     .question-text {
-        margin-bottom: 1.5rem;
+        margin-bottom: 0.5rem;
 
         span {
             text-align: left;
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
index 4858157f6..ef4677371 100644
--- a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@@ -118,14 +118,13 @@ export default {
     margin-bottom: 1.5rem;
     order: 2;
     text-align: center;
-    background: $gray-100;
+    background: $blue-100;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     height: 3rem;
     border-radius: 0.5rem;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     &.progress-saved {
         background: none;
@@ -136,13 +135,14 @@ export default {
         position: relative;
         color: $blue;
         border: none;
-        font-family: UrbanistSemibold;
+        font-weight: 900;
         font-size: 0.875rem;
-        text-align: left;
+        text-align: center;
         display: inline-block;
         width: auto;
         height: auto;
-        text-decoration: none;
+        text-decoration: underline;
+        text-underline-offset: 0.25rem;
         line-height: 1rem;
         padding: 1rem;
         margin: 0 auto;
@@ -154,6 +154,7 @@ export default {
 
         &.btn {
             &.btn-secondary {
+                font-weight: 900;
                 border: none;
                 &:hover,
                 &:active,
@@ -182,17 +183,6 @@ export default {
             // fixes flicker while transitioning between states
             transition: background 0s 0s ease-in-out;
         }
-
-        &.open-save-progress-button {
-            span {
-                color: $gray-600;
-                font-family: UrbanistRegular;
-                .highlighted-words {
-                    font-family: UrbanistSemibold;
-                    color: $blue;
-                }
-            }
-        }
     }
 
     .modal.modal-component .modal-dialog .modal-content {
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 8f077f75b..91aed6f1a 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -5,14 +5,15 @@
         ref="theForm"
         v-slot="{ meta }"
         autocomplete="off">
-        <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"
-                        ref="funnelSubHeader"
-                        class="mb-7" />
+        <div class="container-fluid page-container-grouped-styles" id="address-lookup">
+            <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">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
 
                     <customerQuestions
                         ref="customerQuestions"
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 9b0cb21ca..f473aa50b 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -1,9 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <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">
+        <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">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
                     <textboxQuestion
                         isRequired
@@ -43,6 +47,8 @@
                         cmsWidgetName="TextMeQuestionWidget"
                         v-model="isSmsOptIn" />
 
+                    <techNotes v-model="techNotes" :textAreaLabelCopy="textAreaLabelCopy" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -68,6 +74,7 @@ import textboxQuestion from "@/digital-components/textbox-question/textbox-quest
 import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
 import textBlock from "@/digital-components/text-block/text-block";
 import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
+import techNotes from "@/layouts/customer-details/tech-notes/tech-notes";
 //Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -212,6 +219,7 @@ export default {
         textBlock,
         phoneNumberQuestion,
         checkboxQuestion,
+        techNotes,
     },
 };
 </script>
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index 065f09449..fe32d7b98 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -1,16 +1,17 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container page-container-grouped-styles estimate">
-            <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+        <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">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
                         <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
-                        <div v-html="this.VinLookupQuestionBodyText2"></div>
-                        <div
-                            class="select-an-option"
-                            v-html="this.VinLookupQuestionFooterText"></div>
                         <buttonQuestion
                             cmsWidgetName="VinLookupMethod"
                             :answers="answersFromCms"
@@ -28,8 +29,6 @@
                         :isForwardActionDisabled="!meta.valid"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
-
-                    <div class="text-center" v-html="this.VinLookupQuestionFooterText2"></div>
                 </div>
             </div>
         </div>
@@ -40,6 +39,7 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
@@ -229,18 +229,10 @@ export default {
         VinLookupQuestionText() {
             return this.getCmsContent("VinLookupQuestion", "BodyText");
         },
-        VinLookupQuestionBodyText2() {
-            return this.getCmsContent("VinLookupQuestion", "BodyText2");
-        },
-        VinLookupQuestionFooterText() {
-            return this.getCmsContent("VinLookupQuestion", "FooterText");
-        },
-        VinLookupQuestionFooterText2() {
-            return this.getCmsContent("VinLookupQuestion", "FooterText2");
-        },
     },
     components: {
         funnelHeader,
+        funnelSubHeader,
         navbar,
         buttonQuestion,
         Form,
@@ -251,12 +243,14 @@ export default {
 
 <style lang="scss">
 .vinlookupquestion p {
-    font-size: 1.25rem;
+    margin-bottom: 0;
 }
-
-.select-an-option {
-    font-family: UrbanistSemibold;
-    font-weight: 600;
+.vinlookupquestion strong {
+    font-weight: 500;
+    color: $black;
+}
+.vinlookupquestion p:nth-child(2) {
+    font-size: 0.875rem;
     margin-bottom: 1rem;
 }
 </style>
diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue
index ba0f1f2e6..7efde9a68 100644
--- a/src/layouts/insurance-company/insurance-company.vue
+++ b/src/layouts/insurance-company/insurance-company.vue
@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <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">
+        <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">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
 
                     <div v-if="originalList.length > 0">
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index f1e942028..441ef36d3 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,9 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <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">
+        <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">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <textboxQuestion
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
index 9d93c2efe..406e9055a 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
@@ -112,7 +112,6 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span {
         &.small {
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 06f8871fe..77ae4b54b 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal notFullScreen ref="loadingModal" />
-        <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">
+        <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">
                     <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <hr class="my-0" />
@@ -53,7 +57,7 @@
 
                     <div
                         v-if="isRecalibrationOnOrder && shouldHideRecalibration"
-                        class="questions-about-service mt-5">
+                        class="questions-about-service my-5">
                         <textBlock
                             cmsWidgetName="QuestionsAboutYourServiceWidget"
                             justifyText="left"
@@ -63,7 +67,7 @@
                         <div class="d-flex flex-row checkbox-group">
                             <checkboxQuestion
                                 cmsWidgetName="RecalConfirmWidget"
-                                class="mb-3"
+                                class="mb-5"
                                 isRequired="true"
                                 v-model="isRecalAckOptIn"
                                 validationRules="recal-ack-required"
@@ -78,6 +82,13 @@
                         :isInsurance="isInsurance"
                         validationRules="payment-method-required" />
 
+                    <alert
+                        v-if="showHavePaymentReadyAlert"
+                        :isDismissible="false"
+                        alertClass="alert-info"
+                        cmsWidgetName="NoPiaDisclaimerWidget"
+                        shouldScrollToOnMount="false" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -759,6 +770,11 @@ export default {
 
             return false;
         },
+        showHavePaymentReadyAlert() {
+            return (
+                !this.showPaymentMethodQuestions && !this.forwardClicked && this.totalAmountDue > 0
+            );
+        },
         totalAmountDue() {
             return getAmountDue(this.lineItems);
         },
@@ -891,12 +907,6 @@ export default {
     margin: 0;
 }
 .payment-method {
-    :deep(.almost-done) {
-        font-family: UrbanistSemibold;
-    }
-    :deep(h5) {
-        margin-bottom: 1rem;
-    }
     .recal-modal {
         :deep(.modal-body) {
             display: flex;
diff --git a/src/layouts/payment-method/review-dropdown/review-dropdown.vue b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
index 3aec6383b..e6088bb92 100644
--- a/src/layouts/payment-method/review-dropdown/review-dropdown.vue
+++ b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
@@ -157,11 +157,11 @@ export default {
     &:after {
         content: "";
         transition: all 0.5s ease;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
         background-repeat: no-repeat;
         background-position: right center;
-        width: 24px;
-        height: 24px;
+        width: 16px;
+        height: 9px;
         display: inline-flex;
         position: relative;
         right: 0.75rem;
diff --git a/src/layouts/payment/payment.spec.js b/src/layouts/payment/payment.spec.js
index 18b082de4..05d8bb611 100644
--- a/src/layouts/payment/payment.spec.js
+++ b/src/layouts/payment/payment.spec.js
@@ -577,7 +577,7 @@ describe("payment.vue", () => {
             // Arrange
             const wrapper = setupMocks({});
 
-            const outerDiv = wrapper.find(".container");
+            const outerDiv = wrapper.find(".container-fluid");
             const clickFn = jest.fn();
             outerDiv.element.addEventListener("click", clickFn);
 
diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index b11c5a9af..3a9fc4cd0 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -1,10 +1,15 @@
 <template>
     <Form>
         <loadingModal notFullScreen ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container">
-            <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+        <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">
                     <div>
                         <alert
                             ref="piaCCErrorAlert"
diff --git a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
index 29f8797db..e9f631972 100644
--- a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -173,8 +173,9 @@ export default {
             max-width: 26rem;
         }
     }
-    & .alert-heading {
-        font-size: 0.875rem;
+
+    #afterpay-learnmore {
+        white-space: nowrap;
     }
 }
 </style>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 8435a7fb9..4e5b6b51b 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -1,15 +1,17 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container quote position-relative">
-            <div class="row justify-content-center">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
+        <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>
             <div class="row justify-content-center">
-                <div class="col-md-6">
+                <div class="col-md-6 col-xl-4 mt-4">
+                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
                     <cashOrInsuranceQuestion
                         ref="cashOrInsurance"
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
@@ -67,7 +69,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-8 col-xl-6">
+                <div class="col-md-6 col-xl-4">
                     <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
                     <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
@@ -88,8 +90,9 @@
 
                     <textBlock
                         cmsWidgetName="quoteDisclaimer"
+                        justifyText="center"
                         typeStyle="caption"
-                        class="mb-5 quote-disclaimer text-left text-md-center" />
+                        class="mb-5 quote-disclaimer" />
                 </div>
             </div>
 
@@ -898,31 +901,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// Unique to quote page for 2.0/Heritage parity
-.quote {
-    padding-bottom: 2rem;
-    :deep(.nav-bar) {
-        position: initial;
-        button {
-            width: 100%;
-            justify-content: center;
-        }
-        a.navigation-link {
-            position: absolute;
-            left: 1rem;
-            bottom: 1rem;
-            @include media-breakpoint-up(lg) {
-                left: 6rem;
-            }
-        }
-        .col-auto {
-            width: -webkit-fill-available;
-        }
-        .col-auto {
-            width: -moz-available;
-        }
-    }
-}
 .quote-page.show-save-progress-popup .row.justify-content-center {
     display: none;
 
@@ -940,11 +918,6 @@ 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/return-user/return-user.vue b/src/layouts/return-user/return-user.vue
index 86cde49c8..5b397ea76 100644
--- a/src/layouts/return-user/return-user.vue
+++ b/src/layouts/return-user/return-user.vue
@@ -2,12 +2,15 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="return-user small-question-text">
             <loadingModal ref="loadingModal" />
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-            <div class="container page-container-grouped-styles">
+            <div class="container-fluid page-container-grouped-styles">
                 <div class="row justify-content-center">
-                    <div class="col-12 col-md-10 col-lg-8 col-xl-7 return-user-spacing">
+                    <div class="col-md-6">
+                        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                    </div>
+                </div>
+                <div class="row justify-content-center return-user-spacing">
+                    <div class="col-md-6 col-xl-4 mt-4">
                         <funnelSubHeader
-                            class="justify-content-center d-flex"
                             ref="funnelSubHeader"
                             cmsWidgetName="FunnelSubHeaderWidget" />
                     </div>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 94cc6600a..56c18da12 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <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">
+        <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">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
                     <serviceZipModalQuestion
                         editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue
index 74286c550..44ac0d9e8 100644
--- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue
+++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue
@@ -94,7 +94,6 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span.premium-appointment-price {
         position: absolute;
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 9fd2cc8ce..329b99840 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <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">
+        <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">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <serviceZipModalQuestion
@@ -65,8 +69,8 @@
                         alertClass="alert-success" />
                 </div>
             </div>
-            <div class="row appointment-type">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+            <div class="row justify-content-center appointment-type">
+                <div class="col-md-6">
                     <appointmentTypeQuestion
                         v-model="selectedAppointmentType"
                         v-show="isAppointmentTypeDisplayed"
@@ -83,8 +87,21 @@
                         labelBold="true" />
                 </div>
             </div>
-            <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <button-question
+                        v-if="selectedAppointmentType == appointmentTypeStrings.IN_SHOP"
+                        class="shop-question-button"
+                        ref="buttonQuestion"
+                        :answers="selectedShopAnswer"
+                        :modelValue="selectedProvider?.providerNumber"
+                        :isMultiSelect="false"
+                        :readonly="true"
+                        :questionText="questionText"
+                        buttonTypeString="shopListButton"
+                        :buttonTypeObject="shopListButton"
+                        groupName="chooseShop"
+                        textPosition="text-start" />
                     <div class="text-center">
                         <textBlock
                             v-if="mobileFeeApplies && isMobileSelected"
@@ -133,6 +150,7 @@ import serviceZipModalQuestion from "@/layouts/service-location/service-zip-moda
 import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
 import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
 import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
+import buttonQuestion from "@/digital-components/button-question/button-question.vue";
 import shopListButton from "@/layouts/service-location/shop-question/shop-list-button/shop-list-button";
 import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
@@ -895,6 +913,7 @@ export default {
         loadingModal,
         contentGroupModal,
         shopQuestionPopup,
+        buttonQuestion,
         textBlock,
     },
 };
@@ -907,6 +926,10 @@ 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 c8ba6d57b..5e7aa73e4 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-left">
+    <div class="text-center">
         <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 ab9370dae..20accf43b 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 rounded-pill list-button d-flex flex-column w-100 mb-2"
+            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
             v-model="selectedValue">
             <div
                 :aria-label="buttonLabel"
-                class="button-content list-button-content rounded-pill d-flex flex-column justify-content-center py-3 px-4 p-md-4">
+                class="button-content list-button-content 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,10 +144,10 @@ export default {
     position: relative;
     background: $white;
     transition: all 150ms linear;
+    border-radius: $border-radius-lg;
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span {
         &.small {
@@ -163,7 +163,6 @@ export default {
         display: flex;
         align-items: center;
         line-height: 1.5rem;
-        justify-content: center;
 
         .button-label-copy {
             font-weight: 500;
@@ -233,7 +232,7 @@ export default {
     }
 
     .row-two {
-        text-align: center;
+        text-align: left;
     }
 }
 </style>
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 79bda1ef7..7191a1f07 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-center"
+                textPosition="text-start"
                 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 273d87604..df1cb4e65 100644
--- a/src/layouts/service-zip/service-zip.vue
+++ b/src/layouts/service-zip/service-zip.vue
@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container">
-            <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+        <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">
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
                         <textboxQuestion
@@ -355,6 +359,9 @@ export default {
 </script>
 
 <style lang="scss">
+.vinlookupquestion p {
+    margin-bottom: 0;
+}
 .vinlookupquestion strong {
     font-weight: 500;
     color: $black;
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 2e520763f..7096bd08c 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <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="mb-7" />
+        <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">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                     <alert
                         ref="vehicleChangeAlert"
                         v-if="shouldDisplayVehicleChangeAlert"
@@ -14,7 +18,7 @@
                         :isDismissible="false" />
                 </div>
             </div>
-            <div class="row">
+            <div class="row justify-content-center">
                 <div class="col-md-6">
                     <damageLocationQuestion
                         ref="damageLocation"
@@ -23,8 +27,8 @@
                         groupName="DamageLocationQuestion" />
                 </div>
             </div>
-            <div class="row">
-                <div class="col-md-6">
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <windshieldOptions
                         class="windshield-options"
                         ref="windshieldOptions"
@@ -57,8 +61,8 @@
                         validationRules="replace-options-required" />
                 </div>
             </div>
-            <div class="row">
-                <div class="col-md-6">
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         :isForwardActionDisabled="!isContinueEnabled"
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index efef1bb6c..fcea707eb 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -2,18 +2,30 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
-            <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
-                            ref="funnelSubHeader"
-                            cmsWidgetName="FunnelSubHeaderWidget"
-                            class="mb-7" />
+            <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">
-                    <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                <div class="row justify-content-center">
+                    <div class="col-md-6 col-xl-4 mt-4">
+                        <funnelSubHeader
+                            ref="funnelSubHeader"
+                            cmsWidgetName="FunnelSubHeaderWidget" />
+                    </div>
+                </div>
+                <div class="row justify-content-center">
+                    <div class="col-md-6 col-xl-4 my-5">
+                        <alert
+                            class="rounded border-0 shadow-sm"
+                            alertClass="alert-warning"
+                            cmsWidgetName="AlertWidget"
+                            :isDismissible="false" />
+                    </div>
+                </div>
+                <div class="row justify-content-center">
+                    <div class="col-md-6 col-xl-4">
                         <div v-for="(item, i) in PartsOrQuestions" :key="i">
                             <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
                             <hr v-if="i > 0" />
@@ -51,6 +63,7 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
+import alert from "@/ux-components/alert/alert";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 // Supporting Files
@@ -231,6 +244,7 @@ export default {
         funnelHeader,
         funnelSubHeader,
         navbar,
+        alert,
         loadingModal,
         saveProgressModalQuestion,
     },
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 3bc2d8565..0820c0c5a 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -1,9 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container">
-            <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+        <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">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
                     <vehicleQuestion
                         ref="vehicleYearQuestion"
diff --git a/src/layouts/vin-lookup/vin-information/vin-information.vue b/src/layouts/vin-lookup/vin-information/vin-information.vue
index f08196135..a0eaf9536 100644
--- a/src/layouts/vin-lookup/vin-information/vin-information.vue
+++ b/src/layouts/vin-lookup/vin-information/vin-information.vue
@@ -60,12 +60,12 @@ export default {
         &:after {
             content: "";
             transition: all 0.5s ease;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
             background-repeat: no-repeat;
             background-position: right center;
             margin-left: 0.5rem;
-            width: 24px;
-            height: 24px;
+            width: 16px;
+            height: 9px;
             display: inline-flex;
         }
         &.active:after {
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index b63582c96..23020cfd6 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,10 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <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">
+        <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">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                     <textboxQuestion
                         class="mb-2 mt-5"
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 3051ed00a..d1b534be4 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: $white;
-            background: $red;
+            color: $gray-600;
+            background: $gray-200;
             cursor: pointer;
             pointer-events: all;
             font-weight: $font-weight-normal;
         }
         &.btn.btn-primary:hover,
         &.btn.btn-primary:focus {
-            background: $red;
+            background: $gray-200;
             box-shadow: none;
         }
         &.btn.btn-primary:focus-visible {
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $gray-700;
         }
     }
 }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index c619196fa..3aa8580cb 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -8,10 +8,13 @@ body {
         display: flex;
         flex-direction: column;
         min-height: 100dvh;
-    }
-    .container {
-        @include media-breakpoint-up(xl) {
-            max-width: 1020px;
+        form {
+            > .container-fluid {
+                margin-bottom: -1rem;
+                @media screen and (min-width: 1090px) {
+                    margin-bottom: -5rem;
+                }
+            }
         }
     }
     .container-fluid {
@@ -87,7 +90,7 @@ body {
     }
 }
 .modal-open:not(.prevent-modal-scroll) {
-    .container {
+    .container-fluid {
         &.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 f212fa072..07329fc71 100644
--- a/src/styles/shared-input-button-styles.scss
+++ b/src/styles/shared-input-button-styles.scss
@@ -1,22 +1,3 @@
-.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;
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index bec02081f..22e17e3b7 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -204,7 +204,6 @@ $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 d83758482..982e7bb1b 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,14 +1,14 @@
 <template>
     <button
         :aria-disabled="isDisabled"
-        class="btn rounded-pill d-flex align-items-center justify-content-center py-3 px-6 delay"
+        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
         :class="[
             isPrimary ? 'btn-primary' : 'btn-secondary',
             isFloat ? 'float-end' : '',
             isLoaderDisplayed && !suppressLoader ? 'has-loader' : '',
         ]"
         @click="clicked">
-        <span class="m-0" v-html="buttonText"></span>
+        <span class="m-0">{{ this.buttonText }}</span>
         <loader
             class="ms-2"
             v-if="isLoaderDisplayed && !suppressLoader"
@@ -63,23 +63,21 @@ export default {
 
 <style lang="scss">
 .btn {
-    &:first-child:active {
-        background-color: $red;
-    }
     &.btn-primary {
         position: relative;
-        background: $red;
+        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         border: none;
+        border-radius: $border-radius-lg;
         color: $white;
         justify-content: center;
         font-weight: 500;
         @media (hover: hover) {
-            background: $red;
+            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         }
         &:focus {
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -87,26 +85,27 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             color: $white;
-            background: $red;
+            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
         }
         &:disabled {
             background: $gray-200 !important;
-            background: $red !important;
-            color: $white !important;
+            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !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: $red;
+            background: $blue-700;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             pointer-events: auto;
         }
         &.delay {
@@ -117,13 +116,15 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $red;
-        color: $red;
+        border: 1px solid $blue;
+        border-radius: $border-radius-lg;
+        color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
         height: 3rem;
         &:hover {
             color: $white;
+            @include blue-gradient;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -131,20 +132,23 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue-700;
             color: $white;
+            @include blue-gradient;
         }
         &:disabled {
             background: transparent;
-            color: $red !important;
+            color: $gray-550 !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $red;
+            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 {
@@ -156,6 +160,7 @@ 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;
@@ -180,11 +185,13 @@ 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-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 5f06f9d7d..72f7c53e0 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -43,7 +43,6 @@ export default {
 
 <style lang="scss">
 .list-button-horizontal {
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
     input[type="radio"],
     input[type="checkbox"] {
         position: absolute;
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 77a059ae9..fa06970ac 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-pill d-flex flex-column w-100 mb-2"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
         v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
@@ -102,11 +102,10 @@ export default {
     position: relative;
     background: $white;
     transition: all 150ms linear;
+    border-radius: $border-radius-lg;
     border: 1px solid $gray-500;
     width: 100%;
     outline: none;
-    border-radius: 50rem;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     span {
         &.small {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 8467288da..0f104509f 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -76,7 +76,6 @@ export default {
 }
 .list-card {
     border: 1px solid $gray-500;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     &.has-error {
         input[type="checkbox"],
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 7bf3e9268..9283c08e7 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -64,9 +64,10 @@ export default {
 <style lang="scss">
 a {
     color: $blue;
-    text-decoration: none;
+    text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
     line-height: 2;
     padding: 0 0 4px 0;
+    font-weight: 500;
     max-width: fit-content;
     &:hover {
         color: $blue-700;
@@ -80,13 +81,10 @@ a {
     &.navigation-link,
     &.new-window-link {
         font-size: 0.875rem;
-        color: $blue;
+        color: $black;
         line-height: 26px;
         white-space: nowrap;
         align-items: center;
-        font-family: UrbanistSemibold;
-        font-weight: 600;
-        text-decoration: none;
         @include media-breakpoint-up(md) {
             font-size: 1rem;
         }