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>
   );
 }
-- 
2.51.2


From 5cfdf6b714790aec140a2e61bbdeb17c6c1f4e06 Mon Sep 17 00:00:00 2001
From: pdelfan <pdelfan@gmail.com>
Date: Wed, 27 May 2026 11:48:28 -0700
Subject: [PATCH 2/5] chore: clean up

---
 .../components/collectionCardPreview/CollectionCardPreview.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx b/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
index 79a40f61..71d37750 100644
--- a/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
+++ b/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
@@ -6,7 +6,6 @@ import {
   Text,
   Image,
   Box,
-  ScrollAreaAutosize,
 } from '@mantine/core';
 import { useScroller } from '@mantine/hooks';
 import useCollection from '../../lib/queries/useCollection';
-- 
2.51.2


From 00a3ccfcfa640224703a533024ffcd2f0073a718 Mon Sep 17 00:00:00 2001
From: pdelfan <pdelfan@gmail.com>
Date: Wed, 27 May 2026 11:52:30 -0700
Subject: [PATCH 3/5] feat: collection card preview width and limit

---
 .../collectionCardPreview/CollectionCardPreview.tsx           | 4 ++--
 .../collectionCardPreview/Skeleton.CollectionCardPreview.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx b/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
index 71d37750..c7a1301e 100644
--- a/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
+++ b/src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
@@ -16,7 +16,7 @@ interface Props {
   handle: string;
 }
 
-const CARD_WIDTH = 120;
+const CARD_WIDTH = 130;
 
 export default function CollectionCardPreview(props: Props) {
   const scroller = useScroller();
@@ -25,7 +25,7 @@ export default function CollectionCardPreview(props: Props) {
   const { data } = useCollection({
     rkey: props.rkey,
     handle: props.handle,
-    limit: 4,
+    limit: 6,
   });
 
   const cards = data?.pages.flatMap((col) => col.urlCards) ?? [];
diff --git a/src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx b/src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx
index 0e6032e2..960ae524 100644
--- a/src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx
+++ b/src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx
@@ -1,6 +1,6 @@
 import { AspectRatio, Box, Group, Skeleton } from '@mantine/core';
 
-const CARD_WIDTH = 120;
+const CARD_WIDTH = 130;
 
 export default function CollectionCardPreviewSkeleton() {
   return (
-- 
2.51.2


From 807b7f96fc5d613bff8635c228c71d6e9fa54e66 Mon Sep 17 00:00:00 2001
From: pdelfan <pdelfan@gmail.com>
Date: Wed, 27 May 2026 12:31:25 -0700
Subject: [PATCH 4/5] feat: lower recent collections filter button radius

---
 .../home/components/recentCollections/RecentCollections.tsx | 3 +++
 .../recentCollections/Skeleton.RecentCollections.tsx        | 6 +++---
 src/webapp/next-env.d.ts                                    | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/webapp/features/home/components/recentCollections/RecentCollections.tsx b/src/webapp/features/home/components/recentCollections/RecentCollections.tsx
index 29a8b994..86528852 100644
--- a/src/webapp/features/home/components/recentCollections/RecentCollections.tsx
+++ b/src/webapp/features/home/components/recentCollections/RecentCollections.tsx
@@ -203,6 +203,7 @@ export default function RecentCollections() {
           variant={filter === 'mine' ? 'filled' : 'light'}
           color="gray"
           size="xs"
+          radius={'md'}
           onClick={() => setFilter('mine')}
         >
           My Collections
@@ -211,6 +212,7 @@ export default function RecentCollections() {
           variant={filter === 'following' ? 'filled' : 'light'}
           color="gray"
           size="xs"
+          radius={'md'}
           onClick={() => setFilter('following')}
         >
           Following
@@ -219,6 +221,7 @@ export default function RecentCollections() {
           variant={filter === 'contributed' ? 'filled' : 'light'}
           color="gray"
           size="xs"
+          radius={'md'}
           onClick={() => setFilter('contributed')}
         >
           Contributed to
diff --git a/src/webapp/features/home/components/recentCollections/Skeleton.RecentCollections.tsx b/src/webapp/features/home/components/recentCollections/Skeleton.RecentCollections.tsx
index 44ec24df..e6220b1c 100644
--- a/src/webapp/features/home/components/recentCollections/Skeleton.RecentCollections.tsx
+++ b/src/webapp/features/home/components/recentCollections/Skeleton.RecentCollections.tsx
@@ -17,9 +17,9 @@ export default function RecentCollectionsSkeleton() {
       </Group>
 
       <Group gap="xs">
-        <Skeleton w={110} h={30} radius={'xl'} />
-        <Skeleton w={82} h={30} radius={'xl'} />
-        <Skeleton w={109} h={30} radius={'xl'} />
+        <Skeleton w={110} h={30} radius={'md'} />
+        <Skeleton w={82} h={30} radius={'md'} />
+        <Skeleton w={109} h={30} radius={'md'} />
       </Group>
 
       <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="xs">
diff --git a/src/webapp/next-env.d.ts b/src/webapp/next-env.d.ts
index 9edff1c7..c4b7818f 100644
--- a/src/webapp/next-env.d.ts
+++ b/src/webapp/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
-- 
2.51.2


From 51cc800408aad1945087bb12aa60b243a8fccc47 Mon Sep 17 00:00:00 2001
From: pdelfan <pdelfan@gmail.com>
Date: Wed, 27 May 2026 12:33:42 -0700
Subject: [PATCH 5/5] feat: don't conditionally show collection creation button
 on recent collections

---
 .../recentCollections/RecentCollections.tsx   | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/webapp/features/home/components/recentCollections/RecentCollections.tsx b/src/webapp/features/home/components/recentCollections/RecentCollections.tsx
index 86528852..d280893f 100644
--- a/src/webapp/features/home/components/recentCollections/RecentCollections.tsx
+++ b/src/webapp/features/home/components/recentCollections/RecentCollections.tsx
@@ -180,18 +180,16 @@ export default function RecentCollections() {
           <Title order={2}>Collections</Title>
         </Group>
         <Group gap="xs">
-          {filter === 'mine' && (
-            <ActionIcon
-              variant="light"
-              color="blue"
-              size={38}
-              radius={'xl'}
-              onClick={() => setShowCollectionDrawer(true)}
-              aria-label="Create collection"
-            >
-              <FiPlus size={18} />
-            </ActionIcon>
-          )}
+          <ActionIcon
+            variant="light"
+            color="blue"
+            size={38}
+            radius={'xl'}
+            onClick={() => setShowCollectionDrawer(true)}
+            aria-label="Create collection"
+          >
+            <FiPlus size={18} />
+          </ActionIcon>
           <LinkButton variant="light" color="blue" href={viewAllHref}>
             View all
           </LinkButton>