From ce6916658abbf861d0fd6b7b9df1c5804f2cf888 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 18 Sep 2023 16:20:45 -0400
Subject: [PATCH] First pass at desktop max width and breakpoints per page.

Rename funnel-footer to nav-bar.
---
 .../questions-page-layout.vue                 |   8 +-
 .../nav-bar.spec.js}                          |  12 +-
 .../funnel-footer.vue => nav-bar/nav-bar.vue} |  10 +-
 .../address-lookup/address-lookup.spec.js     |   4 +-
 src/layouts/address-lookup/address-lookup.vue |  22 +-
 .../address-vehicles/address-vehicles.spec.js |  14 +-
 .../address-vehicles/address-vehicles.vue     |  14 +-
 .../customer-details/customer-details.vue     | 113 +--
 src/layouts/estimate/estimate.spec.js         |   4 +-
 src/layouts/estimate/estimate.vue             | 128 +--
 .../license-plate-lookup.spec.js              |  10 +-
 .../license-plate-lookup.vue                  |  24 +-
 src/layouts/payment-method/payment-method.vue |   6 +-
 src/layouts/quote/quote.vue                   | 235 +++---
 src/layouts/review/review.vue                 | 173 ++--
 src/layouts/schedule/schedule.spec.js         |   2 +-
 src/layouts/schedule/schedule.vue             | 787 +++++++++---------
 .../service-location/service-location.vue     | 196 +++--
 src/layouts/vehicle-damage/vehicle-damage.vue | 162 ++--
 .../vehicle-parts/vehicle-parts.spec.js       |   2 +-
 src/layouts/vehicle-parts/vehicle-parts.vue   |  10 +-
 src/layouts/vehicle/vehicle.vue               | 135 ++-
 src/layouts/vin-lookup/vin-lookup.spec.js     |   8 +-
 src/layouts/vin-lookup/vin-lookup.vue         |  20 +-
 src/mixins/base-mixin.js                      |   4 +-
 src/styles/common-styles.scss                 |  12 +-
 src/styles/ux-variables.scss                  |   9 -
 27 files changed, 1100 insertions(+), 1024 deletions(-)
 rename src/fmg-components/{funnel-footer/funnel-footer.spec.js => nav-bar/nav-bar.spec.js} (84%)
 rename src/fmg-components/{funnel-footer/funnel-footer.vue => nav-bar/nav-bar.vue} (94%)

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 f6bb2a656..801987e31 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
@@ -23,8 +23,8 @@
                     :answerKey="questionsDatum.answerKey"
                     :validationRules="validationRules" />
             </div>
-            <funnel-footer
-                ref="funnelFooter"
+            <navbar
+                ref="navbar"
                 cmsWidgetName="FunnelFooterWidget"
                 :isForwardActionDisabled="!isMetaValid"
                 @back-clicked="handleBackButtonAction"
@@ -40,7 +40,7 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 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 funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
 export default {
@@ -88,7 +88,7 @@ export default {
         alert,
         questionChain,
         funnelSubHeader,
-        funnelFooter,
+        navbar,
         loadingModal,
     },
 };
diff --git a/src/fmg-components/funnel-footer/funnel-footer.spec.js b/src/fmg-components/nav-bar/nav-bar.spec.js
similarity index 84%
rename from src/fmg-components/funnel-footer/funnel-footer.spec.js
rename to src/fmg-components/nav-bar/nav-bar.spec.js
index 6360fb34a..68b9f6c8c 100644
--- a/src/fmg-components/funnel-footer/funnel-footer.spec.js
+++ b/src/fmg-components/nav-bar/nav-bar.spec.js
@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
-import funnelFooter from "./funnel-footer";
+import navbar from "./nav-bar";
 
