diff --git a/src/components/App.tsx b/src/components/App.tsx
index 3f7b01407..b12f7551b 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -12,6 +12,7 @@ import { SIGN_IN_PATH } from '@/config/externalPaths';
 import {
   FAVORITE_ITEMS_PATH,
   HOME_PATH,
+  INFORMATION_PATH,
   ITEMS_PATH,
   PUBLISHED_ITEMS_PATH,
   PUBLISH_PATH,
@@ -29,6 +30,7 @@ import SharedItems from './SharedItems';
 import { useCurrentUserContext } from './context/CurrentUserContext';
 import FavoriteItems from './main/FavoriteItems';
 import Home from './main/Home';
+import ItemInformationScreen from './main/ItemScreens/ItemInformationScreen';
 import ItemScreen from './main/ItemScreens/ItemScreen';
 import ItemScreenLayout from './main/ItemScreens/ItemScreenLayout';
 import PublishItemScreen from './main/ItemScreens/PublishItemScreen';
@@ -94,6 +96,7 @@ const App = (): JSX.Element => {
           <Route path={SHARE_PATH} element={<ShareItemScreen />} />
           <Route path={PUBLISH_PATH} element={<PublishItemScreen />} />
           <Route path={SETTINGS_PATH} element={<SettingsItemScreen />} />
+          <Route path={INFORMATION_PATH} element={<ItemInformationScreen />} />
         </Route>
         <Route path={RECYCLE_BIN_PATH} element={<RecycleWithAuthorization />} />
         <Route path={ITEMS_PATH} element={<HomeWithAuthorization />} />
diff --git a/src/components/common/ItemMetadataButton.tsx b/src/components/common/ItemMetadataButton.tsx
index 5123fede8..6a923dc26 100644
--- a/src/components/common/ItemMetadataButton.tsx
+++ b/src/components/common/ItemMetadataButton.tsx
@@ -1,37 +1,27 @@
+import { useNavigate } from 'react-router';
+
 import InfoIcon from '@mui/icons-material/Info';
 import { IconButton, Tooltip } from '@mui/material';
 
+import { buildItemInformationPath } from '@/config/paths';
+
 import { useBuilderTranslation } from '../../config/i18n';
-import {
-  ITEM_INFORMATION_BUTTON_ID,
-  ITEM_INFORMATION_ICON_IS_OPEN_CLASS,
-} from '../../config/selectors';
+import { ITEM_INFORMATION_BUTTON_ID } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
-import { useLayoutContext } from '../context/LayoutContext';
 
-const ItemMetadataButton = (): JSX.Element => {
+const ItemMetadataButton = ({ id }: { id: string }): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const {
-    isItemMetadataMenuOpen,
-    setIsItemMetadataMenuOpen,
-    setIsChatboxMenuOpen,
-  } = useLayoutContext();
+
+  const navigate = useNavigate();
 
   const onClick = () => {
-    setIsItemMetadataMenuOpen(!isItemMetadataMenuOpen);
-    setIsChatboxMenuOpen(false);
+    navigate(buildItemInformationPath(id));
   };
 
   return (
     <Tooltip title={translateBuilder(BUILDER.ITEM_METADATA_TITLE)}>
       <span>
-        <IconButton
-          id={ITEM_INFORMATION_BUTTON_ID}
-          onClick={onClick}
-          className={
-            isItemMetadataMenuOpen ? ITEM_INFORMATION_ICON_IS_OPEN_CLASS : ''
-          }
-        >
+        <IconButton id={ITEM_INFORMATION_BUTTON_ID} onClick={onClick}>
           <InfoIcon />
         </IconButton>
       </span>
diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx
index fd0f29c30..10172b7ac 100644
--- a/src/components/context/LayoutContext.tsx
+++ b/src/components/context/LayoutContext.tsx
@@ -12,8 +12,6 @@ interface LayoutContextInterface {
   setEditingItemId: (itemId: string | null) => void;
   isMainMenuOpen: boolean;
   setIsMainMenuOpen: (isOpen: boolean) => void;
-  isItemMetadataMenuOpen: boolean;
-  setIsItemMetadataMenuOpen: (isOpen: boolean) => void;
   isChatboxMenuOpen: boolean;
   setIsChatboxMenuOpen: (isOpen: boolean) => void;
 }
@@ -31,10 +29,6 @@ export const LayoutContext = createContext<LayoutContextInterface>({
   setIsMainMenuOpen: () => {
     // do nothing
   },
-  isItemMetadataMenuOpen: false,
-  setIsItemMetadataMenuOpen: () => {
-    // do nothing
-  },
   isChatboxMenuOpen: false,
   setIsChatboxMenuOpen: () => {
     // do nothing
@@ -55,7 +49,6 @@ export const LayoutContextProvider = ({
 
   const [isMainMenuOpen, setIsMainMenuOpen] = useState(true);
 
-  const [isItemMetadataMenuOpen, setIsItemMetadataMenuOpen] = useState(false);
   // check query params to see if chat should be open
   const chatIsOpen =
     new URLSearchParams(window.location.search).get('chat') === ChatStatus.Open;
@@ -69,18 +62,10 @@ export const LayoutContextProvider = ({
       setEditingItemId,
       isMainMenuOpen,
       setIsMainMenuOpen,
-      isItemMetadataMenuOpen,
-      setIsItemMetadataMenuOpen,
       isChatboxMenuOpen,
       setIsChatboxMenuOpen,
     }),
-    [
-      editingItemId,
-      isChatboxMenuOpen,
-      isItemMetadataMenuOpen,
-      isMainMenuOpen,
-      mode,
-    ],
+    [editingItemId, isChatboxMenuOpen, isMainMenuOpen, mode],
   );
 
   return (
diff --git a/src/components/item/ItemMain.tsx b/src/components/item/ItemMain.tsx
index f826c6a8a..023a3c0b0 100644
--- a/src/components/item/ItemMain.tsx
+++ b/src/components/item/ItemMain.tsx
@@ -9,7 +9,6 @@ import { ITEM_MAIN_CLASS } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
 import Chatbox from '../common/Chatbox';
 import { useLayoutContext } from '../context/LayoutContext';
-import ItemMetadataContent from './ItemMetadataContent';
 import ItemPanel from './ItemPanel';
 import ItemHeader from './header/ItemHeader';
 
@@ -57,13 +56,8 @@ type Props = {
 
 const ItemMain = ({ id, children, item }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const {
-    isItemMetadataMenuOpen,
-    setIsItemMetadataMenuOpen,
-    isChatboxMenuOpen,
-    setIsChatboxMenuOpen,
-    isMainMenuOpen,
-  } = useLayoutContext();
+  const { isChatboxMenuOpen, setIsChatboxMenuOpen, isMainMenuOpen } =
+    useLayoutContext();
 
   return (
     <Container id={id} className={ITEM_MAIN_CLASS} open={isMainMenuOpen}>
@@ -84,23 +78,7 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
           <Chatbox item={item} />
         </ItemPanel>
       )}
-      <ItemPanel open={isItemMetadataMenuOpen}>
-        <DrawerHeader
-          handleDrawerClose={() => {
-            setIsItemMetadataMenuOpen(false);
-          }}
-          // todo
-          direction="rtl"
-        >
-          <Typography variant="h6">
-            {translateBuilder(BUILDER.ITEM_METADATA_TITLE)}
-          </Typography>
-        </DrawerHeader>
-        <Divider />
-        <ItemMetadataContent item={item} />
-      </ItemPanel>
-
-      <StyledContainer open={isChatboxMenuOpen || isItemMetadataMenuOpen}>
+      <StyledContainer open={isChatboxMenuOpen}>
         <ItemHeader showNavigation />
 
         {children}
diff --git a/src/components/item/ItemMemberships.tsx b/src/components/item/ItemMemberships.tsx
index 1e3a5e3ab..5e96ad76d 100644
--- a/src/components/item/ItemMemberships.tsx
+++ b/src/components/item/ItemMemberships.tsx
@@ -17,15 +17,10 @@ import { useCurrentUserContext } from '../context/CurrentUserContext';
 
 type Props = {
   id?: string;
-  onClick: () => void;
   maxAvatar?: number;
 };
 
-const ItemMemberships = ({
-  id,
-  maxAvatar = 2,
-  onClick,
-}: Props): JSX.Element | null => {
+const ItemMemberships = ({ id, maxAvatar = 2 }: Props): JSX.Element | null => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { data: memberships, isError } = hooks.useItemMemberships(id);
   const { data: currentUser } = useCurrentUserContext();
@@ -57,7 +52,7 @@ const ItemMemberships = ({
           })}
           aria-label={translateBuilder(BUILDER.SHARED_MEMBERS_LABEL)}
         >
-          <AvatarGroup max={maxAvatar} spacing={3} onClick={onClick}>
+          <AvatarGroup max={maxAvatar} spacing={3}>
             {filteredMemberships.map(({ member, permission }) => {
               const badgeContent =
                 permission === PermissionLevel.Read ? (
diff --git a/src/components/item/ItemMetadataContent.tsx b/src/components/item/ItemMetadataContent.tsx
index 4afd1ef24..42cd577db 100644
--- a/src/components/item/ItemMetadataContent.tsx
+++ b/src/components/item/ItemMetadataContent.tsx
@@ -1,3 +1,4 @@
+import { Container } from '@mui/material';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -24,8 +25,8 @@ import {
   ITEM_PANEL_TABLE_ID,
 } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
-import { useLayoutContext } from '../context/LayoutContext';
 import ItemMemberships from './ItemMemberships';
+import ThumbnailSetting from './settings/ThumbnailSetting';
 
 const { useMember } = hooks;
 
@@ -37,13 +38,8 @@ const ItemMetadataContent = ({ item }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { t: translateCommon } = useCommonTranslation();
 
-  const { setIsItemMetadataMenuOpen } = useLayoutContext();
   const { data: creator } = useMember(item?.creator?.id);
 
-  const onClick = () => {
-    setIsItemMetadataMenuOpen(true);
-  };
-
   let size = null;
   let mimetype = null;
   if (item.type === ItemType.S3_FILE) {
@@ -75,7 +71,9 @@ const ItemMetadataContent = ({ item }: Props): JSX.Element => {
   };
 
   return (
-    <>
+    <Container>
+      <ThumbnailSetting item={item} />
+
       <TableContainer sx={{ p: 2, boxSizing: 'border-box' }}>
         <Typography variant="h5" id={ITEM_PANEL_NAME_ID} noWrap>
           {item.name}
@@ -132,8 +130,8 @@ const ItemMetadataContent = ({ item }: Props): JSX.Element => {
           </TableBody>
         </Table>
       </TableContainer>
-      <ItemMemberships id={item.id} maxAvatar={5} onClick={onClick} />
-    </>
+      <ItemMemberships id={item.id} maxAvatar={5} />
+    </Container>
   );
 };
 
diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx
index d4ec4b940..3ec66dad5 100644
--- a/src/components/item/header/ItemHeaderActions.tsx
+++ b/src/components/item/header/ItemHeaderActions.tsx
@@ -32,12 +32,8 @@ type Props = {
 
 const ItemHeaderActions = ({ item }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const {
-    editingItemId,
-    isChatboxMenuOpen,
-    setIsChatboxMenuOpen,
-    setIsItemMetadataMenuOpen,
-  } = useLayoutContext();
+  const { editingItemId, isChatboxMenuOpen, setIsChatboxMenuOpen } =
+    useLayoutContext();
 
   const { data: member } = useCurrentUserContext();
 
@@ -55,7 +51,6 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => {
 
   const onClickChatbox = () => {
     setIsChatboxMenuOpen(!isChatboxMenuOpen);
-    setIsItemMetadataMenuOpen(false);
   };
 
   const renderItemActions = () => {
@@ -101,7 +96,7 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => {
         // show only for content with tables : root or folders
         (item?.type === ItemType.FOLDER || !item?.id) && <ModeButton />
       }
-      {item?.id && <ItemMetadataButton />}
+      {item?.id && <ItemMetadataButton id={item.id} />}
     </Stack>
   );
 };
diff --git a/src/components/item/settings/ItemSettings.tsx b/src/components/item/settings/ItemSettings.tsx
index e2b85fec6..c55791da7 100644
--- a/src/components/item/settings/ItemSettings.tsx
+++ b/src/components/item/settings/ItemSettings.tsx
@@ -1,12 +1,21 @@
 import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 
 import InfoIcon from '@mui/icons-material/Info';
-import { FormControlLabel, FormGroup, Switch, Tooltip } from '@mui/material';
+import {
+  Alert,
+  FormControlLabel,
+  FormGroup,
+  Switch,
+  Tooltip,
+} from '@mui/material';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 
 import { DiscriminatedItem, ItemType } from '@graasp/sdk';
 
+import { buildItemInformationPath } from '@/config/paths';
+
 import {
   DEFAULT_COLLAPSIBLE_SETTING,
   DEFAULT_PINNED_SETTING,
@@ -27,7 +36,6 @@ import { BUILDER } from '../../../langs/constants';
 import AdminChatSettings from './AdminChatSettings';
 import FileSettings from './FileSettings';
 import LinkSettings from './LinkSettings';
-import ThumbnailSetting from './ThumbnailSetting';
 
 type Props = {
   item: DiscriminatedItem;
@@ -203,6 +211,12 @@ const ItemSettings = ({ item }: Props): JSX.Element => {
 
   return (
     <Container disableGutters sx={{ mt: 2 }}>
+      <Alert severity="warning" sx={{ marginBottom: 2 }}>
+        {translateBuilder(BUILDER.UPDATE_THUMBNAIL_AT_INFO_ALERT)}{' '}
+        <Link to={buildItemInformationPath(item.id)}>
+          {translateBuilder(BUILDER.UPDATE_THUMBNAIL_LINK_TEXT)}
+        </Link>
+      </Alert>
       <Typography variant="h4">
         {translateBuilder(BUILDER.SETTINGS_TITLE)}
       </Typography>
@@ -215,7 +229,6 @@ const ItemSettings = ({ item }: Props): JSX.Element => {
         {renderSaveActionsSetting()}
       </FormGroup>
       {renderSettingsPerType()}
-      <ThumbnailSetting item={item} />
       <AdminChatSettings item={item} />
     </Container>
   );
diff --git a/src/components/item/settings/ThumbnailSetting.tsx b/src/components/item/settings/ThumbnailSetting.tsx
index 84748732b..382201549 100644
--- a/src/components/item/settings/ThumbnailSetting.tsx
+++ b/src/components/item/settings/ThumbnailSetting.tsx
@@ -120,22 +120,10 @@ const ThumbnailSetting = ({ item }: Props): JSX.Element | null => {
       {uppy && (
         <StatusBar uppy={uppy} handleClose={handleClose} open={openStatusBar} />
       )}
-      <Stack spacing={3} mb={3}>
+      <Stack spacing={2} mb={3}>
         <Typography variant="h5">
           {translateBuilder(BUILDER.SETTINGS_THUMBNAIL_TITLE)}
         </Typography>
-        <Typography variant="body1">
-          {translateBuilder(BUILDER.SETTINGS_THUMBNAIL_SETTINGS_INFORMATIONS)}
-        </Typography>
-        <input
-          type="file"
-          accept="image/*"
-          onInput={onSelectFile}
-          // onChange is successfully triggered in test
-          onChange={onSelectFile}
-          ref={inputRef}
-          className={THUMBNAIL_SETTING_UPLOAD_BUTTON_CLASSNAME}
-        />
         <Thumbnail
           id={itemId}
           isLoading={isLoading}
@@ -149,6 +137,18 @@ const ThumbnailSetting = ({ item }: Props): JSX.Element | null => {
           maxWidth={THUMBNAIL_SETTING_MAX_WIDTH}
           maxHeight={THUMBNAIL_SETTING_MAX_HEIGHT}
         />
+        <input
+          type="file"
+          accept="image/*"
+          onInput={onSelectFile}
+          // onChange is successfully triggered in test
+          onChange={onSelectFile}
+          ref={inputRef}
+          className={THUMBNAIL_SETTING_UPLOAD_BUTTON_CLASSNAME}
+        />
+        <Typography variant="caption">
+          {translateBuilder(BUILDER.SETTINGS_THUMBNAIL_SETTINGS_INFORMATIONS)}
+        </Typography>
       </Stack>
       {fileSource && (
         <CropModal
diff --git a/src/components/main/ItemScreens/ItemInformationScreen.tsx b/src/components/main/ItemScreens/ItemInformationScreen.tsx
new file mode 100644
index 000000000..29afd33bc
--- /dev/null
+++ b/src/components/main/ItemScreens/ItemInformationScreen.tsx
@@ -0,0 +1,45 @@
+import { useNavigate, useOutletContext } from 'react-router';
+
+import { ArrowBack } from '@mui/icons-material';
+import { Box, Button } from '@mui/material';
+
+import { useShortenURLParams } from '@graasp/ui';
+
+import ItemMetadataContent from '@/components/item/ItemMetadataContent';
+import { useBuilderTranslation } from '@/config/i18n';
+import { ITEM_ID_PARAMS, buildItemPath } from '@/config/paths';
+import { BUILDER } from '@/langs/constants';
+
+import Navigation from '../../layout/Navigation';
+import WrappedItemScreen from './WrappedItemScreen';
+import { OutletType } from './type';
+
+const ItemInformationScreen = (): JSX.Element => {
+  const { item } = useOutletContext<OutletType>();
+
+  const navigate = useNavigate();
+  const itemId = useShortenURLParams(ITEM_ID_PARAMS);
+
+  const { t: translateBuilder } = useBuilderTranslation();
+
+  return (
+    <Box py={1} px={2}>
+      <Navigation />
+      <Box px={2}>
+        <Button
+          startIcon={<ArrowBack fontSize="small" />}
+          variant="text"
+          onClick={() => navigate(buildItemPath(itemId))}
+        >
+          {translateBuilder(BUILDER.BACK)}
+        </Button>
+      </Box>
+      <ItemMetadataContent item={item} />
+    </Box>
+  );
+};
+
+const WrappedItemInformationScreen = (): JSX.Element =>
+  WrappedItemScreen(ItemInformationScreen);
+
+export default WrappedItemInformationScreen;
diff --git a/src/components/main/ItemScreens/ItemScreen.tsx b/src/components/main/ItemScreens/ItemScreen.tsx
index 4b9bc485b..166a10aff 100644
--- a/src/components/main/ItemScreens/ItemScreen.tsx
+++ b/src/components/main/ItemScreens/ItemScreen.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { useOutletContext } from 'react-router';
 
+import { ItemType } from '@graasp/sdk';
+
+import FileUploader from '@/components/file/FileUploader';
 import ItemContent from '@/components/item/ItemContent';
 import ItemMain from '@/components/item/ItemMain';
 
@@ -10,9 +13,12 @@ const ItemPage = (): JSX.Element => {
   const { item, permission } = useOutletContext<OutletType>();
 
   return (
-    <ItemMain item={item}>
-      <ItemContent item={item} permission={permission} />
-    </ItemMain>
+    <>
+      {item.type === ItemType.FOLDER ? <FileUploader /> : undefined}
+      <ItemMain item={item}>
+        <ItemContent item={item} permission={permission} />
+      </ItemMain>
+    </>
   );
 };
 
diff --git a/src/components/main/ItemScreens/ItemScreenLayout.tsx b/src/components/main/ItemScreens/ItemScreenLayout.tsx
index 425cb9f53..f2852232c 100644
--- a/src/components/main/ItemScreens/ItemScreenLayout.tsx
+++ b/src/components/main/ItemScreens/ItemScreenLayout.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { Outlet } from 'react-router';
 
-import { ItemType } from '@graasp/sdk';
 import { Loader, useShortenURLParams } from '@graasp/ui';
 
 import { ITEM_ID_PARAMS } from '@/config/paths';
@@ -12,7 +11,6 @@ import { getHighestPermissionForMemberFromMemberships } from '../../../utils/mem
 import ErrorAlert from '../../common/ErrorAlert';
 import { useCurrentUserContext } from '../../context/CurrentUserContext';
 import { useLayoutContext } from '../../context/LayoutContext';
-import FileUploader from '../../file/FileUploader';
 import { UppyContextProvider } from '../../file/UppyContext';
 import Main from '../Main';
 import WrappedAuthItemScreen from './WrappedItemScreen';
@@ -56,7 +54,6 @@ const ItemScreen = (): JSX.Element => {
   return (
     <Main>
       <UppyContextProvider enable={enableEditing} itemId={itemId}>
-        {item.type === ItemType.FOLDER ? <FileUploader /> : undefined}
         <Outlet context={{ item, permission }} />
       </UppyContextProvider>
     </Main>
diff --git a/src/config/paths.ts b/src/config/paths.ts
index 8a2eeedd9..bfaf47f82 100644
--- a/src/config/paths.ts
+++ b/src/config/paths.ts
@@ -12,9 +12,12 @@ export const ITEM_ID_PARAMS = 'itemId';
 export const SHARE_PATH = 'share';
 export const PUBLISH_PATH = 'publish';
 export const SETTINGS_PATH = 'settings';
+export const INFORMATION_PATH = 'information';
 export const buildItemSettingsPath = (id = ':itemId'): string =>
   `${ITEMS_PATH}/${id}/${SETTINGS_PATH}`;
 export const buildItemSharePath = (id = ':itemId'): string =>
   `${ITEMS_PATH}/${id}/${SHARE_PATH}`;
 export const buildItemPublishPath = (id = ':itemId'): string =>
   `${ITEMS_PATH}/${id}/${PUBLISH_PATH}`;
+export const buildItemInformationPath = (id = ':itemId'): string =>
+  `${ITEMS_PATH}/${id}/${INFORMATION_PATH}`;
diff --git a/src/langs/constants.ts b/src/langs/constants.ts
index 87339e1c7..a1f37ea00 100644
--- a/src/langs/constants.ts
+++ b/src/langs/constants.ts
@@ -364,4 +364,6 @@ export const BUILDER = {
   "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.":
     "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.",
   BACK: 'BACK',
+  UPDATE_THUMBNAIL_AT_INFO_ALERT: 'UPDATE_THUMBNAIL_AT_INFO_ALERT',
+  UPDATE_THUMBNAIL_LINK_TEXT: 'UPDATE_THUMBNAIL_LINK_TEXT',
 };
diff --git a/src/langs/en.json b/src/langs/en.json
index b784df833..9859a1f9a 100644
--- a/src/langs/en.json
+++ b/src/langs/en.json
@@ -303,5 +303,7 @@
   "ROOT": "Root",
   "ITEM_SELECTION_NAVIGATION_RECENT_ITEMS": "Recent Items",
   "ITEM_SELECTION_NAVIGATION_PARENT": "Move above",
-  "BACK": "Back"
+  "BACK": "Back",
+  "UPDATE_THUMBNAIL_AT_INFO_ALERT": "Update thumbnail moved to information page,",
+  "UPDATE_THUMBNAIL_LINK_TEXT": "Check Here"
 }