diff --git a/harvester-app/src/frontend/utils/styles.css b/harvester-app/src/frontend/utils/styles.css
index 268fa56f..c2418400 100644
--- a/harvester-app/src/frontend/utils/styles.css
+++ b/harvester-app/src/frontend/utils/styles.css
@@ -7,10 +7,10 @@
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
+  width: 100vw;
   height: 100vh;
   position: relative;
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-  overflow: hidden;
+  overflow: auto;
 }
 .barra-lateral {
   background: #ffffff;
@@ -22,26 +22,33 @@
   align-self: stretch;
   flex-shrink: 0;
   position: relative;
+  width: auto;
+  flex-shrink: 0;
 }
 .rectangulo-separacion {
   background: #a61930;
   align-self: stretch;
   flex-shrink: 0;
+  flex-grow: 1;
+  width: 28px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
   width: 28px;
-  position: relative;
 }
 .frame-iniciar-sesion {
   background: #262b40;
   padding: 0px 104px 0px 104px;
   display: flex;
   flex-direction: column;
-  gap: 50px;
+  gap: 30px;
   align-items: center;
   justify-content: center;
-  align-self: stretch;
-  flex-shrink: 0;
-  width: 601px;
-  position: relative;
+  flex: 1; /* Ocupa el espacio disponible */
+  min-width: 300px;
+  min-height: 100%;
+  box-sizing: border-box;
 }
 .harvester {
   background: #ffffff;
@@ -188,7 +195,11 @@
   width: 140px;
   height: 55px;
   position: relative;
+  cursor: pointer;
+  transition: background 0.3s, transform 0.2s;
 }
+
+
 .acceder {
   color: #ffffff;
   text-align: center;
@@ -233,3 +244,7 @@
   line-height: 100%;
   font-weight: 400;
 }
+.boton-acceder:hover {
+  background: #1d3a7c;
+  transform: scale(1.05);
+}
\ No newline at end of file
diff --git a/harvester-app/src/frontend/vistas/inicioSesion.html b/harvester-app/src/frontend/vistas/inicioSesion.html
index 991c63c6..32be9f84 100644
--- a/harvester-app/src/frontend/vistas/inicioSesion.html
+++ b/harvester-app/src/frontend/vistas/inicioSesion.html
@@ -20,13 +20,10 @@
         <div class="iniciar-sesi-n">Iniciar Sesión</div>
         <div class="acceso">
           <div class="acceder-con-tu-correo">Acceder con tu correo</div>
-          <div class="correo">
-            <input class="e-g-john-doe-com" value="e.g, john@doe.com" size="17" />
-          </div>
-          <div class="contrase-a">
-            <input class="contrase-a2" value="contraseña" size="10" />
-          </div>
+          <input type="email" class="correo" placeholder="ejemplo@correo.com" />
+          <input type="email" class="correo" placeholder="contraseña..." />
         </div>
+        
         <button class="boton-acceder">
           <div class="acceder">Acceder</div>
         </button>