diff --git a/src/Controller/SortieController.php b/src/Controller/SortieController.php
index 45f8ccb..368d097 100644
--- a/src/Controller/SortieController.php
+++ b/src/Controller/SortieController.php
@@ -2,6 +2,7 @@
 
 namespace App\Controller;
 
+use App\Entity\Etat;
 use App\Entity\Sortie;
 use App\Form\SortieType;
 use App\Repository\EtatRepository;
@@ -202,4 +203,35 @@ class SortieController extends AbstractController
             'profile' => $userConnect,
         ]);
     }
+
+    #[Route('/cancel/{id}', name: 'cancel', methods: ['POST'])]
+    public function cancel(
+        string $id,
+        Request $request,
+        EntityManagerInterface $entityManager,
+        TokenStorageInterface $tokenStorage
+    ): Response {
+        $user = $tokenStorage->getToken()?->getUser();
+
+        $sortie = $entityManager->getRepository(Sortie::class)->find($id);
+
+        if (!$sortie || $sortie->getOrganisateur()->getIdParticipant() !== $user->getIdParticipant()) {
+            $this->addFlash('error', 'Vous n\'avez pas l\'autorisation d\'annuler cette sortie.');
+            return $this->redirectToRoute('home');
+        }
+
+        $motif = $request->request->get('motif');
+        if (!$motif) {
+            $this->addFlash('error', 'Le motif d\'annulation est obligatoire.');
+            return $this->redirectToRoute('sortie_view', ['id' => $id]);
+        }
+
+        $sortie->setMotifAnnul($motif);
+        $sortie->setEtat($entityManager->getRepository(Etat::class)->findOneBy(['libelle' => 'Annulée']));
+
+        $entityManager->flush();
+
+        $this->addFlash('success', 'La sortie a été annulée avec succès.');
+        return $this->redirectToRoute('home');
+    }
 }
diff --git a/src/Entity/Sortie.php b/src/Entity/Sortie.php
index 0a0d7ee..af83f62 100644
--- a/src/Entity/Sortie.php
+++ b/src/Entity/Sortie.php
@@ -29,7 +29,6 @@ class Sortie
     private ?int $duree = null;
 
     #[ORM\Column(type: Types::DATETIME_IMMUTABLE, nullable: true)]
-    #[Assert\GreaterThan("today")]
     private ?\DateTimeInterface $dateLimiteInscription = null;
 
     #[ORM\Column(nullable: true)]
diff --git a/src/Repository/SortieRepository.php b/src/Repository/SortieRepository.php
index f1135c2..da9b13f 100644
--- a/src/Repository/SortieRepository.php
+++ b/src/Repository/SortieRepository.php
@@ -17,45 +17,59 @@ class SortieRepository extends ServiceEntityRepository
         parent::__construct($registry, Sortie::class);
     }
 
