diff --git a/gestion_employe/static/gestion_employe/js/index.js b/gestion_employe/static/gestion_employe/js/index.js
index 95eb1d8..950142e 100644
--- a/gestion_employe/static/gestion_employe/js/index.js
+++ b/gestion_employe/static/gestion_employe/js/index.js
@@ -260,4 +260,77 @@ const listeContratExpirant = new Tabulator("#listeContratExpirant", {
         },
     ],
     ajaxURL: $("boutonContratExpirants").dataset.urlexpirants,
-})
\ No newline at end of file
+})
+
+
+
+let tabContrats = null;
+
+document.getElementById("modalContratsEmploye")
+.addEventListener("show.bs.modal", function () {
+
+    const employeId = document.getElementById("detail-id").value;
+
+    console.log("Employe ID :", employeId);
+
+    if (!employeId) {
+        alert("Aucun employé sélectionné");
+        return;
+    }
+
+    fetch(`/employé/employe/${employeId}/contrats/`)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error("Erreur HTTP " + response.status);
+            }
+            return response.json();
+        })
+        .then(data => {
+
+            document.getElementById("nom-employe-contrat").innerText =
+                data.employe;
+
+            if (tabContrats) {
+                tabContrats.destroy();
+            }
+
+            tabContrats = new Tabulator(
+                "#table-contrats-tabulator",
+                {
+                    data: data.contrats,
+                    layout: "fitColumns",
+                    placeholder: "Aucun contrat",
+
+                    columns: [
+                        { title: "Numéro", field: "numero_contrat" },
+                        { title: "Type", field: "type_contrat" },
+                        { title: "Date début", field: "date_debut" },
+                        { title: "Date fin", field: "date_fin" },
+                        { title: "Salaire", field: "salaire_mensuel" },
+                        { title: "Statut", field: "statut" },
+
+                        {
+                            title: "Contrat",
+                            field: "fichier",
+                            formatter: function(cell) {
+                                const url = cell.getValue();
+
+                                if (!url) {
+                                    return "<span class='text-danger'>Aucun fichier</span>";
+                                }
+
+                                return `<a href="${url}" target="_blank" class="btn btn-sm btn-primary">
+                                            <i class="bi bi-file-earmark-pdf"></i> Ouvrir
+                                        </a>`;
+                            }
+                        }
+                    ]
+                }
+            );
+        })
+        .catch(error => {
+            console.error("Erreur :", error);
+        });
+});
+
+
diff --git a/gestion_employe/templates/gestion_employe/index.html b/gestion_employe/templates/gestion_employe/index.html
index 825dec9..2330546 100644
--- a/gestion_employe/templates/gestion_employe/index.html
+++ b/gestion_employe/templates/gestion_employe/index.html
@@ -58,6 +58,7 @@
 {% block 'modal' %}
     {% include "gestion_employe/parts/modalDetailEmploye.html" %}
     {% include "gestion_employe/parts/modalCreationContrat.html" %}
+     {% include "gestion_employe/parts/modalContratsEmploye.html" %}
     {% include "gestion_employe/parts/modalAffectationProjet.html" %}
     {% include "gestion_employe/parts/modalDocument.html" %}
     {% include "gestion_employe/parts/modalListeContratExpirants.html" %}
diff --git a/gestion_employe/templates/gestion_employe/parts/modalContratsEmploye.html b/gestion_employe/templates/gestion_employe/parts/modalContratsEmploye.html
new file mode 100644
index 0000000..c26a2e1
--- /dev/null
+++ b/gestion_employe/templates/gestion_employe/parts/modalContratsEmploye.html
@@ -0,0 +1,21 @@
+<div class="modal fade" id="modalContratsEmploye" tabindex="-1">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <h5 class="modal-title">
+          Contrats de <span id="nom-employe-contrat"></span>
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+
+      <div class="modal-body">
+
+        <div id="table-contrats-tabulator"></div>
+
+      </div>
+
+    </div>
+  </div>
+</div>
+
diff --git a/gestion_employe/templates/gestion_employe/parts/modalDetailEmploye.html b/gestion_employe/templates/gestion_employe/parts/modalDetailEmploye.html
index 187ef49..216defe 100644
--- a/gestion_employe/templates/gestion_employe/parts/modalDetailEmploye.html
+++ b/gestion_employe/templates/gestion_employe/parts/modalDetailEmploye.html
@@ -93,8 +93,8 @@
                             </h5>
                             {% if user|has_group:"ressource_humaine"  %}
                                 <div>
-                                    <button class="btn btn-secondary" disabled>
-                                        <i class="bi bi-file-earmark-lock"></i> Contrat actif
+                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalContratsEmploye">
+                                    Liste contrat
                                     </button>
                                     <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalContrat{{ item.employe.id }}">
                                         <i class="bi bi-file-earmark-text"></i> Créer contrat
diff --git a/gestion_employe/urls.py b/gestion_employe/urls.py
index e111389..157b746 100644
--- a/gestion_employe/urls.py
+++ b/gestion_employe/urls.py
@@ -29,11 +29,17 @@ urlpatterns = [
         views.creation_contrat,
         name='creation-contrat'
     ),
+    path(
+        'employe/<int:employe_id>/contrats/'
+        , views.contrats_employe,
+          name="contrats-employe"
+          ),
     path(
         'contrat/supprimer/',
         views.suppression_contrat,
         name='supprimer-contrat'
     ),
+    
     path(
         'Affectation/affectation/',
         views.affecter_employe_projet,
diff --git a/gestion_employe/views.py b/gestion_employe/views.py
index df986b7..d14c41c 100644
--- a/gestion_employe/views.py
+++ b/gestion_employe/views.py
@@ -289,6 +289,45 @@ def creation_contrat(request):
         'contrat_form': form
     })
 
+
+@login_required
+def contrats_employe(request, employe_id):
+
+    try:
+        employe = Employe.objects.get(id=employe_id)
+    except Employe.DoesNotExist:
+        return JsonResponse(
+            {"error": "Employé non trouvé"},
+            status=404
+        )
+
+    contrats = Contrat.objects.filter(
+        employe=employe
+    ).order_by("-date_debut")
+
+    data = [
+        {
+            "id": contrat.id,
+            "numero_contrat": contrat.numero_contrat,
+            "type_contrat": dict(Contrat.TYPE_CONTRAT).get(
+                contrat.type_contrat
+            ),
+            "date_debut": contrat.date_debut.strftime("%Y-%m-%d"),
+            "date_fin": contrat.date_fin.strftime("%Y-%m-%d") if contrat.date_fin else "",
+            "salaire_mensuel": contrat.salaire_mensuel,
+            "statut": dict(Contrat.STATUT_CONTRAT).get(
+                contrat.statut
+            ),
+            "fichier": contrat.fichier_contrat.url if contrat.fichier_contrat else "",
+
+        }
+        for contrat in contrats
+    ]
+
+    return JsonResponse({
+        "employe": employe.user.get_full_name(),
+        "contrats": data
+    })
 @login_required
 def enregistrer_detail_employe(request):
     """Vue pour permettre à un utilisateur de modifier les détails d'un employé via une requête AJAX"""
@@ -307,6 +346,7 @@ def enregistrer_detail_employe(request):
     else:
         return JsonResponse({"message": "Méthode non autorisée."}, status=405)
     
+    
 @login_required
 def liste_employe(request):
     """ Vue pour retourner la liste de tous les employés """