diff --git a/components/CookbookForm.js b/components/CookbookForm.js
index b6c2f5c..72000a4 100644
--- a/components/CookbookForm.js
+++ b/components/CookbookForm.js
@@ -12,26 +12,33 @@ export default {
 		return { title, description, nature, logs, who };
 	},
 	template: `
+        <section class='recipe'> 
+          <div class="entry"> 
+            <label for="title">Title</label>
+            <input type="text" v-model='title'/>
+          </div>
 
-    <section class='recipe'>
-      <label for="title">Title</label>
-      <input type="text" v-model='title'/>
+          <div class="entry"> 
+            <label for="description">Description</label>
+            <textarea v-model="description"></textarea>
+          </div>
 
-      <label for="description">Description</label>
-      <textarea v-model="description"></textarea>
- 
-      <label for="nature">Nature of the input</label>
-      <input type="text" v-model="nature" />
+          <div class="entry"> 
+            <label for="nature">Nature of the input</label>
+            <input type="text" v-model="nature" />
+          </div>
 
-      
-      <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>
+          <div class="entry"> 
+            <label for="log">Process Log</label>
+            <textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index" :placeholder="index + 1"></textarea>
+            <button class="add" @click="logs.push('')">+</button>
+          </div>
 
-      <label for="who">Who</label>
-      <input type="text" v-model="who" />
-    </section>
+          <div class="entry"> 
+            <label for="who">Who</label>
+            <input type="text" v-model="who" />
+          </div>
+        </section>
 
     <dl>
       <dt>Title</dt>
@@ -45,9 +52,9 @@ export default {
 
       <dt>Log</dt>
       <dd>
-        <ul>
+        <ol>
           <li v-for="log in logs">{{log}}</li>
-        </ul>
+        </ol>
       </dd>
             
       <dt>Who</dt>
diff --git a/index.html b/index.html
index bf33126..523d29a 100644
--- a/index.html
+++ b/index.html
@@ -4,13 +4,14 @@
 		<meta charset="UTF-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<script src="https://unpkg.com/vue@3"></script>
 		<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>
+		<div id="app">
+			<cookbook-form></cookbook-form>
+		</div>
 
 		<script type="module">
 			import CookbookForm from "./components/CookbookForm.js";
diff --git a/style.css b/style.css
index 6fbbd8d..d5cbb09 100644
--- a/style.css
+++ b/style.css
@@ -1,2 +1,60 @@
-.recipe {
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	font-size: 24px;
+	line-height: 1.6;
+	font-family: sans-serif;
+}
+
+section.recipe {
+	display: inline-block;
+	margin: 0 auto;
+	padding: 32px;
+	width: 50ch;
+	border-radius: 0.5rem;
+	background: linear-gradient(300deg, rgba(242, 173, 131, 1) 0%, rgba(207, 143, 73, 1) 100%);
+	box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1);
+}
+
+.recipe label,
+.recipe input,
+.recipe textarea {
+	font-family: sans-serif;
+	display: block;
+	width: 100%;
+	max-width: 100%;
+}
+
+input,
+textarea,
+button {
+	color: currentColor;
+	background: none;
+	border: 1px solid currentColor;
+	padding: 8px;
+	font-size: 1rem;
+}
+
+button.add {
+	display: inline-block;
+	width: 48px;
+	height: 48px;
+	margin-top: 16px;
+	cursor: pointer;
+}
+
+textarea + textarea {
+	margin-top: 16px;
+}
+
+label {
+	font-style: italic;
+	font-size: 19px;
+}
+
+.entry + .entry {
+	margin-top: 32px;
 }
