diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5722d2ae..67b4e1ff 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
                 "core-js": "^3.45.1",
                 "pinia": "^3.0.3",
                 "pinia-plugin-persistedstate": "^4.5.0",
+                "tinymce": "^8.2.1",
                 "uuid": "^13.0.0",
                 "vue": "^3.5.22",
                 "vue-router": "^4.5.1"
@@ -200,6 +201,7 @@
             "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@ampproject/remapping": "^2.2.0",
                 "@babel/code-frame": "^7.27.1",
@@ -492,6 +494,7 @@
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
             "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@babel/types": "^7.28.4"
             },
@@ -769,6 +772,7 @@
                 }
             ],
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=18"
             },
@@ -815,6 +819,7 @@
                 }
             ],
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=18"
             }
@@ -1471,6 +1476,7 @@
             "integrity": "sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==",
             "devOptional": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@floating-ui/dom": "^1.7.4",
                 "@floating-ui/utils": "^0.2.10",
@@ -2626,6 +2632,7 @@
             "integrity": "sha512-gTtSdWX9xiMPA/7MV9STjJOOYtWwIJIYxkQxnSV1U3xcE+mnJSH3f6zI0RYP+ew66WSlZ5ed+h0VCxsvdC1jJg==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@typescript-eslint/scope-manager": "8.41.0",
                 "@typescript-eslint/types": "8.41.0",
@@ -3129,6 +3136,7 @@
             "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz",
             "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@babel/parser": "^7.28.4",
                 "@vue/compiler-core": "3.5.22",
@@ -3391,6 +3399,7 @@
             "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
             "devOptional": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@types/web-bluetooth": "^0.0.21",
                 "@vueuse/metadata": "13.9.0",
@@ -3442,6 +3451,7 @@
             "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -3772,6 +3782,7 @@
                 }
             ],
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "caniuse-lite": "^1.0.30001735",
                 "electron-to-chromium": "^1.5.204",
@@ -4556,6 +4567,7 @@
             "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.8.0",
                 "@eslint-community/regexpp": "^4.12.1",
@@ -4617,6 +4629,7 @@
             "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "eslint-config-prettier": "bin/cli.js"
             },
@@ -4674,6 +4687,7 @@
             "integrity": "sha512-7BZHsG3kC2vei8F2W8hnfDi9RK+cv5eKPMvzBdrl8Vuc0hR5odGQRli8VVzUkrmUHkxFEm4Iio1r5HOKslO0Aw==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.4.0",
                 "natural-compare": "^1.4.0",
@@ -6890,6 +6904,7 @@
             "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
             "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@vue/devtools-api": "^7.7.2"
             },
@@ -7007,6 +7022,7 @@
                 }
             ],
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "nanoid": "^3.3.11",
                 "picocolors": "^1.1.1",
@@ -7046,6 +7062,7 @@
             "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "prettier": "bin/prettier.cjs"
             },
@@ -8333,6 +8350,7 @@
             "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=12"
             },
@@ -8340,6 +8358,12 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/tinymce": {
+            "version": "8.2.1",
+            "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-8.2.1.tgz",
+            "integrity": "sha512-gbZJH91f91jLfD39juLt/oiAMoaxwTquJMJZR0A1uzcOVrddo8hI/2Y+Uji0/vPudmbDxatnmfIG/9/j3KzP0g==",
+            "license": "GPL-2.0-or-later"
+        },
         "node_modules/tinypool": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
@@ -8465,6 +8489,7 @@
             "integrity": "sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "esbuild": "~0.25.0",
                 "get-tsconfig": "^4.7.5"
@@ -8498,6 +8523,7 @@
             "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
             "devOptional": true,
             "license": "Apache-2.0",
+            "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -8899,6 +8925,7 @@
             "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "esbuild": "^0.25.0",
                 "fdir": "^6.5.0",
@@ -9157,6 +9184,7 @@
             "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=12"
             },
@@ -9170,6 +9198,7 @@
             "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@types/chai": "^5.2.2",
                 "@vitest/expect": "3.2.4",
@@ -9269,6 +9298,7 @@
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
             "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@vue/compiler-dom": "3.5.22",
                 "@vue/compiler-sfc": "3.5.22",
@@ -9334,6 +9364,7 @@
             "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
             "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@vue/devtools-api": "^6.6.4"
             },
diff --git a/frontend/package.json b/frontend/package.json
index fa991f4e..e38239d4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
         "core-js": "^3.45.1",
         "pinia": "^3.0.3",
         "pinia-plugin-persistedstate": "^4.5.0",
+        "tinymce": "^8.2.1",
         "uuid": "^13.0.0",
         "vue": "^3.5.22",
         "vue-router": "^4.5.1"
diff --git a/frontend/src/components/ErrorModal.vue b/frontend/src/components/ErrorModal.vue
index c0bb4276..4ed93fbe 100644
--- a/frontend/src/components/ErrorModal.vue
+++ b/frontend/src/components/ErrorModal.vue
@@ -5,14 +5,7 @@
 -->
 
 <template>
-    <BModal
-        body-bg-variant="danger-subtle"
-        body-class="pb-0"
-        header-variant="danger"
-        no-footer
-        v-model="show"
-        @hide="clearError"
-    >
+    <BModal body-bg-variant="danger-subtle" header-variant="danger" no-footer v-model="show" @hide="clearError">
         <template #title>{{ error?.name }}</template>
         <ErrorDisplay v-if="error" :error="error" />
     </BModal>
