diff --git a/frontend/src/components/activity/ScheduleEntry.vue b/frontend/src/components/activity/ScheduleEntry.vue
index d113ff21d8..5d776fcfd7 100644
--- a/frontend/src/components/activity/ScheduleEntry.vue
+++ b/frontend/src/components/activity/ScheduleEntry.vue
@@ -61,9 +61,19 @@ Displays a single scheduleEntry
             </v-list-item>
           </v-list>
         </v-menu>
-        <a v-if="!editActivityTitle" style="color: inherit" @click="makeTitleEditable()">
-          {{ activity.title }}
-        </a>
+        <button
+          v-if="!editActivityTitle"
+          class="ml-2 ec-activity-title"
+          @click="makeTitleEditable()"
+        >
+          {{ activity.title
+          }}<v-icon
+            right
+            size="20"
+            :aria-label="$tc('components.activity.scheduleEntry.editTitle')"
+            >mdi-pencil</v-icon
+          >
+        </button>
       </v-toolbar-title>
       <div v-if="editActivityTitle" class="mx-2 flex-grow-1">
         <api-text-field
@@ -73,6 +83,7 @@ Displays a single scheduleEntry
           dense
           autofocus
           :auto-save="false"
+          resettable
           @finished="editActivityTitle = false"
         />
       </div>
@@ -398,6 +409,16 @@ export default {
   padding: 1.5rem 16px;
 }
 
+.ec-activity-title {
+  .v-icon {
+    opacity: 0;
+  }
+
+  &:hover .v-icon {
+    opacity: 1;
+  }
+}
+
 .e-category-chip-save-icon {
   font-size: 18px;
 }
diff --git a/frontend/src/components/activity/content/LAThematicArea.vue b/frontend/src/components/activity/content/LAThematicArea.vue
index e950732004..c287b33af0 100644
--- a/frontend/src/components/activity/content/LAThematicArea.vue
+++ b/frontend/src/components/activity/content/LAThematicArea.vue
@@ -1,26 +1,27 @@
 <template>
   <card-content-node v-bind="$props">
-    <v-list three-line class="mx-n4">
-      <v-list-item-group>
+    <v-list three-line class="mx-n4 ec-lathematicarea">
+      <v-list-item-group multiple :value="model">
         <v-list-item
           v-for="(option, key) in contentNode.data.options"
           :key="key"
-          tag="label"
+          :value="key"
           :disabled="layoutMode || disabled"
         >
-          <v-list-item-action>
+          <v-list-item-action class="ml-0">
             <api-checkbox
+              :id="contentNode.id + key"
               :fieldname="`data.options.${key}.checked`"
               :uri="contentNode._meta.self"
             />
           </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>{{
-              $tc(`contentNode.laThematicArea.entity.option.${key}.name`)
-            }}</v-list-item-title>
-            <v-list-item-subtitle>{{
-              $tc(`contentNode.laThematicArea.entity.option.${key}.description`)
-            }}</v-list-item-subtitle>
+          <v-list-item-content tag="label" :for="contentNode.id + key">
+            <v-list-item-title
+              >{{ $tc(`contentNode.laThematicArea.entity.option.${key}.name`) }}
+            </v-list-item-title>
+            <v-list-item-subtitle
+              >{{ $tc(`contentNode.laThematicArea.entity.option.${key}.description`) }}
+            </v-list-item-subtitle>
           </v-list-item-content>
         </v-list-item>
       </v-list-item-group>
