diff --git a/comic/models.py b/comic/models.py
index 6f89ff4..e71dff5 100644
--- a/comic/models.py
+++ b/comic/models.py
@@ -2,7 +2,6 @@ import io
 import mimetypes
 import uuid
 import zipfile
-from dataclasses import dataclass
 from functools import reduce
 from itertools import zip_longest
 from os import listdir
@@ -230,18 +229,12 @@ class ComicBook(models.Model):
     def page_count(self):
         return ComicPage.objects.filter(Comic=self).count()
 
-    @dataclass
-    class Navigation:
-        next_path: str
-        prev_path: str
-        cur_path: str
-
     def nav(self, user):
-        return self.Navigation(
-            next_path=self.nav_get_next_comic(user),
-            prev_path=self.nav_get_prev_comic(user),
-            cur_path=urlsafe_base64_encode(self.selector.bytes)
-        )
+        return {
+            "next_path": self.nav_get_next_comic(user),
+            "prev_path": self.nav_get_prev_comic(user),
+            "cur_path": urlsafe_base64_encode(self.selector.bytes)
+        }
 
     def nav_get_prev_comic(self, user) -> str:
         base_dir = settings.COMIC_BOOK_VOLUME
diff --git a/comic/templates/comic/comic_list.html b/comic/templates/comic/comic_list.html
index d750f80..ec0dca9 100644
--- a/comic/templates/comic/comic_list.html
+++ b/comic/templates/comic/comic_list.html
@@ -90,76 +90,5 @@
 {% endblock %}
 
 {% block script %}
-<script>
-
-var qsRegex;
-var buttonFilter;
-    var $grid = $('.comic-container').isotope({
-      itemSelector: '.grid-item',
-      layoutMode: 'fitRows',
-      filter: function() {
-        var $this = $(this);
-        var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
-        var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
-        return searchResult && buttonResult;
-          {#return searchResult#}
-      }
-    });
-    $('#filters').on( 'click', 'button', function() {
-      buttonFilter = $( this ).attr('data-filter');
-      sessionStorage.setItem(window.location.href+"button", buttonFilter);
-      $grid.isotope();
-    });
-
-    var $quicksearch = $('#quicksearch').keyup( debounce( function() {
-         qsRegex = new RegExp($quicksearch.val(), 'gi');
-         sessionStorage.setItem(window.location.href+'text', $quicksearch.val());
-      $grid.isotope();
-    }) );
-
-    // debounce so filtering doesn't happen every millisecond
-    function debounce( fn, threshold ) {
-      var timeout;
-      threshold = threshold || 100;
-      return function debounced() {
-        clearTimeout( timeout );
-        var args = arguments;
-        var _this = this;
-        function delayed() {
-          fn.apply( _this, args );
-        }
-        timeout = setTimeout( delayed, threshold );
-      };
-    }
-setInterval(function (){
-    $grid.isotope();
-}, 1000)
-
-let field = document.getElementById("quicksearch");
-
-// See if we have an autosave value
-// (this will only happen if the page is accidentally refreshed)
-if (sessionStorage.getItem(window.location.href+'text') || sessionStorage.getItem(window.location.href+'button')) {
-  // Restore the contents of the text field
-  field.value = sessionStorage.getItem(window.location.href+'text');
-  qsRegex = new RegExp($quicksearch.val(), 'gi');
-  buttonFilter = sessionStorage.getItem(window.location.href+'button');
-  $grid.isotope();
-}
-
-// Listen for changes in the text field
-field.addEventListener("change", function() {
-  // And save the results into the session storage object
-
-});
-
-function comic_action(selector, item_type, action) {
-    $.ajax({
-        url: '/comic/action/' + action + '/' + item_type + '/' + selector + '/',
-        success: function (){window.location.reload()}
-    })
-
-}
-
-</script>
+<script type="text/javascript" src="{% static "js/comic_list.min.js" %}"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/comic/templates/comic/read_comic.html b/comic/templates/comic/read_comic.html
index b035d43..402e7b4 100644
--- a/comic/templates/comic/read_comic.html
+++ b/comic/templates/comic/read_comic.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load static %}
 {% block title %}{{ title }}{% endblock %}
 
 {% block content %}
@@ -21,65 +22,7 @@
 {% endblock %}
 
 {% block script %}
