diff --git a/maraudes/templates/maraudes/index.html b/maraudes/templates/maraudes/index.html
index 43819c0..30d5575 100644
--- a/maraudes/templates/maraudes/index.html
+++ b/maraudes/templates/maraudes/index.html
@@ -10,18 +10,23 @@
 {% block page_content %}
 {% load tables %}
 <div class="col-lg-6 col-md-12">
-    <div class="panel panel-primary">
-      <div class="panel-heading">
-        <h4 class="panel-title">Votre prochaine maraude</h4>
-      </div>
-      <div class="panel-body">
-	    <p>{% if prochaine_maraude %}
-	        <span class="glyphicon glyphicon-calendar"></span>
-	        <strong>{{ prochaine_maraude.date }} à {{ prochaine_maraude.heure_debut }}
-	        avec {% if user == prochaine_maraude.referent %}{{prochaine_maraude.binome}}
-	        	 {% else %}{{prochaine_maraude.referent}}{% endif %}.
-	        </strong>
-	      {% else %}Aucune maraude prévue.{% endif %}</p>
+    <div class="card border-dark">
+      <div class="card-header">Planning</div>
+      <div class="card-body">
+        <h6 class="card-title">Prochaine maraude</h6>
+	<p class="card-text">
+        {% if prochaine_maraude %}
+        Le <strong class="text-dark">{{ prochaine_maraude.date }} à {{ prochaine_maraude.heure_debut }}</strong>
+          avec {% if user == prochaine_maraude.referent %}
+                   {{prochaine_maraude.binome}}
+               {% else %}
+                   {{prochaine_maraude.referent}}
+               {% endif %}.
+	{% else %}
+          Aucune maraude prévue.
+        {% endif %}
+        </p>
+        <a href="{% url 'maraudes:planning' %}" class="card-link">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..." %}
@@ -32,19 +37,33 @@
     </div>
 
 {% if user.is_superuser and missing_cr %}
-    <div class="panel panel-warning">
-      <div class="panel-heading">
-        <h4 class="panel-title">Compte-rendus en retard</h4>
+    <div class="card border-warning my-3">
+      <div class="card-header">
+        Compte-rendus en retard
       </div>
       {% table missing_cr cols=2 cell_template="maraudes/table_cell_missing_cr.html" %}
     </div>
 {% endif %}
 </div>
 <div class="col-md-12 col-lg-6">
-  <h4><strong>Nouvelle note :</strong></h4>
-  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
-    {% include "notes/form_appel.html" with form=appel_form %}
-    {% include "notes/form_signalement.html" with form=signalement_form %}
+  <div class="card">
+    <div class="card-header">
+        <ul class="nav nav-tabs card-header-tabs">
+            <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>
+        </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">
+         {% include "notes/form_appel_inner.html" with form=appel_form %}
+        </div>
+        <div class="collapse" id="noteSignalement">
+         {% include "notes/form_signalement_inner.html" with form=signalement_form %}
+        </div>
+    </div>
   </div>
 </div>
 {% endblock %}
diff --git a/maraudes/templates/maraudes/planning.html b/maraudes/templates/maraudes/planning.html
index 2dcbb6e..3233a5e 100644
--- a/maraudes/templates/maraudes/planning.html
+++ b/maraudes/templates/maraudes/planning.html
@@ -1,5 +1,5 @@
 {% extends "maraudes/base.html" %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block title %} {{ block.super }} Planning {% endblock %}
 
@@ -12,10 +12,10 @@
   {{ block.super }}
   <div class="panel panel-primary text-center">
     <div class="panel-body">
-    <label for="submit-form" class="btn btn-primary">{% bootstrap_icon "floppy-save" %} Enregistrer</label>
+    <label for="submit-form" class="btn btn-primary">Enregistrer</label>
     <hr />
     <form action="" method="get" class="form-horizontal">
-      <strong>{% bootstrap_icon "calendar" %} Choisir une autre période : </strong>
+      <strong>Choisir une autre période : </strong>
       {% bootstrap_form select_form layout='horizontal' %}
       {% bootstrap_button "Choisir" button_type="submit" button_class="btn btn-primary btn-sm" %}
     </form>
diff --git a/maraudes/views.py b/maraudes/views.py
index 9671ca4..9d15f4b 100644
--- a/maraudes/views.py
+++ b/maraudes/views.py
@@ -255,14 +255,14 @@ class PlanningView(MaraudeurMixin, generic.TemplateView):
 
     def _parse_request(self):
         self.current_date = datetime.date.today()
