diff --git a/src/app/styles/layout/login.scss b/src/app/styles/layout/login.scss
index 5f93fc3..687646b 100644
--- a/src/app/styles/layout/login.scss
+++ b/src/app/styles/layout/login.scss
@@ -1,53 +1,218 @@
-.containerGrid {
+.login-page {
   display: flex;
-  grid-template-columns: 1fr 1fr;
-  min-height: 100%;
-  margin: 0 100px;
+  background-color: #fff;
+  padding: 0;
   justify-content: center;
-  align-items: center;
-  gap: 150px;
-}
-
-.login-container {
-  width: 350px;
-  padding: 1.5rem;
-  text-align: center;
-
-  h2 {
-    margin-bottom: 20px;
-    color: #bd8c01;
-  }
-
-  input {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 15px;
-    border-radius: 10px;
-    border: 1px solid #003e79;
-  }
-
-  button {
-    width: 100%;
-    padding: 10px;
-    background-color: #004aad;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  .error {
-    color: red;
-    margin-bottom: 10px;
-  }
-}
-
-.imageContainer {
-  display: flex;
-  flex-wrap: wrap;
-  max-width: 500px;
-  max-height: 450px;
-  border-radius: 10px;
+  align-items: flex-start;
+  box-sizing: border-box;
   overflow: hidden;
-  height: min-content;
+  padding-top: 2rem;
+
+  .login-form-container {
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    background-color: white;
+
+    h2 {
+      color: #bd8c01;
+      font-size: 1.8rem;
+      margin-bottom: 1.5rem;
+      font-weight: 600;
+      text-align: center ;
+    }
+
+    .input-group {
+      width: 100%;
+      margin-bottom: 1.2rem;
+
+      label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        color: #333;
+      }
+
+      input {
+        width: 100%;
+        padding: 12px 15px;
+        border: 2px solid #003e79;
+        border-radius: 8px;
+        font-size: 1rem;
+        transition: border-color 0.2s;
+
+        &:focus {
+          outline: none;
+          border-color: #004aad;
+        }
+      }
+    }
+
+    button[type="submit"] {
+      width: 100%;
+      padding: 12px;
+      background-color: #004aad;
+      color: white;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: #003e79;
+      }
+    }
+
+    .forgot-password,
+    .create-account {
+      color: #004aad;
+      text-decoration: none;
+      font-size: 1rem;
+      margin: 0.3rem 0;
+      font-weight: 500;
+      text-align: center ;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .create-account {
+      font-weight: 600;
+      font-size: 1rem;
+    }
+
+    .divider {
+      width: 100%;
+      text-align: center;
+      margin: 1.5rem 0;
+      position: relative;
+
+      span {
+        background: white;
+        padding: 0 10px;
+        color: #888;
+        font-size: 0.9rem;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: #ddd;
+        z-index: -1;
+      }
+    }
+
+
+    .error {
+      color: red;
+      margin-bottom: 1rem;
+      font-size: 0.9rem;
+    }
+  }
+
+  .image-collage {
+    position: relative;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+
+    .collage-item {
+      position: absolute;
+      border-radius: 0;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
+
+      img {
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+
+    .collage-1 {
+      top: 0;
+      left: 0;
+      width: 60%;
+      height: 35%;
+      clip-path: polygon(0 0, 100% 0, 80% 68%, 0 68%);
+    }
+
+    .collage-2 {
+      top: 0;
+      right: 0;
+      width: 60%;
+      height: 26.5%;
+      clip-path: polygon(30% 0, 100% 0, 100% 90%, 13.5% 90%);
+    }
+
+    .collage-3 {
+      top: 23.5%;
+      left: 0;
+      width: 60%;
+      height: 25.2%;
+      clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
+    }
+
+    .collage-4 {
+      top: 23.5%;
+      right: 0;
+      width: 60%;
+      height: 25.2%;
+      clip-path: polygon(13% 0, 100% 0, 100% 100%, 30% 100%);
+    }
+
+    .collage-5 {
+      bottom: 32%;
+      left: 0;
+      width: 60%;
+      height: 20%;
+      clip-path: polygon(0 0, 97% 0, 80% 100%, 0 100%);
+    }
+
+    .collage-6 {
+      bottom: 32%;
+      right: 0;
+      width: 52%;
+      height: 20%;
+      clip-path: polygon(19.5% 0, 100% 0, 100% 100%, 0% 100%);
+    }
+  }
 }
+
+// Responsive para pantallas pequeñas
+@media (max-width: 768px) {
+  .login-page {
+    flex-direction: column;
+
+    .login-form-container {
+      width: 100%;
+      padding: 1.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .image-collage {
+      width: 100%;
+      height: 300px;
+
+      .collage-item {
+        position: static;
+        width: 100%;
+        height: 100%;
+        clip-path: none;
+        border-radius: 8px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 2d5406b..2dc8d91 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -1,9 +1,8 @@
 "use client";
 
 import { useState } from "react";
-
 import "../app/styles/layout/login.scss";
-import "../app/styles/base/globales.scss"; 
+import "../app/styles/base/globales.scss";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -14,47 +13,65 @@ export default function Login() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    // Autenticacion simulada
   };
 
   return (
-    <section className="containerGrid">
-      <div className="login-container">
+    <section className="login-page">
+      <div className="login-form-container">
         <h2>Inicio sesión</h2>
         {error && <p className="error">{error}</p>}
         <form onSubmit={handleSubmit}>
-          <div>
+          <div className="input-group">
             <label>Usuario</label>
             <input
               type="email"
-              placeholder="Correo"
+              placeholder="Ingresa tu usuario"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
             />
           </div>
-          <div>
+          <div className="input-group">
             <label>Contraseña</label>
             <input
               type="password"
-              placeholder="Contraseña"
+              placeholder="Ingresa tu usuario"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
             />
           </div>
           <button type="submit">Iniciar sesión</button>
-          <Link href={"#"}>Olvidaste Contraseña?</Link>
-          <Link href={"#"}>Crear Cuenta</Link>
+          <Link href="#" className="forgot-password">
+            Olvidaste Contraseña?
+          </Link>
+          <Link href="#" className="create-account">
+            Crear Cuenta
+          </Link>
         </form>
       </div>
-      <div className="imageContainer">
-        <Image src="/Piedra.jpg" alt="Logo FES" width={250} height={150} />
-        <Image src="/image 1.png" alt="Logo FES" width={250} height={150} />
-        <Image src="/estrella.jpg" alt="Logo FES" width={250} height={150} />
-        <Image src="/sorjuana.jpg" alt="Logo FES" width={250} height={150} />
-        <Image src="/fes.jpg" alt="Logo FES" width={250} height={150} />
-        <Image src="/picachu.jpg" alt="Logo FES" width={250} height={150} />
+
+      <div className="image-collage">
+        <div className="collage-item collage-1">
+          <Image src="/Piedra.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div className="collage-item collage-2">
+          <Image src="/image 1.png" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div className="collage-item collage-3">
+          <Image src="/estrella.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div className="collage-item collage-4">
+          <Image src="/sorjuana.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div className="collage-item collage-5">
+          <Image src="/fes.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div className="collage-item collage-6">
+          <Image src="/picachu.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
       </div>
     </section>
   );
-}
+}
\ No newline at end of file