diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index 6342220..ec8aad4 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -10,37 +10,43 @@
 
 use Illuminate\Http\Request;
 
+/**
+ * Controller for the chat system (discussions, messages, capsules, etc.).
+ */
 class ChatController extends Controller
 {
+    /** 
+     * Show the dashboard with the list of discussions and pass the friends list to the view.
+     */
     public function index()
     {
+        // Get the list of discussions with the last message and the members
         $discussions = auth()->user()->chats()
             ->with(['messages' => function ($query) {
                 $query->latest()->limit(1);
-            }, 'members']) // Assure-toi que la relation members est chargée
+            }, 'members'])
             ->latest()
             ->get()
             ->map(function ($discussion) {
-                // Vérifie si la discussion est un chat individuel (2 membres)
+                // We check if the discussion is a private chat
                 if ($discussion->members->count() == 2) {
-                    // Détermine l'image en fonction des membres
+                    // And set the profile picture of the other member as the discussion picture
                     $otherMember = $discussion->members->first()->id == auth()->id()
                         ? $discussion->members->skip(1)->first()
                         : $discussion->members->first();
 
-                    // Ajoute l'image sélectionnée comme propriété de la discussion
                     $discussion->discussionPicture = $otherMember->image
                         ? asset('storage/' . $otherMember->image)
                         : asset('source/assets/avatar/avatar.png');
                 } else {
-                    // Utilise une image par défaut pour les groupes
+                    // We use a default group picture if the discussion is a group chat
                     $discussion->discussionPicture = asset('source/assets/images/group.png');
                 }
 
                 return $discussion;
             });
 
-        // Récupérer les amis acceptés
+        // Get the list of friends (accepted friendships)
         $friends = Friendship::where(function ($query) {
             $query->where('user_id', auth()->id())
                 ->orWhere('friend_id', auth()->id());
@@ -59,13 +65,21 @@ public function index()
         ]);
     }
 
+    /**
+     * Return the messages of a discussion (with the closed capsules and opened capsules)
+     * 
+     * @param int $chatId The ID of the discussion
+     * @return \Illuminate\Http\JsonResponse A JSON response containing the array of messages.
+     */
     public function getMessages($chatId)
     {
+        // We get all the messages (including the closed capsules) of the discussion
         $messages = Message::where('chat_id', $chatId)
             ->orderBy('created_at', 'asc')
             ->with('user')
             ->get();
 
+        // We get the opened capsules of the discussion
         $opened_capsule = Message::where('chat_id', $chatId)
             ->where('created_at', '<', DB::raw('opening_date'))
             ->where('opening_date', '<', now('Europe/Paris'))
@@ -73,14 +87,18 @@ public function getMessages($chatId)
             ->with('user')
             ->get();
 
-        // Pour tout les opened_capsule, modifier l'id du message
+        // For all the opened capsules, we modify the ID to avoid conflicts with the other messages
+        // and we change the creation date to the opening date as the messages will be sorted by creation date
+        // We do that to display the opened capsules at the right place in the chat
         $opened_capsule->each(function ($message) {
             $message->id += 10000000;
-            // On modifie la date de création pour qu'elle corresponde à la date d'ouverture, pour que le message soit affiché au bon endroit dans la conversation
             $message->created_at = $message->opening_date;
         });
 
-        // Pour tout les messages qui ont une date de création plus petite que la opening_date, modifier le message
+        // For all messages that have a creation date less than the opening_date, modify the message
+        // If the creation date is less than the opening date, it means that the message is a capsule,
+        // so we change the message to a locked message and we change the media_url to a default image
+        // to avoid sending the message and media of the capsule to the client before the opening date
         $messages->each(function ($message) {
             if ($message->created_at < $message->opening_date) {
                 $prettyDate = \Carbon\Carbon::parse($message->opening_date);
@@ -90,13 +108,13 @@ public function getMessages($chatId)
             }
         });
 
+        // To avoid error in the format of the returned JSON
         $opened_capsule = $opened_capsule->toArray();
         $messages = $messages->toArray();
 
-        // Fusionner les messages et les capsules ouvertes
         $messages = array_merge($messages, $opened_capsule);
 
-        // Trier les messages par date de création
+        // We sort the messages by creation date
         usort($messages, function ($a, $b) {
             return $a['created_at'] <=> $b['created_at'];
         });
@@ -104,6 +122,13 @@ public function getMessages($chatId)
         return response()->json(['messages' => $messages]);
     }
 
+    /**
+     * Store a new message sent by the user in a specific chat.
+     * 
+     * @param \Illuminate\Http\Request $request The request containing the message content.
+     * @param int $chatId The ID of the chat.
+     * @return \Illuminate\Http\JsonResponse A JSON response containing the message (or an error).
+     */
     public function storeMessage(Request $request, $chatId)
     {
         $request->validate([
@@ -116,6 +141,7 @@ public function storeMessage(Request $request, $chatId)
             return response()->json(['error' => 'Chat not found or unauthorized.'], 404);
         }
 
+        // Logic to check if the user is blocked by the other member or if the other member is blocked
         if ($chat->members->count() == 2) {
             $otherMember = $chat->members->firstWhere('id', '!=', auth()->id());
 
@@ -132,6 +158,7 @@ public function storeMessage(Request $request, $chatId)
             }
         }
 
+        // Create a new message and save it in the database
         $message = new Message();
         $message->user_id = auth()->id();
         $message->chat_id = $chatId;
@@ -141,64 +168,80 @@ public function storeMessage(Request $request, $chatId)
         return response()->json(['message' => $message]);
     }
 
