diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index f370636ffcb2beab23e62efbe9e3e4efd5e8c242..045325dd36d806d2c34313efa4290fb9f72e8d9c 100755
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -81,6 +81,18 @@ class App extends Component {
     );
   }
 
+  renderClosedCaption() {
+    const { closedCaption } = this.props;
+
+    if (!closedCaption) return null;
+
+    return (
+      <div className={styles.closedCaptionBox}>
+        {closedCaption}
+      </div>
+    );
+  }
+
   renderUserList() {
     let { userList, intl } = this.props;
     const { compactUserList } = this.state;
@@ -128,6 +140,7 @@ class App extends Component {
         role="region"
         aria-label={intl.formatMessage(intlMessages.mediaLabel)}>
           {media}
+          {this.renderClosedCaption()}
       </section>
     );
   }
diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx
index 84616f37f0584bd9088501f5f199b31e49c06e8c..32c1799779706d6f106971cb92ac7f39b1b14d48 100755
--- a/bigbluebutton-html5/imports/ui/components/app/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx
@@ -72,7 +72,7 @@ export default withRouter(injectIntl(withModalMounter(createContainer((
     });
 
     return {
-      sidebar: getCaptionsStatus() ? <ClosedCaptionsContainer /> : null,
+      closedCaption: getCaptionsStatus() ? <ClosedCaptionsContainer /> : null,
       fontSize: getFontSize(),
     };
   }, AppContainer))));
diff --git a/bigbluebutton-html5/imports/ui/components/app/styles.scss b/bigbluebutton-html5/imports/ui/components/app/styles.scss
index cb5d2444bd846d7f76a19d99f73f49fef7389cce..78462f3599f0d4f08bf2f1acac4bacd2d48077f2 100755
--- a/bigbluebutton-html5/imports/ui/components/app/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/app/styles.scss
@@ -152,10 +152,26 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
   flex: 1 100%;
   order: 2;
 
+  flex-direction: row;
+  position: relative;
+
   @include mq($small-only) {
     padding-bottom: $actionsbar-height;
     margin-bottom: $actionsbar-height;
-    position: relative;
+  }
+
+  @include mq($portrait) {
+    flex-direction: column;
+  }
+}
+
+.closedCaptionBox {
+  position: relative;
+  flex-basis: 15vw;
+  order: 2;
+
+  @include mq($portrait) {
+    min-height: 35%;
   }
 }
 
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index f8a416e729da921991bbde449cd87cbea2fb887c..8022df3f7b3cd309eb0bf14cc19f273cb6949448 100755
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -5,6 +5,7 @@
   display: flex;
   flex: 2;
   overflow: hidden;
+  order: 1;
 }
 
 %ratio {
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
index 3b961be57bbafd6d35dfb39ee9e52e823ddcf535..21f16387e8e26f10ed4b99a652305195631dd581 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
@@ -20,6 +20,13 @@ $controls-background: #F0F2F6 !default;
   margin-top: 2%;
   margin-bottom: 2%;
 
+  @include mq($portrait) {
+    @include mq($small-only) {
+      margin-top: 5%;
+      margin-bottom: 5%;
+    }
+  }
+
   button,
   select,
   > div {