diff --git a/package.json b/package.json
index 5d1773107..1eac92e6d 100644
--- a/package.json
+++ b/package.json
@@ -132,6 +132,7 @@
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@tanstack/router-plugin": "1.95.1",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d26d9649..de1411916 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -243,6 +243,9 @@ importers:
       '@tanstack/router-plugin':
         specifier: 1.95.1
         version: 1.95.1(@tanstack/react-router@1.95.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(terser@5.37.0)(tsx@4.19.2))(webpack@5.97.1(esbuild@0.24.2))
+      '@testing-library/dom':
+        specifier: 10.4.0
+        version: 10.4.0
       '@testing-library/jest-dom':
         specifier: 6.6.3
         version: 6.6.3
diff --git a/src/locales/en/map.json b/src/locales/en/map.json
index b36ebc3d8..19f4519df 100644
--- a/src/locales/en/map.json
+++ b/src/locales/en/map.json
@@ -20,5 +20,6 @@
   "Select a country": "Select a country",
   "VIEW_ITEM_BUILDER_TOOLTIP": "View item in Graasp Builder",
   "VIEW_ITEM_PLAYER_TOOLTIP": "View item in Graasp Player",
-  "FUNCTIONALITIES_REDUCED_FOR_LOGGED_OUT_MESSAGE": "Some functionalities are disabled for logged out users."
+  "FUNCTIONALITIES_REDUCED_FOR_LOGGED_OUT_MESSAGE": "Some functionalities are disabled for logged out users.",
+  "Add a new item at this location": "Add a new item at this location"
 }