-        try:
-            self.month = int(self.request.GET['month'])
-        except ValueError:
-            self.month = self.current_date.month
-        try:
-            self.year = int(self.request.GET['year'])
-        except ValueError:
-            self.year = self.current_date.year
+        self.month = int(
+            self.request.GET.get(
+                'month', 
+                default=self.current_date.month))
+        self.year = int(
+            self.request.GET.get(
+                'year',
+                default=self.current_date.year))
 
     def _calculate_initials(self):
         self._parse_request()
diff --git a/templates/admin/submit_line.html b/templates/admin/submit_line.html
index d5ac1cb..539d432 100644
--- a/templates/admin/submit_line.html
+++ b/templates/admin/submit_line.html
@@ -1,11 +1,11 @@
-{% load i18n admin_urls bootstrap3 %}
+{% load i18n admin_urls bootstrap4 %}
 <div class="submit-row well">
-{% if show_save %}<button type="submit" class="btn btn-primary" name="_save">{% bootstrap_icon "save" %} {% trans 'Save' %}</button>{% endif %}
+{% if show_save %}<button type="submit" class="btn btn-primary" name="_save">{% trans 'Save' %}</button>{% endif %}
 {% if show_delete_link %}
     {% url opts|admin_urlname:'delete' original.pk|admin_urlquote as delete_url %}
-    <p class="deletelink-box"><a href="{% add_preserved_filters delete_url %}" class="btn btn-danger">{% bootstrap_icon "remove" %} {% trans "Delete" %}</a></p>
+    <p class="deletelink-box"><a href="{% add_preserved_filters delete_url %}" class="btn btn-danger">{% trans "Delete" %}</a></p>
 {% endif %}
     {% if show_save_as_new %}<button type="submit" class="btn btn-default" name="_saveasnew">{% trans 'Save as new' %}</button>{% endif %}
-    {% if show_save_and_add_another %}<button type="submit" class="btn btn-default" name="_addanother">{% bootstrap_icon "plus" %} {% trans 'Save and add another' %}</button>{% endif %}
-    {% if show_save_and_continue %}<button type="submit" class="btn btn-default" name="_continue">{% bootstrap_icon "floppy-save" %} {% trans 'Save and continue editing' %}</button>{% endif %}
+    {% if show_save_and_add_another %}<button type="submit" class="btn btn-default" name="_addanother">{% trans 'Save and add another' %}</button>{% endif %}
+    {% if show_save_and_continue %}<button type="submit" class="btn btn-default" name="_continue">{% trans 'Save and continue editing' %}</button>{% endif %}
 </div>
diff --git a/website/templates/base.html b/website/templates/base.html
index 5ef9bdd..9152b5c 100644
--- a/website/templates/base.html
+++ b/website/templates/base.html
@@ -3,7 +3,8 @@
 <html lang="fr">
   <head>
     <title>{% block title %}La maraude{% endblock %}</title>
-    {% bootstrap_css %}{% bootstrap_javascript %}
+   {% bootstrap_javascript %}
+   {% bootstrap_css %}
     <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 %}
@@ -13,8 +14,20 @@
   </head>
   <body {% block extra_body_attrs %}{% endblock %}>
     <!-- START: Navigation Bar -->
-    <nav class="navbar fixed-top navbar-dark bg-dark shadow p-0 flex-no-wrap">
+    <nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-md shadow p-0">
         <a class="navbar-brand" href="/">Maraude ALSA</a>
+        {% if user.is_authenticated %}
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item">
+              <a href="{% url 'logout' %}" class="nav-link">Logout</a>
+          </li>
+          {% if user.is_superuser %}
+          <li class="nav-item">
+              <a href="{% url 'admin:index' %}" class="nav-link">Admin</a>
+          </li>
+          {% endif %}
+        </ul>
+        {% endif %}
     </nav>
     <!-- END: Navigation Bar -->
     <div class="container-fluid">
@@ -22,19 +35,11 @@
         <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 mb-1 text-muted border-bottom">
-              <span>Maraudes</span>
-            </h6>
             <ul class="nav flex-column">
-              <li class="nav-item">
+              <li class="nav-item pt-3">
                   <a href="{% url 'maraudes:index' %}" class="nav-link {% active namespace="maraudes" append=True %}">Maraudes</a>
               </li>
             </ul>
-            <ul class="nav flex-column">
-              <li class="nav-item">
-                  <a href="{% url 'maraudes:planning' %}" class="nav-link {% active namespace="maraudes" append=True %}">Planning</a>
-              </li>
-            </ul>
             <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted">
               <span>Notes</span>
             </h6>
@@ -62,9 +67,9 @@
         <main role="main" class="col-md-10 ml-sm-auto px-4">
           <div class="container">
               <div class="row pt-4">
-          {% bootstrap_messages %}
-          {% block page_content %}{% endblock %}
-                </div>
+                {% bootstrap_messages %}
+                {% block page_content %}{% endblock %}
+              </div>
           </div>
         </main>
       </div>