diff --git a/resources/docs/docs/chapters/tp/arrow-functions.md b/resources/docs/docs/chapters/tp/arrow-functions.md
index c8ab85afd6f1b45a839e3e2d1b5fac72da2bedcb..f833eaf6bd42c0c430cc9c82db47e9e78c66251b 100644
--- a/resources/docs/docs/chapters/tp/arrow-functions.md
+++ b/resources/docs/docs/chapters/tp/arrow-functions.md
@@ -14,8 +14,7 @@ _ES6_ brought a new syntax to declare functions: the [arrow functions](https://d
 ## `functions` vs `() => {...}` <Diy />
 
 Open `game.js` and look at the `goToScore()` method. It is called once all card pairs are flipped and waits 750ms before redirecting the player to the Score page.
-:::code-tabs
-@tab game.js
+game.js
 
 ```javascript
 export class GameComponent {
@@ -37,14 +36,13 @@ export class GameComponent {
   }
 }
 ```
-:::
 
 Waiting a certain amount of time can be easily done using the [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) function.
 
 > **info** In JavaScript, long tasks (eg: waiting some time, doing an HTTP request, ...) are all asynchronous.
-> :::spoiler Why?
+> <details><summary> Why? </summary>
 > JavaScript is **mono-threaded**. That means, all the code is executed on the main thread and we cannot offload long jobs to a background thread. In other words, **long blocking tasks would freeze the application**.
-> :::
+> </details>
 
 `setTimeout()` accepts as first parameter an anonymous function called when the amount of time is elapsed. Such functions are called **callback functions**.
 
@@ -52,8 +50,7 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h
   Follow `TODO #arrow-function` comments for instructions.
   > Example:
   >
-  > :::code-tabs
-  > @tab anonymous function
+  > anonymous function
   >
   > ```js
   > setTimeout(function () {
@@ -61,7 +58,7 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h
   > }, 1000);
   > ```
   >
-  > @tab arrow function
+  > arrow function
   >
   > ```js
   > setTimeout(() => {
@@ -69,7 +66,7 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h
   > }, 1000);
   > ```
   >
-  > @tab arrow function - single line
+  > arrow function - single line
   >
   > ```js{}
   > setTimeout(() => console.log("after 1s"), 1000);
@@ -79,9 +76,8 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h
 
   > **danger** Regular functions declared with the **`function` keyword have `this` inherited from the caller**, whereas **arrow functions have a `this` inherited from the declaring scope**.
 
-  ::::spoiler Show the game.js file
-  :::code-tabs
-  @tab game.js - with function
+  <details><summary> Show the game.js file </summary>
+  game.js - with function
 
   ```javascript
   export class GameComponent {
@@ -104,7 +100,7 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h
   }
   ```
 
-  @tab game.js - with arrow function
+  game.js - with arrow function
 
   ```javascript
   export class GameComponent {
@@ -123,15 +119,13 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h
     }
   }
   ```
-  :::
-  ::::
+  </details>
 
 ## Template literals
 
 Concatenating strings is not something we enjoy in any language. Fortunately, _ES6_ comes with [**template literals**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) as an alternative:
 
-:::code-tabs
-@tab without template literals
+=== "without template literals"
 
 ```js{}
 const welcome =
@@ -139,7 +133,7 @@ const welcome =
   + "You have " + messages.length + " message" + messages.length ? "s" : "" + "to read.";
 ```
 
-@tab with template literals
+=== "with template literals"
 
 ```js{}
 const welcome =
@@ -147,7 +141,6 @@ const welcome =
 You have ${messages.length} message${messages.length ? "s" : ""} to read.`;
 ```
 
-:::
 
 ### Use backquotes instead of quotes <Diy />
 
diff --git a/resources/docs/docs/chapters/tp/promises.md b/resources/docs/docs/chapters/tp/asynchronous.md
similarity index 100%
rename from resources/docs/docs/chapters/tp/promises.md
rename to resources/docs/docs/chapters/tp/asynchronous.md
diff --git a/resources/docs/docs/chapters/tp/webpack-js.md b/resources/docs/docs/chapters/tp/bundle.md
similarity index 86%
rename from resources/docs/docs/chapters/tp/webpack-js.md
rename to resources/docs/docs/chapters/tp/bundle.md
index b6703762eade7f826bfb7141f0fa5239a7b5c414..9bd80cfb4240b17a222b5b6cbd36f666f07c1bcf 100644
--- a/resources/docs/docs/chapters/tp/webpack-js.md
+++ b/resources/docs/docs/chapters/tp/bundle.md
@@ -18,40 +18,34 @@ Earlier in this chapter, we turned `router.js` into an _ES module_. It's time to
 After this chapter, thanks to the _ES modules_, there will be no more imported files in the `index.html`.
 **ES `import` statements will be the glue between files**. With the _bundler_, the importing file responsibility have shifted from _HTML_ to _JS_ files.
 
-:::tabs
-@tab before bundler
-![not-bundle](../assets/not-bundle.png)
+before bundler
+![not-bundle](../../assets/not-bundle.png)
 
-@tab after bundler
-![bundle](../assets/bundle.png)
-:::
+after bundler
+![bundle](../../assets/bundle.png)
 
 ## <i class="fab fa-js"></i> **Bundle the JS** code <Diy /> <BadgeHard />
 
 - Edit `utils.js`. Look at the `TODO #export-functions` comments for instructions.
 
   - Write an `export` statement to export the `parseUrl` function.
-    ::::spoiler Show the utils.js file
-    :::code-tabs
-    @tab utils.js
+    <details><summary> Show the utils.js file </summary>
+    utils.js
 
     ```js
     export function parseUrl() {
       // ...
     }
     ```
-    :::
-    ::::
-
+    </details>
 - Edit `welcome.js`, `game.js` and `score.js`. Look at the `TODO #export-functions` comments for instructions.
 
   - Remove the _IIFE_
   - Write an `export` statement to export the component's function.
   - Write an `import` statement to import the `parseUrl` function if required.
 
-  ::::spoiler Show the resulting files
-  :::code-tabs
-  @tab welcome.js
+  <details><summary> Show the resulting files</summary>
+  welcome.js
 
   ```js
   export function WelcomeComponent() {}
@@ -64,7 +58,7 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f
   // ...
   ```
 
-  @tab game.js
+  game.js
 
   ```js
   import { parseUrl } from "./utils";
@@ -86,7 +80,7 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f
   // ...
   ```
 
-  @tab score.js
+  score.js
 
   ```js
   import { parseUrl } from "./utils";
@@ -96,17 +90,14 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f
   }
   // ...
   ```
-
-  :::
-  ::::
+  </details>
 
 - Edit `main.js`. Look at `TODO #import-components` for instructions.
 
   - Write an `import` statement to import `WelcomeComponent`, `GameComponent` and `ScoreComponent`
 
-  ::::spoiler Show the main.js file
-  :::code-tabs
-  @tab main.js
+  <details><summary> Show the main.js file </summary>
+  main.js
 
   ```js
   import { Router } from "./app/scripts/router";
@@ -123,13 +114,11 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f
   // ...
   ```
 
