diff --git a/src/webapp/components/landing/navMenu/NavMenu.tsx b/src/webapp/components/landing/navMenu/NavMenu.tsx
index 625aabc4..c09405e8 100644
--- a/src/webapp/components/landing/navMenu/NavMenu.tsx
+++ b/src/webapp/components/landing/navMenu/NavMenu.tsx
@@ -1,19 +1,18 @@
 'use client';
 
-import { Group, Button, ScrollAreaAutosize } from '@mantine/core';
-import { useDisclosure, useOs } from '@mantine/hooks';
+import { Group, Button, Scroller } from '@mantine/core';
+import { useOs } from '@mantine/hooks';
 import { LinkButton } from '@/components/link/MantineLink';
 
 const IOS_SHORTCUT_HREF =
   'https://www.icloud.com/shortcuts/9c4b4b4bc4ef4d6d93513c59373b0af6';
 
 export default function NavMenu() {
-  const [opened, { toggle }] = useDisclosure(false);
   const os = useOs();
   const isIos = os === 'ios';
 
   return (
-    <ScrollAreaAutosize>
+    <Scroller>
       <Group gap="xs">
         <Button
           data-tally-open="31a9Ng"
@@ -39,6 +38,6 @@ export default function NavMenu() {
           </LinkButton>
         )}
       </Group>
-    </ScrollAreaAutosize>
+    </Scroller>
   );
 }
diff --git a/src/webapp/features/cards/components/addCardDrawer/AddCardForm.tsx b/src/webapp/features/cards/components/addCardDrawer/AddCardForm.tsx
index a8952d69..52f51c07 100644
--- a/src/webapp/features/cards/components/addCardDrawer/AddCardForm.tsx
+++ b/src/webapp/features/cards/components/addCardDrawer/AddCardForm.tsx
@@ -6,7 +6,6 @@ import {
   Flex,
   Group,
   Input,
-  ScrollArea,
   Stack,
   Text,
   Textarea,
@@ -14,6 +13,7 @@ import {
   ThemeIcon,
   VisuallyHidden,
   Container,
+  Scroller,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
@@ -163,11 +163,7 @@ export default function AddCardForm(props: Props) {
               {selectedCollections.length > 0 &&
                 `(${selectedCollections.length})`}
             </Text>
-            <ScrollArea.Autosize
-              type="hover"
-              scrollbars="x"
-              offsetScrollbars={true}
-            >
+            <Scroller>
               <Group gap={'xs'} wrap="nowrap">
                 <Button
                   disabled={addCard.isPending}
@@ -228,7 +224,7 @@ export default function AddCardForm(props: Props) {
                   );
                 })}
               </Group>
-            </ScrollArea.Autosize>
+            </Scroller>
           </Stack>
 
           <Group justify="space-between" gap={'xs'} grow>
diff --git a/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx b/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx
index 3ead8cd7..1702afd2 100644
--- a/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx
+++ b/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx
@@ -8,7 +8,7 @@ import {
   FocusTrap,
   Tabs,
   ThemeIcon,
-  ScrollAreaAutosize,
+  Scroller,
 } from '@mantine/core';
 import CollectionSelectorMyCollections from '../collectionSelectorMyCollections/CollectionSelectorMyCollections';
 import CollectionSelectorOpenCollections from '../collectionSelectorOpenCollections/CollectionSelectorOpenCollections';
