diff --git a/memberflow-api/src/main/java/com/denniseckerskorn/dtos/finance_management_dtos/InvoiceDTO.java b/memberflow-api/src/main/java/com/denniseckerskorn/dtos/finance_management_dtos/InvoiceDTO.java
index 0edf1bb..b3410ef 100644
--- a/memberflow-api/src/main/java/com/denniseckerskorn/dtos/finance_management_dtos/InvoiceDTO.java
+++ b/memberflow-api/src/main/java/com/denniseckerskorn/dtos/finance_management_dtos/InvoiceDTO.java
@@ -1,5 +1,6 @@
 package com.denniseckerskorn.dtos.finance_management_dtos;
 
+import com.denniseckerskorn.dtos.user_managment_dtos.UserDTO;
 import com.denniseckerskorn.entities.finance.Invoice;
 import com.denniseckerskorn.enums.StatusValues;
 import jakarta.validation.constraints.NotNull;
@@ -16,6 +17,9 @@ public class InvoiceDTO {
     @NotNull
     private Integer userId;
 
+    private UserDTO user;
+
+
     @NotNull
     private LocalDateTime date;
 
@@ -35,6 +39,7 @@ public class InvoiceDTO {
     public InvoiceDTO(Invoice invoice) {
         this.id = invoice.getId();
         this.userId = invoice.getUser() != null ? invoice.getUser().getId() : null;
+        this.user = invoice.getUser() != null ? new UserDTO(invoice.getUser()) : null;
         this.date = invoice.getDate();
         this.total = invoice.getTotal();
         this.status = invoice.getStatus();
@@ -77,6 +82,14 @@ public class InvoiceDTO {
         this.userId = userId;
     }
 
+    public UserDTO getUser() {
+        return user;
+    }
+
+    public void setUser(UserDTO user) {
+        this.user = user;
+    }
+
     public LocalDateTime getDate() {
         return date;
     }
diff --git a/memberflow-api/src/main/java/com/denniseckerskorn/dtos/user_managment_dtos/UserDTO.java b/memberflow-api/src/main/java/com/denniseckerskorn/dtos/user_managment_dtos/UserDTO.java
index f58c83c..0e7473d 100644
--- a/memberflow-api/src/main/java/com/denniseckerskorn/dtos/user_managment_dtos/UserDTO.java
+++ b/memberflow-api/src/main/java/com/denniseckerskorn/dtos/user_managment_dtos/UserDTO.java
@@ -42,6 +42,19 @@ public class UserDTO {
         this.status = status;
     }
 
+    public UserDTO(User user) {
+        this.id = user.getId();
+        this.name = user.getName();
+        this.surname = user.getSurname();
+        this.email = user.getEmail();
+        this.phoneNumber = user.getPhoneNumber();
+        this.address = user.getAddress();
+        this.registerDate = user.getRegisterDate();
+        this.roleName = user.getRole() != null ? user.getRole().getName() : null;
+        this.status = user.getStatus();
+    }
+
+
     // Getters y Setters
     public Integer getId() {
         return id;
diff --git a/memberflow-frontend/src/components/layout/MainLayout.jsx b/memberflow-frontend/src/components/layout/MainLayout.jsx
index 04aaf23..feda04b 100644
--- a/memberflow-frontend/src/components/layout/MainLayout.jsx
+++ b/memberflow-frontend/src/components/layout/MainLayout.jsx
@@ -23,6 +23,7 @@ import ViewTimetable from '../forms/ViewTimetable';
 import MembershipForm from '../forms/MembershipCreateForm';
 import MembershipList from '../lists/MembershipList';
 import InvoiceForm from '../forms/InvoiceForm';
+import InvoiceList from '../lists/InvoiceList';
 import '../styles/MainLayout.css';
 
 
@@ -66,9 +67,8 @@ const MainLayout = () => {
             <Route path="/admin/class-management/memberships/create" element={<MembershipForm />} />
             <Route path="/admin/class-management/memberships/list" element={<MembershipList />} />
 
-
-         
             <Route path="/admin/finance/invoices/create" element={<InvoiceForm />} />
+            <Route path="/admin/finance/invoices/list" element={<InvoiceList />} />
 
             {/* Profile Page*/}
             <Route path="/profile" element={<ProfilePage />} />
diff --git a/memberflow-frontend/src/components/lists/InvoiceList.jsx b/memberflow-frontend/src/components/lists/InvoiceList.jsx
new file mode 100644
index 0000000..d8a1bf1
--- /dev/null
+++ b/memberflow-frontend/src/components/lists/InvoiceList.jsx
@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from "react";
+import api from "../../api/axiosConfig";
+import ErrorMessage from "../common/ErrorMessage";
+import "../styles/ContentArea.css";
+
+const InvoiceList = () => {
+  const [invoices, setInvoices] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [errorMsg, setErrorMsg] = useState("");
+  const [successMsg, setSuccessMsg] = useState("");
+
+  useEffect(() => {
+    fetchInvoices();
+  }, []);
+
+  const fetchInvoices = async () => {
+    try {
+      const res = await api.get("/invoices/getAll");
+      setInvoices(res.data);
+      setErrorMsg("");
+    } catch (err) {
+      console.error(err);
+      setErrorMsg("❌ Error al cargar las facturas.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm("¿Estás seguro de que deseas eliminar esta factura?")) return;
+
+    try {
+      await api.delete(`/invoices/deleteById/${id}`);
+      setInvoices(invoices.filter((inv) => inv.id !== id));
+      setSuccessMsg("✅ Factura eliminada correctamente.");
+      setErrorMsg("");
+    } catch (err) {
+      console.error(err);
+      setErrorMsg("❌ Error al eliminar la factura.");
+      setSuccessMsg("");
+    }
+  };
+
+  const downloadPdf = async (id) => {
+    try {
+      const res = await api.get(`/invoices/generatePDFById/${id}`, {
+        responseType: "blob",
+      });
+
+      const blob = new Blob([res.data], { type: "application/pdf" });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `factura_${id}.pdf`;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error(err);
+      setErrorMsg("❌ Error al descargar el PDF.");
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="card">
+        <p>Cargando facturas...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="card">
+      <h2>Listado de Facturas</h2>
+      <ErrorMessage message={errorMsg} type="error" />
+      <ErrorMessage message={successMsg} type="success" />
+
+      <div className="table-wrapper">
+        <table className="styled-table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Cliente</th>
+              <th>Email</th>
+              <th>Fecha</th>
+              <th>Estado</th>
+              <th>Total (€)</th>
+              <th>Acciones</th>
+            </tr>
+          </thead>
+          <tbody>
+            {invoices.map((inv) => (
+              <tr key={inv.id}>
+                <td>{inv.id}</td>
+                <td>{inv.user?.name} {inv.user?.surname}</td>
+                <td>{inv.user?.email}</td>
+                <td>{new Date(inv.date).toLocaleString()}</td>
+                <td>{inv.status}</td>
+                <td>{inv.total?.toFixed(2)}</td>
+                <td>
+                  <button className="edit-btn" onClick={() => downloadPdf(inv.id)}>📄 PDF</button>
+                  <button className="delete-btn" onClick={() => handleDelete(inv.id)}>🗑️</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default InvoiceList;