diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index cd8a0567ec..f1b17ec04d 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -64,6 +64,41 @@
     display: none;
 }
 
+
+.detailPageContent .ui-collapsible-content {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.galleryImageContainer {
+    display: inline-block;
+    margin: 5px;
+}
+
+    .galleryImageContainer:hover {
+        -moz-box-shadow: 0 0 20px 3px #2572EB;
+        -webkit-box-shadow: 0 0 20px 3px #2572EB;
+        box-shadow: 0 0 20px 3px #2572EB;
+    }
+
+.galleryImage {
+    width: 120px;
+}
+
+@media all and (min-width: 750px) {
+
+    .galleryImage {
+        width: 150px;
+    }
+}
+
+@media all and (min-width: 1200px) {
+
+    .galleryImage {
+        width: 180px;
+    }
+}
+
 @media all and (min-width: 650px) {
     .libraryPage .ui-content {
         padding: 10px 20px 100px;
@@ -87,12 +122,18 @@
         padding-left: 20px;
         padding-right: 20px;
     }
+
+    .detailPageContent .ui-collapsible-content {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
 }
 
 @media all and (min-width: 1000px) {
     .detailPageContent {
         width: 90%;
         margin: 0 auto;
+        max-width: 1200px;
     }
 
     .ehsContent {
@@ -110,8 +151,7 @@
 @media all and (min-width: 1440px) {
 
     .detailPageContent {
-        width: 70%;
-        max-width: 1200px;
+        width: 1200px;
     }
 
     .ehsContent {
@@ -243,6 +283,7 @@
     border: 1px solid #666;
     border-radius: 0;
     width: 100px;
+    margin-right: 5px;
 }
 
     /* Polyfill */
@@ -293,10 +334,27 @@
     vertical-align: top;
     position: relative;
     top: 3px;
+}
+
+.userDataIcons .itemProgressText {
+    vertical-align: top;
+    position: relative;
+    top: 3px;
     margin-right: 1em;
 }
 
 .tileItem .itemProgressBar {
     top: 2px;
     width: 40px;
+    margin-right: 1em;
+}
+
+.itemProgressText {
+    font-size: 12px;
+    color: #bbb;
+    vertical-align: middle;
+}
+
+.tileItem .itemProgressText {
+    display: none;
 }
diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css
index 09823ccfa2..39741b5e53 100644
--- a/dashboard-ui/css/posteritem.css
+++ b/dashboard-ui/css/posteritem.css
@@ -101,18 +101,11 @@
     height: 150px;
 }
 
-
-.posterItemProgress {
-    font-size: 12px;
-    color: #bbb;
-    vertical-align: middle;
+.posterItemProgress .itemProgressBar {
+    height: 12px;
+    width: 35%;
 }
 
-    .posterItemProgress .itemProgressBar {
-        height: 12px;
-        width: 35%;
-    }
-
 .portraitPosterItem .itemProgressText {
     display: none;
 }
@@ -121,11 +114,6 @@
     width: 100%;
 }
 
-.posterItem .itemProgressText {
-    margin-left: 5px;
-    vertical-align: middle;
-}
-
 @media all and (min-width: 650px) {
 
     .backdropPosterItem {
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index 857fe87f04..97766f0412 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -684,12 +684,6 @@ progress {
     background-size: cover;
 }
 
-.galleryImage {
-    width: 120px;
-    display: inline-block;
-    margin: 5px;
-}
-
 .halfStarRating {
     background-position: center center;
 }
@@ -724,10 +718,6 @@ progress {
         width: 57%;
         padding-left: 20px;
     }
-
-    .galleryImage {
-        width: 150px;
-    }
 }
 
 @media all and (min-width: 750px) {
@@ -748,14 +738,6 @@ progress {
     }
 }
 
-
-@media all and (min-width: 1200px) {
-
-    .galleryImage {
-        width: 200px;
-    }
-}
-
 @media all and (min-width: 1440px) {
 
     .itemDetailImage {
@@ -853,8 +835,9 @@ progress {
 
 /* VideoJS overrides */
 #videoWindow.tubecss .vjs-controls {
-	height: 5em!important;
+    height: 5em!important;
 }
+
 #videoWindow.tubecss .vjs-menu-button {
     width: 1.5em;
     border: 0;
@@ -874,35 +857,38 @@ progress {
     background: url("images/media/settings.png");
     height: 16px;
     width: 16px;
-	background-size: cover;
-	opacity: 0.5;
-}
-#videoWindow.tubecss .vjs-menu-button.vjs-quality-button div:hover {
-	opacity: 1.0;
+    background-size: cover;
+    opacity: 0.5;
 }
 
+    #videoWindow.tubecss .vjs-menu-button.vjs-quality-button div:hover {
+        opacity: 1.0;
+    }
+
 #videoWindow.tubecss .vjs-chapter-button div {
     background: url("images/media/chapter.png");
     height: 16px;
     width: 16px;
-	background-size: cover;
-	opacity: 0.5;
-}
-#videoWindow.tubecss .vjs-chapter-button div:hover {
-	opacity: 1.0;
+    background-size: cover;
+    opacity: 0.5;
 }
+
+    #videoWindow.tubecss .vjs-chapter-button div:hover {
+        opacity: 1.0;
+    }
+
 .vjs-chapter-button.vjs-menu-button ul {
     width: auto;
     max-width: 25em;
     overflow-y: scroll;
 }
 
-.vjs-chapter-button.vjs-menu-button ul li {
-    width: auto;
-    white-space: nowrap;
-    font-size: 1.1em;
-    padding-right: 10px;
-}
+    .vjs-chapter-button.vjs-menu-button ul li {
+        width: auto;
+        white-space: nowrap;
+        font-size: 1.1em;
+        padding-right: 10px;
+    }
 
 #videoWindow.tubecss .vjs-menu-button.vjs-stop-button {
     float: left;
@@ -911,16 +897,18 @@ progress {
     width: 2.5em;
 }
 
-#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div {
-    background: url("images/media/stop.png");
-    height: 26px;
-    width: 26px;
-    margin: -.7em .5em auto 0;
-	opacity: 0.5;
-}
-#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div:hover {
-	opacity: 1.0;
-}
+    #videoWindow.tubecss .vjs-menu-button.vjs-stop-button div {
+        background: url("images/media/stop.png");
+        height: 26px;
+        width: 26px;
+        margin: -.7em .5em auto 0;
+        opacity: 0.5;
+    }
+
+        #videoWindow.tubecss .vjs-menu-button.vjs-stop-button div:hover {
+            opacity: 1.0;
+        }
+
 .vjs-subtitle-button div {
     background-position: -25px -75px !important;
 }
