diff --git a/src/app/components/to-do-list/to-do-list.component.html b/src/app/components/to-do-list/to-do-list.component.html
index e06e89c..db60889 100644
--- a/src/app/components/to-do-list/to-do-list.component.html
+++ b/src/app/components/to-do-list/to-do-list.component.html
@@ -2,11 +2,13 @@
   type="text"
   class="todo-title"
   placeholder="Titre"
-  value = "{{todo.nom}}"
+  value="{{ todo.nom }}"
+  [(ngModel)]="todo.nom"
+  (keyup.enter)="updateTodo(todo)"
 />
-<div>
-  <button (click)="effacerList()">Effacer la To Do List</button>
-</div>
+
+<i class="bi bi-trash3" (click)="deleteTodo(todo.id)"></i>
+
 <input
   type="text"
   class="todo-input"
@@ -15,8 +17,6 @@
   (keyup.enter)="addTache(todo.id)"
 />
 
-
-
 <div class="element" *ngFor="let tache of todo.taches">
   <div class="element-gauche">
     <input
@@ -45,11 +45,9 @@
       />
     </ng-template>
   </div>
-  <div class="deleteTache" (click)="deleteTodo(tache.id)">&times;</div>
+  <div class="deleteTache" (click)="deleteTache(tache.id)">&times;</div>
 </div>
 
-
-
 <div class="extra-container">
   <div>
     <label
@@ -60,7 +58,7 @@
       />Selectionner toutes les tâches</label
     >
   </div>
-  <div>{{ toDoRest() }} tâches</div>
+  <div>{{ toDoRest() }} tâches restantes</div>
 </div>
 <div class="extra-container">
   <!-- <div>
@@ -81,5 +79,4 @@
     </button>
   </div>
  -->
-
 </div>
diff --git a/src/app/components/to-do-list/to-do-list.component.ts b/src/app/components/to-do-list/to-do-list.component.ts
index 6780170..f5dd560 100644
--- a/src/app/components/to-do-list/to-do-list.component.ts
+++ b/src/app/components/to-do-list/to-do-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { Tache} from 'src/app/models/tache';
-import { ToDoList} from 'src/app/models/to-do-list';
+import { Tache } from 'src/app/models/tache';
+import { ToDoList } from 'src/app/models/to-do-list';
 import { TodoService } from 'src/app/services/todo.service';
 import { TodoList } from 'src/app/todo-list';
 
