diff --git a/cps/static/css/main.css b/cps/static/css/main.css
index 03cb0a01..16f92b52 100644
--- a/cps/static/css/main.css
+++ b/cps/static/css/main.css
@@ -826,3 +826,9 @@ input:-moz-placeholder { color: #454545; }
 .icon-columns::before { content: '\e810'; } /* '' */
 .icon-list::before { content: '\e800'; } /* '' */
 .icon-resize-small::before { content: '\e808'; } /* '' */
+
+#progress{
+    right: 40px;
+    bottom: 40px;
+    text-align: center;
+}
diff --git a/cps/static/js/reading/epub-progress.js b/cps/static/js/reading/epub-progress.js
index 83cde55b..1fdad14e 100644
--- a/cps/static/js/reading/epub-progress.js
+++ b/cps/static/js/reading/epub-progress.js
@@ -7,7 +7,7 @@ class EpubParser {
     }
 
 
-    getTotalByteLength() {
+    getTotalByteLength() { //TODO unrealistic values
         let size = 0;
         for (let key of Object.keys(this.files)) {
             let file = this.files[key];
@@ -171,7 +171,7 @@ class EpubParser {
     }
 }
 function waitFor(variable, callback) {
-  var interval = setInterval(function() {
+  const interval = setInterval(function() {
     if (variable!==undefined) {
       clearInterval(interval);
       callback();
@@ -185,12 +185,12 @@ function waitFor(variable, callback) {
  */
 function calculateProgress(){
     let data=reader.rendition.currentLocation().end;
-    return epubParser.getProgress(epubParser.absPath(data.href),data.cfi).toFixed(2)*100;
+    return Math.round(epubParser.getProgress(epubParser.absPath(data.href),data.cfi)*100);
 }
 var epubParser;
 waitFor(reader.book,()=>{
     epubParser = new EpubParser(reader.book.archive.zip.files);
-})
+});
 /*
 register new event emitter locationchange that fires on urlchange
 source: https://stackoverflow.com/a/52809105/21941129
@@ -214,7 +214,10 @@ source: https://stackoverflow.com/a/52809105/21941129
         window.dispatchEvent(new Event('locationchange'));
     });
 })();
+let progressDiv=document.getElementById("progress");
 window.addEventListener('locationchange',()=>{
-    let newPos=epubParser.calculateProgress();
+    let newPos=calculateProgress();
+    console.log(newPos);
+    progressDiv.textContent=newPos+"%";
     //getelement set element value
 });
diff --git a/cps/templates/read.html b/cps/templates/read.html
index 0b993b17..cf34249e 100644
--- a/cps/templates/read.html
+++ b/cps/templates/read.html
@@ -68,7 +68,7 @@
     <div id="prev" class="arrow">‹</div>
     <div id="viewer"></div>
     <div id="next" class="arrow">›</div>
-
+    <div id="progress">0%</div>
     <div id="loader"><img src="{{ url_for('static', filename='img/loader.gif') }}"></div>
 </div>
 <div class="modal md-effect-1" id="settings-modal">