diff --git a/resources/docs/docs/chapters/tp/arrow-functions.md b/resources/docs/docs/chapters/tp/arrow-functions.md
index cc655333cd654d913df5791cb9fc0c0285a6cb96..cf726c516905f5aee13bc18652522d0ebb6424cc 100644
--- a/resources/docs/docs/chapters/tp/arrow-functions.md
+++ b/resources/docs/docs/chapters/tp/arrow-functions.md
@@ -75,29 +75,26 @@ 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**.
   
 
-??? Test a
-
-??? Show the game.js file 
+??? note "Show the game.js file" 
 
     === "game.js - with function"
 
-        ``` js
+         ``` js
          export class GameComponent {
            goToScore() {
              // ...
-             setTimeout(
-               function () {
-                 const scorePage = "#score";
-                 scorePage +
-                   "?name=" +
-                   this._name +
-                   "&size=" +
-                   this._size +
-                   "&time=" +
-                   timeElapsedInSeconds;
-               }.bind(this),
-               750
-             );
+             setTimeout(function () => {
+               const scorePage = "#score";
+               scorePage +
+                 "?name=" +
+                 this._name +
+                 "&size=" +
+                 this._size +
+                 "&time=" +
+                 timeElapsedInSeconds;
+             }.bind(this),
+             750
+            );
            }
          }
          ```
@@ -131,8 +128,8 @@ Concatenating strings is not something we enjoy in any language. Fortunately, _E
 
     ``` js
     const welcome =
-    "welcome back " + user.name + ".\n"
-    + "You have " + messages.length + " message" + messages.length ? "s" : "" + "to read.";
+      "welcome back " + user.name + ".\n"
+      + "You have " + messages.length + " message" + messages.length ? "s" : "" + "to read.";
     ```
 
 === "With template literals"
diff --git a/resources/docs/docs/chapters/tp/npm.md b/resources/docs/docs/chapters/tp/npm.md
index 2238df4333aaadb29432b37e4d72955b0c599b85..55a02e8d0f6b9f7a7b8feb0204661e35e4b2628f 100644
--- a/resources/docs/docs/chapters/tp/npm.md
+++ b/resources/docs/docs/chapters/tp/npm.md
@@ -34,13 +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).
 
-<details> <summary> Show the commands </summary>
+??? tip "Show the commands"
+
+    ```bash
+    cd front-end/
+    npm init
+    ```
 
-```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).
@@ -51,28 +51,27 @@ This command will ask you to fill in some informations. Set your own values here
 - **Git repository**: <YOUR_GITLAB>/\<YOUR_NAMESPACE>/web-01
 - leave other fields blank.
 
-<details> <sumarry> Show the expected package.json </sumarry>
+??? note "Show the expected package.json"
+
+    === "package.json"
+    
+        ```json
+        {
+          "name": "username-meme-ory",
+          "version": "1.0.0",
+          "description": "A memory game based on memes ¯\\(ツ)\\/¯.",
+          "main": "index.js",
+          "scripts": {
+            "test": "echo \"Error: no test specified\" && exit 1"
+          },
+          "author": "",
+          "license": "ISC",
+          "devDependencies": {
+            "http-server": "^14.1.1"
+          }
+        }
+        ```
 
-package.json
-
-```json
-{
-  "name": "username-meme-ory",
-  "version": "1.0.0",
-  "description": "A memory game based on memes ¯\\(ツ)\\/¯.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "http-server": "^14.1.1"
-  }
-}
-```
-
-</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/)
 
@@ -106,35 +105,34 @@ 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
 
-<details> <summary> Show the back-end/package.json file </summary>
-
-package.json
-
-```json{13-20}
-{
-  "name": "server",
-  "version": "1.0.0",
-  "description": "",
-  "main": "server.js",
-  "scripts": {
-    "start": "node server.js"
-  },
-  "type": "module",
-  "keywords": [],
-  "author": "Takima <formation@takima.fr>",
-  "license": "ISC",
-  "dependencies": {
-    "chalk": "^4.1.1",
-    "cors": "^2.8.5",
-    "express": "^4.16.4",
-    "lodash": "^4.17.11",
-    "swagger-jsdoc": "^7.0.0-rc.6",
-    "swagger-ui-express": "^4.0.4"
-  }
-}
-```
+??? tip "Show the back-end/package.json file"
+
+    === "package.json"
+      
+          ```json
+          {
+            "name": "server",
+            "version": "1.0.0",
+            "description": "",
+            "main": "server.js",
+            "scripts": {
+              "start": "node server.js"
+            },
+            "type": "module",
+            "keywords": [],
+            "author": "Takima <formation@takima.fr>",
+            "license": "ISC",
+            "dependencies": {
+              "chalk": "^4.1.1",
+              "cors": "^2.8.5",
+              "express": "^4.16.4",
+              "lodash": "^4.17.11",
+              "swagger-jsdoc": "^7.0.0-rc.6",
+              "swagger-ui-express": "^4.0.4"
+            }
+          }
+          ```
 
