--- a/avatar.js
+++ b/avatar.js
@@ -112,7 +112,7 @@ function initAvatar(connection) {
     function onAvatarDataUpload(iq)
     {
         console.log('Avatar successfully uploaded!', iq);
-        avatar_change.disabled = true;
+        avatar_change.hidden = true;
         avatar_size.innerHTML = '';
         spinner_img.hidden = true;
     }
@@ -151,7 +151,7 @@ function initAvatar(connection) {
                 .map(b => b.toString(16).padStart(2, "0"))
                 .join(""));
             avatar_data.id = sha1;
-            avatar_change.disabled = false;
+            avatar_change.hidden = false;
         }
         sha1_reader.readAsArrayBuffer(file);
     });

--- a/client.js
+++ b/client.js
@@ -23,7 +23,7 @@ document.addEventListener('DOMContentLoa
     }
 
     connect_button.addEventListener('click', function (evt) {
-        if (connect_button.value == 'connect') {
+        if (!connect_button.classList.contains('disconnect')) {
             const jid = jid_element.value;
             getBOSHService(jid).then((bosh_service) => {
                 connection = new Strophe.Connection(bosh_service);
@@ -72,7 +72,8 @@ document.addEventListener('DOMContentLoa
     {
         if (status == Strophe.Status.CONNECTING) {
             console.log('Strophe is connecting.');
-            connect_button.value = 'disconnect';
+            connect_button.value = 'Log out';
+            connect_button.classList.add('disconnect');
             jid_element.disabled = true;
             pass_element.disabled = true;
             spinner_img.hidden = false;
@@ -93,6 +94,8 @@ document.addEventListener('DOMContentLoa
 
     function onConnected()
     {
+        jid_element.hidden = true;
+        pass_element.hidden = true;
         connected_div.hidden = false;
         spinner_img.hidden = true;
         initRoster(connection);
@@ -103,8 +106,11 @@ document.addEventListener('DOMContentLoa
 
     function onDisconnected()
     {
-        connect_button.value = 'connect';
+        connect_button.value = 'Log in';
+        connect_button.classList.remove('disconnect');
+        jid_element.hidden = false;
         jid_element.disabled = false;
+        pass_element.hidden = false;
         pass_element.disabled = false;
         spinner_img.hidden = true;
         connected_div.hidden = true;

--- a/index.xhtml
+++ b/index.xhtml
@@ -40,9 +40,9 @@
 
 <div class="row">
 <form id="connection">
-<label>JID: <input type="email" id="jid" placeholder="you@your-server.tld"/></label><br/>
-<label>Password: <input type="password" id="pass" placeholder="Password"/></label><br/>
-<input type="submit" id="connect" value="connect"/>
+<input type="email" id="jid" placeholder="JID" title="Enter your JID (or XMPP address), on the form “you@your-server.tld”"/>
+<input type="password" id="pass" placeholder="Password" title="Enter the password used for this JID"/>
+<input type="submit" id="connect" value="Log in"/>
 <img src="spinner.svg" width="24" height="24" id="connect-spinner" hidden=""/>
 </form>
 </div>
@@ -50,46 +50,94 @@
 <div id="connected" hidden="">
 
 <div class="row">
-<h1>Account</h1>
+<div class="col-sm-4">
 <h2>Nickname</h2>
+</div>
+<div class="col-sm-8">
 <p>
-<label>Nickname: <input id="nick" placeholder="Nick"/></label>
+<input id="nick" placeholder="Nickname"/>
 <img src="spinner.svg" width="24" height="24" id="nick-spinner"/>
 </p>
+<p>
+Enter your nickname, so people you know can recognize you.
+</p>
+</div>
+</div>
+
+<hr/>
+
+<div class="row">
+<div class="col-sm-4">
 <h2>Avatar</h2>
-<p>
+<p>This image allows your contact to quickly identify you.</p>
+</div>
+<div class="col-sm-8">
 <img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/> <img src="spinner.svg" width="24" height="24" id="avatar-spinner"/><br/>
 <input type="file" style="display:none" accept="image/*" id="avatar-file"/>
-<button id="avatar-upload">Choose a new avatar</button><br/>
-<button id="avatar-change" disabled="">Upload this avatar</button><br/>
+<p><label>Upload new avatar<br/>
+<button id="avatar-upload">Choose file…</button></label><br/>
+<button id="avatar-change" hidden="">Use as your avatar</button><br/>
 <label>Who can see your avatar? <select id="avatar-access">
 <option value="open">Anyone (pick this if you use public groupchats)</option>
 <option value="presence">Only your contacts</option>
 </select></label> <img src="spinner.svg" width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
 </p>
+</div>
+</div>
+
+<hr/>
+
+<div class="row">
+<div class="col-sm-4">
 <h2>Contact list</h2>
+</div>
+<div class="col-sm-8">
 <table>
 <thead>
 <tr><th>JID</th><th>Name</th><th>Subscription</th><th>Groups</th><th>⚠️ Delete</th></tr>
 </thead>
 <tbody id="roster-table"/>
 </table>
+</div>
+</div>
+
+<hr/>
+
+<div class="row">
+<div class="col-sm-4">
 <h2>PEP</h2>
+</div>
+<div class="col-sm-8">
 <table>
 <thead>
 <tr><th>PEP node</th><th>Title</th><th>Description</th><th>Type</th><th>⚠️ Delete</th></tr>
 </thead>
 <tbody id="pep-table"/>
 </table>
+</div>
+</div>
+
+<hr/>
+
+<div class="row">
+<div class="col-sm-4">
 <h2>Dangerous zone</h2>
+</div>
+<div class="col-sm-8">
 <p>
 <button disabled="">Change my password</button>
 <button disabled="">⚠️ Delete my account</button>
 </p>
 </div>
+</div>
+
+<hr/>
 
 <div class="row">
-<h1>Message Archiving</h1>
+<div class="col-sm-4">
+<h2>Message Archiving</h2>
+</div>
+<div class="col-sm-8">
 <p>
 <label>Which messages to store in your archive? <select id="mam-prefs" disabled="">
 <option value="always">All messages</option>
@@ -111,9 +159,9 @@
 <button disabled="">⚠️ Purge my entire message archive</button>
 </p>
 </div>
+</div>
 
 </div>
-
 </div>
 
 <footer class="container">