diff --git a/todo-workspace/frontend/src/app/app.component.html b/todo-workspace/frontend/src/app/app.component.html
index 25331c8855352a3956a0ada37fa09a8ce44b44e2..67e7bd4cd6a1695885480e285649088d90ea7180 100644
--- a/todo-workspace/frontend/src/app/app.component.html
+++ b/todo-workspace/frontend/src/app/app.component.html
@@ -1 +1 @@
-<app-todo-list />
+<router-outlet />
diff --git a/todo-workspace/frontend/src/app/app.component.ts b/todo-workspace/frontend/src/app/app.component.ts
index 4374dbb3aa3464665b34cbb4d13a53a1c22172e3..62b4b872f8ed77013f780c669800e751f90bb33b 100644
--- a/todo-workspace/frontend/src/app/app.component.ts
+++ b/todo-workspace/frontend/src/app/app.component.ts
@@ -1,11 +1,11 @@
 import { Component, inject } from '@angular/core';
-import TodoListComponent from '@features/todo-list/todo-list.component';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faIcons } from '@shared/fa-icons';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  imports: [TodoListComponent],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
diff --git a/todo-workspace/frontend/src/app/app.config.ts b/todo-workspace/frontend/src/app/app.config.ts
index 7a84a42a598239c8a39fb870d8a8ad7876074bae..4553b08ab18f627a84ff7ae87823eeb5adfe9b71 100644
--- a/todo-workspace/frontend/src/app/app.config.ts
+++ b/todo-workspace/frontend/src/app/app.config.ts
@@ -4,15 +4,20 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
 import { TodoService } from '@core/ports/todo.service';
-import { InMemoryTodoService } from '@core/adapters/in-memory-todo.service';
-import { TodoBuilder } from '@core/models/builder/todo.builder';
+import { LocalStorageTodoService } from '@core/adapters/local-storage-todo.service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideHttpClient(),
+
     {
+      provide: TodoService,
+      useFactory: () => new LocalStorageTodoService(),
+    },
+
+    /*{
       provide: TodoService,
       useFactory: () =>
         new InMemoryTodoService().withTodos([
@@ -20,6 +25,6 @@ export const appConfig: ApplicationConfig = {
           new TodoBuilder().withId(2).withName('Apprendre Java Spring Boot').complete().build(),
           new TodoBuilder().withId(3).withName('Apprendre PostgreSQL').uncomplete().build(),
         ]),
-    },
+    },*/
   ],
 };
diff --git a/todo-workspace/frontend/src/app/app.routes.ts b/todo-workspace/frontend/src/app/app.routes.ts
index dc39edb5f23a35f788cba146dd7337127ba6c5ab..cf124b530f1f92c2661172ed75cbcc457508ff82 100644
--- a/todo-workspace/frontend/src/app/app.routes.ts
+++ b/todo-workspace/frontend/src/app/app.routes.ts
@@ -1,3 +1,3 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [{ path: '', loadComponent: () => import('./features/todo-list/todo-list.component') }];
diff --git a/todo-workspace/frontend/src/app/core/adapters/local-storage-todo.service.ts b/todo-workspace/frontend/src/app/core/adapters/local-storage-todo.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..59a91f868d0f1908332e099ca942f6e6f5fa1324
--- /dev/null
+++ b/todo-workspace/frontend/src/app/core/adapters/local-storage-todo.service.ts
@@ -0,0 +1,44 @@
+import { TodoService } from '@core/ports/todo.service';
+import { Observable, of } from 'rxjs';
+import { Todo, Todos } from '@core/models/todo';
+import { TodoBuilder } from '@core/models/builder/todo.builder';
+
+export class LocalStorageTodoService implements TodoService {
+  add(todoName: string): Observable<Todo> {
+    const todos = this.getTodos();
+    const newTodo = new TodoBuilder()
+      .withId(todos.length + 1)
+      .withName(todoName)
+      .uncomplete()
+      .build();
+    this.setTodos([...todos, newTodo]);
+    return of(newTodo);
+  }
+
+  getAll(): Observable<Todos> {
+    return of(this.getTodos());
+  }
+
+  remove(todoId: number): Observable<void> {
+    const todos = this.getTodos().filter((todo) => todo.id !== todoId);
+    this.setTodos(todos);
+    return of(void 0);
+  }
+
+  toggleCompleted(todoId: number): Observable<Todo> {
+    const todo = this.getTodos().find((todo) => todo.id === todoId)!;
+    todo.completed = !todo.completed;
+    const todos = this.getTodos().map((todo) => (todo.id === todoId ? { ...todo, completed: true } : todo));
+    this.setTodos(todos);
+    return of(todo);
+  }
+
+  private getTodos(): Todos {
+    const todos = localStorage.getItem('todos');
+    return todos ? JSON.parse(todos) : [];
+  }
+
+  private setTodos(todos: Todos): void {
+    localStorage.setItem('todos', JSON.stringify(todos));
+  }
+}
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 3af9ca60a03db46ea4c62a8859c840f7147e1450..0fa3a403f49c0a62bc2f2172ec9f129f2621665a 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,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { TodoService } from '@core/ports/todo.service';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, switchMap, tap } from 'rxjs';
@@ -12,6 +12,7 @@ import { TodoListItemComponent } from '@features/todo-list/components/todo-list-
   imports: [FormsModule, AddTodoFormComponent, TodoListItemComponent, TodoListItemComponent],
   templateUrl: './todo-list.component.html',
   styleUrl: './todo-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class TodoListComponent {
   private reload$$ = new BehaviorSubject<void>(void 0);