diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index 73f1953367003c4c8e70738883536dd75fe9356d..7298438a56b121a8afb78f374056659e99b28661 100755
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -1,12 +1,11 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import _ from 'lodash';
 
 import NotificationsBarContainer from '../notifications-bar/container';
 import AudioNotificationContainer from '../audio/audio-notification/container';
+import AudioContainer from '../audio/container';
 import ChatNotificationContainer from '../chat/notification/container';
 
-import Button from '../button/component';
 import styles from './styles';
 import cx from 'classnames';
 
@@ -119,7 +118,7 @@ export default class App extends Component {
   }
 
   render() {
-    const { modal, params } = this.props;
+    const { params } = this.props;
 
     return (
       <main className={styles.main}>
@@ -135,8 +134,7 @@ export default class App extends Component {
           </div>
           {this.renderSidebar()}
         </section>
-        {modal}
-        <audio id="remote-media" autoPlay="autoplay"></audio>
+        <AudioContainer />
         <ChatNotificationContainer currentChatID={params.chatID} />
       </main>
     );
diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx
index ba1b3c8dc876753c1897d90f7903eb0909a81f91..d3433cc57aaf93d98983d8d0ca57f50d1f5d596b 100755
--- a/bigbluebutton-html5/imports/ui/components/app/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx
@@ -5,7 +5,6 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import {
   getModal,
-  showModal,
   getFontSize,
   getCaptionsStatus,
 } from './service';
@@ -20,7 +19,6 @@ import App from './component';
 import NavBarContainer from '../nav-bar/container';
 import ActionsBarContainer from '../actions-bar/container';
 import MediaContainer from '../media/container';
-import AudioModalContainer  from '../audio/audio-modal/container';
 import ClosedCaptionsContainer from '/imports/ui/components/closed-captions/container';
 
 const defaultProps = {
@@ -50,13 +48,8 @@ class AppContainer extends Component {
   }
 };
 
-const APP_CONFIG = Meteor.settings.public.app;
-
 const init = () => {
   setDefaultSettings();
-  if (APP_CONFIG.autoJoinAudio) {
-    showModal(<AudioModalContainer />);
-  }
 };
 
 export default withRouter(injectIntl(createContainer(({ router, intl, baseControls }) => {
diff --git a/bigbluebutton-html5/imports/ui/components/audio/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/component.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3957b2ba1617c6f43e4c5859dc347e7d826231ff
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/audio/component.jsx
@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+export default class Audio extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { modal } = this.props;
+
+    // console.log(this.props);
+    return (
+      <div>
+        {modal}
+      </div>
+    );
+  }
+}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/container.jsx b/bigbluebutton-html5/imports/ui/components/audio/container.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..f26555590724bc03a9b576a2b761c3f9cb26648b
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/audio/container.jsx
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { createContainer } from 'meteor/react-meteor-data';
+import Audio from './component';
+import Service from './service';
+
+import {showModal, getModal} from '../app/service';
+import AudioModalContainer from './audio-modal/container'
+
+class AudioContainer extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <audio id="remote-media" autoPlay="autoplay">
+        <Audio
+          {...this.props}>
+          {this.props.children}
+        </Audio>
+      </audio>
+    );
+  }
+}
+
+const APP_CONFIG = Meteor.settings.public.app;
+
+if (APP_CONFIG.autoJoinAudio) {
+  showModal(<AudioModalContainer />);
+}
+
+export default createContainer(() => {
+
+  return {
+    modal: getModal(),
+  };
+}, AudioContainer);
+
+
diff --git a/bigbluebutton-html5/imports/ui/components/audio/service.js b/bigbluebutton-html5/imports/ui/components/audio/service.js
new file mode 100644
index 0000000000000000000000000000000000000000..fa2f5d09adf7d18bae2e237c41de9c6df53c2506
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/audio/service.js
@@ -0,0 +1,4 @@
+import React from 'react';
+
+export default {
+};