diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index 4b704bd0..9d453040 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -833,6 +833,7 @@ a .users-poster-face:hover {
     background-color: #111;
     height: 100%;
     width: 100%;
+    position: relative;
     overflow: hidden;
 }
 .dashboard-activity-progress .buffer-bar {
diff --git a/data/interfaces/default/current_activity_instance.html b/data/interfaces/default/current_activity_instance.html
index 489fb421..cede24c7 100644
--- a/data/interfaces/default/current_activity_instance.html
+++ b/data/interfaces/default/current_activity_instance.html
@@ -273,9 +273,9 @@ DOCUMENTATION :: END
                                     bw = helpers.cast_to_int(data['bandwidth']) or "Unknown"
                                     if bw != "Unknown":
                                         if bw > 1000:
-                                            bw = str(round(bw / 1000.0, 1)) + ' Mbps'
+                                            bw = str(round(bw / 1000.0, 1)) + 'Mbps'
                                         else:
-                                            bw = str(bw) + ' kbps'
+                                            bw = str(bw) + 'kbps'
                                 %>
                                 <span id="stream-bandwidth-${data['session_key']}">${bw}</span>
                                 <span id="streaming-brain-${data['session_key']}" data-toggle="tooltip" title="Streaming Brain Estimate"><i class="fa fa-info-circle"></i></span>
@@ -307,7 +307,7 @@ DOCUMENTATION :: END
         <div class="dashboard-activity-progress">
             <div class="dashboard-activity-progress-bar">
                 <div id="buffer-bar-${data['session_key']}" class="buffer-bar" style="width: ${data['transcode_progress']}%" data-toggle="tooltip" title="Transcoder Progress ${data['transcode_progress']}%">${data['transcode_progress']}%</div>
-                <div id="progress-bar-${data['session_key']}" class="progress-bar" style="width: ${data['progress_percent']}%" data-toggle="tooltip" title="Stream Progress ${data['progress_percent']}%">${data['progress_percent']}%</div>
+                <div id="progress-bar-${data['session_key']}" class="progress-bar" style="width: ${data['progress_percent']}%" data-last_view_offset="${data['view_offset']}" data-view_offset="${data['view_offset']}" data-stream_duration="${data['stream_duration']}" data-state="${data['state']}" data-toggle="tooltip" title="Stream Progress ${data['progress_percent']}%">${data['progress_percent']}%</div>
             </div>
         </div>
     </div>
diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html
index 64fb923c..e8320a2a 100644
--- a/data/interfaces/default/index.html
+++ b/data/interfaces/default/index.html
@@ -442,8 +442,10 @@
                         // Update the progress bars, percent - 3 because of 3px padding-right
                         $('#buffer-bar-' + key).width(parseInt(s.transcode_progress) - 3 + '%').html(s.transcode_progress + '%')
                             .attr('data-original-title', 'Transcoder Progress ' + s.transcode_progress + '%');
-                        $('#progress-bar-' + key).width(parseInt(s.progress_percent) - 3 + '%').html(s.progress_percent + '%')
-                            .attr('data-original-title', 'Stream Progress ' + s.progress_percent + '%');
+                        $('#progress-bar-' + key).data('state', s.state);
+                        if ($('#progress-bar-' + key).data('last_view_offset') != s.view_offset) {
+                            $('#progress-bar-' + key).data('last_view_offset', s.view_offset).data('view_offset', s.view_offset);
+                        }
 
                         // Add temporary class so we know which instances are still active
                         instance.addClass('updated-temp');
@@ -493,9 +495,19 @@
     setInterval( function(){
         $('.progress_time_offset').each(function () {
             if ($(this).data('state') === 'playing') {
-                var ms = parseInt($(this).data('view_offset'));
-                var timestamp = millisecondsToMinutes(ms, false);
-                $(this).html(timestamp).data('view_offset', ms + 1000)
+                var view_offset = parseInt($(this).data('view_offset'));
+                var timestamp = millisecondsToMinutes(view_offset, false);
+                $(this).html(timestamp).data('view_offset', view_offset + 1000)
+            }
+        });
+        $('.progress-bar').each(function () {
+            if ($(this).data('state') === 'playing') {
+                var view_offset = parseInt($(this).data('view_offset'));
+                var duration = parseInt($(this).data('stream_duration'));
+                var progress_percent = Math.trunc(view_offset / duration * 100)
+                $(this).width(progress_percent - 3 + '%').html(progress_percent + '%')
+                    .attr('data-original-title', 'Stream Progress ' + progress_percent + '%')
+                    .data('view_offset', view_offset + 1000);
             }
         });
     }, 1000);