-    <script>
-        Reveal.initialize({
-            controls: false,
-            hash: true,
-            width: "100%",
-            height: "100%",
-            margin: 0,
-            minScale: 1,
-            maxScale: 1,
-            disableLayout: true,
-            progress: true,
-            keyboard: {
-                37: () => {prevPage()},
-                39: () => {nextPage()},
-                38: () => {window.scrollTo({ top: window.scrollY-window.innerHeight*.6, left: 0, behavior: 'smooth' })},
-                40: () => {window.scrollTo({ top: window.scrollY+window.innerHeight*.6, left: 0, behavior: 'smooth' })},
-              },
-            touch: false,
-            transition: 'slide',
-            plugins: [ RevealMenu ]
-        }).then(() => {
-            Reveal.slide({{ status.last_read_page }})
-
-        });
-
-        Reveal.on( 'slidechanged', event => {
-            setTimeout(() =>{document.getElementsByClassName('slides')[0].scrollIntoView({behavior: 'smooth'})}, 100)
-            $.ajax({url: "/comic/set_page/{{nav.cur_path}}/" + event.indexh + "/"})
-        });
-
-        const hammertime = new Hammer(document.getElementById('comic_box'), {});
-        hammertime.on('swipeleft', function (ev) {
-            if (Reveal.isLastSlide()){
-                window.location = "{% url "read_comic" nav.next_path %}"
-            } else {
-                Reveal.next()
-            }
-        });
-        hammertime.on('swiperight', function (ev) {
-            if (Reveal.isFirstSlide()){
-                window.location = "{% url "read_comic" nav.prev_path %}"
-            } else {
-                Reveal.prev();
-            }
-        });
-
-    function prevPage() {
-        if (Reveal.isFirstSlide()){
-            window.location = "{% url "read_comic" nav.prev_path %}"
-        } else {
-            Reveal.prev();
-        }
-    }
-    function nextPage() {
-        if (Reveal.isLastSlide()){
-            window.location = "{% url "read_comic" nav.next_path %}"
-        } else {
-            Reveal.next()
-        }
-    }
-    </script>
+    {{ nav|json_script:"nav" }}
+    {{ status.last_read_page|json_script:"last_read_page" }}
+    <script type="text/javascript" src="{% static "js/read_comic.min.js" %}"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/comic/templates/comic/read_comic_pdf.html b/comic/templates/comic/read_comic_pdf.html
index e5ad77d..065cd7d 100644
--- a/comic/templates/comic/read_comic_pdf.html
+++ b/comic/templates/comic/read_comic_pdf.html
@@ -24,150 +24,7 @@
 
 {% block script %}
     <script type="text/javascript" src="{% static "pdfjs/build/pdf.js" %}"></script>
