diff --git a/apps/web/app/(dashboard)/cfdi/page.tsx b/apps/web/app/(dashboard)/cfdi/page.tsx
new file mode 100644
index 0000000..83803a1
--- /dev/null
+++ b/apps/web/app/(dashboard)/cfdi/page.tsx
@@ -0,0 +1,206 @@
+'use client';
+
+import { useState } from 'react';
+import { Header } from '@/components/layouts/header';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useCfdis } from '@/lib/hooks/use-cfdi';
+import type { CfdiFilters, TipoCfdi } from '@horux/shared';
+import { FileText, Search, ChevronLeft, ChevronRight } from 'lucide-react';
+
+export default function CfdiPage() {
+  const [filters, setFilters] = useState<CfdiFilters>({
+    page: 1,
+    limit: 20,
+  });
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const { data, isLoading } = useCfdis(filters);
+
+  const handleSearch = () => {
+    setFilters({ ...filters, search: searchTerm, page: 1 });
+  };
+
+  const handleFilterType = (tipo?: TipoCfdi) => {
+    setFilters({ ...filters, tipo, page: 1 });
+  };
+
+  const formatCurrency = (value: number) =>
+    new Intl.NumberFormat('es-MX', {
+      style: 'currency',
+      currency: 'MXN',
+    }).format(value);
+
+  const formatDate = (dateString: string) =>
+    new Date(dateString).toLocaleDateString('es-MX', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+    });
+
+  return (
+    <>
+      <Header title="Gestion de CFDI" />
+      <main className="p-6 space-y-6">
+        {/* Filters */}
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex flex-wrap gap-4">
+              <div className="flex gap-2 flex-1 min-w-[300px]">
+                <Input
+                  placeholder="Buscar por UUID, RFC o nombre..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                />
+                <Button onClick={handleSearch}>
+                  <Search className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant={filters.tipo === undefined ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => handleFilterType(undefined)}
+                >
+                  Todos
+                </Button>
+                <Button
+                  variant={filters.tipo === 'ingreso' ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => handleFilterType('ingreso')}
+                >
+                  Ingresos
+                </Button>
+                <Button
+                  variant={filters.tipo === 'egreso' ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => handleFilterType('egreso')}
+                >
+                  Egresos
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Table */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <FileText className="h-4 w-4" />
+              CFDIs ({data?.total || 0})
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {isLoading ? (
+              <div className="text-center py-8 text-muted-foreground">
+                Cargando...
+              </div>
+            ) : data?.data.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                No se encontraron CFDIs
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b text-left text-sm text-muted-foreground">
+                      <th className="pb-3 font-medium">Fecha</th>
+                      <th className="pb-3 font-medium">Tipo</th>
+                      <th className="pb-3 font-medium">Serie/Folio</th>
+                      <th className="pb-3 font-medium">Emisor/Receptor</th>
+                      <th className="pb-3 font-medium text-right">Total</th>
+                      <th className="pb-3 font-medium">Estado</th>
+                    </tr>
+                  </thead>
+                  <tbody className="text-sm">
+                    {data?.data.map((cfdi) => (
+                      <tr key={cfdi.id} className="border-b hover:bg-muted/50">
+                        <td className="py-3">{formatDate(cfdi.fechaEmision)}</td>
+                        <td className="py-3">
+                          <span
+                            className={`px-2 py-1 rounded-full text-xs font-medium ${
+                              cfdi.tipo === 'ingreso'
+                                ? 'bg-success/10 text-success'
+                                : 'bg-destructive/10 text-destructive'
+                            }`}
+                          >
+                            {cfdi.tipo === 'ingreso' ? 'Ingreso' : 'Egreso'}
+                          </span>
+                        </td>
+                        <td className="py-3">
+                          {cfdi.serie || '-'}-{cfdi.folio || '-'}
+                        </td>
+                        <td className="py-3">
+                          <div>
+                            <p className="font-medium">
+                              {cfdi.tipo === 'ingreso'
+                                ? cfdi.nombreReceptor
+                                : cfdi.nombreEmisor}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              {cfdi.tipo === 'ingreso'
+                                ? cfdi.rfcReceptor
+                                : cfdi.rfcEmisor}
+                            </p>
+                          </div>
+                        </td>
+                        <td className="py-3 text-right font-medium">
+                          {formatCurrency(cfdi.total)}
+                        </td>
+                        <td className="py-3">
+                          <span
+                            className={`px-2 py-1 rounded-full text-xs font-medium ${
+                              cfdi.estado === 'vigente'
+                                ? 'bg-success/10 text-success'
+                                : 'bg-muted text-muted-foreground'
+                            }`}
+                          >
+                            {cfdi.estado === 'vigente' ? 'Vigente' : 'Cancelado'}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {/* Pagination */}
+            {data && data.totalPages > 1 && (
+              <div className="flex items-center justify-between mt-4 pt-4 border-t">
+                <p className="text-sm text-muted-foreground">
+                  Pagina {data.page} de {data.totalPages}
+                </p>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={data.page <= 1}
+                    onClick={() =>
+                      setFilters({ ...filters, page: (filters.page || 1) - 1 })
+                    }
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={data.page >= data.totalPages}
+                    onClick={() =>
+                      setFilters({ ...filters, page: (filters.page || 1) + 1 })
+                    }
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </main>
+    </>
+  );
+}
diff --git a/apps/web/lib/api/cfdi.ts b/apps/web/lib/api/cfdi.ts
new file mode 100644
index 0000000..c520a57
--- /dev/null
+++ b/apps/web/lib/api/cfdi.ts
@@ -0,0 +1,32 @@
+import { apiClient } from './client';
+import type { CfdiListResponse, CfdiFilters, Cfdi } from '@horux/shared';
+
+export async function getCfdis(filters: CfdiFilters): Promise<CfdiListResponse> {
+  const params = new URLSearchParams();
+
+  if (filters.tipo) params.set('tipo', filters.tipo);
+  if (filters.estado) params.set('estado', filters.estado);
+  if (filters.fechaInicio) params.set('fechaInicio', filters.fechaInicio);
+  if (filters.fechaFin) params.set('fechaFin', filters.fechaFin);
+  if (filters.rfc) params.set('rfc', filters.rfc);
+  if (filters.search) params.set('search', filters.search);
+  if (filters.page) params.set('page', filters.page.toString());
+  if (filters.limit) params.set('limit', filters.limit.toString());
+
+  const response = await apiClient.get<CfdiListResponse>(`/cfdi?${params}`);
+  return response.data;
+}
+
+export async function getCfdiById(id: string): Promise<Cfdi> {
+  const response = await apiClient.get<Cfdi>(`/cfdi/${id}`);
+  return response.data;
+}
+
+export async function getResumenCfdi(año?: number, mes?: number) {
+  const params = new URLSearchParams();
+  if (año) params.set('año', año.toString());
+  if (mes) params.set('mes', mes.toString());
+
+  const response = await apiClient.get(`/cfdi/resumen?${params}`);
+  return response.data;
+}
diff --git a/apps/web/lib/hooks/use-cfdi.ts b/apps/web/lib/hooks/use-cfdi.ts
new file mode 100644
index 0000000..61f9ed8
--- /dev/null
+++ b/apps/web/lib/hooks/use-cfdi.ts
@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+import * as cfdiApi from '@/lib/api/cfdi';
+import type { CfdiFilters } from '@horux/shared';
+
+export function useCfdis(filters: CfdiFilters) {
+  return useQuery({
+    queryKey: ['cfdis', filters],
+    queryFn: () => cfdiApi.getCfdis(filters),
+  });
+}
+
+export function useCfdi(id: string) {
+  return useQuery({
+    queryKey: ['cfdi', id],
+    queryFn: () => cfdiApi.getCfdiById(id),
+    enabled: !!id,
+  });
+}
+
+export function useResumenCfdi(año?: number, mes?: number) {
+  return useQuery({
+    queryKey: ['cfdi-resumen', año, mes],
+    queryFn: () => cfdiApi.getResumenCfdi(año, mes),
+  });
+}