diff --git a/package-lock.json b/package-lock.json
index 88161a020..39c5f9e82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,6 @@
         "crypto-js": "^4.2.0",
         "debounce": "^2.2.0",
         "markdown-it": "^14.1.0",
-        "p-debounce": "^4.0.0",
         "p-queue": "^8.0.1",
         "qrcode": "^1.5.4",
         "v-click-outside": "^3.2.0",
@@ -10112,15 +10111,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/p-debounce": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-debounce/-/p-debounce-4.0.0.tgz",
-      "integrity": "sha512-4Ispi9I9qYGO4lueiLDhe4q4iK5ERK8reLsuzH6BPaXn53EGaua8H66PXIFGrW897hwjXp+pVLrm/DLxN0RF0A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
diff --git a/package.json b/package.json
index fc795acf7..e137d9ca1 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,6 @@
     "crypto-js": "^4.2.0",
     "debounce": "^2.2.0",
     "markdown-it": "^14.1.0",
-    "p-debounce": "^4.0.0",
     "p-queue": "^8.0.1",
     "qrcode": "^1.5.4",
     "v-click-outside": "^3.2.0",
diff --git a/playwright/support/sections/QuestionSection.ts b/playwright/support/sections/QuestionSection.ts
index 2b6c44acd..1c565f53d 100644
--- a/playwright/support/sections/QuestionSection.ts
+++ b/playwright/support/sections/QuestionSection.ts
@@ -19,10 +19,10 @@ export class QuestionSection {
 			name: /title of/i,
 		})
 		this.newAnswerInput = this.section.getByRole('textbox', {
-			name: 'Add a new answer',
+			name: 'Add a new answer option',
 		})
 		this.answerInputs = this.section.getByRole('textbox', {
-			name: /Answer number \d+/i,
+			name: /The text of option \d+/i,
 		})
 	}
 
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index d0c50220e..c355b59be 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -11,28 +11,59 @@
 			class="question__item__pseudoInput" />
 		<input
 			ref="input"
-			:aria-label="t('forms', 'Answer number {index}', { index: index + 1 })"
-			:placeholder="t('forms', 'Answer number {index}', { index: index + 1 })"
+			:aria-label="ariaLabel"
+			:placeholder="placeholder"
 			:value="answer.text"
 			class="question__input"
 			:class="{ 'question__input--shifted': !isDropdown }"
 			:maxlength="maxOptionLength"
-			minlength="1"
 			type="text"
 			dir="auto"
 			@input="debounceOnInput"
 			@keydown.delete="deleteEntry"
-			@keydown.enter.prevent="focusNextInput" />
-
-		<!-- Delete answer -->
-		<NcActions>
-			<NcActionButton @click="deleteEntry">
-				<template #icon>
-					<IconClose :size="20" />
-				</template>
-				{{ t('forms', 'Delete answer') }}
-			</NcActionButton>
-		</NcActions>
+			@keydown.enter.prevent="focusNextInput"
+			@compositionstart="onCompositionEnd"
+			@compositionend="onCompositionEnd" />
+
+		<!-- Actions for reordering and deleting the option  -->
+		<div class="option__actions">
+			<template v-if="!answer.local">
+				<NcButton
+					ref="buttonUp"
+					class="option__actions-button"
+					:aria-label="t('forms', 'Move option up')"
+					:disabled="index === 0"
+					size="small"
+					type="tertiary"
+					@click="onMoveUp">
+					<template #icon>
+						<IconArrowUp :size="20" />
+					</template>
+				</NcButton>
+				<NcButton
+					ref="buttonDown"
+					class="option__actions-button"
+					:aria-label="t('forms', 'Move option down')"
+					:disabled="index === maxIndex"
+					size="small"
+					type="tertiary"
+					@click="onMoveDown">
+					<template #icon>
+						<IconArrowDown :size="20" />
+					</template>
+				</NcButton>
+				<NcButton
+					class="option__actions-button"
+					:aria-label="t('forms', 'Delete answer')"
+					size="small"
+					type="tertiary"
+					@click="deleteEntry">
+					<template #icon>
+						<IconDelete :size="20" />
+					</template>
+				</NcButton>
+			</template>
+		</div>
 	</li>
 </template>
 
@@ -40,13 +71,13 @@
 import { showError } from '@nextcloud/dialogs'
 import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
-import pDebounce from 'p-debounce'
-// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import debounce from 'debounce'
 import PQueue from 'p-queue'
 
-import NcActions from '@nextcloud/vue/components/NcActions'
-import NcActionButton from '@nextcloud/vue/components/NcActionButton'
-import IconClose from 'vue-material-design-icons/Close.vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
+import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconCheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'
 import IconRadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'
 