+    /**
+     * Store a new capsule sent by the user in a specific chat.
+     * 
+     * @param \Illuminate\Http\Request $request The request containing the message content and the media file.
+     * @param int $chatId The ID of the chat.
+     * @return \Illuminate\Http\JsonResponse A JSON response containing the capsule (or an error).
+     */
     public function storeCapsule(Request $request, $chatId)
     {
-        // Validation
+        // We authorize file up to 1GB and only the following formats
         $request->validate([
             'file' => 'required|file|mimes:jpeg,png,jpg,gif,mp3,mp4,mov|max:1048576',
             'message' => 'required|string'
         ]);
 
-        // Vérification de la présence du fichier
+        // Check if the file is valid
         if ($request->hasFile('file') && $request->file('file')->isValid()) {
             $media = $request->file('file');
-            $mediaName = time() . '_' . $media->getClientOriginalName();
 
-            // Déplacer le fichier vers le répertoire public/source/media
+            // Generate a unique name for the file and move it to the media folder
+            $mediaName = time() . '_' . $media->getClientOriginalName();
             $media->move(public_path('source/media'), $mediaName);
 
-            // Créer un nouveau message et l'enregistrer dans la base de données
+            // Create a new message and save it in the database (with the media URL)
             $message = new Message();
             $message->user_id = auth()->id();
             $message->chat_id = $chatId;
             $message->message = $request->message;
             $message->media_url = $mediaName;
 
-            // Vérifier que la date d'ouverture est définie
+            // Setting the opening date to now (to open it instantly) if the user didn't set one
             $message->opening_date = $request->filled('date_time') ? $request->date_time : now("Europe/Paris");
 
             $message->save();
 
             return response()->json(['message' => $message]);
         }
-
-        return response()->json(['error' => 'Le fichier n\'a pas été envoyé ou est invalide.'], 400);
+        return response()->json(['error' => 'The file was not sent or is invalid.'], 400);
     }
 
+    /**
+     * Store a new chat with the name and the friends selected by the user.
+     * 
+     * @param \Illuminate\Http\Request $request The request containing the chat name and the friends.
+     * @return \Illuminate\Http\RedirectResponse A redirect response to the dashboard with a success message.
+     */
     public function storeChat(Request $request)
     {
-        // Valider les champs du formulaire
         $request->validate([
             'chat_name' => 'required|string|max:255',
-            'friends' => 'required|array|min:1', // Minimum 1 ami sélectionné
-            'friends.*' => 'exists:users,id', // Vérifie si les amis existent dans la table users
+            'friends' => 'required|array|min:1', // Minimum 1 friend selected
+            'friends.*' => 'exists:users,id', // Checking if the friends exist in the database
         ]);
 
-        // Créer la discussion dans la table 'chats'
-        $chat = new Chat();  // Assurez-vous d'importer App\Models\Chat en haut
+        // Create a new chat and save it in the database
+        $chat = new Chat();
         $chat->name = $request->chat_name;
         $chat->save();
 
-        // Associer l'utilisateur actuel à la discussion
+        // Link the user who created the chat to the discussion
         $chat->users()->attach(auth()->id());
 
-        // Associer les amis sélectionnés à la discussion
+        // Link the friends selected by the user to the discussion
         $chat->users()->attach($request->friends);
 
-        // Rediriger avec un message de succès
         return redirect()->route('dashboard')->with('success', 'Discussion créée avec succès !');
     }
 
+    /**
+     * Leave a chat (remove the user from the chat).
+     * 
+     * @param int $chatId The ID of the chat.
+     * @return \Illuminate\Http\JsonResponse A JSON response with a message.
+     */
     public function leaveChat($chatId)
     {
         $chat = Chat::find($chatId);
@@ -212,6 +255,13 @@ public function leaveChat($chatId)
         return response()->json(['message' => 'You left the chat.']);
     }
 
+    /**
+     * Delete a message from a discussion.
+     * 
+     * @param int $discussionId The ID of the discussion.
+     * @param int $messageId The ID of the message.
+     * @return \Illuminate\Http\JsonResponse A JSON response with a message (or an error).
+     */
     public function deleteMessage($discussionId, $messageId)
     {
         $message = Message::where('id', $messageId)->where('chat_id', $discussionId)->first();
diff --git a/public/source/assets/images/info_icon.png b/public/source/assets/images/info_icon.png
new file mode 100644
index 0000000..e0f92ea
Binary files /dev/null and b/public/source/assets/images/info_icon.png differ
diff --git a/public/source/assets/images/profile.png b/public/source/assets/images/profile.png
deleted file mode 100644
index cdd700a..0000000
Binary files a/public/source/assets/images/profile.png and /dev/null differ
diff --git a/public/source/media/1734346086_1159477.jpg b/public/source/media/1734346086_1159477.jpg
new file mode 100644
index 0000000..bd35ee4
Binary files /dev/null and b/public/source/media/1734346086_1159477.jpg differ
diff --git a/public/source/media/1734346210_1159477.jpg b/public/source/media/1734346210_1159477.jpg
new file mode 100644
index 0000000..bd35ee4
Binary files /dev/null and b/public/source/media/1734346210_1159477.jpg differ
diff --git a/resources/css/app.css b/resources/css/app.css
index b789ef9..64f966d 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -66,4 +66,4 @@
     100% {
         transform: rotate(360deg);
     }
-}
\ No newline at end of file
+}
diff --git a/resources/views/components/messaging/chatbar.blade.php b/resources/views/components/messaging/chatbar.blade.php
index 3c93bdc..f689ce8 100644
--- a/resources/views/components/messaging/chatbar.blade.php
+++ b/resources/views/components/messaging/chatbar.blade.php
@@ -13,65 +13,37 @@ class="rounded-full secondary-background-app p-2 flex items-center justify-cente
         </span>
 
         <x-modal name="create-file-modal" focusable>
