diff --git a/.yarnrc.yml b/.yarnrc.yml
new file mode 100644
index 0000000..f34f383
--- /dev/null
+++ b/.yarnrc.yml
@@ -0,0 +1,3 @@
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index a137be9..1bda9a6 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -9,14 +9,17 @@ export default {
 		nav: [
 			{
 				text: "Dev",
-				items: [
-					{ text: "Sommaire", link: "/dev/" },
-					{ text: "B1", link: "/dev/B1/" },
-					{ text: "B2", link: "/dev/B2/" },
-					{ text: "B3", link: "/dev/B3/" }
-				]
+				link: "/dev/",
+				activeMatch: "/dev/"
+				// items: [
+				// 	{ text: "Sommaire", link: "/dev/" },
+				// 	{ text: "B1", link: "/dev/B1/" },
+				// 	{ text: "B2", link: "/dev/B2/" },
+				// 	{ text: "B3", link: "/dev/B3/" }
+				// ]
 			},
-			{ text: "Design", link: "/design/", activeMatch: "/design/" }
+			{ text: "Design", link: "/design/", activeMatch: "/design/" },
+			{ text: "À propos", link: "/a-propos", activeMatch: "/a-propos" }
 		],
 		sidebar: {
 			// This sidebar gets displayed when user is
@@ -35,7 +38,7 @@ export default {
 					collapsible: true,
 					collapsed: true,
 					items: [
-						{ text: "Sommaire", link: "/dev/B1/" },
+						{ text: "Sommaire B1", link: "/dev/B1/" },
 						{ text: "Introduction", link: "/dev/B1/introduction" },
 						{ text: "HTML", link: "/dev/B1/html" }
 					]
@@ -45,7 +48,7 @@ export default {
 					collapsible: true,
 					collapsed: true,
 					items: [
-						{ text: "Sommaire", link: "/dev/B2/" },
+						{ text: "Sommaire B2", link: "/dev/B2/" },
 						{ text: "Introduction", link: "/dev/B2/introduction" },
 						{ text: "HTML", link: "/dev/B2/html" }
 					]
@@ -55,7 +58,7 @@ export default {
 					collapsible: true,
 					collapsed: true,
 					items: [
-						{ text: "Sommaire", link: "/dev/B3/" },
+						{ text: "Sommaire B3", link: "/dev/B3/" },
 						{ text: "Introduction", link: "/dev/B3/introduction" },
 						{ text: "HTML", link: "/dev/B3/html" }
 					]
diff --git a/docs/.vitepress/theme/components/CustomBlockquote.vue b/docs/.vitepress/theme/components/CustomBlockquote.vue
new file mode 100644
index 0000000..b8f85cd
--- /dev/null
+++ b/docs/.vitepress/theme/components/CustomBlockquote.vue
@@ -0,0 +1,13 @@
+<template>
+	<blockquote>
+		<slot>YELLO</slot>
+	</blockquote>
+</template>
+
+<script>
+export default {
+	name: "CustomBlockquote"
+};
+</script>
+
+<style scoped></style>
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index ab1a322..9b1dda4 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -13,3 +13,8 @@ a:hover {
 .prev-next a:hover {
 	text-decoration: none;
 }
+
+.VPPage {
+	max-inline-size: 70ch;
+	margin-inline: auto;
+}
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index c495bc1..d0b34c2 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,4 +1,21 @@
 import DefaultTheme from "vitepress/theme";
+import PageLayout from "./layouts/PageLayout.vue";
 import "./custom.css";
 
-export default DefaultTheme;
+const modules = import.meta.globEager("./components/**/*.vue");
+const components = [];
+
+for (const path in modules) {
+	components.push(modules[path].default);
+}
+
+export default {
+	...DefaultTheme,
+	// Layout: PageLayout,
+	enhanceApp({ app }) {
+		// import all components globally
+		components.forEach(comp => {
+			app.component(comp.name, comp);
+		});
+	}
+};
diff --git a/docs/.vitepress/theme/layouts/PageLayout.vue b/docs/.vitepress/theme/layouts/PageLayout.vue
new file mode 100644
index 0000000..36545c1
--- /dev/null
+++ b/docs/.vitepress/theme/layouts/PageLayout.vue
@@ -0,0 +1,18 @@
+<script setup>
+import DefaultTheme from "vitepress/theme";
+const { Layout } = DefaultTheme;
+
+import { useData } from "vitepress";
+const { page } = useData();
+</script>
+
+<template>
+	<Layout>
+		<main role="main">
+			<h1>{{ page.title }}</h1>
+			<slot name="content" />
+		</main>
+	</Layout>
+</template>
+
+<style scoped></style>
diff --git a/docs/a-propos.md b/docs/a-propos.md
new file mode 100644
index 0000000..45f5991
--- /dev/null
+++ b/docs/a-propos.md
@@ -0,0 +1,35 @@
+---
+layout: doc
+---
+
+# À propos
+
+Ce site a pour vocation d'être un support pour mes cours de développement front-end. Il permettra aux élèves (et à moi-même) d'avoir une référence commune et à jour.
+
+## Objectifs
+
+Ce site existe pour faciliter la préparation et la mise à jour de mes cours. Il offre également la possibilité aux élèves de revoir globalement leurs cours ou de revenir sur un concept précis.
+
+::: warning 👀 Je vous vois venir
+Cette ressource ne remplace pas la prise de notes ni le travail en classe et chez soi.
+:::
+
+À moyen terme, j'aimerais que ce site puisse être alimenté par plusieurs enseignants.
+
+## Contributeur
+
+- [Nicolas](https://www.nardu.in)
+
+## Utilisation
+
+Les contenus présents sur ce site sont publiés sous la licence [CC BY 4.0.](https://creativecommons.org/licenses/by-sa/4.0/)
+
+Cela signifie que vous pouvez **partager** et **modifier** les contenus tant que vous citez ce site comme étant la source et que vous les publiez sous la même licence.
+
+## Données personnelles
+
+Aucune donnée n'est collectée.
+
+## Code source
+
+Le code source sera bientôt disponible afin de permettre l'édition via <span lang="en">pull request</span>.
diff --git a/docs/dev/code-camp/index.md b/docs/dev/code-camp/index.md
index 9a2fb0f..7891a1b 100644
--- a/docs/dev/code-camp/index.md
+++ b/docs/dev/code-camp/index.md
@@ -149,7 +149,7 @@ On parle de « règle CSS ». Une règle se construit ainsi :
 - `color` est la propriété
 - `blue` est la valeur
 - `color: blue;` est la déclaration
-- l'ensemble forme la règle
+- l'ensemble forme **la règle**
 
 :::
 
@@ -209,6 +209,14 @@ Les deux éléments de la cascade que nous utiliseront le plus ici sont **la sp
 
 ## Accessibilité
 
+D'après [Access42 :](https://access42.net/)
+
+> L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.
+
+Selon moi, développer de manière accessible devrait être la norme. La façon normale de créer un site et non pas un correctif ou une surcouche à appliquer.
+
+C'est pourquoi les contenus ici présents intègrent (le plus possible) les bonnes pratiques d'accessibilité numérique par défaut.
+
 ## Mise en ligne
 
 ## Bonus
diff --git a/docs/dev/index.md b/docs/dev/index.md
index b7209af..bb24703 100644
--- a/docs/dev/index.md
+++ b/docs/dev/index.md
@@ -13,6 +13,7 @@ Nous aborderons l'apprentissage du développement web par le prisme de [l’acce
 
 ## Niveaux
 
-- [B1 — première année](./B1/)
-- [B2 — deuxième année](./B2/)
-- [B3 — troisième année](./B3/)
+- [B1 — Découverte et bases](./B1/)
+- [B2 — Approfondissement](./B2/)
+- [B3 — Expertise web](./B3/)
+- [Code Camp — Découverte intensive](./code-camp/)
diff --git a/package.json b/package.json
index 503e034..ef16206 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
 		"serve": "vitepress serve docs"
 	},
 	"devDependencies": {
-		"vitepress": "^1.0.0-alpha.4",
+		"vitepress": "^1.0.0-draft.8",
 		"vue": "^3.2.37"
 	}
 }
diff --git a/yarn.lock b/yarn.lock
index c23095c..c41a75f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1824,12 +1824,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "vitepress-starter@workspace:."
   dependencies:
-    vitepress: ^1.0.0-alpha.4
+    vitepress: ^1.0.0-draft.8
     vue: ^3.2.37
   languageName: unknown
   linkType: soft
 
-"vitepress@npm:^1.0.0-alpha.4":
+"vitepress@npm:^1.0.0-draft.8":
   version: 1.0.0-draft.8
   resolution: "vitepress@npm:1.0.0-draft.8"
   dependencies: