diff --git a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/AccessAction.tsx b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/AccessAction.tsx
index b8f1f053..5921586b 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/AccessAction.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/AccessAction.tsx
@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, DropButton, IconOptions, Text } from '@/components';
+import { Box, DropButton, IconOptions } from '@/components';
 
 import { MailDomain, Role } from '../../domains/types';
 import { Access } from '../types';
@@ -60,7 +60,7 @@ export const AccessAction = ({
                 </span>
               }
             >
-              <Text $theme="primary">{t('Update role')}</Text>
+              {t('Update role')}
             </Button>
           )}
           {mailDomain.abilities.delete && (
@@ -77,7 +77,7 @@ export const AccessAction = ({
                 </span>
               }
             >
-              <Text $theme="primary">{t('Remove from domain')}</Text>
+              {t('Remove from domain')}
             </Button>
           )}
         </Box>
diff --git a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/AccessesGrid.tsx b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/AccessesGrid.tsx
index d2b2014b..7b6a4e54 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/AccessesGrid.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/AccessesGrid.tsx
@@ -105,11 +105,11 @@ export const AccessesGrid = ({
   }, [data?.count, pageSize, setPagesCount]);
 
   return (
-    <Card
-      $padding={{ bottom: 'small' }}
-      $margin={{ all: 'big', top: 'none' }}
-      $overflow="auto"
-      $css={`
+    <Box $padding={{ horizontal: 'big' }}>
+      <Card
+        size="full"
+        $overflow="auto"
+        $css={`
           & .c__pagination__goto {
             display: none;
           }
@@ -122,56 +122,57 @@ export const AccessesGrid = ({
             text-align: right;
           }
       `}
-      aria-label={t('Accesses list card')}
-    >
-      {error && <TextErrors causes={error.cause} />}
+        aria-label={t('Accesses list card')}
+      >
+        {error && <TextErrors causes={error.cause} />}
 
-      <DataGrid
-        columns={[
-          {
-            id: 'icon-user',
-            renderCell() {
-              return (
-                <Box $direction="row" $align="center">
-                  <IconUser
-                    aria-label={t('Access icon')}
-                    width={20}
-                    height={20}
-                    color={colorsTokens()['primary-600']}
-                  />
-                </Box>
-              );
+        <DataGrid
+          columns={[
+            {
+              id: 'icon-user',
+              renderCell() {
+                return (
+                  <Box $direction="row" $align="center">
+                    <IconUser
+                      aria-label={t('Access icon')}
+                      width={20}
+                      height={20}
+                      color={colorsTokens()['primary-500']}
+                    />
+                  </Box>
+                );
+              },
             },
-          },
-          {
-            headerName: t('Names'),
-            field: 'user.name',
-          },
-          {
-            field: 'user.email',
-            headerName: t('Emails'),
-          },
-          {
-            field: 'localizedRole',
-            headerName: t('Roles'),
-          },
-          {
-            id: 'column-actions',
-            renderCell: ({ row }) => (
-              <AccessAction
-                mailDomain={mailDomain}
-                access={row}
-                currentRole={currentRole}
-              />
-            ),
-          },
-        ]}
-        rows={accesses}
-        isLoading={isLoading}
-        pagination={pagination}
-        onSortModelChange={setSortModel}
-        sortModel={sortModel}
-      />
-    </Card>
+            {
+              headerName: t('Names'),
+              field: 'user.name',
+            },
+            {
+              field: 'user.email',
+              headerName: t('Emails'),
+            },
+            {
+              field: 'localizedRole',
+              headerName: t('Roles'),
+            },
+            {
+              id: 'column-actions',
+              renderCell: ({ row }) => (
+                <AccessAction
+                  mailDomain={mailDomain}
+                  access={row}
+                  currentRole={currentRole}
+                />
+              ),
+            },
+          ]}
+          rows={accesses}
+          isLoading={isLoading}
+          pagination={pagination}
+          onSortModelChange={setSortModel}
+          sortModel={sortModel}
+        />
+      </Card>
+    </Box>
   );
 };
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/ItemList.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/ItemList.tsx
index 43447185..b994648b 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/ItemList.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/ItemList.tsx
@@ -44,7 +44,6 @@ export const ItemList = () => {
           void fetchNextPage();
         }}
         scrollContainer={containerRef.current}
-        as="ul"
         $margin={{ top: 'none' }}
         $padding="none"
         role="listbox"
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/Panel.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/Panel.tsx
index 2ce61f6e..8302c8fb 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/Panel.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/Panel.tsx
@@ -49,7 +49,7 @@ export const Panel = () => {
             ? t(`Close the mail domains panel`)
             : t(`Open the mail domains panel`)
         }
-        $color={colorsTokens()['primary-600']}
+        $color={colorsTokens()['primary-500']}
         $css={`
           position: absolute;
           right: -1.2rem;
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/PanelActions.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/PanelActions.tsx
index 2edb32eb..6882b390 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/PanelActions.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/PanelActions.tsx
@@ -40,7 +40,7 @@ export const PanelActions = () => {
         onClick={changeOrdering}
         $radius="100%"
         $background={isSortAsc ? colorsTokens()['primary-200'] : 'transparent'}
-        $color={colorsTokens()['primary-600']}
+        $color={colorsTokens()['primary-500']}
       >
         <IconSort width={30} height={30} aria-hidden="true" />
       </BoxButton>
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/PanelItem.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/PanelItem.tsx
index 4f255e89..29dba2a4 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/PanelItem.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/PanelItem.tsx
@@ -35,7 +35,7 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
   };
 
   const activeStyle = `
-    border-right: 4px solid ${colorsTokens()['primary-600']};
+    border-right: 4px solid ${colorsTokens()['primary-500']};
     background: ${colorsTokens()['primary-400']};
      span {
       color: ${colorsTokens()['primary-text']};
@@ -92,7 +92,7 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
             />
             <Text
               $weight="bold"
-              $color={colorsTokens()['greyscale-600']}
+              $color={colorsTokens()['greyscale-500']}
               $css={`
               display: inline-block;
               width: 10rem;
diff --git a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailDomainsContent.tsx b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailDomainsContent.tsx
index 71edf217..e0a3dc72 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailDomainsContent.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailDomainsContent.tsx
@@ -99,49 +99,50 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
         showMailBoxCreationForm={setIsCreateMailboxFormVisible}
       />
 
-      <Card
-        $padding={{ bottom: 'small' }}
-        $margin={{ all: 'big', top: 'none' }}
-        $overflow="auto"
-        aria-label={t('Mailboxes list card')}
-      >
-        {error && <TextErrors causes={error.cause} />}
+      <Box $padding="small">
+        <Card
+          size="full"
+          $overflow="auto"
+          aria-label={t('Mailboxes list card')}
+        >
+          {error && <TextErrors causes={error.cause} />}
 
-        <DataGrid
-          columns={[
-            {
-              field: 'name',
-              headerName: t('Names'),
-              renderCell: ({ row }) => (
-                <Text
-                  $weight="bold"
-                  $theme="primary"
-                  $css="text-transform: capitalize;"
-                >
-                  {row.name}
-                </Text>
-              ),
-            },
-            {
-              field: 'email',
-              headerName: t('Emails'),
-            },
-          ]}
-          rows={viewMailboxes}
-          isLoading={isLoading}
-          onSortModelChange={setSortModel}
-          sortModel={sortModel}
-          pagination={{
-            ...pagination,
-            displayGoto: false,
-          }}
-          aria-label={t('Mailboxes list')}
-          hideEmptyPlaceholderImage={true}
-          emptyPlaceholderLabel={t(
-            'No mail box was created with this mail domain.',
-          )}
-        />
-      </Card>
+          <DataGrid
+            columns={[
+              {
+                field: 'name',
+                headerName: t('Names'),
+                renderCell: ({ row }) => (
+                  <Text
+                    $weight="bold"
+                    $theme="primary"
+                    $css="text-transform: capitalize;"
+                  >
+                    {row.name}
+                  </Text>
+                ),
+              },
+              {
+                field: 'email',
+                headerName: t('Emails'),
+              },
+            ]}
+            rows={viewMailboxes}
+            isLoading={isLoading}
+            onSortModelChange={setSortModel}
+            sortModel={sortModel}
+            pagination={{
+              ...pagination,
+              displayGoto: false,
+            }}
+            aria-label={t('Mailboxes list')}
+            hideEmptyPlaceholderImage={true}
+            emptyPlaceholderLabel={t(
+              'No mail box was created with this mail domain.',
+            )}
+          />
+        </Card>
+      </Box>
     </>
   );
 }
diff --git a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/ModalCreateMailbox.tsx b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/ModalCreateMailbox.tsx
index 0fe10617..de4629dc 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/ModalCreateMailbox.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/ModalCreateMailbox.tsx
@@ -262,7 +262,6 @@ const Form = ({
           </Box>
 
           <Text
-            $theme="primary"
             $size="1rem"
             $display="inline-block"
             $css={`
@@ -309,6 +308,7 @@ const FieldMailBox = ({ name, label, methods, text }: FieldMailBoxProps) => {
           state={fieldState.error ? 'error' : 'default'}
           text={fieldState?.error?.message ? fieldState.error.message : text}
           {...methods.register(name)}
+          fullWidth
         />
       )}
     />