🔒️(nginx) manage Content-Security-Policy in nginx config

The media route is managed by nginx. On this route we want to add the
Content-Security-Header to forbid fetching any resources.
See : https://content-security-policy.com/

CHANGELOG.md

@@ -8,12 +8,16 @@ and this project adheres to
 
 ## [Unreleased]
 
+## Added
+
+- 💄(frontend) add error pages #643
+
 ## Changed
 
 - 🛂(frontend) Restore version visibility #629
 - 📝(doc) minor README.md formatting and wording enhancements
 - ♻️Stop setting a default title on doc creation #634
-- 📝(readme) remove front-end local run instructions local.md #651 
+- ♻️(frontend) misc ui improvements #644
 
 ## Fixed
 

README.md

@@ -40,7 +40,7 @@ Docs is a collaborative text editor designed to address common challenges in kno
 *   📚 Built-in wiki functionality to turn your team's collaborative work into organized knowledge `ETA 02/2025`
 
 ### Self-host
-*   🚀 Easy to install, scalable and secure alternative to Notion and Outline.
+*   🚀 Easy to install, scalable and secure alternative to Notion, Outline or Confluence
 
 ## Getting started 🔧
 
@@ -100,6 +100,26 @@ password: impress
 $ make run
 ```
 
+⚠️ For the frontend developer, it is often better to run the frontend in development mode locally.
+
+To do so, install the frontend dependencies with the following command:
+
+```shellscript
+$ make frontend-development-install
+```
+
+And run the frontend locally in development mode with the following command:
+
+```shellscript
+$ make run-frontend-development
+```
+
+To start all the services, except the frontend container, you can use the following command:
+
+```shellscript
+$ make run-backend
+```
+
 **Adding content**
 You can create a basic demo site by running:
 

docker/files/etc/nginx/conf.d/default.conf

@@ -68,6 +68,8 @@ server {
         # Get resource from Minio
         proxy_pass http://minio:9000/impress-media-storage/;
         proxy_set_header Host minio:9000;
+
+        add_header Content-Security-Policy "default-src 'none'" always;
     }
 
     location /media-auth {

docs/local.md

@@ -1,92 +0,0 @@
-# Run Docs locally
-
-> ⚠️ Running Docs locally using the methods described below is for testing purposes only.  It is based on building Docs using Minio as the S3 storage solution: if you want to use Minio for production deployment of Docs, you will need to comply with Minio's AGPL-3.0 licence.
-
-**Prerequisite**
-
-Make sure you have a recent version of Docker and [Docker Compose](https://docs.docker.com/compose/install) installed on your laptop:
-
-```shellscript
-$ docker -v
-
-Docker version 20.10.2, build 2291f61
-
-$ docker compose version
-
-Docker Compose version v2.32.4
-```
-
-> ⚠️ You may need to run the following commands with sudo but this can be avoided by adding your user to the `docker` group.
-
-**Project bootstrap**
-
-The easiest way to start working on the project is to use GNU Make:
-
-```shellscript
-$ make bootstrap FLUSH_ARGS='--no-input'
-```
-
-This command builds the `app` container, installs dependencies, performs database migrations and compile translations. It's a good idea to use this command each time you are pulling code from the project repository to avoid dependency-related or migration-related issues.
-
-Your Docker services should now be up and running 🎉
-
-You can access to the project by going to <http://localhost:3000>.
-
-You will be prompted to log in, the default credentials are:
-
-```
-username: impress
-password: impress
-```
-
-📝 Note that if you need to run them afterwards, you can use the eponym Make rule:
-
-```shellscript
-$ make run
-```
-
-**Adding content**
-You can create a basic demo site by running:
-
-```shellscript
-$ make demo
-```
-
-Finally, you can check all available Make rules using:
-
-```shellscript
-$ make help
-```
-
-**Django admin**
-
-You can access the Django admin site at
-
-<http://localhost:8071/admin>.
-
-You first need to create a superuser account:
-
-```shellscript
-$ make superuser
-```
-
-## Front-end dev instructions
-⚠️ For the frontend developer, it is often better to run the frontend in development mode locally.
-
-To do so, install the frontend dependencies with the following command:
-
-```shellscript
-$ make frontend-development-install
-```
-
-And run the frontend locally in development mode with the following command:
-
-```shellscript
-$ make run-frontend-development
-```
-
-To start all the services, except the frontend container, you can use the following command:
-
-```shellscript
-$ make run-backend
-```

src/backend/core/api/serializers.py

@@ -418,6 +418,7 @@ class FileUploadSerializer(serializers.Serializer):
 
         self.context["expected_extension"] = extension
         self.context["content_type"] = magic_mime_type
+        self.context["file_name"] = file.name
 
         return file
 
@@ -426,6 +427,7 @@ class FileUploadSerializer(serializers.Serializer):
         attrs["expected_extension"] = self.context["expected_extension"]
         attrs["is_unsafe"] = self.context["is_unsafe"]
         attrs["content_type"] = self.context["content_type"]
+        attrs["file_name"] = self.context["file_name"]
         return attrs
 
 

src/backend/core/api/viewsets.py

@@ -925,6 +925,19 @@ class DocumentViewSet(
         if serializer.validated_data["is_unsafe"]:
             extra_args["Metadata"]["is_unsafe"] = "true"
 
+        file_name = serializer.validated_data["file_name"]
+        if (
+            not serializer.validated_data["content_type"].startswith("image/")
+            or serializer.validated_data["is_unsafe"]
+        ):
+            extra_args.update(
+                {"ContentDisposition": f'attachment; filename="{file_name:s}"'}
+            )
+        else:
+            extra_args.update(
+                {"ContentDisposition": f'inline; filename="{file_name:s}"'}
+            )
+
         file = serializer.validated_data["file"]
         default_storage.connection.meta.client.upload_fileobj(
             file, default_storage.bucket_name, key, ExtraArgs=extra_args

src/backend/core/tests/documents/test_api_documents_attachment_upload.py

@@ -79,6 +79,7 @@ def test_api_documents_attachment_upload_anonymous_success():
 
     assert file_head["Metadata"] == {"owner": "None"}
     assert file_head["ContentType"] == "image/png"
+    assert file_head["ContentDisposition"] == 'inline; filename="test.png"'
 
 
 @pytest.mark.parametrize(
@@ -217,6 +218,7 @@ def test_api_documents_attachment_upload_success(via, role, mock_user_teams):
     )
     assert file_head["Metadata"] == {"owner": str(user.id)}
     assert file_head["ContentType"] == "image/png"
+    assert file_head["ContentDisposition"] == 'inline; filename="test.png"'
 
 
 def test_api_documents_attachment_upload_invalid(client):
@@ -301,6 +303,7 @@ def test_api_documents_attachment_upload_fix_extension(
     )
     assert file_head["Metadata"] == {"owner": str(user.id), "is_unsafe": "true"}
     assert file_head["ContentType"] == content_type
+    assert file_head["ContentDisposition"] == f'attachment; filename="{name:s}"'
 
 
 def test_api_documents_attachment_upload_empty_file():
@@ -350,3 +353,4 @@ def test_api_documents_attachment_upload_unsafe():
     )
     assert file_head["Metadata"] == {"owner": str(user.id), "is_unsafe": "true"}
     assert file_head["ContentType"] == "application/octet-stream"
+    assert file_head["ContentDisposition"] == 'attachment; filename="script.exe"'

src/frontend/apps/e2e/__tests__/app-impress/404.spec.ts

@@ -17,13 +17,13 @@ test.describe('404', () => {
         'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
       ),
     ).toBeVisible();
-    await expect(page.getByText('Back to home page')).toBeVisible();
+    await expect(page.getByText('Home')).toBeVisible();
   });
 
   test('checks go back to home page redirects to home page', async ({
     page,
   }) => {
-    await page.getByText('Back to home page').click();
+    await page.getByText('Home').click();
     await expect(page).toHaveURL('/');
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -97,7 +97,7 @@ export const addNewMember = async (
 
   // Choose a role
   await page.getByLabel('doc-role-dropdown').click();
-  await page.getByRole('button', { name: role }).click();
+  await page.getByRole('menuitem', { name: role }).click();
   await page.getByRole('button', { name: 'Invite' }).click();
 
   return users[index].email;

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -37,10 +37,10 @@ test.describe('Doc Editor', () => {
 
     // Change language to French
     await header.click();
-    await header.getByRole('combobox').getByText('English').click();
-    await header.getByRole('option', { name: 'Français' }).click();
+    await header.getByRole('button', { name: /Language/ }).click();
+    await page.getByRole('menuitem', { name: 'Français' }).click();
     await expect(
-      header.getByRole('combobox').getByText('Français'),
+      header.getByRole('button').getByText('Français'),
     ).toBeVisible();
 
     // Trigger slash menu to show french menu
@@ -130,7 +130,7 @@ test.describe('Doc Editor', () => {
 
     await selectVisibility.click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Connected',
       })
       .click();

src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts

@@ -7,17 +7,9 @@ type SmallDoc = {
   title: string;
 };
 
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-});
-
 test.describe('Documents Grid mobile', () => {
   test.use({ viewport: { width: 500, height: 1200 } });
 
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-  });
-
   test('it checks the grid when mobile', async ({ page }) => {
     await page.route('**/documents/**', async (route) => {
       const request = route.request();
@@ -94,6 +86,10 @@ test.describe('Documents Grid mobile', () => {
 });
 
 test.describe('Document grid item options', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
   test('it pins a document', async ({ page, browserName }) => {
     const [docTitle] = await createDoc(page, `Favorite doc`, browserName);
 
@@ -212,6 +208,8 @@ test.describe('Document grid item options', () => {
 
 test.describe('Documents filters', () => {
   test('it checks the prebuild left panel filters', async ({ page }) => {
+    await page.goto('/');
+
     // All Docs
     const response = await page.waitForResponse(
       (response) =>
@@ -282,11 +280,9 @@ test.describe('Documents filters', () => {
 });
 
 test.describe('Documents Grid', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-  });
-
   test('checks all the elements are visible', async ({ page }) => {
+    await page.goto('/');
+
     let docs: SmallDoc[] = [];
     const response = await page.waitForResponse(
       (response) =>
@@ -314,11 +310,12 @@ test.describe('Documents Grid', () => {
 
   test('checks the infinite scroll', async ({ page }) => {
     let docs: SmallDoc[] = [];
-    const responsePromisePage1 = page.waitForResponse(
-      (response) =>
+    const responsePromisePage1 = page.waitForResponse((response) => {
+      return (
         response.url().endsWith(`/documents/?page=1`) &&
-        response.status() === 200,
-    );
+        response.status() === 200
+      );
+    });
 
     const responsePromisePage2 = page.waitForResponse(
       (response) =>
@@ -326,6 +323,8 @@ test.describe('Documents Grid', () => {
         response.status() === 200,
     );
 
+    await page.goto('/');
+
     const responsePage1 = await responsePromisePage1;
     expect(responsePage1.ok()).toBeTruthy();
     let result = await responsePage1.json();

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -89,7 +89,7 @@ test.describe('Doc Header', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Delete document',
       })
       .click();
@@ -153,7 +153,7 @@ test.describe('Doc Header', () => {
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('button', { name: 'Delete document' }),
+      page.getByRole('menuitem', { name: 'Delete document' }),
     ).toBeDisabled();
 
     // Click somewhere else to close the options
@@ -177,7 +177,7 @@ test.describe('Doc Header', () => {
     await invitationCard.getByRole('button', { name: 'more_horiz' }).click();
 
     await expect(
-      page.getByRole('button', {
+      page.getByRole('menuitem', {
         name: 'delete',
       }),
     ).toBeEnabled();
@@ -195,7 +195,7 @@ test.describe('Doc Header', () => {
     await memberCard.getByRole('button', { name: 'more_horiz' }).click();
 
     await expect(
-      page.getByRole('button', {
+      page.getByRole('menuitem', {
         name: 'delete',
       }),
     ).toBeEnabled();
@@ -233,7 +233,7 @@ test.describe('Doc Header', () => {
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('button', { name: 'Delete document' }),
+      page.getByRole('menuitem', { name: 'Delete document' }),
     ).toBeDisabled();
 
     // Click somewhere else to close the options
@@ -295,7 +295,7 @@ test.describe('Doc Header', () => {
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('button', { name: 'Delete document' }),
+      page.getByRole('menuitem', { name: 'Delete document' }),
     ).toBeDisabled();
 
     // Click somewhere else to close the options
@@ -352,7 +352,7 @@ test.describe('Doc Header', () => {
 
     // Copy content to clipboard
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('button', { name: 'Copy as Markdown' }).click();
+    await page.getByRole('menuitem', { name: 'Copy as Markdown' }).click();
     await expect(page.getByText('Copied to clipboard')).toBeVisible();
 
     // Test that clipboard is in Markdown format
@@ -387,7 +387,7 @@ test.describe('Doc Header', () => {
 
     // Copy content to clipboard
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('button', { name: 'Copy as HTML' }).click();
+    await page.getByRole('menuitem', { name: 'Copy as HTML' }).click();
     await expect(page.getByText('Copied to clipboard')).toBeVisible();
 
     // Test that clipboard is in HTML format
@@ -460,7 +460,7 @@ test.describe('Documents Header mobile', () => {
 
     await expect(page.getByRole('button', { name: 'Copy link' })).toBeHidden();
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('button', { name: 'Share' }).click();
+    await page.getByRole('menuitem', { name: 'Share' }).click();
     await page.getByRole('button', { name: 'Copy link' }).click();
     await expect(page.getByText('Link Copied !')).toBeVisible();
     // Test that clipboard is in HTML format
@@ -494,7 +494,7 @@ test.describe('Documents Header mobile', () => {
     await goToGridDoc(page);
 
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('button', { name: 'Share' }).click();
+    await page.getByRole('menuitem', { name: 'Share' }).click();
 
     await expect(page.getByLabel('Share modal')).toBeVisible();
     await page.getByRole('button', { name: 'close' }).click();

src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts

@@ -65,15 +65,15 @@ test.describe('Document create member', () => {
 
     // Check roles are displayed
     await list.getByLabel('doc-role-dropdown').click();
-    await expect(page.getByRole('button', { name: 'Reader' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Editor' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Owner' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Reader' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Editor' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Owner' })).toBeVisible();
     await expect(
-      page.getByRole('button', { name: 'Administrator' }),
+      page.getByRole('menuitem', { name: 'Administrator' }),
     ).toBeVisible();
 
     // Validate
-    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('menuitem', { name: 'Administrator' }).click();
     await page.getByRole('button', { name: 'Invite' }).click();
 
     // Check invitation added
@@ -121,7 +121,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Owner' }).click();
+    await page.getByRole('menuitem', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -139,7 +139,7 @@ test.describe('Document create member', () => {
 
     // Choose a role
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Owner' }).click();
+    await page.getByRole('menuitem', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitationFail = page.waitForResponse(
       (response) =>
@@ -162,8 +162,8 @@ test.describe('Document create member', () => {
     await createDoc(page, 'user-invitation', browserName, 1);
 
     const header = page.locator('header').first();
-    await header.getByRole('combobox').getByText('EN').click();
-    await header.getByRole('option', { name: 'translate Français' }).click();
+    await header.getByRole('button', { name: /Language/ }).click();
+    await page.getByRole('menuitem', { name: 'Français' }).click();
 
     await page.getByRole('button', { name: 'Partager' }).click();
 
@@ -178,7 +178,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Administrateur' }).click();
+    await page.getByRole('menuitem', { name: 'Administrateur' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -212,7 +212,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('menuitem', { name: 'Administrator' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -232,14 +232,14 @@ test.describe('Document create member', () => {
     await expect(userInvitation).toBeVisible();
 
     await userInvitation.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Reader' }).click();
+    await page.getByRole('menuitem', { name: 'Reader' }).click();
 
     const moreActions = userInvitation.getByRole('button', {
       name: 'more_horiz',
     });
     await moreActions.click();
 
-    await page.getByRole('button', { name: 'Delete' }).click();
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
 
     await expect(userInvitation).toBeHidden();
   });

src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts

@@ -161,12 +161,12 @@ test.describe('Document list members', () => {
     await list.click();
 
     await currentUserRole.click();
-    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('menuitem', { name: 'Administrator' }).click();
     await list.click();
     await expect(currentUserRole).toBeVisible();
 
     await currentUserRole.click();
-    await page.getByRole('button', { name: 'Reader' }).click();
+    await page.getByRole('menuitem', { name: 'Reader' }).click();
     await list.click();
     await expect(currentUserRole).toBeHidden();
   });
@@ -215,13 +215,13 @@ test.describe('Document list members', () => {
     await expect(mySelfMoreActions).toBeVisible();
 
     await userReaderMoreActions.click();
-    await page.getByRole('button', { name: 'Delete' }).click();
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
     await expect(userReader).toBeHidden();
 
     await mySelfMoreActions.click();
-    await page.getByRole('button', { name: 'Delete' }).click();
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
     await expect(
-      page.getByText('You do not have permission to perform this action.'),
+      page.getByText('You do not have permission to view this document.'),
     ).toBeVisible();
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts

@@ -19,7 +19,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Version history',
       })
       .click();
@@ -59,7 +59,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Version history',
       })
       .click();
@@ -91,7 +91,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await expect(
-      page.getByRole('button', { name: 'Version history' }),
+      page.getByRole('menuitem', { name: 'Version history' }),
     ).toBeDisabled();
   });
 
@@ -120,7 +120,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Version history',
       })
       .click();

src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts

@@ -50,7 +50,7 @@ test.describe('Doc Visibility', () => {
 
     await selectVisibility.click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Connected',
       })
       .click();
@@ -60,7 +60,7 @@ test.describe('Doc Visibility', () => {
     await selectVisibility.click();
 
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Public',
       })
       .click();
@@ -100,7 +100,9 @@ test.describe('Doc Visibility: Restricted', () => {
 
     await page.goto(urlDoc);
 
-    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
+    await expect(
+      page.getByText('Log in to access the document.'),
+    ).toBeVisible();
   });
 
   test('A doc is not accessible when authentified but not member.', async ({
@@ -133,7 +135,7 @@ test.describe('Doc Visibility: Restricted', () => {
     await page.goto(urlDoc);
 
     await expect(
-      page.getByText('You do not have permission to perform this action.'),
+      page.getByText('You do not have permission to view this document.'),
     ).toBeVisible();
   });
 
@@ -160,7 +162,7 @@ test.describe('Doc Visibility: Restricted', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('menuitem', { name: 'Administrator' }).click();
 
     await page.getByRole('button', { name: 'Invite' }).click();
 
@@ -213,7 +215,7 @@ test.describe('Doc Visibility: Public', () => {
     await selectVisibility.click();
 
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Public',
       })
       .click();
@@ -225,7 +227,7 @@ test.describe('Doc Visibility: Public', () => {
     await expect(page.getByLabel('Visibility mode')).toBeVisible();
     await page.getByLabel('Visibility mode').click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Reading',
       })
       .click();
@@ -287,7 +289,7 @@ test.describe('Doc Visibility: Public', () => {
     await selectVisibility.click();
 
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Public',
       })
       .click();
@@ -355,7 +357,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const selectVisibility = page.getByLabel('Visibility', { exact: true });
     await selectVisibility.click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Connected',
       })
       .click();
@@ -379,7 +381,10 @@ test.describe('Doc Visibility: Authenticated', () => {
     await page.goto(urlDoc);
 
     await expect(page.locator('h2').getByText(docTitle)).toBeHidden();
-    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
+
+    await expect(
+      page.getByText('Log in to access the document.'),
+    ).toBeVisible();
   });
 
   test('It checks a authenticated doc in read only mode', async ({
@@ -402,7 +407,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const selectVisibility = page.getByLabel('Visibility', { exact: true });
     await selectVisibility.click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Connected',
       })
       .click();
@@ -411,6 +416,14 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
+    await expect(
+      page
+        .getByLabel('It is the card information about the document.')
+        .getByText('Document accessible to any connected person', {
+          exact: true,
+        }),
+    ).toBeVisible();
+
     await page.getByRole('button', { name: 'close' }).click();
 
     const urlDoc = page.url();
@@ -456,7 +469,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const selectVisibility = page.getByLabel('Visibility', { exact: true });
     await selectVisibility.click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Connected',
       })
       .click();

src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts

@@ -12,7 +12,7 @@ test.describe('Home page', () => {
     const footer = page.locator('footer').first();
     await expect(header).toBeVisible();
     await expect(
-      header.getByRole('combobox', { name: 'Language' }),
+      header.getByRole('button', { name: /Language/ }),
     ).toBeVisible();
     await expect(
       header.getByRole('button', { name: 'Les services de La Suite numé' }),

src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts

@@ -9,19 +9,20 @@ test.describe('Language', () => {
     await expect(page.getByLabel('Logout')).toBeVisible();
 
     const header = page.locator('header').first();
-    await header.getByRole('combobox').getByText('English').click();
-    await header.getByRole('option', { name: 'Français' }).click();
+    await header
+      .getByRole('button', { name: /Language/ })
+      .getByText('English')
+      .click();
+    await page.getByRole('menuitem', { name: 'Français' }).click();
     await expect(
-      header.getByRole('combobox').getByText('Français'),
+      header.getByRole('button').getByText('Français'),
     ).toBeVisible();
 
     await expect(page.getByLabel('Se déconnecter')).toBeVisible();
 
-    await header.getByRole('combobox').getByText('Français').click();
-    await header.getByRole('option', { name: 'Deutsch' }).click();
-    await expect(
-      header.getByRole('combobox').getByText('Deutsch'),
-    ).toBeVisible();
+    await header.getByRole('button').getByText('Français').click();
+    await page.getByRole('menuitem', { name: 'Deutsch' }).click();
+    await expect(header.getByRole('button').getByText('Deutsch')).toBeVisible();
 
     await expect(page.getByLabel('Abmelden')).toBeVisible();
   });
@@ -53,8 +54,11 @@ test.describe('Language', () => {
 
     // Switch language to French
     const header = page.locator('header').first();
-    await header.getByRole('combobox').getByText('English').click();
-    await header.getByRole('option', { name: 'Français' }).click();
+    await header
+      .getByRole('button', { name: /Language/ })
+      .getByText('English')
+      .click();
+    await page.getByRole('menuitem', { name: 'Français' }).click();
 
     // Check for French 404 response
     await check404Response('Pas trouvé.');

src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts

@@ -29,7 +29,7 @@ test.describe('Left panel mobile', () => {
     const header = page.locator('header').first();
     const homeButton = page.getByRole('button', { name: 'house' });
     const newDocButton = page.getByRole('button', { name: 'New doc' });
-    const languageButton = page.getByRole('combobox', { name: 'Language' });
+    const languageButton = page.getByRole('button', { name: /Language/ });
     const logoutButton = page.getByRole('button', { name: 'Logout' });
 
     await expect(homeButton).not.toBeInViewport();

src/frontend/apps/impress/cunningham.ts

@@ -381,6 +381,7 @@ const config = {
               'color-active': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
+            color: 'var(--c--theme--colors--primary-800)',
           },
           secondary: {
             background: {

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -8,17 +8,20 @@ import {
 import { Button, Popover } from 'react-aria-components';
 import styled from 'styled-components';
 
+import { BoxProps } from './Box';
+
 const StyledPopover = styled(Popover)`
   background-color: white;
   border-radius: 4px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-
   border: 1px solid #dddddd;