-    <script>
-// If absolute URL from the remote server is provided, configure the CORS
-// header on that server.
-var url = '{% url "get_pdf" nav.cur_path %}';
-
-// Loaded via <script> tag, create shortcut to access PDF.js exports.
-var pdfjsLib = window['pdfjs-dist/build/pdf'];
-
-
-// The workerSrc property shall be specified.
-pdfjsLib.GlobalWorkerOptions.workerSrc = '{% static "pdfjs/build/pdf.worker.js" %}';
-
-var pdfDoc = null,
-    pageNum = {{ status.last_read_page }},
-    pageRendering = false,
-    pageNumPending = null,
-    scale = 0.8,
-    canvas = document.getElementById('the-canvas'),
-    ctx = canvas.getContext('2d');
-
-/**
- * Get page info from document, resize canvas accordingly, and render page.
- * @param num Page number.
- */
-function renderPage(num) {
-  pageRendering = true;
-  // Using promise to fetch the page
-  pdfDoc.getPage(num).then(function(page) {
-    let viewport = page.getViewport({scale: (window.innerWidth *.95) / page.getViewport({scale:1.0}).width});
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-
-    // Render PDF page into canvas context
-    let renderContext = {
-      canvasContext: ctx,
-      viewport: viewport
-    };
-    let renderTask = page.render(renderContext);
-
-    // Wait for rendering to finish
-    renderTask.promise.then(function() {
-      pageRendering = false;
-      if (pageNumPending !== null) {
-        // New page rendering is pending
-        renderPage(pageNumPending);
-        pageNumPending = null;
-      }
-    }).then(function () {
-        document.getElementById('the-canvas').scrollIntoView({behavior: 'smooth'})
-        $.ajax({url: "/comic/set_page/{{nav.cur_path}}/" + (num-1) + "/"})
-    });
-  });
-
-  // Update page counters
-  document.getElementById('page_num').textContent = num;
-}
-
-/**
- * If another page rendering in progress, waits until the rendering is
- * finised. Otherwise, executes rendering immediately.
- */
-function queueRenderPage(num) {
-  if (pageRendering) {
-    pageNumPending = num;
-  } else {
-    renderPage(num);
-  }
-}
-
-/**
- * Displays previous page.
- */
-function onPrevPage() {
-  if (pageNum <= 1) {
-    window.location = "{% url "read_comic" nav.prev_path %}"
-  }
-  pageNum--;
-  queueRenderPage(pageNum);
-}
-document.getElementById('prev').addEventListener('click', onPrevPage);
-
-/**
- * Displays next page.
- */
-function onNextPage() {
-  if (pageNum >= pdfDoc.numPages) {
-    window.location = "{% url "read_comic" nav.next_path %}"
-  }
-  pageNum++;
-  queueRenderPage(pageNum);
-}
-document.getElementById('next').addEventListener('click', onNextPage);
-
-/**
- * Asynchronously downloads PDF.
- */
-pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
-  pdfDoc = pdfDoc_;
-  document.getElementById('page_count').textContent = pdfDoc.numPages;
-
-  // Initial/first page rendering
-  renderPage(pageNum);
-});
-
-$(document).keydown(function(e) { // add arrow key support
-            switch(e.which) {
-                case 37: // left
-                    onPrevPage()
-                break;
-
-                case 38: // up
-                    window.scrollTo({
-                      top: window.scrollY-window.innerHeight*.7,
-                      left: 0,
-                      behavior: 'smooth'
-                    });
-                break;
-
-                case 39: // right
-                    onNextPage()
-                break;
-
-                case 40: // down
-                    window.scrollTo({
-                      top: window.scrollY+window.innerHeight*.7,
-                      left: 0,
-                      behavior: 'smooth'
-                    });
-                break;
-
-                default: return; // exit this handler for other keys
-            }
-            e.preventDefault(); // prevent the default action (scroll / move caret)
-        });
-
-        var hammertime = new Hammer(document.getElementById('the-canvas'), {});
-        hammertime.on('swipeleft', function () {
-            onNextPage()
-        })
-        hammertime.on('swiperight', function () {
-            onPrevPage()
-        })
-        hammertime.on('tap', function () {
-            onNextPage()
-        })
-    </script>
+    {{ nav|json_script:"nav" }}
+    {{ status.last_read_page|json_script:"last_read_page" }}
+    <script type="text/javascript" src="{% static 'js/read_comic_pdf.min.js' %}"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/comic/templates/comic/recent_comics.html b/comic/templates/comic/recent_comics.html
index b838595..8261dbb 100644
--- a/comic/templates/comic/recent_comics.html
+++ b/comic/templates/comic/recent_comics.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load static %}
 {% block title %}{{ title }}{% endblock %}
 
 {% block content %}
@@ -40,83 +41,5 @@
 {% endblock %}
 
 {% block script %}