@@ -931,64 +919,72 @@ progress {
     overflow-y: scroll;
 }
 
-.vjs-subtitle-button.vjs-menu-button ul li {
-    width: auto;
-    white-space: nowrap;
-    font-size: 1.1em;
-    padding-right: 10px;
-}
+    .vjs-subtitle-button.vjs-menu-button ul li {
+        width: auto;
+        white-space: nowrap;
+        font-size: 1.1em;
+        padding-right: 10px;
+    }
 
 #videoWindow.tubecss .vjs-menu-button.vjs-language-button div {
     background: url("images/media/language.png") !important;
     height: 16px;
     width: 16px;
-	background-size: cover;
-	opacity: 0.5;
-}
-#videoWindow.tubecss .vjs-menu-button.vjs-language-button div:hover {
-	opacity: 1.0;
+    background-size: cover;
+    opacity: 0.5;
 }
+
+    #videoWindow.tubecss .vjs-menu-button.vjs-language-button div:hover {
+        opacity: 1.0;
+    }
+
 .vjs-language-button.vjs-menu-button ul {
     width: auto;
     max-width: 25em;
     overflow-y: scroll;
 }
 
-.vjs-language-button.vjs-menu-button ul li {
-    width: auto;
-    white-space: nowrap;
-    font-size: 1.1em;
-    padding-right: 10px;
-}
+    .vjs-language-button.vjs-menu-button ul li {
+        width: auto;
+        white-space: nowrap;
+        font-size: 1.1em;
+        padding-right: 10px;
+    }
 
 
 #videoWindow.tubecss .vjs-mute-control {
-	position: absolute;
-	bottom: 0;
+    position: absolute;
+    bottom: 0;
 }
+
 #videoWindow.tubecss .vjs-volume-control {
-	position: absolute;
-	bottom: 0;
-	top: auto;
-	left: 4em;
+    position: absolute;
+    bottom: 0;
+    top: auto;
+    left: 4em;
 }
