diff --git a/jest.config.js b/jest.config.js
index 0a063507d..27656cd80 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,6 +16,7 @@ module.exports = {
     "!src/layouts/reveal/**/*.vue",
     "!src/ux-components/text-link/**/*.vue",
     "!src/common-components/question-chain/**/*.vue",
+    "!src/layouts/quote/**/*.vue",
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 2ea6d1c3a..e2678d2db 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -9,7 +9,7 @@
         <legend class="sr-only" :data-focus-target="formattedGroupName" :id="formattedGroupName" tabindex="-1">
           {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
         </legend>
-        <div :class="getComponentLoopWrapperClasses">
+        <div :class="getComponentLoopWrapperClasses" role="application">
           <div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
             <component
               :is="buttonType"
@@ -25,6 +25,7 @@
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
               :isWide=isWide
+              :isCashOrInsurance=isCashOrInsurance
               :isRequired=isRequired
               :buttonImage="answer.AnswerImageUrl"
               :buttonImageId="answer.ImageId"
@@ -34,10 +35,10 @@
               :selectedValues="selectedValues"
               data-test="button"
               :validationRules="validationRules"
-              :class="[suppressError ? 'alertError' : '']"
+              :class="[suppressError ? 'alertError' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
               :clearOnUnmount="clearOnUnmount"
             />
-            <!-- For nested questions --> 
+            <!-- For nested questions -->
             <transition name="fade" mode="out-in">
               <div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
                 <slot></slot>
@@ -87,6 +88,7 @@ export default {
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
+    isCashOrInsurance: Boolean,
     modelValue: [Array, String],
     validationRules: String,
     suppressError: Boolean,
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index c770d2b90..f94d69826 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -1,4 +1,5 @@
 <template>
+<div role="application">
 	<div class="row mt-2 mb-4">
 		<div class="col">
 			<textboxQuestion
@@ -67,6 +68,7 @@
 		alertClass="alert-warning"
 		v-bind:isDismissible="false"
 	/>
+</div>
 </template>
 
 <script>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 158150baf..588244bd7 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -1,10 +1,105 @@
+
+<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">
+          <buttonQuestion
+            :answers="years"
+            text-position="text-start"
+            questionText="List Button as Radio"
+            groupName="years"
+            />
+          <buttonQuestion
+            questionText="CASH OR INSURANCE"
+            :answers="answersFromCms"
+            groupName="cash-or-insurance"
+            buttonType="listButtonHorizontal"
+            useTextForValue
+            isCashOrInsurance
+            isRequired
+            />
+            <radio/>
+          <funnel-footer
+            cmsWidgetName="FunnelFooterWidget"
+            :isForwardActionDisabled="!meta.valid"
+            :isBackButtonHidden=shouldHideBackButton
+            @back-clicked="backButtonAction"
+            @ForwardClicked="forwardButtonAction"
+          />
+        </div>
+      </div>
+    </Form>
+</template>
+
 <script>
+// Components
+import buttonQuestion from "@/common-components/button-question/button-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
+import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
+
+import store from "@/store";
+import baseMixin from "@/mixins/base-mixin";
+
 export default {
     name: "quote",
+    async beforeRouteEnter(to, from, next) {
+      // Call APIs
+      const cmsContent = await fetchCmsContentForPage(to.query.fmgPage);
+
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.setCmsContent(cmsContent);
+      });
+    },
     methods: {
         arePagePrerequisitesValid() {
             return true;
         }
-    }
-}
-</script>
\ No newline at end of file
+    },
+    computed: {
+        years() {
+            return ["2011", "2012"];
+        },
+        answersFromCms() {
+            return ["Pay on my own", "Pay with insurance"];
+        },
+        selectedChipCountValues: {
+        get: function() {
+            return this.modelValue;
+        },
+        set: function(newValue) {
+            this.$emit("update:modelValue", newValue);
+        }
+    },
+      },
+    components: {
+      funnelHeader,
+      funnelFooter,
+      vehicleBanner,
+      funnelSubHeader,
+      Form,
+      buttonQuestion
+    },
+
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 8b9328db0..0bc9825a4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,7 +19,15 @@ import eventBus from "@/helpers/event-bus/event-bus";
 import store from "@/store";
 import analyticsMixin from "@/mixins/analytics-mixin";
 
