diff --git a/src/App.tsx b/src/App.tsx
index 0d67d57..8c7962a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,12 +11,15 @@ import React from "react";
 import PrivacyPolicy from "@/pages/PrivacyPolicy.tsx";
 import Footer from "@/components/Footer.tsx";
 import SpeakerInfo from "@/components/SpeakerInfo.tsx";
-import {AppProvider} from "@/context/AppContext.tsx";
+import {AppProvider, useAppContext} from "@/context/AppContext.tsx";
 import TicketsPage from "@/pages/TicketsPage.tsx";
 import CodeOfConductSpeakers from "@/pages/CodeOfConductSpeakers.tsx";
 import Agenda from "@/pages/Agenda.tsx";
 import MediaKit from "@/pages/MediaKit.tsx";
 import SessionPage from "@/pages/SessionPage.tsx";
+import {AppStatus} from "@/types/types.ts";
+import Loading from "@/pages/Loading.tsx";
+import ErrorPage from "@/pages/ErrorPage.tsx";
 
 const queryClient = new QueryClient();
 
diff --git a/src/components/Photo.tsx b/src/components/Photo.tsx
index fdb1ceb..42c0786 100644
--- a/src/components/Photo.tsx
+++ b/src/components/Photo.tsx
@@ -1,5 +1,5 @@
 import {ZoomIn} from "lucide-react";
