diff --git a/cps/helper.py b/cps/helper.py
index da5ea2b3..506afe71 100644
--- a/cps/helper.py
+++ b/cps/helper.py
@@ -824,4 +824,3 @@ def get_download_link(book_id, book_format, client):
         return do_download_file(book, book_format, client, data1, headers)
     else:
         abort(404)
-
diff --git a/cps/render_template.py b/cps/render_template.py
index 7da30974..fb0b5067 100644
--- a/cps/render_template.py
+++ b/cps/render_template.py
@@ -20,11 +20,14 @@ from flask import render_template
 from flask_babel import gettext as _
 from flask import g
 from werkzeug.local import LocalProxy
+from flask_login import current_user
 
-from . import config, constants
+from . import config, constants, ub, logger, db, calibre_db
 from .ub import User
 
 
+log = logger.create()
+
 def get_sidebar_config(kwargs=None):
     kwargs = kwargs or []
     if 'content' in kwargs:
@@ -91,9 +94,23 @@ def get_sidebar_config(kwargs=None):
 
     return sidebar
 
+def get_readbooks_ids():
+    if not config.config_read_column:
+        readBooks = ub.session.query(ub.ReadBook).filter(ub.ReadBook.user_id == int(current_user.id))\
+            .filter(ub.ReadBook.read_status == ub.ReadBook.STATUS_FINISHED).all()
+        return frozenset([x.book_id for x in readBooks])
+    else:
+        try:
+            readBooks = calibre_db.session.query(db.cc_classes[config.config_read_column])\
+                .filter(db.cc_classes[config.config_read_column].value == True).all()
+            return frozenset([x.book for x in readBooks])
+        except KeyError:
+            log.error("Custom Column No.%d is not existing in calibre database", config.config_read_column)
+            return []
+
 # Returns the template for rendering and includes the instance name
 def render_title_template(*args, **kwargs):
     sidebar = get_sidebar_config(kwargs)
     return render_template(instance=config.config_calibre_web_title, sidebar=sidebar,
-                           accept=constants.EXTENSIONS_UPLOAD,
+                           accept=constants.EXTENSIONS_UPLOAD, read_book_ids=get_readbooks_ids(),
                            *args, **kwargs)
diff --git a/cps/static/css/caliBlur_override.css b/cps/static/css/caliBlur_override.css
index 7f940212..00ba3cca 100644
--- a/cps/static/css/caliBlur_override.css
+++ b/cps/static/css/caliBlur_override.css
@@ -1,11 +1,11 @@
 body.serieslist.grid-view div.container-fluid>div>div.col-sm-10:before{
     display: none;
 }