@@ -32,8 +32,8 @@ export default function CollectionSelector(props: Props) {
     <Stack gap={'xl'}>
       <FocusTrap.InitialFocus />
       <Tabs defaultValue={'myCollections'} keepMounted={false}>
-        <ScrollAreaAutosize type="scroll">
-          <Tabs.List grow mb={'xs'} style={{ flexWrap: 'nowrap' }}>
+        <Tabs.List grow mb={'xs'} style={{ flexWrap: 'nowrap' }}>
+          <Scroller>
             <Tabs.Tab classNames={classes} value="myCollections">
               My Collections
             </Tabs.Tab>
@@ -70,8 +70,9 @@ export default function CollectionSelector(props: Props) {
             >
               AtmosphereConf
             </Tabs.Tab>
-          </Tabs.List>
-        </ScrollAreaAutosize>
+          </Scroller>
+        </Tabs.List>
+
         <Tabs.Panel value="myCollections">
           <Suspense>
             <CollectionSelectorMyCollections
diff --git a/src/webapp/features/collections/components/collectionTabs/CollectionTabs.tsx b/src/webapp/features/collections/components/collectionTabs/CollectionTabs.tsx
index 032045e0..8d1b745f 100644
--- a/src/webapp/features/collections/components/collectionTabs/CollectionTabs.tsx
+++ b/src/webapp/features/collections/components/collectionTabs/CollectionTabs.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Group, Paper, ScrollAreaAutosize, Tabs } from '@mantine/core';
+import { Group, Paper, Scroller, Tabs } from '@mantine/core';
 import { usePathname } from 'next/navigation';
 import TabItem from './TabItem';
 import ContributorTab from './ContributorTab';
@@ -19,8 +19,8 @@ export default function CollectionTabs(props: Props) {
   return (
     <Tabs value={currentTab}>
       <Paper radius={0}>
-        <ScrollAreaAutosize type="scroll">
-          <Tabs.List>
+        <Tabs.List>
+          <Scroller>
             <Group wrap="nowrap">
               <TabItem value="cards" href={basePath}>
                 Cards
@@ -34,8 +34,8 @@ export default function CollectionTabs(props: Props) {
                 basePath={basePath}
               />
             </Group>
-          </Tabs.List>
-        </ScrollAreaAutosize>
+          </Scroller>
+        </Tabs.List>
       </Paper>
     </Tabs>
   );
diff --git a/src/webapp/features/composer/components/Composer.tsx b/src/webapp/features/composer/components/Composer.tsx
index a22b53bf..625de9ee 100644
--- a/src/webapp/features/composer/components/Composer.tsx
+++ b/src/webapp/features/composer/components/Composer.tsx
@@ -8,7 +8,6 @@ import {
   Flex,
   Group,
   Input,
-  ScrollArea,
   Select,
   Stack,
   SegmentedControl,
@@ -17,6 +16,7 @@ import {
   TextInput,
   ThemeIcon,
   VisuallyHidden,
+  Scroller,
 } from '@mantine/core';
 import { useState, useEffect, Suspense } from 'react';
 import { Collection, CollectionAccessType } from '@semble/types';
@@ -314,11 +314,7 @@ export default function Composer(props: Props) {
                     {selectedCollections.length > 0 &&
                       `(${selectedCollections.length})`}
                   </Text>
-                  <ScrollArea.Autosize
-                    type="hover"
-                    scrollbars="x"
-                    offsetScrollbars={true}
-                  >
+                  <Scroller>
                     <Group gap={'xs'} wrap="nowrap">
                       <Button
                         onClick={toggleCollectionSelector}
@@ -383,7 +379,7 @@ export default function Composer(props: Props) {
                         );
                       })}
                     </Group>
-                  </ScrollArea.Autosize>
+                  </Scroller>
                 </Stack>
 
                 <Group
diff --git a/src/webapp/features/feeds/components/feedControls/FeedControls.tsx b/src/webapp/features/feeds/components/feedControls/FeedControls.tsx
index 17a95d70..2be1e62f 100644
--- a/src/webapp/features/feeds/components/feedControls/FeedControls.tsx
+++ b/src/webapp/features/feeds/components/feedControls/FeedControls.tsx
@@ -1,13 +1,6 @@
 'use client';
 
-import {
-  ScrollAreaAutosize,
-  Button,
-  Group,
-  Menu,
-  Image,
-  Popover,
-} from '@mantine/core';
+import { Button, Group, Menu, Image, Popover, Scroller } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { ActivitySource, UrlType, ActivityType } from '@semble/types';
 import { useOptimistic, useState, useTransition } from 'react';
@@ -190,8 +183,8 @@ export default function FeedControls() {
     optimisticType === null ? MdFilterList : getUrlTypeIcon(optimisticType);
 
   return (
-    <ScrollAreaAutosize type="scroll" offsetScrollbars={'present'}>
-      <Group gap={'xs'} justify="space-between" wrap="nowrap">
+    <Group gap={'xs'} justify="space-between" wrap="nowrap">
+      <Scroller>
         <Menu width={200} position="bottom-start">
           <Menu.Target>
             <Button variant="light" color="cyan" leftSection={<MdFilterList />}>
@@ -351,25 +344,25 @@ export default function FeedControls() {
             )}
           </Menu.Dropdown>
         </Menu>
-
-        <Group gap={'xs'}>
-          <LinkButton
-            href={'/explore/open-collections'}
-            color="green"
-            variant="light"
-          >
-            <FaSeedling />
-          </LinkButton>
-          <LinkButton
-            href={'/explore/atmosphereConf-collections'}
-            color="#4098FF"
-            variant="light"
-            fz={'md'}
-          >
-            🪿
-          </LinkButton>
-        </Group>
+      </Scroller>
+
+      <Group gap={'xs'} wrap="nowrap">
+        <LinkButton
+          href={'/explore/open-collections'}
+          color="green"
+          variant="light"
+        >
+          <FaSeedling />
+        </LinkButton>
+        <LinkButton
+          href={'/explore/atmosphereConf-collections'}
+          color="blue"
+          variant="light"
+          fz={'md'}
+        >
+          🪿
+        </LinkButton>
       </Group>
-    </ScrollAreaAutosize>
+    </Group>
   );
 }
diff --git a/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx b/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
index bf3d561d..5ba5f42c 100644
--- a/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
+++ b/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Group, Paper, ScrollAreaAutosize, Tabs } from '@mantine/core';
+import { Paper, Scroller, Tabs } from '@mantine/core';
 import TabItem from './TabItem';
 import { usePathname } from 'next/navigation';
 import { useFeatureFlags } from '@/lib/clientFeatureFlags';
