diff --git a/src/css/background/home.png b/src/css/background/home.png
new file mode 100644
index 00000000..8d994994
Binary files /dev/null and b/src/css/background/home.png differ
diff --git a/src/css/background/recoveraccaunt.png b/src/css/background/recoveraccaunt.png
new file mode 100644
index 00000000..e8013787
Binary files /dev/null and b/src/css/background/recoveraccaunt.png differ
diff --git a/src/css/background/thanksaccount.png b/src/css/background/thanksaccount.png
new file mode 100644
index 00000000..1fcc9afb
Binary files /dev/null and b/src/css/background/thanksaccount.png differ
diff --git a/src/css/createAccount.css b/src/css/createAccount.css
index 1e4706a8..83e03a1f 100644
--- a/src/css/createAccount.css
+++ b/src/css/createAccount.css
@@ -1,70 +1,45 @@
-/*SECCIÓN CREAR CUENTA*/
+.accountOne{
+  height: 100%;
+  display: flex;
+  padding: 0 20px;
+}
 
-#iconoOne{
-    width: 50%;
-    height: 30%;
+  #createAccount{
     margin: auto;
-    margin-top: 80%;
-    
+    width: 300px;
+    height: 400px;
+    color:white;
+    font-family: 'Comfortaa', cursive;
   }
-  #createAccount{
-      width:300px;
-      height: 400px;
-      color:white;
-      font-size: 12px;
-      display: flex;
-      margin: auto;
-      justify-content: center;
-      flex-direction: column;
-      font-family: 'Comfortaa', cursive;
+
+  #account{
+    margin: auto;
+    width: 200px;
+    height: 300px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-around;
+    flex-direction: column;
   }
-  .startButton {
-      color: #fff;
-      height: 30px;
-      line-height: 30px;
-      margin: auto;
-      margin-top: 10% ;
-      margin-left: 30%;
-      border-radius: 10px;
-      background: rgb(39, 131, 206);
-      font-family:'Comfortaa', cursive;
-      /*z-index: -1;*/
-      }
+
+
   .controls{
+      display:block;
       background: black;
       color: white;
       border-bottom: 1px solid white ;
+      border-radius: 0px;
+      text-align: left;
   }
-  @media screen and (max-width:1024px){
-    #createAccount{
-      width:400px;
-      height: 500px;
-      color:white;
-      font-size: 12px;
-    }
-    #iconoOne{
-      margin-top: 140%;
-  }
-  .startButton {
-    margin-left: 35%;
-  }
-  }
-  
-  @media screen and (max-width:768px){
-    #iconoOne{
-      margin-top: 50%;
-  }
+
+
+
+@media screen and (min-width:768px){
+    #account{
+    width: 300px;
+    padding: 0;
   }
-  
-  @media screen and (max-width:425px){
-    #createAccount{
-      width:300px;
-      height: 400px;
-      color:white;
-      font-size: 9px;
+    .controls{
+      width: 300px;
     }
-    #iconoOne{
-      margin-top: 50%;
-  }
   }
-  
\ No newline at end of file
diff --git a/src/css/home.css b/src/css/home.css
new file mode 100644
index 00000000..c8b2e7b5
--- /dev/null
+++ b/src/css/home.css
@@ -0,0 +1,28 @@
+.home{
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url(background/home.png);
+  background-size: cover;
+  padding: 30px;
+}
+
+.welcome{
+  font-size: 1.2em;
+  display: flex;
+  align-items: center;
+  font-family: 'Anton', sans-serif;
+  text-align: center;
+  max-width: 300px;
+  height: 300px;
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 3px solid #FFFFFF;
+  padding: 10px;
+}
+
+@media (min-width: 740px) {
+  .welcome{
+      font-size: 1.5em;
+  }
+}
diff --git a/src/css/login.css b/src/css/login.css
new file mode 100644
index 00000000..65e8acd1
--- /dev/null
+++ b/src/css/login.css
@@ -0,0 +1,90 @@
+.container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#login{
+  height: 450px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.input-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+}
+
+#login .logo{
+    max-width: 50%;
+    display:inline-block;
+}
+
+.input-container p{
+    font-size: 12px;
+    margin-top:10px;
+    font-family: 'Comfortaa';
+    padding: 15px;
+
+}
+
+.createAccount p {
+    color: white;
+    margin: 0px;
+    text-align: center;
+    font-family: 'Comfortaa';
+    font-size: 12px;
+}
+
+.createAccount .google {
+
+    margin-top: 10px;
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+
+}
+
+.link {
+    color: #06B8C7;
+    font-family: Comfortaa;
+    font-size: 12px;
+
+}
+
+
+/*Tablet--------------------*/
+@media screen and (min-width: 768px) {
+
+#login .logo{
+    width: 30%;
+}
+#login .username   {
+        margin-top: 10px;
+
+      }
+
+}
+
+/* Desktop---------------------- */
+ @media screen and (min-width: 1127px) {
+   #login{
+     height: 550px;
+   }
+
+    #login .username   {
+            margin-top: 10px;
+            font-size: 15px;
+          }
+
+          #login .input-container p{
+              font-size: 15px;
+                      }
+  }
diff --git a/src/css/recover.css b/src/css/recover.css
new file mode 100644
index 00000000..de81175e
--- /dev/null
+++ b/src/css/recover.css
@@ -0,0 +1,32 @@
+.recover{
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  background-image: url(background/recoveraccaunt.png);
+  background-size: cover;
+  background-position: center;
+  padding: 30px;
+}
+
+.cont{
+  text-align: center;
+  display: flex;
+  width: 400px;
+  height: 400px;
+  align-items: center;
+  justify-content: space-around;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+h2{
+  font-family: 'Comfortaa';
+  font-size: 1.2em;
+}
+
+.recover p{
+  font-family: 'Source Sans Pro';
+  font-size: 1em;
+  display: none;
+}
diff --git a/src/css/thanksAccount.css b/src/css/thanksAccount.css
index 950a7783..a53aeada 100644
--- a/src/css/thanksAccount.css
+++ b/src/css/thanksAccount.css
@@ -1,79 +1,27 @@
-/*SECCIÓN GRACIAS CUENTA*/
 #thanku {
-    background-image: url("../img/fondovhs.png");
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: 100vw 100vh;
-    }
+height: 100%;
+display: flex;
+justify-content: center;
+align-items: center;
+background-image: url("background/thanksaccount.png");
+background-size:cover;
+}
+
 #thankAccount{
     background: rgb(0,0,0, 0.6);
