diff --git a/data/interfaces/default/css/tautulli.css b/data/interfaces/default/css/tautulli.css
index f8b15890..2835488d 100644
--- a/data/interfaces/default/css/tautulli.css
+++ b/data/interfaces/default/css/tautulli.css
@@ -1478,7 +1478,8 @@ a:hover .dashboard-stats-square {
     text-align: center;
     position: relative;
     z-index: 0;
-    overflow: hidden;
+    overflow: auto;
+    scrollbar-width: none;
 }
 .dashboard-recent-media {
     width: 100%;
diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html
index 6e4818c7..00cbfb85 100644
--- a/data/interfaces/default/index.html
+++ b/data/interfaces/default/index.html
@@ -92,10 +92,10 @@
                 <h3 class="pull-left"><span id="recently-added-xml">Recently Added</span></h3>
                 <ul class="nav nav-header nav-dashboard pull-right" style="margin-top: -3px;">
                     <li>
-                        <a href="#" id="recently-added-page-left" class="paginate btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
+                        <a href="#" id="recently-added-page-left" class="paginate btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-left"></i></a>
                     </li>
                     <li>
-                        <a href="#" id="recently-added-page-right" class="paginate btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
+                        <a href="#" id="recently-added-page-right" class="paginate btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-right"></i></a>
                     </li>
                 </ul>
                 <div class="button-bar">
@@ -971,29 +971,28 @@
     });
 
     function resetScroller() {
-        leftTotal = 0;
-        $("#recently-added-row-scroller").animate({ left: leftTotal }, 1000);
+        $(".dashboard-recent-media-row").animate({ scrollLeft: 0 }, 1000);
         $("#recently-added-page-left").addClass("disabled").blur();
     }
 
