diff --git a/maraudes/templates/maraudes/index.html b/maraudes/templates/maraudes/index.html
index 30d5575..e7312e5 100644
--- a/maraudes/templates/maraudes/index.html
+++ b/maraudes/templates/maraudes/index.html
@@ -10,8 +10,8 @@
 {% block page_content %}
 {% load tables %}
 <div class="col-lg-6 col-md-12">
-    <div class="card border-dark">
-      <div class="card-header">Planning</div>
+    <div class="card rounded-bottom">
+      <div class="card-header rounded-0 py-2 bg-dark text-white">Planning</div>
       <div class="card-body">
         <h6 class="card-title">Prochaine maraude</h6>
 	<p class="card-text">
@@ -26,7 +26,7 @@
           Aucune maraude prévue.
         {% endif %}
         </p>
-        <a href="{% url 'maraudes:planning' %}" class="card-link">Voir le planning</a>
+        <a href="{% url 'maraudes:planning' %}" class="card-link text-primary">Voir le planning</a>
       </div>
         {% if derniers_sujets_rencontres %}
 		{% table derniers_sujets_rencontres cols=3 cell_template="maraudes/table_cell_derniers_sujets.html" header="Ces derniers temps..." %}
@@ -37,8 +37,8 @@
     </div>
 
 {% if user.is_superuser and missing_cr %}
-    <div class="card border-warning my-3">
-      <div class="card-header">
+    <div class="card border-warning rounded-bottom my-3">
+      <div class="card-header py-2 bg-dark text-warning rounded-0">
         Compte-rendus en retard
       </div>
       {% table missing_cr cols=2 cell_template="maraudes/table_cell_missing_cr.html" %}
@@ -46,21 +46,22 @@
 {% endif %}
 </div>
 <div class="col-md-12 col-lg-6">
-  <div class="card">
-    <div class="card-header">
-        <ul class="nav nav-tabs card-header-tabs">
+  <div class="card rounded-bottom">
+    <div class="card-header rounded-0 bg-dark text-white">
+        <ul class="nav nav-tabs card-header-tabs" id="addNote" role="tablist">
             <li class="nav-item"><strong class="nav-text pr-2">Ajouter </strong></li>
-            <li class="nav-item"><a class="nav-link active " role="button" data-toggle="collapse" href="#noteNote" aria-expanded="false" aria-controls="noteNote">Note</a></li>
-            <li class="nav-item"><a class="nav-link" role="button" data-toggle="collapse" href="#noteAppel" aria-expanded="false" aria-controls="noteAppel">Appel</a></li>
-            <li class="nav-item"><a class="nav-link" data-toggle="collapse" href="#noteSignalement" aria-expanded="false" aria-controls="noteSignalement">Signalement</a></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 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">
-        <div class="collapse show" id="noteNote"><div class="card card-body">Note</div></div>
-        <div class="collapse" id="noteAppel">
+    <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 show active" id="noteAppel" role="tabpanel">
          {% include "notes/form_appel_inner.html" with form=appel_form %}
         </div>
-        <div class="collapse" id="noteSignalement">
+        <div class="tab-pane fade" id="noteSignalement">
          {% include "notes/form_signalement_inner.html" with form=signalement_form %}
         </div>
     </div>
diff --git a/notes/templates/notes/form_appel_inner.html b/notes/templates/notes/form_appel_inner.html
index 5253678..03adf80 100644
--- a/notes/templates/notes/form_appel_inner.html
+++ b/notes/templates/notes/form_appel_inner.html
@@ -1,17 +1,18 @@
 {% load bootstrap4 %}
 <form action="" method="POST">{% csrf_token %}
-  {% with "inline" as layout %}
-  <div class="form-{{layout}} well well-sm text-center">
-    {% bootstrap_field  form.created_date layout=layout %}
-    {% bootstrap_field  form.created_time layout=layout %}
-    {% bootstrap_field  form.entrant layout=layout %}
-  </div>  {% endwith %}
-  {% with "horizontal" as layout %}
-  <div class="form-{{layout}}">
-    {% bootstrap_field form.sujet layout=layout %}
-    {% bootstrap_field form.text layout=layout %}
-  </div>  {% endwith %}
-  <div class="pull-right">{% bootstrap_button "Enregistrer l'appel" button_type="submit" %}</div>
+  <div class="form-row py-1">
+  {% with layout="inline" grp_cls="col" sz="small" %}
+    {% bootstrap_field  form.created_date size=sz form_group_class=grp_cls layout=layout %}
+    {% bootstrap_field  form.created_time size=sz form_group_class=grp_cls layout=layout %}
+  {% endwith %}
+  </div>
+  {% bootstrap_field form.entrant size=sz%}
+  <hr />
+  {% bootstrap_field form.sujet show_label=False %}
+  {% bootstrap_field form.text show_label=False %}
+  <div class="ml-auto">
+      {% bootstrap_button "Enregistrer l'appel" button_type="submit" button_class="btn-primary btn-sm btn-block" %}
+  </div>
 </form>
 {{ form.media.js }}{{ form.media.css }}
 
