diff --git a/app/(private)/Reportes/ReportesClient.tsx b/app/(private)/Reportes/ReportesClient.tsx
new file mode 100644
index 0000000..4bca173
--- /dev/null
+++ b/app/(private)/Reportes/ReportesClient.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import Toggle from '@/app/Components/Global/Toggle/Toggle';
+import SearchDateBetween from '@/app/Components/SearchDateBetween/SearchDateBetween';
+import PorServicios from '@/app/Components/Reportes/porServicio';
+import PorRecibos from '@/app/Components/Reportes/porRecibo';
+
+export default function ReportesClient({ defaultKey }: { defaultKey?: string }) {
+  const [desde, setDesde] = useState<string | null>(null);
+  const [hasta, setHasta] = useState<string | null>(null);
+
+  return (
+    <section className="containerSection">
+      <h2 className="title">REPORTES</h2>
+
+      <Toggle
+        defaultView={defaultKey}
+        options={[
+          {
+            key: 'Por recibo',
+            label: 'Por recibo',
+            content: (
+              <>
+                <SearchDateBetween
+                  onSearch={(d, h) => {
+                    setDesde(d);
+                    setHasta(h);
+                  }}
+                />
+                <PorRecibos desde={desde} hasta={hasta} />
+              </>
+            ),
+          },
+          {
+            key: 'Por Servicio',
+            label: 'Por Servicio',
+            content: (
+              <>
+                <SearchDateBetween
+                  onSearch={(d, h) => {
+                    setDesde(d);
+                    setHasta(h);
+                  }}
+                />
+                {/* <PorServicios desde={desde} hasta={hasta} /> */}
+              </>
+            ),
+          },
+        ]}
+      />
+    </section>
+  );
+}
diff --git a/app/(private)/Reportes/page.tsx b/app/(private)/Reportes/page.tsx
index a328a07..b361760 100644
--- a/app/(private)/Reportes/page.tsx
+++ b/app/(private)/Reportes/page.tsx
@@ -1,48 +1,11 @@
-import Toggle from "@/app/Components/Global/Toggle/Toggle";
-import SearchDateBetween from "@/app/Components/SearchDateBetween/SearchDateBetween";
-import PorServicios from "@/app/Components/Reportes/porServicio";
-import PorRecibos from "@/app/Components/Reportes/porRecibo";
+import ReportesClient from './ReportesClient';
 
 export default async function Page(props: {
   searchParams?: Promise<{
     key: string;
-    numAcount: string;
   }>;
 }) {
   const params = await props.searchParams;
-  const key = params?.key && params.key;
 
-  return (
-    <section className="containerSection">
-      <h2 className="title"> REPORTES </h2>
-
-      <Toggle
-        defaultView={key}
-        options={[
-          {
-            key: "Por recibo",
-            label: "Por recibo",
-            content: (
-              <>
-                <SearchDateBetween />
-                <PorServicios />
-              </>
-            ),
-          },
-
-          {
-            key: "Por Servicio",
-            label: "Por Servicio",
-            content: (
-              <>
-                <SearchDateBetween />
-                <PorRecibos />
-              </>
-            ),
-          },
-        ]}
-      />
-    </section>
-  );
+  return <ReportesClient defaultKey={params?.key} />;
 }
-//IO
diff --git a/app/Components/Reportes/porRecibo.tsx b/app/Components/Reportes/porRecibo.tsx
index 61dbd11..bb44118 100644
--- a/app/Components/Reportes/porRecibo.tsx
+++ b/app/Components/Reportes/porRecibo.tsx
@@ -1,27 +1,79 @@
-"use client";
-import { useState } from "react";
+'use client';
 