-
   transition: opacity 0.2s ease-in-out;
 `;
 
-const StyledButton = styled(Button)`
+interface StyledButtonProps {
+  $css?: BoxProps['$css'];
+}
+const StyledButton = styled(Button)<StyledButtonProps>`
   cursor: pointer;
   border: none;
   background: none;
@@ -29,10 +32,12 @@ const StyledButton = styled(Button)`
   font-size: 0.938rem;
   padding: 0;
   text-wrap: nowrap;
+  ${({ $css }) => $css};
 `;
 
 export interface DropButtonProps {
   button: ReactNode;
+  buttonCss?: BoxProps['$css'];
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   label?: string;
@@ -40,6 +45,7 @@ export interface DropButtonProps {
 
 export const DropButton = ({
   button,
+  buttonCss,
   isOpen = false,
   onOpenChange,
   children,
@@ -64,6 +70,7 @@ export const DropButton = ({
         ref={triggerRef}
         onPress={() => onOpenChangeHandler(true)}
         aria-label={label}
+        $css={buttonCss}
       >
         {button}
       </StyledButton>

src/frontend/apps/impress/src/components/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, useRef, useState } from 'react';
 import { css } from 'styled-components';
 
 import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
@@ -20,6 +20,7 @@ export type DropdownMenuProps = {
   showArrow?: boolean;
   label?: string;
   arrowCss?: BoxProps['$css'];
+  buttonCss?: BoxProps['$css'];
   disabled?: boolean;
   topMessage?: string;
 };
@@ -30,6 +31,7 @@ export const DropdownMenu = ({
   disabled = false,
   showArrow = false,
   arrowCss,
+  buttonCss,
   label,
   topMessage,
 }: PropsWithChildren<DropdownMenuProps>) => {
@@ -37,6 +39,7 @@ export const DropdownMenu = ({
   const spacings = theme.spacingsTokens();
   const colors = theme.colorsTokens();
   const [isOpen, setIsOpen] = useState(false);
+  const blockButtonRef = useRef<HTMLDivElement>(null);
 
   const onOpenChange = (isOpen: boolean) => {
     setIsOpen(isOpen);
@@ -51,10 +54,17 @@ export const DropdownMenu = ({
       isOpen={isOpen}
       onOpenChange={onOpenChange}
       label={label}
+      buttonCss={buttonCss}
       button={
         showArrow ? (
-          <Box $direction="row" $align="center">
-            <div>{children}</div>
+          <Box
+            ref={blockButtonRef}
+            $direction="row"
+            $align="center"
+            $position="relative"
+            aria-controls="menu"
+          >
+            <Box>{children}</Box>
             <Icon
               $variation="600"
               $css={
@@ -67,11 +77,17 @@ export const DropdownMenu = ({
             />
           </Box>
         ) : (
-          children
+          <Box ref={blockButtonRef} aria-controls="menu">
+            {children}
+          </Box>
         )
       }
     >
-      <Box $maxWidth="320px">
+      <Box
+        $maxWidth="320px"
+        $minWidth={`${blockButtonRef.current?.clientWidth}px`}
+        role="menu"
+      >
         {topMessage && (
           <Text
             $variation="700"
@@ -90,6 +106,7 @@ export const DropdownMenu = ({
           const isDisabled = option.disabled !== undefined && option.disabled;
           return (
             <BoxButton
+              role="menuitem"
               aria-label={option.label}
               data-testid={option.testId}
               $direction="row"

src/frontend/apps/impress/src/components/Text.tsx

@@ -25,7 +25,9 @@ export interface TextProps extends BoxProps {
   $size?: TextSizes | (string & {});
   $theme?:
     | 'primary'
+    | 'primary-text'
     | 'secondary'
+    | 'secondary-text'
     | 'info'
     | 'success'
     | 'warning'

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -406,6 +406,10 @@ input:-webkit-autofill:focus {
   );
 }
 
+.c__button--primary-text {
+  color: var(--c--components--button--primary-text--color);
+}
+
 .c__button--primary-text:hover,
 .c__button--primary-text:focus-visible {
   background-color: var(

src/frontend/apps/impress/src/cunningham/cunningham-tokens.css

@@ -505,6 +505,9 @@
   --c--components--button--primary-text--color-hover: var(
     --c--theme--colors--primary-text
   );
+  --c--components--button--primary-text--color: var(
+    --c--theme--colors--primary-800
+  );
   --c--components--button--secondary--background--color-hover: #f6f6f6;
   --c--components--button--secondary--background--color-active: #ededed;
   --c--components--button--secondary--border--color: var(

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -505,6 +505,7 @@ export const tokens = {
               'color-active': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
+            color: 'var(--c--theme--colors--primary-800)',
           },
           secondary: {
             background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },

src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx

@@ -14,7 +14,11 @@ export const ButtonLogin = () => {
 
   if (!authenticated) {
     return (
-      <Button onClick={gotoLogin} color="primary-text" aria-label={t('Login')}>
+      <Button
+        onClick={() => gotoLogin()}
+        color="primary-text"
+        aria-label={t('Login')}
+      >
         {t('Login')}
       </Button>
     );
@@ -32,7 +36,7 @@ export const ProConnectButton = () => {
 
   return (
     <BoxButton
-      onClick={gotoLogin}
+      onClick={() => gotoLogin()}
       aria-label={t('Proconnect Login')}
       $css={css`
         background-color: var(--c--theme--colors--primary-text);