-</details>
 
 
 ### <i class="fa fa-terminal"></i> `npm install` <Diy />
@@ -145,55 +143,57 @@ 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.
 
- alias
-```bash
-cd front-end
-npm install -D http-server
-```
-
-verbose
-```bash
-cd front-end
-npm install --save-dev http-server
-```
-
-<details><summary> Show the resulting front-end/package.json file </summary>
-
-front-end/package.json
-```json{12-14}
-{
-  "name": "username-meme-ory",
-  "version": "1.0.0",
-  "description": "A memory game based on memes ¯\\(ツ)\\/¯.",
-  "main": "index.js",
-  "private": true,
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "http-server": "^14.1.1"
-  }
-}
-
-```
-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)
-> **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.  
-> In our example, `^14.1.1` means compatible with all `14.1.*` versions.  
-> `14.1.0` <= _version_ < `14.2.0` (see: [cheatsheet](../10.cheatsheet/CHEATSHEET.md#semver))  
-> Dependencies versions within the range are considered compatible and _NPM_ could update the package by itself when you run `npm install`.  
-> However, it could lead to inconsistencies if one does `npm install` after some time and a dependency got updated in the meantime within the range.
-> That's why, _NPM_ also generated a [`package-lock.json`](https://docs.npmjs.com/cli/v8/configuring-npm/package-lock-json). In a nutshell, `package-lock.json` is like a verbose version of `package.json`. It lists transitive dependencies (ie: dependencies of our dependencies) and fixes each and every package version.
-
-> **danger** Avoid editing `package.json` by yourself. Prefer using the _NPM CLI_ (eg: `npm install`, `npm remove`, ...) instead.
+=== "alias"
+    ```bash
+    cd front-end
+    npm install -D http-server
+    ```
+
+=== "verbose"
+    ```bash
+    cd front-end
+    npm install --save-dev http-server
+    ```
+
+??? tip "Show the resulting front-end/package.json file"
+
+    === "front-end/package.json"
+        
+        ```json
+        {
+          "name": "username-meme-ory",
+          "version": "1.0.0",
+          "description": "A memory game based on memes ¯\\(ツ)\\/¯.",
+          "main": "index.js",
+          "private": true,
+          "scripts": {
+            "test": "echo \"Error: no test specified\" && exit 1"
+            },
+          "author": "",
+          "license": "ISC",
+          "devDependencies": {
+            "http-server": "^14.1.1"
+            }
+        }
+        ```
+
+    Notice how your `package.json` has been updated with a `devDependencies` key.
+
+!!! info "Infos"
+    > 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)
+    > **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.  
+    > In our example, `^14.1.1` means compatible with all `14.1.*` versions.  
+    > `14.1.0` <= _version_ < `14.2.0` (see: [cheatsheet](../10.cheatsheet/CHEATSHEET.md#semver))  
+    > Dependencies versions within the range are considered compatible and _NPM_ could update the package by itself when you run `npm install`.  
+    > However, it could lead to inconsistencies if one does `npm install` after some time and a dependency got updated in the meantime within the range.
+    > That's why, _NPM_ also generated a [`package-lock.json`](https://docs.npmjs.com/cli/v8/configuring-npm/package-lock-json). In a nutshell, `package-lock.json` is like a verbose version of `package.json`. It lists transitive dependencies (ie: dependencies of our dependencies) and fixes each and every package version.
+
+!!! danger "Danger"
+
+    > Avoid editing `package.json` by yourself. Prefer using the _NPM CLI_ (eg: `npm install`, `npm remove`, ...) instead.
 
 If you check the `package-lock.json`file and search for `http-server`, you can see the following:
 ```json
@@ -229,44 +229,44 @@ 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.
 
-<details><summary> Show the node_modules folder structure </summary>
-
-```
-node_modules/
-├── basic-auth
-├── ...
-├── chalk
-├── ...
-├── corser
-├── ...
-├── he
-├── ...
-├── html-encoding-sniffer
-├── ...
-├── http-proxy
-├── ...
-├── http-server
-├── ...
-├── mime
-├── ...
-├── minimist
-├── ...
-├── opener
-├── ...
-├── portfinder
-├── ...
-├── secure-compare
-├── ...
-├── union
-├── ...
-├── url-join
-```
-</details>
+??? info "Show the node_modules folder structure"
+
+    ```
+    node_modules/
+    ├── basic-auth
+    ├── ...
+    ├── chalk
+    ├── ...
+    ├── corser
+    ├── ...
+    ├── he
+    ├── ...
+    ├── html-encoding-sniffer
+    ├── ...
+    ├── http-proxy
+    ├── ...
+    ├── http-server
+    ├── ...
+    ├── mime
+    ├── ...
+    ├── minimist
+    ├── ...
+    ├── opener
+    ├── ...
+    ├── portfinder
+    ├── ...
+    ├── secure-compare
+    ├── ...
+    ├── union
+    ├── ...
+    ├── url-join
+    ```
+
+!!! danger "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.
+    > ??? info "Show the node_modules folder size"
+          > ![node_modules](../../assets/node_modules.png)
 
-> **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.
-> <details> Show the node_modules folder size
-> ![node_modules](../../assets/node_modules.png)
-> </details>
 
 #### <i class="fas fa-folder-tree"></i> Modified files
 
@@ -279,37 +279,37 @@ front-end/
 
 #### <i class="fa fa-list-check"></i> Checklist
 
-- [ ] I know how to **init** a new **_NPM_ package**.
-- [ ] I can **install** a **_NPM_ dependency**.
-- [ ] I know the difference between a **dependency** and a **devDependency**
+- <input type="checkbox" /> I know how to **init** a new **_NPM_ package**.
+- <input type="checkbox" /> I can **install** a **_NPM_ dependency**.
+- <input type="checkbox" /> I know the difference between a **dependency** and a **devDependency**
+
 
 ## <i class="fas fa-terminal"></i> Write _NPM_ scripts 
 
 Did you notice that the generated `package.json` has a `"scripts"` section?
 
-<details><summary> Show the package.json file</summary>
-
-package.json
-
-```json{7-9}
-{
-  "name": "username-meme-ory",
-  "version": "1.0.0",
-  "description": "A memory game based on memes ¯\\(ツ)\\/¯.",
-  "main": "index.js",
-  "private": true,
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "http-server": "^14.1.1"
-  }
-}
-
-```
-</details>
+??? info "Show the package.json file"
+
+    === "package.json"
+    
+        ```json
+        {
+          "name": "username-meme-ory",
+          "version": "1.0.0",
+          "description": "A memory game based on memes ¯\\(ツ)\\/¯.",
+          "main": "index.js",
+          "private": true,
+          "scripts": {
+            "test": "echo \"Error: no test specified\" && exit 1"
+          },
+          "author": "",
+          "license": "ISC",
+          "devDependencies": {
+            "http-server": "^14.1.1"
+          }
+        }
+        
+        ```
 
 > **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...
 >
@@ -337,32 +337,30 @@ So now, to run the server, you can use the command `http-server -c-1` without `n
 - Add a new script called `start` in the scripts section. This script will run our `http-server` command.
 
 
-  <details> <summary> Show the package.json file </summary>
+  ??? info "Show the package.json file"
 
-  package.json
-  ```json{3}
-  {
-    "scripts": {
-      "start": "http-server -c-1",
-      "test": "echo \"Error: no test specified\" && exit 1"
-    },
-  }
-  ```
-  </details>
+      === "package.json"
+          ```json
+          {
+            "scripts": {
+              "start": "http-server -c-1",
+              "test": "echo \"Error: no test specified\" && exit 1"
+            },
+          }
+          ```
 
 - Kill the old `http-server` if it is still running. Now, you can start your application using the following command:
 
-  alias
+=== "alias"
+    ```bash
+    npm start
+    ```
 
-  ```bash
-  npm start
-  ```
+=== "verbose"
 
-  verbose
-
-  ```bash
-  npm run start
-  ```
+    ```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.
@@ -376,12 +374,5 @@ front-end/
 
 #### <i class="fa fa-list-check"></i> Checklist
 
-- [ ] I know what _NPM scripts_ are.
-- [ ] I can run my application running the `npm start` command.
-
-<style>
-summary {
-  color: #CA2468;
-  text-align: center;
-}
-</style>
+- <input type="checkbox" /> I know what _NPM scripts_ are.
+- <input type="checkbox" /> I can run my application running the `npm start` command.
diff --git a/resources/docs/docs/chapters/tp/setup.md b/resources/docs/docs/chapters/tp/setup.md
index 6111b0169e59a1ef8709d002f278ffc4cd131832..d388c1a1e74647deb5ed8071c8aea27102bda2a1 100644
--- a/resources/docs/docs/chapters/tp/setup.md
+++ b/resources/docs/docs/chapters/tp/setup.md
@@ -19,15 +19,13 @@ 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.
-  > <details> <summary>Show the installation commands</summary>
+  > ??? note "Show the installation commands"
   >
-  > ```bash
-  > curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
-  > nvm install 16
-  > nvm default 16
-  > ```
-  >
-  > </details>
+  >     ```bash
+  >     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
+  >     nvm install 16
+  >     nvm default 16
+  >     ```
 
 - Have a web browser with good capabilities for debugging JavaScript (Eg: Google Chrome, Chromium, or Firefox).
 
@@ -54,14 +52,13 @@ 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**
 
-  <details> <summary> Show the Git commands </summary>
+??? note "Show the Git commands" 
 
-  ```:no-v-pre
-  git clone git@<YOUR_GITLAB>:<YOUR_NAMESPACE>/<YOUR_PROJECT>.git
-  cd <YOUR_PROJECT>
-  git switch -c develop
-  ```
-  </details>
+    ```bash
+    git clone git@<YOUR_GITLAB>:<YOUR_NAMESPACE>/<YOUR_PROJECT>.git
+    cd <YOUR_PROJECT>
+    git switch -c develop
+    ```
 
 - Download and extract the initial _ES5_ codebase for the _MEME-ORY_ application in your workspace:
   <ResourcesButton path="init.zip" title="Meme-ORY" />
@@ -94,27 +91,24 @@ Do it yourself
   npx http-server -c-1
   ```
 
-  <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...
-  >
-  > The _http-server_ package has a dependency on the _colors_ package, which introduced a bug in version 1.4.1, causing that infinite loop.
-  >
-  > You can fix it by installing a fixed version for packages `colors` and `http-server`:
-  >
-  > ```bash
-  > cd front-end/
-  > npm install colors@1.4.0 --save --saved-exact
-  > npm install http-server@14.0.0
-  > ```
-  >
-  > Now, you can start the HTTP-server without any trouble!
-  >
-  > ```bash
-  > npx http-server -c-1
-  > ```
-
-  </details>
+??? tip "Show the troubleshoot"
+     When I run the **_npx http-server -c-1_** command, it produces an infinite loop on my standard output...
+    
+     The _http-server_ package has a dependency on the _colors_ package, which introduced a bug in version 1.4.1, causing that infinite loop.
+    
+     You can fix it by installing a fixed version for packages `colors` and `http-server`:
+    
+     ```bash
+     cd front-end/
+     npm install colors@1.4.0 --save --saved-exact
+     npm install http-server@14.0.0
+     ```
+    
+     Now, you can start the HTTP-server without any trouble!
+    
+     ```bash
+     npx http-server -c-1
+     ```
 
 - 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.
@@ -139,11 +133,3 @@ front-end/
 - [ ] I can play _MEME-Ory_ game on [http://localhost:8080/src](http://localhost:8080/src)
 
 [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 8e8fa724e251f8b405de6d515ed2fe4918460910..2c02ecb2d0bd7728040a6d92071aebaa2ebf9c48 100644
--- a/resources/docs/docs/chapters/tp/spa.md
+++ b/resources/docs/docs/chapters/tp/spa.md
@@ -22,19 +22,18 @@ Each view comes with a _complete *HTML* document_. Going from one view to anothe
 
 ## <i class="fa fa-wrench"></i> The browser dev tools
 
-> **tip** **Did you know**?
->
-> Your web browser can give you a lot of information about what happens behind the scene (JavaScript execution, stack-traces, network, errors, ...). Press `ctrl+shift+I` (Firefox, Google Chrome, Chromium) to open the developer console.  
-> There, you can:
-> - see the **application logs** in the "Console" tab
-> - browse **source files** pressing `ctrl+P` or in the "Sources" tab
-> - set **breakpoints** and **debug your code**
-> - **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)
-
-> **question** How many megabytes are transferred in total after going through the three views, with `size=2`?
+!!! tip "Did you know ?"
+    > Your web browser can give you a lot of information about what happens behind the scene (JavaScript execution, stack-traces, network, errors, ...). Press `ctrl+shift+I` (Firefox, Google Chrome, Chromium) to open the developer console.  
+    > There, you can:
+    > - see the **application logs** in the "Console" tab
+    > - browse **source files** pressing `ctrl+P` or in the "Sources" tab
+    > - set **breakpoints** and **debug your code**
+    > - **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)
+
+> !!! question "How many megabytes are transferred in total after going through the three views, with `size=2`?"
 
 In this chapter, we will turn the _MEME-Ory_ application into a **_Single Page Application_** to fix this!
 
@@ -58,34 +57,32 @@ It uses the [`DOM` API](https://developer.mozilla.org/en-US/docs/Web/API/Documen
   This archive contains two source files you have to put in your `front-end/src/app/scripts/` folder:
 
   - **`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">`.
-  <details><summary> Show the main.js file</summary>
-  
-  main.js
-
-  ```js{1}
-  const outlet = document.querySelector("#content-outlet");
-  const router = new Router(outlet);
-  router
-    .register("", {
-      component: WelcomeComponent,
-      templateUrl: "/src/app/views/welcome.html",
-    })
-    .register("welcome", {
-      component: WelcomeComponent,
-      templateUrl: "/src/app/views/welcome.html",
-    })
-    .register("game", {
-      component: GameComponent,
-      templateUrl: "/src/app/views/game.html",
-    })
-    .register("score", {
-      component: ScoreComponent,
-      templateUrl: "/src/app/views/score.html",
-    });
-  ```
-
-  </details> 
+    - **`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">`.
+???+ info "Show the main.js file"
+
+    === "main.js"
+       ```js
+         const outlet = document.querySelector("#content-outlet");
+         const router = new Router(outlet);
+         router
+         .register("", {
+         component: WelcomeComponent,
+         templateUrl: "/src/app/views/welcome.html",
+         })
+         .register("welcome", {
+         component: WelcomeComponent,
+         templateUrl: "/src/app/views/welcome.html",
+         })
+         .register("game", {
+         component: GameComponent,
+         templateUrl: "/src/app/views/game.html",
+         })
+         .register("score", {
+         component: ScoreComponent,
+         templateUrl: "/src/app/views/score.html",
+         });
+       ```
+
 
   - Edit `router.js` and complete the implementation of `function renderTemplate() {}`. Follow the `TODO #spa` comments for instructions.
       <details><summary> Show the resulting renderTemplate() function </summary>
@@ -208,15 +205,6 @@ src/app/views/welcome.html
 
 #### <i class="fa fa-list-check"></i> Checklist
 
-- [ ] I know how to open and use the browser developer console.
-- [ ] I know what is a _SPA_ and why it may be a better choice.
-- [ ] The application runs as usual.
-
-<style>
-summary {
-  color: #cb2468;
-  text-align: center;
-  margin-bottom: 20px;
-  margin-top: 20px
-}
-</style>
\ No newline at end of file
+- <input type="checkbox" /> I know how to open and use the browser developer console.
+- <input type="checkbox" /> I know what is a _SPA_ and why it may be a better choice.
+- <input type="checkbox" /> The application runs as usual.
diff --git a/resources/docs/mkdocs.yml b/resources/docs/mkdocs.yml
index 56f706cdce5d54493944b5f2edd7cdd3b56b1dbe..592930b227b896b5951ec0e4e63c1764509b3723 100644
--- a/resources/docs/mkdocs.yml
+++ b/resources/docs/mkdocs.yml
@@ -1,9 +1,9 @@
 site_name: ES6 Formation
 nav:
   - TP:
-      - "Setup": chapters/tp/setup.md
-      - "npm": chapters/tp/npm.md
-      - "Spa": chapters/tp/spa.md
+      - "Getting started": chapters/tp/setup.md
+      - "The package manager": chapters/tp/npm.md
+      - "Single Page Application (SPA)": chapters/tp/spa.md
       - "Webpack": chapters/tp/webpack.md
       - "The bundle": chapters/tp/bundle.md
       - "CSS Loader": chapters/tp/css-loader.md