diff --git a/src/main/resources/META-INF/resources/index.html b/src/main/resources/META-INF/resources/index.html
index 936eb69..e4f013c 100644
--- a/src/main/resources/META-INF/resources/index.html
+++ b/src/main/resources/META-INF/resources/index.html
@@ -3,6 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <title>Login</title>
+    <link href="favicon.ico" rel="icon" type="image/x-icon">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
+    <!--    <link type="text/css" rel="stylesheet" href="css/style.css" />-->
+    <link href="https://fonts.googleapis.com" rel="preconnect"/>
+    <link crossorigin href="https://fonts.gstatic.com" rel="preconnect"/>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
+          rel="stylesheet"/>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     <script charset="UTF-8" src="/js/webauthn-debug.js" type="text/javascript"></script>
     <style>
         .container {
@@ -51,6 +61,8 @@
     <button id="register">Register</button>
 </div>
 
+<div id="trace"></div>
+
 <div class="container" id="server1">
     <div id="server1-call"></div>
     <div id="server1-response"></div>
@@ -65,6 +77,7 @@
     <div id="server2-call"></div>
     <div id="server2-response"></div>
 </div>
+</div>
 
 <div id="result"></div>
 
@@ -126,12 +139,26 @@
         }
     }
 
+    function tracer(stage, params) {
+        console.log(stage, params)
+        const content = JSON.stringify(params);
+        const trace = $("<div class='container'></div>").attr("id", stage).html(content).appendTo("#trace");
+        const button = $("<button>Continue</button>").appendTo(trace)
+        return new Promise((resolve, reject) => {
+            button.click(() => {
+                resolve(params);
+                $(button).remove();
+            });
+        });
+    }
+
     const webAuthn = new WebAuthn({
         callbackPath: '/q/webauthn/callback',
         registerPath: '/q/webauthn/register',
         loginPath: '/q/webauthn/login',
-        loginCallbackPath: '/webauthn/login',
-        registerCallbackPath: '/webauthn/register',
+        // loginCallbackPath: '/webauthn/login',
+        // registerCallbackPath: '/webauthn/register',
+        debuggingFunction: tracer
     });
 
     const result = document.getElementById('result');
