diff --git a/config.yaml b/config.yaml
index ae4a769..612c1a4 100644
--- a/config.yaml
+++ b/config.yaml
@@ -21,6 +21,10 @@ markup:
     renderer:
       # Render newlines as <br>
       hardWraps: true
+  tableOfContents:
+    endLevel: 3
+    ordered: false
+    startLevel: 2
 
 # Disable all privacy unfriendly stuff
 privacy:
diff --git a/themes/chosto/layouts/_default/single.html b/themes/chosto/layouts/_default/single.html
index 62dfc37..d94f3ae 100644
--- a/themes/chosto/layouts/_default/single.html
+++ b/themes/chosto/layouts/_default/single.html
@@ -5,87 +5,84 @@
   with all other blog posts belonging to that case, emphasis to the current.
   Still use empty container if nothing to show for homogeneous layout
   -->
-  {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
-  {{ with .CurrentSection }}
-  {{ if .Params.Title }}
-  <div class="container">
-    <div class="columns mt-5 is-variable">
-      <aside class="menu column is-3 mt-2 is-align-self-flex-start">
-        <p class="menu-label">
-          Dans le dossier « <a href="{{ .Permalink }}">{{ .Params.Title }} »</a>...
-        </p>
-        <div class="menu-list">
-          {{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
-          {{ $postsSorted := (sort $posts "Date" )}}
-          {{ range $postsSorted }}
-          <a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
+  <div class="columns">
+    <aside class="menu column mt-2 pr-6 is-one-quarter">
+      {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
+      {{ with .CurrentSection }}
+      {{ if .Params.Title }}
+      <p class="menu-label">
+        <a href="{{ .Permalink }}">{{ .Params.Title }}</a>
+      </p>
+      <div class="menu-list">
+        {{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
+        {{ $postsSorted := (sort $posts "Date" )}}
+        {{ range $postsSorted }}
+        <a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
+        {{ end }}
+      </div>
+      {{ end }}
+      {{ end }}
+      {{ end }}
+    </aside>
+    <section class="column content is-half">
+      <div>
+        <article>
+          <!-- First thing is a legend for the hero image, if it exists -->
+          {{ with .Params.imgExplanation }}
+          <article class="message mb-5">
+            <div class="message-body content is-italic">
+              {{ . }}
+            </div>
+          </article>
+          {{ end }}
+          <!-- Second, a summary, if it exists -->
+          {{ with .Params.summary }}
+          <div class="message is-info">
+            <div class="message-body">
+              {{ . }}
+            </div>
+          </div>
+          {{ end }}
+          <!-- Third, an introductive message before ToC, if it exists -->
+          {{ with .Params.intro }}
+          <div class="message is-dark">
+            <div class="message-body">
+              {{ . }}
+            </div>
+          </div>
+          {{ end }}
+          <!-- Then, ToC if text has more than 600 words and not explicitly asked not to -->
+          {{ if (and (not .Params.notoc) (gt .WordCount 600)) }}
+          <div class="message is-link">
+            <div class="message-header">Sommaire</div>
+            <!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code -->
+            <div class="message-body has-text-left pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
+          </div>
+          {{ end }}
+          <!-- Finally, content! -->
+          {{ .Content }}
+        </article>
+      </div>
+      <hr />
+      <aside class="container level my-5">
+        <div class="level-left">
+          {{ with .PrevInSection }}
+          <div class="level-item">
+            <a class="button is-link is-light is-medium has-text-weight-bold" href="{{ .Permalink }}">&laquo;&nbsp;{{
+              .Title }}</a>
+          </div>
+          {{ end }}
+        </div>
+        <div class="level-right">
+          {{ with .NextInSection }}
+          <div class="level-item">
+            <a class="button is-link is-light is-medium has-text-weight-bold" href="{{ .Permalink }}">{{
+              .Title }}&nbsp;&raquo;</a>
+          </div>
           {{ end }}
         </div>
       </aside>
-    {{ else }}
-    <div class="container content is-max-desktop">
-      {{ end }}
-      {{ end }}
-      {{ else }}
-      <div class="container content is-max-desktop">
-      {{ end }}
-      <section class="column content mx-6">
-        <div>
-          <article>
-            <!-- First thing is a legend for the hero image, if it exists -->
-            {{ with .Params.imgExplanation }}
-            <article class="message mb-5">
-              <div class="message-body content is-italic">
-                {{ . }}
-              </div>
-            </article>
-            {{ end }}
-            <!-- Second, a summary, if it exists -->
-            {{ with .Params.summary }}
-            <div class="message is-info">
-              <div class="message-body">
-                {{ . }}
-              </div>
-            </div>
-            {{ end }}
-            <!-- Third, an introductive message before ToC, if it exists -->
-            {{ with .Params.intro }}
-            <div class="message is-dark">
-              <div class="message-body">
-                {{ . }}
-              </div>
-            </div>
-            {{ end }}
-            <!-- Then, ToC if text has more than 600 words and not explicitly asked not to -->
-            {{ if (and (not .Params.notoc) (gt .WordCount 600)) }}
-            <div class="message is-link">
-              <div class="message-header">Sommaire</div>
-              <!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code -->
-              <div class="message-body pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
-            </div>
-            {{ end }}
-            <!-- Finally, content! -->
-            {{ .Content }}
-          </article>
-        </div>
-        <hr/>
-        <aside class="container level my-5 is-mobile">
-          <div class="level-left">
-            {{ with .PrevInSection }}
-            <div class="level-item">
-              <a class="button is-link is-light is-medium is-responsive has-text-weight-bold" href="{{ .Permalink }}">&laquo;&nbsp;{{ .Title }}</a>
-            </div>
-            {{ end }}
-          </div>
-          <div class="level-right">
-            {{ with .NextInSection }}
-            <div class="level-item">
-              <a class="button is-link is-light is-medium is-responsive has-text-weight-bold" href="{{ .Permalink }}">{{ .Title }}&nbsp;&raquo;</a>
-            </div>
-            {{ end }}
-          </div>
-        </aside>
-      </section>
-    </div>
-    </div>
-{{ end }}
+    </section>
+  </div>
+  </div>
+  {{ end }}
\ No newline at end of file
diff --git a/themes/chosto/layouts/partials/head.html b/themes/chosto/layouts/partials/head.html
index 3e9a1fd..a6513c0 100644
--- a/themes/chosto/layouts/partials/head.html
+++ b/themes/chosto/layouts/partials/head.html
@@ -7,19 +7,22 @@
   <link rel="stylesheet" href="{{ $styleCustom.Permalink }}">
   <!-- RSS feed -->
   {{ range .AlternativeOutputFormats -}}
-    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+  {{ printf `
+  <link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
   {{ end -}}
-
+  <!-- Default to home image -->
+  {{ $image := resources.Get "img/home.jpg" }}
+  <!-- If header image exists in current context, use it instead -->
+  {{ with .Resources.GetMatch "top.jpg" }}
+  {{ $image = . }}
+  {{ end }}
+  {{ $image = $image.Resize "3000x" }}
   <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
   <style>
-    /* Default to home image */
-    {{ $image := resources.Get "img/home.jpg" }}
-    /* If header image exists in current context, use it instead */
-    {{ with .Resources.GetMatch "top.jpg" }}
-      {{ $image = . }}
-    {{ end }}
-    {{ $image = $image.Resize "3000x" }}
-    .has-bg-img { background: url('{{ $image.Permalink }}')center center; background-size:cover; }
+    .has-bg-img {
+      background: url('{{ $image.Permalink }}')center center;
+      background-size: cover;
+    }
   </style>
   <!-- Favico -->
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
@@ -33,4 +36,4 @@
   <meta name="msapplication-TileImage" content="favicon-144.png">
   <meta name="msapplication-TileColor" content="#FFFFFF">
   <title>{{ .Site.Title }}</title>
-</head>
+</head>
\ No newline at end of file
diff --git a/themes/chosto/layouts/partials/header.html b/themes/chosto/layouts/partials/header.html
index 4215b5c..11feb3b 100644
--- a/themes/chosto/layouts/partials/header.html
+++ b/themes/chosto/layouts/partials/header.html
@@ -3,59 +3,65 @@
 <!-- Display background only for regular pages, or home -->
 {{ $background := in "page home" .Kind }}
 <header>
-  <section class='hero has-text-centered {{ if $background }}is-large has-bg-img is-info {{ end }}'>
-    <div class="hero-head mx-5">
-      <div class="level subtitle is-5">
-        <div class="level-left">
-          {{ with .Params.imgLicence }}
-          <div class="level-item">
-             Image d'illustration {{ . }}
-          </div>
-          {{ end }}
-        </div>
-        <div class="level-right">
-          <div class="level-item">
-            {{ with .Params.categories }}
-            <div class="tags colums is-vcentered mb-2 mt-5">
-              {{ range . }}
-              <span class="tag is-info is-light is-large mr-4"><a href="{{ "categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
-              {{ end }}
+  <section class='hero has-text-centered {{ if $background }}is-large is-info has-bg-img{{ end }}'>
+    <div class="blur">
+      <div class="hero-head mx-5">
+        <div class="level subtitle is-5">
+          <div class="level-left">
+            {{ with .Params.imgLicence }}
+            <div class="level-item">
+              Image d'illustration {{ . }}
             </div>
             {{ end }}
           </div>
-        </div>
-      </div>
-
-    </div>
-    <div class="hero-body {{ if not $background }}pb-0{{ end }} content has-text-centered">
-      <p class="title is-1 is-uppercase">{{ .Title }}</p>
-      {{ with .Params.subtitle }}
-      <p class="subtitle is-2">{{ . }}</p>
-      {{ end }}
-    </div>
-    <!-- Words and date stuff makes sens only for blog posts, not other pages -->
-    {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
-    <div class="hero-foot mb-5 mx-5 content">
-      <div class="level subtitle is-5">
-        <div class="level-left">
-          <div class="level-item has-text-left">
-            <time class="" datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
-              <p class="mb-2">📅&nbsp;&nbsp;Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }}</strong></p>
-              <p>✏️&nbsp;&nbsp;Dernière modification le <strong>{{ .Lastmod.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Lastmod.Month) }} {{ .Lastmod.Year }}</strong></p>
-            </time>
+          <div class="level-right">
+            <div class="level-item">
+              {{ with .Params.categories }}
+              <div class="tags colums is-vcentered mb-2 mt-5">
+                {{ range . }}
+                <span class="tag is-info is-light is-large mr-4"><a href="{{ " categories" | absURL }}/{{ . | urlize
+                    }}">{{ . }}</a></span>
+                {{ end }}
+              </div>
+              {{ end }}
+            </div>
           </div>
         </div>
-        <div class="level-right">
-          <div class="level-item has-text-right">
-            <div>
-              <p class="mb-2">🕑&nbsp;&nbsp;Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture</p>
-              <p>#️&nbsp;<strong>{{ .FuzzyWordCount }} mots</strong></p>
+
+      </div>
+      <div class="hero-body {{ if not $background }}pb-0{{ end }} content container has-text-centered">
+        <p class="title is-1 is-uppercase">{{ .Title }}</p>
+        {{ with .Params.subtitle }}
+        <p class="subtitle is-2">{{ . }}</p>
+        {{ end }}
+      </div>
+      <!-- Words and date stuff makes sens only for blog posts, not other pages -->
+      {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
+      <div class="hero-foot mb-5 mx-5 content">
+        <div class="level subtitle is-5">
+          <div class="level-left">
+            <div class="level-item has-text-left">
+              <time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
+                <p class="mb-2">📅&nbsp;&nbsp;Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr
+                    (printf "%d" .Date.Month) }} {{ .Date.Year }}</strong></p>
+                <p>✏️&nbsp;&nbsp;Dernière modification le <strong>{{ .Lastmod.Day }} {{ index $.Site.Data.months_fr
+                    (printf "%d" .Lastmod.Month) }} {{ .Lastmod.Year }}</strong></p>
+              </time>
+            </div>
+          </div>
+          <div class="level-right is-hidden-touch">
+            <div class="level-item has-text-right">
+              <div>
+                <p class="mb-2">🕑&nbsp;&nbsp;Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture
+                </p>
+                <p>#️&nbsp;<strong>{{ .FuzzyWordCount }} mots</strong></p>
+              </div>
             </div>
           </div>
         </div>
       </div>
+      {{ end }}
     </div>
-    {{ end }}
   </section>
 </header>
 {{ end }}
\ No newline at end of file
diff --git a/themes/chosto/static/css/custom.css b/themes/chosto/static/css/custom.css
index 9bc408d..51c84f4 100644
--- a/themes/chosto/static/css/custom.css
+++ b/themes/chosto/static/css/custom.css
@@ -1,24 +1,73 @@
 @font-face {
   font-family: 'Nunito';
-  src: 
-      url('../font/Nunito-Regular.woff2') format('woff2'),
-      url('../font/Nunito-Regular.woff') format('woff'),
-      url('../font/Nunito-Regular.ttf') format('truetype');
+  src:
+    url('../font/Nunito-Regular.woff2') format('woff2'),
+    url('../font/Nunito-Regular.woff') format('woff'),
+    url('../font/Nunito-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }
 
-.has-equal-height {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+/* Make the parent background blur under this element */
+.blur {
+  backdrop-filter: blur(3px);
 }
 
-.content {
+/* Useful to force cards to have the same height */
+.has-equal-height {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Justify all content but not titles */
+p:not(.title,.subtitle) {
   text-align: justify;
 }
 
+/* New font is "smaller" in feeling */
 .navbar-dropdown {
   font-size: 1rem;
+}
+
+/* Add counter to title */
+body {
+  counter-reset: h2
+}
+
+h2 {
+  counter-reset: h3
+}
+
+h3 {
+  counter-reset: h4
+}
+
+h4 {
+  counter-reset: h5
+}
+
+article h2:before {
+  counter-increment: h2;
+  content: counter(h2) ". "
+}
+
+article h3:before {
+  counter-increment: h3;
+  content: counter(h2) "." counter(h3) ". "
+}
+
+article h4:before {
+  counter-increment: h4;
+  content: counter(h2) "." counter(h3) "." counter(h4) ". "
+}
+
+article .toc__menu ul {
+  counter-reset: item
+}
+
+article .toc__menu li a:before {
+  content: counters(item, ".") ". ";
+  counter-increment: item
 }
\ No newline at end of file