diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css
index 70e0752513..274516d7da 100644
--- a/dashboard-ui/css/mediaplayer.css
+++ b/dashboard-ui/css/mediaplayer.css
@@ -9,10 +9,10 @@
     vertical-align: top;
 }
 
-.mediaButton {
+.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
     vertical-align: middle;
     font-size: 30px;
-    color: #e8e8e8 !important;
+    color: #e8e8e8;
     margin: 0 10px;
     min-width: 30px;
     text-align: center;
@@ -197,3 +197,15 @@ input[type="range"]::-ms-fill-upper {
     padding: 1em;
     background: #222;
 }
+
+.nowPlayingBarUserDataButtons {
+    display: inline-block;
+    margin-left: 2em;
+}
+
+@media all and (max-width: 1200px) {
+
+    .nowPlayingBarUserDataButtons {
+        display: none;
+    }
+}
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index 7198750e18..7b849c187d 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -771,7 +771,7 @@ progress {
     margin-right: .85em;
     cursor: pointer;
     vertical-align: middle;
-    color: #cc3333 !important;
+    color: #aaa;
     font-size: 17px;
     width: auto !important;
     display: inline-block !important;
@@ -784,8 +784,8 @@ progress {
         border: 0;
     }
 
-.btnUserItemRatingOff {
-    color: #aaa !important;
+.btnUserItemRatingOn {
+    color: #cc3333 !important;
 }
 
 .btnUserItemRating:last-child {
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 2fe1362e72..2b7bb24760 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -2290,9 +2290,9 @@
 
             if ((item.MediaType || item.IsFolder) && type != "TvChannel" && type != "MusicArtist" && item.MediaType != "Audio") {
                 if (userData.Played) {
-                    html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRating', 'fa-check', tooltipPlayed);
+                    html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-check', tooltipPlayed);
                 } else {
-                    html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-check', tooltipPlayed);
+                    html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating', 'fa-check', tooltipPlayed);
                 }
             }
 
@@ -2300,24 +2300,24 @@
             var tooltipDislike = Globalize.translate('TooltipDislike');
 
             if (typeof userData.Likes == "undefined") {
-                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-down', tooltipDislike);
-                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-up', tooltipLike);
-            }
-            else if (userData.Likes) {
-                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-down', tooltipDislike);
+                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'fa-thumbs-down', tooltipDislike);
                 html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'fa-thumbs-up', tooltipLike);
             }
-            else {
+            else if (userData.Likes) {
                 html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'fa-thumbs-down', tooltipDislike);
-                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-thumbs-up', tooltipLike);
+                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-thumbs-up', tooltipLike);
+            }
+            else {
+                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-thumbs-down', tooltipDislike);
+                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'fa-thumbs-up', tooltipLike);
             }
 
             var tooltipFavorite = Globalize.translate('TooltipFavorite');
             if (userData.IsFavorite) {
 
-                html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'fa-heart', tooltipFavorite);
+                html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-heart', tooltipFavorite);
             } else {
-                html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOff', 'fa-heart', tooltipFavorite);
+                html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'fa-heart', tooltipFavorite);
             }
 
             return html;
@@ -2329,14 +2329,14 @@
 
             var $link = $(link);
 
-            var markAsPlayed = $link.hasClass('btnUserItemRatingOff');
+            var markAsPlayed = !$link.hasClass('btnUserItemRatingOn');
 
             if (markAsPlayed) {
                 ApiClient.markPlayed(Dashboard.getCurrentUserId(), id);
-                $link.removeClass('btnUserItemRatingOff');
+                $link.addClass('btnUserItemRatingOn');
             } else {
                 ApiClient.markUnplayed(Dashboard.getCurrentUserId(), id);
-                $link.addClass('btnUserItemRatingOff');
+                $link.removeClass('btnUserItemRatingOn');
             }
         },
 
@@ -2346,14 +2346,14 @@
 
             var $link = $(link);
 
