diff --git a/frontend/css/style.css b/frontend/css/style.css
index 49c121c..15f9a1d 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -176,6 +176,42 @@ html, body {
   gap: 1rem;
 }
 
+.popup-box-pave {
+  max-width: 360px;
+}
+
+.pave-numerique {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  margin: 1.5rem 0;
+}
+
+.pave-touche {
+  font-size: 2rem;
+  padding: 1.2rem;
+  border: none;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.pave-touche:active {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(0.95);
+}
+
+.pave-effacer {
+  background: rgba(255, 100, 100, 0.3);
+}
+
+.pave-valider {
+  background: rgba(100, 255, 100, 0.3);
+}
+
 .mdp-erreur {
   color: var(--danger);
   font-size: 0.9rem;
diff --git a/frontend/index.html b/frontend/index.html
index 9e2581c..1241b84 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -378,14 +378,25 @@
 
     <!-- Popup mot de passe admin -->
     <div id="popup-mdp" class="popup-overlay cache">
-      <div class="popup-box">
+      <div class="popup-box popup-box-pave">
         <h3>Acces administration</h3>
-        <input type="password" id="input-mdp-admin" placeholder="Mot de passe" inputmode="numeric" autocomplete="off">
-        <div class="popup-actions">
-          <button class="btn-action" onclick="validerMdpAdmin()">OK</button>
-          <button class="btn-secondaire" onclick="fermerPopupMdp()">Annuler</button>
+        <input type="password" id="input-mdp-admin" placeholder="&#9679;&#9679;&#9679;&#9679;" inputmode="none" autocomplete="off" readonly>
+        <div class="pave-numerique">
+          <button class="pave-touche" onclick="paveTouche('1')">1</button>
+          <button class="pave-touche" onclick="paveTouche('2')">2</button>
+          <button class="pave-touche" onclick="paveTouche('3')">3</button>
+          <button class="pave-touche" onclick="paveTouche('4')">4</button>
+          <button class="pave-touche" onclick="paveTouche('5')">5</button>
+          <button class="pave-touche" onclick="paveTouche('6')">6</button>
+          <button class="pave-touche" onclick="paveTouche('7')">7</button>
+          <button class="pave-touche" onclick="paveTouche('8')">8</button>
+          <button class="pave-touche" onclick="paveTouche('9')">9</button>
+          <button class="pave-touche pave-effacer" onclick="paveEffacer()">&#9003;</button>
+          <button class="pave-touche" onclick="paveTouche('0')">0</button>
+          <button class="pave-touche pave-valider" onclick="validerMdpAdmin()">&#10003;</button>
         </div>
         <p id="mdp-erreur" class="mdp-erreur cache">Mot de passe incorrect</p>
+        <button class="btn-secondaire" onclick="fermerPopupMdp()">Annuler</button>
       </div>
     </div>
 
diff --git a/frontend/js/app.js b/frontend/js/app.js
index eec903a..add1b14 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -124,7 +124,6 @@ function ouvrirAdmin() {
   popup.classList.remove('cache');
   input.value = '';
   document.getElementById('mdp-erreur').classList.add('cache');
-  setTimeout(() => input.focus(), 100);
 }
 
 function fermerPopupMdp() {
@@ -132,6 +131,16 @@ function fermerPopupMdp() {
   document.getElementById('input-mdp-admin').value = '';
 }
 
+function paveTouche(chiffre) {
+  const input = document.getElementById('input-mdp-admin');
+  input.value += chiffre;
+}
+
+function paveEffacer() {
+  const input = document.getElementById('input-mdp-admin');
+  input.value = input.value.slice(0, -1);
+}
+
 function validerMdpAdmin() {
   const input = document.getElementById('input-mdp-admin');
   if (input.value === MDP_ADMIN) {