diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index b9133ddc5..fcf049741 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -9,9 +9,10 @@
       <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
           <div :class="getComponentWrapperClasses">
-            <component :is="buttonType" v-for="answer in answers" :key="answer"
+            <component :is="buttonType" v-for="answer in answers" :key="answer.Name ? answer.Name : answer"
               @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
               @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
+              v-model="isChecked"
               :buttonID="answer.Name ? answer.Name : answer"
               :buttonLabel="answer.Text ? answer.Text : answer"
               :buttonLabelSubCopy="answer.SubText"
@@ -28,8 +29,8 @@
               :buttonImageId="answer.ImageId"
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
-              :value="modelValue"
               :colLength="this.answers.length < 3 ? '' : '-4'"
+              :modelValue="modelValue.includes(answer.Name)"
               data-test="button"
             />
           </div>
@@ -74,7 +75,8 @@ export default {
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
-    modelValue: String,
+    isChecked: Boolean,
+    modelValue: Array,
   },
   computed: {
     getFieldSetClasses(){
@@ -96,10 +98,17 @@ export default {
       return classes;
     }
   },
+  data(){
+    return {
+      modelValueAnswers: [],
+      isItemChecked: Boolean
+    }
+  },
   methods: {
     chooseAnswer(answer) {
-      this.$emit("update:modelValue", answer);
-    },
+      this.modelValueAnswers.includes(answer) ? this.modelValueAnswers.pop(answer) : this.modelValueAnswers.push(answer);
+      this.$emit("update:modelValue", this.modelValueAnswers);
+    }
   },
   components: {
     listButton,
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 0c6c8bc4c..9ecd426f4 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
@@ -22,7 +22,6 @@ export default ({
         return {
             questionText: String,
             answersFromCms: Array,
-            answersToDisplay: Array,
             replaceOptions: Array,
             groupName: String,
         }
@@ -31,21 +30,26 @@ export default ({
         isMultiSelect: Boolean,
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean,
-        modelValue: String,
+        modelValue: Array,
     },
     methods: {
-        initializeComponent(cmsContent, replaceOptions){
-            this.groupName = cmsContent.Name;
+        initializeComponent(cmsContent, replaceOptions, groupName){
+            this.groupName = groupName;
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         }
     },
-    mounted(){
-        this.answersToDisplay = 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]);
-        });
+    computed: {
+        answersToDisplay(){
+            return  Array.isArray(this.answersFromCms) 
+                ? 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])
+                    }) 
+                : [];
+        }
     },
     watch: {
         modelValue(val) {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 55a340a0a..92d00964c 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,7 +5,7 @@
         <funnelSubHeader 
             ref="funnelSubHeader"
         />
-        <replaceOptionsQuestion ref="replaceOptionsQuestion" isAvailable />
+        <replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect />
     </div>
 </template>
 
@@ -54,8 +54,8 @@ export default ({
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      vm.$refs.replaceOptionsQuestion.initializeComponent(
-        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
+      vm.$refs.driverSideOptions.initializeComponent(
+        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, 'DriverSideReplaceOptionsQuestion'
       );
 
       console.log(resultMap)
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 61cedfd2a..c5fd09146 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- Heavily documented below -->
   <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)">
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
+      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="isChecked" />
       <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
         <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
         <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
@@ -40,7 +40,10 @@ export default {
       default: ""
     },
     colLength: String,
+    modelValue: String,
+    isChecked: Boolean
   },
+  emits: ['update:modelValue', 'update:isChecked'],
   computed: {
     getLabelClasses(){
       if(this.isWide) {
@@ -54,6 +57,13 @@ export default {
       }
     }
   },
+  methods: {
+    handleClick(value){
+      this.handleChange(value);
+      this.$emit("update:modelValue", value);
+      this.$emit("update:isChecked");
+    }
+  },
   setup(props) {
     const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";