@@ -16,49 +16,59 @@ export class ToDoListComponent implements OnInit {
   //public todos: ToDoList[];
   public todoTitle: string;
   public idTodo: number;
-  public filter : string;
-  public casesRestantes : boolean;
+  public filter: string;
+  public casesRestantes: boolean;
   public masterSelected: boolean;
-  public result : any;
-  public tache : Tache [];
+  public result: any;
+  public tache: Tache[];
 
-  constructor(private TodoService : TodoService, private router: Router ) {
+  constructor(private TodoService: TodoService, private router: Router) {
     this.beforeEditCache = '';
     //this.todos = [];
     this.todoTitle = '';
     this.idTodo = 0;
-    this.filter ='';
-    this.casesRestantes=true;
-    this.masterSelected= false;
+    this.filter = '';
+    this.casesRestantes = true;
+    this.masterSelected = false;
     this.tache = [];
   }
 
   ngOnInit(): void {
     this.beforeEditCache = '';
-    this.casesRestantes=true;
-    this.filter='tous';
+    this.casesRestantes = true;
+    this.filter = 'tous';
     this.idTodo = 4;
     this.todoTitle = '';
-
+  }
+  //supprimer la todoList
+  deleteTodo(id: number): void {
+    this.TodoService.deleteTodoById(id).subscribe((resp) => {
+      window.location.reload();
+    });
   }
   //ajouter tache
 
-  addTache(idTodoList : number) {//idTodoList id que la todoList que l'on récupère
-console.log(idTodoList);
+  addTache(idTodoList: number) {
+    //idTodoList id que la todoList que l'on récupère
+    console.log(idTodoList);
     const tache: Tache = {
-      id : 0,
+      id: 0,
       texte: this.todoTitle,
-      etat : false,
-      editing : false,
-
-    }
+      etat: false,
+      editing: false,
+    };
     console.log(this.tache);
-    this.TodoService.addTache(tache,idTodoList).subscribe((resp)=>{
+    this.TodoService.addTache(tache, idTodoList).subscribe((resp) => {
       window.location.reload();
-    })
+    });
   }
 
-
+  //modifier le titre de la to-do-list
+  updateTodo(todoList: ToDoList): void {
+    this.TodoService.updateTodo(todoList)?.subscribe((resp) => {
+      window.location.reload();
+    });
+  }
 
   //modifier par l'input
   modifier(tache: Tache): void {
@@ -71,13 +81,12 @@ console.log(idTodoList);
     if (tache.texte.trim().length === 0) {
       tache.texte = this.beforeEditCache;
     }
-    this.casesRestantes= this.casesQuiRestes();
+    this.casesRestantes = this.casesQuiRestes();
     tache.editing = false;
-    this.TodoService.updateTache(tache).subscribe((resp)=>{
+    this.TodoService.updateTache(tache).subscribe((resp) => {
       console.log(tache);
       window.location.reload();
-    })
-
+    });
   }
 
   // annuler la modification
@@ -87,23 +96,20 @@ console.log(idTodoList);
   }
 
   //supprimer la tache
-  deleteTodo(id: number) {
-    this.TodoService.deleteTacheById(id).subscribe(
-      resp =>{
+  deleteTache(id: number) {
+    this.TodoService.deleteTacheById(id).subscribe((resp) => {
       window.location.reload();
-    }
-    );}
-
-
+    });
+  }
 
   //nombre de tâches restantes
-  toDoRest(): number{
-    return this.todo.taches.filter((tache: Tache)=> !tache.etat).length;
+  toDoRest(): number {
+    return this.todo.taches.filter((tache: Tache) => !tache.etat).length;
   }
 
   //Cocher toutes les tâches de la liste
   listComplete(): boolean {
-    return this.todo.taches.filter((tache: Tache)=> tache).length>0;
+    return this.todo.taches.filter((tache: Tache) => tache).length > 0;
   }
 
   //Effacer la to do list
@@ -125,7 +131,7 @@ console.log(idTodoList);
   }
 
   //barre de filtre des tâches
- /*  todosFilter(): ToDoList[] {
+  /*  todosFilter(): ToDoList[] {
     if(this.filter === 'tous'){
       return this.todo.taches
     }else if (this.filter === 'active'){
@@ -135,6 +141,4 @@ console.log(idTodoList);
     }
     return this.todo
     } */
-  }
-
-
+}
diff --git a/src/app/models/to-do-list.ts b/src/app/models/to-do-list.ts
index ec149d4..4b8c345 100644
--- a/src/app/models/to-do-list.ts
+++ b/src/app/models/to-do-list.ts
@@ -3,9 +3,6 @@ import { Team } from './team';
 
 export interface ToDoList {
   nom: string;
-  team: Team;
-  taches: Tache [];
-  id:number;
+  taches: Tache[];
+  id: number;
 }
-
-
diff --git a/src/app/pages/page-to-do-list/page-to-do-list.component.html b/src/app/pages/page-to-do-list/page-to-do-list.component.html
index ae8adfd..90d7931 100644
--- a/src/app/pages/page-to-do-list/page-to-do-list.component.html
+++ b/src/app/pages/page-to-do-list/page-to-do-list.component.html
@@ -1,10 +1,23 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
+<div class="row">
+  <div class="col-md-auto">
+    <app-side-bar></app-side-bar>
+  </div>
+  <div class="col menu text-center">
+    <h2>To-Do-List</h2>
+    <div class="d-flex align-items-stretch"></div>
+    <input
+      type="text"
+      class="todo-input"
+      placeholder="+ Nouvelle To-Do-List"
+      [(ngModel)]="todoListTitle"
+      (keyup.enter)="addTodoByTeamId()"
+    />
 
-<div class="d-flex align-items-stretch">
-  <div class="row">
-    <div class="col" *ngFor="let todos of result">
-      <app-to-do-list [todo]="todos"> </app-to-do-list>
+    <div class="d-flex align-items-stretch">
+      <div class="col" *ngFor="let todos of listTodos">
+        <app-to-do-list [todo]="todos"> </app-to-do-list>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/pages/page-to-do-list/page-to-do-list.component.ts b/src/app/pages/page-to-do-list/page-to-do-list.component.ts
index 81ebd86..b9732e8 100644
--- a/src/app/pages/page-to-do-list/page-to-do-list.component.ts
+++ b/src/app/pages/page-to-do-list/page-to-do-list.component.ts
@@ -1,26 +1,50 @@
 import { Component, OnInit } from '@angular/core';
