diff --git a/dashboard-ui/css/dashboard.css b/dashboard-ui/css/dashboard.css
index 8892e8edf2..649a8abc34 100644
--- a/dashboard-ui/css/dashboard.css
+++ b/dashboard-ui/css/dashboard.css
@@ -867,31 +867,75 @@ a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearB
     position: absolute;
 }
 
+/* All HTML5 progress enabled browsers */
+.transcodingProgress, .playbackProgress {
+    /* Turns off styling - not usually needed, but good to know. */
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    /* gets rid of default border in Firefox and Opera. */
+    border: 0;
+    margin: 0;
+    height: 14px;
+    border: 0 solid #222;
+    border-radius: 0;
+    width: 50px;
+    margin-right: 5px;
+    background: #000 !important; /* !important only needed in polyfill */
+}
+
+    /* Chrome */
+    .playbackProgress::-webkit-progress-bar, .transcodingProgress::-webkit-progress-bar {
+        background: #000;
+    }
+
+
 .transcodingSession .playbackProgress {
     bottom: 5px;
 }
 
 /* Firefox */
 .transcodingProgress::-moz-progress-bar {
-    border-radius: 5px;
+    border-radius: 0;
     background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
 }
 
 /* Chrome */
 .transcodingProgress::-webkit-progress-value {
-    border-radius: 5px;
+    border-radius: 0;
     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(221, 73, 25)), color-stop(1, rgb(221, 73, 25)) ) !important;
     background-image: -webkit-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
 }
 
 /* Polyfill */
 .transcodingProgress[aria-valuenow]:before {
-    border-radius: 5px;
+    border-radius: 0;
     background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
     background-image: -ms-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
     background-image: -o-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
 }
 
+/* Firefox */
+.playbackProgress::-moz-progress-bar {
+    border-radius: 0;
+    background-image: none;
+    background-color: #52B54B;
+}
+
+/* Chrome */
+.playbackProgress::-webkit-progress-value {
+    border-radius: 0;
+    background-image: none;
+    background-color: #52B54B;
+}
+
+/* Polyfill */
+.playbackProgress[aria-valuenow]:before {
+    border-radius: 0;
+    background-image: none;
+    background-color: #52B54B;
+}
+
 @media all and (max-width: 550px) {
 
     .sessionAppName {
diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js
index 6fc0c07d70..5f42c39d88 100644
--- a/dashboard-ui/scripts/dashboardpage.js
+++ b/dashboard-ui/scripts/dashboardpage.js
@@ -372,16 +372,16 @@
                     var position = session.PlayState.PositionTicks || 0;
                     var value = (100 * position) / nowPlayingItem.RunTimeTicks;
 
-                    html += '<progress class="itemProgressBar playbackProgress" min="0" max="100" value="' + value + '"></progress>';
+                    html += '<progress class="playbackProgress" min="0" max="100" value="' + value + '"></progress>';
                 } else {
-                    html += '<progress class="itemProgressBar playbackProgress" min="0" max="100" style="display:none;"></progress>';
+                    html += '<progress class="playbackProgress" min="0" max="100" style="display:none;"></progress>';
                 }
 
                 if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
 
-                    html += '<progress class="itemProgressBar transcodingProgress" min="0" max="100" value="' + session.TranscodingInfo.CompletionPercentage.toFixed(1) + '"></progress>';
+                    html += '<progress class="transcodingProgress" min="0" max="100" value="' + session.TranscodingInfo.CompletionPercentage.toFixed(1) + '"></progress>';
                 } else {
-                    html += '<progress class="itemProgressBar transcodingProgress" min="0" max="100" style="display:none;"></progress>';
+                    html += '<progress class="transcodingProgress" min="0" max="100" style="display:none;"></progress>';
                 }
 
                 html += '</div>';