diff --git a/src/NervTN.vue b/src/NervTN.vue
index 2b79d59..5dd8113 100644
--- a/src/NervTN.vue
+++ b/src/NervTN.vue
@@ -3,6 +3,8 @@ import ReloadPWA from './components/ReloadPWA.vue';
 import {useI18n} from 'vue-i18n';
 
 const {t} = useI18n({useScope: 'local'});
+
+
 </script>
 
 <template>
@@ -25,6 +27,18 @@ const {t} = useI18n({useScope: 'local'});
             <img id="main-logo" alt="" src="./assets/logo.svg"/>
             <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="links">
             <router-view name="Links"></router-view>
             <select v-model="$i18n.locale" @change="$i18n.loadMessages()">
diff --git a/src/components/contact/Rooster.vue b/src/components/contact/Rooster.vue
new file mode 100644
index 0000000..57fa77d
--- /dev/null
+++ b/src/components/contact/Rooster.vue
@@ -0,0 +1,113 @@
+<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