diff --git a/src/modules/item/Item.tsx b/src/modules/item/Item.tsx
index c2d7142a9..020285105 100644
--- a/src/modules/item/Item.tsx
+++ b/src/modules/item/Item.tsx
@@ -54,6 +54,7 @@ import { useCurrentMemberContext } from '@/contexts/CurrentMemberContext';
 import { PLAYER } from '@/langs/constants';
 import { isHidden, paginationContentFilter } from '@/utils/item';
 
+import NavigationButton from './NavigationButton';
 import PinnedFolderItem from './PinnedFolderItem';
 
 const {
@@ -478,6 +479,9 @@ const Item = ({
               </Fragment>
             ))}
             {showLoadMoreButton}
+            {!hasNextPage && !isFetchingNextPage && (
+              <NavigationButton item={item} />
+            )}
           </>
         )}
 
diff --git a/src/modules/item/NavigationButton.tsx b/src/modules/item/NavigationButton.tsx
new file mode 100644
index 000000000..2a2b12f87
--- /dev/null
+++ b/src/modules/item/NavigationButton.tsx
@@ -0,0 +1,68 @@
+import { useParams } from 'react-router';
+
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { Box } from '@mui/material';
+
+import { DiscriminatedItem, ItemType } from '@graasp/sdk';
+import { Button } from '@graasp/ui';
+
+import { hooks } from '@/config/queryClient';
+
+const NavigationButton = ({
+  item,
+}: {
+  item: DiscriminatedItem;
+}): JSX.Element | null => {
+  const { rootId } = useParams();
+
+  const { data: descendants, isLoading } = hooks.useDescendants({
+    // not correct but enabled
+    id: rootId ?? '',
+    enabled: Boolean(rootId),
+  });
+
+  if (isLoading) {
+    return null;
+  }
+
+  let prev = null;
+  let next = null;
+
+  const folderHierarchy = descendants?.filter(
+    ({ type }) => type === ItemType.FOLDER,
+  );
+
+  if (item.id === rootId && folderHierarchy?.length) {
+    [next] = folderHierarchy;
+  } else {
+    const idx = folderHierarchy?.findIndex(({ id }) => id === item.id) ?? -1;
+
+    if (!folderHierarchy || idx < 0) {
+      return null;
+    }
+
+    prev = folderHierarchy[idx - 1];
+    next = folderHierarchy[idx + 1];
+  }
+  return (
+    <Box flexDirection="row" display="flex" justifyContent="space-between">
+      {prev ? (
+        <Button sx={{}} variant="outlined" startIcon={<ArrowBackIcon />}>
+          {prev.name}
+        </Button>
+      ) : (
+        <p />
+      )}
+      {next ? (
+        <Button sx={{}} endIcon={<ArrowForwardIcon />}>
+          {next.name}
+        </Button>
+      ) : (
+        <p />
+      )}
+    </Box>
+  );
+};
+
+export default NavigationButton;