diff --git a/bda/templates/bda-participants.html b/bda/templates/bda-participants.html
index a54242d5..cb94327d 100644
--- a/bda/templates/bda-participants.html
+++ b/bda/templates/bda-participants.html
@@ -2,12 +2,10 @@
 
 {% block realcontent %}
     <h2>{{ spectacle }}</h2>
-    <h3><a href="{% url "admin:bda_attribution_add" %}?spectacle={{spectacle.id}}">Ajouter une attribution</a></h3>
-      <table class='etat-bda' align="center">
+      <table class='table table-striped'>
         <thead>
           <tr>
           <th>Nom</th>
-          <th>Identifiant</th>
           <th>Places</th>
           <th>Adresse Mail</th>
           <th>Payé</th>
@@ -17,16 +15,12 @@
         {% for participant in participants %}
         <tr>
           <td>{{participant.name}}</td>
-          <td>{{participant.username}}</td>
           <td>{{participant.nb_places}} place{{participant.nb_places|pluralize}}</td>
           <td>{{participant.email}}</td>
-          <td>
-            <div class={%if participant.paid %}"greenratio"{%else%}"redratio"{%endif%}>
+          <td class={%if participant.paid %}"greenratio"{%else%}"redratio"{%endif%}>
             {% if participant.paid %}Oui{% else %}Non{%endif%}
-            </div>
           </td>
-          <td align="center">
-            <div class={%if participant.given == participant.nb_places %}"greenratio"
+          <td class={%if participant.given == participant.nb_places %}"greenratio"
                         {%elif participant.given == 0%}"redratio"
                         {%else%}"orangeratio"
                         {%endif%}>
@@ -34,18 +28,18 @@
             {% elif participant.given == 0 %}Non
             {% else %}{{participant.given}}/{{participant.nb_places}}
             {%endif%}
-            </div>
           </td>
         </tr>
         {% endfor %}
       </table>
+    <h3><a href="{% url "admin:bda_attribution_add" %}?spectacle={{spectacle.id}}"><span class="glyphicon glyphicon-plus-sign"></span> Ajouter une attribution</a></h3>
       <br>
-     <button type="button" onclick="toggle('export-mails')">Afficher/Cacher mails participants</button>
+     <button class="btn btn-default" type="button" onclick="toggle('export-mails')">Afficher/Cacher mails participants</button>
       <pre id="export-mails" style="display:none">
 {%for participant in participants %}{{participant.email}}, {%endfor%}
       </pre>
       <br>
-      <button type="button" onclick="toggle('export-salle')">Afficher/Cacher liste noms</button>
+      <button class="btn btn-default" type="button" onclick="toggle('export-salle')">Afficher/Cacher liste noms</button>
       <pre id="export-salle" style="display:none">
 {% for participant in participants %}{{participant.name}} : {{participant.nb_places}} places
 {% endfor %}
diff --git a/bda/templates/inscription-formset.html b/bda/templates/inscription-formset.html
index 6dd2e545..65ef389b 100644
--- a/bda/templates/inscription-formset.html
+++ b/bda/templates/inscription-formset.html
@@ -28,7 +28,7 @@
       {% endif %}
     {% endfor %}
     <td class="tools-cell"><div class="tools">
-      <a href="javascript://" class="glyphicon glyphicon-th drag-btn" title="Déplacer"></a>
+      <a href="javascript://" class="glyphicon glyphicon-sort drag-btn" title="Déplacer"></a>
       <input type="checkbox" name="{{ form.DELETE.html_name }}" style="display: none;" />
       <input type="hidden" name="{{ form.priority.html_name }}" style="{{ form.priority.value }}" />
       <a href="javascript://" class="glyphicon glyphicon-remove remove-btn" title="Supprimer"></a>
diff --git a/bda/templates/spectacle_list.html b/bda/templates/spectacle_list.html
index 752a9315..a21d278b 100644
--- a/bda/templates/spectacle_list.html
+++ b/bda/templates/spectacle_list.html
@@ -1,13 +1,50 @@
 {% extends "base_title.html" %}
+{% load staticfiles %}
 
 {% block realcontent %}
     <h2><strong>{{tirage_name}}</strong></h2>
     <h3>Liste des spectacles</h3>
-    <ul>
-    {% for spectacle in object_list %}
-        <li><a href="{% url 'bda-spectacle' tirage_id spectacle.id %}">{{ spectacle }}</a></li>
-    {% endfor %}
-    </ul>
+
+
+    <table class="table table-striped table-hover">
+        <thead>
+        <tr>
+            <th data-sort="string">Titre</th>
+            <th data-sort="int">Date</th>
+            <th data-sort="string">Lieu</th>
+            <th data-sort="float">Prix</th>
+        </tr> 
+        </thead>
+        <tbody>
+        {% for spectacle in object_list %}
+        <tr class="clickable-row" data-href="{% url 'bda-spectacle' tirage_id spectacle.id %}"> 
+                <td><a href="{% url 'bda-spectacle' tirage_id spectacle.id %}">{{ spectacle.title }} <span style="font-size:small;" class="glyphicon glyphicon-link" aria-hidden="true"></span></a></td>
+                <td data-sort-value="{{ spectacle.timestamp }}">{{ spectacle.date_no_seconds }}</td>
+                <td data-sort-value="{{ spectacle.location }}">{{ spectacle.location }}</td>
+                <td data-sort-value="{{ spectacle.ratio |stringformat:".3f" }}">
+                                {{ spectacle.price |floatformat  }}€
+            </td>
+        </tr>
+                    {% endfor %}
+        </tbody>					     
+        </table>
+    <script type="text/javascript"
+            src="{% static "js/jquery.min.js" %}"></script>
+    <script type="text/javascript"
+            src="{% static "js/joequery-Stupid-Table-Plugin/stupidtable.js" %}"></script>
+    <script type="text/javascript">
+        $(function(){
+        $("table.etat-bda").stupidtable();
+        });
+    </script>
+    <script>
+    jQuery(document).ready(function($) {
+	$(".clickable-row").click(function() {
+	    window.document.location = $(this).data("href");
+	});
+    });
+    </script>
+
     <h3> Exports </h3>
     <ul>
         <li><a href="{% url 'bda-unpaid' tirage_id  %}">Mailing list impayés</a>