+
 #videoWindow.tubecss .vjs-time-controls, #videoWindow.tubecss .vjs-time-divider {
-	position: absolute;
-	bottom: 0;
-	top: auto;
-	height: auto;
-	width: 0px;
+    position: absolute;
+    bottom: 0;
+    top: auto;
+    height: auto;
+    width: 0px;
 }
+
 #videoWindow.tubecss .vjs-time-divider {
-	bottom: 0.4em;
-	left: 25.3em;
+    bottom: 0.4em;
+    left: 25.3em;
 }
+
 #videoWindow.tubecss .vjs-menu-item {
-	font-size: 1em;
+    font-size: 1em;
 }
+
 #videoWindow.tubecss .vjs-current-time {
-	left: 26em;
+    left: 26em;
 }
+
 #videoWindow.tubecss .vjs-duration {
-	left: 22.5em;
-}
\ No newline at end of file
+    left: 22.5em;
+}
diff --git a/dashboard-ui/css/tileitem.css b/dashboard-ui/css/tileitem.css
index c00673b6cd..36e906b22e 100644
--- a/dashboard-ui/css/tileitem.css
+++ b/dashboard-ui/css/tileitem.css
@@ -66,6 +66,19 @@
     width: 65%;
 }
 
+.smallPosterTileItem .tileImage {
+    height: 125px;
+    width: 30%;
+}
+
+.smallPosterTileItem .tileContent {
+    width: 65%;
+}
+
+.smallPosterTileItem .tileName {
+    font-weight: normal;
+}
+
 .squareTileItem .tileImage {
     height: 100px;
     width: 35%;
@@ -91,25 +104,38 @@
     width: 18px;
 }
 
