diff --git a/dashboard-ui/nowplaying.html b/dashboard-ui/nowplaying.html
index 49984841a7..5fb4ea5d54 100644
--- a/dashboard-ui/nowplaying.html
+++ b/dashboard-ui/nowplaying.html
@@ -128,10 +128,7 @@
                 </div>
                 <div class="tabPlaylist tabContent" style="display: none;">
 
-                    <div class="readOnlyContent" style="margin: 0 auto; padding: 0 1em;">
-
-                        <div class="playlist detailTableContainer">
-                        </div>
+                    <div class="playlist itemsContainer" style="max-width:800px;margin: 0 auto;">
                     </div>
 
                 </div>
diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js
index 577ef9df93..2d624ba15c 100644
--- a/dashboard-ui/scripts/librarylist.js
+++ b/dashboard-ui/scripts/librarylist.js
@@ -887,6 +887,14 @@
 
             itemsContainer.trigger('playallfromhere', [index]);
         }
+        else if (action == 'setplaylistindex') {
+
+            index = elemWithAttributes.getAttribute('data-index');
+
+            closeContextMenu();
+
+            MediaController.currentPlaylistIndex(index);
+        }
         else if (action == 'photoslideshow') {
 
             if (!$(elem).hasClass('card')) {
diff --git a/dashboard-ui/scripts/nowplayingpage.js b/dashboard-ui/scripts/nowplayingpage.js
index c53fba8c99..90e85a01c1 100644
--- a/dashboard-ui/scripts/nowplayingpage.js
+++ b/dashboard-ui/scripts/nowplayingpage.js
@@ -614,7 +614,7 @@
     }
 
     function showIntro() {
-        
+
         if (store.getItem('remotecontrolswipedown') != '1') {
             Dashboard.alert({
                 message: Globalize.translate('MessageSwipeDownOnRemoteControl'),
@@ -626,60 +626,39 @@
     }
 
     function loadPlaylist(page) {
-        
+
         var html = '';
 
-        html += '<table class="detailTable">';
+        //ApiClient.getItems(Dashboard.getCurrentUserId(), {
 
-        html += '<thead><tr>';
-        html += '<th></th>';
-        html += '<th>' + Globalize.translate('HeaderName') + '</th>';
-        html += '<th>' + Globalize.translate('HeaderAlbum') + '</th>';
-        html += '<th>' + Globalize.translate('HeaderArtist') + '</th>';
-        html += '<th>' + Globalize.translate('HeaderAlbumArtist') + '</th>';
-        html += '<th>' + Globalize.translate('HeaderTime') + '</th>';
-        html += '</tr></thead>';
+        //    SortBy: "SortName",
+        //    SortOrder: "Ascending",
+        //    IncludeItemTypes: "Audio",
+        //    Recursive: true,
+        //    Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,IsUnidentified,SyncInfo",
+        //    StartIndex: 0,
+        //    ImageTypeLimit: 1,
+        //    EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+        //    Limit: 100
 
-        html += '<tbody>';
+        //}).done(function (result) {
 
-        $.each(MediaController.playlist(), function (i, item) {
+        //    html += LibraryBrowser.getListViewHtml({
+        //        items: result.Items,
+        //        smallIcon: true,
+        //        defaultAction: 'setplaylistindex'
+        //    });
 
-            var name = LibraryBrowser.getPosterViewDisplayName(item);
+        //    $(".playlist", page).html(html).trigger('create').lazyChildren();
+        //});
 
-            var parentName = item.SeriesName || item.Album;
-
-            html += '<tr>';
-            html += '<td><button type="button" data-index="' + i + '" class="lnkPlayFromIndex" data-icon="play" data-iconpos="notext">' + Globalize.translate('ButtonPlay') + '</button></td>';
-            html += '<td>';
-            html += '<a href="itemdetails.html?id=' + item.Id + '">' + name + '</a>';
-            html += '</td>';
-
-            html += '<td>';
-            if (parentName) {
-                var parentId = item.AlbumId || item.SeriesId || item.ParentId;
-                html += '<a href="itemdetails.html?id=' + parentId + '">' + parentName + '</a>';
-            }
-            html += '</td>';
-
-            html += '<td>';
-            html += LibraryBrowser.getArtistLinksHtml(item.ArtistItems || []);
-            html += '</td>';
-
-            html += '<td>';
-            if (item.AlbumArtist) {
-                html += LibraryBrowser.getArtistLinksHtml(item.AlbumArtists || []);
-            }
-            html += '</td>';
-
-            html += '<td>' + Dashboard.getDisplayTime(item.RunTimeTicks) + '</td>';
-            html += '<td><button type="button" data-index="' + i + '" class="lnkRemoveFromIndex" data-icon="delete" data-iconpos="notext">' + Globalize.translate('ButtonRemove') + '</button></td>';
-            html += '</tr>';
+        html += LibraryBrowser.getListViewHtml({
+            items: MediaController.playlist(),
+            smallIcon: true,
+            defaultAction: 'play'
         });
 
-        html += '</tbody>';
-        html += '</table>';
-
-        $(".playlist", page).html(html).trigger('create');
+        $(".playlist", page).html(html).trigger('create').lazyChildren();
     }
 
     $(document).on('pageinit', "#nowPlayingPage", function () {
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index e00f6d79e2..a887e120bb 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1412,121 +1412,127 @@ var Dashboard = {
 
 })();
 
-$(function () {
+(function() {
+    
+    function onReady() {
+        
+        var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
 
-    var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
+        videoPlayerHtml += '<div class="videoBackdrop">';
+        videoPlayerHtml += '<div id="videoPlayer">';
 
-    videoPlayerHtml += '<div class="videoBackdrop">';
-    videoPlayerHtml += '<div id="videoPlayer">';
+        videoPlayerHtml += '<div id="videoElement">';
+        videoPlayerHtml += '<div id="play" class="status"></div>';
+        videoPlayerHtml += '<div id="pause" class="status"></div>';
+        videoPlayerHtml += '</div>';
 
-    videoPlayerHtml += '<div id="videoElement">';
-    videoPlayerHtml += '<div id="play" class="status"></div>';
-    videoPlayerHtml += '<div id="pause" class="status"></div>';
-    videoPlayerHtml += '</div>';
+        videoPlayerHtml += '<div class="videoTopControls hiddenOnIdle">';
+        videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
+        videoPlayerHtml += '<div class="videoAdvancedControls">';
 
-    videoPlayerHtml += '<div class="videoTopControls hiddenOnIdle">';
-    videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
-    videoPlayerHtml += '<div class="videoAdvancedControls">';
+        videoPlayerHtml += '<button class="mediaButton videoTrackControl previousTrackButton" title="Previous video" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
+        videoPlayerHtml += '<button class="mediaButton videoTrackControl nextTrackButton" title="Next video" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>';
 
-    videoPlayerHtml += '<button class="mediaButton videoTrackControl previousTrackButton" title="Previous video" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
-    videoPlayerHtml += '<button class="mediaButton videoTrackControl nextTrackButton" title="Next video" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>';
+        videoPlayerHtml += '<button class="mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonAudioTracks') + '</button>';
+        videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
 
-    videoPlayerHtml += '<button class="mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonAudioTracks') + '</button>';
-    videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
+        videoPlayerHtml += '<button class="mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>';
+        videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
 
-    videoPlayerHtml += '<button class="mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>';
-    videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
+        videoPlayerHtml += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonScenes') + '</button>';
+        videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
 
-    videoPlayerHtml += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonScenes') + '</button>';
-    videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
+        videoPlayerHtml += '<button class="mediaButton videoQualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonQuality') + '</button>';
+        videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
 
-    videoPlayerHtml += '<button class="mediaButton videoQualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonQuality') + '</button>';
-    videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
+        videoPlayerHtml += '<button class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="delete" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonStop') + '</button>';
 
-    videoPlayerHtml += '<button class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="delete" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonStop') + '</button>';
+        videoPlayerHtml += '</div>'; // videoAdvancedControls
+        videoPlayerHtml += '</div>'; // videoTopControls
 
-    videoPlayerHtml += '</div>'; // videoAdvancedControls
-    videoPlayerHtml += '</div>'; // videoTopControls
+        // Create controls
+        videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
 
-    // Create controls
-    videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
+        videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton videoTrackControl" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
+        videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPlay') + '</button>';
+        videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPause') + '</button>';
+        videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton videoTrackControl" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>';
 
-    videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton videoTrackControl" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
-    videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPlay') + '</button>';
-    videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPause') + '</button>';
-    videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton videoTrackControl" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>';
+        videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">';
+        videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
+        videoPlayerHtml += '</div>';
 
-    videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">';
-    videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
-    videoPlayerHtml += '</div>';
+        videoPlayerHtml += '<div class="currentTime">--:--</div>';
 
-    videoPlayerHtml += '<div class="currentTime">--:--</div>';
+        videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
+        videoPlayerHtml += '<div class="nowPlayingImage"></div>';
+        videoPlayerHtml += '<div class="nowPlayingText"></div>';
+        videoPlayerHtml += '</div>'; // nowPlayingInfo
 
-    videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
-    videoPlayerHtml += '<div class="nowPlayingImage"></div>';
-    videoPlayerHtml += '<div class="nowPlayingText"></div>';
-    videoPlayerHtml += '</div>'; // nowPlayingInfo
+        videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonMute') + '</button>';
+        videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonUnmute') + '</button>';
 
-    videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonMute') + '</button>';
-    videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonUnmute') + '</button>';
+        videoPlayerHtml += '<div class="volumeSliderContainer sliderContainer">';
+        videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
+        videoPlayerHtml += '</div>';
 
-    videoPlayerHtml += '<div class="volumeSliderContainer sliderContainer">';
-    videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
-    videoPlayerHtml += '</div>';
+        videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="expand" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>';
 
-    videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="expand" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>';
+        videoPlayerHtml += '</div>'; // videoControls
 
-    videoPlayerHtml += '</div>'; // videoControls
+        videoPlayerHtml += '</div>'; // videoPlayer
+        videoPlayerHtml += '</div>'; // videoBackdrop
+        videoPlayerHtml += '</div>'; // mediaPlayer
 
-    videoPlayerHtml += '</div>'; // videoPlayer
-    videoPlayerHtml += '</div>'; // videoBackdrop
-    videoPlayerHtml += '</div>'; // mediaPlayer
+        $(document.body).append(videoPlayerHtml);
 
-    $(document.body).append(videoPlayerHtml);
+        var mediaPlayerElem = $('#mediaPlayer', document.body);
+        mediaPlayerElem.trigger('create');
 
-    var mediaPlayerElem = $('#mediaPlayer', document.body);
-    mediaPlayerElem.trigger('create');
+        var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b">';
 
-    var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b">';
+        footerHtml += '<div id="footerNotifications"></div>';
+        footerHtml += '</div>';
 
-    footerHtml += '<div id="footerNotifications"></div>';
-    footerHtml += '</div>';
+        $(document.body).append(footerHtml);
 
-    $(document.body).append(footerHtml);
+        var footerElem = $('#footer', document.body);
+        footerElem.trigger('create');
 
-    var footerElem = $('#footer', document.body);
-    footerElem.trigger('create');
+        $(window).on("beforeunload", function () {
 
-    $(window).on("beforeunload", function () {
+            var apiClient = ConnectionManager.currentApiClient();
 
-        var apiClient = ConnectionManager.currentApiClient();
+            // Close the connection gracefully when possible
+            if (apiClient && apiClient.isWebSocketOpen() && !MediaPlayer.isPlaying()) {
 
-        // Close the connection gracefully when possible
-        if (apiClient && apiClient.isWebSocketOpen() && !MediaPlayer.isPlaying()) {
+                console.log('Sending close web socket command');
+                apiClient.closeWebSocket();
+            }
+        });
 
-            console.log('Sending close web socket command');
-            apiClient.closeWebSocket();
+        $(document).on('contextmenu', '.ui-popup-screen', function (e) {
+
+            $('.ui-popup').popup('close');
+
+            e.preventDefault();
+            return false;
+        });
+
+        function isTouchDevice() {
+            return (('ontouchstart' in window)
+                 || (navigator.MaxTouchPoints > 0)
+                 || (navigator.msMaxTouchPoints > 0));
         }
-    });
 
-    $(document).on('contextmenu', '.ui-popup-screen', function (e) {
-
-        $('.ui-popup').popup('close');
-
-        e.preventDefault();
-        return false;
-    });
-
-    function isTouchDevice() {
-        return (('ontouchstart' in window)
-             || (navigator.MaxTouchPoints > 0)
-             || (navigator.msMaxTouchPoints > 0));
+        if (isTouchDevice()) {
+            $(document.body).addClass('touch');
+        }
     }
 
-    if (isTouchDevice()) {
-        $(document.body).addClass('touch');
-    }
-});
+    $(onReady);
+
+})();
 
 Dashboard.jQueryMobileInit();