diff --git a/gestioncof/static/css/cof.css b/gestioncof/static/css/cof.css
index f531b6ef..85e0ae65 100644
--- a/gestioncof/static/css/cof.css
+++ b/gestioncof/static/css/cof.css
@@ -106,13 +106,13 @@ form .control-label {
 }
 
 .remove-btn {
-    color: #E6516A ;
-    font-size: x-large;
+    color: #E6516A !important;
+    font-size: large;
 }
 
 .drag-btn {
-    color   :#4F504B;
-    font-size: x-large;
+    color   :#4F504B !important;
+    font-size: large;
 }
 
 .btn-primary,
@@ -121,13 +121,13 @@ form .control-label {
 .btn-primary.focus {
   color: #fff;
   background-color: #DE826B;
-  border-color: #4F504B;
+  border-color: #AB6452;
 }
 .btn-primary:active:hover,
 .btn-primary:hover {
   color: #fff;
   background-color: #D89C8D;
-  border-color: #4F504B;
+  border-color: #AB6452;
 }
 
 label {
@@ -558,6 +558,15 @@ h4.block-title {
     padding-bottom: 28px;
     padding-top: 8px;
 }
+/*
+.table-clicable tbody tr {
+    cursor: pointer;
+}
+
+.table-clicable tbody tr:hover,
+.table-clicable tbody tr:active {
+    background-color: #E8C2B8;
+}*/
 
 form#bda_form ul.errorlist li {
  padding-left: 0px;
@@ -863,8 +872,10 @@ input#search_autocomplete:focus {
 
 .yourlabs-autocomplete li.hilight a {color: #FFF; }
 .yourlabs-autocomplete { 
-    border: none; 
-    background: white; 
+    border: solid; 
+    border-width: 0px 1px 1px 1px;
+    border-color: #B3B3B3;
+    background: #FAFAFA; 
     display: block;
 }
 .yourlabs-autocomplete.outer-container { position: relative; }
@@ -878,6 +889,10 @@ input#search_autocomplete:focus {
     background: #fff; 
 }
 
+#main-content > .yourlabs-autocomplete {
+    display:none;
+}
+
 .yourlabs-autocomplete.inner-container { 
     margin: 0; 
     padding: 0; 
@@ -1032,21 +1047,17 @@ pre code {
 /* Louis pour etat places*/
 
 
-.etat-bda td {
-	border:1px solid #666;
-	padding:4px;
-}
-
-.etat-bda tr:nth-child(even) {background: #CCC}
-
 .greenratio {
     background-color: #ADE297;
+    text-align: center;
 }
 .orangeratio {
     background-color: #EEE285;
+    text-align: center;
 }
 .redratio {
     background-color: #EE8585;
+    text-align: center;
 }
 
 th[data-sort]{
diff --git a/gestioncof/templates/base_header.html b/gestioncof/templates/base_header.html
index a5a803f7..baaa24b6 100644
--- a/gestioncof/templates/base_header.html
+++ b/gestioncof/templates/base_header.html
@@ -11,7 +11,7 @@
         </a>
         <div class="secondary">
             <span class="hidden-xxs">&nbsp;&nbsp;|&nbsp; </span>
-            <span>Se déconnecter&nbsp;<span class="glyphicon glyphicon-log-out"></span></span>
+            <span><a href="{% url "gestioncof.views.logout" %}">Se déconnecter&nbsp;<span class="glyphicon glyphicon-log-out"></span></a></span>
         </div>
         <h2 class="member-status">{% if user.first_name %}{{ user.first_name }}{% else %}<tt>{{ user.username }}</tt>{% endif %}, {% if user.profile.is_cof %}<tt class="user-is-cof">au COF{% else %}<tt class="user-is-not-cof">non-COF{% endif %}</tt></h2>
     </div><!-- /.container -->
diff --git a/gestioncof/templates/registration_form.html b/gestioncof/templates/registration_form.html
index 157ef737..b9699647 100644
--- a/gestioncof/templates/registration_form.html
+++ b/gestioncof/templates/registration_form.html
@@ -25,5 +25,5 @@
         {% if login_clipper or member %}
             <input type="hidden" name="user_exists" value="1" />
         {% endif %}
-        <input type="submit" class="btn-submit" value="Enregistrer l'inscription" />
+        <input type="submit" class="btn btn-primary pull-right" value="Enregistrer l'inscription" />
     </form>