-            <form method="post" class="p-6" x-data="capsuleForm()" id="create-file-modal-form" @submit.prevent="submitForm">
+            <form method="post" class="p-6" x-data="capsuleForm()" id="create-file-modal-form" @submit.prevent="submitForm" enctype="multipart/form-data" x-on:click.away="$dispatch('close'); document.getElementById('create-file-modal-form').reset(); document.getElementById('file-info').innerHTML = '<p class=&quot;text-gray-300 font-medium&quot;>Glissez et déposez votre fichier ici ou</p><p class=&quot;text-blue-400 underline&quot;>cliquez pour sélectionner un fichier</p>';">
                 @csrf
                 <input type="hidden" id="discussion-id" name="discussion_id" value="CHAT_ID">
                 <h3 class="text-lg font-semibold text-gray-300 mb-5">Créer une capsule</h3>
-                <!-- Champ pour le fichier de la capsule -->
-                <div class="flex items-center justify-center bg-gray-800">
-                    <div class="border-dashed border-4 border-gray-500 rounded-lg p-8 bg-gray-900 hover:bg-gray-700 transition duration-300" ondrop="handleDrop(event)" ondragover="handleDragOver(event)">
-                        <label for="file" class="flex flex-col items-center justify-center cursor-pointer">
-                            <div id="file-info">
+                <!-- Field for the file of the capsule -->
+                <div class="flex items-center justify-center h-full w-full">
+                    <div class="border-dashed border-4 border-gray-500 rounded-lg bg-gray-900 hover:bg-gray-700 transition duration-300" ondrop="handleDrop(event)" ondragover="handleDragOver(event)">
+                        <label for="file" class="flex flex-col items-center justify-center cursor-pointer h-full w-full">
+                            <div id="file-info" class="text-center mt-6">
                                 <p class="text-gray-300 font-medium">Glissez et déposez votre fichier ici ou</p>
                                 <p class="text-blue-400 underline">cliquez pour sélectionner un fichier</p>
                             </div>
                         </label>
-                        <input id="file" name="file" type="file" class="hidden" onchange="updateFileName()" x-model="file">
+                        <input id="file" name="file" type="file" class="inset-0 opacity-0 cursor-pointer" accept=".jpeg,.png,.jpg,.gif,.mp3,.mp4,.mov" onchange="updateFileName()" x-model="file" required>
                     </div>
                 </div>
-                <script>
-                    function updateFileName() {
-                        const fileInput = document.getElementById('file');
-                        const fileInfo = document.getElementById('file-info');
-
-                        if (fileInput.files.length > 0) {
-                            const fileName = fileInput.files[0].name;
-                            fileInfo.innerHTML = `<p class='text-green-400 font-medium'>Fichier sélectionné : ${fileName}</p>`;
-                        }
-                    }
-
-                    function handleDragOver(event) {
-                        event.preventDefault();
-                    }
-
-                    function handleDrop(event) {
-                        event.preventDefault();
-                        const fileInput = document.getElementById('file');
-                        const fileInfo = document.getElementById('file-info');
-
-                        if (event.dataTransfer.files.length > 0) {
-                            const file = event.dataTransfer.files[0];
-                            fileInput.files = event.dataTransfer.files;
-                            fileInfo.innerHTML = `<p class='text-green-400 font-medium'>Fichier sélectionné : ${file.name}</p>`;
-                        }
-                    }
-                </script>
-                <!-- Champ pour le message de la capsule -->
+                <!-- Field for the message of the capsule -->
                 <div class="mb-4">
                     <x-input-label for="message" value="Message" />
-                    <x-text-input id="message" name="message" type="text" class="block w-full mt-1"
-                        x-model="chatMessage" />
+                    <x-text-input id="message" name="message" type="text" class="block w-full mt-1" x-model="chatMessage" required />
                     <div class="mb-4">
                         <x-input-label for="date-time" value="Date et heure d'ouverture de la capsule (laisser vide pour ouverture instantanée)" />
                         <input type="datetime-local" id="date-time" name="date_time" class="block w-full mt-1 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" />
                     </div>
                 </div>
-                <!-- Boutons d'action -->
+                <!-- Action buttons -->
                 <div class="mt-6 flex justify-end">
-                    <x-secondary-button x-on:click="$dispatch('close')">
+                    <x-secondary-button x-on:click="$dispatch('close'); document.getElementById('create-file-modal-form').reset(); document.getElementById('file-info').innerHTML = '<p class=&quot;text-gray-300 font-medium&quot;>Glissez et déposez votre fichier ici ou</p><p class=&quot;text-blue-400 underline&quot;>cliquez pour sélectionner un fichier</p>';">
                         Annuler
                     </x-secondary-button>
-                    <x-primary-button class="ml-3" x-on:click.prevent="submitForm">
+                    <x-primary-button class="ml-3" type="submit">
                         Envoyer la capsule
                     </x-primary-button>
                 </div>
