diff --git a/Vue/Tablesreference/index.php b/Vue/Tablesreference/index.php
index 7b7976e5..3f621691 100755
--- a/Vue/Tablesreference/index.php
+++ b/Vue/Tablesreference/index.php
@@ -1,58 +1,77 @@
-<?php $this->titre = "INTER SANTE - Tables de Référence"; ?>
+<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-database fs-4"></i>
+            </div>
+            <div>
+                <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Tables de Référence") ?></h4>
+                <p class="text-muted small mb-0"><?= _("Configuration des listes de données") ?></p>
+            </div>
+        </div>
+    </div>
 
+    <div class="card border-0 shadow-sm mb-4" style="border-radius: var(--radius-md);">
+        <div class="card-body p-4">
+            <div class="row align-items-center">
+                <div class="col-lg-3">
+                    <h6 class="fw-bold text-muted mb-lg-0 mb-3 small text-uppercase">
+                        <i class="fas fa-filter me-2"></i><?= _("Filtrer par Module") ?>
+                    </h6>
+                </div>
+                <div class="col-lg-9 text-lg-end">
+                    <div class="btn-group w-100 shadow-xs" role="group">
+                        <?php 
+                        $modules = est_anglophone() ? 
+                            [1 => 'General', 2 => 'Production', 3 => 'Medical and Claims', 5 => 'Accounting'] : 
+                            [1 => 'Générale', 2 => 'Production', 3 => 'Médical et Sinistre', 5 => 'Comptabilité'];
+                        
+                        foreach($modules as $val => $libelle): ?>
+                            <input type="radio" class="btn-check" name="numeroTable" id="btnTable<?= $val ?>" value="<?= $val ?>" <?= $val == 1 ? 'checked' : '' ?> autocomplete="off" onClick="filtreTableReference(this.value);">
+                            <label class="btn btn-outline-primary py-2 fw-medium" for="btnTable<?= $val ?>"><?= $libelle ?></label>
+                        <?php endforeach; ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<legend> <?= _("Tables de référence") ?> </legend>
-<table width= "100%" class="table-responsive" id="tabfiltre">
-	<tbody>
-		<tr>
-			<td style="font-size:15pt;" width="20%" class="text-center"><?= _("Sélectionner une option") ?></td>
-			<td class="text-center" style="font-size:12pt;">
-			
-				<?php if (est_anglophone()) : ?>
-					<INPUT type="radio" id="numeroTable1" name="numeroTable" value="1" checked onClick="filtreTableReference($('#numeroTable1').val());"><label class="inline" for="general">General</label>
-					<INPUT type="radio" id="numeroTable2" name="numeroTable" value="2" onClick="filtreTableReference($('#numeroTable2').val());"><label class="inline" for="production">Production</label>
-					<INPUT type="radio" id="numeroTable3" name="numeroTable" value="3" onClick="filtreTableReference($('#numeroTable3').val());"><label class="inline" for="medical">Medical and Claims</label>
-					<INPUT type="radio" id="numeroTable5" name="numeroTable" value="5" onClick="filtreTableReference($('#numeroTable5').val());"><label class="inline" for="comptabilite">Accounting</label>
-					
-				<?php else: ?>
-					<INPUT type="radio" id="numeroTable1" name="numeroTable" value="1" checked onClick="filtreTableReference($('#numeroTable1').val());"><label class="inline" for="general">Générale</label>
-					<INPUT type="radio" id="numeroTable2" name="numeroTable" value="2" onClick="filtreTableReference($('#numeroTable2').val());"><label class="inline" for="production">Production</label>
-					<INPUT type="radio" id="numeroTable3" name="numeroTable" value="3" onClick="filtreTableReference($('#numeroTable3').val());"><label class="inline" for="medical">Médical et Sinistre</label>
-					<INPUT type="radio" id="numeroTable5" name="numeroTable" value="5" onClick="filtreTableReference($('#numeroTable5').val());"><label class="inline" for="comptabilite">Comptabilité</label>
-					
-				<?php endif; ?> 
-			
-				
-			</td>
-		</tr>
-	</tbody>
-</table>
-<table class="table table-responsive table-condensed">
-	<tbody>	
-		<tr> 
-			<td class="text-center">
-				<div id="div_listetables">
-					<select style="font-size:15pt;" name="listetables" id="listetables" class="form-control selectpicker" data-live-search="true" onchange="JAVASCRIPT:chargerFichiersTable();" autofocus>
-						<?= liste_options($autrestables,'',false) ?>
-					</select>
-				</div>
-			</td>
-		</tr>
-	</tbody>
-</table>
+    <div class="card border-0 shadow-sm mb-4">
+        <div class="card-body p-3 bg-light-subtle rounded border border-primary-subtle border-dashed">
+            <div class="row align-items-center">
+                <div class="col-md-2 text-md-end text-primary fw-bold small">
+                    <?= _("Table à consulter") ?> :
+                </div>
+                <div class="col-md-10" id="div_listetables">
+                    <select name="listetables" id="listetables" class="form-control selectpicker" data-live-search="true" onchange="chargerFichiersTable();" autofocus>
+                        <?= liste_options($autrestables, '', false) ?>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<div id="div_fichiers_table">
+    <div class="row g-4">
+        <div class="col-lg-12 mb-2">
+            <div id="div_entete_table" class="mb-3 d-flex justify-content-end gap-2">
+                </div>
 
-</div>
+            <div id="div_maj_table" class="sticky-top" style="top: 20px; z-index: 10;">
+                </div>
+        </div>
+        
+        <div class="col-lg-12">
+            <div id="div_lister_table">
+                <div class="text-center p-5 bg-white rounded shadow-xs border">
+                    <div class="icon-shape bg-light text-muted rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
+                        <i class="fas fa-table-list fa-2x"></i>
+                    </div>
+                    <h6 class="text-muted fw-bold"><?= _("Sélectionnez une table pour afficher les données") ?></h6>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<div id="div_entete_table">
-	
-</div>
-
-<div id="div_maj_table">
-		
-</div>
-
-<div id="div_lister_table">
-	
-</div>
+    <div id="div_fichiers_table" style="display:none;"></div>
+    <div id="div_entete_table_hidden" style="display:none;"></div>
+</div>
\ No newline at end of file