diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index 4a1f42822..e59b6da39 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -19,3 +19,67 @@ describe("buttonQuestion.vue", () => {
     expect(wrapper.props().modelValue).toBe("2020");
   });
 });
+
+describe("buttonQuestion.vue", () => {
+  it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setProps({
+      isOverflowScrollable: true,
+    });
+    // Assert
+    const fieldSet = wrapper.find('fieldset');
+    expect(fieldSet.classes()).toContain("overflow-scroll");
+  });
+});
+
+describe("buttonQuestion.vue", () => {
+  it("Should show appropriate classes for button type", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setProps({
+      buttonType: "listCard",
+    });
+    // Assert
+    const Div = wrapper.find('fieldset div');
+    expect(Div.classes()).toContain("row");
+  });
+});
+
+describe("buttonQuestion.vue", () => {
+  it("Should trigger event modelValue change on select", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setData({
+      modelValueAnswers: ["Windshield"],
+      chosenAnswer: "Windshield"
+    });
+    wrapper.setValue({ answer: wrapper.vm.chosenAnswer });
+    await wrapper.vm.$nextTick();
+    // Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{answer: "Windshield"}]);
+  });
+});
+
+describe("buttonQuestion.vue", () => {
+  it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple options are chosen", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setData({
+      modelValueAnswers: ["Windshield", "BackDoor"]
+    });
+    wrapper.vm.isItemChecked(true);
+    // Assert
+    expect(typeof wrapper.emitted()["update:modelValue"][0]).toEqual('object');
+  });
+});
+
+describe("buttonQuestion.vue", () => {
+  it("Should not trigger event modelValue change on select if checked is false", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    wrapper.vm.isItemChecked(false);
+    // Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([undefined]);
+  });
+});
\ No newline at end of file
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index bf52b4ac8..857e3e621 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -4,40 +4,37 @@
       <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <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"
-            @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
-            @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
-            :buttonID="answer.Name ? answer.Name : answer"
-            :buttonLabel="answer.Text ? answer.Text : answer"
-            :buttonLabelSubCopy="answer.SubText"
-            :textPosition="textPosition"
-            :isMultiSelect="isMultiSelect"
-            :groupName="groupName"
-            :loaderEnabled="loaderEnabled"
-            :loaderColor="loaderColor"
-            :loaderPosition="loaderPosition"
-            :sizeInRem="sizeInRem"
-            :isWide="isWide"
-            :isRequired="isRequired"
-            :buttonImage="answer.AnswerImageUrl"
-            :buttonImageId="answer.ImageId"
-            :altText="answer.Name ? answer.Name : answer"
-            screenReaderOnlyText="(opens new window)"
-            :value="modelValue"
-            data-test="button"
-          />
-        </div>
+      <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.Name ? answer.Name : answer"
+              @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
+              @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
+              @isChecked="isItemChecked"
+              :buttonID="answer.Name ? answer.Name : answer"
+              :value="answer.Name ? answer.Name : answer"
+              :buttonLabel="answer.Text ? answer.Text : answer"
+              :buttonLabelSubCopy="answer.SubText"
+              :textPosition="textPosition"
+              :isMultiSelect="isMultiSelect"
+              :groupName="groupName"
+              :loaderEnabled="loaderEnabled"
+              :loaderColor="loaderColor"
+              :loaderPosition="loaderPosition"
+              :sizeInRem="sizeInRem"
+              :isWide="isWide"
+              :isRequired="isRequired"
+              :buttonImage="answer.AnswerImageUrl"
+              :buttonImageId="answer.ImageId"
+              :altText="answer.Name ? answer.Name : answer"
+              screenReaderOnlyText="(opens new window)"
+              :colLength="this.answers.length < 3 ? '' : '-4'"
+              data-test="button"
+            />
+          </div>
       </fieldset>
     </div>
   </div>