@@ -79,48 +51,3 @@ function handleDrop(event) {
         </x-modal>
     </div>
 </div>
-
-<script>
-    function capsuleForm() {
-        return {
-            chatMessage: '',
-            file: null,
-            submitForm() {
-                event.preventDefault();
-                // Récupérer dynamiquement l'ID de la discussion depuis le champ caché
-                const discussionId = document.getElementById('discussion-id').value;
-
-                // Créer l'objet FormData avec les données du formulaire
-                const formData = new FormData(document.getElementById('create-file-modal-form'));
-
-                // Effectuer la requête AJAX avec `fetch`
-                fetch(`/chat/${discussionId}/capsule`, {
-                        method: 'POST',
-                        body: formData,
-                        headers: {
-                            'X-Requested-With': 'XMLHttpRequest',
-                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                        },
-                    })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.message.id) {
-                            // Fermer le modal et réinitialiser le formulaire
-                            this.chatMessage = '';
-                            this.file = null;
-                            document.getElementById('file-info').innerHTML = `<p class='text-gray-300 font-medium'>Glissez et déposez votre fichier ici ou</p><p class='text-blue-400 underline'>cliquez pour sélectionner un fichier</p>`;
-                            document.getElementById('date-time').value = '';
-                            this.$dispatch('close');
-                        } else {
-                            console.log(data)
-                            alert('Erreur lors de l\'envoi de la capsule');
-                        }
-                    })
-                    .catch(error => {
-                        alert('Erreur lors de l\'envoi');
-                        console.error(error);
-                    });
-            }
-        };
-    }
-</script>
\ No newline at end of file
diff --git a/resources/views/components/messaging/discussion-sidebar.blade.php b/resources/views/components/messaging/discussion-sidebar.blade.php
index e25b602..7668099 100644
--- a/resources/views/components/messaging/discussion-sidebar.blade.php
+++ b/resources/views/components/messaging/discussion-sidebar.blade.php
@@ -15,7 +15,7 @@ class="flex items-center justify-center">
                         <form method="post" action="{{ route('chats.store') }}" class="p-6" x-data="chatForm()"
                             x-on:submit.prevent="validateForm">
                             @csrf
-                            <!-- Champ pour le nom du chat -->
+                            <!-- Chat name field -->
                             <div class="mb-4">
                                 <x-input-label for="chat-name" value="Nom de la discussion" />
                                 <x-text-input id="chat-name" name="chat_name" type="text" class="block w-full mt-1"
@@ -23,7 +23,7 @@ class="flex items-center justify-center">
                                 <p x-show="errors.chatName" class="text-red-500 text-sm mt-1">Le nom de la discussion
                                     est requis.</p>
                             </div>
-                            <!-- Liste des amis avec des cases à cocher -->
+                            <!-- Friends list with checkboxes -->
                             <div class="mb-4">
                                 <p class="font-medium text-white">Sélectionnez le/les amis à ajouter à la discussion</p>
                                 <div class="mt-2 overflow-y-auto max-h-48 scrollbar-hide rounded p-2">
@@ -48,7 +48,7 @@ class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray
                                         un ami.</p>
                                 </div>
                             </div>
-                            <!-- Boutons d'action -->
+                            <!-- Action buttons -->
                             <div class="mt-6 flex justify-end">
                                 <x-secondary-button x-on:click="$dispatch('close')">
                                     Annuler
@@ -66,18 +66,18 @@ class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray
             </div>
         </li>
         @foreach ($discussions as $discussion)
-        <li class="flex items-center p-2 border-b border-black overflow-hidden mr-2 cursor-pointer"
-            onclick="loadChat({{ $discussion->id }}, '{{ $discussion->name }}', '{{ $discussion->discussionPicture }}', {{ true }})">
-            <img src="{{ $discussion->discussionPicture }}" alt="Avatar" class="w-10 h-10 rounded-full mr-3 flex-shrink-0">
-            <!-- Ajout de flex-shrink-0 pour éviter que l'image rétrécisse -->
-            <div class="flex-1">
-                <div class="font-bold">{{ $discussion->name }}</div>
-                <div class="text-sm text-gray-400 whitespace-nowrap">
-                    @if ($discussion->messages->first())
-                    {{ $discussion->messages->first()->message }}
-                    @endif
+            <li class="flex items-center p-2 border-b border-black overflow-hidden mr-2 cursor-pointer"
+                onclick="loadChat({{ $discussion->id }}, '{{ $discussion->name }}', '{{ $discussion->discussionPicture }}', {{ $discussion->members }}, {{ true }})">
+                <img src="{{ $discussion->discussionPicture }}" alt="Avatar" class="w-10 h-10 rounded-full mr-3 flex-shrink-0">
+                <!-- Ajout de flex-shrink-0 pour éviter que l'image rétrécisse -->
+                <div class="flex-1">
+                    <div class="font-bold">{{ $discussion->name }}</div>
+                    <div class="text-sm text-gray-400 whitespace-nowrap">
+                        @if ($discussion->messages->first())
+                            {{ $discussion->messages->first()->message }}
+                        @endif
+                    </div>
                 </div>
-            </div>
         </li>
         @endforeach
     </ul>
diff --git a/resources/views/components/messaging/header.blade.php b/resources/views/components/messaging/header.blade.php
index 14c0711..43c631b 100644
--- a/resources/views/components/messaging/header.blade.php
+++ b/resources/views/components/messaging/header.blade.php
@@ -1,14 +1,39 @@
+@php
+    $members = [
+        ['name' => 'Jean Dupont', 'avatar' => 'https://via.placeholder.com/40'],
+        ['name' => 'Marie Curie', 'avatar' => 'https://via.placeholder.com/40'],
+        ['name' => 'Albert Einstein', 'avatar' => 'https://via.placeholder.com/40'],
+    ];
+@endphp
+
 <div class="flex background-app border-b border-black h-12 items-center justify-between p-4 gap-x-4">
     <div class="flex items-center gap-x-4">
         <img src="" alt="Discussion Picture" class="w-10 h-10 rounded-full headerImage">
         <span class="text-white font-semibold headerTitle"></span>
     </div>
