diff --git a/reader/static/css/reader_epub.css b/reader/static/css/reader_epub.css
new file mode 100644
index 0000000000000000000000000000000000000000..84262d4e403efb1851315fc71f6b3dd7d97fd13f
--- /dev/null
+++ b/reader/static/css/reader_epub.css
@@ -0,0 +1,72 @@
+body {
+  margin: 0;
+  background: #fafafa;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #333;
+
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+#outerContainer {
+    height: 95%;
+}
+
+#viewer {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+@media (min-width: 1000px) {
+    #viewer.spreads:after {
+        position: absolute;
+        width: 1px;
+        border-right: 1px #000 solid;
+        height: 90%;
+        z-index: 1;
+        left: 50%;
+        margin-left: -1px;
+        top: 5%;
+        opacity: .15;
+        box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
+        content:  "";
+    }
+
+    #viewer.spreads.single:after {
+        display: none;
+    }
+
+    #prev {
+        left: 40px;
+     }
+
+    #next {
+        right: 40px;
+    }
+}
+
+.epr-arrow {
+  position: fixed;
+  top: 50%;
+  margin-top: -32px;
+  font-size: 64px;
+  color: #E2E2E2;
+  font-family: arial, sans-serif;
+  font-weight: bold;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  text-decoration: none;
+}
+
+.epr-arrow:hover {
+    color: #777;
+}
+
+.epr-arrow:active {
+    color: #000;
+}
diff --git a/reader/templates/reader/book_read/epub_viewer.html b/reader/templates/reader/book_read/epub_viewer.html
new file mode 100644
index 0000000000000000000000000000000000000000..34fc51aad8877f8cf8a4611ec6a41bf96a93e097
--- /dev/null
+++ b/reader/templates/reader/book_read/epub_viewer.html
@@ -0,0 +1,84 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Read Book: {{ book.title }}</title>
+    <link rel="stylesheet" href="{% static "css/reader_epub.css" %}">
+    <link rel="stylesheet" href="{% static "css/reader_toolbar.css" %}">
+    <script src="{% static "js/jquery-3.7.1.min.js" %}"></script>
+    <script src="{% static "js/jszip.min.js" %}"></script>
+    <script src="{% static "js/epub.min.js" %}"></script>
+</head>
+<body>
+    <div class="reading-toolbar-top">
+        <table>
+            <tbody>
+                <tr>
+                    <td class="ta-left">
+                        <span class="ta-text">Now reading: {{ book.title }}</span>
+                    </td>
+                    <td></td>
+                    <td class="ta-right">
+                        <span class="ta-text"><a href="{% url 'view_book' book.id %}" class="btn btn-primary">Back to book</a></span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div id="outerContainer">
+        <div id="viewer"></div>
+    </div>
+    <div id="prev" class="epr-arrow">‹</div>
+    <div id="next" class="epr-arrow">›</div>
+
+    <script>
+        let book = ePub("{{ book.original_file.url }}");
+        let rendition = book.renderTo("viewer", {
+            manager: "continuous",
+            flow: "paginated",
+            width: "100%",
+            height: "100%",
+            snap: true
+        });
+        let displayed = rendition.display();
+
+        rendition.on("relocated", function(location){
+            console.log(location);
+            // TODO Save location here
+        });
+
+        displayed.then(function(renderer){
+            // -- do stuff
+        });
+
+        // Navigation loaded
+        book.loaded.navigation.then(function(toc){
+            // console.log(toc);
+        });
+
+        var next = document.getElementById("next");
+        next.addEventListener("click", function(){
+            rendition.next();
+        }, false);
+
+        var prev = document.getElementById("prev");
+        prev.addEventListener("click", function(){
+            rendition.prev();
+        }, false);
+
+        rendition.on("keyup", event => {
+            let kc = event.keyCode || event.which;
+            if (kc === 37) rendition.prev();
+            if (kc === 39) rendition.next();
+        });
+
+        $(window).on( "swipeleft", function( event ) {
+            rendition.next();
+        });
+        $(window).on( "swiperight", function( event ) {
+            rendition.prev();
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file