+// Components
+import quote from "@/layouts/quote/quote.vue";
+
 const routes = [
+  {
+    path: "/quote", // This is a temporary route for testing.
+    name: "quote",
+    component: quote,
+  },
   {
     path: "/",
     name: "root",
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index d067895ee..58054b06b 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -1,4 +1,5 @@
 const fmgPageValues = {
+  QUOTE: "quote",
   VEHICLE_YEAR: "vehicle-year",
   VEHICLE_MAKE: "vehicle-make",
   VEHICLE_MODEL: "vehicle-model",
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index a9cf0b0ea..5768c55de 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -19,6 +19,7 @@ const navigationScenarios = {
   SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
   ANSWERED_QUESTIONS_WITH_SINGLE_PART: "ANSWERED_QUESTIONS_WITH_SINGLE_PART",
   ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS: "ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS",
+  SELECTED_PROVIDE_VIN_DIFFERENT_WAY: "SELECTED_PROVIDE_VIN_DIFFERENT_WAY"
 };
 
 export { navigationScenarios };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 515465385..127561bd2 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -186,7 +186,11 @@ const routingTable = [
       {
         scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
         destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
-      }      
+      },
+      {
+        scenario: navigationScenarios.SELECTED_PROVIDE_VIN_DIFFERENT_WAY,
+        destinationFmgPageValue: fmgPageValues.ESTIMATE
+      }           
     ],
   },
   {
@@ -229,4 +233,4 @@ const routingTable = [
   },
 ];
 
-export { routingTable };
+export { routingTable };
\ No newline at end of file
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 49978aa1e..365e87c48 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,54 +1,54 @@
 <template>
   <div
-    class="list-group list-button-horizontal d-flex flex-column w-100"
-    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
-    @keyup.space="triggerButton()"
-    @keyup.up="handleKeyupArrow()"
-    @keyup.down="handleKeyupArrow()"
-    @keyup.left="handleKeyupArrow()"
-    @keyup.right="handleKeyupArrow()"
+  class="list-group list-button-horizontal d-flex flex-column w-100"
+  :class="[(errors.length > 0 || hasError) ? 'has-error' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
+  @keyup.space="triggerButton()"
+  @keyup.up="handleKeyupArrow()"
+  @keyup.down="handleKeyupArrow()"
+  @keyup.left="handleKeyupArrow()"
+  @keyup.right="handleKeyupArrow()"
   >
-    <input
-      :type="isMultiSelect ? 'checkbox' : 'radio'"
-      :id="buttonID"
-      :name="groupName"
-      :value="value"
-      :aria-required="isRequired"
-      v-model="checkValue"
-      @change="handleInputChange()"
-    />
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-      @mouseup="triggerButton()"
-    >
-      <span
-        class="m-0"
-        :class="textPosition"
-      >
-        {{buttonLabel}}
-      </span>
-      <span
-        v-if="buttonLabelSubCopy"
-        class="m-0 small"
-        :class="textPosition"
-      >
-        {{ buttonLabelSubCopy }}
-      </span>
-      <span 
-        v-if="screenReaderOnlyText" 
-        class="sr-only"
-      >
-        {{ screenReaderOnlyText }}
-      </span>
-      <loader
-        v-if="isLoaderDisplayed && selectingInitiatesLoad"
-        :class="[loaderColor, loaderPosition]"
-      />
-    </label>
-  </div>
+  <input
+  :type="isMultiSelect ? 'checkbox' : 'radio'"
+  :id="buttonID"
+  :name="groupName"
+  :value="value"
+  :aria-required="isRequired"
+  v-model="checkValue"
+  @change="handleInputChange()"
+  />
+  <label
+  tabindex="-1"
+  :for="buttonID"
+  :aria-labelledby="buttonID"
+  class="d-flex flex-column justify-content-center p-3"
+  @mouseup="triggerButton()"
+  >
+  <span
+  class="m-0"
+  :class="textPosition"
+  >
+  {{buttonLabel}}
+</span>
+<span
+v-if="buttonLabelSubCopy"
+class="m-0 small"
+:class="textPosition"
+>
+{{ buttonLabelSubCopy }}
+</span>
+<span
+v-if="screenReaderOnlyText"
+class="sr-only"
+>
+{{ screenReaderOnlyText }}
+</span>
+<loader
+v-if="isLoaderDisplayed && selectingInitiatesLoad"
+:class="[loaderColor, loaderPosition]"
+/>
+</label>
+</div>
 </template>
 
 <script>
@@ -70,6 +70,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     isRequired: Boolean,
+    isCashOrInsurance: Boolean,
     value: {
       // Field initial value
       type: String,
@@ -92,8 +93,8 @@ export default {
   created() {
     if (Array.isArray(this.selectedValues)) {
       this.checkValue = this.isMultiSelect
-        ? this.selectedValues.includes(this.value)
-        : this.selectedValues[0];
+      ? this.selectedValues.includes(this.value)
+      : this.selectedValues[0];
     }
   },
   unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
@@ -107,9 +108,9 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleInputChange() {
-        if(!this.selectingInitiatesLoad) {
-          this.handleCheckChange();
-        }
+      if(!this.selectingInitiatesLoad) {
+        this.handleCheckChange();
+      }
     },
     handleKeyupArrow() {
       if (this.isMultiSelect) {
@@ -123,9 +124,9 @@ export default {
     triggerButton() {
       if(this.selectingInitiatesLoad) {
         this.displayLoader();
-          this.handleCheckChange();
+        this.handleCheckChange();
       }
-      
+
       this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
@@ -224,7 +225,54 @@ export default {
     span {
       font-size: .875rem;
     }
-  }  
+  }
+
+  // Cash/Insurance option radio button styling
+  &.radio-fancy {
+    label {
+      border: 1px solid $blue-700;
+      z-index: 2;
+      color: $blue;
+      span {
+        font-size: 1rem;
+        font-weight: 500;
+      }
+    }
+    label:hover {
+      background-color: $blue-700;
+      color: $white;
+      box-shadow: none;
+    }
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      height: 0;
+      opacity: 0;
+      width: 0;
+
+      &:focus-visible + label {
+        border-radius: 0.5rem;
+        z-index: 2;
+      }
+      &:focus + label {
+        z-index: 3;
+      }
+      &:checked + label {
+        outline: none;
+        box-shadow: none;
+        color: $white;
+        background: linear-gradient(84.45deg, #125B7E 0%, #3B8FB8 100%);
+        border-radius: 0.5rem;
+        z-index: 5;
+      }
+      &:checked:focus + label {
+        box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+      }
+      &:checked + label p:first-child {
+        font-weight: 500;
+      }
+    }
+  }
 }
 
 .col {
@@ -233,7 +281,6 @@ export default {
       label {
         border-bottom-left-radius: 0.5rem;
         border-top-left-radius: 0.5rem;
-        z-index: 2;
       }
     }
   }
@@ -246,5 +293,36 @@ export default {
       }
     }
   }
+
+  //Cash/insurance styling
+  &:first-of-type {
+    .list-button-horizontal.radio-fancy {
+      input[type="radio"] {
+        &:checked + label {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+        }
+        &:checked:focus + label {
+          border-bottom-right-radius: 0.5rem;
+          border-top-right-radius: 0.5rem;
+        }
+      }
+    }
+  }
+
+  &:last-of-type {
+    .list-button-horizontal.radio-fancy {
+      input[type="radio"] {
+        &:checked + label {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
+        &:checked:focus + label {
+          border-bottom-left-radius: 0.5rem;
+          border-top-left-radius: 0.5rem;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 0c347de52..a15675d58 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,11 +2,11 @@
   <div
     class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
     :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
-    @keyup.space="triggerButton()"
-    @keyup.up="handleKeyupArrow()"
-    @keyup.down="handleKeyupArrow()"
-    @keyup.left="handleKeyupArrow()"
-    @keyup.right="handleKeyupArrow()">
+    @keyup.space="triggerButton"
+    @keyup.up="handleKeyupArrow"
+    @keyup.down="handleKeyupArrow"
+    @keyup.left="handleKeyupArrow"
+    @keyup.right="handleKeyupArrow">
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
       :id="buttonID"
@@ -14,14 +14,14 @@
       :value="value"
       :aria-required="isRequired"
       v-model="checkValue"
-      @change="handleInputChange()"
+      @change="handleInputChange"
     >
     <label
       tabindex="-1"
       :for="buttonID"
       :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
-      @mouseup="triggerButton()"
+      @mouseup="triggerButton"
     >
       <span
         class="m-0"
@@ -106,10 +106,7 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleInputChange() {
-      if(this.selectingInitiatesLoad) {
-        this.triggerButton();
-      }
-      else {
+      if(!this.selectingInitiatesLoad) {
         this.handleCheckChange();
       }
     },
@@ -117,8 +114,6 @@ export default {
       if (this.isMultiSelect) {
         return; // Prevent arrow keys from doing anything if element is a checkbox
       }
-
-      this.handleInputChange();
     },
     triggerButton() {
       if(this.selectingInitiatesLoad) {