diff --git a/dashboard/src/components/AccessControl.vue b/dashboard/src/components/AccessControl.vue
index c35f2c64c..c59172e28 100644
--- a/dashboard/src/components/AccessControl.vue
+++ b/dashboard/src/components/AccessControl.vue
@@ -66,7 +66,7 @@ const cloudronAuth = computed(() => {
 
     <div v-if="accessRestrictionOption === ACL_OPTIONS.RESTRICTED" style="margin-top: 12px; margin-left: 20px; display: flex; gap: 10px;">
       <div>
-        {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-key="id" option-label="username" :search-threshold="20" />
+        {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-key="id" option-label="label" :search-threshold="20" />
       </div>
       <div>
         {{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-key="id" option-label="name" :search-threshold="20" />
diff --git a/dashboard/src/components/ApplinkDialog.vue b/dashboard/src/components/ApplinkDialog.vue
index 90c1fdc5a..984d2b9dc 100644
--- a/dashboard/src/components/ApplinkDialog.vue
+++ b/dashboard/src/components/ApplinkDialog.vue
@@ -73,8 +73,8 @@ async function onSubmit() {
   data.accessRestriction = null;
   if (accessRestrictionOption.value === 'groups') {
     data.accessRestriction = { users: [], groups: [] };
-    data.accessRestriction.users = accessRestriction.value.users.map(function (u) { return u.id; });
-    data.accessRestriction.groups = accessRestriction.value.groups.map(function (g) { return g.id; });
+    data.accessRestriction.users = accessRestriction.value.users;
+    data.accessRestriction.groups = accessRestriction.value.groups;
   }
 
   if (iconFile === 'fallback') { // user reset the icon
@@ -131,6 +131,9 @@ defineExpose({
     // fetch users and groups
     let [error, result] = await usersModel.list();
     if (error) return console.error(error);
+    result.forEach(u => {
+      u.label = u.displayName || u.username || u.email
+    })
     users.value = result;
 
     [error, result] = await groupsModel.list();
@@ -198,10 +201,10 @@ defineExpose({
         <div v-if="accessRestrictionOption === 'groups'">
           <div style="margin-left: 20px; display: flex;">
             <div>
-              {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-label="username" :search-threshold="20" />
+              {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-key="id" option-label="label" :search-threshold="20" />
             </div>
             <div>
-              {{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-label="name" :search-threshold="20" />
+              {{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-key="id" option-label="name" :search-threshold="20" />
             </div>
           </div>
         </div>
diff --git a/dashboard/src/components/app/Access.vue b/dashboard/src/components/app/Access.vue
index 703995381..08a3ea874 100644
--- a/dashboard/src/components/app/Access.vue
+++ b/dashboard/src/components/app/Access.vue
@@ -56,6 +56,9 @@ onMounted(async () => {
     u.username = u.username || u.email; // ensure username
     userIds.add(u.id);
   }
+  result.forEach(u => {
+    u.label = u.displayName || u.username || u.email
+  })
   users.value = result;
 
   [error, result] = await groupsModel.list();