diff --git a/examples/astro-stores-demo/src/components/media/MediaGallery.tsx b/examples/astro-stores-demo/src/components/media/MediaGallery.tsx
index 7610ee584..4c41a41a4 100644
--- a/examples/astro-stores-demo/src/components/media/MediaGallery.tsx
+++ b/examples/astro-stores-demo/src/components/media/MediaGallery.tsx
@@ -86,14 +86,6 @@ export const Next: React.FC<
   </MediaGalleryPrimitive.Next>
 );
 
-export const Thumbnails: React.FC<
-  React.ComponentProps<typeof MediaGalleryPrimitive.Thumbnails>
-> = ({ children, ...props }) => (
-  <MediaGalleryPrimitive.Thumbnails {...props}>
-    {children}
-  </MediaGalleryPrimitive.Thumbnails>
-);
-
 export const ThumbnailRepeater: React.FC<
   React.ComponentProps<typeof MediaGalleryPrimitive.ThumbnailRepeater>
 > = ({ children, ...props }) => (
diff --git a/examples/astro-stores-demo/src/components/store/ProductDetails.tsx b/examples/astro-stores-demo/src/components/store/ProductDetails.tsx
index afaba5405..0b378965d 100644
--- a/examples/astro-stores-demo/src/components/store/ProductDetails.tsx
+++ b/examples/astro-stores-demo/src/components/store/ProductDetails.tsx
@@ -55,11 +55,9 @@ export default function ProductDetails({
                 </div>
 
                 {/* Thumbnail Images */}
-                <StyledMediaGallery.Thumbnails>
-                  <StyledMediaGallery.ThumbnailRepeater>
-                    <StyledMediaGallery.ThumbnailItem />
-                  </StyledMediaGallery.ThumbnailRepeater>
-                </StyledMediaGallery.Thumbnails>
+                <StyledMediaGallery.ThumbnailRepeater>
+                  <StyledMediaGallery.ThumbnailItem />
+                </StyledMediaGallery.ThumbnailRepeater>
               </div>
 
               {/* Product Info */}
diff --git a/packages/headless-components/media/src/react/MediaGallery.tsx b/packages/headless-components/media/src/react/MediaGallery.tsx
index 333877eaf..f4fe29b1a 100644
--- a/packages/headless-components/media/src/react/MediaGallery.tsx
+++ b/packages/headless-components/media/src/react/MediaGallery.tsx
@@ -46,14 +46,15 @@ import {
   Previous as CorePrevious,
   Viewport as CoreViewport,
   Indicator as CoreIndicator,
-  ThumbnailList as CoreThumbnailList,
   ThumbnailItem as CoreThumbnailItem,
 } from './core/MediaGallery.js';
 import React, { createContext, useContext } from 'react';
-import type { MediaItem } from '../services/media-gallery-service.js';
+import { MediaGalleryServiceDefinition } from '../services/media-gallery-service.js';
 import type { MediaGalleryServiceConfig } from '../services/media-gallery-service.js';
 import { Slot } from '@radix-ui/react-slot';
 import { WixMediaImage } from './WixMediaImage.js';
+import { useService } from '@wix/services-manager-react';
+import { ServiceAPI } from '@wix/services-definitions';
 
 // Components that render actual DOM elements get test IDs on their rendered elements
 // Components that only provide context/logic don't introduce new DOM elements
@@ -345,7 +346,6 @@ export const Indicator = React.forwardRef<HTMLDivElement, IndicatorProps>(
   },
 );
 
-const ThumbnailsContext = createContext<{ items: MediaItem[] } | null>(null);
 const ThumbnailItemContext = createContext<{ index: number } | null>(null);
 
 /**
@@ -356,30 +356,6 @@ export interface ThumbnailsProps {
   children: React.ReactNode;
 }
 
-/**
- * Thumbnails container component that provides thumbnail context to its children.
- * Only renders when there are multiple media items to display.
- *
- * @component
- * @example
- * ```tsx
- * <MediaGallery.Thumbnails>
- *   <MediaGallery.ThumbnailRepeater>
- *     <MediaGallery.ThumbnailItem />
- *   </MediaGallery.ThumbnailRepeater>
- * </MediaGallery.Thumbnails>
- * ```
- */
-export const Thumbnails = ({ children }: ThumbnailsProps) => (
-  <CoreThumbnailList>
-    {({ items }) => (
-      <ThumbnailsContext.Provider value={{ items: items as MediaItem[] }}>
-        {children}
-      </ThumbnailsContext.Provider>
-    )}
-  </CoreThumbnailList>
-);
-
 /**
  * Props for the ThumbnailRepeater component
  */
@@ -402,11 +378,16 @@ export interface ThumbnailRepeaterProps {
  * ```
  */
 export const ThumbnailRepeater = ({ children }: ThumbnailRepeaterProps) => {
-  const ctx = useContext(ThumbnailsContext);
-  if (!ctx || !ctx.items || ctx.items.length <= 1) return null;
+  const mediaService = useService(MediaGalleryServiceDefinition) as ServiceAPI<
+    typeof MediaGalleryServiceDefinition
+  >;
+
+  const mediaToDisplay = mediaService.mediaToDisplay.get();
+
+  if (!mediaToDisplay || mediaToDisplay.length <= 1) return null;
   return (
     <>
-      {ctx.items.map((_, i) => (
+      {mediaToDisplay.map((_, i) => (
         <ThumbnailItemContext.Provider key={i} value={{ index: i }}>
           {children}
         </ThumbnailItemContext.Provider>