diff --git a/public/locales/fr/speakers.json b/public/locales/fr/speakers.json
index 85549ff..9cc0e82 100644
--- a/public/locales/fr/speakers.json
+++ b/public/locales/fr/speakers.json
@@ -68,6 +68,7 @@
     },
     "sessions": [
       {
+        "id": 1,
         "title": "Comment PSh est devenu le partenaire de Adobe.",
         "description": "Une plongée inspirante dans les coulisses d'un partenariat gagnant-gagnant, avec des enseignements applicables à d'autres collaborations stratégiques.",
         "lang": "fr",
@@ -79,6 +80,7 @@
         "speakers": [1]
       },
       {
+        "id": 2,
         "title": "200 Domains on a Single Magento Instance with a $300 Hosting Bill",
         "description": "A fascinating story about a unique customer business model with a Magento store where each product segment has its dedicated domain and technology behind it.",
         "lang": "en",
@@ -90,6 +92,7 @@
         "speakers": [2]
       },
       {
+        "id": 3,
         "title": "Comment étendre Magento/Adobe Commerce sans le surcharger - App Builder.",
         "description": "Et si vous personnalisiez Magento sans jamais toucher à son code ? Découvrez une approche innovante basée sur les addons, en exploitant Adobe App Builder et Runtime I/O pour transformer l’expérience Magento.",
         "lang": "fr",
@@ -101,6 +104,7 @@
         "speakers": [3]
       },
       {
+        "id": 4,
         "title": "Le frontend Magento : vers une nouvelle dynamique communautaire.",
         "description": "Réinventer le frontend Magento en l'alignant sur les meilleures pratiques modernes : une opportunité d’optimiser la stack, d’attirer de nouveaux talents et de dynamiser la communauté grâce à une collaboration renforcée entre backend et frontend.",
         "lang": "fr",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8fe55b6..6774851 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import ContentMedia from "@/components/ContentMedia/ContentMedia";
 import Place from "@/components/Place/Place";
@@ -7,6 +7,7 @@ import SponsorList from "@/components/SponsorList/SponsorList";
 import Container from "@/layouts/Container";
 import Hero from "@/components/Hero/Hero";
 import Speakers from "@/components/Speakers/Speakers";
+import Program from "@/components/Program/Program";
 import useDataProvider from "@/hooks/useDataProvider";
 import { SpeakersProps } from "@/components/Speakers/SpeakersProps";
 import { SponsorProps } from "@/components/SponsorList/Sponsor/Sponsor.types";
@@ -16,7 +17,7 @@ import Link from "next/link";
 import { useTranslation } from "react-i18next";
 
 export default function Home() {
-  const { t } = useTranslation(['common']);
+  const { t } = useTranslation(["common"]);
   const dataProvider = useDataProvider();
   const speakers: SpeakersProps = dataProvider.useSpeakers();
   const sponsors: SponsorProps[] = dataProvider.useSponsors();
@@ -25,6 +26,9 @@ export default function Home() {
   return (
     <div className="relative -top-[104px] left-0">
       <Hero />
+      <div id="program">
+        <Program />
+      </div>
       <div id="speakers">
         <Speakers data={speakers} />
       </div>
@@ -49,12 +53,12 @@ export default function Home() {
                 className="mt-6"
               >
                 Pour toute autre question, consultez notre{" "}
-                <Link href={t('common:faqUrl')} className="underline">
-                  {t('common:faqLabel')}
+                <Link href={t("common:faqUrl")} className="underline">
+                  {t("common:faqLabel")}
                 </Link>{" "}
                 ou écrivez-nous via le{" "}
-                <Link href={t('common:contactUrl')} className="underline">
-                  {t('common:contactLabel')}
+                <Link href={t("common:contactUrl")} className="underline">
+                  {t("common:contactLabel")}
                 </Link>
                 .
               </Typography>
diff --git a/src/components/Person/Person.tsx b/src/components/Person/Person.tsx
index baf44f9..3730f5e 100644
--- a/src/components/Person/Person.tsx
+++ b/src/components/Person/Person.tsx
@@ -5,65 +5,88 @@ import { GrFormView } from "react-icons/gr";
 import { PersonProps } from "@/components/Person/PersonProps";
 import classNames from "classnames";
 
-const PersonCard = ({ person }: { person: PersonProps }) => (
-  <div className="text-black flex flex-col justify-center cursor-pointer">
-    <div className="flex gap-2 mb-2">
-      <Image
-        src={person.companyLogo}
-        alt={person.company}
-        width={20}
-        height={20}
-        className="h-6"
-      />
-      <span className="text-sm">{person.company}</span>
-    </div>
-    <p className="font-semibold text-lg mb-1">{person.name}</p>
+const PersonCard = ({
+  person,
+  appearance = "speaker",
+}: {
+  person: PersonProps;
+  appearance?: "speaker" | "program";
+}) => (
+  <div className="text-black flex flex-col justify-center">
+    {appearance === "speaker" && (
+      <div className="flex gap-2 mb-2">
+        <Image
+          src={person.companyLogo}
+          alt={person.company}
+          width={20}
+          height={20}
+          className="h-6"
+        />
+        <span className="text-sm">{person.company}</span>
+      </div>
+    )}
+    <p className="font-semibold text-lg">{person.name}</p>
     <p className="text-gray-600 italic">{person.role}</p>
   </div>
 );
 
-const Person = ({ person }: { person: PersonProps }) => {
+const Person = ({
+  person,
+  appearance = "speaker",
+}: {
+  person: PersonProps;
+  appearance?: "speaker" | "program";
+}) => {
   const { width } = useWindowSize();
   const bgClass = `bg-cover bg-photo-${person.photoBg}`;
 
+  const imageClass = classNames(
+    "relative aspect-square object-cover overflow-hidden",
+    {
+      "w-20 h-24": appearance === "program",
+      "min-w-[135px]": appearance === "speaker" && width < 768,
+      "min-w-[165px]": appearance === "speaker" && width >= 768,
+      "rounded-full": appearance === "speaker",
+      "[clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]":
+        appearance === "program",
+    },
+    bgClass
+  );
+
   return (
     <>
       {width < 768 ? (
-        <div className="flex flex-row gap-2 rounded-full">
+        <div className="flex flex-row gap-2">
           <Image
             src={person.photo}
             alt={person.name}
-            width={135}
-            height={135}
-            className={classNames(
-              "min-w-[135px] rounded-full relative aspect-square object-cover overflow-hidden",
-              bgClass
-            )}
+            width={appearance === "program" ? 96 : 135}
+            height={appearance === "program" ? 96 : 135}
+            className={imageClass}
           />
-          <PersonCard person={person} />
+          <PersonCard person={person} appearance={appearance} />
         </div>
       ) : (
-        <>
-          <div className="flex flex-col relative rounded-full">
+        <div className="flex flex-row gap-6">
+          <div className="flex flex-col relative">
             <Image
               src={person.photo}
               alt={person.name}
-              width={165}
-              height={165}
-              className={classNames(
-                "min-w-[165px] rounded-full relative aspect-square object-cover overflow-hidden",
-                bgClass
-              )}
+              width={appearance === "program" ? 96 : 165}
+              height={appearance === "program" ? 96 : 165}
+              className={imageClass}
             />
-            <div className="text-white font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-primary w-fit px-4 py-2 rounded-full absolute bottom-0 left-1/2 -translate-x-1/2">
-              <div className="flex flex-row items-center gap-1">
-                <GrFormView size={20} className="text-white" />
-                <span className="text-sm">Biographie</span>
+            {appearance === "speaker" && (
+              <div className="text-white font-semibold lg:opacity-0 lg:group-hover:opacity-100 lg:transition-opacity lg:duration-300 lg:hover:cursor-pointer bg-primary w-fit px-4 py-2 rounded-full absolute bottom-0 left-1/2 -translate-x-1/2">
+                <div className="flex flex-row items-center gap-1">
+                  <GrFormView size={20} className="text-white" />
+                  <span className="text-sm">Biographie</span>
+                </div>
               </div>
-            </div>
+            )}
           </div>
-          <PersonCard person={person} />
-        </>
+          <PersonCard person={person} appearance={appearance} />
+        </div>
       )}
     </>
   );
diff --git a/src/components/Program/Program.tsx b/src/components/Program/Program.tsx
new file mode 100644
index 0000000..f9d6d55
--- /dev/null
+++ b/src/components/Program/Program.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import Container from "@/layouts/Container";
+import BackgroundImage from "../BackgroundImage/BackgroundImage";
+import ProgramList from "./ProgramList";
+
+const Program = () => {
+  return (
+    <BackgroundImage
+      imagePath="/images/background/sponsors.png"
+      className="py-12"
+    >
+      <Container size="large">
+        <div className="program">
+          <ProgramList />
+        </div>
+      </Container>
+    </BackgroundImage>
+  );
+};
+
+export default Program;
diff --git a/src/components/Program/ProgramList.tsx b/src/components/Program/ProgramList.tsx
new file mode 100644
index 0000000..2f5921f
--- /dev/null
+++ b/src/components/Program/ProgramList.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import TopBanner from "../TopBanner/TopBanner";
+import ButtonLink from "../ButtonLink/ButtonLink";
+import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import useDataProvider from "@/hooks/useDataProvider";
+import ClientOnly from "@/helpers/ClientOnly";
+import ProgramTile from "./ProgramTile";
+
+const ProgramList = () => {
+  const swiperRef = React.useRef<SwiperClass>(null);
+  const sessions = useDataProvider().useSessions();
+
+  const handlePrev = () => {
+    if (swiperRef.current) {
+      swiperRef.current.slidePrev();
+    }
+  };
+
+  const handleNext = () => {
+    if (swiperRef.current) {
+      swiperRef.current.slideNext();
+    }
+  };
+  return (
+    <section className="program-list">
+      <div className="mb-8">
+        <TopBanner
+          title="Extrait du Programme"
+          onNextClick={handleNext}
+          onPrevClick={handlePrev}
+        >
+          <>
+            <div className="md:hidden">
+              <ButtonLink variant="secondary-invert" href={"/program"}>
+                Voir tout
+              </ButtonLink>
+            </div>
+            <div className="hidden md:block">
+              <ButtonLink variant="secondary-invert" href={"/program"}>
+                Découvrir le Programme
+              </ButtonLink>
+            </div>
+          </>
+        </TopBanner>
+      </div>
+      <ClientOnly>
+        <Swiper
+          onSwiper={(swiper) => {
+            swiperRef.current = swiper;
+          }}
+          modules={[Navigation]}
+          spaceBetween={30}
+          breakpoints={{
+            0: {
+              slidesPerView: 1,
+              spaceBetween: 16,
+            },
+            768: {
+              slidesPerView: 2,
+            },
+            1024: {
+              slidesPerView: 3,
+            },
+          }}
+          className="relative"
+        >
+          {sessions.map((session) => (
+            <SwiperSlide key={session.id} className="!h-auto">
+              <ProgramTile session={session} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </ClientOnly>
+    </section>
+  );
+};
+
+export default ProgramList;
diff --git a/src/components/Program/ProgramTile.tsx b/src/components/Program/ProgramTile.tsx
new file mode 100644
index 0000000..9190a38
--- /dev/null
+++ b/src/components/Program/ProgramTile.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { SessionProps } from "../Speakers/Session/SessionProps";
+import Session from "../Speakers/Session/Session";
+import { PiCalendarPlus } from "react-icons/pi";
+import Person from "../Person/Person";
+import useDataProvider from "@/hooks/useDataProvider";
+
+const ProgramTile = ({ session }: { session: SessionProps }) => {
+  const dataProvider = useDataProvider();
+  const speakers = dataProvider
+    .usePersonList("speakers", "data.speakers")
+    .filter((speaker) => session.speakers.includes(speaker.id));
+
+  return (
+    <div className="program-tile bg-white rounded-xl flex flex-col justify-between gap-6 p-4 md:p-6 h-full group">
+      <div className="flex flex-col gap-6">
+        <Session session={session} />
+        <div className="program-tile-speakers flex flex-col gap-2">
+          {speakers.map((speaker) => (
+            <Person person={speaker} appearance="program" key={speaker.id} />
+          ))}
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <div className="flex flex-row items-center gap-1 bg-primary px-4 py-2 rounded-full lg:opacity-0 lg:group-hover:opacity-100 lg:transition-opacity lg:duration-300 lg:hover:cursor-pointer">
+          <PiCalendarPlus size={20} className="text-white" />
+          <span className="text-sm text-white font-semibold">
+            Ajouter à mon agenda
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProgramTile;
diff --git a/src/components/Speakers/Session/Session.tsx b/src/components/Speakers/Session/Session.tsx
index 3cd4e05..c78dff5 100644
--- a/src/components/Speakers/Session/Session.tsx
+++ b/src/components/Speakers/Session/Session.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import React from "react";
 import Typography from "@/components/Typography/Typography";
@@ -9,10 +9,10 @@ import ButtonLink from "@/components/ButtonLink/ButtonLink";
 import { useTranslation } from "react-i18next";
 
 const Session = ({ session }: { session: SessionProps }) => {
-  const { t } = useTranslation(['speakers']);
+  const { t } = useTranslation(["speakers"]);
 
   return (
-    <div className="flex flex-col md:flex-row justify-between rounded-xl gap-6 p-6 bg-white">
+    <div className="flex flex-col md:flex-row justify-between">
       <div className="flex flex-col gap-6">
         <div className="flex flex-col gap-2">
           <Typography color="dark" variant="h4" weight="semibold">
@@ -35,10 +35,7 @@ const Session = ({ session }: { session: SessionProps }) => {
         </div>
         <div className="flex gap-2">
           {session.tags.map((tag, tagIndex) => (
-            <span
-              key={tagIndex}
-              className="px-3 py-1 rounded-md bg-secondary"
-            >
+            <span key={tagIndex} className="px-3 py-1 rounded-md bg-secondary">
               <Typography
                 variant="caption"
                 weight="bold"
@@ -50,24 +47,20 @@ const Session = ({ session }: { session: SessionProps }) => {
           ))}
         </div>
       </div>
-      <div className="flex flex-col justify-end items-start md:items-end w-full">
-        {!!session.eventUrl && (
+      {!!session.eventUrl && (
+        <div className="flex flex-col justify-end items-start md:items-end w-full">
           <ButtonLink
             variant="secondary-invert"
             href={session.eventUrl}
             iconPosition="left"
-            icon={<PiCalendarPlus size={24} className="text-white"/>}
+            icon={<PiCalendarPlus size={24} className="text-white" />}
           >
-            <Typography
-              variant="body1"
-              weight="semibold"
-              color="light"
-            >
+            <Typography variant="body1" weight="semibold" color="light">
               Ajouter à mon agenda
             </Typography>
           </ButtonLink>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/Speakers/Session/SessionProps.ts b/src/components/Speakers/Session/SessionProps.ts
index 03fa028..c158b59 100644
--- a/src/components/Speakers/Session/SessionProps.ts
+++ b/src/components/Speakers/Session/SessionProps.ts
@@ -1,4 +1,5 @@
 export type SessionProps = {
+  id: number;
   title: string;
   description: string;
   lang: string;
diff --git a/src/components/Speakers/Speaker/PersonPopIn.tsx b/src/components/Speakers/Speaker/PersonPopIn.tsx
index 93bd97c..99fea35 100644
--- a/src/components/Speakers/Speaker/PersonPopIn.tsx
+++ b/src/components/Speakers/Speaker/PersonPopIn.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { PersonProps } from "@/components/Person/PersonProps";
 import PersonPopIn from "@/components/Person/PersonPopIn";
@@ -14,7 +14,7 @@ interface SpeakerPopInProps {
 const SpeakerPopIn = ({
   isOpen,
   onClose,
-  selectedSpeaker
+  selectedSpeaker,
 }: SpeakerPopInProps) => {
   const dataProvider = useDataProvider();
   const sessions = dataProvider.useSessions(selectedSpeaker.id);
@@ -26,8 +26,10 @@ const SpeakerPopIn = ({
       selectedPerson={selectedSpeaker}
     >
       {sessions.map((session, index) => (
-        <Session session={session} key={index} />
-      ))};
+        <div className="rounded-xl gap-6 p-6 bg-white" key={index}>
+          <Session session={session} key={index} />
+        </div>
+      ))}
     </PersonPopIn>
   );
 };
diff --git a/src/components/Speakers/SpeakersList.tsx b/src/components/Speakers/SpeakersList.tsx
index facf1ad..223d3b2 100644
--- a/src/components/Speakers/SpeakersList.tsx
+++ b/src/components/Speakers/SpeakersList.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import React from "react";
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
@@ -19,8 +19,8 @@ const SpeakersList = ({ speakers }: { speakers: PersonProps[] }) => {
   const swiperRef = React.useRef<SwiperClass>(null);
   const [selectedSpeaker, setSelectedSpeaker] =
     React.useState<PersonProps | null>(null);
-  const { t } = useTranslation(['speakers']);
-  const actions = t('actions', { returnObjects: true });
+  const { t } = useTranslation(["speakers"]);
+  const actions = t("actions", { returnObjects: true });
 
   const handleSpeakerClick = (speaker: PersonProps) => {
     setSelectedSpeaker(speaker);
@@ -51,7 +51,7 @@ const SpeakersList = ({ speakers }: { speakers: PersonProps[] }) => {
           onPrevClick={handlePrev}
           onNextClick={handleNext}
         >
-          {'seeAllUrl' in actions && typeof actions.seeAllUrl === 'string' && (
+          {"seeAllUrl" in actions && typeof actions.seeAllUrl === "string" && (
             <>
               <div className="md:hidden">
                 <ButtonLink variant="secondary" href={actions.seeAllUrl}>
@@ -76,7 +76,7 @@ const SpeakersList = ({ speakers }: { speakers: PersonProps[] }) => {
           spaceBetween={30}
           breakpoints={{
             0: {
-              slidesPerView: 1.2,
+              slidesPerView: 1.1,
               spaceBetween: 16,
             },
             768: {
diff --git a/src/components/TopBanner/TopBanner.tsx b/src/components/TopBanner/TopBanner.tsx
index 2d86124..2217f88 100644
--- a/src/components/TopBanner/TopBanner.tsx
+++ b/src/components/TopBanner/TopBanner.tsx
@@ -29,7 +29,7 @@ const TopBanner = ({
         </Typography>
         <div className="flex gap-2">
           {children}
-          {onPrevClick && onNextClick && width > 768 && (
+          {onPrevClick && onNextClick && width > 1024 && (
             <div className="flex gap-2 ml-4">
               <button onClick={onPrevClick} className="p-2 rounded bg-white/20">
                 <IoIosArrowBack className="text-white" size={24} />
@@ -48,11 +48,11 @@ const TopBanner = ({
   );
 
   return (
-    <div className="top-banner overflow-hidden rounded-xl">
+    <div className="top-banner">
       {backgroundImage ? (
         <BackgroundImage
           imagePath={backgroundImage}
-          className="py-3 px-4 md:px-14"
+          className="py-3 px-4 md:px-14 overflow-hidden rounded-xl"
         >
           {bannerContent}
         </BackgroundImage>
diff --git a/src/hooks/useDataProvider.tsx b/src/hooks/useDataProvider.tsx
index 02ae176..566bea6 100644
--- a/src/hooks/useDataProvider.tsx
+++ b/src/hooks/useDataProvider.tsx
@@ -1,85 +1,82 @@
-'use client';
+"use client";
 
 import { useTranslation } from "react-i18next";
 import { SpeakersProps } from "@/components/Speakers/SpeakersProps";
 import { SponsorProps } from "@/components/SponsorList/Sponsor/Sponsor.types";
 import { PlaceProps } from "@/components/Place/PlaceProps";
 import { PersonProps } from "@/components/Person/PersonProps";
-import {SessionProps} from "@/components/Speakers/Session/SessionProps";
+import { SessionProps } from "@/components/Speakers/Session/SessionProps";
 
-const useData = (ns: string, key: string = 'data') => {
+const useData = (ns: string, key: string = "data") => {
   return useTranslation([ns]).t(key, { returnObjects: true });
-}
+};
 
 const isSpeakersProps = (content: object): content is SpeakersProps => {
-  return content !== null && typeof content === 'object';
-}
+  return content !== null && typeof content === "object";
+};
 
 const isSessionProps = (content: object): content is SessionProps[] => {
-  return content !== null && typeof content === 'object';
-}
+  return content !== null && typeof content === "object";
+};
 
 const isSponsors = (content: object): content is SponsorProps[] => {
-  return content !== null && typeof content === 'object';
-}
+  return content !== null && typeof content === "object";
+};
 
 const isPlaceProps = (content: object): content is PlaceProps => {
-  return content !== null && typeof content === 'object';
-}
+  return content !== null && typeof content === "object";
+};
 
 const isPersonList = (content: object): content is PersonProps[] => {
-  return content !== null && typeof content === 'object';
-}
+  return content !== null && typeof content === "object";
+};
 
-const useSpeakers = (): SpeakersProps =>
-{
-  const content = useData('speakers');
+const useSpeakers = (): SpeakersProps => {
+  const content = useData("speakers");
   if (!isSpeakersProps(content)) {
-    throw new Error('Content is not a valid Speakers Type');
+    throw new Error("Content is not a valid Speakers Type");
   }
 
   return content;
-}
+};
 
-const useSessions = (speakerId: number): SessionProps[] =>
-{
-  const content = useData('speakers', 'data.sessions');
+const useSessions = (speakerId?: number): SessionProps[] => {
+  const content = useData("speakers", "data.sessions");
   if (!isSessionProps(content)) {
-    throw new Error('Content is not a valid Speakers Type');
+    throw new Error("Content is not a valid Speakers Type");
   }
 
+  if (!speakerId) return content;
+
   return content.filter((session) => session.speakers.includes(speakerId));
-}
+};
 
-const useSponsors = (): SponsorProps[] =>
-{
-  const content = useData('sponsors', 'partners');
+const useSponsors = (): SponsorProps[] => {
+  const content = useData("sponsors", "partners");
   if (!isSponsors(content)) {
-    throw new Error('Content is not a valid array of Sponsor Type');
+    throw new Error("Content is not a valid array of Sponsor Type");
   }
 
   return content;
-}
+};
 
-const usePlace = (): PlaceProps =>
-{
-  const content = useData('place');
+const usePlace = (): PlaceProps => {
+  const content = useData("place");
   if (!isPlaceProps(content)) {
-    throw new Error('Content is not a valid Place Type');
+    throw new Error("Content is not a valid Place Type");
   }
 
   return content;
-}
+};
 
-const usePersonList = (ns: string, key: string): PersonProps[] =>
-{
+const usePersonList = (ns: string, key: string): PersonProps[] => {
   const content = useData(ns, key);
   if (!isPersonList(content)) {
-    throw new Error('Content is not a valid array of Sponsor Type');
+    throw new Error("Content is not a valid array of Sponsor Type");
   }
 
   return content;
-}
+};
 
 const useDataProvider = () => {
   return {
@@ -88,7 +85,7 @@ const useDataProvider = () => {
     useSessions: useSessions,
     usePlace: usePlace,
     usePersonList: usePersonList,
-  }
+  };
 };
 
 export default useDataProvider;