diff --git a/src/app/components/poi-list/poi-list.component.css b/src/app/components/poi-list/poi-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/poi-list/poi-list.component.html b/src/app/components/poi-list/poi-list.component.html
new file mode 100644
index 0000000..ee895cb
--- /dev/null
+++ b/src/app/components/poi-list/poi-list.component.html
@@ -0,0 +1,82 @@
+<div class="container mx-auto px-4 py-8">
+  <div class="flex justify-between items-center mb-6">
+    <h2 class="text-2xl font-bold">Liste des Points d'Intérêt</h2>
+    <button (click)="addPoi()" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md">
+      Ajouter un POI
+    </button>
+  </div>
+
+  <!-- Liste des POIs -->
+  <div class="overflow-x-auto">
+    <table class="min-w-full bg-white border border-gray-200">
+      <thead>
+        <tr class="bg-gray-100">
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Titre</th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Adresse</th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200">
+        <tr *ngFor="let poi of pois" class="hover:bg-gray-50">
+          <td class="px-6 py-4 whitespace-nowrap">{{ poi.title }}</td>
+          <td class="px-6 py-4">{{ poi.description }}</td>
+          <td class="px-6 py-4">{{ poi.complete_address }}</td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded mr-2" (click)="editPoi(poi)">
+              Modifier
+            </button>
+            <button class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded" (click)="deletePoi(poi.id)">
+              Supprimer
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Modal de modification/ajout -->
+  <div *ngIf="isEditing || isAdding" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+    <div class="bg-white p-6 rounded-lg shadow-xl w-full max-w-md">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="text-lg font-medium">{{ isAdding ? 'Ajouter un POI' : 'Modifier le POI' }}</h3>
+        <button type="button" class="text-gray-400 hover:text-gray-500" (click)="cancelEdit()">
+          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      
+      <form (ngSubmit)="savePoi()" *ngIf="selectedPoi">
+        <div class="mb-4">
+          <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Titre</label>
+          <input type="text" id="title" name="title" [(ngModel)]="selectedPoi.title" required
+            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+        </div>
+        
+        <div class="mb-4">
+          <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+          <textarea id="description" name="description" [(ngModel)]="selectedPoi.description" rows="3"
+            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+        </div>
+        
+        <div class="mb-4">
+          <label for="complete_address" class="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
+          <input type="text" id="complete_address" name="complete_address" [(ngModel)]="selectedPoi.complete_address" required
+            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+        </div>
+
+        <div class="flex justify-end space-x-3">
+          <button type="button" (click)="cancelEdit()"
+            class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">
+            Annuler
+          </button>
+          <button type="submit"
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
+            {{ isAdding ? 'Ajouter' : 'Enregistrer' }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/src/app/components/poi-list/poi-list.component.spec.ts b/src/app/components/poi-list/poi-list.component.spec.ts
new file mode 100644
index 0000000..d2e9eb6
--- /dev/null
+++ b/src/app/components/poi-list/poi-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PoiListComponent } from './poi-list.component';
+
+describe('PoiListComponent', () => {
+  let component: PoiListComponent;
+  let fixture: ComponentFixture<PoiListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PoiListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PoiListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});