diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index c828f9ff9..f7b11e3b3 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -122,6 +122,7 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
+      console.log('BQ handleCheckedChanged, val: ', val)
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         if(Array.isArray(this.selectedValues)) {
@@ -132,6 +133,7 @@ export default {
       } else {
         this.selectedValues = [val.value];
       }
+      console.log('BQ handleCheckedChanged, this.selectedValues is now: ', this.selectedValues)
     },
   },
   components: {
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index f12abb261..a06faf10d 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -15,23 +15,31 @@
               groupName="DamageLocationQuestion"
             />
             <windshieldOptions
-              ref="windshieldOptions"
-              :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
-              :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              ref="windshieldOptions" 
+              v-model="selectedWindshieldOptions" 
+              :suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              :selectedDamageLocations="selectedDamageLocations"
             />
             <alert
               class="my-3"
-              v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              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."
+              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
               :isDismissible="false"
             />
+            <sideDoorOptions 
+              ref="sideDoorOptions"
+              groupName="SideDoorSideQuestion"
+              v-model="sideDoorOptionsData"
+              :selectedDamageLocations="selectedDamageLocations"
+            />
             <replaceOptionsQuestion
-              ref="driverSideOptions"
-              isAvailable
-              v-model="driverSideOptionsData"
-              groupName="DriverSideReplaceOptionsQuestion"
+              ref="backGlassOptions"
+              :isAvailable="isRearWindowDamageLocation"
+              v-model="selectedRearReplaceOptions"
+              groupName="BackGlassReplaceOptionsQuestion"
+              validationRules="replace-options-required"
             />
             <funnel-footer
               ref="funnelFooter"
@@ -60,19 +68,25 @@ 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 sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
 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 { Form, defineRule } from "vee-validate";
 
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select rear window type";
+    }
+    return true;
+});
 
 export default {
   name: "form-test",
@@ -110,12 +124,19 @@ export default {
       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.sideDoorOptions.initializeComponent(
+        resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+      );
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
+      vm.$refs.backGlassOptions.initializeComponent(
+        resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
+      );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );
@@ -124,14 +145,29 @@ export default {
   data(){
     return {
       selectedDamageLocations: [],
-      driverSideOptionsData: [],
+      sideDoorOptionsData: {
+        selectedDoorSides: [],
+        selectedDriverSideReplacOptions: [],
+        selectedPassengerSideReplaceOptions: []
+      },
+      selectedWindshieldOptions: [],
+      selectedRearReplaceOptions: [],
     }
   },
+  computed: {
+    isRearWindowDamageLocation() {
+      return this.selectedDamageLocations.some(selectedDamages => 
+        {
+          return selectedDamages.toUpperCase() === "REARWINDOW";
+        });
+    },
+  },
   components: {
     Form,
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
+    sideDoorOptions,
     damageLocationQuestion,
     replaceOptionsQuestion,
     funnelFooter,
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 89b3244e3..07f6612ae 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
@@ -9,7 +9,6 @@
             v-model="selectedValues"
             validationRules="damage-location-required"
         />
-        
     </div>
 </template>
 
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 978cf6b41..bc42364d2 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,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXXXXXXXXXXXXXX' : ''" aria-live="polite">
             <buttonQuestion
                 isWide
                 :questionText="questionText"
@@ -9,7 +9,7 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
-                validationRules="replace-options-required"
+                :validationRules="validationRules"
             />
         </div>
     </transition>
@@ -18,15 +18,6 @@
 <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",
@@ -43,6 +34,7 @@ export default ({
         groupName: String,
         modelValue: Array,
         isMultiSelect: Boolean,
+        validationRules: String,
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){
@@ -50,12 +42,26 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         },
-        updateSelectedValues() {
-            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
+        // updateSelectedValues() {
+        //     // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+        //     console.log('    ROQ     updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
+        //     console.log('    ROQ     updateSelectedValues, this.selectedValues: ', this.selectedValues);
+
+        //     if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+        //         console.log('  ROQ  ONLY ONE ANSWER!')
+        //         this.selectedValues = [this.answersToDisplay[0].Name];
+        //     }
+        // },
+    },
+    mounted() {
+        console.log('**** MOUJNTED *****.  ')
+        console.log('    ROQ     **** MOUJNTED *****, this.answersToDisplay: ', this.answersToDisplay);
+            console.log('    ROQ     **** MOUJNTED *****, this.selectedValues: ', this.selectedValues);
+
+        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+                console.log('  ROQ  ONLY ONE ANSWER!')
                 this.selectedValues = [this.answersToDisplay[0].Name];
             }
-        },
     },
     computed: {
         selectedValues: {
@@ -82,12 +88,13 @@ export default ({
             });
         },
     },
-    watch: {
-        isAvailable(val) {
-            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
-            val && this.updateSelectedValues();
-        }
-    },
+    // watch: {
+    //     isAvailable(val) {
+    //         console.log('ROQ ^^^    isAvailable changed.')
+    //         // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+    //         val && this.updateSelectedValues();
+    //     }
+    // },
     components: {
         buttonQuestion,
     }
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index 1372f23f6..ed11c825c 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -9,13 +9,28 @@
                     :groupName="groupName"
                     buttonType="listCard"
                     v-model="selectedDoorSidesValues"
+                    validationRules="damage-side-required"
                 />
             </div>
         </transition>
-        
-        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
-
-        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
+        <replaceOptionsQuestion
+            ref="driverSideOptions"
+            :isAvailable="isDriverSideReplaceOptionsQuestionAvailable"
+            groupName="driverSideOptions"
+            isMultiSelect
+            filterByVehicleCategory
+            v-model="selectedDriverSideReplacOptionsValues"
+            validationRules="driver-side-options-required"
+        />
+        <replaceOptionsQuestion
+            ref="passengerSideOptions"
+            :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable"
+            groupName="passengerSideOptions"
+            isMultiSelect
+            filterByVehicleCategory
+            v-model="selectedPassengerSideReplaceOptionsValues"
+            validationRules="passenger-side-options-required"
+        />
     </div>
 </template>
 
@@ -23,6 +38,29 @@
 import buttonQuestion from "@/common-components/button-question/button-question";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("damage-side-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select vehicle side";
+    }
+    return true;
+});
+
+defineRule("driver-side-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select window";
+    }
+    return true;
+});
+
+defineRule("passenger-side-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select window";
+    }
+    return true;
+});
 
 export default ({
     name: "sideDoorOptions",
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index edbaf3a0c..2c735774f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -24,6 +24,7 @@
           :isAvailable="isRearWindowDamageLocation"
           v-model="selectedRearReplaceOptions"
           groupName="BackGlassReplaceOptionsQuestion"
+          validationRules="replace-options-required"
         />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
@@ -46,6 +47,15 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select rear window type";
+    }
+    return true;
+});
 
 
 export default {
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
index 347ee2fdf..be41d9cfb 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -7,6 +7,7 @@
                 :groupName="groupName"
                 buttonType="listButtonHorizontal"
                 v-model="selectedChipCountValues"
+                :validationRules="validationRules"
             />
         </div>
     </transition>
@@ -27,12 +28,23 @@ export default ({
         modelValue: Array,
         groupName: String,
         isAvailable: Boolean,
+        validationRules: String,
     },
     methods: {
         initializeComponent(cmsContent){
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
-        }
+        },
+        updateSelectedValues() {
+            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+            console.log('         updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
+            console.log('         updateSelectedValues, this.selectedValues: ', this.selectedValues);
+
+            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
+                console.log('    ONLY ONE ANSWER!')
+                this.selectedValues = [this.answersToDisplay[0].Name];
+            }
+        },
     },
     computed: {
         selectedChipCountValues: {
@@ -44,6 +56,13 @@ export default ({
             }
         },
     },
+    watch: {
+        isAvailable(val) {
+            console.log('***    isAvailable changed.')
+            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+            val && this.updateSelectedValues();
+        }
+    },
     components: {
         buttonQuestion,
     }
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 8031db546..6ccd623db 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -7,6 +7,8 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
+                :suppressError="suppressError"
+                :validationRules="validationRules"
             />
         </div>
     </transition>
@@ -14,22 +16,30 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
-//import { defineRule } from "vee-validate";
-
-//DEFINE VALIDATION RULES
-// add these to the button component above:
-// validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
-// :suppressError="suppressError"
+import store from "@/store";
+// import { defineRule } from "vee-validate";
+// 
+// //DEFINE VALIDATION RULES
+// // add these to the button component above:
+// // validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+// // :suppressError="suppressError"
 // defineRule("windshield-damage-required", (value) => {
+//     // console.log('validation rule - windshield-damage-required, value: ', value);
 //     if (!value || value.length < 1) {
+//         // console.log('validation rule - windshield-damage-required, RETURN ERROR');
 //         return "Please select windshield damage";
 //     }
+//     // console.log('validation rule - windshield-damage-required, return true');
 //     return true;
 // });
 // defineRule("checkForRepairAndReplace", (value, [other]) => {
-//     if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+//     // console.log('validation rule - checkForRepairAndReplace, value: ', value);
+//     // console.log('validation rule - checkForRepairAndReplace, other: ', other);
+//     if (value.toUpperCase() === "REPAIR" && other.toString().includes("Windshield") && other.length > 1) {
+//         console.log('validation rule - checkForRepairAndReplace, RETURN ERROR');
 //         return "checkForRepairAndReplace error"
 //     }
+//     // console.log('validation rule - checkForRepairAndReplace, return true');
 //     return true;
 // });
 
@@ -46,12 +56,13 @@ export default ({
         groupName: String,
         isAvailable: Boolean,
         suppressError: Boolean,
+        validationRules: String,
     },
     methods: {
         initializeComponent(cmsContent){
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
-        }
+        },
     },
     computed: {
         selectedValues: {
@@ -62,6 +73,21 @@ export default ({
                 this.$emit("update:modelValue", newValue);
             }
         },
+        answersToDisplay(){
+            const filteredAnswers = Array.isArray(this.answersFromCms) 
+                ? this.answersFromCms.filter(ans => 
+                    {
+                        const name = ans.Name.split('-');
+                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
+                    }) 
+                : [];
+
+            return filteredAnswers.map(ans => {
+                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
+        },
     },
     components: {
         buttonQuestion,
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 694103d8a..4a08166bd 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -4,17 +4,20 @@
             :isAvailable=isWindshieldDamageLocation
             :suppressError="suppressError"
             groupName="WindshieldDamageTypeQuestion"
-            v-model="selectedWindshieldDamageTypeValues" 
+            v-model="selectedWindshieldDamageTypeValues"
+            validationRules="windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion"
         />
         <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
             :isAvailable=isRepairOptionSelected
             groupName="WindshieldChipCountQuestion"
-            v-model="selectedWindshieldChipCountValues" 
+            v-model="selectedWindshieldChipCountValues"
+            validationRules="windshield-chip-count-required"
         />
         <replaceOptionsQuestion ref="replaceOptionsQuestion"
             :isAvailable=isReplaceOptionSelected
             groupName="WindshieldReplaceOptions"
             v-model="selectedWindshieldReplaceOptionsValues"
+            validationRules="windshield-replace-options-required"
         />
     </div>
 </template>
@@ -23,6 +26,36 @@
 import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
 import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("windshield-damage-type-required", (value) => {
+    console.log('windshield-damage-type-required, value: ', value);
+    if (!value || value.length < 1) {
+        return "Please select windshield damage";
+    }
+    return true;
+});
+defineRule("checkForRepairAndReplace", (value, [other]) => {
+    console.log('checkForRepairAndReplace, value: ', value, ' / other: ', other);
+    if (value.toString().toUpperCase().includes("REPAIR") && other.toString().toUpperCase().includes("WINDSHIELD") && other.length > 1) {
+        return "checkForRepairAndReplace error"
+    }
+    return true;
+});
+defineRule("windshield-chip-count-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select chip(s)";
+    }
+    return true;
+});
+defineRule("windshield-replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select windshield part";
+    }
+    return true;
+});
+
 export default ({
     name: "windshieldOptions",
 
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 5c328bc4c..0810859bf 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,9 +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)"
+    :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
   >
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -12,6 +10,7 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
+      @click="handleChange(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
@@ -46,7 +45,6 @@
 </template>
 
 <script>
-import { toRefs } from "vue";
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
 
@@ -69,6 +67,7 @@ export default {
       type: String,
       default: "",
     },
+    validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
   },
@@ -105,20 +104,26 @@ export default {
     loader,
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange, errorMessage } = useField(
-      groupName,
-      undefined,
-      {
-        type: inputType,
-        checkedValue: value,
-      }
-    );
+    const fieldOptions = {
+      type: inputType,
+      checkedValue: props.value,
+    };
+
+    if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
+      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
+      fieldOptions['initialValue'] = fieldOptions.checkedValue;
+    }
+    const { 
+      checked, 
+      handleChange, 
+      errors,
+    } = useField(props.groupName, props.validationRules, fieldOptions);
+
     return {
       checked,
       handleChange,
-      errorMessage,
+      errors,
     };
   },
 };
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index d523ee06f..0fe0457ee 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,9 +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)"
+    :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
   >
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -12,6 +10,7 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
+      @click="handleChange(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
@@ -49,9 +48,9 @@
 </template>
 
 <script>
