diff --git a/templates/pagedjs.html b/templates/pagedjs.html
index e9d6bf1..a6a60e6 100644
--- a/templates/pagedjs.html
+++ b/templates/pagedjs.html
@@ -1,15 +1,44 @@
 <!DOCTYPE html>
 <html lang="{{ lang }}">
+
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="{{ url_for('static', filename='paged.polyfill.js') }}" type="text/javascript"></script>
     <script src="{{ url_for('static', filename='footnotes.js') }}" type="text/javascript"></script>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript"
+        id="html2canvas_js"></script>
+    <style>
+        @media screen,
+        pagedjs-ignore {
+            div.thumbnails {
+                position: fixed !important;
+                left: 0;
+                top: 0;
+                width: 100px;
+                height: 100vh;
+                overflow-y: auto;
+                position: fixed;
+            }
+
+            div.thumbnails div {
+                display: inline-block;
+            }
+
+            div.thumbnails span {
+                display: block;
+                text-align: center;
+            }
+        }
+    </style>
     {% if impose %}
     <script src="{{ url_for('static', filename='imposition.js') }}" type="text/javascript" id="imposition_js"></script>
-    <style>body{
-        --paged-layout: booklet; 
-    }</style>
+
+    <style>
+        body {
+            --paged-layout: booklet;
+        }
+    </style>
     {% endif %}
     {% if cover %}
     <style>
@@ -21,8 +50,103 @@
     <link href="{{ url_for('static', filename='pagedjs.css') }}" rel="stylesheet" type="text/css" media="screen">
     <link href="{{ url_for('css', name=name) }}" rel="stylesheet" type="text/css" media="print">
     <title>{{ title }}</title>
+
 </head>
-<body>
-    {{ pad_content }}
+
+<body {% if single_page %} class="single-pages" {% endif %}>
+    <div id="thumbs" class="thumbnails"></div>
+    <template data-ref='pagedjs-content'>{{ pad_content }}</template>
+    <script>
+        class Thumb extends Paged.Handler {
+            constructor(chunker, polisher, caller) {
+                super(chunker, polisher, caller);
+                this.pagedbooklet;
+                this.sourceSize;
+                this.pageStart;
+                this.pageEnd;
+                this.thumbsEl = document.querySelector("#thumbs");
+            }
+
+            afterRendered() {
+                this.thumbsEl.style.position = 'fixed';
+            }
+            finalizePage(pageElement, page, breakToken) {
+                //html2canvas.useCORS = true;
+                //html2canvas.allowTaint = false;
+                console.log(pageElement, page, breakToken);
+                html2canvas(pageElement, {
+                    backgroundColor: null,
+                    onclone: (clonedDoc) => {
+                        const root = clonedDoc.querySelector("#" + pageElement.id);
+                        root.querySelectorAll("img").forEach((img) => {
+                            const r = img.getBoundingClientRect();
+
+                            const ph = clonedDoc.createElement("div");
+                            ph.style.width = `${r.width}px`;
+                            ph.style.height = `${r.height}px`;
+                            ph.style.display = "inline-block";
+                            ph.style.boxSizing = "border-box";
+                            ph.style.border = "2px solid rgba(0,0,0,1)";
+                            ph.style.background = "rgba(0,0,0,.06)";
+                            ph.style.position = "relative";
+                            ph.style.overflow = "hidden";
+
+                            const w = r.width;
+                            const h = r.height;
+                            const diag = Math.hypot(w, h);
+                            const ang = (Math.atan2(h, w) * 180) / Math.PI;
+
+                            // diagnal 1 
+                            const d1 = clonedDoc.createElement("div");
+                            d1.style.position = "absolute";
+                            d1.style.left = "0";
+                            d1.style.top = "0";
+                            d1.style.width = `${diag}px`;
+                            d1.style.height = "2px";
+                            d1.style.background = "rgba(0,0,0,1)";
+                            d1.style.transformOrigin = "0 0";
+                            d1.style.transform = `rotate(${ang}deg)`;
+
+                            // diagonal 2
+                            const d2 = clonedDoc.createElement("div");
+                            d2.style.position = "absolute";
+                            d2.style.right = "0";
+                            d2.style.top = "0";
+                            d2.style.width = `${diag}px`;
+                            d2.style.height = "2px";
+                            d2.style.background = "rgba(0,0,0,1)";
+                            d2.style.transformOrigin = "100% 0";
+                            d2.style.transform = `rotate(${-ang}deg)`;
+
+                            ph.appendChild(d1);
+                            ph.appendChild(d2);
+
+                            img.replaceWith(ph);
+                        });
+                    },
+                }).then((canvas) => {
+                    canvas.style.height = 'auto';
+                    canvas.style.width = '80px';
+                    const a = document.createElement('a');
+                    const span = document.createElement('span');
+                    this.thumbsEl.appendChild(a);
+                    a.appendChild(canvas);
+                    a.href = "#" + pageElement.id;
+                    a.appendChild(span);
+                    span.append(page.position + 1);
+                    a.onclick = (e) => {
+                        e.preventDefault();
+                        pageElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+                        return false;
+                    }
+                });
+            }
+        }
+
+        Paged
+            .registerHandlers(Thumb);
+
+    </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
