diff --git a/README.md b/README.md
index 5c91169..ca45bc8 100644
--- a/README.md
+++ b/README.md
@@ -1,38 +1,15 @@
-# create-svelte
+# Carteles de DMD
+Aplicación para que los grupos creen sus propios carteles.
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+## TODO
+* [x] Separar fecha y hora en campos distintos.
+* [x] Quitar el 'de' de la fecha
+* [ ] Generar texto de boletín junto al cartel.
 
-## Creating a project
+### Verde
+* [ ] Cambiar color de 'dirección' de rojo a verde
+* [ ] Cambiar la plantilla por modelo nuevo
 
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+### Azul
+* [ ] Fecha y hora juntas en la esquina superior derecha
+* [ ] Intentar incluir "contenido" en la esquina superior izquierda
diff --git a/src/lib/form/Colabs.svelte b/src/lib/form/Colabs.svelte
index 6049f8a..bcb540c 100644
--- a/src/lib/form/Colabs.svelte
+++ b/src/lib/form/Colabs.svelte
@@ -35,7 +35,12 @@
 					x
 				</div>
 				<img class="organization-logo" src={organization.image} alt={organization.text} />
-				<input class="logo-title" type="text" bind:value={organization.text} />
+				<input
+					class="logo-title"
+					type="text"
+					bind:value={organization.text}
+					placeholder="Nombre(opcional)"
+				/>
 			</div>
 		{/each}
 	{/if}
@@ -69,14 +74,14 @@
 		grid-gap: 0.5rem;
 		align-items: center;
 		justify-content: center;
-		margin: 1rem;
+		margin: 0.25rem 1rem;
 		background-color: #ddd;
 		padding: 0.25rem;
 	}
 
 	.organization-logo {
-		max-height: 64px;
-		max-width: 100px;
+		max-height: 72px;
+		max-width: 144px;
 		margin: 0 auto;
 		background-color: #fff;
 	}
@@ -94,7 +99,7 @@
 
 	input {
 		display: block;
-		max-width: 100px;
+		width: 100%;
 	}
 
 	button {
diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte
index c2e88e3..8528ced 100644
--- a/src/lib/form/Form.svelte
+++ b/src/lib/form/Form.svelte
@@ -9,6 +9,7 @@
 		subtitle,
 		content,
 		date,
+		time,
 		weekday,
 		address,
 		canvas
@@ -96,9 +97,13 @@
 	</div>
 
 	<div class="form-group when">
-		<div class="daymonthhour">
-			<label for="date">Fecha y hora</label>
-			<input bind:value={$date} type="datetime-local" name="date" />
+		<div class="daymonth">
+			<label for="date">Fecha</label>
+			<input bind:value={$date} type="date" name="date" />
+		</div>
+		<div class="time">
+			<label for="time">Hora</label>
+			<input bind:value={$time} type="time" name="time" />
 		</div>
 		<div class="dayname">
 			<label for="weekday">Día de la semana</label>
@@ -180,7 +185,7 @@ Albacete"
 
 	.form-group.when {
 		display: grid;
-		grid-template-columns: 1fr 1fr;
+		grid-template-columns: 1fr 1fr 1fr;
 		grid-gap: 0.25rem;
 	}
 </style>
diff --git a/src/lib/form/Organized.svelte b/src/lib/form/Organized.svelte
index c88722d..8f6d17a 100644
--- a/src/lib/form/Organized.svelte
+++ b/src/lib/form/Organized.svelte
@@ -35,7 +35,12 @@
 					x
 				</div>
 				<img class="organized-logo" src={organization.image} alt={organization.text} />
-				<input class="logo-title" type="text" bind:value={organization.text} />
+				<input
+					class="logo-title"
+					type="text"
+					bind:value={organization.text}
+					placeholder="Nombre (opcional)"
+				/>
 			</div>
 		{/each}
 	{/if}
@@ -68,13 +73,13 @@
 		grid-gap: 0.5rem;
 		align-items: center;
 		justify-content: center;
-		margin: 1rem;
+		margin: 0.25rem 1rem;
 		background-color: #ddd;
 		padding: 0.25rem;
 	}
 	.organized-logo {
-		max-height: 64px;
-		max-width: 100px;
+		max-height: 72px;
+		max-width: 128px;
 		margin: 0 auto;
 		background-color: #fff;
 	}
@@ -91,7 +96,7 @@
 
 	input {
 		display: block;
-		max-width: 100px;
+		width: 100%;
 	}
 
 	button {
diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte
index 69e02bf..9e5c1de 100644
--- a/src/lib/preview/Preview.svelte
+++ b/src/lib/preview/Preview.svelte
@@ -8,6 +8,7 @@
 	import Title from '$lib/templates/Title.svelte';
 	import Subtitle from '$lib/templates/Subtitle.svelte';
 	import Content from '$lib/templates/Content.svelte';
+	import Time from '$lib/templates/Time.svelte';
 	import Date from '$lib/templates/Date.svelte';
 	import Weekday from '$lib/templates/Weekday.svelte';
 	import Address from '$lib/templates/Address.svelte';
@@ -20,8 +21,9 @@
 			<Title {templateIndex} />
 			<Subtitle {templateIndex} />
 			<Content {templateIndex} />
-			<Weekday {templateIndex} />
 			<Date {templateIndex} />
+			<Time {templateIndex} />
+			<Weekday {templateIndex} />
 			<Address {templateIndex} />
 		{/if}
 
@@ -128,7 +130,7 @@
 		max-height: 64px;
 		max-width: 128px;
 		margin: 0 auto;
-		opacity: 75%;
+		opacity: 100%;
 	}
 
 	.caption {
diff --git a/src/lib/preview/verde.css b/src/lib/preview/verde.css
deleted file mode 100644
index af813b6..0000000
--- a/src/lib/preview/verde.css
+++ /dev/null
@@ -1,226 +0,0 @@
-.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; */
-}
-
-.heading {
-	position: absolute;
-	top: 300px;
-	left: 1rem;
-	right: 1rem;
-	font-size: 1rem;
-	color: grey;
-	font-variant: small-caps;
-	height: 1.2rem;
-	overflow: hidden;
-}
-
-.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;
-}
diff --git a/src/lib/stores/store.js b/src/lib/stores/store.js
index edea929..798a479 100644
--- a/src/lib/stores/store.js
+++ b/src/lib/stores/store.js
@@ -5,6 +5,7 @@ export const heading = writable("");
 export const subtitle = writable("");
 export const content = writable("");
 export const date = writable("");
