diff --git a/app/(private)/QuitarSancion/page.tsx b/app/(private)/QuitarSancion/page.tsx
index 1040422..86eb0b8 100644
--- a/app/(private)/QuitarSancion/page.tsx
+++ b/app/(private)/QuitarSancion/page.tsx
@@ -2,10 +2,16 @@
 
 import SearchUser from "@/app/Components/SearchUser/searchUser";
 import QuitarSancion from "@/app/Components/QuitarSancion/QuitarSancion";
-
 export default function Page() {
   return (
-    <div style={{ display: "flex", gap: "1rem", flexDirection: "column" }}>
+    <div
+      style={{
+        display: "flex",
+        gap: "1rem",
+        flexDirection: "column",
+        paddingRight: "350px",
+      }}
+    >
       <h2 className="title"> Quitar Sanciones </h2>
       <SearchUser urlBase="QuitarSancion" value={"2"} />
       <QuitarSancion />
diff --git a/app/(private)/Reportes/page.tsx b/app/(private)/Reportes/page.tsx
index 9624bec..ac6bf32 100644
--- a/app/(private)/Reportes/page.tsx
+++ b/app/(private)/Reportes/page.tsx
@@ -1,28 +1,12 @@
 "use client";
 
-import { useState } from "react";
-import styles from "./Page.module.css"; // importamos el css
 import Toggle from "@/app/Components/Toggle/Toggle";
 import SearchDateBetween from "@/app/Components/SearchDateBetween/SearchDateBetween";
+import Porservicio from "@/app/Components/Reportes/porServicio";
+import PorServicios from "@/app/Components/Reportes/porServicio";
+import PorRecibos from "@/app/Components/Reportes/porRecibo";
 
 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"> REPORTES </h2>
@@ -36,30 +20,7 @@ export default function Page() {
             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>
+                <PorRecibos />
               </>
             ),
           },
@@ -69,25 +30,8 @@ export default function Page() {
             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>
+                <SearchDateBetween />
+                <PorServicios />
               </>
             ),
           },
diff --git a/app/Components/Reportes/Page.module.css b/app/Components/Reportes/Page.module.css
new file mode 100644
index 0000000..d48a3c1
--- /dev/null
+++ b/app/Components/Reportes/Page.module.css
@@ -0,0 +1,69 @@
+.tableContainer {
+  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/Components/Reportes/porRecibo.tsx b/app/Components/Reportes/porRecibo.tsx
new file mode 100644
index 0000000..8590296
--- /dev/null
+++ b/app/Components/Reportes/porRecibo.tsx
@@ -0,0 +1,34 @@
+"use client";
+import { useState } from "react";
+import styles from "./Page.module.css";
+
+interface reportes {
+  Servicio: "Plotter";
+  Total: "$1440.00";
+}
+
+function PorRecibos() {
+  const [reportes, SetQuitarSanciones] = useState<reportes[]>([]);
+  return (
+    <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>
+  );
+}
+
+export default PorRecibos;
diff --git a/app/Components/Reportes/porServicio.tsx b/app/Components/Reportes/porServicio.tsx
new file mode 100644
index 0000000..0259344
--- /dev/null
+++ b/app/Components/Reportes/porServicio.tsx
@@ -0,0 +1,43 @@
+"use client";
+import { useState } from "react";
+import styles from "./Page.module.css";
+
+interface servicios {
+  folio_recibo: "100255";
+  monto: "40.00";
+  fecha_recibo: "10/10/2025";
+  fecha_registro: "10/10/2025 05:32:20 pm";
+  usuario: "modulo1";
+}
+
+function PorServicios() {
+  const [recibos, setRecibos] = useState<servicios[]>([]);
+  return (
+    <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>
+  );
+}
+
+export default PorServicios;