-import React from "react";
+import React, {useState} from "react";
 import {IImage} from "@/types/types.ts";
 
 export interface PhotoProps {
@@ -9,6 +9,8 @@ export interface PhotoProps {
 }
 
 const Photo: React.FC<PhotoProps> = ({image, setSelectedImage, index}) => {
+    const [loaded, setLoaded] = useState(false);
+
     const openLightbox = (index: number) => {
         setSelectedImage(index);
         document.body.style.overflow = 'hidden';
@@ -27,7 +29,8 @@ const Photo: React.FC<PhotoProps> = ({image, setSelectedImage, index}) => {
                   alt={image.alt}
                   decoding="async"
                   loading="lazy"
-                  className="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110 hover-scale"
+                  className={`w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110 hover-scale ${loaded ? "blur-0" : "blur-xl bg-gray-200"}`}
+                  onLoad={() => setLoaded(true)}
               />
               {/* Overlay */}
               <div className="absolute inset-0 bg-black/20  lg:group-hover:bg-black/60 flex justify-between align-middle via-transparent to-transparent opacity-100 lg:opacity-0 group-hover:opacity-100 transition-opacity duration-300">
diff --git a/src/components/Speaker.tsx b/src/components/Speaker.tsx
index cc5d511..c762bd8 100644
--- a/src/components/Speaker.tsx
+++ b/src/components/Speaker.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import {ISpeaker} from "@/types/speakers.ts";
 import {Card} from "@/components/ui/card.tsx";
 import SocialMedia from "@/components/SocialMedia.tsx";
@@ -10,6 +10,7 @@ interface SpeakerProps {
 
 const Speaker: React.FC<SpeakerProps> = ({speaker}) => {
     const navigate = useNavigate();
+    const [loaded, setLoaded] = useState(false);
 
     const handleClick = (speaker: ISpeaker) => {
         navigate(`/speaker/${speaker.id}`, {state: {speaker}});
@@ -17,7 +18,12 @@ const Speaker: React.FC<SpeakerProps> = ({speaker}) => {
 
     return (
         <article className="h-full w-full mx-1 flex flex-col justify-center items-center">
-                <img src={speaker.profilePicture} alt={speaker.fullName} className="h-60 w-60 rounded-3xl" loading="lazy"/>
+            <img
+                src={speaker.profilePicture}
+                alt={speaker.fullName}
+                className={`h-60 w-60 rounded-3xl transition-all duration-500 ${loaded ? "blur-0" : "blur-xl bg-gray-200"}`}
+                onLoad={() => setLoaded(true)}
+            />
                 <Card className="bg-white/10 border-0 shadow-none text-white flex flex-col justify-start gap-4 h-52 p-6 w-full max-w-[400px]">
                     <p className="text-2xl font-bold">{`${speaker.firstName.split(" ")[0]} ${speaker.lastName.split(" ")[0]}`}</p>
                     <p className="my-2 text-xl break-words line-clamp-2 overflow-hidden flex-shrink-0 rounded">{speaker.tagLine}</p>
diff --git a/src/components/agenda/AgendaContent.tsx b/src/components/agenda/AgendaContent.tsx
index 696e05b..ce4cc26 100644
--- a/src/components/agenda/AgendaContent.tsx
+++ b/src/components/agenda/AgendaContent.tsx
@@ -18,7 +18,7 @@ const AgendaContent = () => {
     if (agenda.length === 0) return (<></>)
 
     if (!displayAll && savedSessions.size === 0) {
-        return (<Card className="w-full pb-8 md:px-6 relative shadow-gray-500 min-h-60">
+        return (<Card className="w-full pb-8 md:px-6 shadow-gray-500 min-h-60">
             <nav className="flex gap-4 pt-8 pb-2 sticky bg-white w-full h-20">
                 <Badge variant={`${displayAll ? "default" : "ghost"}`} onClick={() => setDisplayAll(true)} role="button">Mostrar todos</Badge>
                 <Badge variant={`${displayAll ? "ghost" : "default"}`} onClick={() => setDisplayAll(false)} role="button">Mostrar guardados</Badge>
@@ -28,14 +28,16 @@ const AgendaContent = () => {
     }
 
   return (
-      <Card className="w-full pb-8 md:px-6 relative shadow-gray-500">
-          <nav className="flex gap-4 mt-4 py-2 px-4 sticky top-[80px] z-20 bg-white w-full h-14">
+      <Card className="w-full pb-8 shadow-gray-500">
+          <nav className="flex gap-4 mt-4 py-2 px-4 sticky top-[80px] z-20 bg-white w-full h-14 border-b border-gray-200">
               <Badge variant={`${displayAll ? "default" : "ghost"}`} onClick={() => setDisplayAll(true)} role="button">Mostrar todos</Badge>
               <Badge variant={`${displayAll ? "ghost" : "default"}`} onClick={() => setDisplayAll(false)} role="button">Mostrar guardados</Badge>
           </nav>
+          <aside className="flex flex-col md:px-6">
               {agenda.map(({slotStart, rooms}) => (
                   <AgendaRow key={slotStart} slotStart={slotStart} rooms={rooms}/>
               ))}
+          </aside>
       </Card>
   )
 }
diff --git a/src/components/agenda/AgendaHeader.tsx b/src/components/agenda/AgendaHeader.tsx
index 26a1958..a40083e 100644
--- a/src/components/agenda/AgendaHeader.tsx
+++ b/src/components/agenda/AgendaHeader.tsx
@@ -11,7 +11,7 @@ const AgendaHeader = () => {
               <div className="w-20 h-1 bg-gradient-to-r from-posadev-darkPink to-posadev-brightPink mx-auto rounded-full"/>
           </header>
           <aside className="flex flex-col gap-4 w-full lg:w-3/4">
-              <Card className="p-4 flex flex-col gap-4 border-none bg-transparent shadow-none">
+              <Card className="px-4 md:p-4 flex flex-col gap-4 border-none bg-transparent shadow-none">
                   <p className="text-primary-800 font-bold">En este evento te invitamos a:</p>
                   <ul className="w-full list-none grid gap-x-6 gap-y-2 grid-cols-2">
                       <Markup id="li-charlas" text="Asistir a las charlas" />
@@ -26,7 +26,7 @@ const AgendaHeader = () => {
                       <Markup id="li-diversion" text="Pásartela increible !!!" />
                   </ul>
               </Card>
-              <div className="flex md:flex-row flex-col gap-10 justify-center items-center md:items-baseline text-primary-500 mt-[72px]">
+              <div className="flex md:flex-row flex-col gap-10  justify-center items-baseline text-primary-500 mt-[72px] px-4 md:px-0">
                   <AgendaItem time={['9:00 AM - 3:00 PM']} title={'Registro'} icon={IdCardLanyard } />
                   <AgendaItem time={['9:30am - 11:00am']} title={'Coffee break'} icon={Coffee} />
                   <AgendaItem time={['10:15 AM - 2:00 PM','3:55 PM - 7:00 PM']} title={'Charlas'} icon={Megaphone} />
diff --git a/src/components/agenda/AgendaItem.tsx b/src/components/agenda/AgendaItem.tsx
index ea4ba07..f1dd8d4 100644
--- a/src/components/agenda/AgendaItem.tsx
+++ b/src/components/agenda/AgendaItem.tsx
@@ -15,20 +15,22 @@ const AgendaItem: React.FC<AgendaItemProps> = ({ icon: Icon, title, time }) => {
     const isSingleTime = time.length === 1;
 
     return (
-      <aside className="flex flex-col items-center text-center gap-2 w-[180px] hover:scale-105 transition-transform">
-      <span className="h-14 w-14 border-2 border-primary-500 flex items-center justify-center">
+      <aside className="flex md:flex-col items-start md:items-center justify-center gap-4 md:gap-2 w-full md:w-[180px] hover:scale-105 transition-transform">
+      <span className="h-14 min-w-14 max-w-14 border-2 border-primary-500 flex items-center justify-center">
         {Icon && <Icon className="h-6 w-6 text-primary-500" />}
       </span>
-            <p className="font-medium text-primary-800">{title}</p>
-          {
-              time.map((timeString, index) => (
-                  <time key={`time-${index}`} className={`flex ${isSingleTime ? "flex-col" : "flex-row flex-wrap gap-2"} items-center text-primary-600 text-sm leading-tight`}>
-                      <span>{splitTime(timeString).start}</span>
-                      {splitTime(timeString).end && <span className="text-xs">-</span>}
-                      <span>{splitTime(timeString).end}</span>
-                  </time>
-              ))
-          }
+            <div className="flex flex-col md:gap-y-2 w-full items-start justify-start md:items-center text-center h-full">
+                <p className="font-medium text-primary-800">{title}</p>
+                {
+                    time.map((timeString, index) => (
+                        <time key={`time-${index}`} className={`flex ${isSingleTime ? "md:flex-col lg:flex-row lg:gap-2" : "md:flex-col lg:flex-row flex-wrap lg:gap-2"} text-primary-600 text-sm leading-tight`}>
+                            <span>{splitTime(timeString).start}</span>
+                            {splitTime(timeString).end && <span aria-label="a" className="text-xs">-</span>}
+                            <span>{splitTime(timeString).end}</span>
+                        </time>
+                    ))
+                }
+            </div>
         </aside>
     )
 }
diff --git a/src/components/agenda/AgendaRow.tsx b/src/components/agenda/AgendaRow.tsx
index 620dfae..b966c55 100644
--- a/src/components/agenda/AgendaRow.tsx
+++ b/src/components/agenda/AgendaRow.tsx
@@ -1,9 +1,7 @@
 import React, {useEffect, useState} from "react";
 import Rooms from "@/components/agenda/Rooms.tsx";
-import {useIsMobile} from "@/hooks/use-mobile.tsx";
 import {IRoomAgenda} from "@/types/agenda.ts";
 import {formatTime} from "@/lib/utils.ts";
-import {useAppContext} from "@/context/AppContext.tsx";
 import Adorno from "@/components/icons/Adorno.tsx";
 import {Card} from "@/components/ui/card.tsx";
 
@@ -13,13 +11,10 @@ interface AgendaRowProps {
 }
 
 const AgendaRow: React.FC<AgendaRowProps> = ({slotStart, rooms}) => {
-    const {displayAll} = useAppContext()
-    const isMobile = useIsMobile()
     const eventDate = "2025-12-06"
     const slotDateTime = new Date(`${eventDate}T${slotStart}`)
     const now = new Date()
     const endDateTime = new Date(rooms[0]?.session.endsAt)
-    const expandableLogic = (!displayAll && isMobile) || (!isMobile)
 
     const endTime = endDateTime.toLocaleTimeString(["en-US"], {hour: '2-digit', minute:'2-digit'})
     const hasPassed = now > endDateTime
@@ -50,14 +45,18 @@ const AgendaRow: React.FC<AgendaRowProps> = ({slotStart, rooms}) => {
               hasPassed ? "opacity-0 pointer-events-none" : "opacity-100"
           }`}
       >
-          <Card className="flex items-center gap-4 p-2 bg-alternative-700 border-alternative-700 sticky top-[136px] z-10">
+          <Card className="
+    flex items-center gap-4 p-2
+    bg-alternative-700 border-alternative-700
+    sticky top-[136px] z-10
+    md:static md:top-auto md:z-auto
+">
               <Adorno className="h-8 w-8" />
               <time className="font-bold text-2xl text-white">{formatTime(slotStart)}</time>
               <span aria-label="a" className="font-bold text-2xl text-gray-500">-</span>
               <time className="font-bold text-2xl text-white">{endTime}</time>
-              <h2 className="font-bold text-2xl text-gray-700"></h2>
           </Card>
-          <Rooms rooms={rooms} slotStart={slotStart} endsAt={endTime} hide={false} />
+          <Rooms rooms={rooms} />
       </section>
   )
 }
diff --git a/src/components/agenda/CardCharla.tsx b/src/components/agenda/CardCharla.tsx
index 82a0c73..b996be7 100644
--- a/src/components/agenda/CardCharla.tsx
+++ b/src/components/agenda/CardCharla.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { IRoomAgenda } from "@/types/agenda.ts";
-import { Link } from "react-router-dom";
 import { useAppContext } from "@/context/AppContext.tsx";
 import {ISession} from "@/types/speakers.ts";
 import {Star} from "lucide-react";
+import {Button} from "@/components/ui/button.tsx";
+import {useNavigate} from "react-router-dom";
 
 interface CardEventProps {
     room: IRoomAgenda;
@@ -12,6 +13,7 @@ interface CardEventProps {
 const CardEvent: React.FC<CardEventProps> = ({ room }) => {
     const { savedSessions, setSavedSessions, displayAll } = useAppContext();
     const session = room.session;
+    const navigate = useNavigate();
     const [isSaved, setIsSaved] = useState(false);
 
     useEffect(() => {
@@ -21,11 +23,12 @@ const CardEvent: React.FC<CardEventProps> = ({ room }) => {
 
     const handleSaveSession = (session: ISession) => {
         // @ts-ignore
-        setSavedSessions(prev  => {
-            const newSet = new Set(prev);
+        setSavedSessions((prev: Set<number>) => {
+            const newSet: Set<number> = new Set(prev);
             if (newSet.has(session.id)) {
                 newSet.delete(session.id);
                 setIsSaved(false);
+                if (navigator.vibrate) navigator.vibrate(25);
             } else {
                 newSet.add(session.id);
                 setIsSaved(true);
@@ -36,30 +39,46 @@ const CardEvent: React.FC<CardEventProps> = ({ room }) => {
 
     if (!displayAll && !savedSessions.has(session.id)) return null;
     return (
-        <div id={`session-${session.id}`} className="flex flex-col gap-4 mt-6 w-full">
-            <h3 className="font-bold text-2xl">Sala: {room.name}</h3>
-            <WrappedCardEvent className={`${isSaved ? "bg-primary-700" : "bg-white"} relative flex flex-col gap-2 border-2 border-primary-600 rounded-lg w-full min-h-52 h-full shadow-sm shadow-gray-600 p-4`}
-                session={session}
+        <div id={`session-${session.id}`} className="flex flex-col gap-4 mt-6">
+            <h3 className={`font-bold text-2xl`}>Sala: {room.name}</h3>
+            <WrappedCardEvent className={`relative
+            bg-white shadow-sm shadow-gray-600 border-2 border-primary-600
+    flex flex-col gap-2 rounded-lg min-h-52 h-full p-4
+    transition-all duration-300
+  `}
+                              session={session}
             >
-                <h4 className={` text-2xl font-bold ${isSaved ? "text-white" : "text-alternative-600"}`}>
+                <aside className="flex w-full items-center">
+                    {isSaved && (
+                        <span className="bg-primary-500 text-white text-xs font-bold px-2 py-1 rounded-full shadow w-20 text-center justify-self-start">Guardado</span>
+                    )}
+                    <div className="flex-1" />
+                    <button
+                        type="button"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            handleSaveSession(session);
+                        }}
+                        className={`bg-white justify-self-end group flex justify-center items-center gap-2 border border-primary-500 font-bold px-2 py-1 rounded-lg transition-colors duration-300`}
+                    >
+                        <Star className={`h-4 w-4 text-primary-500 ${isSaved ? "fill-primary-500" : "fill-white group-hover:fill-primary-500"}`}/>
+                    </button>
+                </aside>
+
+                <h4 className={` text-2xl font-bold text-alternative-600 ${isSaved ? "" : ""}`}>
                     {session.title}
                 </h4>
-                <aside className="h-full" hidden={session.speakers.length == 0}>
+                <div className="h-full" hidden={session.speakers.length == 0}>
                     {session.speakers.map((speaker) => (
-                        <p key={speaker.id} className={`${isSaved ? "text-gray-300" : "text-gray-500"} font-bold  text-2xl`}>{speaker.name}</p>
+                        <p key={speaker.id} className={`${isSaved ? "text-gray-600" : "text-gray-500"} font-bold  text-2xl`}>{speaker.name}</p>
                     ))}
-                </aside>
-                <p hidden={session.speakers.length > 0} className={`h-full ${isSaved ? "text-gray-300" : "text-gray-500"} font-bold  text-2xl`}>{session.description}</p>
-                <button
-                    type="button"
-                    onClick={(e) => {
-                        e.preventDefault();
-                        handleSaveSession(session);
-                    }}
-                    className="self-end"
-                >
-                    <Star className={`h-8 w-8  ${isSaved ? " fill-white text-primary-700 hover:text-white hover:fill-primary-600" : "text-primary-600 hover:fill-primary-600"} transition-colors duration-300`} />
-                </button>
+                </div>
+                <p hidden={session.speakers.length > 0} className={`h-full ${isSaved ? "text-gray-600" : "text-gray-500"} font-bold  text-2xl`}>{session.description}</p>
+                { session.speakers.length > 0 && (
+                    <Button variant="ghost" onClick={() => navigate(`/session/${session.id}`)}>
+                        Ver detalles
+                    </Button>
+                )}
             </WrappedCardEvent>
         </div>
     );
@@ -73,11 +92,10 @@ interface WrappedCardEventProps {
 
 const WrappedCardEvent: React.FC<WrappedCardEventProps> = ({session, children, className}) => {
     if (session.speakers.length === 0) return (<div className={className}>{children}</div>)
-    return <Link
-        to={`/session/${session.id}`}
+    return <div
         className={className}
     >{children}
-    </Link>
+    </div>
 }
 
 export default CardEvent;
diff --git a/src/components/agenda/Rooms.tsx b/src/components/agenda/Rooms.tsx
index 540740a..aab3c39 100644
--- a/src/components/agenda/Rooms.tsx
+++ b/src/components/agenda/Rooms.tsx
@@ -1,16 +1,13 @@
 import React from "react";
 import CardCharla from "@/components/agenda/CardCharla.tsx";
 
-const Rooms = ({rooms, slotStart, hide, endsAt}) => {
-    if (hide) return null;
+const Rooms = ({rooms}) => {
   return (
-      <>
-          <div className="flex flex-col flex-wrap flex-grow  md:flex-row gap-6 px-10 w-full">
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6 px-4 w-full">
               {rooms.map((room) => {
                     return <CardCharla key={room.id} room={room} />
               })}
           </div>
-      </>
   )
 }
 export default Rooms
\ No newline at end of file
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 7e854f8..f54e9a6 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -16,7 +16,7 @@ const buttonVariants = cva(
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        ghost: "bg-white border text-primary-600 hover:border-primary-500",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
index b06acff..f44ad7b 100644
--- a/src/context/AppContext.tsx
+++ b/src/context/AppContext.tsx
@@ -2,10 +2,10 @@ import { createContext, useContext, useState, useEffect } from "react";
 import {ISession, ISpeaker} from "@/types/speakers.ts";
 import {getAll} from "@/https/fetch.ts";
 import {AppStatus} from "@/types/types.ts";
-import Loading from "@/pages/Loading.tsx";
 import {addSessionSpeakers} from "@/lib/utils.ts";
-import ErrorPage from "@/pages/ErrorPage.tsx";
 import {ITimeSlot} from "@/types/agenda.ts";
+import ErrorPage from "@/pages/ErrorPage.tsx";
+import Loading from "@/pages/Loading.tsx";
 
 
 interface AppContextType {
@@ -30,27 +30,28 @@ export const AppProvider = ({ children }) => {
     const [sessions, setSessions] = useState<ISession[]>([]);
     const [savedSessions, setSavedSessions] = useState<Set<number>>(() => {
         const raw = localStorage.getItem("savedSessions");
-        return raw ? new Set(JSON.parse(raw)) : new Set();
+        return raw ? new Set<number>(JSON.parse(raw)) : new Set<number>();
     });
 
-    useEffect(() => {
-        localStorage.setItem("savedSessions", JSON.stringify([...savedSessions]));
-    }, [savedSessions]);
-
-
     useEffect(() => {
         localStorage.setItem("savedSessions", JSON.stringify([...savedSessions]));
     }, [savedSessions]);
 
     useEffect(() => {
-        getAll().then((data) => {
-            const getSpeakersWithSessions = addSessionSpeakers(data.sessions, data.speakers, data.categories[0].items);
-            setSpeakers(getSpeakersWithSessions);
-            setSessions(data.sessions)
-            setAppStatus(AppStatus.Success)
-        }).catch(() => {
-            setAppStatus(AppStatus.Error)
-        });
+        getAll()
+            .then((data) => {
+                const getSpeakersWithSessions = addSessionSpeakers(
+                    data.sessions,
+                    data.speakers,
+                    data.categories[0].items
+                );
+                setSpeakers(getSpeakersWithSessions);
+                setSessions(data.sessions);
+                setAppStatus(AppStatus.Success);
+            })
+            .catch(() => {
+                setAppStatus(AppStatus.Error);
+            });
     }, []);
 
     const value = {
@@ -62,26 +63,25 @@ export const AppProvider = ({ children }) => {
         setAgenda,
         speakers,
         agenda,
-        appStatus
+        appStatus,
     };
 
-    if (appStatus === AppStatus.Loading) {
-        return (
-            <div className="flex items-center justify-center min-h-screen">
-                <Loading size={60} count={5} />
-            </div>
-        );
-    }
+    return (
+        <AppContext.Provider value={value}>
+            {appStatus === AppStatus.Loading && (
+                <div className="flex items-center justify-center min-h-screen">
+                    <Loading size={60} count={5} />
+                </div>
+            )}
 
-    if (appStatus === AppStatus.Error) {
-        return (
-            <ErrorPage />
-        );
-    }
+            {appStatus === AppStatus.Error && <ErrorPage />}
 
-    return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+            {appStatus === AppStatus.Success && children}
+        </AppContext.Provider>
+    );
 };
 
+
 export const useAppContext = (): AppContextType => {
     const context = useContext(AppContext);
     if (!context) {
diff --git a/src/pages/Agenda.tsx b/src/pages/Agenda.tsx
index 81d7076..e595732 100644
--- a/src/pages/Agenda.tsx
+++ b/src/pages/Agenda.tsx
@@ -1,15 +1,16 @@
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 import {scrollToTop} from "@/lib/utils.ts";
+import {useLocation} from "react-router-dom";
 import AgendaHeader from "@/components/agenda/AgendaHeader.tsx";
 import AgendaContent from "@/components/agenda/AgendaContent.tsx";
-import {useLocation} from "react-router-dom";
 
 const Agenda = () => {
     const location = useLocation();
     const sessionId = location.state?.sessionId;
+    const [showScrollTop, setShowScrollTop] = useState(false);
 
     useEffect(() => {
-        scrollToTop()
+        scrollToTop();
     }, []);
 
     useEffect(() => {
@@ -17,7 +18,7 @@ const Agenda = () => {
             const element = document.getElementById(`session-${sessionId}`);
             if (element) {
                 setTimeout(() => {
-                    const headerOffset = 120; // ajusta según el alto de tu navbar
+                    const headerOffset = 120;
                     const elementPosition = element.getBoundingClientRect().top + window.scrollY;
                     const offsetPosition = elementPosition - headerOffset;
 
@@ -30,11 +31,40 @@ const Agenda = () => {
         }
     }, [sessionId]);
 
-  return (
-      <section className="flex flex-col justify-center items-center gap-8 py-20 md:px-20">
-          <AgendaHeader/>
-          <AgendaContent/>
-      </section>
-  )
+    useEffect(() => {
+        const handler = () => {
+            if (window.scrollY > 300) {
+                setShowScrollTop(true);
+            } else {
+                setShowScrollTop(false);
+            }
+        };
+
+        window.addEventListener("scroll", handler);
+        return () => window.removeEventListener("scroll", handler);
+    }, []);
+
+    const handleScrollTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth",
+        });
+    };
+
+    return (
+        <section className="flex flex-col justify-center items-center gap-8 py-20 md:px-10 lg:px-20 relative">
+            <AgendaHeader />
+            <AgendaContent />
+            {showScrollTop && (
+                <button
+                    onClick={handleScrollTop}
+                    className="fixed flex justify-center items-center h-14 font-bold w-10 bottom-6 right-4  border border-primary-600 p-2 rounded-full shadow-2xl text-white bg-primary-600 transition-all z-40"
+                >
+                    ↑
+                </button>
+            )}
+        </section>
+    );
 }
+
 export default Agenda;
\ No newline at end of file