diff --git a/src/components/InputField.vue b/src/components/InputField.vue
new file mode 100644
index 0000000..7dd4695
--- /dev/null
+++ b/src/components/InputField.vue
@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <label for="">Name</label>
+        <input 
+            type="text" 
+            :value="value"
+            style="padding: 30px; border: 2px solid green;"
+            @input="$emit('input', $event.target.value)"
+        >
+    </div> 
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: String,
+            required: true
+        }
+    },
+    // methods: {
+    //     updateName(e) {
+    //         console.log(e.target.value);
+    //         this.$emit('update-name', e.target.value);
+    //     }
+    // }
+}
+</script>
+
diff --git a/src/components/KossieCoder.vue b/src/components/KossieCoder.vue
index 6aeb0f9..f15d9c4 100644
--- a/src/components/KossieCoder.vue
+++ b/src/components/KossieCoder.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <h1>{{ title }}</h1>
         <p>{{ name }}</p><br>
         <button @click="updateName">Change Name</button>
     </div>
@@ -7,9 +8,20 @@
 
 <script>
 export default {
+    props: {
+        title: {
+            type: String,
+            default: 'default title'
+        },
+        name: {
+            type: String,
+            default: 'default name'
+        },
+
+    },
     data() {
         return {
-            name: 'Kossie Coder',        
+            // name: 'Kossie Coder',        
         }
     },
 
diff --git a/src/views/About.vue b/src/views/About.vue
index 7383f23..6169d65 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -11,6 +11,6 @@ import KossieCoder from '@/components/KossieCoder.vue';
 export default {
   components: {
     KossieCoder
-  }  
+  },
 }
 </script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a7c7ba1..a6f0f13 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,23 +1,30 @@
 <template>
   <div>
     <h1>This is Home page</h1>
-    <KossieCoder />
+    <form action="">
+      <InputField v-model="name" />
+      <br><button>Submit</button>
+    </form>
+    {{ name }}
   </div>
 </template>
 
 <script>
-import KossieCoder from '@/components/KossieCoder.vue';
-
+import InputField from '@/components/InputField.vue';
 export default {
   components: {
-    KossieCoder
+    InputField
   },
-
   data() {
     return {
-      name: 'Kossie Coder'
+      name: ''
     }
-  }
+  },
+  // methods: {
+  //   updateName(name) {
+  //     this.name = name;
+  //   }
+  // }
 }
 </script>