diff --git a/Vue/Testsms/index.php b/Vue/Testsms/index.php
index 94634d79..2a844971 100755
--- a/Vue/Testsms/index.php
+++ b/Vue/Testsms/index.php
@@ -1,49 +1,92 @@
-<?php $this->titre = "INTER SANTE - Autres Paramètres Généraux"; ?>
+<div class="page-content animate__animated animate__fadeIn">
+    <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-tools fs-4"></i>
+            </div>
+            <div>
+                <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Autres Paramètres Généraux") ?></h4>
+                <p class="text-muted small mb-0"><?= _("Configuration technique et tests de connectivité API") ?></p>
+            </div>
+        </div>
+    </div>
 
+    <input type="hidden" id="idSocieteuser" name="idSocieteuser" value="<?= $this->nettoyer($societeuser['idSocieteuser']) ?>">
 
-<script type="text/javascript">
+    <div class="row justify-content-center">
+        <div class="col-lg-10">
+            <div class="card border-0 shadow-sm mb-4">
+                <div class="card-header bg-light py-3">
+                    <h6 class="mb-0 fw-bold text-muted small text-uppercase">
+                        <i class="fas fa-building me-2"></i><?= _("Informations Émetteur") ?>
+                    </h6>
+                </div>
+                <div class="card-body">
+                    <div class="row g-3">
+                        <div class="col-md-3">
+                            <label class="form-label small text-uppercase fw-bold text-muted"><?= _("Code") ?></label>
+                            <input class="form-control bg-light border-0 shadow-none fw-bold" type="text" value="<?= $this->nettoyer($societeuser['codeSociete']) ?>" readonly>
+                        </div>
+                        <div class="col-md-9">
+                            <label class="form-label small text-uppercase fw-bold text-muted"><?= _("Nom") ?></label>
+                            <input class="form-control bg-light border-0 shadow-none fw-bold" type="text" value="<?= $this->nettoyer($societeuser['nomSociete']) ?>" readonly>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label small text-uppercase fw-bold text-muted"><?= _("Adresse Géo") ?></label>
+                            <input class="form-control bg-light border-0 shadow-none" type="text" value="<?= $this->nettoyer($societeuser['adresseGeoSociete']) ?>" readonly>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label small text-uppercase fw-bold text-muted"><?= _("Adresse Postale") ?></label>
+                            <input class="form-control bg-light border-0 shadow-none" type="text" value="<?= $this->nettoyer($societeuser['adressePostSociete']) ?>" readonly>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-</script>
+            <div class="card border-0 shadow-sm overflow-hidden">
+                <div class="card-header bg-white py-3 border-bottom border-2 border-primary-light">
+                    <h6 class="mb-0 fw-bold text-primary text-uppercase">
+                        <i class="fas fa-vial me-2"></i><?= _("Test d'envoi SMS & WhatsApp") ?>
+                    </h6>
+                </div>
+                <div class="card-body p-4 bg-primary-ghost-light">
+                    <div class="row align-items-end g-4">
+                        <div class="col-md-7">
+                            <label class="form-label fw-bold text-dark"><?= _("Destinataires (No Tests)") ?></label>
+                            <div class="input-group shadow-xs">
+                                <span class="input-group-text bg-white border-end-0"><i class="fas fa-phone-alt text-primary"></i></span>
+                                <input class="form-control border-start-0 ps-0" type="text" id="destinataires" NAME="destinataires" placeholder="Ex: 22506802339, 250788439348">
+                            </div>
+                            <div class="form-text mt-2 small">
+                                <i class="fas fa-info-circle me-1"></i> <?= _("Séparez les numéros par des virgules (Format international sans +)") ?>
+                            </div>
+                        </div>
+                        <div class="col-md-5">
+                            <div class="d-grid gap-2">
+                                <button type="button" class="btn btn-success rounded-pill fw-bold shadow-sm" onclick="tester_disponibiliter_whatsapp();">
+                                    <i class="fab fa-whatsapp me-2"></i> <?= _("Envoyer WhatsApp") ?>
+                                </button>
+                                <button type="button" class="btn btn-primary rounded-pill fw-bold shadow-sm" onclick="tester_disponibiliter_sms();">
+                                    <i class="fas fa-sms me-2"></i> <?= _("Envoyer SMS") ?>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 
-
-<input class="sr-only" type="text" id="idSocieteuser" name="idSocieteuser" value="<?= $this->nettoyer($societeuser['idSocieteuser']) ?>" >
-
-<legend><?= _("Tester l'API D'ENVOI des SMS et WhatsApp")?></legend>
-
-<table class="table table-responsive table-condensed" style='font-size:9pt;'>
-	<tbody>	
-		<tr> 
-		
-			<td width="10%" >Code</td>
-			<td><INPUT style='font-size:9pt;' class="form-control" TYPE="text" id="codeSociete" NAME="codeSociete" value="<?=$this->nettoyer($societeuser['codeSociete'])?>" readonly></td>
-
-			<td width="10%" align="center"> <?= _("Nom") ?> </td>
-			<td><INPUT style='font-size:9pt;' class="form-control" TYPE="text" id="nomSociete" NAME="nomSociete" value="<?=$this->nettoyer($societeuser['nomSociete'])?>" readonly></td>
-			
-		</tr>
-
-		<tr> 
-			<td><?= _("Adresse Géo") ?></td>
-			<td><INPUT style='font-size:9pt;' class="form-control" TYPE="text" id="adresseGeoSociete" NAME="adresseGeoSociete" value="<?=$this->nettoyer($societeuser['adresseGeoSociete'])?>" readonly></td>
-
-			<td align="center"> <?= _("Adresse Post") ?> </td>
-			<td><INPUT style='font-size:9pt;' class="form-control" TYPE="text" id="adressePostSociete" NAME="adressePostSociete" value="<?=$this->nettoyer($societeuser['adressePostSociete'])?>" readonly></td>
-		</tr>
-
-		<tr> 
-		
-			<td> <?= _("No Tests SMS") ?> </td>
-			<td><INPUT style='font-size:9pt;' class="form-control" TYPE="text" id="destinataires" NAME="destinataires" ></td>
-			
-			<td align="center"> <?= _("Exemple de No") ?> </td>
-			<td><INPUT style='font-size:9pt;' class="form-control" TYPE="text"  value="22506802339,250788439348,25761198584" readonly></td>
-		</tr>
-
-		<tr> 
-			<td colspan='2'> <button style='font-size:10pt;' type="button" class="form-control btn btn-success" onclick="javascript:tester_disponibiliter_whatsapp();"> <?= _("ENVOYER MESSAGE WHATSAPP") ?> </button> </td>
-			<td>  </td>
-			<td colspan='2'> <button style='font-size:10pt;' type="button" class="form-control btn btn-primary" onclick="javascript:tester_disponibiliter_sms();"> <?= _("ENVOYER SMS") ?> </button> </td>
-		</tr>
-	</tbody>
-</table>	
+<style>
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+    .bg-primary-ghost-light { background-color: rgba(33, 46, 83, 0.02) !important; }
+    .border-primary-light { border-color: rgba(33, 46, 83, 0.1) !important; }
+    .shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+    
+    .form-control:focus {
+        border-color: var(--bs-primary);
+        box-shadow: 0 0 0 0.25rem rgba(33, 46, 83, 0.1);
+    }
+</style>