diff --git a/files_reader/templates/cbreader.php b/files_reader/templates/cbreader.php
index 24bac88..6e47a48 100644
--- a/files_reader/templates/cbreader.php
+++ b/files_reader/templates/cbreader.php
@@ -36,9 +36,9 @@
         <title>
             <?php p($title);?>
         </title>
-        <link rel="shortcut icon" href="img/book.png">
-        <link rel="stylesheet" href="vendor/icomoon/style.css?v=<?php p($version) ?>">
-        <link rel="stylesheet" href="vendor/cbrjs/css/cbr.css?v=<?php p($version) ?>">
+        <link rel="shortcut icon" href="<?php p($urlGenerator->linkTo('files_reader', 'img/book.png')) ?>">
+        <link rel="stylesheet" href="<?php p($urlGenerator->linkTo('files_reader', 'vendor/icomoon/style.css')) ?>?v=<?php p($version) ?>">
+        <link rel="stylesheet" href="<?php p($urlGenerator->linkTo('files_reader', 'vendor/cbrjs/css/cbr.css')) ?>?v=<?php p($version) ?>">
         <script type="text/javascript" nonce="<?php p($nonce) ?>" src="<?php p($urlGenerator->linkTo('files_reader', 'js/lib/Blob.js')) ?>?v=<?php p($version) ?>"> </script>
         <script type="text/javascript" nonce="<?php p($nonce) ?>" src="<?php p($urlGenerator->linkTo('files_reader', 'vendor/epubjs/libs/jquery.min.js')) ?>?v=<?php p($version) ?>"> </script>
         <script type="text/javascript" nonce="<?php p($nonce) ?>" src="<?php p($urlGenerator->linkTo('files_reader', 'vendor/sindresorhus/screenfull.js')) ?>?v=<?php p($version) ?>"> </script>
@@ -109,7 +109,9 @@
         <!-- /toolbar -->
 
         <!-- loading overlay -->
-        <div id="cbr-loading-overlay" class="cbr-control control overlay" name="loadingOverlay" style="display:none"></div>
+        <div id="cbr-loading-overlay" class="cbr-control control overlay" name="loadingOverlay" style="display:none">
+            <img src="<?php p($urlGenerator->linkTo('files_reader', 'img/loading.gif')) ?>">
+        </div>
         <!-- /loading overlay -->
 
         <!-- busy overlay -->
diff --git a/files_reader/templates/epubreader.php b/files_reader/templates/epubreader.php
index 8f2a9dc..da6ca87 100644
--- a/files_reader/templates/epubreader.php
+++ b/files_reader/templates/epubreader.php
@@ -36,7 +36,7 @@
         <title>
             <?php p($title);?>
         </title>
-        <link rel="shortcut icon" href="img/book.png">
+        <link rel="shortcut icon" href="<?php p($urlGenerator->linkTo('files_reader', 'img/book.png')) ?>">
         <link rel="stylesheet" href="<?php p($urlGenerator->linkTo('files_reader', 'vendor/icomoon/style.css')) ?>?v=<?php p($version) ?>">
         <link rel="stylesheet" href="<?php p($urlGenerator->linkTo('files_reader', 'vendor/epubjs/css/main.css')) ?>?v=<?php p($version) ?>">
 		<link rel="stylesheet" href="<?php p($urlGenerator->linkTo('files_reader', 'vendor/epubjs/css/sidebar.css')) ?>?v=<?php p($version) ?>">
@@ -155,7 +155,7 @@
                                 <div class="control-group">
                                     <input type="checkbox" id="use_custom_colors" name="use_custom_colors">
                                     <label for="use_custom_colors">
-                                        Use custom colors 
+                                        Use custom colors
                                     </label>
                                     <div class="center-box">
                                     <input type="color" id="day_color" value="#0a0a0a">
@@ -209,7 +209,7 @@
                             <div class="control-group">
                                 <input type="checkbox" id="touch_nav" name="touch_nav">
                                 <label for="touch_nav">
-                                    disable extra-wide page turn areas 
+                                    disable extra-wide page turn areas
                                 </label>
                             </div>
                             <div class="control-group">
@@ -283,7 +283,7 @@
                     </div>
                 </div>
                 <div id="loader">
-                    <img src="img/loading.gif">
+                    <img src="<?php p($urlGenerator->linkTo('files_reader', 'img/loading.gif')) ?>">
                 </div>
 
                 <!-- /navigation + viewer -->
diff --git a/files_reader/templates/pdfreader.php b/files_reader/templates/pdfreader.php
index 7513ce4..a47410e 100644
--- a/files_reader/templates/pdfreader.php
+++ b/files_reader/templates/pdfreader.php
@@ -36,7 +36,7 @@
         <title>
             <?php p($title);?>
         </title>
-        <link rel="shortcut icon" href="img/book.png">
+        <link rel="shortcut icon" href="<?php p($urlGenerator->linkTo('files_reader', 'img/book.png')) ?>">
         <link rel="stylesheet" href="<?php p($urlGenerator->linkTo('files_reader', 'vendor/icomoon/style.css')) ?>?v=<?php p($version) ?>">
         <link rel="stylesheet" href="<?php p($urlGenerator->linkTo('files_reader', 'vendor/pdfjs/css/main.css')) ?>?v=<?php p($version) ?>">
 		<link rel="stylesheet" href="<?php p($urlGenerator->linkTo('files_reader', 'vendor/pdfjs/css/sidebar.css')) ?>?v=<?php p($version) ?>">
