diff --git a/index.html b/index.html
index b4385cb..3498712 100644
--- a/index.html
+++ b/index.html
@@ -11,11 +11,16 @@
 <body>
     <div id="app">
         <navbar></navbar>
+        <team-card></team-card>
     </div>
+
+    <script src="/src/misc/constant.js"></script>
+
     <script type="module">
         import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
 
-        import NavBar from '/src/view/navbar.js';
+        import Navbar from '/src/view/navbar.js';
+        import TeamCard from '/src/view/team_add.js';
       
         const app = createApp({
             data(){
@@ -24,7 +29,8 @@
                 }
             }
         })
-        app.component('NavBar', NavBar);
+        app.component('Navbar', Navbar)
+           .component('TeamCard', TeamCard)
         app.mount('#app');
       </script>
 </body>
diff --git a/src/misc/constant.js b/src/misc/constant.js
new file mode 100644
index 0000000..322ba48
--- /dev/null
+++ b/src/misc/constant.js
@@ -0,0 +1 @@
+const ERROR_COLOR = 'red';
\ No newline at end of file
diff --git a/src/view/link_service.js b/src/view/link_service.js
index 1c533ed..c4e1093 100644
--- a/src/view/link_service.js
+++ b/src/view/link_service.js
@@ -2,9 +2,10 @@ export default class LinkService{
 
     getLinks(){
         return [
-        'https://www.google.com',
+        '',
         'https://www.youtube.com',
         'https://www.github.com',
         ];
     }
+    
 }
diff --git a/src/view/navbar.js b/src/view/navbar.js
index 151b493..2074fc7 100644
--- a/src/view/navbar.js
+++ b/src/view/navbar.js
@@ -1,11 +1,11 @@
 export default {
     template:`
-    <div>
+    <section>
         <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">Teams</a></li>
             <li><a href="#">Results</a></li>
         </ul>
-    </div>
+    </section>
     `
 };
\ No newline at end of file
diff --git a/src/view/team_add.js b/src/view/team_add.js
new file mode 100644
index 0000000..33537fe
--- /dev/null
+++ b/src/view/team_add.js
@@ -0,0 +1,42 @@
+export default {
+    data: function() {
+        return {
+            id: '',
+            name: '',
+            errorMessage: '',
+            errorColor: ERROR_COLOR
+        }
+    },
+    methods: {
+        addTeam: function() {
+            this.errorMessage = '';
+            if (!this.id || !this.name) {
+                this.errorMessage = 'ID and Name are required !';
+                return;
+            }
+
+            const team = { id: this.id, name: this.name};
+            console.log('form.addTeam', team);
+
+            this.$emit('addTeam', team);
+
+            this.id = '';
+            this.name = '';
+        }
+    },
+    template: `<section>
+                <h2>News form</h2>
+                <form @submit.prevent>
+                    <div v-bind:style="{ color: errorColor}">{{ errorMessage }}</div>
+                    <div>
+                        <label>ID</label><br/>
+                        <input type="text" v-model="id"/>
+                    </div>
+                    <div>
+                        <label>Name</label><br/>
+                        <input type="text" v-model="name"/>
+                    </div>
+                    <input type="submit" value="Create Team" @click="addTeam"/>
+                </form>
+            </section>`
+}
\ No newline at end of file
