diff --git a/public/comment_paragraph_macro.js b/public/comment_paragraph_macro.js
index 67ffe36..397a403 100644
--- a/public/comment_paragraph_macro.js
+++ b/public/comment_paragraph_macro.js
@@ -2,10 +2,18 @@ var comment_paragraph_anchor;
 var lastParagraph = [];
 var lastSelectedArea = [];
 var sideCommentForm=null;
+var firstTimeOpenParagraph = Array();
+var commentParagraphIds = Array();
 
 function getIdCommentParagraph(paragraphId){
   var idx = paragraphId.lastIndexOf('_');
-  return paragraphId.substring(idx+1, paragraphId.length)
+  return paragraphId.substring(idx+1, paragraphId.length);
+}
+
+function teleportToBody(element){
+    var $ = jQuery;
+    element.detach();
+    $('body').append(element);
 }
 
 function moveCommentsToTheSide(paragraphId, mouseX, mouseY){
@@ -36,16 +44,12 @@ function buildSideCommentBox(id, commentCount ){
   //Search to top of the respective paragraph
   var top = $('#comment_paragraph_' + id).offset().top;
   var right = $('#comment_paragraph_' + id).offset().left + $('#comment_paragraph_' + id).width() + 20;
-  var height = $('#comment_paragraph_' + id).height() + 20;
-  console.log(top);
-  var boxComments="\
-  <div class='side-comments-box'\n\
-       id='side_comment_box_" + id + "' style='top: " + top + "px; left: " + right + "px; height: " + height + "px; ' >\n\
-      <div class='triangle-right'>+</div> \n\
-      Icons and formzczk<BR> asakdlsk<BR> ajsijiasjia<BR> jkpoafdpasj<BR>papdiasp <BR> \n\\n\
-      Icons and formzczk<BR> asakdlsk<BR> ajsijiasjia<BR> jkpoafdpasj<BR>papdiasp <BR> \n\\n\\n\
-      Icons and formzczk<BR> asakdlsk<BR> ajsijiasjia<BR> jkpoafdpasj<BR>papdiasp <BR> \n\\n\
-</div>"; 
+  
+  var boxComments="\n\
+    <div class='side-comments-counter'\n\
+        id='side_comment_counter_" + id + "' style='top: " + top + "px; left: " + (right - 20) + "px;'  >+</div> \n\
+    </div>";
+    //<div class='side-comments-box'  id='side_comment_box_" + id + "' style='top: " + top + "px; left: " + right + "px;' ></div>"; 
   return boxComments;
 }
 
@@ -54,36 +58,97 @@ function putSideComments(){
 
   $(".comment-count").each(function(index){
     //Include all comments except the last
-    var id = $(this).attr('id');
-    if(id != undefined ){
-      var n = id.lastIndexOf('-');
-      var id_number =  id.substr(n + 1, id.length - n +1);
-//      console.log(index);
-//      console.log(this);
-//      console.log($(this).text());
+    var idElement = $(this).attr('id');
+    if(idElement != undefined ){
+      var n = idElement.lastIndexOf('-');
+      var id_number =  idElement.substr(n + 1, idElement.length - n +1);
+      firstTimeOpenParagraph[id_number] = true;
+      commentParagraphIds.push(id_number);
       var commentCount = $(this).text().trim();
       commentCount = parseInt(commentCount);
       var box = buildSideCommentBox(id_number, commentCount);
       $('body').append(box);
+      if(commentCount > 0){
+        $('#side_comment_counter_' + id_number).text(commentCount);
+//        $('#side_comment_counter_' + id_number).show();
+      }
+      $('#side_comment_counter_' + id_number).show();
     }
-    
   });      
-  
-  
 }
 
+
+
 jQuery(document).ready(function($) {
+  //Hides old style ballons
+  $("img[alt|=Comments]").hide();
+  //Hides old style counter
+  $(".comment-count").hide();
+  
   rangy.init();
   cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
   
   //Add marked text bubble
   $("body").append('\
-      <a href="#" id="comment-bubble" style="width:120px;height:105px;text-decoration: none">\
+      <a href="#" id="comment-bubble" style="width:120px;text-decoration: none">\
           <div align="center"  class="triangle-right" >Comentar<br>+</div>\
       </a>');
   //buildSideCommentBlock();
+  //
   //Creates a side bubble for each paragraph with the amount of comments
   putSideComments();
+
+  $('.comment_paragraph').mouseover(function(){
+    var paragraphId = getIdCommentParagraph($(this)[0].id);
+    $('#side_comment_counter_' + paragraphId).show();
+  });
+  
+  $('.comment_paragraph').mouseleave(function(){
+    var paragraphId = getIdCommentParagraph($(this)[0].id);
+//    if($('#side_comment_counter_' + paragraphId).text() == '+'){
+//      $('#side_comment_counter_' + paragraphId).hide();
+//    }
+  });
+  
+  $('.side-comments-counter').click(function(){
+    hideAllComments();
+    var paragraphId = getIdCommentParagraph($(this).attr('id'));
+    $('#side_comment_box_' + paragraphId).toggle();  
+    //Loads the comments
+    var url = $('#link_to_ajax_comments_' + paragraphId).data('url'); 
+    $('.comments_list_toggle_paragraph_' + paragraphId).show();
+    if(firstTimeOpenParagraph[paragraphId]===true ){
+      firstTimeOpenParagraph[paragraphId]=false;
+      $.ajax({
+        dataType: "script",
+        url: url
+      }).done(function() {
+        var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
+        button.click();
+        //teleportToBody($('.comments_list_toggle_paragraph_' + paragraphId));
+        var top = $('#comment_paragraph_' + paragraphId).offset().top;
+        var right = $('#comment_paragraph_' + paragraphId).offset().left + $('#comment_paragraph_' + paragraphId).width();
+        top += -120;
+        right+= -500;
+        $('.comments_list_toggle_paragraph_' + paragraphId).css('position','absolute');
+        $('.comments_list_toggle_paragraph_' + paragraphId).css('top',top);
+        $('.comments_list_toggle_paragraph_' + paragraphId).css('left',right);
+        $('.comments_list_toggle_paragraph_' + paragraphId).css('background','#FFFFFF');
+        $('label[for|=comment_title]').hide();
+        $('label[for|=comment_body]').css({top: -30, left: +20, position:'relative'});
+        $('.comment_form p').hide();
+        $('.comments_list_toggle_paragraph_' + paragraphId).width('250px');
+      });
+    }
+  });
+
+   
+  function hideAllComments(){
+    for (index = 0; index < commentParagraphIds.length; ++index) {
+      $('.comments_list_toggle_paragraph_' + commentParagraphIds[index]).hide();
+    }
+  } 
+
   
   $("#comment-bubble").hide();
   //Undo previous highlight from the paragraph
@@ -98,10 +163,11 @@ jQuery(document).ready(function($) {
     }
   });
   
-  $('#comment-bubble').mouseleave(function(){
-    //this.hide();
-    $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
-  });
+  
+//  $('#comment-bubble').mouseleave(function(){
+//    this.hide();
+//    $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
+//  });
  
    //highlight area from the paragraph
   $('.comment_paragraph').mouseup(function(event){
@@ -134,32 +200,30 @@ jQuery(document).ready(function($) {
     rootElement.focus();
   });
   
-
-  
  
-  $('#comment-bubble').click(function(event){
-   // this.hide();
-    $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
-    var url = $("#comment-bubble").data('url');
-    var paragraphId = $("#comment-bubble").data("paragraphId");
-
-    $('.comments_list_toggle_paragraph_' + paragraphId).show();
-    $.ajax({
-      dataType: "script",
-      url: url
-    }).done(function() {
-      
-
+//  $('#comment-bubble').click(function(event){
+//    this.hide();
+//    hideAllComments();
+//    $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
+//    var url = $("#comment-bubble").data('url');
+//    var paragraphId = $("#comment-bubble").data("paragraphId");
+//
+//    $('.comments_list_toggle_paragraph_' + paragraphId).show();
+//    $.ajax({
+//      dataType: "script",
+//      url: url
+//    }).done(function() {
+//      var button = $('#page-comment-form-' + paragraphId + ' a').get(0)
 //      button.click();
-////        window.location="#page-comment-form-" + paragraphId;
-//      //Move comments
-//      sideCommentForm = $('#side_comment_form');
-//      sideCommentForm.hide();
-//      sideCommentForm = $('.comment_form').first();
-//      sideCommentForm.attr("id",'side_comment_form');
-      moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
-    });
-  });
+//      window.location="#page-comment-form-" + paragraphId;
+////      //Move comments
+////      sideCommentForm = $('#side_comment_form');
+////      sideCommentForm.hide();
+////      sideCommentForm = $('.comment_form').first();
+////      sideCommentForm.attr("id",'side_comment_form');
+////      moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
+//    });
+//  });
   
 
   function processAnchor(){
@@ -174,12 +238,19 @@ jQuery(document).ready(function($) {
 
     comment_paragraph_anchor = anchor;
     var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id;
-    $.getJSON(url, function(data) {
-      if(data.paragraph_id!=null) {
-        var button = $('div.comment_paragraph_'+ data.paragraph_id + ' a');
-        button.click();
-        $.scrollTo(button);
-      }
+    $.ajax({
+      dataType: "script",
+      url: url
+    }).done(function() {
+      var button = $('#page-comment-form-' + comment_id + ' a').get(0)
+      button.click();
+////        window.location="#page-comment-form-" + paragraphId;
+//      //Move comments
+//      sideCommentForm = $('#side_comment_form');
+//      sideCommentForm.hide();
+//      sideCommentForm = $('.comment_form').first();
+//      sideCommentForm.attr("id",'side_comment_form');
+//      moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
     });
   }
  
diff --git a/public/style.css b/public/style.css
index d14365d..e11c793 100644
--- a/public/style.css
+++ b/public/style.css
@@ -32,6 +32,10 @@ div.article-comments-list-more{
   background: #FFFF66; /* Gecko Browsers */
 }
 
+.comment_paragraph{
+    padding: 0px;
+}
+
 .triangle-right {
    position:relative;
    padding:15px;
@@ -61,17 +65,63 @@ div.article-comments-list-more{
 }
 
 
-.side-comments-box{
+.side-comments-counter{
+   width: 20px;
+   top: 10px;
+   border-style: solid;
+   border-width: 1px;
+   position: absolute;
+   left: -5px;
+   background: #075698;
+   z-index: 199;
+   color: #FFFFFF;
+   display: none;
+   padding: 5px;
+}
+
+#comment_title{
+    display: none;
+}
+
+div[class^='comments_list_toggle_paragraph_'] {
+   border-style: solid;
+   border-width: 1px;
+   border-color: black;
+   padding: 5px;
+}
+
+
+
+/*.comment-details{
+    width: 365px;
+}*/
+
+/*.side-comments-text{
+    word-wrap: break-word;
+}*/
+
+/*.side-comments-box{
    position: absolute;
    top: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    z-index: 99;
-   width: 200px;
+   width: 350px;
+   height: auto;
    overflow-y: auto;
-}
+   display: none;
+   background: #FFFFFF;
+}*/
 
-.side-comments-counter{
-    width: 20px;
-}
\ No newline at end of file
+
+/*
+element.style {
+position: relative;
+right: -442px;
+width: 365px;
+top: -56px;
+background: gray;
+border: 1px solid;
+}
+*/
--
libgit2 0.21.2