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 e69de29b..48b813f2 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
@@ -0,0 +1,50 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
+            <buttonQuestion
+                :questionText="questionText"
+                :answers="answersFromCms"
+                :groupName="groupName"
+                buttonTypeString="listButtonHorizontal"
+                useTextForValue
+                v-model="selectedValue"
+                :validationRules="validationRules"
+                isRequired />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default {
+    name: "windshieldOptions",
+    props: {
+        modelValue: [String, Number],
+        groupName: String,
+        isAvailable: Boolean,
+        validationRules: String,
+        cmsWidgetName: String,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent(this.cmsWidgetName, "Answers");
+        },
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                const numberValue = Number(newValue);
+                this.$emit("update:modelValue", numberValue);
+            },
+        },
+    },
+    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 e69de29b..01e14608 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -0,0 +1,50 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
+            <buttonQuestion
+                :questionText="questionText"
+                :answers="answersFromCms"
+                :groupName="groupName"
+                buttonTypeString="listCard"
+                v-model="selectedValues"
+                :suppressError="suppressError"
+                :validationRules="validationRules"
+                isRequired />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default {
+    name: "windshieldDamageTypeQuestion",
+    props: {
+        modelValue: String,
+        groupName: String,
+        isAvailable: Boolean,
+        suppressError: Boolean,
+        validationRules: String,
+        cmsWidgetName: String,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent(this.cmsWidgetName, "Answers");
+        },
+        selectedValues: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+};
+</script>