diff --git a/README.md b/README.md
index bc60552..4ce757b 100644
--- a/README.md
+++ b/README.md
@@ -87,3 +87,9 @@ The project uses [Tailwind CSS](https://starlight.astro.build/guides/css-and-tai
 ## 📖 Content Management
 
 Tutorials are written in Markdown (`.mdx`) files located in `src/content/docs/`. Each file is automatically exposed as a route based on its file name. Images can be added to `src/assets/` and embedded in Markdown with relative links.
+
+
+## note
+
+The content is a complete step of an 'angular introduction course'
+do not include code snippets, focus on the concepts, do not dive into instructions, just describe the concepts.
\ No newline at end of file
diff --git a/astro.config.mjs b/astro.config.mjs
index c62def6..ddc9ac0 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -62,16 +62,24 @@ export default defineConfig({
               link: "/task-listing/components-introduction",
             },
             {
-              label: "Create First Component",
-              link: "/task-listing/create-first-component",
+              label: "Generate an Angular Component",
+              link: "/task-listing/generate-component",
             },
             {
-              label: "Task Interface",
-              link: "/task-listing/task-interface",
+              label: "Display the Component",
+              link: "/task-listing/display-component",
             },
             {
-              label: "Display List",
-              link: "/task-listing/display-list",
+              label: "TypeScript Interface",
+              link: "/task-listing/typescript-interface",
+            },
+            {
+              label: "Signals Introduction",
+              link: "/task-listing/signals-introduction",
+            },
+            {
+              label: "Control Flow",
+              link: "/task-listing/control-flow",
             },
             {
               label: "Interpolation",
@@ -94,37 +102,49 @@ export default defineConfig({
               label: "Routing Introduction",
               link: "/create-task/routing-introduction",
             },
+            {
+              label: "Add router outlet",
+              link: "/create-task/add-router-outlet",
+            },
+            {
+              label: "Define routes",
+              link: "/create-task/define-routes",
+            },
+            {
+              label: "Add router links",
+              link: "/create-task/add-routerlinks",
+            },
             {
               label: "HTML Form",
               link: "/create-task/html-form",
             },
             {
-              label: "Form Binding",
-              link: "/create-task/form-binding",
+              label: "Reactive Forms",
+              link: "/create-task/reactive-forms",
             },
             {
               label: "Event Binding",
               link: "/create-task/event-binding",
             },
             {
-              label: "Angular Service",
-              link: "/create-task/angular-service",
+              label: "Generate an Angular Service",
+              link: "/create-task/generate-angular-service",
             },
             {
               label: "Dependency Injection",
               link: "/create-task/dependency-injection",
             },
             {
-              label: "Add Task Service",
-              link: "/create-task/add-task-service",
+              label: "First Service Function",
+              link: "/create-task/add-task-function",
             },
             {
               label: "Inject Service Form",
               link: "/create-task/inject-service-form",
             },
             {
-              label: "Programmatical Routing",
-              link: "/create-task/programmatical-routing",
+              label: "Router Navigation",
+              link: "/create-task/router-navigation",
             },
             {
               label: "Component Destruction",
@@ -136,12 +156,16 @@ export default defineConfig({
           label: "Update Task",
           items: [
             {
-              label: "Update Task Route",
-              link: "/update-task/update-task-route",
+              label: "Add a new route",
+              link: "/update-task/add-new-route",
             },
             {
-              label: "Update Task Form",
-              link: "/update-task/update-task-form",
+              label: "Retrieve data from the URL",
+              link: "/update-task/retrieve-data-url",
+            },
+            {
+              label: "Form Validation",
+              link: "/update-task/form-validation",
             },
             {
               label: "Submit Update Form",
@@ -194,8 +218,8 @@ export default defineConfig({
               link: "/reusable-components/delete-all-tasks",
             },
             {
-              label: "Prefill Form",
-              link: "/reusable-components/prefill-form",
+              label: "Update a Reactive Form",
+              link: "/reusable-components/update-reactive-form",
             },
           ],
         },
@@ -207,8 +231,8 @@ export default defineConfig({
               link: "/api-server/json-server-installation",
             },
             {
-              label: "Add HTTP Client",
-              link: "/api-server/add-http-client",
+              label: "Inject HttpClient",
+              link: "/api-server/inject-http-client",
             },
             {
               label: "Retrieve Tasks",
@@ -228,6 +252,10 @@ export default defineConfig({
             },
           ],
         },
+        {
+          label: "Congratulations",
+          link: "/congratulations",
+        },
       ],
       customCss: ["./src/styles/global.css"],
       // Set English as the default language for this site.
diff --git a/src/components/ui/CustomPageTitle.astro b/src/components/ui/CustomPageTitle.astro
index 984507b..1374f66 100644
--- a/src/components/ui/CustomPageTitle.astro
+++ b/src/components/ui/CustomPageTitle.astro
@@ -1,13 +1,6 @@
 
 <h1 id="_top">{Astro.locals.starlightRoute.entry.data.title}</h1>
 
-<aside class="bg-yellow-100 text-yellow-800 p-4 rounded-lg border border-yellow-300 text-sm mb-4">
-    A new version of the tutorial will be released on <b>November 20th, 2025</b>.
-    The content will be updated to cover the latest changes in Angular v21.
-
-    Either wait for the updated version or finish the tutorial as is.
-</aside>
-
 <style>
 	@layer starlight.core {
 		h1 {
diff --git a/src/components/ui/NotificationCard.tsx b/src/components/ui/NotificationCard.tsx
index c13610b..1628259 100644
--- a/src/components/ui/NotificationCard.tsx
+++ b/src/components/ui/NotificationCard.tsx
@@ -20,12 +20,14 @@ interface NotificationCardProps {
   state: NotificationState;
   title: string;
   children: React.ReactNode;
+  src: string;
 }
 
 const NotificationCard: React.FC<NotificationCardProps> = ({
   state,
   title,
   children,
+  src,
 }) => {
   const stateConfig = {
     experimental: {
@@ -95,20 +97,25 @@ const NotificationCard: React.FC<NotificationCardProps> = ({
 
   return (
     <div
-      className={`!mt-12 py-4 px-6 ${config.bg} rounded-lg border ${config.border} relative`}
+      className={`${state === "objective" ? "" : "!mt-12"} py-4 px-6 ${
+        config.bg
+      } rounded-lg border ${config.border} relative`}
     >
-      <div className="flex items-center">
-        <Icon className={`w-5 h-5 ${config.iconColor}`} />
-        <span
-          className={`text-lg font-medium ${config.titleText} px-4 py-0.5 rounded-md`}
-        >
-          {title}
-        </span>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Icon className={`w-6 h-6 ${config.iconColor}`} />
+          <span
+            className={`text-lg font-bold ${config.titleText} px-4 py-0.5 rounded-md`}
+          >
+            {title}
+          </span>
+        </div>
+        {src && (
+          <audio className="hidden md:block mt-0" controls src={src}></audio>
+        )}
       </div>
 
-      <div className="space-y-2 text-gray-700 dark:text-gray-300">
-        {children}
-      </div>
+      <div className={`text-gray-700 dark:text-gray-300 mt-0`}>{children}</div>
     </div>
   );
 };
diff --git a/src/content/docs/en/api-server/add-http-client.mdx b/src/content/docs/en/api-server/add-http-client.mdx
deleted file mode 100644
index dd7e131..0000000
--- a/src/content/docs/en/api-server/add-http-client.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Add HTTP Client
-description: Learn how to add HTTP Client to your Angular application.
-course: angular-20
-slug: "api-server-add-http-client"
----
-
-import { Steps } from '@astrojs/starlight/components';
-import NotificationCard from "../../../../components/ui/NotificationCard";
-
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Add HTTP Client</strong>
-      <p>Learn how to add HTTP Client to your Angular application.</p>
-    </li>
-  </ul>
-</NotificationCard>
-
-
-## HttpClient Provider
-
-The HttpClient is a built-in Angular service that allows you to send HTTP requests to a server. In Angular 20, we use the `provideHttpClient` function to configure the HTTP client in the application bootstrap.
-
-<Steps>
-
-1. Import **provideHttpClient** in the `src/app/app.config.ts` file.
-
-   ```typescript ins={"Import provideHttpClient": 3-4} ins={"Import provideHttpClient function": 13-14}
-    import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
-    import { provideRouter } from '@angular/router';
-
-    import {provideHttpClient} from '@angular/common/http';
-
-   import { routes } from './app.routes';
-
-   export const appConfig: ApplicationConfig = {
-      providers: [
-      provideBrowserGlobalErrorListeners(),
-      provideZonelessChangeDetection(),
-      provideRouter(routes),
-
-      provideHttpClient()
-      ]
-    };
-   ```
-
-2. Inject the HttpClient service in the `src/app/task-service.ts` file.
-
-   ```typescript ins={"Import the HttpClient service": 2-3} ins="inject" ins={"Inject the HttpClient service": 9-11}
-   import { Injectable, inject } from "@angular/core";
-
-   import { HttpClient } from "@angular/common/http";
-
-   @Injectable({
-     providedIn: "root",
-   })
-   export class TaskService {
-
-     private http = inject(HttpClient);
-   }
-   ```
-
-</Steps>
-
-<NotificationCard state="info" title="Note">
-  Where to place the **constructor** line in an Angular class?
-  The recommended practices for ordering elements in an Angular class are:
-
-1. Variables
-2. Constructor
-3. Functions
-
-</NotificationCard>
-
-<NotificationCard state="success" title="What you've learned">
-  <strong>HttpClientModule</strong> is a built-in Angular module that allows you
-  to send HTTP requests to a server. It's one of the first modules added to a
-  real Angular application to communicate with a server. In the next chapters,
-  we'll use it to communicate with the mock API server to retrieve and update
-  tasks.
-</NotificationCard>
diff --git a/src/content/docs/en/api-server/create-task.mdx b/src/content/docs/en/api-server/create-task.mdx
index 6c66c6d..1ec078a 100644
--- a/src/content/docs/en/api-server/create-task.mdx
+++ b/src/content/docs/en/api-server/create-task.mdx
@@ -8,13 +8,8 @@ slug: "api-server-create-task"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Create a task using HTTP Client</strong>
-      <p>Add a task to the list by making an API call to the mock server.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Add a task to the list by making an API call to the mock server.
 </NotificationCard>
 
 ## TaskService
@@ -94,8 +89,8 @@ Let's subscribe to the observable using the `subscribe` function.
         @Component({
           selector: 'app-task-form',
           imports: [
-          ReactiveFormsModule,
-          AlertBanner
+            ReactiveFormsModule,
+            AlertBanner
           ],
           templateUrl: './task-form.html',
           styleUrls: ['./task-form.css']
@@ -104,21 +99,19 @@ Let's subscribe to the observable using the `subscribe` function.
           private taskService = inject(TaskService);
           private router = inject(Router);
           private route = inject(ActivatedRoute);
-          private id: string | null = null;
+          private id = this.route.snapshot.paramMap.get('id');
 
           form = new FormGroup({
             title: new FormControl('', [Validators.required]),
             description: new FormControl('', [Validators.minLength(1)])
           });
 
-          ngOnInit() {
-            this.id = this.route.snapshot.paramMap.get("id");
-
-            if (this.id ) {
-             this.form.patchValue(this.taskService.getTask(this.id ));
+          constructor() {
+            if (this.id) {
+              this.form.patchValue(this.taskService.getTask(this.id));
             }
           }
-
+          
         submit() {
             if (this.id) {
                 const existingTask = this.taskService.getTask(id);
@@ -195,13 +188,11 @@ Use this callback function to navigate to the **"/"** route.
 
 1.  Update the `src/app/task-form/task-form.ts` file.
 
-        ```typescript ins={"Update the form submission function": 11-14}
+        ```typescript ins={"Update the form submission function": 9-12}
 
           submit() {
-              const id = this.route.snapshot.paramMap.get('id');
-
-                if (id) {
-                    const existingTask = this.taskService.getTask(id);
+              if (this.id) {
+                    const existingTask = this.taskService.getTask(this.id);
                     this.taskService.updateTask({
                         ...existingTask,
                         ...this.task
diff --git a/src/content/docs/en/api-server/delete-task.mdx b/src/content/docs/en/api-server/delete-task.mdx
index 6467210..c22b53c 100644
--- a/src/content/docs/en/api-server/delete-task.mdx
+++ b/src/content/docs/en/api-server/delete-task.mdx
@@ -8,15 +8,8 @@ slug: "api-server-delete-task"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Delete a task using HTTP Client</strong>
-      <p>
-        Delete a task from the list by making an API call to the mock server.
-      </p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Delete a task from the list by making an API call to the mock server.
 </NotificationCard>
 
 ## TaskService
diff --git a/src/content/docs/en/api-server/inject-http-client.mdx b/src/content/docs/en/api-server/inject-http-client.mdx
new file mode 100644
index 0000000..6fce98b
--- /dev/null
+++ b/src/content/docs/en/api-server/inject-http-client.mdx
@@ -0,0 +1,47 @@
+---
+title: Inject HTTP Client
+description: Learn how to inject HTTP Client into your Angular application.
+course: angular-20
+slug: "api-server-inject-http-client"
+---
+
+import { Steps } from "@astrojs/starlight/components";
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+<NotificationCard state="objective" title="Chapter Objective">
+  Inject HTTP Client into your Angular application.
+</NotificationCard>
+
+The **HttpClient** service is a built-in Angular service that allows you to send HTTP requests to a server.
+As we already did with some services such as **ActivatedRoute** or **Router$$, we could inject it in a component.
+
+But that's a common bad practice to inject services in components!
+We want to keep oyur components as clean as possible, not to focus on the business logic, but on the UI.
+That's why we'll inject the **HttpClient** service in the **TaskService** service, not in a component.
+
+<Steps>
+
+1. Inject the HttpClient service in the `src/app/task-service.ts` file.
+
+   ```typescript ins={"Import the HttpClient service": 2-3} ins={"Inject the HttpClient service": 9-11}
+   import { Injectable, inject } from "@angular/core";
+
+   import { HttpClient } from "@angular/common/http";
+
+   @Injectable({
+     providedIn: "root",
+   })
+   export class TaskService {
+
+     private http = inject(HttpClient);
+   }
+   ```
+
+</Steps>
+
+<NotificationCard state="success" title="What you've learned">
+  <strong>HttpClient</strong> is a built-in Angular service that allows you to
+  send HTTP requests to a server. It's one of the first modules added to a real
+  Angular application to communicate with a server. In the next chapters, we'll
+  use it to communicate with the mock API server to retrieve and update tasks.
+</NotificationCard>
diff --git a/src/content/docs/en/api-server/json-server-installation.mdx b/src/content/docs/en/api-server/json-server-installation.mdx
index 1167d87..8e831b4 100644
--- a/src/content/docs/en/api-server/json-server-installation.mdx
+++ b/src/content/docs/en/api-server/json-server-installation.mdx
@@ -5,19 +5,11 @@ course: angular-20
 slug: "api-server-json-server-installation"
 ---
 
-import { Steps } from '@astrojs/starlight/components';
+import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Install JSON Server</strong>
-      <p>
-        Learn how to install and configure JSON Server for your Angular
-        application.
-      </p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Install and configure JSON Server for your Angular application.
 </NotificationCard>
 
 ## What is JSON server?
@@ -63,9 +55,9 @@ Let's install it and create a fake database.
    ```json ins={"Add start-server script": 3-4}
    {
      "scripts": {
-
+      
        "start-server": "json-server --watch db.json"
-     // other scripts...
+       // other scripts...
      }
    }
    ```
diff --git a/src/content/docs/en/api-server/retrieve-tasks.mdx b/src/content/docs/en/api-server/retrieve-tasks.mdx
index 5c2f1db..4ecf9d1 100644
--- a/src/content/docs/en/api-server/retrieve-tasks.mdx
+++ b/src/content/docs/en/api-server/retrieve-tasks.mdx
@@ -8,16 +8,8 @@ slug: "api-server-retrieve-tasks"
 import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Retrieve tasks using HTTP Client</strong>
-      <p>
-        Learn how to retrieve tasks from the list using HTTP Client in an
-        Angular application.
-      </p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Retrieve tasks from the list using HTTP Client in an Angular application.
 </NotificationCard>
 
 ## Update TaskService
@@ -122,7 +114,7 @@ To differentiate an observable value, the Angular community commonly uses the `$
    export class TaskList {
      private taskService = inject(TaskService);
 
-     tasks: Task[] = this.taskService.tasks;
+     tasks = this.taskService.tasks;
 
      tasks$ = this.taskService.getTasks();
    }
@@ -182,54 +174,6 @@ Here its role will be to subscribe to the observable and return the list of task
 
 </Steps>
 
-### Alternative
-
-The alternative to using the **async** pipe is to subscribe to the observable in the component.
-
-This is done by calling the **subscribe** function on the observable and passing a callback function as a parameter.
-This callback will be made once the data is available.
-
-This subscription will be used in the **ngOnInit** function of the **TaskListComponent** class.
-
-<Steps>
-
-1. Update the `src/app/task-list/task-list.ts` file.
-
-   ```typescript ins={"Subscribe to the observable": 14-17}
-   import { Component, OnInit } from "@angular/core";
-   import { TaskService } from "../task-service";
-   import { Task } from "../task.model";
-
-   @Component({
-     selector: "app-task-list",
-     templateUrl: "./task-list.html",
-     styleUrls: ["./task-list.css"],
-   })
-   export class TaskList implements OnInit {
-     private taskService = inject(TaskService);
-
-     tasks: Task[] = this.taskService.tasks;
-
-     ngOnInit() {
-       this.taskService.getTasks().subscribe((tasks) => (this.tasks = tasks));
-     }
-   }
-   ```
-
-</Steps>
-
-### Pitfalls
-
-Although subscribing to the observable in the component is a valid solution, it lacks some optimizations provided by the **async** pipe.
-It also requires more code for the same result.
-
-Indeed, when you use the subscription to the observable in the component, you need to think about **unsubscribing**.
-We won't cover this action for now. You can discuss with your mentor for more details.
-
-**Zoneless Change Detection**:
-
-Traditional Angular applications use **Zone.js** to automatically detect when changes occur (like user clicks, HTTP responses, or timers) and update the UI accordingly. **Zoneless change detection** is a modern approach but not stable for the moment where Angular doesn't automatically track these changes. Instead, developers have more control over when the UI updates, typically using signals or explicit change detection triggers. This can lead to better performance and more predictable behavior, but requires a slightly different development approach.
-
 <NotificationCard state="success" title="What you've learned">
   In this chapter, you've learned one of Angular's key features: how to query
   data from an API server!
diff --git a/src/content/docs/en/api-server/update-task.mdx b/src/content/docs/en/api-server/update-task.mdx
index 17bc937..dcb9645 100644
--- a/src/content/docs/en/api-server/update-task.mdx
+++ b/src/content/docs/en/api-server/update-task.mdx
@@ -8,13 +8,8 @@ slug: "api-server-update-task"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Update a task using HTTP Client</strong>
-      <p>Update a task in the list by making an API call to the mock server.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Update a task in the list by making an API call to the mock server.
 </NotificationCard>
 
 In addition to targeting task updates rather than creation, this lesson will be quite similar to the previous one:
@@ -77,9 +72,7 @@ Like the previously changed functions to communicate with the API, this function
 While the function name doesn't change, you'll now need to **subscribe** to get its value.
 
 ```typescript
-ngOnInit() {
-   this.id = this.route.snapshot.paramMap.get('id');
-
+constructor() {
     if (this.id) {
       this.taskService.getTask(this.id).subscribe(task => {
         this.form.patchValue(task);
@@ -92,19 +85,15 @@ ngOnInit() {
 
 1.  Update the **task-form.ts** file.
 
-        ```typescript ins={"Replace the getTask function": 5-7}
-
-            ngOnInit() {
-                this.id = this.route.snapshot.paramMap.get('id');
+        ```typescript ins={"Replace the getTask function": 3-6}
+            constructor() {
+              if (this.id) {
 
-                if (this.id) {
-
-                    this.taskService.getTask(this.id).subscribe(task => {
-                        this.form.patchValue(task);
-                    });
-                }
+                this.taskService.getTask(this.id).subscribe(task => {
+                  this.form.patchValue(task);
+                });
+              }
             }
-
         ```
 
 </Steps>
@@ -141,10 +130,9 @@ Handle it by modifying the **submit** function:
 
 1. Update the **task-form.ts** file.
 
-   ```typescript ins={"Refactor the submit function": 3-12}
+   ```typescript ins={"Refactor the submit function": 2-11}
 
      submit() {
-       this.id = this.route.snapshot.paramMap.get("id");
 
        const taskObservable = this.id
          ? this.taskService.updateTask(this.form.value, this.id)
diff --git a/src/content/docs/en/congratulations.mdx b/src/content/docs/en/congratulations.mdx
new file mode 100644
index 0000000..f2c93ba
--- /dev/null
+++ b/src/content/docs/en/congratulations.mdx
@@ -0,0 +1,106 @@
+---
+title: Congratulations!
+description: You've completed the Angular introduction course. Here are some resources to continue your learning journey.
+course: angular-20
+slug: "congratulations"
+---
+
+import NotificationCard from "../../../components/ui/NotificationCard";
+
+![Angular](../../../../public/extended-angular-logo.png)
+
+## 🎉 Congratulations!
+
+You've successfully completed the Angular introduction course! You've built a complete task management application and learned the fundamental concepts of Angular development.
+
+<NotificationCard state="success" title="What you've accomplished">
+  Throughout this course, you've learned how to:
+  <ul className="list-disc pl-4 space-y-2 mt-2">
+    <li>Create and structure Angular components</li>
+    <li>Use data binding and interpolation to display dynamic content</li>
+    <li>Handle user interactions with event binding</li>
+    <li>Work with forms and form validation</li>
+    <li>Implement routing and navigation</li>
+    <li>Communicate with REST APIs using HttpClient</li>
+    <li>Manage application state with services and dependency injection</li>
+    <li>Create reusable components with inputs and outputs</li>
+  </ul>
+</NotificationCard>
+
+## Continue Your Learning Journey
+
+Now that you have a solid foundation in Angular, here are some valuable resources to help you continue growing as an Angular developer:
+
+### Official Documentation
+
+- **[Angular Documentation](https://angular.dev)** - The official Angular documentation is your best friend. It's comprehensive, up-to-date, and includes guides, tutorials, and API references.
+
+- **[Angular Blog](https://blog.angular.dev)** - Stay updated with the latest Angular news, features, and best practices from the Angular team.
+
+### Advanced Topics to Explore
+
+<NotificationCard state="info" title="Next Steps">
+  <ul className="list-disc pl-4 space-y-2">
+    <li>
+      <strong>RxJS and Observables</strong> - Deep dive into reactive
+      programming patterns that power Angular's data flow
+    </li>
+    <li>
+      <strong>State Management</strong> - Learn about NgRx, Signals, or other
+      state management solutions for larger applications
+    </li>
+    <li>
+      <strong>Testing</strong> - Master unit testing, integration testing, and
+      end-to-end testing with Angular's testing utilities
+    </li>
+    <li>
+      <strong>Performance Optimization</strong> - Learn about change detection
+      strategies, lazy loading, and performance best practices
+    </li>
+    <li>
+      <strong>Server-Side Rendering (SSR)</strong> - Explore Angular Universal
+      for improved SEO and initial load times
+    </li>
+    <li>
+      <strong>Angular Material</strong> - Build beautiful UIs with Google's
+      Material Design components
+    </li>
+  </ul>
+</NotificationCard>
+
+### Community Resources
+
+- **[Angular Discord](https://discord.gg/angular)** - Join the Angular community on Discord for real-time discussions and help
+
+- **[Angular Subreddit](https://reddit.com/r/Angular2)** - Connect with other Angular developers, share projects, and ask questions
+
+- **[Stack Overflow](https://stackoverflow.com/questions/tagged/angular)** - Search for solutions to common problems or ask your own questions
+
+- **[Angular YouTube Channel](https://www.youtube.com/@angular)** - Watch official Angular tutorials, talks, and announcements
+
+### Practice and Build
+
+The best way to solidify your knowledge is to build real projects. Consider:
+
+- **Expand your current project** - Add features like authentication, data persistence, or advanced UI components
+- **Build something new** - Create a portfolio website, a blog, or any application that interests you
+- **Contribute to open source** - Find Angular projects on GitHub and contribute to them
+- **Join coding challenges** - Participate in hackathons or coding challenges to practice your skills
+
+### Stay Updated
+
+Angular is actively developed and regularly updated. Make sure to:
+
+- Follow [@angular](https://twitter.com/angular) on Twitter/X for updates
+- Subscribe to the [Angular newsletter](https://blog.angular.dev)
+- Watch for new Angular releases and migration guides
+
+<NotificationCard state="success" title="Keep Learning">
+  Remember, becoming proficient in any framework takes time and practice. Don't
+  be discouraged by challenges—they're opportunities to learn and grow. Keep
+  building, keep experimenting, and most importantly, have fun with Angular!
+</NotificationCard>
+
+## Thank You!
+
+Thank you for completing this course. We hope it has provided you with a solid foundation to start building amazing Angular applications. Happy coding! 🚀
diff --git a/src/content/docs/en/create-task/add-router-outlet.mdx b/src/content/docs/en/create-task/add-router-outlet.mdx
new file mode 100644
index 0000000..c7d7b38
--- /dev/null
+++ b/src/content/docs/en/create-task/add-router-outlet.mdx
@@ -0,0 +1,71 @@
+---
+title: Add router outlet
+description: Add a router outlet in the template
+course: angular-20
+slug: "create-task-add-router-outlet"
+---
+
+import { Steps } from '@astrojs/starlight/components';
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+<NotificationCard state="objective" title="Chapter Objective">
+  Add a router outlet in the template to display the content of the current route
+</NotificationCard>
+
+## Router-outlet directive
+
+The **Router** API provides a directive called `router-outlet`.
+
+<NotificationCard state="info" title="Angular directives">
+  Angular Directives are components without a template.
+  There are meant to bind logic to your templates.
+  In this situation, the router-outlet directive will dynamically display components based on the current URL
+</NotificationCard>
+
+
+Routed content will be displayed. When the user navigates to a different route, the content of the `router-outlet` is replaced with the content of the new route.
+The `router-outlet` directive's only role is to mark the location in the HTML Template.  At this location, the content corresponding to the URL you defined will be displayed.
+
+A directive is a component without a template. Like a component, it can be used in the HTML Template with its selector (like `<router-outlet>`), but it doesn't have a template.
+It's meant to encapsulate a logic that can be used in the HTML Template.
+
+Think of it as salt on food - when you sprinkle it (apply the directive), it enhances the flavor of the dish (changes the element's behavior), but you don't see the salt as a separate ingredient on your plate. It blends in while making everything work better.
+
+<Steps>
+
+1. Update the `src/app/app.html` file to include the `router-outlet` directive:
+
+   ```html ins={"Add the directive via the router-outlet tag to mark the location of the content configured via URL": 5-6}
+   <div class="navbar bg-base-100 shadow-sm">
+     <a class="btn btn-ghost text-xl">Task Manager</a>
+   </div>
+   <main class="m-12">
+
+     <router-outlet />
+   </main>
+   ```
+
+  2. Then add it to `src/app/app.ts` to the `imports` array of the **@Component** decorator of the app.ts file:
+
+     ```ts del={"Remove TaskList imports as it's not needed anymore": 4-5} del="TaskList" ins="RouterOutlet" ins={"add RouterOutlet import": 2-3}
+      import { Component } from '@angular/core';
+
+     import {RouterOutlet} from '@angular/router';
+
+     import {TaskList} from './task-list/task-list';
+
+     @Component({
+         // ...
+         imports: [TaskList, RouterOutlet],
+         })
+           export class App {
+         }
+     ```
+</Steps>
+
+In the above case, the `router-outlet` is placed between the `<main>` tags. This means that you will continue to display the `<header>` on top of all pages. Only the content inside the main tag will be replaced by the content of the route.
+
+
+<NotificationCard state="success" title="What you've learned">
+  In this chapter, you learned how to display the content of the current route by defining the <code>router-outlet</code> directive.
+</NotificationCard>
diff --git a/src/content/docs/en/create-task/add-routerlinks.mdx b/src/content/docs/en/create-task/add-routerlinks.mdx
new file mode 100644
index 0000000..cf48f7f
--- /dev/null
+++ b/src/content/docs/en/create-task/add-routerlinks.mdx
@@ -0,0 +1,77 @@
+---
+title: Add router links
+description: Add links to navigate between routes
+course: angular-20
+slug: "create-task-add-routerlinks"
+---
+
+import { Steps } from '@astrojs/starlight/components';
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+<NotificationCard state="objective" title="Chapter Objective">
+  Add links to navigate between routes
+</NotificationCard>
+
+## Add links to navigate between routes
+
+You need to add links to trigger navigation between different routes.
+You could manually modify the URL in the browser, but users expect to have clickable links to navigate between pages.
+
+The HTML `<a>` tag is used to create links and is associated with the **routerLink** directive to use Angular routing. This directive takes the path of the route to navigate to as a value.
+
+<Steps>
+
+1. Import **RouterLink in the `src/app/app.ts` file.
+
+   ```ts ins={"Add Routerlink import":3-4} ins={"Add Routerlink to the component imports":8-9} ins=", RouterLink"
+   // app.ts
+   import { Component } from "@angular/core";
+
+   import { RouterLink, RouterOutlet } from "@angular/router";
+
+   @Component({
+     selector: "app-root",
+
+     imports: [RouterOutlet, RouterLink],
+     // ...
+   })
+   export class App {
+   }
+   ```
+
+2. Define links in the `src/app/app.html` file.
+
+    ```html  ins={"Add links to navigate between routes": 3-7}
+    <div class="navbar bg-base-100 shadow-sm">
+      <a class="btn btn-ghost text-xl">Task Manager</a>
+
+      <ul class="menu menu-horizontal px-1">
+        <li><a routerLink="/">Task List</a></li>
+        <li><a routerLink="/add-task">Add new task</a></li>
+      </ul>
+    </div>
+    <main class="m-12  max-w-screen-md mx-auto">
+      <router-outlet />
+    </main>
+    ```
+
+3. Click on both links to see the content of `TaskList` and `TaskForm` displayed alternately at the location defined by the `router-outlet`.
+
+</Steps>
+
+<NotificationCard state="info" title="Note">
+  The path of the **TaskFormComponent** is defined as `add-task` in the
+  `app.routes.ts` file. However, in the HTML Template, in the
+  **routerLink** directive, it is specified as `/add-task` (with the `/`).
+
+**routerLink** builds the URL relative to the current path. Adding a slash indicates that the URL should be built from the base URL of the application (here `http://localhost:4200`). Without specifying the slash in the **routerLink** directive, you would create nesting and navigate to `/add-task/add-task`.
+
+> `<a routerLink="/add-task">...</a>` => http://localhost:4200/add-task
+
+> `<a routerLink="add-task">...</a>` => http://localhost:4200/add-task/add-task
+
+</NotificationCard>
+
+<NotificationCard state="success" title="What you've learned">
+  In this chapter, you learned how to add links to navigate between routes using the <code>routerLink</code> directive.
+</NotificationCard>
diff --git a/src/content/docs/en/create-task/add-task-service.mdx b/src/content/docs/en/create-task/add-task-function.mdx
similarity index 82%
rename from src/content/docs/en/create-task/add-task-service.mdx
rename to src/content/docs/en/create-task/add-task-function.mdx
index 3d415ce..4f72663 100644
--- a/src/content/docs/en/create-task/add-task-service.mdx
+++ b/src/content/docs/en/create-task/add-task-function.mdx
@@ -1,28 +1,15 @@
 ---
-title: Add Task Service
+title: Add Task Function
 description: Learn how to implement task management in a service
 course: angular-20
-slug: "create-task-add-task-service"
+slug: "create-task-add-task-funtion"
 ---
 
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Implement task management</strong>
-      <p>Create methods to handle task operations in the service.</p>
-    </li>
-    <li>
-      <strong>Manage task state</strong>
-      <p>Learn how to maintain and update task data in the service.</p>
-    </li>
-    <li>
-      <strong>Handle task operations</strong>
-      <p>Implement methods for adding, updating, and removing tasks.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Add a function to handle the new items in the list
 </NotificationCard>
 
 ## Design a method to add a task
diff --git a/src/content/docs/en/create-task/component-destruction.mdx b/src/content/docs/en/create-task/component-destruction.mdx
index 031dbb5..ce0f184 100644
--- a/src/content/docs/en/create-task/component-destruction.mdx
+++ b/src/content/docs/en/create-task/component-destruction.mdx
@@ -5,24 +5,11 @@ course: angular-20
 slug: "create-task-component-destruction"
 ---
 
-import { Steps } from '@astrojs/starlight/components';
+import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Understand component lifecycle</strong>
-      <p>Learn about the lifecycle hooks in Angular components.</p>
-    </li>
-    <li>
-      <strong>Implement cleanup logic</strong>
-      <p>Master the ngOnDestroy hook for proper component cleanup.</p>
-    </li>
-    <li>
-      <strong>Handle subscriptions</strong>
-      <p>Learn how to properly manage and clean up subscriptions.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Understand the component lifecycle and its destruction.
 </NotificationCard>
 
 When you submit the form, the **task** property of **TaskForm** is populated with the values you entered in the form.
@@ -30,8 +17,8 @@ For example, given that you filled in the name and description fields, the **tas
 
 ```typescript
 form = new FormGroup({
-  title: new FormControl(''),
-  description: new FormControl('')
+  title: new FormControl("Learn Angular"),
+  description: new FormControl("Buy a course"),
 });
 ```
 
@@ -42,8 +29,8 @@ Thus, when navigating back to this form, the form will be initialized with empty
 
 ```typescript
 form = new FormGroup({
-  title: new FormControl(''),
-  description: new FormControl('')
+  title: new FormControl(""),
+  description: new FormControl(""),
 });
 ```
 
diff --git a/src/content/docs/en/create-task/create-form-component.mdx b/src/content/docs/en/create-task/create-form-component.mdx
index 54c1d00..afeca75 100644
--- a/src/content/docs/en/create-task/create-form-component.mdx
+++ b/src/content/docs/en/create-task/create-form-component.mdx
@@ -5,26 +5,11 @@ course: angular-20
 slug: "create-task-create-form-component"
 ---
 
-import { Steps } from '@astrojs/starlight/components';
+import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Generate a new component</strong>
-      <p>Use the Angular CLI to create a new component.</p>
-    </li>
-    <li>
-      <strong>Create a form structure</strong>
-      <p>Build a form to collect task information from users.</p>
-    </li>
-    <li>
-      <strong>Style the form</strong>
-      <p>
-        Apply styling to make the form visually appealing and user-friendly.
-      </p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Discover avandeced options for generating a new component.
 </NotificationCard>
 
 ## Creating Components
@@ -99,9 +84,6 @@ The option was added to the `angular.json` file when we created the project with
 
 <br />
 
-- <a
-    href="https://angular.dev/cli/generate/component"
-    target="_blank"
-  >
+- <a href="https://angular.dev/cli/generate/component" target="_blank">
     Angular CLI: Component Generation Documentation
   </a>
diff --git a/src/content/docs/en/create-task/define-routes.mdx b/src/content/docs/en/create-task/define-routes.mdx
new file mode 100644
index 0000000..383dc49
--- /dev/null
+++ b/src/content/docs/en/create-task/define-routes.mdx
@@ -0,0 +1,61 @@
+---
+title: Define routes
+description: Define routes in your Angular application
+course: angular-20
+slug: "create-task-define-routes"
+---
+
+import { Steps } from '@astrojs/starlight/components';
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+<NotificationCard state="objective" title="Chapter Objective">
+  Define routes in your Angular application
+</NotificationCard>
+
+## Define routes
+
+To display the desired content based on the URL, you need to add a `path` to each of your `components` in your `routes` array, for example:
+
+```typescript
+{ path: 'add-task', component: TaskForm }
+```
+
+The path is therefore the URL that the user will access. For example, the path `/add-task` means that the user will navigate to the URL `http://localhost:4200/add-task`.
+
+The provided component is the component that will be displayed in the `router-outlet` placeholder when the user accesses this URL.
+
+The route definition resides in the `app.routes.ts` file.
+
+    ```bash ins="app.routes.ts"
+    src
+    └─ app
+        └─ app.routes.ts
+    ```
+
+---
+
+##### Instructions
+
+<Steps>
+
+1. Update the `src/app/app.routes.ts` file.
+
+   ```typescript ins={"Import components for each route": 3-5} ins={"Define the routes": 7-11}
+   // app-route.ts
+   import { Routes } from "@angular/router";
+
+   import { TaskList } from "./task-list/task-list";
+   import { TaskForm } from "./task-form/task-form";
+
+
+   export const routes: Routes = [
+     { path: "", component: TaskList },
+     { path: "add-task", component: TaskForm },
+   ];
+   ```
+
+</Steps>
+
+<NotificationCard state="success" title="What you've learned">
+  In this chapter, you learned how to define routes in your Angular application.
+</NotificationCard>
diff --git a/src/content/docs/en/create-task/dependency-injection.mdx b/src/content/docs/en/create-task/dependency-injection.mdx
index 6fd3afb..68bfd74 100644
--- a/src/content/docs/en/create-task/dependency-injection.mdx
+++ b/src/content/docs/en/create-task/dependency-injection.mdx
@@ -8,21 +8,8 @@ slug: "create-task-dependency-injection"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Understand dependency injection</strong>
-      <p>Learn the fundamentals of dependency injection in Angular.</p>
-    </li>
-    <li>
-      <strong>Use services</strong>
-      <p>Master how to create and inject services in your components.</p>
-    </li>
-    <li>
-      <strong>Manage dependencies</strong>
-      <p>Learn how to properly manage and organize dependencies.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Communicate with a service from a component.
 </NotificationCard>
 
 ## Remove the tasks list from TaskListComponent
@@ -39,7 +26,7 @@ You need it to use the service's list instead. The first step is to remove the t
 
 1. Remove the **tasks** variable from the `src/app/task-list.ts` file, and all imports related to it.
 
-   ```typescript del="signal" del="WritableSignal" del="import { Task } from "./models/task.model";" del="import { v4 as uuid } from "uuid";" del={"Remove the tasks list": 12-27}
+   ```typescript del="signal" del="WritableSignal" del="import { Task } from "./models/task.model";" del="import { v4 as uuid } from "uuid";" del={"Remove the tasks list": 14-28}
    // task-list.ts
 
     import { Component, WritableSignal, signal } from "@angular/core";
@@ -94,6 +81,13 @@ Your application compiles again and you can now use the **taskService** variable
 tasks = this.taskService.tasks;
 ```
 
+:::caution
+You learned you have to use `()` to get the value of a Signal.
+We do not want to get its value but the Signal itself.
+Getting the value would get the current value, so if it changes (adding an item), the value would not be updated.
+Getting the Signal itself would allow the component to react to changes in the tasks list of the service.
+:::
+
 1. Update the `src/app/task-list.ts` file.
 
 ```typescript ins={"Import TaskService": 3-4} ins={"Create a tasks variable and initialize it with TaskService's list": 14-15} ins={"Inject TaskService in the class constructor": 12-13}
diff --git a/src/content/docs/en/create-task/event-binding.mdx b/src/content/docs/en/create-task/event-binding.mdx
index e639f2b..9185e47 100644
--- a/src/content/docs/en/create-task/event-binding.mdx
+++ b/src/content/docs/en/create-task/event-binding.mdx
@@ -8,25 +8,8 @@ slug: "create-task-event-binding"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Understand event binding</strong>
-      <p>Learn how to handle user interactions in Angular components.</p>
-    </li>
-    <li>
-      <strong>Implement event handlers</strong>
-      <p>Create methods to respond to user events in your components.</p>
-    </li>
-    <li>
-      <strong>Use event binding syntax</strong>
-      <p>Master the syntax for binding events in Angular templates.</p>
-    </li>
-    <li>
-      <strong>Work with form submission events</strong>
-      <p>Learn how to properly handle form submissions using ngSubmit.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Trigger a function when an event is triggered.
 </NotificationCard>
 
 ## Event
diff --git a/src/content/docs/en/create-task/form-binding.mdx b/src/content/docs/en/create-task/form-binding.mdx
deleted file mode 100644
index fe78c08..0000000
--- a/src/content/docs/en/create-task/form-binding.mdx
+++ /dev/null
@@ -1,203 +0,0 @@
----
-title: Form Binding
-description: Learn how to bind form data in Angular
-course: angular-20
-slug: "create-task-form-binding"
----
-
-import { Steps } from '@astrojs/starlight/components';
-import NotificationCard from "../../../../components/ui/NotificationCard";
-
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Understand form binding</strong>
-      <p>Learn how to bind form data to component properties in Angular.</p>
-    </li>
-    <li>
-      <strong>Implement two-way binding</strong>
-      <p>Master binding with FormControl, FormGroup, and FormBuilder for efficient reactive form handling in Angular.</p>
-    </li>
-    <li>
-      <strong>Handle form submission</strong>
-      <p>Learn how to process form data when users submit forms.</p>
-    </li>
-  </ul>
-</NotificationCard>
-
----
-
-Currently, the form input is possible. Now, you need to retrieve the form data to create a new task and add it to the existing list.
-
-## Angular Forms API
-
-Angular provides 2 different APIs for working with forms:
-
-- Template-driven Forms (two-way binding with the `ngModel` directive)
-- Reactive Forms
-
-In this course, you will use the Reactive Forms API to bind the form.
-
-## Reactive Forms
-
-The form structure, its behavior and related validation rules are defined in the component file.
-These rules are then bound to native HTML input tags in the HMTL file using the `formControlName` directive. We will see how to do that in the next steps.
-
-It enables connecting the template to the Form and reactively be aware of any change about its value, its status and the current state of the validation rules.
-
-## FormGroup and FormControl
-
-`FormGroup` and `FormControl` are two classes exposed by the `@angular/forms`package to define and structure your form:
-- `FormControl` is used to define the rules of a single input.
-- `FormGroup` is used to wrap multiple `FormControl` to manipulate a set of inputs as a single entity (it acts as a wrapper for a group of controls).
-
-### FormGroup
-
-We'll firstly define the `FormGroup` wrapper. It will be an empty shell so far.
-
-##### Instructions
-
-<Steps>
-
-1. Update the `src/app/task-form/task-form.ts` file:
-
-    ```typescript ins={"Import FormGroup": 2-3}  ins={"Define the FormGroup": 12-13}
-    import { Component } from '@angular/core';
-
-    import { FormGroup } from '@angular/forms';
-
-    @Component({
-    selector: 'app-task-form',
-    imports: [],
-    templateUrl: './task-form.html',
-    styleUrl: './task-form.css',
-    })
-    export class TaskForm {
-
-      form = new FormGroup({});
-    }
-    ```
-
-</Steps>
-
-### FormControl
-
-The form is meant to include two inputs: the name and the description.
-As `FormControl` is meant to handle a single input, we need to populate the new `FormGroup` with 2 `FormControls`.
-
-To create a `FormControl`, we need to instantiate it the same way we did for the `FormGroup`: `new FormControl()`.
-We also need to pass it a default value as a parameter: `new FormControl()''`.
-Here an empty string, but some situations will require to display a default real value in your HTML.
-
-##### Instructions
-
-<Steps>
-
-1. Update the `src/app/task-form/task-form.ts` file:
-
-    ```typescript ins={"Import FormControl": 2-3} ins={"Define the 2 FormControls": 14-16}
-      import { Component } from '@angular/core';
-
-      import { FormGroup, FormControl } from '@angular/forms';
-
-      @Component({
-        selector: 'app-task-form',
-        imports: [],
-        templateUrl: './task-form.html',
-        styleUrl: './task-form.css',
-      })
-      export class TaskForm {
-
-        form = new FormGroup({
-
-          title: new FormControl(''),
-          description: new FormControl('')
-        });
-      }
-    ```
-
-</Steps>
-
-## Form HTML Binding
-
-The form structure is defined but that's only an unused property in the `task-form.ts` file.
-We need to bind the form to the HTML inputs: once done, it'll allow getting the value of the inputs upon clicking on the submit button.
-
-It comes in multiple steps:
-
-- add a new import, `ReactiveFormsModule` to benefit from directives for the HTML template.
-- use these directives to bind the whole form and each input
-
-##### Instructions
-
-<Steps>
-
-  1. Import ReactiveFormsModule the `src/app/task-form/task-form.ts` file:
-
-      ```typescript ins={"Import ReactiveFormsModule": 2-3} ins={"Add the import": 7-8}
-        import { Component } from '@angular/core';
-
-        import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
-
-        @Component({
-        selector: 'app-task-form',
-
-        imports: [ReactiveFormsModule],
-        // ...
-      })
-        export class TaskForm {
-        // ...
-      }
-      ```
-
-2. Bind the whole form with the `formGroup` directive in  the `src/app/task-form/task-form.html` file:
-
-    ```html ins='[formGroup]="form"'
-      <form [formGroup]="form" class="flex flex-col gap-2 m-auto">
-        <fieldset class="fieldset w-full">
-          <legend class="fieldset-legend">Name</legend>
-          <input type="text" class="input w-full" placeholder="Type here" />
-        </fieldset>
-
-        <fieldset class="fieldset">
-          <legend class="fieldset-legend">Description</legend>
-          <textarea
-            class="textarea w-full h-24"
-            placeholder="Description"
-          ></textarea>
-        </fieldset>
-
-        <button type="submit" class="btn btn-primary">Submit</button>
-      </form>
-    ```
-
-3. Bind the individual `FormControls` by their name with the `formControlName` directives in  the `src/app/task-form/task-form.html` file:
-
-   ```html ins='formControlName="title"' ins='formControlName="description"'
-     <form [formGroup]="form" class="flex flex-col gap-2 m-auto">
-       <fieldset class="fieldset w-full">
-         <legend class="fieldset-legend">Name</legend>
-         <input formControlName="title" type="text" class="input w-full" placeholder="Type here" />
-       </fieldset>
-
-       <fieldset class="fieldset">
-         <legend class="fieldset-legend">Description</legend>
-         <textarea
-            formControlName="description"
-           class="textarea w-full h-24"
-           placeholder="Description"
-         ></textarea>
-       </fieldset>
-
-       <button type="submit" class="btn btn-primary">Submit</button>
-     </form>
-      ```
-
-</Steps>
-
-
-<NotificationCard state="success" title="What you've learned">
-  In this chapter, you learned how to bind a form to a Reactive Forms in Angular. You
-  learned how to define the form on Component side and how to use directives to bind this form on HTML side.
-</NotificationCard>
-
diff --git a/src/content/docs/en/create-task/angular-service.mdx b/src/content/docs/en/create-task/generate-angular-service.mdx
similarity index 81%
rename from src/content/docs/en/create-task/angular-service.mdx
rename to src/content/docs/en/create-task/generate-angular-service.mdx
index fc5d9f0..cb94d49 100644
--- a/src/content/docs/en/create-task/angular-service.mdx
+++ b/src/content/docs/en/create-task/generate-angular-service.mdx
@@ -1,28 +1,15 @@
 ---
-title: Angular Service
-description: Learn how to create and use services in Angular
+title: Generate an Angular Service
+description: Learn how to generate an Angular service using the Angular CLI
 course: angular-20
-slug: "create-task-angular-service"
+slug: "create-task-generate-angular-service"
 ---
 
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Create Angular services</strong>
-      <p>Learn how to generate and implement services in Angular.</p>
-    </li>
-    <li>
-      <strong>Share data between components</strong>
-      <p>Use services to manage and share data across components.</p>
-    </li>
-    <li>
-      <strong>Implement service methods</strong>
-      <p>Create methods in services to handle business logic.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Create an Angular service to manage the task list.
 </NotificationCard>
 
 ## Current Situation
@@ -74,7 +61,7 @@ The `ng generate` command that you used for components can also be used to gener
 
 2. Open the `task-service.ts` file and add a Signal property to store the task list, and add following imports:
 
-   ```typescript ins="uuid()" ins="WritableSignal" ins="signal" ins={"Import the task interface and the Signals related imports": 3-4} ins={"import uuid (id generator)": 6-7} ins={"Add the tasks variable": 14-28}
+   ```typescript ins={"Import the task interface and the Signals related imports": 3-4} ins={"import uuid (id generator)": 6-7} ins={"Add the tasks variable": 14-28}
    // task-service.ts
    import { Injectable, WritableSignal, signal } from "@angular/core";
 
diff --git a/src/content/docs/en/create-task/html-form.mdx b/src/content/docs/en/create-task/html-form.mdx
index 86d4134..6751aee 100644
--- a/src/content/docs/en/create-task/html-form.mdx
+++ b/src/content/docs/en/create-task/html-form.mdx
@@ -5,26 +5,11 @@ course: angular-20
 slug: "create-task-html-form"
 ---
 
-import { Steps } from '@astrojs/starlight/components';
+import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Create HTML forms</strong>
-      <p>Learn how to structure HTML forms in Angular components.</p>
-    </li>
-    <li>
-      <strong>Style form elements</strong>
-      <p>
-        Apply CSS styles to make forms visually appealing and user-friendly.
-      </p>
-    </li>
-    <li>
-      <strong>Add form validation</strong>
-      <p>Implement basic form validation using HTML5 attributes.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Add a basic HTML form to the task form component.
 </NotificationCard>
 
 ## Form Structure
@@ -41,8 +26,9 @@ The form to create a task will have the following fields:
 - Task description
 
 <NotificationCard state="info" title="Task model">
-  The **Task** interface includes 2 additional properties: **id** and **createdAt**.
-  Their values will be generated later when the form is submitted by the application and not by the user.
+  The **Task** interface includes 2 additional properties: **id** and
+  **createdAt**. Their values will be generated later when the form is submitted
+  by the application and not by the user.
 </NotificationCard>
 
 ---
@@ -53,24 +39,24 @@ The form also includes a submit button to create the new task based on the form
 
 1. Update the file `src/app/task-form/task-form.html`.
 
-     ```html
-     <form class="flex flex-col gap-2 m-auto">
-        <fieldset class="fieldset w-full">
-          <legend class="fieldset-legend">Name</legend>
-          <input type="text" class="input w-full" placeholder="Type here" />
-        </fieldset>
-
-       <fieldset class="fieldset">
-         <legend class="fieldset-legend">Description</legend>
-         <textarea
-           class="textarea w-full h-24"
-           placeholder="Description"
-         ></textarea>
-       </fieldset>
-
-       <button type="submit" class="btn btn-primary">Submit</button>
-     </form>
-     ```
+   ```html
+   <form class="flex flex-col gap-2 m-auto">
+     <fieldset class="fieldset w-full">
+       <legend class="fieldset-legend">Name</legend>
+       <input type="text" class="input w-full" placeholder="Type here" />
+     </fieldset>
+
+     <fieldset class="fieldset">
+       <legend class="fieldset-legend">Description</legend>
+       <textarea
+         class="textarea w-full h-24"
+         placeholder="Description"
+       ></textarea>
+     </fieldset>
+
+     <button type="submit" class="btn btn-primary">Submit</button>
+   </form>
+   ```
 
 </Steps>
 
diff --git a/src/content/docs/en/create-task/inject-service-form.mdx b/src/content/docs/en/create-task/inject-service-form.mdx
index 6cd723d..b457d23 100644
--- a/src/content/docs/en/create-task/inject-service-form.mdx
+++ b/src/content/docs/en/create-task/inject-service-form.mdx
@@ -8,13 +8,8 @@ slug: "create-task-inject-service-form"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Inject a service in the form</strong>
-      <p>Learn how to inject a service into a form component in Angular.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Inject a service into a form component in Angular.
 </NotificationCard>
 
 ## Inject TaskService into TaskForm component
diff --git a/src/content/docs/en/create-task/reactive-forms.mdx b/src/content/docs/en/create-task/reactive-forms.mdx
new file mode 100644
index 0000000..84eda16
--- /dev/null
+++ b/src/content/docs/en/create-task/reactive-forms.mdx
@@ -0,0 +1,194 @@
+---
+title: Reactive Forms
+description: Learn how to use Reactive Forms in Angular
+course: angular-20
+slug: "create-task-reactive-forms"
+---
+
+import { Steps } from "@astrojs/starlight/components";
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+<NotificationCard state="objective" title="Chapter Objective">
+  Bind a form to a Reactive Forms in Angular.
+</NotificationCard>
+
+---
+
+Currently, the form input is possible. Now, you need to retrieve the form data to create a new task and add it to the existing list.
+
+## Angular Forms API
+
+Angular provides 2 different APIs for working with forms:
+
+- Template-driven Forms (two-way binding with the `ngModel` directive)
+- Reactive Forms
+
+In this course, you will use the Reactive Forms API to bind the form.
+
+## Reactive Forms
+
+The form structure, its behavior and related validation rules are defined in the component file.
+These rules are then bound to native HTML input tags in the HMTL file using the `formControlName` directive. We will see how to do that in the next steps.
+
+It enables connecting the template to the Form and reactively be aware of any change about its value, its status and the current state of the validation rules.
+
+## FormGroup and FormControl
+
+`FormGroup` and `FormControl` are two classes exposed by the `@angular/forms`package to define and structure your form:
+
+- `FormControl` is used to define the rules of a single input.
+- `FormGroup` is used to wrap multiple `FormControl` to manipulate a set of inputs as a single entity (it acts as a wrapper for a group of controls).
+
+### FormGroup
+
+We'll firstly define the `FormGroup` wrapper. It will be an empty shell so far.
+
+##### Instructions
+
+<Steps>
+
+1. Update the `src/app/task-form/task-form.ts` file:
+
+   ```typescript ins={"Import FormGroup": 2-3}  ins={"Define the FormGroup": 12-13}
+   import { Component } from "@angular/core";
+
+   import { FormGroup } from "@angular/forms";
+
+   @Component({
+     selector: "app-task-form",
+     imports: [],
+     templateUrl: "./task-form.html",
+     styleUrl: "./task-form.css",
+   })
+   export class TaskForm {
+
+     form = new FormGroup({});
+   }
+   ```
+
+</Steps>
+
+### FormControl
+
+The form is meant to include two inputs: the name and the description.
+As `FormControl` is meant to handle a single input, we need to populate the new `FormGroup` with 2 `FormControls`.
+
+To create a `FormControl`, we need to instantiate it the same way we did for the `FormGroup`: `new FormControl()`.
+We also need to pass it a default value as a parameter: `new FormControl()''`.
+Here an empty string, but some situations will require to display a default real value in your HTML.
+
+##### Instructions
+
+<Steps>
+
+1. Update the `src/app/task-form/task-form.ts` file:
+
+   ```typescript ins={"Import FormControl": 2-3} ins={"Define the 2 FormControls": 13-16}
+   import { Component } from "@angular/core";
+
+   import { FormGroup, FormControl } from "@angular/forms";
+
+   @Component({
+     selector: "app-task-form",
+     imports: [],
+     templateUrl: "./task-form.html",
+     styleUrl: "./task-form.css",
+   })
+   export class TaskForm {
+     form = new FormGroup({
+
+       title: new FormControl(""),
+       description: new FormControl(""),
+     });
+   }
+   ```
+
+</Steps>
+
+## Form HTML Binding
+
+The form structure is defined but that's only an unused property in the `task-form.ts` file.
+We need to bind the form to the HTML inputs: once done, it'll allow getting the value of the inputs upon clicking on the submit button.
+
+It comes in multiple steps:
+
+- add a new import, `ReactiveFormsModule` to benefit from directives for the HTML template.
+- use these directives to bind the whole form and each input
+
+##### Instructions
+
+<Steps>
+
+1. Import ReactiveFormsModule the `src/app/task-form/task-form.ts` file:
+
+   ```typescript ins={"Import ReactiveFormsModule": 2-3} ins={"Add the import": 7-8}
+   import { Component } from "@angular/core";
+
+   import { FormGroup, FormControl, ReactiveFormsModule } from "@angular/forms";
+
+   @Component({
+     selector: "app-task-form",
+
+     imports: [ReactiveFormsModule],
+     // ...
+   })
+   export class TaskForm {
+     // ...
+   }
+   ```
+
+2. Bind the whole form with the `formGroup` directive in the `src/app/task-form/task-form.html` file:
+
+   ```html ins='[formGroup]="form"'
+   <form [formGroup]="form" class="flex flex-col gap-2 m-auto">
+     <fieldset class="fieldset w-full">
+       <legend class="fieldset-legend">Name</legend>
+       <input type="text" class="input w-full" placeholder="Type here" />
+     </fieldset>
+
+     <fieldset class="fieldset">
+       <legend class="fieldset-legend">Description</legend>
+       <textarea
+         class="textarea w-full h-24"
+         placeholder="Description"
+       ></textarea>
+     </fieldset>
+
+     <button type="submit" class="btn btn-primary">Submit</button>
+   </form>
+   ```
+
+3. Bind the individual `FormControls` by their name with the `formControlName` directives in the `src/app/task-form/task-form.html` file:
+
+   ```html ins='formControlName="title"' ins='formControlName="description"'
+   <form [formGroup]="form" class="flex flex-col gap-2 m-auto">
+     <fieldset class="fieldset w-full">
+       <legend class="fieldset-legend">Name</legend>
+       <input
+         formControlName="title"
+         type="text"
+         class="input w-full"
+         placeholder="Type here"
+       />
+     </fieldset>
+
+     <fieldset class="fieldset">
+       <legend class="fieldset-legend">Description</legend>
+       <textarea
+         formControlName="description"
+         class="textarea w-full h-24"
+         placeholder="Description"
+       ></textarea>
+     </fieldset>
+
+     <button type="submit" class="btn btn-primary">Submit</button>
+   </form>
+   ```
+
+</Steps>
+
+<NotificationCard state="success" title="What you've learned">
+  In this chapter, you learned how to bind a form to a Reactive Forms in
+  Angular. You learned how to define the form on Component side and how to use
+  directives to bind this form on HTML side.
+</NotificationCard>
diff --git a/src/content/docs/en/create-task/programmatical-routing.mdx b/src/content/docs/en/create-task/router-navigation.mdx
similarity index 78%
rename from src/content/docs/en/create-task/programmatical-routing.mdx
rename to src/content/docs/en/create-task/router-navigation.mdx
index 1ce4e25..ee6c941 100644
--- a/src/content/docs/en/create-task/programmatical-routing.mdx
+++ b/src/content/docs/en/create-task/router-navigation.mdx
@@ -1,28 +1,15 @@
 ---
-title: Programmatical Routing
+title: Router Navigation
 description: Learn how to handle navigation programmatically in Angular
 course: angular-20
-slug: "create-task-programmatical-routing"
+slug: "create-task-router-navigation"
 ---
 
-import { Steps } from '@astrojs/starlight/components';
+import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Understand programmatic navigation</strong>
-      <p>Learn how to trigger navigation from component code.</p>
-    </li>
-    <li>
-      <strong>Use Router service</strong>
-      <p>Master the Angular Router service for programmatic navigation.</p>
-    </li>
-    <li>
-      <strong>Handle navigation events</strong>
-      <p>Learn how to respond to navigation events in your components.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Trigger the navigation from a component.
 </NotificationCard>
 
 In the last step, you tested the form with this scenario:
@@ -61,9 +48,9 @@ This service allows you to retrieve information about the current route and enab
      // ...
    })
    export class TaskForm {
-    private taskService = inject(TaskService);
+     private taskService = inject(TaskService);
 
-    private router = inject(Router);
+     private router = inject(Router);
 
      task = {
        title: "",
diff --git a/src/content/docs/en/create-task/routing-introduction.mdx b/src/content/docs/en/create-task/routing-introduction.mdx
index f9da341..970a75a 100644
--- a/src/content/docs/en/create-task/routing-introduction.mdx
+++ b/src/content/docs/en/create-task/routing-introduction.mdx
@@ -5,26 +5,6 @@ course: angular-20
 slug: "create-task-routing-introduction"
 ---
 
-import { Steps } from '@astrojs/starlight/components';
-import NotificationCard from "../../../../components/ui/NotificationCard";
-
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Understand Angular routing</strong>
-      <p>Learn the fundamental concepts of routing in Angular applications.</p>
-    </li>
-    <li>
-      <strong>Configure routes</strong>
-      <p>Set up and configure routes in your Angular application.</p>
-    </li>
-    <li>
-      <strong>Use router outlet</strong>
-      <p>Learn how to display routed components using router-outlet.</p>
-    </li>
-  </ul>
-</NotificationCard>
-
 ## What is routing?
 
 Routing is the process of determining what content to display based on the browser's URL.
@@ -40,159 +20,3 @@ We need three parts to implement routing:
 - a list of routes to define the content displayed for a given URL
 - a marker to decide where to display the content
 - a link to trigger the navigation
-
-## Router-outlet directive
-
-The **Router** API provides a directive called `router-outlet`. Routed content will be displayed. When the user navigates to a different route, the content of the `router-outlet` is replaced with the content of the new route.
-The `router-outlet` directive's only role is to mark the location in the HTML Template.  At this location, the content corresponding to the URL you defined will be displayed.
-
-A directive is a component without a template. Like a component, it can be used in the HTML Template with its selector (like `<router-outlet>`), but it doesn't have a template.
-It's meant to encapsulate a logic that can be used in the HTML Template.
-
-Think of it as salt on food - when you sprinkle it (apply the directive), it enhances the flavor of the dish (changes the element's behavior), but you don't see the salt as a separate ingredient on your plate. It blends in while making everything work better.
-
-<Steps>
-
-1. Update the `src/app/app.html` file to include the `router-outlet` directive:
-
-   ```html ins={"Add the directive via the router-outlet tag to mark the location of the content configured via URL": 5-6}
-   <div class="navbar bg-base-100 shadow-sm">
-     <a class="btn btn-ghost text-xl">Task Manager</a>
-   </div>
-   <main class="m-12">
-
-     <router-outlet />
-   </main>
-   ```
-
-  2. Then add it to `src/app/app.ts` to the `imports` array of the **@Component** decorator of the app.ts file:
-
-     ```ts del={"Remove TaskList imports as it's not needed anymore": 4-5} del="TaskList" ins="RouterOutlet" ins={"add RouterOutlet import": 2-3}
-      import { Component } from '@angular/core';
-
-     import {RouterOutlet} from '@angular/router';
-
-     import {TaskList} from './task-list/task-list';
-
-     @Component({
-         // ...
-         imports: [TaskList, RouterOutlet],
-         })
-           export class App {
-         }
-     ```
-</Steps>
-
-In the above case, the `router-outlet` is placed between the `<main>` tags. This means that you will continue to display the `<header>` on top of all pages. Only the content inside the main tag will be replaced by the content of the route.
-
-
-## Define routes
-
-To display the desired content based on the URL, you need to add a `path` to each of your `components` in your `routes` array, for example:
-
-```typescript
-{ path: 'add-task', component: TaskForm }
-```
-
-The path is therefore the URL that the user will access. For example, the path `/add-task` means that the user will navigate to the URL `http://localhost:4200/add-task`.
-
-The provided component is the component that will be displayed in the `router-outlet` placeholder when the user accesses this URL.
-
-The route definition resides in the `app.routes.ts` file.
-
-    ```bash ins="app.routes.ts"
-    src
-    └─ app
-        └─ app.routes.ts
-    ```
-
----
-
-##### Instructions
-
-<Steps>
-
-1. Update the `src/app/app.routes.ts` file.
-
-   ```typescript ins={"Import components for each route": 3-5} ins={"Define the routes": 7-11}
-   // app-route.ts
-   import { Routes } from "@angular/router";
-
-   import { TaskList } from "./task-list/task-list";
-   import { TaskForm } from "./task-form/task-form";
-
-
-   export const routes: Routes = [
-     { path: "", component: TaskList },
-     { path: "add-task", component: TaskForm },
-   ];
-   ```
-
-</Steps>
-
-## Add links to navigate between routes
-
-You need to add links to trigger navigation between different routes.
-You could manually modify the URL in the browser, but users expect to have clickable links to navigate between pages.
-
-The HTML `<a>` tag is used to create links and is associated with the **routerLink** directive to use Angular routing. This directive takes the path of the route to navigate to as a value.
-
-<Steps>
-
-1. Import **RouterLink in the `src/app/app.ts` file.
-
-   ```ts ins={"Add Routerlink import":3-4} ins={"Add Routerlink to the component imports":8-9} ins=", RouterLink"
-   // app.ts
-   import { Component } from "@angular/core";
-
-   import { RouterLink, RouterOutlet } from "@angular/router";
-
-   @Component({
-     selector: "app-root",
-
-     imports: [RouterOutlet, RouterLink],
-     // ...
-   })
-   export class App {
-   }
-   ```
-
-2. Define links in the `src/app/app.html` file.
-
-    ```html  ins={"Add links to navigate between routes": 3-7}
-    <div class="navbar bg-base-100 shadow-sm">
-      <a class="btn btn-ghost text-xl">Task Manager</a>
-
-      <ul class="menu menu-horizontal px-1">
-        <li><a routerLink="/">Task List</a></li>
-        <li><a routerLink="/add-task">Add new task</a></li>
-      </ul>
-    </div>
-    <main class="m-12  max-w-screen-md mx-auto">
-      <router-outlet />
-    </main>
-    ```
-
-3. Click on both links to see the content of `TaskList` and `TaskForm` displayed alternately at the location defined by the `router-outlet`.
-
-</Steps>
-
-<NotificationCard state="info" title="Note">
-  The path of the **TaskFormComponent** is defined as `add-task` in the
-  `app.routes.ts` file. However, in the HTML Template, in the
-  **routerLink** directive, it is specified as `/add-task` (with the `/`).
-
-**routerLink** builds the URL relative to the current path. Adding a slash indicates that the URL should be built from the base URL of the application (here `http://localhost:4200`). Without specifying the slash in the **routerLink** directive, you would create nesting and navigate to `/add-task/add-task`.
-
-> `<a routerLink="/add-task">...</a>` => http://localhost:4200/add-task
-
-> `<a routerLink="add-task">...</a>` => http://localhost:4200/add-task/add-task
-
-</NotificationCard>
-
-<NotificationCard state="success" title="What you've learned">
-  In this chapter, you learned how to add routing to your application. You
-  learned how to define routes and navigate between them using the{" "}
-  <strong>routerLink</strong> directive. You also learned how to display the
-  content of the current route using the <code>router-outlet</code> directive.
-</NotificationCard>
diff --git a/src/content/docs/en/delete-task/add-delete-button.mdx b/src/content/docs/en/delete-task/add-delete-button.mdx
index 936954a..e65f04c 100644
--- a/src/content/docs/en/delete-task/add-delete-button.mdx
+++ b/src/content/docs/en/delete-task/add-delete-button.mdx
@@ -8,13 +8,8 @@ slug: "delete-task-add-delete-button"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Add a delete button</strong>
-      <p>Learn how to add a button to remove tasks from the list.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Add a button to remove tasks from the list.
 </NotificationCard>
 
 ## The delete button
diff --git a/src/content/docs/en/delete-task/add-delete-function.mdx b/src/content/docs/en/delete-task/add-delete-function.mdx
index f1b436b..2cb19da 100644
--- a/src/content/docs/en/delete-task/add-delete-function.mdx
+++ b/src/content/docs/en/delete-task/add-delete-function.mdx
@@ -8,13 +8,8 @@ slug: "delete-task-add-delete-function"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Add a delete function</strong>
-      <p>Learn how to add a function to remove tasks from the list.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Add a function to remove tasks from the list.
 </NotificationCard>
 
 ## The deleteTask function
diff --git a/src/content/docs/en/delete-task/add-empty-list.mdx b/src/content/docs/en/delete-task/add-empty-list.mdx
index 08c688b..f55c650 100644
--- a/src/content/docs/en/delete-task/add-empty-list.mdx
+++ b/src/content/docs/en/delete-task/add-empty-list.mdx
@@ -8,13 +8,8 @@ slug: "delete-task-add-empty-list"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Handle an empty list</strong>
-      <p>Learn how to handle an empty task list in your Angular application.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Handle an empty task list in a template.
 </NotificationCard>
 
 You've just learned how to delete a task from the list, now you want to display a message when the list is empty.
diff --git a/src/content/docs/en/getting-started/getting-started.mdx b/src/content/docs/en/getting-started/getting-started.mdx
index 37a55fe..ab34295 100644
--- a/src/content/docs/en/getting-started/getting-started.mdx
+++ b/src/content/docs/en/getting-started/getting-started.mdx
@@ -11,23 +11,8 @@ import headerImg from "../../../../../public/getting-started_header.png";
 import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Generate an Angular application</strong>
-      <p>
-        Learn how to use the Angular CLI to generate an Angular application.
-      </p>
-    </li>
-    <li>
-      <strong>Run the application</strong>
-      <p>Launch the application locally and view the default base page.</p>
-    </li>
-    <li>
-      <strong>Understand hot reloading</strong>
-      <p>Understand how hot reloading works in Angular applications.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Learn how to use the Angular CLI to generate an Angular application.
 </NotificationCard>
 
 ## Create the project
@@ -55,7 +40,7 @@ Angular provides a Command Line Interface (CLI) to generate a new Angular applic
 2. Open a terminal and run the following command to create an Angular application:
 
    ```bash
-   ng new angular-introduction-course --style=css --ssr=false --skip-tests=true --zoneless=true
+   ng new angular-introduction-course --style=tailwind --ssr=false --skip-tests=true
    ```
 
    <NotificationCard state="info" title="Note">
@@ -105,42 +90,41 @@ Hot reloading is a feature that allows you to see the changes you make to your c
 
 1. Locate and open the `app.html` file in the `src/app` directory.
 
-      ```bash ins="app.html"
-      src
-      └─ app
-          └─ app.html
-      ```
+   ```bash ins="app.html"
+   src
+   └─ app
+       └─ app.html
+   ```
 
 2. Locate the placeholder (which is wrapped in HTML comment tags) in the `app.html` file and replace the template content with following:
 
-      ```html ins="app.html"
-      // app.html
-        <h1>Welcome to {{title()}}!</h1>
-      ```
+   ```html ins="app.html"
+   // app.html
+   <h1>Welcome to {{title()}}!</h1>
+   ```
 
 3. In the file `app.ts`, locate the `imports` array and remove the `RouterOutlet` import:
 
-      ```diff lang="ts"
-      // app.ts
-      - import { RouterOutlet } from '@angular/router';
-      ```
-
-      ```ts del="RouterOutlet"
-      // app.ts
-      @Component({
-      // ...
-      imports: [RouterOutlet],
-      })
-      export class App {
-      // ...
-      }
-      ```
+   ```diff lang="ts"
+   // app.ts
+   - import { RouterOutlet } from '@angular/router';
+   ```
+
+   ```ts del="RouterOutlet"
+   // app.ts
+   @Component({
+     // ...
+     imports: [RouterOutlet],
+   })
+   export class App {
+     // ...
+   }
+   ```
 
 4. Return to your browser to see the following page:
 
-      ```
-      Task Manager
-      ```
+   ```
+   Task Manager
+   ```
 
 </Steps>
-
diff --git a/src/content/docs/en/getting-started/learning-process.mdx b/src/content/docs/en/getting-started/learning-process.mdx
index d8ce7d3..5221732 100644
--- a/src/content/docs/en/getting-started/learning-process.mdx
+++ b/src/content/docs/en/getting-started/learning-process.mdx
@@ -15,83 +15,64 @@ The course is feature-driven rather than technology-driven: Angular features wil
 
 It keeps you focus at learning something you can use right away, with a real application.
 
----
-
 ## Chapters
 
 #### Display a list
 
-<span class="text-sm text-gray-400 block pl-4">
+<div class="text-sm text-gray-600 dark:text-gray-400 block ml-4">
   Learn how to build the foundation of your application by creating a task list.
   You'll create a component to display tasks, use Angular control flow to render
   lists dynamically, and apply styling for a clean UI.
-</span>
+</div>
 
 #### Handle forms and navigation
 
-<span class="text-sm text-gray-400 block pl-4">
+<div class="text-sm text-gray-600 dark:text-gray-400 block ml-4">
   Create a form component for adding new tasks. Use the Angular CLI to generate
   components, build and style forms, and collect user input with Angular's form
   handling. Navigation is introduced to enable switching the content on screen.
-</span>
+</div>
 
 #### Use forms to update existing data
 
-<span class="text-sm text-gray-400 block pl-4">
+<div class="text-sm text-gray-600 dark:text-gray-400 block ml-4">
   Adapt a form for editing tasks, pre-fill form fields with existing data,
   handle validation, and use Angular's routing and lifecycle hooks to update
   task information.
-</span>
+</div>
 
 #### Consolidate your knowledge
 
-<span class="text-sm text-gray-400 block pl-4">
+<div class="text-sm text-gray-600 dark:text-gray-400 block ml-4">
   Add delete functionality to your task list. Implement a delete button, connect
   your UI to Angular services, and manage state as users remove tasks.
-</span>
+</div>
 
 #### Create reusable components
 
-<span class="text-sm text-gray-400 block pl-4">
+<div class="text-sm text-gray-600 dark:text-gray-400 block ml-4">
   Create reusable components for your application. Use Angular's component
   architecture to build reusable UI elements, and learn about component
   communication with a parent-child relationship.
-</span>
+</div>
 
 #### Communicate with an API
 
-<span class="text-sm text-gray-400 block pl-4">
+<div class="text-sm text-gray-600 dark:text-gray-400 block ml-4">
   Integrate your Angular app with an external API using <code>HttpClient</code>.
   Retrieve, create, update, and delete tasks from a backend server, and learn
   about observables and the async pipe.
-</span>
-
----
+</div>
 
 ## Lessons
 
 Each chapter is divided into several lessons. Each lesson is a small action to accomplish.
 Each lesson is introduced with a learning objective and a description of the expected outcome.
 
-#### Chapter Key Objectives
-
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Understand the learning process</strong>
-      <p>Learn how to effectively learn Angular through this course.</p>
-    </li>
-    <li>
-      <strong>Follow the step-by-step approach</strong>
-      <p>
-        Understand how to follow the course structure and complete each step.
-      </p>
-    </li>
-    <li>
-      <strong>Practice with hands-on exercises</strong>
-      <p>Learn by doing with practical exercises and real-world examples.</p>
-    </li>
-  </ul>
+#### Chapter Key Objective
+
+<NotificationCard state="objective" title="Chapter Key Objective">
+  Learn how to effectively learn Angular through this course.
 </NotificationCard>
 
 ##### Instructions
diff --git a/src/content/docs/en/getting-started/typescript-introduction.mdx b/src/content/docs/en/getting-started/typescript-introduction.mdx
index b400f1b..f71b70a 100644
--- a/src/content/docs/en/getting-started/typescript-introduction.mdx
+++ b/src/content/docs/en/getting-started/typescript-introduction.mdx
@@ -7,27 +7,8 @@ slug: "typescript-introduction"
 
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Understand TypeScript basics</strong>
-      <p>
-        Learn the fundamental concepts of TypeScript and its relationship with
-        JavaScript.
-      </p>
-    </li>
-    <li>
-      <strong>Master TypeScript types</strong>
-      <p>
-        Learn how to use TypeScript's type system effectively in your Angular
-        applications.
-      </p>
-    </li>
-    <li>
-      <strong>Apply TypeScript in Angular</strong>
-      <p>Understand how TypeScript is used in Angular and its benefits.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Learn to create your first TypeScript model.
 </NotificationCard>
 
 ## What is TypeScript?
@@ -92,6 +73,22 @@ The TypeScript creation format is composed as follows:
 <property>: <type> = <value>;
 ```
 
+For example:
+
+```typescript
+const id: string = "123";
+
+const isStudent: boolean = true;
+
+const car: Car = {
+  make: "Toyota",
+  model: "Corolla",
+  year: 2020,
+};
+
+const choices: string[] = ["apple", "banana", "cherry"];
+```
+
 `[]` is used to define an array, as in `tasks: Task[]`.
 
 </NotificationCard>
diff --git a/src/content/docs/en/reusable-components/component-inputs.mdx b/src/content/docs/en/reusable-components/component-inputs.mdx
index 787116b..f82ae92 100644
--- a/src/content/docs/en/reusable-components/component-inputs.mdx
+++ b/src/content/docs/en/reusable-components/component-inputs.mdx
@@ -8,8 +8,6 @@ slug: "reusable-components-component-input"
 import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-# Component inputs
-
 The banner displays a message but not only it's a placeholder unrelated to the application; we want the message to be different based on where it's used:
 
 - in the `TaskList` component, we want to display a message proposing to delete all existing tasks
@@ -32,7 +30,7 @@ We'll firstly define these properties in the `AlertBanner` class, then pass the
 
 1. Update the `AlertBanner` class:
 
-   ```typescript ins="input "
+   ```typescript ins="input"
    // alert-banner.ts
    import { Component, input } from "@angular/core";
 
@@ -43,7 +41,7 @@ We'll firstly define these properties in the `AlertBanner` class, then pass the
    <NotificationCard state="info" title="Note">
      The input is marked as required: it'll throw an error if the parent
      component does not provide a value for it. In some situations, inputs are
-     just optional.
+     just optional, define them with `input<string>()` instead of `input.required<string>()`.
    </NotificationCard>
 
 2. Update the template of `alert-banner.html` file:
diff --git a/src/content/docs/en/reusable-components/component-outputs.mdx b/src/content/docs/en/reusable-components/component-outputs.mdx
index 250d747..f238d26 100644
--- a/src/content/docs/en/reusable-components/component-outputs.mdx
+++ b/src/content/docs/en/reusable-components/component-outputs.mdx
@@ -8,8 +8,6 @@ slug: "reusable-components-component-outputs"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-# Component output
-
 One key feature of reusable components is  to notify the parent component that an action has been performed.
 In the `AlertBanner` component, we want to add a button, triggering a different action based on its usage:
 
@@ -36,8 +34,8 @@ To do so, we'll use the `output` feature of Angular.
 
     ```html
     <button class="btn"
-      [class.btn-info]="type() ? type() === 'info' : false"
-      [class.btn-error]="type() ? type() === 'error' : false"
+      [class.btn-info]="type() === 'info'"
+      [class.btn-error]="type() === 'error'"
       (click)="onSubmit.emit()">Proceed</button>
     ```
 
diff --git a/src/content/docs/en/reusable-components/create-reusable-component.mdx b/src/content/docs/en/reusable-components/create-reusable-component.mdx
index 29a97ee..2d2d034 100644
--- a/src/content/docs/en/reusable-components/create-reusable-component.mdx
+++ b/src/content/docs/en/reusable-components/create-reusable-component.mdx
@@ -8,8 +8,6 @@ slug: "reusable-components-create-reusable-component"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-# Create a reusable component
-
 There is nothing specific to reusable components, you can create them like any other component.
 
 But as their usage is meant to be *shared* across multiple components, that's a good opportunity to organize them in a dedicated folder.
diff --git a/src/content/docs/en/reusable-components/delete-all-tasks.mdx b/src/content/docs/en/reusable-components/delete-all-tasks.mdx
index 00fc1e9..53c73c6 100644
--- a/src/content/docs/en/reusable-components/delete-all-tasks.mdx
+++ b/src/content/docs/en/reusable-components/delete-all-tasks.mdx
@@ -8,8 +8,6 @@ slug: "reusable-components-delete-all-tasks"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-# Delete all tasks
-
 ##### Instructions
 
 <Steps>
diff --git a/src/content/docs/en/reusable-components/introduction.mdx b/src/content/docs/en/reusable-components/introduction.mdx
index 17ff038..54c4fa2 100644
--- a/src/content/docs/en/reusable-components/introduction.mdx
+++ b/src/content/docs/en/reusable-components/introduction.mdx
@@ -8,8 +8,6 @@ slug: "reusable-components-introduction"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-# Introduction
-
 In the [Create first component](../task-listing/create-first-component.mdx) chapter, we temporary displayed the task list by using its selector directly in the `App`component:
 
 ```html
diff --git a/src/content/docs/en/reusable-components/prefill-form.mdx b/src/content/docs/en/reusable-components/prefill-form.mdx
deleted file mode 100644
index d180608..0000000
--- a/src/content/docs/en/reusable-components/prefill-form.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Prefill form
-description: Prefill form
-course: angular-20
-slug: "reusable-components-prefill-form"
----
-
-import { Steps } from '@astrojs/starlight/components';
-import NotificationCard from "../../../../components/ui/NotificationCard";
-
-# Prefill form
-
-<NotificationCard state="info" title="Note">
-
-  `setValue()` sets all form control values at once and requires you to provide values for every form control - if you miss any, it throws an error.
-
-  `patchValue()` updates some or all form controls and ignores missing properties - it only updates the controls that match.
-
-  Use `setValue()` to completely replace all form values, use patchValue() for partial updates.
-
-</NotificationCard>
-
-##### Instructions
-
-<Steps>
-
-1. Update the `TaskForm` class:
-
-    ```typescript ins={"Add the preFillForm function": 3-9}
-    // task.form.ts
-
-
-    preFillForm() {
-        this.form.setValue({
-          title: 'Generated Task',
-          description: 'Generated Description',
-        });
-    }
-    ```
-
-</Steps>
-
-<NotificationCard state="warning" title="Note">
-
-  With `setValue()` if you miss any, it throws an error. Use it when you want to completely replace all form values.
-
-</NotificationCard>
diff --git a/src/content/docs/en/reusable-components/update-reactive-form.mdx b/src/content/docs/en/reusable-components/update-reactive-form.mdx
new file mode 100644
index 0000000..ce8114f
--- /dev/null
+++ b/src/content/docs/en/reusable-components/update-reactive-form.mdx
@@ -0,0 +1,58 @@
+---
+title: Update a Reactive Form
+description: Learn how to update a reactive form
+course: angular-20
+slug: "reusable-components-update-reactive-form"
+---
+
+import { Steps } from "@astrojs/starlight/components";
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+The point of this step is to introduce you with the solutions to update the value of a reactive form.
+A reactive form is a set of classes you use, in our situation, initialized as so:
+
+```typescript
+form = new FormGroup({
+  title: new FormControl(""),
+  description: new FormControl(""),
+});
+```
+
+To update it, you can't juste set it a value directly, like `form = {title: "New Title", description: "New Description"}` because it's not a regular object.
+
+The Reactive Forms API provides you with two methods to update the value of a reactive form:
+
+- `setValue()` sets all form control values at once and requires you to provide values for every form control - if you miss any, it throws an error.
+
+- `patchValue()` updates some or all form controls and ignores missing properties - it only updates the controls that match.
+
+<NotificationCard state="info" title="Note">
+  Use `setValue()` to completely replace all form values, use `patchValue()` for
+  partial updates.
+</NotificationCard>
+
+##### Instructions
+
+<Steps>
+
+1. Update the `TaskForm` class:
+
+   ```typescript ins={"Add the preFillForm function": 3-9}
+   // task.form.ts
+
+
+   preFillForm() {
+       this.form.setValue({
+         title: 'Generated Task',
+         description: 'Generated Description',
+       });
+   }
+   ```
+
+</Steps>
+
+<NotificationCard state="warning" title="Note">
+
+With `setValue()` if you miss any, it throws an error. Use it when you want to completely replace all form values.
+
+</NotificationCard>
diff --git a/src/content/docs/en/task-listing/add-ui-library.mdx b/src/content/docs/en/task-listing/add-ui-library.mdx
index 9865d0e..ad2c76c 100644
--- a/src/content/docs/en/task-listing/add-ui-library.mdx
+++ b/src/content/docs/en/task-listing/add-ui-library.mdx
@@ -7,75 +7,59 @@ slug: "task-listing-add-ui-library"
 
 import { Image } from "astro:assets";
 import bootstrapImg from "../../../../../public/bootstrap_added.png";
-import { Steps } from '@astrojs/starlight/components';
+import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Install dependencies</strong>
-      <p>Set up the UI library dependencies and files</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Set up the UI library dependencies and files
 </NotificationCard>
 
+<br />
 <br />
 
-This lesson is not specific to Angular, but adding an UI library will enhance the application's user interface rather than relying on default browser styles.
+This lesson is not specific to Angular, but adding an UI library will enhance the application's user interface rather than relying on default browser styles. It'll make your experience way better at checking the changes in your browser!
 
 Do not forget to always stop the project server before installing new dependencies. You can do this by pressing `CTRL+C` in the terminal where the server is running. The server and package installation can run independently. However, after installing certain dependencies, you might need to restart the server to apply the changes.
 
-// TODO: add before/after illustration of the final application
-
 ## What is a User Interface (UI) Library?
 
 A user interface (UI) library is a collection of style rules to create a consistent UI throughout the application and saves development time.
-For this course, you will add <a href="https://daisyui.com/" target="_blank">DaisyUI</a> and <a href="https://tailwindcss.com/" target="_blank">TailwindCSS</a> to your project.
+For this course, you will add <a href="https://daisyui.com/" target="_blank">DaisyUI</a> to your project.
 
-##### Instructions
+### Instructions
 
 <Steps>
 
-1. Run the following command in your terminal to install DaisyUI and TailwindCSS:
+1. Run the following command in your terminal to install DaisyUI:
 
    ```bash
-   npm install tailwindcss @tailwindcss/postcss postcss daisyui@latest --force
-   ```
-
-2. Create a PostCSS plugins file named `.postcssrc.json` at the root of your project (same level than package.json) and populate it with:
-
-   ```json
-   // .postcssrc.json
-   {
-     "plugins": {
-       "@tailwindcss/postcss": {}
-     }
-   }
+   npm install daisyui@latest
    ```
 
-3. Add these styles into the `src/styles.css` file:
+2. Add the plugin to the `src/styles.css` file:
 
-   ```css
+   ```css ins='@plugin "daisyui";'
    // styles.css
    @import "tailwindcss";
    @plugin "daisyui";
    ```
 
-4. Stop the server if it's still running (keyboard shortcut `CTRL+C`) and restart it with the following command:
+3. Stop the server if it's still running (keyboard shortcut `CTRL+C`) and restart it with the following command:
 
    ```bash
    ng serve
    ```
 
-5. Open the `src/app/app.html` file and replace its content once again to add a DaisyUI header:
+4. Open the `src/app/app.html` file and replace its content once again to add a DaisyUI header:
 
    ```html
+   // app.html
    <div class="navbar bg-base-100 shadow-sm">
      <a class="btn btn-ghost text-xl">Task Manager</a>
    </div>
    ```
 
-6. Check out the _small_ changes in your browser.
+5. Check out the _small_ changes in your browser.
 
    <Image
      class="shadow-xl rounded-xl"
diff --git a/src/content/docs/en/task-listing/display-list.mdx b/src/content/docs/en/task-listing/control-flow.mdx
similarity index 85%
rename from src/content/docs/en/task-listing/display-list.mdx
rename to src/content/docs/en/task-listing/control-flow.mdx
index a12492b..918c148 100644
--- a/src/content/docs/en/task-listing/display-list.mdx
+++ b/src/content/docs/en/task-listing/control-flow.mdx
@@ -1,8 +1,8 @@
 ---
-title: Display List
-description: Learn how to display a list of tasks in Angular
+title: Control Flow
+description: Learn how to use the Control Flow feature in Angular
 course: angular-20
-slug: "task-listing-display-list"
+slug: "task-listing-control-flow"
 ---
 
 import { Image } from "astro:assets";
@@ -10,21 +10,8 @@ import staticImg from "../../../../../public/display-list_static.png";
 import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Create task list component</strong>
-      <p>Build a component to display the list of tasks.</p>
-    </li>
-    <li>
-      <strong>Use Angular directives</strong>
-      <p>Master ngFor and other directives for list rendering.</p>
-    </li>
-    <li>
-      <strong>Style the list</strong>
-      <p>Apply styling to make the task list visually appealing.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Ierate over a list of items and display them in the HTML template with the @for directive.
 </NotificationCard>
 
 ## HTML Structure
@@ -87,8 +74,10 @@ It's made of 2 parts:
 - the `@for` keyword with a definition of the list to iterate over and some options
 - a block of code to execute for each item in the list
 
-```html ins="// Loop Definition" ins="// Loop Body"
-// Loop Definition @for (task of tasks; track task.id) { // Loop Body
+```html ins="<!-- Loop Definition -->" ins="<!-- Loop Body -->"
+<!-- Loop Definition -->
+@for (task of tasks; track task.id) {
+<!-- Loop Body -->
 <tr>
   <td>{{ task.title }}</td>
   <td>{{ task.createdAt }}</td>
@@ -131,7 +120,7 @@ Like in Javascript, we use `{}` to define the body of the loop.
 @for (task of tasks; track task.id) {
 <tr>
   <td>Follow the course</td>
-  <td>05/24/2024</td>
+  <td>{{ task.createdAt }}</td>
   <td></td>
 </tr>
 }
diff --git a/src/content/docs/en/task-listing/create-first-component.mdx b/src/content/docs/en/task-listing/create-first-component.mdx
deleted file mode 100644
index 3319efb..0000000
--- a/src/content/docs/en/task-listing/create-first-component.mdx
+++ /dev/null
@@ -1,260 +0,0 @@
----
-title: Create your first component
-description: Create a task list component in Angular
-course: angular-20
-slug: "task-listing-create-first-component"
----
-
-import { Image } from "astro:assets";
-import creationImg from "../../../../../public/first-component_creation.png";
-import { Steps } from "@astrojs/starlight/components";
-import NotificationCard from "../../../../components/ui/NotificationCard";
-
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Generate a component</strong>
-      <p>Learn how to create a new component using the Angular CLI.</p>
-    </li>
-    <li>
-      <strong>Display the component</strong>
-      <p>
-        Learn how to display the component's HTML template in the application.
-      </p>
-    </li>
-  </ul>
-</NotificationCard>
-
-## Angular CLI
-
-You've already used the CLI to run our application locally with the `ng serve` command in the <a href="/legacy-course/getting-started/#running-the-application" target="_blank">Getting Started</a> section.
-
-Now use it to create a new component as the Angular CLI also provide a dedicated command to generate a new component, `ng generate component`.
-
-##### Instructions
-
-<Steps>
-
-1. Run the following command in a terminal to generate a new component called `task-list`
-
-   ```bash
-   ng generate component task-list
-   ```
-
-   or the short version:
-
-   ```bash
-   ng g c task-list
-   ```
-
-2. Look for the generated folder called `task-list` in the `src/app` directory.
-
-   ```diff
-   src
-   └─ app
-   +   └─ task-list
-   +       └─ task-list.ts
-   +       └─ task-list.html
-   +       └─ task-list.css
-   ```
-
-</Steps>
-
----
-
-## Component Metadata
-
-When opening the `task-list.ts` file, you can see the following code:
-
-```typescript
-// task-list.ts
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "app-task-list",
-  imports: [],
-  templateUrl: "./task-list.html",
-  styleUrls: ["./task-list.css"],
-})
-export class TaskList {}
-```
-
----
-
-The **@Component** decorator defines the component's configuration metadata.
-
-<NotificationCard state="info" title="Note">
-  A decorator is a way to do meta-programming. They can modify their target
-  (classes, methods, ...), call other methods when the target is called, or add
-  metadata intended for a framework. This last point corresponds to how we use
-  them in Angular.
-</NotificationCard>
-
----
-
-The **selector** property defines the component's HTML tag name.
-By using this selector in an HTML Template (view), Angular creates and displays an instance of the component.
-
-```typescript ins="selector: 'app-task-list',"
-// task-list.ts
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "app-task-list",
-  imports: [],
-  templateUrl: "./task-list.html",
-  styleUrls: ["./task-list.css"],
-})
-export class TaskList {}
-```
-
----
-
-The **templateUrl** property defines the location of the HTML Template (its view) for the component.
-This is the view that will be displayed when the CSS **selector** is used in another HTML Template.
-
-```typescript ins="templateUrl: './task-list.html',"
-// task-list.ts
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "app-task-list",
-  imports: [],
-  templateUrl: "./task-list.html",
-  styleUrls: ["./task-list.css"],
-})
-export class TaskList {}
-```
-
----
-
-The **styleUrls** property defines the locations of the component's CSS files.
-These styles will be applied to the component's template.
-
-```typescript ins="styleUrls: ['./task-list.css']"
-// task-list.ts
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "app-task-list",
-  imports: [],
-  templateUrl: "./task-list.html",
-  styleUrls: ["./task-list.css"],
-})
-export class TaskList {}
-```
-
-<NotificationCard title="Global styles" state="info">
-  Global styles can be defined in the `src/styles.css` file.
-</NotificationCard>
-
----
-
-## Display the Component
-
-So far, the application only displays the HTML content of the **App** component in the browser.
-You've generated the new component but it's still unused as Angular does no know where to use it: you need to use its selector `app-task-list` to display its HTML template.
-
-As its selector is not a valid native HTML tag like `<button>`, we need to explain Angular its origin, otherwise it will display an error message:
-
-```
-✘ [ERROR] NG8001: 'app-task-list' is not a known element:
-1. If 'app-task-list' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
-2. If 'app-task-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]
-
-    src/app/app.html:5:0:
-      5 │ <app-task-list/>
-        ╵ ~~~~~~~~~~~~~~~~
-
-  Error occurs in the template of component App.
-
-    src/app/app.ts:7:15:
-      7 │   templateUrl: './app.html',
-        ╵                ~~~~~~~~~~~~
-```
-
-To do this, you need to import the component in the `app.ts` file to get its reference:
-
-```diff lang="ts"
-// app.ts
-+ import { TaskList } from './task-list/task-list';
-```
-
-Then add it to the `imports` array of the **@Component** decorator for the component to understand it's part of its context:
-
-```ts ins="TaskList"
-// app.ts
-@Component({
-  // ...
-  imports: [TaskList],
-})
-export class App {}
-```
-
----
-
-##### Instructions
-
-<Steps>
-
-1. Update the `template`property of the `app.ts` file as follows:
-
-   ```ts ins={"import the TaskList component": 5-6} ins={"Add the TaskList component to the App component imports": 10-11}
-   // app.ts
-   import { Component } from "@angular/core";
-   import { RouterOutlet } from "@angular/router";
-
-   import { TaskList } from "./task-list/task-list";
-
-   @Component({
-     selector: "app-root",
-
-     imports: [RouterOutlet, TaskList],
-     templateUrl: "./app.html",
-     stylesUrl: ["./app.css"],
-   })
-   export class App {
-     protected title = "angular-introduction-course";
-   }
-   ```
-
-2. Update the `app.html` file to display the `task-list` component:
-
-   ```html ins={"Add the component selector, and the <main> tag for proper HTML semantics and CSS management": 4-7}
-   <div class="navbar bg-base-100 shadow-sm">
-     <a class="btn btn-ghost text-xl">Task Manager</a>
-   </div>
-
-   <main class="m-12 max-w-screen-md mx-auto">
-     <app-task-list />
-   </main>
-   ```
-
-3. Check the changes in your browser.
-
-   <Image
-     class="shadow-xl rounded-xl"
-     src={creationImg}
-     alt="A bird sitting on a nest of eggs."
-   />
-
-</Steps>
-
-<NotificationCard state="info" title="Note">
-  `task-list works!` appears in the browser. This is the default content
-  generated by the Angular CLI in the component's HTML Template. You will update
-  it in the upcoming lessons.
-</NotificationCard>
-
-<NotificationCard state="success" title="What you've learned">
-  In this chapter, you learned how to create a new component using the Angular
-  CLI and use it in your application. You also remembered that the component's{" "}
-  <strong>view</strong> is its HTML Template and the component's{" "}
-  <strong>model</strong> is its TypeScript file.
-</NotificationCard>
-
-<br />
-
-<a href="https://angular.dev/cli/generate/component" target="_blank">
-  Angular CLI Documentation: generating a component
-</a>
diff --git a/src/content/docs/en/task-listing/display-component.mdx b/src/content/docs/en/task-listing/display-component.mdx
new file mode 100644
index 0000000..157d584
--- /dev/null
+++ b/src/content/docs/en/task-listing/display-component.mdx
@@ -0,0 +1,123 @@
+---
+title: Display the Component
+description: Learn how to display the component's HTML template in the application
+course: angular-20
+slug: "task-listing-display-component"
+---
+
+import { Image } from "astro:assets";
+import creationImg from "../../../../../public/first-component_creation.png";
+import { Steps } from "@astrojs/starlight/components";
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+<NotificationCard state="objective" title="Chapter Objective">
+  Learn how to display the component's HTML template in the application.
+</NotificationCard>
+
+
+So far, the application only displays the HTML content of the **App** component in the browser.
+You've generated the new component but it's still unused as Angular does no know where to use it: you need to use its selector `app-task-list` to display its HTML template.
+
+As its selector is not a valid native HTML tag like `<button>`, we need to explain Angular its origin, otherwise it will display an error message:
+
+```
+✘ [ERROR] NG8001: 'app-task-list' is not a known element:
+1. If 'app-task-list' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
+2. If 'app-task-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]
+
+    src/app/app.html:5:0:
+      5 │ <app-task-list/>
+        ╵ ~~~~~~~~~~~~~~~~
+
+  Error occurs in the template of component App.
+
+    src/app/app.ts:7:15:
+      7 │   templateUrl: './app.html',
+        ╵                ~~~~~~~~~~~~
+```
+
+To do this, you need to import the component in the `app.ts` file to get its reference:
+
+```diff lang="ts"
+// app.ts
++ import { TaskList } from './task-list/task-list';
+```
+
+Then add it to the `imports` array of the **@Component** decorator for the component to understand it's part of its context:
+
+```ts ins="TaskList"
+// app.ts
+@Component({
+  // ...
+  imports: [TaskList],
+})
+export class App {}
+```
+
+---
+
+##### Instructions
+
+<Steps>
+
+1. Update the `template`property of the `app.ts` file as follows:
+
+   ```ts ins={"import the TaskList component": 4-5} ins={"Add the TaskList component to the App component imports": 9-10}
+   // app.ts
+   import { Component } from "@angular/core";
+   import { RouterOutlet } from "@angular/router";
+
+   import { TaskList } from "./task-list/task-list";
+
+   @Component({
+     selector: "app-root",
+
+     imports: [RouterOutlet, TaskList],
+     templateUrl: "./app.html",
+     stylesUrl: ["./app.css"],
+   })
+   export class App {
+     protected title = "angular-introduction-course";
+   }
+   ```
+
+2. Update the `app.html` file to display the `task-list` component:
+
+   ```html ins={"Add the component selector, and the <main> tag (semantic/styles)": 4-7}
+   <div class="navbar bg-base-100 shadow-sm">
+     <a class="btn btn-ghost text-xl">Task Manager</a>
+   </div>
+
+   <main class="m-12 max-w-screen-md mx-auto">
+     <app-task-list />
+   </main>
+   ```
+
+3. Check the changes in your browser.
+
+   <Image
+     class="shadow-xl rounded-xl"
+     src={creationImg}
+     alt="A bird sitting on a nest of eggs."
+   />
+
+</Steps>
+
+<NotificationCard state="info" title="Note">
+  `task-list works!` appears in the browser. This is the default content
+  generated by the Angular CLI in the component's HTML Template. You will update
+  it in the upcoming lessons.
+</NotificationCard>
+
+<NotificationCard state="success" title="What you've learned">
+  In this chapter, you learned how to create a new component using the Angular
+  CLI and use it in your application. You also remembered that the component's{" "}
+  <strong>view</strong> is its HTML Template and the component's{" "}
+  <strong>model</strong> is its TypeScript file.
+</NotificationCard>
+
+<br />
+
+<a href="https://angular.dev/cli/generate/component" target="_blank">
+  Angular CLI Documentation: generating a component
+</a>
diff --git a/src/content/docs/en/task-listing/generate-component.mdx b/src/content/docs/en/task-listing/generate-component.mdx
new file mode 100644
index 0000000..97ebf9f
--- /dev/null
+++ b/src/content/docs/en/task-listing/generate-component.mdx
@@ -0,0 +1,156 @@
+---
+title: Generate an Angular Component
+description: Learn how to generate a new component using the Angular CLI
+course: angular-20
+slug: "task-listing-generate-component"
+---
+
+import { Image } from "astro:assets";
+import creationImg from "../../../../../public/first-component_creation.png";
+import { Steps } from "@astrojs/starlight/components";
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+<NotificationCard state="objective" title="Chapter Objective">
+  Learn how to create a new component using the Angular CLI.
+</NotificationCard>
+
+## Angular CLI
+
+You've already used the CLI to run our application locally with the `ng serve` command in the <a href="/legacy-course/getting-started/#running-the-application" target="_blank">Getting Started</a> section.
+
+Now use it to create a new component as the Angular CLI also provide a dedicated command to generate a new component, `ng generate component`.
+
+### Instructions
+
+<Steps>
+
+1. Run the following command in a terminal to generate a new component called `task-list`
+
+   ```bash
+   ng generate component task-list
+   ```
+
+   or the short version:
+
+   ```bash
+   ng g c task-list
+   ```
+
+2. Look for the generated folder called `task-list` in the `src/app` directory.
+
+   ```diff
+   src
+   └─ app
+   +   └─ task-list
+   +       └─ task-list.ts
+   +       └─ task-list.html
+   +       └─ task-list.css
+   ```
+
+</Steps>
+
+<NotificationCard title="Note" state="info">
+  By default, the Angular CLI will create a folder for the component, so you do
+  not have to create it manually.
+</NotificationCard>
+
+---
+
+## Component Metadata
+
+When opening the `task-list.ts` file, you can see the following code:
+
+```typescript
+// task-list.ts
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-task-list",
+  imports: [],
+  templateUrl: "./task-list.html",
+  styleUrls: ["./task-list.css"],
+})
+export class TaskList {}
+```
+
+---
+
+The **@Component** decorator defines the component's configuration metadata.
+
+<NotificationCard state="info" title="Note">
+  A decorator is a way to do meta-programming. They can modify their target
+  (classes, methods, ...), call other methods when the target is called, or add
+  metadata intended for a framework. This last point corresponds to how we use
+  them in Angular.
+</NotificationCard>
+
+---
+
+The **selector** property defines the component's HTML tag name.
+By using this selector in an HTML Template (view), Angular creates and displays an instance of the component.
+
+```typescript ins='selector: "app-task-list",'
+// task-list.ts
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-task-list",
+  imports: [],
+  templateUrl: "./task-list.html",
+  styleUrls: ["./task-list.css"],
+})
+export class TaskList {}
+```
+
+---
+
+The **templateUrl** property defines the location of the HTML Template (its view) for the component.
+This is the view that will be displayed when the CSS **selector** is used in another HTML Template.
+
+```typescript ins='styleUrls: ["./task-list.css"],'
+// task-list.ts
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-task-list",
+  imports: [],
+  templateUrl: "./task-list.html",
+  styleUrls: ["./task-list.css"],
+})
+export class TaskList {}
+```
+
+---
+
+The **styleUrls** property defines the locations of the component's CSS files.
+These styles will be applied to the component's template. By default styles are scoped to only affect your componet: styling all button tags for example won't affect other components.
+
+```typescript ins='styleUrls: ["./task-list.css"],'
+// task-list.ts
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-task-list",
+  imports: [],
+  templateUrl: "./task-list.html",
+  styleUrls: ["./task-list.css"],
+})
+export class TaskList {}
+```
+
+<NotificationCard title="Note" state="info">
+  Global styles can be defined in the `src/styles.css` file.
+</NotificationCard>
+
+<NotificationCard state="success" title="What you've learned">
+  In this chapter, you learned how to create a new component using the Angular
+  CLI. You also remembered that the component's <strong>view</strong> is its
+  HTML Template and the component's <strong>model</strong> is its TypeScript
+  file.
+</NotificationCard>
+
+<br />
+
+<a href="https://angular.dev/cli/generate/component" target="_blank">
+  Angular CLI Documentation: generating a component
+</a>
diff --git a/src/content/docs/en/task-listing/interpolation.mdx b/src/content/docs/en/task-listing/interpolation.mdx
index 4e10720..b0316fe 100644
--- a/src/content/docs/en/task-listing/interpolation.mdx
+++ b/src/content/docs/en/task-listing/interpolation.mdx
@@ -5,20 +5,11 @@ course: angular-20
 slug: "task-listing-interpolation"
 ---
 
-import { Steps } from '@astrojs/starlight/components';
+import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Understand interpolation</strong>
-      <p>Learn how to display component data in templates.</p>
-    </li>
-    <li>
-      <strong>Use template expressions</strong>
-      <p>Master the syntax for binding data in templates.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Learn how to display component data in templates.
 </NotificationCard>
 
 <br />
@@ -71,7 +62,7 @@ So using `{{ task.title }}` will display the title of the current task and `{{ t
        </tr>
      </thead>
      <tbody>
-       @for (task of tasks; track task.id) {
+       @for (task of tasks(); track task.id) {
        <tr>
          <td>{{ task.title }}</td>
          <td>{{ task.createdAt }}</td>
@@ -96,9 +87,6 @@ The interpolation expression can take any property defined in the template, such
 
 <br />
 
-- <a
-    href="https://angular.dev/guide/templates/interpolation"
-    target="_blank"
-  >
+- <a href="https://angular.dev/guide/templates/interpolation" target="_blank">
     Official Angular Documentation: interpolation
   </a>
diff --git a/src/content/docs/en/task-listing/pipes.mdx b/src/content/docs/en/task-listing/pipes.mdx
index 694d45a..9e93a58 100644
--- a/src/content/docs/en/task-listing/pipes.mdx
+++ b/src/content/docs/en/task-listing/pipes.mdx
@@ -8,13 +8,8 @@ slug: "task-listing-pipes"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Use pipes</strong>
-      <p>Learn how to transform data in templates with Angular pipes.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Learn how to transform data in templates with Angular pipes.
 </NotificationCard>
 
 ## Angular Pipes
diff --git a/src/content/docs/en/task-listing/signals-introduction.mdx b/src/content/docs/en/task-listing/signals-introduction.mdx
new file mode 100644
index 0000000..219cf0d
--- /dev/null
+++ b/src/content/docs/en/task-listing/signals-introduction.mdx
@@ -0,0 +1,91 @@
+---
+title: Introduction to Signals
+description: Learn how to use Signals to make your application reactive.
+course: angular-20
+slug: "task-listing-signals-introduction"
+---
+
+import { Steps } from "@astrojs/starlight/components";
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+<NotificationCard state="objective" title="Chapter Objective">
+  Learn how to use Signals to make your application reactive.
+</NotificationCard>
+
+### Signals
+
+Angular now use a new reactive API called **Signals**. It helps updating your application whenever a change occurs.
+
+To make a property reactive with Signals, use the `signal` function and pass it the task list as a parameter.
+Its type change too: as we want to be able to update the task list, we need to use the `WritableSignal` type.
+
+```typescript ins="WritableSignal<Task[]>" ins="signal(" ins="]);"
+tasks: WritableSignal<Task[]> = signal([
+  {
+    title: "Task 1",
+    description: "Description of task 1",
+    createdAt: new Date(),
+  },
+  {
+    title: "Task 2",
+    description: "Description of task 2",
+    createdAt: new Date(),
+  },
+]);
+```
+
+##### Instructions
+
+<Steps>
+
+1. Update the `src/app/task-list.ts` file:
+
+   ```typescript ins={"Import signal APIs": 1} ins=", signal, WritableSignal" ins={"Import the task interface": 6-7} ins={"Import the uuid package": 9-10} ins={"Add the tasks variable": 18-32}
+   // task-list.ts
+
+   // Import the signal API
+   import { Component, signal, WritableSignal } from "@angular/core";
+
+   import { Task } from "../models/task.model";
+
+   import { v4 as uuid } from "uuid";
+
+   @Component({
+     selector: "app-task-list",
+     imports: [],
+     templateUrl: "./task-list.html",
+     styleUrls: ["./task-list.css"],
+   })
+   export class TaskList {
+     tasks: WritableSignal<Task[]> = signal([
+       {
+         id: uuid(),
+         title: "Task 1",
+         description: "Description of task 1",
+         createdAt: new Date(),
+       },
+       {
+         id: uuid(),
+         title: "Task 2",
+         description: "Description of task 2",
+         createdAt: new Date(),
+       },
+     ]);
+   }
+   ```
+
+</Steps>
+
+## Why use Signals?
+
+Signals are meant to be used for reactivity purposes. If this variable will be static for the first part of the tutorial, it'll accept changes later on and we already want it to be reactive.
+
+Except if you use some old project, your application should use Angular 21 or higher.
+This version introduces what we call **zoneless change detection**. The _change detection_ is the solution to detect changes in your application to update your templates accordingly.
+With zoneless change detection, the change detection is triggered automatically when a signal is updated, while it's not for other variables.
+
+<NotificationCard state="success" title="What you've learned">
+  You have learned how to declare your first signal variable in Angular using the **Signals** API. 
+  This approach makes your variables reactive, allowing automatic updates in the UI when their content changes.
+  You'll use signals throughout the tutorial to manage and update your task list dynamically.
+</NotificationCard>
diff --git a/src/content/docs/en/task-listing/task-interface.mdx b/src/content/docs/en/task-listing/typescript-interface.mdx
similarity index 59%
rename from src/content/docs/en/task-listing/task-interface.mdx
rename to src/content/docs/en/task-listing/typescript-interface.mdx
index 25c7d1f..d225db4 100644
--- a/src/content/docs/en/task-listing/task-interface.mdx
+++ b/src/content/docs/en/task-listing/typescript-interface.mdx
@@ -5,16 +5,11 @@ course: angular-20
 slug: "task-listing-task-interface"
 ---
 
-import { Steps } from '@astrojs/starlight/components';
+import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Define a Task interface</strong>
-      <p>Learn how to define a Task interface in Angular.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Learn how to define a Task interface in Angular.
 </NotificationCard>
 
 ## Creating Interfaces
@@ -39,21 +34,20 @@ Each task has 4 properties:
 
 1. Create a new folder called **models** in the `src/app` folder to store all TypeScript interfaces for the application.
 
-    ```diff
-    src
-    └─ app
-    +    └─ models
-    ```
-
+   ```diff
+   src
+   └─ app
+   +    └─ models
+   ```
 
 1. Create a new file called `task.model.ts` in this new folder.
 
-    ```diff
-    src
-    └─ app
-        └─ models
-    +         └─ task.model.ts
-    ```
+   ```diff
+   src
+   └─ app
+       └─ models
+   +         └─ task.model.ts
+   ```
 
 1. Add the following code to the file:
 
@@ -80,9 +74,9 @@ For this, you will use the **uuid** library. This library generates unique ident
 
 1. Install the **uuid** library by running the following command in the terminal:
 
-    ```bash
-    npm install uuid && npm i --save-dev @types/uuid
-    ```
+   ```bash
+   npm install uuid && npm i --save-dev @types/uuid
+   ```
 
 </Steps>
 
@@ -125,72 +119,10 @@ tasks: Task[] = [
 ];
 ```
 
-### Signals
-
-Angular now use a new reactive API called **Signals**. It helps updating your application whenever a change occurs.
-
-To make a property reactive with Signals, use the `signal` function and pass it the task list as a parameter.
-Its type change too: as we want to be able to update the task list, we need to use the `WritableSignal` type.
-
-```typescript ins="WritableSignal<Task[]>" ins="signal(" ins="]);"
-tasks: WritableSignal<Task[]> = signal([
-  {
-    title: "Task 1",
-    description: "Description of task 1",
-    createdAt: new Date(),
-  },
-  {
-    title: "Task 2",
-    description: "Description of task 2",
-    createdAt: new Date(),
-  },
-]);
-```
-
-##### Instructions
-
-<Steps>
-
-1. Update the `src/app/task-list.ts` file:
-
-    ```typescript ins={"Import signal APIs": 1} ins=", signal, WritableSignal" ins={"Import the task interface": 6-7} ins={"Import the uuid package": 9-10} ins={"Add the tasks variable": 18-32}
-    // task-list.ts
-
-    // Import the signal API
-    import { Component, signal, WritableSignal } from "@angular/core";
-
-
-    import { Task } from "../models/task.model";
-
-
-    import { v4 as uuid } from "uuid";
-
-    @Component({
-      selector: "app-task-list",
-      imports: [],
-      templateUrl: "./task-list.html",
-      styleUrls: ["./task-list.css"],
-    })
-    export class TaskList {
-
-      tasks: WritableSignal<Task[]> = signal([
-        {
-          id: uuid(),
-          title: "Task 1",
-          description: "Description of task 1",
-          createdAt: new Date(),
-        },
-        {
-          id: uuid(),
-          title: "Task 2",
-          description: "Description of task 2",
-          createdAt: new Date(),
-        },
-      ]);
-    }
-    ```
-
-</Steps>
+<NotificationCard state="warning" title="Warning">
+  The variable won't be added it to your code, as we'll firstly introduce a new
+  concept in the next step.
+</NotificationCard>
 
 <NotificationCard state="success" title="What you've learned">
   You have learned how to create your first TypeScript interface. This will help
diff --git a/src/content/docs/en/update-task/update-task-route.mdx b/src/content/docs/en/update-task/add-new-route.mdx
similarity index 86%
rename from src/content/docs/en/update-task/update-task-route.mdx
rename to src/content/docs/en/update-task/add-new-route.mdx
index 4c41103..be9b130 100644
--- a/src/content/docs/en/update-task/update-task-route.mdx
+++ b/src/content/docs/en/update-task/add-new-route.mdx
@@ -1,28 +1,15 @@
 ---
-title: Update Task Route
+title: Add new route for task updates
 description: Learn how to set up routing for task updates
 course: angular-20
-slug: "update-task-update-task-route"
+slug: "update-task-add-new-route"
 ---
 
-import { Steps } from '@astrojs/starlight/components';
+import { Steps } from "@astrojs/starlight/components";
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Configure update route</strong>
-      <p>Set up routing for the task update functionality.</p>
-    </li>
-    <li>
-      <strong>Handle route parameters</strong>
-      <p>Learn how to pass and retrieve task ID in routes.</p>
-    </li>
-    <li>
-      <strong>Implement route guards</strong>
-      <p>Add protection to ensure valid task updates.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Add a new route for task updates
 </NotificationCard>
 
 ## Route Configuration
@@ -108,8 +95,7 @@ By accessing this path, you will extract the **id** value from the URL in the ne
 
         RouterLink
       ],
-    ```
-
+   ```
 
 </Steps>
 
diff --git a/src/content/docs/en/update-task/form-validation.mdx b/src/content/docs/en/update-task/form-validation.mdx
new file mode 100644
index 0000000..aed6d02
--- /dev/null
+++ b/src/content/docs/en/update-task/form-validation.mdx
@@ -0,0 +1,87 @@
+---
+title: Form Validation
+description: Learn how to validate a form in Angular
+course: angular-20
+slug: "update-task-form-validation"
+---
+
+import { Steps } from "@astrojs/starlight/components";
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+<NotificationCard state="objective" title="Chapter Objective">
+  Add form validation to the form.
+</NotificationCard>
+
+## Form validation
+
+Form validation is the process of checking user input in a form to make sure it is complete and correct before allowing the form to be submitted. For example, you can require certain fields to be filled in or check that an email address is in the right format. Angular provides built-in tools to help you validate form input and display useful error messages to users
+
+For example: `Validators.required` is a built-in Angular validator used in reactive forms to make a form field mandatory. When applied, the form control is considered invalid if it is empty, helping ensure users fill out required fields before submitting the form. `Validators.minLength(3)` is another built-in Angular validator that checks if the input value has a minimum length of 3 characters. If the input is shorter, the form control is marked as invalid, prompting users to enter a longer value.
+
+In our case we won't handle the error but we will console log the error if the form is invalid in our submit.
+
+<Steps>
+
+1. Update the file `src/app/task-form/task-form.ts`.
+
+   ```typescript ins="[Validators.required]" ins="[Validators.minLength(1)]"
+   import { Component, inject, OnInit } from "@angular/core";
+   import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
+   import { TaskService } from "../task-service";
+   import { Router } from "@angular/router";
+
+   import { ActivatedRoute } from "@angular/router";
+
+   @Component({
+     selector: "app-task-form",
+     imports: [ReactiveFormsModule],
+     templateUrl: "./task-form.html",
+     styleUrl: "./task-form.css",
+   })
+   export class TaskForm implements OnInit {
+     private taskService = inject(TaskService);
+     private router = inject(Router);
+
+     private route = inject(ActivatedRoute);
+
+     private id = this.route.snapshot.paramMap.get("id");
+
+     form = new FormGroup({
+       title: new FormControl("", [Validators.required]),
+       description: new FormControl("", [Validators.minLength(1)]),
+     });
+
+     constructor() {
+       if (this.id) {
+         this.form.patchValue(this.taskService.getTask(this.id));
+       }
+     }
+
+     submit() {
+       if (this.form.invalid) {
+         console.log("Your form is invalid. Please check the fields.");
+         console.log("Your Form: ", this.form.value);
+         console.log("Title Errors: ", this.form.controls.title.errors);
+         console.log(
+           "Description Errors: ",
+           this.form.controls.description.errors
+         );
+       }
+       this.taskService.addTask(this.form.value);
+       this.router.navigate(["/"]);
+     }
+   }
+   ```
+
+</Steps>
+
+## Test it
+
+<Steps>
+  1. Click the `Update` button next to a task in the list. 2. The form should be
+  filled with the task to update.
+</Steps>
+
+<NotificationCard state="success" title="What you've learned">
+  In this chapter, you learned how to add form validation to the form.
+</NotificationCard>
diff --git a/src/content/docs/en/update-task/retrieve-data-url.mdx b/src/content/docs/en/update-task/retrieve-data-url.mdx
new file mode 100644
index 0000000..28932ad
--- /dev/null
+++ b/src/content/docs/en/update-task/retrieve-data-url.mdx
@@ -0,0 +1,173 @@
+---
+title: Retrieve data from the URL
+description: Learn how to retrieve data from the URL in Angular
+course: angular-20
+slug: "update-task-retrieve-data-url"
+---
+
+import { Steps } from "@astrojs/starlight/components";
+import NotificationCard from "../../../../components/ui/NotificationCard";
+
+<NotificationCard state="objective" title="Chapter Objective">
+  Retrieve data from the URL in Angular
+</NotificationCard>
+
+You can now access the **TaskForm** component by clicking the `Update` link.
+This path includes a dynamic value to pass the **id** of the task to update.
+
+The **TaskForm** component form is currently empty because it was created to add a new task and is therefore initialized as an empty form.
+
+Let's update it to use the form for both creating and updating a task.
+
+## Retrieve task information to update with TaskService
+
+Before getting the route identifier, let's prepare the logic to identify the task to update.
+Since the task list is stored in **TaskService**, you'll add a new function to retrieve a task based on its **id**.
+From this identifier, you'll get the task to fill the form.
+
+<Steps>
+
+1. Update the file `src/app/task-service.ts`.
+
+   ```typescript ins={"Add a function to retrieve a task by its identifier": 30-33}
+    // task-service.ts
+    import { Injectable, signal, WritableSignal } from "@angular/core";
+    import { Task } from "./task.model";
+
+    @Injectable({
+      providedIn: "root",
+    })
+    export class TaskService {
+      tasks: WritableSignal<Task[]> = signal([
+        {
+          title: "Task 1",
+          description: "Description of task 1",
+          createdAt: new Date(),
+        },
+        {
+          title: "Task 2",
+          description: "Description of task 2",
+          createdAt: new Date(),
+        },
+      ]);
+
+      addTask(task: Task): void {
+        this.tasks.update((tasks) => {
+          return [...tasks, {
+          ...task,
+          createdAt: new Date(),
+        });
+        });
+      }
+
+      getTask(id: string): Task {
+        return this.tasks().find((task) => task.id === id)!;
+      }
+    }
+   ```
+
+</Steps>
+
+## Get the task identifier from the route
+
+The **id** is present in the route path, you need to retrieve it in the **TaskForm** component.
+Use the **ActivatedRoute** service to get the **id** from the route.
+
+This service provides access to information about the current route.
+As you did with the **Router**, you'll inject it into the **TaskForm** component.
+
+```typescript
+private route = inject(ActivatedRoute);
+
+private id = this.route.snapshot.paramMap.get('id');
+```
+
+**route.snapshot** is a static image of route information and exposes a **paramMap** property.
+
+This **paramMap** is a map of required and optional parameters specific to the route, including the dynamic route path parameters.
+The **get** method of the **paramMap** object allows us to retrieve the value of a parameter based on the name you used in the route path definition: **id**.
+
+Then, you'll retrieve the task to update from the **TaskService** based on the **id** available in the route.
+
+```typescript
+private id = this.route.snapshot.paramMap.get('id');
+
+constructor() {
+  this.form.patchValue(this.taskService.getTask(this.id));
+}
+```
+
+:::caution
+This `id`variable is not a Signal, though not 'reactive'.
+It's fine for two reasons:
+
+- it gets its value at the Component creation, it does not change over time
+- it's not used in the template, so ever if it happens to change, it won't be reflected in the template
+
+If you feel like having to choose between a Signal and a regular variable is complicated, you are safe at using a Signal.
+:::
+
+<NotificationCard state="info" title="Note">
+  The **TaskForm** component is used for both creating and updating a task. You
+  should test if the **id** is available in the route before retrieving the task
+  to update. This will prevent an error when the **id** is not available in the
+  route.
+</NotificationCard>
+
+```typescript
+private id = this.route.snapshot.paramMap.get('id');
+
+constructor() {
+  if (this.id) {
+    this.form.patchValue(this.taskService.getTask(this.id));
+  }
+}
+```
+
+<Steps>
+
+1. Update the file `src/app/task-form/task-form.ts`.
+
+   ```typescript ins={"get the id from the URL": 19-20} ins={"Patch the form value": 28-31} ins={"inject ActivatedRoute": 17-18} ins={"import ActivatedRoute": 5-6}
+   import { Component, inject, OnInit } from "@angular/core";
+   import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
+   import { TaskService } from "../task-service";
+   import { Router } from "@angular/router";
+
+   import { ActivatedRoute } from "@angular/router";
+
+   @Component({
+     selector: "app-task-form",
+     imports: [ReactiveFormsModule],
+     templateUrl: "./task-form.html",
+     styleUrl: "./task-form.css",
+   })
+   export class TaskForm implements OnInit {
+     private taskService = inject(TaskService);
+     private router = inject(Router);
+
+     private route = inject(ActivatedRoute);
+
+     private id = this.route.snapshot.paramMap.get("id");
+
+     form = new FormGroup({
+       title: new FormControl("", [Validators.required]),
+       description: new FormControl("", [Validators.minLength(1)]),
+     });
+
+     constructor() {
+
+       if (this.id) {
+         this.form.patchValue(this.taskService.getTask(this.id));
+       }
+     }
+   }
+   ```
+
+</Steps>
+
+<NotificationCard state="success" title="What you've learned">
+  In this chapter, you learned how to update **TaskForm** component to fill the
+  form with the task to update. You learned how to retrieve the task from
+  **TaskService** based on the **id** available in the route.
+</NotificationCard>
diff --git a/src/content/docs/en/update-task/submit-update-form.mdx b/src/content/docs/en/update-task/submit-update-form.mdx
index 802dff9..93bcfeb 100644
--- a/src/content/docs/en/update-task/submit-update-form.mdx
+++ b/src/content/docs/en/update-task/submit-update-form.mdx
@@ -8,21 +8,8 @@ slug: "update-task-submit-update-form"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Handle form submission</strong>
-      <p>Learn how to process form data when updating tasks.</p>
-    </li>
-    <li>
-      <strong>Update task data</strong>
-      <p>Implement the logic to update task information in the service.</p>
-    </li>
-    <li>
-      <strong>Navigate after update</strong>
-      <p>Learn how to redirect users after successful task updates.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Handle form submission for task updates
 </NotificationCard>
 
 ## Update the Task with TaskService
@@ -79,7 +66,7 @@ Let's add a new function to update an existing task in the list.
 
 ## Update the TaskFormComponent
 
-The **TaskFormComponent** is currently used to add a new task to the list.
+The **TaskForm** component is currently used to add a new task to the list.
 
 Handle the update action through the form **without creating a new task**.
 To do this, keep the same **submit** function but update it to use the **updateTask** function from the **TaskService**.
@@ -139,16 +126,14 @@ In both cases, return to the task list.
      private taskService = inject(TaskService);
      private router = inject(Router);
      private route = inject(ActivatedRoute);
-     private id: string | null = null;
+     private id = this.route.snapshot.paramMap.get('id');
 
      form = new FormGroup({
        title: new FormControl('', [Validators.required]),
        description: new FormControl('', [Validators.required])
      });
 
-     ngOnInit() {
-       this.id = this.route.snapshot.paramMap.get("id");
-
+     constructor() {
        if (this.id) {
          this.form.patchValue(this.taskService.getTask(this.id));
        }
@@ -193,6 +178,6 @@ In both cases, return to the task list.
 </Steps>
 
 <NotificationCard state="success" title="What you've learned">
-  In this chapter, you learned how to update the **TaskFormComponent** to handle
+  In this chapter, you learned how to update the **TaskForm** component to handle
   both updating and creating tasks.
 </NotificationCard>
diff --git a/src/content/docs/en/update-task/update-task-form.mdx b/src/content/docs/en/update-task/update-task-form.mdx
deleted file mode 100644
index 4d12fba..0000000
--- a/src/content/docs/en/update-task/update-task-form.mdx
+++ /dev/null
@@ -1,254 +0,0 @@
----
-title: Update Task Form
-description: Learn how to create a form for updating tasks
-course: angular-20
-slug: "update-task-update-task-form"
----
-
-import { Steps } from '@astrojs/starlight/components';
-import NotificationCard from "../../../../components/ui/NotificationCard";
-
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2 pb-2">
-    <li>
-      <strong>Create update form</strong>
-      <p>Build a form component for editing existing tasks.</p>
-    </li>
-    <li>
-      <strong>Populate form data</strong>
-      <p>Learn how to pre-fill form fields with existing task data.</p>
-    </li>
-    <li>
-      <strong>Handle form validation</strong>
-      <p>Implement validation for the task update form.</p>
-    </li>
-  </ul>
-</NotificationCard>
-
-
-You can now access the **TaskForm** component by clicking the `Update` link.
-This path includes a dynamic value to pass the **id** of the task to update.
-
-The **TaskForm** component form is currently empty because it was created to add a new task and is therefore initialized as an empty form.
-
-```typescript
-// task-form.ts
-task = {
-  id: "",
-  title: "",
-  description: "",
-};
-```
-
-Update it to use the form for both creating and updating a task.
-
-## Retrieve task information to update with TaskService
-
-Before getting the route identifier, let's prepare the logic to identify the task to update.
-Since the task list is stored in **TaskService**, you'll add a new function to retrieve a task based on its **id**.
-From this identifier, you'll get the task to fill the form.
-
-<Steps>
-
-1. Update the file `src/app/task-service.ts`.
-
-   ```typescript ins={"Add a function to retrieve a task by its identifier": 30-33}
-    // task-service.ts
-    import { Injectable, signal, WritableSignal } from "@angular/core";
-    import { Task } from "./task.model";
-
-    @Injectable({
-      providedIn: "root",
-    })
-    export class TaskService {
-      tasks: WritableSignal<Task[]> = signal([
-        {
-          title: "Task 1",
-          description: "Description of task 1",
-          createdAt: new Date(),
-        },
-        {
-          title: "Task 2",
-          description: "Description of task 2",
-          createdAt: new Date(),
-        },
-      ]);
-
-      addTask(task: Task): void {
-        this.tasks.update((tasks) => {
-          return [...tasks, {
-          ...task,
-          createdAt: new Date(),
-        });
-        });
-      }
-
-      getTask(id: string): Task {
-        return this.tasks().find((task) => task.id === id)!;
-      }
-    }
-   ```
-
-</Steps>
-
-## Get the task identifier from the route
-
-The **id** is present in the route path, you need to retrieve it in the **TaskFormComponent**.
-Use the **ActivatedRoute** service to get the **id** from the route.
-
-This service provides access to information about the current route.
-As you did with the **Router**, you'll inject it into the **TaskFormComponent** constructor.
-
-### Hooks: Angular lifecycle
-
-Until now, you've initialized class properties during their declaration.
-
-For example, you initialized the **task** property with an empty object:
-
-```typescript
-task = {
-  id: "",
-  title: "",
-  description: "",
-};
-```
-
-You can't use such logic to initialize the **task** property with the task to update because this `id` isn't yet available when the Component class is created.
-
-**Why?**
-
-From creation to destruction, a component goes through several stages.
-When creating the Component class, route information is not yet available.
-
-To handle such a case, Angular provides lifecycle hooks.
-Lifecycle hooks are methods that Angular calls in components and directives when it creates, changes, and destroys them.
-
-One of the most used lifecycle hooks is **ngOnInit**, which is already present in all created components of the application.
-This hook is called right after Angular has instantiated the Component class.
-And at this point, the component is able to read route information.
-
-Inside this hook, start by retrieving the route identifier and save it into a new variable called `id`.
-
-```typescript
-private id: string | null = null;
-
-ngOnInit() {
-    this.id = this.route.snapshot.paramMap.get('id');
-}
-```
-
-**route.snapshot** is a static image of route information and exposes a **paramMap** property.
-
-This **paramMap** is a map of required and optional parameters specific to the route, including the dynamic route path parameters.
-The **get** method of the **paramMap** object allows us to retrieve the value of a parameter based on the name you used in the route path definition: **id**.
-
-Then, you'll retrieve the task to update from the **TaskService** based on the **id** available in the route.
-
-```typescript
-private id: string | null = null;
-
-ngOnInit() {
-      this.id = this.route.snapshot.paramMap.get('id');
-      this.form.patchValue(this.taskService.getTask(this.id));
-  }
-```
-
-<NotificationCard state="info" title="Note">
-  The **TaskFormComponent** is used for both creating and updating a task. You
-  should test if the **id** is available in the route before retrieving the task
-  to update. This will prevent an error when the **id** is not available in the
-  route.
-</NotificationCard>
-
-```typescript
-private id: string | null = null;
-
-ngOnInit() {
-      this.id = this.route.snapshot.paramMap.get('id');
-
-      if (this.id) {
-          this.form.patchValue(this.taskService.getTask(this.id));
-      }
-}
-```
-## Form validation
-
-Form validation is the process of checking user input in a form to make sure it is complete and correct before allowing the form to be submitted. For example, you can require certain fields to be filled in or check that an email address is in the right format. Angular provides built-in tools to help you validate form input and display useful error messages to users
-
-For example: `Validators.required` is a built-in Angular validator used in reactive forms to make a form field mandatory. When applied, the form control is considered invalid if it is empty, helping ensure users fill out required fields before submitting the form. `Validators.minLength(3)` is another built-in Angular validator that checks if the input value has a minimum length of 3 characters. If the input is shorter, the form control is marked as invalid, prompting users to enter a longer value.
-
-In our case we won't handle the error but we will console log the error if the form is invalid in our submit.
-
-
-
-<Steps>
-
-1. Update the file `src/app/task-form/task-form.ts`.
-
-   ```typescript ins={"add lifecycle onInit and get the id from the URL": 29-31} ins={"Retrieve the task identifier from the route": 32-36} ins={"inject ActivatedRoute": 22-23} ins={"import ActivatedRoute": 5-6} ins="implements OnInit" ins=" OnInit " ins={"create a variable for id as we need to reuse it": 24-25} ins="[Validators.required]" ins="[Validators.minLength(1)]"
-   import {Component, inject, OnInit} from '@angular/core';
-   import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
-   import {TaskService} from '../task-service';
-   import {Router} from '@angular/router';
-
-   import { ActivatedRoute } from "@angular/router";
-
-   @Component({
-     selector: "app-task-form",
-     imports: [
-     ReactiveFormsModule,
-     ],
-     templateUrl: "./task-form.html",
-     styleUrl: "./task-form.css",
-   })
-
-   export class TaskForm implements OnInit {
-     private taskService = inject(TaskService);
-     private router = inject(Router);
-
-     private route = inject(ActivatedRoute);
-
-     private id: string | null = null;
-
-     form = new FormGroup({
-       title: new FormControl("", [Validators.required]),
-       description: new FormControl("", [Validators.minLength(1)]),
-     });
-
-     ngOnInit() {
-       this.id = this.route.snapshot.paramMap.get("id");
-
-       if (this.id) {
-         this.form.patchValue(this.taskService.getTask(this.id));
-       }
-     }
-
-      submit() {
-        if (this.form.invalid) {
-          console.log('Your form is invalid. Please check the fields.');
-          console.log('Your Form: ', this.form.value);
-          console.log('Title Errors: ', this.form.controls.title.errors);
-          console.log('Description Errors: ', this.form.controls.description.errors);
-        }
-        this.taskService.addTask(this.form.value);
-        this.router.navigate(["/"]);
-      }
-
-
-   }
-   ```
-
-</Steps>
-
-## Test it
-
-<Steps>
-  1. Click the `Update` button next to a task in the list. 2. The form should be
-  filled with the task to update.
-</Steps>
-
-<NotificationCard state="success" title="What you've learned">
-  In this chapter, you learned how to update **TaskFormComponent** to fill the
-  form with the task to update. You learned how to retrieve the task from
-  **TaskService** based on the **id** available in the route.
-</NotificationCard>
diff --git a/src/styles/global.css b/src/styles/global.css
index c64bf5b..dc19846 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -61,3 +61,16 @@ https://tailwindcss.com/docs/adding-custom-styles#using-custom-css
 .site-title {
   font-family: "Geist", sans-serif;
 }
+
+h1#_top {
+  margin-block-start: 0;
+  padding-block-end: 1rem;
+}
+
+:root audio::-webkit-media-controls-panel {
+  @apply bg-teal-50;
+}
+
+:root:not([data-theme="light"]) audio::-webkit-media-controls-panel {
+  @apply dark:bg-teal-950/30;
+}