diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
index be8e746..5a6d759 100644
--- a/Project/src/MakeCall/CallCard.js
+++ b/Project/src/MakeCall/CallCard.js
@@ -43,6 +43,7 @@ export default class CallCard extends React.Component {
         this.dominantSpeakersFeature = this.call.feature(Features.DominantSpeakers);
         this.recordingFeature = this.call.feature(Features.Recording);
         this.transcriptionFeature = this.call.feature(Features.Transcription);
+        this.lobby = this.call.lobby;
         if (Features.Reaction) {
             this.meetingReaction = this.call.feature(Features.Reaction);
         }
@@ -100,7 +101,8 @@ export default class CallCard extends React.Component {
             reactionRows:[],
             pptLiveActive: false,
             isRecordingActive: false,
-            isTranscriptionActive: false
+            isTranscriptionActive: false,
+            lobbyParticipantsCount: this.lobby?.participants.length
         };
         this.selectedRemoteParticipants = new Set();
         this.dataChannelRef = React.createRef();
@@ -129,6 +131,7 @@ export default class CallCard extends React.Component {
         this.call.feature(Features.RaiseHand).off('loweredHandEvent', this.raiseHandChangedHandler);
         this.recordingFeature.off('isRecordingActiveChanged', this.isRecordingActiveChangedHandler);
         this.transcriptionFeature.off('isTranscriptionActiveChanged', this.isTranscriptionActiveChangedHandler);
+        this.lobby?.off('lobbyParticipantsUpdated', () => { });
         if (Features.Reaction) {
             this.call.feature(Features.Reaction).off('reaction', this.reactionChangeHandler);
         }
@@ -463,6 +466,7 @@ export default class CallCard extends React.Component {
             this.pptLiveFeature?.on('isActiveChanged', this.pptLiveChangedHandler);
             this.recordingFeature.on('isRecordingActiveChanged', this.isRecordingActiveChangedHandler);
             this.transcriptionFeature.on('isTranscriptionActiveChanged', this.isTranscriptionActiveChangedHandler);
+            this.lobby?.on('lobbyParticipantsUpdated', this.lobbyParticipantsUpdatedHandler);
         }
     }
 
@@ -532,6 +536,21 @@ export default class CallCard extends React.Component {
         this.setState({ isTranscriptionActive: this.transcriptionFeature.isTranscriptionActive })
     }
 
+    lobbyParticipantsUpdatedHandler = (event) => {
+        console.log(`lobbyParticipantsUpdated, added=${event.added}, removed=${event.removed}`);
+        this.state.lobbyParticipantsCount = this.lobby?.participants.length;
+        if(event.added.length > 0) {
+            event.added.forEach(participant => {
+                console.log('lobbyParticipantAdded', participant);
+            });
+        }
+        if(event.removed.length > 0) {
+            event.removed.forEach(participant => {
+                console.log('lobbyParticipantRemoved', participant);
+            });
+        }
+    };
+
     raiseHandChangedHandler = (event) => {
         this.setState({isHandRaised: utils.isParticipantHandRaised(this.identifier, this.raiseHandFeature.getRaisedHands())})
     }
@@ -1169,7 +1188,10 @@ export default class CallCard extends React.Component {
                                 }
                             </div>
                             <div>
-                                <Lobby call={this.call} capabilitiesFeature={this.capabilitiesFeature}/>
+                                {
+                                    (this.state.lobbyParticipantsCount > 0) &&
+                                    <Lobby call={this.call} capabilitiesFeature={this.capabilitiesFeature} lobbyParticipantsCount={this.state.lobbyParticipantsCount} />
+                                }
                             </div>
                             {
                                 this.state.dominantSpeakerMode &&
diff --git a/Project/src/MakeCall/Lobby.js b/Project/src/MakeCall/Lobby.js
index 535898b..e5a747d 100644
--- a/Project/src/MakeCall/Lobby.js
+++ b/Project/src/MakeCall/Lobby.js
@@ -8,38 +8,23 @@ export default class Lobby extends React.Component {
         super(props);
         this.call = props.call;
         this.lobby = this.call.lobby;
-        
         this.capabilitiesFeature = props.capabilitiesFeature;
         this.capabilities = this.capabilitiesFeature.capabilities;
         this.state = {
             canManageLobby: this.capabilities.manageLobby?.isPresent || this.capabilities.manageLobby?.reason === 'FeatureNotSupported',
-            lobbyParticipantsCount: this.lobby.participants.length
+            lobbyParticipantsCount: props.lobbyParticipantsCount
         };
     }
 
-    componentWillUnmount() {
-        this.lobby?.off('lobbyParticipantsUpdated', () => { });
-    }
-
     componentDidMount() {
-        this.lobby?.on('lobbyParticipantsUpdated', this.lobbyParticipantsUpdatedHandler);
         this.capabilitiesFeature.on('capabilitiesChanged', this.capabilitiesChangedHandler);
     }
 
-    lobbyParticipantsUpdatedHandler = (event) => {
-        console.log(`lobbyParticipantsUpdated, added=${event.added}, removed=${event.removed}`);
-        this.state.lobbyParticipantsCount = this.lobby?.participants.length;
-        if(event.added.length > 0) {
-            event.added.forEach(participant => {
-                console.log('lobbyParticipantAdded', participant);
-            });
-        }
-        if(event.removed.length > 0) {
-            event.removed.forEach(participant => {
-                console.log('lobbyParticipantRemoved', participant);
-            });
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.lobbyParticipantsCount !== this.state.lobbyParticipantsCount) {
+            this.setState({ lobbyParticipantsCount: nextProps.lobbyParticipantsCount });
         }
-    };
+    }
 
     capabilitiesChangedHandler = (capabilitiesChangeInfo) => {
         console.log('lobby:capabilitiesChanged');
@@ -68,24 +53,19 @@ export default class Lobby extends React.Component {
 
     render() {
         return (
-            <div>
-                {
-                    (this.state.lobbyParticipantsCount > 0) &&
-                    <div className="ms-Grid-row">
-                        <div className="ml-2 inline-block">
-                            <div>In-Lobby participants number: {this.state.lobbyParticipantsCount}</div>
-                        </div>
-                        <div className="ml-4 inline-block">
-                            <PrimaryButton className="primary-button"
-                                            id="admitAllButton"
-                                            style={{ display: this.state.canManageLobby ? '' : 'none' }}
-                                            iconProps={{ iconName: 'Group', style: { verticalAlign: 'middle', fontSize: 'large' } }}
-                                            text="Admit All Participants"
-                                            onClick={() => this.admitAllParticipants()}>
-                            </PrimaryButton>
-                        </div>
-                    </div>
-                }
+            <div className="ms-Grid-row">
+                <div className="ml-2 inline-block">
+                    <div>In-Lobby participants number: {this.state.lobbyParticipantsCount}</div>
+                </div>
+                <div className="ml-4 inline-block">
+                    <PrimaryButton className="primary-button"
+                                    id="admitAllButton"
+                                    style={{ display: this.state.canManageLobby ? '' : 'none' }}
+                                    iconProps={{ iconName: 'Group', style: { verticalAlign: 'middle', fontSize: 'large' } }}
+                                    text="Admit All Participants"
+                                    onClick={() => this.admitAllParticipants()}>
+                    </PrimaryButton>
+                </div>
             </div>
         );
     }