diff --git a/app.js b/app.js
index ff8d516..d787065 100644
--- a/app.js
+++ b/app.js
@@ -1,55 +1,54 @@
 let pagina = 1;
-const btnAnterior = document.getElementById('btnAnterior');
-const btnSiguiente = document.getElementById('btnSiguiente');
-
-btnSiguiente.addEventListener('click', () => {
-	if(pagina < 1000){
-		pagina += 1;
-		cargarPeliculas();
-	}
+const btnAnterior = document.getElementById("btnAnterior");
+const btnSiguiente = document.getElementById("btnSiguiente");
+
+btnSiguiente.addEventListener("click", () => {
+  if (pagina < 1000) {
+    pagina += 1;
+    cargarPeliculas();
+  }
 });
 
-btnAnterior.addEventListener('click', () => {
-	if(pagina > 1){
-		pagina -= 1;
-		cargarPeliculas();
-	}
+btnAnterior.addEventListener("click", () => {
+  if (pagina > 1) {
+    pagina -= 1;
+    cargarPeliculas();
+  }
 });
 
-const cargarPeliculas = async() => {
-	try {
-		const respuesta = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=192e0b9821564f26f52949758ea3c473&language=es-MX&page=${pagina}`);
-	
-		console.log(respuesta);
-
-		// Si la respuesta es correcta
-		if(respuesta.status === 200){
-			const datos = await respuesta.json();
-			
-			let peliculas = '';
-			datos.results.forEach(pelicula => {
-				peliculas += `
+const cargarPeliculas = async () => {
+  try {
+    const respuesta = await fetch(
+      `https://api.themoviedb.org/3/movie/popular?api_key=192e0b9821564f26f52949758ea3c473&language=es-MX&page=${pagina}`
+    );
+
+    console.log(respuesta);
+
+    // Si la respuesta es correcta
+    if (respuesta.status === 200) {
+      const datos = await respuesta.json();
+
+      let peliculas = "";
+      datos.results.forEach((pelicula) => {
+        peliculas += `
 					<div class="pelicula">
 						<img class="poster" src="https://image.tmdb.org/t/p/w500/${pelicula.poster_path}">
 						<h3 class="titulo">${pelicula.title}</h3>
 					</div>
 				`;
-			});
-
-			document.getElementById('contenedor').innerHTML = peliculas;
-
-		} else if(respuesta.status === 401){
-			console.log('Pusiste la llave mal');
-		} else if(respuesta.status === 404){
-			console.log('La pelicula que buscas no existe');
-		} else {
-			console.log('Hubo un error y no sabemos que paso');
-		}
-
-	} catch(error){
-		console.log(error);
-	}
-
-}
-
-cargarPeliculas();
\ No newline at end of file
+      });
+
+      document.getElementById("contenedor").innerHTML = peliculas;
+    } else if (respuesta.status === 401) {
+      console.log("Pusiste la llave mal");
+    } else if (respuesta.status === 404) {
+      console.log("La pelicula que buscas no existe");
+    } else {
+      console.log("Hubo un error y no sabemos que paso");
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+cargarPeliculas();
diff --git a/estilos.css b/estilos.css
index 56c231a..5104f49 100644
--- a/estilos.css
+++ b/estilos.css
@@ -1,68 +1,78 @@
 * {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+h1{
+	text-align: center;
 }
-
 body {
-	font-family: 'Montserrat', sans-serif;
-	background: #e0e0e0;
-	color: #1d1d1d;
+  font-family: "Montserrat", sans-serif;
+  background: #e0e0e0;
+  color: #1d1d1d;
 }
 
 .contenedor {
-	width: 90%;
-	max-width: 1000px;
-	margin: 40px auto 100px auto;
+  width: 90%;
+  max-width: 1000px;
+  margin: 40px auto 100px auto;
 
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	gap: 40px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 40px;
 }
 
 .contenedor .pelicula {
-	text-align: center;
+  text-align: center;
+  cursor: pointer;
+  transition: all .3s ease-in-out;
+
 }
+.contenedor .pelicula:hover{
+	transform: scale(1.2);
+	opacity: .8;
+}
+
 
 .contenedor .pelicula .titulo {
-	font-size: 16px;
-	font-weight: 600;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .contenedor .pelicula .poster {
-	width: 100%;
-	margin-bottom: 10px;
-	border-radius: 15px;
+  width: 100%;
+  margin-bottom: 10px;
+  border-radius: 15px;
 }
 
 .paginacion {
-	position: fixed;
-	bottom: 0;
-	background: #100a1f;
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	gap: 20px;
-	padding: 10px;
+  position: fixed;
+  bottom: 0;
+  background: #100a1f;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding: 10px;
 }
 
 .paginacion button {
-	cursor: pointer;
-	border: none;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	height: 50px;
-	width: 200px;
-	background: #241744;
-	color: #fff;
-	border-radius: 100px;
-	font-family: 'Montserrat', sans-serif;
-	font-weight: 600;
-	transition: .3s ease all;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 50px;
+  width: 200px;
+  background: #450fd0;
+  color: #fff;
+  border-radius: 100px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 600;
+  transition: 0.3s ease all;
 }
 
 .paginacion button:hover {
-	background: #137c32;
-}
\ No newline at end of file
+  background: #137c32;
+}
diff --git a/index.html b/index.html
index 6898894..41782f3 100644
--- a/index.html
+++ b/index.html
@@ -1,23 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">
-	<link rel="stylesheet" href="estilos.css">
-	<title>Sitio de peliculas</title>
-</head>
-<body>
-	<div class="contenedor" id="contenedor"></div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="estilos.css" />
+    <title>Peliculas bad</title>
+  </head>
+  <body>
+	<h1>Peliculas</h1>
+    <div class="contenedor" id="contenedor"></div>
 
-	<div class="paginacion">
-		<button id="btnAnterior">Anterior</button>
-		<button id="btnSiguiente">Siguiente</button>
-	</div>
+    <div class="paginacion">
+      <button id="btnAnterior">Anterior</button>
+      <button id="btnSiguiente">Siguiente</button>
+    </div>
 
-	<script src="app.js"></script>
-</body>
-</html>
\ No newline at end of file
+    <script src="app.js"></script>
+  </body>
+</html>