diff --git a/dashboard/src/components/ApplinkDialog.vue b/dashboard/src/components/ApplinkDialog.vue
index 5c81d066d..a9f514e02 100644
--- a/dashboard/src/components/ApplinkDialog.vue
+++ b/dashboard/src/components/ApplinkDialog.vue
@@ -193,7 +193,7 @@ defineExpose({
 
         <div>
           <label for="previewIcon">{{ $t('app.display.icon') }}</label>
-          <ImagePicker ref="imagePicker" v-if="iconUrl" :src="iconUrl" :fallback-src="`${API_ORIGIN}/img/appicon_fallback.png`" :unset-handler="mode === 'new' ? null : onResetIcon" @changed="onIconChanged" size="512" display-height="80px" style="width: 80px"/>
+          <ImagePicker ref="imagePicker" mode="simple" v-if="iconUrl" :src="iconUrl" :fallback-src="`${API_ORIGIN}/img/appicon_fallback.png`" :unset-handler="mode === 'new' ? null : onResetIcon" @changed="onIconChanged" size="512" display-height="80px" style="width: 80px"/>
         </div>
 
         <FormGroup>
diff --git a/dashboard/src/components/ImagePicker.vue b/dashboard/src/components/ImagePicker.vue
index 4f5bed59c..364f5339a 100644
--- a/dashboard/src/components/ImagePicker.vue
+++ b/dashboard/src/components/ImagePicker.vue
@@ -6,6 +6,8 @@ import { Button } from '@cloudron/pankow';
 const fileInput = useTemplateRef('fileInput');
 
 const props = defineProps({
+  // in simple mode, you get just an upload button. useful for dialogs which do not save/unset immediately
+  mode: { type: String, default: 'editable', required: true },
   src: { type: String, required: true },
   fallbackSrc: { type: String, required: true },
   size: { type: String, required: true },
@@ -17,6 +19,8 @@ const props = defineProps({
   unsetHandler: { type: Function, required: false },
 });
 
+const emit = defineEmits(['changed']);
+
 const image = useTemplateRef('image');
 const internalSrc = ref('');
 const isChanged = ref(false);
@@ -53,7 +57,7 @@ function dataURLtoFile(dataURL, filename) {
 }
 
 async function onSave() {
-  if (typeof props.saveHandler !== 'function') return console.error('saveHandler must be a function in ImagePicker');
+  if (typeof props.saveHandler !== 'function') return;
 
   busy.value = true;
 
@@ -73,7 +77,7 @@ function onEdit() {
 }
 
 async function onUnset() {
-  if (typeof props.unsetHandler !== 'function') return console.error('unsetHandler must be a function in ImagePicker');
+  if (typeof props.unsetHandler !== 'function') return;
 
   busy.value = true;
 
@@ -86,6 +90,9 @@ async function onUnset() {
 }
 
 function onChanged(event) {
+  const file = event.target.files[0];
+  if (!file) return;
+
   const fr = new FileReader();
   fr.onload = function () {
     const image = new Image();
@@ -135,6 +142,7 @@ function onChanged(event) {
 
       internalSrc.value = canvas.toDataURL('image/png');
       isChanged.value = true;
+      emit('changed', file); // <— notify parent
     };
 
     image.src = fr.result;
@@ -155,14 +163,23 @@ function onError() {
 
       <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 && internalSrc !== fallbackSrc"/>
-        </div>
+
+        <!-- Editable mode -->
+        <template v-if="mode === 'editable'">
+          <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 && internalSrc !== fallbackSrc"/>
+          </div>
+        </template>
+        <template v-else-if="mode === 'simple'">
+          <div class="image-picker-actions">
+            <Button @click.stop="onEdit" tool small icon="fa fa-pencil-alt" :disabled="busy"/>
+          </div>
+        </template>
       </div>
     </div>
   </div>
diff --git a/dashboard/src/components/UserDialog.vue b/dashboard/src/components/UserDialog.vue
index a45a0d301..e54fb00f5 100644
--- a/dashboard/src/components/UserDialog.vue
+++ b/dashboard/src/components/UserDialog.vue
@@ -239,7 +239,7 @@ defineExpose({
 
         <div style="display: flex; gap: 20px">
           <div style="width: 80px;">
-            <ImagePicker :src="avatarUrl" fallback-src="/img/avatar-default-symbolic.svg" :size="512" :save-handler="onAvatarSet" display-width="80px"/>
+            <ImagePicker mode="simple" :src="avatarUrl" fallback-src="/img/avatar-default-symbolic.svg" :size="512" :save-handler="onAvatarSet" display-width="80px"/>
           </div>
 
           <FormGroup style="flex-grow: 1">
diff --git a/dashboard/src/components/app/Display.vue b/dashboard/src/components/app/Display.vue
index 5865df5f0..37040a608 100644
--- a/dashboard/src/components/app/Display.vue
+++ b/dashboard/src/components/app/Display.vue
@@ -97,7 +97,7 @@ onMounted(() => {
   <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"/>
+      <ImagePicker ref="imagePicker" mode="editable" :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">
diff --git a/dashboard/src/views/AppearanceView.vue b/dashboard/src/views/AppearanceView.vue
index a0e698af2..fa2ef468d 100644
--- a/dashboard/src/views/AppearanceView.vue
+++ b/dashboard/src/views/AppearanceView.vue
@@ -92,12 +92,12 @@ onMounted(async () => {
       <div style="display: flex; justify-content: space-around; margin-bottom: 20px;">
         <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
           <label>{{ $t('branding.logo') }}</label>
-          <ImagePicker :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="128px" :disabled="!features.branding"/>
+          <ImagePicker mode="editable" :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="128px" :disabled="!features.branding"/>
         </div>
 
         <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
           <label>{{ $t('branding.backgroundImage') }}</label>
-          <ImagePicker :src="backgroundUrl" :save-handler="onBackgroundSubmit" :unset-handler="onBackgroundUnset" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="128px" :max-size="1280"/>
+          <ImagePicker mode="editable" :src="backgroundUrl" :save-handler="onBackgroundSubmit" :unset-handler="onBackgroundUnset" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="128px" :max-size="1280"/>
         </div>
       </div>
 
diff --git a/dashboard/src/views/ProfileView.vue b/dashboard/src/views/ProfileView.vue
index 718fcc75a..364f2e51a 100644
--- a/dashboard/src/views/ProfileView.vue
+++ b/dashboard/src/views/ProfileView.vue
@@ -212,7 +212,7 @@ onMounted(async () => {
 
       <div style="display: flex; flex-wrap: wrap; gap: 20px">
         <div style="width: 128px;">
-          <ImagePicker :src="profile.avatarUrl" fallback-src="/img/avatar-default-symbolic.svg" :disabled="config.profileLocked" :size="512" :unset-handler="onAvatarUnset" :save-handler="onAvatarSubmit" display-width="128px"/>
+          <ImagePicker mode="editable" :src="profile.avatarUrl" fallback-src="/img/avatar-default-symbolic.svg" :disabled="config.profileLocked" :size="512" :unset-handler="onAvatarUnset" :save-handler="onAvatarSubmit" display-width="128px"/>
         </div>
         <div style="flex-grow: 1;">
           <SettingsItem>