diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts
index e12033942..f4b4b6d09 100644
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -12,6 +12,36 @@ const config = {
           'info-150': '#E5EEFA',
           'greyscale-000': '#fff',
           'greyscale-1000': '#161616',
+          'blue-400': '#7AB1E8',
+          'blue-500': '#417DC4',
+          'blue-600': '#3558A2',
+          'brown-400': '#E6BE92',
+          'brown-500': '#BD987A',
+          'brown-600': '#745B47',
+          'cyan-400': '#34BAB5',
+          'cyan-500': '#009099',
+          'cyan-600': '#006A6F',
+          'gold-400': '#FFCA00',
+          'gold-500': '#C3992A',
+          'gold-600': '#695240',
+          'green-400': '#34CB6A',
+          'green-500': '#00A95F',
+          'green-600': '#297254',
+          'olive-400': '#99C221',
+          'olive-500': '#68A532',
+          'olive-600': '#447049',
+          'orange-400': '#FF732C',
+          'orange-500': '#E4794A',
+          'orange-600': '#755348',
+          'pink-400': '#FFB7AE',
+          'pink-500': '#E18B76',
+          'pink-600': '#8D533E',
+          'purple-400': '#CE70CC',
+          'purple-500': '#A558A0',
+          'purple-600': '#6E445A',
+          'yellow-400': '#D8C634',
+          'yellow-500': '#B7A73F',
+          'yellow-600': '#66673D',
         },
         font: {
           sizes: {
diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
index e58391435..6f653cd81 100644
--- a/src/frontend/apps/impress/package.json
+++ b/src/frontend/apps/impress/package.json
@@ -23,6 +23,7 @@
     "@openfun/cunningham-react": "2.9.4",
     "@sentry/nextjs": "8.40.0",
     "@tanstack/react-query": "5.61.3",
+    "cmdk": "^1.0.4",
     "crisp-sdk-web": "1.0.25",
     "i18next": "24.0.0",
     "i18next-browser-languagedetector": "8.0.0",
@@ -37,6 +38,7 @@
     "react-intersection-observer": "9.13.1",
     "react-select": "5.8.3",
     "styled-components": "6.1.13",
+    "use-debounce": "10.0.4",
     "y-protocols": "1.0.6",
     "yjs": "*",
     "zustand": "5.0.1"
diff --git a/src/frontend/apps/impress/src/components/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/DropdownMenu.tsx
index f30f83340..07eb09aa1 100644
--- a/src/frontend/apps/impress/src/components/DropdownMenu.tsx
+++ b/src/frontend/apps/impress/src/components/DropdownMenu.tsx
@@ -40,7 +40,7 @@ export const DropdownMenu = ({
       onOpenChange={onOpenChange}
       button={
         showArrow ? (
-          <Box>
+          <Box $direction="row" $align="center">
             <div>{children}</div>
             <Icon
               $css={
diff --git a/src/frontend/apps/impress/src/components/LoadMoreText.tsx b/src/frontend/apps/impress/src/components/LoadMoreText.tsx
new file mode 100644
index 000000000..c081ac012
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/LoadMoreText.tsx
@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next';
+
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
+
+export const LoadMoreText = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      $direction="row"
+      $align="center"
+      $gap="0.4rem"
+      $padding={{ horizontal: '2xs', vertical: 'sm' }}
+    >
+      <Icon
+        $theme="primary"
+        $variation="800"
+        iconName="arrow_downward"
+        $size="md"
+      />
+      <Text $theme="primary" $variation="800">
+        {t('Load more')}
+      </Text>
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/components/SimpleLoader.tsx b/src/frontend/apps/impress/src/components/SimpleLoader.tsx
new file mode 100644
index 000000000..ed3cd05ba
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/SimpleLoader.tsx
@@ -0,0 +1,48 @@
+import { css } from 'styled-components';
+
+import { Box } from './Box';
+
+type Props = {
+  size?: 'small' | 'medium' | 'large';
+};
+export const SimpleLoader = ({ size = 'medium' }: Props) => {
+  return (
+    <Box
+      className={size}
+      $css={css`
+        display: inline-block;
+        border: 3px solid var(--c--theme--colors--primary-300);
+        border-radius: 50%;
+        border-top-color: var(--c--theme--colors--primary-600);
+        animation: spin 1s ease-in-out infinite;
+        -webkit-animation: spin 1s ease-in-out infinite;
+
+        &.small {
+          width: 24px;
+          height: 24px;
+        }
+
+        &.medium {
+          width: 38px;
+          height: 38px;
+        }
+
+        &.large {
+          width: 50px;
+          height: 50px;
+        }
+
+        @keyframes spin {
+          to {
+            -webkit-transform: rotate(360deg);
+          }
+        }
+        @-webkit-keyframes spin {
+          to {
+            -webkit-transform: rotate(360deg);
+          }
+        }
+      `}
+    />
+  );
+};
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx
new file mode 100644
index 000000000..26b610666
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx
@@ -0,0 +1,88 @@
+import { Command } from 'cmdk';
+import { ReactNode, useRef } from 'react';
+
+import { Box } from '../Box';
+
+import { QuickSearchGroup } from './QuickSearchGroup';
+import { QuickSearchInput } from './QuickSearchInput';
+import { QuickSearchStyle } from './QuickSearchStyle';
+
+export type QuickSearchAction = {
+  onSelect?: () => void;
+  content: ReactNode;
+};
+
+export type QuickSearchData<T> = {
+  groupName: string;
+  elements: T[];
+  emptyString?: string;
+  startActions?: QuickSearchAction[];
+  endActions?: QuickSearchAction[];
+  showWhenEmpty?: boolean;
+};
+
+export type QuickSearchProps<T> = {
+  data: QuickSearchData<T>[];
+  onFilter?: (str: string) => void;
+  renderElement: (element: T) => ReactNode;
+  onSelect?: (element: T) => void;
+  inputValue?: string;
+  inputContent?: ReactNode;
+  showInput?: boolean;
+  loading?: boolean;
+  label?: string;
+  placeholder?: string;
+  children?: ReactNode;
+};
+
+export const QuickSearch = <T,>({
+  onSelect,
+  onFilter,
+  inputContent,
+  inputValue,
+  loading,
+  showInput = true,
+  data,
+  renderElement,
+  label,
+  placeholder,
+  children,
+}: QuickSearchProps<T>) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <QuickSearchStyle />
+      <div className="quick-search-container">
+        <Command label={label} shouldFilter={false} ref={ref}>
+          {showInput && (
+            <QuickSearchInput
+              loading={loading}
+              inputValue={inputValue}
+              onFilter={onFilter}
+              placeholder={placeholder}
+            >
+              {inputContent}
+            </QuickSearchInput>
+          )}
+          <Command.List>
+            <Box>
+              {!loading &&
+                data.map((group) => {
+                  return (
+                    <QuickSearchGroup
+                      key={group.groupName}
+                      group={group}
+                      onSelect={onSelect}
+                      renderElement={renderElement}
+                    />
+                  );
+                })}
+              {children}
+            </Box>
+          </Command.List>
+        </Command>
+      </div>
+    </>
+  );
+};
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
new file mode 100644
index 000000000..2cc70b657
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
@@ -0,0 +1,61 @@
+import { Command } from 'cmdk';
+
+import { QuickSearchData, QuickSearchProps } from './QuickSearch';
+import { QuickSearchItem } from './QuickSearchItem';
+
+type Props<T> = {
+  group: QuickSearchData<T>;
+  onSelect?: QuickSearchProps<T>['onSelect'];
+  renderElement: QuickSearchProps<T>['renderElement'];
+};
+
+export const QuickSearchGroup = <T,>({
+  group,
+  onSelect,
+  renderElement,
+}: Props<T>) => {
+  return (
+    <Command.Group
+      key={group.groupName}
+      heading={group.groupName}
+      forceMount={false}
+    >
+      {group.startActions?.map((action, index) => {
+        return (
+          <QuickSearchItem
+            key={`${group.groupName}-action-${index}`}
+            onSelect={action.onSelect}
+          >
+            {action.content}
+          </QuickSearchItem>
+        );
+      })}
+      {group.elements.map((groupElement, index) => {
+        return (
+          <QuickSearchItem
+            key={`${group.groupName}-element-${index}`}
+            onSelect={() => {
+              console.log('onSelect', groupElement);
+              onSelect?.(groupElement);
+            }}
+          >
+            {renderElement(groupElement)}
+          </QuickSearchItem>
+        );
+      })}
+      {group.endActions?.map((action, index) => {
+        return (
+          <QuickSearchItem
+            key={`${group.groupName}-action-${index}`}
+            onSelect={action.onSelect}
+          >
+            {action.content}
+          </QuickSearchItem>
+        );
+      })}
+      {group.emptyString && group.elements.length === 0 && (
+        <span className="ml-b clr-greyscale-500">{group.emptyString}</span>
+      )}
+    </Command.Group>
+  );
+};
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
new file mode 100644
index 000000000..374cfd1a7
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
@@ -0,0 +1,64 @@
+import { Loader } from '@openfun/cunningham-react';
+import { Command } from 'cmdk';
+import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { HorizontalSeparator } from '@/components/separators/HorizontalSeparator';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+
+type Props = {
+  loading?: boolean;
+  inputValue?: string;
+  onFilter?: (str: string) => void;
+  placeholder?: string;
+  children?: ReactNode;
+};
+export const QuickSearchInput = ({
+  loading,
+  inputValue,
+  onFilter,
+  placeholder,
+  children,
+}: Props) => {
+  const { t } = useTranslation();
+  const { spacingsTokens } = useCunninghamTheme();
+  const spacing = spacingsTokens();
+
+  if (children) {
+    return (
+      <>
+        {children}
+        <HorizontalSeparator />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Box
+        $direction="row"
+        $align="center"
+        $gap={spacing['2xs']}
+        $padding={{ horizontal: 'base' }}
+      >
+        {!loading && <Icon iconName="search" $variation="400" />}
+        {loading && (
+          <div>
+            <Loader size="small" />
+          </div>
+        )}
+        <Command.Input
+          /* eslint-disable-next-line jsx-a11y/no-autofocus */
+          autoFocus={true}
+          value={inputValue}
+          placeholder={placeholder ?? t('Search')}
+          onValueChange={onFilter}
+        />
+      </Box>
+      <HorizontalSeparator />
+    </>
+  );
+};
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchItem.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchItem.tsx
new file mode 100644
index 000000000..3ede83118
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchItem.tsx
@@ -0,0 +1,12 @@
+import { Command } from 'cmdk';
+import { PropsWithChildren } from 'react';
+
+type Props = {
+  onSelect?: (value: string) => void;
+};
+export const QuickSearchItem = ({
+  children,
+  onSelect,
+}: PropsWithChildren<Props>) => {
+  return <Command.Item onSelect={onSelect}>{children}</Command.Item>;
+};
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
new file mode 100644
index 000000000..de6a574cc
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
@@ -0,0 +1,177 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const QuickSearchStyle = createGlobalStyle`
+  .quick-search-container {
+    [cmdk-root] {
+        width: 100%;
+        background: #ffffff;
+        border-radius: 12px;
+        overflow: hidden;
+
+        transition: transform 100ms ease;
+        outline: none;
+
+        .dark & {
+        background: rgba(22, 22, 22, 0.7);
+        }
+  }
+
+  [cmdk-input] {
+    border: none;
+    width: 100%;
+    font-size: 17px;
+    padding: 8px;
+    background: white;
+    outline: none;
+    
+    color: var(--c--theme--colors--greyscale-700);
+
+    border-radius: 0;
+
+    &::placeholder {
+      color: var(--c--theme--colors--greyscale-300);
+    }
+  }
+
+  [cmdk-vercel-badge] {
+    height: 20px;
+    background: var(--c--theme--colors--greyscale-700);
+    display: inline-flex;
+    align-items: center;
+    padding: 0 8px;
+    font-size: 12px;
+    color: var(--c--theme--colors--greyscale-500);
+    border-radius: 4px;
+    margin: 4px 0 4px 4px;
+    user-select: none;
+    text-transform: capitalize;
+    font-weight: 500;
+  }
+
+  [cmdk-item] {
+    content-visibility: auto;
+
+    cursor: pointer;
+    
+    
+    border-radius: var(--c--theme--spacings--xs);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    /* padding: var(--c--theme--spacings--2xs) ; */
+
+    user-select: none;
+    will-change: background, color;
+    transition: all 150ms ease;
+    transition-property: none;
+
+    &[data-selected='true'] {
+      background: var(--c--theme--colors--greyscale-100);
+    }
+
+    &[data-disabled='true'] {
+      color: var(--c--theme--colors--greyscale-500);
+      cursor: not-allowed;
+    }
+
+    & + [cmdk-item] {
+      margin-top: 4px;
+    }
+  }
+
+  [cmdk-list] {
+    height: 500px;
+    padding: 0 var(--c--theme--spacings--sm) var(--c--theme--spacings--sm)
+      var(--c--theme--spacings--sm);
+    max-height: 700px;
+    
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    transition: 100ms ease;
+    transition-property: height;
+  }
+
+  [cmdk-vercel-shortcuts] {
+    display: flex;
+    margin-left: auto;
+    gap: 8px;
+
+    kbd {
+      font-size: 12px;
+      min-width: 20px;
+      padding: 4px;
+      height: 20px;
+      border-radius: 4px;
+      color: white;
+      background: var(--c--theme--colors--greyscale-500);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+    }
+  }
+
+  [cmdk-separator] {
+    height: 1px;
+    width: 100%;
+    background: var(--c--theme--colors--greyscale-500);
+    margin: 4px 0;
+  }
+
+  *:not([hidden]) + [cmdk-group] {
+    margin-top: 8px;
+  }
+
+  [cmdk-group-heading] {
+    user-select: none;
+    font-size: var(--c--theme--font--sizes--sm);
+    color: var(--c--theme--colors--greyscale-500);
+    font-weight: bold;
+
+    display: flex;
+    align-items: center;
+    margin: var(--c--theme--spacings--200W) 0;
+  }
+
+  [cmdk-empty] {
+  }
+}
+
+.inputContainer {
+  display: flex;
+  padding: 0 10px;
+  gap: 8px;
+  align-items: center;
+
+  .inputIcon {
+    color: var(--c--theme--colors--greyscale-400);
+  }
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.c__modal__scroller:has(.quick-search-container),
+.c__modal__scroller:has(.noPadding) {
+  padding: 0 !important;
+
+  .c__modal__close .c__button {
+    right: 5px;
+    top: 5px;
+    padding: 1.5rem 1rem;
+  }
+
+  .c__modal__title {
+    font-size: var(--c--theme--font--sizes--xs);
+    
+    padding: var(--c--theme--spacings--200W);
+    margin-bottom: 0;
+  }
+}
+
+
+`;
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
index a15bdb88b..c0a8c3575 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
@@ -76,6 +76,36 @@
   --c--theme--colors--primary-950: #1b1b35;
   --c--theme--colors--info-150: #e5eefa;
   --c--theme--colors--greyscale-1000: #161616;
+  --c--theme--colors--blue-400: #7ab1e8;
+  --c--theme--colors--blue-500: #417dc4;
+  --c--theme--colors--blue-600: #3558a2;
+  --c--theme--colors--brown-400: #e6be92;
+  --c--theme--colors--brown-500: #bd987a;
+  --c--theme--colors--brown-600: #745b47;
+  --c--theme--colors--cyan-400: #34bab5;
+  --c--theme--colors--cyan-500: #009099;
+  --c--theme--colors--cyan-600: #006a6f;
+  --c--theme--colors--gold-400: #ffca00;
+  --c--theme--colors--gold-500: #c3992a;
+  --c--theme--colors--gold-600: #695240;
+  --c--theme--colors--green-400: #34cb6a;
+  --c--theme--colors--green-500: #00a95f;
+  --c--theme--colors--green-600: #297254;
+  --c--theme--colors--olive-400: #99c221;
+  --c--theme--colors--olive-500: #68a532;
+  --c--theme--colors--olive-600: #447049;
+  --c--theme--colors--orange-400: #ff732c;
+  --c--theme--colors--orange-500: #e4794a;
+  --c--theme--colors--orange-600: #755348;
+  --c--theme--colors--pink-400: #ffb7ae;
+  --c--theme--colors--pink-500: #e18b76;
+  --c--theme--colors--pink-600: #8d533e;
+  --c--theme--colors--purple-400: #ce70cc;
+  --c--theme--colors--purple-500: #a558a0;
+  --c--theme--colors--purple-600: #6e445a;
+  --c--theme--colors--yellow-400: #d8c634;
+  --c--theme--colors--yellow-500: #b7a73f;
+  --c--theme--colors--yellow-600: #66673d;
   --c--theme--font--sizes--h1: 2rem;
   --c--theme--font--sizes--h2: 1.75rem;
   --c--theme--font--sizes--h3: 1.5rem;
@@ -312,7 +342,6 @@
   --c--components--button--disabled--background--color: #b3cef0;
   --c--components--la-gauffre--activated: false;
 }
-
 .cunningham-theme--dark {
   --c--theme--colors--greyscale-100: #182536;
   --c--theme--colors--greyscale-200: #303c4b;
@@ -356,12 +385,11 @@
   --c--theme--colors--danger-300: #f09898;
   --c--theme--colors--danger-400: #ed8585;
   --c--theme--colors--danger-500: #e96666;
-  --c--theme--colors--danger-600: #d66;
+  --c--theme--colors--danger-600: #dd6666;
   --c--theme--colors--danger-700: #c36666;
   --c--theme--colors--danger-800: #ae6666;
   --c--theme--colors--danger-900: #9d6666;
 }
-
 .cunningham-theme--dsfr {
   --c--theme--colors--card-border: #e5e5e5;
   --c--theme--colors--primary-text: #000091;
@@ -395,7 +423,7 @@
   --c--theme--colors--greyscale-350: #ddd;
   --c--theme--colors--greyscale-400: #929292;
   --c--theme--colors--greyscale-500: #7c7c7c;
-  --c--theme--colors--greyscale-600: #666;
+  --c--theme--colors--greyscale-600: #666666;
   --c--theme--colors--greyscale-700: #3a3a3a;
   --c--theme--colors--greyscale-750: #353535;
   --c--theme--colors--greyscale-800: #2a2a2a;
@@ -442,12 +470,12 @@
   --c--theme--colors--danger-700: #642727;
   --c--theme--colors--danger-800: #412121;
   --c--theme--colors--danger-900: #3a1c1c;
-  --c--theme--font--families--accent: marianne;
-  --c--theme--font--families--base: marianne;
+  --c--theme--font--families--accent: Marianne;
+  --c--theme--font--families--base: Marianne;
   --c--theme--logo--src: /assets/logo-gouv.svg;
   --c--theme--logo--widthHeader: 110px;
   --c--theme--logo--widthFooter: 220px;
-  --c--theme--logo--alt: gouvernement logo;
+  --c--theme--logo--alt: Gouvernement Logo;
   --c--components--alert--border-radius: 0;
   --c--components--button--medium-height: 48px;
   --c--components--button--border-radius: 4px;
@@ -555,1735 +583,1486 @@
   --c--components--forms-textarea--border-radius: 0;
   --c--components--la-gauffre--activated: true;
 }
-
 .clr-secondary-text {
   color: var(--c--theme--colors--secondary-text);
 }
-
 .clr-secondary-100 {
   color: var(--c--theme--colors--secondary-100);
 }
-
 .clr-secondary-200 {
   color: var(--c--theme--colors--secondary-200);
 }
-
 .clr-secondary-300 {
   color: var(--c--theme--colors--secondary-300);
 }
-
 .clr-secondary-400 {
   color: var(--c--theme--colors--secondary-400);
 }
-
 .clr-secondary-500 {
   color: var(--c--theme--colors--secondary-500);
 }
-
 .clr-secondary-600 {
   color: var(--c--theme--colors--secondary-600);
 }
-
 .clr-secondary-700 {
   color: var(--c--theme--colors--secondary-700);
 }
-
 .clr-secondary-800 {
   color: var(--c--theme--colors--secondary-800);
 }
-
 .clr-secondary-900 {
   color: var(--c--theme--colors--secondary-900);
 }
-
 .clr-info-text {
   color: var(--c--theme--colors--info-text);
 }
-
 .clr-info-100 {
   color: var(--c--theme--colors--info-100);
 }
-
 .clr-info-200 {
   color: var(--c--theme--colors--info-200);
 }
-
 .clr-info-300 {
   color: var(--c--theme--colors--info-300);
 }
-
 .clr-info-400 {
   color: var(--c--theme--colors--info-400);
 }
-
 .clr-info-500 {
   color: var(--c--theme--colors--info-500);
 }
-
 .clr-info-600 {
   color: var(--c--theme--colors--info-600);
 }
-
 .clr-info-700 {
   color: var(--c--theme--colors--info-700);
 }
-
 .clr-info-800 {
   color: var(--c--theme--colors--info-800);
 }
-
 .clr-info-900 {
   color: var(--c--theme--colors--info-900);
 }
-
 .clr-greyscale-100 {
   color: var(--c--theme--colors--greyscale-100);
 }
-
 .clr-greyscale-200 {
   color: var(--c--theme--colors--greyscale-200);
 }
-
 .clr-greyscale-300 {
   color: var(--c--theme--colors--greyscale-300);
 }
-
 .clr-greyscale-400 {
   color: var(--c--theme--colors--greyscale-400);
 }
-
 .clr-greyscale-500 {
   color: var(--c--theme--colors--greyscale-500);
 }
-
 .clr-greyscale-600 {
   color: var(--c--theme--colors--greyscale-600);
 }
-
 .clr-greyscale-700 {
   color: var(--c--theme--colors--greyscale-700);
 }
-
 .clr-greyscale-800 {
   color: var(--c--theme--colors--greyscale-800);
 }
-
 .clr-greyscale-900 {
   color: var(--c--theme--colors--greyscale-900);
 }
-
 .clr-greyscale-000 {
   color: var(--c--theme--colors--greyscale-000);
 }
-
 .clr-primary-100 {
   color: var(--c--theme--colors--primary-100);
 }
-
 .clr-primary-200 {
   color: var(--c--theme--colors--primary-200);
 }
-
 .clr-primary-300 {
   color: var(--c--theme--colors--primary-300);
 }
-
 .clr-primary-400 {
   color: var(--c--theme--colors--primary-400);
 }
-
 .clr-primary-500 {
   color: var(--c--theme--colors--primary-500);
 }
-
 .clr-primary-600 {
   color: var(--c--theme--colors--primary-600);
 }
-
 .clr-primary-700 {
   color: var(--c--theme--colors--primary-700);
 }
-
 .clr-primary-800 {
   color: var(--c--theme--colors--primary-800);
 }
-
 .clr-primary-900 {
   color: var(--c--theme--colors--primary-900);
 }
-
 .clr-success-100 {
   color: var(--c--theme--colors--success-100);
 }
-
 .clr-success-200 {
   color: var(--c--theme--colors--success-200);
 }
-
 .clr-success-300 {
   color: var(--c--theme--colors--success-300);
 }
-
 .clr-success-400 {
   color: var(--c--theme--colors--success-400);
 }
-
 .clr-success-500 {
   color: var(--c--theme--colors--success-500);
 }
-
 .clr-success-600 {
   color: var(--c--theme--colors--success-600);
 }
-
 .clr-success-700 {
   color: var(--c--theme--colors--success-700);
 }
-
 .clr-success-800 {
   color: var(--c--theme--colors--success-800);
 }
-
 .clr-success-900 {
   color: var(--c--theme--colors--success-900);
 }
-
 .clr-warning-100 {
   color: var(--c--theme--colors--warning-100);
 }
-
 .clr-warning-200 {
   color: var(--c--theme--colors--warning-200);
 }
-
 .clr-warning-300 {
   color: var(--c--theme--colors--warning-300);
 }
-
 .clr-warning-400 {
   color: var(--c--theme--colors--warning-400);
 }
-
 .clr-warning-500 {
   color: var(--c--theme--colors--warning-500);
 }
-
 .clr-warning-600 {
   color: var(--c--theme--colors--warning-600);
 }
-
 .clr-warning-700 {
   color: var(--c--theme--colors--warning-700);
 }
-
 .clr-warning-800 {
   color: var(--c--theme--colors--warning-800);
 }
-
 .clr-warning-900 {
   color: var(--c--theme--colors--warning-900);
 }
-
 .clr-danger-100 {
   color: var(--c--theme--colors--danger-100);
 }
-
 .clr-danger-200 {
   color: var(--c--theme--colors--danger-200);
 }
-
 .clr-danger-300 {
   color: var(--c--theme--colors--danger-300);
 }
-
 .clr-danger-400 {
   color: var(--c--theme--colors--danger-400);
 }
-
 .clr-danger-500 {
   color: var(--c--theme--colors--danger-500);
 }
-
 .clr-danger-600 {
   color: var(--c--theme--colors--danger-600);
 }
-
 .clr-danger-700 {
   color: var(--c--theme--colors--danger-700);
 }
-
 .clr-danger-800 {
   color: var(--c--theme--colors--danger-800);
 }
-
 .clr-danger-900 {
   color: var(--c--theme--colors--danger-900);
 }
-
 .clr-primary-text {
   color: var(--c--theme--colors--primary-text);
 }
-
 .clr-success-text {
   color: var(--c--theme--colors--success-text);
 }
-
 .clr-warning-text {
   color: var(--c--theme--colors--warning-text);
 }
-
 .clr-danger-text {
   color: var(--c--theme--colors--danger-text);
 }
-
 .clr-card-border {
   color: var(--c--theme--colors--card-border);
 }
-
 .clr-primary-bg {
   color: var(--c--theme--colors--primary-bg);
 }
-
 .clr-primary-050 {
   color: var(--c--theme--colors--primary-050);
 }
-
 .clr-primary-150 {
   color: var(--c--theme--colors--primary-150);
 }
-
 .clr-primary-950 {
   color: var(--c--theme--colors--primary-950);
 }
-
 .clr-info-150 {
   color: var(--c--theme--colors--info-150);
 }
-
 .clr-greyscale-1000 {
   color: var(--c--theme--colors--greyscale-1000);
 }
-
+.clr-blue-400 {
+  color: var(--c--theme--colors--blue-400);
+}
+.clr-blue-500 {
+  color: var(--c--theme--colors--blue-500);
+}
+.clr-blue-600 {
+  color: var(--c--theme--colors--blue-600);
+}
+.clr-brown-400 {
+  color: var(--c--theme--colors--brown-400);
+}
+.clr-brown-500 {
+  color: var(--c--theme--colors--brown-500);
+}
+.clr-brown-600 {
+  color: var(--c--theme--colors--brown-600);
+}
+.clr-cyan-400 {
+  color: var(--c--theme--colors--cyan-400);
+}
+.clr-cyan-500 {
+  color: var(--c--theme--colors--cyan-500);
+}
+.clr-cyan-600 {
+  color: var(--c--theme--colors--cyan-600);
+}
+.clr-gold-400 {
+  color: var(--c--theme--colors--gold-400);
+}
+.clr-gold-500 {
+  color: var(--c--theme--colors--gold-500);
+}
+.clr-gold-600 {
+  color: var(--c--theme--colors--gold-600);
+}
+.clr-green-400 {
+  color: var(--c--theme--colors--green-400);
+}
+.clr-green-500 {
+  color: var(--c--theme--colors--green-500);
+}
+.clr-green-600 {
+  color: var(--c--theme--colors--green-600);
+}
+.clr-olive-400 {
+  color: var(--c--theme--colors--olive-400);
+}
+.clr-olive-500 {
+  color: var(--c--theme--colors--olive-500);
+}
+.clr-olive-600 {
+  color: var(--c--theme--colors--olive-600);
+}
+.clr-orange-400 {
+  color: var(--c--theme--colors--orange-400);
+}
+.clr-orange-500 {
+  color: var(--c--theme--colors--orange-500);
+}
+.clr-orange-600 {
+  color: var(--c--theme--colors--orange-600);
+}
+.clr-pink-400 {
+  color: var(--c--theme--colors--pink-400);
+}
+.clr-pink-500 {
+  color: var(--c--theme--colors--pink-500);
+}
+.clr-pink-600 {
+  color: var(--c--theme--colors--pink-600);
+}
+.clr-purple-400 {
+  color: var(--c--theme--colors--purple-400);
+}
+.clr-purple-500 {
+  color: var(--c--theme--colors--purple-500);
+}
+.clr-purple-600 {
+  color: var(--c--theme--colors--purple-600);
+}
+.clr-yellow-400 {
+  color: var(--c--theme--colors--yellow-400);
+}
+.clr-yellow-500 {
+  color: var(--c--theme--colors--yellow-500);
+}
+.clr-yellow-600 {
+  color: var(--c--theme--colors--yellow-600);
+}
 .bg-secondary-text {
   background-color: var(--c--theme--colors--secondary-text);
 }
-
 .bg-secondary-100 {
   background-color: var(--c--theme--colors--secondary-100);
 }
-
 .bg-secondary-200 {
   background-color: var(--c--theme--colors--secondary-200);
 }
-
 .bg-secondary-300 {
   background-color: var(--c--theme--colors--secondary-300);
 }
-
 .bg-secondary-400 {
   background-color: var(--c--theme--colors--secondary-400);
 }
-
 .bg-secondary-500 {
   background-color: var(--c--theme--colors--secondary-500);
 }
-
 .bg-secondary-600 {
   background-color: var(--c--theme--colors--secondary-600);
 }
-
 .bg-secondary-700 {
   background-color: var(--c--theme--colors--secondary-700);
 }
-
 .bg-secondary-800 {
   background-color: var(--c--theme--colors--secondary-800);
 }
-
 .bg-secondary-900 {
   background-color: var(--c--theme--colors--secondary-900);
 }
-
 .bg-info-text {
   background-color: var(--c--theme--colors--info-text);
 }
-
 .bg-info-100 {
   background-color: var(--c--theme--colors--info-100);
 }
-
 .bg-info-200 {
   background-color: var(--c--theme--colors--info-200);
 }
-
 .bg-info-300 {
   background-color: var(--c--theme--colors--info-300);
 }
-
 .bg-info-400 {
   background-color: var(--c--theme--colors--info-400);
 }
-
 .bg-info-500 {
   background-color: var(--c--theme--colors--info-500);
 }
-
 .bg-info-600 {
   background-color: var(--c--theme--colors--info-600);
 }
-
 .bg-info-700 {
   background-color: var(--c--theme--colors--info-700);
 }
-
 .bg-info-800 {
   background-color: var(--c--theme--colors--info-800);
 }
-
 .bg-info-900 {
   background-color: var(--c--theme--colors--info-900);
 }
-
 .bg-greyscale-100 {
   background-color: var(--c--theme--colors--greyscale-100);
 }
-
 .bg-greyscale-200 {
   background-color: var(--c--theme--colors--greyscale-200);
 }
-
 .bg-greyscale-300 {
   background-color: var(--c--theme--colors--greyscale-300);
 }
-
 .bg-greyscale-400 {
   background-color: var(--c--theme--colors--greyscale-400);
 }
-
 .bg-greyscale-500 {
   background-color: var(--c--theme--colors--greyscale-500);
 }
-
 .bg-greyscale-600 {
   background-color: var(--c--theme--colors--greyscale-600);
 }
-
 .bg-greyscale-700 {
   background-color: var(--c--theme--colors--greyscale-700);
 }
-
 .bg-greyscale-800 {
   background-color: var(--c--theme--colors--greyscale-800);
 }
-
 .bg-greyscale-900 {
   background-color: var(--c--theme--colors--greyscale-900);
 }
-
 .bg-greyscale-000 {
   background-color: var(--c--theme--colors--greyscale-000);
 }
-
 .bg-primary-100 {
   background-color: var(--c--theme--colors--primary-100);
 }
-
 .bg-primary-200 {
   background-color: var(--c--theme--colors--primary-200);
 }
-
 .bg-primary-300 {
   background-color: var(--c--theme--colors--primary-300);
 }
-
 .bg-primary-400 {
   background-color: var(--c--theme--colors--primary-400);
 }
-
 .bg-primary-500 {
   background-color: var(--c--theme--colors--primary-500);
 }
-
 .bg-primary-600 {
   background-color: var(--c--theme--colors--primary-600);
 }
-
 .bg-primary-700 {
   background-color: var(--c--theme--colors--primary-700);
 }
-
 .bg-primary-800 {
   background-color: var(--c--theme--colors--primary-800);
 }
-
 .bg-primary-900 {
   background-color: var(--c--theme--colors--primary-900);
 }
-
 .bg-success-100 {
   background-color: var(--c--theme--colors--success-100);
 }
-
 .bg-success-200 {
   background-color: var(--c--theme--colors--success-200);
 }
-
 .bg-success-300 {
   background-color: var(--c--theme--colors--success-300);
 }
-
 .bg-success-400 {
   background-color: var(--c--theme--colors--success-400);
 }
-
 .bg-success-500 {
   background-color: var(--c--theme--colors--success-500);
 }
-
 .bg-success-600 {
   background-color: var(--c--theme--colors--success-600);
 }
-
 .bg-success-700 {
   background-color: var(--c--theme--colors--success-700);
 }
-
 .bg-success-800 {
   background-color: var(--c--theme--colors--success-800);
 }
-
 .bg-success-900 {
   background-color: var(--c--theme--colors--success-900);
 }
-
 .bg-warning-100 {
   background-color: var(--c--theme--colors--warning-100);
 }
-
 .bg-warning-200 {
   background-color: var(--c--theme--colors--warning-200);
 }
-
 .bg-warning-300 {
   background-color: var(--c--theme--colors--warning-300);
 }
-
 .bg-warning-400 {
   background-color: var(--c--theme--colors--warning-400);
 }
-
 .bg-warning-500 {
   background-color: var(--c--theme--colors--warning-500);
 }
-
 .bg-warning-600 {
   background-color: var(--c--theme--colors--warning-600);
 }
-
 .bg-warning-700 {
   background-color: var(--c--theme--colors--warning-700);
 }
-
 .bg-warning-800 {
   background-color: var(--c--theme--colors--warning-800);
 }
-
 .bg-warning-900 {
   background-color: var(--c--theme--colors--warning-900);
 }
-
 .bg-danger-100 {
   background-color: var(--c--theme--colors--danger-100);
 }
-
 .bg-danger-200 {
   background-color: var(--c--theme--colors--danger-200);
 }
-
 .bg-danger-300 {
   background-color: var(--c--theme--colors--danger-300);
 }
-
 .bg-danger-400 {
   background-color: var(--c--theme--colors--danger-400);
 }
-
 .bg-danger-500 {
   background-color: var(--c--theme--colors--danger-500);
 }
-
 .bg-danger-600 {
   background-color: var(--c--theme--colors--danger-600);
 }
-
 .bg-danger-700 {
   background-color: var(--c--theme--colors--danger-700);
 }
-
 .bg-danger-800 {
   background-color: var(--c--theme--colors--danger-800);
 }
-
 .bg-danger-900 {
   background-color: var(--c--theme--colors--danger-900);
 }
-
 .bg-primary-text {
   background-color: var(--c--theme--colors--primary-text);
 }
-
 .bg-success-text {
   background-color: var(--c--theme--colors--success-text);
 }
-
 .bg-warning-text {
   background-color: var(--c--theme--colors--warning-text);
 }
-
 .bg-danger-text {
   background-color: var(--c--theme--colors--danger-text);
 }
-
 .bg-card-border {
   background-color: var(--c--theme--colors--card-border);
 }
-
 .bg-primary-bg {
   background-color: var(--c--theme--colors--primary-bg);
 }
-
 .bg-primary-050 {
   background-color: var(--c--theme--colors--primary-050);
 }
-
 .bg-primary-150 {
   background-color: var(--c--theme--colors--primary-150);
 }
-
 .bg-primary-950 {
   background-color: var(--c--theme--colors--primary-950);
 }
-
 .bg-info-150 {
   background-color: var(--c--theme--colors--info-150);
 }
-
 .bg-greyscale-1000 {
   background-color: var(--c--theme--colors--greyscale-1000);
 }
-
+.bg-blue-400 {
+  background-color: var(--c--theme--colors--blue-400);
+}
+.bg-blue-500 {
+  background-color: var(--c--theme--colors--blue-500);
+}
+.bg-blue-600 {
+  background-color: var(--c--theme--colors--blue-600);
+}
+.bg-brown-400 {
+  background-color: var(--c--theme--colors--brown-400);
+}
+.bg-brown-500 {
+  background-color: var(--c--theme--colors--brown-500);
+}
+.bg-brown-600 {
+  background-color: var(--c--theme--colors--brown-600);
+}
+.bg-cyan-400 {
+  background-color: var(--c--theme--colors--cyan-400);
+}
+.bg-cyan-500 {
+  background-color: var(--c--theme--colors--cyan-500);
+}
+.bg-cyan-600 {
+  background-color: var(--c--theme--colors--cyan-600);
+}
+.bg-gold-400 {
+  background-color: var(--c--theme--colors--gold-400);
+}
+.bg-gold-500 {
+  background-color: var(--c--theme--colors--gold-500);
+}
+.bg-gold-600 {
+  background-color: var(--c--theme--colors--gold-600);
+}
+.bg-green-400 {
+  background-color: var(--c--theme--colors--green-400);
+}
+.bg-green-500 {
+  background-color: var(--c--theme--colors--green-500);
+}
+.bg-green-600 {
+  background-color: var(--c--theme--colors--green-600);
+}
+.bg-olive-400 {
+  background-color: var(--c--theme--colors--olive-400);
+}
+.bg-olive-500 {
+  background-color: var(--c--theme--colors--olive-500);
+}
+.bg-olive-600 {
+  background-color: var(--c--theme--colors--olive-600);
+}
+.bg-orange-400 {
+  background-color: var(--c--theme--colors--orange-400);
+}
+.bg-orange-500 {
+  background-color: var(--c--theme--colors--orange-500);
+}
+.bg-orange-600 {
+  background-color: var(--c--theme--colors--orange-600);
+}
+.bg-pink-400 {
+  background-color: var(--c--theme--colors--pink-400);
+}
+.bg-pink-500 {
+  background-color: var(--c--theme--colors--pink-500);
+}
+.bg-pink-600 {
+  background-color: var(--c--theme--colors--pink-600);
+}
+.bg-purple-400 {
+  background-color: var(--c--theme--colors--purple-400);
+}
+.bg-purple-500 {
+  background-color: var(--c--theme--colors--purple-500);
+}
+.bg-purple-600 {
+  background-color: var(--c--theme--colors--purple-600);
+}
+.bg-yellow-400 {
+  background-color: var(--c--theme--colors--yellow-400);
+}
+.bg-yellow-500 {
+  background-color: var(--c--theme--colors--yellow-500);
+}
+.bg-yellow-600 {
+  background-color: var(--c--theme--colors--yellow-600);
+}
 .fw-thin {
   font-weight: var(--c--theme--font--weights--thin);
 }
-
 .fw-light {
   font-weight: var(--c--theme--font--weights--light);
 }
-
 .fw-regular {
   font-weight: var(--c--theme--font--weights--regular);
 }
-
 .fw-medium {
   font-weight: var(--c--theme--font--weights--medium);
 }
-
 .fw-bold {
   font-weight: var(--c--theme--font--weights--bold);
 }
-
 .fw-extrabold {
   font-weight: var(--c--theme--font--weights--extrabold);
 }
-
 .fw-black {
   font-weight: var(--c--theme--font--weights--black);
 }
-
 .fs-h1 {
   font-size: var(--c--theme--font--sizes--h1);
   letter-spacing: var(--c--theme--font--letterspacings--h1);
 }
-
 .fs-h2 {
   font-size: var(--c--theme--font--sizes--h2);
   letter-spacing: var(--c--theme--font--letterspacings--h2);
 }
-
 .fs-h3 {
   font-size: var(--c--theme--font--sizes--h3);
   letter-spacing: var(--c--theme--font--letterspacings--h3);
 }
-
 .fs-h4 {
   font-size: var(--c--theme--font--sizes--h4);
   letter-spacing: var(--c--theme--font--letterspacings--h4);
 }
-
 .fs-h5 {
   font-size: var(--c--theme--font--sizes--h5);
   letter-spacing: var(--c--theme--font--letterspacings--h5);
 }
-
 .fs-h6 {
   font-size: var(--c--theme--font--sizes--h6);
   letter-spacing: var(--c--theme--font--letterspacings--h6);
 }
-
 .fs-l {
   font-size: var(--c--theme--font--sizes--l);
   letter-spacing: var(--c--theme--font--letterspacings--l);
 }
-
 .fs-m {
   font-size: var(--c--theme--font--sizes--m);
   letter-spacing: var(--c--theme--font--letterspacings--m);
 }
-
 .fs-s {
   font-size: var(--c--theme--font--sizes--s);
   letter-spacing: var(--c--theme--font--letterspacings--s);
 }
-
 .fs-xs {
   font-size: var(--c--theme--font--sizes--xs);
   letter-spacing: var(--c--theme--font--letterspacings--xs);
 }
-
 .fs-sm {
   font-size: var(--c--theme--font--sizes--sm);
   letter-spacing: var(--c--theme--font--letterspacings--sm);
 }
-
 .fs-md {
   font-size: var(--c--theme--font--sizes--md);
   letter-spacing: var(--c--theme--font--letterspacings--md);
 }
-
 .fs-lg {
   font-size: var(--c--theme--font--sizes--lg);
   letter-spacing: var(--c--theme--font--letterspacings--lg);
 }
-
 .fs-ml {
   font-size: var(--c--theme--font--sizes--ml);
   letter-spacing: var(--c--theme--font--letterspacings--ml);
 }
-
 .fs-xl {
   font-size: var(--c--theme--font--sizes--xl);
   letter-spacing: var(--c--theme--font--letterspacings--xl);
 }
-
 .fs-t {
   font-size: var(--c--theme--font--sizes--t);
   letter-spacing: var(--c--theme--font--letterspacings--t);
 }
-
 .f-base {
   font-family: var(--c--theme--font--families--base);
 }
-
 .f-accent {
   font-family: var(--c--theme--font--families--accent);
 }
-
 .m-0 {
   margin: var(--c--theme--spacings--0);
 }
-
 .mb-0 {
   margin-bottom: var(--c--theme--spacings--0);
 }
-
 .mt-0 {
   margin-top: var(--c--theme--spacings--0);
 }
-
 .ml-0 {
   margin-left: var(--c--theme--spacings--0);
 }
-
 .mr-0 {
   margin-right: var(--c--theme--spacings--0);
 }
-
 .m-xl {
   margin: var(--c--theme--spacings--xl);
 }
-
 .mb-xl {
   margin-bottom: var(--c--theme--spacings--xl);
 }
-
 .mt-xl {
   margin-top: var(--c--theme--spacings--xl);
 }
-
 .ml-xl {
   margin-left: var(--c--theme--spacings--xl);
 }
-
 .mr-xl {
   margin-right: var(--c--theme--spacings--xl);
 }
-
 .m-l {
   margin: var(--c--theme--spacings--l);
 }
-
 .mb-l {
   margin-bottom: var(--c--theme--spacings--l);
 }
-
 .mt-l {
   margin-top: var(--c--theme--spacings--l);
 }
-
 .ml-l {
   margin-left: var(--c--theme--spacings--l);
 }
-
 .mr-l {
   margin-right: var(--c--theme--spacings--l);
 }
-
 .m-b {
   margin: var(--c--theme--spacings--b);
 }
-
 .mb-b {
   margin-bottom: var(--c--theme--spacings--b);
 }
-
 .mt-b {
   margin-top: var(--c--theme--spacings--b);
 }
-
 .ml-b {
   margin-left: var(--c--theme--spacings--b);
 }
-
 .mr-b {
   margin-right: var(--c--theme--spacings--b);
 }
-
 .m-s {
   margin: var(--c--theme--spacings--s);
 }
-
 .mb-s {
   margin-bottom: var(--c--theme--spacings--s);
 }
-
 .mt-s {
   margin-top: var(--c--theme--spacings--s);
 }
-
 .ml-s {
   margin-left: var(--c--theme--spacings--s);
 }
-
 .mr-s {
   margin-right: var(--c--theme--spacings--s);
 }
-
 .m-t {
   margin: var(--c--theme--spacings--t);
 }
-
 .mb-t {
   margin-bottom: var(--c--theme--spacings--t);
 }
-
 .mt-t {
   margin-top: var(--c--theme--spacings--t);
 }
-
 .ml-t {
   margin-left: var(--c--theme--spacings--t);
 }
-
 .mr-t {
   margin-right: var(--c--theme--spacings--t);
 }
-
 .m-st {
   margin: var(--c--theme--spacings--st);
 }
-
 .mb-st {
   margin-bottom: var(--c--theme--spacings--st);
 }
-
 .mt-st {
   margin-top: var(--c--theme--spacings--st);
 }
-
 .ml-st {
   margin-left: var(--c--theme--spacings--st);
 }
-
 .mr-st {
   margin-right: var(--c--theme--spacings--st);
 }
-
 .m-none {
   margin: var(--c--theme--spacings--none);
 }
-
 .mb-none {
   margin-bottom: var(--c--theme--spacings--none);
 }
-
 .mt-none {
   margin-top: var(--c--theme--spacings--none);
 }
-
 .ml-none {
   margin-left: var(--c--theme--spacings--none);
 }
-
 .mr-none {
   margin-right: var(--c--theme--spacings--none);
 }
-
 .m-auto {
   margin: var(--c--theme--spacings--auto);
 }
-
 .mb-auto {
   margin-bottom: var(--c--theme--spacings--auto);
 }
-
 .mt-auto {
   margin-top: var(--c--theme--spacings--auto);
 }
-
 .ml-auto {
   margin-left: var(--c--theme--spacings--auto);
 }
-
 .mr-auto {
   margin-right: var(--c--theme--spacings--auto);
 }
-
 .m-bx {
   margin: var(--c--theme--spacings--bx);
 }
-
 .mb-bx {
   margin-bottom: var(--c--theme--spacings--bx);
 }
-
 .mt-bx {
   margin-top: var(--c--theme--spacings--bx);
 }
-
 .ml-bx {
   margin-left: var(--c--theme--spacings--bx);
 }
-
 .mr-bx {
   margin-right: var(--c--theme--spacings--bx);
 }
-
 .m-full {
   margin: var(--c--theme--spacings--full);
 }
-
 .mb-full {
   margin-bottom: var(--c--theme--spacings--full);
 }
-
 .mt-full {
   margin-top: var(--c--theme--spacings--full);
 }
-
 .ml-full {
   margin-left: var(--c--theme--spacings--full);
 }
-
 .mr-full {
   margin-right: var(--c--theme--spacings--full);
 }
-
 .m-4xs {
   margin: var(--c--theme--spacings--4xs);
 }
-
 .mb-4xs {
   margin-bottom: var(--c--theme--spacings--4xs);
 }
-
 .mt-4xs {
   margin-top: var(--c--theme--spacings--4xs);
 }
-
 .ml-4xs {
   margin-left: var(--c--theme--spacings--4xs);
 }
-
 .mr-4xs {
   margin-right: var(--c--theme--spacings--4xs);
 }
-
 .m-3xs {
   margin: var(--c--theme--spacings--3xs);
 }
-
 .mb-3xs {
   margin-bottom: var(--c--theme--spacings--3xs);
 }
-
 .mt-3xs {
   margin-top: var(--c--theme--spacings--3xs);
 }
-
 .ml-3xs {
   margin-left: var(--c--theme--spacings--3xs);
 }
-
 .mr-3xs {
   margin-right: var(--c--theme--spacings--3xs);
 }
-
 .m-2xs {
   margin: var(--c--theme--spacings--2xs);
 }
-
 .mb-2xs {
   margin-bottom: var(--c--theme--spacings--2xs);
 }
-
 .mt-2xs {
   margin-top: var(--c--theme--spacings--2xs);
 }
-
 .ml-2xs {
   margin-left: var(--c--theme--spacings--2xs);
 }
-
 .mr-2xs {
   margin-right: var(--c--theme--spacings--2xs);
 }
-
 .m-xs {
   margin: var(--c--theme--spacings--xs);
 }
-
 .mb-xs {
   margin-bottom: var(--c--theme--spacings--xs);
 }
-
 .mt-xs {
   margin-top: var(--c--theme--spacings--xs);
 }
-
 .ml-xs {
   margin-left: var(--c--theme--spacings--xs);
 }
-
 .mr-xs {
   margin-right: var(--c--theme--spacings--xs);
 }
-
 .m-sm {
   margin: var(--c--theme--spacings--sm);
 }
-
 .mb-sm {
   margin-bottom: var(--c--theme--spacings--sm);
 }
-
 .mt-sm {
   margin-top: var(--c--theme--spacings--sm);
 }
-
 .ml-sm {
   margin-left: var(--c--theme--spacings--sm);
 }
-
 .mr-sm {
   margin-right: var(--c--theme--spacings--sm);
 }
-
 .m-base {
   margin: var(--c--theme--spacings--base);
 }
-
 .mb-base {
   margin-bottom: var(--c--theme--spacings--base);
 }
-
 .mt-base {
   margin-top: var(--c--theme--spacings--base);
 }
-
 .ml-base {
   margin-left: var(--c--theme--spacings--base);
 }
-
 .mr-base {
   margin-right: var(--c--theme--spacings--base);
 }
-
 .m-md {
   margin: var(--c--theme--spacings--md);
 }
-
 .mb-md {
   margin-bottom: var(--c--theme--spacings--md);
 }
-
 .mt-md {
   margin-top: var(--c--theme--spacings--md);
 }
-
 .ml-md {
   margin-left: var(--c--theme--spacings--md);
 }
-
 .mr-md {
   margin-right: var(--c--theme--spacings--md);
 }
-
 .m-lg {
   margin: var(--c--theme--spacings--lg);
 }
-
 .mb-lg {
   margin-bottom: var(--c--theme--spacings--lg);
 }
-
 .mt-lg {
   margin-top: var(--c--theme--spacings--lg);
 }
-
 .ml-lg {
   margin-left: var(--c--theme--spacings--lg);
 }
-
 .mr-lg {
   margin-right: var(--c--theme--spacings--lg);
 }
-
 .m-xxl {
   margin: var(--c--theme--spacings--xxl);
 }
-
 .mb-xxl {
   margin-bottom: var(--c--theme--spacings--xxl);
 }
-
 .mt-xxl {
   margin-top: var(--c--theme--spacings--xxl);
 }
-
 .ml-xxl {
   margin-left: var(--c--theme--spacings--xxl);
 }
-
 .mr-xxl {
   margin-right: var(--c--theme--spacings--xxl);
 }
-
 .m-xxxl {
   margin: var(--c--theme--spacings--xxxl);
 }
-
 .mb-xxxl {
   margin-bottom: var(--c--theme--spacings--xxxl);
 }
-
 .mt-xxxl {
   margin-top: var(--c--theme--spacings--xxxl);
 }
-
 .ml-xxxl {
   margin-left: var(--c--theme--spacings--xxxl);
 }
-
 .mr-xxxl {
   margin-right: var(--c--theme--spacings--xxxl);
 }
-
 .m-4xl {
   margin: var(--c--theme--spacings--4xl);
 }
-
 .mb-4xl {
   margin-bottom: var(--c--theme--spacings--4xl);
 }
-
 .mt-4xl {
   margin-top: var(--c--theme--spacings--4xl);
 }
-
 .ml-4xl {
   margin-left: var(--c--theme--spacings--4xl);
 }
-
 .mr-4xl {
   margin-right: var(--c--theme--spacings--4xl);
 }
-
 .m-5xl {
   margin: var(--c--theme--spacings--5xl);
 }
-
 .mb-5xl {
   margin-bottom: var(--c--theme--spacings--5xl);
 }
-
 .mt-5xl {
   margin-top: var(--c--theme--spacings--5xl);
 }
-
 .ml-5xl {
   margin-left: var(--c--theme--spacings--5xl);
 }
-
 .mr-5xl {
   margin-right: var(--c--theme--spacings--5xl);
 }
-
 .m-6xl {
   margin: var(--c--theme--spacings--6xl);
 }
-
 .mb-6xl {
   margin-bottom: var(--c--theme--spacings--6xl);
 }
-
 .mt-6xl {
   margin-top: var(--c--theme--spacings--6xl);
 }
-
 .ml-6xl {
   margin-left: var(--c--theme--spacings--6xl);
 }
-
 .mr-6xl {
   margin-right: var(--c--theme--spacings--6xl);
 }
-
 .m-7xl {
   margin: var(--c--theme--spacings--7xl);
 }
-
 .mb-7xl {
   margin-bottom: var(--c--theme--spacings--7xl);
 }
-
 .mt-7xl {
   margin-top: var(--c--theme--spacings--7xl);
 }
-
 .ml-7xl {
   margin-left: var(--c--theme--spacings--7xl);
 }
-
 .mr-7xl {
   margin-right: var(--c--theme--spacings--7xl);
 }
-
 .p-0 {
   padding: var(--c--theme--spacings--0);
 }
-
 .pb-0 {
   padding-bottom: var(--c--theme--spacings--0);
 }
-
 .pt-0 {
   padding-top: var(--c--theme--spacings--0);
 }
-
 .pl-0 {
   padding-left: var(--c--theme--spacings--0);
 }
-
 .pr-0 {
   padding-right: var(--c--theme--spacings--0);
 }
-
 .p-xl {
   padding: var(--c--theme--spacings--xl);
 }
-
 .pb-xl {
   padding-bottom: var(--c--theme--spacings--xl);
 }
-
 .pt-xl {
   padding-top: var(--c--theme--spacings--xl);
 }
-
 .pl-xl {
   padding-left: var(--c--theme--spacings--xl);
 }
-
 .pr-xl {
   padding-right: var(--c--theme--spacings--xl);
 }
-
 .p-l {
   padding: var(--c--theme--spacings--l);
 }
-
 .pb-l {
   padding-bottom: var(--c--theme--spacings--l);
 }
-
 .pt-l {
   padding-top: var(--c--theme--spacings--l);
 }
-
 .pl-l {
   padding-left: var(--c--theme--spacings--l);
 }
-
 .pr-l {
   padding-right: var(--c--theme--spacings--l);
 }
-
 .p-b {
   padding: var(--c--theme--spacings--b);
 }
-
 .pb-b {
   padding-bottom: var(--c--theme--spacings--b);
 }
-
 .pt-b {
   padding-top: var(--c--theme--spacings--b);
 }
-
 .pl-b {
   padding-left: var(--c--theme--spacings--b);
 }
-
 .pr-b {
   padding-right: var(--c--theme--spacings--b);
 }
-
 .p-s {
   padding: var(--c--theme--spacings--s);
 }
-
 .pb-s {
   padding-bottom: var(--c--theme--spacings--s);
 }
-
 .pt-s {
   padding-top: var(--c--theme--spacings--s);
 }
-
 .pl-s {
   padding-left: var(--c--theme--spacings--s);
 }
-
 .pr-s {
   padding-right: var(--c--theme--spacings--s);
 }
-
 .p-t {
   padding: var(--c--theme--spacings--t);
 }
-
 .pb-t {
   padding-bottom: var(--c--theme--spacings--t);
 }
-
 .pt-t {
   padding-top: var(--c--theme--spacings--t);
 }
-
 .pl-t {
   padding-left: var(--c--theme--spacings--t);
 }
-
 .pr-t {
   padding-right: var(--c--theme--spacings--t);
 }
-
 .p-st {
   padding: var(--c--theme--spacings--st);
 }
-
 .pb-st {
   padding-bottom: var(--c--theme--spacings--st);
 }
-
 .pt-st {
   padding-top: var(--c--theme--spacings--st);
 }
-
 .pl-st {
   padding-left: var(--c--theme--spacings--st);
 }
-
 .pr-st {
   padding-right: var(--c--theme--spacings--st);
 }
-
 .p-none {
   padding: var(--c--theme--spacings--none);
 }
-
 .pb-none {
   padding-bottom: var(--c--theme--spacings--none);
 }
-
 .pt-none {
   padding-top: var(--c--theme--spacings--none);
 }
-
 .pl-none {
   padding-left: var(--c--theme--spacings--none);
 }
-
 .pr-none {
   padding-right: var(--c--theme--spacings--none);
 }
-
 .p-auto {
   padding: var(--c--theme--spacings--auto);
 }
-
 .pb-auto {
   padding-bottom: var(--c--theme--spacings--auto);
 }
-
 .pt-auto {
   padding-top: var(--c--theme--spacings--auto);
 }
-
 .pl-auto {
   padding-left: var(--c--theme--spacings--auto);
 }
-
 .pr-auto {
   padding-right: var(--c--theme--spacings--auto);
 }
-
 .p-bx {
   padding: var(--c--theme--spacings--bx);
 }
-
 .pb-bx {
   padding-bottom: var(--c--theme--spacings--bx);
 }
-
 .pt-bx {
   padding-top: var(--c--theme--spacings--bx);
 }
-
 .pl-bx {
   padding-left: var(--c--theme--spacings--bx);
 }
-
 .pr-bx {
   padding-right: var(--c--theme--spacings--bx);
 }
-
 .p-full {
   padding: var(--c--theme--spacings--full);
 }
-
 .pb-full {
   padding-bottom: var(--c--theme--spacings--full);
 }
-
 .pt-full {
   padding-top: var(--c--theme--spacings--full);
 }
-
 .pl-full {
   padding-left: var(--c--theme--spacings--full);
 }
-
 .pr-full {
   padding-right: var(--c--theme--spacings--full);
 }
-
 .p-4xs {
   padding: var(--c--theme--spacings--4xs);
 }
-
 .pb-4xs {
   padding-bottom: var(--c--theme--spacings--4xs);
 }
-
 .pt-4xs {
   padding-top: var(--c--theme--spacings--4xs);
 }
-
 .pl-4xs {
   padding-left: var(--c--theme--spacings--4xs);
 }
-
 .pr-4xs {
   padding-right: var(--c--theme--spacings--4xs);
 }
-
 .p-3xs {
   padding: var(--c--theme--spacings--3xs);
 }
-
 .pb-3xs {
   padding-bottom: var(--c--theme--spacings--3xs);
 }
-
 .pt-3xs {
   padding-top: var(--c--theme--spacings--3xs);
 }
-
 .pl-3xs {
   padding-left: var(--c--theme--spacings--3xs);
 }
-
 .pr-3xs {
   padding-right: var(--c--theme--spacings--3xs);
 }
-
 .p-2xs {
   padding: var(--c--theme--spacings--2xs);
 }
-
 .pb-2xs {
   padding-bottom: var(--c--theme--spacings--2xs);
 }
-
 .pt-2xs {
   padding-top: var(--c--theme--spacings--2xs);
 }
-
 .pl-2xs {
   padding-left: var(--c--theme--spacings--2xs);
 }
-
 .pr-2xs {
   padding-right: var(--c--theme--spacings--2xs);
 }
-
 .p-xs {
   padding: var(--c--theme--spacings--xs);
 }
-
 .pb-xs {
   padding-bottom: var(--c--theme--spacings--xs);
 }
-
 .pt-xs {
   padding-top: var(--c--theme--spacings--xs);
 }
-
 .pl-xs {
   padding-left: var(--c--theme--spacings--xs);
 }
-
 .pr-xs {
   padding-right: var(--c--theme--spacings--xs);
 }
-
 .p-sm {
   padding: var(--c--theme--spacings--sm);
 }
-
 .pb-sm {
   padding-bottom: var(--c--theme--spacings--sm);
 }
-
 .pt-sm {
   padding-top: var(--c--theme--spacings--sm);
 }
-
 .pl-sm {
   padding-left: var(--c--theme--spacings--sm);
 }
-
 .pr-sm {
   padding-right: var(--c--theme--spacings--sm);
 }
-
 .p-base {
   padding: var(--c--theme--spacings--base);
 }
-
 .pb-base {
   padding-bottom: var(--c--theme--spacings--base);
 }
-
 .pt-base {
   padding-top: var(--c--theme--spacings--base);
 }
-
 .pl-base {
   padding-left: var(--c--theme--spacings--base);
 }
-
 .pr-base {
   padding-right: var(--c--theme--spacings--base);
 }
-
 .p-md {
   padding: var(--c--theme--spacings--md);
 }
-
 .pb-md {
   padding-bottom: var(--c--theme--spacings--md);
 }
-
 .pt-md {
   padding-top: var(--c--theme--spacings--md);
 }
-
 .pl-md {
   padding-left: var(--c--theme--spacings--md);
 }
-
 .pr-md {
   padding-right: var(--c--theme--spacings--md);
 }
-
 .p-lg {
   padding: var(--c--theme--spacings--lg);
 }
-
 .pb-lg {
   padding-bottom: var(--c--theme--spacings--lg);
 }
-
 .pt-lg {
   padding-top: var(--c--theme--spacings--lg);
 }
-
 .pl-lg {
   padding-left: var(--c--theme--spacings--lg);
 }
-
 .pr-lg {
   padding-right: var(--c--theme--spacings--lg);
 }
-
 .p-xxl {
   padding: var(--c--theme--spacings--xxl);
 }
-
 .pb-xxl {
   padding-bottom: var(--c--theme--spacings--xxl);
 }
-
 .pt-xxl {
   padding-top: var(--c--theme--spacings--xxl);
 }
-
 .pl-xxl {
   padding-left: var(--c--theme--spacings--xxl);
 }
-
 .pr-xxl {
   padding-right: var(--c--theme--spacings--xxl);
 }
-
 .p-xxxl {
   padding: var(--c--theme--spacings--xxxl);
 }
-
 .pb-xxxl {
   padding-bottom: var(--c--theme--spacings--xxxl);
 }
-
 .pt-xxxl {
   padding-top: var(--c--theme--spacings--xxxl);
 }
-
 .pl-xxxl {
   padding-left: var(--c--theme--spacings--xxxl);
 }
-
 .pr-xxxl {
   padding-right: var(--c--theme--spacings--xxxl);
 }
-
 .p-4xl {
   padding: var(--c--theme--spacings--4xl);
 }
-
 .pb-4xl {
   padding-bottom: var(--c--theme--spacings--4xl);
 }
-
 .pt-4xl {
   padding-top: var(--c--theme--spacings--4xl);
 }
-
 .pl-4xl {
   padding-left: var(--c--theme--spacings--4xl);
 }
-
 .pr-4xl {
   padding-right: var(--c--theme--spacings--4xl);
 }
-
 .p-5xl {
   padding: var(--c--theme--spacings--5xl);
 }
-
 .pb-5xl {
   padding-bottom: var(--c--theme--spacings--5xl);
 }
-
 .pt-5xl {
   padding-top: var(--c--theme--spacings--5xl);
 }
-
 .pl-5xl {
   padding-left: var(--c--theme--spacings--5xl);
 }
-
 .pr-5xl {
   padding-right: var(--c--theme--spacings--5xl);
 }
-
 .p-6xl {
   padding: var(--c--theme--spacings--6xl);
 }
-
 .pb-6xl {
   padding-bottom: var(--c--theme--spacings--6xl);
 }
-
 .pt-6xl {
   padding-top: var(--c--theme--spacings--6xl);
 }
-
 .pl-6xl {
   padding-left: var(--c--theme--spacings--6xl);
 }
-
 .pr-6xl {
   padding-right: var(--c--theme--spacings--6xl);
 }
-
 .p-7xl {
   padding: var(--c--theme--spacings--7xl);
 }
-
 .pb-7xl {
   padding-bottom: var(--c--theme--spacings--7xl);
 }
-
 .pt-7xl {
   padding-top: var(--c--theme--spacings--7xl);
 }
-
 .pl-7xl {
   padding-left: var(--c--theme--spacings--7xl);
 }
-
 .pr-7xl {
   padding-right: var(--c--theme--spacings--7xl);
 }
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
index e75ad694f..90cd485ad 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
@@ -80,6 +80,36 @@ export const tokens = {
           'primary-950': '#1B1B35',
           'info-150': '#E5EEFA',
           'greyscale-1000': '#161616',
+          'blue-400': '#7AB1E8',
+          'blue-500': '#417DC4',
+          'blue-600': '#3558A2',
+          'brown-400': '#E6BE92',
+          'brown-500': '#BD987A',
+          'brown-600': '#745B47',
+          'cyan-400': '#34BAB5',
+          'cyan-500': '#009099',
+          'cyan-600': '#006A6F',
+          'gold-400': '#FFCA00',
+          'gold-500': '#C3992A',
+          'gold-600': '#695240',
+          'green-400': '#34CB6A',
+          'green-500': '#00A95F',
+          'green-600': '#297254',
+          'olive-400': '#99C221',
+          'olive-500': '#68A532',
+          'olive-600': '#447049',
+          'orange-400': '#FF732C',
+          'orange-500': '#E4794A',
+          'orange-600': '#755348',
+          'pink-400': '#FFB7AE',
+          'pink-500': '#E18B76',
+          'pink-600': '#8D533E',
+          'purple-400': '#CE70CC',
+          'purple-500': '#A558A0',
+          'purple-600': '#6E445A',
+          'yellow-400': '#D8C634',
+          'yellow-500': '#B7A73F',
+          'yellow-600': '#66673D',
         },
         font: {
           sizes: {
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
index 3db2bea86..9ef1e628d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -1,6 +1,7 @@
 import {
   Button,
   VariantType,
+  useModal,
   useToastProvider,
 } from '@openfun/cunningham-react';
 import { useState } from 'react';
@@ -28,6 +29,8 @@ import {
 import { ModalVersion, Versions } from '@/features/docs/doc-versioning';
 import { useResponsiveStore } from '@/stores';
 
+import { DocShareModal } from '../../doc-management/components/share/DocShareModal';
+
 import { ModalPDF } from './ModalExport';
 
 interface DocToolBoxProps {
@@ -46,6 +49,8 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
   const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
   const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
 
+  const modalShare = useModal();
+
   const { setIsPanelOpen, setIsPanelTableContentOpen } = usePanelEditorStore();
   const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);
   const { isSmallMobile } = useResponsiveStore();
@@ -162,7 +167,8 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
           <Button
             color="primary-text"
             onClick={() => {
-              setIsModalShareOpen(true);
+              modalShare.open();
+              // setIsModalShareOpen(true);
             }}
             size={isSmallMobile ? 'small' : 'medium'}
           >
@@ -201,6 +207,9 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
       {isModalShareOpen && (
         <ModalShare onClose={() => setIsModalShareOpen(false)} doc={doc} />
       )}
+      {modalShare.isOpen && (
+        <DocShareModal doc={doc} onClose={modalShare.onClose} />
+      )}
       {isModalPDFOpen && (
         <ModalPDF onClose={() => setIsModalPDFOpen(false)} doc={doc} />
       )}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocRoleDropdown.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocRoleDropdown.tsx
new file mode 100644
index 000000000..5f80d9e70
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocRoleDropdown.tsx
@@ -0,0 +1,54 @@
+import { css } from 'styled-components';
+
+import { DropdownMenu, DropdownMenuOption, Text } from '@/components';
+
+import { useTrans } from '../hooks';
+import { Role } from '../types';
+
+type Props = {
+  currentRole: Role;
+  onSelectRole?: (role: Role) => void;
+  canUpdate?: boolean;
+};
+export const DocRoleDropdown = ({
+  canUpdate = true,
+  currentRole,
+  onSelectRole,
+}: Props) => {
+  const { transRole, translatedRoles } = useTrans();
+
+  const roles: DropdownMenuOption[] = Object.keys(translatedRoles).map(
+    (key) => {
+      return {
+        label: transRole(key as Role),
+        callback: () => onSelectRole?.(key as Role),
+      };
+    },
+  );
+
+  if (!canUpdate) {
+    return (
+      <Text
+        $variation="600"
+        $css={css`
+          font-family: Arial, Helvetica, sans-serif;
+        `}
+      >
+        {transRole(currentRole)}
+      </Text>
+    );
+  }
+
+  return (
+    <DropdownMenu showArrow={true} options={roles}>
+      <Text
+        $variation="600"
+        $css={css`
+          font-family: Arial, Helvetica, sans-serif;
+        `}
+      >
+        {transRole(currentRole)}
+      </Text>
+    </DropdownMenu>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareAddMemberList.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareAddMemberList.tsx
new file mode 100644
index 000000000..5d0168670
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareAddMemberList.tsx
@@ -0,0 +1,160 @@
+import {
+  Button,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { APIError } from '@/api';
+import { Box } from '@/components';
+import { User } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
+import { Doc, Role } from '@/features/docs';
+import { useCreateDocInvitation } from '@/features/docs/members/invitation-list';
+import { useCreateDocAccess } from '@/features/docs/members/members-add';
+import { OptionType } from '@/features/docs/members/members-add/types';
+import { useLanguage } from '@/i18n/hooks/useLanguage';
+
+import { DocRoleDropdown } from '../DocRoleDropdown';
+
+import { DocShareAddMemberListItem } from './DocShareAddMemberListItem';
+
+type APIErrorUser = APIError<{
+  value: string;
+  type: OptionType;
+}>;
+
+type Props = {
+  doc: Doc;
+  selectedUsers: User[];
+  onRemoveUser?: (user: User) => void;
+  onSubmit?: (selectedUsers: User[], role: Role) => void;
+  afterInvite?: () => void;
+};
+export const DocShareAddMemberList = ({
+  doc,
+  selectedUsers,
+  onRemoveUser,
+  afterInvite,
+}: Props) => {
+  const { t } = useTranslation();
+  const { toast } = useToastProvider();
+  const [isLoading, setIsLoading] = useState(false);
+  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const { contentLanguage } = useLanguage();
+  const [invitationRole, setInvitationRole] = useState<Role>(Role.EDITOR);
+  const canShare = doc.abilities.accesses_manage;
+  const spacing = spacingsTokens();
+  const color = colorsTokens();
+
+  const { mutateAsync: createInvitation } = useCreateDocInvitation();
+  const { mutateAsync: createDocAccess } = useCreateDocAccess();
+
+  const onError = (dataError: APIErrorUser) => {
+    let messageError =
+      dataError['data']?.type === OptionType.INVITATION
+        ? t(`Failed to create the invitation for {{email}}.`, {
+            email: dataError['data']?.value,
+          })
+        : t(`Failed to add the member in the document.`);
+
+    if (
+      dataError.cause?.[0] ===
+      'Document invitation with this Email address and Document already exists.'
+    ) {
+      messageError = t('"{{email}}" is already invited to the document.', {
+        email: dataError['data']?.value,
+      });
+    }
+
+    if (
+      dataError.cause?.[0] ===
+      'This email is already associated to a registered user.'
+    ) {
+      messageError = t('"{{email}}" is already member of the document.', {
+        email: dataError['data']?.value,
+      });
+    }
+
+    toast(messageError, VariantType.ERROR, {
+      duration: 4000,
+    });
+  };
+
+  const onInvite = async () => {
+    setIsLoading(true);
+    const promises = selectedUsers.map((user) => {
+      const isInvitationMode = user.id === user.email;
+
+      const payload = {
+        role: invitationRole,
+        docId: doc.id,
+        contentLanguage,
+      };
+
+      return isInvitationMode
+        ? createInvitation({
+            ...payload,
+            email: user.email,
+          })
+        : createDocAccess({
+            ...payload,
+            memberId: user.id,
+          });
+    });
+
+    const settledPromises = await Promise.allSettled(promises);
+    settledPromises.forEach((settledPromise) => {
+      if (settledPromise.status === 'rejected') {
+        onError(settledPromise.reason as APIErrorUser);
+      }
+    });
+    afterInvite?.();
+    setIsLoading(false);
+  };
+
+  return (
+    <Box
+      $direction="row"
+      $padding={spacing.sm}
+      $align="center"
+      $background={color['greyscale-050']}
+      $radius={spacing['3xs']}
+      $css={css`
+        border: 1px solid ${color['greyscale-200']};
+      `}
+    >
+      <Box
+        $direction="row"
+        $align="center"
+        $wrap="wrap"
+        $flex={1}
+        $gap={spacing.xs}
+      >
+        {selectedUsers.map((user) => (
+          <DocShareAddMemberListItem
+            key={user.id}
+            user={user}
+            onRemoveUser={onRemoveUser}
+          />
+        ))}
+      </Box>
+      <Box $direction="row" $align="center">
+        <DocRoleDropdown
+          canUpdate={canShare}
+          currentRole={invitationRole}
+          onSelectRole={setInvitationRole}
+        />
+        <Button
+          onClick={() => void onInvite()}
+          size="small"
+          disabled={isLoading}
+        >
+          {t('Invite')}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareAddMemberListItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareAddMemberListItem.tsx
new file mode 100644
index 000000000..25ceaef38
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareAddMemberListItem.tsx
@@ -0,0 +1,42 @@
+import { Button } from '@openfun/cunningham-react';
+import { css } from 'styled-components';
+
+import { Box, Icon, Text } from '@/components';
+import { User } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
+
+type Props = {
+  user: User;
+  onRemoveUser?: (user: User) => void;
+};
+export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
+  const { spacingsTokens, colorsTokens, fontSizesTokens } =
+    useCunninghamTheme();
+  const spacing = spacingsTokens();
+  const color = colorsTokens();
+  const fontSize = fontSizesTokens();
+  return (
+    <Box
+      $radius={spacing['3xs']}
+      $direction="row"
+      $height="fit-content"
+      $justify="center"
+      $align="center"
+      $gap={spacing.xs}
+      $background={color['greyscale-200']}
+      $padding={{ horizontal: spacing['2xs'], vertical: spacing['3xs'] }}
+      $css={css`
+        color: ${color['greyscale-1000']};
+        font-size: ${fontSize['xs']};
+      `}
+    >
+      <Text $margin={{ top: '-3px' }}>{user.full_name || user.email}</Text>
+      <Button
+        color="primary-text"
+        size="nano"
+        onClick={() => onRemoveUser(user)}
+        icon={<Icon $variation="400" $size="sm" iconName="close" />}
+      />
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareInvitationItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareInvitationItem.tsx
new file mode 100644
index 000000000..2b7b0e3de
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareInvitationItem.tsx
@@ -0,0 +1,99 @@
+import { VariantType, useToastProvider } from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  Box,
+  DropdownMenu,
+  DropdownMenuOption,
+  IconOptions,
+} from '@/components';
+import { User } from '@/core';
+import {
+  useDeleteDocInvitation,
+  useUpdateDocInvitation,
+} from '@/features/docs/members/invitation-list';
+import { Invitation } from '@/features/docs/members/invitation-list/types';
+import { SearchUserRow } from '@/features/users/components/SearchUserRow';
+
+import { Doc, Role } from '../../types';
+import { DocRoleDropdown } from '../DocRoleDropdown';
+
+type Props = {
+  doc: Doc;
+  invitation: Invitation;
+};
+export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
+  const { t } = useTranslation();
+  const fakeUser: User = {
+    id: invitation.email,
+    full_name: invitation.email,
+    email: invitation.email,
+    short_name: invitation.email,
+  };
+
+  const { toast } = useToastProvider();
+  const canUpdate = invitation.abilities.partial_update;
+  const { mutate: updateDocInvitation } = useUpdateDocInvitation({
+    onError: (error) => {
+      toast(
+        error?.data?.role?.[0] ?? t('Error during update invitation'),
+        VariantType.ERROR,
+        {
+          duration: 4000,
+        },
+      );
+    },
+  });
+
+  const { mutate: removeDocInvitation } = useDeleteDocInvitation({
+    onError: (error) => {
+      toast(
+        error?.data?.role?.[0] ?? t('Error during delete invitation'),
+        VariantType.ERROR,
+        {
+          duration: 4000,
+        },
+      );
+    },
+  });
+
+  const onUpdate = (newRole: Role) => {
+    updateDocInvitation({
+      docId: doc.id,
+      role: newRole,
+      invitationId: invitation.id,
+    });
+  };
+
+  const onRemove = () => {
+    removeDocInvitation({ invitationId: invitation.id, docId: doc.id });
+  };
+
+  const moreActions: DropdownMenuOption[] = [
+    {
+      label: t('Delete'),
+      icon: 'delete',
+      callback: onRemove,
+      disabled: !canUpdate,
+    },
+  ];
+  return (
+    <SearchUserRow
+      showRightOnHover={false}
+      user={fakeUser}
+      right={
+        <Box $direction="row" $align="center">
+          <DocRoleDropdown
+            currentRole={invitation.role}
+            onSelectRole={onUpdate}
+            canUpdate={canUpdate}
+          />
+
+          <DropdownMenu options={moreActions}>
+            <IconOptions $variation="600" />
+          </DropdownMenu>
+        </Box>
+      }
+    />
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareMemberItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareMemberItem.tsx
new file mode 100644
index 000000000..5ecf3c75f
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareMemberItem.tsx
@@ -0,0 +1,86 @@
+import { VariantType, useToastProvider } from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  Box,
+  DropdownMenu,
+  DropdownMenuOption,
+  IconOptions,
+} from '@/components';
+import {
+  useDeleteDocAccess,
+  useUpdateDocAccess,
+} from '@/features/docs/members/members-list';
+import { useWhoAmI } from '@/features/docs/members/members-list/hooks/useWhoAmI';
+import { SearchUserRow } from '@/features/users/components/SearchUserRow';
+
+import { Access, Doc, Role } from '../../types';
+import { DocRoleDropdown } from '../DocRoleDropdown';
+
+type Props = {
+  doc: Doc;
+  access: Access;
+};
+export const DocShareMemberItem = ({ doc, access }: Props) => {
+  const { t } = useTranslation();
+  const { isLastOwner, isOtherOwner } = useWhoAmI(access);
+  const { toast } = useToastProvider();
+  const isNotAllowed =
+    isOtherOwner || isLastOwner || !doc.abilities.accesses_manage;
+
+  const { mutate: updateDocAccess } = useUpdateDocAccess({
+    onError: () => {
+      toast(t('Error during invitation update'), VariantType.ERROR, {
+        duration: 4000,
+      });
+    },
+  });
+
+  const { mutate: removeDocAccess } = useDeleteDocAccess({
+    onError: () => {
+      toast(t('Error while deleting invitation'), VariantType.ERROR, {
+        duration: 4000,
+      });
+    },
+  });
+
+  const onUpdate = (newRole: Role) => {
+    updateDocAccess({
+      docId: doc.id,
+      role: newRole,
+      accessId: access.id,
+    });
+  };
+
+  const onRemove = () => {
+    removeDocAccess({ accessId: access.id, docId: doc.id });
+  };
+
+  const moreActions: DropdownMenuOption[] = [
+    {
+      label: t('Delete'),
+      icon: 'delete',
+      callback: onRemove,
+      disabled: isNotAllowed,
+    },
+  ];
+  return (
+    <SearchUserRow
+      showRightOnHover={false}
+      user={access.user}
+      right={
+        <Box $direction="row" $align="center">
+          <DocRoleDropdown
+            currentRole={access.role}
+            onSelectRole={onUpdate}
+            canUpdate={!isNotAllowed}
+          />
+
+          <DropdownMenu options={moreActions}>
+            <IconOptions $variation="600" />
+          </DropdownMenu>
+        </Box>
+      }
+    />
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareModal.tsx
new file mode 100644
index 000000000..1a1b4f821
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareModal.tsx
@@ -0,0 +1,205 @@
+import { Modal, ModalSize } from '@openfun/cunningham-react';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDebouncedCallback } from 'use-debounce';
+
+import { Box } from '@/components';
+import { LoadMoreText } from '@/components/LoadMoreText';
+import {
+  QuickSearch,
+  QuickSearchData,
+} from '@/components/quick-search/QuickSearch';
+import { QuickSearchGroup } from '@/components/quick-search/QuickSearchGroup';
+import { User } from '@/core';
+import { Access, Doc } from '@/features/docs';
+import { useDocInvitationsInfinite } from '@/features/docs/members/invitation-list';
+import { Invitation } from '@/features/docs/members/invitation-list/types';
+import { KEY_LIST_USER, useUsers } from '@/features/docs/members/members-add';
+import { useDocAccessesInfinite } from '@/features/docs/members/members-list';
+import { isValidEmail } from '@/utils';
+
+import { DocShareAddMemberList } from './DocShareAddMemberList';
+import { DocShareInvitationItem } from './DocShareInvitationItem';
+import { DocShareMemberItem } from './DocShareMemberItem';
+import { DocShareModalInviteUserRow } from './DocShareModalInviteUserByEmail';
+
+type Props = {
+  doc: Doc;
+  onClose: () => void;
+};
+export const DocShareModal = ({ doc, onClose }: Props) => {
+  const { t } = useTranslation();
+  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
+  const [userQuery, setUserQuery] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const canShare = doc.abilities.accesses_manage;
+  const showMemberSection = inputValue === '' && selectedUsers.length === 0;
+
+  const onSelect = (user: User) => {
+    setSelectedUsers((prev) => [...prev, user]);
+    setUserQuery('');
+    setInputValue('');
+  };
+
+  const membersQuery = useDocAccessesInfinite({
+    docId: doc.id,
+  });
+
+  const invitationQuery = useDocInvitationsInfinite({
+    docId: doc.id,
+  });
+
+  const searchUsersQuery = useUsers(
+    { query: userQuery, docId: doc.id },
+    {
+      enabled: !!userQuery,
+      queryKey: [KEY_LIST_USER, { query: userQuery }],
+    },
+  );
+
+  const membersData: QuickSearchData<Access> = useMemo(() => {
+    const members =
+      membersQuery.data?.pages.flatMap((page) => page.results) || [];
+
+    return {
+      groupName: t('Members'),
+      elements: members,
+      endActions: membersQuery.hasNextPage
+        ? [
+            {
+              content: <LoadMoreText />,
+              onSelect: () => void membersQuery.fetchNextPage(),
+            },
+          ]
+        : undefined,
+    };
+  }, [membersQuery, t]);
+
+  const invitationsData: QuickSearchData<Invitation> = useMemo(() => {
+    const invitations =
+      invitationQuery.data?.pages.flatMap((page) => page.results) || [];
+
+    return {
+      groupName: t('Invitations'),
+      elements: invitations,
+      endActions: invitationQuery.hasNextPage
+        ? [
+            {
+              content: <LoadMoreText />,
+              onSelect: () => void invitationQuery.fetchNextPage(),
+            },
+          ]
+        : undefined,
+    };
+  }, [invitationQuery, t]);
+
+  const searchUserData: QuickSearchData<User> = useMemo(() => {
+    const users = searchUsersQuery.data?.results || [];
+    const isEmail = isValidEmail(userQuery);
+    const fakeUser: User = {
+      id: userQuery,
+      full_name: '',
+      email: userQuery,
+      short_name: '',
+    };
+
+    return {
+      groupName: t('Users'),
+      elements: users,
+      endActions:
+        isEmail && users.length === 0
+          ? [
+              {
+                content: <DocShareModalInviteUserRow user={fakeUser} />,
+                onSelect: () => void onSelect(fakeUser),
+              },
+            ]
+          : undefined,
+    };
+  }, [searchUsersQuery.data, t, userQuery]);
+
+  const onFilter = useDebouncedCallback((str: string) => {
+    setUserQuery(str);
+  }, 300);
+
+  const onRemoveUser = (row: User) => {
+    setSelectedUsers((prevState) => {
+      const index = prevState.findIndex((value) => value.id === row.id);
+      if (index < 0) {
+        return prevState;
+      }
+      const newArray = [...prevState];
+      newArray.splice(index, 1);
+      return newArray;
+    });
+  };
+
+  return (
+    <Modal
+      isOpen
+      size={ModalSize.LARGE}
+      onClose={onClose}
+      title={
+        <Box $padding="base" $align="flex-start">
+          {t('Share the document')}
+        </Box>
+      }
+    >
+      {canShare && selectedUsers.length > 0 && (
+        <Box $padding={{ horizontal: 'base' }} $margin={{ vertical: '11px' }}>
+          <DocShareAddMemberList
+            doc={doc}
+            selectedUsers={selectedUsers}
+            onRemoveUser={onRemoveUser}
+            afterInvite={() => {
+              setUserQuery('');
+              setInputValue('');
+              setSelectedUsers([]);
+            }}
+          />
+        </Box>
+      )}
+
+      <QuickSearch
+        data={[]}
+        onFilter={(str) => {
+          setInputValue(str);
+          onFilter(str);
+        }}
+        inputValue={inputValue}
+        showInput={canShare}
+        loading={searchUsersQuery.isLoading}
+        renderElement={(user) => <DocShareModalInviteUserRow user={user} />}
+        onSelect={onSelect}
+        placeholder={t('Type a name or email')}
+      >
+        {!showMemberSection && inputValue !== '' && (
+          <QuickSearchGroup
+            group={searchUserData}
+            onSelect={onSelect}
+            renderElement={(user) => <DocShareModalInviteUserRow user={user} />}
+          />
+        )}
+        {showMemberSection && (
+          <>
+            {invitationsData.elements.length > 0 && (
+              <QuickSearchGroup
+                group={invitationsData}
+                renderElement={(invitation) => (
+                  <DocShareInvitationItem doc={doc} invitation={invitation} />
+                )}
+              />
+            )}
+
+            <QuickSearchGroup
+              group={membersData}
+              renderElement={(access) => (
+                <DocShareMemberItem doc={doc} access={access} />
+              )}
+            />
+          </>
+        )}
+      </QuickSearch>
+    </Modal>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareModalInviteUserByEmail.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareModalInviteUserByEmail.tsx
new file mode 100644
index 000000000..72d865202
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareModalInviteUserByEmail.tsx
@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, Icon, Text } from '@/components';
+import { User } from '@/core';
+import { SearchUserRow } from '@/features/users/components/SearchUserRow';
+
+type Props = {
+  user: User;
+};
+export const DocShareModalInviteUserRow = ({ user }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <SearchUserRow
+      user={user}
+      right={
+        <Box
+          $direction="row"
+          $align="center"
+          $css={css`
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: var(--c--theme--font--sizes--sm);
+            color: var(--c--theme--colors--greyscale-400);
+          `}
+        >
+          <Text $theme="primary" $variation="600">
+            {t('Add')}
+          </Text>
+          <Icon $theme="primary" $variation="600" iconName="add" />
+        </Box>
+      }
+    />
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useTrans.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useTrans.tsx
index b7bc24f5a..807c6c8b7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useTrans.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useTrans.tsx
@@ -17,5 +17,6 @@ export const useTrans = () => {
       return translatedRoles[role];
     },
     untitledDocument: t('Untitled document'),
+    translatedRoles,
   };
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/types.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/types.tsx
index cedd477cf..dd02fe781 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/types.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/types.tsx
@@ -57,3 +57,8 @@ export interface Doc {
     versions_retrieve: boolean;
   };
 }
+
+export enum DocDownloadFormat {
+  PDF = 'pdf',
+  DOCX = 'docx',
+}
diff --git a/src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useDeleteDocInvitation.ts b/src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useDeleteDocInvitation.ts
index 5874cd8cd..7e81bf3ea 100644
--- a/src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useDeleteDocInvitation.ts
+++ b/src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useDeleteDocInvitation.ts
@@ -13,6 +13,10 @@ interface DeleteDocInvitationProps {
   invitationId: string;
 }
 
+interface RemoveDocInvitationError {
+  role?: string[];
+}
+
 export const deleteDocInvitation = async ({
   docId,
   invitationId,
@@ -34,7 +38,7 @@ export const deleteDocInvitation = async ({
 
 type UseDeleteDocInvitationOptions = UseMutationOptions<
   void,
-  APIError,
+  APIError<RemoveDocInvitationError>,
   DeleteDocInvitationProps
 >;
 
@@ -42,7 +46,11 @@ export const useDeleteDocInvitation = (
   options?: UseDeleteDocInvitationOptions,
 ) => {
   const queryClient = useQueryClient();
-  return useMutation<void, APIError, DeleteDocInvitationProps>({
+  return useMutation<
+    void,
+    APIError<RemoveDocInvitationError>,
+    DeleteDocInvitationProps
+  >({
     mutationFn: deleteDocInvitation,
     ...options,
     onSuccess: (data, variables, context) => {
diff --git a/src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useUpdateDocInvitation.ts b/src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useUpdateDocInvitation.ts
index 435ea9634..19d800051 100644
--- a/src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useUpdateDocInvitation.ts
+++ b/src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useUpdateDocInvitation.ts
@@ -17,6 +17,10 @@ interface UpdateDocInvitationProps {
   role: Role;
 }
 
+interface UpdateDocInvitationError {
+  role?: string[];
+}
+
 export const updateDocInvitation = async ({
   docId,
   invitationId,
@@ -43,7 +47,7 @@ type UseUpdateDocInvitation = Partial<Invitation>;
 
 type UseUpdateDocInvitationOptions = UseMutationOptions<
   Invitation,
-  APIError,
+  APIError<UpdateDocInvitationError>,
   UseUpdateDocInvitation
 >;
 
@@ -51,7 +55,11 @@ export const useUpdateDocInvitation = (
   options?: UseUpdateDocInvitationOptions,
 ) => {
   const queryClient = useQueryClient();
-  return useMutation<Invitation, APIError, UpdateDocInvitationProps>({
+  return useMutation<
+    Invitation,
+    APIError<UpdateDocInvitationError>,
+    UpdateDocInvitationProps
+  >({
     mutationFn: updateDocInvitation,
     ...options,
     onSuccess: (data, variables, context) => {
diff --git a/src/frontend/apps/impress/src/features/users/components/SearchUserRow.tsx b/src/frontend/apps/impress/src/features/users/components/SearchUserRow.tsx
new file mode 100644
index 000000000..8e82110ed
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/users/components/SearchUserRow.tsx
@@ -0,0 +1,71 @@
+import { ReactNode } from 'react';
+import { css } from 'styled-components';
+
+import { Box, Text } from '@/components';
+import { User } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { UserAvatar } from './UserAvatar';
+
+type Props = {
+  user: User;
+  showRightOnHover?: boolean;
+  right?: ReactNode;
+};
+
+export const SearchUserRow = ({
+  user,
+  right,
+  showRightOnHover = true,
+}: Props) => {
+  const { spacingsTokens } = useCunninghamTheme();
+  const spacings = spacingsTokens();
+  const hasFullName = user.full_name != null && user.full_name !== '';
+
+  return (
+    <Box
+      $direction="row"
+      $align="center"
+      $padding={{ horizontal: '2xs', vertical: '3xs' }}
+      $justify="space-between"
+      $width="100%"
+      $css={css`
+        .right-user-row {
+          color: red !important;
+          display: ${showRightOnHover ? 'none' : 'flex'};
+        }
+
+        [data-cmdk-selected='true'] {
+          background-color: red !important;
+        }
+
+        &:hover {
+          .right-user-row {
+            color: green !important;
+            display: flex;
+          }
+        }
+      `}
+    >
+      <Box $direction="row" $align="center" $gap={spacings['2xs']}>
+        <UserAvatar user={user} />
+        <Box $direction="column">
+          <Text $size="sm" $variation="1000">
+            {hasFullName ? user.full_name : user.email}
+          </Text>
+          {hasFullName && (
+            <Text $size="xs" $variation="500">
+              {user.email}
+            </Text>
+          )}
+        </Box>
+      </Box>
+
+      {right && (
+        <Box className="right-user-row" $direction="row" $align="center">
+          {right}
+        </Box>
+      )}
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/users/components/UserAvatar.tsx b/src/frontend/apps/impress/src/features/users/components/UserAvatar.tsx
new file mode 100644
index 000000000..5b963535d
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/users/components/UserAvatar.tsx
@@ -0,0 +1,67 @@
+import { css } from 'styled-components';
+
+import { Box } from '@/components';
+import { User } from '@/core';
+import { tokens } from '@/cunningham';
+
+const colors = tokens.themes.default.theme.colors;
+
+const avatarsColors = [
+  colors['blue-500'],
+  colors['brown-500'],
+  colors['cyan-500'],
+  colors['gold-500'],
+  colors['green-500'],
+  colors['olive-500'],
+  colors['orange-500'],
+  colors['pink-500'],
+  colors['purple-500'],
+  colors['yellow-500'],
+];
+
+type Props = {
+  user: User;
+};
+
+export const UserAvatar = ({ user }: Props) => {
+  const name = user.full_name || user.email;
+  const splitName = name.split(' ');
+
+  const getColorFromName = () => {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return avatarsColors[Math.abs(hash) % avatarsColors.length];
+  };
+  return (
+    <Box
+      $background={getColorFromName()}
+      $width="24px"
+      $height="24px"
+      $direction="row"
+      $align="center"
+      $justify="center"
+      $radius="50%"
+      $css={css`
+        color: rgba(255, 255, 255, 0.9);
+        border: 1px solid rgba(255, 255, 255, 0.5);
+      `}
+    >
+      <Box
+        $direction="row"
+        $css={css`
+          text-align: center;
+          font-style: normal;
+          font-weight: 600;
+          font-family: Arial, Helvetica, sans-serif; // Can't use marianne font because it's impossible to center with this font
+          font-size: 10px;
+          text-transform: uppercase;
+        `}
+      >
+        {splitName[0]?.charAt(0)}
+        {splitName?.[1]?.charAt(0)}
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index 070c84d8f..f2396b9a0 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -2425,6 +2425,127 @@
     "@opentelemetry/instrumentation" "^0.49 || ^0.50 || ^0.51 || ^0.52.0"
     "@opentelemetry/sdk-trace-base" "^1.22"
 
+"@radix-ui/primitive@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2"
+  integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==
+
+"@radix-ui/react-compose-refs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
+"@radix-ui/react-context@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
+  integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
+
+"@radix-ui/react-dialog@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz#d9345575211d6f2d13e209e84aec9a8584b54d6c"
+  integrity sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-focus-guards" "1.1.1"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.6.0"
+
+"@radix-ui/react-dismissable-layer@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz#cbdcb739c5403382bdde5f9243042ba643883396"
+  integrity sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-escape-keydown" "1.1.0"
+
+"@radix-ui/react-focus-guards@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe"
+  integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==
+
+"@radix-ui/react-focus-scope@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2"
+  integrity sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
+"@radix-ui/react-id@1.1.0", "@radix-ui/react-id@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
+  integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-portal@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.2.tgz#51eb46dae7505074b306ebcb985bf65cc547d74e"
+  integrity sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-presence@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.1.tgz#98aba423dba5e0c687a782c0669dcd99de17f9b1"
+  integrity sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-primitive@2.0.0", "@radix-ui/react-primitive@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
+  integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
+  dependencies:
+    "@radix-ui/react-slot" "1.1.0"
+
+"@radix-ui/react-slot@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
+"@radix-ui/react-use-callback-ref@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
+  integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
+
+"@radix-ui/react-use-controllable-state@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
+  integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
+"@radix-ui/react-use-escape-keydown@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
+  integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
+"@radix-ui/react-use-layout-effect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
+  integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
+
 "@react-aria/breadcrumbs@^3.5.16", "@react-aria/breadcrumbs@^3.5.19":
   version "3.5.19"
   resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.5.19.tgz#e0a67e0e7017089fa0ee5eadd51a6da505b94cd4"
@@ -5171,6 +5292,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-hidden@^1.1.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.4.tgz#b78e383fdbc04d05762c78b4a25a501e736c4522"
+  integrity sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
@@ -5742,6 +5870,16 @@ clsx@^2.0.0, clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
+cmdk@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.0.4.tgz#cbddef6f5ade2378f85c80a0b9ad9a8a712779b5"
+  integrity sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.2"
+    "@radix-ui/react-id" "^1.1.0"
+    "@radix-ui/react-primitive" "^2.0.0"
+    use-sync-external-store "^1.2.2"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -10766,7 +10904,7 @@ react-remove-scroll-bar@^2.3.6:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
-react-remove-scroll@^2.6.0:
+react-remove-scroll@2.6.0, react-remove-scroll@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz#fb03a0845d7768a4f1519a99fdb84983b793dc07"
   integrity sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==
@@ -12479,6 +12617,11 @@ use-composed-ref@^1.3.0:
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
   integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
 
+use-debounce@10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.4.tgz#2135be498ad855416c4495cfd8e0e130bd33bb24"
+  integrity sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==
+
 use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
@@ -12499,7 +12642,7 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sync-external-store@^1, use-sync-external-store@^1.2.0:
+use-sync-external-store@^1, use-sync-external-store@^1.2.0, use-sync-external-store@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
   integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==