diff --git a/.gitmodules b/.gitmodules
index e07c1ab..5ac647f 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -4,3 +4,6 @@
 [submodule "dist/lib/webcomponentsjs"]
 	path = dist/lib/webcomponentsjs
 	url = https://github.com/webcomponents/webcomponentsjs
+[submodule "dist/lib/xmpp-chat-component"]
+	path = dist/lib/xmpp-chat-component
+	url = git@git.happy-dev.fr:happy-dev/xmpp-chat-component.git
diff --git a/dist/lib/xmpp-chat-component b/dist/lib/xmpp-chat-component
new file mode 160000
index 0000000..ffed7b6
--- /dev/null
+++ b/dist/lib/xmpp-chat-component
@@ -0,0 +1 @@
+Subproject commit ffed7b6c77ff46ee93f5d2de185e4984d1988d47
diff --git a/index.php b/index.php
index e092e4b..5347223 100644
--- a/index.php
+++ b/index.php
@@ -12,10 +12,6 @@
 
     <title>Happy Dev App</title>
 
-    <!-- Font -->
-    <!--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">-->
-    <!--<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">-->
-
     <!-- Stylesheets -->
     <link rel="stylesheet" href="<?php echo $dn; ?>/node_modules/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="<?php echo $dn; ?>/dist/css/hd-app.css?v=<?php echo $v ?>" />
@@ -25,9 +21,12 @@
     <script type="text/javascript" src="<?php echo $dn; ?>/node_modules/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="<?php echo $dn; ?>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="<?php echo $dn; ?>/dist/lib/webcomponentsjs/webcomponents-loader.js"></script>
+    <script type="text/javascript" src="<?php echo $dn; ?>/dist/lib/xmpp-chat-component/node_modules/webcomponentsjs/full.js"></script>
 
+    <!-- Web components -->
     <link rel="import" href="<?php echo $dn; ?>/dist/lib/ldp-display/ldp-display.html?v=<?php echo $v ?>" />
     <link rel="import" href="<?php echo $dn; ?>/dist/lib/ldp-display/ldp-router.html?v=<?php echo $v ?>" />
+    <link rel="import" href="<?php echo $dn; ?>/dist/lib/xmpp-chat-component/chat-window-component.html?v=<?php echo $v ?>">
   </head>
 
   <body>
diff --git a/src/html/member.html b/src/html/member.html
index 3d1f1c3..dabf8d2 100644
--- a/src/html/member.html
+++ b/src/html/member.html
@@ -1,8 +1,13 @@
 <div id="member" style="display: none">
-  <div class="page-header">
-    <h1>Profil</h1>
-  </div>
-
+  <hd-chat-window
+    data-authentication="anonymous"
+    data-auto-login="true"
+    data-bosh-service-url="https://conversejs.org/http-bind/"
+    data-debug="true"
+    data-jid="nomnom.im"
+    data-locales-url="http://hd-app.local/dist/lib/xmpp-chat-component/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
+    data-room-jid="anonymous@conference.nomnom.im">
+  </hd-chat-window>
   <ldp-display 
     id="profile" 
     set-name="firstname, name-separator, lastname"
diff --git a/src/html/members.html b/src/html/members.html
index 16cd1c2..9a42008 100644
--- a/src/html/members.html
+++ b/src/html/members.html
@@ -1,8 +1,4 @@
 <div id="members" class="view" style="display: none">
-  <div class="page-header">
-    <h1 class="h2 mt-2">Membres</h1>
-  </div>
-
   <ldp-display 
     id="profilesList" 
     data-src="http://localhost:8000/members/" 
diff --git a/src/html/menu.html b/src/html/menu.html
index 0655de2..51c0b47 100644
--- a/src/html/menu.html
+++ b/src/html/menu.html
@@ -1,4 +1,4 @@
-<nav class="navbar bg-white fixed-top border-bottom pb-0 d-md-flex">
+<nav class="navbar bg-white fixed-top border-bottom pb-0 d-md-flex" id="navbar">
   <div id="menu-title" class="col-4 col-md-2 pb-2">HAPPY APP</div>
 
   <ldp-router id="navbar-router" class="navbar-nav d-flex flex-row justify-content-between align-self-end col-8 col-md-10" root="ldp-root" default-route="members">
diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss
index 3def23a..bc83325 100644
--- a/src/scss/_menu.scss
+++ b/src/scss/_menu.scss
@@ -1,31 +1,27 @@
-#menu-title {
-  font-family:  bebas;
-  color:        $hd-color;
-  font-size:    17px;
-}
+#navbar {
+  z-index:  9999;
 
-
-#navbar-router {
-  color: $twitter-color;
-
-  ldp-route {
-    cursor:       pointer;
+  #menu-title {
+    font-family:  bebas;
+    color:        $hd-color;
+    font-size:    17px;
   }
-  ldp-route:hover {
-    text-decoration:  underline;
-  }
-  ldp-route[active] {
-    font-weight:    bold;
-    border-bottom:  2px solid $hd-color;
-    color:          $hd-color;
-  }
-}
 
 
-@media (min-width: 768px) { 
-  #navbarSupportedContent {
+  #navbar-router {
+    color: $twitter-color;
+
     ldp-route {
-      margin: 0px  10px;
+      cursor:       pointer;
+      font-size:    18px;
+    }
+    ldp-route:hover {
+      text-decoration:  underline;
+    }
+    ldp-route[active] {
+      font-weight:    bold;
+      border-bottom:  2px solid $hd-color;
+      color:          $hd-color;
     }
   }
 }
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 001a3bc..d082666 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,4 +1,4 @@
 $hd-color: rgb(253, 200, 21);
 $twitter-color: #1DA1F2;
 
-$menu-height : 100px;
+$menu-height : 50px;
