diff --git a/src/js/components/Modal/Modal.js b/src/js/components/Modal/Modal.js
index 20437114..e98b0494 100755
--- a/src/js/components/Modal/Modal.js
+++ b/src/js/components/Modal/Modal.js
@@ -13,6 +13,7 @@ import EditRadioModal from './EditRadioModal'
 import ImageZoomModal from './ImageZoomModal'
 import KioskModeModal from './KioskModeModal'
 import SearchSettingsModal from './SearchSettingsModal'
+import VolumeModal from './VolumeModal'
 import AuthorizationModal_Send from './AuthorizationModal_Send'
 import AuthorizationModal_Receive from './AuthorizationModal_Receive'
 
@@ -55,6 +56,7 @@ class Modal extends React.Component{
 					{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
 					{ this.props.modal.name == 'kiosk_mode' ? <KioskModeModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
 					{ this.props.modal.name == 'search_settings' ? <SearchSettingsModal uiActions={this.props.uiActions} search_settings={this.props.search_settings} uri_schemes={this.props.uri_schemes} data={this.props.modal.data} /> : null }
+					{ this.props.modal.name == 'volume' ? <VolumeModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} volume={this.props.volume} mute={this.props.mute} /> : null }
 
 				</div>
 			</div>
@@ -66,6 +68,8 @@ const mapStateToProps = (state, ownProps) => {
 	return {
 		uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : null),
 		search_settings: (state.ui.search_settings ? state.ui.search_settings : null),
+		volume: state.mopidy.volume,
+		mute: state.mopidy.mute,
 		modal: state.ui.modal,
 		radio: state.ui.radio,
 		tracks: state.ui.tracks,
diff --git a/src/js/components/Modal/VolumeModal.js b/src/js/components/Modal/VolumeModal.js
new file mode 100755
index 00000000..5c217b86
--- /dev/null
+++ b/src/js/components/Modal/VolumeModal.js
@@ -0,0 +1,36 @@
+
+import React, { PropTypes } from 'react'
+import FontAwesome from 'react-fontawesome'
+
+import Icon from '../Icon'
+import * as helpers from '../../helpers'
+
+export default class VolumeModal extends React.Component{
+	constructor(props){
+		super(props)
+	}
+
+	handleClick(e){
+		var slider = e.target;
+
+		var sliderY = e.clientY - slider.getBoundingClientRect().top;
+		var sliderHeight = slider.getBoundingClientRect().height;
+		var percent = 100 - parseInt( sliderY / sliderHeight * 100 );
+
+		this.props.mopidyActions.setVolume( percent )
+	}
+
+	render(){
+		return (
+			<div>
+				<div className="slider-wrapper">
+					<div className="slider vertical" onClick={ (e) => this.handleClick(e) } >
+						<div className="track">
+							<div className="progress" style={{ height: this.props.volume+'%' }}></div>
+						</div>
+					</div>
+				</div>
+			</div>
+		)
+	}
+}
\ No newline at end of file
diff --git a/src/js/components/VolumeControl.js b/src/js/components/VolumeControl.js
index da8773ec..cfe5cdc0 100755
--- a/src/js/components/VolumeControl.js
+++ b/src/js/components/VolumeControl.js
@@ -6,11 +6,12 @@ import { Link } from 'react-router'
 import FontAwesome from 'react-fontawesome'
 
 import * as mopidyActions from '../services/mopidy/actions'
+import * as uiActions from '../services/ui/actions'
 
 class VolumeControl extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
 	}
 
 	handleClick(e){
@@ -21,21 +22,33 @@ class VolumeControl extends React.Component{
 		var percent = 100 - parseInt( sliderY / sliderHeight * 100 );
 
 		this.props.mopidyActions.setVolume( percent )
-	} 
+	}
 
 	render(){
+		var className = "volume-control"
+		if (this.props.mute){
+			className += " muted"
+		}
 		return (
-			<span className={this.props.mute ? "volume-control muted" : "volume-control"}>
-				<a onClick={() => this.props.mopidyActions.setMute(!this.props.mute)}>
+			<span className={className}>
+
+				<a className="modal-trigger" onClick={() => this.props.uiActions.openModal('volume')}>
 					{this.props.mute ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-down" />}
 				</a>
-				<div className="slider-wrapper">
-					<div className="slider vertical" onClick={ (e) => this.handleClick(e) } >
-						<div className="track">
-							<div className="progress" style={{ height: this.props.volume+'%' }}></div>
+
+				<span className="hover-trigger">
+					<a onClick={() => this.props.mopidyActions.setMute(!this.props.mute)}>
+						{this.props.mute ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-down" />}
+					</a>
+					<div className="slider-wrapper">
+						<div className="slider vertical" onClick={ (e) => this.handleClick(e) } >
+							<div className="track">
+								<div className="progress" style={{ height: this.props.volume+'%' }}></div>
+							</div>
 						</div>
 					</div>
-				</div>
+				</span>
+
 			</span>
 		);
 	}
@@ -50,6 +63,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = (dispatch) => {
 	return {
+		uiActions: bindActionCreators(uiActions, dispatch),
 		mopidyActions: bindActionCreators(mopidyActions, dispatch)
 	}
 }
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index 6e6fbd4d..ac276a29 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -202,6 +202,19 @@
 		}
 	}
 
+	&.volume {
+		.slider-wrapper {
+			position: absolute;
+			top: 10vh;
+			left: 45vw;
+			height: 80vh;
+
+			.track {
+				width: 10vw;
+			}
+		}
+	}
+
 	.actions {
 		padding-top: 50px;
 		text-align: center;
diff --git a/src/scss/components/_player.scss b/src/scss/components/_player.scss
index baae2eb4..f671fe93 100755
--- a/src/scss/components/_player.scss
+++ b/src/scss/components/_player.scss
@@ -1,4 +1,52 @@
 
+.volume-control {
+	position: relative;
+
+	a {
+		position: relative;
+		z-index: 99;
+		padding: 0 !important;
+	}
+
+	.fa {
+		width: 6px;
+		padding: 12px;
+	}
+
+	.slider-wrapper {
+		display: none;
+		position: absolute;
+		bottom: -8px;
+		left: 1px;
+		height: 80px;
+		padding: 10px 5px 35px 5px;
+		background: rgba(0,0,0,0.8);
+		z-index: 98;
+	}
+
+	&.muted {
+		.fa {
+			color: $red;
+		}
+
+		.slider {
+			.progress {
+				background: rgba(255,255,255,0.25);
+			}
+		}
+	}
+
+	.modal-trigger {
+		display: none !important; 
+	}
+
+	.hover-trigger:hover {
+		.slider-wrapper {
+			display: block;
+		}
+	}
+}
+
 .player {
 
 	.current-track {
@@ -115,6 +163,14 @@
 						padding: 12px;
 					}
 
+					.hover-trigger {
+						display: none;
+					}
+
+					.modal-trigger {
+						display: block !important;
+					}
+
 					.slider-wrapper {
 						bottom: 2px;
 						left: 0;
@@ -144,47 +200,3 @@
 		}
 	}
 }
-
-.volume-control {
-	position: relative;
-
-	a {
-		position: relative;
-		z-index: 99;
-		padding: 0 !important;
-	}
-
-	.fa {
-		width: 6px;
-		padding: 12px;
-	}
-
-	.slider-wrapper {
-		display: none;
-		position: absolute;
-		bottom: -8px;
-		left: 1px;
-		height: 80px;
-		padding: 10px 5px 35px 5px;
-		background: rgba(0,0,0,0.8);
-		z-index: 98;
-	}
-
-	&.muted {
-		.fa {
-			color: $red;
-		}
-
-		.slider {
-			.progress {
-				background: rgba(255,255,255,0.25);
-			}
-		}
-	}
-
-	&:hover {
-		.slider-wrapper {
-			display: block;
-		}
-	}
-}
\ No newline at end of file