diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css b/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css
index 7de1e78129..ccbb2325f4 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css
@@ -332,4 +332,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider {
     color: #fff;
     border-radius: 1000px;
     font-size: 90%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 2a99f45888..d1ceaa86f1 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -1131,6 +1131,13 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     }
 }
 
+@media all and (max-height: 480px) {
+
+    .alphabetPicker {
+        font-size: 76%;
+    }
+}
+
 @media all and (min-height: 900px) {
 
     .alphabetPicker {
diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css
index 5ad04b3f21..5575f93f29 100644
--- a/dashboard-ui/css/mediaplayer-video.css
+++ b/dashboard-ui/css/mediaplayer-video.css
@@ -64,11 +64,6 @@
     padding-top: .5em;
 }
 
-    .videoAdvancedControls paper-icon-button {
-        width: 30px;
-        height: 30px;
-    }
-
 .nowPlayingInfo {
     text-align: center;
     padding: 1.5em 1em 2em 1em;
diff --git a/dashboard-ui/css/nowplayingbar.css b/dashboard-ui/css/nowplayingbar.css
index f213a73b28..1a6e336bd9 100644
--- a/dashboard-ui/css/nowplayingbar.css
+++ b/dashboard-ui/css/nowplayingbar.css
@@ -77,22 +77,22 @@
     text-align: center;
 }
 
-.mediaButton {
-    box-sizing: content-box !important;
-}
+    .mediaButton i {
+        height: 40px;
+        width: 40px;
+        font-size: 40px;
+    }
 
-    .mediaButton.remoteControlButton, .mediaButton.muteButton, .mediaButton.unmuteButton {
-        height: 26px;
-        width: 26px;
+    .mediaButton.remoteControlButton i, .mediaButton.muteButton i, .mediaButton.unmuteButton i, .mediaButton.castButton i, .mediaButton.infoButton i {
+        height: 28px;
+        width: 28px;
+        font-size: 28px;
     }
 
 .nowPlayingDoubleText {
     top: -3px;
 }
 
-.nowPlayingBarInfoContainer {
-}
-
 .nowPlayingImage {
     display: inline-block;
     vertical-align: middle;
@@ -125,11 +125,6 @@
     max-width: 130px;
 }
 
-.toggleRepeatButton {
-    height: 32px;
-    width: 32px;
-}
-
 .repeatActive {
     color: #52B54B;
 }
@@ -194,6 +189,8 @@
     margin: 0 1em 0 auto;
     /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
     z-index: 2;
+    display: flex;
+    align-items: center;
 }
 
 .nowPlayingBarCurrentTime {
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
index 725949f1d3..95a74ff9e5 100644
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@@ -39,7 +39,7 @@
     <div class="pageTabContent ehsContent" id="moviesTab" data-index="1">
         <div class="alphaPicker alphabetPicker vertical">
         </div>
-        <div class="viewSettings">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .25em;">
             <div class="listTopPaging">
             </div>
         </div>
@@ -56,7 +56,7 @@
         <p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
     </div>
     <div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">
-        <div class="viewSettings">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .25em;">
 
             <div class="listTopPaging">
                 &nbsp;
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 74bd8e1019..e4da8a8f64 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -2897,7 +2897,7 @@
 
                 if (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) {
 
-                    html += '<div style="display:inline-block;margin-left:10px;">';
+                    html += '<div style="display:inline-block;">';
 
                     if (showControls) {
 
diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js
index 2fc6972549..d56689f1fb 100644
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/dashboard-ui/scripts/mediaplayer-video.js
@@ -728,14 +728,14 @@
             html += '<div class="videoTopControlsLogo"></div>';
             html += '<div class="videoAdvancedControls">';
 
-            html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton videoTrackControl hide" onclick="MediaPlayer.previousTrack();"><iron-icon icon="skip-previous"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton videoTrackControl hide" onclick="MediaPlayer.nextTrack();"><iron-icon icon="skip-next"></iron-icon></button>';
+            html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton videoTrackControl hide autoSize" onclick="MediaPlayer.previousTrack();"><i class="md-icon">skip_previous</i></button>';
+            html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton videoTrackControl hide autoSize" onclick="MediaPlayer.nextTrack();"><i class="md-icon">skip_next</i></button>';
 
             // Embedding onclicks due to issues not firing in cordova safari
-            html += '<button is="paper-icon-button-light" class="mediaButton videoAudioButton" onclick="MediaPlayer.showAudioTracksFlyout();"><iron-icon icon="audiotrack"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" class="mediaButton videoSubtitleButton" onclick="MediaPlayer.showSubtitleMenu();"><iron-icon icon="closed-caption"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" class="mediaButton videoQualityButton" onclick="MediaPlayer.showQualityFlyout();"><iron-icon icon="settings"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" class="mediaButton" onclick="MediaPlayer.stop();"><iron-icon icon="close"></iron-icon></button>';
+            html += '<button is="paper-icon-button-light" class="mediaButton videoAudioButton autoSize" onclick="MediaPlayer.showAudioTracksFlyout();"><i class="md-icon">audiotrack</i></button>';
+            html += '<button is="paper-icon-button-light" class="mediaButton videoSubtitleButton autoSize" onclick="MediaPlayer.showSubtitleMenu();"><i class="md-icon">closed_caption</i></button>';
+            html += '<button is="paper-icon-button-light" class="mediaButton videoQualityButton autoSize" onclick="MediaPlayer.showQualityFlyout();"><i class="md-icon">settings</i></button>';
+            html += '<button is="paper-icon-button-light" class="mediaButton autoSize" onclick="MediaPlayer.stop();"><i class="md-icon">close</i></button>';
 
             html += '</div>'; // videoAdvancedControls
             html += '</div>'; // videoTopControls
@@ -752,10 +752,10 @@
             html += '</div>'; // guide
 
             html += '<div class="videoControlButtons">';
-            html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton videoTrackControl hide" onclick="MediaPlayer.previousTrack();"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" id="video-playButton" class="mediaButton unpauseButton" onclick="MediaPlayer.unpause();"><iron-icon icon="play-arrow"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" id="video-pauseButton" class="mediaButton pauseButton" onclick="MediaPlayer.pause();"><iron-icon icon="pause"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton videoTrackControl hide" onclick="MediaPlayer.nextTrack();"><iron-icon icon="skip-next"></iron-icon></button>';
+            html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton videoTrackControl hide autoSize" onclick="MediaPlayer.previousTrack();"><i class="md-icon">skip_previous</i></button>';
+            html += '<button is="paper-icon-button-light" id="video-playButton" class="mediaButton unpauseButton autoSize" onclick="MediaPlayer.unpause();"><i class="md-icon">play_arrow</i></button>';
+            html += '<button is="paper-icon-button-light" id="video-pauseButton" class="mediaButton pauseButton autoSize" onclick="MediaPlayer.pause();"><i class="md-icon">pause</i></button>';
+            html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton videoTrackControl hide autoSize" onclick="MediaPlayer.nextTrack();"><i class="md-icon">skip_next</i></button>';
 
             html += '<div class="sliderContainer videoPositionSliderContainer" style="display:inline-flex;margin-right:2em;">';
             html += '<input type="range" is="emby-slider" pin step=".1" min="0" max="100" value="0" class="videoPositionSlider" />';
@@ -763,16 +763,16 @@
 
             html += '<div class="currentTime">--:--</div>';
 
-            html += '<button is="paper-icon-button-light" class="muteButton mediaButton" onclick="MediaPlayer.mute();"><iron-icon icon="volume-up"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" class="unmuteButton mediaButton" onclick="MediaPlayer.unMute();"><iron-icon icon="volume-off"></iron-icon></button>';
+            html += '<button is="paper-icon-button-light" class="muteButton mediaButton autoSize" onclick="MediaPlayer.mute();"><i class="md-icon">volume_up</i></button>';
+            html += '<button is="paper-icon-button-light" class="unmuteButton mediaButton autoSize" onclick="MediaPlayer.unMute();"><i class="md-icon">volume_off</i></button>';
 
             html += '<div class="sliderContainer" style="width:100px;vertical-align:middle;;margin-right:2em;display:inline-flex;">';
             html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="videoVolumeSlider"/>';
             html += '</div>'; // guide
 
-            html += '<button is="paper-icon-button-light" class="mediaButton castButton" onclick="MediaController.showPlayerSelection(this, false);" style="height:32px;width:32px;"><iron-icon icon="cast"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" class="mediaButton fullscreenButton" onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton"><iron-icon icon="fullscreen"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" class="mediaButton infoButton" onclick="MediaPlayer.toggleInfo();"><iron-icon icon="info"></iron-icon></button>';
+            html += '<button is="paper-icon-button-light" class="mediaButton castButton autoSize" onclick="MediaController.showPlayerSelection(this, false);" style="height:32px;width:32px;"><i class="md-icon">cast</i></button>';
+            html += '<button is="paper-icon-button-light" class="mediaButton fullscreenButton autoSize" onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton"><i class="md-icon">fullscreen</i></button>';
+            html += '<button is="paper-icon-button-light" class="mediaButton infoButton autoSize" onclick="MediaPlayer.toggleInfo();"><i class="md-icon">info</i></button>';
 
             html += '</div>';
 
diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js
index 3ec9617bed..c8796e9a1f 100644
--- a/dashboard-ui/scripts/nowplayingbar.js
+++ b/dashboard-ui/scripts/nowplayingbar.js
@@ -35,35 +35,35 @@
         // The onclicks are needed due to the return false above
         html += '<div class="nowPlayingBarCenter">';
 
-        html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><iron-icon icon="skip-previous"></iron-icon></button>';
+        html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton autoSize"><i class="md-icon">skip_previous</i></button>';
 
-        html += '<button is="paper-icon-button-light" class="unpauseButton mediaButton"><iron-icon icon="play-arrow"></iron-icon></button>';
-        html += '<button is="paper-icon-button-light" class="pauseButton mediaButton"><iron-icon icon="pause"></iron-icon></button>';
+        html += '<button is="paper-icon-button-light" class="unpauseButton mediaButton autoSize"><i class="md-icon">play_arrow</i></button>';
+        html += '<button is="paper-icon-button-light" class="pauseButton mediaButton autoSize"><i class="md-icon">pause</i></button>';
 
-        html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><iron-icon icon="stop"></iron-icon></button>';
-        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><iron-icon icon="skip-next"></iron-icon></button>';
+        html += '<button is="paper-icon-button-light" class="stopButton mediaButton autoSize"><i class="md-icon">stop</i></button>';
+        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton autoSize"><i class="md-icon">skip_next</i></button>';
 
         html += '<div class="nowPlayingBarCurrentTime"></div>';
         html += '</div>';
 
         html += '<div class="nowPlayingBarRight">';
 
-        html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><iron-icon icon="volume-up"></iron-icon></button>';
-        html += '<button is="paper-icon-button-light" class="unmuteButton mediaButton"><iron-icon icon="volume-off"></iron-icon></button>';
+        html += '<button is="paper-icon-button-light" class="muteButton mediaButton autoSize"><i class="md-icon">volume_up</i></button>';
+        html += '<button is="paper-icon-button-light" class="unmuteButton mediaButton autoSize"><i class="md-icon">volume_off</i></button>';
 
         html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer" style="width:100px;vertical-align:middle;display:inline-flex;">';
         html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingBarVolumeSlider"/>';
         html += '</div>';
 
-        html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><iron-icon icon="repeat"></iron-icon></button>';
+        html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton autoSize"><i class="md-icon">repeat</i></button>';
 
         html += '<div class="nowPlayingBarUserDataButtons">';
         html += '</div>';
 
-        html += '<button is="paper-icon-button-light" class="unpauseButton mediaButton"><iron-icon icon="play-arrow"></iron-icon></button>';
-        html += '<button is="paper-icon-button-light" class="pauseButton mediaButton"><iron-icon icon="pause"></iron-icon></button>';
-        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><iron-icon icon="tablet-android"></iron-icon></button>';
-        html += '<button is="paper-icon-button-light" class="playlistButton mediaButton"><iron-icon icon="queue-music"></iron-icon></button>';
+        html += '<button is="paper-icon-button-light" class="unpauseButton mediaButton autoSize"><i class="md-icon">play_arrow</i></button>';
+        html += '<button is="paper-icon-button-light" class="pauseButton mediaButton autoSize"><i class="md-icon">pause</i></button>';
+        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton autoSize"><i class="md-icon">tablet_android</i></button>';
+        html += '<button is="paper-icon-button-light" class="playlistButton mediaButton autoSize"><i class="md-icon">queue_music</i></button>';
 
         html += '</div>';
 
@@ -227,7 +227,7 @@
             }
         });
 
-        toggleRepeatButtonIcon = toggleRepeatButton.querySelector('iron-icon');
+        toggleRepeatButtonIcon = toggleRepeatButton.querySelector('i');
 
         // Unfortunately this is necessary because the polymer elements might not be ready immediately and there doesn't seem to be an event-driven way to find out when
         setTimeout(function () {
@@ -451,14 +451,14 @@
         }
 
         if (playState.RepeatMode == 'RepeatAll') {
-            toggleRepeatButtonIcon.icon = "repeat";
+            toggleRepeatButtonIcon.innerHTML = "repeat";
             toggleRepeatButton.classList.add('repeatActive');
         }
         else if (playState.RepeatMode == 'RepeatOne') {
-            toggleRepeatButtonIcon.icon = "repeat-one";
+            toggleRepeatButtonIcon.innerHTML = "repeat_one";
             toggleRepeatButton.classList.add('repeatActive');
         } else {
-            toggleRepeatButtonIcon.icon = "repeat";
+            toggleRepeatButtonIcon.innerHTML = "repeat";
             toggleRepeatButton.classList.remove('repeatActive');
         }
 
diff --git a/dashboard-ui/tv.html b/dashboard-ui/tv.html
index e115cf0acf..9bff4b0faa 100644
--- a/dashboard-ui/tv.html
+++ b/dashboard-ui/tv.html
@@ -51,13 +51,11 @@
         </div>
     </div>
     <div class="pageTabContent ehsContent" id="seriesTab" data-index="3">
-        <div style="text-align: center;padding:.7em 0;">
-            <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
-                <div class="paging"></div>
-                <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
-                <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
-                <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
-            </div>
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
         </div>
 
         <div class="alphaPicker alphabetPicker vertical">
@@ -65,12 +63,12 @@
 
         <div class="itemsContainer itemsContainerWithAlphaPicker">
         </div>
-        <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
         </div>
     </div>
     <div class="pageTabContent ehsContent" id="episodesTab" data-index="4">
-        <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
             <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
@@ -78,7 +76,7 @@
         </div>
         <div class="itemsContainer">
         </div>
-        <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
         </div>
     </div>