diff --git a/.example.txt b/.example.txt
new file mode 100644
index 0000000..4b73e25
--- /dev/null
+++ b/.example.txt
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=
\ No newline at end of file
diff --git a/src/app/(Operador)/AgregarEquipo/page.tsx b/src/app/(Operador)/AgregarEquipo/page.tsx
index 743ce22..9ba95fb 100644
--- a/src/app/(Operador)/AgregarEquipo/page.tsx
+++ b/src/app/(Operador)/AgregarEquipo/page.tsx
@@ -2,11 +2,11 @@
 
 import { useState, useEffect } from "react";
 import axios from "axios";
-import Cookies from "js-cookie"; // Para leer cookies en el cliente
-import "../../styles/layout/agregarEquipo.scss";
+import Cookies from "js-cookie";
 import toast from "react-hot-toast";
+import "../../styles/layout/agregarEquipo.scss";
 
-export default function page() {
+export default function Page() {
   const [formData, setFormData] = useState({
     serie: "",
     marca: "",
@@ -31,23 +31,15 @@ export default function page() {
   const [procesadores, setProcesadores] = useState<string[]>([]);
 
   const [suggestions, setSuggestions] = useState({
-    marca: [] as string[],
-    modelo: [] as string[],
-    estado: [] as string[],
     adscripcion: [] as string[],
-    tipoEquipo: [] as string[],
-    sistemaOperativo: [] as string[],
-    procesador: [] as string[],
-    tipoUso: [] as string[],
   });
 
   const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
-
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
   useEffect(() => {
     const fetchData = async () => {
-      const token = Cookies.get("token"); // Token desde cookies
+      const token = Cookies.get("token");
       const headers = { Authorization: `Bearer ${token}` };
 
       try {
@@ -76,11 +68,11 @@ export default function page() {
         setTiposEquipo(tiposEquipoRes.data);
         setSistemasOperativos(sistemasOperativosRes.data);
         setProcesadores(procesadoresRes.data);
-      } catch (err: any) {
+      } catch (err) {
         if (axios.isAxiosError(err)) {
           if (err.response) {
             toast.error(
-              err.response.data?.message || "No se pudo conectar con el api"
+              err.response.data?.message || "No se pudo conectar con el API"
             );
           } else if (err.request) {
             toast.error("No se pudo conectar con el servidor");
@@ -96,21 +88,8 @@ export default function page() {
     fetchData();
   }, []);
 
-  const handleInputChange = (
-    field: string,
-    value: string,
-    options: string[]
-  ) => {
+  const handleInputChange = (field: string, value: string) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
-
-    if (value.length >= 3) {
-      const filtered = options.filter((opt) =>
-        opt.toLowerCase().includes(value.toLowerCase())
-      );
-      setSuggestions((prev) => ({ ...prev, [field]: filtered }));
-    } else {
-      setSuggestions((prev) => ({ ...prev, [field]: [] }));
-    }
   };
 
   const handleSelectSuggestion = (field: string, value: string) => {
@@ -118,25 +97,16 @@ export default function page() {
     setSuggestions((prev) => ({ ...prev, [field]: [] }));
   };
 
-  const handleGuardar = () => {
-    console.log("Formulario enviado:", formData);
-    alert("Equipo guardado (vista solo)");
+  const handleGuardar = async () => {
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    await axios.post(`${api_url}/equipos/crear`, formData, { headers });
+    toast.success("Equipo guardado");
   };
 
   const handleCancelar = () => {
-    alert("Acción cancelada");
-  };
-
-  const handleChange = (e: any) => {
-    const { name, value } = e.target;
-    setFormData((prev) => {
-      let updated = { ...prev, [name]: value };
-      if (value === "Impresora") {
-        updated.sistemaOperativo = "";
-        updated.procesador = "";
-      }
-      return updated;
-    });
+    toast.success("Acción cancelada");
   };
 
   return (
@@ -152,34 +122,23 @@ export default function page() {
                 type="text"
                 placeholder="Ingresa serie"
                 value={formData.serie}
-                onChange={(e) =>
-                  setFormData({ ...formData, serie: e.target.value })
-                }
+                onChange={(e) => handleInputChange("serie", e.target.value)}
               />
             </div>
 
             <div className="formGroup">
               <label>Marca</label>
-              <input
-                type="text"
-                placeholder="Ingresa marca"
+              <select
                 value={formData.marca}
-                onChange={(e) =>
-                  handleInputChange("marca", e.target.value, marcas)
-                }
-              />
-              {suggestions.marca.length > 0 && (
-                <ul className="suggestions">
-                  {suggestions.marca.map((s) => (
-                    <li
-                      key={s}
-                      onClick={() => handleSelectSuggestion("marca", s)}
-                    >
-                      {s}
-                    </li>
-                  ))}
-                </ul>
-              )}
+                onChange={(e) => handleInputChange("marca", e.target.value)}
+              >
+                <option value="">Selecciona una marca</option>
+                {marcas.map((m) => (
+                  <option key={m} value={m}>
+                    {m}
+                  </option>
+                ))}
+              </select>
             </div>
 
             <div className="formGroup">
@@ -188,58 +147,40 @@ export default function page() {
                 type="text"
                 placeholder="Ingresa modelo"
                 value={formData.modelo}
-                onChange={(e) =>
-                  handleInputChange("modelo", e.target.value, [])
-                }
+                onChange={(e) => handleInputChange("modelo", e.target.value)}
               />
             </div>
 
             <div className="formGroup">
               <label>Tipo de equipo</label>
-              <input
-                type="text"
-                placeholder="Selecciona tipo"
+              <select
                 value={formData.tipoEquipo}
                 onChange={(e) =>
-                  handleInputChange("tipoEquipo", e.target.value, tiposEquipo)
+                  handleInputChange("tipoEquipo", e.target.value)
                 }
-              />
-              {suggestions.tipoEquipo.length > 0 && (
-                <ul className="suggestions">
-                  {suggestions.tipoEquipo.map((s) => (
-                    <li
-                      key={s}
-                      onClick={() => handleSelectSuggestion("tipoEquipo", s)}
-                    >
-                      {s}
-                    </li>
-                  ))}
-                </ul>
-              )}
+              >
+                <option value="">Selecciona tipo de equipo</option>
+                {tiposEquipo.map((t) => (
+                  <option key={t} value={t}>
+                    {t}
+                  </option>
+                ))}
+              </select>
             </div>
 
             <div className="formGroup">
               <label>Estado</label>
-              <input
-                type="text"
-                placeholder="Selecciona estado"
+              <select
                 value={formData.estado}
-                onChange={(e) =>
-                  handleInputChange("estado", e.target.value, estados)
-                }
-              />
-              {suggestions.estado.length > 0 && (
-                <ul className="suggestions">
-                  {suggestions.estado.map((s) => (
-                    <li
-                      key={s}
-                      onClick={() => handleSelectSuggestion("estado", s)}
-                    >
-                      {s}
-                    </li>
-                  ))}
-                </ul>
-              )}
+                onChange={(e) => handleInputChange("estado", e.target.value)}
+              >
+                <option value="">Selecciona estado</option>
+                {estados.map((e) => (
+                  <option key={e} value={e}>
+                    {e}
+                  </option>
+                ))}
+              </select>
             </div>
           </div>
 
@@ -247,88 +188,53 @@ export default function page() {
           <div className="column">
             <div className="formGroup">
               <label>Tipo uso</label>
-              <input
-                type="text"
-                placeholder="Ingresa tipo de uso"
+              <select
                 value={formData.tipoUso}
-                onChange={(e) =>
-                  handleInputChange("tipoUso", e.target.value, tiposUso)
-                }
-              />
-              {suggestions.tipoUso.length > 0 && (
-                <ul className="suggestions">
-                  {suggestions.tipoUso.map((s) => (
-                    <li
-                      key={s}
-                      onClick={() => handleSelectSuggestion("tipoUso", s)}
-                    >
-                      {s}
-                    </li>
-                  ))}
-                </ul>
-              )}
+                onChange={(e) => handleInputChange("tipoUso", e.target.value)}
+              >
+                <option value="">Selecciona tipo de uso</option>
+                {tiposUso.map((t) => (
+                  <option key={t} value={t}>
+                    {t}
+                  </option>
+                ))}
+              </select>
             </div>
 
             {mostrarCamposComputadora && (
               <>
                 <div className="formGroup">
                   <label>Procesador</label>
-                  <input
-                    type="text"
-                    placeholder="Selecciona procesador"
+                  <select
                     value={formData.procesador}
                     onChange={(e) =>
-                      handleInputChange(
-                        "procesador",
-                        e.target.value,
-                        procesadores
-                      )
+                      handleInputChange("procesador", e.target.value)
                     }
-                  />
-                  {suggestions.procesador.length > 0 && (
-                    <ul className="suggestions">
-                      {suggestions.procesador.map((s) => (
-                        <li
-                          key={s}
-                          onClick={() =>
-                            handleSelectSuggestion("procesador", s)
-                          }
-                        >
-                          {s}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
+                  >
+                    <option value="">Selecciona procesador</option>
+                    {procesadores.map((p) => (
+                      <option key={p} value={p}>
+                        {p}
+                      </option>
+                    ))}
+                  </select>
                 </div>
 
                 <div className="formGroup">
                   <label>Sistema operativo</label>
-                  <input
-                    type="text"
-                    placeholder="Selecciona sistema operativo"
+                  <select
                     value={formData.sistemaOperativo}
                     onChange={(e) =>
-                      handleInputChange(
-                        "sistemaOperativo",
-                        e.target.value,
-                        sistemasOperativos
-                      )
+                      handleInputChange("sistemaOperativo", e.target.value)
                     }
-                  />
-                  {suggestions.sistemaOperativo.length > 0 && (
-                    <ul className="suggestions">
-                      {suggestions.sistemaOperativo.map((s) => (
-                        <li
-                          key={s}
-                          onClick={() =>
-                            handleSelectSuggestion("sistemaOperativo", s)
-                          }
-                        >
-                          {s}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
+                  >
+                    <option value="">Selecciona sistema operativo</option>
+                    {sistemasOperativos.map((so) => (
+                      <option key={so} value={so}>
+                        {so}
+                      </option>
+                    ))}
+                  </select>
                 </div>
               </>
             )}
@@ -340,11 +246,7 @@ export default function page() {
                 placeholder="Selecciona adscripción"
                 value={formData.adscripcion}
                 onChange={(e) =>
-                  handleInputChange(
-                    "adscripcion",
-                    e.target.value,
-                    adscripciones
-                  )
+                  handleInputChange("adscripcion", e.target.value)
                 }
               />
               {suggestions.adscripcion.length > 0 && (
@@ -360,18 +262,6 @@ export default function page() {
                 </ul>
               )}
             </div>
-
-            <div className="formGroup">
-              <label>Responsable</label>
-              <input
-                type="text"
-                placeholder="Selecciona responsable"
-                value={formData.responsable}
-                onChange={(e) =>
-                  setFormData({ ...formData, responsable: e.target.value })
-                }
-              />
-            </div>
           </div>
 
           {/* Columna Derecha */}
@@ -381,25 +271,25 @@ export default function page() {
               <textarea
                 placeholder="Ingresa lugar"
                 value={formData.lugar}
-                onChange={(e) =>
-                  setFormData({ ...formData, lugar: e.target.value })
-                }
+                onChange={(e) => handleInputChange("lugar", e.target.value)}
                 rows={5}
                 className="textAreaLarge"
               />
             </div>
+
             <div className="formGroup">
               <label>Observaciones</label>
               <textarea
                 placeholder="Ingresa observaciones"
                 value={formData.observaciones}
                 onChange={(e) =>
-                  setFormData({ ...formData, observaciones: e.target.value })
+                  handleInputChange("observaciones", e.target.value)
                 }
                 rows={5}
                 className="textAreaLarge"
               />
             </div>
+
             <div className="formActions">
               <button
                 type="button"
diff --git a/src/app/(Operador)/Editar/page.tsx b/src/app/(Operador)/Editar/page.tsx
index 18c25fb..0ac18f9 100644
--- a/src/app/(Operador)/Editar/page.tsx
+++ b/src/app/(Operador)/Editar/page.tsx
@@ -1,247 +1,11 @@
 "use client";
-import { useEffect, useState } from "react";
-import "../../styles/layout/agregarEquipo.scss";
-import "./editar.css";
-import { useSearchParams } from "next/navigation";
 
-export default function Home() {
-  const searchParams = useSearchParams();
-  const equipoId = searchParams.get("equipoId"); // 🔹 Obtener ID del equipo
+import dynamic from "next/dynamic";
 
-  const [formData, setFormData] = useState({
-    serie: "",
-    marca: "",
-    modelo: "",
-    tipoEquipo: "", // Nuevo campo
-    estado: "",
-    sistemaOperativo: "",
-    procesador: "",
-    tipoUso: "",
-    observaciones: "",
-    adscripcion: "",
-    lugar: "",
-    responsable: "",
-  });
+const Editar = dynamic(() => import("@/components/Editar"), {
+  ssr: false,
+});
 
-  // Si viene un equipoId, precargarlo
-  useEffect(() => {
-    if (equipoId) {
-      setFormData((prev) => ({ ...prev, serie: equipoId }));
-    }
-  }, [equipoId]);
-
-  // Estado para saber si mostramos los campos de SO y Procesador
-  const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
-
-  const handleGuardar = () => {
-    console.log("Formulario enviado:", formData);
-    alert(`Equipo ${formData.serie} guardado (vista solo)`);
-  };
-
-  const handleCancelar = () => {
-    alert("Acción cancelada");
-  };
-
-  return (
-    <div className="agregarEquipoContainer">
-      <div className="innerContainer">
-        <h2 className="information">
-          {equipoId ? `Editar Equipo (${equipoId})` : "Agregar Equipo"}
-          <span>Inventario:</span>
-          <span>Fecha de censo:</span>
-        </h2>
-
-        <form className="equipoForm">
-          {/* Columna 1 */}
-          <div className="column">
-            <div className="formGroup">
-              <label>Serie</label>
-              <input
-                type="text"
-                placeholder="Ingresa serie"
-                value={formData.serie}
-                onChange={(e) =>
-                  setFormData({ ...formData, serie: e.target.value })
-                }
-              />
-            </div>
-            <div className="formGroup">
-              <label>Marca</label>
-              <select
-                value={formData.marca}
-                onChange={(e) =>
-                  setFormData({ ...formData, marca: e.target.value })
-                }
-              >
-                <option value="">Ingresa marca</option>
-                <option value="Dell">Dell</option>
-                <option value="HP">HP</option>
-                <option value="Lenovo">Lenovo</option>
-              </select>
-            </div>
-            <div className="formGroup">
-              <label>Modelo</label>
-              <select
-                value={formData.modelo}
-                onChange={(e) =>
-                  setFormData({ ...formData, modelo: e.target.value })
-                }
-              >
-                <option value="">Ingresa modelo</option>
-                <option value="XPS 15">XPS 15</option>
-                <option value="EliteBook">EliteBook</option>
-                <option value="ThinkPad">ThinkPad</option>
-              </select>
-            </div>
-            <div className="formGroup">
-              <label>Estado</label>
-              <select
-                value={formData.estado}
-                onChange={(e) =>
-                  setFormData({ ...formData, estado: e.target.value })
-                }
-              >
-                <option value="">Selecciona estado</option>
-                <option value="Activado">Activado</option>
-                <option value="Desactivado">Desactivado</option>
-                <option value="En reparación">En reparación</option>
-              </select>
-            </div>
-
-            <div className="formGroup">
-              <label>Tipo uso</label>
-              <select
-                value={formData.tipoUso}
-                onChange={(e) =>
-                  setFormData({ ...formData, tipoUso: e.target.value })
-                }
-              >
-                <option value="">Ingresa tipo de uso</option>
-                <option value="administrativo">administrativo</option>
-                <option value="educacional">educacional</option>
-                <option value="laboratorio">laboratorio</option>
-              </select>
-            </div>
-          </div>
-
-          {/* Columna 2 */}
-          <div className="column">
-            {mostrarCamposComputadora && (
-              <>
-                <div className="formGroup">
-                  <label>Procesador</label>
-                  <select
-                    value={formData.procesador}
-                    onChange={(e) =>
-                      setFormData({ ...formData, procesador: e.target.value })
-                    }
-                  >
-                    <option value="">Selecciona procesador</option>
-                    <option value="Ryzen 3">Ryzen 3</option>
-                    <option value="Intel i5">Intel i5</option>
-                    <option value="AMD Ryzen 5">AMD Ryzen 5</option>
-                  </select>
-                </div>
-
-                <div className="formGroup">
-                  <label>Sistema operativo</label>
-                  <select
-                    value={formData.sistemaOperativo}
-                    onChange={(e) =>
-                      setFormData({
-                        ...formData,
-                        sistemaOperativo: e.target.value,
-                      })
-                    }
-                  >
-                    <option value="">Selecciona sistema operativo</option>
-                    <option value="Windows 10">Windows 10</option>
-                    <option value="Windows 11">Windows 11</option>
-                    <option value="Linux">Linux</option>
-                    <option value="macOS">macOS</option>
-                  </select>
-                </div>
-              </>
-            )}
-
-            <div className="formGroup">
-              <label>Adscripción</label>
-              <select
-                value={formData.adscripcion}
-                onChange={(e) =>
-                  setFormData({ ...formData, adscripcion: e.target.value })
-                }
-              >
-                <option value="">Selecciona adscripción</option>
-                <option value="Cedetec">Cedetec</option>
-                <option value="Laboratorio">Laboratorio</option>
-                <option value="Administración">Administración</option>
-              </select>
-            </div>
-
-            <div className="formGroup">
-              <label>Responsable</label>
-              <select
-                value={formData.responsable}
-                onChange={(e) =>
-                  setFormData({ ...formData, responsable: e.target.value })
-                }
-              >
-                <option value="">Selecciona responsable</option>
-                <option value="Lino">Lino</option>
-                <option value="Ana">Ana</option>
-                <option value="Carlos">Carlos</option>
-              </select>
-            </div>
-          </div>
-
-          {/* Columna 3 */}
-          <div className="column">
-            <div className="formGroup">
-              <label>Lugar</label>
-              <textarea
-                placeholder="Ingresa lugar"
-                value={formData.lugar}
-                onChange={(e) =>
-                  setFormData({ ...formData, lugar: e.target.value })
-                }
-                rows={5}
-                className="textAreaLarge"
-              />
-            </div>
-
-            <div className="formGroup">
-              <label>Observaciones</label>
-              <textarea
-                placeholder="Ingresa observaciones"
-                value={formData.observaciones}
-                onChange={(e) =>
-                  setFormData({ ...formData, observaciones: e.target.value })
-                }
-                rows={5}
-                className="textAreaLarge"
-              />
-            </div>
-
-            <div className="formActions">
-              <button
-                type="button"
-                className="btnGuardar"
-                onClick={handleGuardar}
-              >
-                Guardar
-              </button>
-              <button
-                type="button"
-                className="btnCancelar"
-                onClick={handleCancelar}
-              >
-                Cancelar
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
+export default function Page() {
+  return <Editar />;
 }
diff --git a/src/app/(Operador)/Escaner/page.tsx b/src/app/(Operador)/Escaner/page.tsx
index d59b7d4..5369618 100644
--- a/src/app/(Operador)/Escaner/page.tsx
+++ b/src/app/(Operador)/Escaner/page.tsx
@@ -2,51 +2,62 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import "../../styles/layout/escaner.scss"; // Importación global
+import "../../styles/layout/escaner.scss";
 import BarcodeScanner from "@/components/BarcodeScanner";
 import axios from "axios";
+import Image from "next/image";
+import toast from "react-hot-toast";
 
 export default function Dashboard() {
   const router = useRouter();
   const [isScanning, setIsScanning] = useState(false);
-  const [equipos, setEquipos] = useState();
   const [search, setSearch] = useState("");
-  const [lastScan, setLastScan] = useState<string | null>(null);
 
-  interface equipo {
-    id: number;
-  }
+  const api_url = process.env.NEXT_PUBLIC_API_URL;
 
   const buscarEquipo = async () => {
-    const encontrado: equipo = await axios.get("");
+    if (!search) return toast.error("Ingresa un número de inventario");
 
-    if (encontrado) {
-      // Redirige a la vista de edición con el ID del equipo
-      router.push(`/Editar?equipoId=${encontrado.id}`);
-    } else {
-      alert("Equipo no encontrado.");
+    try {
+      const { data } = await axios.get(`${api_url}/equipos/${search}`);
+
+      if (data) {
+        router.push(`/Editar?equipoId=${data.id}`);
+      } else {
+        toast.error("Equipo no encontrado");
+      }
+    } catch (error) {
+      toast.error("Equipo no encontrado");
     }
   };
 
   const handleScan = async (code: string) => {
-    setLastScan(code);
     setIsScanning(false);
 
-    const encontrado: equipo = await axios.get("");
+    if (!code) return;
 
-    if (encontrado) {
-      router.push(`/Editar?equipoId=${encontrado.id}`);
-    } else {
+    try {
+      const { data } = await axios.get(`${api_url}/equipos/${code}`);
+
+      if (data) {
+        router.push(`/Editar?equipoId=${data.id}`);
+      } else {
+        router.push(`/AgregarEquipo?equipoId=${code}`);
+      }
+    } catch (error) {
       router.push(`/AgregarEquipo?equipoId=${code}`);
     }
   };
 
+<<<<<<< HEAD
   //  Cerrar sesión
   const cerrarSesion = () => {
     localStorage.removeItem("loggedIn");
     router.push("/");
   };
 
+=======
+>>>>>>> c46e561af1c3cf0aa2835fee6eec718099d403cd
   return (
     <div className="dashboardContainer">
       <main className="scanView">
@@ -56,7 +67,12 @@ export default function Dashboard() {
           <BarcodeScanner onScan={handleScan} />
         ) : (
           <div className="scannerFrame">
-            <img src="/barcode_scanner.png" alt="Marco de escaneo" />
+            <Image
+              src="/barcode_scanner.png"
+              alt="Marco de escaneo"
+              width={200}
+              height={200}
+            />
           </div>
         )}
 
@@ -70,11 +86,10 @@ export default function Dashboard() {
           className="scanButton"
           onClick={() => setIsScanning(!isScanning)}
         >
-          <img src="/photo_camera.png" alt="cámara" />
+          <Image src="/photo_camera.png" alt="cámara" width={20} height={20} />
           {isScanning ? "Cancelar" : "Escanear"}
         </button>
 
-        {/* 🔍 Búsqueda manual */}
         <div className="searchBox">
           <input
             type="text"
@@ -83,7 +98,7 @@ export default function Dashboard() {
             onChange={(e) => setSearch(e.target.value)}
           />
           <button onClick={buscarEquipo} className="searchButton">
-            <img src="/search.png" alt="Buscar" />
+            <Image src="/search.png" alt="Buscar" width={50} height={50} />
           </button>
         </div>
       </main>
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
deleted file mode 100644
index a04e1f4..0000000
--- a/src/app/dashboard/page.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import BarcodeScanner from "../../components/BarcodeScanner";
-import "../styles/components/dashboard.scss";
-
-type Equipo = {
-  id: string;
-  nombre: string;
-  estado: string;
-};
-
-const initialEquipos: Equipo[] = [
-  { id: "001", nombre: "PC Aula 1", estado: "Disponible" },
-  { id: "002", nombre: "PC Aula 2", estado: "En reparación" },
-];
-
-export default function Dashboard() {
-  const router = useRouter();
-  const [equipos, setEquipos] = useState<Equipo[]>(initialEquipos);
-  const [search, setSearch] = useState("");
-  const [lastScan, setLastScan] = useState("");
-
-  useEffect(() => {
-    const loggedIn = localStorage.getItem("loggedIn");
-    if (!loggedIn) router.push("/");
-  }, [router]);
-
-  const buscarEquipo = () => {
-    const resultado = equipos.filter(
-      e => e.id.includes(search) || e.nombre.toLowerCase().includes(search.toLowerCase())
-    );
-    setEquipos(resultado);
-  };
-
-  const cerrarSesion = () => {
-    localStorage.removeItem("loggedIn");
-    router.push("/");
-  };
-
-  const handleScan = (code: string) => {
-    setLastScan(code);
-
-    const encontrado = equipos.find(e => e.id === code);
-    if (encontrado) {
-      alert(`Equipo encontrado: ${encontrado.nombre} (${encontrado.estado})`);
-    } else {
-      const nombre = prompt("Equipo no registrado. Ingresa el nombre:");
-      if (nombre) {
-        setEquipos([...equipos, { id: code, nombre, estado: "Disponible" }]);
-        alert("Equipo agregado al inventario");
-      }
-    }
-  };
-
-  return (
-    <div className="dashboard-container">
-      <div className="header">
-        <h2>Dashboard Inventario Escolar</h2>
-        <button onClick={cerrarSesion}>Cerrar sesión</button>
-      </div>
-
-      <div className="search-section">
-        <h3>Buscar equipo</h3>
-        <div style={{ display: "flex", marginTop: "10px" }}>
-          <input type="text" placeholder="ID o nombre" value={search} onChange={(e) => setSearch(e.target.value)} />
-          <button onClick={buscarEquipo}>Buscar</button>
-        </div>
-      </div>
-
-      <div className="scanner-section">
-        <h3>Escanear código de barras</h3>
-        <BarcodeScanner onDetected={handleScan} />
-        {lastScan && <p>Último código escaneado: <strong>{lastScan}</strong></p>}
-      </div>
-
-      <div className="equipos-section">
-        <h3>Equipos</h3>
-        <ul>
-          {equipos.map((e) => (
-            <li key={e.id}>
-              <span>{e.id} - {e.nombre}</span>
-              <span className={e.estado === "Disponible" ? "estado-disponible" : "estado-reparacion"}>{e.estado}</span>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a970f31..73a562e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,8 @@
 import Header from "../components/header";
 import { Inter, Montserrat } from "next/font/google";
-import "../app/styles/base/globales.scss"; // si tienes estilos globales
+import "../app/styles/base/globales.scss";
 import { Toaster } from "react-hot-toast";
 
-// Carga optimizada de fuentes
 const inter = Inter({
   subsets: ["latin"],
   weight: ["400", "500", "600", "700"],
@@ -24,10 +23,7 @@ export default function RootLayout({
     <html lang="es" className={`${inter.variable} ${montserrat.variable}`}>
       <body suppressHydrationWarning>
         <Header />
-        <Toaster
-  position="top-left"
-  reverseOrder={false}
-/>
+        <Toaster position="top-left" reverseOrder={false} />
         {children}
       </body>
     </html>
diff --git a/src/app/login/Login.tsx b/src/app/login/Login.tsx
index 081dcfa..a0330e5 100644
--- a/src/app/login/Login.tsx
+++ b/src/app/login/Login.tsx
@@ -12,13 +12,11 @@ import toast from "react-hot-toast";
 export default function Login() {
   const [nombre, setNombre] = useState("");
   const [password, setPassword] = useState("");
-  const [loading, setLoading] = useState(false);
 
   const router = useRouter();
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setLoading(true);
 
     try {
       const response = await axios.post(
@@ -32,7 +30,11 @@ export default function Login() {
 
       document.cookie = `token=${token}; path=/; SameSite=Strict`;
       router.push("/Escaner");
+<<<<<<< HEAD
     } catch (err: unknown) {
+=======
+    } catch (err) {
+>>>>>>> c46e561af1c3cf0aa2835fee6eec718099d403cd
       if (axios.isAxiosError(err)) {
         if (err.response) {
           toast.error(
@@ -46,8 +48,6 @@ export default function Login() {
       } else {
         toast.error("Ocurrió un error inesperado");
       }
-    } finally {
-      setLoading(false);
     }
   };
 
diff --git a/src/app/reporte/page.tsx b/src/app/reporte/page.tsx
index 6405220..9d0982c 100644
--- a/src/app/reporte/page.tsx
+++ b/src/app/reporte/page.tsx
@@ -1,13 +1,10 @@
-import './reporte.css';
+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>
@@ -20,8 +17,8 @@ export default function Reporte() {
         </nav>
       </header>
 
-      <div className='contenedor'>
-        <div className='titulo-reporte'>
+      <div className="contenedor">
+        <div className="titulo-reporte">
           <p>REPORTE</p>
         </div>
 
@@ -30,10 +27,10 @@ export default function Reporte() {
           <button type="submit">Buscar</button>
         </form>
       </div>
-      <div className='tabla-rec'></div>
-      <button className='boton-descargar'>Descargar</button>
+      <div className="tabla-rec"></div>
+      <button className="boton-descargar">Descargar</button>
 
-      <div className='filtro-rec'>
+      <div className="filtro-rec">
         <form className="editar">
           {/* Columna 1 */}
           <div className="columna">
@@ -78,11 +75,15 @@ export default function Reporte() {
             </select>
           </div>
           <div className="botones-filtro">
-          <button type="reset" className="limpiar">Limpiar filtros</button>
-          <button type="submit" className="aplicar">Aplicar filtros</button>
-           </div>
+            <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/styles/layout/agregarEquipo.scss b/src/app/styles/layout/agregarEquipo.scss
index f53b852..8cd283f 100644
--- a/src/app/styles/layout/agregarEquipo.scss
+++ b/src/app/styles/layout/agregarEquipo.scss
@@ -88,7 +88,7 @@ textarea {
   height: 100%;
   .btnGuardar {
     background-color: #ffb700;
-    color: #000;
+    color: #0056b3;
     border: none;
     padding: 10px 20px;
     border-radius: 6px;
diff --git a/src/components/BarNavigation.tsx b/src/components/BarNavigation.tsx
index 847c7d5..2559eb6 100644
--- a/src/components/BarNavigation.tsx
+++ b/src/components/BarNavigation.tsx
@@ -1,28 +1,22 @@
 "use client";
 
 import { useState } from "react";
-import { useRouter } from "next/navigation"; // ✅ Importa useRouter
+import { useRouter } from "next/navigation";
 import "../app/styles/layout/BarNavigation.scss";
 import Link from "next/link";
 
 function BarNavigation() {
-  const router = useRouter(); // ✅ Para redirigir
+  const router = useRouter();
   const [openMenu, setOpenMenu] = useState(false);
-  const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);
 
   const toggleMenu = () => setOpenMenu(!openMenu);
-  const toggleSubMenu = (index: number) => {
-    if (typeof window !== "undefined" && window.innerWidth <= 800) {
-      setOpenSubMenu(openSubMenu === index ? null : index);
-    }
-  };
 
   const cerrarSesion = () => {
     if (typeof window !== "undefined") {
       localStorage.removeItem("loggedIn");
-      router.push("/"); // ✅ Redirige al inicio
+      router.push("/");
     }
-    setOpenMenu(false); // Cierra menú móvil
+    setOpenMenu(false);
   };
 
   return (
diff --git a/src/components/BarcodeScanner.tsx b/src/components/BarcodeScanner.tsx
index 5354e3e..3d72d91 100644
--- a/src/components/BarcodeScanner.tsx
+++ b/src/components/BarcodeScanner.tsx
@@ -1,19 +1,8 @@
-// components/BarcodeScanner.tsx
 "use client";
 
 import React, { useEffect, useRef } from "react";
 import Quagga from "@ericblade/quagga2";
 
-// Tipos mínimos para el resultado de Quagga
-interface CodeResult {
-  code: string;
-  format: string;
-}
-
-interface QuaggaResult {
-  codeResult: CodeResult | null;
-}
-
 // Tipos para la configuración (opcional, pero mejora legibilidad)
 interface QuaggaConfig {
   inputStream: {
diff --git a/src/components/Editar.tsx b/src/components/Editar.tsx
new file mode 100644
index 0000000..1640d4a
--- /dev/null
+++ b/src/components/Editar.tsx
@@ -0,0 +1,337 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import "../app/styles/layout/agregarEquipo.scss";
+import "./editar.css";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
+import toast from "react-hot-toast";
+
+export default function Editar() {
+  const searchParams = useSearchParams();
+  const equipoId = searchParams.get("equipoId");
+
+  const [formData, setFormData] = useState({
+    serie: "",
+    marca: "",
+    modelo: "",
+    tipoEquipo: "",
+    estado: "",
+    sistemaOperativo: "",
+    procesador: "",
+    tipoUso: "",
+    observaciones: "",
+    adscripcion: "",
+    lugar: "",
+    responsable: "",
+  });
+
+  const [tiposUso, setTiposUso] = useState<string[]>([]);
+  const [marcas, setMarcas] = useState<string[]>([]);
+  const [estados, setEstados] = useState<string[]>([]);
+  const [adscripciones, setAdscripciones] = useState<string[]>([]);
+  const [tiposEquipo, setTiposEquipo] = useState<string[]>([]);
+  const [sistemasOperativos, setSistemasOperativos] = useState<string[]>([]);
+  const [procesadores, setProcesadores] = useState<string[]>([]);
+
+  const api_url = process.env.NEXT_PUBLIC_API_URL;
+  const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
+
+  useEffect(() => {
+    const fetchCatalogos = async () => {
+      const token = Cookies.get("token");
+      const headers = { Authorization: `Bearer ${token}` };
+
+      try {
+        const [
+          usosRes,
+          marcasRes,
+          estadosRes,
+          adscripcionesRes,
+          tiposEquipoRes,
+          sistemasOperativosRes,
+          procesadoresRes,
+        ] = await Promise.all([
+          axios.get(`${api_url}/equipos/usos`, { headers }),
+          axios.get(`${api_url}/equipos/marcas`, { headers }),
+          axios.get(`${api_url}/equipos/estados`, { headers }),
+          axios.get(`${api_url}/equipos/adscripciones`, { headers }),
+          axios.get(`${api_url}/equipos/tipos-equipo`, { headers }),
+          axios.get(`${api_url}/equipos/sistemas-operativos`, { headers }),
+          axios.get(`${api_url}/equipos/procesadores`, { headers }),
+        ]);
+
+        setTiposUso(usosRes.data);
+        setMarcas(marcasRes.data);
+        setEstados(estadosRes.data);
+        setAdscripciones(adscripcionesRes.data);
+        setTiposEquipo(tiposEquipoRes.data);
+        setSistemasOperativos(sistemasOperativosRes.data);
+        setProcesadores(procesadoresRes.data);
+      } catch (error) {
+        console.error("Error cargando catálogos:", error);
+        toast.error("No se pudieron cargar los catálogos de datos");
+      }
+    };
+
+    fetchCatalogos();
+  }, []);
+
+  useEffect(() => {
+    const fetchEquipo = async () => {
+      const token = Cookies.get("token");
+      const headers = { Authorization: `Bearer ${token}` };
+
+      try {
+        const response = await axios.get(`${api_url}/equipos/${equipoId}`, {
+          headers,
+        });
+        setFormData(response.data);
+      } catch (error) {
+        console.error("Error al obtener el equipo:", error);
+        toast.error("No se pudo cargar la información del equipo.");
+      }
+    };
+
+    if (equipoId) fetchEquipo();
+  }, [equipoId]);
+
+  const handleGuardar = async () => {
+    try {
+      await axios.patch(`${api_url}/equipos/update/${equipoId}`, formData);
+      toast.success("Equipo actualizado correctamente");
+    } catch (error) {
+      console.error("Error al guardar:", error);
+      toast.error("Hubo un error al guardar el equipo.");
+    }
+  };
+
+  const handleCancelar = () => {
+    toast("Acción cancelada");
+  };
+
+  return (
+    <div className="agregarEquipoContainer">
+      <div className="innerContainer">
+        <h2 className="information">
+          {equipoId ? `Editar Equipo (${equipoId})` : "Agregar Equipo"}
+        </h2>
+
+        <form className="equipoForm">
+          {/* Columna 1 */}
+          <div className="column">
+            <div className="formGroup">
+              <label>Serie</label>
+              <input
+                type="text"
+                placeholder="Ingresa serie"
+                value={formData.serie}
+                onChange={(e) =>
+                  setFormData({ ...formData, serie: e.target.value })
+                }
+              />
+            </div>
+
+            <div className="formGroup">
+              <label>Marca</label>
+              <select
+                value={formData.marca}
+                onChange={(e) =>
+                  setFormData({ ...formData, marca: e.target.value })
+                }
+              >
+                <option value="">Selecciona marca</option>
+                {marcas.map((m) => (
+                  <option key={m} value={m}>
+                    {m}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="formGroup">
+              <label>Modelo</label>
+              <input
+                type="text"
+                placeholder="Ingresa modelo"
+                value={formData.modelo}
+                onChange={(e) =>
+                  setFormData({ ...formData, modelo: e.target.value })
+                }
+              />
+            </div>
+
+            <div className="formGroup">
+              <label>Tipo de equipo</label>
+              <select
+                value={formData.tipoEquipo}
+                onChange={(e) =>
+                  setFormData({ ...formData, tipoEquipo: e.target.value })
+                }
+              >
+                <option value="">Selecciona tipo de equipo</option>
+                {tiposEquipo.map((t) => (
+                  <option key={t} value={t}>
+                    {t}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="formGroup">
+              <label>Estado</label>
+              <select
+                value={formData.estado}
+                onChange={(e) =>
+                  setFormData({ ...formData, estado: e.target.value })
+                }
+              >
+                <option value="">Selecciona estado</option>
+                {estados.map((e) => (
+                  <option key={e} value={e}>
+                    {e}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Columna 2 */}
+          <div className="column">
+            <div className="formGroup">
+              <label>Tipo de uso</label>
+              <select
+                value={formData.tipoUso}
+                onChange={(e) =>
+                  setFormData({ ...formData, tipoUso: e.target.value })
+                }
+              >
+                <option value="">Selecciona tipo de uso</option>
+                {tiposUso.map((t) => (
+                  <option key={t} value={t}>
+                    {t}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {mostrarCamposComputadora && (
+              <>
+                <div className="formGroup">
+                  <label>Procesador</label>
+                  <select
+                    value={formData.procesador}
+                    onChange={(e) =>
+                      setFormData({ ...formData, procesador: e.target.value })
+                    }
+                  >
+                    <option value="">Selecciona procesador</option>
+                    {procesadores.map((p) => (
+                      <option key={p} value={p}>
+                        {p}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="formGroup">
+                  <label>Sistema operativo</label>
+                  <select
+                    value={formData.sistemaOperativo}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        sistemaOperativo: e.target.value,
+                      })
+                    }
+                  >
+                    <option value="">Selecciona sistema operativo</option>
+                    {sistemasOperativos.map((so) => (
+                      <option key={so} value={so}>
+                        {so}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </>
+            )}
+
+            <div className="formGroup">
+              <label>Adscripción</label>
+              <select
+                value={formData.adscripcion}
+                onChange={(e) =>
+                  setFormData({ ...formData, adscripcion: e.target.value })
+                }
+              >
+                <option value="">Selecciona adscripción</option>
+                {adscripciones.map((a) => (
+                  <option key={a} value={a}>
+                    {a}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="formGroup">
+              <label>Responsable</label>
+              <input
+                type="text"
+                value={formData.responsable}
+                disabled
+                placeholder="Responsable asignado"
+              />
+            </div>
+          </div>
+
+          {/* Columna 3 */}
+          <div className="column">
+            <div className="formGroup">
+              <label>Lugar</label>
+              <textarea
+                placeholder="Ingresa lugar"
+                value={formData.lugar}
+                onChange={(e) =>
+                  setFormData({ ...formData, lugar: e.target.value })
+                }
+                rows={5}
+                className="textAreaLarge"
+              />
+            </div>
+
+            <div className="formGroup">
+              <label>Observaciones</label>
+              <textarea
+                placeholder="Ingresa observaciones"
+                value={formData.observaciones}
+                onChange={(e) =>
+                  setFormData({ ...formData, observaciones: e.target.value })
+                }
+                rows={5}
+                className="textAreaLarge"
+              />
+            </div>
+
+            <div className="formActions">
+              <button
+                type="button"
+                className="btnGuardar"
+                onClick={handleGuardar}
+              >
+                Guardar
+              </button>
+              <button
+                type="button"
+                className="btnCancelar"
+                onClick={handleCancelar}
+              >
+                Cancelar
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(Operador)/Editar/editar.css b/src/components/editar.css
similarity index 100%
rename from src/app/(Operador)/Editar/editar.css
rename to src/components/editar.css
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 827c457..5061275 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -6,7 +6,7 @@ import BarNavigation from "./BarNavigation";
 import { usePathname } from "next/navigation";
 
 function Header() {
-  const pathname = usePathname(); // obtenemos la ruta actual
+  const pathname = usePathname();
 
   return (
     <header className={header.header}>