diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/shardsView.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/shardsView.ejs
index eaba72cff2..62c2fc2417 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/shardsView.ejs
+++ b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/shardsView.ejs
@@ -35,6 +35,11 @@
               </div>
             </div>
             <div class="pure-u-2-24 shardSyncIcons">
+                <% if (visible === name) { %>
+                  <i style="margin-left: 10px; color: #fff;" class="fa fa-arrow-down"></i>
+                <% } else { %>
+                  <i style="margin-left: 10px; color: #fff;" class="fa fa-arrow-right"></i>
+                <% } %>
               <% if (collectionInSync(name)) { %>
                 <i style="margin-left: 10px;" class="fa fa-check-circle"></i>
               <% } else { %>
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/shardsView.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/shardsView.js
index 5298c22f5e..f5824b72c8 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/js/views/shardsView.js
+++ b/js/apps/system/_admin/aardvark/APP/frontend/js/views/shardsView.js
@@ -46,11 +46,17 @@
       return this;
     },
 
+    renderArrows: function (e) {
+      $('#shardsContent .fa-arrow-down').removeClass('fa-arrow-down').addClass('fa-arrow-right');
+      $(e.currentTarget).find('.fa-arrow-right').removeClass('fa-arrow-right').addClass('fa-arrow-down');
+    },
+
     toggleSections: function (e) {
       var colName = $(e.currentTarget).parent().attr('id');
       this.visibleCollection = colName;
       $('.sectionShardContent').hide();
       $(e.currentTarget).next().show();
+      this.renderArrows(e);
 
       this.getShardDetails(colName);
     },