--- 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">