diff --git a/sapl/sessao/urls.py b/sapl/sessao/urls.py
index 93fd953bb..4f6e5c887 100644
--- a/sapl/sessao/urls.py
+++ b/sapl/sessao/urls.py
@@ -1,8 +1,8 @@
 from django.conf.urls import include, url
 
 from sapl.sessao.views import (AdicionarVariasMateriasExpediente,
-                               AdicionarVariasMateriasOrdemDia, BancadaCrud,
-                               BlocoCrud, CargoBancadaCrud,
+                               AdicionarVariasMateriasOrdemDia,
+                               BancadaCrud, BlocoCrud, CargoBancadaCrud,
                                ExpedienteMateriaCrud, ExpedienteView,
                                MateriaOrdemDiaCrud, MesaView, OradorCrud,
                                OradorExpedienteCrud, PainelView,
@@ -22,8 +22,11 @@ from sapl.sessao.views import (AdicionarVariasMateriasExpediente,
                                VotacaoNominalView, VotacaoView,
                                abrir_votacao_expediente_view,
                                abrir_votacao_ordem_view,
+                               atualizar_mesa,
+                               insere_parlamentar_composicao,
                                mudar_ordem_materia_sessao, recuperar_materia,
                                recuperar_numero_sessao,
+                               remove_parlamentar_composicao,
                                reordernar_materias_expediente,
                                reordernar_materias_ordem,
                                sessao_legislativa_legislatura_ajax)
@@ -41,6 +44,18 @@ urlpatterns = [
 
     url(r'^sessao/(?P<pk>\d+)/mesa$', MesaView.as_view(), name='mesa'),
 
+    url(r'^sessao/mesa/atualizar-mesa/$',
+        atualizar_mesa,
+        name='atualizar_mesa'),
+
+    url(r'^sessao/mesa/insere-parlamentar/composicao/$',
+        insere_parlamentar_composicao,
+        name='insere_parlamentar_composicao'),
+
+    url(r'^sessao/mesa/remove-parlamentar-composicao/$',
+        remove_parlamentar_composicao,
+        name='remove_parlamentar_composicao'),
+
     url(r'^sessao/recuperar-materia/', recuperar_materia),
     url(r'^sessao/recuperar-numero-sessao/', recuperar_numero_sessao),
     url(r'^sessao/sessao-legislativa-legislatura-ajax/',
diff --git a/sapl/sessao/views.py b/sapl/sessao/views.py
index 614875525..9fd048c43 100644
--- a/sapl/sessao/views.py
+++ b/sapl/sessao/views.py
@@ -836,24 +836,40 @@ class MesaView(FormMixin, DetailView):
     model = SessaoPlenaria
 
     def get(self, request, *args, **kwargs):
-
         self.object = self.get_object()
         context = self.get_context_data(object=self.object)
 
-        mesa = IntegranteMesa.objects.filter(
-            sessao_plenaria=self.object)
+        try:
+            sessao = SessaoPlenaria.objects.get(
+                id=kwargs['pk'])
+        except ObjectDoesNotExist:
+            mensagem = _('Esta Sessão Plenária não existe!')
+            messages.add_message(request, messages.INFO, mensagem)
 
-        integrantes = []
-        for m in mesa:
-            parlamentar = Parlamentar.objects.get(
-                id=m.parlamentar_id)
-            cargo = CargoMesa.objects.get(
-                id=m.cargo_id)
-            integrante = {'parlamentar': parlamentar, 'cargo': cargo}
-            integrantes.append(integrante)
+            return self.render_to_response(context)
+
+        mesa = sessao.integrantemesa_set.all() if sessao else []
+
+        cargos_ocupados = [m.cargo for m in mesa]
+        cargos = CargoMesa.objects.all()
+        cargos_vagos = list(set(cargos) - set(cargos_ocupados))
+
+        parlamentares = Legislatura.objects.first().mandato_set.all()
+        parlamentares_ocupados = [m.parlamentar for m in mesa]
+        parlamentares_vagos = list(
+            set(
+                [p.parlamentar for p in parlamentares]) - set(
+                parlamentares_ocupados))
+
+        # Se todos os cargos estiverem ocupados, a listagem de parlamentares
+        # deve ser renderizada vazia
+        if not cargos_vagos:
+            parlamentares_vagos = []
 
         context.update(
-            {'integrantes': ordenar_integrantes_por_cargo(integrantes)})
+            {'composicao_mesa': mesa,
+             'parlamentares': parlamentares_vagos,
+             'cargos_vagos': cargos_vagos})
 
         return self.render_to_response(context)
 
@@ -863,73 +879,124 @@ class MesaView(FormMixin, DetailView):
             _('Mesa Diretora'), self.object)
         return context
 
-    @method_decorator(permission_required('sessao.change_integrantemesa'))
-    def post(self, request, *args, **kwargs):
-        self.object = self.get_object()
-        form = MesaForm(request.POST)
-
-        if 'Incluir' in request.POST:
-            if form.is_valid():
-                integrante = IntegranteMesa()
-                integrante.sessao_plenaria_id = self.object.id
-                integrante.parlamentar_id = request.POST['parlamentar']
-                integrante.cargo_id = request.POST['cargo']
-                integrante.save()
-                return self.form_valid(form)
+    def get_success_url(self):
+        pk = self.kwargs['pk']
+        return reverse('sapl.sessao:mesa', kwargs={'pk': pk})
 
-            else:
-                form.clean()
-                return self.form_valid(form)
-        elif 'Excluir' in request.POST:
-            if 'composicao_mesa' in request.POST:
-                ids = request.POST['composicao_mesa'].split(':')
-                IntegranteMesa.objects.get(
-                    sessao_plenaria_id=self.object.id,
-                    parlamentar_id=ids[0],
-                    cargo_id=ids[1]
-                ).delete()
-            else:
-                pass
-                # TODO display message asking to select a member of list
 
-        return self.form_valid(form)
+def atualizar_mesa(request):
+    """
+        Esta função lida com qualquer alteração nos campos
+        da Mesa Diretora, atualizando os campos após cada alteração
+    """
+    try:
+        sessao = SessaoPlenaria.objects.get(
+            id=int(request.GET['sessao']))
+    except ObjectDoesNotExist:
+        return JsonResponse({'msg': ('Sessão Inexistente!', 0)})
+
+    # Atualiza os componentes da view após a mudança
+    composicao_mesa = IntegranteMesa.objects.filter(
+        sessao_plenaria=sessao.id)
+
+    cargos_ocupados = [m.cargo for m in composicao_mesa]
+    cargos = CargoMesa.objects.all()
+    cargos_vagos = list(set(cargos) - set(cargos_ocupados))
+
+    parlamentares = Legislatura.objects.get(
+        id=sessao.legislatura.id).mandato_set.all()
+    parlamentares_ocupados = [m.parlamentar for m in composicao_mesa]
+    parlamentares_vagos = list(
+        set(
+            [p.parlamentar for p in parlamentares]) - set(
+            parlamentares_ocupados))
+
+    lista_composicao = [(c.id, c.parlamentar.__str__(),
+                         c.cargo.__str__()) for c in composicao_mesa]
+    lista_parlamentares = [(
+        p.id, p.__str__()) for p in parlamentares_vagos]
+    lista_cargos = [(c.id, c.__str__()) for c in cargos_vagos]
+
+    return JsonResponse(
+        {'lista_composicao': lista_composicao,
+         'lista_parlamentares': lista_parlamentares,
+         'lista_cargos': lista_cargos,
+         'msg': ('', 1)})
+
+
+def insere_parlamentar_composicao(request):
+    """
+        Esta função lida com qualquer operação de inserção
+        na composição da Mesa Diretora
+    """
+    if request.user.has_perm(
+            '%s.add_%s' % (
+                AppConfig.label, IntegranteMesa._meta.model_name)):
+
+        composicao = IntegranteMesa()
 
-    def get_candidatos_mesa(self):
-        self.object = self.get_object()
-        lista_parlamentares = []
-        lista_integrantes = []
+        try:
+            composicao.sessao_plenaria = SessaoPlenaria.objects.get(
+                id=int(request.POST['sessao']))
+        except MultiValueDictKeyError:
+            return JsonResponse({'msg': ('A Sessão informada não existe!', 0)})
 
-        for parlamentar in Parlamentar.objects.all():
-            if parlamentar.ativo:
-                lista_parlamentares.append(parlamentar)
+        try:
+            composicao.parlamentar = Parlamentar.objects.get(
+                id=int(request.POST['parlamentar']))
+        except MultiValueDictKeyError:
+            return JsonResponse({
+                'msg': ('Nenhum parlamentar foi inserido!', 0)})
 
-        for integrante in IntegranteMesa.objects.filter(
-                sessao_plenaria=self.object):
-            parlamentar = Parlamentar.objects.get(
-                id=integrante.parlamentar_id)
-            lista_integrantes.append(parlamentar)
+        try:
+            composicao.cargo = CargoMesa.objects.get(
+                id=int(request.POST['cargo']))
+            parlamentar_ja_inserido = IntegranteMesa.objects.filter(
+                sessao_plenaria_id=composicao.sessao_plenaria.id,
+                cargo_id=composicao.cargo.id).exists()
 
-        lista = list(set(lista_parlamentares) - set(lista_integrantes))
-        lista.sort(key=lambda x: x.nome_parlamentar)
-        return lista
+            if parlamentar_ja_inserido:
+                return JsonResponse({'msg': ('Parlamentar já inserido!', 0)})
 
-    def get_cargos_mesa(self):
-        self.object = self.get_object()
-        lista_cargos = CargoMesa.objects.all()
-        lista_cargos_ocupados = []
+            composicao.save()
 
-        for integrante in IntegranteMesa.objects.filter(
-                sessao_plenaria=self.object):
-            cargo = CargoMesa.objects.get(
-                id=integrante.cargo_id)
-            lista_cargos_ocupados.append(cargo)
+        except MultiValueDictKeyError:
+            return JsonResponse({'msg': ('Nenhum cargo foi inserido!', 0)})
 
-        lista = list(set(lista_cargos) - set(lista_cargos_ocupados))
-        return lista
+        return JsonResponse({'msg': ('Parlamentar inserido com sucesso!', 1)})
 
-    def get_success_url(self):
-        pk = self.kwargs['pk']
-        return reverse('sapl.sessao:mesa', kwargs={'pk': pk})
+    else:
+        return JsonResponse(
+            {'msg': ('Você não tem permissão para esta operação!', 0)})
+
+
+def remove_parlamentar_composicao(request):
+    """
+        Essa função lida com qualquer operação de remoção
+        na composição da Mesa Diretora
+    """
+    if request.POST and request.user.has_perm(
+        '%s.delete_%s' % (
+            AppConfig.label, IntegranteMesa._meta.model_name)):
+
+            if 'composicao_mesa' in request.POST:
+                try:
+                    composicao = IntegranteMesa.objects.get(
+                        id=int(request.POST['composicao_mesa']))
+                except ObjectDoesNotExist:
+                    return JsonResponse(
+                        {'msg': (
+                            'Composição da Mesa não pôde ser removida!', 0)})
+
+                composicao.delete()
+
+                return JsonResponse(
+                    {'msg': (
+                        'Parlamentar excluido com sucesso!', 1)})
+            else:
+                return JsonResponse(
+                    {'msg': (
+                        'Selecione algum parlamentar para ser excluido!', 0)})
 
 
 class ResumoOrdenacaoView(PermissionRequiredMixin, FormView):
diff --git a/sapl/templates/sessao/mesa.html b/sapl/templates/sessao/mesa.html
index 913135561..311a76b87 100644
--- a/sapl/templates/sessao/mesa.html
+++ b/sapl/templates/sessao/mesa.html
@@ -2,63 +2,248 @@
 {% load i18n %}
 
 {% block detail_content %}
-	<fieldset class="form-group">
-		<legend>Mesa Diretora da Sessão</legend>
-		<form method="POST">
-		    {% csrf_token %}
-				<br />
-	      <div class="row">
-	        <div class="col-md-4">
-						<label>Composição</label>
-	          <select multiple size="5" name="composicao_mesa" id="composicao_mesa" class="form-control">
-	            {% for i in integrantes %}
-	            	<option value="{{i.parlamentar.id}}:{{i.cargo.id}}">
-	            {{i.parlamentar.nome_parlamentar}} || {{i.cargo.descricao}}
-	            </option>
-	            {% endfor %}
-	          </select>
-	        </div>
-
-	        <div class="col-md-4" align="center">
-            {% if perms.sessao %}
-  						<br /><br />
-  	          {% if view.get_cargos_mesa %}<input type="submit" name="Incluir" Value="Incluir" class="btn btn-primary" />{% endif %}
-  	          <br /><br />
-              <input type="submit" name="Excluir" Value="Excluir" class="btn btn-danger" onclick="verificar()"/>
-            {% endif %}
-	        </div>
-	        {% if view.get_cargos_mesa %}
-		        <div class="col-md-4">
-							<label>Parlamentare | Cargo</label>
-		          <select name="parlamentar" id="parlamentar" class="form-control">
-		            {% for parlamentar in view.get_candidatos_mesa %}
-		            	<option value="{{parlamentar.id}}" name="parlamentar" id="parlamentar">{{parlamentar.nome_parlamentar}}</option>
-		            {% endfor %}
-		          </select>
-							<br />
-		          <select name="cargo" id="cargo" class="form-control">
-		            {% for cargo in view.get_cargos_mesa %}
-		            	<option value="{{cargo.id}}" name="cargo" id="cargo">{{cargo.descricao}}</option>
-		            {% endfor %}
-		          </select>
-		        </div>
-	        {% endif %}
-	      </div>
-		</form>
-	</fieldset>
+
+<!-- Success and errors messages div -->
+<div class="alert alert-danger alert-dismissible fade in" id="div-error" role="alert" style="display: none">
+	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+</button>
+	<b><span id="error-message"></span></b>
+</div>
+
+<div class="alert alert-success alert-dismissible fade in" id="div-success" style="display: none" role="alert">
+<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+</button>
+<b><span id="success-message"></span></b>
+</div>
+<!-- Success and errors messages div end -->
+
+<fieldset class="form-group">
+	<legend>Escolha da Composição da Mesa Diretora da Sessão Plenária</legend>
+<div class="row">
+  <div class="col-md-4">
+    <label>Composição da Mesa Diretora</label>
+    <select multiple size="5" class="form-control" id="id_composicao_mesa" name="composicao_mesa">
+      {% for p in composicao_mesa %}
+          <option value="{{p.id}}">
+          	{{p.parlamentar}} || {{p.cargo}}
+          </option>
+      {% endfor %}
+    </select>
+  </div>
+
+  <div class="col-md-4" align="center">
+			<br /><br />
+	{% if perms.parlamentares.add_cargomesa %}
+		<input type="submit" style="display: none" name="Incluir" id="id_incluir" Value="Incluir" class="btn btn-primary" />
+	{% endif %}
+    <br />
+    <br />
+    {% if perms.parlamentares.add_composicaomesa %}
+    	<input type="submit" style="display: none" name="Excluir" id="id_excluir" Value="Excluir" class="btn btn-danger" />
+    {% endif %}
+  </div>
+
+  <div class="col-md-4">
+    <label id='parlamentar-cargo-title' style="display: none">Parlamentar | Cargo</label>
+    <select class="form-control" name="parlamentar" id="id_parlamentar" style="display: none">
+      {% for p in parlamentares %}
+      	<option value="{{p.id}}">{{p.nome_completo}}</option>
+      {% endfor %}
+    </select>
+			<br />
+    <select class="form-control" name="cargo" id="id_cargo" style="display: none">
+      {% for c in cargos_vagos %}
+      	<option value="{{c.id}}">{{c}}</option>
+      {% endfor %}
+    </select>
+  </div>
+
+</div>
+</fieldset>
 {% endblock detail_content %}
 
+
 {% block extra_js %}
-	<script language="Javascript">
-		function verificar(){
-			x = document.getElementById("composicao_mesa");
-			flag = true;
-			for (i = 0; i < x.options.length; i++){
-				if (x.options[i].selected == true)
-					flag = false;
-			}
-			if(flag)
-				alert('Nenhum parlamentar foi selecionado!');
-		}
-	</script>
-{% endblock extra_js %}
+
+<script language="Javascript">
+
+	//##############################################################
+	//                Inicialização da View                        #
+	//##############################################################
+
+  // Se a composicao estiver completa, deve-se esconder o botão e os
+  // campos de inserção
+  $(document).ready(function(){
+  	if($("#id_parlamentar").val() == null || $("#id_cargo").val() == null){
+  		$("#id_parlamentar").hide();
+  		$("#id_cargo").hide();
+  		$("#parlamentar-cargo-title").hide();
+  		$('#id_incluir').hide();
+  	}
+  	else{
+  		$("#id_parlamentar").show();
+  		$("#id_cargo").show();
+  		$("#parlamentar-cargo-title").show();
+  		$('#id_incluir').show();
+  	}
+
+  	// Se a composição estiver vazia, deve-se esconder
+  	// de Excluir
+  	if (!$("#id_composicao_mesa option").val()){
+  		$("#id_excluir").hide()
+  	}
+  	else{
+  		$("#id_excluir").show()
+  	}
+  });
+
+  //##############################################################
+  //#                     EVENT HANDLERS                         #
+  //##############################################################
+
+  function errors_handler(msg){
+  	if (msg == null){
+    	  	$("#div-success").hide()
+    	  	$("#div-error").hide()
+    	  	$("#success-message").html('')
+    	  	$("#error-message").html('')
+    	  }
+	  else{
+	  	if (msg[1] == 0){
+	  		$("#div-error").show()
+	  		$("#error-message").html(msg[0])
+	  	}
+	  	else{
+	  		$("#div-success").show()
+	  		$("#success-message").html(msg[0])
+	  	}
+	  }
+
+  }
+
+  // Atualiza os campos após alguma operação Inserção/Remoção
+  function atualizar_mesa(msg=null){
+    // Pega o novo valor dos campos modificados
+    var sessao_value = {{sessaoplenaria.id|safe}}
+
+    // Limpa os campos que serão atualizados
+    $("#id_composicao_mesa option").remove();
+    $("#id_parlamentar option").remove();
+    $("#id_cargo option").remove();
+
+    $.get("{% url 'sapl.sessao:atualizar_mesa' %}",
+    	{sessao: sessao_value},
+    	function(data) {
+    		// Caso não venha nenhum dado da requisição, retorna null
+    	  if ($.isEmptyObject(data)){
+    	  	return null
+    	  }
+
+        lista_composicao = data['lista_composicao'];
+        lista_parlamentares = data['lista_parlamentares'];
+        lista_cargos = data['lista_cargos'];
+
+
+        for (i = 0; i < lista_composicao.length; i++) {
+            $('#id_composicao_mesa').append('<option value="' + lista_composicao[i][0] + '">' + lista_composicao[i][1] + ' || ' + lista_composicao[i][2] + '</option>');
+        }
+
+        // Caso ainda tenha parlamentares/cargos a serem inseridos, preenche a listagem com
+        // os disponíveis e garante que as ferramentas de inserção estejam disponíveis
+        if (lista_parlamentares.length != 0 && lista_cargos.length != 0){
+        	$('#id_incluir').show()
+        	$('#id_cargo').show();
+      		$('#id_parlamentar').show();
+      		$("#parlamentar-cargo-title").show();
+
+          for (i = 0; i < lista_parlamentares.length; i++) {
+              $('#id_parlamentar').append('<option value="' + lista_parlamentares[i][0] + '">' + lista_parlamentares[i][1] + '</option>');
+          }
+
+          for (i = 0; i < lista_cargos.length; i++) {
+              $('#id_cargo').append('<option value="' + lista_cargos[i][0] + '">' + lista_cargos[i][1] + '</option>');
+          }
+      	}
+
+      	// Caso contrário, esconde do usuário essas opções
+      	else{
+      		$('#id_incluir').hide();
+      		$('#id_cargo').hide();
+      		$('#id_parlamentar').hide();
+      		$("#parlamentar-cargo-title").hide();
+      	}
+
+      	// Garante que o botão de remoção aparecerá, caso tenha
+      	// algum parlamentar na composição
+      	if (lista_composicao.length != 0){
+  				$("#id_excluir").show()
+  			}
+  			else{
+  				$("#id_excluir").hide()
+  			}
+
+      // Caso haja algum erro que venha após a alteração da legislatura/sessao
+      // Essa mensagem de erro é prioridade
+      if (data['msg'][1] == 0){
+      	msg = data['msg']
+      }
+			errors_handler(msg)	      
+      
+    });
+  }
+
+  //#############################################################
+  //#                     EVENTS CATCH                          #
+  //#############################################################
+  $('#id_incluir').click(function(){
+  	var sessao_value = {{sessaoplenaria.id|safe}}
+  	$.ajax({
+      data: {sessao: sessao_value,
+             parlamentar: $("#id_parlamentar").val(),
+             cargo: $("#id_cargo").val()},
+      type: 'POST',
+      url: "{% url 'sapl.sessao:insere_parlamentar_composicao' %}",
+      headers: {
+            'X-CSRFToken': getCookie('csrftoken')
+        },
+      success: function(data){
+				var msg = data['msg'];
+        setTimeout(function(data){
+         // Atualiza os campos após a inserção
+      	 atualizar_mesa(msg)
+        }, 500)
+      },
+    });
+  })
+
+  $('#id_excluir').click(function(){
+  	// Pega o id do parlamentar que foi selecionado
+  	selecionado = $("#id_composicao_mesa option:selected").val()
+
+  	if (selecionado){
+    	$.ajax({
+        data: {composicao_mesa: selecionado},
+        type: 'POST',
+        url: "{% url 'sapl.sessao:remove_parlamentar_composicao' %}",
+        headers: {
+              'X-CSRFToken': getCookie('csrftoken')
+          },
+        success: function(data){		 
+          var msg = data['msg'];
+          legislatura = $("#id_legislatura").val();
+					sessao = $("#id_sessao_legislativa").val();
+
+          setTimeout(function(data){
+           // Atualiza os campos após a remoção
+        	 atualizar_mesa(msg);
+         }, 500)
+      	},
+	  	});
+  	}
+	});
+
+</script>
+
+{% endblock %}