@@ -113,7 +113,7 @@
                         <ul id="outline" class="outline">
                         </ul>
                     </div>
-                    
+
                     <!-- currently not used
                     <div id="notesView" class="notes-view view">
                         <div>
@@ -183,7 +183,7 @@
                             <div class="control-group">
                                 <input type="checkbox" id="touch_nav" name="touch_nav">
                                 <label for="touch_nav">
-                                    disable extra-wide page turn areas 
+                                    disable extra-wide page turn areas
                                 </label>
                             </div>
                             <div class="control-group">
@@ -310,7 +310,7 @@
                     </div>
                 </div>
                 <div id="loader">
-                    <img src="img/loading.gif">
+                    <img src="<?php p($urlGenerator->linkTo('files_reader', 'img/loading.gif')) ?>">
                 </div>
 
                 <!-- /navigation + viewer -->
diff --git a/files_reader/vendor/cbrjs/cbr.js b/files_reader/vendor/cbrjs/cbr.js
index 503f2fa..077369c 100644
--- a/files_reader/vendor/cbrjs/cbr.js
+++ b/files_reader/vendor/cbrjs/cbr.js
@@ -50,7 +50,7 @@ CBRJS.Reader = function(bookPath, _options) {
 		}
 
 		xhr.open('GET',url, true);
-         
+
 		options.start(filename);
 
 		xhr.responseType = "arraybuffer";
@@ -70,10 +70,10 @@ CBRJS.Reader = function(bookPath, _options) {
             reader.options.session.size = e.total;
 		};
 
-		xhr.onload = function () { 
+		xhr.onload = function () {
 			if ((this.status === 200) && this.response) {
 				var done = false;
-				var ua = new bitjs.archive[archive_class](this.response, 'vendor/bitjs/');
+				var ua = new bitjs.archive[archive_class](this.response, document.head.dataset.basepath + 'vendor/bitjs/');
 
 				ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.START, function (e) {
 					$progressbar.css('width', '0%');
@@ -120,9 +120,9 @@ CBRJS.Reader = function(bookPath, _options) {
 					$('.icon-unarchive').removeClass('active');
 					$('.icon-unarchive').addClass('error');
 					$('#message').text('Failed to extract images from archive, file corrupted?');
-					
+
 				});
-			} 
+			}
 
 			ua.start();
 		};
@@ -261,7 +261,7 @@ ComicBook = (function ($) {
             thumbnails: true, // true / false (use thumbnails in index)
             thumbnailWidth: 200, // width of thumbnail
             sidebarWide: false, // use wide sidbar
-            currentPage: 0, // current page 
+            currentPage: 0, // current page
             keyboard: {
                 32: 'next', // space
                 34: 'next', // page-down
@@ -276,7 +276,7 @@ ComicBook = (function ($) {
                 70: 'toggleFullscreen', // f
                 27: 'closeSidebar' // esc
             },
-            vendorPath: 'vendor/',
+            vendorPath: document.head.dataset.basepath + 'vendor/',
             forward_buffer: 3,
             session: {
                 getCursor: function() {},
@@ -442,7 +442,7 @@ ComicBook = (function ($) {
                             break;
                         default:
                             console.log("unknown enhancement: " + JSON.stringify(prop));
-                    } 
+                    }
                 }
             };
 
@@ -570,7 +570,7 @@ ComicBook = (function ($) {
         };
 
         /**
-         * Insert thumbnail into TOC 
+         * Insert thumbnail into TOC
          */
         ComicBook.prototype.tocInsert = function (image, page, replace) {
             var placeholder = toc.children[page].firstChild;
@@ -578,7 +578,7 @@ ComicBook = (function ($) {
                 placeholder.parentNode.replaceChild(
                     self.getThumb(image),
                     placeholder
-                ); 
+                );
             }
 
             toc.children[page].addEventListener('click', function (e) {
@@ -1407,7 +1407,7 @@ ComicBook = (function ($) {
                 page = options.currentPage;
             }
 
-            document.getElementById('toc').parentNode.scrollTop = 
+            document.getElementById('toc').parentNode.scrollTop =
                 document.getElementById('page-' + String(page + 1)).offsetTop
                 - Math.floor($('.panels').height() * 1.5);
         };
@@ -1474,5 +1474,3 @@ ComicBook = (function ($) {
         }
 
 })(window, jQuery);
-
-
diff --git a/files_reader/vendor/cbrjs/css/cbr.css b/files_reader/vendor/cbrjs/css/cbr.css
index ffdbfd1..00d3164 100644
--- a/files_reader/vendor/cbrjs/css/cbr.css
+++ b/files_reader/vendor/cbrjs/css/cbr.css
@@ -116,7 +116,13 @@ body:not(.mobile) .navigate:hover {
 
 #cbr-loading-overlay {
 	z-index: 100;
-	background: #000 url("img/loading.gif") no-repeat center;
+	padding: 0;
+	width: 20px;
+	height: 20px;
+}
+
+#cbr-loading-overlay > img {
+	width: 100%;
 }
 
 .overlay {