@@ -24,8 +24,8 @@ export default function ProfileTabs(props: Props) {
   return (
     <Tabs value={currentTab}>
       <Paper radius={0}>
-        <ScrollAreaAutosize type="scroll">
-          <Tabs.List style={{ flexWrap: 'nowrap' }}>
+        <Tabs.List style={{ flexWrap: 'nowrap' }}>
+          <Scroller>
             <TabItem value="profile" href={basePath}>
               Profile
             </TabItem>
@@ -58,8 +58,8 @@ export default function ProfileTabs(props: Props) {
                 Graph
               </TabItem>
             )}
-          </Tabs.List>
-        </ScrollAreaAutosize>
+          </Scroller>
+        </Tabs.List>
       </Paper>
     </Tabs>
   );
diff --git a/src/webapp/features/search/components/searchTabs/SearchTabs.tsx b/src/webapp/features/search/components/searchTabs/SearchTabs.tsx
index 11b64dfe..541e6bf6 100644
--- a/src/webapp/features/search/components/searchTabs/SearchTabs.tsx
+++ b/src/webapp/features/search/components/searchTabs/SearchTabs.tsx
@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  Tabs,
-  Stack,
-  ScrollAreaAutosize,
-  TabsList,
-  Group,
-} from '@mantine/core';
+import { Tabs, Stack, Scroller, TabsList, Group } from '@mantine/core';
 import { BiCollection } from 'react-icons/bi';
 import { FaRegNoteSticky } from 'react-icons/fa6';
 import { MdOutlinePeopleAlt } from 'react-icons/md';
@@ -49,8 +43,8 @@ export default function SearchTabs() {
       <Stack gap="xs">
         <SearchBar query={query} />
 
-        <ScrollAreaAutosize type="scroll">
-          <TabsList>
+        <TabsList>
+          <Scroller>
             <Group gap={0} wrap="nowrap">
               <SearchTabItem
                 value="cards"
@@ -68,8 +62,8 @@ export default function SearchTabs() {
                 icon={<MdOutlinePeopleAlt />}
               />
             </Group>
-          </TabsList>
-        </ScrollAreaAutosize>
+          </Scroller>
+        </TabsList>
       </Stack>
     </Tabs>
   );
diff --git a/src/webapp/features/semble/components/sembleTabs/SembleTabs.tsx b/src/webapp/features/semble/components/sembleTabs/SembleTabs.tsx
index e104066a..c82fed7f 100644
--- a/src/webapp/features/semble/components/sembleTabs/SembleTabs.tsx
+++ b/src/webapp/features/semble/components/sembleTabs/SembleTabs.tsx
@@ -1,13 +1,7 @@
 'use client';
 
 import { useState, Suspense } from 'react';
-import {
-  Box,
-  ScrollAreaAutosize,
-  Tabs,
-  TabsList,
-  TabsPanel,
-} from '@mantine/core';
+import { Box, Scroller, Tabs, TabsList, TabsPanel } from '@mantine/core';
 import TabItem from './TabItem';
 import { useFeatureFlags } from '@/lib/clientFeatureFlags';
 import useUrlMetadata from '@/features/cards/lib/queries/useUrlMetadata';
@@ -59,8 +53,8 @@ export default function SembleTabs(props: Props) {
       value={activeTab}
       onChange={(val) => setActiveTab(val as TabValue)}
     >
-      <ScrollAreaAutosize type="scroll">
-        <TabsList style={{ flexWrap: 'nowrap' }}>
+      <TabsList style={{ flexWrap: 'nowrap' }}>
+        <Scroller>
           <TabItem value="similar">Similar cards</TabItem>
           <TabItem value="collections" count={stats?.collectionCount}>
             Collections
@@ -76,8 +70,8 @@ export default function SembleTabs(props: Props) {
             Added by
           </TabItem>
           {featureFlags?.graphView && <TabItem value="graph">Graph</TabItem>}
-        </TabsList>
-      </ScrollAreaAutosize>
+        </Scroller>
+      </TabsList>
 
       <Box mt="md">
         <TabsPanel value="notes">
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.