diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
index 8f85f90c71..f76b992896 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
@@ -1067,6 +1067,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
             var indicatorsHtml = '';
 
+            indicatorsHtml += indicators.getSyncIndicator(item);
             indicatorsHtml += indicators.getTimerIndicator(item);
 
             if (options.showGroupCount) {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.css b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.css
index ea14f991bf..b776ff9f2f 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.css
@@ -12,6 +12,16 @@
     background-color: #52B54B;
 }
 
+.indicator {
+    border-radius: 500px;
+    display: -ms-flex;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+}
+
 .timerIndicator {
     color: #CB272A;
 }
@@ -48,11 +58,26 @@
     height: 28px;
 }
 
-    .playedIndicatorIcon {
-        width: 22px;
-        height: 22px;
-        font-size: 22px;
-    }
+.syncIndicator {
+    color: #fff;
+    border-radius: 500px;
+    padding: 3px;
+}
+
+.emptySyncIndicator {
+    background: #ccc;
+    color: #333;
+}
+
+.fullSyncIndicator {
+    background: #cc3333;
+}
+
+.playedIndicatorIcon, .syncIndicator {
+    width: 22px;
+    height: 22px;
+    font-size: 22px;
+}
 
 .layout-tv .countIndicator, .layout-tv .playedIndicator {
     width: 3.8vh;
@@ -67,4 +92,4 @@
     width: 2.6vh;
     height: 2.6vh;
     font-size: 2.6vh;
-}
\ No newline at end of file
+}
diff --git a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js
index c95b0e1c06..fe7751b145 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js
@@ -89,7 +89,7 @@ define(['css!./indicators.css', 'material-icons'], function () {
     }
 
     function getTimerIndicator(item) {
-        
+
         if (item.SeriesTimerId) {
             return '<i class="md-icon timerIndicator indicator">fiber_smart_record</i>';
         }
@@ -100,12 +100,24 @@ define(['css!./indicators.css', 'material-icons'], function () {
         return '';
     }
 
+    function getSyncIndicator(item) {
+
+        if (item.SyncPercent == 100) {
+            return '<i class="md-icon indicator syncIndicator fullSyncIndicator">file_download</i>';
+        } else if (item.SyncPercent != null) {
+            return '<i class="md-icon indicator syncIndicator emptySyncIndicator">file_download</i>';
+        }
+
+        return '';
+    }
+
     return {
         getProgressBarHtml: getProgressBarHtml,
         getPlayedIndicatorHtml: getPlayedIndicator,
         getChildCountIndicatorHtml: getChildCountIndicatorHtml,
         enableProgressIndicator: enableProgressIndicator,
         getTimerIndicator: getTimerIndicator,
-        enablePlayedIndicator: enablePlayedIndicator
+        enablePlayedIndicator: enablePlayedIndicator,
+        getSyncIndicator: getSyncIndicator
     };
 });
\ No newline at end of file
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 3d11900826..d6c5f1fb4d 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -847,43 +847,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     background: rgba(248, 58, 34, .8);
 }
 
-.syncIndicator {
-    display: block;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    text-align: center;
-    vertical-align: middle;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    color: #fff;
-    line-height: 19px;
-    background-color: #52B54B;
-}
-
-.seriesTimerIndicator {
-    color: #cc3333;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    font-size: 200%;
-}
-
-.playedIndicator + .syncIndicator, .countIndicator + .syncIndicator {
-    top: 32px;
-}
-
-.card .playedIndicator, .card .countIndicator {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
-
-.syncIndicator i {
-    font-size: 180%;
-}
-
 .recordingProgressBar::-moz-progress-bar {
     background-color: #cc3333;
 }