diff --git a/.github/workflows/cdelivery-s3-caller.yml b/.github/workflows/cdelivery-s3-caller.yml
index 007aa0e1..e72504a9 100644
--- a/.github/workflows/cdelivery-s3-caller.yml
+++ b/.github/workflows/cdelivery-s3-caller.yml
@@ -10,20 +10,21 @@ on:
 jobs:
   graasp-deploy-s3-workflow:
     name: Graasp Player
-    uses: graasp/graasp-deploy/.github/workflows/cdelivery-s3.yml@7b5dd84304458c3c5ab03cbbde059670f77b1687
+    uses: graasp/graasp-deploy/.github/workflows/cdelivery-s3.yml@1a7c4c74273be6fd1c56eb6c5a8fb4af2d211b86
     with:
       build-folder: 'build'
       tag: ${{ github.event.client_payload.tag }}
     secrets:
+      api-host: ${{ secrets.REACT_APP_API_HOST_STAGE }}
+      authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_STAGE }}
       aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_STAGE }}
-      aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_STAGE }}
       aws-region: ${{ secrets.AWS_REGION_STAGE }}
+      aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_STAGE }}
       aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_GRAASP_PERFORM_STAGE }}
       cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_GRAASP_PERFORM_STAGE }}
-      api-host: ${{ secrets.REACT_APP_API_HOST_STAGE }}
-      port: ${{ secrets.PORT }}
-      show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
-      authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_STAGE }}
+      domain: ${{ secrets.REACT_APP_DOMAIN_STAGE }}
       graasp-compose-host: ${{ secrets.BUILDER_CLIENT_HOST_STAGE }}
       graasp-explorer-host: ${{ secrets.EXPLORER_CLIENT_HOST_STAGE }}
-      domain: ${{ secrets.REACT_APP_DOMAIN_STAGE }}
+      h5p-integration-url: ${{ secrets.H5P_INTEGRATION_URL_STAGE }}
+      port: ${{ secrets.PORT }}
+      show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
diff --git a/.github/workflows/cdeployment-s3-caller.yml b/.github/workflows/cdeployment-s3-caller.yml
index 047c60e9..0dca2e37 100644
--- a/.github/workflows/cdeployment-s3-caller.yml
+++ b/.github/workflows/cdeployment-s3-caller.yml
@@ -11,20 +11,21 @@ jobs:
   graasp-deploy-s3-workflow:
     name: Graasp Player
     # Reference reusable workflow file. Using the commit SHA is the safest for stability and security
-    uses: graasp/graasp-deploy/.github/workflows/cdeployment-s3.yml@7b5dd84304458c3c5ab03cbbde059670f77b1687
+    uses: graasp/graasp-deploy/.github/workflows/cdeployment-s3.yml@1a7c4c74273be6fd1c56eb6c5a8fb4af2d211b86
     with:
       build-folder: 'build'
       tag: ${{ github.event.client_payload.tag }}
     secrets:
+      api-host: ${{ secrets.REACT_APP_API_HOST_PROD }}
+      authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_PROD }}
       aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_PROD }}
-      aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_PROD }}
       aws-region: ${{ secrets.AWS_REGION_PROD }}
+      aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_PROD }}
       aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_GRAASP_PERFORM_PROD }}
       cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_GRAASP_PERFORM_PROD }}
-      api-host: ${{ secrets.REACT_APP_API_HOST_PROD }}
-      port: ${{ secrets.PORT }}
-      show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
-      authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_PROD }}
+      domain: ${{ secrets.REACT_APP_DOMAIN_PROD }}
       graasp-compose-host: ${{ secrets.BUILDER_CLIENT_HOST_PROD }}
       graasp-explorer-host: ${{ secrets.EXPLORER_CLIENT_HOST_PROD }}