-
 .cover .badge{
     position: absolute;
     top: 0;
     left: 0;
+    color: #fff;
     background-color: #cc7b19;
     border-radius: 0;
     padding: 0 8px;
@@ -15,3 +15,8 @@ body.serieslist.grid-view div.container-fluid>div>div.col-sm-10:before{
 .cover{
     box-shadow: 0 0 4px rgba(0,0,0,.6);
 }
+
+.cover .read{
+    padding: 0 0px;
+    line-height: 15px;
+}
diff --git a/cps/static/css/style.css b/cps/static/css/style.css
index 99031aaa..8c99aaa0 100644
--- a/cps/static/css/style.css
+++ b/cps/static/css/style.css
@@ -116,6 +116,7 @@ a, .danger,.book-remove, .editable-empty, .editable-empty:hover { color: #45b29d
   display: block;
   max-width: 100%;
   height: auto;
+  max-height: 100%;
 }
 
 .container-fluid .discover{ margin-bottom: 50px; }
@@ -132,12 +133,19 @@ a, .danger,.book-remove, .editable-empty, .editable-empty:hover { color: #45b29d
   position: relative;
 }
 
-.container-fluid .book .cover img {
+.container-fluid .book .cover span.img {
+  bottom: 0;
+  height: 100%;
+  position: absolute;
+}
+
+.container-fluid .book .cover span img {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100%;
   border: 1px solid #fff;
   box-sizing: border-box;
-  height: 100%;
-  bottom: 0;
-  position: absolute;
   -webkit-box-shadow: 0 5px 8px -6px #777;
   -moz-box-shadow: 0 5px 8px -6px #777;
   box-shadow: 0 5px 8px -6px #777;
@@ -206,11 +214,22 @@ span.glyphicon.glyphicon-tags {
 .navbar-default .navbar-toggle .icon-bar {background-color: #000; }
 .navbar-default .navbar-toggle {border-color: #000; }
 .cover { margin-bottom: 10px; }
+
 .cover .badge{
    position: absolute;
    top: 2px;
    left: 2px;
-   background-color: #777;
+   color: #000;
+   border-radius: 10px;
+   background-color: #fff;
+}
+.cover .read{
+  left: auto;
+  right: 2px;
+  width: 17px;
+  height: 17px;
+  display: inline-block;
+  padding: 2px;
 }
 .cover-height { max-height: 100px;}
 
diff --git a/cps/templates/author.html b/cps/templates/author.html
index 7887aa4a..4e32db80 100644
--- a/cps/templates/author.html
+++ b/cps/templates/author.html
@@ -36,7 +36,10 @@
     <div id="books" class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
         <a href="{{ url_for('web.show_book', book_id=entry.id) }}">
-          <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" />
+            <span class="img">
+              <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" />
+              {% if entry.id in read_book_ids %}<span class="badge read glyphicon glyphicon-ok"></span>{% endif %}
+            </span>
         </a>
       </div>
       <div class="meta">
diff --git a/cps/templates/discover.html b/cps/templates/discover.html
index 3c858feb..d57994b4 100644
--- a/cps/templates/discover.html
+++ b/cps/templates/discover.html
@@ -8,7 +8,10 @@
       <div class="cover">
         {% if entry.has_cover is defined %}
           <a href="{{ url_for('web.show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
-            <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" alt="{{ entry.title }}" />
+            <span class="img">
+              <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" alt="{{ entry.title }}" />
+              {% if entry.id in read_book_ids %}<span class="badge read glyphicon glyphicon-ok"></span>{% endif %}
+            </span>
           </a>
         {% endif %}
       </div>
diff --git a/cps/templates/grid.html b/cps/templates/grid.html
index ce2c05ac..9724e31d 100644
--- a/cps/templates/grid.html
+++ b/cps/templates/grid.html
@@ -28,8 +28,10 @@
               <div class="col-sm-3 col-lg-2 col-xs-6 book sortable" {% if entry[0].sort %}data-name="{{entry[0].series[0].name}}"{% endif %} data-id="{% if entry[0].series[0].name %}{{entry[0].series[0].name}}{% endif %}">
                   <div class="cover">
                       <a href="{{url_for('web.books_list', data=data, sort_param='new', book_id=entry[0].series[0].id )}}">
-                          <img src="{{ url_for('web.get_cover', book_id=entry[0].id) }}" alt="{{ entry[0].name }}"/>
-                          <span class="badge">{{entry.count}}</span>
+                          <span class="img">
+                              <img src="{{ url_for('web.get_cover', book_id=entry[0].id) }}" alt="{{ entry[0].name }}"/>
+                              <span class="badge">{{entry.count}}</span>
+                            </span>
                       </a>
                   </div>
                   <div class="meta">
diff --git a/cps/templates/index.html b/cps/templates/index.html
index 1db73c89..d300fc65 100644
--- a/cps/templates/index.html
+++ b/cps/templates/index.html
@@ -8,7 +8,10 @@
     <div class="col-sm-3 col-lg-2 col-xs-6 book" id="books_rand">
       <div class="cover">
           <a href="{{ url_for('web.show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
-              <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" alt="{{ entry.title }}" />
+              <span class="img">
+                <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" alt="{{ entry.title }}" />
+                {% if entry.id in read_book_ids %}<span class="badge read glyphicon glyphicon-ok"></span>{% endif %}
+              </span>
           </a>
       </div>
       <div class="meta">
@@ -82,7 +85,10 @@
     <div class="col-sm-3 col-lg-2 col-xs-6 book" id="books">
       <div class="cover">
           <a href="{{ url_for('web.show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
+            <span class="img">
               <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" alt="{{ entry.title }}"/>
+              {% if entry.id in read_book_ids %}<span class="badge read glyphicon glyphicon-ok"></span>{% endif %}
+            </span>
           </a>
       </div>
       <div class="meta">
diff --git a/cps/templates/search.html b/cps/templates/search.html
index aedb6f45..d11f3ec8 100644
--- a/cps/templates/search.html
+++ b/cps/templates/search.html
@@ -43,7 +43,10 @@
       <div class="cover">
         {% if entry.has_cover is defined %}
            <a href="{{ url_for('web.show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
-            <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" alt="{{ entry.title }}" />
+            <span class="img">
+                <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" alt="{{ entry.title }}" />
+                {% if entry.id in read_book_ids %}<span class="badge read glyphicon glyphicon-ok"></span>{% endif %}
+            </span>
           </a>
         {% endif %}
       </div>
diff --git a/cps/templates/shelf.html b/cps/templates/shelf.html
index 2110d905..1ad79dbd 100644
--- a/cps/templates/shelf.html
+++ b/cps/templates/shelf.html
@@ -30,7 +30,10 @@
     <div class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
             <a href="{{ url_for('web.show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
-              <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" alt="{{ entry.title }}" />
+              <span class="img">
+                <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" alt="{{ entry.title }}" />
+                {% if entry.id in read_book_ids %}<span class="badge read glyphicon glyphicon-ok"></span>{% endif %}
+              </span>
             </a>
       </div>
       <div class="meta">