diff --git a/src/NervTN.vue b/src/NervTN.vue
index 5dd8113..e4d2baa 100644
--- a/src/NervTN.vue
+++ b/src/NervTN.vue
@@ -1,12 +1,18 @@
 <script setup>
 import ReloadPWA from './components/ReloadPWA.vue';
 import {useI18n} from 'vue-i18n';
+import NavMessage from './components/message/NavMessage.vue';
 
 const {t} = useI18n({useScope: 'local'});
-
-
 </script>
 
+<script>
+export default{
+    components: {NavMessage}
+}
+</script>
+
+
 <template>
     <div id="appflex">
         <div id="page">
@@ -20,6 +26,11 @@ const {t} = useI18n({useScope: 'local'});
         </div>
         <div id="sidebar" class="sidebar">
             <router-view name="Sidebar"></router-view>
+        
+            <div id="menu">
+                <NavMessage/>
+                <router-view name="navMessage"></router-view>
+            </div> 
         </div>
     </div>
     <header class="navbar">
@@ -28,16 +39,18 @@ const {t} = useI18n({useScope: 'local'});
             <span id="site-name">{{ t('home.apps') }}</span>
         </router-link>
 
-        <div class="dropdown">
-            <button class="dropdown-toggle" v-on:click="isShowDrop = !isShowDrop">
-            👥 Connexion ▾
-            </button>
-            <ul class="dropdown-menu" v-show="isShowDrop">
-                <li><a href="#">Compte</a></li>
-                <li><a href="#">Tableau de bord</a></li>
-                <li><a href="#">Déconnexion</a></li>
-            </ul>
-        </div>
+        <div class="nav-menu">
+            <details>
+                <summary>
+                <span class="connect">👥 Connexion</span>
+                </summary>
+                <ul>
+                    <li class="nav-connect"><a href="#">Compte</a></li>
+                    <li class="nav-connect"><a href="#">Tableau de bord</a></li>
+                    <li class="nav-connect"><a href="#">Déconnexion</a></li>
+                </ul>  
+            </details>
+        </div>    
 
         <div class="links">
             <router-view name="Links"></router-view>
@@ -47,7 +60,7 @@ const {t} = useI18n({useScope: 'local'});
                 <option value="fr">Français</option>
                 <option value="nl">Nederlands</option>
             </select>
-        </div>
+        </div> 
     </header>
     <footer class="footer">
     </footer>
diff --git a/src/assets/css/sidebar.less b/src/assets/css/sidebar.less
index 5730bf6..5275723 100644
--- a/src/assets/css/sidebar.less
+++ b/src/assets/css/sidebar.less
@@ -23,6 +23,33 @@
     }
 }
 
