diff --git a/src/app/components/messages-list/messages-list.component.html b/src/app/components/messages-list/messages-list.component.html
new file mode 100644
index 0000000..68917bf
--- /dev/null
+++ b/src/app/components/messages-list/messages-list.component.html
@@ -0,0 +1,36 @@
+<div class="m-3">
+    <app-title-part textInfo="Début de la conversation"></app-title-part>
+</div>
+
+@for (message of messages(); track message.id) {
+    @if (message.userId === currentUser) {
+        <div class="flex flex-row-reverse items-end">
+            <div class="flex flex-col items-end">
+                <div class="px-3.5 py-2 text-sm rounded-3xl rounded-br-sm bg-violet-700 text-white max-w-xs">
+                    {{ message.libelle }}
+                </div>
+                <span class="text-[10px] mt-0.5 mr-1 mb-0.5">
+                  {{ message.sendDate | date:'HH:mm' }}
+                </span>
+            </div>
+        </div>
+
+    } @else {
+        <div class="flex items-end gap-2">
+            <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs mb-2 bg-teal-100 text-teal-700 max-w-xs">
+                {{ message.username.substring(0, 2) }}
+            </div>
+            <div class="flex flex-col">
+                <span class="text-[11px] mb-1 ml-1">
+                  {{ message.username }}
+                </span>
+                <div class="px-3.5 py-2 text-sm rounded-3xl rounded-bl-sm border">
+                    {{ message.libelle }}
+                </div>
+                <span class="text-[10px] mt-0.5 mx-1 mb-0.5">
+                  {{ message.sendDate | date:'HH:mm' }}
+                </span>
+            </div>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/app/components/messages-list/messages-list.component.scss b/src/app/components/messages-list/messages-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/messages-list/messages-list.component.ts b/src/app/components/messages-list/messages-list.component.ts
new file mode 100644
index 0000000..fe7bcbd
--- /dev/null
+++ b/src/app/components/messages-list/messages-list.component.ts
@@ -0,0 +1,24 @@
+import {Component, inject, input} from '@angular/core';
+import {DatePipe} from "@angular/common";
+import {IonicModule} from "@ionic/angular";
+import {GetMessageDto} from "../../services/api";
+import {jwtDecode} from "jwt-decode";
+import {AuthManageService} from "../../services/auth-manage";
+import {TitlePartComponent} from "../title-part/title-part.component";
+
+@Component({
+    selector: 'app-messages-list',
+    templateUrl: './messages-list.component.html',
+    styleUrls: ['./messages-list.component.scss'],
+    imports: [
+        DatePipe,
+        IonicModule,
+        TitlePartComponent
+    ]
+})
+export class MessagesListComponent {
+    private authService = inject(AuthManageService);
+
+    messages = input.required<GetMessageDto[]>();
+    currentUser = Number(jwtDecode<any>(this.authService.getToken()).UserId);
+}