+export const time = writable("");
 export const weekday = writable("");
 export const address = writable("");
 export const organizedBy = writable([]);
diff --git a/src/lib/templates/Date.svelte b/src/lib/templates/Date.svelte
index aab284b..d13b47a 100644
--- a/src/lib/templates/Date.svelte
+++ b/src/lib/templates/Date.svelte
@@ -5,38 +5,36 @@
 	/** @type number */ export let templateIndex;
 	import { date } from '$lib/stores/store';
 
-	/** @typedef
-	 * {{
-	 * date: string;
-	 * time: string;
-	 * }} Newdate
-	 */
+	/** @type {string} */ let newdate;
 
-	/** @type {Newdate} */ let newdate = { date: '', time: '' };
+	/**
+	 * @param {string} date - Fecha del evento
+	 * @returns {string} - Fecha en dia (número) mes (letras)
+	 */
+	const convertDate = (date) => {
+		if (date == undefined) {
+			return '';
+		}
+		/** @type {string} */ const monthNumber = date.split('-')[1];
+		/** @type {string} */ let day = date.split('-')[2].split('T')[0];
+		/** @type {number} */ const dayNumber = Number(day);
+		/** @type {string} */ const month = getMonthName(monthNumber);
 
-	const convertDateTime = (/** @type {(string | undefined)} */ datetime) => {
-		if (datetime == undefined) {
-			return {
-				date: '',
-				time: ''
-			};
+		/** Removes 0 on single digit days */
+		if (dayNumber < 10) {
+			day = day.charAt(1);
 		}
-		const monthNumber = datetime.split('-')[1];
-		const day = datetime.split('-')[2].split('T')[0];
-		const time = datetime.split('T')[1];
-		const month = getMonthName(monthNumber);
-		return {
-			date: `${day} de ${month}`,
-			time: time
-		};
+
+		/** @type {string} */ const res = `${day} ${month}`;
+		return res;
 	};
 
 	$: if ($date !== '') {
-		newdate = convertDateTime($date);
+		newdate = convertDate($date);
 	}
 </script>
 
-{#if templates[templateIndex] && newdate.date}
+{#if templates[templateIndex] && newdate}
 	<div
 		class="date"
 		style="
@@ -52,26 +50,7 @@
 		line-height: {templates[templateIndex].date.lineHeight}rem;
     "
 	>
-		{newdate.date}
-	</div>
-{/if}
-{#if templates[templateIndex] && newdate.time}
-	<div
-		class="time"
-		style="
-    top: {templates[templateIndex].time.top}px;
-    height: {templates[templateIndex].time.height}rem;
-    left: {templates[templateIndex].time.left}rem;
-    right: {templates[templateIndex].time.right}rem;
-    color: {templates[templateIndex].time.color};
-    font-size: {templates[templateIndex].time.fontSize}rem;
-    font-family: {templates[templateIndex].time.fontFamily};
-		text-align: {templates[templateIndex].time.textAlign};
-		font-weight: {templates[templateIndex].time.fontWeight};
-		line-height: {templates[templateIndex].time.lineHeight}rem;
-    "
-	>
-		{newdate.time}
+		{newdate}
 	</div>
 {/if}
 
@@ -82,9 +61,4 @@
 		overflow: hidden;
 		display: block;
 	}
-
-	.time {
-		position: absolute;
-		overflow: hidden;
-	}
 </style>
diff --git a/src/lib/templates/Time.svelte b/src/lib/templates/Time.svelte
new file mode 100644
index 0000000..dfbdd21
--- /dev/null
+++ b/src/lib/templates/Time.svelte
@@ -0,0 +1,35 @@
+<script>
+	import { templates } from '$lib/templates/templates';
+
+	/** @type number */ export let templateIndex;
+	import { time } from '$lib/stores/store';
+</script>
+
+{#if templates[templateIndex] && $time !== ''}
+	<div
+		class="time"
+		style="
+    top: {templates[templateIndex].time.top}px;
+    height: {templates[templateIndex].time.height}rem;
+    left: {templates[templateIndex].time.left}rem;
+    right: {templates[templateIndex].time.right}rem;
+    color: {templates[templateIndex].time.color};
+    font-size: {templates[templateIndex].time.fontSize}rem;
+    font-family: {templates[templateIndex].time.fontFamily};
+		text-align: {templates[templateIndex].time.textAlign};
+		font-weight: {templates[templateIndex].time.fontWeight};
+		line-height: {templates[templateIndex].time.lineHeight}rem;
+    "
+	>
+		{$time}
+	</div>
+{/if}
+
+<style>
+	.time {
+		position: absolute;
+		text-transform: uppercase;
+		overflow: hidden;
+		display: block;
+	}
+</style>