diff --git a/src/app.css b/src/app.css
index 77bf6af..a8cfce1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,9 @@
 @import '@fontsource/fira-mono';
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
 
 :root {
 	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte
new file mode 100644
index 0000000..8420a66
--- /dev/null
+++ b/src/lib/form/Form.svelte
@@ -0,0 +1,34 @@
+<script>
+    import {title} from '$lib/stores/store'
+
+    const handleSubmit = async () => {
+	console.log("submit");	
+    }
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+    <label for="title">Título</label>
+    <input bind:value={$title} type="text" name="title" placeholder="Título">
+</form>
+
+<style>
+
+    form {
+	margin: 1rem;
+	display: block;
+    }
+
+    input {
+	display: block;
+	width: 100%;
+	font-size: 1rem;
+	font-family: monospace;
+	padding: 0.5rem;
+    }
+
+    label {
+	display: block;
+	font-size: 1.5rem;
+	margin: 0.5rem 0;
+    }
+</style>
diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte
new file mode 100644
index 0000000..b16e88c
--- /dev/null
+++ b/src/lib/preview/Preview.svelte
@@ -0,0 +1,7 @@
+<script>
+ import {title} from '$lib/stores/store'
+</script>
+
+<div class="preview">
+    {$title}
+</div>
diff --git a/src/lib/stores/store.js b/src/lib/stores/store.js
new file mode 100644
index 0000000..3bea4a9
--- /dev/null
+++ b/src/lib/stores/store.js
@@ -0,0 +1,3 @@
+import {writable} from 'svelte/store'
+
+export const title = writable("");
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ea26203..37e0f42 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,10 +8,6 @@
     <slot />
 </main>
 
-<footer>
-    <p><a href="https://dereechoamorir.org">derechoamorir.org</a></p>
-</footer>
-
 <style>
     main {
 	width: 100%;
@@ -20,18 +16,6 @@
 	box-sizing: border-box;
     }
 
-    footer {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding: 40px;
-    }
-
-    footer a {
-	font-weight: bold;
-    }
-
     @media (min-width: 480px) {
 	footer {
 	    padding: 40px 0;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1440332..22f1e65 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+    import Form from '$lib/form/Form.svelte'
+    import Preview from '$lib/preview/Preview.svelte'
     import Header from '$lib/header/Header.svelte'
 </script>
 
@@ -8,16 +10,16 @@
 </svelte:head>
 
 <div class="main">
-    <section class="form"> <!-- Form component  --></section>
-    <section class="preview"> <!-- Preview component --></section>
+    <section class="form"><Form /></section>
+    <section class="preview"><Preview /></section>
 </div>
 
 <style>
     .main {
 	display: grid;
-	grid-template-columns: 1fr 1fr;
+	grid-template-columns: 2fr 3fr;
 	grid-gap: 0.5rem;
-	min-height: calc(100vh - 4rem);
+	min-height: calc(100vh - 5rem);
     }
     .form {
 	grid-column: 1/2;