--- a/index.xhtml
+++ b/index.xhtml
@@ -49,7 +49,14 @@
 
 <div id="connected" hidden="">
 
-<div class="row">
+<div id="navtabs" class="nav nav-tabs nav-justified">
+<li id="tab-profile" class="active"><a href="#profile">Profile</a></li>
+<li id="tab-mam"><a href="#mam">Message Archiving</a></li>
+<li id="tab-pep"><a href="#pep">PEP</a></li>
+<li id="tab-account"><a href="#account">Account</a></li>
+</div>
+
+<div class="row tab-profile">
 <div class="col-sm-4">
 <h2>Nickname</h2>
 </div>
@@ -64,9 +71,9 @@ Enter your nickname, so people you know 
 </div>
 </div>
 
-<hr/>
+<hr class="tab-profile"/>
 
-<div class="row">
+<div class="row tab-profile">
 <div class="col-sm-4">
 <h2>Avatar</h2>
 <p>This image allows your contact to quickly identify you.</p>
@@ -85,9 +92,7 @@ Enter your nickname, so people you know 
 </div>
 </div>
 
-<hr/>
-
-<div class="row">
+<div class="row tab-account" hidden="">
 <div class="col-sm-4">
 <h2>Contact list</h2>
 </div>
@@ -101,9 +106,21 @@ Enter your nickname, so people you know 
 </div>
 </div>
 
-<hr/>
+<hr class="tab-account" hidden=""/>
 
-<div class="row">
+<div class="row tab-account" hidden="">
+<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>
+
+<div class="row tab-pep" hidden="">
 <div class="col-sm-4">
 <h2>PEP</h2>
 </div>
@@ -117,23 +134,7 @@ Enter your nickname, so people you know 
 </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">
+<div class="row tab-mam" hidden="">
 <div class="col-sm-4">
 <h2>Message Archiving</h2>
 </div>