diff --git a/dashboard/src/components/ImagePicker.vue b/dashboard/src/components/ImagePicker.vue
index 8e432c433..e0fa28cfc 100644
--- a/dashboard/src/components/ImagePicker.vue
+++ b/dashboard/src/components/ImagePicker.vue
@@ -1,24 +1,20 @@
 <script setup>
 
-import { useTemplateRef, ref } from 'vue';
+import { useTemplateRef, ref, watch } from 'vue';
+import { Button } from 'pankow';
 
 const fileInput = useTemplateRef('fileInput');
 
-const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight', 'displayWidth', 'disabled']);
-const emits = defineEmits(['changed']);
-defineExpose({
-  clear(originalSrc = '') {
-    internalSrc.value = originalSrc || props.src || props.fallbackSrc;
-  }
-});
+const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight', 'displayWidth', 'disabled', 'saveHandler', 'unsetHandler']);
 
 const image = useTemplateRef('image');
 const internalSrc = ref('');
 const isChanged = ref(false);
+const busy = ref(false);
 
-function onShowIconSelector() {
-  fileInput.value.click();
-}
+watch(() => {
+  internalSrc.value = props.src;
+});
 
 function dataURLtoFile(dataURL, filename) {
   // Split the data URL to get the MIME type and the base64 data
@@ -46,6 +42,37 @@ function dataURLtoFile(dataURL, filename) {
   return file;
 }
 
+async function onSave() {
+  if (typeof props.saveHandler !== 'function') return console.error('saveHandler must be a function in ImagePicker');
+
+  busy.value = true;
+
+  const error = await props.saveHandler(dataURLtoFile(internalSrc.value, 'image.png'));
+  if (!error) isChanged.value = false;
+
+  busy.value = false;
+}
+
+function onCancel() {
+  internalSrc.value = props.src || props.fallbackSrc;
+  isChanged.value = false;
+}
+
+function onEdit() {
+  fileInput.value.click();
+}
+
+async function onUnset() {
+  if (typeof props.unsetHandler !== 'function') return console.error('unsetHandler must be a function in ImagePicker');
+
+  busy.value = true;
+
+  const error = await props.unsetHandler();
+  if (!error) isChanged.value = false;
+
+  busy.value = false;
+}
+
 function onChanged(event) {
   const fr = new FileReader();
   fr.onload = function () {
@@ -96,8 +123,6 @@ function onChanged(event) {
 
       internalSrc.value = canvas.toDataURL('image/png');
       isChanged.value = true;
-
-      emits('changed', dataURLtoFile(internalSrc.value, 'image.png'));
     };
 
     image.src = fr.result;
@@ -113,12 +138,19 @@ function onError() {
 
 <template>
   <div>
-    <div>
+    <div class="image-picker-container">
       <input @change="onChanged($event)" type="file" ref="fileInput" style="display: none" accept="image/*"/>
 
-      <div ref="image" :disabled="disabled || null" class="image-picker" @click="!disabled && onShowIconSelector()">
-        <img :src="internalSrc || src" @error="onError" :style="{ height: displayHeight || null, width: displayWidth || null  }">
-        <i class="image-picker-edit-indicator fa fa-pencil-alt"></i>
+      <div ref="image" :disabled="disabled || null" class="image-picker" @click="!disabled && onEdit()">
+        <img :src="internalSrc || src" @error="onError" class="image-picker-image" :style="{ height: displayHeight || null, width: displayWidth || null  }">
+        <div v-if="isChanged" class="image-picker-actions" style="visibility: visible;">
+          <Button @click.stop="onCancel" secondary tool small icon="fa fa-undo" :disabled="busy"/>
+          <Button @click.stop="onSave" success tool small :loading="busy" :disabled="busy" icon="fa fa-floppy-disk"/>
+        </div>
+        <div v-else-if="!disabled" class="image-picker-actions">
+          <Button @click.stop="onEdit" tool small icon="fa fa-pencil-alt" :disabled="busy"/>
+          <Button @click.stop="onUnset" tool small icon="fa fa-trash" :loading="busy" :disabled="busy" v-if="unsetHandler"/>
+        </div>
       </div>
     </div>
   </div>
@@ -126,6 +158,38 @@ function onError() {
 
 <style scoped>
 
+.image-picker-container {
+  position: relative;
+  display: flex;
+  gap: 6px;
+  flex-direction: column;
+}
+
+.image-picker-actions {
+  position: absolute;
+  display: flex;
+  gap: 6px;
+  bottom: 6px;
+  width: 100%;
+  justify-content: center;
+  visibility: hidden;
+}
+
+@media (hover: none) {
+  .image-picker-actions {
+    visibility: visible;
+  }
+}
+
+.image-picker-actions:hover,
+.image-picker:hover .image-picker-actions {
+  visibility: visible;
+}
+
+.image-picker-image {
+  margin-bottom: 16px;
+}
+
 .image-picker {
   display: inline-block;
   position: relative;
diff --git a/dashboard/src/components/app/Display.vue b/dashboard/src/components/app/Display.vue
index 1c0e54a2a..f6bcc2e34 100644
--- a/dashboard/src/components/app/Display.vue
+++ b/dashboard/src/components/app/Display.vue
@@ -4,6 +4,7 @@ import { ref, onMounted, useTemplateRef } from 'vue';
 import { FormGroup, TextInput, Button, TagInput } from 'pankow';
 import ImagePicker from '../ImagePicker.vue';
 import AppsModel from '../../models/AppsModel.js';
+import { API_ORIGIN } from '../../constants.js';
 
 const props = defineProps([ 'app' ]);
 
@@ -18,12 +19,6 @@ const label = ref('');
 const tags = ref([]);
 const iconUrl = ref('');
 
-let newIcon = null;
-
-function onIconChanged(file) {
-  newIcon = file;
-}
-
 function getDataURLFromFile(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -64,28 +59,26 @@ async function onSubmit() {
     }
   }
 
-  if (newIcon) {
-    let tmp;
-    if (newIcon === 'clear') {
-      tmp = '';
-    } else {
-      tmp = (await getDataURLFromFile(newIcon)).replace(/^data:image\/[a-z]+;base64,/, '');
-    }
-
-    const [error] = await appsModel.configure(props.app.id, 'icon', { icon: tmp });
-    if (error) {
-      iconError.value = error.body ? error.body.message : 'Internal error';
-      busy.value = false;
-      return console.error(error);
-    }
-  }
-
   busy.value = false;
 }
 
-function onClearIcon() {
-  imagePicker.value.clear(`${iconUrl.value}&original=true`);
-  newIcon = 'clear';
+async function onIconSubmit(icon) {
+  const tmp = (await getDataURLFromFile(icon)).replace(/^data:image\/[a-z]+;base64,/, '');
+  const [error] = await appsModel.configure(props.app.id, 'icon', { icon: tmp });
+  if (error) {
+    iconError.value = error.body ? error.body.message : 'Internal error';
+    return error;
+  }
+}
+
+async function onIconUnset() {
+  const [error] = await appsModel.configure(props.app.id, 'icon', { icon: '' });
+  if (error) {
+    iconError.value = error.body ? error.body.message : 'Internal error';
+    return error;
+  }
+
+  iconUrl.value = props.app.iconUrl ? `${API_ORIGIN}/api/v1/apps/${props.app.id}/icon?ts=${Date.now()}` : `${API_ORIGIN}/img/appicon_fallback.png`; // calculate full icon url with cache busting
 }
 
 onMounted(() => {
@@ -98,6 +91,11 @@ onMounted(() => {
 
 <template>
   <div>
+    <div style="display: inline-block;">
+      <label>{{ $t('app.display.icon') }}</label>
+      <ImagePicker ref="imagePicker" :src="iconUrl" fallback-src="/img/appicon_fallback.png" :save-handler="onIconSubmit" :unset-handler="onIconUnset" :size="512" display-height="128px"/>
+    </div>
+
     <form @submit.prevent="onSubmit()" autocomplete="off">
       <fieldset :disabled="busy">
         <input type="submit" style="display: none;"/>
@@ -114,14 +112,8 @@ onMounted(() => {
           <div class="text-error" v-if="tagsError">{{ tagsError }}</div>
         </FormGroup>
 
-        <FormGroup>
-          <label>{{ $t('app.display.icon') }}</label>
-          <ImagePicker ref="imagePicker" :src="iconUrl" fallback-src="/img/appicon_fallback.png" @changed="onIconChanged" :size="512" display-height="128px"/>
-          <div class="actionable" @click="onClearIcon()">{{ $t('app.display.iconResetAction') }}</div>
-        </FormGroup>
+        <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.display.saveAction') }}</Button>
       </fieldset>
     </form>
-    <br/>
-    <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.display.saveAction') }}</Button>
   </div>
 </template>
diff --git a/dashboard/src/views/BrandingView.vue b/dashboard/src/views/BrandingView.vue
index 07d7e45f5..47d572a65 100644
--- a/dashboard/src/views/BrandingView.vue
+++ b/dashboard/src/views/BrandingView.vue
@@ -43,44 +43,21 @@ async function onChangeNameSubmit() {
   editName.value = '';
 }
 
-
-// Avatar
-const avatarBusy = ref(false);
-const avatarNew = ref(null);
-
-function onAvatarChanged(file) {
-  avatarNew.value = file;
-}
-
-async function onAvatarSubmit() {
-  if (!avatarNew.value) return;
-
-  avatarBusy.value = true;
-  const [error] = await brandingModel.setAvatar(avatarNew.value);
+async function onAvatarSubmit(file) {
+  const [error] = await brandingModel.setAvatar(file);
   if (error) return console.error(error);
-  avatarNew.value = null;
-  avatarBusy.value = false;
 }
 
-
-// Background
-const backgroundBusy = ref(false);
-const backgroundNew = ref(null);
-
-function onBackgroundChanged(file) {
-  backgroundNew.value = file;
-}
-
-async function onBackgroundSubmit() {
-  if (!backgroundNew.value) return;
-
-  backgroundBusy.value = true;
-  const [error] = await brandingModel.setBackground(backgroundNew.value);
+async function onBackgroundSubmit(file) {
+  const [error] = await brandingModel.setBackground(file);
   if (error) return console.error(error);
-  backgroundNew.value = null;
-  backgroundBusy.value = false;
 }
 
+async function onBackgroundUnset() {
+  const [error] = await brandingModel.setBackground(null);
+  if (error) return console.error(error);
+  backgroundUrl.value = '';
+}
 
 // Footer
 const editingFooter = ref(false);
@@ -140,23 +117,15 @@ onMounted(async () => {
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('branding.logo') }}</label>
-          <ImagePicker :src="avatarUrl" @changed="onAvatarChanged" :size="512" display-height="60px" :disabled="!features.branding"/>
+          <ImagePicker :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="100px" :disabled="!features.branding"/>
         </FormGroup>
-        <div v-show="avatarNew !== null" style="display: flex; position: relative; align-items: center; gap: 6px">
-          <Button tool @click="onAvatarSubmit()" :disabled="!avatarNew || avatarBusy" :loading="avatarBusy">{{ $t('main.dialog.save') }}</Button>
-          <Button tool plain secondary @click="avatarNew = null" :disabled="avatarBusy">{{ $t('main.dialog.cancel') }}</Button>
-        </div>
       </SettingsItem>
 
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('branding.backgroundImage') }}</label>
-          <ImagePicker :src="backgroundUrl" @changed="onBackgroundChanged" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="200px" :max-size="1280"/>
+          <ImagePicker :src="backgroundUrl" :save-handler="onBackgroundSubmit" :unset-handler="onBackgroundUnset" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="200px" :max-size="1280"/>
         </FormGroup>
-        <div v-show="backgroundNew !== null" style="display: flex; position: relative; align-items: center; gap: 6px">
-          <Button tool @click="onBackgroundSubmit()" :disabled="!backgroundNew || backgroundBusy" :loading="backgroundBusy">{{ $t('main.dialog.save') }}</Button>
-          <Button tool plain secondary @click="backgroundNew = null" :disabled="backgroundBusy">{{ $t('main.dialog.cancel') }}</Button>
-        </div>
       </SettingsItem>
 
       <SettingsItem>
diff --git a/dashboard/src/views/ProfileView.vue b/dashboard/src/views/ProfileView.vue
index cddc1ab72..1f1888c6b 100644
--- a/dashboard/src/views/ProfileView.vue
+++ b/dashboard/src/views/ProfileView.vue
@@ -106,7 +106,7 @@ async function onChangeFallbackEmail(currentFallbackEmail) {
   await refreshProfile();
 }
 
-async function onAvatarChanged(file) {
+async function onAvatarSubmit(file) {
   await profileModel.setAvatar(file);
   await refreshProfile();
 }
@@ -268,9 +268,9 @@ onMounted(async () => {
         <Button @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
       </template>
 
-      <div style="display: flex; flex-wrap: wrap">
-        <div style="width: 150px; display: flex; flex-direction: column; justify-content: space-between;">
-          <ImagePicker :src="user.avatarUrl" fallback-src="/img/background-image-placeholder.svg" :size="512" @changed="onAvatarChanged" display-width="128px"/>
+      <div style="display: flex; flex-wrap: wrap; gap: 20px">
+        <div style="width: 128px;">
+          <ImagePicker :src="user.avatarUrl" fallback-src="/img/background-image-placeholder.svg" :size="512" :save-handler="onAvatarSubmit" display-width="128px"/>
         </div>
         <div style="flex-grow: 1;">
           <SettingsItem>