From 4ec1e3d9b68049a5c6508be2b0a853460bb736e5 Mon Sep 17 00:00:00 2001
From: CarlNation <Carl.Nation@safelite.com>
Date: Tue, 29 Jul 2025 10:33:58 -0400
Subject: [PATCH] Revert "Merge pull request #2654 from
 Safelite/CASH-1042-header-and-progress-bar-style-updates"

this is a revert of the revert:
Revert "Merge pull request #2654 from Safelite/CASH-1042-header-and-progress-bar-style-updates"
---
 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           |  54 ++--
 .../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   |  30 +--
 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, 624 insertions(+), 538 deletions(-)

diff --git a/public/css/site-2020Styling.css b/public/css/site-2020Styling.css
index a605df285..e47350565 100644
--- a/public/css/site-2020Styling.css
+++ b/public/css/site-2020Styling.css
@@ -194,16 +194,6 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
   margin-bottom: 2px;
 }
 
-@media (min-width: 500px) {
-  .form-group {
-    width: 80%;
-  }
-}
-@media (min-width: 800px) {
-  .form-group {
-    width: 60%;
-  }
-}
 .list-group {
   margin-bottom: 20px;
   padding-left: 0;
diff --git a/public/scss/site-2020Styling.scss b/public/scss/site-2020Styling.scss
index ec72ae1b9..b3b4b21ce 100644
--- a/public/scss/site-2020Styling.scss
+++ b/public/scss/site-2020Styling.scss
@@ -188,17 +188,6 @@
     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 50b353151..f177b6cf7 100644
--- a/src/constants/progress-bar-mapper.js
+++ b/src/constants/progress-bar-mapper.js
@@ -1,28 +1,95 @@
-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 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,
+    },
 };
 
 export const getProgressBarPercentage = (page) => {
-    return pagePercentageMapper[page] || 0;
+    return pageProgressMapper[page]?.percent || 0;
+};
+
+export const getProgressBarStep = (page) => {
+    return pageProgressMapper[page]?.step || 1;
 };
diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 2eaf204ad..82fbf424c 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -7,7 +7,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
         ">
         <div
             v-if="questionText && answers && answers.length > 0"
-            class="question-text d-flex"
+            class="question-text"
             :class="{ 'small-question-text': isSmallQuestionText }">
             <span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']">
                 {{ questionText }}
@@ -83,10 +83,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                 </div>
             </fieldset>
         </div>
-        <div
-            id="form-test-error"
-            class="row form-test-error"
-            :class="isErrorCentered ? 'text-center' : ''">
+        <div id="form-test-error" class="row form-test-error">
             <error-message
                 role="comment"
                 aria-atomic="true"
@@ -261,12 +258,6 @@ export default {
 
             return classes;
         },