-      domain: ${{ secrets.REACT_APP_DOMAIN_PROD }}
+      h5p-integration-url: ${{ secrets.H5P_INTEGRATION_URL_PROD }}
+      port: ${{ secrets.PORT }}
+      show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
diff --git a/.github/workflows/cintegration-s3-caller.yml b/.github/workflows/cintegration-s3-caller.yml
index e470a32d..d6628400 100644
--- a/.github/workflows/cintegration-s3-caller.yml
+++ b/.github/workflows/cintegration-s3-caller.yml
@@ -15,19 +15,20 @@ jobs:
   graasp-deploy-s3-workflow:
     name: Graasp Player
     # Reference reusable workflow file. Using the commit SHA is the safest for stability and security
-    uses: graasp/graasp-deploy/.github/workflows/cintegration-s3.yml@7b5dd84304458c3c5ab03cbbde059670f77b1687
+    uses: graasp/graasp-deploy/.github/workflows/cintegration-s3.yml@1a7c4c74273be6fd1c56eb6c5a8fb4af2d211b86
     with:
       build-folder: 'build'
     secrets:
+      api-host: ${{ secrets.REACT_APP_API_HOST_DEV }}
+      authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_DEV }}
       aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_DEV }}
-      aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_DEV }}
       aws-region: ${{ secrets.AWS_REGION_DEV }}
+      aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_DEV }}
       aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_GRAASP_PERFORM_DEV }}
       cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_GRAASP_PERFORM_DEV }}
-      api-host: ${{ secrets.REACT_APP_API_HOST_DEV }}
-      port: ${{ secrets.PORT }}
-      show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
-      authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_DEV }}
+      domain: ${{ secrets.REACT_APP_DOMAIN_DEV }}
       graasp-compose-host: ${{ secrets.BUILDER_CLIENT_HOST_DEV }}
       graasp-explorer-host: ${{ secrets.EXPLORER_CLIENT_HOST_DEV }}
-      domain: ${{ secrets.REACT_APP_DOMAIN_DEV }}
+      h5p-integration-url: ${{ secrets.H5P_INTEGRATION_URL_DEV }}
+      port: ${{ secrets.PORT }}
+      show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
diff --git a/README.md b/README.md
index a1351e8e..67cf1fcc 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@ REACT_APP_API_HOST=http://localhost:3000
 PORT=3112
 REACT_APP_SHOW_NOTIFICATIONS=true
 REACT_APP_AUTHENTICATION_HOST=http://localhost:3001
+REACT_APP_H5P_INTEGRATION_URL=
 ```
 
 4. Run `yarn start`. The client should be accessible at `localhost:3112`
@@ -24,6 +25,7 @@ REACT_APP_API_HOST=http://localhost:3000
 PORT=3112
 REACT_APP_SHOW_NOTIFICATIONS=false
 REACT_APP_NODE_ENV=test
+REACT_APP_H5P_INTEGRATION_URL=
 ```
 
 Run `yarn cypress`. This should run every tests headlessly.
