diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 13c81f815..9636d1d25 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -192,9 +192,9 @@ export default {
                     classes = "d-flex flex-row p-0";
                     break;
                 case "listCard":
-                    classes = "row g-2 justify-content-center mb-1";
+                    classes = "row g-2 g-md-5 justify-content-center mb-1";
                     if (this.isWide) {
-                        classes += " flex-column";
+                        classes += "flex-column";
                     }
                     break;
                 case "radio":
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..e22f36edf 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -5,75 +5,92 @@
         ref="theForm"
         v-slot="{ meta }"
         autocomplete="off">
-        <div class="page-container-grouped-styles">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-            <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                ref="vehicleBanner"
-                :displayGenericVehicleImage="false" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
-            <div class="fade-on-route-transition sub-container make-tall">
-                <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
-                <alert
-                    ref="alertVinNotFound"
-                    v-if="displayVinNotFoundAlert"
-                    class="mb-4"
-                    cmsWidgetName="AlertVinNotFoundWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-                <alert
-                    ref="alertMatchedDifferentVehicle"
-                    v-if="displayMatchedDifferentVehicleAlert"
-                    class="mb-4"
-                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
-                    :manualCopy="AlertMatchedDifferentVehicleBody"
-                    alertClass="alert-warning"
-                    v-bind:isDismissible="false" />
-                <alert
-                    ref="alertInvalidZip"
-                    v-if="displayInvalidZipAlert"
-                    class="mb-4"
-                    cmsWidgetName="AlertInvalidZipWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-                <alert
-                    ref="alertNonServiceableZip"
-                    v-if="displayNonServiceableZipAlert"
-                    class="mb-4"
-                    alertClass="alert-danger"
-                    :manualHeadline="AlertNonServiceableZipHeader"
-                    :manualCopy="AlertNonServiceableZipBody"
-                    v-bind:isDismissible="false" />
-                <alert
-                    ref="alertVinLookupsByHomeAddressNotAllowed"
-                    v-if="displayVinLookupByHomeAddressNotAllowedAlert"
-                    class="mb-4"
-                    cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-                <transition name="fade" mode="out-in">
-                    <div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
-                        <div class="row mt-4 mb-1">
-                            <div class="col">
-                                <textboxQuestion
-                                    cmsWidgetName="ServiceZipQuestionWidget"
-                                    v-model="serviceZipCode"
-                                    ref="serviceZip"
-                                    customInputId="serviceZip"
-                                    aria-haspopup=""
-                                    mask="#####"
-                                    validationRules="service-zip-required|service-zip-format" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                        cmsWidgetName="VehicleBannerWidget"
+                        ref="vehicleBanner"
+                        :displayGenericVehicleImage="false" />
+
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
+
+                    <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
+
+                    <alert
+                        ref="alertVinNotFound"
+                        v-if="displayVinNotFoundAlert"
+                        class="mb-4"
+                        cmsWidgetName="AlertVinNotFoundWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+
+                    <alert
+                        ref="alertMatchedDifferentVehicle"
+                        v-if="displayMatchedDifferentVehicleAlert"
+                        class="mb-4"
+                        :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                        :manualCopy="AlertMatchedDifferentVehicleBody"
+                        alertClass="alert-warning"
+                        v-bind:isDismissible="false" />
+
+                    <alert
+                        ref="alertInvalidZip"
+                        v-if="displayInvalidZipAlert"
+                        class="mb-4"
+                        cmsWidgetName="AlertInvalidZipWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+
+                    <alert
+                        ref="alertNonServiceableZip"
+                        v-if="displayNonServiceableZipAlert"
+                        class="mb-4"
+                        alertClass="alert-danger"
+                        :manualHeadline="AlertNonServiceableZipHeader"
+                        :manualCopy="AlertNonServiceableZipBody"
+                        v-bind:isDismissible="false" />
+
+                    <alert
+                        ref="alertVinLookupsByHomeAddressNotAllowed"
+                        v-if="displayVinLookupByHomeAddressNotAllowedAlert"
+                        class="mb-4"
+                        cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+
+                    <transition name="fade" mode="out-in">
+                        <div
+                            class="service-zip-field"
+                            v-if="showServiceZipField"
+                            aria-live="polite">
+                            <div class="row mt-4 mb-1">
+                                <div class="col">
+                                    <textboxQuestion
+                                        cmsWidgetName="ServiceZipQuestionWidget"
+                                        v-model="serviceZipCode"
+                                        ref="serviceZip"
+                                        customInputId="serviceZip"
+                                        aria-haspopup=""
+                                        mask="#####"
+                                        validationRules="service-zip-required|service-zip-format" />
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </transition>
-                <funnel-footer
-                    cmsWidgetName="FunnelFooterWidget"
-                    ref="funnelFooter"
-                    :isDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @back-clicked="backButtonAction"
-                    :isForwardActionDisabled="!meta.valid" />
+                    </transition>
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isDisabled="!meta.valid"
+                        @ForwardClicked="forwardButtonAction"
+                        @back-clicked="backButtonAction"
+                        :isForwardActionDisabled="!meta.valid" />
+                </div>
             </div>
         </div>
     </Form>
@@ -82,7 +99,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 +258,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 +288,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 +311,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 +319,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 +437,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 +462,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..03de9ff97 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -1,57 +1,72 @@
 <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 justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <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>
         </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 +187,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..f27f833a0 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -1,79 +1,84 @@
 <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
-                        cmsWidgetName="VinLookupMethod"
-                        :answers="answersFromCms"
-                        groupName="vinLookupMethodOption"
-                        buttonTypeString="listButton"
-                        v-model="selectedVinLookupMethod"
-                        isRequired
-                        validationRules="option-required"
-                        :logDisplayedValuesEvent="true" />
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </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 justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <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"
+                            buttonTypeString="listButton"
+                            v-model="selectedVinLookupMethod"
+                            isRequired
+                            validationRules="option-required"
+                            :logDisplayedValuesEvent="true" />
+
+                        <navbar
+                            cmsWidgetName="FunnelFooterWidget"
+                            ref="navbar"
+                            :isForwardActionDisabled="!meta.valid"
+                            @back-clicked="backButtonAction"
+                            @ForwardClicked="forwardButtonAction" />
                     </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 v-else>
+                        <alert
+                            class="my-4"
+                            :cmsWidgetName="alertInfo"
+                            alertClass="alert-info"
+                            v-bind:isDismissible="false" />
+
+                        <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
+                            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 class="row mb-2">
-                        <div class="col">
-                            <textBlock
-                                cmsWidgetName="QuoteEmailTextBlockWidget"
-                                typeStyle="caption" />
-                        </div>
-                    </div>
-                    <alert
-                        ref="alertInvalidZip"
-                        v-if="displayInvalidZipAlert"
-                        class="my-4"
-                        cmsWidgetName="AlertInvalidZipWidget"
-                        alertClass="alert-danger"
-                        v-bind:isDismissible="false" />
-                    <alert
-                        class="my-4"
-                        :manualHeadline="AlertNonServiceableZipHeader"
-                        :manualCopy="AlertNonServiceableZipBody"
-                        v-model="customAlertData"
-                        v-if="displayNonServiceableZipAlert"
-                        alertClass="alert-danger" />
                 </div>
-                <funnel-footer
-                    cmsWidgetName="FunnelFooterWidget"
-                    ref="funnelFooter"
-                    :isForwardActionDisabled="!meta.valid"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
     </Form>
@@ -82,7 +87,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";
@@ -238,13 +243,13 @@ 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;
 
@@ -346,7 +351,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..31ca3fec7 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,88 +1,89 @@
 <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">
-                <div class="row mt-2 mb-4">
-                    <div class="col">
-                        <textboxQuestion
-                            cmsWidgetName="LicensePlateNumberQuestionWidget"
-                            v-model="licensePlate"
-                            isRequired
-                            customInputId="licensePlate"
-                            validationRules="license-plate-required" />
-                    </div>
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
-                <div class="row mt-0 mb-4">
-                    <div class="col">
-                        <textboxQuestion
-                            cmsWidgetName="RegistrationZipQuestionWidget"
-                            v-model="registrationZipCode"
-                            customInputId="zip"
-                            mask="#####"
-                            validationRules="registration-zip-required|zip-format" />
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+
+                    <textboxQuestion
+                        cmsWidgetName="LicensePlateNumberQuestionWidget"
+                        v-model="licensePlate"
+                        isRequired
+                        customInputId="licensePlate"
+                        validationRules="license-plate-required" />
+
+                    <textboxQuestion
+                        cmsWidgetName="RegistrationZipQuestionWidget"
+                        v-model="registrationZipCode"
+                        customInputId="zip"
+                        mask="#####"
+                        validationRules="registration-zip-required|zip-format" />
+
+                    <textboxQuestion
+                        cmsWidgetName="EmailAddressQuestionWidget"
+                        v-model="email"
+                        customInputId="email"
+                        validationRules="email-address-required|email-address-format" />
+
+                    <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
+
+                    <alert
+                        v-if="displayInvalidZipAlert"
+                        class="my-3"
+                        cmsWidgetName="AlertInvalidZipWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+
+                    <alert
+                        v-if="displayNonServiceableZipAlert"
+                        class="my-3"
+                        :manualHeadline="AlertNonServiceableZipHeader"
+                        :manualCopy="AlertNonServiceableZipBody"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+
+                    <div class="row mt-2" v-if="showServiceZipField">
+                        <div class="col mb-1">
+                            <textboxQuestion
+                                cmsWidgetName="ServiceZipQuestionWidget"
+                                v-model="serviceZipCode"
+                                inputId="serviceZipCode"
+                                validationRules="zip-required|zip-format"
+                                mask="#####" />
+                        </div>
                     </div>
+
+                    <alert
+                        v-if="displayVinNotFoundAlert"
+                        class="my-3"
+                        cmsWidgetName="AlertVinNotFoundWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+
+                    <alert
+                        v-if="displayMatchedDifferentVehicleAlert"
+                        class="my-3"
+                        :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                        :manualCopy="AlertMatchedDifferentVehicleBody"
+                        alertClass="alert-warning"
+                        v-bind:isDismissible="false" />
+
+                    <navbar
+                        ref="navbar"
+                        cmsWidgetName="FunnelFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
                 </div>
-                <div class="row mt-0">
-                    <div class="col">
-                        <textboxQuestion
-                            cmsWidgetName="EmailAddressQuestionWidget"
-                            v-model="email"
-                            customInputId="email"
-                            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
-                    v-if="displayInvalidZipAlert"
-                    class="my-3"
-                    cmsWidgetName="AlertInvalidZipWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-                <alert
-                    v-if="displayNonServiceableZipAlert"
-                    class="my-3"
-                    :manualHeadline="AlertNonServiceableZipHeader"
-                    :manualCopy="AlertNonServiceableZipBody"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-                <div class="row mt-2" v-if="showServiceZipField">
-                    <div class="col mb-1">
-                        <textboxQuestion
-                            cmsWidgetName="ServiceZipQuestionWidget"
-                            v-model="serviceZipCode"
-                            inputId="serviceZipCode"
-                            validationRules="zip-required|zip-format"
-                            mask="#####" />
-                    </div>
-                </div>
-                <alert
-                    v-if="displayVinNotFoundAlert"
-                    class="my-3"
-                    cmsWidgetName="AlertVinNotFoundWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-                <alert
-                    v-if="displayMatchedDifferentVehicleAlert"
-                    class="my-3"
-                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
-                    :manualCopy="AlertMatchedDifferentVehicleBody"
-                    alertClass="alert-warning"
-                    v-bind:isDismissible="false" />
-                <funnelFooter
-                    ref="funnelFooter"
-                    cmsWidgetName="FunnelFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
     </Form>
@@ -91,7 +92,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 +231,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 +242,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 +265,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 +276,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 +368,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..46f573144 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -1,45 +1,56 @@
 <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
-                    ref="cashOrInsurance"
-                    cmsWidgetName="CashOrInsuranceQuestionWidget"
-                    v-model="isInsuranceSelected"
-                    groupName="CashOrInsuranceQuestion" />
-                <servicePackageQuestion
-                    ref="servicePackage"
-                    cashCmsWidgetName="CashServicePackageQuestionWidget"
-                    insuranceCmsWidgetName="InsuranceServicePackageQuestionWidget"
-                    groupName="ServicePackageQuestion"
-                    :availableLineItems="availableLineItems"
-                    :isInsuranceSelected="isInsuranceSelected"
-                    @vapsItemsSelected="vapsItemsSelectedAction"
-                    v-on="{ 'buttonEvent.openModal': openModalAction }"
-                    validationRules="option-required"
-                    isRequired />
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
 
-                <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
-                    cmsWidgetName="FunnelFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    :isBackButtonHidden="shouldHideBackButton"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
+                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
+
+                    <cashOrInsuranceQuestion
+                        ref="cashOrInsurance"
+                        cmsWidgetName="CashOrInsuranceQuestionWidget"
+                        v-model="isInsuranceSelected"
+                        groupName="CashOrInsuranceQuestion" />
+
+                    <servicePackageQuestion
+                        ref="servicePackage"
+                        cashCmsWidgetName="CashServicePackageQuestionWidget"
+                        insuranceCmsWidgetName="InsuranceServicePackageQuestionWidget"
+                        groupName="ServicePackageQuestion"
+                        :availableLineItems="availableLineItems"
+                        :isInsuranceSelected="isInsuranceSelected"
+                        @vapsItemsSelected="vapsItemsSelectedAction"
+                        v-on="{ 'buttonEvent.openModal': openModalAction }"
+                        validationRules="option-required"
+                        isRequired />
+
+                    <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" />
+
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        :isBackButtonHidden="shouldHideBackButton"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
             </div>
         </div>
     </Form>
@@ -48,7 +59,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";
@@ -237,7 +248,7 @@ export default {
     },
     components: {
         funnelHeader,
-        funnelFooter,
+        navbar,
         vehicleBanner,
         funnelSubHeader,
         Form,
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index 2fb033ea3..639fd0fd5 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -1,105 +1,113 @@
 <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 justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <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>
-
-            <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 +300,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..f276ea1cd 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,50 +1,62 @@
 <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" />
-            <template v-if="ChangeShopLink.length">
-                <textBlock
-                    cmsWidgetName="ChangeShopLink"
-                    justifyText="center"
-                    class="mb-3 text-link-small"
-                    marginTopSizeOverride="1" />
-            </template>
-            <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
-            <datePicker
-                customComponentId="dateQuestion"
-                selectableDatesSetting="custom"
-                ref="datePicker"
-                v-model="selectedDate"
-                class="text-link-small"
-                :customSelectableDatesCallback="getAvailableDatesMethod"
-                validationRules="date-required"
-                @date-clicked="openInshopTimeSlotsModal" />
-            <timeSlotModalQuestion
-                ref="timeSlotModalQuestion"
-                customComponentId="timeSlotModalQuestion"
-                v-model="selectedTimeSlotInfo"
-                cmsWidgetName="TimeSlotModalQuestion"
-                mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
-                mobileCmsWidgetName="MobileTimeSlotModal"
-                dropoffCmsWidgetName="DropOffTimeSlotModal"
-                sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-                overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
-                :selectedDate="selectedDate"
-                :appointmentType="appointmentType"
-                :premiumAppointmentFee="mobilePremiumAppointmentFee"
-                :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-                :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
-                :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
-                @time-slot-modal-closed="timeSlotModalClosed"
-                validationRules="time-slot-selection-required" />
-            <funnel-footer
-                cmsWidgetName="FunnelFooterWidget"
-                ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid"
-                @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 justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
+                    <template v-if="ChangeShopLink.length">
+                        <textBlock
+                            cmsWidgetName="ChangeShopLink"
+                            justifyText="center"
+                            class="mb-3 text-link-small"
+                            marginTopSizeOverride="1" />
+                    </template>
+                    <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
+                    <datePicker
+                        customComponentId="dateQuestion"
+                        selectableDatesSetting="custom"
+                        ref="datePicker"
+                        v-model="selectedDate"
+                        class="text-link-small"
+                        :customSelectableDatesCallback="getAvailableDatesMethod"
+                        validationRules="date-required"
+                        @date-clicked="openInshopTimeSlotsModal" />
+                    <timeSlotModalQuestion
+                        ref="timeSlotModalQuestion"
+                        customComponentId="timeSlotModalQuestion"
+                        v-model="selectedTimeSlotInfo"
+                        cmsWidgetName="TimeSlotModalQuestion"
+                        mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
+                        mobileCmsWidgetName="MobileTimeSlotModal"
+                        dropoffCmsWidgetName="DropOffTimeSlotModal"
+                        sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
+                        overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+                        :selectedDate="selectedDate"
+                        :appointmentType="appointmentType"
+                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                        :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                        :estimatedServiceMinutesMinimum="
+                            selectableDatesData.estimatedServiceMinutesMinimum
+                        "
+                        :estimatedServiceMinutesMaximum="
+                            selectableDatesData.estimatedServiceMinutesMaximum
+                        "
+                        @time-slot-modal-closed="timeSlotModalClosed"
+                        validationRules="time-slot-selection-required" />
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
         </div>
     </Form>
 </template>
@@ -52,7 +64,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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form, defineRule } from "vee-validate";
@@ -352,23 +364,23 @@ export default {
             }
         },
         updateFooterButtonText(timeSlotInfo) {
-            let funnelFooterButtonText;
+            let navbarButtonText;
             if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
-                funnelFooterButtonText = "Continue";
+                navbarButtonText = "Continue";
             } else {
-                funnelFooterButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
+                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
                     timeSlotInfo.timeSlot.date
                 )}`;
 
                 if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                    funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
                         timeSlotInfo.timeSlot.startTime
                     )}`;
                 } else if (
                     this.appointmentType === AppointmentTypeStrings.MOBILE &&
                     !timeSlotInfo.isPremiumAppointment
                 ) {
-                    funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
                         timeSlotInfo.timeSlot.startTime,
                         true
                     )} - ${this.getDisplayTextForMilitaryTime(
@@ -377,7 +389,7 @@ export default {
                     )}`;
                 }
             }
-            this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);
+            this.$refs.navbar.updateButtonText(navbarButtonText);
         },
         convertSelectedDateToShortMonthAndDay(selectedDate) {
             // This conversion ensures we don't get get GMT induced date changes
@@ -483,7 +495,7 @@ export default {
     },
     components: {
         funnelHeader,
-        funnelFooter,
+        navbar,
         funnelSubHeader,
         Form,
         loadingModal,
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index e49cd295c..f93a1d5c8 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,87 +1,106 @@
 <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 justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <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>
         </div>
     </Form>
 </template>
@@ -95,7 +114,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";
@@ -456,7 +475,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..2e816393b 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,56 +1,76 @@
 <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 justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <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" />
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-8 col-xl-6">
+                    <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" />
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        :isBackButtonHidden="shouldHideBackButton"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
             </div>
         </div>
     </Form>
@@ -59,7 +79,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 sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
@@ -509,7 +529,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..4b3f0e5dd 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,42 +1,54 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="page-container-grouped-styles vehicle-parts small-question-text">
+        <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
-            <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
-            <vehicleBanner
-                ref="vehicleBanner"
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall">
-                <div class="prevent-squish my-5">
-                    <div class="row">
-                        <div class="col pb-0">
-                            <alert
-                                class="rounded border-0 shadow-sm"
-                                alertClass="alert-warning"
-                                cmsWidgetName="AlertWidget"
-                                :isDismissible="false" />
-                        </div>
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col">
+                        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                     </div>
                 </div>
-                <div v-for="(item, i) in PartsOrQuestions" :key="i">
-                    <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-                    <hr v-if="i > 0" />
-                    <glassPartQuestion
-                        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-                        v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
-                        :glassLocation="item.glassLocation"
-                        :glassName="item.glassName"
-                        :colorAnswers="item.colorAnswers"
-                        :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
+                <div class="row justify-content-md-center">
+                    <div class="col-md-6 col-lg-4">
+                        <vehicleBanner
+                            ref="vehicleBanner"
+                            cmsWidgetName="VehicleBannerWidget"
+                            :displayGenericVehicleImage="false" />
+                        <funnelSubHeader
+                            ref="funnelSubHeader"
+                            cmsWidgetName="FunnelSubHeaderWidget" />
+                        <div class="prevent-squish my-5">
+                            <div class="row">
+                                <div class="col pb-0">
+                                    <alert
+                                        class="rounded border-0 shadow-sm"
+                                        alertClass="alert-warning"
+                                        cmsWidgetName="AlertWidget"
+                                        :isDismissible="false" />
+                                </div>
+                            </div>
+                        </div>
+                        <div v-for="(item, i) in PartsOrQuestions" :key="i">
+                            <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+                            <hr v-if="i > 0" />
+                            <glassPartQuestion
+                                :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+                                v-model="
+                                    selectedGlassParts[item.glassLocation + '-' + item.glassName]
+                                "
+                                :glassLocation="item.glassLocation"
+                                :glassName="item.glassName"
+                                :colorAnswers="item.colorAnswers"
+                                :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
+                        </div>
+                        <navbar
+                            cmsWidgetName="FunnelFooterWidget"
+                            ref="navbar"
+                            :isForwardActionDisabled="isForwardActionDisabled"
+                            @back-clicked="navigateBack"
+                            @ForwardClicked="forwardButtonAction" />
+                    </div>
                 </div>
-                <funnelFooter
-                    cmsWidgetName="FunnelFooterWidget"
-                    ref="funnelFooter"
-                    :isForwardActionDisabled="isForwardActionDisabled"
-                    @back-clicked="navigateBack"
-                    @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
     </Form>
@@ -48,7 +60,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 +190,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,9 +233,19 @@ export default {
         funnelHeader,
         vehicleBanner,
         funnelSubHeader,
-        funnelFooter,
+        navbar,
         alert,
         loadingModal,
     },
 };
 </script>
+
+<style lang="scss">
+.vehicle-parts {
+    label {
+        &.list-card {
+            height: auto;
+        }
+    }
+}
+</style>
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 2ae241e01..0649fb651 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -1,71 +1,68 @@
 <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" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-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="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="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="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" />
 
-                            <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>
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        @ForwardClicked="forwardButtonAction"
+                        :isForwardActionDisabled="!meta.valid"
+                        ref="navbar" />
                 </div>
             </div>
         </div>
@@ -75,7 +72,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 +387,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..8ab84aacb 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,131 +1,125 @@
 <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 cmsWidgetName="FunnelSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall">
-                <div class="row mb-2">
-                    <div class="col">
-                        <textboxQuestion
-                            cmsWidgetName="VinNumberQuestionWidget"
-                            v-model="vin"
-                            customInputId="vin"
-                            isRequired
-                            :validationRules="
-                                !vinPopulatedOnPageLoad ? 'vin-required|vin-format' : ''
-                            "
-                            :isDisabled="vinPopulatedOnPageLoad"
-                            maxLength="17"
-                            :mask="vinMask"
-                            includeImageQuestion
-                            :imageQuestionSubmitHandler="getVinFromImage"
-                            :maxFileSize="imageUploadMaxFileSize"
-                            @image-lookup-error="displayVinScanAlert"
-                            @image-validity-error="displayVinScanAlert"
-                            data-test="vin-lookup-field"
-                            ref="vinLookupQuestion" />
-                    </div>
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
-                <div class="row">
-                    <div class="col">
-                        <alert
-                            cmsWidgetName="AlertVinScanFailed"
-                            v-if="displayVinScanFailedAlert"
-                            alertClass="alert-danger" />
-                    </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+
+                    <textboxQuestion
+                        cmsWidgetName="VinNumberQuestionWidget"
+                        v-model="vin"
+                        customInputId="vin"
+                        isRequired
+                        :validationRules="!vinPopulatedOnPageLoad ? 'vin-required|vin-format' : ''"
+                        :isDisabled="vinPopulatedOnPageLoad"
+                        maxLength="17"
+                        :mask="vinMask"
+                        includeImageQuestion
+                        :imageQuestionSubmitHandler="getVinFromImage"
+                        :maxFileSize="imageUploadMaxFileSize"
+                        @image-lookup-error="displayVinScanAlert"
+                        @image-validity-error="displayVinScanAlert"
+                        data-test="vin-lookup-field"
+                        ref="vinLookupQuestion" />
+
+                    <alert
+                        cmsWidgetName="AlertVinScanFailed"
+                        v-if="displayVinScanFailedAlert"
+                        alertClass="alert-danger" />
+
+                    <vinInformation />
+
+                    <textboxQuestion
+                        cmsWidgetName="ServiceZipQuestionWidget"
+                        v-model="serviceZipCode"
+                        customInputId="serviceZipCode"
+                        mask="#####"
+                        isRequired
+                        validationRules="zip-required|zip-format" />
+
+                    <textboxQuestion
+                        cmsWidgetName="EmailAddressQuestionWidget"
+                        v-model="emailAddress"
+                        customInputId="emailAddress"
+                        isRequired
+                        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
+                        class="my-4"
+                        :manualHeadline="AlertPerfectMatchInsuranceVerifiedHeader"
+                        :manualCopy="AlertPerfectMatchInsuranceVerifiedBody"
+                        v-model="customAlertData"
+                        v-if="
+                            vinPopulatedOnPageLoad &&
+                            isInsuranceVerified &&
+                            !displayInvalidZipAlert &&
+                            !displayNonServiceableZipAlert
+                        "
+                        alertClass="alert-success" />
+
+                    <alert
+                        class="my-4"
+                        :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                        :manualCopy="AlertMatchedDifferentVehicleBody"
+                        v-model="customAlertData"
+                        v-if="displayMatchedDifferentVehicleAlert"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        class="my-4"
+                        :manualHeadline="AlertNonServiceableZipHeader"
+                        :manualCopy="AlertNonServiceableZipBody"
+                        v-model="customAlertData"
+                        v-if="displayNonServiceableZipAlert"
+                        alertClass="alert-danger" />
+
+                    <alert
+                        class="my-4"
+                        v-model="customAlertData"
+                        v-if="displayVinNotFoundAlert"
+                        alertClass="alert-danger"
+                        cmsWidgetName="AlertVinNotFoundWidget" />
+
+                    <alert
+                        class="my-4"
+                        :manualHeadline="AlertPerfectMatchInsuranceNotVerifiedHeader"
+                        :manualCopy="AlertPerfectMatchInsuranceNotVerifiedBody"
+                        v-model="customAlertData"
+                        v-if="
+                            vinPopulatedOnPageLoad &&
+                            !isInsuranceVerified &&
+                            !displayInvalidZipAlert &&
+                            !displayNonServiceableZipAlert
+                        "
+                        alertClass="alert-success" />
+
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
                 </div>
-                <div class="row">
-                    <div class="col">
-                        <vinInformation />
-                    </div>
-                </div>
-                <div class="row mb-0 mt-4">
-                    <div class="col">
-                        <textboxQuestion
-                            cmsWidgetName="ServiceZipQuestionWidget"
-                            v-model="serviceZipCode"
-                            customInputId="serviceZipCode"
-                            mask="#####"
-                            isRequired
-                            validationRules="zip-required|zip-format" />
-                    </div>
-                </div>
-                <div class="row mt-4">
-                    <div class="col">
-                        <textboxQuestion
-                            cmsWidgetName="EmailAddressQuestionWidget"
-                            v-model="emailAddress"
-                            customInputId="emailAddress"
-                            isRequired
-                            validationRules="email-address-required|email-address-format" />
-                    </div>
-                </div>
-                <div class="row mb-0">
-                    <div class="col">
-                        <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
-                    </div>
-                </div>
-                <alert
-                    ref="alertInvalidZip"
-                    v-if="displayInvalidZipAlert"
-                    class="my-4"
-                    cmsWidgetName="AlertInvalidZipWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-                <alert
-                    class="my-4"
-                    :manualHeadline="AlertPerfectMatchInsuranceVerifiedHeader"
-                    :manualCopy="AlertPerfectMatchInsuranceVerifiedBody"
-                    v-model="customAlertData"
-                    v-if="
-                        vinPopulatedOnPageLoad &&
-                        isInsuranceVerified &&
-                        !displayInvalidZipAlert &&
-                        !displayNonServiceableZipAlert
-                    "
-                    alertClass="alert-success" />
-                <alert
-                    class="my-4"
-                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
-                    :manualCopy="AlertMatchedDifferentVehicleBody"
-                    v-model="customAlertData"
-                    v-if="displayMatchedDifferentVehicleAlert"
-                    alertClass="alert-warning" />
-                <alert
-                    class="my-4"
-                    :manualHeadline="AlertNonServiceableZipHeader"
-                    :manualCopy="AlertNonServiceableZipBody"
-                    v-model="customAlertData"
-                    v-if="displayNonServiceableZipAlert"
-                    alertClass="alert-danger" />
-                <alert
-                    class="my-4"
-                    v-model="customAlertData"
-                    v-if="displayVinNotFoundAlert"
-                    alertClass="alert-danger"
-                    cmsWidgetName="AlertVinNotFoundWidget" />
-                <alert
-                    class="my-4"
-                    :manualHeadline="AlertPerfectMatchInsuranceNotVerifiedHeader"
-                    :manualCopy="AlertPerfectMatchInsuranceNotVerifiedBody"
-                    v-model="customAlertData"
-                    v-if="
-                        vinPopulatedOnPageLoad &&
-                        !isInsuranceVerified &&
-                        !displayInvalidZipAlert &&
-                        !displayNonServiceableZipAlert
-                    "
-                    alertClass="alert-success" />
-                <funnelFooter
-                    cmsWidgetName="FunnelFooterWidget"
-                    ref="funnelFooter"
-                    :isForwardActionDisabled="!meta.valid"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
     </Form>
@@ -134,7 +128,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 +272,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 +289,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 +309,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 +374,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 +482,7 @@ export default {
         vin() {
             this.displayVinNotFoundAlert = false;
             this.displayVinScanFailedAlert = false;
-            this.$refs.funnelFooter.updateButtonText(
+            this.$refs.navbar.updateButtonText(
                 this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
             );
         },
@@ -498,7 +492,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..9c886d30f 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;
         }
@@ -44,10 +36,6 @@ body {
         overflow: hidden;
     }
 
-    .page-container-grouped-styles {
-        @extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
-    }
-
     //Footer modal backdrop adjustments for positioning
     .modal-backdrop {
         left: 50%;
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);