diff --git a/e2e/pytest.ini b/e2e/pytest.ini
index 77c975cd..98815e30 100644
--- a/e2e/pytest.ini
+++ b/e2e/pytest.ini
@@ -4,4 +4,4 @@ asyncio_mode = auto
 # https://playwright.dev/python/docs/test-runners#async-fixtures
 asyncio_default_test_loop_scope = session
 asyncio_default_fixture_loop_scope = session
-norecursedirs = "tests"
+norecursedirs = tests frontend
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f04c3fe1..bdcb90dd 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -24,8 +24,10 @@
             </BButton>
         </BNavbar>
 
-        <BContainer class="pt-4" fluid="md">
-            <RouterView />
+        <BContainer class="py-4" fluid="md">
+            <div class="vstack gap-4">
+                <RouterView />
+            </div>
         </BContainer>
 
         <ErrorModal />
diff --git a/frontend/src/components/PackageCard.vue b/frontend/src/components/PackageCard.vue
index 03920a10..ce321ccd 100644
--- a/frontend/src/components/PackageCard.vue
+++ b/frontend/src/components/PackageCard.vue
@@ -5,8 +5,7 @@
 -->
 
 <template>
-    <div>
-        <LoadingIndicator v-if="asyncStatus === 'loading'" />
+    <LoadingIndicator :loading="isPending">
         <ErrorCard v-if="state.error" :error="state.error" />
         <CollapsibleCard variant="success" v-else-if="manifest" expanded>
             <BContainer class="px-0" fluid>
@@ -52,13 +51,13 @@
                 </div>
             </template>
         </CollapsibleCard>
-    </div>
+    </LoadingIndicator>
 </template>
 
 <script lang="ts" setup>
 import { useManifestQuery } from '@/queries'
 
-const { asyncStatus, manifest, state } = useManifestQuery()
+const { isPending, manifest, state } = useManifestQuery()
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/attempt/AttemptCard.vue b/frontend/src/components/attempt/AttemptCard.vue
index 8bf3d981..308ad6c3 100644
--- a/frontend/src/components/attempt/AttemptCard.vue
+++ b/frontend/src/components/attempt/AttemptCard.vue
@@ -53,8 +53,9 @@
             </template>
         </BContainer>
         <ButtonGroup>
-            <!-- TODO: Implement clone -->
-            <IconButton :icon-component="IMdiContentCopy" variant="secondary" size="sm">Clone</IconButton>
+            <IconButton @click="cloneAttempt" :icon-component="IMdiContentCopy" variant="secondary" size="sm"
+                >Clone</IconButton
+            >
             <!-- TODO: Implement export -->
             <IconButton :icon-component="IMdiExport" variant="secondary" size="sm">Export</IconButton>
             <IconButton @click="deleteAttempt" :icon-component="IMdiDelete" variant="danger" size="sm"
@@ -82,8 +83,7 @@ import { computed } from 'vue'
 import { useLink } from 'vue-router'
 
 import CollapsibleCard from '@/components/common/CollapsibleCard.vue'
