diff --git a/backend/controllers/participantController.js b/backend/controllers/participantController.js
index 0469a78..c06d1e9 100644
--- a/backend/controllers/participantController.js
+++ b/backend/controllers/participantController.js
@@ -40,12 +40,26 @@ export const updateParticipantGroup = async (req, res) => {
         participant.groupId = groupId || null;
         await participant.save();
         
-        // Emit Socket-Event
-        if (participant.diaryDate?.clubId) {
-            emitParticipantUpdated(participant.diaryDate.clubId, dateId, participant);
+        // Lade den Participant erneut aus der DB, um sicherzustellen, dass wir den aktuellen Wert haben
+        const updatedParticipant = await Participant.findOne({
+            where: { 
+                diaryDateId: dateId,
+                memberId: memberId
+            },
+            include: [{
+                model: DiaryDates,
+                as: 'diaryDate',
+                attributes: ['clubId']
+            }]
+        });
+        
+        // Emit Socket-Event mit dem aktualisierten Participant
+        if (updatedParticipant?.diaryDate?.clubId) {
+            console.log('📡 [Backend] Emit participant:updated mit groupId:', updatedParticipant.groupId);
+            emitParticipantUpdated(updatedParticipant.diaryDate.clubId, dateId, updatedParticipant);
         }
         
-        res.status(200).json(participant);
+        res.status(200).json(updatedParticipant || participant);
     } catch (error) {
         devLog(error);
         res.status(500).json({ error: 'Fehler beim Aktualisieren der Teilnehmer-Gruppenzuordnung' });
diff --git a/backend/services/socketService.js b/backend/services/socketService.js
index a1e0238..0defb3b 100644
--- a/backend/services/socketService.js
+++ b/backend/services/socketService.js
@@ -64,6 +64,7 @@ export const emitParticipantRemoved = (clubId, dateId, participantId) => {
 };
 
 export const emitParticipantUpdated = (clubId, dateId, participant) => {
+  console.log('📡 [Socket] Emit participant:updated für Club', clubId, 'Date', dateId, 'Participant:', participant);
   emitToClub(clubId, 'participant:updated', { dateId, participant });
 };
 
diff --git a/frontend/src/services/socketService.js b/frontend/src/services/socketService.js
index 2a3574a..f6fea2a 100644
--- a/frontend/src/services/socketService.js
+++ b/frontend/src/services/socketService.js
@@ -77,7 +77,12 @@ export const onParticipantRemoved = (callback) => {
 
 export const onParticipantUpdated = (callback) => {
   if (socket) {
-    socket.on('participant:updated', callback);
+    socket.on('participant:updated', (data) => {
+      console.log('📡 [Socket] participant:updated empfangen:', data);
+      callback(data);
+    });
+  } else {
+    console.warn('⚠️ [Socket] onParticipantUpdated: Socket nicht verbunden');
   }
 };
 
diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index fba8e7e..d96c54b 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -189,37 +189,39 @@
                                             </span>
                                         </td>
                                         <td>
-                                            <button v-if="!item.isTimeblock" @click="toggleActivityMembers(item)" title="Teilnehmer zuordnen"
-                                                class="person-btn">👤</button>
-                                            <button v-if="item.isTimeblock" @click="addGroupActivityToTimeblock(item.id)" title="Gruppen-Aktivität hinzufügen"
-                                                class="btn-primary" style="font-size: 12px; padding: 2px 6px;">+ Gruppe</button>
-                                            <button @click="removePlanItem(item.id)" class="trash-btn">🗑️</button>
-                                            <div v-if="activityMembersOpenId === item.id" class="dropdown"
-                                                style="max-height: 12em; padding: 0.25rem;">
-                                                <div style="margin-bottom: 0.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;">
-                                                    <span>Teilnehmer zuordnen</span>
-                                                    <button @click="assignAllMembersToActivity(item.id)" 
-                                                        style="font-size: 10px; padding: 1px 4px; background: #28a745; color: white; border: none; border-radius: 2px;">
-                                                        Alle
-                                                    </button>
-                                                    <select v-if="groups.length > 0" 
-                                                        @change="assignGroupToActivity(item.id, $event.target.value)"
-                                                        style="font-size: 10px; width: 80px;">
-                                                        <option value="">Gruppe...</option>
-                                                        <option v-for="group in groups" :key="group.id" :value="String(group.id)">
-                                                            {{ group.name }}
-                                                        </option>
-                                                    </select>
-                                                </div>
-                                                
-                                                <div style="max-height: 9.5em; overflow-y: auto;">
-                                                    <label v-for="m in presentMembers" :key="m.id"
-                                                        style="display:flex; align-items:center; gap:0.5rem;">
-                                                        <input type="checkbox"
-                                                            :checked="isAssignedToActivity(item.id, m.id)"
-                                                            @change="toggleMemberForActivity(item.id, m.id, $event.target.checked)">
-                                                        <span>{{ m.firstName }} {{ m.lastName }}</span>
-                                                    </label>
+                                            <div style="position: relative; display: inline-block;">
+                                                <button v-if="!item.isTimeblock" @click="toggleActivityMembers(item)" title="Teilnehmer zuordnen"
+                                                    class="person-btn">👤</button>
+                                                <button v-if="item.isTimeblock" @click="addGroupActivityToTimeblock(item.id)" title="Gruppen-Aktivität hinzufügen"
+                                                    class="btn-primary" style="font-size: 12px; padding: 2px 6px;">+ Gruppe</button>
+                                                <button @click="removePlanItem(item.id)" class="trash-btn">🗑️</button>
+                                                <div v-if="activityMembersOpenId === item.id" class="dropdown"
+                                                    style="max-height: 12em; padding: 0.25rem;">
+                                                    <div style="margin-bottom: 0.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;">
+                                                        <span>Teilnehmer zuordnen</span>
+                                                        <button @click="assignAllMembersToActivity(item.id)" 
+                                                            style="font-size: 10px; padding: 1px 4px; background: #28a745; color: white; border: none; border-radius: 2px;">
+                                                            Alle
+                                                        </button>
+                                                        <select v-if="groups.length > 0" 
+                                                            @change="assignGroupToActivity(item.id, $event.target.value)"
+                                                            style="font-size: 10px; width: 80px;">
+                                                            <option value="">Gruppe...</option>
+                                                            <option v-for="group in groups" :key="group.id" :value="String(group.id)">
+                                                                {{ group.name }}
+                                                            </option>
+                                                        </select>
+                                                    </div>
+                                                    
+                                                    <div style="max-height: 9.5em; overflow-y: auto;">
+                                                        <label v-for="m in presentMembers" :key="m.id"
+                                                            style="display:flex; align-items:center; gap:0.5rem;">
+                                                            <input type="checkbox"
+                                                                :checked="isAssignedToActivity(item.id, m.id)"
+                                                                @change="toggleMemberForActivity(item.id, m.id, $event.target.checked)">
+                                                            <span>{{ m.firstName }} {{ m.lastName }}</span>
+                                                        </label>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </td>
@@ -277,11 +279,12 @@
                                             <td>{{ groupItem.groupsGroupActivity.name }}</td>
                                             <td></td>
                                             <td>
-                                                <button @click="toggleGroupActivityMembers(groupItem)" title="Teilnehmer zuordnen"
-                                                    class="person-btn">👤</button>
-                                                <button @click="removeGroupActivity(groupItem.id)" class="trash-btn" title="Löschen">🗑️</button>
-                                                <div v-if="groupActivityMembersOpenId === groupItem.id" class="dropdown"
-                                                    style="max-height: 12em; padding: 0.25rem;">
+                                                <div style="position: relative; display: inline-block;">
+                                                    <button @click="toggleGroupActivityMembers(groupItem)" title="Teilnehmer zuordnen"
+                                                        class="person-btn">👤</button>
+                                                    <button @click="removeGroupActivity(groupItem.id)" class="trash-btn" title="Löschen">🗑️</button>
+                                                    <div v-if="groupActivityMembersOpenId === groupItem.id" class="dropdown"
+                                                        style="max-height: 12em; padding: 0.25rem;">
                                                     <div style="margin-bottom: 0.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;">
                                                         <span>Teilnehmer zuordnen</span>
                                                         <button @click="assignAllMembersToGroupActivity(groupItem.id)" 
@@ -307,6 +310,7 @@
                                                             <span>{{ m.firstName }} {{ m.lastName }}</span>
                                                         </label>
                                                     </div>
+                                                    </div>
                                                 </div>
                                             </td>
                                         </tr>
@@ -424,10 +428,11 @@
                             <div class="participant-actions">
                                 <!-- Gruppenzuordnung für aktive Teilnehmer -->
                                 <select v-if="isParticipant(member.id) && groups.length > 0"
+                                    :key="`group-select-${member.id}-${getMemberGroup(member.id)}`"
                                     :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;">
+                                    class="member-group-select"
+                                    style="margin-left: 10px; font-size: 10px; width: 5em; padding: 2px 4px; border: 1px solid #ccc; border-radius: 3px; background-color: white; color: #333;">
                                     <option value="">-</option>
                                     <option v-for="group in groups" :key="group.id" :value="String(group.id)">
                                         {{ group.name }}
@@ -513,10 +518,11 @@
                                 <div class="participant-actions">
                                     <!-- Gruppenzuordnung für aktive Teilnehmer -->
                                     <select v-if="isParticipant(member.id) && groups.length > 0"
+                                        :key="`group-select-${member.id}-${getMemberGroup(member.id)}`"
                                         :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;">
+                                        class="member-group-select"
+                                        style="margin-left: 10px; font-size: 10px; width: 5em; padding: 2px 4px; border: 1px solid #ccc; border-radius: 3px; background-color: white; color: #333;">
                                         <option value="">-</option>
                                         <option v-for="group in groups" :key="group.id" :value="String(group.id)">
                                             {{ group.name }}
@@ -2198,12 +2204,29 @@ export default {
         },
 
         async toggleActivityMembers(item) {
+            console.log('🔍 [toggleActivityMembers] Aufgerufen für item.id:', item.id);
+            console.log('🔍 [toggleActivityMembers] Aktuelle activityMembersOpenId:', this.activityMembersOpenId);
+            
             if (this.activityMembersOpenId === item.id) {
+                console.log('🔍 [toggleActivityMembers] Schließe Dropdown');
                 this.activityMembersOpenId = null;
                 return;
             }
+            
+            console.log('🔍 [toggleActivityMembers] Öffne Dropdown für item.id:', item.id);
             this.activityMembersOpenId = item.id;
+            
+            // Verwende $set für Vue 2 Reaktivität
+            if (this.$set) {
+                this.$set(this, 'activityMembersOpenId', item.id);
+            }
+            
             await this.ensureActivityMembersLoaded(item.id);
+            
+            // Force update um sicherzustellen, dass das Dropdown angezeigt wird
+            await this.$nextTick();
+            this.$forceUpdate();
+            console.log('🔍 [toggleActivityMembers] Dropdown sollte jetzt sichtbar sein');
         },
 
         async ensureActivityMembersLoaded(activityId) {
@@ -2327,12 +2350,29 @@ export default {
 
         // Group Activity Members Methods
         async toggleGroupActivityMembers(groupItem) {
+            console.log('🔍 [toggleGroupActivityMembers] Aufgerufen für groupItem.id:', groupItem.id);
+            console.log('🔍 [toggleGroupActivityMembers] Aktuelle groupActivityMembersOpenId:', this.groupActivityMembersOpenId);
+            
             if (this.groupActivityMembersOpenId === groupItem.id) {
+                console.log('🔍 [toggleGroupActivityMembers] Schließe Dropdown');
                 this.groupActivityMembersOpenId = null;
                 return;
             }
+            
+            console.log('🔍 [toggleGroupActivityMembers] Öffne Dropdown für groupItem.id:', groupItem.id);
             this.groupActivityMembersOpenId = groupItem.id;
+            
+            // Verwende $set für Vue 2 Reaktivität
+            if (this.$set) {
+                this.$set(this, 'groupActivityMembersOpenId', groupItem.id);
+            }
+            
             await this.ensureGroupActivityMembersLoaded(groupItem.id);
+            
+            // Force update um sicherzustellen, dass das Dropdown angezeigt wird
+            await this.$nextTick();
+            this.$forceUpdate();
+            console.log('🔍 [toggleGroupActivityMembers] Dropdown sollte jetzt sichtbar sein');
         },
 
         async ensureGroupActivityMembersLoaded(groupActivityId) {
@@ -2425,8 +2465,14 @@ export default {
 
         // Gruppenzuordnung für Teilnehmer
         getMemberGroup(memberId) {
-            const value = this.memberGroupsMap ? this.memberGroupsMap[memberId] : undefined;
-            return value !== undefined && value !== null ? String(value) : '';
+            if (!this.memberGroupsMap) {
+                return '';
+            }
+            const value = this.memberGroupsMap[memberId];
+            if (value === undefined || value === null) {
+                return '';
+            }
+            return String(value);
         },
 
         async updateMemberGroup(memberId, groupId) {
@@ -2605,16 +2651,41 @@ export default {
         
         async handleParticipantUpdated(data) {
             // Nur aktualisieren, wenn das aktuelle Datum betroffen ist
-            if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
+            if (this.date && this.date !== 'new' && String(this.date.id) === String(data.dateId)) {
                 console.log('📡 Teilnehmer aktualisiert (Socket):', data);
+                console.log('📡 [DiaryView] Aktuelle memberGroupsMap vor Update:', JSON.parse(JSON.stringify(this.memberGroupsMap)));
+                
                 // Aktualisiere groupId in memberGroupsMap
                 const groupValue = (data.participant.groupId !== null && data.participant.groupId !== undefined) 
                     ? String(data.participant.groupId) 
                     : '';
-                this.memberGroupsMap = {
-                    ...this.memberGroupsMap,
-                    [data.participant.memberId]: groupValue
-                };
+                
+                console.log('📡 [DiaryView] Setze groupValue für memberId', data.participant.memberId, 'auf:', groupValue);
+                console.log('📡 [DiaryView] data.participant:', JSON.parse(JSON.stringify(data.participant)));
+                
+                // Verwende $set für Vue 2 - das ist wichtig für Reaktivität
+                if (this.$set) {
+                    this.$set(this.memberGroupsMap, data.participant.memberId, groupValue);
+                    console.log('📡 [DiaryView] Verwendet $set für Vue 2');
+                } else {
+                    // Vue 3: Erstelle neues Objekt für Reaktivität
+                    this.memberGroupsMap = {
+                        ...this.memberGroupsMap,
+                        [data.participant.memberId]: groupValue
+                    };
+                    console.log('📡 [DiaryView] Verwendet Spread-Operator für Vue 3');
+                }
+                
+                // Warte auf Vue-Update und force dann ein Re-Render
+                await this.$nextTick();
+                console.log('📡 [DiaryView] memberGroupsMap nach Update:', JSON.parse(JSON.stringify(this.memberGroupsMap)));
+                console.log('📡 [DiaryView] getMemberGroup für memberId', data.participant.memberId, ':', this.getMemberGroup(data.participant.memberId));
+                
+                // Force Vue update um sicherzustellen, dass die UI aktualisiert wird
+                this.$forceUpdate();
+                console.log('✅ [DiaryView] UI-Update erzwungen');
+            } else {
+                console.log('⚠️ [DiaryView] Datum stimmt nicht überein - Event dateId:', data.dateId, 'Aktuelles Datum:', this.date?.id);
             }
         },
         
@@ -3718,6 +3789,29 @@ img {
     }
 }
 
+/* Member Group Select - Chrome Fix */
+.member-group-select {
+    font-size: 10px !important;
+    padding: 2px 4px !important;
+    border: 1px solid #ccc !important;
+    border-radius: 3px !important;
+    background-color: white !important;
+    color: #333 !important;
+    -webkit-appearance: menulist !important;
+    appearance: menulist !important;
+}
+
+.member-group-select option {
+    background-color: white !important;
+    color: #333 !important;
+    padding: 4px !important;
+}
+
+.member-group-select:focus {
+    outline: 2px solid #007bff !important;
+    outline-offset: 2px !important;
+}
+
 /* Render Container */
 .render-container {
     display: flex;