diff --git a/index.html b/index.html
index 85ed5f3..cfce72b 100644
--- a/index.html
+++ b/index.html
@@ -9,28 +9,42 @@
 <body>
     <div id="app">
         <h1>TP-noté</h1>
-        <nav-bar></nav-bar>
+        <nav-bar @add-team="addTeam"></nav-bar>
+
+        <team-card v-for="team in teams"
+                   :id="team.id"
+                   :nom="team.name"
+                   :description="team.description">
+        </team-card>
     </div>
 
     <script src="src/service/link-service.js"></script>
     <script src="src/class/team.js"></script>
     <script src="src/misc/const.js"></script>
     <script src="main.js"></script>
-
     <script type="module">
-
         import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
         import NavBar from '/src/view/nav-bar.js';
-
+        import TeamCard from '/src/view/team-card.js';
         const app = createApp({
             created(){},
             data(){
-                return{}
+                return{
+                    teams: []
+                }
             },
-            methods:{}
+            methods:{
+                addTeam: function(equipe){
+                    console.log(equipe);
+                    this.teams.push(equipe);
+                }
+            }
         });
+
         app.component('NavBar', NavBar);
+        app.component('TeamCard', TeamCard);
+
         app.mount('#app');
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/main.js b/main.js
index fc2c1f4..98bbecb 100644
--- a/main.js
+++ b/main.js
@@ -1,3 +1,2 @@
 let linkService = new LinkService();
 linkService.getLinks();
-
diff --git a/src/view/nav-bar.js b/src/view/nav-bar.js
index c32ab38..adbdf5e 100644
--- a/src/view/nav-bar.js
+++ b/src/view/nav-bar.js
@@ -1,4 +1,5 @@
 export default{
+    emits: ['addTeam'],
 	data : function(){
 		return {
 			Home: '',
@@ -33,16 +34,21 @@ export default{
 					this.description+="The description must have at least 20 caracters "
 				}
 			}
-			if (this.errMessage.lenght==0) {
+			if(this.errMessage.length===0){
+                console.log("jappelle la fonction")
 				this.addTeam();
 			}
 		},
 		addTeam: function() {
 			let team = new Team(this.id, this.name, this.description);
 			console.log(team);
+            this.$emit("addTeam",team);
 			this.id='';
 			this.name='';
-			this.description='';
+		},
+        myfun: function() {
+			console.log("gngn");
+			this.clicked=!this.clicked;
 		}
 	},
 	template: 
@@ -73,4 +79,4 @@ export default{
 			<input type="submit" value="Submit" v-on:click="checkFields"/>
 			</form>
 		`
-}
\ No newline at end of file
+}
diff --git a/src/view/team-card.js b/src/view/team-card.js
new file mode 100644
index 0000000..99d4816
--- /dev/null
+++ b/src/view/team-card.js
@@ -0,0 +1,14 @@
+export default{
+    props: {
+        id: Number,
+        nom: String,
+        description: String
+    },
+    methods: {
+	},
+    template: `
+        <div id="teamCard">
+            <span>{{id}}    {{nom}}    description: {{description}}</span>
+        </div>
+    `
+}
