diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js
index 3308ad252a..a3839a9342 100644
--- a/src/components/nowplayingbar/nowplayingbar.js
+++ b/src/components/nowplayingbar/nowplayingbar.js
@@ -439,7 +439,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             text = itemHelper.getDisplayName(item);
         }
 
-        return '<a>' + text + '</a>';
+        return `<a>${text}</a>`;
     }
 
     function seriesImageUrl(item, options) {
@@ -522,10 +522,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             var cssClass = nowPlayingName.secondary ? ' class="nowPlayingBarSecondaryText"' : '';
 
             if (nowPlayingName.item) {
-                return '<div' + cssClass + '>' + getTextActionButton(nowPlayingName.item, nowPlayingName.text) + '</div>';
+                var nowPlayingText = getTextActionButton(nowPlayingName.item, nowPlayingName.text);
+                return `<div ${cssClass}>${nowPlayingText}</div>`;
             }
 
-            return '<div' + cssClass + '>' + nowPlayingName.text + '</div>';
+            return `<div ${cssClass}>${nowPlayingText}</div>`;
 
         }).join('');
 
diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css
index 08192cae05..21342bff73 100644
--- a/src/components/remotecontrol/remotecontrol.css
+++ b/src/components/remotecontrol/remotecontrol.css
@@ -40,6 +40,7 @@
 .nowPlayingArtist a {
     font-weight: normal;
     text-align: left !important;
+    color: inherit !important;
 }
 
 .nowPlayingButtonsContainer {
@@ -143,6 +144,10 @@
     padding: 1.5em 0;
 }
 
+.contextMenuList a {
+    color: inherit !important;
+}
+
 .contextMenuList i.listItemIcon {
     font-size: x-large;
 }
@@ -295,6 +300,7 @@
     .btnPlayPause {
         padding: 0;
         margin: 0;
+        font-size: 1.7em;
     }
 
     .btnPlayPause:hover {
@@ -332,7 +338,8 @@
         display: inline-block;
         left: 0;
         right: 0;
-        background: #202020;
+
+        /* background: #202020; */
         z-index: 1000;
     }
 
@@ -344,7 +351,8 @@
         right: 0;
         padding-left: 7.3%;
         padding-right: 7.3%;
