diff --git a/static/js/annotation.js b/static/js/annotation.js
index 128996f..b6e9368 100644
--- a/static/js/annotation.js
+++ b/static/js/annotation.js
@@ -64,7 +64,6 @@ oml.ui.annotation = function(annotation, $iframe) {
         }
     }).append($quote).append($notes);
 
-
     function addNote() {
         if (!$notes.options('items').length) {
             that.select()
@@ -78,7 +77,6 @@ oml.ui.annotation = function(annotation, $iframe) {
         }
     }
 
-
     that.annotate = function() {
         if (oml.user.ui.showAnnotations) {
             addNote()
diff --git a/static/js/annotationFolder.js b/static/js/annotationFolder.js
index 47ad2e9..08f2f34 100644
--- a/static/js/annotationFolder.js
+++ b/static/js/annotationFolder.js
@@ -1,10 +1,9 @@
 oml.ui.annotationFolder = function() {
 
-    var ui = oml.user.ui,
-        that = Ox.Element().addClass('OxAnnotationFolder').css({
-            overflowY: 'auto',
-            overflowX: 'hidden',
-        });
+    var that = Ox.Element().addClass('OxAnnotationFolder').css({
+        overflowY: 'auto',
+        overflowX: 'hidden',
+    });
 
     return that;
 
diff --git a/static/js/annotationPanel.js b/static/js/annotationPanel.js
index 877c648..0860c0d 100644
--- a/static/js/annotationPanel.js
+++ b/static/js/annotationPanel.js
@@ -23,14 +23,14 @@ oml.ui.annotationPanel = function() {
             {id: 'addAnnotation', title: 'Add Annotation', disabled: true},
             {id: 'removeAnnotation', title: 'Remove Annotation', disabled: true},
             {},
-            {id: 'showAnnotationUsers', title: Ox._('Show Annotations'), disabled: true},
-            {group: 'show', min: 1, max: 1, items: [
+            {id: 'show', title: Ox._('Show Annotations'), disabled: true},
+            {group: 'showAnnotationUsers', min: 1, max: 1, items: [
                 {id: 'all', title: Ox._('All Annotations'), checked: ui.showAnnotationUsers == 'all'},
                 {id: 'me', title: Ox._('My Annotations'), checked: ui.showAnnotationUsers == 'me'},
             ]},
             {},
-            {id: 'sortAnnotations', title: Ox._('Sort Annotations'), disabled: true},
-            {group: 'sort', min: 1, max: 1, items: [
+            {id: 'sort', title: Ox._('Sort Annotations'), disabled: true},
+            {group: 'sortAnnotations', min: 1, max: 1, items: [
                 {id: 'position', title: Ox._('By Position'), checked: ui.sortAnnotations == 'position'},
                 {id: 'quote', title: Ox._('By Quote Text'), checked: ui.sortAnnotations == 'quote'},
                 {id: 'note', title: Ox._('By Note Text'), checked: ui.sortAnnotations == 'note'},
@@ -46,8 +46,18 @@ oml.ui.annotationPanel = function() {
     }).css({
         // borderColor: 'transparent',
         float: 'right'
-    }).appendTo($bar)
-    .bindEvent({
+    }).bindEvent({
+        change: function(data) {
+            if (data.id == 'showAnnotationUsers') {
+                var value = data.checked[0].id;
+                oml.UI.set('showAnnotationUsers', value);
+                oml.$ui.viewer.renderAnnotations();
+            } else if (data.id == 'sortAnnotations') {
+                var value = data.checked[0].id;
+                oml.UI.set('sortAnnotations', value);
+                oml.$ui.viewer.renderAnnotations();
+            }
+        },
         click: function(data) {
             var id = data.id;
             if (id == 'exportAnnotations') {
@@ -59,7 +69,7 @@ oml.ui.annotationPanel = function() {
                 })
             }
         }
-    });
+    }).appendTo($bar);
 
     var ui = oml.user.ui;
     var that = Ox.SplitPanel({
diff --git a/static/js/viewer.js b/static/js/viewer.js
index e45c4ac..1eb49ca 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -115,14 +115,10 @@ oml.ui.viewer = function() {
                             console.log('got', event, data)
                             that.triggerEvent(event, data);
                         }
-
                     }).bindEvent({
                         init: function() {
                             loadAnnotations(function(annotations) {
-                                annotations.forEach(function(data) {
-                                    var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
-                                    oml.$ui.annotationFolder.append($annotation);
-                                })
+                                that.renderAnnotations()
                                 // fixme: trigger loaded event from reader instead?
                                 setTimeout(function() {
                                     that.postMessage('addAnnotations', {
@@ -146,5 +142,13 @@ oml.ui.viewer = function() {
     that.getAnnotations = function() {
         return annotations;
     }
+    that.renderAnnotations = function() {
+        oml.$ui.annotationFolder.empty();
+        Ox.sortBy(annotations, ui.sortAnnotations);
+        annotations.forEach(function(data) {
+            var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
+            oml.$ui.annotationFolder.append($annotation);
+        })
+    }
     return that.updateElement();
 };