diff --git a/dashboard/src/components/EditableField.vue b/dashboard/src/components/EditableField.vue
new file mode 100644
index 000000000..e497468ed
--- /dev/null
+++ b/dashboard/src/components/EditableField.vue
@@ -0,0 +1,68 @@
+<script setup>
+
+import { ref, watch, nextTick, useTemplateRef } from 'vue';
+import { Button, FormGroup, TextInput } from '@cloudron/pankow';
+
+const props = defineProps({
+  label: { type: String, required: true },
+  value: { type: String, required: true },
+  disabled: { type: Boolean, default: false },
+  saving: { type: Boolean, default: false }
+});
+
+const emit = defineEmits(['save']);
+
+const editing = ref(false);
+const draftValue = ref(props.value);
+const textInput = useTemplateRef('textInput');
+
+watch(() => props.value, (newVal) => {
+  if (!editing.value) draftValue.value = newVal;
+});
+
+watch(() => props.saving, (isSaving) => {
+  if (!isSaving && editing.value) {
+    editing.value = false;
+  }
+});
+
+function startEdit() {
+  if (props.disabled) return;
+  editing.value = true;
+  draftValue.value = props.value;
+  nextTick(() => {
+    textInput.value.focus();
+  });
+}
+
+function save() {
+  emit('save', draftValue.value);
+}
+
+function cancel() {
+  editing.value = false;
+}
+
+</script>
+
+<template>
+  <FormGroup>
+    <label>{{ label }}</label>
+    <div v-if="editing" style="display: flex; gap: 6px">
+      <TextInput ref="textInput" v-model="draftValue" @keydown.enter="save()" :disabled="saving"/>
+      <Button tool @click="save" :disabled="saving">{{ $t('main.dialog.save') }}</Button>
+      <Button tool plain secondary @click="cancel" :disabled="saving">{{ $t('main.dialog.cancel') }}</Button>
+    </div>
+    <div v-else>
+      <div>{{ value }}</div>
+    </div>
+  </FormGroup>
+
+  <div>
+    <div v-if="editing" style="display: flex; align-items: center; gap: 10px">
+    </div>
+    <div v-else>
+      <Button tool plain @click="startEdit" v-if="!disabled">{{ $t('main.dialog.edit') }}</Button>
+    </div>
+  </div>
+</template>
diff --git a/dashboard/src/views/ProfileView.vue b/dashboard/src/views/ProfileView.vue
index 0e788c452..718fcc75a 100644
--- a/dashboard/src/views/ProfileView.vue
+++ b/dashboard/src/views/ProfileView.vue
@@ -10,6 +10,7 @@ import { TOKEN_TYPES } from '../constants.js';
 import NotificationSettings from '../components/NotificationSettings.vue';
 import AppPasswords from '../components/AppPasswords.vue';
 import SettingsItem from '../components/SettingsItem.vue';
+import EditableField from '../components/EditableField.vue';
 import PrimaryEmailDialog from '../components/dialogs/PrimaryEmailDialog.vue';
 import FallbackEmailDialog from '../components/dialogs/FallbackEmailDialog.vue';
 import PasswordChangeDialog from '../components/dialogs/PasswordChangeDialog.vue';
@@ -31,6 +32,8 @@ const tokensModel = TokensModel.create();
 const profile = inject('profile');
 const refreshProfile = inject('refreshProfile');
 
+const savingDisplayName = ref(false);
+
 const config = ref({});
 const inputDialog = useTemplateRef('inputDialog');
 const primaryEmailDialog = useTemplateRef('primaryEmailDialog');
@@ -49,22 +52,15 @@ async function onSelectLanguage(lang) {
 }
 
 // Profile edits
-async function onChangeDisplayName(currentDisplayName) {
-  const displayName = await inputDialog.value.prompt({
-    message: t('profile.changeDisplayName.title'),
-    value: currentDisplayName,
-    confirmLabel: t('main.dialog.save'),
-    confirmStyle: 'primary',
-    rejectLabel: t('main.dialog.cancel'),
-    rejectStyle: 'secondary',
-  });
+async function onDisplayNameSave(newName) {
+  savingDisplayName.value = true;
 
-  if (!displayName || currentDisplayName === displayName) return;
+  const error = await profileModel.setDisplayName(newName);
+  savingDisplayName.value = false;
 
-  const error = await profileModel.setDisplayName(displayName);
   if (error) return console.error('Failed to set displayName', error);
 
-  await refreshProfile();
+  profile.value.displayName = newName;
 }
 
 function onChangeEmail(currentEmail) {
@@ -227,13 +223,7 @@ onMounted(async () => {
           </SettingsItem>
 
           <SettingsItem>
-            <FormGroup>
-              <label>{{ $t('main.displayName') }}</label>
-              <div>{{ profile.displayName }}</div>
-            </FormGroup>
-            <div style="display: flex; align-items: center">
-              <Button tool plain @click="onChangeDisplayName(profile.displayName)" v-show="profile.username && !profile.source && !config.profileLocked">{{ $t('main.dialog.edit') }}</Button>
-            </div>
+            <EditableField :label="$t('main.displayName')" :saving="savingDisplayName" :value="profile.displayName" :disabled="config.profileLocked || profile.source || !profile.username" @save="onDisplayNameSave"/>
           </SettingsItem>
 
           <SettingsItem>