-import { toRefs } from "vue";
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+
 export default {
   name: "listButton",
   props: {
@@ -71,6 +70,7 @@ export default {
       type: [String, Number],
       default: "",
     },
+    validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
   },
@@ -107,20 +107,26 @@ export default {
     loader,
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange, errorMessage } = useField(
-      groupName,
-      undefined,
-      {
-        type: inputType,
-        checkedValue: value,
-      }
-    );
+    const fieldOptions = {
+      type: inputType,
+      checkedValue: props.value,
+    };
+
+    if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
+      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
+      fieldOptions['initialValue'] = fieldOptions.checkedValue;
+    }
+    const { 
+      checked, 
+      handleChange, 
+      errors,
+    } = useField(props.groupName, props.validationRules, fieldOptions);
+
     return {
       checked,
       handleChange,
-      errorMessage,
+      errors,
     };
   },
 };
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 869099dfd..a1e13aec5 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -13,8 +13,10 @@
         :data-focus-target="groupName"
         @click="handleChange(value)"
         v-model="checkValue"
-        @change="handleCheckChange()"
+        @change="handleCheckChange(value)"
       />
+      value: {{ value }}
+      checkValue: {{ checkValue }}
       <label
         :for="buttonID"
         class="d-flex w-100 align-items-center px-2 h-100"
