diff --git a/src/common-components/input-button-wrapper/input-button-wrapper.vue b/src/common-components/base-input-button/base-input-button.vue
similarity index 50%
rename from src/common-components/input-button-wrapper/input-button-wrapper.vue
rename to src/common-components/base-input-button/base-input-button.vue
index 57fe58505..54fcc3b7d 100644
--- a/src/common-components/input-button-wrapper/input-button-wrapper.vue
+++ b/src/common-components/base-input-button/base-input-button.vue
@@ -3,12 +3,6 @@
         :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
         :for="buttonId"
         @mousedown.left="handleEventAction('click', $event)">
-        <!-- IBW modelValue: {{ modelValue }} <br />
-    IBW value: {{value}} <br/> -->
-        <!-- classes: {{classes}}<br/>
-    value: {{value}} <br/>
-    modelValue: {{modelValue}} <br/>
-    buttonId: {{buttonId}} <br/> -->
         <input
             :type="inputType"
             :id="buttonId"
@@ -31,7 +25,7 @@ import { useField } from "vee-validate";
 import { toRef } from "vue";
 
 export default {
-    name: "input-button-wrapper",
+    name: "base-input-button",
     emits: ["change"],
     model: {
         prop: "modelValue",
@@ -81,28 +75,10 @@ export default {
     data() {
         return {
             valueToEmit: null,
-            hasFirstEventFired: false,
         };
     },
     mounted() {
-        // console.log({
-        //   isChecked: this.isChecked,
-        //   modelValue: this.modelValue,
-        //   value: this.value,
-        // });
-
-        console.log({
-            meta: this.meta,
-            isMultiSelect: this.isMultiSelect,
-            modelValue: this.modelValue,
-            isChecked: this.isChecked,
-            valid: this.meta.valid,
-        });
-
-        // const isSingleAnswerPreselected = this.modelValue?.length === 1 && this.isChecked;
-
         if (this.isChecked) {
-            // console.log("HI THERE");
             this.handleChange(this.modelValue);
         }
     },
@@ -114,26 +90,12 @@ export default {
                 CLICK: "click",
             };
 
-            console.log({
-                handleKeypress: eventType,
-                // hasFirstEventFired: this.hasFirstEventFired,
-            });
-
             if (this.isMultiSelect) {
-                // if (true) {
                 switch (eventType) {
-                    // case eventTypes.CLICK:
                     case eventTypes.KEYPRESS_SUBMIT:
-                        console.log("clicking");
-                        // this.hasFirstEventFired = true;
                         this.handleClick(e);
                         break;
                     case eventTypes.CHANGE:
-                        console.log(
-                            "selectOnKeypress: ",
-                            this.selectOnKeypress
-                        );
-                        // this.hasFirstEventFired = false;
                         this.selectOnKeypress
                             ? this.handleClick(e)
                             : this.handleSelectionChange(e);
@@ -143,123 +105,38 @@ export default {
                 switch (eventType) {
                     case eventTypes.CLICK:
                     case eventTypes.KEYPRESS_SUBMIT:
-                        console.log("clicking");
-
-                        // TODO KO may still need this since GA events, wouldn't want to trigger twice
-                        // this.hasFirstEventFired = true;
                         this.handleClick(e);
                         break;
                     case eventTypes.CHANGE:
-                        console.log(
-                            "selectOnKeypress: ",
-                            this.selectOnKeypress
-                        );
-                        // this.hasFirstEventFired = false;
                         this.selectOnKeypress
                             ? this.handleClick(e)
                             : this.handleSelectionChange(e);
                         break;
                 }
             }
-
-            // if (!this.hasFirstEventFired) {
-
-            // else {
-            //   this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
-            // }
-
-            // else {
-            //   this.hasFirstEventFired = true;
-            //   this.selectOnKeypress
-            //     ? this.handleClick(e)
-            //     : this.handleSelectionChange(e);
-            // }
-
-            // this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
-
-            // this.handleClick(e);
-            // console.log({
-            //   selectOnKeypress: this.selectOnKeypress,
-            //   event: e,
-            //   eventType: eventType,
-            //   isClick: eventType === "click",
-            //   isKeypress: eventType === "keypress",
-            // });
-            // console.log(eventType)
-
-            // click => click, keypress
-            // space => keypressSubmit, keypress
-            // arrow left/right => keypress
-
-            // if selectOnKeypress (YMMS)
-            // if click => emit event
-            // if space/enter => emit event
-            // if arrow => emit event
-            // else (!selectOnKeypress)
-            // if click => emit event
-            // if space/enter => emit event
-            // if arrow => handleSelection
-
-            // if ((!this.selectOnKeypress && eventType === "click") || (this.selectOnKeypress && eventType === "keypress")) {
-            // this.handleClick(e);
-            // }
-            // else {
-            //   this.handleSelectionChange(e);
-            // }
         },
         handleSelectionChange(e) {
-            // console.log("HSC");
-            // console.log(e);
-            // console.log(this.value);
-            // console.log(this.modelValue);
-            // let isChecked = event.target.checked;
-            // console.log("BM value: ", this.value);
-            // let valueToEmit;
-            // console.log("isMultiselect")
-            // console.log(this.isMultiSelect)
-            // console.log({
-            //   modelValue: this.modelValue,
-            //   isMultiselect: this.isMultiSelect
-            // })
             if (
                 this.isMultiSelect &&
                 (this.modelValue instanceof Array || this.modelValue == null)
             ) {
                 let newValue = this.modelValue ? [...this.modelValue] : [];
-                // console.log("newValue", newValue)
-                // console.log({
-                //   newValue: newValue,
-                //   // isChecked: isChecked
-                // })
                 if (!newValue.includes(this.value)) {
-                    // console.log("isChecked")
                     newValue.push(this.value);
                 } else {
-                    // console.log("isn't checked")
                     newValue.splice(newValue.indexOf(this.value), 1);
                 }
 
                 this.valueToEmit = newValue;
             } else {
-                // console.log("not multi");
                 this.valueToEmit = this.value;
             }
 
-            console.log("handlingChange", this.valueToEmit);
             this.handleChange(this.valueToEmit);
             this.pushClickEventToGA();
-            // if (this.selectOnKeypress) {
-            //   this.handleClick(e)
-            // }
         },
         handleClick(e) {
-            // console.log("handleClick");
             this.handleSelectionChange(e);
-            // console.log("HC");
-            // console.log({
-            //   eventEmitting: e,
-            //   valueToEmit: this.valueToEmit,
-            // });
             this.$emit("change", this.valueToEmit);
         },
         pushClickEventToGA() {
@@ -284,7 +161,7 @@ export default {
             return this.isMultiSelect ? "checkbox" : "radio";
         },
         buttonId() {
-            return `${this.groupName} ${JSON.stringify(this.value)}`;
+            return `${this.groupName}-${JSON.stringify(this.value).replace(" ", "-")}`;
         },
     },
     setup(props) {
@@ -294,41 +171,18 @@ export default {
             type: inputType,
             validateOnValueUpdate: false,
             validateOnMount: false,
-            // checkedValue: props.value,
-            // potentialInitialValue: props.selectedValues,
         };
 
-        // Set initialValue for validation setup if pre-selected
-        // NOTE: props.selectedValues could be an array of strings, or an array of integers...
-        // if (
-        //   props.selectedValues &&
-        //   (props.selectedValues.includes(props.value) ||
-        //     props.selectedValues.includes(parseInt(props.value)))
-        // ) {
-        //   fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
-        // }
-
-        // const { handleChange, errors, value } = useField(
-        //   toRef(props, "groupName"),
-        //   toRef(props, "validationRules"),
-        //   fieldOptions
-        // );
-
-        console.log(props.validationRules);
-
         const { handleChange, meta, errors, value } = useField(
             toRef(props, "groupName"),
             toRef(props, "validationRules"),
             fieldOptions
         );
 
-        // const validateValue = value;
-
         return {
             handleChange,
             errors,
             meta,
-            // validateValue,
             fieldOptions, // only need to expose this for unit test purposes
         };
     },
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 2fece851c..51dd15f77 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -52,34 +52,6 @@
                             :textPosition="textPosition"
                             :selectOnKeypress="selectOnKeypress"
                             @change="handleAnswerChange" />
-
-                        <!-- <component
-              :is="buttonType"
-              @isCheckedChanged="handleCheckedChanged"
-              :buttonID="answer.Name ? formatString(groupName) + '-' + answer.Name : formatString(groupName) + '-' + getAnswerString(answer, 'Text')"
-              :value="getValue(answer)"
-              :buttonLabel="answer.Text ? answer.Text : getAnswerString(answer, 'Name')"
-              :buttonLabelSubCopy="answer.SubText"
-              :textPosition="textPosition"
-              :isMultiSelect="isMultiSelect"
-              :groupName="formatString(groupName)"
-              :selectingInitiatesLoad="selectingInitiatesLoad"
-              :loaderColor="loaderColor"
-              :loaderPosition="loaderPosition"
-              :isWide=isWide
-              :isCashOrInsurance=isCashOrInsurance
-              :isRequired=isRequired
-              :buttonImage="answer.AnswerImageUrl"
-              :buttonImageId="answer.ImageId"
-              :altText="answer.Name ? answer.Name : answer"
-              screenReaderOnlyText="(opens new window)"
-              :colLength="getColLength"
-              :selectedValues="selectedValues"
-              data-test="button"
-              :validationRules="validationRules"
-              :class="[suppressError ? 'alertError' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
-              :valueToLogType="valueToLogType"
-            /> -->
                         <!-- For nested questions -->
                         <transition name="fade" mode="out-in">
                             <div
@@ -150,9 +122,9 @@ export default {
     },
     data() {
         return {
-            primaryValue: ""
-        }
-    },  
+            primaryValue: "",
+        };
+    },
     computed: {
         getFieldSetClasses() {
             if (this.isOverflowScrollable) {
@@ -202,29 +174,32 @@ export default {
                 return "";
             }
         },
-        // selectedValues: {
-        //   get: function () {
-        //     return this.modelValue;
-        //   },
-        //   set: function (newValue) {
-        //     // this.$emit("update:modelValue", newValue);
-        //   },
-        // },
         buttonsInfo() {
+            return (this.answers ?? [])?.map((answer) => ({
+                buttonLabel: answer.Text ?? answer,
+                altText: answer.Name ? answer.Name : answer,
+                buttonLabelSubCopy: answer.SubText,
+                buttonImage: answer.AnswerImageUrl,
+                buttonImageId: answer.ImageId,
+                groupName: this.formatString(this.groupName),
+                value: this.useTextForValue
+                    ? answer.Text
+                    : answer.Name ?? answer,
+            }));
             // TODO KO temporary. It should always just be an array
-            return (Array.isArray(this.answers) ? this.answers : [])?.map(
-                (answer) => ({
-                    buttonLabel: answer.Text ?? answer,
-                    altText: answer.Name ? answer.Name : answer,
-                    buttonLabelSubCopy: answer.SubText,
-                    buttonImage: answer.AnswerImageUrl,
-                    buttonImageId: answer.ImageId,
-                    groupName: this.formatString(this.groupName),
-                    value: this.useTextForValue
-                        ? answer.Text
-                        : answer.Name ?? answer,
-                })
-            );
+            // return (Array.isArray(this.answers) ? this.answers : [])?.map(
+            //     (answer) => ({
+            //         buttonLabel: answer.Text ?? answer,
+            //         altText: answer.Name ? answer.Name : answer,
+            //         buttonLabelSubCopy: answer.SubText,
+            //         buttonImage: answer.AnswerImageUrl,
+            //         buttonImageId: answer.ImageId,
+            //         groupName: this.formatString(this.groupName),
+            //         value: this.useTextForValue
+            //             ? answer.Text
+            //             : answer.Name ?? answer,
+            //     })
+            // );
         },
     },
     methods: {
@@ -249,26 +224,10 @@ export default {
                         : this.formatString(answer.toString());
             }
         },
-        // handleCheckedChanged(val) {
-        //   if (this.selectingInitiatesLoad) {
-        //     this.selectedValues = val.value;
-        //   } else {
-        //     if (Array.isArray(this.selectedValues)) {
-        //       const newSelectedValues = this.selectedValues;
-        //       val.checkValue
-        //         ? newSelectedValues.push(val.value)
-        //         : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
-        //       this.selectedValues = newSelectedValues;
-        //     } else {
-        //       this.selectedValues = val.value;
-        //     }
-        //   }
-        //   this.$emit("isCheckedChanged", val);
-        // },
         handleAnswerChange(primaryAnswerValue) {
             console.log({
-              bqEvent: primaryAnswerValue
-            })
+                bqEvent: primaryAnswerValue,
+            });
             this.primaryValue = primaryAnswerValue;
             this.$emit("change", primaryAnswerValue);
             this.$emit("update:modelValue", primaryAnswerValue);
diff --git a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
index b2431406d..3e96fba94 100644
--- a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
+++ b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
@@ -6,39 +6,40 @@
             buttonType="listButtonHorizontal"
             v-model="selectedValues"
             isCashOrInsurance
-            isRequired
-            />
+            isRequired />
     </div>
 </template>
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 
-export default ({
+export default {
     name: "cashOrInsuranceQuestion",
-    props: {               
+    props: {
         modelValue: String,
         groupName: String,
         cmsWidgetName: String,
     },
     computed: {
-        answersFromCms(){
-            return this.getCmsContent(this.cmsWidgetName, 'Answers');
+        answersFromCms() {
+            return this.getCmsContent(this.cmsWidgetName, "Answers");
         },
         selectedValues: {
-            get: function() {
+            get: function () {
                 // Convert to CMS answer name from bool
-                var cmsAnswerValue = this.modelValue ? "InsuranceAnswer" : "CashAnswer";
+                var cmsAnswerValue = this.modelValue
+                    ? "InsuranceAnswer"
+                    : "CashAnswer";
                 return cmsAnswerValue;
             },
-            set: function(newValue) {
+            set: function (newValue) {
                 // Convert back to bool for parent component
                 this.$emit("update:modelValue", newValue === "InsuranceAnswer");
-            }
+            },
         },
     },
     components: {
         buttonQuestion,
     },
-})
-</script>
\ No newline at end of file
+};
+</script>
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 f0aa82252..af063722f 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
@@ -24,21 +24,11 @@ export default ({
     name: "windshieldOptions",   
     mixins: [buttonQuestionWrapperMixin],
     props: {
-        // modelValue: Number,
         groupName: String,
         isAvailable: Boolean,
         validationRules: String,
         cmsWidgetName: String,
     },
-    // methods: {
-    //     // TODO KO is this being used? Always three options
-    //     updateSelectedValues() {
-    //         // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-    //         if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
-    //             this.selectedValues = [this.answersToDisplay[0].Name];
-    //         }
-    //     },
-    // },
     computed: {
         questionText(){
             return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
@@ -47,12 +37,6 @@ export default ({
             return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
     },
-    // watch: {
-    //     isAvailable(val) {
-    //         // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
-    //         val && this.updateSelectedValues();
-    //     }
-    // },
     components: {
         buttonQuestion,
     }
diff --git a/src/mixins/vehicle-questions-mixin.js b/src/mixins/vehicle-questions-mixin.js
index 49d5f2a40..2c409e102 100644
--- a/src/mixins/vehicle-questions-mixin.js
+++ b/src/mixins/vehicle-questions-mixin.js
@@ -115,7 +115,6 @@ export default {
                 // if single parts only
                 const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions);
                 // save to store lineItems.glassParts
-                // TODO KO
                 self.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
 
                 self.$refs.loadingModal.showModal();
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 5fb41f2f6..d8a9584fc 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,35 +1,35 @@
 <template>
-  <inputButtonWrapper
-    :buttonWrapperClasses="[
-      'list-group list-button-horizontal d-flex flex-column w-100',
-      { 'radio-fancy': isCashOrInsurance }
-    ]"
-    :isMultiSelect="isMultiSelect"
-    :modelValue="modelValue"
-    :value="value"
-    :groupName="groupName"
-    :validationRules="validationRules"
-    :selectOnKeypress="selectOnKeypress"
-    @change="handleAnswerChange"
-  >
-  <!-- <div class="list-group list-button-horizontal d-flex flex-column w-100"
-    :class="[(errors.length > 0 || hasError) ? 'has-error' : '', isCashOrInsurance ? 'radio-fancy' : '']"
-    @keyup.space="triggerButton()" @keyup.up="handleKeyupArrow()" @keyup.down="handleKeyupArrow()"
-    @keyup.left="handleKeyupArrow()" @keyup.right="handleKeyupArrow()"> -->
-    <div class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
-      <span class="m-0" :class="textPosition">
-        {{  buttonLabel  }}
-      </span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
-        {{  buttonLabelSubCopy  }}
-      </span>
-      <span v-if="screenReaderOnlyText" class="sr-only">
-        {{  screenReaderOnlyText  }}
-      </span>
-      <loader v-if="isLoaderDisplayed && selectingInitiatesLoad" :class="[loaderColor, loaderPosition]" />
-    </div>
-  <!-- </div> -->
-  </inputButtonWrapper>
+    <baseInputButton
+        :buttonWrapperClasses="[
+            'list-group list-button-horizontal d-flex flex-column w-100',
+            { 'radio-fancy': isCashOrInsurance },
+        ]"
+        :isMultiSelect="isMultiSelect"
+        :modelValue="modelValue"
+        :value="value"
+        :groupName="groupName"
+        :validationRules="validationRules"
+        :selectOnKeypress="selectOnKeypress"
+        @change="handleAnswerChange">
+        <div
+            class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
+            <span class="m-0" :class="textPosition">
+                {{ buttonLabel }}
+            </span>
+            <span
+                v-if="buttonLabelSubCopy"
+                class="m-0 small"
+                :class="textPosition">
+                {{ buttonLabelSubCopy }}
+            </span>
+            <span v-if="screenReaderOnlyText" class="sr-only">
+                {{ screenReaderOnlyText }}
+            </span>
+            <loader
+                v-if="isLoaderDisplayed && selectingInitiatesLoad"
+                :class="[loaderColor, loaderPosition]" />
+        </div>
+    </baseInputButton>
 </template>
 
 <script>
@@ -37,312 +37,230 @@ import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
 import { toRef } from "vue";
 import { queryStrings } from "@/constants/query-strings";
-import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
+import baseInputButton from "@/common-components/base-input-button/base-input-button";
 
 export default {
-  name: "listButtonHorizontal",
-  props: {
-    isMultiSelect: Boolean,
-    selectOnKeypress: Boolean,
-    groupName: String,
-    buttonID: String,
-    buttonLabel: String,
-    buttonLabelSubCopy: String,
-    screenReaderOnlyText: String,
-    textPosition: String,
-    selectingInitiatesLoad: Boolean,
-    loaderColor: String,
-    loaderPosition: String,
-    isRequired: Boolean,
-    isCashOrInsurance: Boolean,
-    value: {
-      // Field initial value
-      type: String,
-      default: "",
+    name: "listButtonHorizontal",
+    props: {
+        isMultiSelect: Boolean,
+        selectOnKeypress: Boolean,
+        groupName: String,
+        buttonID: String,
+        buttonLabel: String,
+        buttonLabelSubCopy: String,
+        screenReaderOnlyText: String,
+        textPosition: String,
+        selectingInitiatesLoad: Boolean,
+        loaderColor: String,
+        loaderPosition: String,
+        isRequired: Boolean,
+        isCashOrInsurance: Boolean,
+        value: {
+            // Field initial value
+            type: String,
+            default: "",
+        },
+        validationRules: String,
+        hasError: Boolean,
+        valueToLogType: String,
     },
-    validationRules: String,
-    // selectedValues: [Array, String],
-    hasError: Boolean,
-    valueToLogType: String,
-  },
-  data() {
-    return {
-      isLoaderDisplayed: false,
-      // checkValue: Boolean,
-    };
-  },
-  // created() {
-  //   if (Array.isArray(this.selectedValues)) {
-  //     this.checkValue = this.isMultiSelect
-  //       ? this.selectedValues.includes(this.value)
-  //       : this.selectedValues[0] == this.value;
-  //   }
-  //   else {
-  //     this.checkValue = this.selectedValues;
-  //   }
-  // },
-  methods: {
-    // isValueSelectedByArray(arr) {
-    //   return this.isMultiSelect
-    //     ? arr.includes(this.value)
-    //     : arr[0];
-    // },
-    displayLoader() {
-      this.isLoaderDisplayed = true;
+    data() {
+        return {
+            isLoaderDisplayed: false,
+        };
     },
-    handleAnswerChange(e) {
-      // TODO KO all the buttons have this function
-
-      console.log(e)
-      this.$emit("change", e);
+    methods: {
+        displayLoader() {
+            this.isLoaderDisplayed = true;
+        },
+        handleAnswerChange(e) {
+            this.$emit("change", e);
+        },
+    },
+    components: {
+        loader,
+        baseInputButton,
     },
-    // handleInputChange() {
-    //   if (!this.selectingInitiatesLoad) {
-    //     this.handleCheckChange();
-    //   }
-    // },
-    // handleKeyupArrow() {
-    //   if (this.isMultiSelect) {
-    //     return; // Prevent arrow keys from doing anything if element is a checkbox
-    //   }
-
-    //   if (!this.selectingInitiatesLoad) {
-    //     this.handleCheckChange();
-    //   }
-    // },
-    // triggerButton() {
-    //   if (this.selectingInitiatesLoad) {
-    //     this.displayLoader();
-    //     this.handleCheckChange();
-    //   }
-
-    //   this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
-    // },
-    // handleCheckChange() {
-    //   const emitEvent = {
-    //     checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
-    //     value: this.value,
-    //     buttonId: this.buttonID && this.buttonID.toString(),
-    //   };
-
-    //   this.handleChange(this.value);
-    //   this.$emit("isCheckedChanged", emitEvent);
-    //   this.$emit("update:modelValue", emitEvent);
-    // }
-  },
-  components: {
-    loader,
-    inputButtonWrapper
-  },
-  // setup(props) {
-  //   const inputType = props.isMultiSelect ? "checkbox" : "radio";
-
-  //   const fieldOptions = {
-  //     type: inputType,
-  //     checkedValue: props.value,
-  //     potentialInitialValue: props.selectedValues,
-  //   };
-
-  //   // Set initialValue for validation setup if pre-selected
-  //   // NOTE: props.selectedValues could be an array of strings, or an array of integers...
-  //   if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
-  //     fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
-  //   }
-
-  //   const {
-  //     handleChange,
-  //     errors,
-  //     value
-  //   } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
-
-  //   const validateValue = value;
-  //   return {
-  //     handleChange,
-  //     errors,
-  //     validateValue,
-  //     fieldOptions, // only need to expose this for unit test purposes
-  //   };
-  // },
 };
 </script>
 
 <style lang="scss">
 .list-button-horizontal {
-  input[type="radio"],
-  input[type="checkbox"] {
-    position: absolute;
-    height: 0;
-    opacity: 0;
-    width: 0;
-
-    .list-button-horizontal-content {
-      cursor: pointer;
-    }
-
-    &:focus-visible+.list-button-horizontal-content {
-      box-shadow: 0 0 0 2.5px $blue;
-      z-index: 2;
-    }
-
-    &:focus+.list-button-horizontal-content {
-      box-shadow: 0 0 0 2.5px $blue;
-      z-index: 3;
-    }
-
-    &:checked+.list-button-horizontal-content {
-      background: $blue-100;
-      box-shadow: 0 0 0 1px $blue;
-      outline: none;
-      z-index: 2;
-    }
-
-    &:checked:focus+.list-button-horizontal-content {
-      box-shadow: 0 0 0 2.5px $blue;
-    }
-
-    &:checked+.list-button-horizontal-content p:first-child {
-      font-weight: 500;
-    }
-  }
-
-  .list-button-horizontal-content {
-    outline: none;
-    position: relative;
-    background: $white;
-    transition: all 150ms linear;
-    border: 1px solid $gray-500;
-    border-radius: 0;
-    width: 100%;
-    color: $gray-600;
-
-    &:hover {
-      @include media-breakpoint-up(sm) {
-        box-shadow: 0 0 0 4px $blue-300;
-        cursor: pointer;
-        z-index: 4 !important;
-      }
-    }
-
-    +p {
-      display: none;
-    }
-
-    span {
-      font-size: .875rem;
-    }
-  }
-
-  // Cash/Insurance option radio button styling
-  &.radio-fancy {
-    .list-button-horizontal-content {
-      border: 1px solid $blue-700;
-      z-index: 2;
-      color: $blue;
-
-      span {
-        font-size: 1rem;
-        font-weight: 500;
-      }
-    }
-
-    .list-button-horizontal-content:hover {
-      background-color: $blue-700;
-      color: $white;
-      box-shadow: none;
-    }
-
     input[type="radio"],
     input[type="checkbox"] {
-      position: absolute;
-      height: 0;
-      opacity: 0;
-      width: 0;
+        position: absolute;
+        height: 0;
+        opacity: 0;
+        width: 0;
 
-      &:focus-visible+.list-button-horizontal-content {
-        border-radius: 0.5rem;
-        z-index: 2;
-      }
+        .list-button-horizontal-content {
+            cursor: pointer;
+        }
 
-      &:focus+.list-button-horizontal-content {
-        z-index: 3;
-      }
+        &:focus-visible + .list-button-horizontal-content {
+            box-shadow: 0 0 0 2.5px $blue;
+            z-index: 2;
+        }
 
-      &:checked+.list-button-horizontal-content {
+        &:focus + .list-button-horizontal-content {
+            box-shadow: 0 0 0 2.5px $blue;
+            z-index: 3;
+        }
+
+        &:checked + .list-button-horizontal-content {
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+            outline: none;
+            z-index: 2;
+        }
+
+        &:checked:focus + .list-button-horizontal-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+
+        &:checked + .list-button-horizontal-content p:first-child {
+            font-weight: 500;
+        }
+    }
+
+    .list-button-horizontal-content {
         outline: none;
-        box-shadow: none;
-        color: $white;
-        background: linear-gradient(84.45deg, #125B7E 0%, #3B8FB8 100%);
-        border-radius: 0.5rem;
-        z-index: 5;
-      }
+        position: relative;
+        background: $white;
+        transition: all 150ms linear;
+        border: 1px solid $gray-500;
+        border-radius: 0;
+        width: 100%;
+        color: $gray-600;
 
-      &:checked:focus+.list-button-horizontal-content {
-        box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
-      }
+        &:hover {
+            @include media-breakpoint-up(sm) {
+                box-shadow: 0 0 0 4px $blue-300;
+                cursor: pointer;
+                z-index: 4 !important;
+            }
+        }
 
-      &:checked+.list-button-horizontal-content p:first-child {
-        font-weight: 500;
-      }
+        + p {
+            display: none;
+        }
+
+        span {
+            font-size: 0.875rem;
+        }
     }
-  }
-  &.list-button-horizontal {
-    height: 100%;
-    label {
-      height: 100%;
+
+    // Cash/Insurance option radio button styling
+    &.radio-fancy {
+        .list-button-horizontal-content {
+            border: 1px solid $blue-700;
+            z-index: 2;
+            color: $blue;
+
+            span {
+                font-size: 1rem;
+                font-weight: 500;
+            }
+        }
+
+        .list-button-horizontal-content:hover {
+            background-color: $blue-700;
+            color: $white;
+            box-shadow: none;
+        }
+
+        input[type="radio"],
+        input[type="checkbox"] {
+            position: absolute;
+            height: 0;
+            opacity: 0;
+            width: 0;
+
+            &:focus-visible + .list-button-horizontal-content {
+                border-radius: 0.5rem;
+                z-index: 2;
+            }
+
+            &:focus + .list-button-horizontal-content {
+                z-index: 3;
+            }
+
+            &:checked + .list-button-horizontal-content {
+                outline: none;
+                box-shadow: none;
+                color: $white;
+                background: linear-gradient(84.45deg, #125b7e 0%, #3b8fb8 100%);
+                border-radius: 0.5rem;
+                z-index: 5;
+            }
+
+            &:checked:focus + .list-button-horizontal-content {
+                box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+            }
+
+            &:checked + .list-button-horizontal-content p:first-child {
+                font-weight: 500;
+            }
+        }
+    }
+    &.list-button-horizontal {
+        height: 100%;
+        label {
+            height: 100%;
+        }
     }
-  }
 }
 
 .col {
-  &:first-of-type {
-    .list-button-horizontal {
-      .list-button-horizontal-content {
-        border-bottom-left-radius: 0.5rem;
-        border-top-left-radius: 0.5rem;
-      }
-    }
-  }
-
-  &:last-of-type {
-    .list-button-horizontal {
-      .list-button-horizontal-content {
-        border-bottom-right-radius: 0.5rem;
-        border-top-right-radius: 0.5rem;
-      }
-    }
-  }
-
-  //Cash/insurance styling
-  &:first-of-type {
-    .list-button-horizontal.radio-fancy {
-      input[type="radio"] {
-        &:checked+.list-button-horizontal-content {
-          border-bottom-right-radius: 0;
-          border-top-right-radius: 0;
+    &:first-of-type {
+        .list-button-horizontal {
+            .list-button-horizontal-content {
+                border-bottom-left-radius: 0.5rem;
+                border-top-left-radius: 0.5rem;
+            }
         }
-
-        &:checked:focus+.list-button-horizontal-content {
-          border-bottom-right-radius: 0.5rem;
-          border-top-right-radius: 0.5rem;
-        }
-      }
     }
-  }
 
-  &:last-of-type {
-    .list-button-horizontal.radio-fancy {
-      input[type="radio"] {
-        &:checked+.list-button-horizontal-content {
-          border-bottom-left-radius: 0;
-          border-top-left-radius: 0;
+    &:last-of-type {
+        .list-button-horizontal {
+            .list-button-horizontal-content {
+                border-bottom-right-radius: 0.5rem;
+                border-top-right-radius: 0.5rem;
+            }
+        }
+    }
+
+    //Cash/insurance styling
+    &:first-of-type {
+        .list-button-horizontal.radio-fancy {
+            input[type="radio"] {
+                &:checked + .list-button-horizontal-content {
+                    border-bottom-right-radius: 0;
+                    border-top-right-radius: 0;
+                }
+
+                &:checked:focus + .list-button-horizontal-content {
+                    border-bottom-right-radius: 0.5rem;
+                    border-top-right-radius: 0.5rem;
+                }
+            }
+        }
+    }
+
+    &:last-of-type {
+        .list-button-horizontal.radio-fancy {
+            input[type="radio"] {
+                &:checked + .list-button-horizontal-content {
+                    border-bottom-left-radius: 0;
+                    border-top-left-radius: 0;
+                }
+
+                &:checked:focus + .list-button-horizontal-content {
+                    border-bottom-left-radius: 0.5rem;
+                    border-top-left-radius: 0.5rem;
+                }
+            }
         }
-
-        &:checked:focus+.list-button-horizontal-content {
-          border-bottom-left-radius: 0.5rem;
-          border-top-left-radius: 0.5rem;
-        }
-      }
     }
-  }
 }
 </style>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 85c85d140..72f7329ae 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,276 +1,140 @@
 <template>
-  <!-- <div
-    class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
-    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> -->
-  <!-- <input
-      :type="isMultiSelect ? 'checkbox' : 'radio'"
-      :id="buttonID"
-      :name="groupName"
-      :value="value"
-      :aria-required="isRequired"
-      v-model="checkValue"
-      :checked="checkValue"
-      @change="handleInputChange"
-    > -->
-  <!-- <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-label="buttonLabel"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-      @mouseup="triggerButton"
-    > -->
-  <!-- LB value: {{ value }}<br />
-  LB modelValue: {{ modelValue }}
-  LB groupName: {{ groupName }} -->
-  <!-- , {'has-error': errors.length > 0 || hasError} -->
-  <!-- <inputButtonWrapper
-    v-bind="$props"
-    :classes="['list-group list-button rounded-3 d-flex flex-column w-100 mb-2', {'has-error': errors.length > 0 || hasError}]"
-    @change="(e) => $emit('change', e)"
-  > -->
-
-  <inputButtonWrapper
-    :isMultiSelect="isMultiSelect"
-    :value="value"
-    :groupName="groupName"
-    buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
-    :validationRules="validationRules"
-    @change="handleAnswerChange"
-  >
-    <div
-      tabindex="-1"
-      :aria-label="buttonLabel"
-      class="list-button-content d-flex flex-column justify-content-center py-3 px-4"
-    >
-      <span class="m-0" :class="textPosition">
-        {{ buttonLabel }}
-      </span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
-        {{ buttonLabelSubCopy }}
-      </span>
-      <span v-if="screenReaderOnlyText" class="sr-only">
-        {{ screenReaderOnlyText }}
-      </span>
-      <loader
-        v-if="isLoaderDisplayed && selectingInitiatesLoad"
-        :class="[this.loaderColor, this.loaderPosition]"
-      />
-    </div>
-  </inputButtonWrapper>
-  <!-- </label> -->
-  <!-- </div> -->
+    <baseInputButton
+        :isMultiSelect="isMultiSelect"
+        :value="value"
+        :groupName="groupName"
+        buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
+        :validationRules="validationRules"
+        @change="handleAnswerChange">
+        <div
+            tabindex="-1"
+            :aria-label="buttonLabel"
+            class="list-button-content d-flex flex-column justify-content-center py-3 px-4">
+            <span class="m-0" :class="textPosition">
+                {{ buttonLabel }}
+            </span>
+            <span
+                v-if="buttonLabelSubCopy"
+                class="m-0 small"
+                :class="textPosition">
+                {{ buttonLabelSubCopy }}
+            </span>
+            <span v-if="screenReaderOnlyText" class="sr-only">
+                {{ screenReaderOnlyText }}
+            </span>
+            <loader
+                v-if="isLoaderDisplayed && selectingInitiatesLoad"
+                :class="[this.loaderColor, this.loaderPosition]" />
+        </div>
+    </baseInputButton>
 </template>
 
 <script>
-// import { useField } from "vee-validate";
-// import { toRef } from "vue";
 import loader from "@/ux-components/loader/loader";
-import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
+import baseInputButton from "@/common-components/base-input-button/base-input-button";
 
 export default {
-  name: "listButton",
-  props: {
-    groupName: String,    // TODO KO these shared props should be moved somewhere
-    buttonLabel: [Number, String],
-    // buttonID: [Number, String],
-    isRequired: Boolean,
-    textPosition: String,
-    buttonLabelSubCopy: String,
-    screenReaderOnlyText: String,
-    selectingInitiatesLoad: Boolean,
-    loaderColor: String,
-    loaderPosition: {
-      type: String,
-      default: "right",
+    name: "listButton",
+    props: {
+        groupName: String, 
+        buttonLabel: [Number, String],
+        isRequired: Boolean,
+        textPosition: String,
+        buttonLabelSubCopy: String,
+        screenReaderOnlyText: String,
+        selectingInitiatesLoad: Boolean,
+        loaderColor: String,
+        loaderPosition: {
+            type: String,
+            default: "right",
+        },
+        hasError: Boolean,
+        valueToLogType: String,
+        validationRules: String,
     },
-    hasError: Boolean,
-    valueToLogType: String,
-    validationRules: String,
-  },
-  data() {
-    return {
-      isLoaderDisplayed: false,
-      // checkValue: false,
-    };
-  },
-  // mounted() {
-  //   if (Array.isArray(this.validateValue)) {
-  //     this.checkValue = this.isValueSelectedByArray(this.selectedValues);
-  //     const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
-
-  //     if (this.checkValue != isSelectedByValidator) {
-  //       this.handleChange(this.value);
-  //     }
-  //   }
-  //   else {
-  //     this.checkValue = this.selectedValues == this.value;
-  //   }
-  // },
-  emits: ["change"],
-  methods: {
-    // isValueSelectedByArray(arr) {
-    //   return this.isMultiSelect
-    //     ? arr.includes(this.value)
-    //     : arr[0];
-    // },
-    displayLoader() {
-      this.isLoaderDisplayed = true;
+    data() {
+        return {
+            isLoaderDisplayed: false,
+        };
     },
-    handleAnswerChange(e) {
-      // TODO KO make it work on YMMS with keypresses
-      // There must be a way to tell the difference between keypress and
-      // submit via veevalidate. Check out the Form in vehicle-damage
-      if (this.selectingInitiatesLoad) {
-        this.displayLoader();
-      }
-      // else {
-      //   console.log("lbTest event: ", e);
-      //   // this.$emit("change", e);
-      // }
-
-      console.log(e)
-      this.$emit("change", e);
+    methods: {
+        displayLoader() {
+            this.isLoaderDisplayed = true;
+        },
+        handleAnswerChange(e) {
+            if (this.selectingInitiatesLoad) {
+                this.displayLoader();
+            }
+            
+            this.$emit("change", e);
+        },
+    },
+    components: {
+        loader,
+        baseInputButton,
     },
-    // handleInputChange() {
-    //   if(!this.selectingInitiatesLoad) {
-    //     this.handleCheckChange();
-    //   }
-    // },
-    // handleKeyupArrow() {
-    //   if (this.isMultiSelect) {
-    //     return; // Prevent arrow keys from doing anything if element is a checkbox
-    //   }
-    // },
-    // triggerButton() {
-    //   if (this.selectingInitiatesLoad) {
-    //     this.displayLoader();
-    //     // this.handleCheckChange();
-    //   }
-
-    //   // TODO KO THIS IS IMPORTANT
-    //   // Move this to input-button-wrapper?
-    //   // this.pushEventToGA(
-    //   //   this.$route.query[queryStrings.FMG_PAGE],
-    //   //   this.GaActions.CLICKED,
-    //   //   this.value.toString(),
-    //   //   true,
-    //   //   this.valueToLogType
-    //   // );
-    // },
-    // handleCheckChange() {
-    //   const emitEvent = {
-    //     checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
-    //     value: this.value.toString(),
-    //     buttonId: this.buttonID && this.buttonID.toString(),
-    //   };
-
-    //   this.handleChange(this.value);
-    //   this.$emit("isCheckedChanged", emitEvent);
-    //   this.$emit("update:modelValue", emitEvent);
-    // },
-  },
-  components: {
-    loader,
-    inputButtonWrapper,
-  },
-  // setup(props) {
-  //   const inputType = props.isMultiSelect ? "checkbox" : "radio";
-
-  //   const fieldOptions = {
-  //     type: inputType,
-  //     checkedValue: props.value,
-  //     potentialInitialValue: props.selectedValues,
-  //   };
-
-  //   // Set initialValue for validation setup if pre-selected
-  //   // NOTE: props.selectedValues could be an array of strings, or an array of integers...
-  //   if (
-  //     props.selectedValues &&
-  //     (props.selectedValues.includes(props.value) ||
-  //       props.selectedValues.includes(parseInt(props.value)))
-  //   ) {
-  //     fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
-  //   }
-
-  //   const { handleChange, errors, value } = useField(
-  //     toRef(props, "groupName"),
-  //     toRef(props, "validationRules"),
-  //     fieldOptions
-  //   );
-
-  //   const validateValue = value;
-
-  //   return {
-  //     handleChange,
-  //     errors,
-  //     validateValue,
-  //     fieldOptions, // only need to expose this for unit test purposes
-  //   };
-  // },
 };
 </script>
 
 <style lang="scss" scoped>
 .list-group {
-  &.list-button {
-    outline: none;
-    input[type="radio"],
-    input[type="checkbox"] {
-      position: static; //override bootstrap
-      // height: 0;
-      // opacity: 0;
+    &.list-button {
+        outline: none;
+        input[type="radio"],
+        input[type="checkbox"] {
+            position: static; //override bootstrap
 
-      &:focus-visible + .list-button-content {
-        box-shadow: 0 0 0 2.5px $blue;
-      }
-      &:focus + .list-button-content {
-        box-shadow: 0 0 0 2.5px $blue;
-      }
-      &:checked + .list-button-content {
-        color: $black;
-        font-weight: 500;
-        background: $blue-100;
-        box-shadow: 0 0 0 1px $blue;
-      }
-      &:checked:focus + .list-button-content {
-        box-shadow: 0 0 0 2.5px $blue;
-      }
-      &:checked + .list-button-content p,
-      &:checked + .list-button-content span {
-        font-weight: 500;
-      }
-      &:checked + .list-button-content span:nth-child(2) {
-        font-weight: 400;
+            &:focus-visible + .list-button-content {
+                box-shadow: 0 0 0 2.5px $blue;
+            }
+            &:focus + .list-button-content {
+                box-shadow: 0 0 0 2.5px $blue;
+            }
+            &:checked + .list-button-content {
+                color: $black;
+                font-weight: 500;
+                background: $blue-100;
+                box-shadow: 0 0 0 1px $blue;
+            }
+            &:checked:focus + .list-button-content {
+                box-shadow: 0 0 0 2.5px $blue;
+            }
+            &:checked + .list-button-content p,
+            &:checked + .list-button-content span {
+                font-weight: 500;
+            }
+            &:checked + .list-button-content span:nth-child(2) {
+                font-weight: 400;
+                color: $gray-600;
+            }
+        }
+    }
+    .list-button-content {
         color: $gray-600;
-      }
-    }
-  }
-  .list-button-content {
-    color: $gray-600;
-    position: relative;
-    background: $white;
-    transition: all 150ms linear;
-    border-radius: $border-radius-lg;
-    border: 1px solid $gray-500;
-    width: 100%;
-    outline: none;
+        position: relative;
+        background: $white;
+        transition: all 150ms linear;
+        border-radius: $border-radius-lg;
+        border: 1px solid $gray-500;
+        width: 100%;
+        outline: none;
 
-    span {
-      &.small {
-        font-size: 0.75rem;
-        color: $gray-550;
-      }
-    }
+        span {
+            &.small {
+                font-size: 0.75rem;
+                color: $gray-550;
+            }
+        }
 
-    &:hover {
-      @include media-breakpoint-up(sm) {
-        box-shadow: 0 0 0 4px $blue-300;
-      }
-      cursor: pointer;
+        &:hover {
+            @include media-breakpoint-up(sm) {
+                box-shadow: 0 0 0 4px $blue-300;
+            }
+            cursor: pointer;
+        }
+        + p {
+            display: none;
+        }
     }
-    + p {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index edd9dddfd..d05655619 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,5 +1,5 @@
 <template>
-    <inputButtonWrapper
+    <baseInputButton
         :buttonWrapperClasses="[
             'list-card w-100 rounded-3 d-flex align-items-center h-100',
             { horizontal: isWide },
@@ -10,54 +10,24 @@
         :groupName="groupName"
         :validationRules="validationRules"
         :selectOnKeypress="selectOnKeypress"
-        @change="handleAnswerChange"
-    >
-        <!-- <div :class="{ 'h-100': !isWide }">
-      <div
-        class="list-card w-100 rounded-3 d-flex align-items-center"
-        :class="[
-          'h-100',
-          isWide ? 'horizontal' : '',
-          errors.length > 0 || hasError ? 'has-error' : '',
-        ]"
-        @keyup.space="triggerButton"
-        @keyup.up="handleKeyupArrow"
-        @keyup.down="handleKeyupArrow"
-        @keyup.left="handleKeyupArrow"
-        @keyup.right="handleKeyupArrow"
-      > -->
-        <!-- <input
-          :type="isMultiSelect ? 'checkbox' : 'radio'"
-          :id="buttonID"
-          :name="groupName"
-          :value="value"
-          :aria-required="isRequired"
-          v-model="checkValue"
-          :checked="checkValue"
-          @change="handleInputChange"
-        /> -->
-
+        @change="handleAnswerChange">
         <div
             class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
-            :class="getLabelClasses"
-        >
+            :class="getLabelClasses">
             <img
                 :id="buttonImageId"
                 :class="!isWide ? 'order-1' : 'ms-auto order-3'"
                 :src="buttonImage"
-                :alt="altText"
-            />
+                :alt="altText" />
             <p
                 v-if="!isWide"
                 class="small order-3"
-                :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
-            >
+                :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
                 {{ buttonLabel }}
             </p>
             <p
                 v-if="buttonLabelSubCopy && !isWide"
-                class="fs-7 m-0 order-4 sub-copy"
-            >
+                class="fs-7 m-0 order-4 sub-copy">
                 {{ buttonLabelSubCopy }}
             </p>
             <div v-if="isWide" class="order-2">
@@ -67,21 +37,19 @@
                 </p>
             </div>
         </div>
-        <!-- </div>
-    </div> -->
-    </inputButtonWrapper>
+    </baseInputButton>
 </template>
 
 <script>
 import { useField } from "vee-validate";
 import { toRef } from "vue";
 import { queryStrings } from "@/constants/query-strings";
-import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
+import baseInputButton from "@/common-components/base-input-button/base-input-button";
 
 export default {
     name: "listCard",
     components: {
-        inputButtonWrapper,
+        baseInputButton,
     },
     props: {
         isMultiSelect: Boolean, //Defines use as checkbox
@@ -91,7 +59,6 @@ export default {
         buttonLabel: String, //Required: Label text
         isRequired: Boolean, //Required: is aria-required required or not?
         altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
-        // buttonID: String, // TODO KO We don't use this //Required: Unique
         groupName: String, //Rquired: Unique
         buttonLabelSubCopy: String, //Optional: sub text
         value: {
@@ -99,32 +66,10 @@ export default {
             type: String,
             default: "",
         },
-        // colLength: String,
         validationRules: String,
-        // selectedValues: [Array, String],
-        // hasError: Boolean,
         valueToLogType: String,
         selectOnKeypress: Boolean,
     },
-    data() {
-        return {
-            // checkValue: null,
-        };
-    },
-    // mounted() {
-    //   if (Array.isArray(this.validateValue)) {
-    //     this.checkValue = this.isValueSelectedByArray(this.selectedValues);
-    //     const isSelectedByValidator = this.isValueSelectedByArray(
-    //       this.validateValue
-    //     );
-
-    //     if (this.checkValue != isSelectedByValidator) {
-    //       this.handleChange(this.value);
-    //     }
-    //   } else {
-    //     this.checkValue = this.selectedValues == this.value;
-    //   }
-    // },
     computed: {
         getLabelClasses() {
             if (this.isWide) {
@@ -139,98 +84,10 @@ export default {
         },
     },
     methods: {
-        // isValueSelectedByArray(arr) {
-        //   return this.isMultiSelect ? arr.includes(this.value) : arr[0];
-        // },
-        // handleInputChange() {
-        //   if (!this.selectingInitiatesLoad) {
-        //     this.handleCheckChange();
-        //   }
-        // },
-        // handleKeyupArrow() {
-        //   if (this.isMultiSelect) {
-        //     return; // Prevent arrow keys from doing anything if element is a checkbox
-        //   }
-
-        //   if (!this.selectingInitiatesLoad) {
-        //     this.handleCheckChange();
-        //   }
-        // },
-        // triggerButton() {
-        //   if (this.selectingInitiatesLoad) {
-        //     this.displayLoader();
-        //     this.handleCheckChange();
-        //   }
-
-        //   this.pushEventToGA(
-        //     this.$route.query[queryStrings.FMG_PAGE],
-        //     this.GaActions.CLICKED,
-        //     this.value.toString(),
-        //     true,
-        //     this.valueToLogType
-        //   );
-        // },
-        // handleCheckChange() {
-        //   const emitEvent = {
-        //     checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
-        //     value: this.value.toString(),
-        //     buttonId: this.buttonID && this.buttonID.toString(),
-        //   };
-
-        //   this.handleChange(this.value);
-        //   this.$emit("isCheckedChanged", emitEvent);
-        // },
         handleAnswerChange(e) {
-            // console.log(e)
             this.$emit("change", e);
         },
     },
-    watch: {
-        // Changing this will impact pre-selection data loads on vehicle-parts.
-        // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
-        // selectedValues(newVal) {
-        //   if (typeof newVal === "string") {
-        //     this.checkValue = newVal == this.value;
-        //   } else if (newVal !== undefined) {
-        //     this.checkValue = newVal.value;
-        //   }
-        // },
-    },
-    // setup(props) {
-    //   const inputType = props.isMultiSelect ? "checkbox" : "radio";
-
-    //   const fieldOptions = {
-    //     type: inputType,
-    //     checkedValue: props.value, //  EX: "Single" or "Passenger"
-    //     potentialInitialValue: props.selectedValues,
-    //   };
-
-    //   // Set initialValue for validation setup if pre-selected
-    //   // NOTE: props.selectedValues could be an array of strings, or an array of integers...
-    //   if (
-    //     props.selectedValues &&
-    //     (props.selectedValues.includes(props.value) ||
-    //       props.selectedValues.includes(parseInt(props.value)))
-    //   ) {
-    //     fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
-    //   }
-
-    //   const { handleChange, errors, value } = useField(
-    //     toRef(props, "groupName"),
-    //     toRef(props, "validationRules"),
-    //     fieldOptions
-    //   );
-
-    //   // First land on the blank, unselected page, no handleChange
-    //   // Land on page with initial values, handleChange
-    //   const validateValue = value;
-    //   return {
-    //     handleChange,
-    //     errors,
-    //     validateValue,
-    //     fieldOptions, // only need to expose this for unit test purposes
-    //   };
-    // },
 };
 </script>
 
@@ -260,9 +117,6 @@ export default {
 
     input[type="checkbox"],
     input[type="radio"] {
-        // opacity: 0;
-        // width: 0;
-        // height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
         position: absolute;
 
         + .list-card-content {
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 8a136c2d2..5f1f81b38 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,6 +1,5 @@
 <template>
-    <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-    <inputButtonWrapper
+    <baseInputButton
         :isMultiSelect="isMultiSelect"
         :value="value"
         :groupName="groupName"
@@ -8,34 +7,17 @@
         inputClasses="form-check-input"
         :validationRules="validationRules"
         @change="handleAnswerChange">
-        <!-- <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> -->
-        <!-- <input
-      type="radio"
-      class="form-check-input"
-      aria-checked="false"
-      :name="groupName"
-      :id="buttonID"
-      :aria-required="isRequired"
-      :value="value"
-      :v-model="checkValue"
-      @change="handleCheckChange"
-      :checked="checkValue"
-      :validationRules="validationRules"
-      /> -->
         <div class="d-flex align-items-start form-check-label" :for="buttonID">
             <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{
                 screenReaderOnlyText
             }}</span>
         </div>
-        <!-- </div> -->
-    </inputButtonWrapper>
+    </baseInputButton>
 </template>
 
 <script>
-import { useField } from "vee-validate";
-import { queryStrings } from "@/constants/query-strings";
-import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
+import baseInputButton from "@/common-components/base-input-button/base-input-button";
 
 export default {
     name: "radio",
@@ -54,51 +36,9 @@ export default {
         validationRules: String,
         valueToLogType: String,
     },
-    data() {
-        return {
-            // checkValue: Boolean,
-        };
-    },
     components: {
-        inputButtonWrapper,
+        baseInputButton,
     },
-    // created() {
-    //   if (this.selectedValues) {
-    //     this.checkValue = this.selectedValues === this.value;
-    //     this.handleCheckChange();
-    //   } else{
-    //     this.checkValue = false;
-    //   }
-    // },
-    methods: {
-        // handleCheckChange() {
-        //   this.handleChange(this.value);
-        //   const emitEvent = {
-        //     checkValue: this.checkValue,
-        //     value: this.value.toString(),
-        //     buttonID: this.buttonID && this.buttonID.toString(),
-        //   };
-        //   this.$emit("isCheckedChanged", emitEvent);
-        //   this.$emit("update:modelValue", emitEvent);
-        //   this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
-        // },
-    },
-    // setup(props) {
-    //   const inputType = "radio";
-    //   const {
-    //       value: inputValue,
-    //       handleChange,
-    //       errors,
-    //   } = useField(props.groupName, props.validationRules,
-    //   {
-    //     type: inputType,
-    //     checkedValue: props.value,
-    //   });
-    //   return {
-    //     handleChange,
-    //     errors,
-    //   };
-    // },
 };
 </script>