diff --git a/src/components/sections/speakers.astro b/src/components/sections/speakers.astro
new file mode 100644
index 000000000..5903ce5b4
--- /dev/null
+++ b/src/components/sections/speakers.astro
@@ -0,0 +1,219 @@
+---
+import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import { Image } from "astro:assets";
+
+const allSpeakers = await getCollection("speakers");
+
+const validSpeakers = allSpeakers.filter(speaker =>
+  !!speaker.data?.name && !!speaker.data?.avatar
+);
+
+function getRandomSpeakers(speakers: CollectionEntry<"speakers">[], count: number) {
+  const shuffled = [...speakers].sort(() => 0.5 - Math.random());
+  return shuffled.slice(0, Math.min(count, speakers.length));
+}
+
+const featuredSpeakers = getRandomSpeakers(validSpeakers, 15);
+
+const sectionTitle = "Featured Speakers";
+const sectionSubtitle = "Meet some of our amazing speakers";
+
+---
+
+<section class="py-16 px-4 bg-gray-50">
+  <div class="container mx-auto">
+    <div class="text-center mb-12">
+      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{sectionTitle}</h2>
+      <p class="text-lg text-gray-600">{sectionSubtitle}</p>
+    </div>
+
+    <div class="speakers-carousel-container relative overflow-hidden">
+      <div class="speakers-track flex transition-transform duration-1000 ease-linear">
+        {[...featuredSpeakers, ...featuredSpeakers].map((speaker, _index) => (
+          <div class="speaker-slide w-full sm:w-1/2 md:w-1/3 lg:w-1/5 flex-shrink-0 px-3">
+            <a href={`/speaker/${speaker.id}`} class="block group">
+              <div class="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 group-hover:-translate-y-2">
+                <div class="aspect-square overflow-hidden">
+                  <Image
+                    src={speaker.data.avatar}
+                    alt={`${speaker.data.name}'s profile picture`}
+                    class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    height={250}
+                    width={250}
+                    loading="eager"
+                  />
+                </div>
+                <div class="p-4 text-center h-[88px] flex flex-col justify-center">
+                  <!-- Solution: Use text-ellipsis with 2 lines max and remove whitespace-nowrap -->
+                  <h3 class="font-bold text-lg text-gray-900 group-hover:text-primary transition-colors line-clamp-2">
+                    {speaker.data.name}
+                  </h3>
+                </div>
+              </div>
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div class="text-center mt-10">
+      <a
+        href="/speakers"
+        class="inline-block px-6 py-3 bg-primary hover:bg-primary-dark text-white font-medium rounded-md transition-colors"
+      >
+        See all speakers
+      </a>
+    </div>
+  </div>
+</section>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const track = document.querySelector('.speakers-track') as HTMLElement;
+    const slides = document.querySelectorAll('.speaker-slide');
+    const totalOriginalSlides = slides.length / 2;
+
+    if (!track || slides.length === 0) return;
+
+    let currentPosition = 0;
+    const scrollSpeed = 4000;
+    let slidingInterval: ReturnType<typeof setInterval> | null = null;
+
+    // Function to determine slides per view based on window width
+    function getSlidesPerView() {
+      const width = window.innerWidth;
+      if (width <= 480) return 1;
+      if (width <= 640) return 2;
+      if (width <= 768) return 3;
+      if (width <= 1024) return 4;
+      return 5;
+    }
+
+    function updateCarouselSettings() {
+      const slidesPerView = getSlidesPerView();
+      const slideWidth = 100 / slidesPerView;
+
+      // Reset position when breakpoint changes
+      currentPosition = 0;
+      track.style.transition = 'none';
+      track.style.transform = `translateX(0)`;
+
+      // Clear and restart animation
+      if (slidingInterval !== null) {
+        clearInterval(slidingInterval);
+      }
+      startAnimation(slideWidth);
+    }
+
+    function startAnimation(slideWidth: number) {
+      // Initial setup
+      moveCarousel();
+      slidingInterval = setInterval(moveCarousel, scrollSpeed);
+
+      function moveCarousel() {
+        currentPosition += slideWidth;
+
+        track.style.transition = 'transform 1000ms linear';
+        track.style.transform = `translateX(-${currentPosition}%)`;
+
+        // Reset when we've scrolled through the original set of slides
+        if (currentPosition >= slideWidth * totalOriginalSlides) {
+          setTimeout(() => {
+            track.style.transition = 'none';
+            currentPosition = 0;
+            track.style.transform = `translateX(0)`;
+
+            setTimeout(() => {
+              track.style.transition = 'transform 1000ms linear';
+            }, 20);
+          }, 1000);
+        }
+      }
+    }
+
+    // Start the carousel
+    updateCarouselSettings();
+
+    // Update on window resize
+    window.addEventListener('resize', () => {
+      updateCarouselSettings();
+    });
+
+    // Pause on hover
+    const carouselContainer = document.querySelector('.speakers-carousel-container');
+    carouselContainer?.addEventListener('mouseenter', () => {
+      if (slidingInterval !== null) {
+        clearInterval(slidingInterval);
+        slidingInterval = null;
+      }
+    });
+
+    carouselContainer?.addEventListener('mouseleave', () => {
+      updateCarouselSettings();
+    });
+
+    // Pause when tab is not visible
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) {
+        if (slidingInterval !== null) {
+          clearInterval(slidingInterval);
+          slidingInterval = null;
+        }
+      } else {
+        updateCarouselSettings();
+      }
+    });
+  });
+</script>
+
+<style>
+  .speakers-carousel-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .speakers-track {
+    will-change: transform;
+  }
+
+  /* Line clamping for text overflow */
+  .line-clamp-1 {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* These styles match the responsive classes used in the HTML */
+  @media (max-width: 1024px) {
+    .speaker-slide {
+      width: 25%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .speaker-slide {
+      width: 33.333%;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .speaker-slide {
+      width: 50%;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .speaker-slide {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c1c8b74b3..dc881ad84 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,6 +8,7 @@ import Updates from "@sections/updates.astro";
 import Prague from "@sections/prague.astro";
 import Sponsors from "@components/sponsors/sponsors.astro";
 import Subscribe from "@sections/subscribe.astro";
+import Speakers from "@sections/speakers.astro";
 
 let deadlines = await getCollection("deadlines");
 deadlines = deadlines
@@ -23,6 +24,7 @@ deadlines = deadlines
   <Hero />
   <Updates />
   <Keynoters />
+  <Speakers />
   <Prague />
   <Sponsors />
   <Subscribe />
diff --git a/src/pages/speakers.astro b/src/pages/speakers.astro
index f72dc19e6..d6e419208 100644
--- a/src/pages/speakers.astro
+++ b/src/pages/speakers.astro
@@ -1,42 +1,65 @@
 ---
-import { getCollection } from "astro:content";
-import Layout from "../layouts/Layout.astro";
-import Prose from "../components/prose/prose.astro";
-import { Separator } from "../components/separator/separator";
+import { getCollection, type CollectionEntry } from "astro:content";
+import Layout from "@layouts/Layout.astro";
+import Prose from "@components/prose/prose.astro";
+import { Image } from "astro:assets";
+
+type Speaker = CollectionEntry<"speakers">;
 
-// Fetch all speaker entries
 const speakersCollection = await getCollection("speakers");
 
-// Define the type for the groups object
-type Speaker = {
-  id: string;
-  data: {
-    name: string;
-  };
-};
-
-type Groups = {
-  [key: string]: Speaker[];
-};
-
-// Group speakers by the first letter of their name
-const groups: Groups = speakersCollection
-  .filter((speaker: Speaker) => !!speaker.data.name)
-  .reduce((acc: Groups, speaker: Speaker) => {
-    const letter = speaker.data.name[0].toUpperCase();
-    if (!acc[letter]) {
-      acc[letter] = [];
+const speakersWithNames = speakersCollection.filter((speaker) =>
+  !!speaker.data?.name
+);
+
+const getFirstLetter = (name: string): string => name.charAt(0).toUpperCase();
+
+function createOptimalGroups(speakers: Speaker[]): Record<string, Speaker[]> {
+  const sortedSpeakers = [...speakers].sort((a, b) =>
+    a.data.name.localeCompare(b.data.name)
+  );
+
+  const groups: Record<string, Speaker[]> = {};
+  let currentGroup: Speaker[] = [];
+  let currentLetter = '';
+  let groupKey = '';
+
+  sortedSpeakers.forEach((speaker) => {
+    const letter = getFirstLetter(speaker.data.name);
+
+    if (currentGroup.length === 0) {
+      currentLetter = letter;
+      groupKey = letter;
+      currentGroup.push(speaker);
+    }
+    else if (letter === currentLetter && currentGroup.length < 15) {
+      currentGroup.push(speaker);
+    }
+    else {
+      if (currentGroup.length < 10 && currentGroup.length + 1 <= 15) {
+        currentGroup.push(speaker);
+        groupKey = `${currentLetter}-${letter}`;
+      } else {
+        groups[groupKey] = currentGroup;
+        currentLetter = letter;
+        groupKey = letter;
+        currentGroup = [speaker];
+      }
     }
-    acc[letter].push(speaker);
-    return acc;
-  }, {} as Groups);
+  });
 
-const letters = Object.keys(groups).sort((a, b) => a.localeCompare(b));
+  if (currentGroup.length > 0) {
+    groups[groupKey] = currentGroup;
+  }
 
-const title = "Speakers";
+  return groups;
+}
+
+const speakerGroups = createOptimalGroups(speakersWithNames);
+const groupKeys = Object.keys(speakerGroups);
 
-const description =
-  "Alphabetical list of all confirmed speakers for the conference";
+const title = "Speakers";
+const description = "Our conference speakers organized alphabetically";
 ---
 
 <Layout title={title} description={description}>
@@ -45,49 +68,50 @@ const description =
       <h1>Speakers</h1>
     </Prose>
 
-    <div class="flex text-3xl font-bold flex-wrap my-10">
-      {
-        letters.map((letter) => (
-          <h3 class="mr-2">
-            <a href={`#letter-${letter}`}>{letter}</a>
-          </h3>
-        ))
-      }
-    </div>
-
-    <ol class="speakers">
-      {
-        letters.map((letter, index) => (
-          <>
-            <div id={`letter-${letter}`}>
-              <h2 class="relative font-title text-primary font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-4xl">
-                {letter}
-              </h2>
-
-              <ul class="pl-4">
-                {groups[letter]
-                  .sort((a, b) => a.data.name.localeCompare(b.data.name))
-                  .map((speaker) => (
-                    <li {...{ key: speaker.id }} class="mb-1">
-                      <a
-                        class="underline hover:text-primary-hover"
-                        href={`/speaker/${speaker.id}`}
-                      >
-                        {speaker.data.name}
-                      </a>
-                    </li>
-                  ))}
-              </ul>
+    {
+      groupKeys.map((key, index) => (
+        <>
+          <div id={`group-${key}`} class="pt-6">
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 mb-10">
+              {speakerGroups[key].map((speaker) => (
+                <a
+                  href={`/speaker/${speaker.id}`}
+                  class="flex flex-col items-center group"
+                >
+                    {speaker.data.avatar ? (
+
+          <Image
+            src={speaker.data.avatar}
+            alt={`${speaker.data.name}'s profile picture`}
+            height={250}
+            width={250}
+            class="w-full aspect-square rounded-full overflow-hidden mb-3 border-2 border-transparent group-hover:border-primary transition-all h-full object-cover "
+          />
+                    ) : (
+                      <div class="w-full h-full bg-[#f7efe6] flex items-center justify-center text-gray-500 text-xl aspect-square rounded-full overflow-hidden mb-3 border-2 border-transparent ">
+                        {speaker.data.name.charAt(0)}
+                      </div>
+                    )}
+                  <h3 class="text-center font-medium group-hover:text-primary text-sm md:text-base">
+                    {speaker.data.name}
+                  </h3>
+                </a>
+              ))}
             </div>
+          </div>
 
-            {index !== letters.length - 1 ? (
-              <Separator />
-            ) : (
-              <div class="mb-20" />
-            )}
-          </>
-        ))
-      }
-    </ol>
+        </>
+      ))
+    }
   </div>
 </Layout>
+
+<style>
+  a {
+    transition: transform 0.2s ease;
+  }
+
+  a.group:hover {
+    transform: translateY(-3px);
+  }
+</style>