From cbd99449131760f21cd99d7645d0d35e189318a7 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 26 Mar 2025 16:15:44 +0100
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=94=A7(backend)=20add=20FRONTEND=5FCS?=
 =?UTF-8?q?S=5FURL=20env=20var?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We added the `FRONTEND_CSS_URL` environment
variable. It will give the possibility to add a
css layer at runtime.
---
 src/backend/core/api/viewsets.py                           | 1 +
 src/backend/core/tests/test_api_config.py                  | 2 ++
 src/backend/impress/settings.py                            | 4 ++++
 src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts | 1 +
 4 files changed, 8 insertions(+)

diff --git a/src/backend/core/api/viewsets.py b/src/backend/core/api/viewsets.py
index cdd6db84f..c416c2247 100644
--- a/src/backend/core/api/viewsets.py
+++ b/src/backend/core/api/viewsets.py
@@ -1689,6 +1689,7 @@ def get(self, request):
             "CRISP_WEBSITE_ID",
             "ENVIRONMENT",
             "FRONTEND_THEME",
+            "FRONTEND_CSS_URL",
             "MEDIA_BASE_URL",
             "POSTHOG_KEY",
             "LANGUAGES",
diff --git a/src/backend/core/tests/test_api_config.py b/src/backend/core/tests/test_api_config.py
index cf2ad341c..1dd7f1540 100644
--- a/src/backend/core/tests/test_api_config.py
+++ b/src/backend/core/tests/test_api_config.py
@@ -19,6 +19,7 @@
     COLLABORATION_WS_URL="http://testcollab/",
     CRISP_WEBSITE_ID="123",
     FRONTEND_THEME="test-theme",
+    FRONTEND_CSS_URL="http://testcss/",
     MEDIA_BASE_URL="http://testserver/",
     POSTHOG_KEY={"id": "132456", "host": "https://eu.i.posthog-test.com"},
     SENTRY_DSN="https://sentry.test/123",
@@ -39,6 +40,7 @@ def test_api_config(is_authenticated):
         "CRISP_WEBSITE_ID": "123",
         "ENVIRONMENT": "test",
         "FRONTEND_THEME": "test-theme",
+        "FRONTEND_CSS_URL": "http://testcss/",
         "LANGUAGES": [
             ["en-us", "English"],
             ["fr-fr", "Français"],
diff --git a/src/backend/impress/settings.py b/src/backend/impress/settings.py
index 8b73fccaa..2756ee4d1 100755
--- a/src/backend/impress/settings.py
+++ b/src/backend/impress/settings.py
@@ -411,6 +411,10 @@ class Base(Configuration):
         None, environ_name="FRONTEND_THEME", environ_prefix=None
     )
 
