diff --git a/templates/edu_notes.twig b/templates/edu_notes.twig
index 3ceb30e..7fdbc3e 100644
--- a/templates/edu_notes.twig
+++ b/templates/edu_notes.twig
@@ -1,15 +1,15 @@
-<div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
+<div id="accordion_bulletins" class="panel-group">
 {% for bulletin in bulletins|sort %}
   {% if bulletin.isVisible() %}
   <div class="panel panel-default">
-      <button id="head_{{ bulletin.getId() }}" class="panel-heading collapsed" data-parent="#accordion" data-target="#{{ bulletin.getId() }}" data-toggle="collapse" aria-expanded="false">
+      <button id="head_{{ bulletin.getId() }}" class="panel-heading collapsed" data-parent="#accordion_bulletins" data-target="#{{ bulletin.getId() }}" data-toggle="collapse">
         <h4 class="panel-title">{{ bulletin.getNom() }}</h4>
-        <p>
-          {{ bulletin.getClass() }}<br/>
-          Moyenne Générale : {{ bulletin.getMoyenne() }}
-        </p>
+        <div class="row">
+          <div class="col-sm-9">{{ bulletin.getClass() }}</div>
+          <div class="col-sm-3">Moyenne Générale : {{ bulletin.getMoyenne() }}</div>
+        </div>
       </button>
-      <div id="{{ bulletin.getId() }}" class="panel-collapse collapse in" style="padding:5px" aria-expanded="false">  
+      <div id="{{ bulletin.getId() }}" class="panel-collapse collapse" style="padding:5px">
         {% include '@meeo/eleve_notes.twig' with { 'bulletin' : bulletin } %}
       </div>
   </div>
diff --git a/templates/eleve_notes.twig b/templates/eleve_notes.twig
index 456b38f..067960f 100644
--- a/templates/eleve_notes.twig
+++ b/templates/eleve_notes.twig
@@ -1,13 +1,19 @@
-<div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
+<div id="accordion_{{ bulletin.getId() }}_matiere" class="panel-group">
 {% for matiere in bulletin.getMatieres() %}
   <div class="panel panel-primary">
-    <button id="head_{{ bulletin.getId() }}_{{ matiere.getId() }}" class="panel-heading collapsed" data-parent="#accordion" data-target="#{{ bulletin.getId() }}_{{ matiere.getId() }}" data-toggle="collapse" aria-expanded="false">
+    <button id="head_{{ bulletin.getId() }}_{{ matiere.getId() }}" class="panel-heading collapsed" data-parent="#accordion_{{ bulletin.getId() }}_matiere" data-target="#{{ bulletin.getId() }}_{{ matiere.getId() }}" data-toggle="collapse">
         <h4 class="panel-title">{{ matiere.getNom() }}</h4>
-        <p>Moyenne : {{ matiere.getMoyenne() }}</p>
+        <div col="row">
+          <div class="col-sm-10"></div>
+          <div class="col-sm-2">
+            Moyenne : {{ matiere.getMoyenne() }}
+          </div>
+        </div>
     </button>
-    <div id="{{ bulletin.getId() }}_{{ matiere.getId() }}" class="panel-collapse collapse in" style="padding:5px" aria-expanded="false">
+    <div id="{{ bulletin.getId() }}_{{ matiere.getId() }}" class="panel-collapse collapse in" style="padding:5px">
       {% for note in matiere.getNotes() %}
-        <div>
+        <div class="row">
+          <div class="col-sm-1">
           {% if note.getNote() >= 20 %}
           <i class="fa fa-star" style="color:gold"></i>
           {% elseif note.getNote() >= 15 %}
@@ -17,7 +23,13 @@
           {% elseif note.getNote() >= 9 %}
             <i class="fa fa-thumbs-up" style="color:green"></i>
           {% endif %}
-          {{ note.getIntitule() }} : {{ note.getNote() }}
+          </div>
+          <div class="col-sm-10">
+            {{ note.getIntitule() }}
+          </div>
+          <div class="col-sm-1">
+            {{ note.getNote() }}
+          </div>
         </div>
       {% endfor %}
     </div>