diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index c95120bfc5..f4aa554d05 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -1166,6 +1166,7 @@ a.itemTag:hover {
 .channelHeader {
     padding: 1em;
     text-align: center;
+    border-bottom: 1px solid #333;
 }
 
     .channelHeader a {
diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css
index c00af3cf25..b3fd9d8300 100644
--- a/dashboard-ui/css/librarymenu.css
+++ b/dashboard-ui/css/librarymenu.css
@@ -100,7 +100,7 @@
     top: 51px;
     z-index: 1000;
     background-color: #181818;
-    background-color: rgba(24, 24, 24, .95);
+    background-color: rgba(24, 24, 24, 1);
 }
 
 @media all and (max-width: 460px) {
diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css
index e3613297e4..c3c27ee9e1 100644
--- a/dashboard-ui/css/posteritem.css
+++ b/dashboard-ui/css/posteritem.css
@@ -137,24 +137,49 @@
     }
 
 .myLibraryPosterItem {
-    width: 157px;
+    width: 148px;
 }
 
     .myLibraryPosterItem .posterItemImage {
-        height: 65px;
-        background-position: 20px center;
-        background-size: 25px 25px;
-        background-color: rgba(51, 51, 51, 0.5);
+        height: 38px;
+        background-position: 12px center;
+        background-size: 20px 20px;
+        background-color: rgba(51, 136, 204, 0.5);
+        background-color: rgba(82, 181, 75, 0.5);
     }
 
     .myLibraryPosterItem .posterItemDefaultText {
         top: 0;
         left: 0;
-        line-height: 65px;
+        line-height: 38px;
         text-align: left;
-        padding-left: 60px;
+        padding-left: 45px;
     }
 
+.moviesPosterItem .posterItemImage {
+    background-color: rgba(176, 94, 81, 0.5);
+}
+
+.musicPosterItem .posterItemImage {
+    background-color: rgba(217, 145, 67, 0.5);
+}
+
+.tvshowsPosterItem .posterItemImage {
+    background-color: rgba(77, 88, 164, 0.5);
+}
+
+.gamesPosterItem .posterItemImage {
+    background-color: rgba(183, 202, 72, 0.5);
+}
+
+.channelsPosterItem .posterItemImage {
+    background-color: rgba(51, 136, 204, 0.5);
+}
+
+.livetvPosterItem .posterItemImage {
+    background-color: rgba(255, 233, 127, 0.5);
+}
+
 .smallBackdropPosterItem {
     width: 157px;
 }
@@ -279,7 +304,7 @@
         }
 
     .smallBackdropPosterItem {
-        width: 202px;
+        width: 190px;
     }
 
         .smallBackdropPosterItem .posterItemImage {
@@ -295,6 +320,13 @@
         }
 }
 
