diff --git a/app/(private)/ActivosMantenimiento/page.tsx b/app/(private)/ActivosMantenimiento/page.tsx
index e6cdf48..658d7c9 100644
--- a/app/(private)/ActivosMantenimiento/page.tsx
+++ b/app/(private)/ActivosMantenimiento/page.tsx
@@ -1,7 +1,9 @@
 "use client";
 import SearchUser from "@/app/Components/SearchUser/searchUser";
+import Equipos from "@/app/Components/ActivosMantenimiento/Equipos";
 import Toggle from "@/app/Components/Toggle/Toggle";
-import { useState } from "react";
+import Areas from "@/app/Components/ActivosMantenimiento/Areas";
+import Mesas from "@/app/Components/ActivosMantenimiento/Mesas";
 
 export default function Page(props: {
   searchParams?: Promise<{
@@ -12,8 +14,6 @@ export default function Page(props: {
 }) {
   const params = props.searchParams;
 
-  const [tiempo, setTiempo] = useState("");
-
   return (
     <section className="containerSection">
       <h2 className="title">EQUIPOS ACTIVOS Y EN MANTENIMIENTO</h2>
@@ -27,27 +27,7 @@ export default function Page(props: {
             content: (
               <>
                 <SearchUser urlBase="ActivosMantenimiento" value={"2"} />
-
-                <form className="containerForm">
-                  <label className="label">Equipos disponibles</label>
-                  <div className="groupInput">
-                    <select
-                      value={tiempo}
-                      onChange={(e) => setTiempo(e.target.value)}
-                    >
-                      <option value="">-- Equipos disponibles --</option>
-                      <option value="15">1</option>
-                      <option value="30">2</option>
-                      <option value="45">3</option>
-                      <option value="60">4</option>
-                      <option value="90">5</option>
-                      <option value="120">6</option>
-                    </select>
-                    <button className="button buttonSearch" type="submit">
-                      Asignar
-                    </button>
-                  </div>
-                </form>
+                <Equipos />
               </>
             ),
           },
@@ -56,37 +36,7 @@ export default function Page(props: {
             label: "Areas",
             content: (
               <>
-                <form className="containerForm">
-                  <label className="label">Áreas disponibles</label>
-                  <div className="groupInput">
-                    <select
-                      value={tiempo}
-                      onChange={(e) => setTiempo(e.target.value)}
-                    >
-                      <option value="">-- Áreas disponibles --</option>
-                      <option value="15">PECERA</option>
-                      <option value="30">JAULA</option>
-                      <option value="45">HUACAL</option>
-                      <option value="60">PCNET1</option>
-                      <option value="90">PCNET2</option>
-                    </select>
-
-                    <div className="checkbox-grid">
-                      <label>
-                        <input type="checkbox" />
-                        Activo
-                      </label>
-                      <label>
-                        <input type="checkbox" />
-                        Mantenimiento
-                      </label>
-                    </div>
-
-                    <button className="button buttonSearch" type="submit">
-                      Actualizar
-                    </button>
-                  </div>
-                </form>
+                <Areas />
               </>
             ),
           },
@@ -95,31 +45,7 @@ export default function Page(props: {
             label: "Liberar mesa",
             content: (
               <>
-                <form className="containerForm">
-                  <label className="label">Mesas disponibles</label>
-                  <div className="groupInput">
-                    <select
-                      value={tiempo}
-                      onChange={(e) => setTiempo(e.target.value)}
-                    >
-                      <option value="">-- Mesas disponibles --</option>
-                      <option value="15">1</option>
-                      <option value="30">4</option>
-                      <option value="45">7</option>
-                      <option value="60">10</option>
-                      <option value="90">15</option>
-                    </select>
-
-                    <div className="checkbox">
-                      <input type="checkbox" />
-                      <label>Mantenimiento</label>
-                    </div>
-
-                    <button className="button buttonSearch" type="submit">
-                      Confirmar
-                    </button>
-                  </div>
-                </form>
+                <Mesas />
               </>
             ),
           },
diff --git a/app/(private)/QuitarSancion/page.tsx b/app/(private)/QuitarSancion/page.tsx
index e9efcc6..1040422 100644
--- a/app/(private)/QuitarSancion/page.tsx
+++ b/app/(private)/QuitarSancion/page.tsx
@@ -1,51 +1,15 @@
 "use client";
-import { useState } from "react";
-import styles from "./Page.module.css";
+
 import SearchUser from "@/app/Components/SearchUser/searchUser";
+import QuitarSancion from "@/app/Components/QuitarSancion/QuitarSancion";
 
 export default function Page() {
-  const [sanciones] = useState([
-    {
-      id: "1",
-      nombre: "Jose Toleda",
-      mmotivo: "No cerrar sancion",
-      duracion: "2",
-      fecha_sancion: "10/09/2025 a las 02:45:26 PM",
-      utilizar_equipo: "13/09/2025",
-    },
-  ]);
   return (
-    <section className="containerSection">
+    <div style={{ display: "flex", gap: "1rem", flexDirection: "column" }}>
       <h2 className="title"> Quitar Sanciones </h2>
       <SearchUser urlBase="QuitarSancion" value={"2"} />
-      <div className={styles.tableContainer}>
-        <table className={styles.machineTable}>
-          <thead>
-            <tr>
-              <th>id</th>
-              <th>Nombre</th>
-              <th>Motivo Sancion</th>
-              <th>Duracion (semanas) </th>
-              <th>Fecha Sancion</th>
-              <th>Podria utilizar el servicio hasta</th>
-            </tr>
-          </thead>
-          <tbody>
-            {sanciones.map((sancion, index) => (
-              <tr key={index}>
-                <td>{sancion.id}</td>
-                <td>{sancion.nombre}</td>
-                <td>{sancion.mmotivo}</td>
-                <td>{sancion.duracion}</td>
-                <td>{sancion.fecha_sancion}</td>
-                <td>{sancion.utilizar_equipo}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      <button className="button buttonSearch">Quitar Sancion</button>
-    </section>
+      <QuitarSancion />
+    </div>
   );
 }
 //IO
diff --git a/app/Components/ActivosMantenimiento/Areas.tsx b/app/Components/ActivosMantenimiento/Areas.tsx
new file mode 100644
index 0000000..611a036
--- /dev/null
+++ b/app/Components/ActivosMantenimiento/Areas.tsx
@@ -0,0 +1,43 @@
+"use client";
+import { useState } from "react";
+
+function Areas() {
+  const [tiempo, setTiempo] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Equipo asignado con tiempo:", tiempo);
+  };
+
+  return (
+    <form className="containerForm" onSubmit={handleSubmit}>
+      <label className="label">Áreas disponibles</label>
+      <div className="groupInput">
+        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+          <option value="">-- Áreas disponibles --</option>
+          <option value="15">PECERA</option>
+          <option value="30">JAULA</option>
+          <option value="45">HUACAL</option>
+          <option value="60">PCNET1</option>
+          <option value="90">PCNET2</option>
+        </select>
+
+        <div className="checkbox-grid">
+          <label>
+            <input type="checkbox" />
+            Activo
+          </label>
+          <label>
+            <input type="checkbox" />
+            Mantenimiento
+          </label>
+        </div>
+
+        <button className="button buttonSearch" type="submit">
+          Actualizar
+        </button>
+      </div>
+    </form>
+  );
+}
+export default Areas;
diff --git a/app/Components/ActivosMantenimiento/Equipos.tsx b/app/Components/ActivosMantenimiento/Equipos.tsx
new file mode 100644
index 0000000..43b6f70
--- /dev/null
+++ b/app/Components/ActivosMantenimiento/Equipos.tsx
@@ -0,0 +1,33 @@
+"use client";
+import { useState } from "react";
+
+function Equipos() {
+  const [tiempo, setTiempo] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Equipo asignado con tiempo:", tiempo);
+  };
+
+  return (
+    <form className="containerForm" onSubmit={handleSubmit}>
+      <label className="label">Equipos disponibles</label>
+      <div className="groupInput">
+        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+          <option value="">-- Equipos disponibles --</option>
+          <option value="15">1</option>
+          <option value="30">2</option>
+          <option value="45">3</option>
+          <option value="60">4</option>
+          <option value="90">5</option>
+          <option value="120">6</option>
+        </select>
+        <button className="button buttonSearch" type="submit">
+          Asignar
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export default Equipos;
diff --git a/app/Components/ActivosMantenimiento/Mesas.tsx b/app/Components/ActivosMantenimiento/Mesas.tsx
new file mode 100644
index 0000000..42b2eef
--- /dev/null
+++ b/app/Components/ActivosMantenimiento/Mesas.tsx
@@ -0,0 +1,37 @@
+"use client";
+import { useState } from "react";
+
+function Mesas() {
+  const [tiempo, setTiempo] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Equipo asignado con tiempo:", tiempo);
+  };
+
+  return (
+    <form className="containerForm" onSubmit={handleSubmit}>
+      <label className="label">Mesas disponibles</label>
+      <div className="groupInput">
+        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+          <option value="">-- Mesas disponibles --</option>
+          <option value="15">1</option>
+          <option value="30">4</option>
+          <option value="45">7</option>
+          <option value="60">10</option>
+          <option value="90">15</option>
+        </select>
+
+        <div className="checkbox">
+          <input type="checkbox" />
+          <label>Mantenimiento</label>
+        </div>
+
+        <button className="button buttonSearch" type="submit">
+          Confirmar
+        </button>
+      </div>
+    </form>
+  );
+}
+export default Mesas;
diff --git a/app/(private)/QuitarSancion/Page.module.css b/app/Components/QuitarSancion/Page.module.css
similarity index 100%
rename from app/(private)/QuitarSancion/Page.module.css
rename to app/Components/QuitarSancion/Page.module.css
diff --git a/app/Components/QuitarSancion/QuitarSancion.tsx b/app/Components/QuitarSancion/QuitarSancion.tsx
new file mode 100644
index 0000000..2a17bcf
--- /dev/null
+++ b/app/Components/QuitarSancion/QuitarSancion.tsx
@@ -0,0 +1,49 @@
+"use client";
+import { useState } from "react";
+import styles from "./Page.module.css";
+
+interface sancion {
+  id: number;
+  nombre: string;
+  motivo: string;
+  duracion: number;
+  fecha_sancion: string;
+  utilizar_equipo: number;
+}
+
+function QuitarSancion() {
+  const [sanciones, setSanciones] = useState<sancion[]>([]);
+  return (
+    <section className="containerSection">
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>id</th>
+              <th>Nombre</th>
+              <th>Motivo Sancion</th>
+              <th>Duracion (semanas) </th>
+              <th>Fecha Sancion</th>
+              <th>Podria utilizar el servicio hasta</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sanciones.map((sancion, index) => (
+              <tr key={index}>
+                <td>{sancion.id}</td>
+                <td>{sancion.nombre}</td>
+                <td>{sancion.motivo}</td>
+                <td>{sancion.duracion}</td>
+                <td>{sancion.fecha_sancion}</td>
+                <td>{sancion.utilizar_equipo}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <button className="button buttonSearch">Quitar Sancion</button>
+    </section>
+  );
+}
+
+export default QuitarSancion;