diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index a976d6f25..0057b03cd 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -13,7 +13,8 @@ class ControlBar extends Component {
         this.state = {
             time: -1,
             volume: -1,
-            volumeSliderOpen: false
+            volumePopupOpen: false,
+            sharePopupOpen: false
         };
     }
 
@@ -25,7 +26,8 @@ class ControlBar extends Component {
             nextProps.volume !== this.props.volume ||
             nextState.time !== this.state.time ||
             nextState.volume !== this.state.volume ||
-            nextState.volumeSliderOpen !== this.state.volumeSliderOpen;
+            nextState.volumePopupOpen !== this.state.volumePopupOpen ||
+            nextState.sharePopupOpen !== this.state.sharePopupOpen;
     }
 
     componentWillUnmount() {
@@ -77,12 +79,20 @@ class ControlBar extends Component {
         this.props.paused ? this.props.play() : this.props.pause();
     }
 
-    onVloumeSliderOpen = () => {
-        this.setState({ volumeSliderOpen: true });
+    onVolumePopupOpen = () => {
+        this.setState({ volumePopupOpen: true });
     }
 
-    onVolumeSliderClose = () => {
-        this.setState({ volumeSliderOpen: false });
+    onVolumePopupClose = () => {
+        this.setState({ volumePopupOpen: false });
+    }
+
+    onSharePopupOpen = () => {
+        this.setState({ sharePopupOpen: true });
+    }
+
+    onSharePopupClose = () => {
+        this.setState({ sharePopupOpen: false });
     }
 
     formatTime = (time) => {
@@ -119,10 +129,7 @@ class ControlBar extends Component {
 
         return (
             <div className={styles['button']} onClick={this.onPlayPauseButtonClicked}>
-                <Icon
-                    className={styles['icon']}
-                    icon={this.props.paused ? 'ic_play' : 'ic_pause'}
-                />
+                <Icon className={styles['icon']} icon={this.props.paused ? 'ic_play' : 'ic_pause'} />
             </div>
         );
     }
@@ -154,17 +161,14 @@ class ControlBar extends Component {
                     'ic_volume3';
 
         return (
-            <Popup onOpen={this.onVloumeSliderOpen} onClose={this.onVolumeSliderClose}>
+            <Popup onOpen={this.onVolumePopupOpen} onClose={this.onVolumePopupClose}>
                 <Popup.Label>
-                    <div className={classnames(styles['button'], { [styles['active']]: this.state.volumeSliderOpen })}>
-                        <Icon
-                            className={styles['icon']}
-                            icon={volumeIcon}
-                        />
+                    <div className={classnames(styles['button'], { [styles['active']]: this.state.volumePopupOpen })}>
+                        <Icon className={styles['icon']} icon={volumeIcon} />
                     </div>
                 </Popup.Label>
                 <Popup.Menu>
-                    <div className={styles['volume-slider-container']}>
+                    <div className={classnames(styles['popup-container'], styles['volume-popup-container'])}>
                         <Slider
                             containerClassName={styles['volume-slider']}
                             thumbClassName={styles['volume-thumb']}
@@ -182,6 +186,21 @@ class ControlBar extends Component {
         );
     }
 
+    renderShareButton() {
+        return (
+            <Popup onOpen={this.onSharePopupOpen} onClose={this.onSharePopupClose}>
+                <Popup.Label>
+                    <div className={classnames(styles['button'], { [styles['active']]: this.state.sharePopupOpen })}>
+                        <Icon className={styles['icon']} icon={'ic_share'} />
+                    </div>
+                </Popup.Label>
+                <Popup.Menu>
+                    <div className={classnames(styles['popup-container'], styles['share-popup-container'])} />
+                </Popup.Menu>
+            </Popup>
+        );
+    }
+
     render() {
         return (
             <div className={classnames(styles['control-bar-container'], this.props.className)}>
@@ -192,6 +211,7 @@ class ControlBar extends Component {
                     {this.renderTimeLabel()}
                     <div className={styles['spacing']} />
                     {this.renderVolumeButton()}
+                    {this.renderShareButton()}
                 </div>
             </div>
         );
diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less
index 32eba8304..231155beb 100644
--- a/src/routes/Player/ControlBar/styles.less
+++ b/src/routes/Player/ControlBar/styles.less
@@ -37,20 +37,28 @@
     }
 }
 
-.volume-slider-container {
-    padding: ceil((@buttons-bar-height * 0.4)) 0;
-    width: @buttons-bar-height;
+.popup-container {
     border-width: 1px 1px 0px 1px;
 
-    .volume-slider {
-        width: floor((@buttons-bar-height * 0.4));
-        height: floor((@buttons-bar-height * 3));
+    &.volume-popup-container {
+        padding: ceil((@buttons-bar-height * 0.4)) 0;
+        width: @buttons-bar-height;
 
-        .volume-thumb {
+        .volume-slider {
             width: floor((@buttons-bar-height * 0.4));
-            height: floor((@buttons-bar-height * 0.4));
+            height: floor((@buttons-bar-height * 3));
+
+            .volume-thumb {
+                width: floor((@buttons-bar-height * 0.4));
+                height: floor((@buttons-bar-height * 0.4));
+            }
         }
     }
+
+    &.share-popup-container {
+        width: 300px;
+        height: 180px;
+    }
 }
 
 .control-bar-container {
@@ -116,7 +124,7 @@
     }
 }
 
-.volume-slider-container {
+.popup-container {
     display: flex;
     justify-content: center;
     align-items: center;