diff --git a/maraudes/templates/maraudes/compterendu.html b/maraudes/templates/maraudes/compterendu.html
index 86efd66..af91380 100644
--- a/maraudes/templates/maraudes/compterendu.html
+++ b/maraudes/templates/maraudes/compterendu.html
@@ -12,9 +12,9 @@
     {{ block.super }}
     <hr />
     <h4 class="sidebar-heading px-3 mt-4 mb-1">Création</h4>
-    <div class="btn-group px-3" role="group" aria-label="...">
-      <button id="new-sujet" class="btn btn-light">Sujet</button>
-      <button id="new-lieu" class="btn btn-light">Lieu</button>
+    <div class="btn-group px-3" role="group" aria-label="Creation">
+      <button id="new-sujet" class="btn btn-dark">Sujet</button>
+      <button id="new-lieu" class="btn btn-dark">Lieu</button>
     </div>
     <h4 class="sidebar-heading px-3 mt-4 mb-1">Finaliser</h4>
     <div class="px-3">
@@ -23,6 +23,23 @@
 {% endblock %}
 
 {% block page_content %}
+<!-- Modal and button linking -->
+<div class="modal fade" id="form-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+   <div class="modal-dialog">
+     <div class="modal-content">
+       <div class="modal-header">
+         <h4 class="modal-title">Modal title</h4>
+         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+           <span aria-hidden="true">&times;</span>
+         </button>
+       </div>
+       <div id="form-modal-body" class="modal-body">
+         <div class="alert alert-warning">Content should be there...</div>
+       </div>
+     </div>
+   </div>
+</div>
+<script type="text/javascript" src="{% static 'scripts/bootstrap-modal.js' %}"></script>
 <script type="text/javascript" src="{% static "scripts/jquery.formset.js" %}"></script>
 <script type="text/javascript">
   /* Dynamic Formsets */
@@ -58,7 +75,7 @@
   });
 </script>
 
-      <div class="card mx-auto border-dark shadow">
+      <div class="d-flex flex-fill card mx-auto border-dark shadow">
         <div class="card-header py-2 bg-dark text-white">
           Nouvelle rencontre
         </div>
@@ -72,27 +89,23 @@
         </div>
       </div>
     </div>
-</div>
+  </div>
 <div class="row">
   <div class="container-fluid">
     <div class="card-columns m-4">
-      {% for rencontre in rencontres %}
-        <div class="card">
+      {% for rencontre in rencontres %}<div class="card">
         <div class="card-header py-2 bg-dark text-white">{{ rencontre }}</div>
-        <div class="card-body">
-        {% for observation in rencontre.observations.all %}<tr>
-              <a class="card-link" href="{% url "notes:details-sujet" observation.sujet.pk %}" id="sujet-name-{{observation.sujet.pk}}">{{observation.sujet}}</a>
-              <a class="card-link show-stats-btn" href="#" value="{{observation.sujet.pk}}">
-              Mise à jour</a>
-            <hr />
-            <p>{{observation.text | linebreaks }}</p>
-         {% endfor %}
-         </div>
-         </div>
-       {% endfor %}
-  </div>
+        <div class="card-body">{% for observation in rencontre.observations.all %}
+           <a class="card-link btn-sm my-0" href="{% url "notes:details-sujet" observation.sujet.pk %}" id="sujet-name-{{observation.sujet.pk}}">{{observation.sujet}}</a>
+           <a class="card-link my-0 show-stats-btn" href="#" value="{{observation.sujet.pk}}">
+           Mise à jour</a>
+           <hr />
+           <span class="text-justify">{{observation.text | linebreaks }}</span>
+         {% endfor %}</div>
+      </div>{% endfor %}
+    </div>
 
-  <div class="card" id="update-stats">
+    <div class="card" id="update-stats">
     <h6 class="card-header"><span id="sujet-name"></span> <small>Fiche statistiques</small>
         <div class="pull-right" id="update-buttons">
         <label for="submit-form" class="btn btn-primary" id="update-stats-btn" pk="">Enregistrer</label>
@@ -102,21 +115,6 @@
       </div>
     </div>
   </div> <!-- Container -->