+#menu {
+    font-size: 1.1rem;
+    margin: 0.5rem;
+    padding: 1rem;
+}
+
+.nav-menu{
+    margin-left: auto;
+    padding-right: 10px;
+    cursor: pointer;
+}
+
+
+.connect {
+    padding: 0.5rem;
+
+    ul {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+    }
+}
+
+.nav-connect {
+    list-style: none;
+}
+
 .nav-links {
     display: inline-block;
     a, a:visited {
diff --git a/src/components/contact/Contact.vue b/src/components/contact/Contact.vue
new file mode 100644
index 0000000..eed16e1
--- /dev/null
+++ b/src/components/contact/Contact.vue
@@ -0,0 +1,174 @@
+
+<template>
+
+<div class="vCard">
+ <vue-tabs>
+    <v-tab title="👤 Contact">
+		<h1>👤 Contact</h1>
+      	<div>
+			<label for="avatar">Avatar</label>
+			<input type="file" />
+		</div>
+		
+		<div>
+			<label for="nickname">Pseudonyme :</label>
+			<input type="text" v-model="home">
+		</div>
+
+		<div>
+			<label for="emailHome">Email Personnelle :</label>
+			<input type="email" v-model="home" required>
+		</div>
+			
+		 <button @click="persist">Enregistrer</button>
+		
+    </v-tab>
+	<br>
+    <v-tab title="📇 Informations personnelles">
+		<h1>📇 Informations personnelles</h1>
+      	<div>
+			<label for="name">Nom complet :</label>
+			<input type="text" v-model="home" pattern="{a-zA-Z}{4,25}" required>
+		</div>
+
+		<div>
+			<label for="bday"> Date de naissance :</label>
+			<input type="date" v-model="home">
+		</div>
+		
+        <div>
+			<label for="nbrHome">Numéro de téléphone :</label>
+			<input type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" 
+			v-model="home">
+		</div>
+
+		<div class="Home">
+			<h3>Adresse Personnelle</h3>
+				<ul>
+					<li><label for="street">Rue :</label></li>
+					<input type="text" v-model="home">
+					
+					<li><label for="locality">Ville :</label></li>
+					<input type="text" v-model="home">
+					
+					<li><label for="pcode">Code Postal :</label></li>
+					<input type="text" v-model="home">
+					
+					<li><label for="ctry">Pays :</label></li>
+					<input type="text" v-model="home">
+				</ul>	
+		</div>
+
+		<div>				
+		 <button @click="persist">Enregistrer</button>
+		</div> 
+    </v-tab>
+	<br>
+    <v-tab title="💼 Emploi">
+		<h1>💼 Emploi</h1>
+      <div>
+			<label for="orgname">Entreprise :</label>
+			<input type="text" v-model="work">
+		</div>
+		<div>
+			<label for="title">Poste :</label>
+			<input type="text" v-model="work">
+		</div>
+        <div>
+			<label for="role">Rôle :</label>
+			<input type="text" v-model="work">
+		</div>
+		<div>
+			<label for="emailWork">Email Professionnel :</label>
+			<input type="email" v-model="work">
+		</div>
+        <div>
+			<label for="nbrWork">Numéro de téléphone :</label>
+			<input type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"
+			v-model="work">
+		</div>
+
+        <div class="Work">
+			<h3>Adresse Proffessionelle</h3>
+				<ul>
+					<li><label for="street">Rue :</label></li>
+					<input type="text" v-model="work">
+					
+					<li><label for="locality">Ville :</label></li>
+					<input type="text" v-model="work">
+					
+					<li><label for="pcode">Code Postal :</label></li>
+					<input type="text" v-model="work">
+					
+					<li><label for="ctry">Pays :</label></li>
+					<input type="text" v-model="work">
+				</ul>
+		</div>
+
+		<div>				
+		 <button @click="persist">Enregistrer</button>
+		</div> 
+    </v-tab>
+	<br>
+	 <v-tab title="✍🏼 Commentaires">
+		 <h1>✍🏼 Commentaires</h1>
+		 <div>
+			<label for="comment"></label>
+			<textarea v-model="home"></textarea>
+		</div>
+					
+		 <button @click="persist">Enregistrer</button>
+		
+    </v-tab>
+</vue-tabs>
+</div>
+
+    </template>
+
+    <script>
+	/*	export default {
+            name: 'vCard',
+			setup() {
+            home = "",
+            work = ""
+			},
+			mounted() {
+			if (localStorage.home) {
+			this.home = localStorage.home;
+				}
+			if (localStorage.work) {
+			this.work = localStorage.work;
+				}	
+			},
+			 methods: {
+				persist() {
+				localStorage.home = this.home;
+				localStorage.work = this.work;
+				console.log('ok');
+					}
+				}
+			};
+			
+		new Vue({
+  			el:"#vCard",
+		})	
+			*/
+    </script>
+
+	<style scoped>
+		label{
+			padding: 5px;
+		}
+		input{
+			padding: 5px;
+		}
+		li {
+			list-style-type: none;
+		}
+		textarea {
+			padding: 20px;
+		}
+		button{
+			margin-top: 20px;
+		}
+	</style>
diff --git a/src/components/contact/Rooster.vue b/src/components/contact/Rooster.vue
deleted file mode 100644
index 57fa77d..0000000
--- a/src/components/contact/Rooster.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-     <form id="vCard">
-       <!-- Informations Personnelles -->
-		<p>
-			<label for="avatar">Avatar</label>
-			<input type="file" />
-		</p>
-		<p>
-			<label for="name">Nom complet</label>
-			<input type="text" v-model="home" required>
-		</p>
-		<p>
-			<label for="nickname">Pseudonyme</label>
-			<input type="text" v-model="home">
-		</p>
-		<p>
-			<label for="bday">Date de naissance</label>
-			<input type="text" v-model="home">
-		</p>
-		<p>
-			<label for="emailHome">Email Perso</label>
-			<input type="text" v-model="home">
-		</p>
-        <p>
-			<label for="nbrHome">Numéro de téléphone</label>
-			<input type="text" v-model="home">
-		</p>
-
-		<p class="Home">
-			<h3>Adresse</h3>
-				<label for="street">Rue</label>
-				<input type="text" v-model="home">
-				
-				<label for="locality">Ville</label>
-				<input type="text" v-model="home">
-				
-				<label for="pcode">Code Postal</label>
-				<input type="text" v-model="home">
-				
-				<label for="ctry">Pays</label>
-				<input type="text" v-model="home">
-		</p>
-		
-
-        <!-- Emploi -->
-		<p>
-			<label for="orgname">Entreprise</label>
-			<input type="text" v-model="work">
-		</p>
-		<p>
-			<label for="title">Poste</label>
-			<input type="text" v-model="work">
-		</p>
-        <p>
-			<label for="role">Rôle</label>
-			<input type="text" v-model="work">
-		</p>
-		<p>
-			<label for="emailWork">Email Professionnel</label>
-			<input type="text" v-model="work">
-		</p>
-        <p>
-			<label for="nbrWork">Numéro de téléphone</label>
-			<input type="text" v-model="work">
-		</p>
-
-        <p class="Work">
-			<h3>Adresse</h3>
-				<label for="street">Rue</label>
-				<input type="text" v-model="work">
-				
-				<label for="locality">Ville</label>
-				<input type="text" v-model="work">
-				
-				<label for="pcode">Code Postal</label>
-				<input type="number" v-model="work">
-				
-				<label for="ctry">Pays</label>
-				<input type="text" v-model="work">
-		</p>
-		
-		<p>				
-		 <button @click="persist">Enregistrer</button>
-		</p> 
-     </form>
-    </template>
-
-    <script>
-		export default {
-            name: 'vCard',
-			setup() {
-            home = "",
-            work = ""
-			},
-			mounted() {
-			if (localStorage.home) {
-			this.home = localStorage.home;
-				}
-			if (localStorage.work) {
-			this.work = localStorage.work;
-				}	
-			},
-			 methods: {
-				persist() {
-				localStorage.home = this.home;
-				localStorage.work = this.work;
-				console.log('ok');
-					}
-				}
-
-			};
-      
-    </script>
\ No newline at end of file
diff --git a/src/components/message/Chat.vue b/src/components/message/Chat.vue
new file mode 100644
index 0000000..2228bfb
--- /dev/null
+++ b/src/components/message/Chat.vue
@@ -0,0 +1,11 @@
+
+<template>
+    <h1>Chat</h1>
+
+</template>
+
+
+<script>
+
+
+</script>
diff --git a/src/components/message/Correspondance.vue b/src/components/message/Correspondance.vue
new file mode 100644
index 0000000..985b5b1
--- /dev/null
+++ b/src/components/message/Correspondance.vue
@@ -0,0 +1,12 @@
+
+<template>
+    <h1>Correspondance</h1>
+
+</template>
+
+
+<script>
+
+
+</script>
+
diff --git a/src/components/message/NavMessage.vue b/src/components/message/NavMessage.vue
new file mode 100644
index 0000000..5986ce1
--- /dev/null
+++ b/src/components/message/NavMessage.vue
@@ -0,0 +1,33 @@
+
+<template>
+    <details>
+        <summary>
+            <span class="onglet">💬 ✉️ Messages</span>
+        </summary>
+        <ul>
+            <li><router-link to="/correspondance">📭 Correspondance</router-link></li>
+            <li><router-link to="/chat">💬 Chat</router-link></li>
+            <li><router-link to="">🎥 Visioconférence</router-link></li>
+        </ul>  
+    </details>      
+    <details>
+        <summary>
+            <router-link to="/contact">👤 Contact</router-link>
+        </summary>
+        <ul>
+            <li><router-link to=""></router-link></li>
+            <li><router-link to=""></router-link></li>
+            <li><router-link to=""></router-link></li>
+        </ul>
+    </details>
+            
+          
+    
+</template>
+
+<style scoped>
+    li {
+        list-style-type: none;
+    }
+    
+</style>
diff --git a/src/nervtn-routes.js b/src/nervtn-routes.js
index e4ec0d6..2ee1a78 100644
--- a/src/nervtn-routes.js
+++ b/src/nervtn-routes.js
@@ -5,6 +5,10 @@ import * as VueRouter from 'vue-router';
 
 const Apps = () => import('./components/NervTNApps.vue');
 const Dashboard = () => import('./components/Dashboard.vue');
+const Chat = () => import('./components/message/Chat.vue');
+const Correspondance = () => import('./components/message/Correspondance.vue');
+const Contact = () =>import('./components/contact/Contact.vue');
+
 
 const routes = [
     {
@@ -27,6 +31,36 @@ const routes = [
             //ActionBar: {}
         }
     },
+    {
+        path: '/chat',
+        name: "Chat",
+        components: {
+            default: Chat,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
+    {
+        path: '/correspondance',
+        name: "Correspondance",
+        components: {
+            default: Correspondance,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
+    {
+        path: '/contact',
+        name: "Contact",
+        components: {
+            default: Contact,
+            //Links: {},
+            //Sidebar: {},
+            //ActionBar: {}
+        }
+    },
     {
         path: '/:errorPath(.*)*',
         name: "NotFound",