-  :::
-  ::::
+  </details>
 
 - Edit `index.html`. Remove all `<script>` tag as everything is now bundled by _Webpack_.
-  ::::spoiler Show the index.html file
-  :::code-tabs  
-  @tab index.html
+  <details><summary> Show the index.html file </summary>
+  index.html
 
   ```html
   <!DOCTYPE html>
@@ -149,17 +138,17 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f
     </body>
   </html>
   ```
-  :::
-  ::::
+  </details>
 
 - Test the application: navigate to [http://localhost:8080](http://localhost:8080), the application should work as usual and show no error in the console 🎉.
 
 - Build the application.
-  :::spoiler Show the build command
+  <details><summary> Show the build command </summary>
+  
   ```bash
   npm run build
   ```
-  :::
+</details>
 
 #### <i class="fas fa-folder-tree"></i> Modified files
 
@@ -179,7 +168,13 @@ src/index.html
 - [ ] The codebase has no unresolved `TODO #import-components` comments left.
 - [ ] The codebase has no _IIFE_ left.
 
-<GitCommit />
-
 > **question** Look at the  `dist/main.js` file, generated by the build command. What is its size?
 
+<style>
+summary {
+  color: #cb2468;
+  text-align: center;
+  margin-bottom: 20px;
+  margin-top: 20px
+}
+</style>
\ No newline at end of file
diff --git a/resources/docs/docs/chapters/tp/webpack-css.md b/resources/docs/docs/chapters/tp/css-loader.md
similarity index 92%
rename from resources/docs/docs/chapters/tp/webpack-css.md
rename to resources/docs/docs/chapters/tp/css-loader.md
index 67f3b4aebe281450c15bb6a1e140bbd696ecba5a..fb6460544e7986d36a6ceaafb90fd467a1c95c89 100644
--- a/resources/docs/docs/chapters/tp/webpack-css.md
+++ b/resources/docs/docs/chapters/tp/css-loader.md
@@ -35,8 +35,7 @@ npm i -D style-loader css-loader
 ### <i class="fa fa-screwdriver-wrench"></i> Use the `style-loader` <Diy/>
 
 - Edit `webpack.config.js` and configure the `style-loader` and the `css-loader` to load _CSS_ files:
-  :::code-tabs
-  @tab webpack.config.js
+  webpack.config.js
 
   ```js{9-12}
   // ...
@@ -56,16 +55,15 @@ npm i -D style-loader css-loader
   };
   ```
 
-  :::
 
 - Stop and restart the _Webpack dev server_.
-  :::spoiler Show the command
+  <details><summary> Show the command </summary>
 
   ```bash
   npm run start
   ```
 
-  :::
+  </details>
 
   > **danger** Remember to restart _Webpack_ whenever `webpack.config.js` changes, as it does not live-reload the configuration.
 
@@ -76,9 +74,8 @@ We want to import all the _CSS_ files that are still imported using a `<link>` t
 
 
 - Edit `index.html`, remove all `<link rel="stylesheet">` tags and write the corresponding [**side-effect import**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only) statements in `src/main.js`.
-  ::::spoiler Show the index.html and main.js files
-  :::code-tabs
-  @tab index.html
+  <details><summary> Show the index.html and main.js files </summary>
+  index.html
 
   ```html{6-8}
   <!DOCTYPE html>
@@ -97,7 +94,7 @@ We want to import all the _CSS_ files that are still imported using a `<link>` t
   </html>
   ```
 
-  @tab main.js
+  main.js
   ```js{6,7}
   import { Router } from "./app/scripts/router";
   import { WelcomeComponent } from "./app/scripts/welcome";
@@ -112,8 +109,7 @@ We want to import all the _CSS_ files that are still imported using a `<link>` t
   // ...
   ```
 
-  :::
-  ::::
+  </details>
 
 - Browse [localhost:8080](localhost:8080) and test the application. It should have the same look and feel as usual.
 
@@ -124,10 +120,9 @@ so we can use the package manager to install it.
 
 - Go to the root of the `front-end/` directory and use the [`npm install`](https://docs.npmjs.com/cli/v8/commands/npm-install) command.
 
-  ::::spoiler Show the command
-  :::code-tabs
+  <details><summary> Show the command </summary>
 
-  @tab verbose
+  verbose
   ```bash
   cd front-end
   npm install bootstrap@5
@@ -138,17 +133,16 @@ so we can use the package manager to install it.
   cd front-end
   npm i bootstrap@5
   ```
-  :::
-  ::::
+  </details>
 
 - **Remove the hand-copied bootstrap sources**
 
   No need to keep our own copy of `bootstrap.css` now we have installed it with _NPM_. You can safely remove it.
-  :::spoiler Show the command
+  <details><summary> Show the command </summary>
   ```bash
   rm src/app/styles/bootstrap.css
   ```
-  :::
+  </details>
 
 - **Use the installed _Bootstrap_ package**
 
@@ -181,7 +175,15 @@ webpack.config.js
 - [ ] My application uses bootstrap from `node_modules/`.
 - [ ] There is no `TODO #npm-bootstrap` comments left.
 
-<GitCommit />
 
 > **question** Build the code with `npm run build` and look at the code generated in `dist/main.js`.  
 > What is this file size?
+
+<style>
+summary {
+  color: #cb2468;
+  text-align: center;
+  margin-bottom: 20px;
+  margin-top: 20px
+}
+</style>
\ No newline at end of file
diff --git a/resources/docs/docs/chapters/tp/es6-classes.md b/resources/docs/docs/chapters/tp/es6-classes.md
index 9aa7d8aaaeb7ebc9ef1703850284cc60c41c8365..0d3bc19763ab3506507801efa566f455fc440c6c 100644
--- a/resources/docs/docs/chapters/tp/es6-classes.md
+++ b/resources/docs/docs/chapters/tp/es6-classes.md
@@ -13,22 +13,19 @@ In this chapter, we will learn how to update our code step by step with some new
 ## The old way: functions and `prototype`
 
 Have a look at `game.js`:
-:::code-tabs
 
-@tab game.js
+game.js
 
 ```js{2}
 for (var i in this._config.ids) {
   this._cards[i] = new CardComponent(this._config.ids[i]);
 }                // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ //
 ```
-:::
 
 Here, we create a new `CardComponent` instance (ie: a _card_), although `CardComponent` is in fact a simple function.
 
-:::code-tabs
 
-@tab game.js
+game.js
 
 ```js{1,9,15}
 function CardComponent(id) {
@@ -50,7 +47,6 @@ CardComponent.prototype.equals = function equals(card) {
 };
 ```
 
-:::
 
 > **info** _ES5_ is [Prototype oriented language](https://developer.mozilla.org/en-US/docs/Glossary/Prototype-based_programming). In other words, it has no notion of _classes_ like in _Object Oriented Programming_, but it uses simple functions, objects and the [`prototype` keyword](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) to mimic inheritance. `XComponent.prototype` is an object in which you put variables and functions shared across all instances of `XComponent`.
 >
@@ -69,8 +65,7 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen
 - Rewrite every `function XComponent() {...}` to `class XComponent {...}`. The function body itself goes in the `constructor() {}`
 
   > Example:
-  > :::code-tabs
-  > @tab example.js - before
+  > example.js - before
   >
   > ```js
   > function ExampleComponent(name) {
@@ -88,7 +83,6 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen
   > }
   > ```
   >
-  > :::
 
   > **info** _ES6_ classes does not have proper encapsulation (eg: private methods or attributes).  
   > As a convention, we name properties/method with a leading underscore to identify them as private.
@@ -98,8 +92,7 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen
 - Rewrite every `XComponent.prototype.<METHOD> = ...` to a method `<METHOD>` of the `XComponent` class:
 
   > Example:
-  > :::code-tabs
-  > @tab example.js - before
+  > example.js - before
   >
   > ```js
   > ExampleComponent.prototype.doThis = function doThis(attr) {
@@ -116,7 +109,6 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen
   >   }
   > }
   > ```
-  > :::
 
 ### Property accessors
 
@@ -125,8 +117,7 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen
 - Rewrite each `Object.defineProperties(XComponent.prototype, { <PROPERTY> : {...}} )` statement, to a property accessor `get <PROPERTY>` in the `XComponent` class. Do the same for  `get <PROPERTY>`.
 
   > Example:
-  > :::code-tabs
-  > @tab example.js - before
+  > example.js - before
   >
   > ```js{3,6}
   > Object.defineProperties(ExampleComponent.prototype, {
@@ -155,7 +146,6 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen
   > }
   > ```
   >
-  > :::
 
 ### `extends`
 
@@ -164,9 +154,8 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen
 To save a little bit of code, we will leverage **Component inheritance**.
 - Create a new file named `scripts/component.js` to define a class named `Component`. Its constructor has to take the _HTML_ template as a parameter and default to a blank string.
 
-  ::::spoiler Show the component.js file
-  :::code-tabs
-  @tab component.js
+  <details><summary> Show the component.js file </summary>
+  component.js
 
   ```js
   export class Component {
@@ -175,19 +164,16 @@ To save a little bit of code, we will leverage **Component inheritance**.
     }
   }
   ```
-
-  :::
-  ::::
+  </details>
 
 - Edit `game.js`. Look at the `TODO #extends` comments for instructions:
   - Make `GameComponent` extends `Component`.
   - Make `CardComponent` extends `Component`.
   - Call `super()` in the constructor.
 
-::::spoiler Show the resulting game.js
-:::code-tabs
+<details><summary> Show the resulting game.js </summary>
 
-@tab game.js - with prototype
+game.js - with prototype
 
 ```js{}
 export function GameComponent() {
@@ -213,7 +199,7 @@ Object.defineProperties(CardComponent.prototype, { /* ... */});
 
 ```
 
-@tab game.js - with class
+game.js - with class
 
 ```js{1,5}
 import { Component } from "./component";
@@ -246,9 +232,7 @@ class CardComponent extends Component {
   get flipped() { /* ... */ }
 }
 ```
-
-:::
-::::
+</details>
 
 - Navigate to [localhost:8080](http://localhost:8080) and test the application. It should work as usual.
 
@@ -267,14 +251,9 @@ src/app/scripts/game.js
 
 The code seems much more clean and concise with classes, isn't it? Let's continue the modernization in the next chapter.
 
-<GitCommit />
 
 > **warning** As a _Java_ developer, an ES _class_ may look like a _Java_ _class_ to you, but they are actually very different.
 > - no encapsulation (ie: private properties and methods)
 > - no method/constructor overload
 > - no abstract classes
 > - no interfaces
-
-## <i class="fas fa-graduation-cap"></i> Assessment
-
-<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeJozxuTbb6JwDOGOiPNV3-VyRCjlnyEteqB5T5CqxEm4l6Eg/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
diff --git a/resources/docs/docs/chapters/tp/webpack-html.md b/resources/docs/docs/chapters/tp/html-loader.md
similarity index 88%
rename from resources/docs/docs/chapters/tp/webpack-html.md
rename to resources/docs/docs/chapters/tp/html-loader.md
index 6eade9437c146b965e70705340b975c462f29a71..00b10c574cd0cfd71aaf3f13e021e88955d08dae 100644
--- a/resources/docs/docs/chapters/tp/webpack-html.md
+++ b/resources/docs/docs/chapters/tp/html-loader.md
@@ -13,8 +13,7 @@ tag:
 In the previous chapter, we managed to _bundle_ all the _CSS_ code. Now, it's time to do the same for the _HTML_ templates.
 
 Look at `src/main.js`:
-:::code-tabs
-@tab main.js
+main.js
 
 ```js{3,5}
 // ...
@@ -26,7 +25,6 @@ router
 // ...
 ```
 
-:::
 For now, we configure each path with a `templateUrl`, so the _Router_ can fetch the right template at runtime and display it.
 
 With `html-loader`, we could statically `import` this template at _compile-time_ and add it to the _bundle_.
@@ -38,15 +36,15 @@ To bundle the _HTML_ code, we will use the [`html-loader`](https://webpack.js.or
 ### <i class="fa fa-file-download"></i> Install the `html-loader` <Diy/>
 
 - Install `html-loader` using _NPM_.
-:::spoiler Show the command
+<details><summary> Show the command </summary>
+
 ```bash
 npm i -D html-loader
 ```
-:::
+
 
 - Edit `webpack.config.js` and configure the `html-loader` to load _HTML_ files:
-  :::code-tabs
-  @tab webpack.config.js
+  webpack.config.js
 
   ```js{10-13}
   // ...
@@ -67,7 +65,7 @@ npm i -D html-loader
   };
   ```
 
-  :::
+  
 
 - Stop and restart the _Webpack dev server_.
   :::spoiler Show the command
@@ -75,17 +73,15 @@ npm i -D html-loader
   ```bash
   npm run start
   ```
-
-  :::
+  </details>
 
   > **danger** Remember to restart _Webpack_ whenever `webpack.config.js` changes, as it does not live-reload the configuration.
 
 ### <i class="fa fa-file-import"></i> Write _HTML_ files `import` statements
 
 - Edit `main.js`. Look at the `TODO #import-html` comments for instructions to remove all `templateUrl` properties.
-  ::::spoiler Show the main.js file
-  :::code-tabs
-  @tab main.js
+  <details><summary> Show the main.js file </summary>
+  main.js
 
   ```js
   // ...
@@ -106,17 +102,14 @@ npm i -D html-loader
       component: ScoreComponent,
     });
   ```
-
-  :::
-  ::::
+  </details>
 
 - Edit `game.js`. Look at the `TODO #import-html` comments for instructions.
 
   - Import `game.html` template as `template` with a [**default import**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import).
   - Edit the `GameComponent` function and assign `template` to a new attribute `this.template`
-    ::::spoiler Show the game.js file
-    :::code-tabs
-    @tab game.js
+    <details><summary> Show the game.js file </summary>
+    game.js
 
     ```js
     import template from "../views/game.html";
@@ -127,8 +120,7 @@ npm i -D html-loader
     }
     ```
 
-    :::
-    ::::
+    </details>
 
 - Browse to [localhost:8080](http://localhost:8080) and test the application. It should work as usual.
 
@@ -147,7 +139,6 @@ webpack.config.js
 - [ ] I know how `html-loader` works.
 - [ ] The codebase has no unresolved `TODO #import-html` comments left.
 
-<GitCommit />
 
 > **question** Build the code with `npm run build` and look at the code generated in `dist/main.js`.
 >
@@ -161,8 +152,8 @@ With _Webpack_ it is even possible to use ES imports to import assets, such as `
 ### <i class="fa fa-screwdriver-wrench"></i> Configuration <Diy/>
 
 Edit `webpack.config.js` and add a new rule to load images:
-:::code-tabs
-@tab webpack.config.js
+
+webpack.config.js
 
 ```js{10-13}
 // ...
@@ -183,7 +174,6 @@ module.exports = {
 };
 ```
 
-:::
 
 ### <i class="fa fa-file-import"></i> Write `imports` for the _png_ files <Diy/>
 
@@ -191,7 +181,7 @@ module.exports = {
 
 - Locate the variable named `CARDS_IMAGE`. It is an array containing the card images paths. Use ES default imports to import the images and replace the `CARD_IMAGES` content with the imported modules.
 
-  :::spoiler Show the game.js file
+  <details><summary> Show the game.js file </summary>
 
   ```js
   import back from "/src/assets/cards/back.png";
@@ -221,7 +211,7 @@ module.exports = {
   ];
   ```
 
-  :::
+  </details>
 
 #### <i class="fas fa-folder-tree"></i> Modified files
 
@@ -233,9 +223,11 @@ src/app/scripts/game.js
 webpack.config.js
 ```
 
-<GitCommit />
-
-## <i class="fas fa-graduation-cap"></i> Assessment
-
-<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdzd5BXpKEJ5F1mtPcSuM3pn8ozs5WzHHllvsdVUavYQMCn5A/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
-
+<style>
+summary {
+  color: #cb2468;
+  text-align: center;
+  margin-bottom: 20px;
+  margin-top: 20px
+}
+</style>
\ No newline at end of file
diff --git a/resources/docs/docs/chapters/tp/npm.md b/resources/docs/docs/chapters/tp/npm.md
index dbad2ced43ce0a23c6e825ece64aab7ce343eb9c..2238df4333aaadb29432b37e4d72955b0c599b85 100644
--- a/resources/docs/docs/chapters/tp/npm.md
+++ b/resources/docs/docs/chapters/tp/npm.md
@@ -34,12 +34,13 @@ These informations will be set in the `package.json` file by the `npm init` comm
 
 At the root of the `front-end/` directory, initialize a new NPM package with the [`npm init` command](https://docs.npmjs.com/creating-a-package-json-file#running-a-cli-questionnaire).
 
-:::spoiler Show the commands
+<details> <summary> Show the commands </summary>
+
 ```bash
 cd front-end/
 npm init
 ```
-:::
+</details>
 
 This command will ask you to fill in some informations. Set your own values here:
 - **package name**: `@<username>-meme-ory` (replace `<username>` with your name).
@@ -47,12 +48,12 @@ This command will ask you to fill in some informations. Set your own values here
 - **description**: _A memory game based on memes ¯\\_(ツ)\\_/¯_.
 - **entrypoint**: \<leave blank>
 - **test command**: \<leave blank>
-- **Git repository**: {{$m3.env.M3_GITLAB_URL}}/\<YOUR_NAMESPACE>/web-01
+- **Git repository**: <YOUR_GITLAB>/\<YOUR_NAMESPACE>/web-01
 - leave other fields blank.
 
-::::spoiler Show the expected package.json
-:::code-tabs
-@tab package.json
+<details> <sumarry> Show the expected package.json </sumarry>
+
+package.json
 
 ```json
 {
@@ -70,14 +71,13 @@ This command will ask you to fill in some informations. Set your own values here
   }
 }
 ```
-:::
-::::
+
+</details>
 
 > **info** The project name is prefixed with `username`. This is your namespace and it avoids collisions with existing packages in case you want to publish your package to the [NPM repository](https://www.npmjs.com/)
 
 - Make your package private:
-:::code-tabs
-@tab package.json
+package.json
 
 ```javascript
 {
@@ -86,7 +86,7 @@ This command will ask you to fill in some informations. Set your own values here
   // ...
 }
 ```
-:::
+
 
 > **tip** _NPM_ is not only a tool, it is also connected to the [official NPM repository](https://www.npmjs.com/). There, you can search for and download libraries published by other npm users, but also publish your own package with the `npm publish command`. 
 > Set your package as private to avoid publishing it to the repository by accident.
@@ -106,9 +106,10 @@ As `http-server` is [available on the _NPM_ repository](https://www.npmjs.com/pa
 
 All of our project [**dependencies**](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) are specified in the `package.json` file. You can see some that are already installed in the `back-end/package.json` file
 
-::::spoiler Show the back-end/package.json file
-:::code-tabs
-@tab package.json
+<details> <summary> Show the back-end/package.json file </summary>
+
+package.json
+
 ```json{13-20}
 {
   "name": "server",
@@ -132,8 +133,8 @@ All of our project [**dependencies**](https://docs.npmjs.com/specifying-dependen
   }
 }
 ```
-:::
-::::
+
+</details>
 
 
 ### <i class="fa fa-terminal"></i> `npm install` <Diy />
@@ -144,23 +145,21 @@ Go back in the `front-end/` folder and install the `http-server` library as a [*
 
 To install a _devDependency_, we will use the `npm install` command along with the `--save-dev` or `-D` flag.
 
-:::code-tabs
-@tab alias
+ alias
 ```bash
 cd front-end
 npm install -D http-server
 ```
 
-@tab verbose
+verbose
 ```bash
 cd front-end
 npm install --save-dev http-server
 ```
-:::
 
-::::spoiler Show the resulting front-end/package.json file
-:::code-tabs
-@tab front-end/package.json
+<details><summary> Show the resulting front-end/package.json file </summary>
+
+front-end/package.json
 ```json{12-14}
 {
   "name": "username-meme-ory",
@@ -180,11 +179,11 @@ npm install --save-dev http-server
 
 ```
 Notice how your `package.json` has been updated with a `devDependencies` key.
-:::
-::::
+
+</details>
 
 > **info** Did you see? The _http-server_ version is specified as `X.Y.Z`. This convention **enforced by NPM** is called **[Semantic Versioning (Semver)](https://docs.npmjs.com/about-semantic-versioning/)**.  
-> ![http-server-semver](../assets/http-server-semver.png)
+> ![http-server-semver](../../assets/http-server-semver.png)
 > **A package cannot be published if it does not follow this convention.**  
 > 
 > This allows you to specify a [**version range**](https://docs.npmjs.com/cli/v6/using-npm/semver#ranges) for a dependency.  
@@ -230,7 +229,8 @@ You see that `http-server` comes with all its dependencies.
 
 In addition to `package-lock.json`, _NPM_ also created a folder called `node_modules`, where all the dependencies indicated in your `package.json` are downloaded. If you open it, you can see a folder called `http-server` as long as a folder for each of its dependency.
 
-:::spoiler Show the node_modules folder structure
+<details><summary> Show the node_modules folder structure </summary>
+
 ```
 node_modules/
 ├── basic-auth
@@ -261,12 +261,12 @@ node_modules/
 ├── ...
 ├── url-join
 ```
-:::
+</details>
 
 > **danger** The `node_modules/` folder contains all dependencies and is usually rather uge. Do not forget to ignore this directory in the `.gitignore` file to not commit it.
-> :::spoiler Show the node_modules folder size
-> ![node_modules](../assets/node_modules.png)
-> :::
+> <details> Show the node_modules folder size
+> ![node_modules](../../assets/node_modules.png)
+> </details>
 
 #### <i class="fas fa-folder-tree"></i> Modified files
 
@@ -287,9 +287,9 @@ front-end/
 
 Did you notice that the generated `package.json` has a `"scripts"` section?
 
-::::spoiler Show the package.json file
-:::code-tabs 
-@tab package.json
+<details><summary> Show the package.json file</summary>
+
+package.json
 
 ```json{7-9}
 {
@@ -309,8 +309,7 @@ Did you notice that the generated `package.json` has a `"scripts"` section?
 }
 
 ```
-:::
-::::
+</details>
 
 > **info** A _NPM_ package can have a complex lifecycle: from development to shipping, not to forget about the tests, the build and other stages that may require specific tools and commands...
 >
@@ -334,10 +333,13 @@ So now, to run the server, you can use the command `http-server -c-1` without `n
 >
 > **Most of the projects have an `npm run (start|test)` command.**
 
+
 - Add a new script called `start` in the scripts section. This script will run our `http-server` command.
-  ::::spoiler Show the package.json file
-  :::code-tabs
-  @tab package.json
+
+
+  <details> <summary> Show the package.json file </summary>
+
+  package.json
   ```json{3}
   {
     "scripts": {
@@ -346,25 +348,22 @@ So now, to run the server, you can use the command `http-server -c-1` without `n
     },
   }
   ```
-  :::
-  ::::
+  </details>
 
 - Kill the old `http-server` if it is still running. Now, you can start your application using the following command:
 
-  :::code-tabs
-  @tab alias
+  alias
 
   ```bash
   npm start
   ```
 
-  @tab verbose
+  verbose
 
   ```bash
   npm run start
   ```
 
-  :::
 
 - Navigate to [http://localhost:8080/src](http://localhost:8080/src). The _front-end_ application should be up and running and connected to the _back-end_ at [http://localhost:8081/api-docs](http://localhost:8081/api-docs) to get the required data.
 
@@ -380,8 +379,9 @@ front-end/
 - [ ] I know what _NPM scripts_ are.
 - [ ] I can run my application running the `npm start` command.
 
-<GitCommit />
-
-## <i class="fas fa-graduation-cap"></i> Assessment
-
-<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScHVcKj7HiXR0CJvkX5MC49GlUGPk-bPJuYQHWinOErGnThGA/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+<style>
+summary {
+  color: #CA2468;
+  text-align: center;
+}
+</style>
diff --git a/resources/docs/docs/chapters/tp/setup.md b/resources/docs/docs/chapters/tp/setup.md
index 3ed00a79dd1f519c0a301a73ebe655fe8f0b6a83..6111b0169e59a1ef8709d002f278ffc4cd131832 100644
--- a/resources/docs/docs/chapters/tp/setup.md
+++ b/resources/docs/docs/chapters/tp/setup.md
@@ -19,7 +19,7 @@ tag:
 
   > **tip** **Pro tip**: Linux users can install and use [NVM](https://github.com/creationix/nvm). With this tool, it is easy to install
   > multiple node versions and switch between all of them.
-  > :::spoiler Show the installation commands
+  > <details> <summary>Show the installation commands</summary>
   >
   > ```bash
   > curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
@@ -27,13 +27,14 @@ tag:
   > nvm default 16
   > ```
   >
-  > :::
+  > </details>
 
 - Have a web browser with good capabilities for debugging JavaScript (Eg: Google Chrome, Chromium, or Firefox).
 
 - Have a good IDE. I recommend [Visual Studio Code](https://code.visualstudio.com/) as it is free and really great for web development.
 
-<Optional/> 
+Optional 
+
 - Install [_Prettier_](https://prettier.io/).  
   _Prettier_ is a code formatter to automatically rearrange _JS_, _HTML_ and _CSS_ code when you save a file. You can install the extension for your IDE:
   - [Prettier for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
@@ -48,17 +49,19 @@ Your mission, should you choose to accept it, is to **rewrite this application u
 
 ### <i class="fab fa-git-alt"></i> Initialize the Git repository
 
-<Diy/>
+Do it yourself
+
 - Create a [new project]({{$m3.env.M3_GITLAB_URL}}/projects/new#blank_project) under your namespace on our Gitlab instance. Call it **web-01**.
 - Clone that project in your workspace and checkout to a new branch called **develop**
-  :::spoiler Show the Git commands
+
+  <details> <summary> Show the Git commands </summary>
 
   ```:no-v-pre
-  git clone git@{{$m3.env.M3_GITLAB_HOST}}:<YOUR_NAMESPACE>/<YOUR_PROJECT>.git
+  git clone git@<YOUR_GITLAB>:<YOUR_NAMESPACE>/<YOUR_PROJECT>.git
   cd <YOUR_PROJECT>
   git switch -c develop
   ```
-  :::
+  </details>
 
 - Download and extract the initial _ES5_ codebase for the _MEME-ORY_ application in your workspace:
   <ResourcesButton path="init.zip" title="Meme-ORY" />
@@ -91,7 +94,7 @@ Your mission, should you choose to accept it, is to **rewrite this application u
   npx http-server -c-1
   ```
 
-  :::spoiler Show the troubleshoot
+  <details><summary> Show the troubleshoot </summary>
 
   > **boom** When I run the **_npx http-server -c-1_** command, it produces an infinite loop on my standard output...
   >
@@ -111,7 +114,7 @@ Your mission, should you choose to accept it, is to **rewrite this application u
   > npx http-server -c-1
   > ```
 
-  :::
+  </details>
 
 - Test the application: go to [localhost:8080/src](http://localhost:8080/src) and play through the whole game.
   - _http://localhost:8080/src_: `/src` because it is where your `index.html` is.
@@ -135,10 +138,12 @@ front-end/
 
 - [ ] I can play _MEME-Ory_ game on [http://localhost:8080/src](http://localhost:8080/src)
 
-<GitCommit />
-
-## <i class="fas fa-graduation-cap"></i> Assessment
-
-<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf5PqALBMoJlCeF-F9Y0fOyfExredhgncpoyb_muAUu9rwgjQ/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
-
-[game-mockup]: ../assets/mockup.png
+[game-mockup]: ../../assets/mockup.png
+<style>
+summary {
+  color: #cb2468;
+  text-align: center;
+  margin-bottom: 20px;
+  margin-top: 20px
+}
+</style>
diff --git a/resources/docs/docs/chapters/tp/spa.md b/resources/docs/docs/chapters/tp/spa.md
index 68fac7d7463b24a9cd06027922b83f0880ff6b68..8e8fa724e251f8b405de6d515ed2fe4918460910 100644
--- a/resources/docs/docs/chapters/tp/spa.md
+++ b/resources/docs/docs/chapters/tp/spa.md
@@ -8,7 +8,7 @@ tag:
 
 As you know, the _MEME-Ory_ application is made of three views:
 
-![multiple-page-application](../assets/multiple-page-application.png)
+![multiple-page-application](../../assets/multiple-page-application.png)
 
 - As a player, `index.html` is the first page you browse.
 - You are immediately redirected to the first view: `welcome.html`.
@@ -18,7 +18,7 @@ As you know, the _MEME-Ory_ application is made of three views:
 Each view comes with a _complete *HTML* document_. Going from one view to another one means **loading an entirely new document**, even if the new page have a lot in common with the previous one (eg: the _navbar_, the _footer_...).
 
 > **danger** If the network is slow, it can cause **performance issues** and flickering until the page is fully loaded, which is not great in terms of **user experience**.
-> ![clutter-before-spa](../assets/clutter-before-spa.gif)
+> ![clutter-before-spa](../../assets/clutter-before-spa.gif)
 
 ## <i class="fa fa-wrench"></i> The browser dev tools
 
@@ -32,7 +32,7 @@ Each view comes with a _complete *HTML* document_. Going from one view to anothe
 > - **inspect the document**: see HTML elements, edit CSS properties in the "Elements" tab
 > - **monitor the Network** traffic in "Network" tab
 > - and much more!
->   ![network-dev-tool](../assets/chrome-dev-tools-network.png)
+>   ![network-dev-tool](../../assets/chrome-dev-tools-network.png)
 
 > **question** How many megabytes are transferred in total after going through the three views, with `size=2`?
 
@@ -49,7 +49,7 @@ In a _SPA_, the application has only one page. Even if the content changes, we s
 A **Router** is a JavaScript object which maps URLs to views. Here, our _Router_ is listening to url's [_hash_](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash) changes to know which view has to be displayed.  
 It uses the [`DOM` API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) to dynamically add or remove content.
 
-![spa]( ../assets/spa.png)
+![spa]( ../../assets/spa.png)
 
 ### Create the _Router_ <Diy/>
 
@@ -59,9 +59,9 @@ It uses the [`DOM` API](https://developer.mozilla.org/en-US/docs/Web/API/Documen
 
   - **`router.js`**: a rudimentary _Router_ implementation.
   - **`main.js`**: the place where the _HTML templates_ and their corresponding JavaScript files are registered at the Router. The _Router_ will put the different views into the existing `document`, in the `<div id="content-outlet">`.
-  ::::spoiler Show the main.js file
-  :::code-tabs
-  @tab main.js
+  <details><summary> Show the main.js file</summary>
+  
+  main.js
 
   ```js{1}
   const outlet = document.querySelector("#content-outlet");
@@ -85,13 +85,12 @@ It uses the [`DOM` API](https://developer.mozilla.org/en-US/docs/Web/API/Documen
     });
   ```
 
-  :::
-  ::::
+  </details> 
 
   - Edit `router.js` and complete the implementation of `function renderTemplate() {}`. Follow the `TODO #spa` comments for instructions.
-      ::::spoiler Show the resulting renderTemplate() function
-      :::code-tabs
-      @tab router.js
+      <details><summary> Show the resulting renderTemplate() function </summary>
+      
+      router.js
 
       ```js{8-12}
       (function () {
@@ -111,16 +110,16 @@ It uses the [`DOM` API](https://developer.mozilla.org/en-US/docs/Web/API/Documen
       })();
       ```
 
-      :::
-      ::::
+      </details>
 
   - Edit `welcome.js` and `game.js`. Look at the comments `TODO #spa` for instructions.
 
-  ::::spoiler Tired of looking for TODOs manually?
+  <details><summary> Tired of looking for TODOs manually? </summary>
+  
   > **tip** The faster way to find all specific string occurrences in a project is the `ctrl+shift+F` shortcut.
   >
   > In our case: `ctrl+shift+F` -> `TODO #spa` will do the job (replace `ctrl` by `cmd` on mac)
-
+</details>
 
 ## <i class="fa-solid fa-table-columns"></i> The application shell
 
@@ -131,7 +130,7 @@ Each application view uses the same layout:
 
 It is called the **_Application Shell_** and is common to all application views.
 
-![shell](../assets/shell.png)
+![shell](../../assets/shell.png)
 
 ### Create the shell <Diy/> <BadgeMedium />
 
@@ -153,11 +152,11 @@ It is called the **_Application Shell_** and is common to all application views.
 
 - `welcome.html`, `game.html` and `score.html` have the same shell (a top navbar, a central scrollable section and a footer). Rather than copy-pasting it in the three different views, move it in `index.html` once and for all.
 
-![shell-html](../assets/shell-html.png)
+![shell-html](../../assets/shell-html.png)
+
+<details><summary> Show the index.html file </summary>
 
-::::spoiler Show the index.html file
-:::code-tabs
-@tab index.html
+index.html
 
 ```html{19-24,12}
 <!DOCTYPE html>
@@ -189,8 +188,7 @@ It is called the **_Application Shell_** and is common to all application views.
 </html>
 ```
 
-:::
-::::
+</details>
 
 - Navigate to [http://localhost:8080/src/](http://localhost:8080/src/). You should be able to play the game as usual. Notice how the _hash_ (`#`) is used in the url.
 
@@ -214,8 +212,11 @@ src/app/views/welcome.html
 - [ ] I know what is a _SPA_ and why it may be a better choice.
 - [ ] The application runs as usual.
 
-<GitCommit />
-
-## <i class="fas fa-graduation-cap"></i> Assessment
-
-<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScjqa2rG-bBbDAId1iaHMVPrrgi0C1uRZTm5kht4fxuNP4ilQ/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+<style>
+summary {
+  color: #cb2468;
+  text-align: center;
+  margin-bottom: 20px;
+  margin-top: 20px
+}
+</style>
\ No newline at end of file
diff --git a/resources/docs/docs/chapters/tp/Let-and-const.md b/resources/docs/docs/chapters/tp/variables.md
similarity index 89%
rename from resources/docs/docs/chapters/tp/Let-and-const.md
rename to resources/docs/docs/chapters/tp/variables.md
index b0ad16b51d9bb6697b6f307bfa504aa1cf8dd664..ee6715de1a9b3f2313d7a7bf104e976863e6c494 100644
--- a/resources/docs/docs/chapters/tp/Let-and-const.md
+++ b/resources/docs/docs/chapters/tp/variables.md
@@ -9,9 +9,8 @@ With _ES5_, we used to define each variable along with the [`var` keyword](https
 
 > **danger** A variable defined with the `var` keyword is **[hoisted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)** and its scope is the global function scope in which it is defined. For this reason, a variable declared with `var` may have a strange behavior and `let`/`const` should be preferred over `var`.
 >
-> ::::spoiler Show some examples
-> :::code-tabs
-> @tab var
+> <details><summary> Show some examples </summary>
+> var
 >
 > ```js{2}
 > if (true) {
@@ -31,8 +30,6 @@ With _ES5_, we used to define each variable along with the [`var` keyword](https
 > console.log(result); // => error
 > ```
 >
-> :::
-> ::::
 
 ## `let` / `const` <BadgeEasy />
 
@@ -45,8 +42,7 @@ Since _ES6_, [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Ref
   - `_appendCard()` adds the cards one by one to the document and adds an `eventListener` on cards click.
 - Edit `game.js`. Let's try to remove the `_appendCard()` function and add its content right in the `init()` function as this code is only used once...
 
-  :::code-tabs
-  @tab game.js - before
+  game.js - before
 
   ```js{10,19-25}
   export class GameComponent {
@@ -79,7 +75,7 @@ Since _ES6_, [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Ref
   }
   ```
 
-  @tab game.js - after
+  game.js - after
 
   ```js{9-17,25}
   export class GameComponent {
@@ -110,7 +106,6 @@ Since _ES6_, [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Ref
   }
   ```
 
-  :::
 
 - Try to flip a card again and you should realize that **things are broken**.
 
@@ -119,11 +114,11 @@ Since _ES6_, [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Ref
 - Replace the `var` keyword by `let` or `const`, to fix the issue. Look at the `TODO #let-const` comments for instructions.
 
   > **question** **Why does this make it work again?**
-  > :::spoiler Show the answer
+  > <details><summary> Show the answer </summary>
   > - `var` is scoped to the function (eg: it is _hoisted_ at the top of the _function's brackets pair_)
   > - `var card` variable is reused in each loop iteration
   > - when a card is clicked, the `card` variable is already assigned to its last value (the last card) and passed to `this._flipCard(card)`.
-  >   :::
+  >   </details>
 
 - Edit `game.js`: whenever you see the `var` keyword in the whole file, replace it with either `let` or `const`.
 
@@ -143,9 +138,3 @@ src/app/scripts/game.js
 - [ ] All `var` have been replaced with either `let` or `const`.
 - [ ] The codebase has no unresolved `TODO #let-const` comments left.
 - [ ] The application runs as usual.
-
-<GitCommit />
-
-## <i class="fas fa-graduation-cap"></i> Assessment
-
-<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScwuzXwjtf2IaP_NGB-GbNOMRrfsscnBGZtVz2ztmpol-TctA/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
diff --git a/resources/docs/docs/chapters/tp/webpack.md b/resources/docs/docs/chapters/tp/webpack.md
index 26af516d84edd3c89954cefa7903c7c219a6a7a9..c187acdec91a8e9caf191a5872b53fb59d73f669 100644
--- a/resources/docs/docs/chapters/tp/webpack.md
+++ b/resources/docs/docs/chapters/tp/webpack.md
@@ -11,8 +11,7 @@ tag:
 
 From now we have been using the old way to put in common all of our JavaScript scripts as we have imported all of them in the `index.html` file like that:
 
-:::code-tabs
-@tab index.html
+index.html
 
 ```html{10,11}
 <!DOCTYPE html>
@@ -29,19 +28,16 @@ From now we have been using the old way to put in common all of our JavaScript s
   </body>
 </html>
 ```
-:::
 
 In the previous step, we wrote the following lines in `main.js`.
 
-:::code-tabs
-@tab main.js
+main.js
 
 ```js{2}
 const outlet = document.querySelector("#content-outlet");
 const router = new Router(outlet);
 // ...
 ```
-:::
 
 It works, because:
 - A function named `Router()` is defined in `router.js`
@@ -53,8 +49,7 @@ It works, because:
 >
 > In a `function`, the scope is usually the `function` itself. Out of the function, the scope is the global `window`. Everything defined in `window` can be accessed from everywhere.
 
-:::code-tabs
-@tab router.js
+router.js
 
 ```js{7}
 (function () {
@@ -69,7 +64,7 @@ It works, because:
 // ...
 ```
 
-@tab index.html
+index.html
 
 ```html{10,11}
 <!DOCTYPE html>
@@ -87,7 +82,6 @@ It works, because:
 </html>
 ```
 
-:::
 
 Although putting all variables and functions in the global scope has been a popular way to share code between different scripts, it is far from ideal:
 
@@ -99,9 +93,8 @@ Although putting all variables and functions in the global scope has been a popu
 
 - Edit `index.html` and swap the import for `main.js` with another one:
 
-  ::::spoiler Try it yourself
-  :::code-tabs
-  @tab index.html
+  <details><summary> Try it yourself </summary>
+  index.html
 
   ```html{7}
   <!DOCTYPE html>
@@ -119,9 +112,7 @@ Although putting all variables and functions in the global scope has been a popu
     </body>
   </html>
   ```
-
-  :::
-  ::::
+</details>
 
 - Reload the page. You should have the following error in the browser console:
   > **boom**
@@ -141,7 +132,7 @@ Fortunately, with **_ES6 modules_** we now have the `import` and `export` keywor
 > - The `export` keyword can only be at the root level of the file. (eg: not in a function nor in a condition).
 > - Use the `import` keyword to import a piece of code that has been exported in an other module.
 >
-> See the [cheatsheet](../10.cheatsheet/CHEATSHEET.md#es-modules)
+> See the [cheatsheet](../../cheatsheets/CHEATSHEET.md#es-modules)
 
 ### <i class="fa fa-file-export"></i> `export` <Diy /> <BadgeEasy />
 
@@ -157,9 +148,9 @@ Fortunately, with **_ES6 modules_** we now have the `import` and `export` keywor
     > It was often used before _ES Modules_ to define private scopes.  
     > Now, **everything in an _ES module_ is private unless it is exported**.
 
-    ::::spoiler Show the router.js file
-    :::code-tabs
-    @tab router.js: before
+    <details><summary> Show the router.js file</summary>
+    
+    router.js: before
 
     ```js{1,11,13}
     (function () {
@@ -177,7 +168,7 @@ Fortunately, with **_ES6 modules_** we now have the `import` and `export` keywor
     })();
     ```
 
-    @tab router.js: after
+    router.js: after
 
     ```js{7}
 
@@ -191,18 +182,15 @@ Fortunately, with **_ES6 modules_** we now have the `import` and `export` keywor
     }
     // ...
     ```
-
-    :::
-    ::::
+    </details>
 
 ### <i class="fa fa-file-import"></i> `import` <Diy /> <BadgeEasy />
 
 - Edit `main.js`. Look at `TODO #import-router` for instructions.
   Use a [**named import**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import) to import the previously exported `Router`.
 
-  ::::spoiler Show the main.js file
-  :::code-tabs
-  @tab main.js
+  <details><summary> Show the main.js file </summary>
+  main.js
 
   ```js
   import { Router } from "./router";
@@ -215,8 +203,7 @@ Fortunately, with **_ES6 modules_** we now have the `import` and `export` keywor
   });
   // ...
   ```
-  :::
-  ::::
+  </details>
 
 - Refresh the page once `Router` is properly exported and imported. It should produce these errors:
 
@@ -280,8 +267,7 @@ npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin
 
 Create a new file called [`webpack.config.js`](https://webpack.js.org/configuration/), with a minimal _Webpack_ configuration:
 
-:::code-tabs
-@tab webpack.config.js
+webpack.config.js
 
 ```javascript{5}
 const path = require("path");
@@ -309,13 +295,13 @@ module.exports = {
   },
 };
 ```
-:::
 
 > **tip** The [`devtool: "inline-source-map"`](https://webpack.js.org/configuration/devtool/) option generates the **source maps**. Simply put, this option will allow _Webpack_ to provide source maps to the _bundle_, so that the browser can reconstruct the original source code.  
 
 The _bundler_ uglifies, minifies and merges all code files into a single _bundle_, which makes it hard to debug.
 
-:::spoiler Show the bundled code snippet
+<details> <summary> Show the bundled code snippet </summary>
+
 ```javascript
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _app_utils_utils__WEBPACK_IMPORTED_MODULE_0__ =
@@ -325,7 +311,7 @@ __webpack_require__.r(__webpack_exports__);
 // front-end/src/main.js
 ```
 Not pretty to debug, isn't it? That is why we asked for source maps in the _Webpack_ configuration file. This will help us while debugging.
-:::
+</details>
 
 In `webpack.config.js` we also set `src/main.js` as the project entrypoint (this is the default value).
 - Move `src/app/scripts/main.js` => `src/main.js`.
@@ -341,8 +327,7 @@ In `webpack.config.js` we also set `src/main.js` as the project entrypoint (this
 - Edit `package.json`.
   Replace the `start` script to use the _Webpack_ command:
 
-  :::code-tabs
-  @tab package.json
+  package.json
 
   ```json
   {
@@ -351,14 +336,14 @@ In `webpack.config.js` we also set `src/main.js` as the project entrypoint (this
     }
   }
   ```
-  :::
 
 - Remove `http-server` from the dependencies. From now, we are going to use `webpack serve` instead.
-  :::spoiler Show the npm remove command
+  <details><summary> Show the npm remove command</summary>
+  
   ```bash
   npm remove http-server
   ```
-  :::
+  </details>
 
 Now, you should be able to start the application.
 
@@ -372,7 +357,8 @@ Attention, we now browse localhost:8080 and not localhost:8080/src.
 
 Change the `navbar-brand` link to point toward `/` instead of `/src` in `welcome.html`, `game.html` and `score.html` files.
 
-:::spoiler Show the resulting HTML file
+<details><summary> Show the resulting HTML file </summary>
+
 ```html{10}
 <!DOCTYPE html>
 <html lang="en">
@@ -398,13 +384,13 @@ Change the `navbar-brand` link to point toward `/` instead of `/src` in `welcome
   </body>
 </html>
 ```
-:::
+</details>
 
 ### <i class="fa fa-hammer"></i> Build with Webpack <Diy />
 
 You can also build the application for production. To do this, add a `build` script in the `package.json` file:
-:::code-tabs
-@tab package.json
+
+package.json
 
 ```json
 "scripts": {
@@ -413,7 +399,6 @@ You can also build the application for production. To do this, add a `build` scr
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 ```
-:::
 
 > **danger** Ensure you **disable the source maps for production builds** since it will weight the _bundle_ a lot and give access to the original application source code to everyone.  
 > Here this is done with the `--mode=production --no-devtool` flag.
@@ -423,15 +408,14 @@ npm run build
 ```
 
 Look at the resulting build, located in the `dist/` folder.
-:::spoiler Show the dist/ folder
+<details><summary> Show the dist/ folder </summary>
 
 ```
 [4.0K]  dist/
 ├── [1.1K]  index.html
 └── [4.2K]  main.js
 ```
-
-:::
+</details>
 
 > **danger** Do not forget to add the `dist/` folder in `.gitignore`.
 
@@ -462,3 +446,12 @@ package-lock.json
 ## <i class="fas fa-graduation-cap"></i> Assessment
 
 <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdzd5BXpKEJ5F1mtPcSuM3pn8ozs5WzHHllvsdVUavYQMCn5A/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+
+<style>
+summary {
+  color: #cb2468;
+  text-align: center;
+  margin-bottom: 20px;
+  margin-top: 20px
+}
+</style>
\ No newline at end of file
diff --git a/resources/docs/mkdocs.yml b/resources/docs/mkdocs.yml
index b89e46d4d798a699ec7eefb46dc5829923b8c499..e2f49dbb0db3d241561a6e7d42d2337786270d9c 100644
--- a/resources/docs/mkdocs.yml
+++ b/resources/docs/mkdocs.yml
@@ -3,20 +3,20 @@ nav:
   - TP:
       - "Setup": chapters/tp/setup.md
       - "npm": chapters/tp/npm.md
-      - "spa": chapters/tp/spa.md
-      - "webpack": chapters/tp/webpack.md
-      - "webpack js": chapters/tp/webpack-js.md
-      - "webpack css": chapters/tp/webpack-cs.md
-      - "webpack html": chapters/tp/webpack-html.md
-      - "es6-classes.md": chapters/tp/es6-classes.md
-      - "Let and const": chapters/tp/Let-and-const.md
-      - "arrow functions": chapters/tp/arrow-functions.md
-      - "functionnal programming": chapters/tp/functionnal-programming.md
-      - "promises": chapters/tp/promises.md
+      - "Spa": chapters/tp/spa.md
+      - "Webpack": chapters/tp/webpack.md
+      - "The bundle": chapters/tp/bundle.md
+      - "CSS Loader": chapters/tp/css-loader.md
+      - "HTML Loader": chapters/tp/html-loader.md
+      - "Classes": chapters/tp/es6-classes.md
+      - "Variables": chapters/tp/variables.md
+      - "Arrow functions & Template litrals": chapters/tp/arrow-functions.md
+      - "Functionnal programming": chapters/tp/functionnal-programming.md
+      - "Asynchronous": chapters/tp/asynchronous.md
 
       - "sourcemaps": chapters/tp/sourcemaps.md
-      - "components": chapters/tp/components.md
-      - "babel": chapters/tp/babel.md
+      - "Component Oriented Architecture": chapters/tp/components.md
+      - "Ensure old browser compatibility": chapters/tp/babel.md
       - "arrow functions": chapters/tp/arrow-functions.md
       - "arrow functions": chapters/tp/style.md
       - "functionnal programming": chapters/tp/functionnal-programming.md