diff --git a/static/css/style.css b/static/css/style.css
index 9c1b05b..415b3e2 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1361,7 +1361,7 @@ div#browsethearchive-pagination, div#zinesindex-pagination, div#selfpublishedind
 	text-align: center;
 }
 
-/*temptative pagination*/
+/* new pagination*/
 
 ul.browsethearchive-pagination {
 	width: 100%;
@@ -1442,7 +1442,6 @@ ul.browsethearchive-pagination li a.current {
     cursor: pointer;
 }
 
-
 /************ BROWSE BY CATEGORY ************/
 
 div#browsebycategory-listcategories{
diff --git a/templates/browsethearchive.html b/templates/browsethearchive.html
index 8ac2de6..9bda086 100644
--- a/templates/browsethearchive.html
+++ b/templates/browsethearchive.html
@@ -46,115 +46,98 @@
 
 <script type="text/javascript">
 
-pageSize = 24;
-incremSlide = 5;
-startPage = 0;
-numberPage = 0;
+// pagination script w/ support from @biberman on stackoverflow - big thanks!
 
-//pagination slider ref https://www.javaer101.com/en/article/123201810.html
 
-var pageCount =  $(".browsethearchive-items").length / pageSize;
-var totalSlidepPage = Math.floor(pageCount / incremSlide);
+let startPage;
+const pageSize = 24;
+const totalSlidePage = 5;
+const pageCount = Math.ceil($(".browsethearchive-items").length / pageSize);
+const slideRange = Math.floor(totalSlidePage / 2); 
 
-for(var i = 0 ; i<pageCount;i++){
-    $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
-    if(i>pageSize){
-       $("#pagin li").eq(i).hide();
-    }
+slide = function() {
+startPage = $("#pagin li a.current").parent().index();
+let paginationStart = (startPage - slideRange) < 0 ? 0 :
+(startPage >= (pageCount - slideRange) ? (pageCount - totalSlidePage) :
+(startPage - slideRange));
+
+$("#pagin li").hide();
+for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) {
+$("#pagin li").eq(t + 1).show();
 }
 
-var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
-   startPage-=1;
-   incremSlide-=1;
-   numberPage--;
-   slide();
-});
+next.show();
+prev.show();
 
+if (startPage == 1) {
 prev.hide();
+}
+else if (startPage == pageCount ) {
+next.hide();
+}
+}
 
-var next = $("<li/>").addClass("next").html("Next").click(function(){
-   startPage+=1;
-   incremSlide+=1;
-   numberPage++;
-   slide();
+showPage = function() {
+console.log(startPage);
+$(".browsethearchive-items").hide();
+$(".browsethearchive-items").each(function(n) {
+if (n >= pageSize * (startPage - 1) && n < pageSize * startPage)
+$(this).show();
 });
-
-
-$("#pagin").prepend(prev).append(next);
-
-$("#pagin li").first().find("a").addClass("current");
-
-slide = function(sens){
-   $("#pagin li").hide();
-   
-   for(t=startPage;t<incremSlide;t++){
-     $("#pagin li").eq(t+1).show();
-   }
-   if(startPage == 0){
-     next.show();
-     prev.hide();
-   }else if(numberPage == totalSlidepPage ){
-     next.hide();
-     prev.show();
-   }else{
-     next.show();
-     prev.show();
-   }   
 }
 
-slide();
+for (let i = 0 ; i < pageCount; i++) {
+$("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
 
-showPage = function(page) {
-	  $(".browsethearchive-items").hide();
-	  $(".browsethearchive-items").each(function(n) {
-	      if (n >= pageSize * (page - 1) && n < pageSize * page)
-	          $(this).show();
-	  });        
+if (i > pageSize) {
+$("#pagin li").eq(i).hide();
+}
 }
-    
-showPage(1);
-$("#pagin li a").eq(0).addClass("current");
-
-
-var $listItems = $('#pagin li a');
-var activeLink;
 
+let prev = $("<li/>").addClass("prev").html("Prev").click(function() {
+let prevLi = $("#pagin li a.current").parent().prev().find("a");
 
-$("#pagin li a").click(function() {
+if (prevLi[0]) {
+$("#pagin li a.current").removeClass("current");
+prevLi.addClass("current");
+}
 
-  $listItems.removeClass('current');
-  $(this).addClass('current');  
-  var activeLink=$(this);
+slide();
 
-  showPage(parseInt($(this).text()));
+if (startPage != 0) {
+showPage();
+}
 });
 
+let next = $("<li/>").addClass("next").html("Next").click(function() {
+let nextLi = $("#pagin li a.current").parent().next().find("a");
 
-var i = 1;
-
-$(".prev").click(function() {
-
-    let prevLi = $("#pagin li a.current").parent().prev().find("a");
-    $("#pagin li a.current").removeClass("current");
-    prevLi.addClass("current");
+if (nextLi[0]) {
+$("#pagin li a.current").removeClass("current");
+nextLi.addClass("current");
+}
 
+slide();
 
-    if (i != 1) {
-      showPage(--i);
-    }
+if (startPage <= pageCount) {
+showPage();
+}
 });
 
-$(".next").click(function() {
+$("#pagin").prepend(prev).append(next);
 
-    let nextLi = $("#pagin li a.current").parent().next().find("a");
-    $("#pagin li a.current").removeClass("current");
-    nextLi.addClass("current");
+$("#pagin li a").click(function() {
+$('#pagin li a').removeClass('current');
+$(this).addClass('current');
 
-    if (i < ($('.browsethearchive-items').length)/ pageSize) {
-      showPage(++i);
-    }    
+slide();
+showPage();
 });
 
+$("#pagin li a").eq(0).addClass("current");
+
+slide();
+showPage();
 
 </script>