--- a/swtr/static/css/annotorious.css
+++ b/swtr/static/css/annotorious.css
@@ -1,5 +1,17 @@
 /** Global item styles **/
+.custom-style-popup {
+    list-style: none;
+    padding-left: 0px;
+}
 
+.custom-popup-line {
+  border-top: 1px solid #ccc;
+    line-height: 200%;
+    font-size:14px;
+    font-family: Arial, Verdana, Sans;
+    color: #000;
+
+}
 .annotorious-opacity-fade {
   -moz-transition-property: opacity;
   -moz-transition-duration: 0.5s;
@@ -157,7 +169,7 @@
 }
 
 .annotorious-popup-field {
-  border-top:1px solid #ccc;
+  /*border-top:1px solid #ccc;*/
   margin:6px 0px 0px 0px;
   padding-top:2px;
 }
@@ -186,7 +198,7 @@
   border-color:#ccc;
   line-height: normal;
   background-color:#fff;
-  width:240px;
+  width:100%;
   height:50px;
   outline:none;
   font-family:Verdana, Arial;
--- a/swtr/static/js/lib/custom-fields-plugin.js
+++ b/swtr/static/js/lib/custom-fields-plugin.js
@@ -1,20 +1,18 @@
 annotorious.plugin.CustomFields = function(opt_config_options) {
 
-
 annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {
-      var textTemplate= _.template($('#button-template').html());
-                    annotorious.editor.addField(textTemplate);
-      var popupTemplate = _.template($('#popup-template').html());
-        annotorious.popup.addField(function(annotation){
-          var container = document.createElement('div');
-         var el = document.createElement('span');
-         el.href = '#';
-         el.className = 'annotorious-popup-text';
-         console.log(annotation.text);
-         el.innerHTML= annotation.text; 
-         container.appendChild(el);
-         return container;          
-         
+      var dropDownTemplate= _.template($('#dropdown-template').html()); // creates the HTML element for dropdown - from template in index.html
+                    annotorious.editor.addField(dropDownTemplate);  // add dropdown to editor UI widget
+        annotorious.popup.addField( function(annotation){
+      var popupTemplate = _.template($('#popup-template').html()); //created a popup template - yet to find how to bind it to newanno
+      if(annotation.text1 != undefined) {  
+      //console.log(annotation.text1.Comment); annotation.text is Obj - can
+      //access each element Comment, tags, links.. 
+         return popupTemplate(annotation.text1); 
+      }
+      else {
+        return ''; 
+      }
         });
         }
 }
--- a/swtr/static/js/swtmaker.js
+++ b/swtr/static/js/swtmaker.js
@@ -151,7 +151,8 @@
           _.each(swtr.sweets.models, function(swt) {
             if(!_.has(swt.get('how'), 'editable')) {
               swt.get('how')['editable'] = false;
-              swt.get('how').text += '\n - by ' + swt.get('who');
+              console.log(swt.get('how').text.Comment);
+              swt.get('how').text +=  '\n - by ' + swt.get('who');
             }
             console.log(swt.get('how'));
             anno.addAnnotation(swt.get('how'));


@@ -181,22 +182,22 @@
       'click #sweet': 'sweet',
       'click #signin-credentials': 'getSignInCredentials',
       'click #setbox': 'showHide',
-      'change .form-control': 'button_custom',
-      'mouseup .annotorious-editor-button-save': 'add_new_anno'
+      'change #custom-dropdown ': 'getFormValue',
+      'mouseup .annotorious-editor-button-save': 'addNewAnno'
     },
     initialize: function() {
       //var allElements = $('body *');
       this.helpview = new HelpView();
       this.sweetsview = new SweetsView({collection: swtr.sweets});
       anno.addHandler('onAnnotationCreated', this.showSwtHelp);
-      anno.addHandler('onannotationupdated', this.showswthelp);
+      anno.addHandler('onannotationupdated', this.showSwtHelp);
       anno.addHandler('onSelectionStarted', function(annotation) {
         anno.hideAnnotations();});
       anno.addHandler('onSelectionCompleted', function(annotation) {
         anno.showAnnotations();
       });
-      anno.addPlugin('CustomFields', this.showSwtHelp); 
-      anno.addHandler('onSelectionCompleted', this.setShape);  
+      anno.addPlugin('CustomFields', this.showSwtHelp);
+      anno.addHandler('onSelectionCompleted', this.getShape);  
       this.$overlay = $('#app-overlay');
       this.$img = $('#annotatable-img');
       this.imgURL = this.$img.attr('src');

@@ -239,9 +240,15 @@
             swtr.sweets.add(data);
             _.each(data, function(swt) {
               swt.how['editable'] = false;
-              swt.how.text += '\n - by ' + swt.who;
+              if(typeof swt.how.text === 'object') {
+              swt.how.text1 = swt.how.text;
+              swt.how.text =  '\n - by ' + swt.who;
+              } else {
+                swt.how.text1 = undefined;
+                swt.how.text += '\n -by ' + swt.who;  
+              }
+
               anno.addAnnotation(swt.how);
-              console.log('swt.how = ', swt.how);
             });
             swtr.appView.$overlay.hide();
             swtr.appView.helpview.step(2);
@@ -270,7 +277,7 @@
         swtr.sweets.add({
           who: swtr.who,
           where: anno.src,
-          how: newanno  //mysterious link to create the sweet with new anno attributes, tags, links, labels
+          how: anno  //mysterious link to create the sweet with new anno attributes, tags, links, labels
         });
       });
     },









@@ -297,48 +304,53 @@
 //to obtain shapes object, declaring annotation in global scope - TODO refactor
 //code to find better way to do this.
 
-    setShape: function(annotation) {                  
-      $('.annotorious-editor-text').hide();
-      $('.annotorious-editor').css("width", "100%");
-       window.annotation=annotation;
-       annotation.text = [];
+    getShape: function(annotation) {                  
+     $('.annotorious-editor-text').slideUp();
+     $('.annotorious-editor').css("width", "100%");
+       window.annotation=annotation; // to use annotation.shape in newanno
+       annotation.text = {}; // creating new text object - to contain comments, labels, links and tags
       },
 //to create new annotation object
-    inputStore: function(opt) {
-      var temp = opt;
+    annoTemplate: function(opt) {
+      var annoText = opt;
       var src = $('#img-url-input').val();
-      this.newanno = {'src':src, 'text':temp, 'shapes': [{'type':annotation.shape.type, 'geometry':{'x':annotation.shape.geometry.x, 'y':annotation.shape.geometry.y, 'width':annotation.shape.geometry.width, 'height':annotation.shape.geometry.height}},], 'context':window.location.origin};
-
+      this.newanno = {'src':src, 'text':annoText, 'shapes': [{'type':annotation.shape.type, 'geometry':{'x':annotation.shape.geometry.x, 'y':annotation.shape.geometry.y, 'width':annotation.shape.geometry.width, 'height':annotation.shape.geometry.height}},], 'context':window.location.origin};
     },
 
 //to add the final annotation
-
 //save button - event bind
-    add_new_anno: function(event){ 
-        var $selected = $('select option:selected');
-        var tempinput = $selected.text()+': '+$('.annotorious-editor textarea').val();
-        this.newanno.text.push(tempinput);
-        var newinput = this.newanno.text.toString();
-        this.newanno.text = newinput;
-        console.log('this.newanno = ', this.newanno);
-        //this.to_Add(this.newanno);
+    addNewAnno: function(event){ 
+        var $selected = $('select option:selected').text();
+        var textInput = $('.annotorious-editor textarea').val();
+        this.newanno.text[$selected] = textInput;
         var newanno = this.newanno;
-        window.newanno = newanno;
+        anno.addAnnotation(newanno);
       },
+    /*addNewAnno: function(event){ // function for form input UI 
+        var tags = $('#tags').val();
+        var label = $('#label').val();
+        var link = $('#links').val();
+        var text = $('.annotorious-editor textarea').val();
+        var finalInput = ' Label: '+label+' Comment: '+text+' Tags: '+tags+' Links: '+link;
+        //this.annoTemplate(label, text, tags, link);
+      //  this.annoTemplate(label, text, tags, link);
+      var src = $('#img-url-input').val();
+      var newanno = {'src':src, 'text':finalInput, 'shapes': [{'type':annotation.shape.type, 'geometry':{'x':annotation.shape.geometry.x, 'y':annotation.shape.geometry.y, 'width':annotation.shape.geometry.width, 'height':annotation.shape.geometry.height}},], 'context':window.location.origin};
+      console.log(newanno);
+        anno.addAnnotation(newanno);
+      },*/
 //dropdown event
-    button_custom: function(event) {
-      $('.annotorious-editor-text').show();
+    getFormValue: function(event) {
+      var annoForm = $('.annotorious-editor-text');
+      annoForm.slideDown();
       var $selected = $('select option:selected');
-      var tempinput = $selected.prev().text()+ ': '+$('.annotorious-editor-text').val();
-      if(tempinput === "Choose an Option: "){
-        console.log('');
+      var textInput = annoForm.val();
+      if(textInput) {
+      annotation.text[$selected.prev().text()] = textInput;
       }
-      else {
-      annotation.text.push(tempinput);
-      }
-      this.inputStore(annotation.text);
-      $('.annotorious-editor-text:first').val("");
-      $('.annotorious-editor-text:first').attr('placeholder', 'Add a '+$selected.text());
+      this.annoTemplate(annotation.text);
+      annoForm.val('');
+      annoForm.attr('placeholder', 'Add '+$selected.text());
     },
 
 
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -93,17 +93,34 @@
           <input type="password" class="form-control" id="password" placeholder="Password">
         </div>
       </script>
-      <script type="text/template" id="button-template">
-        <select class="form-control">
+      <script type="text/template" id="dropdown-template">
+        <select class="form-control" id="custom-dropdown">
           <option id="">Choose an Option</option>
           <option id="comment" >Comment</option>
-          <option id="label" >Label</option>
+          <option id="title" >Title</option>
           <option id="tags">Tags</option>
           <option id="links">Links</option>
         </select>
       </script>
+      <!-- script type="text/template" id="dropdown-template">
+        <form class="form-control" id="custom-dropdown">
+        <textarea class="annotorious-editor-text goog-textarea"
+          placeholder="Add Label" id="label"></textarea>
+        <textarea class="annotorious-editor-text goog-textarea"
+          placeholder="Add Tags" id="tags"></textarea>
+        <textarea class="annotorious-editor-text goog-textarea"
+          placeholder="Add Links" id="links"></textarea>
+        </form>
+      </script-->
       <script type="text/template" id="popup-template">
-        <span class="annotorious-popup-text"> </span>
+        <span class="annotorious-popup-text">
+          <ul class="custom-style-popup">
+            <li class="custom-popup-line" ><span>Label: </span><%= Label %></li> 
+            <li class="custom-popup-line"><span>Comment: </span><%= Comment %></li>
+            <li class="custom-popup-line"><span>Tags: </span><%= Tags %></li>
+            <li class="custom-popup-line"><span>Related Links: </span><%= Links %></li>
+            </ul>
+          </span>
       </script>
   </body>
 </html>