--- a/client.js
+++ b/client.js
@@ -12,6 +12,31 @@ document.addEventListener('DOMContentLoa
 
     const avatar_img = document.getElementById('avatar');
 
+    const tabs = ['profile', 'mam', 'pep', 'account'];
+    function onHashChange() {
+        const hash = location.hash.substr(1);
+        if (!tabs.includes(hash))
+            return;
+        for (let tab of tabs) {
+            const tab_name = 'tab-' + tab;
+            const tab_element = document.getElementById(tab_name);
+            if (tab == hash) {
+                tab_element.classList.add('active')
+                const content_elements = document.getElementsByClassName(tab_name);
+                for (let element of content_elements)
+                    element.hidden = false;
+            } else {
+                tab_element.classList.remove('active')
+                const content_elements = document.getElementsByClassName(tab_name);
+                for (let element of content_elements)
+                    element.hidden = true;
+            }
+        }
+    }
+
+    onHashChange();
+    window.addEventListener('hashchange', onHashChange);
+
     function rawInput(data)
     {
         console.log('RECV', data);

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