diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js
index 33f9aa405b..e1d8ebba6a 100644
--- a/src/components/nowPlayingBar/nowPlayingBar.js
+++ b/src/components/nowPlayingBar/nowPlayingBar.js
@@ -47,7 +47,9 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></span></button>';
 
         html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><span class="material-icons stop"></span></button>';
-        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
+        if (!layoutManager.mobile) {
+            html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
+        }
 
         html += '<div class="nowPlayingBarCurrentTime"></div>';
         html += '</div>';
@@ -61,12 +63,17 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         html += '</div>';
 
         html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><span class="material-icons repeat"></span></button>';
+        html += '<button is="paper-icon-button-light" class="btnShuffle mediaButton"><span class="material-icons shuffle"></span></button>';
 
         html += '<div class="nowPlayingBarUserDataButtons">';
         html += '</div>';
 
         html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></span></button>';
-        html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><span class="material-icons more_vert"></span></button>';
+        if (layoutManager.mobile) {
+            html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
+        } else {
+            html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><span class="material-icons more_vert"></span></button>';
+        }
 
         html += '</div>';
         html += '</div>';
@@ -163,6 +170,16 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             }
         });
 
+        elem.querySelector('.btnShuffle').addEventListener('click', function () {
+            if (currentPlayer) {
+                if (playbackManager.getPlaylistShuffleMode(currentPlayer) === 'Sorted') {
+                    playbackManager.setPlaylistShuffleMode('Shuffle', currentPlayer);
+                } else {
+                    playbackManager.setPlaylistShuffleMode('Sorted', currentPlayer);
+                }
+            }
+        });
+
         toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
         toggleRepeatButton.addEventListener('click', function () {
 
@@ -263,6 +280,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
                 parentContainer.insertAdjacentHTML('afterbegin', getNowPlayingBarHtml());
                 nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
 
+                if (layoutManager.mobile) {
+                    hideButton(nowPlayingBarElement.querySelector('.shuffle'));
+                }
+
                 if (browser.safari && browser.slow) {
                     // Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc.
                     nowPlayingBarElement.classList.add('noMediaProgress');
@@ -316,6 +337,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         }
 
         updateRepeatModeDisplay(playState.RepeatMode);
+        onPlaylistShuffleModeChange();
 
         updatePlayerVolumeState(playState.IsMuted, playState.VolumeLevel);
 
@@ -550,22 +572,24 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
                 var apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
                 apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
                     var userData = item.UserData || {};
-                    var likes = userData.Likes == null ? '' : userData.Likes;
-                    var contextButton = document.querySelector('.nowPlayingBar').querySelector('.btnToggleContextMenu');
-                    var options = {
-                        play: false,
-                        queue: false,
-                        positionTo: contextButton
-                    };
-                    nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>';
-                    apiClient.getCurrentUser().then(function(user) {
-                        contextButton.addEventListener('click', function () {
-                            itemContextMenu.show(Object.assign({
-                                item: item,
-                                user: user
-                            }, options ));
+                    if (!layoutManager.mobile) {
+                        var likes = userData.Likes == null ? '' : userData.Likes;
+                        var contextButton = document.querySelector('.nowPlayingBar').querySelector('.btnToggleContextMenu');
+                        var options = {
+                            play: false,
+                            queue: false,
+                            positionTo: contextButton
+                        };
+                        apiClient.getCurrentUser().then(function (user) {
+                            contextButton.addEventListener('click', function () {
+                                itemContextMenu.show(Object.assign({
+                                    item: item,
+                                    user: user
+                                }, options));
+                            });
                         });
-                    });
+                    }
+                    nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>';
                 });
             }
         } else {
@@ -592,6 +616,18 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         updateRepeatModeDisplay(playbackManager.getRepeatMode(player));
     }
 