-    <button id="leave-chat-btn"
-        class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-        onclick="leaveChatWithLoad()">
-        Quitter
-    </button>
-    <span id="leave-chat-loader" style="display:none;">
-        <div class="spinner"></div>
-    </span>`;
-</div>
\ No newline at end of file
+    <div class="flex items-center gap-x-4">
+
+        <button id="info-chat-btn"
+            x-data="" x-on:click.prevent="$dispatch('open-modal', 'info-modal')">
+            <img src="{{ asset('source/assets/images/info_icon.png') }}" alt="Profile" class="h-8 w-8">
+        </button>
+    </div>
+</div>
+
+<x-modal name="info-modal" focusable>
+    <div class="p-6">
+        <h2 class="text-lg font-bold mb-4 text-white">Membres du groupe</h2>
+        <ul class="text-white space-y-2" id="members-list">
+        </ul>
+        <div class="mt-6 flex justify-between">
+            <button id="leave-chat-btn"
+                class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+                onclick="leaveChatWithLoad()">
+                Quitter le groupe
+            </button>
+            <x-secondary-button x-on:click="$dispatch('close')">
+                Fermer
+            </x-secondary-button>
+        </div>
+    </div>
+</x-modal>
diff --git a/resources/views/components/messaging/home-section.blade.php b/resources/views/components/messaging/home-section.blade.php
index 4f322a1..96e7739 100644
--- a/resources/views/components/messaging/home-section.blade.php
+++ b/resources/views/components/messaging/home-section.blade.php
@@ -1,8 +1,8 @@
-<div class="flex flex-col items-center justify-center h-full text-white bg-gray-800 bg-cover bg-center messagesBackground">
+<div class="flex flex-col items-center justify-center h-full w-full text-white bg-gray-800 bg-cover bg-center messagesBackground">
     <!-- Logo -->
     <img src="{{ asset('source/assets/images/logo.png') }}" alt="Logo" class="w-[30%] mb-6" />
 
-    <!-- Texte descriptif de l'application -->
+    <!-- Text description of the application -->
     <p class="text-center text-xl font-semibold w-[75%]">
         Bienvenue sur T-CAPS !
     </p>
diff --git a/resources/views/components/messaging/messages.blade.php b/resources/views/components/messaging/messages.blade.php
index 782b71d..e0d784e 100644
--- a/resources/views/components/messaging/messages.blade.php
+++ b/resources/views/components/messaging/messages.blade.php
@@ -1,4 +1,4 @@
-    <!-- Section des messages avec overflow et hauteur ajustée -->
+    <!-- Message section with overflow and height adjusted -->
     <div id="messages" class="flex-1 overflow-y-auto text-white p-4 scrollbar-hide bg-cover bg-center messagesBackground">
 
     </div>
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 291777f..772a5f1 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -1,14 +1,14 @@
 <x-app-layout>
     <div class="h-full flex background-app">
-        <!-- Inclure le composant de la barre de discussions -->
+        <!-- Include the discussions sidebar component -->
         <x-messaging.discussion-sidebar :discussions="$discussions" :friends="$friends" />
 
-        <!-- Zone de chat avec message par défaut -->
+        <!-- Chat area placeholder (initially shown) -->
         <div id="chat-placeholder" class="flex-1 flex items-center justify-center text-white bg-gray-800">
             <x-messaging.home-section />
         </div>
 
-        <!-- Section de chat (initialement cachée) -->
+        <!-- Chat section (initially hidden) -->
         <div id="chat-area" class="flex-1 background-app flex flex-col h-full relative hidden">
             <x-messaging.header/>
             <x-messaging.messages />
@@ -19,39 +19,68 @@
 
 <script>
     let currentChatId = null;
-    let interval = null;
+    // This is the interval in milliseconds for the chat auto-refresh (getting messages)
+    let interval = 5000;
     let allMessages = [];
 
-    // Fonction pour charger la discussion
-    function loadChat(chatId, discussionName, discussionPicture, newOpening = true) {
-    const messagesContainer = document.getElementById('messages');
+    /**
+     * Function to load a chat
+     * 
+     * @param {number} chatId The ID of the chat
+     * @param {string} discussionName The name of the chat
+     * @param {string} discussionPicture The picture of the chat
+     * @param {array} members The members of the chat
+     * @param {boolean} newOpening Whether we are opening a new chat or not
+     * @returns {void}
+     */
+    function loadChat(chatId, discussionName, discussionPicture, members, newOpening = true) {
+        const messagesContainer = document.getElementById('messages');
 
-    // Masquer le placeholder et afficher la zone de chat
-    document.getElementById('chat-placeholder').style.display = 'none';
-    document.getElementById('chat-area').style.display = 'flex';
+        // Hide the placeholder and show the chat area
+        document.getElementById('chat-placeholder').style.display = 'none';
+        document.getElementById('chat-area').style.display = 'flex';
 
-    // Réinitialiser les messages si on change de discussion
-    if (currentChatId !== chatId) {
-        allMessages = [];
-        messagesContainer.innerHTML = '';
+        // Reset the messages if we change the selected chat
+        if (currentChatId !== chatId) {
+            allMessages = [];
+            messagesContainer.innerHTML = '';
 
-            // Récupérer le champ contenant l'id pour la création de capsule via son id et mettre à jour l'action
+            // Update the hidden input with the chat ID
             const hiddenInput = document.getElementById('discussion-id');
             if (hiddenInput) hiddenInput.value = chatId;
         }
 
-        // Mettre à jour l'ID de la discussion actuelle
         currentChatId = chatId;
 
-        // Mettre à jour le titre du header si nécessaire
+        // Updating the header title and the header image if the user is opening a new chat
         if (newOpening) {
             const headerTitle = document.querySelector('.headerTitle');
             if (headerTitle) headerTitle.textContent = discussionName;
 
             const headerImage = document.querySelector('.headerImage');
             if(headerImage) headerImage.src = discussionPicture;
+
+            if (members && Array.isArray(members)) {
+                const membersList = document.getElementById('members-list');
+                if (membersList) {
+                    membersList.innerHTML = '';
+                    members.forEach(member => {
+                        const listItem = document.createElement('li');
+                        const memberName = member.name + ({{ auth()->id() }} == member.id ? " (Moi)" : "");
+                        const avatarUrl = member.image ? `/storage/${member.image}` : `/source/assets/avatar/avatar.png`;
+
+                        listItem.className = 'flex items-center gap-x-3';
+                        listItem.innerHTML = `
+                            <img src="${avatarUrl}" alt="Avatar" class="w-8 h-8 rounded-full">
+                            <span>${memberName}</span>
+                        `;
+                        membersList.appendChild(listItem);
+                    });
+                }
+            }
         }
 
+        // Fetch the messages of the chat (chatId)
         fetch(`/chat/${chatId}/messages`, {
                 method: 'GET',
                 headers: {
@@ -63,25 +92,26 @@ function loadChat(chatId, discussionName, discussionPicture, newOpening = true)
             .then(data => {
                 let newMessages = [];
                 let deletedMessages = [];
-                // Si la liste de tout les messages correspond à la liste actuelle
+                // If the list of all messages matches the current list
                 if (JSON.stringify(allMessages) === JSON.stringify(data.messages)) {
+                    // No need to update the messages
                     return;
                 } else if (allMessages.length === 0) {
-                    // Si la liste de tout les messages est vide
+                    // If the list of all messages is empty, the new messages are all the messages
                     newMessages = data.messages;
                 } else {
-                    // Récupérer la liste des messages qui ne sont pas déjà affichés
+                    // Taking the messages that are not already displayed
                     newMessages = data.messages.filter(message => !allMessages.some(m => m.id === message.id));
                 }
 
-                // Récupérer la liste des messages supprimés
+                // Get the list of deleted messages
                 deletedMessages = allMessages.filter(message => !data.messages.some(m => m.id === message.id));
 
-                // Récupérer la position dans le scroll et vérifier si on est tout en bas
-                // Utile pour savoir si on doit défiler jusqu'en bas après l'ajout des nouveaux messages ou si l'utilisateur est entrain de consulter des anciens messages
+                // Get the scroll position and check if we are at the bottom
+                // Useful to know if we should scroll to the bottom after adding new messages or if the user is viewing old messages
                 const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop <= messagesContainer.clientHeight + 0.6;
 
-                // Parcourir les messages et les ajouter
+                // Go through the messages and add them to the messages container
                 newMessages.forEach(message => {
                     const isCurrentUser = message.user_id === {{ auth()->id() }};
                     const messageElement = document.createElement('div');
@@ -101,37 +131,38 @@ function loadChat(chatId, discussionName, discussionPicture, newOpening = true)
                         minute: 'numeric'
                     });
                     const messageId = message.id;
-                    // On check si le <p> avec l'id message-${message.id} à un message.id correspondant à messageId-10000000 existe et modifier son contenu au besoin
+                    // We check if the <p> with the id message-${message.id} has a message.id corresponding to messageId-10000000 and modify its content if necessary
                     if (document.getElementById(`message-${messageId-10000000}`)) {
                         document.getElementById(`message-${messageId-10000000}`).innerHTML = `🔓 Ce message a été ouvert le ${prettyOpeningDate}`;
                     }
                     messageElement.className = `flex ${isCurrentUser ? 'justify-end' : 'justify-start'} mb-2`;
-                    // Construction du contenu du message
-                let messageContent = `
-                    <p class="max-w-[45%] ${isCurrentUser ? 'secondary-background-app rounded-tl-lg' : 'tertiary-background-app rounded-tr-lg'} text-white p-2 rounded-bl-lg rounded-br-lg">
-                        <span class="text-xs text-white block mb-1 font-bold">${message.user.name}</span>
-                        ${message.message}
-                        <span class="text-xs text-white block mb-1 font-bold text-right">${prettyDate}</span>
-                    </p>
-                    `;
-
-                // Ajout de la poubelle pour les messages de l'utilisateur
-                if (isCurrentUser) {
-                    messageContent += `
-                    <button onclick="deleteMessageWithLoader(${message.id}, ${chatId})"
-                        class="ml-2 text-red-500 hover:text-red-700 focus:outline-none"
-                        title="Supprimer le message">
-                        🗑️
-                    </button>
-                    <span id="loader-${message.id}" style="display:none;">
-                        <div class="spinner"></div> 
-                    </span>`;
-                }
 
-                // Ajouter le contenu au conteneur du message
-                messageElement.innerHTML = messageContent;
+                    // Building the message content
+                    let messageContent = `
+                        <p class="max-w-[45%] ${isCurrentUser ? 'secondary-background-app rounded-tl-lg' : 'tertiary-background-app rounded-tr-lg'} text-white p-2 rounded-bl-lg rounded-br-lg">
+                            <span class="text-xs text-white block mb-1 font-bold">${message.user.name}</span>
+                            ${message.message}
+                            <span class="text-xs text-white block mb-1 font-bold text-right">${prettyDate}</span>
+                        </p>
+                        `;
+
+                    // Adding the trash for the user's messages
+                    if (isCurrentUser) {
+                        messageContent += `
+                            <button onclick="deleteMessage(${message.id}, ${chatId})"
+                                class="ml-2 text-red-500 hover:text-red-700 focus:outline-none"
+                                title="Supprimer le message">
+                                🗑️
+                            </button>
+                            <span id="loader-${message.id}" style="display:none;">
+                                 <div class="spinner"></div> 
+                            </span>`;
+                    }
 
-                    // Gestion des médias
+                    // Adding the message content to the message container
+                    messageElement.innerHTML = messageContent;
+
+                    // If there is a media URL, we add a custom message that handles the media
                     if (message.media_url) {
                         let mediaElement =
                             `