+import { ToDoList } from 'src/app/models/to-do-list';
 import { TodoService } from 'src/app/services/todo.service';
-
-
+import { Team } from 'src/app/models/team';
 
 @Component({
   selector: 'app-page-to-do-list',
   templateUrl: './page-to-do-list.component.html',
-  styleUrls: ['./page-to-do-list.component.scss']
+  styleUrls: ['./page-to-do-list.component.scss'],
 })
 export class PageToDoListComponent implements OnInit {
-  public result : any;
-
-  constructor(private TodoService : TodoService) { }
-
-  ngOnInit(): void {
-    this.TodoService.getToDoListByTeamId().subscribe((data :any)=>{
-
-      this.result = data;
-      console.log(data);
-    });
-
+  public result: any;
+  public listTodos: any[];
+  public todoListTitle: string;
+  public idTodo: number;
 
+  constructor(private TodoService: TodoService) {
+    this.listTodos = [];
+    this.todoListTitle = '';
+    this.idTodo = 0;
   }
 
+  ngOnInit(): void {
+    this.TodoService.getToDoListByTeamId()?.subscribe((listTodos: any) => {
+      console.log(listTodos);
+      this.listTodos = listTodos;
+      this.todoListTitle = '';
+      this.idTodo = 0;
+    });
+  }
+  //Ajouter une todo List
+  addTodoByTeamId() {
+    const todoList: ToDoList = {
+      nom: this.todoListTitle,
+      taches: [],
+      id: 0,
+    };
+    this.TodoService.addTodoByTeamId(todoList)?.subscribe((resp) => {
+      console.log(todoList);
+      window.location.reload();
+    });
+  }
+
+  deleteTodo(id: number): void {
+    window.alert('La to-do-List a bien été supprimé!');
+    this.TodoService.deleteTodoById(id).subscribe((resp) => {
+      window.location.reload();
+    });
+  }
 }
diff --git a/src/app/services/todo.service.ts b/src/app/services/todo.service.ts
index 8ca79ed..6528ebb 100644
--- a/src/app/services/todo.service.ts
+++ b/src/app/services/todo.service.ts
@@ -4,6 +4,8 @@ import { Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { Tache } from '../models/tache';
 import { ToDoList } from '../models/to-do-list';
+import { TodoList } from '../todo-list';
+import { TokenService } from './token.service';
 
 @Injectable({
   providedIn: 'root',
@@ -12,12 +14,13 @@ export class TodoService {
   private toDoList: any;
   private apiUrl: string;
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private tokenService: TokenService) {
     this.apiUrl = environment.apiUrl;
   }
 
-  getToDoListByTeamId(): Observable<any> {
-    return this.http.get(`${this.apiUrl}/todolist/team/1`);
+  getToDoListByTeamId(): Observable<any> | void {
+    const teamId = this.tokenService.getCurrentTeamId();
+    return this.http.get(`${this.apiUrl}/todolist/team/${teamId}`);
   }
 
   deleteTacheById(idTache: any): Observable<any> {
@@ -27,12 +30,27 @@ export class TodoService {
   }
 
   addTache(newtache: Tache, idTodoList: number): Observable<any> {
-   // console.log(newtache);
+    // console.log(newtache);
     return this.http.post(`${this.apiUrl}/taches/add/${idTodoList}`, newtache);
   }
 
   updateTache(tache: Tache): Observable<any> {
-console.log(tache);
+    console.log(tache);
     return this.http.put(`${this.apiUrl}/taches/update/1`, tache);
   }
+  addTodoByTeamId(newtodoList: TodoList): Observable<any> {
+    const teamId = this.tokenService.getCurrentTeamId();
+    console.log(newtodoList + 'newtodoList');
+    return this.http.post(`${this.apiUrl}/todolist/add/${teamId}`, newtodoList);
+  }
+
+  deleteTodoById(idTodo: any): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/todolist/delete/${idTodo}`, {
+      responseType: 'text',
+    });
+  }
+  updateTodo(todoList: TodoList): Observable<any> {
+    console.log(todoList);
+    return this.http.put(`${this.apiUrl}/todolist/update/666`, todoList);
+  }
 }