diff --git a/todo-workspace/frontend/src/app/app.component.html b/todo-workspace/frontend/src/app/app.component.html
index 98f3b93574fc62d8a788d6e416ab2183ce184f6d..25331c8855352a3956a0ada37fa09a8ce44b44e2 100644
--- a/todo-workspace/frontend/src/app/app.component.html
+++ b/todo-workspace/frontend/src/app/app.component.html
@@ -1 +1 @@
-<app-todo-list />
\ No newline at end of file
+<app-todo-list />
diff --git a/todo-workspace/frontend/src/app/app.component.ts b/todo-workspace/frontend/src/app/app.component.ts
index 131bd9eeae7b1434b1cb20dbbf543e6ae9d01905..4374dbb3aa3464665b34cbb4d13a53a1c22172e3 100644
--- a/todo-workspace/frontend/src/app/app.component.ts
+++ b/todo-workspace/frontend/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { TodoListComponent } from '@features/todo-list/todo-list.component';
+import TodoListComponent from '@features/todo-list/todo-list.component';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faIcons } from '@shared/fa-icons';
 
diff --git a/todo-workspace/frontend/src/app/features/todo-list/components/add-todo-form.component.ts b/todo-workspace/frontend/src/app/features/todo-list/components/add-todo-form.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb54bc71cc838ef5349baf1b7ad911fb3a205efb
--- /dev/null
+++ b/todo-workspace/frontend/src/app/features/todo-list/components/add-todo-form.component.ts
@@ -0,0 +1,24 @@
+import { Component, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-add-todo-form',
+  template: `
+    <form (ngSubmit)="this.add.emit(todoInput.value); todoInput.value = ''">
+      <div class="flex space-x-2">
+        <input
+          #todoInput
+          class="input input-bordered w-full"
+          name="add todo"
+          placeholder="Ex : Tourner une vidéo sur Angular"
+          type="text"
+        />
+        <button class="btn btn-neutral" type="submit">Ajouter</button>
+      </div>
+    </form>
+  `,
+  imports: [FormsModule],
+})
+export class AddTodoFormComponent {
+  add = output<string>();
+}
diff --git a/todo-workspace/frontend/src/app/features/todo-list/components/todo-list-item.ts b/todo-workspace/frontend/src/app/features/todo-list/components/todo-list-item.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4e0fbd95919d571d696f04ebba171651f1727638
--- /dev/null
+++ b/todo-workspace/frontend/src/app/features/todo-list/components/todo-list-item.ts
@@ -0,0 +1,25 @@
+import { Component, input, output } from '@angular/core';
+import { Todo } from '@core/models/todo';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { NgClass } from '@angular/common';
+
+@Component({
+  selector: 'app-todo-list-item',
+  template: `
+    <li class="py-2 w-full">
+      <label class="fieldset-label">
+        <input type="checkbox" [checked]="todo().completed" class="checkbox" (change)="toggleCompleted.emit(todo())" />
+        <span [ngClass]="{ 'line-through': todo().completed }">{{ todo().name }}</span>
+        <button class="btn btn-ghost btn-error" (click)="remove.emit(todo())">
+          <fa-icon [icon]="['fas', 'trash']"></fa-icon>
+        </button>
+      </label>
+    </li>
+  `,
+  imports: [FaIconComponent, NgClass],
+})
+export class TodoListItemComponent {
+  todo = input.required<Todo>();
+  toggleCompleted = output<Todo>();
+  remove = output<Todo>();
+}
diff --git a/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html
index a9933eac801297ec9a5fcbea9d66f5935cb2e65c..40f14a29d1c49ac4ee1e5911fa5aa33b56410cc6 100644
--- a/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html
+++ b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html
@@ -2,36 +2,18 @@
   <div class="w-full max-w-md bg-white p-6 rounded-lg shadow-lg">
     <h1 class="text-center text-3xl font-bold mb-4">Check-list</h1>
     <!-- Input et bouton -->
-    <form (ngSubmit)="addTodo(todoInput.value); todoInput.value = ''">
-      <div class="flex space-x-2">
-        <input
-          #todoInput
-          class="input input-bordered w-full"
-          name="add todo"
-          placeholder="Ex : Tourner une vidéo sur Angular"
-          type="text"
-        />
-        <button class="btn btn-neutral" type="submit">Ajouter</button>
-      </div>
-    </form>
-    <!-- Texte centré -->
+    <app-add-todo-form (add)="addTodo($event)" />
+
+    <!-- Liste des tâches -->
     <div class="flex-grow flex items-center justify-center py-5">
+      <ul class="list text-gray-600 text-lg">
+        @for (todo of todos(); track todo.id) {
+          <app-todo-list-item [todo]="todo" (toggleCompleted)="toggleCompleted($event)" (remove)="remove($event)" />
+        }
+      </ul>
+
       @if (!todos()?.length) {
         <p class="text-gray-600 text-lg">Ajoute ta première tâche 👆</p>
-      } @else {
-        <ul class="list text-gray-600 text-lg">
-          @for (todo of todos(); track todo.id) {
-            <li class="py-2 w-full">
-              <label class="fieldset-label">
-                <input type="checkbox" [checked]="todo.completed" class="checkbox" (change)="toggleCompleted(todo)" />
-                <span [ngClass]="{ 'line-through': todo.completed }">{{ todo.name }}</span>
-                <button class="btn btn-ghost btn-error" (click)="remove(todo)">
-                  <fa-icon [icon]="['fas', 'trash']"></fa-icon>
-                </button>
-              </label>
-            </li>
-          }
-        </ul>
       }
     </div>
   </div>
diff --git a/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts
index e77a1718b563cdc8ed7a668cd696dc4811dc05a7..3af9ca60a03db46ea4c62a8859c840f7147e1450 100644
--- a/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts
+++ b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts
@@ -1,19 +1,19 @@
 import { Component, inject } from '@angular/core';
 import { TodoService } from '@core/ports/todo.service';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { NgClass } from '@angular/common';
 import { BehaviorSubject, switchMap, tap } from 'rxjs';
 import { FormsModule } from '@angular/forms';
 import { Todo } from '@core/models/todo';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { AddTodoFormComponent } from '@features/todo-list/components/add-todo-form.component';
+import { TodoListItemComponent } from '@features/todo-list/components/todo-list-item';
 
 @Component({
   selector: 'app-todo-list',
-  imports: [NgClass, FormsModule, FaIconComponent],
+  imports: [FormsModule, AddTodoFormComponent, TodoListItemComponent, TodoListItemComponent],
   templateUrl: './todo-list.component.html',
   styleUrl: './todo-list.component.scss',
 })
-export class TodoListComponent {
+export default class TodoListComponent {
   private reload$$ = new BehaviorSubject<void>(void 0);
   private readonly todoService = inject(TodoService);
   todos = toSignal(
diff --git a/todo-workspace/frontend/src/main.ts b/todo-workspace/frontend/src/main.ts
index 2876990b4cefbcd97c3b98cae6b6aaa9c4932415..ab30ab04ebeb4c419f10179f7c888d96b6a2f859 100644
--- a/todo-workspace/frontend/src/main.ts
+++ b/todo-workspace/frontend/src/main.ts
@@ -1,5 +1,5 @@
-import {bootstrapApplication} from '@angular/platform-browser';
-import {appConfig} from '@app/app.config';
-import {AppComponent} from '@app/app.component';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from '@app/app.config';
+import { AppComponent } from '@app/app.component';
 
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));