@@ -57,11 +88,12 @@ export default {
 	name: 'AnswerInput',
 
 	components: {
-		IconClose,
+		IconArrowDown,
+		IconArrowUp,
 		IconCheckboxBlankOutline,
+		IconDelete,
 		IconRadioboxBlank,
-		NcActions,
-		NcActionButton,
+		NcButton,
 	},
 
 	props: {
@@ -83,6 +115,10 @@ export default {
 		},
 		isDropdown: {
 			type: Boolean,
+			default: false,
+		},
+		maxIndex: {
+			type: Number,
 			required: true,
 		},
 		maxOptionLength: {
@@ -95,10 +131,27 @@ export default {
 		return {
 			queue: null,
 			debounceOnInput: null,
+			isIMEComposing: false,
 		}
 	},
 
 	computed: {
+		ariaLabel() {
+			if (this.answer.local) {
+				return t('forms', 'Add a new answer option')
+			}
+			return t('forms', 'The text of option {index}', {
+				index: this.index + 1,
+			})
+		},
+
+		placeholder() {
+			if (this.answer.local) {
+				return t('forms', 'Add a new answer option')
+			}
+			return t('forms', 'Answer number {index}', { index: this.index + 1 })
+		},
+
 		pseudoIcon() {
 			return this.isUnique ? IconRadioboxBlank : IconCheckboxBlankOutline
 		},
@@ -108,8 +161,8 @@ export default {
 		this.queue = new PQueue({ concurrency: 1 })
 
 		// As data instead of method, to have a separate debounce per AnswerInput
-		this.debounceOnInput = pDebounce(() => {
-			return this.queue.add(() => this.onInput())
+		this.debounceOnInput = debounce((event) => {
+			return this.queue.add(() => this.onInput(event))
 		}, 500)
 	},
 
@@ -122,29 +175,34 @@ export default {
 		 * Focus the input
 		 */
 		focus() {
-			this.$refs.input.focus()
+			this.$refs.input?.focus()
 		},
 
 		/**
 		 * Option changed, processing the data
+		 *
+		 * @param {InputEvent} event The input event that triggered adding a new entry
 		 */
-		async onInput() {
-			// clone answer
-			const answer = Object.assign({}, this.answer)
-			answer.text = this.$refs.input.value
+		async onInput({ target, isComposing }) {
+			if (!isComposing && !this.isIMEComposing && target.value !== '') {
+				// clone answer
+				const answer = Object.assign({}, this.answer)
+				answer.text = this.$refs.input.value
 
-			if (this.answer.local) {
-				// Dispatched for creation. Marked as synced
-				this.$set(this.answer, 'local', false)
-				const newAnswer = await this.createAnswer(answer)
-
-				// Forward changes, but use current answer.text to avoid erasing
-				// any in-between changes while creating the answer
-				newAnswer.text = this.$refs.input.value
-				this.$emit('update:answer', answer.id, newAnswer)
-			} else {
-				await this.updateAnswer(answer)
-				this.$emit('update:answer', answer.id, answer)
+				if (this.answer.local) {
+					// Dispatched for creation. Marked as synced
+					this.$set(this.answer, 'local', false)
+					const newAnswer = await this.createAnswer(answer)
+
+					// Forward changes, but use current answer.text to avoid erasing
+					// any in-between changes while creating the answer
+					newAnswer.text = this.$refs.input.value
+
+					this.$emit('create-answer', this.index, newAnswer)
+				} else {
+					await this.updateAnswer(answer)
+					this.$emit('update:answer', this.index, answer)
+				}
 			}
 		},
 
@@ -152,7 +210,9 @@ export default {
 		 * Request a new answer
 		 */
 		focusNextInput() {
-			this.$emit('focus-next', this.index)
+			if (this.index <= this.maxIndex) {
+				this.$emit('focus-next', this.index)
+			}
 		},
 
 		/**
@@ -162,6 +222,10 @@ export default {
 		 * @param {Event} e the event
 		 */
 		async deleteEntry(e) {
+			if (this.answer.local) {
+				return
+			}
+
 			if (e.type !== 'click' && this.$refs.input.value.length !== 0) {
 				return
 			}
@@ -169,7 +233,13 @@ export default {
 			// Dismiss delete key action
 			e.preventDefault()
 
-			this.$emit('delete', this.answer.id)
+			// do this in queue to prevent race conditions between PATCH and DELETE
+			this.queue.add(() => {
+				this.$emit('delete', this.answer.id)
+				// Prevent any patch requests
+				this.queue.pause()
+				this.queue.clear()
+			})
 		},
 
 		/**
@@ -196,7 +266,7 @@ export default {
 
 				// Was synced once, this is now up to date with the server
 				delete answer.local
-				return Object.assign({}, answer, OcsResponse2Data(response)[0])
+				return OcsResponse2Data(response)[0]
 			} catch (error) {
 				logger.error('Error while saving answer', { answer, error })
 				showError(t('forms', 'Error while saving the answer'))
@@ -233,6 +303,45 @@ export default {
 				logger.error('Error while saving answer', { answer, error })
 				showError(t('forms', 'Error while saving the answer'))
 			}
+			return answer
+		},
+
+		/**
+		 * Reorder option but keep focus on the button
+		 */
+		onMoveDown() {
+			this.$emit('move-down')
+			if (this.index < this.maxIndex - 1) {
+				this.$nextTick(() => this.$refs.buttonDown.$el.focus())
+			} else {
+				this.$nextTick(() => this.$refs.buttonUp.$el.focus())
+			}
+		},
+		onMoveUp() {
+			this.$emit('move-up')
+			if (this.index > 1) {
+				this.$nextTick(() => this.$refs.buttonUp.$el.focus())
+			} else {
+				this.$nextTick(() => this.$refs.buttonDown.$el.focus())
+			}
+		},
+
+		/**
+		 * Handle composition start event for IME inputs
+		 */
+		onCompositionStart() {
+			this.isIMEComposing = true
+		},
+
+		/**
+		 * Handle composition end event for IME inputs
+		 * @param {CompositionEvent} event The input event that triggered adding a new entry
+		 */
+		onCompositionEnd({ target, isComposing }) {
+			this.isIMEComposing = false
+			if (!isComposing) {
+				this.onInput({ target, isComposing })
+			}
 		},
 	},
 }
@@ -243,24 +352,42 @@ export default {
 	position: relative;
 	display: inline-flex;
 	min-height: var(--default-clickable-area);
+	width: 100%;
 
 	&__pseudoInput {
 		color: var(--color-primary-element);
-		margin-inline-start: -2px;
+		margin-inline-start: calc(-1 * var(--default-grid-baseline));
 		z-index: 1;
 	}
 
+	.option__actions {
+		display: flex;
+		position: absolute;
+		gap: var(--default-grid-baseline);
+		inset-inline-end: 16px;
+		height: var(--default-clickable-area);
+	}
+
+	.option__actions-button {
+		margin-block: auto;
+
+		&:last-of-type {
+			margin-inline: 5px;
+		}
+	}
+
 	.question__input {
 		width: calc(100% - var(--default-clickable-area));
 		position: relative;
 		inset-inline-start: -12px;
+		margin-block: 0 !important;
 		margin-inline-end: -12px !important;
 
 		&--shifted {
-			inset-inline-start: -34px;
-			inset-block-start: 1px;
-			margin-inline-end: -34px !important;
-			padding-inline-start: 36px !important;
+			inset-inline-start: calc(-1 * var(--default-clickable-area));
+			padding-inline-start: calc(
+				var(--default-clickable-area) + var(--default-grid-baseline)
+			) !important;
 		}
 	}
 }
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index 195627bee..fd36b4f26 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -40,39 +40,27 @@
 			<div v-if="isLoading">
 				<NcLoadingIcon :size="64" />
 			</div>
-			<ol v-else class="question__content">
+			<TransitionList v-else class="question__content">
 				<!-- Answer text input edit -->
 				<AnswerInput
-					v-for="(answer, index) in options"
-					:key="
-						index /* using index to keep the same vnode after new answer creation */
-					"
+					v-for="(answer, index) in sortedOptions"
+					:key="answer.local ? 'option-local' : answer.id"
 					ref="input"
 					:answer="answer"
 					:form-id="formId"
+					is-dropdown
 					:index="index"
 					:is-unique="!isMultiple"
-					:is-dropdown="true"
+					:max-index="options.length - 1"
 					:max-option-length="maxStringLengths.optionText"
+					@create-answer="onCreateAnswer"
+					@update:answer="updateAnswer(index, $event)"
 					@delete="deleteOption"
-					@update:answer="updateAnswer"
 					@focus-next="focusNextInput"
+					@move-up="onOptionMoveUp(index)"
+					@move-down="onOptionMoveDown(index)"
 					@tabbed-out="checkValidOption" />
-
-				<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
-					<input
-						ref="pseudoInput"
-						class="question__input"
-						:aria-label="t('forms', 'Add a new answer')"
-						:placeholder="t('forms', 'Add a new answer')"
-						:maxlength="maxStringLengths.optionText"
-						minlength="1"
-						type="text"
-						@input="addNewEntry"
-						@compositionstart="onCompositionStart"
-						@compositionend="onCompositionEnd" />
-				</li>
-			</ol>
+			</TransitionList>
 		</template>
 
 		<!-- Add multiple options modal -->
@@ -83,10 +71,6 @@
 </template>
 
 <script>
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
-import { generateOcsUrl } from '@nextcloud/router'
-import axios from '@nextcloud/axios'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
@@ -97,7 +81,8 @@ import IconContentPaste from 'vue-material-design-icons/ContentPaste.vue'
 import AnswerInput from './AnswerInput.vue'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
-import logger from '../../utils/Logger.js'
+import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
+import TransitionList from '../TransitionList.vue'
 
 export default {
 	name: 'QuestionDropdown',
@@ -110,16 +95,13 @@ export default {
 		NcLoadingIcon,
 		NcSelect,
 		OptionInputDialog,
+		TransitionList,
 	},
 
-	mixins: [QuestionMixin],
+	mixins: [QuestionMixin, QuestionMultipleMixin],
 
 	data() {
-		return {
-			inputValue: '',
-			isOptionDialogShown: false,
-			isLoading: false,
-		}
+		return { inputValue: '', isOptionDialogShown: false, isLoading: false }
 	},
 
 	computed: {
@@ -130,28 +112,11 @@ export default {
 			return this.answerType.createPlaceholder
 		},
 
-		contentValid() {
-			return this.answerType.validate(this)
-		},
-
-		isLastEmpty() {
-			const value = this.options[this.options.length - 1]
-			return value?.text?.trim?.().length === 0
-		},
-
 		isMultiple() {
 			// This can be extended if we want to include support for <select multiple>
 			return false
 		},
 
-		hasNoAnswer() {
-			return this.options.length === 0
-		},
-
-		areNoneChecked() {
-			return this.values.length === 0
-		},
-
 		shiftDragHandle() {
 			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
 		},
@@ -181,149 +146,6 @@ export default {
 			// Simple select
 			this.$emit('update:values', option ? [option.id] : [])
 		},
-
-		/**
-		 * Remove any empty options when leaving an option
-		 */
-		checkValidOption() {
-			// When leaving edit mode, filter and delete empty options
-			this.options.forEach((option) => {
-				if (!option.text) {
-					this.deleteOption(option.id)
-				}
-			})
-		},
-
-		/**
-		 * Set focus on next AnswerInput
-		 *
-		 * @param {number} index Index of current option
-		 */
-		focusNextInput(index) {
-			if (index < this.options.length - 1) {
-				this.$refs.input[index + 1].focus()
-			} else if (!this.isLastEmpty || this.hasNoAnswer) {
-				this.$refs.pseudoInput.focus()
-			}
-		},
-
-		/**
-		 * Update the options
-		 *
-		 * @param {Array} options options to change
-		 */
-		updateOptions(options) {
-			this.$emit('update:options', options)
-			emit('forms:last-updated:set', this.formId)
-		},
-
-		/**
-		 * Update an existing answer locally
-		 *
-		 * @param {string|number} id the answer id
-		 * @param {object} answer the answer to update
-		 */
-		updateAnswer(id, answer) {
-			const options = [...this.options]
-			const answerIndex = options.findIndex((option) => option.id === id)
-			options[answerIndex] = answer
-
-			this.updateOptions(options)
-		},
-
-		/**
-		 * Restore an option locally
-		 *
-		 * @param {object} option the option
-		 * @param {number} index the options index in this.options
-		 */
-		restoreOption(option, index) {
-			const options = this.options.slice()
-			options.splice(index, 0, option)
-
-			this.updateOptions(options)
-			this.focusIndex(index)
-		},
-
-		/**
-		 * Delete an option
-		 *
-		 * @param {number} id the options id
-		 */
-		deleteOption(id) {
-			const options = this.options.slice()
-			const optionIndex = options.findIndex((option) => option.id === id)
-
-			if (options.length === 1) {
-				// Clear Text, but don't remove. Will be removed, when leaving edit-mode
-				options[0].text = ''
-			} else {
-				// Remove entry
-				const option = Object.assign({}, this.options[optionIndex])
-
-				// delete locally
-				options.splice(optionIndex, 1)
-
-				// delete from Db
-				this.deleteOptionFromDatabase(option)
-			}
-
-			// Update question
-			this.updateOptions(options)
-
-			this.$nextTick(() => {
-				this.focusIndex(optionIndex - 1)
-			})
-		},
-
-		/**
-		 * Delete the option from Db in background.
-		 * Restore option if delete not possible
-		 *
-		 * @param {object} option The option to delete
-		 */
-		deleteOptionFromDatabase(option) {
-			const optionIndex = this.options.findIndex((opt) => opt.id === option.id)
-
-			if (!option.local) {
-				// let's not await, deleting in background
-				axios
-					.delete(
-						generateOcsUrl(
-							'apps/forms/api/v3/forms/{id}/questions/{questionId}/options/{optionId}',
-							{
-								id: this.formId,
-								questionId: this.id,
-								optionId: option.id,
-							},
-						),
-					)
-					.catch((error) => {
-						logger.error('Error while deleting an option', {
-							option,
-							error,
-						})
-						showError(
-							t('forms', 'There was an issue deleting this option'),
-						)
-						// restore option
-						this.restoreOption(option, optionIndex)
-					})
-			}
-		},
-
-		/**
-		 * Focus the input matching the index
-		 *
-		 * @param {number} index the value index
-		 */
-		focusIndex(index) {
-			const inputs = this.$refs.input
-			if (inputs && inputs[index]) {
-				const input = inputs[index]
-				input.focus()
-			}
-		},
 	},
 }
 </script>
@@ -332,6 +154,7 @@ export default {
 .question__content {
 	display: flex;
 	flex-direction: column;
+	gap: var(--default-grid-baseline);
 }
 
 .question__item {
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index d14c5561e..02d34ee43 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -117,51 +117,40 @@
 					<NcLoadingIcon :size="64" />
 				</div>
 			</template>
-			<template v-else>
-				<ul class="question__content">
-					<!-- Answer text input edit -->
-					<AnswerInput
-						v-for="(answer, index) in sortedOptions"
-						:key="
-							index /* using index to keep the same vnode after new answer creation */
-						"
-						ref="input"
-						:answer="answer"
-						:form-id="formId"
-						:index="index"
-						:is-unique="isUnique"
-						:is-dropdown="false"
-						:max-option-length="maxStringLengths.optionText"
-						@delete="deleteOption"
-						@update:answer="updateAnswer"
-						@focus-next="focusNextInput"
-						@tabbed-out="checkValidOption" />
-					<li v-if="allowOtherAnswer" class="question__item">
-						<div :is="pseudoIcon" class="question__item__pseudoInput" />
-						<input
-							:placeholder="t('forms', 'Other')"
-							class="question__input"
-							:maxlength="maxStringLengths.optionText"
-							minlength="1"
-							type="text"
-							:readonly="!readOnly" />
-					</li>
-					<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
-						<div :is="pseudoIcon" class="question__item__pseudoInput" />
-						<input
-							ref="pseudoInput"
-							class="question__input"
-							:aria-label="t('forms', 'Add a new answer')"
-							:placeholder="t('forms', 'Add a new answer')"
-							:maxlength="maxStringLengths.optionText"
-							minlength="1"
-							type="text"
-							@input="addNewEntry"
-							@compositionstart="onCompositionStart"
-							@compositionend="onCompositionEnd" />
-					</li>
-				</ul>
-			</template>
+			<TransitionList v-else class="question__content">
+				<!-- Answer text input edit -->
+				<AnswerInput
+					v-for="(answer, index) in sortedOptions"
+					:key="answer.local ? 'option-local' : answer.id"
+					ref="input"
+					:answer="answer"
+					:form-id="formId"
+					:index="index"
+					:is-unique="isUnique"
+					:max-index="options.length - 1"
+					:max-option-length="maxStringLengths.optionText"
+					@create-answer="onCreateAnswer"
+					@update:answer="updateAnswer"
+					@delete="deleteOption"
+					@focus-next="focusNextInput"
+					@move-up="onOptionMoveUp(index)"
+					@move-down="onOptionMoveDown(index)"
+					@tabbed-out="checkValidOption" />
+				<li
+					v-if="allowOtherAnswer"
+					key="option-add-other"
+					class="question__item">
+					<div :is="pseudoIcon" class="question__item__pseudoInput" />
+					<input
+						:placeholder="t('forms', 'Other')"
+						class="question__input"
+						:disabled="!readonly"
+						:maxlength="maxStringLengths.optionText"
+						minlength="1"
+						type="text"
+						:readonly="!readOnly" />
+				</li>
+			</TransitionList>
 		</template>
 
 		<!-- Add multiple options modal -->
@@ -173,10 +162,7 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
-import { generateOcsUrl } from '@nextcloud/router'
-import axios from '@nextcloud/axios'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
@@ -191,8 +177,9 @@ import IconRadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'
 
 import AnswerInput from './AnswerInput.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
-import logger from '../../utils/Logger.js'
 import OptionInputDialog from '../OptionInputDialog.vue'
+import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
+import TransitionList from '../TransitionList.vue'
 
 const QUESTION_EXTRASETTINGS_OTHER_PREFIX = 'system-other-answer:'
 
@@ -212,9 +199,10 @@ export default {
 		NcLoadingIcon,
 		NcNoteCard,
 		OptionInputDialog,
+		TransitionList,
 	},
 
-	mixins: [QuestionMixin],
+	mixins: [QuestionMixin, QuestionMultipleMixin],
 
 	data() {
 		return {
@@ -235,33 +223,16 @@ export default {
 	},
 
 	computed: {
-		contentValid() {
-			return this.answerType.validate(this)
-		},
-
-		isLastEmpty() {
-			const value = this.options[this.options.length - 1]
-			return value?.text?.trim?.().length === 0
-		},
-
 		isUnique() {
 			return this.answerType.unique === true
 		},
 
-		hasNoAnswer() {
-			return this.options.length === 0
-		},
-
 		hasError() {
 			return !!this.errorMessage
 		},
 
-		areNoneChecked() {
-			return this.values.length === 0
-		},
-
 		shiftDragHandle() {
-			return !this.readonly && this.options.length !== 0 && !this.isLastEmpty
+			return !this.readonly && this.options.length !== 0
 		},
 
 		pseudoIcon() {
@@ -487,150 +458,6 @@ export default {
 			return this.areNoneChecked
 		},
 
-		/**
-		 * Remove any empty options when leaving an option
-		 */
-		checkValidOption() {
-			// When leaving edit mode, filter and delete empty options
-			this.options.forEach((option) => {
-				if (!option.text) {
-					this.deleteOption(option.id)
-				}
-			})
-		},
-
-		/**
-		 * Set focus on next AnswerInput
-		 *
-		 * @param {number} index Index of current option
-		 */
-		focusNextInput(index) {
-			if (index < this.options.length - 1) {
-				this.$refs.input[index + 1].focus()
-			} else if (!this.isLastEmpty || this.hasNoAnswer) {
-				this.$refs.pseudoInput.focus()
-			}
-		},
-
-		/**
-		 * Update the options
-		 * This will handle updating the form (emitting the changes) and update last changed property
-		 *
-		 * @param {Array} options options to change
-		 */
-		updateOptions(options) {
-			this.$emit('update:options', options)
-			emit('forms:last-updated:set', this.formId)
-		},
-
-		/**
-		 * Update an existing answer locally
-		 *
-		 * @param {string|number} id the answer id
-		 * @param {object} answer the answer to update
-		 */
-		updateAnswer(id, answer) {
-			const options = [...this.options]
-			const answerIndex = options.findIndex((option) => option.id === id)
-			options[answerIndex] = answer
-
-			this.updateOptions(options)
-		},
-
-		/**
-		 * Restore an option locally
-		 *
-		 * @param {object} option the option
-		 * @param {number} index the options index in this.options
-		 */
-		restoreOption(option, index) {
-			const options = this.options.slice()
-			options.splice(index, 0, option)
-
-			this.updateOptions(options)
-			this.focusIndex(index)
-		},
-
-		/**
-		 * Delete an option
-		 *
-		 * @param {number} id the options id
-		 */
-		deleteOption(id) {
-			const options = this.options.slice()
-			const optionIndex = options.findIndex((option) => option.id === id)
-
-			if (options.length === 1) {
-				// Clear Text, but don't remove. Will be removed, when leaving edit-mode
-				options[0].text = ''
-			} else {
-				// Remove entry
-				const option = Object.assign({}, this.options[optionIndex])
-
-				// delete locally
-				options.splice(optionIndex, 1)
-
-				// delete from Db
-				this.deleteOptionFromDatabase(option)
-			}
-
-			// Update question
-			this.updateOptions(options)
-
-			this.$nextTick(() => {
-				this.focusIndex(optionIndex - 1)
-			})
-		},
-
-		/**
-		 * Delete the option from Db in background.
-		 * Restore option if delete not possible
-		 *
-		 * @param {object} option The option to delete
-		 */
-		deleteOptionFromDatabase(option) {
-			const optionIndex = this.options.findIndex((opt) => opt.id === option.id)
-
-			if (!option.local) {
-				// let's not await, deleting in background
-				axios
-					.delete(
-						generateOcsUrl(
-							'apps/forms/api/v3/forms/{id}/questions/{questionId}/options/{optionId}',
-							{
-								id: this.formId,
-								questionId: this.id,
-								optionId: option.id,
-							},
-						),
-					)
-					.catch((error) => {
-						logger.error('Error while deleting an option', {
-							error,
-							option,
-						})
-						showError(
-							t('forms', 'There was an issue deleting this option'),
-						)
-						// restore option
-						this.restoreOption(option, optionIndex)
-					})
-			}
-		},
-
-		/**
-		 * Focus the input matching the index
-		 *
-		 * @param {number} index the value index
-		 */
-		focusIndex(index) {
-			const inputs = this.$refs.input
-			if (inputs && inputs[index]) {
-				const input = inputs[index]
-				input.focus()
-			}
-		},
-
 		/**
 		 * Update status extra setting allowOtherAnswer and save on DB
 		 *
@@ -647,6 +474,7 @@ export default {
 .question__content {
 	display: flex;
 	flex-direction: column;
+	gap: var(--default-grid-baseline);
 }
 
 .question__item {
diff --git a/src/components/TransitionList.vue b/src/components/TransitionList.vue
new file mode 100644
index 000000000..68ce85a9a
--- /dev/null
+++ b/src/components/TransitionList.vue
@@ -0,0 +1,29 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<TransitionGroup name="forms-list-transition" tag="ul">
+		<slot />
+	</TransitionGroup>
+</template>
+
+<style>
+.forms-list-transition-move,
+.forms-list-transition-enter-active,
+.forms-list-transition-leave-active {
+	transition: all var(--animation-slow) ease;
+}
+
+.forms-list-transition-enter-from,
+.forms-list-transition-leave-to {
+	opacity: 0;
+	transform: translateX(44px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.forms-list-transition-leave-active {
+	position: absolute;
+}
+</style>
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
index 49d2b210d..a4f83377c 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.js
@@ -9,7 +9,6 @@ import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 
 import logger from '../utils/Logger.js'
-import GenRandomId from '../utils/GenRandomId.js'
 import OcsResponse2Data from '../utils/OcsResponse2Data.js'
 import Question from '../components/Questions/Question.vue'
 
@@ -164,14 +163,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-
-		/**
-		 * isComposing for IME handling
-		 */
-		isIMEComposing: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	components: {
@@ -189,14 +180,6 @@ export default {
 			})
 			return props
 		},
-		sortedOptions() {
-			// Only shuffle options if not in editing mode (and shuffling is enabled)
-			if (this.readOnly && this.extraSettings?.shuffleOptions) {
-				return this.shuffleArray(this.options)
-			}
-			// Ensure order of options always is the same
-			return [...this.options].sort((a, b) => a.id - b.id)
-		},
 
 		/**
 		 * Listeners for all questions to forward
@@ -232,6 +215,7 @@ export default {
 			this.$emit('update:text', text)
 			this.saveQuestionProperty('text', text)
 		}, 200),
+
 		/**
 		 * Forward the description change to the parent and store to db
 		 *
@@ -415,63 +399,5 @@ export default {
 			}
 			this.isLoading = false
 		},
-
-		/**
-		 * Add a new empty answer locally
-		 * @param {InputEvent} event The input event that triggered adding a new entry
-		 */
-		addNewEntry({ target, isComposing }) {
-			/*
-			 * Check for !isComposing needed for languages using IME like Japanese or Chinese
-			 * Check for !this.isComposing needed for IME inputs handled by CompositionEvents
-			 * Check for target.value !== '' needed for Linux/Mac for characters like á or è
-			 */
-			if (!isComposing && !this.isIMEComposing && target.value !== '') {
-				// Add local entry
-				const options = [
-					...this.options,
-					{
-						id: GenRandomId(),
-						questionId: this.id,
-						text: target.value,
-						local: true,
-					},
-				]
-
-				// Reset the "new answer" input if needed
-				if (this.$refs.pseudoInput) {
-					this.$refs.pseudoInput.value = ''
-				}
-
-				// Update questions
-				this.updateOptions(options)
-
-				this.$nextTick(() => {
-					// Set focus to the created input element
-					this.focusIndex(options.length - 1)
-
-					// Trigger onInput on new AnswerInput for posting the new option to the API
-					this.$refs.input[options.length - 1].debounceOnInput()
-				})
-			}
-		},
-
-		/**
-		 * Handle compostion start event for IME inputs
-		 */
-		onCompositionStart() {
-			this.isIMEComposing = true
-		},
-
-		/**
-		 * Handle compostion end event for IME inputs
-		 * @param {CompositionEvent} event The input event that triggered adding a new entry
-		 */
-		onCompositionEnd({ target, isComposing }) {
-			this.isIMEComposing = false
-			if (!isComposing) {
-				this.addNewEntry({ target, isComposing })
-			}
-		},
 	},
 }
diff --git a/src/mixins/QuestionMultipleMixin.ts b/src/mixins/QuestionMultipleMixin.ts
new file mode 100644
index 000000000..6965b43be
--- /dev/null
+++ b/src/mixins/QuestionMultipleMixin.ts
@@ -0,0 +1,293 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { FormsOption } from '../models/Entities'
+
+import { showError } from '@nextcloud/dialogs'
+import { emit } from '@nextcloud/event-bus'
+import { translate as t } from '@nextcloud/l10n'
+import { generateOcsUrl } from '@nextcloud/router'
+import { defineComponent } from 'vue'
+
+import axios from '@nextcloud/axios'
+import debounce from 'debounce'
+import logger from '../utils/Logger'
+
+export default defineComponent({
+	computed: {
+		areNoneChecked() {
+			return this.values.length === 0
+		},
+
+		contentValid() {
+			return this.answerType.validate(this)
+		},
+
+		hasNoAnswer() {
+			return this.options.length === 0
+		},
+
+		isLastEmpty() {
+			const value = this.options[this.options.length - 1]
+			return value?.text?.trim?.().length === 0
+		},
+
+		/**
+		 * Options sorted by order or randomized if configured
+		 */
+		sortedOptions() {
+			// Only shuffle options if not in editing mode (and shuffling is enabled)
+			if (this.readOnly && this.extraSettings?.shuffleOptions) {
+				return this.shuffleArray(this.options)
+			}
+
+			// Ensure order of options always is the same
+			const options = [...this.options].sort((a, b) => {
+				if (a.order === b.order) {
+					return a.id - b.id
+				}
+				return (a.order ?? 0) - (b.order ?? 0)
+			})
+
+			if (!this.readOnly) {
+				// In edit mode append an empty option
+				return [
+					...options,
+					{
+						local: true,
+						questionId: this.id,
+						text: '',
+						order: options.length,
+					},
+				]
+			}
+			return options
+		},
+
+		/**
+		 * Debounced function to save options order
+		 */
+		onOptionsReordered() {
+			return debounce(this.saveOptionsOrder, 750)
+		},
+	},
+
+	methods: {
+		/**
+		 * Set focus on next AnswerInput
+		 *
+		 * @param {number} index Index of current option
+		 */
+		focusNextInput(index: number) {
+			this.focusIndex(index + 1)
+		},
+
+		/**
+		 * Focus the input matching the index
+		 *
+		 * @param {number} index the value index
+		 */
+		focusIndex(index: number) {
+			// refs are not guaranteed to be in correct order - we need to find the correct item
+			const item = this.$refs.input.find(
+				({ $vnode: vnode }) =>
+					vnode?.componentOptions.propsData.index === index,
+			)
+			if (item) {
+				item.focus()
+			} else {
+				logger.warn('Could not find option to focus', {
+					index,
+					options: this.sortedOptions,
+				})
+			}
+		},
+
+		/**
+		 * Handles the creation of a new answer option.
+		 *
+		 * @param index the index of the answer
+		 * @param {FormsOption} answer - The new answer option to be added.
+		 * @return {void}
+		 */
+		onCreateAnswer(index: number, answer: FormsOption): void {
+			this.$nextTick(() => {
+				this.$nextTick(() => this.focusIndex(index))
+			})
+			this.updateOptions([...this.options, answer])
+		},
+
+		/**
+		 * Update the options
+		 * This will handle updating the form (emitting the changes) and update last changed property
+		 *
+		 * @param {Array} options options to change
+		 */
+		updateOptions(options: FormsOption[]) {
+			this.$emit('update:options', options)
+			emit('forms:last-updated:set', this.formId)
+		},
+
+		/**
+		 * Update an existing answer locally
+		 *
+		 * @param {string|number} index the current index to update
+		 * @param {object} answer the new answer value
+		 */
+		updateAnswer(index: number, answer: FormsOption & { local?: boolean }) {
+			const options = [...this.sortedOptions]
+			const [oldValue] = options.splice(index, 1, answer)
+
+			// New value created - we need to set the correct focus
+			if (oldValue.local && !answer.local) {
+				this.$nextTick(() => {
+					this.$nextTick(() => this.focusIndex(index))
+				})
+			}
+
+			this.updateOptions(options.filter(({ local }) => !local))
+		},
+
+		/**
+		 * Remove any empty options when leaving an option
+		 */
+		checkValidOption() {
+			// When leaving edit mode, filter and delete empty options
+			this.options.forEach((option) => {
+				if (!option.text && !option.local) {
+					this.deleteOption(option.id)
+				}
+			})
+		},
+
+		/**
+		 * Delete an option
+		 *
+		 * @param {number} id the options id
+		 */
+		deleteOption(id: number) {
+			const index = this.sortedOptions.findIndex((option) => option.id === id)
+			const options = [...this.sortedOptions]
+			const [option] = options.splice(index, 1)
+
+			// delete from Db
+			this.deleteOptionFromDatabase(option)
+
+			// Update question - remove option and reorder other
+			this.updateOptions(
+				options
+					.filter(({ local }) => !local)
+					.map((option, order) => ({ ...option, order })),
+			)
+
+			// Focus the previous option
+			this.$nextTick(() => this.focusIndex(Math.max(index - 1, 0)))
+		},
+
+		/**
+		 * Delete the option from Db in background.
+		 * Restore option if delete not possible
+		 *
+		 * @param {object} option The option to delete
+		 */
+		deleteOptionFromDatabase(option: FormsOption & { local?: boolean }) {
+			const optionIndex = this.options.findIndex(
+				(opt: FormsOption) => opt.id === option.id,
+			)
+
+			if (!option.local) {
+				// let's not await, deleting in background
+				axios
+					.delete(
+						generateOcsUrl(
+							'apps/forms/api/v3/forms/{id}/questions/{questionId}/options/{optionId}',
+							{
+								id: this.formId,
+								questionId: this.id,
+								optionId: option.id,
+							},
+						),
+					)
+					.catch((error) => {
+						logger.error('Error while deleting an option', {
+							error,
+							option,
+						})
+						showError(
+							t('forms', 'There was an issue deleting this option'),
+						)
+						// restore option
+						this.restoreOption(option, optionIndex)
+					})
+			}
+		},
+
+		/**
+		 * Restore an option locally
+		 *
+		 * @param {FormsOption} option the option
+		 * @param {number} index the options index in this.options
+		 */
+		restoreOption(option: FormsOption, index: number) {
+			const options = this.options.slice()
+			options.splice(index, 0, option)
+
+			this.updateOptions(options)
+			this.focusIndex(index)
+		},
+
+		async saveOptionsOrder() {
+			try {
+				const newOrder = this.sortedOptions
+					.filter((option) => !option.local)
+					.map((option) => option.id)
+
+				await axios.patch(
+					generateOcsUrl(
+						`apps/forms/api/v3/forms/{id}/questions/{questionId}/options`,
+						{
+							id: this.formId,
+							questionId: this.id,
+						},
+					),
+					{
+						newOrder,
+					},
+				)
+				emit('forms:last-updated:set', this.formId)
+			} catch (error) {
+				logger.error('Could not reorder options', { error })
+				showError(t('forms', 'Error while saving options order'))
+			}
+		},
+
+		/**
+		 * Reorder option by moving it upwards the list
+		 * @param {number} index Option that should move up
+		 */
+		onOptionMoveUp(index: number) {
+			if (index > 0) {
+				this.onOptionMoveDown(index - 1)
+			}
+		},
+
+		/**
+		 * Reorder option by moving it downwards the list
+		 * @param {number} index Option that should move down
+		 */
+		onOptionMoveDown(index: number) {
+			if (index === this.sortedOptions.length - 1) {
+				return
+			}
+
+			// swap positions
+			const first = this.sortedOptions[index]
+			const second = this.sortedOptions[index + 1]
+			second.order = index
+			first.order = index + 1
+			this.onOptionsReordered()
+		},
+	},
+})
diff --git a/src/models/Entities.d.ts b/src/models/Entities.d.ts
new file mode 100644
index 000000000..469d68b4d
--- /dev/null
+++ b/src/models/Entities.d.ts
@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+export interface FormsOption {
+	id: number
+	text: string
+	order?: number
+	questionId: number
+}
diff --git a/src/utils/GenRandomId.js b/src/utils/GenRandomId.js
deleted file mode 100644
index d3ff76744..000000000
--- a/src/utils/GenRandomId.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-const GenRandomId = (length) => {
-	return Math.random()
-		.toString(36)
-		.replace(/[^a-z]+/g, '')
-		.slice(0, length || 5)
-}
-
-export default GenRandomId
diff --git a/tsconfig.json b/tsconfig.json
index 56c3dbf83..a2f6f9707 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,7 @@
 
 {
 	"extends": "@vue/tsconfig",
+	"include": ["src/**.ts", "*.ts"],
 	"compilerOptions": {
 		"allowJs": true,
 		"target": "ESNext",