-    var leftTotal = 0;
     $(".paginate").click(function (e) {
         e.preventDefault();
         var scroller = $("#recently-added-row-scroller");
+        var scrollerParent = scroller.parent();
         var containerWidth = $("body").find(".container-fluid").width();
+        var scrollCurrent = scrollerParent.scrollLeft();
         var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175;
-        var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0);
+        var scrollMax = parseInt(scroller.width()) - Math.abs(scrollAmount);
+        var scrollTotal = Math.min(scrollCurrent + scrollAmount, scrollMax);
+        scrollerParent.animate({ scrollLeft: scrollTotal }, 250);
 
-        leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax);
-        scroller.animate({ left: leftTotal }, 250);
-
-        if (leftTotal === 0) {
+        if (scrollTotal === 0) {
             $("#recently-added-page-left").addClass("disabled").blur();
         } else {
             $("#recently-added-page-left").removeClass("disabled");
         }
 
-        if (leftTotal === leftMax) {
+        if (scrollTotal === scrollMax) {
             $("#recently-added-page-right").addClass("disabled").blur();
         } else {
             $("#recently-added-page-right").removeClass("disabled");
@@ -1005,17 +1004,17 @@
         selected_filter = $('input[name=recently-added-toggle]:checked', '#recently-added-toggles');
         $(selected_filter).closest('label').addClass('active');
         recently_added_type = $(selected_filter).val();
-        resetScroller();
         setLocalStorage('home_stats_recently_added_type', recently_added_type);
         recentlyAdded(recently_added_count, recently_added_type);
+        resetScroller();
     });
 
     $('#recently-added-count').change(function () {
         forceMinMax($(this));
         recently_added_count = $(this).val();
-        resetScroller();
         setLocalStorage('home_stats_recently_added_count', recently_added_count);
         recentlyAdded(recently_added_count, recently_added_type);
+        resetScroller();
     });
 
     $('#recently-added-count').tooltip({ container: 'body', placement: 'top', html: true });
diff --git a/data/interfaces/default/library.html b/data/interfaces/default/library.html
index b1fe8b6f..df9298d0 100644
--- a/data/interfaces/default/library.html
+++ b/data/interfaces/default/library.html
@@ -149,10 +149,10 @@ DOCUMENTATION :: END
                                     <div class="table-card-header">
                                         <ul class="nav nav-header nav-dashboard pull-right">
                                             <li>
-                                                <a href="#" id="recently-watched-page-left" class="paginate-watched btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
+                                                <a href="#" id="recently-watched-page-left" class="paginate-watched btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-left"></i></a>
                                             </li>
                                             <li>
-                                                <a href="#" id="recently-watched-page-right" class="paginate-watched btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
+                                                <a href="#" id="recently-watched-page-right" class="paginate-watched btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-right"></i></a>
                                             </li>
                                         </ul>
                                         <div class="header-bar">
@@ -175,10 +175,10 @@ DOCUMENTATION :: END
                                     <div class="table-card-header">
                                         <ul class="nav nav-header nav-dashboard pull-right">
                                             <li>
-                                                <a href="#" id="recently-added-page-left" class="paginate-added btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
+                                                <a href="#" id="recently-added-page-left" class="paginate-added btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-left"></i></a>
                                             </li>
                                             <li>
-                                                <a href="#" id="recently-added-page-right" class="paginate-added btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
+                                                <a href="#" id="recently-added-page-right" class="paginate-added btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-right"></i></a>
                                             </li>
                                         </ul>
                                         <div class="header-bar">
@@ -745,48 +745,48 @@ DOCUMENTATION :: END
 
     $('div.art-face').animate({ opacity: 0.2 }, { duration: 1000 });
 
-    var leftTotalWatched = 0;
     $(".paginate-watched").click(function (e) {
         e.preventDefault();
         var scroller = $("#recently-watched-row-scroller");
+        var scrollerParent = scroller.parent();
         var containerWidth = $("#library-recently-watched").width();
+        var scrollCurrent = scrollerParent.scrollLeft();
         var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175;
-        var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0);
+        var scrollMax = parseInt(scroller.width()) - Math.abs(scrollAmount);
+        var scrollTotal = Math.min(scrollCurrent + scrollAmount, scrollMax);
+        scrollerParent.animate({ scrollLeft: scrollTotal }, 250);
 
-        leftTotalWatched = Math.max(Math.min(leftTotalWatched + scrollAmount, 0), leftMax);
-        scroller.animate({ left: leftTotalWatched }, 250);
-
-        if (leftTotalWatched == 0) {
+        if (scrollTotal == 0) {
             $("#recently-watched-page-left").addClass("disabled").blur();
         } else {
             $("#recently-watched-page-left").removeClass("disabled");
         }
 
-        if (leftTotalWatched == leftMax) {
+        if (scrollTotal == scrollMax) {
             $("#recently-watched-page-right").addClass("disabled").blur();
         } else {
             $("#recently-watched-page-right").removeClass("disabled");
         }
     });
 
-    var leftTotalAdded = 0;
     $(".paginate-added").click(function (e) {
         e.preventDefault();
         var scroller = $("#recently-added-row-scroller");
+        var scrollerParent = scroller.parent();
         var containerWidth = $("#library-recently-added").width();
+        var scrollCurrent = scrollerParent.scrollLeft();
         var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175;
-        var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0);
+        var scrollMax = parseInt(scroller.width()) - Math.abs(scrollAmount);
+        var scrollTotal = Math.min(scrollCurrent + scrollAmount, scrollMax);
+        scrollerParent.animate({ scrollLeft: scrollTotal }, 250);
 
-        leftTotalAdded = Math.max(Math.min(leftTotalAdded + scrollAmount, 0), leftMax);
-        scroller.animate({ left: leftTotalAdded }, 250);
-
-        if (leftTotalAdded == 0) {
+        if (scrollTotal == 0) {
             $("#recently-added-page-left").addClass("disabled").blur();
         } else {
             $("#recently-added-page-left").removeClass("disabled");
         }
 
-        if (leftTotalAdded == leftMax) {
+        if (scrollTotal == scrollMax) {
             $("#recently-added-page-right").addClass("disabled").blur();
         } else {
             $("#recently-added-page-right").removeClass("disabled");
diff --git a/data/interfaces/default/library_recently_added.html b/data/interfaces/default/library_recently_added.html
index fb53f9a5..4cf56d8e 100644
--- a/data/interfaces/default/library_recently_added.html
+++ b/data/interfaces/default/library_recently_added.html
@@ -36,7 +36,7 @@ DOCUMENTATION :: END
 
 %>
 <div class="dashboard-recent-media-row">
-    <div id="recently-added-row-scroller" style="left: 0;">
+    <div id="recently-added-row-scroller">
         <ul class="dashboard-recent-media list-unstyled">
             % for item in data:
             <li>
diff --git a/data/interfaces/default/recently_added.html b/data/interfaces/default/recently_added.html
index 52920817..74d5e561 100644
--- a/data/interfaces/default/recently_added.html
+++ b/data/interfaces/default/recently_added.html
@@ -36,7 +36,7 @@ DOCUMENTATION :: END
 %>
 % if data:
 <div class="dashboard-recent-media-row">
-    <div id="recently-added-row-scroller" style="left: 0;">
+    <div id="recently-added-row-scroller">
         <ul class="dashboard-recent-media list-unstyled">
             % for item in data:
             <div class="dashboard-recent-media-instance">
diff --git a/data/interfaces/default/user.html b/data/interfaces/default/user.html
index 6ec74620..cd13cc83 100644
--- a/data/interfaces/default/user.html
+++ b/data/interfaces/default/user.html
@@ -125,10 +125,10 @@ DOCUMENTATION :: END
                                     <div class="table-card-header">
                                         <ul class="nav nav-header nav-dashboard pull-right">
                                             <li>
-                                                <a href="#" id="recently-watched-page-left" class="paginate btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
+                                                <a href="#" id="recently-watched-page-left" class="paginate btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-left"></i></a>
                                             </li>
                                             <li>
-                                                <a href="#" id="recently-watched-page-right" class="paginate btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
+                                                <a href="#" id="recently-watched-page-right" class="paginate btn-gray" data-id="+1"><i class="fa fa-lg fa-chevron-right"></i></a>
                                             </li>
                                         </ul>
                                         <div class="header-bar">
@@ -688,24 +688,24 @@ DOCUMENTATION :: END
         highlightWatchedScrollerButton();
     });
 
-    var leftTotal = 0;
     $(".paginate").click(function (e) {
         e.preventDefault();
         var scroller = $("#recently-watched-row-scroller");
+        var scrollerParent = scroller.parent();
         var containerWidth = $("#user-recently-watched").width();
+        var scrollCurrent = scrollerParent.scrollLeft();
         var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175;
-        var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0);
+        var scrollMax = parseInt(scroller.width()) - Math.abs(scrollAmount);
+        var scrollTotal = Math.min(scrollCurrent + scrollAmount, scrollMax);
+        scrollerParent.animate({ scrollLeft: scrollTotal }, 250);
 
-        leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax);
-        scroller.animate({ left: leftTotal }, 250);
-
-        if (leftTotal == 0) {
+        if (scrollTotal == 0) {
             $("#recently-watched-page-left").addClass("disabled").blur();
         } else {
             $("#recently-watched-page-left").removeClass("disabled");
         }
 
-        if (leftTotal == leftMax) {
+        if (scrollTotal == scrollMax) {
             $("#recently-watched-page-right").addClass("disabled").blur();
         } else {
             $("#recently-watched-page-right").removeClass("disabled");
diff --git a/data/interfaces/default/user_recently_watched.html b/data/interfaces/default/user_recently_watched.html
index 39243766..b9f8a8a1 100644
--- a/data/interfaces/default/user_recently_watched.html
+++ b/data/interfaces/default/user_recently_watched.html
@@ -31,7 +31,7 @@ DOCUMENTATION :: END
     from plexpy.helpers import page, short_season
 %>
 <div class="dashboard-recent-media-row">
-    <div id="recently-watched-row-scroller" style="left: 0;">
+    <div id="recently-watched-row-scroller">
         <ul class="dashboard-recent-media list-unstyled">
             % for item in data:
             <li>