diff --git a/Vue/Accessoirescomplementaire/index.php b/Vue/Accessoirescomplementaire/index.php
index f3fd8fc7..9b98e4ec 100755
--- a/Vue/Accessoirescomplementaire/index.php
+++ b/Vue/Accessoirescomplementaire/index.php
@@ -1,24 +1,60 @@
-<?php $this->titre = "INTER SANTE - Accessoires étendu territoire"; ?>
+<div class="page-content animate__animated animate__fadeIn">
+    <div class="header-section mb-1">
+        <div class="d-flex align-items-center justify-content-between bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
+            <div class="d-flex align-items-center">
+                <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-map-marked-alt fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Accessoires Étendu Territoire") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Gestion des frais accessoires selon l'extension géographique du contrat") ?></p>
+                </div>
+            </div>
+        </div>
+    </div>
 
+    <div class="card border-0 shadow-sm mb-3">
+        <div class="card-body p-4">
+            <div class="row align-items-center justify-content-center">
+                <div class="col-md-2 text-md-end">
+                    <label for="codeTerritoire" class="fw-bold text-uppercase small text-muted required">
+                        <?= _("Territoire") ?> :
+                    </label>
+                </div>
+                <div class="col-md-6">
+                    <div class="input-group">
+                        <span class="input-group-text bg-white border-primary-subtle text-primary">
+                            <i class="fas fa-globe-africa"></i>
+                        </span>
+                        <select class="form-select selectpicker" 
+                                data-live-search="true" 
+                                id="codeTerritoire" 
+                                name="codeTerritoire" 
+                                required 
+                                autocomplete="off" 
+                                autofocus 
+                                onchange="javascript:affiche_garants_territoire();">
+                            <?php liste_options($etendueterritoire, "", false); ?>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
+    <div id="div_garant" class="animate__animated animate__fadeIn">
+        <div class="text-center p-5 opacity-50 bg-white rounded shadow-sm border">
+            <i class="fas fa-map-pin fa-3x mb-3 text-primary"></i>
+            <p class="fw-bold mb-0 text-muted"><?= _("Veuillez sélectionner un territoire pour afficher les détails associés.") ?></p>
+        </div>
+    </div>
+</div>
 
-<legend> <?= _("Accessoires étendu territoire") ?> </legend>
-
-<table class="table table-responsive table-condensed" style="font-size:10pt;">
-	<tbody>	
-		<tr> 
-			<td width="10%" align="center" class="required"> <?= _("Territoire") ?> </td>
-			<td >
-				<SELECT style="font-size:9pt;" class="form-control selectpicker" data-live-search="true" id="codeTerritoire" NAME="codeTerritoire" 
-				onChange="javascript:affiche_garants_territoire();" required AUTOCOMPLETE="OFF">
-					<?php liste_options($etendueterritoire,"", false); ?>						
-				</SELECT>
-				
-			</td>
-		</tr>
-	</tbody>
-</table>	
-
-<div id="div_garant">
-
-</div>	
+<style>
+    /* Harmonisation Selectpicker */
+    .bootstrap-select .dropdown-toggle {
+        border-color: #dee2e6 !important;
+        font-size: 0.95rem;
+        padding: 0.5rem 1rem;
+    }
+</style>
\ No newline at end of file