diff --git a/src/webapp/features/cards/components/cardFilters/CardFilters.tsx b/src/webapp/features/cards/components/cardFilters/CardFilters.tsx
index b12451ba..9a067043 100644
--- a/src/webapp/features/cards/components/cardFilters/CardFilters.tsx
+++ b/src/webapp/features/cards/components/cardFilters/CardFilters.tsx
@@ -4,7 +4,7 @@ import { Group, Button, Popover, Menu } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
 import {
   createContext,
-  useContext,
+  use,
   useState,
   ReactNode,
   useOptimistic,
@@ -30,7 +30,7 @@ interface FilterContextValue {
 const FilterContext = createContext<FilterContextValue | null>(null);
 
 const useFilterContext = () => {
-  const ctx = useContext(FilterContext);
+  const ctx = use(FilterContext);
   if (!ctx)
     throw new Error('CardFilter components must be wrapped in CardFiltersRoot');
   return ctx;
@@ -42,7 +42,7 @@ export function CardFiltersRoot(props: { children: ReactNode }) {
   const router = useRouter();
 
   return (
-    <FilterContext.Provider
+    <FilterContext
       value={{
         router,
         searchParams,
@@ -56,7 +56,7 @@ export function CardFiltersRoot(props: { children: ReactNode }) {
         </Menu.Target>
         <Menu.Dropdown w={200}>{props.children}</Menu.Dropdown>
       </Menu>
-    </FilterContext.Provider>
+    </FilterContext>
   );
 }
 
diff --git a/src/webapp/features/cards/components/imageCard/ImageCard.stories.tsx b/src/webapp/features/cards/components/imageCard/ImageCard.stories.tsx
index 8e9b6e2d..3dc9b637 100644
--- a/src/webapp/features/cards/components/imageCard/ImageCard.stories.tsx
+++ b/src/webapp/features/cards/components/imageCard/ImageCard.stories.tsx
@@ -64,11 +64,11 @@ const meta: Meta<typeof ImageCard> = {
   component: ImageCard,
   decorators: [
     (Story) => (
-      <AuthContext.Provider value={mockAuthValue}>
+      <AuthContext value={mockAuthValue}>
         <div style={{ maxWidth: 360 }}>
           <Story />
         </div>
-      </AuthContext.Provider>
+      </AuthContext>
     ),
   ],
   args: {
diff --git a/src/webapp/features/cards/components/textCard/TextCard.stories.tsx b/src/webapp/features/cards/components/textCard/TextCard.stories.tsx
index f46f3d59..f1c626b3 100644
--- a/src/webapp/features/cards/components/textCard/TextCard.stories.tsx
+++ b/src/webapp/features/cards/components/textCard/TextCard.stories.tsx
@@ -62,11 +62,11 @@ const meta: Meta<typeof TextCard> = {
   component: TextCard,
   decorators: [
     (Story) => (
-      <AuthContext.Provider value={mockAuthValue}>
+      <AuthContext value={mockAuthValue}>
         <div style={{ maxWidth: 360 }}>
           <Story />
         </div>
-      </AuthContext.Provider>
+      </AuthContext>
     ),
   ],
   args: {
diff --git a/src/webapp/features/cards/components/urlCard/UrlCard.stories.tsx b/src/webapp/features/cards/components/urlCard/UrlCard.stories.tsx
index 09d861a0..2e95bc38 100644
--- a/src/webapp/features/cards/components/urlCard/UrlCard.stories.tsx
+++ b/src/webapp/features/cards/components/urlCard/UrlCard.stories.tsx
@@ -69,11 +69,11 @@ const meta: Meta<typeof UrlCard> = {
   component: UrlCard,
   decorators: [
     (Story) => (
-      <AuthContext.Provider value={mockAuthValue}>
+      <AuthContext value={mockAuthValue}>
         <div style={{ maxWidth: 400 }}>
           <Story />
         </div>
-      </AuthContext.Provider>
+      </AuthContext>
     ),
   ],
   args: {
diff --git a/src/webapp/features/collections/components/collectionFilters/CollectionFilters.tsx b/src/webapp/features/collections/components/collectionFilters/CollectionFilters.tsx
index c7e91fb1..c9f3d54c 100644
--- a/src/webapp/features/collections/components/collectionFilters/CollectionFilters.tsx
+++ b/src/webapp/features/collections/components/collectionFilters/CollectionFilters.tsx
@@ -4,7 +4,7 @@ import { Button, Menu } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
 import {
   createContext,
-  useContext,
+  use,
   ReactNode,
   Fragment,
   useOptimistic,
@@ -26,7 +26,7 @@ interface FilterContextValue {
 const FilterContext = createContext<FilterContextValue | null>(null);
 
 const useFilterContext = () => {
-  const ctx = useContext(FilterContext);
+  const ctx = use(FilterContext);
   if (!ctx)
     throw new Error(
       'CollectionFilter components must be wrapped in CollectionFiltersRoot',
@@ -40,7 +40,7 @@ export function CollectionFiltersRoot(props: { children: ReactNode }) {
   const router = useRouter();
 
   return (
-    <FilterContext.Provider value={{ router, searchParams }}>
+    <FilterContext value={{ router, searchParams }}>
       <Menu shadow="sm">
         <Menu.Target>
           <Button variant="light" color="gray" leftSection={<MdFilterList />}>
@@ -49,7 +49,7 @@ export function CollectionFiltersRoot(props: { children: ReactNode }) {
         </Menu.Target>
         <Menu.Dropdown w={200}>{props.children}</Menu.Dropdown>
       </Menu>
-    </FilterContext.Provider>
+    </FilterContext>
   );
 }
 
diff --git a/src/webapp/features/connections/components/connectionFilters/ConnectionFilters.tsx b/src/webapp/features/connections/components/connectionFilters/ConnectionFilters.tsx
index 8ac5989b..c9fad0fe 100644
--- a/src/webapp/features/connections/components/connectionFilters/ConnectionFilters.tsx
+++ b/src/webapp/features/connections/components/connectionFilters/ConnectionFilters.tsx
@@ -3,7 +3,7 @@
 import { Group, Button, Menu } from '@mantine/core';
 import {
   createContext,
-  useContext,
+  use,
   ReactNode,
   useOptimistic,
   useTransition,
@@ -22,7 +22,7 @@ interface FilterContextValue {
 const FilterContext = createContext<FilterContextValue | null>(null);
 
 const useFilterContext = () => {
-  const ctx = useContext(FilterContext);
+  const ctx = use(FilterContext);
   if (!ctx)
     throw new Error(
       'ConnectionFilter components must be wrapped in ConnectionFilters.Root',
@@ -39,7 +39,7 @@ interface RootProps {
 
 export function Root(props: RootProps) {
   return (
-    <FilterContext.Provider
+    <FilterContext
       value={{
         connectionType: props.connectionType,
         onConnectionTypeChange: props.onConnectionTypeChange,
@@ -55,7 +55,7 @@ export function Root(props: RootProps) {
           {props.children}
         </Menu.Dropdown>
       </Menu>
-    </FilterContext.Provider>
+    </FilterContext>
   );
 }
 
diff --git a/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx b/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
index 6a625fa3..72d9aafb 100644
--- a/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
+++ b/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
@@ -85,10 +85,7 @@ export default function NotificationItem(props: Props) {
                 <Group gap="xs" wrap="nowrap">
                   {notification.item.collections.map((collection) => (
                     <Box key={collection.id} miw={'100%'} w={'100%'}>
-                      <CollectionCard
-                        collection={collection}
-                        size="compact"
-                      />
+                      <CollectionCard collection={collection} size="compact" />
                     </Box>
                   ))}
                 </Group>
diff --git a/src/webapp/features/profile/components/profileMenu/ProfileMenu.stories.tsx b/src/webapp/features/profile/components/profileMenu/ProfileMenu.stories.tsx
index 9377b5f0..768f27ba 100644
--- a/src/webapp/features/profile/components/profileMenu/ProfileMenu.stories.tsx
+++ b/src/webapp/features/profile/components/profileMenu/ProfileMenu.stories.tsx
@@ -43,7 +43,7 @@ const meta: Meta<typeof ProfileMenu> = {
   component: ProfileMenu,
   decorators: [
     (Story) => (
-      <AuthContext.Provider value={mockAuthContext}>
+      <AuthContext value={mockAuthContext}>
         <QueryCacheSeed profile={mockProfile}>
           <Suspense
             fallback={<MantineSkeleton w={38} h={38} radius="md" ml={4} />}
@@ -53,7 +53,7 @@ const meta: Meta<typeof ProfileMenu> = {
             </div>
           </Suspense>
         </QueryCacheSeed>
-      </AuthContext.Provider>
+      </AuthContext>
     ),
   ],
 };
@@ -69,7 +69,7 @@ export const Default: Story = {};
 export const BotAccount: Story = {
   decorators: [
     (Story) => (
-      <AuthContext.Provider value={mockAuthContext}>
+      <AuthContext value={mockAuthContext}>
         <QueryCacheSeed
           profile={{
             ...mockProfile,
@@ -95,7 +95,7 @@ export const BotAccount: Story = {
             </div>
           </Suspense>
         </QueryCacheSeed>
-      </AuthContext.Provider>
+      </AuthContext>
     ),
   ],
 };
diff --git a/src/webapp/features/search/components/searchFilters/SearchFilters.tsx b/src/webapp/features/search/components/searchFilters/SearchFilters.tsx
index f76d9768..c9c15e55 100644
--- a/src/webapp/features/search/components/searchFilters/SearchFilters.tsx
+++ b/src/webapp/features/search/components/searchFilters/SearchFilters.tsx
@@ -26,7 +26,7 @@ import { TbAdjustmentsHorizontal } from 'react-icons/tb';
 import { useDebouncedValue, upperFirst } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { createContext, useContext, useState, ReactNode } from 'react';
+import { createContext, use, useState, ReactNode } from 'react';
 import { searchBlueskyUsers } from '@/features/platforms/bluesky/lib/dal';
 import { UPDATE_OVERLAY_PROPS } from '@/styles/overlays';
 import { UrlType, CollectionAccessType } from '@semble/types';
@@ -58,7 +58,7 @@ interface FilterContextValue {
 const FilterContext = createContext<FilterContextValue | null>(null);
 
 const useFilterContext = () => {
-  const ctx = useContext(FilterContext);
+  const ctx = use(FilterContext);
   if (!ctx)
     throw new Error(
       'SearchFilter components must be wrapped in SearchFilter.Root',
@@ -114,7 +114,7 @@ export function Root(props: { children: ReactNode; trigger?: ReactNode }) {
   ) : null;
 
   return (
-    <FilterContext.Provider
+    <FilterContext
       value={{
         opened,
         setOpened,
@@ -156,7 +156,7 @@ export function Root(props: { children: ReactNode; trigger?: ReactNode }) {
           <Stack gap="xl">{props.children}</Stack>
         </Container>
       </Drawer>
-    </FilterContext.Provider>
+    </FilterContext>
   );
 }
 
diff --git a/src/webapp/hooks/useAuth.tsx b/src/webapp/hooks/useAuth.tsx
index 2b27c0f9..0ed3d11d 100644
--- a/src/webapp/hooks/useAuth.tsx
+++ b/src/webapp/hooks/useAuth.tsx
@@ -3,7 +3,7 @@
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   ReactNode,
@@ -99,13 +99,11 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     [query.data, query.isLoading, refreshAuth, logout],
   );
 
-  return (
-    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
-  );
+  return <AuthContext value={contextValue}>{children}</AuthContext>;
 };
 
 export const useAuth = (): AuthContextType => {
-  const context = useContext(AuthContext);
+  const context = use(AuthContext);
   if (!context) {
     throw new Error('useAuth must be used within an AuthProvider');
   }
diff --git a/src/webapp/lib/embed/rpcSessionProvider.tsx b/src/webapp/lib/embed/rpcSessionProvider.tsx
index da777e73..39d5628d 100644
--- a/src/webapp/lib/embed/rpcSessionProvider.tsx
+++ b/src/webapp/lib/embed/rpcSessionProvider.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { createContext, use, useEffect, useRef, useState } from 'react';
 import { newMessagePortRpcSession, type RpcStub } from 'capnweb';
 
 type EmbedBlockData =
@@ -68,13 +68,9 @@ export function RpcSessionProvider({
     };
   }, [session]);
 
-  return (
-    <RpcSessionContext.Provider value={session}>
-      {children}
-    </RpcSessionContext.Provider>
-  );
+  return <RpcSessionContext value={session}>{children}</RpcSessionContext>;
 }
 
 export function useRpcSession() {
-  return useContext(RpcSessionContext);
+  return use(RpcSessionContext);
 }
diff --git a/src/webapp/next-env.d.ts b/src/webapp/next-env.d.ts
index c4b7818f..9edff1c7 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/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/webapp/providers/navHistory.tsx b/src/webapp/providers/navHistory.tsx
index d8ea4789..84f698ea 100644
--- a/src/webapp/providers/navHistory.tsx
+++ b/src/webapp/providers/navHistory.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, use, useEffect, useState } from 'react';
 import { usePathname } from 'next/navigation';
 
 interface NavHistoryContext {
@@ -30,16 +30,16 @@ export function NavHistoryProvider(props: Props) {
   }, [pathname, currentPath]);
 
   return (
-    <NavHistoryContext.Provider
+    <NavHistoryContext
       value={{ previousPath, canGoBack: previousPath !== null }}
     >
       {props.children}
-    </NavHistoryContext.Provider>
+    </NavHistoryContext>
   );
 }
 
 export function useNavHistory() {
-  const context = useContext(NavHistoryContext);
+  const context = use(NavHistoryContext);
 
   if (!context) {
     throw new Error('useNavHistory must be used within a NavHistoryProvider');
diff --git a/src/webapp/providers/navbar.tsx b/src/webapp/providers/navbar.tsx
index fbdf0e38..5f40906f 100644
--- a/src/webapp/providers/navbar.tsx
+++ b/src/webapp/providers/navbar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext } from 'react';
+import React, { createContext, use } from 'react';
 import { useLocalStorage } from '@mantine/hooks';
 
 interface NavbarContext {
@@ -36,16 +36,16 @@ export function NavbarProvider(props: Props) {
   const toggleDesktop = () => setDesktopOpened((o) => !o);
 
   return (
-    <NavbarContext.Provider
+    <NavbarContext
       value={{ mobileOpened, desktopOpened, toggleMobile, toggleDesktop }}
     >
       {props.children}
-    </NavbarContext.Provider>
+    </NavbarContext>
   );
 }
 
 export function useNavbarContext() {
-  const context = useContext(NavbarContext);
+  const context = use(NavbarContext);
 
   if (!context) {
     throw new Error('useNavbarContext must be used within a NavbarProvider');
diff --git a/src/webapp/providers/settings.tsx b/src/webapp/providers/settings.tsx
index 0c420cea..04fac99f 100644
--- a/src/webapp/providers/settings.tsx
+++ b/src/webapp/providers/settings.tsx
@@ -1,5 +1,5 @@
 import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
 const SettingsContext = createContext<ReturnType<
   typeof useUserSettings
@@ -11,15 +11,11 @@ interface Props {
 
 export function SettingsProvider(props: Props) {
   const settings = useUserSettings();
-  return (
-    <SettingsContext.Provider value={settings}>
-      {props.children}
-    </SettingsContext.Provider>
-  );
+  return <SettingsContext value={settings}>{props.children}</SettingsContext>;
 }
 
 export function useSettings() {
-  const ctx = useContext(SettingsContext);
+  const ctx = use(SettingsContext);
   if (!ctx) throw new Error('useSettings must be used inside SettingsProvider');
   return ctx;
 }