-interface reportes {
-  Servicio: "Plotter";
-  Total: "$1440.00";
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+interface Recibo {
+  id_recibo: number;
+  folio_recibo: string;
+  fecha_recibo: string;
+  fecha_registro: string;
+  monto: string;
+  user:{
+    nombre:string;
+  }
 }
 
-function PorRecibos() {
-  const [reportes, SetQuitarSanciones] = useState<reportes[]>([]);
+interface Props {
+  desde: string | null;
+  hasta: string | null;
+}
+
+function PorRecibos({ desde, hasta }: Props) {
+  const [recibos, setRecibos] = useState<Recibo[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!desde || !hasta) return;
+
+    const fetchRecibos = async () => {
+      setLoading(true);
+      try {
+        const res = await axios.post(
+          `${process.env.NEXT_PUBLIC_API_URL}/recibo/rango`,
+          { desde, hasta }
+        );
+
+        setRecibos(res.data);
+      } catch (error) {
+        console.error('Error al obtener recibos', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRecibos();
+  }, [desde, hasta]);
+
   return (
-    <div>
+    <div style={{overflow:"auto",height:"270px", scrollbarColor:"#2563eb white"}}>
+      {loading && <p>Cargando...</p>}
+
       <table>
         <thead>
           <tr>
-            <th>Servicio</th>
-            <th>Total</th>
+            <th>Folio</th>
+            <th>Monto</th>
+            <th>fecha recibo</th>
+            <th>fecha registro</th>
+            <th>Usuario</th>
           </tr>
         </thead>
+
         <tbody>
-          {reportes.map((reporte, index) => (
-            <tr key={index}>
-              <td>{reporte.Servicio}</td>
-              <td>{reporte.Total}</td>
+          {!loading && recibos.length === 0 && (
+            <tr>
+              <td colSpan={2}>No hay recibos en este rango</td>
+            </tr>
+          )}
+
+          {recibos.map((recibo) => (
+            <tr key={recibo.id_recibo}>
+              <td>{recibo.folio_recibo}</td>
+              <td>${Number(recibo.monto).toFixed(2)}</td>
+              <td>{recibo.fecha_recibo}</td>
+              <td>{recibo.fecha_registro}</td>
+              <td>{recibo.user.nombre}</td>
             </tr>
           ))}
         </tbody>
diff --git a/app/Components/SearchDateBetween/SearchDateBetween.tsx b/app/Components/SearchDateBetween/SearchDateBetween.tsx
index 38102bb..3ccbba4 100644
--- a/app/Components/SearchDateBetween/SearchDateBetween.tsx
+++ b/app/Components/SearchDateBetween/SearchDateBetween.tsx
@@ -1,51 +1,46 @@
-"use client";
+'use client';
 
-import { useState } from "react";
+import { useState } from 'react';
 
-function SearchDateBetween() {
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
+interface Props {
+  onSearch: (desde: string, hasta: string) => void;
+}
+
+function SearchDateBetween({ onSearch }: Props) {
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    console.log("Fecha inicio:", startDate);
-    console.log("Fecha fin:", endDate);
-    // Aquí puedes hacer la lógica para buscar entre fechas
+    if (!startDate || !endDate) return;
+    onSearch(startDate, endDate);
   };
 
   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>
-    </>
+    <form className="containerForm" onSubmit={handleSubmit}>
+      <label className="label">Desde</label>
+      <div className="groupInput">
+        <input
+          type="date"
+          value={startDate}
+          onChange={(e) => setStartDate(e.target.value)}
+        />
+      </div>
+
+      <label className="label">Hasta</label>
+      <div className="groupInput">
+        <input
+          type="date"
+          value={endDate}
+          onChange={(e) => setEndDate(e.target.value)}
+        />
+      </div>
+
+      <button className="button buttonSearch" type="submit" style={{marginBottom:"10px"}}>
+        Buscar
+      </button>
+    </form>
   );
 }
 
 export default SearchDateBetween;
-
-// By Tyrannuss
diff --git a/app/globals.css b/app/globals.css
index 6305e22..1626223 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -101,6 +101,7 @@ footer p {
 .containerForm {
   width: 100%;
   max-width: 450px;
+  gap:10px;
 }
 
 .img {
@@ -390,6 +391,7 @@ table th {
   position: sticky;
   top: 0;
   color: #ffffff;
+  background-color: #2563eb;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1px;