-<script>
-$(document).ready(function() {
-
-    var table = $('#comic_list').DataTable({
-        "processing": true,
-        "stateSave": true,
-        "serverSide": true,
-        "ajax": {
-            "type": "POST",
-            "url": "/comic/recent/json/",
-            "data": function ( d ) {
-                d.csrfmiddlewaretoken = Cookies.get('csrftoken');
-            },
-        },
-        "rowCallback": function( row, data, index ) {
-            var r = $(row);
-            var cols = $('td:nth-child(n+2)', row);
-            cols.attr('data-href', data['url']);
-            cols.attr('style', 'cursor: pointer;');
-            cols.click(function() {
-                window.document.location = $(this).data("href");
-            });
-            var tds = $('td:eq(0)', row);
-            tds.html('<input type="checkbox" name="selected" value="'+data['selector']+'" data-type="'+data['type']+'"/>');
-            var cb = $('input', tds);
-            cb.change(function() {
-                $(this).closest('tr').toggleClass('info')
-            });
-
-        },
-        "drawCallback": function( settings ) {
-            var tds = $('table tr td:first-child');
-            tds.click(function(event){
-                if (!$(event.target).is('input')) {
-                    var $cb = $('input', this);
-                    $cb.click();
-                }
-            });
-        },
-        "columns": [
-            { "data" : "selector", "orderable": false },
-            { "data" : "icon", "orderable": false },
-            { "data" : "name" },
-            { "data" : "date" },
-            { "data" : "label", "orderable": false },
-        ],
-
-        "order": [[ 3, 'desc' ]],
-    });
-    $(".clickable-row").click(function() {
-        window.document.location = $(this).data("href");
-    });
-    $('#func_selector').on('change', function() {
-        $.post('/comic/edit/', $('#comic_form').serialize())
-        .done(function(){
-            $('#func_selector').val('choose');
-            $('#select-all input').prop('checked', false);
-            table.ajax.reload();
-        }).fail(function(){
-            alert('Error Submitting Change');
-        })
-
-    });
-    $('#select-all').click(function(event){
-        var cb = $('input', this);
-        if (!$(event.target).is('input')) {
-            cb.click();
-        }
-        $('table tr td:first-child input').each(function(chkbx) {
-            row = $(this);
-            if (row.prop('checked') != cb.prop('checked')){
-                row.click();
-            }
-        });
-    });
-} );
-
-
-</script>
+<script type="text/javascript" src="{% static "js/recent_comics.min.js" %}"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/static/js/comic_list.js b/static/js/comic_list.js
new file mode 100644
index 0000000..80f59ac
--- /dev/null
+++ b/static/js/comic_list.js
@@ -0,0 +1,67 @@
+var qsRegex;
+var buttonFilter;
+    var $grid = $('.comic-container').isotope({
+      itemSelector: '.grid-item',
+      layoutMode: 'fitRows',
+      filter: function() {
+        var $this = $(this);
+        var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
+        var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
+        return searchResult && buttonResult;
+      }
+    });
+    $('#filters').on( 'click', 'button', function() {
+      buttonFilter = $( this ).attr('data-filter');
+      sessionStorage.setItem(window.location.href+"button", buttonFilter);
+      $grid.isotope();
+    });
+
+    var $quicksearch = $('#quicksearch').keyup( debounce( function() {
+         qsRegex = new RegExp($quicksearch.val(), 'gi');
+         sessionStorage.setItem(window.location.href+'text', $quicksearch.val());
+      $grid.isotope();
+    }) );
+
+    // debounce so filtering doesn't happen every millisecond
+    function debounce( fn, threshold ) {
+      var timeout;
+      threshold = threshold || 100;
+      return function debounced() {
+        clearTimeout( timeout );
+        var args = arguments;
+        var _this = this;
+        function delayed() {
+          fn.apply( _this, args );
+        }
+        timeout = setTimeout( delayed, threshold );
+      };
+    }
+setInterval(function (){
+    $grid.isotope();
+}, 1000)
+
+let field = document.getElementById("quicksearch");
+
+// See if we have an autosave value
+// (this will only happen if the page is accidentally refreshed)
+if (sessionStorage.getItem(window.location.href+'text') || sessionStorage.getItem(window.location.href+'button')) {
+  // Restore the contents of the text field
+  field.value = sessionStorage.getItem(window.location.href+'text');
+  qsRegex = new RegExp($quicksearch.val(), 'gi');
+  buttonFilter = sessionStorage.getItem(window.location.href+'button');
+  $grid.isotope();
+}
+
+// Listen for changes in the text field
+field.addEventListener("change", function() {
+  // And save the results into the session storage object
+
+});
+
+function comic_action(selector, item_type, action) {
+    $.ajax({
+        url: '/comic/action/' + action + '/' + item_type + '/' + selector + '/',
+        success: function (){window.location.reload()}
+    })
+
+}
diff --git a/static/js/comic_list.min.js b/static/js/comic_list.min.js
new file mode 100644
index 0000000..77ed1bd
--- /dev/null
+++ b/static/js/comic_list.min.js
@@ -0,0 +1 @@
+var qsRegex;var buttonFilter;var $grid=$(".comic-container").isotope({itemSelector:".grid-item",layoutMode:"fitRows",filter:function(){var $this=$(this);var searchResult=qsRegex?$this.text().match(qsRegex):true;var buttonResult=buttonFilter?$this.is(buttonFilter):true;return searchResult&&buttonResult}});$("#filters").on("click","button",function(){buttonFilter=$(this).attr("data-filter");sessionStorage.setItem(window.location.href+"button",buttonFilter);$grid.isotope()});var $quicksearch=$("#quicksearch").keyup(debounce(function(){qsRegex=new RegExp($quicksearch.val(),"gi");sessionStorage.setItem(window.location.href+"text",$quicksearch.val());$grid.isotope()}));function debounce(fn,threshold){var timeout;threshold=threshold||100;return function debounced(){clearTimeout(timeout);var args=arguments;var _this=this;function delayed(){fn.apply(_this,args)}timeout=setTimeout(delayed,threshold)}}setInterval(function(){$grid.isotope()},1e3);let field=document.getElementById("quicksearch");if(sessionStorage.getItem(window.location.href+"text")||sessionStorage.getItem(window.location.href+"button")){field.value=sessionStorage.getItem(window.location.href+"text");qsRegex=new RegExp($quicksearch.val(),"gi");buttonFilter=sessionStorage.getItem(window.location.href+"button");$grid.isotope()}field.addEventListener("change",function(){});function comic_action(selector,item_type,action){$.ajax({url:"/comic/action/"+action+"/"+item_type+"/"+selector+"/",success:function(){window.location.reload()}})}
\ No newline at end of file
diff --git a/static/js/read_comic.js b/static/js/read_comic.js
new file mode 100644
index 0000000..49f08dc
--- /dev/null
+++ b/static/js/read_comic.js
@@ -0,0 +1,62 @@
+const nav = JSON.parse(document.getElementById('nav').textContent);
+const last_read_page = JSON.parse(document.getElementById('last_read_page').textContent);
+
+Reveal.initialize({
+    controls: false,
+    hash: true,
+    width: "100%",
+    height: "100%",
+    margin: 0,
+    minScale: 1,
+    maxScale: 1,
+    disableLayout: true,
+    progress: true,
+    keyboard: {
+        37: () => {prevPage()},
+        39: () => {nextPage()},
+        38: () => {window.scrollTo({ top: window.scrollY-window.innerHeight*.6, left: 0, behavior: 'smooth' })},
+        40: () => {window.scrollTo({ top: window.scrollY+window.innerHeight*.6, left: 0, behavior: 'smooth' })},
+      },
+    touch: false,
+    transition: 'slide',
+    plugins: [ RevealMenu ]
+}).then(() => {
+    Reveal.slide(last_read_page)
+
+});
+
+Reveal.on( 'slidechanged', event => {
+    setTimeout(() =>{document.getElementsByClassName('slides')[0].scrollIntoView({behavior: 'smooth'})}, 100)
+    $.ajax({url: "/comic/set_page/" + nav.cur_path + "/" + event.indexh + "/"})
+});
+
+const hammertime = new Hammer(document.getElementById('comic_box'), {});
+hammertime.on('swipeleft', function (ev) {
+    if (Reveal.isLastSlide()){
+        window.location = "/comic/read/"+ nav.next_path +"/"
+    } else {
+        Reveal.next()
+    }
+});
+hammertime.on('swiperight', function (ev) {
+    if (Reveal.isFirstSlide()){
+        window.location = "/comic/read/"+ nav.prev_path +"/"
+    } else {
+        Reveal.prev();
+    }
+});
+
+function prevPage() {
+    if (Reveal.isFirstSlide()){
+        window.location = "/comic/read/"+ nav.prev_path +"/"
+    } else {
+        Reveal.prev();
+    }
+}
+function nextPage() {
+    if (Reveal.isLastSlide()){
+        window.location = "/comic/read/"+ nav.next_path +"/"
+    } else {
+        Reveal.next()
+    }
+}
\ No newline at end of file
diff --git a/static/js/read_comic.min.js b/static/js/read_comic.min.js
new file mode 100644
index 0000000..fa7ca8a
--- /dev/null
+++ b/static/js/read_comic.min.js
@@ -0,0 +1 @@
+const nav=JSON.parse(document.getElementById("nav").textContent);const last_read_page=JSON.parse(document.getElementById("last_read_page").textContent);Reveal.initialize({controls:false,hash:true,width:"100%",height:"100%",margin:0,minScale:1,maxScale:1,disableLayout:true,progress:true,keyboard:{37:()=>{prevPage()},39:()=>{nextPage()},38:()=>{window.scrollTo({top:window.scrollY-window.innerHeight*.6,left:0,behavior:"smooth"})},40:()=>{window.scrollTo({top:window.scrollY+window.innerHeight*.6,left:0,behavior:"smooth"})}},touch:false,transition:"slide",plugins:[RevealMenu]}).then(()=>{Reveal.slide(last_read_page)});Reveal.on("slidechanged",event=>{setTimeout(()=>{document.getElementsByClassName("slides")[0].scrollIntoView({behavior:"smooth"})},100);$.ajax({url:"/comic/set_page/"+nav.cur_path+"/"+event.indexh+"/"})});const hammertime=new Hammer(document.getElementById("comic_box"),{});hammertime.on("swipeleft",function(ev){if(Reveal.isLastSlide()){window.location="/comic/read/"+nav.next_path+"/"}else{Reveal.next()}});hammertime.on("swiperight",function(ev){if(Reveal.isFirstSlide()){window.location="/comic/read/"+nav.prev_path+"/"}else{Reveal.prev()}});function prevPage(){if(Reveal.isFirstSlide()){window.location="/comic/read/"+nav.prev_path+"/"}else{Reveal.prev()}}function nextPage(){if(Reveal.isLastSlide()){window.location="/comic/read/"+nav.next_path+"/"}else{Reveal.next()}}
\ No newline at end of file
diff --git a/static/js/read_comic_pdf.js b/static/js/read_comic_pdf.js
new file mode 100644
index 0000000..a941596
--- /dev/null
+++ b/static/js/read_comic_pdf.js
@@ -0,0 +1,146 @@
+// If absolute URL from the remote server is provided, configure the CORS
+// header on that server.
+const nav = JSON.parse(document.getElementById('nav').textContent);
+const last_read_page = JSON.parse(document.getElementById('last_read_page').textContent);
+var url = "/comic/read/" + nav.cur_path + "/pdf"
+
+// Loaded via <script> tag, create shortcut to access PDF.js exports.
+var pdfjsLib = window['pdfjs-dist/build/pdf'];
+
+
+// The workerSrc property shall be specified.
+pdfjsLib.GlobalWorkerOptions.workerSrc = '/static/pdfjs/build/pdf.worker.js';
+
+var pdfDoc = null,
+    pageNum = last_read_page,
+    pageRendering = false,
+    pageNumPending = null,
+    scale = 0.8,
+    canvas = document.getElementById('the-canvas'),
+    ctx = canvas.getContext('2d');
+
+/**
+ * Get page info from document, resize canvas accordingly, and render page.
+ * @param num Page number.
+ */
+function renderPage(num) {
+  pageRendering = true;
+  // Using promise to fetch the page
+  pdfDoc.getPage(num).then(function(page) {
+    let viewport = page.getViewport({scale: (window.innerWidth *.95) / page.getViewport({scale:1.0}).width});
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+
+    // Render PDF page into canvas context
+    let renderContext = {
+      canvasContext: ctx,
+      viewport: viewport
+    };
+    let renderTask = page.render(renderContext);
+
+    // Wait for rendering to finish
+    renderTask.promise.then(function() {
+      pageRendering = false;
+      if (pageNumPending !== null) {
+        // New page rendering is pending
+        renderPage(pageNumPending);
+        pageNumPending = null;
+      }
+    }).then(function () {
+        document.getElementById('the-canvas').scrollIntoView({behavior: 'smooth'})
+        $.ajax({url: "/comic/set_page/" + nav.cur_path + "/" + (num-1) + "/"})
+    });
+  });
+
+  // Update page counters
+  document.getElementById('page_num').textContent = num;
+}
+
+/**
+ * If another page rendering in progress, waits until the rendering is
+ * finised. Otherwise, executes rendering immediately.
+ */
+function queueRenderPage(num) {
+  if (pageRendering) {
+    pageNumPending = num;
+  } else {
+    renderPage(num);
+  }
+}
+
+/**
+ * Displays previous page.
+ */
+function onPrevPage() {
+  if (pageNum <= 1) {
+    window.location = "/comic/read/"+ nav.prev_path +"/"
+  }
+  pageNum--;
+  queueRenderPage(pageNum);
+}
+document.getElementById('prev').addEventListener('click', onPrevPage);
+
+/**
+ * Displays next page.
+ */
+function onNextPage() {
+  if (pageNum >= pdfDoc.numPages) {
+    window.location = "/comic/read/"+ nav.next_path +"/"
+  }
+  pageNum++;
+  queueRenderPage(pageNum);
+}
+document.getElementById('next').addEventListener('click', onNextPage);
+
+/**
+ * Asynchronously downloads PDF.
+ */
+pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
+  pdfDoc = pdfDoc_;
+  document.getElementById('page_count').textContent = pdfDoc.numPages;
+
+  // Initial/first page rendering
+  renderPage(pageNum);
+});
+
+$(document).keydown(function(e) { // add arrow key support
+    switch(e.which) {
+        case 37: // left
+            onPrevPage()
+        break;
+
+        case 38: // up
+            window.scrollTo({
+              top: window.scrollY-window.innerHeight*.7,
+              left: 0,
+              behavior: 'smooth'
+            });
+        break;
+
+        case 39: // right
+            onNextPage()
+        break;
+
+        case 40: // down
+            window.scrollTo({
+              top: window.scrollY+window.innerHeight*.7,
+              left: 0,
+              behavior: 'smooth'
+            });
+        break;
+
+        default: return; // exit this handler for other keys
+    }
+    e.preventDefault(); // prevent the default action (scroll / move caret)
+});
+
+var hammertime = new Hammer(document.getElementById('the-canvas'), {});
+hammertime.on('swipeleft', function () {
+    onNextPage()
+})
+hammertime.on('swiperight', function () {
+    onPrevPage()
+})
+hammertime.on('tap', function () {
+    onNextPage()
+})
\ No newline at end of file
diff --git a/static/js/read_comic_pdf.min.js b/static/js/read_comic_pdf.min.js
new file mode 100644
index 0000000..3a08e34
--- /dev/null
+++ b/static/js/read_comic_pdf.min.js
@@ -0,0 +1 @@
+const nav=JSON.parse(document.getElementById("nav").textContent);const last_read_page=JSON.parse(document.getElementById("last_read_page").textContent);var url="/comic/read/"+nav.cur_path+"/pdf";var pdfjsLib=window["pdfjs-dist/build/pdf"];pdfjsLib.GlobalWorkerOptions.workerSrc="/static/pdfjs/build/pdf.worker.js";var pdfDoc=null,pageNum=last_read_page,pageRendering=false,pageNumPending=null,scale=.8,canvas=document.getElementById("the-canvas"),ctx=canvas.getContext("2d");function renderPage(num){pageRendering=true;pdfDoc.getPage(num).then(function(page){let viewport=page.getViewport({scale:window.innerWidth*.95/page.getViewport({scale:1}).width});canvas.height=viewport.height;canvas.width=viewport.width;let renderContext={canvasContext:ctx,viewport:viewport};let renderTask=page.render(renderContext);renderTask.promise.then(function(){pageRendering=false;if(pageNumPending!==null){renderPage(pageNumPending);pageNumPending=null}}).then(function(){document.getElementById("the-canvas").scrollIntoView({behavior:"smooth"});$.ajax({url:"/comic/set_page/"+nav.cur_path+"/"+(num-1)+"/"})})});document.getElementById("page_num").textContent=num}function queueRenderPage(num){if(pageRendering){pageNumPending=num}else{renderPage(num)}}function onPrevPage(){if(pageNum<=1){window.location="/comic/read/"+nav.prev_path+"/"}pageNum--;queueRenderPage(pageNum)}document.getElementById("prev").addEventListener("click",onPrevPage);function onNextPage(){if(pageNum>=pdfDoc.numPages){window.location="/comic/read/"+nav.next_path+"/"}pageNum++;queueRenderPage(pageNum)}document.getElementById("next").addEventListener("click",onNextPage);pdfjsLib.getDocument(url).promise.then(function(pdfDoc_){pdfDoc=pdfDoc_;document.getElementById("page_count").textContent=pdfDoc.numPages;renderPage(pageNum)});$(document).keydown(function(e){switch(e.which){case 37:onPrevPage();break;case 38:window.scrollTo({top:window.scrollY-window.innerHeight*.7,left:0,behavior:"smooth"});break;case 39:onNextPage();break;case 40:window.scrollTo({top:window.scrollY+window.innerHeight*.7,left:0,behavior:"smooth"});break;default:return}e.preventDefault()});var hammertime=new Hammer(document.getElementById("the-canvas"),{});hammertime.on("swipeleft",function(){onNextPage()});hammertime.on("swiperight",function(){onPrevPage()});hammertime.on("tap",function(){onNextPage()});
\ No newline at end of file
diff --git a/static/js/recent_comics.js b/static/js/recent_comics.js
new file mode 100644
index 0000000..2e4d95d
--- /dev/null
+++ b/static/js/recent_comics.js
@@ -0,0 +1,75 @@
+$(document).ready(function() {
+
+    var table = $('#comic_list').DataTable({
+        "processing": true,
+        "stateSave": true,
+        "serverSide": true,
+        "ajax": {
+            "type": "POST",
+            "url": "/comic/recent/json/",
+            "data": function ( d ) {
+                d.csrfmiddlewaretoken = Cookies.get('csrftoken');
+            },
+        },
+        "rowCallback": function( row, data, index ) {
+            var r = $(row);
+            var cols = $('td:nth-child(n+2)', row);
+            cols.attr('data-href', data['url']);
+            cols.attr('style', 'cursor: pointer;');
+            cols.click(function() {
+                window.document.location = $(this).data("href");
+            });
+            var tds = $('td:eq(0)', row);
+            tds.html('<input type="checkbox" name="selected" value="'+data['selector']+'" data-type="'+data['type']+'"/>');
+            var cb = $('input', tds);
+            cb.change(function() {
+                $(this).closest('tr').toggleClass('info')
+            });
+
+        },
+        "drawCallback": function( settings ) {
+            var tds = $('table tr td:first-child');
+            tds.click(function(event){
+                if (!$(event.target).is('input')) {
+                    var $cb = $('input', this);
+                    $cb.click();
+                }
+            });
+        },
+        "columns": [
+            { "data" : "selector", "orderable": false },
+            { "data" : "icon", "orderable": false },
+            { "data" : "name" },
+            { "data" : "date" },
+            { "data" : "label", "orderable": false },
+        ],
+
+        "order": [[ 3, 'desc' ]],
+    });
+    $(".clickable-row").click(function() {
+        window.document.location = $(this).data("href");
+    });
+    $('#func_selector').on('change', function() {
+        $.post('/comic/edit/', $('#comic_form').serialize())
+        .done(function(){
+            $('#func_selector').val('choose');
+            $('#select-all input').prop('checked', false);
+            table.ajax.reload();
+        }).fail(function(){
+            alert('Error Submitting Change');
+        })
+
+    });
+    $('#select-all').click(function(event){
+        var cb = $('input', this);
+        if (!$(event.target).is('input')) {
+            cb.click();
+        }
+        $('table tr td:first-child input').each(function(chkbx) {
+            row = $(this);
+            if (row.prop('checked') != cb.prop('checked')){
+                row.click();
+            }
+        });
+    });
+} );
\ No newline at end of file
diff --git a/static/js/recent_comics.min.js b/static/js/recent_comics.min.js
new file mode 100644
index 0000000..a8f1732
--- /dev/null
+++ b/static/js/recent_comics.min.js
@@ -0,0 +1 @@
+$(document).ready(function(){var table=$("#comic_list").DataTable({processing:true,stateSave:true,serverSide:true,ajax:{type:"POST",url:"/comic/recent/json/",data:function(d){d.csrfmiddlewaretoken=Cookies.get("csrftoken")}},rowCallback:function(row,data,index){var r=$(row);var cols=$("td:nth-child(n+2)",row);cols.attr("data-href",data["url"]);cols.attr("style","cursor: pointer;");cols.click(function(){window.document.location=$(this).data("href")});var tds=$("td:eq(0)",row);tds.html('<input type="checkbox" name="selected" value="'+data["selector"]+'" data-type="'+data["type"]+'"/>');var cb=$("input",tds);cb.change(function(){$(this).closest("tr").toggleClass("info")})},drawCallback:function(settings){var tds=$("table tr td:first-child");tds.click(function(event){if(!$(event.target).is("input")){var $cb=$("input",this);$cb.click()}})},columns:[{data:"selector",orderable:false},{data:"icon",orderable:false},{data:"name"},{data:"date"},{data:"label",orderable:false}],order:[[3,"desc"]]});$(".clickable-row").click(function(){window.document.location=$(this).data("href")});$("#func_selector").on("change",function(){$.post("/comic/edit/",$("#comic_form").serialize()).done(function(){$("#func_selector").val("choose");$("#select-all input").prop("checked",false);table.ajax.reload()}).fail(function(){alert("Error Submitting Change")})});$("#select-all").click(function(event){var cb=$("input",this);if(!$(event.target).is("input")){cb.click()}$("table tr td:first-child input").each(function(chkbx){row=$(this);if(row.prop("checked")!=cb.prop("checked")){row.click()}})})});
\ No newline at end of file