@@ -75,12 +77,13 @@ export default {
   },
   data(){
     return {
-      checkValue: Boolean,
+      checkValue: [Boolean, String],
     }
   },
   created(){
     if(Array.isArray(this.selectedValues)){
       this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
+      console.log('=================== this.checkValue: ', this.checkValue)
     }
   },
   computed: {
@@ -98,6 +101,9 @@ export default {
   },
   methods: {
     handleCheckChange(newValue, oldValue){
+      // console.log('LC handleCheckChange... oldValue: ', oldValue);
+      // console.log('LC handleCheckChange... newValue: ', newValue);
+
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
         this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
@@ -105,22 +111,42 @@ export default {
     }
   },
   setup(props) {
+    console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules)
+    console.log('RUNNING setup... ... ... props.value: ', props.value)
+    console.log('RUNNING setup... ... ... props.selectedValues: ', props.selectedValues)
+
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    const {
-        value: inputValue,
-        handleChange,
-        errors,
-    } = useField(props.groupName, props.validationRules,
-    {
+//     const { selectedValues, value } = toRefs(props);
+// console.log('XXXXXXX selectedValues: ', selectedValues)
+// console.log('XXXXXXX value: ', value)
+
+    const fieldOptions = {
       type: inputType,
       checkedValue: props.value,
-    });
+    };
+
+    if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
+      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
+      fieldOptions['initialValue'] = fieldOptions.checkedValue;
+    }
+
+    const {
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules, fieldOptions);
+
     return {
       handleChange,
       errors,
     };
   },
+  // watch: {
+  //   checkValue(val) {
+  //     console.log('LC > CHANGE in checkValue, val: ', val)
+  //     // this.handleChange()
+  //   }
+  // },
 };
 </script>