diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index e8cf4a967..4ca468502 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -122,7 +122,7 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
-      if(this.isMultiSelect) {
+      if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         const newSelectedValues = this.selectedValues;
         val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index 0795d8b59..d8404e838 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div class="container-fluid nested-radio">
-    <div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
+    <div class="row mb-1">
       <div class="col">
         <listCard
         groupName="listcard1"
@@ -12,24 +12,17 @@
         />
       </div>
     </div>
-    <div class="row mb-1 show-hide"><!-- show-hide for demo only -->
+    <div class="row mb-1">
       <div class="col">
         <p class="mb-0 fw-bold">Ok, select the features</p>
-        <radio ref="radio"
-        groupName="group1"
-        buttonLabel="rain sensor, solar, 3rd visor band"
-        buttonID="button1"
-        isRequired
-        value="test button"
-        screenReaderOnlyText="rain sensor, solar, 3rd visor band"
-        />
-        <radio ref="radio"
-        groupName="group1"
-        buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
-        buttonID="button2"
-        isRequired
-        value="test button"
-        screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
+        <buttonQuestion
+          buttonType="radio"
+          groupName="Demo Group"
+          buttonID="button1"
+          isRequired
+          value="test button"
+          screenReaderOnlyText="rain sensor, solar, 3rd visor band"
+          :answers="demoArray"
         />
       </div>
     </div>
@@ -49,41 +42,36 @@
 </template>
 
 <script>
+import buttonQuestion from "@/common-components/button-question/button-question";
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "nestedRadio",
   components: {
+    buttonQuestion,
     radio,
     listCard,
+  },
+  data() {
+    return {
+      demoArray: [
+        "rain sensor, solar, 3rd visor band",
+        "rain sensor, heated glass, solar, 3rd visor band",
+      ]
+    }
   }
 };
 </script>
 
 <style lang="scss">
 .nested-radio {
-  padding: 20px; // For demo only
   .ui-radio {
+    flex-direction: column;
     margin: .25rem 0;
   }
   p {
     font-size: .875rem;
   }
-  // For demo only
-  .show-hide {
-    max-height: 0;
-    transition: max-height 0.35s ease-out;
-    overflow: hidden;
-  }
-  .demo-animate {
-    &:hover {
-      + .show-hide {
-        max-height: 140px;
-        transition: max-height 0.35s ease-in;
-      }
-    }
-  }
-  // END for demo only
 }
 </style>
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 f47abea5d..28aa0831e 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
@@ -71,7 +71,7 @@ export default ({
         },
     },
     mounted(){
-        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
             const newSelectedValues = this.selectedValues;
             newSelectedValues.push(this.answersToDisplay[0].Name);
             this.selectedValues = newSelectedValues;
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0e47eb37f..4a26b3426 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -6,6 +6,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 
 // Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
@@ -177,7 +178,7 @@ function setupMocks({
         availableReplacementOptions: ["Front", "Back", "Side"],
       },
       windshieldOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
+        availableReplacementOptions: ["Single", "Driver", "Passenger"],
       },
     });
   });
@@ -198,8 +199,8 @@ function setupMocks({
         availableReplacementOptions: ["Front", "Back", "Side"],
       },
       windshieldOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+        availableReplacementOptions: ["Single", "Driver", "Passenger"],
+      },
     },
   };
 
@@ -226,12 +227,11 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
-  const windshieldOptions = replaceOptionsQuestion
-  windshieldOptions.methods = {
+  damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
   };
 
