diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 0a32790ea..e78104101 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -8,6 +8,7 @@
 // 06. Legislation draft
 // 07. Legislation allegations
 // 08. Legislation changes
+// 09. Legislation comments
 //
 
 // 01. Utils
@@ -924,7 +925,7 @@
           display: inline-block;
         }
         
-        a {          
+        a {
           span {
             text-decoration: underline;
           }
@@ -947,3 +948,51 @@
     }
   }
 }
+
+// 09. Legislation comments
+// -----------------
+.legislation-comments {
+  
+  .pull-right {
+    float: right;
+  }
+  
+  .comment-section {
+    background: #FAFAFA;
+    padding: 1rem;
+    border: 1px solid #DEE0E3;
+    margin-top: 0.25rem;
+    margin-bottom: 1rem;
+  }
+  
+  .comment {
+    margin-bottom: 3rem;
+    
+    a {
+      span {
+        text-decoration: underline;
+      }
+      
+      .icon-expand,
+      .icon-comments {
+        text-decoration: none;
+        color: #999999;
+        line-height: 0;
+      }
+      
+      .icon-expand {
+        margin-left: 0.25rem;
+      }
+      
+      .icon-comments {
+        margin-right: 0.25rem;
+      }
+      
+      &:active,
+      &:focus,
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
diff --git a/app/views/sandbox/legislation_draft_comments.html.erb b/app/views/sandbox/legislation_draft_comments.html.erb
new file mode 100644
index 000000000..984d94841
--- /dev/null
+++ b/app/views/sandbox/legislation_draft_comments.html.erb
@@ -0,0 +1,108 @@
+<div class="legislation-hero legislation-allegation no-margin-top grey-heading">
+  <div class="row headline">
+    <div class="small-12 medium-7 column">
+      <h3>
+        Licencias urbanísticas, declaraciones responsables y comunicaciones previas
+      </h3>
+    </div>
+    <div class="small-12 medium-4 column right">
+      <a class="button-subscribed expanded button strong" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="/proposals/6-soluta-sed-sapiente-dolores/vote?value=yes">
+        <span class="icon-checkmark-circle" aria-hidden="true"></span>
+        <h3>Suscrito</h3>
+      </a>
+    </div>
+  </div>
+  
+  <div class="center half-gradient">
+    <a class="button big center button-circle" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="/proposals/6-soluta-sed-sapiente-dolores/vote?value=yes">
+      <span class="icon-angle-down" aria-hidden="true"></span>
+    </a>
+  </div>
+</div>
+
+<div class="column row">
+  <ul class="legislation-process-categories">
+    <li>
+      <a href="legislation_debate.html">
+        <h4>Fase debate previo</h4>
+        <p>15 nov 2015 - 15 dic 2016</p>
+      </a>
+    </li>
+    <li>
+      <a href="legislation_draft.html">
+        <h4>Publicación borrador</h4>
+        <p>15 nov 2015 - 15 dic 2016</p>
+      </a>
+    </li>
+    <li class="active">
+      <a href="#">
+        <h4>Fase alegaciones</h4>
+        <p>15 nov 2015 - 15 dic 2016</p>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <h4>Publicación resultados</h4>
+        <p>15 nov 2015 - 15 dic 2016</p>
+      </a>
+    </li>
+  </ul>
+  
+  <div class="draft-panels small-12 column row">
+    <div class="row draft-chooser">
+      <div class="small-12 medium-9 column">
+        <h3>Comentarios de la versión</h3>
+        <div class="select-box">
+          <select aria-label="Seleccionar borrador">
+            <option selected="">número 3 del borrador</option>
+            <option value="1">número 2 del borrador</option>
+            <option value="2">número 1 del borrador</option>
+          </select>
+        </div>
+        <span>actualizada el 13 nov 2017</span>
+      </div>
+      <div class="small-12 medium-3 column">
+        <a class="button strong" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="#">Ver todos los comentarios</a>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="small-12 medium-8 column legislation-comments">
+        <div class="comment">
+          <strong>Comentarios sobre</strong>
+          <span class="pull-right"><a href="#"><span>Ver en contexto</span> <span class="icon-expand" aria-hidden="true"></span></a></span>
+          <div class="comment-section">
+            1. Esta ordenanza tiene por objeto regular los medios de intervención administrativa para el control de la legalidad de las actuaciones urbanísticas.
+          </div>
+          <a href="#"><span class="icon-comments" aria-hidden="true"></span> <span>34 comentarios</span></a>
+        </div>
+        
+        <div class="comment">
+          <strong>Comentarios sobre</strong>
+          <span class="pull-right"><a href="#"><span>Ver en contexto</span> <span class="icon-expand" aria-hidden="true"></span></a></span>
+          <div class="comment-section">
+            1. Esta ordenanza tiene por objeto regular los medios de intervención administrativa para el control de la legalidad de las actuaciones urbanísticas.
+          </div>
+          <a href="#"><span class="icon-comments" aria-hidden="true"></span> <span>34 comentarios</span></a>
+        </div>
+        
+        <div class="comment">
+          <strong>Comentarios sobre</strong>
+          <span class="pull-right"><a href="#"><span>Ver en contexto</span> <span class="icon-expand" aria-hidden="true"></span></a></span>
+          <div class="comment-section">
+            1. Esta ordenanza tiene por objeto regular los medios de intervención administrativa para el control de la legalidad de las actuaciones urbanísticas.
+          </div>
+          <a href="#"><span class="icon-comments" aria-hidden="true"></span> <span>34 comentarios</span></a>
+        </div>
+        
+        <div class="comment">
+          <strong>Comentarios sobre</strong>
+          <span class="pull-right"><a href="#"><span>Ver en contexto</span> <span class="icon-expand" aria-hidden="true"></span></a></span>
+          <div class="comment-section">
+            1. Esta ordenanza tiene por objeto regular los medios de intervención administrativa para el control de la legalidad de las actuaciones urbanísticas.
+          </div>
+          <a href="#"><span class="icon-comments" aria-hidden="true"></span> <span>34 comentarios</span></a>
+        </div>
+      </div>
+    </div>
+</div>