diff --git a/approot/mediaplayer.xml b/approot/mediaplayer.xml
index bcd52a9c..e8212a76 100644
--- a/approot/mediaplayer.xml
+++ b/approot/mediaplayer.xml
@@ -14,20 +14,20 @@
 		</div>
 
 		<div class="row">
-			<div class="col-xs-4">
-				<div class="row">
-					<div class="col-sm-6 col-xs-12 Lms-player-controls">
-						<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i>
-						<i id="lms-mp-play" class="fa fa-play Lms-player-btn Lms-player-btn-playpause"></i>
-						<i id="lms-mp-pause" class="fa fa-pause Lms-player-btn Lms-player-btn-playpause" style="display: none"></i>
-						<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn"></i>
-					</div>
-					<div class="hidden-xs col-sm-6 Lms-player-duration">
-						<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
-					</div>
+			<div class="col-xs-4 col-sm-2 Lms-player-controls">
+				<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn Lms-player-btn-controls"></i>
+				<i id="lms-mp-playpause" class="fa fa-play Lms-player-btn Lms-player-btn-controls"></i>
+				<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn Lms-player-btn-controls"></i>
+			</div>
+			<div class="hidden-xs col-sm-2">
+				<div class="Lms-player-volume">
+					<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-player-btn-volume"></i>
+					<span class="hidden-xs Lms-player-volume-slider-container">
+						<input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8" class="Lms-player-volume-slider"/>
+					</span>
 				</div>
 			</div>
-			<div class="col-xs-8">
+			<div class="col-xs-8 col-sm-6">
 				<div class="Lms-player-text-center">
 					${title class="Lms-player-text"}
 				</div>
@@ -35,6 +35,9 @@
 					<small><span class="hidden-xs">${release class="Lms-player-text Lms-explore-releasename"}</span>${artist class="Lms-player-text Lms-explore-artistname Lms-player-artistname"}</small>
 				</div>
 			</div>
+			<div class="hidden-xs col-sm-2 Lms-player-duration">
+				<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
+			</div>
 		</div>
 	</div>
 
diff --git a/docroot/css/lms.css b/docroot/css/lms.css
index e441bcb8..5a756d69 100644
--- a/docroot/css/lms.css
+++ b/docroot/css/lms.css
@@ -402,7 +402,6 @@ a:hover {
 }
 
 .Lms-player-btn {
-	font-size: 40px !important;
 	cursor: pointer;
 }
 
@@ -410,15 +409,20 @@ a:hover {
 	color: #337ab7;
 }
 
