diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 3df6adf..f18a90a 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -399,6 +399,7 @@
                                 <select v-if="isParticipant(member.id) && groups.length > 0"
                                     :value="getMemberGroup(member.id)"
                                     @change="updateMemberGroup(member.id, $event.target.value)"
+                                    @input="updateMemberGroup(member.id, $event.target.value)"
                                     style="margin-left: 10px; font-size: 8px; width: 5em;">
                                     <option value="">-</option>
                                     <option v-for="group in groups" :key="group.id" :value="String(group.id)">
@@ -1014,12 +1015,18 @@ export default {
             // Map für memberId -> participantId speichern
             this.participantMapByMemberId = response.data.reduce((map, p) => { map[p.memberId] = p.id; return map; }, {});
             // Map für memberId -> groupId speichern und mit Reaktivität initialisieren
-            const newMemberGroups = {};
             response.data.forEach(p => {
                 const groupValue = (p.groupId !== null && p.groupId !== undefined) ? String(p.groupId) : '';
-                newMemberGroups[p.memberId] = groupValue;
+                if (this.$set) {
+                    this.$set(this.memberGroupsMap, p.memberId, groupValue);
+                } else {
+                    // Vue 3: Reaktivität wird automatisch gewährleistet
+                    this.memberGroupsMap = {
+                        ...this.memberGroupsMap,
+                        [p.memberId]: groupValue
+                    };
+                }
             });
-            this.memberGroupsMap = newMemberGroups;
         },
 
         async loadActivities(dateId) {
@@ -2270,23 +2277,30 @@ export default {
             try {
                 const selectedGroupId = groupId ? String(groupId) : '';
 
+                // Sofortige UI-Aktualisierung für bessere Reaktivität
                 if (this.$set) {
                     this.$set(this.memberGroupsMap, memberId, selectedGroupId);
                 } else {
+                    // Vue 3: Reaktivität wird automatisch gewährleistet
                     this.memberGroupsMap = {
                         ...this.memberGroupsMap,
                         [memberId]: selectedGroupId
                     };
                 }
 
+                // API-Call im Hintergrund
                 await apiClient.put(`/participants/${this.date.id}/${memberId}/group`, {
                     groupId: selectedGroupId ? Number(selectedGroupId) : null
                 });
 
                 // Synchronisiere die Teilnehmerliste, damit Anzeige und Datenlage übereinstimmen
+                // Verwende $nextTick, um sicherzustellen, dass die UI-Aktualisierung zuerst erfolgt
+                await this.$nextTick();
                 await this.loadParticipants(this.date.id);
             } catch (error) {
                 console.error('Fehler beim Aktualisieren der Teilnehmer-Gruppenzuordnung:', error);
+                // Bei Fehler: Lade die Daten neu, um den korrekten Zustand wiederherzustellen
+                await this.loadParticipants(this.date.id);
                 this.showInfo('Fehler', 'Fehler beim Aktualisieren der Teilnehmer-Gruppenzuordnung', '', 'error');
             }
         },