-  damageLocationQuestion.methods = {
+  windshieldOptions.methods = {
     initializeComponent: jest.fn(),
   };
 
@@ -262,11 +262,13 @@ function setupMocks({
   driverSideOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 
-  const windshieldOptionsWrapper = wrapper.findAllComponents({
-    name: "replaceOptionsQuestion",
-  }).at(1);
+  const windshieldOptionsWrapper = wrapper.findComponent({
+    name: "windshieldOptions",
+  });
+  
   windshieldOptionsWrapper.vm.initializeComponent =
-  replaceOptionsQuestion.methods.initializeComponent;
+  windshieldOptions.methods.initializeComponent;
+
 
   const damageLocationQuestionWrapper = wrapper.findComponent({
     name: "damageLocationQuestion",
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 8a85de6b5..998a43892 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -6,6 +6,10 @@
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
         <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" v-model="windshieldOptionsData" />
+        <windshieldOptions ref="windshieldOptions" 
+          v-model="selectedWindshieldOptions" 
+          :selectedDamageLocations="selectedDamageLocations"
+        />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -16,8 +20,9 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
-import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import damageLocationQuestion from"@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -70,6 +75,7 @@ export default {
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
       vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
         resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
       );
       vm.$refs.funnelFooter.initializeComponent(
@@ -81,7 +87,7 @@ export default {
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
-      windshieldOptionsData: [],
+      selectedWindshieldOptions: []
     }
   },
   methods: {
@@ -107,6 +113,7 @@ export default {
     funnelSubHeader,
     replaceOptionsQuestion,
     damageLocationQuestion,
+    windshieldOptions,
   },
 };
 </script>
diff --git a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
deleted file mode 100644
index 686f10de9..000000000
--- a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <div class="windshield-damage-type-question">
-        <buttonQuestion
-            v-if="isAvailable && answersToDisplay.length > 1"
-            :questionText="questionText"
-            :answers="answersToDisplay"
-            :groupName="groupName"
-            buttonType="listCard"
-            v-model="selectedValues"
-            validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
-            :suppressError="suppressError"
-        />
-    </div>
-</template>
-
-<script>
-import buttonQuestion from "@/common-components/button-question/button-question";
-import store from "@/store";
-import { defineRule } from "vee-validate";
-
-// DEFINE VALIDATION RULES
-defineRule("windshield-damage-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select windshield damage";
-    }
-    return true;
-});
-defineRule("checkForRepairAndReplace", (value, [other]) => {
-    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
-        return "checkForRepairAndReplace error"
-    }
-    return true;
-});
-
-export default ({
-    name: "windshieldDamageTypeQuestion",
-    data(){
-        return {
-            questionText: String,
-            answersFromCms: Array,
-            damageOptions: Object,
-        }
-    },
-    props: {
-        isMultiSelect: Boolean,
-        modelValue: Array,
-        isAvailable: Boolean,
-        name: String,
-        groupName: String,
-        suppressError: Boolean,
-    },
-    methods: {
-        initializeComponent(cmsContent, damageOptions){
-            this.questionText = cmsContent.QuestionText;
-            this.answersFromCms = cmsContent.Answers;
-            this.damageOptions = damageOptions;
-        },
-    },
-    computed: {
-        selectedValues: {
-            get: function() {
-                return this.modelValue;
-            },
-            set: function(newValue) {
-                this.$emit("update:modelValue", newValue);
-            }
-        },
-        damageOptionsMap(){
-            return {
-                Windshield: true,
-                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
-                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
-            }
-        },
-        answersToDisplay(){
-            // HARD CODED MOCK DATA FOR NOW
-            return [
-                {
-                    "Name": "Windshield-Crack",
-                    "Text": "Crack",
-                    "SubText": "My damage is larger than six inches.",
-                    "ImageId": "2cf13fbb-22d8-4b61-bd3d-3d413ea58c87",
-                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-replace-desktop-ds.png"
-                },
-                {
-                    "Name": "Windshield-Chip",
-                    "Text": "Chip(s)",
-                    "SubText": "I have three or fewer chips smaller than six inches.",
-                    "ImageId": "faaa14d9-3650-4949-a687-7665962337b8",
-                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-repair-desktop-ds.png"
-                }
-            ]
-        },
-    },
-    components: {
-        buttonQuestion,
-    },
-})
-</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
new file mode 100644
index 000000000..123051d35
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
@@ -0,0 +1,71 @@
+import { shallowMount } from "@vue/test-utils";
+import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("windshield-chip-count-question.vue", () => {
+    test("Selected chip count is emitted upon selection.", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({modelValueProp: ["One"]});
+  
+      //Act
+      wrapper.setValue({ modelValue: ["Two"] });
+      await wrapper.vm.$nextTick();
+        
+      //Assert
+      expect(wrapper.vm.selectedChipCountValues).toEqual(["One"]);
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Two"] }]);
+    });
+  });
+
+  describe("Windshield-chip-count-question.vue", () => {
+    test("Should display question and answers from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent } = setupMocks({modelValueProp: ["One"]});
+  
+      //Act
+      windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
+  
+      //Assert
+      expect(wrapper.vm.questionText).toStrictEqual("How many chips are we repairing?");
+      expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'One' }, { Name: 'Two' }, { Name: 'Three'} ]);
+    });
+  });
+
+  function setupMocks({
+    modelValueProp = ["Two"],
+    groupName = "WindshieldChipCountQuestion",
+    cmsQuestionText = "How many chips are we repairing?",
+    cmsAnswers = [{Name: "One"}, {Name: "Two"}, {Name: "Three"}],
+    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
+    };
+   
+    const wrapper = shallowMount(windshieldChipCountQuestion, mountOptions);
+  
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    const damageOptions = dataFromStoreApi;
+    return { wrapper, cmsContent, damageOptions };
+  }
\ No newline at end of file
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
new file mode 100644
index 000000000..41a3b872b
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -0,0 +1,52 @@
+<template>
+    <transition name="fade">
+        <div class="windshield-chip-count-question">
+            <buttonQuestion
+                v-if="isAvailable"
+                :questionText="questionText"
+                :answers="answersFromCms"
+                :groupName="groupName"
+                buttonType="listButtonHorizontal"
+                v-model="selectedChipCountValues"
+            />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default ({
+    name: "windshieldOptions",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array
+        }
+    },    
+    props: {
+        modelValue: Array,
+        groupName: String,
+        isAvailable: Boolean,
+    },
+    methods: {
+        initializeComponent(cmsContent){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+        }
+    },
+    computed: {
+        selectedChipCountValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+    },
+    components: {
+        buttonQuestion,
+    }
+})
+</script>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
new file mode 100644
index 000000000..3bb64d695
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
@@ -0,0 +1,71 @@
+import { shallowMount } from "@vue/test-utils";
+import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("windshield-damage-type-question.vue", () => {
+    test("Selected chip count is emitted upon selection.", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({modelValueProp: ["Repair"]});
+  
+      //Act
+      wrapper.setValue({ modelValue: ["Replace"] });
+      await wrapper.vm.$nextTick();
+        
+      //Assert
+      expect(wrapper.vm.selectedValues).toEqual(["Repair"]);
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Replace"] }]);
+    });
+  });
+
+  describe("windshield-damage-type-question.vue", () => {
+    test("Should display question and answers from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent } = setupMocks({modelValueProp: ["Repair"]});
+  
+      //Act
+      windshieldDamageTypeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
+  
+      //Assert
+      expect(wrapper.vm.questionText).toStrictEqual("What's your windshield damage?");
+      expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'Repair' }, { Name: 'Replace' } ]);
+    });
+  });
+
+  function setupMocks({
+    modelValueProp = ["Two"],
+    groupName = "WindshieldDamageTypeQuestion",
+    cmsQuestionText = "What's your windshield damage?",
+    cmsAnswers = [{Name: "Repair"}, {Name: "Replace"}],
+    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
+    };
+   
+    const wrapper = shallowMount(windshieldDamageTypeQuestion, mountOptions);
+  
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    const damageOptions = dataFromStoreApi;
+    return { wrapper, cmsContent, damageOptions };
+  }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
new file mode 100644
index 000000000..80656e0a4
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -0,0 +1,71 @@
+<template>
+    <transition name="fade">
+        <div class="windshield-damage-type-question">
+            <buttonQuestion
+                v-if="isAvailable"
+                :questionText="questionText"
+                :answers="answersFromCms"
+                :groupName="groupName"
+                buttonType="listCard"
+                v-model="selectedValues"
+            />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+//import { defineRule } from "vee-validate";
+
+//DEFINE VALIDATION RULES
+// add these to the button component above:
+// validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+// :suppressError="suppressError"
+// defineRule("windshield-damage-required", (value) => {
+//     if (!value || value.length < 1) {
+//         return "Please select windshield damage";
+//     }
+//     return true;
+// });
+// defineRule("checkForRepairAndReplace", (value, [other]) => {
+//     if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+//         return "checkForRepairAndReplace error"
+//     }
+//     return true;
+// });
+
+export default ({
+    name: "windshieldDamageTypeQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array
+        }
+    },
+    props: {
+        modelValue: Array,
+        groupName: String,
+        isAvailable: Boolean,
+        suppressError: Boolean,
+    },
+    methods: {
+        initializeComponent(cmsContent){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+        }
+    },
+    computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+    },
+    components: {
+        buttonQuestion,
+    }
+})
+</script>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 68cce08eb..8f57f61b7 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,26 +1,129 @@
 <template>