@@ -79,7 +76,7 @@ export default {
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
-    modelValue: String,
+    modelValue: [Array, String],
   },
   computed: {
     getFieldSetClasses() {
@@ -96,16 +93,34 @@ export default {
         case "listButtonHorizontal":
           classes = "d-flex flex-row p-0";
           break;
-        case "listCard":
-          classes = "row g-2";
+        case 'listCard':
+          classes = 'row justify-content-center g-2'
           break;
       }
       return classes;
     },
   },
+  data(){
+    return {
+      modelValueAnswers: [],
+      chosenAnswer: String
+    }
+  },
+  created(){
+    if(Array.isArray(this.answers) && this.answers.length === 1) {
+      const onlyAnswer = typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0];
+      this.$emit("update:modelValue", onlyAnswer);
+    }
+  },
   methods: {
     chooseAnswer(answer) {
-      this.$emit("update:modelValue", answer);
+      this.chosenAnswer = answer;
+    },
+    isItemChecked(val) {
+      // Add or remove item to array of data to emit
+      val ? this.modelValueAnswers.push(this.chosenAnswer) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(this.chosenAnswer), 1);
+
+      this.$emit("update:modelValue", this.modelValueAnswers.length ? this.modelValueAnswers : undefined);
     },
   },
   components: {
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
new file mode 100644
index 000000000..103aecd4c
--- /dev/null
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
@@ -0,0 +1,76 @@
+import { shallowMount } from "@vue/test-utils";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("replace-options-question.vue", () => {
+    test("Selected damage option is emitted upon selection.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+      const damageToSelect = ["Backseat"];
+  
+      //Act
+      wrapper.setValue({ modelValue: damageToSelect });
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+    });
+  });
+
+  describe("replace-options-question.vue", () => {
+    test("Answers to display filtered by data from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
+  
+      //Act
+      replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+  
+      //Assert
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
+    });
+  });
+
+  function setupMocks({
+    modelValueProp = ["Windshield"],
+    isAvailale = true,
+    isMultiSelect = false,
+    filterByVehicleCategory = false,
+    groupName = "damageQuestion",
+    cmsQuestionText = "CMS text goes here",
+    cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
+    dataFromStoreApi = [],
+  }) {
+    
+    //Mock store
+    store.dispatch = jest.fn(() => dataFromStoreApi);
+    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+    const mountOptions = getMountOptions({
+      store: {
+        dispatch: store.dispatch,
+        getters: store.getters,
+      },
+    });
+  
+    //Mock props
+    mountOptions.propsData = {
+      modelValue: modelValueProp,
+      isAvailable: isAvailale,
+      isMultiSelect: isMultiSelect,
+      filterByVehicleCategory: filterByVehicleCategory
+    };
+   
+    const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+  
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    const replaceOptions = dataFromStoreApi;
+    return { wrapper, cmsContent, replaceOptions };
+  }
\ No newline at end of file
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
new file mode 100644
index 000000000..f01f0cd90
--- /dev/null
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -0,0 +1,77 @@
+<template>
+    <transition name="fade">
+        <div class="replace-options-question">
+            <buttonQuestion
+                v-if="isAvailable && answersToDisplay.length > 1"
+                :questionText="questionText"
+                :isMultiSelect="isMultiSelect"
+                :answers="answersToDisplay"
+                :groupName="groupName"
+                buttonType="listCard"
+                v-model="modelValue"
+            />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import store from "@/store";
+
+export default ({
+    name: "replaceOptionsQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            replaceOptions: Array,
+            groupName: String,
+        }
+    },
+    props: {
+        isMultiSelect: Boolean,
+        isAvailable: Boolean,
+        filterByVehicleCategory: Boolean,
+        modelValue: Array,
+    },
+    methods: {
+        initializeComponent(cmsContent, replaceOptions, groupName){
+            this.groupName = groupName;
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+            this.replaceOptions = replaceOptions;
+        }
+    },
+    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) {
+        this.$emit("update:modelValue", val);
+        }
+    },
+    components: {
+        buttonQuestion,
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+    .fade-enter-active,
+    .fade-leave-active {
+        transition: opacity 0.5s ease;
+    }
+
+    .fade-enter-from,
+    .fade-leave-to {
+        opacity: 0;
+    }
+</style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 81c7c8b7a..caf008b78 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -3,6 +3,7 @@ import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 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";
 
 // Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
@@ -144,7 +145,9 @@ function setupMocks({
   baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
   baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
     return Promise.resolve({
-      data: ["Front Window", "Back Window", "Side Window"],
+      driverSideOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      }
     });
   });
   const apiResponses = {
@@ -159,7 +162,11 @@ function setupMocks({
           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
       },
     },
-    damageOptions: ["Front Window", "Back Window", "Side Window"],
+    damageOptions: {
+      driverSideOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      }
+    },
   };
 
   const apiPromise = Promise.resolve(apiResponses);
