diff --git a/site/templates/archive.html b/site/templates/archive.html
deleted file mode 100644
index 7fe1d03..0000000
--- a/site/templates/archive.html
+++ /dev/null
@@ -1,2 +0,0 @@
-Vous pouvez trouvez ici toutes nos publications :
-$partial("templates/posts.html")$
diff --git a/site/templates/authors.html b/site/templates/authors.html
index 9df84a8..75a41bc 100644
--- a/site/templates/authors.html
+++ b/site/templates/authors.html
@@ -1,3 +1,8 @@
-<ul>
-  <li>$allauthors$</li>
-</ul>
+<div class="panel-tabs">
+  <a href="/archives.html">Récentes</a>
+  <a href="/tags.html">Catégories</a>
+  <a href="/about.html#poles">Pôles</a>
+  <a class="is-active" href="#">Auteur·e·s</a>
+</div>
+
+$authors$
diff --git a/site/templates/default.html b/site/templates/default.html
index 80a7efa..21e03ec 100644
--- a/site/templates/default.html
+++ b/site/templates/default.html
@@ -1,34 +1,92 @@
 <!doctype html>
 <html lang="fr">
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>DGNum - $title$</title>
-        <link rel="stylesheet" href="/css/default.css" />
-    </head>
-    <body>
-        <header>
-            <div class="logo">
-                <a href="/">Délégation Générale Numérique</a>
-            </div>
-            <nav>
-                <a href="/">Accueil</a>
-                <a href="/about.html">À propos</a>
-                <a href="/services.html">Services</a>
-                <a href="/FAQ.html">FAQ</a>
-                <a href="/archive.html">Archives</a>
-                <a href="/contact.html">Contact</a>
-            </nav>
-        </header>
 
-        <main role="main">
-            <h1>$title$</h1>
-            $body$
-        </main>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+
+  <title>DGNum - $title$</title>
+
+  <link rel="stylesheet" href="/css/bulma.min.css" />
+  <link rel="stylesheet" href="/css/dgnum.css" />
+  <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" />
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+
+      // Get all "navbar-burger" elements
+      const navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+      // Add a click event on each of them
+      navbarBurgers.forEach(el => {
+        el.addEventListener('click', () => {
+
+          // Get the target from the "data-target" attribute
+          const target = document.getElementById(el.dataset.target);
+
+          // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+          el.classList.toggle('is-active');
+          target.classList.toggle('is-active');
+        });
+      });
+    });
+  </script>
+</head>
+
+<body class="hero is-fullheight">
+  <header>
+    <nav class="navbar has-shadow mb-2">
+      <div class="navbar-brand">
+        <a class="navbar-item" href="/">
+          <img src="/images/dgnum-logo.svg">
+        </a>
+
+        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+      <div class="navbar-menu" id="navbar">
+        <a class="navbar-item" href="/about.html">À propos</a>
+        <a class="navbar-item" href="/services.html">Services</a>
+        <a class="navbar-item" href="/faq.html">FAQ</a>
+        <a class="navbar-item" href="/archives.html">Archives</a>
+        <a class="navbar-item" href="/contact.html">Contact</a>
+      </div>
+    </nav>
+  </header>
+
+  <div class="columns is-centered mt-2">
+    <main class="column is-10 mx-4" role="main">
+      $if(index)$
+      $else$
+      $if(title)$<h1 class="title is-2">$title$</h1>$endif$
+      $endif$
+
+      $if(in_content)$
+      <div class="content">
+        $body$
+      </div>
+      $else$
+      $body$
+      $endif$
+    </main>
+  </div>
+
+  <footer class="footer mt-5">
+    <div class="content has-text-centered">
+      <p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title"
+          rel="cc:attributionURL" href="">This page of the DGNum's website</a> by $if(authorLicense)$ $authorLicense$
+        $endif$<a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="/">Délégation Générale
+          Numérique (DGNum)</a> is licensed under <a href="http://creativecommons.org/licenses/by/4.0/?ref=chooser-v1"
+          target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY 4.0<img
+            style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+            src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img
+            style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+            src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"></a></p>
+    </div>
+  </footer>
+</body>
 
-        <footer>
-          <p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="">This page of the DGNum's website</a> by $if(authorLicense)$ $authorLicense$ $endif$<a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="/">Délégation Générale Numérique (DGNum)</a> is licensed under <a href="http://creativecommons.org/licenses/by/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"></a></p>
-        </footer>
-    </body>
 </html>
diff --git a/site/templates/division.html b/site/templates/division.html
new file mode 100644
index 0000000..50d9326
--- /dev/null
+++ b/site/templates/division.html
@@ -0,0 +1,8 @@
+$body$
+
+$if(posts)$
+<hr>
+<div class="subtitle is-6">Liste des articles rattachés à ce pôle :</div>
+
+$partial("templates/posts.html")$
+$endif$
diff --git a/site/templates/post.html b/site/templates/post.html
index 9738ceb..800a507 100644
--- a/site/templates/post.html
+++ b/site/templates/post.html
@@ -2,18 +2,18 @@
     <section class="header">
         Posté le $date$
         $if(author)$
-            $author$
+        $author$
         $endif$
     </section>
     <ul class="poles">$if(poles)$
-      $poles$
-    $endif$
+        $poles$
+        $endif$
     </ul>
     <ul class="tags">$if(tags)$
-      $tags$
-    $endif$
+        $tags$
+        $endif$
     </ul>
-    <section>
+    <section class="content">
         $body$
     </section>
 </article>
diff --git a/site/templates/posts.html b/site/templates/posts.html
index b060090..5332ec4 100644
--- a/site/templates/posts.html
+++ b/site/templates/posts.html
@@ -1,10 +1,7 @@
-<ul>
-    $for(posts)$
-        <li>
-          $date$ - <a href="$url$">$title$</a><br>
-          $if(abstract)$
-              $abstract$
-          $endif$
-        </li>
-    $endfor$
-</ul>
+$for(posts)$
+<a href="$url$" class="panel-block">
+  <span class="tag mr-3">$date$</span>
+
+  $title$
+</a>
+$endfor$
diff --git a/site/templates/tags.html b/site/templates/tags.html
index 3fe1dea..f237045 100644
--- a/site/templates/tags.html
+++ b/site/templates/tags.html
@@ -1,3 +1,8 @@
-<ul>
-  <li>$alltags$</li>
-</ul>
+<div class="panel-tabs">
+  <a href="/archives.html">Récentes</a>
+  <a class="is-active" href="#">Catégories</a>
+  <a href="/about.html#poles">Pôles</a>
+  <a href="/authors.html">Auteur·e·s</a>
+</div>
+
+$tags$
