diff --git a/plugins/comment_paragraph/public/comment_paragraph_macro.js b/plugins/comment_paragraph/public/comment_paragraph_macro.js
index b86f13a..2ba7a42 100644
--- a/plugins/comment_paragraph/public/comment_paragraph_macro.js
+++ b/plugins/comment_paragraph/public/comment_paragraph_macro.js
@@ -71,9 +71,20 @@ jQuery(document).ready(function($) {
     var paragraphId = $(this).data('paragraph');
     hideAllCommentsExcept(paragraphId);
     hideAllSelectedAreasExcept(paragraphId);
-    $('#comment-bubble').hide();
+    $('.article-body').toggleClass('comment-paragraph-slide-left');
     $('#side_comment_' + paragraphId).toggle();
-    $('#side_comment_' + paragraphId).find().toggle();
+    
+    
+//    if($('.comment-paragraph-slide-left').size()==0){
+//      $('.article-body').addClass('comment-paragraph-slide-left');
+//      $('#side_comment_' + paragraphId).show();
+//      $('#side_comment_' + paragraphId).find().show();
+//    }else{
+//      $('.article-body').removeClass('comment-paragraph-slide-left');
+//      $('.side-comment').hide();
+//      $('.side-comment').find().hide();
+//    }
+    $('#comment-bubble').hide();
     //Loads the comments
     var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
     $.ajax({
@@ -88,6 +99,9 @@ jQuery(document).ready(function($) {
 
   $('#comment-bubble').click(function(event){
     $(this).hide();
+    if($('.comment-paragraph-slide-left').size()==0){
+      $('.article-body').addClass('comment-paragraph-slide-left');
+    }
     $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
     var url = $("#comment-bubble").data('url');
     var paragraphId = $("#comment-bubble").data("paragraphId");
@@ -107,7 +121,7 @@ jQuery(document).ready(function($) {
       paragraph = $(this).data('paragraph');
       if(paragraph != clickedParagraph){
         $(this).hide();
-        $(this).find().hide();
+        //$(this).find().hide();
       }
     });
   }
@@ -145,6 +159,11 @@ jQuery(document).ready(function($) {
   $('.comment_paragraph').mouseup(function(event) {
 
     $('#comment-bubble').hide();
+    if($('.comment-paragraph-slide-left').size() > 0){
+      $('.article-body').removeClass('comment-paragraph-slide-left');
+      $('.side-comment').hide();
+      //$('.side-comment').find().hide();
+    }
 
     //Don't do anything if there is no selected text
     if (getSelectionText().length == 0) {
diff --git a/plugins/comment_paragraph/public/style.css b/plugins/comment_paragraph/public/style.css
index 2a61392..ace34c6 100644
--- a/plugins/comment_paragraph/public/style.css
+++ b/plugins/comment_paragraph/public/style.css
@@ -7,7 +7,7 @@ div.article-comments-list-more{
 }
 
 .popBox_comment_paragraph {
-  position: absolute;
+/*  position: absolute;*/
   z-index: 2;
   background: #cccccc;
   width: 60px;
@@ -34,9 +34,6 @@ div.article-comments-list-more{
 
 .comment_paragraph{
   padding: 0px;
-  position: relative;
-  left: -20px;
-  width: 450px;
   font-weight: bold;
   text-align: justify;
 }
@@ -96,8 +93,6 @@ div[class^='comments_list_toggle_paragraph_'] {
 }
 
 div[class^='comment-paragraph-loading-'] {
- position: relative;
- left: 470px;
  z-index: 99;
 }
 
@@ -212,6 +207,7 @@ div[class^='comment-paragraph-loading-'] {
   bg-color: #b3b2d4;
 }
 
+/*
 .comment-paragraph-rowset{
   padding: 0;
   margin: 0;
@@ -225,8 +221,8 @@ div[class^='comment-paragraph-loading-'] {
 
   -webkit-flex-flow: row wrap;
   justify-content: space-around;
+}*/
 
-}
 .comment-paragraph-comments{
   background: lightblue;
   padding: 5px;
@@ -235,4 +231,19 @@ div[class^='comment-paragraph-loading-'] {
   color: white;
   font-weight: bold;
   text-align: center;
+}
+
+.single-border{
+  border-style:  solid;
+  border-width: 2px;
+}
+
+.comment-paragraph-group-comments{
+  position: absolute;
+}
+
+.comment-paragraph-slide-left{
+  position: relative;
+  width: 80%;
+  transition: 0.6s;
 }
\ No newline at end of file
diff --git a/plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb b/plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
index 6768da4..943a8f8 100644
--- a/plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
+++ b/plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
@@ -1,15 +1,19 @@
-<ul class="comments comment-paragraph-rowset">
-  <li class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
-    <%= inner_html %>
-  </li>
-
-  <li  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>"  data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
-    <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
-      <%= count %>
-    </span>
-  </li>
-  
-  <div align="center">
+<table class="comments">
+  <tr>
+    <td>
+      <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
+        <%= inner_html %>
+      </div>
+    </td>
+    <td>
+      <div  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>"  data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
+        <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
+          <%= count %>
+        </span>
+      </div>
+    </td>
+    <td>
+<div class="comment-paragraph-group-comments">
      <%=
        url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
        link_to_remote(
@@ -25,10 +29,9 @@
          :'data-url' => url_for(url)
        }
      )%>
-   </div>
-  
-   <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
-     <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
+
+  <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
+     <div class="comment-paragraph-loading-<%= paragraph_id %>">
        <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
          <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
          <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
@@ -37,7 +40,13 @@
          </div>
        </div>
      </div>
-   </div>
- </ul>
+  </div>
+</div>
+    </td>
+  </tr>
+</table>
+
+
+
 
 
--
libgit2 0.21.2