diff --git a/assets/css/main.css b/assets/css/main.css
index 1740f7b..dd2c732 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -8,16 +8,23 @@ h1, h2, h3, h4 {
   color: #363636;
   text-transform: uppercase;
   margin: 0;
-	padding: 0;
-	border: 0;
+  padding: 0;
+  border: 0;
 	font-size: 100%;
 	vertical-align: baseline;
   text-align: center;
 }
 
 h2 {
- text-transform: none;
- font-size: 90%;
+	font-size: 90%;
+}
+
+h3 {
+  font-size: 85%;
+}
+
+h4 {
+  font-size: 75%;
 }
 
 /* Header */
@@ -168,7 +175,19 @@ table a{
   overflow-x: auto;
   overflow-y: auto;
 }
-.code p, h1, h2, h3 {
+.code h1{
+  color: #dadada;
+}
+.code h2 {
+  color: #dadada;
+}
+.code h3 {
+  color: #d3ebff;
+}
+.code h4 {
+  color: #d3ebff;
+}
+.code p {
   color: #dadada;
 }
 .code a {
@@ -178,6 +197,17 @@ table a{
   /* width: 80px; height: 80px; */
   width: 25%;
 }
+.code fieldset{
+  margin: 1px;
+  border-color: #dadada;
+  border-style: groove;
+}
+.code fieldset legend {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 90%;
+  color: #d3ebff;
+}
 
 .blockquote {
   border-left: solid 4px #dadada;
@@ -199,8 +229,20 @@ table a{
   background: #1f2c3d;
   border-radius: 3px;
 }
-.sketches h1, h2, h3, h4 {
-  color: #d3ebff;
+.sketches h1 {
+  color: #dadada;
+}
+.sketches h2 {
+  color: #dadada;
+}
+.sketches h3 {
+  color: #dadada;
+}
+.sketches h4 {
+  color: #dadada;
+}
+.sketches p {
+  color: #dadada;
 }
 .sketches img{
   width: 550px; 
@@ -221,7 +263,11 @@ table a{
 /* Form */
 form {
   margin: auto;
-  width: 50%;
+  width: 65%;
+}
+
+form h1, h2, h3, h4 {
+  color: #363636;
 }
 
 label {
@@ -297,4 +343,4 @@ textarea {
   width: 100%;
   height: 80px;
   text-align: right;
-}
+}
\ No newline at end of file
diff --git a/bocetos/index.html b/bocetos/index.html
index 17bfc82..eb96598 100644
--- a/bocetos/index.html
+++ b/bocetos/index.html
@@ -38,7 +38,7 @@
                 <div class="sketches">
                     <img src="../img/inicio.png" />
                     <div class="description">
-                        <h4>Pantalla de inicio.</h4>
+                        <h3>Pantalla de inicio</h3>
                         <p>Pantalla de bienvenida al entrar en la web.</p>
                     </div>
                 </div>
@@ -47,7 +47,8 @@
                 <div class="sketches">
                     <img src="../img/peliculas.png" />
                     <div class="description">
-                        <h4>Pantalla de inicio.</h4>
+                        <h3>Películas</h3>
+                        <p>Películas.</p>
                     </div>
                 </div>
             </div>
@@ -57,7 +58,8 @@
                 <div class="sketches">
                     <img src="../img/cine.png" />
                     <div class="description">
-                        <h4>Pantalla de inicio.</h4>
+                        <h3>Cine</h3>
+                        <p>Cine.</p>
                     </div>
                 </div>
             </div>
@@ -65,7 +67,68 @@
                 <div class="sketches">
                     <img src="../img/mapa_asientos.png" />
                     <div class="description">
-                        <h4>Pantalla de inicio.</h4>
+                        <h3>Mapa de los Asientos</h3>
+                        <p>Mapa de los asientos.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column left">
+                <div class="sketches">
+                    <img src="../img/compra_realizada.png" />
+                    <div class="description">
+                        <h3>Cine</h3>
+                        <p>Cine.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="column left">
+                <div class="sketches">
+                    <img src="../img/pagar.png" />
+                    <div class="description">
+                        <h3>Mapa de los Asientos</h3>
+                        <p>Mapa de los asientos.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column left">
+                <div class="sketches">
+                    <img src="../img/mapa_asientos.png" />
+                    <div class="description">
+                        <h3>Mapa de los Asientos</h3>
+                        <p>Mapa de los asientos.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="column left">
+                <div class="sketches">
+                    <img src="../img/terminosyCondiciones.png" />
+                    <div class="description">
+                        <h3>Mapa de los Asientos</h3>
+                        <p>Mapa de los asientos.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column left">
+                <div class="sketches">
+                    <img src="../img/contacto.png" />
+                    <div class="description">
+                        <h3>Cine</h3>
+                        <p>Cine.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="column left">
+                <div class="sketches">
+                    <img src="../img/about_us.png" />
+                    <div class="description">
+                        <h3>Mapa de los Asientos</h3>
+                        <p>Mapa de los asientos.</p>
                     </div>
                 </div>
             </div>
diff --git a/contacto/index.html b/contacto/index.html
index 091af46..06d6146 100644
--- a/contacto/index.html
+++ b/contacto/index.html
@@ -33,7 +33,7 @@
         </div>
 
         <!-- Form -->
-        <section id="form">
+        <section id="formulario">
             <h4>Formulario</h4>
             <form method="post" action="mailto:fernmend@ucm.es">
                 <div class="row">
diff --git a/detalles/index.html b/detalles/index.html
index 9a2ea42..cf24b0d 100644
--- a/detalles/index.html
+++ b/detalles/index.html
@@ -7,7 +7,7 @@
     <head>
         <title>CompluCine | Detalles</title>
         <meta charset="utf-8" />
-        <link id="estilo" rel="stylesheet" type="text/css" href="../assets/main.css">
+        <link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="icon" href="../img/favicon.png" />
     </head>
@@ -31,7 +31,7 @@
         </div>
         <!-- Details -->
 		<div class = "code">
-			<h1>Introduccion</h1>
+			<h1>Detalles</h1>
 			<hr/>
 			<div class ="blockquote">
 				<p>
@@ -48,32 +48,39 @@
 		<div class ="row">
 			<div class="column left">
 				<div class = "code">
-					<h1>Tipos de usuario</h1>
+					<h2>Tipos de usuario</h2>
 					<hr />	
-					<h2> Usuario No Registrado </h2>
-					<p>
-						Usuario que entra a la web sin necesidad de estar registrado, podrá realizar compras, ver horarios y cartelera, sin necesidad de realizar ningún registro.
-						No podrá usar ninguna de las promociones, pues estas estarán únicamente destinadas a los usuarios registrados
-					</p>
-					<h2> Usuario Registrado </h2>
-					<p>
-						Estos usuarios son aquellos que previamente han realizado un registro en la base de datos del sistema.Tendrán las mismas funcionalidades básicas 
-						que un usuario no registrado y además, podrán acceder a ofertas y aplicar promociones y descuentos en sus compras.
-					</br>
-						Además, estos usuarios podrán cancelar una compra previamente hecha, pues estas se asociarían a su cuenta, algo que sería imposible
-						con un usuario no registrado.
-					</p>
-					<h2> Gerente de Cine </h2>
-					<p>
-						Un administrador de rango bajo capaz de acceder a la vista de administradores, puede ver las peliculas que hay en la base de datos. Esta asociado a un cine al cual
-						puede añadir sesiones con peliculas existentes y modificar la disposicion de butacas.
-					</p>
-					
-					<h2> Administrador </h2>
-					<p>
-						El administrador es capaz de ascender cuentas de usuario registradas a cuentas de gerente de cine. Ademas es el encargado de añadir nuevos cines y peliculas.
-						Para comprobar el correcto funcionamiento de la pagina puede cambiar entre distintas vistas de usuario.
-					</p>
+					<fieldset>
+						<legend>Usuario No Registrado</legend>
+						<p>
+							Este tipo de usuario, puede interactuar con la web sin necesidad de estar registrado. Podrá realizar compras, ver horarios y cartelera, sin necesidad de realizar ningún registro.
+							No podrá usar ninguna de las promociones, pues estas estarán únicamente destinadas a los usuarios registrados.
+						</p>
+					</fieldset>
+					<fieldset>
+						<legend>Usuario Registrado</legend>
+						<p>
+							Estos usuarios son aquellos que previamente han realizado un registro en la base de datos del sistema. Tendrán las mismas funcionalidades básicas 
+							que un usuario no registrado y además, podrán acceder a ofertas y aplicar promociones y descuentos y ver el historial de sus compras.
+							Además, estos usuarios podrán cancelar una compra previamente hecha, pues estas se asociarían a su cuenta, algo que sería imposible
+							con un usuario no registrado.
+						</p>
+					</fieldset>
+					<fieldset>
+						<legend>Gerente de Cine</legend>
+						<p>
+							Un administrador de rango bajo capaz de acceder a la vista de administradores, puede ver las peliculas que hay en la base de datos. 
+							Este usuario está asociado a un cine, sobre el cual puede añadir sesiones con peliculas existentes y modificar la disposicion de butacas.
+						</p>
+					</fieldset>
+					<fieldset>
+					<legend>Administrador</legend>
+						<p>
+							El administrador es capaz de ascender cuentas de usuario registradas a cuentas de gerente de cine. Ademas es el encargado de añadir nuevos cines y peliculas.
+							Para comprobar el correcto funcionamiento de la pagina podrá cambiar entre distintas vistas de usuario. 
+							Las cuales le permitirán comprobar que cada usuario tiene acceso únicamente a sus funcionalidades y no a funcionalidades de otro rango superior.
+						</p>
+					</fieldset>
 				</div>
 			</div>
 			<div class="column right">
@@ -83,23 +90,21 @@
 					<p>
 						La aplicación debe permitir la compra online de entradas para sesiones de cine, mostrando los cines y
 						horarios en los que se encuentra disponible la película seleccionada por el usuario dentro del catálogo disponible en ese momento (la cartelera).
-					</br>
-						Los usuarios podrán acceder a la compra de las entradas buscando la película que desean ver y luego escogiendo un cine y horario determinado. Además de una búsqueda específica, también se ofrecerá
-						la posibilidad de visionar toda la cartelera, y escoger una película, horario y cine, de entre todas las posibilidades.
-					</br>
-						Una vez escogido todo, se mostrará una página en la que el usuario decidirá la o las butacas en las que se sentará. Se mostrarán butacas disponibles y butacas ocupadas (en caso de que las haya).
-					</br>
+						Los usuarios podrán acceder a la compra de entradas buscando la película que desean ver y luego escogiendo un cine y horario determinado. 
+                        Además de una búsqueda específica, también se ofrecerá la posibilidad de visionar toda la cartelera, y escoger una película, horario y cine, de entre todas las posibilidades.
+					<p>
+					    Una vez escogido todo, se mostrará una página en la que el usuario decidirá la o las butacas en las que se sentará. Se mostrarán butacas disponibles y butacas ocupadas (en caso de que las haya).
 						Antes de realizar la compra, los usuarios podrán aplicar promociones especificas que le permitan obtener algun snack en el cine o descuentos disponibles en la aplicación.
 					</p>
 					<p>
-						Por otro lado la aplicacion debe permitir a los gerentes y administradores acceder a todas las peliculas que hay en emision siendo los administradores los encargados de modificarlas y añadir
-						nuevas.
-					</br>
-						De forma similar ambos podran ver todos los cines activos de la aplicacion pero solo los administradores seran capaces de añadir o modificar cines existentes.
-					</br>
-						Cada cine tiene una cantidad de salas y sesiones con horarios destinados a peliculas. Los dos roles pueden ver estos pero es el gerente de cine el encargado de modificar las salas, su
-						disposicion de butacas, modificar el horario de las sesiones y añadir nuevas sesiones, y crear promociones especificas para una sesion concreta o para el cine completo. Todo esto unicamente para el cine
-						con el cual esta relacionado
+						Por otro lado la aplicacion debe permitir a los gerentes y administradores visionar la lista y contenido de todas las peliculas que hay en cartelera, 
+                        siendo los administradores los encargados de modificarlas y añadir nuevas.
+						De igual forma, ambos podran ver todos los cines activos de la aplicacion, pero solo los administradores serán capaces de añadir o modificar cines existentes.
+					<p>
+						Cada cine tiene una cantidad de salas y sesiones con horarios específicos pora cada una de las películas. 
+                        Aunque ambos roles (administrador y gerente) pueden ver estas salas y horarios, es el gerente de cine el encargado de modificar las salas, 
+                        su disposición de butacas, modificar el horario de las sesiones y añadir nuevas sesiones, y crear promociones específicas para una sesión concreta o para el cine completo. 
+                        Todo esto unicamente para el cine con el cual esta relacionado.
 					</p>
 				</div>
 			</div>
diff --git a/img/pagar.png b/img/pagar.png
new file mode 100644
index 0000000..7087d2e
Binary files /dev/null and b/img/pagar.png differ
diff --git a/miembros/index.html b/miembros/index.html
index b20ddb4..e234ab0 100644
--- a/miembros/index.html
+++ b/miembros/index.html
@@ -29,7 +29,7 @@
         <div class="main">
             <div class="image"><img src="../img/logo_trasparente.png" /></div>
             <section id="members_table">
-                <h4>Miembros</h4>
+                <h1>Miembros</h1>
                 <hr />
                 <table>
                     <thead>
diff --git a/planificacion/index.html b/planificacion/index.html
index ec1bcf7..1003b21 100644
--- a/planificacion/index.html
+++ b/planificacion/index.html
@@ -1,117 +1,114 @@
-<!DOCTYPE HTML>
-<!--
-    Práctica 1 - Sistemas Web | Grupo D
-    CompluCine - FDI-cines
--->
-<html lang="es">
-    <head>
-        <title>CompluCine | Planificación</title>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="icon" href="img/favicon.png" />
-        <link id="estilo" rel="stylesheet" href="assets/css/plan.css" type="text/css">
-    </head>
-    <body>
-        <!-- Header -->
-        <div class="header">
-            <a href="/"><img src="img/favicon2.png" /> CompluCine</a> | Planificación
-            <div class="menu">
-                <a href="/">Inicio |</a>
-                <a href="../detalles/">Detalles |</a>
-                <a href="../bocetos/">Bocetos |</a>
-                <a href="../miembros/">Miembros |</a>
-                <a href="#">Planificación |</a>
-                <a href="../contacto/">Contacto</a>
-            </div>
-        </div>
-
-        <!-- Main -->
-        <div class="main">
-            <div class="image"><img src="img/logo_trasparente.png" /></div>
-            
-        </div>
-        
-        <!-- Timeline -->
-        <section id="planificacion">
-            <h1 class="princpial">PLANIFICACIÓN</h1>
-            <div class="code" id="web">
-                <h2>WEB</h2>
-                <hr />
-                <div class="blockquote">  
-                    <ul>
-                        <li>Pantalla de Inicio (incluye promociones y estrenos)</li>
-                        <li>Cartelera Dinámica</li>
-                        <li>Selección de cines (mapa)</li>
-                        <li>Listado de Horarios</li>
-                        <li>Seleccion de Horarios</li>
-                        <li>Pagar + codigos promocionales</li>
-                        <li>¡Compra realizada!</li>
-                    </ul>
-                </div>
-            </div>
-            <div class="code" id="usuario">
-                <h2>Usuario</h2>
-                <hr />
-                <div class="blockquote">  
-                    <ul>
-                        <li>Registrarse (formulario para usuarios nuevos)</li>
-                        <li>Iniciar sesión (en cualquier pantalla)</li>
-                        <li>Menú y opciones de usuario</li>
-                    </ul>
-                </div>
-            </div>
-            <div class="code" id="pie">
-                <h2>Footer</h2>
-                <hr />
-                <div class="blockquote">  
-                    <ul>
-                        <li>About Us</li>
-                        <li>Formulario de contacto</li>
-                        <li>Términos y condiciones</li>
-                    </ul>
-                </div>
-            </div>
-            <div class="code" id="administrador">
-                <h2>Administrador</h2>
-                <hr />
-                <div class="blockquote">  
-                    <p>VISTA</p>
-                    <ul>
-                        <li>Panel de inicio administrador</li>
-                        <li>Panel Ver todos los cines</li>
-                        <li>Panel añadir/editar/eliminar cine</li>
-                        <li>Panel Ver salas del cine</li>
-                        <li>Panel añadir/editar/eliminar sesiones (peliculas proyectadas en un horario y sala)</li>
-                        <li>Panel editar disposicion de butacas de una sala o crear/eliminar sala</li>
-                    </ul>
-                </div>
-                <div class="blockquote">  
-                    <p>FUNCIONES</p>
-                    <ul>
-                        <legend>Administrador</legend>
-                        <li>Añadir/Eliminar Cine (Añadir Cine -> Panel Añadir Cine (formulario) + subir nueva imagen -> Añadir)</li>
-                        <li>Añadir/Eliminar Administrador/Gerente</li>
-                        <li>Añadir/Editar/Eliminar pelicula en Cartelera</li>
-                    </ul>
-                    <ul>
-                        <legend>Gerente de Cine</legend>
-                        <li>Añadir/Editar/Eliminar pelicula en su Cine</li>
-                        <li>Añadir/Editar/Eliminar sesión en su Cine (peliculas proyectadas en un horario y sala)</li>
-                        <li>Añadir/Editar/Eliminar Sala o disposicion de butacas en su Cine</li>
-                    </ul>
-                </div>
-            </div>
-
-        </section>
-
-
-        <!-- Footer -->
-        <div class="footer">
-        <p>© Práctica 1 | Sistemas Web 2021 </p>
-        </div>
-
-        <!-- Scripts -->
-       
-    </body>
-
+<!DOCTYPE HTML>
+<!--
+    Práctica 1 - Sistemas Web | Grupo D
+    CompluCine - FDI-cines
+-->
+<html lang="es">
+    <head>
+        <title>CompluCine | Planificación</title>
+        <meta charset="utf-8" />
+        <link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" href="../img/favicon.png" />
+    </head>
+    <body>
+        <!-- Header -->
+        <div class="header">
+            <a href="/"><img src="../img/favicon2.png" /> CompluCine</a> | Planificación
+            <div class="menu">
+                <a href="/">Inicio |</a>
+                <a href="../detalles/">Detalles |</a>
+                <a href="../bocetos/">Bocetos |</a>
+                <a href="../miembros/">Miembros |</a>
+                <a href="#">Planificación |</a>
+                <a href="../contacto/">Contacto</a>
+            </div>
+        </div>
+
+        <!-- Main -->
+        <div class="main">
+            <div class="image"><img src="../img/logo_trasparente.png" /></div>
+            <h1>Planificación</h1>
+            <hr />
+        </div>
+        
+        <!-- Planning -->
+        <section class="planning">
+            <div class="row">
+                <div class="column side">
+                    <div class="code">
+                        <h2>Tareas</h2>
+                        <p>Aquí las tareas a realizar.</p>
+                    </div>
+                </div>
+                <div class="column middle">
+                    <div class="code">
+                        <h2>Divisón del trabajo</h2>
+                        <p>Aquí cómo están repartidas las tareas y el trabajo.</p>
+                    </div>
+                </div>
+                <div class="column side">
+                    <div class="code">
+                        <h2>Plazos</h2>
+                        <p>Aquí plazos estimados para cada una de las tareas</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Timeline -->
+        <!-- TODO: INSERTAR AQUÍ UNA LÍNEA DEL TIEMPO HECHA CON PHOTOSHOP -->
+
+        <!-- Timeline Table -->
+        <section id="timeline table">
+            <h2>Hitos</h2>
+            <hr />
+            <table>
+                <thead>
+                    <tr>
+                        <th>Hito</th>
+                        <th>Fecha estimada</th>
+                        <th>Estado</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Práctica 0</td>
+                        <td>4 de Marzo de 2021</td>
+                        <td>ENTREGADO</td>
+                    </tr>
+                    <tr>
+                        <td>Práctica 1</td>
+                        <td>18 de Marzo</td>
+                        <td>EN PROCESO</td>
+                    </tr>
+                    <tr>
+                        <td>Práctica 2</td>
+                        <td>15 de Abril de 2021</td>
+                        <td>PENDIENTE</td>
+                    </tr>
+                    <tr>
+                        <td>Práctica 3</td>
+                        <td>7 de Mayo de 2021</td>
+                        <td>PENDIENTE</td>
+                    </tr>
+                    <tr>
+                        <td>Entrega Final</td>
+                        <td>28 de Mayo de 2021</td>
+                        <td>PENDIENTE</td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+
+
+        <!-- Footer -->
+        <div class="footer">
+        <p>© Práctica 1 | Sistemas Web 2021 </p>
+        </div>
+
+        <!-- Scripts -->
+       
+    </body>
+
 </html>
\ No newline at end of file