-    public function findWithFilters($search, $siteId, $startDate, $endDate, $organisateur, $inscrit, $nonInscrit, $passees, $user)
+    public function findWithFilters($search, $siteId, $startDate, $endDate, $organisateur, $inscrit, $nonInscrit, $passees, $userConnect)
     {
-        $qb = $this->createQueryBuilder('s');
+        $qb = $this->createQueryBuilder('s')
+            ->leftJoin('s.etat', 'e')
+            ->addSelect('e')
+            ->leftJoin('s.participants', 'p')
+            ->addSelect('p')
+            ->where('e.libelle != :annulee')
+            ->setParameter('annulee', 'Annulée');
 
-        if ($search) {
+        // Filtre par nom
+        if (!empty($search)) {
             $qb->andWhere('s.nom LIKE :search')
                 ->setParameter('search', '%' . $search . '%');
         }
 
-        if ($siteId) {
+        // Filtre par site
+        if (!empty($siteId)) {
             $qb->andWhere('s.site = :siteId')
                 ->setParameter('siteId', $siteId);
         }
 
-        if ($startDate) {
+        // Filtre par date de début
+        if (!empty($startDate)) {
             $qb->andWhere('s.dateHeureDebut >= :startDate')
-                ->setParameter('startDate', new \DateTime($startDate));
+                ->setParameter('startDate', $startDate);
         }
 
-        if ($endDate) {
+        // Filtre par date de fin
+        if (!empty($endDate)) {
             $qb->andWhere('s.dateHeureDebut <= :endDate')
-                ->setParameter('endDate', new \DateTime($endDate));
+                ->setParameter('endDate', $endDate);
         }
 
-        if ($organisateur) {
-            $qb->andWhere('s.organisateur = :user')
-                ->setParameter('user', $user);
+        // Filtre par organisateur
+        if ($organisateur && $userConnect) {
+            $qb->andWhere('s.organisateur = :organisateur')
+                ->setParameter('organisateur', $userConnect);
         }
 
-        if ($inscrit) {
-            $qb->andWhere(':user MEMBER OF s.participants')
-                ->setParameter('user', $user);
+        // Filtre par inscription
+        if ($inscrit && $userConnect) {
+            $qb->andWhere(':userConnect MEMBER OF s.participants')
+                ->setParameter('userConnect', $userConnect);
         }
 
-        if ($nonInscrit) {
-            $qb->andWhere(':user NOT MEMBER OF s.participants')
-                ->setParameter('user', $user);
+        // Filtre par non-inscription
+        if ($nonInscrit && $userConnect) {
+            $qb->andWhere(':userConnect NOT MEMBER OF s.participants')
+                ->setParameter('userConnect', $userConnect);
         }
 
+        // Filtre par sorties passées
         if ($passees) {
             $qb->andWhere('s.dateHeureDebut < :now')
                 ->setParameter('now', new \DateTime());
@@ -67,6 +81,7 @@ class SortieRepository extends ServiceEntityRepository
         return $qb->getQuery()->getResult();
     }
 
+
     public function findAllSites()
     {
         return $this->getEntityManager()
diff --git a/templates/main/index.html.twig b/templates/main/index.html.twig
index 3f7c400..c48a764 100644
--- a/templates/main/index.html.twig
+++ b/templates/main/index.html.twig
@@ -5,16 +5,46 @@
         <title>Liste des sorties</title>
         {% block stylesheets %}
             {{ encore_entry_link_tags('app') }}
+            <style>
+                .pin-creee {
+                    background-color: #4CAF50;
+                }
+                .pin-ouverte {
+                    background-color: #2196F3;
+                }
+                .pin-archivee {
+                    background-color: #FF9800;
+                }
+                .pin-en-cours {
+                    background-color: #FFC107;
+                }
+                .pin-terminee {
+                    background-color: #9E9E9E;
+                }
+                .pin-annulee {
+                    background-color: #f44336;
+                }
+                .pin-default {
+                    background-color: #E0E0E0;
+                }
+                .pin {
+                    display: inline-block;
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 50%;
+                    margin-right: 8px;
+                }
+            </style>
         {% endblock %}
     </head>
 {% endblock %}
 
 {% block content %}
-    <div class="container mx-auto p-6 bg-gray-50 rounded-lg shadow-lg mt-6">
-        <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">🎉 Liste des sorties</h1>
+    <div class="container mx-auto p-4 sm:p-6 bg-gray-50 rounded-lg shadow-lg mt-4 sm:mt-6">
+        <h1 class="text-2xl sm:text-3xl font-bold text-center text-gray-800 mb-6 sm:mb-8">🎉 Liste des sorties</h1>
 
         <form method="GET" action="{{ path('home') }}" class="bg-white rounded-lg shadow-md p-4 mb-6">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
                 <div>
                     <label for="search" class="block text-sm font-medium text-gray-700">🔍 Recherche</label>
                     <input type="text" name="search" id="search" value="{{ app.request.query.get('search', '') }}"
@@ -47,7 +77,7 @@
                 </div>
             </div>
 
-            <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                 <div class="flex items-center">
                     <input type="checkbox" name="organisateur" id="organisateur" value="1"
                            {% if app.request.query.get('organisateur') %}checked{% endif %}
@@ -84,16 +114,35 @@
             </div>
         </form>
 
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
-            <a href="/sortie/creates">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
+            <a href="/sortie/creates" class="hidden sm:block">
                 <div class="bg-white rounded-lg shadow-md p-4 text-center">
-                    <img src="/img/add.svg" alt="Créer une sortie" class="w-40 h-40 mx-auto mb-4">
+                    <img src="/img/add.svg" alt="Créer une sortie" class="w-24 h-24 mx-auto mb-4">
                     <h2 class="text-lg font-semibold">Créer une sortie</h2>
                 </div>
             </a>
             {% for sortie in sorties %}
                 <div class="bg-white rounded-lg shadow-md p-4">
-                    <h2 class="text-lg font-semibold text-gray-800">{{ sortie.nom }}</h2>
+                    <div class="flex items-center mb-2">
+                        <div class="pin
+                            {% if sortie.etat.libelle == 'Créée' %}
+                                pin-creee
+                            {% elseif sortie.etat.libelle == 'Ouverte' %}
+                                pin-ouverte
+                            {% elseif sortie.etat.libelle == 'Archivée' %}
+                                pin-archivee
+                            {% elseif sortie.etat.libelle == 'En cours' %}
+                                pin-en-cours
+                            {% elseif sortie.etat.libelle == 'Terminée' %}
+                                pin-terminee
+                            {% elseif sortie.etat.libelle == 'Annulée' %}
+                                pin-annulee
+                            {% else %}
+                                pin-default
+                            {% endif %}
+                        "></div>
+                        <h2 class="text-lg font-semibold text-gray-800">{{ sortie.nom }}</h2>
+                    </div>
                     <p class="mt-2 text-gray-600">
                         <strong>Date de début :</strong> {{ sortie.dateHeureDebut|date('d/m/Y H:i') }}<br>
                         <strong>Durée :</strong> {{ sortie.duree }} minutes<br>
@@ -105,8 +154,30 @@
                     </div>
                 </div>
             {% else %}
-                <p class="text-gray-600 text-center col-span-6">Aucune sortie ne correspond à vos critères.</p>
+                <p class="text-gray-600 text-center col-span-4">Aucune sortie ne correspond à vos critères.</p>
             {% endfor %}
         </div>
     </div>
+
+    {% block javascripts %}
+        {{ encore_entry_script_tags('app') }}
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                const inscritCheckbox = document.getElementById('inscrit');
+                const nonInscritCheckbox = document.getElementById('non_inscrit');
+
+                inscritCheckbox.addEventListener('change', () => {
+                    if (inscritCheckbox.checked) {
+                        nonInscritCheckbox.checked = false;
+                    }
+                });
+
+                nonInscritCheckbox.addEventListener('change', () => {
+                    if (nonInscritCheckbox.checked) {
+                        inscritCheckbox.checked = false;
+                    }
+                });
+            });
+        </script>
+    {% endblock %}
 {% endblock %}
diff --git a/templates/sortie/view.html.twig b/templates/sortie/view.html.twig
index 7a28e22..397f073 100644
--- a/templates/sortie/view.html.twig
+++ b/templates/sortie/view.html.twig
@@ -7,6 +7,11 @@
         {% block stylesheets %}
             {{ encore_entry_link_tags('app') }}
             <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+            <style>
+                #delete-modal {
+                    z-index: 1050;
+                }
+            </style>
         {% endblock %}
     </head>
 {% endblock %}
@@ -84,8 +89,14 @@
                     </div>
                 {% endif %}
 
-                {% if app.user and app.user.idParticipant == sortie.organisateur.idParticipant %}
-                    <div class="mt-6 flex justify-end">
+                {% if app.user and app.user.idParticipant == sortie.organisateur.idParticipant and sortie.etat.libelle == 'Créée' %}
+                    <div class="mt-6 flex justify-end space-x-4">
+                        <button
+                                type="button"
+                                id="open-delete-modal"
+                                class="px-6 py-3 bg-red-500 text-white rounded-md shadow hover:bg-red-600">
+                            ❌ Annuler la sortie
+                        </button>
                         <a href="{{ path('sortie_edit', { id: sortie.idSortie }) }}"
                            class="px-6 py-3 bg-yellow-500 text-white rounded-md shadow hover:bg-yellow-600">
                             ✏️ Modifier la sortie
@@ -108,6 +119,37 @@
             </div>
         </div>
 
+        <!-- Modale pour annuler la sortie -->
+        <div id="delete-modal" class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 hidden">
+            <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-lg">
+                <h2 class="text-xl font-bold mb-4">Annuler la sortie</h2>
+                <form action="{{ path('sortie_cancel', { id: sortie.idSortie }) }}" method="post">
+                    <div class="mb-4">
+                        <label for="motif" class="block text-sm font-medium text-gray-700">Motif d'annulation :</label>
+                        <textarea
+                                name="motif"
+                                id="motif"
+                                rows="4"
+                                class="block w-full mt-1 p-2 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"
+                                required></textarea>
+                    </div>
+                    <div class="flex justify-end space-x-4">
+                        <button
+                                type="button"
+                                id="cancel-modal"
+                                class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">
+                            Annuler
+                        </button>
+                        <button
+                                type="submit"
+                                class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">
+                            Confirmer l'annulation
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
         <div class="flex justify-center mt-8">
             <a href="{{ path('home') }}" class="px-6 py-3 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600">
                 🔙 Retour à l'accueil
@@ -126,18 +168,28 @@
                     maxZoom: 19,
                 }).addTo(map);
 
-                // Définir l'icône personnalisée avec une taille plus grande
                 const customIcon = L.icon({
-                    iconUrl: '/img/pointeur.png', // Chemin de l'image
-                    iconSize: [100, 100], // Taille ajustée [largeur, hauteur]
-                    iconAnchor: [50, 100], // Point correspondant à la base de l'icône [x, y]
-                    popupAnchor: [0, -100], // Position du popup par rapport à l'icône
+                    iconUrl: '/img/pointeur.png',
+                    iconSize: [100, 100],
+                    iconAnchor: [50, 100],
+                    popupAnchor: [0, -100],
                 });
 
-                // Ajouter un marqueur avec l'icône personnalisée
                 L.marker([{{ sortie.lieu.latitude }}, {{ sortie.lieu.longitude }}], { icon: customIcon }).addTo(map)
                     .bindPopup("{{ sortie.lieu.nom }}")
                     .openPopup();
+
+                const openModalButton = document.getElementById('open-delete-modal');
+                const cancelModalButton = document.getElementById('cancel-modal');
+                const deleteModal = document.getElementById('delete-modal');
+
+                openModalButton?.addEventListener('click', () => {
+                    deleteModal.classList.remove('hidden');
+                });
+
+                cancelModalButton?.addEventListener('click', () => {
+                    deleteModal.classList.add('hidden');
+                });
             });
         </script>
     {% endblock %}