diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 939705c51..19c081b54 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -53,8 +53,8 @@
 //= require cocoon
 //= require legislation
 //= require legislation_allegations
-//= require legislation_annotatable
 //= require custom
+//= require legislation_annotatable
 
 var initialize_modules = function() {
   App.Comments.initialize();
diff --git a/app/assets/javascripts/custom.js b/app/assets/javascripts/custom.js
index 6c880b3a9..50903021a 100644
--- a/app/assets/javascripts/custom.js
+++ b/app/assets/javascripts/custom.js
@@ -1,7 +1,6 @@
 // Overrides and adds customized javascripts in this file
-// Read more on documentation: 
+// Read more on documentation:
 // * English: https://github.com/consul/consul/blob/master/CUSTOMIZE_EN.md#javascript
 // * Spanish: https://github.com/consul/consul/blob/master/CUSTOMIZE_ES.md#javascript
 //
-//
 
diff --git a/app/assets/javascripts/legislation_annotatable.js.coffee b/app/assets/javascripts/legislation_annotatable.js.coffee
index f1df2927a..dd861c6ef 100644
--- a/app/assets/javascripts/legislation_annotatable.js.coffee
+++ b/app/assets/javascripts/legislation_annotatable.js.coffee
@@ -19,7 +19,23 @@ App.LegislationAnnotatable =
         annotation_url: $(event.target).closest(".legislation-annotatable").data("legislation-annotatable-base-url")
         offset: $(event.target).offset()["top"]
 
+  customShow: (position) ->
+    $(@element).html ''
+    # Clean comments section and open it
+    $('#comments-box').html ''
+    App.LegislationAllegations.show_comments()
 
+    annotation_url = $('[data-legislation-annotatable-base-url]').data('legislation-annotatable-base-url')
+    $.ajax(
+      method: 'GET'
+      url: annotation_url + '/annotations/new'
+      dataType: 'script').done (->
+        $('#new_annotation #annotation_quote').val(@annotation.quote)
+        $('#new_annotation #annotation_ranges').val(JSON.stringify(@annotation.ranges))
+    ).bind(this)
+
+  editorExtension: (editor) ->
+    editor.show = App.LegislationAnnotatable.customShow
 
   scrollToAnchor: ->
     annotationsLoaded: (annotations) ->
@@ -62,7 +78,11 @@ App.LegislationAnnotatable =
             ann["legislation_draft_version_id"] = ann_id
             ann.permissions = ann.permissions || {}
             ann.permissions.admin = []
-        .include(annotator.ui.main, { element: this, viewerExtensions: [App.LegislationAnnotatable.viewerExtension] })
+        .include(annotator.ui.main, { 
+          element: this, 
+          viewerExtensions: [App.LegislationAnnotatable.viewerExtension],
+          editorExtensions: [App.LegislationAnnotatable.editorExtension]
+        })
         .include(App.LegislationAnnotatable.scrollToAnchor)
         .include(annotator.storage.http, { prefix: base_url, urls: { search: "/annotations/search" } })
 
diff --git a/app/controllers/legislation/annotations_controller.rb b/app/controllers/legislation/annotations_controller.rb
index f1c4e4401..861eb9d14 100644
--- a/app/controllers/legislation/annotations_controller.rb
+++ b/app/controllers/legislation/annotations_controller.rb
@@ -2,6 +2,7 @@ class Legislation::AnnotationsController < ApplicationController
   skip_before_action :verify_authenticity_token
 
   before_action :authenticate_user!, only: [:create]
+  before_action :convert_ranges_parameters, only: [:create]
 
   load_and_authorize_resource :process
   load_and_authorize_resource :draft_version, through: :process
@@ -44,6 +45,13 @@ class Legislation::AnnotationsController < ApplicationController
     @annotation = Legislation::Annotation.find(params[:annotation_id])
   end
 
+  def new
+    respond_to do |format|
+      format.js
+    end
+  end
+
+
   private
 
     def annotation_params
@@ -58,4 +66,11 @@ class Legislation::AnnotationsController < ApplicationController
                  "legislation_draft_version_id": @draft_version.id
     end
 
+    def convert_ranges_parameters
+      if params[:annotation] && params[:annotation][:ranges]
+        params[:annotation][:ranges] = JSON.parse(params[:annotation][:ranges])
+      end
+    rescue JSON::ParserError
+    end
+
 end
diff --git a/app/views/legislation/annotations/_form.html.erb b/app/views/legislation/annotations/_form.html.erb
new file mode 100644
index 000000000..81605e648
--- /dev/null
+++ b/app/views/legislation/annotations/_form.html.erb
@@ -0,0 +1,31 @@
+<div class="comment-header">
+  <span class="icon-comment" aria-hidden="true"></span>
+  <div class="comment-number"><%= t('legislation.annotations.comments.comments_count', count: 0) %></div>
+  <%= link_to '#' do %>
+    <span class="icon-expand" aria-hidden="true"></span>
+  <% end %>
+</div>
+
+<div class="comments-wrapper">
+  <div class="comment-input">
+    <%= form_for [@process, @draft_version, Annotation.new], url: legislation_process_draft_version_annotations_path(@process, @draft_version), remote: true do |f| %>
+      <%= f.text_area :text, autofocus: true %>
+
+      <div class="comment-actions">
+        <a class="cancel-comment" href="#"><%= t('legislation.annotations.comments.cancel') %></a>
+        <%= f.submit t('legislation.annotations.comments.publish_comment'), class: 'button strong publish-comment' %>
+        <% if false %>
+          <a class="button strong publish-comment" title="<%= t('legislation.annotations.comments.publish_comment') %>" href="#"><%= t('legislation.annotations.comments.publish_comment') %></a>
+        <% end %>
+      </div>
+
+      <%= f.hidden_field :quote %>
+      <%= f.hidden_field :ranges %>
+    <% end %>
+  </div>
+
+  <div class="comment-footer">
+    <a class="button strong" title="Ver todos" href="#">Ver todos</a>
+  </div>
+</div>
+
diff --git a/app/views/legislation/annotations/new.js.erb b/app/views/legislation/annotations/new.js.erb
new file mode 100644
index 000000000..9b719814c
--- /dev/null
+++ b/app/views/legislation/annotations/new.js.erb
@@ -0,0 +1,2 @@
+$("#comments-box").html("<%= j render('form') %>");
+
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 760fa67c8..09eac149c 100755
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -235,6 +235,8 @@ en:
         replies_count:
           one: "%{count} reply"
           other: "%{count} replies"
+        cancel: Cancel
+        publish_comment: Publish Comment
       index:
         title: Comments
         comments_about: Comments about
diff --git a/config/locales/es.yml b/config/locales/es.yml
index 81716214b..1a9626cc6 100755
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -235,6 +235,8 @@ es:
         replies_count:
           one: "%{count} respuesta"
           other: "%{count} respuestas"
+        cancel: Cancelar
+        publish_comment: Publicar Comentario
       index:
         title: Comentarios
         see_in_context: Ver en contexto