diff --git a/Vue/Gctypegarant/index.php b/Vue/Gctypegarant/index.php
index 33e8bfbc..34312bec 100755
--- a/Vue/Gctypegarant/index.php
+++ b/Vue/Gctypegarant/index.php
@@ -1,49 +1,87 @@
-<?php $this->titre = "INTER SANTE - TYPE GARANT"; ?>
+<?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>
 
-
-<legend> <?= _("TYPES DE GARANT") ?> </legend>
-
-<div id="div_lister_table">
-	<table class="table table-striped table-bordered table-hover table-condensed table-responsive tabspeciale compact">
-		<thead>
-			<tr>
-				<th style="text-align:center" > <?= _("N°") ?> </th>
-				<th style="text-align:center" > <?= _("Code") ?> </th>
-				<th style="text-align:center" > <?= _("Libellé") ?> </th>
-				<th style="text-align:center" > <?= _("Action") ?> </th>
-				<!--<th style="text-align:center" > <?= _("Supprimer") ?> </th>-->
-			</tr>
-		</thead>
-		<tbody>
-			<?php $i = 0;?>
-			<?php 
-				foreach ($typesgarant as $v): 
-				$idData = $this->nettoyer($v['id']);
-			?>
-				<tr>
-					<td align="center" width="5%"><?= ++$i; ?></td>
-					<td align="center" width="10%"><?= $this->nettoyer($v['codeTypeGarant']); ?></td>
-					<td width="50%"><?= $this->nettoyer($v['libelle']); ?></td>
-					<td class="text-center" width="10%">
-						<button class = "form-control btn btn-primary" type="button" id="btn-modifier" name="btn-modifier"
-						style="font-size:10pt;"	onclick="JAVASCRIPT:editgctypegarant(<?= $idData; ?>);"><?= _("Modifier") ?></button>
-					</td>
-					<!--
-					<td class="text-center" width="10%">
-						<button class = "form-control btn-danger" type="button" id="btn-supprimer" name="btn-supprimer"
-						style="font-size:10pt;"	onclick="JAVASCRIPT:supprimeLigneTypeGarant(<?= $idData; ?>)" >Supprimer</button>
-					</td>
-					-->
-				</tr>
-			<?php endforeach; ?>
-		</tbody>
-	</table> 
+    <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>
 </div>
 
-<div id="div_add_typegarant" class="modal fade">
+<input type="hidden" id="nbligne_info" value="<?= $nbligne ?>">
 
-</div>
-<div id="div_edit_typegarant" class="modal fade">
+<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; 
+    }
 
-</div>
\ No newline at end of file
+    .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