-    width:300px;
+    max-width: 300px;
     height: 400px;
     color:white;
     font-size: 15px;
     font-family:'Comfortaa', cursive;
     display: flex;
     margin: auto;
-    margin-top: 8%;
     text-align: center;
     justify-content: space-around;
     flex-direction: column;
 }
-.buttonContinue {
-    color: #fff;
-    width:200px;
-    height: 40px;
-    line-height: 30px;
-    font-size: 15px;
-    border-radius: 5px;
-    background: #06B8C7;
-    font-family:'Comfortaa', cursive;
-    text-align: center;
-    justify-content: center;
-    /*z-index: -1;*/
-    }
+
 #icono{
-    height: 40%;
-    width: 70%;
-    margin-left: 15%;
-}
-@media only screen and (max-width:1024px){
-    #thankAccount{
-    width:500px;
-    height: 650px;
-    font-size: 18px;
-    margin-top: 25%;
-    }
-    .buttonContinue {
-    width:400px;
-    height: 40px;
-    font-size: 18px;
-    }
-}
-@media only screen and (max-width:768px){
-    #thankAccount{
-    width:300px;
-    height: 450px;
-    font-size: 14px;
-    margin-top: 25%;
-    }
-    .buttonContinue {
-    width:250px;
-    height:40px;
-    font-size: 14px;
-    }
+    align-self: center;
+    width: 50%;
 }
-@media only screen and (max-width:425px){
-
-#thankAccount{
-    width:200px;
-    height: 350px;
-    font-size: 10px;
-    margin-top:25%;
-    }
-.buttonContinue {
-        width:150px;
-        height:40px;
-        font-size: 10px;
-    }
-}
\ No newline at end of file
diff --git a/src/img/google.png b/src/img/google.png
new file mode 100644
index 00000000..b1f2f4ee
Binary files /dev/null and b/src/img/google.png differ
diff --git a/src/img/icon.png b/src/img/icon.png
new file mode 100644
index 00000000..5d7ce406
Binary files /dev/null and b/src/img/icon.png differ
diff --git a/src/index.html b/src/index.html
index d154d93a..31c5ebc6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,23 +5,24 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>HELIVISUEL</title>
+  <link rel="stylesheet" href="/style.css">
+  <title>Helivisuel</title>
 </head>
-  <body>
+<body>
   <header id="header" >
     <nav>
 
     </nav>
   </header>
   <main id="root"></main>
-  <footer>
-    &copy;2020, Todos los derechos reservados - |D.D.C| - HELIVISUEL
+  <footer id="footer">
+    <p> &copy; Todos los derechos reservados - |D.D.C|  -  HELIVISUEL   </p>
   </footer>
-<!-- The core Firebase JS SDK is always required and must be listed first -->
+  <!-- The core Firebase JS SDK is always required and must be listed first -->
 <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
 
 <!-- TODO: Add SDKs for Firebase products that you want to use
-  https://firebase.google.com/docs/web/setup#available-libraries -->
+https://firebase.google.com/docs/web/setup#available-libraries -->
 <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script>
 
 <script>