-import { useAttemptDisplay } from '@/composables/attempt'
-import { useDeleteAttempt } from '@/composables/attempt'
+import { useAttemptDisplay, useCloneAttempt, useDeleteAttempt } from '@/composables/attempt'
 import type { AttemptData } from '@/types'
 
 const {
@@ -99,10 +99,9 @@ const {
 }>()
 
 const attemptLocation = { name: 'question-attempt', params: { questionId, attemptId } } as const
-
 const deleteAttempt = useDeleteAttempt(questionId, attemptId)
+const cloneAttempt = useCloneAttempt(questionId, attemptId)
 const { isActive: isCurrentPreviewActive } = useLink({ to: attemptLocation })
 const { isScored, displayScore, displayStatus } = useAttemptDisplay(attemptData)
-
 const cardComponent = computed(() => (collapsible ? CollapsibleCard : BCard))
 </script>
diff --git a/frontend/src/components/attempt/AttemptList.vue b/frontend/src/components/attempt/AttemptList.vue
index 713a0dd0..9c5ec362 100644
--- a/frontend/src/components/attempt/AttemptList.vue
+++ b/frontend/src/components/attempt/AttemptList.vue
@@ -5,44 +5,36 @@
 -->
 
 <template>
-    <LoadingIndicator v-if="asyncStatus === 'loading'" />
-    <ErrorCard v-if="error" :error="error" />
-    <CollapsibleCard v-else expanded>
-        <template #button-title>Saved attempts ({{ attemptCount }})</template>
-        <AttemptCard
-            v-for="[attemptId, attemptData] in Object.entries(attempts)"
-            class="attempt-card"
-            :id="`attempt-${questionId}-${attemptId}`"
-            :key="attemptId"
-            :question-id="questionId"
-            :attempt-id="attemptId"
-            :attempt-data="attemptData"
-        />
-        <BAlert v-if="attemptCount === 0" :model-value="true" class="mb-0" variant="info"
-            >This question has no attempts yet.</BAlert
+    <LoadingIndicator :loading="isPending">
+        <ErrorCard v-if="error" :error="error" />
+        <ListView
+            v-else
+            :items="attempts"
+            text-empty="This question has no attempts yet."
+            title="Saved attempts"
+            deferred-item-model="attempt"
         >
-    </CollapsibleCard>
+            <template #item="{ item, id }">
+                <AttemptCard
+                    :id="`attempt-${questionId}-${id}`"
+                    :question-id="questionId"
+                    :attempt-id="id"
+                    :attempt-data="item as AttemptData"
+                />
+            </template>
+        </ListView>
+    </LoadingIndicator>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+import AttemptCard from '@/components/attempt/AttemptCard.vue'
 import { useAttemptListQuery } from '@/queries'
+import type { AttemptData } from '@/types'
 
 const { questionId } = defineProps<{ questionId: string }>()
 
-const { asyncStatus, error, data: listData } = useAttemptListQuery(questionId)
-
+const { error, data: listData, isPending } = useAttemptListQuery(questionId)
 const attempts = computed(() => listData.value ?? {})
-const attemptCount = computed(() => Object.keys(attempts.value).length)
 </script>
-
-<style lang="scss" scoped>
-.attempt-card {
-    margin-bottom: $spacer;
-
-    &:last-of-type {
-        margin-bottom: 0;
-    }
-}
-</style>
diff --git a/frontend/src/components/attempt/AttemptPreview.vue b/frontend/src/components/attempt/AttemptPreview.vue
index a5e8d5f2..fe519e88 100644
--- a/frontend/src/components/attempt/AttemptPreview.vue
+++ b/frontend/src/components/attempt/AttemptPreview.vue
@@ -5,57 +5,68 @@
 -->
 
 <template>
-    <LoadingIndicator v-if="asyncStatus === 'loading'" />
     <ErrorCard v-if="error" :error="error" />
     <template v-else>
-        <AttemptRenderErrors v-if="renderErrors" :render-errors="renderErrors" />
-        <BContainer fluid>
-            <BRow>
-                <BCol class="px-0" cols="12" md="8" order-md="2">
-                    <AttemptIframe v-if="iframeSrcDoc" :src-doc="iframeSrcDoc" ref="attemptIframeRef" />
-                </BCol>
-                <BCol class="px-0 mb-3" cols="12" md="4" order-md="1">
-                    <BRow align-v="center">
-                        <BCol cols="6" md="12">
-                            <h3 class="mb-md-5">
-                                <BBadge variant="info">{{
-                                    displayScore ? `Score: ${displayScore}` : 'Not yet scored'
-                                }}</BBadge>
-                            </h3>
-                        </BCol>
-                        <BCol class="px-0" cols="6" md="12">
-                            <IconButton
-                                :icon-component="IMdiEdit"
-                                :to="{ name: 'question-edit', params: { questionId } }"
-                                variant="link"
-                                >Edit question</IconButton
-                            >
-                        </BCol>
-                    </BRow>
-                </BCol>
-            </BRow>
-        </BContainer>
-        <ButtonGroup class="mb-4">
-            <IconButton :icon-component="IMdiContentSave" @click="save" variant="primary">Save</IconButton>
-            <IconButton :icon-component="IMdiContentSaveMove" @click="saveAndSubmit" variant="secondary"
-                >Save and submit</IconButton
-            >
-            <IconButton :disabled="isRestartDisabled" :icon-component="IMdiRestart" @click="restart" variant="warning"
-                >Restart</IconButton
-            >
-            <IconButton :disabled="isRescoreDisabled" :icon-component="IMdiScore" @click="score" variant="info"
-                >Re-score</IconButton
-            >
-        </ButtonGroup>
-        <DisplayOptions class="mb-4" />
-        <AttemptCard
-            v-if="attemptData"
-            :attempt-data="attemptData"
-            :question-id="questionId"
-            :attempt-id="attemptId"
-            collapsible
-            variant="info"
-        />
+        <LoadingIndicator :loading="isPending">
+            <AttemptRenderErrors v-if="renderErrors" :render-errors="renderErrors" />
+            <BContainer fluid>
+                <BRow>
+                    <BCol class="px-0" cols="12" md="8" order-md="2">
+                        <AttemptIframe v-if="iframeSrcDoc" :src-doc="iframeSrcDoc" ref="attemptIframeRef" />
+                    </BCol>
+                    <BCol class="px-0 mb-3" cols="12" md="4" order-md="1">
+                        <BRow align-v="center">
+                            <BCol cols="6" md="12">
+                                <h3 class="mb-md-5">
+                                    <BBadge variant="info">{{
+                                        displayScore ? `Score: ${displayScore}` : 'Not yet scored'
+                                    }}</BBadge>
+                                </h3>
+                            </BCol>
+                            <BCol class="px-0" cols="6" md="12">
+                                <IconButton
+                                    :icon-component="IMdiEdit"
+                                    :to="{ name: 'question-edit', params: { questionId } }"
+                                    variant="link"
+                                    >Edit question</IconButton
+                                >
+                            </BCol>
+                        </BRow>
+                    </BCol>
+                </BRow>
+            </BContainer>
+            <ButtonGroup>
+                <IconButton :icon-component="IMdiContentSave" @click="save" variant="primary">Save</IconButton>
+                <IconButton :icon-component="IMdiContentSaveMove" @click="saveAndSubmit" variant="secondary"
+                    >Save and submit</IconButton
+                >
+                <IconButton
+                    :disabled="isRestartDisabled"
+                    :icon-component="IMdiRestart"
+                    @click="restart"
+                    variant="warning"
+                    >Restart</IconButton
+                >
+                <IconButton :disabled="isRescoreDisabled" :icon-component="IMdiScore" @click="score" variant="info"
+                    >Re-score</IconButton
+                >
+            </ButtonGroup>
+        </LoadingIndicator>
+
+        <LoadingIndicator :loading="isPending">
+            <DisplayOptions />
+        </LoadingIndicator>
+
+        <LoadingIndicator :loading="isPending">
+            <AttemptCard
+                v-if="attemptData"
+                :attempt-data="attemptData"
+                :question-id="questionId"
+                :attempt-id="attemptId"
+                collapsible
+                variant="info"
+            />
+        </LoadingIndicator>
     </template>
 </template>
 
@@ -79,9 +90,9 @@ const { questionId, attemptId } = defineProps<{
 }>()
 
 const {
-    asyncStatus,
     attemptData,
     error,
+    isPending,
     iframeSrcDoc,
     renderErrors,
     score,
diff --git a/frontend/src/components/common/BackLink.vue b/frontend/src/components/common/BackLink.vue
new file mode 100644
index 00000000..07912ab9
--- /dev/null
+++ b/frontend/src/components/common/BackLink.vue
@@ -0,0 +1,24 @@
+<!--
+  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>
+    <IconButton :icon-component="IMdiArrowLeft" :to="to" class="link ps-0" variant="link"><slot /></IconButton>
+</template>
+
+<script setup lang="ts">
+import IMdiArrowLeft from '~icons/mdi/arrow-left'
+import type { RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+    to: RouteLocationRaw
+}>()
+</script>
+
+<style lang="scss" scoped>
+.link {
+    margin-bottom: -$spacer;
+}
+</style>
diff --git a/frontend/src/components/common/FormGroup.vue b/frontend/src/components/common/FormGroup.vue
index 688f0800..29a8f87b 100644
--- a/frontend/src/components/common/FormGroup.vue
+++ b/frontend/src/components/common/FormGroup.vue
@@ -5,7 +5,15 @@
 -->
 
 <template>
-    <BFormGroup class="mb-3" label-cols-sm="3" content-cols-sm="9">
+    <BFormGroup :disabled="hasPendingOperations" class="mb-3" label-cols-sm="3" content-cols-sm="9">
         <slot />
     </BFormGroup>
 </template>
+
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
+
+const { hasPendingOperations } = storeToRefs(usePendingOperationsStore())
+</script>
diff --git a/frontend/src/components/common/IconButton.vue b/frontend/src/components/common/IconButton.vue
index fc5656c7..d2600b5a 100644
--- a/frontend/src/components/common/IconButton.vue
+++ b/frontend/src/components/common/IconButton.vue
@@ -5,17 +5,22 @@
 -->
 
 <template>
-    <BButton class="d-flex text-nowrap gap-2 align-items-center" v-bind="buttonProps">
+    <BButton :disabled="disabled" class="d-flex text-nowrap gap-2 align-items-center" v-bind="buttonProps">
         <component :is="iconComponent" />
         <slot />
     </BButton>
 </template>
 
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import type { BButtonProps } from 'bootstrap-vue-next'
 import type { Component } from 'vue'
 
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
+
+const { hasPendingOperations } = storeToRefs(usePendingOperationsStore())
+
 const props = defineProps<
     BButtonProps & {
         iconComponent?: Component
@@ -23,7 +28,9 @@ const props = defineProps<
 >()
 
 const buttonProps = computed(() => {
-    const { iconComponent, ...rest } = props
+    const { iconComponent, disabled, ...rest } = props
     return rest
 })
+
+const disabled = computed(() => props.disabled || hasPendingOperations.value)
 </script>
diff --git a/frontend/src/components/common/ListView.vue b/frontend/src/components/common/ListView.vue
new file mode 100644
index 00000000..933ce2fc
--- /dev/null
+++ b/frontend/src/components/common/ListView.vue
@@ -0,0 +1,57 @@
+<!--
+  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>
+    <CollapsibleCard expanded>
+        <template #button-title>
+            <div class="d-flex gap-2 align-items-center">
+                <IMdiFormatListBulleted class="flex-shrink-0 me-2" />
+                <div class="text-truncate">{{ title }} ({{ itemCount }})</div>
+            </div>
+        </template>
+        <slot name="prepend-list" />
+        <div v-if="itemCount > 0" class="vstack gap-3">
+            <div
+                v-for="[id, item] in Object.entries(items)"
+                :class="['item-wrapper', { highlight: highlightedIds.has(id) }]"
+                :key="id"
+                :ref="registerElementRef(id)"
+            >
+                <slot name="item" :item="item" :id="id" />
+            </div>
+        </div>
+        <BAlert v-else :model-value="true" class="mb-0" variant="info">{{ textEmpty }}</BAlert>
+    </CollapsibleCard>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { useDeferredItem, useHintItem } from '@/composables/common'
+import type { OperationModelType } from '@/stores/usePendingOperationsStore'
+
+const { items, deferredItemModel } = defineProps<{
+    items: Record<string, object>
+    textEmpty: string
+    title: string
+    deferredItemModel: OperationModelType
+}>()
+
+const itemCount = computed(() => Object.keys(items).length)
+
+const { highlightedIds, hintItem, registerElementRef } = useHintItem()
+useDeferredItem(deferredItemModel, () => items, hintItem)
+</script>
+
+<style lang="scss" scoped>
+.item-wrapper {
+    border-radius: var(--bs-border-radius); // for highlight effect
+
+    &.highlight {
+        @include highlight-pulse;
+    }
+}
+</style>
diff --git a/frontend/src/components/common/LoadingIndicator.vue b/frontend/src/components/common/LoadingIndicator.vue
index da1f7b1b..68405ee3 100644
--- a/frontend/src/components/common/LoadingIndicator.vue
+++ b/frontend/src/components/common/LoadingIndicator.vue
@@ -5,5 +5,24 @@
 -->
 
 <template>
-    <BPlaceholder animation="glow" />
+    <div v-bind="wrapperProps">
+        <BPlaceholderWrapper :loading="loading">
+            <template #loading>
+                <BPlaceholderCard animation="wave" no-button no-footer no-img />
+            </template>
+            <slot />
+        </BPlaceholderWrapper>
+    </div>
 </template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { BPlaceholderWrapperProps } from 'bootstrap-vue-next'
+
+const props = defineProps<BPlaceholderWrapperProps>()
+
+const wrapperProps = computed(() => {
+    const { loading, ...rest } = props
+    return rest
+})
+</script>
diff --git a/frontend/src/components/question/QuestionCard.vue b/frontend/src/components/question/QuestionCard.vue
index 9f9c66df..433495d4 100644
--- a/frontend/src/components/question/QuestionCard.vue
+++ b/frontend/src/components/question/QuestionCard.vue
@@ -18,8 +18,9 @@
             <pre v-if="data">{{ data }}</pre>
         </BCardText>
         <ButtonGroup>
-            <!-- TODO: Implement clone -->
-            <IconButton :icon-component="IMdiContentCopy" variant="secondary" size="sm">Clone</IconButton>
+            <IconButton @click="cloneQuestion" :icon-component="IMdiContentCopy" variant="secondary" size="sm"
+                >Clone</IconButton
+            >
             <!-- TODO: Implement export -->
             <IconButton :icon-component="IMdiExport" variant="secondary" size="sm">Export</IconButton>
             <IconButton @click="deleteQuestion" :icon-component="IMdiDelete" variant="danger" size="sm"
@@ -54,7 +55,7 @@ import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { useLink } from 'vue-router'
 
-import { useDeleteQuestion } from '@/composables/question'
+import { useCloneQuestion, useDeleteQuestion } from '@/composables/question'
 import useAppStateStore from '@/stores/useAppStateStore'
 import { isDetailedServerError } from '@/types'
 import type { DetailedServerError, OptionsFormData } from '@/types'
@@ -66,9 +67,9 @@ const { data, questionId } = defineProps<{
 }>()
 
 const questionLocation = { name: 'question', params: { questionId } } as const
-
 const { colorMode } = storeToRefs(useAppStateStore())
 const deleteQuestion = useDeleteQuestion(questionId)
+const cloneQuestion = useCloneQuestion(questionId)
 const { isActive: isCurrentPreviewActive } = useLink({ to: questionLocation })
 
 const cardVariant = computed(() => (colorMode.value === 'dark' ? 'dark' : 'light'))
diff --git a/frontend/src/components/question/QuestionList.vue b/frontend/src/components/question/QuestionList.vue
index d1771e36..c9ea2f1e 100644
--- a/frontend/src/components/question/QuestionList.vue
+++ b/frontend/src/components/question/QuestionList.vue
@@ -5,24 +5,23 @@
 -->
 
 <template>
-    <LoadingIndicator v-if="asyncStatus === 'loading'" />
-    <ErrorCard v-if="error" :error="error" />
-    <CollapsibleCard v-else expanded>
-        <template #button-title>Saved questions ({{ questionCount }})</template>
-        <InvalidQuestionStateError v-if="hasInvalidStates" class="mb-3" />
-        <QuestionCard
-            v-for="[questionId, question] in Object.entries(questions)"
-            class="question-card"
-            :id="`question-${questionId}`"
-            :key="questionId"
-            :questionId="questionId"
-            :data="question.data"
-            :error="question.error"
-        />
-        <BAlert v-if="questionCount === 0" :model-value="true" class="mb-0" variant="info"
-            >This package has no questions yet.</BAlert
+    <LoadingIndicator :loading="isPending">
+        <ErrorCard v-if="error" :error="error" />
+        <ListView
+            v-else
+            :items="questions"
+            text-empty="This package has no questions yet."
+            title="Saved questions"
+            deferred-item-model="question"
         >
-    </CollapsibleCard>
+            <template #prepend-list v-if="hasInvalidStates">
+                <InvalidQuestionStateError class="mb-3" />
+            </template>
+            <template #item="{ item, id }">
+                <QuestionCard :id="`question-${id}`" :question-id="id" v-bind="item as QuestionItem" />
+            </template>
+        </ListView>
+    </LoadingIndicator>
 </template>
 
 <script lang="ts" setup>
@@ -32,29 +31,23 @@ import { useQuestionStatesQuery } from '@/queries'
 import { isDetailedServerError } from '@/types'
 import type { DetailedServerError, OptionsFormData } from '@/types'
 
-const { asyncStatus, error, data } = useQuestionStatesQuery()
+const { error, data, isPending } = useQuestionStatesQuery()
 
-const questions = computed<Record<string, { data?: OptionsFormData; error?: DetailedServerError }>>(() => {
+interface QuestionItem {
+    data?: OptionsFormData
+    error?: DetailedServerError
+}
+
+const questions = computed(() => {
     if (data.value === undefined) {
         return {}
     }
-    const entries = Object.entries(data.value).map(([questionId, value]) => [
+    const entries: [string, QuestionItem][] = Object.entries(data.value).map(([questionId, value]) => [
         questionId,
-        isDetailedServerError(value) ? { data: undefined, error: value } : { data: value, error: undefined },
+        isDetailedServerError(value) ? { error: value } : { data: value },
     ])
     return Object.fromEntries(entries)
 })
 
-const questionCount = computed(() => Object.keys(questions.value).length)
 const hasInvalidStates = computed(() => Object.values(questions.value).some((q) => q.error))
 </script>
-
-<style lang="scss" scoped>
-.question-card {
-    margin-bottom: $spacer;
-
-    &:last-of-type {
-        margin-bottom: 0;
-    }
-}
-</style>
diff --git a/frontend/src/components/question/QuestionOptions.vue b/frontend/src/components/question/QuestionOptions.vue
index 929c9816..06ee6a48 100644
--- a/frontend/src/components/question/QuestionOptions.vue
+++ b/frontend/src/components/question/QuestionOptions.vue
@@ -5,43 +5,44 @@
 -->
 
 <template>
-    <LoadingIndicator v-if="asyncStatus === 'loading'" />
-    <ErrorCard v-if="error" :error="error" />
-    <BForm v-else-if="formDefinition">
-        <OptionsSection header="General" name="general" :elements="formDefinition.general" />
-        <OptionsSection
-            v-for="section in formDefinition.sections"
-            :elements="section.elements"
-            :header="section.header"
-            :key="section.name"
-            :name="section.name"
-        />
-    </BForm>
-    <ButtonGroup class="mb-4">
-        <template v-if="hasEditableFields">
-            <IconButton :disabled="isSaveDisabled" :icon-component="SubmitIcon" @click="submit" variant="primary">{{
-                submitLabel
-            }}</IconButton>
-            <IconButton
-                :disabled="isSaveDisabled"
-                :icon-component="IMdiContentSaveMove"
-                @click="saveAndReturn"
-                variant="secondary"
-                >{{ submitLabel }} and return</IconButton
+    <LoadingIndicator :loading="isPending">
+        <ErrorCard v-if="error" :error="error" />
+        <BForm v-else-if="formDefinition">
+            <OptionsSection header="General" name="general" :elements="formDefinition.general" />
+            <OptionsSection
+                v-for="section in formDefinition.sections"
+                :elements="section.elements"
+                :header="section.header"
+                :key="section.name"
+                :name="section.name"
+            />
+        </BForm>
+        <ButtonGroup class="mb-4">
+            <template v-if="hasEditableFields">
+                <IconButton :disabled="isSaveDisabled" :icon-component="SubmitIcon" @click="submit" variant="primary">{{
+                    submitLabel
+                }}</IconButton>
+                <IconButton
+                    :disabled="isSaveDisabled"
+                    :icon-component="IMdiContentSaveMove"
+                    @click="saveAndReturn"
+                    variant="secondary"
+                    >{{ submitLabel }} and return</IconButton
+                >
+                <IconButton
+                    :disabled="isPreviewDisabled"
+                    :icon-component="IMdiEye"
+                    @click="saveAndPreview"
+                    variant="secondary"
+                    >{{ submitAndPreviewLabel }}</IconButton
+                >
+            </template>
+            <IconButton v-else :icon-component="IMdiEye" @click="preview" variant="secondary">Preview</IconButton>
+            <IconButton :disabled="isSaving" :icon-component="IMdiCancel" :to="{ name: 'index' }" variant="danger"
+                >Cancel</IconButton
             >
-            <IconButton
-                :disabled="isPreviewDisabled"
-                :icon-component="IMdiEye"
-                @click="saveAndPreview"
-                variant="secondary"
-                >{{ submitAndPreviewLabel }}</IconButton
-            >
-        </template>
-        <IconButton v-else :icon-component="IMdiEye" @click="preview" variant="secondary">Preview</IconButton>
-        <IconButton :disabled="isSaving" :icon-component="IMdiCancel" :to="{ name: 'index' }" variant="danger"
-            >Cancel</IconButton
-        >
-    </ButtonGroup>
+        </ButtonGroup>
+    </LoadingIndicator>
 </template>
 
 <script lang="ts" setup>
@@ -62,8 +63,8 @@ const { questionId } = defineProps<{ questionId: string }>()
 const router = useRouter()
 const store = useAppStateStore()
 const {
-    asyncStatus,
     error,
+    isPending,
     formDefinition,
     hasEditableFields,
     isClean,
diff --git a/frontend/src/composables/attempt/index.ts b/frontend/src/composables/attempt/index.ts
index 45797f14..cbdd25cc 100644
--- a/frontend/src/composables/attempt/index.ts
+++ b/frontend/src/composables/attempt/index.ts
@@ -6,5 +6,6 @@
 
 export { default as useAttempt, type UseAttemptReturn } from './useAttempt'
 export { default as useAttemptDisplay } from './useAttemptDisplay'
+export { default as useCloneAttempt } from './useCloneAttempt'
 export { default as useCreateAttempt } from './useCreateAttempt'
 export { default as useDeleteAttempt } from './useDeleteAttempt'
diff --git a/frontend/src/composables/attempt/useAttempt.ts b/frontend/src/composables/attempt/useAttempt.ts
index 1b8ef78e..0c08f983 100644
--- a/frontend/src/composables/attempt/useAttempt.ts
+++ b/frontend/src/composables/attempt/useAttempt.ts
@@ -5,7 +5,6 @@
  */
 
 import { computed, type ComputedRef } from 'vue'
-import type { AsyncStatus } from '@pinia/colada'
 
 import {
     useAttemptQuery,
@@ -14,6 +13,7 @@ import {
     usePostAttemptScoreMutation,
 } from '@/queries'
 import useAppStateStore from '@/stores/useAppStateStore'
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
 import type { AttemptData, SectionErrorMap } from '@/types'
 
 /**
@@ -24,27 +24,16 @@ import type { AttemptData, SectionErrorMap } from '@/types'
  * @returns An object containing form state and mutation methods.
  */
 function useAttempt(questionId: string, attemptId: string): UseAttemptReturn {
-    const { asyncStatus: dataAsyncStatus, data: attemptData, error: dataError } = useAttemptQuery(questionId, attemptId)
-    const { asyncStatus: postAsyncStatus, mutateAsync: postAttempt } = usePostAttemptMutation(questionId, attemptId)
-    const { asyncStatus: deleteAttemptAsyncStatus, mutateAsync: deleteAttempt } = useDeleteAttemptMutation(
-        questionId,
-        attemptId,
-    )
-    const { asyncStatus: postScoreAsyncStatus, mutateAsync: postScore } = usePostAttemptScoreMutation(
-        questionId,
-        attemptId,
-    )
+    const { data: attemptData, error: dataError, isPending } = useAttemptQuery(questionId, attemptId)
+    const { mutateAsync: postAttempt } = usePostAttemptMutation(questionId, attemptId)
+    const { mutateAsync: deleteAttempt } = useDeleteAttemptMutation(questionId, attemptId)
+    const { mutateAsync: postScore } = usePostAttemptScoreMutation(questionId, attemptId)
 
     const { setError } = useAppStateStore()
+    const { addOperation, removeOperation } = usePendingOperationsStore()
 
     return {
-        asyncStatus: computed(() =>
-            [dataAsyncStatus, postAsyncStatus, deleteAttemptAsyncStatus, postScoreAsyncStatus].every(
-                ({ value }) => value === 'idle',
-            )
-                ? 'idle'
-                : 'loading',
-        ),
+        isPending,
         error: computed(() => dataError.value),
 
         attemptData: computed(() => attemptData.value?.attempt_data),
@@ -55,26 +44,35 @@ function useAttempt(questionId: string, attemptId: string): UseAttemptReturn {
         isRestartDisabled: computed(() => attemptData.value?.attempt_data.attempt_status === 'STARTED'),
 
         async save(formData) {
+            const operation = addOperation('submit', { modelType: 'attempt' })
             try {
                 await postAttempt(formData)
             } catch (err) {
                 setError(err)
+            } finally {
+                removeOperation(operation)
             }
         },
 
         async score() {
+            const operation = addOperation('score')
             try {
                 await postScore()
             } catch (err) {
                 setError(err)
+            } finally {
+                removeOperation(operation)
             }
         },
 
         async restart() {
+            const operation = addOperation('delete', { modelType: 'attempt' })
             try {
                 await deleteAttempt()
             } catch (err) {
                 setError(err)
+            } finally {
+                removeOperation(operation)
             }
         },
     }
@@ -85,8 +83,8 @@ interface UseAttemptReturn {
     /** Attempt data. */
     attemptData: ComputedRef<AttemptData | undefined>
 
-    /** Computed combined async loading status. */
-    asyncStatus: ComputedRef<AsyncStatus>
+    /** Whether the request is still pending its first call. */
+    isPending: ComputedRef<boolean>
 
     /** Computed reference to the latest error from underlying queries. */
     error: ComputedRef<Error | null>
diff --git a/frontend/src/composables/attempt/useCloneAttempt.ts b/frontend/src/composables/attempt/useCloneAttempt.ts
new file mode 100644
index 00000000..53baddf8
--- /dev/null
+++ b/frontend/src/composables/attempt/useCloneAttempt.ts
@@ -0,0 +1,23 @@
+/*
+ * This file is part of the QuestionPy SDK. (https://questionpy.org)
+ * The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
+ * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
+ */
+
+import { useClone } from '@/composables/common'
+import { usePostAttemptCloneMutation } from '@/queries'
+
+/**
+ * Composable that returns a function to clone an attempt.
+ *
+ * @param questionId The ID of the question the attempt belongs to.
+ * @param attemptId The ID of the attempt to clone.
+ * @returns The ID of the new attempt.
+ */
+function useCloneAttempt(questionId: string, attemptId: string) {
+    const makeMutateAsync = (newId: string) => usePostAttemptCloneMutation(questionId, attemptId, newId).mutateAsync
+    const navigateTo = { name: 'question', params: { questionId } } as const
+    return useClone('attempt', makeMutateAsync, navigateTo)
+}
+
+export default useCloneAttempt
diff --git a/frontend/src/composables/attempt/useDeleteAttempt.ts b/frontend/src/composables/attempt/useDeleteAttempt.ts
index 798d9f83..8b397f8e 100644
--- a/frontend/src/composables/attempt/useDeleteAttempt.ts
+++ b/frontend/src/composables/attempt/useDeleteAttempt.ts
@@ -4,9 +4,12 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
+import { useRouter } from 'vue-router'
+
 import { useConfirmModal } from '@/composables/common'
 import { useDeleteAttemptMutation } from '@/queries'
 import useAppStateStore from '@/stores/useAppStateStore'
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
 
 /**
  * Composable that returns a function to delete an attempt after displaying a confirmation modal.
@@ -18,6 +21,9 @@ import useAppStateStore from '@/stores/useAppStateStore'
 function useDeleteAttempt(questionId: string, attemptId: string) {
     const { mutateAsync } = useDeleteAttemptMutation(questionId, attemptId)
     const { setError } = useAppStateStore()
+    const { addOperation, removeOperation } = usePendingOperationsStore()
+    const router = useRouter()
+
     const confirmModal = useConfirmModal({
         title: 'Delete Attempt',
         body: 'Are you sure you want to delete this attempt?',
@@ -26,10 +32,19 @@ function useDeleteAttempt(questionId: string, attemptId: string) {
 
     return async () => {
         if (await confirmModal()) {
+            // Navigate away from attempt preview page *before* deleting to prevent re-creation
+            if (router.currentRoute.value.name === 'question-attempt') {
+                await router.push({ name: 'question', params: { questionId } })
+            }
+
+            const operation = addOperation('delete', { modelType: 'attempt' })
             try {
                 await mutateAsync()
             } catch (err) {
                 setError(err)
+                return
+            } finally {
+                removeOperation(operation)
             }
         }
     }
diff --git a/frontend/src/composables/common/index.ts b/frontend/src/composables/common/index.ts
index 2960fd5c..7a5d53ac 100644
--- a/frontend/src/composables/common/index.ts
+++ b/frontend/src/composables/common/index.ts
@@ -4,4 +4,7 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
+export { default as useClone } from './useClone'
 export { default as useConfirmModal } from './useConfirmModal'
+export { default as useDeferredItem } from './useDeferredItem'
+export { default as useHintItem } from './useHintItem'
diff --git a/frontend/src/composables/common/useClone.ts b/frontend/src/composables/common/useClone.ts
new file mode 100644
index 00000000..552450ef
--- /dev/null
+++ b/frontend/src/composables/common/useClone.ts
@@ -0,0 +1,71 @@
+/*
+ * 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 { isNavigationFailure, useRouter } from 'vue-router'
+import type { RouteLocationAsRelative } from 'vue-router'
+
+import { generateId } from '@/composables/composableUtils'
+import useAppStateStore from '@/stores/useAppStateStore'
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
+import type { OperationModelType } from '@/stores/usePendingOperationsStore'
+
+/**
+ * Composable that provides a function to clone a specific item of a model.
+ *
+ * The returned function generates a new ID, performs an asynchronous mutation
+ * using the provided `makeMutateAsync` function, and manages pending operations
+ * during the process. After a successful clone, it navigates to a specified route
+ * and triggers a deferred hint for the new item.
+ *
+ * @param modelType The type of model to clone.
+ * @param makeMutateAsync A factory function that receives the new item ID and
+ *   returns a function performing the asynchronous clone operation.
+ * @param navigateTo The target route to navigate to after cloning is complete.
+ * @returns A function that, when invoked, clones the item, manages operations,
+ *   navigates to the specified route, triggers a deferred item hint, and returns
+ *   the newly generated item ID. Returns `undefined` if an error occurs or
+ *   navigation fails.
+ */
+function useClone(
+    modelType: OperationModelType,
+    makeMutateAsync: (id: string) => () => Promise<unknown>,
+    navigateTo: RouteLocationAsRelative,
+) {
+    const { setError } = useAppStateStore()
+    const { addOperation, removeOperation } = usePendingOperationsStore()
+    const router = useRouter()
+
+    return async () => {
+        const newId = generateId()
+
+        // 1. Perform the request
+        const mutateAsync = makeMutateAsync(newId)
+        const cloneOperation = addOperation('clone', { modelType })
+        try {
+            await mutateAsync()
+        } catch (err) {
+            setError(err)
+            return
+        } finally {
+            removeOperation(cloneOperation)
+        }
+
+        // 2. Navigate to the target route if not already there
+        if (router.currentRoute.value.name !== navigateTo.name) {
+            const navResult = await router.push(navigateTo)
+            if (isNavigationFailure(navResult)) {
+                return
+            }
+        }
+
+        // 3. Schedule a deferred operation for the new item so the UI can highlight it
+        addOperation('deferred-item', { modelType, id: newId })
+
+        return newId
+    }
+}
+
+export default useClone
diff --git a/frontend/src/composables/common/useDeferredItem.ts b/frontend/src/composables/common/useDeferredItem.ts
new file mode 100644
index 00000000..a32ab179
--- /dev/null
+++ b/frontend/src/composables/common/useDeferredItem.ts
@@ -0,0 +1,63 @@
+/*
+ * This file is part of the QuestionPy SDK. (https://questionpy.org)
+ * The QuestionPy SDK is free software released under terms of the MIT license. See LICENSE.md.
+ * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
+ */
+
+import { computed, nextTick, toValue, watch } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
+import type { OperationModelType } from '@/stores/usePendingOperationsStore'
+
+/**
+ * Composable for handling deferred operations on a reactive collection of items.
+ *
+ * This composable watches both a reactive item map (`items`) and the pending operations store. When a
+ * `deferred-item` operation matches the given `modelType` and the corresponding item becomes available in `items`,
+ * it calls the provided `handleDeferredItem` callback with the item's ID and removes the operation from the store.
+ *
+ * Use this when you want to react to items that are expected to appear asynchronously, ensuring that the callback
+ * is invoked only once the item exists.
+ *
+ * @template T Type of items stored in the `items` map.
+ * @param modelType The model type to filter relevant deferred operations.
+ * @param items An object mapping item IDs to items (ref or getter).
+ * @param handleDeferredItem Callback invoked with the item ID once it appears.
+ */
+function useDeferredItem<T extends object>(
+    modelType: OperationModelType,
+    items: MaybeRefOrGetter<Record<string, T>>,
+    handleDeferredItem: (id: string) => Promise<void>,
+) {
+    const { getOperationsByType, removeOperation } = usePendingOperationsStore()
+    const deferredItemOperations = computed(() => getOperationsByType('deferred-item'))
+
+    watch(
+        () => ({
+            newOps: deferredItemOperations.value,
+            newItems: toValue(items),
+        }),
+        async ({ newOps, newItems }) => {
+            // Check for an operation that concerns us
+            for (const op of newOps) {
+                if (op.modelType === modelType) {
+                    // Check if the item is available
+                    if (newItems[op.id]) {
+                        // Ensure Vue updated the DOM
+                        await nextTick()
+
+                        try {
+                            await handleDeferredItem(op.id)
+                        } finally {
+                            removeOperation(op)
+                        }
+                    }
+                }
+            }
+        },
+        { immediate: true },
+    )
+}
+
+export default useDeferredItem
diff --git a/frontend/src/composables/common/useHintItem.ts b/frontend/src/composables/common/useHintItem.ts
new file mode 100644
index 00000000..0b116780
--- /dev/null
+++ b/frontend/src/composables/common/useHintItem.ts
@@ -0,0 +1,90 @@
+/*
+ * 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 { type ComponentPublicInstance, ref } from 'vue'
+
+/**
+ * Composable for scrolling to an item and temporarily highlighting it in the DOM.
+ *
+ * The composable tracks items by ID, scrolls them into view, and exposes which IDs are currently highlighted.
+ *
+ * @param options Optional configuration:
+ *   - `highlightDelay`: Time to wait before highlighting to compensate for scrolling delay.
+ *   - `scrollBehavior`: Scroll options for `scrollIntoView` (default: `{ behavior: 'smooth', block: 'center' }`).
+ * @returns Object with:
+ *   - `highlightedIds`: Reactive set of IDs currently highlighted.
+ *   - `hintItem(id)`: Scrolls the item into view and adds it to `highlightedIds` temporarily.
+ *   - `registerElementRef(id)`: Returns a ref registration function for the given ID; should be bound to
+ *     the element in the template.
+ */
+function useHintItem(
+    options: {
+        highlightDelay?: number
+        scrollBehavior?: ScrollIntoViewOptions
+    } = {},
+) {
+    // Default options
+    const {
+        highlightDelay = 600,
+        scrollBehavior = {
+            behavior: 'smooth',
+            block: 'center',
+        },
+    } = options
+
+    const highlightedIds = ref<Set<string>>(new Set())
+    const elements = ref<Record<string, HTMLElement>>({})
+
+    const registerElementRef = (attemptId: string) => (el: Element | ComponentPublicInstance | null) => {
+        if (el) {
+            if (el instanceof HTMLElement) {
+                elements.value[attemptId] = el
+            }
+        } else {
+            // Cleanup on unmount
+            delete elements.value[attemptId]
+        }
+    }
+
+    const hintItem = (id: string) =>
+        new Promise<void>((resolve) => {
+            const el = elements.value[id]
+            let fallbackTimeout: number | null = null
+
+            if (!el) {
+                return resolve()
+            }
+
+            el.scrollIntoView(scrollBehavior)
+
+            const removeId = () => {
+                highlightedIds.value.delete(id)
+                resolve()
+            }
+
+            // Just in case 'animationend' never fires
+            fallbackTimeout = window.setTimeout(removeId, 3000)
+
+            // Unfortunately, scrollIntoView does not return a Promise :(
+            window.setTimeout(() => {
+                highlightedIds.value.add(id)
+                el.addEventListener(
+                    'animationend',
+                    () => {
+                        if (fallbackTimeout) {
+                            window.clearTimeout(fallbackTimeout)
+                        }
+                        removeId()
+                    },
+                    { once: true },
+                )
+            }, highlightDelay)
+        })
+
+    return { highlightedIds, hintItem, registerElementRef }
+}
+
+export default useHintItem
diff --git a/frontend/src/composables/question/elements/useIsDisabled.ts b/frontend/src/composables/question/elements/useIsDisabled.ts
index 86ddc1ad..be13710a 100644
--- a/frontend/src/composables/question/elements/useIsDisabled.ts
+++ b/frontend/src/composables/question/elements/useIsDisabled.ts
@@ -4,10 +4,12 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 
 import { useFormDataState } from '@/composables/question'
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
 
 /**
  * A composable providing a disabled state to options form elements.
@@ -20,8 +22,9 @@ import { useFormDataState } from '@/composables/question'
  */
 function useIsDisabled(disabled: Ref<boolean>): ComputedRef<boolean> {
     const { isSaving } = useFormDataState()
+    const { hasPendingOperations } = storeToRefs(usePendingOperationsStore())
 
-    return computed(() => isSaving.value || disabled.value)
+    return computed(() => hasPendingOperations.value || isSaving.value || disabled.value)
 }
 
 export default useIsDisabled
diff --git a/frontend/src/composables/question/index.ts b/frontend/src/composables/question/index.ts
index b011c6a4..af005e9f 100644
--- a/frontend/src/composables/question/index.ts
+++ b/frontend/src/composables/question/index.ts
@@ -4,6 +4,7 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
+export { default as useCloneQuestion } from './useCloneQuestion'
 export { default as useCreateQuestion } from './useCreateQuestion'
 export { default as useDeleteAllQuestions } from './useDeleteAllQuestions'
 export { default as useDeleteQuestion } from './useDeleteQuestion'
diff --git a/frontend/src/composables/question/useCloneQuestion.ts b/frontend/src/composables/question/useCloneQuestion.ts
new file mode 100644
index 00000000..34da90d3
--- /dev/null
+++ b/frontend/src/composables/question/useCloneQuestion.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { useClone } from '@/composables/common'
+import { usePostQuestionCloneMutation } from '@/queries'
+
+/**
+ * Composable that returns a function to clone a question.
+ *
+ * @param questionId The ID of the question to clone.
+ * @returns The ID of the new question.
+ */
+function useCloneQuestion(questionId: string) {
+    const makeMutateAsync = (newId: string) => usePostQuestionCloneMutation(questionId, newId).mutateAsync
+    const navigateTo = { name: 'index' } as const
+    return useClone('question', makeMutateAsync, navigateTo)
+}
+
+export default useCloneQuestion
diff --git a/frontend/src/composables/question/useDeleteAllQuestions.ts b/frontend/src/composables/question/useDeleteAllQuestions.ts
index 72eb1e92..a507c3c0 100644
--- a/frontend/src/composables/question/useDeleteAllQuestions.ts
+++ b/frontend/src/composables/question/useDeleteAllQuestions.ts
@@ -9,6 +9,7 @@ import { useRouter } from 'vue-router'
 import { useConfirmModal } from '@/composables/common'
 import { useDeleteAllOptionsFormDataMutation } from '@/queries'
 import useAppStateStore from '@/stores/useAppStateStore'
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
 
 /**
  * Composable that returns a function to delete all question states after displaying a confirmation modal.
@@ -24,14 +25,18 @@ function useDeleteAllQuestions() {
         body: 'Are you sure you want to delete all question states?',
         okTitle: 'Delete All Questions',
     })
+    const { addOperation, removeOperation } = usePendingOperationsStore()
 
     return async () => {
         if (await confirmModal()) {
+            const operation = addOperation('delete', { modelType: 'question' })
             try {
                 await mutateAsync()
             } catch (err) {
                 setError(err)
                 return
+            } finally {
+                removeOperation(operation)
             }
 
             // Next, navigate to the index page, because the old route may not exist anymore
diff --git a/frontend/src/composables/question/useDeleteQuestion.ts b/frontend/src/composables/question/useDeleteQuestion.ts
index 9d9f052f..4252a0f6 100644
--- a/frontend/src/composables/question/useDeleteQuestion.ts
+++ b/frontend/src/composables/question/useDeleteQuestion.ts
@@ -7,6 +7,7 @@
 import { useConfirmModal } from '@/composables/common'
 import { useDeleteOptionsFormDataMutation } from '@/queries'
 import useAppStateStore from '@/stores/useAppStateStore'
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
 
 /**
  * Composable that returns a function to delete a question after displaying a confirmation modal.
@@ -17,6 +18,8 @@ import useAppStateStore from '@/stores/useAppStateStore'
 function useDeleteQuestion(questionId: string) {
     const { mutateAsync } = useDeleteOptionsFormDataMutation(questionId)
     const { setError } = useAppStateStore()
+    const { addOperation, removeOperation } = usePendingOperationsStore()
+
     const confirmModal = useConfirmModal({
         title: 'Delete Question',
         body: 'Are you sure you want to delete this question?',
@@ -25,10 +28,13 @@ function useDeleteQuestion(questionId: string) {
 
     return async () => {
         if (await confirmModal()) {
+            const operation = addOperation('delete', { modelType: 'question' })
             try {
                 await mutateAsync()
             } catch (err) {
                 setError(err)
+            } finally {
+                removeOperation(operation)
             }
         }
     }
diff --git a/frontend/src/composables/question/useFormDataState.ts b/frontend/src/composables/question/useFormDataState.ts
index fb104b79..a2971a6b 100644
--- a/frontend/src/composables/question/useFormDataState.ts
+++ b/frontend/src/composables/question/useFormDataState.ts
@@ -5,10 +5,10 @@
  */
 
 import { computed, inject, provide, ref, toRaw, watch } from 'vue'
-import type { AsyncStatus } from '@pinia/colada'
 import type { ComputedRef, InjectionKey, Ref, ShallowRef } from 'vue'
 
 import { useOptionsFormDataQuery, useOptionsFormDefinitionQuery, usePostOptionsFormDataMutation } from '@/queries'
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
 import type { OptionsFormData, OptionsFormDefinition, OptionsFormValue, ServerValidationErrors } from '@/types'
 
 import { areFormDataObjIdentical, getErrorKey, getFormData, hasEditableElements } from './formDataUtils'
@@ -23,16 +23,16 @@ const QUESTION_FORM_DATA_KEY = Symbol('question-form-data') as InjectionKey<UseF
  */
 function provideFormDataState(questionId: string): UseFormDataStateReturn {
     const {
-        asyncStatus: formDefinitionAsyncStatus,
         data: formDefinition,
         error: formDefinitionError,
+        isPending: formDefinitionIsPending,
         status: formDefinitionStatus,
     } = useOptionsFormDefinitionQuery(questionId)
     const {
-        asyncStatus: formDataAsyncStatus,
         data: formDataRemote,
         error: formDataError,
         refresh: formDataRefresh,
+        isPending: formDataIsPending,
         status: formDataStatus,
     } = useOptionsFormDataQuery(questionId)
     const {
@@ -49,6 +49,8 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
     // Form validation errors
     const formErrors = ref<ServerValidationErrors>({})
 
+    const { addOperation, removeOperation } = usePendingOperationsStore()
+
     // Build form data from server-side state
     watch(
         [() => formDefinitionStatus.value, () => formDataStatus.value],
@@ -71,14 +73,8 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
         },
     )
 
-    const asyncStatus = computed(() =>
-        [formDefinitionAsyncStatus, formDataAsyncStatus, postDataAsyncStatus].some(
-            (status) => status.value === 'loading',
-        )
-            ? 'loading'
-            : 'idle',
-    )
     const error = computed(() => formDefinitionError.value ?? formDataError.value ?? postDataError.value)
+    const isPending = computed(() => formDefinitionIsPending.value || formDataIsPending.value)
 
     // Form logic
 
@@ -106,6 +102,8 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
 
     async function submit(): Promise<boolean> {
         const rawFormData = toRaw(formDataCurrent.value)
+
+        const operation = addOperation('submit', { modelType: 'question' })
         try {
             formErrors.value = await postData(rawFormData)
         } catch (err) {
@@ -113,10 +111,14 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
                 mutationState.value.error = err
             }
             throw err
+        } finally {
+            removeOperation(operation)
         }
+
         formDataClean.value = structuredClone(rawFormData)
         mutationState.value.error = null
         await formDataRefresh()
+
         return Object.keys(formErrors.value).length === 0
     }
 
@@ -142,7 +144,7 @@ function provideFormDataState(questionId: string): UseFormDataStateReturn {
         formDefinition,
         formData: formDataCurrent,
         formErrors,
-        asyncStatus,
+        isPending,
         error,
 
         hasEditableFields,
@@ -193,8 +195,8 @@ interface UseFormDataStateReturn {
     /** Reactive reference to current form validation errors. */
     formErrors: Ref<ServerValidationErrors>
 
-    /** Computed combined async loading status. */
-    asyncStatus: ComputedRef<AsyncStatus>
+    /**  Whether the form requests are still pending their first call. */
+    isPending: ComputedRef<boolean>
 
     /** Computed reference to the latest error from underlying queries. */
     error: ComputedRef<Error | null>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 6075adf2..def72b9f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -8,6 +8,7 @@ import 'bootstrap/scss/bootstrap.scss'
 import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
 // Poly-fill `Regexp.escape()` (https://caniuse.com/mdn-javascript_builtins_regexp_escape)
 import 'core-js/actual/regexp/escape'
+import './styles/global-styles.scss'
 
 import { PiniaColada } from '@pinia/colada'
 import { createBootstrap } from 'bootstrap-vue-next'
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 8643c8b1..375b7827 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -5,8 +5,8 @@
 -->
 
 <template>
-    <PackageCard class="mb-4" />
-    <ButtonGroup class="mb-4">
+    <PackageCard />
+    <ButtonGroup>
         <IconButton :icon-component="IMdiImport" variant="link" @click="importQuestion">Import question</IconButton>
         <IconButton :icon-component="IMdiAdd" @click="createQuestion" variant="primary">New question</IconButton>
     </ButtonGroup>
diff --git a/frontend/src/pages/question/[questionId]/attempt/[attemptId].vue b/frontend/src/pages/question/[questionId]/attempt/[attemptId].vue
index eeb214c4..f091950b 100644
--- a/frontend/src/pages/question/[questionId]/attempt/[attemptId].vue
+++ b/frontend/src/pages/question/[questionId]/attempt/[attemptId].vue
@@ -5,18 +5,11 @@
 -->
 
 <template>
-    <IconButton
-        :to="{ name: 'question', params: { questionId: params.questionId } }"
-        :icon-component="IMdiArrowLeft"
-        class="ps-0 mb-2"
-        variant="link"
-        >Back to Question Preview</IconButton
-    >
+    <BackLink :to="{ name: 'question', params: { questionId: params.questionId } }">Back to Question Preview</BackLink>
     <AttemptPreview :questionId="params.questionId" :attemptId="params.attemptId" />
 </template>
 
 <script setup lang="ts">
-import IMdiArrowLeft from '~icons/mdi/arrow-left'
 import { useRoute } from 'vue-router'
 
 const { params } = useRoute('question-attempt')
diff --git a/frontend/src/pages/question/[questionId]/index.vue b/frontend/src/pages/question/[questionId]/index.vue
index 4b47e9db..8a6aa342 100644
--- a/frontend/src/pages/question/[questionId]/index.vue
+++ b/frontend/src/pages/question/[questionId]/index.vue
@@ -5,11 +5,11 @@
 -->
 
 <template>
-    <IconButton :to="{ name: 'index' }" :icon-component="IMdiArrowLeft" class="ps-0 mb-2" variant="link"
-        >Back to Package Preview</IconButton
-    >
-    <QuestionCard class="mb-3" :question-id="params.questionId" :data="formData?.data" :error="detailedServerError" />
-    <ButtonGroup class="mb-4">
+    <BackLink :to="{ name: 'index' }">Back to Package Preview</BackLink>
+    <LoadingIndicator :loading="isPending">
+        <QuestionCard :question-id="params.questionId" :data="formData?.data" :error="detailedServerError" />
+    </LoadingIndicator>
+    <ButtonGroup>
         <IconButton :icon-component="IMdiImport" variant="link" @click="importAttempt">Import attempt</IconButton>
         <IconButton :icon-component="IMdiAdd" @click="createAttempt" variant="primary">New attempt</IconButton>
     </ButtonGroup>
@@ -18,7 +18,6 @@
 
 <script setup lang="ts">
 import IMdiAdd from '~icons/mdi/add'
-import IMdiArrowLeft from '~icons/mdi/arrow-left'
 import IMdiImport from '~icons/mdi/import'
 import { computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -27,9 +26,9 @@ import { useCreateAttempt } from '@/composables/attempt'
 import { FetchError, useOptionsFormDataQuery } from '@/queries'
 import type { DetailedServerError } from '@/types'
 
-const route = useRouter()
+const router = useRouter()
 const { params } = useRoute('question')
-const { data: formData, error } = useOptionsFormDataQuery(params.questionId)
+const { data: formData, error, isPending } = useOptionsFormDataQuery(params.questionId)
 const createAttempt = useCreateAttempt(params.questionId)
 
 // If question doesn't exist, show index instead
@@ -37,7 +36,7 @@ watch(
     formData,
     (value) => {
         if (value?.is_new) {
-            route.replace({ name: 'index' })
+            router.replace({ name: 'index' })
         }
     },
     { immediate: true },
diff --git a/frontend/src/queries/attempt.ts b/frontend/src/queries/attempt.ts
index 757e602a..32f32c86 100644
--- a/frontend/src/queries/attempt.ts
+++ b/frontend/src/queries/attempt.ts
@@ -13,12 +13,14 @@ import type { AttemptData, AttemptRenderData } from '@/types'
 import { delete_, get, post } from './fetch'
 import QUERY_KEYS from './queryKeys'
 
-type InvalidateQueries = ReturnType<typeof useQueryCache>['invalidateQueries']
+function useInvalidateAttempt(questionId: string, attemptId?: string) {
+    const { invalidateQueries } = useQueryCache()
 
-function makeAttemptInvalidator(questionId: string, attemptId: string, invalidateQueries: InvalidateQueries) {
     return () => {
         invalidateQueries({ key: QUERY_KEYS.attempt.list(questionId) })
-        invalidateQueries({ key: QUERY_KEYS.attempt.byId(questionId, attemptId) })
+        if (attemptId) {
+            invalidateQueries({ key: QUERY_KEYS.attempt.byId(questionId, attemptId) })
+        }
     }
 }
 
@@ -44,14 +46,14 @@ const useAttemptListQuery = (questionId: string) =>
  * @returns An query return object.
  */
 function useAttemptQuery(questionId: string, attemptId: string) {
-    const { invalidateQueries } = useQueryCache()
+    const invalidateAttempt = useInvalidateAttempt(questionId)
     const { displayOptions } = storeToRefs(useDisplayOptionsStore())
 
     return useQuery({
         key: () => QUERY_KEYS.attempt.renderedbyId(questionId, attemptId, displayOptions.value),
         query: () =>
             get<AttemptRenderData>(`question/${questionId}/attempt/${attemptId}`, displayOptions.value).then((data) => {
-                invalidateQueries({ key: QUERY_KEYS.attempt.list(questionId) })
+                invalidateAttempt()
                 return data
             }),
     })
@@ -65,11 +67,11 @@ function useAttemptQuery(questionId: string, attemptId: string) {
  * @returns A mutation return object.
  */
 function useDeleteAttemptMutation(questionId: string, attemptId: string) {
-    const { invalidateQueries } = useQueryCache()
+    const invalidateAttempt = useInvalidateAttempt(questionId, attemptId)
 
     return useMutation({
         mutation: () => delete_(`question/${questionId}/attempt/${attemptId}`),
-        onSettled: makeAttemptInvalidator(questionId, attemptId, invalidateQueries),
+        onSettled: invalidateAttempt,
     })
 }
 
@@ -81,12 +83,12 @@ function useDeleteAttemptMutation(questionId: string, attemptId: string) {
  * @returns An mutation return object.
  */
 function usePostAttemptMutation(questionId: string, attemptId: string) {
-    const { invalidateQueries } = useQueryCache()
+    const invalidateAttempt = useInvalidateAttempt(questionId, attemptId)
 
     return useMutation({
         mutation: (formData: Record<string, unknown>) =>
             post(`question/${questionId}/attempt/${attemptId}`, JSON.stringify(formData)),
-        onSettled: makeAttemptInvalidator(questionId, attemptId, invalidateQueries),
+        onSettled: invalidateAttempt,
     })
 }
 
@@ -98,11 +100,28 @@ function usePostAttemptMutation(questionId: string, attemptId: string) {
  * @returns An mutation return object.
  */
 function usePostAttemptScoreMutation(questionId: string, attemptId: string) {
-    const { invalidateQueries } = useQueryCache()
+    const invalidateAttempt = useInvalidateAttempt(questionId, attemptId)
 
     return useMutation({
         mutation: () => post(`question/${questionId}/attempt/${attemptId}/score`),
-        onSettled: makeAttemptInvalidator(questionId, attemptId, invalidateQueries),
+        onSettled: invalidateAttempt,
+    })
+}
+
+/**
+ * Clone an attempt.
+ *
+ * @param questionId The ID of the question.
+ * @param attemptId The ID of the attempt.
+ * @param newAttemptId The ID of the new attempt.
+ * @returns An mutation return object.
+ */
+function usePostAttemptCloneMutation(questionId: string, attemptId: string, newAttemptId: string) {
+    const invalidateAttempt = useInvalidateAttempt(questionId)
+
+    return useMutation({
+        mutation: () => post(`question/${questionId}/attempt/${attemptId}/clone/${newAttemptId}`),
+        onSettled: invalidateAttempt,
     })
 }
 
@@ -110,6 +129,7 @@ export {
     useAttemptListQuery,
     useAttemptQuery,
     useDeleteAttemptMutation,
+    usePostAttemptCloneMutation,
     usePostAttemptMutation,
     usePostAttemptScoreMutation,
 }
diff --git a/frontend/src/queries/index.ts b/frontend/src/queries/index.ts
index c7cc2141..aa9de8e0 100644
--- a/frontend/src/queries/index.ts
+++ b/frontend/src/queries/index.ts
@@ -8,6 +8,7 @@ export {
     useAttemptListQuery,
     useAttemptQuery,
     useDeleteAttemptMutation,
+    usePostAttemptCloneMutation,
     usePostAttemptMutation,
     usePostAttemptScoreMutation,
 } from './attempt'
@@ -19,5 +20,6 @@ export {
     useOptionsFormDataQuery,
     useOptionsFormDefinitionQuery,
     usePostOptionsFormDataMutation,
+    usePostQuestionCloneMutation,
     useQuestionStatesQuery,
 } from './question'
diff --git a/frontend/src/queries/question.ts b/frontend/src/queries/question.ts
index b86bcabf..bc5df5d9 100644
--- a/frontend/src/queries/question.ts
+++ b/frontend/src/queries/question.ts
@@ -123,11 +123,32 @@ function useDeleteOptionsFormDataMutation(questionId: string) {
     })
 }
 
+/**
+ * Clone a question.
+ *
+ * @param questionId The ID of the question.
+ * @param newQuestionId The ID of the new question.
+ * @returns An mutation return object.
+ */
+function usePostQuestionCloneMutation(questionId: string, newQuestionId: string) {
+    const { invalidateQueries } = useQueryCache()
+
+    const invalidateKey = QUERY_KEYS.question.list()
+
+    return useMutation({
+        mutation: () => post(`question/${questionId}/clone/${newQuestionId}`),
+        onSettled: () => {
+            invalidateQueries({ key: invalidateKey })
+        },
+    })
+}
+
 export {
     useDeleteAllOptionsFormDataMutation,
     useDeleteOptionsFormDataMutation,
     useOptionsFormDataQuery,
     useOptionsFormDefinitionQuery,
     usePostOptionsFormDataMutation,
+    usePostQuestionCloneMutation,
     useQuestionStatesQuery,
 }
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index e4d03697..1f9ded04 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -4,10 +4,12 @@
  * (c) Technische Universität Berlin, innoCampus <info@isis.tu-berlin.de>
  */
 
+import { storeToRefs } from 'pinia'
 import { createRouter, createWebHistory } from 'vue-router'
 import { handleHotUpdate, routes } from 'vue-router/auto-routes'
 
 import useAppStateStore from '@/stores/useAppStateStore'
+import usePendingOperationsStore from '@/stores/usePendingOperationsStore'
 
 // Catch-all route
 routes.push({
@@ -19,10 +21,18 @@ routes.push({
 const history = createWebHistory(import.meta.env.BASE_URL)
 const router = createRouter({ history, routes })
 
-router.beforeEach((to, from, next) => {
+// Prevent navigation while operations are pending
+router.beforeEach(() => {
+    const { hasPendingOperations } = storeToRefs(usePendingOperationsStore())
+    if (hasPendingOperations.value) {
+        return false
+    }
+})
+
+// Update page title
+router.beforeEach((to) => {
     const store = useAppStateStore()
     store.pageTitle = to.meta.title
-    next()
 })
 
 // This will update routes at runtime without reloading the page
diff --git a/frontend/src/stores/usePendingOperationsStore.ts b/frontend/src/stores/usePendingOperationsStore.ts
new file mode 100644
index 00000000..c9eac295
--- /dev/null
+++ b/frontend/src/stores/usePendingOperationsStore.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 { defineStore } from 'pinia'
+import { computed, reactive } from 'vue'
+
+/** A form submit operation. */
+interface SubmitOperation {
+    type: 'submit'
+    modelType: OperationModelType
+}
+
+/** An attempt score operation. */
+interface ScoreOperation {
+    type: 'score'
+}
+
+/** A delete operation. */
+interface DeleteOperation {
+    type: 'delete'
+    modelType: OperationModelType
+}
+
+/** A cloning operation. */
+interface CloneOperation {
+    type: 'clone'
+    modelType: OperationModelType
+}
+
+/**
+ * Deferred operation for an item that will appear asynchronously.
+ * Can be processed once the item exists.
+ */
+interface DeferredItemOperation {
+    type: 'deferred-item'
+    modelType: OperationModelType
+    id: string
+}
+
+type OperationModelType = 'attempt' | 'question'
+type OperationType = Operation['type']
+type Operation = SubmitOperation | ScoreOperation | DeleteOperation | CloneOperation | DeferredItemOperation
+
+type ExtractOperation<K extends OperationType> = Extract<Operation, { type: K }>
+
+/**
+ * Store for managing pending background operations that may affect multiple components
+ * or persist across page navigation.
+ *
+ * Tracks operations such as cloning items or deferred items, allowing components to react
+ * to ongoing or future operations and maintain consistent UI state.
+ */
+const usePendingOperationsStore = defineStore('pendingOperations', () => {
+    const operations = reactive<Operation[]>([])
+
+    function getOperationsByType<K extends OperationType>(type: K) {
+        return operations.filter((op): op is ExtractOperation<K> => op.type === type)
+    }
+
+    function addOperation<K extends OperationType>(
+        type: K,
+        opts: Omit<ExtractOperation<K>, 'type'> = {} as ExtractOperation<K>,
+    ): ExtractOperation<K> {
+        const op = { type, ...opts } as ExtractOperation<K>
+        operations.push(op)
+        return op
+    }
+
+    function removeOperation(op: Operation) {
+        const index = operations.indexOf(op)
+        return operations.splice(index, 1)
+    }
+
+    const hasPendingOperations = computed(() => operations.length > 0)
+
+    return {
+        operations,
+        getOperationsByType,
+        addOperation,
+        removeOperation,
+        hasPendingOperations,
+    }
+})
+
+export type { OperationModelType }
+export default usePendingOperationsStore
diff --git a/frontend/src/styles/_global.scss b/frontend/src/styles/_global.scss
new file mode 100644
index 00000000..ef8dc131
--- /dev/null
+++ b/frontend/src/styles/_global.scss
@@ -0,0 +1,5 @@
+// WARNING: This file must not contain anything that compiles to actual CSS code!
+
+@mixin highlight-pulse {
+    animation: highlight-pulse 1500ms ease-in-out;
+}
diff --git a/frontend/src/styles/global-styles.scss b/frontend/src/styles/global-styles.scss
new file mode 100644
index 00000000..fb59abd5
--- /dev/null
+++ b/frontend/src/styles/global-styles.scss
@@ -0,0 +1,11 @@
+@keyframes highlight-pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba($primary-border-subtle, 0);
+    }
+    50% {
+        box-shadow: 0 0 0 $spacer * 0.5 $primary-border-subtle;
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba($primary-border-subtle, 0);
+    }
+}
diff --git a/frontend/src/types/typeUtils.ts b/frontend/src/types/typeUtils.ts
index 262edbb4..c961b0e4 100644
--- a/frontend/src/types/typeUtils.ts
+++ b/frontend/src/types/typeUtils.ts
@@ -7,7 +7,6 @@
 import type { DetailedServerError, EditableElement, FormElement, HasElements } from '.'
 
 /** Utility function to be used as exhaustion check. */
-
 function assertNever(value: never): never {
     throw new Error(`This code should never be reached. Value='${value}'`)
 }
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 3fc0d508..eab9d976 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -10,7 +10,7 @@ import VueRouter from 'unplugin-vue-router/vite'
 import { defineConfig } from 'vite'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
-// Expose Bootstrap utilities and variables for use in SCSS style blocks.
+// Expose Bootstrap utilities/variables, and custom app import for use in component SCSS style blocks.
 // DO NOT include SCSS that compiles to actual CSS here, as it results in duplicate styles.
 const additionalScss = `
 @import "bootstrap/scss/functions";
@@ -19,6 +19,7 @@ const additionalScss = `
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
+@import "@/styles/_global";
 `
 
 // https://vite.dev/config/
diff --git a/pyproject.toml b/pyproject.toml
index 286b6aa8..4f054652 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -91,7 +91,7 @@ allow-dunder-method-names = ["__get_pydantic_core_schema__"]
 addopts = "--doctest-modules --ignore examples"
 markers = ["app_routes", "render_params", "source_pkg", "ui_file"]
 # We run E2E tests separately
-norecursedirs = "e2e"
+norecursedirs = "e2e frontend"
 # https://github.com/pytest-dev/pytest-asyncio#auto-mode
 asyncio_mode = "auto"
 # Module scope is recommended: https://pytest-asyncio.readthedocs.io/en/stable/concepts.html#asyncio-event-loops
diff --git a/questionpy_sdk/webserver/controllers/attempt/controller.py b/questionpy_sdk/webserver/controllers/attempt/controller.py
index 5f4c2322..e43f3996 100644
--- a/questionpy_sdk/webserver/controllers/attempt/controller.py
+++ b/questionpy_sdk/webserver/controllers/attempt/controller.py
@@ -99,6 +99,38 @@ async def score_attempt(self, question_id: str, attempt_id: str) -> None:
 
         await self._state_manager.write_attempt_score(question_id, attempt_id, attempt_scored)
 
+    async def clone_attempt(self, question_id: str, attempt_id: str, new_attempt_id: str) -> None:
+        """Clones the attempt."""
+        data: dict[str, JsonValue] | None = None
+        score: ScoreModel | None = None
+
+        # Ensure we're not overwriting an existing attempt
+        attempts = await self._state_manager.read_attempts(question_id)
+        if new_attempt_id in attempts:
+            raise webserver_errors.DuplicateAttemptError
+
+        # state and seed must exist...
+        state = await self._state_manager.read_attempt_state(question_id, attempt_id)
+        seed = await self._state_manager.read_attempt_seed(question_id, attempt_id)
+
+        await self._state_manager.write_attempt_state(question_id, new_attempt_id, state)
+        await self._state_manager.write_attempt_seed(question_id, new_attempt_id, seed)
+
+        # ...data and score might not
+        try:
+            data = await self._state_manager.read_attempt_data(question_id, attempt_id)
+        except webserver_errors.MissingAttemptDataError:
+            pass
+        else:
+            await self._state_manager.write_attempt_data(question_id, new_attempt_id, data)
+
+        try:
+            score = await self._state_manager.read_attempt_score(question_id, attempt_id)
+        except webserver_errors.MissingAttemptScoreError:
+            pass
+        else:
+            await self._state_manager.write_attempt_score(question_id, new_attempt_id, score)
+
     async def _get_or_start_attempt(
         self,
         question_id: str,
diff --git a/questionpy_sdk/webserver/controllers/question/controller.py b/questionpy_sdk/webserver/controllers/question/controller.py
index 726fa023..c8f0c7de 100644
--- a/questionpy_sdk/webserver/controllers/question/controller.py
+++ b/questionpy_sdk/webserver/controllers/question/controller.py
@@ -5,12 +5,12 @@
 from pydantic import ConfigDict
 from pydantic.dataclasses import dataclass
 
+import questionpy_sdk.webserver.errors as webserver_errors
 from questionpy_common.api.qtype import InvalidQuestionStateError
 from questionpy_common.elements import OptionsFormDefinition
 from questionpy_sdk.webserver.constants import DEFAULT_REQUEST_INFO
 from questionpy_sdk.webserver.controllers.base import BaseController
 from questionpy_sdk.webserver.controllers.question._form_data import OptionsFormData, flatten_form_data, parse_form_data
-from questionpy_sdk.webserver.errors import DetailedServerError, MissingQuestionStateError, format_error
 
 
 @dataclass(config=ConfigDict(use_attribute_docstrings=True))
@@ -28,7 +28,7 @@ class QuestionController(BaseController):
     async def get_form_definition(self, question_id: str) -> OptionsFormDefinition:
         try:
             state = await self._state_manager.read_question_state(question_id)
-        except MissingQuestionStateError:
+        except webserver_errors.MissingQuestionStateError:
             state = None
 
         async with self.get_worker() as worker:
@@ -36,9 +36,9 @@ async def get_form_definition(self, question_id: str) -> OptionsFormDefinition:
 
         return form_definition
 
-    async def get_questions(self) -> dict[str, OptionsFormData | DetailedServerError]:
+    async def get_questions(self) -> dict[str, OptionsFormData | webserver_errors.DetailedServerError]:
         states_str = await self._state_manager.read_question_states()
-        states: dict[str, OptionsFormData | DetailedServerError] = {}
+        states: dict[str, OptionsFormData | webserver_errors.DetailedServerError] = {}
 
         if len(states_str) > 0:
             async with self.get_worker() as worker:
@@ -47,7 +47,9 @@ async def get_questions(self) -> dict[str, OptionsFormData | DetailedServerError
                     try:
                         form_definition, form_data = await worker.get_options_form(DEFAULT_REQUEST_INFO, state)
                     except InvalidQuestionStateError as err:
-                        states[question_id] = DetailedServerError(type(err).__name__, format_error(err))
+                        states[question_id] = webserver_errors.DetailedServerError(
+                            type(err).__name__, webserver_errors.format_error(err)
+                        )
                     else:
                         section_names = self._section_names_from_definition(form_definition)
                         flat_form_data = flatten_form_data(form_data, section_names)
@@ -59,7 +61,7 @@ async def get_options_state(self, question_id: str) -> OptionsStateResponse:
         try:
             state = await self._state_manager.read_question_state(question_id)
             is_new = False
-        except MissingQuestionStateError:
+        except webserver_errors.MissingQuestionStateError:
             state = None
             is_new = True
 
@@ -76,7 +78,7 @@ async def save_options_state(self, question_id: str, data: OptionsFormData) -> N
 
         try:
             old_state = await self._state_manager.read_question_state(question_id)
-        except MissingQuestionStateError:
+        except webserver_errors.MissingQuestionStateError:
             old_state = None
 
         async with self.get_worker() as worker:
@@ -92,6 +94,15 @@ async def delete_question(self, question_id: str) -> None:
     async def delete_all_questions(self) -> None:
         await self._state_manager.delete_all_questions()
 
+    async def clone_question(self, question_id: str, new_question_id: str) -> None:
+        # Ensure we're not overwriting an existing question
+        questions = await self._state_manager.read_question_states()
+        if new_question_id in questions:
+            raise webserver_errors.DuplicateQuestionError
+
+        state = await self._state_manager.read_question_state(question_id)
+        await self._state_manager.write_question_state(new_question_id, state)
+
     @staticmethod
     def _section_names_from_definition(form_definition: OptionsFormDefinition) -> list[str]:
         return [section.name for section in form_definition.sections]
diff --git a/questionpy_sdk/webserver/errors.py b/questionpy_sdk/webserver/errors.py
index 2bdb44d0..f319096b 100644
--- a/questionpy_sdk/webserver/errors.py
+++ b/questionpy_sdk/webserver/errors.py
@@ -9,17 +9,25 @@
 from pydantic_core import ErrorDetails
 
 
-class MissingStateError(Exception):
+class StateError(Exception):
     message: str
 
     def __init__(self) -> None:
         super().__init__(self.message)
 
 
+class MissingStateError(StateError):
+    pass
+
+
 class MissingQuestionStateError(MissingStateError):
     message = "The question state is missing."
 
 
+class DuplicateQuestionError(StateError):
+    message = "The question already exists."
+
+
 class MissingAttemptStateError(MissingStateError):
     message = "The attempt state is missing."
 
@@ -36,6 +44,10 @@ class MissingAttemptDataError(MissingStateError):
     message = "The attempt data is missing."
 
 
+class DuplicateAttemptError(StateError):
+    message = "The attempt already exists."
+
+
 @dataclass(config=ConfigDict(use_attribute_docstrings=True))
 class DetailedServerError:
     """Represents a server-side error serialized for client display."""
diff --git a/questionpy_sdk/webserver/routes/attempt.py b/questionpy_sdk/webserver/routes/attempt.py
index a9a67319..ec92edae 100644
--- a/questionpy_sdk/webserver/routes/attempt.py
+++ b/questionpy_sdk/webserver/routes/attempt.py
@@ -80,10 +80,27 @@ async def post(self) -> web.Response:
 
         try:
             await self.controller.score_attempt(question_id, attempt_id)
-        except (
-            webserver_errors.MissingQuestionStateError,
-            webserver_errors.MissingAttemptStateError,
-            webserver_errors.MissingAttemptDataError,
-        ) as err:
+        except webserver_errors.MissingStateError as err:
             raise web.HTTPBadRequest(text=str(err)) from err
         return web.Response()
+
+
+@routes.view(
+    f"/question/{{question_id:{ID_RE}}}/attempt/{{attempt_id:{ID_RE}}}/clone/{{new_attempt_id:{ID_RE}}}",
+    name="attempt.clone",
+)
+class AttemptCloneView(AttemptBaseView):
+    async def post(self) -> web.Response:
+        """Clones an attempt."""
+        question_id = self.request.match_info["question_id"]
+        attempt_id = self.request.match_info["attempt_id"]
+        new_attempt_id = self.request.match_info["new_attempt_id"]
+
+        try:
+            await self.controller.clone_attempt(question_id, attempt_id, new_attempt_id)
+        except webserver_errors.MissingStateError as err:
+            raise web.HTTPNotFound from err
+        except webserver_errors.DuplicateAttemptError as err:
+            raise web.HTTPConflict(text=str(err)) from err
+
+        return web.Response()
diff --git a/questionpy_sdk/webserver/routes/question.py b/questionpy_sdk/webserver/routes/question.py
index c74f848a..37d02002 100644
--- a/questionpy_sdk/webserver/routes/question.py
+++ b/questionpy_sdk/webserver/routes/question.py
@@ -9,7 +9,7 @@
 from questionpy import OptionsFormValidationError
 from questionpy_sdk.webserver.constants import ID_RE
 from questionpy_sdk.webserver.controllers.question import QuestionController
-from questionpy_sdk.webserver.errors import MissingQuestionStateError
+from questionpy_sdk.webserver.errors import DuplicateQuestionError, MissingQuestionStateError
 from questionpy_sdk.webserver.routes.base import BaseView
 
 routes = web.RouteTableDef()
@@ -69,3 +69,20 @@ async def post(self) -> web.Response:
             return web.json_response(err.errors, status=HTTPUnprocessableEntity.status_code)
 
         return web.json_response()
+
+
+@routes.view(f"/question/{{question_id:{ID_RE}}}/clone/{{new_question_id:{ID_RE}}}", name="question.clone")
+class QuestionCloneView(QuestionBaseView):
+    async def post(self) -> web.Response:
+        """Clones a question."""
+        question_id = self.request.match_info["question_id"]
+        new_question_id = self.request.match_info["new_question_id"]
+
+        try:
+            await self.controller.clone_question(question_id, new_question_id)
+        except MissingQuestionStateError as err:
+            raise HTTPNotFound from err
+        except DuplicateQuestionError as err:
+            raise web.HTTPConflict(text=str(err)) from err
+
+        return web.Response()
diff --git a/tests/questionpy_sdk/webserver/controllers/attempt/test_controller.py b/tests/questionpy_sdk/webserver/controllers/attempt/test_controller.py
index 42701f9a..d24d8078 100644
--- a/tests/questionpy_sdk/webserver/controllers/attempt/test_controller.py
+++ b/tests/questionpy_sdk/webserver/controllers/attempt/test_controller.py
@@ -107,9 +107,7 @@ async def test_get_attempt_render_errors(
             )
 
 
-async def test_get_attempts(
-    controller: AttemptController, mock_state_manager: AsyncMock, mock_jinja2_template: Mock
-) -> None:
+async def test_get_attempts(controller: AttemptController, mock_jinja2_template: Mock) -> None:
     mock_jinja2_template.render_async.return_value = "<html>Attempt</html>"
     attempts = await controller.get_attempts("QaKxpanc")
 
@@ -147,3 +145,49 @@ async def test_score_attempt(
     args, _ = mock_state_manager.write_attempt_score.call_args
     attempt_scored = args[2]
     assert attempt_scored.score == 0.9
+
+
+@pytest.mark.parametrize(
+    ("data_missing", "score_missing"),
+    [
+        (False, False),
+        (True, False),
+        (False, True),
+        (True, True),
+    ],
+)
+async def test_clone_attempt(
+    data_missing: bool, score_missing: bool, controller: AttemptController, mock_state_manager: AsyncMock
+) -> None:
+    if data_missing:
+        mock_state_manager.read_attempt_data.side_effect = webserver_errors.MissingAttemptDataError
+    if score_missing:
+        mock_state_manager.read_attempt_score.side_effect = webserver_errors.MissingAttemptScoreError
+
+    await controller.clone_attempt("QaKxpanc", "AepM0AFN", "Pei2ohya")
+
+    args, _ = mock_state_manager.write_attempt_state.call_args
+    assert args == ("QaKxpanc", "Pei2ohya", "attempt_state")
+
+    args, _ = mock_state_manager.write_attempt_seed.call_args
+    assert args == ("QaKxpanc", "Pei2ohya", 1234)
+
+    if data_missing:
+        mock_state_manager.write_attempt_data.assert_not_called()
+    else:
+        args, _ = mock_state_manager.write_attempt_data.call_args
+        assert args == ("QaKxpanc", "Pei2ohya", {"answer": "42"})
+
+    if score_missing:
+        mock_state_manager.write_attempt_score.assert_not_called()
+    else:
+        args, _ = mock_state_manager.write_attempt_score.call_args
+        assert args[0] == "QaKxpanc"
+        assert args[1] == "Pei2ohya"
+        assert args[2].scoring_code == ScoringCode.AUTOMATICALLY_SCORED
+        assert args[2].score == 1.0
+
+
+async def test_clone_attempt_duplicate(controller: AttemptController) -> None:
+    with pytest.raises(webserver_errors.DuplicateAttemptError):
+        await controller.clone_attempt("QaKxpanc", "AepM0AFN", "eTCRKiod")
diff --git a/tests/questionpy_sdk/webserver/controllers/question/test_controller.py b/tests/questionpy_sdk/webserver/controllers/question/test_controller.py
index 94a79647..63feca9e 100644
--- a/tests/questionpy_sdk/webserver/controllers/question/test_controller.py
+++ b/tests/questionpy_sdk/webserver/controllers/question/test_controller.py
@@ -10,7 +10,7 @@
 from questionpy_common.elements import OptionsFormDefinition, TextInputElement
 from questionpy_sdk.webserver.controllers.question import QuestionController
 from questionpy_sdk.webserver.controllers.question.controller import OptionsStateResponse
-from questionpy_sdk.webserver.errors import MissingQuestionStateError
+from questionpy_sdk.webserver.errors import DuplicateQuestionError, MissingQuestionStateError
 from questionpy_server.models import QuestionCreated
 
 
@@ -32,9 +32,7 @@ async def test_get_form_definition(
     assert isinstance(form_definition.general[0], TextInputElement)
 
 
-async def test_get_questions(
-    controller: QuestionController, mock_state_manager: AsyncMock, mock_worker: AsyncMock
-) -> None:
+async def test_get_questions(controller: QuestionController, mock_worker: AsyncMock) -> None:
     mock_worker.get_options_form.return_value = (
         OptionsFormDefinition(general=[TextInputElement(label="Foo", name="foo")]),
         {"foo": "Bar"},
@@ -89,3 +87,17 @@ async def test_save_options_state(
 
     mock_state_manager.read_question_state.assert_called_once()
     mock_state_manager.write_question_state.assert_called_once_with("QaKxpanc", "question_state")
+
+
+async def test_clone_question(
+    controller: QuestionController, mock_state_manager: AsyncMock, mock_worker: AsyncMock
+) -> None:
+    await controller.clone_question("QaKxpanc", "Bu2boh5u")
+
+    mock_state_manager.read_question_state.assert_called_once()
+    mock_state_manager.write_question_state.assert_called_once_with("Bu2boh5u", "question_state")
+
+
+async def test_clone_question_duplicate(controller: QuestionController, mock_state_manager: AsyncMock) -> None:
+    with pytest.raises(DuplicateQuestionError):
+        await controller.clone_question("QaKxpanc", "tKVJTdsv")
diff --git a/tests/questionpy_sdk/webserver/routes/test_attempt.py b/tests/questionpy_sdk/webserver/routes/test_attempt.py
index ce8345de..84bd96e1 100644
--- a/tests/questionpy_sdk/webserver/routes/test_attempt.py
+++ b/tests/questionpy_sdk/webserver/routes/test_attempt.py
@@ -6,8 +6,9 @@
 
 import pytest
 from aiohttp.test_utils import TestClient
-from aiohttp.web_exceptions import HTTPOk
+from aiohttp.web_exceptions import HTTPConflict, HTTPNotFound, HTTPOk
 
+import questionpy_sdk.webserver.errors as webserver_errors
 from questionpy import DisplayRole
 from questionpy_sdk.webserver.controllers.attempt.controller import AttemptRenderData
 from questionpy_sdk.webserver.controllers.attempt.data import AttemptData, AttemptStatus
@@ -97,3 +98,35 @@ async def test_post_attempt_score(client: TestClient, mock_controller: AsyncMock
     async with client.post("/question/myuQ2JWl/attempt/UY9ryXzq/score") as resp:
         assert resp.status == HTTPOk.status_code
         mock_controller.score_attempt.assert_awaited_once_with("myuQ2JWl", "UY9ryXzq")
+
+
+@pytest.mark.app_routes(attempt.routes)
+async def test_post_attempt_clone(client: TestClient, mock_controller: AsyncMock) -> None:
+    async with client.post("/question/myuQ2JWl/attempt/UY9ryXzq/clone/Bu2boh5u") as resp:
+        assert resp.status == HTTPOk.status_code
+        mock_controller.clone_attempt.assert_awaited_once_with("myuQ2JWl", "UY9ryXzq", "Bu2boh5u")
+
+
+@pytest.mark.parametrize(
+    "exception",
+    [
+        webserver_errors.MissingAttemptStateError,
+        webserver_errors.MissingAttemptSeedError,
+    ],
+)
+@pytest.mark.app_routes(attempt.routes)
+async def test_post_attempt_clone_not_found(
+    exception: webserver_errors.StateError, client: TestClient, mock_controller: AsyncMock
+) -> None:
+    mock_controller.clone_attempt.side_effect = exception
+
+    async with client.post("/question/myuQ2JWl/attempt/UY9ryXzq/clone/Bu2boh5u") as resp:
+        assert resp.status == HTTPNotFound.status_code
+
+
+@pytest.mark.app_routes(attempt.routes)
+async def test_post_attempt_clone_duplicate(client: TestClient, mock_controller: AsyncMock) -> None:
+    mock_controller.clone_attempt.side_effect = webserver_errors.DuplicateAttemptError
+
+    async with client.post("/question/myuQ2JWl/attempt/UY9ryXzq/clone/Bu2boh5u") as resp:
+        assert resp.status == HTTPConflict.status_code
diff --git a/tests/questionpy_sdk/webserver/routes/test_question.py b/tests/questionpy_sdk/webserver/routes/test_question.py
index b51640d1..884cb8fc 100644
--- a/tests/questionpy_sdk/webserver/routes/test_question.py
+++ b/tests/questionpy_sdk/webserver/routes/test_question.py
@@ -6,10 +6,11 @@
 
 import pytest
 from aiohttp.test_utils import TestClient
-from aiohttp.web_exceptions import HTTPOk, HTTPUnprocessableEntity
+from aiohttp.web_exceptions import HTTPConflict, HTTPNotFound, HTTPOk, HTTPUnprocessableEntity
 
 from questionpy import OptionsFormValidationError
 from questionpy_common.elements import OptionsFormDefinition
+from questionpy_sdk.webserver.errors import DuplicateQuestionError, MissingQuestionStateError
 from questionpy_sdk.webserver.routes.question import routes
 
 
@@ -72,3 +73,26 @@ async def test_post_question_state_validation_error(client: TestClient, mock_con
         assert resp.status == HTTPUnprocessableEntity.status_code
         data = await resp.json()
         assert data["some"] == "error"
+
+
+@pytest.mark.app_routes(routes)
+async def test_post_question_clone(client: TestClient, mock_controller: AsyncMock) -> None:
+    async with client.post("/question/myuQ2JWl/clone/Bu2boh5u") as resp:
+        assert resp.status == HTTPOk.status_code
+        mock_controller.clone_question.assert_awaited_once_with("myuQ2JWl", "Bu2boh5u")
+
+
+@pytest.mark.app_routes(routes)
+async def test_post_question_clone_not_found(client: TestClient, mock_controller: AsyncMock) -> None:
+    mock_controller.clone_question.side_effect = MissingQuestionStateError
+
+    async with client.post("/question/myuQ2JWl/clone/Bu2boh5u") as resp:
+        assert resp.status == HTTPNotFound.status_code
+
+
+@pytest.mark.app_routes(routes)
+async def test_post_question_clone_duplicate(client: TestClient, mock_controller: AsyncMock) -> None:
+    mock_controller.clone_question.side_effect = DuplicateQuestionError
+
+    async with client.post("/question/myuQ2JWl/clone/Bu2boh5u") as resp:
+        assert resp.status == HTTPConflict.status_code