diff --git a/app/ActivosMantenimiento/Page.module.css b/app/ActivosMantenimiento/Page.module.css
new file mode 100644
index 0000000..8f3544d
--- /dev/null
+++ b/app/ActivosMantenimiento/Page.module.css
@@ -0,0 +1,71 @@
+.tableContainer {
+    margin-top: 10px;
+    overflow-y: auto;
+    overflow-x: auto;
+    border-radius: 4px;
+    border: 1px solid #cfcfcf;
+    max-height: 430px;
+    scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
+    background-color: #f9f9f9;
+    width: 100%;
+}
+
+.machineTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+}
+
+.machineTable th,
+.machineTable td {
+    padding: 10px;
+    text-align: center;
+    border-bottom: 1px solid #cfcfcf;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.machineTable th {
+    position: sticky;
+    top: 0px;
+    background-color: rgb(1, 92, 184);
+    color: white;
+}
+
+.machineTable tr {
+    min-width: 400px;
+}
+
+.disponible {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: green;
+    color: green;
+    font-weight: bold;
+}
+
+.ocupado {
+    color: red;
+    font-weight: bold;
+}
+
+
+.actions {
+    text-align: center;
+}
+
+.resetButton {
+    padding: 8px 16px;
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.resetButton:hover {
+    background-color: #cc0000;
+}
\ No newline at end of file
diff --git a/app/ActivosMantenimiento/page.tsx b/app/ActivosMantenimiento/page.tsx
index e440840..11ddc6f 100644
--- a/app/ActivosMantenimiento/page.tsx
+++ b/app/ActivosMantenimiento/page.tsx
@@ -1,12 +1,203 @@
-import SearchUser from "../Components/SearchUser/searchUser";
+"use client";
+import { useState } from "react";
+import Toggle from "../Components/Toggle/Toggle";
+import styles from "./Page.module.css"; // importamos el css
 
 export default function Page() {
+  const [machines] = useState([
+    {
+      ubicacion: "1",
+      nombre: "PCD108",
+      plataforma: "Windows",
+      area: "PCNET1",
+      activo: true,
+    },
+  ]);
+
+  const [tables] = useState([
+    {
+      mesa: "1",
+      activo: false,
+    },
+  ]);
+
+  const [area, setArea] = useState("");
+
   return (
-    <section className='containerSection'>
-      <h2 className='title'> ACTIVOS Y EN MANTENIMIENTO</h2>
+    <section className="containerSection">
+      <h2 className="title"> ACTIVOS Y EN MANTENIMIENTO</h2>
 
+      <Toggle
+        defaultView="1"
+        options={[
+          {
+            key: "1",
+            label: "Equipos",
+            content: (
+              <>
+                <div className="groupInput">
+                  <select
+                    value={area}
+                    onChange={(e) => setArea(e.target.value)}
+                  >
+                    <option value="">-- Selecciona un Area --</option>
+                    <option value="ANEX03">ANEX03</option>
+                  </select>
+                  <button className="button buttonSearch" type="submit">
+                    Buscar
+                  </button>
+                </div>
+
+                <table className={styles.machineTable}>
+                  <thead>
+                    <tr>
+                      <th>Ubicacion</th>
+                      <th>Nombre</th>
+                      <th>Plataforma</th>
+                      <th>Area</th>
+                      <th>Activo</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {machines.map((machine, index) => (
+                      <tr key={index}>
+                        <td>{machine.ubicacion}</td>
+                        <td>{machine.nombre}</td>
+                        <td>{machine.plataforma}</td>
+                        <td>{machine.area}</td>
+                        <td>
+                          {" "}
+                          <input type="checkbox" />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </>
+            ),
+          },
+          {
+            key: "2",
+            label: "Areas",
+            content: <></>,
+          },
+          {
+            key: "3",
+            label: "Mesas",
+            content: (
+              <>
+                <table className={styles.machineTable}>
+                  <thead>
+                    <tr>
+                      <th>Mesa</th>
+                      <th>Activo</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {tables.map((table, index) => (
+                      <tr key={index}>
+                        <td>{table.mesa}</td>
+                        <td>
+                          {" "}
+                          <input type="checkbox" />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </>
+            ),
+          },
+        ]}
+      />
     </section>
-
   );
 }
-//IO
\ No newline at end of file
+//IO
+
+//
+//
+//                                                                                     .:--===--::.
+//                                                                                .-+*%%%%%%#%%%%%%%#+=:
+//                                                                             :=#%############%%%%%%@@@+
+//                                                                          .-*#######********##%%%%%%@%%
+//                                                                        .=######********+++**##%%%%%%@@:
+//                                                                      .=#####**********++++**##%%%%%%%@=
+//                                                                     -####**************+++**##%%%%%%%@+
+//                                                                   :*################***+***##%%%%%%%%%#
+//                                                                  =%#######%%%%%%%%##******###%%%%%%%%@%
+//                                                                .+%###%%%%%%%%%%%%%##******##%%%%%%%%%%%
+//                         .:::----:::..                         .#%%%%%%@@@%%%%%%%%##******###%%%%%%%%%%#
+//                   .-=+++++++++********+=-:.                  .#%%%%@@@@@@%%%%%%%##*******##%%%%%%%%%%%*
+//               .-+#*++++++***###%%#%########*+-              .#%%%%@@@@@@@%%%%%%%#***+++**##%%%%%%%%%@%=
+//             :+##++===+++*#%%%%%%%%%%%%%%%%%%%%%+:          .#%%%@@@@@@@@%%%%%%%%%#**+++**#%%%%%%%%%%%@:
+//           :*%#++=====+++*#%%%%%%%%%%%%%%@@%%%%@@@#=.       +@@@@@@@@@@@@@%%%%%%%%#**++***##%%%%%%%%%%#
+//           #%#**++=====+++*##%%%%%%%%%%%%@@@@@%@@@@@%=   ..:@@@@@@@@@@@@@@%%%%%%%%##**+***##%%%%%%%%%%-
+//           *%##**+++===++++**##%%%%%%%%%%@@@@@@@@@@@@@#+*#%%@@@@@@@@@@@@@@%%%%%%%%##**+***##%%%%%%%%%#
+//           +%%###**++===+++++*##%%%%%%%%%@@@@@@@@@@@@@%*+*%@@@@@@@@@@@@@@%%%%%%%%##**+++**##%%%%%%%%%-
+//           :%%%###**++===+++++*#%%%%%%%%%@@@@@@@@@@@@@%**%%@@@@@@@@@@@@@@%%%#####***++++**##%%%%%%%%*
+//            *%%%%##**+++++++++*#%%%%%%%%%@@@@@@@@@@@@@@%%@@@@@@@@@@@@@@@@@@@%%%%%##***++**##%%%%%%%%.
+//            .%%%%%##*+++==+++*#%%%%%%%%%%%%%%%@@@@@@@@@@@@@@%=-=++++*#%@@@@@@@%%%%%%%%####%%%%%%%%%=
+//             +%%%%%#**++=+++*##%%%%%%%%%##%%%%@@@@@%%%%%%%%%#-=--=====++#%@@@@@@%%%%%%%%%%%%%%%%@@*
+//             .#%%%%%**++==++*##%%%%%#####%%%@@@%%%%%%%%%%%%%*------=======*%@@@@@%%%%%%%%%%%%%%@@#.
+//              :%%%%%**++==+++**########%%%@@@%%%%%%%%%%%%%%%*------:----====+%@@%%%%%%#%%@@@@@@@#.
+//               -%%%%#*++===++++****##%%%@@@@%%%%%%%%%%%%%%%%*-::--:-::--------*@%%%%%#####**%@@%.
+//                +%%%#*++===+++***##%%@@@@@@%%%%%%%%%%%%%%%%%*::::::::::::::-:::=%%%%%%###+. .=#:
+//                 +%%%**+++++***#%%%@%@@@@@%%%%%%%%%%%%%%%%%%*:::::::::..:.::::.::%%%%###=
+//                  +%%#*******#%%%%%%%@@@@@%###########%%%%%%+....................-%%%##=
+//                   +%%######%%%@%#%%%@@@@@##################+         .. ..  .    *%##-
+//                    -#%%%%%%%%@#*#%%%@@@@%##################=                     :%*:
+//                     .*%%%%%@#:+*#%%%%@@%###################+                      -.
+//                       :+#%@+  .=##%%%%**###################+
+//                          .:     -#%%#-:####################+                  .....
+//                                  .==.:#####################*              ..........
+//                                     .###%##################*     .     ..............
+//                                    .#%##%%%%##########%#%%%# .........................
+//                                    *%%%%%%%%%%%%%%%%%%%%%%%# .........................
+//                                   =%%%%%%%%%%%%%%%%%%%%%%%%%...........................
+//                                  .%%%%%%%%%%%%%%%%%%%%%%%%%%............................
+//                                  +%%%%%%%%%%%%%%%%%%%%%%%%%%.........................:.:.
+//                                  %%%%%%%%%%%%%%%%%%%#*+++===::::::::.................:.::
+//                                 -%%%%%%%%%%%%%%*==::::::-=+=+=-:::::::::............:::::.
+//                                 *%%%%%%%%%%%%%%=:::.:-**+*******+:....:-::.......::::::::-
+//                                 #%%%%%%%%%%%%%%+::....-++=====+=.....::=.......:.:::::-:--
+//                                .%%%%%%%%%%%%%%%*-::.....::--:::.....:-++....::.::::::----=
+//                                .%%%%%%%%%%%%%%%%%*=:..............:-=++=...::::::::------=
+//                                :%%%%%%%%%%%%%%%%%%%%*-.........::-+++++=:::::::::-----=-=:
+//                                .+%%%%%%%%%%%%%%%%%%#=-=-:::::-----:-=++-:::::::-:-::-==-.
+//                                  :#%%%%%%%%%%%%%#=.  :------------    :-----------::::.
+//                                    :*%%%%%%%%%%%=   .--------------.  .--------=-.
+//                                      .+%%#%%%%%%# :+#::::--------:*%*=-----==--:
+//                                         --#%%%%%%#%@=:::::::::::::=@%#*==+*+-:.      .=+=:
+//                            .:-=+++++=-    .-*%%%%%%#::....:::::::.-@@%%%%%%%%%%#*+-.=%%%%%%+.
+//                        .-*%#*+=--==*%%++*#%%%%%%%%@@-:...........:+@@@%%%%%%###**##%%%*--=*#%=.
+//                       .#%#==:. :=*#%%##****###%%%%@@*::::.....::::*@@@%%%%%###########%%*=.:=##:
+//                       -%%+-.:=#%%%#####******##%%@@@@-:::::.::::::#@@@%%%%###########%%%%%%=.=%%.
+//                    :. .#%#*+#%%%###############%%@@@@*::::::::::::@@@@%%%%%%%%%%%%%%####%%%%*.##.
+//                    :+*#%%+*%%%%%%%%%%%%%%%%%%%%%%@@@@%::::..:::::=@@@@@%%%%%%%%%%*++***+=-=+#-*+:.
+//                       -#=#%%%#*+======+++==#%%%%%@%@@@=:....:::::+@@@%@%%%%%%%%#+#%%%%%%%%#+=+%#:
+//                       ---+++++*##%%%%%%+:=#%%%%%%%%@@@*:....:...:-@@@@%%%%%%%%%#+%%%%%%%%%%%%%%%
+//                       .#%%%%%%%%%%%%%+:+%%%%%%%%%%%@@@#:........::+@@@%%%%%%%%%%#*%%%%%%%%%%%%%#
+//                        -%%%%%%%%%%%#:=#%%%%%%%%%%%%@@@=:.........::#@@%%%%%%%%%%%%+#%%%%%%%%%%%=
+//                         *%%%%%%%%%*:*%%%%%%%%%%%%%%@@%:...........:=@@@%%%%%%%%%%%%#+#%%%%%%%%#.
+//                         .%%%%%@%%+:#%###%%%%%%%%%%%@@#:...........::#@@%%%%%%#######%*+#@%%%@@=
+//                         .#%%@@%%*-#%##########%%%%%@@%:.............+@@%%#############%+=%@%%@%
+//                          .+%@%%%-#%##############%%@@@:.............-@@%###############%#-+@%#:
+//                            :#%%*=%%###############%@@@+....::.:.....:@@%################%%+=+.
+//                              -#=*%%%##%%%%%%%##%%%%@@@%....::::.....:@@%%###%%%%%%%%##%%%%%#-.
+//                                -+%%%%%%%%%%%%%%%%%%%@@@*...::::.....:@@%%%%%%%%%%%%%%%%%%%%%%=
+//                                ::#%%%%%%%%%%%%%%%%%%%@@@+..:::::....=@@%%%%%%%%%%%%%%%%%%%%%#+.
+//                                .::+%%%%%%%%%%%%%%%%%%@@@@+:::--:....#@@%%%%%%%%%%%%%%%#*+-:....
+//                                 .:-=*%%%%%%%%%%%%%%%%%@@@@+::--::..+@@@%%%%%%%%%%%%#+:.
+//                                     ::+#%%%%%%%%%%%%%%%@@@@+----::=@@@%%%%%%%%%%%*:
+//                                        .:+*%%%%%%%%%%%%%@@@@+----+@@@%%%%%%%%%%+.
+//                                           .-+#%%%%%%%%%%%@@@@===*@@@%%%%%%%%%#:
+//                                             .-=*%%%%%%%%%@@@@#=#@@@@%%%%%%%%*.
+//                                               .-+*%%%%%%%%@@@@#@@@@%%%%%%%@+.
+//                                                 .=+#%%@%%%@@@@@@@@%%%%@@@%-
+//                                                   :+#%@@@@@@@@@@@@@@@@@@#:
+//                                                    .=#@@@@@@@@@@@@@@@@%=
+//                                                      :+%@@@@@@@@@@@@%+.
+//                                                         .:-=++**###+.
+//
+// By Tyrannuss
diff --git a/app/BitacoraSanciones/Page.module.css b/app/BitacoraSanciones/Page.module.css
new file mode 100644
index 0000000..8f3544d
--- /dev/null
+++ b/app/BitacoraSanciones/Page.module.css
@@ -0,0 +1,71 @@
+.tableContainer {
+    margin-top: 10px;
+    overflow-y: auto;
+    overflow-x: auto;
+    border-radius: 4px;
+    border: 1px solid #cfcfcf;
+    max-height: 430px;
+    scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
+    background-color: #f9f9f9;
+    width: 100%;
+}
+
+.machineTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+}
+
+.machineTable th,
+.machineTable td {
+    padding: 10px;
+    text-align: center;
+    border-bottom: 1px solid #cfcfcf;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.machineTable th {
+    position: sticky;
+    top: 0px;
+    background-color: rgb(1, 92, 184);
+    color: white;
+}
+
+.machineTable tr {
+    min-width: 400px;
+}
+
+.disponible {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: green;
+    color: green;
+    font-weight: bold;
+}
+
+.ocupado {
+    color: red;
+    font-weight: bold;
+}
+
+
+.actions {
+    text-align: center;
+}
+
+.resetButton {
+    padding: 8px 16px;
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.resetButton:hover {
+    background-color: #cc0000;
+}
\ No newline at end of file
diff --git a/app/BitacoraSanciones/page.tsx b/app/BitacoraSanciones/page.tsx
index 8007ae7..f0f7096 100644
--- a/app/BitacoraSanciones/page.tsx
+++ b/app/BitacoraSanciones/page.tsx
@@ -1,13 +1,161 @@
+"use client";
+
+import { useState } from "react";
+import SearchDate from "../Components/SearchDate/SearchDate";
 import SearchUser from "../Components/SearchUser/searchUser";
+import Toggle from "../Components/Toggle/Toggle";
+import styles from "./Page.module.css"; // importamos el css
 
 export default function Page() {
+  const [machines] = useState([
+    {
+      hora_entrada: "10 ",
+      min_utilizados: "20",
+      hora_salida: "10:15",
+      cuenta_asociada: "15",
+    },
+  ]);
+  const [tables] = useState([
+    {
+      no_mesa: "10 ",
+      no_cuenta: "425530275",
+      hora_entrada: "10:15",
+      tiempo_asignado: "15",
+      hora_salida: "10:30",
+    },
+  ]);
+
+  const [alumnos] = useState([
+    {
+      tiempo_entrada: "10:10 ",
+      tiempo_asignado: "15",
+      Ubicacion_equipo: "2",
+    },
+  ]);
+  const [ubicacion_equipo, setUbicacionEquipo] = useState("");
   return (
-    <section className='containerSection'>
-      <h2 className='title'> BITACORA Y SANCIONES </h2>
+    <section className="containerSection">
+      <h2 className="title"> BITACORA Y SANCIONES </h2>
 
-      <SearchUser/>
+      <Toggle
+        defaultView="1"
+        options={[
+          {
+            key: "1",
+            label: "Bitacora de equipo",
+            content: (
+              <>
+                <SearchDate />
+
+                <form className="containerForm">
+                  <label className="label">Ubicacion de equipo</label>
+
+                  <div className="groupInput">
+                    <select
+                      value={ubicacion_equipo}
+                      onChange={(e) => setUbicacionEquipo(e.target.value)}
+                    >
+                      <option value="">-- Selecciona un equipo --</option>
+                      <option value="255">Equipo 255</option>
+                    </select>
+                    <button className="button buttonSearch" type="submit">
+                      Asignar
+                    </button>
+                  </div>
+                </form>
+                <div className={styles.tableContainer}>
+                  <table className={styles.machineTable}>
+                    <thead>
+                      <tr>
+                        <th>Hora Entrada</th>
+                        <th>Minutos utilizados</th>
+                        <th>Hora salida</th>
+                        <th>Cuenta asociada</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {machines.map((machine, index) => (
+                        <tr key={index}>
+                          <td>{machine.hora_entrada}</td>
+                          <td>{machine.min_utilizados}</td>
+                          <td>{machine.hora_salida}</td>
+                          <td>{machine.cuenta_asociada}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </>
+            ),
+          },
+          {
+            key: "2",
+            label: "Bitacora de alumno",
+            content: (
+              <div className={styles.tableContainer}>
+                <SearchDate />
+                <table className={styles.machineTable}>
+                  <thead>
+                    <tr>
+                      <th>Tiempo Entrada</th>
+                      <th>Tiempo Asignado</th>
+                      <th>Ubicacion del equipo</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {alumnos.map((alumno, index) => (
+                      <tr key={index}>
+                        <td>{alumno.tiempo_entrada}</td>
+                        <td>{alumno.tiempo_asignado}</td>
+                        <td>{alumno.Ubicacion_equipo}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ),
+          },
+          {
+            key: "3",
+            label: "Bitacora mesas",
+            content: (
+              <div className={styles.tableContainer}>
+                <SearchDate />
+                <table className={styles.machineTable}>
+                  <thead>
+                    <tr>
+                      <th>Mesa</th>
+                      <th>Cuenta</th>
+                      <th>Hora Entrada</th>
+                      <th>Tiempo Asignado</th>
+                      <th>Hora Salida</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {tables.map((table, index) => (
+                      <tr key={index}>
+                        <td>{table.no_mesa}</td>
+                        <td>{table.no_cuenta}</td>
+                        <td>{table.hora_entrada}</td>
+                        <td>{table.tiempo_asignado}</td>
+                        <td>{table.hora_salida}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ),
+          },
+          {
+            key: "4",
+            label: "Sanciones",
+            content: <SearchUser />,
+          },
+        ]}
+      />
     </section>
-
   );
 }
-//IO
\ No newline at end of file
+//IO
+
+// by Tyrannuss
diff --git a/app/Components/SearchDate/SearchDate.tsx b/app/Components/SearchDate/SearchDate.tsx
new file mode 100644
index 0000000..699670b
--- /dev/null
+++ b/app/Components/SearchDate/SearchDate.tsx
@@ -0,0 +1,29 @@
+"use client";
+import { useState } from "react";
+
+function SearchDate() {
+  const [date, setDate] = useState("");
+
+  return (
+    <>
+      <form className="containerForm">
+        <label className="label">Fecha</label>
+        <div className="groupInput">
+          <input
+            type="date"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+            placeholder="Selecciona una fecha..."
+          />
+          <button className="button buttonSearch" type="submit">
+            Buscar
+          </button>
+        </div>
+      </form>
+    </>
+  );
+}
+
+export default SearchDate;
+
+//By Tyrannuss