diff --git a/dashboard-ui/channelitems.html b/dashboard-ui/channelitems.html
index f4118157cf..8f338a8e9a 100644
--- a/dashboard-ui/channelitems.html
+++ b/dashboard-ui/channelitems.html
@@ -1,4 +1,4 @@
-<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage noSecondaryNavPage" data-contextname="${HeaderChannels}" data-require="scripts/channelitems,paper-checkbox" data-backbutton="true" data-menubutton="false">
+<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage noSecondaryNavPage" data-contextname="${HeaderChannels}" data-require="scripts/channelitems" data-backbutton="true" data-menubutton="false">
 
     <div data-role="content">
         <div class="viewSettings">
diff --git a/dashboard-ui/components/filterdialog/filterdialog.js b/dashboard-ui/components/filterdialog/filterdialog.js
index 8d9d667626..4b85d0628b 100644
--- a/dashboard-ui/components/filterdialog/filterdialog.js
+++ b/dashboard-ui/components/filterdialog/filterdialog.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'events', 'browser', 'jQuery', 'paper-checkbox', 'emby-collapsible', 'css!components/filterdialog/style', 'paper-radio-button', 'paper-radio-group'], function (dialogHelper, events, browser, $) {
+define(['dialogHelper', 'events', 'browser', 'jQuery', 'paper-checkbox', 'emby-checkbox', 'emby-collapsible', 'css!components/filterdialog/style', 'paper-radio-button', 'paper-radio-group'], function (dialogHelper, events, browser, $) {
 
     function renderOptions(context, selector, cssClass, items, isCheckedFn) {
 
@@ -15,14 +15,17 @@
         var html = '';
 
         //  style="margin: -.2em -.8em;"
-        html += '<div class="paperCheckboxList">';
+        html += '<div class="checkboxList">';
 
         html += items.map(function (filter) {
 
             var itemHtml = '';
 
             var checkedHtml = isCheckedFn(filter) ? ' checked' : '';
-            itemHtml += '<paper-checkbox' + checkedHtml + ' data-filter="' + filter + '" class="' + cssClass + '">' + filter + '</paper-checkbox>';
+            itemHtml += '<label>';
+            itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter + '" class="' + cssClass + '"/>';
+            itemHtml += '<span>' + filter + '</span>';
+            itemHtml += '</label>';
 
             return itemHtml;
 
diff --git a/dashboard-ui/components/filterdialog/filterdialog.template.html b/dashboard-ui/components/filterdialog/filterdialog.template.html
index 78742d645c..d52a6bd4e4 100644
--- a/dashboard-ui/components/filterdialog/filterdialog.template.html
+++ b/dashboard-ui/components/filterdialog/filterdialog.template.html
@@ -73,14 +73,34 @@
     </emby-collapsible>
 
     <emby-collapsible title="${HeaderVideoTypes}" class="videoTypeFilters hide">
-        <div class="paperCheckboxList">
-            <paper-checkbox class="chkVideoTypeFilter chkBluray" data-filter="Bluray">${OptionBluray}</paper-checkbox>
-            <paper-checkbox class="chkVideoTypeFilter chkDvd" data-filter="Dvd">${OptionDvd}</paper-checkbox>
-            <paper-checkbox class="chkVideoTypeFilter chkIso" data-filter="Iso">${OptionIso}</paper-checkbox>
+        <div class="checkboxList">
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkVideoTypeFilter chkBluray" data-filter="Bluray" />
+                <span>${OptionBluray}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkVideoTypeFilter chkDvd" data-filter="Dvd" />
+                <span>${OptionDvd}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkVideoTypeFilter chkIso" data-filter="Iso" />
+                <span>${OptionIso}</span>
+            </label>
 
-            <paper-checkbox class="chkHDFilter IsHD">${OptionIsHD}</paper-checkbox>
-            <paper-checkbox class="chkSDFilter IsHD">${OptionIsSD}</paper-checkbox>
-            <paper-checkbox class="chk3DFilter chk3D">${Option3D}</paper-checkbox>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkHDFilter IsHD" />
+                <span>${OptionIsHD}</span>
+            </label>
+
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkSDFilter IsHD" />
+                <span>${OptionIsSD}</span>
+            </label>
+
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chk3DFilter chk3D" />
+                <span>${Option3D}</span>
+            </label>
         </div>
     </emby-collapsible>
 
diff --git a/dashboard-ui/components/itemidentifier/itemidentifier.js b/dashboard-ui/components/itemidentifier/itemidentifier.js
index 7dfd030014..d95849e677 100644
--- a/dashboard-ui/components/itemidentifier/itemidentifier.js
+++ b/dashboard-ui/components/itemidentifier/itemidentifier.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'loading', 'jQuery', 'emby-input', 'paper-checkbox', 'paper-icon-button-light'], function (dialogHelper, loading, $) {
+define(['dialogHelper', 'loading', 'jQuery', 'emby-input', 'emby-checkbox', 'paper-icon-button-light'], function (dialogHelper, loading, $) {
 
     var currentItem;
     var currentItemType;
diff --git a/dashboard-ui/components/itemidentifier/itemidentifier.template.html b/dashboard-ui/components/itemidentifier/itemidentifier.template.html
index 1bd8b78d96..f2f3d40a75 100644
--- a/dashboard-ui/components/itemidentifier/itemidentifier.template.html
+++ b/dashboard-ui/components/itemidentifier/itemidentifier.template.html
@@ -30,9 +30,9 @@
 
     <div class="selectedSearchResult"></div>
     <br />
-    <div>
-        <paper-checkbox id="chkIdentifyReplaceImages" checked>${OptionReplaceExistingImages}</paper-checkbox>
-    </div>
-    <br />
+    <label class="checkboxContainer">
+        <input type="checkbox" is="emby-checkbox" id="chkIdentifyReplaceImages" />
+        <span>${OptionReplaceExistingImages}</span>
+    </label>
     <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSubmit}</span></button>
 </form>
diff --git a/dashboard-ui/components/metadataeditor/metadataeditor.js b/dashboard-ui/components/metadataeditor/metadataeditor.js
index b96552a658..72db3d1d6e 100644
--- a/dashboard-ui/components/metadataeditor/metadataeditor.js
+++ b/dashboard-ui/components/metadataeditor/metadataeditor.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'datetime', 'jQuery', 'paper-checkbox', 'paper-input', 'paper-item-body', 'paper-icon-item', 'paper-textarea', 'paper-fab', 'paper-icon-button-light'], function (dialogHelper, datetime, $) {
+define(['dialogHelper', 'datetime', 'jQuery', 'emby-checkbox', 'emby-input', 'emby-select', 'paper-item-body', 'paper-icon-item', 'paper-textarea', 'paper-fab', 'paper-icon-button-light'], function (dialogHelper, datetime, $) {
 
     var currentContext;
     var metadataEditorInfo;
@@ -509,11 +509,11 @@
 
             var labelText = Globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
 
-            html += '<div>';
+            html += '<div class="inputContainer">';
 
             var value = providerIds[idInfo.Key] || '';
 
-            html += '<paper-input style="display:inline-block;width:80%;" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" data-buttonclass="' + buttonId + '" id="' + id + '" label="' + labelText + '"></paper-input>';
+            html += '<input is="emby-input" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" data-buttonclass="' + buttonId + '" id="' + id + '" label="' + labelText + '"/>';
 
             if (formatString) {
                 html += '<a class="clearLink ' + buttonId + '" href="#" target="_blank" data-role="none" style="float: none; width: 1.75em"><button type="button" is="paper-icon-button-light"><iron-icon icon="open-in-browser"></iron-icon></button></a>';
@@ -691,14 +691,14 @@
         }
 
         if (item.Type == "Person") {
-            context.querySelector('#txtProductionYear').label = Globalize.translate('LabelBirthYear');
-            context.querySelector("#txtPremiereDate").label = Globalize.translate('LabelBirthDate');
-            context.querySelector("#txtEndDate").label = Globalize.translate('LabelDeathDate');
+            context.querySelector('#txtProductionYear').label(Globalize.translate('LabelBirthYear'));
+            context.querySelector("#txtPremiereDate").label(Globalize.translate('LabelBirthDate'));
+            context.querySelector("#txtEndDate").label(Globalize.translate('LabelDeathDate'));
             $('#fldPlaceOfBirth', context).show();
         } else {
-            context.querySelector('#txtProductionYear').label = Globalize.translate('LabelYear');
-            context.querySelector("#txtPremiereDate").label = Globalize.translate('LabelReleaseDate');
-            context.querySelector("#txtEndDate").label = Globalize.translate('LabelEndDate');
+            context.querySelector('#txtProductionYear').label(Globalize.translate('LabelYear'));
+            context.querySelector("#txtPremiereDate").label(Globalize.translate('LabelReleaseDate'));
+            context.querySelector("#txtEndDate").label(Globalize.translate('LabelEndDate'));
             $('#fldPlaceOfBirth', context).hide();
         }
 
@@ -712,13 +712,13 @@
             $('#fldIndexNumber', context).show();
 
             if (item.Type == "Episode") {
-                context.querySelector('#txtIndexNumber').label = Globalize.translate('LabelEpisodeNumber');
+                context.querySelector('#txtIndexNumber').label(Globalize.translate('LabelEpisodeNumber'));
             } else if (item.Type == "Season") {
-                context.querySelector('#txtIndexNumber').label = Globalize.translate('LabelSeasonNumber');
+                context.querySelector('#txtIndexNumber').label(Globalize.translate('LabelSeasonNumber'));
             } else if (item.Type == "Audio") {
-                context.querySelector('#txtIndexNumber').label = Globalize.translate('LabelTrackNumber');
+                context.querySelector('#txtIndexNumber').label(Globalize.translate('LabelTrackNumber'));
             } else {
-                context.querySelector('#txtIndexNumber').label = Globalize.translate('LabelNumber');
+                context.querySelector('#txtIndexNumber').label(Globalize.translate('LabelNumber'));
             }
         } else {
             $('#fldIndexNumber', context).hide();
@@ -728,11 +728,11 @@
             $('#fldParentIndexNumber', context).show();
 
             if (item.Type == "Episode") {
-                context.querySelector('#txtParentIndexNumber').label = Globalize.translate('LabelSeasonNumber');
+                context.querySelector('#txtParentIndexNumber').label(Globalize.translate('LabelSeasonNumber'));
             } else if (item.Type == "Audio") {
-                context.querySelector('#txtParentIndexNumber').label = Globalize.translate('LabelDiscNumber');
+                context.querySelector('#txtParentIndexNumber').label(Globalize.translate('LabelDiscNumber'));
             } else {
-                context.querySelector('#txtParentIndexNumber').label = Globalize.translate('LabelParentNumber');
+                context.querySelector('#txtParentIndexNumber').label(Globalize.translate('LabelParentNumber'));
             }
         } else {
             $('#fldParentIndexNumber', context).hide();
@@ -741,7 +741,6 @@
         if (item.Type == "BoxSet") {
             $('#fldDisplayOrder', context).show();
 
-            $('#labelDisplayOrder', context).html(Globalize.translate('LabelTitleDisplayOrder'));
             $('#selectDisplayOrder', context).html('<option value="SortName">' + Globalize.translate('OptionSortName') + '</option><option value="PremiereDate">' + Globalize.translate('OptionReleaseDate') + '</option>');
         } else {
             $('#selectDisplayOrder', context).html('');
@@ -1049,7 +1048,10 @@
             var name = field.name;
             var value = field.value || field.name;
             var checkedHtml = currentFields.indexOf(value) == -1 ? ' checked' : '';
-            html += '<paper-checkbox class="selectLockedField" data-value="' + value + '" style="display:block;margin:1em 0;"' + checkedHtml + '>' + name + '</paper-checkbox>';
+            html += '<label>';
+            html += '<input type="checkbox" is="emby-checkbox" class="selectLockedField" data-value="' + value + '"' + checkedHtml + '/>';
+            html += '<span>' + name + '</span>';
+            html += '</label>';
         }
         return html;
     }
diff --git a/dashboard-ui/components/metadataeditor/metadataeditor.template.html b/dashboard-ui/components/metadataeditor/metadataeditor.template.html
index bc43258a92..36ae8c9ef0 100644
--- a/dashboard-ui/components/metadataeditor/metadataeditor.template.html
+++ b/dashboard-ui/components/metadataeditor/metadataeditor.template.html
@@ -16,135 +16,147 @@
     <div class="metadataFormFields">
 
         <div style="padding: 0 0 10px;">
-            <div id="fldContentType" style="display:none;">
-                <label for="selectContentType" class="selectLabel">${LabelContentType}</label>
-                <select id="selectContentType" data-mini="true"></select>
+            <div id="fldContentType" style="display:none;" class="selectContainer">
+                <select is="emby-select" id="selectContentType" label="${LabelContentType}"></select>
             </div>
-            <div id="fldPath">
-                <paper-input id="txtPath" type="text" label="${LabelPath}" readonly></paper-input>
+            <div id="fldPath" class="inputContainer">
+                <input is="emby-input" id="txtPath" type="text" label="${LabelPath}" readonly />
             </div>
-            <div>
-                <paper-input id="txtName" type="text" label="${LabelTitle}" required="required"></paper-input>
+            <div class="inputContainer">
+                <input is="emby-input" id="txtName" type="text" label="${LabelTitle}" required="required" />
             </div>
-            <div id="fldOriginalName">
-                <paper-input id="txtOriginalName" type="text" label="${LabelOriginalTitle}"></paper-input>
+            <div id="fldOriginalName" class="inputContainer">
+                <input is="emby-input" id="txtOriginalName" type="text" label="${LabelOriginalTitle}" />
             </div>
-            <div>
-                <paper-input id="txtSortName" type="text" label="${LabelSortTitle}"></paper-input>
+            <div class="inputContainer">
+                <input is="emby-input" id="txtSortName" type="text" label="${LabelSortTitle}" />
             </div>
-            <div id="fldDateAdded" style="display: none;">
-                <paper-input id="txtDateAdded" type="date" label="${LabelDateAdded}"></paper-input>
+            <div id="fldDateAdded" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtDateAdded" type="date" label="${LabelDateAdded}" />
                 <div class="fieldDescription">${ConfigureDateAdded}</div>
-                <br />
             </div>
-            <div id="fldStatus" style="display: none;margin:1em 0;">
-                <label for="selectStatus" class="selectLabel">${LabelStatus}</label>
-                <select id="selectStatus" data-mini="true"></select>
+            <div id="fldStatus" style="display: none;" class="selectContainer">
+                <select is="emby-select" id="selectStatus" label="${LabelStatus}"></select>
             </div>
-            <div id="fldArtist" style="display: none;">
-                <paper-input id="txtArtist" type="text" label="${LabelArtists}" placeholder="${LabelArtistsHelp}"></paper-input>
+            <div id="fldArtist" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtArtist" type="text" label="${LabelArtists}" placeholder="${LabelArtistsHelp}" />
             </div>
-            <div id="fldAlbumArtist" style="display: none;">
-                <paper-input id="txtAlbumArtist" type="text" label="${LabelAlbumArtists}" placeholder="${LabelArtistsHelp}"></paper-input>
+            <div id="fldAlbumArtist" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtAlbumArtist" type="text" label="${LabelAlbumArtists}" placeholder="${LabelArtistsHelp}" />
             </div>
-            <div id="fldAlbum" style="display: none;">
-                <paper-input id="txtAlbum" type="text" label="${LabelAlbum}"></paper-input>
+            <div id="fldAlbum" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtAlbum" type="text" label="${LabelAlbum}" />
             </div>
-            <div id="fldParentIndexNumber" style="display: none;">
-                <paper-input id="txtParentIndexNumber" type="number"></paper-input>
+            <div id="fldParentIndexNumber" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtParentIndexNumber" type="number" />
             </div>
-            <div id="fldIndexNumber" style="display: none;">
-                <paper-input id="txtIndexNumber" type="number" pattern="[0-9]*"></paper-input>
+            <div id="fldIndexNumber" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtIndexNumber" type="number" pattern="[0-9]*" />
             </div>
-            <div id="fldCommunityRating" style="display: none;">
-                <paper-input id="txtCommunityRating" type="number" step=".1" min="0" max="10" label="${LabelCommunityRating}"></paper-input>
+            <div id="fldCommunityRating" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtCommunityRating" type="number" step=".1" min="0" max="10" label="${LabelCommunityRating}" />
             </div>
-            <div id="fldCommunityVoteCount" style="display: none;">
-                <paper-input id="txtCommunityVoteCount" type="number" step="1" label="${LabelVoteCount}"></paper-input>
+            <div id="fldCommunityVoteCount" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtCommunityVoteCount" type="number" step="1" label="${LabelVoteCount}" />
             </div>
-            <div id="fldMetascore" style="display: none;">
-                <paper-input id="txtMetascore" type="number" step="1" min="0" max="100" label="${LabelMetascore}"></paper-input>
+            <div id="fldMetascore" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtMetascore" type="number" step="1" min="0" max="100" label="${LabelMetascore}" />
             </div>
-            <div id="fldCriticRating" style="display: none;">
-                <paper-input id="txtCriticRating" type="number" step=".1" label="${LabelCriticRating}"></paper-input>
+            <div id="fldCriticRating" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtCriticRating" type="number" step=".1" label="${LabelCriticRating}" />
             </div>
-            <div id="fldCriticRatingSummary" style="display: none;">
-                <paper-input id="txtCriticRatingSummary" type="text" label="${LabelCriticRatingSummary}"></paper-input>
+            <div id="fldCriticRatingSummary" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtCriticRatingSummary" type="text" label="${LabelCriticRatingSummary}" />
             </div>
-            <div id="fldAwardSummary" style="display: none;">
-                <paper-input id="txtAwardSummary" type="text" label="${LabelAwardSummary}"></paper-input>
+            <div id="fldAwardSummary" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtAwardSummary" type="text" label="${LabelAwardSummary}" />
             </div>
-            <div>
-                <paper-input id="txtHomePageUrl" type="text" label="${LabelWebsite}"></paper-input>
+            <div class="inputContainer">
+                <input is="emby-input" id="txtHomePageUrl" type="text" label="${LabelWebsite}" />
             </div>
-            <div id="fldTagline" style="display: none;">
-                <paper-input id="txtTagline" type="text" label="${LabelTagline}"></paper-input>
+            <div id="fldTagline" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtTagline" type="text" label="${LabelTagline}" />
             </div>
-            <div>
+            <div class="inputContainer">
                 <paper-textarea id="txtOverview" label="${LabelOverview}"></paper-textarea>
             </div>
-            <div id="fldShortOverview" style="display: none;">
-                <paper-input id="txtShortOverview" type="text" label="${LabelShortOverview}"></paper-input>
+            <div id="fldShortOverview" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtShortOverview" type="text" label="${LabelShortOverview}" />
             </div>
-            <div id="fldPremiereDate">
-                <paper-input id="txtPremiereDate" label="${LabelReleaseDate}" type="date"></paper-input>
+            <div id="fldPremiereDate" class="inputContainer">
+                <input is="emby-input" id="txtPremiereDate" label="${LabelReleaseDate}" type="date" />
             </div>
-            <div id="fldYear" style="display: none;">
-                <paper-input id="txtProductionYear" type="number" label="${LabelYear}"></paper-input>
+            <div id="fldYear" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtProductionYear" type="number" label="${LabelYear}" />
             </div>
-            <div id="fldPlaceOfBirth" style="display: none;">
-                <paper-input id="txtPlaceOfBirth" type="text" label="${LabelPlaceOfBirth}"></paper-input>
+            <div id="fldPlaceOfBirth" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtPlaceOfBirth" type="text" label="${LabelPlaceOfBirth}" />
             </div>
-            <div id="fldEndDate">
-                <paper-input id="txtEndDate" label="${LabelEndDate}" type="date"></paper-input>
+            <div id="fldEndDate" class="inputContainer">
+                <input is="emby-input" id="txtEndDate" label="${LabelEndDate}" type="date" />
             </div>
             <div id="fldAirDays" style="display: none;">
                 <p>${LabelAirDays}</p>
 
-                <div>
-                    <paper-checkbox class="chkAirDay" data-day="Sunday">${OptionSunday}</paper-checkbox>
-                    <paper-checkbox class="chkAirDay" data-day="Monday">${OptionMonday}</paper-checkbox>
-                    <paper-checkbox class="chkAirDay" data-day="Tuesday">${OptionTuesday}</paper-checkbox>
-                    <paper-checkbox class="chkAirDay" data-day="Wednesday">${OptionWednesday}</paper-checkbox>
-                    <paper-checkbox class="chkAirDay" data-day="Thursday">${OptionThursday}</paper-checkbox>
-                    <paper-checkbox class="chkAirDay" data-day="Friday">${OptionFriday}</paper-checkbox>
-                    <paper-checkbox class="chkAirDay" data-day="Saturday">${OptionSaturday}</paper-checkbox>
+                <div class="checkboxList">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkAirDay" data-day="Sunday" />
+                        <span>${OptionSunday}</span>
+                    </label>
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkAirDay" data-day="Monday" />
+                        <span>${OptionMonday}</span>
+                    </label>
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkAirDay" data-day="Tuesday" />
+                        <span>${OptionTuesday}</span>
+                    </label>
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkAirDay" data-day="Wednesday" />
+                        <span>${OptionWednesday}</span>
+                    </label>
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkAirDay" data-day="Thursday" />
+                        <span>${OptionThursday}</span>
+                    </label>
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkAirDay" data-day="Friday" />
+                        <span>${OptionFriday}</span>
+                    </label>
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkAirDay" data-day="Saturday" />
+                        <span>${OptionSaturday}</span>
+                    </label>
                 </div>
                 <br />
 
             </div>
-            <div id="fldAirTime" style="display: none;">
-                <paper-input id="txtAirTime" type="text" label="${LabelAirTime}"></paper-input>
+            <div id="fldAirTime" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtAirTime" type="text" label="${LabelAirTime}" />
             </div>
-            <div id="fldSeriesRuntime" style="display: none;">
-                <paper-input id="txtSeriesRuntime" type="number" label="${LabelRuntimeMinutes}"></paper-input>
+            <div id="fldSeriesRuntime" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtSeriesRuntime" type="number" label="${LabelRuntimeMinutes}" />
             </div>
-            <div id="fldOfficialRating" style="display: none;">
-                <br />
-                <label for="selectOfficialRating" class="selectLabel">${LabelParentalRating}</label>
-                <select id="selectOfficialRating" data-mini="true"></select>
+            <div id="fldOfficialRating" style="display: none;" class="selectContainer">
+                <select is="emby-select" id="selectOfficialRating" label="${LabelParentalRating}"></select>
             </div>
-            <div id="fldCustomRating" style="display: none;">
-                <br />
-                <label for="selectCustomRating" class="selectLabel">${LabelCustomRating}</label>
-                <select id="selectCustomRating" data-mini="true"></select>
+            <div id="fldCustomRating" style="display: none;" class="selectContainer">
+                <select is="emby-select" id="selectCustomRating" label="${LabelCustomRating}"></select>
             </div>
-            <div id="fldBudget" style="display: none;">
-                <paper-input id="txtBudget" type="number" label="${LabelBudget}"></paper-input>
+            <div id="fldBudget" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtBudget" type="number" label="${LabelBudget}" />
             </div>
-            <div id="fldRevenue" style="display: none;">
-                <paper-input id="txtRevenue" type="number" label="${LabelRevenue}"></paper-input>
+            <div id="fldRevenue" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtRevenue" type="number" label="${LabelRevenue}" />
             </div>
-            <div id="fldOriginalAspectRatio" style="display: none;">
-                <paper-input id="txtOriginalAspectRatio" type="text" label="${LabelOriginalAspectRatio}"></paper-input>
+            <div id="fldOriginalAspectRatio" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtOriginalAspectRatio" type="text" label="${LabelOriginalAspectRatio}" />
             </div>
-            <div id="fldPlayers" style="display: none;">
-                <paper-input id="txtPlayers" type="number" pattern="[0-9]*" label="${LabelPlayers}"></paper-input>
+            <div id="fldPlayers" style="display: none;" class="inputContainer">
+                <input is="emby-input" id="txtPlayers" type="number" pattern="[0-9]*" label="${LabelPlayers}" />
             </div>
-            <div id="fld3dFormat" style="display: none;">
-                <br />
-                <label for="select3dFormat" class="selectLabel">${Label3DFormat}</label>
-                <select id="select3dFormat" data-mini="true">
+            <div id="fld3dFormat" style="display: none;" class="selectContainer">
+                <select is="emby-select" id="select3dFormat" label="${Label3DFormat}">
                     <option value=""></option>
                     <option value="HalfSideBySide">HSBS</option>
                     <option value="HalfTopAndBottom">HTAB</option>
@@ -161,14 +173,14 @@
                 ${HeaderAlternateEpisodeNumbers}
             </h1>
             <div class="detailSectionContent">
-                <div>
-                    <paper-input id="txtDvdSeasonNumber" type="number" pattern="[0-9]*" label="${LabelDvdSeasonNumber}"></paper-input>
+                <div class="inputContainer">
+                    <input is="emby-input" id="txtDvdSeasonNumber" type="number" pattern="[0-9]*" label="${LabelDvdSeasonNumber}" />
                 </div>
-                <div>
-                    <paper-input id="txtDvdEpisodeNumber" type="number" pattern="[0-9]*" label="${LabelDvdEpisodeNumber}"></paper-input>
+                <div class="inputContainer">
+                    <input is="emby-input" id="txtDvdEpisodeNumber" type="number" pattern="[0-9]*" label="${LabelDvdEpisodeNumber}" />
                 </div>
-                <div>
-                    <paper-input id="txtAbsoluteEpisodeNumber" type="number" pattern="[0-9]*" label="${LabelAbsoluteEpisodeNumber}"></paper-input>
+                <div class="inputContainer">
+                    <input is="emby-input" id="txtAbsoluteEpisodeNumber" type="number" pattern="[0-9]*" label="${LabelAbsoluteEpisodeNumber}" />
                 </div>
             </div>
         </div>
@@ -178,14 +190,14 @@
                 ${HeaderSpecialEpisodeInfo}
             </h1>
             <div class="detailSectionContent">
-                <div>
-                    <paper-input id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}"></paper-input>
+                <div class="inputContainer">
+                    <input is="emby-input" id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}" />
                 </div>
-                <div>
-                    <paper-input id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}"></paper-input>
+                <div class="inputContainer">
+                    <input is="emby-input" id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}" />
                 </div>
-                <div>
-                    <paper-input id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}"></paper-input>
+                <div class="inputContainer">
+                    <input is="emby-input" id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}" />
                 </div>
             </div>
         </div>
@@ -205,12 +217,11 @@
                 ${HeaderDisplaySettings}
             </h1>
             <div class="detailSectionContent">
-                <div id="fldSourceType" style="display: none;" class="fldDisplaySetting">
-                    <paper-input id="txtDisplayMediaType" type="text" label="${LabelTreatImageAs}"></paper-input>
+                <div id="fldSourceType" style="display: none;" class="fldDisplaySetting inputContainer">
+                    <input is="emby-input" id="txtDisplayMediaType" type="text" label="${LabelTreatImageAs}" />
                 </div>
-                <div id="fldDisplayOrder" class="fldDisplaySetting">
-                    <label for="selectDisplayOrder" class="selectLabel" id="labelDisplayOrder">${LabelDisplayOrder}</label>
-                    <select id="selectDisplayOrder" data-mini="true"></select>
+                <div id="fldDisplayOrder" class="fldDisplaySetting selectContainer">
+                    <select is="emby-select" id="selectDisplayOrder" label="${LabelDisplayOrder}"></select>
                 </div>
             </div>
         </div>
@@ -239,7 +250,7 @@
             <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                 ${HeaderPeople}
             </h1>
-            <button is="emby-button" type="button" raised id="btnAddPerson" class="btnAddPerson submit mini" style="margin-left:1em;" title="${ButtonAdd}">
+            <button is="emby-button" type="button" id="btnAddPerson" class="raised btnAddPerson submit mini" style="margin-left:1em;" title="${ButtonAdd}">
                 <iron-icon icon="add"></iron-icon>
                 <span>${ButtonAdd}</span>
             </button>
@@ -279,24 +290,22 @@
         <div id="metadataSettingsCollapsible" style="display: none; margin-top: 3em;">
             <h1>${HeaderMetadataSettings}</h1>
             <div>
-                <div>
-                    <label for="selectLanguage" class="selectLabel">${LabelMetadataDownloadLanguage}</label>
-                    <select id="selectLanguage" data-mini="true"></select>
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectLanguage" label="${LabelMetadataDownloadLanguage}"></select>
+                    <div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
                 </div>
-                <div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
-                <br />
-                <div>
-                    <label for="selectCountry" class="selectLabel">${LabelCountry}</label>
-                    <select id="selectCountry" data-mini="true"></select>
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectCountry" label="${LabelCountry}"></select>
                 </div>
                 <div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
 
-                <div>
-                    <br /><br />
-                    <paper-checkbox id="chkLockData">${LabelLockItemToPreventChanges}</paper-checkbox>
-                </div>
-                <br />
-                <div class="providerSettingsContainer" style="display: none">
+                <br /><br />
+                <label class="checkboxContainer">
+                    <input type="checkbox" is="emby-checkbox" id="chkLockData" />
+                    <span>${LabelLockItemToPreventChanges}</span>
+                </label>
+
+                <div class="providerSettingsContainer checkboxList" style="display: none">
                 </div>
             </div>
         </div>
diff --git a/dashboard-ui/components/metadataeditor/personeditor.js b/dashboard-ui/components/metadataeditor/personeditor.js
index 83875b3772..798a6db2ee 100644
--- a/dashboard-ui/components/metadataeditor/personeditor.js
+++ b/dashboard-ui/components/metadataeditor/personeditor.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'jQuery', 'paper-icon-button-light'], function (dialogHelper, $) {
+define(['dialogHelper', 'jQuery', 'paper-icon-button-light', 'emby-input', 'emby-select'], function (dialogHelper, $) {
 
     return {
         show: function (person) {
diff --git a/dashboard-ui/components/metadataeditor/personeditor.template.html b/dashboard-ui/components/metadataeditor/personeditor.template.html
index af581bcb1b..60b2d9bdd2 100644
--- a/dashboard-ui/components/metadataeditor/personeditor.template.html
+++ b/dashboard-ui/components/metadataeditor/personeditor.template.html
@@ -7,14 +7,12 @@
 
 <form class="popupEditPersonForm" style="max-width: none;margin:0;">
 
-    <div>
-        <paper-input type="text" class="txtPersonName" required="required" label="${LabelName}"></paper-input>
+    <div class="inputContainer">
+        <input type="text" is="emby-input" class="txtPersonName" required="required" label="${LabelName}"/>
     </div>
 
-    <br />
-    <div>
-        <label for="selectPersonType" class="selectLabel">${LabelType}</label>
-        <select id="selectPersonType" class="selectPersonType" data-mini="true">
+    <div class="selectContainer">
+        <select is="emby-select" id="selectPersonType" class="selectPersonType" label="${LabelType}">
             <option value=""></option>
             <option value="Actor">${OptionActor}</option>
             <option value="Composer">${OptionComposer}</option>
@@ -24,10 +22,9 @@
             <option value="Writer">${OptionWriter}</option>
         </select>
     </div>
-    <div>
-        <paper-input type="text" class="txtPersonRole" label="${LabelPersonRole}"></paper-input>
+    <div class="inputContainer">
+        <input is="emby-input" type="text" class="txtPersonRole" label="${LabelPersonRole}"/>
         <div class="fieldDescription">${LabelPersonRoleHelp}</div>
     </div>
-    <br />
     <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></button>
 </form>
\ No newline at end of file
diff --git a/dashboard-ui/css/card.css b/dashboard-ui/css/card.css
index 48971d10e3..79673a01ff 100644
--- a/dashboard-ui/css/card.css
+++ b/dashboard-ui/css/card.css
@@ -64,10 +64,6 @@
     }
 }
 
-.cardImage {
-    border-radius: 3px;
-}
-
 .cardOverlayButtonContainer {
     position: absolute;
     bottom: 0;
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 49f452ab10..23e32e9ea5 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -1124,6 +1124,13 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     }
 }
 
+@media all and (max-height: 530px) {
+
+    .alphabetPicker {
+        font-size: 84%;
+    }
+}
+
 @media all and (min-height: 900px) {
 
     .alphabetPicker {
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index bf86891ea2..46b199916a 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -244,7 +244,7 @@ div[data-role='page'] {
     white-space: nowrap;
 }
 
-    .checkboxContainer input {
+    .checkboxContainer input:not([is=emby-checkbox]) {
         width: 20px;
         height: 20px;
         vertical-align: middle;
@@ -253,7 +253,7 @@ div[data-role='page'] {
         padding: 0;
     }
 
-    .checkboxContainer label {
+    .checkboxContainer label:not(.mdl-checkbox) {
         vertical-align: middle;
         display: inline-block;
         padding: .7em .5em;
diff --git a/dashboard-ui/forgotpassword.html b/dashboard-ui/forgotpassword.html
index 602656b49c..ac3e983824 100644
--- a/dashboard-ui/forgotpassword.html
+++ b/dashboard-ui/forgotpassword.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="forgotPasswordPage" class="page standalonePage forgotPasswordPage" data-theme="b" data-require="scripts/forgotpassword,paper-input,emby-button">
+<div data-role="page" id="forgotPasswordPage" class="page standalonePage forgotPasswordPage" data-theme="b" data-require="scripts/forgotpassword,emby-input,emby-button">
 
     <div data-role="content">
 
@@ -7,13 +7,11 @@
             <div style="text-align: left;">
                 <h1>${HeaderForgotPassword}</h1>
 
-                <div>
-                    <paper-input type="text" id="txtName" label="${LabelUser}" autocomplete="off"></paper-input>
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtName" label="${LabelUser}" autocomplete="off"/>
                     <div class="fieldDescription">${LabelForgotPasswordUsernameHelp}</div>
                 </div>
 
-                <br />
-
                 <div>
                     <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSubmit}</span></button>
 
diff --git a/dashboard-ui/forgotpasswordpin.html b/dashboard-ui/forgotpasswordpin.html
index c4720925e7..de5372f64b 100644
--- a/dashboard-ui/forgotpasswordpin.html
+++ b/dashboard-ui/forgotpasswordpin.html
@@ -1,4 +1,4 @@
-<div data-role="page" class="page standalonePage forgotPasswordPinPage" data-theme="b" data-require="scripts/forgotpasswordpin,paper-input,emby-button">
+<div data-role="page" class="page standalonePage forgotPasswordPinPage" data-theme="b" data-require="scripts/forgotpasswordpin,emby-input,emby-button">
 
     <div data-role="content">
 
@@ -7,12 +7,10 @@
             <div style="text-align: left;">
                 <h2>${HeaderPasswordReset}</h2>
 
-                <div>
-                    <paper-input type="text" id="txtPin" label="${LabelPasswordRecoveryPinCode}" autocomplete="off" required="required"></paper-input>
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtPin" label="${LabelPasswordRecoveryPinCode}" autocomplete="off" required="required"/>
                 </div>
 
-                <br />
-
                 <div>
                     <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSubmit}</span></button>
 
diff --git a/dashboard-ui/mypreferencesdisplay.html b/dashboard-ui/mypreferencesdisplay.html
index 0fa2bd05ee..b85df849e9 100644
--- a/dashboard-ui/mypreferencesdisplay.html
+++ b/dashboard-ui/mypreferencesdisplay.html
@@ -1,53 +1,51 @@
-<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderDisplaySettings}" data-require="scripts/mypreferencesdisplay,paper-checkbox,emby-button,emby-select" data-backbutton="true" data-menubutton="false">
+<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderDisplaySettings}" data-require="scripts/mypreferencesdisplay,emby-checkbox,emby-button,emby-select" data-backbutton="true" data-menubutton="false">
     <div data-role="content">
         <form class="displayPreferencesForm userProfileSettingsForm" style="margin: 0 auto;">
             <div class="detailSection languageSection hide">
                 <h1>
                     ${HeaderLanguage}
                 </h1>
-                <div class="detailSectionContent">
-                    <br />
-                    <div class="selectContainer">
-                        <select id="selectLanguage" is="emby-select" label="${LabelPreferredDisplayLanguage}">
-                            <option value="">${OptionAuto}</option>
-                            <option value="ar">Arabic</option>
-                            <option value="bg-BG">Bulgarian (Bulgaria)</option>
-                            <option value="ca">Catalan</option>
-                            <option value="zh-CN">Chinese Simplified</option>
-                            <option value="zh-TW">Chinese Traditional</option>
-                            <option value="hr">Croatian</option>
-                            <option value="cs">Czech</option>
-                            <option value="da">Danish</option>
-                            <option value="nl">Dutch</option>
-                            <option value="en-GB">English (United Kingdom)</option>
-                            <option value="en-US">English (United States)</option>
-                            <option value="fi">Finnish</option>
-                            <option value="fr">French</option>
-                            <option value="de">German</option>
-                            <option value="el">Greek</option>
-                            <option value="he">Hebrew</option>
-                            <option value="hu">Hungarian</option>
-                            <option value="id">Indonesian</option>
-                            <option value="it">Italian</option>
-                            <option value="kk">Kazakh</option>
-                            <option value="nb">Norwegian Bokmål</option>
-                            <option value="pl">Polish</option>
-                            <option value="pt-BR">Portuguese (Brazil)</option>
-                            <option value="pt-PT">Portuguese (Portugal)</option>
-                            <option value="ru">Russian</option>
-                            <option value="sl-SI">Slovenian (Slovenia)</option>
-                            <option value="es-ES">Spanish</option>
-                            <option value="es-MX">Spanish (Mexico)</option>
-                            <option value="sv">Swedish</option>
-                            <option value="tr">Turkish</option>
-                            <option value="uk">Ukrainian</option>
-                            <option value="vi">Vietnamese</option>
-                        </select>
-                        <div class="fieldDescription">
-                            <div>${LabelPreferredDisplayLanguageHelp}</div>
-                            <div style="margin-top: .25em;">
-                                <a href="http://emby.media/community/index.php?/topic/5727-join-our-translation-team/" target="_blank">${LabelReadHowYouCanContribute}</a>
-                            </div>
+                <br />
+                <div class="selectContainer">
+                    <select id="selectLanguage" is="emby-select" label="${LabelPreferredDisplayLanguage}">
+                        <option value="">${OptionAuto}</option>
+                        <option value="ar">Arabic</option>
+                        <option value="bg-BG">Bulgarian (Bulgaria)</option>
+                        <option value="ca">Catalan</option>
+                        <option value="zh-CN">Chinese Simplified</option>
+                        <option value="zh-TW">Chinese Traditional</option>
+                        <option value="hr">Croatian</option>
+                        <option value="cs">Czech</option>
+                        <option value="da">Danish</option>
+                        <option value="nl">Dutch</option>
+                        <option value="en-GB">English (United Kingdom)</option>
+                        <option value="en-US">English (United States)</option>
+                        <option value="fi">Finnish</option>
+                        <option value="fr">French</option>
+                        <option value="de">German</option>
+                        <option value="el">Greek</option>
+                        <option value="he">Hebrew</option>
+                        <option value="hu">Hungarian</option>
+                        <option value="id">Indonesian</option>
+                        <option value="it">Italian</option>
+                        <option value="kk">Kazakh</option>
+                        <option value="nb">Norwegian Bokmål</option>
+                        <option value="pl">Polish</option>
+                        <option value="pt-BR">Portuguese (Brazil)</option>
+                        <option value="pt-PT">Portuguese (Portugal)</option>
+                        <option value="ru">Russian</option>
+                        <option value="sl-SI">Slovenian (Slovenia)</option>
+                        <option value="es-ES">Spanish</option>
+                        <option value="es-MX">Spanish (Mexico)</option>
+                        <option value="sv">Swedish</option>
+                        <option value="tr">Turkish</option>
+                        <option value="uk">Ukrainian</option>
+                        <option value="vi">Vietnamese</option>
+                    </select>
+                    <div class="fieldDescription">
+                        <div>${LabelPreferredDisplayLanguageHelp}</div>
+                        <div style="margin-top: .25em;">
+                            <a href="http://emby.media/community/index.php?/topic/5727-join-our-translation-team/" target="_blank">${LabelReadHowYouCanContribute}</a>
                         </div>
                     </div>
                 </div>
@@ -56,40 +54,39 @@
                 <h1>
                     ${HeaderNavigation}
                 </h1>
-                <div class="detailSectionContent">
-                    <br />
-                    <div class="selectContainer">
-                        <select id="selectThemeSong" is="emby-select" label="${LabelEnableThemeSongs}">
-                            <option value="">${OptionAuto}</option>
-                            <option value="1">${OptionYes}</option>
-                            <option value="0">${OptionNo}</option>
-                        </select>
-                        <div class="fieldDescription">${LabelEnableThemeSongsHelp}</div>
-                    </div>
-                    <br />
-                    <div class="fldEnableBackdrops selectContainer" style="display:none;">
-                        <select id="selectBackdrop" is="emby-select" label="${LabelEnableBackdrops}">
-                            <option value="">${OptionAuto}</option>
-                            <option value="1">${OptionYes}</option>
-                            <option value="0">${OptionNo}</option>
-                        </select>
-                        <div class="fieldDescription">${LabelEnableBackdropsHelp}</div>
-                    </div>
+                <br />
+                <div class="selectContainer">
+                    <select id="selectThemeSong" is="emby-select" label="${LabelEnableThemeSongs}">
+                        <option value="">${OptionAuto}</option>
+                        <option value="1">${OptionYes}</option>
+                        <option value="0">${OptionNo}</option>
+                    </select>
+                    <div class="fieldDescription">${LabelEnableThemeSongsHelp}</div>
+                </div>
+                <br />
+                <div class="fldEnableBackdrops selectContainer" style="display:none;">
+                    <select id="selectBackdrop" is="emby-select" label="${LabelEnableBackdrops}">
+                        <option value="">${OptionAuto}</option>
+                        <option value="1">${OptionYes}</option>
+                        <option value="0">${OptionNo}</option>
+                    </select>
+                    <div class="fieldDescription">${LabelEnableBackdropsHelp}</div>
                 </div>
             </div>
             <div class="detailSection requiresUserPreferences">
                 <h1>
                     ${HeaderDisplay}
                 </h1>
-                <div class="detailSectionContent">
-                    <br />
-                    <div>
-                        <paper-checkbox class="chkDisplayMissingEpisodes">${LabelDisplayMissingEpisodesWithinSeasons}</paper-checkbox>
-                    </div>
-                    <br />
-                    <div>
-                        <paper-checkbox class="chkDisplayUnairedEpisodes">${LabelUnairedMissingEpisodesWithinSeasons}</paper-checkbox>
-                    </div>
+                <br/>
+                <div class="checkboxList">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkDisplayMissingEpisodes" />
+                        <span>${LabelDisplayMissingEpisodesWithinSeasons}</span>
+                    </label>
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkDisplayUnairedEpisodes" />
+                        <span>${LabelUnairedMissingEpisodesWithinSeasons}</span>
+                    </label>
                 </div>
             </div>
             <button is="emby-button" type="submit" class="raised submit block btnSave hide"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
diff --git a/dashboard-ui/mypreferenceslanguages.html b/dashboard-ui/mypreferenceslanguages.html
index 9009bc3783..1423d8578d 100644
--- a/dashboard-ui/mypreferenceslanguages.html
+++ b/dashboard-ui/mypreferenceslanguages.html
@@ -1,4 +1,4 @@
-<div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderPlaybackSettings}" data-require="scripts/mypreferenceslanguages,paper-checkbox,emby-button" data-backbutton="true" data-menubutton="false">
+<div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderPlaybackSettings}" data-require="scripts/mypreferenceslanguages,emby-checkbox,emby-button" data-backbutton="true" data-menubutton="false">
 
     <div data-role="content">
 
@@ -9,54 +9,55 @@
                 <h1>
                     ${HeaderAudioSettings}
                 </h1>
-                <div class="detailSectionContent">
-                    <br />
-                    <div>
-                        <label for="selectAudioLanguage" class="selectLabel">${LabelAudioLanguagePreference}</label>
-                        <select id="selectAudioLanguage" data-mini="true"></select>
-                    </div>
-                    <br />
-                    <paper-checkbox class="chkPlayDefaultAudioTrack">${LabelPlayDefaultAudioTrack}</paper-checkbox>
+                <br />
+                <div>
+                    <label for="selectAudioLanguage" class="selectLabel">${LabelAudioLanguagePreference}</label>
+                    <select id="selectAudioLanguage" data-mini="true"></select>
                 </div>
+                <br />
+                <label class="checkboxContainer">
+                    <input type="checkbox" is="emby-checkbox" class="chkPlayDefaultAudioTrack" />
+                    <span>${LabelPlayDefaultAudioTrack}</span>
+                </label>
             </div>
             <div class="detailSection">
                 <h1>
                     ${HeaderSubtitleSettings}
                 </h1>
-                <div class="detailSectionContent">
-                    <br />
-                    <div>
-                        <label for="selectSubtitleLanguage" class="selectLabel">${LabelSubtitleLanguagePreference}</label>
-                        <select id="selectSubtitleLanguage" data-mini="true"></select>
-                    </div>
-                    <br />
-                    <div>
-                    </div>  <br />
-                    <label for="selectSubtitlePlaybackMode" class="selectLabel">${LabelSubtitlePlaybackMode}</label>
-                    <select id="selectSubtitlePlaybackMode" data-mini="true">
-                        <option value="Default">${OptionDefaultSubtitles}</option>
-                        <option value="Smart">${OptionSmartSubtitles}</option>
-                        <option value="OnlyForced">${OptionOnlyForcedSubtitles}</option>
-                        <option value="Always">${OptionAlwaysPlaySubtitles}</option>
-                        <option value="None">${OptionNoSubtitles}</option>
-                    </select>
-                    <div class="fieldDescription subtitlesDefaultHelp subtitlesHelp" style="display: none;">${OptionDefaultSubtitlesHelp}</div>
-                    <div class="fieldDescription subtitlesSmartHelp subtitlesHelp" style="display: none;">${OptionSmartSubtitlesHelp}</div>
-                    <div class="fieldDescription subtitlesAlwaysHelp subtitlesHelp" style="display: none;">${OptionAlwaysPlaySubtitlesHelp}</div>
-                    <div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp" style="display: none;">${OptionOnlyForcedSubtitlesHelp}</div>
-                    <div class="fieldDescription subtitlesNoneHelp subtitlesHelp" style="display: none;">${OptionNoSubtitlesHelp}</div>
+                <br />
+                <div>
+                    <label for="selectSubtitleLanguage" class="selectLabel">${LabelSubtitleLanguagePreference}</label>
+                    <select id="selectSubtitleLanguage" data-mini="true"></select>
                 </div>
+                <br />
+                <div>
+                </div>  <br />
+                <label for="selectSubtitlePlaybackMode" class="selectLabel">${LabelSubtitlePlaybackMode}</label>
+                <select id="selectSubtitlePlaybackMode" data-mini="true">
+                    <option value="Default">${OptionDefaultSubtitles}</option>
+                    <option value="Smart">${OptionSmartSubtitles}</option>
+                    <option value="OnlyForced">${OptionOnlyForcedSubtitles}</option>
+                    <option value="Always">${OptionAlwaysPlaySubtitles}</option>
+                    <option value="None">${OptionNoSubtitles}</option>
+                </select>
+                <div class="fieldDescription subtitlesDefaultHelp subtitlesHelp" style="display: none;">${OptionDefaultSubtitlesHelp}</div>
+                <div class="fieldDescription subtitlesSmartHelp subtitlesHelp" style="display: none;">${OptionSmartSubtitlesHelp}</div>
+                <div class="fieldDescription subtitlesAlwaysHelp subtitlesHelp" style="display: none;">${OptionAlwaysPlaySubtitlesHelp}</div>
+                <div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp" style="display: none;">${OptionOnlyForcedSubtitlesHelp}</div>
+                <div class="fieldDescription subtitlesNoneHelp subtitlesHelp" style="display: none;">${OptionNoSubtitlesHelp}</div>
 
             </div>
             <div class="detailSection cinemaModeOptions" style="display:none;">
                 <h1>
                     ${HeaderCinemaMode}
                 </h1>
-                <div class="detailSectionContent">
-                    <br />
-                    <paper-checkbox class="chkEnableCinemaMode">${LabelEnableCinemaMode}</paper-checkbox>
-
-                    <div class="fieldDescription paperCheckboxFieldDescription">${CinemaModeConfigurationHelp}</div>
+                <br/>
+                <div class="checkboxContainer">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkEnableCinemaMode" />
+                        <span>${LabelEnableCinemaMode}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${CinemaModeConfigurationHelp}</div>
                 </div>
 
             </div>
@@ -65,26 +66,30 @@
                 <h1>
                     ${HeaderAdvanced}
                 </h1>
-                <div class="detailSectionContent">
-                    <br />
-                    <div>
-                        <label for="selectMaxBitrate" class="selectLabel">${LabelMaxStreamingBitrate}</label>
-                        <select id="selectMaxBitrate" data-mini="true"></select>
-                    </div>
-                    <br />
-                    <div>
-                        <label for="selectMaxChromecastBitrate" class="selectLabel">${LabelMaxChromecastBitrate}</label>
-                        <select id="selectMaxChromecastBitrate" data-mini="true"></select>
-                    </div>
-                    <div style="margin-top:2em;">
-                        <paper-checkbox class="chkEpisodeAutoPlay">${OptionPlayNextEpisodeAutomatically}</paper-checkbox>
-                    </div>
-                    <div class="fldExternalPlayer" style="margin-top:2em;display: none;">
-                        <paper-checkbox class="chkExternalVideoPlayer">${OptionEnableExternalVideoPlayers}</paper-checkbox>
-                        <div class="fieldDescription paperCheckboxFieldDescription">
-                            <div style="display:none;" class="labelGenericExternalPlayers">${LabelExternalPlayersHelp}</div>
-                            <div style="display:none;" class="labelNativeExternalPlayers">${LabelNativeExternalPlayersHelp}</div>
-                        </div>
+                <br />
+                <div>
+                    <label for="selectMaxBitrate" class="selectLabel">${LabelMaxStreamingBitrate}</label>
+                    <select id="selectMaxBitrate" data-mini="true"></select>
+                </div>
+                <br />
+                <div>
+                    <label for="selectMaxChromecastBitrate" class="selectLabel">${LabelMaxChromecastBitrate}</label>
+                    <select id="selectMaxChromecastBitrate" data-mini="true"></select>
+                </div>
+                <br />
+                <label class="checkboxContainer">
+                    <input type="checkbox" is="emby-checkbox" class="chkEpisodeAutoPlay" />
+                    <span>${OptionPlayNextEpisodeAutomatically}</span>
+                </label>
+
+                <div class="checkboxContainer fldExternalPlayer">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkExternalVideoPlayer" />
+                        <span>${OptionEnableExternalVideoPlayers}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">
+                        <div style="display:none;" class="labelGenericExternalPlayers">${LabelExternalPlayersHelp}</div>
+                        <div style="display:none;" class="labelNativeExternalPlayers">${LabelNativeExternalPlayersHelp}</div>
                     </div>
                 </div>
             </div>
diff --git a/dashboard-ui/myprofile.html b/dashboard-ui/myprofile.html
index e8aebb6df6..84b45de575 100644
--- a/dashboard-ui/myprofile.html
+++ b/dashboard-ui/myprofile.html
@@ -1,4 +1,4 @@
-<div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage noSecondaryNavPage" data-title="${HeaderProfile}" data-require="emby-collapsible,scripts/myprofile,paper-checkbox,paper-input,emby-button" data-backbutton="true" data-menubutton="false">
+<div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage noSecondaryNavPage" data-title="${HeaderProfile}" data-require="emby-collapsible,scripts/myprofile,emby-checkbox,emby-input,emby-button" data-backbutton="true" data-menubutton="false">
 
     <div data-role="content">
         <br />
@@ -45,24 +45,20 @@
                 <h1>
                     ${HeaderPassword}
                 </h1>
-                <div class="detailSectionContent">
-                    <div id="fldCurrentPassword" style="display: none;">
-                        <paper-input type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off"></paper-input>
-                    </div>
-                    <br />
-                    <div>
-                        <paper-input type="password" id="txtNewPassword" label="${LabelNewPassword}" autocomplete="off"></paper-input>
-                    </div>
-                    <br />
-                    <div>
-                        <paper-input type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off"></paper-input>
-                    </div>
-                    <br />
-                    <div>
-                        <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
-                        <div id="btnResetPassword" style="display: none;">
-                            <button is="emby-button" type="button" class="raised cancel block" onclick="UpdatePasswordPage.resetPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetPassword}</span></button>
-                        </div>
+                <br />
+                <div id="fldCurrentPassword" style="display: none;" class="inputContainer">
+                    <input is="emby-input" type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off" />
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="password" id="txtNewPassword" label="${LabelNewPassword}" autocomplete="off" />
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off" />
+                </div>
+                <div>
+                    <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+                    <div id="btnResetPassword" style="display: none;">
+                        <button is="emby-button" type="button" class="raised cancel block" onclick="UpdatePasswordPage.resetPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetPassword}</span></button>
                     </div>
                 </div>
             </div>
@@ -72,23 +68,22 @@
                 <h1>
                     ${HeaderEasyPinCode}
                 </h1>
-                <div class="detailSectionContent">
-                    <br />
-                    <div>${EasyPasswordHelp}</div>
-                    <br />
-                    <div>
-                        <paper-input type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5"></paper-input>
-                    </div>
-                    <br />
-                    <div>
-                        <paper-checkbox class="chkEnableLocalEasyPassword">${LabelInNetworkSignInWithEasyPassword}</paper-checkbox>
-                        <div class="fieldDescription paperCheckboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
-                    </div>
-                    <br /><br />
-                    <div>
-                        <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
-                        <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised cancel block hide" onclick="UpdatePasswordPage.resetEasyPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetEasyPassword}</span></button>
-                    </div>
+                <br />
+                <div>${EasyPasswordHelp}</div>
+                <br />
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" />
+                </div>
+                <div class="checkboxContainer">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkEnableLocalEasyPassword" />
+                        <span>${LabelInNetworkSignInWithEasyPassword}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
+                </div>
+                <div>
+                    <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+                    <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised cancel block hide" onclick="UpdatePasswordPage.resetEasyPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetEasyPassword}</span></button>
                 </div>
             </div>
         </form>
diff --git a/dashboard-ui/mysyncsettings.html b/dashboard-ui/mysyncsettings.html
index cd9e0aef85..7c12870f2b 100644
--- a/dashboard-ui/mysyncsettings.html
+++ b/dashboard-ui/mysyncsettings.html
@@ -1,4 +1,4 @@
-<div id="syncPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${ButtonSyncSettings}" data-require="scripts/mysyncsettings,paper-checkbox,paper-input,emby-button,paper-icon-button-light" data-backbutton="true" data-menubutton="false">
+<div id="syncPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${ButtonSyncSettings}" data-require="scripts/mysyncsettings,paper-checkbox,emby-input,emby-button,paper-icon-button-light" data-backbutton="true" data-menubutton="false">
 
     <div data-role="content">
         <form class="userProfileSettingsForm" style="margin: 0 auto;">
@@ -6,30 +6,30 @@
             <h1>
                 ${HeaderSync}
             </h1>
-            <div class="detailSectionContent">
 
-                <div class="fldSyncPath hide">
-                    <paper-input type="text" id="txtSyncPath" label="${LabelSyncPath}" style="display:inline-block;width:80%;"></paper-input>
-                    <button type="button" is="paper-icon-button-light" class="btnSelectSyncPath"><iron-icon icon="search"></iron-icon></button>
+            <br />
+            <div class="inputContainer fldSyncPath hide">
+                <div style="display: flex; align-items: center;">
+                    <div style="flex-grow:1;">
+                        <input is="emby-input" id="txtSyncPath" class="txtSyncPath" label="${LabelSyncPath}" autocomplete="off" />
+                    </div>
+                    <button type="button" is="paper-icon-button-light" id="btnSelectSyncPath"><iron-icon icon="search"></iron-icon></button>
                 </div>
+            </div>
 
-                <br />
-                <div>
-                    <paper-checkbox id="chkWifi">${OptionSyncOnlyOnWifi}</paper-checkbox>
-                </div>
+            <div>
+                <paper-checkbox id="chkWifi">${OptionSyncOnlyOnWifi}</paper-checkbox>
             </div>
 
             <br />
             <h1>
                 ${HeaderCameraUpload}
             </h1>
-            <div class="detailSectionContent">
 
-                <p>${SelectCameraUploadServers}</p>
+            <p>${SelectCameraUploadServers}</p>
 
-                <br />
-                <div class="paperCheckboxList uploadServerList">
-                </div>
+            <br />
+            <div class="paperCheckboxList uploadServerList">
             </div>
 
             <br />
diff --git a/dashboard-ui/playbackconfiguration.html b/dashboard-ui/playbackconfiguration.html
index 5c396d5247..fdf94ff898 100644
--- a/dashboard-ui/playbackconfiguration.html
+++ b/dashboard-ui/playbackconfiguration.html
@@ -1,31 +1,29 @@
-<div id="playbackConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-require="scripts/playbackconfiguration,paper-input,emby-button">
+<div id="playbackConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-require="scripts/playbackconfiguration,emby-input,emby-button">
 
     <div data-role="content">
         <div class="content-primary">
 
             <form class="playbackConfigurationForm">
-                <div>
-                    <ul data-role="listview" class="ulForm">
-                        <li>
-                            <paper-input type="number" id="txtMinResumePct" name="txtMinResumePct" pattern="[0-9]*" required min="0" max="100" label="${LabelMinResumePercentage}"></paper-input>
-                            <div class="fieldDescription">
-                                ${LabelMinResumePercentageHelp}
-                            </div>
-                        </li>
-                        <li>
-                            <paper-input type="number" id="txtMaxResumePct" name="txtMaxResumePct" pattern="[0-9]*" required min="1" max="100" label="${LabelMaxResumePercentage}"></paper-input>
-                            <div class="fieldDescription">
-                                ${LabelMaxResumePercentageHelp}
-                            </div>
-                        </li>
-                        <li>
-                            <paper-input type="number" id="txtMinResumeDuration" name="txtMinResumeDuration" pattern="[0-9]*" required min="0" label="${LabelMinResumeDuration}"></paper-input>
-                            <div class="fieldDescription">
-                                ${LabelMinResumeDurationHelp}
-                            </div>
-                        </li>
-                    </ul>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtMinResumePct" name="txtMinResumePct" pattern="[0-9]*" required min="0" max="100" label="${LabelMinResumePercentage}"></input>
+                    <div class="fieldDescription">
+                        ${LabelMinResumePercentageHelp}
+                    </div>
                 </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtMaxResumePct" name="txtMaxResumePct" pattern="[0-9]*" required min="1" max="100" label="${LabelMaxResumePercentage}"></input>
+                    <div class="fieldDescription">
+                        ${LabelMaxResumePercentageHelp}
+                    </div>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtMinResumeDuration" name="txtMinResumeDuration" pattern="[0-9]*" required min="0" label="${LabelMinResumeDuration}"></input>
+                    <div class="fieldDescription">
+                        ${LabelMinResumeDurationHelp}
+                    </div>
+                </div>
+
+
                 <br />
                 <ul data-role="listview" class="ulForm">
                     <li>
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index e4fa32531a..db920bb6ea 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -260,36 +260,6 @@
         LibraryBrowser.refreshDetailImageUserData(page.querySelector('.detailImageContainer'), item);
     }
 
