diff --git a/src/lib/Ressources.svelte.md b/src/lib/Ressources.svelte.md
deleted file mode 100644
index dba0965..0000000
--- a/src/lib/Ressources.svelte.md
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-  import Info from "$lib/Info.svelte";
-</script>
-
-# Ressources
-
-<Info info="Cette page est une liste de ressources généralistes sur le <i>live
-coding</i>. Au vu de l'objectif poursuivi par ce site, il est préférable de 
-mentionner les sources francophones en premier puis d'inclure des liens 
-généralistes." markdown=false />
-
-## Sites internet
-
-- [TOPLAP](https://toplap.org) : **TOPLAP** est le collectif historique qui a
-promu la pratique du _live coding_ à partir de sa fondation en 2004. Le
-collectif est toujours actif et a aujourd'hui évolué pour constituer un grand
-réseau international de chercheurs et d'artistes travaillant autour de la
-question du  _live coding_ dans l'ensemble les arts (son, visuels, chorégraphie,
-etc).
-- [Algorave](https://algorave.com) : un site de recensement des _Algoraves_,
-pour _Algorithmic Rave Parties_. Mouvement d'évènements lancé en 2012 par Nick
-Collins et Alex McLean, pour une pratique du _live coding_ dans un contexte
-festif, en imitation des _rave parties_ britanniques.
-
-- [Awesome Live Coding](https://github.com/toplap/awesome-livecoding) : Une
-longue liste de ressources liées au _live coding_ : logiciels, liens, sites,
-archives, etc. La liste est maintenue de longue date et elle reste active. Vous trouverez
-beaucoup de choses intéressantes là-bas.
-
-- [Lines Forum](https://llllllll.co/) : initialement, le forum de la communauté
-  **Monome**. Ce forum accueille toutefois beaucoup de musiciens et d'artistes
-intéressés par la programmation et le **DIY**. Beaucoup de choses intéressantes
-pour le _live coding_.
-
-- [SuperCollider Forum](https://scsynth.org/) : le forum officiel dédié à
-**SuperCollider**. **SuperCollider** est en grande partie responsable de
-l'émergence de la scène musicale du _live coding_, et pour de bonnes raisons.
-Foisonnant, infini, logiciel tentaculaire et puissant.
-
-## Ressources généralistes
-
-- [Labomedia](https://ressources.labomedia.org/live_coding) : collection de
-ressources pour le _creative coding_.
diff --git a/src/lib/Accueil.svelte.md b/src/lib/base/Accueil.svelte.md
similarity index 97%
rename from src/lib/Accueil.svelte.md
rename to src/lib/base/Accueil.svelte.md
index 68f388a..dbaa69b 100644
--- a/src/lib/Accueil.svelte.md
+++ b/src/lib/base/Accueil.svelte.md
@@ -1,5 +1,5 @@
 <script>
-     import Info from "$lib/Info.svelte"
+     import Info from "$lib/components/Info.svelte"
 </script>
 
 # Qu'est-ce que le live-coding ?
diff --git a/src/lib/Contact.svelte.md b/src/lib/base/Contact.svelte.md
similarity index 84%
rename from src/lib/Contact.svelte.md
rename to src/lib/base/Contact.svelte.md
index acad566..0988056 100644
--- a/src/lib/Contact.svelte.md
+++ b/src/lib/base/Contact.svelte.md
@@ -1,5 +1,5 @@
 <script>
-     import Info from "$lib/Info.svelte"
+     import Info from "$lib/components/Info.svelte"
 </script>
 
 # Contact
diff --git a/src/lib/Evenements.svelte.md b/src/lib/base/Evenements.svelte.md
similarity index 88%
rename from src/lib/Evenements.svelte.md
rename to src/lib/base/Evenements.svelte.md
index eacce3e..dbfa33f 100644
--- a/src/lib/Evenements.svelte.md
+++ b/src/lib/base/Evenements.svelte.md
@@ -1,6 +1,6 @@
 <script>
-     import Calendar from "$lib/Calendar.svelte";
-     import Info from "$lib/Info.svelte";
+     import Calendar from "$lib/components/Calendar.svelte";
+     import Info from "$lib/components/Info.svelte";
      import Evenements from "$lib/data/evenements.json";
      const passe = Evenements.passe;
      const avenir = Evenements.avenir;
@@ -27,5 +27,3 @@
 {#each passe as {title, description, date, link}, i}
 <Calendar date={date} description={description} title={title} link={link} />
 {/each}
-
-
diff --git a/src/lib/Membres.svelte.md b/src/lib/base/Membres.svelte.md
similarity index 87%
rename from src/lib/Membres.svelte.md
rename to src/lib/base/Membres.svelte.md
index 0376fef..bccbde1 100644
--- a/src/lib/Membres.svelte.md
+++ b/src/lib/base/Membres.svelte.md
@@ -1,5 +1,5 @@
 <script>
-     import Portrait from "$lib/Portrait.svelte";
+     import Portrait from "$lib/components/Portrait.svelte";
      import Membres from "$lib/data/membres.json";
      let members = Membres;
 </script>
diff --git a/src/lib/Outils.svelte.md b/src/lib/base/Outils.svelte.md
similarity index 90%
rename from src/lib/Outils.svelte.md
rename to src/lib/base/Outils.svelte.md
index e3b8af5..82d7402 100644
--- a/src/lib/Outils.svelte.md
+++ b/src/lib/base/Outils.svelte.md
@@ -1,5 +1,5 @@
 <script>
-     import SoftwareCard from "$lib/SoftwareCard.svelte";
+     import SoftwareCard from "$lib/components/SoftwareCard.svelte";
      import Software from "$lib/data/outils.json";
      let softwares = Software;
 </script>
diff --git a/src/lib/Presse.svelte.md b/src/lib/base/Presse.svelte.md
similarity index 87%
rename from src/lib/Presse.svelte.md
rename to src/lib/base/Presse.svelte.md
index dea1801..e3ff1dd 100644
--- a/src/lib/Presse.svelte.md
+++ b/src/lib/base/Presse.svelte.md
@@ -1,5 +1,5 @@
 <script>
-     import Press from "$lib/Press.svelte";
+     import Press from "$lib/components/Press.svelte";
      import Presse from "$lib/data/presse.json";
      let general_press = Presse;
 </script>
diff --git a/src/lib/Reseaux.svelte.md b/src/lib/base/Reseaux.svelte.md
similarity index 69%
rename from src/lib/Reseaux.svelte.md
rename to src/lib/base/Reseaux.svelte.md
index c547c6f..5157782 100644
--- a/src/lib/Reseaux.svelte.md
+++ b/src/lib/base/Reseaux.svelte.md
@@ -1,6 +1,6 @@
 <script>
-     import SoftwareCard from "$lib/SoftwareCard.svelte";
-     import Info from "$lib/Info.svelte";
+     import SoftwareCard from "$lib/components/SoftwareCard.svelte";
+     import Info from "$lib/components/Info.svelte";
      import Reseaux from "$lib/data/reseaux.json";
      let reseaux = Reseaux;
 </script>
@@ -10,6 +10,6 @@
 <Info info="Il existe plusieurs collectifs et groupes qui promeuvent la pratique du <i>live coding</i>. Cette page est un recensement des groupes connus. Si vous êtes actifs, ajoutez quelque chose ici." markdown=false />
 
 {#each reseaux as {name, place, description, image, link}, i}
-  <SoftwareCard name={name} creator={place} description={description}
+<SoftwareCard name={name} creator={place} description={description}
 image={image} link={link} />
 {/each}
diff --git a/src/lib/base/Ressources.svelte.md b/src/lib/base/Ressources.svelte.md
new file mode 100644
index 0000000..8ba8755
--- /dev/null
+++ b/src/lib/base/Ressources.svelte.md
@@ -0,0 +1,43 @@
+<script>
+  import Info from "$lib/components/Info.svelte";
+</script>
+
+# Ressources
+
+<Info info="Cette page est une liste de ressources généralistes sur le <i>live
+coding</i>. Au vu de l'objectif poursuivi par ce site, il est préférable de 
+mentionner les sources francophones en premier puis d'inclure des liens 
+généralistes." markdown=false />
+
+## Sites internet
+
+- [TOPLAP](https://toplap.org) : **TOPLAP** est le collectif historique qui a
+  promu la pratique du _live coding_ à partir de sa fondation en 2004. Le
+  collectif est toujours actif et a aujourd'hui évolué pour constituer un grand
+  réseau international de chercheurs et d'artistes travaillant autour de la
+  question du _live coding_ dans l'ensemble les arts (son, visuels, chorégraphie,
+  etc).
+- [Algorave](https://algorave.com) : un site de recensement des _Algoraves_,
+  pour _Algorithmic Rave Parties_. Mouvement d'évènements lancé en 2012 par Nick
+  Collins et Alex McLean, pour une pratique du _live coding_ dans un contexte
+  festif, en imitation des _rave parties_ britanniques.
+
+- [Awesome Live Coding](https://github.com/toplap/awesome-livecoding) : Une
+  longue liste de ressources liées au _live coding_ : logiciels, liens, sites,
+  archives, etc. La liste est maintenue de longue date et elle reste active. Vous trouverez
+  beaucoup de choses intéressantes là-bas.
+
+- [Lines Forum](https://llllllll.co/) : initialement, le forum de la communauté
+  **Monome**. Ce forum accueille toutefois beaucoup de musiciens et d'artistes
+  intéressés par la programmation et le **DIY**. Beaucoup de choses intéressantes
+  pour le _live coding_.
+
+- [SuperCollider Forum](https://scsynth.org/) : le forum officiel dédié à
+  **SuperCollider**. **SuperCollider** est en grande partie responsable de
+  l'émergence de la scène musicale du _live coding_, et pour de bonnes raisons.
+  Foisonnant, infini, logiciel tentaculaire et puissant.
+
+## Ressources généralistes
+
+- [Labomedia](https://ressources.labomedia.org/live_coding) : collection de
+  ressources pour le _creative coding_.
diff --git a/src/lib/Calendar.svelte b/src/lib/components/Calendar.svelte
similarity index 100%
rename from src/lib/Calendar.svelte
rename to src/lib/components/Calendar.svelte
diff --git a/src/lib/Info.svelte b/src/lib/components/Info.svelte
similarity index 100%
rename from src/lib/Info.svelte
rename to src/lib/components/Info.svelte
diff --git a/src/lib/Portrait.svelte b/src/lib/components/Portrait.svelte
similarity index 100%
rename from src/lib/Portrait.svelte
rename to src/lib/components/Portrait.svelte
diff --git a/src/lib/Press.svelte b/src/lib/components/Press.svelte
similarity index 100%
rename from src/lib/Press.svelte
rename to src/lib/components/Press.svelte
diff --git a/src/lib/SoftwareCard.svelte b/src/lib/components/SoftwareCard.svelte
similarity index 100%
rename from src/lib/SoftwareCard.svelte
rename to src/lib/components/SoftwareCard.svelte
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 92fec16..61fa696 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import Accueil from "$lib/Accueil.svelte.md";
-  import Evenements from "$lib/Evenements.svelte.md";
-  import Contact from "$lib/Contact.svelte.md";
-  import Presse from "$lib/Presse.svelte.md";
-  import Membres from "$lib/Membres.svelte.md";
-  import Outils from "$lib/Outils.svelte.md";
-  import Reseaux from "$lib/Reseaux.svelte.md";
-  import Ressources from "$lib/Ressources.svelte.md";
+  import Accueil from "$lib/base/Accueil.svelte.md";
+  import Evenements from "$lib/base/Evenements.svelte.md";
+  import Contact from "$lib/base/Contact.svelte.md";
+  import Presse from "$lib/base/Presse.svelte.md";
+  import Membres from "$lib/base/Membres.svelte.md";
+  import Outils from "$lib/base/Outils.svelte.md";
+  import Reseaux from "$lib/base/Reseaux.svelte.md";
+  import Ressources from "$lib/base/Ressources.svelte.md";
   const pages = {
     accueil: Accueil,
     evenements: Evenements,
diff --git a/src/routes/posts/+page.svelte b/src/routes/posts/+page.svelte
new file mode 100644
index 0000000..61fa696
--- /dev/null
+++ b/src/routes/posts/+page.svelte
@@ -0,0 +1,187 @@
+<script lang="ts">
+  import Accueil from "$lib/base/Accueil.svelte.md";
+  import Evenements from "$lib/base/Evenements.svelte.md";
+  import Contact from "$lib/base/Contact.svelte.md";
+  import Presse from "$lib/base/Presse.svelte.md";
+  import Membres from "$lib/base/Membres.svelte.md";
+  import Outils from "$lib/base/Outils.svelte.md";
+  import Reseaux from "$lib/base/Reseaux.svelte.md";
+  import Ressources from "$lib/base/Ressources.svelte.md";
+  const pages = {
+    accueil: Accueil,
+    evenements: Evenements,
+    membres: Membres,
+    outils: Outils,
+    réseaux: Reseaux,
+    presse: Presse,
+    ressources: Ressources,
+    contact: Contact,
+  };
+  let active_page = pages["accueil"];
+
+  let showMenu = false;
+
+  function toggleNavbar() {
+    showMenu = !showMenu;
+  }
+
+  /**
+   * Changes the active page based on the provided page name.
+   *
+   * @param {string} pageName - The name of the page to activate.
+   */
+  function changePage(pageName: string): void {
+    const pageKey = pageName.toLowerCase(); // Convert to lowercase to match the keys in the pages object.
+    if (pages[pageKey]) {
+      active_page = pages[pageKey];
+    }
+  }
+</script>
+
+<div>
+  <div class="bg-neutral-800 dark:bg-base-300">
+    <nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8">
+      <div class="flex items-center justify-between">
+        <a
+          on:click={() => changePage("Accueil")}
+          class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200 uppercase"
+          >livecoding.fr</a
+        >
+        <!-- Mobile menu button -->
+        <div on:click={toggleNavbar} class="flex md:hidden">
+          <button
+            type="button"
+            class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-6 h-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+      <div
+        class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
+          ? 'flex'
+          : 'hidden'}"
+      >
+        <a
+          on:click={() => changePage("Evenements")}
+          class="text-gray-100 hover:text-orange-300 flex md:hidden"
+          >Évènements</a
+        >
+        <a
+          on:click={() => changePage("Membres")}
+          class="text-gray-100 hover:text-orange-300 flex md:hidden">Membres</a
+        >
+        <a
+          on:click={() => changePage("Outils")}
+          class="text-gray-100 hover:text-orange-300 flex md:hidden">Outils</a
+        >
+        <a
+          on:click={() => changePage("Réseaux")}
+          class="text-gray-100 hover:text-orange-300 flex md:hidden">Réseaux</a
+        >
+        <a
+          on:click={() => changePage("Ressources")}
+          class="text-gray-100 hover:text-orange-300 flex md:hidden"
+          >Ressources</a
+        >
+        <a
+          on:click={() => changePage("Presse")}
+          class="text-gray-100 hover:text-orange-300 flex md:hidden">Presse</a
+        >
+        <a
+          on:click={() => changePage("Contact")}
+          class="text-gray-100 hover:text-orange-300 flex md:hidden">Contact</a
+        >
+      </div>
+    </nav>
+  </div>
+</div>
+
+<main class="bg-gray-100 dark:bg-base-100">
+  <div class="drawer lg:drawer-open">
+    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
+    <div class="drawer-content space-y-4 flex flex-col lg:px-16 px-4 py-8">
+      <svelte:component this={active_page} />
+    </div>
+    <div class="drawer-side">
+      <label
+        for="my-drawer-2"
+        aria-label="close sidebar"
+        class="drawer-overlay"
+      />
+      <ul
+        class="menu p-4 w-40 min-h-full bg-neutral-800 dark:bg-base-300 text-base-content"
+      >
+        <li class="text-xl">
+          <a
+            class="text-white hover:text-orange-300"
+            on:click={() => changePage("Evenements")}>Évènements</a
+          >
+        </li>
+        <li class="text-xl">
+          <a
+            class="text-white hover:text-orange-300"
+            on:click={() => changePage("Membres")}>Membres</a
+          >
+        </li>
+        <li class="text-xl">
+          <a
+            class="text-white hover:text-orange-300"
+            on:click={() => changePage("Outils")}>Outils</a
+          >
+        </li>
+        <li class="text-xl">
+          <a
+            class="text-white hover:text-orange-300"
+            on:click={() => changePage("Réseaux")}>Réseaux</a
+          >
+        </li>
+        <li class="text-xl">
+          <a
+            class="text-white hover:text-orange-300"
+            on:click={() => changePage("Ressources")}>Ressources</a
+          >
+        </li>
+
+        <li class="text-xl">
+          <a
+            class="text-white hover:text-orange-300"
+            on:click={() => changePage("Presse")}>Presse</a
+          >
+        </li>
+        <li class="text-xl">
+          <a
+            class="text-white hover:text-orange-300"
+            on:click={() => changePage("Contact")}>Contact</a
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <footer
+    class="footer ml-0 pl-0 pb-4 pt-4 bg-neutral-800 dark:bg-base-300 justify-between pr-16"
+  >
+    <p class="indent-4 text-bold text-white">Raphaël Forment</p>
+    <p>
+      <a class="pl-4" href="https://github.com/Bubobubobubobubo/livecodingfr"
+        >GitHub</a
+      >
+    </p>
+  </footer>
+</main>