diff --git a/jest.config.js b/jest.config.js
index 36c4507fc..b8beb88cc 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -13,6 +13,8 @@ module.exports = {
     "!src/helpers/unit-test-helper.js",
     "!src/layouts/component-test/component-test.vue",
     "!src/layouts/form-test/form-test.vue",
+    "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
+    "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
     "!src/layouts/address-poc/address-poc.vue",
   ], //! 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.spec.js b/src/common-components/button-question/button-question.spec.js
index d5608cd62..464fcf245 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -3,12 +3,14 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 import { nextTick } from "vue";
 
 describe("buttonQuestion.vue", () => {
-  it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
+  it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setProps({
-      isOverflowScrollable: true,
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        isOverflowScrollable: true,
+      }
     });
+
     // Assert
     const fieldSet = wrapper.find('fieldset');
     expect(fieldSet.classes()).toContain("overflow-scroll");
@@ -16,11 +18,12 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Fieldset classes should contain row if button type is listCard", async () => {
+  it("Fieldset classes should contain row if button type is listCard", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setProps({
-      buttonType: "listCard",
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        buttonType: "listCard",
+      }
     });
     // Assert
     const Div = wrapper.find('fieldset div');
@@ -29,11 +32,12 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", async () => {
+  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setProps({
-      buttonType: "listButtonHorizontal",
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        buttonType: "listButtonHorizontal",
+      }
     });
     // Assert
     const Div = wrapper.find('fieldset div');
@@ -57,12 +61,13 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Should add values to array on checkbox click", async () => {
+  it("Should add values to array on checkbox click", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setProps({
-      modelValue: ["2022", "2021", "2020"],
-      isMultiSelect: true
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        modelValue: ["2022", "2021", "2020"],
+        isMultiSelect: true,
+      }
     });
     const val = {isChecked: true, buttonId: "2019", }
     wrapper.vm.handleCheckedChanged(val);
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 0799446d5..823ce79fd 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -19,7 +19,7 @@
               :textPosition="textPosition"
               :isMultiSelect="isMultiSelect"
               :groupName="groupName"
-              :loaderEnabled="loaderEnabled"
+              :selectingInitiatesLoad="selectingInitiatesLoad"
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
               :sizeInRem="sizeInRem"
@@ -29,13 +29,17 @@
               :buttonImageId="answer.ImageId"
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
-              :colLength="this.answers.length < 3 ? '' : '-4'"
+              :colLength="getColLength"
               :selectedButtonIDs="selectedValues"
               data-test="button"
+              :validationRules="validationRules"
             />
           </div>
       </fieldset>
     </div>
+    <div class="row mt-2 form-test-error" v-if="!suppressError">
+        <error-message :name="groupName"></error-message>
+    </div>
   </div>
 </template>
 
@@ -43,6 +47,7 @@
 import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
