diff --git a/cps/static/js/filter_grid.js b/cps/static/js/filter_grid.js
index d84cf57a..14d60f27 100644
--- a/cps/static/js/filter_grid.js
+++ b/cps/static/js/filter_grid.js
@@ -30,6 +30,9 @@ $("#desc").click(function() {
     if (direction === 0) {
         return;
     }
+    $("#asc").removeClass("active");
+    $("#desc").addClass("active");
+
     var page = $(this).data("id");
     $.ajax({
         method:"post",
@@ -50,6 +53,9 @@ $("#asc").click(function() {
     if (direction === 1) {
         return;
     }
+    $("#desc").removeClass("active");
+    $("#asc").addClass("active");
+
     var page = $(this).data("id");
     $.ajax({
         method:"post",
@@ -66,6 +72,8 @@ $("#asc").click(function() {
 });
 
 $("#all").click(function() {
+    $(".char").removeClass("active");
+    $("#all").addClass("active");
     // go through all elements and make them visible
     $list.isotope({ filter: function() {
         return true;
@@ -74,6 +82,9 @@ $("#all").click(function() {
 });
 
 $(".char").click(function() {
+    $(".char").removeClass("active");
+    $(this).addClass("active");
+    $("#all").removeClass("active");
     var character = this.innerText;
     $list.isotope({ filter: function() {
         return this.attributes["data-id"].value.charAt(0).toUpperCase() === character;
diff --git a/cps/static/js/filter_list.js b/cps/static/js/filter_list.js
index e76e6147..747f98fa 100644
--- a/cps/static/js/filter_list.js
+++ b/cps/static/js/filter_list.js
@@ -19,6 +19,7 @@ var direction = $("#asc").data('order');  // 0=Descending order; 1= ascending or
 var sort = 0;       // Show sorted entries
 
 $("#sort_name").click(function() {
+    $("#sort_name").toggleClass("active");
     var className = $("h1").attr("Class") + "_sort_name";
     var obj = {};
     obj[className] = sort;
@@ -68,6 +69,9 @@ $("#desc").click(function() {
     if (direction === 0) {
         return;
     }
+    $("#asc").removeClass("active");
+    $("#desc").addClass("active");
+
     var page = $(this).data("id");
     $.ajax({
         method:"post",
@@ -112,10 +116,12 @@ $("#desc").click(function() {
 
 
 $("#asc").click(function() {
-
     if (direction === 1) {
         return;
     }
+    $("#desc").removeClass("active");
+    $("#asc").addClass("active");
+
     var page = $(this).data("id");
     $.ajax({
         method:"post",
@@ -159,6 +165,8 @@ $("#asc").click(function() {
 });
 
 $("#all").click(function() {
+    $("#all").addClass("active");
+    $(".char").removeClass("active");
     var cnt = $("#second").contents();
     $("#list").append(cnt);
     // Find count of middle element
@@ -176,6 +184,9 @@ $("#all").click(function() {
 });
 
 $(".char").click(function() {
+    $(".char").removeClass("active");
+    $(this).addClass("active");
+    $("#all").removeClass("active");
     var character = this.innerText;
     var count = 0;
     var index = 0;
diff --git a/cps/templates/grid.html b/cps/templates/grid.html
index b1cc64ec..13a59b4a 100644
--- a/cps/templates/grid.html
+++ b/cps/templates/grid.html
@@ -4,20 +4,20 @@
 
     <div class="filterheader hidden-xs">
       {% if entries.__len__() and data == 'author' %}
-        <button id="sort_name" class="btn btn-primary"><b>B,A <-> A B</b></button>
+        <div id="sort_name" class="btn btn-primary"><b>B,A <-> A B</b></div>
       {% endif %}
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-      <button id="asc" data-id="series" data-order="{{ order }}" class="btn btn-primary"><span class="glyphicon glyphicon-sort-by-alphabet"></span></button>
-      <button id="desc" data-id="series" class="btn btn-primary"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></button>
+      <div id="asc" data-id="series" data-order="{{ order }}" class="btn btn-primary{% if order == 1 %} active{% endif%}"><span class="glyphicon glyphicon-sort-by-alphabet"></span></div>
+      <div id="desc" data-id="series" class="btn btn-primary{% if order == 0 %} active{% endif%}"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></div>
       {% if charlist|length %}
-      <button id="all" class="btn btn-primary {% if charlist|length > 9 %}hidden-sm{% endif %}">{{_('All')}}</button>
+      <div id="all" class="active btn btn-primary {% if charlist|length > 9 %}hidden-sm{% endif %}">{{_('All')}}</div>
       {% endif %}
       <div class="btn-group character {% if charlist|length > 9 %}hidden-sm{% endif %}" role="group">
         {% for char in charlist%}
-        <button class="btn btn-primary char">{{char.char}}</button>
+        <div class="btn btn-primary char">{{char.char}}</div>
         {% endfor %}
       </div>
-        <button class="update-view btn btn-primary" data-target="series_view" id="list-button" data-view="list">List</button>
+        <div class="update-view btn btn-primary" data-target="series_view" id="list-button" data-view="list">List</div>
     </div>
 
     {% if entries[0] %}
diff --git a/cps/templates/list.html b/cps/templates/list.html
index 48b90c8a..71dbea11 100644
--- a/cps/templates/list.html
+++ b/cps/templates/list.html
@@ -5,16 +5,16 @@
     <div class="filterheader hidden-xs">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       {% if entries.__len__() and data == 'author' %}
-        <button id="sort_name" class="btn btn-primary"><b>B,A <-> A B</b></button>
+        <div id="sort_name" class="btn btn-primary"><b>B,A <-> A B</b></div>
       {% endif %}
-      <button id="asc" data-order="{{ order }}" data-id="{{ data }}" class="btn btn-primary"><span class="glyphicon glyphicon-sort-by-alphabet"></span></button>
-      <button id="desc" data-id="{{ data }}" class="btn btn-primary"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></button>
+      <div id="asc" data-order="{{ order }}" data-id="{{ data }}" class="btn btn-primary {% if order == 1 %} active{% endif%}"><span class="glyphicon glyphicon-sort-by-alphabet"></span></div>
+      <div id="desc" data-id="{{ data }}" class="btn btn-primary{% if order == 0 %} active{% endif%}"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></div>
       {% if charlist|length %}
-      <button id="all" class="btn btn-primary {% if charlist|length > 9 %}hidden-sm{% endif %}">{{_('All')}}</button>
+      <div id="all" class="active btn btn-primary {% if charlist|length > 9 %}hidden-sm{% endif %}">{{_('All')}}</div>
       {% endif %}
       <div class="btn-group character {% if charlist|length > 9 %}hidden-sm{% endif %}" role="group">
         {% for char in charlist%}
-        <button class="btn btn-primary char">{{char.char}}</button>
+        <div class="btn btn-primary char">{{char.char}}</div>
         {% endfor %}
       </div>