@@ -180,6 +187,11 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
+  const driverSideOptions = replaceOptionsQuestion
+  driverSideOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleDamage, mountOptions);
 
@@ -197,5 +209,11 @@ function setupMocks({
   funnelSubHeaderWrapper.vm.initializeComponent =
     funnelSubHeader.methods.initializeComponent;
 
+  const driverSideOptionsWrapper = wrapper.findComponent({
+    name: "replaceOptionsQuestion",
+  });
+  driverSideOptionsWrapper.vm.initializeComponent =
+  replaceOptionsQuestion.methods.initializeComponent;
+
   return { wrapper, apiPromise };
 }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index e18b594e0..ba46df331 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,9 +1,12 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
-    <funnelHeader ref="funnelHeader" />
-    <vehicleBanner ref="vehicleBanner" />
-    <funnelSubHeader ref="funnelSubHeader" />
-  </div>
+    <div class="container-fluid shadow rounded-3 p-2 position-relative">
+        <funnelHeader ref="funnelHeader" />
+        <vehicleBanner ref="vehicleBanner" />
+        <funnelSubHeader 
+            ref="funnelSubHeader"
+        />
+        <replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect />
+    </div>
 </template>
 
 <script>
@@ -11,6 +14,7 @@
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 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";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -54,7 +58,11 @@ export default {
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      // use resultMap.damageOptions for damage options
+      vm.$refs.driverSideOptions.initializeComponent(
+        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, 'DriverSideReplaceOptionsQuestion'
+      );
+
+      //console.log(resultMap) for damageOptions and cms content data
     });
   },
   methods: {
@@ -66,6 +74,7 @@ export default {
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
+    replaceOptionsQuestion,
   },
 };
 </script>
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 7ee281c06..3fa7de233 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -28,6 +28,7 @@ export default {
   props: {
     modelValue: String,
   },
+  emits: ['update:modelValue'],
   components: {
     buttonQuestion,
   },
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 9f6fa4e92..48e36996b 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -3,7 +3,6 @@ const navigationScenarios = {
   SELECTED_MODEL: "SELECTED_MODEL",
   SELECTED_MAKE: "SELECTED_MAKE",
   SELECTED_STYLE: "SELECTED_STYLE",
-  VEHICLE_DAMAGE: "VEHICLE_DAMAGE",
   CLICKED_BACK: "CLICKED_BACK",
 };
 
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 c0e2bd0b8..aa574c559 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,34 +1,44 @@
 <template>
-  <div
-    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
-    @mouseup="handleClick(value)"
+  <div 
+    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" 
+    @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"
+    <input 
+      :type="isMultiSelect ? 'checkbox' : 'radio'" 
+      :id="buttonID" 
+      :name="groupName" 
+      :value="buttonID" 
+      :aria-required="isRequired" 
+      :data-focus-target="groupName" 
+      v-model="modelValue" 
     />
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
+    <label 
+      tabindex="-1" 
+      :for="buttonID" 
+      :aria-labelledby="buttonID" 
       class="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 && !isMultiSelect"
-        :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
-        :class="[loaderColor, loaderPosition]"
+      <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 && !isMultiSelect" 
+        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" 
+        :class="[loaderColor, loaderPosition]" 
       />
     </label>
   </div>
@@ -59,6 +69,7 @@ export default {
       type: String,
       default: "",
     },
+    modelValue: false,
   },
   data() {
     return {
@@ -76,6 +87,11 @@ export default {
       this.handleChange(value);
     },
   },
+  watch: {
+    modelValue(){
+      this.$emit('isChecked', this.modelValue);
+    }
+  },
   components: {
     loader,
   },
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index a93b2a45a..17a1e7a8b 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,30 +1,43 @@
 <template>
-  <div
-    class="list-group list-button d-flex flex-column w-100 mb-2"
-    @mouseup="handleClick(value)"
+  <div 
+    class="list-group list-button d-flex flex-column w-100 mb-2" 
+    @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"
-    />
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
+    <input 
+      :type="isMultiSelect ? 'checkbox' : 'radio'" 
+      :id="buttonID" 
+      :name="groupName" 
+      :value="buttonID" 
+      :aria-required="isRequired" 
+      :data-focus-target="groupName" 
+      v-model="modelValue"
+    >
+    <label 
+      tabindex="-1" 
+      :for="buttonID" 
+      :aria-labelledby="buttonID" 
       class="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>
+      <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 && !isMultiSelect"
         :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
@@ -52,12 +65,13 @@ export default {
     loaderEnabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number, String],
-    value: {
-      // Field initial value
-      type: String,
+    sizeInRem: [Number,String],
+    value: { 
+    // Field initial value
+      type: [String, Number],
       default: "",
     },
+    modelValue: false
   },
   data() {
     return {
@@ -75,6 +89,11 @@ export default {
       this.handleChange(value);
     },
   },
+  watch: {
+    modelValue(){
+      this.$emit('isChecked', this.modelValue);
+    }
+  },
   components: {
     loader,
   },
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index b02ef6785..c3d50142a 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -119,4 +119,67 @@ describe("list-card.vue", () => {
 
     expect(input.attributes()["aria-required"]).toEqual("true");
   });
+
+  it("Should return flex row classes if isWide is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: true,
+        buttonLabelSubCopy: ""
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8"]);
+  });
+
+  it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: true,
+        buttonLabelSubCopy: "Button Subcopy"
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8", "checkboxTop"]);
+  });
+
+  it("Should return flex column classes if isWide is false", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-2"]);
+  });
+
 });
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index c5c9f0603..b93bbe3f0 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,41 +1,39 @@
 <template>
   <!-- Heavily documented below -->
