diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
index 5fa92725d..313e898d2 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.176",
-  "_release": "1.4.176",
+  "version": "1.4.177",
+  "_release": "1.4.177",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.176",
-    "commit": "a69a071e40e18eb0f20b800f27de8f1c62c38fec"
+    "tag": "1.4.177",
+    "commit": "be084e7c414a4cd619a6b801fa953f12c729ff03"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",
diff --git a/dashboard-ui/bower_components/emby-webcomponents/focusmanager.js b/dashboard-ui/bower_components/emby-webcomponents/focusmanager.js
index e5370a478..9e0c02707 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/focusmanager.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/focusmanager.js
@@ -171,8 +171,6 @@ define(['dom'], function (dom) {
     function getWindowData(win, documentElement) {
 
         return {
-            pageYOffset: win.pageYOffset,
-            pageXOffset: win.pageXOffset,
             clientTop: documentElement.clientTop,
             clientLeft: documentElement.clientLeft
         };
@@ -180,16 +178,25 @@ define(['dom'], function (dom) {
 
     function getOffset(elem, windowData) {
 
-        var box = { top: 0, left: 0 };
+        var box;
 
         // Support: BlackBerry 5, iOS 3 (original iPhone)
         // If we don't have gBCR, just use 0,0 rather than error
         if (elem.getBoundingClientRect) {
             box = elem.getBoundingClientRect();
+        } else {
+            box = {
+                top: 0,
+                left: 0,
+                width: 0,
+                height: 0
+            };
         }
         return {
-            top: box.top + windowData.pageYOffset - windowData.clientTop,
-            left: box.left + windowData.pageXOffset - windowData.clientLeft
+            top: box.top - windowData.clientTop,
+            left: box.left - windowData.clientLeft,
+            width: box.width,
+            height: box.height
         };
     }
 
@@ -197,11 +204,13 @@ define(['dom'], function (dom) {
 
         var offset = getOffset(elem, windowData);
 
-        var posY = offset.top - windowData.pageYOffset;
-        var posX = offset.left - windowData.pageXOffset;
+        var posY = offset.top;
+        var posX = offset.left;
 
-        var width = elem.offsetWidth;
-        var height = elem.offsetHeight;
+        var width = offset.width;
+        var height = offset.height;
+        //var width = elem.offsetWidth;
+        //var height = elem.offsetHeight;
 
         return {
             left: posX,
diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js
index e9567d853..c9012b9cd 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js
@@ -407,8 +407,7 @@
             // Normally we'd want to just let responsive css handle this,
             // but since mobile browsers are often underpowered, 
             // it can help performance to get them out of the markup
-            var showIndicators = window.innerWidth >= 800;
-            showIndicators = false;
+            var showIndicators = false;
 
             var options = {
                 showHdIcon: showIndicators,
diff --git a/dashboard-ui/bower_components/emby-webcomponents/router.js b/dashboard-ui/bower_components/emby-webcomponents/router.js
index 1c5a8f949..3fac504c0 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/router.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/router.js
@@ -557,18 +557,33 @@ define(['loading', 'viewManager', 'skinManager', 'pluginManager', 'backdrop', 'b
         return allRoutes;
     }
 
+    var backdropContainer;
+    var backgroundContainer;
     function setTransparency(level) {
 
+        if (!backdropContainer) {
+            backdropContainer = document.querySelector('.backdropContainer');
+        }
+        if (!backgroundContainer) {
+            backgroundContainer = document.querySelector('.backgroundContainer');
+        }
+
         if (level == 'full' || level == Emby.TransparencyLevel.Full) {
             backdrop.clear(true);
             document.documentElement.classList.add('transparentDocument');
+            backgroundContainer.classList.add('backgroundContainer-transparent');
+            backdropContainer.classList.add('hide');
         }
         else if (level == 'backdrop' || level == Emby.TransparencyLevel.Backdrop) {
             backdrop.externalBackdrop(true);
             document.documentElement.classList.add('transparentDocument');
+            backgroundContainer.classList.add('backgroundContainer-transparent');
+            backdropContainer.classList.add('hide');
         } else {
             backdrop.externalBackdrop(false);
             document.documentElement.classList.remove('transparentDocument');
+            backgroundContainer.classList.remove('backgroundContainer-transparent');
+            backdropContainer.classList.remove('hide');
         }
     }
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/thememediaplayer.js b/dashboard-ui/bower_components/emby-webcomponents/thememediaplayer.js
new file mode 100644
index 000000000..c2099c231
--- /dev/null
+++ b/dashboard-ui/bower_components/emby-webcomponents/thememediaplayer.js
@@ -0,0 +1,100 @@
+define(['playbackManager', 'browser'], function (playbackManager, browser) {
+
+    var currentOwnerId;
+    var currentThemeIds = [];
+
+    function playThemeMedia(items, ownerId) {
+
+        if (items.length) {
+
+            // Stop if a theme song from another ownerId
+            // Leave it alone if anything else (e.g user playing a movie)
+            if (!currentOwnerId && playbackManager.isPlaying()) {
+                return;
+            }
+
+            currentThemeIds = items.map(function (i) {
+                return i.Id;
+            });
+
+            currentOwnerId = ownerId;
+
+            if (enabled(items[0].MediaType)) {
+                playbackManager.play({
+                    items: items,
+                    fullscreen: false
+                });
+            }
+
+        } else {
+
+            if (currentOwnerId) {
+                playbackManager.stop();
+            }
+
+            currentOwnerId = null;
+        }
+    }
+
+    function enabled(mediaType) {
+
+        if (mediaType == 'Video') {
+            // too slow
+            if (browser.slow) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    function loadThemeMedia(item) {
+
+        require(['connectionManager'], function (connectionManager) {
+
+            var apiClient = connectionManager.currentApiClient();
+            apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) {
+
+                var ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId;
+
+                if (ownerId != currentOwnerId) {
+
+                    var items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items;
+
+                    playThemeMedia(items, ownerId);
+                }
+            });
+
+        });
+    }
+
+    document.addEventListener('viewshow', function (e) {
+
+        var state = e.detail.state || {};
+        var item = state.item;
+
+        if (item) {
+            loadThemeMedia(item);
+            return;
+        }
+
+        var viewOptions = e.detail.options || {};
+
+        if (viewOptions.supportsThemeMedia) {
+            // Do nothing here, allow it to keep playing
+        }
+        else {
+            playThemeMedia([], null);
+        }
+
+    }, true);
+
+    //Events.on(Emby.PlaybackManager, 'playbackstart', function (e, player) {
+    //    var item = Emby.PlaybackManager.currentItem(player);
+    //    // User played something manually
+    //    if (currentThemeIds.indexOf(item.Id) == -1) {
+    //        currentOwnerId = null;
+    //    }
+    //});
+
+});
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/emby-webcomponents/viewmanager/viewcontainer-lite.js b/dashboard-ui/bower_components/emby-webcomponents/viewmanager/viewcontainer-lite.js
index 35113f2fc..ca3b6ffb7 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/viewmanager/viewcontainer-lite.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/viewmanager/viewcontainer-lite.js
@@ -8,6 +8,10 @@ define(['browser', 'css!./viewcontainer-lite'], function (browser) {
 
     function enableAnimation() {
 
+        if (browser.animate) {
+            return true;
+        }
+
         if (browser.tv) {
             return false;
         }
@@ -261,7 +265,7 @@ define(['browser', 'css!./viewcontainer-lite'], function (browser) {
         selectedPageIndex = -1;
     }
 
-    if (enableAnimation() && !browser.animate) {
+    if (enableAnimation()) {
         require(['webAnimations']);
     }
 
diff --git a/dashboard-ui/bower_components/polymer/.bower.json b/dashboard-ui/bower_components/polymer/.bower.json
index a96f0f050..25eb84c03 100644
--- a/dashboard-ui/bower_components/polymer/.bower.json
+++ b/dashboard-ui/bower_components/polymer/.bower.json
@@ -32,14 +32,14 @@
     "iron-component-page": "polymerElements/iron-component-page#^1.1.6"
   },
   "private": true,
-  "homepage": "https://github.com/Polymer/polymer",
+  "homepage": "https://github.com/polymer/polymer",
   "_release": "1.6.1",
   "_resolution": {
     "type": "version",
     "tag": "v1.6.1",
     "commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
   },
-  "_source": "git://github.com/Polymer/polymer.git",
+  "_source": "git://github.com/polymer/polymer.git",
   "_target": "^1.1.0",
-  "_originalSource": "Polymer/polymer"
+  "_originalSource": "polymer/polymer"
 }
\ No newline at end of file
diff --git a/dashboard-ui/components/appfooter/appfooter.css b/dashboard-ui/components/appfooter/appfooter.css
index b7013c80a..df73af993 100644
--- a/dashboard-ui/components/appfooter/appfooter.css
+++ b/dashboard-ui/components/appfooter/appfooter.css
@@ -1,5 +1,6 @@
 .appfooter {
     background: #1c1c1c;
+    /*background: #222326;*/
     position: fixed;
     left: 0;
     right: 0;
@@ -8,6 +9,6 @@
     transition: transform 180ms linear;
 }
 
-.appfooter.headroom--unpinned {
-    transform: translateY(100%);
-}
\ No newline at end of file
+    .appfooter.headroom--unpinned {
+        transform: translateY(100%);
+    }
diff --git a/dashboard-ui/components/favoriteitems.js b/dashboard-ui/components/favoriteitems.js
index b59e44442..c730e3693 100644
--- a/dashboard-ui/components/favoriteitems.js
+++ b/dashboard-ui/components/favoriteitems.js
@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
+define(['libraryBrowser', 'cardBuilder', 'dom', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder, dom) {
 
     function enableScrollX() {
         return browserInfo.mobile && AppInfo.enableAppLayouts;
@@ -31,7 +31,7 @@
 
     function loadSection(elem, userId, topParentId, section, isSingleSection) {
 
-        var screenWidth = window.innerWidth;
+        var screenWidth = dom.getWindowSize().innerWidth;
 
        var options = {
 
             SortBy: "SortName",
diff --git a/dashboard-ui/scripts/livetvrecordinglist.js b/dashboard-ui/scripts/livetvrecordinglist.js
index 18145421d..498a96364 100644
--- a/dashboard-ui/scripts/livetvrecordinglist.js
+++ b/dashboard-ui/scripts/livetvrecordinglist.js
@@ -1,4 +1,4 @@
-define(['jQuery', 'cardBuilder'], function ($, cardBuilder) {
+define(['jQuery', 'cardBuilder', 'dom'], function ($, cardBuilder, dom) {
 
     // The base query options
     var query = {
@@ -29,7 +29,7 @@
 
             updateFilterControls();
 
-            var screenWidth = window.innerWidth;
+            var screenWidth = dom.getWindowSize().innerWidth;
 
             html += cardBuilder.getCardsHtml({
 
diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js
index 7fc741957..8723b1f5f 100644
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
+define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'dom', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, categorysyncbuttons, cardBuilder, dom) {
 
     function enableScrollX() {
         return browserInfo.mobile && AppInfo.enableAppLayouts;
@@ -42,7 +42,7 @@
 
     function loadResume(page, userId, parentId) {
 
-        var screenWidth = window.innerWidth;
+        var screenWidth = dom.getWindowSize().innerWidth;
 
         var options = {
 
@@ -134,7 +134,7 @@
 
     function loadSuggestions(page, userId, parentId) {
 
-        var screenWidth = window.innerWidth;
+        var screenWidth = dom.getWindowSize().innerWidth;
 
         var url = ApiClient.getUrl("Movies/Recommendations", {
 
diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js
index 62e36901f..f18ebfa09 100644
--- a/dashboard-ui/scripts/musicrecommended.js
+++ b/dashboard-ui/scripts/musicrecommended.js
@@ -1,8 +1,8 @@
-define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, cardBuilder) {
+define(['libraryBrowser', 'cardBuilder', 'dom', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, cardBuilder, dom) {
 
     function itemsPerRow() {
 
-        var screenWidth = window.innerWidth;
+        var screenWidth = dom.getWindowSize().innerWidth;
 
         return screenWidth >= 1920 ? 9 : (screenWidth >= 1200 ? 12 : (screenWidth >= 1000 ? 10 : 8));
     }
diff --git a/dashboard-ui/scripts/sections.js b/dashboard-ui/scripts/sections.js
index 6ebb27149..049c063a5 100644
--- a/dashboard-ui/scripts/sections.js
+++ b/dashboard-ui/scripts/sections.js
@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'cardBuilder', 'appSettings', 'components/groupedcards', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (LibraryBrowser, cardBuilder, appSettings, groupedcards) {
+define(['libraryBrowser', 'cardBuilder', 'appSettings', 'components/groupedcards', 'dom', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder, appSettings, groupedcards, dom) {
 
     function getUserViews(userId) {
 
@@ -95,7 +95,7 @@
                 cssClass += ' ' + item.CollectionType + 'buttonCard';
             }
 
-            var href = item.url || LibraryBrowser.getHref(item);
+            var href = item.url || libraryBrowser.getHref(item);
             var onclick = item.onclick ? ' onclick="' + item.onclick + '"' : '';
 
             icon = item.icon || icon;
@@ -402,7 +402,7 @@
 
     function loadLatestChannelMedia(elem, userId) {
 
-        var screenWidth = window.innerWidth;
+        var screenWidth = dom.getWindowSize().innerWidth;
 
         var options = {
 
@@ -451,7 +451,7 @@
 
             if (items.length) {
 
-                var screenWidth = window.innerWidth;
+                var screenWidth = dom.getWindowSize().innerWidth;
 
                 html += '<div>';
                 html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
@@ -495,7 +495,7 @@
 
     function loadResume(elem, userId) {
 
-        var screenWidth = window.innerWidth;
+        var screenWidth = dom.getWindowSize().innerWidth;
 
         var options = {
 
@@ -621,7 +621,7 @@
 
     function loadLatestChannelItemsFromChannel(page, channel, index) {
 
-        var screenWidth = window.innerWidth;
+        var screenWidth = dom.getWindowSize().innerWidth;
 
         var options = {