diff --git a/src/app/(Operador)/AgregarEquipo/page.tsx b/src/app/(Operador)/AgregarEquipo/page.tsx
index a66ffa1..7562249 100644
--- a/src/app/(Operador)/AgregarEquipo/page.tsx
+++ b/src/app/(Operador)/AgregarEquipo/page.tsx
@@ -1,385 +1,11 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import axios from "axios";
-import Cookies from "js-cookie";
-import toast from "react-hot-toast";
-import "../../styles/layout/agregarEquipo.scss";
-import { useSearchParams } from "next/navigation";
+import dynamic from "next/dynamic";
+
+const AgregarEquipo = dynamic(() => import("@/components/AgregarEquipo"), {
+  ssr: false,
+});
 
 export default function Page() {
-  const searchParams = useSearchParams();
-  const inventario = searchParams.get("equipoId");
-
-  const [formData, setFormData] = useState({
-    serie: "",
-    marca: "",
-    modelo: "",
-    tipoEquipo: "",
-    estado: "",
-    sistemaOperativo: "",
-    procesador: "",
-    tipoUso: "",
-    observaciones: "",
-    adscripcion: "",
-    lugar: "",
-    responsable: "",
-  });
-
-  formData.serie = inventario ? inventario : "";
-
-  // Tipos de datos
-  interface TipoUso {
-    id_tipo_uso: number;
-    tipo_uso: string;
-  }
-
-  interface Estado {
-    id_estado: number;
-    estado: string;
-  }
-
-  interface TipoEquipo {
-    id_tipo_de_equipo: number;
-    tipo_equipo: string;
-  }
-
-  interface SistemaOperativo {
-    id_sistema_operativo: number;
-    sistema_operativo: string;
-  }
-
-  interface Procesador {
-    id_procesador: number;
-    procesador: string;
-  }
-
-  interface Marca {
-    id_marca: number;
-    tipo_marca: string;
-  }
-
-  interface Adscripcion {
-    id_adscripcion: number;
-    adscripcion: string;
-  }
-
-  // Estados
-  const [tiposUso, setTiposUso] = useState<TipoUso[]>([]);
-  const [marcas, setMarcas] = useState<Marca[]>([]);
-  const [estados, setEstados] = useState<Estado[]>([]);
-  const [adscripciones, setAdscripciones] = useState<Adscripcion[]>([]);
-  const [tiposEquipo, setTiposEquipo] = useState<TipoEquipo[]>([]);
-  const [sistemasOperativos, setSistemasOperativos] = useState<
-    SistemaOperativo[]
-  >([]);
-  const [procesadores, setProcesadores] = useState<Procesador[]>([]);
-
-  const [suggestions, setSuggestions] = useState({
-    adscripcion: [] 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");
-      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);
-        console.log(adscripciones);
-      } catch (err) {
-        if (axios.isAxiosError(err)) {
-          if (err.response) {
-            toast.error(
-              err.response.data?.message || "No se pudo conectar con el API"
-            );
-          } else if (err.request) {
-            toast.error("No se pudo conectar con el servidor");
-          } else {
-            toast.error("Ocurrió un error inesperado");
-          }
-        } else {
-          toast.error("Ocurrió un error inesperado");
-        }
-      }
-    };
-
-    fetchData();
-  }, [api_url]);
-
-  const handleInputChange = (field: string, value: string) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-  };
-
-  const handleSelectSuggestion = (field: string, value: string) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    setSuggestions((prev) => ({ ...prev, [field]: [] }));
-  };
-
-  const handleGuardar = async () => {
-    try {
-      const token = Cookies.get("token");
-      const headers = { Authorization: `Bearer ${token}` };
-      await axios.post(`${api_url}/equipos/crear`, formData, { headers });
-      toast.success("Equipo guardado correctamente");
-      setFormData({
-        serie: "",
-        marca: "",
-        modelo: "",
-        tipoEquipo: "",
-        estado: "",
-        sistemaOperativo: "",
-        procesador: "",
-        tipoUso: "",
-        observaciones: "",
-        adscripcion: "",
-        lugar: "",
-        responsable: "",
-      });
-    } catch (err) {
-      toast.error("Error al guardar el equipo");
-    }
-  };
-
-  const handleCancelar = () => {
-    toast.error("Acción cancelada");
-  };
-
-  return (
-    <div className="agregarEquipoContainer">
-      <div className="innerContainer">
-        <h2 className="information">Agregar Nuevo Equipo</h2>
-        <form className="equipoForm">
-          {/* Columna Izquierda */}
-          <div className="column">
-            <div className="formGroup">
-              <label>Serie</label>
-              <input
-                required
-                type="text"
-                placeholder="Ingresa serie"
-                value={formData.serie}
-                onChange={(e) => handleInputChange("serie", e.target.value)}
-              />
-            </div>
-
-            <div className="formGroup">
-              <label>Marca</label>
-              <select
-                required
-                value={formData.marca}
-                onChange={(e) => handleInputChange("marca", e.target.value)}
-              >
-                <option value="">Selecciona una marca</option>
-                {marcas.map((m) => (
-                  <option key={m.id_marca} value={m.tipo_marca}>
-                    {m.tipo_marca}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            <div className="formGroup">
-              <label>Modelo</label>
-              <input
-                type="text"
-                placeholder="Ingresa modelo"
-                value={formData.modelo}
-                onChange={(e) => handleInputChange("modelo", e.target.value)}
-              />
-            </div>
-
-            <div className="formGroup">
-              <label>Tipo de equipo</label>
-              <select
-                required
-                value={formData.tipoEquipo}
-                onChange={(e) =>
-                  handleInputChange("tipoEquipo", e.target.value)
-                }
-              >
-                <option value="">Selecciona tipo de equipo</option>
-                {tiposEquipo.map((t) => (
-                  <option key={t.id_tipo_de_equipo} value={t.tipo_equipo}>
-                    {t.tipo_equipo}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            <div className="formGroup">
-              <label>Estado</label>
-              <select
-                required
-                value={formData.estado}
-                onChange={(e) => handleInputChange("estado", e.target.value)}
-              >
-                <option value="">Selecciona estado</option>
-                {estados.map((e) => (
-                  <option key={e.id_estado} value={e.estado}>
-                    {e.estado}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          {/* Columna Centro */}
-          <div className="column">
-            <div className="formGroup">
-              <label>Tipo de uso</label>
-              <select
-                required
-                value={formData.tipoUso}
-                onChange={(e) => handleInputChange("tipoUso", e.target.value)}
-              >
-                <option value="">Selecciona tipo de uso</option>
-                {tiposUso.map((t) => (
-                  <option key={t.id_tipo_uso} value={t.tipo_uso}>
-                    {t.tipo_uso}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            {mostrarCamposComputadora && (
-              <>
-                <div className="formGroup">
-                  <label>Procesador</label>
-                  <select
-                    value={formData.procesador}
-                    onChange={(e) =>
-                      handleInputChange("procesador", e.target.value)
-                    }
-                  >
-                    <option value="">Selecciona procesador</option>
-                    {procesadores.map((p) => (
-                      <option key={p.id_procesador} value={p.procesador}>
-                        {p.procesador}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-
-                <div className="formGroup">
-                  <label>Sistema operativo</label>
-                  <select
-                    value={formData.sistemaOperativo}
-                    onChange={(e) =>
-                      handleInputChange("sistemaOperativo", e.target.value)
-                    }
-                  >
-                    <option value="">Selecciona sistema operativo</option>
-                    {sistemasOperativos.map((so) => (
-                      <option
-                        key={so.id_sistema_operativo}
-                        value={so.sistema_operativo}
-                      >
-                        {so.sistema_operativo}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              </>
-            )}
-
-            <div className="formGroup">
-              <label>Adscripción</label>
-              <input
-                required
-                type="text"
-                placeholder="Selecciona adscripción"
-                value={formData.adscripcion}
-                onChange={(e) =>
-                  handleInputChange("adscripcion", e.target.value)
-                }
-              />
-              {suggestions.adscripcion.length > 0 && (
-                <ul className="suggestions">
-                  {suggestions.adscripcion.map((s) => (
-                    <li
-                      key={s}
-                      onClick={() => handleSelectSuggestion("adscripcion", s)}
-                    >
-                      {s}
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          </div>
-
-          <div className="column">
-            <div className="formGroup">
-              <label>Lugar</label>
-              <textarea
-                placeholder="Ingresa lugar"
-                value={formData.lugar}
-                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) =>
-                  handleInputChange("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>
-  );
+  return <AgregarEquipo />;
 }
diff --git a/src/components/AgregarEquipo.tsx b/src/components/AgregarEquipo.tsx
new file mode 100644
index 0000000..ab20ef8
--- /dev/null
+++ b/src/components/AgregarEquipo.tsx
@@ -0,0 +1,386 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
+import toast from "react-hot-toast";
+import "../app/styles/layout/agregarEquipo.scss";
+
+import { useSearchParams } from "next/navigation";
+
+export default function Page() {
+  const searchParams = useSearchParams();
+  const inventario = searchParams.get("equipoId");
+
+  const [formData, setFormData] = useState({
+    serie: "",
+    marca: "",
+    modelo: "",
+    tipoEquipo: "",
+    estado: "",
+    sistemaOperativo: "",
+    procesador: "",
+    tipoUso: "",
+    observaciones: "",
+    adscripcion: "",
+    lugar: "",
+    responsable: "",
+  });
+
+  formData.serie = inventario ? inventario : "";
+
+  // Tipos de datos
+  interface TipoUso {
+    id_tipo_uso: number;
+    tipo_uso: string;
+  }
+
+  interface Estado {
+    id_estado: number;
+    estado: string;
+  }
+
+  interface TipoEquipo {
+    id_tipo_de_equipo: number;
+    tipo_equipo: string;
+  }
+
+  interface SistemaOperativo {
+    id_sistema_operativo: number;
+    sistema_operativo: string;
+  }
+
+  interface Procesador {
+    id_procesador: number;
+    procesador: string;
+  }
+
+  interface Marca {
+    id_marca: number;
+    tipo_marca: string;
+  }
+
+  interface Adscripcion {
+    id_adscripcion: number;
+    adscripcion: string;
+  }
+
+  // Estados
+  const [tiposUso, setTiposUso] = useState<TipoUso[]>([]);
+  const [marcas, setMarcas] = useState<Marca[]>([]);
+  const [estados, setEstados] = useState<Estado[]>([]);
+  const [adscripciones, setAdscripciones] = useState<Adscripcion[]>([]);
+  const [tiposEquipo, setTiposEquipo] = useState<TipoEquipo[]>([]);
+  const [sistemasOperativos, setSistemasOperativos] = useState<
+    SistemaOperativo[]
+  >([]);
+  const [procesadores, setProcesadores] = useState<Procesador[]>([]);
+
+  const [suggestions, setSuggestions] = useState({
+    adscripcion: [] 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");
+      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);
+        console.log(adscripciones);
+      } catch (err) {
+        if (axios.isAxiosError(err)) {
+          if (err.response) {
+            toast.error(
+              err.response.data?.message || "No se pudo conectar con el API"
+            );
+          } else if (err.request) {
+            toast.error("No se pudo conectar con el servidor");
+          } else {
+            toast.error("Ocurrió un error inesperado");
+          }
+        } else {
+          toast.error("Ocurrió un error inesperado");
+        }
+      }
+    };
+
+    fetchData();
+  }, [api_url]);
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSelectSuggestion = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setSuggestions((prev) => ({ ...prev, [field]: [] }));
+  };
+
+  const handleGuardar = async () => {
+    try {
+      const token = Cookies.get("token");
+      const headers = { Authorization: `Bearer ${token}` };
+      await axios.post(`${api_url}/equipos/crear`, formData, { headers });
+      toast.success("Equipo guardado correctamente");
+      setFormData({
+        serie: "",
+        marca: "",
+        modelo: "",
+        tipoEquipo: "",
+        estado: "",
+        sistemaOperativo: "",
+        procesador: "",
+        tipoUso: "",
+        observaciones: "",
+        adscripcion: "",
+        lugar: "",
+        responsable: "",
+      });
+    } catch (err) {
+      toast.error("Error al guardar el equipo");
+    }
+  };
+
+  const handleCancelar = () => {
+    toast.error("Acción cancelada");
+  };
+
+  return (
+    <div className="agregarEquipoContainer">
+      <div className="innerContainer">
+        <h2 className="information">Agregar Nuevo Equipo</h2>
+        <form className="equipoForm">
+          {/* Columna Izquierda */}
+          <div className="column">
+            <div className="formGroup">
+              <label>Serie</label>
+              <input
+                required
+                type="text"
+                placeholder="Ingresa serie"
+                value={formData.serie}
+                onChange={(e) => handleInputChange("serie", e.target.value)}
+              />
+            </div>
+
+            <div className="formGroup">
+              <label>Marca</label>
+              <select
+                required
+                value={formData.marca}
+                onChange={(e) => handleInputChange("marca", e.target.value)}
+              >
+                <option value="">Selecciona una marca</option>
+                {marcas.map((m) => (
+                  <option key={m.id_marca} value={m.tipo_marca}>
+                    {m.tipo_marca}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="formGroup">
+              <label>Modelo</label>
+              <input
+                type="text"
+                placeholder="Ingresa modelo"
+                value={formData.modelo}
+                onChange={(e) => handleInputChange("modelo", e.target.value)}
+              />
+            </div>
+
+            <div className="formGroup">
+              <label>Tipo de equipo</label>
+              <select
+                required
+                value={formData.tipoEquipo}
+                onChange={(e) =>
+                  handleInputChange("tipoEquipo", e.target.value)
+                }
+              >
+                <option value="">Selecciona tipo de equipo</option>
+                {tiposEquipo.map((t) => (
+                  <option key={t.id_tipo_de_equipo} value={t.tipo_equipo}>
+                    {t.tipo_equipo}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="formGroup">
+              <label>Estado</label>
+              <select
+                required
+                value={formData.estado}
+                onChange={(e) => handleInputChange("estado", e.target.value)}
+              >
+                <option value="">Selecciona estado</option>
+                {estados.map((e) => (
+                  <option key={e.id_estado} value={e.estado}>
+                    {e.estado}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Columna Centro */}
+          <div className="column">
+            <div className="formGroup">
+              <label>Tipo de uso</label>
+              <select
+                required
+                value={formData.tipoUso}
+                onChange={(e) => handleInputChange("tipoUso", e.target.value)}
+              >
+                <option value="">Selecciona tipo de uso</option>
+                {tiposUso.map((t) => (
+                  <option key={t.id_tipo_uso} value={t.tipo_uso}>
+                    {t.tipo_uso}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {mostrarCamposComputadora && (
+              <>
+                <div className="formGroup">
+                  <label>Procesador</label>
+                  <select
+                    value={formData.procesador}
+                    onChange={(e) =>
+                      handleInputChange("procesador", e.target.value)
+                    }
+                  >
+                    <option value="">Selecciona procesador</option>
+                    {procesadores.map((p) => (
+                      <option key={p.id_procesador} value={p.procesador}>
+                        {p.procesador}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="formGroup">
+                  <label>Sistema operativo</label>
+                  <select
+                    value={formData.sistemaOperativo}
+                    onChange={(e) =>
+                      handleInputChange("sistemaOperativo", e.target.value)
+                    }
+                  >
+                    <option value="">Selecciona sistema operativo</option>
+                    {sistemasOperativos.map((so) => (
+                      <option
+                        key={so.id_sistema_operativo}
+                        value={so.sistema_operativo}
+                      >
+                        {so.sistema_operativo}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </>
+            )}
+
+            <div className="formGroup">
+              <label>Adscripción</label>
+              <input
+                required
+                type="text"
+                placeholder="Selecciona adscripción"
+                value={formData.adscripcion}
+                onChange={(e) =>
+                  handleInputChange("adscripcion", e.target.value)
+                }
+              />
+              {suggestions.adscripcion.length > 0 && (
+                <ul className="suggestions">
+                  {suggestions.adscripcion.map((s) => (
+                    <li
+                      key={s}
+                      onClick={() => handleSelectSuggestion("adscripcion", s)}
+                    >
+                      {s}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+
+          <div className="column">
+            <div className="formGroup">
+              <label>Lugar</label>
+              <textarea
+                placeholder="Ingresa lugar"
+                value={formData.lugar}
+                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) =>
+                  handleInputChange("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/middleware.ts b/src/middleware.ts
index b0a5a38..4bfa08e 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -13,6 +13,6 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ["/AgregarEquipo", "/Escaner"],
+  matcher: [],
 };
 //IO