diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-radio/emby-radio.css b/dashboard-ui/bower_components/emby-webcomponents/emby-radio/emby-radio.css
index 2063c29314..382919ac1f 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-radio/emby-radio.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-radio/emby-radio.css
@@ -52,7 +52,7 @@
 }
 
 .mdl-radio__button:checked+.mdl-radio__label+.mdl-radio__outer-circle {
-    border: 2px solid #52b54b
+    border: 2px solid #00a4dc
 }
 
 .mdl-radio__button:disabled+.mdl-radio__label+.mdl-radio__outer-circle {
@@ -84,7 +84,7 @@
     transform: scale3d(0, 0, 0);
     -webkit-border-radius: 50%;
     border-radius: 50%;
-    background: #52b54b
+    background: #00a4dc
 }
 
 .mdl-radio__button:checked+.mdl-radio__label+.mdl-radio__outer-circle+.mdl-radio__inner-circle {
@@ -103,8 +103,8 @@
 }
 
 .mdl-radio__button:checked:focus+.mdl-radio__label+.mdl-radio__outer-circle+.mdl-radio__inner-circle {
-    -webkit-box-shadow: 0 0 0 10px rgba(82, 181, 75, .26);
-    box-shadow: 0 0 0 10px rgba(82, 181, 75, .26)
+    -webkit-box-shadow: 0 0 0 10px rgba(0,164,220, .26);
+    box-shadow: 0 0 0 10px rgba(0,164,220, .26)
 }
 
 .mdl-radio__label {
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 7c8004997b..38cad647b3 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
@@ -18,7 +18,7 @@ _:-ms-input-placeholder {
     user-select: none;
     outline: 0;
     padding: 1em 0;
-    color: #52B54B;
+    color: #00a4dc;
     -webkit-align-self: center;
     align-self: center;
     z-index: 1;
@@ -46,7 +46,7 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider::-moz-range-progress {
-    background: #52B54B
+    background: #00a4dc
 }
 
 .mdl-slider::-ms-track {
@@ -73,7 +73,7 @@ _:-ms-input-placeholder {
     box-sizing: border-box;
     -webkit-border-radius: 50%;
     border-radius: 50%;
-    background: #52B54B;
+    background: #00a4dc;
     border: none;
     -webkit-transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1), border .18s cubic-bezier(.4, 0, .2, 1), -webkit-box-shadow .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1);
     transition: transform .3s cubic-bezier(.4, 0, .2, 1), border .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1)
@@ -100,7 +100,7 @@ _:-ms-input-placeholder {
     height: 1.8em;
     box-sizing: border-box;
     border-radius: 50%;
-    background: #52B54B;
+    background: #00a4dc;
     border: none
 }
 
@@ -110,7 +110,7 @@ _:-ms-input-placeholder {
     height: 1.8em;
     box-sizing: border-box;
     border-radius: 50%;
-    background: #52B54B;
+    background: #00a4dc;
     border: none;
     transition: transform .3s cubic-bezier(.4, 0, .2, 1), border .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1)
 }
