diff --git a/components/CookbookForm.js b/components/CookbookForm.js
index 335693a..b6c2f5c 100644
--- a/components/CookbookForm.js
+++ b/components/CookbookForm.js
@@ -1,43 +1,57 @@
 export default {
-  name : "CookbookForm",
-  setup(){
-    const {ref}=Vue 
-
-    const title = ref('')
-    const description = ref('')
-    const nature = ref('')
-    const log = ref('')
-    const who = ref('')
-
-    return{title,description,nature,log,who}
-  },
-    template: `
-    <form action="">
-    <label for="title">Title</label>
-    <input type="text" v-model='title'/>
-
-    <label for="description">Description</label>
-    <textarea v-model="description"></textarea>
-
-    <label for="nature">Nature of the input</label>
-    <input type="text" v-model="nature" />
-
-    <label for="log">Process Log</label>
-    <textarea v-model="log"></textarea>
-
-    <label for="who">Who</label>
-    <input type="text" v-model="who" />
-  </form>
-  
-
-  <pre>
-  title:{{title}}
-  description:{{description}}
-  nature:{{nature}}
-  log:{{log}}
-  who:{{who}}
-  </pre>
-
-
-  `
-}
\ No newline at end of file
+	name: "CookbookForm",
+	setup() {
+		const { ref } = Vue;
+
+		const title = ref("");
+		const description = ref("");
+		const nature = ref("");
+		const logs = ref([""]);
+		const who = ref("");
+
+		return { title, description, nature, logs, who };
+	},
+	template: `
+
+    <section class='recipe'>
+      <label for="title">Title</label>
+      <input type="text" v-model='title'/>
+
+      <label for="description">Description</label>
+      <textarea v-model="description"></textarea>
+ 
+      <label for="nature">Nature of the input</label>
+      <input type="text" v-model="nature" />
+
+      
+      <label for="log">Process Log</label>
+    
+      <textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index"></textarea>
+      <button @click="logs.push('')">Add Step</button>
+
+      <label for="who">Who</label>
+      <input type="text" v-model="who" />
+    </section>
+
+    <dl>
+      <dt>Title</dt>
+      <dd>{{title}}</dd>     
+
+      <dt>Description</dt>
+      <dd>{{description}}</dd>
+
+      <dt>Nature</dt>
+      <dd>{{nature}}</dd>
+
+      <dt>Log</dt>
+      <dd>
+        <ul>
+          <li v-for="log in logs">{{log}}</li>
+        </ul>
+      </dd>
+            
+      <dt>Who</dt>
+      <dd>{{who}}</dd>
+    </dl>
+  `,
+};
diff --git a/index.html b/index.html
index def0d11..bf33126 100644
--- a/index.html
+++ b/index.html
@@ -1,41 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>diffractive reading</title>
-</head>
-<body>
-
-
-
-
-
-
-
-
-
-
-    <script src="https://unpkg.com/vue@3"></script>
-
-<div id="app"><cookbook-form></cookbook-form></div>
-
-
-<script type="module">
-    import CookbookForm from "./components/CookbookForm.js"  
-    const { createApp } = Vue
-  createApp({
-    components : {CookbookForm},
-    data() {
-      return {
-        message: 'Hello Vue!'
-      }
-    }
-  }).mount('#app')
-</script>
-
-
-    
-</body>
-</html>
\ No newline at end of file
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="style.css" />
+		<title>diffractive reading</title>
+	</head>
+	<body>
+		<script src="https://unpkg.com/vue@3"></script>
+
+		<div id="app"><cookbook-form></cookbook-form></div>
+
+		<script type="module">
+			import CookbookForm from "./components/CookbookForm.js";
+			const { createApp } = Vue;
+			createApp({
+				components: { CookbookForm },
+				data() {
+					return {
+						message: "Hello Vue!",
+					};
+				},
+			}).mount("#app");
+		</script>
+	</body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6fbbd8d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,2 @@
+.recipe {
+}
