diff --git a/.changeset/spicy-roses-sparkle.md b/.changeset/spicy-roses-sparkle.md
new file mode 100644
index 00000000..84e212a8
--- /dev/null
+++ b/.changeset/spicy-roses-sparkle.md
@@ -0,0 +1,5 @@
+---
+'storybook-pages': minor
+---
+
+add modal for label see details in browsingPage
diff --git a/package-lock.json b/package-lock.json
index f7364854..c31ce678 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31430,10 +31430,10 @@
     },
     "packages/react-front-kit": {
       "name": "@smile/react-front-kit",
-      "version": "0.5.0",
+      "version": "0.6.0",
       "license": "MIT",
       "dependencies": {
-        "@smile/react-front-kit-shared": "0.5.0",
+        "@smile/react-front-kit-shared": "0.6.0",
         "pretty-bytes": "^6.1.1"
       },
       "devDependencies": {
@@ -31469,11 +31469,11 @@
     },
     "packages/react-front-kit-dropzone": {
       "name": "@smile/react-front-kit-dropzone",
-      "version": "0.5.0",
+      "version": "0.6.0",
       "license": "MIT",
       "dependencies": {
-        "@smile/react-front-kit": "0.5.0",
-        "@smile/react-front-kit-shared": "0.5.0"
+        "@smile/react-front-kit": "0.6.0",
+        "@smile/react-front-kit-shared": "0.6.0"
       },
       "devDependencies": {
         "@babel/preset-env": "^7.22.20",
@@ -32551,7 +32551,7 @@
     },
     "packages/react-front-kit-shared": {
       "name": "@smile/react-front-kit-shared",
-      "version": "0.5.0",
+      "version": "0.6.0",
       "license": "MIT",
       "devDependencies": {
         "@babel/preset-env": "^7.22.20",
@@ -33627,11 +33627,11 @@
     },
     "packages/react-front-kit-table": {
       "name": "@smile/react-front-kit-table",
-      "version": "0.5.0",
+      "version": "0.6.0",
       "license": "MIT",
       "dependencies": {
-        "@smile/react-front-kit": "0.5.0",
-        "@smile/react-front-kit-shared": "0.5.0"
+        "@smile/react-front-kit": "0.6.0",
+        "@smile/react-front-kit-shared": "0.6.0"
       },
       "devDependencies": {
         "@babel/preset-env": "^7.22.20",
@@ -35753,7 +35753,7 @@
       }
     },
     "packages/storybook-pages": {
-      "version": "0.1.0",
+      "version": "0.6.0",
       "license": "MIT",
       "dependencies": {
         "@smile/react-front-kit": "*",
diff --git a/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.style.tsx b/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.style.tsx
new file mode 100644
index 00000000..a52ea774
--- /dev/null
+++ b/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.style.tsx
@@ -0,0 +1,49 @@
+import { createStyles } from '@mantine/styles';
+
+export const useStyles = createStyles((theme) => ({
+  accordionChevron: {
+    '&[data-rotate=true]': {
+      color: theme.colors.gray[0],
+    },
+    color: theme.colors.cyan[9],
+  },
+  accordionContent: {
+    background: theme.colors.cyan[9],
+    borderRadius: '0px 0px 8px 8px',
+    marginBottom: '8px',
+    padding: '24px',
+  },
+  accordionControl: {
+    '&:hover': {
+      background: theme.colors.gray[2],
+    },
+    '&[aria-expanded=true]': {
+      background: theme.colors.cyan[9],
+      borderRadius: '8px 8px 0px 0px',
+      color: theme.colors.gray[0],
+      fontWeight: 700,
+      marginBottom: 0,
+    },
+    background: theme.colors.gray[1],
+    borderBottom: 0,
+    borderRadius: '8px',
+    color: theme.colors.dark[6],
+    marginBottom: '8px',
+  },
+  accordionItem: {
+    borderBottom: 'none',
+  },
+  modalBody: {
+    padding: '0px 48px 50px 48px',
+  },
+  modalClose: {
+    position: 'relative',
+    right: 0,
+    top: 0,
+  },
+  modalTitle: {
+    fontSize: '26px',
+    fontWeight: 700,
+    marginTop: 0,
+  },
+}));
diff --git a/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx b/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx
index b6d841e1..e72571ba 100644
--- a/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx
+++ b/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx
@@ -4,12 +4,15 @@ import type { IFile } from '@smile/react-front-kit-dropzone';
 import type { FormEvent, ReactElement } from 'react';
 
 import {
+  Accordion,
   AppShell,
   Button,
   Flex,
   MantineProvider,
+  Modal,
   useMantineTheme,
 } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { Eye, FolderPlus, Suitcase, User } from '@phosphor-icons/react';
 import {
   Breadcrumbs,
@@ -25,9 +28,19 @@ import { primaryTheme, secondaryTheme } from '@smile/react-front-kit-shared';
 import { TableGridView } from '@smile/react-front-kit-table';
 import { useState } from 'react';
 
-import { headerContent, headerLeft, headerRight } from '../pages.mock';
+import {
+  CardAction,
+  CardIdentity,
+  CardNative,
+  CardPermissions,
+  CardsMetadata,
+  headerContent,
+  headerLeft,
+  headerRight,
+} from '../pages.mock';
 
 import { actions, data, gridProps, tableProps } from './BrowsingPage.mock';
+import { useStyles } from './BrowsingPage.style';
 
 /**
  * Primary UI component for user interaction
@@ -37,9 +50,19 @@ export function BrowsingPage(): ReactElement {
   const [sidebarMenu, setSidebarMenu] = useState(menuMock);
   const [files, setFiles] = useState<IFile[]>([]);
   const [gridCols, setGridCols] = useState(4);
+  const [seeMoreModal, { open, close }] = useDisclosure(false);
 
+  const { classes } = useStyles();
   const theme = useMantineTheme();
 
+  const accordionItems = [
+    { content: CardAction, key: 1, title: 'Action' },
+    { content: CardsMetadata, key: 2, title: 'Métadonnées' },
+    { content: CardNative, key: 3, title: 'Historique' },
+    { content: CardPermissions, key: 4, title: 'Droits' },
+    { content: CardIdentity, key: 5, title: 'Cycle de vie' },
+  ];
+
   function handleSearchSubmit(event: FormEvent): void {
     event.preventDefault();
   }
@@ -56,6 +79,32 @@ export function BrowsingPage(): ReactElement {
     );
   }
 
+  function getAccordionItems(): ReactElement {
+    const items = accordionItems.map((item) => (
+      <Accordion.Item key={item.title} value={item.title}>
+        <Accordion.Control>{item.title}</Accordion.Control>
+        <Accordion.Panel>{item.content}</Accordion.Panel>
+      </Accordion.Item>
+    ));
+
+    return (
+      <MantineProvider theme={primaryTheme}>
+        <Accordion
+          classNames={{
+            chevron: classes.accordionChevron,
+            content: classes.accordionContent,
+            control: classes.accordionControl,
+            item: classes.accordionItem,
+          }}
+          defaultValue="Métadonnées"
+          variant="filled"
+        >
+          {items}
+        </Accordion>
+      </MantineProvider>
+    );
+  }
+
   return (
     <AppShell
       header={
@@ -96,6 +145,8 @@ export function BrowsingPage(): ReactElement {
           <InfoCard
             content={
               <p
+                aria-hidden="true"
+                onClick={open}
                 style={{
                   cursor: 'pointer',
                   display: 'flex',
@@ -143,6 +194,18 @@ export function BrowsingPage(): ReactElement {
           tableProps={tableProps}
         />
       </FoldableColumnLayout>
+      <Modal
+        classNames={{
+          body: classes.modalBody,
+          close: classes.modalClose,
+        }}
+        onClose={close}
+        opened={seeMoreModal}
+        size="xl"
+      >
+        <h3 className={classes.modalTitle}>Propriétés du dossier</h3>
+        {getAccordionItems()}
+      </Modal>
     </AppShell>
   );
 }
diff --git a/packages/storybook-pages/src/Pages/DocumentDetails/DocumentDetails.mock.tsx b/packages/storybook-pages/src/Pages/DocumentDetails/DocumentDetails.mock.tsx
deleted file mode 100644
index 60977fd8..00000000
--- a/packages/storybook-pages/src/Pages/DocumentDetails/DocumentDetails.mock.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-import {
-  Button,
-  Card,
-  Checkbox,
-  Chip,
-  Divider,
-  Grid,
-  Group,
-  Space,
-  Text,
-} from '@mantine/core';
-import {
-  PencilSimple,
-  PencilSimpleLine,
-  Plus,
-  ShareNetwork,
-  TrashSimple,
-} from '@phosphor-icons/react';
-import { FolderMove } from '@smile/react-front-kit-shared';
-
-export const CardAction = (
-  <Card padding="40px" radius="lg">
-    <Text fw="600" size="lg" span>
-      Générales
-    </Text>
-    <Space h="lg" />
-    <Group spacing="xs">
-      <Button leftIcon={<FolderMove />}>Déplacer</Button>
-      <Button leftIcon={<PencilSimple size={14} weight="bold" />}>
-        Editer le contenu
-      </Button>
-      <Button leftIcon={<PencilSimpleLine size={14} weight="bold" />}>
-        Annoter
-      </Button>
-      <Button leftIcon={<TrashSimple size={14} weight="bold" />}>
-        Supprimer
-      </Button>
-    </Group>
-  </Card>
-);
-
-export const CardMetadata = (
-  <Card padding="40px" radius="lg">
-    <Text fw="600" size="lg" span>
-      Métadonnées
-    </Text>
-    <Space h="lg" />
-    <Group spacing="xs">
-      <Button leftIcon={<PencilSimple size={14} weight="bold" />}>
-        Editer les métadonnées
-      </Button>
-      <Button leftIcon={<Plus size={14} weight="bold" />}>
-        Créer une nouvelle version
-      </Button>
-    </Group>
-  </Card>
-);
-
-export const CardNative = (
-  <Card padding="40px" radius="lg">
-    <Text fw="600" size="lg" span>
-      Native
-    </Text>
-    <Space h="lg" />
-    <Group grow pb="md">
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
-          <Text span>Créer</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" pt="0" sm={3}>
-          <Text fw={600} span>
-            22 mai 2021
-          </Text>
-        </Grid.Col>
-      </Grid>
-    </Group>
-    <Group grow pb="md">
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
-          <Text span>Dernière modification</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" pt="0" sm={3}>
-          <Text fw={600} span>
-            22 mai 2021
-          </Text>
-        </Grid.Col>
-      </Grid>
-    </Group>
-    <Group grow pb="md">
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
-          <Text span>Créer par</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" pt="0" sm={3}>
-          <Text fw={600} span>
-            22 mai 2021
-          </Text>
-        </Grid.Col>
-      </Grid>
-    </Group>
-    <Group grow pb="md">
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
-          <Text span>Modifier par</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" pt="0" sm={3}>
-          <Text fw={600} span>
-            22 mai 2021
-          </Text>
-        </Grid.Col>
-      </Grid>
-    </Group>
-    <Group grow>
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
-          <Text span>Version</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" pt="0" sm={3}>
-          <Chip checked size="sm" variant="outline">
-            V2
-          </Chip>
-        </Grid.Col>
-      </Grid>
-    </Group>
-  </Card>
-);
-
-export const CardPermissions = (
-  <Card padding="40px" radius="lg">
-    <Text fw="600" size="lg" span>
-      Accés au document
-    </Text>
-    <Space h="lg" />
-    <Group spacing="xs">
-      <Button leftIcon={<PencilSimple size={14} weight="bold" />}>
-        Editer les droits
-      </Button>
-      <Button leftIcon={<ShareNetwork size={14} weight="bold" />}>
-        Partager en externe
-      </Button>
-    </Group>
-    <Space h="lg" />
-    <Checkbox label="Accès en mode hors ligne" size="sm" />
-  </Card>
-);
-
-export const CardIdentity = (
-  <Card padding="40px 40px" radius="lg">
-    <Text fw="600" size="lg" span>
-      Identité
-    </Text>
-    <Space h="lg" />
-    <Group grow pb="md">
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
-          <Text span>Titre</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" pt="0" sm={3}>
-          <Text fw={600} span>
-            22 mai 2021
-          </Text>
-        </Grid.Col>
-      </Grid>
-    </Group>
-    <Group grow pb="md">
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
-          <Text span>Description</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" pt="0" sm={3}>
-          <Text fw={600} span>
-            22 mai 2021
-          </Text>
-        </Grid.Col>
-      </Grid>
-    </Group>
-    <Group grow pb="md">
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
-          <Text span>Type de document</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" pt="0" sm={3}>
-          <Text fw={600} span>
-            22 mai 2021
-          </Text>
-        </Grid.Col>
-      </Grid>
-    </Group>
-    <Divider color="cyan.9" my="lg" size="sm" />
-    <Group grow pb="md" pt="md">
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" sm={3}>
-          <Text span>Titre</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" sm={3}>
-          <Text fw={600} span>
-            Facture_Medor
-          </Text>
-        </Grid.Col>
-      </Grid>
-    </Group>
-    <Group grow pb="md">
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
-          <Text span>Description</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" pt="0" sm={3}>
-          <Text fw={600} span>
-            -
-          </Text>
-        </Grid.Col>
-      </Grid>
-    </Group>
-    <Group grow>
-      <Grid>
-        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
-          <Text span>Type de document</Text>
-        </Grid.Col>
-        <Grid.Col pb="sm" pt="0" sm={3}>
-          <Text fw={600} span>
-            Facture
-          </Text>
-        </Grid.Col>
-      </Grid>
-    </Group>
-  </Card>
-);
diff --git a/packages/storybook-pages/src/Pages/DocumentDetails/DocumentDetails.tsx b/packages/storybook-pages/src/Pages/DocumentDetails/DocumentDetails.tsx
index 561e83d9..6673d537 100644
--- a/packages/storybook-pages/src/Pages/DocumentDetails/DocumentDetails.tsx
+++ b/packages/storybook-pages/src/Pages/DocumentDetails/DocumentDetails.tsx
@@ -9,14 +9,13 @@ import {
   Button,
   Flex,
   Grid,
-  Group,
   MantineProvider,
   Menu,
   Space,
   Tabs,
 } from '@mantine/core';
 import { createStyles } from '@mantine/styles';
-import { CaretLeft, Plus, Star } from '@phosphor-icons/react';
+import { CaretLeft, Star } from '@phosphor-icons/react';
 import { DropdownButton, Header, ResponsiveTabs } from '@smile/react-front-kit';
 import { FolderMove, primaryTheme } from '@smile/react-front-kit-shared';
 
@@ -26,7 +25,9 @@ import {
   CardMetadata,
   CardNative,
   CardPermissions,
-} from './DocumentDetails.mock';
+  CardsMetadata,
+} from '../pages.mock';
+
 import { DocumentView } from './DocumentView';
 
 const useStyles = createStyles((theme) => ({
@@ -153,15 +154,7 @@ export function DocumentDetails(): ReactElement {
                 <Space h="xl" />
                 <>{CardPermissions}</>
               </Tabs.Panel>
-              <Tabs.Panel value="2">
-                <>{CardNative}</>
-                <Space h="xl" />
-                <>{CardIdentity}</>
-                <Space h="xl" />
-                <Group grow>
-                  <Button leftIcon={<Plus />}>Nouvelle métadonnées</Button>
-                </Group>
-              </Tabs.Panel>
+              <Tabs.Panel value="2">{CardsMetadata}</Tabs.Panel>
               <Tabs.Panel value="3">{CardNative}</Tabs.Panel>
               <Tabs.Panel value="4">{CardPermissions}</Tabs.Panel>
               <Tabs.Panel value="5">{CardIdentity}</Tabs.Panel>
diff --git a/packages/storybook-pages/src/Pages/pages.mock.tsx b/packages/storybook-pages/src/Pages/pages.mock.tsx
index 241a41a0..dfb3390d 100644
--- a/packages/storybook-pages/src/Pages/pages.mock.tsx
+++ b/packages/storybook-pages/src/Pages/pages.mock.tsx
@@ -1,8 +1,29 @@
+/* eslint-disable react-refresh/only-export-components */
 import type { IActionBarAction, IDocument } from '@smile/react-front-kit';
 
-import { Avatar, Button, Menu, Space } from '@mantine/core';
-import { DownloadSimple } from '@phosphor-icons/react';
+import {
+  Avatar,
+  Button,
+  Card,
+  Checkbox,
+  Chip,
+  Divider,
+  Grid,
+  Group,
+  Menu,
+  Space,
+  Text,
+} from '@mantine/core';
+import {
+  DownloadSimple,
+  PencilSimple,
+  PencilSimpleLine,
+  Plus,
+  ShareNetwork,
+  TrashSimple,
+} from '@phosphor-icons/react';
 import { DropdownButton } from '@smile/react-front-kit';
+import { FolderMove } from '@smile/react-front-kit-shared';
 import { action } from '@storybook/addon-actions';
 
 export const headerContent = (
@@ -119,3 +140,223 @@ export const searchActions: IActionBarAction<IDocument>[] = [
     onAction: action('Download files'),
   },
 ];
+
+export const CardAction = (
+  <Card padding="40px" radius="lg">
+    <Text fw="600" size="lg" span>
+      Générales
+    </Text>
+    <Space h="lg" />
+    <Group spacing="xs">
+      <Button leftIcon={<FolderMove />}>Déplacer</Button>
+      <Button leftIcon={<PencilSimple size={14} weight="bold" />}>
+        Editer le contenu
+      </Button>
+      <Button leftIcon={<PencilSimpleLine size={14} weight="bold" />}>
+        Annoter
+      </Button>
+      <Button leftIcon={<TrashSimple size={14} weight="bold" />}>
+        Supprimer
+      </Button>
+    </Group>
+  </Card>
+);
+
+export const CardMetadata = (
+  <Card padding="40px" radius="lg">
+    <Text fw="600" size="lg" span>
+      Métadonnées
+    </Text>
+    <Space h="lg" />
+    <Group spacing="xs">
+      <Button leftIcon={<PencilSimple size={14} weight="bold" />}>
+        Editer les métadonnées
+      </Button>
+      <Button leftIcon={<Plus size={14} weight="bold" />}>
+        Créer une nouvelle version
+      </Button>
+    </Group>
+  </Card>
+);
+
+export const CardNative = (
+  <Card padding="40px" radius="lg">
+    <Text fw="600" size="lg" span>
+      Native
+    </Text>
+    <Space h="lg" />
+    <Group grow pb="md">
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
+          <Text span>Créer</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" pt="0" sm={3}>
+          <Text fw={600} span>
+            22 mai 2021
+          </Text>
+        </Grid.Col>
+      </Grid>
+    </Group>
+    <Group grow pb="md">
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
+          <Text span>Dernière modification</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" pt="0" sm={3}>
+          <Text fw={600} span>
+            22 mai 2021
+          </Text>
+        </Grid.Col>
+      </Grid>
+    </Group>
+    <Group grow pb="md">
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
+          <Text span>Créer par</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" pt="0" sm={3}>
+          <Text fw={600} span>
+            22 mai 2021
+          </Text>
+        </Grid.Col>
+      </Grid>
+    </Group>
+    <Group grow pb="md">
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
+          <Text span>Modifier par</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" pt="0" sm={3}>
+          <Text fw={600} span>
+            22 mai 2021
+          </Text>
+        </Grid.Col>
+      </Grid>
+    </Group>
+    <Group grow>
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
+          <Text span>Version</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" pt="0" sm={3}>
+          <Chip checked size="sm" variant="outline">
+            V2
+          </Chip>
+        </Grid.Col>
+      </Grid>
+    </Group>
+  </Card>
+);
+
+export const CardPermissions = (
+  <Card padding="40px" radius="lg">
+    <Text fw="600" size="lg" span>
+      Accés au document
+    </Text>
+    <Space h="lg" />
+    <Group spacing="xs">
+      <Button leftIcon={<PencilSimple size={14} weight="bold" />}>
+        Editer les droits
+      </Button>
+      <Button leftIcon={<ShareNetwork size={14} weight="bold" />}>
+        Partager en externe
+      </Button>
+    </Group>
+    <Space h="lg" />
+    <Checkbox label="Accès en mode hors ligne" size="sm" />
+  </Card>
+);
+
+export const CardIdentity = (
+  <Card padding="40px 40px" radius="lg">
+    <Text fw="600" size="lg" span>
+      Identité
+    </Text>
+    <Space h="lg" />
+    <Group grow pb="md">
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
+          <Text span>Titre</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" pt="0" sm={3}>
+          <Text fw={600} span>
+            22 mai 2021
+          </Text>
+        </Grid.Col>
+      </Grid>
+    </Group>
+    <Group grow pb="md">
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
+          <Text span>Description</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" pt="0" sm={3}>
+          <Text fw={600} span>
+            22 mai 2021
+          </Text>
+        </Grid.Col>
+      </Grid>
+    </Group>
+    <Group grow pb="md">
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
+          <Text span>Type de document</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" pt="0" sm={3}>
+          <Text fw={600} span>
+            22 mai 2021
+          </Text>
+        </Grid.Col>
+      </Grid>
+    </Group>
+    <Divider color="cyan.9" my="lg" size="sm" />
+    <Group grow pb="md" pt="md">
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" sm={3}>
+          <Text span>Titre</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" sm={3}>
+          <Text fw={600} span>
+            Facture_Medor
+          </Text>
+        </Grid.Col>
+      </Grid>
+    </Group>
+    <Group grow pb="md">
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
+          <Text span>Description</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" pt="0" sm={3}>
+          <Text fw={600} span>
+            -
+          </Text>
+        </Grid.Col>
+      </Grid>
+    </Group>
+    <Group grow>
+      <Grid>
+        <Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
+          <Text span>Type de document</Text>
+        </Grid.Col>
+        <Grid.Col pb="sm" pt="0" sm={3}>
+          <Text fw={600} span>
+            Facture
+          </Text>
+        </Grid.Col>
+      </Grid>
+    </Group>
+  </Card>
+);
+
+export const CardsMetadata = (
+  <>
+    <>{CardNative}</>
+    <Space h="xl" />
+    <>{CardIdentity}</>
+    <Space h="xl" />
+    <Group grow>
+      <Button leftIcon={<Plus />}>Nouvelle métadonnées</Button>
+    </Group>
+  </>
+);