@@ -184,7 +184,7 @@ _:-ms-input-placeholder {
     width: 0;
     top: 0;
     bottom: 0;
-    background-color: #52B54B
+    background-color: #00a4dc
 }
 
 .mdl-slider-background-lower-clear {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-toggle/emby-toggle.css b/dashboard-ui/bower_components/emby-webcomponents/emby-toggle/emby-toggle.css
index ce49441496..c03115e976 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-toggle/emby-toggle.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-toggle/emby-toggle.css
@@ -59,7 +59,7 @@
 }
 
 .mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__track {
-    background: rgba(82, 181, 75, .5)
+    background: rgba(0,164,220, .5)
 }
 
 .mdl-switch__input[disabled]+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__track {
@@ -100,7 +100,7 @@
 }
 
 .mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__thumb {
-    background: #52b54b;
+    background: #00a4dc;
     left: 1.466em;
     -webkit-box-shadow: 0 3px .28em 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px .56em 0 rgba(0, 0, 0, .12);
     box-shadow: 0 3px .28em 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px .56em 0 rgba(0, 0, 0, .12)
@@ -133,9 +133,9 @@
 }
 
 .mdl-switch__input:checked:focus+.mdl-switch__label+.mdl-switch__trackContainer .mdl-switch__focus-helper {
-    -webkit-box-shadow: 0 0 0 1.39em rgba(82, 181, 75, .26);
-    box-shadow: 0 0 0 1.39em rgba(82, 181, 75, .26);
-    background-color: rgba(82, 181, 75, .26)
+    -webkit-box-shadow: 0 0 0 1.39em rgba(0,164,220, .26);
+    box-shadow: 0 0 0 1.39em rgba(0,164,220, .26);
+    background-color: rgba(0,164,220, .26)
 }
 
 .mdl-switch__label {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
index 5834d7f285..ac9afc6e13 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
@@ -220,7 +220,7 @@
 }
 
 .listItemIcon:not(.listItemIcon-transparent) {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff;
     padding: .5em;
     -webkit-border-radius: 100em;
diff --git a/dashboard-ui/bower_components/emby-webcomponents/notifications/badge.png b/dashboard-ui/bower_components/emby-webcomponents/notifications/badge.png
index 382b562112..372343f5c9 100644
Binary files a/dashboard-ui/bower_components/emby-webcomponents/notifications/badge.png and b/dashboard-ui/bower_components/emby-webcomponents/notifications/badge.png differ
diff --git a/dashboard-ui/bower_components/emby-webcomponents/notifications/notificationicon.png b/dashboard-ui/bower_components/emby-webcomponents/notifications/notificationicon.png
index 382b562112..372343f5c9 100644
Binary files a/dashboard-ui/bower_components/emby-webcomponents/notifications/notificationicon.png and b/dashboard-ui/bower_components/emby-webcomponents/notifications/notificationicon.png differ
diff --git a/dashboard-ui/bower_components/emby-webcomponents/playback/iconosd.css b/dashboard-ui/bower_components/emby-webcomponents/playback/iconosd.css
index 9e8073f137..d3034a6abe 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/playback/iconosd.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/playback/iconosd.css
@@ -34,7 +34,7 @@
 }
 
 .iconOsdProgressInner {
-    background: #52B54B;
+    background: #00a4dc;
     height: 100%;
     -webkit-border-radius: .25em;
     border-radius: .25em
diff --git a/dashboard-ui/bower_components/emby-webcomponents/sync/syncjobeditor.js b/dashboard-ui/bower_components/emby-webcomponents/sync/syncjobeditor.js
index 3f78d1511f..fb8e60d054 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/sync/syncjobeditor.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/sync/syncjobeditor.js
@@ -40,7 +40,7 @@ define(["connectionManager", "serverNotifications", "events", "datetime", "dom",
             width: 80,
             tag: jobItem.PrimaryImageTag,
             minScale: 1.5
-        })), html += imgUrl ? '<div class="listItemImage" style="background-image:url(\'' + imgUrl + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\"></div>" : '<i class="md-icon listItemIcon">sync</i>', html += '<div class="listItemBody three-line">', html += '<h3 class="listItemBodyText">', html += jobItem.ItemName, html += "</h3>", "Failed" === jobItem.Status ? html += '<div class="secondary listItemBodyText" style="color:red;">' : html += '<div class="secondary listItemBodyText">', html += globalize.translate("sharedcomponents#SyncJobItemStatus" + jobItem.Status), "Synced" === jobItem.Status && jobItem.IsMarkedForRemoval && (html += "<br/>", html += globalize.translate("sharedcomponents#RemovingFromDevice")), html += "</div>", html += '<div class="secondary listItemBodyText" style="padding-top:5px;">', html += '<div style="background:#e0e0e0;height:2px;"><div style="background:#52B54B;width:' + (jobItem.Progress || 0) + '%;height:100%;"></div></div>', html += "</div>", html += "</div>";
+        })), html += imgUrl ? '<div class="listItemImage" style="background-image:url(\'' + imgUrl + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\"></div>" : '<i class="md-icon listItemIcon">sync</i>', html += '<div class="listItemBody three-line">', html += '<h3 class="listItemBodyText">', html += jobItem.ItemName, html += "</h3>", "Failed" === jobItem.Status ? html += '<div class="secondary listItemBodyText" style="color:red;">' : html += '<div class="secondary listItemBodyText">', html += globalize.translate("sharedcomponents#SyncJobItemStatus" + jobItem.Status), "Synced" === jobItem.Status && jobItem.IsMarkedForRemoval && (html += "<br/>", html += globalize.translate("sharedcomponents#RemovingFromDevice")), html += "</div>", html += '<div class="secondary listItemBodyText" style="padding-top:5px;">', html += '<div style="background:#e0e0e0;height:2px;"><div style="background:#00a4dc;width:' + (jobItem.Progress || 0) + '%;height:100%;"></div></div>', html += "</div>", html += "</div>";
         return layoutManager.tv || ("retry" === nextAction ? html += '<button type="button" is="paper-icon-button-light" class="btnJobItemMenu" data-action="' + nextAction + '"><i class="md-icon">&#xE001;</i></button>' : "cancel" === nextAction ? html += '<button type="button" is="paper-icon-button-light" class="btnJobItemMenu" data-action="' + nextAction + '"><i class="md-icon">&#xE15D;</i></button>' : "remove" === nextAction && (html += '<button type="button" is="paper-icon-button-light" class="btnJobItemMenu" data-action="' + nextAction + '"><i class="md-icon">&#xE15D;</i></button>')), html += "</" + tagName + ">"
     }
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/appletv/theme.css b/dashboard-ui/bower_components/emby-webcomponents/themes/appletv/theme.css
index 8a0fe05f14..fe38cc1e0e 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/themes/appletv/theme.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/themes/appletv/theme.css
@@ -72,8 +72,8 @@ html {
 }
 
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, .2)
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
@@ -89,12 +89,12 @@ html {
 }
 
 .button-submit {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
 .button-submit:focus {
-    background: #5EC157
+    background: #0cb0e8
 }
 
 .checkboxLabel {
@@ -210,16 +210,16 @@ html {
 }
 
 .itemSelectionPanel {
-    border: 1px solid #52B54B
+    border: 1px solid #00a4dc
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
 .upNextDialog-countdownText {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .alphaPickerButton {
@@ -230,7 +230,7 @@ html {
 
 .alphaPickerButton-selected,
 .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff !important
 }
 
@@ -248,7 +248,7 @@ html {
 }
 
 .progressring-spiner {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .mediaInfoText {
@@ -272,7 +272,7 @@ html {
 
 .emby-input:focus,
 .emby-textarea:focus {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .emby-select-withcolor {
@@ -283,7 +283,7 @@ html {
 
 .emby-checkbox:checked+span+span+.checkboxOutline,
 .emby-select-withcolor:focus {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .emby-select-withcolor>option {
@@ -292,17 +292,17 @@ html {
 }
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
 .emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, .26)
+    background-color: rgba(0,164,220, .26)
 }
 
 .emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B
+    background-color: #00a4dc
 }
 
 .itemProgressBarForeground-recording {
@@ -312,7 +312,7 @@ html {
 .countIndicator,
 .fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B
+    background: #00a4dc
 }
 
 .fullSyncIndicator {
@@ -328,12 +328,12 @@ html {
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
+    background: #00a4dc !important;
     color: #fff
 }
 
 .emby-button-focusscale:focus {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
@@ -381,7 +381,7 @@ html {
 
 .guide-channelHeaderCell:focus,
 .programCell:focus {
-    background-color: #52B54B !important;
+    background-color: #00a4dc !important;
     color: #fff !important
 }
 
@@ -401,11 +401,11 @@ html {
 
 .guide-date-tab-button.emby-tab-button-active,
 .guide-date-tab-button:focus {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .guide-date-tab-button.emby-button-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
@@ -442,5 +442,5 @@ html {
 }
 
 .card:focus .card-focuscontent {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/blueradiance/theme.css b/dashboard-ui/bower_components/emby-webcomponents/themes/blueradiance/theme.css
index 18fd6fa214..881d65bdab 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/themes/blueradiance/theme.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/themes/blueradiance/theme.css
@@ -59,8 +59,8 @@ html {
 }
 
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, .2)
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
@@ -75,12 +75,12 @@ html {
 }
 
 .button-submit {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
 .button-submit:focus {
-    background: #5EC157;
+    background: #0cb0e8;
     color: #fff
 }
 
@@ -100,7 +100,7 @@ html {
 .inputLabelFocused,
 .selectLabelFocused,
 .textareaLabelFocused {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .checkboxOutline {
@@ -181,16 +181,16 @@ html {
 }
 
 .itemSelectionPanel {
-    border: 1px solid #52B54B
+    border: 1px solid #00a4dc
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
 .upNextDialog-countdownText {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .alphaPickerButton {
@@ -204,7 +204,7 @@ html {
 }
 
 .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff !important
 }
 
@@ -222,12 +222,12 @@ html {
 }
 
 .progressring-spiner {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .button-flat-accent,
 .button-link {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .mediaInfoText {
@@ -251,7 +251,7 @@ html {
 
 .emby-input:focus,
 .emby-textarea:focus {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .emby-select-withcolor {
@@ -266,25 +266,25 @@ html {
 }
 
 .emby-select-withcolor:focus {
-    border-color: #52B54B !important
+    border-color: #00a4dc !important
 }
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B !important;
+    background-color: #00a4dc !important;
     color: #fff !important
 }
 
 .emby-checkbox:checked+span+span+.checkboxOutline {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, .26)
+    background-color: rgba(0,164,220, .26)
 }
 
 .emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B
+    background-color: #00a4dc
 }
 
 .itemProgressBarForeground-recording {
@@ -294,7 +294,7 @@ html {
 .countIndicator,
 .fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B
+    background: #00a4dc
 }
 
 .fullSyncIndicator {
@@ -310,12 +310,12 @@ html {
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
+    background: #00a4dc !important;
     color: #fff
 }
 
 .emby-button-focusscale:focus {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
@@ -325,7 +325,7 @@ html {
 }
 
 .emby-tab-button-active {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .emby-tab-button-active.emby-button-tv {
@@ -333,7 +333,7 @@ html {
 }
 
 .emby-tab-button.emby-button-tv:focus {
-    color: #52B54B;
+    color: #00a4dc;
     background: 0 0
 }
 
@@ -365,7 +365,7 @@ html {
 
 .guide-channelHeaderCell:focus,
 .programCell:focus {
-    background-color: #52B54B !important;
+    background-color: #00a4dc !important;
     color: #fff !important
 }
 
@@ -385,11 +385,11 @@ html {
 
 .guide-date-tab-button.emby-tab-button-active,
 .guide-date-tab-button:focus {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .guide-date-tab-button.emby-button-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
@@ -426,7 +426,7 @@ html {
 }
 
 .card:focus .card-focuscontent {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .layout-desktop ::-webkit-scrollbar {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/dark-classic/theme.css b/dashboard-ui/bower_components/emby-webcomponents/themes/dark-classic/theme.css
new file mode 100644
index 0000000000..3e5809c191
--- /dev/null
+++ b/dashboard-ui/bower_components/emby-webcomponents/themes/dark-classic/theme.css
@@ -0,0 +1,438 @@
+.skinHeader,
+html {
+    color: #ddd;
+    color: rgba(255, 255, 255, .8)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #1f1f1f
+}
+
+.emby-collapsible-button {
+    border-color: #383838;
+    border-color: rgba(255, 255, 255, .135)
+}
+
+.skinHeader-withBackground {
+    background-color: #1f1f1f
+}
+
+.skinHeader.semiTransparent {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+    background-color: rgba(0, 0, 0, .3);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
+}
+
+.pageTitleWithDefaultLogo {
+    background-image: url(../logowhite.png)
+}
+
+.backgroundContainer,
+.dialog,
+html {
+    background-color: #1a1a1a
+}
+
+.backgroundContainer.withBackdrop {
+    background-color: rgba(0, 0, 0, .86)
+}
+
+.paper-icon-button-light:focus {
+    color: #52b54b;
+    background-color: rgba(82, 181, 75, .2)
+}
+
+.fab,
+.raised {
+    background: #303030;
+    color: rgba(255, 255, 255, .87)
+}
+
+.fab:focus,
+.raised:focus {
+    background: #383838
+}
+
+.button-submit {
+    background: #52b54b;
+    color: #fff
+}
+
+.button-submit:focus {
+    background: #5EC157;
+    color: #fff
+}
+
+.checkboxLabel {
+    color: inherit
+}
+
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
+    color: #bbb;
+    color: rgba(255, 255, 255, .7)
+}
+
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #52b54b
+}
+
+.checkboxOutline {
+    border-color: currentColor
+}
+
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox {
+    background-color: #242424
+}
+
+.defaultCardBackground1 {
+    background-color: #d2b019
+}
+
+.defaultCardBackground2 {
+    background-color: #338abb
+}
+
+.defaultCardBackground3 {
+    background-color: #6b689d
+}
+
+.defaultCardBackground4 {
+    background-color: #dd452b
+}
+
+.defaultCardBackground5 {
+    background-color: #5ccea9
+}
+
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
+    color: #999;
+    color: rgba(255, 255, 255, .5)
+}
+
+.actionsheetDivider {
+    background: #444;
+    background: rgba(255, 255, 255, .14)
+}
+
+.cardFooter-vibrant .cardText-secondary {
+    color: inherit;
+    opacity: .5
+}
+
+.actionSheetMenuItem:hover {
+    background-color: #242424
+}
+
+.toast {
+    background: #303030;
+    color: #fff;
+    color: rgba(255, 255, 255, .87)
+}
+
+.appfooter {
+    background: #101010;
+    color: #ccc;
+    color: rgba(255, 255, 255, .78)
+}
+
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+    .appfooter-blurred {
+        background: rgba(24, 24, 24, .7);
+        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
+    }
+}
+
+.itemSelectionPanel {
+    border: 1px solid #52b54b
+}
+
+.selectionCommandsPanel {
+    background: #52b54b;
+    color: #fff
+}
+
+.upNextDialog-countdownText {
+    color: #52b54b
+}
+
+.alphaPickerButton {
+    color: #999;
+    color: rgba(255, 255, 255, .5);
+    background-color: transparent
+}
+
+.alphaPickerButton-selected {
+    color: #fff
+}
+
+.alphaPickerButton-tv:focus {
+    background-color: #52b54b;
+    color: #fff !important
+}
+
+.detailTableBodyRow-shaded:nth-child(even) {
+    background: #1c1c1c;
+    background: rgba(30, 30, 30, .9)
+}
+
+.listItem-border {
+    border-color: rgba(34, 34, 34, .9) !important
+}
+
+.listItem:focus {
+    background: #333
+}
+
+.progressring-spiner {
+    border-color: #52b54b
+}
+
+.button-flat-accent,
+.button-link {
+    color: #52b54b
+}
+
+.mediaInfoText {
+    color: #ddd;
+    background: rgba(170, 170, 190, .2)
+}
+
+.mediaInfoTimerIcon,
+.starIcon {
+    color: #CB272A
+}
+
+.emby-input,
+.emby-textarea {
+    color: inherit;
+    background: #292929;
+    border: .07em solid #292929;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
+}
+
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #52b54b
+}
+
+.emby-select-withcolor {
+    color: inherit;
+    background: #292929;
+    border: .07em solid #292929
+}
+
+.emby-select-withcolor>option {
+    color: inherit;
+    background: #222
+}
+
+.emby-select-withcolor:focus {
+    border-color: #52b54b !important
+}
+
+.emby-select-tv-withcolor:focus {
+    background-color: #52b54b !important;
+    color: #fff !important
+}
+
+.emby-checkbox:checked+span+span+.checkboxOutline {
+    border-color: #52b54b
+}
+
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(82, 181, 75, .26)
+}
+
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.itemProgressBarForeground {
+    background-color: #52b54b
+}
+
+.itemProgressBarForeground-recording {
+    background-color: #CB272A
+}
+
+.countIndicator,
+.fullSyncIndicator,
+.playedIndicator {
+    background: #52b54b
+}
+
+.fullSyncIndicator {
+    color: #fff
+}
+
+.mainDrawer {
+    background-color: #1c1c1c
+}
+
+.navMenuOption:hover {
+    background: #252528
+}
+
+.navMenuOption-selected {
+    background: #52b54b !important;
+    color: #fff
+}
+
+.emby-button-focusscale:focus {
+    background: #52b54b;
+    color: #fff
+}
+
+.emby-tab-button {
+    color: #999;
+    color: rgba(255, 255, 255, .4)
+}
+
+.emby-tab-button-active {
+    color: #52b54b
+}
+
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
+}
+
+.emby-tab-button.emby-button-tv:focus {
+    color: #52b54b;
+    background: 0 0
+}
+
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(255, 255, 255, .05)
+}
+
+.programCell-sports {
+    background: #3949AB !important
+}
+
+.programCell-movie {
+    background: #5E35B1 !important
+}
+
+.programCell-kids {
+    background: #039BE5 !important
+}
+
+.programCell-news {
+    background: #43A047 !important
+}
+
+.programCell-active {
+    background: #1e1e1e !important
+}
+
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #52b54b !important;
+    color: #fff !important
+}
+
+.guide-programTextIcon {
+    color: #1e1e1e;
+    background: #555
+}
+
+.guide-headerTimeslots {
+    color: inherit
+}
+
+.guide-date-tab-button {
+    color: #555;
+    color: rgba(255, 255, 255, .3)
+}
+
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #52b54b
+}
+
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #52b54b;
+    color: #fff
+}
+
+.itemBackdropFader {
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#1a1a1a));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #1a1a1a);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #1a1a1a);
+    background: linear-gradient(rgba(0, 0, 0, 0), #1a1a1a)
+}
+
+.infoBanner {
+    color: #ddd;
+    background: #111;
+    padding: 1em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
+}
+
+.ratingbutton-icon-withrating {
+    color: #c33
+}
+
+.downloadbutton-icon-complete,
+.downloadbutton-icon-on {
+    color: #4285F4
+}
+
+.playstatebutton-icon-played {
+    color: #c33
+}
+
+.repeatButton-active {
+    color: #4285F4
+}
+
+.card:focus .card-focuscontent {
+    border-color: #52b54b
+}
+
+.layout-desktop ::-webkit-scrollbar {
+    width: 1em;
+    height: 1em
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: #3b3b3b
+}
+
+::-webkit-scrollbar-thumb:horizontal,
+::-webkit-scrollbar-thumb:vertical {
+    -webkit-border-radius: 2px;
+    background: center no-repeat #888
+}
+
+.timeslotHeaders-desktop::-webkit-scrollbar {
+    height: .7em
+}
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/dark/theme.css b/dashboard-ui/bower_components/emby-webcomponents/themes/dark/theme.css
index 77ae46b0d0..209bb2a3a2 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/themes/dark/theme.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/themes/dark/theme.css
@@ -44,8 +44,8 @@ html {
 }
 
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, .2)
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
@@ -60,12 +60,12 @@ html {
 }
 
 .button-submit {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
 .button-submit:focus {
-    background: #5EC157;
+    background: #0cb0e8;
     color: #fff
 }
 
@@ -85,7 +85,7 @@ html {
 .inputLabelFocused,
 .selectLabelFocused,
 .textareaLabelFocused {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .checkboxOutline {
@@ -166,16 +166,16 @@ html {
 }
 
 .itemSelectionPanel {
-    border: 1px solid #52B54B
+    border: 1px solid #00a4dc
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
 .upNextDialog-countdownText {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .alphaPickerButton {
@@ -189,7 +189,7 @@ html {
 }
 
 .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff !important
 }
 
@@ -207,12 +207,12 @@ html {
 }
 
 .progressring-spiner {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .button-flat-accent,
 .button-link {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .mediaInfoText {
@@ -236,7 +236,7 @@ html {
 
 .emby-input:focus,
 .emby-textarea:focus {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .emby-select-withcolor {
@@ -251,25 +251,25 @@ html {
 }
 
 .emby-select-withcolor:focus {
-    border-color: #52B54B !important
+    border-color: #00a4dc !important
 }
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B !important;
+    background-color: #00a4dc !important;
     color: #fff !important
 }
 
 .emby-checkbox:checked+span+span+.checkboxOutline {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, .26)
+    background-color: rgba(0,164,220, .26)
 }
 
 .emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B
+    background-color: #00a4dc
 }
 
 .itemProgressBarForeground-recording {
@@ -279,7 +279,7 @@ html {
 .countIndicator,
 .fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B
+    background: #00a4dc
 }
 
 .fullSyncIndicator {
@@ -295,12 +295,12 @@ html {
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
+    background: #00a4dc !important;
     color: #fff
 }
 
 .emby-button-focusscale:focus {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
@@ -310,7 +310,7 @@ html {
 }
 
 .emby-tab-button-active {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .emby-tab-button-active.emby-button-tv {
@@ -318,7 +318,7 @@ html {
 }
 
 .emby-tab-button.emby-button-tv:focus {
-    color: #52B54B;
+    color: #00a4dc;
     background: 0 0
 }
 
@@ -350,7 +350,7 @@ html {
 
 .guide-channelHeaderCell:focus,
 .programCell:focus {
-    background-color: #52B54B !important;
+    background-color: #00a4dc !important;
     color: #fff !important
 }
 
@@ -370,11 +370,11 @@ html {
 
 .guide-date-tab-button.emby-tab-button-active,
 .guide-date-tab-button:focus {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .guide-date-tab-button.emby-button-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
@@ -411,7 +411,7 @@ html {
 }
 
 .card:focus .card-focuscontent {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .layout-desktop ::-webkit-scrollbar {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/halloween/theme.css b/dashboard-ui/bower_components/emby-webcomponents/themes/halloween/theme.css
index 20cc063679..6817478e6e 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/themes/halloween/theme.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/themes/halloween/theme.css
@@ -409,11 +409,11 @@ html {
 
 .guide-date-tab-button.emby-tab-button-active,
 .guide-date-tab-button:focus {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .guide-date-tab-button.emby-button-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/light-classic/theme.css b/dashboard-ui/bower_components/emby-webcomponents/themes/light-classic/theme.css
new file mode 100644
index 0000000000..835a18ec88
--- /dev/null
+++ b/dashboard-ui/bower_components/emby-webcomponents/themes/light-classic/theme.css
@@ -0,0 +1,434 @@
+.skinHeader,
+html {
+    color: #222;
+    color: rgba(0, 0, 0, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #303030
+}
+
+.emby-collapsible-button {
+    border-color: #ccc;
+    border-color: rgba(0, 0, 0, .158)
+}
+
+.collapseContent {
+    background-color: #eaeaea
+}
+
+.skinHeader-withBackground {
+    background-color: #303030;
+    color: #ccc;
+    color: rgba(255, 255, 255, .87);
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
+}
+
+.osdHeader {
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important
+}
+
+.skinHeader.semiTransparent {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+    background-color: rgba(0, 0, 0, .3);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
+}
+
+.pageTitleWithDefaultLogo {
+    background-image: url(../logowhite.png)
+}
+
+.backgroundContainer,
+html {
+    background-color: #f2f2f2
+}
+
+.backgroundContainer.withBackdrop {
+    background-color: rgba(255, 255, 255, .94)
+}
+
+.dialog {
+    background-color: #f0f0f0
+}
+
+.paper-icon-button-light:focus {
+    color: #52b54b;
+    background-color: rgba(82, 181, 75, .2)
+}
+
+.fab,
+.raised {
+    background: #d8d8d8;
+    color: inherit
+}
+
+.fab:focus,
+.raised:focus {
+    background: #ccc
+}
+
+.button-submit {
+    background: #52b54b;
+    color: #fff
+}
+
+.button-submit:focus {
+    background: #5EC157
+}
+
+.checkboxLabel {
+    color: inherit
+}
+
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
+    color: #555
+}
+
+.button-link,
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: green
+}
+
+.checkboxOutline {
+    border-color: currentColor
+}
+
+.paperList,
+.visualCardBox {
+    background-color: #fff
+}
+
+.defaultCardBackground1 {
+    background-color: #009688
+}
+
+.defaultCardBackground2 {
+    background-color: #D32F2F
+}
+
+.defaultCardBackground3 {
+    background-color: #0288D1
+}
+
+.defaultCardBackground4 {
+    background-color: #388E3C
+}
+
+.defaultCardBackground5 {
+    background-color: #F57F17
+}
+
+.formDialogHeader:not(.formDialogHeader-clear) {
+    background-color: #52b54b;
+    color: #fff
+}
+
+.formDialogFooter:not(.formDialogFooter-clear) {
+    background-color: #f0f0f0;
+    border-top: 1px solid #ddd;
+    border-top: 1px solid rgba(0, 0, 0, .08);
+    color: inherit
+}
+
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
+    color: #888
+}
+
+.actionsheetDivider {
+    background: #ddd;
+    background: rgba(0, 0, 0, .14)
+}
+
+.cardFooter-vibrant .cardText-secondary {
+    color: inherit;
+    opacity: .5
+}
+
+.formDialogHeader a,
+.toast {
+    color: #fff
+}
+
+.actionSheetMenuItem:hover {
+    background-color: #ddd
+}
+
+.toast {
+    background: #303030;
+    color: rgba(255, 255, 255, .87)
+}
+
+.appfooter {
+    background: #282828;
+    color: #ccc;
+    color: rgba(255, 255, 255, .78)
+}
+
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+    .appfooter-blurred {
+        background: rgba(24, 24, 24, .7);
+        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
+    }
+}
+
+.nowPlayingBarSecondaryText {
+    color: #999
+}
+
+.itemSelectionPanel {
+    border: 1px solid #52b54b
+}
+
+.selectionCommandsPanel {
+    background: #52b54b;
+    color: #fff
+}
+
+.upNextDialog-countdownText {
+    color: #52b54b
+}
+
+.alphaPickerButton {
+    color: #555;
+    color: rgba(0, 0, 0, .7);
+    background-color: transparent
+}
+
+.alphaPickerButton-selected,
+.alphaPickerButton-tv:focus {
+    background-color: #52b54b;
+    color: #fff !important
+}
+
+.detailTableBodyRow-shaded:nth-child(even) {
+    background: #f8f8f8
+}
+
+.listItem-border {
+    border-color: #f0f0f0 !important
+}
+
+.listItem:focus {
+    background: #ddd
+}
+
+.progressring-spiner {
+    border-color: #52b54b
+}
+
+.mediaInfoText {
+    color: #333;
+    background: #fff
+}
+
+.mediaInfoTimerIcon,
+.starIcon {
+    color: #CB272A
+}
+
+.emby-input,
+.emby-textarea {
+    color: inherit;
+    background: #fff;
+    border: .07em solid rgba(0, 0, 0, .158);
+    -webkit-border-radius: .15em;
+    border-radius: .15em
+}
+
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #52b54b
+}
+
+.emby-select-withcolor {
+    color: inherit;
+    background: #fff;
+    border: .07em solid rgba(0, 0, 0, .158)
+}
+
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-select-withcolor:focus {
+    border-color: #52b54b
+}
+
+.emby-select-withcolor>option {
+    color: #000;
+    background: #fff
+}
+
+.emby-select-tv-withcolor:focus {
+    background-color: #52b54b;
+    color: #fff
+}
+
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(82, 181, 75, .26)
+}
+
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.itemProgressBarForeground {
+    background-color: #52b54b
+}
+
+.itemProgressBarForeground-recording {
+    background-color: #CB272A
+}
+
+.countIndicator,
+.fullSyncIndicator,
+.playedIndicator {
+    background: #52b54b
+}
+
+.fullSyncIndicator {
+    color: #fff
+}
+
+.mainDrawer {
+    background: #fff
+}
+
+.navMenuOption:hover {
+    background: #f2f2f2
+}
+
+.navMenuOption-selected {
+    background: #52b54b !important;
+    color: #fff
+}
+
+.emby-button-focusscale:focus {
+    background: #52b54b;
+    color: #fff
+}
+
+.emby-tab-button {
+    color: #999;
+    color: rgba(255, 255, 255, .5)
+}
+
+.emby-tab-button-active {
+    color: #52b54b
+}
+
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
+}
+
+.emby-tab-button.emby-button-tv:focus {
+    color: #52b54b;
+    background: 0 0
+}
+
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(0, 0, 0, .12)
+}
+
+.programCell-sports {
+    background: #3949AB !important
+}
+
+.programCell-movie {
+    background: #5E35B1 !important
+}
+
+.programCell-kids {
+    background: #039BE5 !important
+}
+
+.programCell-news {
+    background: #43A047 !important
+}
+
+.programCell-active {
+    background: rgba(0, 0, 0, .1) !important
+}
+
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #52b54b !important;
+    color: #fff !important
+}
+
+.guide-programTextIcon {
+    color: #1e1e1e;
+    background: #555
+}
+
+.guide-headerTimeslots {
+    color: inherit
+}
+
+.guide-date-tab-button {
+    color: #555;
+    color: rgba(0, 0, 0, .54)
+}
+
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #52b54b
+}
+
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #52b54b;
+    color: #fff
+}
+
+.itemBackdropFader {
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
+}
+
+.infoBanner {
+    color: #000;
+    background: #fff3a5;
+    padding: 1em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
+}
+
+.ratingbutton-icon-withrating {
+    color: #c33
+}
+
+.downloadbutton-icon-complete,
+.downloadbutton-icon-on {
+    color: #4285F4
+}
+
+.playstatebutton-icon-played {
+    color: #c33
+}
+
+.repeatButton-active {
+    color: #4285F4
+}
+
+.card:focus .card-focuscontent {
+    border-color: #52b54b
+}
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/light-red/theme.css b/dashboard-ui/bower_components/emby-webcomponents/themes/light-red/theme.css
index 3b2e63a00a..bd98f66828 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/themes/light-red/theme.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/themes/light-red/theme.css
@@ -394,11 +394,11 @@ html {
 
 .guide-date-tab-button.emby-tab-button-active,
 .guide-date-tab-button:focus {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .guide-date-tab-button.emby-button-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/light/theme.css b/dashboard-ui/bower_components/emby-webcomponents/themes/light/theme.css
index eae37dca6c..ac8c0e040e 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/themes/light/theme.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/themes/light/theme.css
@@ -60,8 +60,8 @@ html {
 }
 
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, .2)
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
@@ -76,12 +76,12 @@ html {
 }
 
 .button-submit {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
 .button-submit:focus {
-    background: #5EC157
+    background: #0cb0e8
 }
 
 .checkboxLabel {
@@ -133,7 +133,7 @@ html {
 }
 
 .formDialogHeader:not(.formDialogHeader-clear) {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
@@ -197,16 +197,16 @@ html {
 }
 
 .itemSelectionPanel {
-    border: 1px solid #52B54B
+    border: 1px solid #00a4dc
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
 .upNextDialog-countdownText {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .alphaPickerButton {
@@ -217,7 +217,7 @@ html {
 
 .alphaPickerButton-selected,
 .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff !important
 }
 
@@ -234,7 +234,7 @@ html {
 }
 
 .progressring-spiner {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .mediaInfoText {
@@ -258,7 +258,7 @@ html {
 
 .emby-input:focus,
 .emby-textarea:focus {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .emby-select-withcolor {
@@ -269,7 +269,7 @@ html {
 
 .emby-checkbox:checked+span+span+.checkboxOutline,
 .emby-select-withcolor:focus {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .emby-select-withcolor>option {
@@ -278,17 +278,17 @@ html {
 }
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
 .emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, .26)
+    background-color: rgba(0,164,220, .26)
 }
 
 .emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B
+    background-color: #00a4dc
 }
 
 .itemProgressBarForeground-recording {
@@ -298,7 +298,7 @@ html {
 .countIndicator,
 .fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B
+    background: #00a4dc
 }
 
 .fullSyncIndicator {
@@ -314,12 +314,12 @@ html {
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
+    background: #00a4dc !important;
     color: #fff
 }
 
 .emby-button-focusscale:focus {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
@@ -329,7 +329,7 @@ html {
 }
 
 .emby-tab-button-active {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .emby-tab-button-active.emby-button-tv {
@@ -337,7 +337,7 @@ html {
 }
 
 .emby-tab-button.emby-button-tv:focus {
-    color: #52B54B;
+    color: #00a4dc;
     background: 0 0
 }
 
@@ -369,7 +369,7 @@ html {
 
 .guide-channelHeaderCell:focus,
 .programCell:focus {
-    background-color: #52B54B !important;
+    background-color: #00a4dc !important;
     color: #fff !important
 }
 
@@ -389,11 +389,11 @@ html {
 
 .guide-date-tab-button.emby-tab-button-active,
 .guide-date-tab-button:focus {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .guide-date-tab-button.emby-button-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
@@ -430,5 +430,5 @@ html {
 }
 
 .card:focus .card-focuscontent {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/logodark.png b/dashboard-ui/bower_components/emby-webcomponents/themes/logodark.png
index 987dab411c..3511abc23b 100644
Binary files a/dashboard-ui/bower_components/emby-webcomponents/themes/logodark.png and b/dashboard-ui/bower_components/emby-webcomponents/themes/logodark.png differ
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/logowhite.png b/dashboard-ui/bower_components/emby-webcomponents/themes/logowhite.png
index f21d3a0f0c..58f94fa989 100644
Binary files a/dashboard-ui/bower_components/emby-webcomponents/themes/logowhite.png and b/dashboard-ui/bower_components/emby-webcomponents/themes/logowhite.png differ
diff --git a/dashboard-ui/bower_components/emby-webcomponents/themes/wmc/theme.css b/dashboard-ui/bower_components/emby-webcomponents/themes/wmc/theme.css
index 6c5c3d7ef6..ac18837eea 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/themes/wmc/theme.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/themes/wmc/theme.css
@@ -65,8 +65,8 @@ html {
 }
 
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, .2)
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
@@ -81,12 +81,12 @@ html {
 }
 
 .button-submit {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
 .button-submit:focus {
-    background: #5EC157;
+    background: #0cb0e8;
     color: #fff
 }
 
@@ -106,7 +106,7 @@ html {
 .inputLabelFocused,
 .selectLabelFocused,
 .textareaLabelFocused {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .checkboxOutline {
@@ -185,16 +185,16 @@ html {
 }
 
 .itemSelectionPanel {
-    border: 1px solid #52B54B
+    border: 1px solid #00a4dc
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
 .upNextDialog-countdownText {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .alphaPickerButton {
@@ -205,7 +205,7 @@ html {
 
 .alphaPickerButton-selected,
 .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff !important
 }
 
@@ -223,12 +223,12 @@ html {
 }
 
 .progressring-spiner {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .button-flat-accent,
 .button-link {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .mediaInfoText {
@@ -252,7 +252,7 @@ html {
 
 .emby-input:focus,
 .emby-textarea:focus {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .emby-select-withcolor {
@@ -263,7 +263,7 @@ html {
 
 .emby-checkbox:checked+span+span+.checkboxOutline,
 .emby-select-withcolor:focus {
-    border-color: #52B54B
+    border-color: #00a4dc
 }
 
 .emby-select-withcolor>option {
@@ -272,17 +272,17 @@ html {
 }
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
 .emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, .26)
+    background-color: rgba(0,164,220, .26)
 }
 
 .emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B
+    background-color: #00a4dc
 }
 
 .itemProgressBarForeground-recording {
@@ -292,7 +292,7 @@ html {
 .countIndicator,
 .fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B
+    background: #00a4dc
 }
 
 .fullSyncIndicator {
@@ -312,12 +312,12 @@ html {
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
+    background: #00a4dc !important;
     color: #fff
 }
 
 .emby-button-focusscale:focus {
-    background: #52B54B;
+    background: #00a4dc;
     color: #fff
 }
 
@@ -365,7 +365,7 @@ html {
 
 .guide-channelHeaderCell:focus,
 .programCell:focus {
-    background-color: #52B54B !important;
+    background-color: #00a4dc !important;
     color: #fff !important
 }
 
@@ -385,11 +385,11 @@ html {
 
 .guide-date-tab-button.emby-tab-button-active,
 .guide-date-tab-button:focus {
-    color: #52B54B
+    color: #00a4dc
 }
 
 .guide-date-tab-button.emby-button-tv:focus {
-    background-color: #52B54B;
+    background-color: #00a4dc;
     color: #fff
 }
 
diff --git a/dashboard-ui/components/activitylog.js b/dashboard-ui/components/activitylog.js
index ca2025acf3..6d56e96a56 100644
--- a/dashboard-ui/components/activitylog.js
+++ b/dashboard-ui/components/activitylog.js
@@ -4,7 +4,7 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific
     function getEntryHtml(entry, apiClient) {
         var html = "";
         html += '<div class="listItem listItem-border">';
-        var color = "Error" == entry.Severity || "Fatal" == entry.Severity || "Warn" == entry.Severity ? "#cc0000" : "#52B54B";
+        var color = "Error" == entry.Severity || "Fatal" == entry.Severity || "Warn" == entry.Severity ? "#cc0000" : "#00a4dc";
         if (entry.UserId && entry.UserPrimaryImageTag) {
             html += '<i class="listItemIcon md-icon" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
                 type: "Primary",
diff --git a/dashboard-ui/css/dashboard.css b/dashboard-ui/css/dashboard.css
index 40838c5652..945a056c83 100644
--- a/dashboard-ui/css/dashboard.css
+++ b/dashboard-ui/css/dashboard.css
@@ -17,9 +17,8 @@ progress {
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
-    border: 2px solid #ccc;
-    -webkit-border-radius: .3em;
-    border-radius: .3em;
+    -webkit-border-radius: .4em;
+    border-radius: .4em;
     margin: 0;
     background: #ccc !important
 }
@@ -34,20 +33,19 @@ progress::-webkit-progress-bar {
 
 progress::-moz-progress-bar {
     border-radius: .4em;
-    background-image: -moz-linear-gradient(center bottom, #2bc253 37%, #54f054 69%)
+    background-color: #00a4dc
 }
 
 progress::-webkit-progress-value {
     -webkit-border-radius: .4em;
     border-radius: .4em;
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2bc253), color-stop(1, #54f054));
-    background-image: -webkit-linear-gradient(center bottom, #2bc253 37%, #54f054 69%)
+    background-color: #00a4dc
 }
 
 progress[aria-valuenow]:before {
     -webkit-border-radius: .4em;
     border-radius: .4em;
-    background-image: -o-linear-gradient(center bottom, #2bc253 37%, #54f054 69%)
+    background-color: #00a4dc
 }
 
 .localnav {
@@ -417,41 +415,32 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .transcodingProgress::-moz-progress-bar {
-    border-radius: 0;
-    background-image: -moz-linear-gradient(center bottom, #dd4919 37%, #dd4919 69%) !important
+    border-radius: .3em;
+    background-color: #dd4919
 }
 
 .transcodingProgress::-webkit-progress-value {
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dd4919), color-stop(1, #dd4919)) !important;
-    background-image: -webkit-linear-gradient(center bottom, #dd4919 37%, #dd4919 69%) !important
+    -webkit-border-radius: .3em;
+    border-radius: .3em;
+    background-color: #dd4919
 }
 
 .transcodingProgress[aria-valuenow]:before {
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    background-image: -o-linear-gradient(center bottom, #dd4919 37%, #dd4919 69%) !important
+    -webkit-border-radius: .3em;
+    border-radius: .3em;
+    background-color: #dd4919
 }
 
 .playbackProgress::-moz-progress-bar {
-    border-radius: 0;
-    background-image: none;
-    background-color: #52B54B
+    background-color: #00a4dc
 }
 
 .playbackProgress::-webkit-progress-value {
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    background-image: none;
-    background-color: #52B54B
+    background-color: #00a4dc
 }
 
 .playbackProgress[aria-valuenow]:before {
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    background-image: none;
-    background-color: #52B54B
+    background-color: #00a4dc
 }
 
 @media all and (max-width:34.375em) {
@@ -538,4 +527,4 @@ a[data-role=button] {
 .pluginPreviewImg {
     -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
     box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
-}
\ No newline at end of file
+}
diff --git a/dashboard-ui/css/images/logoblack.png b/dashboard-ui/css/images/logoblack.png
index 987dab411c..3511abc23b 100644
Binary files a/dashboard-ui/css/images/logoblack.png and b/dashboard-ui/css/images/logoblack.png differ
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 182605d681..2e4be894ec 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -120,10 +120,6 @@
     width: 13.2em
 }
 
-.pageTitleWithDefaultLogo {
-    height: 1.22em
-}
-
 .skinHeader {
     position: fixed;
     right: 0;
@@ -1066,7 +1062,7 @@
 }
 
 .button-accent-flat {
-    color: #52B54B !important
+    color: #00a4dc !important
 }
 
 .clearLink {
diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css
index d506f8204b..abc5668b24 100644
--- a/dashboard-ui/css/metadataeditor.css
+++ b/dashboard-ui/css/metadataeditor.css
@@ -44,7 +44,7 @@
 }
 
 .jstree-default .jstree-wholerow-clicked {
-    background: #52B54B !important
+    background: #00a4dc !important
 }
 
 @media all and (min-width:50em) {
diff --git a/dashboard-ui/favicon.ico b/dashboard-ui/favicon.ico
index dfb006000c..b44a74b334 100644
Binary files a/dashboard-ui/favicon.ico and b/dashboard-ui/favicon.ico differ
diff --git a/dashboard-ui/manifest.json b/dashboard-ui/manifest.json
index bc6405d09a..e7c41a2a3b 100644
--- a/dashboard-ui/manifest.json
+++ b/dashboard-ui/manifest.json
@@ -28,5 +28,5 @@
   ],
   "short_name": "Emby",
   "start_url": "/web/index.html",
-  "theme_color": "#52B54B"
+  "theme_color": "#00a4dc"
 }
diff --git a/dashboard-ui/scheduledtasks.html b/dashboard-ui/scheduledtasks.html
index 7d7a6f74eb..f0c77010f8 100644
--- a/dashboard-ui/scheduledtasks.html
+++ b/dashboard-ui/scheduledtasks.html
@@ -10,7 +10,7 @@
         .taskProgressInner {
             border-radius: 2px;
             height: 100%;
-            background: #52B54B;
+            background: #00a4dc;
         }
     </style>
     <div>
diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js
index 74852a739e..1ebe163079 100644
--- a/dashboard-ui/scripts/dashboardpage.js
+++ b/dashboard-ui/scripts/dashboardpage.js
@@ -473,7 +473,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
                 var supporterPromotionElem = page.querySelector(".supporterPromotion");
                 if (supporterPromotionElem && supporterPromotionElem.parentNode.removeChild(supporterPromotionElem), !pluginSecurityInfo.IsMBSupporter) {
                     var html = '<div class="supporterPromotionContainer"><div class="supporterPromotion">';
-                    html += '<a is="emby-linkbutton" href="https://github.com/jellyfin/jellyfin" target="_blank" class="raised block" style="background-color:#52B54B;color:#fff;"><div>' + globalize.translate("HeaderSupportTheTeam") + '</div><div style="font-weight:normal;margin-top:5px;">' + globalize.translate("TextEnjoyBonusFeatures") + "</div></a></div></div>", page.querySelector(".content-primary").insertAdjacentHTML("afterbegin", html)
+                    html += '<a is="emby-linkbutton" href="https://github.com/jellyfin/jellyfin" target="_blank" class="raised block" style="background-color:#00a4dc;color:#fff;"><div>' + globalize.translate("HeaderSupportTheTeam") + '</div><div style="font-weight:normal;margin-top:5px;">' + globalize.translate("TextEnjoyBonusFeatures") + "</div></a></div></div>", page.querySelector(".content-primary").insertAdjacentHTML("afterbegin", html)
                 }
             })
         }),
diff --git a/dashboard-ui/touchicon.png b/dashboard-ui/touchicon.png
index 08d03a434b..3803bcd0a3 100644
Binary files a/dashboard-ui/touchicon.png and b/dashboard-ui/touchicon.png differ
diff --git a/dashboard-ui/touchicon114.png b/dashboard-ui/touchicon114.png
index 3fb2d1a55c..0e6afeb543 100644
Binary files a/dashboard-ui/touchicon114.png and b/dashboard-ui/touchicon114.png differ
diff --git a/dashboard-ui/touchicon144.png b/dashboard-ui/touchicon144.png
index c2c1be8ae4..6b2c22a773 100644
Binary files a/dashboard-ui/touchicon144.png and b/dashboard-ui/touchicon144.png differ
diff --git a/dashboard-ui/touchicon72.png b/dashboard-ui/touchicon72.png
index d7bda37004..935e2f702b 100644
Binary files a/dashboard-ui/touchicon72.png and b/dashboard-ui/touchicon72.png differ