@@ -37,6 +38,13 @@ export default {
   name: 'LAThematicArea',
   components: { CardContentNode, ApiCheckbox },
   mixins: [contentNodeMixin],
+  computed: {
+    model() {
+      return Object.entries(this.contentNode.data.options)
+        .filter(([, option]) => option.checked)
+        .map(([key]) => key)
+    },
+  },
   methods: {
     async refreshContent() {
       await this.api.reload(this.contentNode)
@@ -44,3 +52,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.ec-lathematicarea .theme--light.v-list-item--active:hover::before,
+.ec-lathematicarea .theme--light.v-list-item--active::before {
+  opacity: 0;
+}
+</style>
diff --git a/frontend/src/components/buttons/IconButton.vue b/frontend/src/components/buttons/IconButton.vue
index 12a73b5d38..98d1af996e 100644
--- a/frontend/src/components/buttons/IconButton.vue
+++ b/frontend/src/components/buttons/IconButton.vue
@@ -34,15 +34,6 @@ export default {
 <style scoped>
 /*noinspection CssUnusedSymbol*/
 .v-icon.animate {
-  animation: spin 0.5s infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  animation: spin-only 0.5s infinite;
 }
 </style>
diff --git a/frontend/src/components/form/api/ApiCheckbox.vue b/frontend/src/components/form/api/ApiCheckbox.vue
index 0672564e46..fb6a76698a 100644
--- a/frontend/src/components/form/api/ApiCheckbox.vue
+++ b/frontend/src/components/form/api/ApiCheckbox.vue
@@ -16,7 +16,14 @@ Displays a field as a e-checkbox + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <ApiWrapperCheckboxAppend
+          v-if="
+            wrapper.hasServerError ||
+            (wrapper.autoSave && wrapper.dirty) ||
+            wrapper.hasLoadingError
+          "
+          :wrapper="wrapper"
+        />
       </template>
     </e-checkbox>
   </api-wrapper>
@@ -25,11 +32,11 @@ Displays a field as a e-checkbox + write access via API wrapper
 <script>
 import { apiPropsMixin } from '@/mixins/apiPropsMixin.js'
 import ApiWrapper from './ApiWrapper.vue'
-import ApiWrapperAppend from './ApiWrapperAppend.vue'
+import ApiWrapperCheckboxAppend from '@/components/form/api/ApiWrapperCheckboxAppend.vue'
 
 export default {
   name: 'ApiCheckbox',
-  components: { ApiWrapper, ApiWrapperAppend },
+  components: { ApiWrapperCheckboxAppend, ApiWrapper },
   mixins: [apiPropsMixin],
   props: {
     // disable delay per default
@@ -41,4 +48,60 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.ec-api-wrapper--saving ::v-deep .v-input--selection-controls__input .v-icon {
+  transition: color 0.2s ease;
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.ec-api-wrapper ::v-deep .v-input--checkbox .v-input--selection-controls__input::before {
+  border: 2px solid transparent;
+  border-radius: 50%;
+  position: absolute;
+  height: 24px;
+  width: 24px;
+  content: '\F0131';
+  color: transparent;
+  transition:
+    transform 0.2s ease-out,
+    border-color 0.2s ease;
+  transform: scale(1.9);
+  pointer-events: none;
+}
+
+.ec-api-wrapper--saving
+  ::v-deep
+  .v-input--checkbox
+  .v-input--selection-controls__input::before {
+  border-color: map-get($blue, 'base');
+  -webkit-mask: conic-gradient(from 0deg at 50% 50%, #0000 0%, #000);
+  transform: scale(1.2);
+  animation: spin 1s linear infinite both;
+  transition: transform 0.2s ease-out;
+}
+
+@keyframes spin {
+  from {
+    transform: scale(1.5) rotate(0deg);
+  }
+  to {
+    transform: scale(1.5) rotate(360deg);
+  }
+}
+
+.ec-api-wrapper--success
+  ::v-deep
+  .v-input--checkbox
+  .v-input--selection-controls__input::before {
+  border-color: map-get($green, 'lighten-2');
+  transform: scale(1.5);
+  transition: none;
+}
+
+.ec-api-wrapper--server-error
+  ::v-deep
+  .v-input--checkbox
+  .v-input--selection-controls__input::before {
+  transform: scale(1.5);
+}
+</style>
diff --git a/frontend/src/components/form/api/ApiColorPicker.vue b/frontend/src/components/form/api/ApiColorPicker.vue
index 91ea041e84..b00f47b8c3 100644
--- a/frontend/src/components/form/api/ApiColorPicker.vue
+++ b/frontend/src/components/form/api/ApiColorPicker.vue
@@ -16,7 +16,7 @@ Displays a field as a color picker + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-color-picker>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiDatePicker.vue b/frontend/src/components/form/api/ApiDatePicker.vue
index 6b1f23d45d..889b6c60e3 100644
--- a/frontend/src/components/form/api/ApiDatePicker.vue
+++ b/frontend/src/components/form/api/ApiDatePicker.vue
@@ -16,7 +16,7 @@ Displays a field as a date picker + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-date-picker>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiRichtext.vue b/frontend/src/components/form/api/ApiRichtext.vue
index 238dd1ac60..dd2cf0c456 100644
--- a/frontend/src/components/form/api/ApiRichtext.vue
+++ b/frontend/src/components/form/api/ApiRichtext.vue
@@ -16,7 +16,7 @@ Displays a field as a e-textarea + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-richtext>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiSelect.vue b/frontend/src/components/form/api/ApiSelect.vue
index 282ce33f89..a614a83a99 100644
--- a/frontend/src/components/form/api/ApiSelect.vue
+++ b/frontend/src/components/form/api/ApiSelect.vue
@@ -7,6 +7,7 @@ Displays a field as a e-select + write access via API wrapper
     v-slot="wrapper"
     v-bind="$props"
     :auto-save-delay="autoSaveDelayComputed"
+    wrapper-input-type="select"
     v-on="$listeners"
   >
     <e-select
@@ -23,8 +24,7 @@ Displays a field as a e-select + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <v-icon>mdi-menu-down</v-icon>
-        <api-wrapper-append :wrapper="wrapper" />
+        <ApiWrapperSelectAppend :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-select>
   </api-wrapper>
@@ -33,11 +33,11 @@ Displays a field as a e-select + write access via API wrapper
 <script>
 import { apiPropsMixin } from '@/mixins/apiPropsMixin.js'
 import ApiWrapper from './ApiWrapper.vue'
-import ApiWrapperAppend from './ApiWrapperAppend.vue'
+import ApiWrapperSelectAppend from '@/components/form/api/ApiWrapperSelectAppend.vue'
 
 export default {
   name: 'ApiSelect',
-  components: { ApiWrapper, ApiWrapperAppend },
+  components: { ApiWrapperSelectAppend, ApiWrapper },
   mixins: [apiPropsMixin],
   props: {
     // disable delay per default
@@ -62,4 +62,8 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+::v-deep .v-input__append-inner {
+  position: relative;
+}
+</style>
diff --git a/frontend/src/components/form/api/ApiSwitch.vue b/frontend/src/components/form/api/ApiSwitch.vue
index 4ac1b97aaf..9bb8d579a3 100644
--- a/frontend/src/components/form/api/ApiSwitch.vue
+++ b/frontend/src/components/form/api/ApiSwitch.vue
@@ -16,7 +16,7 @@ Displays a field as a e-checkbox + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-switch>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiTextField.vue b/frontend/src/components/form/api/ApiTextField.vue
index f7a607771e..8362f98f09 100644
--- a/frontend/src/components/form/api/ApiTextField.vue
+++ b/frontend/src/components/form/api/ApiTextField.vue
@@ -18,7 +18,7 @@ Displays a field as a e-text-field + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-text-field>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiTextarea.vue b/frontend/src/components/form/api/ApiTextarea.vue
index b5af667bc7..6533ed48f6 100644
--- a/frontend/src/components/form/api/ApiTextarea.vue
+++ b/frontend/src/components/form/api/ApiTextarea.vue
@@ -17,7 +17,7 @@ Displays a field as a e-textarea + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-textarea>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiTimePicker.vue b/frontend/src/components/form/api/ApiTimePicker.vue
index dab6c55b28..cf5a31f56c 100644
--- a/frontend/src/components/form/api/ApiTimePicker.vue
+++ b/frontend/src/components/form/api/ApiTimePicker.vue
@@ -16,7 +16,7 @@ Displays a field as a time picker + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-time-picker>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiWrapper.vue b/frontend/src/components/form/api/ApiWrapper.vue
index f58f0e03db..afe4923caf 100644
--- a/frontend/src/components/form/api/ApiWrapper.vue
+++ b/frontend/src/components/form/api/ApiWrapper.vue
@@ -5,8 +5,16 @@ Wrapper component for form components to save data back to API
 <template>
   <ValidationObserver ref="validationObserver" v-slot="validationObserver" slim>
     <v-form
-      :class="[{ 'api-wrapper--inline': !autoSave && !readonly && !separateButtons }]"
-      class="e-form-container"
+      :class="[
+        {
+          'ec-api-wrapper--inline': !autoSave && !readonly && !separateButtons,
+          'ec-api-wrapper--success': status === 'success',
+          'ec-api-wrapper--saving': status === 'saving',
+          'ec-api-wrapper--server-error': hasServerError,
+        },
+        `ec-api-wrapper--type-${wrapperInputType}`,
+      ]"
+      class="e-form-container ec-api-wrapper"
       @submit.prevent="onEnter"
     >
       <slot
@@ -47,6 +55,10 @@ export default {
       type: Function,
       default: null,
     },
+    wrapperInputType: {
+      type: String,
+      default: 'none',
+    },
   },
   data() {
     return {
@@ -257,18 +269,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.api-wrapper--inline .v-btn--last-instance {
+.ec-api-wrapper--inline .v-btn--last-instance {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.api-wrapper--inline .v-btn {
+
+.ec-api-wrapper--inline .v-btn {
   border-top: 1px solid rgba(0, 0, 0, 0.38);
   border-bottom: 1px solid rgba(0, 0, 0, 0.38);
 }
 </style>
 
 <style lang="scss">
-.api-wrapper--inline .v-text-field {
+.ec-api-wrapper--inline .v-text-field {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
diff --git a/frontend/src/components/form/api/ApiWrapperAppend.vue b/frontend/src/components/form/api/ApiWrapperAppend.vue
index 17ee97cc07..d7685a38cc 100644
--- a/frontend/src/components/form/api/ApiWrapperAppend.vue
+++ b/frontend/src/components/form/api/ApiWrapperAppend.vue
@@ -1,92 +1,136 @@
 <template>
-  <div class="d-flex" style="margin-top: -5px">
+  <div class="relative">
     <!-- Success icon after saving -->
     <div class="checkIconContainer">
-      <v-icon color="green" class="checkIcon" :class="checkIconAddon">
-        mdi-content-save
+      <v-icon
+        v-if="false"
+        color="blue-grey lighten-3"
+        class="checkIcon"
+        :class="checkIconAddon"
+      >
+        mdi-cloud-check-variant-outline
       </v-icon>
+      <div v-if="checkIconVisible" class="blue-grey--text text--lighten-3">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="checkIcon"
+          width="28"
+          height="28"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.75"
+          >
+            <path
+              stroke-dasharray="60"
+              stroke-dashoffset="60"
+              d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
+            >
+              <animate
+                fill="freeze"
+                attributeName="stroke-dashoffset"
+                dur="0.5s"
+                values="60;0"
+              />
+            </path>
+            <path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10">
+              <animate
+                fill="freeze"
+                attributeName="stroke-dashoffset"
+                begin="0.6s"
+                dur="0.2s"
+                values="14;0"
+              />
+            </path>
+          </g>
+        </svg>
+      </div>
     </div>
 
-    <!-- Retry/Cancel button if saving failed -->
-    <template v-if="wrapper.hasServerError">
-      <v-tooltip bottom class="ml-auto">
-        <template #activator="{ on }">
-          <v-btn
-            fab
-            dark
-            depressed
-            x-small
-            color="error"
-            type="submit"
-            class="mr-1"
-            :aria-label="$tc('global.button.tryagain')"
-            v-on="on"
-            @click="wrapper.on.save"
-          >
-            <v-icon>mdi-refresh</v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $tc('global.button.tryagain') }}</span>
-      </v-tooltip>
-      <v-tooltip bottom class="ml-auto">
-        <template #activator="{ on }">
-          <v-btn
-            fab
-            dark
-            depressed
-            x-small
-            color="grey"
-            :aria-label="$tc('global.button.cancel')"
-            v-on="on"
-            @click="wrapper.on.reset"
-          >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $tc('global.button.cancel') }}</span>
-      </v-tooltip>
-    </template>
+    <div class="d-flex gap-1" style="margin-top: -5px">
+      <!-- Retry/Cancel button if saving failed -->
+      <template v-if="wrapper.hasServerError">
+        <v-tooltip bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="error"
+              type="submit"
+              :aria-label="$tc('global.button.tryagain')"
+              v-on="on"
+              @click="wrapper.on.save"
+            >
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.tryagain') }}</span>
+        </v-tooltip>
+        <v-tooltip v-if="resettable" bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="grey"
+              :aria-label="$tc('global.button.cancel')"
+              v-on="on"
+              @click="wrapper.on.reset"
+            >
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.cancel') }}</span>
+        </v-tooltip>
+      </template>
 
-    <template v-else-if="!wrapper.autoSave">
-      <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
-        <template #activator="{ on }">
-          <v-btn
-            fab
-            dark
-            depressed
-            x-small
-            color="success"
-            type="submit"
-            class="mr-1"
-            :aria-label="$tc('global.button.save')"
-            v-on="on"
-          >
-            <v-icon>mdi-check</v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $tc('global.button.save') }}</span>
-      </v-tooltip>
-      <v-tooltip bottom class="ml-auto">
-        <template #activator="{ on }">
-          <v-btn
-            fab
-            dark
-            depressed
-            x-small
-            color="grey"
-            :aria-label="$tc('global.button.cancel')"
-            v-on="on"
-            @click="wrapper.on.reset"
-          >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $tc('global.button.cancel') }}</span>
-      </v-tooltip>
-    </template>
+      <template v-else-if="!wrapper.autoSave">
+        <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="success"
+              type="submit"
+              :aria-label="$tc('global.button.save')"
+              v-on="on"
+            >
+              <v-icon>mdi-check</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.save') }}</span>
+        </v-tooltip>
+        <v-tooltip v-if="resettable" bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="grey"
+              :aria-label="$tc('global.button.cancel')"
+              v-on="on"
+              @click="wrapper.on.reset"
+            >
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.cancel') }}</span>
+        </v-tooltip>
+      </template>
 
-    <!-- Retry button if loading failed -->
-    <button-retry v-if="wrapper.hasLoadingError" text @click="wrapper.on.reload" />
+      <!-- Retry button if loading failed -->
+      <button-retry v-if="wrapper.hasLoadingError" text @click="wrapper.on.reload" />
+    </div>
   </div>
 </template>
 
@@ -101,6 +145,10 @@ export default {
       required: true,
       type: Object,
     },
+    resettable: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     checkIconAddon() {
@@ -112,6 +160,12 @@ export default {
         return ''
       }
     },
+    checkIconVisible() {
+      return (
+        !(this.wrapper.hasServerError || this.wrapper.dirty) &&
+        this.wrapper.status === 'success'
+      )
+    },
   },
 }
 </script>
@@ -119,21 +173,28 @@ export default {
 <style scoped>
 .checkIconContainer {
   position: absolute;
+  right: 0;
+  margin-top: -2px;
+}
+
+.v-input--dense .checkIconContainer {
+  margin-top: 0;
 }
+
 .v-icon.checkIcon {
-  position: relative;
-  top: -11px;
-  right: 13px;
   transition: opacity 0.2s ease-out;
   opacity: 0;
 }
+
 div.v-input--checkbox .v-icon.checkIcon {
   top: 5px;
   right: 40px;
 }
+
 .v-icon.checkIcon.visible {
   opacity: 1;
 }
+
 .v-icon.checkIcon.hidden {
   transition: none;
 }
diff --git a/frontend/src/components/form/api/ApiWrapperCheckboxAppend.vue b/frontend/src/components/form/api/ApiWrapperCheckboxAppend.vue
new file mode 100644
index 0000000000..b7f17437a4
--- /dev/null
+++ b/frontend/src/components/form/api/ApiWrapperCheckboxAppend.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="ec-api-checkbox-append mt-n1">
+    <!-- Retry/Cancel button if saving failed -->
+    <template v-if="wrapper.hasServerError">
+      <v-tooltip bottom class="ml-auto">
+        <template #activator="{ on }">
+          <v-btn
+            fab
+            dark
+            depressed
+            x-small
+            color="error"
+            type="submit"
+            :aria-label="$tc('global.button.tryagain')"
+            v-on="on"
+            @click="wrapper.on.save"
+          >
+            <v-icon>mdi-refresh</v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $tc('global.button.tryagain') }}</span>
+      </v-tooltip>
+    </template>
+    <template v-else-if="!wrapper.autoSave">
+      <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
+        <template #activator="{ on }">
+          <div class="rounded-full" tabindex="0" v-on="on">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="success"
+              type="submit"
+              :aria-label="$tc('global.button.save')"
+              @click="wrapper.on.save"
+            >
+              <v-icon>mdi-check</v-icon>
+              <span>{{ $tc('global.button.save') }}</span>
+            </v-btn>
+          </div>
+        </template>
+      </v-tooltip>
+    </template>
+
+    <!-- Retry button if loading failed -->
+    <button-retry v-if="wrapper.hasLoadingError" text @click.stop="$emit('reload')" />
+  </div>
+</template>
+
+<script>
+import ButtonRetry from '@/components/buttons/ButtonRetry.vue'
+
+export default {
+  name: 'ApiWrapperCheckboxAppend',
+  components: { ButtonRetry },
+  props: {
+    wrapper: {
+      required: true,
+      type: Object,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/form/api/ApiWrapperSelectAppend.vue b/frontend/src/components/form/api/ApiWrapperSelectAppend.vue
new file mode 100644
index 0000000000..a6a0693ed1
--- /dev/null
+++ b/frontend/src/components/form/api/ApiWrapperSelectAppend.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="ec-api-select-append d-contents">
+    <v-icon v-if="!checkIconVisible">mdi-menu-down</v-icon>
+    <div>
+      <!-- Success icon after saving -->
+      <div class="ec-api-select-append__icon">
+        <svg
+          v-if="checkIconVisible"
+          xmlns="http://www.w3.org/2000/svg"
+          class="checkIcon blue-grey--text text--lighten-3"
+          style="margin-top: -3px; margin-right: -1px"
+          width="28"
+          height="28"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.75"
+          >
+            <path
+              stroke-dasharray="60"
+              stroke-dashoffset="60"
+              d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
+            >
+              <animate
+                fill="freeze"
+                attributeName="stroke-dashoffset"
+                dur="0.5s"
+                values="60;0"
+              />
+            </path>
+            <path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10">
+              <animate
+                fill="freeze"
+                attributeName="stroke-dashoffset"
+                begin="0.6s"
+                dur="0.2s"
+                values="14;0"
+              />
+            </path>
+          </g>
+        </svg>
+      </div>
+
+      <div class="d-flex gap-1" style="margin-top: -5px">
+        <!-- Retry/Cancel button if saving failed -->
+        <template v-if="wrapper.hasServerError">
+          <v-tooltip bottom class="ml-auto">
+            <template #activator="{ on }">
+              <v-btn
+                fab
+                dark
+                depressed
+                x-small
+                color="error"
+                type="submit"
+                :aria-label="$tc('global.button.tryagain')"
+                v-on="on"
+                @mousedown.stop
+                @mouseup.stop
+                @click.stop="wrapper.on.save"
+              >
+                <v-icon>mdi-refresh</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $tc('global.button.tryagain') }}</span>
+          </v-tooltip>
+          <v-tooltip v-if="resettable" bottom class="ml-auto">
+            <template #activator="{ on }">
+              <v-btn
+                fab
+                dark
+                depressed
+                x-small
+                color="grey"
+                :aria-label="$tc('global.button.cancel')"
+                v-on="on"
+                @mousedown.stop
+                @mouseup.stop
+                @click.stop="wrapper.on.reset"
+              >
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $tc('global.button.cancel') }}</span>
+          </v-tooltip>
+        </template>
+
+        <template v-else-if="!wrapper.autoSave">
+          <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
+            <template #activator="{ on }">
+              <v-btn
+                fab
+                dark
+                depressed
+                x-small
+                color="success"
+                type="submit"
+                class="mr-1"
+                :aria-label="$tc('global.button.save')"
+                v-on="on"
+                @mousedown.stop
+                @mouseup.stop
+                @click.stop="wrapper.on.save"
+              >
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $tc('global.button.save') }}</span>
+          </v-tooltip>
+          <v-tooltip v-if="resettable" bottom class="ml-auto">
+            <template #activator="{ on }">
+              <v-btn
+                fab
+                dark
+                depressed
+                x-small
+                color="grey"
+                :aria-label="$tc('global.button.cancel')"
+                v-on="on"
+                @mousedown.stop
+                @mouseup.stop
+                @click.stop="wrapper.on.reset"
+              >
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $tc('global.button.cancel') }}</span>
+          </v-tooltip>
+        </template>
+
+        <!-- Retry button if loading failed -->
+        <button-retry
+          v-if="wrapper.hasLoadingError"
+          text
+          @click.stop="wrapper.on.reload"
+          @mousedown.stop
+          @mouseup.stop
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ButtonRetry from '@/components/buttons/ButtonRetry.vue'
+
+export default {
+  name: 'ApiWrapperSelectAppend',
+  components: { ButtonRetry },
+  props: {
+    wrapper: {
+      required: true,
+      type: Object,
+    },
+    icon: {
+      type: String,
+      default: 'mdi-cloud-check-variant-outline',
+    },
+    resettable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    checkIconAddon() {
+      if (this.wrapper.hasServerError || this.wrapper.dirty) {
+        return 'hidden'
+      } else if (this.wrapper.status === 'success') {
+        return 'visible'
+      } else {
+        return ''
+      }
+    },
+    checkIconVisible() {
+      return (
+        !(this.wrapper.hasServerError || this.wrapper.dirty) &&
+        this.wrapper.status === 'success'
+      )
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.ec-api-select-append__check {
+  opacity: 0;
+}
+
+.ec-api-wrapper--success .ec-api-select-append__check {
+  opacity: 1;
+}
+
+.ec-api-wrapper--success.ec-api-wrapper--type-select .mdi-menu-down {
+  transition: opacity 0.2s ease;
+  opacity: 0;
+}
+</style>
diff --git a/frontend/src/mixins/apiPropsMixin.js b/frontend/src/mixins/apiPropsMixin.js
index c1586a7da7..769d718077 100644
--- a/frontend/src/mixins/apiPropsMixin.js
+++ b/frontend/src/mixins/apiPropsMixin.js
@@ -31,6 +31,7 @@ export const apiPropsMixin = {
     /* enable/disable edit mode */
     readonly: { type: Boolean, required: false, default: false }, // vuetify readonly: same look and feel as normal, but no changes possible
     disabled: { type: Boolean, required: false, default: false }, // vuetify disabled: input greyed out, not focusable
+    resettable: { type: Boolean, required: false, default: false }, // reset field to previous value
 
     /* enable/disable auto save */
     autoSave: { type: Boolean, default: true, required: false },
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index 06c415e5a7..8632d6ee92 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -205,3 +205,12 @@ body {
 .justify-items-center {
   justify-items: center;
 }
+
+@keyframes spin-only {
+  from {
+    transform: scale(1) rotate(0deg);
+  }
+  to {
+    transform: scale(1) rotate(360deg);
+  }
+}