diff --git a/requirements.txt b/requirements.txt
index 4a13480..19f07f0 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,7 +1,7 @@
 # Requirements
 
 django
-django-bootstrap3
+django-bootstrap4
 django-select2
 django-watson
 django-graphos
diff --git a/settings.py b/settings.py
index bbc23b2..3b1d8c4 100644
--- a/settings.py
+++ b/settings.py
@@ -51,7 +51,7 @@ TEMPLATES[0]['DIRS'] += [
 # Applications
 INSTALLED_APPS += [
     # Design
-    'bootstrap3',
+    'bootstrap4',
     'django_select2',
     # Search Engine
     'watson',
diff --git a/website/static/css/dashboard.css b/website/static/css/dashboard.css
new file mode 100644
index 0000000..eb3bb85
--- /dev/null
+++ b/website/static/css/dashboard.css
@@ -0,0 +1,100 @@
+body {
+  font-size: .875rem;
+}
+
+.feather {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100; /* Behind the navbar */
+  padding: 48px 0 0; /* Height of navbar */
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+.sidebar-sticky {
+  position: relative;
+  top: 0;
+  height: calc(100vh - 48px);
+  padding-top: .5rem;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+}
+
+@supports ((position: -webkit-sticky) or (position: sticky)) {
+  .sidebar-sticky {
+    position: -webkit-sticky;
+    position: sticky;
+  }
+}
+
+.sidebar .nav-link {
+  font-weight: 500;
+  color: #333;
+}
+
+.sidebar .nav-link .feather {
+  margin-right: 4px;
+  color: #999;
+}
+
+.sidebar .nav-link.active {
+  color: #007bff;
+}
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+  color: inherit;
+}
+
+.sidebar-heading {
+  font-size: .75rem;
+  text-transform: uppercase;
+}
+
+/*
+ * Content
+ */
+
+[role="main"] {
+  padding-top: 48px; /* Space for fixed navbar */
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: 1rem;
+  background-color: rgba(0, 0, 0, .25);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .form-control {
+  padding: .75rem 1rem;
+  border-width: 0;
+  border-radius: 0;
+}
+
+.form-control-dark {
+  color: #fff;
+  background-color: rgba(255, 255, 255, .1);
+  border-color: rgba(255, 255, 255, .1);
+}
+
+.form-control-dark:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
+}
diff --git a/website/templates/base.html b/website/templates/base.html
index fd64de5..e5805af 100644
--- a/website/templates/base.html
+++ b/website/templates/base.html
@@ -1,84 +1,97 @@
 <!DOCTYPE html>
-{% load staticfiles %} {% load bootstrap3 %} {% load navbar %}
+{% load staticfiles %} {% load bootstrap4 %} {% load navbar %}
 <html lang="fr">
   <head>
     <title>{% block title %}La maraude{% endblock %}</title>
     {% bootstrap_css %}{% bootstrap_javascript %}
     <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 %}
     {% if stylesheets %}{% for stylesheet in stylesheets %}<link rel="stylesheet" type="text/css" href="{% static stylesheet %}" />{% endfor %}{% endif %}
   {% block extrahead %}{% endblock %}
   {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE" />{% endblock %}
   </head>
   <body {% block extra_body_attrs %}{% endblock %}>
-    <div class="container-fluid">
-      <!-- START: Navigation Bar -->
-      <div class="row">
-      <nav class="navbar navbar-static-top navbar-default">
-        <div class="container-fluid">
-          <!-- Brand and toggle get grouped for better mobile display -->
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="/">Maraude ALSA</a>
-          </div>
-          <!-- Collect the nav links, forms, and other content for toggling -->
-          <div class="collapse navbar-collapse" id="navbar-collapse">
-            <ul class="nav navbar-nav navbar-left">
-              {% if user.is_authenticated %}
-              <li class="dropdown {% active namespace="maraudes" append=True %}">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% bootstrap_icon "road" %}&nbsp; Maraudes</span></a>
-                {% include "maraudes/menu.html" %}
-              </li>
-              <li class="dropdown {% active namespace="notes" append=True %}">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% bootstrap_icon "pencil" %}&nbsp; Notes</span></a>
-                {% include "notes/menu.html" %}
-              </li>
-              {% else %}
-              <li {% active namespace="statistiques" %}><a href="{% url "statistiques:index" %}">{% bootstrap_icon "stats" %}&nbsp; Statistiques</a></li>
+    <!-- START: Navigation Bar -->
+    <nav class="navbar fixed-top navbar-dark bg-dark">
+        <a class="navbar-brand" href="/">Maraude ALSA</a>
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse" id="navbar-collapse">
+                    <ol class="breadcrumb navbar-text">
+        {% block breadcrumbs %}
+          <li>{{ page_header }}</li>
+          {% if page_header_small %}<li>{{ page_header_small }}</li>{% endif %}
+        {% endblock %}
+        </ol>
+        {% if user.is_authenticated %}
+        <ul class="nav navbar-nav navbar-right">
+          <li class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            Menu <span class="glyphicon glyphicon-menu-hamburger"></span>
+            </a>
+            <ul class="dropdown-menu">
+              <li><a href="{% url "statistiques:index" %}"><span class="glyphicon glyphicon-stats"></span> Statistiques</a></li>
+              {% if user.is_superuser %}
+              <li><a href="/admin/"><span class="glyphicon glyphicon-wrench"></span> Administration</a></li>
               {% endif %}
