diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx
index a7f1d6e596e992dff2c7c431fae7483d2795194c..7b5f1b1551b4ac10fc3d42c35a5732b9de781340 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx
@@ -26,6 +26,8 @@ const WAITING_MIN_WIDTH = 340;
 const WAITING_MAX_WIDTH = 800;
 const NAVBAR_HEIGHT = 85;
 const ACTIONSBAR_HEIGHT = isMobile ? 50 : 42;
+const BREAKOUT_MIN_WIDTH = 320;
+const BREAKOUT_MAX_WIDTH = 400;
 
 const WEBCAMSAREA_MIN_PERCENT = 0.2;
 const WEBCAMSAREA_MAX_PERCENT = 0.8;
@@ -435,7 +437,7 @@ class LayoutManagerComponent extends Component {
       newBreakoutRoomSize = breakoutRoomSizeContext;
     } else if (!storageBreakoutRoomWidth) {
       newBreakoutRoomSize = {
-        width: min(max((windowWidth() * 0.2), CHAT_MIN_WIDTH), CHAT_MAX_WIDTH),
+        width: min(max((windowWidth() * 0.2), BREAKOUT_MIN_WIDTH), BREAKOUT_MAX_WIDTH),
       };
     } else {
       newBreakoutRoomSize = {
@@ -841,4 +843,6 @@ export {
   WEBCAMSAREA_MIN_PERCENT,
   WEBCAMSAREA_MAX_PERCENT,
   PRESENTATIONAREA_MIN_WIDTH,
+  BREAKOUT_MIN_WIDTH,
+  BREAKOUT_MAX_WIDTH,
 };
diff --git a/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx b/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx
index 26539dd308e7ce42621cf399f699490537553814..4fdb2321b4b7492cde35b4158528afd3351c6048 100755
--- a/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx
@@ -21,6 +21,8 @@ import {
   POLL_MAX_WIDTH,
   NOTE_MIN_WIDTH,
   NOTE_MAX_WIDTH,
+  BREAKOUT_MIN_WIDTH,
+  BREAKOUT_MAX_WIDTH,
 } from '/imports/ui/components/layout/layout-manager/component';
 
 const intlMessages = defineMessages({
@@ -87,7 +89,7 @@ class PanelManager extends Component {
       captionsWidth: DEFAULT_PANEL_WIDTH,
       pollWidth: DEFAULT_PANEL_WIDTH,
       waitingWidth: DEFAULT_PANEL_WIDTH,
-      breakoutRoomWidth: 0,
+      breakoutRoomWidth: DEFAULT_PANEL_WIDTH,
     };
 
     this.setUserListWidth = this.setUserListWidth.bind(this);
@@ -284,6 +286,24 @@ class PanelManager extends Component {
     window.dispatchEvent(new Event('panelChanged'));
   }
 
+  breakoutResizeStop(addvalue) {
+    const { breakoutRoomWidth } = this.state;
+    const { layoutContextDispatch } = this.props;
+
+    this.setBreakoutRoomWidth(breakoutRoomWidth + addvalue);
+
+    layoutContextDispatch(
+      {
+        type: 'setBreakoutRoomSize',
+        value: {
+          width: breakoutRoomWidth + addvalue,
+        },
+      },
+    );
+
+    window.dispatchEvent(new Event('panelChanged'));
+  }
+
   renderUserList() {
     const {
       intl,
@@ -527,21 +547,51 @@ class PanelManager extends Component {
   }
 
   renderBreakoutRoom() {
-    const { breakoutRoomWidth } = this.state;
+    const { enableResize } = this.props;
+
     return (
       <div
         id="breakoutroomPanel"
         className={styles.breakoutRoom}
-        key={this.breakoutroomKey}
-        style={{
-          width: breakoutRoomWidth,
-        }}
+        key={enableResize ? null : this.breakoutroomKey}
       >
         <BreakoutRoomContainer />
       </div>
     );
   }
 
+  renderBreakoutRoomResizable() {
+    const { breakoutRoomWidth } = this.state;
+    const { isRTL } = this.props;
+
+    const resizableEnableOptions = {
+      top: false,
+      right: !isRTL,
+      bottom: false,
+      left: !!isRTL,
+      topRight: false,
+      bottomRight: false,
+      bottomLeft: false,
+      topLeft: false,
+    };
+
+    return (
+      <Resizable
+        minWidth={BREAKOUT_MIN_WIDTH}
+        maxWidth={BREAKOUT_MAX_WIDTH}
+        ref={(node) => { this.resizableBreakout = node; }}
+        enable={resizableEnableOptions}
+        key={this.breakoutroomKey}
+        size={{ width: breakoutRoomWidth }}
+        onResizeStop={(e, direction, ref, d) => {
+          this.breakoutResizeStop(d.width);
+        }}
+      >
+        {this.renderBreakoutRoom()}
+      </Resizable>
+    );
+  }
+
   renderPoll() {
     return (
       <div className={styles.poll} key={this.pollKey} id="pollPanel">
@@ -630,7 +680,7 @@ class PanelManager extends Component {
 
     if (openPanel === 'breakoutroom') {
       if (enableResize) {
-        panels.push(this.renderBreakoutRoom());
+        panels.push(this.renderBreakoutRoomResizable());
       } else {
         panels.push(this.renderBreakoutRoom());
       }