-<!-- Modal and button linking -->
-<div class="modal fade" id="form-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-   <div class="modal-dialog">
-     <div class="modal-content">
-       <div class="modal-header">
-         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-         <h4 class="modal-title">Modal title</h4>
-       </div>
-       <div id="form-modal-body" class="modal-body">
-         <div class="alert alert-warning">Content should be there...</div>
-       </div>
-     </div>
-   </div>
-</div>
-<script type="text/javascript" src="{% static 'scripts/bootstrap-modal.js' %}"></script>
 <script type="text/javascript">
   $(function(){
 
diff --git a/maraudes/templates/maraudes/compterendu_form.html b/maraudes/templates/maraudes/compterendu_form.html
index 0a9c6bd..3b6275d 100644
--- a/maraudes/templates/maraudes/compterendu_form.html
+++ b/maraudes/templates/maraudes/compterendu_form.html
@@ -3,19 +3,23 @@
   {% if form.id %}{% bootstrap_field form.id %}{% endif %}
   {% with lyt="inline" grp="col" sz="small" %}
   {% bootstrap_field form.lieu layout=lyt form_group_class=grp size=sz %}
-  {% bootstrap_field form.heure_debut form_group_class=grp layout=lyt size=sz %}
-  <span class="btn-group pr-1">
-    <button id="minus-5" class="btn btn-outline-secondary btn-sm" type="button"><strong>-5</strong></button>
-    <button id="plus-5" class="btn btn-outline-secondary btn-sm" type="button"><strong>+5</strong></button>
-  </span>
+  <div class="col">
+    {% bootstrap_field form.heure_debut form_group_class="my-0" layout=lyt size=sz %}
+      <span class="btn-group d-flex justify-content-center my-0">
+        <button id="minus-10" class="btn btn-link btn-sm px-1" type="button"><strong>-10</strong></button>
+        <button id="minus-5" class="btn btn-link btn-sm px-1" type="button"><strong>-5</strong></button>
+        <button id="plus-5" class="btn btn-link btn-sm px-1" type="button"><strong>+5</strong></button>
+        <button id="plus-10" class="btn btn-link btn-sm px-1" type="button"><strong>+10</strong></button>
+      </span>
+  </div>
   {% bootstrap_field form.duree layout=lyt size=sz form_group_class=grp %}
   {% endwith %}
 </div>
-<hr />
 <div class="form">
   {{ inline_formset.management_form }}
   {% for form in inline_formset %}
     <div class="dynamic-formset">
+    <hr />
     {% if form.id %}{% bootstrap_field form.id %}{% endif %}
     {% bootstrap_field form.sujet size="small" show_label=False %}
     {% bootstrap_field form.text size="small" show_label=False %}
diff --git a/maraudes/templates/maraudes/index.html b/maraudes/templates/maraudes/index.html
index 56a1ad4..e3a3cc0 100644
--- a/maraudes/templates/maraudes/index.html
+++ b/maraudes/templates/maraudes/index.html
@@ -27,6 +27,7 @@
         {% endif %}
         </p>
         <a href="{% url 'maraudes:planning' %}" class="card-link text-primary">Voir le planning</a>
+        <a href="{% url 'notes:liste-maraude' %}" class="card-link text-primary">Toutes les maraudes</a>
       </div>
     </div>
     {% if derniers_sujets_rencontres %}
@@ -61,13 +62,13 @@
             <li class="nav-item my-2"><strong class="nav-text pr-2">Ajouter </strong></li>
             <li class="nav-item">
               <a class="nav-link" role="tab" data-toggle="tab" href="#noteNote" aria-expanded="false" aria-controls="noteNote">Note</a></li>
-            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#noteAppel" aria-expanded="false" aria-controls="noteAppel">Appel</a></li>
+            <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#noteAppel" aria-expanded="false" aria-controls="noteAppel">Appel</a></li>
             <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#noteSignalement" aria-expanded="false" aria-controls="noteSignalement">Signalement</a></li>
         </ul>
     </div>
     <div class="card-body tab-content">
         <div class="tab-pane fade" id="noteNote"><div class="card card-body">Note</div></div>
-        <div class="tab-pane fade" id="noteAppel" role="tabpanel">
+        <div class="tab-pane fade show active" id="noteAppel" role="tabpanel">
          {% include "notes/form_appel_inner.html" with form=appel_form %}
         </div>
         <div class="tab-pane fade" id="noteSignalement">
diff --git a/maraudes/templates/maraudes/lieu_create.html b/maraudes/templates/maraudes/lieu_create.html
index bd75054..c4a4182 100644
--- a/maraudes/templates/maraudes/lieu_create.html
+++ b/maraudes/templates/maraudes/lieu_create.html
@@ -1,8 +1,7 @@
-{% load bootstrap3 %}
-<form class="form form-horizontal" action="{% url "maraudes:lieu-create" %}" method="post">{% csrf_token %}
+{% load bootstrap4 %}
+<form class="form form-horizontal" action="{% url "maraudes:lieu-create" %}" method="post">
+  {% csrf_token %}
   {% bootstrap_form form layout="horizontal"%}
-  <div class="pull-right">
-  {% bootstrap_button "Ajouter un lieu" button_type="submit" button_class="btn btn-primary" icon="plus" %}
-  </div>
+  {% bootstrap_button "Ajouter un lieu" button_type="submit" button_class="btn btn-block btn-success" %}
   <input type="text" hidden=True name="next" value="{{ next }}" />
 </form>
diff --git a/notes/templates/notes/sujet_create_inner.html b/notes/templates/notes/sujet_create_inner.html
index 2a384c1..47b61e7 100644
--- a/notes/templates/notes/sujet_create_inner.html
+++ b/notes/templates/notes/sujet_create_inner.html
@@ -1,8 +1,6 @@
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 <form class="form-horizontal" action="{% url "notes:create-sujet" %}" method="post">{% csrf_token %}
 {% bootstrap_form form layout="horizontal"%}
-<div class="pull-right">
-  {% bootstrap_button "Ajouter un sujet" button_type="submit" button_class="btn btn-primary" icon="plus" %}
-</div>
+{% bootstrap_button "Ajouter un sujet" button_type="submit" button_class="btn btn-block btn-success" %}
 {% if next %}<input type="text" hidden=True name="next" value="{{ next }}" />{%endif%}
 </form>
diff --git a/website/static/scripts/bootstrap-modal.js b/website/static/scripts/bootstrap-modal.js
index 38c635f..5535069 100644
--- a/website/static/scripts/bootstrap-modal.js
+++ b/website/static/scripts/bootstrap-modal.js
@@ -6,7 +6,7 @@
   var formAjaxSubmit = function(form, modal)
   {
        $(form).submit(function (e) {
-            e.preventDefault();
+           e.preventDefault();
            $.ajax({
                  type: $(this).attr('method'),
                  url: $(this).attr('action'),
@@ -16,8 +16,8 @@
                            $(modal).find('.modal-body').html(xhr);
                            formAjaxSubmit(form, modal);
                      } else {
-                           $(modal).modal('toggle');
-                          // Reload page ?
+                           $(modal).modal('hide');
+                           // Reload page ?
                            location.reload()
                      }
                  },
diff --git a/website/static/scripts/update_time.js b/website/static/scripts/update_time.js
index ac2ca12..3656b2b 100644
--- a/website/static/scripts/update_time.js
+++ b/website/static/scripts/update_time.js
@@ -25,12 +25,9 @@
 
     };
 
-    $('#minus-5').click(function() {
-      $.fn.editHeureValue(-5)
-      //console.log('minus 5')
-    });
-    $('#plus-5').click(function() {
-      $.fn.editHeureValue(5)
-      //console.log('plus 5')
-    });
+    $('#minus-10').click(function() { $.fn.editHeureValue(-10) });
+    $('#minus-5').click(function() { $.fn.editHeureValue(-5) });
+    $('#plus-5').click(function() { $.fn.editHeureValue(5) });
+    $('#plus-10').click(function() { $.fn.editHeureValue(10) });
+
   });
diff --git a/website/templates/base.html b/website/templates/base.html
index 2cda753..ba29e30 100644
--- a/website/templates/base.html
+++ b/website/templates/base.html
@@ -15,7 +15,7 @@
   <body {% block extra_body_attrs %}{% endblock %}>
     <!-- START: Navigation Bar -->
     <nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-md shadow p-0">
-        <a class="navbar-brand" href="/">Maraude ALSA</a>
+        <a class="navbar-brand ml-3" href="/">Maraude ALSA</a>
         {% if user.is_authenticated %}
         <ul class="navbar-nav ml-auto">
           <li class="nav-item">
@@ -31,24 +31,18 @@
     </nav>
     <!-- END: Navigation Bar -->
     <div class="container-fluid">
+    <!-- BEGIN: Sidebar -->
       <div class="row">
         <nav class="col-md-2 d-none d-md-block bg-light sidebar">
           <div class="sidebar-sticky">
             {% if user.is_authenticated %}
+            <h6 class="sidebar-heading px-3 mt-4 text-muted">Menu</h6>
             <ul class="nav flex-column">
-              <li class="nav-item pt-3">
+              <li class="nav-item">
                   <a href="{% url 'maraudes:index' %}" class="nav-link {% active namespace="maraudes" append=True %}">Maraudes</a>
               </li>
-            </ul>
-            <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted">
-              <span>Notes</span>
-            </h6>
-            <ul class="nav flex-column">
               <li class="nav-item">
-                  <a href="{% url 'notes:liste-maraude' %}" class="nav-link {% active namespace="notes" append=True %}">Par maraudes</a>
-              </li>
-              <li class="nav-item">
-                <a href="{% url 'notes:liste-sujet' %}" class="nav-link {% active namespace="notes" append=True %}">Par sujets</a>
+                <a href="{% url 'notes:liste-sujet' %}" class="nav-link {% active namespace="notes" append=True %}">Suivi</a>
               </li>
             </ul>
             {% else %}
@@ -64,6 +58,7 @@
             {% block sidebar %}{% endblock %}
           </div>
         </nav>
+        <!-- END: Sidebar -->
         <main role="main" class="col-md-10 ml-sm-auto px-4">
           <div class="container-fluid">
               <div class="row pt-4 d-flex justify-content-center">
diff --git a/website/templates/login.html b/website/templates/login.html
index 9406173..6546165 100644
--- a/website/templates/login.html
+++ b/website/templates/login.html
@@ -1,23 +1,11 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">Connexion</h3>
-  </div>
-  <div class="panel-body text-center">
+<h6 class="sidebar-heading px-3 mt-4 mb-2 text-muted">Connexion</h6>
 {% if user.is_authenticated %}
-  <p>{{ user.first_name|default:user.username }}, vous êtes connecté !</p>
+  <p class="px-3">{{ user.first_name|default:user.username }}, vous êtes connecté !</p>
   {% if next %}
   <div class="alert alert-warning">
     <p>Votre compte ne donne pas accès à cette page. Veuillez vous connecter avec un autre compte.</p>
   </div>
   <a href="{% url 'logout' %}" class="btn btn-danger">Déconnexion</a>
-  {% else %}
-  <div class="btn-group-vertical">
-    <a href="{% url 'maraudes:index' %}" class="btn btn-sm btn-primary">Entrer</a>
-    {% if user.is_superuser %}
-    <a href="admin/" class="btn btn-sm btn-default">Administration</a>
-    {% endif %}
-    <a href="{% url 'logout' %}" class="btn btn-sm btn-default">Déconnexion</a>
-  </div>
   {% endif %}
 {% else %}
   <form class="form" method="post" action="{% url "login" %}">
@@ -28,24 +16,16 @@
   </div>
   <input name="next" value="{{next}}" hidden />
   {% endif %}
-  <div class="form-group form-horizontal">
+  <div class="form-group form-horizontal px-3">
     <div class="form-group">
       <label class="col-md-2 sr-only control-label" for="id_username">Username</label>
-      <div class="input-group col-md-9">
-        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
-        <input autofocus="" class="form-control" id="id_username" maxlength="254" name="username" placeholder="Username" title="" type="text" required />
-      </div>
+      <input autofocus="" class="form-control" id="id_username" maxlength="254" name="username" placeholder="Username" title="" type="text" required />
     </div>
     <div class="form-group">
       <label class="col-md-2 sr-only control-label" for="id_password">Password</label>
-      <div class="input-group col-md-9">
-        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
-        <input class="form-control" id="id_password" name="password" placeholder="Password" title="" type="password" required />
-      </div>
+      <input class="form-control" id="id_password" name="password" placeholder="Password" title="" type="password" required />
     </div>
-  </div>
-  <div class="text-center">
-    <button class="btn btn-primary navbar-button" type="submit">Connexion</button>
+    <button class="btn btn-primary btn-block" type="submit">Connexion</button>
   </div>
   </form>
 {% endif %}