From 8a7b920c1fcaa5bd60bd8c63aa0ef8186915e9aa Mon Sep 17 00:00:00 2001
From: Anthony Le Courric <freelance.anthony@gmail.com>
Date: Fri, 8 Sep 2023 17:12:51 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20replace=20gromme?=
 =?UTF-8?q?t=20Select=20with=20Cunnigham=20Select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- replace the Grommet Select component with the Cunningham Select
component
---
 CHANGELOG.md                                  |   4 +
 .../Dashboard/DashboardInstructor/index.tsx   |  26 ++---
 .../components/MarkdownWizard/index.spec.tsx  |   2 +-
 .../components/MarkdownWizard/index.tsx       |   2 +
 .../Manage/VideoCreateForm.spec.tsx           |  30 +++--
 .../components/CreatePlaylistForm.spec.tsx    |  18 ++-
 .../Playlist/components/PlaylistForm.spec.tsx | 107 +++++++----------
 .../Playlist/components/PlaylistForm.tsx      | 108 ++++++++---------
 .../Playlist/components/PlaylistPage.tsx      | 109 ++++++++++--------
 .../api/useUpdatePlaylistAccess/index.ts      |  10 +-
 .../components/AddUserAccessForm.spec.tsx     |   8 +-
 .../components/AddUserAccessForm.tsx          |  26 ++---
 .../components/PlaylistUserList.spec.tsx      |   6 +-
 .../components/UpdatePlaylistPage.spec.tsx    |  27 ++---
 .../components/UserListRow.spec.tsx           |  26 ++---
 .../UpdatePlaylist/components/UserListRow.tsx |  55 ++++++---
 .../components/UserRoleOptions.spec.tsx       |   6 +-
 .../components/UserRoleOptions.tsx            |   6 +-
 .../lib_common/src/cunningham-style.css       |  31 +++--
 .../lib_common/src/cunningham-tokens.css      |  13 +++
 .../src/utils/tests/factories.ts              |   2 +-
 .../LanguageSelector/index.spec.tsx           |   8 +-
 .../src/components/LanguageSelector/index.tsx |  26 +++--
 .../components/MarkdownEditor/index.spec.tsx  |  28 +++--
 .../src/components/MarkdownEditor/index.tsx   |  15 +--
 .../components/MarkdownViewer/index.spec.tsx  |   6 +-
 .../LanguageSelect/index.spec.tsx             |  78 ++++---------
 .../LanguageSelect/index.tsx                  |  28 +++--
 .../index.spec.tsx                            |  12 +-
 .../common/VideoWidgetProvider/index.spec.tsx |  13 ++-
 .../widgets/DownloadVideo/index.spec.tsx      |   9 +-
 .../widgets/DownloadVideo/index.tsx           |  43 +++----
 .../widgets/LicenseManager/index.spec.tsx     |  47 ++++----
 .../widgets/LicenseManager/index.tsx          |  72 +++++++-----
 .../widgets/LiveJoinMode/index.spec.tsx       |  57 ++++-----
 .../widgets/LiveJoinMode/index.tsx            |  31 ++---
 .../CreateVOD/LicenseSelect/index.spec.tsx    |  73 ++++--------
 .../CreateVOD/LicenseSelect/index.tsx         |  37 +++---
 .../VideoWizard/CreateVOD/index.spec.tsx      |  54 +++++----
 .../common/VideoWizard/CreateVOD/index.tsx    |   1 +
 40 files changed, 651 insertions(+), 609 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d6c580de24..bd9765421d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Changed
