diff --git a/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx b/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
index 5a674406..79a40f61 100644
--- a/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
+++ b/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
@@ -1,4 +1,14 @@
-import { AspectRatio, Card, Center, Grid, Text, Image } from '@mantine/core';
+import {
+  AspectRatio,
+  Card,
+  Center,
+  Group,
+  Text,
+  Image,
+  Box,
+  ScrollAreaAutosize,
+} from '@mantine/core';
+import { useScroller } from '@mantine/hooks';
 import useCollection from '../../lib/queries/useCollection';
 import { useState } from 'react';
 
@@ -7,7 +17,10 @@ interface Props {
   handle: string;
 }
 
+const CARD_WIDTH = 120;
+
 export default function CollectionCardPreview(props: Props) {
+  const scroller = useScroller();
   const [imageError, setImageError] = useState(false);
 
   const { data } = useCollection({
@@ -21,35 +34,45 @@ export default function CollectionCardPreview(props: Props) {
   if (cards.length === 0) return null;
 
   return (
-    <Grid gap={'xs'}>
-      {cards.map((c) => (
-        <Grid.Col key={c.id} span={3}>
-          {c.cardContent.imageUrl && !imageError ? (
-            <AspectRatio ratio={16 / 9}>
-              <Image
-                src={c.cardContent.imageUrl}
-                alt={`${c.cardContent.url} social preview image`}
-                radius={'md'}
-                mih={45}
-                w={'100%'}
-                onError={() => setImageError(true)}
-              />
-            </AspectRatio>
-          ) : (
-            <AspectRatio ratio={16 / 9}>
-              <Card p={'xs'} radius={'md'} mih={45} w={'100%'} withBorder>
-                <Center my={'auto'}>
-                  <Text fz={8} fw={500} lineClamp={2}>
-                    {c.cardContent.title ??
-                      c.cardContent.description ??
-                      c.cardContent.url}
-                  </Text>
-                </Center>
-              </Card>
-            </AspectRatio>
-          )}
-        </Grid.Col>
-      ))}
-    </Grid>
+    <Box
+      ref={scroller.ref}
+      {...scroller.dragHandlers}
+      style={{
+        overflowX: 'auto',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+      }}
+    >
+      <Group gap={'xs'} grow={cards.length > 2} wrap="nowrap">
+        {cards.map((c) => (
+          <Box key={c.id} w={CARD_WIDTH} miw={CARD_WIDTH}>
+            {c.cardContent.imageUrl && !imageError ? (
+              <AspectRatio ratio={16 / 9}>
+                <Image
+                  src={c.cardContent.imageUrl}
+                  alt={`${c.cardContent.url} social preview image`}
+                  radius={'md'}
+                  fit="cover"
+                  draggable={false}
+                  onError={() => setImageError(true)}
+                />
+              </AspectRatio>
+            ) : (
+              <AspectRatio ratio={16 / 9}>
+                <Card p={'xs'} radius={'md'} withBorder>
+                  <Center my={'auto'}>
+                    <Text fz={8} fw={500} lineClamp={2}>
+                      {c.cardContent.title ??
+                        c.cardContent.description ??
+                        c.cardContent.url}
+                    </Text>
+                  </Center>
+                </Card>
+              </AspectRatio>
+            )}
+          </Box>
+        ))}
+      </Group>
+    </Box>
   );
 }
diff --git a/src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx b/src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx
index 186823c2..0e6032e2 100644
--- a/src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx
+++ b/src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx
@@ -1,15 +1,25 @@
-import { AspectRatio, Grid, GridCol, Skeleton } from '@mantine/core';
+import { AspectRatio, Box, Group, Skeleton } from '@mantine/core';
+
+const CARD_WIDTH = 120;
 
 export default function CollectionCardPreviewSkeleton() {
   return (
-    <Grid gap={'xs'}>
-      {Array.from({ length: 4 }).map((_, i) => (
-        <GridCol key={i} span={3}>
-          <AspectRatio ratio={16 / 9}>
-            <Skeleton radius={'md'} h={45} w={'100%'} />
-          </AspectRatio>
-        </GridCol>
-      ))}
-    </Grid>
+    <Box
+      style={{
+        overflowX: 'auto',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+      }}
+    >
+      <Group gap={'xs'} grow wrap="nowrap">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Box key={i} w={CARD_WIDTH} miw={CARD_WIDTH}>
+            <AspectRatio ratio={16 / 9}>
+              <Skeleton radius={'md'} />
+            </AspectRatio>
+          </Box>
+        ))}
+      </Group>
+    </Box>
   );
 }