diff --git a/assets/css/src/header.css b/assets/css/src/header.css
index 7367192..f9a62bf 100644
--- a/assets/css/src/header.css
+++ b/assets/css/src/header.css
@@ -1,12 +1,13 @@
 #main-header {
   position: fixed;
-  z-index: 1;
+  z-index: 3;
   top: 0;
   left: 0;
   box-sizing: border-box;
   width: 100vw;
-  height: calc(var(--unit--vertical) * 5);
+  height: calc(var(--unit--vertical) * 4);
   padding: var(--unit--vertical) var(--unit--horizontal);
+  padding-bottom: 0;
   transition: height 0.2s ease-in-out;
 }
 #logo {
diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css
index 058d4f1..4fc0ed0 100644
--- a/assets/css/src/nav.css
+++ b/assets/css/src/nav.css
@@ -1,15 +1,17 @@
-#entries {
+/* ================= ENTRIES BTNS ================= */
+#entry-btns {
   position: sticky;
   top: calc(var(--unit--vertical) * 8);
   display: flex;
   justify-content: space-between;
+  z-index: 2;
 }
 
 .entry-btn {
   transition: all 0.5s var(--curve-sine);
 }
 
-[data-template="linear"] #entries {
+[data-template="linear"] #entry-btns {
   transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4));
 }
 
@@ -25,17 +27,67 @@
   margin-right: var(--unit--horizontal);
 }
 
-#entries.minimized {
+#entry-btns.minimized {
   color: var(--color-secondary);
 }
-#entries.minimized .entry-btn::before,
-#entries.minimized .entry-btn::after {
+#entry-btns.minimized .entry-btn::before,
+#entry-btns.minimized .entry-btn::after {
   font-weight: bold;
 }
 
-#entries.minimized .entry-btn--left {
+#entry-btns.minimized .entry-btn--left {
   margin-left: calc(-4px - var(--width));
 }
-#entries.minimized .entry-btn--right {
+#entry-btns.minimized .entry-btn--right {
   margin-right: calc(-4px - var(--width));
 }
+
+/* ================= PANELS ================= */
+.panel {
+  position: fixed;
+  width: 100%;
+  height: 100svh;
+  top: 0;
+  background-color: #000;
+  outline: 1px solid #fff;
+  transition: all 0.5s var(--curve-sine);
+  z-index: 2;
+  padding: 0 var(--unit--horizontal);
+  padding-top: calc(var(--unit--vertical) * 5);
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.panel--left {
+  left: calc(-100% - var(--unit--horizontal) * 2 - 1px);
+}
+.panel--right {
+  right: calc(-100% - var(--unit--horizontal) * 2 - 1px);
+}
+
+.panel--right.open {
+  right: 0;
+}
+.panel--left.open {
+  left: 0;
+}
+
+.panel-close {
+  position: fixed;
+  top: 0;
+  border: none;
+  outline: none;
+  height: 100svh;
+  width: calc(var(--unit--horizontal) * 2);
+  font-size: 0.8rem;
+  display: flex;
+}
+
+.panel--left .panel-close {
+  right: 0;
+  justify-content: flex-end;
+}
+
+.panel-close::after {
+  content: "◀";
+}
diff --git a/assets/js/script.js b/assets/js/script.js
index 9b5cb85..6bd7fb5 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -74,7 +74,7 @@ function roundToNearestHalf(num) {
 }
 
 function enableToggleEntriesVisibility() {
-  const entries = document.querySelector("#entries");
+  const entries = document.querySelector("#entry-btns");
 
   const leftBtn = entries.querySelector(".entry-btn--left");
   const rightBtn = entries.querySelector(".entry-btn--right");
@@ -116,6 +116,11 @@ function toggleLogoState() {
   }
 }
 
+function togglePanel(side) {
+  document.querySelector(`.panel--${side}`).classList.toggle("open");
+  document.querySelector("#main-header").classList.remove("minimized");
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   window.window.scrollTo({
     top: 0,
diff --git a/site/snippets/header.php b/site/snippets/header.php
index f480da4..cbb1169 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -5,11 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title><?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?></title>
     <link rel="stylesheet" href="<?= url('assets/css/style.css') . '?version-cache-prevent' . rand(0, 1000) ?>" />
-    <script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" type="module" defer></script>
+    <script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" defer></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <meta name="robots" content="noindex, nofollow, noarchive">
   </head>
-  <body class="grid" data-template="<?= $page->template() ?>">
+  <body class="grid" data-template="<?= $page->template() ?>" >
     <header id="main-header">
       <div id="logo" >
         <a href="/" class="no-line">
diff --git a/site/snippets/nav.php b/site/snippets/nav.php
index 265007d..44d8d99 100644
--- a/site/snippets/nav.php
+++ b/site/snippets/nav.php
@@ -1,4 +1,58 @@
-<nav id="entries">
-  <button class="entry-btn entry-btn--left">années</button>
-  <button class="entry-btn entry-btn--right">categories</button>
-</nav>
\ No newline at end of file
+
+<div id="entry-btns">
+  <button
+    class="entry-btn entry-btn--left"
+    onclick="togglePanel('left')"
+  >années</button>
+  <button
+    class="entry-btn entry-btn--right"
+    onclick="togglePanel('right')"
+  >categories</button>
+</div>
+
+<nav class="panel panel--left">
+  <ul 
+    x-show="activeTab === 'texts'">
+    <?php foreach($kirby->collection('years') as $year): ?>
+        <div 
+          x-data='{
+            isOpen: false
+          }'
+          :class="isOpen ? '' : 'short'"
+          class="
+            texts__year 
+            | full-width 
+            flex column 
+            bottom"
+          style="
+            --content: center; 
+            --bottom: 2;"
+        >
+          <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
+          <div class="year__edito">
+            <?= $year->edito() ?>
+          </div>
+          <button 
+            :class="isOpen ? 'open' : 'close'"
+            class="see-more toggle left" @click="isOpen = !isOpen">Lire</button>
+        </div>
+      <?php foreach($year->children() as $article): ?>
+          <?php snippet(
+              'text-item',
+              [
+                                                                                                  'article' => $article
+                                                                                                ]
+          ) ?>
+      <?php endforeach ?>
+    <?php endforeach ?>
+  </ul>
+  <button 
+    onclick="togglePanel('left')" 
+    class="panel-close">
+  </button>
+</nav>
+
+
+<nav 
+  onclick="togglePanel('right')" 
+  class="panel panel--right"></nav>
\ No newline at end of file
diff --git a/site/snippets/tabs.php b/site/snippets/tabs.php
index cbd947d..1664313 100644
--- a/site/snippets/tabs.php
+++ b/site/snippets/tabs.php
@@ -70,8 +70,8 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
             <?php snippet(
                 'text-item',
                 [
-                    'article' => $article
-                  ]
+                                'article' => $article
+                              ]
             ) ?>
           <?php endif ?>
         <?php endforeach ?>