@@ -41,7 +42,6 @@
   console.log(proy.name);
   firebase.analytics();
 </script>
-<script type="module" src="main.js"></script>
+  <script type="module" src="main.js"></script>
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main.js b/src/main.js
index 9b67b028..1582ab6c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,13 +1,30 @@
 // Este es el punto de entrada de tu aplicacion
 
 import { myFunction } from './lib/index.js';
-import otherThank from './views/thankAccount.js';
+import home from './views/home.js';
+import login from './views/login.js';
 import createAccount from './views/createAccount.js';
+import recover from './views/recover.js';
+import otherThank from './views/thankAccount.js';
+
 
 header.style.display = 'none';
-const body = window.root;
+const body = document.getElementById('root');
 
-body.appendChild(otherThank());
-body.appendChild(createAccount());
-console.log(otherThank);
+body.appendChild(login());
+console.log(login);
 myFunction();
+
+/*window.addEventListener("hashchange", function(){
+    console.log(location.hash);
+});*/
+
+/*function showPage (pageId) {
+    $(".home").hide();
+    $(pageId).show();
+}
+$(window).on("hashchange",function(){
+    //console.log("Hash Changed!")
+    showPage(location.hash);
+})*/
+
diff --git a/src/style.css b/src/style.css
index 6bb7c3a1..81ec03cd 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,6 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Anton&family=Comfortaa&family=Source+Sans+Pro&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Anton&family=Comfortaa:wght@300&family=Source+Sans+Pro&display=swap');
+@import "css/home.css";
+@import "css/login.css";
 @import "css/createAccount.css";
 @import "css/thanksAccount.css";
