diff --git a/bigbluebutton-html5/imports/api/breakouts/server/publishers.js b/bigbluebutton-html5/imports/api/breakouts/server/publishers.js
index da8e0bc8cc31a66c123b8a28842eae31843d49b9..c9072c61105d261ad0c1d3fbb4462fc1bdbdfd53 100755
--- a/bigbluebutton-html5/imports/api/breakouts/server/publishers.js
+++ b/bigbluebutton-html5/imports/api/breakouts/server/publishers.js
@@ -2,13 +2,18 @@ import { Meteor } from 'meteor/meteor';
 import Breakouts from '/imports/api/breakouts';
 import Logger from '/imports/startup/server/logger';
 
-function breakouts(credentials) {
+function breakouts(credentials, moderator) {
   const {
     meetingId,
     requesterUserId,
   } = credentials;
-
   Logger.info(`Publishing Breakouts for ${meetingId} ${requesterUserId}`);
+  if (moderator) {
+    const presenterSelector = {
+      parentMeetingId: meetingId,
+    };
+    return Breakouts.find(presenterSelector);
+  }
 
   const selector = {
     $or: [
diff --git a/bigbluebutton-html5/imports/startup/client/base.jsx b/bigbluebutton-html5/imports/startup/client/base.jsx
index e5da55a01d98705a1597fe0c448377722ef283bc..182386c1e6340e3a549542c6213e4d32c4408e71 100755
--- a/bigbluebutton-html5/imports/startup/client/base.jsx
+++ b/bigbluebutton-html5/imports/startup/client/base.jsx
@@ -13,6 +13,7 @@ import Users from '/imports/api/users';
 import Annotations from '/imports/api/annotations';
 import AnnotationsLocal from '/imports/ui/components/whiteboard/service';
 import GroupChat from '/imports/api/group-chat';
+import mapUser from '/imports/ui/services/user/mapUser';
 import { Session } from 'meteor/session';
 import IntlStartup from './intl';
 
@@ -106,7 +107,7 @@ Base.defaultProps = defaultProps;
 
 const SUBSCRIPTIONS_NAME = [
   'users', 'meetings', 'polls', 'presentations',
-  'slides', 'captions', 'breakouts', 'voiceUsers', 'whiteboard-multi-user', 'screenshare',
+  'slides', 'captions', 'voiceUsers', 'whiteboard-multi-user', 'screenshare',
   'group-chat', 'presentation-pods', 'users-settings',
 ];
 
@@ -114,7 +115,7 @@ const BaseContainer = withTracker(() => {
   const { locale } = Settings.application;
   const { credentials, loggedIn } = Auth;
   const { meetingId, requesterUserId } = credentials;
-
+  let breakoutRoomSubscriptionHandler;
   if (!loggedIn) {
     return {
       locale,
@@ -147,6 +148,11 @@ const BaseContainer = withTracker(() => {
   const chatIds = chats.map(chat => chat.chatId);
 
   const groupChatMessageHandler = Meteor.subscribe('group-chat-msg', credentials, chatIds, subscriptionErrorHandler);
+  const User = Users.findOne({ intId: credentials.externUserID });
+  if (User) {
+    const mappedUser = mapUser(User);
+    breakoutRoomSubscriptionHandler = Meteor.subscribe('breakouts', credentials, mappedUser.isModerator, subscriptionErrorHandler);
+  }
 
   const annotationsHandler = Meteor.subscribe('annotations', credentials, {
     onReady: () => {
@@ -171,6 +177,7 @@ const BaseContainer = withTracker(() => {
     subscriptionsReady,
     annotationsHandler,
     groupChatMessageHandler,
+    breakoutRoomSubscriptionHandler,
   };
 })(Base);
 
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index d47f1fbc211ee9c00080d8549d24ce167b940124..2c96772c5645f5cb59d192f7a2d393e497b0a3de 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -47,11 +47,11 @@ class BreakoutRoom extends Component {
     this.increaseDurationTime = this.increaseDurationTime.bind(this);
     this.decreaseDurationTime = this.decreaseDurationTime.bind(this);
     this.onCreateBreakouts = this.onCreateBreakouts.bind(this);
-
+    this.setFreeJoin = this.setFreeJoin.bind(this);
     this.state = {
       numberOfRooms: MIN_BREAKOUT_ROOMS,
       durationTime: 1,
-      freeJoin: true,
+      freeJoin: false,
     };
   }
 
@@ -73,7 +73,7 @@ class BreakoutRoom extends Component {
       sequence: value,
     }));
 
-    createBreakoutRoom(rooms, durationTime, true);
+    createBreakoutRoom(rooms, durationTime, this.state.freeJoin);
   }
 
   changeNumberOfRooms(event) {
@@ -93,6 +93,10 @@ class BreakoutRoom extends Component {
     this.setState({ durationTime: number < 1 ? 1 : number });
   }
 
+  setFreeJoin(e) {
+    this.setState({ freeJoin: e.target.checked });
+  }
+
   render() {
     const { intl } = this.props;
     return (
@@ -110,7 +114,7 @@ class BreakoutRoom extends Component {
             {intl.formatMessage(intlMessages.breakoutRoomDesc)}
           </p>
           <div className={styles.breakoutSettings}>
-            <label>
+            <label htmlFor="numberOfRooms">
               <p className={styles.labelText}>{intl.formatMessage(intlMessages.numberOfRooms)}</p>
               <select
                 name="numberOfRooms"
@@ -123,7 +127,7 @@ class BreakoutRoom extends Component {
                 }
               </select>
             </label>
-            <label >
+            <label htmlFor="breakoutRoomTime" >
               <p className={styles.labelText}>{intl.formatMessage(intlMessages.duration)}</p>
               <div className={styles.durationArea}>
                 <input
@@ -160,6 +164,17 @@ class BreakoutRoom extends Component {
             </label>
             <p className={styles.randomText}>{intl.formatMessage(intlMessages.randomlyAssign)}</p>
           </div>
+
+          <label htmlFor="freeJoinCheckbox" className={styles.freeJoinLabel}>
+            <input
+              type="checkbox"
+              className={styles.freeJoinCheckbox}
+              onChange={this.setFreeJoin}
+              checked={this.state.freeJoin}
+            />
+            Allow users to choose a breakout room to join
+          </label>
+
         </div>
       </Modal >
     );
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
index 26dbac123d4824d0fdee47e8b495dcb538b0d319..272cd086d3d608107af2a73fed615e872c9237c5 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
@@ -11,8 +11,9 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
 .breakoutSettings {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr; 
-  grid-template-rows: 1fr 1fr;
+  grid-template-rows: 1fr;
   grid-gap: 1rem;
+  margin-bottom: 1rem;
   @include mq($small-only) {
     grid-template-columns: 1fr ;
     grid-template-rows: 1fr 1fr 1fr; 
@@ -75,3 +76,17 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
   margin-bottom: .5rem;
   align-self: flex-end;
 }
+
+.freeJoinCheckbox {
+  width: 1rem;
+  height: 1rem;
+}
+
+.freeJoinLabel {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-small);
+  & > * {
+    margin-right: .5rem;
+  }
+}