diff --git a/src/components/Campana.jsx b/src/components/Campana.jsx
index 4cb388f..ef9c1e1 100644
--- a/src/components/Campana.jsx
+++ b/src/components/Campana.jsx
@@ -1,13 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import '../pages/users/campana.css';
 
 const Campana = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [notificaciones, setNotificaciones] = useState([]);
 
   const toggleNotifications = () => {
     setIsOpen(!isOpen);
   };
 
+  useEffect(() => {
+    if (isOpen && notificaciones.length === 0) {
+      fetch('http://localhost:8000/onesignal/notificaciones/')
+        .then((response) => response.json())
+        .then((data) => setNotificaciones(data))
+        .catch((error) => console.error('Error fetching notifications:', error));
+    }
+  }, [isOpen]);
+
   return (
     <div className="campana-container">
       <div className="loader" onClick={toggleNotifications}>
@@ -35,9 +45,16 @@ const Campana = () => {
         <div className="notification-box">
           <h4>Notificaciones</h4>
           <ul>
-            <li>Notificación 1</li>
-            <li>Notificación 2</li>
-            <li>Notificación 3</li>
+            {notificaciones.length > 0 ? (
+              notificaciones.map((notificacion, index) => (
+                <li key={index}>
+                  <h5>{notificacion.title}</h5>
+                  <p>{notificacion.message}</p>
+                </li>
+              ))
+            ) : (
+              <li>No hay notificaciones disponibles</li>
+            )}
           </ul>
         </div>
       )}