diff --git a/frontend/src/components/common/FormGroup.vue b/frontend/src/components/common/FormGroup.vue
index 29a8f87b..f57d7479 100644
--- a/frontend/src/components/common/FormGroup.vue
+++ b/frontend/src/components/common/FormGroup.vue
@@ -5,7 +5,7 @@
 -->
 
 <template>
-    <BFormGroup :disabled="hasPendingOperations" class="mb-3" label-cols-sm="3" content-cols-sm="9">
+    <BFormGroup :disabled="hasPendingOperations" label-cols-sm="3" content-cols-sm="9">
         <slot />
     </BFormGroup>
 </template>
diff --git a/frontend/src/components/question/FormElement.vue b/frontend/src/components/question/FormElement.vue
index 4b6961d0..2a2a97a6 100644
--- a/frontend/src/components/question/FormElement.vue
+++ b/frontend/src/components/question/FormElement.vue
@@ -12,14 +12,14 @@
 import { computed } from 'vue'
 import type { ComponentInstance } from 'vue'
 
-import type { FormElement } from '@/types'
+import type { ElementPath, FormElement } from '@/types'
 
 import { mapElementKindToComponent } from './elements'
 
 const props = defineProps<{
     disabled: boolean
     element: FormElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
 
 const elementComponent = computed(() => mapElementKindToComponent(props.element.kind))
diff --git a/frontend/src/components/question/OptionsSection.vue b/frontend/src/components/question/OptionsSection.vue
index eb951d3e..a76dc645 100644
--- a/frontend/src/components/question/OptionsSection.vue
+++ b/frontend/src/components/question/OptionsSection.vue
@@ -5,14 +5,14 @@
 -->
 
 <template>
-    <h3>{{ header }}</h3>
-    <FormElement
-        v-for="element in elements"
-        :disabled="false"
-        :element="element"
-        :key="element.name"
-        :path-prefix="[name]"
-    />
+    <div>
+        <h3>{{ header }}</h3>
+        <div class="vstack gap-3">
+            <template v-for="element in elements" :key="element.name">
+                <FormElement :disabled="false" :element="element" :path-prefix="[name]" />
+            </template>
+        </div>
+    </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/components/question/QuestionOptions.vue b/frontend/src/components/question/QuestionOptions.vue
index 06ee6a48..72aef900 100644
--- a/frontend/src/components/question/QuestionOptions.vue
+++ b/frontend/src/components/question/QuestionOptions.vue
@@ -7,7 +7,7 @@
 <template>
     <LoadingIndicator :loading="isPending">
         <ErrorCard v-if="error" :error="error" />
-        <BForm v-else-if="formDefinition">
+        <BForm v-else-if="formDefinition" class="vstack gap-4">
             <OptionsSection header="General" name="general" :elements="formDefinition.general" />
             <OptionsSection
                 v-for="section in formDefinition.sections"
@@ -17,7 +17,7 @@
                 :name="section.name"
             />
         </BForm>
-        <ButtonGroup class="mb-4">
+        <ButtonGroup class="my-4">
             <template v-if="hasEditableFields">
                 <IconButton :disabled="isSaveDisabled" :icon-component="SubmitIcon" @click="submit" variant="primary">{{
                     submitLabel
diff --git a/frontend/src/components/question/RepetitionItem.vue b/frontend/src/components/question/RepetitionItem.vue
new file mode 100644
index 00000000..b791e42c
--- /dev/null
+++ b/frontend/src/components/question/RepetitionItem.vue
@@ -0,0 +1,43 @@
+<!--
+  This file is part of the QuestionPy SDK. (https://questionpy.org)
+  The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
+  (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
+-->
+
+<template>
+    <div class="hstack gap-3 align-items-start">
+        <div class="fs-3 text-body-secondary">{{ number }}.</div>
+        <div class="vstack gap-3">
+            <FormElement v-for="el in elements" :key="el.name" :disabled="disabled" :element="el" :path-prefix="path" />
+        </div>
+        <IconButton
+            @click="emit('remove')"
+            :disabled="removeDisabled"
+            :icon-component="IMdiDelete"
+            class="align-self-end"
+            size="sm"
+            variant="danger"
+        >
+            Remove
+        </IconButton>
+        <ValidationFeedback :validation="validation" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import IMdiDelete from '~icons/mdi/delete'
+
+import { useValidation } from '@/composables/question/elements'
+import type { ElementPath, RepetitionElement } from '@/types'
+
+const { path } = defineProps<{
+    disabled: boolean
+    elements: RepetitionElement['elements']
+    number: number
+    path: ElementPath
+    removeDisabled: boolean
+}>()
+const emit = defineEmits<{ remove: [] }>()
+
+const validation = useValidation(path)
+</script>
diff --git a/frontend/src/components/question/ValidationFeedback.vue b/frontend/src/components/question/ValidationFeedback.vue
new file mode 100644
index 00000000..10d75e91
--- /dev/null
+++ b/frontend/src/components/question/ValidationFeedback.vue
@@ -0,0 +1,15 @@
+<!--
+  This file is part of the QuestionPy SDK. (https://questionpy.org)
+  The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
+  (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
+-->
+
+<template>
+    <BFormInvalidFeedback v-if="validation.text" :state="validation.state">{{ validation.text }}</BFormInvalidFeedback>
+</template>
+
+<script lang="ts" setup>
+import type { ValidationInfo } from '@/types'
+
+defineProps<{ validation: ValidationInfo }>()
+</script>
diff --git a/frontend/src/components/question/elements/CheckboxElement.vue b/frontend/src/components/question/elements/CheckboxElement.vue
index a24ceba9..0317facf 100644
--- a/frontend/src/components/question/elements/CheckboxElement.vue
+++ b/frontend/src/components/question/elements/CheckboxElement.vue
@@ -5,43 +5,47 @@
 -->
 
 <template>
-    <FormGroup v-show="!isHiddenByCond" :label="element.left_label">
+    <FormGroup v-show="!isHiddenByCond" :label="element.left_label" :state="validation.state">
         <BFormCheckbox
             :aria-describedby="ariaDescribedBy"
             :disabled="isDisabled"
             :id="id"
-            :name="name"
             :required="element.required"
+            :state="validation.state"
             v-model="model"
             >{{ element.right_label }}</BFormCheckbox
         >
+        <ValidationFeedback :validation="validation" />
         <BFormText v-if="helpText" :id="helpId">{{ helpText }}</BFormText>
     </FormGroup>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-
+import ValidationFeedback from '@/components/question/ValidationFeedback.vue'
 import {
     useAriaDescribedBy,
-    useCommon,
     useConditions,
     useHelp,
+    useId,
     useIsDisabled,
     useModel,
+    usePath,
+    useValidation,
 } from '@/composables/question/elements'
-import type { CheckboxElement } from '@/types'
+import type { CheckboxElement, ElementPath } from '@/types'
 
 const { disabled, element, pathPrefix } = defineProps<{
     disabled: boolean
     element: CheckboxElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
 
-const { id, name } = useCommon(pathPrefix, element)
+const path = usePath(pathPrefix, element)
+const id = useId(path)
 const model = useModel(pathPrefix, element)
 const { isDisabledByCond, isHiddenByCond } = useConditions(pathPrefix, element)
 const { helpId, helpText } = useHelp(pathPrefix, element)
-const isDisabled = useIsDisabled(computed(() => disabled || isDisabledByCond.value))
+const isDisabled = useIsDisabled(() => disabled || isDisabledByCond.value)
 const ariaDescribedBy = useAriaDescribedBy([helpId.value])
+const validation = useValidation(path)
 </script>
diff --git a/frontend/src/components/question/elements/GeneratedIdElement.vue b/frontend/src/components/question/elements/GeneratedIdElement.vue
index 3b881a71..7e21826e 100644
--- a/frontend/src/components/question/elements/GeneratedIdElement.vue
+++ b/frontend/src/components/question/elements/GeneratedIdElement.vue
@@ -5,17 +5,19 @@
 -->
 
 <template>
-    <input type="hidden" :id="id" :name="name" :value="model" />
+    <input type="hidden" :id="id" :value="model" />
 </template>
 
 <script lang="ts" setup>
-import { useCommon, useModel } from '@/composables/question/elements'
-import type { GeneratedIdElement } from '@/types'
+import { useId, useModel, usePath } from '@/composables/question/elements'
+import type { ElementPath, GeneratedIdElement } from '@/types'
 
 const { element, pathPrefix } = defineProps<{
     element: GeneratedIdElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
-const { id, name } = useCommon(pathPrefix, element)
+
+const path = usePath(pathPrefix, element)
+const id = useId(path)
 const model = useModel(pathPrefix, element)
 </script>
diff --git a/frontend/src/components/question/elements/GroupElement.vue b/frontend/src/components/question/elements/GroupElement.vue
index 6d76bb67..cad85f0d 100644
--- a/frontend/src/components/question/elements/GroupElement.vue
+++ b/frontend/src/components/question/elements/GroupElement.vue
@@ -5,33 +5,34 @@
 -->
 
 <template>
-    <BCard class="mb-3" v-show="!isHiddenByCond" :footer="helpText" :id="id" :title="element.label">
-        <FormElement
-            v-for="el in element.elements"
-            :disabled="isDisabled"
-            :key="el.name"
-            :element="el"
-            :path-prefix="[...pathPrefix, element.name]"
-        />
+    <BCard v-show="!isHiddenByCond" :footer="helpText" :id="id" :title="element.label">
+        <div class="vstack gap-3">
+            <FormElement
+                v-for="el in element.elements"
+                :disabled="isDisabled"
+                :key="el.name"
+                :element="el"
+                :path-prefix="[...pathPrefix, element.name]"
+            />
+        </div>
     </BCard>
-    <BFormText v-if="helpText" :id="helpId">{{ helpText }}</BFormText>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { useCommon, useConditions, useHelp, useIsDisabled } from '@/composables/question/elements'
-import type { GroupElement } from '@/types'
+import { useConditions, useHelp, useId, useIsDisabled, usePath } from '@/composables/question/elements'
+import type { ElementPath, GroupElement } from '@/types'
 
 const { disabled, element, pathPrefix } = defineProps<{
     disabled: boolean
     element: GroupElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
 
+const path = usePath(pathPrefix, element)
+const id = useId(path)
 const { isDisabledByCond, isHiddenByCond } = useConditions(pathPrefix, element)
-const { helpId, helpText } = useHelp(pathPrefix, element)
+const { helpText } = useHelp(pathPrefix, element)
 const isDisabled = useIsDisabled(computed(() => disabled || isDisabledByCond.value))
-
-const { id } = useCommon(pathPrefix, element)
 </script>
diff --git a/frontend/src/components/question/elements/HiddenElement.vue b/frontend/src/components/question/elements/HiddenElement.vue
index 5137d4e7..9759889e 100644
--- a/frontend/src/components/question/elements/HiddenElement.vue
+++ b/frontend/src/components/question/elements/HiddenElement.vue
@@ -5,22 +5,23 @@
 -->
 
 <template>
-    <input :disabled="isDisabled" type="hidden" :id="id" :name="name" :value="element.value" />
+    <input :disabled="isDisabled" type="hidden" :id="id" :value="element.value" />
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { useCommon, useConditions, useIsDisabled } from '@/composables/question/elements'
-import type { HiddenElement } from '@/types'
+import { useConditions, useId, useIsDisabled, usePath } from '@/composables/question/elements'
+import type { ElementPath, HiddenElement } from '@/types'
 
 const { disabled, element, pathPrefix } = defineProps<{
     disabled: boolean
     element: HiddenElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
 
-const { id, name } = useCommon(pathPrefix, element)
+const path = usePath(pathPrefix, element)
+const id = useId(path)
 const { isDisabledByCond } = useConditions(pathPrefix, element)
 const isDisabled = useIsDisabled(computed(() => disabled || isDisabledByCond.value))
 </script>
diff --git a/frontend/src/components/question/elements/RadioGroupElement.vue b/frontend/src/components/question/elements/RadioGroupElement.vue
index 5760993b..44b9d122 100644
--- a/frontend/src/components/question/elements/RadioGroupElement.vue
+++ b/frontend/src/components/question/elements/RadioGroupElement.vue
@@ -5,16 +5,17 @@
 -->
 
 <template>
-    <FormGroup v-show="!isHiddenByCond" :label="element.label">
+    <FormGroup v-show="!isHiddenByCond" :label="element.label" :state="validation.state">
         <BFormRadioGroup
             v-model="model"
             :aria-describedby="ariaDescribedBy"
             :disabled="isDisabled"
             :id="id"
-            :name="name"
             :options="options"
             :required="element.required"
+            :state="validation.state"
         />
+        <ValidationFeedback :validation="validation" />
         <BFormText v-if="helpText" :id="helpId">{{ helpText }}</BFormText>
     </FormGroup>
 </template>
@@ -24,25 +25,29 @@ import { computed } from 'vue'
 
 import {
     useAriaDescribedBy,
-    useCommon,
     useConditions,
     useHelp,
+    useId,
     useIsDisabled,
     useModel,
+    usePath,
+    useValidation,
 } from '@/composables/question/elements'
-import type { RadioGroupElement } from '@/types'
+import type { ElementPath, RadioGroupElement } from '@/types'
 
 const { disabled, element, pathPrefix } = defineProps<{
     disabled: boolean
     element: RadioGroupElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
 
-const { id, name } = useCommon(pathPrefix, element)
+const path = usePath(pathPrefix, element)
+const id = useId(path)
 const model = useModel(pathPrefix, element)
 const { isDisabledByCond, isHiddenByCond } = useConditions(pathPrefix, element)
 const { helpId, helpText } = useHelp(pathPrefix, element)
 const isDisabled = useIsDisabled(computed(() => disabled || isDisabledByCond.value))
 const ariaDescribedBy = useAriaDescribedBy([helpId.value])
 const options = computed(() => element.options.map(({ value, label }) => ({ value, text: label })))
+const validation = useValidation(path)
 </script>
diff --git a/frontend/src/components/question/elements/RepetitionElement.vue b/frontend/src/components/question/elements/RepetitionElement.vue
index cdc688d0..22250b4b 100644
--- a/frontend/src/components/question/elements/RepetitionElement.vue
+++ b/frontend/src/components/question/elements/RepetitionElement.vue
@@ -5,56 +5,47 @@
 -->
 
 <template>
-    <div class="border-start border-4 mb-3 ps-3">
-        <div class="mb-5" v-for="n in count" :key="n">
-            <FormElement
-                v-for="el in element.elements"
-                :disabled="isDisabled"
-                :element="el"
-                :key="el.name"
-                :path-prefix="[...pathPrefix, element.name, n.toString()]"
-            />
+    <BCard :id="id" no-body>
+        <BListGroup flush>
+            <BListGroupItem v-for="n in count" :key="n" class="p-3">
+                <RepetitionItem
+                    @remove="remove(n - 1)"
+                    :number="n"
+                    :disabled="disabled"
+                    :remove-disabled="count <= element.minimum_repetitions || isDisabled"
+                    :elements="element.elements"
+                    :path="[...pathPrefix, element.name, n - 1]"
+                />
+            </BListGroupItem>
+        </BListGroup>
+        <template #footer>
             <ButtonGroup>
-                <IconButton
-                    v-if="n === count"
-                    @click="addRepetition(element.elements)"
-                    :disabled="isDisabled"
-                    :icon-component="IMdiAdd"
-                    size="sm"
-                    variant="primary"
-                    >{{ element.button_label ?? 'Add repetition' }}</IconButton
-                >
-                <IconButton
-                    @click="removeRepetition(n)"
-                    :disabled="count <= element.minimum_repetitions || isDisabled"
-                    :icon-component="IMdiDelete"
-                    size="sm"
-                    variant="danger"
-                    >Remove</IconButton
-                >
+                <IconButton @click="add" :disabled="isDisabled" :icon-component="IMdiAdd" size="sm" variant="primary">{{
+                    element.button_label ?? 'Add repetition'
+                }}</IconButton>
             </ButtonGroup>
-        </div>
-    </div>
+            <ValidationFeedback :validation="validation" />
+        </template>
+    </BCard>
 </template>
 
 <script lang="ts" setup>
 import IMdiAdd from '~icons/mdi/add'
-import IMdiDelete from '~icons/mdi/delete'
 import { computed } from 'vue'
 
 import { useRepetitions } from '@/composables/question'
-import { useCommon, useIsDisabled } from '@/composables/question/elements'
-import type { RepetitionElement } from '@/types'
+import { useId, useIsDisabled, usePath, useValidation } from '@/composables/question/elements'
+import type { ElementPath, RepetitionElement } from '@/types'
 
 const { disabled, element, pathPrefix } = defineProps<{
     disabled: boolean
     element: RepetitionElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
 
-const { path } = useCommon(pathPrefix, element)
-const { addRepetition, getRepetitionCount, removeRepetition } = useRepetitions(path.value)
+const path = usePath(pathPrefix, element)
+const id = useId(path)
+const { add, count, remove } = useRepetitions(pathPrefix, element)
 const isDisabled = useIsDisabled(computed(() => disabled))
-
-const count = computed(() => getRepetitionCount())
+const validation = useValidation(path)
 </script>
diff --git a/frontend/src/components/question/elements/SelectElement.vue b/frontend/src/components/question/elements/SelectElement.vue
index 8707e0df..c2504d9b 100644
--- a/frontend/src/components/question/elements/SelectElement.vue
+++ b/frontend/src/components/question/elements/SelectElement.vue
@@ -5,18 +5,19 @@
 -->
 
 <template>
-    <FormGroup v-show="!isHiddenByCond" :label="element.label">
+    <FormGroup v-show="!isHiddenByCond" :label="element.label" :label-for="id" :state="validation.state">
         <BFormSelect
             v-model="model"
             :aria-describedby="ariaDescribedBy"
             :disabled="isDisabled"
             :id="id"
             :multiple="element.multiple"
-            :name="name"
             :options="options"
             :required="element.required"
             :select-size="size"
+            :state="validation.state"
         />
+        <ValidationFeedback :validation="validation" />
         <BFormText v-if="helpText" :id="helpId">{{ helpText }}</BFormText>
     </FormGroup>
 </template>
@@ -26,29 +27,33 @@ import { computed } from 'vue'
 
 import {
     useAriaDescribedBy,
-    useCommon,
     useConditions,
     useHelp,
+    useId,
     useIsDisabled,
     useModel,
+    usePath,
+    useValidation,
 } from '@/composables/question/elements'
-import type { SelectElement } from '@/types'
+import type { ElementPath, SelectElement } from '@/types'
 
 const { disabled, element, pathPrefix } = defineProps<{
     disabled: boolean
     element: SelectElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
 
 const MAX_SIZE = 8
 const size = computed(() => (element.multiple ? Math.min(element.options.length, MAX_SIZE) : undefined))
 
-const { id, name } = useCommon(pathPrefix, element)
+const path = usePath(pathPrefix, element)
+const id = useId(path)
 const model = useModel(pathPrefix, element)
 const { isDisabledByCond, isHiddenByCond } = useConditions(pathPrefix, element)
 const { helpId, helpText } = useHelp(pathPrefix, element)
 const isDisabled = useIsDisabled(computed(() => disabled || isDisabledByCond.value))
 const ariaDescribedBy = useAriaDescribedBy([helpId.value])
+const validation = useValidation(path)
 
 const options = computed(() =>
     element.options.map((opts) => ({
diff --git a/frontend/src/components/question/elements/StaticTextElement.vue b/frontend/src/components/question/elements/StaticTextElement.vue
index 838c0197..55b4caa4 100644
--- a/frontend/src/components/question/elements/StaticTextElement.vue
+++ b/frontend/src/components/question/elements/StaticTextElement.vue
@@ -13,11 +13,11 @@
 
 <script lang="ts" setup>
 import { useConditions, useHelp } from '@/composables/question/elements'
-import type { StaticTextElement } from '@/types'
+import type { ElementPath, StaticTextElement } from '@/types'
 
 const { element, pathPrefix } = defineProps<{
     element: StaticTextElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
 
 const { isHiddenByCond } = useConditions(pathPrefix, element)
diff --git a/frontend/src/components/question/elements/TextAreaElement.vue b/frontend/src/components/question/elements/TextAreaElement.vue
index fa530607..caf7659b 100644
--- a/frontend/src/components/question/elements/TextAreaElement.vue
+++ b/frontend/src/components/question/elements/TextAreaElement.vue
@@ -5,21 +5,18 @@
 -->
 
 <template>
-    <FormGroup v-show="!isHiddenByCond" :label="element.label">
+    <FormGroup v-show="!isHiddenByCond" :label="element.label" :state="validation.state">
         <BFormTextarea
             rows="3"
             v-model="model"
             :aria-describedby="ariaDescribedBy"
             :disabled="isDisabled"
             :id="id"
-            :name="name"
             :placeholder="element.placeholder ?? undefined"
             :required="element.required"
-            :state="validationState"
+            :state="validation.state"
         />
-        <BFormInvalidFeedback v-if="validationText" :id="validationId" :state="validationState">{{
-            validationText
-        }}</BFormInvalidFeedback>
+        <ValidationFeedback :validation="validation" />
         <BFormText v-if="helpText" :id="helpId">{{ helpText }}</BFormText>
     </FormGroup>
 </template>
@@ -29,25 +26,27 @@ import { computed } from 'vue'
 
 import {
     useAriaDescribedBy,
-    useCommon,
     useConditions,
     useHelp,
+    useId,
     useIsDisabled,
     useModel,
+    usePath,
     useValidation,
 } from '@/composables/question/elements'
-import type { TextAreaElement } from '@/types'
+import type { ElementPath, TextAreaElement } from '@/types'
 
 const { disabled, element, pathPrefix } = defineProps<{
     disabled: boolean
     element: TextAreaElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
 
-const { id, name } = useCommon(pathPrefix, element)
+const path = usePath(pathPrefix, element)
+const id = useId(path)
 const model = useModel(pathPrefix, element)
 const { isDisabledByCond, isHiddenByCond } = useConditions(pathPrefix, element)
-const { validationId, validationText, validationState } = useValidation(pathPrefix, element)
+const validation = useValidation(path)
 const { helpId, helpText } = useHelp(pathPrefix, element)
 const isDisabled = useIsDisabled(computed(() => disabled || isDisabledByCond.value))
 const ariaDescribedBy = useAriaDescribedBy([helpId.value])
diff --git a/frontend/src/components/question/elements/TextInputElement.vue b/frontend/src/components/question/elements/TextInputElement.vue
index 0d3ff2ca..5bc478a3 100644
--- a/frontend/src/components/question/elements/TextInputElement.vue
+++ b/frontend/src/components/question/elements/TextInputElement.vue
@@ -5,21 +5,18 @@
 -->
 
 <template>
-    <FormGroup v-show="!isHiddenByCond" :label="element.label">
+    <FormGroup v-show="!isHiddenByCond" :label="element.label" :state="validation.state">
         <BFormInput
             type="text"
             v-model="model"
             :aria-describedby="ariaDescribedBy"
             :disabled="isDisabled"
             :id="id"
-            :name="name"
             :placeholder="element.placeholder ?? undefined"
             :required="element.required"
-            :state="validationState"
+            :state="validation.state"
         />
-        <BFormInvalidFeedback v-if="validationText" :id="validationId" :state="validationState">{{
-            validationText
-        }}</BFormInvalidFeedback>
+        <ValidationFeedback :validation="validation" />
         <BFormText v-if="helpText" :id="helpId">{{ helpText }}</BFormText>
     </FormGroup>
 </template>
@@ -29,25 +26,27 @@ import { computed } from 'vue'
 
 import {
     useAriaDescribedBy,
-    useCommon,
     useConditions,
     useHelp,
+    useId,
     useIsDisabled,
     useModel,
+    usePath,
     useValidation,
 } from '@/composables/question/elements'
-import type { TextInputElement } from '@/types'
+import type { ElementPath, TextInputElement } from '@/types'
 
 const { disabled, element, pathPrefix } = defineProps<{
     disabled: boolean
     element: TextInputElement
-    pathPrefix: string[]
+    pathPrefix: ElementPath
 }>()
 
-const { id, name } = useCommon(pathPrefix, element)
+const path = usePath(pathPrefix, element)
+const id = useId(path)
 const model = useModel(pathPrefix, element)
 const { isDisabledByCond, isHiddenByCond } = useConditions(pathPrefix, element)
-const { validationId, validationText, validationState } = useValidation(pathPrefix, element)
+const validation = useValidation(path)
 const { helpId, helpText } = useHelp(pathPrefix, element)
 const isDisabled = useIsDisabled(computed(() => disabled || isDisabledByCond.value))
 const ariaDescribedBy = useAriaDescribedBy([helpId.value])
diff --git a/frontend/src/composables/question/__tests__/formDataUtils.test.ts b/frontend/src/composables/question/__tests__/formDataUtils.test.ts
index c7c07bfd..dc95cdf5 100644
--- a/frontend/src/composables/question/__tests__/formDataUtils.test.ts
+++ b/frontend/src/composables/question/__tests__/formDataUtils.test.ts
@@ -7,7 +7,6 @@
 import {
     areFormDataObjIdentical,
     createFormDataValues,
-    getElementName,
     getErrorKey,
     getFormData,
     hasEditableElements,
@@ -26,24 +25,19 @@ import type {
 
 import options from './options'
 
-test('getElementName', () => {
-    expect(getElementName(['general', 'foo', 'bar'])).toBe('general[foo][bar]')
-})
-
 test('getErrorKey (general)', () => {
-    expect(getErrorKey(['general', 'a', '2', 'c'])).toBe('a.1.c')
+    expect(getErrorKey(['general', 'a', 1, 'c'])).toBe('a.1.c')
 })
 
 test('getErrorKey (section)', () => {
-    expect(getErrorKey(['section', '3', 'field'])).toBe('section.2.field')
+    expect(getErrorKey(['section', 2, 'field'])).toBe('section.2.field')
 })
 
 test('getErrorKey (mixed parts)', () => {
-    expect(getErrorKey(['section', 'a', '2', 'b', '3'])).toBe('section.a.1.b.2')
+    expect(getErrorKey(['section', 'a', 1, 'b', 2])).toBe('section.a.1.b.2')
 })
 
 test('createFormDataValues (checkbox)', () => {
-    const data = {}
     const checkbox = {
         kind: 'checkbox',
         name: 'chk',
@@ -55,12 +49,10 @@ test('createFormDataValues (checkbox)', () => {
         hide_if: [],
         help: null,
     } satisfies CheckboxElement
-    createFormDataValues(data, [checkbox], ['general'])
-    expect(data).toEqual({ 'general[chk]': true })
+    expect(createFormDataValues([checkbox])).toEqual({ chk: true })
 })
 
 test('createFormDataValues (select single)', () => {
-    const data = {}
     const select = {
         kind: 'select',
         name: 'my_select',
@@ -75,12 +67,10 @@ test('createFormDataValues (select single)', () => {
         hide_if: [],
         help: null,
     } satisfies SelectElement
-    createFormDataValues(data, [select], ['general'])
-    expect(data).toEqual({ 'general[my_select]': 'OPT_2' })
+    expect(createFormDataValues([select])).toEqual({ my_select: 'OPT_2' })
 })
 
 test('createFormDataValues (select multiple)', () => {
-    const data = {}
     const select = {
         kind: 'select',
         name: 'my_select_multi',
@@ -96,12 +86,10 @@ test('createFormDataValues (select multiple)', () => {
         hide_if: [],
         help: null,
     } satisfies SelectElement
-    createFormDataValues(data, [select], ['general'])
-    expect(data).toEqual({ 'general[my_select_multi]': ['OPT_1', 'OPT_3'] })
+    expect(createFormDataValues([select])).toEqual({ my_select_multi: ['OPT_1', 'OPT_3'] })
 })
 
 test('createFormDataValues (input)', () => {
-    const data = {}
     const input = {
         kind: 'input',
         name: 'input',
@@ -113,12 +101,10 @@ test('createFormDataValues (input)', () => {
         hide_if: [],
         help: null,
     } satisfies TextInputElement
-    createFormDataValues(data, [input], ['general'])
-    expect(data).toEqual({ 'general[input]': 'default text' })
+    expect(createFormDataValues([input])).toEqual({ input: 'default text' })
 })
 
 test('createFormDataValues (hidden)', () => {
-    const data = {}
     const hidden = {
         kind: 'hidden',
         name: 'my_hidden',
@@ -126,12 +112,10 @@ test('createFormDataValues (hidden)', () => {
         disable_if: [],
         hide_if: [],
     } satisfies HiddenElement
-    createFormDataValues(data, [hidden], ['general'])
-    expect(data).toEqual({ 'general[my_hidden]': 'foo' })
+    expect(createFormDataValues([hidden])).toEqual({ my_hidden: 'foo' })
 })
 
 test('createFormDataValues (group)', () => {
-    const data = {}
     const group = {
         kind: 'group',
         name: 'name_group',
@@ -164,15 +148,10 @@ test('createFormDataValues (group)', () => {
         hide_if: [],
         help: null,
     } satisfies GroupElement
-    createFormDataValues(data, [group], ['general'])
-    expect(data).toEqual({
-        'general[name_group][first_name]': '',
-        'general[name_group][last_name]': '',
-    })
+    expect(createFormDataValues([group])).toEqual({ name_group: { first_name: '', last_name: '' } })
 })
 
 test('createFormDataValues (repetition)', () => {
-    const data = {}
     const repetition = {
         kind: 'repetition',
         name: 'my_repetition',
@@ -230,21 +209,30 @@ test('createFormDataValues (repetition)', () => {
             },
         ],
     } satisfies RepetitionElement
-    createFormDataValues(data, [repetition], ['general'])
-    expect(data).toEqual({
-        'general[my_repetition][1][id]': expect.stringMatching(/^[a-f\d-]+$/),
-        'general[my_repetition][1][role]': '',
-        'general[my_repetition][1][name][first_name]': 'Jane',
-        'general[my_repetition][1][name][last_name]': '',
-        'general[my_repetition][2][id]': expect.stringMatching(/^[a-f\d-]+$/),
-        'general[my_repetition][2][role]': '',
-        'general[my_repetition][2][name][first_name]': 'Jane',
-        'general[my_repetition][2][name][last_name]': '',
+    expect(createFormDataValues([repetition])).toEqual({
+        my_repetition: [
+            {
+                id: expect.stringMatching(/^[a-f\d-]+$/),
+                role: '',
+                name: {
+                    first_name: 'Jane',
+                    last_name: '',
+                },
+            },
+            {
+                id: expect.stringMatching(/^[a-f\d-]+$/),
+                role: '',
+                name: {
+                    first_name: 'Jane',
+                    last_name: '',
+                },
+            },
+        ],
     })
 })
 
 test('createFormDataValues (existing key skipped)', () => {
-    const data = { 'general[input]': 'existing' }
+    const data = { input: 'existing' }
     const input = {
         kind: 'input',
         name: 'input',
@@ -256,12 +244,10 @@ test('createFormDataValues (existing key skipped)', () => {
         hide_if: [],
         help: null,
     } satisfies TextInputElement
-    createFormDataValues(data, [input], ['general'])
-    expect(data).toEqual({ 'general[input]': 'existing' })
+    expect(createFormDataValues([input], data)).toEqual({ input: 'existing' })
 })
 
 test('createFormDataValues (radio group)', () => {
-    const data = {}
     const radioGroup = {
         kind: 'radio_group',
         name: 'radio',
@@ -275,66 +261,93 @@ test('createFormDataValues (radio group)', () => {
         hide_if: [],
         help: null,
     } satisfies RadioGroupElement
-    createFormDataValues(data, [radioGroup], ['general'])
-    expect(data).toEqual({ 'general[radio]': 'RADIO_2' })
+    expect(createFormDataValues([radioGroup])).toEqual({ radio: 'RADIO_2' })
 })
 
 test('createFormDataValues (generated ID)', () => {
-    const data = {}
     const idElement = {
         kind: 'id',
         name: 'id',
     } satisfies GeneratedIdElement
-    createFormDataValues(data, [idElement], ['general'])
-    expect(data).toEqual({ 'general[id]': expect.stringMatching(/^[a-f\d-]+$/) })
+    expect(createFormDataValues([idElement])).toEqual({ id: expect.stringMatching(/^[a-f\d-]+$/) })
 })
 
 test('getFormData', async () => {
     expect(getFormData(options, {})).toStrictEqual({
-        'general[input]': 'default text',
-        'general[chk]': false,
-        'general[radio]': 'RADIO_2',
-        'general[my_select]': 'OPT_2',
-        'general[my_select_multi]': ['OPT_1', 'OPT_3'],
-        'general[my_hidden]': 'foo',
-        'general[my_repetition][1][id]': expect.stringMatching(/^[a-f\d-]+$/),
-        'general[my_repetition][1][role]': 'OPT_1',
-        'general[my_repetition][1][name][first_name]': 'Jane',
-        'general[my_repetition][1][name][last_name]': '',
-        'general[my_repetition][2][id]': expect.stringMatching(/^[a-f\d-]+$/),
-        'general[my_repetition][2][role]': 'OPT_1',
-        'general[my_repetition][2][name][first_name]': 'Jane',
-        'general[my_repetition][2][name][last_name]': '',
-        'general[has_name]': false,
-        'general[name_group][first_name]': '',
-        'general[name_group][last_name]': '',
-        'another_section[some_input]': '',
+        another_section: {
+            some_input: '',
+        },
+        chk: false,
+        has_name: false,
+        input: 'default text',
+        my_hidden: 'foo',
+        my_repetition: [
+            {
+                id: expect.stringMatching(/^[a-f\d-]+$/),
+                name: {
+                    first_name: 'Jane',
+                    last_name: '',
+                },
+                role: 'OPT_1',
+            },
+            {
+                id: expect.stringMatching(/^[a-f\d-]+$/),
+                name: {
+                    first_name: 'Jane',
+                    last_name: '',
+                },
+                role: 'OPT_1',
+            },
+        ],
+        my_select: 'OPT_2',
+        my_select_multi: ['OPT_1', 'OPT_3'],
+        name_group: {
+            first_name: '',
+            last_name: '',
+        },
+        radio: 'RADIO_2',
     })
 })
 
 test('getFormData (with initial data)', async () => {
     const initialData = {
-        'general[my_repetition][1][id]': 'fb79662e-1e2b-46d8-9655-3db4ecbbfab5',
-        'general[my_repetition][1][role]': 'OPT_3',
-        'general[my_repetition][1][name][first_name]': 'John',
-        'general[my_repetition][1][name][last_name]': 'Doe',
+        my_repetition: [
+            {
+                id: 'fb79662e-1e2b-46d8-9655-3db4ecbbfab5',
+                role: 'OPT_3',
+                name: {
+                    first_name: 'John',
+                    last_name: 'Doe',
+                },
+            },
+        ],
     }
 
     expect(getFormData(options, initialData)).toStrictEqual({
-        'general[input]': 'default text',
-        'general[chk]': false,
-        'general[radio]': 'RADIO_2',
-        'general[my_select]': 'OPT_2',
-        'general[my_select_multi]': ['OPT_1', 'OPT_3'],
-        'general[my_hidden]': 'foo',
-        'general[my_repetition][1][id]': 'fb79662e-1e2b-46d8-9655-3db4ecbbfab5',
-        'general[my_repetition][1][role]': 'OPT_3',
-        'general[my_repetition][1][name][first_name]': 'John',
-        'general[my_repetition][1][name][last_name]': 'Doe',
-        'general[has_name]': false,
-        'general[name_group][first_name]': '',
-        'general[name_group][last_name]': '',
-        'another_section[some_input]': '',
+        another_section: {
+            some_input: '',
+        },
+        chk: false,
+        has_name: false,
+        input: 'default text',
+        my_hidden: 'foo',
+        my_repetition: [
+            {
+                id: 'fb79662e-1e2b-46d8-9655-3db4ecbbfab5',
+                role: 'OPT_3',
+                name: {
+                    first_name: 'John',
+                    last_name: 'Doe',
+                },
+            },
+        ],
+        my_select: 'OPT_2',
+        my_select_multi: ['OPT_1', 'OPT_3'],
+        name_group: {
+            first_name: '',
+            last_name: '',
+        },
+        radio: 'RADIO_2',
     })
 })
 
@@ -380,6 +393,60 @@ test('areFormDataObjIdentical (different keys)', () => {
     expect(areFormDataObjIdentical(a, b)).toBe(false)
 })
 
+test('areFormDataObjIdentical (nested identical objects)', () => {
+    const a = { nested: { a: '1', b: true } }
+    const b = { nested: { a: '1', b: true } }
+    expect(areFormDataObjIdentical(a, b)).toBe(true)
+})
+
+test('areFormDataObjIdentical (nested different values)', () => {
+    const a = { nested: { a: '1' } }
+    const b = { nested: { a: '2' } }
+    expect(areFormDataObjIdentical(a, b)).toBe(false)
+})
+
+test('areFormDataObjIdentical (nested different structure)', () => {
+    const a = { nested: { a: '1' } }
+    const b = { nested: { b: '1' } }
+    expect(areFormDataObjIdentical(a, b)).toBe(false)
+})
+
+test('areFormDataObjIdentical (deeply nested objects)', () => {
+    const a = { level1: { level2: { value: 'test' } } }
+    const b = { level1: { level2: { value: 'test' } } }
+    expect(areFormDataObjIdentical(a, b)).toBe(true)
+})
+
+test('areFormDataObjIdentical (arrays of nested objects)', () => {
+    const a = { items: [{ id: 1 }, { id: 2 }] }
+    const b = { items: [{ id: 1 }, { id: 2 }] }
+    expect(areFormDataObjIdentical(a, b)).toBe(true)
+})
+
+test('areFormDataObjIdentical (arrays of nested objects different)', () => {
+    const a = { items: [{ id: 1 }, { id: 2 }] }
+    const b = { items: [{ id: 1 }, { id: 3 }] }
+    expect(areFormDataObjIdentical(a, b)).toBe(false)
+})
+
+test('areFormDataObjIdentical (mixed nested structures)', () => {
+    const a = {
+        simple: 'value',
+        nested: {
+            array: ['1', '2', '3'],
+            deep: { flag: true },
+        },
+    }
+    const b = {
+        simple: 'value',
+        nested: {
+            array: ['1', '2', '3'],
+            deep: { flag: true },
+        },
+    }
+    expect(areFormDataObjIdentical(a, b)).toBe(true)
+})
+
 test('hasEditableElements (editable input)', () => {
     const elements = [
         {
diff --git a/frontend/src/composables/question/elements/index.ts b/frontend/src/composables/question/elements/index.ts
index 5598b7c6..646b33d2 100644
--- a/frontend/src/composables/question/elements/index.ts
+++ b/frontend/src/composables/question/elements/index.ts
@@ -5,9 +5,10 @@
  */
 
 export { default as useAriaDescribedBy } from './useAriaDescribedBy'
-export { default as useCommon } from './useCommon'
 export { default as useConditions } from './useConditions'
 export { default as useHelp } from './useHelp'
+export { default as useId } from './useId'
 export { default as useIsDisabled } from './useIsDisabled'
 export { default as useModel } from './useModel'
+export { default as usePath } from './usePath'
 export { default as useValidation } from './useValidation'
diff --git a/frontend/src/composables/question/elements/useCommon.ts b/frontend/src/composables/question/elements/useCommon.ts
deleted file mode 100644
index fa2b8bce..00000000
--- a/frontend/src/composables/question/elements/useCommon.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * This file is part of the QuestionPy SDK. (https://questionpy.org)
- * The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
- * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
- */
-
-import { computed, type ComputedRef } from 'vue'
-
-import { getElementName } from '@/composables/question/formDataUtils'
-import type { FormElement } from '@/types'
-
-/**
- * A composable providing common values to options form elements.
- *
- * @param pathPrefix The parent's path of the form element.
- * @param element The form element definition object.
- *
- * @returns An object containing `id`, `name` and `path` for the form element.
- */
-function useCommon(pathPrefix: string[], element: FormElement): UseCommonReturn {
-    const path = computed(() => [...pathPrefix, element.name])
-    const name = computed(() => getElementName(path.value))
-    const id = computed(() => `options_${name.value}`)
-
-    return { id, name, path }
-}
-
-interface UseCommonReturn {
-    /** `id` attribute. */
-    id: ComputedRef<string>
-    /** `name` attribute. */
-    name: ComputedRef<string>
-    /** Element path inside options form definition. */
-    path: ComputedRef<string[]>
-}
-
-export default useCommon
diff --git a/frontend/src/composables/question/elements/useConditions.ts b/frontend/src/composables/question/elements/useConditions.ts
index 78c8c5b5..5dd88e3f 100644
--- a/frontend/src/composables/question/elements/useConditions.ts
+++ b/frontend/src/composables/question/elements/useConditions.ts
@@ -4,23 +4,28 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
-import { type Ref, ref, watchEffect } from 'vue'
+import { ref, watch } from 'vue'
+import type { Ref } from 'vue'
 
 import { useFormDataState } from '@/composables/question'
-import { getElementName } from '@/composables/question/formDataUtils'
 import { assertNever } from '@/types'
-import type { CanHaveConditions, Condition, OptionsFormData } from '@/types'
+import type { UseFormDataStateReturn } from '@/composables/question/useFormDataState'
+import type { CanHaveConditions, Condition, ElementPath } from '@/types'
 
 /**
  * Evaluates whether a given condition is met based on form data and a base path.
  *
  * @param cond The condition to evaluate (see `questionpy.form` Python module for a detailed description).
  * @param basePath The base path used as a starting point for relative references.
- * @param formData The form data object to check against the condition.
+ * @param getValue The form data value getter.
  *
  * @returns Returns true if the condition is satisfied, false otherwise.
  */
-function isConditionTrue(cond: Condition, basePath: string[], formData: OptionsFormData): boolean {
+function isConditionTrue(
+    cond: Condition,
+    basePath: ElementPath,
+    getValue: UseFormDataStateReturn['getValue'],
+): boolean {
     const nameParts = cond.name.replace(/\]/g, '').split('[')
 
     // Resolve condition's target name
@@ -32,10 +37,11 @@ function isConditionTrue(cond: Condition, basePath: string[], formData: OptionsF
             refPath.push(part)
         }
     }
-    const refValue = formData[getElementName(refPath)]
+
+    const refValue = getValue(refPath)
 
     if (refValue === undefined) {
-        return false
+        throw new Error(`Invalid condition detected: ${cond.name}`)
     }
 
     switch (cond.kind) {
@@ -67,21 +73,32 @@ function isConditionTrue(cond: Condition, basePath: string[], formData: OptionsF
  *
  * @returns An object containing `isDisabledByCond` and `isHiddenByCond`.
  */
-function useConditions(pathPrefix: string[], element: CanHaveConditions): UseConditionsReturn {
-    const { formData } = useFormDataState()
+function useConditions<T extends CanHaveConditions>(pathPrefix: ElementPath, element: T): UseConditionsReturn {
+    const { formData, getValue } = useFormDataState()
 
     // State of conditions
     const isHiddenByCond = ref(false)
     const isDisabledByCond = ref(false)
 
+    const isRepetition = typeof pathPrefix[pathPrefix.length - 1] === 'number'
+
+    // For elements inside repetitions, the reference is relative to the repetition when accessing parent element
+    //  -> remove last number part
+    const basePath = (cond: Condition) =>
+        cond.name.startsWith('..') && isRepetition ? pathPrefix.slice(0, -1) : pathPrefix
+
     // Predicate that tests a single condition
-    const predicate = (cond: Condition) => isConditionTrue(cond, pathPrefix, formData.value)
+    const predicate = (cond: Condition) => isConditionTrue(cond, basePath(cond), getValue)
 
     // Update condition state based on `formData` updates
-    watchEffect(() => {
-        isHiddenByCond.value = element.hide_if.some(predicate)
-        isDisabledByCond.value = element.disable_if.some(predicate)
-    })
+    watch(
+        formData.value,
+        () => {
+            isHiddenByCond.value = element.hide_if.some(predicate)
+            isDisabledByCond.value = element.disable_if.some(predicate)
+        },
+        { immediate: true },
+    )
 
     return { isDisabledByCond, isHiddenByCond }
 }
diff --git a/frontend/src/composables/question/elements/useHelp.ts b/frontend/src/composables/question/elements/useHelp.ts
index 25abd885..14191db1 100644
--- a/frontend/src/composables/question/elements/useHelp.ts
+++ b/frontend/src/composables/question/elements/useHelp.ts
@@ -6,9 +6,10 @@
 
 import { computed, type ComputedRef } from 'vue'
 
-import type { CanHaveHelp } from '@/types'
+import type { CanHaveHelp, ElementPath } from '@/types'
 
-import useCommon from './useCommon'
+import useId from './useId'
+import usePath from './usePath'
 
 /**
  * A composable providing help texts to options form elements.
@@ -18,8 +19,9 @@ import useCommon from './useCommon'
  *
  * @returns An object containing `helpId` and `helpText` for the form element.
  */
-function useHelp(pathPrefix: string[], element: CanHaveHelp): UseHelpReturn {
-    const { id: elementId } = useCommon(pathPrefix, element)
+function useHelp(pathPrefix: ElementPath, element: CanHaveHelp): UseHelpReturn {
+    const path = usePath(pathPrefix, element)
+    const elementId = useId(path)
     const hasHelp = computed(() => (element.help ?? '').length > 0)
 
     return {
diff --git a/frontend/src/composables/question/elements/useId.ts b/frontend/src/composables/question/elements/useId.ts
new file mode 100644
index 00000000..33b53f5c
--- /dev/null
+++ b/frontend/src/composables/question/elements/useId.ts
@@ -0,0 +1,23 @@
+/*
+ * This file is part of the QuestionPy SDK. (https://questionpy.org)
+ * The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
+ * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
+ */
+
+import { computed, toValue } from 'vue'
+import type { ComputedRef, MaybeRef } from 'vue'
+
+import type { ElementPath } from '@/types'
+
+/**
+ * A composable providing the id attribute value for form elements.
+ *
+ * @param path The form element's path inside the options form definition.
+ *
+ * @returns The HTML `id` for the form element.
+ */
+function useId(path: MaybeRef<ElementPath>): ComputedRef<string> {
+    return computed(() => `options_input.${toValue(path).join('.')}`)
+}
+
+export default useId
diff --git a/frontend/src/composables/question/elements/useIsDisabled.ts b/frontend/src/composables/question/elements/useIsDisabled.ts
index be13710a..6b3b44a5 100644
--- a/frontend/src/composables/question/elements/useIsDisabled.ts
+++ b/frontend/src/composables/question/elements/useIsDisabled.ts
@@ -5,8 +5,8 @@
  */
 
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-import type { ComputedRef, Ref } from 'vue'
+import { computed, toValue } from 'vue'
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
 
 import { useFormDataState } from '@/composables/question'
 import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
@@ -14,17 +14,15 @@ import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
 /**
  * A composable providing a disabled state to options form elements.
  *
- * The element is considered disabled if the underlying store is currently saving or the parameter `disabled` is true.
+ * The element is considered disabled if the underlying store is currently busy or the parameter `disabled` is true.
  *
  * @param disabled The general disabled state of the form element.
- *
  * @returns `true` if form element should be disabled, otherwise `false`.
  */
-function useIsDisabled(disabled: Ref<boolean>): ComputedRef<boolean> {
+function useIsDisabled(disabled: MaybeRefOrGetter<boolean> = false): ComputedRef<boolean> {
     const { isSaving } = useFormDataState()
     const { hasPendingOperations } = storeToRefs(usePendingOperationsStore())
-
-    return computed(() => hasPendingOperations.value || isSaving.value || disabled.value)
+    return computed(() => hasPendingOperations.value || isSaving.value || toValue(disabled))
 }
 
 export default useIsDisabled
diff --git a/frontend/src/composables/question/elements/useModel.ts b/frontend/src/composables/question/elements/useModel.ts
index a6de5a03..5c63f6e2 100644
--- a/frontend/src/composables/question/elements/useModel.ts
+++ b/frontend/src/composables/question/elements/useModel.ts
@@ -7,31 +7,32 @@
 import { computed, type WritableComputedRef } from 'vue'
 
 import { useFormDataState } from '@/composables/question'
-import type { ElementToValue, FormElement } from '@/types'
+import type { ElementPath, ElementToValue, FormElement } from '@/types'
 
-import useCommon from './useCommon'
+import usePath from './usePath'
 
 /**
  * A composable providing a two-way data binding model to options form elements.
  *
  * The model is backed by the {@link useFormDataState} composable.
  *
+ * @template T The `FormElement` type determining the model type.
  * @param pathPrefix The parent's path of the form element.
  * @param element The form element definition object.
  *
  * @returns A data model that can be used with options form elements.
  */
 function useModel<T extends FormElement>(
-    pathPrefix: string[],
+    pathPrefix: ElementPath,
     element: T,
 ): WritableComputedRef<ElementToValue<T> | undefined, ElementToValue<T>> {
-    const { name } = useCommon(pathPrefix, element)
+    const path = usePath(pathPrefix, element)
     const { getValue, setValue } = useFormDataState()
 
     return computed({
-        get: () => getValue<ElementToValue<T>>(name.value),
+        get: () => getValue<ElementToValue<T>>(path.value),
         set: (value: ElementToValue<T>) => {
-            setValue(name.value, value)
+            setValue(path.value, value)
         },
     })
 }
diff --git a/frontend/src/composables/question/elements/usePath.ts b/frontend/src/composables/question/elements/usePath.ts
new file mode 100644
index 00000000..19e62ff0
--- /dev/null
+++ b/frontend/src/composables/question/elements/usePath.ts
@@ -0,0 +1,23 @@
+/*
+ * This file is part of the QuestionPy SDK. (https://questionpy.org)
+ * The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
+ * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
+ */
+
+import { computed, type ComputedRef } from 'vue'
+
+import type { ElementPath, FormElement } from '@/types'
+
+/**
+ * A composable providing the child path value for form elements constructed from the parent's path.
+ *
+ * @param pathPrefix The parent's path of the form element.
+ * @param element The form element definition object.
+ *
+ * @returns Element path inside options form definition.
+ */
+function usePath(pathPrefix: ElementPath, element: FormElement): ComputedRef<ElementPath> {
+    return computed(() => [...pathPrefix, element.name])
+}
+
+export default usePath
diff --git a/frontend/src/composables/question/elements/useValidation.ts b/frontend/src/composables/question/elements/useValidation.ts
index 806faf06..9115aeaa 100644
--- a/frontend/src/composables/question/elements/useValidation.ts
+++ b/frontend/src/composables/question/elements/useValidation.ts
@@ -4,45 +4,28 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
-import { computed, type ComputedRef } from 'vue'
+import { computed, toValue } from 'vue'
+import type { ComputedRef, MaybeRef } from 'vue'
 
 import { useFormDataState } from '@/composables/question'
-import type { FormElement } from '@/types'
-
-import useCommon from './useCommon'
+import { getErrorKey } from '@/composables/question/formDataUtils'
+import type { ElementPath, ValidationInfo } from '@/types'
 
 /**
  * A composable providing validation feedback text and state for options form elements.
  *
- * @param pathPrefix The parent's path of the form element.
- * @param element The form element definition object.
+ * @param path The element's path.
  *
- * @returns An object containing `validationId`, `validationState` and `validationText` for the form element.
+ * @returns An object containing the validation state and text for the form element.
  */
-function useValidation(pathPrefix: string[], element: FormElement): UseValidationReturn {
-    const { id: elementId, path } = useCommon(pathPrefix, element)
-    const { getFeedback } = useFormDataState()
-
-    const text = computed(() => getFeedback(path.value))
-
-    return {
-        validationId: computed(() => (text.value ? `${elementId.value}___feedback` : undefined)),
-        validationState: computed(() => (text.value ? false : null)),
-        validationText: text,
-    }
-}
-
-interface UseValidationReturn {
-    /** `id` attribute for the validation element. */
-    validationId: ComputedRef<string | undefined>
-    /**
-     * Validation state.
-     *
-     * See {@link https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs/components/form-group.html#validation-state-feedback|BootstrapVueNext docs}
-     */
-    validationState: ComputedRef<false | null>
-    /** Validation feedback text. */
-    validationText: ComputedRef<string | undefined>
+function useValidation(path: MaybeRef<ElementPath>): ComputedRef<ValidationInfo> {
+    const { formErrors } = useFormDataState()
+
+    return computed(() => {
+        const text = formErrors.value[getErrorKey(toValue(path))]
+        const state = text ? false : null
+        return { state, text }
+    })
 }
 
 export default useValidation
diff --git a/frontend/src/composables/question/formDataUtils.ts b/frontend/src/composables/question/formDataUtils.ts
index 2f0c1a6b..4a6e1460 100644
--- a/frontend/src/composables/question/formDataUtils.ts
+++ b/frontend/src/composables/question/formDataUtils.ts
@@ -6,25 +6,16 @@
 
 import { v4 as uuidv4 } from 'uuid'
 
-import { assertNever, hasElements, isEditableElement } from '@/types'
-import type { FormElement, OptionsFormData, OptionsFormDefinition } from '@/types'
-
-/**
- * Constructs an element name string from an array of path segments.
- *
- * @param path An array of strings representing the path segments.
- * @returns The constructed element name string.
- *
- * **Example:**
- *
- * ```typescript
- * getElementName(['a', 'b', 'c']);
- * // Output: "a[b][c]"
- * ```
- */
-function getElementName(path: string[]): string {
-    return `${path.join('][').replace(']', '')}]`
-}
+import { assertNever, hasElements, isEditableElement, isObject } from '@/types'
+import type {
+    ElementPath,
+    FormElement,
+    OptionsFile,
+    OptionsFormData,
+    OptionsFormDefinition,
+    OptionsFormModelValue,
+    OptionsFormValue,
+} from '@/types'
 
 /**
  * Constructs the error key from an array of path segments.
@@ -32,20 +23,16 @@ function getElementName(path: string[]): string {
  * @param path An array of strings representing the path segments.
  * @returns The constructed error key.
  *
- * **Example:**
- *
- * ```typescript
- * getErrorKey(['general', 'a', '2', 'c']);
+ * @example
+ * getErrorKey(['general', 'a', 1, 'c']);
  * // Output: "a.1.c"
- * ```
  */
-function getErrorKey(path: string[]): string {
+function getErrorKey(path: ElementPath): string {
     return (
         path
             // Remove 'general' prefix
             .slice(path[0] === 'general' ? 1 : 0)
-            // Backend validation uses 0-based index
-            .map((part) => (part.match(/^\d+$/) ? String(Number(part) - 1) : part))
+            .map((part) => (typeof part === 'number' ? String(part) : part))
             .join('.')
     )
 }
@@ -53,67 +40,62 @@ function getErrorKey(path: string[]): string {
 /**
  * Populates a form data object with default values from a list of form elements.
  *
- * Each element's value is assigned to the `data` object using a key derived from the `pathPrefix`.
- *
- * @param data The form data object to be updated with default values.
  * @param elems An array of form elements that is processed recursively.
- * @param pathPrefix An array of strings representing the hierarchical path used to generate keys for the `data` object.
+ * @param data The form data object to be updated with default values (default: empty object).
+ * @return The updated form data.
  */
-function createFormDataValues(data: OptionsFormData, elems: FormElement[], pathPrefix: string[]): void {
+function createFormDataValues(elems: FormElement[], data: OptionsFormModelValue = {}): OptionsFormData {
     for (const elem of elems) {
-        const path = [...pathPrefix, elem.name]
-        const name = getElementName(path)
-
-        // Skip fields that are already populated
-        if (Object.keys(data).some((key) => key.startsWith(name))) {
+        // Skip if already populated
+        if (data[elem.name] !== undefined) {
             continue
         }
 
         switch (elem.kind) {
             case 'checkbox':
-                data[name] = elem.selected
+                data[elem.name] = elem.selected
                 break
 
             case 'select': {
                 if (elem.multiple) {
-                    data[name] = []
-                    for (const { selected, value } of elem.options) {
-                        if (selected) {
-                            data[name].push(value)
-                        }
-                    }
+                    data[elem.name] = elem.options.filter((opt) => opt.selected).map((opt) => opt.value)
                 } else {
-                    data[name] = elem.options.find((opt) => opt.selected)?.value ?? elem.options[0]?.value ?? ''
+                    data[elem.name] = elem.options.find((opt) => opt.selected)?.value ?? elem.options[0]?.value ?? ''
                 }
                 break
             }
 
             case 'input':
             case 'textarea':
-                data[name] = elem.default ?? ''
+                data[elem.name] = elem.default ?? ''
                 break
 
             case 'radio_group':
-                data[name] = elem.options.find((opt) => opt.selected)?.value ?? ''
+                data[elem.name] = elem.options.find((opt) => opt.selected)?.value ?? ''
                 break
 
             case 'hidden':
-                data[name] = elem.value
+                data[elem.name] = elem.value
                 break
 
             case 'id':
-                data[name] = uuidv4()
+                data[elem.name] = uuidv4()
                 break
 
-            case 'group':
-                createFormDataValues(data, elem.elements, path)
+            case 'group': {
+                data[elem.name] = createFormDataValues(elem.elements)
                 break
+            }
 
             case 'repetition': {
                 const count = Math.max(elem.initial_repetitions, elem.minimum_repetitions)
-                for (let i = 1; i <= count; ++i) {
-                    createFormDataValues(data, elem.elements, [...path, i.toString()])
+                const repetitionData: OptionsFormData[] = []
+
+                for (let i = 0; i < count; ++i) {
+                    repetitionData.push(createFormDataValues(elem.elements))
                 }
+
+                data[elem.name] = repetitionData
                 break
             }
 
@@ -130,6 +112,8 @@ function createFormDataValues(data: OptionsFormData, elems: FormElement[], pathP
                 assertNever(elem)
         }
     }
+
+    return data
 }
 
 /**
@@ -140,57 +124,65 @@ function createFormDataValues(data: OptionsFormData, elems: FormElement[], pathP
  * @returns The default form data.
  */
 function getFormData(options: OptionsFormDefinition, initialFormData: OptionsFormData): OptionsFormData {
-    const data: OptionsFormData = { ...initialFormData }
+    // General section elements at the root level
+    const data = createFormDataValues(options.general, { ...initialFormData })
 
-    createFormDataValues(data, options.general, ['general'])
+    // Other sections
     for (const section of options.sections) {
-        createFormDataValues(data, section.elements, [section.name])
+        const sectionElems = (data[section.name] ?? {}) as OptionsFormModelValue
+        data[section.name] = createFormDataValues(section.elements, sectionElems)
     }
 
     return data
 }
 
-/**
- * Checks if two objects are identical.
- *
- * Compares two objects of type `Record<string, string | boolean | string[]>` to determine if they have the same keys
- * and corresponding values. For values that are arrays, the order and content are compared.
- *
- * @param d1 The first object to compare.
- * @param d2 The second object to compare.
- * @returns `true` if both objects are identical, `false` otherwise.
- */
-function areFormDataObjIdentical(d1: OptionsFormData, d2: OptionsFormData): boolean {
-    const keys1 = Object.keys(d1)
-    const keys2 = Object.keys(d2)
+type FormValue = OptionsFormValue | OptionsFile | null
 
-    if (keys1.length !== keys2.length) {
-        return false
+function areFormValuesIdentical(v1?: FormValue, v2?: FormValue): boolean {
+    // Primitive values, null and undefined
+    if (v1 === v2) {
+        return true
     }
 
-    for (const key of keys1) {
-        if (!d2.hasOwnProperty(key)) {
+    // Arrays
+    if (Array.isArray(v1) && Array.isArray(v2)) {
+        if (v1.length !== v2.length) {
             return false
         }
+        return v1.every((item, index) => areFormValuesIdentical(item, v2[index]))
+    }
 
-        const val1 = d1[key]
-        const val2 = d2[key]
+    // Objects
+    if (isObject(v1) && isObject(v2)) {
+        const keys1 = Object.keys(v1)
+        const keys2 = Object.keys(v2)
 
-        if (Array.isArray(val1) && Array.isArray(val2)) {
-            if (val1.length !== val2.length) {
-                return false
-            }
-            for (let i = 0; i < val1.length; i++) {
-                if (val1[i] !== val2[i]) {
-                    return false
-                }
-            }
-        } else if (val1 !== val2) {
+        if (keys1.length !== keys2.length) {
             return false
         }
+
+        return keys1.every(
+            // RichTextEditor includes `[k: string]: unknown` which we don't use though
+            (key) => keys2.includes(key) && areFormValuesIdentical(v1[key] as FormValue, v2[key] as FormValue),
+        )
     }
 
-    return true
+    // Mismatched types
+    return false
+}
+
+/**
+ * Performs deep equality check between two `OptionsFormData` objects.
+ *
+ * Recursively compares all properties, including nested objects and arrays. Array/object comparison requires identical
+ * length, order, and content.
+ *
+ * @param d1 First form data object to compare
+ * @param d2 Second form data object to compare
+ * @returns `true` if objects are deeply equal, `false` otherwise
+ */
+function areFormDataObjIdentical(d1: OptionsFormData, d2: OptionsFormData): boolean {
+    return areFormValuesIdentical(d1, d2)
 }
 
 /**
@@ -210,4 +202,4 @@ function hasEditableElements(elements: FormElement[]): boolean {
     return false
 }
 
-export { areFormDataObjIdentical, createFormDataValues, getElementName, getErrorKey, getFormData, hasEditableElements }
+export { areFormDataObjIdentical, createFormDataValues, getErrorKey, getFormData, hasEditableElements }
diff --git a/frontend/src/composables/question/useFormDataState.ts b/frontend/src/composables/question/useFormDataState.ts
index a2971a6b..386faa29 100644
--- a/frontend/src/composables/question/useFormDataState.ts
+++ b/frontend/src/composables/question/useFormDataState.ts
@@ -9,7 +9,14 @@ import type { ComputedRef, InjectionKey, Ref, ShallowRef } from 'vue'
 
 import { useOptionsFormDataQuery, useOptionsFormDefinitionQuery, usePostOptionsFormDataMutation } from '@/queries'
 import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
-import type { OptionsFormData, OptionsFormDefinition, OptionsFormValue, ServerValidationErrors } from '@/types'
+import { isObject } from '@/types'
+import type {
+    ElementPath,
+    OptionsFormData,
+    OptionsFormDefinition,
+    OptionsFormValue,
+    ServerValidationErrors,
+} from '@/types'
 
 import { areFormDataObjIdentical, getErrorKey, getFormData, hasEditableElements } from './formDataUtils'
 
@@ -64,7 +71,7 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
                 // Restore form data and populate with default values
                 formDataCurrent.value = getFormData(formDefinition.value, formDataRemote.value.data)
                 // Remember clean form state
-                formDataClean.value = structuredClone(toRaw(formDataCurrent.value))
+                formDataClean.value = window.structuredClone(toRaw(formDataCurrent.value))
             }
         },
         {
@@ -115,7 +122,7 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
             removeOperation(operation)
         }
 
-        formDataClean.value = structuredClone(rawFormData)
+        formDataClean.value = window.structuredClone(rawFormData)
         mutationState.value.error = null
         await formDataRefresh()
 
@@ -123,21 +130,58 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
     }
 
     function reset(): void {
-        formDataCurrent.value = structuredClone(toRaw(formDataClean.value))
+        formDataCurrent.value = window.structuredClone(toRaw(formDataClean.value))
     }
 
-    function getValue<T extends OptionsFormValue>(name: string): T | undefined {
-        if (name in formDataCurrent.value) {
-            return formDataCurrent.value[name] as T
+    function navigateToNestedProperty(path: ElementPath) {
+        // Adjust path: the general section elements are at the root
+        const adjustedPath = path[0] === 'general' ? path.slice(1) : path
+
+        let current: unknown = formDataCurrent.value
+        for (const key of adjustedPath) {
+            if (isObject(current) && typeof key === 'string') {
+                current = current[key]
+                continue
+            } else if (Array.isArray(current) && typeof key === 'number') {
+                current = current[key]
+                continue
+            }
+            return undefined
         }
+
+        return current
+    }
+
+    function getValue<T extends OptionsFormValue>(path: ElementPath): T | undefined {
+        return navigateToNestedProperty(path) as T
     }
 
-    function setValue(name: string, value: OptionsFormValue): void {
-        formDataCurrent.value[name] = value
+    function setValue(path: ElementPath, value: OptionsFormValue): void {
+        // Navigate to the parent of the target property
+        const parentPath = path.slice(0, -1)
+        const parent = navigateToNestedProperty(parentPath)
+
+        // Set value
+        const targetKey = path[path.length - 1]
+        if (isObject(parent) && typeof targetKey === 'string') {
+            parent[targetKey] = value
+        } else if (Array.isArray(parent) && typeof targetKey === 'number') {
+            parent[targetKey] = value
+        } else {
+            throw TypeError('Expected array or object in form data')
+        }
+
+        // Remove validation errors after edit
+        resetFeedback(path)
     }
 
-    function getFeedback(path: string[]): string | undefined {
-        return formErrors.value[getErrorKey(path)]
+    function resetFeedback(path: ElementPath): void {
+        const errorKey = getErrorKey(path)
+        for (const key of Object.keys(formErrors.value)) {
+            if (key.startsWith(errorKey)) {
+                delete formErrors.value[key]
+            }
+        }
     }
 
     const formDataState = {
@@ -158,7 +202,7 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
         reset,
         getValue,
         setValue,
-        getFeedback,
+        resetFeedback,
     }
 
     // Provide form data to child components
@@ -232,27 +276,27 @@ interface UseFormDataStateReturn {
     /**
      * Retrieves a value from the form data object.
      *
-     * @param name The name representing the input field, e.g. `general[first_name]`.
-     * @returns The value found at the specified name in the `formData` object, or `undefined` otherwise.
+     * @param path The element path representing the input field.
+     * @returns The value found at the specified `path` in the `formData` object, or `undefined` otherwise.
      */
-    getValue<T extends OptionsFormValue>(name: string): T | undefined
+    getValue<T extends OptionsFormValue>(path: ElementPath): T | undefined
 
     /**
      * Sets a value on the form data object.
      *
-     * @param name The name representing the input field, e.g. `general[first_name]`.
+     * @param path The element path representing the input field.
      * @param value The value to set at the specified name.
      */
-    setValue(name: string, value: OptionsFormValue): void
+    setValue(path: ElementPath, value: OptionsFormValue): void
 
     /**
-     * Retrieves the validation feedback text of a form element.
+     * Resets the validation feedback text of a form element and all its children.
      *
      * @param path The path representing the element.
-     * @returns The validation feedback text or `undefined`.
      */
-    getFeedback(path: string[]): string | undefined
+    resetFeedback(path: ElementPath): void
 }
 
+export type { UseFormDataStateReturn }
 export { provideFormDataState }
 export default useFormDataState
diff --git a/frontend/src/composables/question/useRepetitions.ts b/frontend/src/composables/question/useRepetitions.ts
index 19e37451..b9e1780c 100644
--- a/frontend/src/composables/question/useRepetitions.ts
+++ b/frontend/src/composables/question/useRepetitions.ts
@@ -4,94 +4,53 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
-import { useFormDataState } from '@/composables/question'
-import type { FormElement } from '@/types'
+import { computed, type ComputedRef, toRaw } from 'vue'
 
-import { createFormDataValues, getElementName, getErrorKey } from './formDataUtils'
+import type { ElementPath, RepetitionElement } from '@/types'
+
+import { useModel } from './elements'
+import { createFormDataValues } from './formDataUtils'
 
 /**
  * Provides management for form repetitions.
  *
- * @param path The path representing the repetition element.
- * @returns Repetition management methods.
+ * @param pathPrefix The parent's path of the repetition element.
+ * @param element The repetition element.
+ * @returns An object with repetition count and management methods.
  */
-function useRepetitions(path: string[]) {
-    const { formData, formErrors } = useFormDataState()
-
-    /**
-     * Gets number of repetitions for a repetition element.
-     *
-     * @returns The number of repetitions.
-     */
-    function getRepetitionCount(): number {
-        // There's no explicit value in the data model, so we need to derive it from the form data.
-        const re = new RegExp(`^${RegExp.escape(getElementName(path))}\\[(\\d+)\\]`)
-        let highest = 0
-        for (const elName of Object.keys(formData.value)) {
-            const match = re.exec(elName)
-            if (match) {
-                highest = Math.max(highest, Number(match[1]))
-            }
-        }
-        return highest
+function useRepetitions(pathPrefix: ElementPath, element: RepetitionElement): UseRepetitionsReturn {
+    const model = useModel(pathPrefix, element)
+
+    return {
+        count: computed(() =>
+            // Enforce initial/minimal repetition count
+            Math.max(model.value?.length ?? 0, element.initial_repetitions, element.minimum_repetitions),
+        ),
+
+        add() {
+            const rawOldValue = toRaw(model.value) ?? [] // Avoid nested proxy objects
+            model.value = [...rawOldValue, createFormDataValues(element.elements)]
+        },
+
+        remove(idx: number): void {
+            model.value?.splice(idx, 1)
+        },
     }
+}
 
-    /**
-     * Adds another repetition to a repetition element.
-     *
-     * @param elements The repetition element's child elements.
-     */
-    function addRepetition(elements: FormElement[]): void {
-        const count = getRepetitionCount() + 1
-        createFormDataValues(formData.value, elements, [...path, count.toString()])
-    }
+interface UseRepetitionsReturn {
+    /** Repetition count. */
+    count: ComputedRef<number>
+
+    /** Adds a new repetition. */
+    add: () => void
 
     /**
-     * Removes a repetition from a repetition element.
+     * Removes a repetition.
      *
-     * @param path The path representing the repetition element.
-     * @param num The repetition number to be removed.
+     * @param idx The index of the repetition to remove.
      */
-    function removeRepetition(num: number): void {
-        const count = getRepetitionCount()
-        const repName = getElementName(path)
-
-        // Delete repetition values...
-        let repNameWithNum = `${repName}[${num}]`
-        for (const name of Object.keys(formData.value)) {
-            if (name.startsWith(repNameWithNum)) {
-                delete formData.value[name]
-            }
-        }
-
-        let errKey = getErrorKey([...path, String(num)])
-        for (const key of Object.keys(formErrors.value)) {
-            if (key.startsWith(errKey)) {
-                delete formErrors.value[key]
-            }
-        }
-
-        // ...and shift all subsequent by one.
-        for (let i = num + 1; i <= count; ++i) {
-            repNameWithNum = `${repName}[${i}]`
-            for (const [name, value] of Object.entries(formData.value)) {
-                if (name.startsWith(repNameWithNum)) {
-                    formData.value[name.replace(repNameWithNum, `${repName}[${i - 1}]`)] = value
-                    delete formData.value[name]
-                }
-            }
-
-            errKey = getErrorKey([...path, String(i)])
-            for (const [key, value] of Object.entries(formErrors.value)) {
-                if (key.startsWith(errKey)) {
-                    formErrors.value[key.replace(errKey, getErrorKey([...path, String(i - 1)]))] = value
-                    delete formErrors.value[key]
-                }
-            }
-        }
-    }
-
-    return { addRepetition, getRepetitionCount, removeRepetition }
+    remove: (idx: number) => void
 }
 
 export default useRepetitions
diff --git a/frontend/src/types/OptionsStateResponse.generated.ts b/frontend/src/types/OptionsStateResponse.generated.ts
index 839ad7d6..78e86e83 100644
--- a/frontend/src/types/OptionsStateResponse.generated.ts
+++ b/frontend/src/types/OptionsStateResponse.generated.ts
@@ -7,7 +7,8 @@
 // This file was automatically generated by generate-ts-types.py.
 // DO NOT MODIFY IT BY HAND. Instead, modify the source Pydantic models, and regenerate this file.
 
-export type OptionsFormDataValue = string | number | boolean | string[] | null
+export type OptionsFormValue = OptionsFormBaseValue | OptionsFormModelValue | OptionsFormModelValue[]
+export type OptionsFormBaseValue = string | number | boolean | string[] | OptionsFile[] | RichTextEditor | null
 
 /**
  * Represents the API response data for the question's options state.
@@ -23,5 +24,35 @@ export interface OptionsStateResponse {
  * The question's options form data.
  */
 export interface OptionsFormData {
-    [k: string]: OptionsFormDataValue
+    [k: string]: OptionsFormValue
+}
+/**
+ * Metadata about a file uploaded in question options.
+ *
+ * The file content is stored by the LMS and can be retrieved using the
+ * [`file_ref`][questionpy.form.OptionsFile.file_ref] or embedded in the question using
+ * [`uri`][questionpy.form.OptionsFile.uri]. The filename can be freely changed without informing the LMS.
+ *
+ * See Also:
+ *     - [questionpy.form.rich_text_editor][]
+ *     - [questionpy.form.file_upload][]
+ */
+export interface OptionsFile {
+    path: string
+    filename: string
+    file_ref: string
+    uploaded_at: string
+    mime_type: string
+    size: number
+}
+/**
+ * The form data generated by a [questionpy.form.rich_text_editor][] element.
+ */
+export interface RichTextEditor {
+    text: string
+    files: OptionsFile[]
+    [k: string]: unknown
+}
+export interface OptionsFormModelValue {
+    [k: string]: OptionsFormValue
 }
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index cf2710b3..64fc92b7 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -4,6 +4,8 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
+import type { ValidationState } from 'bootstrap-vue-next'
+
 import type {
     CheckboxElement,
     Condition,
@@ -19,7 +21,13 @@ import type {
     TextAreaElement,
     TextInputElement,
 } from './OptionsFormDefinition.generated'
-import type { OptionsFormData, OptionsStateResponse } from './OptionsStateResponse.generated'
+import type {
+    OptionsFile,
+    OptionsFormData,
+    OptionsFormModelValue,
+    OptionsFormValue,
+    OptionsStateResponse,
+} from './OptionsStateResponse.generated'
 
 /** Mapping of form element `kind` types to their corresponding value types. */
 interface ElementValueMap {
@@ -27,6 +35,7 @@ interface ElementValueMap {
     textarea: string
     checkbox: boolean
     radio_group: string
+    repetition: OptionsFormModelValue[]
     select: string | string[]
     hidden: string
     id: string
@@ -58,8 +67,25 @@ type CanHaveConditions = Extract<FormElement, { disable_if: Condition[]; hide_if
 /** Form element that can have help. */
 type CanHaveHelp = Extract<FormElement, { help: string | null }>
 
-/** Possible primitive and list value types allowed in the options form. */
-type OptionsFormValue = OptionsFormData[string]
+/**
+ * An array of strings/integers representing the hierarchical path of a `FormElement`.
+ *
+ * @example
+ * [general', 'my_repetition', 0, 'name', 'first_name']
+ */
+type ElementPath = (string | number)[]
+
+/** Validation state and text of an options form input. */
+interface ValidationInfo {
+    /**
+     * Validation state.
+     *
+     * See {@link https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs/components/form-group.html#validation-state-feedback|BootstrapVueNext docs}
+     */
+    state: ValidationState
+    /** Validation feedback text. */
+    text: string | undefined
+}
 
 export type {
     AttemptData,
@@ -80,14 +106,17 @@ export type {
     CheckboxElement,
     Condition,
     EditableElement,
+    ElementPath,
     ElementToValue,
     FormElement,
     GeneratedIdElement,
     GroupElement,
     HasElements,
     HiddenElement,
+    OptionsFile,
     OptionsFormData,
     OptionsFormDefinition,
+    OptionsFormModelValue,
     OptionsFormValue,
     OptionsStateResponse,
     RadioGroupElement,
@@ -97,4 +126,5 @@ export type {
     StaticTextElement,
     TextAreaElement,
     TextInputElement,
+    ValidationInfo,
 }
diff --git a/frontend/src/types/typeUtils.ts b/frontend/src/types/typeUtils.ts
index c961b0e4..ea089eb2 100644
--- a/frontend/src/types/typeUtils.ts
+++ b/frontend/src/types/typeUtils.ts
@@ -4,7 +4,14 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
-import type { DetailedServerError, EditableElement, FormElement, HasElements } from '.'
+import type {
+    DetailedServerError,
+    EditableElement,
+    FormElement,
+    HasElements,
+    OptionsFile,
+    ServerValidationErrors,
+} from '.'
 
 /** Utility function to be used as exhaustion check. */
 function assertNever(value: never): never {
@@ -35,4 +42,26 @@ function isDetailedServerError(value: unknown): value is DetailedServerError {
     )
 }
 
-export { assertNever, hasElements, isDetailedServerError, isEditableElement, isObject }
+/** Type guard for `ServerValidationErrors`. */
+function isServerValidationErrors(value: unknown): value is ServerValidationErrors {
+    return (
+        isObject(value) &&
+        Object.keys(value).every((key) => typeof key === 'string') &&
+        Object.values(value).every((v) => typeof v === 'string')
+    )
+}
+
+/** Type guard for `OptionsFile`. */
+function isOptionsFile(value: unknown): value is OptionsFile {
+    return isObject(value) && typeof value.file_ref === 'string'
+}
+
+export {
+    assertNever,
+    hasElements,
+    isDetailedServerError,
+    isEditableElement,
+    isObject,
+    isOptionsFile,
+    isServerValidationErrors,
+}
diff --git a/generate-ts-types.py b/generate-ts-types.py
index a3dd0ff4..0e6f0e62 100755
--- a/generate-ts-types.py
+++ b/generate-ts-types.py
@@ -19,7 +19,7 @@
 from questionpy_sdk.webserver.controllers.attempt.data import AttemptRenderData
 from questionpy_sdk.webserver.controllers.attempt.errors import ErrorSectionKey
 from questionpy_sdk.webserver.controllers.attempt.question_ui import ClientQuestionDisplayOptions
-from questionpy_sdk.webserver.controllers.question.controller import OptionsStateResponse
+from questionpy_sdk.webserver.controllers.question import OptionsStateResponse
 from questionpy_sdk.webserver.errors import DetailedServerError
 
 logging.basicConfig(level=logging.INFO, format="")
diff --git a/questionpy_sdk/webserver/controllers/question/controller.py b/questionpy_sdk/webserver/controllers/question.py
similarity index 75%
rename from questionpy_sdk/webserver/controllers/question/controller.py
rename to questionpy_sdk/webserver/controllers/question.py
index c8f0c7de..2c9b44bb 100644
--- a/questionpy_sdk/webserver/controllers/question/controller.py
+++ b/questionpy_sdk/webserver/controllers/question.py
@@ -2,15 +2,30 @@
 #  The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
 #  (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
 
+from collections.abc import Mapping
+from typing import cast
+
 from pydantic import ConfigDict
 from pydantic.dataclasses import dataclass
 
 import questionpy_sdk.webserver.errors as webserver_errors
+from questionpy.form import OptionsFile, RichTextEditor
 from questionpy_common.api.qtype import InvalidQuestionStateError
 from questionpy_common.elements import OptionsFormDefinition
 from questionpy_sdk.webserver.constants import DEFAULT_REQUEST_INFO
 from questionpy_sdk.webserver.controllers.base import BaseController
-from questionpy_sdk.webserver.controllers.question._form_data import OptionsFormData, flatten_form_data, parse_form_data
+
+type OptionsFormBaseValue = str | int | float | bool | list[str] | list[OptionsFile] | RichTextEditor | None
+"""Union of supported form value types (w/o nested)."""
+
+type OptionsFormModelValue = Mapping[str, OptionsFormValue]
+"""Form value type for elements that support nested `FormModel`, like `group`, `section`, etc."""
+
+type OptionsFormValue = OptionsFormBaseValue | OptionsFormModelValue | list[OptionsFormModelValue]
+"""Union of all form value types."""
+
+type OptionsFormData = Mapping[str, OptionsFormValue]
+"""Root form data type."""
 
 
 @dataclass(config=ConfigDict(use_attribute_docstrings=True))
@@ -45,15 +60,13 @@ async def get_questions(self) -> dict[str, OptionsFormData | webserver_errors.De
                 for question_id in states_str:
                     state = states_str[question_id]
                     try:
-                        form_definition, form_data = await worker.get_options_form(DEFAULT_REQUEST_INFO, state)
+                        _, form_data = await worker.get_options_form(DEFAULT_REQUEST_INFO, state)
                     except InvalidQuestionStateError as err:
                         states[question_id] = webserver_errors.DetailedServerError(
                             type(err).__name__, webserver_errors.format_error(err)
                         )
                     else:
-                        section_names = self._section_names_from_definition(form_definition)
-                        flat_form_data = flatten_form_data(form_data, section_names)
-                        states[question_id] = flat_form_data
+                        states[question_id] = cast("OptionsFormData", form_data)
 
         return states
 
@@ -66,16 +79,11 @@ async def get_options_state(self, question_id: str) -> OptionsStateResponse:
             is_new = True
 
         async with self.get_worker() as worker:
-            form_definition, form_data = await worker.get_options_form(DEFAULT_REQUEST_INFO, state)
-
-        return OptionsStateResponse(
-            data=flatten_form_data(form_data, self._section_names_from_definition(form_definition)),
-            is_new=is_new,
-        )
+            _, form_data = await worker.get_options_form(DEFAULT_REQUEST_INFO, state)
 
-    async def save_options_state(self, question_id: str, data: OptionsFormData) -> None:
-        form_data = parse_form_data(data)
+        return OptionsStateResponse(data=cast("OptionsFormData", form_data), is_new=is_new)
 
+    async def save_options_state(self, question_id: str, data: dict[str, object]) -> None:
         try:
             old_state = await self._state_manager.read_question_state(question_id)
         except webserver_errors.MissingQuestionStateError:
@@ -83,7 +91,7 @@ async def save_options_state(self, question_id: str, data: OptionsFormData) -> N
 
         async with self.get_worker() as worker:
             question = await worker.create_question_from_options(
-                DEFAULT_REQUEST_INFO, old_state, form_data=form_data, lms_permissions=None
+                DEFAULT_REQUEST_INFO, old_state, form_data=data, lms_permissions=None
             )
 
         await self._state_manager.write_question_state(question_id, question.question_state)
@@ -102,7 +110,3 @@ async def clone_question(self, question_id: str, new_question_id: str) -> None:
 
         state = await self._state_manager.read_question_state(question_id)
         await self._state_manager.write_question_state(new_question_id, state)
-
-    @staticmethod
-    def _section_names_from_definition(form_definition: OptionsFormDefinition) -> list[str]:
-        return [section.name for section in form_definition.sections]
diff --git a/questionpy_sdk/webserver/controllers/question/__init__.py b/questionpy_sdk/webserver/controllers/question/__init__.py
deleted file mode 100644
index 3b9f11af..00000000
--- a/questionpy_sdk/webserver/controllers/question/__init__.py
+++ /dev/null
@@ -1,7 +0,0 @@
-#  This file is part of the QuestionPy SDK. (https://questionpy.org)
-#  The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
-#  (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
-
-from .controller import QuestionController
-
-__all__ = ["QuestionController"]
diff --git a/questionpy_sdk/webserver/controllers/question/_form_data.py b/questionpy_sdk/webserver/controllers/question/_form_data.py
deleted file mode 100644
index 0eac692f..00000000
--- a/questionpy_sdk/webserver/controllers/question/_form_data.py
+++ /dev/null
@@ -1,132 +0,0 @@
-#  This file is part of the QuestionPy SDK. (https://questionpy.org)
-#  The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
-#  (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
-
-import operator
-from collections.abc import Iterable, Mapping
-from typing import Any
-
-type OptionsFormDataValue = str | int | float | bool | list[str] | None
-type OptionsFormData = Mapping[str, OptionsFormDataValue]
-
-
-def _unflatten(flat_form_data: OptionsFormData) -> dict[str, Any]:
-    """Splits the keys of a dictionary to form a new nested dictionary.
-
-    Each key of the input dictionary is a reference string of a FormElements from the Options Form.
-    These strings are split to create a nested dictionary, where each key is one part of the reference.
-    Additionally: Dictionaries with only numerical keys (Repetition Elements) are replaced by lists.
-
-    Examples:
-        >>> _unflatten({
-        ...     "general[my_hidden]": "foo",
-        ...     "general[my_repetition][1][role]": "OPT_1",
-        ...     "general[my_repetition][1][name][first_name]": "John",
-        ... })
-        {'general': {'my_hidden': 'foo', 'my_repetition': [{'role': 'OPT_1', 'name': {'first_name': 'John'}}]}}
-    """
-    unflattened_dict: dict[str, Any] = {}
-    for flat_key, value in flat_form_data.items():
-        key_path = flat_key.replace("]", "").split("[")
-        current_dict = unflattened_dict
-        for key_part in key_path[:-1]:
-            current_dict = current_dict.setdefault(key_part, {})
-        current_dict[key_path[-1]] = value
-
-    result = _convert_repetition_dict_to_list(unflattened_dict)
-    if not isinstance(result, dict):
-        msg = "The result is not a dictionary."
-        raise TypeError(msg)
-
-    return result
-
-
-def _convert_repetition_dict_to_list(dictionary: dict[str, Any]) -> dict[str, Any] | list[Any]:
-    """Recursively transforms a dict with only numerical keys to a list."""
-    if not isinstance(dictionary, dict):
-        return dictionary
-
-    for key, value in dictionary.items():
-        dictionary[key] = _convert_repetition_dict_to_list(value)
-
-    if len(dictionary.keys()) > 0 and all(key.isnumeric() for key in dictionary):
-        # Sort by key (i.e. the index) and put the sorted values into a list.
-        return [value for key, value in sorted(dictionary.items(), key=operator.itemgetter(0))]
-
-    return dictionary
-
-
-def parse_form_data(form_data: OptionsFormData) -> dict[str, Any]:
-    """Parses form data from a flat into a nested dictionary to be consumed by Pydantic.
-
-    This function parses a dictionary, where the keys are the references to the Form Elements from the Options Form.
-    The references are used to create a nested dictionary with the form data. Elements in the 'general' section are
-    moved to the root of the dictionary.
-
-    Args:
-        form_data: The flat dictionary representing the form data.
-
-    Returns:
-        The nested form data.
-
-    Examples:
-        >>> parse_form_data({
-        ...     "general[my_hidden]": "foo",
-        ...     "general[my_repetition][1][role]": "OPT_1",
-        ...     "general[my_repetition][1][name][first_name]": "John",
-        ... })
-        {'my_hidden': 'foo', 'my_repetition': [{'role': 'OPT_1', 'name': {'first_name': 'John'}}]}
-    """
-    unflattened_form_data = _unflatten(form_data)
-    options = unflattened_form_data.get("general", {})
-    for section_name, section in unflattened_form_data.items():
-        if section_name != "general":
-            options[section_name] = section
-    return options
-
-
-def _flatten_value(value: Any, prefix: str, result: dict[str, OptionsFormDataValue]) -> None:
-    # group
-    if isinstance(value, dict):
-        for k, v in value.items():
-            _flatten_value(v, f"{prefix}[{k}]", result)
-
-    # repetition
-    elif isinstance(value, list) and len(value) > 0 and all(isinstance(item, dict) for item in value):
-        for idx, v in enumerate(value, start=1):
-            item_prefix = f"{prefix}[{idx}]"
-            _flatten_value(v, item_prefix, result)
-
-    else:
-        result[prefix] = value
-
-
-def flatten_form_data(form_data: dict[str, Any], section_names: Iterable[str]) -> OptionsFormData:
-    """Flattens form data from a nested dictionary into a flat dictionary to be consumed by the frontend.
-
-    This function flattens a nested dictionary into a flat dictionary, where the keys are references
-    to the Form Elements in the Options Form. Top-level elements are put under the 'general' section,
-    while elements under the given `section_names` are put under their respective sections.
-
-    Args:
-        form_data: The nested dictionary representing the form data.
-        section_names: An iterable of section names that should be treated as sections and not put
-                       under 'general'.
-
-    Returns:
-        The flat form data.
-
-    Examples:
-        >>> flatten_form_data(
-        ...     {
-        ...         "my_hidden": "foo",
-        ...         "my_repetition": [{"input": "foo"}],
-        ...     },
-        ...     section_names=[],
-        ... )
-        {'general[my_hidden]': 'foo', 'general[my_repetition][1][input]': 'foo'}
-    """
-    result: dict[str, OptionsFormDataValue] = {}
-    for key, value in form_data.items():
-        _flatten_value(value, key if key in section_names else f"general[{key}]", result)
-    return result
diff --git a/questionpy_sdk/webserver/routes/question.py b/questionpy_sdk/webserver/routes/question.py
index 37d02002..7faa5713 100644
--- a/questionpy_sdk/webserver/routes/question.py
+++ b/questionpy_sdk/webserver/routes/question.py
@@ -56,7 +56,8 @@ class QuestionStateView(QuestionBaseView):
     async def get(self) -> web.Response:
         """Gets the form data for the Options Form from the state storage."""
         question_id = self.request.match_info["question_id"]
-        return self.json_model_response(RootModel(await self.controller.get_options_state(question_id)))
+        state_response = await self.controller.get_options_state(question_id)
+        return self.json_model_response(RootModel(state_response))
 
     async def post(self) -> web.Response:
         """Stores the form data from the Options Form in the state storage."""
diff --git a/tests/questionpy_sdk/webserver/controllers/question/__init__.py b/tests/questionpy_sdk/webserver/controllers/question/__init__.py
deleted file mode 100644
index e750778c..00000000
--- a/tests/questionpy_sdk/webserver/controllers/question/__init__.py
+++ /dev/null
@@ -1,3 +0,0 @@
-#  This file is part of the QuestionPy SDK. (https://questionpy.org)
-#  The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
-#  (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
diff --git a/tests/questionpy_sdk/webserver/controllers/question/test_form_data.py b/tests/questionpy_sdk/webserver/controllers/question/test_form_data.py
deleted file mode 100644
index 4ac14ec1..00000000
--- a/tests/questionpy_sdk/webserver/controllers/question/test_form_data.py
+++ /dev/null
@@ -1,73 +0,0 @@
-#  This file is part of the QuestionPy SDK. (https://questionpy.org)
-#  The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
-#  (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
-
-from questionpy_sdk.webserver.controllers.question._form_data import OptionsFormData, flatten_form_data, parse_form_data
-
-FORM_DATA: OptionsFormData = {
-    "general[input]": "Foo",
-    "general[chk]": False,
-    "general[radio]": "OPT_1",
-    "general[my_select]": "OPT_2",
-    "general[my_select_multi]": ["OPT_1", "OPT_2"],
-    "general[my_hidden]": "foo",
-    "general[my_repetition][1][id]": "49d9828f-9c9c-49fa-9d2e-b6fd83943eb3",
-    "general[my_repetition][1][role]": "OPT_1",
-    "general[my_repetition][1][name][first_name]": "Jane",
-    "general[my_repetition][1][name][last_name]": "Doe",
-    "general[my_repetition][2][id]": "0b803039-09db-4831-8866-9940ff3c10de",
-    "general[my_repetition][2][role]": "OPT_2",
-    "general[my_repetition][2][name][first_name]": "",
-    "general[my_repetition][2][name][last_name]": "",
-    "general[has_name]": False,
-    "general[name_group][first_name]": "John",
-    "general[name_group][last_name]": "Doe",
-    "another_section[some_input]": "Bar",
-}
-
-PARSED_FORM_DATA = {
-    "input": "Foo",
-    "chk": False,
-    "radio": "OPT_1",
-    "my_select": "OPT_2",
-    "my_select_multi": ["OPT_1", "OPT_2"],
-    "my_hidden": "foo",
-    "my_repetition": [
-        {
-            "id": "49d9828f-9c9c-49fa-9d2e-b6fd83943eb3",
-            "role": "OPT_1",
-            "name": {
-                "first_name": "Jane",
-                "last_name": "Doe",
-            },
-        },
-        {
-            "id": "0b803039-09db-4831-8866-9940ff3c10de",
-            "role": "OPT_2",
-            "name": {
-                "first_name": "",
-                "last_name": "",
-            },
-        },
-    ],
-    "has_name": False,
-    "name_group": {
-        "first_name": "John",
-        "last_name": "Doe",
-    },
-    "another_section": {
-        "some_input": "Bar",
-    },
-}
-
-
-def test_parse_form_data() -> None:
-    assert parse_form_data(FORM_DATA) == PARSED_FORM_DATA
-
-
-def test_parse_form_data_empty_dict() -> None:
-    assert parse_form_data({}) == {}
-
-
-def test_flatten_form_data() -> None:
-    assert flatten_form_data(PARSED_FORM_DATA, ["another_section"]) == FORM_DATA
diff --git a/tests/questionpy_sdk/webserver/controllers/question/test_controller.py b/tests/questionpy_sdk/webserver/controllers/test_question.py
similarity index 79%
rename from tests/questionpy_sdk/webserver/controllers/question/test_controller.py
rename to tests/questionpy_sdk/webserver/controllers/test_question.py
index 63feca9e..7bad0831 100644
--- a/tests/questionpy_sdk/webserver/controllers/question/test_controller.py
+++ b/tests/questionpy_sdk/webserver/controllers/test_question.py
@@ -8,8 +8,7 @@
 
 from questionpy_common.api.question import ScoringMethod
 from questionpy_common.elements import OptionsFormDefinition, TextInputElement
-from questionpy_sdk.webserver.controllers.question import QuestionController
-from questionpy_sdk.webserver.controllers.question.controller import OptionsStateResponse
+from questionpy_sdk.webserver.controllers.question import OptionsStateResponse, QuestionController
 from questionpy_sdk.webserver.errors import DuplicateQuestionError, MissingQuestionStateError
 from questionpy_server.models import QuestionCreated
 
@@ -33,21 +32,22 @@ async def test_get_form_definition(
 
 
 async def test_get_questions(controller: QuestionController, mock_worker: AsyncMock) -> None:
-    mock_worker.get_options_form.return_value = (
-        OptionsFormDefinition(general=[TextInputElement(label="Foo", name="foo")]),
-        {"foo": "Bar"},
+    mock_worker.get_options_form.side_effect = (
+        (
+            OptionsFormDefinition(general=[TextInputElement(label="Foo", name="foo")]),
+            {"foo": "foo value"},
+        ),
+        (
+            OptionsFormDefinition(general=[TextInputElement(label="Bar", name="bar")]),
+            {"bar": "bar value"},
+        ),
     )
     questions = await controller.get_questions()
 
-    question_1 = questions["svyhZCg8"]
-    assert isinstance(question_1, dict)
-    assert question_1["general[foo]"] == "Bar"
-
-    question_2 = questions["tKVJTdsv"]
-    assert isinstance(question_2, dict)
-    assert question_2["general[foo]"] == "Bar"
-
-    assert len(questions) == 2
+    assert questions == {
+        "svyhZCg8": {"foo": "foo value"},
+        "tKVJTdsv": {"bar": "bar value"},
+    }
 
 
 async def test_get_options_state(
@@ -60,7 +60,7 @@ async def test_get_options_state(
     options_state = await controller.get_options_state("QaKxpanc")
 
     mock_state_manager.read_question_state.assert_called_once()
-    assert options_state == OptionsStateResponse(data={"general[foo]": "Bar"}, is_new=False)
+    assert options_state == OptionsStateResponse(data={"foo": "Bar"}, is_new=False)
 
 
 async def test_get_options_state_new(
@@ -74,7 +74,7 @@ async def test_get_options_state_new(
     options_state = await controller.get_options_state("QaKxpanc")
 
     mock_state_manager.read_question_state.assert_called_once()
-    assert options_state == OptionsStateResponse(data={"general[foo]": "Bar"}, is_new=True)
+    assert options_state == OptionsStateResponse(data={"foo": "Bar"}, is_new=True)
 
 
 async def test_save_options_state(
@@ -83,7 +83,7 @@ async def test_save_options_state(
     mock_worker.create_question_from_options.return_value = QuestionCreated(
         lang="en", scoring_method=ScoringMethod.AUTOMATICALLY_SCORABLE, question_state="question_state"
     )
-    await controller.save_options_state("QaKxpanc", {"general[foo]": "Baz"})
+    await controller.save_options_state("QaKxpanc", {"foo": "Baz"})
 
     mock_state_manager.read_question_state.assert_called_once()
     mock_state_manager.write_question_state.assert_called_once_with("QaKxpanc", "question_state")