diff --git a/src/App.tsx b/src/App.tsx
index b6b3cd4..0d67d57 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,7 +14,9 @@ import SpeakerInfo from "@/components/SpeakerInfo.tsx";
 import {AppProvider} 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";
 
 const queryClient = new QueryClient();
 
@@ -35,8 +37,11 @@ const App = () => {
                 <Route path="/codigo-de-conducta-speakers" element={<CodeOfConductSpeakers />}/>
                 <Route path="/privacy-policy" element={<PrivacyPolicy/>}/>
                 <Route path="/speaker/:speakerId" element={<SpeakerInfo/>}/>
+                  <Route path="/boletos" element={<TicketsPage />} />
+                  <Route path="/agenda" element={<Agenda/>} />
                 <Route path="/boletos" element={<TicketsPage />} />
                 <Route path="/media-kit" element={<MediaKit />} />
+                  <Route path="session/:sessionId" element={<SessionPage />} />
               </Routes>
             </main>
             <Footer />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 01c8fc1..d6f2fdb 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -57,16 +57,16 @@ const Header = () => {
                             <span>Se un Patrocinador</span>
                         </a>
                         <a
-                            onClick={() => navigate('/#organizadores')}
+                            onClick={() => navigate('/#speakers')}
                             className={cn("text-white hover:text-posadev-brightPink transition-colors duration-300 flex items-center space-x-1", isActive('/#comunidades') && "text-posadev-brightPink")}
                         >
-                            <span>Organizadores</span>
+                            <span>Speakers</span>
                         </a>
                         <a
-                            onClick={() => navigate('/#galeria')}
+                            onClick={() => navigate('/agenda')}
                             className={cn("text-white hover:text-posadev-brightPink transition-colors duration-300 flex items-center space-x-1", isActive('/#galeria') && "text-posadev-brightPink")}
                         >
-                            <span>Galería</span>
+                            <span>Agenda</span>
                         </a>
                         <a
                             onClick={() => {
@@ -92,17 +92,16 @@ const Header = () => {
                         className="md:hidden absolute top-16 left-0 right-0 bg-black/95 rounded-b-xl backdrop-blur-md border-b border-posadev-darkPink/20">
                         <nav className="flex flex-col gap-2 px-4 py-4 space-y-4">
                             <a
-                                onClick={() => navigateMenu('/#organizadores')}
+                                onClick={() => navigateMenu('/#speakers')}
                                 className={cn("w-full text-white hover:text-posadev-brightPink transition-colors duration-300 flex items-center px-4 py-1 space-x-2", isActive('/#comunidades') && "text-posadev-brightPink")}
                             >
-                                Organizadores
+                                Speakers
                             </a>
                             <a
-                                onClick={() => navigateMenu('/#galeria')}
+                                onClick={() => navigateMenu('/agenda')}
                                 className={cn("w-full flex items-center gap-2 text-white hover:text-posadev-brightPink transition-colors px-4 py-1 duration-300 space-x-2", isActive('/#galeria') && "text-posadev-brightPink")}
                             >
-                                <Image className="w-4 h-4" aria-hidden="true"/>
-                                Galería
+                                Agenda
                             </a>
                             <a
                                 onClick={() => navigateMenu('/#patrocinadores')}
diff --git a/src/components/agenda/AgendaContent.tsx b/src/components/agenda/AgendaContent.tsx
new file mode 100644
index 0000000..750886b
--- /dev/null
+++ b/src/components/agenda/AgendaContent.tsx
@@ -0,0 +1,42 @@
+import { Card } from "../ui/card"
+import {Badge} from "@/components/ui/badge.tsx";
+import {useEffect} from "react";
+import {getAgenda} from "@/https/fetch.ts";
+import {useAppContext} from "@/context/AppContext.tsx";
+import AgendaRow from "@/components/agenda/AgendaRow.tsx";
+
+const AgendaContent = () => {
+    const {setAgenda, agenda, savedSessions} = useAppContext()
+    const {setDisplayAll, displayAll} = useAppContext()
+
+    useEffect(() => {
+        getAgenda().then((data) => {
+            setAgenda(data[0].timeSlots)
+        })
+    }, []);
+
+    if (agenda.length === 0) return (<></>)
+
+    if (!displayAll && savedSessions.size === 0) {
+        return (<Card className="w-full pb-8 md:px-6 relative shadow-gray-500">
+            <nav className="flex gap-4 pt-8 pb-2 sticky bg-white w-full">
+                <Badge variant={`${displayAll ? "default" : "ghost"}`} onClick={() => setDisplayAll(true)} role="button">Display All</Badge>
+                <Badge variant={`${displayAll ? "ghost" : "default"}`} onClick={() => setDisplayAll(false)} role="button">Display Saved</Badge>
+            </nav>
+            <h2 className="text-center text-alternative-700 text-2xl font-bold">Por favor guarda alguna sesion para verla aqui</h2>
+        </Card>)
+    }
+
+  return (
+      <Card className="w-full pb-8 md:px-6 relative shadow-gray-500">
+          <nav className="flex gap-4 pt-8 pb-2 sticky bg-white w-full">
+              <Badge variant={`${displayAll ? "default" : "ghost"}`} onClick={() => setDisplayAll(true)} role="button">Display All</Badge>
+              <Badge variant={`${displayAll ? "ghost" : "default"}`} onClick={() => setDisplayAll(false)} role="button">Display Saved</Badge>
+          </nav>
+          {agenda.map(({slotStart, rooms}) => (
+              <AgendaRow key={slotStart} slotStart={slotStart} rooms={rooms}/>
+          ))}
+      </Card>
+  )
+}
+export default AgendaContent
\ No newline at end of file
diff --git a/src/components/agenda/AgendaHeader.tsx b/src/components/agenda/AgendaHeader.tsx
new file mode 100644
index 0000000..6c30a2b
--- /dev/null
+++ b/src/components/agenda/AgendaHeader.tsx
@@ -0,0 +1,41 @@
+import {Card} from "@/components/ui/card.tsx";
+import AgendaItem from "@/components/agenda/AgendaItem.tsx";
+import {Beer, CandyCane, Megaphone, Coffee, HandPlatter, IdCardLanyard} from "lucide-react";
+import Markup from "@/components/ui/Markup.tsx";
+
+const AgendaHeader = () => {
+  return (
+      <>
+          <header className="flex justify-center flex-col gap-4 items-center w-full">
+              <h1 className="text-alternative-700 text-3xl md:text-5xl font-bold">Agenda</h1>
+              <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">
+                  <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" />
+                      <Markup id="li-empresas" text="Conocer a las empresas" />
+                      <Markup id="li-actividades" text="Participar en las actividades" />
+                      <Markup id="li-rifas" text="Participar en las rifas" />
+                      <Markup id="li-feedback" text="Déjarnos feedback" />
+                      <Markup id="li-networking" text="Hacer networking" />
+                      <Markup id="li-comunidad" text="Visitar la sala comunidad (con actividades y small talks)" />
+                      <Markup id="li-conducta" text="Respetar el código de conducta" />
+                      <Markup id="li-fotos" text="Subir fotos a las redes y tagearnos" />
+                      <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]">
+                  <AgendaItem time={'10:00 AM'} title={'Registro'} icon={IdCardLanyard } />
+                  <AgendaItem time={'9:30am - 11:00am'} title={'Coffee break'} icon={Coffee} />
+                  <AgendaItem time={'11:00 AM - 2:00 PM y 3:00 PM - 7:00 PM'} title={'Charlas'} icon={Megaphone} />
+                  <AgendaItem time={'2:00 PM - 3:00 PM'} title={'Comida'} icon={HandPlatter} />
+                  <AgendaItem time={'3:00 PM - 5:00 PM'} title={'Networking'} icon={CandyCane} />
+                  <AgendaItem time={'7:00 PM - 9:00 PM'} title={'Clausura'} icon={Beer} />
+              </div>
+          </aside>
+      </>
+  )
+}
+export default AgendaHeader
\ No newline at end of file
diff --git a/src/components/agenda/AgendaItem.tsx b/src/components/agenda/AgendaItem.tsx
new file mode 100644
index 0000000..08ef1da
--- /dev/null
+++ b/src/components/agenda/AgendaItem.tsx
@@ -0,0 +1,19 @@
+const AgendaItem = ({ icon: Icon, title, time }) => {
+    const [start, end] = time.split(" - ");
+
+    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">
+        {Icon && <Icon className="h-6 w-6 text-primary-500" />}
+      </span>
+            <p className="font-medium text-primary-800">{title}</p>
+          <time className="flex flex-col items-center text-primary-600 text-sm leading-tight">
+              <span>{start}</span>
+              {end && <span className="text-xs">-</span>}
+              <span>{end}</span>
+          </time>
+        </aside>
+    )
+}
+
+export default AgendaItem
\ No newline at end of file
diff --git a/src/components/agenda/AgendaRow.tsx b/src/components/agenda/AgendaRow.tsx
new file mode 100644
index 0000000..c59175f
--- /dev/null
+++ b/src/components/agenda/AgendaRow.tsx
@@ -0,0 +1,57 @@
+import React, {useEffect, useState} from "react";
+import RoomsExpandable from "@/components/agenda/RoomsExpandable.tsx";
+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";
+
+interface AgendaRowProps {
+    slotStart: string;
+    rooms: IRoomAgenda[]
+}
+
+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
+    const [, forceUpdate] = useState(0)
+
+    useEffect(() => {
+        let updateInterval = endDateTime.getTime() - now.getTime() + 60_000
+        if (updateInterval < 0) updateInterval = 0
+
+        const timer = setTimeout(() => {
+            forceUpdate(prev => prev + 1)
+        }, updateInterval)
+
+        return () => clearTimeout(timer)
+    }, [slotStart])
+
+    if (rooms.length === 0) return (
+        <section>
+            Cargando...
+        </section>
+    )
+
+    if (hasPassed) return null
+
+  return (
+      <section
+          className={`flex flex-col mt-8 mb-2.5 w-full transition-opacity duration-700 ${
+              hasPassed ? "opacity-0 pointer-events-none" : "opacity-100"
+          }`}
+      >
+          <Rooms rooms={rooms} slotStart={slotStart} endsAt={endTime} hide={false} />
+          <RoomsExpandable rooms={rooms} slotStart={slotStart} endsAt={endTime} hide={true} />
+      </section>
+  )
+}
+export default AgendaRow
\ No newline at end of file
diff --git a/src/components/agenda/CardCharla.tsx b/src/components/agenda/CardCharla.tsx
new file mode 100644
index 0000000..0498f70
--- /dev/null
+++ b/src/components/agenda/CardCharla.tsx
@@ -0,0 +1,79 @@
+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";
+
+interface CardEventProps {
+    room: IRoomAgenda;
+}
+
+const CardEvent: React.FC<CardEventProps> = ({ room }) => {
+    const { savedSessions, setSavedSessions, displayAll } = useAppContext();
+    const session = room.session;
+    const [isSaved, setIsSaved] = useState(false);
+
+    useEffect(() => {
+        if (!displayAll && !savedSessions.has(session)) return;
+        setIsSaved(savedSessions.has(session));
+    }, []);
+
+    const handleSaveSession = (session: ISession) => {
+        if (savedSessions.has(session)) {
+            savedSessions.delete(session);
+            setIsSaved(false);
+        } else {
+            savedSessions.add(session);
+            setIsSaved(true);
+        }
+        return setSavedSessions(savedSessions);
+    };
+
+    if (!displayAll && !savedSessions.has(session)) 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 hover:scale-105 transition-all duration-300`}
+                session={session}
+            >
+                <h4 className={` text-2xl font-bold ${isSaved ? "text-white" : "text-alternative-600"}`}>
+                    {session.title}
+                </h4>
+                <aside 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>
+                    ))}
+                </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>
+            </WrappedCardEvent>
+        </div>
+    );
+};
+
+interface WrappedCardEventProps {
+    session: ISession;
+    children: React.ReactNode;
+    className: string;
+}
+
+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}`}
+        className={className}
+    >{children}
+    </Link>
+}
+
+export default CardEvent;
diff --git a/src/components/agenda/Rooms.tsx b/src/components/agenda/Rooms.tsx
new file mode 100644
index 0000000..4b183a5
--- /dev/null
+++ b/src/components/agenda/Rooms.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import Adorno from "@/components/icons/Adorno.tsx";
+import CardCharla from "@/components/agenda/CardCharla.tsx";
+import {Card} from "@/components/ui/card.tsx";
+import {formatTime} from "@/lib/utils.ts";
+
+const Rooms = ({rooms, slotStart, hide, endsAt}) => {
+    if (hide) return null;
+  return (
+      <>
+          <Card className="flex items-center gap-4 p-2 bg-alternative-700 border-alternative-700">
+              <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">{endsAt}</time>
+              <h2 className="font-bold text-2xl text-gray-700"></h2>
+          </Card>
+          <div className="flex flex-col flex-wrap flex-grow  md:flex-row gap-6 px-10 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/agenda/RoomsExpandable.tsx b/src/components/agenda/RoomsExpandable.tsx
new file mode 100644
index 0000000..786fd2b
--- /dev/null
+++ b/src/components/agenda/RoomsExpandable.tsx
@@ -0,0 +1,34 @@
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion.tsx";
+import CardCharla from "@/components/agenda/CardCharla.tsx";
+import Adorno from "@/components/icons/Adorno.tsx";
+import React from "react";
+import {formatTime} from "@/lib/utils.ts";
+
+const RoomsExpandable = ({rooms, slotStart, endsAt, hide}) => {
+    if (hide) return null;
+    return (
+        <Accordion type="single" collapsible className="">
+            <AccordionItem value={slotStart}>
+            <div className="flex items-center gap-4">
+                <AccordionTrigger className="flex gap-6 px-2">
+                    <Adorno/>
+                    <time className="font-bold text-2xl">{formatTime(slotStart)}</time>
+                    <span aria-label="a" className="font-bold text-2xl text-gray-500">-</span>
+                    <time className="font-bold text-2xl text-white">{endsAt}</time>
+                    <h2 className="font-bold text-2xl text-gray-700"></h2>
+                    Ver mas
+                </AccordionTrigger>
+            </div>
+                <AccordionContent>
+                    {rooms.map((room) => (
+                        <div className="flex flex-col md:flex-row gap-6" key={room.id}>
+                            <CardCharla room={room}/>
+                        </div>
+                    ))}
+                </AccordionContent>
+            </AccordionItem>
+        </Accordion>
+    )
+}
+
+export default RoomsExpandable
\ No newline at end of file
diff --git a/src/components/session/SessionCard.tsx b/src/components/session/SessionCard.tsx
new file mode 100644
index 0000000..b0076a4
--- /dev/null
+++ b/src/components/session/SessionCard.tsx
@@ -0,0 +1,24 @@
+import {Card, CardFooter} from "@/components/ui/card.tsx";
+import {Badge} from "@/components/ui/badge.tsx";
+import {Speech} from "lucide-react";
+import React from "react";
+
+const SessionCard = ({session}) => {
+  return (
+      <Card className="py-8 px-6 flex flex-col gap-4">
+          <h2 className="text-3xl font-bold text-alternative-700">
+              Charla
+          </h2>
+          <h3 className="text-2xl text-gray-700 font-semibold">
+              {session.title}
+          </h3>
+          <span className="text-lg text-primary-600 font-semibold">Descripción</span>
+          <p className="text-lg text-gray-700">{session.description}</p>
+          <CardFooter className="p-0">
+              <Badge variant="default" className="flex gap-2"><Speech/> Track: {session.category}</Badge>
+          </CardFooter>
+      </Card>
+  )
+}
+
+export default SessionCard
\ No newline at end of file
diff --git a/src/components/ui/Markup.tsx b/src/components/ui/Markup.tsx
new file mode 100644
index 0000000..2651e99
--- /dev/null
+++ b/src/components/ui/Markup.tsx
@@ -0,0 +1,17 @@
+import {Checkbox} from "@/components/ui/checkbox.tsx";
+
+const Markup = ({id, text}) => {
+  return (
+      <li className="flex items-center gap-2">
+          <Checkbox id={id} className="peer"/>
+          <label
+              htmlFor={id}
+              className="peer-data-[state=checked]:line-through peer-data-[state=checked]:text-primary-600"
+          >
+              {text}
+          </label>
+      </li>
+  )
+}
+
+export default Markup
\ No newline at end of file
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 9df3ac6..e6bb184 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -9,12 +9,13 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground",
+          "border-transparent bg-primary text-primary-foreground \"hover:border hover:border-primary-600 hover:bg-white hover:text-primary-600 transition-colors duration-300",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",
+          ghost: "border border-primary-600 bg-white text-primary-600 hover:bg-primary-50 hover:border-transparent hover:bg-primary hover:text-primary-foreground transition-colors duration-300",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index ddbdd01..34a474a 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -19,7 +19,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4" />
+      <Check className="h-4 w-4" strokeWidth={4}/>
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
index 031764c..2256ef6 100644
--- a/src/context/AppContext.tsx
+++ b/src/context/AppContext.tsx
@@ -4,31 +4,37 @@ 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 NotFound from "@/pages/NotFound.tsx";
 import ErrorPage from "@/pages/ErrorPage.tsx";
+import {ITimeSlot} from "@/types/agenda.ts";
 
 
 interface AppContextType {
     speakers: ISpeaker[];
     sessions: ISession[];
-    agenda: any[]; // o tipa tu modelo de agenda si lo tienes
+    agenda: ITimeSlot[];
     appStatus: AppStatus;
-    blob: Blob
+    setAgenda: (agenda: ITimeSlot[]) => void;
+    savedSessions: Set<ISession>;
+    setSavedSessions: (sessions: Set<ISession>) => void;
+    displayAll: boolean;
+    setDisplayAll: (displayAll: boolean) => void;
 }
 
 const AppContext = createContext(null);
 
 export const AppProvider = ({ children }) => {
     const [speakers, setSpeakers] = useState<ISpeaker[]>([]);
-    const [agenda, setAgenda] = useState([]);
+    const [agenda, setAgenda] = useState<ITimeSlot[]>([]);
     const [appStatus, setAppStatus] = useState(AppStatus.Loading);
-    const [blob, setBlob] = useState<Blob>()
+    const [savedSessions, setSavedSessions] = useState<Set<ISession>>(new Set());
+    const [displayAll, setDisplayAll] = useState<boolean>(true);
+    const [sessions, setSessions] = useState<ISession[]>([]);
 
     useEffect(() => {
         getAll().then((data) => {
             const getSpeakersWithSessions = addSessionSpeakers(data.sessions, data.speakers, data.categories[0].items);
             setSpeakers(getSpeakersWithSessions);
-            setBlob(data.blob)
+            setSessions(data.sessions)
             setAppStatus(AppStatus.Success)
         }).catch(() => {
             setAppStatus(AppStatus.Error)
@@ -36,7 +42,12 @@ export const AppProvider = ({ children }) => {
     }, []);
 
     const value = {
-        blob,
+        sessions,
+        displayAll,
+        setDisplayAll,
+        savedSessions,
+        setSavedSessions,
+        setAgenda,
         speakers,
         agenda,
         appStatus
diff --git a/src/https/fetch.ts b/src/https/fetch.ts
index 0525f27..0a4b4b0 100644
--- a/src/https/fetch.ts
+++ b/src/https/fetch.ts
@@ -1,4 +1,4 @@
-import {fetchResponse, ISpeaker} from "@/types/speakers.ts";
+import {IAgenda, IConferenceData, ISpeaker} from "@/types/speakers.ts";
 
 export const getSpeakers = async () => {
     const response = await fetch('https://sessionize.com/api/v2/n25df8kw/view/Speakers');
@@ -9,7 +9,7 @@ export const getSpeakers = async () => {
     return data;
 }
 
-export const getAll = async (): Promise<fetchResponse> => {
+export const getAll = async (): Promise<IConferenceData> => {
     const response = await fetch('https://sessionize.com/api/v2/n25df8kw/view/All');
     if (!response.ok) {
         throw new Error('Failed to fetch data');
@@ -17,5 +17,13 @@ export const getAll = async (): Promise<fetchResponse> => {
     const blob = await response.blob();
     const text = await blob.text();
     const data = JSON.parse(text)
-    return {...data, blob: blob}
+    return {...data}
+}
+
+export const getAgenda = async (): Promise<IAgenda[]> => {
+    const response = await fetch('https://sessionize.com/api/v2/gzdm0cca/view/GridSmart');
+    if (!response.ok) {
+        throw new Error('Failed to fetch agenda');
+    }
+    return await response.json();
 }
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e6de791..157dc37 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -34,4 +34,18 @@ export const addSessionSpeakers = (sessions: ISession[], speakers: ISpeaker[], c
   });
 }
 
-export const findSpeaker = (speakers: ISpeaker[], id: string) => speakers.find((speaker) => speaker.id === id);
\ No newline at end of file
+export const findSpeaker = (speakers: ISpeaker[], id: string) => speakers.find((speaker) => speaker.id === id);
+
+export const formatTime =(timeString: string) => {
+  const [h, m, s] = timeString.split(":").map(Number);
+  const date = new Date();
+  date.setHours(h, m, s);
+
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+
+  return formatter.format(date);
+}
diff --git a/src/pages/Agenda.tsx b/src/pages/Agenda.tsx
new file mode 100644
index 0000000..b4323f2
--- /dev/null
+++ b/src/pages/Agenda.tsx
@@ -0,0 +1,40 @@
+import {useEffect, useState} from "react";
+import {scrollToTop} from "@/lib/utils.ts";
+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;
+
+    useEffect(() => {
+        scrollToTop()
+    }, []);
+
+    useEffect(() => {
+        if (sessionId) {
+            const element = document.getElementById(`session-${sessionId}`);
+            if (element) {
+                setTimeout(() => {
+                    const headerOffset = 120; // ajusta según el alto de tu navbar
+                    const elementPosition = element.getBoundingClientRect().top + window.scrollY;
+                    const offsetPosition = elementPosition - headerOffset;
+
+                    window.scrollTo({
+                        top: offsetPosition,
+                        behavior: "smooth",
+                    });
+                }, 100);
+            }
+        }
+    }, [sessionId]);
+
+  return (
+      <section className="flex flex-col justify-center items-center gap-8 py-20 md:px-20">
+          <AgendaHeader/>
+          <AgendaContent/>
+      </section>
+  )
+}
+export default Agenda;
\ No newline at end of file
diff --git a/src/pages/SessionPage.tsx b/src/pages/SessionPage.tsx
new file mode 100644
index 0000000..aa55db4
--- /dev/null
+++ b/src/pages/SessionPage.tsx
@@ -0,0 +1,51 @@
+import SessionCard from "@/components/session/SessionCard.tsx";
+import {useAppContext} from "@/context/AppContext.tsx";
+import {useNavigate, useParams} from "react-router-dom";
+import Gradient from "@/components/Gradient.tsx";
+import {ChevronLeft} from "lucide-react";
+import React, {useEffect} from "react";
+import {scrollToTop} from "@/lib/utils.ts";
+
+const SessionPage = () => {
+    const navigate = useNavigate()
+    const {sessions} = useAppContext()
+    const { sessionId } = useParams();
+    const session = sessions.find(session => session.id == Number(sessionId))
+
+    const handleGoBack = () => {
+        navigate("/agenda", {
+            state: {
+                sessionId: session.id
+            }
+        })
+    }
+
+    useEffect(() => {
+        scrollToTop()
+    }, []);
+
+  return (
+      <Gradient className="py-10 px-4 md:px-20 flex flex-col gap-6 min-h-[60vh]" >
+          <button
+              onClick={() => handleGoBack()}
+              className="flex items-center gap-0.5 font-bold text-primary-600"
+          >
+              <ChevronLeft className="h-8 w-8" strokeWidth={2} />
+              <span
+                  className="
+                  block
+      relative
+      after:absolute after:left-0 after:bottom-0
+      after:h-[2px] after:w-0 after:bg-primary-600
+      after:transition-all after:duration-300
+      hover:after:w-full
+    ">
+    Volver a la agenda
+  </span>
+          </button>
+        <SessionCard session={session} />
+      </Gradient>
+  )
+}
+
+export default SessionPage;
diff --git a/src/types/agenda.ts b/src/types/agenda.ts
new file mode 100644
index 0000000..96ec7e3
--- /dev/null
+++ b/src/types/agenda.ts
@@ -0,0 +1,15 @@
+import {IRoom, IRoomData, ISession} from "@/types/speakers.ts";
+
+export interface IAgenda {
+    timeSlots: ITimeSlot[]
+    rooms: IRoomData[]
+}
+
+export interface ITimeSlot {
+    slotStart: string
+    rooms: IRoomAgenda[]
+}
+
+export interface IRoomAgenda extends IRoom {
+    session: ISession
+}
diff --git a/src/types/speakers.ts b/src/types/speakers.ts
index 17beb15..8088495 100644
--- a/src/types/speakers.ts
+++ b/src/types/speakers.ts
@@ -1,3 +1,8 @@
+export interface ISpeakerId {
+    id: string
+    name: string
+}
+
 export interface ISpeaker {
     id: string
     firstName: string
@@ -17,8 +22,8 @@ export interface ISession {
     title: string
     description: string
     startAt: string
-    endAt: string
-    speakers: string[]
+    endsAt: string
+    speakers: ISpeakerId[]
     categoryItems: number[]
 }
 
@@ -42,13 +47,20 @@ export interface ICategory {
     name: string
 }
 
+export interface IRoom {
+    id: number
+    name: string
+}
+
+export interface IRoomData extends IRoom {
+    sessions: ISession[]
+}
+
 export interface IConferenceData {
     sessions: ISession[];
     speakers: ISpeaker[];
     categories: [{
         items: ICategory[]
     }]
+    rooms: IRoom[]
 }
-export interface fetchResponse extends IConferenceData{
-    blob: Blob
-}
\ No newline at end of file