-    <div class="windshield-options">
-        <windshieldDamageTypeQuestion
-            ref="windshieldDamageType"
-            v-model="selectedWindshieldDamageTypes"
-            groupName="windshieldDamageTypeQuestion"
-            :isAvailable="showWindshieldDamageTypeQuestion"
-            :suppressError="suppressError"
-        />
-    </div>
+    <transition name="fade">
+        <div class="windshield-options" aria-live="polite">
+            <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
+                :isAvailable=isWindshieldDamageLocation
+                :suppressError="suppressError"
+                groupName="WindshieldDamageTypeQuestion"
+                v-model="selectedWindshieldDamageTypeValues" 
+            />
+            <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
+                :isAvailable=isRepairOptionSelected
+                groupName="WindshieldChipCountQuestion"
+                v-model="selectedWindshieldChipCountValues" 
+            />
+            <replaceOptionsQuestion ref="replaceOptionsQuestion"
+                :isAvailable=isReplaceOptionSelected
+                groupName="WindshieldReplaceOptions"
+                v-model="selectedWindshieldReplaceOptionsValues"
+            />
+        </div>
+    </transition>
 </template>
 
 <script>
-import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question";
-
+import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
+import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
+import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 export default ({
     name: "windshieldOptions",
+    data(){
+        return {
+            chipCountQuestionText: String,
+            chipCountAnswersFromCms: Array,
+
+            selectedWindshieldDamageType: null,
+            selectedWindshieldChipCount: null,
+            selectedWindshieldReplaceOptions: [],
+        }
+    },
+
     props: {
-        showWindshieldDamageTypeQuestion: Boolean,
-        suppressError: Boolean,
+        modelValue: Array,
+        selectedDamageLocations: Array,
+        selectedChipCount: Array,
+        selectedReplaceOptions: Array,
+        suppressError: Boolean
+    },
+
+    methods: {
+        initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
+            windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
+
+            this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
+            this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;
+
+            this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
+            this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
+            this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
+        },
+        getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
+            return {
+                selectedWindshieldDamageType: selectedWindshieldDamageType,
+                selectedWindshieldChipCount: selectedWindshieldChipCount,
+                selectedWindshieldReplaceOptions: selectedWindshieldReplaceOptions
+            }
+        },
+    },
+    computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+        selectedWindshieldDamageTypeValues:{
+            get: function() {
+                return this.selectedValues.selectedWindshieldDamageType;
+            },
+            set: function(newValue) {
+                this.selectedValues.selectedWindshieldChipCount = null;
+                this.selectedValues.selectedWindshieldReplaceOptions = null;
+                this.selectedValues = this.getWindshieldOptions(newValue, this.selectedWindshieldChipCountValues, this.selectedWindshieldReplaceOptionsValues);
+            }
+        },
+        selectedWindshieldChipCountValues: {
+            get: function() {
+                return this.selectedValues.selectedChipCount;
+            },
+            set: function(newValue) {
+                this.selectedValues.selectedWindshieldReplaceOptions = null;
+                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
+            }
+        },
+        selectedWindshieldReplaceOptionsValues: {
+            get: function() {
+                return this.selectedValues.selectedWindshieldReplaceOptions;
+            },
+            set: function(newValue) {
+                this.selectedValues.selectedWindshieldChipCount = null;
+                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
+            }
+        },
+        isWindshieldDamageLocation() {
+            return  this.selectedDamageLocations.some(selectedDamages => 
+                {
+                    const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
+                    return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
+                });
+        },
+        isRepairOptionSelected(){
+            if (!this.selectedWindshieldDamageTypeValues) return false;
+
+            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
+        },
+        isReplaceOptionSelected(){
+            if (!this.selectedWindshieldDamageTypeValues) return false;
+
+            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
+        },
     },
     components: {
         windshieldDamageTypeQuestion,
+        windshieldChipCountQuestion,
+        replaceOptionsQuestion
     },
 })
 </script>
\ No newline at end of file
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 2ca852f66..4b9a18114 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -23,6 +23,7 @@
   &.ui-radio,
   &.ui-checkbox {
     input[type=checkbox],
+    input[type=radio],
     input[type=radio]+label:before,
     input[type=checkbox]+label:before {
       border: 1px solid $red;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 9ae2ed8bf..952aefb1d 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio d-flex form-check" :class="[hasError ? 'has-error' : '']">
+  <div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
     class="form-check-input"