diff --git a/cps/static/css/style.css b/cps/static/css/style.css
index e08eb946..d1bbc605 100644
--- a/cps/static/css/style.css
+++ b/cps/static/css/style.css
@@ -130,3 +130,4 @@ input.pill:not(:checked) + label .glyphicon {
 .editable-cancel { margin-bottom: 0px !important; margin-left: 7px !important;}
 .editable-submit { margin-bottom: 0px !important;}
 
+.filterheader { margin-bottom: 20px; }
diff --git a/cps/static/js/filter_list.js b/cps/static/js/filter_list.js
new file mode 100644
index 00000000..c3feeda0
--- /dev/null
+++ b/cps/static/js/filter_list.js
@@ -0,0 +1,46 @@
+
+var direction = 0;  // Descending order
+
+$("#desc").click(function() {
+    if (direction === 0) {
+        return;
+    }
+    var list = $('#list');
+    var listItems = list.children(".row");
+    list.append(listItems.get().reverse());
+    console.log("desc")
+    direction = 0;
+});
+
+
+$("#asc").click(function() {
+    if (direction === 1) {
+        return;
+    }
+    var list = $('#list');
+    var listItems = list.children(".row");
+    list.append(listItems.get().reverse());
+    console.log("asc")
+    direction = 1;
+});
+
+$("#all").click(function() {
+    $(".row").each(function() {
+        $(this).show();
+    });
+});
+
+$(".char").click(function() {
+    console.log(this.innerText);
+    var character = this.innerText;
+    // var listItems = ;
+
+    $(".row").each(function() {
+        if (this.attributes['data-id'].value.charAt(0).toUpperCase() !== character) {
+            $(this).hide();
+        } else {
+            $(this).show();
+        }
+    });
+
+});
diff --git a/cps/templates/list.html b/cps/templates/list.html
index b88ea976..9002ee20 100644
--- a/cps/templates/list.html
+++ b/cps/templates/list.html
@@ -2,20 +2,26 @@
 {% block body %}
 <h1 class="{{page}}">{{_(title)}}</h1>
   <div class="container">
-    <span class="btn btn-success"><span class="glyphicon glyphicon-sort-by-alphabet"></span></span></button>
-      <button class="btn btn-success"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></button>
-      <div class="btn-group" role="group">
+    <div class="filterheader hidden-xs hidden-sm">
+      <button id="desc" class="btn btn-success"><span class="glyphicon glyphicon-sort-by-alphabet"></span></button>
+      <button id="asc" class="btn btn-success"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></button>
+      <button id="all" class="btn btn-success">{{_('All')}}</button>
+      <div class="btn-group character" role="group">
         {% for char in charlist%}
-        <button class="btn btn-success">{{char.char}}</button>
+        <button class="btn btn-success char">{{char.char}}</button>
         {% endfor %}
       </div>
-        <div class="grid">
-      {% for entry in entries %}
-          <div class="grid-item">
-            <span class="badge">{{entry.count}}</span>
-            <a id="list_{{loop.index0}}" href="{{url_for(folder, book_id=entry[0].id )}}">{{entry[0].name}}</a>
-          </div>
+    </div>
+    <div id="list" class="col-xs-12 col-sm-6">
+    {% for entry in entries %}
+      <div class="row" data-id="{% if entry[0].sort %}{{entry[0].sort}}{% else %}{{entry[0].name}}{% endif %}">
+        <div class="col-xs-2 col-sm-2 col-md-1" align="left"><span class="badge">{{entry.count}}</span></div>
+        <div class="col-xs-10 col-sm-10 col-md-11"><a id="list_{{loop.index0}}" href="{{url_for(folder, book_id=entry[0].id )}}">{{entry[0].name}}</a></div>
+      </div>
     {% endfor %}
     </div>
   </div>
 {% endblock %}
+{% block js %}
+<script src="{{ url_for('static', filename='js/filter_list.js') }}"></script>
+{% endblock %}
diff --git a/cps/web.py b/cps/web.py
index 0d4fca1d..a57f2f45 100644
--- a/cps/web.py
+++ b/cps/web.py
@@ -433,7 +433,6 @@ def get_tags_json():
 def get_languages_json():
     if request.method == "GET":
         query = request.args.get('q').lower()
-        # languages = speaking_language()
         languages = language_table[get_locale()]
         entries_start = [s for key, s in languages.items() if s.lower().startswith(query.lower())]
         if len(entries_start) < 5:
@@ -602,7 +601,6 @@ def author_list():
         charlist = db.session.query(func.upper(func.substr(db.Authors.sort,1,1)).label('char')) \
             .join(db.books_authors_link).join(db.Books).filter(common_filters()) \
             .group_by(func.upper(func.substr(db.Authors.sort,1,1))).all()
-        # charlist = db.session.query(func.substr(db.Authors.sort,1,1).label('char'),func.count(db.Authors.sort).label('count')).group_by(func.substr(db.Authors.sort,1,1)).all()
         for entry in entries:
             entry.Authors.name = entry.Authors.name.replace('|', ',')
         return render_title_template('list.html', entries=entries, folder='web.author', charlist=charlist,
@@ -645,7 +643,10 @@ def publisher_list():
         entries = db.session.query(db.Publishers, func.count('books_publishers_link.book').label('count'))\
             .join(db.books_publishers_link).join(db.Books).filter(common_filters())\
             .group_by('books_publishers_link.publisher').order_by(db.Publishers.sort).all()
-        return render_title_template('list.html', entries=entries, folder='web.publisher',
+        charlist = db.session.query(func.upper(func.substr(db.Publishers.name,1,1)).label('char')) \
+            .join(db.books_publishers_link).join(db.Books).filter(common_filters()) \
+            .group_by(func.upper(func.substr(db.Publishers.name,1,1))).all()
+        return render_title_template('list.html', entries=entries, folder='web.publisher', charlist=charlist,
                                      title=_(u"Publisher list"), page="publisherlist")
     else:
         abort(404)
@@ -696,7 +697,10 @@ def series_list():
         entries = db.session.query(db.Series, func.count('books_series_link.book').label('count'))\
             .join(db.books_series_link).join(db.Books).filter(common_filters())\
             .group_by('books_series_link.series').order_by(db.Series.sort).all()
-        return render_title_template('list.html', entries=entries, folder='web.series',
+        charlist = db.session.query(func.upper(func.substr(db.Series.sort,1,1)).label('char')) \
+            .join(db.books_series_link).join(db.Books).filter(common_filters()) \
+            .group_by(func.upper(func.substr(db.Series.sort,1,1))).all()
+        return render_title_template('list.html', entries=entries, folder='web.series', charlist=charlist,
                                      title=_(u"Series list"), page="serieslist")
     else:
         abort(404)
@@ -720,8 +724,10 @@ def series(book_id, page):
 @login_required_if_no_ano
 def language_overview():
     if current_user.show_language():
+        charlist = list()
         if current_user.filter_language() == u"all":
             languages = speaking_language()
+            # ToDo: generate first character list for languages
         else:
             try:
                 cur_l = LC.parse(current_user.filter_language())
@@ -737,7 +743,7 @@ def language_overview():
                                         func.count('books_languages_link.book').label('bookcount')).group_by(
             'books_languages_link.lang_code').all()
         return render_title_template('languages.html', languages=languages, lang_counter=lang_counter,
-                                     title=_(u"Available languages"), page="langlist")
+                                     charlist=charlist, title=_(u"Available languages"), page="langlist")
     else:
         abort(404)
 
@@ -767,7 +773,10 @@ def category_list():
         entries = db.session.query(db.Tags, func.count('books_tags_link.book').label('count'))\
             .join(db.books_tags_link).join(db.Books).order_by(db.Tags.name).filter(common_filters())\
             .group_by('books_tags_link.tag').all()
-        return render_title_template('list.html', entries=entries, folder='web.category',
+        charlist = db.session.query(func.upper(func.substr(db.Tags.name,1,1)).label('char')) \
+            .join(db.books_tags_link).join(db.Books).filter(common_filters()) \
+            .group_by(func.upper(func.substr(db.Tags.name,1,1))).all()
+        return render_title_template('list.html', entries=entries, folder='web.category', charlist=charlist,
                                      title=_(u"Category list"), page="catlist")
     else:
         abort(404)