-    function onWebSocketMessage(e, data) {
-
-        var msg = data;
-        var page = $($.mobile.activePage)[0];
-
-        if (msg.MessageType === "UserDataChanged") {
-
-            if (currentItem && msg.Data.UserId == Dashboard.getCurrentUserId()) {
-
-                var key = currentItem.UserData.Key;
-
-                var userData = msg.Data.UserDataList.filter(function (u) {
-
-                    return u.Key == key;
-                })[0];
-
-                if (userData) {
-
-                    currentItem.UserData = userData;
-
-                    Dashboard.getCurrentUser().then(function (user) {
-
-                        refreshImage(page, currentItem, user);
-                    });
-                }
-            }
-        }
-
-    }
-
     function setPeopleHeader(page, item) {
 
         if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.MediaType == "Book" || item.MediaType == "Photo") {
@@ -2127,6 +2097,35 @@
         //    btnMore[i].icon = AppInfo.moreIcon;
         //}
 
+        function onWebSocketMessage(e, data) {
+
+            var msg = data;
+
+            if (msg.MessageType === "UserDataChanged") {
+
+                if (currentItem && msg.Data.UserId == Dashboard.getCurrentUserId()) {
+
+                    var key = currentItem.UserData.Key;
+
+                    var userData = msg.Data.UserDataList.filter(function (u) {
+
+                        return u.Key == key;
+                    })[0];
+
+                    if (userData) {
+
+                        currentItem.UserData = userData;
+
+                        Dashboard.getCurrentUser().then(function (user) {
+
+                            refreshImage(view, currentItem, user);
+                        });
+                    }
+                }
+            }
+
+        }
+
         view.addEventListener('viewbeforeshow', function () {
             var page = this;
 
diff --git a/dashboard-ui/scripts/myprofile.js b/dashboard-ui/scripts/myprofile.js
index 450b73fc92..482cd11082 100644
--- a/dashboard-ui/scripts/myprofile.js
+++ b/dashboard-ui/scripts/myprofile.js
@@ -349,7 +349,8 @@
 
         self.onSubmit = function () {
 
-            var page = $($.mobile.activePage)[0];
+            var form = this;
+            var page = $(form).parents('.page')[0];
 
             if ($('#txtNewPassword', page).val() != $('#txtNewPasswordConfirm', page).val()) {
 
@@ -370,7 +371,8 @@
 
         self.onLocalAccessSubmit = function () {
 
-            var page = $($.mobile.activePage)[0];
+            var form = this;
+            var page = $(form).parents('.page')[0];
 
             Dashboard.showLoadingMsg();
 
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 7e63fa8c71..0cd9b6c0da 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1798,6 +1798,7 @@ var AppInfo = {};
 
         define("emby-input", [embyWebComponentsBowerPath + "/emby-input/emby-input"], returnFirstDependency);
         define("emby-select", [embyWebComponentsBowerPath + "/emby-select/emby-select"], returnFirstDependency);
+        define("emby-checkbox", [embyWebComponentsBowerPath + "/emby-checkbox/emby-checkbox"], returnFirstDependency);
         define("collectionEditor", [embyWebComponentsBowerPath + "/collectioneditor/collectioneditor"], returnFirstDependency);
         define("playlistEditor", [embyWebComponentsBowerPath + "/playlisteditor/playlisteditor"], returnFirstDependency);
         define("recordingCreator", [embyWebComponentsBowerPath + "/recordingcreator/recordingcreator"], returnFirstDependency);
@@ -2592,7 +2593,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/itemlist.html',
-            dependencies: ['paper-checkbox'],
+            dependencies: [],
             autoFocus: false,
             controller: 'scripts/itemlistpage',
             transition: 'fade'
@@ -2754,7 +2755,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/movies.html',
-            dependencies: ['paper-checkbox', 'emby-button'],
+            dependencies: ['emby-button'],
             autoFocus: false,
             controller: 'scripts/moviesrecommended',
             transition: 'fade'
@@ -2983,7 +2984,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/tv.html',
-            dependencies: ['paper-checkbox', 'paper-icon-button-light', 'emby-button'],
+            dependencies: ['paper-icon-button-light', 'emby-button'],
             autoFocus: false,
             controller: 'scripts/tvrecommended',
             transition: 'fade'
diff --git a/dashboard-ui/scripts/sync.js b/dashboard-ui/scripts/sync.js
index dac9168f97..49a5d34532 100644
--- a/dashboard-ui/scripts/sync.js
+++ b/dashboard-ui/scripts/sync.js
@@ -81,7 +81,7 @@
 
         return new Promise(function (resolve, reject) {
 
-            require(['paper-checkbox', 'paper-input', 'emby-collapsible'], function () {
+            require(['emby-checkbox', 'emby-input', 'emby-collapsible'], function () {
 
                 appHost.appInfo().then(function (appInfo) {
                     renderFormInternal(options, appInfo, resolve);
@@ -101,15 +101,17 @@
 
         if (options.showName || dialogOptions.Options.indexOf('Name') != -1) {
 
-            html += '<div>';
-            html += '<paper-input type="text" id="txtSyncJobName" class="txtSyncJobName" required="required" label="' + Globalize.translate('LabelSyncJobName') + '"></paper-input>';
+            html += '<div class="inputContainer">';
+            html += '<input is="emby-input" type="text" id="txtSyncJobName" class="txtSyncJobName" required="required" label="' + Globalize.translate('LabelSyncJobName') + '"/>';
             html += '</div>';
             html += '<br/>';
         }
 
         html += '<div>';
         if (options.readOnlySyncTarget) {
-            html += '<paper-input type="text" id="selectSyncTarget" readonly label="' + Globalize.translate('LabelSyncTo') + '"></paper-input>';
+            html += '<div class="inputContainer">';
+            html += '<input is="emby-input" type="text" id="selectSyncTarget" readonly label="' + Globalize.translate('LabelSyncTo') + '"/>';
+            html += '</div>';
         } else {
             html += '<label for="selectSyncTarget" class="selectLabel">' + Globalize.translate('LabelSyncTo') + '</label>';
             html += '<select id="selectSyncTarget" required="required" data-mini="true">';
@@ -147,41 +149,47 @@
 
         html += '<div class="fldBitrate" style="display:none;">';
         html += '<br/>';
-        html += '<div>';
-        html += '<paper-input type="number" step=".1" min=".1" id="txtBitrate" label="' + Globalize.translate('LabelBitrateMbps') + '"></paper-input>';
+        html += '<div class="inputContainer">';
+        html += '<input is="emby-input" type="number" step=".1" min=".1" id="txtBitrate" label="' + Globalize.translate('LabelBitrateMbps') + '"/>';
         html += '</div>';
         html += '</div>';
 
         if (dialogOptions.Options.indexOf('UnwatchedOnly') != -1) {
             html += '<br/>';
-            html += '<div>';
-            html += '<paper-checkbox id="chkUnwatchedOnly">' + Globalize.translate('OptionSyncUnwatchedVideosOnly') + '</paper-checkbox>';
-            html += '<div class="fieldDescription paperCheckboxFieldDescription">' + Globalize.translate('OptionSyncUnwatchedVideosOnlyHelp') + '</div>';
+            html += '<div class="checkboxContainer">';
+            html += '<label>';
+            html += '<input is="emby-checkbox" type="checkbox" id="chkUnwatchedOnly"/>';
+            html += '<span>' + Globalize.translate('OptionSyncUnwatchedVideosOnly') + '</span>';
+            html += '</label>';
+            html += '<div class="fieldDescription checkboxFieldDescription">' + Globalize.translate('OptionSyncUnwatchedVideosOnlyHelp') + '</div>';
             html += '</div>';
         }
 
         if (dialogOptions.Options.indexOf('SyncNewContent') != -1 ||
             dialogOptions.Options.indexOf('ItemLimit') != -1) {
 
-            html += '<br/>';
             html += '<emby-collapsible title="' + Globalize.translate('HeaderAdvanced') + '">';
             html += '<div style="padding:0 0 1em;">';
             if (dialogOptions.Options.indexOf('SyncNewContent') != -1) {
                 html += '<br/>';
-                html += '<div>';
-                html += '<paper-checkbox id="chkSyncNewContent" checked>' + Globalize.translate('OptionAutomaticallySyncNewContent') + '</paper-checkbox>';
-                html += '<div class="fieldDescription paperCheckboxFieldDescription">' + Globalize.translate('OptionAutomaticallySyncNewContentHelp') + '</div>';
+                html += '<div class="checkboxContainer">';
+                html += '<label>';
+                html += '<input is="emby-checkbox" type="checkbox" id="chkSyncNewContent"/>';
+                html += '<span>' + Globalize.translate('OptionAutomaticallySyncNewContent') + '</span>';
+                html += '</label>';
+                html += '<div class="fieldDescription checkboxFieldDescription">' + Globalize.translate('OptionAutomaticallySyncNewContentHelp') + '</div>';
                 html += '</div>';
             }
 
             if (dialogOptions.Options.indexOf('ItemLimit') != -1) {
-                html += '<div>';
-                html += '<paper-input type="number" step="1" min="1" id="txtItemLimit" label="' + Globalize.translate('LabelItemLimit') + '"></paper-input>';
+                html += '<div class="inputContainer">';
+                html += '<input is="emby-input" type="number" step="1" min="1" id="txtItemLimit" label="' + Globalize.translate('LabelItemLimit') + '"/>';
                 html += '<div class="fieldDescription">' + Globalize.translate('LabelItemLimitHelp') + '</div>';
                 html += '</div>';
             }
-            html += '</emby-collapsible>';
             html += '</div>';
+            html += '</emby-collapsible>';
+            html += '<br/>';
         }
 
         //html += '</div>';
diff --git a/dashboard-ui/syncsettings.html b/dashboard-ui/syncsettings.html
index 306430a528..323f8dd205 100644
--- a/dashboard-ui/syncsettings.html
+++ b/dashboard-ui/syncsettings.html
@@ -1,42 +1,48 @@
-<div id="syncSettingsPage" data-role="page" class="page type-interior withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Sync" data-require="scripts/syncsettings,paper-checkbox,paper-input,emby-button,paper-icon-button-light">
+<div id="syncSettingsPage" data-role="page" class="page type-interior withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Sync" data-require="scripts/syncsettings,paper-checkbox,emby-input,emby-button,paper-icon-button-light,material-icons">
 
     <div data-role="content">
         <div class="content-primary">
 
             <form class="syncSettingsForm">
 
-                <ul data-role="listview" class="ulForm">
-                    <li>
-                        <paper-input type="text" id="txtSyncTempPath" label="${LabelSyncTempPath}" style="display: inline-block; width: 84%;"></paper-input>
-                        <button type="button" is="paper-icon-button-light" id="btnSelectSyncTempPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
-                        <div class="fieldDescription">
-                            ${LabelSyncTempPathHelp}
+                <div class="inputContainer">
+                    <div style="display: flex; align-items: center;">
+                        <div style="flex-grow:1;">
+                            <input is="emby-input" type="text" id="txtSyncTempPath" label="${LabelSyncTempPath}" />
                         </div>
-                    </li>
-                    <li>
-                        <paper-input type="number" min="0" step=".5" id="txtUploadSpeedLimit" label="${LabelUploadSpeedLimit}"></paper-input>
-                    </li>
-                    <li>
-                        <paper-input type="number" min="0" max="8" step="1" id="txtCpuCoreLimit" label="${LabelConversionCpuCoreLimit}" required="required"></paper-input>
-                        <div class="fieldDescription">
-                            ${LabelConversionCpuCoreLimitHelp}
-                        </div>
-                    </li>
-                    <li>
-                        <paper-checkbox id="chkEnableFullSpeedConversion">${OptionEnableFullSpeedConversion}</paper-checkbox>
-                        <div class="fieldDescription paperCheckboxFieldDescription">
-                            ${OptionEnableFullSpeedConversionHelp}
-                        </div>
-                    </li>
-                </ul>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectSyncTempPath" title="${ButtonSelectDirectory}" class="autoSize"><i class="md-icon">search</i></button>
+                    </div>
+                    <div class="fieldDescription">${LabelSyncTempPathHelp}</div>
+                </div>
 
-                <ul data-role="listview" class="ulForm">
-                    <li>
-                        <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" min="0" step=".5" id="txtUploadSpeedLimit" label="${LabelUploadSpeedLimit}" />
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" min="0" max="8" step="1" id="txtCpuCoreLimit" label="${LabelConversionCpuCoreLimit}" required="required" />
+                    <div class="fieldDescription">
+                        ${LabelConversionCpuCoreLimitHelp}
+                    </div>
+                </div>
+                <div>
+                    <paper-checkbox id="chkEnableFullSpeedConversion">${OptionEnableFullSpeedConversion}</paper-checkbox>
+                    <div class="fieldDescription paperCheckboxFieldDescription">
+                        ${OptionEnableFullSpeedConversionHelp}
+                    </div>
+                </div>
+                <br />
+                <br />
+                <div>
+                    <button is="emby-button" type="submit" class="raised submit block">
+                        <i class="md-icon">check</i>
+                        <span>${ButtonSave}</span>
+                    </button>
 
-                        <button is="emby-button" type="button" class="raised cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></button>
-                    </li>
-                </ul>
+                    <button is="emby-button" type="button" class="raised cancel block btnCancel" onclick="history.back();">
+                        <i class="md-icon">close</i>
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </div>
             </form>
         </div>
     </div>