diff --git a/sapl/static/sapl/frontend/css/comissoes.0e433876.css b/sapl/static/sapl/frontend/css/comissoes.0e433876.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/sapl/static/sapl/frontend/js/comissoes.24ef3c79.js b/sapl/static/sapl/frontend/js/comissoes.24ef3c79.js
new file mode 100644
index 000000000..d469936fa
--- /dev/null
+++ b/sapl/static/sapl/frontend/js/comissoes.24ef3c79.js
@@ -0,0 +1 @@
+!function(e){function t(t){for(var o,i,s=t[0],c=t[1],u=t[2],d=0,p=[];d<s.length;d++)i=s[d],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&p.push(r[i][0]),r[i]=0;for(o in c)Object.prototype.hasOwnProperty.call(c,o)&&(e[o]=c[o]);for(l&&l(t);p.length;)p.shift()();return n.push.apply(n,u||[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],o=!0,s=1;s<a.length;s++){var c=a[s];0!==r[c]&&(o=!1)}o&&(n.splice(t--,1),e=i(i.s=a[0]))}return e}var o={},r={comissoes:0},n=[];function i(t){if(o[t])return o[t].exports;var a=o[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=o,i.d=function(e,t,a){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)i.d(a,o,function(t){return e[t]}.bind(null,o));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/static/sapl/frontend/";var s=window.webpackJsonp=window.webpackJsonp||[],c=s.push.bind(s);s.push=t,s=s.slice();for(var u=0;u<s.length;u++)t(s[u]);var l=c;n.push([4,"chunk-vendors"]),a()}({"0dbd":function(e,t,a){},4:function(e,t,a){e.exports=a("82a4")},"82a4":function(e,t,a){"use strict";a.r(t);a("28a5"),a("ac6a"),a("5df3"),a("cadf"),a("551c"),a("f751"),a("097d"),a("0dbd");var o=a("a026"),r=a("44d4"),n=a("bc3a"),i=a.n(n);i.a.defaults.xsrfCookieName="csrftoken",i.a.defaults.xsrfHeaderName="X-CSRFToken",o.a.use(r.a),new o.a({delimiters:["[[","]]"],el:"#composicao_list",data:function(){return{periodo_list:[],parlamentares:[],comissao_id:"",composicao_id:""}},methods:{getParlamentares:function(e){var t=this;this.comissao_id&&i.a.get("/api/comissoes/participacao/?composicao="+this.composicao_id).then((function(e){t.parlamentares=e.data.results})).then((function(){var e=t.parlamentares.map((function(e){i.a.get("/api/parlamentares/parlamentar/"+e.parlamentar).then((function(t){e.nome=t.data.__str__})).then((function(){i.a.get("/api/comissoes/cargocomissao/"+e.cargo).then((function(t){e.cargo=t.data.nome})).then((function(){var t={year:"numeric",month:"long",day:"numeric"};if(e.data_designacao){var a=new Date(e.data_designacao+" EDT").toLocaleDateString("pt-BR",t);e.data_designacao=a}if(e.data_desligamento){var o=new Date(e.data_desligamento+" EDT").toLocaleDateString("pt-BR",t);e.data_desligamento=o}e.titular?e.titular="Sim":e.titular="Não"}))}))}));Promise.all(e)})).catch((function(e){console.error("Ocorreu um erro ao obter os dados de parlamentares:"+e)}))}},mounted:function(){var e=this;this.comissao_id=window.location.pathname.split("/")[2],i.a.get("/api/comissoes/composicao/?comissao="+this.comissao_id).then((function(t){e.periodo_list=t.data.results,e.composicao_id=t.data.results[0].id,e.getParlamentares()})).catch((function(e){console.error("Ocorreu um erro ao obter os períodos da comissao: "+e)}))}})}});
\ No newline at end of file
diff --git a/sapl/static/sapl/frontend/js/comissoes.24ef3c79.js.gz b/sapl/static/sapl/frontend/js/comissoes.24ef3c79.js.gz
new file mode 100644
index 000000000..2a1ac0042
Binary files /dev/null and b/sapl/static/sapl/frontend/js/comissoes.24ef3c79.js.gz differ
diff --git a/sapl/templates/comissoes/composicao_list.html b/sapl/templates/comissoes/composicao_list.html
index d3080d878..3b38bdccf 100644
--- a/sapl/templates/comissoes/composicao_list.html
+++ b/sapl/templates/comissoes/composicao_list.html
@@ -1,45 +1,43 @@
-{% extends "crud/list.html" %}
-{% load i18n common_tags crispy_forms_tags%}
+{% extends "base.html" %}
+{% load i18n %}
+{% load crispy_forms_tags cropping%}
+{% load common_tags %}
+{% load render_bundle from webpack_loader %}
+{% load webpack_static from webpack_loader %}
+
+{% block base_content %}
+
+<div id="composicao_list">
+
+  <fieldset class="form-group">
+    <legend>Selecione o Período</legend>
+    <form method="GET">
+        <select @change="getParlamentares" class="form-control" v-model="composicao_id">
+          <option v-for="option in periodo_list" v-bind:value="option.id">
+            [[ option.__str__ ]]
+          </option>
+        </select>
+    </form>
+  </fieldset>
+
 
 {% block actions %}
-  {% if user.is_authenticated and perms.comissoes.add_composicao %}
-    <div class="actions btn-group float-right btn-group-lg" role="group">
-      {% if view.create_url %}
-      <a href="{{ view.create_url }}" class="btn btn-outline-primary">
-        {% blocktrans with verbose_name=view.verbose_name %} Adicionar {{ verbose_name }} {% endblocktrans %}
+  <div class="d-flex flex-column flex-sm-row   mb-3 justify-content-between align-items-center">
+    {% if user.is_authenticated and perms.comissoes.add_participacao and composicao_list %}
+      <a  v-bind:href="'/comissao/'+composicao_id+'/participacao/create'" class="btn btn-outline-primary">
+        Adicionar Participação em Comissão
       </a>
-      {% endif %}
-      {% block more_buttons %}{% endblock more_buttons %}
-    </div>
-  {% endif %}
+    {% endif %}
+    {% if user.is_authenticated and perms.comissoes.add_composicao %}
+      <a href="composicao/create" class="btn btn-outline-primary btn-lg">
+        Adicionar Composição de Comissão
+      </a>
+    {% endif %}
+  </div>
 {% endblock actions %}
 
-{% block extra_content %}
-  <form method="GET">
-    <fieldset class="form-group">
-      <legend>Selecione o Período</legend>
-        <select name="pk" class="form-control" onChange="form.submit();">
-          {% for c in composicao_list %}
-            <option value="{{c.id}}" {% if composicao_pk == c.id %} selected {% endif %}>
-              {{c}}
-            </option>
-          {% endfor %}
-        </select>
-	  </fieldset>
-  </form>
-	<br/>
-{% endblock %}
 
 {% block container_table_list %}
-  {% if user.is_authenticated and perms.comissoes.add_participacao and composicao_list %}
-    <div class="context-actions clearfix">
-      <div class="actions btn-group mb-2" role="group">
-        <a href="{% url 'sapl.comissoes:participacao_create' composicao_pk %}" class="btn btn-outline-primary">
-          Adicionar Participação em Comissão
-        </a>
-      </div>
-    </div>
-  {% endif %}
   <div class="container-table">
     <table class="table table-striped table-hover table-link-ordering">
       <thead>
@@ -54,20 +52,35 @@
         </tr>
       </thead>
       <tbody>
-      {% for p in participacao_set %}
-      <tr>
+      <tr v-for="p in parlamentares">
+
         <td>
-          <a href="{% url 'sapl.comissoes:participacao_detail' p.pk %}">{{ p.parlamentar }}</a>
+         <a v-bind:href="'/comissao/participacao/' + p.id">[[ p.nome ]]</a>
         </td>
-        <td>{{p.cargo}}</td>
-        <td>{{p.titular|yesno:"Sim,Não"}}</td>
-        <td>{{p.data_designacao}}</td>
-        <td>{{p.data_desligamento|default:""}}</td>
-        <td>{{p.motivo_desligamento}}</td>
-        <td>{{p.observacao}}</td>
+        <td>[[p.cargo]]</td>
+        <td>[[p.titular]]</td>
+        <td>[[p.data_designacao]]</td>
+        <td>[[p.data_desligamento]]</td>
+        <td>[[p.motivo_desligamento]]</td>
+        <td>[[p.observacao]]</td>
       </tr>
-      {% endfor %}
     </tbody>
     </table>
   </div>
 {% endblock %}
+
+</div>
+
+{% endblock base_content %}
+
+
+{% block webpack_loader_css %}
+    {{ block.super }}
+    {% render_bundle 'comissoes' 'css' %}
+{% endblock %}
+
+{% block webpack_loader_js %}
+    {% render_chunk_vendors 'js' %}
+    {% render_bundle  'global' 'js' %}
+    {% render_bundle 'comissoes' 'js' %}
+{% endblock %}
diff --git a/sapl/templates/parlamentares/parlamentares_list.html b/sapl/templates/parlamentares/parlamentares_list.html
index 0285fa173..6123fe899 100644
--- a/sapl/templates/parlamentares/parlamentares_list.html
+++ b/sapl/templates/parlamentares/parlamentares_list.html
@@ -82,6 +82,7 @@
           </tbody>
       </table>
     </div>
+</div>
 
 {% endblock base_content %}
 
diff --git a/sapl/webpack-stats.json b/sapl/webpack-stats.json
index 43a686b5d..f556478cd 100644
--- a/sapl/webpack-stats.json
+++ b/sapl/webpack-stats.json
@@ -1 +1 @@
-{"status":"done","publicPath":"/static/sapl/frontend/","chunks":{"chunk-vendors":[{"name":"css/chunk-vendors.04c72a76.css","publicPath":"/static/sapl/frontend/css/chunk-vendors.04c72a76.css","path":"../sapl/sapl/static/sapl/frontend/css/chunk-vendors.04c72a76.css"},{"name":"js/chunk-vendors.826c3ecf.js","publicPath":"/static/sapl/frontend/js/chunk-vendors.826c3ecf.js","path":"../sapl/sapl/static/sapl/frontend/js/chunk-vendors.826c3ecf.js"},{"name":"css/chunk-vendors.04c72a76.css.map","publicPath":"/static/sapl/frontend/css/chunk-vendors.04c72a76.css.map","path":"../sapl/sapl/static/sapl/frontend/css/chunk-vendors.04c72a76.css.map"}],"compilacao":[{"name":"css/compilacao.eff62463.css","publicPath":"/static/sapl/frontend/css/compilacao.eff62463.css","path":"../sapl/sapl/static/sapl/frontend/css/compilacao.eff62463.css"},{"name":"js/compilacao.77fbad73.js","publicPath":"/static/sapl/frontend/js/compilacao.77fbad73.js","path":"../sapl/sapl/static/sapl/frontend/js/compilacao.77fbad73.js"},{"name":"css/compilacao.eff62463.css.map","publicPath":"/static/sapl/frontend/css/compilacao.eff62463.css.map","path":"../sapl/sapl/static/sapl/frontend/css/compilacao.eff62463.css.map"}],"global":[{"name":"css/global.a77827ad.css","publicPath":"/static/sapl/frontend/css/global.a77827ad.css","path":"../sapl/sapl/static/sapl/frontend/css/global.a77827ad.css"},{"name":"js/global.e051cc2f.js","publicPath":"/static/sapl/frontend/js/global.e051cc2f.js","path":"../sapl/sapl/static/sapl/frontend/js/global.e051cc2f.js"},{"name":"css/global.a77827ad.css.map","publicPath":"/static/sapl/frontend/css/global.a77827ad.css.map","path":"../sapl/sapl/static/sapl/frontend/css/global.a77827ad.css.map"}],"painel":[{"name":"css/painel.5d957a9b.css","publicPath":"/static/sapl/frontend/css/painel.5d957a9b.css","path":"../sapl/sapl/static/sapl/frontend/css/painel.5d957a9b.css"},{"name":"js/painel.35e9809a.js","publicPath":"/static/sapl/frontend/js/painel.35e9809a.js","path":"../sapl/sapl/static/sapl/frontend/js/painel.35e9809a.js"},{"name":"css/painel.5d957a9b.css.map","publicPath":"/static/sapl/frontend/css/painel.5d957a9b.css.map","path":"../sapl/sapl/static/sapl/frontend/css/painel.5d957a9b.css.map"}],"parlamentar":[{"name":"css/parlamentar.0e433876.css","publicPath":"/static/sapl/frontend/css/parlamentar.0e433876.css","path":"../sapl/sapl/static/sapl/frontend/css/parlamentar.0e433876.css"},{"name":"js/parlamentar.d5d320f2.js","publicPath":"/static/sapl/frontend/js/parlamentar.d5d320f2.js","path":"../sapl/sapl/static/sapl/frontend/js/parlamentar.d5d320f2.js"},{"name":"css/parlamentar.0e433876.css.map","publicPath":"/static/sapl/frontend/css/parlamentar.0e433876.css.map","path":"../sapl/sapl/static/sapl/frontend/css/parlamentar.0e433876.css.map"}]}}
\ No newline at end of file
+{"status":"done","publicPath":"/static/sapl/frontend/","chunks":{"chunk-vendors":[{"name":"css/chunk-vendors.04c72a76.css","publicPath":"/static/sapl/frontend/css/chunk-vendors.04c72a76.css","path":"../sapl/sapl/static/sapl/frontend/css/chunk-vendors.04c72a76.css"},{"name":"js/chunk-vendors.826c3ecf.js","publicPath":"/static/sapl/frontend/js/chunk-vendors.826c3ecf.js","path":"../sapl/sapl/static/sapl/frontend/js/chunk-vendors.826c3ecf.js"},{"name":"css/chunk-vendors.04c72a76.css.map","publicPath":"/static/sapl/frontend/css/chunk-vendors.04c72a76.css.map","path":"../sapl/sapl/static/sapl/frontend/css/chunk-vendors.04c72a76.css.map"}],"compilacao":[{"name":"css/compilacao.eff62463.css","publicPath":"/static/sapl/frontend/css/compilacao.eff62463.css","path":"../sapl/sapl/static/sapl/frontend/css/compilacao.eff62463.css"},{"name":"js/compilacao.77fbad73.js","publicPath":"/static/sapl/frontend/js/compilacao.77fbad73.js","path":"../sapl/sapl/static/sapl/frontend/js/compilacao.77fbad73.js"},{"name":"css/compilacao.eff62463.css.map","publicPath":"/static/sapl/frontend/css/compilacao.eff62463.css.map","path":"../sapl/sapl/static/sapl/frontend/css/compilacao.eff62463.css.map"}],"global":[{"name":"css/global.a77827ad.css","publicPath":"/static/sapl/frontend/css/global.a77827ad.css","path":"../sapl/sapl/static/sapl/frontend/css/global.a77827ad.css"},{"name":"js/global.e051cc2f.js","publicPath":"/static/sapl/frontend/js/global.e051cc2f.js","path":"../sapl/sapl/static/sapl/frontend/js/global.e051cc2f.js"},{"name":"css/global.a77827ad.css.map","publicPath":"/static/sapl/frontend/css/global.a77827ad.css.map","path":"../sapl/sapl/static/sapl/frontend/css/global.a77827ad.css.map"}],"painel":[{"name":"css/painel.5d957a9b.css","publicPath":"/static/sapl/frontend/css/painel.5d957a9b.css","path":"../sapl/sapl/static/sapl/frontend/css/painel.5d957a9b.css"},{"name":"js/painel.35e9809a.js","publicPath":"/static/sapl/frontend/js/painel.35e9809a.js","path":"../sapl/sapl/static/sapl/frontend/js/painel.35e9809a.js"},{"name":"css/painel.5d957a9b.css.map","publicPath":"/static/sapl/frontend/css/painel.5d957a9b.css.map","path":"../sapl/sapl/static/sapl/frontend/css/painel.5d957a9b.css.map"}],"parlamentar":[{"name":"css/parlamentar.0e433876.css","publicPath":"/static/sapl/frontend/css/parlamentar.0e433876.css","path":"../sapl/sapl/static/sapl/frontend/css/parlamentar.0e433876.css"},{"name":"js/parlamentar.d5d320f2.js","publicPath":"/static/sapl/frontend/js/parlamentar.d5d320f2.js","path":"../sapl/sapl/static/sapl/frontend/js/parlamentar.d5d320f2.js"},{"name":"css/parlamentar.0e433876.css.map","publicPath":"/static/sapl/frontend/css/parlamentar.0e433876.css.map","path":"../sapl/sapl/static/sapl/frontend/css/parlamentar.0e433876.css.map"}]}}