@@ -154,18 +185,19 @@ class="ml-2 text-red-500 hover:text-red-700 focus:outline-none"
                         }
 
                         mediaElement += `
-                        <p class="mt-3" id="message-${message.id}">
-                            ${message.message}
-                        </p>
-                        <!-- Afficher tout à droite la date de created_at -->
-                        <span class="text-xs text-white block mb-1 font-bold text-right">${prettyDate}</span>
-                    </div>`;
+                    <p class="mt-3" id="message-${message.id}">
+                        ${message.message}
+                    </p>
+                    <span class="text-xs text-white block mb-1 font-bold text-right">${prettyDate}</span>
+                </div>`;
                     messageElement.innerHTML = mediaElement;
                     }
+
+                    // Adding the message element to the messages container
                     messagesContainer.appendChild(messageElement);
                 });
 
-                // Parcourir les messages supprimés et enlever la div du message correspondant
+                // Go through the deleted messages and remove the div of the corresponding message
                 deletedMessages.forEach(message => {
                     const messageElement = document.getElementById(`message-div-${message.id}`);
                     if (messageElement) {
@@ -173,10 +205,11 @@ class="ml-2 text-red-500 hover:text-red-700 focus:outline-none"
                     }
                 });
 
-                // Mettre à jour la liste de tout les messages
+                // Updating the list of all messages that have been displayed
                 allMessages = data.messages;
 
-                // Attendre que tout les médias soient chargés avant de faire défiler
+                // Wait for all media to be loaded before scrolling
+                // Useful for slow connections (and slow servers)
                 const mediaElements = document.querySelectorAll('img, video');
                 mediaElements.forEach(mediaElement => {
                     mediaElement.addEventListener('load', () => {
@@ -186,7 +219,7 @@ class="ml-2 text-red-500 hover:text-red-700 focus:outline-none"
                     });
                 });
 
-                // Faire défiler jusqu'en bas (utile si il y a pas de médias)
+                // Scroll to the bottom (useful if there are no media)
                 if (isAtBottom) {
                     scrollToBottom()
                 };
@@ -194,22 +227,34 @@ class="ml-2 text-red-500 hover:text-red-700 focus:outline-none"
             .catch(error => console.error('Erreur:', error))
     }
 
-    function startAutoRefresh(intervalTime = 5000) {
+    /**
+     * Function to start the auto-refresh of the chat (getting messages)
+     * 
+     * @param {number} interval The interval in milliseconds between each refresh
+     * @returns {void}
+     */
+    function startAutoRefresh(interval) {
         if (interval) clearInterval(interval);
 
         interval = setInterval(() => {
             if (currentChatId) {
-                loadChat(currentChatId, null, null, false);
+                loadChat(currentChatId, null, null, null, false);
             }
-        }, intervalTime);
+        }, interval);
     }
 
+    /**
+     * Function to send a message
+     * 
+     * @returns {void}
+     */
     function sendMessage() {
         const messageContent = document.getElementById('message-content').value;
         document.getElementById('send-message-btn').style.display = 'none';
         document.getElementById('send-message-loader').style.display = 'block';
         if (!messageContent) return;
 
+        // Send the message to the server
         fetch(`/chat/${currentChatId}/messages`, {
                 method: 'POST',
                 headers: {
@@ -229,6 +274,11 @@ function sendMessage() {
         document.getElementById('send-message-loader').style.display = 'none';
     }
 
+    /**
+     * Function to scroll to the bottom of the messages container
+     * 
+     * @returns {void}
+     */
     function scrollToBottom() {
         const messagesContainer = document.getElementById('messages');
         if (messagesContainer) {
@@ -236,13 +286,62 @@ function scrollToBottom() {
         }
     }
 
-function leaveChat() {
-    if (!currentChatId) {
-        alert("Aucune discussion sélectionnée.");
-        return;
+    /**
+     * Function to leave a chat
+     * 
+     * @returns {void} or response of the fetch
+     */
+    function leaveChat() {
+        if (!currentChatId) {
+            alert("Aucune discussion sélectionnée.");
+            return;
+        }
+
+        // Send the request to leave the chat
+        fetch(`/chat/${currentChatId}/leave`, {
+                method: 'DELETE',
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                }
+            })
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                } else {
+                    throw new Error("Impossible de quitter la conversation.");
+                }
+            })
+            .then(data => {
+                alert(data.message || "Vous avez quitté la conversation.");
+                currentChatId = null;
+
+                document.getElementById('chat-area').style.display = 'none';
+                document.getElementById('chat-placeholder').style.display = 'flex';
+
+                location.reload();
+            })
+            .catch(error => {
+                console.error("Erreur :", error);
+                alert("Une erreur s'est produite en essayant de quitter la conversation.");
+            });
     }
 
-    fetch(`/chat/${currentChatId}/leave`, {
+    /**
+     * Function to delete a message
+     * 
+     * @param {number} messageId The ID of the message
+     * @param {number} discussionId The ID of the discussion
+     * @returns {void} or response of the fetch
+     */
+    function deleteMessage(messageId, discussionId) {
+        if (!messageId || !discussionId) {
+            alert("Informations de message ou discussion manquantes.");
+            return;
+        }
+
+        // Send the request to delete the message
+        fetch(`/chat/${discussionId}/${messageId}/delete`, {
             method: 'DELETE',
             headers: {
                 'X-Requested-With': 'XMLHttpRequest',
@@ -250,11 +349,11 @@ function leaveChat() {
             }
         })
         .then(response => {
-            if (response.ok) {
-                return response.json();
-            } else {
-                throw new Error("Impossible de quitter la conversation.");
+            if (!response.ok) {
+                console.error("Erreur de suppression, statut:", response.status);
+                throw new Error("Impossible de supprimer le message.");
             }
+            return response.json();
         })
         .then(data => {
             currentChatId = null;
@@ -263,10 +362,15 @@ function leaveChat() {
             document.getElementById('chat-placeholder').style.display = 'flex';
 
             location.reload();
+            alert(data.message || "Message supprimé.");
+            const messageElement = document.getElementById(`message-div-${messageId}`);
+            if (messageElement) {
+                messageElement.remove();
+            }
         })
         .catch(error => {
-            console.error("Erreur :", error);
-            alert("Une erreur s'est produite en essayant de quitter la conversation.");
+            console.error("Erreur lors de la suppression :", error);
+            alert("Une erreur s'est produite lors de la suppression du message.");
         });
 }
 function leaveChatWithLoad()
@@ -340,5 +444,105 @@ function deleteMessageWithLoader(messageId, chatId) {
         });
 }
 
-    startAutoRefresh();
-</script>
+    /**
+     * Function to update the file name in the form
+     * 
+     * @returns {void}
+     */
+    function updateFileName() {
+        const fileInput = document.getElementById('file');
+        const fileInfo = document.getElementById('file-info');
+
+        if (fileInput.files.length > 0) {
+            const fileName = fileInput.files[0].name;
+            fileInfo.innerHTML = `<p class='text-green-400 font-medium'>Fichier sélectionné : ${fileName}</p>`;
+        }
+    }
+
+    /**
+     * Function to handle the drag over event for the file drop
+     * 
+     * @param {Event} event The event object
+     * @returns {void}
+     */
+    function handleDragOver(event) {
+        event.preventDefault();
+    }
+
+    /**
+     * Function to handle the drop event for the file drop
+     * 
+     * @param {Event} event The event object
+     * @returns {void}
+     */
+    function handleDrop(event) {
+        event.preventDefault();
+        const fileInput = document.getElementById('file');
+        const fileInfo = document.getElementById('file-info');
+
+        if (event.dataTransfer.files.length > 0) {
+            const file = event.dataTransfer.files[0];
+            fileInput.files = event.dataTransfer.files;
+            fileInfo.innerHTML = `<p class='text-green-400 font-medium'>Fichier sélectionné : ${file.name}</p>`;
+        }
+    }
+
+    /**
+     * Function to handle the capsule form
+     * 
+     * @returns {void}
+     */
+    function capsuleForm() {
+        return {
+            chatMessage: '',
+            file: null,
+            submitForm(event) {
+                const form = document.getElementById('create-file-modal-form');
+                // Check if the form is valid
+                if (!form.checkValidity()) {
+                    event.preventDefault();
+                    alert('Veuillez remplir tous les champs obligatoires.');
+                    return;
+                }
+
+                // Take the discussion ID (chatID) from the hidden input
+                const discussionId = document.getElementById('discussion-id').value;
+
+                // Create the object to send from the form data
+                const formData = new FormData(form);
+
+                // Send the request to create the capsule
+                fetch(`/chat/${discussionId}/capsule`, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest',
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    },
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.message.id) {
+                        // Close the modal and reset the form
+                        this.chatMessage = '';
+                        this.file = null;
+                        document.getElementById('file-info').innerHTML = `<p class='text-gray-300 font-medium'>Glissez et déposez votre fichier ici ou</p><p class='text-blue-400 underline'>cliquez pour sélectionner un fichier</p>`;
+                        document.getElementById('date-time').value = '';
+                        this.$dispatch('close');
+                    } else {
+                        console.log(data)
+                        alert('Erreur lors de l\'envoi de la capsule');
+                    }
+                })
+                .catch(error => {
+                    alert('Erreur lors de l\'envoi');
+                    console.error(error);
+                });
+            }
+        };
+    }
+
+    // Load the chat when the page is loaded (auto-refresh)
+    startAutoRefresh(interval);
+    </script>
+    
diff --git a/resources/views/friendships/index.blade.php b/resources/views/friendships/index.blade.php
index 17bf48c..9bdd7cd 100644
--- a/resources/views/friendships/index.blade.php
+++ b/resources/views/friendships/index.blade.php
@@ -38,11 +38,6 @@
 
                     <div class="flex space-x-2">
                         <!-- Boutons d'action en icônes -->
-                         
-                            <button>
-                                <img src="{{ asset('source/assets/images/message_friend_icon.png') }}" alt="Message" class="h-10 w-10">
-                            </button>
-                            
                             <form action="{{ route('friends.destroy', ['friend' => $friend->user_id == Auth::id() ? $friend->friend->id : $friend->user->id]) }}" method="POST" onsubmit="return confirm('Are you sure you want to remove this friend?');">
                                 @csrf
                                 @method('DELETE')
diff --git a/routes/web.php b/routes/web.php
index edd6be5..6c69d6c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,17 +7,17 @@
 use App\Http\Controllers\ChatController;
 
 Route::get('/', function () {
+    // check if the user is authenticated
     if (Auth::check()) {
         // call the controller ChatController method index
         return redirect()->route('dashboard');
     }
     else {
+        // if the user is not authenticated, return the login view
         return view('auth.login');
     }
 });
 
-
-
 Route::middleware(['auth', 'verified'])->group(function () {
     Route::get('/dashboard', [ChatController::class, 'index'])->name('dashboard');
     Route::get('/chat/{discussion}/messages', [ChatController::class, 'getMessages']);
@@ -34,9 +34,6 @@
     Route::post('/friends/{friendship_id}/accept', [FriendshipsController::class, 'accept'])->name('friends.accept');
     Route::post('/friends/{friendship_id}/decline', [FriendshipsController::class, 'decline'])->name('friends.decline');
     Route::post('/friends/{friend}/block', [FriendshipsController::class, 'block'])->name('friends.block');
-
-
 });
 
-
-require __DIR__.'/auth.php';
+require __DIR__.'/auth.php';
\ No newline at end of file