+    function onPlaylistShuffleModeChange() {
+        let shuffleMode = playbackManager.getPlaylistShuffleMode(this);
+        let context = nowPlayingBarElement;
+        let toggleShuffleButton = context.querySelector('.btnShuffle');
+
+        if ('Sorted' === shuffleMode) {
+            toggleShuffleButton.classList.remove('shuffleButton-active');
+        } else if ('Shuffle' === shuffleMode) {
+            toggleShuffleButton.classList.add('shuffleButton-active');
+        }
+    }
+
     function showNowPlayingBar() {
 
         if (!isVisibilityAllowed) {
@@ -697,6 +733,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             events.off(player, 'playbackstart', onPlaybackStart);
             events.off(player, 'statechange', onPlaybackStart);
             events.off(player, 'repeatmodechange', onRepeatModeChange);
+            events.off(player, 'shuffleplaylistmodechange', onPlaylistShuffleModeChange);
             events.off(player, 'playbackstop', onPlaybackStopped);
             events.off(player, 'volumechange', onVolumeChanged);
             events.off(player, 'pause', onPlayPauseStateChanged);
@@ -745,6 +782,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         events.on(player, 'playbackstart', onPlaybackStart);
         events.on(player, 'statechange', onPlaybackStart);
         events.on(player, 'repeatmodechange', onRepeatModeChange);
+        events.on(player, 'shuffleplaylistmodechange', onPlaylistShuffleModeChange);
         events.on(player, 'playbackstop', onPlaybackStopped);
         events.on(player, 'volumechange', onVolumeChanged);
         events.on(player, 'pause', onPlayPauseStateChanged);
diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css
index 34a65f61e3..6e6dc3bf19 100644
--- a/src/components/remotecontrol/remotecontrol.css
+++ b/src/components/remotecontrol/remotecontrol.css
@@ -290,7 +290,7 @@
         border-radius: 0;
     }
 
-    .nowPlayingInfoButtons .btnRepeatMobile {
+    .nowPlayingInfoButtons .btnRepeat {
         position: absolute;
         left: 0;
         margin-left: 0;
@@ -298,7 +298,7 @@
         font-size: smaller;
     }
 
-    .nowPlayingInfoButtons .btnShuffleMobile {
+    .nowPlayingInfoButtons .btnShuffle {
         position: absolute;
         right: 0;
         margin-right: 0;
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 8755fb491c..0b6ba6d571 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -2,6 +2,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     'use strict';
     var showMuteButton = true;
     var showVolumeSlider = true;
+    var shuffleButton;
 
     function showAudioMenu(context, player, button, item) {
         var currentIndex = playbackManager.getAudioStreamIndex(player);
@@ -296,8 +297,6 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             if (layoutManager.mobile) {
                 buttonVisible(context.querySelector('.btnRewind'), false);
                 buttonVisible(context.querySelector('.btnFastForward'), false);
-                buttonVisible(context.querySelector('.nowPlayingInfoButtons').querySelector('.repeatToggleButton'), true);
-                buttonVisible(context.querySelector('.nowPlayingInfoButtons').querySelector('.btnShuffleMobile'), true);
             } else {
                 buttonVisible(context.querySelector('.btnRewind'), null != item);
                 buttonVisible(context.querySelector('.btnFastForward'), null != item);
@@ -326,6 +325,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             }
 
             updateRepeatModeDisplay(playState.RepeatMode);
+            onShufflePlaylistModeChange();
             updateNowPlayingInfo(context, state);
         }
 
@@ -826,9 +826,11 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`;
             volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
             volumecontrolHtml += '</div>';
+            let shuffleButtonHtml = `<button is="paper-icon-button-light" class="btnShuffle autoSize" title="${globalize.translate('ButtonShuffle')}"><span class="material-icons shuffle"></span></button>`;
+            let repeatButtonHtml = `<button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${globalize.translate('ButtonRepeat')}" data-command="SetRepeatMode"><span class="material-icons repeat"></span></button>`;
             let optionsSection = context.querySelector('.playlistSectionButton');
             if (!layoutManager.mobile) {
-                context.querySelector('.nowPlayingSecondaryButtons').innerHTML += volumecontrolHtml;
+                context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', repeatButtonHtml + shuffleButtonHtml + volumecontrolHtml);
                 optionsSection.innerHTML += contextmenuHtml;
                 optionsSection.classList.remove('align-items-center', 'justify-content-center');
                 optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
@@ -837,6 +839,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 optionsSection.innerHTML += volumecontrolHtml + contextmenuHtml;
                 optionsSection.classList.add('playlistSectionButtonTransparent');
                 context.querySelector('.btnTogglePlaylist').classList.remove('hide');
+                context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('afterbegin', repeatButtonHtml);
+                context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('beforeend', shuffleButtonHtml);
             }
 
             bindEvents(context);
diff --git a/src/nowplaying.html b/src/nowplaying.html
index 70f8e298ef..0c76882466 100644
--- a/src/nowplaying.html
+++ b/src/nowplaying.html
@@ -29,11 +29,6 @@
                 <div class="nowPlayingButtonsContainer focuscontainer-x">
                 
                     <div class="nowPlayingInfoButtons">
-
-                        <button is="paper-icon-button-light" class="btnRepeatMobile btnCommand repeatToggleButton autoSize hide" title="${ButtonRepeat}"
-                            data-command="SetRepeatMode">
-                            <span class="material-icons repeat"></span>
-                        </button>
                     
                         <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
                             <span class="material-icons replay_10"></span>
@@ -59,9 +54,6 @@
                             <span class="material-icons forward_30"></span>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnShuffleMobile btnShuffle autoSize hide" title="${ButtonShuffle}">
-                            <span class="material-icons shuffle"></span>
-                        </button>
                     </div>
 
                     <div class="nowPlayingSecondaryButtons">
@@ -80,11 +72,6 @@
                             <span class="material-icons fullscreen"></span>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnCommand repeatToggleButton autoSize" title="${ButtonRepeat}"
-                            data-command="SetRepeatMode">
-                            <span class="material-icons repeat"></span>
-                        </button>
-
                     </div>
                 </div>
             </div>