+@import "css/recover.css";
 
 body{
   margin: 0px;
@@ -11,7 +14,8 @@ body{
   font-size: 16px;
   display: flex;
   flex-direction: column;
-  }
+  background-color: #000;
+}
 
 main{
   height: 100%;
@@ -21,6 +25,47 @@ header{
   height: 50px;
 }
 
+h2{
+  font-family: 'Comfortaa';
+  font-size: 1.2em;
+}
+
+label{
+  font-family: 'Source Sans Pro';
+}
+
+input{
+  text-align: center;
+  height: 30px;
+  width: 200px;
+  border: none;
+  border-radius: 5px;
+}
+
+a{
+  text-decoration: none;
+  color: #05ADBA;
+}
+
+
+.btn{
+  align-self: center;
+  text-align: center;
+  height: 40px;
+  width: 200px;
+  background: #06B8C7;
+  border: 2px solid #06B8C7;
+  border-radius: 5px;
+  font-family: 'Comfortaa';
+  color: #FFFFFF;
+
+}
+.btn:hover {
+  background: cadetblue ;
+  border-color: cadetblue;
+
+}
+
 footer{
   align-items: center;
   flex-direction: column;
@@ -32,9 +77,12 @@ footer{
   border-top: 3px solid #FFFFFF;
 }
 
+
+
+
 @media (min-width: 1000px){
   footer{
     height: 70px;
     font-size: 1em;
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/createAccount.js b/src/views/createAccount.js
index 2e055a7e..f4643f24 100644
--- a/src/views/createAccount.js
+++ b/src/views/createAccount.js
@@ -1,24 +1,28 @@
 export default ()=>{
     const createAccount = document.createElement('div');
     createAccount.setAttribute('class', 'accountOne');
+
     const sectionAccount = document.createElement('section');
     sectionAccount.setAttribute('id', 'createAccount');
-    sectionAccount.innerHTML = ` <img src="img/besticono.png" id="iconoOne">
-    <h1>Crea una nueva Cuenta</h1> 
-    <h2>Username</h2>
-    <input type="text" id="nameUser" class="controls" placeholder="Nombre de Usuario"/>
-    <h2>Email</h2>
-    <input type="text" id="correo" class="controls" placeholder="nameuser@gmail.com"/>
-    <h2>Password</h2>
-    <input type="text" id="contraseña" class="controls" placeholder="*********"/>
-    <h2>Birth Date</h2>
-    <input type="text" id="birthday" class="controls" placeholder="27/08/20"/>
-    <div id="hi">
-    <button id="buttonOne" class="startButton">REGISTRARSE</button>
-    </div>
-    `;
+
+    sectionAccount.innerHTML = ` <h1>Crea una nueva Cuenta</h1>
+        <form id="account">
+        <label for="nameUser">Nombre de Usuario</label>
+        <input type="text" id="nameUser" class="controls" placeholder="Nombre de Usuario"/>
+        <br>
+        <label for="correo">Email</label>
+        <input type="text" id="correo" class="controls" placeholder="usuario@gmail.com"/>
+        <br>
+        <label for="contraseña">Contraseña</label>
+        <input type="text" id="contraseña" class="controls" placeholder="*********"/>
+        <br>
+        <label for="birthday">Fecha de Nacimiento</label>
+        <input type="text" id="birthday" class="controls" placeholder="27/08/20"/>
+        <br>
+        <br>
+        <button type= "submit" id="buttonOne" class="btn">REGISTRARSE</button>
+        </form>`;
+
     createAccount.appendChild(sectionAccount);
     return createAccount;
     }
-
-    
\ No newline at end of file
diff --git a/src/views/home.js b/src/views/home.js
new file mode 100644
index 00000000..49fe5ee4
--- /dev/null
+++ b/src/views/home.js
@@ -0,0 +1,16 @@
+export default ()=>{
+  history.replaceState({},'home', '#home');
+  /*console.log(window.location.hash)*/
+  const home = document.createElement('section');
+  home.setAttribute('class', 'home');
+  home.innerHTML = `<p class="welcome"><a class="nav-link" href="#home">Bienvenido a la comunidad más grande de amantes de series y películas</a></p>`;
+
+  home.addEventListener('click', (e)=>{
+  window.location = "#login";
+  })
+  return home;
+}
+
+/*`<div class="home">
+  <p class="welcome">Welcome to the largest community of series and movies lovers</p>
+</div>`*/
diff --git a/src/views/login.js b/src/views/login.js
new file mode 100644
index 00000000..8cdfe360
--- /dev/null
+++ b/src/views/login.js
@@ -0,0 +1,30 @@
+export default ()=>{
+    const signin = document.createElement('div');
+    signin.setAttribute('class', 'container');
+
+    const login = document.createElement('section');
+    login.setAttribute('id', 'login');
+    login.innerHTML = `<img src="img/icon.png" alt="logo_image" class="logo"/>`;
+
+
+    const input = document.createElement('form');
+    input.setAttribute('class', 'input-container') ;
+    input.innerHTML = `<input type="text" class="username" placeholder="User name o email">
+          <br>
+          <input type="text" class="username" placeholder="Contraseña">
+          <p>¿Olvidaste tú contraseña? <a href="/recover">Click aquí</a></p>
+          <button type="button" class="btn">ENTRAR</button>`;
+
+
+    const createAccount = document.createElement('div');
+    createAccount.setAttribute('class', 'createAccount');
+    createAccount.innerHTML = `<p>¿Eres un usuario nuevo? <a href="/createAccount">Crea una cuenta</a></p>
+                <p>o ingresa con</p>
+                <img src="img/google.png" width="30" height="30" class="google">`;
+
+
+    login.appendChild(input)
+    login.appendChild(createAccount)
+    signin.appendChild(login)
+    return  signin;
+  }
diff --git a/src/views/recover.js b/src/views/recover.js
new file mode 100644
index 00000000..796a9c2e
--- /dev/null
+++ b/src/views/recover.js
@@ -0,0 +1,20 @@
+export default ()=>{
+  //history.replaceState({},'recoverAccaunt', 'recover');
+  const recover = document.createElement('section');
+  recover.setAttribute('class', 'recover');
+
+  recover.innerHTML = `<div class="cont">
+      <h2>Recupera tu contraseña</h2>
+      <label for="email">Ingresa tu email</label>
+      <input type="email" id="email" placeholder="usuario@email.com" autocomplete="off" required>
+      <button type="button" name="send" class="btn send" >ENVIAR</button>
+      <p class="message"><p>
+    </div>`
+
+    const email = recover.querySelector('#email');
+    const send = recover.querySelector('.send').addEventListener('click', ()=>{
+      recover.querySelector('.message').style.display = 'block';
+      recover.querySelector('.message').innerHTML = `Hemos enviado un email a ${email.value} para cambiar la contraseña`;
+    })
+    return recover;
+}
diff --git a/src/views/thankAccount.js b/src/views/thankAccount.js
index c5432c08..cd5d7358 100644
--- a/src/views/thankAccount.js
+++ b/src/views/thankAccount.js
@@ -1,15 +1,11 @@
-
 export default ()=>{
     const otherThank = document.createElement('div');
     otherThank.setAttribute('id', 'thanku');
     const accountThank = document.createElement('section');
     accountThank.setAttribute('id', 'thankAccount');
-    accountThank.innerHTML = `<img src="img/besticono.png" id="icono">
-    <h1>Gracias por crear una cuenta</h1>`;
-    const btnThank = document.createElement('div');
-    btnThank.setAttribute('id', 'th');
-    btnThank.innerHTML = `<button id="continue" class="buttonContinue">CONTINUAR</button>`;
+    accountThank.innerHTML = `<img src="img/icon.png" id="icono">
+        <h1>Gracias por crear una cuenta</h1>
+        <button id="continue" class="btn">CONTINUAR</button>`;
     otherThank.appendChild(accountThank);
-    accountThank.appendChild(btnThank);
     return otherThank;
-    }
\ No newline at end of file
+    }