-            var markAsFavorite = $link.hasClass('btnUserItemRatingOff');
+            var markAsFavorite = !$link.hasClass('btnUserItemRatingOn');
 
             ApiClient.updateFavoriteStatus(Dashboard.getCurrentUserId(), id, markAsFavorite);
 
             if (markAsFavorite) {
-                $link.removeClass('btnUserItemRatingOff');
+                $link.addClass('btnUserItemRatingOn');
             } else {
-                $link.addClass('btnUserItemRatingOff');
+                $link.removeClass('btnUserItemRatingOn');
             }
         },
 
@@ -2363,20 +2363,20 @@
 
             var $link = $(link);
 
-            if ($link.hasClass('btnUserItemRatingOff')) {
+            if (!$link.hasClass('btnUserItemRatingOn')) {
 
                 ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), id, true);
 
-                $link.removeClass('btnUserItemRatingOff');
+                $link.addClass('btnUserItemRatingOn');
 
             } else {
 
                 ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), id);
 
-                $link.addClass('btnUserItemRatingOff');
+                $link.removeClass('btnUserItemRatingOn');
             }
 
-            $link.prev().addClass('btnUserItemRatingOff');
+            $link.prev().removeClass('btnUserItemRatingOn');
         },
 
         markDislike: function (link) {
@@ -2385,20 +2385,20 @@
 
             var $link = $(link);
 
-            if ($link.hasClass('btnUserItemRatingOff')) {
+            if (!$link.hasClass('btnUserItemRatingOn')) {
 
                 ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), id, false);
 
-                $link.removeClass('btnUserItemRatingOff');
+                $link.addClass('btnUserItemRatingOn');
 
             } else {
 
                 ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), id);
 
-                $link.addClass('btnUserItemRatingOff');
+                $link.removeClass('btnUserItemRatingOn');
             }
 
-            $link.next().addClass('btnUserItemRatingOff');
+            $link.next().removeClass('btnUserItemRatingOn');
         },
 
         getDetailImageHtml: function (item, href, preferThumb) {
diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js
index 62a2d24c5b..75e07eb9f6 100644
--- a/dashboard-ui/scripts/nowplayingbar.js
+++ b/dashboard-ui/scripts/nowplayingbar.js
@@ -5,6 +5,7 @@
     var currentTimeElement;
     var nowPlayingImageElement;
     var nowPlayingTextElement;
+    var nowPlayingUserData;
     var unmuteButton;
     var muteButton;
     var volumeSlider;
@@ -52,6 +53,9 @@
         html += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
         html += '</div>';
 
+        html += '<div class="nowPlayingBarUserDataButtons">';
+        html += '</div>';
+
         html += '</div>';
 
         return html;
@@ -62,6 +66,7 @@
         currentTimeElement = $('.currentTime', elem);
         nowPlayingImageElement = $('.nowPlayingImage', elem);
         nowPlayingTextElement = $('.nowPlayingText', elem);
+        nowPlayingUserData = $('.nowPlayingBarUserDataButtons', elem);
 
         $(elem).on('swipeup', function () {
             Dashboard.navigate('nowplaying.html');
@@ -374,6 +379,12 @@
         currentImgUrl = url;
 
         nowPlayingImageElement.html('<img src="' + url + '" />');
+
+        if (nowPlayingItem.Id) {
+            ApiClient.getItem(Dashboard.getCurrentUserId(), nowPlayingItem.Id).done(function (item) {
+                nowPlayingUserData.html(LibraryBrowser.getUserDataIconsHtml(item));
+            });
+        }
     }
 
     function onPlaybackStart(e, state) {
@@ -398,7 +409,9 @@
 
         // Use a timeout to prevent the bar from hiding and showing quickly
         // in the event of a stop->play command
-        getNowPlayingBar().hide();
+
+        // Don't call getNowPlayingBar here because we don't want to end up creating it just to hide it
+        $('.nowPlayingBar').hide();
     }
 
     function onPlaybackStopped(e, state) {