diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
index 0db954613c53f0d79b88928359f58242841046cd..6f3ff8f7d5c8e3c2f20dcbfcfe30bcd0554ee2a5 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
@@ -82,7 +82,6 @@ class NavBar extends Component {
         </div>
         <div className={styles.center}>
           {this.renderPresentationTitle()}
-          <span className={styles.divider}></span>
           <RecordingIndicator beingRecorded={beingRecorded}/>
         </div>
         <div className={styles.right}>
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
index 2e13d6cf070ed49a54e5f537f6d30cfddab512e2..c23cd33c1f18cecc861c4ec3ee6ffa8d57a58797 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
@@ -1,6 +1,5 @@
 import React, { Component, PropTypes } from 'react';
 import styles from './styles.scss';
-import cx from 'classnames';
 
 export default class RecordingIndicator extends Component {
   constructor(props) {
@@ -9,11 +8,11 @@ export default class RecordingIndicator extends Component {
 
   render() {
     const { beingRecorded } = this.props;
-    let classNames = {};
-    classNames[styles.indicator] = beingRecorded;
 
-    return (
-      <span className={cx(classNames)}></span>
-    );
+    if (!beingRecorded) {
+      return null;
+    }
+
+    return (<div className={styles.indicator}></div>);
   }
 };
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
index f744600dc0ab59f9ab304822362e1a9073f8bb4a..8ff2652d9e0a1bc5a505f56ad77f300d19da0bc5 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
@@ -1,12 +1,22 @@
 @import "../../../stylesheets/variables/_all";
 
 .indicator {
-  display: inline-block;
   position: relative;
+  display: inline-block;
   width: $font-size-base;
   height: $font-size-base;
   border-radius: 50%;
   border: 1px solid $color-white;
+  margin-left: $line-height-computed;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: calc( -1px - #{($line-height-computed / 2)});
+    width: 1px;
+    height: 100%;
+    background-color: $color-white;
+  }
 
   &:after {
     content: '';
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss b/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss
index c3c6be05675e8d9962e68a47658dc95a271b7ae0..80aa5ef1338b1816635efaf89fd7f6cc8321d951 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss
@@ -39,14 +39,6 @@
   }
 }
 
-.divider {
-  background: $color-white;
-  height: $font-size-base * 1.25;
-  width: 1px;
-  margin: 0 $line-height-computed / 2;
-  opacity: .75;
-}
-
 .btnWithNotificationDot {
   position: relative;