-        isErrorCentered() {
-            if (this.buttonTypeString == "listCard" && this.buttonsInfo.length <= 2) {
-                return true;
-            }
-            return false;
-        },
         buttonsInfo() {
             return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
                 buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue
index a2ee0b3c1..bb55e61ec 100644
--- a/src/digital-components/dropdown-question/dropdown-question.vue
+++ b/src/digital-components/dropdown-question/dropdown-question.vue
@@ -152,6 +152,7 @@ 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 41f9d2d8a..e05ff408a 100644
--- a/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
+++ b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
@@ -66,19 +66,18 @@ export default {
 .btn {
     &.btn-primary {
         position: relative;
-        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+        background: $red;
         border: none;
-        border-radius: $border-radius-lg;
         color: $white;
         justify-content: center;
         font-weight: 500;
         @media (hover: hover) {
-            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+            background: $red;
         }
         &:focus {
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -86,27 +85,26 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             color: $white;
-            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+            background: $red;
         }
         &:disabled {
             background: $gray-200 !important;
-            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
+            background: $red !important;
             color: $gray-600 !important;
             font-weight: 400;
             height: 48px;
             border: none;
-            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            background: $blue-700;
+            background: $red;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             pointer-events: none;
         }
         &.delay {
@@ -117,8 +115,7 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $blue;
-        border-radius: $border-radius-lg;
+        border: 1px solid $red;
         color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
@@ -133,7 +130,7 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             color: $white;
             @include blue-gradient;
         }
@@ -142,14 +139,12 @@ export default {
             color: $gray-550 !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $gray-550;
-            border-radius: $border-radius-lg;
+            border: 1px solid $red;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            @include blue-gradient;
             pointer-events: none;
         }
         &.delay {
diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 23ff83d0b..7fc43baf1 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -337,6 +337,7 @@ 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 b77115f70..fa2401952 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -1286,11 +1286,11 @@ export default {
         &:after {
             content: "";
             transition: all 0.5s ease;
-            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-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-repeat: no-repeat;
             background-position: right center;
-            width: 16px;
-            height: 9px;
+            width: 24px;
+            height: 24px;
             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 ca8be5bf0..a195c446b 100644
--- a/src/fmg-components/funnel-footer/funnel-footer.vue
+++ b/src/fmg-components/funnel-footer/funnel-footer.vue
@@ -1,15 +1,5 @@
 <template>
     <div class="funnel-footer">
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col d-flex justify-content-center justify-content-md-start">
-                    <img class="skyline" src="~@/assets/img/skyline-van.svg" alt="" />
-                </div>
-                <div class="col d-none d-md-flex justify-content-end align-items-end">
-                    <img class="neighborhood" src="~@/assets/img/neighborhood.svg" alt="" />
-                </div>
-            </div>
-        </div>
         <div class="footer-inner-wrapper">
             <textLink
                 linkType="newWindowLink"
@@ -64,13 +54,6 @@ export default {
     margin-top: auto;
     padding: 0 0 2rem 0;
 
-    .skyline {
-        height: 96px;
-    }
-    .neighborhood {
-        height: 48px;
-    }
-
     p {
         font-size: 0.875rem;
         margin-top: 0.25rem;
@@ -93,12 +76,16 @@ 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 f7d55b354..bad77ede5 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -1,8 +1,16 @@
 <template>
     <div class="funnel-header" v-if="imageSrc">
-        <div class="d-flex justify-content-between align-items-center">
-            <div class="button-container">
-                <span class="webchat">
+        <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">
                     <button
                         v-show="shouldShowWebchatButton"
                         v-on:click="webchatClicked"
@@ -10,18 +18,10 @@
                         class="chat-button"></button>
                 </span>
             </div>
-            <div class="site-logo">
-                <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-            </div>
             <div class="button-container">
-                <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
                 <menuModal />
-                <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
             </div>
         </div>
-        <div class="d-flex w-100">
-            <progress-bar :page="$route.name" />
-        </div>
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
         <transition name="fade" mode="out-in">
@@ -197,23 +197,39 @@ export default {
 
 <style lang="scss" scoped>
 .funnel-header {
+    .container {
+        padding: 1rem 0.75rem;
+        display: flex;
+        align-items: center;
+        @include media-breakpoint-up(md) {
+            padding: 2rem 0.75rem;
+        }
+    }
     position: relative;
-    padding: 1rem 0;
+    padding: 0 0 1rem 0;
 
     .button-container {
-        width: 1.5rem;
-        height: 1.625rem;
+        &.webchat {
+            margin-right: 1rem;
+            @include media-breakpoint-up(md) {
+                margin-right: 2rem;
+            }
+        }
+    }
+
+    .site-logo {
+        margin-right: auto;
     }
 
     .logo-image {
-        width: auto;
-        height: 1.1875rem;
+        width: 100px;
+        height: auto;
         margin: 0 auto;
+        @include media-breakpoint-up(md) {
+            width: 165px;
+        }
     }
 
-    :deep(.menu-modal-container) {
-        display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
-    }
     .webchat {
         .chat-button {
             width: 1.5rem;
diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index 8f68ab6e9..fdb458af3 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -6,9 +6,13 @@
             :class="[isActive ? 'active' : '']"
             @click="toggleModal"
             aria-label="Hamburger Menu (modal window)">
-            <div class="bar1"></div>
-            <div class="bar2"></div>
-            <div class="bar3"></div>
+            <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>
         </button>
     </div>
     <div
@@ -18,47 +22,45 @@
         tabindex="-1"
         aria-labelledby="footerModalLabel"
         aria-hidden="true"
-        v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
+        v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }"
+        @click.self="closeModal">
         <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">
-                    <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 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>
                 </div>
             </div>
         </div>
@@ -66,8 +68,9 @@
 </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 {
@@ -100,8 +103,13 @@ export default {
             self.isActive = false;
         },
     },
+    computed: {
+        currentStepNumber() {
+            return getProgressBarStep(this.$route.name);
+        },
+    },
     components: {
-        textLink,
+        progressBar,
     },
 };
 </script>
@@ -111,49 +119,92 @@ export default {
     button {
         border: none;
         &.menu-button {
-            width: 1.5rem;
-            height: 1.5rem;
-            border-radius: 50%;
-            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+            width: auto;
+            height: auto;
+            border-radius: 1.5rem;
+            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
             background-color: $white;
             position: relative;
             display: flex;
-            flex-direction: column;
+            flex-direction: row;
             justify-content: center;
             align-items: center;
-            padding: 0; //Required to prevent 'squish' on iPhone
+            padding: 0.15rem 0.5rem; //Required to prevent 'squish' on iPhone
             z-index: 1050;
-            .bar1,
-            .bar2,
-            .bar3 {
-                width: 14px;
-                height: 2px;
-                background-color: $blue;
-                margin: 1px 0;
-                transition: 0.25s;
+            @include media-breakpoint-up(md) {
+                padding: 0.25rem 1rem;
             }
             &.active .bar1 {
-                transform: rotate(-45deg) translate(-3px, 3px);
+                transform: rotate(-45deg) translate(-3px, 8px);
             }
             &.active .bar2 {
                 opacity: 0;
             }
             &.active .bar3 {
-                transform: rotate(45deg) translate(-3px, -3px);
+                transform: rotate(45deg) translate(-3px, -8px);
+            }
+            .bars {
+                width: 1.5rem;
+                height: 1.5rem;
+                display: flex;
+                justify-content: space-around;
+                flex-direction: column;
+                scale: 0.75;
+                .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;
+                }
             }
         }
     }
 }
 .modal {
     &.menu-modal {
-        //left: auto;
-        height: calc(100% - 56px);
-        top: 56px;
+        .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;
         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;
@@ -162,6 +213,48 @@ 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;
@@ -190,23 +283,30 @@ export default {
                     align-items: center;
                     padding: 0; //Required to prevent 'squish' on iPhone
                     z-index: 1056;
-                    .bar1,
-                    .bar2,
-                    .bar3 {
-                        width: 14px;
-                        height: 2px;
-                        background-color: $blue;
-                        margin: 1px 0;
-                        transition: 0.25s;
-                    }
-                    &.active .bar1 {
-                        transform: rotate(-45deg) translate(-3px, 3px);
-                    }
-                    &.active .bar2 {
-                        opacity: 0;
-                    }
-                    &.active .bar3 {
-                        transform: rotate(45deg) translate(-3px, -3px);
+                    .bars {
+                        width: 1.5rem;
+                        height: 1.5rem;
+                        display: flex;
+                        justify-content: space-around;
+                        flex-direction: column;
+                        .bar1,
+                        .bar2,
+                        .bar3 {
+                            width: 1.5rem;
+                            height: 2px;
+                            background-color: $blue;
+                            margin: 1px 0;
+                            transition: 0.25s;
+                        }
+                        &.active .bar1 {
+                            transform: rotate(-45deg) translate(-3px, 8px);
+                        }
+                        &.active .bar2 {
+                            opacity: 0;
+                        }
+                        &.active .bar3 {
+                            transform: rotate(45deg) translate(-3px, -8px);
+                        }
                     }
                 }
             }
diff --git a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
index f8b654e7f..0f6a0bdc7 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="progress-bar-outer">
+    <div :class="barClass">
         <div class="progress-bar-inner" :style="progressStyle"></div>
     </div>
 </template>
@@ -18,6 +18,10 @@ export default {
             type: String,
             required: true,
         },
+        vertical: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -45,9 +49,20 @@ export default {
     },
     computed: {
         progressStyle() {
-            return {
-                width: this.displayedProgress + "%",
-            };
+            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";
         },
     },
 };
@@ -55,50 +70,43 @@ export default {
 <style lang="scss">
 .progress-bar-outer {
     background: $blue-100;
-    height: 10px;
+    height: 5px;
     position: relative;
-    border-radius: 10px;
+    border-radius: 0;
     width: 100%;
-    margin-top: 1rem;
+    margin-top: 0;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
     .progress-bar-inner {
-        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
+        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
         will-change: width;
-        height: 10px;
-        background-color: $blue;
+        height: 100%;
+        background-color: $red;
         position: absolute;
         top: 0;
         left: 0;
-        border-radius: 10px;
+        border-radius: 0;
     }
+}
 
-    progress {
-        height: 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;
         width: 100%;
-
-        /* 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;
-        }
+        background-color: $red;
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 50rem;
     }
 }
 </style>
diff --git a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
index f42a90972..b4bfb7276 100644
--- a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,9 +1,7 @@
 <template>
     <div class="funnel-sub-header">
-        <div
-            class="d-flex align-items-center container-fluid overflow-hidden"
-            :class="[textAlignment]">
-            <h5 class="text-center fw-normal mb-0" :class="headerColor">
+        <div class="d-flex align-items-center overflow-hidden">
+            <h5 class="fw-normal mb-0" :class="headerColor">
                 <span>
                     {{ text }}
                 </span>
@@ -13,13 +11,9 @@
                     @click-event="clickEvent" />
             </h5>
         </div>
-        <div
-            v-if="subText"
-            class="d-flex align-items-center justify-content-center container-fluid overflow-hidden mt-1">
-            <p class="text-center small fw-normal sub-text">
-                <span>
-                    {{ subText }}
-                </span>
+        <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>
             </p>
         </div>
     </div>
@@ -37,21 +31,17 @@ 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");
         },
@@ -68,8 +58,12 @@ 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 2c4d71803..fca4b91f3 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,31 +1,15 @@
 <template>
     <div :class="`questions-page`">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                 </div>
             </div>
-            <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 class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7 question-chain-wrapper">
                     <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                         <questionChain
                             ref="questionChain"
@@ -54,7 +38,6 @@
 <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";
@@ -96,7 +79,6 @@ export default {
     },
     components: {
         funnelHeader,
-        alert,
         questionChain,
         funnelSubHeader,
         navbar,
@@ -108,7 +90,7 @@ export default {
 <style lang="scss">
 .questions-page {
     .question-text {
-        margin-bottom: 0.5rem;
+        margin-bottom: 1.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 ef4677371..4858157f6 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,13 +118,14 @@ export default {
     margin-bottom: 1.5rem;
     order: 2;
     text-align: center;
-    background: $blue-100;
+    background: $gray-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;
@@ -135,14 +136,13 @@ export default {
         position: relative;
         color: $blue;
         border: none;
-        font-weight: 900;
+        font-family: UrbanistSemibold;
         font-size: 0.875rem;
-        text-align: center;
+        text-align: left;
         display: inline-block;
         width: auto;
         height: auto;
-        text-decoration: underline;
-        text-underline-offset: 0.25rem;
+        text-decoration: none;
         line-height: 1rem;
         padding: 1rem;
         margin: 0 auto;
@@ -154,7 +154,6 @@ export default {
 
         &.btn {
             &.btn-secondary {
-                font-weight: 900;
                 border: none;
                 &:hover,
                 &:active,
@@ -183,6 +182,17 @@ 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 91aed6f1a..8f077f75b 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -5,15 +5,14 @@
         ref="theForm"
         v-slot="{ meta }"
         autocomplete="off">
-        <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" />
+        <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" />
 
                     <customerQuestions
                         ref="customerQuestions"
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index f473aa50b..9b0cb21ca 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -1,13 +1,9 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
                     <textboxQuestion
                         isRequired
@@ -47,8 +43,6 @@
                         cmsWidgetName="TextMeQuestionWidget"
                         v-model="isSmsOptIn" />
 
-                    <techNotes v-model="techNotes" :textAreaLabelCopy="textAreaLabelCopy" />
-
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -74,7 +68,6 @@ 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";
@@ -219,7 +212,6 @@ export default {
         textBlock,
         phoneNumberQuestion,
         checkboxQuestion,
-        techNotes,
     },
 };
 </script>
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index fe32d7b98..065f09449 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -1,17 +1,16 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
-                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+        <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>
                         <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"
@@ -29,6 +28,8 @@
                         :isForwardActionDisabled="!meta.valid"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
+
+                    <div class="text-center" v-html="this.VinLookupQuestionFooterText2"></div>
                 </div>
             </div>
         </div>
@@ -39,7 +40,6 @@
 // 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,10 +229,18 @@ 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,
@@ -243,14 +251,12 @@ export default {
 
 <style lang="scss">
 .vinlookupquestion p {
-    margin-bottom: 0;
+    font-size: 1.25rem;
 }
-.vinlookupquestion strong {
-    font-weight: 500;
-    color: $black;
-}
-.vinlookupquestion p:nth-child(2) {
-    font-size: 0.875rem;
+
+.select-an-option {
+    font-family: UrbanistSemibold;
+    font-weight: 600;
     margin-bottom: 1rem;
 }
 </style>
diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue
index 7efde9a68..ba0f1f2e6 100644
--- a/src/layouts/insurance-company/insurance-company.vue
+++ b/src/layouts/insurance-company/insurance-company.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
 
                     <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 441ef36d3..f1e942028 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,13 +1,9 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <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 406e9055a..9d93c2efe 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,6 +112,7 @@ 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 77ae4b54b..06f8871fe 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal notFullScreen ref="loadingModal" />
-        <div class="container-fluid payment-method">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container payment-method">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <hr class="my-0" />
@@ -57,7 +53,7 @@
 
                     <div
                         v-if="isRecalibrationOnOrder && shouldHideRecalibration"
-                        class="questions-about-service my-5">
+                        class="questions-about-service mt-5">
                         <textBlock
                             cmsWidgetName="QuestionsAboutYourServiceWidget"
                             justifyText="left"
@@ -67,7 +63,7 @@
                         <div class="d-flex flex-row checkbox-group">
                             <checkboxQuestion
                                 cmsWidgetName="RecalConfirmWidget"
-                                class="mb-5"
+                                class="mb-3"
                                 isRequired="true"
                                 v-model="isRecalAckOptIn"
                                 validationRules="recal-ack-required"
@@ -82,13 +78,6 @@
                         :isInsurance="isInsurance"
                         validationRules="payment-method-required" />
 
-                    <alert
-                        v-if="showHavePaymentReadyAlert"
-                        :isDismissible="false"
-                        alertClass="alert-info"
-                        cmsWidgetName="NoPiaDisclaimerWidget"
-                        shouldScrollToOnMount="false" />
-
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -770,11 +759,6 @@ export default {
 
             return false;
         },
-        showHavePaymentReadyAlert() {
-            return (
-                !this.showPaymentMethodQuestions && !this.forwardClicked && this.totalAmountDue > 0
-            );
-        },
         totalAmountDue() {
             return getAmountDue(this.lineItems);
         },
@@ -907,6 +891,12 @@ 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 e6088bb92..3aec6383b 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;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-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-repeat: no-repeat;
         background-position: right center;
-        width: 16px;
-        height: 9px;
+        width: 24px;
+        height: 24px;
         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 05d8bb611..18b082de4 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-fluid");
+            const outerDiv = wrapper.find(".container");
             const clickFn = jest.fn();
             outerDiv.element.addEventListener("click", clickFn);
 
diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index 3a9fc4cd0..b11c5a9af 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -1,15 +1,10 @@
 <template>
     <Form>
         <loadingModal notFullScreen ref="loadingModal" />
-        <div class="container-fluid">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 p-0">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <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 b9d11dfe4..03eff01a9 100644
--- a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -169,9 +169,8 @@ export default {
             max-width: 32rem;
         }
     }
-
-    #afterpay-learnmore {
-        white-space: nowrap;
+    & .alert-heading {
+        font-size: 0.875rem;
     }
 }
 </style>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index ac2901ae0..d80184901 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -1,17 +1,15 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div
-            class="container-fluid page-container-grouped-styles quote-page"
-            :class="showSaveProgressPopup ? 'show-save-progress-popup' : ''">
-            <div class="row justify-content-center funnel-header-wrapper">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <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>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
-                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
+                <div class="col-md-6">
                     <cashOrInsuranceQuestion
                         ref="cashOrInsurance"
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
@@ -69,7 +67,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-8 col-xl-6">
                     <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
                     <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
@@ -90,9 +88,8 @@
 
                     <textBlock
                         cmsWidgetName="quoteDisclaimer"
-                        justifyText="center"
                         typeStyle="caption"
-                        class="mb-5 quote-disclaimer" />
+                        class="mb-5 quote-disclaimer text-left text-md-center" />
                 </div>
             </div>
 
@@ -895,6 +892,31 @@ 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;
 
@@ -912,6 +934,11 @@ export default {
 .text-block {
     display: block;
 }
+:deep(.container .funnel-sub-header) {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
 :deep(.promo-modal-question a) {
     @include responsive-font-size-md(0.875rem, 1rem);
 }
diff --git a/src/layouts/return-user/return-user.vue b/src/layouts/return-user/return-user.vue
index 5b397ea76..86cde49c8 100644
--- a/src/layouts/return-user/return-user.vue
+++ b/src/layouts/return-user/return-user.vue
@@ -2,15 +2,12 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="return-user small-question-text">
             <loadingModal ref="loadingModal" />
-            <div class="container-fluid page-container-grouped-styles">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+            <div class="container 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 return-user-spacing">
-                    <div class="col-md-6 col-xl-4 mt-4">
+                    <div class="col-12 col-md-10 col-lg-8 col-xl-7 return-user-spacing">
                         <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 649c93201..6b214f2e2 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles page-schedule">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
                     <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 44ac0d9e8..74286c550 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,6 +94,7 @@ 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 38a61f222..dd6b75d53 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <serviceZipModalQuestion
@@ -69,8 +65,8 @@
                         alertClass="alert-success" />
                 </div>
             </div>
-            <div class="row justify-content-center appointment-type">
-                <div class="col-md-6">
+            <div class="row appointment-type">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <appointmentTypeQuestion
                         v-model="selectedAppointmentType"
                         v-show="isAppointmentTypeDisplayed"
@@ -87,21 +83,8 @@
                         labelBold="true" />
                 </div>
             </div>
-            <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="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <div class="text-center">
                         <textBlock
                             v-if="mobileFeeApplies && isMobileSelected"
@@ -149,7 +132,6 @@ import alert from "@/ux-components/alert/alert";
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
 import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-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 funnelHeader from "@/fmg-components/funnel-header/funnel-header";
@@ -900,7 +882,6 @@ export default {
         loadingModal,
         contentGroupModal,
         shopQuestionPopup,
-        buttonQuestion,
         textBlock,
     },
 };
@@ -913,10 +894,6 @@ export default {
             @include media-breakpoint-up(md) {
                 padding: 0 0.75rem;
             }
-            @include media-breakpoint-up(xl) {
-                width: 33.3333333%;
-                flex: 0 0 auto;
-            }
         }
     }
 }
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index b7df9969a..2a9a32140 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="text-center">
+    <div class="text-left">
         <div class="update-zip-text-link">
             <textLink
                 id="serviceZipLinkPromptId"
diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
index ece95aea6..837cb17de 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -2,11 +2,11 @@
     <transition name="fade" mode="out-in">
         <baseInputButton
             v-bind="$props"
-            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+            buttonWrapperClasses="list-group base-input-button rounded-pill list-button d-flex flex-column w-100 mb-2"
             v-model="selectedValue">
             <div
                 :aria-label="buttonLabel"
-                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
+                class="button-content list-button-content rounded-pill d-flex flex-column justify-content-center py-3 px-4 p-md-4">
                 <div class="row-one">
                     <span class="m-0 button-label-copy text-truncate" :class="textPosition">
                         {{ buttonLabel }}
@@ -174,10 +174,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 {
@@ -193,6 +193,7 @@ export default {
         display: flex;
         align-items: center;
         line-height: 1.5rem;
+        justify-content: center;
 
         .button-label-copy {
             font-weight: 500;
@@ -262,7 +263,7 @@ export default {
     }
 
     .row-two {
-        text-align: left;
+        text-align: center;
     }
 }
 </style>
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 7ea98555f..542ef69d6 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -16,7 +16,7 @@
                 :questionText="questionText"
                 :answers="answers"
                 groupName="chooseShop"
-                textPosition="text-start"
+                textPosition="text-center"
                 v-model="selectedProviderNumber"
                 isRequired
                 validationRules="option-required" />
diff --git a/src/layouts/service-zip/service-zip.vue b/src/layouts/service-zip/service-zip.vue
index df1cb4e65..273d87604 100644
--- a/src/layouts/service-zip/service-zip.vue
+++ b/src/layouts/service-zip/service-zip.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
                         <textboxQuestion
@@ -359,9 +355,6 @@ 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 7096bd08c..2e520763f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="container-fluid page-container-grouped-styles vehicle-damage">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+        <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" />
                     <alert
                         ref="vehicleChangeAlert"
                         v-if="shouldDisplayVehicleChangeAlert"
@@ -18,7 +14,7 @@
                         :isDismissible="false" />
                 </div>
             </div>
-            <div class="row justify-content-center">
+            <div class="row">
                 <div class="col-md-6">
                     <damageLocationQuestion
                         ref="damageLocation"
@@ -27,8 +23,8 @@
                         groupName="DamageLocationQuestion" />
                 </div>
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+            <div class="row">
+                <div class="col-md-6">
                     <windshieldOptions
                         class="windshield-options"
                         ref="windshieldOptions"
@@ -61,8 +57,8 @@
                         validationRules="replace-options-required" />
                 </div>
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+            <div class="row">
+                <div class="col-md-6">
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         :isForwardActionDisabled="!isContinueEnabled"
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index fcea707eb..efef1bb6c 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -2,30 +2,18 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
-            <div class="container-fluid page-container-grouped-styles">
-                <div class="row justify-content-center">
-                    <div class="col-md-6">
-                        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                    </div>
-                </div>
-                <div class="row justify-content-center">
-                    <div class="col-md-6 col-xl-4 mt-4">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+            <div class="container page-container-grouped-styles">
+                <div class="row">
+                    <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                         <funnelSubHeader
                             ref="funnelSubHeader"
-                            cmsWidgetName="FunnelSubHeaderWidget" />
+                            cmsWidgetName="FunnelSubHeaderWidget"
+                            class="mb-7" />
                     </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 class="row">
+                    <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                         <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" />
@@ -63,7 +51,6 @@ 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
@@ -244,7 +231,6 @@ export default {
         funnelHeader,
         funnelSubHeader,
         navbar,
-        alert,
         loadingModal,
         saveProgressModalQuestion,
     },
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 0820c0c5a..3bc2d8565 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -1,13 +1,9 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
                     <vehicleQuestion
                         ref="vehicleYearQuestion"
diff --git a/src/layouts/vin-lookup/vin-information/vin-information.vue b/src/layouts/vin-lookup/vin-information/vin-information.vue
index a0eaf9536..f08196135 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;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-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-repeat: no-repeat;
             background-position: right center;
             margin-left: 0.5rem;
-            width: 16px;
-            height: 9px;
+            width: 24px;
+            height: 24px;
             display: inline-flex;
         }
         &.active:after {
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 23020cfd6..b63582c96 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,14 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container page-container-grouped-styles">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                     <textboxQuestion
                         class="mb-2 mt-5"
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index d1b534be4..3051ed00a 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -202,21 +202,21 @@ html {
 
     .form-test-invalid {
         &.btn.btn-primary {
-            color: $gray-600;
-            background: $gray-200;
+            color: $white;
+            background: $red;
             cursor: pointer;
             pointer-events: all;
             font-weight: $font-weight-normal;
         }
         &.btn.btn-primary:hover,
         &.btn.btn-primary:focus {
-            background: $gray-200;
+            background: $red;
             box-shadow: none;
         }
         &.btn.btn-primary:focus-visible {
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $gray-700;
+                0 0 0 5.5px $red;
         }
     }
 }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 3aa8580cb..c619196fa 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -8,13 +8,10 @@ body {
         display: flex;
         flex-direction: column;
         min-height: 100dvh;
-        form {
-            > .container-fluid {
-                margin-bottom: -1rem;
-                @media screen and (min-width: 1090px) {
-                    margin-bottom: -5rem;
-                }
-            }
+    }
+    .container {
+        @include media-breakpoint-up(xl) {
+            max-width: 1020px;
         }
     }
     .container-fluid {
@@ -90,7 +87,7 @@ body {
     }
 }
 .modal-open:not(.prevent-modal-scroll) {
-    .container-fluid {
+    .container {
         &.page-container-grouped-styles {
             overflow: hidden;
             height: auto;
diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss
index 07329fc71..f212fa072 100644
--- a/src/styles/shared-input-button-styles.scss
+++ b/src/styles/shared-input-button-styles.scss
@@ -1,3 +1,22 @@
+.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 22e17e3b7..bec02081f 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -204,6 +204,7 @@ $enable-important-utilities: false;
 $grid-breakpoints: (
     xs: 0,
     md: 768px,
+    lg: 992px,
     xl: 1200px,
     xxl: 1440px,
 );
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 982e7bb1b..d83758482 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 d-flex align-items-center justify-content-center py-3 px-4 delay"
+        class="btn rounded-pill d-flex align-items-center justify-content-center py-3 px-6 delay"
         :class="[
             isPrimary ? 'btn-primary' : 'btn-secondary',
             isFloat ? 'float-end' : '',
             isLoaderDisplayed && !suppressLoader ? 'has-loader' : '',
         ]"
         @click="clicked">
-        <span class="m-0">{{ this.buttonText }}</span>
+        <span class="m-0" v-html="buttonText"></span>
         <loader
             class="ms-2"
             v-if="isLoaderDisplayed && !suppressLoader"
@@ -63,21 +63,23 @@ export default {
 
 <style lang="scss">
 .btn {
+    &:first-child:active {
+        background-color: $red;
+    }
     &.btn-primary {
         position: relative;
-        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+        background: $red;
         border: none;
-        border-radius: $border-radius-lg;
         color: $white;
         justify-content: center;
         font-weight: 500;
         @media (hover: hover) {
-            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+            background: $red;
         }
         &:focus {
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -85,27 +87,26 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             color: $white;
-            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+            background: $red;
         }
         &:disabled {
             background: $gray-200 !important;
-            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
-            color: $gray-600 !important;
+            background: $red !important;
+            color: $white !important;
             font-weight: 400;
             height: 48px;
             border: none;
-            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            background: $blue-700;
+            background: $red;
             box-shadow:
                 0 0 0 3px,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             pointer-events: auto;
         }
         &.delay {
@@ -116,15 +117,13 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $blue;
-        border-radius: $border-radius-lg;
-        color: $blue;
+        border: 1px solid $red;
+        color: $red;
         font-weight: 500;
         transition: all 150ms linear;
         height: 3rem;
         &:hover {
             color: $white;
-            @include blue-gradient;
         }
         &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
@@ -132,23 +131,20 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $blue-700;
+                0 0 0 5.5px $red;
             color: $white;
-            @include blue-gradient;
         }
         &:disabled {
             background: transparent;
-            color: $gray-550 !important;
+            color: $red !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $gray-550;
-            border-radius: $border-radius-lg;
+            border: 1px solid $red;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            @include blue-gradient;
             pointer-events: none;
         }
         &.delay {
@@ -160,7 +156,6 @@ export default {
         position: relative;
         background: $green-100;
         border: 1px solid $green-400;
-        border-radius: $border-radius-lg;
         color: $black;
         font-weight: 500;
         transition: all 150ms linear;
@@ -185,13 +180,11 @@ export default {
             font-weight: 400;
             height: 48px;
             border: 1px solid $gray-550;
-            border-radius: $border-radius-lg;
             cursor: pointer;
             pointer-events: all;
         }
         &.has-loader {
             color: $white;
-            @include blue-gradient;
             pointer-events: none;
         }
         &.delay {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 72f7c53e0..5f06f9d7d 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -43,6 +43,7 @@ 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 fa06970ac..77a059ae9 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,7 +1,7 @@
 <template>
     <baseInputButton
         v-bind="$props"
-        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-pill d-flex flex-column w-100 mb-2"
         v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
@@ -102,10 +102,11 @@ 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 0f104509f..8467288da 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -76,6 +76,7 @@ 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 9283c08e7..7bf3e9268 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -64,10 +64,9 @@ export default {
 <style lang="scss">
 a {
     color: $blue;
-    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
+    text-decoration: none;
     line-height: 2;
     padding: 0 0 4px 0;
-    font-weight: 500;
     max-width: fit-content;
     &:hover {
         color: $blue-700;
@@ -81,10 +80,13 @@ a {
     &.navigation-link,
     &.new-window-link {
         font-size: 0.875rem;
-        color: $black;
+        color: $blue;
         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;
         }