diff --git a/frontend/src/components/common/ActionButton.vue b/frontend/src/components/common/ActionButton.vue
new file mode 100644
index 00000000..9a6367dc
--- /dev/null
+++ b/frontend/src/components/common/ActionButton.vue
@@ -0,0 +1,37 @@
+<!--
+  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>
+    <BPopover :body="label" teleport-to="body">
+        <template #target>
+            <BButton
+                :aria-label="label"
+                class="d-flex gap-2 align-items-center p-1"
+                v-bind="{ ...buttonProps, ...$attrs }"
+            >
+                <component :is="iconComponent" />
+            </BButton>
+        </template>
+    </BPopover>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { BButtonProps } from 'bootstrap-vue-next'
+import type { Component } from 'vue'
+
+const props = defineProps<
+    BButtonProps & {
+        iconComponent?: Component
+        label: string
+    }
+>()
+
+const buttonProps = computed(() => {
+    const { iconComponent, label, ...rest } = props
+    return rest
+})
+</script>
diff --git a/frontend/src/components/common/TinyMCE/TinyMCE.vue b/frontend/src/components/common/TinyMCE/TinyMCE.vue
new file mode 100644
index 00000000..bd61518e
--- /dev/null
+++ b/frontend/src/components/common/TinyMCE/TinyMCE.vue
@@ -0,0 +1,73 @@
+<!--
+  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 :id="id" ref="targetElement"></div>
+</template>
+
+<script lang="ts" setup>
+// Loosely based on
+// - https://www.tiny.cloud/docs/tinymce/latest/vite-es6-npm/
+// - https://github.com/tinymce/tinymce-vue
+
+import { ref, watch } from 'vue'
+import type { RawEditorOptions } from 'tinymce/tinymce'
+
+import type { RichTextEditor } from '@/types'
+
+import useTinyMCEInstance from './useTinyMCEInstance'
+
+const {
+    disabled = false,
+    id,
+    initOptions: tineMCEOptions = {},
+    modelValue,
+} = defineProps<{
+    disabled?: boolean
+    id: string
+    initOptions?: RawEditorOptions
+    modelValue?: RichTextEditor
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: RichTextEditor): void
+}>()
+
+const targetElement = ref<HTMLDivElement | undefined>()
+
+// Pass editor updates to model
+function onUpdate(state: RichTextEditor) {
+    emit('update:modelValue', state)
+}
+
+const editorInstance = useTinyMCEInstance({
+    targetElement,
+    onUpdate,
+    initialState: modelValue ?? { text: '', files: [] },
+    tinyMCEOptions: { ...tineMCEOptions, disabled },
+})
+
+// Pass model value updates to editor
+watch(
+    () => modelValue,
+    (newValue) => {
+        if (editorInstance && newValue?.text !== editorInstance.getContent()) {
+            editorInstance.setContent(newValue?.text ?? '')
+        }
+    },
+)
+
+watch(
+    () => disabled,
+    (newValue) => {
+        if (editorInstance) {
+            editorInstance.options.set('disabled', newValue)
+        }
+    },
+)
+</script>
+
+<style lang="scss" src="./TinyMCEUI.scss" />
diff --git a/frontend/src/components/common/TinyMCE/TinyMCEContent.css b/frontend/src/components/common/TinyMCE/TinyMCEContent.css
new file mode 100644
index 00000000..1f3bae7e
--- /dev/null
+++ b/frontend/src/components/common/TinyMCE/TinyMCEContent.css
@@ -0,0 +1,88 @@
+/*
+ * 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>
+ */
+
+/* TinyMCE content styles, based on `tinymce/skins/content/default/content.css` */
+
+body {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    font-family: var(--bs-body-font-family);
+    line-height: var(--bs-body-line-height);
+    margin: 1rem;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+table:not([cellpadding]) th,
+table:not([cellpadding]) td {
+    padding: 0.4rem;
+}
+
+table[border]:not([border='0']):not([style*='border-width']) th,
+table[border]:not([border='0']):not([style*='border-width']) td {
+    border-width: 1px;
+}
+
+table[border]:not([border='0']):not([style*='border-style']) th,
+table[border]:not([border='0']):not([style*='border-style']) td {
+    border-style: solid;
+}
+
+table[border]:not([border='0']):not([style*='border-color']) th,
+table[border]:not([border='0']):not([style*='border-color']) td {
+    border-color: var(--bs-border-color);
+}
+
+figure {
+    display: table;
+    margin: 1rem auto;
+}
+
+figure figcaption {
+    color: var(--bs-secondary-color);
+    display: block;
+    margin-top: 0.25rem;
+    text-align: center;
+}
+
+hr {
+    border-color: var(--bs-border-color);
+    border-style: solid;
+    border-width: 1px 0 0 0;
+}
+
+code {
+    color: var(--bs-code-color);
+    font-family: var(--bs-font-monospace);
+    font-size: 0.875em;
+}
+
+pre {
+    font-family: var(--bs-font-monospace);
+    font-size: 0.875em;
+}
+
+a {
+    color: var(--bs-link-color);
+}
+
+a:hover {
+    color: var(--bs-link-hover-color);
+}
+
+.mce-content-body:not([dir='rtl']) blockquote {
+    border-left: 2px solid var(--bs-border-color);
+    margin-left: 1.5rem;
+    padding-left: 1rem;
+}
+
+.mce-content-body[dir='rtl'] blockquote {
+    border-right: 2px solid var(--bs-border-color);
+    margin-right: 1.5rem;
+    padding-right: 1rem;
+}
diff --git a/frontend/src/components/common/TinyMCE/TinyMCEUI.scss b/frontend/src/components/common/TinyMCE/TinyMCEUI.scss
new file mode 100644
index 00000000..ffc714a8
--- /dev/null
+++ b/frontend/src/components/common/TinyMCE/TinyMCEUI.scss
@@ -0,0 +1,449 @@
+/*
+ * 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>
+ */
+
+/* Override colors, fonts, etc. from `tinymce/skins/ui/oxide/skin.css` */
+.tox {
+    /* Editor */
+
+    &.tox-tinymce {
+        border: $input-border-width solid $input-border-color;
+        @include border-radius($input-border-radius, 0);
+    }
+
+    &.tox-tinymce,
+    &.tox-tinymce-aux {
+        font-family: var(--bs-font-sans-serif);
+        color: var(--bs-body-color);
+        @include font-size($font-size-base);
+    }
+
+    .tox-editor-header,
+    &:not(.tox-tinymce-inline) .tox-editor-header {
+        background-color: var(--bs-tertiary-bg);
+        box-shadow: none;
+        border-bottom: $input-border-width solid $input-border-color;
+
+        .tox-menubar {
+            background-color: var(--bs-tertiary-bg);
+            padding: 0 $input-padding-x $input-padding-y-sm;
+        }
+
+        .tox-toolbar-overlord {
+            background-color: var(--bs-tertiary-bg);
+        }
+
+        .tox-promotion {
+            display: none;
+        }
+    }
+
+    /* Toolbar */
+
+    .tox-toolbar,
+    .tox-toolbar__primary {
+        background-color: var(--bs-tertiary-bg);
+        background-image: none;
+        transform: none;
+    }
+
+    &.tox-tinymce-aux .tox-toolbar__overflow {
+        background-color: $dropdown-bg;
+        color: $dropdown-color;
+        border: $dropdown-border-width solid $dropdown-border-color;
+        box-shadow: $dropdown-box-shadow;
+        background-image: repeating-linear-gradient($dropdown-border-color 0 1px, transparent 1px 39px);
+        @include font-size($dropdown-font-size);
+        @include border-radius($dropdown-border-radius, 0);
+    }
+
+    /* Edit area */
+
+    .tox-edit-area {
+        &::before {
+            border: none;
+            border-radius: 0;
+        }
+
+        & .tox-edit-area__iframe {
+            background-color: var(--bs-body-bg);
+        }
+    }
+
+    /* Statusbar */
+
+    .tox-statusbar {
+        background-color: var(--bs-tertiary-bg);
+        border-top: $input-border-width solid $input-border-color;
+        color: var(--bs-secondary-color);
+
+        a,
+        .tox-statusbar__path-item,
+        .tox-statusbar__wordcount {
+            color: var(--bs-secondary-color);
+
+            &:hover:not(:disabled):not([aria-disabled='true']) {
+                color: var(--bs-emphasis-color);
+            }
+        }
+
+        .tox-statusbar__resize-handle svg {
+            fill: currentColor;
+        }
+    }
+
+    /* Forms */
+
+    .tox-label {
+        color: var(--bs-body-color);
+        @include font-size($input-font-size-sm);
+    }
+
+    .tox-textfield,
+    .tox-toolbar-textfield,
+    .tox-listboxfield .tox-listbox--select,
+    .tox-textarea,
+    .tox-textarea-wrap .tox-textarea:focus {
+        background-color: $input-bg;
+        border-color: $input-border-color;
+        color: $input-color;
+        @include font-size($input-font-size);
+
+        &:focus {
+            color: $input-focus-color;
+            background-color: $input-focus-bg;
+            border-color: $input-focus-border-color;
+        }
+    }
+
+    /* Menus */
+
+    .tox-menu {
+        background-color: $dropdown-bg;
+        color: $dropdown-color;
+        border: $dropdown-border-width solid $dropdown-border-color;
+        box-shadow: $dropdown-box-shadow;
+        @include font-size($dropdown-font-size);
+        @include border-radius($dropdown-border-radius, 0);
+
+        &.tox-collection--list .tox-collection__item--enabled:not(.tox-collection__item--state-disabled) {
+            background-color: transparent;
+            color: var(--bs-body-color);
+
+            &:focus,
+            &:hover {
+                background-color: var(--bs-secondary-bg);
+                color: var(--bs-body-color);
+            }
+        }
+    }
+
+    .tox-swatches__picker-btn svg {
+        fill: currentColor;
+    }
+
+    /* Toolbar/menu buttons */
+
+    .tox-btn,
+    .tox-tbtn,
+    .tox-mbtn {
+        background: transparent;
+        font-weight: $btn-font-weight;
+        line-height: $btn-line-height;
+        color: var(--bs-body-color);
+        @include font-size($btn-font-size);
+        @include border-radius($btn-border-radius-sm);
+
+        &:focus {
+            background: inherit;
+
+            &:not(.tox-tbtn--disabled),
+            &:not(:disabled) {
+                background: inherit;
+                color: inherit;
+            }
+
+            &::after {
+                box-shadow: 0 0 0 2px $primary;
+            }
+        }
+
+        &:hover {
+            background: var(--bs-secondary-bg);
+            color: inherit;
+
+            &:not(:disabled):not(.tox-mbtn--active) {
+                background: var(--bs-secondary-bg);
+                color: inherit;
+            }
+        }
+
+        &:active {
+            background: $component-active-bg;
+            color: $component-active-color;
+        }
+
+        svg {
+            fill: currentColor !important;
+        }
+    }
+
+    .tox-mbtn,
+    .tox-tbtn {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .tox-mbtn {
+        &--active,
+        &:not(:disabled).tox-mbtn--active:focus {
+            background: var(--bs-secondary-bg);
+            color: inherit;
+        }
+    }
+
+    .tox-tbtn {
+        &--enabled,
+        &--enabled:hover,
+        &--enabled:focus {
+            background: $component-active-bg !important;
+            color: $component-active-color !important;
+        }
+
+        &--disabled,
+        &--disabled:hover,
+        &:disabled,
+        &:disabled:hover {
+            background: inherit;
+            color: var(--bs-secondary-color);
+        }
+    }
+
+    /* Regular buttons */
+
+    @mixin tox-button {
+        padding: $btn-padding-y $btn-padding-x;
+        font-family: $btn-font-family;
+        @include font-size($btn-font-size);
+        font-weight: $btn-font-weight;
+        line-height: $btn-line-height;
+        color: var(--bs-btn-color);
+        text-align: center;
+        white-space: $btn-white-space;
+        vertical-align: middle;
+        user-select: none;
+        border: $btn-border-width solid var(--bs-btn-border-color);
+        @include border-radius($btn-border-radius);
+        @include gradient-bg(var(--bs-btn-bg));
+        @include box-shadow(var(--bs-btn-box-shadow));
+        @include transition($btn-transition);
+
+        &:active:not(:disabled) {
+            background-color: var(--bs-btn-active-bg);
+            border-color: var(--bs-btn-active-border-color);
+            color: var(--bs-btn-active-color);
+        }
+
+        &:focus:not(:disabled) {
+            background-color: var(--bs-btn-bg);
+            border-color: var(--bs-btn-border-color);
+            color: var(--bs-btn-color);
+        }
+
+        &:focus::before {
+            box-shadow: 0 0 0 2px $primary;
+        }
+
+        &:hover:not(:disabled) {
+            color: var(--bs-btn-hover-color);
+            background-color: var(--bs-btn-hover-bg);
+            border-color: var(--bs-btn-hover-border-color);
+        }
+
+        &[disabled] {
+            color: var(--bs-btn-disabled-color);
+            background-color: var(--bs-btn-disabled-bg);
+            border-color: var(--bs-btn-disabled-border-color);
+        }
+
+        &::before {
+            box-shadow: none;
+        }
+    }
+
+    .tox-button {
+        @include button-variant($primary, $primary);
+        @include tox-button;
+    }
+
+    .tox-button--secondary {
+        @include button-variant($secondary, $secondary);
+    }
+
+    .tox-button--naked {
+        @include button-variant($secondary, $secondary);
+
+        &.tox-button--icon:hover:not(:disabled) {
+            color: var(--bs-btn-hover-color);
+        }
+    }
+
+    /* Dialog */
+
+    .tox-dialog {
+        background-color: var(--bs-body-bg);
+        box-shadow: var(--bs-box-shadow);
+
+        .tox-dialog__header,
+        .tox-dialog__body,
+        .tox-dialog__footer {
+            background-color: transparent;
+            color: var(--bs-body-color);
+        }
+
+        .tox-dialog__body-content {
+            a {
+                color: $link-color;
+
+                &:hover {
+                    color: $link-hover-color;
+                }
+            }
+
+            .tox-form__group h1 {
+                color: var(--bs-body-color);
+            }
+        }
+
+        .tox-dialog__body-nav-item {
+            color: var(--bs-body-color);
+
+            &:focus {
+                background-color: inherit;
+            }
+        }
+
+        .tox-dialog__body-nav-item {
+            color: var(--bs-body-color);
+        }
+
+        .tox-dialog__body-nav-item--active {
+            color: var(--bs-link-color);
+            border-bottom-color: var(--bs-link-color);
+        }
+
+        .tox-dialog__table tbody tr {
+            border-bottom-color: $table-border-color;
+        }
+    }
+
+    .tox-dialog-wrap__backdrop {
+        background-color: $modal-backdrop-bg;
+        opacity: $modal-backdrop-opacity;
+    }
+
+    /* Pop dialog */
+
+    .tox-pop__dialog {
+        background-color: $dropdown-bg;
+        color: $dropdown-color;
+        border: $dropdown-border-width solid $dropdown-border-color;
+        box-shadow: $dropdown-box-shadow;
+        @include font-size($dropdown-font-size);
+        @include border-radius($dropdown-border-radius, 0);
+    }
+
+    .tox-pop.tox-pop--top {
+        &::before {
+            border-bottom-color: $dropdown-border-color;
+        }
+        &::after {
+            border-bottom-color: $dropdown-bg;
+        }
+    }
+
+    /* Tooltip */
+
+    .tox-tooltip__body {
+        background-color: $tooltip-bg;
+        border-radius: $tooltip-border-radius;
+        color: $tooltip-color;
+        opacity: $tooltip-opacity;
+        padding: $tooltip-padding-y $tooltip-padding-x;
+    }
+
+    /* Collection */
+
+    .tox-collection--list,
+    .tox-collection--toolbar {
+        .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+            color: var(--bs-body-color);
+            background-color: var(--bs-secondary-bg);
+
+            &:focus,
+            &:hover {
+                color: var(--bs-body-color);
+                background-color: var(--bs-secondary-bg);
+            }
+        }
+
+        .tox-collection__item--enabled:not(.tox-collection__item--state-disabled) {
+            color: $component-active-color;
+            background-color: $component-active-bg;
+
+            &:focus,
+            &:hover {
+                color: $component-active-color;
+                background-color: $component-active-bg;
+            }
+        }
+
+        .tox-collection__group {
+            border-color: $dropdown-divider-bg;
+        }
+    }
+
+    .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+        background: var(--bs-secondary-bg);
+        color: var(--bs-body-color);
+    }
+
+    .tox-collection__item {
+        color: var(--bs-body-color);
+    }
+
+    .tox-collection__item-label {
+        @include font-size($font-size-sm);
+    }
+
+    .tox-collection__item-accessory {
+        color: var(--bs-secondary-color);
+        @include font-size($font-size-sm);
+    }
+
+    .tox-collection__item--state-disabled {
+        color: var(--bs-secondary-color);
+    }
+
+    /* Table picker */
+
+    .tox-insert-table-picker {
+        background-color: var(--bs-body-bg);
+
+        > div {
+            border-color: $table-border-color;
+        }
+
+        .tox-insert-table-picker__selected {
+            background-color: var(--bs-secondary-bg);
+            border-color: $input-focus-border-color;
+        }
+
+        .tox-insert-table-picker__label {
+            color: var(--bs-body-color);
+            @include font-size($font-size-sm);
+        }
+    }
+}
diff --git a/frontend/src/components/common/TinyMCE/useContentCss.ts b/frontend/src/components/common/TinyMCE/useContentCss.ts
new file mode 100644
index 00000000..eb9a506c
--- /dev/null
+++ b/frontend/src/components/common/TinyMCE/useContentCss.ts
@@ -0,0 +1,56 @@
+/*
+ * 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 { storeToRefs } from 'pinia'
+import { nextTick, ref, watch } from 'vue'
+
+import useAppStateStore from '@/stores/useAppStateStore'
+
+// There's no way of accessing compiled CSS directly apart from adjusting the Vite build pipeline. To keep things
+// simple, we work with static CSS and properties.
+import cssBaseBlock from './TinyMCEContent.css?raw'
+
+const CSS_PROPERTIES = [
+    '--bs-body-bg',
+    '--bs-body-color',
+    '--bs-body-font-size',
+    '--bs-body-font-family',
+    '--bs-font-monospace',
+    '--bs-link-color',
+    '--bs-link-hover-color',
+    '--bs-body-line-height',
+    '--bs-secondary-color',
+    '--bs-border-color',
+    '--bs-code-color',
+]
+
+function makeCssVarsBlock() {
+    const cssProperties = CSS_PROPERTIES.map(
+        (prop) => `${prop}: ${window.getComputedStyle(document.documentElement).getPropertyValue(prop).trim()};`,
+    )
+    return `:root { ${cssProperties.join('\n')} }`
+}
+
+/**
+ * Provides TinyMCE-compatible content styles as two CSS blocks:
+ * - `base`: static base styles.
+ * - `vars`: reactive styles that update with the current color mode.
+ *
+ * @returns An object containing the static and dynamic CSS blocks.
+ */
+function useContentCss() {
+    const { colorMode } = storeToRefs(useAppStateStore())
+    const cssVarsBlock = ref(makeCssVarsBlock())
+
+    watch(colorMode, async () => {
+        await nextTick() // Give CSS properties time to recompute
+        cssVarsBlock.value = makeCssVarsBlock()
+    })
+
+    return { base: cssBaseBlock, vars: cssVarsBlock }
+}
+
+export default useContentCss
diff --git a/frontend/src/components/common/TinyMCE/useTinyMCEInstance.ts b/frontend/src/components/common/TinyMCE/useTinyMCEInstance.ts
new file mode 100644
index 00000000..fa16f9a0
--- /dev/null
+++ b/frontend/src/components/common/TinyMCE/useTinyMCEInstance.ts
@@ -0,0 +1,189 @@
+/*
+ * 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 'tinymce' // TinyMCE uses a global, so need to import first!
+// Required components
+import 'tinymce/icons/default'
+import 'tinymce/models/dom'
+import 'tinymce/themes/silver'
+// UI skin
+import 'tinymce/skins/ui/oxide/skin.css'
+// Plugins
+import 'tinymce/plugins/advlist'
+import 'tinymce/plugins/anchor'
+import 'tinymce/plugins/autolink'
+import 'tinymce/plugins/charmap'
+import 'tinymce/plugins/code'
+import 'tinymce/plugins/emoticons'
+import 'tinymce/plugins/emoticons/js/emojis'
+import 'tinymce/plugins/fullscreen'
+import 'tinymce/plugins/help'
+import 'tinymce/plugins/help/js/i18n/keynav/en.js'
+import 'tinymce/plugins/image'
+import 'tinymce/plugins/link'
+import 'tinymce/plugins/lists'
+import 'tinymce/plugins/media'
+import 'tinymce/plugins/nonbreaking'
+import 'tinymce/plugins/preview'
+import 'tinymce/plugins/searchreplace'
+import 'tinymce/plugins/table'
+import 'tinymce/plugins/visualchars'
+import 'tinymce/plugins/wordcount'
+
+import { useDebounceFn } from '@vueuse/core'
+import tinymce from 'tinymce'
+import { onBeforeUnmount, onMounted, watch } from 'vue'
+import type { Editor, RawEditorOptions as TineMCEOptions } from 'tinymce/tinymce'
+import type { Ref } from 'vue'
+
+import type { RichTextEditor } from '@/types'
+
+import useContentCss from './useContentCss'
+
+const PLUGINS = [
+    'advlist',
+    'anchor',
+    'autolink',
+    'charmap',
+    'code',
+    'fullscreen',
+    'help',
+    'image',
+    'link',
+    'lists',
+    'media',
+    'nonbreaking',
+    'preview',
+    'searchreplace',
+    'table',
+    'visualchars',
+    'wordcount',
+]
+
+const TOOLBAR = [
+    {
+        name: 'history',
+        items: ['undo', 'redo'],
+    },
+    {
+        name: 'style',
+        items: ['styles'],
+    },
+    {
+        name: 'formatting',
+        items: ['bold', 'italic', 'underline', 'strikethrough'],
+    },
+    {
+        name: 'alignment',
+        items: ['alignleft', 'aligncenter', 'alignright', 'alignjustify'],
+    },
+    {
+        name: 'lists',
+        items: ['bullist', 'numlist', 'outdent', 'indent'],
+    },
+    {
+        name: 'insert',
+        items: ['link', 'image', 'charmap'],
+    },
+]
+
+interface UseTinyMCEInstanceOptions {
+    /** A ref pointing to the HTML element where TinyMCE will be mounted. */
+    targetElement: Ref<HTMLElement | undefined>
+    /** Callback function invoked with a `RichTextEditor` object whenever the editor content changes. */
+    onUpdate: (state: RichTextEditor) => void
+    /** Optional initial editor state (default: empty). */
+    initialState?: RichTextEditor
+    /** Optional TinyMCE initialization options to merge with defaults. */
+    tinyMCEOptions?: TineMCEOptions
+}
+
+/**
+ * Composable for creating and managing a TinyMCE editor instance on a target element.
+ *
+ * @param options An object containing the composable options.
+ * @returns The TinyMCE `Editor` instance, or `null` if it has not been initialized yet.
+ */
+function useTinyMCEInstance(options: UseTinyMCEInstanceOptions): Editor | null {
+    const mergedOptions = {
+        initialState: { text: '', files: [] },
+        initOptions: {},
+        ...options,
+    }
+
+    let editorInstance: Editor | null = null
+    const contentCss = useContentCss()
+
+    // As TinyMCE may fire frequent updates, we debounce model updates
+    const debouncedUpdate = useDebounceFn(() => {
+        if (editorInstance) {
+            mergedOptions.onUpdate({ text: editorInstance.getContent(), files: [] })
+        }
+    }, 200)
+
+    // TinyMCE initialization
+    onMounted(() => {
+        tinymce.init({
+            target: mergedOptions.targetElement.value,
+            plugins: PLUGINS,
+            toolbar: TOOLBAR,
+
+            height: 500,
+            image_caption: true,
+
+            // Use 'gpl' for self-hosting
+            license_key: 'gpl',
+
+            // Hide distracting self-promotion
+            branding: false,
+            promotion: false,
+
+            // Prevent TinyMCE from dynamically loading any CSS
+            content_css: false,
+            skin: false,
+
+            // Setup event handlers
+            setup: (newEditorInstance) => {
+                editorInstance = newEditorInstance
+
+                newEditorInstance.on('init', () => {
+                    if (editorInstance) {
+                        // Inject content CSS into editor iframe
+                        editorInstance.dom.styleSheetLoader.loadRawCss('BASE_CSS', contentCss.base)
+                        editorInstance.dom.styleSheetLoader.loadRawCss('VARS_CSS', contentCss.vars.value)
+                        // Set initial content
+                        editorInstance.setContent(mergedOptions.initialState.text)
+                    }
+                })
+
+                // Emit model updates on content change
+                newEditorInstance.on('change keyup undo redo', () => {
+                    debouncedUpdate()
+                })
+            },
+            ...mergedOptions.tinyMCEOptions,
+        })
+    })
+
+    // Update content CSS (on color mode change)
+    watch(contentCss.vars, (newCssVars) => {
+        if (editorInstance && editorInstance.dom) {
+            editorInstance.dom.styleSheetLoader.unloadRawCss('VARS_CSS')
+            editorInstance.dom.styleSheetLoader.loadRawCss('VARS_CSS', newCssVars)
+        }
+    })
+
+    // Clean-up
+    onBeforeUnmount(() => {
+        if (editorInstance) {
+            tinymce.remove(editorInstance)
+        }
+    })
+
+    return editorInstance
+}
+
+export default useTinyMCEInstance
diff --git a/frontend/src/components/common/UploadThumbnail.vue b/frontend/src/components/common/UploadThumbnail.vue
new file mode 100644
index 00000000..d790238e
--- /dev/null
+++ b/frontend/src/components/common/UploadThumbnail.vue
@@ -0,0 +1,109 @@
+<!--
+  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="wrapper bg-dark-subtle">
+        <div class="thumbnail">
+            <BImg v-if="isDisplayableImage" :alt="file.filename" :src="imageSrc" class="image" />
+            <IMdiFile v-else class="image" />
+            <samp class="filename text-truncate">{{ file.filename }}</samp>
+        </div>
+        <ActionButton
+            v-if="isOptionsFile(file)"
+            :icon-component="IMdiDelete"
+            @click="emit('remove', file)"
+            class="remove-btn"
+            label="Remove file"
+            variant="danger"
+            size="sm"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import IMdiDelete from '~icons/mdi/delete'
+import { computed } from 'vue'
+
+import { isBrowserDisplayable } from '@/composables/question/useFileUpload'
+import { API_BASE } from '@/queries'
+import { isOptionsFile } from '@/types/typeUtils'
+import type { ElementPath, OptionsFile } from '@/types'
+
+const { file, questionId, objectUrl, path } = defineProps<{
+    file: OptionsFile
+    questionId: string
+    /** An optional object URL to show a temporary thumbnail while uploading. */
+    objectUrl?: string
+    path: ElementPath
+}>()
+
+const emit = defineEmits<{
+    remove: [OptionsFile]
+}>()
+
+const isDisplayableImage = computed(() => isBrowserDisplayable(file.mime_type))
+
+const makeImageSrc = () =>
+    objectUrl ?? `${API_BASE}question/${questionId}/file/${encodeURIComponent(path.join('.'))}/${file.file_ref}`
+
+const imageSrc = computed(() => (isDisplayableImage.value ? makeImageSrc() : undefined))
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+    --thumbnail-padding: #{$spacer * 0.2};
+    --thumbnail-size: 5rem;
+    position: relative;
+    padding: var(--thumbnail-padding);
+    background-color: var(--bs-pink);
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    width: var(--thumbnail-size);
+    height: var(--thumbnail-size);
+    overflow: hidden;
+
+    @include media-breakpoint-up('md') {
+        --thumbnail-padding: #{$spacer * 0.25};
+        --thumbnail-size: 7.5rem;
+    }
+
+    @include media-breakpoint-up('lg') {
+        --thumbnail-size: 10rem;
+    }
+
+    :deep(.remove-btn) {
+        position: absolute;
+        right: $spacer * 0.5;
+        top: $spacer * 0.5;
+        visibility: hidden;
+    }
+
+    &:hover :deep(.remove-btn) {
+        visibility: inherit;
+    }
+
+    .thumbnail {
+        display: flex;
+        flex-direction: column;
+        flex: 1 0 auto;
+        gap: $spacer * 0.25;
+        width: 100%;
+        height: 100%;
+
+        > .image {
+            width: 100%;
+            height: 100%;
+            min-height: 0;
+            object-fit: cover;
+        }
+    }
+
+    .filename {
+        font-size: calc(var(--bs-body-font-size) * 0.8);
+        flex: 0 0 auto;
+    }
+}
+</style>
diff --git a/frontend/src/components/question/QuestionOptions.vue b/frontend/src/components/question/QuestionOptions.vue
index 72aef900..06ee6a48 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" class="vstack gap-4">
+        <BForm v-else-if="formDefinition">
             <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="my-4">