src/frontend/apps/impress/src/features/auth/utils.ts

@@ -16,8 +16,11 @@ export const setAuthUrl = () => {
   }
 };
 
-export const gotoLogin = () => {
-  setAuthUrl();
+export const gotoLogin = (withRedirect = true) => {
+  if (withRedirect) {
+    setAuthUrl();
+  }
+
   window.location.replace(LOGIN_URL);
 };
 

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -76,13 +76,13 @@ export const cssEditor = (readonly: boolean) => css`
 
   .bn-block-outer:not(:first-child) {
     &:has(h1) {
-      padding-top: 32px;
+      margin-top: 32px;
     }
     &:has(h2) {
-      padding-top: 24px;
+      margin-top: 24px;
     }
     &:has(h3) {
-      padding-top: 16px;
+      margin-top: 16px;
     }
   }
 
@@ -92,9 +92,16 @@ export const cssEditor = (readonly: boolean) => css`
     border-radius: 4px;
   }
 
+  @media screen and (width <= 768px) {
+    & .bn-editor {
+      padding-right: 36px;
+    }
+  }
+
   @media screen and (width <= 560px) {
     & .bn-editor {
       ${readonly && `padding-left: 10px;`}
+      padding-right: 10px;
     }
     .bn-side-menu[data-block-type='heading'][data-level='1'] {
       height: 46px;

src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx

@@ -27,6 +27,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
 
   const { t } = useTranslation();
   const docIsPublic = doc.link_reach === LinkReach.PUBLIC;
+  const docIsAuth = doc.link_reach === LinkReach.AUTHENTICATED;
 
   const { transRole } = useTrans();
 
@@ -38,7 +39,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
         $gap={spacings['base']}
         aria-label={t('It is the card information about the document.')}
       >
-        {docIsPublic && (
+        {(docIsPublic || docIsAuth) && (
           <Box
             aria-label={t('Public document')}
             $color={colors['primary-800']}
@@ -57,10 +58,12 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
               $theme="primary"
               $variation="800"
               data-testid="public-icon"
-              iconName="public"
+              iconName={docIsPublic ? 'public' : 'vpn_lock'}
             />
             <Text $theme="primary" $variation="800">
-              {t('Public document')}
+              {docIsPublic
+                ? t('Public document')
+                : t('Document accessible to any connected person')}
             </Text>
           </Box>
         )}
@@ -76,8 +79,9 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
             $css="flex:1;"
             $gap="0.5rem 1rem"
             $align="center"
+            $maxWidth="100%"
           >
-            <Box $gap={spacings['3xs']}>
+            <Box $gap={spacings['3xs']} $overflow="auto">
               <DocTitle doc={doc} />
 
               <Box $direction="row">

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -101,39 +101,35 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   }, [doc]);
 
   return (
-    <>
-      <Tooltip content={t('Rename')} placement="top">
-        <Box
-          as="span"
-          role="textbox"
-          contentEditable
-          defaultValue={titleDisplay || undefined}
-          onKeyDownCapture={handleKeyDown}
-          suppressContentEditableWarning={true}
-          aria-label="doc title input"
-          onBlurCapture={(event) =>
-            handleTitleSubmit(event.target.textContent || '')
+    <Tooltip content={t('Rename')} placement="top">
+      <Box
+        as="span"
+        role="textbox"
+        contentEditable
+        defaultValue={titleDisplay || undefined}
+        onKeyDownCapture={handleKeyDown}
+        suppressContentEditableWarning={true}
+        aria-label="doc title input"
+        onBlurCapture={(event) =>
+          handleTitleSubmit(event.target.textContent || '')
+        }
+        $color={colorsTokens()['greyscale-1000']}
+        $css={css`
+          &[contenteditable='true']:empty:not(:focus):before {
+            content: '${untitledDocument}';
+            color: grey;
+            pointer-events: none;
+            font-style: italic;
           }
-          $color={colorsTokens()['greyscale-1000']}
-          $margin={{ left: '-2px', right: '10px' }}
-          $css={css`
-            &[contenteditable='true']:empty:not(:focus):before {
-              content: '${untitledDocument}';
-              color: grey;
-              pointer-events: none;
-              font-style: italic;
-            }
-            font-size: ${isDesktop
-              ? css`var(--c--theme--font--sizes--h2)`
-              : css`var(--c--theme--font--sizes--sm)`};
-            font-weight: 700;
-
-            outline: none;
-          `}
-        >
-          {titleDisplay}
-        </Box>
-      </Tooltip>
-    </>
+          font-size: ${isDesktop
+            ? css`var(--c--theme--font--sizes--h2)`
+            : css`var(--c--theme--font--sizes--sm)`};
+          font-weight: 700;
+          outline: none;
+        `}
+      >
+        {titleDisplay}
+      </Box>
+    </Tooltip>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -18,7 +18,11 @@ import {
 } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { useEditorStore } from '@/features/docs/doc-editor/';
-import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management';
+import {
+  Doc,
+  ModalRemoveDoc,
+  useCopyDocLink,
+} from '@/features/docs/doc-management';
 import { DocShareModal } from '@/features/docs/doc-share';
 import {
   KEY_LIST_DOC_VERSIONS,
@@ -34,7 +38,7 @@ interface DocToolBoxProps {
 
 export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const { t } = useTranslation();
-  const hasAccesses = doc.nb_accesses > 1;
+  const hasAccesses = doc.nb_accesses > 1 && doc.abilities.accesses_view;
   const queryClient = useQueryClient();
 
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
@@ -50,6 +54,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const { isSmallMobile, isDesktop } = useResponsiveStore();
   const { editor } = useEditorStore();
   const { toast } = useToastProvider();
+  const copyDocLink = useCopyDocLink(doc.id);
 
   const options: DropdownMenuOption[] = [
     ...(isSmallMobile
@@ -66,6 +71,11 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
               setIsModalExportOpen(true);
             },
           },
+          {
+            label: t('Copy link'),
+            icon: 'add_link',
+            callback: copyDocLink,
+          },
         ]
       : []),
 

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx

@@ -71,9 +71,15 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
           </Button>
         </>
       }
-      size={ModalSize.MEDIUM}
+      size={ModalSize.SMALL}
       title={
-        <Text $size="h6" as="h6" $margin={{ all: '0' }} $align="flex-start">
+        <Text
+          $size="h6"
+          as="h6"
+          $margin={{ all: '0' }}
+          $align="flex-start"
+          $variation="1000"
+        >
           {t('Delete a doc')}
         </Text>
       }

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx

@@ -33,9 +33,7 @@ export const DocShareModalFooter = ({ doc, onClose }: Props) => {
       >
         <Button
           fullWidth={false}
-          onClick={() => {
-            copyDocLink();
-          }}
+          onClick={copyDocLink}
           color="tertiary"
           icon={<span className="material-icons">add_link</span>}
         >

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx

@@ -100,17 +100,21 @@ export const ModalConfirmationVersion = ({
           </Button>
         </>
       }
-      size={ModalSize.MEDIUM}
+      size={ModalSize.SMALL}
       title={
-        <Text $size="h6" $align="flex-start">
+        <Text $size="h6" $align="flex-start" $variation="1000">
           {t('Warning')}
         </Text>
       }
     >
       <Box aria-label={t('Modal confirmation to restore the version')}>
         <Box>
-          <Text>{t('Your current document will revert to this version.')}</Text>
-          <Text>{t('If a member is editing, his works can be lost.')}</Text>
+          <Text $variation="600">
+            {t('Your current document will revert to this version.')}
+          </Text>
+          <Text $variation="600">
+            {t('If a member is editing, his works can be lost.')}
+          </Text>
         </Box>
       </Box>
     </Modal>

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -61,12 +61,8 @@ export const DocsGrid = ({
       $position="relative"
       $width="100%"
       $maxWidth="960px"
-      $maxHeight="calc(100vh - 52px - 1rem)"
+      $maxHeight="calc(100vh - 52px - 2rem)"
       $align="center"
-      $css={css`
-        overflow-x: hidden;
-        overflow-y: auto;
-      `}
     >
       <DocsGridLoader isLoading={isRefetching || loading} />
       <Card
@@ -75,8 +71,7 @@ export const DocsGrid = ({
         $height="100%"
         $width="100%"
         $css={css`
-          overflow-x: hidden;
-          overflow-y: auto;
+          ${!isDesktop ? 'border: none;' : ''}
         `}
         $padding={{
           top: 'base',
@@ -101,7 +96,7 @@ export const DocsGrid = ({
           </Box>
         )}
         {hasDocs && (
-          <Box $gap="6px">
+          <Box $gap="6px" $overflow="auto">
             <Box
               $direction="row"
               $padding={{ horizontal: 'xs' }}
@@ -122,27 +117,29 @@ export const DocsGrid = ({
               )}
             </Box>
 
-            {/* Body */}
             {data?.pages.map((currentPage) => {
               return currentPage.results.map((doc) => (
                 <DocsGridItem doc={doc} key={doc.id} />
               ));
             })}
-          </Box>
-        )}
 
-        {hasNextPage && !loading && (
-          <InView
-            data-testid="infinite-scroll-trigger"
-            as="div"
-            onChange={loadMore}
-          >
-            {!isFetching && hasNextPage && (
-              <Button onClick={() => void fetchNextPage()} color="primary-text">
-                {t('More docs')}
-              </Button>
+            {hasNextPage && !loading && (
+              <InView
+                data-testid="infinite-scroll-trigger"
+                as="div"
+                onChange={loadMore}
+              >
+                {!isFetching && hasNextPage && (
+                  <Button
+                    onClick={() => void fetchNextPage()}
+                    color="primary-text"
+                  >
+                    {t('More docs')}
+                  </Button>
+                )}
+              </InView>
             )}
-          </InView>
+          </Box>
         )}
       </Card>
     </Box>

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx

@@ -54,6 +54,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
           $css={css`
             flex: ${flexLeft};
             align-items: center;
+            min-width: 0;
           `}
           href={`/docs/${doc.id}`}
         >
@@ -64,6 +65,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
             $gap={spacings.xs}
             $flex={flexLeft}
             $padding={{ right: isDesktop ? 'md' : '3xs' }}
+            $maxWidth="100%"
           >
             <SimpleDocItem isPinned={doc.is_favorite} doc={doc} />
             {showAccesses && (

src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx

@@ -38,7 +38,7 @@ export const SimpleDocItem = ({
   const { untitledDocument } = useTrans();
 
   return (
-    <Box $direction="row" $gap={spacings.sm}>
+    <Box $direction="row" $gap={spacings.sm} $overflow="auto">
       <Box
         $direction="row"
         $align="center"
@@ -53,7 +53,7 @@ export const SimpleDocItem = ({
           <SimpleFileIcon aria-label={t('Simple document icon')} />
         )}
       </Box>
-      <Box $justify="center">
+      <Box $justify="center" $overflow="auto">
         <Text
           aria-describedby="doc-title"
           aria-label={doc.title}

src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx

@@ -55,7 +55,7 @@ export default function HomeBanner() {
             $textAlign="center"
             $margin="none"
             $css={css`
-              line-height: 56px;
+              line-height: ${!isMobile ? '56px' : '45px'};
             `}
           >
             {t('Collaborative writing, Simplified.')}
@@ -74,7 +74,7 @@ export default function HomeBanner() {
             <ProConnectButton />
           ) : (
             <Button
-              onClick={gotoLogin}
+              onClick={() => gotoLogin()}
               icon={
                 <Text $isMaterialIcon $color="white">
                   bolt

src/frontend/apps/impress/src/features/home/components/HomeSection.tsx

@@ -116,8 +116,8 @@ export const HomeSection = ({
             `}
             $variation="1000"
             $weight="bold"
-            $size={!isSmallDevice ? 'xs-alt' : 'h4'}
-            $textAlign={isSmallMobile ? 'center' : 'left'}
+            $size={!isSmallDevice ? 'xs-alt' : isSmallMobile ? 'h6' : 'h4'}
+            $textAlign="left"
             $margin="none"
           >
             {title}

src/frontend/apps/impress/src/features/language/LanguagePicker.tsx

@@ -1,84 +1,61 @@
-import { Select } from '@openfun/cunningham-react';
 import { Settings } from 'luxon';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
+import { css } from 'styled-components';
 
-import { Box, Text } from '@/components/';
+import { DropdownMenu, Text } from '@/components/';
 import { LANGUAGES_ALLOWED } from '@/i18n/conf';
 
-const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
-  flex-shrink: 0;
-  width: auto;
-
-  .c__select__wrapper {
-    min-height: 2rem;
-    height: auto;
-    border-color: transparent;
-    padding: 0 0.15rem 0 0.45rem;
-    border-radius: 1px;
-
-    .labelled-box .labelled-box__children {
-      padding-right: 2rem;
-
-      .c_select__render .typo-text {
-        ${({ $isSmall }) => $isSmall && `display: none;`}
-      }
-    }
-
-    &:hover {
-      box-shadow: none !important;
-    }
-  }
-`;
-
 export const LanguagePicker = () => {
   const { t, i18n } = useTranslation();
   const { preload: languages } = i18n.options;
-  Settings.defaultLocale = i18n.language;
+  const language = i18n.language;
+  Settings.defaultLocale = language;
 
   const optionsPicker = useMemo(() => {
     return (languages || []).map((lang) => ({
-      value: lang,
-      label: lang,
-      render: () => (
-        <Box
-          className="c_select__render"
-          $direction="row"
-          $gap="0.7rem"
-          $align="center"
-        >
-          <Text
-            $isMaterialIcon
-            $size="1rem"
-            $theme="primary"
-            $weight="bold"
-            $variation="800"
-          >
-            translate
-          </Text>
-          <Text $theme="primary" $weight="500" $variation="800">
-            {LANGUAGES_ALLOWED[lang]}
-          </Text>
-        </Box>
-      ),
-    }));
-  }, [languages]);
-
-  return (
-    <SelectStyled
-      label={t('Language')}
-      showLabelWhenSelected={false}
-      clearable={false}
-      hideLabel
-      defaultValue={i18n.language}
-      className="c_select__no_bg"
-      options={optionsPicker}
-      onChange={(e) => {
-        i18n.changeLanguage(e.target.value as string).catch((err) => {
+      label: LANGUAGES_ALLOWED[lang],
+      isSelected: language === lang,
+      callback: () => {
+        i18n.changeLanguage(lang).catch((err) => {
           console.error('Error changing language', err);
         });
-      }}
-    />
+      },
+    }));
+  }, [i18n, language, languages]);
+
+  return (
+    <DropdownMenu
+      options={optionsPicker}
+      showArrow
+      buttonCss={css`
+        &:hover {
+          background-color: var(
+            --c--components--button--primary-text--background--color-hover
+          );
+        }
+        border-radius: 4px;
+        padding: 0.5rem 0.6rem;
+        & > div {
+          gap: 0.2rem;
+          display: flex;
+        }
+        & .material-icons {
+          color: var(--c--components--button--primary-text--color) !important;
+        }
+      `}
+    >
+      <Text
+        $theme="primary"
+        aria-label={t('Language')}
+        $direction="row"
+        $gap="0.5rem"
+      >
+        <Text $isMaterialIcon $color="inherit" $size="xl">
+          translate
+        </Text>
+        {LANGUAGES_ALLOWED[language]}
+      </Text>
+    </DropdownMenu>
   );
 };

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx

@@ -39,7 +39,7 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
       `}
       key={doc.id}
     >
-      <StyledLink href={`/docs/${doc.id}`}>
+      <StyledLink href={`/docs/${doc.id}`} $css="overflow: auto;">
         <SimpleDocItem showAccesses doc={doc} />
       </StyledLink>
       <div className="pinned-actions">

src/frontend/apps/impress/src/layouts/MainLayout.tsx

@@ -19,8 +19,8 @@ export function MainLayout({
 }: PropsWithChildren<MainLayoutProps>) {
   const { isDesktop } = useResponsiveStore();
   const { colorsTokens } = useCunninghamTheme();
-
   const colors = colorsTokens();
+  const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor;
 
   return (
     <div>
@@ -39,10 +39,10 @@ export function MainLayout({
           $width="100%"
           $height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
           $padding={{
-            all: isDesktop ? 'base' : '2xs',
+            all: isDesktop ? 'base' : '0',
           }}
           $background={
-            backgroundColor === 'white'
+            currentBackgroundColor === 'white'
               ? colors['greyscale-000']
               : colors['greyscale-050']
           }

src/frontend/apps/impress/src/layouts/PageLayout.tsx

@@ -6,17 +6,27 @@ import { HEADER_HEIGHT, Header } from '@/features/header';
 import { LeftPanel } from '@/features/left-panel';
 import { useResponsiveStore } from '@/stores';
 
-export function PageLayout({ children }: PropsWithChildren) {
+interface PageLayoutProps {
+  withFooter?: boolean;
+}
+
+export function PageLayout({
+  children,
+  withFooter = true,
+}: PropsWithChildren<PageLayoutProps>) {
   const { isDesktop } = useResponsiveStore();
 
   return (
-    <Box $minHeight="100vh" $margin={{ top: `${HEADER_HEIGHT}px` }}>
+    <Box
+      $minHeight={`calc(100vh - ${HEADER_HEIGHT}px)`}
+      $margin={{ top: `${HEADER_HEIGHT}px` }}
+    >
       <Header />
       <Box as="main" $width="100%" $css="flex-grow:1;">
         {!isDesktop && <LeftPanel />}
         {children}
       </Box>
-      <Footer />
+      {withFooter && <Footer />}
     </Box>
   );
 }

src/frontend/apps/impress/src/pages/401.tsx

@@ -0,0 +1,57 @@
+import { Button } from '@openfun/cunningham-react';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { ReactElement, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import img401 from '@/assets/icons/icon-401.png';
+import { Box, Text } from '@/components';
+import { gotoLogin, useAuth } from '@/features/auth';
+import { PageLayout } from '@/layouts';
+import { NextPageWithLayout } from '@/types/next';
+
+const Page: NextPageWithLayout = () => {
+  const { t } = useTranslation();
+  const { authenticated } = useAuth();
+  const { replace } = useRouter();
+
+  useEffect(() => {
+    if (authenticated) {
+      void replace(`/`);
+    }
+  }, [authenticated, replace]);
+
+  return (
+    <Box
+      $align="center"
+      $margin="auto"
+      $gap="1rem"
+      $padding={{ bottom: '2rem' }}
+    >
+      <Image
+        src={img401}
+        alt={t('Image 401')}
+        style={{
+          maxWidth: '100%',
+          height: 'auto',
+        }}
+      />
+
+      <Box $align="center" $gap="0.8rem">
+        <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
+          {t('Log in to access the document.')}
+        </Text>
+
+        <Button onClick={() => gotoLogin(false)} aria-label={t('Login')}>
+          {t('Login')}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <PageLayout withFooter={false}>{page}</PageLayout>;
+};
+
+export default Page;

src/frontend/apps/impress/src/pages/403.tsx

@@ -0,0 +1,60 @@
+import { Button } from '@openfun/cunningham-react';
+import Image from 'next/image';
+import { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+import img403 from '@/assets/icons/icon-403.png';
+import { Box, StyledLink, Text } from '@/components';
+import { PageLayout } from '@/layouts';
+import { NextPageWithLayout } from '@/types/next';
+
+const StyledButton = styled(Button)`
+  width: fit-content;
+`;
+
+const Page: NextPageWithLayout = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      $align="center"
+      $margin="auto"
+      $gap="1rem"
+      $padding={{ bottom: '2rem' }}
+    >
+      <Image
+        src={img403}
+        alt={t('Image 403')}
+        style={{
+          maxWidth: '100%',
+          height: 'auto',
+        }}
+      />
+
+      <Box $align="center" $gap="0.8rem">
+        <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
+          {t('You do not have permission to view this document.')}
+        </Text>
+
+        <StyledLink href="/">
+          <StyledButton
+            icon={
+              <Text $isMaterialIcon $color="white">
+                house
+              </Text>
+            }
+          >
+            {t('Home')}
+          </StyledButton>
+        </StyledLink>
+      </Box>
+    </Box>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <PageLayout withFooter={false}>{page}</PageLayout>;
+};
+
+export default Page;

src/frontend/apps/impress/src/pages/404.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import Icon404 from '@/assets/icons/icon-404.svg';
 import { Box, StyledLink, Text } from '@/components';
-import { MainLayout } from '@/layouts';
+import { PageLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
 const StyledButton = styled(Button)`
@@ -33,7 +33,15 @@ const Page: NextPageWithLayout = () => {
 
       <Box $margin={{ top: 'large' }}>
         <StyledLink href="/">
-          <StyledButton>{t('Back to home page')}</StyledButton>
+          <StyledButton
+            icon={
+              <Text $isMaterialIcon $color="white">
+                house
+              </Text>
+            }
+          >
+            {t('Home')}
+          </StyledButton>
         </StyledLink>
       </Box>
     </Box>
@@ -41,7 +49,7 @@ const Page: NextPageWithLayout = () => {
 };
 
 Page.getLayout = function getLayout(page: ReactElement) {
-  return <MainLayout>{page}</MainLayout>;
+  return <PageLayout withFooter={false}>{page}</PageLayout>;
 };
 
 export default Page;

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 import { Box, Text, TextErrors } from '@/components';
-import { gotoLogin } from '@/features/auth';
+import { setAuthUrl } from '@/features/auth';
 import { DocEditor } from '@/features/docs/doc-editor';
 import {
   Doc,
@@ -99,13 +99,19 @@ const DocPage = ({ id }: DocProps) => {
   }, [addTask, doc?.id, queryClient]);
 
   if (isError && error) {
+    if (error.status === 403) {
+      void replace(`/403`);
+      return null;
+    }
+
     if (error.status === 404) {
       void replace(`/404`);
       return null;
     }
 
     if (error.status === 401) {
-      gotoLogin();
+      setAuthUrl();
+      void replace(`/401`);
       return null;
     }
 

src/frontend/apps/impress/src/pages/offline/index.tsx

@@ -31,7 +31,15 @@ const Page: NextPageWithLayout = () => {
 
       <Box $margin={{ top: 'large' }}>
         <StyledLink href="/">
-          <StyledButton>{t('Back to home page')}</StyledButton>
+          <StyledButton
+            icon={
+              <Text $isMaterialIcon $color="white">
+                house
+              </Text>
+            }
+          >
+            {t('Home')}
+          </StyledButton>
         </StyledLink>
       </Box>
     </Box>

src/helm/impress/values.yaml

@@ -170,6 +170,8 @@ ingressMedia:
     nginx.ingress.kubernetes.io/auth-url: https://impress.example.com/api/v1.0/documents/media-auth/
     nginx.ingress.kubernetes.io/auth-response-headers: "Authorization, X-Amz-Date, X-Amz-Content-SHA256"
     nginx.ingress.kubernetes.io/upstream-vhost: minio.impress.svc.cluster.local:9000
+    nginx.ingress.kubernetes.io/configuration-snippet: |
+      add_header Content-Security-Policy "default-src 'none'" always;
 
 ## @param serviceMedia.host
 ## @param serviceMedia.port