+
+- Replace grommet Select by Cunningham Select (#2400)
+
 ## [4.4.0] - 2023-09-08
 
 ### Added
diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.tsx
index a2c5940ddf..5bd781f8b1 100644
--- a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.tsx
+++ b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.tsx
@@ -1,4 +1,5 @@
-import { Box, Heading, Pagination, Paragraph, Select, Text } from 'grommet';
+import { Select } from '@openfun/cunningham-react';
+import { Box, Heading, Pagination, Paragraph, Text } from 'grommet';
 import { Maybe } from 'lib-common';
 import { FileDepository, Loader } from 'lib-components';
 import React, { FocusEvent, useState } from 'react';
@@ -10,6 +11,8 @@ import {
   useUpdateFileDepository,
 } from 'apps/deposit/data/queries';
 
+type SelectProps = React.ComponentPropsWithoutRef<typeof Select>;
+
 const PAGE_SIZE = 10;
 
 const messages = defineMessages({
@@ -77,7 +80,7 @@ export const DashboardInstructor = ({
   const [indices, setIndices] = useState([0, PAGE_SIZE]);
   const [readFilter, setReadFilter] = useState<Maybe<string>>(undefined);
 
-  const { data, isError, isLoading, refetch } = useDepositedFiles(
+  const { data, isError, isLoading } = useDepositedFiles(
     fileDepository.id,
     {
       limit: `${PAGE_SIZE}`,
@@ -103,9 +106,8 @@ export const DashboardInstructor = ({
     },
   ];
 
-  const onReadFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setReadFilter(event.target.value);
-    refetch();
+  const onReadFilterChange: SelectProps['onChange'] = (event) => {
+    setReadFilter(event.target.value as Maybe<string>);
   };
 
   const { mutate } = useUpdateFileDepository(fileDepository.id);
@@ -190,17 +192,11 @@ export const DashboardInstructor = ({
                 pad="medium"
               >
                 <Select
-                  a11yTitle={intl.formatMessage(messages.readFilterTitle)}
-                  id="readFilterSelect"
-                  name="read"
-                  placeholder={intl.formatMessage(
-                    messages.readFilterPlaceholder,
-                  )}
-                  value={readFilter}
-                  options={readFilterOptions}
-                  labelKey="label"
-                  valueKey={{ key: 'value', reduce: true }}
+                  aria-label={intl.formatMessage(messages.readFilterTitle)}
+                  label={intl.formatMessage(messages.readFilterTitle)}
                   onChange={onReadFilterChange}
+                  options={readFilterOptions}
+                  value={readFilter}
                 />
                 <Text>
                   <FormattedMessage
diff --git a/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.spec.tsx b/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.spec.tsx
index 46503f5084..3fa5b40b28 100644
--- a/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.spec.tsx
+++ b/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.spec.tsx
@@ -111,7 +111,7 @@ describe('MarkdownWizard', () => {
       'Mon titre',
     );
     await userEvent.click(
-      screen.getByRole('button', { name: /Select language/i }),
+      screen.getByRole('combobox', { name: /Select language/i }),
     );
     await userEvent.click(
       await screen.findByRole('option', { name: /French/i }),
diff --git a/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx b/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx
index 7611331e82..d579da2a72 100644
--- a/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx
+++ b/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx
@@ -100,12 +100,14 @@ export const MarkdownWizard = ({ markdownDocumentId }: MarkdownWizardProps) => {
               maxLength={255}
               onChange={(event) => setLocalTitle(event.target.value)}
               value={localTitle}
+              fullWidth
             />
           </Box>
           <LanguageSelector
             currentLanguage={language}
             onLanguageChange={setLanguage}
             disabled={false}
+            fullWidth
           />
 
           <Button
diff --git a/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Manage/VideoCreateForm.spec.tsx b/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Manage/VideoCreateForm.spec.tsx
index 2c778b52c6..bf86c178cd 100644
--- a/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Manage/VideoCreateForm.spec.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Manage/VideoCreateForm.spec.tsx
@@ -111,10 +111,13 @@ describe('<VideoCreateForm />', () => {
       screen.getByText('Add a video or drag & drop it'),
     ).toBeInTheDocument();
     expect(
-      await screen.findByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
+      await screen.findByRole('combobox', {
+        name: 'Select the license',
       }),
     ).toBeInTheDocument();
+    expect(
+      await screen.findByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: /Add Video/i }),
     ).toBeInTheDocument();
@@ -147,10 +150,13 @@ describe('<VideoCreateForm />', () => {
       screen.getByText('Add a video or drag & drop it'),
     ).toBeInTheDocument();
     expect(
-      await screen.findByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
+      await screen.findByRole('combobox', {
+        name: 'Select the license',
       }),
     ).toBeInTheDocument();
+    expect(
+      await screen.findByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: /Add Video/i }),
     ).toBeInTheDocument();
@@ -254,11 +260,15 @@ describe('<VideoCreateForm />', () => {
     ).toBeInTheDocument();
 
     expect(
-      await screen.findByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
+      await screen.findByRole('combobox', {
+        name: 'Select the license',
       }),
     ).toBeInTheDocument();
 
+    expect(
+      screen.getByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
+
     const hiddenInput = screen.getByTestId('input-video-test-id');
 
     await userEvent.upload(hiddenInput, file);
@@ -334,11 +344,15 @@ describe('<VideoCreateForm />', () => {
     ).toBeInTheDocument();
 
     expect(
-      await screen.findByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
+      await screen.findByRole('combobox', {
+        name: 'Select the license',
       }),
     ).toBeInTheDocument();
 
+    expect(
+      screen.getByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
+
     const hiddenInput = screen.getByTestId('input-video-test-id');
 
     await userEvent.upload(hiddenInput, file);
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/components/CreatePlaylistForm.spec.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/components/CreatePlaylistForm.spec.tsx
index c63f90c096..9fc09a32c5 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/components/CreatePlaylistForm.spec.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/components/CreatePlaylistForm.spec.tsx
@@ -91,21 +91,17 @@ describe('<CreatePlaylistForm />', () => {
 
     expect(await screen.findByText('Create a playlist')).toBeInTheDocument();
 
-    await userEvent.click(
-      await screen.findByRole('button', { name: 'Open Drop; Selected: id' }),
-    );
+    expect(screen.getByText('org')).toBeInTheDocument();
 
     await userEvent.click(
-      await screen.findByRole('option', { name: 'other-org' }),
+      screen.getByRole('combobox', {
+        name: 'Organization',
+      }),
     );
+    await userEvent.click(screen.getByRole('option', { name: 'other-org' }));
 
-    expect(
-      await screen.findByRole('button', {
-        name: 'Open Drop; Selected: other-id',
-      }),
-    ).toBeInTheDocument();
-    expect(screen.getByDisplayValue('other-org')).toBeInTheDocument();
-    expect(screen.queryByDisplayValue('org')).not.toBeInTheDocument();
+    expect(screen.getByText('other-org')).toBeInTheDocument();
+    expect(screen.queryByText('org')).not.toBeInTheDocument();
 
     await userEvent.type(
       screen.getByRole('textbox', { name: 'Name' }),
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistForm.spec.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistForm.spec.tsx
index 8f4e32bc60..bb40032960 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistForm.spec.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistForm.spec.tsx
@@ -56,7 +56,11 @@ describe('<PlaylistForm />', () => {
     deferred.resolve({ count: 0, results: [] });
 
     await waitForElementToBeRemoved(loader);
-    expect(screen.getByLabelText('Organization*required')).toBeInTheDocument();
+    expect(
+      await screen.findByRole('combobox', {
+        name: 'Organization',
+      }),
+    ).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toBeInTheDocument();
 
     const submitButton = screen.getByRole('button', { name: 'Save' });
@@ -86,13 +90,11 @@ describe('<PlaylistForm />', () => {
     );
 
     expect(
-      await screen.findByLabelText('Organization*required'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {
-        name: 'Open Drop; Selected: first id',
+      await screen.findByRole('combobox', {
+        name: 'Organization',
       }),
     ).toBeInTheDocument();
+    expect(screen.getByText('first organization')).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toBeInTheDocument();
 
     expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
@@ -132,13 +134,11 @@ describe('<PlaylistForm />', () => {
     );
 
     expect(
-      await screen.findByLabelText('Organization*required'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {
-        name: 'Open Drop; Selected: second id',
+      await screen.findByRole('combobox', {
+        name: 'Organization',
       }),
     ).toBeInTheDocument();
+    expect(screen.getByText('second organization')).toBeInTheDocument();
     expect(screen.getByDisplayValue('some initial name')).toBeInTheDocument();
 
     expect(fetchMock.calls().length).toEqual(1);
@@ -178,13 +178,11 @@ describe('<PlaylistForm />', () => {
     );
 
     expect(
-      await screen.findByLabelText('Organization*required'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {
-        name: 'Open Drop; Selected: third id',
+      await screen.findByRole('combobox', {
+        name: 'Organization',
       }),
     ).toBeInTheDocument();
+    expect(screen.getByText('third organization')).toBeInTheDocument();
     expect(screen.getByDisplayValue('some initial name')).toBeInTheDocument();
 
     expect(fetchMock.calls().length).toEqual(2);
@@ -225,11 +223,8 @@ describe('<PlaylistForm />', () => {
     );
 
     expect(
-      await screen.findByLabelText('Organization*required'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {
-        name: 'Open Drop',
+      await screen.findByRole('combobox', {
+        name: 'Organization',
       }),
     ).toBeInTheDocument();
     expect(screen.getByDisplayValue('some initial name')).toBeInTheDocument();
@@ -276,7 +271,9 @@ describe('<PlaylistForm />', () => {
     );
 
     expect(
-      await screen.findByLabelText('Organization*required'),
+      await screen.findByRole('combobox', {
+        name: 'Organization',
+      }),
     ).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button', { name: 'Save' }));
@@ -285,7 +282,7 @@ describe('<PlaylistForm />', () => {
     expect(mockedOnSubmit).toHaveBeenCalledWith({
       name: 'some initial name',
       organizationId: 'third id',
-      retention_duration: 365,
+      retention_duration: '365',
     });
 
     await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
@@ -328,7 +325,9 @@ describe('<PlaylistForm />', () => {
     );
     await userEvent.click(screen.getByRole('button', { name: 'Retry' }));
     expect(
-      await screen.findByLabelText('Organization*required'),
+      await screen.findByRole('combobox', {
+        name: 'Organization',
+      }),
     ).toBeInTheDocument();
   });
 
@@ -358,13 +357,11 @@ describe('<PlaylistForm />', () => {
     );
 
     expect(
-      await screen.findByLabelText('Organization*required'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {
-        name: 'Open Drop; Selected: first id',
+      await screen.findByRole('combobox', {
+        name: 'Organization',
       }),
     ).toBeInTheDocument();
+    expect(screen.getByText('first organization')).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toBeInTheDocument();
     expect(screen.getByDisplayValue('some initial name')).toBeInTheDocument();
 
@@ -374,11 +371,7 @@ describe('<PlaylistForm />', () => {
       screen.queryByRole('button', { name: 'Delete playlist' }),
     ).not.toBeInTheDocument();
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: 'Open Drop; Selected: first id',
-      }),
-    );
+    await userEvent.click(screen.getByText('first organization'));
     await userEvent.click(
       await screen.findByRole('option', { name: 'second organization' }),
     );
@@ -389,11 +382,7 @@ describe('<PlaylistForm />', () => {
       'an other awesome name',
     );
 
-    expect(
-      await screen.findByRole('button', {
-        name: 'Open Drop; Selected: second id',
-      }),
-    ).toBeInTheDocument();
+    expect(screen.getByText('second organization')).toBeInTheDocument();
     expect(
       await screen.findByDisplayValue('an other awesome name'),
     ).toBeInTheDocument();
@@ -403,13 +392,11 @@ describe('<PlaylistForm />', () => {
     await waitFor(() => expect(mockedOnCancel).toHaveBeenCalled());
 
     expect(
-      await screen.findByLabelText('Organization*required'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {
-        name: 'Open Drop; Selected: first id',
+      await screen.findByRole('combobox', {
+        name: 'Organization',
       }),
     ).toBeInTheDocument();
+    expect(screen.getByText('first organization')).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toBeInTheDocument();
     expect(screen.getByDisplayValue('some initial name')).toBeInTheDocument();
   });
@@ -433,13 +420,11 @@ describe('<PlaylistForm />', () => {
     );
 
     expect(
-      await screen.findByLabelText('Organization*required'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {
-        name: 'Open Drop; Selected: first id',
+      await screen.findByRole('combobox', {
+        name: 'Organization',
       }),
     ).toBeInTheDocument();
+    expect(screen.getByText('first organization')).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toBeInTheDocument();
 
     expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
@@ -470,13 +455,11 @@ describe('<PlaylistForm />', () => {
     );
 
     expect(
-      await screen.findByLabelText('Organization*required'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {
-        name: 'Open Drop; Selected: first id',
+      await screen.findByRole('combobox', {
+        name: 'Organization',
       }),
     ).toBeInTheDocument();
+    expect(screen.getByText('first organization')).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toBeInTheDocument();
 
     const deleteButton = screen.getByRole('button', {
@@ -517,13 +500,11 @@ describe('<PlaylistForm />', () => {
     );
 
     expect(
-      await screen.findByLabelText('Organization*required'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {
-        name: 'Open Drop; Selected: first id',
+      await screen.findByRole('combobox', {
+        name: 'Organization',
       }),
     ).toBeInTheDocument();
+    expect(screen.getByText('first organization')).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toBeInTheDocument();
 
     const deleteButton = screen.getByRole('button', {
@@ -561,13 +542,11 @@ describe('<PlaylistForm />', () => {
     );
 
     expect(
-      await screen.findByLabelText('Organization*required'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {
-        name: 'Open Drop; Selected: first id',
+      await screen.findByRole('combobox', {
+        name: 'Organization',
       }),
     ).toBeInTheDocument();
+    expect(screen.getByText('first organization')).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toBeInTheDocument();
 
     const deleteButton = screen.getByRole('button', {
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistForm.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistForm.tsx
index b856088ef5..c080a6e97c 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistForm.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistForm.tsx
@@ -1,12 +1,10 @@
-import { Input } from '@openfun/cunningham-react';
-import { Box, Button, Heading, Select, Text, ThemeContext } from 'grommet';
+import { Input, Select } from '@openfun/cunningham-react';
+import { Box, Button, Heading, Text, ThemeContext } from 'grommet';
 import { Nullable } from 'lib-common';
 import {
   ButtonLoaderStyle,
   FetchResponseError,
   Form,
-  FormField,
-  FormHelpText,
   Modal,
   ModalButton,
   Organization,
@@ -80,7 +78,7 @@ const messages = defineMessages({
   },
   playlistRetentionDurationHelper: {
     defaultMessage:
-      'This retention duration is use to know how long related resources will be kept.',
+      'This retention duration is used to know how long related resources will be kept.',
     description: 'Playlist retention duration helper in create playlist form .',
     id: 'feature.Playlist.PlaylistForm.playlistRetentionDurationHelper',
   },
@@ -179,7 +177,7 @@ export const PlaylistForm = ({
   const [formValues, setFormValues] = useState<Partial<PlaylistFormValues>>({
     organizationId: initialValues?.organizationId,
     name: initialValues?.name || '',
-    retention_duration: initialValues?.retention_duration || null,
+    retention_duration: initialValues?.retention_duration,
   });
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [currentOrganizationPage, setCurrentOrganizationPage] = useState(0);
@@ -268,25 +266,24 @@ export const PlaylistForm = ({
         label: intl.formatMessage(
           messages.playlistRetentionDurationChoiceNoDuration,
         ),
-        value: null,
       },
       {
         label: intl.formatMessage(
           messages.playlistRetentionDurationChoice30Days,
         ),
-        value: 30,
+        value: '30',
       },
       {
         label: intl.formatMessage(
           messages.playlistRetentionDurationChoice1Year,
         ),
-        value: 365,
+        value: '365',
       },
       {
         label: intl.formatMessage(
           messages.playlistRetentionDurationChoice5years,
         ),
-        value: 365 * 5,
+        value: `${365 * 5}`,
       },
     ],
     [intl],
@@ -365,37 +362,24 @@ export const PlaylistForm = ({
           )}
 
           <Box>
-            <FormField
-              required
-              disabled={!isEditable}
+            <Select
+              aria-label={intl.formatMessage(messages.organizationFieldLabel)}
               label={intl.formatMessage(messages.organizationFieldLabel)}
-              htmlFor="select-organization-id"
-              name="organizationId"
-              margin="0"
-            >
-              <Select
-                disabled={!isEditable}
-                name="organizationId"
-                id="select-organization-id"
-                options={organizations}
-                onMore={() => {
-                  if (!organizationResponse) {
-                    return;
-                  }
-
-                  if (organizations.length < organizationResponse.count) {
-                    setCurrentOrganizationPage(
-                      (currentPage) => currentPage + 1,
-                    );
-                  }
-                }}
-                labelKey="name"
-                valueKey={{ key: 'id', reduce: true }}
-              />
-            </FormField>
-            <FormHelpText>
-              {intl.formatMessage(messages.organizationHelper)}
-            </FormHelpText>
+              disabled={!isEditable}
+              options={organizations.map((organization) => ({
+                label: organization.name,
+                value: organization.id,
+              }))}
+              onChange={(e) => {
+                setFormValues((value) => ({
+                  ...value,
+                  organizationId: e.target.value as string,
+                }));
+              }}
+              fullWidth
+              text={intl.formatMessage(messages.organizationHelper)}
+              value={formValues.organizationId}
+            />
           </Box>
 
           <Input
@@ -416,31 +400,31 @@ export const PlaylistForm = ({
           />
 
           <Box>
-            <FormField
-              disabled={!isEditable}
+            <Select
+              aria-label={intl.formatMessage(
+                messages.playlistRetentionDurationFieldLabel,
+              )}
               label={intl.formatMessage(
                 messages.playlistRetentionDurationFieldLabel,
               )}
-              htmlFor="select-retention_duration-id"
-              name="retention_duration"
-              margin="0"
-            >
-              <Select
-                aria-label={intl.formatMessage(
-                  messages.playlistRetentionDurationFieldLabel,
-                )}
-                defaultValue={retentionDurationChoices[0]}
-                id="select-retention_duration-id"
-                name="retention_duration"
-                labelKey="label"
-                options={retentionDurationChoices}
-                replace={false}
-                valueKey={{ key: 'value', reduce: true }}
-              />
-            </FormField>
-            <FormHelpText>
-              {intl.formatMessage(messages.playlistRetentionDurationHelper)}
-            </FormHelpText>
+              disabled={!isEditable}
+              options={retentionDurationChoices}
+              onChange={(e) => {
+                setFormValues((value) => ({
+                  ...value,
+                  retention_duration: e.target.value as number,
+                }));
+              }}
+              fullWidth
+              text={intl.formatMessage(
+                messages.playlistRetentionDurationHelper,
+              )}
+              value={
+                formValues.retention_duration
+                  ? `${formValues.retention_duration}`
+                  : undefined
+              }
+            />
           </Box>
         </Box>
         <Box gap="xsmall">
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistPage.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistPage.tsx
index 5504b88f59..fd1bf4b1ea 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistPage.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/components/PlaylistPage.tsx
@@ -10,6 +10,7 @@ import { Modal, Playlist, useResponsive } from 'lib-components';
 import { Fragment, useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Route, Routes, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { WhiteCard } from 'components/Cards';
 import { ITEM_PER_PAGE } from 'conf/global';
@@ -67,6 +68,18 @@ const messages = defineMessages({
   },
 });
 
+export const BoxDatagrid = styled(Box)`
+  .c__datagrid {
+    display: block;
+    overflow: auto;
+  }
+  .c__datagrid td {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+`;
+
 /**
  * Clean the data to be displayed in the table
  */
@@ -217,51 +230,57 @@ export const PlaylistPage = () => {
               </Box>
             )}
             {!shouldDisplayNoPlaylistYetMessage && (
-              <DataGrid
-                columns={[
-                  {
-                    field: 'created_on',
-                    headerName: intl.formatMessage(
-                      messages.columnNameCreatedOn,
-                    ),
-                  },
-                  {
-                    field: 'title',
-                    headerName: intl.formatMessage(messages.columnNameTitle),
-                  },
-                  {
-                    enableSorting: false,
-                    field: 'organization',
-                    headerName: intl.formatMessage(
-                      messages.columnNameOrganization,
-                    ),
-                  },
-                  {
-                    id: 'column-actions',
-                    renderCell: ({ row }) => (
-                      <ButtonCunningham
-                        color="tertiary"
-                        aria-label={intl.formatMessage(
-                          messages.updatePlaylist,
-                          {
-                            playlistName: row.title,
-                          },
-                        )}
-                        size="small"
-                        onClick={() => {
-                          navigate(`${routes.PLAYLIST.path}/${row.id}/update`);
-                        }}
-                        icon={<span className="material-icons">settings</span>}
-                      />
-                    ),
-                  },
-                ]}
-                rows={rows}
-                pagination={pagination}
-                sortModel={sortModel}
-                onSortModelChange={setSortModel}
-                isLoading={isLoading}
-              />
+              <BoxDatagrid>
+                <DataGrid
+                  columns={[
+                    {
+                      field: 'created_on',
+                      headerName: intl.formatMessage(
+                        messages.columnNameCreatedOn,
+                      ),
+                    },
+                    {
+                      field: 'title',
+                      headerName: intl.formatMessage(messages.columnNameTitle),
+                    },
+                    {
+                      enableSorting: false,
+                      field: 'organization',
+                      headerName: intl.formatMessage(
+                        messages.columnNameOrganization,
+                      ),
+                    },
+                    {
+                      id: 'column-actions',
+                      renderCell: ({ row }) => (
+                        <ButtonCunningham
+                          color="tertiary"
+                          aria-label={intl.formatMessage(
+                            messages.updatePlaylist,
+                            {
+                              playlistName: row.title,
+                            },
+                          )}
+                          size="small"
+                          onClick={() => {
+                            navigate(
+                              `${routes.PLAYLIST.path}/${row.id}/update`,
+                            );
+                          }}
+                          icon={
+                            <span className="material-icons">settings</span>
+                          }
+                        />
+                      ),
+                    },
+                  ]}
+                  rows={rows}
+                  pagination={pagination}
+                  sortModel={sortModel}
+                  onSortModelChange={setSortModel}
+                  isLoading={isLoading}
+                />
+              </BoxDatagrid>
             )}
           </Fragment>
         </WhiteCard>
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/api/useUpdatePlaylistAccess/index.ts b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/api/useUpdatePlaylistAccess/index.ts
index 1bd7759210..b79a50cf9b 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/api/useUpdatePlaylistAccess/index.ts
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/api/useUpdatePlaylistAccess/index.ts
@@ -1,8 +1,4 @@
-import {
-  UseMutationOptions,
-  useMutation,
-  useQueryClient,
-} from '@tanstack/react-query';
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
 import { updateOne } from 'lib-components';
 
 import { PlaylistAccess, PlaylistRole } from '../../types/playlistAccess';
@@ -17,7 +13,7 @@ type UseUpdatePlaylistAccessError =
       errors: { [key in keyof UseUpdatePlaylistAccessData]?: string[] };
     }[];
 
-export const useUpdatePlaylistAcess = (
+export const useUpdatePlaylistAccess = (
   id: string,
   options?: UseMutationOptions<
     PlaylistAccess,
@@ -25,7 +21,6 @@ export const useUpdatePlaylistAcess = (
     UseUpdatePlaylistAccessData
   >,
 ) => {
-  const queryClient = useQueryClient();
   return useMutation<
     PlaylistAccess,
     UseUpdatePlaylistAccessError,
@@ -39,7 +34,6 @@ export const useUpdatePlaylistAcess = (
       }),
     ...options,
     onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries(['playlist-accesses']);
       options?.onSuccess?.(data, variables, context);
     },
   });
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/AddUserAccessForm.spec.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/AddUserAccessForm.spec.tsx
index 631ef2e6b9..e36e398a6e 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/AddUserAccessForm.spec.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/AddUserAccessForm.spec.tsx
@@ -72,7 +72,9 @@ describe('AddUserAccessForm', () => {
     await userEvent.click(
       screen.getByRole('button', { name: 'Add user User 1 in playlist' }),
     );
-    await userEvent.click(screen.getByRole('button', { name: /Select role/i }));
+    await userEvent.click(
+      screen.getByRole('combobox', { name: /Select role/i }),
+    );
     await userEvent.click(
       await screen.findByRole('option', { name: /Instructor/i }),
     );
@@ -153,7 +155,9 @@ describe('AddUserAccessForm', () => {
     await userEvent.click(
       screen.getByRole('button', { name: 'Add user User 1 in playlist' }),
     );
-    await userEvent.click(screen.getByRole('button', { name: /Select role/i }));
+    await userEvent.click(
+      screen.getByRole('combobox', { name: /Select role/i }),
+    );
     await userEvent.click(
       await screen.findByRole('option', { name: /Instructor/i }),
     );
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/AddUserAccessForm.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/AddUserAccessForm.tsx
index f5ef56dca5..8c602bb2cc 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/AddUserAccessForm.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/AddUserAccessForm.tsx
@@ -1,5 +1,5 @@
-import { Input } from '@openfun/cunningham-react';
-import { Box, Heading, Paragraph, Select } from 'grommet';
+import { Input, Select } from '@openfun/cunningham-react';
+import { Box, Heading, Paragraph } from 'grommet';
 import { Nullable } from 'lib-common';
 import { ModalButton } from 'lib-components';
 import { debounce } from 'lodash';
@@ -67,7 +67,7 @@ export const AddUserAccessForm = ({
   const [searchedUser, setSearchedUser] = useState('');
   const [selectedUser, setSelectedUser] = useState<Nullable<UserLite>>(null);
   const [roleValue, setRoleValue] = useState(
-    options.find((option) => option.key === PlaylistRole.STUDENT),
+    options.find((option) => option.value === PlaylistRole.STUDENT),
   );
   const { mutate: createPlaylistAccess } = useCreatePlaylistAccess({
     onSuccess: () => {
@@ -101,17 +101,17 @@ export const AddUserAccessForm = ({
         <Box gap="small">
           <SearchUserListRow user={selectedUser}>
             <Select
-              a11yTitle={intl.formatMessage(messages.roleSelectLabel)}
-              labelKey="label"
-              value={roleValue}
+              aria-label={intl.formatMessage(messages.roleSelectLabel)}
+              label={intl.formatMessage(messages.roleSelectLabel)}
               options={options}
-              onChange={({
-                option,
-              }: {
-                option: { label: string; key: PlaylistRole };
-              }) => {
-                setRoleValue(option);
+              onChange={(evt) => {
+                setRoleValue(
+                  options?.find((option) => option.value === evt.target.value),
+                );
               }}
+              fullWidth
+              value={roleValue?.value}
+              clearable={false}
             />
           </SearchUserListRow>
           <ModalButton
@@ -121,7 +121,7 @@ export const AddUserAccessForm = ({
                 createPlaylistAccess({
                   playlist: playlistId,
                   user: selectedUser.id,
-                  role: roleValue.key,
+                  role: roleValue.value,
                 });
               }
             }}
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/PlaylistUserList.spec.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/PlaylistUserList.spec.tsx
index 4c24d98f09..d8e705b2e4 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/PlaylistUserList.spec.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/PlaylistUserList.spec.tsx
@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { Deferred, render } from 'lib-tests';
@@ -74,7 +74,9 @@ describe('<PlaylistUserList />', () => {
 
     render(<PlaylistUserList playlistId="some-id" />);
 
-    expect(await screen.findByText('sbire 1')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('sbire 1')).toBeInTheDocument();
+    });
     expect(screen.getByText('sbire 2')).toBeInTheDocument();
     expect(screen.getByText('sbire 3')).toBeInTheDocument();
   });
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UpdatePlaylistPage.spec.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UpdatePlaylistPage.spec.tsx
index 87cb57bef3..cb5009fb1e 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UpdatePlaylistPage.spec.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UpdatePlaylistPage.spec.tsx
@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { Playlist } from 'lib-components';
@@ -78,13 +78,20 @@ describe('<UpdatePlaylistPage />', () => {
     expect(
       await screen.findByRole('heading', { name: 'Main informations' }),
     ).toBeInTheDocument();
+    expect(await screen.findByText('first orga')).toBeInTheDocument();
     expect(
-      await screen.findByRole('button', {
-        name: 'Open Drop; Selected: id orga',
+      screen.queryByRole('combobox', {
+        name: 'Organization',
       }),
     ).not.toBeDisabled();
     expect(screen.getByDisplayValue('playlist title')).not.toBeDisabled();
-    expect(screen.getByDisplayValue('1 year')).not.toBeDisabled();
+
+    expect(screen.getByText('1 year')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('combobox', {
+        name: 'Retention duration',
+      }),
+    ).not.toBeDisabled();
 
     expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
 
@@ -103,12 +110,6 @@ describe('<UpdatePlaylistPage />', () => {
 
     await userEvent.click(screen.getByRole('button', { name: 'Save' }));
 
-    await waitFor(() =>
-      expect(
-        screen.getByRole('button', { name: 'Open Drop; Selected: id orga' }),
-      ).toBeDisabled(),
-    );
-
     fetchMock.mock('/api/playlists/some-id/', playlist, {
       overwriteRoutes: true,
     });
@@ -118,12 +119,6 @@ describe('<UpdatePlaylistPage />', () => {
       await screen.findByText('Playlist updated with success.'),
     ).toBeInTheDocument();
 
-    await waitFor(() =>
-      expect(
-        screen.getByRole('button', { name: 'Open Drop; Selected: id orga' }),
-      ).not.toBeDisabled(),
-    );
-
     expect(
       screen.getByRole('button', { name: 'Delete playlist' }),
     ).toBeInTheDocument();
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.spec.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.spec.tsx
index 0b88e519ff..68418f7777 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.spec.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.spec.tsx
@@ -75,18 +75,13 @@ describe('<UserListRow />', () => {
     expect(
       screen.getByText('my full name (my-email@openfun.fr)'),
     ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', { name: /Open Drop/ }),
-    ).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toHaveValue('Administrator');
     expect(
       screen.getByRole('button', { name: 'Delete user.' }),
     ).toBeInTheDocument();
 
-    await userEvent.click(screen.getByRole('button', { name: /Open Drop/ }));
-
+    await userEvent.click(screen.getByText('Administrator'));
     expect(
-      await screen.findByRole('option', { name: 'Instructor' }),
+      screen.getByRole('option', { name: 'Instructor' }),
     ).toBeInTheDocument();
     expect(screen.getByRole('option', { name: 'Student' })).toBeInTheDocument();
     expect(
@@ -109,8 +104,7 @@ describe('<UserListRow />', () => {
       />,
     );
 
-    await userEvent.click(screen.getByRole('button', { name: /Open Drop/ }));
-
+    await userEvent.click(screen.getByText('Administrator'));
     const instructorOption = screen.getByRole('option', {
       name: 'Instructor',
     });
@@ -118,7 +112,7 @@ describe('<UserListRow />', () => {
 
     await userEvent.click(instructorOption);
 
-    expect(screen.getByRole('textbox')).toHaveValue('Instructor');
+    expect(screen.getByText('Instructor')).toBeInTheDocument();
     expect(
       await screen.findByText('Right has been updated with success.'),
     ).toBeInTheDocument();
@@ -144,8 +138,9 @@ describe('<UserListRow />', () => {
       />,
     );
 
-    await userEvent.click(screen.getByRole('button', { name: /Open Drop/ }));
+    expect(screen.queryByText('Instructor')).not.toBeInTheDocument();
 
+    await userEvent.click(screen.getByText('Administrator'));
     const instructorOption = screen.getByRole('option', {
       name: 'Instructor',
     });
@@ -153,7 +148,7 @@ describe('<UserListRow />', () => {
 
     await userEvent.click(instructorOption);
 
-    expect(screen.getByRole('textbox')).toHaveValue('Instructor');
+    expect(screen.getByText('Instructor')).toBeInTheDocument();
 
     deferred.reject();
 
@@ -161,7 +156,7 @@ describe('<UserListRow />', () => {
       await screen.findByText('An error occurred while updating the right.'),
     ).toBeInTheDocument();
 
-    expect(screen.getByRole('textbox')).toHaveValue('Administrator');
+    expect(await screen.findByText('Administrator')).toBeInTheDocument();
   });
 
   it('calls for delete', async () => {
@@ -260,8 +255,9 @@ describe('<UserListRow />', () => {
     expect(
       screen.getByText('my full name (my-email@openfun.fr)'),
     ).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Open Drop/ })).toBeDisabled();
-    expect(screen.getByRole('textbox')).toHaveValue('Administrator');
+    const select = screen.getByRole('combobox');
+    expect(select.contains(screen.getByText('Administrator'))).toBeTruthy();
+    expect(select.hasAttribute('disabled')).toBeTruthy();
     expect(screen.getByRole('button', { name: 'Delete user.' })).toBeDisabled();
   });
 });
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.tsx
index 240b6af976..312a20e0bb 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.tsx
@@ -1,4 +1,5 @@
-import { Box, Button, Select, Text } from 'grommet';
+import { Select } from '@openfun/cunningham-react';
+import { Box, Button, Text } from 'grommet';
 import {
   AnonymousUser,
   BinSVG,
@@ -13,12 +14,17 @@ import { toast } from 'react-hot-toast';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { useDeletePlaylistAccess } from '../api/useDeletePlaylistAccess';
-import { useUpdatePlaylistAcess } from '../api/useUpdatePlaylistAccess';
+import { useUpdatePlaylistAccess } from '../api/useUpdatePlaylistAccess';
 import { PlaylistAccess, PlaylistRole } from '../types/playlistAccess';
 
 import { userRoleOptions } from './UserRoleOptions';
 
 const messages = defineMessages({
+  labelSelectRole: {
+    defaultMessage: 'Role',
+    description: 'The label on the select role input.',
+    id: 'features.Playlist.features.UpdatePlaylist.components.UserListRow.labelSelectRole',
+  },
   anonymousUser: {
     defaultMessage: 'Anonymous',
     description: 'Update page, playlist access row for user without full name.',
@@ -66,9 +72,6 @@ const messages = defineMessages({
   },
 });
 
-type Option = { label: string; key: PlaylistRole };
-type SelectOnChangeEvent = { option: Option };
-
 interface UserLabelColumnProps {
   user: PlaylistAccess['user'];
 }
@@ -84,7 +87,17 @@ export const UserLabelColumn = ({ user }: UserLabelColumnProps) => {
     userLabel = user.email;
   }
 
-  return <Fragment>{userLabel}</Fragment>;
+  return (
+    <Text
+      truncate
+      style={{
+        display: 'block',
+        whiteSpace: 'normal',
+      }}
+    >
+      {userLabel}
+    </Text>
+  );
 };
 
 interface UserRolesColumnProps {
@@ -101,16 +114,16 @@ export const UserRolesColumn = ({
   const intl = useIntl();
 
   const options = userRoleOptions(intl);
-  const initialOption = options.find((option) => option.key === role);
+  const initialRole = options.find((option) => option.value === role)?.value;
+  const [userRole, setUserRole] = useState(initialRole);
 
-  const [userRole, setUserRole] = useState(initialOption);
-  const { mutate: updateMutation } = useUpdatePlaylistAcess(playlistAccessId, {
+  const { mutate: updateMutation } = useUpdatePlaylistAccess(playlistAccessId, {
     onSuccess: () => {
       toast.success(intl.formatMessage(messages.updatePlaylistAccessSuccess));
     },
     onError: () => {
       toast.error(intl.formatMessage(messages.updatePlaylistAccessError));
-      setUserRole(initialOption);
+      setUserRole(initialRole);
     },
   });
   const { currentUser } = useCurrentUser();
@@ -122,15 +135,23 @@ export const UserRolesColumn = ({
 
   return (
     <Select
-      value={userRole}
-      options={options}
-      labelKey="label"
+      className="c_select__no_border"
+      aria-label={intl.formatMessage(messages.labelSelectRole)}
+      label={intl.formatMessage(messages.labelSelectRole)}
+      hideLabel
       disabled={userId === idUser}
-      onChange={({ option }: SelectOnChangeEvent) => {
-        setUserRole(option);
-        updateMutation({ role: option.key });
+      options={options}
+      onChange={(evt) => {
+        if (evt.target.value === userRole) {
+          return;
+        }
+
+        setUserRole(evt.target.value as PlaylistRole);
+        updateMutation({ role: evt.target.value as PlaylistRole });
       }}
-      size="var(--c--theme--font--size-datagrid-cell)"
+      fullWidth
+      value={userRole}
+      clearable={false}
     />
   );
 };
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserRoleOptions.spec.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserRoleOptions.spec.tsx
index e1d5281d0f..ec76e7a133 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserRoleOptions.spec.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserRoleOptions.spec.tsx
@@ -8,9 +8,9 @@ describe('UserRoleOptions', () => {
       locale: 'en',
     });
     const expectedOptions = [
-      { label: 'Administrator', key: 'administrator' },
-      { label: 'Instructor', key: 'instructor' },
-      { label: 'Student', key: 'student' },
+      { label: 'Administrator', value: 'administrator' },
+      { label: 'Instructor', value: 'instructor' },
+      { label: 'Student', value: 'student' },
     ];
     expect(userRoleOptions(intl)).toEqual(expectedOptions);
   });
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserRoleOptions.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserRoleOptions.tsx
index 675ac84288..5ae23b4e04 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserRoleOptions.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserRoleOptions.tsx
@@ -23,14 +23,14 @@ const messages = defineMessages({
 export const userRoleOptions = (intl: IntlShape) => [
   {
     label: intl.formatMessage(messages.adminLabel),
-    key: PlaylistRole.ADMINISTRATOR,
+    value: PlaylistRole.ADMINISTRATOR,
   },
   {
     label: intl.formatMessage(messages.instructorLabel),
-    key: PlaylistRole.INSTRUCTOR,
+    value: PlaylistRole.INSTRUCTOR,
   },
   {
     label: intl.formatMessage(messages.studentLabel),
-    key: PlaylistRole.STUDENT,
+    value: PlaylistRole.STUDENT,
   },
 ];
diff --git a/src/frontend/packages/lib_common/src/cunningham-style.css b/src/frontend/packages/lib_common/src/cunningham-style.css
index bd9be066c9..d1a96724da 100644
--- a/src/frontend/packages/lib_common/src/cunningham-style.css
+++ b/src/frontend/packages/lib_common/src/cunningham-style.css
@@ -41,17 +41,34 @@ input:-webkit-autofill:focus {
     color 0s 600000s;
 }
 /**
- * DataGrid
+ * Select
 */
-.c__datagrid {
-  display: block;
-  overflow: auto;
+.c_select__no_border .c__select .c__select__wrapper,
+.c_select__no_border .c__select .c__select__wrapper:hover, 
+.c_select__no_border .c__select:not(.c__select--disabled) .c__select__wrapper:hover {
+  border: none;
+  box-shadow: none;
+}
+.c__select__wrapper {
+  transition: all var(--c--theme--transitions--duration)
+    var(--c--theme--transitions--ease-out);
 }
+.c__select:not(.c__select--disabled) .c__select__wrapper:hover {
+  box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
+}
+.c__select__menu__item {
+  transition: all var(--c--theme--transitions--duration)
+    var(--c--theme--transitions--ease-out);
+}
+.c__select--disabled .c__select__wrapper label, .c__select--disabled .c__select__wrapper input {
+  background: none;
+}
+/**
+ * DataGrid
+*/
 .c__datagrid > table td {
   max-width: 10rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: normal;
   color: var(--c--theme--colors--primary-500);
   font-size: var(--c--theme--font--size-datagrid-cell);
 }
diff --git a/src/frontend/packages/lib_common/src/cunningham-tokens.css b/src/frontend/packages/lib_common/src/cunningham-tokens.css
index d4cafa89a3..fb30ecc34b 100644
--- a/src/frontend/packages/lib_common/src/cunningham-tokens.css
+++ b/src/frontend/packages/lib_common/src/cunningham-tokens.css
@@ -126,4 +126,17 @@
     --c--components--forms-datepicker--border-color
   );
   --c--components--forms-field--color: var(--c--theme--colors--primary-500);
+  --c--components--forms-select--border-color: var(--c--theme--colors--primary-500);
+  --c--components--forms-select--border-radius--hover: var(
+    --c--components--forms-select--border-radius
+  );
+  --c--components--forms-select--border-radius--focus: var(
+    --c--components--forms-select--border-radius
+  );
+  --c--components--forms-select--color: var(--c--theme--colors--primary-500);
+  --c--components--forms-select--item-color: var(--c--theme--colors--primary-500);
+  --c--components--forms-select--item-color: var(--c--theme--colors--primary-500);
+  --c--components--forms-select--item-background-color--hover: var(
+    --c--theme--colors--primary-100
+  );
 }
diff --git a/src/frontend/packages/lib_components/src/utils/tests/factories.ts b/src/frontend/packages/lib_components/src/utils/tests/factories.ts
index 3a77cfca4a..10eeb6be1a 100644
--- a/src/frontend/packages/lib_components/src/utils/tests/factories.ts
+++ b/src/frontend/packages/lib_components/src/utils/tests/factories.ts
@@ -147,7 +147,7 @@ export const videoMockFactory = (video: Partial<Video> = {}): Video => {
     is_public: false,
     join_mode: JoinMode.APPROVAL,
     lti_url: `https://example.com/lti/videos/${id}`,
-    license: 'All rights reserved',
+    license: 'NO_CC',
     show_download: true,
     starting_at: null,
     estimated_duration: null,
diff --git a/src/frontend/packages/lib_markdown/src/components/LanguageSelector/index.spec.tsx b/src/frontend/packages/lib_markdown/src/components/LanguageSelector/index.spec.tsx
index ac28128950..2110d9c291 100644
--- a/src/frontend/packages/lib_markdown/src/components/LanguageSelector/index.spec.tsx
+++ b/src/frontend/packages/lib_markdown/src/components/LanguageSelector/index.spec.tsx
@@ -18,7 +18,7 @@ describe('<LanguageSelector />', () => {
     );
 
     await userEvent.click(
-      screen.getByRole('button', { name: /Select language/i }),
+      screen.getByRole('combobox', { name: /Select language/i }),
     );
     await userEvent.click(
       await screen.findByRole('option', { name: /French/i }),
@@ -36,7 +36,7 @@ describe('<LanguageSelector />', () => {
     );
 
     await userEvent.click(
-      screen.getByRole('button', { name: /Select language/i }),
+      screen.getByRole('combobox', { name: /Select language/i }),
     );
     await userEvent.click(
       await screen.findByRole('option', { name: /English/i }),
@@ -59,7 +59,7 @@ describe('<LanguageSelector />', () => {
     );
 
     await userEvent.click(
-      screen.getByRole('button', { name: /Select language/i }),
+      screen.getByRole('combobox', { name: /Select language/i }),
     );
 
     expect(screen.queryByText('French')).not.toBeInTheDocument();
@@ -78,7 +78,7 @@ describe('<LanguageSelector />', () => {
     );
 
     await userEvent.click(
-      screen.getByRole('button', { name: /Select language/i }),
+      screen.getByRole('combobox', { name: /Select language/i }),
     );
     await userEvent.click(
       await screen.findByRole('option', { name: /French/i }),
diff --git a/src/frontend/packages/lib_markdown/src/components/LanguageSelector/index.tsx b/src/frontend/packages/lib_markdown/src/components/LanguageSelector/index.tsx
index 8f5b9fad39..5458f5e1f0 100644
--- a/src/frontend/packages/lib_markdown/src/components/LanguageSelector/index.tsx
+++ b/src/frontend/packages/lib_markdown/src/components/LanguageSelector/index.tsx
@@ -1,5 +1,4 @@
-import { Select } from 'grommet';
-import React from 'react';
+import { Select } from '@openfun/cunningham-react';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -15,6 +14,7 @@ type LanguageSelectorProps = {
   onLanguageChange: (selectedLanguage: string) => void;
   disabled: boolean;
   availableLanguages?: string[];
+  fullWidth?: boolean;
 };
 
 export const LanguageSelector = ({
@@ -22,6 +22,7 @@ export const LanguageSelector = ({
   onLanguageChange,
   disabled,
   availableLanguages,
+  fullWidth,
 }: LanguageSelectorProps) => {
   const intl = useIntl();
   let languageList = ['en', 'fr']; // may prefer an API call to fetch values
@@ -31,22 +32,23 @@ export const LanguageSelector = ({
     );
   }
 
-  const displayedLanguage = intl.formatDisplayName(currentLanguage, {
-    type: 'language',
-  });
   return (
     <Select
-      margin="xsmall"
-      a11yTitle={intl.formatMessage(messages.selectLanguageLabel)}
-      value={displayedLanguage}
-      disabled={disabled}
+      aria-label={intl.formatMessage(messages.selectLanguageLabel)}
+      label={intl.formatMessage(messages.selectLanguageLabel)}
       options={languageList.map((lang) => ({
-        label: intl.formatDisplayName(lang, { type: 'language' }),
+        label: intl.formatDisplayName(lang, { type: 'language' }) as string,
         value: lang,
       }))}
-      onChange={({ option }: { option: { label: string; value: string } }) => {
-        onLanguageChange(option.value);
+      fullWidth={fullWidth}
+      value={currentLanguage}
+      onChange={(evt) => {
+        if (evt.target.value !== currentLanguage) {
+          onLanguageChange(evt.target.value as string);
+        }
       }}
+      clearable={false}
+      disabled={disabled}
     />
   );
 };
diff --git a/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.spec.tsx b/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.spec.tsx
index 1e92ee628d..e136315928 100644
--- a/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.spec.tsx
+++ b/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.spec.tsx
@@ -159,11 +159,14 @@ describe('<MarkdownEditor />', () => {
     act(() => documentDeferred.resolve(markdownDocument));
 
     await screen.findByDisplayValue(markdownDocument.translations[0].title);
+
+    const selectLanguage = screen.getByRole('combobox', {
+      name: /Select language/i,
+    });
+    expect(selectLanguage).toBeInTheDocument();
     expect(
-      screen.getByRole('button', {
-        name: /Select language; Selected: French/i,
-      }),
-    ).toBeVisible();
+      await within(selectLanguage).findByText('French'),
+    ).toBeInTheDocument();
     await waitFor(() =>
       expect(
         screen.getAllByText(markdownDocument.translations[0].content).length,
@@ -251,7 +254,7 @@ describe('<MarkdownEditor />', () => {
 
     // Change language to fr
     await userEvent.click(
-      screen.getByRole('button', { name: /Select language/i }),
+      screen.getByRole('combobox', { name: /Select language/i }),
     );
     await userEvent.click(
       await screen.findByRole('option', { name: /French/i }),
@@ -591,7 +594,12 @@ describe('<MarkdownEditor />', () => {
       ).toHaveTextContent(`[//]: # (${markdownImageId})`),
     );
 
-    expect(screen.getByRole('status')).toHaveTextContent('cats.gif0%');
+    const status = await screen.findByRole('status', {
+      description: (_, element) =>
+        element?.textContent?.includes('cats.gif') ?? false,
+    });
+
+    expect(status).toHaveTextContent('cats.gif0%');
 
     // Image is uploaded
     fetchMock.get(
@@ -610,15 +618,11 @@ describe('<MarkdownEditor />', () => {
     });
 
     await waitFor(() =>
-      expect(screen.getByRole('status')).toHaveTextContent(
-        'Processing cats.gif',
-      ),
+      expect(status).toHaveTextContent('Processing cats.gif'),
     );
 
     // Image is processed
-    expect(await screen.findByRole('status')).toHaveTextContent(
-      'Uploaded cats.gif',
-    );
+    await waitFor(() => expect(status).toHaveTextContent('Uploaded cats.gif'));
     await waitFor(() =>
       expect(
         container.querySelector('div[class="cm-line"]')!,
diff --git a/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx b/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx
index 914a987241..0402f4efdd 100644
--- a/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx
+++ b/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx
@@ -294,17 +294,18 @@ export const MarkdownEditor = ({ markdownDocumentId }: MarkdownEditorProps) => {
             />
           </Box>
 
-          <Box direction="row">
+          <Box direction="row" align="center">
             <ScreenDispositionSelector
               screenDisposition={screenDisposition}
               setScreenDisposition={setScreenDisposition}
             />
-            <Box flex="grow" />
-            <LanguageSelector
-              currentLanguage={language}
-              onLanguageChange={setLanguage}
-              disabled={contentChanged.current}
-            />
+            <Box flex="grow" margin="xsmall" align="end">
+              <LanguageSelector
+                currentLanguage={language}
+                onLanguageChange={setLanguage}
+                disabled={contentChanged.current}
+              />
+            </Box>
           </Box>
         </Box>
 
diff --git a/src/frontend/packages/lib_markdown/src/components/MarkdownViewer/index.spec.tsx b/src/frontend/packages/lib_markdown/src/components/MarkdownViewer/index.spec.tsx
index 24d736192c..33cbbbb82d 100644
--- a/src/frontend/packages/lib_markdown/src/components/MarkdownViewer/index.spec.tsx
+++ b/src/frontend/packages/lib_markdown/src/components/MarkdownViewer/index.spec.tsx
@@ -45,7 +45,7 @@ describe('<MarkdownViewer />', () => {
 
     // Change language to fr
     await userEvent.click(
-      screen.getByRole('button', { name: /Select language/i }),
+      screen.getByRole('combobox', { name: /Select language/i }),
     );
     await userEvent.click(
       await screen.findByRole('option', { name: /French/i }),
@@ -75,7 +75,7 @@ describe('<MarkdownViewer />', () => {
 
     // Change language to fr
     await userEvent.click(
-      screen.getByRole('button', { name: /Select language/i }),
+      screen.getByRole('combobox', { name: /Select language/i }),
     );
     await userEvent.click(
       await screen.findByRole('option', { name: /French/i }),
@@ -127,7 +127,7 @@ describe('<MarkdownViewer />', () => {
 
     // Change language to fr
     await userEvent.click(
-      screen.getByRole('button', { name: /Select language/i }),
+      screen.getByRole('combobox', { name: /Select language/i }),
     );
     await userEvent.click(
       await screen.findByRole('option', { name: /French/i }),
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.spec.tsx
index 21d5d87e3a..88c9eab100 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.spec.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.spec.tsx
@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import {
@@ -26,8 +26,6 @@ const languageChoices = [
 ];
 
 describe('<LanguageSelect />', () => {
-  //jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
-
   afterEach(() => {
     fetchMock.restore();
   });
@@ -49,14 +47,10 @@ describe('<LanguageSelect />', () => {
       }),
     );
 
-    screen.getByRole('button', {
-      name: 'Select the language for which you want to upload a timed text file; Selected: fr',
+    const button = await screen.findByRole('combobox', {
+      name: 'Choose the language',
     });
-    expect(
-      screen.getByRole('textbox', {
-        name: 'Select the language for which you want to upload a timed text file, fr',
-      }),
-    ).toHaveValue('French');
+    expect(within(button).getByText('French')).toBeInTheDocument();
   });
 
   it('renders the component with instructor local language unavailable', async () => {
@@ -76,14 +70,10 @@ describe('<LanguageSelect />', () => {
       }),
     );
 
-    screen.getByRole('button', {
-      name: 'Select the language for which you want to upload a timed text file; Selected: en',
+    const button = await screen.findByRole('combobox', {
+      name: 'Choose the language',
     });
-    expect(
-      screen.getByRole('textbox', {
-        name: 'Select the language for which you want to upload a timed text file, en',
-      }),
-    ).toHaveValue('English');
+    expect(within(button).getByText('English')).toBeInTheDocument();
   });
 
   it('renders the component with some languages already having some subtitles uploaded', async () => {
@@ -114,17 +104,12 @@ describe('<LanguageSelect />', () => {
       }),
     );
 
-    expect(
-      screen.getByRole('textbox', {
-        name: 'Select the language for which you want to upload a timed text file, fr',
-      }),
-    ).toHaveValue('French');
+    const button = await screen.findByRole('combobox', {
+      name: 'Choose the language',
+    });
+    expect(within(button).getByText('French')).toBeInTheDocument();
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: 'Select the language for which you want to upload a timed text file; Selected: fr',
-      }),
-    );
+    await userEvent.click(button);
 
     screen.getByRole('option', { name: 'English' });
     screen.getByRole('option', { name: 'French' });
@@ -162,14 +147,12 @@ describe('<LanguageSelect />', () => {
       }),
     ).not.toBeInTheDocument();
 
-    screen.getByRole('button', {
-      name: 'Select the language for which you want to upload a timed text file; Selected: error',
+    const button = await screen.findByRole('combobox', {
+      name: 'Choose the language',
     });
     expect(
-      screen.getByRole('textbox', {
-        name: 'Select the language for which you want to upload a timed text file, error',
-      }),
-    ).toHaveValue('No language availables');
+      within(button).getByText('No language availables'),
+    ).toBeInTheDocument();
   });
 
   it('changes the selected language', async () => {
@@ -189,29 +172,12 @@ describe('<LanguageSelect />', () => {
       }),
     );
 
-    expect(
-      await screen.findByRole('textbox', {
-        name: 'Select the language for which you want to upload a timed text file, fr',
-      }),
-    ).toHaveValue('French');
-
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: 'Select the language for which you want to upload a timed text file; Selected: fr',
-      }),
-    );
-
-    const englishButtonOption = screen.getByRole('option', { name: 'English' });
-
-    await userEvent.click(englishButtonOption);
-
-    screen.getByRole('button', {
-      name: 'Select the language for which you want to upload a timed text file; Selected: en',
+    const button = await screen.findByRole('combobox', {
+      name: 'Choose the language',
     });
-    expect(
-      screen.getByRole('textbox', {
-        name: 'Select the language for which you want to upload a timed text file, en',
-      }),
-    ).toHaveValue('English');
+    expect(within(button).getByText('French')).toBeInTheDocument();
+    await userEvent.click(button);
+    await userEvent.click(screen.getByRole('option', { name: 'English' }));
+    expect(within(button).getByText('English')).toBeInTheDocument();
   });
 });
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.tsx
index 3aa1b81521..850c3a6e62 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.tsx
@@ -1,4 +1,5 @@
-import { Select, timedTextMode, useTimedTextTrack } from 'lib-components';
+import { Select } from '@openfun/cunningham-react';
+import { timedTextMode, useTimedTextTrack } from 'lib-components';
 import { useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -6,12 +7,18 @@ import { LanguageChoice } from '@lib-video/types/SelectOptions';
 
 const messages = defineMessages({
   selectLanguageLabel: {
-    defaultMessage:
-      'Select the language for which you want to upload a timed text file',
+    defaultMessage: 'Choose the language',
     description:
       'The label of the select used for choosing the language for which the user wants to upload a file.',
     id: 'components.LanguageSelect.selectLanguageLabel',
   },
+  selectLanguageInfo: {
+    defaultMessage:
+      'The language for which you want to upload a timed text file',
+    description:
+      'The text under the select used for choosing the language for which the user wants to upload a file.',
+    id: 'components.LanguageSelect.selectLanguageInfo',
+  },
   noLanguageAvailableLabel: {
     defaultMessage: 'No language availables',
     description:
@@ -98,14 +105,19 @@ export const LanguageSelect = ({
   return (
     <Select
       aria-label={intl.formatMessage(messages.selectLanguageLabel)}
+      label={intl.formatMessage(messages.selectLanguageLabel)}
       options={availableSelectableLanguages ?? [errorLanguageChoice]}
-      replace={false}
-      labelKey="label"
       value={selectedLanguage.value}
-      valueKey={{ key: 'value', reduce: true }}
-      onChange={({ option }: { option: { label: string; value: string } }) => {
-        setSelectedLanguage(option);
+      onChange={(evt) => {
+        setSelectedLanguage(
+          availableSelectableLanguages?.find(
+            (lang) => lang.value === evt.target.value,
+          ) ?? errorLanguageChoice,
+        );
       }}
+      fullWidth
+      clearable={false}
+      text={intl.formatMessage(messages.selectLanguageInfo)}
     />
   );
 };
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/index.spec.tsx
index d048672926..43aa8368d3 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/index.spec.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/index.spec.tsx
@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import {
@@ -90,14 +90,10 @@ describe('<LocalizedTimedTextTrackUpload />', () => {
       { intlOptions: { locale: 'fr-FR' } },
     );
 
-    await screen.findByRole('button', {
-      name: 'Select the language for which you want to upload a timed text file; Selected: fr',
+    const button = await screen.findByRole('combobox', {
+      name: 'Choose the language',
     });
-    expect(
-      screen.getByRole('textbox', {
-        name: 'Select the language for which you want to upload a timed text file, fr',
-      }),
-    ).toHaveValue('French');
+    expect(await within(button).findByText('French')).toBeInTheDocument();
     screen.getByText('No uploaded files');
 
     screen.getByRole('button', { name: 'Upload file' });
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/index.spec.tsx
index 6495c199eb..343049c37c 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/index.spec.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/index.spec.tsx
@@ -226,13 +226,14 @@ describe('<VideoWidgetProvider />', () => {
       render(wrapInVideo(<VideoWidgetProvider isLive isTeacher />, mockVideo));
 
       await screen.findByText('Join the discussion');
-      const button = screen.getByRole('button', {
-        name: /select join the discussion mode/i,
+      const button = screen.getByRole('combobox', {
+        name: 'Join the discussion mode',
       });
-      const select = within(button).getByRole('textbox');
-      expect(select).toHaveValue(
-        'Accept joining the discussion after approval',
-      );
+      expect(
+        within(button).getByText(
+          'Accept joining the discussion after approval',
+        ),
+      ).toBeInTheDocument();
     });
 
     it('tests DashboardLiveWidgetThumbnail', async () => {
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/DownloadVideo/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/DownloadVideo/index.spec.tsx
index dbc5417286..1a2a2982d5 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/DownloadVideo/index.spec.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/DownloadVideo/index.spec.tsx
@@ -43,8 +43,8 @@ describe('<InstructorDownloadVideo />', () => {
 
     await userEvent.click(screen.getByRole('button', { name: 'help' }));
 
-    const button = screen.getByRole('button', {
-      name: 'This input allows you to select the quality you desire for your download.; Selected: 1080 p',
+    const button = screen.getByRole('combobox', {
+      name: 'Download quality',
     });
     within(button).getByText('1080 p');
 
@@ -63,9 +63,10 @@ describe('<InstructorDownloadVideo />', () => {
       ),
     );
 
-    const defaultButtonSelect = screen.getByRole('button', {
-      name: 'This input allows you to select the quality you desire for your download.; Selected: 1080 p',
+    const defaultButtonSelect = screen.getByRole('combobox', {
+      name: 'Download quality',
     });
+    expect(within(defaultButtonSelect).getByText('1080 p')).toBeInTheDocument();
 
     await userEvent.click(defaultButtonSelect);
 
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/DownloadVideo/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/DownloadVideo/index.tsx
index 810a031049..2b3deb0e25 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/DownloadVideo/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/DownloadVideo/index.tsx
@@ -1,4 +1,5 @@
-import { Box, Button, Select, Text } from 'grommet';
+import { Select } from '@openfun/cunningham-react';
+import { Box, Button } from 'grommet';
 import {
   FoldableItem,
   ToggleInput,
@@ -27,11 +28,15 @@ const messages = defineMessages({
     id: 'components.DownloadVideo.title',
   },
   selectQualityLabel: {
-    defaultMessage:
-      'This input allows you to select the quality you desire for your download.',
+    defaultMessage: 'Download quality',
     description: 'Label of the select button.',
     id: 'components.DownloadVideo.selectQualityLabel',
   },
+  selectQualityInfo: {
+    defaultMessage: 'Select the quality you desire for your download.',
+    description: 'Text explaining the select button.',
+    id: 'components.DownloadVideo.selectQualityInfo',
+  },
   noResolutionsAvailableOption: {
     defaultMessage: 'No resolutions available',
     description:
@@ -104,10 +109,9 @@ export const DownloadVideo = ({ isTeacher }: DownloadVideoProps) => {
     options.push(noResolutionsAvailableOption);
   }
 
-  const [selectedOption, setSelectedOption] = useState<{
-    label: string;
-    value: string;
-  }>(options[options.length - 1]);
+  const [selectedQuality, setSelectedQuality] = useState(
+    options[options.length - 1].value,
+  );
 
   const [toggleAllowDownload, setToggleAllowDownload] = useState(
     video.show_download,
@@ -175,24 +179,15 @@ export const DownloadVideo = ({ isTeacher }: DownloadVideoProps) => {
       <Box direction="column" gap="small" style={{ marginTop: '0.75rem' }}>
         <Select
           aria-label={intl.formatMessage(messages.selectQualityLabel)}
+          label={intl.formatMessage(messages.selectQualityLabel)}
           options={options}
-          replace={false}
-          labelKey="label"
-          value={selectedOption.label}
-          valueKey={{ key: 'value', reduce: true }}
-          valueLabel={(label: string) => (
-            <Box pad="small">
-              <Text color="blue-active">{`${label}`}</Text>
-            </Box>
-          )}
-          onChange={({
-            option,
-          }: {
-            option: { label: string; value: string };
-          }) => {
-            setSelectedOption(option);
+          fullWidth
+          value={selectedQuality}
+          onChange={(evt) => {
+            setSelectedQuality(evt.target.value as string);
           }}
-          title={intl.formatMessage(messages.selectQualityLabel)}
+          clearable={false}
+          text={intl.formatMessage(messages.selectQualityInfo)}
         />
         <StyledAnchorButton
           a11yTitle={intl.formatMessage(messages.downloadButtonLabel)}
@@ -202,7 +197,7 @@ export const DownloadVideo = ({ isTeacher }: DownloadVideoProps) => {
           label={intl.formatMessage(messages.downloadButtonLabel)}
           href={
             video.urls
-              ? video.urls.mp4[Number(selectedOption.value) as videoSize]
+              ? video.urls.mp4[Number(selectedQuality) as videoSize]
               : undefined
           }
           target="_blank"
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.spec.tsx
index 4d36d10c13..8f1b54728d 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.spec.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.spec.tsx
@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import {
@@ -62,10 +62,12 @@ describe('<LicenseManager />', () => {
     );
 
     expect(screen.getByText('License')).toBeInTheDocument();
-    const textbox = await screen.findByRole('textbox', {
-      name: 'Select the license under which you want to publish your video, NO_CC',
+    const selectButton = await screen.findByRole('combobox', {
+      name: 'Select the license',
     });
-    expect(textbox).toHaveValue('All rights reserved');
+    expect(
+      await within(selectButton).findByText('All rights reserved'),
+    ).toBeInTheDocument();
   });
 
   it('renders the component with no license', async () => {
@@ -83,10 +85,11 @@ describe('<LicenseManager />', () => {
     );
 
     expect(screen.getByText('License')).toBeInTheDocument();
-    const textbox = await screen.findByRole('textbox', {
-      name: 'Select the license under which you want to publish your video',
-    });
-    expect(textbox).toHaveValue('');
+    expect(
+      await screen.findByRole('combobox', {
+        name: 'Select the license',
+      }),
+    ).toBeInTheDocument();
   });
 
   it('renders the component with a license and successfully updates it', async () => {
@@ -105,21 +108,20 @@ describe('<LicenseManager />', () => {
     );
 
     expect(screen.getByText('License')).toBeInTheDocument();
-    const selectButton = await screen.findByRole('button', {
-      name: 'Select the license under which you want to publish your video; Selected: NO_CC',
+    const selectButton = await screen.findByRole('combobox', {
+      name: 'Select the license',
     });
+    expect(
+      await within(selectButton).findByText('All rights reserved'),
+    ).toBeInTheDocument();
     await userEvent.click(selectButton);
     const CreativeCommonButtonOption = screen.getByRole('option', {
       name: 'Creative Common By Attribution',
     });
     await userEvent.click(CreativeCommonButtonOption);
-    await waitFor(() =>
-      expect(
-        screen.getByRole('textbox', {
-          name: 'Select the license under which you want to publish your video, CC_BY',
-        }),
-      ).toHaveValue('Creative Common By Attribution'),
-    );
+    expect(
+      await within(selectButton).findByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
   });
 
   it('renders the component with no license choice', async () => {
@@ -139,8 +141,8 @@ describe('<LicenseManager />', () => {
     );
 
     expect(screen.getByText('License')).toBeInTheDocument();
-    const selectButton = await screen.findByRole('button', {
-      name: 'Select the license under which you want to publish your video; Selected: All rights reserved',
+    const selectButton = await screen.findByRole('combobox', {
+      name: 'Select the license',
     });
     await userEvent.click(selectButton);
     await screen.findByText('No license available');
@@ -161,9 +163,12 @@ describe('<LicenseManager />', () => {
     );
 
     expect(screen.getByText('License')).toBeInTheDocument();
-    const selectButton = await screen.findByRole('button', {
-      name: 'Select the license under which you want to publish your video; Selected: NO_CC',
+    const selectButton = await screen.findByRole('combobox', {
+      name: 'Select the license',
     });
+    expect(
+      await within(selectButton).findByText('All rights reserved'),
+    ).toBeInTheDocument();
     await userEvent.click(selectButton);
     const CreativeCommonButtonOption = screen.getByRole('option', {
       name: 'Creative Common By Attribution',
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.tsx
index af63cbc6ff..8d86694f98 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.tsx
@@ -1,6 +1,5 @@
-import { Select } from 'grommet';
-import { Nullable } from 'lib-common';
-import { FoldableItem } from 'lib-components';
+import { Select } from '@openfun/cunningham-react';
+import { CenterLoader, FoldableItem } from 'lib-components';
 import React, { useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import { defineMessages, useIntl } from 'react-intl';
@@ -8,7 +7,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useUpdateVideo } from '@lib-video/api/useUpdateVideo';
 import { useVideoMetadata } from '@lib-video/api/useVideoMetadata';
 import { useCurrentVideo } from '@lib-video/hooks/useCurrentVideo';
-import { LicenseChoice } from '@lib-video/types';
 
 const messages = defineMessages({
   info: {
@@ -38,18 +36,24 @@ const messages = defineMessages({
     id: 'components.LicenseManager.noLicenseAvailableLabel',
   },
   selectLicenseLabel: {
-    defaultMessage:
-      'Select the license under which you want to publish your video',
+    defaultMessage: 'Select the license',
     description:
       'The label of the select used for choosing the license under which the instructor wants to publish your video',
     id: 'components.LicenseManager.selectLicenseLabel',
   },
+  selectLicenseInfo: {
+    defaultMessage:
+      'Select the license under which you want to publish your video',
+    description:
+      'The text under the select used for choosing the license under which the instructor wants to publish your video',
+    id: 'components.LicenseManager.selectLicenseInfo',
+  },
 });
 
 export const LicenseManager = () => {
   const intl = useIntl();
   const video = useCurrentVideo();
-  const { data } = useVideoMetadata(intl.locale);
+  const { data, isLoading } = useVideoMetadata(intl.locale);
   const choices = useMemo(() => {
     return data?.actions.POST.license.choices?.map((choice) => ({
       label: choice.display_name,
@@ -57,15 +61,19 @@ export const LicenseManager = () => {
     }));
   }, [data?.actions.POST.license.choices]);
 
-  const [selectedLicense, setSelectedLicense] = useState<
-    Nullable<LicenseChoice>
-  >(video.license ? { label: video.license, value: video.license } : null);
+  const [selectedLicense, setSelectedLicense] = useState(
+    video.license ? video.license : undefined,
+  );
 
   useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
     return setSelectedLicense(
-      choices?.find((choice) => choice.label === video.license) || null,
+      choices?.find((choice) => choice.value === video.license)?.value,
     );
-  }, [choices, video.license]);
+  }, [choices, isLoading, video.license]);
 
   const errorLicenseChoice = {
     label: intl.formatMessage(messages.noLicenseAvailableLabel),
@@ -85,28 +93,36 @@ export const LicenseManager = () => {
     },
   });
 
-  function onChange(option: LicenseChoice) {
-    videoMutation.mutate({ license: option.value });
-    setSelectedLicense(option);
-  }
-
   return (
     <FoldableItem
       infoText={intl.formatMessage(messages.info)}
       initialOpenValue={true}
       title={intl.formatMessage(messages.title)}
     >
-      <Select
-        aria-label={intl.formatMessage(messages.selectLicenseLabel)}
-        id="select-license-id"
-        name="license"
-        labelKey="label"
-        onChange={onChange}
-        options={choices ?? [errorLicenseChoice]}
-        replace={false}
-        value={selectedLicense?.value}
-        valueKey={{ key: 'value', reduce: true }}
-      />
+      {!isLoading ? (
+        <Select
+          aria-label={intl.formatMessage(messages.selectLicenseLabel)}
+          label={intl.formatMessage(messages.selectLicenseLabel)}
+          options={choices ?? [errorLicenseChoice]}
+          value={selectedLicense}
+          onChange={(evt) => {
+            if (selectedLicense === evt.target.value) {
+              return;
+            }
+
+            setSelectedLicense(evt.target.value as string);
+
+            if (evt.target.value !== errorLicenseChoice.value) {
+              videoMutation.mutate({ license: evt.target.value as string });
+            }
+          }}
+          fullWidth
+          clearable={false}
+          text={intl.formatMessage(messages.selectLicenseInfo)}
+        />
+      ) : (
+        <CenterLoader />
+      )}
     </FoldableItem>
   );
 };
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LiveJoinMode/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LiveJoinMode/index.spec.tsx
index 9f6736cdd7..50f22510f2 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LiveJoinMode/index.spec.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LiveJoinMode/index.spec.tsx
@@ -46,11 +46,12 @@ describe('<LiveJoinMode />', () => {
     );
 
     screen.getByText('Join the discussion');
-    const button = screen.getByRole('button', {
-      name: /select join the discussion mode/i,
+    const button = screen.getByRole('combobox', {
+      name: 'Join the discussion mode',
     });
-    const select = within(button).getByRole('textbox');
-    expect(select).toHaveValue('Accept joining the discussion after approval');
+    expect(
+      within(button).getByText('Accept joining the discussion after approval'),
+    ).toBeInTheDocument();
   });
 
   it('selects join mode denied', async () => {
@@ -72,11 +73,12 @@ describe('<LiveJoinMode />', () => {
       ),
     );
 
-    const button = screen.getByRole('button', {
-      name: /select join the discussion mode/i,
+    const button = screen.getByRole('combobox', {
+      name: 'Join the discussion mode',
     });
-    const select = within(button).getByRole('textbox');
-    expect(select).toHaveValue('Accept joining the discussion after approval');
+    expect(
+      within(button).getByText('Accept joining the discussion after approval'),
+    ).toBeInTheDocument();
 
     await userEvent.click(button);
     await userEvent.click(screen.getByText(/not allowed/i));
@@ -106,7 +108,7 @@ describe('<LiveJoinMode />', () => {
         { ...mockedVideo, join_mode: JoinMode.DENIED },
       ),
     );
-    expect(within(button).getByRole('textbox')).toHaveValue('Not allowed');
+    expect(within(button).getByText('Not allowed')).toBeInTheDocument();
   });
 
   it('selects join mode ask for approval', async () => {
@@ -128,11 +130,10 @@ describe('<LiveJoinMode />', () => {
       ),
     );
 
-    const button = screen.getByRole('button', {
-      name: /select join the discussion mode/i,
+    const button = screen.getByRole('combobox', {
+      name: 'Join the discussion mode',
     });
-    const select = within(button).getByRole('textbox');
-    expect(select).toHaveValue('Not allowed');
+    expect(within(button).getByText('Not allowed')).toBeInTheDocument();
 
     await userEvent.click(button);
     await userEvent.click(
@@ -164,9 +165,9 @@ describe('<LiveJoinMode />', () => {
         { ...mockedVideo, join_mode: JoinMode.APPROVAL },
       ),
     );
-    expect(within(button).getByRole('textbox')).toHaveValue(
-      'Accept joining the discussion after approval',
-    );
+    expect(
+      within(button).getByText('Accept joining the discussion after approval'),
+    ).toBeInTheDocument();
   });
 
   it('selects join mode forced', async () => {
@@ -188,11 +189,12 @@ describe('<LiveJoinMode />', () => {
       ),
     );
 
-    const button = screen.getByRole('button', {
-      name: /select join the discussion mode/i,
+    const button = screen.getByRole('combobox', {
+      name: 'Join the discussion mode',
     });
-    const select = within(button).getByRole('textbox');
-    expect(select).toHaveValue('Accept joining the discussion after approval');
+    expect(
+      within(button).getByText('Accept joining the discussion after approval'),
+    ).toBeInTheDocument();
 
     await userEvent.click(button);
     await userEvent.click(
@@ -224,9 +226,9 @@ describe('<LiveJoinMode />', () => {
         { ...mockedVideo, join_mode: JoinMode.FORCED },
       ),
     );
-    expect(within(button).getByRole('textbox')).toHaveValue(
-      'Everybody will join the discussion',
-    );
+    expect(
+      within(button).getByText('Everybody will join the discussion'),
+    ).toBeInTheDocument();
   });
 
   it('selects join mode denied, but backend returns an error', async () => {
@@ -245,11 +247,12 @@ describe('<LiveJoinMode />', () => {
       ),
     );
 
-    const button = screen.getByRole('button', {
-      name: /select join the discussion mode/i,
+    const button = screen.getByRole('combobox', {
+      name: 'Join the discussion mode',
     });
-    const select = within(button).getByRole('textbox');
-    expect(select).toHaveValue('Accept joining the discussion after approval');
+    expect(
+      within(button).getByText('Accept joining the discussion after approval'),
+    ).toBeInTheDocument();
 
     await userEvent.click(button);
     await userEvent.click(screen.getByText(/not allowed/i));
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LiveJoinMode/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LiveJoinMode/index.tsx
index 9362265091..d60b652b36 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LiveJoinMode/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LiveJoinMode/index.tsx
@@ -1,4 +1,5 @@
-import { Box, Select } from 'grommet';
+import { Select } from '@openfun/cunningham-react';
+import { Box } from 'grommet';
 import { FoldableItem, JoinMode, report } from 'lib-components';
 import React from 'react';
 import { toast } from 'react-hot-toast';
@@ -22,10 +23,15 @@ const messages = defineMessages({
     id: 'components.LiveJoinMode.title',
   },
   selectLabel: {
-    defaultMessage: 'Select join the discussion mode',
+    defaultMessage: 'Join the discussion mode',
     description: 'The label for the select to set join modes.',
     id: 'components.LiveJoinMode.selectLabel',
   },
+  selectLabelInfo: {
+    defaultMessage: 'Choose the mode when someone join the discussion',
+    description: 'The text under the select to set join modes.',
+    id: 'components.LiveJoinMode.selectLabelInfo',
+  },
   approval: {
     defaultMessage: 'Accept joining the discussion after approval',
     description: 'The label associated to the approval join mode.',
@@ -95,20 +101,19 @@ export const LiveJoinMode = () => {
       <Box direction="column" gap="small">
         <Select
           aria-label={intl.formatMessage(messages.selectLabel)}
+          label={intl.formatMessage(messages.selectLabel)}
           options={options}
-          labelKey="label"
-          replace={false}
-          valueKey={{ key: 'value', reduce: true }}
+          fullWidth
           value={video.join_mode}
-          onChange={({
-            option,
-          }: {
-            option: { label: string; value: JoinMode };
-          }) => {
-            videoMutation.mutate({
-              join_mode: option.value,
-            });
+          onChange={(evt) => {
+            if (evt.target.value !== video.join_mode) {
+              videoMutation.mutate({
+                join_mode: evt.target.value as JoinMode,
+              });
+            }
           }}
+          clearable={false}
+          text={intl.formatMessage(messages.selectLabelInfo)}
         />
       </Box>
     </FoldableItem>
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/LicenseSelect/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/LicenseSelect/index.spec.tsx
index 56a43a107b..d26cd78fe9 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/LicenseSelect/index.spec.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/LicenseSelect/index.spec.tsx
@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { useJwt } from 'lib-components';
@@ -55,16 +55,12 @@ describe('<LicenseSelect />', () => {
       }),
     );
 
+    const selectButton = await screen.findByRole('combobox', {
+      name: 'Select the license',
+    });
     expect(
-      screen.getByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
-      }),
-    ).not.toBeDisabled();
-    expect(
-      screen.getByRole('textbox', {
-        name: 'Select the license under which you want to publish your video, CC_BY',
-      }),
-    ).toHaveValue('Creative Common By Attribution');
+      await within(selectButton).findByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
   });
 
   it('renders the component but is disabled', async () => {
@@ -85,16 +81,12 @@ describe('<LicenseSelect />', () => {
       }),
     );
 
+    const selectButton = await screen.findByRole('combobox', {
+      name: 'Select the license',
+    });
     expect(
-      screen.getByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
-      }),
-    ).toBeDisabled();
-    expect(
-      screen.getByRole('textbox', {
-        name: 'Select the license under which you want to publish your video, CC_BY',
-      }),
-    ).toHaveValue('Creative Common By Attribution');
+      await within(selectButton).findByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
   });
 
   it('renders the component with no licenses', async () => {
@@ -110,24 +102,15 @@ describe('<LicenseSelect />', () => {
     );
 
     expect(
-      screen.queryByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
-      }),
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole('textbox', {
-        name: 'Select the license under which you want to publish your video, CC_BY',
-      }),
+      screen.queryByText('Creative Common By Attribution'),
     ).not.toBeInTheDocument();
 
-    screen.getByRole('button', {
-      name: 'Select the license under which you want to publish your video; Selected: error',
+    const selectButton = await screen.findByRole('combobox', {
+      name: 'Select the license',
     });
     expect(
-      screen.getByRole('textbox', {
-        name: 'Select the license under which you want to publish your video, error',
-      }),
-    ).toHaveValue('No license availables');
+      await within(selectButton).findByText('No license availables'),
+    ).toBeInTheDocument();
   });
 
   it('changes the selected license', async () => {
@@ -148,17 +131,14 @@ describe('<LicenseSelect />', () => {
       }),
     );
 
+    const selectButton = await screen.findByRole('combobox', {
+      name: 'Select the license',
+    });
     expect(
-      await screen.findByRole('textbox', {
-        name: /Select the license under which you want to publish your video, CC_BY/i,
-      }),
-    ).toHaveValue('Creative Common By Attribution');
+      await within(selectButton).findByText('Creative Common By Attribution'),
+    ).toBeInTheDocument();
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: 'Select the license under which you want to publish your video; Selected: CC_BY',
-      }),
-    );
+    await userEvent.click(selectButton);
 
     const allRightsReservedButtonOption = screen.getByRole('option', {
       name: 'All rights reserved',
@@ -166,13 +146,8 @@ describe('<LicenseSelect />', () => {
 
     await userEvent.click(allRightsReservedButtonOption);
 
-    screen.getByRole('button', {
-      name: 'Select the license under which you want to publish your video; Selected: NO_CC',
-    });
     expect(
-      screen.getByRole('textbox', {
-        name: 'Select the license under which you want to publish your video, NO_CC',
-      }),
-    ).toHaveValue('All rights reserved');
+      await within(selectButton).findByText('All rights reserved'),
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/LicenseSelect/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/LicenseSelect/index.tsx
index f3eda6e952..4f5ae2b94b 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/LicenseSelect/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/LicenseSelect/index.tsx
@@ -1,4 +1,4 @@
-import { Select } from 'grommet';
+import { Select } from '@openfun/cunningham-react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -7,12 +7,18 @@ import { LicenseChoice } from '@lib-video/types/SelectOptions';
 
 const messages = defineMessages({
   selectLicenseLabel: {
-    defaultMessage:
-      'Select the license under which you want to publish your video',
+    defaultMessage: 'Select the license',
     description:
       'The label of the select used for choosing the license under which the instructor wants to publish your video',
     id: 'components.LicenseSelect.selectLicenseLabel',
   },
+  selectLicenseInfo: {
+    defaultMessage:
+      'Select the license under which you want to publish your video',
+    description:
+      'The info under the select used for choosing the license under which the instructor wants to publish your video',
+    id: 'components.LicenseSelect.selectLicenseInfo',
+  },
   noLicenseAvailableLabel: {
     defaultMessage: 'No license availables',
     description: 'The label displayed in the select when there is no license.',
@@ -70,18 +76,23 @@ export const LicenseSelect = ({ disabled, onChange }: LicenseSelectProps) => {
   return (
     <Select
       aria-label={intl.formatMessage(messages.selectLicenseLabel)}
-      id="select-license-id"
-      name="license"
-      disabled={disabled}
-      labelKey="label"
-      onChange={({ option }: { option: { label: string; value: string } }) => {
-        setSelectedLicense(option);
-        onChange(option);
-      }}
+      label={intl.formatMessage(messages.selectLicenseLabel)}
       options={choices ?? [errorLicenseChoice]}
-      replace={false}
+      fullWidth
       value={selectedLicense.value}
-      valueKey={{ key: 'value', reduce: true }}
+      onChange={(evt) => {
+        if (evt.target.value !== selectedLicense.value) {
+          const choice =
+            choices?.find((option) => option.value === evt.target.value) ||
+            errorLicenseChoice;
+
+          setSelectedLicense(choice);
+          onChange(choice);
+        }
+      }}
+      clearable={false}
+      disabled={disabled}
+      text={intl.formatMessage(messages.selectLicenseInfo)}
     />
   );
 };
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/index.spec.tsx
index 0e7fd6751a..f1803384e5 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/index.spec.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/index.spec.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable testing-library/no-node-access */
 /* eslint-disable testing-library/no-container */
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import {
@@ -121,13 +121,14 @@ describe('<CreateVOD />', () => {
     screen.getByRole('textbox', { name: 'Enter title of your video here' });
     screen.getByText('Add a video or drag & drop it');
     screen.getByTestId('input-video-test-id');
-    await waitFor(() =>
-      expect(
-        screen.getByRole('textbox', {
-          name: 'Select the license under which you want to publish your video, CC_BY',
-        }),
-      ).toHaveValue('Creative Common By Attribution'),
-    );
+    const rerenderedLicense = await screen.findByRole('combobox', {
+      name: 'Select the license',
+    });
+    expect(
+      await within(rerenderedLicense).findByText(
+        'Creative Common By Attribution',
+      ),
+    ).toBeInTheDocument();
 
     const goBackButton = screen.getByRole('button', { name: 'Go back' });
     const createVideoButton = screen.getByRole('button', {
@@ -200,13 +201,14 @@ describe('<CreateVOD />', () => {
     ).toBeInTheDocument();
 
     screen.getByTestId('input-video-test-id');
-    await waitFor(() =>
-      expect(
-        screen.getByRole('textbox', {
-          name: 'Select the license under which you want to publish your video, CC_BY',
-        }),
-      ).toHaveValue('Creative Common By Attribution'),
-    );
+    const rerenderedLicense = await screen.findByRole('combobox', {
+      name: 'Select the license',
+    });
+    expect(
+      await within(rerenderedLicense).findByText(
+        'Creative Common By Attribution',
+      ),
+    ).toBeInTheDocument();
 
     const goBackButton = screen.getByRole('button', { name: 'Go back' });
     const createVideoButton = screen.getByRole('button', {
@@ -354,9 +356,14 @@ describe('<CreateVOD />', () => {
     const rerenderedTitle = screen.getByRole('textbox', {
       name: 'Enter title of your video here',
     });
-    const rerenderedLicense = screen.getByRole('textbox', {
-      name: 'Select the license under which you want to publish your video, CC_BY',
+    const rerenderedLicense = await screen.findByRole('combobox', {
+      name: 'Select the license',
     });
+    expect(
+      await within(rerenderedLicense).findByText(
+        'Creative Common By Attribution',
+      ),
+    ).toBeInTheDocument();
     const rerenderedCreateVideoButton = screen.getByRole('button', {
       name: 'Create a video',
     });
@@ -364,7 +371,7 @@ describe('<CreateVOD />', () => {
       name: 'Go back',
     });
     expect(rerenderedTitle).toBeDisabled();
-    expect(rerenderedLicense).toBeDisabled();
+    expect(rerenderedLicense.hasAttribute('disabled')).toBeTruthy();
     expect(rerenderedGoBackButton).toBeDisabled();
     expect(rerenderedCreateVideoButton).toBeDisabled();
 
@@ -607,9 +614,14 @@ describe('<CreateVOD />', () => {
     const rerenderedTitle = screen.getByRole('textbox', {
       name: 'Enter title of your video here',
     });
-    const rerenderedLicense = screen.getByRole('textbox', {
-      name: 'Select the license under which you want to publish your video, CC_BY',
+    const rerenderedLicense = await screen.findByRole('combobox', {
+      name: 'Select the license',
     });
+    expect(
+      await within(rerenderedLicense).findByText(
+        'Creative Common By Attribution',
+      ),
+    ).toBeInTheDocument();
     const rerenderedCreateVideoButton = screen.getByRole('button', {
       name: 'Create a video',
     });
@@ -618,7 +630,7 @@ describe('<CreateVOD />', () => {
     });
     screen.getByText('50 %');
     expect(rerenderedTitle).toBeDisabled();
-    expect(rerenderedLicense).toBeDisabled();
+    expect(rerenderedLicense.hasAttribute('disabled')).toBeTruthy();
     expect(rerenderedGoBackButton).toBeDisabled();
     expect(rerenderedCreateVideoButton).toBeDisabled();
 
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/index.tsx
index 6ad6e3e380..768c5aef3f 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/index.tsx
@@ -181,6 +181,7 @@ export const CreateVOD = ({
               })
             }
             value={wizardedVideo.title || ''}
+            fullWidth
           />
 
           <UploadVideoForm