diff --git a/Vue/Paramprod/index.php b/Vue/Paramprod/index.php
index 9abfabcc..77a84987 100755
--- a/Vue/Paramprod/index.php
+++ b/Vue/Paramprod/index.php
@@ -1,132 +1,91 @@
-<?php $this->titre = "INTER SANTE - Paramètres Production"; ?>
+<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-cog fs-4"></i>
+            </div>
+            <div>
+                <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Paramètres de Production") ?></h4>
+                <p class="text-muted small mb-0"><?= _("Configuration des règles métiers, produits et réseaux") ?></p>
+            </div>
+        </div>
+    </div>
+
+    <div class="row g-3">
+        <?php
+        $menus = [
+            ['url' => 'Gcassureur/', 'icon' => 'fa-user-shield', 'title' => _("Garants"), 'desc' => _("Gestion des porteurs de risque")],
+            ['url' => 'Produits/', 'icon' => 'fa-box', 'title' => _("Produits par Garant"), 'desc' => _("Définition des produits d'assurance")],
+            ['url' => 'Collegetype/', 'icon' => 'fa-th', 'title' => _("Collège type"), 'desc' => _("Types de collèges de bénéficiaires")],
+            ['url' => 'Reseausoins/', 'icon' => 'fa-hospital', 'title' => _("Réseaux de soins"), 'desc' => _("Gestion des centres et conventions")],
+            ['url' => 'Produitreseau/', 'icon' => 'fa-network-wired', 'title' => _("Réseaux par produit"), 'desc' => _("Affectation des soins aux produits")],
+            ['url' => 'Baremepriseencharge/', 'icon' => 'fa-calculator', 'title' => _("Barème de PEC"), 'desc' => _("Grilles de prise en charge initiales")],
+            ['url' => 'Paysetendueterritoire/', 'icon' => 'fa-globe', 'title' => _("Étendu territoire"), 'desc' => _("Pays par zone géographique")],
+            ['url' => 'Tranchesaccessoires/', 'icon' => 'fa-th-list', 'title' => _("Grille accessoires"), 'desc' => _("Configuration des frais accessoires")],
+            ['url' => 'Tableauajustementprimes/', 'icon' => 'fa-chart-line', 'title' => _("Taux d'ajustement"), 'desc' => _("Grille des ajustements de primes")]
+        ];
+
+        foreach ($menus as $m): ?>
+            <div class="col-md-6 col-lg-4">
+                <a href="<?= $m['url'] ?>" class="text-decoration-none h-100 d-block">
+                    <div class="card h-100 border-0 shadow-sm nav-card-modern transition-all">
+                        <div class="card-body p-4">
+                            <div class="d-flex align-items-center">
+                                <div class="icon-box bg-light text-primary rounded-3 me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
+                                    <i class="fas <?= $m['icon'] ?> fs-4"></i>
+                                </div>
+                                <div class="flex-grow-1">
+                                    <h6 class="fw-bold mb-1 text-dark text-uppercase small"><?= $m['title'] ?></h6>
+                                    <p class="text-muted small mb-0"><?= $m['desc'] ?></p>
+                                </div>
+                                <div class="ms-2 text-primary opacity-25 arrow-icon">
+                                    <i class="fas fa-chevron-right"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        <?php endforeach; ?>
+    </div>
+</div>
 
 <style>
-.card {  
-	background: white;  
-	border-radius: 8px;  
-	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
-	margin: 10px;  
-	padding: 15px;  
-	transition: transform 0.2s;  
-}  
+    /* Design System Neutral Pro - Navigation */
+    .nav-card-modern {
+        border-radius: 12px;
+        background-color: #ffffff;
+    }
 
-.card:hover {  
-	transform: scale(1.02); 
-	background-color: #dcdcdc;
-}  
+    .nav-card-modern:hover {
+        background-color: #f8f9fa;
+        transform: translateY(-3px);
+        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05) !important;
+    }
 
-.card-content {  
-	display: flex;  
-	justify-content: space-between;  
-	align-items: center;  
-}  
+    .nav-card-modern:hover .icon-box {
+        background-color: #212e53 !important; /* Couleur primaire */
+        color: #ffffff !important;
+    }
 
-.text {  
-	flex: 1;  
-	margin-left: 10px; 
-	font-size: 13pt;
-}  
+    .nav-card-modern:hover .arrow-icon {
+        opacity: 1 !important;
+        transform: translateX(3px);
+    }
 
-.card a {  
-	text-decoration: none;  
-	color: black;  
-	width: 100%;  
-}  
+    .transition-all {
+        transition: all 0.3s ease-in-out;
+    }
 
-.card a:hover{  
-	 color: #007bff;  
-} 
+    .bg-primary-ghost {
+        background-color: rgba(33, 46, 83, 0.08);
+    }
 
-</style>
+    .icon-box {
+        transition: all 0.3s ease;
+    }
 
-<legend ><?= _("PARAMETRES DE PRODUCTION") ?></legend>
-
-<div class="card">  
-	<a href="Gcassureur/">  
-		<div class="card-content">  
-			<i class="fas fa-user-shield"></i>  
-			<span class="text"> <?= _("Garants") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div>
-
-<div class="card">  
-	<a href="Produits/">  
-		<div class="card-content">  
-			<i class="fas fa-box"></i>  
-			<span class="text"> <?= _("Produits par Garant") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div>
-
-<div class="card">  
-	<a href="Collegetype/">  
-		<div class="card-content">  
-			<i class="fas fa-th"></i>  
-			<span class="text"> <?= _("Collège type") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div>
-
-<div class="card">  
-	<a href="Reseausoins/">  
-		<div class="card-content">  
-			<i class="fas fa-hospital"></i>  
-			<span class="text"> <?= _("Réseaux de soins de santé") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div>
-
-<div class="card">  
-	<a href="Produitreseau/">  
-		<div class="card-content">  
-			<i class="fas fa-network-wired"></i>  
-			<span class="text"> <?= _("Réseaux de soins par produit") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div> 
-
-<div class="card">  
-	<a href="Baremepriseencharge/">  
-		<div class="card-content">  
-			<i class="fas fa-calculator"></i>  
-			<span class="text"> <?= _("Barème de prise en charge initial par produit") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div>
-
-<div class="card">  
-	<a href="Paysetendueterritoire/">  
-		<div class="card-content">  
-			<i class="fas fa-globe"></i>  
-			<span class="text"> <?= _("Pays par étendu de territoire") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div>
-
-<div class="card">  
-	<a href="Tranchesaccessoires/">  
-		<div class="card-content">  
-			<i class="fas fa-th-list"></i>  
-			<span class="text"> <?= _("Grille des accessoires") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div>
-
-<div class="card">  
-	<a href="Tableauajustementprimes/">  
-		<div class="card-content">  
-			<i class="fas fa-chart-line"></i>  
-			<span class="text"> <?= _("Grille des taux d'ajustement") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div>
\ No newline at end of file
+    .arrow-icon {
+        transition: all 0.3s ease;
+    }
+</style>
\ No newline at end of file