+import { ErrorMessage } from 'vee-validate';
 import radio from "@/ux-components/radio/radio";
 
 export default {
@@ -60,7 +65,7 @@ export default {
       type: String,
       default: "text-center",
     },
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: {
       type: String,
       default: "blue",
@@ -77,6 +82,8 @@ export default {
     isOverflowScrollable: Boolean,
     isWide: Boolean,
     modelValue: Array,
+    validationRules: String,
+    suppressError: Boolean,
   },
   computed: {
     getFieldSetClasses() {
@@ -102,6 +109,13 @@ export default {
       }
       return classes;
     },
+    getColLength(){
+      if(this.isWide) {
+        return "12"
+      } else {
+        return this.answers.length < 3 ? '' : '-4';
+      }
+    },
     selectedValues: {
       get: function() {
         return this.modelValue;
@@ -111,13 +125,6 @@ export default {
       }
     },
   },
-  mounted(){
-    if(Array.isArray(this.answers) && this.answers.length === 1) {
-      const newSelectedValues = this.selectedValues;
-      newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
-      this.selectedValues = newSelectedValues;
-    }
-  },
   methods: {
     handleCheckedChanged(val) {
       if(this.isMultiSelect) {
@@ -126,7 +133,7 @@ export default {
         val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
         this.selectedValues = newSelectedValues;
       } else {
-        this.selectedValues = [val.buttonId]
+        this.selectedValues = [val.buttonId];
       }
     },
   },
@@ -134,6 +141,7 @@ export default {
     listButton,
     listButtonHorizontal,
     listCard,
+    ErrorMessage,
     radio,
   },
 };
diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index 1c173b6be..6b2bd8335 100644
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -5,7 +5,6 @@ describe("funnel-footer.vue", () => {
 
   it("Should return footer-link class", async () => {
     // Act
-
       const r = {
         test:"testing",
         clientHeight: 10,
@@ -18,43 +17,38 @@ describe("funnel-footer.vue", () => {
 
       const wrapper = mount(funnelFooter, {
       });
+      wrapper.vm.initializeComponent(cmsContent);
 
       // Assert
       const link = wrapper.find("a");
-      console.log(wrapper.html());
 
       // Expect
       expect(link.attributes('class')).toContain("footer");
 
   });
 
-  it("Should return link text", async () => {
+  it("Should emit ForwardClicked on button click", async () => {
     // Act
     const wrapper = mount(funnelFooter, {
-      propsData: {
-        text: "Terms of use",
-      },
     });
-
+    wrapper.vm.buttonClick();
     // Assert
-    const link = wrapper.find("a");
-
-    expect(link.text()).toEqual("Terms of use");
+    expect(wrapper.emitted()["ForwardClicked"][0]).toHaveBeenCalled;
   });
 
-  it("Should return class btn-primary", async () => {
+  it("Should emit BackClicked on link click", async () => {
     // Act
     const wrapper = mount(funnelFooter, {
-      propsData: {
-        isPrimary: true,
-      },
     });
-
+    wrapper.vm.linkClick();
     // Assert
-    const input = wrapper.find("button");
-
-    // Expect
-    expect(input.attributes("class")).toContain("btn-primary");
+    expect(wrapper.emitted()["BackClicked"][0]).toHaveBeenCalled;
   });
 
 });
+
+//Mock CMS content
+const cmsContent = {
+  backLink: "text",
+  buttonText: "text",
+};
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index e61943761..cd9ad0975 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -17,7 +17,16 @@
     <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
       <div class="row d-flex flex-row-reverse align-items-center">
         <div class="col-12 button-col d-flex justify-content-end" id="stacked">
-          <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
+          <buttonMain
+            isPrimary
+            :buttonText="buttonText"
+            loaderColor="white"
+            sizeInRem="1"
+            :class="isDisabled && 'form-test-invalid'"
+            :aria-disabled="isDisabled"
+            :isDisabled="isDisabled"
+            @click-event="buttonClick"
+          />
         </div>
         <div class="col-12 link-col py-1">
           <textLink
@@ -38,6 +47,9 @@ import buttonMain from "@/ux-components/button-main/button-main";
 
 export default {
   name: "funnelFooter",
+  props: {
+    isDisabled: Boolean,
+  },
   components: {
     textLink,
     buttonMain
@@ -70,7 +82,6 @@ export default {
       this.$emit("ForwardClicked");
     },
     linkClick() {
-      console.log("ff linkClicked");
       this.$emit("BackClicked");
     },
   }
@@ -86,6 +97,10 @@ export default {
   .btn-primary {
     width: 100%;
   }
+  a {
+    display: flex;
+    justify-content: center;
+  }
   @media only screen and (min-width: 340px) {
     .button-col,
     .link-col {
@@ -94,6 +109,10 @@ export default {
     .btn-primary {
       width: auto;
     }
+    a {
+      display: flex;
+      justify-content: flex-start;
+    }
   }
 }
 </style>
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 937109111..bc290d473 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -57,7 +57,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 h5 {
   line-height: 32px;
 
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 3f1ae5ad9..8812fe58a 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -13,12 +13,19 @@
           tabIndex="1"
           checkboxLabel="I'm a checkbox"
         />
+        <p class="my-3">With Error:</p>
+        <checkbox
+          checkboxName="demo checkbox"
+          buttonID="checkbox-2"
+          tabIndex="1"
+          checkboxLabel="Error!"
+          hasError
+        />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
-        <p class="m-0">Sample radio button group</p>
       </div>
     </div>
     <div class="row">
@@ -29,22 +36,32 @@
           buttonID="radio-button-a"
           isRequired
           value="I'm a radio button!"
-          modelValue="Model Value 1"
           screenReaderOnlyText="Model Value 1"
         />
-      </div>
-      <div class="col">
         <radio
           groupName="radio-demo-2"
           buttonLabel="I'm also a radio button!"
           buttonID="radio-button-b"
           isRequired
           value="I'm also a radio button!"
-          modelValue="Model Value 2"
           screenReaderOnlyText="Model Value 2"
         />
       </div>
     </div>
+    <div class="row">
+      <div class="col">
+        <p class="my-3">With Error:</p>
+        <radio
+          groupName="radio-demo-3"
+          buttonLabel="Error!"
+          buttonID="radio-button-c"
+          isRequired
+          value="Error!"
+          screenReaderOnlyText="Model Value 1"
+          hasError
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@@ -62,12 +79,39 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonMain buttonText="secondary" loaderColor="white" sizeInRem="1" />
+        <buttonMain
+          isPrimary
+          buttonText="Primary Disabled"
+          loaderColor="white"
+          sizeInRem="1"
+          disabled
+        />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonBack backButtonAccessibleText="Back button label" />
+        <buttonMain
+          buttonText="Secondary"
+          loaderColor="white"
+          sizeInRem="1"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonMain
+          buttonText="Secondary Disabled"
+          loaderColor="white"
+          sizeInRem="1"
+          disabled
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonBack
+          backButtonAccessibleText="Back button label"
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -99,44 +143,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkbox in Column Layout</h6>
-      </div>
-    </div>
-    <fieldset>
-      <legend class="sr-only">Functioning as Checkbox</legend>
-      <div class="row g-2">
-        <listCard
-          isMultiSelect
-          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 1"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 2"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description with more than one line"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 3"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy=""
-        />
-      </div>
-    </fieldset>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
@@ -152,7 +158,7 @@
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
-            buttonID="List Card Checkbox"
+            buttonID="List Card Checkbox 1"
             groupID="checkbox-demo-1"
             buttonLabelSubCopy="Description"
           />
@@ -169,13 +175,31 @@
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
-            buttonID="List Card Checkbox b"
+            buttonID="List Card Checkbox 2"
             groupID="checkbox-demo-1a"
             buttonLabelSubCopy=""
           />
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Checkbox with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Checkbox with Error</legend>
+          <listCard
+            isMultiSelect
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Checkbox 3"
+            groupID="checkbox-demo-1e"
+            buttonLabelSubCopy="Description"
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
@@ -187,7 +211,7 @@
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Radio Button"
-            groupID="radio-demo-2"
+            groupID="radio-demo-2b"
             buttonLabelSubCopy="Description"
           />
         </fieldset>
@@ -210,6 +234,24 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Radio Button with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Radio Button with Error</legend>
+          <listCard
+            isRadio
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Radio Button c"
+            groupID="radio-demo-2b"
+            buttonLabelSubCopy="Description"
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
@@ -246,6 +288,25 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Horizontal with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Horizontal with Error</legend>
+          <listCard
+            isMultiSelect
+            isWide
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Side Window"
+            altText=""
+            buttonID="List Card Horizontal Checkbox d"
+            groupID="checkbox-demo-3d"
+            buttonLabelSubCopy=""
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
@@ -280,6 +341,24 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Horizontal with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Horizontal with Error</legend>
+          <listCard
+            isWide
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Horizontal Radio Button e"
+            groupID="radio-demo-4e"
+            buttonLabelSubCopy=""
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
@@ -334,6 +413,21 @@
           sizeInRem="1"
           screenReaderOnlyText=" opens new window"
         />
+        <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
+        <listButton
+          isMultiSelect
+          groupName="demo-2"
+          ariaLabelBy="vehicle-year"
+          buttonID="2019b"
+          buttonLabel="2019"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
       </div>
     </div>
     <div class="row">
@@ -382,6 +476,20 @@
           sizeInRem="1"
           screenReaderOnlyText=" opens new window"
         />
+        <h6 class="mx-2 my-4">Radio Button with Error</h6>
+        <listButton
+          groupName="demo-1-checkbox"
+          ariaLabelBy="vehicle-year"
+          buttonID="2016"
+          buttonLabel="2016"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -653,6 +761,63 @@
         />
       </div>
     </div>
+    <div class="row px-3">
+      <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-4-radio-group"
+        class="d-flex flex-row p-0"
+      >
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
+        <listButtonHorizontal
+          isMultiSelect
+          groupName="demo-4b"
+          ariaLabelBy="vehicle-model"
+          buttonID="1b"
+          buttonLabel="1"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          isMultiSelect
+          groupName="demo-4b"
+          ariaLabelBy="vehicle-model"
+          buttonID="2b"
+          buttonLabel="2"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="2"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          isMultiSelect
+          groupName="demo-4b"
+          ariaLabelBy="vehicle-model"
+          buttonID="3b"
+          buttonLabel="3"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="3"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+      </div>
+    </div>
     <div class="row px-3">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
@@ -707,6 +872,63 @@
         />
       </div>
     </div>
+    <div class="row px-3">
+      <h6 class="mx-2 my-4 d-flex align-self-start">Radio Button with Error</h6>
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-4-checkbox-group"
+        class="d-flex flex-row p-0"
+      >
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
+        <listButtonHorizontal
+          groupName="demo-4-checkboxc"
+          ariaLabelBy="vehicle-model"
+          buttonID="4c"
+          buttonLabel="4"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          groupName="demo-4-checkboxc"
+          ariaLabelBy="vehicle-model"
+          buttonID="5c"
+          buttonLabel="5"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="2"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          groupName="demo-4-checkboxc"
+          ariaLabelBy="vehicle-model"
+          buttonID="6c"
+          buttonLabel="6"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="3"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
@@ -823,129 +1045,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Site Header</h4>
-      </div>
-    </div>
-    <div class="row my-3">
-      <div class="col">
-        <funnelHeader
-          imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
-      </div>
-    </div>
-    <div class="row my-3">
-      <div class="col">
-        <vehicleBanner
-        vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
-         :displayGenericVehicleImage=true
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <buttonQuestion
-        :answers="checkboxAnswers"
-        :isMultiSelect="true"
-        ariaLabelBy="checkbox"
-        groupName="checkbox-list"
-        questionText="List Button as checkbox"
-        />
-        <buttonQuestion
-        :answers="radioAnswers"
-        ariaLabelBy="radio"
-        groupName="radio-list"
-        questionText="List Button as radio"
-        />
-        <buttonQuestion
-        :answers="horizontalCheckboxAnswers"
-        buttonType="listButtonHorizontal"
-        :isMultiSelect="true"
-        isColumn
-        ariaLabelBy="checkbox"
-        groupName="checkbox-list-horizontal"
-        questionText="List Button Horizontal as checkbox"
-        />
-        <buttonQuestion
-        :answers="horizontalRadioAnswers"
-        buttonType="listButtonHorizontal"
-        isColumn
-        ariaLabelBy="radio"
-        groupName="radio-list-horizontal"
-        questionText="List Button Horizontal as radio"
-        sizeInRem="1"
-        />
-        <buttonQuestion
-        :answers="listCardCheckBox"
-        buttonType="listCard"
-        isMultiSelect
-        ariaLabelBy="check_card"
-        groupName="check-list-card"
-        questionText="List Card as checkbox"
-        />
-        <buttonQuestion
-        :answers="listCardRadio"
-        buttonType="listCard"
-        ariaLabelBy="radio_card"
-        groupName="radio-card"
-        questionText="List Card as radio"
-        />
-        <buttonQuestion
-        isMultiSelect
-        isWide
-        :answers="listCardCheckBoxHorizontal"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_check_card"
-        groupName="horizontal_check-card"
-        questionText="List Card Horizontal as checkbox"
-        />
-        <buttonQuestion
-        isMultiSelect
-        isWide
-        :answers="listCardCheckBoxHorizontalSubText"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_check_card-st"
-        groupName="horizontal_check-card-st"
-        questionText="With Subtext"
-        />
-        <buttonQuestion
-        isWide
-        :answers="listRadioHorizontal"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_radio_card"
-        groupName="horizontal_cradio-card"
-        questionText="List Card Horizontal as radio"
-        />
-        <buttonQuestion
-        isWide
-        :answers="listRadioHorizontalSubText"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_radio_card-st"
-        groupName="horizontal_cradio-card-st"
-        questionText="With Subtext"
-        />
-        <buttonQuestion
-        isMultiSelect
-        isRow
-        :answers="listCardGroup"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_radio_card-group"
-        groupName="horizontal_cradio-card-group"
-        questionText="In column layout"
-        />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -955,8 +1054,6 @@ import buttonBack from "@/common-components/button-back/button-back";
 import listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
 import alert from "@/ux-components/alert/alert";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import checkbox from "@/ux-components/checkbox/checkbox";
 import radio from "@/ux-components/radio/radio";
@@ -969,11 +1066,9 @@ export default {
     listCard,
     listButton,
     alert,
-    vehicleBanner,
     listButtonHorizontal,
     checkbox,
     radio,
-    funnelHeader,
     textLink
   },
   data() {
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index d56b764b3..f12abb261 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -1,367 +1,165 @@
 <template>
-  <Form
-    :validation-schema="schema"
-    @submit="onSubmit"
-    @invalid-submit="onInvalidSubmit"
-    v-slot="{ values, meta }"
-    class="w-50"
-  >
-    <div class="row g-2 mt-6 mx-4">
-      <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
-      <p class="mx-2">
-        NOTE: This page is testing functionality only; styling will not match
-        Figma mocks.
-      </p>
-    </div>
-
-    <div class="row g-2 mt-6 mx-4">
-      <h4 class="mx-2 mt-4 mb-0">
-        How many chips are we repairing? (Required)
-      </h4>
-      <fieldset>
-        <div
-          role="radiogroup"
-          aria-labelledby="demo-group"
-          class="d-flex flex-row p-0"
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+        <funnelHeader ref="funnelHeader" />
+        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
+        <funnelSubHeader ref="funnelSubHeader" />
+        <Form
+          @submit="onSubmit"
+          @invalid-submit="onInvalidSubmit"
+          ref="theForm"
+          v-slot="{ values, meta, errors }"
         >
-          <h4 class="sr-only" id="demo-group">
-            How many chips are we repairing?
-          </h4>
-          <listButtonHorizontal
-            groupName="demo"
-            aria-required="true"
-            buttonID="1"
-            buttonLabel="1"
-            value="1"
-            buttonLabelSubCopy=""
-            textPosition="text-center"
-            sizeInRem="1"
-            :totalInGroup="3"
-            :positionInGroup="1"
-            screenReaderOnlyText=" opens new window"
-          />
-          <listButtonHorizontal
-            groupName="demo"
-            aria-required="true"
-            buttonID="2"
-            buttonLabel="2"
-            value="2"
-            buttonLabelSubCopy=""
-            textPosition="text-center"
-            sizeInRem="1"
-            :totalInGroup="3"
-            :positionInGroup="2"
-            screenReaderOnlyText=" opens new window"
-          />
-          <listButtonHorizontal
-            groupName="demo"
-            aria-required="true"
-            buttonID="3"
-            buttonLabel="3"
-            value="3"
-            buttonLabelSubCopy=""
-            textPosition="text-center"
-            sizeInRem="1"
-            :totalInGroup="3"
-            :positionInGroup="3"
-            screenReaderOnlyText=" opens new window"
-          />
-        </div>
-      </fieldset>
-      <div class="row px-3 form-test-error">
-        <error-message name="demo"></error-message>
-      </div>
-    </div>
+            <damageLocationQuestion
+              ref="damageLocation"
+              v-model="selectedDamageLocations"
+              groupName="DamageLocationQuestion"
+            />
+            <windshieldOptions
+              ref="windshieldOptions"
+              :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
+              :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            />
+            <alert
+              class="my-3"
+              v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              alertClass="alert-danger"
+              alertHeadline="You'll need to schedule separate appointments"
+              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians."
+              :isDismissible="false"
+            />
+            <replaceOptionsQuestion
+              ref="driverSideOptions"
+              isAvailable
+              v-model="driverSideOptionsData"
+              groupName="DriverSideReplaceOptionsQuestion"
+            />
+            <funnel-footer
+              ref="funnelFooter"
+              :isDisabled="!meta.valid"
+            />
 
-    <div class="row g-2 mt-6 mx-4">
-      <div class="col">
-        <h4 class="mx-2 mt-4 mb-0">
-          Which windshield part needs fixed? (Required)
-        </h4>
-        <fieldset>
-          <legend class="sr-only">Which windshield part needs fixed?</legend>
-          <listButton
-            isMultiSelect
-            buttonID="Single Windshield"
-            buttonLabel="Single Windshield"
-            value="Single Windshield"
-            groupName="demo2"
-          />
-          <listButton
-            isMultiSelect
-            buttonID="Driver Side"
-            buttonLabel="Driver Side"
-            value="Driver Side"
-            groupName="demo2"
-          />
-          <listButton
-            isMultiSelect
-            buttonID="Passenger Side"
-            buttonLabel="Passenger Side"
-            value="Passenger Side"
-            groupName="demo2"
-          />
-        </fieldset>
-      </div>
-      <div class="row px-3 form-test-error">
-        <error-message name="demo2"></error-message>
-      </div>
-    </div>
+            <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION  -->
+              <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
+              <p>Current Form, values:</p>
+              <pre>{{ values }}</pre>
+              <p>Errors:</p>
+              <pre>{{ errors }}</pre>
+              <p>Is Form Valid? (Meta.valid):</p>
+              <pre>{{ meta.valid }}</pre>
+            </div>
 
-    <div class="row g-2 mt-6 mx-4">
-      <div class="col">
-        <h4 class="mx-2 mt-4 mb-0">demo3: Enter your VIN (Required)</h4>
-        <textInput
-          name="demo3"
-          type="text"
-          label="VIN (Required)"
-          :isRequired="true"
-        />
-      </div>
+        </Form>
     </div>
-
-    <!-- <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4>
-      <textInput
-        name="demo4"
-        type="text"
-        label="Numbers Only"
-        :isRequired="true"
-      />
-    </div>
-  </div> -->
-
-    <div class="row g-2 mt-6 mx-4">
-      <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
-      <div aria-labelledby="demo5-group" class="d-flex flex-row p-0">
-        <h4 class="sr-only" id="demo5-group">Where's your damage?</h4>
-        <listCard
-          isMultiSelect
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          value="Windshield"
-          altText=""
-          buttonID="List Card Checkbox a"
-          groupName="demo5"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="side-window-damage-left-all.svg"
-          buttonLabel="Side Door"
-          value="Side Door"
-          altText=""
-          buttonID="List Card Checkbox b"
-          groupName="demo5"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="back-glass-damage.svg"
-          buttonLabel="Rear Window"
-          value="Rear Window"
-          altText=""
-          buttonID="List Card Checkbox c"
-          groupName="demo5"
-        />
-      </div>
-    </div>
-
-    <div class="row px-3 form-test-error">
-      <error-message name="demo5"></error-message>
-    </div>
-
-    <div class="row g-2 mt-6 mx-4">
-      <h4 class="mx-2 mt-4 mb-0">
-        demo6: What's your windshield damage? (Required if demo5 "Windshield" is
-        selected)
-      </h4>
-      <div
-        role="radiogroup"
-        aria-labelledby="demo6-group"
-        class="d-flex flex-row p-0"
-      >
-        <h4 class="sr-only" id="demo6-group">What's your windshield damage?</h4>
-        <listCard
-          isRadio
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Crack"
-          value="Crack"
-          buttonLabelSubCopy="My damage is larger than six inches."
-          altText=""
-          buttonID="Crack Checkbox a"
-          groupName="demo6"
-        />
-        <listCard
-          isRadio
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Chip(s)"
-          value="Chip"
-          buttonLabelSubCopy="I have three or fewer chips smaller than six inches."
-          altText=""
-          buttonID="Chip Checkbox b"
-          groupName="demo6"
-        />
-      </div>
-    </div>
-
-    <div class="row px-3 form-test-error">
-      <error-message name="demo6"></error-message>
-    </div>
-
-    <!-- <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">Password (Required, enter any string)</h4>
-      <textInput
-        name="password"
-        type="text"
-        label="Password (Required)"
-        :isRequired="true"
-      />
-    </div>
-  </div>
-
-  <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">Confirm Password (Required, must match above Password field)</h4>
-      <textInput
-        name="passwordConfirmation"
-        type="text"
-        label="Confirm Password (Required)"
-        :isRequired="true"
-      />
-    </div>
-  </div> -->
-
-    <div class="row px-3 form-test-error" data-focus-target="demoX">
-      <error-message name="demoX"></error-message>
-    </div>
-
-    <div class="g-2 mt-6 mx-4">
-      <button class="mb-6" :class="!meta.valid && 'form-test-invalid'">
-        Get your estimate
-      </button>
-      <p>Current Form Values:</p>
-      <pre>{{ values }}</pre>
-      <p>Is Form Valid? (Meta.valid):</p>
-      <pre>{{ meta.valid }}</pre>
-    </div>
-  </Form>
 </template>
 
 <script>
-import { Form, ErrorMessage } from "vee-validate";
-import * as Yup from "yup";
+// Components
+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 replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
+import alert from "@/ux-components/alert/alert";
+
+import { Form } from 'vee-validate';
+
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
+import baseMixin from "@/mixins/base-mixin";
 
-import listCard from "@/ux-components/list-card/list-card";
-import textInput from "@/common-components/text-input/text-input";
-import listButton from "@/ux-components/list-button/list-button";
-import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 
 export default {
-  name: "App",
-  data() {
-    const errorMessages = {
-      demo: "Please select chip(s)",
-      demo2: "Please select a windshield part",
-      demo3:
-        "You entered an invalid VIN. Please check to make sure that you inserted a 17 digit, alpha-numeric number. VINs do not contain the letters I, O or Q.",
-      demo4: "Invalid Entry. Must enter only numbers, no letters.",
-      demo5: "Please select damage location",
-    };
+  name: "form-test",
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage('vehicle-damage');
+    const damageOptionsPromise =
+      baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.GET_DAMAGE_OPTIONS,
+        { carId: store.getters.vehicle.carId }
+      );
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "damageOptions",
+        promise: damageOptionsPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.$refs.funnelHeader.initializeComponent(
+        resultMap.cmsContent.FunnelHeaderWidget
+      );
+      vm.$refs.vehicleBanner.initializeComponent(
+        resultMap.cmsContent.VehicleBannerWidget
+      );
+      vm.$refs.funnelSubHeader.initializeComponent(
+        resultMap.cmsContent.FunnelSubHeaderWidget
+      );
+      vm.$refs.driverSideOptions.initializeComponent(
+        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
+      );
+      vm.$refs.damageLocation.initializeComponent(
+        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
+      );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
+    });
+  },
+  data(){
     return {
-      schema: Yup.object()
-        .shape({
-          demo: Yup.string().required(errorMessages.demo),
-          demo2: Yup.array()
-            .required(errorMessages.demo2)
-            .min(1, errorMessages.demo2),
-          demo3: Yup.string()
-            .uppercase()
-            .required("Please enter a VIN.")
-            .min(17, errorMessages.demo3)
-            .max(17, errorMessages.demo3)
-            .matches("^[^IOQ]+$", errorMessages.demo3),
-          // demo4: Yup.string().matches('^[0-9]*$', errorMessages.demo4),
-          demo5: Yup.array()
-            .required(errorMessages.demo5)
-            .min(1, errorMessages.demo5),
-          demo6: Yup.string().when("demo5", function (demo5, schema, value) {
-            if (demo5) {
-              const demo5String = demo5.toString();
-              if (demo5String.includes("Windshield")) {
-                // make demo6 required
-                return schema.required(
-                  "You must pick an option for Windshield Damage."
-                );
-              }
-              return schema;
-            }
-            return schema;
-          }),
-          demoX: Yup.string().notRequired(),
-          // PASSWORD EXAMPLE, NOT BEING USED NOW
-          // password: Yup.string().min(6).required(),
-          // passwordConfirmation: Yup.string()
-          //  .required()
-          //  .oneOf([Yup.ref("password")], "Passwords do not match"),
-        })
-        .test(
-          "repair-replace-conflict",
-          null, // need to pass null as error message so it won't get added to list of errors
-          function (value) {
-            // whole form test
-            console.log("ALL FORM VALUES: ", value);
-
-            // test problem scenario... return new error if conditions are true, allow submit if not
-            if (value.demo5 && value.demo6) {
-              const demo5String = value.demo5.toString();
-              console.log("demo5String: ", demo5String);
-              console.log("demo6: ", value.demo6);
-
-              if (
-                demo5String.includes("Windshield") &&
-                value.demo5.length > 1 &&
-                value.demo6 == "Chip"
-              ) {
-                return this.createError({
-                  name: "demoX",
-                  message:
-                    "Sorry, at this time we can't schedule a repair and replace at the same time. Please schedule these appointments separately as they are different technicians. Thanks.",
-                  path: "demoX",
-                });
-              }
-              return true;
-            }
-            return true;
-          }
-        ),
-    };
+      selectedDamageLocations: [],
+      driverSideOptionsData: [],
+    }
   },
   components: {
-    listCard,
-    listButton,
-    listButtonHorizontal,
-    textInput,
     Form,
-    ErrorMessage,
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    damageLocationQuestion,
+    replaceOptionsQuestion,
+    funnelFooter,
+    windshieldOptions,
+    alert,
   },
   methods: {
+    arePagePrerequisitesValid() {
+      return store.getters.vehicle.carId !== null;
+    },
+    resetDependentState() {
+      // Invokes
+      store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
+    },
     onSubmit(values) {
-      window.alert(
-        "Success! Submitted values: " + JSON.stringify(values, null, 2)
-      );
-      console.log("submitted: ", JSON.stringify(values, null, 2));
+      window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
+      console.log('submitted: ', JSON.stringify(values, null ,2));
     },
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
       console.log("values: ", values);
       console.log("errors: ", errors);
       console.log("results: ", results);
-      // get errorEls and order by alpha
-      const errorEls = Object.keys(errors).sort();
-      const firstErrorEl = errorEls[0];
-      console.log("firstErrorEl: ", firstErrorEl);
+      // get error names array
+      const errorNames = errors ? Object.keys(errors) : [];
+      const firstErrorEl = errorNames[0];
       if (firstErrorEl) {
+        console.log('firstErrorEl: ', firstErrorEl);
         const qsString = "[data-focus-target='" + firstErrorEl + "']";
         document.querySelector(qsString).focus();
       }
@@ -369,13 +167,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-.form-test-error {
-  color: red;
-  font-weight: bold;
-}
-.form-test-invalid {
-  opacity: 0.5;
-}
-</style>
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
index 65434b289..01f063eef 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
@@ -41,7 +41,7 @@ describe("damage-location-question.vue", () => {
       damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
   
       //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' }, {Name: "car-RearWindow"} ])
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ])
     });
   });
 
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index c48912ff2..58a74a31c 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -1,20 +1,30 @@
 <template>
-    <div class="replace-options-question">
+    <div class="damage-location-question">
         <buttonQuestion
-            v-if="answersToDisplay.length > 1"
             :questionText="questionText"
             isMultiSelect
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
             v-model="selectedValues"
+            validationRules="damage-location-required"
         />
+        
     </div>
 </template>
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("damage-location-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select damage location";
+    }
+    return true;
+});
 
 export default ({
     name: "damageLocationQuestion",
@@ -25,8 +35,12 @@ export default ({
             damageOptions: Object,
         }
     },
-    props: {
+    props: {               
+        isMultiSelect: Boolean,
         modelValue: Array,
+        isAvailable: Boolean,
+        filterByVehicleCategory: Boolean,
+        name: String,
         groupName: String,
     },
     methods: {
@@ -34,7 +48,7 @@ export default ({
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.damageOptions = damageOptions;
-        }
+        },
     },
     computed: {
         selectedValues: {
@@ -48,12 +62,12 @@ export default ({
         damageOptionsMap(){
             return {
                 Windshield: true,
-                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
-                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
+                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions.length || this.damageOptions.passengerSideOptions.availableReplacementOptions.length,
+                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions.length,
             }
         },
         answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+            return Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
@@ -64,6 +78,6 @@ export default ({
     },
     components: {
         buttonQuestion,
-    }
+    },
 })
 </script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
index 103aecd4c..df8a16f90 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
@@ -24,7 +24,7 @@ describe("replace-options-question.vue", () => {
     test("Answers to display filtered by data from api.", async () => {
   
       //Arrange
-      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
+      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
   
       //Act
       replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 41ecac799..f47abea5d 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,14 +1,16 @@
 <template>
     <transition name="fade">
-        <div class="replace-options-question">
+        <div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
             <buttonQuestion
-                v-if="isAvailable && answersToDisplay.length > 1"
+                v-if="isAvailable"
+                isWide
                 :questionText="questionText"
                 isMultiSelect
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
+                validationRules="replace-options-required"
             />
         </div>
     </transition>
@@ -17,6 +19,15 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select window";
+    }
+    return true;
+});
 
 export default ({
     name: "replaceOptionsQuestion",
@@ -38,7 +49,7 @@ export default ({
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
-        }
+        },
     },
     computed: {
         selectedValues: {
@@ -54,11 +65,18 @@ export default ({
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
-                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
+                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
                     }) 
                 : [];
         },
     },
+    mounted(){
+        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+            const newSelectedValues = this.selectedValues;
+            newSelectedValues.push(this.answersToDisplay[0].Name);
+            this.selectedValues = newSelectedValues;
+        }
+    },
     components: {
         buttonQuestion,
     }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 949f4811b..0e47eb37f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -175,7 +175,10 @@ function setupMocks({
     return Promise.resolve({
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+      },
+      windshieldOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
     });
   });
   const apiResponses = {
@@ -193,6 +196,9 @@ function setupMocks({
     damageOptions: {
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
+      },
+      windshieldOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
       }
     },
   };
@@ -220,6 +226,11 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
+  const windshieldOptions = replaceOptionsQuestion
+  windshieldOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
   };
@@ -245,12 +256,18 @@ function setupMocks({
   funnelSubHeaderWrapper.vm.initializeComponent =
     funnelSubHeader.methods.initializeComponent;
 
-  const driverSideOptionsWrapper = wrapper.findComponent({
+  const driverSideOptionsWrapper = wrapper.findAllComponents({
     name: "replaceOptionsQuestion",
-  });
+  }).at(0);
   driverSideOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 
+  const windshieldOptionsWrapper = wrapper.findAllComponents({
+    name: "replaceOptionsQuestion",
+  }).at(1);
+  windshieldOptionsWrapper.vm.initializeComponent =
+  replaceOptionsQuestion.methods.initializeComponent;
+
   const damageLocationQuestionWrapper = wrapper.findComponent({
     name: "damageLocationQuestion",
   });
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c37924a2c..8a85de6b5 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,7 +4,8 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" v-model="windshieldOptionsData" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -15,8 +16,9 @@ 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 replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
-import damageLocationQuestion from"@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -67,6 +69,9 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );
@@ -76,6 +81,7 @@ export default {
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
+      windshieldOptionsData: [],
     }
   },
   methods: {
@@ -87,7 +93,6 @@ export default {
       store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
     },
     backButtonAction() {
-      console.log("vd linkClicked");
       // route to move backwards
       this.$router.navigate(
         this.navigationScenarios.CLICKED_BACK,
diff --git a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
new file mode 100644
index 000000000..686f10de9
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -0,0 +1,99 @@
+<template>
+    <div class="windshield-damage-type-question">
+        <buttonQuestion
+            v-if="isAvailable && answersToDisplay.length > 1"
+            :questionText="questionText"
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="selectedValues"
+            validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+            :suppressError="suppressError"
+        />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("windshield-damage-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select windshield damage";
+    }
+    return true;
+});
+defineRule("checkForRepairAndReplace", (value, [other]) => {
+    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+        return "checkForRepairAndReplace error"
+    }
+    return true;
+});
+
+export default ({
+    name: "windshieldDamageTypeQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            damageOptions: Object,
+        }
+    },
+    props: {
+        isMultiSelect: Boolean,
+        modelValue: Array,
+        isAvailable: Boolean,
+        name: String,
+        groupName: String,
+        suppressError: Boolean,
+    },
+    methods: {
+        initializeComponent(cmsContent, damageOptions){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+            this.damageOptions = damageOptions;
+        },
+    },
+    computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+        damageOptionsMap(){
+            return {
+                Windshield: true,
+                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
+                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
+            }
+        },
+        answersToDisplay(){
+            // HARD CODED MOCK DATA FOR NOW
+            return [
+                {
+                    "Name": "Windshield-Crack",
+                    "Text": "Crack",
+                    "SubText": "My damage is larger than six inches.",
+                    "ImageId": "2cf13fbb-22d8-4b61-bd3d-3d413ea58c87",
+                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-replace-desktop-ds.png"
+                },
+                {
+                    "Name": "Windshield-Chip",
+                    "Text": "Chip(s)",
+                    "SubText": "I have three or fewer chips smaller than six inches.",
+                    "ImageId": "faaa14d9-3650-4949-a687-7665962337b8",
+                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-repair-desktop-ds.png"
+                }
+            ]
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+})
+</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
new file mode 100644
index 000000000..68cce08eb
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="windshield-options">
+        <windshieldDamageTypeQuestion
+            ref="windshieldDamageType"
+            v-model="selectedWindshieldDamageTypes"
+            groupName="windshieldDamageTypeQuestion"
+            :isAvailable="showWindshieldDamageTypeQuestion"
+            :suppressError="suppressError"
+        />
+    </div>
+</template>
+
+<script>
+import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question";
+
+export default ({
+    name: "windshieldOptions",
+    props: {
+        showWindshieldDamageTypeQuestion: Boolean,
+        suppressError: Boolean,
+    },
+    components: {
+        windshieldDamageTypeQuestion,
+    },
+})
+</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 9fb2d6ea1..bc8ce5f9f 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="makes"
     groupName="Choose Vehicle Make"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index e79b8bafc..1876630ef 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="models"
     groupName="Choose Vehicle Model"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index bfec78571..a923c9128 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="styles"
     groupName="Choose Vehicle Style"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 96d047244..97c2ab618 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index c2c6c3fea..d7d1c019d 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,10 +1,56 @@
 .has-error {
-  .list-button,
-  .list-card,
-  .list-button-horizontal {
+  &.list-button,
+  &.list-card {
+    border: 1px solid transparent;
+    color: $red;
+    label {
+      border: 1px solid $red;
+      border-radius: .5rem;
+    }
+  }
+  input[type=checkbox]:focus + label,
+  input[type=radio]:focus + label,
+  input[type=checkbox]:checked + label,
+  input[type=radio]:checked + label {
+    box-shadow: 0 0 0 2.5px transparent !important;
+  }
+  &.list-button-horizontal {
     color: $red;
     label {
       border: 1px solid $red;
     }
   }
+  &.ui-radio,
+  &.ui-checkbox {
+    input[type=radio]+label:before,
+    input[type=checkbox]+label:before {
+      border: 1px solid $red;
+    }
+    input[type=checkbox]:checked + label:before {
+      border: 1px solid $blue;
+    }
+  }
+}
+
+.form-test-error {
+  color: $red;
+  font-size: .875rem;
+  font-weight: 500;
+}
+
+.form-test-invalid {
+  &.btn.btn-primary {
+    color: $gray;
+    background: $gray-200;
+    cursor: pointer;
+    pointer-events: all;
+  }
+  &.btn.btn-primary:hover,
+  &.btn.btn-primary:focus,
+  &.btn.btn-primary:focus-visible {
+    color: $gray;
+    background: $gray-200;
+    box-shadow: none;
+  }
+
 }
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 2a4a68366..2621d6bcd 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,5 +1,10 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-2" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
+  <button
+    :aria-disabled="isDisabled"
+    class="btn d-flex align-items-center py-3 px-4 delay"
+    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
+    @click="clicked()"
+  >
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"
@@ -21,7 +26,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number, String],
-    isFloat: Boolean
+    isFloat: Boolean,
   },
   data() {
     return {
@@ -30,8 +35,10 @@ export default {
   },
   methods: {
     clicked() {
-      this.isLoaderDisplayed = true;
-      this.$emit("click-event");
+      if (!this.isDisabled) {
+        this.isLoaderDisplayed = true;
+        this.$emit("click-event");
+      }
     },
   },
   components: {
@@ -44,13 +51,12 @@ export default {
 .btn {
   &.btn-primary {
     position: relative;
-    background: $blue-700;
-    @include blue-gradient;
+    background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
     border: none;
     border-radius: $border-radius-lg;
     color: $white;
-    transition: all 150ms linear;
     justify-content: center;
+    font-weight: 500;
     &:hover {
       background: linear-gradient(
         270deg,
@@ -64,19 +70,33 @@ export default {
       outline: none;
       box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
       color: $white;
-      @include blue-gradient;
-    }
-    &:disabled {
-      background: $gray-100 !important;
       background: linear-gradient(
         270deg,
-        $gray-100 0%,
-        $gray-100 100%
+        rgba(6, 87, 124, 1) 0%,
+        rgba(6, 87, 124, 1) 100%
+      );
+    }
+    &:disabled {
+      background: $gray-200 !important;
+      background: linear-gradient(
+        270deg,
+        $gray-200 0%,
+        $gray-200 100%
       ) !important;
-      color: $gray !important;
+      color: $gray-600 !important;
+      font-weight: 400;
       height: 48px;
       border: none;
       border-radius: $border-radius-lg;
+      cursor: pointer;
+      pointer-events: all;
+    }
+    &.has-loader {
+      color: $white;
+      background: $blue-700;
+    }
+    &.delay {// fixes flicker while transitioning between states
+      transition: background 0s 0s ease-in-out;
     }
   }
   &.btn-secondary {
@@ -85,6 +105,7 @@ export default {
     border: 1px solid $blue;
     border-radius: $border-radius-lg;
     color: $blue;
+    font-weight: 500;
     transition: all 150ms linear;
     &:hover {
       color: $white;
@@ -100,10 +121,20 @@ export default {
     }
     &:disabled {
       background: transparent;
-      color: $gray !important;
+      color: $gray-550 !important;
+      font-weight: 400;
       height: 48px;
-      border: 1px solid $gray-300;
+      border: 1px solid $gray-550;
       border-radius: $border-radius-lg;
+      cursor: pointer;
+      pointer-events: all;
+    }
+    &.has-loader {
+      color: $white;
+      @include blue-gradient;
+    }
+    &.delay {// fixes flicker while transitioning between states
+      transition: background 0s 0s ease-in-out;
     }
   }
 }
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index ca30ab330..24c9e830e 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-  <div class="ui-checkbox d-flex">
+  <div class="ui-checkbox d-flex" :class="[hasError ? 'has-error' : '']">
     <input
       type="checkbox"
       aria-checked="false"
@@ -28,6 +28,7 @@ export default {
     checkboxLabel: String,
     screenReaderOnlyText: String,
     isRequired: Boolean,
+    hasError: Boolean
   },
 };
 </script>
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index 5cbe02e75..ba1f12d23 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -91,7 +91,7 @@ describe("list-button-horizontal.vue", () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -99,6 +99,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -113,7 +114,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -121,6 +122,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -135,7 +137,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -143,6 +145,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -157,7 +160,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -165,6 +168,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
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 034f97c07..f934ca94d 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
+    :class="hasError ? 'has-error' : ''"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -12,7 +13,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="handleCheckChange"
+      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
     />
     <label
       tabindex="-1"
@@ -60,7 +61,7 @@ export default {
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
     textPosition: String,
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number, String],
@@ -71,6 +72,7 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data() {
     return {
@@ -88,8 +90,9 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      if (this.loaderEnabled) {
+      if(this.selectingInitiatesLoad) {
         this.displayLoader();
+        this.handleCheckChange();
       }
       this.handleChange(value);
     },
@@ -165,6 +168,7 @@ export default {
     label {
       border-bottom-left-radius: 0.5rem;
       border-top-left-radius: 0.5rem;
+      z-index: 2;
     }
   }
   &:last-of-type {
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 6592e64f7..d643201ef 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -91,7 +91,7 @@ describe("list-button.vue", () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -99,6 +99,7 @@ describe("list-button.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -113,16 +114,15 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
     // Assert
 
     const label = wrapper.find("label");
-
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
-
     await nextTick();
 
     const loader = wrapper.find("loader-stub");
@@ -135,7 +135,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -143,6 +143,7 @@ describe("list-button.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -157,7 +158,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -165,6 +166,7 @@ describe("list-button.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index fcf4ae799..4c3e2d7b3 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="list-group list-button d-flex flex-column w-100 mb-2"
+    :class="hasError ? 'has-error' : ''"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -12,7 +13,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="handleCheckChange"
+      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
     >
     <label
       tabindex="-1"
@@ -63,7 +64,7 @@ export default {
     textPosition: String,
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number,String],
@@ -73,6 +74,7 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data() {
     return {
@@ -90,8 +92,9 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      if (this.loaderEnabled) {
+      if(this.selectingInitiatesLoad) {
         this.displayLoader();
+        this.handleCheckChange();
       }
       this.handleChange(value);
     },
@@ -100,7 +103,7 @@ export default {
       if (!isInitialization) {
         this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
       }
-    }
+    },
   },
   components: {
     loader,
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 95f886d5a..b3124ccfb 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,9 +1,9 @@
 <template>
   <div :class="'col' + colLength">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-    :class="isWide ? 'horizontal' : ''"
-    @mouseup="handleChange(value)"
-    @keyup.space="handleChange(value)">
+    <div
+      class="list-card w-100 rounded-3 d-flex align-items-center h-100"
+      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+    >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
         :id="buttonID"
@@ -11,9 +11,10 @@
         :value="buttonID"
         :aria-required="isRequired"
         :data-focus-target="groupName"
+        @click="handleChange(value)"
         v-model="checkValue"
         @change="handleCheckChange"
-       />
+      />
       <label
         :for="buttonID"
         class="d-flex w-100 align-items-center px-2 h-100"
@@ -24,7 +25,7 @@
           :class="!isWide ? 'order-1' : 'ms-auto order-3'"
           :src="buttonImage"
           :alt="altText"
-         />
+        />
         <p
           v-if="!isWide"
           class="small order-3"
@@ -47,16 +48,13 @@
 </template>
 
 <script>
-import { toRefs } from "vue";
 import { useField } from "vee-validate";
 
 export default {
   name: "listCard",
   props: {
-    //Must choose one of the following four options
     isMultiSelect: Boolean, //Defines use as checkbox
     isWide: Boolean,
-    //end must choose
     buttonImage: String, //Required: File name of image
     buttonImageId: String,
     buttonLabel: String, //Required: Label text
@@ -71,7 +69,9 @@ export default {
       default: "",
     },
     colLength: String,
+    validationRules: String,
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data(){
     return {
@@ -105,15 +105,20 @@ export default {
     }
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange } = useField(groupName, undefined, {
+
+    const {
+        value: inputValue,
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules,
+    {
       type: inputType,
-      checkedValue: value,
+      checkedValue: props.value,
     });
     return {
-      checked,
       handleChange,
+      errors,
     };
   },
 };
@@ -149,6 +154,7 @@ export default {
         cursor: pointer;
       }
       p {
+        color: $gray-600;
         text-align: center;
         &.sub-copy {
           color: $gray-550;
@@ -164,6 +170,14 @@ export default {
       box-shadow: 0 0 0 1px $blue;
       border-radius: 0.5rem;
     }
+    &:checked + label {
+      p {
+        color: $black;
+      }
+      .sub-copy {
+        color: $gray-600;
+      }
+    }
     + label::before {
       content: "";
       position: absolute;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 5d5da19f7..83b0976b7 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio d-flex">
+  <div class="ui-radio d-flex" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
     aria-checked="false"
@@ -35,6 +35,7 @@ export default {
       default: "",
     },
     screenReaderOnlyText: String,
+    hasError: Boolean,
   },
   data() {
     return {