diff --git a/src/modules/builder/components/main/NotificationButton.tsx b/src/modules/builder/components/main/NotificationButton.tsx
index 354e93fc7..0b2532c55 100644
--- a/src/modules/builder/components/main/NotificationButton.tsx
+++ b/src/modules/builder/components/main/NotificationButton.tsx
@@ -1,4 +1,5 @@
-// import { MentionButton } from '@graasp/chatbox';
+import { MentionButton } from '@graasp/chatbox';
+
 import { hooks, mutations } from '@/config/queryClient';
 
 export function NotificationButton(): JSX.Element | null {
@@ -27,13 +28,13 @@ export function NotificationButton(): JSX.Element | null {
   const clearAllMentionsFunction = () => clearAllMentionsMutate();
 
   return (
-    // <MentionButton
-    //   color="white"
-    //   badgeColor="primary"
-    //   useMentions={hooks.useMentions}
-    //   patchMentionFunction={patchMentionFunction}
-    //   deleteMentionFunction={deleteMentionFunction}
-    //   clearAllMentionsFunction={clearAllMentionsFunction}
-    // />
+    <MentionButton
+      color="white"
+      badgeColor="primary"
+      useMentions={hooks.useMentions}
+      patchMentionFunction={patchMentionFunction}
+      deleteMentionFunction={deleteMentionFunction}
+      clearAllMentionsFunction={clearAllMentionsFunction}
+    />
   );
 }
diff --git a/src/modules/builder/map/components/GeolocationPicker/GeolocationPicker.stories.tsx b/src/modules/builder/map/components/GeolocationPicker/GeolocationPicker.stories.tsx
index efbf09b02..7c637b3d1 100644
--- a/src/modules/builder/map/components/GeolocationPicker/GeolocationPicker.stories.tsx
+++ b/src/modules/builder/map/components/GeolocationPicker/GeolocationPicker.stories.tsx
@@ -1,12 +1,11 @@
 import { TextField } from '@mui/material';
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { BoundFunctions } from '@testing-library/dom';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { queries } from '@testing-library/dom';
 
-import { MOCK_USE_SUGGESTIONS } from '../../../.storybook/fixtures';
+import { MOCK_USE_SUGGESTIONS } from '../../fixture';
 import GeolocationPicker from './GeolocationPicker';
 
 const meta = {
@@ -79,8 +78,8 @@ export const Background = {
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByLabelText('Geolocation')).toHaveTextContent(
-      args.initialValue!,
+    expect(canvas.getByLabelText('Geolocation')).toHaveTextContent(
+      'initial value',
     );
 
     await checkSuggestions(canvas);
diff --git a/src/modules/builder/map/components/Map.stories.tsx b/src/modules/builder/map/components/Map.stories.tsx
index 0afd02f37..ae0a66949 100644
--- a/src/modules/builder/map/components/Map.stories.tsx
+++ b/src/modules/builder/map/components/Map.stories.tsx
@@ -7,21 +7,9 @@ import {
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
+import { MOCK_USE_SUGGESTIONS } from '../fixture';
 import MapComponent from './Map';
 
-const MOCK_USE_SUGGESTIONS = ({ address }: { address: string }) => {
-  if (address) {
-    return {
-      data: [
-        { addressLabel: 'suggestion 1' },
-        { addressLabel: 'suggestion 2' },
-        { addressLabel: 'suggestion 3' },
-      ],
-    };
-  }
-  return { data: undefined };
-};
-
 const meta = {
   title: 'Map',
   component: MapComponent,
diff --git a/src/modules/builder/map/fixture.ts b/src/modules/builder/map/fixture.ts
new file mode 100644
index 000000000..61b804a5f
--- /dev/null
+++ b/src/modules/builder/map/fixture.ts
@@ -0,0 +1,12 @@
+export const MOCK_USE_SUGGESTIONS = ({ address }: { address: string }) => {
+  if (address) {
+    return {
+      data: [
+        { addressLabel: 'suggestion 1' },
+        { addressLabel: 'suggestion 2' },
+        { addressLabel: 'suggestion 3' },
+      ],
+    };
+  }
+  return { data: undefined };
+};
diff --git a/src/ui/Authorization/PreventGuestWrapper.stories.tsx b/src/ui/Authorization/PreventGuestWrapper.stories.tsx
index 8eb64889a..874d09a2b 100644
--- a/src/ui/Authorization/PreventGuestWrapper.stories.tsx
+++ b/src/ui/Authorization/PreventGuestWrapper.stories.tsx
@@ -1,9 +1,9 @@
+import { AccountType, CompleteGuest, CompleteMember } from '@graasp/sdk';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, within } from '@storybook/test';
 
-import { AccountType, CompleteGuest, CompleteMember } from '@graasp/sdk';
-
-import BuildIcon from '@/icons/BuildIcon.js';
+import BuildIcon from '@/ui/icons/BuildIcon.js';
 
 import PreventGuestWrapper from './PreventGuestWrapper.js';
 
@@ -17,7 +17,7 @@ const meta = {
     errorText: 'An error occured.',
     text: 'You are currently using Graasp with a guest account. In order to use all features of Graasp, you have to log out and create a Graasp account.',
     children: (
-      <div data-testid='content'>
+      <div data-testid="content">
         <BuildIcon />
         <BuildIcon />
         <BuildIcon />
diff --git a/src/ui/Authorization/Redirect.stories.tsx b/src/ui/Authorization/Redirect.stories.tsx
index 606beca21..92c540890 100644
--- a/src/ui/Authorization/Redirect.stories.tsx
+++ b/src/ui/Authorization/Redirect.stories.tsx
@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, within } from '@storybook/test';
 
-import { BrowserRouter } from 'react-router-dom';
-
 import SignedInWrapper from './SignedInWrapper.js';
 
 // this story is separated from the others
@@ -19,15 +17,10 @@ const meta: Meta<typeof SignedInWrapper> = {
     },
   },
   render: () => (
-    <SignedInWrapper redirectionLink=''>
+    <SignedInWrapper redirectionLink="">
       <div />
     </SignedInWrapper>
   ),
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
 };
 export default meta;
 
diff --git a/src/ui/Authorization/SignedInWrapper.stories.tsx b/src/ui/Authorization/SignedInWrapper.stories.tsx
index a83435bef..02110f770 100644
--- a/src/ui/Authorization/SignedInWrapper.stories.tsx
+++ b/src/ui/Authorization/SignedInWrapper.stories.tsx
@@ -1,9 +1,9 @@
+import { CompleteMember } from '@graasp/sdk';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, within } from '@storybook/test';
 
-import { CompleteMember } from '@graasp/sdk';
-
-import BuildIcon from '@/icons/BuildIcon.js';
+import BuildIcon from '@/ui/icons/BuildIcon.js';
 
 import SignedInWrapper from './SignedInWrapper.js';
 
@@ -19,7 +19,7 @@ const meta: Meta<typeof SignedInWrapper> = {
   args: {
     redirectionLink,
     children: (
-      <div data-testid='content'>
+      <div data-testid="content">
         <BuildIcon />
         <BuildIcon />
         <BuildIcon />
diff --git a/src/ui/Card/Card.stories.tsx b/src/ui/Card/Card.stories.tsx
index 180ca5849..a28e7533b 100644
--- a/src/ui/Card/Card.stories.tsx
+++ b/src/ui/Card/Card.stories.tsx
@@ -1,11 +1,9 @@
+import { Box, IconButton, Stack } from '@mui/material';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { Grip, Snowflake } from 'lucide-react';
 
-import { Box, IconButton, Stack } from '@mui/material';
-
-import { BrowserRouter } from 'react-router-dom';
-
 import ItemBadges from '../ItemBadges/ItemBadges.js';
 import { TABLE_CATEGORIES } from '../utils/storybook.js';
 import Card from './Card.js';
@@ -40,10 +38,10 @@ export const Example: Story = {
     creator: 'graasp',
     footer: (
       <Stack
-        width='100%'
-        alignItems='end'
-        direction='row'
-        justifyContent='space-between'
+        width="100%"
+        alignItems="end"
+        direction="row"
+        justifyContent="space-between"
       >
         <Box>
           <IconButton>
@@ -93,11 +91,6 @@ export const Dense: Story = {
       </IconButton>
     ),
   },
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
 } satisfies Story;
 
 export const FullWidth = {
@@ -116,10 +109,10 @@ export const FullWidth = {
 
     footer: (
       <Stack
-        width='100%'
-        alignItems='center'
-        direction='row'
-        justifyContent='space-between'
+        width="100%"
+        alignItems="center"
+        direction="row"
+        justifyContent="space-between"
       >
         <ItemBadges isHidden isPublic isPublished isPinned />
         <Box>
@@ -168,10 +161,10 @@ export const TallCard: Story = {
     height: 300,
     footer: (
       <Stack
-        width='100%'
-        alignItems='center'
-        direction='row'
-        justifyContent='space-between'
+        width="100%"
+        alignItems="center"
+        direction="row"
+        justifyContent="space-between"
       >
         <ItemBadges isHidden isPublic isPublished isPinned />
         <Box>
@@ -206,11 +199,6 @@ export const DenseMobile: Story = {
     alt: 'graasp',
     footer: 'myfooter',
   },
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
 } satisfies Story;
 
 export const Selected: Story = {
@@ -227,9 +215,4 @@ export const Selected: Story = {
     className: 'class-card',
     onThumbnailClick: fn(),
   },
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
 } satisfies Story;
diff --git a/src/ui/Card/Cards.stories.tsx b/src/ui/Card/Cards.stories.tsx
index ca2889bdd..03a358e78 100644
--- a/src/ui/Card/Cards.stories.tsx
+++ b/src/ui/Card/Cards.stories.tsx
@@ -1,11 +1,11 @@
-import { Meta, StoryObj, composeStories } from '@storybook/react';
-import { v4 } from 'uuid';
-
 import { Grid2 as Grid } from '@mui/material';
 
 import { PackedFolderItemFactory } from '@graasp/sdk';
 
-import ItemBadges from '@/ItemBadges/ItemBadges.js';
+import { Meta, StoryObj, composeStories } from '@storybook/react';
+import { v4 } from 'uuid';
+
+import ItemBadges from '@/ui/ItemBadges/ItemBadges.js';
 
 import * as CardStories from './Card.stories.js';
 
diff --git a/src/ui/Card/FolderCard.stories.tsx b/src/ui/Card/FolderCard.stories.tsx
index 6f8802db0..f62cf1af3 100644
--- a/src/ui/Card/FolderCard.stories.tsx
+++ b/src/ui/Card/FolderCard.stories.tsx
@@ -1,7 +1,5 @@
 import { Meta, StoryObj, composeStories } from '@storybook/react';
 
-import { BrowserRouter } from 'react-router-dom';
-
 import TextDisplay from '../TextDisplay/TextDisplay.js';
 import * as TextDisplayStories from '../TextDisplay/TextDisplay.stories.js';
 import FolderCard from './FolderCard.js';
@@ -19,11 +17,6 @@ const meta = {
       },
     },
   },
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
   args: {
     name: 'Example folder',
     description: 'Optional description',
@@ -55,7 +48,7 @@ export const LongHtmlDescription = {
   args: {
     thumbnail: undefined,
     description: (
-      <TextDisplay content='<p>Hello wefh uwhf uqhw hqwkjehr jkqwher jkqwhej khqwefhj hwkjefh jwhef jahwefj khawjkf hawjkf hajkwefh ajk hajkhf wkej </p><p>World</p>' />
+      <TextDisplay content="<p>Hello wefh uwhf uqhw hqwkjehr jkqwher jkqwhej khqwefhj hwkjefh jwhef jahwefj khawjkf hawjkf hajkwefh ajk hajkhf wkej </p><p>World</p>" />
     ),
   },
 } satisfies Story;
diff --git a/src/ui/Card/FolderCard.tsx b/src/ui/Card/FolderCard.tsx
index e0d7db364..b3f285452 100644
--- a/src/ui/Card/FolderCard.tsx
+++ b/src/ui/Card/FolderCard.tsx
@@ -1,5 +1,3 @@
-import { ChevronRight } from 'lucide-react';
-
 import {
   Card,
   CardActionArea,
@@ -8,10 +6,11 @@ import {
   useTheme,
 } from '@mui/material';
 
-import { Link, LinkProps } from 'react-router-dom';
-
 import { ItemType } from '@graasp/sdk';
 
+import { Link } from '@tanstack/react-router';
+import { ChevronRight } from 'lucide-react';
+
 import CardThumbnail from './CardThumbnail.js';
 
 // FIX: use the same constant
@@ -22,10 +21,7 @@ type Props = {
   name: string;
   description?: string | null | JSX.Element;
   thumbnail?: string;
-  /**
-   * React Router Link target
-   */
-  to: LinkProps['to'];
+  to: string;
 };
 const FolderCard = ({
   id,
@@ -49,7 +45,7 @@ const FolderCard = ({
       }}
     >
       <CardActionArea component={Link} to={to} sx={{ height: '100%' }}>
-        <Stack direction='row' alignItems='center' height='100%' minWidth={0}>
+        <Stack direction="row" alignItems="center" height="100%" minWidth={0}>
           <CardThumbnail
             width={CARD_HEIGHT}
             minHeight={CARD_HEIGHT}
diff --git a/src/ui/Card/LinkCard.stories.tsx b/src/ui/Card/LinkCard.stories.tsx
index 49a5f6102..7abeb76db 100644
--- a/src/ui/Card/LinkCard.stories.tsx
+++ b/src/ui/Card/LinkCard.stories.tsx
@@ -1,17 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { BrowserRouter } from 'react-router-dom';
-
 import FancyLink from './LinkCard.js';
 
 const meta = {
   title: 'Card/Link',
   component: FancyLink,
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
   args: {
     title: 'Default link name',
     url: 'https://graasp.org',
diff --git a/src/ui/CookiesBanner/CookiesBanner.stories.tsx b/src/ui/CookiesBanner/CookiesBanner.stories.tsx
deleted file mode 100644
index fd8fe1b88..000000000
--- a/src/ui/CookiesBanner/CookiesBanner.stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import CookiesBanner from './CookiesBanner.js';
-
-const cookieName = 'cookieName';
-
-const meta: Meta<typeof CookiesBanner> = {
-  title: 'Common/CookiesBanner',
-  component: CookiesBanner,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        type: 'dynamic',
-        excludeDecorators: true,
-      },
-    },
-  },
-  decorators: [
-    (story) => {
-      // delete cookie on mount
-      document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
-      return <>{story()}</>;
-    },
-  ],
-  render: (args) => <CookiesBanner {...args} cookieName={cookieName} />,
-};
-export default meta;
-
-type Story = StoryObj<typeof CookiesBanner>;
-
-export const Banner: Story = {
-  args: {},
-};
-
-export const Mobile = {
-  args: {
-    declineButtonText: 'Rejeter les cookies non-essentiels',
-    acceptText: 'Accepter tous les cookies',
-  },
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile2',
-    },
-  },
-} satisfies Story;
diff --git a/src/ui/CookiesBanner/CookiesBanner.tsx b/src/ui/CookiesBanner/CookiesBanner.tsx
deleted file mode 100644
index d906576bb..000000000
--- a/src/ui/CookiesBanner/CookiesBanner.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Box, Button, Typography, styled } from '@mui/material';
-
-import { CookieConsent } from 'react-cookie-consent';
-
-// used to keep track of the decline button internally
-const DECLINE_BUTTON_ID = 'decline-button-id';
-
-// string classnames used to pass to CookieConsent
-const CONTAINER_CLASS_NAME = 'cookie-container';
-const BUTTON_CLASS_NAME = 'cookie-button';
-const BUTTON_CONTAINER_CLASS_NAME = 'cookie-button-container';
-const CONTENT_CLASS_NAME = 'cookie-content';
-
-const StyledCookieConsent = styled(Box)(({ theme }) => ({
-  zIndex: theme.zIndex.modal,
-  position: 'fixed',
-  bottom: '0px',
-  left: '0px',
-  right: '0px',
-  width: '100%',
-  [theme.breakpoints.up('sm')]: {
-    bottom: '10px',
-    right: '10px',
-    left: 'unset',
-    maxWidth: '500px',
-    borderRadius: theme.spacing(2),
-    overflow: 'hidden',
-    outline: '1px solid #f2f2f2',
-    boxShadow: theme.shadows[6],
-    [`& .${BUTTON_CONTAINER_CLASS_NAME}`]: {
-      width: '100%',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-    },
-  },
-
-  [`& .${BUTTON_CONTAINER_CLASS_NAME}`]: {
-    display: 'flex',
-    width: '100%',
-    flexDirection: 'column-reverse',
-    justifyContent: 'space-between',
-    gap: theme.spacing(1),
-    [theme.breakpoints.up('sm')]: {
-      flexDirection: 'row',
-    },
-  },
-
-  [`& .${CONTAINER_CLASS_NAME}`]: {
-    padding: theme.spacing(2),
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-
-    zIndex: `${(theme?.zIndex?.drawer ?? 0) + 1}`,
-    backgroundColor: 'rgb(224,235,255,70%)',
-    backdropFilter: 'blur(15px) saturate(30%) ',
-    color: `${theme.palette.text.primary}`,
-  },
-}));
-
-type CookieButtonProps = {
-  id: string;
-  onClick: () => void;
-};
-
-const CookieButton = (props: CookieButtonProps): JSX.Element => {
-  const { id } = props;
-  const isDeclinedButton = id === DECLINE_BUTTON_ID;
-  return (
-    <Button
-      {...props}
-      fullWidth
-      sx={{ sm: { width: 'max-content' } }}
-      color={isDeclinedButton ? undefined : 'primary'}
-      variant={isDeclinedButton ? 'outlined' : 'contained'}
-    />
-  );
-};
-
-export type CookiesBannerProps = {
-  cookieName: string;
-  acceptText?: string;
-  declineButtonText?: string;
-  domain?: string;
-  expires?: number;
-  text?: string;
-};
-
-const CookiesBanner = ({
-  cookieName,
-  acceptText = 'Accept All',
-  declineButtonText = 'Reject Non-Essential',
-  domain = window.location.hostname,
-  expires = 30,
-  text = `We use cookies and other tracking technologies to improve your browsing experience on our website, to analyze our website traffic, and to understand where our visitors are coming from. By browsing our website, you consent to our use of cookies and other tracking technologies.`,
-}: CookiesBannerProps): JSX.Element => (
-  <StyledCookieConsent>
-    <CookieConsent
-      buttonText={acceptText}
-      cookieName={cookieName}
-      expires={expires}
-      ButtonComponent={CookieButton}
-      declineButtonText={declineButtonText}
-      enableDeclineButton
-      containerClasses={CONTAINER_CLASS_NAME}
-      declineButtonId={DECLINE_BUTTON_ID}
-      disableStyles
-      disableButtonStyles
-      contentClasses={CONTENT_CLASS_NAME}
-      buttonClasses={BUTTON_CLASS_NAME}
-      buttonWrapperClasses={BUTTON_CONTAINER_CLASS_NAME}
-      extraCookieOptions={{ domain }}
-    >
-      <Typography variant='note'>{text}</Typography>
-    </CookieConsent>
-  </StyledCookieConsent>
-);
-
-export default CookiesBanner;
diff --git a/src/ui/Main/Main.stories.tsx b/src/ui/Main/Main.stories.tsx
index a32b959ac..9b5f7f986 100644
--- a/src/ui/Main/Main.stories.tsx
+++ b/src/ui/Main/Main.stories.tsx
@@ -1,15 +1,14 @@
-import { Meta, type StoryObj, composeStories } from '@storybook/react';
-import { CirclePlusIcon, SnowflakeIcon, SparklesIcon } from 'lucide-react';
+import { ReactNode } from 'react';
 
 import { Avatar, Box, Link, Typography } from '@mui/material';
 
-import { ReactNode } from 'react';
-
 import { Context } from '@graasp/sdk';
 
-import CookiesBanner from '@/CookiesBanner/CookiesBanner.js';
-import MainMenu from '@/MainMenu/MainMenu.js';
-import MenuItem from '@/MainMenu/MenuItem/MenuItem.js';
+import { Meta, type StoryObj, composeStories } from '@storybook/react';
+import { CirclePlusIcon, SnowflakeIcon, SparklesIcon } from 'lucide-react';
+
+import MainMenu from '@/ui/MainMenu/MainMenu.js';
+import MenuItem from '@/ui/MainMenu/MenuItem/MenuItem.js';
 
 import * as PlatformSwitchStories from '../PlatformSwitch/PlatformSwitch.stories.js';
 import * as UserSwitchStories from '../UserSwitch/UserSwitch.stories.js';
@@ -36,8 +35,8 @@ type Story = StoryObj<typeof meta>;
 const LinkComponent = ({ children }: { children: ReactNode }): JSX.Element => (
   <Link
     sx={{ textDecoration: 'none' }}
-    color='inherit'
-    href='https://graasp.org'
+    color="inherit"
+    href="https://graasp.org"
   >
     {children}
   </Link>
@@ -53,7 +52,11 @@ const mainContent = (
       imperdiet. Semp risus in hendrerit gravida rutrum quisque non tellus.
       Convallis co
     </p>
-    <img src='https://picsum.photos/500' style={{ maxWidth: '100%' }} />
+    <img
+      alt="cover"
+      src="https://picsum.photos/500"
+      style={{ maxWidth: '100%' }}
+    />
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus
@@ -86,7 +89,7 @@ const mainContent = (
 );
 
 const headerLeftContent = (
-  <Typography variant='h6' component='div'>
+  <Typography variant="h6" component="div">
     Header
   </Typography>
 );
@@ -94,15 +97,15 @@ const headerLeftContent = (
 const defaultArgs = {
   drawerOpenAriaLabel: 'open drawer',
   headerLeftContent: (
-    <Typography variant='h6' component='div'>
+    <Typography variant="h6" component="div">
       Header
     </Typography>
   ),
   drawerContent: (
     <MainMenu>
-      <MenuItem text='Item 1' icon={<SnowflakeIcon />} />
-      <MenuItem text='Item 2' icon={<CirclePlusIcon />} />
-      <MenuItem text='Item 3' icon={<SparklesIcon />} />
+      <MenuItem text="Item 1" icon={<SnowflakeIcon />} />
+      <MenuItem text="Item 2" icon={<CirclePlusIcon />} />
+      <MenuItem text="Item 3" icon={<SparklesIcon />} />
     </MainMenu>
   ),
   children: mainContent,
@@ -125,12 +128,11 @@ export const WithFooter = {
     footerContent: (
       <Box
         p={2}
-        bgcolor='gray'
-        height='150px'
-        boxShadow='0px -2px 4px -1px rgba(0,0,0,0.2)'
+        bgcolor="gray"
+        height="150px"
+        boxShadow="0px -2px 4px -1px rgba(0,0,0,0.2)"
       >
         Footer
-        <CookiesBanner cookieName='toto' />
       </Box>
     ),
   },
@@ -158,7 +160,7 @@ export const Desktop = {
   args: {
     ...defaultArgs,
     headerLeftContent: (
-      <Typography variant='h6' noWrap component='div'>
+      <Typography variant="h6" noWrap component="div">
         Header with a quite long text is in the header
       </Typography>
     ),
diff --git a/src/ui/MainMenu/MenuItem/MenuItem.tsx b/src/ui/MainMenu/MenuItem/MenuItem.tsx
index 0bd9c0f3b..192fdbd7b 100644
--- a/src/ui/MainMenu/MenuItem/MenuItem.tsx
+++ b/src/ui/MainMenu/MenuItem/MenuItem.tsx
@@ -1,3 +1,5 @@
+import { ReactElement, SyntheticEvent } from 'react';
+
 import {
   ListItem,
   ListItemButton,
@@ -5,9 +7,7 @@ import {
   ListItemText,
 } from '@mui/material';
 
-import { ReactElement, SyntheticEvent } from 'react';
-
-import { useMobileView } from '@/hooks/useMobileView.js';
+import { useMobileView } from '@/ui/hooks/useMobileView.js';
 
 import { useMainMenuOpenContext } from '../hooks.js';
 
diff --git a/src/ui/Navigation/CurrentItemNavigation.tsx b/src/ui/Navigation/CurrentItemNavigation.tsx
index 090aa3320..9baf0d60e 100644
--- a/src/ui/Navigation/CurrentItemNavigation.tsx
+++ b/src/ui/Navigation/CurrentItemNavigation.tsx
@@ -1,11 +1,9 @@
-import truncate from 'lodash.truncate';
-
 import { Typography } from '@mui/material';
 
-import { LinkProps } from 'react-router-dom';
-
 import { DiscriminatedItem, ItemType } from '@graasp/sdk';
 
+import truncate from 'lodash.truncate';
+
 import ItemMenu, { ItemMenuProps } from './ItemMenu.js';
 import CenterAlignWrapper from './common/CenterAlignWrapper.js';
 import NavigationLink from './common/NavigationLink.js';
@@ -18,7 +16,7 @@ export type CurrentItemProps = {
   buildMenuId?: (id: string) => string;
   buildMenuItemId?: (id: string) => string;
   useChildren: ItemMenuProps['useChildren'];
-  buildToItemPath: (id: string) => LinkProps['to'];
+  buildToItemPath: (id: string) => string;
   showArrow: boolean;
 };
 const CurrentItemNavigation = ({
diff --git a/src/ui/Navigation/ExtraItemsMenu.tsx b/src/ui/Navigation/ExtraItemsMenu.tsx
index 1e6e91a8e..e0c5dae30 100644
--- a/src/ui/Navigation/ExtraItemsMenu.tsx
+++ b/src/ui/Navigation/ExtraItemsMenu.tsx
@@ -1,15 +1,10 @@
-import { ChevronRightIcon } from 'lucide-react';
+import { useState } from 'react';
 
-import {
-  IconButton,
-  IconButtonProps,
-  Menu,
-  MenuItem,
-  Typography,
-} from '@mui/material';
+import { IconButton, IconButtonProps, Menu, Typography } from '@mui/material';
 
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { ChevronRightIcon } from 'lucide-react';
+
+import { MenuItemLink } from '@/components/ui/MenuItemLink.js';
 
 import { MenuItemType } from './Navigation.js';
 
@@ -21,7 +16,7 @@ export type ExtraItemsMenuProps = {
   name: string;
 };
 
-const Separator = <ChevronRightIcon data-testid='NavigateNextIcon' />;
+const Separator = <ChevronRightIcon data-testid="NavigateNextIcon" />;
 
 const ExtraItemsMenu = ({
   icon = Separator,
@@ -44,7 +39,7 @@ const ExtraItemsMenu = ({
     <>
       <IconButton
         onClick={handleClick}
-        aria-haspopup='true'
+        aria-haspopup="true"
         id={buildIconId?.(name)}
         aria-expanded={open ? true : undefined}
       >
@@ -66,9 +61,9 @@ const ExtraItemsMenu = ({
         }}
       >
         {menuItems?.map(({ name, path }) => (
-          <MenuItem key={name} component={Link} to={path}>
+          <MenuItemLink key={name} to={path}>
             <Typography>{name}</Typography>
-          </MenuItem>
+          </MenuItemLink>
         ))}
       </Menu>
     </>
diff --git a/src/ui/Navigation/HomeMenu.tsx b/src/ui/Navigation/HomeMenu.tsx
index 933c8d7d3..18ddd61ae 100644
--- a/src/ui/Navigation/HomeMenu.tsx
+++ b/src/ui/Navigation/HomeMenu.tsx
@@ -1,20 +1,20 @@
-import { ChevronRightIcon, HomeIcon } from 'lucide-react';
+import React from 'react';
 
 import {
   IconButton,
   IconButtonProps,
   Menu,
-  MenuItem,
   MenuProps,
   Typography,
 } from '@mui/material';
 
-import React from 'react';
-import { Link } from 'react-router-dom';
+import { ChevronRightIcon, HomeIcon } from 'lucide-react';
+
+import { MenuItemLink } from '@/components/ui/MenuItemLink.js';
 
 import NavigationLink from './common/NavigationLink.js';
 
-const Separator = <ChevronRightIcon data-testid='NavigateNextIcon' />;
+const Separator = <ChevronRightIcon data-testid="NavigateNextIcon" />;
 
 type Props = {
   selected: { name: string; id: string; to: string };
@@ -57,7 +57,7 @@ const HomeMenu = ({
         onClick={handleClick}
         id={homeDropdownId}
         aria-controls={open ? 'root' : undefined}
-        aria-haspopup='true'
+        aria-haspopup="true"
         aria-expanded={open ? true : undefined}
       >
         {Separator}
@@ -78,14 +78,9 @@ const HomeMenu = ({
         }}
       >
         {elements.map(({ name, id, to }) => (
-          <MenuItem
-            key={id}
-            component={Link}
-            to={to}
-            id={buildMenuItemId?.(id)}
-          >
+          <MenuItemLink key={id} to={to} id={buildMenuItemId?.(id)}>
             <Typography>{name}</Typography>
-          </MenuItem>
+          </MenuItemLink>
         ))}
       </Menu>
       <NavigationLink to={selected.to} key={selected.id}>
diff --git a/src/ui/Navigation/ItemMenu.tsx b/src/ui/Navigation/ItemMenu.tsx
index f6a1405f5..0aab4d997 100644
--- a/src/ui/Navigation/ItemMenu.tsx
+++ b/src/ui/Navigation/ItemMenu.tsx
@@ -1,26 +1,21 @@
-import type { UseQueryResult } from '@tanstack/react-query';
-import { ChevronRightIcon } from 'lucide-react';
-
-import {
-  IconButton,
-  IconButtonProps,
-  Menu,
-  MenuItem,
-  Typography,
-} from '@mui/material';
-
 import { useState } from 'react';
-import { Link, LinkProps } from 'react-router-dom';
+
+import { IconButton, IconButtonProps, Menu, Typography } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
 
-export const Separator = <ChevronRightIcon data-testid='NavigateNextIcon' />;
+import type { UseQueryResult } from '@tanstack/react-query';
+import { ChevronRightIcon } from 'lucide-react';
+
+import { MenuItemLink } from '@/components/ui/MenuItemLink';
+
+export const Separator = <ChevronRightIcon data-testid="NavigateNextIcon" />;
 
 export type ItemMenuProps = {
   buildIconId?: (id: string) => string;
   buildMenuId?: (itemId: string) => string;
   buildMenuItemId?: (itemId: string) => string;
-  buildToItemPath: (itemId: string) => LinkProps['to'];
+  buildToItemPath: (itemId: string) => string;
   icon?: JSX.Element;
   itemId: string;
   useChildren: (...args: unknown[]) => UseQueryResult<DiscriminatedItem[]>;
@@ -63,7 +58,7 @@ const ItemMenu = ({
         onClick={handleClick}
         id={buildIconId?.(itemId)}
         aria-controls={open ? buildMenuId?.(itemId) : undefined}
-        aria-haspopup='true'
+        aria-haspopup="true"
         aria-expanded={open ? true : undefined}
       >
         {icon}
@@ -84,14 +79,13 @@ const ItemMenu = ({
         }}
       >
         {items?.map(({ name, id }) => (
-          <MenuItem
+          <MenuItemLink
             id={buildMenuItemId?.(id)}
             key={id}
-            component={Link}
             to={buildToItemPath(id)}
           >
             <Typography>{name}</Typography>
-          </MenuItem>
+          </MenuItemLink>
         ))}
       </Menu>
     </>
diff --git a/src/ui/Navigation/Navigation.stories.tsx b/src/ui/Navigation/Navigation.stories.tsx
index 9e0ef2bc0..72c17108b 100644
--- a/src/ui/Navigation/Navigation.stories.tsx
+++ b/src/ui/Navigation/Navigation.stories.tsx
@@ -1,9 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, within } from '@storybook/test';
-import { CogIcon } from 'lucide-react';
-
-import { BrowserRouter } from 'react-router-dom';
-
 import {
   FolderItemFactory,
   ItemType,
@@ -12,6 +6,10 @@ import {
   MimeTypes,
 } from '@graasp/sdk';
 
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, within } from '@storybook/test';
+import { CogIcon } from 'lucide-react';
+
 import { MOCK_MEMBER } from '../utils/fixtures.js';
 import HomeMenu from './HomeMenu.js';
 import ItemMenu, { ItemMenuProps } from './ItemMenu.js';
@@ -43,11 +41,6 @@ const meta = {
       },
     },
   },
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
 
   render: (args) => {
     return <Navigation {...args} />;
diff --git a/src/ui/Navigation/common/NavigationLink.tsx b/src/ui/Navigation/common/NavigationLink.tsx
index f81402711..91d6bfde1 100644
--- a/src/ui/Navigation/common/NavigationLink.tsx
+++ b/src/ui/Navigation/common/NavigationLink.tsx
@@ -1,12 +1,13 @@
+import { ReactNode } from 'react';
+
 import { styled } from '@mui/material';
 
-import { ReactNode } from 'react';
-import { Link, LinkProps } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
 
 const NavigationLink: (props: {
   id?: string;
   children: ReactNode;
-  to: LinkProps['to'];
+  to: string;
 }) => ReactNode = styled(Link)(({ theme }) => ({
   textDecoration: 'none',
   color: theme.palette.text.primary,
diff --git a/src/ui/Sidebar/Sidebar.stories.tsx b/src/ui/Sidebar/Sidebar.stories.tsx
index deb5acfda..685574886 100644
--- a/src/ui/Sidebar/Sidebar.stories.tsx
+++ b/src/ui/Sidebar/Sidebar.stories.tsx
@@ -1,9 +1,9 @@
+import { Typography } from '@mui/material';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { CirclePlus, Snowflake, Sparkles } from 'lucide-react';
 
-import { Typography } from '@mui/material';
-
-import { MenuItem } from '@/MainMenu/MenuItem/MenuItem.js';
+import { MenuItem } from '@/ui/MainMenu/MenuItem/MenuItem.js';
 
 import { TABLE_CATEGORIES } from '../utils/storybook.js';
 import Sidebar from './Sidebar.js';
@@ -17,7 +17,7 @@ const meta: Meta<typeof Sidebar> = {
       return (
         <>
           {story()}
-          <img src='https://picsum.photos/500' />
+          <img alt="cover" src="https://picsum.photos/500" />
         </>
       );
     },
@@ -48,9 +48,9 @@ export const Default: Story = {
     drawerHeaderContent: <Typography>My Title</Typography>,
     children: (
       <>
-        <MenuItem text='Item 1' icon={<Snowflake />} />
-        <MenuItem text='Item 2' icon={<CirclePlus />} />
-        <MenuItem text='Item 3' icon={<Sparkles />} />
+        <MenuItem text="Item 1" icon={<Snowflake />} />
+        <MenuItem text="Item 2" icon={<CirclePlus />} />
+        <MenuItem text="Item 3" icon={<Sparkles />} />
       </>
     ),
   },
diff --git a/src/ui/TextEditor/TextEditor.tsx b/src/ui/TextEditor/TextEditor.tsx
index f746f07ea..a9ca07e9a 100644
--- a/src/ui/TextEditor/TextEditor.tsx
+++ b/src/ui/TextEditor/TextEditor.tsx
@@ -13,6 +13,8 @@ declare const window: Window &
     katex: typeof katex;
   };
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 window.katex = katex;
 
 const TEXT_EDITOR_TOOLBAR = [
diff --git a/src/ui/buttons/SaveButton/SaveButton.stories.tsx b/src/ui/buttons/SaveButton/SaveButton.stories.tsx
index 49f2c8f25..569d0096d 100644
--- a/src/ui/buttons/SaveButton/SaveButton.stories.tsx
+++ b/src/ui/buttons/SaveButton/SaveButton.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import { TABLE_CATEGORIES } from '@/utils/storybook.js';
+import { TABLE_CATEGORIES } from '@/ui/utils/storybook.js';
 
 import SaveButton from './SaveButton.js';
 
diff --git a/src/ui/draggable/DraggingWrapper.stories.tsx b/src/ui/draggable/DraggingWrapper.stories.tsx
index 081dfb194..a0ad16129 100644
--- a/src/ui/draggable/DraggingWrapper.stories.tsx
+++ b/src/ui/draggable/DraggingWrapper.stories.tsx
@@ -1,14 +1,12 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-
 import { Box } from '@mui/material';
 
-import { BrowserRouter } from 'react-router-dom';
-
 import { FolderItemFactory, FolderItemType } from '@graasp/sdk';
 
-import Card from '@/Card/Card.js';
-import ItemBadges from '@/ItemBadges/ItemBadges.js';
-import { TABLE_CATEGORIES } from '@/utils/storybook.js';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import Card from '@/ui/Card/Card.js';
+import ItemBadges from '@/ui/ItemBadges/ItemBadges.js';
+import { TABLE_CATEGORIES } from '@/ui/utils/storybook.js';
 
 import DraggingWrapper from './DraggingWrapper.js';
 
@@ -19,11 +17,6 @@ const makeData = (len: number): FolderItemType[] => {
 const meta: Meta<typeof DraggingWrapper> = {
   title: 'Common/Draggable',
   component: DraggingWrapper,
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
 
   argTypes: {
     onDropInRow: {
diff --git a/src/ui/itemLogin/ItemLoginWrapper.stories.tsx b/src/ui/itemLogin/ItemLoginWrapper.stories.tsx
index c113cbe8b..df2c4adde 100644
--- a/src/ui/itemLogin/ItemLoginWrapper.stories.tsx
+++ b/src/ui/itemLogin/ItemLoginWrapper.stories.tsx
@@ -1,8 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fn, within } from '@storybook/test';
-import { StatusCodes } from 'http-status-codes';
-import { v4 } from 'uuid';
-
 import {
   AccountType,
   CompleteMember,
@@ -10,7 +5,12 @@ import {
   PackedDocumentItemFactory,
 } from '@graasp/sdk';
 
-import Card from '@/Card/Card.js';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, within } from '@storybook/test';
+import { StatusCodes } from 'http-status-codes';
+import { v4 } from 'uuid';
+
+import Card from '@/ui/Card/Card.js';
 
 import ItemLoginWrapper from './ItemLoginWrapper.js';
 import { FORBIDDEN_TEXT } from './constants.js';
@@ -33,7 +33,7 @@ const meta = {
     signIn: fn(),
     itemId: item.id,
     itemErrorStatusCode: null,
-    children: <Card alt='card' name='card' key='child' />,
+    children: <Card alt="card" name="card" key="child" />,
   },
 } satisfies Meta<typeof ItemLoginWrapper>;
 
@@ -81,7 +81,7 @@ export const Enroll = {
     itemId: v4(),
     itemLoginSchemaType: ItemLoginSchemaType.Username,
     enrollContent: (
-      <div data-testId='enroll' key='enroll'>
+      <div data-testId="enroll" key="enroll">
         Enroll Content
       </div>
     ),
@@ -99,7 +99,7 @@ export const RequestAccess = {
     itemId: v4(),
     itemErrorStatusCode: StatusCodes.FORBIDDEN,
     requestAccessContent: (
-      <div data-testId='request' key='request'>
+      <div data-testId="request" key="request">
         Request Access
       </div>
     ),
diff --git a/src/ui/items/LinkItem.stories.tsx b/src/ui/items/LinkItem.stories.tsx
index d8a36dadc..fd325dcb6 100644
--- a/src/ui/items/LinkItem.stories.tsx
+++ b/src/ui/items/LinkItem.stories.tsx
@@ -1,10 +1,8 @@
+import { ItemType, LinkItemFactory } from '@graasp/sdk';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 
-import { BrowserRouter } from 'react-router-dom';
-
-import { ItemType, LinkItemFactory } from '@graasp/sdk';
-
 import { MOCK_MEMBER } from '../utils/fixtures.js';
 import LinkItem from './LinkItem.js';
 
@@ -69,11 +67,6 @@ const meta = {
       },
     },
   },
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
   args: {
     onClick: fn(),
   },