diff --git a/notes/templates/notes/form_signalement_inner.html b/notes/templates/notes/form_signalement_inner.html
index 593d23d..e2be41f 100644
--- a/notes/templates/notes/form_signalement_inner.html
+++ b/notes/templates/notes/form_signalement_inner.html
@@ -1,27 +1,22 @@
 {% load bootstrap4 %}
 <form action="" method="POST">{% csrf_token %}
   {% bootstrap_form_errors form %}
-  {% with "inline" as layout %}
-  <div class="form-group form-{{layout}} well">
-    <label class="control-label col-md-2" for="id_source">
-    Source
-    </label>
-    {% bootstrap_field  form.source layout=layout %}
-    {% bootstrap_field  form.created_date layout=layout %}
-    {% bootstrap_field  form.created_time layout=layout %}
-  </div>  {% endwith %}
-  <div class="well">
-    {% with "horizontal" as layout %}
-    <div class="form-group form-{{layout}}">
-      {% bootstrap_field  form.nom layout=layout %}
-      {% bootstrap_field  form.prenom layout=layout %}
-      {% bootstrap_field  form.genre layout=layout %}
-      {% bootstrap_field  form.age layout=layout %}
-    </div>  {% endwith %}
+  {% with layout="inline" grp_cls="col" sz="small" %}
+  <div class="form-row p-0 py-1">
+    {% bootstrap_field form.created_date size=sz form_group_class=grp_cls layout=layout %}
+    {% bootstrap_field form.created_time size=sz form_group_class=grp_cls layout=layout %}
+  </div>  
+  {% bootstrap_field form.source size=sz layout="horizontal" %}
+  <hr />
+  <div class="form-row p-0 py-1">
+      {% bootstrap_field form.nom size=sz form_group_class=grp_cls layout=layout %}
+      {% bootstrap_field form.prenom size=sz form_group_class=grp_cls layout=layout %}
   </div>
-  {% with "horizontal" as layout %}
-  <div class="form-group form-{{layout}}">
-    {% bootstrap_field  form.text layout=layout %}
-  </div>  {% endwith %}
-  <div class="pull-right">{% bootstrap_button "Enregistrer le signalement" button_type="submit" %}</div>
+  <div class="form-row p-0 pb-3">
+      {% bootstrap_field form.genre size=sz form_group_class=grp_cls layout=layout %}
+      {% bootstrap_field form.age size=sz form_group_class=grp_cls layout=layout %}
+  </div>
+  {% endwith %}
+  {% bootstrap_field form.text show_label=False placeholder="Informations du signalement..." %}
+  {% bootstrap_button "Enregistrer le signalement" button_type="submit" button_class="btn-primary btn-sm btn-block" %}
 </form>
diff --git a/settings.py b/settings.py
index 3b1d8c4..bea1c2f 100644
--- a/settings.py
+++ b/settings.py
@@ -74,18 +74,6 @@ NOSE_ARGS = [
     "--cover-package=website,maraudes,notes,utilisateurs",
 ]
 
-# bootstrap3
-BOOTSTRAP3 = {
-    # The URL to the jQuery JavaScript file
-    'base_url': os.path.join(STATIC_URL, 'css', 'bootstrap/'),
-    'jquery_url': os.path.join(STATIC_URL, 'scripts', 'jquery.min.js'),
-    'include_jquery': True,
-    # Label class to use in horizontal forms
-    'horizontal_label_class': 'col-md-2',
-    # Field class to use in horizontal forms
-    'horizontal_field_class': 'col-md-10',
-    }
-
 # django-select2
 SELECT2_JS = 'scripts/select2.min.js'
 SELECT2_CSS = 'css/select2.min.css'
diff --git a/website/templates/base.html b/website/templates/base.html
index 9152b5c..7e9f4f5 100644
--- a/website/templates/base.html
+++ b/website/templates/base.html
@@ -3,8 +3,8 @@
 <html lang="fr">
   <head>
     <title>{% block title %}La maraude{% endblock %}</title>
-   {% bootstrap_javascript %}
    {% bootstrap_css %}
+   {% bootstrap_javascript jquery="full" %}
     <link rel="stylesheet" type="text/css" href="/static/css/base.css" />
     <link rel="stylesheet" type="text/css" href="/static/css/dashboard.css" />
     {% block extrastyle %}{% endblock %}
@@ -66,8 +66,10 @@
         </nav>
         <main role="main" class="col-md-10 ml-sm-auto px-4">
           <div class="container">
-              <div class="row pt-4">
-                {% bootstrap_messages %}
+              <div class="row pt-4 d-flex justify-content-center">
+              {% bootstrap_messages %}
+              </div>
+              <div class="row">
                 {% block page_content %}{% endblock %}
               </div>
           </div>