+@media all and (min-width: 600px) {
+
+    .myLibraryPosterItem {
+        width: 180px;
+    }
+}
+
 @media all and (min-width: 750px) {
 
     .portraitPosterItem {
diff --git a/dashboard-ui/index.html b/dashboard-ui/index.html
index ade35df672..8c1abcd237 100644
--- a/dashboard-ui/index.html
+++ b/dashboard-ui/index.html
@@ -11,11 +11,9 @@
             <table class="ehsContent homeEhsContent">
                 <tr>
                     <td>
-                        <h1 class="listHeader">${HeaderMyLibrary}</h1>
-
+                        <br />
                         <div class="myLibrary">
                         </div>
-
                         <div id="resumableSection" style="display: none;">
                             <h1 class="listHeader">${HeaderResume}</h1>
 
diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js
index 9ddbf66b15..84d5f77bcd 100644
--- a/dashboard-ui/scripts/indexpage.js
+++ b/dashboard-ui/scripts/indexpage.js
@@ -1,123 +1,17 @@
 (function ($, document, apiClient) {
 
-    function fillSeriesSpotlight(elem, item, nextUp) {
-
-        var html = '<h1 class="spotlightTitle">' + item.Name + '</h1>';
-
-        var imgUrl = ApiClient.getImageUrl(item.Id, {
-            type: "Backdrop",
-            tag: item.BackdropImageTags[0]
-        });
-
-        html += '<div class="spotlight" style="background-image:url(\'' + imgUrl + '\');">';
-
-        imgUrl = ApiClient.getImageUrl(item.Id, {
-            type: "Primary",
-            tag: item.ImageTags.Primary,
-            EnableImageEnhancers: false
-        });
-
-        html += '<div class="spotlightContent">';
-        html += '<div class="spotlightPoster" style="background-image:url(\'' + imgUrl + '\');">';
-
-        html += '<div class="spotlightContentInner">';
-        html += '<p>' + LibraryBrowser.getMiscInfoHtml(item) + '</p>';
-        html += '<p>' + (item.Overview || '') + '</p>';
-        html += '</div>';
-
-        html += '</div>';
-        html += '</div>';
-
-        if (nextUp && nextUp.ImageTags && nextUp.ImageTags.Primary) {
-
-            html += '<div class="spotlightContent rightSpotlightContent">';
-
-            imgUrl = ApiClient.getImageUrl(nextUp.Id, {
-                type: "Primary",
-                tag: nextUp.ImageTags.Primary,
-                EnableImageEnhancers: false
-            });
-
-            html += '<div class="spotlightPoster" style="background-image:url(\'' + imgUrl + '\');">';
-
-            html += '<div class="spotlightContentInner">';
-            html += LibraryBrowser.getPosterViewDisplayName(nextUp);
-            html += '</div>';
-
-            html += '</div>';
-            html += '</div>';
-        }
-
-        html += '</div>';
-
-        html += '<div class="spotlightPlaceHolder"></div>';
-
-        $(elem).html(html);
-    }
-
-    function reloadSpotlight(page, allPromise) {
-
-        var options = {
-
-            SortBy: "Random",
-            SortOrder: "Descending",
-            Limit: 1,
-            Recursive: true,
-            IncludeItemTypes: "Series",
-            ImageTypes: "Backdrop,Primary",
-            Fields: "Overview"
-        };
-
-        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
-
-            allPromise.done(function () {
-
-                var index = 0;
-                $('.spotlightContainer', page).each(function () {
-
-                    var elem = this;
-                    var item = result.Items[index];
-                    index++;
-
-                    if (item && item.Type == 'Series') {
-
-                        options = {
-
-                            Limit: 1,
-                            UserId: Dashboard.getCurrentUserId(),
-                            SeriesId: item.Id
-                        };
-
-                        ApiClient.getNextUpEpisodes(options).done(function (nextUpResult) {
-
-                            fillSeriesSpotlight(elem, item, nextUpResult.Items[0]);
-                        });
-
-                    } else {
-                        $(this).hide();
-                    }
-
-                });
-
-            });
-        });
-    }
-
     function createMediaLinks(options) {
 
         var html = "";
 
         var items = options.items;
 
-        console.log("options", options);
-
         // "My Library" backgrounds
         for (var i = 0, length = items.length; i < length; i++) {
 
             var item = items[i];
-            var background = "#333";
-            var backgroundSize = "45px 45px";
-            var backgroundPosition = "20px center";
+
+            var imgUrl;
 
             switch (item.CollectionType) {
                 case "movies":
@@ -129,6 +23,7 @@
                 case "photos":
                     imgUrl = "css/images/items/folders/photos.png";
                     break;
+                case "livetv":
                 case "tvshows":
                     imgUrl = "css/images/items/folders/tv.png";
                     break;
@@ -144,6 +39,9 @@
                 case "musicvideos":
                     imgUrl = "css/images/items/folders/musicvideos.png";
                     break;
+                case "channels":
+                    imgUrl = "css/images/items/folders/channels.png";
+                    break;
                 case "boxsets":
                 default:
                     imgUrl = "css/images/items/folders/folder.png";
@@ -153,11 +51,13 @@
             var cssClass = "posterItem";
             cssClass += ' ' + options.shape + 'PosterItem';
 
-            var mediaSourceCount = item.MediaSourceCount || 1;
+            if (item.CollectionType) {
+                cssClass += ' ' + item.CollectionType + 'PosterItem';
+            }
 
-            var href = options.linkItem === false ? '#' : LibraryBrowser.getHref(item, options.context);
+            var href = item.url || LibraryBrowser.getHref(item, options.context);
 
-            html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" data-mediasourcecount="' + mediaSourceCount + '" href="' + href + '">';
+            html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
 
             var style = "";
 
@@ -170,31 +70,19 @@
             html += '<div class="' + imageCssClass + '" style="' + style + '">';
             html += '</div>';
 
-            var name = LibraryBrowser.getPosterViewDisplayName(item, options.displayAsSpecial);
-
             if (options.showTitle) {
                 html += "<div class='posterItemDefaultText'>";
-                html += name;
+                html += item.Name;
                 html += "</div>";
             }
 
-            cssClass = options.centerText ? "posterItemText posterItemTextCentered" : "posterItemText";
-
             html += "</a>";
         }
 
-        console.log("html", html);
-
         return html;
     }
 
-    $(document).on('pagebeforeshow', "#indexPage", function () {
-
-        var screenWidth = $(window).width();
-
-        var page = this;
-
-        $('.spotlightContainer', page).empty();
+    function refreshMediaLibrary(page) {
 
         var options = {
 
@@ -202,7 +90,46 @@
             Fields: "PrimaryImageAspectRatio"
         };
 
-        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+        var userId = Dashboard.getCurrentUserId();
+
+        var promise1 = ApiClient.getItems(userId, options);
+        
+        var promise2 = ApiClient.getLiveTvInfo();
+
+        var promise3 = $.getJSON(ApiClient.getUrl("Channels", {
+            userId: userId,
+
+            // We just want the total record count
+            limit: 0
+        }));
+
+        $.when(promise1, promise2, promise3).done(function(r1, r2, r3) {
+
+            var result = r1[0];
+            var liveTvInfo = r2[0];
+            var channelResponse = r3[0];
+
+            if (channelResponse.TotalRecordCount) {
+
+                result.Items.push({
+                    Name: 'Channels',
+                    CollectionType: 'channels',
+                    Id: 'channels',
+                    url: 'channels.html'
+                });
+            }
+
+            var showLiveTv = liveTvInfo.EnabledUsers.indexOf(userId) != -1;
+
+            if (showLiveTv) {
+                
+                result.Items.push({
+                    Name: 'Live TV',
+                    CollectionType: 'livetv',
+                    Id: 'livetv',
+                    url: 'livetvsuggested.html'
+                });
+            }
 
             $('.myLibrary', page).html(createMediaLinks({
                 items: result.Items,
@@ -211,10 +138,18 @@
                 centerText: true
 
             }));
-
         });
+    }
 
-        options = {
+    $(document).on('pagebeforeshow', "#indexPage", function () {
+
+        var screenWidth = $(window).width();
+
+        var page = this;
+
+        refreshMediaLibrary(page);
+
+        var options = {
 
             SortBy: "DatePlayed",
             SortOrder: "Descending",
diff --git a/dashboard-ui/tvshows.html b/dashboard-ui/tvshows.html
index 5f6edfe17d..fd515b52db 100644
--- a/dashboard-ui/tvshows.html
+++ b/dashboard-ui/tvshows.html
@@ -4,7 +4,7 @@
     <title>${TitleMediaBrowser}</title>
 </head>
 <body>
-    <div id="tvShowsPage" data-role="page" class="page libraryPage backdropPage" data-theme="b" data-view="tv" data-backdroptype="series">
+    <div id="tvShowsPage" data-role="page" class="page libraryPage" data-theme="b" data-view="tv">
         <div class="libraryViewNav scopedLibraryViewNav">
             <a href="tvrecommended.html">${TabSuggested}</a>
             <a href="tvlatest.html">${TabLatest}</a>