diff --git a/src/app/Editar/editar.css b/src/app/Editar/editar.css
new file mode 100644
index 0000000..da41a86
--- /dev/null
+++ b/src/app/Editar/editar.css
@@ -0,0 +1,126 @@
+
+
+/* ====== FORMULARIO ====== */
+.editar {
+  max-width: 1000px;
+  display: flex;
+  gap: 20px;
+  margin: 40px auto;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.columna {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+label {
+  font-weight: bold;
+}
+
+input {
+  padding: 6px 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  outline: none;
+}
+
+input:focus {
+  border-color: #003366;
+  box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
+}
+
+
+/* Botón cerrar sesión */
+.boton-cerrar {
+  background-color: #e60000;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+  margin-top: 10px;
+}
+
+.boton-cerrar:hover {
+  background-color: #cc0000;
+}
+
+.titulo-editar {
+  position: absolute;
+  top: 50%;
+  left: 50%; /* centra horizontalmente */
+  transform: translate(-50%, -50%); /* centra vertical y horizontalmente */
+  
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 35%; /* ajusta el ancho del bloque de texto */
+  font-size: 18px;
+  font-weight: bold;
+  color: #003366;
+  z-index: 5;
+}
+
+.titulo-editar span {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.3s, text-decoration 0.3s;
+}
+
+/* Cambia de color al pasar el mouse */
+.titulo-editar span:hover {
+  color: #b8870b;
+}
+
+.recuadro{
+  box-shadow: 0 0 7px 0px black;
+  border-radius: 10px;       /* Bordes redondeados */
+  padding: 10px;             /* Espacio interno */
+  margin: 85px 350px;            /* Separación del resto del contenido */
+  background-color: #f9f9f9; /* Color de fondo */
+}
+
+.titulo-rec {
+  font-size: 20px;
+  font-weight: bold;
+  margin-left: 0;       /* alinea el texto con el resto de la columna */
+  text-align: left;     /* asegura que esté alineado a la izquierda */
+  margin-bottom: 8px;   /* un poco de espacio debajo del título */
+}
+.linea{
+  border-bottom: 2px solid #003366; /* color y grosor de la línea */
+  width: 100%;                       /* ocupa toda la columna */
+  margin-bottom: 10px;               /* espacio entre línea y los campos */
+}
+
+.botones {
+  display: flex;
+  justify-content: flex-end;  /* Alinea los botones a la derecha */
+  gap: 10px;                  /* Espacio entre ellos */
+  margin-top: 15px;           /* Separación del formulario */
+}
+.guardar{
+  background-color: #b8870b;
+  color: #003366;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+
+}
+.cancelar{
+  background-color: #003366;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
\ No newline at end of file
diff --git a/src/app/Editar/page.tsx b/src/app/Editar/page.tsx
index f86f1af..0e25a39 100644
--- a/src/app/Editar/page.tsx
+++ b/src/app/Editar/page.tsx
@@ -1,6 +1,68 @@
-import "../styles/layout/editar.scss";
-export default function Page() {
+import './editar.css';
+export default function Home() {
   return (
-   <></>
+    <div>
+      
+
+
+      <div className="recuadro">
+        <form className="editar">
+          {/* Columna 1 */}
+          <div className="columna">
+            <p className="titulo-rec">CPU</p>
+            <div className="linea"></div>
+
+            <label htmlFor="serie">Serie</label>
+            <input type="text" id="serie" />
+
+            <label htmlFor="marca">Marca</label>
+            <input type="text" id="marca" />
+
+            <label htmlFor="modelo">Modelo</label>
+            <input type="text" id="modelo" />
+
+            <label htmlFor="estado">Estado</label>
+            <input type="text" id="estado" />
+          </div>
+
+          {/* Columna 2 */}
+          <div className="columna">
+            <p className="titulo-rec">Inventario:</p>
+            <div className="linea"></div>
+
+            <label htmlFor="sistema">Sistema Operativo</label>
+            <input type="text" id="sistema" />
+
+            <label htmlFor="procesador">Procesador</label>
+            <input type="text" id="procesador" />
+
+            <label htmlFor="uso">Tipo de uso</label>
+            <input type="text" id="uso" />
+
+            <label htmlFor="observaciones">Observaciones</label>
+            <input type="text" id="observaciones" />
+          </div>
+
+          {/* Columna 3 */}
+          <div className="columna">
+            <p className="titulo-rec">Fecha Censo:</p>
+            <div className="linea"></div>
+            
+            <label htmlFor="adscripcion">Adscripción</label>
+            <input type="text" id="adscripcion" />
+
+            <label htmlFor="responsable">Responsable</label>
+            <input type="text" id="responsable" />
+
+            <label htmlFor="lugar">Lugar</label>
+            <input type="text" id="lugar" />
+          </div>
+        </form>
+        <div className="botones">
+          <button className="guardar">Guardar</button>
+          <button className="cancelar">Cancelar</button>
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/src/app/reporte/page.tsx b/src/app/reporte/page.tsx
new file mode 100644
index 0000000..6405220
--- /dev/null
+++ b/src/app/reporte/page.tsx
@@ -0,0 +1,88 @@
+import './reporte.css';
+
+export default function Reporte() {
+  return (
+    <div>
+      <header className="encabezado">
+        <div className="encabezado-sup"></div>
+        <div className="logo">
+          <img src="fes-logo.jpg" alt="" className="logo-img" />
+        </div>
+
+        <div className="pestaña">
+          <span>Escanear código</span>
+          <span>Equipo</span>
+          <span>Reportes</span>
+        </div>
+
+        <nav className="Sesion">
+          <button className="boton-cerrar">Cerrar sesión</button>
+        </nav>
+      </header>
+
+      <div className='contenedor'>
+        <div className='titulo-reporte'>
+          <p>REPORTE</p>
+        </div>
+
+        <form action="/buscar" method="get">
+          <input type="text" name="q" placeholder="Buscar equipo" />
+          <button type="submit">Buscar</button>
+        </form>
+      </div>
+      <div className='tabla-rec'></div>
+      <button className='boton-descargar'>Descargar</button>
+
+      <div className='filtro-rec'>
+        <form className="editar">
+          {/* Columna 1 */}
+          <div className="columna">
+            <p className="titulo-rec">Filtro</p>
+            <div className="linea"></div>
+
+            <label htmlFor="adscripcion">Adscripción</label>
+            <select id="adscripcion">
+              <option value="">Seleccione la adscripción</option>
+              <option value="informatica">CEDETEC</option>
+              <option value="administracion">Administración</option>
+              <option value="biblioteca">Biblioteca</option>
+              <option value="direccion">Dirección</option>
+            </select>
+
+            <label htmlFor="estado">Estado</label>
+            <select id="estado">
+              <option value="">Seleccione el estado del equipo</option>
+              <option value="activo">Activo</option>
+              <option value="mantenimiento">En Mantenimiento</option>
+              <option value="baja">Dado de Baja</option>
+              <option value="reparacion">En Reparación</option>
+            </select>
+
+            <label htmlFor="tipo">Tipo de Equipo</label>
+            <select id="tipo">
+              <option value="">Seleccione el tipo de equipo</option>
+              <option value="cpu">CPU</option>
+              <option value="laptop">Laptop</option>
+              <option value="monitor">Monitor</option>
+              <option value="impresora">Impresora</option>
+              <option value="servidor">Servidor</option>
+            </select>
+
+            <label htmlFor="antiguedad">Antigüedad</label>
+            <select id="antiguedad">
+              <option value="">Seleccione la antigüedad del equipo</option>
+              <option value="menos1">Menos de 1 año</option>
+              <option value="1-3">1 a 3 años</option>
+              <option value="3-5">3 a 5 años</option>
+              <option value="mas5">Más de 5 años</option>
+            </select>
+          </div>
+          <div className="botones-filtro">
+          <button type="reset" className="limpiar">Limpiar filtros</button>
+          <button type="submit" className="aplicar">Aplicar filtros</button>
+           </div>
+        </form>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/reporte/reporte.css b/src/app/reporte/reporte.css
new file mode 100644
index 0000000..a276ed9
--- /dev/null
+++ b/src/app/reporte/reporte.css
@@ -0,0 +1,163 @@
+.pestaña {
+  position: absolute;
+  top: 50%;
+  left: 62%; 
+  transform: translate(-50%, -50%);
+  
+  display: flex;
+  justify-content: space-around; /* espacio igual entre los tres textos */
+  align-items: center;
+  width: 45%; /* controla el ancho total del bloque central */
+  font-size: 18px;
+  color: #003366;
+  font-weight: bold;
+  z-index: 5; /* por encima del logo */
+}
+
+.pestaña span {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.pestaña span:hover {
+  color: #b8870b; /* cambia de color al pasar el cursor */
+}
+
+.titulo-reporte{
+  font-weight: bold;  /* negrita */
+  font-size: 24px;    /* tamaño de texto */
+  font-family: Arial, sans-serif;
+}
+
+/*BUSCADOR*/
+
+input[type="text"] {
+  width: 500px;   /* más ancho, más largo */
+  padding: 7px;  /* mantiene espacio cómodo dentro */
+  font-size: 18px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 8px 12px;
+  font-size: 16px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+.contenedor{
+  margin-left: 80px;
+}
+
+.filtro-rec{
+  border: 2px solid #003366; /* Color del borde */
+  border-radius: 10px;       /* Bordes redondeados */
+  padding: 10px;             /* Espacio interno */
+  margin: 80px 550px;            /* Separación del resto del contenido */
+  background-color: #f9f9f9; 
+  position: relative;
+  left: 380px; 
+  font-family: Arial, sans-serif;
+  top: -570px; /* sube 50px respecto a su posición original */
+  
+
+}
+
+/* Estilos para los selects */
+select {
+  padding: 8px 12px;
+  border: 1px solid #003366;
+  border-radius: 5px;
+  background-color: white;
+  font-size: 14px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+select:focus {
+  border-color: #003366;
+  box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
+  outline: none;
+}
+
+/* Botón de buscar */
+form[action="/buscar"] {
+  display: flex;
+  gap: 10px;
+  margin: 20px 0;
+  
+}
+
+form[action="/buscar"] input {
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  width: 300px;
+}
+
+form[action="/buscar"] button {
+  background-color: #003366;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.botones-filtro {
+  display: flex;
+  justify-content: flex-end; /* botones a la derecha */
+  gap: 10px;                 /* espacio entre botones */
+  margin-top: 15px;          /* separación del resto del formulario */
+}
+
+.aplicar {
+  background-color: #003366;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.limpiar {
+  background-color: #b8870b;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.tabla-rec{
+  border: 2px solid #003366; /* Color del borde */
+  border-radius: 10px;        /* Bordes redondeados */
+  padding: 10px;              /* Espacio interno */
+  margin: 50px 700px 0 80px;      /* superior, derecha, inferior, izquierda */
+  background-color: #f9f9f9; 
+  font-family: Arial, sans-serif;
+   height: 400px;
+}
+
+.boton-descargar{
+  padding: 8px 12px;
+  font-size: 16px;
+  border: none;
+  background-color: #003366;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  right: 30px;
+  margin-left: 700px;
+}
\ No newline at end of file