-describe("funnel-footer.vue", () => {
+describe("nav-bar.vue", () => {
     test("Should emit ForwardClicked on button click", async () => {
         // Act
-        const wrapper = mount(funnelFooter, {
+        const wrapper = mount(navbar, {
             mixins: [mockMixin],
         });
         wrapper.vm.buttonClick();
@@ -14,7 +14,7 @@ describe("funnel-footer.vue", () => {
 
     test("Should emit BackClicked on link click", async () => {
         // Act
-        const wrapper = mount(funnelFooter, {
+        const wrapper = mount(navbar, {
             mixins: [mockMixin],
         });
         wrapper.vm.linkClick();
@@ -24,7 +24,7 @@ describe("funnel-footer.vue", () => {
 
     test("Should change button text when update button text is called", async () => {
         // Act
-        const wrapper = mount(funnelFooter, {
+        const wrapper = mount(navbar, {
             mixins: [mockMixin],
         });
         wrapper.vm.updateButtonText("newText");
@@ -35,7 +35,7 @@ describe("funnel-footer.vue", () => {
 
     test("should run removeLoader fn on buttonMain and return false for onkeydown fn", async () => {
         // Arrange
-        const wrapper = mount(funnelFooter, {
+        const wrapper = mount(navbar, {
             mixins: [mockMixin],
         });
 
diff --git a/src/fmg-components/funnel-footer/funnel-footer.vue b/src/fmg-components/nav-bar/nav-bar.vue
similarity index 94%
rename from src/fmg-components/funnel-footer/funnel-footer.vue
rename to src/fmg-components/nav-bar/nav-bar.vue
index 448f15319..bb0cbc399 100644
--- a/src/fmg-components/funnel-footer/funnel-footer.vue
+++ b/src/fmg-components/nav-bar/nav-bar.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="row"></div>
-    <footer class="footer container-fluid g-5 my-5 px-0" id="infoBox">
+    <div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
         <div class="row d-flex flex-row-reverse align-items-center vw-100">
             <div class="col button-col d-flex" id="stacked">
                 <buttonMain
@@ -13,7 +13,7 @@
                     :isDisabled="isForwardActionDisabled"
                     @click-event="buttonClick"
                     data-bs-target="#footerModal"
-                    data-test-id="funnel-footer-main-button"
+                    data-test-id="nav-bar-main-button"
                     data-bs-dismiss="modal" />
             </div>
             <div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
@@ -27,7 +27,7 @@
                     data-bs-dismiss="modal" />
             </div>
         </div>
-    </footer>
+    </div>
 </template>
 
 <script>
@@ -35,7 +35,7 @@ import textLink from "@/ux-components/text-link/text-link";
 import buttonMain from "@/ux-components/button-main/button-main";
 
 export default {
-    name: "funnelFooter",
+    name: "navbar",
     emits: ["BackClicked", "ForwardClicked"], // <--- should remove oodles of warnings in dev tools
     props: {
         isForwardActionDisabled: Boolean,
@@ -90,7 +90,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.footer {
+.nav-bar {
     overflow: visible;
     display: flex;
     a {
diff --git a/src/layouts/address-lookup/address-lookup.spec.js b/src/layouts/address-lookup/address-lookup.spec.js
index 63847588b..17705eea6 100644
--- a/src/layouts/address-lookup/address-lookup.spec.js
+++ b/src/layouts/address-lookup/address-lookup.spec.js
@@ -722,8 +722,8 @@ function setupMocks({
 
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
     wrapper.vm.setCmsContent = jest.fn();
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-    wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+    wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
+    wrapper.vm.$refs.navbar.removeLoader = jest.fn();
 
     return { wrapper };
 }
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index f0bf91325..4e6dc08df 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -67,9 +67,9 @@
                         </div>
                     </div>
                 </transition>
-                <funnel-footer
+                <navbar
                     cmsWidgetName="FunnelFooterWidget"
-                    ref="funnelFooter"
+                    ref="navbar"
                     :isDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
                     @back-clicked="backButtonAction"
@@ -82,7 +82,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
@@ -241,14 +241,14 @@ export default {
             if (!resultMap.vinLookupResponse.isStatePermissible) {
                 // State Restrictions forbid lookup by address
                 this.displayVinLookupByHomeAddressNotAllowedAlert = true;
-                return this.$refs.funnelFooter.removeLoader();
+                return this.$refs.navbar.removeLoader();
             }
 
             // If a Service Zip is entered and it is an invalid zip code (ex. 11111) then show an alert
             const isZipValid = resultMap.serviceZipValidationResponse.isValid;
             if (this.serviceZipCode && !isZipValid) {
                 this.displayInvalidZipAlert = true;
-                return this.$refs.funnelFooter.removeLoader();
+                return this.$refs.navbar.removeLoader();
             }
             this.displayInvalidZipAlert = false;
 
@@ -271,10 +271,10 @@ export default {
                     );
 
                     // Update button "Continue with..."
-                    this.$refs.funnelFooter.updateButtonText(
+                    this.$refs.navbar.updateButtonText(
                         `Continue with ${carFound.year} ${carFound.make} ${carFound.model}`
                     );
-                    return this.$refs.funnelFooter.removeLoader();
+                    return this.$refs.navbar.removeLoader();
                 }
 
                 // update data if the zip or service zip is serviceable
@@ -294,7 +294,7 @@ export default {
             } else {
                 // No VINS found.
                 this.displayVinNotFoundAlert = true;
-                return this.$refs.funnelFooter.removeLoader();
+                return this.$refs.navbar.removeLoader();
             }
 
             // If the either the registration zip code or service zip code are not serviceable
@@ -302,7 +302,7 @@ export default {
             if (!this.isZipServiceable) {
                 this.displayNonServiceableZipAlert = true;
                 this.showServiceZipField = true;
-                return this.$refs.funnelFooter.removeLoader();
+                return this.$refs.navbar.removeLoader();
             }
 
             // If the registration zip code is serviceable and nothing was entered for the service zip code
@@ -420,7 +420,7 @@ export default {
         customerQuestions: {
             handler(newValue) {
                 // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote"
-                this.$refs.funnelFooter.updateButtonText(
+                this.$refs.navbar.updateButtonText(
                     this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
                 );
                 this.showServiceZipField = false;
@@ -445,7 +445,7 @@ export default {
     },
     components: {
         funnelHeader,
-        funnelFooter,
+        navbar,
         vehicleBanner,
         funnelSubHeader,
         customerQuestions,
diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
index cf485aa97..a540a9788 100644
--- a/src/layouts/address-vehicles/address-vehicles.spec.js
+++ b/src/layouts/address-vehicles/address-vehicles.spec.js
@@ -76,8 +76,8 @@ describe("addressVehicles.vue", () => {
         };
 
         // the following has to be set BEFORE changing the data which is being watched, and requires updateButtonText to be mocked
-        wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-        wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+        wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
+        wrapper.vm.$refs.navbar.removeLoader = jest.fn();
         wrapper.vm.lookupVin = jest.fn(() => Promise.resolve(lookupVinResponse));
         wrapper.vm.$router.navigate = jest.fn();
         wrapper.vm.updateCustomerInfo = jest.fn().mockImplementation(() => {});
@@ -106,8 +106,8 @@ describe("addressVehicles.vue", () => {
         };
 
         // the following has to be set BEFORE changing the data which is being watched, and requires updateButtonText to be mocked
-        wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-        wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+        wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
+        wrapper.vm.$refs.navbar.removeLoader = jest.fn();
         wrapper.vm.lookupVin = jest.fn(() => Promise.reject(lookupVinResponse));
         wrapper.vm.$router.navigateWithSaving = jest.fn();
         wrapper.vm.updateCustomerInfo = jest.fn().mockImplementation(() => {});
@@ -128,7 +128,7 @@ describe("addressVehicles.vue", () => {
     test("Should navigate to CLICKED_FORWARD scenario if carId is different and selected glass not available for vehicle on navigateForward", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
-        wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+        wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
         wrapper.vm.$router.navigateWithSaving = jest.fn();
 
         // Act
@@ -148,7 +148,7 @@ describe("addressVehicles.vue", () => {
     test("carId is not different on navigateForward (car was found) => Should handle navigating forward with car match", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
-        wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+        wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
         navigateToHeritage.navigateToHeritageFunnel = jest.fn();
 
         // Act
@@ -224,7 +224,7 @@ function setupMocks({}) {
 
     const wrapper = shallowMount(addressVehicles, mountOptions);
 
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+    wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
     wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
 
     return { wrapper };
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index de1fa9999..796649a40 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -27,9 +27,9 @@
                     class="mb-3"
                     marginTopSizeOverride="3" />
             </div>
-            <funnelFooter
+            <navbar
                 cmsWidgetName="FunnelFooterWidget"
-                ref="funnelFooter"
+                ref="navbar"
                 :isForwardActionDisabled="!meta.valid"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
@@ -40,7 +40,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
@@ -165,7 +165,7 @@ export default {
             const vinLookup = await this.dispatchStoreAction(storeActions.LOOKUP_VEHICLE_BY_VIN, {
                 vin: this.selectedVehicle.vin,
             }).catch(() => {
-                this.$refs.funnelFooter.removeLoader();
+                this.$refs.navbar.removeLoader();
             });
 
             if (!vinLookup) {
@@ -210,11 +210,11 @@ export default {
                 this.isCarIdDifferent =
                     this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
                 if (this.isCarIdDifferent) {
-                    this.$refs.funnelFooter.updateButtonText(
+                    this.$refs.navbar.updateButtonText(
                         `Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`
                     );
                 } else {
-                    this.$refs.funnelFooter.updateButtonText(
+                    this.$refs.navbar.updateButtonText(
                         this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
                     );
                 }
@@ -229,7 +229,7 @@ export default {
         vehicleBanner,
         funnelSubHeader,
         alert,
-        funnelFooter,
+        navbar,
         addressVehiclesQuestion,
         textBlock,
     },
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 82e9f6f4b..a2ab1c8b2 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -1,57 +1,76 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
-            <textboxQuestion
-                class="mb-4"
-                cmsWidgetName="FirstNameWidget"
-                v-model="firstName"
-                ref="firstName"
-                customInputId="firstName"
-                validationRules="first-name-required" />
-            <textboxQuestion
-                class="mb-4"
-                cmsWidgetName="LastNameWidget"
-                v-model="lastName"
-                ref="lastName"
-                customInputId="lastName"
-                validationRules="last-name-required" />
-            <textboxQuestion
-                class="mb-4"
-                cmsWidgetName="emailQuestionWidget"
-                v-model="emailAddress"
-                inputId="email"
-                validationRules="email-address-required|email-address-format" />
-            <phoneNumberQuestion
-                class="mb-4"
-                cmsWidgetName="PhoneNumberQuestionWidget"
-                v-model="phoneNumber"
-                isRequired
-                validationRules="phone-number-required" />
-            <checkboxQuestion
-                class="mb-5"
-                cmsWidgetName="TextMeQuestionWidget"
-                v-model="isSmsOptIn" />
-            <textareaQuestion
-                class="mb-4"
-                v-model="techNotes"
-                cmsWidgetName="TextAreaContentWidget"
-                maxLength="250" />
-            <textBlock cmsWidgetName="DisclaimerCopyWidget" typeStyle="caption" />
-            <funnel-footer
-                cmsWidgetName="FunnelFooterWidget"
-                ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid"
-                @back-clicked="backButtonAction"
-                @ForwardClicked="forwardButtonAction" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-2 col-lg-3">&nbsp;</div>
+                <div class="col-md-8 col-lg-6">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
+                    <textboxQuestion
+                    class="mb-4"
+                    cmsWidgetName="FirstNameWidget"
+                    v-model="firstName"
+                    ref="firstName"
+                    customInputId="firstName"
+                    validationRules="first-name-required" />
+
+                    <textboxQuestion
+                    class="mb-4"
+                    cmsWidgetName="LastNameWidget"
+                    v-model="lastName"
+                    ref="lastName"
+                    customInputId="lastName"
+                    validationRules="last-name-required" />
+
+                    <textboxQuestion
+                    class="mb-4"
+                    cmsWidgetName="emailQuestionWidget"
+                    v-model="emailAddress"
+                    inputId="email"
+                    validationRules="email-address-required|email-address-format" />
+
+                    <phoneNumberQuestion
+                    class="mb-4"
+                    cmsWidgetName="PhoneNumberQuestionWidget"
+                    v-model="phoneNumber"
+                    isRequired
+                    validationRules="phone-number-required" />
+
+                    <checkboxQuestion
+                    class="mb-5"
+                    cmsWidgetName="TextMeQuestionWidget"
+                    v-model="isSmsOptIn" />
+
+                    <textareaQuestion
+                    class="mb-4"
+                    v-model="techNotes"
+                    cmsWidgetName="TextAreaContentWidget"
+                    maxLength="250" />
+
+                    <textBlock cmsWidgetName="DisclaimerCopyWidget" typeStyle="caption" />
+
+                    <navbar
+                    cmsWidgetName="FunnelFooterWidget"
+                    ref="navbar"
+                    :isForwardActionDisabled="!meta.valid"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
+
+                </div>
+                <div class="col-md-2 col-lg-3">&nbsp;</div>
+            </div>
         </div>
+
     </Form>
 </template>
 
 <script>
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import textareaQuestion from "@/digital-components/textarea-question/textarea-question";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
@@ -172,7 +191,7 @@ export default {
         funnelSubHeader,
         textareaQuestion,
         textboxQuestion,
-        funnelFooter,
+        navbar,
         Form,
         textBlock,
         phoneNumberQuestion,
diff --git a/src/layouts/estimate/estimate.spec.js b/src/layouts/estimate/estimate.spec.js
index 462287851..7d395e88d 100644
--- a/src/layouts/estimate/estimate.spec.js
+++ b/src/layouts/estimate/estimate.spec.js
@@ -254,7 +254,7 @@ function setupMocks({
         { Name: "Provide my license plate # Most accurate VIN match" },
         { Name: "Provide my home address Most convenient VIN match" },
     ],
-    funnelFooterWidget = { ForwardButtonText: "test txt" },
+    FunnelFooterWidget = { ForwardButtonText: "test txt" },
     mountOptionsMockData = {
         router: {
             navigate: jest.fn(),
@@ -271,7 +271,7 @@ function setupMocks({
         groupName: groupName,
         QuestionText: cmsQuestionText,
         Answers: cmsAnswers,
-        FunnelFooterWidget: funnelFooterWidget,
+        FunnelFooterWidget: FunnelFooterWidget,
     };
 
     const apiPromise = Promise.resolve({ cmsContent });
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index 23420751d..e70172bc1 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -1,14 +1,20 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles">
-            <loadingModal ref="loadingModal" />
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
-            <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall">
-                <div v-if="!skipVin">
-                    <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
-                    <buttonQuestion
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-2 col-lg-3">&nbsp;</div>
+                <div class="col-md-8 col-lg-6">
+                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <div v-if="!skipVin">
+                        <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
+                        <buttonQuestion
                         cmsWidgetName="VinLookupMethod"
                         :answers="answersFromCms"
                         groupName="vinLookupMethodOption"
@@ -17,63 +23,59 @@
                         isRequired
                         validationRules="option-required"
                         :logDisplayedValuesEvent="true" />
-                </div>
-                <div v-else>
-                    <alert
+                    </div>
+
+                    <div v-else>
+                        <alert
                         class="my-4"
                         :cmsWidgetName="alertInfo"
                         alertClass="alert-info"
                         v-bind:isDismissible="false" />
-                    <div class="row my-2">
-                        <div class="col">
-                            <textboxQuestion
-                                cmsWidgetName="ServiceZipQuestionWidget"
-                                v-model="serviceZipCode"
-                                inputId="serviceZipCode"
-                                mask="#####"
-                                isRequired
-                                validationRules="zip-required|zip-format" />
-                        </div>
-                    </div>
-                    <div class="row mt-2">
-                        <div class="col">
-                            <textboxQuestion
-                                cmsWidgetName="EmailAddressQuestionWidget"
-                                v-model="emailAddress"
-                                inputId="emailAddress"
-                                isRequired
-                                disableAutoFill
-                                validationRules="email-address-required|email-address-format" />
-                        </div>
-                    </div>
-                    <div class="row mb-2">
-                        <div class="col">
-                            <textBlock
-                                cmsWidgetName="QuoteEmailTextBlockWidget"
-                                typeStyle="caption" />
-                        </div>
-                    </div>
-                    <alert
+
+                        <textboxQuestion
+                        cmsWidgetName="ServiceZipQuestionWidget"
+                        v-model="serviceZipCode"
+                        inputId="serviceZipCode"
+                        mask="#####"
+                        isRequired
+                        validationRules="zip-required|zip-format" />
+
+                        <textboxQuestion
+                        cmsWidgetName="EmailAddressQuestionWidget"
+                        v-model="emailAddress"
+                        inputId="emailAddress"
+                        isRequired
+                        disableAutoFill
+                        validationRules="email-address-required|email-address-format" />
+                        <textBlock
+                        cmsWidgetName="QuoteEmailTextBlockWidget"
+                        typeStyle="caption" />
+
+                        <alert
                         ref="alertInvalidZip"
                         v-if="displayInvalidZipAlert"
                         class="my-4"
                         cmsWidgetName="AlertInvalidZipWidget"
                         alertClass="alert-danger"
                         v-bind:isDismissible="false" />
-                    <alert
+
+                        <alert
                         class="my-4"
                         :manualHeadline="AlertNonServiceableZipHeader"
                         :manualCopy="AlertNonServiceableZipBody"
                         v-model="customAlertData"
                         v-if="displayNonServiceableZipAlert"
                         alertClass="alert-danger" />
+
+                        <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                    </div>
                 </div>
-                <funnel-footer
-                    cmsWidgetName="FunnelFooterWidget"
-                    ref="funnelFooter"
-                    :isForwardActionDisabled="!meta.valid"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
+                <div class="col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
@@ -82,7 +84,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import buttonQuestion from "@/digital-components/button-question/button-question";
@@ -152,8 +154,8 @@ export default {
         }
 
         const zip = lowerCaseParams.get(queryStrings.ZIP_CODE)
-            ? lowerCaseParams.get(queryStrings.ZIP_CODE)
-            : store.getters.order.serviceLocation.zipCode;
+        ? lowerCaseParams.get(queryStrings.ZIP_CODE)
+        : store.getters.order.serviceLocation.zipCode;
 
         var vinByAddressPromise;
         if (zip) {
@@ -171,10 +173,10 @@ export default {
                 promise: cmsContentPromise,
             },
             zip != null &&
-                zip != undefined && {
-                    resultKey: "vinByAddress",
-                    promise: vinByAddressPromise,
-                },
+            zip != undefined && {
+                resultKey: "vinByAddress",
+                promise: vinByAddressPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -186,13 +188,13 @@ export default {
             vm.skipVinNotRepair = skipVinNotRepair;
             if (resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText.includes("|")) {
                 const forwardTextOption =
-                    resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText.split("|");
+                resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText.split("|");
                 if (skipVin) {
                     resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText =
-                        forwardTextOption[1];
+                    forwardTextOption[1];
                 } else {
                     resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText =
-                        forwardTextOption[0];
+                    forwardTextOption[0];
                 }
             }
 
@@ -238,19 +240,19 @@ export default {
 
                 if (!zipCodeData.isValid) {
                     this.displayInvalidZipAlert = true;
-                    return this.$refs.funnelFooter.removeLoader();
+                    return this.$refs.navbar.removeLoader();
                 }
                 this.displayInvalidZipAlert = false;
 
                 if (!zipCodeData.isServiceable) {
                     this.displayNonServiceableZipAlert = true;
-                    return this.$refs.funnelFooter.removeLoader();
+                    return this.$refs.navbar.removeLoader();
                 }
                 this.displayNonServiceableZipAlert = false;
 
                 const payment = this.$store.getters.payment;
                 const vehicleChangedDuringPolicyLookupInHeritage =
-                    payment.isInsurance && payment.insuranceCoverage.coverageStatus;
+                payment.isInsurance && payment.insuranceCoverage.coverageStatus;
                 if (vehicleChangedDuringPolicyLookupInHeritage) {
                     navigateToHeritageFunnel({
                         shouldSaveSession: true,
@@ -346,7 +348,7 @@ export default {
         funnelHeader,
         vehicleBanner,
         funnelSubHeader,
-        funnelFooter,
+        navbar,
         buttonQuestion,
         Form,
         alert,
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
index bf5751637..3a41f210d 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
@@ -315,7 +315,7 @@ describe("license-plate-lookup.vue", () => {
             await wrapper.vm.$nextTick();
 
             //Assert
-            expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
+            expect(wrapper.vm.$refs.navbar.updateButtonText).toHaveBeenCalled();
         });
 
         test("Button Text should revert to initial value when registrationZip textfield has new text", async () => {
@@ -330,7 +330,7 @@ describe("license-plate-lookup.vue", () => {
             await wrapper.vm.$nextTick();
 
             //Assert
-            expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
+            expect(wrapper.vm.$refs.navbar.updateButtonText).toHaveBeenCalled();
         });
 
         test("Button Text should revert to initial value when serviceZip textfield has new text", async () => {
@@ -345,7 +345,7 @@ describe("license-plate-lookup.vue", () => {
             await wrapper.vm.$nextTick();
 
             //Assert
-            expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
+            expect(wrapper.vm.$refs.navbar.updateButtonText).toHaveBeenCalled();
         });
     });
 
@@ -703,8 +703,8 @@ function setupMocks({
 
     wrapper.vm.setCmsContent = jest.fn();
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-    wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+    wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
+    wrapper.vm.$refs.navbar.removeLoader = jest.fn();
 
     return { wrapper, apiPromise };
 }
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 326215243..40eca144b 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -77,8 +77,8 @@
                     :manualCopy="AlertMatchedDifferentVehicleBody"
                     alertClass="alert-warning"
                     v-bind:isDismissible="false" />
-                <funnelFooter
-                    ref="funnelFooter"
+                <navbar
+                    ref="navbar"
                     cmsWidgetName="FunnelFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     @back-clicked="backButtonAction"
@@ -91,7 +91,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
@@ -230,7 +230,7 @@ export default {
             ).catch(() => {
                 // No VIN found.
                 this.displayVinNotFoundAlert = true;
-                return this.$refs.funnelFooter.removeLoader();
+                return this.$refs.navbar.removeLoader();
             });
             // If no VIN was found, stop processing after displaying alert
             if (!vinLookup) {
@@ -241,7 +241,7 @@ export default {
             const isZipValid = resultMap.serviceZipValidationResponse.isValid;
             if (this.serviceZipCode && !isZipValid) {
                 this.displayInvalidZipAlert = true;
-                return this.$refs.funnelFooter.removeLoader();
+                return this.$refs.navbar.removeLoader();
             }
             this.displayInvalidZipAlert = false;
 
@@ -264,10 +264,10 @@ export default {
                 );
 
                 // Update button "Continue with..."
-                this.$refs.funnelFooter.updateButtonText(
+                this.$refs.navbar.updateButtonText(
                     `Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`
                 );
-                return this.$refs.funnelFooter.removeLoader();
+                return this.$refs.navbar.removeLoader();
             }
 
             // If the either the registration zip code or service zip code are not serviceable
@@ -275,7 +275,7 @@ export default {
             if (!this.isZipServiceable) {
                 this.displayNonServiceableZipAlert = true;
                 this.showServiceZipField = true;
-                return this.$refs.funnelFooter.removeLoader();
+                return this.$refs.navbar.removeLoader();
             }
 
             // If the registration zip code is serviceable and nothing was entered for the service zip code
@@ -367,26 +367,26 @@ export default {
     },
     watch: {
         licensePlate() {
-            this.$refs.funnelFooter.updateButtonText(
+            this.$refs.navbar.updateButtonText(
                 this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
             );
         },
         registrationZipCode() {
-            this.$refs.funnelFooter.updateButtonText(
+            this.$refs.navbar.updateButtonText(
                 this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
             );
         },
         serviceZipCode() {
             // If they modify the service zip code, then hide the error message.
             this.displayNonServiceableZipAlert = false;
-            this.$refs.funnelFooter.updateButtonText(
+            this.$refs.navbar.updateButtonText(
                 this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
             );
         },
     },
     components: {
         funnelHeader,
-        funnelFooter,
+        navbar,
         vehicleBanner,
         funnelSubHeader,
         textboxQuestion,
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index ff5cb0e35..268501b26 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -6,7 +6,7 @@
             <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
             <hr class="mt-0" />
             <div class="fade-on-route-transition sub-container make-tall">
-                <funnel-footer
+                <navbar
                     cmsWidgetName="FunnelFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     :isBackButtonHidden="shouldHideBackButton"
@@ -20,7 +20,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -63,7 +63,7 @@ export default {
     },
     components: {
         funnelHeader,
-        funnelFooter,
+        navbar,
         funnelSubHeader,
         Form,
     },
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 3076e8acc..792a6123b 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -1,19 +1,28 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles">
-            <loadingModal ref="loadingModal" />
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall">
-                <cashOrInsuranceQuestion
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-2 col-lg-3">&nbsp;</div>
+                <div class="col-md-8 col-lg-6">
+                    <vehicleBanner
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
+
+                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
+
+                    <cashOrInsuranceQuestion
                     ref="cashOrInsurance"
                     cmsWidgetName="CashOrInsuranceQuestionWidget"
                     v-model="isInsuranceSelected"
                     groupName="CashOrInsuranceQuestion" />
-                <servicePackageQuestion
+
+                    <servicePackageQuestion
                     ref="servicePackage"
                     cashCmsWidgetName="CashServicePackageQuestionWidget"
                     insuranceCmsWidgetName="InsuranceServicePackageQuestionWidget"
@@ -25,21 +34,25 @@
                     validationRules="option-required"
                     isRequired />
 
-                <textBlock
+                    <textBlock
                     cmsWidgetName="quoteDisclaimer"
                     justifyText="left"
                     typeStyle="caption"
                     class="mt-4" />
-                <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
-                <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
-                <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
-                <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
-                <funnel-footer
+
+                    <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
+                    <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
+                    <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
+                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
+
+                    <navbar
                     cmsWidgetName="FunnelFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     :isBackButtonHidden="shouldHideBackButton"
                     @back-clicked="backButtonAction"
                     @ForwardClicked="forwardButtonAction" />
+                </div>
+                <div class="col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
@@ -48,7 +61,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
@@ -104,8 +117,8 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
         const clonedGlassParts = store.getters.order.lineItems.glassParts
-            ? JSON.parse(JSON.stringify(store.getters.order.lineItems.glassParts))
-            : [];
+        ? JSON.parse(JSON.stringify(store.getters.order.lineItems.glassParts))
+        : [];
         const availableLineItems = [
             resultMap.rainDefense,
             ...resultMap.supportingItems,
@@ -156,101 +169,101 @@ export default {
                 (store.getters.order.damage.isRepair ||
                     (store.getters.order.lineItems?.glassParts != null &&
                         store.getters.order.lineItems.glassParts.length > 0)) &&
-                store.getters.order.referralNumber?.length !== 6
-            );
-        },
-        getDefaultIsInsuranceSelectedValue(availableLineItems) {
-            const serviceLocationState = store.getters.order.serviceLocation.state;
-            // Override if coming back from QuoteDetails. Remove override after Quote release
-            const isInsuranceOverrideValue = this.$route.query?.isInsurance;
+                        store.getters.order.referralNumber?.length !== 6
+                    );
+                },
+                getDefaultIsInsuranceSelectedValue(availableLineItems) {
+                    const serviceLocationState = store.getters.order.serviceLocation.state;
+                    // Override if coming back from QuoteDetails. Remove override after Quote release
+                    const isInsuranceOverrideValue = this.$route.query?.isInsurance;
 
-            const defaultIsInsuranceSelectedValue = this.$store.getters.order.payment.isInsurance;
-            //Default to Insurance Tab if user Service zip is from certain States
-            if (
-                serviceLocationState != null &&
-                payWithInsuranceStates.find((item) => item === serviceLocationState)
-            )
-                return true;
-            else if (isInsuranceOverrideValue != null) {
-                return isInsuranceOverrideValue == "true";
-            } else if (defaultIsInsuranceSelectedValue != null) {
-                return defaultIsInsuranceSelectedValue;
-            } else {
-                return availableLineItems
-                    ? baseMixin.methods.getTierOnePackagePrice(
-                          baseMixin.methods.filterOutFees(availableLineItems)
-                      ) > 300
-                    : null;
-            }
-        },
-        vapsItemsSelectedAction(vapsItemsSelected) {
-            this.selectedVaps = vapsItemsSelected;
-        },
-        backButtonAction() {
-            vehicleQuestionsMixin.methods.navigateBack(this);
-        },
-        forwardButtonAction() {
-            this.dispatchStoreAction(
-                this.storeActions.SAVE_PAYMENT_TYPE,
-                this.isInsuranceSelected,
-                false
-            );
+                    const defaultIsInsuranceSelectedValue = this.$store.getters.order.payment.isInsurance;
+                    //Default to Insurance Tab if user Service zip is from certain States
+                    if (
+                        serviceLocationState != null &&
+                        payWithInsuranceStates.find((item) => item === serviceLocationState)
+                    )
+                    return true;
+                    else if (isInsuranceOverrideValue != null) {
+                        return isInsuranceOverrideValue == "true";
+                    } else if (defaultIsInsuranceSelectedValue != null) {
+                        return defaultIsInsuranceSelectedValue;
+                    } else {
+                        return availableLineItems
+                        ? baseMixin.methods.getTierOnePackagePrice(
+                            baseMixin.methods.filterOutFees(availableLineItems)
+                        ) > 300
+                        : null;
+                    }
+                },
+                vapsItemsSelectedAction(vapsItemsSelected) {
+                    this.selectedVaps = vapsItemsSelected;
+                },
+                backButtonAction() {
+                    vehicleQuestionsMixin.methods.navigateBack(this);
+                },
+                forwardButtonAction() {
+                    this.dispatchStoreAction(
+                        this.storeActions.SAVE_PAYMENT_TYPE,
+                        this.isInsuranceSelected,
+                        false
+                    );
 
-            if (!this.isInsuranceSelected) {
-                this.dispatchStoreAction(
-                    this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
-                    applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
-                    false
-                );
-            }
+                    if (!this.isInsuranceSelected) {
+                        this.dispatchStoreAction(
+                            this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
+                            applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
+                            false
+                        );
+                    }
 
-            if (
-                this.$store.getters.order.payment.parentAccountNumber !=
-                applicationConfig.CASH_PARENT_ACCOUNT_NUMBER
-            ) {
-                this.supportingItems = this.filterOutFees(this.supportingItems);
-            }
+                    if (
+                        this.$store.getters.order.payment.parentAccountNumber !=
+                        applicationConfig.CASH_PARENT_ACCOUNT_NUMBER
+                    ) {
+                        this.supportingItems = this.filterOutFees(this.supportingItems);
+                    }
 
-            if (this.pricedGlassParts.length > 0) {
-                this.dispatchStoreAction(
-                    this.storeActions.SAVE_GLASS_PART_PRICES,
-                    this.pricedGlassParts,
-                    false
-                );
-            }
+                    if (this.pricedGlassParts.length > 0) {
+                        this.dispatchStoreAction(
+                            this.storeActions.SAVE_GLASS_PART_PRICES,
+                            this.pricedGlassParts,
+                            false
+                        );
+                    }
 
-            this.dispatchStoreAction(this.storeActions.SAVE_VAPS, this.selectedVaps, false);
+                    this.dispatchStoreAction(this.storeActions.SAVE_VAPS, this.selectedVaps, false);
 
-            const payment = this.$store.getters.payment;
-            if (payment.isInsurance) {
-                navigateToHeritageFunnel({
-                    shouldSaveSession: true,
-                    loadingModal: this.$refs.loadingModal,
-                });
-            } else {
-                this.$router.navigateWithSaving(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_CASH,
-                    this.$route
-                );
-            }
-        },
-    },
-    components: {
-        funnelHeader,
-        funnelFooter,
-        vehicleBanner,
-        funnelSubHeader,
-        Form,
-        textBlock,
-        cashOrInsuranceQuestion,
-        servicePackageQuestion,
-        contentGroupModal,
-        loadingModal,
-    },
-};
-</script>
-<style scoped>
-.text-block {
-    display: block;
-}
-</style>
+                    const payment = this.$store.getters.payment;
+                    if (payment.isInsurance) {
+                        navigateToHeritageFunnel({
+                            shouldSaveSession: true,
+                            loadingModal: this.$refs.loadingModal,
+                        });
+                    } else {
+                        this.$router.navigateWithSaving(
+                            this.navigationScenarios.CLICKED_FORWARD_WITH_CASH,
+                            this.$route
+                        );
+                    }
+                },
+            },
+            components: {
+                funnelHeader,
+                navbar,
+                vehicleBanner,
+                funnelSubHeader,
+                Form,
+                textBlock,
+                cashOrInsuranceQuestion,
+                servicePackageQuestion,
+                contentGroupModal,
+                loadingModal,
+            },
+        };
+        </script>
+        <style scoped>
+        .text-block {
+            display: block;
+        }
+        </style>
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index 2fb033ea3..592654db1 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -1,105 +1,116 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <!-- When customer-details is added: v-slot="{ meta }" -->
-        <div class="page-container-grouped-styles">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-
-            <textBlock
-                :customText="subHeaderTitle"
-                typeStyle="h5"
-                justifyText="center"
-                margin="mt-1"
-                class="dark-header" />
-            <textBlock
-                :customText="subHeaderBody"
-                typeStyle="body"
-                justifyText="left"
-                margin="mt-0 mb-2" />
-
-            <buttonMain
-                ref="buttonMain"
-                isPrimary
-                :buttonText="forwardButtonText"
-                loaderColor="white"
-                class="mb-2"
-                @click-event="forwardButtonAction" />
-
-            <div>
-                <hr />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
             </div>
+            <div class="row">
+                <div class="col-md-2 col-lg-3">&nbsp;</div>
+                <div class="col-md-8 col-lg-6">
+                    <vehicleBanner
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
 
-            <textBlock
-                customText="Appointment Details"
-                typeStyle="label bold"
-                justifyText="justify-text-left"
-                margin="mt-0"
-                class="dark-header" />
+                    <textBlock
+                        :customText="subHeaderTitle"
+                        typeStyle="h5"
+                        justifyText="center"
+                        margin="mt-1"
+                        class="dark-header" />
+                    <textBlock
+                        :customText="subHeaderBody"
+                        typeStyle="body"
+                        justifyText="left"
+                        margin="mt-0 mb-2" />
 
-            <div class="px-4">
-                <vehicleReview
-                    cmsWidgetName="VehicleReviewWidget"
-                    :vehicle="vehicleInfo"
-                    @edit-clicked="editVehicle" />
+                    <buttonMain
+                        ref="buttonMain"
+                        isPrimary
+                        :buttonText="forwardButtonText"
+                        loaderColor="white"
+                        class="mb-2"
+                        @click-event="forwardButtonAction" />
 
-                <hr class="my-0" />
+                    <div>
+                        <hr />
+                    </div>
 
-                <damageReview
-                    cmsWidgetName="DamageReviewWidget"
-                    damageLocationsWidgetName="DamageLocationsWidget"
-                    :damage="damageInfo"
-                    @edit-clicked="editDamage" />
+                    <textBlock
+                        customText="Appointment Details"
+                        typeStyle="label bold"
+                        justifyText="justify-text-left"
+                        margin="mt-0"
+                        class="dark-header" />
 
-                <hr class="my-0" />
+                    <div class="px-4">
+                        <vehicleReview
+                            cmsWidgetName="VehicleReviewWidget"
+                            :vehicle="vehicleInfo"
+                            @edit-clicked="editVehicle" />
 
-                <servicePackageReview
-                    ref="servicePackageReview"
-                    servicePackageOptionsCmsName="ServicePackageTitle"
-                    defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
-                    vapsItemsCmsName="VapsItemDescriptions"
-                    :damage="damageInfo"
-                    :lineItems="lineItems"
-                    @edit-clicked="editServicePackage" />
+                        <hr class="my-0" />
 
-                <hr class="my-0" />
+                        <damageReview
+                            cmsWidgetName="DamageReviewWidget"
+                            damageLocationsWidgetName="DamageLocationsWidget"
+                            :damage="damageInfo"
+                            @edit-clicked="editDamage" />
 
-                <serviceLocationReview
-                    cmsWidgetName="ServiceLocationTitleWidget"
-                    :serviceLocation="serviceLocationInfo"
-                    @edit-clicked="editServiceLocation" />
+                        <hr class="my-0" />
 
-                <hr class="my-0" />
+                        <servicePackageReview
+                            ref="servicePackageReview"
+                            servicePackageOptionsCmsName="ServicePackageTitle"
+                            defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
+                            vapsItemsCmsName="VapsItemDescriptions"
+                            :damage="damageInfo"
+                            :lineItems="lineItems"
+                            @edit-clicked="editServicePackage" />
 
-                <scheduleReview
-                    cmsWidgetName="ScheduleWidget"
-                    :appointmentType="appointmentType"
-                    @edit-clicked="editSchedule" />
+                        <hr class="my-0" />
 
-                <hr class="my-0" />
+                        <serviceLocationReview
+                            cmsWidgetName="ServiceLocationTitleWidget"
+                            :serviceLocation="serviceLocationInfo"
+                            @edit-clicked="editServiceLocation" />
 
-                <customerReview
-                    cmsWidgetName="CustomerReviewWidget"
-                    :customer="customerInfo"
-                    @edit-clicked="editCustomerDetails" />
+                        <hr class="my-0" />
+
+                        <scheduleReview
+                            cmsWidgetName="ScheduleWidget"
+                            :appointmentType="appointmentType"
+                            @edit-clicked="editSchedule" />
+
+                        <hr class="my-0" />
+
+                        <customerReview
+                            cmsWidgetName="CustomerReviewWidget"
+                            :customer="customerInfo"
+                            @edit-clicked="editCustomerDetails" />
+                    </div>
+
+                    <div>
+                        <hr class="my-0" />
+                    </div>
+
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+
+                    </div>
+                    <div class="col-md-2 col-lg-3">&nbsp;</div>
+                </div>
             </div>
-
-            <div>
-                <hr class="my-0" />
-            </div>
-
-            <funnelFooter
-                cmsWidgetName="FunnelFooterWidget"
-                @back-clicked="backButtonAction"
-                @ForwardClicked="forwardButtonAction" />
-        </div>
     </Form>
 </template>
 
 <script>
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import buttonMain from "@/ux-components/button-main/button-main";
 import textBlock from "@/digital-components/text-block/text-block";
@@ -292,7 +303,7 @@ export default {
     },
     components: {
         funnelHeader,
-        funnelFooter,
+        navbar,
         vehicleBanner,
         buttonMain,
         textBlock,
diff --git a/src/layouts/schedule/schedule.spec.js b/src/layouts/schedule/schedule.spec.js
index e8447f3ab..5ce90638c 100644
--- a/src/layouts/schedule/schedule.spec.js
+++ b/src/layouts/schedule/schedule.spec.js
@@ -623,7 +623,7 @@ function setupMocks({ customMountOptions }) {
     wrapper.vm.setCmsContent = jest.fn();
     wrapper.vm.$refs.datePicker.initializeComponent = jest.fn();
     wrapper.vm.$refs.locationAlerts.initializeComponent = jest.fn();
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+    wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
     wrapper.vm.$refs.timeSlotModalQuestion.openModal = jest.fn();
 
     return { wrapper };
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 156d3696d..23564a4c7 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,8 +1,15 @@
 <template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles">
-            <loadingModal ref="loadingModal" />
+<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+<loadingModal ref="loadingModal" />
+<div class="container-fluid">
+    <div class="row">
+        <div class="col">
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-2 col-lg-3">&nbsp;</div>
+        <div class="col-md-8 col-lg-6">
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
             <template v-if="ChangeShopLink.length">
                 <textBlock
@@ -39,20 +46,24 @@
                 :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
                 @time-slot-modal-closed="timeSlotModalClosed"
                 validationRules="time-slot-selection-required" />
-            <funnel-footer
+            <navbar
                 cmsWidgetName="FunnelFooterWidget"
-                ref="funnelFooter"
+                ref="navbar"
                 :isForwardActionDisabled="!meta.valid"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
+
+            </div>
+            <div class="col-md-2 col-lg-3">&nbsp;</div>
         </div>
-    </Form>
+    </div>
+</Form>
 </template>
 
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form, defineRule } from "vee-validate";
@@ -69,9 +80,9 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
 import {
-    calcDaysBetweenDates,
-    convertDateStringToDate,
-    sumDateString,
+calcDaysBetweenDates,
+convertDateStringToDate,
+sumDateString,
 } from "@/layouts/schedule/helpers/schedule-helper";
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
 import { errorMessages } from "@/constants/error-messages";
@@ -81,431 +92,431 @@ import store from "@/store";
 // DEFINE VALIDATION RULES
 defineRule("date-required", required(errorMessages.DATE_REQUIRED));
 defineRule("time-slot-selection-required", (value) => {
-    if (value?.timeSlot?.routeCode == null) {
-        return errorMessages.DATE_REQUIRED;
-    }
-    return true;
+if (value?.timeSlot?.routeCode == null) {
+    return errorMessages.DATE_REQUIRED;
+}
+return true;
 });
 
 // Define constants
 const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
 
 const getAvailableDates = async (
-    startDateString,
-    endDateString,
-    appointmentType,
-    providerNumber
+startDateString,
+endDateString,
+appointmentType,
+providerNumber
 ) => {
-    const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
-    const difference = calcDaysBetweenDates(startDateString, endDateString);
-    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
-    const storeActionConfigs = [];
-    const timeSlotsData = {};
-    timeSlotsData.days = [];
-    let apiStartDate = startDateString;
-    let apiEndDate = endDateString;
+const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
+const difference = calcDaysBetweenDates(startDateString, endDateString);
+const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
+const storeActionConfigs = [];
+const timeSlotsData = {};
+timeSlotsData.days = [];
+let apiStartDate = startDateString;
+let apiEndDate = endDateString;
 
-    for (let i = 1; i <= apiCallsCount; i++) {
-        let storeActionConfig;
+for (let i = 1; i <= apiCallsCount; i++) {
+    let storeActionConfig;
 
-        if (i > 1) {
-            apiStartDate = sumDateString(apiEndDate, 1);
-            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
+    if (i > 1) {
+        apiStartDate = sumDateString(apiEndDate, 1);
+        apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
 
-            if (i === apiCallsCount) {
-                apiEndDate = endDateString;
-            }
-        } else {
-            if (apiEndDate > apiEndDateLimit) {
-                apiEndDate = apiEndDateLimit;
-            }
+        if (i === apiCallsCount) {
+            apiEndDate = endDateString;
         }
-
-        if (appointmentType === AppointmentTypeStrings.MOBILE) {
-            storeActionConfig = {
-                storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
-                payload: {
-                    startDate: apiStartDate,
-                    endDate: apiEndDate,
-                },
-            };
-        } else {
-            storeActionConfig = {
-                storeAction: storeActions.GET_SHOP_TIME_SLOTS,
-                payload: {
-                    startDate: apiStartDate,
-                    endDate: apiEndDate,
-                    shopAppointmentType: appointmentType,
-                    providerNumber: providerNumber,
-                },
-            };
+    } else {
+        if (apiEndDate > apiEndDateLimit) {
+            apiEndDate = apiEndDateLimit;
         }
-        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
     }
 
-    const timeSlotsResponsesData = {
-        days: [],
-    };
-
-    function compareDayStrings(a, b) {
-        if (a.date < b.date) return -1;
-        if (a.date > b.date) return 1;
-        return 0;
+    if (appointmentType === AppointmentTypeStrings.MOBILE) {
+        storeActionConfig = {
+            storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
+            payload: {
+                startDate: apiStartDate,
+                endDate: apiEndDate,
+            },
+        };
+    } else {
+        storeActionConfig = {
+            storeAction: storeActions.GET_SHOP_TIME_SLOTS,
+            payload: {
+                startDate: apiStartDate,
+                endDate: apiEndDate,
+                shopAppointmentType: appointmentType,
+                providerNumber: providerNumber,
+            },
+        };
     }
+    if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
+}
 
-    const makeParallelCalls = async () => {
-        await Promise.all(
-            storeActionConfigs.map(async (storeAction) => {
-                const timeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
-                    storeAction.storeAction,
-                    storeAction.payload,
-                    false
-                );
-                timeSlotsResponsesData.estimatedServiceMinutesMinimum =
-                    timeSlotsResponse.data.estimatedServiceMinutesMinimum;
-                timeSlotsResponsesData.estimatedServiceMinutesMaximum =
-                    timeSlotsResponse.data.estimatedServiceMinutesMaximum;
-                timeSlotsResponsesData.days = [
-                    ...timeSlotsResponsesData.days,
-                    ...timeSlotsResponse.data.days,
-                ];
-            })
-        );
-    };
+const timeSlotsResponsesData = {
+    days: [],
+};
 
-    return makeParallelCalls().then(() => {
-        // sort days chronologically
-        timeSlotsResponsesData.days.sort(compareDayStrings);
-        return timeSlotsResponsesData;
-    });
+function compareDayStrings(a, b) {
+    if (a.date < b.date) return -1;
+    if (a.date > b.date) return 1;
+    return 0;
+}
+
+const makeParallelCalls = async () => {
+    await Promise.all(
+        storeActionConfigs.map(async (storeAction) => {
+            const timeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
+                storeAction.storeAction,
+                storeAction.payload,
+                false
+            );
+            timeSlotsResponsesData.estimatedServiceMinutesMinimum =
+                timeSlotsResponse.data.estimatedServiceMinutesMinimum;
+            timeSlotsResponsesData.estimatedServiceMinutesMaximum =
+                timeSlotsResponse.data.estimatedServiceMinutesMaximum;
+            timeSlotsResponsesData.days = [
+                ...timeSlotsResponsesData.days,
+                ...timeSlotsResponse.data.days,
+            ];
+        })
+    );
+};
+
+return makeParallelCalls().then(() => {
+    // sort days chronologically
+    timeSlotsResponsesData.days.sort(compareDayStrings);
+    return timeSlotsResponsesData;
+});
 };
 
 export default {
-    name: "schedule",
-    data() {
-        return {
-            selectedDate: this.getSelectedDate(),
-            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
-            selectableDatesData: [],
-            mobilePremiumAppointmentFee: null,
-        };
-    },
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-        let preSelectedDate = await store.getters.order.schedule.date;
-        if (!preSelectedDate || preSelectedDate.startTime === null) {
-            preSelectedDate = null;
-        }
+name: "schedule",
+data() {
+    return {
+        selectedDate: this.getSelectedDate(),
+        selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
+        selectableDatesData: [],
+        mobilePremiumAppointmentFee: null,
+    };
+},
+async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    let preSelectedDate = await store.getters.order.schedule.date;
+    if (!preSelectedDate || preSelectedDate.startTime === null) {
+        preSelectedDate = null;
+    }
 
-        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
-            // setup config options for date-picker
-            selectableDatesSetting: "custom",
-            initialViewRowsToShow: 5,
-            customSelectableDatesCallback: getAvailableDates,
-            preSelectedDate: preSelectedDate,
-        });
+    const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
+        // setup config options for date-picker
+        selectableDatesSetting: "custom",
+        initialViewRowsToShow: 5,
+        customSelectableDatesCallback: getAvailableDates,
+        preSelectedDate: preSelectedDate,
+    });
 
-        const premiumFeePromise = baseMixin.methods.dispatchStoreAction(
-            storeActions.GET_MOBILE_PREMIUM_FEE
-        );
+    const premiumFeePromise = baseMixin.methods.dispatchStoreAction(
+        storeActions.GET_MOBILE_PREMIUM_FEE
+    );
 
-        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
-            if (result.data) {
-                return baseMixin.methods.dispatchStoreAction(
-                    storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
-                    {
-                        availableLineItems: [result.data],
-                    },
-                    false
-                );
-            } else {
-                return result.data;
-            }
-        });
-
-        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
-            store.getters.order.serviceLocation.zipCodeCtu,
-            store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
-        );
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-            {
-                resultKey: "alertReasons",
-                promise: alertReasonsPromise,
-            },
-            {
-                resultKey: "datePickerInitialData",
-                promise: datePickerInitialDataPromise,
-            },
-            {
-                resultKey: "premiumFeeWithPrice",
-                promise: premiumFeeWithPricePromise,
-            },
-        ];
-
-        const resultMap = await settleAllPromises(promiseResultMap);
-
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
-            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
-            vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse;
-            vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
-                ? resultMap.premiumFeeWithPrice[0]
-                : null;
-            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
-        });
-    },
-    computed: {
-        ChangeShopLinkText() {
-            return this.getCmsContent("ChangeShopLink", "Text");
-        },
-        ChangeShopLink() {
-            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
-            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
-        },
-        appointmentType() {
-            return this.$store.getters.order.serviceLocation.appointmentType;
-        },
-        timeSlotsForSelectedDate() {
-            if (!this.selectedDate) {
-                return null;
-            }
-
-            return this.selectableDatesData.days?.find(
-                (selectableDate) => selectableDate.date === this.selectedDate
-            );
-        },
-    },
-    methods: {
-        splitCopyOnCMSPlaceHolder,
-        arePagePrerequisitesValid() {
-            const serviceLocation = store.getters.order.serviceLocation;
-
-            const serviceLocationPreReqs =
-                serviceLocation.zipCode &&
-                serviceLocation.zipCodeCtu &&
-                serviceLocation.appointmentType &&
-                (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
-                    serviceLocation.provider.providerNumber);
-
-            const paymentInfo = store.getters.payment.isInsurance !== null;
-            const supportingItems = store.getters.lineItems.supportingItems !== null;
-
-            const damageInfo =
-                store.getters.order.damage.isRepair ||
-                (store.getters.order.lineItems?.glassParts != null &&
-                    store.getters.order.lineItems.glassParts.length > 0);
-
-            return serviceLocationPreReqs && paymentInfo && supportingItems && damageInfo;
-        },
-        async getAvailableDatesMethod(startDate, endDate) {
-            const newShopTimeSlots = await getAvailableDates(
-                startDate,
-                endDate,
-                this.appointmentType,
-                this.$store.getters.order.serviceLocation.provider.providerNumber
-            );
-            // ADD API CALL RESULTS TO EXISTING DATE DATA
-            this.selectableDatesData.days = this.selectableDatesData.days.concat(
-                newShopTimeSlots.days
-            );
-            return newShopTimeSlots;
-        },
-        getAvailableDates,
-        getServiceZipCtuCodeFromStore() {
-            return store.getters.order.serviceLocation.zipCodeCtu;
-        },
-        openInshopTimeSlotsModal() {
-            this.$refs["timeSlotModalQuestion"].openModal();
-        },
-        getSelectedDate() {
-            return store.getters.order.schedule.date;
-        },
-        getSelectedTimeSlotInfo() {
-            const supportingItems = this.getSupportingItems();
-            const isPremiumAppointment =
-                !!supportingItems.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE)
-                    .length > 0;
-
-            const selectedTimeSlotInfo = {
-                timeSlot: store.getters.order.schedule,
-                isPremiumAppointment: isPremiumAppointment,
-            };
-
-            return selectedTimeSlotInfo;
-        },
-        getSupportingItems() {
-            return store.getters.lineItems.supportingItems;
-        },
-        timeSlotModalClosed() {
-            // Clear the selectedDate if no timeSlot has been selected
-            if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
-                this.selectedDate = null;
-            }
-        },
-        updateFooterButtonText(timeSlotInfo) {
-            let funnelFooterButtonText;
-            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
-                funnelFooterButtonText = "Continue";
-            } else {
-                funnelFooterButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
-                    timeSlotInfo.timeSlot.date
-                )}`;
-
-                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                    funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.startTime
-                    )}`;
-                } else if (
-                    this.appointmentType === AppointmentTypeStrings.MOBILE &&
-                    !timeSlotInfo.isPremiumAppointment
-                ) {
-                    funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.startTime,
-                        true
-                    )} - ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.endTime,
-                        true
-                    )}`;
-                }
-            }
-            this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);
-        },
-        convertSelectedDateToShortMonthAndDay(selectedDate) {
-            // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = convertDateStringToDate(selectedDate);
-            // Ex: April 25
-            return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
-        },
-        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
-            // Expected input: "HH:MM"
-            let hours = parseInt(militaryTimeInput.split(":")[0]);
-            const minutes = militaryTimeInput.split(":")[1];
-            const meridianNotation = hours > 11 ? "PM" : "AM";
-
-            if (hours > 12) {
-                hours -= 12;
-            }
-
-            if (shouldTrimMinutesIfEmpty && minutes === "00") {
-                return `${hours} ${meridianNotation}`;
-            } else {
-                return `${hours}:${minutes} ${meridianNotation}`;
-            }
-        },
-        backButtonAction() {
-            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-        forwardButtonAction() {
-            this.updateSupportingItems();
-
-            this.dispatchStoreAction(
-                this.storeActions.SAVE_SCHEDULE,
-                this.selectedTimeSlotInfo.timeSlot,
+    const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
+        if (result.data) {
+            return baseMixin.methods.dispatchStoreAction(
+                storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
+                {
+                    availableLineItems: [result.data],
+                },
                 false
             );
+        } else {
+            return result.data;
+        }
+    });
 
-            this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
+    const alertReasonsPromise = locationAlerts.methods.loadInitialData(
+        store.getters.order.serviceLocation.zipCodeCtu,
+        store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
+    );
+
+    // Settle promises and get results
+    const promiseResultMap = [
+        {
+            resultKey: "cmsContent",
+            promise: cmsContentPromise,
         },
-        updateSupportingItems() {
-            const supportingItems = this.getSupportingItems();
+        {
+            resultKey: "alertReasons",
+            promise: alertReasonsPromise,
+        },
+        {
+            resultKey: "datePickerInitialData",
+            promise: datePickerInitialDataPromise,
+        },
+        {
+            resultKey: "premiumFeeWithPrice",
+            promise: premiumFeeWithPricePromise,
+        },
+    ];
 
-            // if we have a premium fee(early bird), then save/update supporting items
-            if (
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+        vm.setCmsContent(resultMap.cmsContent);
+        vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
+        vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
+        vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse;
+        vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
+            ? resultMap.premiumFeeWithPrice[0]
+            : null;
+        vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
+    });
+},
+computed: {
+    ChangeShopLinkText() {
+        return this.getCmsContent("ChangeShopLink", "Text");
+    },
+    ChangeShopLink() {
+        // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
+        return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
+    },
+    appointmentType() {
+        return this.$store.getters.order.serviceLocation.appointmentType;
+    },
+    timeSlotsForSelectedDate() {
+        if (!this.selectedDate) {
+            return null;
+        }
+
+        return this.selectableDatesData.days?.find(
+            (selectableDate) => selectableDate.date === this.selectedDate
+        );
+    },
+},
+methods: {
+    splitCopyOnCMSPlaceHolder,
+    arePagePrerequisitesValid() {
+        const serviceLocation = store.getters.order.serviceLocation;
+
+        const serviceLocationPreReqs =
+            serviceLocation.zipCode &&
+            serviceLocation.zipCodeCtu &&
+            serviceLocation.appointmentType &&
+            (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
+                serviceLocation.provider.providerNumber);
+
+        const paymentInfo = store.getters.payment.isInsurance !== null;
+        const supportingItems = store.getters.lineItems.supportingItems !== null;
+
+        const damageInfo =
+            store.getters.order.damage.isRepair ||
+            (store.getters.order.lineItems?.glassParts != null &&
+                store.getters.order.lineItems.glassParts.length > 0);
+
+        return serviceLocationPreReqs && paymentInfo && supportingItems && damageInfo;
+    },
+    async getAvailableDatesMethod(startDate, endDate) {
+        const newShopTimeSlots = await getAvailableDates(
+            startDate,
+            endDate,
+            this.appointmentType,
+            this.$store.getters.order.serviceLocation.provider.providerNumber
+        );
+        // ADD API CALL RESULTS TO EXISTING DATE DATA
+        this.selectableDatesData.days = this.selectableDatesData.days.concat(
+            newShopTimeSlots.days
+        );
+        return newShopTimeSlots;
+    },
+    getAvailableDates,
+    getServiceZipCtuCodeFromStore() {
+        return store.getters.order.serviceLocation.zipCodeCtu;
+    },
+    openInshopTimeSlotsModal() {
+        this.$refs["timeSlotModalQuestion"].openModal();
+    },
+    getSelectedDate() {
+        return store.getters.order.schedule.date;
+    },
+    getSelectedTimeSlotInfo() {
+        const supportingItems = this.getSupportingItems();
+        const isPremiumAppointment =
+            !!supportingItems.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE)
+                .length > 0;
+
+        const selectedTimeSlotInfo = {
+            timeSlot: store.getters.order.schedule,
+            isPremiumAppointment: isPremiumAppointment,
+        };
+
+        return selectedTimeSlotInfo;
+    },
+    getSupportingItems() {
+        return store.getters.lineItems.supportingItems;
+    },
+    timeSlotModalClosed() {
+        // Clear the selectedDate if no timeSlot has been selected
+        if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
+            this.selectedDate = null;
+        }
+    },
+    updateFooterButtonText(timeSlotInfo) {
+        let navbarButtonText;
+        if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
+            navbarButtonText = "Continue";
+        } else {
+            navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
+                timeSlotInfo.timeSlot.date
+            )}`;
+
+            if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                    timeSlotInfo.timeSlot.startTime
+                )}`;
+            } else if (
                 this.appointmentType === AppointmentTypeStrings.MOBILE &&
-                this.selectedTimeSlotInfo?.isPremiumAppointment
+                !timeSlotInfo.isPremiumAppointment
             ) {
-                const earlyBirdIndex = supportingItems.findIndex(
-                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
-                );
+                navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                    timeSlotInfo.timeSlot.startTime,
+                    true
+                )} - ${this.getDisplayTextForMilitaryTime(
+                    timeSlotInfo.timeSlot.endTime,
+                    true
+                )}`;
+            }
+        }
+        this.$refs.navbar.updateButtonText(navbarButtonText);
+    },
+    convertSelectedDateToShortMonthAndDay(selectedDate) {
+        // This conversion ensures we don't get get GMT induced date changes
+        const dateObject = convertDateStringToDate(selectedDate);
+        // Ex: April 25
+        return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
+    },
+    getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
+        // Expected input: "HH:MM"
+        let hours = parseInt(militaryTimeInput.split(":")[0]);
+        const minutes = militaryTimeInput.split(":")[1];
+        const meridianNotation = hours > 11 ? "PM" : "AM";
 
-                if (earlyBirdIndex >= 0) {
-                    supportingItems[earlyBirdIndex].laborAmount =
-                        this.mobilePremiumAppointmentFee.laborAmount;
-                    supportingItems[earlyBirdIndex].selingPrice =
-                        this.mobilePremiumAppointmentFee.selingPrice;
-                    supportingItems[earlyBirdIndex].kitPrice =
-                        this.mobilePremiumAppointmentFee.kitPrice;
-                } else {
-                    supportingItems.push(this.mobilePremiumAppointmentFee);
-                }
+        if (hours > 12) {
+            hours -= 12;
+        }
 
+        if (shouldTrimMinutesIfEmpty && minutes === "00") {
+            return `${hours} ${meridianNotation}`;
+        } else {
+            return `${hours}:${minutes} ${meridianNotation}`;
+        }
+    },
+    backButtonAction() {
+        this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    forwardButtonAction() {
+        this.updateSupportingItems();
+
+        this.dispatchStoreAction(
+            this.storeActions.SAVE_SCHEDULE,
+            this.selectedTimeSlotInfo.timeSlot,
+            false
+        );
+
+        this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
+    },
+    updateSupportingItems() {
+        const supportingItems = this.getSupportingItems();
+
+        // if we have a premium fee(early bird), then save/update supporting items
+        if (
+            this.appointmentType === AppointmentTypeStrings.MOBILE &&
+            this.selectedTimeSlotInfo?.isPremiumAppointment
+        ) {
+            const earlyBirdIndex = supportingItems.findIndex(
+                (item) => item.partType == PREMIUM_FEE_PART_TYPE
+            );
+
+            if (earlyBirdIndex >= 0) {
+                supportingItems[earlyBirdIndex].laborAmount =
+                    this.mobilePremiumAppointmentFee.laborAmount;
+                supportingItems[earlyBirdIndex].selingPrice =
+                    this.mobilePremiumAppointmentFee.selingPrice;
+                supportingItems[earlyBirdIndex].kitPrice =
+                    this.mobilePremiumAppointmentFee.kitPrice;
+            } else {
+                supportingItems.push(this.mobilePremiumAppointmentFee);
+            }
+
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
+                supportingItems,
+                false
+            );
+        } else {
+            // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
+            const removeEarlyBirdIndex = supportingItems.findIndex(
+                (item) => item.partType == PREMIUM_FEE_PART_TYPE
+            );
+
+            if (removeEarlyBirdIndex >= 0) {
+                supportingItems.splice(removeEarlyBirdIndex, 1);
                 this.dispatchStoreAction(
                     this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
                     supportingItems,
                     false
                 );
-            } else {
-                // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
-                const removeEarlyBirdIndex = supportingItems.findIndex(
-                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
-                );
-
-                if (removeEarlyBirdIndex >= 0) {
-                    supportingItems.splice(removeEarlyBirdIndex, 1);
-                    this.dispatchStoreAction(
-                        this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
-                        supportingItems,
-                        false
-                    );
-                }
             }
-        },
+        }
     },
-    watch: {
-        selectedDate(newValue, oldValue) {
-            // Clear time slot selection if date selected changes
-            if (newValue !== oldValue) {
-                this.selectedTimeSlotInfo = {
-                    timeSlot: {
-                        date: null,
-                        routeCode: null,
-                        startTime: null,
-                        endTime: null,
-                        jobMaxMinutes: null,
-                        jobMinMinutes: null,
-                    },
-                    isPremiumAppointment: null,
-                };
-            }
-        },
-        selectedTimeSlotInfo(newValue) {
-            this.updateFooterButtonText(newValue);
-        },
+},
+watch: {
+    selectedDate(newValue, oldValue) {
+        // Clear time slot selection if date selected changes
+        if (newValue !== oldValue) {
+            this.selectedTimeSlotInfo = {
+                timeSlot: {
+                    date: null,
+                    routeCode: null,
+                    startTime: null,
+                    endTime: null,
+                    jobMaxMinutes: null,
+                    jobMinMinutes: null,
+                },
+                isPremiumAppointment: null,
+            };
+        }
     },
-    components: {
-        funnelHeader,
-        funnelFooter,
-        funnelSubHeader,
-        Form,
-        loadingModal,
-        datePicker,
-        locationAlerts,
-        timeSlotModalQuestion,
-        textBlock,
+    selectedTimeSlotInfo(newValue) {
+        this.updateFooterButtonText(newValue);
     },
+},
+components: {
+    funnelHeader,
+    navbar,
+    funnelSubHeader,
+    Form,
+    loadingModal,
+    datePicker,
+    locationAlerts,
+    timeSlotModalQuestion,
+    textBlock,
+},
 };
 </script>
 
 <style lang="scss">
 .text-link-small {
-    a,
-    .btn-link {
-        font-size: 0.875rem;
-        line-height: 1.5;
-    }
+a,
+.btn-link {
+    font-size: 0.875rem;
+    line-height: 1.5;
+}
 }
 .funnel-sub-header {
-    h5.dark-header {
-        margin-bottom: 0.25rem;
-    }
+h5.dark-header {
+    margin-bottom: 0.25rem;
+}
 }
 </style>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index e49cd295c..b5ceb81dd 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,87 +1,109 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles">
-            <loadingModal ref="loadingModal" />
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
-            <serviceZipModalQuestion
-                v-model="serviceZipCodeQuestion"
-                ref="serviceZipCodeQuestion"
-                :mobileFeePart="mobileFeePart"
-                @updated-mobile-fee-part="setMobileFeePart"
-                @updated-serviceability="setServiceabilityDetails"
-                @updated-contains-military-base="setContainsMilitaryBase"
-                linkWidgetName="ServiceZipLinkWidget"
-                modalWidgetName="ServiceZipModalWidget"
-                :onZipUpdateCallback="reloadShopData" />
-            <alert
-                ref="alertMilitaryBaseZip"
-                class="my-5"
-                cmsWidgetName="AlertMilitaryBaseZipWidget"
-                v-if="displayMilitaryZipAlert"
-                alertClass="alert-warning" />
-            <alert
-                ref="alertMobileOnly"
-                class="my-5"
-                cmsWidgetName="AlertMobileOnlyWidget"
-                v-if="displayServiceableMobileOnly"
-                alertClass="alert-warning" />
-            <alert
-                ref="alertRecalNoMobile"
-                class="my-5"
-                cmsWidgetName="AlertRecalNoMobileWidget"
-                v-if="displayRecalibrationWarning"
-                @text-link-clicked="openModalAction"
-                alertClass="alert-warning" />
-            <alert
-                ref="alertInshopOnly"
-                class="my-5"
-                cmsWidgetName="AlertInshopOnlyWidget"
-                v-if="displayServiceableInshopOnly"
-                alertClass="alert-warning" />
-            <alert
-                ref="alertNoShops"
-                class="my-5"
-                cmsWidgetName="AlertNoShopsWidget"
-                v-if="displayNoShopsAlert"
-                alertClass="alert-warning" />
-            <appointmentTypeQuestion
-                v-model="selectedAppointmentType"
-                v-show="isAppointmentTypeDisplayed"
-                :isServiceableMobile="isServiceableMobile"
-                :isServiceableInshop="isServiceableInshop"
-                :isDisplayed="isAppointmentTypeDisplayed"
-                ref="appointmentTypeQuestion"
-                groupName="appointmentTypeQuestion"
-                cmsWidgetName="AppointmentTypeQuestionWidget"
-                validationRules="option-required" />
-            <mobileLocationModalQuestions
-                customComponentId="mobileLocationQuestions"
-                v-if="selectedAppointmentType === 'Mobile'"
-                v-model="mobileLocationQuestions"
-                :mobileFeePart="mobileFeePart"
-                @updated-mobile-fee-part="setMobileFeePart"
-                @updated-serviceability="setServiceabilityDetails"
-                @updated-contains-military-base="setContainsMilitaryBase"
-                validationRules="mobile-location-required"
-                ref="mobileLocationQuestions"
-                linkWidgetName="MobileLocationLinkWidget"
-                modalWidgetName="MobileLocationModalWidget"
-                :onZipUpdateCallback="reloadShopData" />
-            <shopQuestion
-                ref="shopQuestion"
-                v-show="isShopQuestionDisplayed"
-                v-model="selectedProvider"
-                :selectedAppointmentType="selectedAppointmentType"
-                :isDisplayed="isShopQuestionDisplayed"
-                cmsWidgetName="ShopQuestionWidget" />
-            <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
-            <funnel-footer
-                cmsWidgetName="FunnelFooterWidget"
-                ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
-                @back-clicked="backButtonAction"
-                @ForwardClicked="forwardButtonAction" />
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-2 col-lg-3">&nbsp;</div>
+                <div class="col-md-8 col-lg-6">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
+
+                    <serviceZipModalQuestion
+                    v-model="serviceZipCodeQuestion"
+                    ref="serviceZipCodeQuestion"
+                    :mobileFeePart="mobileFeePart"
+                    @updated-mobile-fee-part="setMobileFeePart"
+                    @updated-serviceability="setServiceabilityDetails"
+                    @updated-contains-military-base="setContainsMilitaryBase"
+                    linkWidgetName="ServiceZipLinkWidget"
+                    modalWidgetName="ServiceZipModalWidget"
+                    :onZipUpdateCallback="reloadShopData" />
+
+                    <alert
+                    ref="alertMilitaryBaseZip"
+                    class="my-5"
+                    cmsWidgetName="AlertMilitaryBaseZipWidget"
+                    v-if="displayMilitaryZipAlert"
+                    alertClass="alert-warning" />
+
+                    <alert
+                    ref="alertMobileOnly"
+                    class="my-5"
+                    cmsWidgetName="AlertMobileOnlyWidget"
+                    v-if="displayServiceableMobileOnly"
+                    alertClass="alert-warning" />
+
+                    <alert
+                    ref="alertRecalNoMobile"
+                    class="my-5"
+                    cmsWidgetName="AlertRecalNoMobileWidget"
+                    v-if="displayRecalibrationWarning"
+                    @text-link-clicked="openModalAction"
+                    alertClass="alert-warning" />
+
+                    <alert
+                    ref="alertInshopOnly"
+                    class="my-5"
+                    cmsWidgetName="AlertInshopOnlyWidget"
+                    v-if="displayServiceableInshopOnly"
+                    alertClass="alert-warning" />
+
+                    <alert
+                    ref="alertNoShops"
+                    class="my-5"
+                    cmsWidgetName="AlertNoShopsWidget"
+                    v-if="displayNoShopsAlert"
+                    alertClass="alert-warning" />
+
+                    <appointmentTypeQuestion
+                    v-model="selectedAppointmentType"
+                    v-show="isAppointmentTypeDisplayed"
+                    :isServiceableMobile="isServiceableMobile"
+                    :isServiceableInshop="isServiceableInshop"
+                    :isDisplayed="isAppointmentTypeDisplayed"
+                    ref="appointmentTypeQuestion"
+                    groupName="appointmentTypeQuestion"
+                    cmsWidgetName="AppointmentTypeQuestionWidget"
+                    validationRules="option-required" />
+
+                    <mobileLocationModalQuestions
+                    customComponentId="mobileLocationQuestions"
+                    v-if="selectedAppointmentType === 'Mobile'"
+                    v-model="mobileLocationQuestions"
+                    :mobileFeePart="mobileFeePart"
+                    @updated-mobile-fee-part="setMobileFeePart"
+                    @updated-serviceability="setServiceabilityDetails"
+                    @updated-contains-military-base="setContainsMilitaryBase"
+                    validationRules="mobile-location-required"
+                    ref="mobileLocationQuestions"
+                    linkWidgetName="MobileLocationLinkWidget"
+                    modalWidgetName="MobileLocationModalWidget"
+                    :onZipUpdateCallback="reloadShopData" />
+
+                    <shopQuestion
+                    ref="shopQuestion"
+                    v-show="isShopQuestionDisplayed"
+                    v-model="selectedProvider"
+                    :selectedAppointmentType="selectedAppointmentType"
+                    :isDisplayed="isShopQuestionDisplayed"
+                    cmsWidgetName="ShopQuestionWidget" />
+
+                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
+
+                    <navbar
+                    cmsWidgetName="FunnelFooterWidget"
+                    ref="navbar"
+                    :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
+                    
+                </div>
+                <div class="col-md-2 col-lg-3">&nbsp;</div>
+            </div>
         </div>
     </Form>
 </template>
@@ -95,7 +117,7 @@ import appointmentTypeQuestion from "@/layouts/service-location/appointment-type
 import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
 
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form } from "vee-validate";
@@ -240,7 +262,7 @@ export default {
             set: function (newValue) {
                 this.streetAddress = newValue.addressQuestions.streetAddress;
                 this.apartmentNumberOrBusinessName =
-                    newValue.addressQuestions.apartmentNumberOrBusinessName;
+                newValue.addressQuestions.apartmentNumberOrBusinessName;
                 this.city = newValue.addressQuestions.city;
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
@@ -369,10 +391,10 @@ export default {
         setServiceabilityDetails(serviceabilityDetails) {
             this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
             this.isRecalibrationServiceableInshop =
-                serviceabilityDetails.isRecalibrationServiceableInshop;
+            serviceabilityDetails.isRecalibrationServiceableInshop;
             this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
             this.isRecalibrationServiceableMobile =
-                serviceabilityDetails.isRecalibrationServiceableMobile;
+            serviceabilityDetails.isRecalibrationServiceableMobile;
         },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
@@ -456,7 +478,7 @@ export default {
         appointmentTypeQuestion,
         mobileLocationModalQuestions,
         funnelHeader,
-        funnelFooter,
+        navbar,
         funnelSubHeader,
         Form,
         loadingModal,
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c03fabda1..e27d398a4 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,65 +1,81 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall">
-                <alert
-                    ref="vehicleChangeAlert"
-                    v-if="shouldDisplayVehicleChangeAlert"
-                    class="mt-5 mb-0"
-                    cmsWidgetName="VehicleChangeAlert"
-                    alertClass="alert-warning"
-                    :isDismissible="false" />
-                <damageLocationQuestion
-                    ref="damageLocation"
-                    cmsWidgetName="DamageLocationQuestion"
-                    v-model="selectedDamageLocations"
-                    groupName="DamageLocationQuestion" />
-                <windshieldOptions
-                    ref="windshieldOptions"
-                    v-model="selectedWindshieldOptions"
-                    :hasRepairReplaceConflict="hasRepairReplaceConflict"
-                    :hasSplitSingleConflict="hasSplitSingleConflict"
-                    :selectedDamageLocations="selectedDamageLocations" />
-                <alert
-                    v-if="hasRepairReplaceConflict"
-                    class="my-5"
-                    cmsWidgetName="HasReplacementConflict"
-                    alertClass="alert-danger"
-                    :isDismissible="false" />
-                <sideDoorOptions
-                    ref="sideDoorOptions"
-                    cmsWidgetName="SideDoorSideQuestion"
-                    groupName="SideDoorSideQuestion"
-                    v-model="sideDoorOptionsData"
-                    v-show="!hasRepairReplaceConflict"
-                    :selectedDamageLocations="selectedDamageLocations" />
-                <replaceOptionsQuestion
-                    ref="backGlassOptions"
-                    cmsWidgetName="RearReplaceOptionsQuestion"
-                    :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-                    v-model="selectedRearReplaceOptions"
-                    groupName="BackGlassReplaceOptionsQuestion"
-                    validationRules="replace-options-required" />
-                <funnel-footer
-                    cmsWidgetName="FunnelFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    :isBackButtonHidden="shouldHideBackButton"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
+            </div>
+                <div class="row">
+                    <div class="col-md-2 col-lg-3">&nbsp;</div>
+                    <div class="col-md-8 col-lg-6">
+                        <vehicleBanner
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+
+                        <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+
+                        <alert
+                        ref="vehicleChangeAlert"
+                        v-if="shouldDisplayVehicleChangeAlert"
+                        class="mt-5 mb-0"
+                        cmsWidgetName="VehicleChangeAlert"
+                        alertClass="alert-warning"
+                        :isDismissible="false" />
+
+                        <damageLocationQuestion
+                        ref="damageLocation"
+                        cmsWidgetName="DamageLocationQuestion"
+                        v-model="selectedDamageLocations"
+                        groupName="DamageLocationQuestion" />
+
+                        <windshieldOptions
+                        ref="windshieldOptions"
+                        v-model="selectedWindshieldOptions"
+                        :hasRepairReplaceConflict="hasRepairReplaceConflict"
+                        :hasSplitSingleConflict="hasSplitSingleConflict"
+                        :selectedDamageLocations="selectedDamageLocations" />
+
+                        <alert
+                        v-if="hasRepairReplaceConflict"
+                        class="my-5"
+                        cmsWidgetName="HasReplacementConflict"
+                        alertClass="alert-danger"
+                        :isDismissible="false" />
+
+                        <sideDoorOptions
+                        ref="sideDoorOptions"
+                        cmsWidgetName="SideDoorSideQuestion"
+                        groupName="SideDoorSideQuestion"
+                        v-model="sideDoorOptionsData"
+                        v-show="!hasRepairReplaceConflict"
+                        :selectedDamageLocations="selectedDamageLocations" />
+
+                        <replaceOptionsQuestion
+                        ref="backGlassOptions"
+                        cmsWidgetName="RearReplaceOptionsQuestion"
+                        :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
+                        v-model="selectedRearReplaceOptions"
+                        groupName="BackGlassReplaceOptionsQuestion"
+                        validationRules="replace-options-required" />
+
+                        <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        :isBackButtonHidden="shouldHideBackButton"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                    </div>
+                    <div class="col-md-2 col-lg-3">&nbsp;</div>
+                </div>
             </div>
-        </div>
     </Form>
 </template>
 
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
@@ -219,7 +235,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.SINGLE
                     );
@@ -234,7 +250,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.DRIVER
                     );
@@ -249,7 +265,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.PASSENGER
                     );
@@ -319,7 +335,7 @@ export default {
                     isWindshieldRepair: this.isWindshieldRepair,
                     selectedGlassToReplace: this.selectedGlassToReplace(),
                     selectedWindshieldChipCount:
-                        this.selectedWindshieldOptions.selectedWindshieldChipCount,
+                    this.selectedWindshieldOptions.selectedWindshieldChipCount,
                 },
                 false
             );
@@ -342,9 +358,9 @@ export default {
             const payment = this.$store.getters.payment;
 
             const vehicleChangedDuringPolicyLookupInHeritage =
-                payment.isInsurance &&
-                payment.insuranceCoverage.coverageStatus &&
-                payment.insuranceCoverage.coverageStatus !== "";
+            payment.isInsurance &&
+            payment.insuranceCoverage.coverageStatus &&
+            payment.insuranceCoverage.coverageStatus !== "";
             if (vehicleChangedDuringPolicyLookupInHeritage) {
                 if (store.getters.damage.isRepair) {
                     this.$router.navigateWithSaving(
@@ -354,7 +370,7 @@ export default {
                 } else {
                     this.$router.navigateWithSaving(
                         this.navigationScenarios
-                            .CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE,
+                        .CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE,
                         this.$route
                     );
                 }
@@ -436,7 +452,7 @@ export default {
             return (
                 this.isWindshieldDamageLocation &&
                 this.selectedWindshieldOptions.selectedWindshieldDamageType ===
-                    damageLocationsSelected.REPAIR
+                damageLocationsSelected.REPAIR
             );
         },
         isDriverSideReplace() {
@@ -464,10 +480,10 @@ export default {
             if (
                 !this.selectedDamageLocations?.includes("Windshield") ||
                 this.selectedWindshieldOptions.selectedWindshieldDamageType ===
-                    damageLocationsSelected.REPAIR ||
+                damageLocationsSelected.REPAIR ||
                 !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
             )
-                return false;
+            return false;
 
             return (
                 this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
@@ -486,14 +502,14 @@ export default {
                         );
                     }
                 ) ||
-                    this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                        (selectedPassengerWindshield) => {
-                            return (
-                                selectedPassengerWindshield.toUpperCase() ===
-                                damageLocationsSelected.PASSENGER.toUpperCase()
-                            );
-                        }
-                    ))
+                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                    (selectedPassengerWindshield) => {
+                        return (
+                            selectedPassengerWindshield.toUpperCase() ===
+                            damageLocationsSelected.PASSENGER.toUpperCase()
+                        );
+                    }
+                ))
             );
         },
         shouldDisplayVehicleChangeAlert() {
@@ -509,7 +525,7 @@ export default {
 
     components: {
         funnelHeader,
-        funnelFooter,
+        navbar,
         vehicleBanner,
         funnelSubHeader,
         sideDoorOptions,
diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js
index 4d4287430..57ecfb117 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.spec.js
+++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js
@@ -542,7 +542,7 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
     partQuestionRearWrapper.vm.initializeComponent = glassPartQuestion.methods.initializeComponent;
 
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
-    wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+    wrapper.vm.$refs.navbar.removeLoader = jest.fn();
     wrapper.vm.$refs.loadingModal.showModal = jest.fn();
     // wrapper.vm.$refs.onSubmit = jest.fn();
     // wrapper.vm.$refs.onInvalidSubmit = jest.fn();
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 9b4b8b185..2c26a7d6c 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -31,9 +31,9 @@
                         :colorAnswers="item.colorAnswers"
                         :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
                 </div>
-                <funnelFooter
+                <navbar
                     cmsWidgetName="FunnelFooterWidget"
-                    ref="funnelFooter"
+                    ref="navbar"
                     :isForwardActionDisabled="isForwardActionDisabled"
                     @back-clicked="navigateBack"
                     @ForwardClicked="forwardButtonAction" />
@@ -48,7 +48,7 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+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";
 // Supporting Files
@@ -178,7 +178,7 @@ export default {
             }
             // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
             if (this.isForwardActionDisabled) {
-                this.$refs.funnelFooter.removeLoader();
+                this.$refs.navbar.removeLoader();
                 throw new Error("Could not match any parts to the selected parts");
             }
 
@@ -221,7 +221,7 @@ export default {
         funnelHeader,
         vehicleBanner,
         funnelSubHeader,
-        funnelFooter,
+        navbar,
         alert,
         loadingModal,
     },
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 2ae241e01..92f1e7ea6 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -1,73 +1,72 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles position-relative">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <div class="select-car">
-                <div class="row">
-                    <div class="col">
-                        <div class="select-car-form rounded">
-                            <funnelSubHeader
-                                cmsWidgetName="FunnelSubHeaderWidget"
-                                class="siteSubHeader" />
-
-                            <vehicleQuestion
-                                ref="vehicleYearQuestion"
-                                v-model="selectedYear"
-                                :isDisabled="!yearOptions.length"
-                                :options="yearOptions"
-                                cmsWidgetName="VehicleYearQuestion"
-                                validationRules="year-required"
-                                placeHolderText="Select year"
-                                inputId="yearQuestionField" />
-
-                            <vehicleQuestion
-                                ref="vehicleMakeQuestion"
-                                v-model="selectedMake"
-                                :isDisabled="!makeOptions.length"
-                                :options="makeOptions"
-                                cmsWidgetName="VehicleMakeQuestion"
-                                validationRules="make-required"
-                                placeHolderText="Select make"
-                                inputId="makeQuestionField" />
-
-                            <vehicleQuestion
-                                ref="vehicleModelQuestion"
-                                v-model="selectedModel"
-                                cmsWidgetName="VehicleModelQuestion"
-                                :isDisabled="!modelOptions.length"
-                                :options="modelOptions"
-                                validationRules="model-required"
-                                placeHolderText="Select model"
-                                inputId="modelQuestionField" />
-
-                            <vehicleQuestion
-                                ref="vehicleStyleQuestion"
-                                v-model="selectedStyle"
-                                cmsWidgetName="VehicleStyleQuestion"
-                                :isDisabled="!styleOptions.length"
-                                :options="styleOptions"
-                                validationRules="style-required"
-                                placeHolderText="Select style"
-                                inputId="styleQuestionField" />
-
-                            <vehicleBanner
-                                cmsWidgetName="VehicleBannerWidget"
-                                :displayGenericVehicleImage="displayGeneric"
-                                :displayVehicleImage="imageUrl"
-                                :vehicleCategory="category"
-                                :displayUnmatchedVehicleIcon="unmatchedVehicleIcon"
-                                class="mt-5 vehicle-footer"
-                                ref="banner" />
-
-                            <funnelFooter
-                                cmsWidgetName="FunnelFooterWidget"
-                                @ForwardClicked="forwardButtonAction"
-                                :isForwardActionDisabled="!meta.valid"
-                                ref="funnelFooter" />
-                        </div>
-                    </div>
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
+            <div class="row">
+                <div class="col-md-3 col-lg-4">&nbsp;</div>
+                <div class="col-md-6 col-lg-4">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
+                    <vehicleQuestion
+                        ref="vehicleYearQuestion"
+                        v-model="selectedYear"
+                        :isDisabled="!yearOptions.length"
+                        :options="yearOptions"
+                        cmsWidgetName="VehicleYearQuestion"
+                        validationRules="year-required"
+                        placeHolderText="Select year"
+                        inputId="yearQuestionField" />
+
+                    <vehicleQuestion
+                        ref="vehicleMakeQuestion"
+                        v-model="selectedMake"
+                        :isDisabled="!makeOptions.length"
+                        :options="makeOptions"
+                        cmsWidgetName="VehicleMakeQuestion"
+                        validationRules="make-required"
+                        placeHolderText="Select make"
+                        inputId="makeQuestionField" />
+
+                    <vehicleQuestion
+                        ref="vehicleModelQuestion"
+                        v-model="selectedModel"
+                        cmsWidgetName="VehicleModelQuestion"
+                        :isDisabled="!modelOptions.length"
+                        :options="modelOptions"
+                        validationRules="model-required"
+                        placeHolderText="Select model"
+                        inputId="modelQuestionField" />
+
+                    <vehicleQuestion
+                        ref="vehicleStyleQuestion"
+                        v-model="selectedStyle"
+                        cmsWidgetName="VehicleStyleQuestion"
+                        :isDisabled="!styleOptions.length"
+                        :options="styleOptions"
+                        validationRules="style-required"
+                        placeHolderText="Select style"
+                        inputId="styleQuestionField" />
+                    <div class="col-md-3">&nbsp;</div>
+                    <vehicleBanner
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="displayGeneric"
+                        :displayVehicleImage="imageUrl"
+                        :vehicleCategory="category"
+                        :displayUnmatchedVehicleIcon="unmatchedVehicleIcon"
+                        class="mt-5 vehicle-footer"
+                        ref="banner" />
+
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        @ForwardClicked="forwardButtonAction"
+                        :isForwardActionDisabled="!meta.valid"
+                        ref="navbar" />
+                </div>
+                <div class="col-md-3 col-lg-4">&nbsp;</div>
+            </div>
         </div>
     </Form>
 </template>
@@ -75,7 +74,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import vehicleQuestion from "@/layouts/vehicle/vehicle-question/vehicle-question";
@@ -390,7 +389,7 @@ export default {
 
     components: {
         funnelHeader,
-        funnelFooter,
+        navbar,
         funnelSubHeader,
         vehicleBanner,
         Form,
diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js
index f47fdfb36..f25bc68db 100644
--- a/src/layouts/vin-lookup/vin-lookup.spec.js
+++ b/src/layouts/vin-lookup/vin-lookup.spec.js
@@ -47,14 +47,14 @@ jest.mock("@/helpers/damage-helper", () => ({
 }));
 
 describe("vin-lookup.vue", () => {
-    it("Should update the funnel-footer forward button when VIN is changed", (done) => {
+    it("Should update the nav-bar forward button when VIN is changed", (done) => {
         //Arrange
         const { wrapper } = setupMocks({});
         //Act
         wrapper.setData({ vin: "newValue" });
         //Assert
         wrapper.vm.$nextTick(() => {
-            expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toBeCalled();
+            expect(wrapper.vm.$refs.navbar.updateButtonText).toBeCalled();
             done();
         });
     });
@@ -368,8 +368,8 @@ function mockOutPromises({ carId, isZipValid = true, isZipServiceable = true })
 }
 
 function mockOutStubFunctions(wrapper) {
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-    wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+    wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
+    wrapper.vm.$refs.navbar.removeLoader = jest.fn();
     wrapper.vm.getZipCodeData = jest
         .fn()
         .mockReturnValue({ isValid: true, isServiceable: true, state: "OH" });
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index c0b1f1788..a754ed2a7 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -120,9 +120,9 @@
                         !displayNonServiceableZipAlert
                     "
                     alertClass="alert-success" />
-                <funnelFooter
+                <navbar
                     cmsWidgetName="FunnelFooterWidget"
-                    ref="funnelFooter"
+                    ref="navbar"
                     :isForwardActionDisabled="!meta.valid"
                     @back-clicked="backButtonAction"
                     @ForwardClicked="forwardButtonAction" />
@@ -134,7 +134,7 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
@@ -278,7 +278,7 @@ export default {
                 const isZipValid = resultMap.zipCodeData.isValid;
                 if (this.serviceZipCode && !isZipValid) {
                     this.displayInvalidZipAlert = true;
-                    return this.$refs.funnelFooter.removeLoader();
+                    return this.$refs.navbar.removeLoader();
                 }
                 this.displayInvalidZipAlert = false;
 
@@ -295,7 +295,7 @@ export default {
                     }
 
                     // Remove loader and stop processing the page.
-                    return this.$refs.funnelFooter.removeLoader();
+                    return this.$refs.navbar.removeLoader();
                 }
 
                 // Check if the CarId is different from the lookup vs what is in state currently.
@@ -315,10 +315,10 @@ export default {
                     );
 
                     // Update button "Continue with..."
-                    this.$refs.funnelFooter.updateButtonText(
+                    this.$refs.navbar.updateButtonText(
                         `Continue with ${resultMap.vehicleLookupResponse.year} ${resultMap.vehicleLookupResponse.make} ${resultMap.vehicleLookupResponse.model}`
                     );
-                    return this.$refs.funnelFooter.removeLoader();
+                    return this.$refs.navbar.removeLoader();
                 }
 
                 // Save vin, vehicle, customer and service information
@@ -380,7 +380,7 @@ export default {
                 this.displayInvalidZipAlert = true;
             }
 
-            return this.$refs.funnelFooter.removeLoader();
+            return this.$refs.navbar.removeLoader();
         },
         async navigateForward() {
             if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
@@ -488,7 +488,7 @@ export default {
         vin() {
             this.displayVinNotFoundAlert = false;
             this.displayVinScanFailedAlert = false;
-            this.$refs.funnelFooter.updateButtonText(
+            this.$refs.navbar.updateButtonText(
                 this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
             );
         },
@@ -498,7 +498,7 @@ export default {
     },
     components: {
         funnelHeader,
-        funnelFooter,
+        navbar,
         vehicleBanner,
         funnelSubHeader,
         textboxQuestion,
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 488500639..11fc7eece 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -100,11 +100,11 @@ export default {
             return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
         },
         scrollToPageTop() {
-            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
+            const container = document.getElementsByClassName("container-fluid")[0];
             container.scrollTo({ top: 0, left: 0, behavior: "smooth" });
         },
         scrollToPageBottom() {
-            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
+            const container = document.getElementsByClassName("container-fluid")[0];
             container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
         },
     },
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index f8e1c50f1..d014bdfa3 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -5,15 +5,7 @@ body {
     background-color: #fff;
     color: #4d5151;
     .container-fluid {
-        max-width: 576px; //Remove once desktop app is complete
-        &.container-shadow {
-            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15); //Use instead of Bootstrap's helper
-        }
-        &.make-tall {
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
+        max-width: 1400px;
         .prevent-squish {
             overflow-x: unset;
         }
@@ -45,7 +37,7 @@ body {
     }
 
     .page-container-grouped-styles {
-        @extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
+        //@extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
     }
 
     //Footer modal backdrop adjustments for positioning
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 191a33959..75f042fd1 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -170,15 +170,6 @@ $spacers: (
 //Enable negative spacing (does NOT work on padding)
 $enable-negative-margins: true;
 
-//Grid breakpoints
-$grid-breakpoints: (
-    xs: 0,
-    sm: 576px,
-    md: 838px,
-    lg: 1074px,
-    xl: 1416px,
-);
-
 //Shadow
 $box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
 $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);