diff --git a/.storybook/preview.js b/.storybook/preview.js
index 48afd56..d1716ee 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,3 +1,5 @@
+import '/src/assets/main.css'
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
diff --git a/src/App.vue b/src/App.vue
index 7c18691..76d7219 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,45 @@
 <template>
   <header>incoming header</header>
 
-  <main>this will be main area</main>
+  <main>
+    <StepInput
+      v-model:stepText="bio"
+      :stepNumber="1"
+      stepLabel="Step 1: Add your current pitch"
+    />
+
+    <StepInput
+      v-model:stepText="jobDescription"
+      :stepNumber="2"
+      stepLabel="Step 2: Paste a job description"
+    />
+
+    <BaseButton @click="createMelange">Generate</BaseButton>
+
+    <div class="border">
+      <h2>Melange list:</h2>
+      <ul>
+        <li class="m-2 border" v-for="(item, index) in melange" :key="index">
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+  </main>
 </template>
+
+<script setup>
+import { ref } from 'vue'
+
+import BaseButton from './components/BaseButton.vue'
+import StepInput from './components/StepInput.vue'
+
+const bio = ref('')
+const jobDescription = ref('')
+
+const melange = ref([])
+const createMelange = () => {
+  melange.value.push(`${bio.value}, ${jobDescription.value}`)
+
+  jobDescription.value = ''
+}
+</script>