diff --git a/src/main/resources/templates/OAuthResource/loginPasswordless.html b/src/main/resources/templates/OAuthResource/loginPasswordless.html
index 4b5451b..3684f4e 100644
--- a/src/main/resources/templates/OAuthResource/loginPasswordless.html
+++ b/src/main/resources/templates/OAuthResource/loginPasswordless.html
@@ -17,37 +17,89 @@
     {/add-header}
 
 <div class="container">
-    <input id="userName" placeholder="User name"/><br/>
-    <button class="nextBtn" id="login">Login</button>
-    <button class="nextBtn" id="register">Register</button>
-</div>
+<div class="section">
+    <div class="col s12 m7">
+        <div class="card horizontal">
+            <div class="card-stacked">
+                <div class="card-content">
+                    <h6>Create a new credential or use an existing one</h6>
+                    <p>In Webauthn, a single user will have multiple credentials, tied to the devices they are using.</p>
+                    <p>First the user enters their username:</p>
+                    <input id="userName" placeholder="User name"/><br/>
 
-<div class="container step" id="server1-request">
-    The interaction starts with an AJAX call.
-    <div class="code">POST <span id="server1-url"></span>
-        <div id="server1-call"></div>
+                    <p>If they are a new user, they need to generate a new credential and register it with the application</p>
+                    <button class="nextBtn waves-effect waves-light btn full-width" id="register">Register</button>
+
+                    <p>If they are a returning user, their authenticator must prove they own the credential.</p>
+                    <button class="nextBtn waves-effect waves-light btn full-width" id="login">Login</button>
+                </div>
+            </div>
+        </div>
     </div>
-    <button class="nextBtn">Request challenge</button>
 </div>
 
-<div class="container step" id="server1-response">
-    The server prepares a challenge for the browser to sign.
-    <div class="code" id="server1-response-body"></div>
-    <button class="nextBtn">Continue</button>
+<div class="section step" id="server1-request">
+    <div class="col s12 m7">
+        <div class="card horizontal">
+            <div class="card-stacked">
+                <div class="card-content">
+                    <h6>Request a challenge</h6>
+                    <p>The interaction starts with an AJAX call.</p>
+                    <div class="code">POST <span id="server1-url"></span>
+                        <div id="server1-call"></div>
+                    </div>
+                    <button class="nextBtn waves-effect waves-light btn full-width">Request challenge</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
-<div class="container step" id="navigator-request">
-    The challenge is passed to the browser call:
-    <div class="code" id="navigator-call"></div>
-    <button class="nextBtn">Call Webauthn API</button>
+<div class="section step" id="server1-response">
+    <div class="col s12 m7">
+        <div class="card horizontal">
+            <div class="card-stacked">
+                <div class="card-content">
+                    <h6>The challenge</h6>
+                    <p>The server prepares a challenge for the browser to sign.</p>
+                    <div class="code" id="server1-response-body"></div>
+                    <button class="nextBtn waves-effect waves-light btn full-width">Continue</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
-<div class="container step" id="navigator-response">
-    Which responds:
-    <div class="code" id="navigator-response-body"></div>
-    The <strong>response.clientDataJSON</strong> are base64 encoded:
-    <div class="code" id="navigator-clientDataJSON"></div>
-    <button class="nextBtn">Finish the interaction</button>
+<div class="section step" id="navigator-request">
+    <div class="col s12 m7">
+        <div class="card horizontal">
+            <div class="card-stacked">
+                <div class="card-content">
+                    <h6>WebAuthn API</h6>
+                    <p>The challenge is passed to the browser call:</p>
+                    <div class="code" id="navigator-call"></div>
+                    <button class="nextBtn waves-effect waves-light btn full-width">Call Webauthn API</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="section step" id="navigator-response">
+    <div class="col s12 m7">
+        <div class="card horizontal">
+            <div class="card-stacked">
+                <div class="card-content">
+                    <h6>Attestation</h6>
+                    Which responds:
+                    <div class="code" id="navigator-response-body"></div>
+                    The <strong>response.clientDataJSON</strong> are base64 encoded:
+                    <div class="code" id="navigator-clientDataJSON"></div>
+                    <button class="nextBtn waves-effect waves-light btn full-width">Finish the interaction</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 </div>
 
@@ -58,6 +110,7 @@
     <input name="sessionId" type="hidden" value="somesessionid">
     <div id="form-generated"></div>
 </form>
+</div>
 
 <script type="text/javascript">
     function tryDecodeBase64(str) {