-.Lms-player-btn-playpause {
-	width: 40px;
-	margin-left: 8px;
-	margin-right: 8px;
+.Lms-player-btn-volume {
+	font-size: 18px !important;
+	margin: auto;
+}
+
+.Lms-player-btn-controls {
+	font-size: 40px !important;
+	text-align: center;
+	width: 0.9em;
 }
 
 .Lms-player-duration {
 	line-height: 40px;
-	text-align: center;
+	text-align: right;
 	color: darkgrey;
 	white-space: nowrap;
 }
@@ -448,14 +452,14 @@ a:hover {
 	background: transparent;
 }
 
-input[type="range"]::-webkit-slider-thumb {
+.Lms-player-seek::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	height: 0px;
 	width: 0px;
 }
 
-input[type="range"]::-moz-range-thumb {
+.Lms-player-seek::-moz-range-thumb {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	height: 0px;
@@ -479,6 +483,54 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .Lms-player-text {
-	margin-left:8px;
-	margin-right:8px;
+	margin-left: 8px;
+	margin-right: 8px;
 }
+
+.Lms-player-volume {
+	width: 125px;
+	height: 40px;
+	display: flex;
+}
+
+.Lms-player-volume-slider-container {
+	display: inline-block;
+	width: 85px;
+	margin: auto;
+}
+
+.Lms-player-volume-slider {
+	-webkit-appearance: none;
+	appearance: none;
+	width: 100%;
+	height: 8px;
+	background: lightgrey;
+	outline: none;
+	cursor: pointer;
+	border-radius: 4px;
+}
+
+.Lms-player-volume-slider::-webkit-slider-thumb {
+	-webkit-appearance: none; /* Override default look */
+	appearance: none;
+	width: 14px;
+	height: 14px;
+	border-radius: 7px;
+	background: darkgrey;
+}
+
+.Lms-player-volume-slider::-moz-range-thumb {
+	width: 14px;
+	height: 14px;
+	border-radius: 7px;
+	background: darkgrey;
+}
+
+.Lms-player-volume-slider::-webkit-slider-thumb:hover {
+	background: #337ab7;
+}
+
+.Lms-player-volume-slider::-moz-range-thumb:hover {
+	background: #337ab7;
+}
+
diff --git a/docroot/js/mediaplayer.js b/docroot/js/mediaplayer.js
index df20f3cd..3987eeab 100644
--- a/docroot/js/mediaplayer.js
+++ b/docroot/js/mediaplayer.js
@@ -11,14 +11,14 @@ LMS.mediaplayer = function () {
 	var _audioSrc;
 
 	var _updateControls = function() {
-		_elems.progress.classList.toggle("active");
 		if (_elems.audio.paused) {
-			_elems.play.style.display = "inline";
-			_elems.pause.style.display = "none";
+			_elems.playpause.classList.remove("fa-pause");
+			_elems.playpause.classList.add("fa-play");
+			_elems.progress.classList.remove("active");
 		}
 		else {
-			_elems.pause.style.display = "inline";
-			_elems.play.style.display = "none";
+			_elems.playpause.classList.remove("fa-play");
+			_elems.playpause.classList.add("fa-pause");
 			_elems.progress.classList.add("active");
 		}
 	}
@@ -52,21 +52,23 @@ LMS.mediaplayer = function () {
 		_root = root;
 
 		_elems.audio = document.getElementById("lms-mp-audio");
-		_elems.play = document.getElementById("lms-mp-play");
-		_elems.pause = document.getElementById("lms-mp-pause");
+		_elems.playpause = document.getElementById("lms-mp-playpause");
 		_elems.previous = document.getElementById("lms-mp-previous");
 		_elems.next = document.getElementById("lms-mp-next");
 		_elems.progress = document.getElementById("lms-mp-progress");
 		_elems.seek = document.getElementById("lms-mp-seek");
 		_elems.curtime = document.getElementById("lms-mp-curtime");
 		_elems.duration = document.getElementById("lms-mp-duration");
+		_elems.volume = document.getElementById("lms-mp-volume");
+		_elems.volumeslider = document.getElementById("lms-mp-volume-slider");
 
-		_elems.play.addEventListener("click", function() {
-			if (_elems.audio.hasAttribute("src"))
-				_elems.audio.play();
-		});
-		_elems.pause.addEventListener("click", function() {
-			_elems.audio.pause();
+		_elems.playpause.addEventListener("click", function() {
+			if (_elems.audio.paused) {
+				if (_elems.audio.hasAttribute("src"))
+					_elems.audio.play();
+			}
+			else
+				_elems.audio.pause();
 		});
 
 		_elems.previous.addEventListener("click", function() {
@@ -98,6 +100,39 @@ LMS.mediaplayer = function () {
 		_elems.audio.addEventListener("ended", function() {
 			Wt.emit(_root, "playbackEnded");
 		});
+
+		_elems.audio.volume = _elems.volumeslider.value;
+		_elems.lastvolume = _elems.volumeslider.value;
+		_elems.volumeslider.addEventListener("input", function() {
+			_elems.audio.volume = _elems.volumeslider.value;
+			_elems.lastvolume = _elems.volumeslider.value;
+		});
+
+		_elems.volume.addEventListener("click", function () {
+			if (_elems.audio.volume != 0)
+			{
+				_elems.audio.volume = 0;
+				_elems.volumeslider.value = 0;
+			}
+			else
+			{
+				_elems.audio.volume = _elems.lastvolume;
+				_elems.volumeslider.value = _elems.lastvolume;
+			}
+		});
+		_elems.audio.addEventListener("volumechange", function() {
+			if (_elems.audio.volume != 0)
+			{
+				_elems.volume.classList.remove("fa-volume-off");
+				_elems.volume.classList.add("fa-volume-up");
+			}
+			else
+			{
+				_elems.volume.classList.remove("fa-volume-up");
+				_elems.volume.classList.add("fa-volume-off");
+			}
+		});
+
 	}
 
 	var loadTrack = function(params, autoplay) {