diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte
index 424992f..62c9748 100644
--- a/src/lib/preview/Preview.svelte
+++ b/src/lib/preview/Preview.svelte
@@ -1,6 +1,5 @@
 <script>
-	// import './verde.css';
-	import { templates } from '$lib/templates/templates';
+	export let templateIndex;
 	import Heading from '$lib/templates/Heading.svelte';
 	import {
 		title,
@@ -9,7 +8,6 @@
 		weekday,
 		address,
 		content,
-		heading,
 		organizedBy,
 		colabs,
 		canvas
@@ -42,8 +40,8 @@
 
 <div class="preview">
 	<div class="result" bind:this={$canvas}>
-		<div class="heading">{$heading}</div>
-		<Heading template={'verde'} />
+		<!-- <div class="heading">{$heading}</div> -->
+		<Heading {templateIndex} />
 		<div class="title">{$title}</div>
 		<div class="subtitle">{$subtitle}</div>
 		<div class="content">{@html $content}</div>
@@ -99,5 +97,218 @@
 </div>
 
 <style>
+	.preview {
+		padding: 0.5rem;
+		display: grid;
+		justify-content: center;
+		grid-template-columns: 1fr;
+		align-items: start;
+	}
+
+	.result {
+		display: block;
+		aspect-ratio: 1/1.4142;
+		min-height: 842px;
+		align-self: center;
+		/* background-color: rebeccapurple; */
+		width: auto;
+		background-image: url('/imagen01.png');
+		background-size: contain;
+		position: relative;
+		padding: 1rem;
+		/* border-radius: 0.5rem; */
+	}
+
+	.title {
+		position: absolute;
+		top: 320px;
+		left: 1rem;
+		right: 1rem;
+		font-family: 'Gill Sans', sans-serif;
+		font-size: 2.9rem;
+		font-variant: small-caps;
+		line-height: 2.5rem;
+		color: firebrick;
+		font-weight: 600;
+		height: 5rem;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: end;
+		text-align: center;
+	}
+
+	.subtitle {
+		position: absolute;
+		display: flex;
+		top: 410px;
+		left: 1rem;
+		right: 2rem;
+		font-size: 1.2rem;
+		color: #787;
+		text-transform: uppercase;
+		height: 3rem;
+		overflow: hidden;
+		text-align: center;
+		align-items: start;
+		justify-content: center;
+	}
+
+	.content {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		top: 480px;
+		left: 1.5rem;
+		right: 17rem;
+		height: 8.5rem;
+		font-size: 0.8rem;
+		color: #222;
+		line-height: 1rem;
+		overflow: hidden;
+	}
+
+	.weekday {
+		position: absolute;
+		text-transform: uppercase;
+		top: 600px;
+		left: 18.5rem;
+		right: 5rem;
+		color: white;
+		max-height: 2rem;
+		font-size: 1.3rem;
+		font-weight: 700;
+		overflow: hidden;
+		text-align: center;
+	}
+
+	.date {
+		position: absolute;
+		text-transform: uppercase;
+		top: 625px;
+		left: 18.5rem;
+		right: 4rem;
+		font-size: 1.1rem;
+		font-weight: 700;
+		color: white;
+		max-height: 2rem;
+		overflow: hidden;
+		text-align: center;
+	}
+
+	.time {
+		position: absolute;
+		top: 645px;
+		left: 18.5rem;
+		right: 5rem;
+		font-size: 1.8rem;
+		color: white;
+		max-height: 2rem;
+		overflow: hidden;
+		text-align: center;
+		font-weight: 700;
+	}
+
+	.address {
+		position: absolute;
+		display: grid;
+		top: 620px;
+		left: 2rem;
+		right: 20rem;
+		font-size: 1rem;
+		text-align: center;
+		font-weight: 700;
+		line-height: 1.5rem;
+		font-family: sans-serif;
+		color: firebrick;
+		height: 4.5rem;
+		overflow: hidden;
+		white-space: pre-wrap;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.imagetitle {
+		position: absolute;
+		top: 720px;
+		font-size: 0.8rem;
+		color: #444;
+	}
+
+	.organized-by {
+		position: absolute;
+		top: 740px;
+		left: 1rem;
+		right: 1rem;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
+		grid-template-rows: min-content;
+		grid-auto-rows: auto;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.organization {
+		margin: 0 1rem;
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.organization img {
+		max-height: 48px;
+		max-width: 100px;
+		margin: 0 auto;
+		opacity: 75%;
+	}
+
+	.caption {
+		margin: 0.5rem 0;
+		font-size: 0.7rem;
+		font-family: sans-serif;
+		text-transform: uppercase;
+		color: #666;
+	}
+
+	.orgcolab {
+		position: absolute;
+		top: 720px;
+		height: 7rem;
+		overflow: hidden;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: min-content 1fr;
+		grid-gap: 0.25rem;
+		justify-content: start;
+		align-items: center;
+		width: 100%;
+	}
+
+	.org {
+		grid-row: 1/2;
+		grid-column: 1/2;
+		font-size: 0.8rem;
+	}
+
+	.colab {
+		font-size: 0.8rem;
+		grid-row: 1/2;
+		grid-column: 2/3;
+	}
+
+	.orgmixed {
+		grid-row: 2/3;
+		grid-column: 1/2;
+		display: flex;
+	}
+
+	.colabmixed {
+		grid-row: 2/3;
+		grid-column: 2/3;
+		display: flex;
+	}
 	/* @import url(`'${template}.css'`); */
 </style>
diff --git a/src/lib/templates/heading.svelte b/src/lib/templates/heading.svelte
index 40a8f5b..9ce4ef7 100644
--- a/src/lib/templates/heading.svelte
+++ b/src/lib/templates/heading.svelte
@@ -1,15 +1,30 @@
 <script>
-  import {templates} from '$lib/templates/templates'
-  export let template;
+	import { templates } from '$lib/templates/templates';
+	console.log(templates);
+	/** @type number */ export let templateIndex;
+	console.log(templateIndex);
+	import { heading } from '$lib/stores/store';
 </script>
 
-<div class="heading" style=`top: ${templates[template].heading.top}`>
-	<input type="text" placeholder="Ej. Charla, taller, coloquio" />
+<div
+	class="heading"
+	style="
+    top: {templates[templateIndex].heading.top}px;
+    height: {templates[templateIndex].heading.height}rem;
+    left: {templates[templateIndex].heading.left}rem;
+    right: {templates[templateIndex].heading.right}rem;
+    color: {templates[templateIndex].heading.color};
+    font-size: {templates[templateIndex].heading.fontSize}rem;
+    font-family: {templates[templateIndex].heading.fontFamily};
+    "
+>
+	{$heading}
 </div>
 
-
 <style>
-  .heading {
-    position: absolute;
-  }
+	.heading {
+		position: absolute;
+		font-variant: small-caps;
+		overflow: hidden;
+	}
 </style>
diff --git a/src/lib/templates/templates.js b/src/lib/templates/templates.js
index 289d461..a9a8dcb 100644
--- a/src/lib/templates/templates.js
+++ b/src/lib/templates/templates.js
@@ -1,15 +1,26 @@
 import { verde } from '$lib/templates/verde';
+/**
+* @typedef {{
+* top: number;
+* height: number;
+* right: number;
+* left: number;
+* color: string;
+* fontSize: number;
+* fontFamily: string;
+}} Element
+*/
 
 /**
  * @typedef {{
   * name: string;
-  * heading: Object;
-  * title: string;
-  * subtitle: string;
-  * datetime: string;
-  * weekday: string;
-  * content: string;
-  * address: string;
+  * heading: Element;
+  * title: Element;
+  * subtitle: Element;
+  * datetime: Element;
+  * weekday: Element;
+  * content: Element;
+  * address: Element;
  * }} Template
  */
 
diff --git a/src/lib/templates/verde.js b/src/lib/templates/verde.js
index 0ec4041..bf6982c 100644
--- a/src/lib/templates/verde.js
+++ b/src/lib/templates/verde.js
@@ -12,18 +12,66 @@
 export const verde = {
   name: "verde",
   heading: {
-    top: "50px",
-    bottom: "120px",
-    left: "5rem",
-    right: "5rem",
-    fontSize: "1rem",
-    color: "blue",
-
+    top: 300,
+    height: 1.2,
+    left: 1,
+    right: 1,
+    fontSize: 1,
+    color: "grey",
+    fontFamily: "sans-serif"
+  },
+  title: {
+    top: 100,
+    height: 6,
+    left: 2,
+    right: 2,
+    fontSize: 1.8,
+    color: "firebrick",
+    fontFamily: "Gill Sans, sans-serif"
+  },
+  subtitle: {
+    top: 100,
+    height: 6,
+    left: 2,
+    right: 2,
+    fontSize: 1.8,
+    color: "firebrick",
+    fontFamily: "Gill Sans, sans-serif"
+  },
+  content: {
+    top: 100,
+    height: 6,
+    left: 2,
+    right: 2,
+    fontSize: 1.8,
+    color: "firebrick",
+    fontFamily: "Gill Sans, sans-serif"
+  },
+  datetime: {
+    top: 400,
+    height: 4,
+    left: 2,
+    right: 2,
+    fontSize: 1,
+    color: "firebrick",
+    fontFamily: "sans-serif"
+  },
+  weekday: {
+    top: 500,
+    height: 1.5,
+    left: 2,
+    right: 2,
+    fontSize: 1,
+    color: "#333",
+    fontFamily: "sans-serif"
+  },
+  address: {
+    top: 500,
+    height: 1.5,
+    left: 2,
+    right: 2,
+    fontSize: 1,
+    color: "#333",
+    fontFamily: "sans-serif"
   },
-  title: "title",
-  subtitle: "subtitle",
-  content: "content",
-  datetime: "datetime",
-  weekday: "weekday",
-  address: "address",
 }
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 6421648..3c04646 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -5,10 +5,7 @@
 	import Preview from '$lib/preview/Preview.svelte';
 
 	const slug = data.slug;
-	const i = templates.map((e) => e.name).indexOf(slug);
-
-	const template = templates[i];
-	console.log('La plantilla es ', template);
+	const templateIndex = templates.map((e) => e.name).indexOf(slug);
 </script>
 
 <svelte:head>
@@ -21,7 +18,7 @@
 
 <div class="main">
 	<section class="form"><Form /></section>
-	<section class="preview"><Preview /></section>
+	<section class="preview"><Preview {templateIndex} /></section>
 </div>
 
 <style>