+    FRONTEND_CSS_URL = values.Value(
+        None, environ_name="FRONTEND_CSS_URL", environ_prefix=None
+    )
+
     # Posthog
     POSTHOG_KEY = values.DictValue(
         None, environ_name="POSTHOG_KEY", environ_prefix=None
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
index dde84fdd4..ffe8ccfa8 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
@@ -9,6 +9,7 @@ const config = {
   CRISP_WEBSITE_ID: null,
   COLLABORATION_WS_URL: 'ws://localhost:4444/collaboration/ws/',
   ENVIRONMENT: 'development',
+  FRONTEND_CSS_URL: null,
   FRONTEND_THEME: 'default',
   MEDIA_BASE_URL: 'http://localhost:8083',
   LANGUAGES: [

From 40327d539e1810dfe23be3686174ce612042cb5f Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 26 Mar 2025 16:42:22 +0100
Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20custom=20css=20?=
 =?UTF-8?q?style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

From the config, we can add custom css style
to the app.
---
 CHANGELOG.md                                  |  1 +
 .../e2e/__tests__/app-impress/config.spec.ts  | 24 +++++++++++++++++++
 .../src/core/config/ConfigProvider.tsx        | 18 ++++++++++----
 .../impress/src/core/config/api/useConfig.tsx |  1 +
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c1f1f5ab5..4d928e5c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to
 ## Added
 
 - 📄(legal) Require contributors to sign a DCO #779
+- ✨(frontend) add custom css style #771
 
 ## Changed
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
index ffe8ccfa8..6f8bfa524 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
@@ -174,6 +174,30 @@ test.describe('Config', () => {
       page.locator('#crisp-chatbox').getByText('Invalid website'),
     ).toBeVisible();
   });
+
+  test('it checks FRONTEND_CSS_URL config', async ({ page }) => {
+    await page.route('**/api/v1.0/config/', async (route) => {
+      const request = route.request();
+      if (request.method().includes('GET')) {
+        await route.fulfill({
+          json: {
+            ...config,
+            FRONTEND_CSS_URL: 'http://localhost:123465/css/style.css',
+          },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    await page.goto('/');
+
+    await expect(
+      page
+        .locator('head link[href="http://localhost:123465/css/style.css"]')
+        .first(),
+    ).toBeAttached();
+  });
 });
 
 test.describe('Config: Not loggued', () => {
diff --git a/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx b/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx
index 2e1868f53..371e7c356 100644
--- a/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx
+++ b/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx
@@ -1,4 +1,5 @@
 import { Loader } from '@openfun/cunningham-react';
+import Head from 'next/head';
 import { PropsWithChildren, useEffect } from 'react';
 
 import { Box } from '@/components';
@@ -54,10 +55,17 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
   }
 
   return (
-    <AnalyticsProvider>
-      <CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}>
-        {children}
-      </CrispProvider>
-    </AnalyticsProvider>
+    <>
+      {conf?.FRONTEND_CSS_URL && (
+        <Head>
+          <link rel="stylesheet" href={conf?.FRONTEND_CSS_URL} />
+        </Head>
+      )}
+      <AnalyticsProvider>
+        <CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}>
+          {children}
+        </CrispProvider>
+      </AnalyticsProvider>
+    </>
   );
 };
diff --git a/src/frontend/apps/impress/src/core/config/api/useConfig.tsx b/src/frontend/apps/impress/src/core/config/api/useConfig.tsx
index 5c105c7a2..65187ce0e 100644
--- a/src/frontend/apps/impress/src/core/config/api/useConfig.tsx
+++ b/src/frontend/apps/impress/src/core/config/api/useConfig.tsx
@@ -11,6 +11,7 @@ interface ConfigResponse {
   COLLABORATION_WS_URL?: string;
   CRISP_WEBSITE_ID?: string;
   FRONTEND_THEME?: Theme;
+  FRONTEND_CSS_URL?: string;
   MEDIA_BASE_URL?: string;
   POSTHOG_KEY?: PostHogConf;
   SENTRY_DSN?: string;

From 93757c1c74835c5d10d80ad2861c90cb4af61e0f Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 26 Mar 2025 18:53:19 +0100
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=92=84(frontend)=20add=20classname=20?=
 =?UTF-8?q?to=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

To be easily customized, we added a classname
to most of the components.
---
 .../apps/impress/src/components/BoxButton.tsx     |  1 +
 src/frontend/apps/impress/src/components/Card.tsx |  1 +
 .../apps/impress/src/components/DropButton.tsx    |  2 ++
 src/frontend/apps/impress/src/components/Icon.tsx |  1 +
 .../impress/src/components/InfiniteScroll.tsx     |  5 ++++-
 .../apps/impress/src/components/LoadMoreText.tsx  |  1 +
 .../apps/impress/src/components/TextErrors.tsx    |  7 ++++++-
 .../components/quick-search/QuickSearchStyle.tsx  |  4 ----
 .../components/separators/HorizontalSeparator.tsx |  1 +
 .../src/features/auth/components/ButtonLogin.tsx  |  9 ++++++++-
 .../doc-editor/components/BlockNoteEditor.tsx     |  3 ++-
 .../components/BlockNoteToolBar/AIButton.tsx      |  8 ++++----
 .../BlockNoteToolBar/FileDownloadButton.tsx       |  2 +-
 .../BlockNoteToolBar/MarkdownButton.tsx           |  1 +
 .../ModalConfirmDownloadUnsafe.tsx                |  5 ++++-
 .../docs/doc-editor/components/DocEditor.tsx      | 15 ++++++++++++---
 .../docs/doc-export/components/ModalExport.tsx    |  1 +
 .../docs/doc-header/components/DocHeader.tsx      |  1 +
 .../docs/doc-header/components/DocTitle.tsx       |  1 +
 .../docs/doc-header/components/DocToolBox.tsx     |  1 +
 .../doc-header/components/DocVersionHeader.tsx    |  1 +
 .../doc-management/components/ModalRemoveDoc.tsx  |  5 ++++-
 .../docs/doc-search/components/DocSearchItem.tsx  |  6 +++++-
 .../docs/doc-search/components/DocSearchModal.tsx |  1 +
 .../components/DocShareAddMemberList.tsx          |  1 +
 .../components/DocShareAddMemberListItem.tsx      |  1 +
 .../components/DocShareInvitationItem.tsx         |  1 +
 .../doc-share/components/DocShareMemberItem.tsx   |  1 +
 .../docs/doc-share/components/DocShareModal.tsx   |  2 +-
 .../doc-share/components/DocShareModalFooter.tsx  |  1 +
 .../components/DocShareModalInviteUserByEmail.tsx |  6 +++++-
 .../docs/doc-share/components/DocVisibility.tsx   |  1 +
 .../docs/doc-share/components/SearchUserRow.tsx   |  7 ++++++-
 .../docs/doc-share/components/UserAvatar.tsx      |  1 +
 .../docs/doc-table-content/components/Heading.tsx |  1 +
 .../doc-table-content/components/TableContent.tsx |  1 +
 .../components/ModalConfirmationVersion.tsx       |  5 ++++-
 .../components/ModalSelectVersion.tsx             |  2 +-
 .../doc-versioning/components/VersionItem.tsx     |  1 +
 .../doc-versioning/components/VersionList.tsx     |  5 ++++-
 .../docs/docs-grid/components/DocsGrid.tsx        |  1 +
 .../docs/docs-grid/components/DocsGridItem.tsx    |  1 +
 .../components/DocsGridItemSharedButton.tsx       |  1 +
 .../docs/docs-grid/components/DocsGridLoader.tsx  |  1 +
 .../docs/docs-grid/components/SimpleDocItem.tsx   |  7 ++++++-
 .../apps/impress/src/features/footer/Footer.tsx   |  7 +++++--
 .../header/components/ButtonTogglePanel.tsx       |  1 +
 .../src/features/header/components/Header.tsx     |  1 +
 .../src/features/header/components/Title.tsx      |  7 ++++++-
 .../src/features/home/components/HomeBanner.tsx   |  1 +
 .../src/features/home/components/HomeBottom.tsx   |  1 +
 .../src/features/home/components/HomeContent.tsx  |  4 ++--
 .../src/features/home/components/HomeHeader.tsx   |  1 +
 .../src/features/home/components/HomeSection.tsx  |  1 +
 .../src/features/language/LanguagePicker.tsx      |  1 +
 .../components/LefPanelTargetFilters.tsx          |  1 +
 .../features/left-panel/components/LeftPanel.tsx  |  4 +++-
 .../left-panel/components/LeftPanelContent.tsx    |  1 +
 .../left-panel/components/LeftPanelDocContent.tsx |  1 +
 .../components/LeftPanelFavoriteItem.tsx          |  1 +
 .../left-panel/components/LeftPanelFavorites.tsx  |  2 +-
 .../left-panel/components/LeftPanelHeader.tsx     |  2 +-
 .../apps/impress/src/layouts/MainLayout.tsx       |  4 ++--
 .../apps/impress/src/layouts/PageLayout.tsx       |  1 +
 64 files changed, 137 insertions(+), 36 deletions(-)

diff --git a/src/frontend/apps/impress/src/components/BoxButton.tsx b/src/frontend/apps/impress/src/components/BoxButton.tsx
index c40d57411..3b8d77511 100644
--- a/src/frontend/apps/impress/src/components/BoxButton.tsx
+++ b/src/frontend/apps/impress/src/components/BoxButton.tsx
@@ -44,6 +44,7 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
           ${$css || ''}
         `}
         {...props}
+        className={`--docs--box-button ${props.className || ''}`}
         onClick={(event: React.MouseEvent<HTMLDivElement>) => {
           if (props.disabled) {
             return;
diff --git a/src/frontend/apps/impress/src/components/Card.tsx b/src/frontend/apps/impress/src/components/Card.tsx
index 5e3d5ed7d..08aec9388 100644
--- a/src/frontend/apps/impress/src/components/Card.tsx
+++ b/src/frontend/apps/impress/src/components/Card.tsx
@@ -14,6 +14,7 @@ export const Card = ({
 
   return (
     <Box
+      className={`--docs--card ${props.className || ''}`}
       $background="white"
       $radius="4px"
       $css={css`
diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx
index 2dbb26f86..5dfc1054a 100644
--- a/src/frontend/apps/impress/src/components/DropButton.tsx
+++ b/src/frontend/apps/impress/src/components/DropButton.tsx
@@ -71,6 +71,7 @@ export const DropButton = ({
         onPress={() => onOpenChangeHandler(true)}
         aria-label={label}
         $css={buttonCss}
+        className="--docs--drop-button"
       >
         {button}
       </StyledButton>
@@ -79,6 +80,7 @@ export const DropButton = ({
         triggerRef={triggerRef}
         isOpen={isLocalOpen}
         onOpenChange={onOpenChangeHandler}
+        className="--docs--drop-button-popover"
       >
         {children}
       </StyledPopover>
diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
index 224f87b6b..0b602f7b8 100644
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -36,6 +36,7 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
       $padding="4px"
       $margin="auto"
       {...textProps}
+      className={`--docs--icon-bg ${textProps.className || ''}`}
     >
       {iconName}
     </Text>
diff --git a/src/frontend/apps/impress/src/components/InfiniteScroll.tsx b/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
index 5ad4ffd04..5a0ee14b1 100644
--- a/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
+++ b/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
@@ -30,7 +30,10 @@ export const InfiniteScroll = ({
   };
 
   return (
-    <Box {...boxProps}>
+    <Box
+      {...boxProps}
+      className={`--docs--infinite-scroll ${boxProps.className || ''}`}
+    >
       {children}
       <InView onChange={loadMore}>
         {!isLoading && hasMore && (
diff --git a/src/frontend/apps/impress/src/components/LoadMoreText.tsx b/src/frontend/apps/impress/src/components/LoadMoreText.tsx
index 2b715b5b3..4caa811ad 100644
--- a/src/frontend/apps/impress/src/components/LoadMoreText.tsx
+++ b/src/frontend/apps/impress/src/components/LoadMoreText.tsx
@@ -20,6 +20,7 @@ export const LoadMoreText = ({
       $align="center"
       $gap="0.4rem"
       $padding={{ horizontal: '2xs', vertical: 'sm' }}
+      className="--docs--load-more"
     >
       <Icon
         $theme="primary"
diff --git a/src/frontend/apps/impress/src/components/TextErrors.tsx b/src/frontend/apps/impress/src/components/TextErrors.tsx
index fb6215d73..baf22a2d5 100644
--- a/src/frontend/apps/impress/src/components/TextErrors.tsx
+++ b/src/frontend/apps/impress/src/components/TextErrors.tsx
@@ -28,7 +28,12 @@ export const TextErrors = ({
   const { t } = useTranslation();
 
   return (
-    <AlertStyled canClose={canClose} type={VariantType.ERROR} icon={icon}>
+    <AlertStyled
+      canClose={canClose}
+      type={VariantType.ERROR}
+      icon={icon}
+      className="--docs--text-errors"
+    >
       <Box $direction="column" $gap="0.2rem">
         {causes &&
           causes.map((cause, i) => (
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
index 27967b2f8..b6fa0ad6a 100644
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
@@ -119,8 +119,6 @@ export const QuickSearchStyle = createGlobalStyle`
   }
 }
 
-
-
 .c__modal__scroller:has(.quick-search-container),
 .c__modal__scroller:has(.noPadding) {
   padding: 0 !important;
@@ -138,6 +136,4 @@ export const QuickSearchStyle = createGlobalStyle`
     margin-bottom: 0;
   }
 }
-
-
 `;
diff --git a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
index cd617985d..4b98621a9 100644
--- a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
+++ b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
@@ -28,6 +28,7 @@ export const HorizontalSeparator = ({
           ? '#e5e5e533'
           : colorsTokens()['greyscale-100']
       }
+      className="--docs--horizontal-separator"
     />
   );
 };
diff --git a/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx b/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
index c03fbcc15..e3c123da9 100644
--- a/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
+++ b/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
@@ -18,6 +18,7 @@ export const ButtonLogin = () => {
         onClick={() => gotoLogin()}
         color="primary-text"
         aria-label={t('Login')}
+        className="--docs--button-login"
       >
         {t('Login')}
       </Button>
@@ -25,7 +26,12 @@ export const ButtonLogin = () => {
   }
 
   return (
-    <Button onClick={gotoLogout} color="primary-text" aria-label={t('Logout')}>
+    <Button
+      onClick={gotoLogout}
+      color="primary-text"
+      aria-label={t('Logout')}
+      className="--docs--button-logout"
+    >
       {t('Logout')}
     </Button>
   );
@@ -45,6 +51,7 @@ export const ProConnectButton = () => {
         }
       `}
       $radius="4px"
+      className="--docs--proconnect-button"
     >
       <ProConnectImg />
     </BoxButton>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
index 8f104c13c..e39bbf6fe 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -133,6 +133,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       $padding={{ top: 'md' }}
       $background="white"
       $css={cssEditor(readOnly)}
+      className="--docs--editor-container"
     >
       {errorAttachment && (
         <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>
@@ -192,7 +193,7 @@ export const BlockNoteEditorVersion = ({
   }, [setEditor, editor]);
 
   return (
-    <Box $css={cssEditor(readOnly)}>
+    <Box $css={cssEditor(readOnly)} className="--docs--editor-container">
       <BlockNoteView editor={editor} editable={!readOnly} theme="light" />
     </Box>
   );
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx
index 485f7a09b..a008372e6 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx
@@ -104,7 +104,7 @@ export function AIGroupButton() {
     <Components.Generic.Menu.Root>
       <Components.Generic.Menu.Trigger>
         <Components.FormattingToolbar.Button
-          className="bn-button bn-menu-item"
+          className="bn-button bn-menu-item --docs--ai-actions-menu-trigger"
           data-test="ai-actions"
           label="AI"
           mainTooltip={t('AI Actions')}
@@ -116,7 +116,7 @@ export function AIGroupButton() {
         />
       </Components.Generic.Menu.Trigger>
       <Components.Generic.Menu.Dropdown
-        className="bn-menu-dropdown bn-drag-handle-menu"
+        className="bn-menu-dropdown bn-drag-handle-menu --docs--ai-actions-menu"
         sub={true}
       >
         {canAITransform && (
@@ -193,7 +193,7 @@ export function AIGroupButton() {
           <Components.Generic.Menu.Root position="right" sub={true}>
             <Components.Generic.Menu.Trigger sub={false}>
               <Components.Generic.Menu.Item
-                className="bn-menu-item"
+                className="bn-menu-item --docs--ai-translate-menu-trigger"
                 subTrigger={true}
               >
                 <Box $direction="row" $gap="0.6rem">
@@ -206,7 +206,7 @@ export function AIGroupButton() {
             </Components.Generic.Menu.Trigger>
             <Components.Generic.Menu.Dropdown
               sub={true}
-              className="bn-menu-dropdown"
+              className="bn-menu-dropdown --docs--ai-translate-menu"
             >
               {languages.map((language) => (
                 <AIMenuItemTranslate
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx
index d85ef096d..75dacd3d4 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx
@@ -94,7 +94,7 @@ export const FileDownloadButton = ({
   return (
     <>
       <Components.FormattingToolbar.Button
-        className="bn-button"
+        className="bn-button --docs--editor-file-download-button"
         label={
           dict.formatting_toolbar.file_download.tooltip[fileBlock.type] ||
           dict.formatting_toolbar.file_download.tooltip['file']
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
index 52c786f76..358956212 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
@@ -82,6 +82,7 @@ export function MarkdownButton() {
     <Components.FormattingToolbar.Button
       mainTooltip={t('Convert Markdown')}
       onClick={handleConvertMarkdown}
+      className="--docs--editor-markdown-button"
     >
       M
     </Components.FormattingToolbar.Button>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
index da4d5e433..19d9fa313 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
@@ -59,7 +59,10 @@ export const ModalConfirmDownloadUnsafe = ({
         </Text>
       }
     >
-      <Box aria-label={t('Modal confirmation to download the attachment')}>
+      <Box
+        aria-label={t('Modal confirmation to download the attachment')}
+        className="--docs--modal-confirm-download-unsafe"
+      >
         <Box>
           <Box $direction="column" $gap="0.35rem" $margin={{ top: 'sm' }}>
             <Text $variation="700">{t('This file is flagged as unsafe.')}</Text>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
index d8a3533a7..41a2467dd 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
@@ -49,8 +49,16 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
           <TableContent />
         </Box>
       )}
-      <Box $maxWidth="868px" $width="100%" $height="100%">
-        <Box $padding={{ horizontal: isDesktop ? '54px' : 'base' }}>
+      <Box
+        $maxWidth="868px"
+        $width="100%"
+        $height="100%"
+        className="--docs--doc-editor"
+      >
+        <Box
+          $padding={{ horizontal: isDesktop ? '54px' : 'base' }}
+          className="--docs--doc-editor-header"
+        >
           {isVersion ? (
             <DocVersionHeader title={doc.title} />
           ) : (
@@ -64,6 +72,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
           $width="100%"
           $css="overflow-x: clip; flex: 1;"
           $position="relative"
+          className="--docs--doc-editor-content"
         >
           <Box $css="flex:1;" $position="relative" $width="100%">
             {isVersion ? (
@@ -115,7 +124,7 @@ export const DocVersionEditor = ({
     }
 
     return (
-      <Box $margin="large">
+      <Box $margin="large" className="--docs--doc-version-editor-error">
         <TextErrors
           causes={error.cause}
           icon={
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
index f33d5b4ab..e576c8c68 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
@@ -155,6 +155,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         $margin={{ bottom: 'xl' }}
         aria-label={t('Content modal to export the document')}
         $gap="1rem"
+        className="--docs--modal-export-content"
       >
         <Text $variation="600" $size="sm">
           {t('Download your document in a .docx or .pdf format.')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
index 2f58b2718..87656a790 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
@@ -38,6 +38,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
         $padding={{ top: isDesktop ? '4xl' : 'md' }}
         $gap={spacings['base']}
         aria-label={t('It is the card information about the document.')}
+        className="--docs--doc-header"
       >
         {(docIsPublic || docIsAuth) && (
           <Box
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
index 82463ccd0..faad51db8 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
@@ -107,6 +107,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
       <Box
         as="span"
         role="textbox"
+        className="--docs--doc-title-input"
         contentEditable
         defaultValue={titleDisplay || undefined}
         onKeyDownCapture={handleKeyDown}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
index 5f6c47e42..f9b399de6 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -176,6 +176,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       $align="center"
       $gap="0.5rem 1.5rem"
       $wrap={isSmallMobile ? 'wrap' : 'nowrap'}
+      className="--docs--doc-toolbox"
     >
       <Box
         $direction="row"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx
index b1c8dc8ad..c5a2259cf 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx
@@ -22,6 +22,7 @@ export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
         $padding={{ vertical: 'base' }}
         $gap={spacings['base']}
         aria-label={t('It is the document title')}
+        className="--docs--doc-version-header"
       >
         <DocTitleText title={title} />
         <HorizontalSeparator />
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
index 38e6a2f39..c3ff4b5b7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
@@ -84,7 +84,10 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
         </Text>
       }
     >
-      <Box aria-label={t('Content modal to delete document')}>
+      <Box
+        aria-label={t('Content modal to delete document')}
+        className="--docs--modal-remove-doc"
+      >
         {!isError && (
           <Text $size="sm" $variation="600">
             {t('Are you sure you want to delete this document ?')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
index ea966c2e2..7d7414076 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
@@ -11,7 +11,11 @@ type DocSearchItemProps = {
 export const DocSearchItem = ({ doc }: DocSearchItemProps) => {
   const { isDesktop } = useResponsiveStore();
   return (
-    <Box data-testid={`doc-search-item-${doc.id}`} $width="100%">
+    <Box
+      data-testid={`doc-search-item-${doc.id}`}
+      $width="100%"
+      className="--docs--doc-search-item"
+    >
       <QuickSearchItemContent
         left={
           <Box $direction="row" $align="center" $gap="10px" $width="100%">
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
index 2f7db61dc..48fbbf48c 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
@@ -71,6 +71,7 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
         aria-label={t('Search modal')}
         $direction="column"
         $justify="space-between"
+        className="--docs--doc-search-modal"
       >
         <QuickSearch
           placeholder={t('Type the name of a document')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
index cb353b33f..861fc0c76 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
@@ -122,6 +122,7 @@ export const DocShareAddMemberList = ({
       $css={css`
         border: 1px solid ${color['greyscale-200']};
       `}
+      className="--docs--doc-share-add-member-list"
     >
       <Box
         $direction="row"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
index 1164c8283..86601be93 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
@@ -34,6 +34,7 @@ export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
         color: ${color['greyscale-1000']};
         font-size: ${fontSize['xs']};
       `}
+      className="--docs--doc-share-add-member-list-item"
     >
       <Text $variation="1000" $size="xs">
         {user.full_name || user.email}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx
index 1a6151e16..6a186e432 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx
@@ -84,6 +84,7 @@ export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
     <Box
       $width="100%"
       data-testid={`doc-share-invitation-row-${invitation.email}`}
+      className="--docs--doc-share-invitation-item"
     >
       <SearchUserRow
         isInvitation={true}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx
index 52f4ac0c0..36da656d9 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx
@@ -72,6 +72,7 @@ export const DocShareMemberItem = ({ doc, access }: Props) => {
     <Box
       $width="100%"
       data-testid={`doc-share-member-row-${access.user.email}`}
+      className="--docs--doc-share-member-item"
     >
       <SearchUserRow
         alwaysShowRight={true}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
index 80dccad7a..bc5a805d9 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
@@ -195,7 +195,7 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
           aria-label={t('Share modal')}
           $height={canViewAccesses ? modalContentHeight : 'auto'}
           $overflow="hidden"
-          className="noPadding"
+          className="--docs--doc-share-modal noPadding "
           $justify="space-between"
         >
           <Box
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
index 3b4e12af0..181c60445 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
@@ -20,6 +20,7 @@ export const DocShareModalFooter = ({ doc, onClose }: Props) => {
       $css={css`
         flex-shrink: 0;
       `}
+      className="--docs--doc-share-modal-footer"
     >
       <HorizontalSeparator $withPadding={true} />
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx
index 0727b92c7..35f741fae 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx
@@ -12,7 +12,11 @@ type Props = {
 export const DocShareModalInviteUserRow = ({ user }: Props) => {
   const { t } = useTranslation();
   return (
-    <Box $width="100%" data-testid={`search-user-row-${user.email}`}>
+    <Box
+      $width="100%"
+      data-testid={`search-user-row-${user.email}`}
+      className="--docs--doc-share-modal-invite-user-row"
+    >
       <SearchUserRow
         user={user}
         right={
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
index 55138ff9d..38dcd63e7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
@@ -91,6 +91,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
       $padding={{ horizontal: 'base' }}
       aria-label={t('Doc visibility card')}
       $gap={spacing['base']}
+      className="--docs--doc-visibility"
     >
       <Text $weight="700" $size="sm" $variation="700">
         {t('Link parameters')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
index f967a3bc9..b7c14aa61 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
@@ -31,7 +31,12 @@ export const SearchUserRow = ({
       right={right}
       alwaysShowRight={alwaysShowRight}
       left={
-        <Box $direction="row" $align="center" $gap={spacings['xs']}>
+        <Box
+          $direction="row"
+          $align="center"
+          $gap={spacings['xs']}
+          className="--docs--search-user-row"
+        >
           <UserAvatar
             user={user}
             background={isInvitation ? colors['greyscale-400'] : undefined}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
index 99036b6a3..76dd73c7a 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
@@ -49,6 +49,7 @@ export const UserAvatar = ({ user, background }: Props) => {
         color: rgba(255, 255, 255, 0.9);
         border: 1px solid rgba(255, 255, 255, 0.5);
       `}
+      className="--docs--user-avatar"
     >
       <Box
         $direction="row"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
index a3fd67e9c..4865f8929 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
@@ -60,6 +60,7 @@ export const Heading = ({
       $radius="4px"
       $background={isActive ? `${colorsTokens()['greyscale-100']}` : 'none'}
       $css="text-align: left;"
+      className="--docs--table-content-heading"
     >
       <Text
         $width="100%"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
index 3ed767819..d4e793c03 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
@@ -122,6 +122,7 @@ export const TableContent = () => {
           gap: var(--c--theme--spacings--2xs);
         `}
       `}
+      className="--docs--table-content"
     >
       {!isHover && (
         <BoxButton onClick={onOpen} $justify="center" $align="center">
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
index 7959ed35e..b2431b5eb 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
@@ -107,7 +107,10 @@ export const ModalConfirmationVersion = ({
         </Text>
       }
     >
-      <Box aria-label={t('Modal confirmation to restore the version')}>
+      <Box
+        aria-label={t('Modal confirmation to restore the version')}
+        className="--docs--modal-confirmation-version"
+      >
         <Box>
           <Text $variation="600">
             {t('Your current document will revert to this version.')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
index 92d945988..c6c5562de 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
@@ -51,7 +51,7 @@ export const ModalSelectVersion = ({
         <NoPaddingStyle />
         <Box
           aria-label="version history modal"
-          className="noPadding"
+          className="--docs--modal-select-version noPadding"
           $direction="row"
           $height="100%"
           $maxHeight="calc(100vh - 2em - 12px)"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
index afbb03472..7c50fe536 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
@@ -44,6 +44,7 @@ export const VersionItem = ({
         `}
         $hasTransition
         $minWidth="13rem"
+        className="--docs--version-item"
       >
         <Box
           $padding={{ vertical: '0.7rem', horizontal: 'small' }}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx
index e401ec769..89bbd054c 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx
@@ -109,7 +109,10 @@ export const VersionList = ({
   }, [] as Versions[]);
 
   return (
-    <Box $css="overflow-y: auto; overflow-x: hidden;">
+    <Box
+      $css="overflow-y: auto; overflow-x: hidden;"
+      className="--docs--version-list"
+    >
       <InfiniteScroll
         hasMore={hasNextPage}
         isLoading={isFetchingNextPage}
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index 101a2bf4c..534252102 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -60,6 +60,7 @@ export const DocsGrid = ({
       $maxWidth="960px"
       $maxHeight="calc(100vh - 52px - 2rem)"
       $align="center"
+      className="--docs--doc-grid"
     >
       <DocsGridLoader isLoading={isRefetching || loading} />
       <Card
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
index 47bab9606..b0650a004 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
@@ -49,6 +49,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
             background-color: var(--c--theme--colors--greyscale-100);
           }
         `}
+        className="--docs--doc-grid-item"
       >
         <StyledLink
           $css={css`
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
index 3f169d6c3..7bf0b2234 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
@@ -26,6 +26,7 @@ export const DocsGridItemSharedButton = ({ doc, handleClick }: Props) => {
         </Text>
       }
       placement="top"
+      className="--docs--doc-tooltip-grid-item-shared-button"
     >
       <Button
         style={{ minWidth: '50px', justifyContent: 'center' }}
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx
index 7ac17a927..71fa1828b 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx
@@ -31,6 +31,7 @@ export const DocsGridLoader = ({ isLoading }: DocsGridLoaderProps) => {
         $background="rgba(255, 255, 255, 0.5)"
         $zIndex={998}
         $position="absolute"
+        className="--docs--doc-grid-loader"
       >
         <Loader />
       </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
index fdc82567d..f5fda2db3 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
@@ -38,7 +38,12 @@ export const SimpleDocItem = ({
   const { untitledDocument } = useTrans();
 
   return (
-    <Box $direction="row" $gap={spacings.sm} $overflow="auto">
+    <Box
+      $direction="row"
+      $gap={spacings.sm}
+      $overflow="auto"
+      className="--docs--simple-doc-item"
+    >
       <Box
         $direction="row"
         $align="center"
diff --git a/src/frontend/apps/impress/src/features/footer/Footer.tsx b/src/frontend/apps/impress/src/features/footer/Footer.tsx
index ff6537348..28fa35433 100644
--- a/src/frontend/apps/impress/src/features/footer/Footer.tsx
+++ b/src/frontend/apps/impress/src/features/footer/Footer.tsx
@@ -21,7 +21,7 @@ export const Footer = () => {
   const logo = themeTokens().logo;
 
   return (
-    <Box $position="relative" as="footer">
+    <Box $position="relative" as="footer" className="--docs--footer">
       <BlueStripe />
       <Box $padding={{ top: 'large', horizontal: 'big', bottom: 'small' }}>
         <Box
@@ -31,7 +31,7 @@ export const Footer = () => {
           $justify="space-between"
           $css="flex-wrap: wrap;"
         >
-          <Box>
+          <Box className="--docs--footer-logo">
             <Box $align="center" $gap="6rem" $direction="row">
               {logo && (
                 <Image
@@ -52,6 +52,7 @@ export const Footer = () => {
               row-gap: .5rem;
               flex-wrap: wrap;
             `}
+            className="--docs--footer-external-links"
           >
             {[
               {
@@ -99,6 +100,7 @@ export const Footer = () => {
             column-gap: 1rem;
             row-gap: .5rem;
           `}
+          className="--docs--footer-internal-links"
         >
           {[
             {
@@ -145,6 +147,7 @@ export const Footer = () => {
           $margin={{ top: 'big' }}
           $variation="600"
           $display="inline"
+          className="--docs--footer-licence"
         >
           {t('Unless otherwise stated, all content on this site is under')}{' '}
           <StyledLink
diff --git a/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx b/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
index 8504674e7..c11fab070 100644
--- a/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
@@ -21,6 +21,7 @@ export const ButtonTogglePanel = () => {
           iconName={isPanelOpen ? 'close' : 'menu'}
         />
       }
+      className="--docs--button-toggle-panel"
     />
   );
 };
diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx
index bacf39e80..b808f5ce6 100644
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -39,6 +39,7 @@ export const Header = () => {
         background-color: ${colors['greyscale-000']};
         border-bottom: 1px solid ${colors['greyscale-200']};
       `}
+      className="--docs--header"
     >
       {!isDesktop && <ButtonTogglePanel />}
       <StyledLink href="/">
diff --git a/src/frontend/apps/impress/src/features/header/components/Title.tsx b/src/frontend/apps/impress/src/features/header/components/Title.tsx
index fcfcb9159..b1117ed8d 100644
--- a/src/frontend/apps/impress/src/features/header/components/Title.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Title.tsx
@@ -10,7 +10,12 @@ export const Title = () => {
   const spacings = theme.spacingsTokens();
 
   return (
-    <Box $direction="row" $align="center" $gap={spacings['2xs']}>
+    <Box
+      $direction="row"
+      $align="center"
+      $gap={spacings['2xs']}
+      className="--docs--title"
+    >
       <Text
         $margin="none"
         as="h2"
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx b/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
index fff8abf90..37ffc7279 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
@@ -29,6 +29,7 @@ export default function HomeBanner() {
       $height="100vh"
       $margin={{ top: `-${getHeaderHeight(isSmallMobile)}px` }}
       $position="relative"
+      className="--docs--home-banner"
     >
       <Box
         $width="100%"
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx b/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
index 16f4285f2..d0d307dff 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
@@ -30,6 +30,7 @@ function HomeProConnect() {
     <Box
       $justify="center"
       $height={!isMobile ? `calc(100vh - ${parentGap})` : 'auto'}
+      className="--docs--home-proconnect"
     >
       <Box
         $gap={spacings['md']}
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
index 871ac250d..30a95b1bd 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
@@ -33,10 +33,10 @@ export function HomeContent() {
   const isFrLanguage = i18n.resolvedLanguage === 'fr';
 
   return (
-    <Box as="main">
+    <Box as="main" className="--docs--home-content">
       <HomeHeader />
       {isSmallMobile && (
-        <Box $css="& .panel-header{display: none;}">
+        <Box $css="& .--docs--left-panel-header{display: none;}">
           <LeftPanel />
         </Box>
       )}
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
index 202d5c8c9..2fce7c680 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
@@ -31,6 +31,7 @@ export const HomeHeader = () => {
       $width="100%"
       $padding={{ horizontal: 'small' }}
       $height={`${isSmallMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px`}
+      className="--docs--home-header"
     >
       <Box
         $align="center"
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
index dfe7e164f..1204fd288 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
@@ -93,6 +93,7 @@ export const HomeSection = ({
         opacity: ${isVisible ? 1 : 0};
         ${$css}
       `}
+      className="--docs--home-section"
     >
       <Box
         $direction={direction}
diff --git a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
index 6bef7995c..bc2643033 100644
--- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
+++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
@@ -70,6 +70,7 @@ export const LanguagePicker = () => {
         aria-label={t('Language')}
         $direction="row"
         $gap="0.5rem"
+        className="--docs--language-picker-text"
       >
         <Text $isMaterialIcon $color="inherit" $size="xl">
           translate
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
index f86cd6027..e61c77368 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
@@ -53,6 +53,7 @@ export const LeftPanelTargetFilters = () => {
       $justify="center"
       $padding={{ horizontal: 'sm' }}
       $gap={spacing['2xs']}
+      className="--docs--left-panel-target-filters"
     >
       {defaultQueries.map((query) => {
         const isActive = target === query.targetQuery;
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
index 309fe24b6..9c6135091 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
@@ -45,7 +45,8 @@ export const LeftPanel = () => {
             min-width: 300px;
             overflow: hidden;
             border-right: 1px solid ${colors['greyscale-200']};
-        `}
+          `}
+          className="--docs--left-panel-desktop"
         >
           <Box
             $css={css`
@@ -72,6 +73,7 @@ export const LeftPanel = () => {
               transform: translateX(${isPanelOpen ? '0' : '-100dvw'});
               background-color: var(--c--theme--colors--greyscale-000);
             `}
+            className="--docs--left-panel-mobile"
           >
             <Box
               data-testid="left-panel-mobile"
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
index b621e1c5f..98f04e8b2 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
@@ -21,6 +21,7 @@ export const LeftPanelContent = () => {
             $css={css`
               flex: 0 0 auto;
             `}
+            className="--docs--home-left-panel-content"
           >
             <SeparatedSection showSeparator={false}>
               <LeftPanelTargetFilters />
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
index c14edf9f9..dc0b2acc4 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
@@ -18,6 +18,7 @@ export const LeftPanelDocContent = () => {
       $flex={1}
       $width="100%"
       $css="width: 100%; overflow-y: auto; overflow-x: hidden;"
+      className="--docs--left-panel-doc-content"
     >
       <SeparatedSection showSeparator={false}>
         <Box $padding={{ horizontal: 'sm' }}>
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
index 3615254cb..641a6290e 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
@@ -38,6 +38,7 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
         }
       `}
       key={doc.id}
+      className="--docs--left-panel-favorite-item"
     >
       <StyledLink href={`/docs/${doc.id}`} $css="overflow: auto;">
         <SimpleDocItem showAccesses doc={doc} />
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
index bc2d7b147..f05832bc6 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
@@ -24,7 +24,7 @@ export const LeftPanelFavorites = () => {
   }
 
   return (
-    <Box>
+    <Box className="--docs--left-panel-favorites">
       <HorizontalSeparator $withPadding={false} />
       <Box
         $justify="center"
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
index e2358f220..7177bc2c7 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
@@ -51,7 +51,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
 
   return (
     <>
-      <Box $width="100%" className="panel-header">
+      <Box $width="100%" className="--docs--left-panel-header">
         <SeparatedSection>
           <Box
             $padding={{ horizontal: 'sm' }}
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
index 3d55315b0..ca1854594 100644
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -23,7 +23,7 @@ export function MainLayout({
   const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor;
 
   return (
-    <div>
+    <Box className="--docs--main-layout">
       <Header />
       <Box
         $direction="row"
@@ -54,6 +54,6 @@ export function MainLayout({
           {children}
         </Box>
       </Box>
-    </div>
+    </Box>
   );
 }
diff --git a/src/frontend/apps/impress/src/layouts/PageLayout.tsx b/src/frontend/apps/impress/src/layouts/PageLayout.tsx
index c6e2150b3..a3d969295 100644
--- a/src/frontend/apps/impress/src/layouts/PageLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/PageLayout.tsx
@@ -20,6 +20,7 @@ export function PageLayout({
     <Box
       $minHeight={`calc(100vh - ${HEADER_HEIGHT}px)`}
       $margin={{ top: `${HEADER_HEIGHT}px` }}
+      className="--docs--page-layout"
     >
       <Header />
       <Box as="main" $width="100%" $css="flex-grow:1;">

From da1ffe6fcddb65b057ef191d84838850a4387db3 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 28 Mar 2025 16:19:54 +0100
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=93=9D(docs)=20add=20documentation=20?=
 =?UTF-8?q?about=20runtime=20theming?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a documentation page about runtime theming.
It explains how to use the theming system
and provide a example.
---
 docs/theming.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 docs/theming.md

diff --git a/docs/theming.md b/docs/theming.md
new file mode 100644
index 000000000..6f8c65a96
--- /dev/null
+++ b/docs/theming.md
@@ -0,0 +1,33 @@
+# Runtime Theming 🎨
+
+### How to Use
+
+To use this feature, simply set the `FRONTEND_CSS_URL` environment variable to the URL of your custom CSS file. For example:
+
+```javascript
+FRONTEND_CSS_URL=http://anything/custom-style.css
+```
+
+Once you've set this variable, our application will load your custom CSS file and apply the styles to our frontend application.
+
+### Benefits
+
+This feature provides several benefits, including:
+
+*   **Easy customization** 🔄: With this feature, you can easily customize the look and feel of our application without requiring any code changes.
+*   **Flexibility** 🌈: You can use any CSS styles you like to create a custom theme that meets your needs.
+*   **Runtime theming** ⏱️: This feature allows you to change the theme of our application at runtime, without requiring a restart or recompilation.
+
+### Example Use Case
+
+Let's say you want to change the background color of our application to a custom color. You can create a custom CSS file with the following contents:
+
+```css
+body {
+  background-color: #3498db;
+}
+```
+
+Then, set the `FRONTEND_CSS_URL` environment variable to the URL of your custom CSS file. Once you've done this, our application will load your custom CSS file and apply the styles, changing the background color to the custom color you specified.
+
+

From ce99f01f5523db180675f534e272a761ab4b06fe Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 31 Mar 2025 12:14:20 +0200
Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=85(e2e)=20fix=20some=20flaky=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Some tests were flaky, causing them to fail
intermittently. This commit aims to address
this issue.
---
 .../e2e/__tests__/app-impress/config.spec.ts  | 19 +++++--------------
 .../__tests__/app-impress/doc-editor.spec.ts  | 14 +++++++-------
 .../__tests__/app-impress/doc-grid.spec.ts    |  4 ++--
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
index 6f8bfa524..dd2f33ae5 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
@@ -2,7 +2,7 @@ import path from 'path';
 
 import { expect, test } from '@playwright/test';
 
-import { createDoc, verifyDocName } from './common';
+import { createDoc } from './common';
 
 const config = {
   AI_FEATURE_ENABLED: true,
@@ -100,22 +100,13 @@ test.describe('Config', () => {
     page,
     browserName,
   }) => {
-    const webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
-      return webSocket.url().includes('ws://localhost:4444/collaboration/ws/');
-    });
-
     await page.goto('/');
 
-    const randomDoc = await createDoc(
-      page,
-      'doc-collaboration',
-      browserName,
-      1,
-    );
+    void createDoc(page, 'doc-collaboration', browserName, 1);
 
-    await verifyDocName(page, randomDoc[0]);
-
-    const webSocket = await webSocketPromise;
+    const webSocket = await page.waitForEvent('websocket', (webSocket) => {
+      return webSocket.url().includes('ws://localhost:4444/collaboration/ws/');
+    });
     expect(webSocket.url()).toContain('ws://localhost:4444/collaboration/ws/');
   });
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
index 21c080aa8..4901c62b4 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
@@ -58,18 +58,18 @@ test.describe('Doc Editor', () => {
    *  - signal of the backend to the collaborative server (connection should close)
    *  - reconnection to the collaborative server
    */
-  test('checks the connection with collaborative server', async ({
-    page,
-    browserName,
-  }) => {
+  test('checks the connection with collaborative server', async ({ page }) => {
     let webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
       return webSocket
         .url()
         .includes('ws://localhost:4444/collaboration/ws/?room=');
     });
 
-    const randomDoc = await createDoc(page, 'doc-editor', browserName, 1);
-    await verifyDocName(page, randomDoc[0]);
+    await page
+      .getByRole('button', {
+        name: 'New doc',
+      })
+      .click();
 
     let webSocket = await webSocketPromise;
     expect(webSocket.url()).toContain(
@@ -99,7 +99,7 @@ test.describe('Doc Editor', () => {
     const wsClose = await wsClosePromise;
     expect(wsClose.isClosed()).toBeTruthy();
 
-    // Checkt the ws is connected again
+    // Check the ws is connected again
     webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
       return webSocket
         .url()
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
index 179841dc7..758c8712c 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
@@ -190,7 +190,7 @@ test.describe('Document grid item options', () => {
 
 test.describe('Documents filters', () => {
   test('it checks the prebuild left panel filters', async ({ page }) => {
-    await page.goto('/');
+    void page.goto('/');
 
     // All Docs
     const response = await page.waitForResponse(
@@ -263,7 +263,7 @@ test.describe('Documents filters', () => {
 
 test.describe('Documents Grid', () => {
   test('checks all the elements are visible', async ({ page }) => {
-    await page.goto('/');
+    void page.goto('/');
 
     let docs: SmallDoc[] = [];
     const response = await page.waitForResponse(