-  <div class="col">
-    <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"
-      />
-      <label
-        :for="buttonID"
-        class="d-flex w-100 align-items-center px-2 h-100"
-        :class="getLabelClasses"
-        tabindex="-1"
+  <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" 
+        v-model="modelValue"
+       />
+      <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'"
-          v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
+        <img 
+          :id="buttonImageId" 
+          :class="!isWide ? 'order-1' : 'ms-auto order-3'" 
+          :src="buttonImage" 
           :alt="altText"
-        />
-        <p
-          v-if="!isWide"
-          class="small order-3"
+         />
+        <p 
+          v-if="!isWide" 
+          class="small order-3" 
           :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
         >
-          {{ buttonLabel }}
+          {{buttonLabel}}
         </p>
         <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
-          {{ buttonLabelSubCopy }}
+          {{buttonLabelSubCopy}}
         </p>
         <div v-if="isWide" class="order-2">
           <p class="m-0 small">{{ buttonLabel }}</p>
@@ -72,6 +70,8 @@ export default {
       type: String,
       default: "",
     },
+    colLength: String,
+    modelValue: false,
   },
   computed: {
     getLabelClasses() {
@@ -86,6 +86,11 @@ export default {
       }
     },
   },
+  watch: {
+    modelValue(){
+      this.$emit('isChecked', this.modelValue);
+    }
+  },
   setup(props) {
     const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";