--- a/swtr/static/css/swtmaker.css
+++ b/swtr/static/css/swtmaker.css
@@ -25,6 +25,12 @@
   margin: 30px auto 0 auto;
 }
 
+#img-anno-controls {
+  display: none;
+  margin-bottom: 5px;
+  padding-bottom: 3px;
+}
+
 #annotatable-img {
   margin: 0 auto;
   max-width: 1125px;
@@ -88,6 +94,7 @@
   background-size: cover;
   display: block;
   height: 400px;
+  width: 400px;
   margin: 0 auto;
 }
 
--- a/swtr/static/js/img_swtr.js
+++ b/swtr/static/js/img_swtr.js
@@ -324,6 +324,7 @@
       var self = event.data;
       //console.log('image loaded', self);
       swtr.appView.$overlay.hide();
+      self.showImgAnnoControls();
       // reset the collection
       swtr.sweets.reset();
       anno.makeAnnotatable(swtr.imgAnnoView.img);
@@ -336,6 +337,9 @@
       console.log('error while loading image');
       swtr.appView.$overlay.hide();
       self.helpview.step(8);
+    },
+    showImgAnnoControls: function() {
+      $('#img-anno-controls').show();
     },
     initImageAnno: function() {
       // img is a jquery object which annotorious doesn't accept; instead it
--- a/swtr/static/js/lib/custom-fields-plugin.js
+++ b/swtr/static/js/lib/custom-fields-plugin.js
@@ -3,9 +3,17 @@
   var editorTemplate = _.template($('#customEdit-template').html()); //returns the HTML string for the editor
 
   annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {
+    // add the our editor interface's template to the annotorious editor
     annotorious.editor.addField(editorTemplate);
 
+    // next prepare the fields for the annotation popups..
     annotorious.popup.addField(function(annotation) {
+      // HACK! to get around disabling annotorious' default text box in the
+      // popup..
+      if(!annotation.text) {
+        $('.annotorious-popup-text').hide();
+      }
+      // this is the title
       return (annotation.title) ? '<h4>' + annotation.title + '</h4>' : '';
     });
     annotorious.popup.addField(function(annotation) {
--- a/swtr/static/js/main.js
+++ b/swtr/static/js/main.js
@@ -51,7 +51,6 @@
     },
     render: function() {
       console.log('sweetsview rendering');
-//      debugger;
       $('#sweet-list').html('<h4>These are your sweet annotations!</h4>');
       _.each(this.collection.models, function(swt) {
         if(swt.has('id')) {
@@ -95,7 +94,6 @@
     postSweets: function(event) {
       event.preventDefault();
       console.log('posting swts');
-//      debugger;
       var appView = swtr.appView;
       var self = this;
       this.helpview.step(5);
@@ -107,10 +105,15 @@
             anno.reset();
             anno.makeAnnotatable($("#annotatable-img")[0]);
             swtr.imgAnnoView.renderWith();
-            // _.each(collection, function(k) {
-            //   anno.removeAnnotation(k['how']);
-            // });
-            swtr.sweets.add(collection, {merge: true});
+            swtr.sweets.add(collection);
+            //HACK! somehow updated models from the server don't get merged
+            //with existing models, they duplicate. this is probably because of
+            //some attribute change that backbone is not able to detect the
+            //models are same. FIX for now is to update the collection with
+            //updated models from the server and delete the older ones(w/o
+            //id's)..
+            self.removeSwtsNotPosted();
+
             console.log('new swtr coll', swtr.sweets);
             appView.$overlay.hide();
             self.helpview.step(6);


@@ -229,11 +232,8 @@
     sweet: function(event) {
       event.preventDefault();
       console.log('sweeting');
-//      debugger;
       this.getSweets();
-//      debugger;
       this.showSweets();
-//      debugger;
       return false;
     },
     // function to update the urls in the UI if an image is loaded internally
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -320,8 +320,8 @@
             <div id="img-anno-controls">
               <form class="form-inline" role="form">
                 <div class="form-group">
-                  <label class="checkbox-inline">
-                    <input type="checkbox" id="toggle-anno-areas"> Show annotated areas
+                  <label class="btn btn-info">
+                      <input type="checkbox" id="toggle-anno-areas"> Show annotated areas
                   </label>
                 </div>
               </form>
@@ -329,7 +329,7 @@
           {% if url %}
             <img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
           {% else %}
-            <img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
+            <img src="" id="annotatable-img" class="img-responsive" alt="">
           {% endif %}
           </div>
         </div> <!-- end fourth row -->