diff --git a/src/lib/templates/Template.svelte b/src/lib/templates/Template.svelte
deleted file mode 100644
index 49f5fcd..0000000
--- a/src/lib/templates/Template.svelte
+++ /dev/null
@@ -1,2 +0,0 @@
-<script>
-</script>
diff --git a/src/lib/templates/templates.js b/src/lib/templates/templates.js
new file mode 100644
index 0000000..675482b
--- /dev/null
+++ b/src/lib/templates/templates.js
@@ -0,0 +1,6 @@
+import { verde } from '$lib/templates/verde';
+/**
+* @type {Array<Object>} 
+*/
+export const templates = [];
+templates.push(verde);
diff --git a/src/lib/templates/verde.js b/src/lib/templates/verde.js
new file mode 100644
index 0000000..29d13a1
--- /dev/null
+++ b/src/lib/templates/verde.js
@@ -0,0 +1,18 @@
+export const verde = {
+  name: "verde",
+  heading: {
+    top: "50px",
+    bottom: "120px",
+    left: "5rem",
+    right: "5rem",
+    fontSize: "1rem",
+    color: "blue",
+
+  },
+  title: "title",
+  subtitle: "subtitle",
+  content: "content",
+  datetime: "datetime",
+  weekday: "weekday",
+  address: "address",
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 91e25d4..8954221 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,8 @@
 <script>
 	import Form from '$lib/form/Form.svelte';
 	import Preview from '$lib/preview/Preview.svelte';
+
+	let template = 'verde';
 </script>
 
 <svelte:head>
diff --git a/src/routes/[slug]/+page.js b/src/routes/[slug]/+page.js
new file mode 100644
index 0000000..cd69885
--- /dev/null
+++ b/src/routes/[slug]/+page.js
@@ -0,0 +1,7 @@
+/** @type {import('./$types').PageLoad} */
+export function load(event) {
+  const slug = event.params.slug;
+  return {
+    slug
+  }
+}
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
new file mode 100644
index 0000000..6421648
--- /dev/null
+++ b/src/routes/[slug]/+page.svelte
@@ -0,0 +1,45 @@
+<script>
+	import { templates } from '$lib/templates/templates';
+	export let data;
+	import Form from '$lib/form/Form.svelte';
+	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);
+</script>
+
+<svelte:head>
+	<title>Carteles DMD</title>
+	<meta
+		name="description"
+		content="Aplicación para la generación automática de carteles de actividades de DMD"
+	/>
+</svelte:head>
+
+<div class="main">
+	<section class="form"><Form /></section>
+	<section class="preview"><Preview /></section>
+</div>
+
+<style>
+	.main {
+		display: grid;
+		grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content);
+		grid-gap: 0.5rem;
+		min-height: calc(100vh - 5rem);
+	}
+
+	.form {
+		grid-column: 1/2;
+		background-color: rgb(230, 240, 240);
+	}
+
+	.preview {
+		grid-column: 2/3;
+		min-height: 200px;
+		background-color: rgb(240, 238, 240);
+	}
+</style>