diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
index 47c8e0e68..4e86dec2c 100644
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@@ -3,7 +3,7 @@ name: Cypress CI
 on:
   push:
     branches:
-      - "main"
+      - 'main'
   merge_group:
   pull_request:
 
@@ -45,11 +45,11 @@ jobs:
           VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
           VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}
-          VITE_GRAASP_REDIRECTION_HOST:  ${{ vars.VITE_GRAASP_REDIRECTION_HOST }}
+          VITE_GRAASP_REDIRECTION_HOST: ${{ vars.VITE_GRAASP_REDIRECTION_HOST }}
 
       #  use the Cypress GitHub Action to run Cypress tests within the chrome browser
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           install: false
           # we launch the app in preview mode to avoid issues with hmr websockets from vite polluting the mocks
diff --git a/cypress.config.ts b/cypress.config.ts
index de94d6b71..f90a8ebb9 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -9,13 +9,15 @@ export default defineConfig({
   chromeWebSecurity: false,
   e2e: {
     env: {
-      API_HOST: process.env.VITE_GRAASP_API_HOST,
-      AUTH_HOST: process.env.VITE_GRAASP_AUTH_HOST,
-      BUILDER_HOST: `http://localhost:${process.env.VITE_PORT}`,
-      PLAYER_HOST: process.env.VITE_GRAASP_PLAYER_HOST,
-      ANALYZER_HOST: process.env.VITE_GRAASP_ANALYZER_HOST,
-      LIBRARY_HOST: process.env.VITE_GRAASP_LIBRARY_HOST,
-      REDIRECTION_HOST: process.env.VITE_GRAASP_REDIRECTION_HOST,
+      VITE_GRAASP_REDIRECTION_HOST: process.env.VITE_GRAASP_REDIRECTION_HOST,
+      VITE_GRAASP_DOMAIN: process.env.VITE_GRAASP_DOMAIN,
+      VITE_GRAASP_API_HOST: process.env.VITE_GRAASP_API_HOST,
+      VITE_SHOW_NOTIFICATIONS: false,
+      VITE_GRAASP_AUTH_HOST: process.env.VITE_GRAASP_AUTH_HOST,
+      VITE_GRAASP_PLAYER_HOST: process.env.VITE_GRAASP_PLAYER_HOST,
+      VITE_GRAASP_ANALYZER_HOST: process.env.VITE_GRAASP_ANALYZER_HOST,
+      VITE_GRAASP_LIBRARY_HOST: process.env.VITE_GRAASP_LIBRARY_HOST,
+      VITE_GRAASP_ACCOUNT_HOST: process.env.VITE_GRAASP_ACCOUNT_HOST,
     },
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
diff --git a/cypress/e2e/item/copy/gridCopyItem.cy.ts b/cypress/e2e/item/copy/gridCopyItem.cy.ts
index 59b4fc29d..4f5efc4ae 100644
--- a/cypress/e2e/item/copy/gridCopyItem.cy.ts
+++ b/cypress/e2e/item/copy/gridCopyItem.cy.ts
@@ -6,7 +6,7 @@ import {
   buildItemMenu,
   buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const copyItem = ({
@@ -28,7 +28,7 @@ describe('Copy Item in Grid', () => {
   it('copy item on Home', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(HOME_PATH);
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
 
     // copy
     const { id: copyItemId } = SAMPLE_ITEMS.items[0];
@@ -47,7 +47,7 @@ describe('Copy Item in Grid', () => {
 
     // go to children item
     cy.visit(buildItemPath(id));
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
 
     // copy
     const { id: copyItemId } = SAMPLE_ITEMS.items[2];
@@ -67,7 +67,7 @@ describe('Copy Item in Grid', () => {
 
     // go to children item
     cy.visit(buildItemPath(id));
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
 
     // copy
     const { id: copyItemId } = SAMPLE_ITEMS.items[2];
diff --git a/cypress/e2e/item/copy/listCopyItem.cy.ts b/cypress/e2e/item/copy/listCopyItem.cy.ts
index aaefe8e10..6ba34a4bf 100644
--- a/cypress/e2e/item/copy/listCopyItem.cy.ts
+++ b/cypress/e2e/item/copy/listCopyItem.cy.ts
@@ -6,7 +6,7 @@ import {
   buildItemMenuButtonId,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
-import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const copyItem = ({
@@ -27,7 +27,7 @@ describe('Copy Item in List', () => {
   it('copy item on Home', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(HOME_PATH);
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // copy
     const { id: copyItemId } = SAMPLE_ITEMS.items[0];
@@ -46,7 +46,7 @@ describe('Copy Item in List', () => {
 
     // go to children item
     cy.visit(buildItemPath(id));
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // copy
     const { id: copyItemId } = SAMPLE_ITEMS.items[2];
@@ -66,7 +66,7 @@ describe('Copy Item in List', () => {
 
     // go to children item
     cy.visit(buildItemPath(id));
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // copy
     const { id: copyItemId } = SAMPLE_ITEMS.items[2];
diff --git a/cypress/e2e/item/copy/listCopyMultiple.cy.ts b/cypress/e2e/item/copy/listCopyMultiple.cy.ts
index a8d7f742c..ca7b2496c 100644
--- a/cypress/e2e/item/copy/listCopyMultiple.cy.ts
+++ b/cypress/e2e/item/copy/listCopyMultiple.cy.ts
@@ -4,7 +4,7 @@ import {
   MY_GRAASP_ITEM_PATH,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
-import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const copyItems = ({
@@ -30,7 +30,7 @@ describe('Copy items in List', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(HOME_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     const itemIds = [SAMPLE_ITEMS.items[0].id, SAMPLE_ITEMS.items[5].id];
     const { path: toItemPath } = SAMPLE_ITEMS.items[1];
@@ -50,7 +50,7 @@ describe('Copy items in List', () => {
 
     // go to children item
     cy.visit(buildItemPath(start));
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // copy
     const itemIds = [SAMPLE_ITEMS.items[2].id, SAMPLE_ITEMS.items[4].id];
@@ -72,7 +72,7 @@ describe('Copy items in List', () => {
 
     // go to children item
     cy.visit(buildItemPath(start));
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // copy
     const itemIds = [SAMPLE_ITEMS.items[2].id, SAMPLE_ITEMS.items[4].id];
diff --git a/cypress/e2e/item/create/createApp.cy.ts b/cypress/e2e/item/create/createApp.cy.ts
index 2a4d5c0cf..abb657d33 100644
--- a/cypress/e2e/item/create/createApp.cy.ts
+++ b/cypress/e2e/item/create/createApp.cy.ts
@@ -1,5 +1,5 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
-import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
 import {
   GRAASP_APP_ITEM,
   GRAASP_CUSTOM_APP_ITEM,
@@ -14,7 +14,7 @@ describe('Create App', () => {
       cy.setUpApi();
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       // create
       createApp(GRAASP_APP_ITEM, { id: APPS_LIST[0].id });
@@ -29,7 +29,7 @@ describe('Create App', () => {
       cy.setUpApi();
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       // create
       createApp(GRAASP_APP_ITEM, { custom: true });
@@ -49,7 +49,7 @@ describe('Create App', () => {
       // go to children item
       cy.visit(buildItemPath(id));
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       // create
       createApp(GRAASP_APP_ITEM, { id: APPS_LIST[0].id });
@@ -67,7 +67,7 @@ describe('Create App', () => {
       // go to children item
       cy.visit(buildItemPath(id));
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       // create
       createApp(GRAASP_CUSTOM_APP_ITEM, { custom: true });
diff --git a/cypress/e2e/item/create/createDocument.cy.ts b/cypress/e2e/item/create/createDocument.cy.ts
index 699a2ead1..e9f1db848 100644
--- a/cypress/e2e/item/create/createDocument.cy.ts
+++ b/cypress/e2e/item/create/createDocument.cy.ts
@@ -1,7 +1,7 @@
 import { ITEM_FORM_CONFIRM_BUTTON_ID } from '@/config/selectors';
 
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
-import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
 import {
   GRAASP_DOCUMENT_BLANK_NAME_ITEM,
   GRAASP_DOCUMENT_ITEM,
@@ -14,7 +14,7 @@ describe('Create Document', () => {
     cy.setUpApi();
     cy.visit(HOME_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // create
     createDocument(GRAASP_DOCUMENT_ITEM);
@@ -32,7 +32,7 @@ describe('Create Document', () => {
     // go to children item
     cy.visit(buildItemPath(id));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // create
     createDocument(GRAASP_DOCUMENT_ITEM);
@@ -47,7 +47,7 @@ describe('Create Document', () => {
     cy.setUpApi();
     cy.visit(HOME_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
     createDocument(GRAASP_DOCUMENT_BLANK_NAME_ITEM, { confirm: false });
 
     cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).should(
diff --git a/cypress/e2e/item/create/createFile.cy.ts b/cypress/e2e/item/create/createFile.cy.ts
index 01df2b4ff..76dbafd2b 100644
--- a/cypress/e2e/item/create/createFile.cy.ts
+++ b/cypress/e2e/item/create/createFile.cy.ts
@@ -1,5 +1,5 @@
 // import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
-// import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+// import ItemLayoutMode from '../../../../src/enums/itemLayoutModes';
 // import { IMAGE_ITEM_DEFAULT, IMAGE_ITEM_S3 } from '../../../fixtures/files';
 // import { SAMPLE_ITEMS } from '../../../fixtures/items';
 // import { CREATE_ITEM_PAUSE } from '../../../support/constants';
@@ -12,7 +12,7 @@
 //     cy.setUpApi();
 //     cy.visit(HOME_PATH);
 
-//     cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+//     cy.switchMode(ItemLayoutMode.List);
 
 //     // create
 //     createFile(IMAGE_ITEM_DEFAULT);
@@ -32,7 +32,7 @@
 //     // go to children item
 //     cy.visit(buildItemPath(id));
 
-//     cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+//     cy.switchMode(ItemLayoutMode.List);
 
 //     // create
 //     createFile(IMAGE_ITEM_S3);
diff --git a/cypress/e2e/item/create/createFolder.cy.ts b/cypress/e2e/item/create/createFolder.cy.ts
index 6087d2e09..f1213ae63 100644
--- a/cypress/e2e/item/create/createFolder.cy.ts
+++ b/cypress/e2e/item/create/createFolder.cy.ts
@@ -5,7 +5,7 @@ import {
   ITEM_FORM_NAME_INPUT_ID,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
-import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
 import {
   CREATED_BLANK_NAME_ITEM,
   CREATED_ITEM,
@@ -19,7 +19,7 @@ describe('Create Folder', () => {
       cy.setUpApi();
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       // create
       createFolder(CREATED_ITEM);
@@ -34,7 +34,7 @@ describe('Create Folder', () => {
       // go to children item
       cy.visit(buildItemPath(id));
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       // create
       createFolder(CREATED_ITEM);
@@ -58,7 +58,7 @@ describe('Create Folder', () => {
     it('create folder on Home', () => {
       cy.setUpApi();
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       // create
       createFolder(CREATED_ITEM);
@@ -77,7 +77,7 @@ describe('Create Folder', () => {
 
       // go to children item
       cy.visit(buildItemPath(id));
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       // create
       createFolder(CREATED_ITEM);
@@ -97,7 +97,7 @@ describe('Create Folder', () => {
       // go to children item
       cy.visit(buildItemPath(id));
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       // create
       createFolder(CREATED_ITEM);
diff --git a/cypress/e2e/item/create/createLink.cy.ts b/cypress/e2e/item/create/createLink.cy.ts
index e2f076969..0c2ccb03d 100644
--- a/cypress/e2e/item/create/createLink.cy.ts
+++ b/cypress/e2e/item/create/createLink.cy.ts
@@ -1,6 +1,6 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import { ITEM_FORM_CONFIRM_BUTTON_ID } from '../../../../src/config/selectors';
-import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import {
   GRAASP_LINK_ITEM,
@@ -15,7 +15,7 @@ describe('Create Link', () => {
     cy.setUpApi();
     cy.visit(HOME_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // create
     createLink(GRAASP_LINK_ITEM);
@@ -33,7 +33,7 @@ describe('Create Link', () => {
     cy.setUpApi();
     cy.visit(HOME_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // create
     createLink(GRAASP_LINK_ITEM_NO_PROTOCOL);
@@ -54,7 +54,7 @@ describe('Create Link', () => {
     // go to children item
     cy.visit(buildItemPath(id));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // create
     createLink(GRAASP_LINK_ITEM);
@@ -76,7 +76,7 @@ describe('Create Link', () => {
       // go to children item
       cy.visit(buildItemPath(id));
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       // create
       createLink(INVALID_LINK_ITEM, {
diff --git a/cypress/e2e/item/create/createShortcut.cy.ts b/cypress/e2e/item/create/createShortcut.cy.ts
index d143b7340..20b3f85ff 100644
--- a/cypress/e2e/item/create/createShortcut.cy.ts
+++ b/cypress/e2e/item/create/createShortcut.cy.ts
@@ -9,7 +9,7 @@ import {
   buildItemMenu,
   buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
-import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
 import { IMAGE_ITEM_DEFAULT } from '../../../fixtures/files';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
@@ -123,7 +123,7 @@ describe('Create Shortcut', () => {
     it('create shortcut from Home to Home', () => {
       cy.setUpApi({ items: [...SAMPLE_ITEMS.items, IMAGE_ITEM_DEFAULT] });
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const { id } = SAMPLE_ITEMS.items[0];
       createShortcutInGrid({ id, toItemPath: MY_GRAASP_ITEM_PATH });
@@ -134,7 +134,7 @@ describe('Create Shortcut', () => {
     it('create shortcut from Home to Item', () => {
       cy.setUpApi({ items: [...SAMPLE_ITEMS.items, IMAGE_ITEM_DEFAULT] });
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const { id } = SAMPLE_ITEMS.items[0];
       const { id: toItemId, path: toItemPath } = SAMPLE_ITEMS.items[3];
@@ -146,7 +146,7 @@ describe('Create Shortcut', () => {
     it('create shortcut from Item to Item', () => {
       cy.setUpApi({ items: [...SAMPLE_ITEMS.items, IMAGE_ITEM_DEFAULT] });
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const { id } = SAMPLE_ITEMS.items[1];
       const { id: toItemId, path: toItemPath } = SAMPLE_ITEMS.items[3];
@@ -158,7 +158,7 @@ describe('Create Shortcut', () => {
     it('create shortcut from file to Item', () => {
       cy.setUpApi({ items: [...SAMPLE_ITEMS.items, IMAGE_ITEM_DEFAULT] });
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const { id } = IMAGE_ITEM_DEFAULT;
       const { id: toItemId, path: toItemPath } = SAMPLE_ITEMS.items[3];
diff --git a/cypress/e2e/item/create/importZip.cy.ts b/cypress/e2e/item/create/importZip.cy.ts
index 0d417d683..8f5175f76 100644
--- a/cypress/e2e/item/create/importZip.cy.ts
+++ b/cypress/e2e/item/create/importZip.cy.ts
@@ -1,6 +1,6 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import { ZIP_DASHBOARD_UPLOADER_ID } from '../../../../src/config/selectors';
-import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
 import { ZIP_DEFAULT } from '../../../fixtures/files';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import { createItem } from '../../../support/createUtils';
@@ -10,7 +10,7 @@ describe('Import Zip', () => {
     cy.setUpApi();
     cy.visit(HOME_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // create
     createItem(ZIP_DEFAULT);
@@ -25,7 +25,7 @@ describe('Import Zip', () => {
     const { id } = SAMPLE_ITEMS.items[0];
     cy.visit(buildItemPath(id));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // create
     createItem(ZIP_DEFAULT);
@@ -40,7 +40,7 @@ describe('Import Zip', () => {
     const { id } = SAMPLE_ITEMS.items[0];
     cy.visit(buildItemPath(id));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // create
     createItem(ZIP_DEFAULT);
diff --git a/cypress/e2e/item/delete/gridRecycleItem.cy.ts b/cypress/e2e/item/delete/gridRecycleItem.cy.ts
index cad6bbe70..fb96a3834 100644
--- a/cypress/e2e/item/delete/gridRecycleItem.cy.ts
+++ b/cypress/e2e/item/delete/gridRecycleItem.cy.ts
@@ -4,7 +4,7 @@ import {
   buildItemMenu,
   buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const recycleItem = (id: string) => {
@@ -17,7 +17,7 @@ describe('Recycle Item in Grid', () => {
   it('recycle item on Home', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(HOME_PATH);
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
 
     const { id } = SAMPLE_ITEMS.items[0];
 
@@ -33,7 +33,7 @@ describe('Recycle Item in Grid', () => {
 
     // go to children item
     cy.visit(buildItemPath(id));
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
 
     // recycle
     recycleItem(idToDelete);
diff --git a/cypress/e2e/item/delete/listDeleteItem.cy.ts b/cypress/e2e/item/delete/listDeleteItem.cy.ts
index ea0e814a8..cbe82e34e 100644
--- a/cypress/e2e/item/delete/listDeleteItem.cy.ts
+++ b/cypress/e2e/item/delete/listDeleteItem.cy.ts
@@ -4,7 +4,7 @@ import {
   ITEM_DELETE_BUTTON_CLASS,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { RECYCLED_ITEM_DATA, SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const deleteItem = (id: string) => {
@@ -19,7 +19,7 @@ describe('Delete Item in List', () => {
     cy.setUpApi({ ...SAMPLE_ITEMS, recycledItemData: RECYCLED_ITEM_DATA });
     cy.visit(RECYCLE_BIN_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
     const { id } = RECYCLED_ITEM_DATA[0].item;
 
     // delete
diff --git a/cypress/e2e/item/delete/listDeleteItems.cy.ts b/cypress/e2e/item/delete/listDeleteItems.cy.ts
index 38607729d..1647ac180 100644
--- a/cypress/e2e/item/delete/listDeleteItems.cy.ts
+++ b/cypress/e2e/item/delete/listDeleteItems.cy.ts
@@ -4,7 +4,7 @@ import {
   ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { RECYCLED_ITEM_DATA, SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const deleteItems = (itemIds: string[]) => {
@@ -26,7 +26,7 @@ describe('Delete Items in List', () => {
     cy.setUpApi({ ...SAMPLE_ITEMS, recycledItemData: RECYCLED_ITEM_DATA });
     cy.visit(RECYCLE_BIN_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // delete
     deleteItems(itemIds);
diff --git a/cypress/e2e/item/delete/listRecycleItem.cy.ts b/cypress/e2e/item/delete/listRecycleItem.cy.ts
index 57a9ae45a..5f9b7dc90 100644
--- a/cypress/e2e/item/delete/listRecycleItem.cy.ts
+++ b/cypress/e2e/item/delete/listRecycleItem.cy.ts
@@ -4,7 +4,7 @@ import {
   buildItemMenu,
   buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const recycleItem = (id: string) => {
@@ -17,7 +17,7 @@ describe('Recycle Item in List', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(HOME_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     const { id } = SAMPLE_ITEMS.items[0];
 
@@ -37,7 +37,7 @@ describe('Recycle Item in List', () => {
     // go to children item
     cy.visit(buildItemPath(id));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // delete
     recycleItem(idToDelete);
diff --git a/cypress/e2e/item/delete/listRecycleItems.cy.ts b/cypress/e2e/item/delete/listRecycleItems.cy.ts
index 17e8ee0a5..66483a47d 100644
--- a/cypress/e2e/item/delete/listRecycleItems.cy.ts
+++ b/cypress/e2e/item/delete/listRecycleItems.cy.ts
@@ -3,7 +3,7 @@ import {
   ITEMS_TABLE_RECYCLE_SELECTED_ITEMS_ID,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const recycleItems = (itemIds: string[]) => {
@@ -20,7 +20,7 @@ describe('Recycle Items in List', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(HOME_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // delete
     recycleItems([SAMPLE_ITEMS.items[0].id, SAMPLE_ITEMS.items[1].id]);
@@ -31,7 +31,7 @@ describe('Recycle Items in List', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(buildItemPath(SAMPLE_ITEMS.items[0].id));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // delete
     recycleItems([SAMPLE_ITEMS.items[2].id, SAMPLE_ITEMS.items[3].id]);
diff --git a/cypress/e2e/item/delete/listRestoreItem.cy.ts b/cypress/e2e/item/delete/listRestoreItem.cy.ts
index c84b5e549..2be701610 100644
--- a/cypress/e2e/item/delete/listRestoreItem.cy.ts
+++ b/cypress/e2e/item/delete/listRestoreItem.cy.ts
@@ -4,7 +4,7 @@ import {
   RESTORE_ITEMS_BUTTON_CLASS,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { RECYCLED_ITEM_DATA, SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const restoreItem = (id: string) => {
@@ -27,7 +27,7 @@ describe('Restore Items in List', () => {
     cy.setUpApi({ ...SAMPLE_ITEMS, recycledItemData: RECYCLED_ITEM_DATA });
     cy.visit(RECYCLE_BIN_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
     const { id } = RECYCLED_ITEM_DATA[0].item;
 
     // restore
@@ -42,7 +42,7 @@ describe('Restore Items in List', () => {
     cy.setUpApi({ ...SAMPLE_ITEMS, recycledItemData: RECYCLED_ITEM_DATA });
     cy.visit(RECYCLE_BIN_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // restore
     const itemIds = RECYCLED_ITEM_DATA.map(({ item }) => item.id);
diff --git a/cypress/e2e/item/download/downloadItem.cy.ts b/cypress/e2e/item/download/downloadItem.cy.ts
index f3d47a527..2dfb00767 100644
--- a/cypress/e2e/item/download/downloadItem.cy.ts
+++ b/cypress/e2e/item/download/downloadItem.cy.ts
@@ -1,5 +1,5 @@
 import { buildDownloadButtonId } from '@/config/selectors';
-import { ITEM_LAYOUT_MODES } from '@/enums';
+import { ItemLayoutMode } from '@/enums';
 
 import { SHARED_ITEMS_PATH, buildItemPath } from '../../../../src/config/paths';
 import { SAMPLE_PUBLIC_ITEMS } from '../../../fixtures/items';
@@ -19,7 +19,7 @@ describe('Download Item', () => {
   it('Grid view', () => {
     cy.setUpApi(SHARED_ITEMS);
     cy.visit(SHARED_ITEMS_PATH);
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
     cy.wait('@getSharedItems').then(({ response: { body } }) => {
       for (const item of body) {
         cy.get(`#${buildDownloadButtonId(item.id)}`).should('exist');
diff --git a/cypress/e2e/item/duplicate/duplicateItem.cy.ts b/cypress/e2e/item/duplicate/duplicateItem.cy.ts
index f28584836..2f25757b7 100644
--- a/cypress/e2e/item/duplicate/duplicateItem.cy.ts
+++ b/cypress/e2e/item/duplicate/duplicateItem.cy.ts
@@ -1,12 +1,12 @@
 import { getParentsIdsFromPath } from '@/utils/item';
 
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
-import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import duplicateItem from '../../../support/actionsUtils';
 
 describe('duplicate Item in Home', () => {
-  Object.values(ITEM_LAYOUT_MODES).forEach((view) => {
+  Object.values(ItemLayoutMode).forEach((view) => {
     it(`duplicate item on Home in ${view} view`, () => {
       cy.setUpApi(SAMPLE_ITEMS);
       cy.visit(HOME_PATH);
@@ -25,7 +25,7 @@ describe('duplicate Item in Home', () => {
   });
 });
 describe('duplicate Item in item', () => {
-  Object.values(ITEM_LAYOUT_MODES).forEach((view) => {
+  Object.values(ItemLayoutMode).forEach((view) => {
     it(`duplicate item in item in ${view} view`, () => {
       cy.setUpApi(SAMPLE_ITEMS);
       const { id, path } = SAMPLE_ITEMS.items[0];
diff --git a/cypress/e2e/item/edit/editApp.cy.ts b/cypress/e2e/item/edit/editApp.cy.ts
index 34f0c63df..5e2c2ff45 100644
--- a/cypress/e2e/item/edit/editApp.cy.ts
+++ b/cypress/e2e/item/edit/editApp.cy.ts
@@ -8,7 +8,7 @@ import {
   TEXT_EDITOR_CLASS,
   buildEditButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import {
   GRAASP_APP_CHILDREN_ITEM,
   GRAASP_APP_ITEM,
@@ -66,7 +66,7 @@ describe('Edit App', () => {
       cy.setUpApi({ items: [itemToEdit, GRAASP_LINK_ITEM] });
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       // edit
       editItem(
@@ -74,7 +74,7 @@ describe('Edit App', () => {
           ...itemToEdit,
           ...newFields,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -99,7 +99,7 @@ describe('Edit App', () => {
       // go to children item
       cy.visit(buildItemPath(parent.id));
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       // edit
       editItem(
@@ -107,7 +107,7 @@ describe('Edit App', () => {
           ...itemToEdit,
           ...newFields,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -130,7 +130,7 @@ describe('Edit App', () => {
     it('edit app on Home', () => {
       cy.setUpApi({ items: GRAASP_APP_ITEMS_FIXTURE });
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = GRAASP_APP_ITEM;
 
@@ -140,7 +140,7 @@ describe('Edit App', () => {
           ...itemToEdit,
           ...newFields,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
@@ -163,7 +163,7 @@ describe('Edit App', () => {
       // go to children item
       const parent = GRAASP_APP_PARENT_FOLDER;
       cy.visit(buildItemPath(parent.id));
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = GRAASP_APP_CHILDREN_ITEM;
 
@@ -173,7 +173,7 @@ describe('Edit App', () => {
           ...itemToEdit,
           ...newFields,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
diff --git a/cypress/e2e/item/edit/editDocument.cy.ts b/cypress/e2e/item/edit/editDocument.cy.ts
index 194d7ecfc..74b5db4f4 100644
--- a/cypress/e2e/item/edit/editDocument.cy.ts
+++ b/cypress/e2e/item/edit/editDocument.cy.ts
@@ -7,7 +7,7 @@ import {
   TEXT_EDITOR_CLASS,
   buildEditButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import {
   GRAASP_DOCUMENT_CHILDREN_ITEM,
   GRAASP_DOCUMENT_ITEM,
@@ -34,7 +34,7 @@ describe('Edit Document', () => {
       cy.setUpApi({ items: [GRAASP_DOCUMENT_ITEM, GRAASP_LINK_ITEM] });
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       const itemToEdit = GRAASP_DOCUMENT_ITEM;
 
@@ -44,7 +44,7 @@ describe('Edit Document', () => {
           ...itemToEdit,
           ...newFields,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -69,7 +69,7 @@ describe('Edit Document', () => {
       // go to children item
       cy.visit(buildItemPath(parent.id));
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       const itemToEdit = GRAASP_DOCUMENT_CHILDREN_ITEM;
 
@@ -79,7 +79,7 @@ describe('Edit Document', () => {
           ...itemToEdit,
           ...newFields,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -103,7 +103,7 @@ describe('Edit Document', () => {
     it('edit on Home', () => {
       cy.setUpApi({ items: GRAASP_DOCUMENT_ITEMS_FIXTURE });
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = GRAASP_DOCUMENT_ITEM;
 
@@ -113,7 +113,7 @@ describe('Edit Document', () => {
           ...itemToEdit,
           ...newFields,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
@@ -137,7 +137,7 @@ describe('Edit Document', () => {
       // go to children item
       const parent = GRAASP_DOCUMENT_PARENT_FOLDER;
       cy.visit(buildItemPath(parent.id));
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = GRAASP_DOCUMENT_CHILDREN_ITEM;
 
@@ -147,7 +147,7 @@ describe('Edit Document', () => {
           ...itemToEdit,
           ...newFields,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
diff --git a/cypress/e2e/item/edit/editEtherpad.cy.ts b/cypress/e2e/item/edit/editEtherpad.cy.ts
index 81b3de804..743cb119f 100644
--- a/cypress/e2e/item/edit/editEtherpad.cy.ts
+++ b/cypress/e2e/item/edit/editEtherpad.cy.ts
@@ -1,5 +1,5 @@
 import { HOME_PATH } from '../../../../src/config/paths';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { GRAASP_ETHERPAD_ITEM } from '../../../fixtures/etherpad';
 import { EDITED_FIELDS } from '../../../fixtures/items';
 import { EDIT_ITEM_PAUSE } from '../../../support/constants';
@@ -14,7 +14,7 @@ describe('Edit Etherpad', () => {
     it('edit etherpad on Home', () => {
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       const itemToEdit = GRAASP_ETHERPAD_ITEM;
 
@@ -24,7 +24,7 @@ describe('Edit Etherpad', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -46,7 +46,7 @@ describe('Edit Etherpad', () => {
   describe('Grid', () => {
     it('edit etherpad on Home', () => {
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = GRAASP_ETHERPAD_ITEM;
 
@@ -56,7 +56,7 @@ describe('Edit Etherpad', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
diff --git a/cypress/e2e/item/edit/editFile.cy.ts b/cypress/e2e/item/edit/editFile.cy.ts
index fb3c74764..ff529a14b 100644
--- a/cypress/e2e/item/edit/editFile.cy.ts
+++ b/cypress/e2e/item/edit/editFile.cy.ts
@@ -4,7 +4,7 @@ import {
   TEXT_EDITOR_CLASS,
   buildEditButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { IMAGE_ITEM_DEFAULT, VIDEO_ITEM_S3 } from '../../../fixtures/files';
 import { EDITED_FIELDS } from '../../../fixtures/items';
 import { EDIT_ITEM_PAUSE } from '../../../support/constants';
@@ -65,7 +65,7 @@ describe('Edit File', () => {
     it('edit file on Home', () => {
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       const itemToEdit = IMAGE_ITEM_DEFAULT;
 
@@ -75,7 +75,7 @@ describe('Edit File', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -97,7 +97,7 @@ describe('Edit File', () => {
   describe('Grid', () => {
     it('edit file on Home', () => {
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = VIDEO_ITEM_S3;
 
@@ -107,7 +107,7 @@ describe('Edit File', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
diff --git a/cypress/e2e/item/edit/editFolder.cy.ts b/cypress/e2e/item/edit/editFolder.cy.ts
index 2765dd190..82878ac58 100644
--- a/cypress/e2e/item/edit/editFolder.cy.ts
+++ b/cypress/e2e/item/edit/editFolder.cy.ts
@@ -3,7 +3,7 @@ import {
   ITEM_FORM_CONFIRM_BUTTON_ID,
   buildEditButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { EDITED_FIELDS, SAMPLE_ITEMS } from '../../../fixtures/items';
 import { EDIT_ITEM_PAUSE } from '../../../support/constants';
 import { editItem } from '../../../support/editUtils';
@@ -17,7 +17,7 @@ describe('Edit Folder', () => {
       //   const { id } = item;
       //   cy.setUpApi({ items: [item] });
       //   cy.visit(buildItemPath(id));
-      //   cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      //   cy.switchMode(ItemLayoutMode.List);
       //   const caption = 'new caption';
       //   editCaptionFromViewPage({ id, caption });
       //   cy.wait(`@editItem`).then(({ request: { url: endpointUrl, body } }) => {
@@ -52,7 +52,7 @@ describe('Edit Folder', () => {
       cy.setUpApi(SAMPLE_ITEMS);
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       const itemToEdit = SAMPLE_ITEMS.items[0];
       const newDescription = 'new description';
@@ -63,7 +63,7 @@ describe('Edit Folder', () => {
           ...EDITED_FIELDS,
           description: newDescription,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -87,7 +87,7 @@ describe('Edit Folder', () => {
       // go to children item
       cy.visit(buildItemPath(SAMPLE_ITEMS.items[0].id));
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       const itemToEdit = SAMPLE_ITEMS.items[2];
 
@@ -97,7 +97,7 @@ describe('Edit Folder', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -126,7 +126,7 @@ describe('Edit Folder', () => {
       //   const { id } = item;
       //   cy.setUpApi({ items: [item] });
       //   cy.visit(buildItemPath(id));
-      //   cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      //   cy.switchMode(ItemLayoutMode.Grid);
       //   const caption = 'new caption';
       //   editCaptionFromViewPage({ id, caption });
       //   cy.wait(`@editItem`).then(({ request: { url: endpointUrl, body } }) => {
@@ -140,7 +140,7 @@ describe('Edit Folder', () => {
     it('edit folder on Home', () => {
       cy.setUpApi(SAMPLE_ITEMS);
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = SAMPLE_ITEMS.items[0];
 
@@ -150,7 +150,7 @@ describe('Edit Folder', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
@@ -172,7 +172,7 @@ describe('Edit Folder', () => {
       cy.setUpApi(SAMPLE_ITEMS);
       // go to children item
       cy.visit(buildItemPath(SAMPLE_ITEMS.items[0].id));
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = SAMPLE_ITEMS.items[2];
 
@@ -182,7 +182,7 @@ describe('Edit Folder', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
diff --git a/cypress/e2e/item/edit/editH5p.cy.ts b/cypress/e2e/item/edit/editH5p.cy.ts
index 854476d73..03f451c45 100644
--- a/cypress/e2e/item/edit/editH5p.cy.ts
+++ b/cypress/e2e/item/edit/editH5p.cy.ts
@@ -1,5 +1,5 @@
 import { HOME_PATH } from '../../../../src/config/paths';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { GRAASP_H5P_ITEM } from '../../../fixtures/h5p';
 import { EDITED_FIELDS } from '../../../fixtures/items';
 import { EDIT_ITEM_PAUSE } from '../../../support/constants';
@@ -14,7 +14,7 @@ describe('Edit H5P', () => {
     it('edit h5p on Home', () => {
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       const itemToEdit = GRAASP_H5P_ITEM;
 
@@ -24,7 +24,7 @@ describe('Edit H5P', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -46,7 +46,7 @@ describe('Edit H5P', () => {
   describe('Grid', () => {
     it('edit h5p on Home', () => {
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = GRAASP_H5P_ITEM;
 
@@ -56,7 +56,7 @@ describe('Edit H5P', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
diff --git a/cypress/e2e/item/edit/editLink.cy.ts b/cypress/e2e/item/edit/editLink.cy.ts
index f2a61a058..5800db72a 100644
--- a/cypress/e2e/item/edit/editLink.cy.ts
+++ b/cypress/e2e/item/edit/editLink.cy.ts
@@ -6,7 +6,7 @@ import {
   TEXT_EDITOR_CLASS,
   buildEditButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { EDITED_FIELDS } from '../../../fixtures/items';
 import { GRAASP_LINK_ITEM, YOUTUBE_LINK_ITEM } from '../../../fixtures/links';
 import {
@@ -53,7 +53,7 @@ describe('Edit Link', () => {
     it('edit link on Home', () => {
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       const itemToEdit = GRAASP_LINK_ITEM;
 
@@ -63,7 +63,7 @@ describe('Edit Link', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -85,7 +85,7 @@ describe('Edit Link', () => {
   describe('Grid', () => {
     it('edit link on Home', () => {
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = GRAASP_LINK_ITEM;
 
@@ -95,7 +95,7 @@ describe('Edit Link', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
diff --git a/cypress/e2e/item/edit/editShortcut.cy.ts b/cypress/e2e/item/edit/editShortcut.cy.ts
index 5f96d06e9..6627f321b 100644
--- a/cypress/e2e/item/edit/editShortcut.cy.ts
+++ b/cypress/e2e/item/edit/editShortcut.cy.ts
@@ -1,5 +1,5 @@
 import { HOME_PATH } from '../../../../src/config/paths';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { EDITED_FIELDS, SHORTCUT } from '../../../fixtures/items';
 import { GRAASP_LINK_ITEM, YOUTUBE_LINK_ITEM } from '../../../fixtures/links';
 import { EDIT_ITEM_PAUSE } from '../../../support/constants';
@@ -14,7 +14,7 @@ describe('Edit Shortcut', () => {
     it('edit shortcut on Home', () => {
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
 
       const itemToEdit = SHORTCUT;
 
@@ -24,7 +24,7 @@ describe('Edit Shortcut', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.LIST,
+        ItemLayoutMode.List,
       );
 
       cy.wait('@editItem').then(
@@ -46,7 +46,7 @@ describe('Edit Shortcut', () => {
   describe('Grid', () => {
     it('edit shortcut on Home', () => {
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       const itemToEdit = SHORTCUT;
 
@@ -56,7 +56,7 @@ describe('Edit Shortcut', () => {
           ...itemToEdit,
           ...EDITED_FIELDS,
         },
-        ITEM_LAYOUT_MODES.GRID,
+        ItemLayoutMode.Grid,
       );
 
       cy.wait('@editItem').then(
diff --git a/cypress/e2e/item/hide/hideItem.cy.ts b/cypress/e2e/item/hide/hideItem.cy.ts
index a273f913e..21b2375c8 100644
--- a/cypress/e2e/item/hide/hideItem.cy.ts
+++ b/cypress/e2e/item/hide/hideItem.cy.ts
@@ -7,7 +7,7 @@ import {
   buildItemMenu,
   buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import {
   CHILD_HIDDEN_ITEM,
   HIDDEN_ITEM,
@@ -78,7 +78,7 @@ describe('Hiding Item', () => {
 
     it('Hide an item', () => {
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
       const item = ITEMS_SETTINGS.items[1];
 
       toggleHideButton(item.id, false);
@@ -93,7 +93,7 @@ describe('Hiding Item', () => {
 
     it('Show an Item', () => {
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
       const item = ITEMS_SETTINGS.items[0];
 
       toggleHideButton(item.id, true);
@@ -108,7 +108,7 @@ describe('Hiding Item', () => {
 
     it('Cannot hide child of hidden item', () => {
       cy.visit(buildItemPath(HIDDEN_ITEM.id));
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       cy.get(`#${buildItemMenuButtonId(CHILD_HIDDEN_ITEM.id)}`).click();
       cy.get(
diff --git a/cypress/e2e/item/home/home.cy.ts b/cypress/e2e/item/home/home.cy.ts
index 696071bc3..22a1f55e9 100644
--- a/cypress/e2e/item/home/home.cy.ts
+++ b/cypress/e2e/item/home/home.cy.ts
@@ -12,7 +12,7 @@ import {
   buildItemsTableRowIdAttribute,
   buildItemsTableRowSelector,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { BUILDER } from '../../../../src/langs/constants';
 import { SAMPLE_ITEMS, generateOwnItems } from '../../../fixtures/items';
 import { CURRENT_USER } from '../../../fixtures/members';
@@ -43,7 +43,7 @@ describe('Home', () => {
         });
         i18n.changeLanguage(CURRENT_USER.extra.lang as string);
         cy.visit(HOME_PATH);
-        cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+        cy.switchMode(ItemLayoutMode.Grid);
       });
 
       it('Show only created by me checkbox should trigger refetch', () => {
@@ -143,7 +143,7 @@ describe('Home', () => {
         cy.setUpApi(SAMPLE_ITEMS);
         i18n.changeLanguage(CURRENT_USER.extra.lang as string);
         cy.visit(HOME_PATH);
-        cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+        cy.switchMode(ItemLayoutMode.Grid);
       });
 
       it('visit Home', () => {
@@ -211,7 +211,7 @@ describe('Home', () => {
       beforeEach(() => {
         cy.setUpApi(SAMPLE_ITEMS);
         cy.visit(HOME_PATH);
-        cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+        cy.switchMode(ItemLayoutMode.List);
       });
 
       it('visit Home', () => {
@@ -252,7 +252,7 @@ describe('Home', () => {
           items: sampleItems,
         });
         cy.visit(HOME_PATH);
-        cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+        cy.switchMode(ItemLayoutMode.List);
       });
 
       it('Show only created by me checkbox should trigger refetch', () => {
diff --git a/cypress/e2e/item/move/gridMoveItem.cy.ts b/cypress/e2e/item/move/gridMoveItem.cy.ts
index def6037d2..d162f7096 100644
--- a/cypress/e2e/item/move/gridMoveItem.cy.ts
+++ b/cypress/e2e/item/move/gridMoveItem.cy.ts
@@ -5,7 +5,7 @@ import {
   buildItemMenu,
   buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const moveItem = ({
@@ -28,7 +28,7 @@ describe('Move Item in Grid', () => {
   it('move item from Home', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(HOME_PATH);
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[0];
@@ -47,7 +47,7 @@ describe('Move Item in Grid', () => {
 
     // go to children item
     cy.visit(buildItemPath(id));
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[2];
@@ -66,7 +66,7 @@ describe('Move Item in Grid', () => {
 
     // go to children item
     cy.visit(buildItemPath(id));
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[2];
diff --git a/cypress/e2e/item/move/listMoveItem.cy.ts b/cypress/e2e/item/move/listMoveItem.cy.ts
index 3e793c059..f536adeb8 100644
--- a/cypress/e2e/item/move/listMoveItem.cy.ts
+++ b/cypress/e2e/item/move/listMoveItem.cy.ts
@@ -7,7 +7,7 @@ import {
   buildItemRowArrowId,
   buildNavigationModalItemId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const openMoveModal = ({ id: movedItemId }: { id: string }) => {
@@ -36,7 +36,7 @@ describe('Move Item in List', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(HOME_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[0];
@@ -56,7 +56,7 @@ describe('Move Item in List', () => {
     // go to children item
     cy.visit(buildItemPath(id));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[2];
@@ -76,7 +76,7 @@ describe('Move Item in List', () => {
     // go to children item
     cy.visit(buildItemPath(id));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     const { id: movedItemId } = SAMPLE_ITEMS.items[2];
     const parentId = SAMPLE_ITEMS.items[0].id;
@@ -109,7 +109,7 @@ describe('Move Item in List', () => {
     // go to children item
     cy.visit(buildItemPath(id));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[2];
diff --git a/cypress/e2e/item/move/listMoveMultiple.cy.ts b/cypress/e2e/item/move/listMoveMultiple.cy.ts
index c8f32fa46..63696da63 100644
--- a/cypress/e2e/item/move/listMoveMultiple.cy.ts
+++ b/cypress/e2e/item/move/listMoveMultiple.cy.ts
@@ -4,7 +4,7 @@ import {
   MY_GRAASP_ITEM_PATH,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const moveItems = ({
@@ -28,7 +28,7 @@ describe('Move Items in List', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(HOME_PATH);
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // move
     const itemIds = [SAMPLE_ITEMS.items[0].id, SAMPLE_ITEMS.items[5].id];
@@ -48,7 +48,7 @@ describe('Move Items in List', () => {
     // go to children item
     cy.visit(buildItemPath(start));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // move
     const itemIds = [SAMPLE_ITEMS.items[2].id, SAMPLE_ITEMS.items[4].id];
@@ -68,7 +68,7 @@ describe('Move Items in List', () => {
     // go to children item
     cy.visit(buildItemPath(start));
 
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
 
     // move
     const itemIds = [SAMPLE_ITEMS.items[2].id, SAMPLE_ITEMS.items[4].id];
diff --git a/cypress/e2e/item/pin/pinItem.cy.ts b/cypress/e2e/item/pin/pinItem.cy.ts
index 28713c56d..f11f0c95f 100644
--- a/cypress/e2e/item/pin/pinItem.cy.ts
+++ b/cypress/e2e/item/pin/pinItem.cy.ts
@@ -5,7 +5,7 @@ import {
   buildItemMenu,
   buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import {
   ITEMS_SETTINGS,
   PINNED_ITEM,
@@ -73,7 +73,7 @@ describe('Pinning Item', () => {
     beforeEach(() => {
       cy.setUpApi(ITEMS_SETTINGS);
       cy.visit(HOME_PATH);
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
     });
 
     it('Pin an item', () => {
diff --git a/cypress/e2e/item/settings/itemSettings.cy.ts b/cypress/e2e/item/settings/itemSettings.cy.ts
index ef537f15e..5955fd587 100644
--- a/cypress/e2e/item/settings/itemSettings.cy.ts
+++ b/cypress/e2e/item/settings/itemSettings.cy.ts
@@ -102,7 +102,7 @@ describe('Item Settings', () => {
         cy.get(`#${ITEM_PANEL_TABLE_ID}`).should('exist').contains(creatorName);
       });
 
-      it.only('file', () => {
+      it('file', () => {
         const { id, name, type, extra, creator } = IMAGE_ITEM_DEFAULT;
         cy.visit(buildItemSettingsPath(id));
 
diff --git a/cypress/e2e/item/shared/sharedItems.cy.ts b/cypress/e2e/item/shared/sharedItems.cy.ts
index 4a824228b..19f631055 100644
--- a/cypress/e2e/item/shared/sharedItems.cy.ts
+++ b/cypress/e2e/item/shared/sharedItems.cy.ts
@@ -9,7 +9,7 @@ import {
 import { BUILDER } from '@/langs/constants';
 
 import { SHARED_ITEMS_PATH } from '../../../../src/config/paths';
-import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import { MEMBERS } from '../../../fixtures/members';
 
@@ -24,7 +24,7 @@ describe('Shared Items', () => {
   });
   describe('Grid', () => {
     it('visit Shared Items', () => {
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       cy.wait('@getSharedItems').then(({ response: { body } }) => {
         // check item is created and displayed
@@ -51,7 +51,7 @@ describe('Shared Items', () => {
       );
     });
     it('move should be prevented', () => {
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
       const itemId = SAMPLE_ITEMS.items[1].id;
       const menuSelector = `#${buildItemMenuButtonId(itemId)}`;
       cy.get(menuSelector).click();
@@ -62,7 +62,7 @@ describe('Shared Items', () => {
   });
 
   it('move should be prevented in list', () => {
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    cy.switchMode(ItemLayoutMode.List);
     const itemId = SAMPLE_ITEMS.items[1].id;
     const menuSelector = `#${buildItemMenuButtonId(itemId)}`;
     cy.get(menuSelector).click();
diff --git a/cypress/e2e/item/upload/gridItemUpload.cy.ts b/cypress/e2e/item/upload/gridItemUpload.cy.ts
index 8cd0de2f5..c7154c9c4 100644
--- a/cypress/e2e/item/upload/gridItemUpload.cy.ts
+++ b/cypress/e2e/item/upload/gridItemUpload.cy.ts
@@ -1,6 +1,6 @@
 // import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 // import { UPLOADER_ID } from '../../../../src/config/selectors';
-// import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
+// import ItemLayoutMode from '../../../../src/enums/itemLayoutModes';
 // import { ICON_FILEPATH, TEXT_FILEPATH } from '../../../fixtures/files';
 // import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
@@ -21,7 +21,7 @@
 //     describe('upload item on Home', () => {
 //       beforeEach(() => {
 //         cy.visit(HOME_PATH);
-//         cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+//         cy.switchMode(ItemLayoutMode.Grid);
 //       });
 
 //       it('upload one file successfully', () => {
@@ -51,7 +51,7 @@
 
 //       beforeEach(() => {
 //         cy.visit(buildItemPath(id));
-//         cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+//         cy.switchMode(ItemLayoutMode.Grid);
 //       });
 
 //       it('upload one file successfully', () => {
diff --git a/cypress/e2e/item/upload/listItemUpload.cy.ts b/cypress/e2e/item/upload/listItemUpload.cy.ts
index 33d787d80..c42bcadbb 100644
--- a/cypress/e2e/item/upload/listItemUpload.cy.ts
+++ b/cypress/e2e/item/upload/listItemUpload.cy.ts
@@ -1,6 +1,6 @@
 // import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 // import { UPLOADER_ID } from '../../../../src/config/selectors';
-// import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+// import { ItemLayoutMode } from '../../../../src/enums';
 // import { ICON_FILEPATH, TEXT_FILEPATH } from '../../../fixtures/files';
 // import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
@@ -22,7 +22,7 @@
 //       beforeEach(() => {
 //         cy.visit(HOME_PATH);
 
-//         cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+//         cy.switchMode(ItemLayoutMode.List);
 //       });
 
 //       it('upload one file successfully', () => {
@@ -53,7 +53,7 @@
 //       beforeEach(() => {
 //         cy.visit(buildItemPath(id));
 
-//         cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+//         cy.switchMode(ItemLayoutMode.List);
 //       });
 
 //       it('upload one file successfully', () => {
diff --git a/cypress/e2e/item/view/viewFile.cy.ts b/cypress/e2e/item/view/viewFile.cy.ts
index 7423e25e0..bdc5f6fc6 100644
--- a/cypress/e2e/item/view/viewFile.cy.ts
+++ b/cypress/e2e/item/view/viewFile.cy.ts
@@ -1,6 +1,6 @@
 import { HOME_PATH } from '../../../../src/config/paths';
 import { buildItemsTableRowIdAttribute } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import {
   IMAGE_ITEM_DEFAULT,
   IMAGE_ITEM_S3,
@@ -19,7 +19,7 @@ describe('View Files', () => {
       });
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
     });
     it('image', () => {
       // item is displayed in table
@@ -62,7 +62,7 @@ describe('View Files', () => {
       });
       cy.visit(HOME_PATH);
 
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ItemLayoutMode.List);
     });
     it('image', () => {
       // item is displayed in table
diff --git a/cypress/e2e/item/view/viewFolder.cy.ts b/cypress/e2e/item/view/viewFolder.cy.ts
index 2ef4604ae..5e290373b 100644
--- a/cypress/e2e/item/view/viewFolder.cy.ts
+++ b/cypress/e2e/item/view/viewFolder.cy.ts
@@ -5,7 +5,7 @@ import {
   buildItemCard,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { IMAGE_ITEM_DEFAULT, VIDEO_ITEM_S3 } from '../../../fixtures/files';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import { GRAASP_LINK_ITEM } from '../../../fixtures/links';
@@ -31,7 +31,7 @@ describe('View Folder', () => {
     it('visit item by id', () => {
       const { id } = SAMPLE_ITEMS.items[0];
       cy.visit(buildItemPath(id));
-      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+      cy.switchMode(ItemLayoutMode.Grid);
 
       // should get current item
       cy.wait('@getItem');
@@ -76,7 +76,7 @@ describe('View Folder', () => {
         const { id } = SAMPLE_ITEMS.items[0];
         cy.visit(buildItemPath(id));
 
-        cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+        cy.switchMode(ItemLayoutMode.List);
 
         // should get current item
         cy.wait('@getItem');
diff --git a/cypress/e2e/item/view/viewThumbnails.cy.ts b/cypress/e2e/item/view/viewThumbnails.cy.ts
index 988a05a58..22d6c9715 100644
--- a/cypress/e2e/item/view/viewThumbnails.cy.ts
+++ b/cypress/e2e/item/view/viewThumbnails.cy.ts
@@ -4,7 +4,7 @@ import {
   buildItemCard,
   buildNameCellRendererId,
 } from '../../../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { ItemLayoutMode } from '../../../../src/enums';
 import { MEMBERS } from '../../../fixtures/members';
 import { SAMPLE_ITEMS_WITH_THUMBNAILS } from '../../../fixtures/thumbnails';
 
@@ -25,7 +25,7 @@ describe('View Thumbnails', () => {
     cy.get(`#${buildNameCellRendererId(items[1].id)} img`).should('exist');
 
     // GRID
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
     cy.get(`#${buildItemCard(items[0].id)} img`)
       .should('have.attr', 'src')
       .and('contain', 'data:');
@@ -53,7 +53,7 @@ describe('View Thumbnails', () => {
     cy.visit(SHARED_ITEMS_PATH);
 
     // check bob avatar in shared items, grid mode
-    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.switchMode(ItemLayoutMode.Grid);
     cy.get(`#${buildItemCard(items[1].id)} img`)
       .should('have.attr', 'src')
       .and('contain', MEMBERS.BOB.thumbnails);
diff --git a/cypress/e2e/redirection.cy.ts b/cypress/e2e/redirection.cy.ts
index faa1b6b1c..9c064ab4c 100644
--- a/cypress/e2e/redirection.cy.ts
+++ b/cypress/e2e/redirection.cy.ts
@@ -3,7 +3,7 @@ import { saveUrlForRedirection } from '@graasp/sdk';
 import { REDIRECT_PATH } from '../../src/config/paths';
 import { ACCESSIBLE_ITEMS_TABLE_ID } from '../../src/config/selectors';
 
-const DOMAIN = Cypress.env('REACT_APP_GRAASP_DOMAIN');
+const DOMAIN = Cypress.env('VITE_GRAASP_DOMAIN');
 
 describe('Redirection', () => {
   it('Redirection to saved url', () => {
diff --git a/cypress/fixtures/apps.ts b/cypress/fixtures/apps.ts
index b872d36d8..b4d52eb8f 100644
--- a/cypress/fixtures/apps.ts
+++ b/cypress/fixtures/apps.ts
@@ -10,7 +10,7 @@ import { APPS_LIST } from './apps/apps';
 import { DEFAULT_FOLDER_ITEM } from './items';
 import { CURRENT_USER, MEMBERS } from './members';
 
-const API_HOST = Cypress.env('API_HOST');
+const API_HOST = Cypress.env('VITE_GRAASP_API_HOST');
 
 export const buildAppApiAccessTokenRoute = (id: string): string =>
   `app-items/${id}/api-access-token`;
@@ -21,8 +21,8 @@ export const buildAppItemLinkForTest = (filename = '.*'): string =>
 
 export const GRAASP_APP_ITEM: AppItemType = {
   ...DEFAULT_FOLDER_ITEM,
-  id: 'ecafbd2a-5688-12eb-ae91-0272ac130002',
-  path: 'ecafbd2a_5688_12eb_ae91_0272ac130002',
+  id: 'ecafbd2a-5688-12eb-ae91-0272ac130012',
+  path: 'ecafbd2a_5688_12eb_ae91_0272ac130012',
   name: 'test app',
   description: 'my app description',
   type: ItemType.APP,
diff --git a/cypress/fixtures/items.ts b/cypress/fixtures/items.ts
index 42c3c612c..2f0f52917 100644
--- a/cypress/fixtures/items.ts
+++ b/cypress/fixtures/items.ts
@@ -797,9 +797,9 @@ export const PUBLISHED_ITEM_VALIDATIONS = [
 
 const hiddenItem: DiscriminatedItem = {
   ...DEFAULT_FOLDER_ITEM,
-  id: 'ecafbd2a-5688-11eb-ae93-0242ac130001',
-  name: 'parent public item',
-  path: 'ecafbd2a_5688_11eb_ae93_0242ac130001',
+  id: 'ecafbd2a-5688-11eb-ae93-0242ac130011',
+  name: 'parent hidden public item',
+  path: 'ecafbd2a_5688_11eb_ae93_0242ac130011',
 };
 export const HIDDEN_ITEM: ItemForTest = {
   ...hiddenItem,
@@ -942,21 +942,21 @@ export const PUBLISHED_ITEMS_WITH_CC_LICENSE: ItemForTest[] = [
       {
         id: 'ecbfbd2a-5688-11eb-ae93-0242ac130002',
         type: ItemTagType.Public,
-        item,
+        item: itemCCLicenseCCBY,
         createdAt: '2021-08-11T12:56:36.834Z',
         creator: MEMBERS.ANNA,
       },
     ],
     published: {
       id: 'ecbfbd2a-5688-12eb-ae93-0242ac130002',
-      item,
+      item: itemCCLicenseCCBY,
       createdAt: '2021-08-11T12:56:36.834Z',
       creator: MEMBERS.ANNA,
       totalViews: 0,
     },
     memberships: [
       {
-        item,
+        item: itemCCLicenseCCBY,
         permission: PermissionLevel.Admin,
         member: MEMBERS.ANNA,
         creator: MEMBERS.ANNA,
@@ -965,7 +965,7 @@ export const PUBLISHED_ITEMS_WITH_CC_LICENSE: ItemForTest[] = [
         updatedAt: '2021-08-11T12:56:36.834Z',
       },
       {
-        item,
+        item: itemCCLicenseCCBY,
         permission: PermissionLevel.Read,
         member: MEMBERS.BOB,
         creator: MEMBERS.ANNA,
@@ -981,21 +981,21 @@ export const PUBLISHED_ITEMS_WITH_CC_LICENSE: ItemForTest[] = [
       {
         id: 'ecbfbd2a-5688-11eb-ae93-0242ac130002',
         type: ItemTagType.Public,
-        item,
+        item: itemCCLicenseCCBYNC,
         createdAt: '2021-08-11T12:56:36.834Z',
         creator: MEMBERS.ANNA,
       },
     ],
     published: {
       id: 'ecbfbd2a-5688-12eb-ae93-0242ac130002',
-      item,
+      item: itemCCLicenseCCBYNC,
       createdAt: '2021-08-11T12:56:36.834Z',
       creator: MEMBERS.ANNA,
       totalViews: 0,
     },
     memberships: [
       {
-        item,
+        item: itemCCLicenseCCBYNC,
         permission: PermissionLevel.Admin,
         member: MEMBERS.ANNA,
         creator: MEMBERS.ANNA,
@@ -1004,7 +1004,7 @@ export const PUBLISHED_ITEMS_WITH_CC_LICENSE: ItemForTest[] = [
         updatedAt: '2021-08-11T12:56:36.834Z',
       },
       {
-        item,
+        item: itemCCLicenseCCBYNC,
         permission: PermissionLevel.Read,
         member: MEMBERS.BOB,
         creator: MEMBERS.ANNA,
@@ -1020,21 +1020,21 @@ export const PUBLISHED_ITEMS_WITH_CC_LICENSE: ItemForTest[] = [
       {
         id: 'ecbfbd2a-5688-11eb-ae93-0242ac130002',
         type: ItemTagType.Public,
-        item,
+        item: itemCCLicenseCCBYSA,
         createdAt: '2021-08-11T12:56:36.834Z',
         creator: MEMBERS.ANNA,
       },
     ],
     published: {
       id: 'ecbfbd2a-5688-12eb-ae93-0242ac130002',
-      item,
+      item: itemCCLicenseCCBYSA,
       createdAt: '2021-08-11T12:56:36.834Z',
       creator: MEMBERS.ANNA,
       totalViews: 0,
     },
     memberships: [
       {
-        item,
+        item: itemCCLicenseCCBYSA,
         permission: PermissionLevel.Admin,
         member: MEMBERS.ANNA,
         creator: MEMBERS.ANNA,
@@ -1043,7 +1043,7 @@ export const PUBLISHED_ITEMS_WITH_CC_LICENSE: ItemForTest[] = [
         updatedAt: '2021-08-11T12:56:36.834Z',
       },
       {
-        item,
+        item: itemCCLicenseCCBYSA,
         permission: PermissionLevel.Read,
         member: MEMBERS.BOB,
         creator: MEMBERS.ANNA,
@@ -1059,21 +1059,21 @@ export const PUBLISHED_ITEMS_WITH_CC_LICENSE: ItemForTest[] = [
       {
         id: 'ecbfbd2a-5688-11eb-ae93-0242ac130002',
         type: ItemTagType.Public,
-        item,
+        item: itemCCLicenseCCBYNCND,
         createdAt: '2021-08-11T12:56:36.834Z',
         creator: MEMBERS.ANNA,
       },
     ],
     published: {
       id: 'ecbfbd2a-5688-12eb-ae93-0242ac130002',
-      item,
+      item: itemCCLicenseCCBYNCND,
       createdAt: '2021-08-11T12:56:36.834Z',
       creator: MEMBERS.ANNA,
       totalViews: 0,
     },
     memberships: [
       {
-        item,
+        item: itemCCLicenseCCBYNCND,
         permission: PermissionLevel.Admin,
         member: MEMBERS.ANNA,
         creator: MEMBERS.ANNA,
@@ -1082,7 +1082,7 @@ export const PUBLISHED_ITEMS_WITH_CC_LICENSE: ItemForTest[] = [
         updatedAt: '2021-08-11T12:56:36.834Z',
       },
       {
-        item,
+        item: itemCCLicenseCCBYNCND,
         permission: PermissionLevel.Read,
         member: MEMBERS.BOB,
         creator: MEMBERS.ANNA,
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 9309d38c6..0eb2c8a23 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -2,12 +2,7 @@ import { CookieKeys } from '@graasp/sdk';
 
 import 'cypress-localstorage-commands';
 
-import { DEFAULT_ITEM_LAYOUT_MODE } from '../../src/config/constants';
-import {
-  MODE_GRID_BUTTON_ID,
-  MODE_LIST_BUTTON_ID,
-} from '../../src/config/selectors';
-import ITEM_LAYOUT_MODES from '../../src/enums/itemLayoutModes';
+import { LAYOUT_MODE_BUTTON_ID } from '../../src/config/selectors';
 import { APPS_LIST } from '../fixtures/apps/apps';
 import { SAMPLE_CATEGORIES } from '../fixtures/categories';
 import { SAMPLE_MENTIONS } from '../fixtures/chatbox';
@@ -343,14 +338,21 @@ Cypress.Commands.add(
   },
 );
 
+const ItemLayoutMode = {
+  Grid: 'grid',
+  List: 'list',
+};
+const DEFAULT_ITEM_LAYOUT_MODE = ItemLayoutMode.List;
+
 Cypress.Commands.add('switchMode', (mode) => {
   if (DEFAULT_ITEM_LAYOUT_MODE !== mode) {
+    cy.get(`#${LAYOUT_MODE_BUTTON_ID}`).click({ force: true });
     switch (mode) {
-      case ITEM_LAYOUT_MODES.GRID:
-        cy.get(`#${MODE_GRID_BUTTON_ID}`).click({ force: true });
+      case ItemLayoutMode.Grid:
+        cy.get(`li[value="${ItemLayoutMode.Grid}"]`).click({ force: true });
         break;
-      case ITEM_LAYOUT_MODES.LIST:
-        cy.get(`#${MODE_LIST_BUTTON_ID}`).click({ force: true });
+      case ItemLayoutMode.List:
+        cy.get(`li[value="${ItemLayoutMode.List}"]`).click({ force: true });
         break;
       default:
         console.error(`invalid mode ${mode} provided`);
diff --git a/cypress/support/editUtils.ts b/cypress/support/editUtils.ts
index 830b7d3be..039e05728 100644
--- a/cypress/support/editUtils.ts
+++ b/cypress/support/editUtils.ts
@@ -1,13 +1,14 @@
 import { DiscriminatedItem, ItemType } from '@graasp/sdk';
 
-import { DEFAULT_ITEM_LAYOUT_MODE } from '../../src/config/constants';
+import { DEFAULT_ITEM_LAYOUT_MODE } from '@/enums/itemLayoutMode';
+
 import {
   EDIT_MODAL_ID,
   ITEM_FORM_CONFIRM_BUTTON_ID,
   TEXT_EDITOR_CLASS,
   buildEditButtonId,
 } from '../../src/config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../src/enums';
+import { ItemLayoutMode } from '../../src/enums';
 import { CAPTION_EDIT_PAUSE } from './constants';
 
 // eslint-disable-next-line import/prefer-default-export
@@ -23,12 +24,12 @@ export const editItem = (
 ): void => {
   const { id, type } = payload;
   switch (mode) {
-    case ITEM_LAYOUT_MODES.GRID: {
+    case ItemLayoutMode.Grid: {
       const button = `#${buildEditButtonId(id)}`;
       cy.get(button).click();
       break;
     }
-    case ITEM_LAYOUT_MODES.LIST:
+    case ItemLayoutMode.List:
     default: {
       cy.get(`#${buildEditButtonId(id)}`).click();
     }
diff --git a/cypress/support/paths.ts b/cypress/support/paths.ts
index 90e5bd9f0..7f63446c4 100644
--- a/cypress/support/paths.ts
+++ b/cypress/support/paths.ts
@@ -2,13 +2,17 @@ import { LIBRARY_ITEMS_PREFIX, buildSignInPath } from '@graasp/sdk';
 
 import { buildItemPath } from '@/config/paths';
 
-const GRAASP_PLAYER_HOST = Cypress.env('PLAYER_HOST');
-const GRAASP_BUILDER_HOST = Cypress.env('BUILDER_HOST');
-const GRAASP_ANALYZER_HOST = Cypress.env('ANALYZER_HOST');
-const GRAASP_LIBRARY_HOST = Cypress.env('LIBRARY_HOST');
-export const GRAASP_REDIRECTION_HOST = Cypress.env('REDIRECTION_HOST');
+const GRAASP_PLAYER_HOST = Cypress.env('VITE_GRAASP_PLAYER_HOST');
+const GRAASP_BUILDER_HOST = Cypress.config('baseUrl');
+const GRAASP_ANALYZER_HOST = Cypress.env('VITE_GRAASP_ANALYZER_HOST');
+const GRAASP_LIBRARY_HOST = Cypress.env('VITE_GRAASP_LIBRARY_HOST');
+export const GRAASP_REDIRECTION_HOST = Cypress.env(
+  'VITE_GRAASP_REDIRECTION_HOST',
+);
 
-export const SIGN_IN_PATH = buildSignInPath({ host: Cypress.env('AUTH_HOST') });
+export const SIGN_IN_PATH = buildSignInPath({
+  host: Cypress.env('VITE_GRAASP_AUTH_HOST'),
+});
 
 export const buildGraaspPlayerView = (id: string): string =>
   `${GRAASP_PLAYER_HOST}/${id}`;
diff --git a/cypress/support/server.ts b/cypress/support/server.ts
index 5c29393e9..338f9eac5 100644
--- a/cypress/support/server.ts
+++ b/cypress/support/server.ts
@@ -101,7 +101,7 @@ const {
   buildDeleteShortLinkRoute,
 } = API_ROUTES;
 
-const API_HOST = Cypress.env('API_HOST');
+const API_HOST = Cypress.env('VITE_GRAASP_API_HOST');
 
 const checkMembership = ({
   item,
diff --git a/cypress/support/viewUtils.ts b/cypress/support/viewUtils.ts
index aa57de93c..2d9db2452 100644
--- a/cypress/support/viewUtils.ts
+++ b/cypress/support/viewUtils.ts
@@ -2,10 +2,14 @@ import {
   CompleteMember,
   DocumentItemType,
   LinkItemType,
+  PermissionLevel,
+  PermissionLevelCompare,
   getDocumentExtra,
   getLinkExtra,
 } from '@graasp/sdk';
 
+import { getHighestPermissionForMemberFromMemberships } from '@/utils/item';
+
 import {
   DEFAULT_LINK_SHOW_BUTTON,
   DEFAULT_LINK_SHOW_IFRAME,
@@ -20,12 +24,11 @@ import {
   buildSettingsButtonId,
   buildShareButtonId,
 } from '../../src/config/selectors';
-import { isSettingsEditionAllowedForUser } from '../../src/utils/membership';
 import { CURRENT_USER } from '../fixtures/members';
 import { ItemForTest, MemberForTest } from './types';
 
 export const expectItemHeaderLayout = ({
-  item: { id, type, memberships },
+  item: { id, type, memberships, path },
   currentMember,
 }: {
   item: ItemForTest;
@@ -35,12 +38,16 @@ export const expectItemHeaderLayout = ({
 
   header.get(`#${buildShareButtonId(id)}`).should('exist');
 
-  if (
-    isSettingsEditionAllowedForUser({
-      memberships,
-      memberId: currentMember?.id,
-    })
-  ) {
+  const permission = getHighestPermissionForMemberFromMemberships({
+    memberships,
+    memberId: currentMember?.id,
+    itemPath: path,
+  })?.permission;
+  const canEditSettings = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Write)
+    : false;
+
+  if (canEditSettings) {
     if (ITEM_TYPES_WITH_CAPTIONS.includes(type)) {
       header.get(`#${buildEditButtonId(id)}`).should('exist');
     }
diff --git a/package.json b/package.json
index d7cf4f40d..d3bfe0dae 100644
--- a/package.json
+++ b/package.json
@@ -132,7 +132,7 @@
     "@typescript-eslint/parser": "7.0.2",
     "@vitejs/plugin-react": "4.2.0",
     "concurrently": "8.2.2",
-    "cypress": "13.6.3",
+    "cypress": "13.6.6",
     "cypress-localstorage-commands": "2.2.5",
     "env-cmd": "10.1.0",
     "eslint": "^8.56.0",
diff --git a/src/components/common/EditButton.tsx b/src/components/common/EditButton.tsx
index b54b64702..27bddfe7e 100644
--- a/src/components/common/EditButton.tsx
+++ b/src/components/common/EditButton.tsx
@@ -53,7 +53,15 @@ const EditButton = ({ item }: Props): JSX.Element => {
 
   return (
     <>
-      <Dialog id={EDIT_MODAL_ID} open={open} maxWidth="sm" fullWidth>
+      <Dialog
+        onClose={() => {
+          setOpen(false);
+        }}
+        id={EDIT_MODAL_ID}
+        open={open}
+        maxWidth="sm"
+        fullWidth
+      >
         <EditModalWrapper
           item={item}
           ComponentType={typeToFormComponent()}
diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx
index e916f3a67..7c297866e 100644
--- a/src/components/context/LayoutContext.tsx
+++ b/src/components/context/LayoutContext.tsx
@@ -1,13 +1,14 @@
-import { createContext, useContext, useMemo, useState } from 'react';
+import { Dispatch, createContext, useContext, useMemo, useState } from 'react';
 
 import { ChatStatus } from '@graasp/sdk';
 
-import { DEFAULT_ITEM_LAYOUT_MODE } from '../../config/constants';
-import { ITEM_LAYOUT_MODES } from '../../enums';
+import { DEFAULT_ITEM_LAYOUT_MODE } from '@/enums/itemLayoutMode';
+
+import { ItemLayoutMode } from '../../enums';
 
 interface LayoutContextInterface {
-  mode: string;
-  setMode: (mode: string) => void;
+  mode: ItemLayoutMode;
+  setMode: Dispatch<ItemLayoutMode>;
   editingItemId: string | null;
   setEditingItemId: (itemId: string | null) => void;
   openedActionTabId: string | null;
@@ -17,7 +18,7 @@ interface LayoutContextInterface {
 }
 
 export const LayoutContext = createContext<LayoutContextInterface>({
-  mode: ITEM_LAYOUT_MODES.LIST,
+  mode: ItemLayoutMode.List,
   setMode: () => {
     // do nothing
   },
@@ -41,7 +42,7 @@ export const LayoutContextProvider = ({
   children: JSX.Element;
 }): JSX.Element => {
   // layout mode: grid or list
-  const [mode, setMode] = useState<string>(DEFAULT_ITEM_LAYOUT_MODE);
+  const [mode, setMode] = useState<ItemLayoutMode>(DEFAULT_ITEM_LAYOUT_MODE);
 
   // item screen editing id
   // todo: separate in item specific context
diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx
index 14637dd1b..97c6aee86 100644
--- a/src/components/item/header/ItemHeaderActions.tsx
+++ b/src/components/item/header/ItemHeaderActions.tsx
@@ -2,30 +2,26 @@ import { useParams } from 'react-router-dom';
 
 import { Stack } from '@mui/material';
 
-import { ItemType, PermissionLevel } from '@graasp/sdk';
+import { ItemType, PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';
 import { ChatboxButton } from '@graasp/ui';
 
 import EditButton from '@/components/common/EditButton';
 import DownloadButton from '@/components/main/DownloadButton';
+import { useGetPermissionForItem } from '@/hooks/authorization';
 
 import { ITEM_TYPES_WITH_CAPTIONS } from '../../../config/constants';
 import { useBuilderTranslation } from '../../../config/i18n';
 import { hooks } from '../../../config/queryClient';
 import { ITEM_CHATBOX_BUTTON_ID } from '../../../config/selectors';
 import { BUILDER } from '../../../langs/constants';
-import {
-  getHighestPermissionForMemberFromMemberships,
-  isItemUpdateAllowedForUser,
-} from '../../../utils/membership';
 import PublishButton from '../../common/PublishButton';
 import ShareButton from '../../common/ShareButton';
-import { useCurrentUserContext } from '../../context/CurrentUserContext';
 import { useLayoutContext } from '../../context/LayoutContext';
 import ItemMenu from '../../main/ItemMenu';
 import ItemSettingsButton from '../settings/ItemSettingsButton';
 import ModeButton from './ModeButton';
 
-const { useItemMemberships, useItem } = hooks;
+const { useItem } = hooks;
 
 const ItemHeaderActions = (): JSX.Element => {
   const { itemId } = useParams();
@@ -33,19 +29,14 @@ const ItemHeaderActions = (): JSX.Element => {
   const { editingItemId, isChatboxMenuOpen, setIsChatboxMenuOpen } =
     useLayoutContext();
 
-  const { data: member } = useCurrentUserContext();
   const { data: item } = useItem(itemId);
 
-  const { data: memberships } = useItemMemberships(item?.id);
-  const canEdit = isItemUpdateAllowedForUser({
-    memberships,
-    memberId: member?.id,
-  });
-  const canAdmin = member?.id
-    ? getHighestPermissionForMemberFromMemberships({
-        memberships,
-        memberId: member?.id,
-      })?.permission === PermissionLevel.Admin
+  const { data: permission } = useGetPermissionForItem(item);
+  const canWrite = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Write)
+    : false;
+  const canAdmin = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Admin)
     : false;
 
   const onClickChatbox = () => {
@@ -59,7 +50,7 @@ const ItemHeaderActions = (): JSX.Element => {
       const showEditButton =
         !editingItemId &&
         ITEM_TYPES_WITH_CAPTIONS.includes(item.type) &&
-        canEdit;
+        canWrite;
 
       return (
         <>
@@ -70,7 +61,7 @@ const ItemHeaderActions = (): JSX.Element => {
             item={item}
             canMove={false}
             canAdmin={canAdmin}
-            canEdit={showEditButton}
+            canWrite={showEditButton}
           />
 
           <ShareButton itemId={item.id} />
@@ -81,7 +72,7 @@ const ItemHeaderActions = (): JSX.Element => {
             onClick={onClickChatbox}
           />
           {canAdmin && <PublishButton itemId={item.id} />}
-          {canEdit && <ItemSettingsButton id={item.id} />}
+          {canWrite && <ItemSettingsButton id={item.id} />}
         </>
       );
     }
diff --git a/src/components/item/header/ModeButton.tsx b/src/components/item/header/ModeButton.tsx
index 7677e2ca3..b80fe3863 100644
--- a/src/components/item/header/ModeButton.tsx
+++ b/src/components/item/header/ModeButton.tsx
@@ -1,66 +1,61 @@
+import { MouseEvent, useState } from 'react';
+
 import {
   List as ListIcon,
   ViewModule as ViewModuleIcon,
 } from '@mui/icons-material';
-import { IconButton, Tooltip } from '@mui/material';
+// import MapIcon from '@mui/icons-material/Map';
+import { IconButton } from '@mui/material';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 
-import { useBuilderTranslation } from '../../../config/i18n';
-import {
-  MODE_GRID_BUTTON_ID,
-  MODE_LIST_BUTTON_ID,
-} from '../../../config/selectors';
-import { ITEM_LAYOUT_MODES } from '../../../enums';
-import { BUILDER } from '../../../langs/constants';
+import { LAYOUT_MODE_BUTTON_ID } from '@/config/selectors';
+
+import { ItemLayoutMode } from '../../../enums';
 import { useLayoutContext } from '../../context/LayoutContext';
 
+const modeToIcon = (mode: ItemLayoutMode) => {
+  switch (mode) {
+    // case ItemLayoutMode.Map:
+    //   return <MapIcon color="primary" />;
+    case ItemLayoutMode.Grid:
+      return <ViewModuleIcon color="primary" />;
+    case ItemLayoutMode.List:
+    default:
+      return <ListIcon color="primary" />;
+  }
+};
+
 const ModeButton = (): JSX.Element | null => {
-  const { t: translateBuilder } = useBuilderTranslation();
   const { mode, setMode } = useLayoutContext();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
 
-  const handleOnClick = (value: string) => {
-    setMode(value);
+  const handleChange = (newMode: ItemLayoutMode) => {
+    setMode(newMode);
+    handleClose();
   };
 
-  switch (mode) {
-    case ITEM_LAYOUT_MODES.GRID:
-      return (
-        <div>
-          <Tooltip title={translateBuilder(BUILDER.LAYOUT_MODE_LIST_LABEL)}>
-            <span>
-              <IconButton
-                id={MODE_LIST_BUTTON_ID}
-                onClick={() => {
-                  handleOnClick(ITEM_LAYOUT_MODES.LIST);
-                }}
-                color="primary"
-              >
-                <ListIcon />
-              </IconButton>
-            </span>
-          </Tooltip>
-        </div>
-      );
-    case ITEM_LAYOUT_MODES.LIST:
-      return (
-        <div>
-          <Tooltip title={translateBuilder(BUILDER.LAYOUT_MODE_GRID_LABEL)}>
-            <span>
-              <IconButton
-                id={MODE_GRID_BUTTON_ID}
-                color="primary"
-                onClick={() => {
-                  handleOnClick(ITEM_LAYOUT_MODES.GRID);
-                }}
-              >
-                <ViewModuleIcon />
-              </IconButton>
-            </span>
-          </Tooltip>
-        </div>
-      );
-    default:
-      return null;
-  }
+  return (
+    <>
+      <IconButton id={LAYOUT_MODE_BUTTON_ID} onClick={handleClick}>
+        {modeToIcon(mode)}
+      </IconButton>
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+        {Object.values(ItemLayoutMode).map((value) => (
+          <MenuItem onClick={() => handleChange(value)} value={value}>
+            {modeToIcon(value)}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
 };
 
 export default ModeButton;
diff --git a/src/components/item/publish/ItemPublishTab.tsx b/src/components/item/publish/ItemPublishTab.tsx
index 06891c148..d7996b6b6 100644
--- a/src/components/item/publish/ItemPublishTab.tsx
+++ b/src/components/item/publish/ItemPublishTab.tsx
@@ -25,6 +25,7 @@ import {
   ItemTagType,
   ItemValidationStatus,
   PermissionLevel,
+  PermissionLevelCompare,
   redirect,
 } from '@graasp/sdk';
 import { Loader } from '@graasp/ui';
@@ -32,6 +33,7 @@ import { Loader } from '@graasp/ui';
 import groupBy from 'lodash.groupby';
 
 import { OutletType } from '@/components/pages/item/type';
+import { useGetPermissionForItem } from '@/hooks/authorization';
 
 import { ADMIN_CONTACT, CC_LICENSE_ABOUT_URL } from '../../../config/constants';
 import { useBuilderTranslation } from '../../../config/i18n';
@@ -42,8 +44,6 @@ import {
   ITEM_VALIDATION_REFRESH_BUTTON_ID,
 } from '../../../config/selectors';
 import { BUILDER } from '../../../langs/constants';
-import { isItemUpdateAllowedForUser } from '../../../utils/membership';
-import { useCurrentUserContext } from '../../context/CurrentUserContext';
 import VisibilitySelect from '../sharing/VisibilitySelect';
 import CCLicenseSelection from './CCLicenseSelection';
 import CategorySelection from './CategorySelection';
@@ -63,30 +63,29 @@ const enum PublishFlow {
 
 const ItemPublishTab = (): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const { item, permission = PermissionLevel.Read } =
-    useOutletContext<OutletType>();
+  const { item } = useOutletContext<OutletType>();
 
   const { data: itemTags, isLoading: isItemTagsLoading } = useItemTags(
     item?.id,
   );
 
-  const { data: memberships, isLoading: isMembershipsLoading } =
-    hooks.useItemMemberships(item?.id);
-  const { data: currentMember, isLoading: isLoadingCurrentMember } =
-    useCurrentUserContext();
-
-  const canEdit = isItemUpdateAllowedForUser({
-    memberships,
-    memberId: currentMember?.id,
-  });
+  const {
+    data: permission,
+    isCurrentMemberLoading,
+    isMembershipsLoading,
+  } = useGetPermissionForItem(item);
+  const canWrite = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Write)
+    : false;
+  const canAdmin = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Admin)
+    : false;
 
   const [validationStatus, setValidationStatus] =
     useState<ItemValidationStatus | null>(null);
 
   const isPublic = itemTags?.find(({ type }) => type === ItemTagType.Public);
 
-  const canAdmin = permission === PermissionLevel.Admin;
-
   // item validation
   const { mutate: validateItem } = usePostItemValidation();
 
@@ -132,16 +131,11 @@ const ItemPublishTab = (): JSX.Element => {
     return PublishFlow.PUBLISH_STEP;
   })();
 
-  if (
-    // isLoading ||
-    isMembershipsLoading ||
-    isLoadingCurrentMember ||
-    isItemTagsLoading
-  ) {
+  if (isMembershipsLoading || isCurrentMemberLoading || isItemTagsLoading) {
     return <Loader />;
   }
 
-  if (!canEdit || !canAdmin) {
+  if (!canWrite || !canAdmin) {
     return (
       <Typography variant="body1">
         {translateBuilder(
@@ -230,7 +224,7 @@ const ItemPublishTab = (): JSX.Element => {
         <Typography variant="body1">
           {translateBuilder(BUILDER.LIBRARY_SETTINGS_VISIBILITY_INFORMATIONS)}
         </Typography>
-        <VisibilitySelect item={item} edit={canEdit} />
+        <VisibilitySelect item={item} edit={canWrite} />
         <Typography variant="h6" mt={2} mr={2}>
           <LooksTwo color="primary" />
           {translateBuilder(BUILDER.LIBRARY_SETTINGS_VALIDATION_TITLE)}
diff --git a/src/components/item/settings/LanguageSelect.tsx b/src/components/item/settings/LanguageSelect.tsx
index 7c7e92fcb..0566039c8 100644
--- a/src/components/item/settings/LanguageSelect.tsx
+++ b/src/components/item/settings/LanguageSelect.tsx
@@ -1,16 +1,24 @@
 import { SelectProps } from '@mui/material';
 
-import { DiscriminatedItem } from '@graasp/sdk';
+import {
+  DiscriminatedItem,
+  PermissionLevel,
+  PermissionLevelCompare,
+} from '@graasp/sdk';
 import { langs } from '@graasp/translations';
 import { Select } from '@graasp/ui';
 
 import { mutations } from '@/config/queryClient';
 import { LANGUAGE_SELECTOR_ID } from '@/config/selectors';
-import { useCanUpdateItem } from '@/hooks/authorization';
+import { useGetPermissionForItem } from '@/hooks/authorization';
 
 const LanguageSelect = ({ item }: { item: DiscriminatedItem }): JSX.Element => {
   const { mutate: changeLang } = mutations.useEditItem();
-  const { allowed: canEdit } = useCanUpdateItem(item);
+  const { data: permission } = useGetPermissionForItem(item);
+
+  const canWrite = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Write)
+    : false;
 
   const onChange: SelectProps['onChange'] = (e) => {
     const { value: newLang } = e.target;
@@ -22,7 +30,7 @@ const LanguageSelect = ({ item }: { item: DiscriminatedItem }): JSX.Element => {
   return (
     <Select
       id={LANGUAGE_SELECTOR_ID}
-      disabled={!canEdit}
+      disabled={!canWrite}
       size="small"
       values={values}
       value={item.lang}
diff --git a/src/components/item/sharing/ItemSharingTab.tsx b/src/components/item/sharing/ItemSharingTab.tsx
index e64790265..39a85e336 100644
--- a/src/components/item/sharing/ItemSharingTab.tsx
+++ b/src/components/item/sharing/ItemSharingTab.tsx
@@ -4,6 +4,7 @@ import { Container, Divider, Grid, Typography } from '@mui/material';
 
 import {
   ItemMembership,
+  PermissionLevel,
   PermissionLevelCompare,
   isPseudoMember,
 } from '@graasp/sdk';
@@ -12,16 +13,11 @@ import { Loader } from '@graasp/ui';
 import partition from 'lodash.partition';
 
 import { OutletType } from '@/components/pages/item/type';
+import { useGetPermissionForItem } from '@/hooks/authorization';
 
 import { useBuilderTranslation } from '../../../config/i18n';
 import { hooks } from '../../../config/queryClient';
 import { BUILDER } from '../../../langs/constants';
-import {
-  isItemAdminAllowedForMember,
-  isItemUpdateAllowedForUser,
-  isSettingsEditionAllowedForUser,
-} from '../../../utils/membership';
-import { useCurrentUserContext } from '../../context/CurrentUserContext';
 import CreateItemMembershipForm from './CreateItemMembershipForm';
 import CsvInputParser from './CsvInputParser';
 import InvitationsTable from './InvitationsTable';
@@ -58,35 +54,26 @@ const ItemSharingTab = (): JSX.Element => {
 
   const { data: memberships } = hooks.useItemMemberships(itemId);
 
-  const { data: currentMember, isLoading: isLoadingCurrentMember } =
-    useCurrentUserContext();
   const { data: invitations } = hooks.useItemInvitations(item?.id);
   const { data: itemLoginSchema, isLoading: isItemLoginLoading } =
     hooks.useItemLoginSchema({ itemId: item.id });
 
-  const canEdit = isItemUpdateAllowedForUser({
-    memberships,
-    memberId: currentMember?.id,
-  });
-
-  const canEditSettings = isSettingsEditionAllowedForUser({
-    memberships,
-    memberId: currentMember?.id,
-  });
+  const { data: permission, isLoading } = useGetPermissionForItem(item);
 
-  const canAdminShortLinks = isItemAdminAllowedForMember({
-    memberships,
-    memberId: currentMember?.id,
-    itemPath: item.path,
-  });
+  const canWrite = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Write)
+    : false;
+  const canAdmin = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Admin)
+    : false;
 
-  if (isLoadingCurrentMember && isItemLoginLoading) {
+  if (isLoading && isItemLoginLoading) {
     return <Loader />;
   }
 
   const renderMembershipSettings = () => {
     // do not display settings if cannot access memberships
-    if (!memberships || !canEdit) {
+    if (!memberships || !canWrite) {
       return null;
     }
     const [authenticatedMemberships, authorizedMemberships] = partition(
@@ -102,9 +89,9 @@ const ItemSharingTab = (): JSX.Element => {
           <Typography variant="h6" m={0} p={0}>
             {translateBuilder(BUILDER.SHARING_AUTHORIZED_MEMBERS_TITLE)}
           </Typography>
-          {canEditSettings && <CsvInputParser item={item} />}
+          {canAdmin && <CsvInputParser item={item} />}
         </Grid>
-        {canEditSettings && (
+        {canAdmin && (
           <CreateItemMembershipForm item={item} memberships={memberships} />
         )}
         <ItemMembershipsTable
@@ -113,7 +100,7 @@ const ItemSharingTab = (): JSX.Element => {
             BUILDER.SHARING_AUTHORIZED_MEMBERS_EMPTY_MESSAGE,
           )}
           memberships={selectHighestMemberships(authorizedMemberships)}
-          readOnly={!canEditSettings}
+          readOnly={!canAdmin}
         />
 
         {/* show authenticated members if login schema is defined
@@ -132,7 +119,7 @@ const ItemSharingTab = (): JSX.Element => {
                 BUILDER.SHARING_AUTHENTICATED_MEMBERS_EMPTY_MESSAGE,
               )}
               showEmail={false}
-              readOnly={!canEditSettings}
+              readOnly={!canAdmin}
             />
           </>
         )}
@@ -149,7 +136,7 @@ const ItemSharingTab = (): JSX.Element => {
               emptyMessage={translateBuilder(
                 BUILDER.SHARING_INVITATIONS_EMPTY_MESSAGE,
               )}
-              readOnly={!canEditSettings}
+              readOnly={!canAdmin}
             />
             <Divider sx={{ my: 3 }} />
           </>
@@ -165,12 +152,12 @@ const ItemSharingTab = (): JSX.Element => {
       </Typography>
       <ShortLinksRenderer
         itemId={item.id}
-        canAdminShortLink={Boolean(memberships && canAdminShortLinks)}
+        canAdminShortLink={Boolean(memberships && canAdmin)}
       />
       <Typography variant="h6">
         {translateBuilder(BUILDER.ITEM_SETTINGS_VISIBILITY_TITLE)}
       </Typography>
-      <VisibilitySelect item={item} edit={canEditSettings} />
+      <VisibilitySelect item={item} edit={canAdmin} />
       {renderMembershipSettings()}
     </Container>
   );
diff --git a/src/components/main/ItemCard.tsx b/src/components/main/ItemCard.tsx
index de5da649d..d917294e1 100644
--- a/src/components/main/ItemCard.tsx
+++ b/src/components/main/ItemCard.tsx
@@ -6,22 +6,21 @@ import {
   ItemMembership,
   ItemType,
   PermissionLevel,
+  PermissionLevelCompare,
   ThumbnailSize,
 } from '@graasp/sdk';
 import { Card as GraaspCard, Thumbnail } from '@graasp/ui';
 
 import truncate from 'lodash.truncate';
 
+import { useGetPermissionForItem } from '@/hooks/authorization';
+
 import { DESCRIPTION_MAX_LENGTH } from '../../config/constants';
 import { buildItemPath } from '../../config/paths';
 import { hooks } from '../../config/queryClient';
 import { buildItemCard, buildItemLink } from '../../config/selectors';
 import defaultImage from '../../resources/avatar.png';
 import { stripHtml } from '../../utils/item';
-import {
-  getHighestPermissionForMemberFromMemberships,
-  isItemUpdateAllowedForUser,
-} from '../../utils/membership';
 import EditButton from '../common/EditButton';
 import FavoriteButton from '../common/FavoriteButton';
 import { useCurrentUserContext } from '../context/CurrentUserContext';
@@ -89,20 +88,18 @@ const ItemComponent = ({
   );
 
   const { data: member } = useCurrentUserContext();
-  const enableEdition = isItemUpdateAllowedForUser({
-    memberships,
-    memberId: member?.id,
-  });
-  const canAdmin = member?.id
-    ? getHighestPermissionForMemberFromMemberships({
-        memberships,
-        memberId: member?.id,
-      })?.permission === PermissionLevel.Admin
+  const { data: permission } = useGetPermissionForItem(item, memberships);
+
+  const canWrite = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Write)
+    : false;
+  const canAdmin = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Admin)
     : false;
 
   const Actions = (
     <>
-      {enableEdition && <EditButton item={item} />}
+      {canWrite && <EditButton item={item} />}
       {((member && member.id) || itemsStatuses?.[item.id]?.isPublic) && (
         <DownloadButton id={item.id} name={item.name} />
       )}
@@ -124,7 +121,7 @@ const ItemComponent = ({
       ItemMenu={
         <ItemMenu
           item={item}
-          canEdit={enableEdition}
+          canWrite={canWrite}
           canAdmin={canAdmin}
           canMove={canMove}
         />
diff --git a/src/components/main/ItemMenu.tsx b/src/components/main/ItemMenu.tsx
index 4598fc962..7aa1020d8 100644
--- a/src/components/main/ItemMenu.tsx
+++ b/src/components/main/ItemMenu.tsx
@@ -39,14 +39,14 @@ import CreateShortcutButton from './CreateShortcutButton';
 
 type Props = {
   item: DiscriminatedItem;
-  canEdit?: boolean;
+  canWrite?: boolean;
   canAdmin?: boolean;
   canMove?: boolean;
 };
 
 const ItemMenu = ({
   item,
-  canEdit = false,
+  canWrite = false,
   canAdmin = false,
   canMove = true,
 }: Props): JSX.Element | null => {
@@ -82,7 +82,7 @@ const ItemMenu = ({
     });
   };
   const renderEditorActions = () => {
-    if (canEdit) {
+    if (canWrite) {
       return [
         canMove ? (
           <MoveButton
diff --git a/src/components/main/Items.tsx b/src/components/main/Items.tsx
index 1b0cd6760..50ae610ac 100644
--- a/src/components/main/Items.tsx
+++ b/src/components/main/Items.tsx
@@ -3,7 +3,7 @@ import { DiscriminatedItem } from '@graasp/sdk';
 import { ShowOnlyMeChangeType } from '@/config/types';
 
 import { hooks } from '../../config/queryClient';
-import { ITEM_LAYOUT_MODES } from '../../enums';
+import { ItemLayoutMode } from '../../enums';
 import { useLayoutContext } from '../context/LayoutContext';
 import { useItemsStatuses } from '../table/BadgesCellRenderer';
 import ItemsGrid from './ItemsGrid';
@@ -73,7 +73,7 @@ const Items = ({
     itemsTags,
   });
   switch (mode) {
-    case ITEM_LAYOUT_MODES.GRID:
+    case ItemLayoutMode.Grid:
       return (
         <ItemsGrid
           canMove={canMove}
@@ -92,7 +92,7 @@ const Items = ({
           totalCount={totalCount}
         />
       );
-    case ITEM_LAYOUT_MODES.LIST:
+    case ItemLayoutMode.List:
     default:
       return (
         <ItemsTable
diff --git a/src/components/pages/item/ItemScreenLayout.tsx b/src/components/pages/item/ItemScreenLayout.tsx
index 140446c98..c4dafc8c4 100644
--- a/src/components/pages/item/ItemScreenLayout.tsx
+++ b/src/components/pages/item/ItemScreenLayout.tsx
@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { Outlet, useParams } from 'react-router';
 
+import { PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';
 import { Loader } from '@graasp/ui';
 
-import { PERMISSIONS_EDITION_ALLOWED } from '../../../config/constants';
+import { useGetPermissionForItem } from '@/hooks/authorization';
+
 import { hooks } from '../../../config/queryClient';
-import { getHighestPermissionForMemberFromMemberships } from '../../../utils/membership';
 import ErrorAlert from '../../common/ErrorAlert';
-import { useCurrentUserContext } from '../../context/CurrentUserContext';
 import { useLayoutContext } from '../../context/LayoutContext';
 import { UppyContextProvider } from '../../file/UppyContext';
 import WrappedAuthItemScreen from './ItemLoginWrapper';
@@ -19,7 +19,6 @@ const ItemScreenLayout = (): JSX.Element => {
 
   const { data: item, isLoading } = useItem(itemId);
   const { setEditingItemId } = useLayoutContext();
-  const { data: currentMember } = useCurrentUserContext();
   const { data: memberships, isLoading: isLoadingItemMemberships } =
     useItemMemberships(itemId);
 
@@ -28,19 +27,15 @@ const ItemScreenLayout = (): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemId]);
 
-  const itemMembership = getHighestPermissionForMemberFromMemberships({
-    memberships,
-    memberId: currentMember?.id,
-  });
-  const permission = itemMembership?.permission;
-  const canEdit = permission
-    ? PERMISSIONS_EDITION_ALLOWED.includes(permission)
+  const { data: permission } = useGetPermissionForItem(item);
+  const canWrite = permission
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Write)
     : false;
 
   if (item && itemId && memberships) {
     return (
-      <UppyContextProvider enable={canEdit} itemId={itemId}>
-        <Outlet context={{ item, permission, canEdit }} />
+      <UppyContextProvider enable={canWrite} itemId={itemId}>
+        <Outlet context={{ item, permission, canWrite }} />
       </UppyContextProvider>
     );
   }
diff --git a/src/components/pages/item/ItemSettingsPage.tsx b/src/components/pages/item/ItemSettingsPage.tsx
index ff4ee2452..e32d8a6db 100644
--- a/src/components/pages/item/ItemSettingsPage.tsx
+++ b/src/components/pages/item/ItemSettingsPage.tsx
@@ -1,6 +1,7 @@
 import { Navigate, useOutletContext, useParams } from 'react-router';
 
-import { PERMISSIONS_EDITION_ALLOWED } from '@/config/constants';
+import { PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';
+
 import { buildItemPath } from '@/config/paths';
 
 import ItemSettings from '../../item/settings/ItemSettings';
@@ -11,7 +12,7 @@ const ItemSettingsPage = (): JSX.Element => {
   const { permission } = useOutletContext<OutletType>();
 
   const enableEditing = permission
-    ? PERMISSIONS_EDITION_ALLOWED.includes(permission)
+    ? PermissionLevelCompare.gte(permission, PermissionLevel.Write)
     : false;
 
   if (enableEditing) {
diff --git a/src/components/pages/item/type.ts b/src/components/pages/item/type.ts
index c921317da..371651f6d 100644
--- a/src/components/pages/item/type.ts
+++ b/src/components/pages/item/type.ts
@@ -3,5 +3,5 @@ import { DiscriminatedItem, PermissionLevel } from '@graasp/sdk';
 export interface OutletType {
   item: DiscriminatedItem;
   permission?: PermissionLevel;
-  canEdit: boolean;
+  canWrite: boolean;
 }
diff --git a/src/components/table/ActionsCellRenderer.tsx b/src/components/table/ActionsCellRenderer.tsx
index b1cc83f60..36a40a6ba 100644
--- a/src/components/table/ActionsCellRenderer.tsx
+++ b/src/components/table/ActionsCellRenderer.tsx
@@ -3,15 +3,12 @@ import {
   ItemMembership,
   Member,
   PermissionLevel,
+  PermissionLevelCompare,
   ResultOf,
 } from '@graasp/sdk';
 
-import { hooks } from '@/config/queryClient';
+import { useGetPermissionForItem } from '@/hooks/authorization';
 
-import {
-  getHighestPermissionForMemberFromMemberships,
-  isItemUpdateAllowedForUser,
-} from '../../utils/membership';
 import EditButton from '../common/EditButton';
 import DownloadButton from '../main/DownloadButton';
 import ItemMenu from '../main/ItemMenu';
@@ -28,20 +25,16 @@ type ChildCompProps = {
 
 // items and memberships match by index
 const ActionsCellRenderer = ({
-  member,
   canMove,
 }: Props): ((arg: ChildCompProps) => JSX.Element) => {
   const ChildComponent = ({ data: item }: ChildCompProps) => {
-    const { data: memberships } = hooks.useItemMemberships(item.id);
-    const canEdit = isItemUpdateAllowedForUser({
-      memberships,
-      memberId: member?.id,
-    });
-    const canAdmin = member?.id
-      ? getHighestPermissionForMemberFromMemberships({
-          memberships,
-          memberId: member?.id,
-        })?.permission === PermissionLevel.Admin
+    const { data: permission } = useGetPermissionForItem(item);
+
+    const canWrite = permission
+      ? PermissionLevelCompare.gte(permission, PermissionLevel.Write)
+      : false;
+    const canAdmin = permission
+      ? PermissionLevelCompare.gte(permission, PermissionLevel.Admin)
       : false;
 
     const renderAnyoneActions = () => (
@@ -51,13 +44,13 @@ const ActionsCellRenderer = ({
           item={item}
           canMove={canMove}
           canAdmin={canAdmin}
-          canEdit={canEdit}
+          canWrite={canWrite}
         />
       </>
     );
 
     const renderEditorActions = () => {
-      if (canEdit) {
+      if (canWrite) {
         return <EditButton item={item} />;
       }
       return null;
diff --git a/src/config/constants.ts b/src/config/constants.ts
index ec46a9c91..fa885a45a 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -1,7 +1,5 @@
 import { ItemLoginSchemaType, ItemType, PermissionLevel } from '@graasp/sdk';
 
-import ITEM_LAYOUT_MODES from '../enums/itemLayoutModes';
-
 export const APP_NAME = 'Graasp';
 
 export const DESCRIPTION_MAX_LENGTH = 30;
@@ -29,13 +27,6 @@ export const DEFAULT_PERMISSION_LEVEL = PermissionLevel.Read;
 
 export const DEFAULT_ANALYZER_HEIGHT = 2300;
 
-export const PERMISSIONS_EDITION_ALLOWED = [
-  PermissionLevel.Write,
-  PermissionLevel.Admin,
-];
-
-export const DEFAULT_ITEM_LAYOUT_MODE = ITEM_LAYOUT_MODES.LIST;
-
 export const ROWS_PER_PAGE_OPTIONS = [10, 25];
 
 export const LEFT_MENU_WIDTH = 250;
diff --git a/src/config/env.ts b/src/config/env.ts
index 7223579a2..faed47996 100644
--- a/src/config/env.ts
+++ b/src/config/env.ts
@@ -1,30 +1,44 @@
-export const APP_VERSION = import.meta.env.VITE_VERSION;
-export const DOMAIN = import.meta.env.VITE_GRAASP_DOMAIN;
+const {
+  VITE_VERSION,
+  VITE_GRAASP_API_HOST,
+  VITE_GRAASP_DOMAIN,
+  VITE_GRAASP_ACCOUNT_HOST,
+  VITE_GRAASP_ANALYZER_HOST,
+  VITE_GRAASP_LIBRARY_HOST,
+  VITE_GRAASP_PLAYER_HOST,
+  VITE_GRAASP_AUTH_HOST,
+  VITE_SHOW_NOTIFICATIONS,
+  VITE_GRAASP_ASSETS_URL,
+  VITE_H5P_INTEGRATION_URL,
+  VITE_SENTRY_ENV,
+  VITE_GA_MEASUREMENT_ID,
+  VITE_SENTRY_DSN,
+  VITE_GRAASP_REDIRECTION_HOST,
+} = window.Cypress ? Cypress.env() : import.meta.env;
 
-export const API_HOST =
-  import.meta.env.VITE_GRAASP_API_HOST || 'http://localhost:3000';
+export const APP_VERSION = VITE_VERSION;
+export const DOMAIN = VITE_GRAASP_DOMAIN;
 
+export const API_HOST = VITE_GRAASP_API_HOST || 'http://localhost:3000';
 export const GRAASP_AUTH_HOST =
-  import.meta.env.VITE_GRAASP_AUTH_HOST || 'http://localhost:3001';
+  VITE_GRAASP_AUTH_HOST || 'http://localhost:3001';
 export const GRAASP_PLAYER_HOST =
-  import.meta.env.VITE_GRAASP_PLAYER_HOST || 'http://localhost:3112';
+  VITE_GRAASP_PLAYER_HOST || 'http://localhost:3112';
 export const GRAASP_LIBRARY_HOST =
-  import.meta.env.VITE_GRAASP_LIBRARY_HOST || 'http://localhost:3115';
+  VITE_GRAASP_LIBRARY_HOST || 'http://localhost:3115';
 export const GRAASP_ANALYZER_HOST =
-  import.meta.env.VITE_GRAASP_ANALYZER_HOST || 'http://localhost:3113';
+  VITE_GRAASP_ANALYZER_HOST || 'http://localhost:3113';
 export const GRAASP_ACCOUNT_HOST =
-  import.meta.env.VITE_GRAASP_ACCOUNT_HOST || 'http://localhost:3114';
+  VITE_GRAASP_ACCOUNT_HOST || 'http://localhost:3114';
 
-export const GRAASP_REDIRECTION_HOST = import.meta.env
-  .VITE_GRAASP_REDIRECTION_HOST;
+export const GRAASP_REDIRECTION_HOST = VITE_GRAASP_REDIRECTION_HOST;
 
 export const H5P_INTEGRATION_URL =
-  import.meta.env.VITE_H5P_INTEGRATION_URL || `${API_HOST}/p/h5p-integration`;
-export const GRAASP_ASSETS_URL = import.meta.env.VITE_GRAASP_ASSETS_URL;
+  VITE_H5P_INTEGRATION_URL || `${API_HOST}/p/h5p-integration`;
+export const GRAASP_ASSETS_URL = VITE_GRAASP_ASSETS_URL;
 
-export const SENTRY_ENV = import.meta.env.VITE_SENTRY_ENV;
-export const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN;
-export const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID;
+export const SENTRY_ENV = VITE_SENTRY_ENV;
+export const SENTRY_DSN = VITE_SENTRY_DSN;
+export const GA_MEASUREMENT_ID = VITE_GA_MEASUREMENT_ID;
 
-export const SHOW_NOTIFICATIONS =
-  import.meta.env.VITE_SHOW_NOTIFICATIONS === 'true' || false;
+export const SHOW_NOTIFICATIONS = VITE_SHOW_NOTIFICATIONS === 'true' || false;
diff --git a/src/config/selectors.ts b/src/config/selectors.ts
index dc97e8a79..d45676837 100644
--- a/src/config/selectors.ts
+++ b/src/config/selectors.ts
@@ -48,9 +48,7 @@ export const SHARE_ITEM_EMAIL_INPUT_ID = 'shareItemModalEmailInput';
 export const buildPermissionOptionId = (id: string): string =>
   `permission-${id}`;
 export const SHARE_ITEM_SHARE_BUTTON_ID = 'shareItemModalShareButton';
-export const MODE_LIST_BUTTON_ID = 'modeListButton';
 
-export const MODE_GRID_BUTTON_ID = 'modeCardButton';
 export const SHARED_ITEMS_ID = 'sharedItems';
 export const PUBLISHED_ITEMS_ID = 'publishedItems';
 export const FAVORITE_ITEMS_ID = 'favoriteItems';
@@ -349,3 +347,4 @@ export const ACCESSIBLE_ITEMS_TABLE_ID = 'accessibleItemsTable';
 export const ACCESSIBLE_ITEMS_NEXT_PAGE_BUTTON_SELECTOR = `#${ACCESSIBLE_ITEMS_TABLE_ID} [data-testid="KeyboardArrowRightIcon"]`;
 export const MY_GRAASP_ITEM_PATH = 'myGraaspItemPath';
 export const LANGUAGE_SELECTOR_ID = 'languageSelector';
+export const LAYOUT_MODE_BUTTON_ID = 'layoutModeButton';
diff --git a/src/config/types.ts b/src/config/types.ts
index 630fb3637..5186daf51 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -7,3 +7,13 @@ export enum InternalItemType {
 
 export type NewItemTabType = DiscriminatedItem['type'] | InternalItemType.ZIP;
 export type ShowOnlyMeChangeType = (checked: boolean) => void;
+
+// extend the Window interface with the new properties
+declare global {
+  interface Window {
+    Cypress: boolean;
+  }
+}
+
+// empty export to remove the "module" error
+export {};
diff --git a/src/enums/index.ts b/src/enums/index.ts
index ceb3db877..74fe890b3 100644
--- a/src/enums/index.ts
+++ b/src/enums/index.ts
@@ -1,4 +1,4 @@
-import ITEM_LAYOUT_MODES from './itemLayoutModes';
+import ItemLayoutMode from './itemLayoutMode';
 import Ordering from './orderingTypes';
 
 enum TreePreventSelection {
@@ -11,4 +11,4 @@ enum ButtonVariants {
   Button = 'button',
 }
 
-export { Ordering, TreePreventSelection, ButtonVariants, ITEM_LAYOUT_MODES };
+export { Ordering, TreePreventSelection, ButtonVariants, ItemLayoutMode };
diff --git a/src/enums/itemLayoutMode.ts b/src/enums/itemLayoutMode.ts
new file mode 100644
index 000000000..3b72821dd
--- /dev/null
+++ b/src/enums/itemLayoutMode.ts
@@ -0,0 +1,10 @@
+enum ItemLayoutMode {
+  Grid = 'grid',
+  List = 'list',
+  // todo: enable when adding the map
+  // Map = 'map',
+}
+
+export const DEFAULT_ITEM_LAYOUT_MODE = ItemLayoutMode.List;
+
+export default ItemLayoutMode;
diff --git a/src/enums/itemLayoutModes.ts b/src/enums/itemLayoutModes.ts
deleted file mode 100644
index 8197915f9..000000000
--- a/src/enums/itemLayoutModes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// cannot move to ts because of cypress files
-const ITEM_LAYOUT_MODES = {
-  GRID: 'grid',
-  LIST: 'list',
-};
-
-Object.freeze(ITEM_LAYOUT_MODES);
-
-export default ITEM_LAYOUT_MODES;
diff --git a/src/hooks/authorization.ts b/src/hooks/authorization.ts
index f0c12033e..e937ffc4e 100644
--- a/src/hooks/authorization.ts
+++ b/src/hooks/authorization.ts
@@ -1,24 +1,42 @@
-import { DiscriminatedItem, ItemMembership } from '@graasp/sdk';
+import {
+  DiscriminatedItem,
+  ItemMembership,
+  PermissionLevel,
+} from '@graasp/sdk';
 
 import { hooks } from '@/config/queryClient';
-import { isItemUpdateAllowedForUser } from '@/utils/membership';
+import { getHighestPermissionForMemberFromMemberships } from '@/utils/item';
 
+// todo: to be replaced by a query client hook get item that would contain the permission
 // eslint-disable-next-line import/prefer-default-export
-export const useCanUpdateItem = (
+export const useGetPermissionForItem = (
   item?: DiscriminatedItem,
+  allMemberships?: ItemMembership[],
 ): {
-  allowed: boolean;
+  data?: PermissionLevel;
   memberships?: ItemMembership[];
   isMembershipsLoading: boolean;
+  isCurrentMemberLoading: boolean;
+  isLoading: boolean;
 } => {
+  // does not fetch memberships if they are given
   const { data: memberships, isLoading: isMembershipsLoading } =
-    hooks.useItemMemberships(item?.id);
-  const { data: currentMember } = hooks.useCurrentMember();
+    hooks.useItemMemberships(allMemberships ? undefined : item?.id);
+  const { data: currentMember, isLoading: isCurrentMemberLoading } =
+    hooks.useCurrentMember();
+  const isLoading = isMembershipsLoading || isCurrentMemberLoading;
 
-  const allowed = isItemUpdateAllowedForUser({
+  return {
+    data: item
+      ? getHighestPermissionForMemberFromMemberships({
+          memberships: allMemberships ?? memberships,
+          memberId: currentMember?.id,
+          itemPath: item?.path,
+        })?.permission
+      : undefined,
+    isLoading,
     memberships,
-    memberId: currentMember?.id,
-  });
-
-  return { allowed, memberships, isMembershipsLoading };
+    isMembershipsLoading,
+    isCurrentMemberLoading,
+  };
 };
diff --git a/src/utils/item.ts b/src/utils/item.ts
index 1b96ed4d2..66a8efda8 100644
--- a/src/utils/item.ts
+++ b/src/utils/item.ts
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import {
   DiscriminatedItem,
   FolderItemExtra,
+  ItemMembership,
   ItemType,
   getAppExtra,
   getLinkExtra,
@@ -173,3 +174,33 @@ export const applyEllipsisOnLength = (
   `${longString.slice(0, maxLength)}${
     (longString.length || 0) > maxLength ? '…' : ''
   }`;
+
+// todo: to remove
+// get highest permission a member have over an item,
+// longer the itemPath, deeper is the permission, thus highested
+export const getHighestPermissionForMemberFromMemberships = ({
+  memberships,
+  memberId,
+  itemPath,
+}: {
+  memberships?: ItemMembership[];
+  memberId?: string;
+  itemPath: DiscriminatedItem['path'];
+}): null | ItemMembership => {
+  if (!memberId) {
+    return null;
+  }
+
+  const itemMemberships = memberships?.filter(
+    ({ item: { path: mPath }, member: { id: mId } }) =>
+      mId === memberId && itemPath.includes(mPath),
+  );
+  if (!itemMemberships) {
+    return null;
+  }
+
+  const sorted = [...itemMemberships];
+  sorted?.sort((a, b) => (a.item.path.length > b.item.path.length ? 1 : -1));
+
+  return sorted[0];
+};
diff --git a/src/utils/membership.ts b/src/utils/membership.ts
index e07a9db67..237092fc1 100644
--- a/src/utils/membership.ts
+++ b/src/utils/membership.ts
@@ -1,6 +1,4 @@
-import { ItemMembership, PermissionLevel, ResultOf } from '@graasp/sdk';
-
-import { PERMISSIONS_EDITION_ALLOWED } from '../config/constants';
+import { ItemMembership, ResultOf } from '@graasp/sdk';
 
 // todo: better check with typescript
 export const isError = (
@@ -8,90 +6,6 @@ export const isError = (
 ): boolean | undefined =>
   membership && typeof membership === 'object' && 'statusCode' in membership;
 
-export const isItemUpdateAllowedForUser = ({
-  memberships,
-  memberId,
-}: {
-  memberships?: ItemMembership[];
-  memberId?: string;
-}): boolean => {
-  // the user is not authenticated so he cannot update
-  if (!memberId) {
-    return false;
-  }
-
-  return Boolean(
-    memberships?.find(
-      ({ member: { id: mId }, permission }) =>
-        mId === memberId && PERMISSIONS_EDITION_ALLOWED.includes(permission),
-    ),
-  );
-};
-
-export const isItemAdminAllowedForMember = ({
-  memberships,
-  memberId,
-  itemPath,
-}: {
-  memberships?: ItemMembership[];
-  memberId?: string;
-  itemPath: string;
-}): boolean => {
-  // the user is not authenticated so he cannot administrate
-  if (!memberId) {
-    return false;
-  }
-
-  return Boolean(
-    memberships?.find(
-      ({ member: { id: mId }, permission, item }) =>
-        mId === memberId &&
-        permission === PermissionLevel.Admin &&
-        itemPath.startsWith(item.path),
-    ),
-  );
-};
-
-// get highest permission a member have over an item,
-// longer the itemPath, deeper is the permission, thus highested
-export const getHighestPermissionForMemberFromMemberships = ({
-  memberships,
-  memberId,
-}: {
-  memberships?: ItemMembership[];
-  memberId?: string;
-}): null | ItemMembership => {
-  if (!memberId) {
-    return null;
-  }
-
-  const itemMemberships = memberships?.filter(
-    ({ member: { id: mId } }) => mId === memberId,
-  );
-  if (!itemMemberships) {
-    return null;
-  }
-
-  const sorted = [...itemMemberships];
-  sorted?.sort((a, b) => (a.item.path.length > b.item.path.length ? 1 : -1));
-
-  return sorted[0];
-};
-
-export const isSettingsEditionAllowedForUser = ({
-  memberships,
-  memberId,
-}: {
-  memberships?: ItemMembership[];
-  memberId?: string;
-}): boolean =>
-  !memberships
-    ? false
-    : memberships.some(
-        ({ member: { id: mId }, permission }) =>
-          mId === memberId && PermissionLevel.Admin === permission,
-      );
-
 export const membershipsWithoutUser = (
   memberships: ItemMembership[],
   userId?: string,
diff --git a/tsconfig.json b/tsconfig.json
index 8279d87b8..7fec296aa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,7 +22,7 @@
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
 
-    "types": ["vite/client"],
+    "types": ["vite/client", "cypress"],
     "baseUrl": "./src",
     "paths": {
       "@/*": ["./*"],
diff --git a/yarn.lock b/yarn.lock
index fa0825eb4..a7ac5d3e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4390,7 +4390,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer@npm:^5.6.0":
+"buffer@npm:^5.7.1":
   version: 5.7.1
   resolution: "buffer@npm:5.7.1"
   dependencies:
@@ -5103,9 +5103,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cypress@npm:13.6.3":
-  version: 13.6.3
-  resolution: "cypress@npm:13.6.3"
+"cypress@npm:13.6.6":
+  version: 13.6.6
+  resolution: "cypress@npm:13.6.6"
   dependencies:
     "@cypress/request": "npm:^3.0.0"
     "@cypress/xvfb": "npm:^1.2.4"
@@ -5114,7 +5114,7 @@ __metadata:
     arch: "npm:^2.2.0"
     blob-util: "npm:^2.0.2"
     bluebird: "npm:^3.7.2"
-    buffer: "npm:^5.6.0"
+    buffer: "npm:^5.7.1"
     cachedir: "npm:^2.3.0"
     chalk: "npm:^4.1.0"
     check-more-types: "npm:^2.24.0"
@@ -5132,7 +5132,7 @@ __metadata:
     figures: "npm:^3.2.0"
     fs-extra: "npm:^9.1.0"
     getos: "npm:^3.2.1"
-    is-ci: "npm:^3.0.0"
+    is-ci: "npm:^3.0.1"
     is-installed-globally: "npm:~0.4.0"
     lazy-ass: "npm:^1.6.0"
     listr2: "npm:^3.8.3"
@@ -5151,7 +5151,7 @@ __metadata:
     yauzl: "npm:^2.10.0"
   bin:
     cypress: bin/cypress
-  checksum: 10/9ec41974d3e6cb4a293ff1df88f742287650416d4061b5d44484aa98e78da254f190efb2bdfa79090db84eadc7a94c164de28e65ee1a106f8b213967022da2de
+  checksum: 10/c86cc38fa25f04575d496fbf26edf8c738f2c98b0faeced9788ec691293424336f6be180f597256d38124df9ce75daddd42a015127af76d8f8df9eb071e3d90e
   languageName: node
   linkType: hard
 
@@ -7164,7 +7164,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:4.2.0"
     axios: "npm:1.6.7"
     concurrently: "npm:8.2.2"
-    cypress: "npm:13.6.3"
+    cypress: "npm:13.6.6"
     cypress-localstorage-commands: "npm:2.2.5"
     date-fns: "npm:3.3.1"
     env-cmd: "npm:10.1.0"
@@ -7738,7 +7738,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-ci@npm:^3.0.0":
+"is-ci@npm:^3.0.1":
   version: 3.0.1
   resolution: "is-ci@npm:3.0.1"
   dependencies: