diff --git a/cps/static/css/style.css b/cps/static/css/style.css
index be91f295..87f7b4c5 100644
--- a/cps/static/css/style.css
+++ b/cps/static/css/style.css
@@ -53,10 +53,12 @@ span.glyphicon.glyphicon-tags {padding-right: 5px;color: #999;vertical-align: te
 .spinner2 {margin:0 41%;}
 
 .block-label {display: block;}
+.fake-input {position: absolute; pointer-events: none; top: 0;}
+
+.author-bio img {margin: 0 1em 1em 0;}
+.author-link img {display: inline-block;max-width: 100px;}
 
 #remove-from-shelves .btn,
 #shelf-action-errors {
     margin-left: 5px;
 }
-.author-bio img {margin: 0 1em 1em 0;}
-.author-link img {display: inline-block;max-width: 100px;}
diff --git a/cps/static/js/libs/plugins.js b/cps/static/js/libs/plugins.js
index eb88e4ce..1a623a3d 100644
--- a/cps/static/js/libs/plugins.js
+++ b/cps/static/js/libs/plugins.js
@@ -1,3 +1,7 @@
+/*! modernizr 3.5.0 (Custom Build) | MIT *
+ * https://modernizr.com/download/?-inputtypes-addtest-setclasses !*/
+!function(e,t,n){function o(e,t){return typeof e===t}function i(){var e,t,n,i,s,a,l;for(var f in u)if(u.hasOwnProperty(f)){if(e=[],t=u[f],t.name&&(e.push(t.name.toLowerCase()),t.options&&t.options.aliases&&t.options.aliases.length))for(n=0;n<t.options.aliases.length;n++)e.push(t.options.aliases[n].toLowerCase());for(i=o(t.fn,"function")?t.fn():t.fn,s=0;s<e.length;s++)a=e[s],l=a.split("."),1===l.length?Modernizr[l[0]]=i:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=i),r.push((i?"":"no-")+l.join("-"))}}function s(e){var t=c.className,n=Modernizr._config.classPrefix||"";if(p&&(t=t.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+n+"no-js(\\s|$)");t=t.replace(o,"$1"+n+"js$2")}Modernizr._config.enableClasses&&(t+=" "+n+e.join(" "+n),p?c.className.baseVal=t:c.className=t)}function a(){return"function"!=typeof t.createElement?t.createElement(arguments[0]):p?t.createElementNS.call(t,"http://www.w3.org/2000/svg",arguments[0]):t.createElement.apply(t,arguments)}function l(e,t){if("object"==typeof e)for(var n in e)g(e,n)&&l(n,e[n]);else{e=e.toLowerCase();var o=e.split("."),i=Modernizr[o[0]];if(2==o.length&&(i=i[o[1]]),"undefined"!=typeof i)return Modernizr;t="function"==typeof t?t():t,1==o.length?Modernizr[o[0]]=t:(!Modernizr[o[0]]||Modernizr[o[0]]instanceof Boolean||(Modernizr[o[0]]=new Boolean(Modernizr[o[0]])),Modernizr[o[0]][o[1]]=t),s([(t&&0!=t?"":"no-")+o.join("-")]),Modernizr._trigger(e,t)}return Modernizr}var r=[],u=[],f={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var n=this;setTimeout(function(){t(n[e])},0)},addTest:function(e,t,n){u.push({name:e,fn:t,options:n})},addAsyncTest:function(e){u.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=f,Modernizr=new Modernizr;var c=t.documentElement,p="svg"===c.nodeName.toLowerCase(),d=a("input"),h="search tel url email datetime date month week time datetime-local number range color".split(" "),m={};Modernizr.inputtypes=function(e){for(var o,i,s,a=e.length,l="1)",r=0;a>r;r++)d.setAttribute("type",o=e[r]),s="text"!==d.type&&"style"in d,s&&(d.value=l,d.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(o)&&d.style.WebkitAppearance!==n?(c.appendChild(d),i=t.defaultView,s=i.getComputedStyle&&"textfield"!==i.getComputedStyle(d,null).WebkitAppearance&&0!==d.offsetHeight,c.removeChild(d)):/^(search|tel)$/.test(o)||(s=/^(url|email)$/.test(o)?d.checkValidity&&d.checkValidity()===!1:d.value!=l)),m[e[r]]=!!s;return m}(h);var g;!function(){var e={}.hasOwnProperty;g=o(e,"undefined")||o(e.call,"undefined")?function(e,t){return t in e&&o(e.constructor.prototype[t],"undefined")}:function(t,n){return e.call(t,n)}}(),f._l={},f.on=function(e,t){this._l[e]||(this._l[e]=[]),this._l[e].push(t),Modernizr.hasOwnProperty(e)&&setTimeout(function(){Modernizr._trigger(e,Modernizr[e])},0)},f._trigger=function(e,t){if(this._l[e]){var n=this._l[e];setTimeout(function(){var e,o;for(e=0;e<n.length;e++)(o=n[e])(t)},0),delete this._l[e]}},Modernizr._q.push(function(){f.addTest=l}),i(),s(r),delete f.addTest,delete f.addAsyncTest;for(var y=0;y<Modernizr._q.length;y++)Modernizr._q[y]();e.Modernizr=Modernizr}(window,document);
+
 /*
 * @fileOverview TouchSwipe - jQuery Plugin
 * @version 1.6.5
diff --git a/cps/static/js/main.js b/cps/static/js/main.js
index 6c41bdf2..7b7402b2 100644
--- a/cps/static/js/main.js
+++ b/cps/static/js/main.js
@@ -18,6 +18,11 @@ $(document).on("change", "input[type=\"checkbox\"][data-control]", function () {
 
 $(function() {
 
+    // Allow ajax prefilters to be added/removed dynamically
+    // eslint-disable-next-line new-cap
+    const preFilters = $.Callbacks();
+    $.ajaxPrefilter(preFilters.fire);
+
     function restartTimer() {
         $("#spinner").addClass("hidden");
         $("#RestartDialog").modal("hide");
@@ -137,6 +142,26 @@ $(function() {
 
     $("input[data-control]").trigger("change");
 
+    $("#bookDetailsModal")
+        .on("show.bs.modal", function(e) {
+            const $modalBody = $(this).find(".modal-body");
+
+            // Prevent static assets from loading multiple times
+            const useCache = (options) => {
+                options.async = true;
+                options.cache = true;
+            };
+            preFilters.add(useCache);
+
+            $.get(e.relatedTarget.href).done(function(content) {
+                $modalBody.html(content);
+                preFilters.remove(useCache);
+            });
+        })
+        .on("hidden.bs.modal", function() {
+            $(this).find(".modal-body").html("...");
+        });
+
     $(window).resize(function(event) {
         $(".discover .row").isotope("reLayout");
     });
diff --git a/cps/templates/config_edit.html b/cps/templates/config_edit.html
index 7ccd826d..c1c319df 100644
--- a/cps/templates/config_edit.html
+++ b/cps/templates/config_edit.html
@@ -9,10 +9,10 @@
     </div>
     {% if gdrive %}
     <div class="form-group required">
-      <input type="checkbox" id="config_use_google_drive" name="config_use_google_drive" {% if content.config_use_google_drive %}checked{% endif %} >
+      <input type="checkbox" id="config_use_google_drive" name="config_use_google_drive" data-control="gdrive_settings" {% if content.config_use_google_drive %}checked{% endif %} >
       <label for="config_use_google_drive">{{_('Use google drive?')}}</label>
     </div>
-    <div id="gdrive_settings">
+    <div data-related="gdrive_settings">
       <div class="form-group required">
         <label for="config_google_drive_client_id">{{_('Client id')}}</label>
         <input type="text" class="form-control" name="config_google_drive_client_id" id="config_google_drive_client_id" value="{% if content.config_google_drive_client_id %}{{content.config_google_drive_client_id}}{% endif %}" autocomplete="off">
@@ -155,21 +155,9 @@
 </div>
 {% endblock %}
 {% block js %}
-<script>
-$(document).ready(function() {
-  $('#config_use_google_drive').trigger("change");
-});
-$('#config_use_google_drive').change(function(){
-    formInputs=$("#gdrive_settings :input");
-    isChecked=this.checked;
-    formInputs.each(function(formInput) {
-      $(this).prop('required',isChecked);
+<script type="text/javascript">
+    $(document).on('change', '#config_use_google_drive', function() {
+        $('#config_google_drive_folder').prop('required', $(this).prop('checked'));
     });
-    if (this.checked) {
-      $('#gdrive_settings').show();
-    } else {
-      $('#gdrive_settings').hide();
-    }
-});
 </script>
 {% endblock %}
diff --git a/cps/templates/detail.html b/cps/templates/detail.html
index 08f84ca6..882b2ba2 100644
--- a/cps/templates/detail.html
+++ b/cps/templates/detail.html
@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends is_xhr|yesno("fragment.html", "layout.html") %}
 {% block body %}
 <div class="single">
   <div class="row">
@@ -59,7 +59,6 @@
           {% endif %}
         </div>
       </div>
-
       <h2>{{entry.title}}</h2>
       <p class="author">
           {% for author in entry.authors %}
@@ -260,6 +259,5 @@
 {% endblock %}
 
 {% block js %}
-<script src="{{ url_for('static', filename='js/libs/jquery.form.js') }}"></script>
 <script src="{{ url_for('static', filename='js/details.js') }}"></script>
 {% endblock %}
diff --git a/cps/templates/discover.html b/cps/templates/discover.html
index 32f89a47..ff79c23b 100644
--- a/cps/templates/discover.html
+++ b/cps/templates/discover.html
@@ -8,7 +8,7 @@
     <div class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
         {% if entry.has_cover is defined %}
-          <a href="{{ url_for('show_book', book_id=entry.id) }}">
+          <a href="{{ url_for('show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
             <img src="{{ url_for('get_cover', cover_path=entry.path.replace('\\','/')) }}" />
           </a>
         {% endif %}
diff --git a/cps/templates/fragment.html b/cps/templates/fragment.html
new file mode 100644
index 00000000..1421ea6a
--- /dev/null
+++ b/cps/templates/fragment.html
@@ -0,0 +1,4 @@
+<div class="container-fluid">
+  {% block body %}{% endblock %}
+</div>
+{% block js %}{% endblock %}
diff --git a/cps/templates/index.html b/cps/templates/index.html
index 768c28bd..72df252a 100755
--- a/cps/templates/index.html
+++ b/cps/templates/index.html
@@ -8,7 +8,7 @@
     {% for entry in random %}
     <div id="books_rand" class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
-          <a href="{{ url_for('show_book', book_id=entry.id) }}">
+          <a href="{{ url_for('show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
             {% if entry.has_cover %}
               <img src="{{ url_for('get_cover', cover_path=entry.path.replace('\\','/')) }}" />
             {% else %}
@@ -44,7 +44,7 @@
     {% for entry in entries %}
     <div id="books" class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
-          <a href="{{ url_for('show_book', book_id=entry.id) }}">
+          <a href="{{ url_for('show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
             {% if entry.has_cover %}
               <img src="{{ url_for('get_cover', cover_path=entry.path.replace('\\','/')) }}" />
             {% else %}
diff --git a/cps/templates/layout.html b/cps/templates/layout.html
index a9ba4984..4f55631e 100644
--- a/cps/templates/layout.html
+++ b/cps/templates/layout.html
@@ -28,6 +28,7 @@
     <script src="{{ url_for('static', filename='js/libs/intention.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/libs/context.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/libs/plugins.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/libs/jquery.form.js') }}"></script>
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>
 
     {% block header %}{% endblock %}
@@ -200,6 +201,20 @@
         </div>
       </div>
     </div>
+    <div class="modal fade" id="bookDetailsModal" tabindex="-1" role="dialog" aria-labelledby="bookDetailsModalLabel">
+      <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <h4 class="modal-title" id="bookDetailsModalLabel">{{_('Book Details')}}</h4>
+          </div>
+          <div class="modal-body">...</div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">{{_('Close')}}</button>
+          </div>
+        </div>
+      </div>
+    </div>
     {% block modal %}{% endblock %}
     {% block js %}{% endblock %}
   </body>
diff --git a/cps/templates/search.html b/cps/templates/search.html
index 7e82c1fc..3f705c47 100644
--- a/cps/templates/search.html
+++ b/cps/templates/search.html
@@ -15,7 +15,7 @@
     <div class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
         {% if entry.has_cover is defined %}
-           <a href="{{ url_for('show_book', book_id=entry.id) }}">
+           <a href="{{ url_for('show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
             <img src="{{ url_for('get_cover', cover_path=entry.path.replace('\\','/')) }}" />
           </a>
         {% endif %}
diff --git a/cps/templates/shelf.html b/cps/templates/shelf.html
index a81538e1..46586925 100644
--- a/cps/templates/shelf.html
+++ b/cps/templates/shelf.html
@@ -15,7 +15,7 @@
     <div class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">
         {% if entry.has_cover is defined %}
-          <a href="{{ url_for('show_book', book_id=entry.id) }}">
+          <a href="{{ url_for('show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
             <img src="{{ url_for('get_cover', cover_path=entry.path.replace('\\','/')) }}" />
           </a>
         {% endif %}
diff --git a/cps/web.py b/cps/web.py
index 1437cb3a..9050028d 100755
--- a/cps/web.py
+++ b/cps/web.py
@@ -428,6 +428,11 @@ def timestamptodate(date, fmt=None):
     return native.strftime(time_format)
 
 
+@app.template_filter('yesno')
+def yesno(value, yes, no):
+    return yes if value else no
+
+
 def admin_required(f):
     """
     Checks if current_user.role == 1
@@ -1292,7 +1297,7 @@ def show_book(book_id):
         else:
             have_read = None
 
-        return render_title_template('detail.html', entry=entries, cc=cc,
+        return render_title_template('detail.html', entry=entries, cc=cc, is_xhr=request.is_xhr,
                                      title=entries.title, books_shelfs=book_in_shelfs, have_read=have_read)
     else:
         flash(_(u"Error opening eBook. File does not exist or file is not accessible:"), category="error")