diff --git a/Vue/Gctypegarant/index.php b/Vue/Gctypegarant/index.php
index 34312bec..21a0c2a2 100755
--- a/Vue/Gctypegarant/index.php
+++ b/Vue/Gctypegarant/index.php
@@ -1,87 +1,65 @@
-<?php 
-    $nbligne = count($typesgarant); 
-?>
-
-<div class="card border-0 shadow-sm overflow-hidden animate__animated animate__fadeIn">
-    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
-        <h6 class="mb-0 fw-bold text-muted text-uppercase small">
-            <i class="fas fa-tags me-2 text-primary"></i><?= _("Types de Porteur de Risque") ?>
-        </h6>
-        <span class="badge bg-primary-ghost text-primary rounded-pill px-3 py-2 fw-bold">
-            <?= $nbligne ?> <?= ($nbligne > 1) ? _("Lignes") : _("Ligne") ?>
-        </span>
+<div class="page-content">
+    <div class="header-section mb-4">
+        <div class="d-flex align-items-center bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
+            <div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
+                <i class="fas fa-tags fs-4"></i>
+            </div>
+            <div>
+                <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Types de Porteur de Risque") ?></h4>
+                <p class="text-muted small mb-0"><?= _("Configuration des catégories d'entités garantes") ?></p>
+            </div>
+        </div>
     </div>
 
-    <div class="table-responsive">
-        <table id="tableTypesGarant" class="table table-hover align-middle mb-0" style="font-size: 9pt;">
-            <thead class="bg-light">
-                <tr>
-                    <th class="text-center py-3" width="8%">#</th>
-                    <th class="text-center py-3" width="15%"><?= _("Code") ?></th>
-                    <th class="py-3" width="57%"><?= _("Libellé") ?></th>
-                    <th class="text-center py-3" width="20%"><?= _("Actions") ?></th>
-                </tr>
-            </thead>
-            <tbody>
-                <?php 
-                $i = 0;
-                foreach ($typesgarant as $v): 
-                    $idData = $this->nettoyer($v['id']);
-                    $code = $this->nettoyer($v['codeTypeGarant']);
-                    $libelle = $this->nettoyer($v['libelle']);
-                ?>
-                <tr>
-                    <td class="text-center text-muted fw-bold"><?= ++$i; ?></td>
-                    <td class="text-center">
-                        <code class="fw-bold text-primary bg-light px-2 py-1 rounded"><?= $code ?></code>
-                    </td>
-                    <td class="fw-bold text-dark text-uppercase"><?= $libelle ?></td>
-                    <td class="text-center">
-                        <div class="d-flex justify-content-center gap-2">
-                            <button class="btn btn-outline-primary btn-sm rounded-pill px-3 shadow-xs" 
-                                    type="button" 
-                                    onclick="editgctypegarant(<?= $idData ?>);">
-                                <i class="fas fa-edit me-1"></i> <?= _("Modifier") ?>
-                            </button>
-                            
-                            <button class="btn btn-light-ghost btn-sm rounded-pill text-danger" 
-                                    type="button" 
-                                    onclick="supprimeLigneTypeGarant(<?= $idData ?>);"
-                                    title="<?= _("Supprimer") ?>">
-                                <i class="fas fa-trash-alt"></i>
-                            </button>
-                        </div>
-                    </td>
-                </tr>
-                <?php endforeach; ?>
-            </tbody>
-        </table>
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            </div>
+        <button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm fw-bold" onclick="addgctypegarant();">
+            <i class="fas fa-plus-circle me-2"></i><?= _("Nouveau Type") ?>
+        </button>
+    </div>
+
+    <div id="div_lister_table">
+        <div class="text-center p-5 bg-white rounded shadow-sm border border-dashed">
+            <div class="spinner-border text-primary mb-3" role="status"></div>
+            <p class="text-muted fw-bold"><?= _("Chargement de la liste...") ?></p>
+        </div>
     </div>
 </div>
 
-<input type="hidden" id="nbligne_info" value="<?= $nbligne ?>">
+<div id="div_add_typegarant" class="modal fade" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content border-0 shadow-lg" id="content_add_typegarant">
+            </div>
+    </div>
+</div>
+
+<div id="div_edit_typegarant" class="modal fade" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content border-0 shadow-lg" id="content_edit_typegarant">
+            </div>
+    </div>
+</div>
 
 <style>
-    /* Spécificités Neutral Pro pour ce tableau */
-    #tableTypesGarant thead th {
-        border-bottom: 2px solid #f1f4f6;
-        color: #6c757d;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+    .border-dashed { border-style: dashed !important; border-width: 2px; }
     
-    .bg-primary-ghost { 
-        background-color: rgba(33, 46, 83, 0.08) !important; 
+    /* Animation pour les modales */
+    .modal.fade .modal-dialog {
+        transition: transform 0.3s ease-out;
+        transform: scale(0.95);
     }
+    .modal.show .modal-dialog {
+        transform: scale(1);
+    }
+</style>
 
-    .btn-light-ghost:hover {
-        background-color: rgba(220, 53, 69, 0.1);
-        color: #dc3545 !important;
-    }
-
-    #tableTypesGarant tbody tr:hover {
-        background-color: rgba(33, 46, 83, 0.02) !important;
-        transition: all 0.2s ease;
-    }
-</style>
\ No newline at end of file
+<script>
+    $(document).ready(function() {
+        // Chargement initial de la liste
+        if (typeof actualiser_liste_type_garant === 'function') {
+            actualiser_liste_type_garant();
+        }
+    });
+</script>
\ No newline at end of file