diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
index bff74004f9..9b04feb8b3 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
@@ -1,6 +1,6 @@
 [is="emby-button"] {
     position: relative;
-    display: inline-flex;
+    display: inline-block;
     align-items: center;
     box-sizing: border-box;
     margin: 0 .29em;
@@ -30,12 +30,42 @@
     text-transform: uppercase;
 }
 
-    [is="emby-button"].raised {
+    [is="emby-button"].raised, [is="emby-button"].fab {
         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
     }
 
+    [is="emby-button"].fab {
+        border-radius: 50%;
+        min-width: 56px;
+        min-height: 56px;
+        height: 5.2vh;
+        width: 5.2vh;
+        background-color: #444;
+        padding: .6em;
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        color: #fff !important;
+        margin: 0;
+    }
+
+        [is="emby-button"].fab.mini {
+            min-width: 40px !important;
+            min-height: 40px !important;
+            height: 3.3vh !important;
+            width: 3.3vh !important;
+        }
+
+        [is="emby-button"].fab iron-icon {
+            width: 100%;
+            height: 100%;
+            vertical-align: middle;
+        }
+
     [is="emby-button"].block {
-        display: flex;
+        display: block;
         align-items: center;
         justify-content: center;
         margin: .25em 0;
diff --git a/dashboard-ui/components/directorybrowser/directorybrowser.js b/dashboard-ui/components/directorybrowser/directorybrowser.js
index ab92b23adf..c18a87dcd1 100644
--- a/dashboard-ui/components/directorybrowser/directorybrowser.js
+++ b/dashboard-ui/components/directorybrowser/directorybrowser.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'jQuery', 'paper-item', 'paper-input', 'paper-fab', 'paper-item-body', 'paper-icon-button-light'], function (dialogHelper, $) {
+define(['dialogHelper', 'jQuery', 'paper-item', 'paper-input', 'emby-button', 'paper-item-body', 'paper-icon-button-light'], function (dialogHelper, $) {
 
     var systemInfo;
     function getSystemInfo() {
@@ -219,7 +219,7 @@
 
                 var html = '';
                 html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+                html += '<button type="button" is="emby-button" icon="arrow-back" class="fab mini btnCloseDialog" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>';
                 html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + (options.header || Globalize.translate('HeaderSelectPath')) + '</div>';
                 html += '</h2>';
 
diff --git a/dashboard-ui/components/imageeditor/imageeditor.js b/dashboard-ui/components/imageeditor/imageeditor.js
index ebb2146c39..4e0217a421 100644
--- a/dashboard-ui/components/imageeditor/imageeditor.js
+++ b/dashboard-ui/components/imageeditor/imageeditor.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'jQuery', 'css!css/metadataeditor.css', 'paper-fab', 'paper-icon-button-light'], function (dialogHelper, $) {
+define(['dialogHelper', 'jQuery', 'css!css/metadataeditor.css', 'emby-button', 'paper-fab', 'paper-icon-button-light'], function (dialogHelper, $) {
 
     var currentItem;
     var currentDeferred;
@@ -257,7 +257,7 @@
 
                 var html = '';
                 html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
+                html += '<button type="button" is="emby-button" icon="arrow-back" class="fab mini btnCloseDialog" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>';
                 html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + item.Name + '</div>';
                 html += '</h2>';
 
diff --git a/dashboard-ui/components/imageuploader/imageuploader.js b/dashboard-ui/components/imageuploader/imageuploader.js
index a95cd39d58..cfbab4ed06 100644
--- a/dashboard-ui/components/imageuploader/imageuploader.js
+++ b/dashboard-ui/components/imageuploader/imageuploader.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'jQuery', 'paper-fab'], function (dialogHelper, $) {
+define(['dialogHelper', 'jQuery', 'emby-button'], function (dialogHelper, $) {
 
     var currentItemId;
     var currentFile;
@@ -149,7 +149,7 @@
 
             var html = '';
             html += '<h2 class="dialogHeader">';
-            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
+            html += '<button type="button" is="emby-button" icon="arrow-back" class="fab mini btnCloseDialog" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>';
             html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderUploadImage') + '</div>';
             html += '</h2>';
 
diff --git a/dashboard-ui/components/itemidentifier/itemidentifier.js b/dashboard-ui/components/itemidentifier/itemidentifier.js
index 7d96414b2a..7dfd030014 100644
--- a/dashboard-ui/components/itemidentifier/itemidentifier.js
+++ b/dashboard-ui/components/itemidentifier/itemidentifier.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'loading', 'jQuery', 'paper-fab', 'emby-input', 'paper-checkbox', 'paper-icon-button-light'], function (dialogHelper, loading, $) {
+define(['dialogHelper', 'loading', 'jQuery', 'emby-input', 'paper-checkbox', 'paper-icon-button-light'], function (dialogHelper, loading, $) {
 
     var currentItem;
     var currentItemType;
diff --git a/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js b/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
index d0413f1a94..53c4b57165 100644
--- a/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
+++ b/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'jQuery', 'paper-fab', 'paper-item-body', 'paper-icon-item', 'paper-icon-button-light'], function (dialogHelper, $) {
+define(['dialogHelper', 'jQuery', 'emby-button', 'paper-item-body', 'paper-icon-item', 'paper-icon-button-light'], function (dialogHelper, $) {
 
     var currentDeferred;
     var hasChanges;
@@ -59,7 +59,7 @@
 
         html += '<paper-icon-item role="menuitem" class="lnkPath">';
 
-        html += '<paper-fab mini style="background:#52B54B;" icon="folder" item-icon></paper-fab>';
+        html += '<button type="button" is="emby-button" style="background:#52B54B;" class="fab mini" item-icon><iron-icon icon="folder"></iron-icon></button>';
 
         html += '<paper-item-body>';
         html += path;
@@ -163,7 +163,7 @@
 
                 var html = '';
                 html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
+                html += '<button type="button" is="emby-button" icon="arrow-back" class="fab mini btnCloseDialog" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>';
 
                 html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + options.library.Name + '</div>';
                 html += '</h2>';
diff --git a/dashboard-ui/components/viewcontainer-lite.js b/dashboard-ui/components/viewcontainer-lite.js
index 846aa924e3..1d5d81c649 100644
--- a/dashboard-ui/components/viewcontainer-lite.js
+++ b/dashboard-ui/components/viewcontainer-lite.js
@@ -209,6 +209,8 @@ define(['browser'], function (browser) {
 
     function animate(newAnimatedPage, oldAnimatedPage, transition, isBack) {
 
+        transition = transition || 'fade';
+
         if (enableAnimation() && oldAnimatedPage && newAnimatedPage.animate) {
             if (transition == 'slide') {
                 return slide(newAnimatedPage, oldAnimatedPage, transition, isBack);
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index c85b5331fd..f749347235 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -402,24 +402,19 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     font-size: 90%;
 }
 
-.detailFloatingButton {
-    width: 56px;
-    height: 56px;
+[is="emby-button"].detailFloatingButton {
+    width: 56px !important;
+    height: 56px !important;
     top: -28px;
     position: absolute;
     right: 25%;
     background-color: #52B54B !important;
 }
 
-.btnFloatingRecord {
+[is="emby-button"].btnFloatingRecord {
     background-color: #cc3333 !important;
 }
 
-.detailFloatingButton iron-icon {
-    width: 40px;
-    height: 40px;
-}
-
 @media all and (max-width: 1000px) {
 
     .primaryDetailsContainer {
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index e25e019669..a20044ffa6 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -9,8 +9,8 @@
 
     <div class="detailPageContent" style="position:relative;">
 
-        <paper-fab class="btnPlay detailFloatingButton hide" icon="play-arrow" title="${ButtonPlay}"></paper-fab>
-        <paper-fab class="btnFloatingRecord detailFloatingButton hide" icon="videocam" title="${ButtonRecord}"></paper-fab>
+        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab" title="${ButtonPlay}"><iron-icon icon="play-arrow"></iron-icon></button>
+        <button is="emby-button" type="button" class="btnFloatingRecord detailFloatingButton hide fab" title="${ButtonRecord}"><iron-icon icon="videocam"></iron-icon></button>
 
         <div class="detailImageContainer">
         </div>
@@ -130,7 +130,7 @@
                     <p id="awardSummary"></p>
                     <div class="paperList" id="criticRatingSummary">
                         <paper-icon-item>
-                            <paper-fab mini style="background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(css/images/fresh.png);" item-icon></paper-fab>
+                            <button is="emby-button" type="button" class="mini fab" style="background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(css/images/fresh.png);" item-icon></button>
                             <paper-item-body three-line>
                                 <div>TOMATOMETER®</div>
                                 <div class="criticRatingScore"></div>
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index a99df5d239..59b98fa0cb 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -742,7 +742,7 @@
                 var helpUrl = page.getAttribute('data-helpurl');
 
                 if (helpUrl) {
-                    html += '<a href="' + helpUrl + '" target="_blank" class="clearLink" style="margin-left:2em;" title="' + Globalize.translate('ButtonHelp') + '"><button is="emby-button" type="button" class="accent" style="margin:0;font-weight:normal;font-size:13px;padding:.25em;display:flex;align-items:center;"><iron-icon icon="info"></iron-icon><span>' + Globalize.translate('ButtonHelp') + '</span></button></a>';
+                    html += '<a href="' + helpUrl + '" target="_blank" class="clearLink" style="margin-left:2em;" title="' + Globalize.translate('ButtonHelp') + '"><button is="emby-button" type="button" class="accent" style="margin:0;font-weight:normal;font-size:13px;padding:.25em;display:block;align-items:center;"><iron-icon icon="info"></iron-icon><span>' + Globalize.translate('ButtonHelp') + '</span></button></a>';
                 }
             }
 
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index e503118c44..20cfbfbd34 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -2564,7 +2564,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/itemdetails.html',
-            dependencies: ['emby-button', 'tileitemcss', 'scripts/livetvcomponents', 'paper-fab', 'paper-item-body', 'paper-icon-item', 'paper-icon-button-light'],
+            dependencies: ['emby-button', 'tileitemcss', 'scripts/livetvcomponents', 'paper-item-body', 'paper-icon-item', 'paper-icon-button-light'],
             controller: 'scripts/itemdetailpage',
             autoFocus: false,
             transition: 'fade'