diff --git a/peeringdb_server/static/site.css b/peeringdb_server/static/site.css
index 5159ed79..fb7effd1 100644
--- a/peeringdb_server/static/site.css
+++ b/peeringdb_server/static/site.css
@@ -1355,8 +1355,6 @@ div.oauth img {
   border-radius: 0px;
   cursor: pointer;
   max-width: 25%;
-  height: 80px;
-  height: 80px;
 }
 
 .nav-tabs .active.campus-tab {
@@ -1366,12 +1364,14 @@ div.oauth img {
   font-weight: bold !important;
   border-radius: 0px;
   cursor: pointer;
-  height: 80px;
-  height: 80px;
   max-width: 25%;
 }
 
 @media (max-width: 825px) {
+  .nav-tabs a.campus-tab {
+    min-height: 120px;
+    min-width: 200px;
+  }
   div.landing_footer img.socialmedia_icon {
     width: 30px;
     margin: 3px;
@@ -1380,13 +1380,6 @@ div.oauth img {
     width: 200px;
     margin-top: 3px;
   }
-  .campus-list > .nav-list-campus {
-    position:absolute;
-    left:0px;
-    top:0px;
-    min-width:1920px;
-    margin-top:0px;
-  }
   #square-logo {
     display: block;
   }
@@ -1999,11 +1992,13 @@ input.input-block-level {
 .wrapper {
   position:relative;
   margin:0 auto;
-  overflow:hidden;
+  overflow-y: scroll !important;
   padding:5px;
-  height:94px;
+  scrollbar-width: none;
+}
+.wrapper::-webkit-scrollbar {
+  display: none;
 }
-
 .campus-list > .nav-list-campus > a{
   display:table-cell;
 }
@@ -2019,6 +2014,8 @@ input.input-block-level {
 }
 
 .scroller-campus {
+  margin-bottom: 5px;
+  margin-top: 12px !important;
   color: #000;
   padding: 2rem 1rem;
   font-size: 16px;
@@ -2027,10 +2024,8 @@ input.input-block-level {
   border-color: #CBCCCF !important;
   text-align:center;
   cursor:pointer;
-  display:none;
   padding:7px;
   align-items: center;
-  max-height: 80px;
   min-height: 80px;
 }
 
diff --git a/peeringdb_server/templates/site/view.html b/peeringdb_server/templates/site/view.html
index e51b2c4c..661c07db 100644
--- a/peeringdb_server/templates/site/view.html
+++ b/peeringdb_server/templates/site/view.html
@@ -98,7 +98,7 @@
 
 
 {% if ref_tag == "campus" %}
-<div class="campus-nav-container" style="max-height: 94px;">
+<div class="campus-nav-container">
   <div class="scroller-campus scroller-left float-left mt-2"><i class="material-icons">chevron_left</i></div>
     <div class="wrapper campus-list flex-grow-1" style="width: 100%;">
       <nav class="nav nav-tabs nav-list-campus mt-2 ps-0" id="myTab" role="tablist" style="border-bottom: none;">
@@ -624,92 +624,45 @@ $(document).ready(function() {
 });
 
 
+</script>
+{% endif %}
+
+{% if ref_tag == "campus" %}
+<script>
+
 // tab campus
-var hidWidth;
-var scrollBarWidths = 40;
-
-var widthOfList = function(){
-  var itemsWidth = 0;
-  $('.nav-list-campus a').each(function(){
-    var itemWidth = $(this).outerWidth();
-    itemsWidth+=itemWidth;
-  });
-  return itemsWidth;
-};
-
-var widthOfHidden = function(){
-    var ww = 0 - $('.wrapper').outerWidth();
-    var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
-    var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
-
-    if (ww>hw) {
-        return ww;
-    }
-    else {
-        return hw;
-    }
-};
-
-var getLeftPosi = function(){
-
-    var ww = 0 - $('.wrapper').outerWidth();
-    var lp = $('.nav-list-campus').position().left;
-
-    if (ww>lp) {
-        return ww;
-    }
-    else {
-        return lp;
-    }
-};
-
-var reAdjust = function(){
-
-  // check right pos of last nav item
-  var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
-  if (($('.wrapper').outerWidth()) < widthOfList() && (rp<0)) {
+$('.wrapper').scroll(()=>{
+    reAdjust()
+  })
+const reAdjust = () =>{
+  if (($('.wrapper').scrollLeft() + $('.wrapper').innerWidth() >= $('.wrapper')[0].scrollWidth - 10)){
+    $('.scroller-right').hide();
+  }else{
     $('.scroller-right').show().css('display', 'flex');
   }
-  else {
-    $('.scroller-right').hide();
-  }
 
-  if (getLeftPosi()<0) {
+  if ($('.wrapper').scrollLeft()){
     $('.scroller-left').show().css('display', 'flex');
-  }
-  else {
-  	$('.scroller-left').hide();
+  }else{
+    $('.scroller-left').hide();
   }
 }
-
-reAdjust();
-
+$(document).ready(()=>{
+  reAdjust();
+})
 $(window).on('resize',function(e){
   	reAdjust();
 });
 
 $('.scroller-right').click(function() {
-
-  $('.scroller-left').fadeIn('slow');
-  $('.scroller-right').fadeOut('slow');
-
-  $('.nav-list-campus').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
-    reAdjust();
-  });
+  $('.wrapper').animate( { scrollLeft: '+=200' }, "fast");
 });
 
 $('.scroller-left').click(function() {
-
-	$('.scroller-right').fadeIn('slow');
-	$('.scroller-left').fadeOut('slow');
-
-  	$('.nav-list-campus').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
-  	    reAdjust();
-  	});
+  $('.wrapper').animate( { scrollLeft: '-=200' }, "fast");
 });
 </script>
 {% endif %}
-
 {% if ref_tag != "campus" %}
 {% if permissions.can_use_tools %}
 {% include tools_template_name with data=data instance=instance permissions=permissions %}
diff --git a/peeringdb_server/templates/site/view_campus_networks.html b/peeringdb_server/templates/site/view_campus_networks.html
index d1a3031f..d23d0136 100644
--- a/peeringdb_server/templates/site/view_campus_networks.html
+++ b/peeringdb_server/templates/site/view_campus_networks.html
@@ -26,7 +26,7 @@
           <h5>{{ facility }}</h5>
         </div>
         <div class="col-6 col-sm-4 col-md-4 filter" id="filter-mobile">
-          <input type="text" placeholder="{% trans "Filter" %}" oninput="syncValue(this)" data-filter-target="#list-networks" class="form-control" />
+          <input type="text" placeholder="{% trans "Filter" %}" oninput="syncValue(this)" data-filter-target="#list-networks{{ forloop.counter }}" class="form-control" />
         </div>
       </div>
       <div class="row header align-items-center">
@@ -43,12 +43,12 @@
           <div data-sort-target=".ixs">{% trans "IX Connections" %}</div>
         </div>
         <div class="col-2 col-sm-2 col-md-2 filter" id="filter-web">
-          <input type="text" placeholder="{% trans "Filter" %}" oninput="syncValue(this)" data-filter-target="#list-networks" class="form-control" />
+          <input type="text" placeholder="{% trans "Filter" %}" oninput="syncValue(this)" data-filter-target="#list-networks{{ forloop.counter }}" class="form-control" />
         </div>
       </div>
 
       <div class="scrollable"
-          id="list-networks"
+          id="list-networks{{ forloop.counter }}"
           data-edit-component="list"
           data-edit-template="network-item"
           style="max-height: 220px">