diff --git a/app/assets/images/annotator_help.gif b/app/assets/images/annotator_help.gif
index edad9de26..b0ddcf435 100644
Binary files a/app/assets/images/annotator_help.gif and b/app/assets/images/annotator_help.gif differ
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 5105a459a..30332d49b 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -289,7 +289,6 @@
   padding: rem-calc(32) 0;
 
   .draft-chooser {
-    margin-bottom: rem-calc(32);
 
     h3 {
       vertical-align: top;
diff --git a/app/views/legislation/annotations/index.html.erb b/app/views/legislation/annotations/index.html.erb
index 56571cb36..a67eaa181 100644
--- a/app/views/legislation/annotations/index.html.erb
+++ b/app/views/legislation/annotations/index.html.erb
@@ -9,6 +9,8 @@
     <%= render 'slim_version_chooser', process: @process, draft_version: @draft_version %>
   </div>
 
+  <%= render 'legislation/processes/help_gif' %>
+
   <div class="small-12 medium-8 column row legislation-comments end">
 
     <% @annotations.each do |annotation| %>
diff --git a/app/views/legislation/annotations/show.html.erb b/app/views/legislation/annotations/show.html.erb
index 2d932fb67..3ce4616a2 100644
--- a/app/views/legislation/annotations/show.html.erb
+++ b/app/views/legislation/annotations/show.html.erb
@@ -8,6 +8,8 @@
   <div class="draft-panels small-12 column row">
     <%= render 'version_chooser', process: @process, draft_version: @draft_version %>
 
+    <%= render 'legislation/processes/help_gif' %>
+
     <div class="legislation-comment">
       <div class="annotation-comment">
         <div class="row annotation-share-comment">
diff --git a/app/views/legislation/draft_versions/changes.html.erb b/app/views/legislation/draft_versions/changes.html.erb
index fb8ad43ad..8222dd13c 100644
--- a/app/views/legislation/draft_versions/changes.html.erb
+++ b/app/views/legislation/draft_versions/changes.html.erb
@@ -27,6 +27,8 @@
       </div>
     </div>
 
+    <%= render 'legislation/processes/help_gif' %>
+
     <div class="row">
       <div class="small-12 medium-8 column legislation-changes">
         <%= markdown @draft_version.changelog %>
diff --git a/app/views/legislation/draft_versions/show.html.erb b/app/views/legislation/draft_versions/show.html.erb
index 8a66d0a98..b4463a4f7 100644
--- a/app/views/legislation/draft_versions/show.html.erb
+++ b/app/views/legislation/draft_versions/show.html.erb
@@ -25,7 +25,7 @@
 
       <% unless @draft_version.final_version? %>
         <div class="small-12 medium-3 column">
-          <%= link_to legislation_process_draft_version_annotations_path(@process, @draft_version), title: t('.see_comments'), class: "button" do %>
+          <%= link_to legislation_process_draft_version_annotations_path(@process, @draft_version), title: t('.see_comments'), class: "button expanded" do %>
             <strong><%= t('.see_comments') %></strong>
           <% end %>
         </div>
@@ -33,6 +33,8 @@
 
     </div>
 
+    <%= render 'legislation/processes/help_gif' %>
+
     <div class="row draft-allegation medium-collapse comments-on">
       <div class="small-12 calc-index column <%= "js-toggle-allegations" unless @draft_version.final_version? %>">
         <div class="draft-panel">
diff --git a/app/views/legislation/processes/_help_gif.html.erb b/app/views/legislation/processes/_help_gif.html.erb
new file mode 100644
index 000000000..5b14f4d2b
--- /dev/null
+++ b/app/views/legislation/processes/_help_gif.html.erb
@@ -0,0 +1,24 @@
+<div class="row">
+  <div class="small-12 column">
+    <div class="float-right">
+      <a class="button hollow" data-toggle="annotator-help">
+        <sub><span class="icon-edit"></span></sub>&nbsp;
+        <%= t("annotator.help.title") %>
+      </a>
+
+      <div class="dropdown-pane" id="annotator-help" data-dropdown data-auto-focus="true">
+        <% if user_signed_in? %>
+          <%= t("annotator.help.alt") %>
+        <% else %>
+          <p>
+            <%= t("annotator.help.text",
+                sign_in: link_to(t("annotator.help.text_sign_in"), new_user_session_path),
+                sign_up: link_to(t("annotator.help.text_sign_up"), new_user_registration_path)).html_safe %>
+          </p>
+        <% end %>
+
+        <%= image_tag ("annotator_help.gif"), alt: t("annotator.help.alt") %>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml
index 00fb3d90c..7481e72af 100644
--- a/config/locales/en/general.yml
+++ b/config/locales/en/general.yml
@@ -846,4 +846,11 @@ en:
       budget_investment: "Budget investment"
   admin/widget:
     header:
-      title: Administration
\ No newline at end of file
+      title: Administration
+  annotator:
+    help:
+      alt: Select the text you want to comment and press the button with the pencil.
+      text: To comment this document you must %{sign_in} or %{sign_up}. Then select the text you want to comment and press the button with the pencil.
+      text_sign_in: login
+      text_sign_up: sign up
+      title: How I can comment this document?
diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml
index 315769199..3b5c6e2ac 100644
--- a/config/locales/es/general.yml
+++ b/config/locales/es/general.yml
@@ -845,4 +845,11 @@ es:
       budget_investment: "Proyecto de gasto"
   admin/widget:
     header:
-      title: Administración
\ No newline at end of file
+      title: Administración
+  annotator:
+    help:
+      alt: Selecciona el texto que quieres comentar y pulsa en el botón con el lápiz.
+      text: Para comentar este documento debes %{sign_in} o %{sign_up}. Después selecciona el texto que quieres comentar y pulsa en el botón con el lápiz.
+      text_sign_in: iniciar sesión
+      text_sign_up: registrarte
+      title: "¿Cómo puedo comentar este documento?"