diff --git a/src/components/KossieCoder.vue b/src/components/KossieCoder.vue
index f15d9c4..7f3cce6 100644
--- a/src/components/KossieCoder.vue
+++ b/src/components/KossieCoder.vue
@@ -1,8 +1,11 @@
 <template>
     <div>
-        <h1>{{ title }}</h1>
-        <p>{{ name }}</p><br>
-        <button @click="updateName">Change Name</button>
+        <p>header</p>
+        <slot name="header" :kossie="kossie"></slot>
+        <p>Body</p>
+        <slot></slot>
+        <p>footer
+        </p>
     </div>
 </template>
 
@@ -21,6 +24,7 @@ export default {
     },
     data() {
         return {
+            kossie: 'coder'
             // name: 'Kossie Coder',        
         }
     },
diff --git a/src/views/About.vue b/src/views/About.vue
index 6169d65..8dfd009 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
-    <KossieCoder />
+    <KossieCoder>
+      <template #header="{ kossie }">
+        <p>header111 {{ kossie }}</p>
+      </template>
+      <template #default>
+        hello22
+      </template>
+    </KossieCoder>
   </div>
 </template>
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a6f0f13..5130c8f 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <h1>This is Home page</h1>
-    <form action="">
+    <!-- <form action=""> -->
       <InputField v-model="name" />
-      <br><button>Submit</button>
-    </form>
+      <br><button @click="updateName">Submit</button>
+    <!-- </form> -->
     {{ name }}
   </div>
 </template>
@@ -17,14 +17,40 @@ export default {
   },
   data() {
     return {
-      name: ''
+      name: 'Kossie Coder'
     }
   },
-  // methods: {
-  //   updateName(name) {
-  //     this.name = name;
-  //   }
-  // }
+
+  beforeCreate() {
+    console.log('beforeCreate', this.name);
+  },
+
+  created() {
+    console.log('created', this.name);
+  },
+  beforeMount() {
+    alert('beforeMount')
+  },
+  mounted() {
+    alert('mounted')
+  },
+  beforeUpdate() {
+    alert('beforeUpdate')
+  },
+  updated() {
+    alert('updated')
+  },
+  beforeDestroy() {
+    alert('beforeDestroy')
+  },
+  destroyed() {
+    alert('destroyed')
+  },
+  methods: {
+    updateName() {
+      this.name = 'hello';
+    }
+  }
 }
 </script>