diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index b168ea6db360392d1df039a5b698fa908b0387e9..045325dd36d806d2c34313efa4290fb9f72e8d9c 100755
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -75,8 +75,20 @@ class App extends Component {
     if (!sidebar) return null;
 
     return (
-      <div className={styles.sidebar}>
+      <aside className={styles.sidebar}>
         {sidebar}
+      </aside>
+    );
+  }
+
+  renderClosedCaption() {
+    const { closedCaption } = this.props;
+
+    if (!closedCaption) return null;
+
+    return (
+      <div className={styles.closedCaptionBox}>
+        {closedCaption}
       </div>
     );
   }
@@ -128,7 +140,7 @@ class App extends Component {
         role="region"
         aria-label={intl.formatMessage(intlMessages.mediaLabel)}>
           {media}
-          {this.renderSidebar()}
+          {this.renderClosedCaption()}
       </section>
     );
   }
@@ -163,6 +175,7 @@ class App extends Component {
             {this.renderMedia()}
             {this.renderActionsBar()}
           </div>
+          {this.renderSidebar()}
         </section>
         <ModalContainer />
         <AudioContainer />
diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx
index 6bdf48dad3d4fffa00bd6905f936318504c8271e..caf790869c726e4dcdaac4cf37d121a540dce274 100755
--- a/bigbluebutton-html5/imports/ui/components/app/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx
@@ -73,7 +73,8 @@ export default withRouter(injectIntl(withModalMounter(createContainer((
     });
 
     return {
-      sidebar: getCaptionsStatus() ? <ClosedCaptionsContainer /> : null,
+      closedCaption: getCaptionsStatus() ? <ClosedCaptionsContainer /> : null,
+      sidebar: 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 6f05cfda48f3f8f8f9b8187e93ee84a26bc5f7e9..cb8d698c964185d0f9de603814647a49196262ae 100755
--- a/bigbluebutton-html5/imports/ui/components/app/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/app/styles.scss
@@ -137,6 +137,16 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
   }
 }
 
+.sidebar {
+  @extend %full-page;
+  z-index: 4;
+
+  @include mq($medium-up) {
+    flex: 0 15vw;
+    order: 2;
+  }
+}
+
 .media {
   @extend %full-page;
   flex: 1 100%;
@@ -152,15 +162,27 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
 
   @include mq($portrait) {
     flex-direction: column;
+
+    @include mq($small-up) {
+      min-height: 60%;
+    }
   }
 }
 
-.sidebar {
+.closedCaptionBox {
   position: relative;
+  flex-basis: 12%;
 
-  @include mq($medium-up) {
-    max-height: 100%;
-    flex: 0 15vw;
+  @include mq($portrait) {
+    min-height: 35%;
+
+    @include mq($small-up) {
+      flex-basis: 10%;
+    }
+
+    @include mq($medium-only) {
+      margin-top: 3%;
+    }
   }
 }
 
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 {