diff --git a/frontend/templates/jwt.pages.tmpl b/frontend/templates/jwt.pages.tmpl
index bcde689..213a69a 100644
--- a/frontend/templates/jwt.pages.tmpl
+++ b/frontend/templates/jwt.pages.tmpl
@@ -1,48 +1,85 @@
 {{ define "jwt.pages.tmpl" }}
 {{ template "head" . }}
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <title>Générateur JWT (test WhatsApp)</title>
-  <script src="https://cdn.jsdelivr.net/npm/jsonwebtoken@9.0.2/index.min.js"></script>
-  <script>
-    function generateJWT() {
-      const ssoid = document.getElementById("ssoid").value;
-      const secret = document.getElementById("secret").value;
-      const exp = Math.floor(Date.now() / 1000) + 60 * 60; // 1h
-      const payload = {
-        username: ssoid,
-        exp: exp
-      };
+<div class="section">
+  <h1 class="title is-4">🔐 Générateur de JWT pour test API WhatsApp</h1>
 
-      const token = window.jwt.sign(payload, secret);
-      document.getElementById("output").textContent = token;
-      document.getElementById("copyBtn").disabled = false;
-    }
+  <div class="field">
+    <label class="label">SSOID (username)</label>
+    <div class="control">
+      <input class="input" id="ssoid" type="text" value="admin001" />
+    </div>
+  </div>
 
-    function copyToken() {
-      const token = document.getElementById("output").textContent;
-      navigator.clipboard.writeText(token).then(() => {
-        alert("Token copié dans le presse-papier ✅");
-      });
-    }
-  </script>
-</head>
-<body>
-  <h1>Générateur JWT de test</h1>
-  <label>SSOID (username dans token):</label><br>
-  <input type="text" id="ssoid" value="admin001" size="30"><br><br>
+  <div class="field">
+    <label class="label">Clé secrète</label>
+    <div class="control">
+      <input class="input" id="secret" type="text" value="secret-key" />
+    </div>
+  </div>
 
-  <label>Clé secrète :</label><br>
-  <input type="text" id="secret" value="secret-key" size="30"><br><br>
+  <div class="field">
+    <button class="button is-link" onclick="generateJWT()">🔐 Générer le token</button>
+  </div>
 
-  <button onclick="generateJWT()">Générer le token JWT</button>
+  <div class="field">
+    <label class="label">Résultat :</label>
+    <pre id="output" class="box" style="white-space: pre-wrap;"></pre>
+  </div>
 
-  <h2>Token :</h2>
-  <pre id="output" style="white-space: pre-wrap; background: #f9f9f9; border: 1px solid #ccc; padding: 1rem;"></pre>
+  <button id="copyBtn" class="button is-light" onclick="copyToken()" disabled>📋 Copier le token</button>
+</div>
 
-  <button id="copyBtn" onclick="copyToken()" disabled>📋 Copier le token</button>
-</body>
-</html>
-{{ end }}
\ No newline at end of file
+<script>
+  async function generateJWT() {
+    const ssoid = document.getElementById("ssoid").value;
+    const secret = document.getElementById("secret").value;
+    const exp = Math.floor(Date.now() / 1000) + 60 * 60;
+
+    const payload = {
+      username: ssoid,
+      exp: exp
+    };
+
+    const header = {
+      alg: "HS256",
+      typ: "JWT"
+    };
+
+    const base64UrlEncode = obj => btoa(JSON.stringify(obj))
+      .replace(/=/g, '')
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_');
+
+    const encode = new TextEncoder();
+    const importKey = await crypto.subtle.importKey(
+      "raw",
+      encode.encode(secret),
+      { name: "HMAC", hash: "SHA-256" },
+      false,
+      ["sign"]
+    );
+
+    const headerEncoded = base64UrlEncode(header);
+    const payloadEncoded = base64UrlEncode(payload);
+    const toSign = `${headerEncoded}.${payloadEncoded}`;
+
+    const signature = await crypto.subtle.sign("HMAC", importKey, encode.encode(toSign));
+    const signatureArray = new Uint8Array(signature);
+    const base64Signature = btoa(String.fromCharCode(...signatureArray))
+      .replace(/=/g, '')
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_');
+
+    const jwt = `${toSign}.${base64Signature}`;
+    document.getElementById("output").textContent = jwt;
+    document.getElementById("copyBtn").disabled = false;
+  }
+
+  function copyToken() {
+    const token = document.getElementById("output").textContent;
+    navigator.clipboard.writeText(token).then(() => {
+      alert("✅ Token copié !");
+    });
+  }
+</script>
+{{ end }}
