diff --git a/vue-cli-01-a-new-vue-project/src/App.vue b/vue-cli-01-a-new-vue-project/src/App.vue
index b015b13..6863865 100644
--- a/vue-cli-01-a-new-vue-project/src/App.vue
+++ b/vue-cli-01-a-new-vue-project/src/App.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <header><h1>My Friends</h1></header>
+        <new-friend></new-friend>
         <ul>
             <friend-contact
                 v-for="friend in friends"
diff --git a/vue-cli-01-a-new-vue-project/src/components/NewFriend.vue b/vue-cli-01-a-new-vue-project/src/components/NewFriend.vue
new file mode 100644
index 0000000..d54f529
--- /dev/null
+++ b/vue-cli-01-a-new-vue-project/src/components/NewFriend.vue
@@ -0,0 +1,21 @@
+<template>
+    <form>
+        <div>
+            <label>Name: </label>
+            <input type="text" />
+        </div>
+        <div>
+            <label>Phone: </label>
+            <input type="tel" />
+        </div>
+        <div>
+            <label>Email: </label>
+            <input type="email" />
+        </div>
+        <div><button>Add Contact</button></div>
+    </form>
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/vue-cli-01-a-new-vue-project/src/main.js b/vue-cli-01-a-new-vue-project/src/main.js
index 5b8f825..7200c0b 100644
--- a/vue-cli-01-a-new-vue-project/src/main.js
+++ b/vue-cli-01-a-new-vue-project/src/main.js
@@ -1,10 +1,12 @@
 import { createApp } from "vue";
 
 import App from "./App.vue";
-import FriendContact from "./components/FriendContact";
+import FriendContact from "./components/FriendContact.vue";
+import NewFriend from "./components/NewFriend.vue";
 
 const app = createApp(App);
 
 app.component("friend-contact", FriendContact);
+app.component("new-friend", NewFriend);
 
 app.mount("#app");