+              <li role="separator" class="divider"></li>
+              <li><a href="{% url "utilisateurs:index" %}"><span class="glyphicon glyphicon-user"></span> {{ user }}</a></li>
+              <li><a href="/logout/"><span class="glyphicon glyphicon-log-out"></span> Déconnexion</a></li>
             </ul>
-            <ol class="breadcrumb navbar-text">
-            {% block breadcrumbs %}
-              <li>{{ page_header }}</li>
-              {% if page_header_small %}<li>{{ page_header_small }}</li>{% endif %}
-            {% endblock %}
-            </ol>
+          </li>
+        </ul>
+        {% endif %}
+        </div><!-- /.navbar-collapse -->
+    </nav>
+    <!-- END: Navigation Bar -->
+    <div class="container-fluid">
+      <div class="row">
+        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+          <div class="sidebar-sticky">
             {% if user.is_authenticated %}
-            <ul class="nav navbar-nav navbar-right">
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                Menu <span class="glyphicon glyphicon-menu-hamburger"></span>
-                </a>
-                <ul class="dropdown-menu">
-                  <li><a href="{% url "statistiques:index" %}"><span class="glyphicon glyphicon-stats"></span> Statistiques</a></li>
-                  {% if user.is_superuser %}
-                  <li><a href="/admin/"><span class="glyphicon glyphicon-wrench"></span> Administration</a></li>
-                  {% endif %}
-                  <li role="separator" class="divider"></li>
-                  <li><a href="{% url "utilisateurs:index" %}"><span class="glyphicon glyphicon-user"></span> {{ user }}</a></li>
-                  <li><a href="/logout/"><span class="glyphicon glyphicon-log-out"></span> Déconnexion</a></li>
-                </ul>
+            <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted">
+              <span>Maraudes</span>
+            </h6>
+            <ul class="nav flex-column">
+              <li class="nav-item">
+                  <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>
+            <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>
+              </li>
+            </ul>
+            {% else %}
+            <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted">
+              <span>Menu</span>
+            </h6>
+            <ul class="nav flex-column">
+              <li class="nav-item">
+                  <a class="nav-link {% active namespace="statistiques" append=True %}" href="{% url "statistiques:index" %}">Statistiques</a>
               </li>
             </ul>
             {% endif %}
-          </div><!-- /.navbar-collapse -->
-        </div><!-- /.container-fluid -->
-      </nav>
-      </div>
-      <!-- END: Navigation Bar -->
-      <div class="row">
-        <div class="col-lg-10 col-lg-push-2 col-md-9 col-md-push-3">
+            {% block sidebar %}{% endblock %}
+          </div>
+        </nav>
+        <main role="main" class="col-md-10 ml-sm-auto px-4">
+          <div class="d-flex justify-content-between">
           {% bootstrap_messages %}
           {% block page_content %}{% endblock %}
-        </div>
-        <div class="col-lg-2 col-lg-pull-10 col-md-3 col-md-pull-9">
-            {% block sidebar %}{% endblock %}
-        </div>
+          </div>
+        </main>
       </div>
     </div>
   </body>
diff --git a/website/templates/index.html b/website/templates/index.html
index 593da97..3d386bc 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -1,12 +1,11 @@
 {% extends "base.html" %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block sidebar %}
   {% include "login.html" %}
 {% endblock %}
 
 {% block page_content %}
-<div class="col-md-8">
     <div class="jumbotron">
     <h2>Présentation</h2>
 <p>L'Association pour le Logement des Sans-Abri organise une maraude psychosociale dans la ville de Mulhouse.</p>
@@ -16,15 +15,10 @@
     <p>La mission de la Maraude est de créer du lien avec des personnes en errance dans l'objectif d'opérer un ancrage.</p>
     <p>Reconnaissables par leurs vêtements oranges, les maraudeurs sont disponibles pour informer et orienter vers les
         services compétents, ou simplement échanger autour d'un café offert.</p>
-</div>
-</div>
-<div class="col-md-4">
-    <div class="jumbotron">
-    <h2>{% bootstrap_icon "time" %} Horaires</h2>
+    <h2>Horaires</h2>
         <ul><li>lundi de 19h à 23h</li>
             <li>mardi de 19h à 23h</li>
             <li>jeudi de 19h à 23h</li>
             <li>vendredis de 16h à 20h</li></ul>
     </div>
-</div>
 {% endblock %}
