diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
index fc5bccd0fc..c6607bea55 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
@@ -315,100 +315,100 @@
     background-color: #F57F17;
 }
 
-.scalableCard.bannerCard {
+.bannerCard-scalable {
     width: 100%;
 }
 
-.scalableCard.backdropCard {
+.backdropCard-scalable {
     width: 100%;
 }
 
-.scalableCard.smallBackdropCard {
+.smallBackdropCard-scalable {
     width: 50%;
 }
 
-.scalableCard.squareCard {
+.squareCard-scalable {
     width: 50%;
 }
 
-.scalableCard.portraitCard {
+.portraitCard-scalable {
     width: 33.333333333333333333333333333333%;
 }
 
-.scalableCard.overflowPortraitCard {
+.overflowPortraitCard-scalable {
     width: 40%;
     max-width: 200px;
 }
 
-.scalableCard.overflowBackdropCard {
+.overflowBackdropCard-scalable {
     width: 84%;
     max-width: 400px;
 }
 
-.scalableCard.overflowSquareCard {
+.overflowSquareCard-scalable {
     width: 42%;
 }
 
 @media all and (min-width: 420px) {
 
-    .scalableCard.backdropCard {
+    .backdropCard-scalable {
         width: 50%;
     }
 }
 
 @media all and (min-width: 500px) {
 
-    .scalableCard.smallBackdropCard {
+    .smallBackdropCard-scalable {
         width: 33.333333333333333333333333333333%;
     }
 
-    .scalableCard.squareCard {
+    .squareCard-scalable {
         width: 33.333333333333333333333333333333%;
     }
 }
 
 @media all and (min-width: 640px) {
 
-    .scalableCard.portraitCard {
+    .portraitCard-scalable {
         width: 25%;
     }
 
-    .scalableCard.overflowPortraitCard {
+    .overflowPortraitCard-scalable {
         width: 36%;
     }
 
-    .scalableCard.overflowBackdropCard {
+    .overflowBackdropCard-scalable {
         width: 60%;
     }
 
-    .scalableCard.overflowSquareCard {
+    .overflowSquareCard-scalable {
         width: 30%;
     }
 }
 
 @media all and (min-width: 700px) {
-    .scalableCard.squareCard {
+    .squareCard-scalable {
         width: 25%;
     }
 }
 
 @media all and (min-width: 770px) {
-    .scalableCard.backdropCard {
+    .backdropCard-scalable {
         width: 33.333333333333333333333333333333%;
     }
 }
 
 @media all and (min-width: 800px) {
 
-    .scalableCard.bannerCard {
+    .bannerCard-scalable {
         width: 50%;
     }
 
-    .scalableCard.portraitCard {
+    .portraitCard-scalable {
         width: 20%;
     }
 
-    .scalableCard.smallBackdropCard {
+    .smallBackdropCard-scalable {
         width: 25%;
     }
 }
@@ -416,7 +416,7 @@
 
 @media all and (min-width: 900px) {
 
-    .scalableCard.squareCard {
+    .squareCard-scalable {
         width: 20%;
     }
 }
@@ -424,42 +424,42 @@
 @media all and (min-width: 1000px) {
 
 
-    .scalableCard.smallBackdropCard {
+    .smallBackdropCard-scalable {
         width: 20%;
     }
 
-    .scalableCard.overflowPortraitCard {
+    .overflowPortraitCard-scalable {
         width: 23%;
     }
 
-    .scalableCard.overflowBackdropCard {
+    .overflowBackdropCard-scalable {
         width: 40%;
     }
 
-    .scalableCard.overflowSquareCard {
+    .overflowSquareCard-scalable {
         width: 22%;
     }
 }
 
 @media all and (min-width: 1200px) {
 
-    .scalableCard.backdropCard {
+    .backdropCard-scalable {
         width: 25%;
     }
 
-    .scalableCard.squareCard {
+    .squareCard-scalable {
         width: 16.666666666666666666666666666667%;
     }
 
-    .scalableCard.bannerCard {
+    .bannerCard-scalable {
         width: 33.333333333333333333333333333333%;
     }
 
-    .scalableCard.portraitCard {
+    .portraitCard-scalable {
         width: 16.666666666666666666666666666667%;
     }
 
-    .scalableCard.smallBackdropCard {
+    .smallBackdropCard-scalable {
         width: 16.666666666666666666666666666667%;
     }
 }
@@ -467,15 +467,15 @@
 
 @media all and (min-width: 1400px) {
 
-    .scalableCard.squareCard {
+    .squareCard-scalable {
         width: 14.285714285714285714285714285714%;
     }
 
-    .scalableCard.portraitCard {
+    .portraitCard-scalable {
         width: 14.285714285714285714285714285714%;
     }
 
-    .scalableCard.smallBackdropCard {
+    .smallBackdropCard-scalable {
         width: 14.285714285714285714285714285714%;
     }
 }
@@ -483,71 +483,71 @@
 
 @media all and (min-width: 1600px) {
 
-    .scalableCard.scalableCard.portraitCard {
+    .portraitCard-scalable {
         width: 12.5%;
     }
 
-    .scalableCard.scalableCard.smallBackdropCard {
+    .smallBackdropCard-scalable {
         width: 12.5%;
     }
 }
 
 @media all and (min-width: 1800px) {
 
-    .scalableCard.squareCard {
+    .squareCard-scalable {
         width: 12.5%;
     }
 
-    .scalableCard.smallBackdropCard {
+    .smallBackdropCard-scalable {
         width: 10%;
     }
 }
 
 @media all and (min-width: 2100px) {
 
-    .scalableCard.squareCard {
+    .squareCard-scalable {
         width: 11.111111111111111111111111111111%;
     }
 
-    .scalableCard.backdropCard {
+    .backdropCard-scalable {
         width: 20%;
     }
 
-    .scalableCard.portraitCard {
+    .portraitCard-scalable {
         width: 11.111111111111111111111111111111%;
     }
 }
 
 @media all and (min-width: 2200px) {
 
-    .scalableCard.bannerCard {
+    .bannerCard-scalable {
         width: 25%;
     }
 
-    .scalableCard.portraitCard {
+    .portraitCard-scalable {
         width: 10%;
     }
 }
 
 @media all and (min-width: 2500px) {
 
-    .scalableCard.backdropCard {
+    .backdropCard-scalable {
         width: 16.666666666666666666666666666667%;
     }
 }
 
-.layout-tv .scalableCard.backdropCard {
+.layout-tv .backdropCard-scalable {
     width: 25%;
 }
 
-.layout-tv .scalableCard.squareCard {
+.layout-tv .squareCard-scalable {
     width: 16.66666666666666667%;
 }
 
-.layout-tv .scalableCard.portraitCard {
+.layout-tv .portraitCard-scalable {
     width: 16.66666666666666667%;
 }
 
-.layout-tv .scalableCard.personCard {
+.layout-tv .personCard-scalable {
     width: 14.285714285714285714285714285714%;
 }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
index 2de5a1c4cb..8066fbe670 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
@@ -1014,7 +1014,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
             var scalable = options.scalable !== false;
             if (scalable) {
-                className += " scalableCard";
+                className += " scalableCard " + options.shape + "Card-scalable";
             }
 
             var imgInfo = getCardImageUrl(item, apiClient, options);
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js
index 9e28d9c211..d278748e9e 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js
@@ -19,6 +19,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts', 'layout
         }
 
         className += ' ' + shape + 'Card';
+        className += ' ' + shape + 'Card-scalable';
 
         if (options.block || options.rows) {
             className += ' block';
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js
index dd6d926c9f..656cd6da9e 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js
@@ -51,7 +51,8 @@ define(['imageLoader', 'itemShortcuts', 'connectionManager', 'layoutManager'], f
 
     function buildPersonCard(person, apiClient, serverId, options, className) {
 
-        className += " itemAction scalableCard";
+        className += " itemAction scalableCard personCard-scalable";
+        className += " " + (options.shape || 'portrait') + 'Card-scalable';
 
         var imgUrl = getImgUrl(person, options.width, apiClient);
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-checkbox/emby-checkbox.css b/dashboard-ui/bower_components/emby-webcomponents/emby-checkbox/emby-checkbox.css
index f4a874cf93..7e750a6da8 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-checkbox/emby-checkbox.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-checkbox/emby-checkbox.css
@@ -116,3 +116,7 @@
     display: flex;
     margin: .5em 0;
 }
+
+.checkboxList-paperList {
+    padding: 1em!important;
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js b/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js
index 8884374640..7507987777 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js
@@ -176,13 +176,13 @@
         var cssClass = "card scalableCard";
 
         if (currentItemType == "Episode") {
-            cssClass += " backdropCard";
+            cssClass += " backdropCard backdropCard-scalable";
         }
         else if (currentItemType == "MusicAlbum" || currentItemType == "MusicArtist") {
-            cssClass += " squareCard";
+            cssClass += " squareCard squareCard-scalable";
         }
         else {
-            cssClass += " portraitCard";
+            cssClass += " portraitCard portraitCard-scalable";
         }
 
         html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
diff --git a/dashboard-ui/cinemamodeconfiguration.html b/dashboard-ui/cinemamodeconfiguration.html
index 13bf29fca8..c68d7b64b4 100644
--- a/dashboard-ui/cinemamodeconfiguration.html
+++ b/dashboard-ui/cinemamodeconfiguration.html
@@ -1,4 +1,4 @@
-<div id="cinemaModeConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Cinema-Mode" data-require="dashboard/cinemamodeconfiguration,paper-checkbox,emby-input,emby-button">
+<div id="cinemaModeConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Cinema-Mode" data-require="dashboard/cinemamodeconfiguration,emby-checkbox,emby-input,emby-button">
 
     <div data-role="content">
         <div class="content-primary">
@@ -7,47 +7,67 @@
 
                 <p>${CinemaModeConfigurationHelp}</p>
                 <div style="margin-top: 2em;">
-                    <div class="paperListLabel">${LabelEnableCinemaModeFor}</div>
-                    <div class="paperCheckboxList">
-                        <paper-checkbox class="chkMovies">${OptionMovies}</paper-checkbox>
-                        <paper-checkbox class="chkEpisodes">${OptionEpisodes}</paper-checkbox>
+                    <h3 class="checkboxListLabel">${LabelEnableCinemaModeFor}</h3>
+                    <div class="paperList checkboxList-paperList">
+                        <label>
+                            <input is="emby-checkbox" type="checkbox" class="chkMovies" />
+                            <span>${OptionMovies}</span>
+                        </label>
+                        <label>
+                            <input is="emby-checkbox" type="checkbox" class="chkEpisodes" />
+                            <span>${OptionEpisodes}</span>
+                        </label>
                     </div>
                 </div>
                 <br />
                 <div>
-                    <div class="paperListLabel">${LabelSelectInternetTrailersForCinemaMode}</div>
-                    <div class="paperCheckboxList">
-                        <paper-checkbox class="chkUpcomingTheaterTrailers">${OptionUpcomingMoviesInTheaters}</paper-checkbox>
-                        <paper-checkbox class="chkUpcomingDvdTrailers">${OptionUpcomingDvdMovies}</paper-checkbox>
-                        <paper-checkbox class="chkUpcomingStreamingTrailers">${OptionUpcomingStreamingMovies}</paper-checkbox>
-                        <paper-checkbox class="chkOtherTrailers">${OptionOtherTrailers}</paper-checkbox>
+                    <h3 class="checkboxListLabel">${LabelSelectInternetTrailersForCinemaMode}</h3>
+                    <div class="paperList checkboxList-paperList">
+                        <label>
+                            <input is="emby-checkbox" type="checkbox" class="chkUpcomingTheaterTrailers" />
+                            <span>${OptionUpcomingMoviesInTheaters}</span>
+                        </label>
+                        <label>
+                            <input is="emby-checkbox" type="checkbox" class="chkUpcomingDvdTrailers" />
+                            <span>${OptionUpcomingDvdMovies}</span>
+                        </label>
+                        <label>
+                            <input is="emby-checkbox" type="checkbox" class="chkUpcomingStreamingTrailers" />
+                            <span>${OptionUpcomingStreamingMovies}</span>
+                        </label>
+                        <label>
+                            <input is="emby-checkbox" type="checkbox" class="chkOtherTrailers" />
+                            <span>${OptionOtherTrailers}</span>
+                        </label>
                     </div>
-                    <div class="fieldDescription paperCheckboxFieldDescription"><a class="lnkSupporterLearnMore" href="http://emby.media/premiere" target="_blank">${LabelTheseFeaturesRequireSubscriptionHelpAndTrailers}</a></div>
+                    <div class="fieldDescription"><a class="lnkSupporterLearnMore" href="http://emby.media/premiere" target="_blank">${LabelTheseFeaturesRequireSubscriptionHelpAndTrailers}</a></div>
                 </div>
-                <br />
-                <div>
-                    <paper-checkbox class="chkMyMovieTrailers">${OptionTrailersFromMyMovies}</paper-checkbox>
-                    <div class="fieldDescription paperCheckboxFieldDescription">${OptionTrailersFromMyMoviesHelp}</div>
-                    <div class="fieldDescription paperCheckboxFieldDescription">
+                <br /><br />
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input is="emby-checkbox" type="checkbox" class="chkMyMovieTrailers" />
+                        <span>${OptionTrailersFromMyMovies}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${OptionTrailersFromMyMoviesHelp}</div>
+                    <div class="fieldDescription checkboxFieldDescription">
                         <a href="http://emby.media/community/index.php?/topic/674-media-files-folders-structure/" target="_blank">${ButtonLearnMore}</a>
                     </div>
                 </div>
                 <br />
-                <br />
                 <div class="inputContainer">
                     <input is="emby-input" type="number" id="txtNumTrailers" min="1" max="10" step="1" label="${LabelNumberTrailerToPlay}" />
                 </div>
-                <br />
-                <div>
-                    <paper-checkbox class="chkEnableParentalControl">${LabelEnableIntroParentalControl}</paper-checkbox>
-                    <div class="fieldDescription paperCheckboxFieldDescription">${LabelEnableIntroParentalControlHelp}</div>
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input is="emby-checkbox" type="checkbox" class="chkEnableParentalControl" />
+                        <span>${LabelEnableIntroParentalControl}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelEnableIntroParentalControlHelp}</div>
                 </div>
-                <br />
-                <div>
-                    <paper-checkbox class="chkUnwatchedOnly">${LabelLimitIntrosToUnwatchedContent}</paper-checkbox>
-                </div>
-                <br />
-                <br />
+                <label class="checkboxContainer">
+                    <input is="emby-checkbox" type="checkbox" class="chkUnwatchedOnly" />
+                    <span>${LabelLimitIntrosToUnwatchedContent}</span>
+                </label>
                 <div class="inputContainer">
                     <div style="display: flex; align-items: center;">
                         <div style="flex-grow:1;">
diff --git a/dashboard-ui/components/apphost.js b/dashboard-ui/components/apphost.js
index efa191fe7a..8c8d73d234 100644
--- a/dashboard-ui/components/apphost.js
+++ b/dashboard-ui/components/apphost.js
@@ -151,6 +151,10 @@ define(['appStorage', 'browser'], function (appStorage, browser) {
                 features.push('htmlvideoautoplay');
             }
 
+            if (window.SyncRegistered) {
+                //features.push('sync');
+            }
+
             return features.indexOf(command.toLowerCase()) != -1;
         },
         unlockedFeatures: function () {
diff --git a/dashboard-ui/components/libraryoptionseditor/libraryoptionseditor.template.html b/dashboard-ui/components/libraryoptionseditor/libraryoptionseditor.template.html
index 283e1ab6b5..7f3f9c9a89 100644
--- a/dashboard-ui/components/libraryoptionseditor/libraryoptionseditor.template.html
+++ b/dashboard-ui/components/libraryoptionseditor/libraryoptionseditor.template.html
@@ -8,7 +8,7 @@
 </div>
 <div class="checkboxContainer checkboxContainer-withDescription">
     <label>
-        <input type="checkbox" is="emby-checkbox" class="chkEnableRealtimeMonitor" checked />
+        <input type="checkbox" is="emby-checkbox" class="chkEnableRealtimeMonitor" />
         <span>${LabelEnableRealtimeMonitor}</span>
     </label>
     <div class="fieldDescription checkboxFieldDescription">${LabelEnableRealtimeMonitorHelp}</div>
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 10b94b61fd..30f9a97e08 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -982,15 +982,15 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 @media all and (min-width: 1000px) {
 
-    .itemDetailPage .scalableCard.portraitCard {
+    .itemDetailPage .portraitCard-scalable {
         width: 25% !important;
     }
 
-    .itemDetailPage .scalableCard.squareCard {
+    .itemDetailPage .squareCard-scalable {
         width: 25% !important;
     }
 
-    .itemDetailPage .scalableCard.backdropCard, .itemDetailPage .scalableCard.smallBackdropCard {
+    .itemDetailPage .backdropCard-scalable, .itemDetailPage .smallBackdropCard-scalable {
         width: 33.3333333333333333% !important;
     }
 
@@ -1003,6 +1003,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     background: #673AB7 !important;
 }
 
-.btnSyncComplete i {
-    border-radius: 1000px;
-}
+    .btnSyncComplete i {
+        border-radius: 1000px;
+    }
diff --git a/dashboard-ui/dashboard/cinemamodeconfiguration.js b/dashboard-ui/dashboard/cinemamodeconfiguration.js
index db2451b457..b19b325462 100644
--- a/dashboard-ui/dashboard/cinemamodeconfiguration.js
+++ b/dashboard-ui/dashboard/cinemamodeconfiguration.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'fnchecked'], function ($) {
 
     function loadPage(page, config) {
 
diff --git a/dashboard-ui/devices/ios/ios.css b/dashboard-ui/devices/ios/ios.css
index 9f71cff179..ba80ff2d66 100644
--- a/dashboard-ui/devices/ios/ios.css
+++ b/dashboard-ui/devices/ios/ios.css
@@ -43,7 +43,7 @@ body:not(.dashboardDocument) .mainDrawerButton {
 
 .emby-tab-button {
     font-weight: 400;
-    text-transform: none!important;
+    text-transform: none !important;
     border-color: transparent !important;
     border-width: 0 !important;
 }
@@ -135,6 +135,6 @@ h1, h1 a {
     margin-right: 5%;
 }
 
-.categorySyncButton {
+.categorySyncButton, .btnSync {
     display: none !important;
 }
diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js
index fb8ef681b2..4fca70d3c3 100644
--- a/dashboard-ui/scripts/dashboardpage.js
+++ b/dashboard-ui/scripts/dashboardpage.js
@@ -30,7 +30,7 @@
 
             var page = this;
 
-            page.querySelector('#btnConnectionHelp').addEventListener('click', onConnectionHelpClick);
+            page.querySelector('.btnConnectionHelp').addEventListener('click', onConnectionHelpClick);
         },
 
         onPageShow: function () {
@@ -322,7 +322,7 @@
 
                 var nowPlayingItem = session.NowPlayingItem;
 
-                var className = nowPlayingItem ? 'scalableCard card activeSession backdropCard' : 'scalableCard card activeSession backdropCard';
+                var className = nowPlayingItem ? 'scalableCard card activeSession backdropCard backdropCard-scalable' : 'scalableCard card activeSession backdropCard backdropCard-scalable';
 
                 if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
                     className += ' transcodingSession';
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index 873c545944..4b7b44c66a 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -1820,7 +1820,7 @@
 
             var item = items[i];
 
-            var cssClass = "card backdropCard scalableCard";
+            var cssClass = "card backdropCard scalableCard backdropCard-scalable";
 
             var href = "itemdetails.html?id=" + item.Id;
 
diff --git a/dashboard-ui/scripts/itemlistpage.js b/dashboard-ui/scripts/itemlistpage.js
index de9ea73ad4..dfb3bf3213 100644
--- a/dashboard-ui/scripts/itemlistpage.js
+++ b/dashboard-ui/scripts/itemlistpage.js
@@ -136,12 +136,14 @@
                     posterOptions.shape = "backdrop";
                     posterOptions.centerText = true;
                     posterOptions.overlayText = false;
+                    posterOptions.overlayMoreButton = true;
                     html = cardBuilder.getCardsHtml(posterOptions);
                 } else {
 
                     // Poster
                     posterOptions.showTitle = context == 'photos' ? 'auto' : true;
                     posterOptions.overlayText = context == 'photos';
+                    posterOptions.overlayMoreButton = true;
 
                     html = cardBuilder.getCardsHtml(posterOptions);
                 }
diff --git a/dashboard-ui/scripts/loginpage.js b/dashboard-ui/scripts/loginpage.js
index 9c079308ea..64fe18fbf5 100644
--- a/dashboard-ui/scripts/loginpage.js
+++ b/dashboard-ui/scripts/loginpage.js
@@ -131,7 +131,7 @@
         for (var i = 0, length = users.length; i < length; i++) {
             var user = users[i];
 
-            html += '<div class="card squareCard scalableCard"><div class="cardBox cardBox-bottompadded visualCardBox">';
+            html += '<div class="card squareCard scalableCard squareCard-scalable"><div class="cardBox cardBox-bottompadded visualCardBox">';
 
             html += '<div class="cardScalable visualCardBox-cardScalable">';
 
diff --git a/dashboard-ui/scripts/medialibrarypage.js b/dashboard-ui/scripts/medialibrarypage.js
index 589d655b34..530b69fdd6 100644
--- a/dashboard-ui/scripts/medialibrarypage.js
+++ b/dashboard-ui/scripts/medialibrarypage.js
@@ -297,7 +297,7 @@
             style += "min-width:33.3%;";
         }
 
-        html += '<div class="card backdropCard scalableCard" style="' + style + '" data-index="' + index + '">';
+        html += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '">';
 
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
diff --git a/dashboard-ui/scripts/plugincatalogpage.js b/dashboard-ui/scripts/plugincatalogpage.js
index 9292bcc433..8b23816516 100644
--- a/dashboard-ui/scripts/plugincatalogpage.js
+++ b/dashboard-ui/scripts/plugincatalogpage.js
@@ -188,7 +188,7 @@
         }
         var target = plugin.externalUrl ? ' target="_blank"' : '';
 
-        html += "<div class='card backdropCard scalableCard'>";
+        html += "<div class='card backdropCard scalableCard backdropCard-scalable'>";
 
         html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
diff --git a/dashboard-ui/scripts/pluginspage.js b/dashboard-ui/scripts/pluginspage.js
index 006b032274..4930d11de2 100644
--- a/dashboard-ui/scripts/pluginspage.js
+++ b/dashboard-ui/scripts/pluginspage.js
@@ -43,7 +43,7 @@
             configPageUrl :
             null;
 
-        html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard scalableCard'>";
+        html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard scalableCard backdropCard-scalable'>";
 
         html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
diff --git a/dashboard-ui/scripts/sections.js b/dashboard-ui/scripts/sections.js
index 049c063a53..ee63a68fd6 100644
--- a/dashboard-ui/scripts/sections.js
+++ b/dashboard-ui/scripts/sections.js
@@ -192,7 +192,7 @@
     function getCard(img, target, shape) {
 
         shape = shape || 'backdropCard';
-        var html = '<div class="card scalableCard ' + shape + '"><div class="cardBox"><div class="cardScalable"><div class="cardPadder cardPadder-backdrop"></div>';
+        var html = '<div class="card scalableCard ' + shape + ' ' + shape + '-scalable"><div class="cardBox"><div class="cardScalable"><div class="cardPadder cardPadder-backdrop"></div>';
 
         if (target) {
             html += '<a class="cardContent" href="' + target + '" target="_blank">';
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 845bac663e..ecf98b4948 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -679,7 +679,8 @@ var Dashboard = {
         if (setQuality) {
             var quality = 90;
 
-            if ((options.type || '').toLowerCase() == 'backdrop') {
+            var isBackdrop = (options.type || '').toLowerCase() == 'backdrop';
+            if (isBackdrop) {
                 quality -= 10;
             }
 
@@ -687,15 +688,9 @@ var Dashboard = {
                 quality -= 40;
             }
 
-            if (AppInfo.hasLowImageBandwidth) {
+            if (AppInfo.hasLowImageBandwidth && !isBackdrop) {
 
-                // The native app can handle a little bit more than safari
-                if (AppInfo.isNativeApp) {
-
-                    quality -= 10;
-                } else {
-                    quality -= 20;
-                }
+                quality -= 10;
             }
             options.quality = quality;
         }
@@ -2806,7 +2801,9 @@ var AppInfo = {};
                 }).then(function (reg) {
 
                     // https://github.com/WICG/BackgroundSync/blob/master/explainer.md
-                    return reg.sync.register('emby-sync');
+                    return reg.sync.register('emby-sync').then(function() {
+                        window.SyncRegistered = Dashboard.isConnectMode();
+                    });
                 });
 
             } catch (err) {
diff --git a/dashboard-ui/scripts/userprofilespage.js b/dashboard-ui/scripts/userprofilespage.js
index 9cf241417a..ec6d1bea82 100644
--- a/dashboard-ui/scripts/userprofilespage.js
+++ b/dashboard-ui/scripts/userprofilespage.js
@@ -85,7 +85,7 @@
 
         var html = '';
 
-        var cssClass = "card squareCard scalableCard";
+        var cssClass = "card squareCard scalableCard squareCard-scalable";
 
         if (user.Policy.IsDisabled) {
             cssClass += ' grayscale';
diff --git a/dashboard-ui/strings/en-US.json b/dashboard-ui/strings/en-US.json
index 7a967b66ec..dad7d4db27 100644
--- a/dashboard-ui/strings/en-US.json
+++ b/dashboard-ui/strings/en-US.json
@@ -1184,7 +1184,7 @@
   "CinemaModeConfigurationHelp": "Cinema mode brings the theater experience straight to your living room with the ability to play trailers and custom intros before the main feature.",
   "OptionTrailersFromMyMovies": "Include trailers from movies in my library",
   "OptionUpcomingMoviesInTheaters": "Include trailers from new and upcoming movies",
-  "LabelLimitIntrosToUnwatchedContent": "Only use trailers from unwatched content",
+  "LabelLimitIntrosToUnwatchedContent": "Only play trailers from unwatched content",
   "LabelEnableIntroParentalControl": "Enable smart parental control",
   "LabelEnableIntroParentalControlHelp": "Trailers will only be selected with a parental rating equal to or less than the content being watched.",
   "LabelTheseFeaturesRequireSubscriptionHelpAndTrailers": "These features require an active Emby Premiere subscription and installation of the Trailer channel plugin.",