-        background-color: #101010;
+
+        /* background-color: #101010; */
     }
 
     .playlistSectionButton .btnTogglePlaylist {
@@ -486,6 +494,7 @@
     .btnPlayPause {
         padding: 0;
         margin: 0;
+        font-size: 1.7em;
     }
 
     .btnPlayPause:hover {
@@ -523,7 +532,8 @@
         display: inline-block;
         left: 0;
         right: 0;
-        background: #202020;
+
+        /* background: #202020; */
         z-index: 1000;
     }
 
@@ -535,7 +545,8 @@
         right: 0;
         padding-left: 4.3%;
         padding-right: 4.3%;
-        background-color: #101010;
+
+        /* background-color: #101010; */
     }
 
     .playlistSectionButton .btnTogglePlaylist {
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 88f7d4e919..a4f04ef413 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -113,8 +113,8 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
     function updateNowPlayingInfo(context, state, serverId) {
         var item = state.NowPlayingItem;
         var displayName = item ? getNowPlayingNameHtml(item).replace("<br/>", " - ") : "";
-        console.debug(JSON.stringify(item, null, 4));
-        if (typeof item != 'undefined') {
+        if (typeof item !== 'undefined') {
+            var nowPlayingServerId = (item.ServerId || serverId);
             if (item.Type == "Audio" || item.MediaStreams[0].Type == "Audio") {
                 var songName = item.Name;
                 if (item.Album != null && item.Artists != null) {
@@ -122,10 +122,10 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                     var artistName;
                     if (item.ArtistItems != null) {
                         artistName = item.ArtistItems[0].Name;
-                        context.querySelector(".nowPlayingAlbum").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + '&amp;serverId=' + (item.ServerId || serverId) + '">' + albumName + '</a>';
-                        context.querySelector(".nowPlayingArtist").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + '&amp;serverId=' + (item.ServerId || serverId) + '">' + artistName + '</a>';
-                        context.querySelector(".contextMenuAlbum").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + '&amp;serverId=' + (item.ServerId || serverId) + '"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">album</i> ' + globalize.translate("ViewAlbum") + '</a>';
-                        context.querySelector(".contextMenuArtist").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + '&amp;serverId=' + (item.ServerId || serverId) + '"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">person</i> ' + globalize.translate("ViewArtist") + '</a>';
+                        context.querySelector(".nowPlayingAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}">${albumName}</a>`;
+                        context.querySelector(".nowPlayingArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}">${artistName}</a>`;
+                        context.querySelector(".contextMenuAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons album"></i> ` + globalize.translate("ViewAlbum") + '</a>';
+                        context.querySelector(".contextMenuArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons person"></i> ` + globalize.translate("ViewArtist") + '</a>';
                     } else {
                         artistName = item.Artists;
                         context.querySelector(".nowPlayingAlbum").innerHTML = albumName;
@@ -135,13 +135,15 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 context.querySelector(".nowPlayingSongName").innerHTML = songName;
             } else if (item.Type == "Episode") {
                 if (item.SeasonName != null) {
-                    context.querySelector(".nowPlayingSeason").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeasonId + '&amp;serverId=' + (item.ServerId || serverId) + '">' + item.SeasonName + '</a>';
+                    var seasonName = item.SeasonName;
+                    context.querySelector(".nowPlayingSeason").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeasonId + `&amp;serverId=${nowPlayingServerId}">${seasonName}</a>`;
                 }
                 if (item.SeriesName != null) {
+                    var seriesName = item.SeriesName;
                     if (item.SeriesId !=null) {
-                        context.querySelector(".nowPlayingSerie").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeriesId + '&amp;serverId=' + (item.ServerId || serverId) + '">' + item.SeriesName + '</a>';
+                        context.querySelector(".nowPlayingSerie").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeriesId + `&amp;serverId=${nowPlayingServerId}">${seriesName}</a>`;
                     } else {
-                        context.querySelector(".nowPlayingSerie").innerHTML = item.SeriesName;
+                        context.querySelector(".nowPlayingSerie").innerHTML = seriesName;
                     }
                 }
                 context.querySelector(".nowPlayingEpisode").innerHTML = item.Name;
@@ -149,7 +151,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 context.querySelector(".nowPlayingPageTitle").innerHTML = displayName;
             }
 
-            if (displayName.length > 0 && item.Type != "Audio") {
+            if (displayName.length > 0 && item.Type != "Audio" && item.Type != "Episode") {
                 context.querySelector(".nowPlayingPageTitle").classList.remove("hide");
             } else {
                 context.querySelector(".nowPlayingPageTitle").classList.add("hide");
@@ -379,7 +381,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
         function updatePlayPauseState(isPaused, isActive) {
             var context = dlg;
             var btnPlayPause = context.querySelector(".btnPlayPause");
-            btnPlayPause.querySelector("i").innerHTML = isPaused ? "play_circle_filled" : "pause_circle_filled";
+            btnPlayPause.querySelector("i").innerHTML = isPaused ? "&#xE038;" : "&#xE035;";
             buttonVisible(btnPlayPause, isActive);
         }
 
diff --git a/src/nowplaying.html b/src/nowplaying.html
index a1ddcc26a7..7bfde2d9e9 100644
--- a/src/nowplaying.html
+++ b/src/nowplaying.html
@@ -163,16 +163,15 @@
         </div>
         <div class="playlistSection">
             <div class="playlistSectionButton flex align-items-center justify-content-center">
-                <!--<h2 style="margin:0;">${TabPlaylist}</h2>-->
                 <button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist" title="${ButtonTogglePlaylist}">
-                    <i class="material-icons">queue_music</i>   
+                    <i class="material-icons queue_music"></i>   
                 </button>
                 <button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}">
-                    <i class="material-icons">save</i>  
+                    <i class="material-icons save"></i>  
                 </button>
             </div>
-            <div id="playlist" class="playlist itemsContainer vertical-list hide" is="emby-itemscontainer" data-dragreorder="true"></div>
-            <div id="contextMenu" class="contextMenu itemsContainer vertical-list hide" is="emby-itemscontainer">
+            <div id="playlist" class="playlist itemsContainer vertical-list nowPlayingPlaylist hide" is="emby-itemscontainer" data-dragreorder="true"></div>
+            <div id="contextMenu" class="contextMenu itemsContainer vertical-list nowPlayingContextMenu hide" is="emby-itemscontainer">
                 <div class="listItem listItem-border contextMenuList contextMenuArtist">
                 </div>
                 <div class="listItem listItem-border contextMenuList contextMenuAlbum">
diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css
index 5ca517bea5..6a91dcf8cf 100644
--- a/src/themes/appletv/theme.css
+++ b/src/themes/appletv/theme.css
@@ -43,7 +43,9 @@ html {
 }
 
 .backgroundContainer,
-.dialog {
+.dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu {
     background: #d5e9f2;
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css
index b929c2a296..d7c47b1a2c 100644
--- a/src/themes/blueradiance/theme.css
+++ b/src/themes/blueradiance/theme.css
@@ -42,6 +42,8 @@ html {
 }
 
 .dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
 html {
     background-color: #033361;
 }
diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css
index 4363be991b..291a0b8b55 100644
--- a/src/themes/dark/theme.css
+++ b/src/themes/dark/theme.css
@@ -36,6 +36,8 @@ html {
 
 .backgroundContainer,
 .dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
 html {
     background-color: #101010;
 }
diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css
index d84a1c3b67..ad9695c6ee 100644
--- a/src/themes/light/theme.css
+++ b/src/themes/light/theme.css
@@ -51,7 +51,9 @@ html {
     background-color: rgba(255, 255, 255, 0.8);
 }
 
-.dialog {
+.dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu {
     background-color: #f0f0f0;
 }
 
diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css
index 45f43abc2f..f01c0c6405 100644
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@@ -37,6 +37,8 @@ html {
 }
 
 .dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
 html {
     background-color: #230c33;
 }
diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css
index 6143b7fe2c..2cdae4dd2e 100644
--- a/src/themes/wmc/theme.css
+++ b/src/themes/wmc/theme.css
@@ -48,7 +48,9 @@ html {
 }
 
 .backgroundContainer,
-.dialog {
+.dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu {
     background: -webkit-gradient(linear, left top, left bottom, from(#0f3562), color-stop(#1162a4), to(#03215f));
     background: -webkit-linear-gradient(top, #0f3562, #1162a4, #03215f);
     background: -o-linear-gradient(top, #0f3562, #1162a4, #03215f);