diff --git a/static/js/viewer.js b/static/js/viewer.js
index 8cb4842..dd17822 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -3,7 +3,6 @@
 oml.ui.viewer = function() {
 
     var ui = oml.user.ui,
-        annotations = [],
 
         frame = Ox.Element(),
         that = Ox.Element()
@@ -39,24 +38,6 @@ oml.ui.viewer = function() {
             .appendTo(that),
         $iframe, item;
 
-    function loadAnnotations(callback) {
-        annotations = JSON.parse(localStorage[item + '.annotations'] || '[]')
-        callback && callback(annotations)
-    }
-    function saveAnnotations(data) {
-        if (data) {
-            data.created = data.created || (new Date).toISOString();
-            annotations.push(data);
-        }
-        localStorage[item + '.annotations'] = JSON.stringify(annotations)
-    }
-    function removeAnnotation(id) {
-        annotations = annotations.filter(function(annotation) {
-            return annotation.id != id
-        })
-        saveAnnotations()
-    }
-
     that.updateElement = function() {
         item = ui.item;
         if (item && item.length) {
@@ -74,36 +55,18 @@ oml.ui.viewer = function() {
                         console.log('got', event, data)
                         if (event == 'addAnnotation') {
                             console.log('adding', data.id)
-                            saveAnnotations(data);
                             var $annotation = oml.ui.annotation(data, $iframe)
                             oml.$ui.annotationFolder.append($annotation);
                             $annotation.annotate();
                         } else if (event == 'removeAnnotation') {
+                            console.log('do it ...', data)
                             oml.$ui.annotationFolder.find('#a-' + data.id).remove()
-                            removeAnnotation(data.id)
                         } else if (event == 'selectAnnotation') {
                             console.log('select', data)
                         } else if (event == 'deselectAnnotation') {
                             console.log('deselect', data)
-                        } else {
-                            that.triggerEvent(event, data);
-                        }
-
-                    }).bindEvent({
-                        init: function() {
-                            loadAnnotations(function(annotations) {
-                                annotations.forEach(function(data) {
-                                    var $annotation = oml.ui.annotation(data, $iframe)
-                                    oml.$ui.annotationFolder.append($annotation);
-                                })
-                                // fixme: trigger loaded event from reader instead?
-                                setTimeout(function() {
-                                    that.postMessage('addAnnotations', {
-                                        annotations: annotations
-                                    })
-                                }, 500)
-                            })
                         }
+                        that.triggerEvent(event, data);
                     }).appendTo(frame);
                     $iframe.attr({
                         src: '/' + item + '/reader/'
@@ -114,7 +77,7 @@ oml.ui.viewer = function() {
         return that;
     };
     that.postMessage = function(event, data) {
-        $iframe && $iframe.postMessage(event, data)
+        $iframe && $iframe.postMesage(event, data)
     };
 
     return that.updateElement();
diff --git a/static/reader/epub.js b/static/reader/epub.js
index f3a56ad..d0387fc 100644
--- a/static/reader/epub.js
+++ b/static/reader/epub.js
@@ -1,7 +1,7 @@
 "use strict";
 var reader;
 var id = document.location.pathname.split('/')[1];
-var annotations = [];
+var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
 var currentSelection;
 var fontSize = parseInt(localStorage.epubFontSize || '100', 10)
 
@@ -18,18 +18,23 @@ Ox.load({
             if (annotation) {
                 reader.rendition.display(annotation.cfiRange)
             }
-        } else if (event == 'addAnnotations') {
-            data.annotations.forEach(function(annotation) {
-                annotations.push(annotation)
-                renderAnnotation(annotation)
-            })
         }
     })
+    setTimeout(function() {
+        annotations.forEach(function(a) {
+            Ox.$parent.postMessage('addAnnotation', a)
+        })
+    }, 1000)
 })
 
+function saveAnnotations() {
+    localStorage[id + '.annotations'] = JSON.stringify(annotations)
+}
+
 function addAnnotation(annotation) {
     annotations.push(annotation)
     Ox.$parent.postMessage('addAnnotation', annotation)
+    saveAnnotations()
 }
 
 function selectAnnotation(id) {
@@ -52,11 +57,7 @@ function removeAnnotation(a) {
         return annotation.cfiRange != a.dataset.epubcfi
     })
     reader.rendition.annotations.remove(a.dataset.epubcfi)
-    Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
-}
-
-function renderAnnotation(annotation) {
-    reader.rendition.annotations.highlight(annotation.cfiRange, {id: annotation.id}, onHighlightClicked);
+    saveAnnotations()
 }
 
 function getText(book, cfiRange, cb) {
@@ -94,11 +95,16 @@ document.onreadystatechange = function () {
             book = reader.book;
 
         rendition.themes.fontSize(fontSize + "%");
+        annotations.forEach(function(a) {
+            rendition.annotations.highlight(a.cfiRange, {id: a.id}, onHighlightClicked);
+        })
+
 
         reader.rendition.on('keydown', function(event) {
             if (event.key == 'Delete') {
                 document.querySelectorAll('.epubjs-hl.selected').forEach(function(a) {
                     removeAnnotation(a)
+                    Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
                 })
             }
             if (event.key == 'n') {
@@ -111,7 +117,8 @@ document.onreadystatechange = function () {
                     )
                     //currentSelection.cfiRange = reader.rendition.book.section().cfiFromRange(range).toString()
                     */
-                    renderAnnotation(currentSelection)
+
+                    rendition.annotations.highlight(currentSelection.cfiRange, {id: currentSelection.id}, onHighlightClicked);
                     currentSelection.contents.window.getSelection().removeAllRanges();
                     delete currentSelection.contents
                     addAnnotation(currentSelection)
@@ -146,6 +153,7 @@ document.onreadystatechange = function () {
             getText(book, cfiRange, function(text) {
                 currentSelection = {
                     id: Ox.SHA1(cfiRange),
+                    created: (new Date).toISOString(),
                     cfiRange: cfiRange,
                     text: text,
                     contents: contents
diff --git a/static/reader/pdf.js b/static/reader/pdf.js
index b4bbed3..595e1b2 100644
--- a/static/reader/pdf.js
+++ b/static/reader/pdf.js
@@ -1,5 +1,5 @@
 var id = document.location.pathname.split('/')[1];
-var annotations = [];
+var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
 var currentPage = 1, rendered = false
 
 Ox.load({
@@ -20,13 +20,13 @@ Ox.load({
                 PDFViewerApplication.pdfViewer.currentPageNumber = annotation.page;
             }
             selectAnnotation(data.id)
-        } else if (event == 'addAnnotations') {
-            data.annotations.forEach(function(annotation) {
-                annotations.push(annotation)
-                renderAnnotation(annotation)
-            })
         }
     })
+    setTimeout(function() {
+        annotations.forEach(function(a) {
+            Ox.$parent.postMessage('addAnnotation', a)
+        })
+    }, 1000)
 })
 
 window.addEventListener('keydown', function(event) {
@@ -34,6 +34,7 @@ window.addEventListener('keydown', function(event) {
         var selected = document.querySelector('.oml-annotation.selected')
         if (selected) {
             removeAnnotation(selected.dataset.id)
+            Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
         }
     } else if (event.key == 'n') {
         if (!window.getSelection().isCollapsed) {
@@ -73,6 +74,7 @@ function getHighlight() {
     });
     var text = selection.toString();
     return {
+        created: (new Date).toISOString(),
         page: pageNumber,
         coords: selected,
         text: text,
@@ -83,10 +85,10 @@ function getHighlight() {
 function renderAnnotation(annotation) {
     var pageIndex = annotation.page - 1;
     var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
-    if (!page || !page.canvas) {
+    if (!page.canvas) {
         setTimeout(function() {
             renderAnnotation(annotation)
-        }, 50)
+        }, 10)
         return
     }
     var pageElement = page.canvas.parentElement.parentElement;
@@ -118,6 +120,7 @@ function renderAnnotation(annotation) {
 function addAnnotation(annotation) {
     annotations.push(annotation)
     Ox.$parent.postMessage('addAnnotation', annotation)
+    saveAnnotations()
 }
 
 function selectAnnotation(id) {
@@ -144,7 +147,11 @@ function removeAnnotation(id) {
     annotations = annotations.filter(function(annotation) {
         return annotation.id != id
     })
-    Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
+    saveAnnotations()
+}
+
+function saveAnnotations() {
+    localStorage[id + '.annotations'] = JSON.stringify(annotations)
 }
 
 function loadAnnotations(page) {