diff --git a/oml/item/icons.py b/oml/item/icons.py
index 7d96d39..e87b724 100644
--- a/oml/item/icons.py
+++ b/oml/item/icons.py
@@ -105,7 +105,7 @@ class Icons(dict):
             c.close()
             conn.close()
         except:
-            logger.debug('failed to clear icon %s', id)
+            logger.debug('failed to clear icon %s', prefix)
 
     def vacuum(self, ids):
             conn = self.connect()
diff --git a/static/js/annotation.js b/static/js/annotation.js
index d0d26b1..2a4df4d 100644
--- a/static/js/annotation.js
+++ b/static/js/annotation.js
@@ -1,14 +1,34 @@
 'use strict';
 
-oml.ui.annotation = function(data, $iframe) {
+oml.ui.annotation = function(annotation, $iframe) {
     var $arrayEditable = Ox.ArrayEditable({
         editing: true,
+        items: (annotation.comments || []).map(function(comment) {
+            comment.editable = true
+            return comment
+        }),
         type: 'textarea'
     }).css({
         minHeight: '16px'
+    }).bindEvent({
+        submit: function(data) {
+            var comment = Ox.getObjectById(annotation.comments, data.id)
+            if (comment) {
+                comment.value = data.value
+                comment.modified = (new Date).toISOString()
+            } else {
+                annotation.comments.push({
+                    created: data.created || (new Date).toISOString(),
+                    modified: (new Date).toISOString(),
+                    id: data.id,
+                    value: data.value
+                })
+            }
+            that.triggerEvent('change')
+        }
     });
     var that = Ox.Element().attr({
-        id: 'a-' + data.id
+        id: 'a-' + annotation.id
     }).addClass(
         'OxSelectable'
     ).css({
@@ -21,10 +41,10 @@ oml.ui.annotation = function(data, $iframe) {
             fontSize: '14px',
             lineHeight: '21px',
             padding: '8px'
-        }).html(Ox.encodeHTMLEntities(data.text).replace(/\n/g, '<br/>')).on({
+        }).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
             click: function(event) {
                 $iframe.postMessage('selectAnnotation', {
-                    id: data.id
+                    id: annotation.id
                 })
             }
         })
diff --git a/static/js/viewer.js b/static/js/viewer.js
index 8cb4842..848364a 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -46,6 +46,7 @@ oml.ui.viewer = function() {
     function saveAnnotations(data) {
         if (data) {
             data.created = data.created || (new Date).toISOString();
+            data.comments = data.comments || [];
             annotations.push(data);
         }
         localStorage[item + '.annotations'] = JSON.stringify(annotations)
@@ -57,6 +58,14 @@ oml.ui.viewer = function() {
         saveAnnotations()
     }
 
+    var annotationEvents = {
+        change: function() {
+            console.log('change...')
+            console.log(annotations)
+            saveAnnotations()
+        }
+    }
+
     that.updateElement = function() {
         item = ui.item;
         if (item && item.length) {
@@ -75,7 +84,7 @@ oml.ui.viewer = function() {
                         if (event == 'addAnnotation') {
                             console.log('adding', data.id)
                             saveAnnotations(data);
-                            var $annotation = oml.ui.annotation(data, $iframe)
+                            var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
                             oml.$ui.annotationFolder.append($annotation);
                             $annotation.annotate();
                         } else if (event == 'removeAnnotation') {
@@ -93,7 +102,7 @@ oml.ui.viewer = function() {
                         init: function() {
                             loadAnnotations(function(annotations) {
                                 annotations.forEach(function(data) {
-                                    var $annotation = oml.ui.annotation(data, $iframe)
+                                    var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
                                     oml.$ui.annotationFolder.append($annotation);
                                 })
                                 // fixme: trigger loaded event from reader instead?
diff --git a/static/reader/pdf.js b/static/reader/pdf.js
index b4bbed3..6e095f1 100644
--- a/static/reader/pdf.js
+++ b/static/reader/pdf.js
@@ -144,7 +144,7 @@ function removeAnnotation(id) {
     annotations = annotations.filter(function(annotation) {
         return annotation.id != id
     })
-    Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
+    Ox.$parent.postMessage('removeAnnotation', {id: id})
 }
 
 function loadAnnotations(page) {