diff --git a/src/main/resources/static/css/css/Anuncio.css b/src/main/resources/static/css/css/Anuncio.css
index 02eea36..e69de29 100644
--- a/src/main/resources/static/css/css/Anuncio.css
+++ b/src/main/resources/static/css/css/Anuncio.css
@@ -1,17 +0,0 @@
-body{
-    box-sizing: border-box;
-    margin: 0px;
-}
-.contenedor{
-    display: flex;
-    background-color: blanchedalmond;
-    justify-content: center;
-    height: 100%;
-}
-.caja{
-    width: 300px;
-    height: 100px;
-}
-.caja1{
-    background-color: blanchedalmond;
-}
\ No newline at end of file
diff --git a/src/main/resources/static/css/css/loginstyle.css b/src/main/resources/static/css/css/loginstyle.css
new file mode 100644
index 0000000..ab5f832
--- /dev/null
+++ b/src/main/resources/static/css/css/loginstyle.css
@@ -0,0 +1,174 @@
+html {
+  background: #005b61;
+/*
+  background: radial-gradient(#fff176, #f57f17);
+  min-height: 100%;
+*/
+  font-family: "Roboto", sans-serif;
+}
+
+.title {
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 30px;
+  color: #005b61;
+  font-weight: 300;
+  font-size: 24px;
+  letter-spacing: 1px;
+}
+
+.description {
+  text-align: center;
+  color: #666;
+  margin-bottom: 30px;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="con-password"]
+
+{
+  padding: 10px 20px;
+  border: 1px solid #999;
+  border-radius: 3px;
+  display: block;
+  width: 100%;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  outline: none;
+}
+input[type="text"]:focus,
+input[type="email"]:focus {
+  border-color: #005b61;
+}
+
+input[type="radio"] {
+  margin-right: 10px;
+}
+
+label {
+  margin-bottom: 20px;
+  display: block;
+  font-size: 18px;
+  color: #666;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 20px 0;
+  cursor: pointer;
+}
+label:first-child {
+  margin-bottom: 0;
+  border-bottom: none;
+}
+
+.button,
+.rerun-button {
+  padding: 10px 20px;
+  border-radius: 3px;
+  background: #005b61;
+  color: white;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  display: inline-block;
+  cursor: pointer;
+    
+}
+.button:hover,
+.rerun-button:hover {
+  background: #005b61;
+}
+.button.rerun-button,
+.rerun-button.rerun-button {
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  margin-bottom: 50px;
+  box-shadow: 0px 10px 15px -6px rgba(0, 0, 0, 0.2);
+  display: none;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.modal-wrap {
+  max-width: 600px;
+  margin: 50px auto;
+  -webkit-transition: -webkit-transform 300ms ease-in-out;
+  transition: -webkit-transform 300ms ease-in-out;
+  transition: transform 300ms ease-in-out;
+  transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
+}
+
+.modal-header {
+  height: 45px;
+  background: white;
+  border-bottom: 1px solid #ccc;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.modal-header span {
+  display: block;
+  height: 12px;
+  width: 12px;
+  margin: 5px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.2);
+}
+.modal-header span.is-active {
+  background: rgba(0, 0, 0, 0.4);
+  background: #FF8F00;
+}
+
+.modal-bodies {
+  position: relative;
+  -webkit-perspective: 1000px;
+          perspective: 1000px;
+}
+
+.modal-body {
+  background: white;
+  padding: 40px 100px;
+  box-shadow: 0px 50px 30px -30px rgba(0, 0, 0, 0.3);
+  margin-bottom: 50px;
+  position: absolute;
+  top: 0;
+  display: none;
+  box-sizing: border-box;
+  width: 100%;
+  -webkit-transform-origin: top left;
+          transform-origin: top left;
+}
+.modal-body.is-showing {
+  display: block;
+}
+.sign-in28912 a{
+    text-decoration: none;
+}
+.btn-primary3838{
+      padding: 10px 20px;
+  border-radius: 3px;
+  background: #3071A9;
+  color: white;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  display: inline-block;
+  cursor: pointer;
+}
+.btn-danger37883{
+      padding: 10px 20px;
+  border-radius: 3px;
+  background: #CF4539;
+  color: white;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  display: inline-block;
+  cursor: pointer;
+    margin-bottom: 20px;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/img/listingsignupbar-orbit-1.png b/src/main/resources/static/css/img/listingsignupbar-orbit-1.png
new file mode 100644
index 0000000..79f4774
Binary files /dev/null and b/src/main/resources/static/css/img/listingsignupbar-orbit-1.png differ
diff --git a/src/main/resources/templates/backend/login.html b/src/main/resources/templates/backend/login.html
index d6b2880..a57ce02 100644
--- a/src/main/resources/templates/backend/login.html
+++ b/src/main/resources/templates/backend/login.html
@@ -1,71 +1,37 @@
-<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
-<html lang="es"
-      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:th="http://www.thymeleaf.org">
+<!DOCTYPE html>
+<html >
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title th:text="${titulo}">Título de la página</title>
-  <meta name="description" content="">
-  <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <meta charset="UTF-8">
+  <meta name="title" content="Ask online Form">
+  <meta name="description" content="The Ask is a bootstrap design help desk, support forum website template coded and designed with bootstrap Design, Bootstrap, HTML5 and CSS. Ask ideal for wiki sites, knowledge base sites, support forum sites">
+  <meta name="keywords" content="HTML, CSS, JavaScript,Bootstrap,js,Forum,webstagram ,webdesign ,website ,web ,webdesigner ,webdevelopment">
+  <meta name="robots" content="index, nofollow">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="language" content="English">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+  <link rel="stylesheet" th:href="@{/css/css/loginstyle.css}">
   <link rel="stylesheet" th:href="@{/css/css/Estilos.css}">
 </head>
-<body >
-<header th:replace="header/nav :: mimenu"></header>
-<section class="login-block">
-  <section class="vh-100">
-    <div class="container py-5 h-100">
-      <div class="row d-flex align-items-center justify-content-center h-100">
-        <div class="col-md-8 col-lg-7 col-xl-6">
-          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
-               class="img-fluid" alt="Phone image">
-        </div>
-        <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
-          <form>
-            <!-- Email input -->
-            <div class="form-outline mb-4">
-              <input type="email" id="form1Example13" class="form-control form-control-lg" />
-              <label class="form-label" for="form1Example13">Email address</label>
-            </div>
-
-            <!-- Password input -->
-            <div class="form-outline mb-4">
-              <input type="password" id="form1Example23" class="form-control form-control-lg" />
-              <label class="form-label" for="form1Example23">Password</label>
-            </div>
-
-            <div class="d-flex justify-content-around align-items-center mb-4">
-              <!-- Checkbox -->
-              <div class="form-check">
-                <input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
-                <label class="form-check-label" for="form1Example3"> Remember me </label>
-              </div>
-              <a href="#!">Forgot password?</a>
-            </div>
 
-            <!-- Submit button -->
-            <button type="submit" class="btn btn-primary btn-lg btn-block">Sign in</button>
-
-            <div class="divider d-flex align-items-center my-4">
-              <p class="text-center fw-bold mx-3 mb-0 text-muted">OR</p>
-            </div>
-
-            <a class="btn btn-primary btn-lg btn-block" style="background-color: #3b5998" href="#!"
-               role="button">
-              <i class="fab fa-facebook-f me-2"></i>Continue with Facebook
-            </a>
-            <a class="btn btn-primary btn-lg btn-block" style="background-color: #55acee" href="#!"
-               role="button">
-              <i class="fab fa-twitter me-2"></i>Continue with Twitter</a>
-
-          </form>
+<body>
+<header th:replace="header/nav :: mimenu"></header>
+<div class="modal-wrap">
+  <div class="modal-bodies">
+    <div class="modal-body modal-body-step-1 is-showing">
+      <div class="title">Log In</div>
+      <div class="description">Bienvenido a ForoGruas, Log In</div>
+      <form>
+        <input type="text" placeholder="Name"/>
+        <input type="email" placeholder="Email"/>
+        <div class="text-center">
+          <div class="button">LOG IN</div>
+          <a href="signup.html"><div class="button">Create an account</div></a>
         </div>
-      </div>
+      </form>
     </div>
-  </section>
-</section>
-<script src="webjars/jsquery/jquery.min.js"></script>
-<script src="webjars/bootstrap/js/bootstrap.bundle.min.js"></script>
+  </div>
+</div>
+<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/resources/templates/bienvenida/bienvenida.html b/src/main/resources/templates/bienvenida/bienvenida.html
index 324d214..435e1e1 100644
--- a/src/main/resources/templates/bienvenida/bienvenida.html
+++ b/src/main/resources/templates/bienvenida/bienvenida.html
@@ -3,13 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <title>PaginaBienvenida</title>
-    <link rel="stylesheet" href="../../static/css/css/Anuncio.css">
 </head>
 <body>
 <nav th:fragment="anuncio">
-    <div class="contenedor">
-        <div class="caja caja1">Caja1</div>
-    </div>
+
 </nav>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/header/nav/principal.html b/src/main/resources/templates/header/nav/principal.html
index 74297b8..4257734 100644
--- a/src/main/resources/templates/header/nav/principal.html
+++ b/src/main/resources/templates/header/nav/principal.html
@@ -7,32 +7,32 @@
 </head>
 <body>
 <nav th:fragment="menu1">
-<header class="encabezado">
-    <nav>
-        <img src="/css/img/7036beab6be979a346c98c7e2e686aee.png"  alt="">
-        <ul>
-            <li><a href="/home">Home</a></li>
-            <li><a href="#">Novedades</a>
-                <ul>
-                    <li><a href="#">SubItem</a></li>
-                    <li><a href="#">SubItem</a></li>
-                    <li><a href="#">SubItem</a></li>
-                </ul>
-            </li>
-            <li>
-                <a href="#">Recursos</a>
-                <ul>
-                    <li><a href="#">SubItem</a></li>
-                    <li><a href="#">SubItem</a></li>
-                    <li><a href="#">SubItem</a></li>
-                </ul>
-            </li>
-            <li><a href="/entrar">Acceder</a></li>
-            <li><a href="#">Registrarse</a></li>
+    <header class="encabezado">
+        <nav>
+            <img src="/css/img/7036beab6be979a346c98c7e2e686aee.png"  alt="">
+            <ul>
+                <li><a href="/home">Home</a></li>
+                <li><a href="#">Novedades</a>
+                    <ul>
+                        <li><a href="#">SubItem</a></li>
+                        <li><a href="#">SubItem</a></li>
+                        <li><a href="#">SubItem</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#">Recursos</a>
+                    <ul>
+                        <li><a href="#">SubItem</a></li>
+                        <li><a href="#">SubItem</a></li>
+                        <li><a href="#">SubItem</a></li>
+                    </ul>
+                </li>
+                <li><a href="/entrar">Acceder</a></li>
+                <li><a href="#">Registrarse</a></li>
 
-        </ul>
-    </nav>
-</header>
+            </ul>
+        </nav>
+    </header>
 </nav>
 </body>
 </html>
\ No newline at end of file