diff --git a/sandbox/annotate.css b/sandbox/annotate.css
index 8720de9df5..e621f20ad8 100644
--- a/sandbox/annotate.css
+++ b/sandbox/annotate.css
@@ -10,14 +10,14 @@
 .annotate.unassigned .arrow-top:after, .annotate.unassigned .arrow-bottom:after, 
 .annotate.unassigned .arrow-left:after, .annotate.unassigned .arrow-right:after {
   background: white;
-  color: #909090;
-  border: 1px solid #909090;
+  color: #ff9900;
+  border: 1px solid #ff9900;
 }
 
 .annotate {
   display: inline-block;
   position: absolute;
-  padding: 2px 10px;
+  padding: 1px 3px 1px 1px;
   border-radius: 1px;
   text-align: center;
   line-height:14px;
diff --git a/sandbox/annotate.html b/sandbox/annotate.html
index f12a3a3d19..702b627534 100644
--- a/sandbox/annotate.html
+++ b/sandbox/annotate.html
@@ -39,7 +39,9 @@ a {
 <script src="annotate.js"></script>
 <script>
     $(function() {
-        $("figure.annotated figcaption ul li").annotate();
+        $("figure.annotated").each(function(){
+            $(this).find("figcaption ul li").annotate(this);
+        });
     });
 </script>
 <!--<![endif]-->
@@ -47,15 +49,30 @@ a {
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
 </head>
 <body>
+    <h1>Annotations for Key Selection</h1>
     <figure class="annotated">
         <img src="spa504g-front.jpg" alt="Cisco SPA504g" />
         <figcaption>
 	        <b>Line/Key Selection:</b>
             <ul>
-                <li class="assigned" style="top:71px; left:483px;" data-pos="top"><a href="#">test1xxxx@example.org</a></li>
-                <li class="unassigned" style="top:93px; left:493px;" data-pos="right"><i class="fa fa-plus-square-o"></i><a href="#"> Unassigned</a></li>
-                <li class="assigned" style="top:109px; left:473px;" data-pos="left"><a href="#">test3xxxx@example.org</a></li>
-                <li class="unassigned" style="top:130px; left:483px;" data-pos="bottom"><a href="#">Assign</a></li>
+                <li class="assigned" style="top:71px; left:483px;" data-pos="top"><a href="#"><i class="fa fa-minus-square fa-fw"></i> test1xxxx@example.org</a></li>
+                <li class="unassigned" style="top:93px; left:493px;" data-pos="right"><a href="#"><i class="fa fa-plus-square fa-fw"></i> Assign Subscriber</a></li>
+                <li class="assigned" style="top:109px; left:473px;" data-pos="left"><a href="#"><i class="fa fa-minus-square fa-fw"></i> test3xxxx@example.org</a></li>
+                <li class="unassigned" style="top:130px; left:483px;" data-pos="bottom"><a href="#"><i class="fa fa-plus-square fa-fw"></i> Assign Subscriber</a></li>
+            </ul>
+	        <i><a href="#">All Annotations Test</a></i>
+      </figcaption>
+    </figure>
+    <div style="clear:both"></div>
+    <figure class="annotated">
+        <img src="spa504g-front.jpg" alt="Cisco SPA504g" />
+        <figcaption>
+	        <b>Line/Key Selection:</b>
+            <ul>
+                <li class="assigned" style="top:76px; left:473px;" data-pos="left"><a href="#"><i class="fa fa-minus-square fa-fw"></i> test1xxxx@example.org</a></li>
+                <li class="unassigned" style="top:93px; left:493px;" data-pos="right"><a href="#"><i class="fa fa-plus-square fa-fw"></i> Assign Subscriber</a></li>
+                <li class="assigned" style="top:109px; left:473px;" data-pos="left"><a href="#"><i class="fa fa-minus-square fa-fw"></i> test3xxxx@example.org</a></li>
+                <li class="unassigned" style="top:127px; left:493px;" data-pos="right"><a href="#"><i class="fa fa-plus-square fa-fw"></i> Assign Subscriber</a></li>
             </ul>
 	        <i><a href="#">Cisco SPA504G</a></i>
       </figcaption>
diff --git a/sandbox/annotate.js b/sandbox/annotate.js
index 34c1cd4f47..357fcc3c65 100644
--- a/sandbox/annotate.js
+++ b/sandbox/annotate.js
@@ -1,6 +1,8 @@
 (function( $ ) {
 
-  $.fn.annotate = function(el) {
+  $.fn.annotate = function(ctx) {
+
+    console.log("ctx is ", ctx);
 
     var $annotate,
       $body = $('body'),
@@ -13,29 +15,29 @@
       if(pos == undefined) pos = "top";
       console.log("pos at " + i + " is ", pos);
 
-      var $annotate = $('<div class="annotate ' + $el.attr("class") + '" data-annotate="' + i + '">' + $el.html() + '<div class="arrow-' + pos + '"></div></div>').appendTo("body");
+      var $annotate = $('<div class="annotate ' + $el.attr("class") + '" data-annotate="' + i + '">' + $el.html() + '<div class="arrow-' + pos + '"></div></div>');
+      $(ctx).append($annotate);
+
       $el.html('');
 
       var linkPosition = $el.position();
-      console.log(linkPosition);
-      console.log("w="+$annotate.outerWidth()+",h="+$annotate.outerHeight());
       var top, left;
       switch(pos) {
       	case "top":
-          top = linkPosition.top + 10 - $annotate.outerHeight();
-          left = linkPosition.left + 48 - $annotate.outerWidth()/2;
+          top = linkPosition.top - 5 - $annotate.outerHeight();
+          left = linkPosition.left - 9 - $annotate.outerWidth()/2;
 	  break;
       	case "bottom":
-          top = linkPosition.top + 3 + $annotate.outerHeight();
-          left = linkPosition.left + 48 - $annotate.outerWidth()/2;
+          top = linkPosition.top - 11 + $annotate.outerHeight();
+          left = linkPosition.left - 9 - $annotate.outerWidth()/2;
 	  break;
       	case "left":
-          top = linkPosition.top + 17 - ($annotate.outerHeight()/2);
-          left = linkPosition.left + 41 - $annotate.outerWidth();
+          top = linkPosition.top - ($annotate.outerHeight()/2);
+          left = linkPosition.left - 25 - $annotate.outerWidth();
 	  break;
       	case "right":
-          top = linkPosition.top + 17 - ($annotate.outerHeight()/2);
-          left = linkPosition.left + 55;
+          top = linkPosition.top - ($annotate.outerHeight()/2);
+          left = linkPosition.left + 5;
 	  break;
       }
       $annotate.css({
