diff --git a/app/Components/SearchDateBetween/SearchDateBetween.tsx b/app/Components/SearchDateBetween/SearchDateBetween.tsx
new file mode 100644
index 0000000..5d16860
--- /dev/null
+++ b/app/Components/SearchDateBetween/SearchDateBetween.tsx
@@ -0,0 +1,51 @@
+"use client";
+import { Margarine } from "next/font/google";
+import { useState } from "react";
+
+function SearchDateBetween() {
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Fecha inicio:", startDate);
+    console.log("Fecha fin:", endDate);
+    // Aquí puedes hacer la lógica para buscar entre fechas
+  };
+
+  return (
+    <>
+      <form className="containerForm" onSubmit={handleSubmit}>
+        <label className="label">Desde</label>
+        <div className="groupInput">
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            placeholder="Fecha inicio"
+          />
+        </div>
+        <label className="label">Hasta</label>
+        <div className="groupInput">
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            placeholder="Fecha fin"
+          />
+        </div>
+        <button
+          className="button buttonSearch"
+          type="submit"
+          style={{ margin: "1rem 0" }}
+        >
+          Buscar
+        </button>
+      </form>
+    </>
+  );
+}
+
+export default SearchDateBetween;
+
+// By Tyrannuss
diff --git a/app/QuitarSancion/Page.module.css b/app/QuitarSancion/Page.module.css
new file mode 100644
index 0000000..7b884cc
--- /dev/null
+++ b/app/QuitarSancion/Page.module.css
@@ -0,0 +1,70 @@
+.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;
+}
diff --git a/app/QuitarSancion/page.tsx b/app/QuitarSancion/page.tsx
index a092139..540d361 100644
--- a/app/QuitarSancion/page.tsx
+++ b/app/QuitarSancion/page.tsx
@@ -1,11 +1,51 @@
+"use client";
+import { useState } from "react";
 import SearchUser from "../Components/SearchUser/searchUser";
+import styles from "./Page.module.css"; // importamos el css
 
 export default function Page() {
+  const [sanciones] = useState([
+    {
+      id: "1",
+      nombre: "Jose Garcia",
+      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'>
-      <h2 className='title'> Quitar Sanciones </h2>
-      <SearchUser/>
+    <section className="containerSection">
+      <h2 className="title"> Quitar Sanciones </h2>
+      <SearchUser />
+      <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>
   );
 }
-//IO
\ No newline at end of file
+//IO
diff --git a/app/Recibo/Page.module.css b/app/Recibo/Page.module.css
new file mode 100644
index 0000000..7b884cc
--- /dev/null
+++ b/app/Recibo/Page.module.css
@@ -0,0 +1,70 @@
+.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;
+}
diff --git a/app/Recibo/page.tsx b/app/Recibo/page.tsx
index 3cffc70..15e2c46 100644
--- a/app/Recibo/page.tsx
+++ b/app/Recibo/page.tsx
@@ -1,13 +1,98 @@
-import SearchUser from "../Components/SearchUser/searchUser";
+"use client";
 
+import { useState } from "react";
+import styles from "./Page.module.css"; // importamos el css
+import SearchDateBetween from "../Components/SearchDateBetween/SearchDateBetween";
+import Toggle from "../Components/Toggle/Toggle";
 export default function Page() {
+  const [reportes] = useState([
+    {
+      Servicio: "Plotter",
+      Total: "$1440.00",
+    },
+  ]);
+
+  const [recibos] = useState([
+    {
+      folio_recibo: "100255",
+      monto: "40.00",
+      fecha_recibo: "10/10/2025",
+      fecha_registro: "10/10/2025 05:32:20 pm",
+      usuario: "modulo1",
+    },
+  ]);
+
   return (
-    <section className='containerSection'>
-      <h2 className='title'> RECIBO </h2>
+    <section className="containerSection">
+      <h2 className="title"> RECIBO </h2>
 
-      <SearchUser/>
+      <Toggle
+        defaultView="1"
+        options={[
+          {
+            key: "1",
+            label: "Por recibo",
+            content: (
+              <>
+                <SearchDateBetween />
+                <div className={styles.tableContainer}>
+                  <table className={styles.machineTable}>
+                    <thead>
+                      <tr>
+                        <th>Folio Recibo</th>
+                        <th>Monto</th>
+                        <th>Fecha Recibo</th>
+                        <th>Fecha Registro</th>
+                        <th>Usuario</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {recibos.map((recibo, index) => (
+                        <tr key={index}>
+                          <td>{recibo.folio_recibo}</td>
+                          <td>{recibo.monto}</td>
+                          <td>{recibo.fecha_recibo}</td>
+                          <td>{recibo.fecha_registro}</td>
+                          <td>{recibo.usuario}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </>
+            ),
+          },
+
+          {
+            key: "2",
+            label: "Por Servicio",
+            content: (
+              <>
+                <SearchDateBetween />
+                <div className={styles.tableContainer}>
+                  <table className={styles.machineTable}>
+                    <thead>
+                      <tr>
+                        <th>Servicio</th>
+                        <th>Total</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {reportes.map((reporte, index) => (
+                        <tr key={index}>
+                          <td>{reporte.Servicio}</td>
+                          <td>{reporte.Total}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </>
+            ),
+          },
+        ]}
+      />
     </section>
-
   );
 }
-//IO
\ No newline at end of file
+//IO