+        <ButtonGroup class="mb-4">
             <template v-if="hasEditableFields">
                 <IconButton :disabled="isSaveDisabled" :icon-component="SubmitIcon" @click="submit" variant="primary">{{
                     submitLabel
diff --git a/frontend/src/components/question/elements/FileUploadElement.vue b/frontend/src/components/question/elements/FileUploadElement.vue
new file mode 100644
index 00000000..8bbe5bb0
--- /dev/null
+++ b/frontend/src/components/question/elements/FileUploadElement.vue
@@ -0,0 +1,78 @@
+<!--
+  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>
+    <FormGroup :label="element.label" :state="validation.state">
+        <BFormFile
+            v-model="toUpload"
+            :aria-describedby="ariaDescribedBy"
+            :disabled="isDisabled"
+            :id="id"
+            :state="validation.state"
+            multiple
+        />
+        <!-- File selector -->
+        <BOverlay :show="isUploading" opacity="0.3" rounded="sm">
+            <template #overlay>
+                <BSpinner class="mx-1" label="Uploading…" small />
+                Uploading…
+            </template>
+        </BOverlay>
+
+        <!-- Thumbnails / file list -->
+        <BContainer class="mt-3">
+            <BRow class="gap-1 gap-md-2">
+                <BCol v-for="(file, idx) in model" :key="file.file_ref" class="flex-grow-0 p-0">
+                    <UploadThumbnail
+                        :file="file"
+                        :path="[...path, idx]"
+                        :question-id="questionId"
+                        :object-url="objectUrls[file.file_ref]"
+                        @remove="removeFile"
+                    />
+                </BCol>
+            </BRow>
+        </BContainer>
+        <ValidationFeedback :validation="validation" />
+        <BFormText v-if="helpText" :id="helpId">{{ helpText }}</BFormText>
+    </FormGroup>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { useFileUpload, useFormDataState } from '@/composables/question'
+import {
+    useAriaDescribedBy,
+    useHelp,
+    useId,
+    useIsDisabled,
+    usePath,
+    useValidation,
+} from '@/composables/question/elements'
+import type { ElementPath, FileUploadElement, OptionsFile } from '@/types'
+
+const { element, pathPrefix } = defineProps<{
+    element: FileUploadElement
+    pathPrefix: ElementPath
+}>()
+
+const path = usePath(pathPrefix, element)
+const id = useId(path)
+const { helpId, helpText } = useHelp(pathPrefix, element)
+const ariaDescribedBy = useAriaDescribedBy([helpId.value])
+const { questionId } = useFormDataState()
+const toUpload = ref<File[]>([])
+const { isUploading, model, objectUrls } = useFileUpload(pathPrefix, element, toUpload)
+const isDisabled = useIsDisabled(isUploading)
+const validation = useValidation(path)
+
+async function removeFile(optionsFile: OptionsFile) {
+    if (model.value) {
+        model.value = model.value.filter((f) => f !== optionsFile)
+    }
+}
+</script>
diff --git a/frontend/src/components/question/elements/WysiwygEditorElement.vue b/frontend/src/components/question/elements/WysiwygEditorElement.vue
new file mode 100644
index 00000000..5f1928f9
--- /dev/null
+++ b/frontend/src/components/question/elements/WysiwygEditorElement.vue
@@ -0,0 +1,30 @@
+<!--
+  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>
+    <FormGroup :label="element.label" :state="validation.state">
+        <TinyMCE v-model="model" :disabled="isDisabled" :id="id" />
+        <ValidationFeedback :validation="validation" />
+        <BFormText v-if="helpText" :id="helpId">{{ helpText }}</BFormText>
+    </FormGroup>
+</template>
+
+<script lang="ts" setup>
+import { useHelp, useId, useIsDisabled, useModel, usePath, useValidation } from '@/composables/question/elements'
+import type { ElementPath, WysiwygEditorElement } from '@/types'
+
+const { element, pathPrefix } = defineProps<{
+    element: WysiwygEditorElement
+    pathPrefix: ElementPath
+}>()
+
+const path = usePath(pathPrefix, element)
+const id = useId(path)
+const model = useModel(pathPrefix, element)
+const { helpId, helpText } = useHelp(pathPrefix, element)
+const validation = useValidation(path)
+const isDisabled = useIsDisabled()
+</script>
diff --git a/frontend/src/components/question/elements/index.ts b/frontend/src/components/question/elements/index.ts
index 46ecc49e..1dbc9210 100644
--- a/frontend/src/components/question/elements/index.ts
+++ b/frontend/src/components/question/elements/index.ts
@@ -9,6 +9,7 @@ import type { Component } from 'vue'
 import { assertNever, type FormElement } from '@/types'
 
 import CheckboxElement from './CheckboxElement.vue'
+import FileUploadElement from './FileUploadElement.vue'
 import GeneratedIdElement from './GeneratedIdElement.vue'
 import GroupElement from './GroupElement.vue'
 import HiddenElement from './HiddenElement.vue'
@@ -18,6 +19,7 @@ import SelectElement from './SelectElement.vue'
 import StaticTextElement from './StaticTextElement.vue'
 import TextAreaElement from './TextAreaElement.vue'
 import TextInputElement from './TextInputElement.vue'
+import WysiwygEditorElement from './WysiwygEditorElement.vue'
 
 /**
  * Maps an element `kind` property to a component.
@@ -48,9 +50,9 @@ function mapElementKindToComponent(kind: FormElement['kind']): Component {
         case 'textarea':
             return TextAreaElement
         case 'file_upload':
+            return FileUploadElement
         case 'wysiwyg_editor':
-            // TODO: Implement.
-            throw new Error('Form element not yet implemented: ' + kind)
+            return WysiwygEditorElement
         default:
             assertNever(kind)
     }
diff --git a/frontend/src/composables/question/elements/useIsDisabled.ts b/frontend/src/composables/question/elements/useIsDisabled.ts
index 6b3b44a5..91f987dc 100644
--- a/frontend/src/composables/question/elements/useIsDisabled.ts
+++ b/frontend/src/composables/question/elements/useIsDisabled.ts
@@ -22,6 +22,7 @@ import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
 function useIsDisabled(disabled: MaybeRefOrGetter<boolean> = false): ComputedRef<boolean> {
     const { isSaving } = useFormDataState()
     const { hasPendingOperations } = storeToRefs(usePendingOperationsStore())
+
     return computed(() => hasPendingOperations.value || isSaving.value || toValue(disabled))
 }
 
diff --git a/frontend/src/composables/question/formDataUtils.ts b/frontend/src/composables/question/formDataUtils.ts
index 4a6e1460..df2c5d3b 100644
--- a/frontend/src/composables/question/formDataUtils.ts
+++ b/frontend/src/composables/question/formDataUtils.ts
@@ -15,6 +15,7 @@ import type {
     OptionsFormDefinition,
     OptionsFormModelValue,
     OptionsFormValue,
+    RichTextEditor,
 } from '@/types'
 
 /**
@@ -104,9 +105,12 @@ function createFormDataValues(elems: FormElement[], data: OptionsFormModelValue
                 break
 
             case 'file_upload':
+                data[elem.name] = []
+                break
+
             case 'wysiwyg_editor':
-                // TODO: Implement.
-                throw new Error('Form element not yet implemented: ' + elem.kind)
+                data[elem.name] = { text: '', files: [] } satisfies RichTextEditor
+                break
 
             default:
                 assertNever(elem)
diff --git a/frontend/src/composables/question/index.ts b/frontend/src/composables/question/index.ts
index af005e9f..0f10c232 100644
--- a/frontend/src/composables/question/index.ts
+++ b/frontend/src/composables/question/index.ts
@@ -8,5 +8,6 @@ export { default as useCloneQuestion } from './useCloneQuestion'
 export { default as useCreateQuestion } from './useCreateQuestion'
 export { default as useDeleteAllQuestions } from './useDeleteAllQuestions'
 export { default as useDeleteQuestion } from './useDeleteQuestion'
+export { default as useFileUpload } from './useFileUpload'
 export { default as useFormDataState } from './useFormDataState'
 export { default as useRepetitions } from './useRepetitions'
diff --git a/frontend/src/composables/question/useFileUpload.ts b/frontend/src/composables/question/useFileUpload.ts
new file mode 100644
index 00000000..9e411e79
--- /dev/null
+++ b/frontend/src/composables/question/useFileUpload.ts
@@ -0,0 +1,89 @@
+/*
+ * 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 { ref, toRaw, watch } from 'vue'
+import type { Ref, WritableComputedRef } from 'vue'
+
+import { usePostQuestionFileUploadMutation } from '@/queries'
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
+import type { ElementPath, FileUploadElement, OptionsFile } from '@/types'
+
+import { useModel } from './elements'
+
+function isBrowserDisplayable(mimeType: string) {
+    return ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/bmp'].includes(mimeType)
+}
+
+/**
+ * A composable managing the file upload process.
+ *
+ * @param pathPrefix The parent's path of the form element.
+ * @param element The form element definition object.
+ * @param toUpload A reactive array of `File` objects to upload.
+ * @returns An object containing the file upload data model and state.
+ */
+function useFileUpload(
+    pathPrefix: ElementPath,
+    element: FileUploadElement,
+    toUpload: Ref<File[]>,
+): UseFileUploadReturn {
+    const { addOperation, removeOperation } = usePendingOperationsStore()
+    const isUploading = ref<boolean>(false)
+    // Map file_refs to ObjectURL, so we can show thumbnails even a file is not saved to the question yet
+    const objectUrls = ref<Record<string, string>>({})
+
+    const model = useModel(pathPrefix, element)
+
+    watch(toUpload, async (newToUpload) => {
+        if (newToUpload.length === 0) {
+            return
+        }
+
+        const { mutateAsync } = usePostQuestionFileUploadMutation(newToUpload)
+        let optionsFiles: OptionsFile[] = []
+        const operation = addOperation('file-upload')
+        isUploading.value = true
+
+        try {
+            optionsFiles = await mutateAsync()
+        } finally {
+            removeOperation(operation)
+            isUploading.value = false
+        }
+
+        // Add object URLs for temporary thumbnails
+        for (const [i, file] of newToUpload.entries()) {
+            const optionsFile = optionsFiles[i]
+            if (!optionsFile) {
+                throw new Error('Expecting same length')
+            }
+            if (isBrowserDisplayable(optionsFile.mime_type)) {
+                objectUrls.value[optionsFile.file_ref] = URL.createObjectURL(file)
+            }
+        }
+
+        // Update uploaded files model
+        const rawOldValue = toRaw(model.value) ?? [] // Avoid nested proxy objects
+        model.value = [...rawOldValue, ...optionsFiles]
+
+        // Reset file input control
+        toUpload.value = []
+    })
+
+    return { isUploading, model, objectUrls }
+}
+
+interface UseFileUploadReturn {
+    /** A reactive boolean value that indicates if an upload is currently in progress. */
+    isUploading: Ref<boolean>
+    /** Data model for file uploads. */
+    model: WritableComputedRef<OptionsFile[] | undefined, OptionsFile[]>
+    /** A reactive mapping of file refs to temporary object URLs. */
+    objectUrls: Ref<Record<string, string>>
+}
+
+export { isBrowserDisplayable }
+export default useFileUpload
diff --git a/frontend/src/composables/question/useFormDataState.ts b/frontend/src/composables/question/useFormDataState.ts
index 386faa29..b19ae857 100644
--- a/frontend/src/composables/question/useFormDataState.ts
+++ b/frontend/src/composables/question/useFormDataState.ts
@@ -8,6 +8,7 @@ import { computed, inject, provide, ref, toRaw, watch } from 'vue'
 import type { ComputedRef, InjectionKey, Ref, ShallowRef } from 'vue'
 
 import { useOptionsFormDataQuery, useOptionsFormDefinitionQuery, usePostOptionsFormDataMutation } from '@/queries'
+import { FormValidationError } from '@/queries/fetch'
 import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
 import { isObject } from '@/types'
 import type {
@@ -80,7 +81,20 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
         },
     )
 
-    const error = computed(() => formDefinitionError.value ?? formDataError.value ?? postDataError.value)
+    const error = computed(() => {
+        if (formDefinitionError.value) {
+            return formDefinitionError.value
+        } else if (formDataError.value) {
+            return formDataError.value
+        } else if (
+            postDataError.value &&
+            // We handle FormValidationError in submit()
+            !(postDataError.value instanceof FormValidationError)
+        ) {
+            return postDataError.value
+        }
+        return null
+    })
     const isPending = computed(() => formDefinitionIsPending.value || formDataIsPending.value)
 
     // Form logic
@@ -113,11 +127,16 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
         const operation = addOperation('submit', { modelType: 'question' })
         try {
             formErrors.value = await postData(rawFormData)
+            formErrors.value = {} // no errors
         } catch (err) {
-            if (err instanceof Error) {
+            if (err instanceof FormValidationError) {
+                formErrors.value = err.validationErrors
+            } else if (err instanceof Error) {
                 mutationState.value.error = err
+                throw err
+            } else {
+                throw err // unknown
             }
-            throw err
         } finally {
             removeOperation(operation)
         }
@@ -185,6 +204,8 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
     }
 
     const formDataState = {
+        questionId: ref(questionId),
+
         formDefinition,
         formData: formDataCurrent,
         formErrors,
@@ -230,6 +251,9 @@ function useFormDataState(): UseFormDataStateReturn {
 
 /** Encapsulates reactive form state and mutation methods for an options form. */
 interface UseFormDataStateReturn {
+    /** Question ID. */
+    questionId: Ref<string>
+
     /** Reactive reference to the form definition. */
     formDefinition: ShallowRef<OptionsFormDefinition | undefined>
 
diff --git a/frontend/src/composables/question/useRepetitions.ts b/frontend/src/composables/question/useRepetitions.ts
index b9e1780c..373995f0 100644
--- a/frontend/src/composables/question/useRepetitions.ts
+++ b/frontend/src/composables/question/useRepetitions.ts
@@ -4,7 +4,8 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
-import { computed, type ComputedRef, toRaw } from 'vue'
+import { computed, toRaw } from 'vue'
+import type { ComputedRef } from 'vue'
 
 import type { ElementPath, RepetitionElement } from '@/types'
 
diff --git a/frontend/src/queries/fetch.ts b/frontend/src/queries/fetch.ts
index e4362a89..2abaaea2 100644
--- a/frontend/src/queries/fetch.ts
+++ b/frontend/src/queries/fetch.ts
@@ -5,7 +5,10 @@
  */
 
 import { isDetailedServerError } from '@/types'
-import type { DetailedServerError } from '@/types'
+import { isServerValidationErrors } from '@/types/typeUtils'
+import type { DetailedServerError, ServerValidationErrors } from '@/types'
+
+const API_BASE = '/api/'
 
 /**
  * Represents an error that occurs during a fetch operation.
@@ -27,7 +30,12 @@ class FetchError extends Error {
      * @param message A human-readable error message.
      * @param details An optional detailed description of the error.
      */
-    constructor(status: number, statusText: string, message: string, details: DetailedServerError['details']) {
+    constructor(
+        status: number,
+        statusText: string,
+        message: string,
+        details: DetailedServerError['details'] = undefined,
+    ) {
         super(message)
         this.status = status
         this.statusText = statusText
@@ -39,8 +47,8 @@ class FetchError extends Error {
      * Creates a `FetchError` from a `Response` object.
      * Tries to parse the response body as JSON and extract `error` and `details`.
      *
-     * @param response The Response object to create the error from.
-     * @returns A Promise resolving to a FetchError instance.
+     * @param response The `Response` object to create the error from.
+     * @returns A Promise resolving to a `FetchError` instance.
      */
     static async fromResponse(response: Response): Promise<FetchError> {
         let message = `${response.status} ${response.statusText}`
@@ -60,20 +68,61 @@ class FetchError extends Error {
     }
 }
 
+/** Represents server-side form validation errors. */
+class FormValidationError extends FetchError {
+    /** Server validation errors. */
+    validationErrors: ServerValidationErrors
+
+    /**
+     * Creates a new `FormValidationError` instance.
+     *
+     * @param status The HTTP status code of the response.
+     * @param statusText The status text corresponding to the HTTP status code.
+     * @param message A human-readable error message.
+     * @param details An optional detailed description of the error.
+     */
+    constructor(status: number, statusText: string, message: string, validationErrors: ServerValidationErrors) {
+        super(status, statusText, message)
+        this.name = 'FormValidationError'
+        this.validationErrors = validationErrors
+    }
+
+    /**
+     * Creates a `FormValidationError` from a `Response` object with status '422 Unprocessable Content'.
+     *
+     * @param response The `Response` object to create the error from.
+     * @returns A Promise resolving to a `FormValidationError` instance.
+     */
+    static async fromResponse(response: Response): Promise<FormValidationError> {
+        if (response.status !== 422) {
+            throw Error('Expected 422 Unprocessable Content')
+        }
+
+        const message = `${response.status} ${response.statusText}`
+
+        const validationErrors = await response.json()
+        if (isServerValidationErrors(validationErrors)) {
+            return new FormValidationError(response.status, response.statusText, message, validationErrors)
+        }
+
+        throw Error('Failed to parse server validation errors')
+    }
+}
+
 /**
  * Performs a GET request to the specified API endpoint.
  *
  * @param path The relative API endpoint path (e.g., `manifest` or `options`).
  * @param params Optional query parameters.
  * @template T The response data type.
- * @returns A promise that resolves to the validated data.
+ * @returns A promise that resolves to the response data type.
  * @throws {@link FetchError} If the response is not OK (status code outside the 200-299 range).
  */
 async function get<T = unknown>(
     path: string,
     params?: Record<string, string | number | boolean | string[]>,
 ): Promise<T> {
-    const url = new URL(`/api/${path}`, window.location.origin)
+    const url = new URL(`${API_BASE}${path}`, window.location.origin)
 
     if (params) {
         Object.entries(params).forEach(([key, value]) => {
@@ -98,31 +147,33 @@ async function get<T = unknown>(
  *
  * @param path The relative API endpoint path (e.g., `options/state`).
  * @param body The request body as a string (usually JSON).
- * @returns A promise that resolves to `ServerValidationErrors` if the response status is 422 (validation error),
- *          or `undefined` if the request is successful.
+ * @template T The response data type.
+ * @returns A promise that resolves to the response data type.
  * @throws {@link FetchError} If the response is not OK (status code outside the 200-299 range) and not 422.
+ * @throws {@link FormValidationError} If the response status code is 422.
  */
-async function post<T = unknown>(path: string, body?: string): Promise<T | undefined> {
-    const response = await fetch(`/api/${path}`, { method: 'POST', body })
-    if (response.status === 422) {
+async function post<T>(path: string, body?: string | FormData): Promise<T> {
+    const response = await fetch(`${API_BASE}${path}`, { method: 'POST', body })
+    if (response.ok) {
         return await response.json()
-    } else if (!response.ok) {
-        throw await FetchError.fromResponse(response)
+    } else if (response.status === 422) {
+        // ServerValidationError
+        throw await FormValidationError.fromResponse(response)
     }
+    throw await FetchError.fromResponse(response)
 }
 
 /**
  * Performs a DELETE request to the specified API path.
  *
  * @param path The relative API endpoint path (e.g., `options/state`).
- * @returns
  * @throws {@link FetchError} If the response is not OK (status code outside the 200-299 range).
  */
 async function delete_(path: string): Promise<undefined> {
-    const response = await fetch(`/api/${path}`, { method: 'DELETE' })
+    const response = await fetch(`${API_BASE}${path}`, { method: 'DELETE' })
     if (!response.ok) {
         throw await FetchError.fromResponse(response)
     }
 }
 
-export { delete_, FetchError, get, post }
+export { API_BASE, delete_, FetchError, FormValidationError, get, post }
diff --git a/frontend/src/queries/index.ts b/frontend/src/queries/index.ts
index aa9de8e0..459cbf04 100644
--- a/frontend/src/queries/index.ts
+++ b/frontend/src/queries/index.ts
@@ -12,7 +12,7 @@ export {
     usePostAttemptMutation,
     usePostAttemptScoreMutation,
 } from './attempt'
-export { FetchError } from './fetch'
+export { API_BASE, FetchError } from './fetch'
 export { useManifestQuery } from './package'
 export {
     useDeleteAllOptionsFormDataMutation,
@@ -21,5 +21,6 @@ export {
     useOptionsFormDefinitionQuery,
     usePostOptionsFormDataMutation,
     usePostQuestionCloneMutation,
+    usePostQuestionFileUploadMutation,
     useQuestionStatesQuery,
 } from './question'
diff --git a/frontend/src/queries/question.ts b/frontend/src/queries/question.ts
index bc5df5d9..a3367f8b 100644
--- a/frontend/src/queries/question.ts
+++ b/frontend/src/queries/question.ts
@@ -8,6 +8,7 @@ import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
 
 import type {
     DetailedServerError,
+    OptionsFile,
     OptionsFormData,
     OptionsFormDefinition,
     OptionsStateResponse,
@@ -143,6 +144,24 @@ function usePostQuestionCloneMutation(questionId: string, newQuestionId: string)
     })
 }
 
+/**
+ * Upload one or more options files.
+ *
+ * @param files An array of `File` objects to upload.
+
+ * @returns An mutation return object.
+ */
+function usePostQuestionFileUploadMutation(files: File[]) {
+    const formData = new FormData()
+    for (const file of files) {
+        formData.append('file', file)
+    }
+
+    return useMutation({
+        mutation: () => post<OptionsFile[]>(`question/file-upload`, formData),
+    })
+}
+
 export {
     useDeleteAllOptionsFormDataMutation,
     useDeleteOptionsFormDataMutation,
@@ -150,5 +169,6 @@ export {
     useOptionsFormDefinitionQuery,
     usePostOptionsFormDataMutation,
     usePostQuestionCloneMutation,
+    usePostQuestionFileUploadMutation,
     useQuestionStatesQuery,
 }
diff --git a/frontend/src/stores/usePendingOperationsStore.ts b/frontend/src/stores/usePendingOperationsStore.ts
index c9eac295..e8ce284e 100644
--- a/frontend/src/stores/usePendingOperationsStore.ts
+++ b/frontend/src/stores/usePendingOperationsStore.ts
@@ -40,9 +40,20 @@ interface DeferredItemOperation {
     id: string
 }
 
+/** A file upload operation. */
+interface FileUploadOperation {
+    type: 'file-upload'
+}
+
 type OperationModelType = 'attempt' | 'question'
 type OperationType = Operation['type']
-type Operation = SubmitOperation | ScoreOperation | DeleteOperation | CloneOperation | DeferredItemOperation
+type Operation =
+    | SubmitOperation
+    | ScoreOperation
+    | DeleteOperation
+    | CloneOperation
+    | DeferredItemOperation
+    | FileUploadOperation
 
 type ExtractOperation<K extends OperationType> = Extract<Operation, { type: K }>
 
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 64fc92b7..6a33ac57 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -9,6 +9,7 @@ import type { ValidationState } from 'bootstrap-vue-next'
 import type {
     CheckboxElement,
     Condition,
+    FileUploadElement,
     FormElement,
     GeneratedIdElement,
     GroupElement,
@@ -20,6 +21,7 @@ import type {
     StaticTextElement,
     TextAreaElement,
     TextInputElement,
+    WysiwygEditorElement,
 } from './OptionsFormDefinition.generated'
 import type {
     OptionsFile,
@@ -27,6 +29,7 @@ import type {
     OptionsFormModelValue,
     OptionsFormValue,
     OptionsStateResponse,
+    RichTextEditor,
 } from './OptionsStateResponse.generated'
 
 /** Mapping of form element `kind` types to their corresponding value types. */
@@ -39,6 +42,8 @@ interface ElementValueMap {
     select: string | string[]
     hidden: string
     id: string
+    file_upload: OptionsFile[]
+    wysiwyg_editor: RichTextEditor
 }
 
 /** Utility to look up value type by form element. */
@@ -57,6 +62,8 @@ type EditableElement =
     | SelectElement
     | TextInputElement
     | TextAreaElement
+    | FileUploadElement
+    | WysiwygEditorElement
 
 /** Form element that has `elements` property. */
 type HasElements = Extract<FormElement, { elements: FormElement[] }>
@@ -99,7 +106,14 @@ export type { ClientQuestionDisplayOptions, DisplayRole } from './ClientQuestion
 export type { DetailedServerError, ErrorDetails } from './DetailedServerError.generated'
 export type { ErrorSectionKey } from './ErrorSectionKey.generated'
 export type { Manifest } from './Manifest.generated'
-export { assertNever, hasElements, isDetailedServerError, isEditableElement, isObject } from './typeUtils'
+export {
+    assertNever,
+    hasElements,
+    isDetailedServerError,
+    isEditableElement,
+    isObject,
+    isRichTextEditor,
+} from './typeUtils'
 export type {
     CanHaveConditions,
     CanHaveHelp,
@@ -108,6 +122,7 @@ export type {
     EditableElement,
     ElementPath,
     ElementToValue,
+    FileUploadElement,
     FormElement,
     GeneratedIdElement,
     GroupElement,
@@ -121,10 +136,12 @@ export type {
     OptionsStateResponse,
     RadioGroupElement,
     RepetitionElement,
+    RichTextEditor,
     SelectElement,
     ServerValidationErrors,
     StaticTextElement,
     TextAreaElement,
     TextInputElement,
     ValidationInfo,
+    WysiwygEditorElement,
 }
diff --git a/frontend/src/types/typeUtils.ts b/frontend/src/types/typeUtils.ts
index ea089eb2..dd2ea682 100644
--- a/frontend/src/types/typeUtils.ts
+++ b/frontend/src/types/typeUtils.ts
@@ -10,6 +10,7 @@ import type {
     FormElement,
     HasElements,
     OptionsFile,
+    RichTextEditor,
     ServerValidationErrors,
 } from '.'
 
@@ -56,6 +57,16 @@ function isOptionsFile(value: unknown): value is OptionsFile {
     return isObject(value) && typeof value.file_ref === 'string'
 }
 
+/** Type guard for `RichTextEditor`. */
+function isRichTextEditor(value: unknown): value is RichTextEditor {
+    return (
+        isObject(value) &&
+        typeof value.text === 'string' &&
+        Array.isArray(value.files) &&
+        value.files.every((f) => isOptionsFile(f))
+    )
+}
+
 export {
     assertNever,
     hasElements,
@@ -63,5 +74,6 @@ export {
     isEditableElement,
     isObject,
     isOptionsFile,
+    isRichTextEditor,
     isServerValidationErrors,
 }
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index eab9d976..a50c8e2d 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -27,6 +27,14 @@ export default defineConfig({
     build: {
         emptyOutDir: true, // Suppress warning when outputting to folder outside of project dir
         outDir: path.resolve(import.meta.dirname, '..', 'questionpy_sdk', 'webserver', 'static'),
+        rollupOptions: {
+            output: {
+                manualChunks: {
+                    // As a large package, give TinyMCE an own chunk
+                    tinymce: ['tinymce'],
+                },
+            },
+        },
     },
     css: {
         preprocessorOptions: {
diff --git a/questionpy_sdk/webserver/constants.py b/questionpy_sdk/webserver/constants.py
index 11008b87..21036560 100644
--- a/questionpy_sdk/webserver/constants.py
+++ b/questionpy_sdk/webserver/constants.py
@@ -16,6 +16,7 @@
 
 API_PATH_PREFIX = "/api"
 ID_RE = r"[A-Za-z0-9_-]{8}"
+FILE_REF_RE = r"[a-zA-Z0-9\-_=]{1,64}"
 
 WEBSERVER_KEY: web.AppKey["WebServer"] = web.AppKey("qpy_webserver")
 REQUEST_CONTROLLER_KEY = "qpy_controller"
diff --git a/questionpy_sdk/webserver/controllers/file.py b/questionpy_sdk/webserver/controllers/file.py
index 732815ed..ea64bff1 100644
--- a/questionpy_sdk/webserver/controllers/file.py
+++ b/questionpy_sdk/webserver/controllers/file.py
@@ -1,6 +1,7 @@
 #  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.base import BaseController
 from questionpy_server.worker import PackageFileData
 
diff --git a/questionpy_sdk/webserver/controllers/question.py b/questionpy_sdk/webserver/controllers/question.py
index 2c9b44bb..a0d71951 100644
--- a/questionpy_sdk/webserver/controllers/question.py
+++ b/questionpy_sdk/webserver/controllers/question.py
@@ -2,8 +2,13 @@
 #  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
+import hashlib
+import tempfile
+from collections.abc import AsyncIterable, Mapping
+from contextlib import AbstractContextManager
+from datetime import UTC, datetime
+from pathlib import Path
+from typing import IO, BinaryIO, cast
 
 from pydantic import ConfigDict
 from pydantic.dataclasses import dataclass
@@ -110,3 +115,34 @@ 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)
+
+    async def add_file(self, filename: str, mime_type: str, reader: AsyncIterable[bytes]) -> OptionsFile:
+        # Temp file needed to hash content before saving; reader is single-use.
+        # Likely fails on Windows (moving open files)
+        with tempfile.NamedTemporaryFile() as tmp_file:
+            file_ref, size = await self._process_file(reader, tmp_file)
+            await self._state_manager.add_options_file(file_ref, Path(tmp_file.name))
+
+            return OptionsFile(
+                path="/",
+                filename=filename,
+                file_ref=file_ref,
+                uploaded_at=datetime.now(UTC),
+                mime_type=mime_type,
+                size=size,
+            )
+
+    async def get_file(
+        self, question_id: str, name: str, file_ref: str
+    ) -> tuple[OptionsFile, AbstractContextManager[BinaryIO]]:
+        return await self._state_manager.get_options_file(question_id, name, file_ref)
+
+    async def _process_file(self, reader: AsyncIterable[bytes], file: IO[bytes]) -> tuple[str, int]:
+        sha1_hash = hashlib.sha1()  # noqa: S324
+        total_size = 0
+        async for chunk in reader:
+            sha1_hash.update(chunk)
+            total_size += len(chunk)
+            file.write(chunk)
+        file.flush()
+        return sha1_hash.hexdigest(), total_size
diff --git a/questionpy_sdk/webserver/errors.py b/questionpy_sdk/webserver/errors.py
index 161fd5f6..628a447c 100644
--- a/questionpy_sdk/webserver/errors.py
+++ b/questionpy_sdk/webserver/errors.py
@@ -28,6 +28,10 @@ class DuplicateQuestionError(StateError):
     message = "The question already exists."
 
 
+class MissingOptionsFileError(MissingStateError):
+    message = "An options file is missing."
+
+
 class MissingAttemptStateError(MissingStateError):
     message = "The attempt state is missing."
 
diff --git a/questionpy_sdk/webserver/routes/question.py b/questionpy_sdk/webserver/routes/question.py
index d1a76e42..f0f37586 100644
--- a/questionpy_sdk/webserver/routes/question.py
+++ b/questionpy_sdk/webserver/routes/question.py
@@ -2,16 +2,21 @@
 #  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 aiohttp import web
+from typing import TYPE_CHECKING
+
+from aiohttp import BodyPartReader, web
 from aiohttp.web_exceptions import HTTPNotFound, HTTPUnprocessableEntity
 from pydantic import RootModel
 
 from questionpy import OptionsFormValidationError
-from questionpy_sdk.webserver.constants import ID_RE
+from questionpy_sdk.webserver.constants import FILE_REF_RE, ID_RE
 from questionpy_sdk.webserver.controllers.question import QuestionController
 from questionpy_sdk.webserver.errors import DuplicateQuestionError, MissingQuestionStateError
 from questionpy_sdk.webserver.routes.base import BaseView
 
+if TYPE_CHECKING:
+    from questionpy.form import OptionsFile
+
 routes = web.RouteTableDef()
 
 
@@ -87,3 +92,64 @@ async def post(self) -> web.Response:
             raise web.HTTPConflict(text=str(err)) from err
 
         return self.json_success_response()
+
+
+@routes.view(f"/question/{{question_id:{ID_RE}}}/file/{{name}}/{{file_ref:{FILE_REF_RE}}}", name="question.file")
+class QuestionFileView(QuestionBaseView):
+    async def get(self) -> web.StreamResponse:
+        """Retrieves an option file."""
+        question_id = self.request.match_info["question_id"]
+        name = self.request.match_info["name"]
+        file_ref = self.request.match_info["file_ref"]
+
+        options_file, file_reader = await self.controller.get_file(question_id, name, file_ref)
+
+        headers = {
+            # Content-addressable -> never changes
+            "Cache-Control": "public, max-age=31536000, immutable",
+            "Content-Disposition": f'inline; filename="{options_file.filename}"',
+            "Content-Length": str(options_file.size),
+            "Content-Type": options_file.mime_type,
+            "Last-Modified": options_file.uploaded_at.strftime("%a, %d %b %Y %H:%M:%S GMT"),
+        }
+
+        resp = web.StreamResponse(headers=headers)
+        await resp.prepare(self.request)
+
+        # stream in chunks
+        chunk_size = 64 * 1024  # 64 KiB
+        with file_reader as f:
+            while chunk := f.read(chunk_size):
+                await resp.write(chunk)
+        await resp.write_eof()
+
+        return resp
+
+
+@routes.view("/question/file-upload", name="question.file-upload")
+class QuestionFileUploadView(QuestionBaseView):
+    async def post(self) -> web.Response:
+        """Processes and stores option files."""
+        files: list[OptionsFile] = []
+
+        async for part in await self.request.multipart():
+            if isinstance(part, BodyPartReader):
+                if part.name != "file":
+                    return web.json_response(
+                        {"error": "Expected part name to be 'file'"}, status=HTTPUnprocessableEntity.status_code
+                    )
+
+                if not part.filename:
+                    return web.json_response({"error": "Missing filename"}, status=HTTPUnprocessableEntity.status_code)
+
+                file = await self.controller.add_file(
+                    part.filename,
+                    part.headers.get("Content-Type", "application/octet-stream"),
+                    part,
+                )
+                files.append(file)
+
+        if len(files) == 0:
+            return web.json_response({"error": "No files in form data"}, status=HTTPUnprocessableEntity.status_code)
+
+        return self.json_model_response(RootModel(files))
diff --git a/questionpy_sdk/webserver/server.py b/questionpy_sdk/webserver/server.py
index 7fc26657..04e03c66 100644
--- a/questionpy_sdk/webserver/server.py
+++ b/questionpy_sdk/webserver/server.py
@@ -79,7 +79,7 @@ async def __aenter__(self) -> Self:
 
         # Initialize state manager
         pkg_dirname = f"{self._manifest.namespace}-{self._manifest.short_name}-{self._manifest.version}"
-        self._state_manager = FilesystemStateManager(self._state_storage_root / pkg_dirname)
+        self._state_manager = FilesystemStateManager(self._state_storage_root, pkg_dirname)
 
         # Create web app
         self._app = self._create_webapp()
diff --git a/questionpy_sdk/webserver/state.py b/questionpy_sdk/webserver/state.py
index 735ac470..9a88b421 100644
--- a/questionpy_sdk/webserver/state.py
+++ b/questionpy_sdk/webserver/state.py
@@ -3,19 +3,25 @@
 #  (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
 
 import asyncio
-import contextlib
 import json
 import re
+import shutil
+from collections.abc import Iterator
+from contextlib import AbstractContextManager, contextmanager, suppress
 from enum import StrEnum
 from pathlib import Path
-from typing import NamedTuple, Protocol
+from typing import Any, BinaryIO, NamedTuple, Protocol
 
-from pydantic import JsonValue, TypeAdapter
+from pydantic import JsonValue, RootModel, TypeAdapter, ValidationError
 
 import questionpy_sdk.webserver.errors as webserver_errors
 from questionpy import ScoreModel
+from questionpy.form import OptionsFile
 from questionpy_sdk.webserver.constants import ID_RE
 
+OptionsFiles = RootModel[dict[str, OptionsFile]]
+"""A mapping of file_refs to OptionsFiles."""
+
 
 class Attempt(NamedTuple):
     state: str
@@ -37,6 +43,11 @@ async def write_question_state(self, question_id: str, question_state: str) -> N
     async def delete_question(self, question_id: str) -> None: ...
     async def delete_all_questions(self) -> None: ...
 
+    async def add_options_file(self, file_ref: str, filepath: Path) -> None: ...
+    async def get_options_file(
+        self, question_id: str, name: str, file_ref: str
+    ) -> tuple[OptionsFile, AbstractContextManager[BinaryIO]]: ...
+
     async def read_attempts(self, question_id: str) -> dict[str, Attempt]: ...
     async def read_attempt_state(self, question_id: str, attempt_id: str) -> str: ...
     async def write_attempt_state(self, question_id: str, attempt_id: str, attempt_state: str) -> None: ...
@@ -70,8 +81,13 @@ class StateFilename(StrEnum):
         ATTEMPT_SCORE = "score.json"
         ATTEMPT_DATA = "attempt_data.json"
 
-    def __init__(self, package_state_dir: Path) -> None:
-        self._package_state_dir = package_state_dir
+    OPTIONS_FILES_DIR = "options_files"
+
+    def __init__(self, storage_root: Path, package_state_dir: str) -> None:
+        self._storage_root = storage_root
+        self._package_state_path = storage_root / package_state_dir
+
+    # ------ Questions
 
     async def read_question_states(self) -> dict[str, str]:
         def _read_question_states() -> dict[str, str]:
@@ -113,7 +129,7 @@ def _delete_question_sync(self, question_id: str) -> None:
             if self._is_id_dir(path):
                 self._delete_attempt_data_sync(question_id, path.name)
 
-        with contextlib.suppress(OSError):
+        with suppress(OSError):
             # Ignore in case of non-empty directory
             question_path.rmdir()
 
@@ -124,6 +140,73 @@ def _delete_all_questions() -> None:
 
         await asyncio.to_thread(_delete_all_questions)
 
+    # ------ Options files
+
+    async def add_options_file(self, file_ref: str, filepath: Path) -> None:
+        await asyncio.to_thread(self._add_options_file_sync, file_ref, filepath)
+
+    def _add_options_file_sync(self, file_ref: str, filepath: Path) -> None:
+        target_path = self._get_sharded_path(file_ref)
+        # If the same content exists already, no need to overwrite
+        if not target_path.exists():
+            target_path.parent.mkdir(parents=True, exist_ok=True)
+            shutil.move(filepath, target_path)
+
+    async def get_options_file(
+        self, question_id: str, name: str, file_ref: str
+    ) -> tuple[OptionsFile, AbstractContextManager[BinaryIO]]:
+        state = await self.read_question_state(question_id)
+        options_file = self._find_file(json.loads(state)["options"], name, file_ref)
+        content_path = self._get_sharded_path(file_ref)
+
+        @contextmanager
+        def read_bytes() -> Iterator[BinaryIO]:
+            try:
+                with content_path.open("rb") as f:
+                    yield f
+            except FileNotFoundError as err:
+                raise webserver_errors.MissingOptionsFileError from err
+
+        return options_file, read_bytes()
+
+    @staticmethod
+    def _find_file(opts: dict[str, Any], name: str, file_ref: str) -> OptionsFile:
+        """Find an `OptionsFile` inside the form data."""
+
+        def get_item(cur: dict[str, Any] | list[Any], p: str | int) -> Any:
+            # Makes mypy happy about cur/p types
+            if isinstance(p, int):
+                if not isinstance(cur, list):
+                    msg = f"Expected list for index {p}, got {type(cur).__name__}"
+                    raise TypeError(msg)
+                return cur[p]
+            if not isinstance(cur, dict):
+                msg = f"Expected dict for key {p}, got {type(cur).__name__}"
+                raise TypeError(msg)
+            return cur[p]
+
+        # Parse path
+        parts = [int(p) if p.isdigit() else p for p in name.split(".")]
+        if parts and parts[0] == "general":
+            parts = parts[1:]  # treat `general` as root-level
+
+        cur: dict[str, Any] | list[Any] = opts
+        with suppress(KeyError, IndexError, TypeError, StopIteration, ValidationError):
+            # Descend into options tree
+            for p in parts:
+                cur = get_item(cur, p)
+            if isinstance(cur, dict) and cur.get("file_ref") == file_ref:
+                # File found
+                return OptionsFile.model_validate(cur)
+
+        raise webserver_errors.MissingOptionsFileError
+
+    def _get_sharded_path(self, file_ref: str) -> Path:
+        """Get sharded file path, e.g. `options_files/ab/abcdef...`."""
+        return self._storage_root / self.OPTIONS_FILES_DIR / file_ref[:2] / file_ref
+
+    # ------ Attempts
+
     async def read_attempts(self, question_id: str) -> dict[str, Attempt]:
         return await asyncio.to_thread(self._read_attempts_sync, question_id)
 
@@ -220,10 +303,12 @@ def _delete_attempt_data_sync(self, question_id: str, attempt_id: str) -> None:
             self.StateFilename.ATTEMPT_SEED,
         ):
             (attempt_path / fname).unlink(missing_ok=True)
-        with contextlib.suppress(OSError):
+        with suppress(OSError):
             # Ignore in case of non-empty directory
             attempt_path.rmdir()
 
+    # ------ Helpers
+
     async def _read_state_file(self, path: Path, filename: "FilesystemStateManager.StateFilename") -> str:
         return await asyncio.to_thread((path / filename).read_text)
 
@@ -235,14 +320,14 @@ def _write_state_file() -> None:
         await asyncio.to_thread(_write_state_file)
 
     def _get_question_path(self, question_id: str) -> Path:
-        return self._package_state_dir / question_id
+        return self._package_state_path / question_id
 
     def _get_attempt_path(self, question_id: str, attempt_id: str) -> Path:
         return self._get_question_path(question_id) / attempt_id
 
     def _get_question_state_paths(self) -> list[Path]:
         try:
-            return [p for p in self._package_state_dir.iterdir() if self._is_id_dir(p)]
+            return [p for p in self._package_state_path.iterdir() if self._is_id_dir(p)]
         except FileNotFoundError:
             # Package dir might not have been created yet
             return []
diff --git a/tests/questionpy_sdk/webserver/controllers/test_question.py b/tests/questionpy_sdk/webserver/controllers/test_question.py
index 7bad0831..9b8ab48b 100644
--- a/tests/questionpy_sdk/webserver/controllers/test_question.py
+++ b/tests/questionpy_sdk/webserver/controllers/test_question.py
@@ -2,6 +2,8 @@
 #  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 AsyncIterable
+from datetime import datetime
 from unittest.mock import AsyncMock, Mock
 
 import pytest
@@ -101,3 +103,30 @@ async def test_clone_question(
 async def test_clone_question_duplicate(controller: QuestionController, mock_state_manager: AsyncMock) -> None:
     with pytest.raises(DuplicateQuestionError):
         await controller.clone_question("QaKxpanc", "tKVJTdsv")
+
+
+async def test_add_file(controller: QuestionController, mock_state_manager: AsyncMock) -> None:
+    async def mock_reader() -> AsyncIterable[bytes]:  # noqa: RUF029
+        yield b"some test content"
+
+    options_file = await controller.add_file("test_file.txt", "text/plain", mock_reader())
+
+    mock_state_manager.add_options_file.assert_called_once()
+    assert options_file.filename == "test_file.txt"
+    assert options_file.mime_type == "text/plain"
+    assert options_file.file_ref == "dbabd43828eccd27e3a109b58454e4ff43c8673e"
+    assert options_file.size == 17
+    assert options_file.path == "/"
+    assert isinstance(options_file.uploaded_at, datetime)
+
+
+async def test_get_file(controller: QuestionController, mock_state_manager: AsyncMock) -> None:
+    expected_options_file = Mock()
+    expected_file_manager = Mock()
+    mock_state_manager.get_options_file.return_value = (expected_options_file, expected_file_manager)
+
+    options_file, file_manager = await controller.get_file("QaKxpanc", "my_file_upload", "abcdef0123456")
+
+    mock_state_manager.get_options_file.assert_called_once_with("QaKxpanc", "my_file_upload", "abcdef0123456")
+    assert options_file == expected_options_file
+    assert file_manager == expected_file_manager
diff --git a/tests/questionpy_sdk/webserver/routes/test_question.py b/tests/questionpy_sdk/webserver/routes/test_question.py
index 884cb8fc..c33abbf1 100644
--- a/tests/questionpy_sdk/webserver/routes/test_question.py
+++ b/tests/questionpy_sdk/webserver/routes/test_question.py
@@ -2,18 +2,34 @@
 #  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 unittest.mock import AsyncMock
+from datetime import UTC, datetime
+from io import BytesIO
+from unittest.mock import ANY, AsyncMock, Mock
 
 import pytest
+from aiohttp import FormData
 from aiohttp.test_utils import TestClient
 from aiohttp.web_exceptions import HTTPConflict, HTTPNotFound, HTTPOk, HTTPUnprocessableEntity
 
 from questionpy import OptionsFormValidationError
+from questionpy.form import OptionsFile
 from questionpy_common.elements import OptionsFormDefinition
 from questionpy_sdk.webserver.errors import DuplicateQuestionError, MissingQuestionStateError
 from questionpy_sdk.webserver.routes.question import routes
 
 
+@pytest.fixture
+def options_file() -> OptionsFile:
+    return OptionsFile(
+        path="/",
+        filename="test_file.txt",
+        file_ref="dbabd43828eccd27e3a109b58454e4ff43c8673e",
+        size=17,
+        uploaded_at=datetime(2025, 1, 1, 12, 0, 0, tzinfo=UTC),
+        mime_type="text/plain",
+    )
+
+
 @pytest.mark.app_routes(routes)
 async def test_get_question(client: TestClient, mock_controller: AsyncMock) -> None:
     mock_controller.get_form_definition.return_value = OptionsFormDefinition()
@@ -96,3 +112,129 @@ async def test_post_question_clone_duplicate(client: TestClient, mock_controller
 
     async with client.post("/question/myuQ2JWl/clone/Bu2boh5u") as resp:
         assert resp.status == HTTPConflict.status_code
+
+
+@pytest.mark.app_routes(routes)
+async def test_get_question_file(client: TestClient, mock_controller: AsyncMock, options_file: OptionsFile) -> None:
+    mock_file_reader = Mock()
+    mock_file_reader.__enter__ = Mock(return_value=mock_file_reader)
+    mock_file_reader.__exit__ = Mock(return_value=None)
+    mock_file_reader.read = Mock(side_effect=[b"some test content"])
+    mock_controller.get_file.return_value = (options_file, mock_file_reader)
+
+    async with client.get("/question/myuQ2JWl/file/my_file_upload/dbabd43828eccd27e3a109b58454e4ff43c8673e") as resp:
+        mock_controller.get_file.assert_awaited_once_with(
+            "myuQ2JWl", "my_file_upload", "dbabd43828eccd27e3a109b58454e4ff43c8673e"
+        )
+
+        assert resp.status == HTTPOk.status_code
+        assert resp.headers["Content-Type"] == "text/plain"
+        assert resp.headers["Last-Modified"] == "Wed, 01 Jan 2025 12:00:00 GMT"
+        assert resp.headers["Content-Length"] == "17"
+        assert "immutable" in resp.headers["Cache-Control"]
+        assert "test_file.txt" in resp.headers["Content-Disposition"]
+        assert await resp.text() == "some test content"
+
+
+@pytest.mark.app_routes(routes)
+async def test_post_question_file_upload_single_file(
+    client: TestClient, mock_controller: AsyncMock, options_file: OptionsFile
+) -> None:
+    mock_controller.add_file.return_value = options_file
+
+    data = FormData()
+    data.add_field("file", b"some test content", filename="test.txt", content_type="text/plain")
+
+    async with client.post("/question/file-upload", data=data) as resp:
+        assert resp.status == HTTPOk.status_code
+        response_data = await resp.json()
+        assert len(response_data) == 1
+        of = response_data[0]
+        assert of["filename"] == "test_file.txt"
+        assert of["file_ref"] == "dbabd43828eccd27e3a109b58454e4ff43c8673e"
+        assert of["size"] == 17
+        assert of["mime_type"] == "text/plain"
+        assert of["uploaded_at"] == "2025-01-01T12:00:00Z"
+        assert of["path"] == "/"
+        mock_controller.add_file.assert_awaited_once_with("test.txt", "text/plain", ANY)
+
+
+@pytest.mark.app_routes(routes)
+async def test_post_question_file_upload_multiple_files(client: TestClient, mock_controller: AsyncMock) -> None:
+    mock_controller.add_file.side_effect = [
+        OptionsFile(
+            path="/",
+            filename="test1.jpg",
+            file_ref="041bb7ae61ffe07323f642b8c72ba96c72c5d2b0",
+            size=11,
+            uploaded_at=datetime(2025, 1, 1, 12, 0, 0, tzinfo=UTC),
+            mime_type="image/jpeg",
+        ),
+        OptionsFile(
+            path="/",
+            filename="test2.jpg",
+            file_ref="c84ce717f09efd2583ca97d3feb69a333e342b5a",
+            size=11,
+            uploaded_at=datetime(2025, 1, 1, 12, 0, 1, tzinfo=UTC),
+            mime_type="image/jpeg",
+        ),
+    ]
+
+    data = FormData()
+    data.add_field("file", b"jpgcontent1", filename="test1.jpg", content_type="image/jpeg")
+    data.add_field("file", b"jpgcontent2", filename="test2.jpg", content_type="image/jpeg")
+
+    async with client.post("/question/file-upload", data=data) as resp:
+        assert resp.status == HTTPOk.status_code
+        response_data = await resp.json()
+        assert len(response_data) == 2
+        of1, of2 = response_data
+
+        assert of1["filename"] == "test1.jpg"
+        assert of1["file_ref"] == "041bb7ae61ffe07323f642b8c72ba96c72c5d2b0"
+        assert of1["size"] == 11
+        assert of1["mime_type"] == "image/jpeg"
+        assert of1["uploaded_at"] == "2025-01-01T12:00:00Z"
+        assert of1["path"] == "/"
+
+        assert of2["filename"] == "test2.jpg"
+        assert of2["file_ref"] == "c84ce717f09efd2583ca97d3feb69a333e342b5a"
+        assert of2["size"] == 11
+        assert of2["mime_type"] == "image/jpeg"
+        assert of2["uploaded_at"] == "2025-01-01T12:00:01Z"
+        assert of2["path"] == "/"
+
+        assert mock_controller.add_file.call_count == 2
+
+
+@pytest.mark.app_routes(routes)
+async def test_post_question_file_upload_no_file(client: TestClient, mock_controller: AsyncMock) -> None:
+    async with client.post("/question/file-upload", data=FormData(default_to_multipart=True)) as resp:
+        assert resp.status == HTTPUnprocessableEntity.status_code
+        data = await resp.json()
+        assert data["error"] == "No files in form data"
+        mock_controller.add_file.assert_not_called()
+
+
+@pytest.mark.app_routes(routes)
+async def test_post_question_file_upload_wrong_part_name(client: TestClient, mock_controller: AsyncMock) -> None:
+    data = FormData()
+    data.add_field("wrongname", b"content", filename="test.txt", content_type="text/plain")
+
+    async with client.post("/question/file-upload", data=data) as resp:
+        assert resp.status == HTTPUnprocessableEntity.status_code
+        response_data = await resp.json()
+        assert response_data["error"] == "Expected part name to be 'file'"
+        mock_controller.add_file.assert_not_called()
+
+
+@pytest.mark.app_routes(routes)
+async def test_post_question_file_upload_missing_filename(client: TestClient, mock_controller: AsyncMock) -> None:
+    data = FormData()
+    data.add_field("file", BytesIO(b"content"), filename="", content_type="text/plain")
+
+    async with client.post("/question/file-upload", data=data) as resp:
+        assert resp.status == HTTPUnprocessableEntity.status_code
+        response_data = await resp.json()
+        assert response_data["error"] == "Missing filename"
+        mock_controller.add_file.assert_not_called()
diff --git a/tests/questionpy_sdk/webserver/test_state.py b/tests/questionpy_sdk/webserver/test_state.py
index e93616bd..e877d162 100644
--- a/tests/questionpy_sdk/webserver/test_state.py
+++ b/tests/questionpy_sdk/webserver/test_state.py
@@ -2,8 +2,9 @@
 #  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 json
 from pathlib import Path
-from typing import TYPE_CHECKING
+from typing import TYPE_CHECKING, Any
 
 import pytest
 
@@ -17,7 +18,7 @@
 
 @pytest.fixture
 def state_manager(tmp_path: Path) -> StateManager:
-    return FilesystemStateManager(tmp_path)
+    return FilesystemStateManager(tmp_path, "test-test-1.00.0")
 
 
 async def test_read_question_states(state_manager: StateManager) -> None:
@@ -50,7 +51,7 @@ async def test_delete_question(state_manager: StateManager, tmp_path: Path) -> N
     await state_manager.write_attempt_state("myuQ2JWl", "UY9ryXzq", "attempt data")
     await state_manager.delete_question("myuQ2JWl")
 
-    assert not (tmp_path / "myuQ2JWl").exists()
+    assert not (tmp_path / "test-test-1.00.0" / "myuQ2JWl").exists()
 
 
 async def test_delete_all_questions(state_manager: StateManager, tmp_path: Path) -> None:
@@ -61,21 +62,316 @@ async def test_delete_all_questions(state_manager: StateManager, tmp_path: Path)
 
     await state_manager.delete_all_questions()
 
-    assert not (tmp_path / "myuQ2JWl").exists()
-    assert not (tmp_path / "nYKEjBaA").exists()
-    assert not (tmp_path / "5YfGRyRs").exists()
+    assert not (tmp_path / "test-test-1.00.0" / "myuQ2JWl").exists()
+    assert not (tmp_path / "test-test-1.00.0" / "nYKEjBaA").exists()
+    assert not (tmp_path / "test-test-1.00.0" / "5YfGRyRs").exists()
 
 
 async def test_delete_question_leaves_other_files(state_manager: StateManager, tmp_path: Path) -> None:
     await state_manager.write_question_state("myuQ2JWl", "data")
-    (tmp_path / "myuQ2JWl" / "some_file").touch()
+    (tmp_path / "test-test-1.00.0" / "myuQ2JWl" / "some_file").touch()
     await state_manager.delete_question("myuQ2JWl")
 
-    question_path = tmp_path / "myuQ2JWl"
+    question_path = tmp_path / "test-test-1.00.0" / "myuQ2JWl"
     assert not (question_path / FilesystemStateManager.StateFilename.QUESTION_STATE).exists()
     assert question_path.exists()
 
 
+async def test_add_options_file(state_manager: FilesystemStateManager, tmp_path: Path) -> None:
+    file_ref = "abcdef1234567890abcdef1234567890abcdef12"
+    source_file = tmp_path / "source_file.txt"
+    source_file.write_text("test content")
+
+    await state_manager.add_options_file(file_ref, source_file)
+
+    expected_path = tmp_path / "options_files" / "ab" / file_ref
+    assert expected_path.exists()
+    assert expected_path.read_text() == "test content"
+    assert not source_file.exists()
+
+
+async def test_add_options_file_existing_target(state_manager: FilesystemStateManager, tmp_path: Path) -> None:
+    file_ref = "abcdef1234567890abcdef1234567890abcdef12"
+    source_file = tmp_path / "source_file.txt"
+    source_file.write_text("test content")
+
+    # Create the target file with the same content (same hash)
+    target_path = tmp_path / "options_files" / "ab" / file_ref
+    target_path.parent.mkdir(parents=True, exist_ok=True)
+    target_path.write_text("test content")
+    original_mtime = target_path.stat().st_mtime
+
+    await state_manager.add_options_file(file_ref, source_file)
+
+    assert target_path.exists()
+    assert target_path.read_text() == "test content"
+
+    # Check that the source file still exists (was not moved); target was not overwritten
+    assert source_file.exists()
+    assert target_path.stat().st_mtime == original_mtime
+
+
+async def test_get_options_file(state_manager: FilesystemStateManager, tmp_path: Path) -> None:
+    file_ref = "abcdef1234567890abcdef1234567890abcdef12"
+    source_file = tmp_path / "source_file.txt"
+    source_file.write_text("test content")
+
+    await state_manager.add_options_file(file_ref, source_file)
+
+    question_state = {
+        "options": {
+            "file_upload": [
+                {
+                    "path": "/",
+                    "filename": "test_file.txt",
+                    "file_ref": file_ref,
+                    "uploaded_at": "2025-11-06T15:13:15.631214Z",
+                    "mime_type": "text/plain",
+                    "size": 12,
+                }
+            ]
+        }
+    }
+
+    await state_manager.write_question_state("myuQ2JWl", json.dumps(question_state))
+    options_file, file_context = await state_manager.get_options_file("myuQ2JWl", "file_upload.0", file_ref)
+
+    assert options_file.filename == "test_file.txt"
+    assert options_file.file_ref == file_ref
+    assert options_file.mime_type == "text/plain"
+
+    with file_context as f:
+        content = f.read()
+        assert content == b"test content"
+
+
+async def test_get_options_file_inside_section(state_manager: FilesystemStateManager, tmp_path: Path) -> None:
+    file_ref = "1234567890abcdef1234567890abcdef12345678"
+    source_file = tmp_path / "source_file.txt"
+    source_file.write_text("inside section")
+
+    await state_manager.add_options_file(file_ref, source_file)
+
+    question_state = {
+        "options": {
+            "foo_section": {
+                "foo_file_upload": [
+                    {
+                        "path": "/",
+                        "filename": "section_file.txt",
+                        "file_ref": file_ref,
+                        "uploaded_at": "2025-11-06T15:13:28.997740Z",
+                        "mime_type": "text/plain",
+                        "size": 14,
+                    }
+                ]
+            }
+        }
+    }
+
+    await state_manager.write_question_state("myuQ2JWl", json.dumps(question_state))
+    options_file, file_context = await state_manager.get_options_file(
+        "myuQ2JWl", "foo_section.foo_file_upload.0", file_ref
+    )
+
+    assert options_file.filename == "section_file.txt"
+    assert options_file.file_ref == file_ref
+    assert options_file.mime_type == "text/plain"
+
+    with file_context as f:
+        content = f.read()
+        assert content == b"inside section"
+
+
+async def test_get_options_file_inside_group(state_manager: FilesystemStateManager, tmp_path: Path) -> None:
+    file_ref = "fedcba0987654321fedcba0987654321fedcba09"
+    source_file = tmp_path / "source_file.txt"
+    source_file.write_text("inside group")
+
+    await state_manager.add_options_file(file_ref, source_file)
+
+    question_state = {
+        "options": {
+            "bar_group": {
+                "some_input": "",
+                "bar_file_upload": [
+                    {
+                        "path": "/",
+                        "filename": "group_file.txt",
+                        "file_ref": file_ref,
+                        "uploaded_at": "2025-11-06T15:13:25.082918Z",
+                        "mime_type": "text/plain",
+                        "size": 12,
+                    }
+                ],
+            }
+        }
+    }
+
+    await state_manager.write_question_state("myuQ2JWl", json.dumps(question_state))
+    options_file, file_context = await state_manager.get_options_file(
+        "myuQ2JWl", "bar_group.bar_file_upload.0", file_ref
+    )
+
+    assert options_file.filename == "group_file.txt"
+    assert options_file.file_ref == file_ref
+    assert options_file.mime_type == "text/plain"
+
+    with file_context as f:
+        content = f.read()
+        assert content == b"inside group"
+
+
+async def test_get_options_file_inside_repetition(state_manager: FilesystemStateManager, tmp_path: Path) -> None:
+    file_ref = "0123456789abcdef0123456789abcdef01234567"
+    source_file = tmp_path / "source_file.txt"
+    source_file.write_text("inside repetition")
+
+    await state_manager.add_options_file(file_ref, source_file)
+
+    question_state = {
+        "options": {
+            "my_repetition": [
+                {"some_input": "", "bar_file_upload": []},
+                {
+                    "some_input": "",
+                    "bar_file_upload": [
+                        {
+                            "path": "/",
+                            "filename": "repetition_file.txt",
+                            "file_ref": file_ref,
+                            "uploaded_at": "2025-11-06T15:13:22.512159Z",
+                            "mime_type": "text/plain",
+                            "size": 17,
+                        }
+                    ],
+                },
+            ]
+        }
+    }
+
+    await state_manager.write_question_state("myuQ2JWl", json.dumps(question_state))
+    options_file, file_context = await state_manager.get_options_file(
+        "myuQ2JWl", "my_repetition.1.bar_file_upload.0", file_ref
+    )
+
+    assert options_file.filename == "repetition_file.txt"
+    assert options_file.file_ref == file_ref
+    assert options_file.mime_type == "text/plain"
+
+    with file_context as f:
+        content = f.read()
+        assert content == b"inside repetition"
+
+
+@pytest.mark.parametrize(
+    "path",
+    [
+        "file_upload.0",
+        "foo_section.foo_file_upload.0",
+        "bar_group.bar_file_upload.0",
+        "my_repetition.1.bar_file_upload.0",
+    ],
+)
+async def test_get_options_file_missing_question(state_manager: FilesystemStateManager, path: str) -> None:
+    with pytest.raises(webserver_errors.MissingQuestionStateError):
+        await state_manager.get_options_file("nonexistent_question", path, "abcdef1234567890abcdef1234567890abcdef12")
+
+
+def make_question_state(file_ref: str) -> dict[str, Any]:
+    return {
+        "options": {
+            "file_upload": [
+                {
+                    "path": "/",
+                    "filename": "file.txt",
+                    "file_ref": file_ref,
+                    "uploaded_at": "2025-11-06T15:13:15.631214Z",
+                    "mime_type": "text/plain",
+                    "size": 4,
+                }
+            ],
+            "foo_section": {
+                "foo_file_upload": [
+                    {
+                        "path": "/",
+                        "filename": "file.txt",
+                        "file_ref": file_ref,
+                        "uploaded_at": "2025-11-06T15:13:28.997740Z",
+                        "mime_type": "text/plain",
+                        "size": 4,
+                    }
+                ]
+            },
+            "bar_group": {
+                "some_input": "",
+                "bar_file_upload": [
+                    {
+                        "path": "/",
+                        "filename": "file.txt",
+                        "file_ref": file_ref,
+                        "uploaded_at": "2025-11-06T15:13:25.082918Z",
+                        "mime_type": "text/plain",
+                        "size": 4,
+                    }
+                ],
+            },
+            "my_repetition": [
+                {"some_input": ""},
+                {
+                    "some_input": "",
+                    "bar_file_upload": [
+                        {
+                            "path": "/",
+                            "filename": "file.txt",
+                            "file_ref": file_ref,
+                            "uploaded_at": "2025-11-06T15:13:22.512159Z",
+                            "mime_type": "text/plain",
+                            "size": 4,
+                        }
+                    ],
+                },
+            ],
+        }
+    }
+
+
+@pytest.mark.parametrize(
+    "path",
+    [
+        "file_upload.0",
+        "foo_section.foo_file_upload.0",
+        "bar_group.bar_file_upload.0",
+        "my_repetition.1.bar_file_upload.0",
+    ],
+)
+async def test_get_options_file_missing_file(state_manager: FilesystemStateManager, path: str) -> None:
+    question_state = make_question_state("different_file_ref")
+    await state_manager.write_question_state("myuQ2JWl", json.dumps(question_state))
+
+    with pytest.raises(webserver_errors.MissingOptionsFileError):
+        await state_manager.get_options_file("myuQ2JWl", path, "abcdef1234567890abcdef1234567890abcdef12")
+
+
+@pytest.mark.parametrize(
+    "path",
+    [
+        "file_upload.0",
+        "foo_section.foo_file_upload.0",
+        "bar_group.bar_file_upload.0",
+        "my_repetition.1.bar_file_upload.0",
+    ],
+)
+async def test_get_options_file_missing_content(state_manager: FilesystemStateManager, path: str) -> None:
+    file_ref = "abcdef1234567890abcdef1234567890abcdef12"
+    question_state = make_question_state(file_ref)
+    await state_manager.write_question_state("myuQ2JWl", json.dumps(question_state))
+
+    _, file_context = await state_manager.get_options_file("myuQ2JWl", path, file_ref)
+    with pytest.raises(webserver_errors.MissingOptionsFileError), file_context:
+        pass
+
+
 async def test_read_attempts(state_manager: StateManager) -> None:
     await state_manager.write_question_state("myuQ2JWl", "data1")
     await state_manager.write_question_state("nYKEjBaA", "data2")
@@ -151,15 +447,17 @@ async def test_delete_attempt(state_manager: StateManager, tmp_path: Path) -> No
     )
     await state_manager.delete_attempt("myuQ2JWl", "UY9ryXzq")
 
-    assert not (tmp_path / "myuQ2JWl" / "UY9ryXzq").exists()
-    assert (tmp_path / "myuQ2JWl" / FilesystemStateManager.StateFilename.QUESTION_STATE).exists()
+    assert not (tmp_path / "test-test-1.00.0" / "myuQ2JWl" / "UY9ryXzq").exists()
+    assert (tmp_path / "test-test-1.00.0" / "myuQ2JWl" / FilesystemStateManager.StateFilename.QUESTION_STATE).exists()
 
 
 async def test_delete_attempt_leaves_other_files(state_manager: StateManager, tmp_path: Path) -> None:
     await state_manager.write_attempt_seed("myuQ2JWl", "UY9ryXzq", 123)
-    some_file_path = tmp_path / "myuQ2JWl" / "UY9ryXzq" / "some_file"
+    some_file_path = tmp_path / "test-test-1.00.0" / "myuQ2JWl" / "UY9ryXzq" / "some_file"
     some_file_path.touch()
     await state_manager.delete_attempt("myuQ2JWl", "UY9ryXzq")
 
-    assert not (tmp_path / "myuQ2JWl" / "UY9ryXzq" / FilesystemStateManager.StateFilename.ATTEMPT_SEED).exists()
+    assert not (
+        tmp_path / "test-test-1.00.0" / "myuQ2JWl" / "UY9ryXzq" / FilesystemStateManager.StateFilename.ATTEMPT_SEED
+    ).exists()
     assert some_file_path.exists()
diff --git a/tests/questionpy_sdk/webserver/test_webserver.py b/tests/questionpy_sdk/webserver/test_webserver.py
index e219750e..d2e1b4d8 100644
--- a/tests/questionpy_sdk/webserver/test_webserver.py
+++ b/tests/questionpy_sdk/webserver/test_webserver.py
@@ -16,7 +16,6 @@
 from questionpy_common.api.qtype import QuestionTypeInterface
 from questionpy_common.constants import DIST_DIR
 from questionpy_sdk._package import build_qpy_package
-from questionpy_sdk._package._helper import create_normalized_filename
 from questionpy_sdk._package.source import PackageSource
 from questionpy_sdk.webserver.server import WebServer
 from questionpy_server.hash import calculate_hash
@@ -37,10 +36,7 @@ def mock_state_manager(monkeypatch: pytest.MonkeyPatch) -> Iterator[Mock]:
 
 
 async def test_webserver_startup(
-    mock_worker_pool: tuple[Mock, MagicMock],
-    mock_worker: AsyncMock,
-    mock_web_components: tuple[Mock, AsyncMock],
-    mock_state_manager: Mock,
+    mock_worker_pool: tuple[Mock, MagicMock], mock_web_components: tuple[Mock, AsyncMock], mock_state_manager: Mock
 ) -> None:
     mock_worker_pool_cls, mock_worker_pool_instance = mock_worker_pool
     mock_app_runner, mock_tcp_site = mock_web_components
@@ -50,13 +46,8 @@ async def test_webserver_startup(
 
     async with WebServer(package_location=package_location, state_storage_path=state_storage_path):
         mock_worker_pool_cls.assert_called_once()
-
         mock_worker_pool_instance.get_worker.assert_not_called()
-
-        file_name = create_normalized_filename(package_location.manifest)
-        expected_path = state_storage_path / file_name
-        mock_state_manager.assert_called_once_with(expected_path.with_suffix(""))
-
+        mock_state_manager.assert_called_once_with(state_storage_path, "test-init-0.1.0-debug")
         mock_app_runner.setup.assert_awaited_once()
         mock_tcp_site.return_value.start.assert_awaited_once()