diff --git a/cypress/integration/header.test.js b/cypress/integration/header.test.js
index ff24aec3..8689b0a4 100644
--- a/cypress/integration/header.test.js
+++ b/cypress/integration/header.test.js
@@ -1,4 +1,5 @@
-import { getCurrentSession } from '@graasp/utils';
+import { getCurrentSession } from '@graasp/sdk';
+
 import { MEMBER_PROFILE_PATH, SIGN_IN_PATH } from '../../src/config/constants';
 import { HOME_PATH } from '../../src/config/paths';
 import {
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index b0cc5e9b..415cedff 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -7,10 +7,11 @@
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
+import { COOKIE_KEYS } from '@graasp/sdk';
 
-import { COOKIE_KEYS } from '@graasp/utils';
 import { CURRENT_USER, MEMBERS } from '../fixtures/members';
 import {
+  mockAuthPage,
   mockDefaultDownloadFile,
   mockGetChildren,
   mockGetCurrentMember,
@@ -18,13 +19,12 @@ import {
   mockGetItemTags,
   mockGetItemsTags,
   mockGetMemberBy,
-  mockGetPublicItem,
+  mockGetMembers,
   mockGetPublicChildren,
+  mockGetPublicItem,
+  mockProfilePage,
   mockPublicDefaultDownloadFile,
   mockSignOut,
-  mockGetMembers,
-  mockProfilePage,
-  mockAuthPage,
 } from './server';
 
 Cypress.Commands.add(
diff --git a/cypress/support/server.js b/cypress/support/server.js
index 62479771..72ce0d6b 100644
--- a/cypress/support/server.js
+++ b/cypress/support/server.js
@@ -1,11 +1,13 @@
 import { StatusCodes } from 'http-status-codes';
 import qs from 'qs';
+
 import { API_ROUTES } from '@graasp/query-client';
-import { getItemById, isChild, isError } from '../../src/utils/item';
-import { MEMBERS } from '../fixtures/members';
-import { ID_FORMAT, parseStringToRegExp, EMAIL_FORMAT } from './utils';
+
 import { DEFAULT_GET } from '../../src/api/utils';
 import { MEMBER_PROFILE_PATH } from '../../src/config/constants';
+import { getItemById, isChild, isError } from '../../src/utils/item';
+import { MEMBERS } from '../fixtures/members';
+import { EMAIL_FORMAT, ID_FORMAT, parseStringToRegExp } from './utils';
 
 const {
   buildGetChildrenRoute,
diff --git a/package.json b/package.json
index 13df9da4..4c556aa4 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,10 @@
   "dependencies": {
     "@emotion/react": "11.8.1",
     "@emotion/styled": "11.8.1",
-    "@graasp/chatbox": "github:graasp/graasp-chatbox.git#main",
-    "@graasp/query-client": "github:graasp/graasp-query-client.git",
-    "@graasp/ui": "github:graasp/graasp-ui.git",
-    "@graasp/utils": "github:graasp/graasp-utils.git",
+    "@graasp/chatbox": "github:graasp/graasp-chatbox",
+    "@graasp/query-client": "github:graasp/graasp-query-client",
+    "@graasp/sdk": "github:graasp/graasp-sdk",
+    "@graasp/ui": "github:graasp/graasp-ui",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "5.0.0-beta.4",
     "@material-ui/lab": "4.0.0-alpha.60",
@@ -81,7 +81,7 @@
     "@commitlint/config-conventional": "16.0.0",
     "@cypress/code-coverage": "3.9.12",
     "@cypress/instrument-cra": "1.4.0",
-    "@graasp/websockets": "github:graasp/graasp-websockets.git#master",
+    "@graasp/websockets": "github:graasp/graasp-websockets",
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",
diff --git a/src/components/App.js b/src/components/App.js
index 29ca7757..b9f4d7ab 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import { useLocation } from 'react-router';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import { saveUrlForRedirection } from '@graasp/sdk';
 import { Loader, withAuthorization } from '@graasp/ui';
-import { saveUrlForRedirection } from '@graasp/utils';
 
 import { DOMAIN, SIGN_IN_PATH } from '../config/constants';
 import { HOME_PATH, buildMainPath } from '../config/paths';
diff --git a/src/components/common/Item.js b/src/components/common/Item.js
index dfc23e17..5b6bc662 100644
--- a/src/components/common/Item.js
+++ b/src/components/common/Item.js
@@ -10,13 +10,18 @@ import {
   AppItem,
   DocumentItem,
   FileItem,
+  H5PItem,
   LinkItem,
   Loader,
   TextEditor,
   withCollapse,
 } from '@graasp/ui';
 
-import { API_HOST, SCREEN_MAX_HEIGHT } from '../../config/constants';
+import {
+  API_HOST,
+  H5P_INTEGRATION_URL,
+  SCREEN_MAX_HEIGHT,
+} from '../../config/constants';
 import { hooks } from '../../config/queryClient';
 import {
   FOLDER_NAME_TITLE_CLASS,
@@ -182,6 +187,24 @@ const Item = ({ id, isChildren, showPinnedOnly }) => {
       }
       return appItem;
     }
+
+    case ITEM_TYPES.H5P: {
+      const contentId = item.get('extra')?.h5p?.contentId;
+      if (!contentId) {
+        return (
+          <Alert severity="error">{t('An unexpected error occured.')}</Alert>
+        );
+      }
+
+      return (
+        <H5PItem
+          itemId={id}
+          contentId={contentId}
+          integrationUrl={H5P_INTEGRATION_URL}
+        />
+      );
+    }
+
     default:
       console.error(`The type ${item?.type} is not defined`);
       return null;
diff --git a/src/config/constants.js b/src/config/constants.js
index b90f4302..6c6c2e7e 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -1,4 +1,4 @@
-import { buildSignInPath } from '@graasp/utils';
+import { buildSignInPath } from '@graasp/sdk';
 
 import env from '../env.json';
 
@@ -8,6 +8,7 @@ const {
   AUTHENTICATION_HOST: ENV_AUTHENTICATION_HOST,
   GRAASP_COMPOSE_HOST: ENV_GRAASP_COMPOSE_HOST,
   GRAASP_EXPLORE_HOST: ENV_GRAASP_EXPLORE_HOST,
+  H5P_INTEGRATION_URL: ENV_H5P_INTEGRATION_URL,
   NODE_ENV: ENV_NODE_ENV,
   GA_MEASUREMENT_ID: ENV_GA_MEASUREMENT_ID,
   HIDDEN_ITEM_TAG_ID: ENV_HIDDEN_ITEM_TAG_ID,
@@ -56,6 +57,11 @@ export const GRAASP_EXPLORE_HOST =
   process.env.REACT_APP_GRAASP_EXPLORE_HOST ||
   'http://localhost:3005';
 
+export const H5P_INTEGRATION_URL =
+  ENV_H5P_INTEGRATION_URL ||
+  process.env.REACT_APP_H5P_INTEGRATION_URL ||
+  `${API_HOST}/p/h5p-integration`;
+
 export const HIDDEN_ITEM_TAG_ID =
   ENV_HIDDEN_ITEM_TAG_ID || process.env.REACT_APP_HIDDEN_ITEM_TAG_ID || false;
 
diff --git a/src/enums/itemTypes.js b/src/enums/itemTypes.js
index db1d9cd8..17a61afb 100644
--- a/src/enums/itemTypes.js
+++ b/src/enums/itemTypes.js
@@ -6,6 +6,7 @@ const ITEM_TYPES = {
   SHORTCUT: 'shortcut',
   DOCUMENT: 'document',
   APP: 'app',
+  H5P: 'h5p',
 };
 
 Object.freeze(ITEM_TYPES);
diff --git a/src/env.json b/src/env.json
index 92e89c38..c5fb2229 100644
--- a/src/env.json
+++ b/src/env.json
@@ -3,8 +3,10 @@
   "SHOW_NOTIFICATIONS": false,
   "AUTHENTICATION_HOST": false,
   "NODE_ENV": false,
+  "GRAASP_COMPOSE_HOST": false,
+  "H5P_INTEGRATION_URL": false,
   "GA_MEASUREMENT_ID": false,
   "HIDDEN_ITEM_TAG_ID": false,
-  "DOMAIN":false,
+  "DOMAIN": false,
   "REACT_APP_SENTRY_DSN": false
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index a987e4fb..4cea033b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2217,7 +2217,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/chatbox@github:graasp/graasp-chatbox.git#main":
+"@graasp/chatbox@github:graasp/graasp-chatbox":
   version: 0.1.0
   resolution: "@graasp/chatbox@https://github.com/graasp/graasp-chatbox.git#commit=0a0d1c674a02822f2004bef1b572f0046e4f8daa"
   dependencies:
@@ -2247,7 +2247,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/query-client@github:graasp/graasp-query-client.git":
+"@graasp/query-client@github:graasp/graasp-query-client":
   version: 0.1.0
   resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=1872025f2191336c792b31f729d471721d3ae30b"
   dependencies:
@@ -2268,6 +2268,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graasp/sdk@github:graasp/graasp-sdk":
+  version: 0.1.0
+  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=9b8bbbfa902c6c6157f4e3255e513c15d398ebe2"
+  dependencies:
+    "@fastify/secure-session": 5.2.0
+    aws-sdk: 2.1111.0
+    fastify: ^3.29.1
+    fluent-json-schema: 3.1.0
+    js-cookie: 3.0.1
+    qs: 6.11.0
+    slonik: 28.1.1
+    uuid: 8.3.2
+  checksum: 5bd019b105f58ee8ffdff527d9b6110a31d1d82e17101c41ee98e9dae9a75b972547a01e32c3587b8a89458cd738601de2eb48e4eddbc4d6893e01e4845fdbdf
+  languageName: node
+  linkType: hard
+
 "@graasp/sdk@github:graasp/graasp-sdk.git":
   version: 0.1.0
   resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=4796e963bdbc84b0a2b098a83a401c0aecc259cb"
@@ -2294,42 +2310,6 @@ __metadata:
   linkType: hard
 
 "@graasp/ui@github:graasp/graasp-ui":
-  version: 0.2.0
-  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=a5fb85c4684f848901815e0691ae9d3e3a89ed6e"
-  dependencies:
-    "@graasp/sdk": "github:graasp/graasp-sdk.git"
-    clsx: 1.1.1
-    http-status-codes: 2.2.0
-    immutable: 4.1.0
-    katex: 0.15.3
-    lodash.truncate: 4.4.2
-    qs: 6.10.3
-    react-cookie-consent: 7.4.1
-    react-i18next: 11.16.9
-    react-quill: 1.3.5
-    react-rnd: 10.3.7
-    react-text-mask: 5.4.3
-    uuid: 8.3.2
-  peerDependencies:
-    "@material-ui/core": 4.11.0
-    "@material-ui/icons": 4.9.1
-    "@material-ui/lab": 4.0.0-alpha.58
-    ag-grid-community: 27.3.0
-    ag-grid-react: 27.3.0
-    i18next: 21.3.1
-    react: ^16.13.1
-    react-dom: 16.13.1
-    react-router-dom: 6.2.2
-  peerDependenciesMeta:
-    ag-grid-community:
-      optional: true
-    ag-grid-react:
-      optional: true
-  checksum: 8178b01ea61e1df5eb1d4ab468680ed47f414b9e5fde07730a8064768cf59977b1c9f46f5471c09a9b37da117aa27768ebc3eb6fc56783c93e05c865ee02b6d5
-  languageName: node
-  linkType: hard
-
-"@graasp/ui@github:graasp/graasp-ui.git":
   version: 0.2.0
   resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=8e38ca1792bc922cfaff872551620ef8a20db7c9"
   dependencies:
@@ -2381,7 +2361,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/websockets@github:graasp/graasp-websockets.git#master":
+"@graasp/websockets@github:graasp/graasp-websockets":
   version: 1.0.0
   resolution: "@graasp/websockets@https://github.com/graasp/graasp-websockets.git#commit=3977527ed1dd6d4c8b90681c586897243d4f49cf"
   dependencies:
@@ -10660,11 +10640,11 @@ __metadata:
     "@cypress/instrument-cra": 1.4.0
     "@emotion/react": 11.8.1
     "@emotion/styled": 11.8.1
-    "@graasp/chatbox": "github:graasp/graasp-chatbox.git#main"
-    "@graasp/query-client": "github:graasp/graasp-query-client.git"
-    "@graasp/ui": "github:graasp/graasp-ui.git"
-    "@graasp/utils": "github:graasp/graasp-utils.git"
-    "@graasp/websockets": "github:graasp/graasp-websockets.git#master"
+    "@graasp/chatbox": "github:graasp/graasp-chatbox"
+    "@graasp/query-client": "github:graasp/graasp-query-client"
+    "@graasp/sdk": "github:graasp/graasp-sdk"
+    "@graasp/ui": "github:graasp/graasp-ui"
+    "@graasp/websockets": "github:graasp/graasp-websockets"
     "@material-ui/core": 4.12.3
     "@material-ui/icons": 5.0.0-beta.4
     "@material-ui/lab": 4.0.0-alpha.60