+@media all and (min-width: 600px) {
+
+
+    .smallPosterTileItem {
+        width: 270px;
+        display: inline-block;
+        margin: 3px;
+    }
+}
+
 @media all and (min-width: 750px) {
     .tileItem {
-        width: 46%;
         display: inline-block;
         margin-left: 3px;
         margin-right: 3px;
     }
 
-    .backdropTileItem .tileImage {
-        height: 88px;
+    .backdropTileItem, .posterTileItem, .squareTileItem {
+        width: 46%;
     }
 
-    .posterTileItem .tileImage {
-        height: 120px;
-    }
+        .backdropTileItem .tileImage {
+            height: 88px;
+        }
 
-    .squareTileItem .tileImage {
-        height: 115px;
-    }
+        .posterTileItem .tileImage {
+            height: 120px;
+        }
+
+        .squareTileItem .tileImage {
+            height: 115px;
+        }
 }
 
 @media all and (min-width: 850px) {
@@ -136,7 +162,7 @@
 }
 
 @media all and (min-width: 1000px) {
-    .tileItem {
+    .backdropTileItem, .posterTileItem, .squareTileItem {
         width: 47.5%;
     }
 
@@ -170,13 +196,13 @@
         height: 160px;
     }
 
-    .tileItem {
+    .backdropTileItem, .posterTileItem, .squareTileItem {
         width: 31.5%;
     }
 
-    .squareTileItem .tileImage {
-        height: 130px;
-    }
+        .squareTileItem .tileImage {
+            height: 130px;
+        }
 }
 
 @media all and (min-width: 1440px) {
@@ -188,13 +214,13 @@
         height: 150px;
     }
 
-    .tileItem {
+    .backdropTileItem, .squareTileItem {
         width: 31.5%;
     }
 
-    .squareTileItem .tileImage {
-        height: 155px;
-    }
+        .squareTileItem .tileImage {
+            height: 155px;
+        }
 
     .posterTileItem {
         width: 23.5%;
@@ -211,7 +237,7 @@
         height: 170px;
     }
 
-    .tileItem {
+    .backdropTileItem {
         width: 32%;
     }
 
@@ -230,7 +256,7 @@
 
 
 @media all and (min-width: 1920px) {
-    .tileItem {
+    .backdropTileItem {
         width: 31.5%;
     }
 
@@ -256,7 +282,7 @@
 }
 
 @media all and (min-width: 2000px) {
-    .tileItem {
+    .backdropTileItem {
         width: 23.5%;
     }
 
@@ -282,7 +308,7 @@
 }
 
 @media all and (min-width: 2200px) {
-    .tileItem {
+    .backdropTileItem {
         width: 24%;
     }
 
@@ -308,7 +334,7 @@
 }
 
 @media all and (min-width: 2540px) {
-    .tileItem {
+    .backdropTileItem {
         width: 18.75%;
     }
 
diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js
index ec1fb09a20..7d8790fd8e 100644
--- a/dashboard-ui/scripts/Itemdetailpage.js
+++ b/dashboard-ui/scripts/Itemdetailpage.js
@@ -278,7 +278,11 @@
 
             } else {
 
-                var shape = "poster";
+                var shape = "smallPoster";
+                
+                if (item.Type == "Season") {
+                    shape = "smallBackdrop";
+                }
 
                 var html = LibraryBrowser.getPosterDetailViewHtml({
                     items: result.Items,
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 4fae189e14..186a87c1a4 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -535,9 +535,9 @@
                 }
 
                 if (options.showProgressBar) {
-                    
+
                     html += "<div class='posterItemText posterItemProgress'>";
-                    html += LibraryBrowser.getItemProgressBarHtml(item, true) || "&nbsp;";
+                    html += LibraryBrowser.getItemProgressBarHtml(item) || "&nbsp;";
                     html += "</div>";
                 }
 
@@ -563,7 +563,7 @@
                 var date = item.DateCreated;
 
                 try {
-                    if (date && (new Date().getTime() - parseISO8601Date(date).getTime()) < 1209600000) {
+                    if (date && (new Date().getTime() - parseISO8601Date(date).getTime()) < 864000000) {
                         return "<div class='posterRibbon'>New</div>";
                     }
                 } catch (err) {
@@ -792,7 +792,7 @@
             return html;
         },
 
-        getItemProgressBarHtml: function (item, showProgressText) {
+        getItemProgressBarHtml: function (item) {
 
             var html = '';
 
@@ -801,7 +801,13 @@
 
             if (item.PlayedPercentage) {
 
-                tooltip = Math.round(item.PlayedPercentage) + '% played';
+                tooltip = Math.round(item.PlayedPercentage) + '% ';
+
+                if (item.Type == "Series" || item.Type == "Season" || item.Type == "BoxSet") {
+                    tooltip += "watched";
+                } else {
+                    tooltip += "played";
+                }
 
                 pct = item.PlayedPercentage;
             }
@@ -817,9 +823,7 @@
                 html += '<progress title="' + tooltip + '" class="itemProgressBar" min="0" max="100" value="' + pct + '">';
                 html += '</progress>';
 
-                if (showProgressText) {
-                    html += '<span class="itemProgressText">' + tooltip + '</span>';
-                }
+                html += '<span class="itemProgressText">' + tooltip + '</span>';
             }
 
             return html;
@@ -1483,7 +1487,7 @@
 
             if (typeof (index) == "undefined") index = 0;
 
-            html += '<div class="posterViewItem" style="padding-bottom:0px;">';
+            html += '<div class="galleryImageContainer">';
             html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
             html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
                 maxwidth: lightboxWidth,
@@ -1510,28 +1514,35 @@
 
             var role = cast.Role || cast.Type;
 
-            html += '<a href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">';
-            html += '<div class="posterViewItem posterViewItemWithDualText">';
+            html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">';
+
+            var imgUrl;
 
             if (cast.PrimaryImageTag) {
 
-                var imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
+                imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
                     width: 185,
                     tag: cast.PrimaryImageTag,
                     type: "primary"
                 });
 
-                html += '<img src="' + imgUrl + '" />';
             } else {
-                var style = "background-color:" + defaultBackground + ";";
 
-                html += '<img src="css/images/items/list/person.png" style="max-width:185px; ' + style + '"/>';
+                imgUrl = "css/images/items/list/person.png";
             }
 
-            html += '<div class="posterViewItemText posterViewItemPrimaryText">' + cast.Name + '</div>';
-            html += '<div class="posterViewItemText">' + role + '</div>';
+            html += '<div class="tileImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
 
-            html += '</div></a>';
+
+
+            html += '<div class="tileContent">';
+
+            html += '<p>' + cast.Name + '</p>';
+            html += '<p>' + (cast.Role || cast.Type) + '</p>';
+
+            html += '</div>';
+
+            html += '</a>';
 
             return html;
         }